/* editForms.css - generic dxForm layout styling shared by any page that builds
   a dxForm from server-supplied field definitions (see editForms.js). */

.dx-field-item-text-above {
    margin-bottom: 6px;
}

.dx-field-item-editor-and-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dx-field-item-editor-and-right > .dx-field-item-content {
    flex: 1 1 auto;
    min-width: 0;
}

.dx-field-item-text-right {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .dx-field-item-editor-and-right {
        flex-wrap: wrap;
    }

    .dx-field-item-editor-and-right > .dx-field-item-content {
        flex-basis: 100%;
    }

    .dx-field-item-text-right {
        flex-basis: 100%;
        order: 2;
    }
}

/* Validation messages default to the editor's own width, which is far too
   narrow for small editors like dxCheckBox and causes the message text to
   wrap into a tall, thin column. DevExtreme sets the overlay's width via an
   inline style based on the target editor's width, so plain CSS rules get
   overridden - !important is required to widen it. Let the message overlay
   grow wider than its anchor editor so it can display as a shorter, wider
   box instead. */
.dx-field-item-content .dx-invalid-message.dx-overlay-wrapper {
    width: max-content !important;
    min-width: 220px !important;
    max-width: 640px !important;
}

.dx-field-item-content .dx-invalid-message.dx-overlay-wrapper .dx-overlay-content {
    width: 100% !important;
    max-width: 640px !important;
}

.dx-field-item-boilerplate-heading {
    font-size: 1.2em;
    font-weight: 600;
    margin: 10px 0 6px 0;
}

.dx-field-item-boilerplate-text {
    margin: 4px 0;
}

.dx-field-item-boilerplate-lineSpace {
    height: 40px;
}

.dx-field-item-boilerplate-infoBox,
.dx-field-item-boilerplate-warningBox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 20px;
    margin: 6px 0;
}

.dx-field-item-boilerplate-infoBox {
    background-color: #dff2d8;
    border: 1px solid #a9d18d;
    color: #1a1a1a;
}

.dx-field-item-boilerplate-warningBox {
    background-color: #ffffff;
    border: 1px solid #d9534f;
    color: #d9534f;
}

.dx-field-item-boilerplate-icon {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 1.1em;
}

.dx-field-item-boilerplate-infoBox .dx-field-item-boilerplate-icon {
    background-color: #14361a;
    color: #ffffff;
    border-radius: 50%;
    width: 1.4em;
    height: 1.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
}

.dx-field-item-boilerplate-warningBox .dx-field-item-boilerplate-icon {
    color: #d9534f;
}

/* On wide screens labels sit to the left of the editor. DevExtreme's
   alignItemLabels feature measures each label's natural (unwrapped) text
   width and applies it as an inline style on .dx-field-item-label-content,
   so a long label can push the editor all the way to the right of the form.
   Inline styles win over plain CSS, so !important is needed to cap the
   width and let the text wrap instead. Editors built via editForms.js are
   capped to 300px wide (see the field-form container rule on the page
   using this form), so there's plenty of room for a wider label column;
   give labels more space to wrap onto fewer, wider lines rather than a
   narrow column. */
@media (min-width: 768px) {
    .dx-field-item-label-location-left .dx-field-item-label-content {
        min-width: 220px !important;
        max-width: 55% !important;
        width: auto !important;
        white-space: normal !important;
        word-wrap: break-word;
    }
}