/* 
    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,
    select,
    textarea {
        max-width: 280px;
    }

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

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

    .control-label {
        width: 200px !important;
    }

    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: 500px;
    }

    .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 #EBEEF6;
        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: 240px !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;            
        }


/*.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: 20px;
        box-shadow: 0 0 10px 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-azulMarino);
        font-size: 18px;
        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;
    }

.Formlogin input[type="submit"] {
    color: #fff;
    background-color: var(--color-azulMarino);
    border: 0px !important;
    font-size: 18px !important;
    display: inline-block !important;
}

        .Formlogin input[type="submit"]:hover {
            background: var(--color-azulClaro) !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: #372E62;
        border-color: #372E62;
    }

    #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;
    }

    .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;
        }
    /* <<--- Busqueda */

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