:root {
    /* TODO eliminar las que no se usen */
    --min-width: 375px;
    --max-width: 1280px;
    --min-height: 667px;
    --max-height: 832px;
    --max-header-width: 450px;
    --max-panel-width: 542px;
    --xs: 768px;
    --sm: 992px;
    --md: 1200px;
    --lg: 1200px;

    --logo-height: 67px;
    --logo-padding-y: 32px;
    --logo-padding-x: 0px;
}

/*** Page layout ***/
html, body {
    box-sizing: border-box;
    height: 100%;
}
body {
    display: table;
    width: 100%;
}
header, main, footer {
    display: table-row;
    align-items: center;
    justify-content: center;
}
main {
    height: 85%;
}

#mainLayout {
    max-width: var(--max-panel-width);
}

/*** Logo um ***/
#bannerLogoUM {
    display: table;
    padding: var(--logo-padding-y) var(--logo-padding-x);
    width: 100%;
}
#logoUM {
    display: table-cell;
    text-align: center;
}
#logoUM img {
    height: var(--logo-height);
}
#bannerHelp {
    display: table-cell;
    width: 100%;
    vertical-align: bottom;
    text-align: right;
}

/*** Mobile ***/
@media screen and (max-width: 768px) {
    main {
        height: 100vh;
    }
}
@media screen and (max-width: 600px) {
    /* Modal pantalla completa */
    .modal {
        padding: 0 !important;
    }
    .modal-dialog {
        padding-left: 3.2rem;
        margin: 0 !important;
    }
    .modal-content {
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        /*background-color: var(--primario);*/
    }
}
@media screen and (max-width: 542px ) {
    #panelContainer>.panel {
        box-shadow: unset;
        -webkit-box-shadow: unset;
    }
}