@font-face {
    font-family: 'Helvetica Neue';
    src: url(fonts/HelveticaNeueRoman.otf)
}

.main-menu-btn {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
    text-indent: 28px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* hamburger icon */
.main-menu-btn-icon, .main-menu-btn-icon:before, .main-menu-btn-icon:after {
    position: absolute;
    top: 50%;
    left: 2px;
    height: 2px;
    width: 24px;
    background: #bbb;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}

    .main-menu-btn-icon:before {
        content: '';
        top: -7px;
        left: 0;
    }

    .main-menu-btn-icon:after {
        content: '';
        top: 7px;
        left: 0;
    }
/* x icon */
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
    height: 0;
    background: transparent;
}

    #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
        top: 0;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
        top: 0;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
/* hide menu state checkbox (keep it visible to screen readers) */
#main-menu-state {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
}
    /* hide the menu in mobile view */
    #main-menu-state:not(:checked) ~ #main-menu {
        display: none;
    }

    #main-menu-state:checked ~ #main-menu {
        display: block;
    }

body {
    height: 100vh;
    width:100vw;
    font-family: 'Helvetica Neue';
    background-color: #e3f0ff;
    margin: 0px;
    color: #0071bc;
}

header {
    height: 5vh;
    line-height: 5vh;
    background-color: white;
    margin: 0px !important;
}

.imgHeader {
    height: 4vh;
    margin-right: 4vw;
    margin-top: 1vh;
    margin-bottom: 1vh;
    vertical-align: top;
}

.menuHeader {
    width: 45vw;
    height: 5vh;
}

.textoHeader {
    width: 25vw;
    height: 5vh;
    text-align: right;
    padding-right: 25px;
}

section {
    width: 100vw;
    height: 90vh;
}

footer {
    height: 5vh;
    line-height: 5vh;
    background-color: white;
    text-align: center;
    color: black;
}

a.avisos {
    color: black;
}

    a.avisos:link {
        text-decoration: none;
    }

    a.avisos:visited {
        text-decoration: none;
    }

    a.avisos:hover {
        text-decoration: none;
        color: #D30F4B;
    }

    a.avisos:active {
        text-decoration: none;
    }

.trapecio {
    width: 30vw;
    background-color: #0091df;
    text-align: right;
}

.btn-base {
    border-radius: 0.6rem !important;
    border: none;
    padding: 3px 8px 3px 8px;
    background-color: transparent;
}

.btn-blue {
    color: #fff;
    background-color: #0071bc;
}

    .btn-blue:hover {
        color: black;
        background-color: #008ae6;
    }

.btn-green {
    color: #fff;
    background-color: #66b512;
}

    .btn-green:hover {
        color: black;
        background-color: #76d115;
    }

.btn-purple {
    color: #fff;
    background-color: #d30f4b;
}

    .btn-purple:hover {
        color: black;
        background-color: #ee1153;
    }

.form-control, .form-control:focus {
    background-color: #e3f0ff;
}

.form-label {
    margin-bottom: .25rem !important;
}
.contenido {
    min-height: 50vh;
    max-height: 86vh;
    overflow: auto;
    border-radius: 15px;
    /*margin-top: -15px;*/
    padding: 12px;
    width: 90%;
    /*background: black;*/ /* rgb(204, 241, 255, 0.7);*/
    /*margin: 2vh auto 2vh auto;*/
}
.subcontenido {
    border-radius: 15px;
    background-color: white;
    padding: 15px;
    text-align: left;
    overflow: hidden;
}
.nav-tabs .nav-link {
    color: lightgray !important;
}
.nav-item {
    margin-right: 10px;
    background-color: white;
    border-width: 1px;
    border-radius: 0.375rem 0.375rem 0rem 0rem;
    width: 175px;
}
.nav-link.active {
    background-color: #0091df !important;
    width: 100%;
    color:white !important;
}
.titulo {
    padding-left: 10px;
    text-align: left;
}
.textBL {
    color: #0091df;
}
ui-dialog .ui-dialog-buttonpane {
    text-align:center !important;
}
    /* Extra pequeño: <576px (opcional con max-width), Estilos para móviles muy pequeños */
    @media (max-width: 575.98px) {
        .trapecio {
            clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
        }
    }
    /* Pequeño: ≥576px, Estilos para SM */
    @media (min-width: 576px) {
        .trapecio {
            clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
        }
    }
    /* Mediano: ≥768px, Estilos para MD */
    @media (min-width: 768px) {
        .trapecio {
            clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
        }
    }
    /* Grande: ≥992px, Estilos para LG */
    @media (min-width: 992px) {
        .trapecio {
            clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
        }
    }
    /* Extra grande: ≥1200px, Estilos para XL */
    @media (min-width: 1200px) {
        .trapecio {
            clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%);
        }
    }
    /* Extra extra grande: ≥1400px, Estilos para XXL */
    @media (min-width: 1400px) {
        .trapecio {
            clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%);
        }
    }
    /*.Login {*/
    /*background-color: #192330;*/
    /*background: #f0f0f5;*/
    /*background: linear-gradient(90deg,rgba(211, 211, 211, 0.7) 0%, rgba(211, 211, 211, 0.9) 100%);*/
    /*border-radius: 20px;*/
    /*top: 50%;
    left: 50%;
    position: absolute;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 400px;
}*/

    .btnM {
    margin: 5px;
}





tfoot {
    display: table-header-group !important;
    background-color: white;
}

tbody {
    display: table-footer-group;
}

.left-colT {
    float: left;
    width: 50%;
    display: list-item;
}

.right-colT {
    float: left;
    width: 50%;
    text-align: right;
}

.left-colB {
    float: left;
    width: 33%;
}

.center-colB {
    float: left;
    width: 33%;
}

.right-colB {
    float: left;
    width: 33%;
}

.ui-widget-header {
    color: #0071bc;
    border: none;
    background: white;
    font-size: 20px;
}

.input-group-text {
    background-color: black;
    color: white;
    border-radius: unset;
}

.form-check-input:checked {
    background-color: #315b9d;
    border-color: #315b9d;
}

.ui-widget.ui-widget-content {
    border: none;
    /*border-radius: 12px;*/
    z-index: 10000 !important;
}
.ui-widget-content {
    color: #0071bc !important;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: none;
    background: black !important;
    font-weight: normal;    
}

.table > thead > tr > th {
    /*vertical-align: middle;*/
    background-color: #0071bc !important;
    color: white !important;
    /*text-align: center;*/
}

table.table.dataTable > tbody > tr.selected > * {
    box-shadow: inset 0 0 0 9999px rgb(255, 204, 216) !important;
}

table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
    background-color: red !important;
}

.active > .page-link, .page-link.active {
    z-index: 3;
    color: black;
    background-color: #ccc;
    border-color: #b3b3b3;
}

.ui-datepicker {
    z-index: 9999 !important;
}

.ui-dialog .ui-dialog-content {
    position: unset !important;
}

.main-menu-btn {
    background-color: black;
}

a.perfil {
    color: #443247 !important;
    text-decoration: none;
}

    a.perfil:link {
        text-decoration: none !important;
    }

    a.perfil:visited {
        text-decoration: none !important;
    }

    a.perfil:hover {
        text-decoration: none !important;
        color: #D30F4B !important;
    }

    a.perfil:active {
        text-decoration: none !important;
    }



.grid-container {
    display: grid;
    place-items: center; /* Centers content both horizontally and vertically */
    height: 100vh; /* Example: Takes full viewport height */
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    background-color: #00BCFF !important;
    border-radius: 0px 0px !important;
}

.Encabezado {
    background-color: black;
    color: white;
    height: 43px;
    display: flex;
    align-content: center;
    padding-left: 10px;
    font-size: 1.75rem;
}

.ui-widget-overlay {
    background: #000;
    opacity: .7;
}

table.dataTable td.dt-type-numeric {
    text-align: left !important;
}

table.dataTable th.dt-type-numeric {
    text-align: left !important;
}

    table.dataTable th.dt-type-numeric div.dt-column-header,
    table.dataTable th.dt-type-numeric div.dt-column-footer,
    table.dataTable th.dt-type-date div.dt-column-header,
    table.dataTable th.dt-type-date div.dt-column-footer,
    table.dataTable td.dt-type-numeric div.dt-column-header,
    table.dataTable td.dt-type-numeric div.dt-column-footer,
    table.dataTable td.dt-type-date div.dt-column-header,
    table.dataTable td.dt-type-date div.dt-column-footer {
        flex-direction: row !important;
    }

@media(min-width: 769px) {
    .main-menu-btn {
        position: absolute;
        top: -99999px;
    }

    #main-menu-state:not(:checked) ~ #main-menu {
        display: block;
    }
}