html.signed-out #alert { left: 0 !important; height: 70px !important; background: #f5f9fc; }
html.signed-out .preloader { left: 0 !important; top: 0 !important; }
html.signed-out .hide-signed-out { display: none !important; }
html.signed-in .hide-signed-in { display: none !important; }
html.signed-in .content-signed-in { height: fit-content !important; }
html:not(.is-admin) .hide-not-admin { display: none !important; }

body { min-width: 320px; }

header a.active { font-weight: bold !important; color: var(--x-light) !important; }
header a.active .bi { color: var(--x-light) !important; }

main { min-height: 200px; }

i.bi { line-height: 0; font-size: 16px; }
i.bi.placeholder::before { min-width: 16px; }

form input.form-control.error { border-color: var(--x-yellow-500); box-shadow: 0 0 0 3px rgb(255 187 0 / 25%); }
form label.error { font-size: .75rem; color: var(--x-warning); }
form label.error:empty { display: none !important; }
form.error input:not([type="submit"]) { border-color: var(--x-red-500); box-shadow: 0 0 0 3px rgb(255 51 102 / 25%); }

table tr[role="button"]:not(.ignore):hover a { color: var(--x-blue-500) !important; }

div.card { box-shadow: 0 1px 1px rgb(0 0 0 / 8%); }

#sidebarCollapse.hidden { display: none !important; }

#scrollContent { outline: none; }
#scrollContent .ping > div { width: 16px; height: 16px; border-radius: 50%; animation: blinker 2s ease-in-out infinite; animation-play-state: paused; margin-left: 8px; }

#alert { left: 0; right: 0; height: 76px; display: none; background: #161616; opacity: 0; transition: opacity .15s ease-in-out; pointer-events: none; z-index: 1060; }
#alert.show { opacity: 1; pointer-events: all; }
#alertText { font-weight: 500; color: var(--x-light); background: var(--x-shade-danger); text-align: center; padding: 10px 40px; margin: auto; cursor: pointer; }
#alertText.neutral { background: var(--x-shade-success); }

.preloader { position: fixed; top: 77px; bottom: 0; left: 0; right: 0; display: none; background: #f5f9fc; z-index: 5; }
.preloader .spinner-border { width: 75px; height: 75px; border-width: 5px; border-color: var(--x-blue-500); border-right-color: transparent; color: var(--x-blue-500); margin: auto; }

.navbar-vertical .navbar-nav .nav-link i { min-width: auto !important; margin-right: 14px; }

.dropdown .dropdown-item { display: flex; align-items: center; }

.placeholder { border-radius: .25rem !important; }

.btn i { font-size: 14px; }
.btn-square { width: 46.8px; height: 46.8px; }
.btn-tooltip { border: 0; padding: 0; color: var(--x-blue-500) !important; }
.btn-tooltip:hover { opacity: .8; }
.btn-zoom.zoomed i.zoom-in { display: none; }
.btn-zoom:not(.zoomed) i.zoom-out { display: none; }

.tooltip .tooltip-inner { background: #393939; border: 1px solid #525252; text-align: left; }
.tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: #525252; }
.tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: #525252; }
.tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: #525252; }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #525252; }

.popover { background: #393939 !important; border-color: #525252 !important; }
.popover .popover-header { background-color: #393939; }
.popover .popover-body { border-bottom-left-radius: calc(.5rem - 1px); border-bottom-right-radius: calc(.5rem - 1px); color: #fff; }
.popover.bs-popover-start .popover-arrow::after { border-left-color: #525252; }
.popover.bs-popover-end .popover-arrow::after { border-right-color: #525252; }
.popover.bs-popover-top .popover-arrow::after { border-top-color: #525252; }
.popover.bs-popover-bottom .popover-arrow::after { border-bottom-color: #525252; }

.text-shade-primary { color: var(--x-shade-primary); }
.text-shade-success { color: var(--x-shade-success); }
.text-shade-danger { color: var(--x-shade-danger); }

.text-decoration-underline { text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; }

#efficiencyChart .apexcharts-active { padding-bottom: 0; }
#efficiencyChart .apexcharts-tooltip-y-group { padding: 6px 0 6px; }

#statusChart .apexcharts-active { padding-top: 0; }
#statusChart .apexcharts-tooltip-y-group { padding: 6px 0 6px; }

.flatpickr-calendar { margin-top: 8px; z-index: 5 !important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background-color: var(--x-blue-500) !important; color: #fff !important; }
.flatpickr-day.selected:not(.startRange):not(.endRange) { border-radius: .375rem; }
.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)), .flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)) { box-shadow: -5px 0 0 var(--x-blue-500); }

.cell:not(.temp).status-good { background: #161616; border-color: var(--x-shade-success); color: var(--x-shade-success) !important; }
.cell:not(.temp).status-bad, .cell:not(.temp).status-failed { background: #161616; border-color: #72757e; color: #72757e !important; }
.cell:not(.temp) .for-temp { display: none; }

.cell.temp .for-work { display: none; }
.cell.temp.green { background: #53B549; }
.cell.temp.green-light { background: #72D178; }
.cell.temp.orange-light { background: #F4B467; }
.cell.temp.orange { background: #EB8A33; }
.cell.temp.red-light { background: #E8706C; }
.cell.temp.red { background: #D74037; }
.cell.temp { color: #161616 !important; border-color: #161616 }
.cell.temp:hover { border-color: #161616; }

#minersPage .insideCont { display: flex; justify-content: center; }
#minersPage .container-div { min-width: 0; gap: 48px 24px; }
#minersPage .tank-div { min-width: 0; display: flex; flex-direction: column; flex-wrap: wrap; }
#minersPage .cell { width: 100px; height: 100px; }
#minersPage .cell:hover { border-style: solid !important; }
#minersPage tr.selected .selector { background: var(--x-blue-500); }
#minersPage tr.success .selector { background: var(--x-success); }
#minersPage tr.error .selector { background: var(--x-danger); }
#minersPage .card.zoomed { position: fixed; left: 0; top: 0; height: 100%; width: 100%; margin: 0 !important; z-index: 1035; overflow-y: auto; }
#minersPage .card.zoomed .card-body { display: flex; flex-direction: column; align-items: center; justify-content: center; }
#minersPage .card.zoomed .card-body .scrollable-x { overflow: hidden !important; }

#curtailmentPage tbody a { text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; }
#curtailmentPage tbody a:hover { color: var(--x-blue-500) !important; }

#curtailmentStatsPage tbody a { text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; }
#curtailmentStatsPage tbody a:hover { color: var(--x-blue-500) !important; }

#curtailmentStatsUptimeSettingsPage .flatpickr-wrapper { width: 100%; }

.scrollable-x.active { cursor: all-scroll; }

.badge-dot.t-green { color: #53B549; }
.badge-dot.t-green i { background: #53B549; }
.badge-dot.t-orange { color: #EB8A33; }
.badge-dot.t-orange i { background: #EB8A33; }
.badge-dot.t-red { color: #D74037; }
.badge-dot.t-red i { background: #D74037; }

@media (min-width: 992px) {
    html.signed-in .content-signed-in { height: unset !important; }
    html.signed-in main { height: unset !important; }
    
    #alert { left: 270px; height: 60px; }
    #alertText { padding: 8px 40px; }
    
    .preloader { left: 270px; top: 61px; }

    .navbar-brand { padding-left: 28px; padding-right: 28px; }

    .flatpickr-calendar { left: auto !important; right: 34px !important; }

    .offcanvas .flatpickr-calendar { left: 0 !important; right: auto !important; }
}

.jsoneditor .ace_mobile-menu { display: none; }
.jsoneditor .ace_gutter-cell.ace_error, .jsoneditor .ace_icon.ace_error, .jsoneditor .ace_icon.ace_error_fold { background-image: url(/i/ace/error.svg); }
.jsoneditor .ace_gutter-cell.ace_warning, .jsoneditor .ace_icon.ace_warning, .jsoneditor .ace_icon.ace_warning_fold { background-image: url(/i/ace/warning.svg); }

[data-theme=light] .jsoneditor { border-color: rgba(0, 0, 0, .1); }

/* DARK THEME */
[data-theme=dark].signed-out #alert { background: #0f0f0f !important; }
[data-theme=dark] .preloader { background: #0f0f0f !important; }

[data-theme=dark] *, [data-theme=dark] :after, [data-theme=dark] :before { border-color: hsla(0, 0%, 100%, .1); }

header .placeholder { background: var(--x-light); }

input:-webkit-autofill, input:-webkit-autofill:focus { transition: background-color 600000s 0s, color 600000s 0s; }
.form-control, .form-select, .btn, .btn-close { box-shadow: none !important; border-radius: 0 !important; }
.form-check-input, .input-group { box-shadow: none !important; }

[data-theme=dark] h1, [data-theme=dark] h2, [data-theme=dark] h3, [data-theme=dark] h4, [data-theme=dark] h5, [data-theme=dark] h6, [data-theme=dark] .h1, [data-theme=dark] .h2, [data-theme=dark] .h3, [data-theme=dark] .h4, [data-theme=dark] .h5, [data-theme=dark] .h6 { color: #fffffe; }

hr:not([size]) { flex-shrink: 0; }
hr:not([class*=opacity]) { color: hsla(0, 0%, 100%, .1); }

.bg-blue { background-color: var(--x-blue-500) !important; }

[data-theme=dark] .bg-surface-secondary { background: #0f0f0f !important; }
[data-theme=dark] .bg-white { background: #161616 !important; }
[data-theme=dark] .bg-secondary, [data-theme=dark] .bg-shade-secondary { background: #72757e !important; }

[data-theme=dark] .form-label, [data-theme=dark] .form-check-label { color: #fffffe; }
[data-theme=dark] .form-control, [data-theme=dark] .form-select { border-color: #72757e; }
[data-theme=dark] .form-control, [data-theme=dark] .form-control:focus, [data-theme=dark] .form-select, [data-theme=dark] .form-select:focus { background-color: #0f0f0f; color: #fffffe; }
.form-control:focus, .form-select:focus { border-color: var(--x-blue-500); }
.form-control::placeholder, .form-control:focus::placeholder { color: #72757e; }
[data-theme=dark] .form-control:disabled, [data-theme=dark] .form-select:disabled { background: rgba(255, 255, 255, .12); color: #fffffe; opacity: .65; }
[data-theme=dark] .form-select.dark { background: #252525; }
[data-theme=dark] .form-check-input:not(.regular) { background-color: #0f0f0f; border-color: #72757e !important; }
.form-check-input:not(.regular) { border-color: rgba(0, 0, 0, .25); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%2372757e'/%3E%3C/svg%3E") !important; }
.form-check-input:not(.regular):checked { background-color: var(--x-blue-500); border-color: var(--x-blue-500) !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23ffffff'/%3E%3C/svg%3E") !important; }

.form-check.regular { min-height: 16px; }
[data-theme=dark] .form-check-input.regular { background-color: #212121; }
.form-check-input.regular { width: 16px; height: 16px; margin-top: 0; }
.form-check-input.regular:focus { border-color: var(--x-blue-500); }
.form-check-input.regular:checked { background-color: var(--x-blue-500); border-color: var(--x-blue-500) !important; }

[data-theme=dark] .input-group-text { background: transparent; border-color: #72757e; color: #72757e; }
.input-group-text { border-radius: 0; }
.input-group:focus-within .input-group-text, .input-group:focus-within .form-control { border-color: var(--x-blue-500); }

.btn.border-0 { padding: 13px 20px; }

[data-theme=dark] .btn-neutral, [data-theme=dark] .btn-neutral.disabled, [data-theme=dark] .btn-neutral:disabled { background: #252525; border-color: #525252 !important; color: #fffffe !important; }
[data-theme=dark] .btn-neutral:hover, [data-theme=dark] .btn-neutral:focus { background: #181818; }

.btn-primary, .btn-primary.disabled, .btn-primary:disabled { background-color: var(--x-blue-500) !important; border-color: var(--x-blue-500) !important; color: #fffffe !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--x-blue-600) !important; border-color: var(--x-blue-600) !important; color: #fffffe !important; }

.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.btn[class*=gradient] { transition: opacity .15s ease-in-out; }
.btn[class*=gradient]:hover, .btn[class*=gradient]:focus { opacity: .8; }

.border-primary { border-color: var(--x-blue-500) !important; }
.border-primary-hover:hover { border-color: var(--x-blue-500) !important; }

[data-theme=dark] .text-muted { color: #8d8d8d !important; }
.text-primary { color: var(--x-blue-500) !important; }
.text-primary-hover:hover { color: var(--x-blue-500) !important; }
[data-theme=dark] .text-heading { color: #fffffe !important; }

.card { border-radius: 0; }
[data-theme=dark] .card { background: #242629; }
[data-theme=dark] .card-header { border-color: hsla(0, 0%, 100%, .1); }

.dropdown-menu-dark { background: #393939; border-color: #525252; border-radius: 0; }
.dropdown-menu-dark .dropdown-divider { border-color: #525252; }

.navbar-dark .navbar-toggler:focus { background-color: transparent; }

.vr { background: hsla(0, 0%, 100%, .1); opacity: 100 !important; }

[data-theme=dark] .table { --x-table-hover-bg: #161616 !important }
.table >:not(:first-child) { border-top: 1px solid hsla(0, 0%, 100%, .1); }
[data-theme=dark] .table thead.border-top { border-color: hsla(0, 0%, 100%, .1); }
[data-theme=dark] .table tr { border-color: hsla(0, 0%, 100%, .1); }
[data-theme=dark] .table th { color: #94a1b2 !important; }
[data-theme=dark] .table td, [data-theme=dark] .table td a { color: #fffffe; }
[data-theme=dark] .table-hover-bg td { color: #fffffe !important; }
[data-theme=dark] .table-light th { background-color: #161616 !important; color: #cfd6df !important; border-color: hsla(0, 0%, 100%, .1); }

caption { color: #72757e; }

[data-theme=dark] .offcanvas { border-color: #525252; }
[data-theme=dark] .offcanvas-header { border-color: #525252; }
[data-theme=dark] .offcanvas-body { background: #161616; }
[data-theme=dark] .offcanvas .modal-footer { border-color: #525252; }
.offcanvas .modal-footer { border-radius: 0; }

.nav-link:focus, .nav-link:hover { color: var(--x-blue-500); }
.nav-tabs .nav-link { border-bottom-width: 2px; }
.nav-tabs .nav-link.active { color: var(--x-blue-500); border-color: var(--x-blue-500); }

.flatpickr-calendar { border-radius: 0; }
[data-theme=dark] .flatpickr-calendar { border: 1px solid #525252; background: #393939; }
[data-theme=dark] .flatpickr-months { background: #393939; }
[data-theme=dark] .flatpickr-months .flatpickr-next-month svg, [data-theme=dark] .flatpickr-months .flatpickr-prev-month svg { fill: #cfd6df; }
[data-theme=dark] .flatpickr-months .flatpickr-next-month:hover svg, [data-theme=dark] .flatpickr-months .flatpickr-prev-month:hover svg { fill: #fffffe; }
[data-theme=dark] .flatpickr-month .cur-month { color: #fffffe !important; }
[data-theme=dark] .flatpickr-month .cur-year { color: #cfd6df !important; }
.flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: transparent !important; }
.flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: transparent !important; }
[data-theme=dark] .flatpickr-calendar span.flatpickr-weekday { color: #fffffe; }
[data-theme=dark] .flatpickr-calendar span.flatpickr-day { color: #fffffe; }
.flatpickr-calendar span.flatpickr-day.selected, [data-theme=dark] .flatpickr-calendar span.flatpickr-day.startRange, [data-theme=dark] .flatpickr-calendar span.flatpickr-day.endRange { color: #fffffe !important; }
[data-theme=dark] .flatpickr-day.prevMonthDay { color: rgba(255, 255, 255, .5) !important; }
[data-theme=dark] .flatpickr-day.flatpickr-disabled, [data-theme=dark] .flatpickr-day.flatpickr-disabled:hover { color: rgba(255, 255, 255, .1) !important; }
[data-theme=dark] .flatpickr-day.prevMonthDay:not(.flatpickr-disabled):hover { background: hsla(0, 0%, 100%, .15); }
.flatpickr-day.inRange:not(.selected) { border-radius: 0; }
[data-theme=dark] .flatpickr-day.inRange:not(.selected) { box-shadow: -5px 0 0 #565656, 5px 0 0 #565656; background: #565656 !important; }
.flatpickr-day.endRange.startRange.endRange, .flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange { border-radius: .375rem; }
.flatpickr-day.endRange.startRange, .flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange { border-radius: .375rem 0 0 .375rem; }
.flatpickr-day.endRange.endRange, .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange { border-radius: 0 .375rem .375rem 0; }
.flatpickr-day.today:not(.endRange) { color: var(--x-blue-500) !important; }
[data-theme=dark] .flatpickr-day:hover, [data-theme=dark] .flatpickr-day.today:hover { background: hsla(0, 0%, 100%, .15); }
[data-theme=dark] .flatpickr-calendar.hasTime .flatpickr-time { border-color: hsla(0, 0%, 100%, .1); }
[data-theme=dark] .flatpickr-hour, [data-theme=dark] .flatpickr-minute, [data-theme=dark] .flatpickr-am-pm { color: #fffffe; }
[data-theme=dark] .flatpickr-hour:hover, [data-theme=dark] .flatpickr-hour:focus, [data-theme=dark] .flatpickr-minute:hover, [data-theme=dark] .flatpickr-minute:focus, [data-theme=dark] .flatpickr-am-pm:hover, [data-theme=dark] .flatpickr-am-pm:focus { background: hsla(0, 0%, 100%, .15); }
[data-theme=dark] .flatpickr-time-separator { color: #fffffe; }

.flatpickr[data-no-mins] + .flatpickr-calendar .flatpickr-time .flatpickr-time-separator { display: none; }
.flatpickr[data-no-mins] + .flatpickr-calendar .flatpickr-time .flatpickr-time-separator + .numInputWrapper { display: none; }

.apexcharts-tooltip > div:first-child { padding-top: 4px; }
.apexcharts-tooltip > div:not(:last-child) { padding-bottom: 0; }
.apexcharts-toolbar { padding: 0 !important; z-index: 4 !important; }
.apexcharts-toolbar > div { width: 24px !important; height: 24px !important; transform: none !important; margin-left: 16px !important; }
.apexcharts-toolbar > div > svg { overflow: visible !important; stroke-width: .5 !important; fill: #6e8192; }
.apexcharts-toolbar > div:hover > svg { fill: #333; }
.apexcharts-toolbar > div.apexcharts-selected > svg { fill: #008ffb; }

.chart-pie div .apexcharts-tooltip > div { padding-top: 0 !important; }

small.seconds { color: #72757e; }

::-webkit-scrollbar { width: 10px; }
[data-theme=dark] ::-webkit-scrollbar-thumb { background-color: #4F4F4F; }
[data-theme=dark] ::-webkit-scrollbar-track { background-color: #333333; }

[data-theme=light] .theme-dark-show { display: none !important; }
[data-theme=dark] .theme-light-show { display: none !important; }

/* LIGHT THEME */
[data-theme=light] .form-control:disabled { color: #8898a9 !important; }

[data-theme=light] .text-white { --x-white-rgb: 0, 0, 0 !important; }
[data-theme=light] .text-white.badge { --x-white-rgb: 255, 255, 255 !important; }
[data-theme=light] .text-light { --x-light-rgb: 0, 0, 0 !important; }
[data-theme=light] .text-light.badge { --x-light-rgb: 255, 255, 255 !important; }
[data-theme=light] .text-secondary { --x-secondary-rgb: var(--x-muted-rgb) !important }

[data-theme=light] #alert { background: #fff !important; }

[data-theme=light] .dropdown-menu-dark { background: #fff !important; border-color: #f0f2f6 !important; }
[data-theme=light] .dropdown-menu-dark .dropdown-divider { border-color: #f2f3f7 !important; }
[data-theme=light] .dropdown-item:not(.text-warning):not(.text-danger) { color: #525F7F !important; }
[data-theme=light] .dropdown-item:not(.text-warning):not(.text-danger):hover { color: #16192c !important; }
[data-theme=light] .dropdown-item:hover { background-color: hsla(0, 0%, 90%, .25); }
[data-theme=light] .dropdown-menu-dark .dropdown-item.disabled, [data-theme=light] .dropdown-menu-dark .dropdown-item:disabled { color: #8898a9 !important; }

[data-theme=light] #sidebar { border-color: #f0f2f6 !important; }
[data-theme=light] #sidebar .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%236B7B93' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important; }
[data-theme=light] #sidebar .navbar-divider { opacity: .9 !important; }
[data-theme=light] #sidebar .nav-item .nav-link, [data-theme=light] #sidebar .nav-item .nav-link i { color: #16192c !important; }
[data-theme=light] #sidebar .nav-item .nav-link:hover, [data-theme=light] #sidebar .nav-item .nav-link:hover i { background-color: #f5f9fc !important; color: #495392 !important; }

[data-theme=light] #sidebarCollapse button.gradient-left span { color: #fff !important; }
[data-theme=light] #sidebarCollapse button.gradient-left i { color: #fff !important; opacity: .9 !important; }

[data-theme=light] .table td, [data-theme=light] .table td a { color: #525f7f; }
[data-theme=light] .table td[colspan] { --x-table-accent-bg: #fff; }
[data-theme=light] .table td[colspan]:hover { --x-table-accent-bg: #f5f9fc; }

[data-theme=light] ::-webkit-scrollbar-thumb { background-color: #e6e6e6 !important; }
[data-theme=light] ::-webkit-scrollbar-track { background-color: #f6f6f6 !important; }

[data-theme=light] .cell:not(.temp).status-good { background: #f5f9fc; }
[data-theme=light] .cell:not(.temp).status-bad, [data-theme=light] .cell:not(.temp).status-failed { background: #f5f9fc; }
[data-theme=light] .cell.temp { color: #f5f9fc !important; border-color: #f5f9fc; }
[data-theme=light] .cell.temp:hover { border-color: #f5f9fc; }

[data-theme=light] .vr { background: rgba(107, 123, 147, .3) !important; }
[data-theme=light] main hr { color: #0f0f0f; }
[data-theme=light] main hr:not([class*=opacity]) { opacity: .1; }

[data-theme=light] #mqttPage thead th { background: #fff; }
[data-theme=light] #softwarePage thead th { background: #fff; }

@keyframes blinker {
    50% {
        opacity: 0;
    }
}