:root {
  --primary: #009c82;
  --secondary: #ffb300;
  --grey: #878787;
  --lightgrey: #dadada;
  --black: #000;
  --white: #fff;
  --70primary: rgb(77 186 168 / 70%);
  --20primary: rgb(77 186 168 / 20%);
  --40secondary: rgb(255 180 0 /40%);
  --white95: rgb(255 255 255/95%);
}
.slick-track {
    padding: 1em 0;
}

/* TABLE*/
.cs-orders table thead {
    background: var(--primary);
    color: var(--white);
}

.cs-orders table{
  border-spacing: 0; 
}


.cs-orders table th, 
.cs-orders table tbody tr td{
 border: 0; 
  padding: 0.7em 0 0.7em 0.7em;
}
.cs-orders .cs-orderButton{
 float: unset; 
}

.cs-myAccount .cs-myAccountButtons{
 background: var(--20primary) !important;
    border-radius: 8px !important; 
}

li.active>a {
    color: var(--primary) !important;
    font-weight: bold;
  transition: 0.2s;
}
li.active>a:hover {
    color: var(--secondary) !important;
  transition: 0.2s;

}
.cs-startTextBox{
 background:none;  
  
}
.cs-lieferItem{
 background: var(--lightgrey); 
}
.cs-lieferItem.selected {
    background: rgb(77 186 168 / 70%);
}

.cs-secondInfoBox {
    background: none;
    color: var(--secondary);
    border: 0;
}

.cs-filterButton.cs-overlayButton.cs-standardButton {
    display: none;
}
.cs-galleryImageBox:hover {
    outline-color: var(--secondary) !important;
}
  h1, h5 {
    font-weight: 600 !important;
      color: var(--primary) ;

}

.cs-categoryPicture>a>img {
    object-fit: contain;
}
.cs-articleQuestion>.cs-infoBox {
    background: --white !important;
    color: var(--black);
}
.tabs.activeTab>span {
    color: var(--primary);
}
.cs-galleryImageBox.cs-activePicture {
    outline-color: var(--primary) !important;
}
span.eigenschaft-name, 
.cs-detailArtnum.cs-detailItems>span{
    font-weight: 600;
}

span.listpagerButtonActive {
    color: var(--primary);
}


#liveSearchResult ul.cs-livesearch li a{
 color: var(--black); 
  transition: 0.2s;
}
#liveSearchResult ul.cs-livesearch li a:hover{
 color: var(--primary); 
  transition: 0.2s;
}
#liveSearchResult ul.cs-livesearch li{
 background: white !important;  
}

.cs-contactForm > .cs-infoBox {
    background: white;
    color: var(--black);
}
.cs-contactForm>h1 {
    color: var(--primary);
    font-weight: 600;
}
/*Produktbox Kategorieübersicht*/

.artnamBox>h3>a {
    font-size: 16px;
    font-weight: bold;
}
.cs-articlePreviewSmallDescriptionBox>h3>a {
    font-weight: 600 !important;
}
article.cs-articlePreviewSmall, 
article.cs-articlePreview, 
.item.slick-slide{
    box-shadow: var(--20primary) 0px 2px 8px 0px;
    transition: 0.2s;
    border: 0px;
    padding: 10px;
    border-radius: 8px;

}
article.cs-articlePreviewSmall:hover, 
article.cs-articlePreview:hover, 
.item.slick-slide:hover{
    box-shadow: var(--70primary) 0px 2px 8px 0px;
    transition: 0.2s;
    border: 0px;
  
}
.cs-articlePreviewSmallPriceBox>div>div>div>span {
    color: var(--grey);
}
.cs-categoryPreview .cs-categoryName {
    background: var(--primary);
  transition: 0.2s;
  border-radius: 0px; 
  width: 100%;
}
.cs-categoryPreview .cs-categoryName:hover {
    background: var(--secondary) ;
    transition: 0.2s;

}
.cs-categoryPreview .cs-categoryName>a {
    color: white !important;
}


h2,h2.cs-betHeading,h3.cs-siteHeading {
    font-weight: bold;
    color: var(--primary);
}
/*SLIDER*/
.nivo-caption{
  
opacity: 1 !important;   
}
.moko-slider-box {
    border-radius: 3px;
    background: var(--white95);
    padding: 25px;
  margin-top: 25px; 
  margin-bottom: 25px;
}
.nivo-slice * {
    height: 100% !important;
}





body.cs-body.cs-loginpagebody>div>div>h1 {
    display: none;
}
body.cs-body.cs-loginpagebody>div>div>a {
    color: white !important;
}
.cs-forgotPassBox, .cs-forgotPassBox>h1 {
    color: white !important;
}

span.label {
    background: var(--white) !important;
    color: var(--primary);
}

/*Badges*/

article.cs-articlePreview .cs-auszeichnungenItem, 
.cs-articleDetail .cs-auszeichnungenItem{
    width: auto;
}
.cs-badgesBox.cs-right{
 right: 0%;  
}

/* Maßtabelle*/
table.blueTable {
  border: 1px solid var(--primary);
  background-color: var(--white);
  width: 100%;
  max-width: 800px;
  text-align: left;
  border-collapse: collapse;
}
table.blueTable td, table.blueTable th {
  border: 1px solid var(--black);
  padding: 6px 6px;
}
table.blueTable tbody td {
  font-size: 13px;
}
table.blueTable tr:nth-child(even) {
  background: var(--white);
}
table.blueTable thead {
  background: var(--primary);
}
table.blueTable thead th {
  font-size: 15px;
  font-weight: bold;
  color: var(--white);
  text-align: left;
}
table.blueTable tfoot td {
  font-size: 14px;
}
table.blueTable tfoot .links {
  text-align: right;
}
table.blueTable tfoot .links a{
  display: inline-block;
  background: var(--primary);
  color: var(--white);
  padding: 2px 8px;
  border-radius: 5px;
}


/*Button*/

a.measurechart-wilo-button´{
  color: var(--white) !important;
    background-color: var(--primary) !important;
      background: var(--primary) !important;
    border-color: var(--primary) !important;
      padding: 10px 15px !important;
    border-radius: 3px !important;
    text-decoration: none !important;

}



/*MObile Menu*/
.cs-overlayButton.cs-overlayMenuButton{
background: var(--primary) !important;
}
.cs-mobileCategorysHeader.noselect {
    background: var(--secondary) !Important;
}

/*Sale Tag
.cs-badgesBox .singleBadge {
    position: relative;
    padding: 10px !Important;
    font-size: 30px !Important;
    margin-bottom: 3px !Important;
    border-radius: 3px !Important;
    height: 40px !Important;
    width: 40px !Important;
    align-items: center;
    justify-content: center;
    display: flex;
}*/

/*AUszeichnung Oben Links*/
.cs-badgesBox .singleBadge {
    position: relative;
    padding: 0.5em 0.5em !important;
    font-size: 0.8rem;
    margin-bottom: 0.1em;
    border-radius: 3px;
height: auto !important; 
  width: auto !important;
    align-items: center;
    justify-content: center;
    display: flex;
}
.cs-badgesBox {
    min-height: auto !important;
}
.cs-badgesBox .badgeGreen {
    background: var(--secondary) !important;
}

/* Preis mit UVP*/
.cs-articleRightBox>div>div> .cs-priceFormat {
display: flex !important;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}
.priceRow {
    margin-right: 3em;
}












/*BUTTONS*/


.cs-body .cs-button1{
  padding: 0.72em 1em; 
  font-weight: 600;
  border: 0 !important;
  background: var(--primary);
  color: var(--white);
  border-radius:3px; 
  border: 0 !important;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 4px;
  transition: 0.2s;
}
.cs-body .cs-button1:hover {
  background: var(--secondary);
  color: var(--white);
  transition: 0.2s;
}

.cs-body .cs-button2 {
  width: auto;
  padding: 0.72em 2em;
  font-size: 1rem; 
  font-weight: 600;
  background: var(--secondary);
  color: var(--white);
  border-radius:3px; 
  border: 0;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 4px;
  transition: 0.2s;}
.cs-body .cs-button2:hover {
  background: var(--primary);
  color: var(--white);
  transition: 0.2s;
}

.cs-body .cs-button3, input.cs-button3 {
  width: auto;
  padding: 0.72em 2em;
  font-size: 1rem !important; 
  font-weight: 600;
  background: var(--secondary);
  color: var(--white) !important;
  border-radius:3px; 
  border: 0;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 4px;
  transition: 0.2s;
}
.cs-body .cs-button3:hover, input.cs-button3:hover {
  background: var(--primary);
  color: var(--white);
  transition: 0.2s;
}

.cs-button3>a {
  color:var(--white);
}














/*

a.cs-button3, 
.cs-button3, 
input.cs-button3{
    background: var(--secondary)  !important;
    color: var(--white)  !important;
    font-weight: 600;
    border: 0px !important;
      transition: 0.2s; 
  border-radius: 3px; 

}
.cs-button3>a{
 color: var(--white); 
}
a.cs-button3:hover, 
.cs-button3:hover, 
input.cs-button3:hover{
    background: var(--primary)  !important;
    transition: 0.2s; 

  
}



/*Button Farbe
.cs-button1, 
.cs-filterButton.cs-overlayButton.cs-standardButton{
    background: var(--primary) !important;
    border: 0px solid var(--primary);
      border-radius: 3px !important;
      transition: 0.2s; 
  padding: 0.72em 2em !important;
    font-weight: 600;


}
.cs-filterButton.cs-overlayButton.cs-standardButton:hover{
  background: var(--secondary) !important; 
  transition: 0.2s;
        border: 2px solid var(--secondary); 
  
}
.cs-button1{
     transition: 0.2s; 
 
}
.cs-button1:hover{
  background: var(--secondary) !important; 
  transition: 0.2s;
  
}

*/






.cs-actionButton{
  color: var(--white) !important;
    background-color: var(--primary) !important;
      background: var(--primary) !important;
    border-color: var(--primary) !important;
      padding: 5px 7px !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    transition: 0.2s; 


}
.cs-actionButton:hover{
    background-color: var(--secondary) !important;
      background: var(--secondary) !important;
    transition: 0.2s; 

}
.cs-actionButton > form > a, 
.cs-actionButton > a{
color: var(--white) !important; 
  font-weight: bold; 
}




/* cosmoshop 28.02.2025 PW - alles darüber ist nicht von cosmoshop - hier wird aber auch seitens des Kunden verändert. Also kein Indiz dafür das hier drunter NUR CS arbeitet*/
html body .theme-default .nivo-caption .cs-customSlider.cs-captionWrapper {flex-direction: row;}
html body .cs-customSlider.cs-captionWrapper .cs-sliderPicture {display: flex;justify-content: center;align-items: center;width: 100%;height: auto;}
html body .cs-customSlider.cs-captionWrapper .cs-sliderPicture img {position: relative;top: auto;left: auto;display: block;border-radius: 5px;}
html body .cs-customSlider.cs-captionWrapper .moko-slider-container .moko-slider-box {max-width: 92%;}
html body.cs-body footer, html body.cs-body footer a, html body.cs-body .cs-footerRow.copyright {color: #fff;}
html body.cs-body article.cs-categoryPreview .cs-categoryName {background: var(--primary);font-weight: 400;color: #fff;}
html body.cs-body .cs-outOfStock {background: --primary;}