@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');*/

body {
    background-color: #d0e8f6;
    font-family: 'Noto Sans', sans-serif;
}

h1 {
    display: none;
}

h2 {
    background-color: #54a2d0;
    border-radius: 0.5em;
    padding: 0.2em 0.5em;
    color: #fff;
    text-align: left;
    clear: left;
    background-size: 2em;
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 2.3em;
}

h3 {
    background-color: #54a2d0;
    border-radius: 0.5em;
    padding: 0.2em 0.5em;
    color: #fff;
    text-align: left;
    clear: left;
}

h4 {
    background-color: #54a2d0;
    border-radius: 0.5em;
    padding: 0.2em 0.5em;
    color: #fff;
    text-align: left;
    clear: left;
}

input[type=text], input[type=password], input[type=email], input[type=tel], textarea, select {
    padding: 5px;
    border: solid 1px #555;
    border-radius: 0.2em;
    background-color: #fff;
    font-size: 1em;
}

    input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=tel]:focus, textarea:focus, select:focus {
        box-shadow: 0 0 0.5em #faa236;
        border: 1px solid #faa236;
        outline: none;
    }

button.boton {
    border: solid 1px #cccccc;
    line-height: 1em;
    padding: .7em 1em .7em 2.5em;
    display: inline-block;
    /*font-family: sans-serif;*/
    font-size: 0.7em;
    font-weight: bold;
    color: #333333;
    -webkit-appearance: none;
    border-radius: .6em;
    -webkit-border-radius: .6em;
    position: relative;
    -webkit-filter: saturate(.6);
    background-color: #f0f0f0;
    cursor: pointer;
}

    button.boton:disabled {
        cursor: default;
        background-color: #c0c0c0;
        color: #626262;
        border: none;
    }

    button.boton:enabled:hover {
        background-color: #f5f5e5;
    }

    button.boton span {
        -webkit-border-radius: 1em;
        border-radius: 1em;
        background-color: #919ca4;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 1em;
        position: absolute;
        display: block;
        left: .5625em;
        top: 50%;
        margin-top: -.7em;
        width: 1.4em;
        height: 1.4em;
    }

    button.boton:disabled span {
        background-color: #8a8989 !important;
    }

#botonActivado {
    position: relative;
    margin: 1em;
    text-align: center;
}

    #botonActivado > img {
        width: 10em;
        height: 10em;
        cursor: pointer;
        margin: 1em;
    }

ul.botones {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
    list-style-type: none;
}

.botones li {
    display: block;
    width: 7.5em;
    height: 7.5em;
    position: relative;
    padding: 0.5em;
    background-color: #84a8bc;
    border-radius: 5%;
    cursor: pointer;
    margin: 1em;
    float: left;
}

    .botones li:not(:has(img.activado:hover)):hover {
        background-color: #eee5b9 !important;
    }

    .botones li img.activado:hover {
        filter: brightness(1.3);
    }

    .botones li:not(:has(img.ejecutar:hover)):hover {
        background-color: #eee5b9 !important;
    }

    .botones li img.ejecutar:hover {
        filter: brightness(1.3);
    }

    .botones li.zona-4 {
        background-color: #91bc84;
    }

    .botones li.zona-3 {
        background-color: #91bc84;
    }

    .botones li.zona-2 {
        background-color: #afbc84;
    }

    .botones li.zona-1 {
        background-color: #d9bd90;
    }

    .botones li.zona-0 {
        background-color: #bc8484;
    }

img.zona-4 {
    background-color: #96d7ab;
}

img.zona-3 {
    background-color: #96d7ab;
}

img.zona-2 {
    background-color: #d7d596;
}

img.zona-1 {
    background-color: #d7ba96;
}

img.zona-0 {
    background-color: #d79696;
}

.botones img.icono {
    width: 8em;
    height: 8em;
    position: absolute;
    top: 2em;
    left: -1em;
    filter: brightness(1.2) contrast(0.8) saturate(0.8);
}

.botones li:hover img.icono {
    filter: brightness(1) contrast(1) saturate(1);
}


.botones li.vista:hover img.icono {
    filter: brightness(1) contrast(1) sepia(0) hue-rotate(0deg) !important;
}

.botones li.vista img.icono {
}

.botones li.vista.zona-verde img.icono {
    filter: brightness(1.2) contrast(0.8) sepia(1) hue-rotate(67deg);
}

.botones li.vista.zona-amarilla img.icono {
    filter: brightness(1.2) contrast(0.8) sepia(1) hue-rotate(14deg);
}

.botones li.vista.zona-roja img.icono {
    filter: brightness(1.2) contrast(0.8) sepia(1) hue-rotate(311deg);
}

.botones img.activado {
    width: 3em;
    position: absolute;
    right: -0.5em;
    bottom: -0.5em;
    border-radius: 50%;
}

.botones img.ejecutar {
    width: 3em;
    position: absolute;
    right: -0.5em;
    bottom: -0.5em;
    border-radius: 50%;
}

.botones div.nombre {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    text-align: center;
    width: 8em;
    color: #fff;
    font-weight: bold;
    text-shadow: -1px -1px 0 #55555555, 0 -1px 0 #55555555, 1px -1px 0 #55555555, 1px 0 0 #55555555, 1px 1px 0 #55555555, 0 1px 0 #55555555, -1px 1px 0 #55555555, -1px 0 0 #55555555;
}

.botones li:hover div.nombre {
    color: #000;
    text-shadow: -1px -1px 0 #fff, 0 -1px 0 #fff, 1px -1px 0 #fff, 1px 0 0 #fff, 1px 1px 0 #fff, 0 1px 0 #fff, -1px 1px 0 #fff, -1px 0 0 #fff;
}

.botones div.valor {
    position: absolute;
    top: 1.1em;
    left: 0.1em;
    text-align: center;
    width: calc(100% - 0.2em);
    color: #fff;
    font-weight: bold;
    font-size: 2.5em;
    font-family: 'Fredoka One', sans-serif;
    -webkit-text-stroke: 1px #333;
    text-shadow: 1px 1px #55555555;
}

.botones li:hover div.valor {
    color: #000;
    -webkit-text-stroke: 1px #fff;
}


/* Loader */


.background-loader {
    width: 100%;
    height: calc(100% - 44px);
    position: absolute;
    background-color: #555555cc;
    z-index: 99;
}

.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 20em;
    height: 20em;
    background-color: #99cbe8;
    border-radius: 2em;
}

    .loader div.punto {
        position: absolute;
        top: 60%;
        width: 16%;
        height: 16%;
        border-radius: 50%;
        background: #fff;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }

        .loader div.punto:nth-child(1) {
            left: 10%;
            animation: lds-ellipsis1 0.6s infinite;
        }

        .loader div.punto:nth-child(2) {
            left: 10%;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .loader div.punto:nth-child(3) {
            left: 40%;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .loader div.punto:nth-child(4) {
            left: 70%;
            animation: lds-ellipsis3 0.6s infinite;
        }

    .loader div.texto {
        font-weight: bold;
        font-size: 1.7em;
        color: #fff;
        padding: 3em 1em;
        text-align: center;
    }

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(6em, 0);
    }
}

/* Fin loader */

.acceso-denegado {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 10em;
    height: 2em;
    background-color: #ff006e;
    border-radius: 2em;
    font-weight: bold;
    font-size: 2em;
    color: #fff;
    padding: 1em;
    text-align: center;
}

.login {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 29em;
    height: 12em;
    background-color: #54a2d0dd;
    border-radius: 0.5em;
    font-size: 1em;
    padding: 1em;
    box-shadow: 0.5em 0.3em #51667255;
}

    .login #lblMensaje {
        color: #ffffff;
        background-color: #d74545;
        padding: 0.3em;
        border-radius: 1em;
        text-align: center;
        font-weight: bold;
    }

    .login #lblUsuario {
        color: #fff;
        font-weight: bold;
        display: inline-block;
        width: 7em;
    }

    .login #lblPassword {
        color: #fff;
        font-weight: bold;
        display: inline-block;
        width: 7em;
    }

    .login #txtUsuario {
        width: 15em;
    }

    .login #txtPassword {
        width: 15em;
    }


.cambiarPassword {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 29em;
    height: 14em;
    background-color: #54a2d0dd;
    border-radius: 0.5em;
    font-size: 1em;
    padding: 1em;
    box-shadow: 0.5em 0.3em #51667255;
}

    .cambiarPassword #lblMensaje {
        color: #ffffff;
        background-color: #d74545;
        padding: 0.3em;
        border-radius: 1em;
        text-align: center;
        font-weight: bold;
    }

    .cambiarPassword #lblPassword {
        color: #fff;
        font-weight: bold;
        display: inline-block;
        width: 7em;
    }

    .cambiarPassword #lblRepetirPassword {
        color: #fff;
        font-weight: bold;
        display: inline-block;
        width: 7em;
    }

    .cambiarPassword #txtPassword {
        width: 15em;
    }

    .cambiarPassword #txtRepetirPassword {
        width: 15em;
    }


img.rssi-detalle {
    cursor: pointer;
}

img.estado-detalle {
    width: 3em;
    float: right;
    border-radius: 2em;
}

img.icono-detalle {
    width: 3em;
    float: right;
    border-radius: 2em;
    margin-left:1em;
}

.campos {
    overflow: hidden;
}

    .campos label {
        display: inline-block;
        width: 11em;
        font-weight: bold;
        vertical-align: top;
    }

    .campos span {
        display: inline-block;
        width: calc( 100% - 12em );
    }

.campos-menu label {
    display: inline-block;
    width: 5.5em;
    vertical-align: top;
}

div.dt-buttons {
    margin-top: 5px;
}

img.vista-zona {
    float: right;
    width: 3em;
}

.imagenes_camara {
    overflow: hidden;
}

    .imagenes_camara > div {
        float: left;
        margin: 10px;
        cursor: pointer;
    }

    .imagenes_camara img {
        min-width: 5em;
        min-height: 2em;
        max-width: 5em;
        max-height: 5em;
        display: inline-block;
    }

.videos_camara {
    overflow: hidden;
}

    .videos_camara > div {
        float: left;
        margin: 10px;
        cursor: pointer;
    }

    .videos_camara img {
        display: inline-block;
        width:4em;
    }

/*
.icono-detalle{
    float:right;
    position:relative;
}

    .icono-detalle .icono {
        width:4em;
    }

    .icono-detalle .subicono {
        width:2em;
        position:absolute;
        right:0;
        bottom:0;
    }
*/

.rutina-check{
    width:2em;
}

.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: "Noto Sans", sans-serif;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    width: 100%;
}

    .styled-table caption {
        background-color: #00765e;
        color: #ffffff;
        text-align: center;
        padding: 12px 15px;
        font-size:1.1em;
        font-weight:bold;
    }

    .styled-table thead tr {
        background-color: #009879;
        color: #ffffff;
        text-align: left;
    }

    .styled-table th {
        font-weight: bold;
    }

    .styled-table th,
    .styled-table td {
        padding: 12px 15px;
    }

    .styled-table tbody tr {
        border-bottom: 1px solid #dddddd;
    }

        .styled-table tbody tr:nth-of-type(even) {
            background-color: #f3f3f3;
        }

        .styled-table tbody tr:nth-of-type(odd) {
            background-color: #ffffff;
        }

        .styled-table tbody tr:last-of-type {
            border-bottom: 2px solid #009879;
        }

#cargando {
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

@media (max-width: 30em) {
    .login {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 90%;
        height: 17em;
    }

    .cambiarPassword {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 90%;
        height: 17em;
    }

        .cambiarPassword #lblPassword {
            display:block;
            width: initial;
        }

        .cambiarPassword #lblRepetirPassword {
            display: block;
            width: initial;
        }

    .campos label {
        display: block;
        width: initial;
    }

    .campos span {
        display: block;
        width: initial;
    }

    .menu-separador-linea {
        display: block;
    }

    .menu-nueva-linea {
        margin-left: 3em;
        margin-top: 5px;
    }
}

/*
.linea-formulario {
    vertical-align: middle;
    margin-bottom: 10px;
}

.etiqueta150 {
    display: inline-block;
    width: 150px;
    font-weight: bold;
    vertical-align: top;
    padding-top: 3px;
}

@media (min-width: 30em) {
    .campo150 {
        max-width: calc(100% - 170px);
    }
}

@media (max-width: 30em) {
    input:not([type="image"]), textarea, select {
        max-width: 100%;
    }
    .etiqueta150 {
        display: block;
        width: auto;
    }
}

.campo {
    display: inline-block;
    vertical-align: bottom;
    max-width: 100%;
}
*/

.modal-resultado-rutina{
    width:100% !important;
    padding:0 !important;
    background-color:transparent !important;
}

    .modal > .styled-table{
        margin:0;
    }