/* Colors */
/*
blue: rgb(36, 43, 45);
green: rgb(0, 126, 197);
text color grey: #4a4a49;
light grey: #f5f5f5;
*/

/* Generall CSS */
body, select, input, button, textarea, button, .textbox, input[type="text"]{font: 100% 'Roboto', Arial, Helvetica, sans-serif;}
body{color: #4a4a49; background: #fff;}
a{color: #4a4a49;}
a:hover{color: rgb(36, 43, 45);}

#pageContent{width: 940px; overflow: visible;}
#page.bigPage #content{padding: 0; margin-top: 0; width: 100%;}

.lineBox{padding: 10px 0;}

body .submitButton[disabled], body .submitButton{border: 0; border-radius: 0; background: rgb(0, 126, 197);}
body .submitButton[disabled]:hover, body .submitButton:hover{background: rgb(0, 126, 197);}

#pageContent{padding: 0 0 15px;}
#page.bigPage #content{width: 100%; box-sizing: border-box; margin-top: 0;}
#content .pageHead{font-family: 'Roboto Condensed';}
div.sidebarLeft #content, div.sidebarRight #content{width: 735px;}
#sidebar{margin: 10px 15px;}
#sidebar .tree li.active > a, #sidebar .tree a:hover,
#sidebar .tree li > a, #sidebar .tree li.exp > a, #sidebar .tree li.active > a,
#content .pageHead{color: #4a4a49;}


/* HEADER */
#header .headerMenuWrapper{right: 25px;}

#header,
#headerBackground{height: 76px;}
#headerBackground{background-color: rgb(36, 43, 45);}
#navigationBackground{height: 40px; top: 76px; background: #fff; border-bottom: 1px solid #ccc;}

#header #logo,
#header a{color: #fff;}
#header #logo{position: absolute; top: 0; height: inherit; margin: 0;}
#header #logo img{width: 104px; padding: 6px 0;}


#topMenu,
#topMenu li,
.data-protection-link,
#header .selectedValue,
.selectedValue a,
.topPopList{display: inline-block; float: none; margin: 0; padding: 0; background: none; font-size: 12px; font-weight: 500; line-height: initial;}

#topMenu,
.topPopList{margin: 6px 0 0 12px;}
#topMenu li:last-child{margin-left: 12px;}
#topMenu a:hover{color: #fff; text-decoration: underline;}

#languageTrigger > a span::after,
#servicesTrigger > a span::after,
.topPopList .flyoutBox li.active span::after{content: '\f107'; font-family: 'FontAwesome'; font-weight: 300; font-size: 18px; position: relative; top: 2px; line-height: 14px; color: #fff; padding-left: 2px;}
.topPopList .flyoutBox li.active span::after{color: #4a4a49;}
.topPopList li.active span{background: none;}
.flyoutBox{top: -3px; left: -8px;}
.flyoutBox #services li:not(:first-child) a:hover{background: rgb(0, 126, 197); color: #fff;}
#services,
#languages{position: relative; border: none; border-radius: 0; box-shadow: none; font-size: 12px;}
#services{width: 103px;}
#services li a{color: #4a4a49; font-weight: 500;}

#languages a.flag span, .selectedValue a.flag span{background-image: none; text-indent: initial; font-weight: 500;}
#languages a{padding: 2px 7px;}
.flyoutBox #languages a.selected,
.flyoutBox #languages a:hover{background: rgb(0, 126, 197);}
.flyoutBox #languages li a.selected span,
.flyoutBox #languages a:hover span{color: #fff;}
.flyoutBox #languages li.active a{background: none;}
.flyoutBox #languages li.active a span,
.flyoutBox #languages li a span {color: #4a4a49;}


#topMenu .login::after,
#topMenu li:last-child::after,
.topPopList:first-of-type::after{content: '|'; position: relative; left: 6px; color: #fff;}


#header .searchWrapper.outer{position: absolute; top: 35px; right: 300px; width: auto; height: auto; background: none;}
#header .searchBox{position: static;}
#header .searchBox .textbox{display: inline-block; width: 255px; height: 30px; margin-right: -4px; padding: 0 0 0 10px; float: none; border-radius: 0;}
#header .searchBox .searchSubmit{width: 45px; height: 30px; background: rgb(0, 126, 197); border-radius: 0; vertical-align: top; font-family: 'Roboto Condensed'; font-weight: 700; font-size: 14px;}

#header #miniBasket{top: 30px; right: 20px; text-decoration: none;}
#header #miniBasket .basket-text{display: inline-block; margin-top: 10px; margin-right: 20px; vertical-align: top;}
.basketBox img{position: static;}
#miniBasket .counter{top: -5px; right: 23px; width: 20px; height: 20px; padding: 0; line-height: 21px; border-radius: 50%; border: 1px solid #fff; background: rgb(0, 126, 197);}
#header #basketFlyout.new{top: 76px; width: 290px; padding: 0 0 15px; background: #fff; font-size: 14px; box-shadow: 0 0 10px 0 rgba(128, 128, 128, 0.75); border-radius: 0;}
#header #basketFlyout.new .buttons{padding: 0 20px;}
#header #basketFlyout.new .buttons .submitButton{display: inline-block; color: #fff; float: right;}
#header #basketFlyout li a:hover,
#header #basketFlyout li a:hover .item{background: #fff; color: rgb(36, 43, 45);}
#header #basketFlyout a{color: inherit;}
#header #basketFlyout.new .wkempty{padding: 15px 15px 8px; text-align: left;}

/* Generell - Headernavi */
#navigation{margin: 76px 0 0;}
#navigation .home a{padding: 9px 10px 10px;}
#navigation > li a{color: #4a4a49; padding: 12px 15px; text-transform: uppercase !important; font-weight: 500; font-size: 18px; font-family: 'Roboto Condensed';}
#navigation > li:hover, #navigation > li.current{background: rgb(0, 126, 197);}

/* Startseite */
#welcomeBanner{font-size: 0; margin: 0 0 85px;}
#welcomeBanner .sliderOverlay {display: inline-block; width:345px; height:235px; background-color: rgb(206, 205, 205); vertical-align: top;}
#welcomeBanner .sliderOverlay h3{padding: 33px 0; margin: 0; font-family: 'Roboto Condensed'; color: #fff; font-size: 55px; text-align: center;}
#welcomeBanner .sliderOverlay h3 .smaller{display: block; font-size: 20px; font-weight: 500; text-transform: uppercase !important;}
#welcomeBanner .sliderOverlay h3 span:nth-child(2){font-size: 65px;}

#productList.startView{float:left; width:595px; margin:0;}
#productList h2{font-size:18px;}
#productList.startView .sectionHead{padding:0; background:transparent; color:#000; box-shadow:none;}
#productList.startView #newItems{margin:0;}
#productList.startView .productData{margin:10px 4px 40px;}

#topBox{float:right; width:305px; margin:0;}
#topBox h2{font-size:22px; margin:0 0 28px; color: rgb(36, 43, 45); text-transform: uppercase !important; font-family: 'Roboto Condensed';}
#topBox .topArticle{position:relative; overflow:hidden; margin:0 0 10px; padding:0 0 10px; border-bottom:2px solid #c1c1c1;}
#topBox .topArticle img{float:left; height:65px; width:65px; margin:0 15px 0 40px;}
#topBox .topArticle .number{position:absolute; width:20px; margin:0; padding:1px 0 2px; border:1px solid #898989; top:20px; left:5px; color:#fff; background:#b9b9b9; background:linear-gradient(to bottom, #ccc 7%, #848484); text-align:center; font-size:14px; font-weight:bold; border-radius:4px;}
#topBox .topArticle .info{margin:15px 0 0; font-weight:bold;}
#topBox .topArticle .info .name{overflow:hidden; margin:0; white-space:nowrap; text-overflow:ellipsis;}
#topBox .topArticle .info .price{margin:0;}

#topBox .topArticle .number{background: rgb(0, 126, 197); width: 31px; padding: 7px 0; border: 0px; border-radius: 50%;}
#topBox .topArticle{border-bottom: 1px solid #c1c1c1;}

#topBox .topArticle .info .name,
.gridView .productName,
#topBox .topArticle .info .price,
.gridView .productPrice{font-family: 'Roboto Condensed'; font-weight: 500; color: #4a4a49;}

.gridView .productPrice{font-weight: 700;}


/* PÜL */
.dropDown label{padding: 0 5px 0 0px;}
.refineParams{font-size: 14px;}
.dropDown p{background: none; padding-right: 15px;}
.dropDown p:after{content: '\f107'; font-family: 'FontAwesome'; position: relative; left: 2px;}
.dropDown label{padding: 0;}
.dropDown .value{padding: 3px 8px 3px 3px;}
.dropDown ul{border: 0; border-radius: 0; box-shadow: 0 0 10px 0 rgba(128, 128, 128, 0.75);}
.dropDown ul a:hover, .dropDown ul a.selected{background: rgb(0, 126, 197);}

/* wk steps*/
.selectedValue a:hover, .basketFunctions button{color: rgb(36, 43, 45);}
.checkoutOptions #optionLogin{padding-left: 0;}
.checkoutOptions .option{width: 425px;}
.checkoutOptions .option:last-child{padding-right: 0;}
.checkoutSteps{padding: 0 15px;}
.checkoutSteps span,
.checkoutSteps a{font-family: 'Roboto Condensed'; font-size: 14px;}
.checkoutSteps li{background-image: url('../../img/steps.png');}
.colorList li i{color: rgb(0, 126, 197);}
.basketitems th,
.basketitems tr:last-child td{border-bottom: 2px solid #dcdcdc;}
.basketitems tbody tr{border-top: 2px solid #dcdcdc;}
.basketitems td{padding-top: 10px;}
.mayOrder img{padding: 0 25px 90px 0;}

.basketitems th{font-size: 14px;}
.basketitems .basketFunctions{margin: -5px 0 0; text-align: left;}
.basketitems .basketFunctions button{background: rgb(36, 43, 45); color: #fff; margin: 2px 0; padding: 3px; height: auto; font-size: 12px;}


/* Breadcrumbs */
#breadCrumb{padding: 10px; font-size: 12px; font-weight: 500;}
#breadCrumb span,
#breadCrumb a{color: inherit;}
#breadCrumb a:hover{color: rgb(36, 43, 45);}

/* EAA */
.detailsInfo .information .productMainInfo #productTitle{font-family: 'Roboto Condensed'; font-size: 25px; font-weight: 700; color: rgb(36, 43, 45);}
.detailsInfo .price{color: #000;}
.detailsInfo .amountPriceInfo{margin: 5px 0 8px;}
.detailsInfo .amountPriceInfo tr{padding: 0 2px; line-height: 14px; background: #f5f5f5;}
.detailsInfo .amountPriceInfo th{background: #fff; padding: 2px 15px 2px 5px; font-size: 12px;}
.detailsInfo .amountPriceInfo td{background: none; padding: 2px 15px 2px 5px; font-size: 12px;}
.detailsInfo .stockFlag,
.detailsInfo .toBasket label{font-size: 14px;}
.detailsInfo .toBasket #noticeList{padding: 5px 0; font-size: 12px;}
.detailsInfo .toBasket #toBasket::before{top: 7px;}
.eaabox h3{font-size: 16px; font-family: 'Roboto Condensed';}
#details #detailsRelated #itemTabs > li > a{font-size: 14px;}
#details #detailsRelated{padding: 30px 0 0;}

/* FLYOUT */
#modalbasketFlyout.new img{border: 0;}
#modalbasketFlyout.new h3{border: 0;}
#modalbasketFlyout.new i.closePop, .basketFlyout i.closePop{color: rgb(36, 43, 45);}
.basketFlyout li a{border-bottom: 0;}
#modalbasketFlyout.new .right,
#modalbasketFlyout.new h4{font-size: 14px;}

/* FORM */
label, select, input, button, textarea, button, .textbox, input[type="text"], .checkoutOptions input[type=password], .checkoutOptions input[type=text]{font-size: 15px;}
input[type="password"], input[type="text"], select{height: 25px;}
h3.blockHead{font-size: 18px; border: 0;}
.form, .form li{width: 380px;}
.form label{width: 165px;}
.form .underInput.short{margin-left: 120px;}
.form label.req{font-weight: 500;}
.form li.formSubmit{padding-left: 0;}
.oxValidateError{padding: 5px 0 5px 178px;}
.invoiceAdress{margin: 10px 0 25px 178px;}
body .submitButton.largeButton,
body a.submitButton,
body .submitButton[disabled],
body .submitButton,
.checkoutCollumns #userChangeAddress.largeButton,
.checkoutCollumns #userChangeShippingAddress.largeButton{font-size: 16px; padding: 6px 22px 6px 10px;}
body a.submitButton::before {content: '\f105'; font-family: 'FontAwesome'; top: 6px;}
body a.submitButton.back{padding: 6px 10px 6px 22px;}
body a.submitButton.back::before {content: '\f104';}
body .submitButton.largeButton:before,
body a.submitButton.largeButton::before,
.checkoutCollumns #userChangeAddress.largeButton:before,
.checkoutCollumns #userChangeShippingAddress.largeButton:before{top: 6px;}
body a.submitButton.prevStep{padding: 6px 7px 6px 19px;}
body a.submitButton.prevStep::after{content: '\f104'; font-family: 'FontAwesome'; position: absolute; left: 6px;}
body a.submitButton.smallButton{padding: 6px 20px 6px 8px; font-size: 14px;}
body a.submitButton.smallButton::before{top: 4px;}

/* Footer */
#footer{margin: 40px 0 0; background: rgb(36, 43, 45);}
#footer .container{display: flex; width: 940px; margin: 0 auto; padding: 40px 0; justify-content: space-between; box-sizing: border-box; color: #fff;}
#footer .service-links a{padding-right: 20px; color: #fff; text-transform: uppercase !important; font-family: 'Roboto Condensed';}
#footer .service-address h4{font-family: 'Roboto Condensed'; font-weight: 500; text-transform: uppercase;}
#footer .service-address span{font-size: 14px;}
#footer .service-address a{color: #fff;}
#powered{margin: 20px 0 0 0; text-align: left;}
#powered a span{display: inline-block; margin: 2px 5px 0 0; color: #fff; font-size: 14px; font-family: 'Roboto Condensed'; vertical-align: top;}

/* FF - Suggest */

/* B2B Accounts */
.smxb2b2UserList li .placeholder{height: 0;}
div.smxB2bAccountBox{top: 5px !important; right: 300px !important;}
#smxb2b_accountid{border: 0; font-size: 12px;}
.smxB2bAccountBox label{font-size: 12px; color: #fff;}
.smxB2bAccountBox label strong{font-weight: 500 !important;}

/* My Account */
.colorStyle{border: 0; background: rgb(0, 126, 197);}
#orderList .row1, #orderList .row2, #orderList .row3, #orderList .row4, #orderList .row5, #orderList .row6{font-size: 16px;}
#orderList .orderHead .row1 .fa {border-radius: 50%; width: 20px; height: 20px; padding: 0;}
#orderList .orderHead .row1 .fa-angle-right::before{position: relative; top: 2px;}
#orderList .orderHead .row1 .fa-angle-down::before{position: relative; top: 3px;}

/* CrefoPay styling */
.basket-nextprev {display: flex; justify-content: space-between; margin-top: 30px;}
.basket-nextprev .button-dagri {display: block; position: relative; font-size: 16px; text-decoration: none; color: #fff; font-weight: bold; cursor: pointer;}
.basket-nextprev .button-dagri::after {position: absolute; top: 6px; font-family: 'FontAwesome';}
.basket-nextprev .button-dagri:hover {color: #fff;}
.step-back .button-dagri {padding: 6px 7px 6px 19px; border-color: #c1c1c1; background: #c1c1c1;}
.step-back .button-dagri::after {content: '\f104'; left: 6px;}
.step-submit .button-dagri {padding: 6px 22px 6px 10px; background: rgb(0, 126, 197);}
.step-submit .button-dagri::after {content: '\f105'; right: 6px;}
.save-connection {display: none;}
#pageContent .status {margin: 15px 0;}