@media (prefers-color-scheme: dark) {

    /* global */
    #maincontent *,
    #overlay * {
        border-color: var(--darkgrey);
    }

    .messages .message-item a {
        color: var(--darkgrey5);
    }

    body {
        background: var(--bg-header-image) repeat-x 0 0 var(--black) !important;
        color: var(--white);
    }

    #overlay .innerHtml, .overlay .innerHtml {
        background: var(--darkgrey3);
    }

    #overlay .product-infobox, #overlay .product-eav-infobox, .page-editproduct .product-eav-infobox {
        background-color: var(--darkgrey);
    }

    #overlay .product-infobox .data-table tr:nth-child(1), #overlay .product-eav-infobox .data-table tr:nth-child(1), .page-editproduct .product-eav-infobox .data-table tr:nth-child(1), #overlay .product-infobox .data-table tr:nth-child(2), #overlay .product-eav-infobox .data-table tr:nth-child(2), .page-editproduct .product-eav-infobox .data-table tr:nth-child(2) {
        background-color: var(--darkgrey4) !important;
    }

    .textwrapper-grey {
        background: var(--darkgrey4);
    }

    input,
    textarea,
    select {
        background-color: var(--darkgrey) !important;
        border: 1px solid var(--grey) !important;
        color: var(--white);
        box-shadow: none !important;
    }

    select:hover {
        background-color: var(--darkgrey3) !important;
    }

    #maincontent input,
    #overlay input,
    #maincontent textarea,
    #overlay textarea,
    #maincontent select,
    #overlay select {
        border-color: var(--lightgrey3) !important;
    }

    select option:hover {
        background: var(--green1);
        color: var(--white);
    }

    input::placeholder,
    textarea::placeholder,
    select::placeholder {
        color: var(--lightgrey2) !important;
    }

    input[type="text"]:focus,
    textarea:focus {
        background-color: var(--darkgrey3) !important;
    }

    input[type="radio"],
    input[type="checkbox"] {
        accent-color: var(--green5);
    }

    select option:checked {
        background: var(--green5);
    }

    button.button,
    span.button,
    button.action {
        border: none;
    }

    .page-wrapper a,
    .simulate-link {
        color: var(--white);
    }

    .page-wrapper a:hover,
    .simulate-link:hover {
        color: var(--green1);
    }

    .page-main {
        box-shadow: none;
    }

    .page-main .page-title-wrapper,
    .page-main .columns,
    .page-main {
        background: var(--darkgrey3);
    }

    .product-icon-wrapper .product-icon:hover {
        background: var(--darkgrey2);
    }

    .page-products .product-item .price-box .price {
        text-shadow: none;
    }

    /* BUTTON */
    button.button.nocolor,
    span.button.nocolor,
    button.action.nocolor,
    button {
        border: none;
        color: var(--white);
        text-shadow: 0 0;
        background: var(--grey); /* Old browsers */
        background: -moz-linear-gradient(top, var(--grey) 0%, var(--darkgrey1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, var(--grey) 0%, var(--darkgrey1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, var(--grey) 0%, var(--darkgrey1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--grey)', endColorstr='var(--darkgrey1)', GradientType=0);
    }

    button.button.nocolor:hover,
    span.button.nocolor:hover,
    button.action.nocolor:hover,
    button {
        border: none;
        color: var(--white);
        text-shadow: 0 0;
        background: var(--darkgrey3); /* Old browsers */
        background: -moz-linear-gradient(top, var(--darkgrey1) 0%, var(--darkgrey2) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, var(--darkgrey1) 0%, var(--darkgrey2) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, var(--darkgrey1) 0%, var(--darkgrey2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--darkgrey1)', endColorstr='var(--darkgrey2)', GradientType=0);
    }

    .block.filter .clearfilter {
        padding: 8px 8px;
        margin: 0 !important;
    }

    .page-header .block-search .action.search {
        height: 32px;
    }

    /* TOOGLE */
    .toogle.content.menu .expander__header.open {
        background-color: var(--green1);
    }

    .toogle.content.menu .expander__header.open span {
        padding-left: 20px;
    }

    .data-table tr.title td {
        background-color: var(--darkgrey);
    }

    /* TABLE */
    .tabs.ui .tab.select.wrapper {
        background: var(--darkgrey3);
    }

    .data-table tbody tr:nth-child(odd),
    .infodata-table tr.odd {
        background: var(--darkgrey1) !important;
    }

    .data-table tbody tr:nth-child(even),
    .infodata-table tr.even {
        background: var(--darkgrey2) !important;
    }

    .data-table tr th {
        font-weight: bold;
        color: var(--lightgrey2);
    }

    .data-table tfoot tr {
        background: var(--darkgrey3) !important;
    }

    .data-table thead, .data-table thead tr {
        background: var(--darkgrey3);
    }

    .data-table.hovereffect tr:hover {
        background: var(--darkgrey1);
    }

    /* CHECKOUT */
    .cart-container .cart.items.data.table tbody tr:hover {
        background: var(--darkgrey1);
    }

    .cart-container .cart-summary,
    .cart-info-container {
        background-color: var(--darkgrey1);
    }

    .page-checkout .grid .section .title {
        background: var(--darkgrey1);
        color: var(--white);
    }

    .page-checkout .grid .section .row.content.wrapper .payment.wrapper .payment.item label,
    .page-checkout .grid .section .row.content.wrapper .shipping.wrapper .shipping.item label,
    .page-checkout .grid .section .row.content.wrapper .addressselection.wrapper .addressselection.item label {
        background: var(--darkgrey1);
        color: var(--white);
    }

    .page-checkout .grid .section .row.content.wrapper .addressselection.wrapper .addressselection.item:hover {
        border-radius: 8px;
    }

    .page-checkout .grid .section .row.content.wrapper .payment.wrapper .payment.item label:hover,
    .page-checkout .grid .section .row.content.wrapper .shipping.wrapper .shipping.item label:hover,
    .page-checkout .grid .section .row.content.wrapper .addressselection.wrapper .addressselection.item label:hover {
        background: var(--grey);
        color: var(--white);
    }

    .page-checkout .grid .section .row.content.wrapper .payment.wrapper .payment.item.active label,
    .page-checkout .grid .section .row.content.wrapper .shipping.wrapper .shipping.item.active label,
    .page-checkout .grid .section .row.content.wrapper .addressselection.wrapper .addressselection.item.active label {
        background: var(--green1);
        color: var(--white);
    }

    .cart-container .cart.items.data.table .cart.item tr.item-info:nth-child(odd) {
        background: var(--darkgrey2);
    }

    .cart-container .cart.items.data.table .cart.item tr.item-info:nth-child(even) {
        background: var(--darkgrey1);
    }

    .cart-container .cart.items.data.table .cart.item tr.item-info:hover {
        background: var(--darkgrey);
    }

    .cart-container .cart.items.data.table .product-item-name a:hover {
        color: var(--white);
    }

    .page-checkout .grid .section .row.content.wrapper .payment.wrapper img {
        border-radius: 8px;
    }

    /* FILEUPLOAD */
    .fileuploader {
        background: var(--darkgrey2) !important
    }

    .fileuploader-theme-gallery .fileuploader-items .fileuploader-item-inner,
    .fileuploader-items .fileuploader-item,
    .fileuploader-items .fileuploader-item .columns,
    .fileuploader-input .fileuploader-input-caption,
    .fileuploader-theme-gallery .fileuploader-input-inner:hover,
    .fileuploader-items .fileuploader-item .column-title:hover {
        background-color: var(--darkgrey5) !important;
        color: var(--white) !important;
    }

    .fileuploader-input {
        border: none !important;
    }

    .fileuploader-input .fileuploader-input-caption {
        border: none !important;
    }

    .fileuploader-theme-gallery .fileuploader-input-inner,
    .fileuploader-theme-gallery .fileuploader-item-inner .content-holder h5,
    .fileuploader-items .fileuploader-item .column-title a {
        color: var(--white) !important;
    }

    /* CHATBOT */
    .chat-message-user {
        background-color: var(--darkgrey5) !important;
    }

    .chat-message-assistant {
        background-color: var(--green1) !important;
    }

    #faqAccordion .faq-created,
    #chatAccordion .chat-last-created {
        color: var(--lightgrey1) !important;
    }

    #chatAccordion .ui-accordion-header-active {
        background-color: var(--darkgrey5) !important;
        color: var(--lightgrey1) !important;
    }

    .dialog-header {
        background-color: var(--darkgrey5) !important;
    }

    #chatDialog {
        background-color: var(--darkgrey3) !important;
    }

    #chatSubmitButton {
        background-color: var(--green1) !important;
    }

    /* CUSTOMER */
    .sidebar-main {
        background: var(--darkgrey1) !important;
    }

    #top-menu-tree .tree-branch > .contents .branch-wrapper,
    .tree-sortable .tree-button {
        background: var(--darkgrey3) !important;
    }

    .query-builder .rule-container, .query-builder .rule-placeholder, .query-builder .rules-group-container {
        background: var(--darkgrey3) !important;
    }

    #bootstrap-css .form-control {
        color: var(--white) !important;
    }

    .customer-account-address .address-item.default .address-item-inner,
    .customer-account-address .address-item .infotitle {
        background-color: var(--darkgrey);
    }

    .customer-account-address .address-item .new-item:hover {
        background-color: var(--grey);
    }

    .customer-account-address .address-item.default .infotitle {
        background-color: var(--darkgrey1);
    }

    #form-product .fieldset .tab-title, #form-coupon .fieldset .tab-title, #form-b2b-discount .fieldset .tab-title {
        background: var(--darkgrey2);
    }

    #form-product .tab-selection .tab-select-item.active, #form-coupon .tab-selection .tab-select-item.active, #form-b2b-discount .tab-selection .tab-select-item.active {
        background: var(--green1);
    }

    #form-product .fieldset .tab-title.active, #form-coupon .fieldset .tab-title.active, #form-b2b-discount .fieldset .tab-title.active {
        background: var(--green1);
    }

    /* LISTING */
    .toolbar.bottom {
        background: none;
    }

    .toolbar .pages .pages-items li {
        background-color: var(--darkgrey5);
        border-color: var(--darkgrey5) !important;
    }

    .toolbar .pages .pages-items li.current {
        background-color: var(--green1);
    }

    .toolbar .pages .pages-items li a,
    .toolbar .pages .pages-items li.current {
        color: var(--white);
    }

    .toolbar .pages .pages-items li:hover a {
        color: var(--white);
        background-color: var(--green1) !important;
    }

    .page-products .product-item .product-item-info {
        border-color: var(--grey);
        background: var(--darkgrey1);
    }

    .page-products .product-item .product-image-wrapper {
        border: none;
    }

    .page-products .product-item .product-image-wrapper .product-transparency,
    .page-products .product-item .product-image-wrapper .product-fabriclayout,
    .page-products .product-item .product-image-wrapper .product-transmission {
        background: var(--darkgrey3);
    }

    .wishlist.product {
        background-color: var(--grey);
    }

    .page-products .product-item .product-item-info:hover {
        color: var(--white);
    }

    .cms-head-background {
        background-color: var(--darkgrey1);
    }

    .cms-head-background .content .select-product-wrapper,
    .cms-action-box {
        background-color: var(--darkgrey3);
    }

    .info-teaser,
    .info-teaser h3 {
        color: var(--white);
    }

    .wishlist.product {
        background-color: var(--white);
    }

    /* VIEW */
    .catalog-product-view .product-img-info {
        background-color: var(--darkgrey1);
    }

    .catalog-product-view .color-info {
        background: none;
    }

    .pieBackground {
        background: var(--darkgrey);
    }

    .tabs.ui .tab.select.wrapper .item {
        background-color: var(--darkgrey) !important;
        color: var(--white) !important;
    }

    .tabs.ui .tab.select.wrapper .item.selected {
        background-color: var(--green1) !important;
    }

    .tabs.ui .tab.content.wrapper {
        background-color: var(--darkgrey4);
    }

    .upseller.list .item {
        background-color: var(--darkgrey4);
    }

    .measure-products-inner,
    .mea-infopage .mea-col2 {
        background-color: var(--darkgrey4);
    }

    .mea-infopage .video-btn, .mea-infopage .pdf-btn {
        background-color: var(--darkgrey);
    }

    .measure-products li.active {
        background-color: var(--green1);
    }

    .catalog-product-view .product-infobtns .product-btn-measure:hover {
        background-color: var(--green1);
    }

    .catalog-product-view .product-options-wrapper,
    .catalog-product-view .product-options-bottom {
        background-color: var(--darkgrey1);
    }

    /* GCONGIURATOR */
    #configuration-main * {
        border-color: var(--darkgrey) !important;
    }

    #configuration-main input,
    #configuration-main textarea,
    #configuration-main select {
        border-color: var(--lightgrey3) !important;
        color: var(--white) !important;
    }

    #configuration-main h3,
    #configuration-main .configuration-step-note-toogle:hover {
        border-color: var(--darkgrey3) !important;
        background-color: var(--black) !important;
    }

    #great-configurator-menu .menu-item {
        background-color: var(--darkgrey1) !important;
    }

    #great-configurator-menu .menu-item.active {
        background-color: var(--green1) !important;
    }

    #configuration-step-navigation-wrapper .menu-item.last-configuration-step {
        background-color: var(--darkgrey1) !important;
    }

    #configuration-main .configuration-step-navigation-wrapper .next-button {
        background-color: var(--darkgrey1) !important;
    }

    #configuration-main .form-group .form-title {
        background-color: var(--grey) !important;
    }

    #configuration-summary-wrapper .summary-title {
        background-color: var(--grey) !important;
        border-color: var(--darkgrey3) !important;
    }

    #configuration-summary-wrapper .summary-step-item {
        background-color: var(--darkgrey1) !important;
        border-color: var(--darkgrey3) !important;
    }

    #configuration-summary-wrapper .summary-step-item.active {
        background-color: var(--green1) !important;
    }

    #gc-price-wrapper {
        background-color: var(--darkgrey4) !important;
    }

    #configuration-main .infobox {
        background-color: var(--grey);
    }

    #configuration-main .config-item-wrapper .config-item {
        background-color: var(--darkgrey) !important;
    }

    #configuration-main .config-item-wrapper .config-item .select-button {
        background-color: var(--darkgrey) !important;
    }

    #configuration-main .config-item-wrapper .config-item.prev-button .config-item-text, #configuration-main .config-item-wrapper .config-item.next-button .config-item-text {
        background-color: var(--darkgrey4) !important;
    }

    #configuration-main .config-item-wrapper .config-item.prev-button, #configuration-main .config-item-wrapper .config-item.next-button {
        background-color: var(--darkgrey4) !important;
    }

    #configuration-main .config-item-wrapper .config-item:hover .select-button, #configuration-main .config-item-wrapper .config-item.active .select-button {
        background-color: var(--darkgrey5) !important;
    }

    #configuration-main .configuration-step .configuration-slider-click {
        background-color: var(--lightgrey2) !important;
        color: var(--darkgrey5);
    }

    #configuration-main .config-item-wrapper .config-item.default-option {
        background-color: var(--darkgrey4) !important;
    }

    #summary-last-configuration-step-items,
    #summary-last-configuration-step-right-col .summary-last-configuration-step-add-to-cart {
        background-color: var(--darkgrey4) !important;
    }

    #configuration-main .config-item-wrapper .config-item:hover, #configuration-main .config-item-wrapper .config-item.active {
        background-color: var(--green1) !important;
    }

    #configuration-main .special-configuration.selection-wrapper.multi-select {
        background: var(--darkgrey);
    }

    #configuration-main .special-configuration.selection-wrapper.multi-select.active {
        background: var(--darkgrey4);
    }

    #configuration-main .special-configuration.selection-wrapper.multi-select:hover {
        background: var(--darkgrey);
    }

    #configuration-main .form-control {
        background-color: var(--darkgrey3);
    }

    #configuration-main .special-configuration.new-selection-wrapper .special-config-item .select-button {
        background: var(--darkgrey4);
    }

    @media (max-width: 630px) {
        #configuration-main .configuration-step {
            background-color: var(--darkgrey1);
        }
    }

    /* HEADER */
    .page-header .minilocation-wrapper .minilocation-menu {
        background-color: var(--darkgrey4);
    }

    .page-header .header.links li a,
    .page-header .minilocation-wrapper .minilocation-menu .nav-link {
        color: var(--white);
    }

    /* FOOTER */
    .footer-container {
        background: var(--darkgrey4);
    }

    .footer .form-subscribe button.button {
        height: 39px;
    }

    /* NAVIGATION */
    .nav-sections ul.level0 li.level1 ul.level1 li.level2 a {
        color: var(--white);
    }

    .nav-sections li.level0 ul.level0 {
        background-color: var(--darkgrey);
    }

    .nav-sections li.level0 ul.level0 li.level1 > span {
        background-color: var(--darkgrey2) !important;
    }

    .nav-sections .section-items .navigation li.active > a,
    .nav-sections .section-items .navigation li:hover > a {
        background-color: var(--darkgrey);
        color: var(--white);
    }

    .nav-sections ul.level0 li.level1 ul.level1 li.level2.active a {
        background-color: var(--green1) !important;
    }

    .nav-sections .mobilemenu li a {
        background-color: var(--darkgrey) !important;
        color: var(--white) !important;
        text-shadow: none !important;
    }

    .nav-sections .mobilemenu ul {
        border-color: var(--darkgrey);
    }

    .nav-sections .mobilemenu li,
    .nav-sections .section-items .navigation li.level0,
    .nav-sections .section-items .navigation li.level0:hover,
    .nav-sections .mobilemenu li.menu-actions .action {
        background-color: var(--darkgrey) !important;
    }

    .nav-sections .section-items .navigation li.level0.is-open {
        background-color: var(--darkgrey1) !important;
    }

    .nav-sections .mobilemenu li.level1,
    .nav-sections .mobilemenu li.level2 {
        background-color: var(--darkgrey1) !important;
    }

    .mm-overlay .mm-dialog {
        background-color: var(--black) !important;
    }

    /* JQUERY UI */
    .ui-widget-content, .ui-widget-header {
        background-color: var(--darkgrey4) !important;
        color: var(--white) !important;
    }

    .ui-widget-header {
        border: none !important;
        border-bottom: 1px solid var(--darkgrey) !important;
    }

    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
        background: var(--darkgrey3) !important;
        color: var(--white) !important;
    }

    .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
        background: var(--green1) !important;
    }

    .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button {
        color: var(--white) !important;
    }

    .ui-widget.ui-widget-content {
        border: none !important;
    }

    /* RESPONSE */
    @media screen and (max-width: 830px) and (min-width: 0px) {
        .customer-account-info .data-table tr td:first-child {
            background-color: var(--darkgrey1) !important;
            margin-top: 0 !important;
        }

        .customer-account-info .data-table tr td {
            padding: 4px 10px !important;
            width: calc(100% - 20px) !important;
        }
    }
}