﻿/*@charset "utf-8";*/

.aplicacion-nombre::after {
    content: "Sophia";
}

.aplicacion-version::after {
    content: "v1.0";
}

.aplicacion-fecha-ultima-actualizacion::after {
    content: "23/10/2020";
}

/*LAYOUT DE CARGA---INICIO*/
/*body {
    overflow: hidden;
    padding: 75px 0 0 0;
    background-image: var(--imagen-fondo);
    overflow: visible;
    background-position: center top;
    background-size: cover;
}*/

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background-image: url('../Content/Images/Fondos/fondo11.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: var(--color-3-claro);
}

#loader {
    height: 100px;
    left: calc(50% - 50px);
    position: absolute;
    top: 65%;
    width: 100px;
    /*background-color: var(--color-2);*/
}

#loader_logo {
    width: 500px;
    left: calc(50% - 250px);
    position: absolute;
    top: 30%;
    /*background-color: var(--color-3);*/
    margin-top: -60px;
}


#preloader .fondo-translucido {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: var(--color-3-claro-op75);
    box-shadow: inset 1px 1px 150px rgba(0, 0, 0, 0.2);
}

#preloader .raya-izquierda, #preloader .raya-derecha {
    height: 30px;
    width: calc(50% - 250px - 50px);
    position: absolute;
    top: 30%;
    background-color: var(--color-2);
}

#preloader .raya-izquierda {
    left: 0;
}

#preloader .raya-derecha {
    right: 0;
}


#preloader .banda-contenedora {
    width: 100%;
    position: absolute;
    top: 65%;
    height: 150px;
    background-color: var(--color-1);
}

#preloader .loader {
    width: 800px;
    position: absolute;
    top: 35%;
    left: calc(50% - 400px);
}

#preloader .dot {
    animation: 3s loader ease-in-out infinite;
    border-radius: 5% 40% 5% 5%;
    position: absolute;
    color: var(--color-3-claro);
    font-size: 50px;
    background-color: var(--color-2);
}

    #preloader .dot:nth-child(1) {
        /*background-color: #8cc759;*/
        animation-delay: 0.5s;
    }

    #preloader .dot:nth-child(2) {
        /*background-color: #8c6daf;*/
        animation-delay: 0.4s;
    }

    #preloader .dot:nth-child(3) {
        /*background-color: #ef5d74;*/
        animation-delay: 0.3s;
    }

    #preloader .dot:nth-child(4) {
        /*background-color: #f9a74b;*/
        animation-delay: 0.2s;
    }

    #preloader .dot:nth-child(5) {
        /*background-color: #60beeb;*/
        animation-delay: 0.1s;
    }

    #preloader .dot:nth-child(6) {
        /*background-color: #fbef5a;*/
        background-color: transparent;
        animation-delay: 0s;
        font-size: 100px;
        top: -30px;
        left: -20px;
        color: var(--color-3);
    }

@keyframes loader {
    15% {
        transform: translateX(0);
    }

    45% {
        transform: translateX(743px);
    }

    65% {
        transform: translateX(743px);
    }

    95% {
        transform: translateX(0);
    }
}
/*LAYOUT DE CARGA------FIN*/


/*Menú usuario---------------------------INICIO*/
.menu-usuario-avatar {
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-2);
    background-size: cover;
    float: left;
    border-radius: 50%;
    /*border-radius: 20%;*/
    margin-top: -7px;
    margin-right: 10px;
    background-color: #ffffff;
    background-image: url('data:image/jpg;base64, iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAHTAAAB0wFzb496AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARpQTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA55ZlmQAAAF10Uk5TAAECAwUHCQoLEBEWGBkeHywtLjAyNDc9SEpLTE1TVltcZGVoaW5ydHZ6fn+AjI+Rk5WcnZ6go6Snqaq1tri7v8DExsjJys7W2Nnd3+Dh4uXm6ezt7/Dy9vj6/P3+BRcWFQAAAYVJREFUGBmlwYtS01AUBdBNC0WUUBBRIQgK+EBL0PIKVeQhooGrxgrKI/v/f0MHHR1vcmbOyV0LEEWPX77Jzvsf9npPxmA3tXnBv4p3c7BprNGzfgMGzS2WfLwFtYFtVliH2gyrFHehtctK7wegc4eCe9B5SsEidNYoWIXOAQVvoXNCwTF0HAUOOo4CBx1HgYOOo8BBx1HgoOMocFAZ/k7B6RA0HlG0AI1dig6h8Y2iU2h8oegrNDYoSqFx+wcF5+NQeUjBEpQOWek1tB6wUgyt5idW+NyE2jNWeA69kZwl+U0Y3GdJDJNX9GzAZpieERjRAyt6YBTRE8EmpieGTYeeDkxaGT1ZCxYJSxIYTBcsKaah1UoKViiSFhSi+EVGQdaJI8jmj6h0NI+yyX0a7E/Cs3xJk8tl/GeFZiv4p9FlDd0G/hjssZbeIH5LWFOCa7OsLcYvo33W1h8F0GWALjBxxQBXE9hhkB0wEBgIDAQGQs4gOVIGSdE+Y4CzNtBOc9aUp238BMvTBgCKcDeuAAAAAElFTkSuQmCC');
}
/*Menú usuario------------------------------FIN*/

.navbar.fixed-top {
    background-color: var(--color-1);
}

body {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    /*background-color: var(--color-3-muy-oscuro);*/
    background-image: url('../Content/Images/Fondos/fondo11.jpg');
    color: var(--color-1-muy-oscuro);
}

footer {
    /*height: 50px;*/
    background-color: var(--color-1);
    text-align: center;
    padding: 10px;
    color: var(--color-1-claro);
}

.elipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.elipsis-izquierda {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* "overflow" value must be different from "visible" */
    direction: rtl;
    text-align: left;
}

a {
    cursor: pointer;
    color: var(--color-1);
}

    a:hover {
        cursor: pointer;
        color: var(--color-2);
    }

.label-general {
    font-weight: bold;
    margin-bottom: 3px;
    margin-bottom: 0;
    margin-top: 2px;
}

input[type="text"], select, input[type="password"], input[type="number"], textarea {
    height: 32px;
    /*width: 100%;*/
    padding: 0 5px;
    border-radius: 0;
    border: 1px solid #ced4da;
}

    input[type="text"]:hover, input[type="password"]:hover, input[type="number"]:hover, textarea:hover {
        border: 1px inset var(--color-2);
    }


.imagen-fondo {
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
}

.hr-personalizado {
    border-width: 1px 0;
    border-style: solid;
    border-color: var(--color-2);
    margin: 15px 0;
    box-shadow: none;
    text-shadow: none;
    width: 100%;
}
.hr-personalizado.color-1 {
    border-color: var(--color-1);
}
.hr-personalizado.color-2 {
    border-color: var(--color-2);
}
.hr-personalizado.color-3 {
    border-color: var(--color-3);
}

.boton-general {
    position: relative;
    height: 40px;
    border-radius: 0;
    background-color: var(--color-1);
    color: var(--color-3-claro);
    border-top: none;
    border-right: none;
    border-bottom: 3px solid transparent;
    border-left: none;
    font-size: 17px;
    cursor: pointer;
}

    .boton-general:hover {
        background-color: var(--color-3);
        border-bottom: 3px solid var(--color-2);
    }

    .boton-general:active {
    }

    .boton-general:disabled,
    .boton-general:disabled:hover {
        /*background: #eee;
        color: #aaa;
        border-color: #aaa;
        cursor: default;
        text-shadow: none;
        position: static;
        box-shadow: none;*/
        pointer-events: none;
        opacity: 0.4;
    }


.fieldset-general {
    background-color: var(--color-1-claro-op2);
    width: 100%;
    padding: 0 0 15px 0;
}

    .fieldset-general > .legend-general {
        border-bottom: 2px solid var(--color-2);
        background-color: var(--color-2-claro);
        padding: 5px 15px 7px 15px;
        margin-bottom: 10px;
        font-size: 1.5rem;
    }


.disabled-conjunto {
    pointer-events: none;
    opacity: 0.4;
}

    .disabled-conjunto select, .disabled-conjunto input[type="text"] {
        /*background-image: url('Images/gray_diagonal_pattern.jpg');
        opacity: 0.3;*/
        background-color: #e9ecef;
        /*opacity: 1;*/
    }

.disabled-conjunto {
    pointer-events: none;
    opacity: 0.4;
}

    .disabled-conjunto select, .disabled-conjunto input[type="text"] {
        /*background-image: url('Images/gray_diagonal_pattern.jpg');
        opacity: 0.3;*/
        background-color: #e9ecef;
        /*opacity: 1;*/
    }

.area-contenido-login {
    position: absolute;
    width: 40%;
    right: 0;
    background-color: var(--color-3-op2);
    height: 100%;
    min-width: 550px;
    min-height: 550px;
    border-left: 10px solid var(--color-2);
}

.pie-login {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: var(--color-1-muy-oscuro);
    background-color: var(--color-3-claro-op75);
    padding: 5px;
    /*text-shadow: 1px 1px 1px var(--color-1-muy-oscuro-op75);*/
}

    .pie-login img {
        height: 20px;
    }

#contenedorLogin, #contenedorError, #contenedorSesionCaducada, #contenedorRegistrarUsuario {
    position: absolute;
    text-align: center;
    width: 500px;
    /*background-color: var(--color-1-op75);*/
    background-color: rgba(var(--previo-color-1), 0.9);
    left: calc(50% - 250px);
    top: calc(50% - 315px);
    padding: 50px;
    /*border: 1px solid var(--color-3);*/
    color: var(--color-3-claro);
}

#contenedorLogin {
    top: calc(50% - 250px);
    padding: 50px 110px;
}

    #contenedorLogin .boton-general {
        background-color: var(--color-1-claro);
        color: var(--color-1);
    }

        #contenedorLogin .boton-general:hover {
            background-color: var(--color-3-claro);
            border-bottom: 3px solid var(--color-2);
        }

    #contenedorLogin a, #contenedorError a, #contenedorSesionCaducada a, #contenedorRegistrarUsuario a {
        color: var(--color-3-claro);
    }

        #contenedorLogin a:hover, #contenedorError a:hover, #contenedorSesionCaducada a:hover, #contenedorRegistrarUsuario a:hover {
            text-decoration-line: underline;
            text-decoration-style: wavy;
            text-decoration-color: var(--color-2);
        }

    #contenedorLogin input[type="text"], #contenedorLogin select, #contenedorLogin input[type="password"] {
        width: calc(100% - 50px);
        margin: 0 25px;
    }

    #contenedorLogin input[type="button"], #contenedorLogin button {
        width: calc(100% - 50px);
    }


.navbar-light .navbar-nav .nav-link {
    color: var(--color-1-claro);
}

.navbar-light .navbar-nav .nav-item.active .nav-link {
    color: var(--color-3-claro);
    font-weight: bold;
}

.navbar-light .navbar-nav .nav-item.active {
    border-bottom: 3px solid var(--color-3)
}

.navbar-light .navbar-nav .nav-item:hover .nav-link, .navbar-light .navbar-nav .nav-item:focus .nav-link {
    color: var(--color-1);
}

.nav-item {
    padding: 7px 15px;
    height: 56px;
}

    .nav-item:hover {
        background-color: var(--color-3-claro);
    }

/*Sobreescritura de los estilos del modal de Bootstrap---------------------------------------Inicio*/
.modal-header {
    background-color: var(--color-1);
    padding: 10px 1rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: var(--color-3-claro);
}

.modal-body {
    /*background-color: var(--color-3-claro-op2);*/
}
/*Sobreescritura de los estilos del modal de Bootstrap---------------------------------------Fin*/


/*Modificación de jQuery.ui-------------INICIO*/
.ui-front {
    z-index: 1050;
}
/*Modificación de jQuery.ui-------------FIN*/


/*Modificación de Chosen-------------INICIO*/
/*multiple*/
/*.chosen-container-multi {
    margin: 0 0 10px 0;
}*/

    .chosen-container-multi .chosen-choices {
        /*margin: 0 0 10px 0;*/
        background-image: none;
        /*border: inherit;
    font-family: inherit;*/
        padding: 0 2px;
        font-size: 14px;
        min-height: 25px;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        box-shadow: none;
    }

        .chosen-container-multi .chosen-choices li.search-choice {
            /*background-color: #cccccc;*/
            background-color: var(--color-1-claro);
            color: #ffffff;
            border: 1px solid #aaaaaa;
            border-radius: 0;
            background-image: none;
            box-shadow: none;
            text-shadow: 1px 1px 10px rgba(0,0,0,0.5);
        }

.opciones-ancho-completo + .chosen-container-multi .chosen-choices li.search-choice {
    width: 100%;
}

/*single*/
/*.chosen-container-single {
    margin: 0 0 10px 0;
}*/

.chosen-container-single .chosen-single {
    height: 25px;
    width: 100%;
    border: none;
    /*margin: 0 0 10px 0;*/
    padding: 0 0 0 5px;
    background-image: none;
    background-color: white;
    border-radius: 0;
    box-shadow: none;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
}

.chosen-container .chosen-results li.highlighted {
    background-color: var(--color-3);
    background-image: var(--color-3);
    color: #fff;
}


/*Adaptación a Bootstrap*/

.chosen-container-single .chosen-single {
    /*color: red;*/
    height: 30px;
    /*border-radius: 3px;*/
    border: 1px solid #CCCCCC;
}

    .chosen-container-single .chosen-single span {
        padding-top: 2px;
    }

    .chosen-container-single .chosen-single div b {
        margin-top: 2px;
    }

/*.chosen-container-active .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-single {
    border-color: #ccc;
    border-color: rgba(82, 168, 236, .8);
    outline: 0;
    outline: thin dotted \9;
    -moz-box-shadow: 0 0 8px rgba(82, 168, 236, .6);
    box-shadow: 0 0 8px rgba(82, 168, 236, .6)
}*/

/*Modificación de Chosen-------------FIN*/


/*Modificación de Datetimepicker-------------INICIO*/

/*.datetimepicker {
    @*background-color: var(--color-1-claro);*@
    background: url('../Content/Images/blanco_plano.jpg'), var(--color-1-claro-op2) !important;
    background-blend-mode: multiply !important;
    border-radius: 0;
}

[class*=" datetimepicker-dropdown"]::after {
    border-bottom: 6px solid var(--color-1-claro-op2);
}*/

.dropdown-menu .table-condensed > thead > tr:nth-child(1) {
    background-color: var(--color-1-claro);
}

.dropdown-menu .table-condensed > thead > tr:nth-child(2) {
    background-color: var(--color-2-claro);
}

.datetimepicker td, .datetimepicker th {
    width: 35px;
    height: 30px;
    border-radius: 0;
}

.datetimepicker table tr td span.active:active,
.datetimepicker table tr td span.active:hover:active,
.datetimepicker table tr td span.active.disabled:active,
.datetimepicker table tr td span.active.disabled:hover:active,
.datetimepicker table tr td span.active.active,
.datetimepicker table tr td span.active:hover.active,
.datetimepicker table tr td span.active.disabled.active,
.datetimepicker table tr td span.active.disabled:hover.active {
    background-color: var(--color-3);
}

.datetimepicker table tr td span.active, .datetimepicker table tr td span.active:hover, .datetimepicker table tr td span.active.disabled, .datetimepicker table tr td span.active.disabled:hover {
    background-image: none;
}

.datetimepicker table tr td.active:active,
.datetimepicker table tr td.active:hover:active,
.datetimepicker table tr td.active.disabled:active,
.datetimepicker table tr td.active.disabled:hover:active,
.datetimepicker table tr td.active.active,
.datetimepicker table tr td.active:hover.active,
.datetimepicker table tr td.active.disabled.active,
.datetimepicker table tr td.active.disabled:hover.active {
    background-color: var(--color-3);
}

.datetimepicker table tr td.active,
.datetimepicker table tr td.active:hover,
.datetimepicker table tr td.active.disabled,
.datetimepicker table tr td.active.disabled:hover {
    background-image: none;
}


.datetimepicker table tr td span:hover {
    background: var(--color-3-claro);
}

.datetimepicker thead tr:first-child th:hover, .datetimepicker tfoot tr:first-child th:hover {
    background: var(--color-3-claro);
}

.datetimepicker table tr td.day:hover {
    background: var(--color-3-claro);
}

.datetimepicker table tr td span:hover {
    background: var(--color-3-claro);
}



.datetimepicker table tr td span {
    border-radius: 0;
}

/*Modificación de Datetimepicker-------------FIN*/




/*
#loginCampos, #loginBotones {
    width: 100%;
    margin: 0 auto;
}

    #loginCampos div {
        width: 100%;
        margin-top: 15px;
    }

    #loginCampos input {
        font-family: Arial;
        font-size: small;
        padding-left: 5px;
    }

input[type="text"], select, input[type="passsword"] {
    width: 100%;
    height: 26px;
}

#password {
    width: 100%;
}

input[type="text"] {
    padding: 0 4px;
}

input, textarea, select, fieldset {
    border-color: #FC6604;
}


#loginCampos {
    margin-top: 30px;
}

#loginBotones {
    width: 100%;
    margin: 0 auto;
    margin-top: 30px;
}

#contenedorLogin {
    background-color: black;
    width: 28%;
    padding: 10px;
    border-color: black;
    border-radius: 5px;
    margin: 5% 21.5%;
}

#contenedorLogo {
    width: 100%;
    margin: 0 auto;
}

    #contenedorLogo fieldset {
        color: white;
        background-color: black;
    }

#cabeceraTitulo {
    float: left;
    margin-top: 5%;
    margin-left: 0%;
    font-size: 1.5em;
    font-family: Times New Roman;
    cursor: pointer;
    width: 40%;
    text-align: center;
    font-weight: bold;
}

.botonGeneral {
    background: #FC6604;
    border-radius: 0px;
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    height: 50px;
    border: none;
    border-bottom: 3px solid #FC6604;
}

    .botonGeneral:active {
        background: black;
    }

    .botonGeneral:hover {
        border-bottom: 3px solid black;
    }

    .botonGeneral:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

#loginCampos {
    font-weight: bold;
    color: white;
    font-size: 1.2em;
}

#btnLogin {
    width: 100%;
    margin-top: 20px;
}*/

/*POP UP RENOVAR CONTRASEÑA*/
/*.ui-dialog-titlebar {
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    background-color: #FC6604 !important;
}

#_contenedorLogin {
    background-color: black;
    width: 100%;
    padding: 10px;
    border-color: black;
}

.ui-dialog-titlebar-close {
    background-image: none;
    background-image: url('Images/delete.svg') !important;
    background-size: 20px 20px;
    border: none;
    background-color: black;
}

#_contenedorLogin {
    background-color: black;
    width: 100%;
    padding: 10px;
    border-color: black;
}

#_btnLogin {
    width: 100%;
    margin-top: 20px;
}

    #_btnLogin span {
        font-weight: bold;
        font-size: 1.3em;
    }

#_passwordAntigua, #_passwordNueva1, #_passwordNueva2 {
    width: 100%;
}*/

/*----------*/

/*@media (max-width: 1600px) {
    #cabeceraTitulo, .ui-dialog-title {
        font-size: 1em;
    }
}

@media (max-width: 1300px) {
    #cabeceraTitulo, .ui-dialog-title {
        font-size: 0.8em;
    }
}

@media (max-width: 1000px) {
    #cabeceraTitulo, .ui-dialog-title {
        font-size: 0.6em;
    }
}

@media (max-width: 700px) {
    #cabeceraTitulo, .ui-dialog-title {
        font-size: 0.4em;
    }
}

.captcha {
    margin-top: 35px !important;
    background-color: white;
    color: black;
    border-radius: 10px;
    padding: 5px;
}

#captchaText {
    float: left;
}

#contenedorImagenCAPTCHA {
    margin-left: 15px;
}

    #contenedorImagenCAPTCHA img, #contenedorImagenCAPTCHA span {
        float: left;
    }

.captcha label {
    font-size: 12px;
    text-align: center;
}

#confirmarCaptcha {
    border-radius: 5px;
    height: 40px;
    margin-left: 5%;
    width: 90%;
    margin-top: 5px;
}
*/
