/* Shared viewport rules for phones and small tablets. */
html {
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
}

img, video, canvas, table {
    max-width: 100%;
}

@media (max-width: 767.98px) {
    body {
        min-height: 100dvh;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .container,
    .container-fluid,
    .row {
        width: 100%;
        max-width: 100%;
    }

    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .main-content {
        min-width: 0;
        width: 100%;
    }

    .card {
        max-width: 100%;
    }

    .login-card,
    .register-card {
        min-height: 100dvh !important;
    }

    .login-card,
    .register-card,
    .survey-card,
    body > .card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 1.5rem 1rem !important;
    }

    .login-card .card-body {
        width: 100%;
        padding: 1rem 0 !important;
    }

    form {
        width: 100%;
    }

    label,
    .form-label {
        font-size: 1rem;
    }

    .login-footer {
        display: block;
        padding: 0 0.75rem;
        overflow-wrap: anywhere;
    }

    .login-footer .text-dark {
        color: #000000 !important;
    }

    .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    input,
    select,
    textarea,
    button,
    .form-control,
    .form-select {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
    }

    input,
    select,
    textarea,
    .form-control,
    .form-select {
        min-height: 48px;
        padding: 0.75rem;
    }

    button,
    .btn {
        min-height: 48px;
    }
}

@supports not (height: 100dvh) {
    body {
        min-height: 100vh;
    }
}
