:root {
    --safe-top: env(safe-area-inset-top);
    --safe-right: env(safe-area-inset-right);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left: env(safe-area-inset-left);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
}

img,
video,
canvas {
    max-width: 100%;
    height: auto;
}

button,
.btn,
.material-btn,
.nav-link,
input,
select,
textarea {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1024px) {
    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }
}

@media (max-width: 900px) {
    .nav {
        padding-left: calc(16px + var(--safe-left));
        padding-right: calc(16px + var(--safe-right));
    }

    .main {
        padding-left: calc(4vw + var(--safe-left));
        padding-right: calc(4vw + var(--safe-right));
        padding-bottom: calc(40px + var(--safe-bottom));
    }

    .nav-menu {
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }

    table,
    .material-table,
    .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .material-table th,
    .material-table td,
    .table th,
    .table td {
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    button,
    .btn,
    .material-btn,
    .nav-link {
        min-height: 44px;
    }

    .nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .search-form button,
    .search-group input[type="text"],
    .search-input {
        min-height: 44px;
    }
}