/*
 * CSS Änderungen von ARA-Marketing für entsprechendes Template   
 grün #9ad19e --   dunkelgrün #0B6121
/*
/*
 *
body {font-family: 'Noto Sans JP','Open Sans', sans-serif;}*/

/*Schrift für input-Group - da sonst verwicklungen*/
.input-group{font-family: 'Open Sans', sans-serif;}
/*Schriftfarben*/
 a {color: grey; }
 a:hover {color: #296778;}
.btn:hover{color:#296778;}

/*Farbe Balken unter Kategorie-Navigation-Top*/
header .navbar-nav > .nav-item > .nav-link::before {
    border-width: 0 0 6px;
    border-color: #296778;
    transition: width 0.4s;
   }
/*Farbe Balken unter Kategorie-Navigation-Links*/ 
aside .nav-panel > .nav > .active > .nav-link {
    border-bottom: 0.375rem solid #296778;
    cursor: pointer;
}

/*Farbe der Schrift - > Main-Navigation Megamenü*/
.navbar-expand-lg .navbar-nav a{color: #000;}
.navbar-expand-lg .navbar-nav a:hover {color: #296778 !important;}

/*Farbe Balken unter Seitenzahl-Anzeige-Breadcrump*/
.page-item.active .page-link::after, .page-item.active .page-text::after {
    border-bottom: 4px solid #013ADF;
}
/*Farbe Balken unter Seitenzahl-Anzeige-Tab-Artikeldetailansicht*/
.tab-navigation .nav-link::after {
    border-width: 0 0 6px;
    border-color: #296778;
}

/*Farbe Swatches Artikeldetailansicht*/
.swatches-text.active {
    border: 1px solid #296778;
	background-color: #f5f7fa;}

/*Buttonfarbe*/
.btn-primary {background-color: #FAAC58; border-color: #f2f2f2;}
.btn-primary:hover {background-color: #f2f2f2; border-color: #013ADF;}
.btn-outline-primary { border-color: #296778;}

/*Farbe Preisspanne-Slider */
 .noUi-horizontal .noUi-connect {background: #013ADF;}
 .noUi-horizontal .noUi-handle {background: #F8BF00;box-shadow: 0px 0px 0px 5px rgba(248, 191, 0, 0.5);}
  
/*Farbe Header-Top- Bar Megamenü */
#header-top-bar a {text-decoration: none;color: #fff !important; }
#header-top-bar a:hover:not(.dropdown-item):not(.btn), header a:hover:not(.dropdown-item):not(.btn) {color: #296778 !important;}

/*Farbe Dropdowns von Header-top-bar-Menü */
#header-top-bar a.dropdown-item {text-decoration: none;color: #000;}
#header-top-bar a.dropdown-item:hover{text-decoration: none;color: #296778;}

/*Farbe Dropdowns von Header-top-bar-Menü */
#shop-nav a.dropdown-item {text-decoration: none;color: #000;}
#shop-nav a.dropdown-item:hover{text-decoration: none;color: #296778;}

/*Farbe Logo-Zeichen Anmelden & Warenkorb & Wunschliste */
header .nav-right .nav-link {color: #000;}
header .nav-right .nav-link :hover{color: #ff0000;}

#header-top-bar header .nav-right .nav-link .dropdown-item {color: #fff000 !important; }

header .dropdown-menu a{color: #000; }
header a.dropdown-item {text-decoration: none;color: #000;}
#shop-nav .cart-dropdown a{color: #000;}

#language-dropdown li a{color: #000 !important;}



/*Hintergrundfarbe des Headers */
header {background-image: linear-gradient( cornflowerblue 0%, wheat 50%)}
@media (min-width: 992px) {header {min-height:170px; top: 30px !important;}}

/* opc-Menü Einstellungen, da immer im Weg :-) */   
@media (min-width: 992px) {#opc #opc-startmenu button { margin-top:25px;}}
@media (max-width: 991px) {#opc #opc-startmenu button { display:none;}}

/* Logo Größe 
@media (min-width: 992px) {header .navbar-brand img {height: 7.0rem; margin-top:-2px;}}

@media (max-width: 991.98px) {header .navbar-brand img {height: 3.40rem; margin-top:5px; margin-left:25px;}}
*/
/* Abhängig von Logogröße das Sticky-top -> height ändern */
.sticky-top { top: 30px; padding-top: 0px; height: 170px}




/*@media (min-width: 992px) {.sticky-top { top: 30px; padding-top: 0px; height: 170px}}

@media (max-width: 991.98px) {.sticky-top { top: 0px; padding-top: 0px; height: 90px}}

@media (max-width: 767.98px) {header.sticky-top { top: 0px; padding-top: 0px; height: 140px; position:relative}}
/* Abhängig von Logogröße das mainNavigation das margin-top ändern  */
@media (min-width: 991.98px) {#mainNavigation {margin-top:0px;}}
  
/*Suche nach unter LG-Modus */
@media (max-width: 991.98px)
{.navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl {
    padding-right: 0;
    padding-left: 0;
	margin-top: 25px;
}}

/*Main-Wrapper runter, 
#main-wrapper { margin-top: 20px;}
 */
/* Änderungen in top bar */
#header-top-bar {
	color:#fff;
	background-color: #585858;
	position:fixed;
	height:30px;
	left:0;
	right:0;
	z-index:1049;
}

#header-top-bar .nav-link {
  padding: 0.3rem 1rem;
}
/* Striche zwischen den Items */
li.nav-item::after {color:#424242;}

#header-top-bar li.nav-item a{margin-top:2px; font-size:90%; }

/*Eigene Head-Info vom Template */

.ara-headinfo {margin-top:7px; text-decoration: none; font-size: 90%; }
.ara-headinfo li {margin-right:20px; text-decoration: none; color:#f2f2f2;}

.ara-headinfo .fa-phone {color:#f2f2f2;}
.ara-headinfo .fa-envelope {color:#f2f2f2;}
.ara-headinfo a{color:#f2f2f2 !important;}

.ara-language {margin-top:-5px;}

#language-dropdown a{color: #000;}
#language-dropdown.dropdown-menu {padding-left:5px; padding-bottom:2px}

@media (min-width: 992px) {#shop-nav {right:1220px; top:10px;}}
@media (min-width: 1500px) {#shop-nav {right:140px; top:10px;}}

/*
@media (min-width: 992px) {.toggler-logo-wrapper .logo-wrapper {position: absolute;}}
@media (min-width: 992px){.align-items-lg-end {align-items: flex-start!important;}}
@media (min-width: 1300px) {.container { max-width: 103.125rem;}}

/* Burger-Menü Einstellungen unter 992px*/
.navbar-toggler .navbar-toggler-icon { margin-top: -7px;}
@media (min-width: 520px) {.toggler-logo-wrapper .burger-menu-wrapper {border: 0px solid #ff0000; background-color:transparent; width:135px; height:35px; margin-top:0.5rem; padding-top:0rem}}
@media (min-width: 520px) {.ara_bur {position:relative; color:#525252; font-size: 0.7rem; top: 0px; left:5px; }}


/*Dropdown von der mainNavigation*/
#mainNavigation .dropdown-body:last-child {
    width: 90%;
    border: 1px solid #f2f2f2;
    background: transparent;
    margin: auto;
	background-image:linear-gradient(to top, #D8D8D8 7%, white 78%);
}

/* Hintergrund der Schrift im Dropdown-Menü transparent */ 
.categories-recursive-dropdown.dropdown-menu {background-color: transparent;}
#shop-nav .dropdown-menu {border: 1px solid #BDBDBD;}

/*Einstellungen Kategorie-Navigation oben */
.nav-mobile-body {background-color: transparent; /*height:50px;*/margin-top:20px;}
@media (min-width: 992px) {.nav-mobile-body ul {/*height:50px;*/ margin-top:10px; overflow: hidden;}}

.nav-mobile-body .navbar-nav {margin-top: 1px;}

@media (min-width: 992px) {header .navbar-nav > .nav-item > .nav-link {height: 45px; padding-top:24px}}

/*Mega-Menü-Navigation, ohne unterkategorien */

#mainNavigation .nav-link {   display: flex;  justify-content: space-between;   align-items: center;   flex-wrap: nowrap; }

/*Pfeile im Megamenü */
#mainNavigation .nav-scrollbar-arrow.right {margin-top: 53px; background-image:linear-gradient(rgba(0, 0, 0, 0.00) 100%, #ffffff 100%)}
.fa-chevron-right:before { content: "\f101"; color: #ff0000; background-color:transparent;}

#mainNavigation .nav-scrollbar-arrow.left {margin-top:53px; background-image:linear-gradient(rgba(0, 0, 0, 0.00) 100%, #ffffff 100%)}
.fa-chevron-left:before { content: "\f100"; color: #ff0000; background-color:transparent;}

/* Sicher-bezahlen-Text oben bei Bestellvorgang -> im Template dann doch rausgenommen*/
#jtl-nav-wrapper > div > nav > div.secure-checkout-icon.ml-auto-util.ml-lg-0 > i {margin-left: 350px;}

/*Schrift im Open-Menü unter LG-Modus */
#mainNavigation > div.nav-mobile-header.d-lg-none > div > div.col.col-auto.nav-mobile-header-name.ml-auto-util > a {color: #000;}


/*Artikeldetailseite - Menge und Warenkorbbutton*/
@media (min-width: 992px) and (max-width:1250px) {#add-to-cart .col-sm-6 {flex: 0 0 100%; max-width:90%; margin-top:5px;}}


/* Artikeldetailseite - Kasten, wenn in den Warenkorb gelegt */
#pushed-success {
	border: 1px solid #8C8C8C;
	-webkit-box-shadow: 5px 5px 4px -1px rgba(206,232,209,0.89); 
	box-shadow: 5px 5px 4px -1px rgba(206,232,209,0.89);

}

#pushed-success img{max-width: 130px; height:auto;}

/* Modaler Hintergrund - Einstellung über JS 0B6121
.modal-backdrop { background-color: #f2f2f2;}*/


/*Side-Navigation*/
#sidepanel_left .nav-panel a:hover{color: #296778; font-weight: bold;}
#sidepanel_left .nav-link .dropdown-toggle a{color: #296778; font-weight: bold;}

#sidepanel_left .nav-item.dropdown.active > span a{color: #296778; font-weight: bold;}
#sidepanel_left .nav-item.active > a{color: #296778; font-weight: bold;}


/*Newsletter Einstellungen */
#footer .newsletter-footer-heading {color:#296778;}
#footer .btn:hover {color: #000;}
#footer .input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child)  {background-color: #296778;}

@media (min-width: 992px) {.newsletter-footer {border: 1px solid #f2f2f2;}}
@media (min-width: 992px) {#footer .newsletter-footer {padding: 15px;}}

/* footer */

#footer {
	background-color: #585858;
    color: #fff;
}

#footer a{color: #fff !important;}
#footer a:hover {color: #f3f3f3 !important;}

#footer .productlist-filter-headline {
	color:#fff; 
	border-bottom: 1px solid #f2f2f2;
	padding-bottom: 8px;
}


/*Vergleichsliste Einstellungen */
.comparelist .sticky-top { top: 0px;}


/*social-media-buttons*/
.btn-icon-secondary {border-color:#f2f2f2;}


/*Warenkorb-Form*/
 .input-group-prepend {background-color: #F5D0A9;}
 .input-group-prepend :hover{background-color: #0B6121 !important;}
 .input-group-append {background-color: #F5D0A9;}
 .input-group-append :hover{background-color: #0B6121 !important;}
 
#quantity-grp .input-group-text.unit.form-control {background-color: #FBF8EF !important;}


/*Einstellungen Warenkorb  -> Text über Breite*/
@media (min-width: 1200px) {.cart-items-body .list-unstyled {width: 430px; padding-top:15px;}}
@media (min-width: 600px) {.cart-items-body .partlist-items {width: 420px; }}
.cart-items-body .fa-heart:before {content: "\f004"; color: green;}
.fa-trash-alt:before {content: "\f2ed"; color: red;}

/* Bestellablauf - Farben */
.badge-primary {
    color: #525252;
    background-color: #9ad19e;
}
.stepper .step-active .step-content::after {background:#9ad19e; }
.checkout-steps .step-check {color: #9ad19e;}

.custom-control-input:checked ~ .custom-control-label::before { color: #ffffff;  border-color: #9ad19e; background-color: #9ad19e;}

/*Ribbon Sale*/

.ribbon-2 { background-color: #B40404;}
.ribbon-2::before {border-right-color: #B40404;}


.ribbon-8 { background-color: #ebebeb; color:#525252;}
.ribbon-8::before {border-right-color: #ebebeb;}


.ribbon-4 {  background-color: #9ad19e; color: #fff;}
.ribbon-4::before {border-right-color: #9ad19e;}