/*#footer{
    padding: 5px;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: transparent;
    text-align: center;
    z-index: -1;
}*/


body {
    /*padding-top: 50px;
    padding-bottom: 20px;
    padding-left: 5px;
    padding-right: 5px;*/

}

/* Hand cursor for all link-like elements. Anchors and tabs that act as buttons
   (e.g. Bootstrap tab toggles, anchors with no/placeholder href, click handlers)
   otherwise show the default arrow cursor; force the pointer everywhere. */
a,
a[href],
.nav-link,
[role="tab"],
[role="button"],
[data-bs-toggle] {
    cursor: pointer;
}

.row {
    margin-top: 5px
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 60px;
}

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

.navbar-default,
#nav.navbar {
    background-color: #ffffff !important;
    border-bottom: none;
    padding-left: 15px;
    padding-right: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);   /* drop shadow below the navbar */
}

/* Blue divider under the navbar, inset on the left/right with white space on each
   side to match the footer line. Drawn as a pseudo-element because a normal
   border-bottom would span the full screen width edge-to-edge. */
.navbar-default::after,
#nav.navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 4px solid #2526AC;
}

.navbar-default .navbar-brand {
  color: #cccccc;
  font-size: 2rem;
}
/* No hover effect on the portal name (keep it the same gray on hover/focus). */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #cccccc;
}
.navbar-default .navbar-text {
  color: #2f3232;
}
.navbar-default .navbar-nav > li > a {
  color: #2f3232;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: rgba(0, 0, 0, .7);
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: rgba(0, 0, 0, .7);
    background-color: #2526AC;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: rgba(0, 0, 0, .7);
    background-color: #2526AC;
}
.navbar-default .navbar-toggle {
  border-color: #2526AC;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #2526AC;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #2f3232;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #2f3232;
}
.navbar-default .navbar-link {
  color: #2f3232;
}
.navbar-default .navbar-link:hover {
    color: rgba(0, 0, 0, .7);
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #2f3232;
  }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: rgba(0, 0, 0, .7);
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: rgba(0, 0, 0, .7);
        background-color: #2526AC;
    }
}

.navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, .5);
}

/* ===== App navigation tabs (SPA navbar #nav) =====
   The nav links sit on the bottom row of the navbar and read as tabs that
   meet the blue divider line below them.
   - Inactive tab (screen you're NOT on, e.g. Log off): blue (#2526AC) text, no box.
   - Active tab   (screen you ARE on): blue (#2526AC) box, white text, rounded top corners.
   - Hover:        yellow (#FAE47A) box, black text, rounded top corners.
   Vue Router adds .router-link-active to the current tab automatically. */

/* Remove the navbar's bottom padding so the tab boxes sit flush against the blue line. */
.navbar-default {
    padding-bottom: 0;
}

/* Small white gap below the Casepoint logo in the top-right of the navbar. */
.navbar-default img.ms-auto {
    margin-bottom: 8px;
}

/* Hamburger toggler (the three-line button shown at narrow widths): recolor the
   lines and border to brand blue, with a yellow hover to match the nav tabs.
   The lines come from a background-image SVG, so we override it with a blue
   stroke (#2526AC encoded as %232526AC in the data URI). */
.navbar-default .navbar-toggler {
    border-color: #2526AC;
    margin-left: 15px;   /* white buffer between the Casepoint logo and the hamburger */
}

.navbar-default .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232526AC' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-default .navbar-toggler:hover,
.navbar-default .navbar-toggler:focus {
    background-color: #FAE47A;
}

/* Open hamburger menu (narrow widths, where navbar-expand-lg collapses): keep the
   tab colors (blue text / blue active box / yellow hover) from the rules above, but
   make each link a fully-rounded box and right-align the stack so it sits directly
   below the toggler. Scoped to <992px so the desktop tab bar is unaffected. */
@media (max-width: 991.98px) {
    /* Small white gap between the navbar content and the blue divider line: when the
       menu is closed this separates the hamburger from the line; when it's open it
       separates the last item (Log off) from the line. */
    .navbar-default {
        padding-bottom: 8px;
    }

    .navbar-default .navbar-nav {
        align-items: flex-end;        /* right-align the stacked link boxes */
    }

    .navbar-default .navbar-nav .nav-item {
        display: block;               /* each box shrinks to fit its text */
    }

    .navbar-default .navbar-nav .nav-link {
        /* !important so the all-corners radius wins over the base tab rule's
           border-bottom-*-radius: 0 (which appears later in this file). */
        border-radius: 10px !important;   /* rounded on ALL sides, not just the top */
        margin: 3px 0;                    /* small gap between the stacked boxes */
    }
}

.navbar-default .navbar-nav .nav-item {
    display: flex;
    align-items: flex-end;
}

/* !important is used here to win over the existing ".navbar-light .navbar-nav
   .nav-link" gray rule and the ".navbar-default .navbar-nav > li > a" rule, plus
   any theme CSS the Vue app injects at runtime after this stylesheet loads. */
.navbar-default .navbar-nav .nav-link {
    color: #2526AC !important;       /* inactive tabs: blue text */
    font-weight: 600;
    cursor: pointer;                 /* hand cursor — these act as buttons */
    padding: 10px 18px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition: background-color .15s ease, color .15s ease;
}

/* Hover (and keyboard focus): yellow box, black text. */
.navbar-default .navbar-nav .nav-link:hover,
.navbar-default .navbar-nav .nav-link:focus {
    background-color: #FAE47A !important;
    color: #000000 !important;
}

/* Active tab (current screen): blue box, white text. */
.navbar-default .navbar-nav .nav-link.router-link-active,
.navbar-default .navbar-nav .nav-link.router-link-exact-active {
    background-color: #2526AC !important;
    color: #ffffff !important;
}

/* Hovering the active tab (the screen you're already on) keeps the blue box
   instead of turning yellow, so the current tab reads as "you are here". */
.navbar-default .navbar-nav .nav-link.router-link-active:hover,
.navbar-default .navbar-nav .nav-link.router-link-active:focus,
.navbar-default .navbar-nav .nav-link.router-link-exact-active:hover,
.navbar-default .navbar-nav .nav-link.router-link-exact-active:focus {
    background-color: #2526AC !important;
    color: #ffffff !important;
}

/* Page titles (e.g. "Employee Contact Information") use <h2> at the top of each
   page component, rendered inside #portal-content. Color them the brand blue. */
#portal-content h2 {
    color: #2526AC;
}

/* Instruction / informational text blocks: light-blue rounded box that stretches
   most of the screen width. Add class="instructions" to a wrapper div. */
.instructions {
    background-color: #B4DCFF;
    border-radius: 12px;
    padding: 16px 24px;
    margin: 10px 15px 20px;   /* full-width minus the left/right side margins */
}

/* Keep the paragraphs inside the box tidy (no stray top/bottom margin gaps). */
.instructions p:first-child {
    margin-top: 0;
}
.instructions p:last-child {
    margin-bottom: 0;
}

/* Inline "Continue" preview button inside instruction text: align it to the bottom
   so it lines up with the surrounding text (overrides each step's middle alignment). */
.continue-preview {
    vertical-align: bottom !important;
}

/* Footer divider: replace the default faded gray <hr> with a solid blue line
   matching the 4px #2526AC divider at the top of the screen. */
.body-content > hr {
    border: 0;
    border-top: 4px solid #2526AC;
    opacity: 1;
    /* stretch full screen width (cancel the .body-content 15px side padding) */
    margin-left: -15px;
    margin-right: -15px;
}

/* "Is this information correct?" prompt on the Contact Information screen. */
#confirmContactInfoDiv p {
    font-weight: bold;
}

/* On the update form, vertically center each field label (e.g. "Type of Mailing
   Address") with the input/select to the right of it. */
#updateContactInfoDiv .row.form-group {
    align-items: center;
}

/* ===== Action-button hover styles (hover-only) =====
   Add one of these classes alongside a button's base .btn class.
   !important overrides Bootstrap's default (e.g. btn-outline-dark) hover. */

/* Save / Create actions: green background, white text on hover. */
.btn-hover-save:hover,
.btn-hover-save:focus {
    background-color: #489F3B !important;
    border-color: #489F3B !important;
    color: #ffffff !important;
}

/* Cancel / Close actions: gray background, black text on hover. */
.btn-hover-cancel:hover,
.btn-hover-cancel:focus {
    background-color: #C3BFBC !important;
    border-color: #C3BFBC !important;
    color: #000000 !important;
}

/* Tighten the gap between the "Employee Contact Information" title and the blue
   instructions box. The card-body after the title has an inline padding-top: 15px,
   so !important is needed to shrink it. */
.contactInfo + .card-body {
    padding-top: 0 !important;
}

/* ===== Loading popup (SweetAlert2) =====
   Blue box, white text, rounded corners, yellow border; the default circular
   spinner is replaced with the rotating mLINQS "m"; the backdrop is darkened.
   !important is required because SweetAlert2's stylesheet is injected by the Vue
   app at runtime, after this file loads. */

/* Darker gray backdrop behind the popup. */
.swal2-container,
.swal2-container.swal2-backdrop-show {
    background: rgba(0, 0, 0, 0.75) !important;
}

/* The popup box: blue fill, white text, rounded corners, yellow border. */
.swal2-popup {
    background-color: #2526AC !important;
    color: #ffffff !important;
    border: 3px solid #FAE47A !important;
    border-radius: 16px !important;
}

.swal2-title,
.swal2-html-container {
    color: #ffffff !important;
}

/* ===== Sign & Submit / Deny & Return modals =====
   Scoped via the popup customClass "mlinqs-modal": white body with the blue
   md-toolbar header, inside the rounded yellow-bordered popup. (The loading popup
   has no .mlinqs-modal, so it keeps its all-blue look + white spinner.) */
.mlinqs-modal.swal2-popup {
    background-color: #ffffff !important;
    color: #212529 !important;
    overflow: hidden !important;   /* clip the blue header to the popup's rounded corners */
    padding: 0 !important;          /* let the header bar reach the top edges */
}

/* Collapse the (empty) SweetAlert header so the blue header bar sits flush at the top. */
.mlinqs-modal .swal2-header {
    padding: 0 !important;
    min-height: 0 !important;
}

/* Body text dark; no margins so the header reaches the edges. */
.mlinqs-modal .swal2-html-container {
    color: #212529 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Header bar uses square corners; the popup's overflow:hidden rounds them to match. */
.mlinqs-modal md-toolbar:not(.md-menu-toolbar) {
    border-radius: 0 !important;
}

/* White close (X) floating over the blue header. */
.mlinqs-modal .swal2-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    margin: 0 !important;
    color: #ffffff !important;
    z-index: 3;
}

/* Button row padding (popup padding was removed). */
.mlinqs-modal .swal2-actions {
    padding: 1rem 1.5rem 1.5rem !important;
    margin: 0 !important;
}

/* Certify/checkbox rows: keep the checkbox on the left and let the label text wrap
   in its own column beside it (so wrapped lines align, not under the checkbox). */
.mlinqs-modal md-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    text-align: left;
    margin-bottom: 0.5rem;
}

.mlinqs-modal md-checkbox input[type="checkbox"] {
    margin: 0.15rem 0 0 0;
    flex: 0 0 auto;
}

/* Replace the circular border spinner with the spinning mLINQS "m" icon. */
@keyframes mlinqs-spin {
    to { transform: rotate(360deg); }
}

.swal2-loader {
    border: none !important;
    border-radius: 0 !important;
    width: 5em !important;
    height: 5em !important;
    background: url("../images/mLINQS-m-white.png") center / contain no-repeat !important;
    animation: mlinqs-spin 1.2s linear infinite !important;
}

table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}

thead th {
    background-color: #2526AC;
    color: white;
    vertical-align: middle;   /* center header text (Bootstrap defaults thead to bottom) */
    /*overflow: hidden;*/
}

thead tr.subtable th {
    background-color: #2526AC;
    color: white;
}

/* Table rows: a thin gray bottom border on every row (header + body) for a
   consistent separator, no top border (no double lines), no rounded corners.
   !important is required to override Bootstrap's striped backgrounds and the
   DataTables grid's own row styling so all tables look the same. */
/* Body rows: white background + a thin gray bottom border (consistent separator),
   no top border / no rounded corners. !important overrides Bootstrap's striped
   backgrounds and the DataTables grid's own row styling. */
tbody td {
    background-color: #ffffff !important;   /* overrides table-striped / DataTables */
    box-shadow: none !important;            /* Bootstrap draws striped/hover bg via an inset box-shadow */
    border-top: 0 !important;
    border-bottom: 1px solid #C3BFBC !important;
    /*overflow: hidden;*/
}

/* Hover: highlight the data row with a yellow background. */
tbody tr:hover td {
    background-color: #FCEDA3 !important;
}

/* A selected Inbox row (document link clicked / detail open) stays yellow. */
tr.row-selected > td {
    background-color: #FCEDA3 !important;
}

/* The opened detail panel (and anything inside it) must not show hover-yellow. */
tr.detail-row:hover td {
    background-color: #ffffff !important;
}

/* Attachment / expense tables keep a yellow row hover even inside the detail panel —
   higher specificity than the detail-row hover reset. */
table.attachment-table tbody tr:hover td,
table.expense-table tbody tr:hover td {
    background-color: #FCEDA3 !important;
}

/* ...except the "add expense" entry row (contains an Add button/link) — no highlight. */
table.expense-table tbody tr:has([id*="Add"]):hover td,
table.expense-table tbody tr:has([aria-label="Add"]):hover td {
    background-color: #ffffff !important;
}

/* Vertically center the data in attachment table rows (overrides .table's top align). */
table.attachment-table tbody td {
    vertical-align: middle;
}

/* Total rows in the summary tables (marked with bgcolor="#c1d4f2"): always gray with
   bold black text, in every state. box-shadow:none kills the striped/hover overlay
   that Bootstrap paints on top of the background; !important overrides the inline
   cell background colors and the row hover-yellow. */
table.table tbody tr[bgcolor="#c1d4f2"] td,
table.table tbody tr[bgcolor="#c1d4f2"]:hover td {
    background-color: #C3BFBC !important;
    box-shadow: none !important;
    color: #000000 !important;
    font-weight: bold !important;
}

/* ===== Document details screen (My/Open Documents -> Relocation) =====
   No yellow row hover for the tab-content list tables by default; the attachment tables
   keep it. Rows with an explicit bgcolor (gray total rows) are left untouched. */
.document-details tbody tr:not([bgcolor]):hover td,
.document-details table.expense-table tbody tr:not([bgcolor]):hover td {
    background-color: #ffffff !important;
}

/* ...but the attachment tables (General Attachments etc.) keep the yellow row hover. */
.document-details table.attachment-table tbody tr:not([bgcolor]):hover td {
    background-color: #FCEDA3 !important;
}

/* Vouchers & Authorizations list tables: Inbox-style row behavior — yellow on hover and
   the selected (expanded) row stays yellow. Child combinators keep this from leaking
   into the nested summary tables shown inside an expanded detail row. */
.document-details table.doc-hover-table > tbody > tr:not(.detail-row):not([bgcolor]):hover > td,
.document-details table.doc-hover-table > tbody > tr.row-selected:not(.detail-row) > td {
    background-color: #FCEDA3 !important;
}

/* Vertically center the cell content in the Vouchers/Authorizations list rows. */
.document-details table.doc-hover-table > tbody > tr:not(.detail-row) > td {
    vertical-align: middle;
}

/* Total row (bgcolor="#c1d4f2") inside the expanded detail content: gray, bold, no hover. */
.document-details tr.detail-row table tbody tr[bgcolor="#c1d4f2"] td,
.document-details tr.detail-row table tbody tr[bgcolor="#c1d4f2"]:hover td {
    background-color: #C3BFBC !important;
    color: #000000 !important;
    font-weight: bold !important;
    box-shadow: none !important;
}

/* ===== Document details tabs (Details / Vouchers / Authorizations / Forms) =====
   Brand-styled to match the top nav tabs: inactive = blue text, active = blue box +
   white text, hover = yellow box + black text. */
.document-details .nav-tabs {
    position: relative;
    border-bottom: none;   /* divider drawn as a pseudo-element below so it paints on top of the tab hover */
}

/* Blue divider under the tab row, drawn as an absolutely-positioned pseudo-element so it
   paints on top of the tab hover/active boxes (matching the top navbar divider). */
.document-details .nav-tabs::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px solid #2526AC;
}

.document-details .nav-tabs .nav-link {
    color: #2526AC;                      /* inactive tab: blue text */
    font-weight: 600;
    cursor: pointer;                     /* hand cursor — these act as buttons */
    border: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;                    /* override Bootstrap's default -1px so the tab sits flat on the line */
    transition: background-color .15s ease, color .15s ease;
}

/* Hover / focus: yellow box, black text. */
.document-details .nav-tabs .nav-link:hover,
.document-details .nav-tabs .nav-link:focus {
    background-color: #FAE47A;
    color: #000000;
    border-color: transparent;
}

/* Active tab (open tab): blue box, white text. */
.document-details .nav-tabs .nav-link.active {
    background-color: #2526AC;
    color: #ffffff;
    border-color: transparent;
}

/* Hovering the active tab (the tab that's already open) keeps the blue box
   instead of turning yellow, so the current tab reads as "you are here". */
.document-details .nav-tabs .nav-link.active:hover,
.document-details .nav-tabs .nav-link.active:focus {
    background-color: #2526AC;
    color: #ffffff;
}

/* Count indicator in the document tabs, shown as [n] to match the Inbox section
   indicators. color: inherit so it follows the tab label color in every state. */
.document-details .nav-tabs .nav-link .inbox-badge {
    margin-left: 2px;
    font-weight: 600;
    color: inherit;
}

/* Payment Summary "Total Employee Payment" row: darker gray background with bold
   brand-blue text (distinct from the other gray totals). */
table.table tbody tr.employee-payment-total td {
    background-color: #A7A6A4 !important;
    box-shadow: none !important;
    color: #2526AC !important;
    font-weight: bold !important;
}

/* No gray line under the header row. */
thead th {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* Round the Employee Questionnaire table corners to match the Fillable PDF table
   (which uses .rounded-3 = 0.5rem + overflow-hidden), giving its blue header
   rounded top corners. */
.emp-questionnaire-section table {
    border-radius: 0.5rem;
    overflow: hidden;
}

/* DataTables (the Inbox grid) adds a thicker/darker bottom border on the table
   element; remove it so the table ends with the same thin row separator as the
   last row, matching the other tables. */
table.dataTable,
table.dataTable.no-footer {
    border-bottom: 0 !important;
}

/* ===== "Open" link style =====
   Used by the Inbox Document links (.documentLink) and anything given .open-link.
   Default: brand-blue, bold, underlined. Hover/focus: rounded purple box, white
   bold text, no underline. Padding/radius sit on the default (transparent) state
   so the hover box doesn't shift the layout. */
.open-link,
a.documentLink {
    color: #2526AC !important;
    font-weight: bold !important;
    text-decoration: underline !important;
    padding: 2px 6px;
    border-radius: 6px;
    /* inline-block so a wrapped (two-line) link is one box, not split fragments */
    display: inline-block;
}

.open-link:hover,
.open-link:focus,
a.documentLink:hover,
a.documentLink:focus {
    background-color: #7314F5 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Action buttons: brand-blue background, white bold text. The hover color varies
   by intent:
     .btn-open            -> purple (open)
     .btn-assign/.btn-save-> green  (save / positive)
     .btn-deny            -> red    (deny / destructive)
     .btn-cancel          -> gray   (cancel / close; black text)
   (.btn-cancel is used instead of .btn-close because Bootstrap reserves .btn-close.) */
.btn-open,
.btn-assign,
.btn-save,
.btn-deny,
.btn-cancel,
.btn-continue {
    background-color: #2526AC;
    border-color: #2526AC;
    color: #ffffff;
    font-weight: bold;
    margin: 4px;   /* small space between adjacent action buttons */
}

.btn-open:hover,
.btn-open:focus {
    background-color: #7314F5 !important;
    border-color: #7314F5 !important;
    color: #ffffff !important;
}

.btn-assign:hover,
.btn-assign:focus,
.btn-save:hover,
.btn-save:focus {
    background-color: #489F3B !important;
    border-color: #489F3B !important;
    color: #ffffff !important;
}

.btn-deny:hover,
.btn-deny:focus {
    background-color: #980404 !important;
    border-color: #980404 !important;
    color: #ffffff !important;
}

.btn-cancel:hover,
.btn-cancel:focus {
    background-color: #C3BFBC !important;
    border-color: #C3BFBC !important;
    color: #000000 !important;
}

/* Outline save button (e.g. Employee Questionnaire Save): brand-blue border + bold
   blue text on a transparent background; green background/white text on hover. */
.btn-save-outline {
    background-color: transparent;
    border-color: #2526AC;
    color: #2526AC;
    font-weight: bold;
}

.btn-save-outline:hover,
.btn-save-outline:focus {
    background-color: #489F3B !important;
    border-color: #489F3B !important;
    color: #ffffff !important;
}

/* Continue button: yellow background, black text on hover. */
.btn-continue:hover,
.btn-continue:focus {
    background-color: #FAE47A !important;
    border-color: #FAE47A !important;
    color: #000000 !important;
}

/* Confirmation dialog buttons (e.g. "Are you sure you want to close"):
   solid green Yes, solid gray No (with black text). */
.btn-yes {
    background-color: #489F3B;
    border-color: #489F3B;
    color: #ffffff;
    font-weight: bold;
    margin: 4px;
}

.btn-yes:hover,
.btn-yes:focus {
    background-color: #3A8030 !important;
    border-color: #3A8030 !important;
    color: #ffffff !important;
}

.btn-no {
    background-color: #C3BFBC;
    border-color: #C3BFBC;
    color: #000000;
    font-weight: bold;
    margin: 4px;
}

.btn-no:hover,
.btn-no:focus {
    background-color: #A7A6A4 !important;
    border-color: #A7A6A4 !important;
    color: #000000 !important;
}

/* Outline close button: white background, gray border + bold gray text; gray fill
   (black text) on hover. */
.btn-close-outline {
    background-color: #ffffff;
    border-color: #A7A6A4;
    color: #A7A6A4;
    font-weight: bold;
}

.btn-close-outline:hover,
.btn-close-outline:focus {
    background-color: #C3BFBC !important;
    border-color: #C3BFBC !important;
    color: #000000 !important;
}

/* The remove "X" button (a .btn wrapping the fa-remove icon, e.g. removing an
   expense): the whole button gets a red background on hover, matching the Deny and
   Return button. :has() targets the button that contains the icon. */
.fa-remove {
    cursor: pointer;
}

.btn:not(.disabled):has(.fa-remove):hover,
.btn:not(.disabled):has(.fa-remove):focus {
    background-color: #980404 !important;
    border-color: #980404 !important;
    color: #ffffff !important;
}

.table > :not(caption) > * > * {
    background-color: #ffffff;
}

.table td, .table th {
    padding: .75rem;
    vertical-align: top;
}

/* Header cells: keep text vertically centered even when the row has a forced
   height. More specific than ".table th { vertical-align: top }" above, which
   otherwise pins header text to the top of taller header rows. */
.table thead th {
    vertical-align: middle;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #f6f6f6;   /* match the VueDatePicker disabled color (--dp-disabled-color) */
    opacity: 1;
}

/* VueDatePicker: use the brand blue for the selected date and its month/year/time
   dropdown lists (default is the old blue #1976d2). !important because the
   datepicker's stylesheet is injected at runtime after this file. */
.dp__theme_light {
    --dp-primary-color: #2526AC !important;       /* selected date / dropdowns: brand blue */
    --dp-hover-color: #FCEDA3 !important;          /* date hover: yellow */
    --dp-hover-text-color: #000000 !important;     /* dark text on the yellow hover */
}

/* ===== Styled dropdown (PrimeVue Dropdown) =====
   Selected option: brand-blue background, white text.
   Hovered/focused option: yellow background, black text.
   (!important to override the lara-light-blue theme's blue highlight, which is
   injected at runtime after this file.) */
/* Keep PrimeVue overlay panels above the SweetAlert modals (which use a high
   z-index) so dropdowns inside Deny & Return / Sign & Submit aren't hidden behind. */
.p-dropdown-panel,
.p-autocomplete-panel,
.p-multiselect-panel {
    z-index: 100000 !important;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight,
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
    background-color: #2526AC !important;
    color: #ffffff !important;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-disabled):hover,
.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus,
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-disabled):hover,
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus {
    background-color: #FCEDA3 !important;
    color: #000000 !important;
}

/* Trim the dropdown trigger height to line up with the surrounding form inputs
   (the lara theme adds extra vertical padding that makes it look tall). */
.p-dropdown .p-dropdown-label {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.p-component ul {
    padding-left: 1px;
}

.tabsDynamicHeight md-content {
  background-color: transparent !important; }
  .tabsDynamicHeight md-content md-tabs {
    background: #f6f6f6;
    border: 1px solid #e1e1e1; }
    .tabsDynamicHeight md-content md-tabs md-tabs-wrapper {
      background: white; }
  .tabsDynamicHeight md-content h1:first-child {
    margin-top: 0; }

md-tabs {
    border-radius: 6px;
}

/* ===== DataTables pagination (global) =====
   Scoped under #portal-content (which wraps every page's grid) so these win over the
   DataTables stylesheet that's bundled/injected at runtime. */

/* Rounder corners on every page button. */
#portal-content .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
}

/* Current page: keep the subtle gradient, but tint it with a little brand blue. */
#portal-content .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#portal-content .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #333 !important;
    background: linear-gradient(to bottom, rgba(37, 38, 172, 0.05) 0%, rgba(37, 38, 172, 0.25) 100%) !important;
}

/* Other pages / Previous / Next: yellow hover to match the nav tabs. */
#portal-content .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.disabled):hover {
    border: 1px solid #FAE47A !important;
    color: #000000 !important;
    background: #FAE47A !important;
}


.mobile70 {
    width: 20%; 
    word-break:break-all;
}

.mobile1570 {
    width: 100px; 
    white-space:normal;
}

.mobile30 {
    width: 5%; 
    word-break:break-all;
}

@media only screen and (min-width: 120px) and (max-width: 767px) {
    .nonMobile{
        display: none;
    }

    /*.mobile15-30-40 {
        width: 40%
    }

    .mobile5-20-30 {
        width: 30%
    }

    .mobile20-40-40 {
        width:40%
    }

    .mobile10-15-30 {
        width: 30%
    }

    .mobile10-20-40 {
        width: 40%
    }

    .mobile10-20-30 {
        width: 30%
    }*/

    .mobile5-15-30 {
        width: 30%;
        margin: 2px;
    }

    /* Set padding to keep content from hitting the edges */
    .body-content {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .nonMobile{
        display: "";
    }

    .nonMobile1 {
        display: none;
    }

    /*.mobile5-15-0 {
        width: 20%
    }

    .mobile10-20-0 {
        width: 20%
    }

    .mobile15-30-40 {
        width: 30%
    }

    .mobile5-20-30 {
        width: 20%
    }

    .mobile15-20-0 {
        width: 20%
    }

    .mobile20-40-40 {
        width:40%
    }

    .mobile10-15-30 {
        width: 15%
    }

    .mobile10-20-40 {
        width: 20%
    }

    .mobile10-20-30 {
        width: 20%
    }

    .mobile5-15-30 {
        width:15%
    }*/
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .nonMobile {
        display: "";
    }

    .nonMobile1 {
        display: "";
    }

    .nonMobile2 {
        display: none;
    }

    /*.mobile5-0-0 {
        width: 15%;
    }

    .mobile10-0-0 {
        width: 10%;
    }

    .mobile3-0-0 {
        width: 3%
    }

    .mobile5-15-0 {
        width: 5%
    }

    .mobile10-20-0 {
        width: 10%
    }

    .mobile7-0-0 {
        width: 7%
    }

    .mobile15-30-40 {
        width: 15%
    }

    .mobile5-20-30 {
        width: 5%
    }

    .mobile15-20-0 {
        width: 15%
    }

    .mobile20-40-40 {
        width: 20%
    }

    .mobile10-15-30 {
        width: 10%
    }

    .mobile15-0-0 {
        width: 15%
    }

    .mobile10-15-30 {
        width: 10%
    }

    .mobile10-20-40 {
        width: 10%
    }

    .mobile10-20-30 {
        width: 10%
    }

    .mobile5-15-30 {
        width: 5%
    }*/
}

@media only screen and (min-width: 1600px) and (max-width: 1999px) {
    .nonMobile{
        display: "";
    }

    .nonMobile1 {
        display: "";
    }

    .nonMobile2 {
        display: "";
    }

    .mobile5-0-0 {
        width: 5%; 
    }

    .mobile10-0-0 {
        width: 10%; 
    }

    .mobile3-0-0 {
        width: 3%
    }

    .mobile5-15-0 {
        width: 5%
    }

    .mobile10-20-0 {
        width: 10%
    }

    .mobile7-0-0 {
        width: 7%
    }

    .mobile15-30-40 {
        width: 15%
    }

    .mobile5-20-30 {
        width: 5%
    }

    .mobile15-20-0 {
        width: 15%
    }

    .mobile20-40-40 {
        width:20%
    }

    .mobile10-15-30 {
        width: 10%
    }

    .mobile15-0-0 {
        width: 15%
    }

    .mobile10-15-30 {
        width: 10%
    }

    .mobile10-20-40 {
        width: 10%
    }

    .mobile10-20-30 {
        width: 10%
    }

    .mobile5-15-30 {
        width:5%
    }
}

.ui-select-bootstrap>.ui-select-choices{
    width: auto !important;
    /*position: fixed;*/
    top: auto;
    left: auto;
    width: inherit;
}

.line-header {
    padding-bottom: 9px;
    margin: 20px 0 10px;
    border-bottom: 1px solid #eee;
}

.field-validation-error {
    display: inline-block;
    font-size: 1rem;
    font-weight: bold;
    color: red;
    margin-bottom: 0rem;
    background: #fff;
    border: 1px solid red;
    border-radius: 3px;
    padding: 2px 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Hide the up/down spinner arrows on number entry fields. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.ui-select-choices {
    opacity: 1 !important;
}


/***
Bootstrap Line Tabs by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme
Licensed under MIT
***/

/* Tabs panel */
.tabbable-panel {
    border: 1px solid #eee;
    padding: 10px;
}

/* Default mode */
.tabbable-line > .nav-tabs {
    border: none;
    margin: 0px;
}

    .tabbable-line > .nav-tabs > li {
        margin-right: 2px;
        min-width: 120px;
    }

        .tabbable-line > .nav-tabs > li > a {
            border: 0;
            margin-right: 0;
            color: #737373;
        }

            .tabbable-line > .nav-tabs > li > a > i {
                color: #a6a6a6;
            }

        .tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
            border-bottom: 4px solid #fbcdcf;
        }

            .tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
                border: 0;
                background: none !important;
                color: #333333;
            }

                .tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
                    color: #a6a6a6;
                }

            .tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
                margin-top: 0px;
            }

        .tabbable-line > .nav-tabs > li.active {
            border-bottom: 4px solid #f3565d;
            position: relative;
        }

            .tabbable-line > .nav-tabs > li.active > a {
                border: 0;
                color: #333333;
            }

                .tabbable-line > .nav-tabs > li.active > a > i {
                    color: #404040;
                }

.tabbable-line > .tab-content {
    margin-top: -3px;
    background-color: #fff;
    border: 0;
    border-top: 1px solid #eee;
    padding: 15px 0;
}

.portlet .tabbable-line > .tab-content {
    padding-bottom: 0;
}

/* Below tabs mode */

.tabbable-line.tabs-below > .nav-tabs > li {
    border-top: 4px solid transparent;
}

    .tabbable-line.tabs-below > .nav-tabs > li > a {
        margin-top: 0;
    }

    .tabbable-line.tabs-below > .nav-tabs > li:hover {
        border-bottom: 0;
        border-top: 4px solid #fbcdcf;
    }

    .tabbable-line.tabs-below > .nav-tabs > li.active {
        margin-bottom: -2px;
        border-bottom: 0;
        border-top: 4px solid #f3565d;
    }

.tabbable-line.tabs-below > .tab-content {
    margin-top: -10px;
    border-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}


/**
 * ui-select.bootstrap4.shim.css
 *
 * Adapt `bootstrap` (v3) theme from AngularJS `ui-select`
 * component to Bootstrap v4.x look and feel.
 * Bootstrap v4.x look and feel
 *
 * Feel free to test and open issues and pull requests.
 *
 * @see       https://angular-ui.github.io/ui-select/
 *
 * @project   ui-select.bootstrap4.shim.css
 * @version   1-20180706
 * @author    Francis Vagner dos Anjos Fontoura
 * @copyright 2018 by the author
 * @cssdoc    version 1.0-pre
 * @license   MIT
 */

.pull-left {
    float: left !important;
}

.caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid;
    display: inline-block;
    margin-left: 0;
    vertical-align: middle;
    width: 0;
}

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

.ui-select-toggle.btn {
    border: 1px solid #ced4da;
    width:100%;
}

.ui-select-choices.dropdown-menu {
    display: block;
}

.ui-select-match-text {
    max-height: 24px;
}

.ui-select-match.btn-default-focus {
    border-radius: .25rem;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    outline: 0;
}

.ui-select-match.btn-default-focus > .ui-select-toggle {
    border-color: #80bdff;
}

.ui-select-placeholder, .ui-select-match-text, .ui-select-match-item {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 40px;
}

.card-body .form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

/* Card section headers (e.g. Relocation, Comments in the document detail panel):
   no gray background, no bottom line; larger blue title text. */
.card-header {
    background-color: transparent;
    border-bottom: none;
}

.card-title {
    font-weight: 700;
    font-size: 1.25rem;
    color: #2526AC;
}

input[type=checkbox], input[type=radio] {
    margin: 10px;
    border-color: #646b65;
    border-width: 0.10em;
}

.link {
    color: #2526AC;
    text-decoration: none;
    background-color: transparent;
    cursor: pointer;
}

.toggle.btn {
    min-width:80px;
}

.btn-primary {
    color: #fff;
    background-color: #2526AC;
    border-color: #2526AC;
}

.customSelectStyle {
    height: 38px;
    font-size: 1rem;
}

.customSelectPlaceholderStyle {
    color: #495057 !important;
}

.custom-control-label::before, .custom-file-label, .custom-select {
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.custom-select {
    display: inline-block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem 1.75rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center / 8px 10px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* <select> dropdowns: brand-blue selected option + brand-blue focus ring instead of
   the old default blue. (The hover highlight in the open native list is rendered by
   the browser/OS and cannot be themed with CSS.) */
.form-control option:checked,
.custom-select option:checked {
    background-color: #2526AC;
    color: #ffffff;
}

.form-control:focus,
.custom-select:focus {
    border-color: #2526AC;
    box-shadow: 0 0 0 0.2rem rgba(37, 38, 172, 0.25);
}

.hidden {
    display: none;
}


/* Part of custom.css file */
.modal {
    --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 1.4rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-color: black;
    --bs-modal-bg: #fff;
    --bs-modal-border-color: black;
    --bs-modal-border-width: 6px;
    --bs-modal-border-radius: var(--bs-border-radius-lg);
    --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - 6px);
    --bs-modal-header-padding-x: 1.4rem;
    --bs-modal-header-padding-y: 1.4rem;
    --bs-modal-header-padding: 1.4rem 1.4rem;
    --bs-modal-header-border-color: #dee2e6;
    --bs-modal-header-border-width: 6px;
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-bg:;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: 6px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1150;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal-content {
    --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 1.4rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-color: black;
    --bs-modal-bg: #fff;
    --bs-modal-border-color: black;
    --bs-modal-border-width: 1px;
    --bs-modal-border-radius: var(--bs-border-radius-lg);
    --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - 6px);
    --bs-modal-header-padding-x: 1.4rem;
    --bs-modal-header-padding-y: 1.4rem;
    --bs-modal-header-padding: 1.4rem 1.4rem;
    --bs-modal-header-border-color: #dee2e6;
    --bs-modal-header-border-width: 1px;
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-bg:;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: 1px;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: black;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid #dee2e6;
    border-radius: 5px;
    outline: 0;
}

.input-group {
    width: auto;
    /*padding-top: 5px;*/
}

.form-control {
    border-radius: var(--bs-border-radius) !important;
}

.col-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
    .jumbotron {
        padding: 4rem 2rem;
    }
}

.jumbotron {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-color: #e9ecef;
    border-radius: .3rem;
}

.form-group {
    margin-bottom: 1rem;
}

a {
    color: #2526AC;
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    color: #2526AC;
    text-decoration: underline;
}

.nav-item > a:hover {
    text-decoration: none !important;
}

a.dropdown-item:hover {
    text-decoration: none !important;
}

.btn:hover {
    text-decoration: none;
}

.navbar-brand:focus, .navbar-brand:hover {
    text-decoration: none;
}

/* Signed-in user greeting in the navbar, sitting beside the Casepoint logo:
   the greeting text ("Hello [Name]" over the display name) with a brand-blue
   circle avatar (echoing the "m" in the mLINQS logo) to its right. */
.user-greeting {
    display: flex;
    align-items: center;
}

/* Space between the greeting group and the Casepoint logo that follows it. */
.user-greeting-logo {
    margin-left: 40px;
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background-color: #B4DCFF; /* instruction blue */
    color: #2526AC; /* brand blue */
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 10px;
    text-transform: uppercase;
}

.user-greeting-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: right;
}

.user-greeting-hello {
    color: #6c757d;
    font-weight: 600;
}

.user-greeting-name {
    color: #6c757d;
    font-size: 0.85rem;
}