body {
    --color-background: rgb(250, 250, 250);

    --color-background-circle-1: #d7f2fe;
    --color-background-circle-2: #d7f2fe;
    --color-background-circle-sticky: #d7f2fe;

    --color-font: rgb(56, 56, 56);
    --color-primary: rgb(0, 174, 255);
    --color-primary-font: rgb(0, 174, 255);
    --color-primary-hover :rgb(0, 101, 147);
    --color-secondary: rgb(110, 120, 130);
    --color-secondary-hover: rgb(95, 101, 110);
    --color-contrast: rgb(255, 255, 255);
    --color-accent: rgb(255, 202, 90);
    --color-accent-hover: rgb(252, 238, 89);

    --color-window: rgb(255, 255, 255);
    --shadow-window: 0 0 8px rgb(227, 227, 227);

    --color-element: rgb(245, 245, 245);
    --color-element-hover: rgb(229, 229, 229);

    --red: rgb(255, 68, 0);
    --green: rgb(0, 201, 119);
    --orange: rgb(204, 157, 63);

    --red_2: #FA5A5A;
    --green_2: #01DF84;
    --orange_2: #ffa700;
    --color-primary_disabled: #4db0e9a4;
    --btn_shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

    .toggle-circle {
        transition: transform 500ms ease-out;
    }
}
.theme-light {
    --color-background: rgb(250, 250, 250);

    --color-background-circle-1: #d7f2fe;
    --color-background-circle-2: #d7f2fe;
    --color-background-circle-sticky: #d7f2fe;

    --color-font: rgb(56, 56, 56);
    --color-primary: rgb(0, 174, 255);
    --color-primary-font: rgb(0, 174, 255);
    --color-primary-hover :rgb(0, 101, 147);
    --color-secondary: rgb(110, 120, 130);
    --color-secondary-hover: rgb(95, 101, 110);
    --color-contrast: rgb(255, 255, 255);
    --color-accent: rgb(255, 202, 90);
    --color-accent-hover: rgb(252, 238, 89);

    --color-window: rgb(255, 255, 255);
    --shadow-window: 0 0 8px rgb(227, 227, 227);

    --color-element: rgb(245, 245, 245);
    --color-element-hover: rgb(229, 229, 229);

    --red: rgb(255, 68, 0);
    --green: rgb(0, 201, 119);
    --orange: rgb(204, 157, 63);

    --red_2: #FA5A5A;
    --green_2: #01DF84;
    --orange_2: #ffa700;
    --color-primary_disabled: #4db0e9a4;
    --btn_shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

    .only-dark {
        display: none;
    }
}
.theme-dark-old {
    --color-background: rgb(23, 23, 23);

    --color-background-circle-1: #002049;
    --color-background-circle-2: #00293b;
    --color-background-circle-sticky: rgba(0, 60, 138, 0.3);

    --color-font: rgb(222, 222, 222);
    --color-primary-hover :rgb(0, 101, 147);
    --color-primary: rgb(0, 159, 231);
    --color-primary-font: rgb(0, 176, 255);
    --color-secondary: rgb(120, 128, 136);
    --color-secondary-hover: rgb(95, 101, 110);
    --color-contrast: rgb(241, 241, 241);
    --color-accent: rgb(255, 202, 90);
    --color-accent-hover: rgb(252, 238, 89);

    --color-window: rgb(35, 35, 35);
    --shadow-window: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

    --color-element: rgb(49, 49, 49);
    --color-element-hover: rgb(68, 68, 68);

    --red: rgb(255, 68, 0);
    --green: rgb(0, 201, 119);
    --orange: rgb(255, 202, 90);


    .header_menu__logo img, .logo-wrapper img{
        filter: saturate(187%) brightness(123%) contrast(700%) hue-rotate(45deg);
    }
    .logo-wrapper{
        filter: saturate(166%) hue-rotate(30deg) contrast(86%);
    }
    .loader, .question .header::after, .page_form__inner .show-hide-pass, #dle-content > div:nth-child(16) > div.seller-balance-box.mta20 > div.settings > div > a > img, #dle-content > div:nth-child(16) > div > div.bank-header > div.settings-device > div.settings-device__btn-gear.btn-gear > div > img, .select2-container--default .select2-selection--single .select2-selection__arrow b {
        filter: invert(1);
    }
    .select2-container--default .select2-selection--single{
        background-color: var(--color-element)!important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered{
        color: var(--color-font)!important
    }
    .select2-results__option--selectable, .select2-search--dropdown {
        background-color: var(--color-element);
    }
    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
        color: var(--color-contrast)!important;
        background: var(--color-primary-hover)!important;
    }
    .select2-container--default .select2-results__option--selected {
        background: var(--color-primary)!important;
        color: var(--color-contrast)!important;
    }
}

.theme-dark  {
    --color-background: rgb(39 50 59);
    --color-background-circle-1: #1c3145;
    --color-background-circle-2: #2f3749;
    --color-background-circle-sticky: rgb(91 56 86 / 30%);
    --color-font: rgb(222, 222, 222);
    --color-primary: rgb(22 112 133);
    --color-primary-hover: rgb(19, 94, 112);
    --color-primary-font: rgb(28 167 197);
    --color-secondary: rgb(124 136 147);
    --color-secondary-hover: rgb(74, 76, 84);
    --color-contrast: rgb(241, 241, 241);
    --color-accent: rgb(255, 202, 90);
    --color-accent-hover: rgb(252, 238, 89);
    --color-window: rgb(35, 35, 35);
    --shadow-window: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    --color-element: rgb(49, 49, 49);
    --color-element-hover: rgb(68, 68, 68);
    --red: rgb(255, 68, 0);
    --green: rgb(0, 201, 119);
    --orange: rgb(255, 202, 90);

    --red_2: #FA5A5A;
    --green_2: #05ad67;
    --orange_2: #cd8600;
    --color-primary_disabled: rgba(22, 113, 133, 0.651);
    --btn_shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

    .header_menu__logo img, .logo-wrapper img{
        filter: saturate(187%) brightness(123%) contrast(700%) hue-rotate(45deg);
    }
    .logo-wrapper{
        filter: saturate(86%) hue-rotate(350deg) contrast(77%);
    }
    .openmenu, .banner_private_mail img, .hNews-card__img img, .orders__title__tools img, #services-info-btn, .service-footer__text img, #dle-content > article > div > div > div.fullstory__left-container > a > div > img, .guide-block .cards .guide-card img, #info_box > div:nth-child(1) > div > div > div > div.features-block > div > div > div.image > img {
        filter: hue-rotate(342deg) brightness(0.9);
    }
    #userinfo > div > div > div.rcol.pyatsem > div.centercont > div > div.footer-settings.row > ul > li > b > span:nth-child(2) > img,.loader, .question .header::after, .page_form__inner .show-hide-pass, #dle-content > div:nth-child(16) > div.seller-balance-box.mta20 > div.settings > div > a > img, #dle-content > div:nth-child(16) > div > div.bank-header > div.settings-device > div.settings-device__btn-gear.btn-gear > div > img, .select2-container--default .select2-selection--single .select2-selection__arrow b {
        filter: invert(1);
    }
    .select2-container--default .select2-selection--single{
        background-color: var(--color-element)!important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered{
        color: var(--color-font)!important
    }
    .select2-results__option--selectable, .select2-search--dropdown {
        background-color: var(--color-element);
    }
    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
        color: var(--color-contrast)!important;
        background: var(--color-primary-hover)!important;
    }
    .select2-container--default .select2-results__option--selected {
        background: var(--color-primary)!important;
        color: var(--color-contrast)!important;
    }

    .only-light {
        display: none;
    }

    @media only screen and (max-width: 800px){
        .popup_content__close_btn {
            filter: invert(1);
        }
    }
}