/****************************
Copyright | Embalsespr.com | EmbalsesPR All rights reserved
This stylesheet is the property of EmbalsesPR and is protected by copyright law.
It is intended for use exclusively on https://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 or eduardocuyar@yahoo.com.
****************************/

:root {
    /* ===== Base colors ===== */
    --desborde-color: rgb(137, 88, 171);
    --seguridad-color: rgb(146, 183, 49);
    --observacion-color: rgb(0, 139, 172);
    --ajustes-color: rgb(253, 184, 19);
    --control-color: rgb(244, 123, 32);
    --fuera-color: rgb(210, 35, 42);

    /* ===== Light variants ===== */
    /* light      → subtle     (80% base) */
    /* lighter    → medium     (60% base) */
    /* lightest   → strong     (40% base) */

    --desborde-color-light: color-mix(in srgb, var(--desborde-color) 80%, white);
    --desborde-color-lighter: color-mix(in srgb, var(--desborde-color) 60%, white);
    --desborde-color-lightest: color-mix(in srgb, var(--desborde-color) 20%, white);

    --seguridad-color-light: color-mix(in srgb, var(--seguridad-color) 70%, white);
    --seguridad-color-lighter: color-mix(in srgb, var(--seguridad-color) 40%, white);
    --seguridad-color-lightest: color-mix(in srgb, var(--seguridad-color) 10%, white);

    --observacion-color-light: color-mix(in srgb, var(--observacion-color) 80%, white);
    --observacion-color-lighter: color-mix(in srgb, var(--observacion-color) 60%, white);
    --observacion-color-lightest: color-mix(in srgb, var(--observacion-color) 20%, white);

    --ajustes-color-light: color-mix(in srgb, var(--ajustes-color) 80%, white);
    --ajustes-color-lighter: color-mix(in srgb, var(--ajustes-color) 60%, white);
    --ajustes-color-lightest: color-mix(in srgb, var(--ajustes-color) 40%, white);

    --control-color-light: color-mix(in srgb, var(--control-color) 80%, white);
    --control-color-lighter: color-mix(in srgb, var(--control-color) 60%, white);
    --control-color-lightest: color-mix(in srgb, var(--control-color) 40%, white);

    --fuera-color-light: color-mix(in srgb, var(--fuera-color) 80%, white);
    --fuera-color-lighter: color-mix(in srgb, var(--fuera-color) 60%, white);
    --fuera-color-lightest: color-mix(in srgb, var(--fuera-color) 40%, white);

    /* ===== Dark variants ===== */
    /* dark       → subtle     (80% base) */
    /* darker     → medium     (60% base) */
    /* darkest    → strong     (40% base) */

    --desborde-color-dark: color-mix(in srgb, var(--desborde-color) 80%, black);
    --desborde-color-darker: color-mix(in srgb, var(--desborde-color) 60%, black);
    --desborde-color-darkest: color-mix(in srgb, var(--desborde-color) 40%, black);

    --seguridad-color-dark: color-mix(in srgb, var(--seguridad-color) 80%, black);
    --seguridad-color-darker: color-mix(in srgb, var(--seguridad-color) 60%, black);
    --seguridad-color-darkest: color-mix(in srgb, var(--seguridad-color) 40%, black);

    --observacion-color-dark: color-mix(in srgb, var(--observacion-color) 80%, black);
    --observacion-color-darker: color-mix(in srgb, var(--observacion-color) 60%, black);
    --observacion-color-darkest: color-mix(in srgb, var(--observacion-color) 40%, black);

    --ajustes-color-dark: color-mix(in srgb, var(--ajustes-color) 80%, black);
    --ajustes-color-darker: color-mix(in srgb, var(--ajustes-color) 60%, black);
    --ajustes-color-darkest: color-mix(in srgb, var(--ajustes-color) 40%, black);

    --control-color-dark: color-mix(in srgb, var(--control-color) 80%, black);
    --control-color-darker: color-mix(in srgb, var(--control-color) 60%, black);
    --control-color-darkest: color-mix(in srgb, var(--control-color) 40%, black);

    --fuera-color-dark: color-mix(in srgb, var(--fuera-color) 80%, black);
    --fuera-color-darker: color-mix(in srgb, var(--fuera-color) 60%, black);
    --fuera-color-darkest: color-mix(in srgb, var(--fuera-color) 40%, black);
}

/* 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;
}

.nivel {
    margin-top: 10px;
    justify-content: start;
}

.niv-min-opt {
    font-weight: 600;
}

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

body {
    padding-top: 114px !important;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 17px;
    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;
    /* 08-11-2026 */
    font-size: 1.875rem;
    font-weight: 600;
    color: #ffffff !important;
    text-align: center;
    padding: 1px 25px 1px;
    border-radius: 25px;
    max-width: 400px;
}

.status {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: 1.175rem;
    line-height: 1.385rem;
    margin: 0px auto;
    padding: 0px 0px 0px 0px;
}

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

@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;
    }

    .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;
    }
    .reservoir {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
    }
}

@media only screen and (min-width: 1116px) {
  .item {
    flex-grow: 1;
    flex-basis: 320px;
    min-height: 140px;
    padding: 2rem 2.1rem;
  }
}

@media only screen and (min-width: 1800px) {
  .item {
    flex-grow: 1;
    flex-basis: 360px;
    min-height: 140px;
    padding: 2rem 2.1rem;
  }
}

.fuente {
  font-size: 16px;
  font-weight: 300;
  padding: 5px 17px 5px;
  margin: 18px -20px -16px -20px;
  border-radius: 4px;
  letter-spacing: 0.65px;
  font-family: 'Roboto Condensed', sans-serif;
}

/* ************ DESBORDE ***********************************
   ********************************************************* */
.reservoir-card-desborde {
    background-color: var(--desborde-color);
    border-top: 1px solid var(--desborde-color-light);
    border-right: 1px solid var(--desborde-color-dark);
    border-bottom: 1px solid var(--desborde-color-dark);
    border-left: 1px solid var(--desborde-color-light);
}

.reservoir-card-desborde .level {
    background-color: var(--desborde-color-dark);
    margin: 0px;
}

.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 h2 {
    color: #ffffff;
}

.reservoir-card-desborde p {
    color: var(--desborde-color-lightest);
}

.reservoir-card-desborde .info {
    font-weight: 300;
    font-size: 1.195rem;
    line-height: 1.385rem;
    color: var(--desborde-color-lightest);
    margin: 0rem;
}

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

.reservoir-card-desborde .fuente {
    background-color: var(--desborde-color-dark);
}

/* ************* SEGURIDAD **********************************
   ********************************************************** */
.reservoir-card-seguridad {
    background-color: var(--seguridad-color);
    border-top: 1px solid var(--seguridad-color-light);
    border-right: 1px solid var(--seguridad-color-dark);
    border-bottom: 1px solid var(--seguridad-color-dark);
    border-left: 1px solid var(--seguridad-color-light);
}

.reservoir-card-seguridad .level {
    margin: 0px;
    background-color: var(--seguridad-color-dark);
}

.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 h2 {
    color: #ffffff;
}

.reservoir-card-seguridad p {
    color: var(--seguridad-color-lightest);
}

.reservoir-card-seguridad .info {
    font-weight: 300;
    font-size: 1.195rem;
    line-height: 1.385rem;
    color: var(--seguridad-color-lightest);
    margin: 0rem;
}

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

.reservoir-card-seguridad .fuente {
    background-color: var(--seguridad-color-dark);
}

/* ************ OBSERVACION ********************************
   ********************************************************* */
.reservoir-card-observacion {
    background-color: var(--observacion-color);
    border-top: 1px solid var(--observacion-color-light);
    border-right: 1px solid var(--observacion-color-dark);
    border-bottom: 1px solid var(--observacion-color-dark);
    border-left: 1px solid var(--observacion-color-light);
}

.reservoir-card-observacion .level {
    background-color: var(--observacion-color-dark);
    margin: 0px;
}

.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 h2 {
    color: #ffffff;
}

.reservoir-card-observacion p {
    color: var(--observacion-color-lightest);
}

.reservoir-card-observacion .info {
    font-weight: 300;
    font-size: 1.195rem;
    line-height: 1.385rem;
    color: var(--observacion-color-lightest);
    margin: 0rem;
}

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

.reservoir-card-observacion .fuente {
    background-color: var(--observacion-color-dark);
    color: var(--observacion-color-lightest);
}

/* ************ AJUSTES ************************************
   ********************************************************* */
.reservoir-card-ajustes {
    background-color: var(--ajustes-color);
    border-top: 1px solid var(--ajustes-color-light);
    border-right: 1px solid var(--ajustes-color-dark);
    border-bottom: 1px solid var(--ajustes-color-dark);
    border-left: 1px solid var(--ajustes-color-light);
}

.reservoir-card-ajustes .level {
    color: #ffffff !important;
    background-color: var(--ajustes-color-dark);
    margin: 0px 0px 0px 0px;
}

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

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

.reservoir-card-ajustes p {
    color: var(--ajustes-color-darkest);
}

.reservoir-card-ajustes .info {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    font-size: 1.195rem;
    line-height: 1.385rem;
    color: var(--ajustes-color-darkest);
    margin: 0rem;
}

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

.reservoir-card-ajustes .fuente {
    background-color: var(--ajustes-color-dark);
    color: var(--ajustes-color-lightest);
}

/* ************ CONTROL ************************************
   ********************************************************* */
.reservoir-card-control {
    background-color: var(--control-color);
    border-top: 1px solid var(--control-color-light);
    border-right: 1px solid var(--control-color-dark);
    border-bottom: 1px solid var(--control-color-dark);
    border-left: 1px solid var(--control-color-light);
}

.reservoir-card-control .level {
    color: #ffffff !important;
    background-color: var(--control-color-dark);
    margin: 0px 0px 0px 0px;
    padding: 4px 8px;
}

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

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

.reservoir-card-control .reservoirdata p {
    color: var(--control-color-light);
}

.reservoir-card-control .info {
    font-weight: 300;
    font-size: 1.195rem;
    line-height: 1.385rem;
    color: var(--control-color-lightest);
    margin: 0rem;
}

.reservoir-card-control .level::after {
    content: 'm';
    font-size: 27px;
    font-weight: 600;
    margin-left: 3px;
    color: var(--control-color-lightest);
}

.reservoir-card-control .fuente {
    background-color: var(--control-color-dark);
    color: var(--control-color-lightest);
}


/* ************ FUERA **************************************
        ********************************************************* */
.reservoir-card-fuera {
    background-color: var(--fuera-color);
    border-top: 1px solid var(--fuera-color-light);
    border-right: 1px solid var(--fuera-color-dark);
    border-bottom: 1px solid var(--fuera-color-dark);
    border-left: 1px solid var(--fuera-color-light);
}

.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: var(--fuera-color-dark);
    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 p {
    color: var(--fuera-color-lightest);
}

.reservoir-card-fuera .info {
    font-weight: 300;
    font-size: 1.195rem;
    line-height: 1.385rem;
    color: var(--fuera-color-lightest);
    margin: 0rem;
}

.reservoir-card-fuera .fuente {
    background-color: var(--fuera-color-dark);
    color: var(--fuera-color-lightest);
}

/* ************ 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: #25384e;
    border-radius: 30px;
    margin-bottom: 7px;
    padding: 10px 20px;
}

.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;
}

@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: 17px;
    line-height: 19px;
    font-weight: 400;
    margin: 5px 0px 0px 0px;
    padding: 0px;
    align-self: center;
}

/* NEW October 2025 Xperimental */
.reservoirdata {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


.equal-spacing {
    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%;
    }

    .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%;
    }

    .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-size: 45px;
    }
}

@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-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    background-color: black;
    border-radius: 50%;
    padding: 3px;

    vertical-align: middle;
}

.trend-icon {
    display: block;

    width: 18px;
    height: 18px;

    background-color: currentColor;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}


/* GREEN — Up */
.trend-rising .trend-icon {
    color: #32d400;

    -webkit-mask-image: url("../images/svg/up_bold.svg");
    mask-image: url("../images/svg/up_bold.svg");
}


/* RED — Down */
.trend-falling .trend-icon {
    color: #f80707;

    -webkit-mask-image: url("../images/svg/down_bold.svg");
    mask-image: url("../images/svg/down_bold.svg");
}


/* BLUE — Neutral */
.trend-stable .trend-icon {
    color: #2196f3;

    -webkit-mask-image: url("../images/svg/neutral_bold.svg");
    mask-image: url("../images/svg/neutral_bold.svg");
}