/* Overall CSS */

html, body {
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
}

img {
    border-radius: 5px;
}

input:focus, select:focus {
    border-color: #c9261791 !important;
    box-shadow:  0 0 0 0.25rem #c9261791 !important;
}

.grad {
    background-image: linear-gradient(to bottom right, #8C1A10, #000000);
}

.underline {
    text-decoration-line: underline;
    color: #585858;
    cursor: pointer;
    text-align: center;
    margin-top: 20px;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease-in-out;
}

.btn:hover {
    transform: scale(1.05);
}

.btn-primary {
    background-image: linear-gradient(to bottom right, #8C1A10, #000000);
    border-color: none !important;
    border-width: 0 !important;
    color: #fffaed;
}

.btn-primary:hover {
    background-color: #f18379;
    border-color: #f18379;
}

.btn-primary:focus, .btn-primary:active, .btn-primary:focus-visible {
    background-image: none;
    background-color: #f18379;
    border-color: #f18379;
    box-shadow: none !important; 
}

.column {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5%;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    height: auto;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5%;
}

.grid-4 a {
    margin-bottom: 0;
}

.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2%;
    margin-top: 20px;
    padding: 0px;
}

.center-vertically {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.paginate_button .page-item.active{
    color: #ffffff;
    background-color: #8C1A10 !important;
}

.form-select{
    border-color: #e8e4e4 !important;
    border-width: 1px !important;
}

/* Select2 CSS */

.select2 {
    width: 100% !important;
    height: 40px !important;
}

.select2-container .select2-selection--single {
    height: 40px !important;
    align-items: center;
}

.select2-selection__rendered {
    align-self: center;
    padding-top: 5px;
}

.select2-selection__arrow {
    align-self: center;
    margin-top: 5px;
}

.select2-selection__arrow b {
    margin-top: 5px;
}



/* CSS for login page */

.login-container {
    width: 50%;
    height: 100%;
    display: flex;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background: #ffffff;
    position: fixed;
    align-items: center;
}

.login-container h1 {
    text-align: center;
    font-size: 70px;
    color: #8C1A10;
}


#formLogin, #formForgotPassword {
    width: 50%;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 0px;
    margin: auto;
}

#formLogin .form-floating, #formForgotPassword .form-floating {
    margin-bottom: 5%;
}

#formLogin button, #formForgotPassword button {
    margin: auto;
}

#formLogin .forgotten-password, #formForgotPassword .forgotten-password {
    margin: auto;
    text-align: center;
    margin-top: 5%;
}

#formLogin .forgotten-password a, #formForgotPassword .forgotten-password a {
    color: #2e2d2d;
}


/* CSS for forgotten password page */
#forgottenPasswordDiv {
    background-color: #ffffff;
    margin: auto;
    width: 70%;
    height: 70%;
    padding: 20px;
    border-radius: 10px;
}

#forgottenPasswordDiv h1 {
    text-align: center;
    margin-bottom: 20px;
}



/* CSS for material icons */

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}

.material-icons {
    margin: 0;
    font-size: 1.5rem;
}


/* CSS for navbar */

nav {
    font-size: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 10px;
    background-color: #ffffff;
    border-bottom: 2px solid #8C1A10;
}

nav a:hover {
    transform: scale(1.05);
    color: #C92617;
}

nav a.active {
    text-decoration: underline;
}

.navbar-toggler {
    border: none;
    outline: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%238C1A10' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-brand {
    font-size: 70px;
    color: #8C1A10;
}

.nav-item {
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
}

.nav-link {
    color: #8C1A10;
    border-radius: 10px;
    margin: 5px;
}

.topnav-right {
    float: right;
}

.bd-mode-toggle {
    z-index: 1500;
}

.bd-mode-toggle .dropdown-menu.active .bi {
    display: block !important;
}


/* CSS for footer */
footer {
    display: grid;
    grid-template-columns: 10% 30% auto;
    gap: 20px;
    padding-top: 20px;
    padding-bottom: 40px;
    margin-top: auto;
}

footer p {
    margin-top: 20px;
}

.footer-brand {
    font-size: 50px;
    color: #2e2d2d;
    text-decoration: none;
}


/* CSS for User Management page*/

.form-select {
    border-width: 0px;
}

.btn-edit-user {
    background-color: #000000;
    border-color: #000000;
}

.btn-edit-user:hover {
    background-color: #2e2d2d;
    border-color: #2e2d2d;
}

.delete-icon {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}


/* CSS for Dashboards */

.dashboard-container img {
    width: 100%;
    overflow: hidden;
    object-fit: cover;
}

.dashboard-container div {
    margin-bottom: 60px;
}

.dashboard-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

.dashboard-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 40% auto;
    gap: 20px;
}

.img-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.img-gallery .wide {
    grid-column: span 2;
    grid-row: span 2;
}


/* CSS for manage users */

.banner {
    display: block !important;
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 300px;
    border-radius: 0px;
    margin-top: 0px;
    margin-bottom: 20px;
    align-items: center;
}

.banner img {
    width: 100%;
    object-fit: cover;
    margin: -25% 0px 0px 0px;
    filter: brightness(50%);
    z-index: 0;
}

.banner h1 {
    text-align: center;
    width: 100%;
    position: absolute;
    top: 35%;
    color: #ffffff;
    font-size: 80px;
    z-index: 1;
}

.banner p {
    text-align: center;
    width: 100%;
    position: absolute;
    top: 70%;
    color: #ffffff;
    z-index: 1;
}

.banner-dashboard {
    height: 500px;
    align-items: center;
    margin-bottom: 40px;
}

.banner-dashboard img {
    margin: 0px 0px 0px 0px;
    filter: brightness(50%);
    z-index: 0;
    height: 100%;
}

.banner-dashboard h1 {
    top: 25%;
}

.banner-dashboard a {
    text-align: center;
    position: absolute;
    width: 15%;
    top: 75%;
    color: #ffffff;
    z-index: 1;
    margin-left: 42%;
    margin-right: 42%;
}

.banner-dashboard .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5%;
    width: 35%;
    margin-left: 26%;
    position: absolute;
    top: 75%;
    z-index: 2;
}

.banner-dashboard .grid-2 a {
    position: relative; /* Keep them within normal flow */
    width: 100%;
    text-align: center;
    color: white;
    z-index: 3;
}

.banner-dashboard .btn-primary {
    background-image: none;
    background-color: #ffffff !important;
    color: #8C1A10 !important;
    font-weight: bold;
}

.banner-dashboard p {
    position: absolute;
    top: 55%;
    padding-left: 20%;
    padding-right: 20%;
}

.menu-content-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 20% auto;
    gap: 20px;
}


.content-select .btn {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background-color: #fff;
}

.content-select .btn::after {
    content: "➔";
    display: inline-block;
    transition: transform 0.3s ease; 
}

.content-select .btn:hover {
    transform: scale(1);
}

.content-select .btn:focus, .content-select .btn:active {
    border: none;
    outline: none;
}

.content-select .btn:hover::after {
    transform: translateX(5px);
}

.manage-user-content {
    display: none;
    padding: 20px;
}

.manage-user-content.active {
    display: block;
    border-left: 1px solid #ccc;
}

table#userTable.dataTable thead tr th {
    background-color: #8C1A10 !important;
    border-width: 0;
}

#userTable th:nth-child(6) {
    width: 100px;
}

#userTable th:nth-child(5) {
    width: 150px;
}

.paginate_button.page-item.active a {
    background-color: #8C1A10 !important;
    border-color: #8C1A10 !important;
    color: #ffffff !important;
}

.paginate_button.page-item.active a:focus {
    border-color: #c9261791!important;
    box-shadow: 0 0 0 0.25rem #c9261791  !important;
}

.paginate_button.page-item a {
    color: #8C1A10 !important;
}

.paginate_button.page-item a:focus {
    border-color: #c9261791!important;
    box-shadow: 0 0 0 0.25rem #c9261791  !important;
}

.dataTables_length {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.dataTables_length label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dataTables_length select {
    display: inline-block;
    width: auto;
    margin-left: 5px;
}
    
.dataTables_length select:focus {
    border-color: #c9261791 !important;
    box-shadow: 0 0 0 0.25rem #c9261791 !important;
}


.dataTables_paginate {
    margin-top: 20px;
    text-align: center;
}

.dataTables_paginate .paginate_button .page-item.active{
    background-color: #8C1A10 !important;
}

#userTable_next a {
    color: #8C1A10;
}

#userTable_next a:hover {
    color: #C92617;
}

#userTable_next a:focus {
    border-color: #c9261791 !important;
    box-shadow: 0 0 0 0.25rem #c9261791 !important;
}

#userTable_previous a {
    color: #8C1A10;
}

#userTable_previous a:hover {
    color: #C92617;
}

#userTable_previous a:focus {
    border-color: #c9261791!important;
    box-shadow: 0 0 0 0.25rem #c9261791  !important;
}

#userSelect {
    padding: 5px;
    width: 300px;
}

#employeeEditDisplay {
    margin-top: 20px;
    padding: 20px;
    display: none;
}

#employeeEditDisplay img {
    display: block; 
    margin-left: auto; 
    margin-right: auto;
    margin-bottom: 20px;
    width: 80px;
    height: 80px;
    border-radius: 40px;
}

#employeeEditDisplay.active {
    display: block;
}

.edit-buttons {
    width: 80%;
    margin-top: 40px;
    margin-right: 10%;
    margin-left: 10%;
}
    
.edit-buttons .btn-secondary {
    background-color: #ffffff;
    color: #3f3f3f;
    border: 1px solid #3f3f3f;
}

.edit-buttons .btn-secondary:hover {
    background-color: #3f3f3f;
    color: #ffffff;
    border: 1px solid #3f3f3f;
    transform: scale(1);
}

.edit-buttons .btn-primary {
    background-image: none;
    background-color: #ffffff;
    color: #8C1A10;
    border: 1px solid #8C1A10 !important;
}

.edit-buttons .btn-primary:hover {
    background-color: #8C1A10;
    color: #ffffff;
    border: 1px solid #8C1A10 !important;
    transform: scale(1);
}

#employeeAddDiv {
    margin-top: 20px;
    padding: 20px;
}

#employeeAddDiv button {
    margin-top: 60px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}

table #passwordRequestTable thead tr th {
    background-color: #8C1A10 !important;
    border-width: 0;
}

#passwordRequestTable {
    display: none;
}

#passwordRequestTable.active {
    display: contents;
}


#password-reset-content p {
    display: block;
    color: #2e2d2d;
}

#password-reset-content p.hidden {
    display: none;
}


/* CSS for manage courses */
.manage-course-content {
    display: none;
    padding: 20px;
}

.manage-course-content.active {
    display: block;
    border-left: 1px solid #ccc;
}

.btn.minor {
    margin-left: auto;
    width: 80%;
    color: #2e2d2d;
}

table#courseTable thead tr th {
    background-color: #8C1A10 !important;
    border-width: 0;
}

.course-display-div-edit {
    display: grid;
    grid-template-columns: 40% auto;
    column-gap: 10px;
    row-gap: 5px;
    padding: 20px;
}

.course-display-div-edit textarea {
    height: 100px !important;
}

.course-display-div-edit textarea:focus {
    border-color: #c9261791!important;
    box-shadow: 0 0 0 0.25rem #c9261791  !important;
}

.course-display-div-edit div .form-floating .courseInput {
    margin: 0px;
}

.course-display-div-edit input, .course-display-div-edit select {
    margin: 0 !important;
}

.course-display-div-edit img {
    width: 100%;
    height: 375px;
    object-fit: cover;
    grid-row: span 5;
}

.course-display-div {
    display: grid;
    grid-template-columns: 40% auto;
    column-gap: 20px;
    row-gap: 10px;
    padding: 20px;
}

.course-display-div textarea {
    height: 100px !important;
}

.course-display-div textarea:focus {
    border-color: #c9261791!important;
    box-shadow: 0 0 0 0.25rem #c9261791  !important;
}

.course-display-div div .form-floating .courseInput {
    margin: 0px;
}

.course-display-div input, .course-display-div select {
    margin: 0 !important;
}

.course-display-div img {
    width: 100%;
    height: 375px;
    object-fit: cover;
    grid-row: span 5;
}

.upload-button-grid {
    display: grid;
    grid-template-columns: 25% auto;
}

.courseInput {
    margin-bottom: 20px;
}

.imgUpload {
    height: 100%;
}

#courseAddSubmitButton {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}

#courseTable img {
    height: 25px;
    width: 25px;
}


.edit-course-buttons {
    width: 100%;
}

.edit-course-buttons .btn-secondary {
    background-color: #ffffff;
    color: #3f3f3f;
    border: 1px solid #3f3f3f;
}

.edit-course-buttons .btn-secondary:hover {
    background-color: #3f3f3f;
    color: #ffffff;
    border: 1px solid #3f3f3f;
    transform: scale(1);
}

.edit-course-buttons .btn-primary {
    background-image: none;
    background-color: #ffffff;
    color: #8C1A10;
    border: 1px solid #8C1A10 !important;
}

.edit-course-buttons .btn-primary:hover {
    background-color: #8C1A10;
    color: #ffffff;
    border: 1px solid #8C1A10 !important;
    transform: scale(1);
}

.modal-content {
    max-width: 90%;
}

.modal-body {
    max-width: 95%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    border-bottom: 2px solid #8C1A10;
}

.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px !important;
}

.sign-ups-grid {
    display: grid;
    grid-template-columns: 60% auto;
    column-gap: 20px;
    row-gap: 5px;
}

.sign-ups-grid table {
    grid-row: span 3;
}

.sign-ups-grid h5 {
    align-self: end;
    padding-bottom: 5px;
}

#signUpsCount {
    background-color: #ccc;
    border-radius: 5px;
    color: #4e4e4e;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    padding: auto;
    height: 100px;
}

table#signUpsTable thead tr th {
    background-color: #8C1A10 !important;
    border-width: 0;
}

#selectedUserDiv {
    display: none;
    margin-top: 10px;
}


/* CSS for Reports page */
.report-dashboard-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 60% auto;
    gap: 20px;
}

.report-dashboard-grid .grid-4 {
    grid-column: span 2;
}

.outlined-div {
    border: 0px solid !important;
    padding: 10px;
}

.large-stat {
    display: flex;
    flex-direction: column;
}

.large-stat h3 {
    font-size: 16px;
}

.large-stat p {
    font-size: 60px;
    font-weight: bolder;
    margin: 0px;
}

.pop-courses-segment {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#popularCourses {
    display: grid;
    grid-template-columns: 25% auto;
    gap: 20px;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 20px;
}

#popularCourses img {
    height: 120px;
    width: 100%;
    overflow: hidden;
    object-fit: cover;
}

.popular-course-details {
    height: 120px;
}


.report-course-history .history-container {
    display: flex;
    flex-direction: column;
    overflow: visible;
    overflow-x: hidden;
    width: 100% !important;
}

.report-course-history .embla {
    width: 100% !important;
    border: 2px solid #8C1A10 !important;
    overflow: visible;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.report-course-history .embla__container {
    height: 100%;
}

.report-course-history .btn-group {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

.report-course-history .embla__slide {
    padding: 5px;
}

.report-course-history .embla__slide.btn {
    margin-left: 20%;
    margin-right: 20%;
    width: 60%;
    margin-bottom: 10px;
}

.report-course-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.report-course-details h3 {
    flex-grow: 1;
}

.report-course-details button, .report-course-details p {
    margin-top: auto;
}

.report-course-details button {
    width: 80%;
    margin-left: 10%;
}

table#signUpsTableReport thead tr th {
    background-color: #8C1A10 !important;
    border-width: 0;
}

.report-search-grid {
    width: 100%;
    display: grid;
    grid-template-columns: auto 30%;
    gap: 40px;
    margin-top: 100px;
}

.report-search-grid .courseInput {
    height: 10%;
    width: 100%;
}

.report-search-grid #selectedCourseDetails {
    margin-top: 5%;
    height: 85%;
}

.report-search-grid .btn {
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 5%;
    margin-bottom: 5%;
}

.report-search-grid .attendance-p {
    width: 100%;
    text-align: center;
}


/* CSS for Settings page */

.settings-grid {
    display: grid;
    grid-template-columns: 40% auto;
    row-gap: 20px;
    column-gap: 30px;
	overflow-y: visible;
}

.settings-grid div {
    margin-bottom: 20px;
} 

#userSettings {
    margin-top: 20px;
    grid-row: span 2;
}

#userSettings img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    height: 150px;
    border-radius: 75px;
    margin-bottom: 20px;
    border: 2px solid #4e4e4e;
}

#userSettings button {
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.form-switch .form-check-input {
    width: 50px;
    height: 25px;
    margin-right: 20px;
}

.form-check-label {
    margin-top: 3px;
}

.form-check-input:checked {
    background-color: #8C1A10;
    border-color: #8C1A10;
}

#passwordButtons button {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

#passwordButtons a {
    text-align: center;
}

.password-settings-grid {
    display: grid;
    grid-template-columns: 55% auto;
    gap: 10px;
}

.password-settings-grid div {
    margin-bottom: 20px;
}


/* CSS for course browse */

/* Embla slides */

.embla {
    overflow: hidden;
    max-width: 85%;
    margin: auto;
}

.embla__container {
    display: flex;
}

.embla__slide {
    flex: 0 0 100%;
    min-width: 0px;
    padding: 20px;
    text-align: center;
    border-radius: 0px;
}

.embla__button {
    background-color: #ffffff;
    border-color: #8C1A10;
    color: #8C1A10;
    height: 40px;
    line-height: 20px;
    width: 40px;
    text-align: center;
    font-size: 30px;
    margin-top: 5px;
    margin-left: 5px;
}

.embla__button:hover {
    background-color: #8C1A10;
    border-color: #8C1A10;
    color: #fffaed;
    transform: scale(1);
}

.embla__controls {
    display: flex;
    justify-content: left;
    margin-bottom: 20px;
}

/* Other course browse */

.icon-grid {
    display: grid;
    grid-template-columns: 10% auto;
    column-gap: 10px;
    row-gap: 5px;
    text-align: left;
}

.browse-courses-container h2 {
    margin-top: 40px;
}

.course-browse-display {
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    display: grid;
    grid-template-columns: 35% auto;
    gap: 20px;
    column-gap: 30px;
    text-align: left;
}

.course-browse-display img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    grid-row: span 2;
}

.detail-enrol-grid {
    display: grid;
    grid-template-columns: 80% auto;
}

.detail-enrol-grid h2 {
    text-align: left;
    margin-bottom: 20px;
    grid-column: span 2;
}

.booking-details {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

.booking-details button {
    width: 100%;
}


/* CSS for Your Courses */

.view-your-courses-container h1 {
    margin-bottom: 20px;
    margin-top: 40px;
}

.view-your-courses-div {
    display: grid;
    grid-template-columns: repeat(3, 33.3%);
    gap: 40px;
}

.view-course {
    border-style: solid;
    border-width: 2px;
    border-color: #8C1A10;
    border-radius: 5px;
    padding: 10px;
}

.view-course img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    grid-row: span 2;
    margin-bottom: 10px;
}

.view-course h3 {
    margin-bottom: 15px;
}

.view-course button {
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
}


/* Small screen CSS */

@media (max-width: 990px) {
    .navbar-collapse {
        background-color: #ffffff;
        text-align: center;
        z-index: 1500;
        padding: 10px;
        margin-top: 0px;
        border-top: 2px solid #8C1A10;
        border-bottom: 2px solid #8C1A10;
    }

    .navbar-nav {
        flex-direction: column;
        text-align: center;
        background-color: #ffffff; 
        padding: 10px;
    }

    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    footer {
        margin-top: auto !important;
        font-size: 10px;
    }

    /* Containers */
    .container {
        width: 90%;
        margin: 0 auto;
        max-width: 100%;
    }

    /* Login */
    .login-container {
        margin-top: 20%;
        width: 100%;
        height: 100%;
        box-shadow: 0px 10px 4px rgba(0, 0, 0, 0.1);
    }
    
    .login-container h1 {
        width: 100%;
    }
    

    #formLogin {
        margin: auto;
        margin-bottom: 80%;
    }
    

    /* Banners */

    .banner {
        height: 200px;
        margin-bottom: 0px;
        width: 100%;
    }
    
    .banner h1 {
        text-align: center;
        top: 25%;
        color: #ffffff;
        font-size: 40px;
        z-index: 1;
    }

    .banner p {
        font-size: 15px;
        top: 60%;
    }
    
    .banner img {
        margin: 0px 0px 0px 0px;
        width: 100%;
    }
    
    .banner-dashboard {
        height: 500px;
        margin-bottom: 40px;
    }
    
    .banner-dashboard img {
        margin: 0px 0px 0px 0px;
    }

    .banner-dashboard h1 {
        top: 10%;
    }

    .banner-dashboard a {
        top: 75%;
        margin-left: 37%;
        width: 25%;
    }

    .banner-dashboard .grid-2 {
        top: 65%;
    }

    .banner-dashboard .btn-primary {
        background-image: none;
        background-color: #ffffff !important;
        color: #8C1A10 !important;
        font-weight: bold;
        margin-left: 30%;
        margin-right: 30%;
        width: 40%;
    }

    .banner-dashboard p {
        position: absolute;
        top: 40%;
        padding-left: 10%;
        padding-right: 10%;
    }
    

    /* Dashboard */

    .img-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    /* Browse courses */

    .course-browse-display {
        height: 100%;
        width: 100%;
        background-color: #ffffff;
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        column-gap: 30px;
        text-align: left;
    }
    
    .course-browse-display img {
        width: 100%;
        height: 350px;
        object-fit: cover;
    }

    .course-browse-display h2 {
        margin-top: 0px;
    }

    .detail-enrol-grid {
        display: grid;
        grid-template-columns: 60% auto;
    }
    

    /* View history */
    .view-your-courses-div {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        gap: 20px;
    }

    .view-your-courses-div h3 {
        font-size: 20px;
    }
    

    /* Settings */
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .settings-grid div {
        margin-bottom: 20px;
    }    
    

    /* Manage users */
    .menu-content-grid {
        margin-top: 20px;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    table {
        font-size: 12px;
    }
    
    .content-select .btn {
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 15px;
        background-color: #fff;
    }

    .content-select .btn::after {
        content: "➔";
        display: inline-block;
        transition: transform 0.3s ease; 
    }

    .content-select .btn:hover {
        transform: scale(1);
    }

    .content-select .btn:focus, .content-select .btn:active {
        border: 2px solid #8C1A10
    }

    .content-select .btn:hover::after {
        transform: translateX(5px);
    }

    .manage-user-content.active, .manage-course-content.active {
        border-top: 1px solid #ccc;
        border-left: none;
    }

    .course-display-div {
        grid-template-columns: 1fr;
    }

    .course-display-div .icon-input-grid {
        display: grid;
        grid-template-columns: 10% auto;
    }
    

    /* Reports */
    .report-dashboard-grid {
        display: flex;
        flex-direction: column;
    }

    #popularCourses {
        grid-template-columns: 30% auto;
        font-size: 16px;
    }

    #popularCourses img {
        height: 120px;
        overflow: hidden;
        object-fit: cover;
    }
    
    .large-stat h3 {
        font-size: 12px;
    }

    .large-stat p {
        font-size: 45px;
    }
    
    .report-course-history {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .report-search-grid {
        display: flex;
        flex-direction: column;
    }
    

    /* Modals */
    .sign-ups-grid {
        grid-template-columns: 1fr;
    }

    #signUpsCount {
        margin-bottom: 10px;
    }

    .course-display-div-edit {
        grid-template-columns: 1fr;
    }
    
    .course-display-div-edit img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        grid-row: span 1;
        grid-column: span 1;
    }
    
}