/* Shared mobile/tablet form density and touch ergonomics. Loaded after app CSS. */
@media (max-width: 1199.98px) {
    :root {
        --iv-form-control-h: 42px;
        --iv-form-control-radius: 13px;
        --iv-form-font: 13px;
        --iv-form-label-font: 11.5px;
        --iv-form-card-pad: 14px;
        --iv-form-card-radius: 16px;
        --iv-form-gap: 12px;
    }

    .main-content form,
    .modal form,
    .offcanvas form {
        font-family: "Montserrat", sans-serif !important;
    }

    .main-content form .row,
    .modal form .row,
    .offcanvas form .row {
        --bs-gutter-x: var(--iv-form-gap) !important;
        --bs-gutter-y: var(--iv-form-gap) !important;
    }

    .main-content form .g-3,
    .main-content form .g-4,
    .main-content form .g-md-4,
    .modal form .g-3,
    .modal form .g-4,
    .modal form .g-md-4 {
        --bs-gutter-x: var(--iv-form-gap) !important;
        --bs-gutter-y: var(--iv-form-gap) !important;
    }

    .main-content form .form-group,
    .main-content form .mb-3,
    .modal form .form-group,
    .modal form .mb-3,
    .offcanvas form .form-group,
    .offcanvas form .mb-3 {
        margin-bottom: var(--iv-form-gap) !important;
    }

    .main-content form .mb-4,
    .modal form .mb-4,
    .offcanvas form .mb-4 {
        margin-bottom: 16px !important;
    }

    .main-content form label,
    .main-content form .form-label,
    .modal form label,
    .modal form .form-label,
    .offcanvas form label,
    .offcanvas form .form-label {
        display: block !important;
        margin: 0 0 5px !important;
        color: #17324d !important;
        font-size: var(--iv-form-label-font) !important;
        font-weight: 650 !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
    }

    .main-content form .star_add,
    .modal form .star_add,
    .offcanvas form .star_add {
        margin-left: 2px !important;
        color: #dc3545 !important;
        font-size: 1em !important;
        line-height: 1 !important;
    }

    .main-content form .form-control,
    .main-content form .form-select,
    .modal form .form-control,
    .modal form .form-select,
    .offcanvas form .form-control,
    .offcanvas form .form-select {
        width: 100% !important;
        min-height: var(--iv-form-control-h) !important;
        height: var(--iv-form-control-h) !important;
        padding: 0 13px !important;
        border: 1px solid #cfd8e3 !important;
        border-radius: var(--iv-form-control-radius) !important;
        background-color: #fff !important;
        color: #24364b !important;
        font-family: "Montserrat", sans-serif !important;
        font-size: var(--iv-form-font) !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;
        box-shadow: none !important;
        letter-spacing: 0 !important;
    }

    .main-content form .form-select,
    .modal form .form-select,
    .offcanvas form .form-select {
        padding-right: 34px !important;
        background-position: right 12px center !important;
        background-size: 11px 9px !important;
    }

    .main-content form textarea.form-control,
    .modal form textarea.form-control,
    .offcanvas form textarea.form-control {
        height: auto !important;
        min-height: 78px !important;
        padding: 10px 12px !important;
        border-radius: 13px !important;
        line-height: 1.35 !important;
        resize: vertical !important;
    }

    .main-content form input[type="file"].form-control,
    .modal form input[type="file"].form-control,
    .offcanvas form input[type="file"].form-control {
        height: auto !important;
        min-height: var(--iv-form-control-h) !important;
        padding: 9px 12px !important;
        line-height: 1.2 !important;
    }

    .main-content form .form-control::placeholder,
    .main-content form .phone-number-input::placeholder,
    .main-content form .prefix-search-input::placeholder,
    .modal form .form-control::placeholder,
    .modal form .phone-number-input::placeholder,
    .offcanvas form .form-control::placeholder,
    .offcanvas form .phone-number-input::placeholder {
        color: #8a97a8 !important;
        opacity: 1 !important;
        font-size: calc(var(--iv-form-font) - .5px) !important;
        font-weight: 450 !important;
    }

    .main-content form .form-control:focus,
    .main-content form .form-select:focus,
    .main-content form .phone-input-group:focus-within,
    .modal form .form-control:focus,
    .modal form .form-select:focus,
    .modal form .phone-input-group:focus-within,
    .offcanvas form .form-control:focus,
    .offcanvas form .form-select:focus,
    .offcanvas form .phone-input-group:focus-within {
        border-color: #11b8b8 !important;
        box-shadow: 0 0 0 3px rgba(17, 184, 184, .12) !important;
        outline: 0 !important;
    }

    .main-content form .form-control[readonly],
    .main-content form .form-control:disabled,
    .main-content form .form-select:disabled,
    .modal form .form-control[readonly],
    .modal form .form-control:disabled,
    .modal form .form-select:disabled,
    .offcanvas form .form-control[readonly],
    .offcanvas form .form-control:disabled,
    .offcanvas form .form-select:disabled {
        background-color: #f3f6f9 !important;
        color: #6b7788 !important;
        -webkit-text-fill-color: #6b7788 !important;
    }

    .main-content form .invalid-input,
    .modal form .invalid-input,
    .offcanvas form .invalid-input {
        border-color: #dc3545 !important;
    }

    .main-content form .text-danger,
    .main-content form .invalid-errortext,
    .modal form .text-danger,
    .modal form .invalid-errortext,
    .offcanvas form .text-danger,
    .offcanvas form .invalid-errortext {
        display: block !important;
        margin-top: 4px !important;
        font-size: 10.5px !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;
    }

    .main-content form .select2-container,
    .modal form .select2-container,
    .offcanvas form .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .main-content form .select2-container--default .select2-selection--single,
    .modal form .select2-container--default .select2-selection--single,
    .offcanvas form .select2-container--default .select2-selection--single {
        min-height: var(--iv-form-control-h) !important;
        height: var(--iv-form-control-h) !important;
        padding: 0 34px 0 13px !important;
        border: 1px solid #cfd8e3 !important;
        border-radius: var(--iv-form-control-radius) !important;
        background: #fff !important;
    }

    .main-content form .select2-container--default .select2-selection--single .select2-selection__rendered,
    .modal form .select2-container--default .select2-selection--single .select2-selection__rendered,
    .offcanvas form .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding: 0 !important;
        color: #24364b !important;
        font-size: var(--iv-form-font) !important;
        font-weight: 500 !important;
        line-height: var(--iv-form-control-h) !important;
    }

    .main-content form .select2-container--default .select2-selection--single .select2-selection__arrow,
    .modal form .select2-container--default .select2-selection--single .select2-selection__arrow,
    .offcanvas form .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 0 !important;
        right: 10px !important;
        width: 18px !important;
        height: var(--iv-form-control-h) !important;
    }

    .main-content form .select2-container--default .select2-selection--multiple,
    .modal form .select2-container--default .select2-selection--multiple,
    .offcanvas form .select2-container--default .select2-selection--multiple {
        min-height: var(--iv-form-control-h) !important;
        padding: 4px 8px !important;
        border: 1px solid #cfd8e3 !important;
        border-radius: var(--iv-form-control-radius) !important;
        background: #fff !important;
    }

    .main-content form .select2-container--default .select2-selection--multiple .select2-selection__choice,
    .modal form .select2-container--default .select2-selection--multiple .select2-selection__choice,
    .offcanvas form .select2-container--default .select2-selection--multiple .select2-selection__choice {
        margin: 2px 4px 2px 0 !important;
        padding: 3px 8px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    .main-content form .phone-input-group,
    .modal form .phone-input-group,
    .offcanvas form .phone-input-group {
        min-height: var(--iv-form-control-h) !important;
        height: var(--iv-form-control-h) !important;
        border: 1px solid #cfd8e3 !important;
        border-radius: var(--iv-form-control-radius) !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .main-content form .phone-prefix-trigger,
    .modal form .phone-prefix-trigger,
    .offcanvas form .phone-prefix-trigger {
        min-width: 70px !important;
        padding: 0 8px 0 10px !important;
        border-radius: var(--iv-form-control-radius) 0 0 var(--iv-form-control-radius) !important;
        color: #24364b !important;
        font-size: 12px !important;
        font-weight: 550 !important;
        line-height: 1 !important;
    }

    .main-content form .phone-prefix-trigger .prefix-chevron,
    .modal form .phone-prefix-trigger .prefix-chevron,
    .offcanvas form .phone-prefix-trigger .prefix-chevron {
        width: 10px !important;
        height: 10px !important;
    }

    .main-content form .phone-divider,
    .modal form .phone-divider,
    .offcanvas form .phone-divider {
        height: 48% !important;
        margin: 0 2px !important;
        background: #d4dce6 !important;
    }

    .main-content form .phone-input-group .phone-number-input,
    .modal form .phone-input-group .phone-number-input,
    .offcanvas form .phone-input-group .phone-number-input {
        min-height: 0 !important;
        height: 100% !important;
        padding: 0 10px !important;
        color: #24364b !important;
        font-size: var(--iv-form-font) !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;
    }

    .main-content form .phone-prefix-dropdown,
    .modal form .phone-prefix-dropdown,
    .offcanvas form .phone-prefix-dropdown {
        width: min(220px, calc(100vw - 36px)) !important;
        max-height: min(42vh, 290px) !important;
        border-radius: 13px !important;
        border-color: #dbe4ee !important;
        box-shadow: 0 18px 42px rgba(15, 39, 61, .18) !important;
        z-index: 2147481200 !important;
    }

    .main-content form .prefix-search-wrap,
    .modal form .prefix-search-wrap,
    .offcanvas form .prefix-search-wrap {
        padding: 8px !important;
    }

    .main-content form .prefix-search-input,
    .modal form .prefix-search-input,
    .offcanvas form .prefix-search-input {
        min-height: 34px !important;
        padding: 0 9px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
        line-height: 34px !important;
    }

    .main-content form .prefix-list,
    .modal form .prefix-list,
    .offcanvas form .prefix-list {
        max-height: min(34vh, 220px) !important;
    }

    .main-content form .prefix-option,
    .modal form .prefix-option,
    .offcanvas form .prefix-option {
        min-height: 34px !important;
        padding: 7px 10px !important;
        gap: 7px !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
    }

    .main-content form .prefix-option .prefix-flag,
    .modal form .prefix-option .prefix-flag,
    .offcanvas form .prefix-option .prefix-flag {
        font-size: 14px !important;
    }

    .main-content form .prefix-option .prefix-iso,
    .main-content form .prefix-option .prefix-code,
    .modal form .prefix-option .prefix-iso,
    .modal form .prefix-option .prefix-code,
    .offcanvas form .prefix-option .prefix-iso,
    .offcanvas form .prefix-option .prefix-code {
        font-size: 11.5px !important;
    }

    .main-content form .card-head,
    .main-content .inner-card > .card-head,
    .main-content .profile-inner-card > .card-head,
    .modal form .card-head,
    .offcanvas form .card-head {
        min-height: 0 !important;
        padding: 12px var(--iv-form-card-pad) !important;
        gap: 10px !important;
        border-bottom: 1px solid #eef3f8 !important;
        border-top-left-radius: calc(var(--iv-form-card-radius) - 1px) !important;
        border-top-right-radius: calc(var(--iv-form-card-radius) - 1px) !important;
        background: #f7fbfb !important;
    }

    .main-content form .card-body,
    .main-content .inner-card > form,
    .main-content .inner-card > .card-body,
    .main-content .profile-inner-card > .card-body,
    .modal form .card-body,
    .offcanvas form .card-body {
        padding: var(--iv-form-card-pad) !important;
    }

    .main-content form .inner-card,
    .main-content form .profile-inner-card,
    .main-content .inner-card:has(> form),
    .main-content .inner-card:has(> .card-head),
    .main-content .profile-inner-card,
    .modal form .inner-card,
    .offcanvas form .inner-card {
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: var(--iv-form-card-radius) !important;
        padding: 0 !important;
        background: #fff !important;
        box-shadow: 0 10px 26px rgba(15, 39, 61, .07) !important;
        overflow: visible !important;
    }

    .main-content form .card-section-icon,
    .main-content .card-section-icon,
    .modal form .card-section-icon,
    .offcanvas form .card-section-icon {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        border-radius: 9px !important;
    }

    .main-content form .card-section-icon svg,
    .main-content .card-section-icon svg,
    .modal form .card-section-icon svg,
    .offcanvas form .card-section-icon svg {
        width: 15px !important;
        height: 15px !important;
    }

    .main-content form .inner-title,
    .main-content form h3.inner-title,
    .main-content .profile-inner-card .inner-title,
    .modal form .inner-title,
    .offcanvas form .inner-title {
        margin: 0 !important;
        color: #10273d !important;
        font-size: 13.5px !important;
        font-weight: 650 !important;
        line-height: 1.15 !important;
    }

    .main-content form .card-section-subtitle,
    .main-content .profile-inner-card .card-section-subtitle,
    .modal form .card-section-subtitle,
    .offcanvas form .card-section-subtitle {
        margin-top: 2px !important;
        color: #7b8798 !important;
        font-size: 10.5px !important;
        font-weight: 450 !important;
        line-height: 1.25 !important;
    }

    .main-content form .media-upload-card,
    .modal form .media-upload-card,
    .offcanvas form .media-upload-card {
        padding: 12px !important;
        border-radius: 13px !important;
        background: #f8fbfb !important;
    }

    .main-content form .round-preview-wrap,
    .modal form .round-preview-wrap,
    .offcanvas form .round-preview-wrap {
        width: 86px !important;
        height: 86px !important;
        margin-bottom: 8px !important;
        border-width: 2px !important;
    }

    .main-content form .round-preview-badge,
    .modal form .round-preview-badge,
    .offcanvas form .round-preview-badge {
        width: 23px !important;
        height: 23px !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    .main-content form .upload-choose-btn,
    .modal form .upload-choose-btn,
    .offcanvas form .upload-choose-btn {
        min-height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        font-size: 11.5px !important;
        font-weight: 650 !important;
        line-height: 1.1 !important;
    }

    .main-content form .upload-hint-text,
    .modal form .upload-hint-text,
    .offcanvas form .upload-hint-text {
        margin-top: 6px !important;
        font-size: 10.5px !important;
        line-height: 1.35 !important;
    }

    .main-content form .form-check,
    .modal form .form-check,
    .offcanvas form .form-check {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 28px !important;
        padding-left: 0 !important;
    }

    .main-content form .form-check-input,
    .modal form .form-check-input,
    .offcanvas form .form-check-input {
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
        border-radius: 6px !important;
    }

    .main-content form .form-buttons,
    .modal form .form-buttons,
    .offcanvas form .form-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-top: 16px !important;
    }

    .main-content form .form-buttons .primary-button,
    .main-content form .form-buttons .outline-btn,
    .main-content form button[type="submit"],
    .main-content form button[type="button"].primary-button,
    .main-content form a.primary-button,
    .modal form .form-buttons .primary-button,
    .modal form .form-buttons .outline-btn,
    .modal form button[type="submit"],
    .offcanvas form .form-buttons .primary-button,
    .offcanvas form .form-buttons .outline-btn,
    .offcanvas form button[type="submit"] {
        min-width: 0 !important;
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 16px !important;
        border-radius: 40px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
    }

    .main-content:has(form) .page-head,
    .main-content:has(form) .al-page-head {
        margin-bottom: 14px !important;
    }

    .main-content:has(form) .dash-title,
    .main-content:has(form) .al-page-title {
        font-size: 18px !important;
        line-height: 1.18 !important;
    }

    .main-content:has(form) .page-head p,
    .main-content:has(form) .al-page-sub {
        font-size: 11.5px !important;
        line-height: 1.25 !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .main-content form .row > .col-md-4,
    .main-content form .row > .col-lg-4,
    .main-content form .row > .col-xl-4,
    .modal form .row > .col-md-4,
    .modal form .row > .col-lg-4,
    .modal form .row > .col-xl-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 575.98px) {
    :root {
        --iv-form-control-h: 38px;
        --iv-form-control-radius: 12px;
        --iv-form-font: 12px;
        --iv-form-label-font: 10.5px;
        --iv-form-card-pad: 12px;
        --iv-form-card-radius: 15px;
        --iv-form-gap: 10px;
    }

    .main-content form .row > [class*="col-"],
    .modal form .row > [class*="col-"],
    .offcanvas form .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .main-content form textarea.form-control,
    .modal form textarea.form-control,
    .offcanvas form textarea.form-control {
        min-height: 68px !important;
        padding: 9px 11px !important;
    }

    .main-content form .card-head,
    .main-content .inner-card > .card-head,
    .main-content .profile-inner-card > .card-head,
    .modal form .card-head,
    .offcanvas form .card-head {
        padding: 10px var(--iv-form-card-pad) !important;
        gap: 8px !important;
    }

    .main-content form .card-section-icon,
    .main-content .card-section-icon,
    .modal form .card-section-icon,
    .offcanvas form .card-section-icon {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
    }

    .main-content form .inner-title,
    .main-content form h3.inner-title,
    .main-content .profile-inner-card .inner-title,
    .modal form .inner-title,
    .offcanvas form .inner-title {
        font-size: 12.5px !important;
    }

    .main-content form .card-section-subtitle,
    .main-content .profile-inner-card .card-section-subtitle,
    .modal form .card-section-subtitle,
    .offcanvas form .card-section-subtitle {
        font-size: 9.8px !important;
    }

    .main-content form .phone-prefix-trigger,
    .modal form .phone-prefix-trigger,
    .offcanvas form .phone-prefix-trigger {
        min-width: 62px !important;
        padding-left: 8px !important;
        padding-right: 6px !important;
        font-size: 11px !important;
    }

    .main-content form .phone-input-group .phone-number-input,
    .modal form .phone-input-group .phone-number-input,
    .offcanvas form .phone-input-group .phone-number-input {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    .main-content form .form-buttons .primary-button,
    .main-content form .form-buttons .outline-btn,
    .main-content form button[type="submit"],
    .main-content form button[type="button"].primary-button,
    .main-content form a.primary-button,
    .modal form .form-buttons .primary-button,
    .modal form .form-buttons .outline-btn,
    .modal form button[type="submit"],
    .offcanvas form .form-buttons .primary-button,
    .offcanvas form .form-buttons .outline-btn,
    .offcanvas form button[type="submit"] {
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 13px !important;
        font-size: 11px !important;
    }

    .main-content form .form-buttons {
        justify-content: flex-start !important;
    }
}

/* Keep scrolled main-content form widgets below the fixed/sticky app headers. */
body.iv-backoffice-layout .main-content .select2-container {
    z-index: 1 !important;
}

body.iv-backoffice-layout .main-content .select2-container--open,
body.iv-backoffice-layout .main-content form .phone-prefix-dropdown {
    z-index: 80 !important;
}

body.iv-backoffice-layout:has(.main-content .select2-container--open):not(.modal-open):not(:has(.offcanvas.show)) > .select2-container--open,
body.iv-backoffice-layout:has(.main-content .select2-container--open):not(.modal-open):not(:has(.offcanvas.show)) > .select2-container--open .select2-dropdown {
    z-index: 80 !important;
}