.report-bg1 {
	background-color: #ffbe0b;
}

.report-bg2 {
	background-color: #8338ec;
}

.report-bg3 {
	background-color: #fb5607;
}

.dashboard-widget:hover {
	transform: scale(1.05);
}

.apexcharts-tooltip-rangebar .separator {
	display: inline !important;
}

td.dataTables_empty {
	text-align: center;
}

.profile-pic {
	width: auto;
	height: 300px;
	max-height: 300px;
}

#readingtype:not(:checked) {
	background-color: #009ef7 !important;
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")
}

#consumptiontype:not(:checked) {
	background-color: #009ef7 !important;
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")
}
#yellowequipmentconsumptiontype:not(:checked) {
	background-color: #009ef7 !important;
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")
}
#ldvconsumptiontype:not(:checked) {
	background-color: #009ef7 !important;
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")
}
#ldvyellowequipmentconsumptiontype:not(:checked) {
	background-color: #009ef7 !important;
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")
}

.h-1200px {
	height: 1200px !important;
}

.bg-darkgreen {
	background-color: #0f7c00 !important;
}

.bg-info {
	background-color: #8338ec !important;
}

.custom-input {
	width: 97%;
	margin-left: 3px;
	height: 2.625em;
	padding: 0 .75em;
	border: 1px solid #d9d9d9;
	box-sizing: border-box;
	border-radius: .1875em;
	background: 0 0;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06), 0 0 0 3px transparent;
	font-size: 14px;
	color: #545454;
	margin-top: 10px;
}

.custom-input:focus {
	border: 1px solid #b4dbed;
	outline: 0;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06), 0 0 0 3px rgba(100, 150, 200, .5);
}

@media (min-width:992px) {

    .modal-custom {
        --bs-modal-width: 700px
    }
}

body.login-page {
    background-image: url('../media/auth/loginbg.jpg') !important;
}

.login-page .bg-body {
    background: rgba(21, 23, 28, 0.8) !important;
}

.app-header-primary {
    background-color: #1c1e26;
}

.form-control.form-control-lg.form-control-solid.error,
.form-control.form-control-solid.error {
	border: 1px solid #f64e60;
}

label.error {
	padding-top: 5px;
	color: #f64e60 ;
}

.image-html {
	max-height: unset !important;
}

#monitortable {
    table-layout: fixed;
    width: 100%;
}

#monitortable td,
#monitortable th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

p.sub {
margin: 0 0 16px;
color: #666;
font-size: 13px;
}
#chartcontainer {
height: 480px;
}
/* custom interpolated tooltip */
#custom-tooltip {
position: absolute;
pointer-events: none;
background: rgba(30, 32, 40, 0.94);
color: #fff;
padding: 8px 12px;
border-radius: 6px;
font-size: 12.5px;
line-height: 1.5;
box-shadow: 0 4px 14px rgba(0,0,0,0.25);
display: none;
z-index: 20;
white-space: nowrap;
}
#custom-tooltip .tt-x {
font-weight: 600;
margin-bottom: 4px;
color: #cfd3dc;
border-bottom: 1px solid rgba(255,255,255,0.15);
padding-bottom: 3px;
}
#custom-tooltip .tt-row {
display: flex;
align-items: center;
gap: 6px;
}
#custom-tooltip .swatch {
width: 9px;
height: 9px;
border-radius: 50%;
display: inline-block;
flex: 0 0 auto;
}
.hint {
margin-top: 10px;
font-size: 12px;
color: #888;
}

.tab-loader-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 9999;
    background: linear-gradient(90deg, transparent 0%, #009ef7 40%, #50cd89 100%);
    background-size: 200% 100%;
    animation: tab-loader-slide 1.2s ease-in-out infinite;
}

@keyframes tab-loader-slide {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}