html,
body {
    min-height: 100%;
}

.access-modal {
    box-sizing: border-box;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;

    display: none;
    align-items: center;
    justify-content: center;

    overflow: hidden !important;
    padding: clamp(10px, 2.2vh, 24px) !important;
}

.access-modal:not(.hidden) {
    display: flex;
}

.access-modal-panel {
    box-sizing: border-box;
    width: 100%;
    margin: auto !important;


    max-height: calc(100dvh - clamp(20px, 4.4vh, 48px));
    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-height: 760px) {
    .access-modal {
        padding: 10px !important;
    }

    .access-modal-panel {
        max-height: calc(100dvh - 20px);
    }

    .access-modal-panel > div:first-child {
        min-height: 64px !important;
    }

    .access-modal-panel > div:nth-child(2) {
        height: 44px !important;
    }
}


@media (max-height: 560px) {
    .access-modal {
        padding: 8px !important;
    }

    .access-modal-panel {
        max-height: calc(100dvh - 16px);
        border-radius: 16px !important;
    }
}