[data-theme="light"] {
    --user-list-bg: #e4e4e4;
    --user-list-color: #2e2a4d;
    --user-list-svg-color: #2e2a4d;
    --thm-font: sans-serif;
    --thm-bg: #071422;
    --section-bg: #fff;
    --section-bg-rgba: rgba(255, 255, 255, 0.9);
    --auth-section-bg: #f1f1f1;
    --auth-section-box-bg: #f1f1f1;
    --auth-section-input-bg: #f1f1f1;
    --trade-section-input-bg: rgba(230, 232, 234, 0.6);
    --thm-text-color: black;
    --thm-text-color-blk: #191825;
    --thm-text-color-reverce: #f1f1f1;
    --thm-text-color-blue: #0B253A;
    --thm-btn-bg: #1b85ab;
    --thm-btn-bg-hover: #1c7197;
    --thm-primary-bg: #eff7f8;
    --thm-primary: #eff7f8;
    --thm-primary-bg: var(--section-bg);
    --thm-primary-bg2: var(--thm-primary);
    --mobile-nav-bg: black;
    --thm-base: #1b85ab;
    --thm-base-black: #000;
    --thm-gray-color: #3c3c3c;
    --testimonal-section-bg: #fff;
    --testimonal-section-text: #212529;
    --account-session-bg: rgb(230, 230, 230);
    --prd-perk-bg: #f5f5f5;
    --form-section-background: #f5f5f5;
    --btn-hover-color: #efc247;
    --team-card-bg: #eeeff2;
    --anydesk-logo: "./assets/images/resources/AnyDesk_black.png"
    
    --light-border-color:  rgb(202, 202, 202);
    --section-border-color:  #a9adba;
    --trade-head-bg: rgb(250, 250, 250);
    --trade-section-bg: rgb(250, 250, 250);
    --top-data-color: #525457;
    --table-data-item-bg: rgb(255, 255, 255);
    --table-data-item-first-color: rgb(30, 35, 41);
    --table-data-item-last-color: rgb(71, 77, 87);
    --border-color: rgb(163 159 146);
    --trade-item-hover: #d7d9df;
    --thm-base-angle: black;
    --balance-list-item-bg: #dee2e6;
}
  
[data-theme="dark"] {
    --user-list-bg: #2e2a4d;
    --user-list-color: #e4e4e4;
    --user-list-svg-color: rgb(187, 181, 209);
    --thm-font: sans-serif;
    --thm-bg: rgb(20, 24, 37);
    --section-bg: #151824;
    --section-bg-rgba: rgba(21, 24, 36, 0.7);
    --auth-section-bg: #151824;
    --auth-section-box-bg: #191e2f;
    --auth-section-input-bg: #0e162d;
    --trade-section-input-bg: #0e162d;
    --thm-text-color: #fff;
    --thm-text-color-blk: #fff;
    --thm-text-color-reverce: #191825;
    --thm-text-color-blue: #fff;
    --thm-btn-bg: #efc247;
    --thm-btn-bg-hover: #d3a212;
    --thm-primary-bg: #151824;
    --thm-primary: #eff7f8;
    --thm-primary-bg: var(--section-bg);
    --thm-primary-bg2: #131930;
    --mobile-nav-bg: #151824;
    --thm-base: #efc247;
    --thm-base-black: #efc247;
    --thm-gray-color: #b9b9b9;
    --testimonal-section-bg: #252737;
    --testimonal-section-text: #fff;
    --account-session-bg: #252737;
    --prd-perk-bg: var(--testimonal-section-bg);
    --bs-btn-hover-color: #efc247;
    --team-card-bg: #5b6278;
    --anydesk-logo: "./assets/images/resources/AnyDesk_white.png"

    --light-border-color:rgba(245, 245, 245, 0.1);
    --section-border-color:  #2a2e39;
    --trade-head-bg: #13171b;
    --trade-section-bg: #131a33;
    --top-data-color: #d8dbe2;
    --table-data-item-bg: #11152b;
    --table-data-item-first-color: #dedede;
    --table-data-item-last-color: rgb(213, 213, 213);
    --border-color: rgb(240, 185, 11);
    --trade-item-hover: #242c40;
    --form-section-background: #242041;

    --thm-base-angle: white;


    --thm-base-rgb: 32, 186, 209;
    
    --thm-gray: #3c3c3c;
    --thm-gray-rgb: 129, 136, 145;
    --thm-primary: #eff7f8;
    --thm-primary-rgb: 239, 247, 248;
    --thm-black: #191825;
    --thm-black-rgb: 25, 24, 37;
    
    --thm-bg-rgb: 7, 20, 34;
    --balance-list-item-bg: #343849;

}

.theme-switch__input:checked ~ main, .theme-switch__input:checked ~ label {
    --text: white;
}

.theme-switch__input:checked ~ main {
    --gradDark: #102128;
    --gradLight: #2d5567;
}
.theme-switch__input, .theme-switch__label {
    position: absolute;
    z-index: 1;
}

.theme-switch__input {
    opacity: 0;
}
.theme-switch__input:hover + .theme-switch__label, .theme-switch__input:focus + .theme-switch__label {
    background-color: lightSlateGray;
}
.theme-switch__input:hover + .theme-switch__label span::after, .theme-switch__input:focus + .theme-switch__label span::after {
    background-color: #d4ebf2;
}
.theme-switch__label {
    position: relative;
    margin: 0;
    cursor: pointer;
    padding: 10px;
    transition: background-color 200ms ease-in-out;
    width: 40px;
    height: 20px;
    border-radius: 50px;
    text-align: center;
    background-color: slateGray;
    box-shadow: -4px 4px 15px inset rgba(0, 0, 0, 0.4);
}
.theme-switch__label::before, .theme-switch__label::after {
    font-size: 2rem;
    position: absolute;
    transform: translate3d(0, -50%, 0);
    top: 50%;
}
.dark-m {
    margin-right: 10px;
    color: orange;
}
.light-m {
    margin-left: 10px;
    color: lightSlateGray;
}
.theme-switch__label span {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    width: 100%;
}
.theme-switch__label span::after {
    position: absolute;
    top: calc(100% + 15px);
    left: 5px;
    width: 10px;
    height: 10px;
    content: '';
    border-radius: 50%;
    background-color: lightBlue;
    transition: transform 200ms, background-color 200ms;
    box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.4);
}
.theme-switch__input:checked ~ .theme-switch__label {
    background-color: #efc247;
}
.theme-switch__input:checked ~ .theme-switch__label::before {
    color: lightSlateGray;
}
.theme-switch__input:checked ~ .theme-switch__label::after {
    color: turquoise;
}
.theme-switch__input:checked ~ .theme-switch__label span::after {
    transform: translate3d(20px, 0, 0);
}