/* NON-CUSTOMIZED STYLES */

/* BOOSTRAP OVERRIDES */
body {
    line-height: 1.25;
    color: #282011;
    font-size: 0.95rem;
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.modal-content, .form-control, .input-group-text, .btn {
    border-radius: 0;
}
.btn {
    font-size: 0.95rem;
}
.btn:disabled {
    cursor: not-allowed;
}
.modal-footer {
    display: block;
}
.modal-footer form {
    margin: 0;
}
.modal-footer input.btn, .modal-footer button.btn {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
}

/* CHOSEN OVERRIDES */
.chosen-container {
    width: 100% !important;
    border: 1px solid #ced4da;
    font-size: inherit;
}

.chosen-container .chosen-choices {
    padding: 0.375rem 0.75rem;
    border: 0;
}

.chosen-container-multi .chosen-choices li.search-field input[type=text] {
    color: #495057;
}

/* JQKEYBOARD OVERRIDES */
#jqk-toggle-btn, #jq-keyboard {
    display: none;
    z-index: 2000;
}
#jq-keyboard {
    position: fixed;
    border-bottom: 1px;
    border-radius: 0;
}
#jq-keyboard.show {
    min-width: 620px;
}
.jqk-lang-btn {
    visibility: hidden;
}
#jq-keyboard button.jqk-btn {
    border-bottom: 0;
    border-radius: 0;
}

/* RE-USEABLE COMPONENTS */

/* whole page containers */
.centerWholePageContentContainer {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}
.ilsBodyWrapper {
    margin-top: 0.5rem;
    max-width: none;
    width: 100%;
}

/* background colors */
.primaryColorBg {
    background-color: #313131;
    color: #00516E;
    font-weight: bold;
}
.secondaryColorBg {
    background-color: #0183c1;
}
.neutralColorBg {
    background-color: #CCCCCC;
}

/* buttons */
.secondaryBtn,
.secondaryBtn:focus {
    background-color: #0a8cbf;
    color:white;
    font-weight: bold;
    border: none;
}

.secondaryBtn:hover {
    background-color: #0a8cbf; /* #0877a3 is slightly darker */
    color: #ffffff;
    font-weight: bold;
}
.secondaryBtn:active {
    background-color: #065f82;  /* darker than hover */
    color: #ffffff;
    font-weight: bold;
}
.neutralBtn, .neutralBtn:focus {
    background-color: #CCCCCC;
}
.neutralBtn:hover {
    background-color: #D6D6D6;
}
.neutralBtn:active {
    background-color: #C1C1C1;
}
.warningBtn, .warningBtn:focus {
    background-color: #B44A3C;
    color: #FFFFFF;
}
.warningBtn:hover {
    background-color: #C05545;
    color: #FFFFFF;
}
.warningBtn:active {
    background-color: #A44537;
    color: #FFFFFF;
}
.roundBtn {
    padding: 0.375rem;
    border-radius: 50%;
}
.courseLaunch {
    width: 6rem;
}
.exapandMobile {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
}

/* titles */
.ilsPageTitle {
    margin: 1rem 0;
    font-size: 1.5rem;
}

/* messages */
.errorMessage {
    color: #B44A3C;
    font-weight: 700;
}

/* passwords */
.passwdValid:after, .minPasswdSuccess, .passwdMatch {
    color: #008000;
}
.passwdInvalid:after, .minPasswdFail, .passwdNoMatch {
    color: #ff0000;
}
.passwdValid:after {
    content: '✔';
    font-weight: bold;
}
.passwdInvalid:after {
    content: '⦻';
    font-weight: bold;
}
.passwdNoMatch, .passwdMatch {
    margin-top: 0.5rem;
    text-align: right;
}
.minPasswdSuccess, .minPasswdFail {
    font-weight: 700;
}
.minPasswordReqList {
    margin-bottom: 1.5rem;
    padding-inline-start: 0;
    list-style-type: none;
}
.minPasswordReqList .passwdValid {
    margin-right: 0.74rem;
}
.minPasswordReqList .passwdInvalid {
    margin-right: 0.5rem;
}

/* sections */
.ilsSection {
    margin-bottom: 1rem;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
}
.ilsSectionTitle {
    padding-left: 0.25em;
    background-image: linear-gradient(to right, #282011, #282011);
    color: #FFFFFF;
    font-weight: 700;
    text-transform: uppercase;
}
.ilsSectionTitle h2 {
    margin-bottom: 0;
    font-size: inherit;
    font-weight: inherit;
}
.ilsSectionHeader {
    padding: 0.5rem 1rem;
    align-items: center;
}
.ilsSectionHeaderChooseAction {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
}
.ilsSectionBody {
    padding: 1rem;
}
.ilsSectionSubSection h3 {
    margin-bottom: 1rem;
    font-size: 1.15rem;
    font-weight: 700;
}
.ilsSectionSubSection hr {
    margin-top: 2rem;
}
.ilsSectionSubContentContainer {
    margin-top: 1rem;
    padding: 1rem;

}

/* tables */
.mobileTableContainer {
    overflow-x: auto;
}
.ilsTable {
    margin: 0;
}
.ilsTable th {
    background-color: #282011;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
}

.ilsTable th a {
    color: #FFFFFF;
}
.ilsTable th a:hover {
    color: #FFFFFF;
}
.ilsTable th a:active {
    color: #FFFFFF;
}
.ilsTable td {
    vertical-align: middle;
    border: 1px solid #CCCCCC;
    color: #666666;
}
.ilsTableEndDate {
    min-width: 112px;
}
.ilsTableReasonTd {
    font-size:12px; font-style: italic;
}
.ilsTableReasonTh {
    min-width: 110px !important;
}

.checkboxCol {
    width: 3rem;
    text-align: center;
}
.noCol, .dateCol, .scoreCol {
    width: 6rem;
}
.noData {
    padding: 1rem;
    text-align: center;
}

/* pagination */
.ilsPagination {
    margin-bottom: 1rem;
    align-items: center;
}
.ilsPagination .pageLinks {
    text-align: right;
}
.ilsPagination .goToPage {
    margin-top: 1rem;
}
.ilsPagination .goToPageLabel {
    align-self: center;
    margin-right: 0.5rem;
}
.ilsPagination .goToPageForm {
    justify-content: end;
}
.ilsPagination .goToPageInput {
    width: 5rem;
}

/* forms */
.required {
    color: #FF0000;
    font-weight: 700;
}
.descCounter {
    margin-top: 0.25rem;
    text-align: right;
    color: #CCCCCC;
}
.descCounterWarning {
    color: #FF0000;
}

/* COMPONENTS */

/* header */
.headerButtons {
    padding: 1rem 0;
    align-items: center;
}
.headerButtonsLeft {
    display: flex;
    align-items: center;
}
.headerButtonsLeft a {
    margin-right: 0.5rem;
}
.headerButtonsRight {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.headerButtonsRight a {
    margin-left: 0.5rem;
}
.headerBannerRow {
    display: flex;
    flex-direction: row;
}
.headerLogo {
    background-color: #FFFFFF;
}
.headerLogo img {
    margin: 0.5rem;
    max-width: 100px;
    max-height: 60px;
}
.headerBanner {
    display: flex;
    align-items: center;
    flex-grow: 1;

}
.headerBanner h2 {
    margin: 0 0 0 0.5rem;
    font-size: 1rem;
}

/* User Management header block — title, messages and search sit at the bottom
   of the global header. The title lines up with My Courses (which also renders
   its title inside the sticky header) and the block aligns with the body
   content (matches the .appLayout 340px sidebar offset). */
.userMgmtHeaderBlock .pageHeaderRow {
    margin: 0;
    padding-bottom: 12px;
}
.addUserBtn {
    padding: 7px 20px;
    border: 1.5px solid #0a8cbf;
    border-radius: 6px;
    background: #0a8cbf;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
}
.addUserBtn:hover,
.addUserBtn:focus {
    color: #fff;
    text-decoration: none;
}
.addUserBtn:active {
    color: #fff;
    text-decoration: none;
    background: #065f82;  /* darker on click, matches .secondaryBtn:active */
    border-color: #065f82;
}
.userMgmtMessages {
    margin-bottom: 12px;
}
/* Search row fills the banner and left-aligns the input with the body content
   (directly above the "User Management" title). */
.headerSearchRow {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    /* Pull the search up toward the top of the header (the buttons row's left
       side is empty on desktop). Increase the negative value to go higher. */
    margin-top: -16px;
}
.headerSearchInput {
    width: 280px;
    max-width: 100%;
    padding: 7px 12px;
    margin-bottom: 10px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    color: #282011;
}
@media (min-width: 992px) {
    .userMgmtHeaderBlock { margin-left: 340px; }
    /* 340px sidebar + 15px to offset the Bootstrap .row negative margin so the
       search lines up with the body/title below it. */
    .headerSearchRow { margin-left: 355px; }
}

/* header - main nav */
.mainNav {
    margin-left: -15px;
    margin-right: -15px;
    padding: 0 1rem;
    background-color: #282011;
}
.mainNav .navbar-nav .nav-item:hover {
    background-color: #282011;
}
.mainNav .navbar-nav .nav-link {
    height: 100%;
    padding: 1rem 1rem 1rem 0.5rem;
    color: #FFFFFF;
}
.mainNav .navbar-nav .nav-link:hover {
    color: #FFFFFF;
}
.mainNav .dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid #666666;
    border-radius: 0;
}
.mainNav .dropdown-item {
    padding: 0.75rem 1rem;
    color: #666666;
}
.mainNav .dropdown-item:hover {

    color: #666666;
}
.mainNav .dropdown-item:active {
    background-color: #CCCCCC;
    color: #666666;
}
.mainNav .mobileNavLink {
    background-color: #CCCCCC;
    color: #666666 !important;
}
.mainNav .mobileNavLink:hover {
    background-color: #D6D6D6;
    color: #666666 !important;
}
.mainNav .mobileNavLink:active {
    background-color: #C1C1C1;
    color: #666666 !important;
}

/* footer */
.footer {
    text-align: center;
    color: #000000;
    font-size: 0.90rem;
}

/* footer - i18n menu */
.i18nMenu {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0.5rem;
    background-color: #CCCCCC;
    text-align: center;
}
.i18nMenuIcon {
    margin: 0 0.5rem;
}
.i18nMenuOptions {
    flex-grow: 1;
}

/* loader */
.loaderBackdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.45);
}
.loaderContainer {
    display: flex;
    width: 160px;
    height: 160px;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border: 1px solid #666666;
}
/* Courtesy of https://loading.io/css/ */
.lds-default {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-default div {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #666666;
    border-radius: 50%;
    animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
    animation-delay: 0s;
    top: 37px;
    left: 66px;
}
.lds-default div:nth-child(2) {
    animation-delay: -0.1s;
    top: 22px;
    left: 62px;
}
.lds-default div:nth-child(3) {
    animation-delay: -0.2s;
    top: 11px;
    left: 52px;
}
.lds-default div:nth-child(4) {
    animation-delay: -0.3s;
    top: 7px;
    left: 37px;
}
.lds-default div:nth-child(5) {
    animation-delay: -0.4s;
    top: 11px;
    left: 22px;
}
.lds-default div:nth-child(6) {
    animation-delay: -0.5s;
    top: 22px;
    left: 11px;
}
.lds-default div:nth-child(7) {
    animation-delay: -0.6s;
    top: 37px;
    left: 7px;
}
.lds-default div:nth-child(8) {
    animation-delay: -0.7s;
    top: 52px;
    left: 11px;
}
.lds-default div:nth-child(9) {
    animation-delay: -0.8s;
    top: 62px;
    left: 22px;
}
.lds-default div:nth-child(10) {
    animation-delay: -0.9s;
    top: 66px;
    left: 37px;
}
.lds-default div:nth-child(11) {
    animation-delay: -1s;
    top: 62px;
    left: 52px;
}
.lds-default div:nth-child(12) {
    animation-delay: -1.1s;
    top: 52px;
    left: 62px;
}
@keyframes lds-default {
    0%, 20%, 80%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}

/* PAGE SPECIFIC STYLES - ALPHABETICAL */

/* course management */
.cmStatusCol {
    width: 6rem;
}
.previewCol {
    width: 8rem;
}
td.previewCol {
    text-align: center;
}

/* course profile */
.courseFileList {
    height: 250px;
    padding: 1rem;
    overflow-y: auto;
    border: 1px solid #ced4da;
}
.courseFileList ol {
    padding-left: 1rem;
}
.courseFileList ol li {
    margin-bottom: 0.5rem;
}

/* curriculum */
.courseNameCol {
    min-width: 7rem;
}
.sortOrderCol {
    width: 6rem;
}

/* individual report */
.curriculumHeaderRow td {
    background-color: #BBBBBB;
}
.subCourseHeaderRow td {
    background-color: #D2D2D2;
}
.historicalRecord td {
    color: #A8A8A8 !important;
    font-style: italic;
}
.reportToggleCol {
    width: 1.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
}


/* login */
.login {
    width: 450px;
    margin: 0 0.5rem;
    padding: 0.5rem;
}
.loginLogo {
    text-align: center;
}
.loginTitle {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    text-align: center;
}
.loginError {
    padding: 0.5rem 1rem;
    text-align: center;
}
.loginPasswordUtils {
    display: flex;
    margin-top: 0.5rem;
}
.loginPasswordUtils .showHideLink {
    flex-grow: 1;
    text-align: right;
}
.loginLink {
    margin-top: 2rem;
    text-align: center;
}
#tcModal .tcContent {
    max-height: 300px;
    overflow-y: auto;
}
#tcModal .tcBtn {
    display: block !important;
    width: 100% !important;
}

/* mfa */
.mfaContainer label {
    margin-bottom: 1rem;
    font-weight: 700;
}
.mfaContainer button {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.375rem 0.75rem;
    background-color: #CCCCCC;
    border: 1px solid transparent;
    border-radius: 0;
    line-height: 1.5;
    font-size: 0.95rem;
    cursor: pointer;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.mfaContainer button:hover {
    background-color: #D6D6D6;
}
.mfaContainer button:active {
    background-color: #C1C1C1;
}
.mfaContainer input {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    margin-left: 0 !important;
    height: auto;
    padding: 0.375rem 0.75rem;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0;
    line-height: 1.5;
    color: #495057;
    font-size: 1rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* my courses */
.courseCatalogSubSectionTitle {
    padding-left: 0.25em;
    background-color: #CCCCCC;
    font-size: 0.90rem;
    font-weight: 700;
    text-transform: uppercase;
}
.showHideCol {
    width: 6rem;
    text-align: center;
}
.timeframeCol {
    width: 9rem;
}
.statusCol, .currStatusCol {
    width: 8rem;
}
td.statusCol {
    text-align: center;
}
.certCol, .sizeCol {
    width: 6rem;
}
td.certCol {
    text-align: center;
}

/* buttons - course catalog */
.showHideBtn {
    width: 5rem;
}
.retakeBtn {
    background-color: #E89325;
    color: #FFFFFF;
}
.retakeBtn:hover {
    background-color: #EA9E39;
    color: #FFFFFF;
}
.retakeBtn:active {
    background-color: #E18B17;
    color: #FFFFFF;
}
.retestBtn {
    background-color: #FF0000;
    color: #FFFFFF;
}
.retestBtn:hover {
    background-color: #FF1515;
    color: #FFFFFF;
}
.retestBtn:active {
    background-color: #EA0000;
    color: #FFFFFF;
}
.lockedBtn {
    cursor: not-allowed !important;
    background-color: #CCCCCC;
}

/* help */
.helpContainer {
    display: block;
    width: 100%;
    height: auto;
}
.helpContainer main {
    padding: 1rem;
    flex-grow: 1;
    overflow-y: auto;
    scroll-behavior: smooth;
}
.helpContainer main .version {
    margin-bottom: 1.5rem;
    font-weight: 700;
}
.helpContainer main section {
    margin-bottom: 2rem;
}
.helpContainer main section h3 {
    font-size: 1.5rem;
}
.helpContainer main section h4 {
    font-size: 1.25rem;
}
.helpContainer main section p {
    font-size: 1rem;
}
.helpContainer main section .helpList {
    margin-bottom: 0;
}
.helpContainer main section .helpList li {
    padding-bottom: 0.5rem;
}
.helpContainer main section article {
    margin-bottom: 1rem;
    padding: 1rem;

    font-size: 1rem;
}
.helpContainer main section .helpImg {
    margin-bottom: 1rem;
}
.helpContainer main section img {
    border: 1px solid #CCCCCC;
}
.helpNav, .subNav {
    padding: 1rem;
    padding-top: 1rem;
    height: 100%;
    overflow-y: auto;
}
.helpNav {

}
.helpNav .helpNavMenuBtn {
    margin-bottom: 0;
    padding: 0.5rem 0;
    color: inherit;
    text-decoration: none;
}
.helpNav h2 {
    font-size: 2rem;
}
.helpNav h3 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
}
.helpNav .menuIcon {
    margin-right: 0.25rem;
    vertical-align: text-bottom;
}
.helpNav a {
    display: block;
    margin-bottom: 1rem;
    font-size: 1.15rem;
}
.subNav {
    display: none;
    border-left: 1px solid #CCCCCC;
}
.subNav h3 {
    font-size: 1rem;
}
.subNav a {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}
.launchBtnTable td {
    padding: 0.5rem;
}
.helpWarning {
    color: #FF0000;
    font-style: italic;
    font-weight: 700;
}
.apiRequest, .apiResponse {
    overflow-x: auto;
    padding: 0.5rem;
    background-color: #666666;
    color: #FFFFFF;
    font-size: 0.95rem;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;;
}
.apiRequest {
    margin-bottom: 1.5rem;
}
.apiResponse {
    margin-bottom: 3rem;
}

/* manager authorization */
.dateComCol, .checklistCol {
    width: 8rem;
}
.authComCol {
    width: 7rem;
}
.authAll {
    vertical-align: middle;
    margin-left: 1rem;
}
.revokeAll {
    vertical-align: middle;
    margin-left: 1rem;
}
.nowrap {
    white-space: nowrap;
}
.nowrapImportant {
    white-space: nowrap !important;
}
/* hide actions and certificate link for historical attempts */
tr.historicalRecord a.Assign { display: none !important; }
tr.historicalRecord a[href*="cert"] { display: none !important; }

/* purchase seats */
.transactionConfirmation {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}
.priceCol, .qtyCol {
    width: 6rem;
}
.availibleSeatsCol {
    width: 8rem;
}

/* simple course builder */
.simpleQuestion select.questionType {
    width: 100%;
}

/* system management */
.dayOfWeekPicker {
    width: 100%;
}
.dayOfWeekPicker th, .dayOfWeekPicker td {
    padding: 0.25rem 0.5rem;
    text-align: center;
}
.dayOfWeekPicker th {
    font-weight: 400;
}
.complEmailsModalBody, .cookieReportModalBody {
    max-height: 75vh;
    overflow-y: scroll;
}
.complEmailsModalDownloadCol {
    width: 7rem;
}
.removeDiscountCodeCol, .cookieRevokeCol, .jobsRunCol {
    width: 6rem;
}
td.complEmailsModalDownloadCol, td.cookieRevokeCol, td.removeDiscountCodeCol, td.jobsRunCol {
    text-align: center;
}

/* utilities */
.deleteUsersInput {
    width: 300px;
}

/* view logs */
.logs {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.logView {
    flex-grow: 1;
}
#logWindow {
    width: 100%;
    height: 100%;
}

/* MEDIA QUERIES
 *
 * Based on Boostrap 4.6.X breakpoints
 * https://getbootstrap.com/docs/4.6/layout/overview/
 */

/* =========================================
   MEDIA QUERIES
   Bootstrap 4.6 breakpoints:
   sm: 576px
   md: 768px
   lg: 992px
   xl: 1200px
   ========================================= */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 400px) {
    /* (currently no overrides needed) */
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /* .headerLogo img {
         max-width: 200px;
     }*/
    .headerBanner h2 {
        font-size: 1.25rem;
    }
    #tcModal .tcContent {
        max-height: 500px;
    }
    #tcModal .tcBtn {
        margin: 0 0 0.5rem 0;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    /* JQKEYBOARD OVERRIDES */
    #jqk-toggle-btn, #jq-keyboard {
        display: block;
    }
    .mainNav .navbar-nav .nav-link {
        padding: 0.5rem 1rem 0.5rem 0.5rem;
    }
    .ilsSectionHeaderChooseAction {
        display: inline;
        vertical-align: middle;
        width: auto;
        height: calc(1.5rem + .75rem + 1px);
        margin-right: 0.25rem;
    }
    .modal-footer {
        display: flex;
    }
    .modal-footer input.btn, .modal-footer button.btn, .exapandMobile {
        display: inline-block;
        width: auto;
        margin: 0 0 0 0.5rem;
    }
    .ilsPagination .pageLinks {
        text-align: center;
    }
    .ilsPagination .goToPage {
        margin-top: 0;
    }
    .simpleQuestion select.questionType {
        width: auto;
    }
    .mfaContainer button, .mfaContainer input {
        display: inline-block;
        width: auto;
        margin-top: 0;
    }
    .mfaContainer input {
        margin-left: 0.5rem;
    }
    .helpContainer {
        display: flex;
        height: 100vh;
    }
    .helpContainer main {
        padding: 2rem;
    }
    .helpNav {
        padding-top: 2rem;
        min-width: 300px;
    }
    .helpNav h2 {
        font-size: 1.5rem;
    }
    .helpNav #helpNavCollapse {
        display: block;
    }
    .subNav {
        display: block;
        padding-top: 2rem;
        min-width: 225px;
    }
    .cookieReportModal .modal-lg {
         max-width: 1000px;
     }

    .drawerOverlay{
        display: none !important;
    }

    .drawerHamburgerTop{
        display: none !important;
    }

    .appLayout{
        margin-left: 340px; /* space for sidebar */
    }

    /* body should not lock scroll on desktop */
    body.drawerOpen{
        overflow: auto !important;
    }

    .appLayout { margin-left: 340px !important; }

    .closeButton {
        display: none !important;
    }
    .sideNav{
        transform: translateX(0); !important;
    }

    .ilsBodyWrapper {
        margin-top: 0 !important;
    }
    #sideNav {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 320px !important;
        height: 100vh !important;
        transform: translateX(0) !important;
        z-index: 10001 !important;
    }
}

@media print {
    .helpNav, .subNav {
        display: none;
    }
}/*NEW Airtera styling*/
.label {
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
}

.labelDark {
    font-weight: 700;
    font-size: 14px;
    color: black;
}

@media (max-width: 58em) {
    .label {
        font-size: 12px;
    }
}

.navLinkIcon {
    margin-right: 0.3rem;
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
}

.navLinkIcon.navLogoIcon {
    filter: none;
    width: auto;
    height: auto;
}

.navLinkRoot {
    color: #ffffff;
    margin-bottom: 0.3rem;
    height: 38px;
}

.navLinkRootDark {
    color: black;
    margin-bottom: 0.3rem;
    height: 38px;
}

.navLinkRoot[data-active] {
    background-color: transparent;
    backdrop-filter: brightness(90%);
    height: 38px;
}

.navLinkRootDark[data-active] {
    background-color: transparent;
    backdrop-filter: brightness(95%);
    height: 38px;
}

.navLinkRoot:hover {
    background-color: transparent;
    backdrop-filter: brightness(115%);
    height: 38px;
}

.textDecorationNone {
    text-decoration: none;
}

.navBarBackground {
    background: linear-gradient(180deg, #0a85b6 0%, #0a7ba8 100%);
}

.navBarSubBackground {
    overflow-y: auto;
    scrollbar-width: thin;                 /* Firefox */
    scrollbar-color: #1f4f72 transparent;  /* Firefox */
    background: linear-gradient(180deg, #0a719a 0%, #0a77a2 5%, #0a7098 40%, #095573 90%, #09526f 100%);
}

.navBarOrgSwitcherBackground {
    background-color: #084a64;
}

.navBarOrgSwitcherBackground .navLogoIcon {
    max-height: 30px;
    max-width: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.closeButton {
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.closeButton:hover {
    background-color: transparent;
    backdrop-filter: brightness(115%);
}

.bottomNav {
    background: linear-gradient(180deg, #0079a9 0%, #09526f 100%);
}

.equalFlex {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;
}

.bottomNavLinkWrapper {
    padding-bottom: calc(calc(env(safe-area-inset-bottom) / 2) + 5px);
}

.bottomNavLink {
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    flex-direction: column;
    display: flex;
    align-items: center;
    height: 60px;
}

.bottomNavActive {
    backdrop-filter: brightness(90%);
    font-weight: 700;
}
/*just added*/
/* keep each nav row on ONE line */
.navLinkRoot,
.navLinkRootDark {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;          /* <- prevents wrapping */
    gap: 8px;                   /* consistent spacing instead of relying on margin-right */
}

/* icon never shrinks */
.navLinkIcon {
    flex: 0 0 auto;
    margin-left: 15px;
}

/* label takes remaining space and truncates */
.label,
.labelDark {
    flex: 1 1 auto;
    min-width: 0;               /* <- REQUIRED for ellipsis inside flex */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sideNav{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 320px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    transform: translateX(-110%);
    transition: transform .25s ease;

    clip-path: polygon(
            0 0,
            calc(100% - 50px) 0,
            100% 50px,
            100% 100%,
            0 100%
    );
}
.sideNav.open{
    transform: translateX(0);
}

/* overlay for drawer mode */
.drawerOverlay{
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(255,255,255,.45);
    display: none;
}

.drawerOverlay.open{
    display: block;
}
/*remove underline*/
.sideNav a{
    color: #fff;
    text-decoration: none;
}
.sideNav a:hover,
.sideNav a:focus{
    color: #fff;
    text-decoration: none;
    outline: none;
}

.drawerHamburgerTop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    background-color: #0a8cbf;
}

.drawerHamburgerTop:hover,
.drawerHamburgerTop:focus {
    border: 0;
    box-shadow: none;
    outline: none;
    background-color: #0a8cbf !important;
}

.drawerHamburgerTop:active {
    border: 0;
    box-shadow: none;
    outline: none;
    background-color: #065f82 !important;
}

.drawerHamburgerTop .material-symbols-outlined {
    font-size: 30px;
    line-height: 1;
    color: #7d7d7d;
    font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24;
}

/* Icon inside hamburger button must have no side margin so it stays centered */
.drawerHamburgerTop .navLinkIcon {
    display: block;
    margin-left: 0;
    margin-right: 0;
}

/* Chrome / Edge / Safari */
.navBarSubBackground::-webkit-scrollbar {
    width: 10px;
}

.navBarSubBackground::-webkit-scrollbar-track {
    background: transparent;
}

.navBarSubBackground::-webkit-scrollbar-thumb {
    background-color: #1f4f72;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.icon-phone {
    width:22px;
    height:22px;
    margin-top:2px;
}
.icon-blue {
    width:22px;
    height:22px;
    margin-top:2px;
}

.icon-gray {
    width:18px;
    height:18px;
}

/*refresh button */
.pageHeaderRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24px 0 14px 0;
}

.pageHeaderRow .ilsPageTitle {
    margin: 0;
}

.statusRefreshWrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.statusRefreshWrap p {
    margin: 0;
    font-size: 14px;
    color: #666666;
    white-space: nowrap;
}

.refreshStatusBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    background: #ffffff;
    border: 2px solid #0a8cbf;
    border-radius: 4px;
    color: #0a8cbf !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
}

.refreshStatusBtn:hover,
.refreshStatusBtn:focus,
.refreshStatusBtn:active {
    background: #f5fbfe;
    color: #0a8cbf !important;
    text-decoration: none !important;
}

.refreshIcon {
    width: 16px;
    height: 16px;
    display: block;
    flex: 0 0 auto;
}

/* Mobile: stack "Last checked" above the Refresh Status button */
@media (max-width: 767px) {
    .pageHeaderRow {
        align-items: flex-start;
    }
    .statusRefreshWrap {
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }
}