:root {
    --map-bg-color-grad: linear-gradient(to right, #051980, #053e80);
    --color-secundario: #051980;
    --color-primario: #053e80;
}
html, body {
    font-family: Poppins, sans-serif;
}

h1 {
    background-color: var(--color-primario);
    border-radius: 10px;
    padding:5px;
    color:white;
    font-size:1.5em;
}
h3 {
    background-color: var(--color-primario);
    border-radius: 10px;
    padding: 5px;
    color: white;
}
.map-but {
    background-image: var(--map-bg-color-grad);
}
.rz-button.rz-primary {/* button hover*/
    background-color: black !important;
}

.map-fondo-login {
    background-color: black;
    color: white;
}
.map-fondo-color-fijo {
    background-color: var(--color-secundario);
    color: white;
}

.map-fondo-backgr-img {
    background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url('../img/logo_sispol.png');
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */    
}
.map-separador {
    height: 50px;
}
.rz-progressbar-determinate.rz-progressbar-light .rz-progressbar-value {
    background-color: var(--color-secundario);
    border-radius: 30px;
}
.rz-progressbar {
    background-color: rgba(0, 0, 0, 0.00002); /* hay q sobreescribir pq .rz-progressbar por defecto no tiene puesto 100% transparente y se ve gris alrededor de los bordes */
}

.rz-state-disabled {
    color: var(--color-primario) !important;
}
.rz-card {
    opacity: 0.90 !important;
}

.rz-data-grid {
    opacity: 0.90 !important;
}
.rz-fieldset {
    opacity: 0.90 !important;
}

.rz-dialog {
    /*background-image: linear-gradient(180deg, rgba(0,45,101,0.7707457983193278) 0%, rgba(0,205,233,1) 80%); */
    background-image: var(--map-bg-color-grad);
    color: white !important;
}

.rz-dialog-title {
    color: white !important;
}

.rz-dialog-titlebar {
    background-color: var(--color-primario) !important;
}
.rz-cell-filter {
    background-color: var(--color-secundario);
}

/* tarjetas sensores */
.rz-card h1,
.rz-card h2,
.rz-card h3,
.rz-card h4,
.rz-card h5,
.rz-card h6,
.tiny {
    font-family: Montserrat !important;
    font-weight: 300;
    color: white !important;
}

.rz-card h4 {
    font-size: large;
    font-weight: 600;
    white-space: nowrap;
}

.sombra-card { /* derivado de rz-shadow-10 */ /* x y difuminado 0.xx opac */
    box-shadow: 10px 10px 8px rgba(0, 0, 0, 0.34), 10px 9px 52px rgba(0, 0, 1, 0.12), 0px 11px 15px rgba(0, 0, 0, 0.14) !important;
}

.card-degradado-geybos {
    background-image: linear-gradient(180deg, rgba(0,45,101,1) 23%, rgba(0,166,214,1) 100%);
    color: white !important;
}

@media (min-width: 641px) {

    .rz-card h4 {
        font-size: x-large;
    }

    .rz-card h6 {
        font-size: large;
    }

    .tiny {
        font-size: small !important;
    }

    .card-degradado-geybos {
        width: 340px;
    }

    .geybos-gap {
        gap: 2em !important;
    }

    .geybos-pad {
        padding: 1rem !important;
    }
}

@media (max-width: 640.98px) {
    .rz-textbox {
        font-size: x-small !important
    }

    .rz-card h4 {
        font-size: 12px;
    }

    .rz-card h6 {
        font-size: 10px;
    }

    .tiny {
        font-size: x-small !important;
    }

    .card-degradado-geybos {
        width: 155px;
        padding: 0rem !important;
    }

    .geybos-gap {
        gap: 5px !important;
    }

    .geybos-pad {
        padding: 10px !important;
    }

    .px-4 { /*gap* ppal*/
        padding-right: 0rem !important;
        padding-left: 0rem !important;
    }

    .rz-p-4 {
        padding: 0rem !important;
    }
}

/*datagrid*/
@media (max-width: 640.98px) {
    .rz-grid-table thead th .rz-column-title {
        font-size: 10px !important;
    }

    .rz-grid-table td .rz-cell-data {
        font-size: 10px !important;
    }

    body {
        font-size: 10px !important;
    }
}