html {
    scroll-behavior: smooth;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

html, body {
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

.body-image {
    /*
    background: url('/resources/images/fondo/fondo-body.jpg') no-repeat !important;
    */

    /* Location of the image */
    background-image: url('/resources/images/fondo/fondo-body.jpg');

    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;

    /* Background image doesn't tile */
    background-repeat: no-repeat;

    /* Background image is fixed in the viewport so that it doesn't move when
       the content's height is greater than the image's height */
    background-attachment: fixed;

    /* This is what makes the background image rescale based
       on the container's size */
    background-size: cover;

    /* Set a background color that will be displayed
       while the background image is loading */
    background-color: #464646;
}

/*USADAS*/

.shadow {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
    flex-direction: row;
    /*padding-bottom: 7px;*/
}

.shadow-template {
    box-shadow: 0 0.14rem 0.35rem rgba(0, 0, 0, .15) !important;
    flex-direction: row;
}

.ui-dialog .ui-dialog-content {
    overflow: hidden;
}

.color-primario {
    color: #446E9B !important;
}

.desplegar {
    display: block;
}

.ocultar {
    display: none;
}

/*Back to top*/
.scrollup {
    width: 40px;
    height: 40px;
    text-indent: -9999px;
    opacity: 0.3;
    position: fixed;
    bottom: 5px;
    right: 18px;
    display: none;
    background: url(/resources/images/icons/icon-top.png) no-repeat !important;
    z-index: 9999;
}

.blink-me {
    animation: blinker 1.8s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.div-square {
    border: 3px double #e1e1e1;
    border-radius: 8px;
    margin-right: 5px;
    padding: 5px;
}

.pad-top {
    padding-top: 15px;
}

.is-titulo {
    font-size: 1.2rem;
}


.button-primario {
    border-radius: 500px;
    font-size: 1rem;
    font-weight: 600;
    padding: 26px 40px 26px 40px;
}

/*Primefaces*/

body .ui-datatable thead th .ui-column-title {
    font-weight: 600 !important;
}

body .ui-inputfield.ui-state-error {
    border-color: #a80000 !important;
    background-color: #f8e7ee !important;
}

body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-highlight {
    background-color: #276cda;
    color: #fff;
}

/*Bulma*/

.hero-body {
    padding-top: 2rem !important;
}

.breadcrumb {
    margin-bottom: 0.5rem !important;
    margin-top: 0.5rem !important;
}

/**/

.semaforo-verde {
    color: forestgreen;
}

.blink_me {
    animation: blinker 1.8s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.ui-autocomplete-input {
    width: 100% !important;
}

.ui-selectonemenu {
    width: 100% !important;
}

/*
Corrigiendo problema para dataTable en modo responsive cuando
tienen un elemento rowExpansion
 */
@media (max-width: 640px) {
    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden) {
        width: 90vw;
    }
}

/*******************************************************/

/*
.login {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
    flex-direction: row;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 450px;
}

 */


/*
.wrapper-login {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 20px;
}
*/

/*
#formContent {
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    background: #fff;
    width: 90%;
    max-width: 450px;
    position: relative;
    padding: 0px;
    -webkit-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    text-align: center;
}
*/

/*
#formFooter {
    background-color: #f6f6f6;
    border-top: 1px solid #dce8f1;
    padding: 25px;
    text-align: center;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
 */

/*
Botón dividido de Primefaces con estilo de Bootstrap. Usarse en el styleClass de <p:splitButton/>.
 */
.ui-splitbutton-danger .ui-button,
.ui-splitbutton-danger button.ui-button.ui-state-default,
.ui-splitbutton-danger .ui-button.ui-state-default {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.ui-splitbutton-danger button.ui-button.ui-state-hover,
.ui-splitbutton-danger .ui-button.ui-state-hover,
.ui-splitbutton-danger button.ui-button.ui-state-focus,
.ui-splitbutton-danger .ui-button.ui-state-focus {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-eliminar {
    color: white !important;
    border: 1px solid #dc3545 !important;
}

.modal.is-active .modal-background {
    opacity: 0.5 !important;
}

/*
Usar cuando un elemento debe comportarse como bloque, por ejemplo, los <p:message/> son <span/> pero en un formulario
basado en columnas, es preferible que se comporten como bloques.
 */
.block {
    display: block;
    width: 100%;
}

/*
Centra el contenido de un contenedor verticalmente

Basado en
https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/aligner.css

Se aplicaron correcciones desde
https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/holy-grail.css

1. Avoid the IE 10-11 `min-height` bug.

3. Use `%` instead of `vh` since `vh` is buggy in older mobile Safari.

 */

.container-vcenter {
    display: flex;
    height: 100%; /* 1, 3 */
    flex-direction: column;
    justify-content: center;
}

.vcenter {
    display: flex;
    height: 100%; /* 1, 3 */
    flex-direction: column;
    justify-content: center;
}

/*
Divide la página en tres secciones: header, body y footer. La sección body crece hasta ocupar el espacio disponible.

Basado en
https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/holy-grail.css

1. Avoid the IE 10-11 `min-height` bug.

2. Set `flex-shrink` to `0` to prevent some browsers from
   letting these items shrink to smaller than their content's default
   minimum size. See http://bit.ly/1Mn35US for details.

3. Use `%` instead of `vh` since `vh` is buggy in older mobile Safari.
 */

.page {
    display: flex;
    height: 100%; /* 1, 3 */
    flex-direction: column;
}

.page--relative {
    position: relative;
}

.page--scrollable-x {
    overflow-x: auto;
}

.page__header {
    flex: none; /* 2 */
    z-index: 30;
}

.page__header--sticky {
    position: sticky;
    top: 0;
}

.page__header--styled {
    background-color: white;
    opacity: 0.98;
    box-shadow: 0 0.14rem 0.35rem rgba(0, 0, 0, .15) !important;
}

.page__body {
    flex: 1 0 auto; /* 2 */
    z-index: 20;
}

.page__body--styled {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.page__footer {
    flex: none; /* 2 */
    z-index: 10;
}

/*
Espacio vertical.
 */
.vspacer {
    height: 1rem;
}

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 52px;
    z-index: 100;
    background-color: #ffffff;
    padding-top: 5px;
    padding-bottom: 5px;
}

#contenedor-carga {
    background-color: rgba(51,102,153, 0.5);
    height: 100%;
    width: 100%;
    position: fixed;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    z-index: 10000;
}

.preloader {
    width: 70px;
    height: 70px;
    border: 10px solid #eee;
    border-top: 10px solid #336699;
    border-radius: 50%;
    animation-name: girar;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

@keyframes girar {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    .sideBarDerecho {
        width: 100% !important;
    }

    .sideBarDerechoMd {
        width: 100% !important;
    }

    .sideBarDerechoLg {
        width: 100% !important;
    }

    .sideBarDerechoXl {
        width: 100% !important;
    }

    .sideBarIzquierdo {
        width: 100% !important;
    }

    .sideBarIzquierdoMd {
        width: 100% !important;
    }

    .sideBarIzquierdoLg {
        width: 100% !important;
    }
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
    .sideBarDerecho {
        width: 100% !important;
    }

    .sideBarDerechoMd {
        width: 100% !important;
    }

    .sideBarDerechoXl {
        width: 100% !important;
    }

    .sideBarDerechoLg {
        width: 100% !important;
    }

    .sideBarIzquierdo {
        width: 100% !important;
    }

    .sideBarIzquierdoMd {
        width: 100% !important;
    }

    .sideBarIzquierdoLg {
        width: 100% !important;
    }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .sideBarDerecho {
        width: 25% !important;
    }

    .sideBarDerechoMd {
        width: 50% !important;
    }

    .sideBarDerechoLg {
        width: 75% !important;
    }

    .sideBarDerechoXl {
        width: 100% !important;
    }

    .sideBarIzquierdo {
        width: 25% !important;
    }

    .sideBarIzquierdoMd {
        width: 50% !important;
    }

    .sideBarIzquierdoLg {
        width: 75% !important;
    }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sideBarDerecho {
        width: 25% !important;
    }

    .sideBarDerechoMd {
        width: 50% !important;
    }

    .sideBarDerechoLg {
        width: 75% !important;
    }

    .sideBarDerechoXl {
        width: 100% !important;
    }

    .sideBarIzquierdo {
        width: 25% !important;
    }

    .sideBarIzquierdoMd {
        width: 50% !important;
    }

    .sideBarIzquierdoLg {
        width: 75% !important;
    }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .sideBarDerecho {
        width: 25% !important;
    }

    .sideBarDerechoMd {
        width: 50% !important;
    }

    .sideBarDerechoLg {
        width: 75% !important;
    }

    .sideBarDerechoXl {
        width: 100% !important;
    }

    .sideBarIzquierdo {
        width: 25% !important;
    }

    .sideBarIzquierdoMd {
        width: 50% !important;
    }

    .sideBarIzquierdoLg {
        width: 75% !important;
    }
}

.contenedor::-webkit-scrollbar {
    -webkit-appearance: none;
}

.contenedor::-webkit-scrollbar:vertical {
    width: 8px;
}

.contenedor::-webkit-scrollbar-button:increment, .contenedor::-webkit-scrollbar-button {
    display: none;
}

.contenedor::-webkit-scrollbar:horizontal {
    height: 8px;
}

.contenedor::-webkit-scrollbar-thumb {
    background-color: #797979;
    border-radius: 20px;
    border: 2px solid #f1f2f3;
}

.contenedor::-webkit-scrollbar-track {
    border-radius: 10px;
}

.contenedor {
    scrollbar-width: thin;
}


.bd-example::before {
    background: #ffdd57;
    border-radius: 2px 2px 0 0;
    bottom: 100%;
    color: rgba(0,0,0,.7);
    content: "Example";
    display: inline-block;
    font-size: 7px;
    font-weight: 700;
    left: -1px;
    letter-spacing: 1px;
    margin-left: -1px;
    padding: 3px 5px;
    position: absolute;
    text-transform: uppercase;
    vertical-align: top;
}

.ui-sidebar-close {
    display: none;
}

.selected-autocomplete .ui-state-highlight {
    border: 1px solid #bd2130 !important;
    background: #bd2130 !important;
    color: #fff;
}

.alumno-baja {
    color: #dc3545;
    font-weight: bold;
}

.row-activo {
    color: #28a914 !important;
    font-weight: bold;
}

.row-inactivo {
    color: #bd2130 !important;
}

.text-small-info {
    color: #276cda;
    font-size: small;
}

.ui-tabs .ui-tabs-nav > li.ui-state-default.ui-state-active {
    background: #9C223C !important;
    color: #ffffff !important;
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: #ffffff !important;
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header.ui-state-active {
    border-color: #B51C40 !important;
}

.column-row-toggler {
    width: 2rem !important;
}