/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

<link href="css/custom.css" rel="stylesheet">

*/


#topbar { border-bottom: none; transition: all .2s ease-in-out;}
#footer ul li a { transition: all 200ms ease-in-out;}
.header-inner { background-color: #fff; transition: all ;}



.darkModeDiv { background-color: #283144; }
.darkModeSection { background-color: #283144 !important; }

#header .header-inner .darkModeDiv { background-color: #283144 !important; }

#mainMenu nav ul li .dropdown-menu.darkModeDropdown { background-color: #283144; border-color: #3E4B67;}
.dropdown-menu.darkModeDropdown { background-color: #283144; }

.copyright-content { background-color: #f1f1f3; }
.copyright-content.darkModeFooter { background-color: #283144 !important; }

#mainMenu nav > ul > li > a.darkModeHref { color: #f1f1f3; }
#mainMenu nav > ul > li > a.darkModeHref:hover { color: #EE780E; }

#mainMenu nav>ul>li .dropdown-menu>li [class*="col-"]>ul>li>a.darkModeHref { color: #f1f1f3; }
#mainMenu nav>ul>li .dropdown-menu>li [class*="col-"]>ul>li>a.darkModeHref:hover { color: #EE780E; }

#mainMenu nav>ul>li .dropdown-menu.darkModeUl { background-color: #283144; border-color: #283144; }

ul .card { border: 2px solid #f1f1f3; }
ul .card:hover { border: 2px solid #EE780E; }

ul .card.darkModeDiv { border: 2px solid #414F6D; }
ul .card.darkModeDiv:hover { border: 2px solid #EE780E; }

@media screen and (min-width: 992px) {
    ul .card { transition: all ease-in-out 100ms; }
    ul .card:hover { transform: scale(1.05);}
}

a.darkModeHref center { color: #f1f1f3;}

.darkModeParagraph { color: #f1f1f3;}

.darkModeUl li { color: #f1f1f3;}

#topbar .top-menu>li>a.darkModeHref { color: #f1f1f3; }

.header-extras.darkModeDiv .darkModeUl li a.darkModeHref i { color: #f1f1f3; }

.darkModeH1, .darkModeH2, .darkModeH3, .darkModeH4, .darkModeH5, .darkModeH6 { color: #f1f1f3; }

.darkModeH3 a.darkModeHref { color: #f1f1f3; }

.icon-box.darkModeDiv .icon i { color: #EE780E; }

.product-price.darkModeDiv ins { color: #EE780E; }

.post-item .post-item-description > h2 > a.darkModeHref { color: #f1f1f3; }
.post-item .post-item-description > h2 > a.darkModeHref:hover { color: #EE780E; }

.item-link.darkModeHref { color: #f1f1f3; }

.post-item.border .post-item-wrap.darkModeDiv { border: 1px solid #414F6D; }

#footer ul.darkModeUl li a.darkModeHref { color: #f1f1f3; transition: all 100ms ease-in-out;}
#footer ul.darkModeUl li a.darkModeHref:hover { color: #EE780E; }
#footer .copyright-text.darkModeDiv, 
#footer .copyright-text.darkModeDiv a { color: #f1f1f3; }
#footer .copyright-text.darkModeDiv a:hover { color: #EE780E; }

.shop-category-box-title.darkModeDiv { background-color: #364159; opacity: 0.9; transition: all ease-in-out 200ms;}


/* DURCHSUCHEN SIE UNSERE KATEGORIEN SECTION - CARDS HOVER EFFECT */
.shop-category-box { overflow: hidden; }
.shop-category-box img { transition: all 200ms ease-in-out;}
.shop-category-box:hover img { transform: scale(1.125);}
/* DURCHSUCHEN SIE UNSERE KATEGORIEN SECTION - CARDS HOVER EFFECT */

/* BESTSELLER SECTION - CARDS HOVER EFFECT */
.product .product-image a img { transition: all 200ms ease-in-out; }
.product:hover .product-image a img { transform: scale(1.125); }
/* BESTSELLER SECTION - CARDS HOVER EFFECT */



.dropdown-menu { max-height: 100vh; overflow-y: scroll; }


/* SEACH POPUP */
#search.darkModeDiv input.form-control { color: #f1f1f3; }


.shop-promo-box.darkModeDiv { border: 8px solid #414F6D; }
.shop-promo-box.darkModeDiv a.darkModeHref:hover { color: #f1f1f3;}

/* ONLINE-SHOP */

/* FILTERS INPUTS */
.btn.btn-light.btn-shadow.w-100.darkModeHref { box-shadow: none; }
.btn.btn-light.btn-shadow.w-100.darkModeHref:hover { box-shadow: 0 4px 16px #414F6D; }
.p-dropdown.p-dropdown-invert ul.p-dropdown-content.darkModeUl { background-color: #414F6D; border: 1px solid #414F6D;}


.widget.darkModeDiv ul.list.darkModeUl li a.darkModeHref { color: #f1f1f3; transition: all .1s ease-in-out;}
.widget.darkModeDiv ul.list.darkModeUl li a.darkModeHref:hover { color: #EE780E;}


.breadcrumb ul.darkModeUl li a.darkModeHref { color: #f1f1f3;}
.breadcrumb ul.darkModeUl li a.darkModeHref:hover { color: #EE780E;}


/* PRODUCT CARD */

.listing.products .grid-item .product-category a.darkModeHref,
.listing.products .grid-item .product-title h6 a.darkModeHref { color: #f1f1f3; }


.product .product-description .product-category.darkModeDiv { color: #f1f1f3 !important;}

.container .carousel.shop-products .flickity-slider .product .product-image,
.shop .listing.products .grid-item .product .product-image { height: 200px; display: grid; place-content: center;}

.container .carousel.shop-products .flickity-slider .product,
.shop .listing.products .grid-item .product .product-description { position: relative; height: 120px;}
.container .carousel.shop-products .flickity-slider .product .product-price,
.shop .listing.products .grid-item .product .product-price { position: absolute; right: 0; bottom: 0; }

#product-page .container .product .flickity-slider { display: flex; align-items: center; justify-content: center;}

.product { min-height: 28rem; }

.lines-button.x.darkModeHref span.lines {background-color: #f1f1f3;}
.lines-button.x.darkModeHref span.lines::before {background-color: #f1f1f3;}
.lines-button.x.darkModeHref span.lines::after {background-color: #f1f1f3;}


.form-check.darkModeDiv { background-color: #414F6D; }

.tokens.darkModeDiv .token { color: #f1f1f3;}
.tokens .token .remove { margin-left: 8px;}
.tokens.darkModeDiv .token .remove { color: #EE780E;}

.listing.products .grid-item {
    padding: 0px 20px 20px 0px;
}

.shop.darkModeDiv .darkModeDiv .listing.products .grid-item .product .product-description .product-category a,
.shop.darkModeDiv .darkModeDiv .listing.products .grid-item .product .product-title h6 a { color: #f1f1f3; }


.list.list-lines.darkModeUl li { border-bottom-color: #414F6D;}

section#page-content .content .card.darkModeDiv { border-color: #414F6D; }

.card.darkModeDiv ol li::marker { color: #f1f1f3;}

.card.darkModeDiv table td,
.card.darkModeDiv table tr { color: #f1f1f3;}
.card.darkModeDiv strong { color: #f1f1f3;}
.card.darkModeDiv span {color: #f1f1f3;}

.card table.tg tbody tr th, 
.card table.tg tbody tr td { border: 1px solid #f1f1f3; padding: 2px;}

.card.darkModeDiv table.tg tbody tr th, 
.card.darkModeDiv table.tg tbody tr td { border: 1px solid #414F6D; padding: 2px;}

/* PRODUKTKONFIGURATOR */
.order-form-size-preview.darkModeDiv { background-color: transparent; }
.sizer.darkModeDiv { background-color: transparent; }
.order-form-box.order-form-box-profiles.darkModeDiv { background-color: transparent; }

td.ps-5 div { background-color: transparent; }
td.ps-5 div.darkModeDiv label { color: #f1f1f3;}

#sizing table tbody tr td:nth-child(3) div { background-color: transparent;}

.order-form-size-preview.darkModeDiv span.width-label,
.order-form-size-preview.darkModeDiv span.length-label {background-color: #283144; color: #f1f1f3};

.card.darkModeDiv { border: 1px solid #414F6D !important; }

hr.darkModeHr { background-color: #414F6D; }

.order-form-item {
    transition: none !important;
    -webkit-transition: none !important;
}

.darkModeDiv b { color: #f1f1f3; }
.darkModeDiv ol li::marker { color: #f1f1f3; }

.darkModeParagraph { color: #f1f1f3 !important;}

.custom-checkbox.darkModeDiv label { color: #f1f1f3; }

.darkModeDiv label { color: #f1f1f3; }

.body-inner { background-color: #fff; }
.body-inner.darkModeDiv { background-color: #283144; }


@media screen and (max-width: 768px) {
    .order-form-box.order-form-box-size table tbody tr {
        display: flex !important;
        flex-direction: column !important;
    }
    .order-form-box.order-form-box-size table tbody tr td {
        width: 100% !important;
        margin: 2rem 0;
    }

    .order-form-box.order-form-box-profiles div {
        display: flex !important;
        flex-direction: column !important;
    }

    .order-form-box.order-form-box-profiles div .order-form-item {
        width: 100% !important;
        margin-top: 1rem;
    }
    
    .order-form-box-surface-types div {
        display: flex !important;
        flex-direction: column !important;
    }

    .order-form-box-surface-types div .surface-item {
        width: 100% !important;
        margin-top: 1rem;
    }

    .order-form-box-surface-configuration div {
        display: flex !important;
        flex-direction: column !important;
    }
    .order-form-box-surface-configuration div .order-form-item {
        width: 100% !important;
    }

    .form-item.hide-this { display: none !important;}

    .order-form-item button { margin-top: 1rem; }

    #preview-box {
        margin-top: 8rem !important;
    }

    .order-form-box-accessories div {
        display: flex !important;
        flex-direction: column !important;
    }

    .order-form-box-accessories div .order-form-item {
        width: 100% !important;
    }

    .order-form-box-accessories div:nth-child(4) {
        width: 100% !important;
    }

    .order-form-previev-container .col8-set {
        float: none !important;
        width: 100% !important;
    }

    .order-form-box-countries div {
        display: flex !important;
        flex-direction: column !important;
    }
    .order-form-box-countries div .order-form-item {
        width: 100%;
    }
}




/* PRODUCT PAGE */

#product-page .flickity-viewport .flickity-slider .polo-carousel-item a img { transform: none;}
#product-page .flickity-viewport .flickity-slider .polo-carousel-item a img:hover { transform: none;}
#gtx-trans { display: none;}

.tabs.tabs-folder.darkModeDiv .tab-pane .darkModeParagraph a {color: #EE780E;}
.tabs.tabs-folder .tab-pane p a {color: #EE780E;}
.tabs.tabs-folder.darkModeDiv .nav-item a.nav-link.darkModeHref { color: #f1f1f3;}
.tabs.tabs-folder.darkModeDiv .nav-item a.nav-link.darkModeHref.active { color: #EE780E; border: 1px solid #414F6D;}
.tabs.tabs-folder .tab-content.darkModeDiv { border-color: #414F6D;}



.tab-content table tbody tr,
.tab-content table tbody tr td,
.tab-content table tbody tr td b { transition: all 100ms ease-in-out;}

.tab-content.darkModeDiv table tbody tr td:nth-child(2) { color: #f1f1f3;}
.tab-content.darkModeDiv table tbody tr:hover { background: #414F6D !important;}
.tab-content.darkModeDiv table tbody th:hover td { color: #000;}
.tab-content.darkModeDiv table tbody tr:hover td { color: #000;}
.tab-content.darkModeDiv table tbody tr:hover td b { color: #000;}

.carousel.dots-dark .flickity-page-dots .dot { box-shadow: 0 0 0 2px #f1f1f3 !important; }
.carousel.dots-dark .flickity-page-dots .dot::after { background-color: #f1f1f3 !important; }

#box-product .quantity-prices.darkModeDiv th { color: #f1f1f3;}
#box-product .quantity-prices.darkModeDiv tr { color: #f1f1f3;}
#box-product .quantity-prices.darkModeDiv td { color: #f1f1f3;}
#product-page .price-wrapper.darkModeDiv .price.product-price.final-price,
#product-page .price-wrapper.darkModeDiv .tax { color: #f1f1f3;}

.price-wrapper.darkModeDiv del,
.price-wrapper.darkModeDiv strong { color: #f1f1f3;}
.product-description .product-category a {transition: all .1s ease-in-out;}
.product-description.darkModeDiv .product-category a {color: #f1f1f3;}
.product-description.darkModeDiv .product-category a:hover {color: #EE780E;}

/* SHOP CHECKOUT */

#shop-checkout.darkModeSection .card-body span,
#shop-checkout.darkModeSection .card-body h4,
#shop-checkout.darkModeSection .card-body { color: #f1f1f3;}

#shop-checkout.darkModeSection small.options { color: #f1f1f3;}

#formPanel.darkModeDiv { background-color: #364159 !important; }

#formPanel.darkModeDiv #offerForm div.darkModeDiv { background-color: #364159 !important;}


/* LOSUNGEN MENU DROPDOWN */

#mainMenu ul li.dropdown.mega-menu-item ul.dropdown-menu.w-75 { width: auto !important; max-width: 1600px !important;}


#mainMenu ul li.dropdown.mega-menu-item ul.dropdown-menu.w-75 div.card { width: 175px !important; height: 150px !important;} 

#mainMenu > div > nav > ul > li.dropdown.mega-menu-item > ul > li > div > div > ul > li > div { width: 175px !important; height: 230px !important;}


h1 { font-size: 22px !important; }
h2 { font-size: 18px !important; }
h3 { font-size: 16px !important; }

#mainMenu div.container li.mega-menu-content div.card-body a center { font-size: 12.25px;}


@media screen and (min-width: 1024px) {
    .container { max-width: 90% !important;}
    #topbar .container {max-width: 100% !important;}
    #header .header-inner .container { max-width: 100% !important; }
}




/* BLOG */
@media screen and (min-width: 768px) {
    #blog .post-item .post-item-wrap .post-image a img { max-height: 300px !important; width: 100% !important; object-fit: cover;}
}

#blog .post-item-description div ul li { font-size: 16px !important; }

.w-100-vw { max-width: 100vw !important;}