/**FMB - CTRLS*/
/*CREACION: 2022*/
/*MODIFICACIONES: */
/*
2022 - 01 - 04 SE MEJORA DISEÑO DE VISTA
*/

/* 
=========================== 
CONTROLADORES DE FORMS
===========================
*/

.cont-input{ /* Contenedor de Inputs*/
    position: relative;
    width: 100%;
    /* height: 100%; */
    font-family: var(--font)!important;    
}

/*Agregamos el important para que se respete el espaciado abajo en todo escenario*/
.cont-input.float,
.cont-input.float-i{
    margin-bottom: 13px!important;    
}

.cont-input.line,
.cont-input.line-i{
    margin-bottom: 23px;    
}

.input-float,
.input-float-i,
.input-float-dl,
.input-line,
.input-line-i,
.input-line-dl,
.textarea-float{
    width: 100%;
    font-family: var(--font)!important;	
    font-weight: 400;
    font-size: var(--font-size-small);
    line-height: 1.5;
    height: 31px;
    color: var(--text);
    padding-right: 1rem;
    z-index: 1;
}

.input-float,
.input-float-i,
.input-float-dl{    
    border:var(--borde-suave);
    border-radius: .5rem;
    outline: none;    
    background: none;
}

.input-float,
.input-float-dl{
    padding-left: 1.5rem;
}

.input-float-i{
    padding-left: 2.5rem;
}

.input-line,
.input-line-i,
.input-line-dl{
    background: none;
    border-style: none none solid none;
    border-bottom: var(--borde-normal);
    outline: 0px;      
}

.input-line,
.input-line-dl{
    padding-left: 5px;
}

.input-line-i{
    padding-left: 21px;
}

.label-float,
.label-float-i,
.label-float-dl,
.label-line,
.label-line-i,
.label-line-dl,
.label-textarea-float{    
    position: absolute;    
    top: 0.5rem;
    padding: 0 .25rem;
    line-height: 1;
    background: transparent;
    color: var(--gris);
    font-size: 13px!important;
    transition: .3s;
    pointer-events: none;
}

.label-float,
.label-textarea-float,
.label-float-dl{
    left: 1.5rem;
    
}

.label-float-i{
    left: 2.5rem;
}

.label-line,
.label-line-dl{
    left:0;
}

.label-line-i{
    left: 1.5rem;
}

.input-float:focus + .label-float,
.input-float-dl:focus + .label-float-dl{
    left: 1.5rem;    
}

.input-line-i:focus + .label-line-i{
    left: 0;    
}

.input-float:focus + .label-float,
.input-float-i:focus + .label-float-i,
.input-float-dl:focus + .label-float-dl,
.textarea-float:focus + .label-textarea-float{
    top:-.5rem;
    color:var(--text);    
}

.input-line:focus + .label-line,
.input-line-i:focus + .label-line-i,
.input-line-dl:focus + .label-line-dl{
    top:-0.9rem;
    color:var(--text);
}

.input-float:focus + .label-float,
.input-float-i:focus + .label-float-i,
.input-float-dl:focus + .label-float-dl,
.input-line:focus + .label-line,
.input-line-i:focus + .label-line-i,
.input-line-dl:focus + .label-line-dl,
.textarea-float:focus + .label-textarea-float{        
    color:var(--principal-color);
    background: var(--container-color);
    font-size:var(--font-size-extra-small)!important;
    font-weight: var(--font-normal)!important;
    z-index: 10;
    text-transform: uppercase;  
}

.input-float:not(:placeholder-shown) + .label-float,
.input-float-dl:not(:placeholder-shown) + .label-float-dl{
    left: 1.5rem;
}

.input-line-i:not(:placeholder-shown) + .label-line-i{    
    left: 0;
}

.input-float:not(:placeholder-shown) + .label-float,
.input-float:-webkit-autofill + .label-float,
.input-float-i:not(:placeholder-shown) + .label-float-i,
.input-float-i:-webkit-autofill + .label-float-i,
.input-float-dl:not(:placeholder-shown) + .label-float-dl,
.textarea-float:not(:placeholder-shown)+.label-textarea-float{
    top:-.5rem!important; 
}

.input-line:not(:placeholder-shown) + .label-line,
.input-line-i:not(:placeholder-shown) + .label-line-i,
.input-line-dl:not(:placeholder-shown)+ .label-line-dl{
    top:-0.9rem;
}

.input-float:not(:placeholder-shown) + .label-float,
.input-float-i:not(:placeholder-shown) + .label-float-i,
.input-float-dl:not(:placeholder-shown) + .label-float-dl,
.input-line:not(:placeholder-shown) + .label-line,
.input-line-i:not(:placeholder-shown) + .label-line-i,
.input-line-dl:not(:placeholder-shown)+ .label-line-dl,
.textarea-float:not(:placeholder-shown)+.label-textarea-float{
    background: var(--container-color);       
    font-size:var(--font-size-extra-small) !important;
    font-weight: var(--font-normal)!important;
    line-height: 1!important;
    z-index: 10;
    text-transform: uppercase;
}

.input-float-i:not(:placeholder-shown){
    padding-left: 2.5rem;
}

.input-line-i:not(:placeholder-shown){
    padding-left: 1.7rem;
}

.input-float-i:focus{
    padding-left: 2.5rem;
}

.input-line:focus,
.input-line-dl:focus{
    padding: 1rem 5px;
}

.input-line-i:focus{
    padding: 1rem 1.7rem;    
}

.input-line:focus,
.input-line-i:focus,
.input-line-dl:focus{    
    border-color: var(--principal-color);
    color: var(--text);
}

.input-float:focus,
.input-float-i:focus,
.input-float-dl:focus{
    border: 1.5px solid var(--principal-color);
    color: var(--text);
}

.i-bsfield{
    position: relative;
    margin-bottom: 5px;
}

.input-bs-i:focus{
    padding-left: 2.5rem;
    color: var(--text);    
}

.input-bs-i:placeholder-shown{
    padding-left: 2.5rem;    
}

.input-bs-i:not(:placeholder-shown){
    padding-left: 2.5rem;
    color: var(--text);
}

.input-float:disabled + .label-float
.input-float-i:disabled + .label-float-i
.input-float-dl:disabled + .label-float-dl
.input-line:disabled + .label-line
.input-line-i:disabled + .label-line-i
.input-line-dl:disabled + .label-line-dl,
.textarea-float:disabled + .label-textarea-float{
    background: #e9ecef;
}

.input-float:disabled,
.input-float-i:disabled,
.input-float-dl:disabled,
.input-line:disabled,
.input-line-i:disabled,
.input-line-dl:disabled,
.textarea-float:disabled{
    background: #e9ecef;
    color: var(--gris);
}

.input-float:disabled:not(:placeholder-shown) + .label-float,
.input-float-i:disabled:not(:placeholder-shown) + .label-float-i,
.input-float-dl:disabled:not(:placeholder-shown) + .label-float-dl,
.input-line:disabled:not(:placeholder-shown) + .label-line,
.input-line-i:disabled:not(:placeholder-shown) + .label-line-i,
.input-line-dl:disabled:not(:placeholder-shown)+ .label-line-dl,
.textarea-float:disabled:not(:placeholder-shown)+.label-textarea-float{
    background: var(--container-color);
}

.i-bs{
    position:absolute;
    left: 1rem;
    top:55%;
    color: var(--principal-color);
}

.i-float{
    left:16px;
}

.i-line{
    left: 2px;
}

.i-float,
.i-line{
    position: absolute;    
    top: 10%;
    color: var(--principal-color);
}

.i-float.black{
    color:#333;
}

.inp-file-bs::-webkit-file-upload-button{
    color:#fff;
    background-color: var(--principal-color);   
}

.select-float{
    padding-left: 1.5rem;
}

.select-float-i{
    padding-left: 2.5rem;
}

.select-float,
.select-float-i,
.select-line,
.select-line-i{
    width: 100%;
    font-family: var(--font)!important;
    font-weight: var(--font-light);
    font-size: var(--font-size-small);
    border:var(--borde-suave);
    padding-right: 2rem;
    border-radius: .5rem;
    outline: none;    
    background: none;    
    z-index: 1;    
    height: 31px;
    color: var(--text);
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;       
}
.select-float.report{
    background-color: #ed7907;
    color:#fff;
}

.select-float:disabled + .select-label,
.select-float-i:disabled + .select-label-i,
.select-line:disabled + .select-line-label,
.select-line-i:disabled + .select-line-label-i{
    background: #e9ecef;
}

.select-float:disabled,
.select-float-i:disabled,
.select-line:disabled,
.select-line-i:disabled{
    background: #e9ecef;
    color: var(--gris);
}

.select-float:disabled:not(:placeholder-shown)+.select-label,
.select-float-i:disabled:not(:placeholder-shown)+.select-label-i,
.select-line:disabled:not(:placeholder-shown)+.select-line-label,
.select-line-i:disabled:not(:placeholder-shown)+.select-line-label-i{
    background: var(--container-color);
}

.select-float:active,
.select-float:focus,
.select-float-i:active,
.select-float-i:focus{
    border-color: var(--principal-color);
}
.select-float.report:active,
.select-float.report:focus{
    border-color: #ea4c07;
}
.select-label,
.select-label-i{
    left: 1.5rem;
    top: -.5rem;
    padding: 0 .25rem;
}

.select-line-label,
.select-line-label-i{
    left: 2px;
    top: -.8rem;
}

.select-label,
.select-label-i,
.select-line-label,
.select-line-label-i{
    position: absolute;    
    background: var(--container-color);
    color: var(--label-flotante);
    font-size: 12px!important;
    transition: .3s;
    pointer-events: none;
    font-weight: 500;
    z-index: 10;
    text-transform: uppercase;
    line-height: 1.2;
}
/* .select-label.report{
    color:#fff;
} */
.icon-select::before{
    content: var(--arrow);
}

.icon-select-line::before{
    content: var(--angle);
    transform: rotate(90deg);
}

.icon-select::before,
.icon-select.report::before,
.icon-select-line::before{    
    position: absolute;   
    top: .3rem;
    font-size: var(--font-size-normal);
    right: 0;
    color:var(--principal-color);
    font-weight:var(--font-bold);
    padding: 0 1em;
    cursor:pointer;
    pointer-events:none;
    transition:.25s all ease;
     
}
.icon-select.report::before{
    color: #ea0707;
}

.select-float:active + .select-label,
.select-float:focus + .select-label,
.select-float.report:active + .select-label,
.select-float.report:focus + .select-label,
.select-float-i:active + .select-label-i,
.select-float-i:focus + .select-label-i{
    left: 1.5rem;
    top: -.5rem;
    padding: 0 .25rem;
}

.select-line:active + .select-line-label,
.select-line:focus + .select-line-label,
.select-line-i:active + .select-line-label-i,
.select-line-i:focus + .select-line-label-i{
    left: 2px;
    top: -.8rem; 
}

.select-float:active + .select-label,
.select-float:focus + .select-label,
.select-float.report:active + .select-label,
.select-float.report:focus + .select-label,
.select-float-i:active + .select-label-i,
.select-float-i:focus + .select-label-i,
.select-line:active + .select-line-label,
.select-line:focus + .select-line-label,
.select-line-i:active + .select-line-label-i,
.select-line-i:focus + .select-line-label-i{
    position: absolute;    
    background: var(--container-color);
    color: var(--principal-color);
    font-size: var(--font-size-extra-small)!important;
    transition: .3s;
    pointer-events: none;
    font-weight: var(--font-normal);
    z-index: 10;
    text-transform: uppercase;
}

.select-float.report:active + .select-label,
.select-float.report:focus + .select-label{
    background-color: #ed7907;
    color: #fff;
}

.select-line{
    padding-left:5px;
}

.select-line-i{
    padding-left: 2.2rem;
}

.select-line,
.select-line-i{   
    border-style: none none solid none;
    border-bottom: var(--borde-normal);    
}

.select-line-label{
    padding: 0 .25rem;
}

.select-line-label-i{
    padding: 0;
}
  
.select-line:active + .select-line-label,
.select-line:focus + .select-line-label{
    padding: 0 .25rem;
}

.select-line-i:active + .select-line-label-i,
.select-line-i:focus + .select-line-label-i{
    padding: 0 ;
}

.select-line:focus,
.select-line-i:focus,
.select-line:active,
.select-line-i:active{
    border-color: var(--principal-color);       
    
}

.check-bgtp,
.radio-input{
    display:none;    
}

.label-check,
.label-radio{
    display: inline-flex;
    align-items: center;
    color: var(--text);
}

.label-radio{
    margin-right: 10px;
}

.div-checkbox,
.div-radiobtn{
    width: 1.2em;
    height: 1.2em;
    margin-right: 5px;
}

.div-radiobtn{    
    border:solid 2px var(--principal-color);
    border-radius: 50%;
    box-sizing: border-box;
    padding: 2px;      
}

.div-checkbox{
    border:solid 1px var(--principal-color);
    border-radius: 0.25em;
    display: flex;
    align-items: center;
    justify-content: center;    
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.div-radiobtn::after{
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background: var(--principal-color);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.2s;    
}

.div-checkbox::after{
    content: var(--check);
    color: var(--principal-color);
    font-weight: var(--font-normal);
    visibility: hidden;
    transform: scale(0);
    transition: transform 0.15s;
}

.check-bgtp:checked + .div-checkbox{
    border: solid 2px var(--principal-color);
}

.check-bgtp:checked + .div-checkbox::after,
.radio-input:checked + .div-radiobtn::after{
    visibility: visible;
    transform: scale(1);
}

.lab-checkbox-bs{
    margin-bottom: 0.2rem !important;
    color: var(--text);    
}

.fz-16{
    font-size:var(--font-size-small) !important;
    font-weight: var(--font-normal) !important;
    color: var(--label-flotante);
}
.max-wlb{
    max-width: 140px;
}

.check-pz{
    display: flex;    
    min-height: 1.5rem;
    padding-left: 20px;
    margin-bottom: 0.125rem;
    gap: 10px;
    align-items: center;
}

.check-pz.lbl-top{
    flex-direction: column;
    align-items: normal;
    padding-left: 25px;
}

.check-pz.lbl-left{
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.check-pz.lbl-right{
    flex-direction: row-reverse;
    justify-content: left;
    align-items: center;
    gap: 10px;
}

.textarea-float{
    background: var(--container-color);    
    padding:0.3rem 1.5rem;
    outline: none;
    resize: vertical;
    border-color: var(--borde-color-gris);
    min-height: 123px; /* Considerando como 1 row = 41px (En este caso como minimo 3 rows)*/
}

.textarea-float.round{
    border-radius: .5rem;
}

.textarea-float:is(:focus){
    border-color: var(--principal-color);
       
}

.textarea-float::-webkit-scrollbar{    
    width:10px;       
}

.textarea-float::-webkit-scrollbar-track{
    box-shadow: inset 0 0 10px var(--gris-op);
    border-radius: .5rem;
    margin-block: .5rem;
}

.textarea-float::-webkit-scrollbar-thumb{
    background-color: var(--principal-color);
    border: 0.1em solid var(--gris-op);
    border-radius: .5rem;
    right: 1rem;
}

.color-check:checked{
    background-color: var(--principal-color);
    border-color: var(--principal-color);
}

.check-switch-float,
.check-switch-bs,
.check-switch-line{
    position: relative;
    width: 40px;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    border-radius: 20px;
    margin: 3px 12px 3px 0;
}

.check-switch-line{
    margin: 10px 12px;
}

.check-switch-float,
.check-switch-line{
    background: var(--gris-op);   
    box-shadow: inset 0 0 5px rgba(0,0,0,.2);
}

.check-switch-float{  
    height: 18px;
    margin-bottom: 10px;  
}

.check-switch-bs{    
    height: 20px;
    background: transparent;    
    border: 3px solid var(--gris-op);    
}

.check-switch-line{
    top: -25%;    
    height: 5px;
}

.check-switch-float:checked{
    background: var(--principal-color);
}

.check-switch-bs::before,
.check-switch-float::before,
.check-switch-line::before{
    content: '';
    position: absolute;
    border-radius: 20px;
    left: 0;
    transition: .5s;
}

.check-switch-float::before,
.check-switch-line::before{
    width: 18px;
    height: 18px;
    box-shadow: 0 2px 5px rgba(0,0,0,.3);    
    transform: scale(1.1);
    background-color: var(--background);
}

.check-switch-float::before{ 
    top: 0;  
}

.check-switch-line::before{
    top: -7px;  
}

.check-switch-bs::before{
    width: 14px;
    height: 15px;   
    top: 0;            
    background-color: var(--background);
}

.check-switch-float:checked::before{
    left: 22px;
}

.check-switch-bs:checked{
    border: 3px solid var(--principal-color);
}

.check-switch-bs:checked::before{
    left: 19px;
    background: var(--principal-color);
}

.check-switch-line:checked{
    background: var(--gris-op);
}

.check-switch-line:checked::before{
    left: 22px;
    background-color: var(--principal-color);
}

.label-sec-switch{
    font-family: var(--font)!important;
    text-transform: uppercase;
    font-size: var(--font-size-extra-small)!important;
    margin-right: 8px;
    line-height: 1;
    color: var(--label-flotante);
    font-weight: 500;
}

.input-file-float{
    position: absolute;
    visibility: hidden;    
    left: -9999px;
}

.label-input-file{
    background-color: var(--principal-color);
    width: 100%;
    color: #fff;
    display: flex;
    align-items: center;
    height: 41px;
    border-radius: .5rem;
    margin-bottom: 20px;
    justify-content: center;
    cursor: pointer;
}

.pl-r{
    padding-left: 0px;
}

.pl-chk{
    padding-left: 4px;
}

/*Para los selectores con muchas opciones se implemento un buscador cuyos estilos desplegados son los siguientes*/

.display-filtros{
    position: absolute;    
    background-color: var(--container-color);
    border-radius: 10px;
    border: 1px solid var(--principal-color);
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 200px;
    z-index:1100;
}

.display-filtros ul{
    list-style: none;
    padding: 5px 10px 0px 10px;
    margin: 0;
    margin-top: 1px;
}

.display-filtros ul> li{
    cursor: pointer;
    padding-left: 15px;
    border-radius: 6px;
    font-family: var(--font);
    font-size: var(--font-size-small);
    font-weight: var(--font-light);
    color: var(text);
}

.display-filtros ul> li:hover{
    background: var(--hover)!important;
}
.ta-row-1{
    min-height: 31px;
}

.ta-row-2{
    min-height: 57px;
}


/* ESTILOS ALERTS */


/* #alert{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;       

}
#alert.active{
    width: 100%;
    height: 100%;
} */






/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575px) {
    
}
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767px) {
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991px) {
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199px) {
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

}