@font-face {
        font-family: cairo;
        src: url("../../live_map_assets/assets/fonts/Cairo/Cairo-Regular.ttf");
    }
    
    .main-gas {
        background-color: inherit;
        color: white;
        font-family: cairo;
    }
    /* html[lang="ar"] body {
  direction: rtl;
  font-family: cairo;
}

html[lang="ar"] .main-gas {
  font-family: cairo;
} */
    
    .land {
        fill: #808080;
        fill-opacity: 1;
        stroke: #000;
        stroke-opacity: 1;
        stroke-width: 0.5;
    }
    
    .card-gas {
        background-color: #2a437e;
        color: white;
        border: none;
        border-radius: 15px;
    }
    
    .card-mgc {
        border-radius: 15px;
        background-color: #009769;
    }
    
    .progress {
        background-color: #76c095;
        height: 30px !important;
        border-radius: 50px;
    }
    
    .progress-bar {
        background-color: #189a7a;
    }
    
    .bg-green {
        background-color: #009769;
    }
    
    .gauge-container {
        position: relative;
        width: 100%;
        max-width: 400px;
        /* optional max width */
        margin: 0 auto;
    }
    
    #gaugeChart {
        width: 90% !important;
        height: 200px !important;
        aspect-ratio: 1 / 1;
        display: block;
        margin: 0 auto;
    }
    
    .gauge-center-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 0%);
        font-size: 1.5rem;
        font-weight: bold;
        color: white;
    }
    
    .gauge-label {
        font-weight: 500;
        margin-top: -20px;
        font-size: 0.9rem;
    }
    
    .line {
        height: 100px;
        background-color: #eeeeee96;
        width: 1px;
    }
    
    .title-dashboard {
        font-size: 40px;
        font-weight: bolder;
    }
    
    #map {
        width: 100%;
        height: 400px;
        overflow: auto;
    }
    
    .map-svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    .map path {
        cursor: pointer;
    }
    
    .facilities-number {
        color: red;
        font-size: 100px;
        font-weight: bolder;
    }
    
    .gas-box {
        height: 15px;
        width: 15px;
        border-radius: 3px;
        display: inline-block;
    }
    
    .gas-label {
        text-transform: capitalize;
    }
    
    .box-normal {
        background-color: #FFFFFF;
        border: 2px solid #CCCCCC;
    }
    
    .box-warning {
        background-color: #E8D708;
        border: 2px solid #B8A506;
    }
    
    .box-prealarm {
        background-color: #DE8D11;
        border: 2px solid #B2700D;
    }
    
    .box-low-level {
        background-color: #F55A5B;
        border: 2px solid #C44848;
    }
    /* Classes قديمة للتوافق مع الكود القديم */
    
    .box-low {
        background-color: #fc0;
    }
    
    .box-very-low {
        background-color: #f00;
    }
    
    .map-container {
        position: relative;
    }
    
    .live-alarm {
        position: absolute;
        top: 0;
        width: 200px;
        right: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        animation: blink 1s infinite;
    }
    
    .live-alarm .warning-icon {
        width: 30px;
        height: 20px;
    }
    
    select.form-control,
    textarea.form-control,
    input.multiselect__input {
        border: 1px solid gray;
    }
    
    .map-wrapper * {
        all: unset;
    }
    
    .map-wrapper .leaflet-container {
        all: revert;
        font-family: inherit;
        font-size: inherit;
    }
    
    .bck_img {
        background-image: url('/dashboard-assets/img/cover-imhe.jpg') !important;
    }
    
    .card {
        margin-top: 5px;
        cursor: default !important;
        transition: box-shadow 0.2s ease !important;
        /* border-radius: 35px !important; */
    }
    
    .custom_card {
        margin-top: 5px;
        cursor: default !important;
        transition: box-shadow 0.2s ease !important;
        border: 3px solid #ddd !important;
        border-radius: 25px !important;
    }
    
    .card:hover {
        box-shadow: 0 8px 20px rgb(0 0 0 / 0.15);
    }
    
    .pagetitle h1,
    .breadcrumb a,
    .breadcrumb .active {
        color: white !important;
    }
    
    .plant_img {
        height: 90px !important;
        width: 90px !important;
        object-fit: cover !important;
        display: block !important;
        margin: auto !important;
    }
    
    select option {
        text-align: left;
    }
    
    .badge-box {
        position: absolute;
        top: 5px;
        left: 1px;
        height: 50px;
        width: 50px;
        background-image: url('/dashboard-assets/img/co2.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 8px;
        z-index: 2;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        text-transform: uppercase;
        color: white;
        font-size: 0.75rem;
        font-weight: bold;
        padding: 4px 8px;
    }
    
    .icon-left {
        left: 10px;
    }
    
    .icon-right {
        right: 10px;
    }
    
    .animate-pulse {
        display: inline-block;
        animation: pulse 2s ease-in-out infinite;
        transform-origin: center center;
    }
    
    .clickable-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        cursor: pointer;
        cursor: pointer !important;
    }
    
    .clickable-card:hover {
        transform: scale(1.03);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }
    
    .bordered {
        border: solid 1px rgba(255, 255, 255, 0.3) !important;
        border-radius: 8px !important;
    }
    /*  ====================================== */
    
    @media (max-width: 767px) {
        .live-alarm {
            width: max-content;
        }
        .live-alarm .warning-icon {
            height: 20px;
        }
        .hide_mob {
            display: none !important;
        }
    }
    
    html[dir="rtl"] .live-alarm {
        right: inherit;
        left: 10px;
    }
    
    .grid-item {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        gap: 5px;
    }
    
    .land {
        fill: #cccccc;
        fill-opacity: 1;
        stroke: #000;
        stroke-opacity: 1;
        stroke-width: 0.5;
        cursor: pointer;
        transition: fill 0.3s ease;
    }
    
    .land:hover,
    .land.focused {
        fill: #09177462;
    }
    
    .warning-icon {
        pointer-events: none;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }
    
    .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 10px;
        padding: 10px;
    }
    
    .indicator {
        /* background: rgba(255, 255, 255, 0.1); */
        background: transparent !important;
        border-radius: 8px;
        padding: 5px;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .indicator canvas {
        margin: 0 auto;
    }
    
    .indicator.hovered {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
    }
    
    .indicator.border {
        border: 2px solid #00c3ff;
    }
    
    .gas-box {
        width: 20px;
        height: 20px;
        border-radius: 3px;
        display: inline-block;
    }
    
    .box-normal {
        background-color: #FFFFFF;
        border: 2px solid #CCCCCC;
    }
    
    .box-warning {
        background-color: #E8D708;
        border: 2px solid #B8A506;
    }
    
    .box-prealarm {
        background-color: #DE8D11;
        border: 2px solid #B2700D;
    }
    
    .box-low-level {
        background-color: #F55A5B;
        border: 2px solid #C44848;
    }
    /* Classes قديمة للتوافق مع الكود القديم */
    
    .box-low {
        background-color: #fc0;
    }
    
    .box-very-low {
        background-color: #f00;
    }
    
    .gas-label {
        color: white;
        font-size: 0.9rem;
    }
    
    @keyframes blink {
        0%,
        50% {
            opacity: 1;
        }
    }
    
    .col-lg-12 {
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
    }
    /* Select dropdown chevron icon positioning */
    
    .select-chevron-icon {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 10;
    }
    
    /* SweetAlert2 title centering */
    .swal2-title.text-center {
        text-align: center !important;
    }