/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');*/

/* colores principales*/
/*
    azul #2388DC
    azure es casi blanco
    gris #495057
*/

/*======================================
    iPayrollMX css
    ==================================*/

/* Body */
@media (min-width: 1200px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: 1640px;
    }
}

.p-ipayrollmx {
    font-size: 14px;
}

.text-primary {
    color: #2388DC !important;
}

/* LOGIN */

.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
    z-index: 2;
}

    .form-signin .checkbox {
        font-weight: 400;
    }

    .form-signin .form-control {
        position: relative;
        box-sizing: border-box;
        height: auto;
        padding: 10px;
        font-size: 16px;
        z-index: 2;
    }

        .form-signin .form-control:focus {
            z-index: 2;
        }

.loginyeartext {
    color: aliceblue;
}

/* WATERMARK LOGIN */

.watermarkedlogin {
    position: absolute;
    display: block;
    background-color: #2388DC; /*color anaranjado de fondo*/
    background-image: url('../IMAGES/Login Background.png');
    background-size: 800px 600px; /*antes 1900px 500px*/ /* con cover se cubre casi todo*/
    background-position: center;
    background-repeat: no-repeat;
    background-position-y: 200px;
    z-index: -2; /* negativo lo envia attras del contenido y positivo hacia enfrente*/
    opacity: 1; /* con 1 no hay opacidad, pero  si se pone0.5 se opaca*/
    border-radius: 0px;
    width: 100%;
    height: 100%;
}

/* PRELOADER*/

/*FONT SIZE*/
.smallfont ul {
    font-size: 8px;
}

/* A TAG*/
.atagdisable { /* disable <a> selection*/
    pointer-events: none;
    cursor: default;
}

/* DIVIDERS */
hr .dashed {
    border-top: 2px dashed #999;
}

hr.dotted {
    border-top: 2px dotted #999;
}

hr.solid {
    border-top: 2px solid #999;
}

hr.hr-text {
    position: relative;
    border: none;
    height: 1px;
    background: #999;
}

    hr.hr-text::before {
        content: attr(data-content);
        display: inline-block;
        background: #fff;
        font-weight: bold;
        font-size: 0.85rem;
        color: #999;
        border-radius: 30rem;
        padding: 0.2rem 2rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

/* Rounded border HORIZONTAL */
hr.rounded {
    border-top: 8px solid #bbb;
    border-radius: 5px;
    padding: 30px; /*Arriba, derecha, abajo, izquierda */
}

/* vertical divider  */
.vd1 {
    border-right: 2px solid #CCE2FA;
    height: 55px;
}

/*SPACER DIVIDER*/
.spacer {
    height: 30px;
}

/* CENTERED horizontal y vertical */
.hcentered {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.vcentered {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.vrowcentered {
    vertical-align: middle;
}

/*TEXT*/
.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

/* MENU NOMINAS*/
.dropdown-divider {
    height: 0;
    margin: 0.3rem 0;
    overflow: hidden;
    border-top: 2px solid #e9ecef;
    margin-left: 10px;
    margin-right: 10px;
}

.dropdown-item:hover, .dropdown-item:focus {
    color: #16181b;
    text-decoration: none;
    background-color: #2388DC; /*#f8f9fa*/ /*color de fondod e hover al pasar mouse por los items del menu*/
    border-radius: 5px;
    width: 100%;
}

.dropdown-item-text {
    display: block;
    padding: 0.25rem 1.5rem;
    color: #212529;
}

.navbar-nav .dropdown-menu {
    /*Propiedades del submenu*/
    position: static;
    border: 0px;
    outline: 0px;
    transform: translateX(10%); /* mueve el menu izquierda o derecha, colocando signo negativo*/
    float: none;
    background-color: #2388DC; /* Color de fondo*/
}

    .navbar-nav .dropdown-menu a { /*Propiedades del submenu con etiqueta "a"*/
        padding: 1px 1px 1px 1px;
    }




/* rows */
div.dropdown-multicol {
    /*width: 50em;*/ /* ancho de multicol*/ /*ansted de quitar SALDOS*/
    width: 35em; /* ancho de multicol*/
    margin-left: -30px; /* mueve la posicion del menu al abrir, izquierda negativo y derecha positivo*/
    border-radius: 25px;
}


div.dropdown-row > a.dropdown-item {
    /*display: inline-block;*/
    /* width: 22%;*/
    color: aliceblue;
    margin-top: 8px;
}

/* Columns */
div.dropdown-multicol2 {
    width: 30em;
}

    div.dropdown-multicol2 > div.dropdown-col {
        /*  display: inline-block;*/
        width: 32%;
    }

/*
Or just:
div.dropdown-row>a.dropdown-item{
  display:inline-block;
  width: 10em;
}

(Former may be more convenient for responsive)
*/
/* SPINNER LOADING*/
#overlay {
    position: fixed;
    top: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0,0,0,0.6);
}

.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    /*border-top: 4px #2e93e6 solid;*/
    border-top: 4px #FF5733 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
    100% {
        transform: rotate(360deg);
    }
}

.is-hide {
    display: none;
}

/*GENERAL*/
body {
    /*font-family: 'Noto Sans', sans-serif;*/
    /* font-family: Noto Sans, 'Tempus Sans ITC','sans-serif';*/
    background-color: #F5F5F5 !important; /*Si no se pone !important, no se aplica el color anterior era #f3f3f3 personal mio*/
    /* color: red;*/
    /*  opacity: 0.9;*/
}

p {
    color: #666666;
}

h1, h2, h3, h4, h5, h6 {
    color: #666666;
}

th, tr, td {
    color: #666666;
    /* color: #F3F3F3;*/
    border-radius: 8px;
    background-color: #F3F3F3;
}


.table {
    margin-bottom: 1rem;
    /* color: #212529;*/
    margin-top: 0px;
    border-radius: 8px;
}

    .table th,
    .table td {
        padding: 0.75rem;
        vertical-align: middle;
        color: #212529;
        background-color: #FFFCF7;
        /* antes era top*/
        border-top: 1px solid #dee2e6;
    }

    .table thead th {
        vertical-align: bottom;
        border-bottom: 2px solid #dee2e6;
    }

    .table tbody + tbody {
        border-top: 2px solid #dee2e6;
    }


.form-group {
    margin-bottom: 1rem;
    padding: 10px;
}

.form-check {
    margin-bottom: 1rem;
}

.error {
    color: red;
    font-size: 10px;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade-out {
    animation: fadeOut ease 1s;
    -webkit-animation: fadeOut ease 1s;
    -moz-animation: fadeOut ease 1s;
    -o-animation: fadeOut ease 1s;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/*Round corners on gridviews*/
.roundcornersgv {
    border: 1px solid #2388DC;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    overflow: hidden;
}

div.dataTables_scrollBody {
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}
/* WATERMARK Default page */
.watermarked {
    position: relative;
    display: block;
}

    .watermarked:after {
        content: "";
        /*display: block;*/
        width: 100%;
        height: 100%;
        position: absolute;
        top: 200px;
        left: 0px;
        background-image: url("../Content/IMAGES/Logo/iPayrollMX.jpg");
        background-size: 700px 500px;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed; /* image n scroll*/
        z-index: -1; /* negativo lo envia attras del contenido y positivo hacia enfrente*/
        opacity: 0.1;
    }

/**
 * 1. Centers the content. Yes, it's a bit opinionated.
 * 2. See the "width vs max-width" section
 * 2. See the "Additional Padding" section
 */

.wrapper {
    margin-right: auto; /* 1 */
    margin-left: auto; /* 1 */
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: auto;
    padding-bottom: 30px; /* Distancia del footer y wrapper */
}
/*Top Nav*/
#top-navbar {
    background-color: #495057 !important; /*Color de fondo del top nav*/
    color: #e9ecef; /*Color de letra*/
}

    #top-navbar a {
        padding: 0px 20px 0px 20px;
        font-size: 40px;
    }

.navbar-nav.navbar-center {
    position: absolute;
    left: 40%;
    right: 20%;
}

.navbar-nav.navbar-right {
    position: absolute;
    right: 5%; /*Margen de derecha a izquierda*/
}

.breadcrumb-align-right {
    position: absolute;
    right: 5%; /*Margen de derecha a izquierda*/
}


.navbar-brand {
    display: inline-block;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
    color: #2388DC;
    font-family: 'Tempus Sans ITC';
}

    .navbar-brand:hover, .navbar-brand:focus {
        text-decoration: none;
        color: azure !important;
    }




.nav-tabs {
    border-bottom: 2px solid #dee2e6;
    /*borde de pestañas y debajo de ellas */
    border-color: #dee2e6;
}

    .nav-tabs .nav-item {
        margin-bottom: -1px;
    }

    .nav-tabs .nav-link {
        border: 1px solid transparent;
        border-top-left-radius: 0.25rem; /* radio de las pestañas - tabs radius Originalmente 0.25em*/
        border-top-right-radius: 0.25rem; /*radio de las pestañas - tabs radius Originalmente 0.25em */
        border-color: #dee2e6; /*Color de borde de las pestañas */
        color: gray; /*color fuente de pestañas no activas*/
    }

        .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
            border-color: orange;
        }

        .nav-tabs .nav-link.disabled {
            color: #6c757d;
            background-color: transparent;
            border-color: transparent;
        }

        .nav-tabs .nav-link.active,
        .nav-tabs .nav-item.show .nav-link {
            /*color: #495057;*/
            color: azure; /*color letra de pestaña activa*/
            background-color: grey; /*antes #fff color de fondo de pestaña activa*/
            border-color: #dee2e6 #dee2e6 #fff;
        }

    .nav-tabs .dropdown-menu {
        margin-top: -1px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }



/* BREADCRUM */
ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background-color: #495057;
}

    ul.breadcrumb li {
        display: inline;
        font-size: 16px;
    }

        ul.breadcrumb li + li:before {
            padding: 8px;
            color: #e9ecef; /*Color del guion separador*/
            content: "/\00a0";
        }

        ul.breadcrumb li a {
            color: #e9ecef; /*Color de letra*/
            text-decoration: none;
        }

            ul.breadcrumb li a:hover {
                color: #2388DC; /*color al colocar el mouse encima*/
                text-decoration: underline;
            }

/* sidenav */
.sidenav {
    /*height: 81.6%;*/ /* TAMAÑO DEL MENU a lo largo*/
    height: 84.00%; /* TAMAÑO DEL MENU a lo largo*/
    width: 0;
    position: fixed;
    z-index: 1;
    /*top: 1px;*/
    left: 0;
    background-color: #2388DC; /*#2388DC Color de fondo del side nav*/
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 30px;
    margin-left: 10px;
    border-radius: 25px;
}

    .sidenav a {
        padding: 3px 0px 3px 8px; /*espacio*/
        text-decoration: none;
        font-size: 16px; /* TAMAÑO LETRA */
        color: #e9ecef; /*Color letra, en este caso es blanco*/
        display: block;
        transition: 0.3s;
    }

        .sidenav a:hover {
            color: #495057; /* Antes, #f1f1f1;*/ /*Color al señalar algo en el menu*/
        }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 24px; /* TAMAÑO DE LA X &times;*/
        margin-left: 50px;
    }

    .sidenav i {
        align-content: center;
        color: #e9ecef; /*Color de "i", en este caso es blanco*/
    }

    .sidenav span {
        padding: 4px 0px 0px 6px;
        text-decoration: none;
        font-size: 16px;
        color: #e9ecef; /*Color letra, en este caso es blanco*/
        display: block;
        transition: 0.3s;
    }
    /*Sidenav Align Image*/
    .sidenav #userimage {
        padding-left: 0px;
        padding-top: 0px;
        padding-bottom: 5px;
    }
/* Photo on circle */
.circlephoto {
    border: solid #fff;
    border-width: 0 1px;
    border-radius: 10%;
    /*display: block;*/
    width: auto;
    /* max-height: 100%*/
}

/* lOGO on circle */
.circlelogo {
    border: solid #fff;
    border-width: 0px 1px;
    border-radius: 50%;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #343a40; /*#fff*/
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
}


/* hide spinners on numbers */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}


/*GRIDVIEW*/
/*hide column on gridview or detailsview*/
.hiddencol {
    display: none;
}


/*AJAX ACCORDION*/
.accordionheader {
    background-color: Silver; /*antes darkgrey*/
    color: #333333;
    padding: 10px;
    border-radius: 20px;
    margin-bottom: 10px; /* espacio entre paneles del acordeon*/

    background-image: url('../IMAGES/down.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: 35px;
}

.selectedheader {
    background-color: #FF7D0E;
    color: #333333;
    padding: 10px;
    border-radius: 20px;
    background-image: url(../IMAGES/up.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 35px;
}

/*CONTEXT MENU ON GRIDVIEW*/
.PanelCSS {
    visibility: hidden;
    border-radius: 5px;
}

/*MODAL POPUP*/
.BackgroundPopUp {
    background-color: Black;
    filter: alpha(opacity=90);
    opacity: 0.8;
}

.ModalPopup {
    background-color: #FFFFFF;
    /*border-width: 3px;*/
    /* border-style: solid;*/
    border-color: black;
    padding-top: 10px;
    padding-left: 10px;
    width: 300px;
    height: 300px;
}


/* PDF */
/*#pdfboxCV {
    width: 100%;
    height: 100%;
    border: 5px solid #ccc;
}*/

.pdfbox {
    width: 100%;
    height: 100%;
    border: 5px solid #ccc;
}

/*#cvpdfiframe {
    width: 100%;
    height: 500px;
}
*/

.pdfiframe {
    width: 100%;
    height: 500px;
}


.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

    .close:hover {
        color: #000;
        text-decoration: none;
    }

    .close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
        opacity: .75;
    }

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/* SELECT2 */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    /*background-color: #F5AE22;*/
    background-color: #FFCE6E !important; /* color de fondo al hover o seleccionar*/
}

.select2-dropdown {
    z-index: 1055 !important;
}

.select2-container {
    font-size: 12px !important; /* se lo tuve que agregar */
    /*z-index: 1000;*/ /* se lo tuve que agregar */
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid #D7D7D7 !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 3px solid #FFCE6E !important;
}



/*** Service ***/
/*.service-item .service-text {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0 0 45px rgba(0, 0, 0, .06);
    transition: .5s;
    z-index: 2;
}

.service-item:hover .service-text {
    top: -1.5rem;
}

.service-item .service-text h5 {
    transition: .5s;
}

.service-item:hover .service-text h5 {
    color: var(--primary);
}

.service-item .service-btn {
    position: absolute;
    width: 80%;
    height: 3rem;
    left: 10%;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    box-shadow: 0 0 45px rgba(0, 0, 0, .07);
    transition: .5s;
    z-index: 1;
}

.service-item:hover .service-btn {
    bottom: -1.5rem;
}*/


/* FONTAWESOME 6 */
.fa-regular {
    color: #2388DC;
}

.fa-duotone {
    color: #2388DC;
}