[data-theme="dark"] {
    --fg: #98A2AB;
    --border: #5C666F;
    --bg: #38424B;
    --bg-transparent: #38424bbf;
    --bg-lighter: #434E54;
    --button-bg: #313A41;
    --button-cancel-bg: #4A555B;
    --mobile-button-bg: white;
    --mobile-button-color: black;
    --mobile-button-border: white;
    --lc-button-bg: #313A41;
    --input-bg: #38424B;
    --input-disabled-bg: #405158;
    --title-bg: #434E54;
    --text: #98A2AB;
    --text-lighter: #fff;
    --highlight: #286090;
    --label-fault: #a1404d;
    --hover-text: white; /*#222B34;*/
    --right-bg: #424D53;
    --head-bg: #434E54;
    --map-bg: #5C656A;
    --map-panel-bg: #5C656A;
    --map-hover-bg: #3AA2BF;
    --map-btn-text: #98A2AB;
    --button-lighter-bg: #3F484F;
    --hover-bg: #3AA2BF;
    --more-hover-bg: #1cb7e2;
    --pb-text-sh: #000;
    --radio-bg: #ececec;
    --checkbox-bg: #ececec;
    --dd-bg: #3AA2BF;
    --dd-hover-bg: #1cb7e2;
    --pb-border-bg: #333D46;
    --pb-val-bg: #3aa2bfa3 !important;
    --pb-svg-fill: rgb(61, 192, 138);
    --slider-bg: #337ab7;
    --tabs-nav-bg: #434E54;
    --tab-bg: #3AA2BF;
    --ui-res: invert(100%);
    --svg-fill: #778E9E;
    --svg-hover-fill: white;
    --ui-selected: #139EC5;
    --tablesorter-even: #343e45;
    --tablesorter-odd: #434E54;
    --multiselect-bg: #3E4851;
    --player-slider-bg: #5A6D7B;
    --player-slider-svg-fill: #96ACBA;
    --scroll: #3AA2BF;
    --selected: #3aa2bf;
    --message-border: #8e792a;
    --column-head: #289c40;
    --user-is-admin: #a7656e;
    --warn: #f2ff3b36;
    --label-fault-hover: #ec1e39;
    --checkbox-border: #b3b3b3;
    --high-race: #27542c;
    --high-race-hover: #3e7a45;
    --low-race: #2f7e41;
    --low-race-hover: #70da70;
    --high-faults: #a1404d;
    --high-faults-hover: #9d4b56;
    --low-faults: #a7656e;
    --low-faults-hover: #a9797f;
    --driving-activity: #9ad32291;
    --work-activity: #e9a04f96;
    --available-activity: #2d22b394;
    --break-activity: #1473e680;
    --nodata-activity: #979999;
    --days-table-border: #fff;
    --btn-primary: #286090;
    --btn-primary-border: #204d74;
    --btn-primary-active: #337ab7;
    --btn-primary-active-border: #2e6da4;
    --btn-primary-text: #fff;
    --analysis-line: #2b908f;
    --orange-limit: #ffa50099;
    --red-limit: #a1404d;
    --card-download-expiring: #f2ff3b8a;
    --green-bed: green;
    --red-hammer: red;
    --accordeon-border: #b4b4b4;
    --create-edit-marking-object: rgba(255, 255, 255, 0.5);
    --create-edit-marking-object-stroke: rgba(255, 255, 255, 1);
    --marking-object-fill: rgba(71, 207, 115, 0.05);
    --marking-object-stroke: rgb(45, 185, 40);
    --polygon-green: rgb(45, 185, 40);
    --polygon-yellow: rgb(255, 235, 59);
    --polygon-red: rgb(255, 87, 34);
    --polygon-blue: rgb(3, 169, 244);
    --polygon-purple: rgb(45, 45, 32);
}

[data-theme="standart"] {
    --fg: #000;
    --border: #000;
    --bg: #e7e0d6;
    --bg-lighter: #f4efeb;
    --button-bg: #c5b092;
    --button-cancel-bg: white;
    --mobile-button-bg: white;
    --mobile-button-color: black;
    --mobile-button-border: white;
    --label-fault: #ff8282;
    --lc-button-bg: #f6f6f6;
    --input-bg: #e7e0d6;
    --input-disabled-bg: lightgrey;
    --title-bg: #e9e9e9;
    --text: #000;
    --text-lighter: #7e7e7e;
    --select: #3aa2bf;
    --hover-text: black;
    --right-bg: #fff;
    --head-bg: #fff;
    --map-bg: rgba(0,60,136,.5);
    --map-panel-bg: #fff;
    --map-hover-bg: rgba(0,60,136,.7);
    --map-btn-text: #fff;
    --button-lighter-bg: #e7e0d6;
    --hover-bg: #7A96E3;
    --more-hover-bg: #a0a0a0;
    --pb-text-sh: #fff;
    --dd-bg: #7a96df;
    --warn: #f2ff3bb5;
    --slider-bg: #7a96df;
    --scroll: #666666;
    --dd-hover-bg: #f6f6f6;
    --pb-val-bg: #7a96df;
    --pb-svg-fill: hsl(0deg 0% 0%);
    --ui-res: invert(0%);
    --svg-fill: #00000075;
    --svg-hover-fill: black;
    --ui-selected: black;
    --tablesorter-even: #e7e0d6;
    --tablesorter-odd: #f4efeb;
    --multiselect-bg: #3E4851;
    --player-slider-bg: #5A6D7B;
    --player-slider-svg-fill: #96ACBA;
    --radio-bg: #ececec;
    --checkbox-bg: #ececec;
    --checkbox-border: #464646;
    --selected: #7a96df;
    --high-race: #047e12;
    --high-race-hover: #047e128c;
    --low-race: #27b848;
    --low-race-hover: #27b84878;
    --high-faults: #c80b25;
    --high-faults-hover: #9d4b5678;
    --low-faults: #f27283;
    --low-faults-hover: #a9797f;
    --driving-activity: #9ad322;
    --work-activity: #e9a04f;
    --available-activity: #2d22b3;
    --break-activity: #1473e6;
    --nodata-activity: #97999982;
    --days-table-border: #000;
    --btn-primary: #c5b092;
    --btn-primary-border: #204d74;
    --btn-primary-active: #e7e0d6;
    --btn-primary-active-border: #2e6da4;
    --btn-primary-text: #000;
    --analysis-line: #7a96df;
    --orange-limit: orange;
    --red-limit: red;
    --card-download-expiring: #f2ff3bc4;
    --green-bed: green;
    --red-hammer: red;
    --accordeon-border: #000000;
    --dashboard1: rgb(43, 144, 143);
    --dashboard2: rgb(169, 255, 151);
    --dashboard3: rgb(244, 91, 91);    
    --dashboard4: rgb(119 152 191);
    --dashboard5: rgb(170 238 238);
    --dashboard6: rgb(255 0 102);
    --dashboard7: rgb(238 170 238);
    --dashboard8: rgb(85 191 59);
    --dashboard9: rgb(223 83 83);
    --dashboard10: rgb(102 165 240);
}

[data-theme] {
    color: var(--fg) !important;
    background-color: var(--bg);
    background: var(--bg);
}

button:hover svg {
    fill: var(--svg-hover-fill);
    stroke: var(--svg-hover-fill);
}

#headerContainer {
    background: var(--bg-lighter);
}

    #headerContainer button {
        background-color: var(--button-lighter-bg);
        border: 1px solid var(--border);
    }

.btn {
    background-color: var(--button-lighter-bg);
    border: 0.15dvw solid var(--border) !important;
    border-radius: 0.25dvw !important;
    padding: .6dvh .6dvw !important;
}

button:hover,
a.button:hover,
input[type="submit"]:hover {
    color: var(--hover-text);
    border: 1px solid var(--border);
    background: var(--button-bg);
}

legend {
    color: var(--text) !important;
}

button span {
    color: var(--text) !important;
}

input,
select,
textarea {
    color: var(--text) !important;
    border: 0.1dvh solid var(--border) !important;
    background-color: var(--input-bg) !important;
    /* font-size: 1.4dvh !important; */
    padding-block: .1dvh;
    padding-inline: 0.4dvw;
    border-radius: .5dvh;
}

    input[type="radio"] {
        width: 0.7dvw;
        height: 1.4dvh;
    }

select {
    padding-inline: 0.2dvw;
}

    input[readonly],
    select[readonly] {
        background-color: var(--input-disabled-bg) !important;
    }

    select:visited {
        border: 1dvh solid var(--border) !important;
    }

#loginContainer {
    background-color: var(--bg-lighter);
}

.inline-svg-icon {
    fill: var(--svg-fill);
    stroke: var(--svg-fill);
}

.ui-dialog .ui-icon-closethick {
    color: var(--text);
}

.ui-datepicker {
    color: var(--text);
    background: var(--bg-lighter) !important;
    border-color: var(--border) !important;
}

a.ui-state-default {
    background: var(--bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

    a.ui-state-default:hover {
        background: var(--button-bg) !important;
    }

    a.ui-state-default.ui-state-highlight {
        background: var(--hover-bg) !important;
        color: var(--hover-text) !important;
    }

    a.ui-state-default.ui-state-active {
        background: var(--button-bg) !important;
    }

.ui-datepicker-header {
    background: var(--bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

a.ui-datepicker-prev,
a.ui-datepicker-next {
    cursor: pointer;
}

    a.ui-datepicker-prev.ui-state-hover,
    a.ui-datepicker-next.ui-state-hover {
        background: var(--button-bg) !important;
        border: var(--border) !important;
    }

.ui-datepicker-prev span,
.ui-datepicker-next span {
    filter: invert(100);
}

.ui-datepicker-buttonpane button {
    background: var(--bg) !important;
    color: var(--text) !important;
    border: var(--border) !important;
}

    .ui-datepicker-buttonpane button.ui-state-hover {
        background: var(--button-bg) !important;
    }

.ui-datepicker-buttonpane {
    border-color: var(--border);
}

span.ui-slider-handle {
}

.ui-timepicker-div > .ui-widget-header {
    background: var(--bg);
    color: var(--text);
    border: var(--border);
}

.ui-timepicker-div span.ui-slider-handle.ui-corner-all.ui-state-default {
    background: var(--text);
    border-color: var(--text);
}

.ui-timepicker-div dd div.ui-slider {
    overflow: hidden;
    background: var(--button-bg);
    border: var(--border);
}

#ui-datepicker-div {
    color: var(--fg);
}

.rotate {
    -webkit-animation: spin .6s linear infinite;
    -moz-animation: spin .6s linear infinite;
    animation: spin .6s linear infinite;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.dropdown-menu {
    background: var(--button-lighter-bg) !important;
    border-color: var(--border) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    min-width: 0px !important;
}

    .dropdown-menu a {
        color: var(--text) !important;
        padding: 3px 16px !important;
    }

        .dropdown-menu li:hover a,
        .dropdown-menu li:focus a,
        .dropdown-menu a:hover,
        .dropdown-menu a:focus {
            background-color: var(--button-bg) !important;
            outline: none;
            width: 100%;
            cursor: pointer;
        }