/* 
    Hoja de estilo en la que se configura el comportamiento y diseño de los FORMULARIOS
    Creado por: Ing. Uriel Vargas Barajas [07/ENE/2019]
*/





/* ----------------------------------------------------------- INICIO Configuracion CONTROLES FORMULARIOS --------------------------------------------*/

.input-validation-error {
    border: 1px solid #f7343e !important;
    background-color: #fee !important;
}

input,
select,
textarea {
    max-width: 300px;
}

    input.maxLG,
    select.maxLG,
    textarea.maxLG {
        max-width: 400px !important;
    }

    input.maxXL,
    select.maxXL,
    textarea.maxXL {
        max-width: 100% !important;
    }

.input-group-text,
.form-control {
    font-size: 14px !important;
}

.form-row {
    margin-top:15px;
}

select.form-control:not([size]):not([multiple]) {
    height: inherit !important;
}

.SimboloCampoObligatorio {
    font-size: 9px;
    color: var(--color-campoObligatorio);
    margin-right: 5px;
    top: 0 !important;
}


.divHelpLlenado {
    color: var(--color-campoObligatorio);
    font-size: 11px;
    position: absolute;
    margin-left: 50px;
    background: #f8f8f8;
}

    .divHelpLlenado > ul {
        padding-left: 15px !important;
    }

#msgError {
    color: var(--color-textoError) !important;
    padding: 10px 5px !important;
    text-align: justify !important;
    display: none;
    font-size: 14px;
}

    #msgError > span {
        color: inherit;
        font-size: 18px;
    }

/* --- ESTILO Tooltip TEXT --->>>*/
.tooltipCSS {
    position: relative;
    display: inline-block;
}

    .tooltipCSS .tooltipDIVtext {
        visibility: hidden;
        text-align: left;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        border: 2px solid var(--color-grisObscuro);
        padding: 5px 10px !important;
    }

        .tooltipCSS .tooltipDIVtext::after {
            /*content: "";*/
            position: absolute;
            top: 10%;
            right: 100%;
            margin-top: -5px;
            border-width: 8px;
            border-style: solid;
            border-color: transparent #EBEEF6 transparent transparent;
        }

    .tooltipCSS:hover .tooltipDIVtext {
        visibility: visible;
    }

.TablaAccionesPie {
    display: inline-block !important;
    width: auto !important;
    text-align: center !important;
    /*margin-left:200px;*/
}

.BotonTablaAccionesPie {
    display: inline-block;
    width: auto;
    text-align: center;
    margin: 0px 50px;
}
/* <<<--- ESTILO Tooltip TEXT --- */

/* --- ESTILO Password --- */
.PassShow {
    /*position: relative*/
}

    .PassShow input {
        max-width: 260px !important;
    }

    .PassShow > div.input-group-append {
        /*margin-top: 10px !important;*/
    }

    .PassShow span.btn-PassShow {
        z-index: 99;
        height: 32px !important;
        width: 40px !important;
        color: var(--color-azulMarino);
        background-color: transparent;
        background-image: none;
        border-color: var(--color-azulMarino);
        text-align: center !important;
    }

        .PassShow span.btn-PassShow:hover {
            color: var(--color-azulClaro) !important;
            border-color: var(--color-azulClaro) !important;
        }

        .PassShow span.btn-PassShow > i {
            font-size: 22px;
            margin-top: -1px !important;
        }


/*.PassShow .icoPassShow {
    position: absolute;
    padding: 5px 10px;
    height: 30px;
    top: 50%;
    margin-left: 5px;
    z-index: 1;
    margin-top: -10px;
    cursor: pointer;
    transition: .3s ease all;
}

    .PassShow .icoPassShow span {
        font-size: 18px;
        color: var(--color-azulMarino);
    }

    .PassShow .icoPassShow:hover span {
        color: #FFF;
    }*/
/* <<<--- ESTILO Password --- */


/* --- ESTILO Login Usuario --->>> */
.Formlogin {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 3px rgba(0,0,0,.5);
    margin: 0 auto;
    padding: 15px 15px;
    max-width: 500px;
    text-align: center;
}

    .Formlogin .titulo {
        border-bottom: 1px solid #ccc;
        color: var(--color-redAzulLogo);
        font-size: 20px;
        font-weight: bold;
        padding: 5px 0;
    }

#login span {
    display: block;
    padding: 5px 0;
    text-align: left;
}

#login label {
    float: left;
    font-size: 16px;
    padding: 3px 5px;
    text-align: right;
}

.Formlogin input[type="text"],
.Formlogin input[type="email"],
.Formlogin input[type="password"],
#login .float {
    /*float: left;*/
    font-size: 15px !important;
    margin-top: 10px;
}

.Formlogin input[type="text"],
.Formlogin input[type="email"],
.Formlogin input[type="password"] {
    border: 1px solid;
    border-color: var(--color-grisMedio);
    border-radius: 5px;
    box-shadow: 0 0 5px inset rgba(0,0,0,.2);
}

.Formlogin .form-control, .btn {
    display: inline-block; /* !important;*/
}

#login .float {
    color: #999;
}

input[type="submit"].BtnNAranja,
.Formlogin input[type="submit"],
input[type="button"][id="btnSubmit"] {
    color: #FFF;
    background-color: var(--color-redNaranjaBotones);
    border: 0px !important;
    /*border: solid 2px var(--color-redNaranjaBotones);*/
    font-size: 18px !important;
    display: inline-block !important;
}

    .Formlogin input[type="submit"]:hover {
        /*background: var(--color-redNaranjaBotonesOver) !important;*/
        /*-webkit-box-shadow: 1px 1px 10px 1px var(--color-grisObscuro);
        -moz-box-shadow: 1px 1px 10px 1px var(--color-grisObscuro);
        box-shadow: 1px 1px 10px 1px var(--color-grisObscuro);*/
        box-shadow: 0 0 0 2px var(--color-grisObscuro) !important;
    }

    .Formlogin input[type="submit"]:focus {
        /*box-shadow: 0 0 5px inset rgba(0,0,0,.2) !important;*/
        box-shadow: 0 0 0 0.2rem var(--color-azulClaro) !important;
    }


    .Formlogin input[type="submit"]:not(:disabled):not(.disabled):active {
        /*color: #fff;*/
        background-color: var(--color-redNaranjaBotonesActive);
        /*border-color: #372E62;*/
    }

.btn.btn-Naranja {
    color: #FFF;
    background-color: var(--color-redNaranjaBotones);
    border: 0px !important;
    font-size: 16px !important;
}

.btn.btn-NaranjaSmall {
    color: #FFF;
    background-color: var(--color-redNaranjaBotones);
    border: 0px !important;
    font-size: 11px !important;
}

    .btn.btn-Naranja:not(:disabled):active,
    .btn.btn-NaranjaSmall:not(:disabled):active {
        background-color: var(--color-redNaranjaBotonesActive);
    }

.btn-redGto {
    color: #FFF;
    background-color: var(--color-redNaranjaBotones);
    font-size: 12px;
}

    .btn-redGto:hover {
        box-shadow: 0 0 0 2px var(--color-grisObscuro) !important;
    }

    .btn-redGto:not(.disabled):active {
        background-color: var(--color-redNaranjaBotonesActive);
    }



#login button {
    background: #372e62;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    padding: 5px 20px;
}

.text-danger {
    font-size: 13px !important;
}

.Formlogin ul {
    list-style-type: none !important;
    padding: 0px !important;
}
/* <<<--- ESTILO Login Usuario --- */


/* --- ESTILO para FORMULARIOS que permiten AGREGAR y EDITAR registros por medio de un POPUP --->>> */
.AddEditPopUp .SubTituloPopUp {
    color: var(--color-grisDeshabilitado);
    font-size: 15px;
    margin: 5px 0px !important;
}

.AddEditPopUp .TablaAccionesPie {
    display: inline-block !important;
    width: auto !important;
    text-align: center !important;
    padding: 0px !important;
    padding-bottom: 10px !important;
}


.AddEditPopUp .BotonTablaAccionesPie {
    display: inline-block;
    width: auto;
    text-align: center;
    margin: 0px 25px;
}

.AddEditPopUp .form-group {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.AddEditPopUp label.TituloCampo {
    font-size: 14px !important;
    font-weight: bold !important;
    font-family: monospace !important;
}

.AddEditPopUp .DatoCampo input {
    max-width: 375px !important;
}

.AddEditPopUp .file-error-message {
    padding: 5px !important;
}

.AddEditPopUp button.kv-error-close {
    margin-left: 25px !important;
}

.AddEditPopUp hr {
    margin: 10px 0px !important;
}

.AddEditPopUp .krajee-default .file-footer-caption {
    margin-bottom: 0px !important;
}

.AddEditPopUp .krajee-default.file-preview-frame .file-thumbnail-footer {
    height: auto !important;
}

.AddEditPopUp .file-preview {
    width: 560px !important;
    margin: 5px 0px !important;
}

.AddEditPopUp .error {
    color: var(--color-textoError);
}

.AddEditPopUp .validation-summary-errors > ul {
    padding-left: 20px;
}

.AddEditPopUp .krajee-default.file-preview-frame .kv-file-content {
    width: 470px !important;
}

.AddEditPopUp .kv-file-content > embed {
    width: 100% !important;
}

div.file-input{
    padding: 7px;
}

div.file-input.Error-File {
    border-radius: 5px;
    box-shadow: 0 0 2px 2px red;
}

.AddEditPopUp .DatoCampo input {
    max-width: 410px !important;
}
/* <<<--- ESTILO para FORMULARIOS que permiten AGREGAR y EDITAR registros por medio de un POPUP --- */

/* Busqueda --->> */
div.search {
    margin: 0 auto !important;
    position: relative;
    margin-bottom: 10px !important;
    max-width: 95%;
}

    div.search > i#btnSearch {
        right: 10px !important;
        position: absolute;
        cursor: pointer;
        right: 35px;
        top: 5px;
        font-size: 20px;
    }

.select2-container{
    width:calc(100%) !important;
}

.select2-search__field {
    max-width: calc(100%);
}
/* <<--- Busqueda */

/* ----------------------------------------------------------- FINAL Configuracion CONTROLES FORMULARIOS --------------------------------------------*/