/* =========================
   VARIABLES
   ========================= */

:root {
    --footer-height: 4rem;
}


/* =========================
   BASE STRUCTURE
   ========================= */

body {
    display: block;
    overflow-x: hidden;
}

.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

    .layout .layoutContent {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        min-width: 0;
    }

.public-shell-main {
    flex: 1 1 auto;
    padding-bottom: .5rem;
}

.team_logo {
    height: 6rem;
}


/* =========================
   CARD SHELL
   ========================= */
.public-shell-card {
    width: 100%;
    max-height: calc(100vh - 13rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}


/* =========================
   FOOTER
   ========================= */

.public-shell-footer {
    height: var(--footer-height);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.public-footer-logo {
    height: calc(var(--footer-height) - 0.75rem);
    width: auto;
    display: inline-block;
}


/* =========================
   AUTH BACKGROUND
   ========================= */

.auth-bg {
    position: relative;
    min-height: 100vh;
    background-size: cover;
    background-position: 50% 70%;
    background-repeat: no-repeat;
    overflow: hidden;
}

    .auth-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.2);
        z-index: 0;
        pointer-events: none;
    }

    .auth-bg > * {
        position: relative;
        z-index: 1;
    }

@media (max-width: 768px) {
    .auth-bg {
        background-position: 50% 15%;
    }
}


/* =========================
   SHELL TO USE ON The View with the Content
   ========================= */

.public-form-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

.public-form-header {
    flex: 0 0 auto;
}

.public-form-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 1rem 1rem 1rem;
}