.auto-resize-text-area {
    resize: none;
    outline: none;
    max-height: 20vh;
    overflow-y: auto;
}


.span-container {
    border-radius: 3px;
    border: 1px solid var(--border-primary-color);
    padding: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
}

/*.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}*/

.input-group-text-10 {
    width: 10rem;
}

.input-group-text-8 {
    width: 8rem;
}

.input-group-text-6 {
    width: 6rem;
}

.input-group-text-5 {
    width: 5rem;
}

.input-group-text-4 {
    width: 4rem;
}

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

    .scrollable-horizontal > div {
        display: inline-block;
    }

:target {
    background-color: var(--target-bg-color);
}

#notes-section :target {
    background-color: transparent;
}

.alert-note-item :target {
    background-color: var(--target-bg-color);
}
 
.session-report-details :target {
    color: var(--target-color-alert);
    background-color: var(--target-bg-color-alert);
}

table.table-no-border-bottom > :not(caption) > * > * {
    border-bottom-width: 0px;
}

/**Virtual Persona edit and create**/
#SpeakerBtn {
    padding: 1px;  
    font-size: 24px;  
}

/*Identity Account Manage _Layout*/
.identity-content {
    border-radius: 4px;
    padding: 20px 36px 36px 36px;
    width:73%;
}

    .identity-content h4 {
        font-size: 1rem;
        line-height: 1.375rem;
        margin-bottom: 1rem;
    }

    .identity-content h3, .identity-content hr {
        display: none;
    }

/*Audit page*/
.audit-details-json-field {
    overflow: auto;
    background: var(--primary-bg-color);
}

/** questionnaire edit page **/
.questionnaire-bound-input-width, .questionnaire-score-input-width {
    width: 100px;
}

.questionnaire-interpretation-item {
    border: 1px solid var(--border-primary-color);
    padding: 10px;
}


 /*Feedback Buttons*/
.like-button, .dislike-button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary-color);
}

    .like-button:hover .bi-hand-thumbs-up, .dislike-button:hover .bi-hand-thumbs-down {
        color: var(--text-primary-color);
    }

/**Session Message Feedbacks list*/
.feedback-list-comment-field {
    max-height: 20rem;
    min-height: 3rem;
    min-width: 10rem;
    max-width: 36rem;
    overflow: auto;
    border: 1px solid var(--border-secondary-color);
    border-radius: 1rem;
    padding: 0.5rem;
    margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.feedback-list-sender {
    color: var(--text-tertiary-color);
    background-color: var(--bs-body-bg);
    font-family: inherit;
    font-size: inherit;
}

.feedback-list-message-field {
    max-height: 20rem;
    min-height: 3rem;
    min-width: 10rem;
    max-width: 36rem;
    overflow: auto;
    padding: 0rem 0.5rem 0.5rem 0.5rem;
}

tr.feedback-list-item-tr.hidden {
    opacity: 0;
    height: 0;
    transition: opacity 0.5s ease, height 0.5s ease;
}

/**Session Message Feedbacks Report Details*/
.feedback-detail-icon-link::before {
    content: '\1F517'; /* Unicode character for link icon */
}

.feedback-detail-icon-check::before {
    content: '\2714'; /* Unicode character for check mark */
}

.feedback-detail-icon + .tooltip .tooltip-inner {
    max-width: 200px;
    white-space: pre-wrap;
}


/**Session Overview*/
.homework-icon {
    margin-right: 8px;
}

.homework-link {
    color: var(--link-secondary-color);
    cursor: pointer;
    text-decoration: none;
}

 
a.homework-link:hover {
    color: var(--link-hover-color);
}

a.rating-icon {
    cursor: pointer;
    text-decoration: none;
}

textarea.comment {
    background-color: transparent;
    color: var(--text-secondary-color);
    resize: none;
    height: 269px;
    width: 397px;
    border: 1px solid var(--bs-body-color);
    padding: 8px;
    box-sizing: border-box;
    width: 100%;
}

.feedback-container {
    background: var(--secondary-bg-color);
    padding: 24px;
    width: 445px;
}

.thanks-message {
    background: var(--secondary-bg-color);
    padding: 24px;
    width: 445px;
}

.feedback-row {
    display: flex;
    justify-content: start;
    gap: 64px;
    flex-wrap: nowrap;
    padding-top: 24px;
    padding-bottom: 24px;
}

.svg-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

svg.session-overview-svg path {
    stroke: var(--rating-svg-color);
    transition: stroke 0.3s ease;
}

    svg.session-overview-svg path.active {
        stroke: var(--rating-svg-active-color);
    }

 /*Select Course*/
.select-course-recommended {
    color: var(--text-highlight-color);
    border: 1px solid var(--text-highlight-color);
    border-radius: 7px;
    padding: 8px;
}
 
/**Course Information*/
.course-info-table thead th {
    border-bottom: 2px solid var(--border-primary-color);
}

.course-info-table-column {
    box-sizing: border-box;
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 24px 0px 0px;
    gap: 56px;
    height: 64px;
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

.course-info-tab-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20.5px 0px 20.5px 16px;
    gap: 558px;
    width: 1110px;
    height: 64px;
    border-radius: 4px;
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

/**Course Enrollment Home **/
.table-completed-course .date-header {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    color: var(--table-header-color) !important;
    font-size: 0.875rem;
}

.enroll-home-active-enrollments-container {
    padding-top: 2.25rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
}

.btn-tab-enroll-home {
    border-radius: 0px;
    font-size: 0.875rem;
}

.enroll-home-star-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 5px;
}

.enroll-home-progress-bar-box {
    background-color: var(--progress-bar-color);
    width: 20vw;
    height: 16px;
    border-radius: 4px;
}

.enroll-home-bg-success {
    background-color: var(--progress-bar-active) !important;
    height: 16px;
    border-radius: 4px 0 0 4px;
}

.enroll-home-progress-bar.course-completed {
    border-radius: 4px;
}

.session-duration-container {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.75rem;
    color: var(--info-text-color);
    margin-top: 10px;
}

.enroll-home-completed-status {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--progress-bar-status-text-color);
}

.enroll-home-progress-bar-container {
    padding: 0.5rem 0.5rem 0.5rem 0rem;
}

a.enroll-home-course-name {
    color: var(--link-primary-color);
    cursor: pointer;
    text-decoration: none;
}

    a.enroll-home-course-name:hover {
        color: var(--link-hover-color);
    }

.enroll-home-page-title {
    margin-bottom: 1rem;
}

.enroll-home-course-title {
    margin-bottom: 10px;
}

/**Course Enrollment**/
.course-enroll-carousel-item {
    padding-left: 9.35%;
    padding-right: 9.35%
}

/**Create Session **/
.session-count-input {
    width: 80px;
}

.session-count-label {
    padding-right: 0.5rem;
    margin-top: 4px;
}

.session-set-name-label {
    margin-left: 10px;
    margin-right: 5px;
    margin-top: 4px;
}

.min-width-select2 {
    width: 100% !important;
    min-width: 200px !important;
}

.cc-registry-select2-dropdown .select2-results__option {
    white-space: normal;
    word-break: break-word;
}

.cc-registry-select2-selection .select2-selection__rendered {
    white-space: normal;
    line-height: 1.3;
}

/**Test Set*/
.scrollable-table {
    display: block;
    overflow: auto;
    height: 46vh;
}

    .scrollable-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
    }

.test-set-content {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}

    .test-set-content::placeholder {
        color: var(--placeholder-primary-color);
    }

/**Use Cases Edit Page*/
.user-assignment-description {
    min-width: 55vw;
    max-height: 10rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-line;
}

.user-management-action {
    min-width: 10rem;
    width: 10rem;
}

.prescripted-message {
    max-height: 10rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-line;
}

.prescripted-message-action {
    min-width: 10rem;
    width: 10rem;
}

/**Course Enrollment Syllabus*/
#enrollmentName.bi-pencil {
    font-size: 0.7em;
}

#enrollmentName:hover .bi-pencil {
    visibility: visible;
}

/**Virtaul Persona Edit page **/
#textToSpeechModelVoiceSelect + .select2-container,
#useCaseRoleSelect + .select2-container {
    max-height: 10vh;
    overflow-y: auto;
    width: auto !important;
}

/** Welcome page **/
.welcome-modal-content {
    padding: 0.3rem 2rem 2rem 2rem;
    font-size: 20px;
    font-weight: 400;
}

.welcome-modal-footer {
    border-top: none;
}

.welcome-modal-title {
    font-family: var(--font-family-primary);
    font-size: 48px;
    font-weight: 700;
    text-align: left;
    line-height: 28px;
}

.welcome-modal-btn-continue {
    font-size: 16px;
    font-weight: 700;
    line-height: 22.4px;
}

.welcome-modal-body {
    padding-top: 0.5rem;
    padding-bottom: 0rem;
}

.welcome-modal-body-item {
    line-height: 28px;
}

.welcome-modal-company-logo {
    width: 160px;
    height: 40.5px;
}

.welcome-modal-title {
    padding-top: 34px;
}

.welcome-modal-body-item span, .welcome-modal-title {
    padding-bottom: 24px;
}

/** End of Course Page **/
.end-of-course-modal-content {
    padding: 0.3rem 2rem 2rem 2rem;
    font-size: 20px;
    font-weight: 400;
}

.end-of-course-modal-body {
    padding-top: 0.5rem;
    padding-bottom: 0rem;
}

.end-of-course-modal-body-item {
    line-height: 28px;
}

.end-of-course-modal-body-item span, .end-of-course-modal-title {
    padding-bottom: 24px;
}

.end-of-course-modal-title {
    font-family: var(--font-family-primary);
    font-size: 48px;
    font-weight: 700;
    text-align: left;
    line-height: 28px;
}

/**Paginator*/
#paginator-btn-right.tooltip-inner {
    text-align: left;
}

/*drop-down-right-menu*/
.dropdown-menu .dropdown-right-menu {
    top: 0;
    left: 50%; /* Position the submenu to the right of the parent item */
    margin-top: -1px;
}
.dropdown-right-menu-arrow-right:after {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
 
.nav-link {
    padding-top: 8px;
    padding-bottom: 8px;
}
 
/**Identity Account Index*/
#verify-phone-number-button {
    margin-left: 1rem;
    margin-top: 2rem;
}


/**Audit report **/
.audit-report-json-column {
    max-width: 16vw;
    overflow: auto;
}

.audit-report-json-field {
    max-height: 16rem;
    overflow: auto;
}

.table-container-audit-report {
    position: relative;
    overflow: auto;
    height: 60vh;
    border-collapse: collapse;
    width: 100%;
}


    .table-container-audit-report th, .table-container-audit-report td {
        text-align: left;
    }

    .table-container-audit-report thead th {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .table-container-audit-report tbody td:last-child {
        position: sticky;
        right: 0;
        z-index: 1;
    }

        .table-container-audit-report tbody td:last-child::before {
            content: '';
            position: absolute;
            left: -1px;
            top: 0;
            bottom: 0;
            width: 1px;
        }



/** Questionnaire Detail**/
.questionnaire-score-label {
    padding: 10px;
    margin: 0px -10px 0px 10px;
}

/**Questionnaire Index **/
.questionnaire-purpose {
    width: 70%;
}

.questionnaire-content {
    width: 80%;
}
 
@media (max-width: 768px) {
    main {
        min-height: 65vh;
    }

    .userlist-btn-download {
        width: 100% !important;
    }

}

@media (max-width: 768px), (max-width: 992px) {
    /**Session Overview*/
    .feedback-container, .thanks-message {
        padding: 16px;
        width: auto;
    }

    .feedback-row {
        gap: 36px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

     /**Course Enrollment Home**/
    .enroll-home-active-enrollments-container {
        padding-top: 1.5rem;
        padding-right: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .enroll-home-page-title {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .enroll-home-course-title {
        font-weight: 600;
        font-size: 1.25rem;
        line-height: 1.375rem;
    }

    .session-duration-container, .enroll-home-page-title-desc {
        font-size: 0.875rem;
        line-height: 1.4rem;
        margin-bottom: 0.8rem;
        margin-top: 0px;
    }
     
    .enroll-home-progress-bar-box {
        width: 70vw;
    }

    .enroll-home-progress-container {
        margin-top: 0.5rem;
        padding-bottom: 0rem;
    }

    .enroll-home-progress-bar-container {
        padding: 0rem 0rem 0.3rem 0rem;
    }

    /** questionnaire edit page **/
    .questionnaire-space-row {
        padding-top: 5px;
    }

    .questionnaire-group-btn {
        padding-top: 8px;
    }

    /** use cases edit page **/
    .prescripted-message {
        max-width: 10vw;
    }

    .user-assignment-description {
        min-width: 35vw;
    }

    /**Welcome page*/
    .welcome-modal-body-item {
        max-height: 100%;
        line-height: 20px;
    }

    .welcome-modal-dialog {
        top: 0.5rem;
        --bs-modal-margin: 1rem;
    }

    .welcome-modal-title {
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
    }

    .welcome-modal-content {
        padding: 0.25rem;
        font-size: 16px;
    }

    .welcome-modal-company-logo {
        width: 104px;
        height: 24px;
    }

    .welcome-modal-body-item span, .welcome-modal-title {
        padding-bottom: 12px;
    }

    .welcome-modal-title {
        padding-top: 12px;
    }

    /** End of Course Page **/
    .end-of-course-modal-dialog {
        padding: 0.25rem;
        font-size: 16px;
    }

    .end-of-course-modal-content {
        padding: 0.3rem 2rem 2rem 2rem;
        font-size: 20px;
        font-weight: 400;
    }

    /**Identity Account Index*/
    #verify-phone-number-button {
        margin-left: 0rem;
        margin-top: 0.25rem;
    }
      
    .form-group > .select2-container {
        width: auto !important;
    }

    /**Questionnaire Completed **/
    .questionnaire-title {
        font-size: 1.715rem;
        line-height: 35.2px;
    }

    /**Questionnaire Index **/
    .questionnaire-purpose, .questionnaire-content {
        width: 100%;
    }

    .identity-content {
        margin-left:1px;
        width:99vw;
    }
}

@media (min-width: 1200px) {
    /** use cases edit page **/
    .prescripted-message {
        max-width: 18vw;
    }
}

@media (min-width: 1400px) {
    /** use cases edit page **/
    .prescripted-message {
        max-width: 25vw;
    }
}

@media (min-width: 1560px) {
    /** use cases edit page **/
    .prescripted-message {
        max-width: 35vw;
    }
}

/*jsTree*/
.jstree-hovered {
    color: var(--dark-text-color) !important;
}

/*policies*/
/* overall modal look */
.policy-modal .modal-content {
    background-color: var(--primary-bg-color);
    border: none;
    border-radius: 8px;
    overflow: visible !important;
    position: relative;
}

/* Accept button wrapper */
.accept-container {
    flex: 1;
    position: relative;
    display: flex;
}

/* header */
.policy-modal .modal-header {
    padding: 1rem;
}

/* scrollable body */
.policy-body {
    background-color: var(--secondary-bg-color);
    border-radius: 4px;
    height: 60vh;
    max-height: 60vh;
    overflow-y: auto;
    position: relative;
    padding: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-dark-50) transparent;
}

    /* webkit scrollbar */
    .policy-body::-webkit-scrollbar {
        width: 6px;
    }

    .policy-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .policy-body::-webkit-scrollbar-thumb {
        background-color: var(--color-dark-50);
        border-radius: 3px;
    }

/* progress bar container & track */
.policy-progress {
    height: 4px;
    background-color: var(--color-dark-50);
}

    .policy-progress .progress-bar {
        background-color: var(--text-tertiary-color);
        transition: width 0.2s ease;
    }

/* floating scroll‑down arrow */
.scroll-indicator {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity .3s ease;    
}
    .scroll-indicator i {
        color: var(--text-tertiary-color);
        font-size: 1.5rem;
    }

    .scroll-indicator.visible {
        opacity: 1;
    }

    .scroll-indicator.fade {
        opacity: 0;
    }

/* footer buttons */
.policy-modal .modal-footer {
    background: transparent;
    display: flex;
}


/* decline button (grey) */
.policy-modal .btn-outline-secondary {
    flex: 1;
    margin-right: .5rem;
    background-color: var(--color-white-100);
    border: none;
    color: var(--text-primary-color);
    border-radius: 4px;
}

    .policy-modal .btn-outline-secondary:hover {
        background-color: var(--color-white-75);
    }

/* accept button */
.policy-modal .btn-secondary {
    flex: 1;
    border: none;
    border-radius: 4px;
}

    .policy-modal .btn-secondary:disabled {
        background-color: var(--disabled-bg-color);
        color: var(--disabled-color);
    } 

 
/* Make the form a flex container, full-width inside the footer */
.policy-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
    margin: 0; /* remove any leftover margin */
}

    .policy-form .btn {
        width: 100%;
    }

    /* force each button or wrapper to fill its column */
    .policy-form > * {
        width: 100%;
    }

    /* Each button takes equal space */
    .policy-form .btn {
        height: auto;
        border-radius: 4px;
    }

 
/* policy accepted success modal */

/* bump width, round corners, navy background */
#acceptSuccessModal .modal-dialog {
    max-width: 500px;
}

#acceptSuccessModal .modal-content {
    border-radius: 0.5rem;
}

/* light separator lines in the body */
#acceptSuccessModal .modal-header {
    border: none;
}

/* footer with no border except a faint top line */
#acceptSuccessModal .modal-footer {
    border-top:none;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .policy-body {
        height: 40vh;
        max-height: 40vh;
    }
}

/* Password toggle integrated inside the input */
.password-input-wrapper {
    position: relative;
}

/* Make room on the right for the icon */
.password-input {
    padding-right: 2.5rem; /* adjust if your icon size changes */
}

/* Unstyled, clickable icon that sits inside the input */
.password-toggle-inside {
    position: absolute;
    top: 50%;
    right: .5rem; /* aligns with input's inner padding */
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--placeholder-primary-color) !important; /* fallback below if needed */
}

    .password-toggle-inside:hover {
        opacity: .85;
        color: var(--text-secondary-color) !important;
    }

    .password-toggle-inside:focus-visible {
        outline: 2px solid var(--link-primary-color);
        outline-offset: 2px; /* accessible focus without changing input shape */
        border-radius: .375rem;
    }

    .password-toggle-inside svg {
        pointer-events: none;
    }
.alert-section-label {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-header-secondary-color);
    margin: 0 0 0.5rem 0;
}

.card-header .section-heading {
    color: var(--text-header-tertiary-color) !important;
}

/* Chrome, Safari, Edge, Opera */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.no-spinner[type=number] {
    -moz-appearance: textfield;
}

.dropdown-menu-alerts {
    line-height: 1.5;
    transform: unset;
}

.card-alert-details, .card-alert-patient-info, .card-alert-analysis-responses, .card-alert-notes-section {
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,.22) inset,0 .125rem .5rem rgba(0,0,0,.12);
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.alert-note-highlight {
    background-color: rgba(255, 255, 150, 0.8);
    transition: background-color 1s ease-out;
}

.alert-note-item-postedby {
    color: var(--text-secondary-color);
}

.input-group-dashboard .bi, .dashboard-cards .card .bi-download {
    color: var(--bs-bi-secondary-color);
}

.input-group-dashboard {
    border: 1px solid var(--secondary-bg-color) !important;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

    .input-group-dashboard .form-control-date {
        border: none;
        background-color:transparent;
    }

    .input-group-dashboard .form-control:hover, .input-group-dashboard .form-control:focus-visible, .input-group-dashboard .form-control:focus, .input-group-dashboard .form-control:active {
        background-color: rgba(255, 255, 255, 0.06);
    }

.dashboard-filter .btn-search {
    background: var(--dashboard-btn-search-bg-color);
    border-color: var(--dashboard-btn-search-border-color);
}

.dashboard-filter .btn-search .bi-search {
    color: var(--bs-bi-secondary-color);
}

.dashboard-filter-buttons .btn-filter-by-days.selected {
    border: 1px solid var(--secondary-bg-color) !important;
    border-radius: 18px;
    color: var(--dashboard-btn-filter-selected-color) !important;
    background: var(--dashboard-btn-filter-selected-bg-color);
    box-shadow: none;
}

.dashboard-cards .card {
    border: 1px solid var(--secondary-bg-color) !important;
    border-radius: 12px;
    box-shadow: 0 0 0 2px rgba(255,255,255,.22) inset,0 .125rem .5rem rgba(0,0,0,.12);
    background-color: rgba(255, 255, 255, 0.05) !important;
}

    .dashboard-cards .card:hover, .dashboard-cards .card:focus-visible, .dashboard-cards .card:active, .dashboard-cards .card:focus {
        filter: saturate(4.3) brightness(1.95);
        background-color: rgba(255, 255, 255, 0.06);
    }


    .dashboard-cards .card .svg-icon-play-dashboard path {
        color: var(--dashboard-play-svg-color);
        transition: stroke 0.3s ease;
    }

    .dashboard-cards .card .svg-icon-checked-dashboard path {
        stroke: var(--dashboard-checked-svg-color);
        transition: stroke 0.3s ease;
    }

    .dashboard-cards .card .svg-icon-file-earmark-text-dashboard path {
        color: var(--dashboard-svg-icon-file-earmark-text-color);
        transition: stroke 0.3s ease;
    }

    .dashboard-cards .card svg {
        flex-shrink: 0;
    }

    .dashboard-trending-down {
        color: var(--dashboard-trending-down-color);
    }

.dashboard-trending-up {
    color: var(--dashboard-trending-up-color);
}

.dashboard-trending-dash {
    color: var(--dashboard-trending-dash-color);
}

@media (max-width: 768px) {
    .input-group-dashboard .form-control-date {
        font-size: 12px;
    }
    .dashboard-filter-buttons .btn-filter-by-days {
        font-size: 14px;
    }
}

.user-roles-last-auth-claims {
    color: rgba(255,255,255,0.65);
}

.manage-profile-picture-drag-drop-area {
    border: 2px dashed #cccccc;
    padding: 20px;
    text-align: center;
}

/*  
   Course Preferences Role Carousel
   Multi-tile Carousel (Role Sections)
   Desktop: 3 full tiles + partial peek
   Tablet : 2 full tiles + partial peek
   Mobile : 1 full tile + partial peek
    */
/* ================================
   Center Header + Role Segment
   ================================ */

.course-enrollment-header {
    width: 100%;
    justify-content: center;
}

.course-enrollment-vp-list-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.375rem;
    padding-bottom: 18px;
}
.course-enrollment-header__inner {
    width: 100%;
    max-width: 900px; /* controls overall width */
    padding: 0 24px;
    text-align: center;
}

/* Center role segment horizontally */
.course-enrollment-enroll-role-container {
    display: flex;
    justify-content: center;
}

/* Optional: spacing polish */
.page-title-course-enrollment {
    margin-bottom: 16px;
}

.page-title-manage-entries {
    padding-top: 24px;
    padding-bottom: 8px;
}

.page-title-manage-entries h1 {
    font-size: 1.75rem;
    line-height: 2rem;
}

.input-eoc-min-sessions::-webkit-outer-spin-button,
.input-eoc-min-sessions::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-eoc-min-sessions {
    -moz-appearance: textfield;
}

.page-subtitle-course-enrollment {
    margin-bottom: 24px;
    opacity: 0.85;
}

 
/* --------- Carousel shell --------- */
.cf-role-section {
    margin-bottom: 28px;
}

.cf-role-carousel {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: visible; /* ✅ IMPORTANT: allow nav buttons to show (no clipping) */
}

.cf-role-carousel__track {
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* ✅ clip only scrolling content, not nav */
}

/* --------- Viewport (scroll area) --------- */
.cf-role-carousel__viewport {
    /* layout variables */
    --gap: 16px; /* space between tiles */
    --peek: 56px; /* how much of next/prev card is visible */
    --tiles: 3; /* number of fully visible tiles */

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Key trick for partial visibility on both sides */
    padding-inline: var(--peek);
    scroll-padding-inline: var(--peek);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    outline: none;
    /* Optional: hide scrollbar but keep scrollability */
    scrollbar-width: none; /* Firefox */
}

    .cf-role-carousel__viewport::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Edge */
    }

/* --------- Tile sizing (never exceeds viewport width) --------- */
/* Peek is created by viewport padding, NOT by subtracting from tile size. */
.cf-role-card {
    /* button reset */
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    font: inherit;
    text-align: left;
    /* your card styles */
    flex: 0 0 calc((100% - (var(--tiles) - 1) * var(--gap)) / var(--tiles));
    max-width: 100%;
    box-sizing: border-box;
    scroll-snap-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 18px;
    padding: 18px 18px 14px;
    background: var(--cf-role-card-bg-color);
    border: 1px solid var(--cf-role-card-border-color);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    color: var(--cf-role-card-color);
    display: flex;
    flex-direction: column;
}

    .cf-role-card:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.7);
        outline-offset: 3px;
    }

/* Ensure content never forces horizontal overflow */
.cf-role-card__name,
.cf-role-card__title {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* allow up to 3 lines */
    -webkit-box-orient: vertical;
}

.cf-role-card__desc {
    font-size: 0.95rem;
    line-height: 1.35;
    opacity: 0.9;
    margin: 10px 0 12px;
    overflow-y: auto;
    flex-grow: 1;
}
/* --------- Card header row --------- */
.cf-role-card__body {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    min-width: 0;
}

.cf-role-card__avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid var(--cf-role-card-avatar-border-color);
    box-shadow: 0 0 0 4px rgba(10, 16, 30, 0.7);
}


/* --------- CTA --------- */
.cf-role-card__cta {
    width: 100%;
    border-radius: 999px;
    padding: 10px 14px;
    border: 0;
    background: var(--cf-role-card-select-btn-bg-color);
    color: var(--cf-role-card-select-btn-color);
    font-weight: 600;
    cursor: pointer;
    margin-top: auto;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cf-role-card__cta:hover {
        background: var(--cf-role-card-select-btn-bg-hover-color);
    }

    .cf-role-card__cta i {
        margin-left: 6px;
    }

/* --------- Selected state --------- */
.cf-role-card.is-selected {
    border: 2px solid var(--cf-role-card-selected-border-color);
    box-shadow: 0 0 0 2px rgba(255, 214, 120, 0.35), 0 14px 28px rgba(0, 0, 0, 0.35);
    background: var(--cf-role-card-selected-bg-color);
}

    .cf-role-card.is-selected .cf-role-card__cta {
        background: var(--cf-role-card-select-btn-bg-selected-color);
        font-weight: 700;
    }

/* --------- Nav buttons (prev/next) --------- */
.cf-role-carousel__nav {
    position: absolute;
    /* Use top/bottom + margin:auto for reliable vertical centering on iOS WebKit.
       This avoids sub-pixel rendering issues seen with top:50%+translateY(-50%)
       on iPhone devices across all browsers. */
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    z-index: 10; /* ensure above cards */

    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 1px solid var(--cf-carousel-prev-next-border-color);
    background: var(--cf-carousel-prev-next-bg-color);
    backdrop-filter: blur(6px);
    color: var(--cf-carousel-prev-next-icon-color);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

    .cf-role-carousel__nav:hover {
        background: rgba(10, 16, 30, 0.70);
    }

    .cf-role-carousel__nav:active {
        transform: scale(0.98);
    }

    .cf-role-carousel__nav:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.7);
        outline-offset: 2px;
    }

    .cf-role-carousel__nav.prev {
        left: -5px;
    }

    .cf-role-carousel__nav.next {
        right: -5px;
    }

        .cf-role-carousel__nav.prev .bi, .cf-role-carousel__nav.next .bi {
            color: var(--text-tertiary-color);
        }

    .cf-role-carousel__nav:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

/* --------- Dots / pagination --------- */
.cf-role-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 0;
}

    .cf-role-carousel__dots button {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: var(--text-secondary-color);
        opacity: 0.45;
        cursor: pointer;
    }

        .cf-role-carousel__dots button.is-active {
            opacity: 1;
            background: var(--text-primary-color);
        }

/* ==========================================================================
   Responsive rules
   ========================================================================== */

/* Tablet: 2 full tiles + peek */
@media (max-width: 992px) {
    .cf-role-carousel__viewport {
        --tiles: 2;
        --peek: 48px;
    }

    .cf-role-carousel__nav.prev {
        left: -5px;
    }

    .cf-role-carousel__nav.next {
        right: -5px;
    }

    .cf-role-card__desc {
        -webkit-line-clamp: 3;
    }
}

/* ==========================================================================
   Mobile: stacked / behind-cards effect
   Selected card is full-size in front.
   Other cards are smaller and appear behind it.
   ========================================================================== */

@media (max-width: 576px) {
    .course-enrollment-header__inner {
        max-width: 100%;
        padding: 0 16px;
    }

    .cf-role-carousel__nav.prev {
        left: -5px;
    }

    .cf-role-carousel__nav.next {
        right: 0px;
    }
    /* Control the deck sizing from one place */
    .cf-role-carousel__viewport {
        --card-w: 96%; /* selected card width */
        --card-h: 238px; /* consistent card height */
        --stack-overlap: 68px; /* overlap amount */
    }

        /* Force every card to be the same size */
        .cf-role-carousel__viewport .cf-role-card {
            flex: 0 0 var(--card-w);
            max-width: var(--card-w);
            height: var(--card-h);
            min-height: var(--card-h);
            box-sizing: border-box;
            overflow: hidden; /* prevents internal content from stretching height */
            scroll-snap-align: center; /* center snap on mobile for reliable centering on real iOS devices */

            display: flex;
            flex-direction: column;
            justify-content: space-between; /* keeps CTA anchored */
        }

            /* Overlap stack */
            .cf-role-carousel__viewport .cf-role-card + .cf-role-card {
                margin-left: calc(-1 * var(--stack-overlap));
            }

    /* Keep header row from growing too tall */
    .cf-role-card__body {
        margin-bottom: 8px;
    }

    /* Clamp description to a fixed number of lines for consistent height */
    .cf-role-card__desc {
        max-height: 3.9em; /* ~3 lines */
        overflow-y: auto;
        -webkit-line-clamp: initial;
        display: block;
        font-size: 12px;
    }

    /* Keep name/title from wrapping and changing height */
    .cf-role-card__name,
    .cf-role-card__title {
        white-space: normal;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* allow up to 3 lines */
        -webkit-box-orient: vertical;
    }
    .cf-role-card__title {
       font-size:12px;
    }

        /* CTA stays consistent */
    .cf-role-card__cta {
        margin-top: auto;
        height: 40px; /* fixed button height */
        padding: 0 14px; /* fixed padding */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Selected vs non-selected: consistent sizing */
    .cf-role-card.is-selected {
        z-index: 3;
        transform: scale(1);
        opacity: 1;
        filter: none;
        background-color: var(--mobile-cf-role-card-selected-bg-color);
    }

    .cf-role-card:not(.is-selected) {
        z-index: 1;
        transform: scale(0.76); /* visual smaller, but base layout stays consistent */
        opacity: 0.35;
        filter: blur(0.3px);
        background: var(--mobile-cf-role-card-not-selected-bg-color);
    }
}

/* Segmented pill role selector */
.cf-role-segment__track {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 999px;
    background: var(--cf-role-segment-track-bg-color);
    border: 1px solid var(--cf-role-segment-track-border-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(10px);
}

.cf-role-segment__label {
    padding: 8px 12px;
    font-weight: 600;
    color: var(--cf-role-segment-label-color);
    white-space: nowrap;
}

.cf-role-segment__option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--cf-role-segment-option-border-color);
    background: var(--cf-role-segment-option-bg-color);
    color: var(--cf-role-segment-option-color);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.cf-role-segment__container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--cf-role-segment-container-border-color);
    background: var(--cf-role-segment-container-bg-color);
    color: var(--cf-role-segment-container-color);
    font-weight: 600;
    line-height: 2;
    cursor: pointer;
    user-select: none;
}

.cf-role-segment__option:hover {
    background: var(--cf-role-segment-option-hover-color);
}

.cf-role-segment__check {
    display: none;  
    font-size: 1rem;
}

.cf-role-segment__check .bi {
    color: var(--cf-role-segment-option-check-icon-color);
}

.cf-role-segment__option.is-active {
    background: var(--cf-role-segment-option-selected-bg-color);
    border-color: var(--cf-role-segment-option-selected-border-color);
    color: var(--cf-role-segment-option-selected-color);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

    .cf-role-segment__option.is-active .cf-role-segment__check {
        display: inline-flex;
    }

.cf-role-segment__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
/* Mobile: allow horizontal scroll if many roles */
@media (max-width: 576px) {
    .cf-role-segment__track {
        overflow-x: auto;
        scrollbar-width: none;
    }

        .cf-role-segment__track::-webkit-scrollbar {
            display: none;
        }

    .cf-role-segment__label {
        flex: 0 0 auto;
    }
}

/* ==========================================================================
   Course Information page – enroll action buttons
   Ensure buttons are properly sized and contain their text on all devices,
   including larger-viewport mobile devices (e.g., iPhone 17 Pro Max).
   ========================================================================== */

.course-information-enroll-action {
    flex-wrap: wrap;
    gap: 30px;
}

    .course-information-enroll-action .btn {
        min-width: 10rem;
        white-space: normal;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .course-information-enroll-action .btn-primary-custom {
        min-height: 55px;
        height: auto;
    }

@media (max-width: 576px) {
    .course-information-enroll-action {
        flex-direction: column;
        gap: 12px;
    }

        .course-information-enroll-action .btn {
            width: 100%;
        }
}

.policies-list .policy-description {
    display: block;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
}

.video-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.video-page__player {
    width: 80vw;
    max-width: 960px;
    aspect-ratio: 16 / 9;
}

.unsaved-notes-footer {
    align-items: stretch;
}

.unsaved-notes-footer .modal-action-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (max-width: 575.98px) {
    .unsaved-notes-footer .modal-action-btn {
        flex: 1 1 100%;
    }
}

/* Dynamic Policies list */
.policies-list td.policy-name-cell {
    white-space: normal !important;
}

.policies-list td.policy-name-cell .policy-name-value {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.create-session-startup-mask {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background-color: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.create-session-startup-mask-content {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-white-100);
    font-weight: 600;
}