/*
 * Omega.Staffing reversible dark-mode layer.
 * The existing light theme remains authoritative unless data-staffing-theme="dark"
 * is present on the html element.
 */

.staffing-theme-toggle {
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    color: #05264e;
    background: transparent;
    border: 1px solid rgba(5, 38, 78, .14);
    border-radius: 50px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.staffing-theme-toggle:hover,
.staffing-theme-toggle:focus-visible {
    color: #3c65f5;
    border-color: #3c65f5;
    outline: none;
}

.staffing-theme-icon-light {
    display: none;
}

.staffing-theme-label {
    display: none;
}

[data-staffing-theme="dark"] {
    color-scheme: dark;
}

[data-staffing-theme="dark"] body {
    color: #aebbd0;
    background: #0d1422;
}

[data-staffing-theme="dark"] h1,
[data-staffing-theme="dark"] h2,
[data-staffing-theme="dark"] h3,
[data-staffing-theme="dark"] h4,
[data-staffing-theme="dark"] h5,
[data-staffing-theme="dark"] h6,
[data-staffing-theme="dark"] a,
[data-staffing-theme="dark"] label,
[data-staffing-theme="dark"] .form-label,
[data-staffing-theme="dark"] .job-search-field-label {
    color: #eef4ff;
}

[data-staffing-theme="dark"] a:hover,
[data-staffing-theme="dark"] a:focus,
[data-staffing-theme="dark"] .text-link,
[data-staffing-theme="dark"] .job-employer,
[data-staffing-theme="dark"] .job-salary-amount {
    color: #7898ff;
}

[data-staffing-theme="dark"] .navbar,
[data-staffing-theme="dark"] .navbar.fixed-top,
[data-staffing-theme="dark"] .home-3 .navbar,
[data-staffing-theme="dark"] .home-4 .navbar,
[data-staffing-theme="dark"] .mobile-bottom-nav,
[data-staffing-theme="dark"] .navbar-collapse,
[data-staffing-theme="dark"] .navbar-collapse.collapse {
    background: #121c2d;
}

[data-staffing-theme="dark"] .navbar .nav-item .nav-link,
[data-staffing-theme="dark"] .navbar.fixed-top .nav-item .nav-link,
[data-staffing-theme="dark"] .navbar-toggler-btn-icon,
[data-staffing-theme="dark"] .navbar.fixed-top .navbar-toggler-btn-icon,
[data-staffing-theme="dark"] .mobile-menu-link,
[data-staffing-theme="dark"] .mobile-nav-heading,
[data-staffing-theme="dark"] .mobile-nav-close,
[data-staffing-theme="dark"] .staffing-theme-toggle {
    color: #eef4ff;
}

[data-staffing-theme="dark"] .navbar .nav-item .nav-link:hover,
[data-staffing-theme="dark"] .navbar .nav-item .nav-link.active {
    color: #7898ff !important;
}

/* Use the purpose-built white wordmark wherever the full Omega logo appears. */
[data-staffing-theme="dark"] .navbar-brand img,
[data-staffing-theme="dark"] .footer-logo img,
[data-staffing-theme="dark"] .login-header img {
    content: url("/assets/img/logo/omegalogo-white.png");
}

[data-staffing-theme="dark"] .navbar .dropdown-menu,
[data-staffing-theme="dark"] .dropdown-menu,
[data-staffing-theme="dark"] .user-profile-card {
    color: #c5d0e1;
    background: #172235;
    border-color: #2a3850;
}

[data-staffing-theme="dark"] .navbar .nav-item .dropdown-menu .dropdown-item,
[data-staffing-theme="dark"] .dropdown-item {
    color: #dce6f5;
}

[data-staffing-theme="dark"] .dropdown-item:hover,
[data-staffing-theme="dark"] .dropdown-item:focus {
    color: #fff;
    background: #22314a;
}

[data-staffing-theme="dark"] .mobile-bottom-nav {
    border-color: #2a3850;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
}

[data-staffing-theme="dark"] .mobile-nav-heading,
[data-staffing-theme="dark"] #main_nav .nav-item {
    border-color: #2a3850;
}

[data-staffing-theme="dark"] .mobile-nav-close {
    background: #22314a;
}

[data-staffing-theme="dark"] .site-breadcrumb,
[data-staffing-theme="dark"] .login-area,
[data-staffing-theme="dark"] .job-list,
[data-staffing-theme="dark"] .job-area,
[data-staffing-theme="dark"] .candidate-area,
[data-staffing-theme="dark"] .user-profile-area,
[data-staffing-theme="dark"] .contact-area,
[data-staffing-theme="dark"] .faq-area {
    background-color: #0d1422;
}

/* Public page headings use more-specific light-theme selectors in style.css. */
[data-staffing-theme="dark"] .site-breadcrumb .breadcrumb-title,
[data-staffing-theme="dark"] .site-breadcrumb .breadcrumb-menu li,
[data-staffing-theme="dark"] .site-breadcrumb .breadcrumb-menu li a,
[data-staffing-theme="dark"] .site-breadcrumb .breadcrumb-menu li::before {
    color: #eef4ff !important;
}

[data-staffing-theme="dark"] .site-breadcrumb .breadcrumb-menu li.active {
    color: #7898ff !important;
}

/* The light breadcrumb wave is retained for the light theme. Dark mode uses
   the same geometry with a low-contrast navy palette. */
[data-staffing-theme="dark"] .site-breadcrumb .hero-shape-1 {
    content: url("/assets/img/shape/03-dark.svg");
}

[data-staffing-theme="dark"] .search-form-wrapper,
[data-staffing-theme="dark"] .search-form .nice-select .list,
[data-staffing-theme="dark"] .job-item,
[data-staffing-theme="dark"] .job-sidebar,
[data-staffing-theme="dark"] .job-sort,
[data-staffing-theme="dark"] .candidate-item,
[data-staffing-theme="dark"] .user-profile-sidebar,
[data-staffing-theme="dark"] .contact-form,
[data-staffing-theme="dark"] .contact-content,
[data-staffing-theme="dark"] .quote-content,
[data-staffing-theme="dark"] .blog-item,
[data-staffing-theme="dark"] .partner-item,
[data-staffing-theme="dark"] .team-item,
[data-staffing-theme="dark"] .faq-area .accordion-item,
[data-staffing-theme="dark"] .card,
[data-staffing-theme="dark"] .modal-content,
[data-staffing-theme="dark"] .offcanvas {
    color: #b9c5d8;
    background: #172235;
    border-color: #2a3850;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .28);
}

/* Public service and industry cards. Bootstrap's bg-body-tertiary utility is
   important, so the theme override must be important as well. */
[data-staffing-theme="dark"] .blog-item.bg-body-tertiary,
[data-staffing-theme="dark"] .widget,
[data-staffing-theme="dark"] .category-list {
    color: #b9c5d8 !important;
    background: #172235 !important;
    border-color: #2a3850 !important;
}

[data-staffing-theme="dark"] .blog-item-info h5 a,
[data-staffing-theme="dark"] .blog-item-info p,
[data-staffing-theme="dark"] .blog-item-meta ul li,
[data-staffing-theme="dark"] .blog-item-meta ul li a,
[data-staffing-theme="dark"] .widget .widget-title,
[data-staffing-theme="dark"] .widget .category-list a,
[data-staffing-theme="dark"] .widget .category-list a span {
    color: #dce6f5 !important;
}

[data-staffing-theme="dark"] .blog-item-meta ul,
[data-staffing-theme="dark"] .widget .category-list a {
    border-color: #34445f !important;
}

/* Homepage live-job category cards are their own component and must not keep
   the light surface when the rest of the landing page is dark. */
[data-staffing-theme="dark"] .category-item {
    color: #dce6f5 !important;
    background: #172235 !important;
    border-color: #2f405c !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

[data-staffing-theme="dark"] .category-item h6 {
    color: #f4f7fc !important;
}

[data-staffing-theme="dark"] .category-item p {
    color: #aebbd0 !important;
}

[data-staffing-theme="dark"] .category-item .category-icon {
    color: #7898ff !important;
    background: #22314a !important;
}

[data-staffing-theme="dark"] .category-item:hover {
    background: #1c2a40 !important;
    border-color: #5478f0 !important;
}

[data-staffing-theme="dark"] .category-item:hover h6,
[data-staffing-theme="dark"] .category-item:hover p {
    color: #ffffff !important;
}

[data-staffing-theme="dark"] .category-item:hover .category-icon {
    color: #ffffff !important;
    background: #3c65f5 !important;
}

/* Testimonials use a light-only surface and muted copy in the base template.
   Give the component its own dark surface so the quote and author remain
   readable without altering its carousel layout. */
[data-staffing-theme="dark"] .testimonial-item {
    color: #c5d0e1 !important;
    background: #172235 !important;
    border: 1px solid #2f405c;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

[data-staffing-theme="dark"] .testimonial-quote p,
[data-staffing-theme="dark"] .testimonial-author-info p {
    color: #b9c5d8 !important;
}

[data-staffing-theme="dark"] .testimonial-author-info h5 {
    color: #f4f7fc !important;
}

[data-staffing-theme="dark"] .testimonial-quote-icon {
    color: #7898ff !important;
    opacity: .14;
}

/* Candidate account surfaces shown in the dashboard and messaging pages. */
[data-staffing-theme="dark"] .user-profile-sidebar-list li a,
[data-staffing-theme="dark"] .user-profile-sidebar-list li a i,
[data-staffing-theme="dark"] .user-profile-sidebar-top h4,
[data-staffing-theme="dark"] .user-profile-card-title,
[data-staffing-theme="dark"] .user-notification-info p,
[data-staffing-theme="dark"] .message-by-content h5,
[data-staffing-theme="dark"] .profile-message-inbox h6 {
    color: #dce6f5 !important;
}

[data-staffing-theme="dark"] .user-profile-sidebar-list li a:hover,
[data-staffing-theme="dark"] .user-profile-sidebar-list li a:focus,
[data-staffing-theme="dark"] .user-profile-sidebar-list li a:hover i,
[data-staffing-theme="dark"] .user-profile-sidebar-list .active,
[data-staffing-theme="dark"] .user-profile-sidebar-list .active i {
    color: #fff !important;
}

[data-staffing-theme="dark"] .user-profile .bg-white,
[data-staffing-theme="dark"] .profile-message-inbox,
[data-staffing-theme="dark"] .message-content,
[data-staffing-theme="dark"] .message-reply.bg-body {
    color: #c5d0e1 !important;
    background: #172235 !important;
    border-color: #34445f !important;
}

[data-staffing-theme="dark"] .user-profile .text-black,
[data-staffing-theme="dark"] .user-profile .text-dark,
[data-staffing-theme="dark"] .message-description p {
    color: #eef4ff !important;
}

[data-staffing-theme="dark"] .profile-message-inbox ul li,
[data-staffing-theme="dark"] .profile-message-inbox ul li a,
[data-staffing-theme="dark"] .message-reply {
    border-color: #34445f !important;
}

[data-staffing-theme="dark"] .profile-message-inbox ul li:hover,
[data-staffing-theme="dark"] .profile-message-inbox ul li.message-active {
    background: #22314a !important;
}

[data-staffing-theme="dark"] .message-item .message-description,
[data-staffing-theme="dark"] .message-item.me .message-description {
    color: #eef4ff !important;
    background: #22314a !important;
}

[data-staffing-theme="dark"] .message-item .message-description::before,
[data-staffing-theme="dark"] .message-item.me .message-description::before {
    border-color: transparent #22314a transparent transparent !important;
}

/* Candidate profile and resume values use fixed dark text in the original
   light theme. Preserve their structure while providing dark-mode contrast. */
[data-staffing-theme="dark"] .profile-bio,
[data-staffing-theme="dark"] .profile-bio p,
[data-staffing-theme="dark"] .profile-info-list li,
[data-staffing-theme="dark"] .profile-job-content h6,
[data-staffing-theme="dark"] .profile-job-content p,
[data-staffing-theme="dark"] .profile-job-list li {
    color: #dce6f5 !important;
}

[data-staffing-theme="dark"] .profile-info-list li span {
    color: #b9c5d8 !important;
}

[data-staffing-theme="dark"] .profile-skill a {
    color: #dce6f5 !important;
    background: #22314a !important;
    border: 1px solid #34445f;
}

[data-staffing-theme="dark"] .profile-skill a:hover,
[data-staffing-theme="dark"] .profile-skill a:focus {
    color: #fff !important;
    background: #3c65f5 !important;
    border-color: #3c65f5;
}

/* Bootstrap's table-light variant otherwise leaves unread notifications as a
   white strip inside the dark candidate portal. */
[data-staffing-theme="dark"] .user-profile-card .table > tbody > tr.table-light > * {
    --bs-table-bg: #22314a;
    --bs-table-color: #eef4ff;
    color: #eef4ff !important;
    background-color: #22314a !important;
    border-color: #34445f !important;
}

[data-staffing-theme="dark"] .user-profile-card .table > tbody > tr.table-light .text-muted {
    color: #b9c5d8 !important;
}

/* Notification badges need deliberate surfaces in both themes. Bootstrap's
   light badge becomes nearly invisible against the dark table background. */
.notification-category-badge {
    color: #294d91;
    background: #eaf0ff;
    border: 1px solid #c8d6f7;
}

[data-staffing-theme="dark"] .notification-category-badge {
    color: #dbe6ff !important;
    background: #2b426d !important;
    border-color: #5274b5 !important;
}

[data-staffing-theme="dark"] #notification-table tbody .text-muted,
[data-staffing-theme="dark"] #notification-table tbody p {
    color: #b9c5d8 !important;
}

[data-staffing-theme="dark"] #notification-table .badge-success {
    color: #a9f3df !important;
    background: #155b54 !important;
}

[data-staffing-theme="dark"] #notification-table .badge-warning {
    color: #dbe4ff !important;
    background: #354fb4 !important;
}

#notification-table .notification-open-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
}

#notification-table .notification-state-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 38px;
    padding: 0 .65rem;
    white-space: nowrap;
}

/* Authentication pages should read as one coherent dark card, not a light card
   containing dark fields. This also covers registration and password flows. */
[data-staffing-theme="dark"] .login-form {
    color: #c5d0e1;
    background: #172235;
    border: 1px solid #2a3850;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .3);
}

[data-staffing-theme="dark"] .login-form .login-header p,
[data-staffing-theme="dark"] .login-form .login-footer p,
[data-staffing-theme="dark"] .login-form .form-check-label,
[data-staffing-theme="dark"] .login-form .form-check-label:not(a) {
    color: #b9c5d8 !important;
}

[data-staffing-theme="dark"] .login-form .login-divider::before,
[data-staffing-theme="dark"] .login-form .login-divider::after {
    border-color: #34445f;
}

[data-staffing-theme="dark"] .login-form .login-divider span,
[data-staffing-theme="dark"] .login-form .custom-alert1 {
    color: #c5d0e1;
    background: #111a2a !important;
    border-color: #34445f !important;
}

/* Job Search has page-scoped light-theme rules rendered after this stylesheet,
   so these deliberate dark-mode overrides are kept explicit. */
[data-staffing-theme="dark"] .job-search-query-card,
[data-staffing-theme="dark"] .job-filter-column,
[data-staffing-theme="dark"] .job-filter-apply {
    background: #172235 !important;
}

[data-staffing-theme="dark"] .job-search-query-card .job-search-field-label,
[data-staffing-theme="dark"] .job-sidebar .form-check-label,
[data-staffing-theme="dark"] .job-sidebar .job-sidebar-title,
[data-staffing-theme="dark"] .popular-search span {
    color: #eef4ff !important;
}

[data-staffing-theme="dark"] .popular-search a,
[data-staffing-theme="dark"] .job-sidebar .nice-select,
[data-staffing-theme="dark"] .job-sidebar .nice-select .current {
    color: #b9c5d8 !important;
}

[data-staffing-theme="dark"] .job-filter-drawer-header {
    border-color: #2a3850 !important;
}

[data-staffing-theme="dark"] .job-filter-drawer-close {
    color: #eef4ff !important;
    background: #22314a !important;
}

[data-staffing-theme="dark"] .form-control,
[data-staffing-theme="dark"] .form-select,
[data-staffing-theme="dark"] .nice-select,
[data-staffing-theme="dark"] textarea,
[data-staffing-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]) {
    color: #eef4ff;
    background-color: #111a2a;
    border-color: #34445f;
}

[data-staffing-theme="dark"] .form-control::placeholder,
[data-staffing-theme="dark"] textarea::placeholder,
[data-staffing-theme="dark"] input::placeholder {
    color: #8998ae;
    opacity: 1;
}

[data-staffing-theme="dark"] .form-control:focus,
[data-staffing-theme="dark"] .form-select:focus,
[data-staffing-theme="dark"] textarea:focus,
[data-staffing-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus {
    color: #fff;
    background-color: #111a2a;
    border-color: #7898ff;
    box-shadow: 0 0 0 3px rgba(120, 152, 255, .16);
}

[data-staffing-theme="dark"] .table,
[data-staffing-theme="dark"] table {
    --bs-table-color: #dce6f5;
    --bs-table-bg: transparent;
    --bs-table-border-color: #2a3850;
    color: #dce6f5;
}

[data-staffing-theme="dark"] .table > :not(caption) > * > *,
[data-staffing-theme="dark"] table th,
[data-staffing-theme="dark"] table td,
[data-staffing-theme="dark"] .job-bottom,
[data-staffing-theme="dark"] .job-sidebar-title {
    border-color: #2a3850;
}

[data-staffing-theme="dark"] .modal-header,
[data-staffing-theme="dark"] .modal-footer,
[data-staffing-theme="dark"] .offcanvas-header,
[data-staffing-theme="dark"] .accordion-button {
    color: #eef4ff;
    background: #172235;
    border-color: #2a3850;
}

[data-staffing-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%);
}

[data-staffing-theme="dark"] footer,
[data-staffing-theme="dark"] .footer-area,
[data-staffing-theme="dark"] .copyright {
    color: #9eacc0;
    background-color: #0a101c;
    border-color: #26344b;
}

[data-staffing-theme="dark"] .footer-social li a i {
    color: #9eb4ff;
    background: #172235;
    border: 1px solid #33445f;
    box-shadow: none;
}

[data-staffing-theme="dark"] .footer-social li a:hover i,
[data-staffing-theme="dark"] .footer-social li a:focus-visible i {
    color: #fff;
    background: #3c65f5;
    border-color: #3c65f5;
}

[data-staffing-theme="dark"] .staffing-theme-icon-dark {
    display: none;
}

[data-staffing-theme="dark"] .staffing-theme-icon-light {
    display: inline-block;
}

/* Home/About counters use fixed light-theme text colors in style.css.
   Give the complete statistic card a deliberate dark surface and restore
   readable contrast without changing the light-theme component. */
[data-staffing-theme="dark"] .counter-box {
    color: #eef4ff;
    background: #172235;
    border-color: #30415e;
    box-shadow: none;
}

[data-staffing-theme="dark"] .counter-box:hover {
    border-color: #557cff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

[data-staffing-theme="dark"] .counter-box .counter,
[data-staffing-theme="dark"] .counter-box .counter-sign {
    color: #f7f9ff;
}

[data-staffing-theme="dark"] .counter-box .title {
    color: #82a0ff;
}

/* The home carousel arrows are white light-theme controls by default.
   Match them to the dark navigation surfaces while retaining the blue cue. */
[data-staffing-theme="dark"] .home-4 .hero-slider.owl-theme .owl-nav [class*=owl-] {
    color: #82a0ff;
    background: #172235;
    border: 1px solid #557cff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .24);
}

[data-staffing-theme="dark"] .home-4 .hero-slider.owl-theme .owl-nav [class*=owl-]:hover,
[data-staffing-theme="dark"] .home-4 .hero-slider.owl-theme .owl-nav [class*=owl-]:focus-visible {
    color: #fff;
    background: #3c65f5;
    border-color: #3c65f5;
    outline: none;
}

/* Apply Now is rendered in its own same-origin window layout. Keep the
   existing structure while matching the selected Staffing theme. */
[data-staffing-theme="dark"] .application-modal-page,
[data-staffing-theme="dark"] .application-modal-page .profile-form,
[data-staffing-theme="dark"] .application-modal-page .user-profile-wrapper {
    color: #dce6f5;
    background: #0d1422;
}

[data-staffing-theme="dark"] .application-modal-page .user-profile-card,
[data-staffing-theme="dark"] .application-modal-page .application-success-card,
[data-staffing-theme="dark"] .application-modal-page .application-success-panel {
    color: #dce6f5;
    background: #172235;
    border-color: #2a3850;
    box-shadow: none;
}

[data-staffing-theme="dark"] .application-modal-page .user-profile-card-title,
[data-staffing-theme="dark"] .application-modal-page .application-success-title,
[data-staffing-theme="dark"] .application-modal-page .application-success-message,
[data-staffing-theme="dark"] .application-modal-page label,
[data-staffing-theme="dark"] .application-modal-page .form-label {
    color: #eef4ff;
}

[data-staffing-theme="dark"] .application-modal-page .user-profile-card-title {
    border-bottom-color: #2a3850;
}

[data-staffing-theme="dark"] .application-modal-page .profile-upload {
    color: #b9c5d8;
    background: #111a2a;
    border-color: #41516d;
}

[data-staffing-theme="dark"] .application-modal-page .profile-upload-wrapper,
[data-staffing-theme="dark"] .application-modal-page .text-muted,
[data-staffing-theme="dark"] .application-modal-page small {
    color: #9eacc0 !important;
}

@media (max-width: 991.98px) {
    .staffing-theme-control {
        display: flex !important;
        width: 100%;
        margin: 18px 0 0;
    }

    .staffing-theme-toggle {
        width: 100%;
        justify-content: flex-start;
        padding: 0 14px;
    }

    .staffing-theme-label {
        display: inline;
    }
}
/* Keep the desktop table, but present each notification as a readable card on phones. */
@media (max-width: 767.98px) {
    /* Match the other candidate panels while leaving room for card borders. */
    .user-profile-card:has(#notification-table) {
        padding: 20px 12px;
    }

    #notification-table,
    #notification-table tbody {
        display: block;
        width: 100%;
    }

    #notification-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    #notification-table tbody .notification-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .55rem .75rem;
        padding: .875rem;
        margin-bottom: .75rem;
        border: 1px solid #dfe7f2;
        border-radius: .75rem;
        background: #fff;
    }

    #notification-table tbody .notification-row.table-light {
        background: #f7faff;
    }

    #notification-table tbody .notification-row[hidden] {
        display: none;
    }

    #notification-table tbody .notification-row > td {
        display: block;
        min-width: 0;
        width: auto;
        padding: 0;
        border: 0;
        background: transparent !important;
        box-shadow: none;
        overflow-wrap: anywhere;
    }

    #notification-table tbody .notification-row > td:first-child {
        display: none;
    }

    #notification-table tbody .notification-row > td:nth-child(2) {
        grid-column: 1 / -1;
    }

    #notification-table tbody .notification-row > td:nth-child(3) {
        grid-column: 1;
    }

    #notification-table tbody .notification-row > td:nth-child(4) {
        grid-column: 1 / -1;
        font-size: .875rem;
    }

    #notification-table tbody .notification-row > td:nth-child(5) {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
    }

    #notification-table tbody .notification-row > td:nth-child(6) {
        grid-column: 1 / -1;
        padding-top: .65rem;
        border-top: 1px solid #e8edf5;
    }

    #notification-table tbody .notification-row > td:nth-child(6) .d-flex {
        flex-wrap: wrap;
    }

    #notification-table tbody tr:not(.notification-row) {
        display: block;
    }

    #notification-table tbody tr:not(.notification-row) > td {
        display: block;
        width: 100%;
    }

    [data-staffing-theme="dark"] #notification-table tbody .notification-row {
        background: #1f2c42;
        border-color: #344865;
    }

    [data-staffing-theme="dark"] #notification-table tbody .notification-row.table-light {
        background: #22314a;
    }

    [data-staffing-theme="dark"] #notification-table tbody .notification-row > td:nth-child(6) {
        border-top-color: #344865;
    }
}

/* Keep breadcrumb headings clear of the compact header on phones and tablets. */
@media (max-width: 991.98px) {
    body.home-4 .site-breadcrumb:not(.pt-3) {
        justify-content: flex-start;
        padding-top: 112px !important;
        padding-bottom: 48px !important;
    }

    body.home-4 .site-breadcrumb:not(.pt-3) .breadcrumb-title {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body.home-4 .site-breadcrumb + .py-120,
    body.home-4 .site-breadcrumb + .pt-120 {
        padding-top: 64px !important;
    }

    body.home-4 .site-breadcrumb + .job-list {
        padding-top: 48px !important;
    }

    body.home-4 .site-breadcrumb + .locations-page .locations-directory {
        padding-top: 64px;
    }
}

@media (max-width: 575.98px) {
    body.home-4 .site-breadcrumb:not(.pt-3) {
        padding-top: 96px !important;
    }
}