/*html, body {
    height: 100%;
}
html, body, body > #app:has(.main-login) {
    height: 100%;
}*/
/*html, body, body > #app {
    height: 100vh;
}*/

html:has(.main-login), body:has(.main-login), #app:has(.main-login) {
    height: 100vh;
}

@keyframes pulse-x {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.12);
        filter: brightness(1.3);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

.loading-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-logo {
    max-width: 300px;
    max-height: 300px;
    animation: pulse-x 1.2s infinite;
}
/* Login */
.main-login {
    background: url(../imgs/bg_login.svg);
}

.welcome-login {
    color: #fff !important;
    background: rgba(26, 65, 70, 0.50) !important;
    padding: 3rem !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 24px rgba(26, 65, 70, 0.07) !important;
}
/*********/

/* Menu lateral */
.menu-lateral > .mud-drawer-content::before {
    background: url(../imgs/bg_menu.svg);
    position: absolute;
    content: "";
    inset: 0;
}

.menu-lateral .mud-nav-link, .menu-lateral .mud-nav-link .active, .menu-lateral .mud-nav-link-expand-icon {
    color: #fff !important;
}

    .menu-lateral .mud-nav-link-expand-icon.mud-transform {
        fill: #fff !important;
    }

.main-principal {
    background: #eee;
    min-height: 100vh;
}

/* Width */
.w-1 {
    width: 1%;
}

.w-5 {
    width: 5%;
}

.w-10 {
    width: 10%;
}

.mw-1 {
    max-width: 1%;
}

.mw-5 {
    max-width: 5%;
}

.mw-10 {
    max-width: 10%;
}

@media(min-width: 960px) {
    .w-md-1 {
        width: 1%;
    }

    .w-md-5 {
        width: 5%;
    }

    .w-md-10 {
        width: 10%;
    }

    .mw-md-1 {
        max-width: 1%;
    }

    .mw-md-5 {
        max-width: 5%;
    }

    .mw-md-10 {
        max-width: 10%;
    }
}



/* Text */
.text-start {
    text-align: start;
}

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

.text-end {
    text-align: end;
}

@media(min-width: 960px) {
    .text-md-start {
        text-align: start !important;
    }

    .text-md-end {
        text-align: center !important;
    }

    .text-md-end {
        text-align: end !important;
    }
}

th.text-end > span.column-header {
    display: block !important;
}

@media(min-width: 960px) {
    th.text-md-end > span.column-header {
        display: block !important;
    }
}