/* The AJAX loading spinner used by the queue/DataTables views (Quality Assurance
   Queue, Account Statement Queue, Invoice/Tuition Modifications, Tuition Assistance
   Requests, etc.) was duplicated here during the migration to re-center it, but
   `spinner.css` loads AFTER `admin.css` in the adminCss bundle (BundleConfig.cs), so
   this copy never won the cascade and the loader stayed in the top-left corner.
   `.spinner-wrapper` / `.spinner-backdrop` / `.spinner-border` now live in exactly
   one place -- Content/spinner.css -- with the centering applied there. */

.scrollable-table {
    overflow-x: auto;
}

.scrollable-table table {
    table-layout: fixed;
    width: auto;
}

    .scrollable-table th, .scrollable-table td {
        width: 200px;
        min-width: 200px;
        /*max-width: 200px;*/
    }

.col-200 {
    width: 200px;
}

.inline {
    display: inline-block;
    width: 75px;
}

a h4 {
    color: black;
    text-decoration: none;
}

body {
    padding-top: 50px;
    padding-bottom: 20px;
    color: rgb(47, 84, 150);
}

#admin {
    color: #222;
}

.full-width-input {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
}

.tierItem, .employmentStatusItem, .answerItem {
    margin-top: 5px;
}

    .tierItem:first-child, .employmentStatusItem:first-child, .answerItem:first-child {
        margin-top: 0;
    }

.employmentStatusTier {
    width: 100%;
    margin: 8px auto 15px 30px;
}

.navbar-admin {
    background-color: #222;
}

.remove-tier {
    line-height: 1.42857143;
    padding: 8px 0;
    display: block;
}

.navbar-brand {
    padding: 0;
}
.navbar-brand img {
    margin-top: 5px;
    margin-left: 10px;
    /*width: 75%;*/
}

.main-nav {
    padding-top: 22px;
    font-size: large;
}

.alt-color {
    color: rgb(91, 155, 213);
}

footer {
    color: #000;
}

.payee-controls{
    display: flex;
    justify-content: flex-start;
}

.payee-controls form{
    margin: 5px;
}
.report-tabs .nav-tabs {
    margin-bottom: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.error-message {
    display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
    -ms-border-radius: 4px;
    border-radius: 4px;
  background-color: #f2dede;
  color: #b94a48;
}

.info-message {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
    -ms-border-radius: 4px;
    border-radius: 4px;
    background-color: #f2dede;
    color: lightskyblue;
}

.error-message.left {
        text-align: left;
    }

#loans .input-contribution {
    width: 80%;
}
#loans input, #loans select {
    width: 90%;
}

.popover-handle:hover {
    cursor: pointer;
}

#main-banner {
    padding: 50px;
    position: relative;
    text-align: center;
    overflow: hidden;
}

#main-banner-background {
    position: absolute;
    left: 0;
    top: -315px;
    width: 100%;
    height: auto;
    -ms-opacity: 0.2;
    opacity: 0.2;
    z-index: -1;
}

#how-it-works {
    text-align: center;
    border: solid;
    border-width: 5px;
    border-color: rgb(189, 215, 238);
    padding: 0 25px 25px 25px;
}

#example {
    text-align: center;
    background-color: rgb(189,215,238);
    padding-bottom: 25px;
}

#example-bubbles {
    padding-left: calc((100% - 850px) / 2);
}

.circle {
    height: 175px;
    width: 175px;
    -ms-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    display: table;
    font-size:small;
    position: relative;
    float: left;
    padding: 10px;
}

.circle span {
    display: table-cell;
    vertical-align: middle;
}

.arrow {
    width: 0;
    height: 0;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left: 30px solid rgb(91,155,213);
    margin: 63px 10px 0 10px;
    float: left;
}

#more-details {
    padding: 25px;
}

#more-details img {
    padding-bottom: 5px;
}

.detail-link {
    text-align: center;
}

#contact-us {
    padding: 25px;
    position: relative;
    overflow: hidden;
}

#contact-us-background {
    position: absolute;
    left: 0;
    top: -140px;
    width: 100%;
    height: auto;
    -ms-opacity: 0.2;
    opacity: 0.2;
    z-index: -1;
}

#mortar-board {
    margin-top: 15px;
}

.about-us-left {
    text-align: right;
    padding-right: 50px;
}

.about-us-left img {
    width: 65%;
}

.about-us-right {
    color: #fff;
    background-color: rgb(157,195,230);
    padding: 20px;
}

#need-is-real {
    background-color: rgb(157,195,230);
    text-align: center;
    padding: 0 50px 25px 50px;
}

#need-is-real h3 {
    color: #fff;
}

.stat {
    border: solid;
    border-width: 5px;
    padding: 5px 20px 5px 20px;
    height: 249px;
}

.stat p {
    text-align: justify;
}

.citation {
    font-size: 8pt;
}

#articles {
    width: 100%;
    border: solid;
    border-color: rgb(127, 127, 127);
}

#articles th {
    padding: 10px;
    color: #fff;
    background-color: rgb(127, 127, 127);
}

#articles td {
    color: rgb(127, 127, 127);
    padding: 10px;
}

#articles a {
    color: rgb(127, 127, 127);
}

.table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td
{
    vertical-align: middle;
}



.navbar-bottom {
    top: 50px; /* flush under the 50px-tall fixed-top navbar (was 51px -> 1px gap) */
    z-index: 1000;
}

/* The main top navbar is the panel-header gray (#f5f5f5); the company-context
   .navbar-bottom bar stays white like the previous UI. Higher specificity +
   !important to beat `.navbar.bg-light { #f5f5f5 !important }`. */
.navbar.bg-light.navbar-bottom {
    background-color: #fff !important;
}

.navbar-text{
    color: white;
}

.super-admin-body {
    padding-top: 100px;
}

select.form-control + .chosen-container.chosen-container-single .chosen-single {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    background-image:none;
}

select.form-control + .chosen-container.chosen-container-single .chosen-single div {
    top:4px;
    color:#000;
}

select.form-control + .chosen-container .chosen-drop {
    background-color: #FFF;
    border: 1px solid #CCC;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    margin: 2px 0 0;

}

select.form-control + .chosen-container .chosen-search input[type=text] {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    background-image:none;
}

select.form-control + .chosen-container .chosen-results {
    margin: 2px 0 0;
    padding: 5px 0;
    font-size: 14px;
    list-style: none;
    background-color: #fff;
    margin-bottom: 5px;
}

select.form-control + .chosen-container .chosen-results li ,
select.form-control + .chosen-container .chosen-results li.active-result {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333;
    white-space: nowrap;
    background-image:none;
}
select.form-control + .chosen-container .chosen-results li:hover,
select.form-control + .chosen-container .chosen-results li.active-result:hover,
select.form-control + .chosen-container .chosen-results li.highlighted
{
    color: #FFF;
    text-decoration: none;
    background-color: #428BCA;
    background-image:none;
}

select.form-control + .chosen-container-multi .chosen-choices {
    display: block;
    width: 100%;
    min-height: 34px;
    padding: 6px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    background-image:none;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    height:auto;
    padding:5px 0;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-choice {

    background-image: none;
    padding: 3px 24px 3px 5px;
    margin: 0 6px 0 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    background-color: #FFF;
    border-color: #CCC;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    top:8px;
    right:6px;
}

select.form-control + .chosen-container-multi.chosen-container-active .chosen-choices,
select.form-control + .chosen-container.chosen-container-single.chosen-container-active .chosen-single,
select.form-control + .chosen-container .chosen-search input[type=text]:focus{
    border-color: #66AFE9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
}

select.form-control + .chosen-container-multi .chosen-results li.result-selected{
    display: list-item;
    color: #ccc;
    cursor: default;
    background-color: white;
}

.word-break {
    -ms-word-wrap: break-word;
    word-wrap: break-word; /* All browsers since IE 5.5+ */
    overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
    width: 100%;
}

/* .card / .card-body / .card-header sizing lives in bootstrap3-compat.css
   (BS3 panel-matching padding: 15px body, 10px 15px header, 4px radius). This
   file loads AFTER compat in every bundle, so duplicate rules here with BS5's
   own defaults (2rem body padding, etc.) silently won the cascade and puffed
   up every card on every admin page well past the QA/BS3 look. Layout-only
   properties that compat doesn't set (flex column, min-width, word-wrap,
   background) still need to come from somewhere, so keep those without
   re-declaring the padding/border-radius compat already owns. */
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
}

.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.card-title {
    margin: 0 0 0.75rem;
}

.card-subtitle {
    margin-top: -0.375rem;
    margin-bottom: 0;
}

.card-text:last-child {
    margin-bottom: 0;
}

.card-link:hover {
    text-decoration: none;
}

.card-link + .card-link {
    margin-left: 1.25rem;
}

.card-header {
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header:first-child {
    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.administrative-file-upload {
    margin-bottom: 3rem;
}

.administrative-file-upload .form-control {
    display: inline;
    width: auto;
}

.administrative-file-upload .upload-file-name {
    margin: 0 1rem;
}

.administrative-file-upload .upload-file-controls {
    margin-left: 1rem;
}

.administrative-file-upload h4 {
    margin: 2rem 0 0.6rem;
}

.administrative-file-upload p {
    /* was 1.3rem -> ~20px under BS5's 16px root; QA renders the "Download a
       template" link at the normal body size (bug 3). */
    font-size: 14px;
    margin-top: 0.3rem;
}

/* Browse (file-picker) button: give it the BS3 default white/bordered button look.
   BS5 dropped btn-default so the button rendered unstyled on the clone (bug 3). */
.administrative-file-upload .upload-file-controls button[type="button"] {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    cursor: pointer;
}

/* Scoped to .btn-default only -- the Knockout view model toggles this button
   between btn-primary (no file chosen yet) and btn-default (file chosen), and
   an unscoped selector here was forcing the white look even in the btn-primary
   state, hiding QA's blue "Browse..." button before a file is picked. */
.administrative-file-upload .upload-file-controls button.btn-default {
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
}

.administrative-file-upload .upload-file-controls button.btn-default:hover {
    background-color: #e6e6e6;
    border-color: #adadad;
}

.administrative-file-upload button[type="submit"] {
    /* was 11rem -> ~176px under BS5's 16px root; QA's Upload button is normal
       content width (bug 3). */
    width: auto;
    min-width: 90px;
}

.mb-3 > .tuition-answer {
    padding: 6px;
    background-color: #eee;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.is-verified {
    color:green;
}

.is-not-verified {
    color: #e31313;
}

/* Bootstrap 5 upgrade: style legacy BS3-structured navbar dropdown menus
   (<ul class="dropdown-menu"><li><a>...</a></li>) whose anchors are NOT
   .dropdown-item. Lets the admin nav dropdowns render correctly without
   rewriting 40+ Razor @Html.ActionLink calls into dropdown-item anchors. */
.navbar .dropdown-menu li {
    list-style: none;
}

.navbar .dropdown-menu li > a:not(.dropdown-item) {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    text-decoration: none;
    background-color: transparent;
    border: 0;
}

.navbar .dropdown-menu li > a:not(.dropdown-item):hover,
.navbar .dropdown-menu li > a:not(.dropdown-item):focus {
    color: #1e2125;
    background-color: #e9ecef;
}

/* Bootstrap 5 upgrade: Bootstrap removed the .hidden utility in v4+. Admin layouts
   load this bundle (not Site.css/main.css, which still define .hidden), and many
   views + JS (e.g. addDocument's `.replace(..., 'hidden')`) rely on .hidden to hide
   elements. Re-add it so class="hidden" keeps working on admin pages. */
.hidden,
.hide {
    display: none !important;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

/* ============================================================================
   Bootstrap 5 upgrade — match the legacy Bootstrap 3 admin chrome as closely
   as possible (loaded after bootstrap.css in the adminCss bundle, so equal-
   specificity rules win by source order). Admin-scoped via the adminCss bundle.
   ============================================================================ */

/* BS3 used a 14px base font — restore it so admin text/control proportions match. */
body {
    font-size: 14px;
}

.btn, .form-control, .form-select, .input-group-text, .dropdown-menu {
    font-size: 14px;
}

/* Navbar: BS3 navbar-default link spacing/colors + the ~50px bar height that the
   fixed-top offsets assume (body padding-top:50px, .navbar-bottom top:50px). */
.navbar {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 50px;
}

/* Admin navbars: match the panel/card "header" gray (BS3 look) instead of
   Bootstrap 5's bg-light #f8f9fa, so both stacked top bars and the section
   headers share one background. Needs specificity+!important to beat .bg-light. */
.navbar.bg-light {
    background-color: #f5f5f5 !important;
}

.navbar .navbar-nav > li > a,
.navbar .navbar-nav .nav-link {
    padding: 15px;
    line-height: 20px;
    text-decoration: none;
}

.navbar-light .navbar-nav > li > a,
.navbar-light .navbar-nav .nav-link {
    color: #777;
}

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

.navbar-dark .navbar-nav > li > a,
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75);
}

    .navbar-dark .navbar-nav > li > a:hover, .navbar-dark .navbar-nav > li > a:focus,
    .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
        color: #fff;
    }

/* Buttons: BS3 sizing + the white .btn-default look (mapped to .btn-secondary). */
.btn {
    border-radius: 4px;
}

.btn-secondary {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:not(:disabled):not(.disabled):active,
    .btn-secondary:not(:disabled):not(.disabled).active {
        color: #333;
        background-color: #e6e6e6;
        border-color: #adadad;
        box-shadow: none;
    }

/* Colored variants must win over the neutral .btn-secondary above when a button
   carries both (e.g. "btn btn-secondary btn-success" Submit buttons render white
   otherwise, because this admin .btn-secondary loads after compat's .btn-success). */
.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:not(:disabled):not(.disabled):active {
        color: #fff;
        background-color: #449d44;
        border-color: #398439;
    }

/* Same fix, .btn-primary variant (e.g. "Add Radio Button" on the Fringe Benefit
   Eligibility Group modal uses "btn btn-secondary btn-primary" -- rendered white
   instead of blue because this admin .btn-secondary loads after compat's
   .btn-primary). */
.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:not(:disabled):not(.disabled):active {
        background-color: #286090;
        border-color: #204d74;
    }

/* Restore the BS3 navbar bottom border (divider under the top header). BS5's
   bg-light navbar has no border, so the header blended into the page (QA bug 30). */
.navbar.bg-light {
    border-bottom: 1px solid #e7e7e7;
}

/* Navbar text (e.g. the selected company name in the company-context bar).
   admin.css's legacy ".navbar-text { color: white }" made it invisible on the
   light bar; also give it the 15px padding so it aligns with the nav links. */
.navbar .navbar-text {
    padding: 15px;
}

.navbar-light .navbar-text {
    color: #333;
}

.navbar-dark .navbar-text {
    color: #fff;
}

/* Main/sub company badges + labels (Manage Companies list, Edit Company) */
.company-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    vertical-align: middle;
    text-transform: uppercase;
}

.company-tag-main {
    background-color: #e2e6f5;
    color: #3f51b5;
}

.company-tag-sub {
    background-color: #d7f5df;
    color: #2e9c53;
}

/* Manage Companies list: static relationship text under the company name */
.company-subtext {
    margin-top: 3px;
    font-size: 12px;
    color: #888;
}

.company-subtext .company-icon {
    margin-right: 3px;
}

.company-subtext-warning {
    color: #b98600;
}

/* Edit Company: relationship text beside the Company Name label */
.company-relationship-label {
    margin-left: 6px;
    font-size: 12px;
    color: #888;
    font-weight: normal;
}

.company-relationship-label .company-icon {
    margin-right: 3px;
}

.company-relationship-warning {
    color: #b98600;
}

/* Company Overview modal: scroll long content (e.g. Sub-Companies tab) inside the modal
   instead of growing the modal past the viewport and scrolling the page. */
#ProgramOverview .modal-body {
    max-height: 65vh;
    overflow-y: auto;
}

/* Company Overview modal loading indicator */
.company-overview-loader {
    text-align: center;
    padding: 40px 0;
    color: #888;
}

.company-overview-loader .spinner {
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 4px solid #e0e0e0;
    border-top-color: #337ab7;
    border-radius: 50%;
    animation: company-overview-spin 0.8s linear infinite;
}

.company-overview-loader .loader-text {
    margin-top: 12px;
    font-size: 13px;
}

@keyframes company-overview-spin {
    to {
        transform: rotate(360deg);
    }
}