body {
    margin: 0;
    padding: 0;
}

.hide-link {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/*.btn-VCcustom {*/
/*    background-color: #F58120;*/
/*    border-color: #F58120;*/
/*    color: #1a1a1a;*/
/*}*/

/*.btn-VCcustom:hover {*/
/*    background-color: #e26f10;*/
/*    border-color: #e26f10;*/
/*}*/
/*Maybe use this color for the button in the future, for now i don't love it.*/

.bg-ci-color {
    background-color: #F58120;
}

.bg-ci-color .navbar-brand {
    /*color: white;*/
    color: #1a1a1a;   
    font-size: 250%;
}

.navbar {
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 100%; /* Limit to the width of the viewport */
    overflow: hidden; /* Hide any content that overflows */
}

.bg-ci-color .navbar-nav .nav-link {
    /*color: white;*/
    color: #1a1a1a;   
}

.nav-item {
    display: flex;
    justify-content: center;
}

.nav-link.active {
    text-decoration: underline #1a1a1a 3px;
    text-underline-offset: 5px;
    pointer-events: auto; /* Make it clickable while active */
}

.nav-link:hover {
    text-decoration: underline #1a1a1a 3px;
    text-underline-offset: 5px;
}

#main-content {
    padding: 1rem;
}

.container-fluid {
    padding: 0;
}

.select2-container--bootstrap-5 .select2-selection {
    width: 100% !important;
    max-width: 100%; /* Ensure it doesn't exceed the container's width */
    border: 1px solid #000000;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: #000000;
}

/* For search bar tutors/courses*/
.search-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.search-container input {
    width: auto;
    flex-grow: 1;
    max-width: 400px; /* Adjust as needed */
}

/* For dark mode */
.dark-mode .select2-container--bootstrap-5 .select2-dropdown {
    background-color: #222529;
    color: #fff;
}

.dark-mode .select2-container--bootstrap-5 .select2-results__option {
    background-color: #222529;
    color: #fff;
}

.dark-mode .select2-selection__arrow {
    color: #fff; /* Set the color to white */
}

.dark-mode .select2-container--bootstrap-5 .select2-results__option.select2-results__option--highlighted {
    background-color: #4a4a4a; /* Adjust the highlighted background color */
    color: #fff;
}

.dark-mode .select2-container--bootstrap-5 .select2-selection {
    width: 100% !important;
    max-width: 100%; /* Ensure it doesn't exceed the container's width */
    background-color: #222529;
    color: #fff;
}

.dark-mode .select2-container--bootstrap-5 .select2-selection__arrow {
    color: #fff !important;
}

/* Adjust initial text color */
.dark-mode .select2-container--bootstrap-5 .select2-selection__placeholder {
    color: #ccc; /* Change this color as needed */
}

/* Adjust selected option text color */
.dark-mode .select2-container--bootstrap-5 .select2-selection .select2-selection__rendered {
    color: #fff; /* Adjust this color as needed */
}

.dark-mode .select2-container--bootstrap-5 .select2-selection--single {
    border-color: #fff;
}

.form-check {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center elements horizontally */
}

.form-check-label {
    display: flex;
    justify-content: center; /* Center the icon horizontally */
    align-items: center; /* Center the icon vertically */
    
}

.form-check-label i {
    margin-top: 5px;
    line-height: 1; /* Reset line height to center vertically */
    margin-left: -40px; /* Move the icon to the left */
}

.form-check-input {
    width: auto; /* Ensure the toggle switch has proper width */
}

.select-container {
    width: 100%;
}

#table-container {
    margin-left: 0;
    padding-left: 0;
    margin-right: 0;
    padding-right: 20;
}

table {
    table-layout: fixed;
}

th, td {
    width: 33.33%; 
}

.square {
    width: 20px;
    height: 20px;
}

.color-square-blue {
    background-color: #0000FF;
}

.dark-mode .color-square-blue {
    background-color: #6FA8FF;
}

.color-square-red {
    background-color: #C62828; /*EC5B5B*/
}

.dark-mode .color-square-red {
    background-color: #EC5B5B; /*C62828*/
}

.color-square-gray {
    background-color: #808080;
}

.table-danger, .table-danger > th, .table-danger > td {
    background-color: #c62828;
    color: #fff; /* Optionally, change the text color to make it more readable */
}

.table-info, .table-info > th, .table-info > td {
    background-color: #0000FF;
    color: #fff; /* Optionally, change the text color to make it more readable */
}