.grecaptcha-badge { visibility: hidden; }

.user-form-container {
    background-color: var(--bg_nav);
    border: 1px solid var(--bg_nav_lighter1);
    border-radius: 0.5em;
    padding: 1em;
    margin: 0 auto;

    & .user-form-heading {
        text-align: center;
    }

    & .user-form {
        padding: 2em 0;

        & input {
            display: block;
            width: 100%;

            &[type="checkbox"] {
                width: auto;
                margin-right: 0.25em;
                display: inline-block;
            }
        }

        & textarea {
            width: 100%;
        }

        & .data {
            margin-bottom: 1em;
        }

        & label {
            display: block;
            margin-bottom: 0.25em;
        }

        & .field-button-group {
            display: grid;
            grid-template-columns: 1fr max-content;
            gap: 0.25em;
        }

        & .field-error {
            border: 1px solid var(--field_err_dark);
            display: inline-block;
            width: calc(100% - 1.25em);

            & ~ .mdi {
                color: var(--field_err_dark);
            }

            &:disabled {
                border: none;

                & ~ .mdi {
                    display: none;
                }
            }
        }

        & .submit-button-group {
            display: grid;
            gap: 0.5em;
        }
    }

    & .captcha-info {
        margin-top: 0.5rem;
        font-size: 0.75rem;
        opacity: 0.8;
    }

    & .user-form-footing {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5em;
    }
}

@media (min-width: 600px) {
    .user-form-container {
        min-width: 20em;
        max-width: min(75%, 80em);
    }
}

/* ===============================================================
    DASHBOARD
   =============================================================== */

/* ~~~ DASHBOARD CONTAINER ~~~ */
.user-dashboard-container {
    background-color: var(--bg_nav);
    border: 1px solid var(--bg_nav_lighter1);
    border-radius: 0.5em;
    padding: 1em;
    display: grid;
    gap: 1em;

    & > h1 {
        text-align: center;
    }

    & .section-row {
        display: grid;
        gap: 0.5em;

        & h2 {
            color: var(--fc_accent);
        }

        & h3 {
            color: var(--fc_accent_logo);
        }

        & .section-title {
            display: grid;
            gap: 0.5em;
            grid-template-columns: 1fr auto;
            border-bottom: 1px solid var(--bg_nav_lighter2);
            padding: 0.5em 0;

            & .button {
                height: max-content;
                font-size: 0.8rem;
            }
        }

        & .section-data {
            display: grid;
            gap: 0.5em;
        }

        & .section-data-row {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 1em;
            
            &.col-1 {
                grid-template-columns: 1fr;
            }
        }
    }
}

/* ~~~ DASHBOARD CONTAINER RESPONSIVE ~~~ */
@media (min-width: 640px) {
    .user-dashboard-container {
        & .section-row {
            grid-template-columns: minmax(12.5em, 1fr) 4fr;
            border: 1px solid var(--bg_nav_lighter2);

            & .section-title {
                border-bottom: none;
                border-right: 1px solid var(--bg_nav_lighter2);
                padding: 1em;
            }

            & .section-data {
                padding: 1em;
            }
        }
    }
}

@media (min-width: 1024px) {
    .user-dashboard-container {
        max-width: min(75%, 80em);
        margin: 0 auto;
    }
}