@font-face {
    font-family: 'bai-jamjure';
    src: url('../font/Bai_Jamjuree/BaiJamjuree-Medium.ttf')format('truetype');
    font-weight: 600;
    font-style: normal;
}

body{
    font-family: "bai-jamjure", sans-serif;
}
:root {
    --color-primary-25: #f5fafa;
    --color-primary-50: #e6f7f7;
    --color-primary-100: #cceeee;
    --color-primary-200: #99dddd;
    --color-primary-300: #66cccc;
    --color-primary-400: #3fb3b2;
    --color-primary-500: #2f9695; /* base */
    --color-primary-600: #277979;
    --color-primary-700: #205f5f;
    --color-primary-800: #184646;
    --color-primary-900: #113232;
    --color-primary-950: #0a1f1f;
}

.btn-login {
    color: #fff !important;
    background-color: var(--color-primary-500) !important;
    border-color: var(--color-primary-500) !important;
}

.btn-login:hover {
    color: #fff !important;
    background-color: var(--color-primary-600) !important;
    border-color: var(--color-primary-600) !important;
}

.btn-login:focus,
.btn-login.focus {
    box-shadow: 0 0 0 0.2rem rgba(47, 150, 149, 0.4) !important;
    color: #fff !important;
    background-color: var(--color-primary-600) !important;
    border-color: var(--color-primary-700) !important;
}


 a {
     color: inherit;
 }

 .card__one {
     transition: transform .5s;
 }

 .card__one::after {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     transition: opacity 2s cubic-bezier(.165, .84, .44, 1);
     box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .15);
     content: '';
     opacity: 0;
     z-index: -1;
 }

 .card__one:hover,
 .card__one:focus {
     transform: scale3d(1.036, 1.036, 1);
     -webkit-box-shadow: -1px -1px 16px -4px rgba(0, 0, 0, 0.53);
     -moz-box-shadow: -1px -1px 16px -4px rgba(0, 0, 0, 0.53);
     box-shadow: -1px -1px 16px -4px rgba(0, 0, 0, 0.53);


 }

 a:hover {
     color: inherit;
     text-decoration: none;
     cursor: pointer;
 }

 #loader {
     position: relative;
     width: 50px;
     height: 50px;
     border: 2px solid rgba(255, 255, 255, 0.2);
     border-radius: 50px;
     top: 100px;
     left: 50%;
     margin-left: -25px;
     animation-name: spinner 0.4s linear infinite;
     -webkit-animation: spinner 0.4s linear infinite;
     -moz-animation: spinner 0.4s linear infinite;
 }

 

 @keyframes spinner {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 @-webkit-keyframes spinner {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 @-moz-keyframes spinner {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 /* BOOTSTRAP SELECT CSS */
 .btn-light {
     color: #999;
     background: white;
     border-color: #CED4DA;
 }

 .dropdown-item.active,
 .dropdown-item:active {
     color: #333351;
     text-decoration: none;
     background-color: #E6ECF0;
 }

 /* SCROLL BAR */
 /*
       *  STYLE 3
       */
 .style-3::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
     background-color: #F5F5F5;
 }

 .style-3::-webkit-scrollbar {
     width: 6px;
     background-color: #F5F5F5;
 }

 .style-3::-webkit-scrollbar-thumb {
     background-color: var(--color-primary-400);
 }

 .hilang {
     display: none !important;
 }

 /* PROGRESS AND LOADER */
 #nprogress .bar {
     background: var(--color-primary-500) !important;
 }

 #nprogress .peg {
     box-shadow: 0 0 10px var(--color-primary-500), 0 0 5px var(--color-primary-500) !important;
 }

 #nprogress .spinner-icon {
     border-top-color: var(--color-primary-500) !important;
     border-left-color: var(--color-primary-500) !important;
 }

 #preloader {
     z-index: 999999;
     position: fixed;
     top: 0;
     left: 0;
     background: #ffffffeb;
     width: 100%;
     height: 100%;
     /*  */
 }

 #loader {
     display: block;
     position: relative;
     left: 50%;
     top: 50%;
     width: 150px;
     height: 150px;
     margin: -75px 0 0 -75px;
     border-radius: 50%;
     border: 3px solid transparent;
     border-top-color: var(--color-primary-400);
     -webkit-animation: spin 2s linear infinite;
     animation: spin 2s linear infinite;
 }

 #loader:before {
     content: "";
     position: absolute;
     top: 5px;
     left: 5px;
     right: 5px;
     bottom: 5px;
     border-radius: 50%;
     border: 3px solid transparent;
     border-top-color: var(--color-primary-300);
     -webkit-animation: spin 3s linear infinite;
     animation: spin 3s linear infinite;
 }

 #loader:after {
     content: "";
     position: absolute;
     top: 15px;
     left: 15px;
     right: 15px;
     bottom: 15px;
     border-radius: 50%;
     border: 3px solid transparent;
     border-top-color: var(--color-primary-700);
     -webkit-animation: spin 1.5s linear infinite;
     animation: spin 2s linear infinite;
 }

 @-webkit-keyframes spin {
     0% {
         -webkit-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
         transform: rotate(0deg);
     }

     100% {
         -webkit-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }

 @keyframes spin {
     0% {
         -webkit-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
         transform: rotate(0deg);
     }

     100% {
         -webkit-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }

 /* FLOATING BUTTON */
 .circle-div {
     height: 60px;
     /* width: 60px; */
     border-radius: 100%;
     position: fixed;
     bottom: 21px;
     right: 25px;
 }

 /* LIST SELECT DEVICE */
 .devices .list-group {
     display: flex;
     flex-direction: column;
     padding-left: 0;
     margin-bottom: 0;
 }

 .devices .list-group-item-action {
     width: 100%;
     color: #495057;
     text-align: inherit;
 }

 .devices .list-group-item-action:hover,
 .devices .list-group-item-action:focus {
     color: #495057;
     text-decoration: none;
     background-color: #f8f9fa;
 }

 .devices .list-group-item-action:active {
     color: #868ba1;
     background-color: #e9ecef;
 }

 .devices .list-group-item {
     position: relative;
     display: block;
     padding: 0.75rem 1.25rem;
     margin-bottom: 10px;
     background-color: #fff;
     border: 1px solid rgba(0, 0, 0, 0.125);
 }

 .devices .list-group-item:first-child {
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
 }

 .devices .list-group-item:last-child {
     margin-bottom: 10px;
     border-bottom-right-radius: 20px;
     border-bottom-left-radius: 20px;
 }

 .devices .list-group-item:hover,
 .devices .list-group-item:focus {
     z-index: 1;
     text-decoration: none;
 }

 .devices .list-group-item.disabled,
 .devices .list-group-item:disabled {
     color: #6c757d;
     background-color: #fff;
 }

 .devices .list-group-item.active {
     z-index: 2;
     color: #fff !important;
     background-color: var(--color-primary-800);
     border-color: var(--color-primary-800);
 }


 /* DATE PICKER */
 /* .datepicker-dropdown{
     z-index: 999 !important;
 } */

 /* MODAL */
 .modal-backdrop{
     z-index: 99999;
 }

 .modal{
     z-index: 100000;

 }

 /* SWALL */
 .swal2-container.swal2-backdrop-show,
 .swal2-container.swal2-noanimation {
     background: rgba(0, 0, 0, .4);
     z-index: 99999;
 }

 /* LOADER */
.overlay-ajax {
    width: 100%;
    height: 100%;
    display: table;
    background: rgba(255, 255, 255, 0.5);
    padding: 20px;
}

.overlay-ajax i {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.spin-big {
    font-size: 50px;
    height: 50px;
    width: 50px;

}

.spin-normal {
    font-size: 35px;
    height: 35px;
    width: 35px;
}

.spin-small {
    font-size: 20px;
    height: 20px;
    width: 20px;
}

/* SELECT PICKER */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary-500) !important;
}

/* ==========================================================================
   PRIMARY COLOR SCHEMA & BUTTON / ACCENT OVERRIDES
   ========================================================================== */

/* Primary & Action Buttons */
.btn-primary,
.btn-info,
.btn-blue {
    color: #fff !important;
    background-color: var(--color-primary-500) !important;
    border-color: var(--color-primary-500) !important;
}

.btn-primary:hover,
.btn-info:hover,
.btn-blue:hover {
    color: #fff !important;
    background-color: var(--color-primary-600) !important;
    border-color: var(--color-primary-600) !important;
}

.btn-primary:focus,
.btn-primary.focus,
.btn-info:focus,
.btn-info.focus,
.btn-blue:focus,
.btn-blue.focus {
    color: #fff !important;
    background-color: var(--color-primary-600) !important;
    border-color: var(--color-primary-700) !important;
    box-shadow: 0 0 0 0.2rem rgba(47, 150, 149, 0.4) !important;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.show > .btn-info.dropdown-toggle {
    color: #fff !important;
    background-color: var(--color-primary-700) !important;
    border-color: var(--color-primary-800) !important;
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-info:not(:disabled):not(.disabled):active:focus,
.btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus,
.show > .btn-info.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(47, 150, 149, 0.4) !important;
}

.btn-primary.disabled,
.btn-primary:disabled,
.btn-info.disabled,
.btn-info:disabled {
    color: #fff !important;
    background-color: var(--color-primary-400) !important;
    border-color: var(--color-primary-400) !important;
    opacity: 0.65 !important;
}

/* Outline Buttons */
.btn-outline-primary,
.btn-outline-info {
    color: var(--color-primary-500) !important;
    border-color: var(--color-primary-500) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-info:hover,
.btn-outline-primary:focus,
.btn-outline-info:focus,
.btn-outline-primary:active,
.btn-outline-info:active {
    color: #fff !important;
    background-color: var(--color-primary-500) !important;
    border-color: var(--color-primary-500) !important;
}

/* Badges */
.badge-primary,
.badge-info {
    background-color: var(--color-primary-500) !important;
    color: #fff !important;
}

/* Text Colors */
.text-primary,
.text-info,
.tx-primary,
.tx-info {
    color: var(--color-primary-500) !important;
}

a.text-primary:hover,
a.text-primary:focus,
a.text-info:hover,
a.text-info:focus,
a.tx-info:hover,
a.tx-info:focus {
    color: var(--color-primary-700) !important;
}

.hover-info:hover {
    color: var(--color-primary-500) !important;
}

/* Backgrounds & Gradients */
.bg-primary,
.bg-info {
    background-color: var(--color-primary-500) !important;
}

.bg-water {
    background-image: linear-gradient(to right, var(--color-primary-500) 0%, var(--color-primary-300) 100%) !important;
}

.bg-royal {
    background-image: linear-gradient(to right, var(--color-primary-900) 0%, var(--color-primary-700) 100%) !important;
}

.dashboard-header,
[style*="background: #00597A"],
[style*="background:#00597A"],
[style*="background: #00597a"],
[style*="background:#00597a"] {
    background: var(--color-primary-700) !important;
}

/* Card Borders & Value Boxes */
.border-primary,
.border-info {
    border-color: var(--color-primary-500) !important;
}

.card-gradient-border {
    border-top: 5px solid transparent !important;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(to right, var(--color-primary-500) 0%, var(--color-primary-300) 100%) border-box !important;
    border-radius: 20px !important;
}

.card-border {
    border-left: 5px solid transparent !important;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(to top, var(--color-primary-500) 0%, var(--color-primary-300) 100%) border-box !important;
    border-radius: 20px !important;
}

.icon-box {
    background-color: var(--color-primary-50) !important;
    color: var(--color-primary-500) !important;
}

.card-hover:hover .arrow-icon {
    color: var(--color-primary-500) !important;
}

.alarm-value-large,
[id^="alarm-bg-value-"] {
    background-color: var(--color-primary-25) !important;
    border: 1px solid var(--color-primary-100) !important;
}

/* Sidebar Navigation Link (Active & Hover) */
.br-menu-link:hover,
.br-menu-link:focus {
    color: #fff !important;
    background-image: linear-gradient(to right, var(--color-primary-500) 0%, var(--color-primary-400) 100%) !important;
}

.br-menu-link.active {
    color: #fff !important;
    background-image: linear-gradient(to right, var(--color-primary-600) 0%, var(--color-primary-400) 100%) !important;
    background-repeat: repeat-x !important;
}

.br-menu-link.active .menu-item-icon,
.br-menu-link:hover .menu-item-icon {
    color: #fff !important;
}

/* Form Controls & Dropdowns */
.form-control:focus {
    border-color: var(--color-primary-400) !important;
    box-shadow: 0 0 0 0.2rem rgba(47, 150, 149, 0.25) !important;
}

.form-check-input:checked {
    background-color: var(--color-primary-500) !important;
    border-color: var(--color-primary-500) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--color-primary-500) !important;
    border-color: var(--color-primary-500) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--color-primary-500) !important;
    border-color: var(--color-primary-500) !important;
    color: #fff !important;
}

.page-link {
    color: var(--color-primary-600) !important;
}

.page-link:hover {
    color: var(--color-primary-800) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--color-primary-500) !important;
    color: #fff !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--color-primary-400) !important;
}

/* JQuery Confirm blue buttons */
.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button.btn-blue,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-blue {
    background-color: var(--color-primary-500) !important;
    color: #fff !important;
}
.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button.btn-blue:hover,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-blue:hover {
    background-color: var(--color-primary-600) !important;
}

/* Inline SVG and Header Overrides */
svg path[fill="#007EB5"],
svg path[fill="#007eb5"],
svg [fill="#007EB5"],
svg [fill="#007eb5"] {
    fill: var(--color-primary-500) !important;
}

[style*="color: #007EB5"],
[style*="color: #007eb5"],
[style*="color:#007EB5"],
[style*="color:#007eb5"] {
    color: var(--color-primary-500) !important;
}

/* ========================================================
   ALARM ACTIVE STATE STYLING FOR SENSOR CARDS
   ======================================================== */
@keyframes alarmPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

.card-alarm-active {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%) !important;
    border: 2px solid #ef5350 !important;
    animation: alarmPulse 2s infinite !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
}

.card-alarm-active .tx-inverse,
.card-alarm-active .sensor-card-body > span {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.card-alarm-active .alarm-value-large {
    background-color: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

.card-alarm-active .sensor-value-large {
    color: #ffffff !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.card-alarm-active .unit,
.card-alarm-active .unit-large,
.card-alarm-active .tx-black {
    color: #ffffff !important;
}