/*shared height variable*/
    /*:root{*/
    /*    --water-bar-height: 702px;*/
    /*}*/

    /*.water-level-container {*/
    /*    display: flex;*/
    /*    justify-content: center;*/
    /*    align-items: center;*/
    /*    !*height: 200px;*!*/
    /*    height: 750px;*/
    /*}*/

    /*.water-level-bar {*/
    /*    position: relative;*/
    /*    width: 80px;*/
    /*    height: var(--water-bar-height);*/
    /*    !*top: -54px;*!*/
    /*    !*margin-top: 31px;*!*/
    /*    background-color: #e5e7eb; !* light gray *!*/
    /*    border-radius: 12px;*/
    /*    overflow: hidden;*/
    /*    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);*/


    /*}*/

    /*.water-fill {*/
    /*    position: absolute;*/
    /*    bottom: 0;*/
    /*    width: 100%;*/
    /*    height: 0;*/
    /*    background-color: #1da2d8; !* blue *!*/
    /*    transition: height 0.5s ease;*/

    /*}*/


    /*.water-text {*/
    /*    position: absolute;*/
    /*    top: 10px;*/
    /*    left: 0;*/
    /*    width: 100%;*/
    /*    text-align: center;*/
    /*    font-weight: bold;*/
    /*    color: #374151;*/
    /*}*/

    /*.tubewell-bar {*/
    /*    !*position: fixed;*!*/
    /*    !*top: 49%;*!*/
    /*    !*left: 20px;*!*/
    /*    !*transform: translateY(-50%);*!*/
    /*    z-index: 1000;*/
    /*    max-width: 150px; !*10%*!*/
    /*    height: 730px;*/
    /*    background-color: #fff;*/
    /*    padding: 20px 10px;*/
    /*    border-radius: 12px;*/
    /*    box-shadow: 0 10px 23px rgba(0, 0, 0, 0.1);*/
    /*}*/

    /*!***/
    /***/
    /*  Scale*/
    /**!*/


    /*.water-scale {*/
    /*    !*height: 595px;*!*/
    /*    height: var(--water-bar-height);*/
    /*    padding-left: 10px;*/
    /*}*/

    /*.water-scale ul {*/
    /*    list-style: none;*/
    /*    padding: 0;*/
    /*    !*margin: 0;*!*/
    /*    margin-right: -20px;*/
    /*    height: 100%;*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*    justify-content: space-between;*/
    /*}*/

    /*.water-scale li {*/
    /*    font-size: 12px;*/
    /*    color: #4b5563;*/
    /*}*/


    /*improved tube bar*/
    /*        :root{*/
    /*            --tube-height: 700px;*/
    /*        }*/

    /*        !* main card *!*/
    /*        .tubewell-bar{*/
    /*            background:#fff;*/
    /*            padding:20px 10px;*/
    /*            border-radius:12px;*/
    /*            box-shadow:0 10px 23px rgba(0,0,0,0.1);*/
    /*        }*/

    /*        !* container holding bar + scale *!*/
    /*        .water-level-container{*/
    /*            display:flex;*/
    /*            align-items:stretch;*/
    /*            justify-content:center;*/
    /*            height:var(--tube-height);*/
    /*        }*/

    /*        !* tube *!*/
    /*        .water-level-bar{*/
    /*            position:relative;*/
    /*            width:80px;*/
    /*            height:100%;*/
    /*            background:#e5e7eb;*/
    /*            border-radius:12px;*/
    /*            overflow:hidden;*/
    /*            box-shadow:inset 0 0 5px rgba(0,0,0,0.1);*/
    /*        }*/

    /*        !* water *!*/
    /*        .water-fill{*/
    /*            position:absolute;*/
    /*            bottom:0;*/
    /*            width:100%;*/
    /*            height:0;*/
    /*            background:#1da2d8;*/
    /*            transition:height 0.5s ease;*/
    /*        }*/



    /*        !* label text *!*/
    /*        .water-text{*/
    /*            position:absolute;*/
    /*            top:10px;*/
    /*            width:100%;*/
    /*            text-align:center;*/
    /*            font-weight:bold;*/
    /*        }*/

    /*        !* scale *!*/
    /*        .water-scale{*/
    /*            height:100%;*/
    /*            padding-left:12px;*/
    /*        }*/

    /*        .water-scale ul{*/
    /*            list-style:none;*/
    /*            padding:0;*/
    /*            margin:0;*/
    /*            height:100%;*/
    /*            display:flex;*/
    /*            flex-direction:column;*/
    /*            justify-content:space-between;*/
    /*        }*/

    /*        .water-scale li{*/
    /*            font-size:12px;*/
    /*            color:#4b5563;*/
    /*        }*/

    /*        !* animated wave *!*/
    /*        .water-wave{*/
    /*            position:absolute;*/
    /*            top:-20px;*/
    /*            width:200%;*/
    /*            height:40px;*/
    /*            background:rgba(255,255,255,0.3);*/
    /*            border-radius:40%;*/
    /*            animation:waveMove 4s linear infinite;*/
    /*        }*/

    /*        @keyframes waveMove{*/
    /*            from{ transform:translateX(0); }*/
    /*            to{ transform:translateX(-50%); }*/
    /*        }*/

    /*        !* level indicator line *!*/
    /*        .water-indicator{*/
    /*            position:absolute;*/
    /*            width:100%;*/
    /*            height:2px;*/
    /*            background:red;*/
    /*            left:0;*/
    /*        }*/

    /*        !* tick mark *!*/
    /*        .water-scale li::before{*/
    /*            content:"";*/
    /*            position:absolute;*/
    /*            left:-10px;*/
    /*            top:50%;*/
    /*            width:8px;*/
    /*            height:1px;*/
    /*            background:#555;*/
    /*        }*/
    /*improved end*/

:root{
    --tube-height:700px;
}

/* container */
.water-level-container{
    display:flex;
    height:var(--tube-height);
}

/* tube */
.water-level-bar{
    position:relative;
    width:67px;
    height:100%;
    background:#e5e7eb;
    border-radius:14px;
    overflow:hidden;
}

/* water fill */
.water-fill{
    position:absolute;
    bottom:0;
    width:100%;
    height:0;
    background:#1da2d8;
    transition:height .6s ease;
}

/* animated wave */
/*.water-wave{*/
/*    position:absolute;*/
/*    top:-20px;*/
/*    width:200%;*/
/*    height:40px;*/
/*    background:rgba(255,255,255,0.3);*/
/*    border-radius:40%;*/
/*    animation:waveMove 4s linear infinite;*/
/*}*/

/*@keyframes waveMove{*/
/*    from{ transform:translateX(0); }*/
/*    to{ transform:translateX(-50%); }*/
/*}*/

.water-wave {
    position: absolute;
    top: -33px;
    width: 200%;
    height: 40px;
    background: #e5e7eb;
    border-radius: 40%;
    animation: waveMove 4s ease-in-out infinite;
}

@keyframes waveMove {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}


/* level indicator line */
.water-indicator{
    position:absolute;
    width:100%;
    height:2px;
    background:red;
    left:0;
}

/* label */
.water-text{
    position:absolute;
    top:10px;
    width:100%;
    text-align:center;
    font-weight:bold;
}

/* scale */
.water-scale{
    padding-left:12px;
    height:100%;
}

.water-scale ul{
    list-style:none;
    margin:0;
    padding:0;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.water-scale li{
    font-size:9.3px;
    position:relative;
    font-weight: bold;
}

/* tick mark */
.water-scale li::before{
    content:"";
    position:absolute;
    left:-10px;
    top:50%;
    width:8px;
    height:1px;
    background:#555;
}






.bubble-canvas {
    /*width: 100%;*/
    /*height: 100%;*/
    display: block;
    pointer-events: none;
}




i {
    margin-right: 0.5rem; /* Equivalent to Bootstrap's mr-2 */
}

.badge{
    border-radius: 0 !important;
}

.card-header{
    background-color: #F5F4B3;
}

/*Dynamic Menu Styles*/
#dynamic-menu-wrapper {
    /*background: linear-gradient(180deg, #3359b2, #2577fd);*/
    /*background-color: #185da4;*/
    /*background-color: #34475c;*/
    /*background-color:#0090dc;*/
    background-color:#1d6798;
    padding: 15px;
    border-radius: 12px;
    height: auto;
    /*height: 630px;*/
    /*overflow-y: auto;*/
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 23px rgba(0, 0, 0, 0.1);
}

#dynamic-menu strong {
    display: block;
    margin-top: 10px;
    padding: 6px 8px;
    font-size: 14px;
    background: rgba(255,255,255,0.08);
    border-radius: 6px;
}

.palika-toggle:hover {
    background: #3f6791;
}

.ward-toggle {
    padding: 2px 3px;
    margin-top: 4px;
    font-size: 13px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    transition: 0.2s;
}

.ward-toggle:hover {
    background: rgba(255,255,255,0.15);
}

.tubewell-item {
    padding: 1px 12px;
    margin-top: 3px;
    font-size: 15px;
    border-radius: 6px;
    transition: 0.2s;
}

.tubewell-item:hover {
    /*background: #38bdf8;*/
    /*color: black;*/
    background: rgba(255,255,255,0.15);

    color: white;
}

.tubewell-item.active, .ward-toggle.active {
    background: #89cbdf;
    color: black !important;
    font-weight: 600;
}
/*.ward-toggle.active{*/
/*    background: #07b3e5;*/
/*}*/

.accordion-button {
    padding: 6px 10px;
    font-size: 14px;
}

.accordion-body {
    padding: 4px 8px;
}
/*end of dynamic menu styles*/

/*#loading-overlay {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background-color: rgba(255, 255, 255, 0.6); !* transparent white *!*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    z-index: 9999; !* above everything *!*/
/*}*/

/*#loading-overlay .spinner {*/
/*    color: #34475c; !* match your theme *!*/
/*}*/

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    display: flex; /* always flex */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0; /* hidden by default */
    pointer-events: none; /* don’t block clicks when hidden */
    transition: opacity 0.4s ease;
}

#loading-overlay.show {
    opacity: 1; /* fade in */
    pointer-events: auto; /* block clicks when visible */
}

.loading-gif {
    width: 120px;
    height: auto;
    /*margin-bottom: 311px;*/
}

.card-body {
    background-color: #eaeaea;
}
.card-header {
    background-color: rgb(218 218 218);
}

.circle-wrapper {
    width: 30px;          /* set desired size */
    height: 30px;
    border-radius: 50%;    /* makes it a circle */
    overflow: hidden;      /* crops anything outside the circle */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #4d7eb1;
}

.circle-wrapper img {
    width: 22px;
    height: auto;
    object-fit: cover;     /* ensures the image fills the circle */
}

.card-title {
    color: #000;
    font-size: 18px;
    font-weight: 600;
}

.card-body-text-key{
    font-size: 18px;
    font-weight: normal;
    /*color: #6c757d !important;*/
}

.card-body-text-value{
    font-size: 19px;
    font-weight: bold;
    margin-left: 22px;
    margin-top: 20px;
    text-align: center;
}


/* Card raised effect with box shadow */
.card {
    border-radius: 10px; /* smooth corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* raised effect */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-3px); /* lift on hover */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.highcharts-title{
    font-size: 1em !important;
    font-weight: normal !important;
}
.btn-sm{
    font-size: 0.700rem;
}