* {
    font-family : 'Roboto', sans-serif;
}

/*.fa, .fa-solid, .fas, .far, .fal, .fab {
    font-family: "Font Awesome 6 Free";
    font-weight: 900; !* necesario para íconos sólidos *!
}*/

html {
    height : 100%;
}

body {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    /*justify-content : start;*/
    align-items     : center;
    position        : relative;
    min-height      : 100%;
    background      : #3b3b3b;
    font-family     : 'Roboto', sans-serif !important;
    overflow        : hidden;
}

/* Animation Keyframes */
@keyframes scale_header {
    0% { max-height : 0; margin-bottom : 0; opacity : 0; }
    100% { max-height : 160px; margin-bottom : 25px; opacity : 1; }
}

@keyframes error_before {
    0% { height : 5px; background : rgba(0, 0, 0, 0.156); color : transparent; }
    10% { height : 160px; background : #FFFFFF; color : #C62828 }
    90% { height : 160px; background : #FFFFFF; color : #C62828 }
    100% { height : 5px; background : rgba(0, 0, 0, 0.156); color : transparent; }
}

@keyframes success_before {
    0% { height : 5px; background : rgba(0, 0, 0, 0.156); color : transparent; }
    10% { height : 160px; background : #B7FFB3FF; color : #2D622EFF }
    90% { height : 160px; background : #B7FFB3FF; color : #2D622EFF }
    100% { height : 5px; background : rgba(0, 0, 0, 0.156); color : transparent; }
}

.login-container {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    position       : relative;
    height         : auto;
    padding        : 5px;
    box-sizing     : border-box;
}

.maintenance_container {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    position       : relative;
    height         : auto;
    padding        : 5px;
    box-sizing     : border-box;
    width          : 45%;
    margin-top     : 6%;
}

.login-container img {
    width  : 200px;
    margin : 0 0 20px 0;
}

.login-container p {
    align-self  : flex-start;
    font-family : 'Roboto', sans-serif;
    font-size   : 0.8rem;
    color       : #c1c1c1;
    text-align  : center;
}

.centered {
    text-align : center;
    margin     : 0 auto;
}

#copyright {
    color : #c1c2c4;
}

#copyright > a {
    color       : #d30046;
    font-weight : 500;
}

.login-container p a {
    color : #c1c2c4;
}

.login {
    position      : relative;
    width         : 100%;
    padding       : 10px;
    margin        : 0 0 10px 0;
    box-sizing    : border-box;
    border-radius : 3px;
    background    : #292929;
    overflow      : hidden;
    animation     : input_opacity 0.2s cubic-bezier(.55, 0, .1, 1);
}

.maintenance_section {
    position      : relative;
    width         : 100%;
    padding       : 10px;
    margin        : 0 0 10px 0;
    box-sizing    : border-box;
    border-radius : 50px;
    background    : #292929;
    overflow      : hidden;
    animation     : input_opacity 0.2s cubic-bezier(.55, 0, .1, 1);
    text-align    : center;
}

.maintenance_section > header img {
    text-align : center;
    margin     : 20px auto 0;
    height     : 140px;
    display    : block;
}

.maintenance_section > header h4 {
    font-size : 35px;
    color     : #009fe3;
}

.maintenance_section > .contenedor_msg {
    font-size  : 16px;
    color      : #c5c4c4;
    margin-top : 15%;
}

.login > header {
    position      : relative;
    width         : 100%;
    padding       : 10px;
    margin        : -10px -10px 15px -10px;
    border-bottom : 1px solid rgba(0, 0, 0, 0.1);
    background    : #000000;
    font-family   : 'Roboto', sans-serif;
    font-size     : 1.3rem;
    color         : #FAFAFA;
    animation     : scale_header 0.6s cubic-bezier(.55, 0, .1, 1), text_opacity 1s cubic-bezier(.55, 0, .1, 1);
    box-shadow    : 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12),
    0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

.login > header:before {
    content         : '';
    display         : flex;
    justify-content : center;
    align-items     : center;
    position        : absolute;
    width           : 100%;
    height          : 5px;
    padding         : 10px;
    margin          : -10px 0 0 -10px;
    box-sizing      : border-box;
    background      : rgb(31 93 171 / 85%);
    font-family     : 'Roboto', sans-serif;
    font-size       : 0.9rem;
    color           : transparent;
    z-index         : 5;
}

.login.error_1 > header:before,
.login.error_2 > header:before,
.login.error_3 > header:before,
.login.error_4 > header:before,
.login.error_5 > header:before,
.login.error_6 > header:before,
.login.error_7 > header:before,
.login.error_8 > header:before,
.login.error_9 > header:before,
.login.error_10 > header:before,
.login.error_11 > header:before,
.login.error_12 > header:before {
    animation : error_before 5s cubic-bezier(.55, 0, .1, 1);
}

.login.success_1 > header:before {
    animation : success_before 5s cubic-bezier(.55, 0, .1, 1);
}

.login.error_1 > header:before {
    content : 'No se encuentra el usuario en IMPROA. Verifique su usuario y/o contraseña o consulte con el Administrador';
}

.login.error_2 > header:before {
    content : 'Lo sentimos, su usuario se encuentra inactivo en IMPROA. Consulte al Administrador del Sistema.';
}

.login.error_3 > header:before {
    content : 'Ocurrió un problema al iniciar la sesión. Consulte al Administrador del Sistema.';
}

.login.error_4 > header:before {
    content : 'En este momento, usted se encuentra fuera del horario de guardia. Consulte al Administrador del Sistema.';
}

.login.error_5 > header:before {
    content     : 'Debe resolver el CAPTCHA para poder iniciar sesión';
    font-weight : 500;
}

.login.error_6 > header:before {
    content     : 'Lo sentimos. Ocurrió un error al validar el CAPTCHA. Consulte con el Administrador del Sistema.';
    font-weight : 500;
}

.login.error_7 > header:before {
    content     : 'El token de inicio de sesión no es válido.';
    font-weight : 500;
}

.login.error_8 > header:before {
    content     : 'Ocurrió un error al intentar obtener el token de autorización del Grupo PROA. Por favor, solicite soporte al área de TI del Grupo';
    font-weight : 500;
}

.login.error_9 > header:before {
    content     : 'Ocurrió un error al intentar obtener el token de sesión del Grupo PROA. Verifique su usuario y/o contraseña o solicite soporte al área de TI del Grupo';
    font-weight : 500;
}

.login.error_10 > header:before {
    content     : 'Ocurrió un error con el token de IMPROA. Consulte con el Administrador del Sistema';
    font-weight : 500;
}

.login.error_11 > header:before {
    content     : 'Ocurrió un error al intentar obtener sus datos de sesión. Consulte con el Administrador del Sistema';
    font-weight : 500;
}

.login.error_12 > header:before {
    content     : 'Usted ha realizado demasiados intentos. Se ha bloqueado el inicio de sesión';
    font-weight : 500;
}

.login.success_1 > header:before {
    content : 'Su contraseña se ha actualizado correctamente. Ya puede volver a iniciar sesión.';
}

.login > header img {
    text-align : center;
    margin     : 20px auto 0;
    display    : block;
}

.login > header h2 {
    margin : 50px 0 10px 0;
}

.login > header h4 {
    font-size   : 0.8em;
    animation   : text_opacity 1.5s cubic-bezier(.55, 0, .1, 1);
    color       : #a83333;
    text-align  : center;
    font-weight : 500;
    margin      : 10px 0;
}

.login-form {
    padding    : 10px;
    box-sizing : border-box;
}

#timerDIV {
    display   : none;
    float     : right;
    width     : 138px;
    font-size : 11px;
    color     : #7d7d7d;
}

.submit-container {
    position   : relative;
    padding    : 10px;
    margin     : 35px -25px -25px -25px;
    border-top : 1px solid rgba(0, 0, 0, 0.1);
}

.flotar_i {
    float : left;
}

.flotar_d {
    float : right;
}

.clear {
    clear : both;
}

.login-button-blocked {
    color            : #ffffff !important;
    text-decoration  : line-through !important;
    cursor           : not-allowed !important;
    background-color : #ff5757 !important;
}

.login-button {
    padding       : 10px 15px;
    border        : none;
    border-radius : 3px;
    background    : transparent;
    font-family   : 'Roboto', sans-serif;
    font-size     : 1.1rem;
    font-weight   : 500;
    color         : #03A9F4;
    cursor        : pointer;
    opacity       : 1;
    animation     : input_opacity 0.8s cubic-bezier(.55, 0, .1, 1);
    transition    : background 0.2s ease-in-out;
}

.login-button.raised {
    padding    : 5px 10px;
    color      : #FAFAFA;
    background : #03A9F4;
    box-shadow : 0 2px 2px 0 rgba(0, 0, 0, 0.137255),
    0 1px 5px 0 rgba(0, 0, 0, 0.117647),
    0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

.login-button:hover {
    background : rgba(0, 0, 0);
}

.login-button.raised:hover {
    background : #03A9F4;
}

.group {
    position      : relative;
    margin-bottom : 35px;
}

.input_login {
    font-size        : 18px;
    padding          : 10px 1px 10px 5px;
    display          : block;
    width            : 98%;
    background-color : transparent;
    border           : none;
    color            : #9D9D9D;
    border-bottom    : 1px solid #9D9D9D;
}

.input_login:focus { outline : none; }

:not(output):-moz-ui-invalid {
    box-shadow : none !important;
}

input:invalid {
    box-shadow : none !important;
}

.input_invalid {
    border-bottom : 2px solid red !important;
}

/* LABEL ======================================= */
.lbl_login {
    background         : url(../img/login-sprite.png) no-repeat scroll 0 0 transparent;
    color              : #9D9D9D;
    font-size          : 18px;
    font-weight        : normal;
    position           : absolute;
    pointer-events     : none;
    left               : 5px;
    top                : 12px;
    transition         : 0.2s ease all;
    -moz-transition    : 0.2s ease all;
    -webkit-transition : 0.2s ease all;
    padding-left       : 24px;
}

.input_user {
    background-position : 2px -15px !important;
}

.input_pass {
    background-position : 2px -64px !important;
}

_:-moz-tree-row(hover), .input_pass {
    background-position : 2px -12px !important;
}

_:-moz-tree-row(hover), .input_pass {
    background-position : 2px -64px !important;
}


/* active state */
.input_login:focus ~ .lbl_login, .input_login:valid ~ .lbl_login {
    top         : -16px;
    font-size   : 14px;
    color       : #03A9F4;
    background  : url(../img/login-sprite-blue.png) no-repeat scroll 0 0 transparent;
    padding-top : 5px;
    margin-top  : -3px;
}

.input_login:focus ~ .input_user {
    background-position : 2px -15px !important;
}

.input_login:focus ~ .input_pass {
    background-position : 2px -64px !important;
}

_:-moz-tree-row(hover), .input_login:focus ~ .input_user {
    background-position : 2px -12px !important;
}

_:-moz-tree-row(hover), .input_login:focus ~ .input_pass {
    background-position : 2px -66px !important;
}

/* BOTTOM BARS ================================= */
.bar { position : relative; display : block; width : 100%; }

.bar:before, .bar:after {
    content            : '';
    height             : 2px;
    width              : 0;
    bottom             : 1px;
    position           : absolute;
    background         : #03A9F4;
    transition         : 0.2s ease all;
    -moz-transition    : 0.2s ease all;
    -webkit-transition : 0.2s ease all;
}

.bar:before {
    left : 50%;
}

.bar:after {
    right : 50%;
}

.input_login:focus {
    border-bottom : 1px solid #03A9F4;
    color         : #616161;
}

/* active state */
.input_login:focus ~ .bar:before, .input_login:focus ~ .bar:after {
    width : 50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
    position       : absolute;
    height         : 60%;
    width          : 100px;
    top            : 25%;
    left           : 0;
    pointer-events : none;
    opacity        : 0.5;
}

/* active state */
.input_login:focus ~ .highlight {
    -webkit-animation : inputHighlighter 0.3s ease;
    -moz-animation    : inputHighlighter 0.3s ease;
    animation         : inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from { background : #03A9F4; }
    to { width : 0; background : transparent; }
}

@-moz-keyframes inputHighlighter {
    from { background : #03A9F4; }
    to { width : 0; background : transparent; }
}

@keyframes inputHighlighter {
    from { background : #03A9F4; }
    to { width : 0; background : transparent; }
}

.txt_login {
    padding-left : 14px;
}

.txt_login a {
    color           : #E65100 !important;
    font-size       : 15px;
    text-decoration : none;
}

.txt_login a:hover {
    text-decoration : underline;
}

.txt_recover {
    padding-left : 14px;
}

.txt_recover a {
    color           : #6b6200 !important;
    font-size       : 13px;
    text-decoration : none;
}

.txt_recover a:hover {
    text-decoration : underline;
}


#olvide_password h3 {
    margin-top  : 0;
    font-weight : 600;
}

.botonRecuperar {
    border                : 0 none;
    border-radius         : 3px;
    -webkit-border-radius : 3px;
    -moz-border-radius    : 3px;
    background-color      : #77B77D;
    color                 : #ffffff;
    padding               : 5px 8px;
    height                : 32px;
    line-height           : 24px;
    vertical-align        : top;
    font-size             : 14px;
    width                 : 100%;
}

.botonRecuperar:hover {
    cursor           : pointer;
    background-color : #86CE8D;
}

.botonRecuperar:active {
    position : relative;
    top      : 1px;
}

.labels_form {
    text-align   : right;
    margin-right : 5px;
    display      : inline-block;
    margin-top   : 0;
    font-size    : 13px;
}

.campo_radius {
    font-size             : 13px;
    height                : 22px;
    padding               : 2px 3px;
    vertical-align        : baseline;
    border-radius         : 4px;
    -moz-border-radius    : 4px;
    -webkit-border-radius : 4px;
    border                : 1px solid #8a8a8a;
}

.campo_radius:focus {
    background-color : #FFFFFF;
    border-color     : #0099FF;
    box-shadow       : 0 0 0 1px #ABDEFC inset;
    outline          : medium none;
}

.campo_radius_error {
    font-size             : 11px;
    height                : 22px;
    padding               : 1px 3px;
    vertical-align        : top;
    border-radius         : 4px;
    -moz-border-radius    : 4px;
    -webkit-border-radius : 4px;
    border                : 1px solid #FF3D3D;
    background-color      : #FFEFEF;
    box-shadow            : 0 0 0 1px #FCB5B5 inset;
    outline               : medium none;
}

.error_msj {
    color       : #FF0000;
    margin      : 0 5px;
    font-weight : 500;
    font-size   : 11px;
}

div.error_hidden {
    background            : url('../icons/delete.png') no-repeat 3px 5px #FEEEED;
    color                 : #EF3632;
    border                : solid 1px #EE7979;
    margin                : 4px 0;
    min-height            : 14px;
    padding               : 4px 5px 4px 22px;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border-radius         : 5px;
    cursor                : pointer;
}

div.error_hidden a {
    color       : #EF3632;
    font-size   : 11px;
    font-weight : 500;
}

div.exito {
    background-image      : url('../icons/apply.png');
    background-repeat     : no-repeat;
    background-position   : 6px 5px;
    background-color      : #DEF5D8;
    color                 : #24A811;
    border                : solid 1px #24A811;
    margin                : 5px 0;
    min-height            : 20px;
    padding               : 3px 10px 2px 28px;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border-radius         : 5px;
    cursor                : pointer;
}

div.exito a {
    color           : #006600;
    font-size       : 11px;
    font-weight     : 500;
    text-decoration : underline;
}

div.error2 {
    background-image      : url('../icons/delete.png');
    background-repeat     : no-repeat;
    background-position   : 5px 3px;
    background-color      : #FEEEED;
    color                 : #EF3632;
    border                : solid 1px #EE7979;
    margin                : 5px 0;
    min-height            : 20px;
    padding               : 6px 10px 2px 28px;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border-radius         : 5px;
    cursor                : pointer;
}

div.error2 a {
    color       : #EF3632;
    font-size   : 11px;
    font-weight : 500;
}


.titulo_sistema {
    font-size    : 18px !important;
    font-weight  : 600 !important;
    font-variant : petite-caps;
    margin       : 10px 5px;
}

.subtitulo_sistema {
    font-size     : 12px !important;
    font-weight   : 600;
    font-variant  : petite-caps;
    padding-left  : 25px;
    margin-top    : 0;
    margin-bottom : 10px;
}

hr {
    border           : none;
    border-top       : 1px solid #DDDDDD !important;
    color            : #DDDDDD !important;
    background-color : #FAFAFA !important;
    height           : 1px;
}

.form_inputs_container {
    display        : table;
    border-spacing : 5px;
}

.user_title_superU {
    margin      : 5px 0 20px 0;
    font-size   : 14px !important;
    font-weight : 500;
}

.leyend_title_superU {
    margin    : 5px 0 10px 0;
    font-size : 14px
}

.ul_superU {
    margin-bottom : 20px;
    padding-left  : 20px;
}

.li_superU {
    margin-bottom : 10px;
}

.li_superU::marker {
    content : '> ';
    color   : #8d8d8d;
}

.anchor_system_sU {
    color     : #8d8d8d;
    font-size : 13px;
}

.anchor_system_sU:hover {
    cursor          : pointer;
    color           : #0099FF;
    font-size       : 12px;
    font-weight     : 500;
    text-decoration : underline;
}

.msjRecoverPass {
    font-size : 14px;
    color     : #747474;
}

.remark {
    font-weight : 600;
}


.tc_body {
    background-color : #e1e1e1;
    overflow         : visible;
}

.tc_container {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    position       : relative;
    height         : auto;
    padding        : 5px;
    box-sizing     : border-box;
    width          : 80%;
    margin-top     : 0;
    overflow       : auto;
}

.tc_section {
    position      : relative;
    width         : 100%;
    padding       : 30px;
    margin        : 0 0 10px 0;
    box-sizing    : border-box;
    border-radius : 30px;
    background    : #eaeaea;
    animation     : input_opacity 0.2s cubic-bezier(.55, 0, .1, 1);
    text-align    : justify;
    color         : #454545;
}

.tc_section h1, h2 {
    text-align : center;
}

.tc_section h3 {
    margin-top    : 30px;
    margin-bottom : 5px;
}

#btnServicioSINPROL {
    background-color : #DB0743;
    color            : #fff;
    border-radius    : 50%; /* Si quieres que sea círculo perfecto */
    height           : 40px;
    width            : 40px; /* igual que height si quieres círculo */
    display          : flex; /* flexbox para centrar */
    align-items      : center; /* centra vertical */
    justify-content  : center; /* centra horizontal */
    text-decoration  : none; /* quita subrayado */
    font-size        : 18px; /* controla tamaño del ícono */
    margin           : 0 auto;
    cursor           : pointer;
}