html {
    width: 100%;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    --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);
}

body {
    width: 100%;
    min-height: var(--app-height, 100dvh);
    overscroll-behavior: none;
}

.page {
    min-height: var(--app-height, 100dvh);
}

.app-page {
    width: 100%;
    min-height: var(--app-height, 100dvh);
}

.app-fill {
    width: 100%;
    height: var(--app-height, 100dvh);
}

.fit-safe {
    padding-top: calc(var(--safe-top, 0px) + var(--fit-pad-top, 0px));
    padding-right: calc(var(--safe-right, 0px) + var(--fit-pad-right, 0px));
    padding-bottom: calc(var(--safe-bottom, 0px) + var(--fit-pad-bottom, 0px));
    padding-left: calc(var(--safe-left, 0px) + var(--fit-pad-left, 0px));
}

.no-page-scroll {
    overflow: hidden;
    touch-action: manipulation;
}

.scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.scroll-y {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    touch-action: manipulation;
}