:where(html) {
    --ease-1: cubic-bezier(.25, 0, .5, 1);
    --ease-2: cubic-bezier(.25, 0, .4, 1);
    --ease-3: cubic-bezier(.25, 0, .3, 1);
    --ease-4: cubic-bezier(.25, 0, .2, 1);
    --ease-5: cubic-bezier(.25, 0, .1, 1);
    --ease-in-1: cubic-bezier(.25, 0, 1, 1);
    --ease-in-2: cubic-bezier(.5, 0, 1, 1);
    --ease-in-3: cubic-bezier(.7, 0, 1, 1);
    --ease-in-4: cubic-bezier(.9, 0, 1, 1);
    --ease-in-5: cubic-bezier(1, 0, 1, 1);
    --ease-out-1: cubic-bezier(0, 0, .75, 1);
    --ease-out-2: cubic-bezier(0, 0, .5, 1);
    --ease-out-3: cubic-bezier(0, 0, .3, 1);
    --ease-out-4: cubic-bezier(0, 0, .1, 1);
    --ease-out-5: cubic-bezier(0, 0, 0, 1);
    --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
    --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
    --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
    --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
    --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
    --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
    --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
    --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
    --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
    --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
    --ease-elastic-in-1: cubic-bezier(.5, -.25, .75, 1);
    --ease-elastic-in-2: cubic-bezier(.5, -.5, .75, 1);
    --ease-elastic-in-3: cubic-bezier(.5, -.75, .75, 1);
    --ease-elastic-in-4: cubic-bezier(.5, -1, .75, 1);
    --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
    --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
    --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
    --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
    --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
    --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
    --ease-step-1: steps(2);
    --ease-step-2: steps(3);
    --ease-step-3: steps(4);
    --ease-step-4: steps(7);
    --ease-step-5: steps(10);
    --ease-elastic-1: var(--ease-elastic-out-1);
    --ease-elastic-2: var(--ease-elastic-out-2);
    --ease-elastic-3: var(--ease-elastic-out-3);
    --ease-elastic-4: var(--ease-elastic-out-4);
    --ease-elastic-5: var(--ease-elastic-out-5);
    --ease-squish-1: var(--ease-elastic-in-out-1);
    --ease-squish-2: var(--ease-elastic-in-out-2);
    --ease-squish-3: var(--ease-elastic-in-out-3);
    --ease-squish-4: var(--ease-elastic-in-out-4);
    --ease-squish-5: var(--ease-elastic-in-out-5);
    --ease-spring-1: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
    --ease-spring-2: linear(0, .007, .029 2.2%, .118 4.7%, .625 14.4%, .826 19%, .902, .962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, .999 61.6%, .995 71.2%, 1);
    --ease-spring-3: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);
    --ease-spring-4: linear(0, .009, .037 1.7%, .153 3.6%, .776 10.3%, 1.001, 1.142 16%, 1.185, 1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, .973, .955 39.2%, .953 41.1%, .957 43.3%, .998 53.3%, 1.009 59.1% 63.7%, .998 78.9%, 1);
    --ease-spring-5: linear(0, .01, .04 1.6%, .161 3.3%, .816 9.4%, 1.046, 1.189 14.4%, 1.231, 1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, .999 29.4%, .955 32.1%, .942, .935 34.9%, .933, .939 38.4%, 1 47.3%, 1.011, 1.017 52.6%, 1.016 56.4%, 1 65.2%, .996 70.2%, 1.001 87.2%, 1);
    --ease-bounce-1: linear(0, .004, .016, .035, .063, .098, .141, .191, .25, .316, .391 36.8%, .563, .766, 1 58.8%, .946, .908 69.1%, .895, .885, .879, .878, .879, .885, .895, .908 89.7%, .946, 1);
    --ease-bounce-2: linear(0, .004, .016, .035, .063, .098, .141 15.1%, .25, .391, .562, .765, 1, .892 45.2%, .849, .815, .788, .769, .757, .753, .757, .769, .788, .815, .85, .892 75.2%, 1 80.2%, .973, .954, .943, .939, .943, .954, .973, 1);
    --ease-bounce-3: linear(0, .004, .016, .035, .062, .098, .141 11.4%, .25, .39, .562, .764, 1 30.3%, .847 34.8%, .787, .737, .699, .672, .655, .65, .656, .672, .699, .738, .787, .847 61.7%, 1 66.2%, .946, .908, .885 74.2%, .879, .878, .879, .885 79.5%, .908, .946, 1 87.4%, .981, .968, .96, .957, .96, .968, .981, 1);
    --ease-bounce-4: linear(0, .004, .016 3%, .062, .141, .25, .391, .562 18.2%, 1 24.3%, .81, .676 32.3%, .629, .595, .575, .568, .575, .595, .629, .676 48.2%, .811, 1 56.2%, .918, .86, .825, .814, .825, .86, .918, 1 77.2%, .94 80.6%, .925, .92, .925, .94 87.5%, 1 90.9%, .974, .965, .974, 1);
    --ease-bounce-5: linear(0, .004, .016 2.5%, .063, .141, .25 10.1%, .562, 1 20.2%, .783, .627, .534 30.9%, .511, .503, .511, .534 38%, .627, .782, 1 48.7%, .892, .815, .769 56.3%, .757, .753, .757, .769 61.3%, .815, .892, 1 68.8%, .908 72.4%, .885, .878, .885, .908 79.4%, 1 83%, .954 85.5%, .943, .939, .943, .954 90.5%, 1 93%, .977, .97, .977, 1)
}

@media (prefers-color-scheme: dark) {
    :where(html) {
        --shadow-color: 220 40% 2%;
        --shadow-strength: 25%;
        --inner-shadow-highlight: inset 0 -.5px 0 0 rgba(255, 255, 255, .06667), inset 0 .5px 0 0 rgba(0, 0, 0, .46667)
    }
}

:where(html) {
    --gray-0: #f8f9fa;
    --gray-1: #f1f3f5;
    --gray-2: #e9ecef;
    --gray-3: #dee2e6;
    --gray-4: #ced4da;
    --gray-5: #adb5bd;
    --gray-6: #868e96;
    --gray-7: #495057;
    --gray-8: #343a40;
    --gray-9: #212529;
    --gray-10: #16191d;
    --gray-11: #0d0f12;
    --gray-12: #030507;
    --stone-0: #f8fafb;
    --stone-1: #f2f4f6;
    --stone-2: #ebedef;
    --stone-3: #e0e4e5;
    --stone-4: #d1d6d8;
    --stone-5: #b1b6b9;
    --stone-6: #979b9d;
    --stone-7: #7e8282;
    --stone-8: #666968;
    --stone-9: #50514f;
    --stone-10: #3a3a37;
    --stone-11: #252521;
    --stone-12: #121210;
    --red-0: #fff5f5;
    --red-1: #ffe3e3;
    --red-2: #ffc9c9;
    --red-3: #ffa8a8;
    --red-4: #ff8787;
    --red-5: #ff6b6b;
    --red-6: #fa5252;
    --red-7: #f03e3e;
    --red-8: #e03131;
    --red-9: #c92a2a;
    --red-10: #b02525;
    --red-11: #962020;
    --red-12: #7d1a1a;
    --pink-0: #fff0f6;
    --pink-1: #ffdeeb;
    --pink-2: #fcc2d7;
    --pink-3: #faa2c1;
    --pink-4: #f783ac;
    --pink-5: #f06595;
    --pink-6: #e64980;
    --pink-7: #d6336c;
    --pink-8: #c2255c;
    --pink-9: #a61e4d;
    --pink-10: #8c1941;
    --pink-11: #731536;
    --pink-12: #59102a;
    --purple-0: #f8f0fc;
    --purple-1: #f3d9fa;
    --purple-2: #eebefa;
    --purple-3: #e599f7;
    --purple-4: #da77f2;
    --purple-5: #cc5de8;
    --purple-6: #be4bdb;
    --purple-7: #ae3ec9;
    --purple-8: #9c36b5;
    --purple-9: #862e9c;
    --purple-10: #702682;
    --purple-11: #5a1e69;
    --purple-12: #44174f;
    --violet-0: #f3f0ff;
    --violet-1: #e5dbff;
    --violet-2: #d0bfff;
    --violet-3: #b197fc;
    --violet-4: #9775fa;
    --violet-5: #845ef7;
    --violet-6: #7950f2;
    --violet-7: #7048e8;
    --violet-8: #6741d9;
    --violet-9: #5f3dc4;
    --violet-10: #5235ab;
    --violet-11: #462d91;
    --violet-12: #3a2578;
    --indigo-0: #edf2ff;
    --indigo-1: #dbe4ff;
    --indigo-2: #bac8ff;
    --indigo-3: #91a7ff;
    --indigo-4: #748ffc;
    --indigo-5: #5c7cfa;
    --indigo-6: #4c6ef5;
    --indigo-7: #4263eb;
    --indigo-8: #3b5bdb;
    --indigo-9: #364fc7;
    --indigo-10: #2f44ad;
    --indigo-11: #283a94;
    --indigo-12: #21307a;
    --blue-0: #e7f5ff;
    --blue-1: #d0ebff;
    --blue-2: #a5d8ff;
    --blue-3: #74c0fc;
    --blue-4: #4dabf7;
    --blue-5: #339af0;
    --blue-6: #228be6;
    --blue-7: #1c7ed6;
    --blue-8: #1971c2;
    --blue-9: #1864ab;
    --blue-10: #145591;
    --blue-11: #114678;
    --blue-12: #0d375e;
    --cyan-0: #e3fafc;
    --cyan-1: #c5f6fa;
    --cyan-2: #99e9f2;
    --cyan-3: #66d9e8;
    --cyan-4: #3bc9db;
    --cyan-5: #22b8cf;
    --cyan-6: #15aabf;
    --cyan-7: #1098ad;
    --cyan-8: #0c8599;
    --cyan-9: #0b7285;
    --cyan-10: #095c6b;
    --cyan-11: #074652;
    --cyan-12: #053038;
    --teal-0: #e6fcf5;
    --teal-1: #c3fae8;
    --teal-2: #96f2d7;
    --teal-3: #63e6be;
    --teal-4: #38d9a9;
    --teal-5: #20c997;
    --teal-6: #12b886;
    --teal-7: #0ca678;
    --teal-8: #099268;
    --teal-9: #087f5b;
    --teal-10: #066649;
    --teal-11: #054d37;
    --teal-12: #033325;
    --green-0: #ebfbee;
    --green-1: #d3f9d8;
    --green-2: #b2f2bb;
    --green-3: #8ce99a;
    --green-4: #69db7c;
    --green-5: #51cf66;
    --green-6: #40c057;
    --green-7: #37b24d;
    --green-8: #2f9e44;
    --green-9: #2b8a3e;
    --green-10: #237032;
    --green-11: #1b5727;
    --green-12: #133d1b;
    --lime-0: #f4fce3;
    --lime-1: #e9fac8;
    --lime-2: #d8f5a2;
    --lime-3: #c0eb75;
    --lime-4: #a9e34b;
    --lime-5: #94d82d;
    --lime-6: #82c91e;
    --lime-7: #74b816;
    --lime-8: #66a80f;
    --lime-9: #5c940d;
    --lime-10: #4c7a0b;
    --lime-11: #3c6109;
    --lime-12: #2c4706;
    --yellow-0: #fff9db;
    --yellow-1: #fff3bf;
    --yellow-2: #ffec99;
    --yellow-3: #ffe066;
    --yellow-4: #ffd43b;
    --yellow-5: #fcc419;
    --yellow-6: #fab005;
    --yellow-7: #f59f00;
    --yellow-8: #f08c00;
    --yellow-9: #e67700;
    --yellow-10: #b35c00;
    --yellow-11: #804200;
    --yellow-12: #663500;
    --orange-0: #fff4e6;
    --orange-1: #ffe8cc;
    --orange-2: #ffd8a8;
    --orange-3: #ffc078;
    --orange-4: #ffa94d;
    --orange-5: #ff922b;
    --orange-6: #fd7e14;
    --orange-7: #f76707;
    --orange-8: #e8590c;
    --orange-9: #d9480f;
    --orange-10: #bf400d;
    --orange-11: #99330b;
    --orange-12: #802b09;
    --choco-0: #fff8dc;
    --choco-1: #fce1bc;
    --choco-2: #f7ca9e;
    --choco-3: #f1b280;
    --choco-4: #e99b62;
    --choco-5: #df8545;
    --choco-6: #d46e25;
    --choco-7: #bd5f1b;
    --choco-8: #a45117;
    --choco-9: #8a4513;
    --choco-10: #703a13;
    --choco-11: #572f12;
    --choco-12: #3d210d;
    --brown-0: #faf4eb;
    --brown-1: #ede0d1;
    --brown-2: #e0cab7;
    --brown-3: #d3b79e;
    --brown-4: #c5a285;
    --brown-5: #b78f6d;
    --brown-6: #a87c56;
    --brown-7: #956b47;
    --brown-8: #825b3a;
    --brown-9: #6f4b2d;
    --brown-10: #5e3a21;
    --brown-11: #4e2b15;
    --brown-12: #422412;
    --sand-0: #f8fafb;
    --sand-1: #e6e4dc;
    --sand-2: #d5cfbd;
    --sand-3: #c2b9a0;
    --sand-4: #aea58c;
    --sand-5: #9a9178;
    --sand-6: #867c65;
    --sand-7: #736a53;
    --sand-8: #5f5746;
    --sand-9: #4b4639;
    --sand-10: #38352d;
    --sand-11: #252521;
    --sand-12: #121210;
    --camo-0: #f9fbe7;
    --camo-1: #e8ed9c;
    --camo-2: #d2df4e;
    --camo-3: #c2ce34;
    --camo-4: #b5bb2e;
    --camo-5: #a7a827;
    --camo-6: #999621;
    --camo-7: #8c851c;
    --camo-8: #7e7416;
    --camo-9: #6d6414;
    --camo-10: #5d5411;
    --camo-11: #4d460e;
    --camo-12: #36300a;
    --jungle-0: #ecfeb0;
    --jungle-1: #def39a;
    --jungle-2: #d0e884;
    --jungle-3: #c2dd6e;
    --jungle-4: #b5d15b;
    --jungle-5: #a8c648;
    --jungle-6: #9bbb36;
    --jungle-7: #8fb024;
    --jungle-8: #84a513;
    --jungle-9: #7a9908;
    --jungle-10: #658006;
    --jungle-11: #516605;
    --jungle-12: #3d4d04
}

:where(html) {
    --animation-fade-in: fade-in .5s var(--ease-3);
    --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
    --animation-fade-out: fade-out .5s var(--ease-3);
    --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
    --animation-scale-up: scale-up .5s var(--ease-3);
    --animation-scale-down: scale-down .5s var(--ease-3);
    --animation-slide-out-up: slide-out-up .5s var(--ease-3);
    --animation-slide-out-down: slide-out-down .5s var(--ease-3);
    --animation-slide-out-right: slide-out-right .5s var(--ease-3);
    --animation-slide-out-left: slide-out-left .5s var(--ease-3);
    --animation-slide-in-up: slide-in-up .5s var(--ease-3);
    --animation-slide-in-down: slide-in-down .5s var(--ease-3);
    --animation-slide-in-right: slide-in-right .5s var(--ease-3);
    --animation-slide-in-left: slide-in-left .5s var(--ease-3);
    --animation-shake-x: shake-x .75s var(--ease-out-5);
    --animation-shake-y: shake-y .75s var(--ease-out-5);
    --animation-shake-z: shake-z 1s var(--ease-in-out-3);
    --animation-spin: spin 2s linear infinite;
    --animation-ping: ping 5s var(--ease-out-3) infinite;
    --animation-blink: blink 1s var(--ease-out-3) infinite;
    --animation-float: float 3s var(--ease-in-out-3) infinite;
    --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
    --animation-pulse: pulse 2s var(--ease-out-3) infinite
}

@keyframes fade-in {
    to {
        opacity: 1
    }
}

@keyframes fade-in-bloom {
    0% {
        opacity: 0;
        filter: brightness(1) blur(20px)
    }
    10% {
        opacity: 1;
        filter: brightness(2) blur(10px)
    }
    to {
        opacity: 1;
        filter: brightness(1) blur(0)
    }
}

@keyframes fade-out {
    to {
        opacity: 0
    }
}

@keyframes fade-out-bloom {
    to {
        opacity: 0;
        filter: brightness(1) blur(20px)
    }
    10% {
        opacity: 1;
        filter: brightness(2) blur(10px)
    }
    0% {
        opacity: 1;
        filter: brightness(1) blur(0)
    }
}

@keyframes scale-up {
    to {
        transform: scale(1.25)
    }
}

@keyframes scale-down {
    to {
        transform: scale(.75)
    }
}

@keyframes slide-out-up {
    to {
        transform: translateY(-100%)
    }
}

@keyframes slide-out-down {
    to {
        transform: translateY(100%)
    }
}

@keyframes slide-out-right {
    to {
        transform: translate(100%)
    }
}

@keyframes slide-out-left {
    to {
        transform: translate(-100%)
    }
}

@keyframes slide-in-up {
    0% {
        transform: translateY(100%)
    }
}

@keyframes slide-in-down {
    0% {
        transform: translateY(-100%)
    }
}

@keyframes slide-in-right {
    0% {
        transform: translate(-100%)
    }
}

@keyframes slide-in-left {
    0% {
        transform: translate(100%)
    }
}

@keyframes shake-x {
    0%, to {
        transform: translate(0)
    }
    20% {
        transform: translate(-5%)
    }
    40% {
        transform: translate(5%)
    }
    60% {
        transform: translate(-5%)
    }
    80% {
        transform: translate(5%)
    }
}

@keyframes shake-y {
    0%, to {
        transform: translateY(0)
    }
    20% {
        transform: translateY(-5%)
    }
    40% {
        transform: translateY(5%)
    }
    60% {
        transform: translateY(-5%)
    }
    80% {
        transform: translateY(5%)
    }
}

@keyframes shake-z {
    0%, to {
        transform: rotate(0)
    }
    20% {
        transform: rotate(-2deg)
    }
    40% {
        transform: rotate(2deg)
    }
    60% {
        transform: rotate(-2deg)
    }
    80% {
        transform: rotate(2deg)
    }
}

@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

@keyframes ping {
    90%, to {
        transform: scale(2);
        opacity: 0
    }
}

@keyframes blink {
    0%, to {
        opacity: 1
    }
    50% {
        opacity: .5
    }
}

@keyframes float {
    50% {
        transform: translateY(-25%)
    }
}

@keyframes bounce {
    25% {
        transform: translateY(-20%)
    }
    40% {
        transform: translateY(-3%)
    }
    0%, 60%, to {
        transform: translateY(0)
    }
}

@keyframes pulse {
    50% {
        transform: scale(.9)
    }
}

@media (prefers-color-scheme: dark) {
    @keyframes fade-in-bloom {
        0% {
            opacity: 0;
            filter: brightness(1) blur(20px)
        }
        10% {
            opacity: 1;
            filter: brightness(.5) blur(10px)
        }
        to {
            opacity: 1;
            filter: brightness(1) blur(0)
        }
    }
}

@media (prefers-color-scheme: dark) {
    @keyframes fade-out-bloom {
        to {
            opacity: 0;
            filter: brightness(1) blur(20px)
        }
        10% {
            opacity: 1;
            filter: brightness(.5) blur(10px)
        }
        0% {
            opacity: 1;
            filter: brightness(1) blur(0)
        }
    }
}

:where(:not(meter)) {
    border-width: 0;
    border-style: solid;
    background-origin: border-box;
    background-repeat: no-repeat
}


:where([data-theme="light"],.light,.light-theme) {
    color-scheme: light;
    --text-1: var(--gray-12);
    --text-2: var(--gray-7);
    --surface-1: var(--gray-0);
    --surface-2: var(--gray-2);
    --surface-3: var(--gray-3);
    --surface-4: var(--gray-4);
    --scrollthumb-color: var(--gray-7);
    --shadow-color: 220 3% 15%;
    --shadow-strength: 1%;
    --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 rgba(0, 0, 0, .06667)
}


:where([data-theme="light"],.light,.light-theme) :where(dialog) {
    background-color: var(--surface-1)
}

:where([data-theme="dark"],.dark,.dark-theme) {
    color-scheme: dark;
    --text-1: var(--gray-0);
    --text-2: var(--gray-4);
    --surface-1: var(--gray-9);
    --surface-2: var(--gray-8);
    --surface-3: var(--gray-7);
    --surface-4: var(--gray-6);
    --scrollthumb-color: var(--gray-6);
    --shadow-strength: 10%;
    --shadow-color: 220 40% 2%;
    --inner-shadow-highlight: inset 0 -.5px 0 0 rgba(255, 255, 255, .06667), inset 0 .5px 0 0 rgba(0, 0, 0, .46667)
}

:where([data-theme="dark"],.dark,.dark-theme) :where(dialog) {
    background-color: var(--surface-2)
}


[data-theme=light] {
    --nav-icon: var(--gray-7);
    --nav-icon-hover: var(--gray-9)
}

[data-theme=dark] {
    --nav-icon: var(--gray-0);
    --nav-icon-hover: var(--gray-2)
}

.theme-toggle {
    background: none;
    position: relative;
    margin: 0 auto;
    /*right: 25px;*/
    /*top: -3px;*/
}

#moon, #sun {
    fill: var(--nav-icon);
    stroke: none
}


:hover > svg > #moon, :hover > svg > #sun {
    fill: var(--nav-icon-hover)
}

#sun {
    transition: transform .5s var(--ease-4);
    transform-origin: center center
}

#sun-beams {
    --_opacity-dur: .15s;
    stroke: var(--nav-icon);
    stroke-width: 2px;
    transform-origin: center center;
    transition: transform .5s var(--ease-elastic-out-4), opacity var(--_opacity-dur) var(--ease-3)
}

:hover > svg > #sun-beams {
    stroke: var(--nav-icon-hover)
}

#moon > circle {
    transition: transform .5s var(--ease-out-3)
}

[data-theme=light] #sun {
    transform: scale(.5)
}

[data-theme=light] #sun-beams {
    transform: rotate(.25turn);
    --_opacity-dur: .5s
}

[data-theme=dark] #moon > circle {
    transform: translate(-20px)
}

[data-theme=dark] #sun-beams {
    opacity: 0
}




:root,
:root.light {
    --color-bg: #ffffff;
    --color-fg: #000000;
    --card-bg-color: #fff;
    --color-fonts: #565656;
    --scrollbar-color: #aab7cf transparent;
    --sidebar-color: #fff;
    --toggle-sidebar-btn: #000;
    --nav-link-collapsed-bg: #fff;
    --nav-link-hover-font-color: #4154f1;
    --nav-content-a-active: #4154f1;

    --alert-info-f-color: #000;
    --alert-info-bg-color: #def1f7;
    --alert-info-border-color: #cce9f2;

    --alert-light-f-color: #565656;
    --alert-light-bg-color: #f5f5f5;
    --alert-light-border-color: #fff;

    --header-bg: #fff;
}

:root.dark {
    --color-bg: #263238;
    --color-fg: #ffffff;
    --card-bg-color: #565656;
    --color-fonts: #fff;
    --scrollbar-color: #000 transparent;
    --sidebar-color: #121212;
    --toggle-sidebar-btn: #ffff;
    --nav-link-collapsed-bg: #000;
    --nav-link-hover-font-color: #ececec;
    --nav-content-a-active: #ececec;

    --alert-info-f-color: #fff;
    --alert-info-bg-color: #565656;
    --alert-info-border-color: #ececec;

    --alert-light-f-color: #565656;
    --alert-light-bg-color: #f5f5f5;
    --alert-light-border-color: #ececec;

    --header-bg: #000;
}

body {
    background-color: var(--color-bg);
    color: var(--color-fonts);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-fonts);

}

.dashboard .info-card h6 {
    color: var(--color-fonts);
}

.card-title {
    color: var(--color-fonts);

}

.card {
    background-color: var(--card-bg-color) !important;
}

.card .text-white {
    --mdb-text-opacity: unset;
}

.card-header {
    padding: var(--mdb-card-cap-padding-y) var(--mdb-card-cap-padding-x);
    margin-bottom: 0;
    color: var(--color-fonts);
    background-color: var(--card-bg-color);
    border-bottom: var(--card-bg-color) solid var(--card-bg-color);
}

.profile .profile-overview .card-title {
    color: var(--color-fonts);
}

.profile .profile-overview .label {
    font-weight: 600;
    color: var(--color-fonts);
}

.footer .copyright {
    color: var(--color-fonts);
}

.footer .credits {
    color: var(--color-fonts);
}


.header {
    box-shadow: 0 2px 20px rgba(1, 41, 112, 0.1);
    background-color: var(--header-bg) !important;
    color: var(--color-fonts);
}

.logo span {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-fonts);
}


.header .toggle-sidebar-btn {
    color: var(--toggle-sidebar-btn);
}

.sidebar {
    scrollbar-color: var(--sidebar-color);
    box-shadow: 0 0 20px rgba(1, 41, 112, 0.1);
    background-color: var(--sidebar-color);
}

.sidebar-nav .nav-link {
    color: var(--color-fonts);
    background: var(--sidebar-color);
}

.sidebar-nav .nav-link.collapsed {
    color: var(--color-fonts);
    background: var(--nav-link-collapsed-bg);
}


.sidebar-nav .nav-link.collapsed i {
    color: #899bbd;
}

.sidebar-nav .nav-link i {
    color: var(--color-fonts);
}

.sidebar-nav .nav-link:hover {
    color: var(--nav-link-hover-font-color);
    background: var(--nav-link-collapsed-bg);
}

.sidebar-nav .nav-link:hover i {
    color: var(--nav-link-hover-font-color);
}

.sidebar-nav .nav-content a {
    color: var(--color-fonts);
}

.sidebar-nav .nav-content a:hover, .sidebar-nav .nav-content a.active {
    color: var(--nav-content-a-active);
}

.header-nav .nav-icon {
    color: var(--color-fonts);
}

.dropdown-menu {
    --mdb-dropdown-bg: var(--color-bg);

}

.header-nav .profile .dropdown-header h6 {

    color: var(--color-fonts);
}

.dropdown-item {
    --mdb-dropdown-state-color: #16181b;
    --mdb-dropdown-state-background-color: #eee;
    padding: var(--mdb-dropdown-item-padding-y) var(--mdb-dropdown-item-padding-x);
    color: var(--color-fonts);
    border-radius: 0;
}

@media (min-width: 768px) {
    .dropdown-menu-arrow::before {
        content: "";
        width: 13px;
        height: 13px;
        background: var(--color-bg);
        position: absolute;
        top: -7px;
        left: 20px;
        transform: rotate(45deg);
        border-top: 1px solid var(--color-bg);
        border-left: 1px solid var(--color-bg);
    }
}

.alert-info {
    color: var(--alert-info-f-color) !important;
    background-color: var(--alert-info-bg-color) !important;
    border-color: var(--alert-info-border-color) !important;
}
.alert-light {
    color: var(--alert-light-f-color) !important;
    background-color: var(--alert-light-bg-color) !important;
    border-color: var(--alert-light-border-color) !important;
}

.alert-light > h1,
.alert-light > h2,
.alert-light > h3,
.alert-light > h4,
.alert-light > h5,
.alert-light > h6 {
    color: var(--alert-light-f-color) !important;
    line-height: 30px;
}

.alert-warning > h1,
.alert-warning > h2,
.alert-warning > h3,
.alert-warning > h4,
.alert-warning > h5,
.alert-warning > h6 {
    color: var(--alert-light-f-color) !important;
    line-height: 30px;
}

/*.alert-info {*/
/*    color: var(--alert-light-f-color) !important;*/
/*    background-color: var(--alert-light-bg-color) !important;*/
/*    border-color: var(--alert-light-border-color) !important;*/
/*}*/
/*.alert-info {*/
/*    color: var(--alert-info-f-color) !important;*/
/*    background-color: var(--alert-info-bg-color) !important;*/
/*    border-color: var(--alert-info-border-color) !important;*/
/*}*/

.form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
    color: var(--color-fonts);
}

.table {
    color: var(--color-fonts);
    --mdb-table-bg: transparent;
    /*--mdb-table-border-color: var(--mdb-border-color);*/
    /*--mdb-table-accent-bg: transparent;*/
    --mdb-table-striped-color: var(--color-fonts);
    /*--mdb-table-striped-bg: var(--color-fonts);*/
    /*--mdb-table-active-color: var(--mdb-body-color);*/
    /*--mdb-table-active-bg: rgba(0,0,0,0.1);*/
    /*--mdb-table-hover-color: var(--mdb-body-color);*/
    /*--mdb-table-hover-bg: rgba(0,0,0,0.025);*/
    /*border-color: var(--mdb-table-border-color);*/
}

.table-hover>tbody>tr:hover>* {
    background-color: var(--color-fonts);
    color: var(--color-bg);
}

.form-select {
    color: var(--color-fonts);
    background-color: var(--color-bg);
}


.form-control {
    color: var(--color-fonts);
    background-color: var(--color-bg);
}

.form-outline {
    position: relative;
    width: 100%;
}

.form-outline .form-control {

    border: 1px solid #bdbdbd !important;
    background: transparent;
}

.form-outline .form-control~.form-label {
    position: absolute;
    top: 0;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    right: .75rem;
    padding-top: .37rem;
    pointer-events: none;
    transform-origin: 100% 0;
    transition: all .2s ease-out;
    color: var(--color-fonts);
    margin-bottom: 0;
}

.btn-outline-dark {
    --mdb-btn-bg: transparent;
    --mdb-btn-color: var(--color-fonts);
    --mdb-btn-hover-bg: transparent;
    --mdb-btn-hover-color: var(--color-fonts);
    --mdb-btn-focus-bg: transparent;
    --mdb-btn-focus-color: var(--color-fonts);
    --mdb-btn-active-bg: transparent;
    --mdb-btn-active-color: var(--color-fonts);
    --mdb-btn-border-color: var(--color-fonts);
    --mdb-btn-focus-border-color: var(--color-fonts);
    --mdb-btn-hover-border-color: var(--color-fonts);
}

/*.notification_res {*/
/*    color: var(--color-fonts);*/
/*    background-color: var(--color-bg);*/
/*}*/


.notification_res {
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    height: 350px;
    z-index: 996;
    margin: 0 auto;
    transition: all 0.3s;
    padding: 5px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #aab7cf transparent;
    /*box-shadow: 0 0 20px rgba(1, 41, 112, 0.1);*/
    color: var(--color-fonts);
    background-color: var(--color-bg);
}

@media (max-width: 1199px) {
    .notification_res {
        left: 0;
    }
}

.notification_res::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #fff;
}

.notification_res::-webkit-scrollbar-thumb {
    background-color: #aab7cf;
}

.dropdown-menu .dropdown-footer a {
    color: var(--color-fonts);
}


.nav-tabs {
    /*--mdb-nav-tabs-border-width: 1px;*/
    /*--mdb-nav-tabs-border-color: #e0e0e0;*/
    /*--mdb-nav-tabs-border-radius: 0.25rem;*/
    /*--mdb-nav-tabs-link-hover-border-color: #eee #eee #e0e0e0;*/
    --mdb-nav-tabs-link-active-color: var(--color-fonts);
    /*--mdb-nav-tabs-link-active-bg: var(--alert-info-bg-color);*/

    /*--mdb-nav-tabs-link-active-border-color: var(--color-fonts);*/
    /*border-bottom: var(--mdb-nav-tabs-border-width) solid var(--mdb-nav-tabs-border-color);*/
}

.nav-tabs .nav-link {
    /*--mdb-nav-tabs-link-color: rgba(0,0,0,0.55);*/
    /*--mdb-nav-tabs-link-hover-bgc: #f7f7f7;*/
    /*--mdb-nav-tabs-link-active-color: var(--color-fonts);*/
    /*--mdb-nav-tabs-link-active-border-color: #3b71ca;*/
    /*border-width: 0;*/
    /*border-bottom: var(--mdb-nav-tabs-link-border-bottom-width) solid transparent;*/
    --mdb-nav-tabs-link-hover-bgc: var(--card-bg-color);
    color: var(--color-fonts);
}

/*.nav-tabs .nav-link:hover {*/
/*    color: var(--alert-info-f-color);*/
/*}*/

.profile .profile-edit label {
    color: var(--color-fonts);
}

.col-form-label {
    color: var(--color-fonts);
}

.input-group-text {
    color: var(--color-fonts);
    background-color: var(--color-bg);
    border: 1px solid #bdbdbd;
    border-radius: .25rem;
}

.modal {
    --mdb-modal-bg: var(--color-bg);
    --mdb-modal-border-color: var(--mdb-border-color-translucent);
    --mdb-modal-header-border-color: #f5f5f5;

}


.form-label {
    margin-bottom: .5rem;
    color: var(--color-fonts);
}

.list-group {
    /*--mdb-list-group-color: var(--color-fonts);*/
    --mdb-list-group-bg: var(--color-bg);
    /*--mdb-list-group-border-color: rgba(0,0,0,0.125);*/
    /*--mdb-list-group-border-width: 1px;*/
    /*--mdb-list-group-border-radius: 0.5rem;*/
    /*--mdb-list-group-item-padding-x: 1.5rem;*/
    /*--mdb-list-group-item-padding-y: 0.5rem;*/
    /*--mdb-list-group-action-color: #616161;*/
    /*--mdb-list-group-action-hover-color: #616161;*/
    /*--mdb-list-group-action-hover-bg: #f5f5f5;*/
    /*--mdb-list-group-action-active-color: #4f4f4f;*/
    /*--mdb-list-group-action-active-bg: #eee;*/
    /*--mdb-list-group-disabled-color: #757575;*/
    /*--mdb-list-group-disabled-bg: #fff;*/
    /*--mdb-list-group-active-color: #2c58a0;*/
    /*--mdb-list-group-active-bg: #dfe7f6;*/
    /*--mdb-list-group-active-border-color: #dfe7f6;*/
}