* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.royal-bg {
    background-image: url('../media/logos/login.png');
}

.royal-grey {
    background-color: #6A757C;
}

.bg-white {
    background-color: #ffffff;
}

.royal-light {
    background-color: #5F9632;
}

.royal-green {
    background-color: #00828c;
}

.form-control.form-control-solid {
    background-color: #eef3f7;
}

.dropdown.show>.form-control.form-control-solid,
.form-control.form-control-solid:active,
.form-control.form-control-solid.active,
.form-control.form-control-solid:focus,
.form-control.form-control-solid.focus {
    background-color: #e2e7eb;
    border-color: #e2e7eb;
    color: #5E6278;
}

.mt-13 {
    margin-top: 13rem !important;
}

.ml-5 {
    margin-left: 5px;
}

.ml-20 {
    margin-left: 20px;
}

.mr-20 {
    margin-right: 20px !important;
}

.bg-royal-green {
    background-color: #00828c;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-general-red {
    border-bottom-right-radius: 0.625rem;
    border-bottom-left-radius: 0.625rem;
    background-color: #00828c;
    color: white !important;
}

.header.align-items-stretch {
    background-color: #005359;
}

.link-primary,
a {
    color: #00828c
}

.link-primary:focus,
.link-primary:hover {
    color: #005359;
}

.menu-title-gray-800 .menu-item .menu-link .menu-title {
    color: #ffffff;
}

.text-hover-primary:hover {
    color: #00828c !important;
}

.menu-state-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here),
.menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    color: #00828c;
}

.menu-state-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here),
.menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    color: #00828c;
}

.aside .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here),
.aside .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    background-color: #005359;
}

.aside .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon i,
.aside .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon i {
    color: #ffffff
}

.aside .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon svg [fill]:not(.permanent):not(g),
.aside .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #ffffff
}

.daterangepicker .ranges li.active {
    background-color: #00828c;
}

.daterangepicker .ranges li:hover:not(.active) {
    color: #00828c;
}

.daterangepicker .drp-calendar td.active {
    background-color: #00828c !important;
}

.daterangepicker .drp-calendar td.in-range.available:not(.active):not(.off):not(.today) {
    color: #00828c !important;
    background-color: #909fa9 !important;
}

.daterangepicker .drp-calendar td.today,
.daterangepicker .drp-calendar td.today.active {
    color: #00828c !important;
    background-color: #909fa9 !important;
}

.daterangepicker .drp-calendar td.available:not(.off):hover,
.daterangepicker .drp-calendar th.available:not(.off):hover {
    color: #00828c;
    background-color: #909fa9;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected {
    background-color: #00828c;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--highlighted {
    background-color: #6A757C;
    color: #ffffff;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
    border-color: #005359;
    background-color: #005359;
}

.btn.btn-light-primary,
.btn.btn-light-primary:hover,
.btn.btn-light-primary:focus,
.btn.btn-light-primary:active,
.btn.btn-light-primary.active {
    color: #005359;
}

.btn-check:active+.btn.btn-primary,
.btn-check:checked+.btn.btn-primary,
.btn.btn-primary.active,
.btn.btn-primary.show,
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:hover:not(.btn-active),
.show>.btn.btn-primary {
    border-color: #005359;
    background-color: #005359 !important;
}

.btn-check:active+.btn.btn-active-color-primary,
.btn-check:checked+.btn.btn-active-color-primary,
.btn.btn-active-color-primary.active,
.btn.btn-active-color-primary.show,
.btn.btn-active-color-primary:active:not(.btn-active),
.btn.btn-active-color-primary:focus:not(.btn-active),
.btn.btn-active-color-primary:hover:not(.btn-active),
.show>.btn.btn-active-color-primary {
    color: #00828c;
}

.btn-check:active+.btn.btn-light-primary,
.btn-check:checked+.btn.btn-light-primary,
.btn.btn-light-primary.active,
.btn.btn-light-primary.show,
.btn.btn-light-primary:active:not(.btn-active),
.btn.btn-light-primary:focus:not(.btn-active),
.btn.btn-light-primary:hover:not(.btn-active),
.show>.btn.btn-light-primary {
    border-color: #89949c;
    background-color: #89949c !important;
}

.aside .btn-custom.active,
.aside .btn-custom.show,
.aside .btn-custom:active:not(.btn-active),
.aside .btn-custom:focus:not(.btn-active),
.aside.btn-custom:hover:not(.btn-active),
.btn-check:active+.aside .btn-custom,
.btn-check:checked+.aside.aside .btn-custom,
.show>.aside .btn-custom {
    color: #00828c;
}

.aside .btn-custom .btn-icon svg:hover [fill]:not(.permanent):not(g) {
    transition: fill .3s ease
}

.svg-icon svg [fill]:not(.permanent):not(g) {
    fill: #ffffff;
}

.svg-icon.svg-icon-primary svg [fill]:not(.permanent):not(g) {
    fill: #00828c;
    background-color: #00828c;
}

.menu-state-title-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-title,
.menu-state-title-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title {
    color: #ffffff;
}

.menu-state-bullet-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-bullet .bullet,
.menu-state-bullet-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-bullet .bullet {
    background-color: #ffffff;
}

.form-check.form-check-solid .form-check-input:checked {
    background-color: #00828c;
}

/* Datatables */
.page-item.active .page-link {
    background-color: #00828c;
}

.iot-dash {
    height: 100%;
    width: 100%;
    background-image: url('../media/logos/welcome-logo.png');
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 50%;
}

.loader {
    font-size: 50px;
}

#daterange {
    position: relative;
    color: #7e8299;
    font-size: .925rem;
    font-weight: 800;
    text-align: center;
    border: none;
    top: 20%;
    height: 60%;
    border-radius: 5px;
    outline: 0;
}

.reservoir-map-icon {
    background-color: rgba(0, 0, 0, 0);
}

.circle {
    position: absolute;
    text-align: center;
    width: 51px;
    height: 51px;
    font-size: 100%;
    font-weight: 800;
    padding-top: 15px;
    border: 1px solid black;
    border-radius: 100%;
}

.form-check-input:checked {
    background-color: #00828c;
    border-color: #00828c;
}

.swal2-styled.swal2-confirm {
    background-color: #00828c;
}

.legend {
	background: white;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	font-size: 14px;
}

.leaflet-bottom.leaflet-left .legend-container {
	display: flex;
	gap: 10px;
}