/*
 * bootstrap5-compat.css
 * Restores the Bootstrap 3.4.1 / Bootswatch Cosmo "look" after the BS5 migration,
 * so the migrated pages match the previous production appearance.
 * Load this AFTER bootstrap.cosmo.min.css so it overrides the BS5 defaults.
 *
 * Values below were measured against the live BS3 site (login.skyops.com) vs the
 * BS5 build, and target the three differences that come from BS5's new defaults:
 *   1. base font size   16px (BS5)  ->  15px (BS3)
 *   2. large buttons     8px/16px   ->  18px/30px (chunky Cosmo-3 buttons)
 *   3. input-group icon  #f8f9fa    ->  #e6e6e6 (visible gray addon)
 */

/* 1. Overall scale: make 1rem = 15px so BS5's rem-based sizing matches BS3. */
html {
    font-size: 93.75%; /* 15 / 16 */
}

/* 2. Buttons: see the full synced button section (rule #10) near the bottom of this file. */

/* 3. Restore the gray input-group icon boxes (the fa-user / fa-lock addons).
      BS5's input-group-text padding is also smaller than BS3's — restore 10px 18px. */
.input-group-text {
    background-color: #e6e6e6;
    color: #333;
    padding: 10px 18px;
}

/* 3b. .form-control copied from the production BS3 style_cosmo.min.css so inputs match
   exactly: chunkier padding, #ccc border, inset shadow, blue-glow focus, #999 placeholder,
   #e6e6e6 disabled. (BS5's are padding ~6/11, #dee2e6 border, no shadow, ring focus.) */
.form-control {
    display: block;
    width: 100%;
    height: 43px;
    padding: 10px 18px;
    font-size: 15px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 0;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / .075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
/* Bootstrap 5 introduced a native focus ring, defaulting to Cosmo's blue
   (`--bs-focus-ring-color: rgba(39, 128, 227, .25)` on :root). `.form-control`
   overrides the whole box-shadow below so it is unaffected, but every OTHER
   focusable control - buttons, checkboxes, links, .form-check-input - picks the
   ring up on :focus-visible and would flash blue. Point it at the brand orange.

   Declared on :root to match Bootstrap's own specificity; this file loads after
   bootstrap.cosmo.min.css, so it wins on order. The opacity is left as the
   Bootstrap variable so it stays consistent if that is ever changed. */
:root {
    --bs-focus-ring-color: rgba(255, 138, 0, var(--bs-focus-ring-opacity));
}

/* SKYOPS brand orange, not Bootstrap's default blue focus. The main app drives
   this from its theme layer (--formcontrolfocus: #FF8A00); this project has no
   theme layer, so the value is stated directly. */
.form-control:focus {
    border-color: #FF8A00;
    outline: 0;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / .075), 0 0 8px rgb(255 138 0 / .6);
}
.form-control::placeholder { color: #999; opacity: 1; }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: #e6e6e6; opacity: 1; }
.form-control[disabled], fieldset[disabled] .form-control { cursor: not-allowed; }
textarea.form-control { height: auto; }

/* 3c. Restore the native dropdown arrow on <select class="form-control">. BS5 forces
   appearance:none but adds no replacement chevron, so it looked like a plain text box;
   BS3/production keeps the native menulist appearance. */
select.form-control {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

/* 4. Restore BS3's bold field labels with bottom spacing (BS5 reboot strips this). */
label {
    font-weight: 700;
    margin-bottom: 5px;
}

/*
 * 5. Restore Bootstrap 3's .container breakpoints/widths.
 * BS5 shifted these (fixed 540px from 576px up), which stops the card from
 * stretching on tablets the way the BS3 site does. BS3 is fluid below 768px,
 * then 750 / 970 / 1170. Pair with col-lg-8/offset-lg-2 in the markup so the
 * card only splits to 8 columns at >=992px, matching BS3's col-md-8.
 */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container { max-width: 100%; } /* BS3 stays fluid below 768px */
}
@media (min-width: 768px) {
    .container { max-width: 750px; }
}
@media (min-width: 992px) {
    .container { max-width: 970px; }
}
@media (min-width: 1200px) {
    .container { max-width: 1170px; }
}

/*
 * 6. Re-create Bootstrap 3 classes that BS5 removed entirely.
 * These pages keep the original BS3 markup (.form-group, .well, .checkbox,
 * .text-justify); BS5 dropped the classes, so the spacing/box styling vanished.
 * Values measured against the live BS3 site.
 */
.form-group {
    margin-bottom: 15px;
}

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

.checkbox {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Vertically center the custom checkbox box with its label text (BS5 leaves them
   baseline-aligned, so the text sat ~5px below the box). */
.checkbox input[type="checkbox"],
.checkbox label[for] {
    vertical-align: text-top;
}

.text-justify {
    text-align: justify;
}

/* BS3 <hr> was a solid light-gray rule with 21px vertical margin; BS5's is a faint
   currentColor line at 25% opacity. */
hr {
    margin-top: 21px;
    margin-bottom: 21px;
    border: 0;
    border-top: 1px solid #e6e6e6;
    opacity: 1;
}

/*
 * 7. Alert classes copied verbatim from the production BS3 style_cosmo.min.css.
 * BS5 restyled .alert-* to soft tinted boxes AND made .alert-* set only CSS variables
 * that the .alert base consumes — so the ASP.NET validators (CssClass="alert-danger"
 * WITHOUT .alert) rendered with no color. These rules set color/background directly,
 * fixing the validators and restoring the bright Cosmo-3 dialogs.
 */
.alert { padding: 15px; margin-bottom: 21px; border: none; border-radius: 0; }
.alert h4 { margin-top: 0; color: inherit; }
.alert > p, .alert > ul { margin-bottom: 0; }
.alert > p + p { margin-top: 5px; }
.alert-dismissable, .alert-dismissible { padding-right: 35px; }
.alert-dismissable .close, .alert-dismissible .close { position: relative; top: -2px; right: -21px; color: inherit; }
.alert-success { background-color: #3fb618; border-color: #4e9f15; color: #fff; }
.alert-success hr { border-top-color: #438912; }
.alert-info { background-color: #9954bb; border-color: #7643a8; color: #fff; }
.alert-info hr { border-top-color: #693c96; }
.alert-warning { background-color: #ff7518; border-color: #ff4309; color: #fff; }
.alert-warning hr { border-top-color: #ee3800; }
.alert-danger { background-color: #ff0039; border-color: #f0005e; color: #fff; }
.alert-danger hr { border-top-color: #d60054; }
.alert .alert-link { text-decoration: underline; color: #fff; font-weight: 700; }

/*
 * 8. Headings copied from the production BS3 style_cosmo.min.css. BS5 restyled headings
 * (heavier weight, different sizes, no top margin); Cosmo-3 uses light (300) headings.
 * Sizes are absolute px so the html 93.75% scale does not shrink them further.
 */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
    font-weight: 300;
    line-height: 1.1;
    color: inherit;
}
h1, .h1, h2, .h2, h3, .h3 { margin-top: 21px; margin-bottom: 10.5px; }
h4, .h4, h5, .h5, h6, .h6 { margin-top: 10.5px; margin-bottom: 10.5px; }
h1, .h1 { font-size: 39px; }
h2, .h2 { font-size: 32px; }
h3, .h3 { font-size: 26px; }
h4, .h4 { font-size: 19px; }
h5, .h5 { font-size: 15px; }
h6, .h6 { font-size: 13px; }
.modal-title { margin: 0; } /* BS3 reset so the heading rules don't push modal headers down */

/* 9. redirect.aspx progress bar: BS3 had a medium-gray (#ccc) track with a 21px bottom
   margin; BS5's track is near-white and flush against the text below. */
.progress {
    background-color: #ccc;
    margin-bottom: 21px;
}

/*
 * 10. BUTTONS — synced with the production BS3 style_cosmo.min.css.
 * Covers the base .btn, the sizes, .btn-block, .btn-link and every color variant with
 * their hover/focus/active/disabled states. Notable Cosmo-3 differences from BS5:
 *   - square corners, transparent border, padding 10px 18px, font-size 15px
 *   - .btn-default is DARK #222 (BS5's .btn-secondary is gray — do not map to it)
 *   - .btn-info is purple #9954bb, .btn-warning #ff7518, .btn-danger #ff0039
 *   - every .btn goes white-text on hover/focus
 */

/* Base */
.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 10px 18px;
    font-size: 15px;
    line-height: 1.42857143;
    border-radius: 0;
    user-select: none;
}
.btn:focus, .btn:active:focus, .btn.active:focus,
.btn.focus, .btn:active.focus, .btn.active.focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
.btn:hover, .btn:focus, .btn.focus { color: #fff; text-decoration: none; }
.btn:active, .btn.active { outline: 0; background-image: none; box-shadow: inset 0 3px 5px rgb(0 0 0 / .125); }
.btn.disabled, .btn[disabled], fieldset[disabled] .btn { cursor: not-allowed; opacity: .65; box-shadow: none; }
a.btn.disabled, fieldset[disabled] a.btn { pointer-events: none; }

/* Sizes */
.btn-lg, .btn-group-lg > .btn { padding: 18px 30px; font-size: 19px; line-height: 1.3333333; border-radius: 0; }
.btn-sm, .btn-group-sm > .btn { padding: 5px 10px; font-size: 13px; line-height: 1.5; border-radius: 0; }
.btn-xs, .btn-group-xs > .btn { padding: 1px 5px; font-size: 13px; line-height: 1.5; border-radius: 0; }

/* Block (BS5 removed .btn-block; kept here so BS3 markup still works — `w-100` also fine) */
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: 5px; }
input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block { width: 100%; }

/* Link */
.btn-link { color: #2780e3; font-weight: 400; border-radius: 0; }
.btn-link, .btn-link:active, .btn-link.active, .btn-link[disabled], fieldset[disabled] .btn-link { background-color: transparent; box-shadow: none; }
.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { border-color: transparent; }
.btn-link:hover, .btn-link:focus { color: #165ba8; text-decoration: underline; background-color: transparent; }
.btn-link[disabled]:hover, fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus, fieldset[disabled] .btn-link:focus { color: #999; text-decoration: none; }

/* Default — dark */
.btn-default { color: #fff; background-color: #222; border-color: #222; }
.btn-default:focus, .btn-default.focus { color: #fff; background-color: #090909; border-color: #000; }
.btn-default:hover { color: #fff; background-color: #090909; border-color: #040404; }
.btn-default:active, .btn-default.active { color: #fff; background-color: #090909; border-color: #040404; background-image: none; }
.btn-default:active:hover, .btn-default.active:hover,
.btn-default:active:focus, .btn-default.active:focus { color: #fff; background-color: #000; border-color: #000; }
.btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus { background-color: #222; border-color: #222; }
.btn-default .badge { color: #222; background-color: #fff; }

/* Primary — blue */
.btn-primary { color: #fff; background-color: #2780e3; border-color: #2780e3; }
.btn-primary:focus, .btn-primary.focus { color: #fff; background-color: #1967be; border-color: #10427b; }
.btn-primary:hover { color: #fff; background-color: #1967be; border-color: #1862b5; }
.btn-primary:active, .btn-primary.active { color: #fff; background-color: #1967be; border-color: #1862b5; background-image: none; }
.btn-primary:active:hover, .btn-primary.active:hover,
.btn-primary:active:focus, .btn-primary.active:focus { color: #fff; background-color: #15569f; border-color: #10427b; }
.btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus { background-color: #2780e3; border-color: #2780e3; }
.btn-primary .badge { color: #2780e3; background-color: #fff; }

/* Success — green */
.btn-success { color: #fff; background-color: #3fb618; border-color: #3fb618; }
.btn-success:focus, .btn-success.focus { color: #fff; background-color: #2f8912; border-color: #184509; }
.btn-success:hover { color: #fff; background-color: #2f8912; border-color: #2c8011; }
.btn-success:active, .btn-success.active { color: #fff; background-color: #2f8912; border-color: #2c8011; background-image: none; }
.btn-success:active:hover, .btn-success.active:hover,
.btn-success:active:focus, .btn-success.active:focus { color: #fff; background-color: #24690e; border-color: #184509; }
.btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus { background-color: #3fb618; border-color: #3fb618; }
.btn-success .badge { color: #3fb618; background-color: #fff; }

/* Info — purple */
.btn-info { color: #fff; background-color: #9954bb; border-color: #9954bb; }
.btn-info:focus, .btn-info.focus { color: #fff; background-color: #7e3f9d; border-color: #522967; }
.btn-info:hover { color: #fff; background-color: #7e3f9d; border-color: #783c96; }
.btn-info:active, .btn-info.active { color: #fff; background-color: #7e3f9d; border-color: #783c96; background-image: none; }
.btn-info:active:hover, .btn-info.active:hover,
.btn-info:active:focus, .btn-info.active:focus { color: #fff; background-color: #6a3484; border-color: #522967; }
.btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus { background-color: #9954bb; border-color: #9954bb; }
.btn-info .badge { color: #9954bb; background-color: #fff; }

/* Warning — orange */
.btn-warning { color: #fff; background-color: #ff7518; border-color: #ff7518; }
.btn-warning:focus, .btn-warning.focus { color: #fff; background-color: #e45c00; border-color: #983d00; }
.btn-warning:hover { color: #fff; background-color: #e45c00; border-color: #da5800; }
.btn-warning:active, .btn-warning.active { color: #fff; background-color: #e45c00; border-color: #da5800; background-image: none; }
.btn-warning:active:hover, .btn-warning.active:hover,
.btn-warning:active:focus, .btn-warning.active:focus { color: #fff; background-color: #c04d00; border-color: #983d00; }
.btn-warning.disabled:hover, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus, .btn-warning[disabled]:focus, fieldset[disabled] .btn-warning:focus { background-color: #ff7518; border-color: #ff7518; }
.btn-warning .badge { color: #ff7518; background-color: #fff; }

/* Danger — red */
.btn-danger { color: #fff; background-color: #ff0039; border-color: #ff0039; }
.btn-danger:focus, .btn-danger.focus { color: #fff; background-color: #cc002e; border-color: #80001c; }
.btn-danger:hover { color: #fff; background-color: #cc002e; border-color: #c2002b; }
.btn-danger:active, .btn-danger.active { color: #fff; background-color: #cc002e; border-color: #c2002b; background-image: none; }
.btn-danger:active:hover, .btn-danger.active:hover,
.btn-danger:active:focus, .btn-danger.active:focus { color: #fff; background-color: #a80026; border-color: #80001c; }
.btn-danger.disabled:hover, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus, .btn-danger[disabled]:focus, fieldset[disabled] .btn-danger:focus { background-color: #ff0039; border-color: #ff0039; }
.btn-danger .badge { color: #ff0039; background-color: #fff; }

/*
 * Disabled buttons keep their variant color and are just dimmed (BS3: opacity .65).
 * Needed explicitly because BS5's `.btn:disabled` rule has specificity (0,2,0) and would
 * otherwise beat the variant classes (0,1,0) and blank the background to transparent —
 * which is what happened to the disabled "Resend by E-Mail/SMS" countdown buttons.
 */
.btn:disabled, .btn.disabled, fieldset:disabled .btn { opacity: .65; box-shadow: none; }
.btn-default:disabled, .btn-default.disabled { color: #fff; background-color: #222; border-color: #222; }
.btn-primary:disabled, .btn-primary.disabled { color: #fff; background-color: #2780e3; border-color: #2780e3; }
.btn-success:disabled, .btn-success.disabled { color: #fff; background-color: #3fb618; border-color: #3fb618; }
.btn-info:disabled, .btn-info.disabled { color: #fff; background-color: #9954bb; border-color: #9954bb; }
.btn-warning:disabled, .btn-warning.disabled { color: #fff; background-color: #ff7518; border-color: #ff7518; }
.btn-danger:disabled, .btn-danger.disabled { color: #fff; background-color: #ff0039; border-color: #ff0039; }

/* Modal footer button spacing (BS5 uses gap/margins on .modal-footer > *) */
.modal-footer .btn + .btn { margin-left: 5px; margin-bottom: 0; }
.modal-footer .btn-group .btn + .btn { margin-left: -1px; }
.modal-footer .btn-block + .btn-block { margin-left: 0; }

/*
 * 11. Modals synced with the production BS3 style_cosmo.min.css.
 * Sizing: dialog is full-width below 768px and 600px centered above (BS5 caps it at
 * 500px from 576px up, making modals look narrow).
 * Chrome: BS5 dropped the drop-shadow and uses smaller padding / lighter dividers.
 */
.modal-dialog { max-width: none; margin: 10px; }

.modal-content {
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: 0 3px 9px rgb(0 0 0 / .5);
}

.modal-header { padding: 15px; border-bottom: 1px solid #e5e5e5; }
.modal-body { padding: 20px; }
.modal-footer { padding: 20px; text-align: right; border-top: 1px solid #e5e5e5; }
/* undo BS5's flex-gap child margins; button spacing comes from `.modal-footer .btn + .btn` */
.modal-footer > * { margin: 0; }

@media (min-width: 768px) {
    .modal-dialog { max-width: 600px; margin: 30px auto; }
    .modal-content { box-shadow: 0 5px 15px rgb(0 0 0 / .5); }
}