/* Usage example:

<div class="input-container">
   <asp:TextBox class="input-control" placeholder=" "></asp:TextBox>
   <label class="input-label">Title</label>
</div> 

*/

.input-container {
    position: relative;
    width: 100%;
    padding: 16px 10px 4px 10px;
    font-family: 'Lato', sans-serif !important;
    background: #00000005 0% 0% no-repeat padding-box;
    border: 1px solid #3D393733;
    border-radius: 10px;
    height: 44px;
    opacity: 1;
}

    .input-container:hover {
        border: 1px solid #3D393766;
    }

.input-control {
    width: 98%;
    border: none;
    text-align: left;
    padding-left: 6px;
    font: normal normal normal 15px/20px Lato !important;
    letter-spacing: 0px;
    color: #3D3937;
    opacity: 1;
    outline: none;
    transition: border-color 0.2s;
    background: none !important;
}

.input-label {
    position: absolute;
    top: 12px;
    left: 15px;
    font: normal normal normal 15px/20px Lato !important;
    letter-spacing: 0px;
    color: #3D393766;
    pointer-events: none;
    transition: top 0.2s, font-size 0.2s;
    text-align: left;
    opacity: 1;
}

.input-control:focus + .input-label,
.input-control:not(:placeholder-shown) + .input-label {
    top: 0px;    
    text-align: left;
    font: normal normal normal 11px/20px Lato !important;
    letter-spacing: 0px;
    color: #FF6C0C;
}

.input-control:not(:empty) + .input-label, .input-container:not(:focus-within)
.input-control:not(:placeholder-shown) + .input-label {
    color: #3D393766;
}

.input-container:focus-within {
    border: 1px solid #3D393766;
}

.input-margin-portal{
    margin-bottom: 32px;
}

/* Error Label */
/*.input-margin-portal:has(.message-required[style*="display: inline"]):focus-within .input-label {
    color: #cd463a !important;
}
*/

.select2-container--bootstrap .select2-selection {
    box-shadow: initial !important;
}

.select2-container--open{
    z-index:10000;
}
 

/* Se usan para colocar el color a los elementos que son disable*/
.input-container:has(input:disabled) {
    background: #00000005 0% 0% no-repeat padding-box;
    cursor: not-allowed;
    border: none;
}

.input-container:has(input:disabled) input:disabled {
    background: #00000005 0% 0% no-repeat padding-box;
    cursor: not-allowed;
}

/* Se usan para colocar el color gris a los elementos que son readonly y que no incluyen ni los date-picker ni los clock */
.input-container:has(.input-control:read-only:not(.date-picker):not(.clock)) {
    border:none
}

/*.input-container:has(.input-control:read-only:not(.date-picker):not(.clock)) {
    background-color: #e9ecef;
}*/

/*.input-container .input-control[readonly]:not(.date-picker):not(.clock) {
    background-color: #e9ecef;
}
*/
/* Se usan para colocar un pointer a los elementos que son date-pciker y clock */

.input-container:has(.date-picker) {
    cursor: pointer;
}

.input-container:has(.clock) {
    cursor: pointer;
}

.date-picker, .clock {
    cursor: pointer;
} 


.text-check-portal {
    font: normal normal normal 17px/24px Lato;
    letter-spacing: 0px;
    color: #3D3937;
    opacity: 1;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}



.clear-input-container {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 46px;
}

.inputsize {
    width: 408px !important;
}

.clear-input-button {
    /* button position */
    position: absolute;
    right: 14px;
    top: 15px;
    bottom: 0;
    /* button appearane */
    justify-content: center;
    align-items: center;
    width: 19px;
    height: 19px;
    appearance: none;
    border: none;
    border-radius: 50%;
    background: #3D393799;
    margin: 0;
    padding: 2px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    /* hide the button initially */
    display: none;
    text-align: center;
}

    .clear-input-button:hover {
        background: darkgray;
    }

.clear-input-container:focus-within .clear-input-button {
    display: inline-flex;
}

/* Login*/
.input-container-login {
    position: relative;
    width: 100%;
    padding: 0px;
    font-family: 'Lato', sans-serif !important;
    background: #F6F6F5;
    border: 1px solid #3D393733;
    border-radius: 10px;
    height: 44px;
    opacity: 1;
    /*    padding-left: 2px;
    padding-right: 2px; */
   
}

    .input-container-login:hover {
        border: 1px solid #3D393733;
        background: #FFFFFF;
    }

.input-control-login {
    width: 100%;
    height: 40px;
    border-radius: 10%;
    border: none;
    text-align: left;
    padding-left: 15px;
    padding-top: 15px;
    font: normal normal normal 15px/20px Lato !important;
    letter-spacing: 0px;
    color: #3D3937;
    opacity: 1;
    outline: none;
    transition: border-color 0.2s;
    background:transparent;
    /*background: #F6F6F5;*/
}

.input-label-login {

    position: absolute;
    top: 12px;
    left: 15px;
    font: normal normal normal 15px/20px Lato !important;
    letter-spacing: 0px;
    color: #3D393766;
    pointer-events: none;
    transition: top 0.2s, font-size 0.2s;
    text-align: left;
    opacity: 1;
}

.input-control-login:focus + .input-label-login,
.input-control-login:not(:placeholder-shown) + .input-label-login {
    top: 0px;
    text-align: left;
    font: normal normal normal 11px/20px Lato !important;
    letter-spacing: 0px;
    color: #FF6C0C;
}


.input-control-login:not(:empty) + .input-label-login, .input-container-login:not(:focus-within)
.input-control-login:not(:placeholder-shown) + .input-label-login {
    color: #3D393766;
}

.input-container-login:focus-within {
    border: 1px solid #3D393766;
}

.label-login-forgot {
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-21) var(--unnamed-font-family-lato);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--primary-50);
    text-align: center;
    font: normal normal bold 16px/21px Lato;
    letter-spacing: 0px;
    color: #FF6C0C;
    opacity: 1;
}


.inputreadonly {
    background-color: #EBE9E8;
    color: #3D393766;
}

/**fin login*/

.required-general {
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) 11px/13px var(--unnamed-font-family-lato);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--error-50);
    text-align: left;
    font: normal normal normal 11px/13px Lato;
    letter-spacing: 0px;
    color: #CD463A;
    opacity: 1;
    display: none;
    margin-left: 14px;
    position: absolute;
}

:focus-visible {
    outline: none !important;
}

input:focus-visible {
    outline: none !important;
}




.exportbutton {
    height: 44px;
    text-align: center;
    padding: 0.8em 1em;
    width: 113px;
    background: transparent url(img/Shape.png) 0% 0% no-repeat padding-box;
    border-radius: 10px;
    opacity: 1;
    background-color: #F5F4F3;
    border: none;
}

.exportbutton:hover {
    height: 44px !important;
    text-align: center !important;
    padding: 0.8em 1em !important;
    width: 113px !important;
    background: transparent url(img/Shape.png) 0% 0% no-repeat padding-box !important;
    border-radius: 10px !important;
    opacity: 1 !important;
    background-color: #F5F4F3 !important;
    border: none !important;
}

.exportbutton > span {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAAAUCAYAAADIiLCPAAAABHNCSVQICAgIfAhkiAAAA4VJREFUWEftmFFOGzEQhscJ9BV6AnKDhhMQ3ipohVGC1DfICZqcgHACwgka3ipBxEoU1LeGEzScoPQETV6bFPf/7XVjwiZZSISiwkordr32ePx55vcEJSmuTV1qiBhzETXLKbr/913UpBU6YLLr+pnGCziRsdDuAvN4X8CNhBYA6wLXUowsfn7e4BKhhcCMqIIS890mp6hVPLccxOcL7h60YWCX0UkbbYbQLqJTtaF38rMGt6GLdSXqTZK+Ys71Sbr71N9HQdOMMAKjQyE0vntwBtF2GTUr0zq9oUstOLIGib2GzU5o7zI6LUxrf9rxXD/8O/gSndZoKzE93+oPua/R5xs/2TA0tmutl6MourPAxzrnocGZdTjG9J+bKw6Q7xOhDXucBG2WqxoHjZvTk4UGdXRR+tt+ozZ18RP2PMe235JFBGRWbiVbzUpvn+3IlM4r6ZXDjd3cLu6KUXvOd3NjJHPkswlw9iA7u39koextENStqI9o1+wPuxijjifWaTT/dNBURSmxksDr/OzkKp6fEnCI+xgatwd/7Lvf/UF6Swfiew19XMYiqZFt9F91NixkAFPXDoAUuBE+ut/pUg1jAdzCyVmsosoAVsPjCu6f+M5vjbmC5mH5vzx4/LMHEy/kkHC83gXQqhhT55gwehEtHVYAGHPlxwBSAe/fPNgBNHW9KL2Cj1DfPrfpiQVU4dy/SAv1jTqblT6/sWbsIo3yXneT0jtcrIsa2Q8X7qKvRE1e4ub4/hkx2+dRM/KbNffQxh0Esbb9wGKQeq5mHOiRO33D8emgFWFP5UJowz4kQmPjLXxA2B4Mp4d/T6NpFFKYWRlnZ5T9NKcn7J9RkBktTnuk5Wu4pPHwmdGyRQgYt4wUPcO71UT6EW/CL2oV2nIBnDsneCK0NEDS9PGOhzo0CtJw+0CTTAMRdBN+5ya810XNRaOGw2nXrAQFuNWwQNNaKKjqCEMU4FKj6F9EJ3mXijtIbXs41EWZNk5RHib8Zm2Mgubn5ibhbkMWjlQaIGkWPxto92dCSfEaJQfTsovnPAU6jhLCNVjEakb6PNHWKPSuSLYahpNXVXwKB6XLVjxLF33rvmAdBc2NWwQwC5xXdS6gpdmUcX3SpPe0c4TjX6A9giahMcxZvM3isqI6C0MPscFDCKVCro9fDuHPv4fYeEhf+18L5KstCKe/Bhoyva35tfAXi0RBQGRVKw0AAAAASUVORK5CYII=");
    height: 20px;
    width: 77px;
    background-repeat: no-repeat;
    border: none;
    display: inline-table;
    color: transparent;
}


/* estilos para el container cuando el input no tiene label */
.input-container-without-label {
    position: relative;
    width: 100%;
    padding: 11px 10px 4px 10px;
    font-family: 'Lato', sans-serif !important;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #3D393733;
    border-radius: 10px;
    height: 44px;
    opacity: 1;
}    

    /* Se usan para colocar el color a los elementos que son disable*/
    .input-container-without-label:has(input:disabled) {
        background-color: #EBE9E8;
        color: #3D393766;
        opacity: 1;
    }

        .input-container-without-label:has(input:disabled) input:disabled {
            background-color: #EBE9E8;
            color: #3D393766;
            opacity: 1;
        }

    /* Se usan para colocar el color gris a los elementos que son readonly y que no incluyen ni los date-picker ni los clock */
    .input-container-without-label:has(.input-control:read-only:not(.date-picker):not(.clock)) {
        background-color: #EBE9E8;
        color: #3D393766;
        opacity: 1;
    }

    .input-container-without-label .input-control[readonly]:not(.date-picker):not(.clock) {
        background-color: #EBE9E8;
        color: #3D393766;
        opacity: 1;
    }

    /* Estilo hover para los inputs no deshabilitados */
    .input-container-without-label:hover:not(:disabled):not([readonly]) {
        border: 1px solid #3D393766;
    }