div#hor-bar{
    display: none;
}
main section.form{
    padding-top: 1rem;
}
#popup .message{
    padding:0;
    min-width:16rem;
    place-self: center;
    width: 90%;
    max-width: 350px;
}
#popup .content{
    display:grid;
    place-content: center;
    justify-items: center;
    padding:0 !important;
}
.tabla{
    min-width: 400px;
}
.tableContainer{
    overflow:hidden;
    overflow-x:scroll;
}
.sincompensacion.show,.concompensacion.show{
    display:grid;
}


@media (max-width:992px){
    #login  .login-wrap .login-footer{
        position:fixed;
        bottom:0;
    }
    #primary.login #fondo-container{
        display:none;
    }
    main #login{
        width:100vw;
        height:100vh;
        left:0;
        top:0;
        min-height: 100vh;
    }
    .login-wrap{
        display:grid;
        grid-template-rows: 250px 110px 238px 28px 1fr;
    }
    #login .login-wrap .line{
        margin:0;
    }
    main section.form .formulario-wrap{
    display:grid;
    grid-template-areas:
    "encabezado"
    "datos"
    "solicitud";
    grid-template-rows: 74px 1fr 1fr;
    width:38rem;
    padding:0px 8px;
    grid-template-columns:36.5rem;
    
    
        &>.encabezado{
            grid-area:encabezado;
        }
        &>.datos-colaborador{
            grid-area:datos;
            display: grid;
            grid-template-rows: repeat(7,1fr);
            &>.campo{
                display:flex;
                flex-direction: column;
                &>.user-dato{
                    padding:0 4px;
                    width:36.5rem;
                }
            }
        }
        &>.solicitud{
            grid-area:solicitud
            
        }
    }
    #formulario-permiso .formulario-wrap{
        grid-template-rows: 74px 1fr 6rem 22rem 0fr;
        &:has(.sincompensacion.show){
            grid-template-rows: 74px 1fr 6rem 28rem 0fr;
        }
        &:has(.concompensacion.show){
            grid-template-rows: 74px 1fr 6rem 28rem 0fr;
        }
        
    }
    .formulario-wrap .encabezado span{
        width:auto;
        font-size: 24px;
    }
    .form .campo.title span{
        width: 30rem;
    }
}
@media (max-width:768px){
    #floating-wrapper{
        display:none;
    }
    #login .login-wrap .logo{
        margin:8px auto;
    }
    #login .login-wrap .logo img{
        height:150px;
        width:300px
    }
    .login-wrap{
        grid-template-rows: 180px 70px 218px 28px 1fr;
        grid-template-columns:100%;
    }
    main section.form .formulario-wrap{
    width: 28rem;
    grid-template-columns: 26.5rem;
    &>.datos-colaborador{
            &>.campo{
                &>.user-dato{
                    width:26.5rem;
                }
            }
        }
    }
    #formulario-permiso .formulario-wrap{
        grid-template-rows: 74px 1fr 6rem 4rem 1fr;
        &:has(.permiso-horas.active){
            grid-template-rows: 74px 1fr 6rem 12rem 0fr;
            &:has(.sincompensacion.show){
                grid-template-rows: 74px 1fr 6rem 39rem 0fr;
            }
             &:has(.concompensacion.show){
                grid-template-rows: 74px 1fr 6rem 47rem 0fr;
            }
        }
         &:has(.permiso-dias.active){
            grid-template-rows: 74px 1fr 6rem 41rem 0fr;
        }
    }
    .form .permiso-dias.active{
        display:grid;
        grid-template-rows: 3rem 4rem 6rem 17rem 20rem;
        &>.campo{
            display:grid;
            grid-template-rows: 2rem 7rem;
            width: 20.5rem;
            &>.campos-multiples{
                display: grid;
                align-items:center;
                grid-template-columns: 9rem;
                width: 100%;
                height: 100%;
                grid-template-rows: 3rem 3rem 3rem;
            }
             &>.conGoceSueldo{
                margin-left:2rem !important;
            }
        }
       
    }
    .campos-multiples .campo-select.select-tiempo{
        grid-column: 2/2;
        grid-row: 1/1;
    }
    .campos-multiples .fecha-regresar.hasDatepicker{
        grid-column:2/2;
        grid-row:2/2;
    }
    .campos-multiples .ui-datepicker-trigger + span{
        grid-column: 1/ span 2;
        text-indent: 1rem;
    }
    .campos-multiples .tiempo-ausento.numero +span{
        grid-column: 1/ span 2;
        text-indent: 1rem;
    }
    .separator.dots{
        display:none;
    }
    .label.description{
        grid-column:1/1;
        grid-row: 2/2;
    }
    .goce-select.campo.active{
        display:grid;
        grid-template-areas:
        'label label'
        'input input'
        '. labelDescription';
        grid-template-columns: 1rem;
        grid-template-rows: 2.5rem 2rem 1rem;
        justify-content:start;
        &>span{
            grid-area:label;
        }
    }
    .campo-select{
        grid-area:input;
        width:8rem !important;
        margin-left:0 !important;
     }
     .form .permiso-horas .hasDatepicker{
         width:17rem;
     }
    .campo-select + small{
        grid-area:labelDescription;
    }
    .form .permiso-horas.active{
        display:grid;
        grid-template-rows: 3rem 3rem 4rem 18rem;
        &:has(.sincompensacion.show){
            grid-template-rows: 3rem 3rem 4rem 30rem;
        }
         &:has(.concompensacion.show){
            grid-template-rows: 3rem 3rem 34rem 30rem;
        }
    }
    .campo:has(>input[type="radio"]) label{
        display:grid;
        grid-template-columns: 2rem  19rem;
    }
    .sincompensacion{
        grid-template-rows: 9rem 14rem 5rem;
    }
    .concompensacion{
        grid-template-rows: 14rem 14rem 5rem;
    }
    .concompensacion,.sincompensacion{
        grid-template-columns: 25rem;
        &>.campo:has(.campos-multiples){
            display:grid;
            grid-template-rows:2.5rem 1fr;
        }
        &>.campo .campos-multiples{
            display:grid;
            grid-template-rows: repeat(4,2rem);
            grid-template-columns: 9rem 9rem;
            position:relative;
        }
        .datepick.fecha-ausentar{
            grid-row:1/1;
            grid-column: 1/1;
        }
        .ui-datepicker-trigger{
            position:absolute;
            top:0;
            left: 16.8rem;
        }
        &>.campo .campos-multiples .tiempo-ausento+span{
            grid-row: 2/2;
            grid-column: 1/1;
        }
        &>.campo .campos-multiples .fecha-inicio+span{
            grid-row: 4/4;
            grid-column: 1/1;
        }
       &>.campo .campos-multiples .campo-select.select-tiempo.fecha-inicio,
        .campo .campos-multiples .campo-select.select-tiempo.fecha-inicio-sin{
            grid-column: 2/2;
            grid-row: 3/3;
        }
        &>.campo .campos-multiples .campo-select.select-tiempo.fecha-final,
        .campo .campos-multiples .campo-select.select-tiempo.fecha-final-sin{
            grid-column: 2/2;
            grid-row: 5/5;
        }
       &>.campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-inicio,
        .campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-inicio-sin{
            grid-column: 2/2;
            grid-row: 3/3;
        }

        &>.campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-final,
        .campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-final-sin{
            grid-column: 2/2;
            grid-row: 5/5;
        }

        &>.campo .campos-multiples .campo-select.select-tiempo.fecha-inicio:has(.fecha-inicio-com-hora),
        .campo .campos-multiples .campo-select.select-tiempo.fecha-inicio-sin:has(.fecha-inicio-sin-hora){
            grid-column: 1/1;
            grid-row: 3/3;
        }
        &>.campo .campos-multiples .campo-select.select-tiempo.fecha-final:has(.fecha-final-com-hora),
        .campo .campos-multiples .campo-select.select-tiempo.fecha-final-sin:has(.fecha-final-sin-hora){
            grid-column: 1/1;
            grid-row: 5/5;
        }
       &>.campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-inicio:has(.fecha-inicio-hora),
        .campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-inicio-sin:has(.fecha-inicio-sin-hora){
            grid-column: 1/1;
            grid-row: 3/3;
        }

        &>.campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-final:has(.fecha-final-hora), 
        .campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-final-sin:has(.fecha-final-sin-hora){
            grid-column: 1/1;
            grid-row: 5/5;
        }
    }
    .campo .txtMotivo,.campo .txtMotivo2{
        float:left !important;
        max-width:25rem;
    }
}
@media (max-width:576px){
    #login .login-wrap .logo{
        margin:8px auto;
    }
    #login .login-wrap .logo img{
        height:100px;
        width:200px
    }
    .login-wrap{
        grid-template-rows: 130px 70px 218px 28px 1fr;
        grid-template-columns:100%;
    }
    main section.form .formulario-wrap{
    width:22rem;
    grid-template-columns:20.5rem;
        &>.datos-colaborador{
            &>.campo{
                &>.user-dato{
                    width:20.5rem;
                }
            }
        }
    }
    #formulario-permiso .formulario-wrap{
        /* grid-template-rows: 74px 1fr 6rem 0rem 1fr; */
        grid-template-rows: 74px 1fr auto auto auto;
        

        &:has(.permiso-horas.active){
            grid-template-rows: 74px 1fr 6rem 12rem 0fr;
            &:has(.sincompensacion.show){
                grid-template-rows: 74px 1fr 6rem 50rem 0fr; 
            }
             &:has(.concompensacion.show){
                grid-template-rows: 74px 1fr 6rem 50rem 0fr; 
            }
        }
         &:has(.permiso-dias.active){
            grid-template-rows: 74px 1fr 6rem 41rem 0fr;
        }
    }
    .form .permiso-dias.active{
        display:grid;
        grid-template-rows: 3rem 4rem 6rem 16rem 12rem;
        &>.campo{
            display:grid;
            grid-template-rows: 2rem 7rem;
            width: 20.5rem;
            &>.campos-multiples{
                display: grid;
                align-items:center;
                grid-template-columns: 9rem;
                width: 100%;
                height: 100%;
                grid-template-rows: 3rem 3rem 3rem;
            }
             &>.conGoceSueldo{
                margin-left:2rem !important;
            }
        }
       
    }
    .campos-multiples .campo-select.select-tiempo{
        grid-column: 2/2;
        grid-row: 2/2;
    }
    .campos-multiples .fecha-regresar.hasDatepicker{
        grid-column:2/2;
        grid-row:3/3;
    }
    .campos-multiples .campo-select.select-tiempo:has(.fecha-final-hora){
        grid-column: 1/1;
        grid-row: 2/2;
    }

    .campos-multiples .ui-datepicker-trigger + span{
        grid-column:1/ span 2;
        text-indent: 1rem;
    }
    .campos-multiples .tiempo-ausento.numero +span{
        grid-column: 1/ span 2;
        text-indent: 1rem;
    }
    .separator.dots{
        display:none;
    }
    .label.description{
        grid-column:1/1;
        grid-row: 3/3;
    }
    .goce-select.campo.active{
        display:grid;
        grid-template-areas:
        'label label'
        'input input'
        '. labelDescription';
        grid-template-columns: 1rem;
        grid-template-rows: 2.5rem 2rem 1rem;
        justify-content:start;
        &>span{
            grid-area:label;
        }
    }
    .campo-select{
        grid-area:input;
        width:8rem !important;
        margin-left:0 !important;
     }
    .form .permiso-horas .hasDatepicker{
         width:15rem;
     }
    .campo-select + small{
        grid-area:labelDescription;
    }
    .form .permiso-horas.active{
        display:grid;
        grid-template-rows: 3rem 3rem 4rem 4rem;
        &:has(.sincompensacion.show){
            grid-template-rows: 3rem 3rem 4rem 30rem;
        }
         &:has(.concompensacion.show){
            grid-template-rows: 3rem 3rem 34rem 30rem;
        }
    }
    .campo:has(>input[type="radio"]) label{
        display:grid;
        grid-template-columns: 2rem  19rem;
    }
    .sincompensacion{
        grid-template-rows: 11rem 14rem 5rem;
    }
    .concompensacion{
        grid-template-rows: 14rem 14rem 5rem;
    }
    .concompensacion,.sincompensacion{
        grid-template-columns: 19rem;
         &>.campo:has(.campos-multiples){
         display:grid;
         grid-template-rows: 2.5rem 1fr;
        }
        &>.campo .campos-multiples{
         display:grid;
         grid-template-rows: repeat(4,2rem);
         grid-template-columns:  9rem 9rem;
         position:relative;
        }
        &>.campo:first-child .campos-multiples{
            grid-template-rows: repeat(4,2rem);
        }
        .datepick.fecha-ausentar{
         grid-row:1/1;
         grid-column: 1/1;
        }
        .ui-datepicker-trigger{
         position:absolute;
         top:0;
         left: 11.8rem;
        }
     &>.campo .campos-multiples .tiempo-ausento+span{
            grid-row: 2/2;
            grid-column: 1/1;
        }
        &>.campo .campos-multiples .fecha-inicio+span{
            grid-row: 4/4;
            grid-column: 1/1;
        }
       &>.campo .campos-multiples .campo-select.select-tiempo.fecha-inicio,
        .campo .campos-multiples .campo-select.select-tiempo.fecha-inicio-sin{
            grid-column: 2/2;
            grid-row: 3/3;
        }
        &>.campo .campos-multiples .campo-select.select-tiempo.fecha-final,
        .campo .campos-multiples .campo-select.select-tiempo.fecha-final-sin{
            grid-column: 2/2;
            grid-row: 5/5;
        }
       &>.campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-inicio,
        .campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-inicio-sin{
            grid-column: 2/2;
            grid-row: 3/3;
        }

        &>.campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-final,
        .campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-final-sin{
            grid-column: 2/2;
            grid-row: 5/5;
        }

        &>.campo .campos-multiples .campo-select.select-tiempo.fecha-inicio:has(.fecha-inicio-com-hora),
        .campo .campos-multiples .campo-select.select-tiempo.fecha-inicio-sin:has(.fecha-inicio-sin-hora){
            grid-column: 1/1;
            grid-row: 3/3;
        }
        &>.campo .campos-multiples .campo-select.select-tiempo.fecha-final:has(.fecha-final-com-hora),
        .campo .campos-multiples .campo-select.select-tiempo.fecha-final-sin:has(.fecha-final-sin-hora){
            grid-column: 1/1;
            grid-row: 5/5;
        }
       &>.campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-inicio:has(.fecha-inicio-hora),
        .campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-inicio-sin:has(.fecha-inicio-sin-hora){
            grid-column: 1/1;
            grid-row: 3/3;
        }

        &>.campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-final:has(.fecha-final-hora), 
        .campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-final-sin:has(.fecha-final-sin-hora){
            grid-column: 1/1;
            grid-row: 5/5;
        }
    }
    .campo .txtMotivo,.campo .txtMotivo2{
        float:left !important;
        max-width:19rem;
    }
}
    


@media (max-width:368px){
    #login .login-wrap .logo{
        margin:8px auto;
    }
    #login .login-wrap .logo img{
        height:50px;
        width:100px
    }
    .login-wrap{
        grid-template-rows: 70px 60px 218px 28px 1fr;
        grid-template-columns:100%;
    }
    main section.form .formulario-wrap{
    width:18rem;
    grid-template-columns:16.5rem;
        &>.datos-colaborador{
            &>.campo{
                &>.user-dato{
                    width:16.5rem;
                }
            }
        }
    }
    .form .campo.title span{
        width: 22rem;
    }
    #formulario-permiso .formulario-wrap{
        grid-template-rows: 74px 1fr 6rem 4rem 1fr;
        &:has(.permiso-horas.active){
            grid-template-rows: 74px 1fr 6rem 12rem 0fr;
            &:has(.sincompensacion.show){
                grid-template-rows: 74px 1fr 6rem 39rem 0fr;
            }
             &:has(.concompensacion.show){
                grid-template-rows: 74px 1fr 6rem 47rem 0fr;
            }
        }
         &:has(.permiso-dias.active){
            grid-template-rows: 74px 1fr 6rem 41rem 0fr;
        }
    }
    .form .permiso-dias.active{
        display:grid;
        grid-template-rows: 3rem 7rem 9rem 17rem 14rem;
        &>.campo{
            display:grid;
            grid-template-rows: 2rem 7rem;
            width: 20.5rem;
            &>.campos-multiples{
                display: grid;
                align-items:center;
                grid-template-columns: 9rem 11rem;
                width: 100%;
                height: 100%;
                grid-template-rows: 1rem 3rem 1rem;
            }
            &>.conGoceSueldo{
                margin-left:2rem !important;
            }
        }
    
    }
    .campos-multiples .campo-select.select-tiempo{
        grid-column: 1/span 2;
        grid-row: 2/2;
    }
    .campos-multiples .fecha-regresar.hasDatepicker{
        grid-column:1/span2;
        grid-row:4/4;
    }
    .campos-multiples .ui-datepicker-trigger + span{
        grid-column: 1/ span 2;
        text-indent: 1rem;
    }
    .campos-multiples .tiempo-ausento.numero +span{
        grid-column: 1/ span 2;
        text-indent: 1rem;
    }
    .separator.dots{
        display:none;
    }
    .label.description{
        grid-column:1/span 2;
        grid-row: 3/3;
    }
    .campo-select{
        width: 7rem !important;
    }
     .form .permiso-horas.active{
        display:grid;
        grid-template-rows: 3rem 3rem 4rem 4rem;
        &:has(.sincompensacion.show){
            grid-template-rows: 3rem 3rem 4rem 30rem;
        }
         &:has(.concompensacion.show){
            grid-template-rows: 3rem 3rem 34rem 30rem;
        }
    }
    .campo:has(>input[type="radio"]) label{
        display:grid;
        grid-template-columns: 2rem  19rem;
    }
    .sincompensacion{
        grid-template-rows: 8rem 14rem 5rem;
    }
    .concompensacion{
        grid-template-rows: 14rem 14rem 5rem;
    }
    .concompensacion,.sincompensacion{
        grid-template-columns: 15rem;
         &>.campo:has(.campos-multiples){
         display:grid;
         grid-template-rows: 2.5rem 1fr;
        }
        &>.campo .campos-multiples{
         display:grid;
         grid-template-rows: repeat(4,2rem);
         grid-template-columns: 8rem 8rem;
         position:relative;
        }
        &>.campo:first-child .campos-multiples{
            grid-template-rows: repeat(4,2rem);
        }
        .datepick.fecha-ausentar{
         grid-row:1/1;
         grid-column: 1/1;
        }
        .ui-datepicker-trigger{
         position:absolute;
         top:0;
         left: 14.8rem;
        }
        &>.campo .campos-multiples .tiempo-ausento+span{
            grid-row: 2/2;
            grid-column: 1/1;
        }
        &>.campo .campos-multiples .fecha-inicio+span{
            grid-row: 4/4;
            grid-column: 1/1;
        }
       &>.campo .campos-multiples .campo-select.select-tiempo.fecha-inicio,
        .campo .campos-multiples .campo-select.select-tiempo.fecha-inicio-sin{
            grid-column: 2/2;
            grid-row: 3/3;
        }
        &>.campo .campos-multiples .campo-select.select-tiempo.fecha-final,
        .campo .campos-multiples .campo-select.select-tiempo.fecha-final-sin{
            grid-column: 2/2;
            grid-row: 5/5;
        }
       &>.campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-inicio,
        .campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-inicio-sin{
            grid-column: 2/2;
            grid-row: 3/3;
        }

        &>.campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-final,
        .campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-final-sin{
            grid-column: 2/2;
            grid-row: 5/5;
        }

        &>.campo .campos-multiples .campo-select.select-tiempo.fecha-inicio:has(.fecha-inicio-com-hora),
        .campo .campos-multiples .campo-select.select-tiempo.fecha-inicio-sin:has(.fecha-inicio-sin-hora){
            grid-column: 1/1;
            grid-row: 3/3;
        }
        &>.campo .campos-multiples .campo-select.select-tiempo.fecha-final:has(.fecha-final-com-hora),
        .campo .campos-multiples .campo-select.select-tiempo.fecha-final-sin:has(.fecha-final-sin-hora){
            grid-column: 1/1;
            grid-row: 5/5;
        }
       &>.campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-inicio:has(.fecha-inicio-hora),
        .campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-inicio-sin:has(.fecha-inicio-sin-hora){
            grid-column: 1/1;
            grid-row: 3/3;
        }

        &>.campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-final:has(.fecha-final-hora), 
        .campo:first-child .campos-multiples .campo-select.select-tiempo.fecha-final-sin:has(.fecha-final-sin-hora){
            grid-column: 1/1;
            grid-row: 5/5;
        }
    }
    .campo .txtMotivo,.campo .txtMotivo2{
        float:left !important;
        max-width: 15rem;
    }
}