/**************************************************
* BASE
**************************************************/
:root {
    --color-lgcl: #000000;
    --color-lgcl-white: #999999;
    --color-lgcl-background: #999999;
    --color-primary: #CD003A;
    --color-primary-hover: #046ec4;
    --color-gray-light: #dce9f9;
    --color-gray-medium: #b5d1e2;
    --color-gray-dark: #444;
    --color-gray-border: #999999;
    --color-danger: #FFAAAA;
    --color-warning: #faff8b;
    --color-info: #71aaf1;
    --font-main: Verdana, Geneva, sans-serif;
    --font-size-small: 0.75rem;
    --font-size-footable: 11px;
    --border-radius: 0.35rem;
    --control-height: 40px;
}

body {
    margin: 0;
    background-color: var(--color-lgcl-background);
    font-family: var(--font-main);
}

/**************************************************
* UTILIDADES
**************************************************/
.right-aligned {
    text-align: right;
}

.center-aligned {
    text-align: center;
}

.large-top-margin {
    margin-top: 25px;
}

.medium-top-margin {
    margin-top: 15px;
}

.small-top-margin {
    margin-top: 10px;
}

.large-bottom-margin {
    margin-bottom: 25px;
}

div.bg-transparent.border.rounded-3.p-1 > h1, div.bg-transparent > h1 {
    font-size: 22px !important;
}

.medium-bottom-margin {
    margin-bottom: 15px;
}

.small-bottom-margin {
    margin-bottom: 10px;
}

/**************************************************
* LOGO / HEADER
**************************************************/
.logotype::after {
    content: '';
    display: block;
    background: url('/UserCustomizationContentProvider.ashx?type=Logo') no-repeat center;
    background-size: contain;
    width: 225px;
    height: 75px;
    margin: 10px;
}

@media (max-width: 768px) {
    .logotype::after {
        width: 150px;
        height: 50px;
    }
}

/**************************************************
* LOADING
**************************************************/
.loading-layer {
    position: absolute;
    inset: 0;
    z-index: 10000;
    display: none;
}

    .loading-layer .background {
        background-color: #222;
        opacity: 0.2;
        width: 100%;
        height: 100%;
    }

    .loading-layer .spinner {
        position: absolute;
        bottom: 15px;
        left: 15px;
        width: 30px;
        height: 30px;
        background: url("../../images/spinner.gif") no-repeat center;
    }

/**************************************************
* FORM CONTROLS – BASE
**************************************************/
.form-control,
.filtro-texbox,
.filtro-dropdown {
    height: var(--control-height);
    border-radius: var(--border-radius);
    border: 2px solid var(--color-gray-medium);
    box-shadow: none !important;
    font-size: var(--font-size-small);
}

.filtro-checkbox {
    height: var(--control-height);
    box-shadow: none !important;
    font-size: var(--font-size-small);
}

.form-control:focus,
    .filtro-texbox:focus,
    .filtro-dropdown:focus,
    .filtro-checkbox:focus {
        outline: none;
        border-color: var(--color-lgcl);
    }

    /**************************************************
* SEARCH
**************************************************/
    .form-control.search {
        background-color: var(--color-primary);
        color: var(--color-lgcl-white);
        font-weight: bold;
        text-align: center;
    }

        .form-control.search:hover {
            background-color: var(--color-primary-hover);
        }

    /**************************************************
* CALENDAR
**************************************************/
    .form-control.calendar {
        background: url(images/calendario.png) no-repeat left 5px center;
        background-size: 20px;
        padding-left: 30px;
        background-color: var(--color-gray-medium);
    }

        .form-control.calendar:hover,
        .form-control.calendar:focus {
            background-color: var(--color-primary-hover);
        }

/**************************************************
* FILTROS
**************************************************/
.filtro-texbox,
.filtro-dropdown {
    background-color: var(--color-gray-medium);
    padding-left: 6px;
}

    .filtro-texbox:hover,
    .filtro-dropdown:hover {
        background-color: var(--color-primary-hover);
        color: var(--color-lgcl-white);
    }

.filtro-checkbox {
    display: flex;
    align-items: center;
    padding-left: 6px;
}

    .filtro-checkbox label {
        padding-left: 5px;
    }

/**************************************************
* SELECT STATES
**************************************************/
.select-red {
    background: linear-gradient(#FFAAAA, #FFA6A6);
    color: #8A0000;
}

.select-yellow {
    background: linear-gradient(#faff8b, #f0f587);
    color: #5A6100;
}

.select-blue {
    background: linear-gradient(#71aaf1, #5593e0);
    color: #0B376B;
}

/**************************************************
* FOOTABLE
**************************************************/
.footable {
    width: 100%;
    border: 1px solid var(--color-gray-border);
    border-radius: 0.6em;
    font-size: var(--font-size-footable);
}

    .footable > tbody > tr:hover {
        background-color: var(--color-gray-light);
    }

    .footable th,
    .footable td {
        padding: 10px;
        border-top: 1px solid var(--color-gray-border);
    }

/**************************************************
* NAV
**************************************************/
.nav-pills {
    display: flex;
}

.nav-link {
    width: 280px;
    padding-left: 30px;
    background-color: var(--color-gray-medium);
    border: 2px solid transparent;
    color: var(--color-primary);
    font-size: 13px;
}

    .nav-link:hover {
        background-color: var(--color-gray-light);
        font-weight: bold;
    }
    .nav-link.resetPassword {
        background: url(../../images/engranaje.png) no-repeat;
        background-position: left 0px center;
        background-size: 40px 40px;
    }

    .nav-link.cerrar-sesion {

        background-position: left 7px center;
    }
/**************************************************
* BUTTONS
**************************************************/
.button {
    width: 80px;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid var(--color-gray-medium);
    background-color: var(--color-gray-medium);
    cursor: pointer;
}

    .button:hover {
        background-color: var(--color-primary-hover);
        color: var(--color-lgcl-white);
    
    }

    .button.Downloadbutton {
        width: 180px;
        background-color: #cd003a;
        color:#fff;
    }

        .button.Downloadbutton:hover {
            width: 180px;
            background-color: #cd003a;
            color: #fff;
        }


/**************************************************
* MISC
**************************************************/
    .note-text {
        font-size: 0.7em;
    }

    .note-text.error-note {
        color: #f34646;
    }

.iframe {
    width: 0;
    height: 0;
    position: absolute;
}

.message-bar-container {
    display: none;
}