/*todo долой importantы*/
/*[data-theme="true"] {
    --fg: #98A2AB;
    --border: #5C666F;
    --bg: #1A436D;
    --bg-lighter: #1A436D;
    --button-bg: #313A41;
    --input-bg: #356290;
    --input-disabled-bg: #405158;
    --title-bg: #434E54;
    --text: #98A2AB;
    --hover-text: white; #222B34;
    --hover-bg: #3AA2BF;
    --svg-fill: #778E9E;
    --svg-hover-fill: white;
    --sidebar: #6b767f;
    --interval1: #e4e4e4;
    --interval2: #a06324;
    --interval3: #6d441a;
    --tablefont: #000000;
    --deviceinfo2: #245c96;
}*/
[data-theme="true"] {
    --fg: #98A2AB;
    --border: #5C666F;
    --bg: #484848;
    --bg-lighter: #484848;
    --button-bg: #313A41;
    --input-bg: #666666;
    --input-disabled-bg: #5d4949;
    --title-bg: #434E54;
    --text: #98A2AB;
    --hover-text: white; /*#222B34;*/
    --hover-bg: #3AA2BF;
    --svg-fill: #778E9E;
    --svg-hover-fill: white;
    --interval1: #2ade51;
    --interval2: #dc6478;
    --interval3: #c51616;
    --tablefont: #000000;
    --deviceinfo2: #666666;
}

[data-theme="false"] {
    --fg: #000;
    --border: #b1b1b1;
    --bg: #e7e0d6;
    --bg-lighter: #f4efeb;
    --button-bg: #74542a;
    --input-bg: #c5b0924a;
    --input-disabled-bg: lightgrey;
    --title-bg: #e9e9e9;
    --text: #000;
    --hover-text: black;
    --hover-bg: #a39787;
    --svg-fill: black;
    --svg-hover-fill: black;
    --interval1: #2ade51;
    --interval2: #dc6478;
    --interval3: #c51616;
    --deviceinfo2: #f2f2f2;
    --tablesorter-even: #e7e0d6;
    --tablesorter-odd: #f4efeb;
    --slider-bg: #6c6c6c;
    --radio-bg: #38424B;
    --select: #b1d1f3;
    --highlight: #ffee72;
    --outdated: #ffb700;
    --selected: #b1d1f3;
}

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

input::placeholder {
    color: var(--text);
}

input.custom-checkbox[type='checkbox']:after {
    width: 14px;
    height: 14px;
    border-radius: 0.25em;
    position: relative;
    left: 50%;
    top: -4px;
    background-color: var(--bg);
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid var(--border);
    margin-top: 2px;
    margin-left: -8px;
}

button {
    border: 1px solid var(--border);
    background: var(--bg);
    height: 25px;
    border-radius: 5px;
    cursor: pointer;
}
input.custom-checkbox[type='checkbox']:checked:after {
    width: 14px;
    height: 14px;
    border-radius: 0.25em;
    top: -4px;
    position: relative;
    left: 50%;
    background-color: var(--bg);
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #464646;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23464646' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
    /* margin-left: -8px; */
    /* border-radius: 5px; */
}

table tr.selected > td {
    background: var(--selected) !important;
}

.custom-checkbox {
    position: relative;
}

    .custom-checkbox:disabled {
        opacity: 0.5;
    }

footer {
    background: var(--bg-lighter);
}

#Interval1 {
    background: var(--interval1);
}

#Interval2 {
    background: var(--interval2);
}

#Interval3 {
    background: var(--interval3);
}

#int1 {
    background: var(--interval1);
}

#int2 {
    background: var(--interval2);
}

#int3 {
    background: var(--interval3);
}

#ShowDeviceButton {
    color: var(--text)
}

.settingsButtons {
    color: var(--text)
}

#deviceInfo tr:nth-child(even) {
    background-color: var(--deviceinfo2);
}

.tablesorter-blue td {
    color: var(--tablefont)
}

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


#filterButton:hover {
    border: none !important;
}

#filterButton:focus {
    outline: none;
}

#leftcolumn button:hover {
    padding: 0;
}

/*button:hover svg,
#refreshButton:hover svg,
#showMobileSettingsButton:hover svg {
    fill: var(--svg-hover-fill);
    stroke: var(--svg-hover-fill);
}*/
button:hover {
    background: var(--bg-lighter);
}

#refreshButton svg {
    fill: var(--bg);
    stroke: var(--bg);
}

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

.editComment {
    color: var(--text);
}

button:focus {
    background-color: var(--bg);
}

input,
select {
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    background-color: var(--input-bg) !important;
    border-radius: 5px;
}

    input[type="radio" i] {
        /*        transform: scale(1.25);
*/
    }

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

.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);
    }
}

.ui-dialog {
    box-shadow: 5px 10px 70px 0px rgba(0,0,0,0.5);
}

    .ui-dialog,
    .ui-dialog > div {
        /* color: var(--text); */
        background: var(--bg) !important;
        border-color: var(--border) !important;
    }

        .ui-dialog button,
        .ui-dialog a.button {
            background-color: var(--input-bg) !important;
            color: var(--text) !important;
            border-color: var(--border) !important;
        }

            .ui-dialog button:focus,
            .ui-dialog a.button:focus {
                color: var(--text);
            }

        .ui-dialog > div {
            color: var(--text);
            background: var(--bg-lighter) !important;
        }

        .ui-dialog legend {
            color: var(--text);
            font-size: 1.4em;
            border-bottom: 1px solid var(--border);
        }

.ui-dialog /*, .ui-dialog-content*/ {
    padding: 0 !important;
    border-radius: 0 !important;
}

    .ui-dialog .ui-dialog-buttonpane {
        margin-top: 0 !important;
        /*height: 12%;*/
        padding: .4em .5em .4em .5em;
        background: var(--bg) !important;
        border: none;
    }

    .ui-dialog .ui-dialog-buttonset {
        background: var(--bg) !important;
    }
    /*.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
			width: 100%;
		}*/
    .ui-dialog .ui-dialog-buttonpane button {
        margin: 0.5em 0.4em 0.5em 0.4em !important;
        padding: 0 .5rem;
        background: none;
    }

        .ui-dialog .ui-dialog-buttonpane button:focus {
            color: var(--text);
        }

    /*.ui-tabs-panel {
	padding: 8px !important;
}*/

    .ui-dialog .ui-dialog-titlebar {
        background: var(--bg) !important;
    }

/*    .inline-svg-icon {
    fill: var(--svg-fill);
    stroke: var(--svg-fill);
}*/
.tablesorter-blue th,
.tablesorter-blue thead td {
    color: var(--fg)
}

.btn {
    color: var(--fg)
}
/* rows hidden by filtering (needed for child rows) */

.tablesorter .filtered {
    display: none;
}

/* ajax error row */
.tablesorter .tablesorter-errorRow td {
    text-align: center;
    cursor: pointer;
    background-color: #e6bf99;
}

.tablesorter,
.tablesorter .tablesorter-header,
.tablesorter .tablesorter-filter-row td {
    background-color: var(--bg-lighter);
    border-color: var(--border);
}

    .tablesorter tbody tr.even > td,
    .tablesorter tbody tr.even:hover > td {
        background-color: var(--tablesorter-odd);
        color: var(--text);
        border-color: var(--border);
        cursor: pointer;
        transition: all 0.25s ease-in;
    }

    .tablesorter tbody tr.odd > td,
    .tablesorter tbody tr.odd:hover > td {
        background-color: var(--tablesorter-even);
        color: var(--text);
        border-color: var(--border);
        cursor: pointer;
        transition: all 0.25s ease-in;
    }

    .tablesorter tbody tr.blockedDevice.odd:hover > td {
        background-color: var(--tablesorter-odd) !important;
        color: var(--text);
        border-color: var(--border);
    }

    .tablesorter tbody tr.blockedDevice.even:hover > td {
        background-color: var(--tablesorter-even) !important;
        color: var(--text);
        border-color: var(--border);
    }

    .tablesorter tbody tr.selected > td,
    .tablesorter tbody tr.selected:hover > td {
        background-color: var(--hover-bg);
        color: var(--hover-text);
    }

div.tablesorter-resizable-handle {
    background: transparent !important;
}

.tablesorter th,
.tablesorter thead td {
    text-shadow: none !important;
}

.tablesorter tr.noData td,
.tablesorter tr.noData td:hover {
    background: var(--tablesorter-even);
    color: var(--text);
    text-align: center;
    cursor: unset !important;
}

.tablesorter-blue input.tablesorter-filter, .tablesorter-blue select.tablesorter-filter {
    width: 100%;
}



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





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

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



.ui-datepicker-header {
    background: var(--bg) !important;
    color: var(--text) !important;
    border-color: 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);
}



.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-datepicker-next span,
.ui-datepicker-prev span {
    background-color: white;
}

.ui-datepicker-calendar span {
    background: var(--bg-lighter);
}

.ui-state-highlight {
    background-color: var(--highlight) !important;
}