.form {
    display: block;
}
.form.loading{
    padding:1rem;
}
.form.loading, 
.form.loading *, 
.form.loading > *{
    color:var(--color-gris-4) !important;
    border-color: var(--color-gris-3) !important;
    background-color: var(--color-azul-1);
}
.form.loading::before{
    content:"CARGANDO DATOS...";
    font-size:3rem;
    color:var(--color-gris-5) !important; 
    margin-bottom:2rem;
    font-weight: 300;
}
/* Ocultar formulario */
.form.hide{
    display: none;
}

/* Caja interna para campos, etiquetas o textos*/ 
.form--box {
    margin: 2rem auto 0 auto;
    width: 100%;
    height: auto;
} 
.form--box.box-home {
    margin: 0 auto 2rem auto;
} 
@media screen and (max-width: 1024px) { 
    .form--box.box-home {
        margin: 0 auto 1rem auto;
    } 
}

.form--box.auto{
    width: auto; 
}
.form--box.quarter{
    width: 25%;
}
.form--box.three-quarter{
    width: 75%;
}
@media screen and (max-width: 1024px) { 
    .form--box.auto, 
    .form--box.quarter, 
    .form--box.three-quarter{
        width: 100%;
    }
}
.form--box.flex-center {  
    width: auto; 
    height: 3rem; 
    display: flex;
    align-items: center;
    justify-content: center; 
    gap:1rem; 
}
/* 
@media screen and (max-width: 1024px) {
    .form--box.wrap-mobile { 
        flex-wrap: nowrap;
    }  
}
*/
/* Desktop Flex Horizontal */
.form--flex .form--box {
    margin: 0 auto;
}
@media screen and (max-width: 1024px) {
    /* Mobile Vertical */
    .form--flex .form--box {
        margin: 0 auto 1.5rem auto;
    }
    .form--flex .form--box.box-home {
        margin: 0 auto 0.5rem auto !important;
    } 
} 
.form--flex.m-0,
.form--box.m-0 {
    margin: 0 auto 0 auto;
}
.form--box.none {
    display: none;
} 
/* 
.form--box.align-right {
    text-align: right !important; 
    justify-content: flex-end; 
} 
*/




/* Label */
.form--box label {
    display: block; 
    width: 100%; 
    margin-bottom: 0.75rem; 
    min-height: 1rem;  
    text-align: left; 
    font-size: var(--fsizes-small);
    color: var(--color-gris-5);
}
@media screen and (max-width: 1440px) {
    .form--box label {
        margin-bottom: 0.5rem; 
    }
} 
@media screen and (max-width: 1024px) {
    .form--box label {
        margin-bottom: 0.25rem; 
    }
} 
.form--box label.normal{
    font-size: var(--fsizes-normal);
    color: var(--color-azul-4);
}
.form--box label i, 
.form--box label i::after {
    color: var(--color-azul-5);
}

/* Input Text */
.form--box input[type=text],
.form--box .input-text {
    width: 100%;
    height: 3rem;
    border: 1px solid var(--color-gris-4);
    font-size: 1rem;
    line-height: 3rem;
    padding: 0 1rem;
    border-radius: 0.75rem;
    background: transparent;
}

@media screen and (max-width: 1024px) {
    .form--box input[type=text],
    .form--box .input-text {
        height: 2rem;
        line-height: 2rem;
        border-radius: 0.5rem;
    }
}

.form--box input[type=text].w-small,
.form--box .input-text.w-small,  
.input-text.w-small {
    width:6rem;
    min-width:6rem;
}

.form--box input[type=text]:focus,
.form--box .input-text:focus {
    outline: none;
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid var(--color-azul-5);
    background: var(--color-gris-1); 
    color: var(--color-azul-5);
}

.form--box input[type=text]::placeholder,
.form--box .input-text::placeholder {
    color: var(--color-gris-4);
    font-style: italic;
}
.form--box input[type=text]:focus::placeholder,
.form--box .input-text:focus::placeholder {
    color: var(--color-gris-5);
}

.form--box input[type=text]:disabled{
    border: 1px solid var(--color-gris-3);
    background:  var(--color-gris-2);
    color: var(--color-gris-4);
}

.form--box .input-text.small, 
.input-select.small { 
    height:2rem;
}


/* Select */
.input-select {
    width: 100%;
    height: 3rem;
    font-size: 1rem;
    line-height: 3rem;
    padding: 0 1rem;
    border-radius: 0.75rem;
    display: flex;
    cursor: pointer;
    border: 1px solid var(--color-gris-4);
    background: transparent;
}
.input-select.w-auto { 
    width: auto;
}
@media screen and (max-width: 1200px) {
    .input-select.w-auto { 
        width: 100%;
    }
}
@media screen and (max-width: 1024px) {
    .input-select {
        height: 2rem;
        line-height: 2rem;
        border-radius: 0.5rem;
    }
}

.input-select:focus {
    outline: none;
    border: 1px solid var(--color-azul-5);
    background: var(--color-gris-1); 
    color: var(--color-azul-5);
}

.input-select:disabled {
    outline: none;
    cursor: default;
    
    border: 1px solid var(--color-gris-3);
    background:  var(--color-gris-2);
    color: var(--color-gris-4);
}

.input-select.max-height { 
    min-height: 3rem;
    height: auto;
}

/* Form input type time*/
input[type="time"], input[type="number"] {
    border: 1px solid var(--color-gris-4);
    padding: 0.4rem 1rem;
    border-radius: .5rem;
    /* min-width: 100%; */
    font-size: 1rem;
}

input[type="time"]:focus, input[type="number"]:focus{
    outline: none;
    border: 1px solid var(--color-azul-4);
    color: var(--color-azul-4);
}

input[type="time"]:disabled, input[type="number"]:disabled{
    color: var(--color-gris-4);
}


/* 
Botón Mostrar / Ocultar contraseña 
*/
.form--box .show-hide-password,
.form--box .show-hide-password p,
.form--box .show-hide-password p i,
.form--box .show-hide-password p span{
    font-size: 0.8rem; 
    line-height: 0.8rem;
    color:var(--color-gris-4);
}
.form--box .show-hide-password p{
    height: 3rem; 
    display: flex;
    align-items: center;
    justify-content: flex-end; 
    text-align: right;
    gap:0.5rem;
    cursor: pointer;
}

.form--box .show-hide-password .show-password.hide {
    display: none;
} 
.form--box .show-hide-password .hide-password.hide {
    display: none;
} 
/*
.form--box .show-hide-password.show .hide-password{
    display: none;
}
.form--box .show-hide-password.hide .show-password{
    display: none;
}
*/


/* Form Flex Colum */
.form--flex {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: 2rem auto 0 auto;
}
.form--flex.mt-0 {
    margin-top:0; 
}

.form--flex.flex-start {
    align-items: flex-start; 
}
.form--flex.align-items-flex-start{
    align-items: flex-start; 
}
.form--flex.justify-content-flex-start{
    justify-content: flex-start; 
}

.form--flex.flex-end {
    align-items: flex-end; 
}

@media screen and (max-width: 1024px) {
    .form--flex {
        flex-wrap: wrap;
        gap: 0;
    }
    .form--flex.form-column-reverse-mobile{
        flex-direction: column-reverse;
    }    
}

.form--flex.form--options{
    justify-content: flex-start;
    gap: 1rem;
}




/* Form Logo - Form inicio de sesión, recuperar contraseña */
.form-logo {
    height: 2.5rem;
    width: auto; 
    margin-bottom:2rem;
} 
@media screen and (max-width: 1024px) {
    .form-logo {
        height: 2rem;
    }
}
.form-logo.big {
    height: 4rem;
} 
@media screen and (max-width: 1024px) {
    .form-logo.big  {
        height: 3rem;
    }
}



/* Mensajes de respuesta */
.form .message {
    width: 100%;
    padding: 1rem; 
    /* 
    background-color: rgba(50,75,100, 0.35); 
    */
    background-color: rgba(149, 168, 188, 0.15); 
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem auto;
    animation-duration: 7s;
    /* 
    animation-name: messageOpacity;
    animation-fill-mode: forwards; 
    */
}
/* Mensaje Ok (Exito) */
.form .message.success {
    /* background-color: rgba(0,255, 24, 0.15); */
    background-color: var(--bgcolor-success);
}
/* Mensaje Error */
.form .message.fail {
    /* background-color: rgba(255, 0, 0, 0.15); */
    background-color: var(--bgcolor-fail);
}
/* Mensaje Flag */
.form .message.flag {
    background-color: var(--bgcolor-flag);
}
/* Mensaje Error */
.form .message.warning {
    /* background-color: rgba(180,175,42, 0.15); */
    background-color: var(--bgcolor-warning);
}
.form .message.none {
    display: none;
}

.form .message .icon {
    width: 2rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 1024px) {
    .form .message .icon {
        width: 2rem;
        height: 2rem;
    }
}
.form .message .icon i,
.form .message .icon i::after {
    font-size: 1.5rem;
    line-height: 1.5rem;
}
.form .message .icon i{
    display: none;
}
.form .message .icon i.warning{
    display: block;
}
.form .message .icon i.success, 
.form .message .icon i.flag, 
.form .message .icon i.fail{
    display: none;
}
.form .message .icon i,
.form .message .icon i::before,
.form .message .txt {
    color: var(--color-azul-5);
}

.form .message.fail .icon i.fail{
    display: block;
}
.form .message.fail .icon i.success, 
.form .message.fail .icon i.flag, 
.form .message.fail .icon i.warning{
    display: none;
}
.form .message.fail,
.form .message.fail .icon i,
.form .message.fail .icon i::before,
.form .message.fail .txt {
    color: var(--color-fail);
}

.form .message.success .icon i.success{
    display: block;
}
.form .message.success .icon i.fail, 
.form .message.success .icon i.flag,
.form .message.success .icon i.warning{
    display: none;
}
.form .message.success,
.form .message.success .icon i,
.form .message.success .icon i::before,
.form .message.success .txt {
    color: var(--color-success);
}


.form .message.flag .icon i.flag{
    display: block;
}
.form .message.flag .icon i.fail, 
.form .message.flag .icon i.success,
.form .message.flag .icon i.warning{
    display: none;
}
.form .message.flag,
.form .message.flag .icon i,
.form .message.flag .icon i::before,
.form .message.flag .txt {
    color: var(--color-flag);
}



.form .message .txt {
    /* width: calc(100% - 4rem); */
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
@media screen and (max-width: 1024px) {
    .form .message .txt {
        width: calc(100% - 3rem);
    }
}
.form .message .txt,
.form .message .txt p {
    font-size: var(--fsizes-small);
    line-height: 135%;
    margin: 0;
}





/*tipo fecha desde hasta*/
.form--box.form--box--date {
    display: flex;
    flex-wrap: wrap;
}

.form--box.form--box--date input{
    width: calc(50% - 1rem);
}

.form--box.form--box--date input:last-child{
    margin-left: auto;
}

/*tipo file botón*/
.form--box input[type="file"]::file-selector-button {
    border: 1px solid var(--color-gris-4);
    background-color: transparent;
    border-radius: 1rem;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    color: var(--color-gris-5);
    cursor: pointer;
}


/* Contador regresivo para cerrar sesión */ 
.messageCountDown{
    display:flex;
    justify-content: space-between; 
    align-items: center;
    gap:1rem;
    background-color: var(--color-azul-2);
    margin-top:1rem;
    border-radius: 1rem;
    padding:1rem;
    border:1px dotted var(--color-azul-3);
}
.messageCountDown.none{
    display: none;
}
.messageCountDown p{
    width: calc(100% - 5rem);
    height: auto;
    padding-left:1rem;
    color:var(--color-azul-5); 
    line-height: 135%;
}
.messageCountDown span{
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center; 
    text-align: center;
    font-size: 1.25rem;
    list-style-type: 1.25rem;
    font-weight: 600;
    color:var(--color-azul-2);
    background-color: var(--color-azul-5);
    border-radius: 50%;
}

.form--box textarea{
    background-color: transparent;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    border-radius: 1rem;
    border-color: var(--color-gris-4);
    padding: 1rem;
    min-height: 3rem;
    max-height: 9rem;
    border: 1px solid var(--color-gris-4);
}
.form--box textarea:disabled{
    background-color: var(--color-gris-2);
    border-color: var(--color-gris-3);
}

/*Search input*/
input[type="search"]::-webkit-search-cancel-button {
    position:relative;
    right:-.8rem;  
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius:10px;
    background: url(../../uikit/assets/images/circle-xmark-solid.svg) no-repeat center center;
}

input[type="search"]:valid {
    -webkit-appearance: none;
    background: url(../../uikit/assets/images/magnifying-glass-solid.svg) no-repeat right 10px center !important;
    background-size: 15px 15px !important;
    transition: none;
}

input[type="search"]:not(:placeholder-shown){
    background: none !important;
}

.data-label{
  display: flex !important;
  justify-content: space-between;
}