/*
    Over-ride any of the styles defined in the product here.
    Included in the stylesheets of the product.
 */

.page-header {
    padding-bottom: 9px;
    margin-top: 20px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0px;
    border-bottom: 0px;
}

.menu-item {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-bottom: 5px;
}

.menu-item a:hover {
    text-decoration: none;
}

.flex-link {
    display: flex !important;
    align-items: center !important;
}

.flex-link .fas {
    margin-right: 5px !important;
}

.home-page-panel {
    border: 0;
    box-shadow: none;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 50px;
    background-color: white !Important;
}

.home-page-menu-panel {
    border: 0;
    box-shadow: none;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 30px;
    background-color: white !Important;
}

.panel {
    border: 1px solid rgba(0, 0, 0, 0.125);
    box-shadow: none;
}

.icsynergy-field .panel {
    border: 1px solid lightgrey;
}


.table > thead > tr > th, .table > thead > tr > td {
    border: 0;
    box-shadow: none;
}

body {
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #F5F5F5;
}

.flex-container {
    /* Need to mark this as important to override BS3 styles */
    display: flex !important;
    align-items: center !important;
}

.flex-container .fa-caret-down {
    position: relative;
    top: 2px;
}

.navbar-default {
    border-bottom: none;
    box-shadow: none;
}

/* Displays the logo in the top-left corner. */
#navbar-logo {
    background-image: url("/portal/images/hss-monolith-logo-a67d22b87cac0a7f167382dd0023d4c9.png");
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 5px;
    width: 500px;
    height: 50px;
    min-width: 500px;
    min-height: 50px;
}

#header-label {
    margin-left: 50px;
}


.navbar-wrapper .navbar-nav > li > a:hover {
    color: lightblue !Important;
}

.navbar-wrapper .navbar-nav > li > form > button:hover {
    color: lightblue !Important;
    text-decoration: none !Important;
}

.ics-header .navbar-header {
    min-height: 60px;
}

.navbar-title {
    margin-top: 0px;
    width: 375px;
}

.navbar-brand {
    color: #002c4e !important;
}

.navbar-brand:hover {
    color: #4682b4 !important;
}

#networkAccountsParentDiv {
    width: auto;
}

#networkAccountsNavDiv {
    width: auto;
}

.networkAccountsParentGroup {
    clear: none;
}

.networkAccountsFieldGroup .dl-horizontal dt {
    max-width: 135px;
}

.networkAccountsFieldGroup .dl-horizontal dd {
    margin-left: 150px;
}

.networkAccountsAccountGroup {
    float: none;
}

.networkAccountsSelectedInput {
    border: 4px solid deepskyblue;
}

.networkAccountsHeader {
    padding-top: 15px;
}

.accountsPagePanel {
    width: 950px;
}

.accountsPage .dl-horizontal dt {
    width: 260px;
}

.accountsPage .dl-horizontal dd {
    margin-left: 280px;
}

#returnToTopButton {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

.break {
    display: inline-block;
}

.training-popover-box {
    width: 450px;
    height: 375px;
    overflow-y: scroll;
    position: relative
}

.training-popover-box-wrap {
    word-wrap: break-word;
}

/* ── User Expansion Popover ─────────────────────────────────────────── */
.user-expansion-popover .dl-horizontal dd {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* buttons */
.user-expansion-popover .text-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.user-expansion-popover .text-center .btn {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: #3a6d9a;
    font-size: 12px;
    margin-top: 0 !important;
    padding: 4px 12px;
}

.user-expansion-popover .text-center .btn + .btn {
    border-left: 1px solid #c8d8e6;
}

.user-expansion-popover .text-center .btn:hover,
.user-expansion-popover .text-center .btn:focus {
    background: none;
    box-shadow: none;
    color: #1a3a5c;
    text-decoration: underline;
}


/* ── Pending Manual Action: User/Requester chips ─────────────────────────── */
.workitem-user-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding-left: 0;
    margin-top: 12px;
    margin-bottom: 12px;
}

.workitem-user-meta li {
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 6px 12px;
    background-color: #f8f9fa;
    border-left: 3px solid #5b9bd5;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
}


@media (min-width: 768px) {
    .workitem-take-action-row {
        cursor: pointer;
    }

    .workitem-request-chip {
        background-color: #f3f8fc;
        border: 1px solid #c7dced;
        border-radius: 4px;
        color: #24557a;
        display: inline-block;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        padding: 4px 8px;
    }

    .workitem-take-action-row:hover > td {
        background-color: #eef6fd;
    }

    .workitem-take-action-row:hover .workitem-request-chip {
        background-color: #e4f0f8;
        border-color: #9fc2dd;
    }
}

.workitem-open-tab-link {
    color: #6f8fa8;
    display: inline-block;
    font-size: 12px;
    margin-left: 6px;
    text-decoration: none;
    vertical-align: middle;
}

.workitem-open-tab-link:hover,
.workitem-open-tab-link:focus {
    color: #28587d;
    text-decoration: none;
}

.workitem-mobile-action-btn {
    margin-top: 8px;
}

option:disabled {
    color: #cdb7b7 !important;
    font-style: italic !important;
}

/* IAM-6168: Wrap the Email To field within the dialog */
.modal-body .list-group .list-group-item p {
    word-wrap: break-word;
}


/* Sky Dark Customizations */
a {
    color: #28587d;
}
.label-primary {
    background-color: #28587d;
}
.label-info {
    background-color: #c7eafb;
    color: #28587d;
}
.btn-primary {
    background-image: linear-gradient(to bottom,#002c4e 0,#265a88 100%);
    border-color: #002c4e;
}
/* Darken Bootstrap 3 Secondary Button */
.btn-default {
    background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #d8d8d8 100%);
    background-image: -o-linear-gradient(top, #f0f0f0 0%, #d8d8d8 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#d8d8d8));
    background-image: linear-gradient(to bottom, #f0f0f0 0%, #d8d8d8 100%);
    border-color: #b0b0b0;
}

.btn-default:hover,
.btn-default:focus {
    background-color: #d8d8d8;
    background-position: 0 -15px;
    border-color: #a3a3a3;
}

.btn-default:active {
    background-image: none;
    background-color: #d8d8d8;
    border-color: #a3a3a3;
}

/* Custom CSS to darken the selected default button in a button group */

.btn-group .btn-default.active {
    background-image: none; /* This is the default for active state, so we'll keep it */
    background-color: #d8d8d8; /* The slightly darker background */
    border-color: #9c9c9c; /* The slightly darker border */

    /* Keep the original inset shadow for the "pressed" effect */
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.btn-group .btn-default.active:hover,
.btn-group .btn-default.active:focus {
    /* Apply the same styles on hover/focus to maintain consistency */
    background-color: #d8d8d8;
    border-color: #9c9c9c;
}

/* Custom CSS to increase the top curve of panels */

/* Increase the border radius for the main panel container */
.panel {
    border-radius: 6px; /* Adjust this value to control the overall corner size */
}

/* Override the border radius specifically for the top panel heading */
.panel-heading {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/* ── User search input: cap width on mobile (style.css hardcodes 500px) ─────── */
@media screen and (max-width: 767px) {
    .findUserInput,
    #findApplicationInput {
        width: 100% !important;
        max-width: 100%;
    }
}

/* ── Status viewer filter panel: force open on tablet and above ─────────────── */
@media screen and (min-width: 768px) {
    #status-viewer-filters-collapse {
        display: block !important;
    }
    /* Hide the mobile-only toggle chevron on desktop */
    .status-viewer-filter-toggle {
        display: none !important;
    }
}
/* Rotate chevron when the filter panel is open */
.status-viewer-filter-toggle[aria-expanded="true"] .glyphicon {
    transform: rotate(180deg);
}
.status-viewer-filter-toggle .glyphicon {
    transition: transform 0.2s ease;
}

/* ── page-header with pull-right buttons: prevent overlap on mobile ─────────── */
/*
 * Bootstrap's pull-right floats the button group right inside the h1. On narrow
 * screens the h1 text and the buttons can't share one line, so the buttons drop
 * below the text but remain inside the float context — they then overlap the
 * panel below because the h1's height only accounts for the text.
 * Solution: on mobile switch to a flex column layout so buttons stack cleanly.
 */
.page-header-with-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}
.page-header-with-buttons .page-header-buttons {
    margin-left: auto;
}

/* ── Mobile header — placed last so no earlier rule can win the cascade ─────── */
@media screen and (max-width: 767px) {

    h1 {
        font-size: 24px;
    }

    /*
     * Bootstrap un-floats .navbar-right below 768 px, so header items stack
     * vertically by default. Use flexbox on the container to force logo + icons
     * onto a single row regardless of float state.
     */
    .ics-header .container-fluid {
        display: flex;
        align-items: center;
        padding-top: 8px;
        padding-bottom: 8px;
        min-height: 70px;
    }

    /* Let the logo header grow to fill all space left by the icon buttons */
    .ics-header .navbar-header {
        float: none !important;
        min-height: 0 !important;
        flex: 1;
        overflow: hidden;
    }

    /* Logo: fill the full width of its flex container; clear desktop min-* constraints.
     * background-size: contain keeps the full logo visible, left-aligned.
     * ---
     * Compact mobile logo swapped in below.
     */
    #navbar-logo { background-image: url("/portal/images/hss-monolith-logo-mobile-1cbab81533fcdacbedac773d680190c2.png"); }
    #navbar-logo {
        float: none;
        display: block;
        width: 100%;
        min-width: 0 !important;
        height: 54px;
        min-height: 0 !important;
        margin-top: 0;
        background-position: left center;
    }

    /* Hide the environment label on mobile to save space */
    .ics-header .navbar-text {
        display: none;
    }

    /* Push the icon buttons to the far right of the flex row */
    .ics-header .navbar-nav.navbar-right {
        float: none !important;
        margin-left: auto;
        margin-right: 0;
        display: flex;
        align-items: center;
    }

    /* Keep each item inline within the flex nav */
    .ics-header .navbar-nav > li {
        float: none !important;
        display: inline-flex;
    }

    /* icamp-style.css adds margin-top: 8px to align the form on desktop;
       on mobile the flex row handles alignment so the margin just pushes it down */
    .ics-header .navbar-default .navbar-nav > li > form {
        margin-top: 0;
    }

    /* Hide the logged-in user section on mobile, but keep the other header actions */
    .ics-header .header-authenticated-user-item,
    .ics-header .header-authenticated-user-item > a,
    .ics-header #header-authenticated-user,
    .ics-header .header-btn-label {
        display: none !important;
    }

    /* Pin the dark background; the <nav> lacks Bootstrap's .navbar class so its
       clearfix pseudo-elements do not fire, which can expose a light background */
    .ics-header .navbar-default {
        background-color: #002c4e !important;
    }

    /* Force white text — defeats .btn-link and the global a { color } rule */
    .ics-header .navbar-default .navbar-nav > li > a,
    .ics-header .navbar-default .navbar-nav > li > form > button {
        color: white !important;
        padding: 10px 8px;
    }
}

/* ── Request Access: user-type selector cards ────────────────────────────────── */
.request-type-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.request-type-card {
    flex: 1 1 130px;
    max-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 14px 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #555;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s, box-shadow 0.15s;
    /* Reset browser button defaults */
    font-family: inherit;
    font-size: inherit;
    line-height: 1.42857143;
}

.request-type-card:hover,
.request-type-card:focus {
    border-color: #00639C;
    background: #f0f7ff;
    color: #00639C;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 99, 156, 0.15);
    outline: none;
}

.request-type-card.active,
.request-type-card.active:hover,
.request-type-card.active:focus {
    border-color: #00639C;
    background: #00639C;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 99, 156, 0.25);
    text-decoration: none;
}

.request-type-card-icon {
    font-size: 28px;
    margin-bottom: 2px;
}

.request-type-card-title {
    display: block;
    font-weight: 600;
    font-size: 14px;
}

.request-type-card-desc {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    opacity: 0.75;
}

.request-type-card.active .request-type-card-desc {
    opacity: 0.9;
}

@media (max-width: 767px) {
    .request-type-card {
        flex: 1 1 calc(50% - 6px);
        max-width: calc(50% - 6px);
    }
}

/* ── Multi-request: suppress leading <br> in user search widget so it top-aligns with the selected users panel */
#search-existing .widget-wrapper > br:first-child {
    display: none;
}

/* ── Back navigation link (breadcrumb-style) ─────────────────────────────────── */
.back-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #28587d;
    margin-bottom: 4px;
    text-decoration: none;
}

.back-nav-link:hover,
.back-nav-link:focus {
    color: #00639C;
    text-decoration: underline;
}