#modulePanelLayoutlist {
    max-height: calc(100% - 58px);
}

.main-body-container {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#unitdisplay {
    width: calc(100% - 80px);
    border: solid 1px teal;
    border-radius: .25rem;
    margin-top: 0px;
    color: #495057;
    min-height: 38px;
    text-align: left;
    float: right;
}

.course-info-container {
    display: flex;
    flex-direction: column;
}

    .course-info-container > div:not(.group), .course-info-container > .group > div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }

#ReferencesContainer button {
    width: 100%;
    margin: 5px 0px;
}

#input-group {
    width: 100%;
}

@media (min-width: 576px) {
    #ReferencesContainer {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        #ReferencesContainer button {
            width: auto;
            margin: 0;
        }

    #input-group {
        width: auto;
    }
}

.ExpiredRowStyle {
    color: red !important;
}

#searchResultsPanelTitle {
    display: flex;
    background: white;
}

    #searchResultsPanelTitle div:nth-child(1) {
        flex-basis: 100px;
        width: 100%;
        min-width: 100px;
    }

    #searchResultsPanelTitle div:nth-child(2) {
        flex-basis: 100%;
    }

    #searchResultsPanelTitle div:nth-child(3), .list-group-item .DueDate {
        display: none;
        min-width: 175px;
    }

    #searchResultsPanelTitle div:nth-child(4) {
        min-width: 300px;
    }

    #searchResultsPanelTitle div {
        /*display: inline-block;*/
        padding-left: 10px;
        padding-right: 10px;
    }

.SearchResultsDueDatelayoutList .list-group-item {
    padding: 0;
}

#searchResultslist {
    list-style: none;
    padding: 0;
    display: table;
    width: 100%;
}

    #searchResultslist a {
        display: flex;
        color: black;
    }

        #searchResultslist a:hover {
            text-decoration: none;
        }

    #searchResultslist div {
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    #searchResultslist .criterionAttained {
        display: inline-block;
        flex-basis: 100px;
        min-width: 100px;
    }

    #searchResultslist .moduleTitle {
        display: inline-block;
        flex-basis: 100%;
    }

    #searchResultslist .keywords {
        display: inline-block;
        flex-basis: 300px;
        min-width: 300px;
    }

    #searchResultslist .overdue {
        background-color: red;
        border-radius: 5px;
    }

#study-scheduler {
    position: relative;
}

.DueDateResultsPanel .criterionAttained {
    min-width: 100px;
}

.DueDateResultsPanel .moduleTitle {
    flex-basis: 100%;
}

.DueDateResultsPanel .DateCompleted,
.DueDateResultsPanel .DueDate {
    min-width: 100px;
    max-width: 100px;
    display: inline-block;
}

#DueDateResultsPanelTitle {
    display: flex;
    padding: .75rem 1.25rem;
    margin-right: 18px;
}

#DueDateResultsPanelLayoutlist {
    max-height: 500px;
    overflow-y: scroll;
}

    #DueDateResultsPanelLayoutlist ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

    #DueDateResultsPanelLayoutlist a {
        display: flex;
    }

        #DueDateResultsPanelLayoutlist a:hover {
            text-decoration: none;
        }

/* Fix- Keyword search panel should work like due date results */
#searchResultsPanelLayoutlist  {
    max-height: 500px;
    overflow-y: scroll;
}

/*Search Function (Keyword text area and button */
#input-group {
    background-color: white;
    border: 1px #ccc solid;
    position: relative;
    display: table;
    border-collapse: separate;
}

#keyword {
    /*width: 200px;*/
    width: 100%;
    border: 0px;
    padding-left: 8px;
    padding-right: 8px;
}

.input-group-btn {
    width: auto;
    position: absolute;
    right: 5px; /*-3px;*/
    top: 8px; /*0;*/
}

#btnSearch {
    padding: 7px 10px;
    background-size: 15px;
    cursor: pointer;
    background-image: url('/images/SearchIcon2.png');
    background-repeat: no-repeat;
    display: inline-block;
}

#moduleBtnContainer {
    display: flex;
    height: 50px;
    width: 100%;
    background: white;
    margin-right: 0;
    vertical-align: top;
    justify-content: center;
    align-items: center;
    /* width: 100%;    
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;*/
}

#courseSelect, #unitdisplay {
    background-position-x: 10px;
    padding: 0.375rem 0.375rem 0.375rem 1.75rem;
    height: auto;
}

#courseSelect {
    height: 100%;
    position: absolute;
}

#courseTabs {
    position: relative;
    padding-right: 60px;
}

.hide-btn {
    position: absolute;
    right: 0px;
}

#multilineSelectPlaceholder {
    background: white;
    margin-left: 28px;
    position: inherit;
    margin-right: 5px;
    color: #495057;
    min-height: 24px;
    margin: 0.375rem 0.375rem 0.375rem 1.75rem;
    pointer-events: none;
}

/* Mobile tweaks after going live - Course Info section*/
@media (min-width: 320px) {
    .criterionAttainedLabel {
        width: 75%;
    }
}

@media (min-width: 768px) {
    .criterionAttainedLabel {
        width: 70%;
    }
}

@media (min-width: 960px) {
    .criterionAttainedLabel {
        width: 83%;
    }
}

@media (min-width: 576px) {
    .modal-dialog.search-results {
        max-width: 80%;
    }
}

@media (min-width: 768px) {
    .course-info-container {
        flex-direction: row;
        justify-content: space-between;
    }

        .course-info-container span {
            margin-right: 5px;
        }

        .course-info-container > div:not(.group), .course-info-container > .group > div {
            margin-right: 10px;
        }
}

@media screen and (min-height: 700px) {
    #Main {
        height: 100%;
    }
}

/* MM Issue #23 :: Styles for New RBT TCO Requirements */

.titles {
    display: flex; /* Flexbox layout to place elements side by side */
    justify-content: space-between; /* Push title to left, wrapper to right */
    align-items: center; /* Vertically center the title and progress bar */
    width: 100%; /* Make sure the container stretches across the available space */
    margin-left: 0; /* Keep it aligned to left edge of the anchor */
}

.chapter-title {
    flex: 1; /* Title takes up remaining space */
    margin-right: 10px; /* Space between title and progress bar */
    white-space: nowrap; /* Prevent title from wrapping to the next line */
    overflow: hidden; /* Hide overflowed text */
    text-overflow: ellipsis; /* Show ellipsis for overflowed text */
    min-width: 0; /* Ensures ellipsis can occur */
}

.progress-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px; /* spacing between bar and label */
    flex-shrink: 1; /* prevent shrinking */
    max-width: fit-content; /* Only grow as much as needed */
    padding-right:  1em;
    padding-left: 1em; 
    margin-left: 0;
}

.progress-container {
    width: 20em; /* Fixed width for all progress containers */
    flex: 0 0 20em ; /* Don't shrink or grow, keep fixed width */
    background-color: #e0e0e0; /* Light grey background to represent 0% progress */
    height: 20px; /* Set the height of the progress container */
    border-radius: 10px; /* Optional: rounded corners for the container */
    overflow: hidden; /* Prevent the progress bar from overflowing */
    position: relative; /* Allow positioning of the inner text */
}

.progress-bar {
    height: 100%; /* Fill the container's height */
    max-width: 100%; /* Ensure text never overflows */
    background-color: green; /* Green for progress */
    transition: width 0.5s ease; /* Smooth animation when the progress updates */
    position: absolute; /* Make the bar fill the container */
    top: 0;
    left: 0;
}

.progress-text {
    position: absolute; /*Position text inside the progress bar */
    top: 50%; /*Vertically center the text */
    left: 50%; /*Horizontally center the text */
    transform: translate(-50%, -50%); /*Adjust to truly center the text */
    color: white; /*White text for contrast */
    font-weight: bold; /*Optional: make the text bold */
    font-size: 12px; /*Optional: adjust font size */
    z-index: 1; /*Ensure text is above the progress bar */
    max-width: 100%; /* Ensure text never overflows */
}

.progress-label {
    flex-shrink: 0;
    width: 60px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.disabled-chapter {
    pointer-events: auto;
    cursor: not-allowed;
    text-decoration: none;
    position: relative; /* Required for positioning ::before */
    display: inline-block; /* Ensures padding works correctly for inline elements */
}

    .disabled-chapter:focus {
        outline: none;
    }

    .disabled-chapter:hover {
        text-decoration: none;
    }

/* End MM Issue #23 :: Styles for New RBT TCO Requirements */

/* Scrum-76 MM :: Styles for Course panel on Learner Dashboard */

/* enlarge checkbox visually without breaking layout */
.input-group .form-check-input {
    transform: scale(2); /* enlarge - adjust scale to match height */
    transform-origin: center;
    margin: 0; /* remove extra default margin */
    width: 1rem; /* keep hit area reasonable */
    height: 1rem;
    vertical-align: middle;
}

    /* small tweak for Firefox to keep consistent sizing */
    .input-group .form-check-input::-moz-focus-inner {
        border: 0;
        padding: 0;
    }



/* Allow input-group rows to expand for multi-line values and prevent overlap */
.classification-row {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: .5rem;
}

/* blank placeholder that looks like an underline to be filled */
.blank-underlined {
    display: inline-block; /* allow width to take effect */
    width: 2.2rem; /* adjust length of underline */
    min-width: 1.6rem; /* ensure a sensible minimum */
    text-align: center;
    border-bottom: 2px solid #212529; /* dark underline (bootstrap primary or custom) */
    line-height: 1.1;
    white-space: nowrap; /* keep placeholder on single line */
}

/* optional: narrower on small screens */
@media (max-width: 480px) {
    .blank-underlined {
        width: 1.6rem;
    }
}

/* Keep the initial Units list inside the viewport on phones */
@media (max-width: 576px) {
    #chapterList a {
        min-width: 0;
    }

    #chapterList .titles {
        min-width: 0;
        flex: 1 1 auto;
    }

    #chapterList .chapter-title {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #chapterList .progress-wrapper {
        flex: 0 1 10.5rem;
        min-width: 0;
        gap: 6px;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    #chapterList .progress-container {
        width: 7rem;
        flex: 1 1 7rem;
        min-width: 0;
    }

    #chapterList .progress-label {
        width: auto;
        min-width: 3.5rem;
    }
}

/* End Scrum-76 MM :: Styles for Course panel on Learner Dashboard */