@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}
body {
    font-family: 'Poppins', sans-serif;
}
input:focus {
    outline: none;
}
#loadDiv{
    z-index: 100000;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #507B24;
}
#img_men_lat {
    width: 110%;
}
.mapa {
  width: 100%;  
  height: 100%;
}

#formulario-login{
    z-index: 100000;
    width: 100%;
    height: 100% ;
    background-color: transparent;
    position: absolute;
}

/* -----
CSS para desktop
----- */
@media (min-width: 1024px) {
    /*login and create account
    --------------------------
    --------------------------*/
    .loginForm , .createForm {
        width: 55%;
        height: 75%;
        position: absolute;
        background-color: #FFFFFF;
        margin: 3% 22.5% 0% 22.5%;
        border-radius: 2vw;
        border: 0.2vw #6e6e6e8f solid;
        box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);
    }
    .loginForm {
        & > h2 {
            margin: 4% 10% 0.5% 10%;
            font-size: 2.25vw;
        }
        & > label {
            margin-left: 10%;
            margin-top: 0%;
            padding: 0%;
            font-size: 1.5vw;
        }
        & > input {
            margin-left: 10%;
            width: 80%;
            height: 6%;
            border-radius: 0.75vw;
            border: 0.2vw #6e6e6e8f solid;
            font-size: 1.25vw;
            margin-bottom: 0.5%;
        }
        & > button {
            margin-left: 10%;
            width: 81.25%;
            height: 8%;
            border-radius: 0.75vw;
            border: 0.2vw #6e6e6e8f solid;
            background-color: #72A53E;
            color: #FFFFFF;
            font-size: 1.75vw;
            font-weight: bolder;

            &:hover {
                background-color: #507B24;
            }
        }
        & > p {
            margin-left: 10%;
            margin-right: 10%;
            font-size: 1.25vw;
            & > a {
                font-weight: bold;
            }
        }
    }
    .createForm {
        & > h2 {
            margin: 4% 10% 0% 10%;
            font-size: 2.25vw;
        }
        & > label {
            margin-left: 10%;
            margin-top: 0%;
            padding: 0%;
            font-size: 1.5vw;
        }
        & > input {
            margin-left: 10%;
            width: 80%;
            height: 6%;
            border-radius: 0.75vw;
            border: 0.2vw #6e6e6e8f solid;
            font-size: 1.25vw;
        }
        & > button {
            margin-left: 10%;
            width: 81.25%;
            height: 8%;
            border-radius: 0.75vw;
            border: 0.2vw #6e6e6e8f solid;
            background-color: #72A53E;
            color: #FFFFFF;
            font-size: 1.75vw;
            font-weight: bolder;
            
            &:hover {
                background-color: #507B24;
            }
        }
        & > p {
            margin-left: 10%;
            margin-right: 10%;
            font-size: 1.3vw;
            & > a {
                font-weight: bold;
            }

        }
    }
    /*load
    ------
    ------*/
    #loadDiv {
        & > img {
            align-items: center;
            width: 15%;
            height: auto;
            margin: 5% 42.5% 0 42.5%;
        }
        & > h3 {
            color: #FFFFFF;
            text-align: center;
            font-size: 2.25vw;
            font-weight: 900;
            margin-bottom: -1%;
        }
        & > h4 {
            color: #FFFFFF;
            text-align: center;
            font-size: 1.75vw;
            margin: 2% 30% 0% 30%;
            font-weight: 100;
        }
        & > .load_box {
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            justify-content: space-between; 
            align-items: center; 
            width: 15%; 
            padding: 10px;
            & > img {
                width: 75%;
                height: auto;
            }
            & > h4 {
                color: #FFFFFF;
                font-size: 1.5vw;
                padding-left: 12.5%;
            }
        }
    } 
    /*menu configuracion
    --------------------
    --------------------*/
    /*menu grande de opciones*/
        .menu_opcion {
            width: 55%;
            height: 75%;
            position: absolute;
            z-index: 1000;
            background-color: #FFFFFF;
            margin: 3% 22.5% 0% 22.5%;
            border-radius: 2vw;
            border: 0.2vw #6e6e6e8f solid;
            box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);
        }
    /*menu mediana de opciones*/
        .submenu-wrapper {
            width: 45%;
            height: 35%;
            position: absolute;
            z-index: 1000;
            background-color: #FFFFFF;
            margin: 20% 28% 0% 28%;
            border-radius: 2vw;
            border: 0.2vw #6e6e6e8f solid;
            box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);

            & > .tank_bug {
                margin: 0 5% 0 5%;
                width: 90%;
                height: 100%;

                & > h3 {
                    font-size: 2vw;
                    text-align: center;
                    margin: 2% 0% 1% 0% ;
                }
                & > p {
                    font-size: 1.25vw;
                    text-align: center;  
                    margin: 0% 2.5% 0% 2.5% ;
                }
            }
            & > .timeWarning {
                width: 100%;
                height: 85%;

                & > h3 {
                    margin: 5% 10% 0% 10%;
                    font-size: 2vw; 
                }
                & > form {
                    margin: 0% 10% 0% 10%;
                    width: 80%;
                    height: 80%;

                    & > label {
                        margin-top: 2%;
                        padding: 0%;
                        font-size: 1.5vw;
                    }
                    & > select {
                        width: 93%;
                        height: 20%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        font-size: 1.5vw;  
                    }
                    & > #no_warning {
                        margin-top: 1.5%;
                        width: 93.2%;
                        height: 17.5%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #FD0000;
                        color: #FFFFFF;
                        font-size: 1.75vw;
                        font-weight: bolder;
                    }
                    & > #timWarning {
                        margin-top: 2%;
                        width: 93.2%;
                        height: 17.5%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #72A53E;
                        color: #FFFFFF;
                        font-size: 1.75vw;
                        font-weight: bolder;
                        margin-bottom: 1.5%;
                    }

                }   
            }
        }
    /*menu pequeño de opciones*/
        .menu_item{
            width: 55%;
            height: 25%;
            position: absolute;
            z-index: 1000;
            background-color: #FFFFFF;
            margin: 20% 22.5% 0% 22.5%;
            border-radius: 2vw;
            border: 0.2vw #6e6e6e8f solid;
            box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);
        }
        .sub_account{
            width: 100%;
            height: 90%;
            & > h2 {
                margin: 5% 10% 0% 10%;
                font-size: 2.1vw;
                font-weight: 100; 
                text-align: center;
            }
            & > #yesdelete {
                margin: 0% 7% 5% 17% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #72A53E;
                color: #FFFFFF;
                font-size: 1.75vw;
                font-weight: bolder;

                &:hover {
                    background-color: #507B24;
                }
            }
            & > #nodelete {
                margin: 0% 17% 5% 0% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #FD0000;
                color: #FFFFFF;
                font-size: 1.75vw;
                font-weight: bolder;

                &:hover {
                    background-color: #AA0A0A;
                }
            }
            & > #yesclose {
                margin: 0% 7% 5% 17% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #72A53E;
                color: #FFFFFF;
                font-size: 1.75vw;
                font-weight: bolder;

                &:hover {
                    background-color: #507B24;
                }
            }
            & > #noclose {
                margin: 0% 17% 5% 0% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #FD0000;
                color: #FFFFFF;
                font-size: 1.75vw;
                font-weight: bolder;

                &:hover {
                    background-color: #AA0A0A;
                }
            }
            & > #delWarning {
                margin: 0% 7% 5% 17% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #72A53E;
                color: #FFFFFF;
                font-size: 1.75vw;
                font-weight: bolder;

                &:hover {
                    background-color: #507B24;
                }
            }
            & > #no_warning {
                margin: 0% 17% 5% 0% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #FD0000;
                color: #FFFFFF;
                font-size: 1.75vw;
                font-weight: bolder;

                &:hover {
                    background-color: #AA0A0A;
                }
            }
        }
        /*account*/
            .account {
                width: 100%;
                height: 100%;
                & > h2 {
                    margin: 6% 10% 0% 10%;
                    font-size: 2.25vw;
                    font-weight: 100;
                    font-weight: bold;
                }
                & > #no_account{
                    position: absolute;
                    top: 2.5%;
                    right: 1.5%;
                    width: 5vh;
                    height: 5vh;
                    border-radius: 100vw;
                    background-color: transparent;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;
                    align-items: center;
                    border: 1px transparent solid;

                    &:hover {
                        background-color: #6e6e6e27;
                    }
    
                    & > img {
                        width: 60%;
                        height: 60%;
                    }
                }
                & > p {
                    margin-left: 10%;
                    margin-top: 0%;
                    margin-bottom: 0%;
                    padding: 0%;
                    font-size: 1.75vw;
                }
                & > input {
                    margin-left: 10%;
                    margin-bottom: 2%;
                    margin-top: 0%;
                    width: 80%;
                    height: 7%;
                    border-radius: 0.75vw;
                    border: 0.2vw #6e6e6e8f solid;
                    font-size: 1.75vw;
                }
                & > #deleteaccount {
                    margin-top: 2.5%;
                    margin-left: 10%;
                    width: 81.25%;
                    height: 9%;
                    border-radius: 0.75vw;
                    border: 0.2vw #6e6e6e8f solid;
                    background-color: #FD0000;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;

                    &:hover {
                        background-color: #AA0A0A;
                    }
                }
                & > #closeaccount {
                    margin-top: 1.5%;
                    margin-left: 10%;
                    width: 81.25%;
                    height: 9%;
                    border-radius: 0.75vw;
                    border: 0.2vw #6e6e6e8f solid;
                    background-color: #72A53E;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;

                    &:hover {
                        background-color: #507B24;
                    }
                }
                & > #Reportes {
                    margin-top: 1.5%;
                    margin-left: 10%;
                    width: 35.62%;
                    height: 9%;
                    border-radius: 0.75vw;
                    border: 0.2vw #6e6e6e8f solid;
                    background-color: #3E85BF;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;
                    
                    &:hover {
                        background-color: #25406B;
                    }
                }
                & > #Incidencias {
                    width: 36.6%;
                    height: 9%;
                    margin-left: 8.5%;
                    border-radius: 0.75vw;
                    border: 0.2vw #6e6e6e8f solid;
                    background-color: #FF9000;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;
                    
                    &:hover {
                        background-color: #B0680A;
                    }  
                }
            }
        /*warning*/
            .warning {
                margin: 16% 22.5% 10% 22.5% ;
                width: 55%;
                height: 40%;
                position: absolute;
                z-index: 1000;
                background-color: #FFFFFF;
                border-radius: 2vw;
                border: 0.2vw #6e6e6e8f solid;
                box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);
                & > h2{
                    margin: 4% 10% 0% 10%;
                    font-size: 2.25vw;
                } 
                & > #closewarning{
                    position: absolute;
                    top: 2.5%;
                    right: 1.5%;
                    width: 5vh;
                    height: 5vh;
                    border-radius: 100vw;
                    background-color: transparent;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;
                    align-items: center;
                    border: 1px transparent solid;

                    &:hover {
                        background-color: #6e6e6e27;
                    }

                    & > img {
                        width: 60%;
                        height: 60%;
                    }
                }
            }
            /*warning select*/
            #warning_select{
                display: grid;
                justify-content: center;
                align-items: center;
                grid-template-columns: repeat(4, 1fr); 
                gap: 10px; 
                width: 80%;
                height: 70%; 
                margin: 0% 10% 0% 10%;
                & > button:hover {
                    background-color: #6e6e6e27;

                }
                & > button {
                    padding: 20px;
                    border-radius: 10px;
                    background-color: transparent;
                    height: 80%;
                    border: 1px solid transparent;

                    & > img {
                        width: 50%;
                        height: auto;
                        margin-bottom: 10px;
                        border-radius: 50%;
                        padding: 6%;
                        color: #FFFFFF;
                    }
                    & >  h3 {
                        margin: 0;
                        font-size: 1.3vw;
                        font-weight: 100;
                    }
                    & > #green {
                        background-color: #72A53E;
                    }
                    & > #red {
                        background-color: #FD0000;
                    }
                    & > #blue {
                        background-color: #1361A1;
                    }
                    & > #yellow {
                        background-color: #FDAD02;
                    }
                }
            }
            /*warning add y incident*/
            .adddel_warning{
                height: 85%;
                width: 100%;
                & > h2 {
                    margin: 5% 10% 0% 10%;
                    font-size: 2.25vw; 
                }
                & > #no_warning{
                    position: absolute;
                    top: 2.5%;
                    right: 1.5%;
                    width: 5vh;
                    height: 5vh;
                    border-radius: 100vw;
                    background-color: transparent;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;
                    align-items: center;
                    border: 1px transparent solid;

                    &:hover {
                        background-color: #6e6e6e27;
                    }
    
                    & > img {
                        width: 60%;
                        height: 60%;
                    }
                }
                & > form {
                    margin: 0% 10% 0% 10%;
                    width: 80%;
                    height: 90%;
                    overflow-y: scroll;
                    & > label {
                        margin-top: 2%;
                        padding: 0%;
                        font-size: 1.75vw;
                    }
                    & > input {
                        width: 90%;
                        height: 7%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        font-size: 1.5vw;  
                    }
                    & > textarea {
                        width: 90%;
                        height: 35%;
                        resize: none;
                        font-size: 1.75vw;
                    }
                    & > select {
                        width: 91%;
                        height: 8%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        font-size: 1.5vw;   
                    } 
                    & > #yes_addwarning {
                        width: 91.25%;
                        height: 9%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #72A53E;
                        color: #FFFFFF;
                        font-size: 1.75vw;
                        font-weight: bolder;
                        margin-bottom: 3%;

                        &:hover {
                            background-color: #507B24;
                        }
                    }
                    & > #clear_addwarning{
                        width: 91.25%;
                        height: 9%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #3E85BF;
                        color: #FFFFFF;
                        font-size: 1.75vw;
                        font-weight: bolder;

                        &:hover {
                            background-color: #25406B;
                        }
                    }
                }
            }
        /*bug*/   
            .bug {
                height: 90%;
                width: 100%;
                & > h2 {
                    margin: 5% 10% 0% 10%;
                    font-size: 2.25vw; 
                }
                & > #closebug{
                    position: absolute;
                    top: 2.5%;
                    right: 1.5%;
                    width: 5vh;
                    height: 5vh;
                    border-radius: 100vw;
                    background-color: transparent;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;
                    align-items: center;
                    border: 1px transparent solid;

                    &:hover {
                        background-color: #6e6e6e27;
                    }
    
                    & > img {
                        width: 60%;
                        height: 60%;
                    }
                }
                & > form {
                    margin: 0% 10% 0% 10%;
                    width: 80%;
                    height: 90%;
                    overflow-y: scroll;
                    & > label {
                        margin-top: 2%;
                        padding: 0%;
                        font-size: 1.75vw;
                    }
                    & > input {
                        width: 90%;
                        height: 7%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        font-size: 1.5vw;  
                    }
                    & > textarea {
                        width: 90%;
                        height: 35%;
                        resize: none;
                        font-size: 1.75vw;
                    }
                    & > select {
                        width: 91%;
                        height: 8%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        font-size: 1.5vw;   
                    }
                    & > #savebug {
                        width: 91.25%;
                        height: 9%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #72A53E;
                        color: #FFFFFF;
                        font-size: 1.75vw;
                        font-weight: bolder;
                        margin-bottom: 3%;

                        &:hover {
                            background-color: #507B24;
                        }
                    }
                    & > #clearebug {
                        width: 91.25%;
                        height: 9%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #3E85BF;
                        color: #FFFFFF;
                        font-size: 1.75vw;
                        font-weight: bolder;
                        
                        &:hover {
                            background-color: #25406B;
                        }
                    }
                }
            }    
        /*info*/
            .info{
                width: 100%;
                height: 95%;
                & > h2 {
                    margin: 5% 10% 0% 10%;
                    font-size: 2.25vw; 
                }
                & > #closeinfo{
                    position: absolute;
                    top: 2.5%;
                    right: 1.5%;
                    width: 5vh;
                    height: 5vh;
                    border-radius: 100vw;
                    background-color: transparent;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;
                    align-items: center;
                    border: 1px transparent solid;

                    &:hover {
                        background-color: #6e6e6e27;
                    }
    
                    & > img {
                        width: 60%;
                        height: 60%;
                    }
                }
                & > div {
                    margin: 0% 10% 0% 10%;
                    width: 80% ;
                    height: 85%;
                    padding: 0%;
                    overflow-y: scroll;
                    & > p {
                       font-size: 2vw; 
                       padding-right: 2%; 
                    }
                    & > h3 {
                        font-size: 2vw;
                        font-weight: bold;  
                        
                    }
                    & > ol > li {
                        font-size: 2vw; 
                        padding-right: 2%; 
                    }    
                }
            }
    /*menu_lateral
    --------------
    --------------*/
    #bot_men_lat {
        position: fixed; 
        z-index: 1000;
        top: 0;
        left: 0;
        margin: 12.5% 0 0 0.75%;
        width: 1.75%;
        height: 55%;
        background-color: #FFFFFF;
        border-radius: 15vw 35vw 35vw 15vw;
        border: #6e6e6e91 solid 2px;
        transition: transform 1s ease-out; 
    }

    .deslizamiento_boton_lat {
        animation: deslizamiento_boton_lat 1s ease-out forwards;
    }  
        @keyframes deslizamiento_boton_lat {
            from {
            transform: translateX(0); /* Empieza fuera del área visible */
            }
            to {
            transform: translateX(30.5vw); /* Termina en su posición original */
            opacity: 1; /* Opcional: completamente visible */
            } 
        }   
    .deslizamiento_boton_lat_inv {
        animation: deslizamiento_boton_lat_inv 1s ease-out forwards;
    }
        @keyframes deslizamiento_boton_lat_inv {
            from {
            transform: translateX(30.5vw); /* Empieza fuera del área visible */
            }
            to {
            transform: translateX(-0); /* Termina en su posición original */
            opacity: 1; /* Opcional: completamente visible */
            } 
        }

    #men_lat {
        display: none;
        position: fixed;
        z-index: 10000;
        left: 0;
        top: 0;
        margin: 5% 0 0 1%;
        width: 27.5%;
        height: 80%;
        border-radius: 2vw;
        background-color:#FFFFFF;
        border: 0.1vw #6e6e6e8f solid;
        box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);
        padding: 1% 0 0 2%;
        transition: transform 1s ease-out;

        & > form {
            width: 90%;
            height: 80%;
            margin: 5% 0 0 0;
            overflow-y: scroll;
            border-radius: 1vw;

            & > label {
                width: 90%;
                font-size: 1.5vw;
            }
            & > select{
                width: 98.5%;
                height: 8%;
                border-radius: 0.6vw;
                border: solid black 1px;
                margin-top: 0.5%;
                margin-bottom: 0.75%;
                background-color: #FFFFFF;
                padding: 2%;
                font-size: 1.25vw;
            }
            & > input {
                width: 94%;
                height: 5%;
                border-radius: 0.6vw;
                border: solid black 1px;
                margin-top: 0.5%;
                margin-bottom: 0.75%;
                padding: 2%;
                background-color: #FFFFFF;
                font-size: 1.25vw;
            }
            & > button {
                color: #FFFFFF;
                position: absolute;
                bottom: 2.5%;
                left: 7%;
                width: 83.5%;
                height: 8%;
                font-size: 2.5vw;
                border-radius: 0.5vw;
                border: 1px rgba(0, 0, 0, 0) solid;
                background-color: #72A53E;
                font-weight: bolder; 

                &:hover {
                    background-color: #507B24;
                }
            }
        }
        & > p {
            width: 90%;
            font-size: 1.6vw;
            margin-bottom: -6%;
            margin-top: 0%;
        }
    }

    .aparicion_menu_lat{
        display: block;
        animation: aparicion_menu_lat 1s ease-out forwards;
        }
            @keyframes aparicion_menu_lat {
                from {
                transform: translateX(-120%); /* Empieza fuera del área visible */
                opacity: 0; /* Opcional: aparece gradualmente */
                } to {
                transform: translateX(0); /* Termina en su posición original */
                opacity: 1; /* Opcional: completamente visible */
                }
            }
        .aparicion_menu_lat_inv{
            display: block;
            animation: aparicion_menu_lat_inv 1s ease-out forwards;
        }
            @keyframes aparicion_menu_lat_inv {
                from {
                transform: translateX(0); /* Empieza fuera del área visible */
                opacity: 1; /* Opcional: aparece gradualmente */
                } to {
                transform: translateX(-120%); /* Termina en su posición original */
                opacity: 0; /* Opcional: completamente visible */
                }
            }

    /*menu_abajo
    ------------
    ------------*/
    .menu_abajo {
        height: 14.5%;
        width: 35%;
        border-radius: 5vw 5vw 0 0;
        bottom: 0;
        left: 32.5%;
        margin: 0 1% 0 1% ;
        border-top: 0.15vh #6e6e6e8f solid;
        border-left: 0.15vw #6e6e6e8f solid;
        border-right: 0.15vw #6e6e6e6e solid;
        position: absolute;
        background-color:#FFFFFF;
        z-index: 10000;

        & > div {
            top: 13%;
            left: 1.6%;
            width: 97.8%;
            height: 101%;
            position: absolute;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            z-index: 10000;

            & > div {
                width: 100%;
                height: 80%;

                & > button {
                    width: 98%;
                    border: 0px solid black;
                    background-color: transparent;

                    &:hover{
                        background-color: #bebebe46;
                    }

                    & > img {
                        width: 45%;
                        height: 65%;
                        margin: 0% 0 0 5% ;                        
                        padding: 0%;
                        object-fit: contain;
                    }
                    & > p {
                        font-size: 1.75vh;
                        text-align: center;
                        margin: 0;
                        padding: 5% 0 10% 0;
                        color: #6E6E6E;
                    }
                }
                & > .ultimo {
                    border-radius: 0 3.5vw 0 0;
          	        padding-left: 1%;
                }
                & > .mg_lad {
                    padding-left: 1%;
                    padding-right: 1%;
                }
                & > .primero {
                    border-radius: 3.5vw 0 0 0;
        	        padding-right: 1%;
                }
            }
            & > .borde {
                border-right: 2px #6E6E6E solid;
            }
        } 
    }
}
/* -----
CSS para tablet
----- */
@media (min-width: 768px) and (max-width: 1024px) {
    /*login and create account
    --------------------------
    --------------------------*/
    .loginForm , .createForm {
        width: 70%;
        height: 65%;
        position: absolute;
        background-color: #FFFFFF;
        margin: 20% 15% 0% 15%;
        border-radius: 2vw;
        border: 0.2vw #6e6e6e8f solid;
        box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);
    }
    .loginForm {
        & > h2 {
            margin: 7% 10% 0% 10%;
            font-size: 3vw;
            font-weight: 100;
        }
        & > label {
            margin-left: 10%;
            margin-top: 0%;
            padding: 0%;
            font-size: 2.75vw;
        }
        & > input {
            margin-left: 10%;
            width: 80%;
            height: 5.5%;
            border-radius: 0.75vw;
            border: 0.2vw #6e6e6e8f solid;
            font-size: 2.75vw;
            margin-bottom: 0.5%;
        }
        & > button {
            margin-left: 10%;
            width: 81.25%;
            height: 6%;
            border-radius: 0.75vw;
            border: 0.2vw #6e6e6e8f solid;
            background-color: #72A53E;
            color: #FFFFFF;
            font-size: 2.75vw;
            font-weight: bolder;

            &:hover {
                background-color: #507B24;
            }
        }
        & > p {
            margin-left: 10%;
            margin-right: 10%;
            font-size: 2.5vw;
            & > a {
                font-weight: bold;
            }
        }
    }
    .createForm {
        & > h2 {
            margin: 4% 10% 0% 10%;
            font-size: 3vw;
        }
        & > label {
            margin-left: 10%;
            margin-top: 0%;
            padding: 0%;
            font-size: 2.75vw;
        }
        & > input {
            margin-left: 10%;
            width: 80%;
            height: 5.5%;
            border-radius: 0.75vw;
            border: 0.2vw #6e6e6e8f solid;
            font-size: 2.75vw;
        }
        & > button {
            margin-left: 10%;
            width: 81.25%;
            height: 6%;
            border-radius: 0.75vw;
            border: 0.2vw #6e6e6e8f solid;
            background-color: #72A53E;
            color: #FFFFFF;
            font-size: 2.75vw;
            font-weight: bolder;

            &:hover {
                background-color: #507B24;
            }
        }
        & > p {
            margin-left: 10%;
            margin-right: 10%;
            font-size: 2.5vw;
            & > a {
                font-weight: bold;
            }

        }
    }
    /*load
    ------
    ------*/
    #loadDiv{
        & > img {
            align-items: center;
            width: 20%;
            height: auto;
            margin: 45% 40% 0 40%;
        }
        & > h3 {
            color: #FFFFFF;
            text-align: center;
            font-size: 2.5vw;
            font-weight: 900;
            margin-bottom: -1%;
        }
        & > h4 {
            color: #FFFFFF;
            text-align: center;
            font-size: 2vw;
            margin: 1% 20% 0% 20%;
            font-weight: 100;
        }
        & > .load_box {
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            justify-content: space-between; 
            align-items: center; 
            width: 20%; 
            padding: 10px;
            & > img {
                width: 100%;
                height: auto;
            }
            & > h4 {
                color: #FFFFFF;
                font-size: 2.2vw;
                padding-left: 12.5%;
            }
        }
    } 
        
    /*menu configuracion
    --------------------
    --------------------*/
    /*menu grande de opciones*/
        .menu_opcion {
            width: 70%;
            height: 65%;
            position: absolute;
            z-index: 1000;
            background-color: #FFFFFF;
            margin: 20% 15% 0% 15%;
            border-radius: 2vw;
            border: 0.2vw #6e6e6e8f solid;
            box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);
        }
    /*menu mediana de opciones*/
        .submenu-wrapper {
            width: 61.5%;
            height: 20%;
            position: absolute;
            z-index: 1000;
            background-color: #FFFFFF;
            margin: 50% 20% 0% 20%;
            border-radius: 2vw;
            border: 0.2vw #6e6e6e8f solid;
            box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);

            & > .tank_bug {
                margin: 0 5% 0 5%;
                width: 90%;
                height: 100%;

                & > h3 {
                    font-size: 2.5vw;
                    text-align: center;
                    margin: 2% 0% 1% 0% ;
                }
                & > p {
                    font-size: 1.75vw; 
                    text-align: center;  
                    margin: 0% 2.5% 0% 2.5% ;
                }
            }
            & > .timeWarning {
                width: 100%;
                height: 85%;

                & > h3 {
                    margin: 5% 10% 0% 10%;
                    font-size: 2vw; 
                }
                & > form {
                    margin: 0% 10% 0% 10%;
                    width: 80%;
                    height: 80%;

                    & > label {
                        margin-top: 2%;
                        padding: 0%;
                        font-size: 1.5vw;
                    }
                    & > select {
                        width: 93%;
                        height: 20%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        font-size: 1.5vw;   
                    }
                    & > #no_warning {
                        margin-top: 1.5%;
                        width: 93.2%;
                        height: 17.5%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #FD0000;
                        color: #FFFFFF;
                        font-size: 1.75vw;
                        font-weight: bolder;

                        &:hover {
                            background-color: #AA0A0A;
                        }
                    }
                    & > #timWarning {
                        margin-top: 2%;
                        width: 93.2%;
                        height: 17.5%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #72A53E;
                        color: #FFFFFF;
                        font-size: 1.75vw;
                        font-weight: bolder;
                        margin-bottom: 1.5%;

                        &:hover {
                            background-color: #507B24;
                        }
                    }

                }   
            }
        }
    /*menu pequeño de opciones*/
        .menu_item{
            width: 70%;
            height: 20%;
            position: absolute;
            z-index: 1000;
            background-color: #FFFFFF;
            margin: 45% 15% 0% 15%;
            border-radius: 2vw;
            border: 0.2vw #6e6e6e8f solid;
            box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);
        }
        .sub_account{
            width: 100%;
            height: 90%;
            & > h2 {
                margin: 5% 10% 0% 10%;
                font-size: 2.1vw;
                font-weight: 100; 
                text-align: center;
            }
            & > #yesdelete {
                margin: 0% 7% 5% 17% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #72A53E;
                color: #FFFFFF;
                font-size: 1.75vw;
                font-weight: bolder;

                &:hover {
                    background-color: #507B24;
                }
            }
            & > #nodelete {
                margin: 0% 17% 5% 0% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #FD0000;
                color: #FFFFFF;
                font-size: 1.75vw;
                font-weight: bolder;

                &:hover {
                    background-color: #AA0A0A;
                }
            }
            & > #yesclose {
                margin: 0% 7% 5% 17% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #72A53E;
                color: #FFFFFF;
                font-size: 1.75vw;
                font-weight: bolder;

                &:hover {
                    background-color: #507B24;
                }
            }
            & > #noclose {
                margin: 0% 17% 5% 0% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #FD0000;
                color: #FFFFFF;
                font-size: 1.75vw;
                font-weight: bolder;

                &:hover {
                    background-color: #AA0A0A;
                }
            }
            & > #delWarning {
                margin: 0% 7% 5% 17% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #72A53E;
                color: #FFFFFF;
                font-size: 1.75vw;
                font-weight: bolder;

                &:hover {
                    background-color: #507B24;
                }
            }
            & > #no_warning {
                margin: 0% 17% 5% 0% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #FD0000;
                color: #FFFFFF;
                font-size: 1.75vw;
                font-weight: bolder;

                &:hover {
                    background-color: #AA0A0A;
                }
            }
        }
        /*account*/
            .account {
                width: 100%;
                height: 100%;
                & > h2 {
                    margin: 13% 10% 0% 10%;
                    font-size: 3vw;
                    font-weight: 100;
                    font-weight: bold;
                }
                & > #no_account{
                    position: absolute;
                    top: 2.5%;
                    right: 1.5%;
                    width: 4vh;
                    height: 4vh;
                    border-radius: 100vw;
                    background-color: transparent;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;
                    align-items: center;
                    border: 1px transparent solid;

                    &:hover {
                        background-color: #6e6e6e27;
                    }
                    
                    & > img {
                        width: 60%;
                        height: 60%;
                    }
                }
                & > p {
                    margin-left: 10%;
                    margin-top: 0%;
                    margin-bottom: 0%;
                    padding: 0%;
                    font-size: 2.75vw;
                }
                & > input {
                    margin-left: 10%;
                    margin-bottom: 2%;
                    margin-top: 0%;
                    width: 80%;
                    height: 7%;
                    border-radius: 0.75vw;
                    border: 0.2vw #6e6e6e8f solid;
                    font-size: 2.75vw;
                }
                & > #deleteaccount {
                    margin-top: 7.5%;
                    margin-left: 10%;
                    width: 81.25%;
                    height: 9%;
                    border-radius: 0.75vw;
                    border: 0.2vw #6e6e6e8f solid;
                    background-color: #FD0000;
                    color: #FFFFFF;
                    font-size: 2.75vw;
                    font-weight: bolder;

                    &:hover {
                        background-color: #AA0A0A;
                    }
                }
                & > #closeaccount {
                    margin-top: 12.5%;
                    margin-left: 10%;
                    width: 81.25%;
                    height: 9%;
                    border-radius: 0.75vw;
                    border: 0.2vw #6e6e6e8f solid;
                    background-color: #72A53E;
                    color: #FFFFFF;
                    font-size: 2.75vw;
                    font-weight: bolder;

                    &:hover {
                        background-color: #507B24;
                    }
                }
                & > #Reportes {
                    margin-top: 8.5%;
                    margin-left: 10%;
                    width: 35.62%;
                    height: 8%;
                    border-radius: 1vw;
                    border: 0.2vw #6e6e6e8f solid;
                    background-color: #3E85BF;
                    color: #FFFFFF;
                    font-size: 3vw;
                    font-weight: bolder;
                    
                    &:hover {
                        background-color: #25406B;
                    }
                }
                & > #Incidencias {
                    width: 36.6%;
                    height: 8%;
                    margin-left: 8.5%;
                    border-radius: 1vw;
                    border: 0.2vw #6e6e6e8f solid;
                    background-color: #FF9000;
                    color: #FFFFFF;
                    font-size: 3vw;
                    font-weight: bolder;
                    
                    &:hover {
                        background-color: #B0680A;
                    }  
                }
            }
        /*warning*/
            .warning {
                margin: 50% 15% 0% 15%;
                width: 70%;
                height: 25%;
                position: absolute;
                z-index: 1000;
                background-color: #FFFFFF;
                border-radius: 1.5vw;
                border: 0.2vw #6e6e6e8f solid;
                box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);
                & > h2{
                    margin: 4% 10% 0% 10%;
                    font-size: 2.25vw;
                } 
                & > #closewarning{
                    position: absolute;
                    top: 2.5%;
                    right: 1.5%;
                    width: 3.5vh;
                    height: 3.5vh;
                    border-radius: 100vw;
                    border: 0.2vw #6e6e6e8f solid;
                    background-color: transparent;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;
                    align-items: center;
                    border: 1px transparent solid;

                    &:hover {
                        background-color: #6e6e6e27;
                    }

                    & > img {
                        width: 60%;
                        height: 60%;
                    }
                }
            }
            /*warning select*/
            #warning_select{
                display: grid;
                justify-content: center;
                align-items: center;
                grid-template-columns: repeat(4, 1fr); 
                gap: 10px; 
                width: 85%;
                height: 70%; 
                margin: 0% 7.5% 0% 7.5%;
                & > button {
                    padding: 20px;
                    border-radius: 10px;
                    background-color: transparent;
                    height: 80%;
                    width: 120%;
                    border: 1px solid transparent;
                    text-align: center;
                    align-items: center;

                    & > img {
                        width: 50%;
                        height: auto;
                        margin-bottom: 10px;
                        border-radius: 50%;
                        padding: 6%;
                        color: #FFFFFF;
                    }
                    & > h3 {
                        margin: 0%;
                        font-size: 1.5vw;
                        font-weight: 100;
                        text-align: center;
                        padding: 0%;
                    }
                    & > #green {
                        background-color: #72A53E;
                    }
                    & > #red {
                        background-color: #FD0000;
                    }
                    & > #blue {
                        background-color: #1361A1;
                    }
                    & > #yellow {
                        background-color: #FDAD02;
                    }
                }
            }
            /*warning add y incident*/
            .adddel_warning{
                height: 85%;
                width: 100%;
                & > h2 {
                    margin: 5% 10% 0% 10%;
                    font-size: 3.5vw; 
                }
                & > #no_warning{
                    position: absolute;
                    top: 2.5%;
                    right: 1.5%;
                    width: 4vh;
                    height: 4vh;
                    border-radius: 100vw;
                    border: 0.2vw #6e6e6e8f solid;
                    background-color: transparent;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;
                    align-items: center;
                    border: 1px transparent solid;

                    &:hover {
                        background-color: #6e6e6e27;
                    }
                    
                    & > img {
                        width: 60%;
                        height: 60%;
                    }
                }
                & > form {
                    margin: 0% 10% 0% 10%;
                    width: 80%;
                    height: 90%;
                    overflow-y: scroll;
                    & > label {
                        margin-top: 2%;
                        padding: 0%;
                        font-size: 1.75vw;
                    }
                    & > input {
                        width: 90%;
                        height: 7%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        font-size: 1.5vw;  
                    }
                    & > textarea {
                        width: 90%;
                        height: 35%;
                        resize: none;
                        font-size: 1.75vw;
                    }
                    & > select {
                        width: 91%;
                        height: 8%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        font-size: 1.5vw;   
                    }
                    & > #yes_addwarning {
                        width: 91.25%;
                        height: 9%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #72A53E;
                        color: #FFFFFF;
                        font-size: 2.5vw;
                        font-weight: bolder;
                        margin-bottom: 3%;

                        &:hover {
                            background-color: #507B24;
                        }
                    }
                    & > #clear_addwarning {
                        width: 91.25%;
                        height: 9%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #3E85BF;
                        color: #FFFFFF;
                        font-size: 2.5vw;
                        font-weight: bolder;

                        &:hover {
                            background-color: #25406B;
                        }
                    }
                }
            }
        /*bug*/   
            .bug {
                height: 90%;
                width: 100%;
                & > h2 {
                    margin: 5% 10% 0% 10%;
                    font-size: 2.25vw; 
                }
                & > #closebug{
                    position: absolute;
                    top: 2.5%;
                    right: 1.5%;
                    width: 4vh;
                    height: 4vh;
                    border-radius: 100vw;
                    background-color: transparent;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;
                    align-items: center;
                    border: 1px transparent solid;

                    &:hover {
                        background-color: #6e6e6e27;
                    }
                    
                    & > img {
                        width: 60%;
                        height: 60%;
                    }
                }
                & > form {
                    margin: 0% 10% 0% 10%;
                    width: 80%;
                    height: 90%;
                    overflow-y: scroll;
                    & > label {
                        margin-top: 2%;
                        padding: 0%;
                        font-size: 1.75vw;
                    }
                    & > input {
                        width: 90%;
                        height: 7%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        font-size: 1.5vw;
                    }
                    & > textarea {
                        width: 90%;
                        height: 35%;
                        resize: none;
                        font-size: 1.75vw;
                    }
                    & > select {
                        width: 91%;
                        height: 8%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        font-size: 1.5vw; 
                    }
                    & > #savebug {
                        width: 91.25%;
                        height: 9%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #72A53E;
                        color: #FFFFFF;
                        font-size: 2.5vw;
                        font-weight: bolder;
                        margin-bottom: 3%;

                        &:hover {
                            background-color: #507B24;
                        }
                    }
                    & > #clearebug {
                        width: 91.25%;
                        height: 9%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #3E85BF;
                        color: #FFFFFF;
                        font-size: 2.5vw;
                        font-weight: bolder;

                        &:hover {
                            background-color: #25406B;
                        }
                    }
                }
            }    
        /*info*/
            .info{
                width: 100%;
                height: 95%;
                & > h2 {
                    margin: 5% 10% 0% 10%;
                    font-size: 2.25vw; 
                }
                & > #closeinfo{
                    position: absolute;
                    top: 2.5%;
                    right: 1.5%;
                    width: 4vh;
                    height: 4vh;
                    border-radius: 100vw;
                    background-color: transparent;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;
                    align-items: center;
                    border: 1px transparent solid;

                    &:hover {
                        background-color: #6e6e6e27;
                    }
                    
                    & > img {
                        width: 60%;
                        height: 60%;
                    }
                }
                & > div {
                    margin: 0% 10% 0% 10%;
                    width: 80% ;
                    height: 85%;
                    padding: 0%;
                    overflow-y: scroll;
                    & > p {
                       font-size: 2vw; 
                       padding-right: 2%; 
                    }
                    & > h3 {
                        font-size: 2vw;
                        font-weight: bold;  
                        
                    }
                    & > ol > li {
                        font-size: 2vw; 
                        padding-right: 2%; 
                    }    
                }
            }
    /*menu_lateral
    --------------
    --------------*/
    #bot_men_lat {
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        margin: 26% 0 0 2%;
        width: 4%;
        height: 56.5%;
        background-color: #FFFFFF;
        border-radius: 15vw 35vw 35vw 15vw;
        border: #6e6e6e solid 2px;
        transition: transform 1s ease-out; 
    }

    .deslizamiento_boton_lat {
        animation: deslizamiento_boton_lat 1s ease-out forwards;
    }  
        @keyframes deslizamiento_boton_lat {
            from {
            transform: translateX(0); /* Empieza fuera del área visible */
            }
            to {
            transform: translateX(57.5vw); /* Termina en su posición original */
            opacity: 1; /* Opcional: completamente visible */
            } 
        }   
    .deslizamiento_boton_lat_inv {
        animation: deslizamiento_boton_lat_inv 1s ease-out forwards;
    }
        @keyframes deslizamiento_boton_lat_inv {
            from {
            transform: translateX(57.5vw); /* Empieza fuera del área visible */
            }
            to {
            transform: translateX(-0); /* Termina en su posición original */
            opacity: 1; /* Opcional: completamente visible */
            } 
        }

    #men_lat {
        display: none;
        position: fixed;
        z-index: 10000;
        left: 0;
        top: 0;
        margin: 12% 0 0 3%;
        width: 50%;
        height: 75%;
        border-radius: 5vw;
        background-color:#FFFFFF;
        border: 0.5vw #6e6e6e83 solid;
        box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);
        padding: 2.5% 0 0 5%;  
        transition: transform 1s ease-out;

        & > form {
            width: 90%;
            height: 80%;
            margin: 6% 0 0 0;
            overflow-y: scroll;
            border-radius: 1.5vw;

            & > label {
                width: 90%;
                font-size: 3vw;
            }
            & > select{
                width: 100%;
                height: 7%;
                border-radius: 1.25vw;
                border: solid black 1px;
                margin-bottom: 1%;
                background-color: #FFFFFF;
                padding-left: 2%;
                font-size: 3vw;
            }
            & > input {
                width: 95.5%;
                height: 6%;
                border-radius: 1.25vw;
                border: solid black 1px;
                margin-bottom: 1%;
                background-color: #FFFFFF;
                padding-left: 2%;
                font-size: 3vw;
            }
            & > button {
                color: #FFFFFF;
                position: absolute;
                bottom: 3%;
                left: 10%;
                width: 81%;
                height: 8%;
                font-size: 3.5vw;
                border-radius: 1vw;
                border: 1px rgba(0, 0, 0, 0) solid;
                background-color: #72A53E;
                font-weight: bolder;  
                box-shadow: -1px 2px 5px #6e6e6e94;

                &:hover {
                    background-color: #507B24;
                }
            }
        }
        & > p {
            width: 90%;
            font-size: 3.5vw;
            margin-bottom: -6%;
            margin-top: 0%;
        }
    }

    .aparicion_menu_lat{
        display: block;
        animation: aparicion_menu_lat 1s ease-out forwards;
        }
            @keyframes aparicion_menu_lat {
                from {
                transform: translateX(-120%); /* Empieza fuera del área visible */
                opacity: 0; /* Opcional: aparece gradualmente */
                } to {
                transform: translateX(0); /* Termina en su posición original */
                opacity: 1; /* Opcional: completamente visible */
                }
            }
        .aparicion_menu_lat_inv{
            display: block;
            animation: aparicion_menu_lat_inv 1s ease-out forwards;
        }
            @keyframes aparicion_menu_lat_inv {
                from {
                transform: translateX(0); /* Empieza fuera del área visible */
                opacity: 1; /* Opcional: aparece gradualmente */
                } to {
                transform: translateX(-120%); /* Termina en su posición original */
                opacity: 0; /* Opcional: completamente visible */
                }
            }

    /*menu_abajo
    ------------
    ------------*/
    .menu_abajo {
        bottom: 0;
        left: 19%;
        height: 11.5%;
        width: 60%;
        border-radius: 9vw 9vw 0 0;
        margin: 0 1% 0 1% ;
        border-top: 0.4vh #6e6e6e8f solid;
        border-left: 0.6vw #6e6e6e8f solid;
        border-right: 0.6vw #6e6e6e8f solid;
        position: absolute;
        background-color:#FFFFFF;
        z-index: 10000;

        & > div {
            top: 9%;
            left: 1%;
            width: 98%;
            height: 113%;
            position: absolute;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            z-index: 10000;

            & > div {
                width: 100%;
                height: 75%;

                & > button {
                    width: 98%;
              	    height: 100%;
                    border: 0px solid black;
                    background-color: transparent;

                    &:hover{
                        background-color: #bebebe46;
                    }

                    & > img {
                        width: 45%;
                        height: 65%;
                        margin: 0% 0 0 5% ;                        
                        padding: 0%;
                        object-fit: contain;
                    }
                    & > p {
                        font-size: 1.6vh;
                        text-align: center;
                        margin: 0;
                        padding: 5% 0 10% 0;
                        color: #6E6E6E;
                    }
                }
                & > .ultimo {
                    border-radius: 0 7vw 0 0;
              	    padding-left: 1%;
                }
                & > .mg_lad {
                    padding-left: 1%;
                    padding-right: 1%;
                }
                & > .primero {
                    border-radius: 7vw 0 0 0;
              	    padding-right: 1%;
                }
            }
            & > .borde {
                border-right: 2px #6E6E6E solid;
            }
        } 
    }
} 
/* -----
CSS para movil
----- */
@media (max-width: 767px) {
    /*login and create account
    --------------------------
    --------------------------*/
    .loginForm , .createForm {
        width: 80%;
        height: 55%;
        position: absolute;
        background-color: #FFFFFF;
        margin: 37.5% 10% 0% 10%;
        border-radius: 4vw;
        border: 0.2vw #6e6e6e8f solid;
        box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);
    }
    .loginForm {
        & > h2 {
            margin: 10% 10% 0% 10%;
            font-size: 3.5vw;
        }
        & > label {
            margin-left: 10%;
            margin-top: 0%;
            padding: 0%;
            font-size: 3vw;
        }
        & > input {
            margin-left: 10%;
            width: 80%;
            height: 5.5%;
            border-radius: 1vw;
            border: 0.2vw #6e6e6e8f solid;
            font-size: 3vw;
            margin-bottom: 0.5%;
        }
        & > button {
            margin-left: 10%;
            width: 81.25%;
            height: 9%;
            border-radius: 0.75vw;
            border: 0.2vw #6e6e6e8f solid;
            background-color: #72A53E;
            color: #FFFFFF;
            font-size: 3vw;
            font-weight: bolder;

            &:hover {
                background-color: #507B24;
            }
        }
        & > p {
            margin-left: 10%;
            margin-right: 10%;
            font-size: 2.75vw;
            & > a {
                font-weight: bold;
            }
        }
    }
    .createForm {
        & > h2 {
            margin: 4% 10% 0% 10%;
            font-size: 3.5vw;
        }
        & > label {
            margin-left: 10%;
            margin-top: 0%;
            padding: 0%;
            font-size: 3vw;
        }
        & > input {
            margin-left: 10%;
            width: 80%;
            height: 5.5%;
            border-radius: 0.75vw;
            border: 0.2vw #6e6e6e8f solid;
            font-size: 3vw;
        }
        & > button {
            margin-left: 10%;
            width: 81.25%;
            height: 9%;
            border-radius: 0.75vw;
            border: 0.2vw #6e6e6e8f solid;
            background-color: #72A53E;
            color: #FFFFFF;
            font-size: 3vw;
            font-weight: bolder;

            &:hover {
                background-color: #507B24;
            }
        }
        & > p {
            margin-left: 10%;
            margin-right: 10%;
            font-size: 2.75vw;
            & > a {
                font-weight: bold;
            }

        }
    }
    /*load
    ------
    ------*/
    #loadDiv {
        & > img {
            align-items: center;
            width: 30%;
            height: auto;
            margin: 55% 35% 0 35%;
        }
        & > h3 {
            color: #FFFFFF;
            text-align: center;
            font-size: 3vw;
            font-weight: 900;
            margin-bottom: 0%;
            padding: 0;
        }
        & > h4 {
            color: #FFFFFF;
            text-align: center;
            font-size: 2.5vw;
            margin: -1% 15% 0% 15%;
            font-weight: 100;
        }
        & > .load_box {
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            justify-content: space-between; 
            align-items: center; 
            width: 20%; 
            padding: 10px;
            & > img {
                width: 100%;
                height: auto;
            }
            & > h4 {
                color: #FFFFFF;
                font-size: 2.2vw;
                padding-left: 12.5%;
            }
        }
    } 
    
    /*menu configuracion
    --------------------
    --------------------*/
    /*menu grande de opciones*/
        .menu_opcion {
            width: 80%;
            height: 50%;
            position: absolute;
            z-index: 1000;
            background-color: #FFFFFF;
            margin: 40% 10% 0% 10%;
            border-radius: 4vw;
            border: 0.2vw #6e6e6e8f solid;
            box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);
        }
    /*menu mediana de opciones*/
        .submenu-wrapper {
            width: 75%;
            height: 20%;
            position: absolute;
            z-index: 1000;
            background-color: #FFFFFF;
            margin: 65% 0% 0% 12.5%;
            border-radius: 2vw;
            border: 0.2vw #6e6e6e8f solid;
            box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);

            & > .tank_bug {
                margin: 0 5% 0 5%;
                width: 90%;
                height: 100%;

                & > h3 {
                    font-size: 3.5vw;
                    text-align: center;
                    margin: 2% 0% 1% 0% ;
                }
                & > p {
                    font-size: 2.5vw; 
                    text-align: center;  
                    margin: 0% 2.5% 0% 2.5% ;
                }
            }
            & > .timeWarning {
                width: 100%;
                height: 85%;

                & > h3 {
                    margin: 2.5% 10% 0% 10%;
                    font-size: 3.5vw; 
                }
                & > form {
                    margin: 0% 10% 0% 10%;
                    width: 80%;
                    height: 90%;

                    & > label {
                        margin-top: 2%;
                        padding: 0%;
                        font-size: 3vw;
                    }
                    & > select {
                        width: 93%;
                        height: 20%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        font-size: 3vw;  
                    }
                    & > #no_warning {
                        margin-top: 1.5%;
                        width: 93.2%;
                        height: 17.5%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #FD0000;
                        color: #FFFFFF;
                        font-size: 3vw;
                        font-weight: bolder;

                        &:hover {
                            background-color: #AA0A0A;
                        }
                    }
                    & > #timWarning {
                        margin-top: 2%;
                        width: 93.2%;
                        height: 17.5%;
                        border-radius: 0.75vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #72A53E;
                        color: #FFFFFF;
                        font-size: 3vw;
                        font-weight: bolder;
                        margin-bottom: 1.5%;

                        &:hover {
                            background-color: #507B24;
                        }
                    }

                }   
            }
        }
    /*menu pequeño de opciones*/
        .menu_item{
            width: 80%;
            height: 10%;
            position: absolute;
            z-index: 1000;
            background-color: #FFFFFF;
            margin: 80% 10% 0% 10%;
            border-radius: 2vw;
            border: 0.2vw #6e6e6e8f solid;
            box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);
        }
        .sub_account{
            width: 100%;
            height: 85%;
            & > h2 {
                margin: 2.5% 10% -5% 10%;
                font-size: 3vw;
                font-weight: 100; 
                text-align: center;
            }
            & > #yesdelete {
                margin: 0% 7% 5% 17% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #72A53E;
                color: #FFFFFF;
                font-size: 3vw;
                font-weight: bolder;

                &:hover {
                    background-color: #507B24;
                }
            }
            & > #nodelete {
                margin: 0% 17% 5% 0% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #FD0000;
                color: #FFFFFF;
                font-size: 3vw;
                font-weight: bolder;

                &:hover {
                    background-color: #AA0A0A;
                }
            }
            & > #yesclose {
                margin: 0% 7% 5% 17% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #72A53E;
                color: #FFFFFF;
                font-size: 3vw;
                font-weight: bolder;

                &:hover {
                    background-color: #507B24;
                }
            }
            & > #noclose {
                margin: 0% 17% 5% 0% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #FD0000;
                color: #FFFFFF;
                font-size: 3vw;
                font-weight: bolder;

                &:hover {
                    background-color: #AA0A0A;
                }
            }
            & > #delWarning {
                margin: 0% 7% 5% 17% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #72A53E;
                color: #FFFFFF;
                font-size: 3vw;
                font-weight: bolder;

                &:hover {
                    background-color: #507B24;
                }
            }
            & > #no_warning {
                margin: 0% 17% 5% 0% ;
                width: 28%;
                height: 30%;
                border-radius: 0.75vw;
                border: 0.2vw #6e6e6e8f solid;
                background-color: #FD0000;
                color: #FFFFFF;
                font-size: 3vw;
                font-weight: bolder;

                &:hover {
                    background-color: #AA0A0A;
                }
            }
        }
        /*account*/
            .account {
                width: 100%;
                height: 100%;
                & > h2 {
                    margin: 13% 10% 0% 10%;
                    font-size: 3.5vw;
                    font-weight: 100;
                    font-weight: bold;
                }
                & > #no_account{
                    position: absolute;
                    top: 2.5%;
                    right: 1.5%;
                    width: 4vh;
                    height: 4vh;
                    border-radius: 100vw;
                    background-color: transparent;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;
                    align-items: center;
                    border: 1px transparent solid;

                    &:hover {
                        background-color: #6e6e6e27;
                    }
                
                    & > img {
                        width: 60%;
                        height: 60%;
                    }
                }
                & > p {
                    margin-left: 10%;
                    margin-top: 0%;
                    margin-bottom: 0%;
                    padding: 0%;
                    font-size: 3vw;
                }
                & > input {
                    margin-left: 10%;
                    margin-bottom: 2%;
                    margin-top: 0%;
                    width: 80%;
                    height: 7%;
                    border-radius: 1vw;
                    border: 0.2vw #6e6e6e8f solid;
                    font-size: 3vw;
                }
                & > #deleteaccount {
                    margin-top: 3.5vh;
                    margin-left: 10%;
                    width: 81.25%;
                    height: 9%;
                    border-radius: 1vw;
                    border: 0.2vw #6e6e6e8f solid;
                    background-color: #FD0000;
                    color: #FFFFFF;
                    font-size: 3vw;
                    font-weight: bolder;

                    &:hover {
                        background-color: #AA0A0A;
                    }
                }
                & > #closeaccount {
                    margin-top: 3.5vh;
                    margin-left: 10%;
                    width: 81.25%;
                    height: 9%;
                    border-radius: 1vw;
                    border: 0.2vw #6e6e6e8f solid;
                    background-color: #72A53E;
                    color: #FFFFFF;
                    font-size: 3vw;
                    font-weight: bolder;

                    &:hover {
                        background-color: #507B24;
                    }
                }
                & > #Reportes {
                    margin-top: 1.5vh;
                    margin-left: 10%;
                    width: 35.62%;
                    height: 8%;
                    border-radius: 1vw;
                    border: 0.2vw #6e6e6e8f solid;
                    background-color: #3E85BF;
                    color: #FFFFFF;
                    font-size: 3vw;
                    font-weight: bolder;
                    
                    &:hover {
                        background-color: #25406B;
                    }
                }
                & > #Incidencias {
                    width: 36.6%;
                    height: 8%;
                    margin-left: 8.5%;
                    border-radius: 1vw;
                    border: 0.2vw #6e6e6e8f solid;
                    background-color: #FF9000;
                    color: #FFFFFF;
                    font-size: 3vw;
                    font-weight: bolder;
                    
                    &:hover {
                        background-color: #B0680A;
                    }  
                }
            }
        /*warning*/
            .warning {
                margin: 75% 10% 10% 10% ;
                width: 80%;
                height: 17.5%;
                position: absolute;
                z-index: 1000;
                background-color: #FFFFFF;
                border-radius: 2vw;
                border: 0.2vw #6e6e6e8f solid;
                box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);
                & > h2{
                    margin: 4% 10% 0% 10%;
                    font-size: 3.5vw;

                } 
                & > #closewarning{
                    position: absolute;
                    top: 2.5%;
                    right: 1.5%;
                    width: 3vh;
                    height: 3vh;
                    border-radius: 100vw;
                    border: 0.2vw #6e6e6e8f solid;
                    background-color: transparent;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;
                    align-items: center;
                    border: 1px transparent solid;

                    &:hover {
                        background-color: #6e6e6e27;
                    }
    
                    & > img {
                        width: 70%;
                        height: 70%;
                    }
                }
            }
            /*warning select*/
            #warning_select{
                display: grid;
                justify-content: center;
                align-items: center;
                grid-template-columns: repeat(4, 25%); 
                gap: 10px; 
                width: 80%;
                height: 70%; 
                margin: -5% 10% 0% 10%;
                & > button {
                    padding: 20px;
                    border-radius: 10px;
                    background-color: transparent;
                    height: 80%;
                    width: 120%;
                    border: 1px solid transparent;
                    text-align: center;
                    align-items: center;

                    & > img {
                        width: 80%;
                        height: auto;
                        border-radius: 50%;
                        padding: 6%;
                        color: #FFFFFF;
                    }
                    & > h3 {
                        margin: 0%;
                        font-size: 2vw;
                        font-weight: 100;
                        text-align: center;
                        padding: 0%;
                        width: 100%;
                    }
                    & > #green {
                        background-color: #72A53E;
                    }
                    & > #red {
                        background-color: #FD0000;
                    }
                    & > #blue {
                        background-color: #1361A1;
                    }
                    & > #yellow {
                        background-color: #FDAD02;
                    }
                }
            }
            /*warning add y incident*/
            .adddel_warning{
                height: 85%;
                width: 100%;
                & > h2 {
                    margin: 5% 10% 0% 10%;
                    font-size: 3.5vw; 
                }
                & > #no_warning{
                    position: absolute;
                    top: 2.5%;
                    right: 1.5%;
                    width: 4vh;
                    height: 4vh;
                    border-radius: 100vw;
                    background-color: transparent;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;
                    align-items: center;
                    border: 1px transparent solid;

                    &:hover {
                        background-color: #6e6e6e27;
                    }
            
                    & > img {
                        width: 60%;
                        height: 60%;
                    }
                }
                & > form {
                    margin: 0% 10% 0% 10%;
                    width: 80%;
                    height: 90%;
                    overflow-y: scroll;
                    & > label {
                        margin-top: 2%;
                        padding: 0%;
                        font-size: 3vw;
                    }
                    & > input {
                        width: 90%;
                        height: 5.5%;
                        border-radius: 1vw;
                        border: 0.2vw #6e6e6e8f solid;
                        font-size: 3vw; 
                    }
                    & > textarea {
                        width: 90%;
                        height: 35%;
                        resize: none;
                        font-size: 3vw;
                    }
                    & > select {
                        width: 91%;
                        height: 8%;
                        border-radius: 1vw;
                        border: 0.2vw #6e6e6e8f solid;
                        font-size: 3vw;  
                    }
                    & > #yes_addwarning {
                        width: 91.25%;
                        height: 9%;
                        border-radius: 1vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #72A53E;
                        color: #FFFFFF;
                        font-size: 3vw;
                        font-weight: bolder;
                        margin-bottom: 3%;

                        &:hover {
                            background-color: #507B24;
                        }
                    }
                    & > #clear_addwarning {
                        width: 91.25%;
                        height: 9%;
                        border-radius: 1vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #3E85BF;
                        color: #FFFFFF;
                        font-size: 3vw;
                        font-weight: bolder;

                        &:hover {
                            background-color: #25406B;
                        }
                    }
                }
            }
        /*bug*/   
            .bug {
                height: 90%;
                width: 100%;
                & > h2 {
                    margin: 5% 10% 0% 10%;
                    font-size: 3.5vw; 
                }
                & > #closebug{
                    position: absolute;
                    top: 2.5%;
                    right: 1.5%;
                    width: 4vh;
                    height: 4vh;
                    border-radius: 100vw;
                    background-color: transparent;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;
                    align-items: center;
                    border: 1px transparent solid;

                    &:hover {
                        background-color: #6e6e6e27;
                    }
                
                    & > img {
                        width: 60%;
                        height: 60%;
                    }
                }
                & > form {
                    margin: 0% 10% 0% 10%;
                    width: 80%;
                    height: 90%;
                    overflow-y: scroll;
                    & > label {
                        margin-top: 2%;
                        padding: 0%;
                        font-size: 3vw;
                    }
                    & > input {
                        width: 90%;
                        height: 5.5%;
                        border-radius: 1vw;
                        border: 0.2vw #6e6e6e8f solid;
                        font-size: 3vw; 
                    }
                    & > textarea {
                        width: 90%;
                        height: 35%;
                        resize: none;
                        font-size: 3vw;
                    }
                    & > select {
                        width: 91%;
                        height: 8%;
                        border-radius: 1vw;
                        border: 0.2vw #6e6e6e8f solid;
                        font-size: 3vw;  
                    }
                    & > #savebug {
                        width: 91.25%;
                        height: 9%;
                        border-radius: 1vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #72A53E;
                        color: #FFFFFF;
                        font-size: 3vw;
                        font-weight: bolder;
                        margin-bottom: 3%;
                        
                        &:hover {
                            background-color: #507B24;
                        }
                    }
                    & > #clearebug {
                        width: 91.25%;
                        height: 9%;
                        border-radius: 1vw;
                        border: 0.2vw #6e6e6e8f solid;
                        background-color: #3E85BF;
                        color: #FFFFFF;
                        font-size: 3vw;
                        font-weight: bolder;

                        &:hover {
                            background-color: #25406B;
                        }
                    }
                }
            }    
        /*info*/
            .info{
                width: 100%;
                height: 95%;
                & > h2 {
                    margin: 5% 10% 0% 10%;
                    font-size: 3.5vw;
                }
                & > #closeinfo{
                    position: absolute;
                    top: 2.5%;
                    right: 1.5%;
                    width: 4vh;
                    height: 4vh;
                    border-radius: 100vw;
                    background-color: transparent;
                    color: #FFFFFF;
                    font-size: 1.75vw;
                    font-weight: bolder;
                    align-items: center;
                    border: 1px transparent solid;

                    &:hover {
                        background-color: #6e6e6e27;
                    }
                
                    & > img {
                        width: 60%;
                        height: 60%;
                    }
                }
                & > div {
                    margin: 0% 10% 0% 10%;
                    width: 80% ;
                    height: 85%;
                    padding: 0%;
                    overflow-y: scroll;
                    & > p {
                        font-size: 2.75vw; 
                        padding-right: 4%; 
                    }
                    & > h3 {
                        font-size: 2.75vw;
                        font-weight: bold;  
                    }
                    & > ol > li {
                        font-size: 2.75vw;
                        padding-right: 4%;
                    }
                }
            }
    /*menu_lateral
    --------------
    --------------*/
        #bot_men_lat {
            position: fixed; 
            z-index: 1000;
            top: 0; 
            left: 0;
            margin: 38% 0 0 2%;
            width: 5.5%;
            height: 52.5%;
            background-color: #FFFFFF;
            border-radius: 15vw 35vw 35vw 15vw;
            border: solid #6E6E6E 1px;
            transition: transform 1s ease-out; 
        }

        .deslizamiento_boton_lat {
            animation: deslizamiento_boton_lat 1s ease-out forwards;
        }
        
        @keyframes deslizamiento_boton_lat {
            from {
                transform: translateX(0); /* Empieza en su posición original */
            }
            to {
                transform: translateX(89.5vw); /* Mueve el botón fuera de la pantalla */
            }
        }
        
        .deslizamiento_boton_lat_inv {
            animation: deslizamiento_boton_lat_inv 1s ease-out forwards;
        }
        
        @keyframes deslizamiento_boton_lat_inv {
            from {
                transform: translateX(89.5vw); /* Empieza fuera de la pantalla */
            }
            to {
                transform: translateX(0); /* Vuelve a su posición original */
            }
        }

        #men_lat {
            display: none;
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            margin: 15% 0 0 12%;
            width: 78%;
            height: 73%;
            border-radius: 5vw;
            background-color:#FFFFFF;
            border: 1px #6E6E6E solid;
            box-shadow: -1vh 1vh 2.5vh rgba(0, 0, 0, 0.479);
            padding: 0%;
            transition: transform 1s ease-out;

            & > form {
                width: 90%;
                height: 80%;
                margin: 0 0 0 8%;
                overflow-y: scroll;
                border-radius: 2.5vw;

                & > label {
                    width: 90%;
                    font-size: 3.75vW;
                    padding-bottom: 10%;
                }
                & > select{
                    width: 96%;
                    height: 9%;
                    border-radius: 2vw;
                    border: solid black 1px;
                    margin-bottom: 0.25%;
                    background-color: #FFFFFF;
                    padding-bottom: 0.1%;
                    font-size: 3.75vW;
                }
                & > input {
                    width: 94.5%;
                    height: 8.5%;
                    border-radius: 2vw;
                    border: solid black 1px;
                    margin-bottom: 0.25%;
                    background-color: #FFFFFF;
                    padding-bottom: 0.1%;
                    font-size: 3.75vW;
                }
                & > button {
                    color: #FFFFFF;
                    position: absolute;
                    bottom: 3%;
                    left: 7%;
                    width: 85%;
                    height: 8%;
                    font-size: 5vw;
                    border-radius: 2vw;
                    border: 1px rgba(0, 0, 0, 0) solid;
                    background-color: #72A53E;
                    font-weight: bolder;
                    box-shadow: -1px 2px 5px #6e6e6e94;

                    &:hover {
                        background-color: #507B24;
                    }
                }
            }
            & > p {
                margin: 4% 0 0 8%;
                width: 90%;
                font-size: 4.5vw;
            }
        }

        .aparicion_menu_lat{
            display: block;
            animation: aparicion_menu_lat 1s ease-out forwards;
            }
                @keyframes aparicion_menu_lat {
                    from {
                    transform: translateX(-120%); /* Empieza fuera del área visible */
                    opacity: 0; /* Opcional: aparece gradualmente */
                    } to {
                    transform: translateX(0); /* Termina en su posición original */
                    opacity: 1; /* Opcional: completamente visible */
                    }
                }
            .aparicion_menu_lat_inv{
                display: block;
                animation: aparicion_menu_lat_inv 1s ease-out forwards;
            }
                @keyframes aparicion_menu_lat_inv {
                    from {
                    transform: translateX(0); /* Empieza fuera del área visible */
                    opacity: 1; /* Opcional: aparece gradualmente */
                    } to {
                    transform: translateX(-120%); /* Termina en su posición original */
                    opacity: 0; /* Opcional: completamente visible */
                    }
                }

    /*menu_abajo
    ------------
    ------------*/
    .menu_abajo {
        bottom: 0;
        left: 0;
        height: 14%;
        width: 97%;
        margin: 0 1% 0 1% ;
        border-radius: 15vw 15vw 0 0;
        margin: 0 1% 0 1% ;
        border-top: 0.5vh #6e6e6e8f solid;
        border-left: 0.75vw #6e6e6e8f solid;
        border-right: 0.75vw #6e6e6e8f solid;
        position: absolute;
        background-color:#FFFFFF;
        z-index: 10000;

        & > div {
            top: 8%;
            left: 1%;
            width: 98.5%;
            height: 83%;
            position: absolute;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            z-index: 10000;

            & > div {
                width: 100%;
                height: 90%;  

                & > button {
                    width: 98%;
                    height: 100%;
                    border: 0px solid black;
                    background-color: transparent;

                    &:hover{
                        background-color: #bebebe46;
                    }

                    & > img {
                        width: 45%;
                        height: 65%;
                        margin: 0% 0 0 5% ;                        
                        padding: 0%;
                        object-fit: contain;
                    }
                    & > p {
                        font-size: 1.6vh;
                        text-align: center;
                        margin: 0;
                        padding: 5% 0 10% 0;
                        color: #6E6E6E;
                    }
                }
                & > .ultimo {
                    border-radius: 0 12vw 0 0;
                    padding-left: 1%;
                }
                & > .mg_lad {
                    padding-left: 1%;
                    padding-right: 1%;
                }
                & > .primero {
                    border-radius: 12vw 0 0 0;
                    padding-right: 1%;
                }
            }
            & > .borde {
                border-right: 2px #6E6E6E solid;
            }
        } 
    }
}