/* ##########################################################
   #         Estilos para Inicio de Sesión (Login)          # 
   #         SONARH Versión 5 2022 [Personalizado]          #
   ########################################################## */


/* Familia tipográfica */
@font-face {
    font-family: Custom_Oswald;
    src: url("../fonts/Oswald-Regular.ttf") format("TrueType");
    font-weight: normal;
    font-style: normal;
}

/* Imagen de fondo */
.Fondo_LoginPage {
    background-image: url('../Imagenes/Login/bk_logo.png'), url('../Imagenes/Login/bk_body.png'), url('../Imagenes/Login/bk_login.png');
    background-position: 110% 200px, 0px 0px, 0px 0px;
    background-repeat: no-repeat, no-repeat, repeat-y;
    background-size: 40%, auto, auto;
    background-color: #006699;
}

/* Cuerpo del documento HTML */
body {
    margin: 0;
    font-family: Custom_Oswald, sans-serif;
    font-size: 12px;
    line-height: 20px;
    color: #666666;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ##########################################################
   #                Pie Pagina Login [INICIA]               #
   ########################################################## */
.PiePagina_Login {
    margin-bottom: 0;
    text-align: left;
    padding-left: 62%;
    background-color: #409FC1;
    border-top: 0px solid #ccc;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-image: url('../Imagenes/Login/bk_footer.png');
    background-color: #006699;
    background-repeat: no-repeat;
    color: #FFF;
    font-size: 12px;
}
/* ##########################################################
   #                Pie Pagina Login [TERMINA]              #
   ########################################################## */


/* ##########################################################
   #            Etiqueta Pie Pagina Login [INICIA]          #
   ########################################################## */
a.Etiqueta_PiePagina_Login {
    color: #ffffff;
    text-decoration: underline;
}

    a.Etiqueta_PiePagina_Login:hover {
        color: #0097DF;
        text-decoration: none;
    }
/* ##########################################################
   #           Etiqueta Pie Pagina Login [TERMINA]          #
   ########################################################## */


/* ###############################################################
   # Animación Para Logo-Botón (De Abajo Hacia Arriba) [INICIA]  #
   ############################################################### */
.animacion_LogoBotonAbajoArriba {
    position: relative;
    animation: animacion_LogoBotonAbajoArriba 1.25s;
}

@keyframes animacion_LogoBotonAbajoArriba {
    from {
        bottom: -525px;
        opacity: 0;
    }

    to {
        bottom: 0;
        opacity: 1;
    }
}
/* ###############################################################
   # Animación Para Logo-Botón (De Abajo Hacia Arriba) [TERMINA] #
   ############################################################### */


/* ##############################################################
   #  Animacion Efecto Latido para la imagen del logo [INICIA]  #
   ############################################################## */
.cssEfectoLatido {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
}

    .cssEfectoLatido:hover {
        -webkit-animation-name: cssEfectoLatido;
        animation-name: cssEfectoLatido;
        -webkit-animation-duration: 0.60s;
        animation-duration: 0.60s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }

@-webkit-keyframes cssEfectoLatido {
    from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes cssEfectoLatido {
    from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
/* ##############################################################
   #  Animacion Efecto Latido para la imagen del logo [TERMINA] #
   ############################################################## */


/* ##############################################################
   #   Estilos para "Información sobre herramientas"  [INICIA]  #
   #       TOOLTIP para elementos que tengan descripción        #
   ############################################################## */
[data-tooltip],
.tooltip {
    position: relative;
    cursor: pointer;
}

    /* Estilos base para toda la información */
    [data-tooltip]:before,
    [data-tooltip]:after,
    .tooltip:before,
    .tooltip:after {
        position: absolute;
        visibility: hidden;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
        -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
        -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        pointer-events: none;
    }

    /* Muestra toda la información al estar encima del objeto o en el enfoque de éste */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after,
    [data-tooltip]:focus:before,
    [data-tooltip]:focus:after,
    .tooltip:hover:before,
    .tooltip:hover:after,
    .tooltip:focus:before,
    .tooltip:focus:after {
        visibility: visible;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
    }

    /* Estilos de base para la flecha direccional */
    .tooltip:before,
    [data-tooltip]:before {
        z-index: 1001;
        border: 6px solid transparent;
        background: transparent;
        content: "";
    }

    /* Estilos de base para el área de contenido */
    .tooltip:after,
    [data-tooltip]:after {
        z-index: 1000;
        padding: 8px;
        width: 180px;
        background-color: #000;
        background-color: hsla(0, 0%, 20%, 0.9);
        color: #fff;
        content: attr(data-tooltip);
        font-size: 14px;
        line-height: 1.2;
    }

    /* Direcciones */

    /* Arriba (predeterminado) */
    [data-tooltip]:before,
    [data-tooltip]:after,
    .tooltip:before,
    .tooltip:after,
    .tooltip-top:before,
    .tooltip-top:after {
        bottom: 100%;
        left: 50%;
    }

    [data-tooltip]:before,
    .tooltip:before,
    .tooltip-top:before {
        margin-left: -6px;
        margin-bottom: -12px;
        border-top-color: #000;
        border-top-color: hsla(0, 0%, 20%, 0.9);
    }

    /* Horizontalmente alinear arriba/abajo */
    [data-tooltip]:after,
    .tooltip:after,
    .tooltip-top:after {
        margin-left: -80px;
    }

    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after,
    [data-tooltip]:focus:before,
    [data-tooltip]:focus:after,
    .tooltip:hover:before,
    .tooltip:hover:after,
    .tooltip:focus:before,
    .tooltip:focus:after,
    .tooltip-top:hover:before,
    .tooltip-top:hover:after,
    .tooltip-top:focus:before,
    .tooltip-top:focus:after {
        -webkit-transform: translateY(-12px);
        -moz-transform: translateY(-12px);
        transform: translateY(-12px);
    }

/* Izquierda */
.tooltip-left:before,
.tooltip-left:after {
    right: 100%;
    bottom: 50%;
    left: auto;
}

.tooltip-left:before {
    margin-left: 0;
    margin-right: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-left-color: #000;
    border-left-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
    -webkit-transform: translateX(-12px);
    -moz-transform: translateX(-12px);
    transform: translateX(-12px);
}

/* Fondo */
.tooltip-bottom:before,
.tooltip-bottom:after {
    top: 100%;
    bottom: auto;
    left: 50%;
}

.tooltip-bottom:before {
    margin-top: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-bottom-color: #000;
    border-bottom-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
    -webkit-transform: translateY(12px);
    -moz-transform: translateY(12px);
    transform: translateY(12px);
}

/* Derecha */
.tooltip-right:before,
.tooltip-right:after {
    bottom: 50%;
    left: 100%;
}

.tooltip-right:before {
    margin-bottom: 0;
    margin-left: -12px;
    border-top-color: transparent;
    border-right-color: #000;
    border-right-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
    -webkit-transform: translateX(12px);
    -moz-transform: translateX(12px);
    transform: translateX(12px);
}

/* Mueva las flechas direccionales un poco hacia la izquierda/derecha */
.tooltip-left:before,
.tooltip-right:before {
    top: 3px;
}

/* Verticalmente centro de contenido para izquierda/derecha */
.tooltip-left:after,
.tooltip-right:after {
    margin-left: 0;
    margin-bottom: -16px;
}
/* ##############################################################
   #   Estilos para "Información sobre herramientas" [TERMINA]  #
   #       TOOLTIP para elementos que tengan descripción        #
   ############################################################## */


/* ##########################################################
   #                CheckBox Login [INICIA]                 #
   ########################################################## */
.checkbox_login, .radio_login {
    cursor: pointer;
}

    .checkbox_login label:after,
    .radio_login label:after {
        content: '';
        display: table;
        clear: both;
    }

    .checkbox_login .cr,
    .radio_login .cr {
        position: relative;
        display: inline-block;
        border: 1px solid #a9a9a9;
        border-radius: .25em;
        width: 1.3em;
        height: 1.3em;
        float: left;
        margin-right: .5em;
    }

    .radio_login .cr {
        border-radius: 50%;
    }

        .checkbox_login .cr .cr-icon,
        .radio_login .cr .cr-icon {
            position: absolute;
            font-size: .8em;
            line-height: 0;
            top: 50%;
            left: 20%;
        }

        .radio_login .cr .cr-icon {
            margin-left: 0.04em;
        }

    .checkbox_login label input[type="checkbox"],
    .radio_login label input[type="radio"] {
        display: none;
    }

        .checkbox_login label input[type="checkbox"] + .cr > .cr-icon,
        .radio_login label input[type="radio"] + .cr > .cr-icon {
            transform: scale(3) rotateZ(-20deg);
            opacity: 0;
            transition: all .3s ease-in;
        }

        .checkbox_login label input[type="checkbox"]:checked + .cr > .cr-icon,
        .radio_login label input[type="radio"]:checked + .cr > .cr-icon {
            transform: scale(1) rotateZ(0deg);
            opacity: 1;
        }

        .checkbox_login label input[type="checkbox"]:disabled + .cr,
        .radio_login label input[type="radio"]:disabled + .cr {
            opacity: .5;
        }
/* ##########################################################
   #                CheckBox Login [TERMINA]                #
   ########################################################## */


/* ##########################################################
   #    Anular las configuraciones de Bootstrap [INICIA]    #
   ########################################################## */
.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .8;
}

.modal-content {
    background-color: #f5f5f5;
    border: 1px solid #cccccc;
    border-radius: 5px;
    outline: 0;
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

.modal-header {
    min-height: 16.5px;
    padding: 15px 15px 15px 15px;
    border-bottom: 1px solid #e5e5e5;
    background-color: #f5f5f5;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.modal-body {
    position: relative;
    padding: 5px 15px 5px 15px;
}

.modal-footer {
    background-color: #f5f5f5;
    padding: 15px 15px 15px 15px;
    text-align: center;
    border-top: 0px;
}

.centered-modal.in {
    display: flex !important;
}

.centered-modal .modal-dialog {
    margin: auto;
}
/* ##########################################################
   #    Anular las configuraciones de Bootstrap [TERMINA]   #
   ########################################################## */