/*
Copyright 2022-2025 | Embalsespr.com | Embalses de Puerto Rico. All rights reserved.

This stylesheet is the property of Embalses de Puerto Rico and is protected by copyright law.
It is intended for use exclusively on http://embalsespr.com.

You may not copy, reproduce, modify, distribute, or use this file, in whole or in part,
without express written permission. For any inquiries, please email us at embalsespr@yahoo.com.
*/


    
    /* GLOBAL attributes */

    .name {
        font-weight: 600;
        font-size: 1.5rem;
        margin: 0px 0px -7px 0px;
        padding: 0px 0px 0px 0px;
        text-transform: uppercase;
        color: white !important;
    }
    /* .level { ---------------------> Commented on 11/06/2025 1000 hrs
        font-weight: 600;
        font-size: 1.5rem;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    } */ 
    /* .level-arrow {  ---------------------> Commented on 11/06/2025 1000 hrs
        padding: 0px 10px 0px 10px;
        margin: 0px 0px 0px 0px;
        font-size: 1.3rem;
        align-self: center;
    } */
    .nivel {
        margin-top: 10px;
        justify-content: start;
    }
    /* .level-arrow::after {  ---------------------> Commented on 11/06/2025 1000 hrs
        content: 'ten';
        font-size: 18px;
        font-weight: 300;
    } */
    /* .embalse-card {  ---------------------> Commented on 11/06/2025 1000 hrs
        padding: 1rem 1.5rem 1.5rem 1.5rem !important;
        margin: 0rem 0rem 1rem 0rem;
        color: white;
        box-shadow: 5px 5px 10px #b9b9b9;
        border-radius: 0px;
    } */
    /* .aprox {  ---------------------> Commented on 11/06/2025 1000 hrs
        font-size: 1.1rem;
    } */
    /* .minimum-level {  ---------------------> Commented on 11/06/2025 1000 hrs
        font-weight: 400;
        font-size: 17px;
        line-height: 23px;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    } */
    .niv-min-opt {
        font-weight: 600;
    }
    /* .dif {  ---------------------> Commented on 11/06/2025 1000 hrs
        font-weight: 300;
    }            */ */
    
    
    /* ************ CONTROL ************************************
        ********************************************************* */
    .reservoir-card-control {
        background-color: #f47b20;
        border-top: 1px solid #fa9f59;
        border-right: 1px solid #d66c1b;
        border-bottom: 1px solid #d66c1b;
        border-left: 1px solid #fa9f59;
    }
    .reservoir-card-control  .level {
        color: #ffffff !important;
        background-color: #cf6a1d;
        margin: 0px 0px 0px 0px;
        padding: 0px 10px 0px 10px;
    }
    .reservoir-card-control > .niv-min-opt {
        font-weight: 600 !important;
        color: #fff !important;
    }
    .reservoir-card-control > .divisor-hr {
        border-top:1px solid #ce681a;
        border-bottom:1px solid #fda15a;
        margin: 1rem 0rem 1rem 0rem;
        padding: 0rem;
        opacity: 1;
    }
    /* ************ FUERA **************************************
        ********************************************************* */
    .reservoir-card-fuera {
        background-color: #d2232a;
        border-top: 1px solid #e95559;
        border-right: 1px solid #a3191e;
        border-bottom: 1px solid #a3191e;
        border-left: 1px solid #e95559;
    }
    .reservoir-card-fuera > .reservoir {
        padding: 0rem 0rem 0rem 0rem;
        font-weight: 300;
        font-size: 1.475rem;
        color:#fff !important;
        margin: 0rem 0rem 0rem 0rem;
    }
    .reservoir-card-fuera  .level {
        color: #ffffff !important;
        background-color: #aa1e22;
        margin: 0px 0px 0px 0px;
        padding: 0px 10px 0px 10px;
    }
    .reservoir-card-fuera > .info {
        font-weight: 300;
        font-size: 1.295rem;
        line-height: 1.385rem;
        color: #fff;
        margin: 0.375rem 0rem 0.375rem 0rem;
    }
    .reservoir-card-fuera > .niv-min-opt {
        color: #db0303 !important;
    }
    .reservoir-card-fuera > .divisor-hr {
        border-top:1px solid #940404;
        border-bottom:1px solid #fc4d4d;
        opacity: 1;
    }
    /* ************ NEUTRAL ************************************
        ********************************************************* */
    .reservoir-card-fuera {
        background-color: #d2232a;
        border-top: 1px solid #e95559;
        border-right: 1px solid #a3191e;
        border-bottom: 1px solid #a3191e;
        border-left: 1px solid #e95559;
    }
    .reservoir-card-fuera > .reservoir {
        padding: 0rem 0rem 0rem 0rem;
        font-weight: 300;
        font-size: 1.475rem;
        color:#fff !important;
        margin: 0rem 0rem 0rem 0rem;
    }
    .reservoir-card-fuera  .level {
        color: #ffffff !important;
        background-color: #aa1e22;
        margin: 0px 0px 0px 0px;
        padding: 0px 10px 0px 10px;
    }
    .reservoir-card-fuera > .info {
        font-weight: 300;
        font-size: 1.295rem;
        line-height: 1.385rem;
        color: #fff;
        margin: 0.375rem 0rem 0.375rem 0rem;
    }
    .reservoir-card-fuera > .niv-min-opt {
        color: #db0303 !important;
    }
    .reservoir-card-fuera > .divisor-hr {
        border-top:1px solid #940404;
        border-bottom:1px solid #fc4d4d;
        opacity: 1;
    }

    
/* ********************************** embalsesprNEW ********************************************** */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    padding-top: 114px !important;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 17px;
    /* line-height: 24px; */
    background: #526578;
}
.container {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}

.container h1 {
    font-size: 2.8rem;
    line-height: 2.9rem;
    font-weight: 600;
    color: #384858;
}

.container h2 {
    font-size: 1.8rem;
    font-weight: bold;
}

.embalses-cards {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 0rem;
}


.item {
    display: flex;
    flex-flow: column nowrap;
    margin: 0px;
    color: #ffffff;background: #6e737d;
    background: #1d3044;
    padding: 0.875rem;
    border-top: 1px solid #375777;
    border-right: 1px solid #172533;
    border-bottom: 1px solid #172533;
    border-left: 1px solid #375777;
}

.item h2 {
    font-family: 'Roboto Condensed', sans-serif;
    padding: 0px;
    margin: 0px;
    font-size: 2.1rem;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: rgba(0, 0, 0, 0.308) 1px 1px 10px;
    align-self: center;
}

.item i {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
}

.lead {
    color: #263d57 !important;
}

.footer-embalses {
    padding: 45px 35px;
    margin: 50px 0px 0px 0px;
    background-color: #142231;

}

.footer-embalses p {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 17px;
    line-height: 20px;
    font-weight: 300;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0.675px;
    color: #6a89aa;
}

.footer-embalses h3 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 19px;
    line-height: 22px;
    font-weight: 600;
    padding: 0px 0px 8px 0px;
    margin: 0px;
    color: #7090b3;
}

.footer-embalses h5 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 19px;
    line-height: 22px;
    font-weight: 600;
    padding: 0px 0px 8px 0px;
    margin: 0px;
    color: #9bbde0;
}

.footer-embalses a:link {color: #6a89aa;}
.footer-embalses a:hover {color: #ffffff !important;}
.footer-embalses a:visited {color: #6a89aa;}
.footer-embalses a:hover {color: #6a89aa;}

/* ************************************************ embalsesprNEWv2 **************************************************** */


 .item {
    padding: 13px 13px 13px 13px;
}

/* 10-26-2025 START HERE */

.reservoir {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.icono-alerta {
    display: inline;
    margin-right: 7px;
    margin-top: 3px;
}

.level {
    font-family: 'Roboto Condensed', sans-serif;
    /* 10-26-2026 */
    font-size: 2.1rem;
    font-weight: 600;
    color: #ffffff !important;
    text-align: center;
    padding: 1px 25px 1px;
    border-radius: 25px;
    max-width: 400px;
}

/* .level::after {
    content: 'm';
    font-size: 27px;
    font-weight: 600;
    margin-left: 3px;
    color: #bfd8f1;
} */

.status {
    font-weight: 300;
    font-size: 18px;
    color: #fff;
    line-height: 18px;
    /* margin: 0px auto; */
    margin: 0px;
    padding: 0px 0px 0px 0px;
}

.operador {
    font-size: 18px;
    line-height: 18px;
    font-weight: 600;
    margin: 0px;
    padding: 0px 0px 0px 0px;
}

.clientesserv {
    font-size: 20px;
    line-height: 25px;
    font-weight: 600;
    margin: 0px;
    padding: 0px 0px 0px 0px;
}
.clientesserv::after {
    content: " Clts."; 
    font-size: 17px; 
    font-weight: 300;
}

.timestamp {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
    line-height: 18px;
    /* margin: 0px auto; */
    margin: 0px;
    padding: 0px 0px 0px 0px;
    font-weight: 300;
    /* color: #6a839b; */
}

@media only screen and (min-width: 600px) {
    .reservoir-list {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        box-shadow: rgb(39, 39, 39, 0.3) 1px 1px 10px;
        border-radius: 0px;
        padding: 3px !important;
    }

    .item {
        flex-grow: 1;
        flex-basis: 370px;
        min-height: 140px;
        padding: 2rem 2.1rem;
    }

    .item h2 {
        font-family: 'Roboto Condensed', sans-serif;
        padding-bottom: 5px;
        margin: 0rem;
        font-size: 40px;
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;
        text-shadow: rgba(0, 0, 0, 0.308) 1px 1px 10px;
    }
}

@media only screen and (min-width: 600px) {
    .reservoir {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
    }

    /* .reservoir-data {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
    } */
}


/* ************ DESBORDE ***********************************
   ********************************************************* */
.reservoir-card-desborde {
    background-color: #8958ab;
    border-top: 1px solid #c087e9;
    border-right: 1px solid #6e478a;
    border-bottom: 1px solid #6e478a;
    border-left: 1px solid #c087e9;
}

.reservoir-card-desborde .level {
    background-color: #734b8f;
    margin: 0px;
    /* border-top: solid #674281 1px;
    border-right: solid #c087e9 1px;
    border-bottom: solid #c087e9 1px;
    border-left: solid #674281 1px; */
}

.reservoir-card-desborde>.niv-min-opt {
    font-weight: 600 !important;
    color: #fff !important;
}

.reservoir-card-desborde>.diferencia {
    font-weight: 300 !important;
    color: rgb(255, 255, 255) !important;
}

/* .reservoir-card-desborde>.divisor-hr {
    border-top: 1px solid #5f3e77;
    border-bottom: 1px solid #bd7eeb;
    margin: 1rem 0rem 1rem 0rem;
    padding: 0rem;
    opacity: 1;
} */

.reservoir-card-desborde h2 {
    color: #ffffff;
}

.reservoir-card-desborde p {
    color: #e7d1f7;
}

.reservoir-card-desborde .level::after {
    content: 'm';
    font-size: 27px;
    font-weight: 600;
    margin-left: 3px;
    color: #e2c6f7;
}

/* ************* SEGURIDAD **********************************
   ********************************************************** */
.reservoir-card-seguridad {
    background-color: #92b731;
    border-top: 1px solid #c4e279;
    border-right: 1px solid #668121;
    border-bottom: 1px solid #668121;
    border-left: 1px solid #c4e279;
}

.reservoir-card-seguridad .level {
    margin: 0px;
    background-color: #7d9e2a;
    
    /* border-top: solid #668121 1px;
    border-right: solid #c4e279 1px;
    border-bottom: solid #c4e279 1px;
    border-left: solid #668121 1px; */
}

.reservoir-card-seguridad>.niv-min-opt {
    font-weight: 600 !important;
    color: #fff !important;
}

.reservoir-card-seguridad>.diferencia {
    font-weight: 300 !important;
    color: rgb(255, 255, 255) !important;
}

.reservoir-card-seguridad>.divisor-hr {
    border-top: 1px solid #7a992b;
    border-bottom: 1px solid #bee069;
    margin: 1rem 0rem 1rem 0rem;
    padding: 0rem;
    opacity: 1;
}

.reservoir-card-seguridad h2 {
    color: #ffffff;
}

.reservoir-card-seguridad .reservoirdata p {
    color: #ecfab9;
}

.reservoir-card-seguridad .level::after {
    content: 'm';
    font-size: 27px;
    font-weight: 600;
    margin-left: 3px;
    color: #e7fab7;
}

/* ************ OBSERVACION ********************************
   ********************************************************* */
.reservoir-card-observacion {
    background-color: #008bac;
    border-top: 1px solid #3bc6e9;
    border-right: 1px solid #046179;
    border-bottom: 1px solid #046179;
    border-left: 1px solid #3bc6e9;
}

.reservoir-card-observacion .level {
    background-color: #0a748f;
    margin: 0px;
    /* 10-26-2026
    border-top: solid #046179 1px;
    border-right: solid #3bc6e9 1px;
    border-bottom: solid #3bc6e9 1px;
    border-left: solid #046179 1px; */
}
.reservoir-card-observacion>.niv-min-opt {
    font-weight: 600 !important;
    color: #fff !important;
}

.reservoir-card-observacion>.diferencia {
    font-weight: 300 !important;
    color: rgb(255, 255, 255) !important;
}

.reservoir-card-observacion>.divisor-hr {
    border-top: 1px solid #006781;
    border-bottom: 1px solid #00b2df;
    margin: 1rem 0rem 1rem 0rem;
    padding: 0rem;
    opacity: 1;
}

.reservoir-card-observacion h2 {
    color: #ffffff;
}

.reservoir-card-observacion .reservoirdata p {
    color: #b2f0ff;
}

.reservoir-card-observacion .level::after {
    content: 'm';
    font-size: 27px;
    font-weight: 600;
    margin-left: 3px;
    color: #d0f6ff;
}

/* ************ AJUSTES ************************************
   ********************************************************* */
.reservoir-card-ajustes {
    background-color: #fdb813;
    border-top: 1px solid #ffc641;
    border-right: 1px solid #cf960f;
    border-bottom: 1px solid #cf960f;
    border-left: 1px solid #ffc641;
}

.reservoir-card-ajustes .level {
    color: #ffffff !important;
    background-color: #cc9411;
    margin: 0px 0px 0px 0px;
    /* padding: 4px 8px; 2026-07-26 */
}

.reservoir-card-ajustes>.niv-min-opt {
    font-weight: 600 !important;
    color: #fff !important;
}

.reservoir-card-ajustes>.divisor-hr {
    border-top: 1px solid #e4a513;
    border-bottom: 1px solid #fdd26e;
    margin: 1rem 0rem 1rem 0rem;
    padding: 0rem;
    opacity: 1;
}

.reservoir-card-ajustes h2 {
    color: #ffffff;
}

.reservoir-card-ajustes .reservoirdata p {
    color: #7a6228;
}
.reservoir-card-ajustes .level::after {
    content: 'm';
    font-size: 27px;
    font-weight: 600;
    margin-left: 3px;
    color: #f2dead;
}

/* ************ CONTROL ************************************
   ********************************************************* */
.reservoir-card-control {
    background-color: #f47b20;
    border-top: 1px solid #fa9f59;
    border-right: 1px solid #d66c1b;
    border-bottom: 1px solid #d66c1b;
    border-left: 1px solid #fa9f59;
}

.reservoir-card-control .level {
    color: #ffffff !important;
    background-color: #cf6a1d;
    margin: 0px 0px 0px 0px;
    padding: 4px 8px;
}
.reservoir-card-control> .niv-min-opt {
    font-weight: 600 !important;
    color: #fff !important;
}

.reservoir-card-control> .divisor-hr {
    border-top: 1px solid #ce681a;
    border-bottom: 1px solid #fda15a;
    margin: 1rem 0rem 1rem 0rem;
    padding: 0rem;
    opacity: 1;
}

.reservoir-card-control h2 {
    color: #ffffff;
}

.reservoir-card-control .reservoirdata p {
    color: #ffe4cf;
}
.reservoir-card-control .level::after {
    content: 'm';
    font-size: 27px;
    font-weight: 600;
    margin-left: 3px;
    color: #ffc497;
}

/* ************ FUERA DE SERVICIO **************************
   ********************************************************* */
.reservoir-card-fuera {
    background-color: #d2232a;
    border-top: 1px solid #f83038;
    border-right: 1px solid #b51e24;
    border-bottom: 1px solid #b51e24;
    border-left: 1px solid #f83038;
}

.reservoir-card-fuera .level {
    color: #ffffff !important;
    background-color: #99181d;
    margin: 0px 0px 0px 0px;
    padding: 4px 8px;
}
.reservoir-card-fuera> .niv-min-opt {
    font-weight: 600 !important;
    color: #fff !important;
}

.reservoir-card-fuera> .divisor-hr {
    border-top: 1px solid #ce681a;
    border-bottom: 1px solid #fda15a;
    margin: 1rem 0rem 1rem 0rem;
    padding: 0rem;
    opacity: 1;
}

.reservoir-card-fuera h2 {
    color: #ffffff;
}

.reservoir-card-fuera p {
    color: #ffb4b7;
}
.reservoir-card-fuera .level::after {
    content: 'm';
    font-size: 27px;
    font-weight: 600;
    margin-left: 3px;
    color: #f9b5b7;
}

/* ************ EQP Equipment Malfunction ******************
   ********************************************************* */
.reservoir-card-eqp {
    background-color: #1d3044;
    border-top: 1px solid #314f70;
    border-right: 1px solid #111c27;
    border-bottom: 1px solid #111c27;
    border-left: 1px solid #314f70;
}

.reservoir-card-eqp .level {
    color: #ffffff !important;
    background-color: #071326;
    margin: 0px 0px 0px 0px;
    padding: 1px 25px 6px;
}
.reservoir-card-eqp> .niv-min-opt {
    font-weight: 600 !important;
    color: #fff !important;
}

.reservoir-card-eqp> .divisor-hr {
    border-top: 1px solid #ce681a;
    border-bottom: 1px solid #fda15a;
    margin: 1rem 0rem 1rem 0rem;
    padding: 0rem;
    opacity: 1;
}

.reservoir-card-eqp h2 {
    color: #ffffff;
}

.reservoir-card-eqp .reservoirdata p {
    color: #335579;
}
.reservoir-card-eqp .level::after {
    content: '';
    font-size: 27px;
    font-weight: 600;
    margin-left: 3px;
    color: #1d3044;
}

/* ********************************************** Inline on page ****************************************************** */

    html {
      height: 100%;
    }
  
    body {
      height: 100%;
      margin-top: 40px;
      background-image: linear-gradient(#ffffff, #a3b8ce);
      background-repeat: no-repeat;
      background-attachment: fixed;
    }
  
    .nav-link {
      color: #89b2c7;
      font-size: 20px;
      line-height: 23px;
      font-weight: 300;
      border-radius: 30px;
      margin-bottom: 7px;
      padding: 10px 20px;
      font-family: 'Roboto Condensed', sans-serif;
    }
    .nav-link2 {
      font-family: 'Roboto Condensed', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 300;
      margin-bottom: 0px;
      padding: 10px 20px;
      color: #89b2c7;
      text-decoration: none;
    }
  
    /* .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
      background-color: #142231;
      border-radius: 20px 20px 0px 0px;
      padding: 10px 30px;
      margin: 0px 0px 0px 0px;
      box-shadow: #142231af 0px 2px 10px;
    } */
  
    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
      background-color: #25384e;
      border-radius: 30px;
      margin-bottom: 7px;
      padding: 10px 20px;
      /* box-shadow: #5f5f5faf 0px 1px 10px; */
    }
  
    .nav-link:focus,
    .nav-link:hover {
      background-color: #1422313f;
      border-radius: 30px;
      /* margin-bottom: 7px; */
      color: #e7eff3;
      padding: 10px 20px;
    }
    .navbar-brand {
        font-size: 19px;
        font-weight: 400;
        color: #9bbde0;
        text-decoration: none;
        white-space: nowrap;
        background-color: #142231;
        padding: 10px 23px;
        border-radius: 50px 50px 0px 50px;
        box-shadow: #142231a8 1px 1px 10px;
    }
    
    .dropdown-menu {
      --bs-dropdown-zindex: 1000;
      --bs-dropdown-min-width: 10rem;
      --bs-dropdown-padding-x: 0.9rem;
      --bs-dropdown-padding-y: 0.5rem;
      --bs-dropdown-spacer: 0.125rem;
      --bs-dropdown-font-size: 1.1rem;
      --bs-dropdown-color: var(--bs-body-color);
      --bs-dropdown-bg: #92acc6;
      --bs-dropdown-border-color: var(--bs-border-color-translucent);
      --bs-dropdown-border-radius: var(--bs-border-radius);
      --bs-dropdown-border-width: var(--bs-border-width);
      --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
      --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
      --bs-dropdown-divider-margin-y: 0.5rem;
      --bs-dropdown-box-shadow: var(--bs-box-shadow);
      --bs-dropdown-link-color: var(--bs-body-color);
      --bs-dropdown-link-hover-color: var(--bs-body-color);
      --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
      --bs-dropdown-link-active-color: #fff;
      --bs-dropdown-link-active-bg: #0d6efd;
      --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
      --bs-dropdown-item-padding-x: 1rem;
      --bs-dropdown-item-padding-y: 0.25rem;
      --bs-dropdown-header-color: #6c757d;
      --bs-dropdown-header-padding-x: 1rem;
      --bs-dropdown-header-padding-y: 0.5rem;
      position: absolute;
      z-index: var(--bs-dropdown-zindex);
      display: none;
      min-width: var(--bs-dropdown-min-width);
      padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
      margin: 0;
      margin-top: 0px;
      font-size: var(--bs-dropdown-font-size);
      color: var(--bs-dropdown-color);
      text-align: left;
      list-style: none;
      background-color: var(--bs-dropdown-bg);
      background-clip: padding-box;
      border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
      border-radius: var(--bs-dropdown-border-radius);
    }
    @media (min-width: 500px) {
      .reservoir-list {
        max-width: 100%;
        margin: auto;
      }
    }
    #carraizo_trend, #laplata_trend, #cidra_trend, #toavaca_trend, #rioblanco_trend,
    #fajardo_trend, #carite_trend, #patillas_trend, #guineo_trend, #matrullas_trend,
    #guayabal_trend, #garzas_trend, #guayo_trend, #luchetti_trend, #loco_trend,
    #dosbocas_trend, #caonillas_trend, #guajataca_trend, #cerrillos_trend {
      font-family: "Roboto Condensed", sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 300;
      margin: 0px 0px;
      padding: 0px;
    }

    /* NEW October 2025 Xperimental */
    .reservoirdata {
      display: flex;
      flex-direction: row;
      justify-content:space-between;
    }
    .item div:nth-child(2), .item div:nth-child(3) {
      display: flex;
      flex-direction: row-reverse;
    }

    /* 10/25/2025 */
    .equal-spacing {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0px;
        padding: 0;
    }

  .cardx {
    flex: 1 1 calc(20% - 1rem);  /* Grows equally, shrinks if needed, basis ~1/5 width for ~5 per row (adjust % for your desired columns) */
    min-width: 200px;  /* Optional: Prevents cards from getting too narrow on mobile */
    /* Your existing styles for content, borders, etc. */
    box-sizing: border-box;  /* Ensures padding/borders don't add extra width */
  }

  /* ************** MEDIA QUERIES ********************** */
  @media (max-width: 480px) {
    .cardx {
      flex: 1 1 100%;  /* 1 card per row on phone */
    }
  }

  @media (max-width: 768px) {
    .cardx {
      flex: 1 1 calc(100% - 0.5rem);  /* 2 cards per row on tablet/mobile */
    }
  }

  @media (min-width: 700px) {
    .cardx {
        display: flex;
        flex-direction: column;
        flex: 1 1 48%;
    }
    .reservoirdata {
        display: flex;
        flex-direction: column;
    }
    .name-level {
        justify-content: center;
    }
    .tendency-status, .client-time {
        padding: 5px 0px 8px;
    }
    .oper-clients-time {
      padding-top: 5px;  
    }
    .level {
        margin: 0 auto !important;
    }
  }

  @media (min-width: 900px) {
    .cardx {
        display: flex;
        flex-direction: column;
        flex: 1 1 30%;
    }
    .reservoirdata {
        display: flex;
        flex-direction: column;
    }
    .name-level {
        justify-content: center;
    }
    .tendency-status, .client-time {
        padding: 5px 0px 8px;
    }
    .oper-clients-time {
      padding-top: 5px;  
    }
  }

  @media (min-width: 1000px) {
    .cardx {
        display: flex;
        flex-direction: column;
        flex: 1 1 33%;
    }
    .item h2 {
        /* font-family: 'Roboto Condensed', sans-serif;
        padding-bottom: 5px;
        margin: 0rem; */
        font-size: 45px;
        /* font-weight: 700;
        text-transform: uppercase;
        text-align: center;
        text-shadow: rgba(0, 0, 0, 0.308) 1px 1px 10px; */
    }
  }

  @media (min-width: 1143px) {
    .cardx {
        display: flex;
        flex-direction: column;
        flex: 1 1 23%;
    }
    .item h2 {
        font-size: 42px;
    }
  }
  

  @media (min-width: 1500px) {
    .cardx {
        display: flex;
        flex-direction: column;
        flex: 1 1 20%;
    }
    .item h2 {
        font-size: 46px;
    }
  }

.trend-icon {
  width: 32px; /* Adjust size as needed */
  height: 32px;
  vertical-align: middle;
}

/* Optional: Style based on trend class */
.trend-rising .trend-icon {
  color: #32d400 !important; /* Add specific styles for rising trend if needed, e.g., color */
  background-color: black;
  border-radius: 50%;
}

.trend-falling .trend-icon {
  color: #f80707 !important; /* Add specific styles for rising trend if needed, e.g., color */
  background-color: black;
  border-radius: 50%;
}

.trend-stable .trend-icon {
  color: #e5ebe3 !important; /* Add specific styles for rising trend if needed, e.g., color */
  background-color: black;
  border-radius: 50%;
}