/*

 * Platz für eigene Änderungen direkt als CSS

 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.

 */



/* Kompatibilität eigene Seiten aus JTL 4*/

.panel-heading {

  padding: 10px 15px;

  border-bottom: 1px solid transparent;

  border-top-right-radius: 3px;

  border-top-left-radius: 3px;

}

.panel-default > .panel-heading {

  color: #333333;

  background-color: #f5f5f5;

  border-color: #dddddd;

}







@media (max-width: 767px) {

  .hidden-xs {

    display: none !important;

  }

}

@media (min-width: 768px) and (max-width: 991px) {

  .hidden-sm {

    display: none !important;

  }

}

@media (min-width: 992px) and (max-width: 1199px) {

  .hidden-md {

    display: none !important;

  }

}

@media (min-width: 1200px) {

  .hidden-lg {

    display: none !important;

  }

}





.img-responsive-width {

  max-width: 100%;

  height: auto;

}



.word-break,

.desc,

.desc_trunc,

.shortdesc,

.product-title {

  word-wrap: break-word;

  overflow-wrap: break-word;

  word-break: break-word;

  -webkit-hyphens: auto;

  -moz-hyphens: auto;

  -ms-hyphens: auto;

  hyphens: auto;

  overflow: hidden;

}



.desc_trunc {

  max-height:90px;

}



/* Eigene Klassen */

ul.rotes_quadrat>li {

  list-style-image:url('../../../NOVA_TB/images/Quadrat_aus_Logo_10px.png')

}

#content {

  list-style-image:url('../../../NOVA_TB/images/Quadrat_aus_Logo_10px.png')

}



/* sich langsam ausblendender Text für Kategoriebeschreibungen*/

.TB_Textauslauf

{

background: -webkit-linear-gradient(#000, #eee);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}





/* header-Image */

header.fixed-navbar {

  background: #000 url("../../../NOVA_TB/images/background_header.jpg") no-repeat scroll center top / 100% auto;

}

  /*

    .affix.up {

        top: -73px !important;

    }

    .affix.down {

        transition: top 0.3s;

    }

    */





/* Farbe der Bewertungssterne: 

.rating {

  color:#F00 !important;

}*/





/* Design übernommen aus Suchplugin JTL für Farb- und Herstellerfilter*/

.tiny {

	min-width:  43px;

	/*border:     1px solid #CCC;*/

	/*display:    block;

	float:      left;*/

	margin:     2px;

	text-align: center;

}



a.tiny {

	cursor:           pointer;

	text-decoration:  none;

	line-height:      20px;

	border:           1px solid #fff;

	background-color: #EEE;

	text-align:       center;

	min-width:        41px;

	/*display:          block;*/

	padding:          2px;

}



/*.tiny.active > a {

  border: 3px solid #75B1D6 !important

}*/



/* Farb- Herstellerfilter ohne padding ausgeben*/

.filter-item_manufacturer,

.filter-item_color {

	display: inline-flex;

    text-decoration: none;

}









.available a,

.box-link-wrapper .fa-truck

{

  color:#090 !important;	

}



.pull-left {

   float: left;	

}



.pull-right {

   float: right;	

}



.m25-left {

	margin-left:25px;

}



.m25-right {

	margin-right:25px;

}





.m10-bottom {

	margin-bottom:10px;

}



.m10-top {

	margin-top:10px;

}





/* Rabatt-Dreieck in der Ecke START */

.sonderpreis_prozent_text {

    display: block;

    margin: 2px 2px 2px 2px;

    font-size: 12px;

    font-weight: bold;

    text-align: center;

    color: #FFF;

}



.sonderpreis_overlay {

	text-align: right;

	/* background: url(../../../../mediafiles/Sonstiges/Rabatt-Dreieck_80px_ohneTransp.png) no-repeat scroll right top; */

	background: #d41217;

    transform: rotate(22deg);

    -moz-transform: rotate(22deg);

    -webkit-transform: rotate(22deg);

    -o-transform: rotate(22deg);

    -ms-transform: rotate(22deg);

	/*float: right;*/

	position: absolute;

	margin-top:10px;

	right: 5px;

	color: #fff;

	z-index: 5;

	max-height: 18px;

	/* height: 45px;

	width: 45px; */

	

}



.sonderpreis_prozent_text_artikelansicht {

    display: block;

    margin: 6px 6px 6px 6px;

    font-size: 24px;

    font-weight: bold;

    text-align: center;

    color: #FFF;

}



.sonderpreis_overlay_artikelansicht {

	text-align: right;

	/* background: url(../../../../mediafiles/Sonstiges/Rabatt-Dreieck_80px_ohneTransp.png) no-repeat scroll right top; */

	background: #d41217;

    transform: rotate(22deg);

    -moz-transform: rotate(22deg);

    -webkit-transform: rotate(22deg);

    -o-transform: rotate(22deg);

    -ms-transform: rotate(22deg);

	float: right;

	color: #fff;

	z-index: 5;

	/* height: 80px;

	width: 80px; */

	margin-right:35px;

	/* margin-top:20px; */

	

}

/* Rabatt-Dreieck in der Ecke Ende */







/* Eigene Seiten */

.startseite_textbox {

  /* min-width:50%;

  max-width:600px; */

  border-left: solid 1px #CCC;

}



/* SLIDER */

/* * {box-sizing:border-box}*/



/* Slideshow container */

.slideshow-container {

  max-width: 1000px;

  position: relative;

  margin: auto;

}



/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {

  background-color: rgba(0,0,0,0.8);

}



/* Caption text */



/* Hide the images by default */

.text_sli {

  background:#000;

  z-index: 8; 

  opacity: 0.8;

  color: #f2f2f2;

  font-size: 15px;

  padding: 8px 12px;

  position: absolute;

  bottom: 8px;

  width: 100%;

  text-align: center;

}



/*.text {

  color: #f2f2f2;

  font-size: 15px;

  padding: 8px 12px;

  position: absolute;

  bottom: 8px;

  width: 100%;

  text-align: center;

}*/



/* Number text (1/3 etc) */

.numbertext {

  color: #f2f2f2;

  font-size: 12px;

  padding: 8px 12px;

  position: absolute;

  top: 0;

}



/* The dots/bullets/indicators */

.dot {

  cursor: pointer;

  height: 15px;

  width: 15px;

  margin: 0 2px;

  background-color: #bbb;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.6s ease;

}



.active, .dot:hover {

 /*0 background-color: #717171; */

}



/* Fading animation */

.fade_sli {

  -webkit-animation-name: fade;

  -webkit-animation-duration: 1.5s;

  animation-name: fade;

  animation-duration: 1.5s;

}



@-webkit-keyframes fade_sli {

  from {opacity: .4}

  to {opacity: 1}

}



@keyframes fade_sli {

  from {opacity: .4}

  to {opacity: 1}

}



/* Hide the images by default */

.mySlides_notfirst {

  display: none;

}



/* Slider ENDE */



.zahlungsarten_img {

  max-width:76px;

  height:auto;

  margin: 3px;

}

.versandarten_img {

  max-height:31px;

  width:auto;

  margin: 3px;

}

.angebotsbox_img {

  max-width:300px;

  max-height:200px;

}



#startseite_angebotsbox {

  width:100%;	

}



.custom_box_einzeln {

  float:left;

  margin:5px;

  border: 1px solid #AAA;

}



/* Tabellen auf eigenen Seiten */

.table_standard {

  width: 100%;

  border: 1px solid #AAA;	

  margin-bottom:20px;

  table-layout:fixed;

  

}



.table_standard thead {

   font-weight:bold;

   background-color:#000;

   color:#FFF;

}



.table_standard tr:first-child {

   font-weight:bold;

   background-color:#000;

   color:#FFF;

}



.table_standard tr td:first-child {

   font-weight:bold;

}



.table_standard tr td > p {

   text-align: center;

}





.table_tb_size {

  width: 100%;

  border: 1px solid #AAA;	

  margin-bottom:20px;

  table-layout:fixed;

  text-align:center;

  

}



.table_tb_size thead {

   font-weight:bold;

   background-color:#000;

   color:#FFF;

}



.table_tb_size thead th {

   text-align:center !important;

}





.bordered tr td{

  border: 1px solid #dddddd !important;

}



.standard_rot {

	color:#d41217;

	

}



.cell_20 {

  width: 20%;

  padding: 5px;

}

.cell_25 {

  width: 25%;

  padding: 5px;

}



.cell_33 {

  width: 33%;

  padding: 5px;

}

.cell_40 {

  width: 40%;

  padding: 5px;

}

.cell_60 {

  width: 60%;

  padding: 5px;

}

.cell_80 {

  width: 80%;

  padding: 5px;

}

.cell_100 {

  width: 100%;

  padding: 5px;

}





.tablehead {

  /* background-color: rgba(220,220,220,1); */

  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);

}





.shipping_table {

  width: 100%;

  border: 1px solid #AAA;	

  margin-bottom:20px;

}

.shipping_cell {

  width: 20%;

  border: 1px solid #AAA;

  padding: 5px;

}



.table_groessen {

  width: 100%;

  border: 1px solid #AAA;	

  margin-bottom:20px;

  table-layout:fixed;

  padding: 5px;

  

}



.table_groessen thead {

   font-weight:bold;

   background-color:#000;

   color:#FFF;

}





.table_groessen tr td:first-child {

   font-weight:bold;

}









/**********************************

***								***		

***		Bewertungssystem		***

***								***		

**********************************/	



.bewertung_leer {

  float:right;

  width: 80px;

  height: 16px;

  background-image: url(../images/star-small.png);

  background-position:0px 0px;

}



.bewertung_voll {

  height: 16px;

  background-image: url(../images/star-small.png);

  background-position:0px 32px;

  z-index:2;

}



.bewertung_tooltip {

    /* position: absolute; */

	left: 15px;

	top:75px;

    display: inline-block;

}

#rating_productboxlist.bewertung_tooltip {

    position: absolute;

}



.bewertung_tooltip .bewertung_tooltip_content {

    /* visibility: hidden; */

    max-width: 160px;

    background-color: rgba(30, 30, 30, 0.7);

    color: #fff;

    padding: 7px 7px;



    /* Position the tooltip text */

    position: absolute;

    z-index: 5;

	top: 40px;	

	left: 0px;

    /* Fade in tooltip */

    opacity: 0;

    transition: opacity 0.3s;

}



#rating_productdetails.bewertung_tooltip {

    position: relative !important;

}



/* Tooltip arrow */

/* .bewertung_tooltip .bewertung_tooltip_content::after {

    border: solid;

    border-color: #111 transparent;

    border-color: rgba(30,30,30,.7) transparent;

    border-width: .0 .4em .4em .4em;

    top: -0.33em;

    content: "";

    display: block;

    left: 60%;

    position: absolute;

} */



/* Show the tooltip text when you mouse over the tooltip container */

.bewertung_tooltip:hover .bewertung_tooltip_content {

    visibility: visible;

    opacity: 1;

}



#tabelle_bewertungszusammenfassung {

  min-width:50%;	

}



#article_votes {

  float:left;

  min-width:45%;

}

@media (min-width: 768px) and (max-width: 991px) {

  #article_votes {

    max-width: 250px !important;

  }

}

@media (min-width: 992px) {

  #article_votes {

    max-width: 320px !important;

  }

}



#panel_bewertung {

  min-width: 50%;

  margin-bottom: 10px;

  margin-right:10px;

  float:left;

}

@media (max-width: 767px) {

  #panel_bewertung {

    width: 100% !important;

  }

}

Table.bewertung {

  margin-left: 3px;	

  /*margin-top: 1em;*/

  min-width: 300px;

  width: 100%;

  border: 1px #ccc solid;

}

@media (min-width: 768px) and (max-width: 991px) {

  Table.bewertung {

    width: 320px !important;

  }

}



Table.bewertung > tbody > tr > td {

	padding: 4px;

}



#reviews-overview_panel {

  width: 100%;	

  margin-left: 15px !important;

}



.mini-bewertungscontainer {

  width: 135px;

  height: 48px;

  border-radius: 10px;

  background-color: rgba(255,255,255,.8);

  padding: 2px;

}





/* Ampelanzeige mit farbigen Quadraten */

.delivery-status  {

  display:flex;

}





.delivery-status .status-0 {

  color: #B80000;

  /* red */

}

.delivery-status .status-0::before {

  content:url('../../images/ampel0.png');

  position:relative;

  top: 3px;

  margin-right: 6px;

}

.delivery-status .status-1 {

  color: #2896ec;

  /* blue */

}

.delivery-status .status-1::before {

  content:url('../../images/ampel1.png');

  position:relative;

  top: 3px;

  margin-right: 6px;

}

.delivery-status .status-2 {

  color: #007C00;

  /* green */

}



.delivery-status .status-2::before {

  content:url('../../images/ampel2.png');

  position:relative;

  top: 3px;

  margin-right: 6px;

}







/**********************************/







/* Alte CSS aus JTL4 ENDE*/



.fa-star-half-alt,

.fa-star {

  color:#F90;

	

}



.rotes_quadrat h4 {

	margin-top:10px !important;

}



.dropdown-body a {

  color:#1C1D2C;	

}



.estimated_delivery {

  margin-left: 8px;	

}