/*ESTILOS NEW IMAGE GREX 23-09-2019*/
::selection {
    background-color: #F63072;
    color: white;
}
.bodyhtml, .loginhtml {
    height: 100%;
}

.bodyhtml {
    margin-bottom: 0;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    font-size: 14px;
    color: #3C3D43;
    font-family: "Open Sans" !important;
    background: #F2F2F2;
    margin-bottom: 70px;
}

.chks_autoconsulta {
    visibility: hidden;
}

.checkito {
    display: block;
    position: relative;
    width: 70px;
    height: 30px;
    top: 5px;
    background: #eaecef;
    border-radius: 15px;
    box-shadow: inset 0px 1px 1px rgba(206,212,218,0.6), 0px 1px 0px rgba(255,255,255,0.3);
}

.checkito label {

    /* aspecto */
    display: block;
    width: 34px;
    height: 20px;
    border-radius: 17px;
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.35);
    background: #fcfff4;
    background: linear-gradient(to top, #5f5f5f 0%, #5f5f5f 40%, #5f5f5f 100%);
    cursor: pointer;

    /* Posicionamiento */
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;

    /* Comportamiento */
    transition: all .4s ease;

    /* ocultar el posible texto que tenga */
    overflow: hidden;
    text-indent: 35px;
    transition: text-indent 0s;
}

.checkito .chks_autoconsulta:checked + label {
    left: auto;
    right: 5px;
    background: linear-gradient(to top, #f53172 0%, #f53172 40%, #f53172 100%);
}

.checkito .chks_autoconsulta:disabled + label {
    background: linear-gradient(to top, #e9ecef 0%, #e9ecef 40%, #e9ecef 100%);
}

.checkito:after {
    content: 'NO';
    font: 12px/30px Arial, sans-serif;
    color: #AAA;
    position: absolute;
    right: 10px;
    z-index: 0;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(255,255,255,.20);
}

.checkito:before {
    content: 'SÍ';
    font: 12px/30px Arial, sans-serif;
    color: #f63072;
    position: absolute;
    left: 10px;
    z-index: 0;
    font-weight: bold;
}
#rqa{
    width: 20px;
    height: 20px;
}

.padding-sep {
    padding-top: 50px;
    padding-bottom: 50px;
}

.padding-sep-bottom {
    padding-bottom: 50px;
}

.padding-sep-top {
    padding-top: 30px;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
    background: #3C3D43 !important;
    border: #3C3D43 !important;
    margin-bottom: 15px;
    outline: none !important;
    box-shadow: none !important;
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
    color: white;
    background: #F63072 !important;
    border: #F63072 !important;
    margin-bottom: 15px;
    outline: none !important;
    box-shadow: none !important;
}

.btn-success,
.btn-success:hover,
.btn-success:focus {
    background: #CECED0 !important;
    border: #CECED0 !important;
    color: #3C3D43 !important;
    margin-bottom: 15px;
    outline: none !important;
    box-shadow: none !important;
}

input:hover,
input:focus,
select:hover,
select:focus {
    border: solid 1px #246EDC !important;
    outline: none !important;
    box-shadow: none !important;
}

header {
    background: #3C3D43;
    color: white;
}

header .bg-white {
    background-color: white;
    padding: 20px 0;
}

header .logo {
    width: 100px;
    vertical-align: baseline;
}

header .logo-empresa {
    height: 30px;
    vertical-align: baseline;
}

header .btn,
header .btn:hover,
header .btn:focus {
    color: white;
    outline: none;
    box-shadow: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 150px;
}

header span {
    color: #F63072;
}

header .empresa {
    margin-bottom: -9px;
    padding-right: 12px;
}

h4 strong {
    color: #F63072;
}
h5 {
    font-size: 25px;
    margin-bottom: 20px;
}

h5 strong {
    color: #F63072;
}

.dropdown-usuario1 {
    outline: none;
    box-shadow: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 150px;
}

.dropdown-usuario1,
.dropdown-usuario1:hover,
.dropdown-usuario1:focus {
    color: white;
    outline: none;
    box-shadow: none;
}


.dropdown.usuario .datos-usuario li {
    display: block !important;
    padding: 0 !important;
}

.dropdown.usuario .datos-usuario li a,
.dropdown.usuario .datos-usuario li a:hover {
    padding: 10px !important;
    border-bottom: 0 !important;
}


.desplegable {
    background-color: #3C3D43;
    border: #43434B solid 1px;
    padding: 0 !important;
    border-radius: 0;
}

.desplegable li a {
    color: white;
    font-size: 13px;
    display: block;
    padding: 10px;
}

.desplegable li a:hover {
    background: #F63072;
    color: white;
    text-decoration: none;
}

.desplegable hr {
    background: #696b73;
    padding: 0px;
    margin: 10px 0px;
}

nav.navbar-dark.bg-dark {
    background: #3C3D43 !important;

    text-align: center;
}

nav.navbar-dark.bg-dark .navbar-toggler {
    border: none;
}

nav.navbar-dark.bg-dark .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

nav.navbar-dark.bg-dark ul li {
    padding: 0 15px 0 0 !important;
}

nav.navbar-dark.bg-dark ul li a {
    color: white !important;
    border-bottom: solid 3px transparent;
    margin: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

nav.navbar-dark.bg-dark ul li a:hover {
    border-bottom: solid 3px white;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

nav.navbar-dark.bg-dark ul li a.active {
    border-bottom: solid 3px #F63072;
}

nav ul {
    margin: auto !important;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-size: 14px;
}

.rowaj {
    width: 106% !important;
    text-align: left;
}

.bg {
    background-image: url("../img/bg.jpg");
    background-size: cover;
    height: 100%;
    background-position: center center;
}

.bg .contenido-logo {
    display: table;
    height: 100%;
    width: 100%;
}

.bg .contenido-logo .logo-login {
    display: table-cell;
    height: 100%;
    width: 150px;
    margin: auto;
}

.bg .img-corte {
    display: none;
}

.bg .container-fluid {
    height: 100%;
}

.bg .container-fluid .row {
    height: 100%;
    position: relative;
}

.bg-gris {
    /*background: #F2F2F2;*/
    height: auto;
    padding: 50px 20px;
}

.bg-gris form .info-login {
    color: #3C3D43;
}

.bg-gris form .info-login p {
    margin-bottom: 0;
}

.bg-gris form .contenido-login-formulario {
    margin: auto;
    padding: 0 !important;
    background: white;
}

.recuperarpass {
    color: #F63072 !important;
    text-align: center !important;
    display: block !important;
    margin-top: 50px;
}

.bg-gris form .alert-danger {
    margin-top: 20px;
    text-align: center;
}

.card {
    margin-bottom: 40px;
    border: none;
    border-radius: 0;
}

.card .card-body {
    padding: 30px;
}

.card .celeste {
    color: white;
    font-weight: bold;
    font-size: 25px;
    background: #F63072;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
}

.card .morado {
    color: white;
    font-weight: bold;
    font-size: 25px;
    background: #246EDC;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
}

.card .amarillo {
    color: white;
    font-weight: bold;
    font-size: 25px;
    background: #AF48D0;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
}

.card-d {
    min-height: 330px;
}

.tabla_asistencia {
    margin: 0 15px 15px 15px;
    /*margin-right: 15px;*/
    /*margin-bottom: 15px;*/
}

.tabla_asistencia:empty {
    display: none;
}

.bg-blanco {
    /*background: white;*/
}

.form-control {
    font-size: 0.8rem;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: white;
}

.table td, .table th {
    padding: .75rem 0.4rem;
}

table {
    margin-bottom: 0 !important;
}

table thead {
    border-bottom: solid 1px #e3e3e3;
}

table button {
    margin-bottom: 0 !important;
    max-width: 100px !important;
    float: right !important;
}

.contenido-logo {
    display: table;
    height: 100%;
    width: 100%;
}

.contenido-logo .logo-login {
    vertical-align: middle;
    display: table-cell;
    height: 100%;
    width: 150px;
    margin: auto;
    text-align: center;
}

.contenido-logo .logo-login h6 {
    color: white;
    margin-bottom: 0;
    margin-top: 15px;
}

.contenido-logo .logo-login h6 strong {
    color: #F63072 !important;
}

.logo-movil {
    width: 150px !important;
}

#login {
    /**max-width: 350px;**/
    margin: auto;
}

#login h6 {
    color: #3C3D43;
    text-align: center;
    margin: 0 0 10% 0;
    font-size: 1.5rem;
    font-weight: 100;
}

#login h6 strong {
    color: #F63072 !important;
}

#login .info-login p {
    margin-bottom: 30px;
}

.tac {
    display: none;
}

.tabla_asistencia th {
    padding-left: 5px;
}

.tabla_asistencia h4 {
    font-size: 14px;
}

.nb, .nb:focus {
    border: none !important;
    outline: none;
    box-shadow: none;
}

.pl-0-xs {
    padding-left: 0 !important;
}


.display-table {
    display: table;
    height: 100%;
    width: 100%;
}
.display-table-cell {
    display: table-cell;
    vertical-align: middle;
}
.bg-login-cuadro {
    background: white;
    max-width: 480px !important;
    padding: 50px 35px;
    border-radius: 30px;
    margin: auto;
}
.img-logo-rsp {

}
.form-control {
    height: 39px !important;
    padding: 9px 12px !important;
}
button {
    height: 42px;
    line-height: 42px;
}
.table-icns button {
    border: none;
    background: transparent;
}
.table-icns .fa-file-pdf-o {
    color: #b30c00 !important;
    font-size: 20px;
}
.table-icns .fa-eye {
    color: #AF48D0 !important;
    font-size: 20px;
}
.table-icns2 button{
    border: none;
    background: transparent;
}
.table-icns2 .fa-file-pdf-o {
    color: #b30c00 !important;
    font-size: 40px;
}
.table-icns2 .fa-file-excel-o {
    color: #017340 !important;
    font-size: 40px;
}
.table-icns button:focus, .table-icns2 button:focus {
    outline: none;
    box-shadow: none;
}
.btn-azul, .btn-azul:hover {
    background-color: #246EDC !important;
    border: 1px solid #246EDC !important;
    padding-left: 20px;
    padding-right: 20px;
    color: white !important;
}
.btn-rojo, .btn-rojo:hover {
    border: solid 1px #ED2121 !important;
    color: #ED2121;
    padding-left: 20px;
    padding-right: 20px;
    background: transparent !important;
}
@media (min-width: 576px) {
    .img-logo-rsp {
    }
    .pl-0-xs {
        padding-left: 15px !important;
    }
}
@media (max-width: 991px) {
    .img-logo-rsp {
        width: 150px;
    }
}
@media (min-width: 992px) {

    .tac {
        display: inline-block;
        vertical-align: bottom;
        margin-bottom: 0;
        color: #3C3D43;
        font-weight: 600;
        margin-left: 5px;
        font-size: 16px;
    }

    .tac strong {
        color: #F63072;
    }

    .contenido-logo {
        display: table;
    }

    .contenido-logo .logo-login {
        margin: auto;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    .contenido-logo .logo-login .logo {
        width: 200px;
        margin: auto;
        display: inline-block;
    }

    .contenido-logo .logo-login h5 {
        display: inline-block;
        color: white;
        margin-bottom: 0;
        vertical-align: bottom;
        margin-left: 20px;
    }


    header .btn,
    header .btn:hover,
    header .btn:focus {
        color: white;
        outline: none;
        box-shadow: none;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: auto;
    }

    .bg .contenido-logo {
        display: table;
    }

    .bg .contenido-logo .logo-login {
        width: 300px;
        margin: auto;
        display: table-cell;
        vertical-align: middle;
    }

    header .logo {
        margin-left: 0;
    }

    nav ul li {
        display: inline-block !important;
    }

    .bg-gris {
        padding: 0 7%;
        height: 100%;
        display: table;
    }

    .bg-gris form {
        display: table-cell;
        vertical-align: middle;
    }

    .bg-gris form .contenido-login-formulario {
        margin: 0;
        padding: 30px;
    }

    .dropdown-usuario1 {
        width: 100%;
    }
}


.inputs-code {
    display: inline-block;
    width: 50px;
    text-align: center;
    margin-right: 40px;
}

.inputs-code:not(:last-child) {
    margin-right: 20px;
}

@media (min-width: 1200px) {
    .bg-gris {
        padding: 0 9%;
    }

    .contenido-logo .logo-login .logo {
        width: 300px;
    }
    .img-logo-rsp {
        float: right;
        width: 400px !important;
    }
}

label.error:empty {
    display: none !important;
}



/** VALIDACION **/
.validacion {
    /*background: #F5F5F7;*/
}
.validacion-panel {
    background: white;
    margin: 30px 0;
    padding: 60px;
}
.validacion-panel small {
    display: block;
}
.validacion-panel h2 {
    font-size: 18px;
    margin-top: 0;
}
.validacion p {
    font-size: 16px;
}
.validacion-panel .logo-grex {
    width: 120px;
    margin-bottom: 30px;
}
.validacion-bg-gris {
    background: #F5F5F7;
    padding: 30px;
    margin-top: 30px !important;
}
.validacion-panel .btn-secondary {
    margin-top: 30px;
}
.btn-icono {
    width: 55px;
    height: 55px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 20px;
}
.btn-icono-error {
    border: solid 1px #ED2121;
    color: #ED2121;
}
.btn-icono-ok {
    color: white;
    background: #246EDC;
}
.btn-icono .material-icons {
    line-height: 55px;
    font-size: 40px;
}
.btn-iconov {
    background: none;
    border: none;
}
.btn-iconov:focus {
    outline: none !important;
    box-shadow: none !important;
}
.btn-iconov .visib:hover,
.btn-iconov .visib:focus,
.btn-iconov .visib{
    color: #AF48D0;
    outline: none !important;
    box-shadow: none !important;
}
@media (min-width: 768px) {
    .validacion-panel h2 {
        text-align: right;
    }
    .validacion-panel small {
        text-align: right;
    }
    .validacion-panel .logo-grex {
        margin-bottom: 0;
    }
    .btn-icono {
        margin-bottom: 0;
    }
}

.tableg3 a {
    margin-right: 5px;
    float: right;
    display: block;
}
.tableg3 tr td {
   border-top: 1px solid #dee2e6;
   padding: 10px 0 10px 10px!important;
}
.tableg3 button {
    height: 0;
    line-height: 0;
    display: block;
}