/*
 * Bootstrap 5 Compatibility Layer
 * Maps BS5 class names to BS3 styling from the theme.
 * Include this AFTER style.css and content*.css
 */

/* ============================================= */
/* col-form-label (was .control-label)           */
/* ============================================= */
.form-horizontal .col-form-label {
    margin-bottom: 0;
    padding-right: 10px;
    padding-top: 7px;
    white-space: normal;
    text-align: right;
}

label.col-form-label {
    text-align: right;
}

/* Right-align legacy BS3 .control-label markup (still used in form pages
 * like FormContent.php). main.css only right-aligns it inside a 768px
 * media query and the `.form-horizontal .control-label` rule in style.css
 * doesn't set text-align at all, so labels left-align by default. Force
 * right alignment to match the rest of the admin form layout. */
.control-label,
.form-horizontal .control-label,
label.control-label {
    text-align: right;
}

.form-horizontal.form-bordered .form-group > .col-form-label {
    padding: 22px 15px 15px;
    border-right: 1px solid #eee;
    margin-right: -1px;
}

.has-success .col-form-label,
.has-success .form-text,
.has-success .radio,
.has-success .checkbox {
    color: #468847;
}

.has-warning .col-form-label,
.has-warning .form-text,
.has-warning .radio,
.has-warning .checkbox {
    color: #c09853;
}

.has-error .col-form-label,
.has-error .form-text,
.has-error .radio,
.has-error .checkbox {
    color: #b94a48;
}

.theme-panel .col-form-label {
    line-height: 30px;
}

.theme-panel .col-form-label.double-line {
    line-height: 16px;
}

/* ============================================= */
/* float-start / float-end (was .pull-left/right)*/
/* ============================================= */
.float-start {
    float: left !important;
}

.float-end {
    float: right !important;
}

/* ============================================= */
/* btn-secondary (was .btn-default)              */
/* Restore the BS3 .btn-default appearance       */
/* ============================================= */
.btn.btn-secondary,
.btn-secondary {
    color: #fff;
    background: #b6c2c9;
    border-color: #b6c2c9;
    --bs-btn-color: #fff;
    --bs-btn-bg: #b6c2c9;
    --bs-btn-border-color: #b6c2c9;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #929ba1;
    --bs-btn-hover-border-color: #929ba1;
    --bs-btn-focus-shadow-rgb: 155,164,170;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #929ba1;
    --bs-btn-active-border-color: #929ba1;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #b6c2c9;
    --bs-btn-disabled-border-color: #b6c2c9;
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:active,
.btn.btn-secondary.active,
.open .dropdown-toggle.btn.btn-secondary {
    color: #fff;
    background: #929ba1;
    border-color: #929ba1;
}

.btn-group .btn.btn-secondary:not(.active) + .btn.btn-secondary,
.input-group-btn .btn.btn-secondary:not(.active) + .btn.btn-secondary {
    border-left-color: #929ba1;
}

.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
}

/* ============================================= */
/* Badge classes (was .label .label-*)           */
/* ============================================= */
.badge {
    display: inline-block;
    padding: 5px 10px;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.badge.bg-secondary {
    background-color: #b4b6b7 !important;
    padding: 5px 10px !important;
}

.badge.bg-primary {
    background-color: #428bca !important;
}

.badge.bg-success {
    background-color: #00acac !important;
}

.badge.bg-danger {
    background-color: #ff5b57 !important;
}

.badge.bg-warning {
    background-color: #f59c1a !important;
}

.badge.bg-info {
    background-color: #49b6d6 !important;
}

.badge.bg-dark {
    background-color: #2d353c !important;
}

/* ============================================= */
/* form-text (was .help-block)                   */
/* ============================================= */
.form-text {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
}

/* ============================================= */
/* img-fluid (was .img-responsive)               */
/* ============================================= */
.img-fluid {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ============================================= */
/* visually-hidden (was .sr-only)                */
/* ============================================= */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================= */
/* btn-close (was .close)                        */
/* ============================================= */
.btn-close {
    float: right;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.btn-close:hover,
.btn-close:focus {
    color: #000;
    text-decoration: none;
    opacity: .5;
}

/* ============================================= */
/* Responsive display utilities (BS5 style)      */
/* ============================================= */
/* d-none d-sm-block (was hidden-xs) */
/* d-sm-none d-md-block (was hidden-sm) */
/* d-block d-sm-none (was visible-xs) */
/* These are handled by Bootstrap 5's utility classes natively */

/* ============================================= */
/* flex-column (was .nav-stacked)                */
/* ============================================= */
.nav.flex-column > li {
    float: none;
}

.nav.flex-column > li + li {
    margin-top: 2px;
    margin-left: 0;
}

/* ============================================= */
/* navbar-toggler (was .navbar-toggle)           */
/* ============================================= */
.navbar-toggler {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

/* ============================================= */
/* navbar-light (was .navbar-default)            */
/* ============================================= */
.navbar-light .navbar-nav > li > a {
    color: #777;
}

.navbar-light .navbar-nav > li > a:hover,
.navbar-light .navbar-nav > li > a:focus {
    color: #333;
    background-color: transparent;
}

/* ============================================= */
/* Modal Backdrop Opacity                        */
/* ============================================= */
.modal-backdrop {
    --bs-backdrop-opacity: 0.3;
}
.modal-backdrop.show {
    opacity: 0.3 !important;
}

/* ============================================= */
/* Modal dialog width (BS5 default override)     */
/* ============================================= */
/* Bootstrap 5 defaults `.modal-dialog { max-width: 500px }` (via the
 * `@media (min-width: 576px)` rule in bootstrap.css). Pre-BS5, dialogs in
 * this app rendered ~600px wide, so every modal that didn't pass an
 * explicit `modaldialogclass` (e.g. the hires "Add Forms" modal built by
 * HiresHelper::get_addform_modal()) suddenly looks ~100px narrower after
 * the BS5 upgrade. Force 600px with multiple selectors + !important so we
 * win against the BS5 media-query rule even when DataTables or other
 * stylesheets bump specificity. Mirrors apptrack/webroot/links/bs5-compat.css. */
.modal-dialog,
.modal .modal-dialog,
.modal.fade .modal-dialog,
.modal.show .modal-dialog {
    position: relative !important;
    width: auto !important;
    max-width: 600px !important;
    margin: 1.75rem auto !important;
    pointer-events: none;
    transform: none !important;
    /* Vertical centering (BS5 .modal-dialog-centered behavior) without
     * applying flex to .modal itself, which causes scroll-jump-to-top on
     * close. `min-height` keeps tall dialogs scrollable inside the modal. */
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 3.5rem) !important;
}
.modal-lg .modal-dialog,
.modal .modal-dialog.modal-lg,
.modal-dialog.modal-lg {
    max-width: 800px !important;
}
.modal-xl .modal-dialog,
.modal .modal-dialog.modal-xl,
.modal-dialog.modal-xl {
    max-width: 1140px !important;
}
.modal-sm .modal-dialog,
.modal .modal-dialog.modal-sm,
.modal-dialog.modal-sm {
    max-width: 300px !important;
}
.modal-dialog-centered {
    display: flex !important;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}
.modal-content {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    pointer-events: auto !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    /* No border on .modal-content. A 1px border combined with
     * `overflow: hidden` + border-radius causes the .modal-header's
     * colored background to be clipped to (radius - 1px), exposing a
     * 1px ring of the white .modal-content background at the rounded
     * top corners. Drop the border entirely and rely on the box-shadow
     * as the visual edge of the dialog. */
    border: 0 !important;
    border-radius: .5rem !important;
    /* Clip the colored .modal-header background to the rounded corners. */
    overflow: hidden !important;
    outline: 0 !important;
    box-shadow: 0 .25rem 1rem rgba(0,0,0,.5) !important;
}
/* With .modal-content border:0 + overflow:hidden, the parent's
 * border-radius alone clips the header/footer to the full .5rem
 * outer radius. Force header/footer corner radii to match exactly so
 * any per-account theme that hard-codes `border-radius: 0` cannot
 * reintroduce a visible square-cornered band inside the rounded clip. */
.modal-content > .modal-header {
    border-top-left-radius: .5rem !important;
    border-top-right-radius: .5rem !important;
    /* Overshoot the rounded clip by 1px on the top and sides so sub-pixel
     * rendering at the rounded corners cannot expose the white
     * .modal-content background as a faint fringe. */
    margin: -1px -1px 0 -1px !important;
    padding-top: calc(12px + 1px) !important;
}
.modal-content > .modal-footer {
    border-bottom-left-radius: .5rem !important;
    border-bottom-right-radius: .5rem !important;
    margin: 0 -1px -1px -1px !important;
    padding-bottom: calc(15px + 1px) !important;
}

/* ============================================= */
/* Modal textarea / form control overflow fix    */
/* ============================================= */
.modal-body textarea,
.modal-body .as-input,
.modal-body select {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}
.modal-body table textarea,
.modal-body table .as-input,
.modal-body table select {
    width: auto;
    max-width: 100%;
}

/* ============================================= */
/* input-group-text (BS5 replaces addon)         */
/* ============================================= */
.input-group-text {
    font-size: 12px;
    line-height: 1.5;
    background: #e2e7eb;
    border: none;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

/* ============================================= */
/* .groupby inline dropdowns (reports page)      */
/* ============================================= */
div.groupby {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}
div.groupby > div {
    flex: 1 1 0;
    padding-left: 0;
    padding-right: 0;
}

/* ============================================= */
/* btn-xs (removed in BS5)                       */
/* ============================================= */
.btn-group-xs > .btn, .btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/* ============================================= */
/* dl-horizontal (was BS3, removed in BS5)       */
/* ============================================= */
.dl-horizontal {
    display: flex;
    flex-wrap: wrap;
}
.dl-horizontal dt {
    width: 180px;
    text-align: right;
    padding-right: 15px;
    clear: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
    margin-bottom: 5px;
}
.dl-horizontal dd {
    flex: 1;
    margin-left: 0;
    margin-bottom: 5px;
    min-width: calc(100% - 180px);
}

a.accordion-toggle-styled {
    color: #fff;
}

/* ============================================= */
/* BS3 col-md-* global grid (float-based)        */
/* In BS3, col-md-* always had float:left and a  */
/* percentage width regardless of parent. BS5    */
/* requires a .row flex parent. Restore the BS3  */
/* behaviour so col-md-* works everywhere.       */
/* ============================================= */
[class*="col-md-"] {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}
.col-md-1  { width: 8.333333%; }
.col-md-2  { width: 16.666667%; }
.col-md-3  { width: 25%; }
.col-md-4  { width: 33.333333%; }
.col-md-5  { width: 41.666667%; }
.col-md-6  { width: 50%; }
.col-md-7  { width: 58.333333%; }
.col-md-8  { width: 66.666667%; }
.col-md-9  { width: 75%; }
.col-md-10 { width: 83.333333%; }
.col-md-11 { width: 91.666667%; }
.col-md-12 { width: 100%; }

/* ============================================= */
/* BS3 col-* grid compat (float → flexbox)       */
/* In BS3, col-* used float:left and worked      */
/* without a .row parent. In BS5, col-* requires */
/* a flex container parent (.row). These rules    */
/* make .panel-body col-* children float like BS3 */
/* ============================================= */
.panel-body {
    overflow: hidden;
}

/* Chosen dropdowns (.chosen-drop / .chosen-results) are absolutely
 * positioned descendants of `.chosen-container` and render BELOW the
 * select trigger. The `.panel-body { overflow: hidden }` rule above
 * (added to clear floated BS3 col-md-* children) clips that dropdown
 * at the panel's bottom border, hiding the option list (e.g. Email
 * Hire "Include Form(s)").
 *
 * Two complementary fixes (mirrors apptrack/webroot/links/bs5-compat.css):
 *   1. `:has()` selector - lets modern browsers detect a Chosen child
 *      inside any .panel-body / .modal-body and switch overflow to
 *      visible (with a clearfix so floated grid children stay
 *      contained).
 *   2. `.has-chosen` class - HTMLHelper::input_multidropdown() tags
 *      the closest panel/modal/form-group ancestor on init, giving us
 *      the same override on browsers without :has() support.
 *
 * The same clipping issue affects `.chat-include-dropdown` (the
 * "Include Form" / "Include Questionnaire" menu inside the texting
 * modal). Modern browsers match it via the `:has()` selectors below.
 * For browsers without :has() support (Firefox < 121, older enterprise
 * Chromium), a small inline script in SmsmessagingContent::texting_modal()
 * tags the same ancestors with `.has-chat-include` so the fallback
 * selectors below take effect. */
.panel-body:has(.chosen-container),
.modal-body:has(.chosen-container),
.panel-body:has(.chat-include-dropdown),
.modal-body:has(.chat-include-dropdown),
.panel-body.has-chosen,
.modal-body.has-chosen,
.panel-body.has-chat-include,
.modal-body.has-chat-include,
.form-group.has-chosen,
[class*="col-md-"].has-chosen {
    overflow: visible !important;
}
.panel-body:has(.chosen-container)::after,
.modal-body:has(.chosen-container)::after,
.panel-body:has(.chat-include-dropdown)::after,
.modal-body:has(.chat-include-dropdown)::after,
.panel-body.has-chosen::after,
.modal-body.has-chosen::after,
.panel-body.has-chat-include::after,
.modal-body.has-chat-include::after {
    content: "";
    display: table;
    clear: both;
}

/* `.modal-content { overflow: hidden }` is set further up in this file
 * to clip the colored modal-header to the dialog's rounded corners.
 * That same clipping hides dropdowns that open inside a modal — both
 * the chat-include dropdown (texting modal) and jQuery UI autocomplete
 * widgets (e.g. event time/location inputs). Switch the modal-content's
 * overflow back to `visible` whenever it contains one of these. The
 * header still gets its rounded top corners from
 * `.modal-content > .modal-header { border-top-*-radius: .5rem }` so
 * the visible overflow only affects children that need to paint outside
 * the dialog box. The `.has-*` companion classes are JS-applied
 * fallbacks for browsers without :has() support. */
.modal-content:has(.chat-include-dropdown),
.modal-content.has-chat-include,
.modal-content:has(.ui-autocomplete),
.modal-content.has-ui-autocomplete,
.modal-content:has(.chosen-container),
.modal-content.has-chosen {
    overflow: visible !important;
}

/* Ensure the jQuery UI autocomplete menu (position:absolute, appended to
 * body by default) renders above the modal stacking context. Bootstrap 5
 * places .modal at z-index 1055; use 1060 to clear it while staying
 * below any higher-priority popovers/tooltips. */
.modal .ui-autocomplete {
    z-index: 1060;
}

/* Same clipping problem occurs inside .form-group (display: flex with
 * `align-items: flex-start`) and inside any other ancestor with
 * `overflow: hidden`. Promote .chosen-drop out of the in-flow clip by
 * raising z-index; combined with the panel-body fix above this lets the
 * dropdown render over sibling content rather than being cut off.
 * (Position is already `absolute` from chosen.css.)
 *
 * NOTE: Bootstrap 5 layers modal-backdrop at z-index 1050 and .modal at
 * 1055. A global z-index of 1060 here would cause chosen dropdowns on
 * the underlying page to bleed through open modals. Keep the page-level
 * value below the modal-backdrop, and only elevate above the modal
 * stacking context when the chosen control is inside a modal. */
.chosen-container .chosen-drop {
    z-index: 1040;
}

.modal .chosen-container .chosen-drop {
    z-index: 1060;
}

.panel-body > [class*="col-md-"] {
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

.panel-footer {
    padding: 10px 15px;
}

.modal-body .panel {
    box-shadow: none;
}

.modal-body > [class*="col-md-"] {
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

/* Nested col-md-* inside col-md-* (e.g. date range from/to) */
.form-group > [class*="col-md-"]:not(.col-form-label):not(.control-label) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.form-group label.col-form-label[class*="col-md-"],
.form-group label.control-label[class*="col-md-"] {
    display: block;
    text-align: right;
}
[class*="col-md-"] > [class*="col-md-"] {
    flex: 0 0 auto;
    padding-right: 5px;
    padding-left: 5px;
    box-sizing: border-box;
}
[class*="col-md-"] > .col-md-1  { width: 8.333333%; }
[class*="col-md-"] > .col-md-2  { width: 16.666667%; }
[class*="col-md-"] > .col-md-3  { width: 25%; }
[class*="col-md-"] > .col-md-4  { width: 33.333333%; }
[class*="col-md-"] > .col-md-5  { width: 41.666667%; }
[class*="col-md-"] > .col-md-6  { width: 50%; }
[class*="col-md-"] > .col-md-7  { width: 58.333333%; }
[class*="col-md-"] > .col-md-8  { width: 66.666667%; }
[class*="col-md-"] > .col-md-9  { width: 75%; }
[class*="col-md-"] > .col-md-10 { width: 83.333333%; }
[class*="col-md-"] > .col-md-11 { width: 91.666667%; }
[class*="col-md-"] > .col-md-12 { width: 100%; }

/* ============================================= */
/* .form-group as row (BS3 compat)               */
/* In BS3, .form-group inside .form-horizontal   */
/* acted as a .row. Ensure this works in BS5.    */
/* ============================================= */
.form-group {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
}
/* Ensure .d-none beats the flex !important above. Without this rule,
 * `.form-group.d-none` stays visible because the two rules tie on
 * specificity and source order favors .form-group. JS that toggles
 * visibility via .addClass('d-none') / .removeClass('d-none')
 * (e.g., the Options/Secure rows on fields/add) would otherwise
 * appear to do nothing. */
.form-group.d-none {
    display: none !important;
}
.form-group > [class*="col-"] {
    flex: 0 0 auto;
    padding-right: 5px;
    padding-left: 5px;
    box-sizing: border-box;
}
.form-group > .col-md-1  { width: 8.333333% !important; }
.form-group > .col-md-2  { width: 16.666667% !important; }
.form-group > .col-md-3  { width: 25% !important; }
.form-group > .col-md-4  { width: 33.333333% !important; }
.form-group > .col-md-5  { width: 41.666667% !important; }
.form-group > .col-md-6  { width: 50% !important; }
.form-group > .col-md-7  { width: 58.333333% !important; }
.form-group > .col-md-8  { width: 66.666667% !important; }
.form-group > .col-md-9  { width: 75% !important; }
.form-group > .col-md-10 { width: 83.333333% !important; }
.form-group > .col-md-11 { width: 91.666667% !important; }
.form-group > .col-md-12 { width: 100% !important; }

/* ============================================= */
/* Table striped rows & border colors            */
/* Override BS5 defaults and any conflicting rules*/
/* ============================================= */
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th,
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f0f3f5 !important;
    --bs-table-striped-bg: #f0f3f5;
}
.table-striped > tbody > tr:nth-of-type(even) > td,
.table-striped > tbody > tr:nth-of-type(even) > th,
.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #fff !important;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-color: #e2e7eb !important;
}
.table {
    border-color: #e2e7eb !important;
    --bs-table-border-color: #e2e7eb;
}
.table-bordered {
    border-color: #e2e7eb !important;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
    border-color: #e2e7eb !important;
}
.dataTables_scroll {
    border-left: 1px solid #e2e7eb !important;
    border-right: 1px solid #e2e7eb !important;
    border-bottom: 1px solid #e2e7eb !important;
}
.reporttable .oddrow td {
    background-color: #f0f3f5 !important;
}

/* ============================================= */
/* .actions-lg (min-width for action columns)    */
/* ============================================= */
.actions-lg {
    min-width: 150px;
}

/* ============================================= */
/* input-group-addon (BS3 → BS5 input-group-text)*/
/* ============================================= */
.input-group-addon {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    background: #e2e7eb;
    border: none;
    display: flex;
    align-items: center;
}
.input-group-addon .input-group-text {
    font-size: 12px;
    line-height: 1.5;
    background: #e2e7eb;
    border: none;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

/* ============================================= */
/* .well (BS3, removed in BS5)                   */
/* ============================================= */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
.well-sm {
    padding: 9px;
    border-radius: 3px;
}
.well-lg {
    padding: 24px;
    border-radius: 6px;
}

/* ============================================= */
/* .radio-inline / .checkbox-inline (BS3 → BS5)  */
/* ============================================= */
.radio-inline,
.checkbox-inline {
    display: inline-flex;
    align-items: center;
    padding: 7px 0 0 0;
    margin-right: 10px;
    font-weight: normal;
    cursor: pointer;
    gap: 4px;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
    margin-left: 10px;
}

/* ============================================= */
/* .btn-group-justified (BS3, removed in BS5)    */
/* ============================================= */
.btn-group-justified {
    display: flex;
    width: 100%;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
    flex: 1;
}

/* ============================================= */
/* .page-header (BS3, removed in BS5)            */
/* ============================================= */
.page-header {
    padding-bottom: 9px;
    margin: 0 0 10px;
    border-bottom: none;
}

/* ============================================= */
/* .hidden (BS3, use .d-none in BS5)             */
/* ============================================= */
.hidden {
    display: none !important;
}

/* ============================================= */
/* .center-block (BS3, use mx-auto d-block in BS5)*/
/* ============================================= */
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================= */
/* .form-horizontal (BS3, removed in BS5)        */
/* ============================================= */
.form-horizontal .form-group {
    display: flex !important;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.form-horizontal .col-form-label {
    text-align: right;
    align-self: flex-start;
    padding-top: 7px;
}

/* ============================================= */
/* Glyphicon → Font Awesome mappings             */
/* ============================================= */
.glyphicon {
    display: inline-block;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
    font-style: normal;
    font-size: inherit;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.glyphicon-plus:before { content: "\f067"; }
.glyphicon-minus:before { content: "\f068"; }
.glyphicon-exclamation-sign:before { content: "\f06a"; }
.glyphicon-info-sign:before { content: "\f05a"; }
.glyphicon-check:before { content: "\f14a"; }
.glyphicon-unchecked:before { content: "\f0c8"; }
.glyphicon-upload:before { content: "\f093"; }
.glyphicon-ban-circle:before { content: "\f05e"; }
.glyphicon-trash:before { content: "\f1f8"; }
.glyphicon-phone:before { content: "\f095"; }
.glyphicon-ok:before { content: "\f00c"; }
.glyphicon-remove:before { content: "\f00d"; }
.glyphicon-chevron-left:before { content: "\f053"; }
.glyphicon-chevron-right:before { content: "\f054"; }
.glyphicon-chevron-up:before { content: "\f077"; }
.glyphicon-chevron-down:before { content: "\f078"; }
.glyphicon-search:before { content: "\f002"; }
.glyphicon-envelope:before { content: "\f0e0"; }
.glyphicon-star:before { content: "\f005"; }
.glyphicon-star-empty:before { content: "\f006"; }
.glyphicon-user:before { content: "\f007"; }
.glyphicon-cog:before { content: "\f013"; }
.glyphicon-lock:before { content: "\f023"; }
.glyphicon-time:before { content: "\f017"; }
.glyphicon-calendar:before { content: "\f073"; }
.glyphicon-download:before { content: "\f019"; }
.glyphicon-download-alt:before { content: "\f019"; }
.glyphicon-list:before { content: "\f03a"; }
.glyphicon-pencil:before { content: "\f303"; }
.glyphicon-file:before { content: "\f15b"; }
.glyphicon-refresh:before { content: "\f021"; }
.glyphicon-warning-sign:before { content: "\f071"; }
.glyphicon-question-sign:before { content: "\f059"; }
.glyphicon-link:before { content: "\f0c1"; }
.glyphicon-eye-open:before { content: "\f06e"; }
.glyphicon-eye-close:before { content: "\f070"; }
.glyphicon-off:before { content: "\f011"; }
.glyphicon-heart:before { content: "\f004"; }
.glyphicon-home:before { content: "\f015"; }


/* ===========================================================================
 * Header navbar dropdowns (BS3 → BS5 compat)
 *
 * BS5 default has `.dropdown-menu { position: absolute }` so the menu floats
 * over surrounding content without affecting layout height. In this app's
 * navbar the dropdown sometimes ends up participating in flow (likely due to
 * an `animated` transform on the menu creating a containing-block side-effect
 * combined with the flex-wrap navbar), which makes the header grow taller
 * when a menu opens. Force absolute positioning + right-alignment for the
 * help-navbar so menus float over the page like they did in BS3.
 * ========================================================================= */
#header .navbar-nav .dropdown-menu {
    position: absolute !important;
    top: 100%;
    z-index: 1050;
    /* animate.css `animated` adds animation-fill-mode:both, which can leave
       a transform applied. Reset to avoid creating a stacking/containing
       block side effect on close. */
    will-change: auto;
}

/* Right-align the help-navbar dropdowns so they don't run off-screen */
#help-navbar .dropdown-menu {
    right: 0;
    left: auto;
}

/* Widen the support dropdown (and any other .bg-orange-scoped header
   dropdown) and pin it to the right so it doesn't run off-screen. The
   support menu lives around line 56 of Page.php as a `<li class="bg-orange dropdown">`.
   Previously this widened EVERY .dropdown-menu in the app, which clobbered
   intentionally narrow context menus. Scope strictly to .bg-orange. */
.bg-orange .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    min-width: 220px !important;
}

/* Suppress Bootstrap 5's auto-generated dropdown arrow (::after) ONLY for
   header dropdowns that intentionally render their own icon (or no caret).
   - .navbar-user: user avatar dropdown (no caret in markup, line ~33 of Page.php)
   - .bg-orange:  support dropdown (uses fa-circle-question icon)
   Avoid the broader `.navbar-nav` scope so other navbar-nav dropdowns can
   still show the BS5 caret if they want one. */
.navbar-user .dropdown-toggle::after,
.bg-orange .dropdown-toggle::after {
    display: none !important;
}

.navbar-user a {
    color:#000 !important;
}

/* Style support-menu dropdown items: black text, comfortable padding.
   Previously this was an unscoped `.dropdown-menu a` rule that overrode
   contextual link colors (text-danger / text-warning action items) across
   the entire app. Keep it scoped to .bg-orange. */
.bg-orange .dropdown-menu a {
    padding: 5px !important;
    color: #000 !important;
}

.bg-orange .dropdown-menu a:hover,
.bg-orange .dropdown-menu a:focus {
    color: #000 !important;
}

/* Add vertical spacing between dropdown menu items in the support menu. */
.bg-orange .dropdown-menu li {
    margin-bottom: 8px;
}

.bg-orange .dropdown-menu li:last-child {
    margin-bottom: 0;
}

/* =========================================================================
 * Fixed-top header
 * -------------------------------------------------------------------------
 * In app_main.htm the load order is:
 *   1) Bootstrap 5 CDN (defines `.navbar { position: relative }` and
 *      `.fixed-top { position: fixed }`)
 *   2) bootstrap/all/css/navbar-navs.css (re-declares
 *      `.navbar { position: relative }` AFTER BS5)
 * Because `.navbar` and `.fixed-top` have equal (single-class) specificity,
 * the later `.navbar` rule wins and clobbers `position: fixed`, so the
 * header scrolls with the page. Re-assert fixed positioning with a higher-
 * specificity selector so it always wins, regardless of load order.
 * ========================================================================= */
#header.fixed-top,
#header.header.fixed-top,
#header.header.navbar.fixed-top {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 1030 !important;
    width: 100% !important;
    margin: 0 !important;
}
/* Ensure no ancestor creates a containing block for the fixed header */
#page-container,
body.pace-done {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    will-change: auto !important;
}

/* =========================================================================
 * Form-builder field info popup close button
 * -------------------------------------------------------------------------
 * The popup uses `<button class="close" id="forminfo-close">` (BS3 markup).
 * BS5 dropped `.close` (it's `.btn-close` now), so without these rules the
 * browser renders a default button with background/border. Style it as a
 * borderless light-gray "X" pinned to the top-right of the popup box.
 * ========================================================================= */
.forminfo #forminfo-close {
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: #b0b0b0;
    font-size: 18px;
    line-height: 1;
    font-weight: bold;
    cursor: pointer;
    opacity: 1;
}
.forminfo #forminfo-close:hover,
.forminfo #forminfo-close:focus {
    color: #707070;
    background: none;
    border: 0;
    outline: none;
    box-shadow: none;
}

/* =========================================================================
 * Form select fields
 * -------------------------------------------------------------------------
 * 12px text, square corners, vertically centered to align with adjacent
 * labels/inputs in horizontal forms. Width sizes to the longest option
 * plus enough right padding to clear the BS5 chevron background-image.
 * ========================================================================= */
select,
select.form-control,
select.form-select,
select.as-input {
    font-size: 12px;
    border-radius: 0;
    vertical-align: middle;
    border: 1px solid #ccc;
    color: #444;
    /* Auto width so the box grows to fit the longest <option> text. */
    width: auto;
    /* Reserve ~18px on the right for the BS5 chevron so it never overlaps
     * the selected option text. Left padding stays tight (4px) so the text
     * still sits flush-left like the old BS3 look. */
    padding: 2px 22px 2px 4px !important;
}
/* The BS5 .form-select chevron is a background-image. Pin it to the right
 * edge so it sits inside the padding we reserved above (matches our 22px
 * right padding minus a 4px gap from the edge). */
select.form-select {
    background-position: right 4px center;
    background-size: 12px 9px;
}

/* =========================================================================
 * Email/Message library: "Message:" row layout
 * -------------------------------------------------------------------------
 * The page sits inside `#content { max-width: 1000px }` (content8.css), so
 * the col-md-10 inside the "Message:" form-row is naturally capped at
 * ~800px wide and the rich-text editor cannot grow past it. We want the
 * editor column to extend horizontally to within ~10px of the viewport's
 * right edge while:
 *   - the LEFT position of col-md-10 stays exactly where it is,
 *   - the inner Subject/Delay rows + their fieldinfo do NOT widen, and
 *   - the CKEditor visually widens with the column.
 *
 * Geometry (viewport ≥ 1000px, derived from #content=1000px max-width):
 *   col-md-10 left  ≈ 50vw - 310px (from viewport left)
 *   desired right   = 100vw - 10px
 *   desired width   = (100vw - 10px) - (50vw - 310px) ≈ 50vw + 300px
 *
 * To make the column actually grow (a negative margin would only shift it,
 * not give children more room), we override flex-basis + width directly.
 * The form-group is `display:flex; flex-wrap:wrap`, so a wider basis simply
 * lets the flex item overflow `#content` on the right (which has `overflow:
 * visible` by default).
 * ========================================================================= */
/* Earlier rules in this file declare
 *   .form-group                       { flex-wrap: wrap }     // ~line 390
 *   .form-horizontal .form-group      { flex-wrap: wrap }     // ~line 588
 *   .form-group > .col-md-10          { width: 83.333333% !important }
 * Both `!important` width and the wrap behavior beat plain overrides, so
 * we must (a) force `nowrap` here so the label and col-md-10 stay on the
 * same row when col-md-10 overflows the form-group, and (b) use
 * `!important` on flex/width/max-width to defeat the cascaded width rule.
 * The col-md-2 "Message:" label keeps its 16.67% width and original left
 * position; col-md-10 simply overflows the form-group on the right and
 * extends past `#content` (which has `overflow: visible`). */
.form-group.message-row {
    flex-wrap: nowrap !important;
    margin-top: 10px;
}
.form-group.message-row > .col-md-10 {
    /* Earlier rule (`.form-group > [class*="col-md-"]:not(.col-form-label)
     * { display: flex }`) makes col-md-10 a flex CONTAINER, which causes
     * the inner .panel to shrink-wrap to its content instead of filling
     * the wider column. Force normal block layout so the panel fills. */
    display: block !important;
    flex: 0 0 calc(50vw + 280px) !important;
    width: calc(50vw + 280px) !important;
    max-width: none !important;
    padding-right: 0;
}
/* Below ~1024px the viewport is narrower than #content's natural width,
   so the calc would overflow. Fall back to default col-md-10 sizing. */
@media (max-width: 1024px) {
    .form-group.message-row {
        flex-wrap: wrap !important;
    }
    .form-group.message-row > .col-md-10 {
        flex: 0 0 83.333333% !important;
        width: 83.333333% !important;
        padding-right: 5px;
    }
}
/* Keep the Subject and Delay rows inside the widened col-md-10 at their
   original visual width so their inputs and "fieldinfo" hint placement
   do not change — only the rich-text editor and merge-codes table widen. */
.form-group.message-row > .col-md-10 .tab-pane > .form-group {
    max-width: 760px;
}
/* Constrain the Subject text input and Delay select to 280px and put
   their "fieldinfo" hint back on the same line (BS5 .form-text is
   display:block by default, which dropped the hint to a new line once
   the inputs grew). The inputs ship with `w-100` (width:100%) baked into
   their class, so width must be !important. */
.form-group.message-row .tab-pane > .form-group input.as-input,
.form-group.message-row .tab-pane > .form-group select {
    width: 280px !important;
    max-width: 280px !important;
    display: inline-block;
    vertical-align: middle;
}
.form-group.message-row .tab-pane > .form-group .fieldinfo,
.form-group.message-row .tab-pane > .form-group .form-text {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 10px;
    vertical-align: middle;
}

/* Underline-on-hover for the "Click here to learn more" link in the
 * SMS-promo row (LibraryContent.php line ~1207). The link has the
 * id `info_enable_premium_texting`; scope the rule to that id so it
 * doesn't bleed into other links. */
a#info_enable_premium_texting:hover,
a#info_enable_premium_texting:focus {
    text-decoration: underline;
}
/* CKEditor v4 sets pixel widths inline (via JS) on the outer chrome span
 * AND on its inner layout spans (.cke_inner, .cke_top, .cke_contents,
 * .cke_bottom) AND on the editing iframe. Forcing only `.cke`/`.cke_chrome`
 * leaves the inner spans + iframe at their initial pixel width, so the
 * visible editor stays narrow even though the outer chrome is 100%.
 * Override every layer with !important so the editor visually fills its container. */
.cke,
.cke_chrome,
.cke_inner,
.cke_top,
.cke_contents,
.cke_bottom,
.cke_wysiwyg_frame,
.cke_wysiwyg_div,
iframe.cke_wysiwyg_frame {
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box;
}

/* Scoped override for message-row (kept for backwards compatibility) */
.form-group.message-row .cke,
.form-group.message-row .cke_chrome,
.form-group.message-row .cke_inner,
.form-group.message-row .cke_top,
.form-group.message-row .cke_contents,
.form-group.message-row .cke_bottom,
.form-group.message-row .cke_wysiwyg_frame,
.form-group.message-row .cke_wysiwyg_div,
.form-group.message-row iframe.cke_wysiwyg_frame {
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box;
}

/* CRITICAL: this file sets `.panel-body { overflow: hidden }` globally
 * (~line 358), which clips anything that tries to extend past the
 * panel-body's right edge — including our widened col-md-10. The same
 * applies to the inner panel-with-tabs's panel-body and tab-content.
 * Use :has() to surgically opt those ancestors out of the clip without
 * affecting other panels on the page. */
.panel-body:has(> .form-group.message-row),
.panel:has(.form-group.message-row),
.panel:has(.form-group.message-row) > .panel-body,
.form-group.message-row .panel-with-tabs,
.form-group.message-row .panel-with-tabs > .panel-body,
.form-group.message-row .tab-content,
.form-group.message-row .tab-pane {
    overflow: visible !important;
}

/* ============================================= */
/* Stage-change dropdown (HiredetailContent,     */
/* WorkflowHelper). Scoped via the               */
/* .stage-change-group wrapper class so these    */
/* rules don't bleed into every .btn-danger or   */
/* .dropdown-menu on the page.                   */
/* ============================================= */
.stage-change-group a[id^="stage_dialog_"] {
    display: block !important;
    width: 100% !important;
    padding: 5px 15px !important;
    color: #333 !important;
    text-decoration: none !important;
    white-space: nowrap;
    box-sizing: border-box;
}
/* Match the legacy inline `style="display:block;width:100%"` previously
 * applied to each <li> wrapper in the stage-change dropdown so the menu
 * items keep filling the dropdown's full width after the inline styles
 * were removed from HiredetailContent / WorkflowHelper. */
.stage-change-group .dropdown-menu > li {
    display: block;
    width: 100%;
}
.stage-change-group a[id^="stage_dialog_"]:hover,
.stage-change-group a[id^="stage_dialog_"]:focus {
    color: #333 !important;
    background-color: #edf0f5 !important;
    text-decoration: none !important;
}
.stage-change-group .dropdown-menu {
    padding: 5px 0 !important;
}
/* Align the dropdown under the green (Set Stage) button — left edge of
   the menu matches the left edge of the btn-group.

   We let Bootstrap 5's Popper.js drive the actual positioning so the menu
   can flip above the toggle when there isn't enough viewport space below
   (e.g. near the bottom of a long hires list). Popper's default
   `bottom-start` placement for a btn-group dropdown already aligns the
   menu's left edge to the toggle's left edge, so we only need to set
   the small visual margin and ensure the menu wins on horizontal
   alignment when source-order CSS would otherwise float it right. */
.stage-change-group.btn-group > .dropdown-menu,
.stage-change-group .btn-group > .dropdown-menu {
    margin: 2px 0 0 0 !important;
}
/* When Popper has NOT yet positioned the menu (data-bs-popper="static",
   e.g. on initial click before Popper attaches, or in a no-Popper
   environment), pin to the bottom-left of the btn-group so the menu
   doesn't render right-aligned by BS5's default. */
.stage-change-group.btn-group > .dropdown-menu[data-bs-popper="static"],
.stage-change-group .btn-group > .dropdown-menu[data-bs-popper="static"] {
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    bottom: auto !important;
}
/* Scoped knockout/danger button sizing — matches .btn-xs. Applies to
   .btn-danger inside the wrapper or to a knockout button that carries
   the .stage-change-group class itself. */
.stage-change-group .btn-danger,
.stage-change-group.btn-danger {
    padding: 1px 5px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    border-radius: 3px !important;
}
/* BS5's `.dropdown-toggle` class auto-injects an `::after` CSS triangle.
   We already render an explicit `<i class="fa fa-caret-down">` glyph
   inside the toggle button, so suppress the BS5 caret to avoid showing
   two arrows side-by-side on the green Set Stage button. */
.stage-change-group .dropdown-toggle::after {
    display: none !important;
}

/* ============================================= */
/* .message-row-extended (wider panel for CKEditor) */
/* ============================================= */
/* Extends the content area to near the right edge. Instead of constraining
   to col-md-10's normal 83.333%, make it expand to fill all available space
   in the flex container after the col-md-2 label. Use flex-grow to absorb
   remaining space, and constrain only the label to its natural width. */
.form-group.message-row-extended {
    flex-wrap: nowrap !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* The col-md-2 label keeps its normal width */
.form-group.message-row-extended > .col-md-2 {
    flex: 0 0 16.666667% !important;
    width: 16.666667% !important;
    max-width: 16.666667% !important;
}

/* The col-md-10 content area expands to fill remaining space */
.form-group.message-row-extended > .col-md-10 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-right: 10px !important;
    padding-right: 5px !important;
    box-sizing: border-box;
    display: block !important;
    min-width: 0;
}

/* Ensure the panel inside takes full width of the expanded col-md-10 */
.form-group.message-row-extended > .col-md-10 > .panel,
.form-group.message-row-extended > .col-md-10 > .panel-with-tabs {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Tab content and panes should also fill the panel */
.form-group.message-row-extended .tab-content,
.form-group.message-row-extended .tab-pane {
    width: 100% !important;
}

/* Ensure CKEditor in extended message row fills the panel */
.form-group.message-row-extended .cke,
.form-group.message-row-extended .cke_chrome,
.form-group.message-row-extended .cke_inner,
.form-group.message-row-extended .cke_top,
.form-group.message-row-extended .cke_contents,
.form-group.message-row-extended .cke_bottom,
.form-group.message-row-extended .cke_wysiwyg_frame,
.form-group.message-row-extended .cke_wysiwyg_div,
.form-group.message-row-extended iframe.cke_wysiwyg_frame {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

/* ============================================= */
/* Checkbox alignment with text in form groups   */
/* ============================================= */
/* Checkboxes and labels need to align vertically with the form label.
   Shift the entire span containing the checkbox and text down 5px.

   Primary selector: `.checkbox-wrap` is the class added by
   HTMLHelper::input_checkbox() (see prog/classes/HTMLHelper.php). Targeting
   the class is robust against inline-style formatting changes.

   Fallback selector: the legacy attribute selector matches checkbox spans
   that may not yet have the class (e.g. `input_radio()` uses the same
   inline style and a few hand-rolled spans elsewhere in the codebase).
   It is fragile — any other span with `white-space: nowrap` inside a
   .form-group > div gets shifted by 5px too. Migrate those callers to a
   shared class and the attribute selector can be removed. */
.form-group > div > span.checkbox-wrap,
.form-group > div > span[style*="white-space: nowrap"] {
    position: relative;
    top: 5px;
}

.form-group input[type="checkbox"],
input[type="checkbox"].inputcheck {
    vertical-align: middle;
}

/* ============================================= */
/* ReportsContent page panel spacing             */
/* ============================================= */
/* The form on the Reports edit/create page renders 4 panels with class
   .reports-panel inside <form class="form-horizontal">. The
   .form-horizontal parent in style.css is a flex container with
   `gap: 15px`. The `gap` property creates spacing between flex children
   independently of any margin on the children — negative margins on
   the children CANNOT counter it. The only fix is to override `gap`
   on the parent form itself.

   Desired spec: 4px top margin, 0 bottom margin on each report panel. */

/* 1) Kill the flex gap on the parent form when it contains report panels.
      Uses :has() (Chrome 105+ / Safari 15.4+ / Firefox 121+, all current). */
form.form-horizontal:has(.panel.reports-panel) {
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
}

/* 2) Fallback for older browsers (no :has()): scope strictly to the
      Reports edit/create form via the `reports-form` class added in
      ReportsContent::edit() (around lines 429 / 1111). Other forms with
      id="mainform" are no longer affected. */
form.reports-form.form-horizontal,
#mainform.form-horizontal.reports-form {
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
}

/* 3) Apply the actual desired margins to every report panel. */
.panel.reports-panel,
body .panel.reports-panel,
#mainform .panel.reports-panel,
.form-horizontal > .panel.reports-panel {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

/* 4) The first report panel has no panel above it, so no top margin. */
.panel.reports-panel:first-of-type,
#mainform > .panel.reports-panel:first-of-type,
.form-horizontal > .panel.reports-panel:first-of-type {
    margin-top: 0 !important;
}

/* 5) Inner accordion panels inside the Fields list (.rfields-group) inherit
      `margin-bottom: 20px` from the global .panel rule, which creates a
      large gap between each field-category accordion. They already get
      `margin-top: 4px` inline (except the first); kill the bottom margin
      so the only spacing between them is that intentional 4px. */
.rfields-group .panel,
.rfields-group .panel.panel-default {
    margin-bottom: 0 !important;
}

/* Lighter checkbox labels for specific Users page checkboxes
   (Form/Questionnaire Notification, Products). */
.checkbox-label-light .checkbox label {
    font-weight: 300;
}

/* ============================================= */
/* Email reply form: widen timeline-content      */
/* and the CKEditor inside it.                   */
/* See onbtrack/prog/classes/EmailContent.php    */
/* (the <li class="email-reply-form"> wrapping   */
/* the reply form ~line 640 / 660).              */
/* ============================================= */

/* The reply <li> wraps a <form class="form-horizontal"> (EmailContent.php
 * ~line 642). style.css line 1035 makes .form-horizontal a flex container
 * (display:flex; flex-wrap:wrap; gap:15px), and that's what makes the
 * reply bubble behave differently from the read-only conversation
 * bubbles above it. The read-only bubbles' .timeline-body sits directly
 * inside <li> with normal block layout, so the base 25%/15% margins on
 * .timeline-body produce a 60%-of-timeline bubble.
 *
 * Take THIS form out of flex layout so its .timeline-body becomes a
 * normal block child like the read-only bubbles. The form's own children
 * (hidden inputs, .timeline-time, .timeline-body) don't need flex layout
 * — there's nothing for flex to align here. */
.timeline > li.email-reply-form > form.form-horizontal,
.timeline > li.email-reply-form form.form-horizontal {
    display: block !important;
    gap: 0 !important;
}
.timeline > li.email-reply-form .timeline-content {
    width: 100%;
}
/* CKEditor 4 chrome occasionally renders narrower than its 100% width arg
 * when its parent has just changed width. Force every layer of its chrome
 * (the file already has a global rule for this, but explicit scoping
 * shields against future cascade changes). */
.timeline > li.email-reply-form .timeline-content .cke,
.timeline > li.email-reply-form .timeline-content .cke_chrome,
.timeline > li.email-reply-form .timeline-content .cke_inner,
.timeline > li.email-reply-form .timeline-content .cke_top,
.timeline > li.email-reply-form .timeline-content .cke_contents,
.timeline > li.email-reply-form .timeline-content .cke_bottom,
.timeline > li.email-reply-form .timeline-content iframe.cke_wysiwyg_frame {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}