/* =========================================================
   Shared responsive form layout
   ========================================================= */

.site_menu {
    min-width: 800px !important;
    border-right: 2px solid var(--site-menu-border-right-color);
}

.menu_bar {
    cursor: pointer;
}

.responsive-form,
.responsive-form *,
.responsive-form *::before,
.responsive-form *::after {
    box-sizing: border-box;
}

/* Page-level wrapper only. Keep surrounding sections full width. */
.responsive-form {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0 0 20px 0;
    padding: 0 0 16px 0;
}

/* Card/panel styling for the actual input section only */
.responsive-form-panel {
    background-color: var(--responsive-form-panel-background-color);
    transition: all 0.3s ease;
    padding: 10px 14px 14px 14px;
    width: 100%;
    max-width: 1180px;
    min-width: 0;
    margin: 0 auto 20px auto;
    box-shadow: var(--responsive-form-panel-box-shadow-primary-color) 0 6px 15px, var(--responsive-form-panel-box-shadow-secondary-color) 0 1px 5px;
    border: 1px solid var(--responsive-form-panel-border-color);
    border-radius: 4px;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Keep headers/instructions full width */
.responsive-form-section,
.responsive-form-header,
.responsive-form-instructions,
.responsive-form-separator {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}

    .responsive-form-separator hr {
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

/* Center the actual data-entry rows on wide screens */
.responsive-form-row {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
    column-gap: 18px;
    row-gap: 6px;
    align-items: start;
    width: 100%;
    max-width: 860px;
    min-width: 0;
    margin: 0 auto 12px auto;
    box-sizing: border-box;
}

.responsive-form-label {
    width: 100%;
    min-width: 0;
    text-align: left;
    align-self: center;
    padding-top: 4px;
}

.responsive-form-field {
    width: 100%;
    min-width: 0;
}

    /* Stack multiple controls neatly inside a field */
    .responsive-form-field > *:not(.RadSwitch) {
        display: block;
        max-width: 100%;
        min-width: 0;
    }

        .responsive-form-field > *:not(.RadSwitch) + *:not(.RadSwitch) {
            margin-top: 8px;
        }

    /* Keep only top-level field links natural width on their own line.  Do not target Telerik internal popup/arrow anchors. */
    .responsive-form-field > a,
    .responsive-form-field > .responsive-inline-link,
    .responsive-form-field > .aspNetDisabled {
        display: inline-block;
        width: auto;
        max-width: 100%;
    }

    /* Telerik internal arrow / popup anchors must never inherit generic link sizing */
    .responsive-form-field a[id$="_Arrow"],
    .responsive-form-field a[id$="_popupButton"],
    .responsive-form-field a.rcCalPopup,
    .responsive-form-field a.rcTimePopup,
    .responsive-form-field a.rcTimePopupButton {
        display: block !important;
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-indent: -9999px !important;
        font-size: 0 !important;
        line-height: 0 !important;
        box-sizing: border-box !important;
    }

        /* Hide any inner text containers Telerik may render inside popup / arrow anchors */
        .responsive-form-field a[id$="_Arrow"] *,
        .responsive-form-field a[id$="_popupButton"] *,
        .responsive-form-field a.rcCalPopup *,
        .responsive-form-field a.rcTimePopup *,
        .responsive-form-field a.rcTimePopupButton * {
            font-size: 0 !important;
            line-height: 0 !important;
        }

    /* Native html fields */
    .responsive-form-field input[type="text"],
    .responsive-form-field input[type="password"],
    .responsive-form-field input[type="email"],
    .responsive-form-field input[type="tel"],
    .responsive-form-field input[type="number"],
    .responsive-form-field input[type="search"],
    .responsive-form-field select,
    .responsive-form-field textarea {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Telerik wrapper controls */
    .responsive-form-field .RadInput,
    .responsive-form-field .RadInputMgr,
    .responsive-form-field .RadTextBox,
    .responsive-form-field .RadComboBox,
    .responsive-form-field .RadPicker,
    .responsive-form-field .RadDatePicker,
    .responsive-form-field .RadDateTimePicker,
    .responsive-form-field .RadAutoCompleteBox,
    .responsive-form-field .RadDropDownList {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Telerik internal elements: keep them inside the wrapper without forcing cell overflow */
    .responsive-form-field .riSingle,
    .responsive-form-field .riTextBox,
    .responsive-form-field .rcbInput,
    .responsive-form-field .rcbInner,
    .responsive-form-field .rcbReadOnly,
    .responsive-form-field .rdfd_,
    .responsive-form-field .rdpWrapped,
    .responsive-form-field .rdpInput {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Let internal table cells size naturally. Forcing td widths caused horizontal overflow. */
    .responsive-form-field .RadPicker table,
    .responsive-form-field .RadComboBox table,
    .responsive-form-field .RadInput table,
    .responsive-form-field .RadTextBox table {
        width: 100% !important;
        max-width: 100% !important;
    }

        .responsive-form-field .RadPicker table td,
        .responsive-form-field .RadComboBox table td,
        .responsive-form-field .RadInput table td,
        .responsive-form-field .RadTextBox table td {
            width: auto !important;
            max-width: none !important;
        }

    /* Buttons / arrow cells should keep natural width */
    .responsive-form-field .rcbActionButton,
    .responsive-form-field .rcbArrowCell,
    .responsive-form-field .riCell,
    .responsive-form-field .rdpButton,
    .responsive-form-field .rdpButtonCell {
        width: auto !important;
        max-width: none !important;
    }

/* Action buttons should not span full width on desktop */
.responsive-form-actions {
    width: 100%;
    max-width: 860px;
    margin: 16px auto 0 auto;
    text-align: left;
}

    .responsive-form-actions > * {
        display: inline-block;
        width: auto;
        max-width: 100%;
        margin-right: 8px;
        margin-bottom: 8px;
    }

/* Safety: clip any accidental 1px overflow inside this form block only */
.responsive-form,
.responsive-form-panel {
    overflow-x: clip;
}

.responsive-form-field .RadSwitch {
    margin-right: 100%;
}

/* Mobile / tablet */
@media only screen and (max-width: 768px) {
    .responsive-form {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0 0 16px 0;
        padding: 0 0 12px 0;
    }

    .responsive-form-panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0 auto 16px auto;
        padding: 8px;
    }

    .responsive-form-row {
        grid-template-columns: 1fr !important;
        column-gap: 0;
        row-gap: 4px;
        max-width: 100%;
        min-width: 0;
        margin: 0 0 14px 0;
    }

    .responsive-form-label {
        text-align: left;
        padding-top: 0;
    }

    .responsive-form-actions {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

        .responsive-form-actions > * {
            display: block;
            width: 100%;
            margin-right: 0;
        }
}

@media only screen and (max-width: 800px) {
    .responsive-grid th.hide-lt-500,
    .responsive-grid td.hide-lt-500 {
        display: none !important;
    }
}