/* Mobile support for WebForms screens that expose JSON PageMethods. */

.ce-json-mobile,
.ce-json-mobile *,
.ce-json-mobile *::before,
.ce-json-mobile *::after {
    box-sizing: border-box;
}

.ce-json-mobile {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.ce-json-mobile img,
.ce-json-mobile svg,
.ce-json-mobile video,
.ce-json-mobile canvas {
    max-width: 100%;
    height: auto;
}

.ce-json-mobile iframe {
    max-width: 100%;
}

.ce-json-mobile input,
.ce-json-mobile select,
.ce-json-mobile textarea {
    max-width: 100%;
}

.ce-json-mobile button,
.ce-json-mobile input[type="button"],
.ce-json-mobile input[type="submit"],
.ce-json-mobile input[type="reset"],
.ce-json-mobile .btn {
    touch-action: manipulation;
}

.ce-json-mobile :focus-visible {
    outline: 3px solid rgba(29, 105, 210, .42);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .app-main {
        width: 100%;
        min-width: 0;
    }

    .ce-json-mobile {
        padding-right: max(6px, env(safe-area-inset-right));
        padding-left: max(6px, env(safe-area-inset-left));
    }

    .ce-json-mobile .page-wrap,
    .ce-json-mobile .card,
    .ce-json-mobile .panel,
    .ce-json-mobile .body,
    .ce-json-mobile .row,
    .ce-json-mobile .col,
    .ce-json-mobile .field,
    .ce-json-mobile .field-row,
    .ce-json-mobile .grid2,
    .ce-json-mobile .grid3 {
        min-width: 0;
        max-width: 100%;
    }

    .ce-json-mobile [role="dialog"],
    .ce-json-mobile .modal,
    .ce-json-mobile .modal-content,
    .ce-json-mobile .ce-inline-shell {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ce-json-mobile .ce-correction-workspace,
    .ce-json-mobile .ce-family-profile-grid,
    .ce-json-mobile .ce-grid,
    .ce-json-mobile table.grid,
    .ce-json-mobile table.table {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 600px) {
    .ce-json-mobile input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .ce-json-mobile select,
    .ce-json-mobile textarea {
        font-size: 16px !important;
    }

    .ce-json-mobile button,
    .ce-json-mobile input[type="button"],
    .ce-json-mobile input[type="submit"],
    .ce-json-mobile input[type="reset"],
    .ce-json-mobile .btn {
        min-height: 44px;
        white-space: normal;
    }

    .ce-json-mobile input[type="checkbox"],
    .ce-json-mobile input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
    }

    .ce-json-mobile textarea {
        min-height: 96px;
        resize: vertical;
    }

    .ce-json-mobile .profile-nav-row,
    .ce-json-mobile .selector-actions,
    .ce-json-mobile .actions {
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ce-json-mobile *,
    .ce-json-mobile *::before,
    .ce-json-mobile *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}