/*---------------------------Warenkorb Overlay*/
.ui-dialog .ui-dialog-titlebar, 
.ui-dialog .ui-dialog-titlebar-close{
    background: var(--primary) !important;
}
.ui-dialog-title{
 font-weight: bold; 
}
/*---------------------------Logo*/

.cs-logo, .logo {
    max-width: 300px;
}
.cs-approverBox {
  display: none;
    background: var(--secondary);
    padding: 8px 8px;
    color: var(--white);
    font-weight: bold;
}
.cs-orders table th{
 padding: 0.7em 0.7em !important; 
}
input {
    border-radius: 3px;
}
/*---------------------------Bestelldetails*/
.cs-orderData.cs-row.cs-flex.cs-flexWrap.cs-flexSpaceBetween>div {
    border-radius: 9px;
}
.cs-orderDetail .cs-orderBestellnummer, 
.cs-orderDetail .cs-orderDatum, 
.cs-orderDetail .cs-orderStatus {
 background: transparent !important; 
  border: 0 !important; 
  padding: 0 !important; 
}
.cs-orderDetail .cs-orderBestellnummer > span, 
.cs-orderDetail .cs-orderDatum > span, 
.cs-orderDetail .cs-orderStatus  > span{
  font-weight: 600; 
}


.cs-submit input{
padding: 0.72em 2em !important;
    font-size: 1rem !important;
    font-weight: 600 !important; 
}



/*---------------------------display none*/
.cs-copyright {
    display: none;
}
.cs-orderListDetail {
    margin-top: 30px;
}
.cs-newCustomer>form>div {
    width: 50em;
}
.wk_lieferzeit.ampel_gruen {
    display: none !important;
}


/*---------------------------Login Page*/
body.cs-body.cs-loginpagebody .cs-wrapper {
    max-width: 85em !important;
  width: 100% !important;
}
body.cs-loginpagebody {
    background-image: url(/user_html/1685524180/pix/user_img/Bilder/wilobackground.jpg);
    min-height: 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
body.cs-body.cs-loginpagebody > div >.cs-header {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
}
body.cs-body.cs-loginpagebody > div > div > a > img{
  
  max-width: 30em;
}
body.cs-body.cs-loginpagebody .cs-wrapper .cs-lang {
    top: 1em;
    position: relative;
    float: right;
}


/*---------------------------Register Page*/

 .cs-newCustomer {
    width: 100%;
}
.cs-newCustomer>form>div {
    width: 100%;
}
/*---------------------------Search Results Page*/

.cs-searchResults .cs-articlePreview {
    width: calc(100%/5 - 2em) !important;
}
/*---------------------------Artikelvorschau*/

article.cs-articlePreviewSmall .cs-articlePreviewSmallDescriptionBox a {
 hyphens: auto !important; 
}
/*---------------------------Artikeldetails*/

  div#article_details_wilo {
  ;
    padding: 12px 0;
    color: var(--black);
    margin-top: 2em;
  width: fit-content;
}
.cs-articleDetail .cs-articlePriceInfo{
text-decoration: none !important; 
}
.blockVpe {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    max-width: 240px;
  width: unset !important;
}
.cs-badgesBox .badgeYellow{
 background: var(--secondary) !important;  
}


a.shippingCostPopup {
    display: none;
}



.cs-amountBox .cs-blockPriceVpeLeft, .cs-amountBox .cs-blockPriceLeft{
 width: unset !important; 
}
div.cs-footerCopyright>ul>li>a, 
.cs-forgotPassword > a, 
h1.loginBoxHeader{
 color: var(--white) !important;  
}





/*---------------------------STARTSEITEe*/

.cs-categoryPicture>a>img {
    max-height: 200px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 200px;
    /*width: 370px;*/
}

.cs-start .cs-categoriesBox{
 margin-bottom: 0px !important;  
}



.categoryPicture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*---------------------------Kategorieleiste*/

.cs-categoriesBox>div>ul>li>div>a>span {
    color: var(--primary)  !important;
    font-weight: 700;
  transition: 0.2s;
  font-size: 1.1em;
}
.cs-categoriesBox>div>ul>li:hover div a span {
    color: var(--secondary)  !important;
transition: 0.2s;
}
/*---------------------------Footer*/
footer .cs-footerBox {
    width: 33.33% !important;
}

.cs-footerRow.top, 
.cs-footerRow.payments, 
.cs-footerRow.copyright, 
footer{
    background: var(--primary) !important;
}
.cs-footerRow.copyright{
 color: var(--white);  
}
.cs-copyrightBox>a {
    color: var(--secondary);
}
.cs-copyrightBox>a:hover {
    color: var(--white);
}

.cs-footerRow.payments {
    display: none;
}
footer{
  margin-top: 50px;
}
/*---------------------------Footer Schrift Weiß*/
.cs-footerTop.cs-flex.cs-flexWrap {
    color: var(--white);
}
/*---------------------------Footer Links in weiß, Hover Pink*/
ul#main_categories_footer>li>a {
    color: var(--white);
  text-decoration: unterline; 
}
ul#main_categories_footer>li>a:hover {
    color: var(--secondary);
}
.cs-footerBoxContent>ul>li>a {
    color: var(--white);
}
.cs-footerBoxContent>ul>li>a:hover {
    color: var(--secondary);
}


/*---------------------------Kategorie Liste SVG*/
.cs-articleDetail .pagiIcons svg {
    width: 1.7em !important;
    height: 1.7em !important;
}
.pagiIcons * {
    fill: var(--primary) !important;
    transition: 0.2s;
}
.pagiIcons *:hover {
    fill: var(--secondary) !important;
    transition: 0.2s;

}

/*---------------------------Footer Überschrift bold*/
.cs-footerBoxHeader {
    font-weight: bold !important;
}
/*---------------------------Info Boxen in leicht transparent Grün*/
.cs-successBox{
 background: none; 
  color: var(--black);
}
.cs-abgCheckBox * {
    color: var(--primary) !important;
}
.cs-infoBox {
    background: transparent;
  color: var(--black); 
  font-size: 1rem;
}

/*---------------------------Lieferzeit ausblenden*/
div#lieferzeitStr {
    display: none !important;
}


/*---------------------------Bestellvorgang: Kästen Steps oben umfärben*/
.cs-statusbar li.cs-basketSteps.active {
    background: var(--primary) !important;
}
.cs-statusbar li.cs-basketSteps.active>span, .cs-statusbar li.cs-basketSteps.active>a {
    color: var(--white) !important;
}
li.cs-basketSteps {
    background: var(--white) !important;
    border: 2px solid var(--primary);
  border-radius: 3px; 
}
span.cs-wkStep {
    font-size: 1.1em !important;
}
/*---------------------------Bestellvorgang ausblenden*/
.moll-versandkosten {
    display: none;
}
.moll-versandkosten-betrag {
    display: none;
}
.cs-footer .cs-payments {
    display: none !important;
}
body.cs-body.cs-checkout .cs-container>div.cs-infoBox {
    display: none;
}

.cs-prices:nth-child(3) {
    display: none !important;
}


/*---------------------------Produktdetailseite*/
.cs-inStock{
 display: none !important;  
}
.cs-middleStock {
    background: none;
    color: red;
}
span.priceStars {
    display: none !important;
}

.cs-inStock, .cs-middleStock {
    font-size: 17px;
}
.cs-articleDetail .cs-articleName {
    font-size: 2.3rem !important;
    color: var(--primary)  !important;
}
.cs-articleRightBox .price {
    color: var(--primary) !important;
    font-weight: bold;
}
/*--------------------------- Frage zum Produkt ausblenden*/
.frageprodukt {
    display: none !important;
}


/*--------------------------- Bundle*/
.box-1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;;
    align-items: flex-start;
}
.box-1 > .additionalArticleBox {
    margin-bottom: 3.3em;
}



@media only screen and (max-width: 780px){
    .box-1 > .additionalArticleBox {
        max-width: 50%;
        width: 50%;
    }
}
@media only screen and (min-width: 780px){
    .box-1 > .additionalArticleBox {
        max-width: 33.33%;
        width: 33.33%;
    }
}
@media only screen and (min-width: 1100px){
    .box-1 > .additionalArticleBox {
        max-width: 25% !important;
        width: 25% !important;
    }
}
@media only screen and (min-width: 1600px){
    .box-1 > .additionalArticleBox {
        max-width: 15% !important;
        width: 15% !important;
    }
}

/*--------------------------- Bundle Komponenten Bilder größer*/
#bundleComponents .additionalArticleImage img {
    height: 113px !important;
}

/*--------------------------- Layout*/

aside.cs-aside {
    display: none !important;
}
section.cs-mainContent {
    width: 100% !important;
}

@media only screen and (min-width: 900px){
  .cs-category article.cs-articlePreview{
    width: calc(100% /4 - 2em) !important;
}
section.cs-mainContent {
    width: 100%;
}
}

/*--------------------------- Typografie*/
.cs-bold{
 font-weight: 600;  
}
body * {
    font-family: 'WILO', sans-serif; 
}
h1.cs-articleName {
    font-weight: bold !important;
}
h1.categoryHeader {
    font-weight: bold;
}

.artnamBox * {
    font-weight: bold;
}
/*--------------------------- Schriftart*/

@font-face {
    font-family: 'Wilo';
    font-style: normal;
    font-weight: 600;
    src: local('Semplicita Regular'),url(/user_html/1685524180/pix/user_img/Fonts/WILOPlusFMBol.woff) format('woff')
}
@font-face {
    font-family: 'Wilo';
    font-style: normal;
    font-weight: 400;
    src: local('Semplicita Regular'),url(/user_html/1685524180/pix/user_img/Fonts/WILOPlusFMReg.woff) format('woff')
}













/*---------------------------SLIDER--------------------------*/
img.nivo-main-image {
    min-height: 50vh;
        max-height: 50vh !important;

    object-fit: cover;
}


.moko-slider-box-image img {
    max-width: 50%;
}
.moko-slider-box div{
  font-size: 1em; 
  font-family: 'Wilo', sans-serif;
  margin-bottom: 2em;
}
.moko-slider-box h1{
  margin-top: 0; 
  color: var(--primary);
}

.moko-slider-button{
  border-radius: 5px;
 text-decoration: none; 
  padding: 0.7em 1em;
  background: var(--primary);
  color: var(--white) !Important;
  transition: 0.2s;
  border-bottom: 0px !Important;
  margin-top: 20px !important;
  
}
.moko-slider-button:hover{
 background: var(--secondary);
  transition: 0.2s;
}


img.moko-diashow-slider{
 display: block !important; 
 max-height: 450px !important;
  width: auto !important;
  top: unset !Important; 
  position: relative !important;
    left: unset !Important; 

}
.moko-slider-container .moko-slider-box {
    max-width: 50%;
}
.moko-slider-box-image{
 background: none !important; 
}
.moko-slider-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
.theme-default .nivo-controlNav a.active{
 background: var(--primary) !important; 
}
.theme-default .nivo-controlNav a{
 background: var(--secondary) !important; 
}
div#Slider-1 > img,
div#Slider-1-en > img,
.nivoSlider > img,
.nivo-slice > img{
    /* max-height: 60vh !important; */
    height: 60vh !important;
    object-fit: cover;
}
body .cs-startSlider {
    max-width: 100% !important;
    width: 100%;
}
.nivo-caption{
    opacity: 1 !important;   
}
.theme-default .nivo-directionNav a:hover{
 background: url(/user_html/1685524180/pix/user_img/Bilder/arrows-solid.png) no-repeat !important; 
}
.theme-default .nivo-directionNav a{
 background: url(/user_html/1685524180/pix/user_img/Bilder/arrows-transparent.png) no-repeat !important; 
}
.theme-default a.nivo-nextNav, .theme-default a.nivo-nextNav:hover {
    background-position: -30px 0 !important;
}