/* Dark/Light switcher 
 * See also: head.tpl | header.tpl | theme-switcher.css | theme-switcher.js
 */
#header #theme-toggle {
	background: transparent;
	border: 0;
	outline: none;
	color: #e5fbff;
    cursor: pointer;
	margin-top: .9375rem;
	margin-left: .725rem;
    
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#header #theme-toggle:hover {
    color: #e3e3e3
}

#header svg.sun-and-moon {
	vertical-align: bottom !important;
	margin-right: .125rem;
	overflow: visible;
    color: #fff
}

.sun-and-moon > :is(.moon, .sun, .sun-beams) {
  transform-origin: center;
}

.sun-and-moon > .sun-beams {
  stroke: #fbfbfb;
  stroke-width: 2px;
}

html.dark .sun-and-moon > .sun {
  transform: scale(1.75);
}

html.dark .sun-and-moon > .sun-beams {
  opacity: 0;
}

html.dark .sun-and-moon > .moon > circle {
  transform: translateX(-7px);
}

@supports (cx: 1) {
  html.dark .sun-and-moon > .moon > circle {
    cx: 17;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sun-and-moon > .sun {
    transition: transform .5s ease-in;
  }

  .sun-and-moon > .sun-beams {
    transition: transform .5s ease, opacity .5s ease-in;
  }

  .sun-and-moon .moon > circle {
    transition: transform .25s ease-out;
  }

  @supports (cx: 1) {
    .sun-and-moon .moon > circle {
      transition: cx .25s ease-out;
    }
  }

  html.dark .sun-and-moon > .sun {
    transition-timing-function: ease;
    transition-duration: .25s;
    transform: scale(1.75);
  }

  html.dark .sun-and-moon > .sun-beams {
    transition-duration: .15s;
    transform: rotateZ(-25deg);
  }

  html.dark .sun-and-moon > .moon > circle {
    transition-duration: .5s;
    transition-delay: .25s;
  }
}
/* /Dark/Light switcher */


/* Theme Transistion */
body {    
	transition: all .4s ease;
}
/* /Theme Transistion */


/* Theme Dark */
    html.dark a:not(a.btn),
     html.dark .quickview .arrows{
        color: #32c7e6 }

    html.dark #blockcart-modal .modal-title{
	   background: linear-gradient(85deg, transparent 20%, rgba(37, 39, 45, .922), rgba(37, 39, 45, .922));}
    html.dark .product-comment-modal .modal-footer{
       background: linear-gradient(85deg, transparent 7%, rgba(37, 39, 45, .922), rgba(37, 39, 45, .922));}

    html.dark #cart #header .header-nav svg,
     html.dark #cart #header .header-nav i{
        opacity: .922;}
    
    html.dark body, 
     html.dark #header, 
      html.dark #header .header-top,
       html.dark .special-list #header .header-nav .row:before, 
        html.dark #product 
         html.dark #header .header-nav .row:before,
          html.dark #products .product-description, 
           html.dark .featured-products .product-description, 
            html.dark .product-accessories .product-description, 
             html.dark .product-miniature .product-description,
              html.dark #products .thumbnail-container, 
    html.dark .featured-products .thumbnail-container, 
     html.dark .product-accessories .thumbnail-container, 
      html.dark .product-miniature .thumbnail-container,    
       html.dark #products .highlighted-informations, 
        html.dark .featured-products .highlighted-informations, 
         html.dark .product-accessories .highlighted-informations, 
          html.dark .product-miniature .highlighted-informations,
    html.dark .card, 
     html.dark .contact-form,
      html.dark .page-content.page-cms,
       html.dark #manufacturer #main ul .brand,
        html.dark .page-my-account #content .links a span.link-item,
         html.dark #pagenotfound #main .page-content,
          html.dark #products .page-not-found,
    html.dark body#checkout section.checkout-step .address-item,
     html.dark body#checkout section.checkout-step .delivery-options .delivery-option,
      html.dark body#checkout #gift_message textarea, 
       html.dark body#checkout #delivery textarea,
        html.dark body#checkout #order-summary-content .summary-selected-carrier,
         html.dark #order-items > div:has(h3.h3),
          html.dark #order-items table tr.total-value,
    html.dark [paypal-acdc-card-wrapper=""] form{
        background-color: #25272d}

    html.dark .product-discounts > .table-product-discounts thead tr th,
     html.dark .product-discounts > .table-product-discounts tbody tr td {
        border-color: #25272d}

    html.dark body#checkout p:has(.js-show-details),
     html.dark body#checkout #order-summary-content h4.js-show-details {
        border-color: #fbfbfb}

    html.dark .page-my-account #content .links a span.link-item:hover {
        border-color:  #2a2a2e}

    html.dark .modal-header, 
     html.dark .modal-body,   
      html.dark #product .quickview .modal-content h1.h1,
       html.dark .quickview .modal-content h1.h1,
        html.dark #product .quickview .modal-content .h1-add,
         html.dark #product #header .header-nav .row:before,
    html.dark .quickview .modal-content .h1-add,
     html.dark #blockcart-modal .modal-header,
      html.dark #blockcart-modal .modal-body,
       html.dark .fancybox-skin,
        html.dark .hi-cookie-block.white-popup,
         html.dark .mfp-close-btn-in .mfp-close:after,
    html.dark .hi-cookie-block,
     html.dark #bonsearch-popup-wrapper .modal-body {
        background-color: rgba(37, 39, 45, .922)}   
	  
    html.dark .block-category .text-muted,
     html.dark #manufacturer #main ul .brand-products a,
      html.dark #desktop_bonmm_0 #hidden-button .burger-text,
       html.dark #czservicecmsblock .service_container .service-area > a{
    	color: #d5d5d5 !important}
    html.dark .quickview .modal-footer {
        background: linear-gradient(300deg, transparent 40%, rgba(37, 39, 45, .922), rgba(37, 39, 45, .922))}
    html.dark #header, 
     html.dark .special-list #header .header-nav .row:before, 
      html.dark #product #header .header-nav .row:before,       
       html.dark .special-list #_desktop_logo a:before, 
        html.dark #product #_desktop_logo a:before,
         html.dark #cart #_desktop_logo a:before{ 
        box-shadow: 0 4px 0 0 rgba(0, 0, 0, .222) }    

    html.dark #cms #_desktop_logo.legal-notice .logo { 
        opacity: .888 }
    
    html.dark #wrapper, 
     html.dark .simple-cookie_note,
      html.dark #order-items .order-line,
       html.dark #order-items table { 
        background: #1c1b22 }
    html.dark #products .thumbnail-container, 
     html.dark .featured-products .thumbnail-container, 
      html.dark .product-accessories .thumbnail-container, 
       html.dark .product-miniature .thumbnail-container {
        border-radius: 3px}
    html.dark .special-list #content-wrapper .pagination a.previous i {
        left: 0}
    html.dark .special-list #content-wrapper .pagination a.next i {
        right: -15px}
    html.dark .special-list #content-wrapper .pagination a.js-search-link i {     
        top: -12px;
        font-size: 4.5rem}
    html.dark .special-list #content-wrapper .pagination a.previous.js-search-link,
     html.dark .special-list #content-wrapper .pagination a.next.js-search-link {
        background: transparent }
    #payment-logo-block img {
        filter: grayscale(1) brightness(.355) contrast(1.777);}
    html.dark .whatsapp-qr { filter: none }

    html.dark #shopthemes-top {
        /*background: rgba(255, 255, 255, .955)*/
        background-image: linear-gradient(to top,rgba(255, 255, 255, .955) 37%, #ffffffbd 90%);}
    
    html.dark #header a:not(
        #header .allert_note a,
        #header .wish_link_17 a)
     html.dark .wish_link_text,
      html.dark form .form-control-label,
       html.dark .logo_text,
        html.dark .contact-rich .block .data,
         html.dark span.form-control-comment,
    html.dark .cart-summary-line .label,
     html.dark .cart-summary-line .value,
      html.dark #cart a.label,
       html.dark .product-line-grid-right .product-price,
        html.dark #bonsearch-popup-wrapper .modal-body p,
         html.dark body#checkout section.checkout-step .address-item,
    html.dark body#checkout section.checkout-step .address-item .h4,
     html.dark body#checkout section.checkout-step .address,
      html.dark body#checkout section.checkout-step .delivery-options .delivery-option .h6,
       html.dark body#checkout section.checkout-step .delivery-options .delivery-option label,
        html.dark body#checkout #delivery textarea,
         html.dark body#checkout #order-summary-content h4.black,
          html.dark body#checkout #order-summary-content .card-block,
    html.dark body#checkout .summary-selected-carrier,
     html.dark body#checkout #order-summary-content #order-items h3.h3,
      html.dark body#checkout #order-summary-content .order-confirmation-table a,
       html.dark body#checkout .order-confirmation-table,
        html.dark #cart-summary-product-list .product-price,
         html.dark #cart-summary-product-list,
          html.dark #post-product-comment-modal .custom-checkbox label,
    html.dark .product-comment-modal .required,
     html.dark [paypal-acdc-card-wrapper=""] form label,
      html.dark .desc_contact,
       html.dark #products .product-price-and-shipping,
        html.dark .product-miniature .product-price-and-shipping{
        color: #fbfbfb}

    html.dark .dropdown, 
     html.dark #wrapper .breadcrumb li:last-child,
      html.dark .footer-container li a, 
       html.dark .block-contact,
        html.dark #products .product-title a, 
         html.dark .featured-products .product-title a, 
    html.dark .product-accessories .product-title a, 
     html.dark .product-miniature .product-title a,
      html.dark #products .highlighted-informations .quick-view, 
       html.dark .featured-products .highlighted-informations .quick-view, 
        html.dark .product-accessories .highlighted-informations .quick-view, 
         html.dark .product-miniature .highlighted-informations .quick-view,      
    html.dark .footer-container .h3, 
     html.dark #footer .container .h4,
      html.dark #block_myaccount_infos .myaccount-title a,
       html.dark h4.payment-logo-title,
        html.dark #cart i,
         html.dark .block-categories .category-sub-menu li[data-depth="0"] > a.current,
    html.dark .block-category h1,
     html.dark #main, 
      html.dark .sitemap h2,
       html.dark #sitemap #main a,
        html.dark body#checkout #content-wrapper .cart-container + .label,
         html.dark #order-confirmation p,
    html.dark #pagenotfound #main .page-content,
     html.dark #pagenotfound #main .page-content p,
      html.dark #products .page-not-found,
       html.dark #products .page-not-found p,
        html.dark .page-my-account #content .links a i,
         html.dark .page-my-account #content .links a span.link-item,
    html.dark #product-details .label,
     html.dark .quickview p,
      html.dark .product-description p,
       html.dark #cart h1,
        html.dark .contact-rich h4,
         html.dark .contact-form h3,
    html.dark body,
     html.dark .product-information,
      html.dark .product-additional-info p,
       html.dark p,
        html.dark .block-contact .navbar-toggler .material-icons,    
         html.dark #product .h1-add label, 
    html.dark .quickview .h1-add label {
        color: #e3e3e3}

    html.dark #custom-text { background: transparent }
    html.dark .footer-container .share-social-items a{
        background: #24b9d7}
    html.dark .footer-container .share-social-item-icon:before {
        filter: grayscale(1) brightness(1.444)}
    
    html.dark .featured-products h2,
     html.dark #product-comments-list-header,
      html.dark #products{
        color: #bfbfbf}

    html.dark .featured-products > h2:not(
        #category .featured-products > h2),
      html.dark #product-comments-list-header{
        border-color: rgb(136, 136, 136);}

    html.dark .featured-products > h2:not(#category .featured-products > h2, 
     html.dark #index .featured-products > h2):after,
      html.dark #product-comments-list-header:after{
        background-image: linear-gradient(135deg, transparent 50%, rgba(149, 149, 149, .922) 50%);}
    
     html.dark .modal-backdrop.in,
      html.dark .fancybox-overlay,
       html.dark .mfp-bg,
        html.dark #bonsearch-popup-wrapper.modal{
        background: rgba(95, 96, 96, .977);
        opacity: 1}
    html.dark .special-category #wrapper #left-column {
        background: rgba(23, 23, 23, .555)}
    html.dark .special-category #wrapper #left-column:hover {
        background: rgba(23, 23, 23, .977)}
    html.dark .block-categories .category-sub-menu li[data-depth="0"] > a,
     html.dark .block-categories .category-sub-menu li:not([data-depth="0"]):not([data-depth="1"]) a,
      html.dark #product .wishlist-button-add, 
       html.dark #product .social-sharing li,
        html.dark #cart .cart-container .qty i {
        color: #24b9d7}

    html.dark #search_filters .facet .facet-title, 
     html.dark #search_filters_brands .facet .facet-title, 
      html.dark #search_filters_suppliers .facet .facet-title {
        color: #d4d4d4}
     
    html.dark .facet p,
     html.dark .facet-dropdown .select-title,
      html.dark #search_filters .facet .facet-label a, 
       html.dark #search_filters_brands .facet .facet-label a,  
        html.dark #search_filters_suppliers .facet .facet-label a,
         html.dark #category-base_link i.home,
    html.dark .modal .h1, 
     html.dark .modal .product-price, 
      html.dark .modal .close,
       html.dark #product #content-wrapper .h1,
        html.dark #product #content-wrapper .product-price,
         html.dark .tabs .nav-tabs .nav-link,
    html.dark #post-product-comment-modal .criterion-rating label,
     html.dark .product-comment-modal label.form-label{
        color: #fff!important }    

    html.dark .special-category #left-column #search_filters,
     html.dark .special-category #left-column #search_filters .facet {
	    border-image: linear-gradient(90deg, #f6f6f6 75%, transparent 25%) 1}
    html.dark .special-category #left-column #search_filters .facet ul li {
	    border-image: linear-gradient(90deg, #000 75%, transparent 25%) 1} 

    html.dark .page-content.page-cms h2,
     html.dark .page-content.page-cms p.headline2,
      html.dark .page-content.page-cms p,
       html.dark .page-content.page-cms ul,
        html.dark .hi-cookie-content, 
         html.dark .hi-cookie-content p, 
    html.dark .hi-cookie-item-desc{
        color: #fff}

    html.dark .hi-cookie-logo img {
        filter: grayscale(1) contrast(2) brightness(1.5);}

    html.dark #products .thumbnail-container:hover .product-description:after, 
     html.dark #products .thumbnail-container:focus .product-description:after, 
      html.dark .featured-products .thumbnail-container:hover .product-description:after, 
       html.dark .featured-products .thumbnail-container:focus .product-description:after, 
        html.dark .product-accessories .thumbnail-container:hover .product-description:after, 
         html.dark .product-accessories .thumbnail-container:focus .product-description:after, 
    html.dark .product-miniature .thumbnail-container:hover .product-description:after, 
     html.dark .product-miniature .thumbnail-container:focus .product-description:after {
        border-color: #000}
    
    html.dark #manufacturer h1 { 
        color: #c4c3c3}    
  
    html.dark body#checkout section.checkout-step.-complete:not(
        body#checkout section.checkout-step.-complete.-current) {
        background-color: #2a2a2e}
    html.dark body#checkout section.checkout-step.-complete h1 .text-muted,
     html.dark #contact .psgdpr_consent_message span:last-child,
      html.dark #product-availability, 
       html.dark .product-delivery-time:not(
        .product-additional-info .product-delivery-time){
        color: #acacac !important}

    html.dark .product-discounts > .product-discounts-title,
     html.dark .additional-price-info{
        color: #6f6f6f}

    html.dark body#checkout .js-show-details:after,
     html.dark body#checkout #order-summary-content h4.js-show-details:after{
        background-image: linear-gradient(135deg, transparent 50%, #fbfbfb 50%)}
    
    html.dark body#checkout #footer {
        background: transparent;
	    color: #24b9d7}
    html.dark #payment-logo-block img {
        filter: grayscale(1) opacity(.7)}

    html.dark .product-quantity #quantity_wanted,
     html.dark .bootstrap-touchspin input.form-control,
      html.dark .bootstrap-touchspin .btn-touchspin,
       html.dark .product-variants > .product-variants-item select{
        background-color: #fff}

    html.dark .has-discount .discount {
        background: linear-gradient(120deg, rgba(179, 179, 179, .5), rgba(189, 189, 189, .5));
        color: #a7ff6a}
    html.dark .discount-percentage:before {
        border-color: transparent rgba(179, 179, 179, .5) transparent transparent}
    html.dark .has-discount p {
        color: #a7ff6a}

    @media only screen and (max-width: 767px) {
        html.dark .special-category #wrapper #left-column {
            background: rgba(23, 23, 23, .977)} 
    }
}
/* /Theme Dark */