* {
    font-variant-ligatures: none;
}

.corner {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 50px;
    aspect-ratio: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    background: rgba(112, 122, 130, 0.25);
  }

.corner-parent {
    position: relative;
    top: -8px;
    right: -16px;
}

.corner .icon {
    position: absolute;
    right: 5px;
    top: 3px;
}

.card-header {
    min-height: 51px;
}

[data-layout=vertical] body[data-sidebartype=mini-sidebar] .show-sidebar .page-wrapper {
    margin-left:85px;
}

.card, .add-meeting-button, .submit-button {
    min-width: 155px;
}

.teacher-browse.card {
    min-width: 185px;
}

.card .table-responsive {
    border-radius: 18px;
}

.content-dd {
    right: -15px !important;
}

footer {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    min-width: 300px;
}

.footer_space {
    height: 50px;
}

.left-sidebar .brand-logo {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.left-sidebar .scroll-sidebar {
    padding-left: 12px;
}

svg {
    vertical-align: 0;
}

a svg, .roster-no-link svg, span.student_required svg, div.student-schedules svg {
    position: relative;
    top: -2px;
}

#browse_page a:not(.closed_meeting) svg {
    top: unset;
}

.meeting-card svg {
    top: 1px;
}

span.meeting-card svg, .meeting-card svg {
    position: relative;
}

a.sidebartoggler svg, .paste_meeting a svg, .teacher-browse .closed_meeting svg, .student-schedules.fs-6 svg {
    top: 2px;
}

li.dropdown a svg {
    top: 0px;
}

a.sidebar-link svg {
    top: 0px;
}

.note-tooltip {
    position: relative;
    top: 3px;
    left: 4px;
}

a {
    cursor: pointer;
}

.profile-picture-small {
    width: 40px;
    height: 40px;
}

.profile-picture-large {
    width: 90px;
    height: 90px;
}

.profile-picture-small, .profile-picture-large {
    object-fit: cover;
    object-position: top;
}

.btn-check+.btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.department-card-list {
    position: relative;
    margin-left: 5px;
    padding-left: 10px;
    width: calc(100% - 25px);
    border-left: 1px solid var(--bs-secondary-color);
}

.corner-rounded {
    border-radius: 0 18px 0 0;
}

@media (min-width: 992px) {
    .gap-2 .card.col-lg-4 {
        width: calc(33.33333333% - 8px);
    }

    .gap-3 .card.col-lg-3 {
        width: calc(25% - 12px);
    }
}

@media (min-width: 1300px) {
    .main-heading {
        padding-left: 100px;
        padding-right: 100px;
    }
}

.card-footer {
    min-height: 45px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.card-footer:not(.disabled) {
    cursor: pointer;
}

.card-footer:hover:not(.disabled, .warning, .attendance), .attendance-icon:hover {
    background-color: #E4EDF5;
}

.card-footer:active:not(.disabled, .attendance) {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.ti-plus {
    position: relative;
    top: 2px;
}

.department-header {
    position: sticky;
    top: -17px;
    background-color: white;
    z-index: 999;
}

.admin-department-header {
    position: sticky;
    top: 0px;
    background-color: white;
    z-index: 999;
}

.student-browse .department-header {
    top: 69px;
}

#browse_page .department-header {
    top: 69px;
    margin-left: -5px;
    margin-right: -5px;
    padding-left: 5px;
    padding-right: 5px;
}

.topbar {
    z-index: 1000;
}

.dark-transparent {
    z-index: 1001 !important;
}

.left-sidebar {
    z-index: 1002;
}

.loading {
    cursor: default;
    pointer-events: none;
}

.loading:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background: rgba(255, 255, 255, .8);
}

.card-header-loader .loading:before {
    background: unset;
}

.no-background .loading:before {
    background: unset;
}

.loading:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    margin: -1.5em 0 0 -1.5em;
    width: 3em;
    height: 3em;
    animation: spinner .6s linear;
    animation-iteration-count: infinite;
    border-radius: 500rem;
    border-color: #767676 rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .1);
    border-style: solid;
    border-width: .2em;
    box-shadow: 0 0 0 1px transparent;
    visibility: visible;
    z-index: 1001;
}

.loading.tiny:after {
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
}

.tiny-loader-container {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 4px;

    &.card-header-loader {
        top: 2px;
        margin-right: -1px;
    }

    &.student-schedule {
        top: 2px;
        margin-right: 0px;
    }
}

.teacher-browse .tiny-loader-container {
    top: 3px;
    margin-right: 0px;
}

@keyframes spinner {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

#toast-container {
    top: 25px;
    padding-left: var(--current-left-margin);
}

.favorite-teachers-grid {
    grid-template-columns: repeat(auto-fill, 190px);
}

.favorite-rooms-grid {
    grid-template-columns: repeat(auto-fill, 140px);
}

.favorites-button:hover {
    background-color: #E4EDF5;
    color: #4380B5;
}

.favorites-button.active:hover {
    background-color: #4380B5;
    color: white;
}

.positive {
    background-color: var(--bs-success);
    color: white;
}

.warning {
    background-color: var(--bs-warning);
    color: white;
}

.warning:hover {
    background-color: #F5A946;
}

.negative {
    background-color: var(--bs-danger);
    color: white;
}

.attendance-icon svg {
    height: 50px;
    width: 30px;
    position: relative;
    top: 5px;
}

.card-footer.attendance {
    height: 60px;
    border-top: 1px solid #DDDDDD;
}

.attendance-icon.present {
    border-radius: 0 0 0 16px;
    border-right: 1px solid #DDDDDD;

    &.selected {
        background-color: var(--bs-green);
        color: white;
    }
}

.attendance-icon.tardy.selected {
    background-color: var(--bs-yellow);
    color: white;
}

.attendance-icon.absent {
    border-radius: 0 0 16px 0;
    border-left: 1px solid #DDDDDD;

    &.selected {
        background-color: var(--bs-red);
        color: white;
    }
}

.attendance-grid {
    grid-template-columns: repeat(auto-fill, 230px);
}

.roster-grid {
    grid-template-columns: repeat(auto-fill, 218px);
}

.close-link a {
    position: absolute;
    right: 5px;
    top: 7px;

    svg {
        top: 0px;
        height: 25px;
        width: 25px;
    }
}

.login-button {
    margin-left: 94.18px;
}

.left-sidebar .scroll-sidebar {
    height: calc(100% - 85px);
}

.home-icon {
    position: relative;
    top: 7px;
}

.nav-arrow-icon {
    position: relative;
    top: 2px;
}

.home-card-color {
    background-color: var(--bs-primary);
}

.form-floating textarea {
    height: 150px !important;
}

.light-text {
    color: var(--bs-gray-500);

    a {
        color: #305C82;
    }

    a:hover {
        color: #4380B5;
    }
}

.features-list {
    list-style-type: disc;
    list-style-position: inside;
    
    li {
        margin-bottom: 15px;
    }

    li:before {
        content: "";
        margin-left: -8px
    }
}

.toast ul {
    list-style-type: disc;
    list-style-position: inside;
}

.toastr-wide .toast-warning {
    width: 400px !important;
}

.schedule-navigation-icon svg {
    position: relative;
    top: 10px;
}

.card-footer.teacher-schedule {
    border-top: 1px solid #DDDDDD;
    background-color: white;
}

.card-footer.delete_confirmation {
    cursor: unset;
}

.card-footer.delete_confirmation:hover, .card-footer.delete_confirmation:active {
    background-color: unset;
    box-shadow: unset;
}

.week-loading-container {
    top: -7px;

    &.tiny-loader-container {
        height: unset;
    }
}

label.multi-select-label, label.floating-select2-label, label.floating-selectize-label {
    font-size: 14.4px;
    color: var(--bs-modal-color);
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    padding: 1rem 16px;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;

    &.selected {
        color: rgba(var(--bs-body-color-rgb), .65);
        transform: scale(.85) translateY(-.5rem) translateX(.15rem);
        transform-origin: 0px 0px;
    }
}

.select2-selection {
    border-color: #AEBCC3 !important;
    border-radius: .5rem !important;
    min-height: 58px !important;
    padding: 0 !important;
}

.select2-selection.no-bottom-radius, .form-control.selectize-control.single:has(.dropdown-active) {
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.select2-search__field {
    margin: 0px !important;
    padding: 0px !important;
    color: rgb(112, 122, 130);
    font-weight: 500;
    line-height: 18px;
    position: relative;
    top: 24px;
    left: 16px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection {
    border-color: rgb(161, 192, 218) !important;
}

li.select2-selection__choice {
    margin-bottom: 2px !important;
}

.multi-select-spacer {
    height: 19px;
    width: 0;
}

.hide-selected-results .select2-dropdown:not(.show-results) .select2-results__option--selected {
    display: none;
}

.floating-select2 .select2-selection__arrow {
    margin-top: 8px;
}

.floating-select2 .select2-selection__rendered {
    margin-top: 16px;
    margin-left: 8px;
}

body .datepicker table tr td.today:not(.active) {
    color: #000000 !important;
    background-color: #FFDB99 !important;
    border-color: #FFB733 !important;
}

body .datepicker table tr td.today:hover:not(.active) {
    color: #000000 !important;
    background-color: #FFC966 !important;
    border-color: #F59E00 !important;
}

.datepicker {
    margin-left: 5px;
}

.form-control:disabled, .form-floating:has(.form-control:disabled) + span.input-group-text, .form-floating>.form-control:disabled~label::after {
    background-color: #EEEEEE;
}

.was-validated .form-control:invalid + span.select2-container .select2-selection, .was-validated .form-select:invalid + span.select2-container .select2-selection, .was-validated .form-control.selectize-control.single:has(input:invalid) {
    border-color: var(--bs-form-invalid-border-color) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23fb977d'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23fb977d' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 33px center;
    background-size: calc(.75em + 8px) calc(.75em + 8px);
}

.was-validated .form-control.selectize-control.single:has(input:invalid) + .invalid-feedback {
    display: unset;
}

.was-validated .form-select:valid + span.select2-container .select2-selection, .was-validated .form-select:invalid + span.select2-container .select2-selection {
    background-position: right calc(.375em + 4px) center;
}

.was-validated .form-control:invalid + span.select2-container .select2-selection:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
}

.was-validated .form-control:valid + span.select2-container .select2-selection, .was-validated .form-select:valid + span.select2-container .select2-selection, .was-validated .form-control.selectize-control.single:has(input:valid) {
    border-color: var(--bs-form-valid-border-color) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234bd08b' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 33px center;
    background-size: calc(.75em + 8px) calc(.75em + 8px);
}

.was-validated .form-control:valid + span.select2-container .select2-selection:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), .25);
}

.was-validated .form-floating:has(.form-control:invalid) + span.input-group-text {
    height: 58px;
}

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

input[type=number] {
    -moz-appearance: textfield;
    appearance: none;
}

.not-rounded {
    border-radius: 0px;
}

@media (max-width: 1089px) {
    #week_1_title {
        position: relative;
        bottom: -1px;
    }
}

@media (max-width: 956px) {
    #week_1_title {
        position: relative;
        bottom: -2px;
    }
}

.teacher-schedule-button {
    min-width: 170px;
}

@media (max-width: 992px) {
    .roster-grid {
        grid-template-columns: repeat(auto-fill, 50%);
    }
}

.form-switch:has(#hide_present_students) {
    float: right;
}

.attendance-icon.disabled, .schedule-navigation-icon.disabled {
    pointer-events: none;
    opacity: .5;
}

.card-footer:has(.disabled) {
    cursor: default;
}

.attendance-icon:active:not(.disabled) {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.floating-selectize .form-control {
    padding: 0px;
    height: 58px;
}

.selectize-input {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    cursor: text !important;
}

.floating-selectize .selectize-input {
    height: 58px;
}

.selectize-dropdown-content {
    background-color: white;
    border: 0.666667px solid rgb(230, 236, 241);
    border-radius: 4px;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 14.4px;
    font-weight: 500;
    line-height: 21.6px;
    color: var(--bs-body-color);
}

.single.selectize-dropdown.form-control {
    top: 58.5px !important;
    height: unset;
    border: none;
}

.selectize-dropdown-content .option {
    padding: 8px 10px !important;
}

.selectize-dropdown-content .option:hover, .selectize-dropdown-content .option.selected, .selectize-dropdown-content .active {
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.selectize-input.dropdown-active::before {
    height: 0px !important;
}

.selectize-input input, .selectize-input div.item {
    color: rgb(112, 122, 130) !important;
    font-weight: 500 !important;
    font-size: 14.4px !important;
    left: 8px !important;
    top: 19px;
}

.selectize-input div.item {
    position: relative;
}

.selectize-control.form-control.single:has(.dropdown-active) {
    border-color: rgb(161, 192, 218) !important;
}

.development-message {
    position: fixed;
    top: 0px;
    left: 0px;
    font-size: 20px;
    z-index: 99999;
    background-color: lightgray;
}

.select2-selection__clear {
    margin-top: 11px !important;
}

.team_teachers_form, .team_courses_form {
    max-width: 500px;
}

span.select2-selection.select2-selection--multiple.select2-selection--clearable {
    padding-right: 33px !important;
}

.selectize-dropdown-content, .select2-dropdown {
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175)
}

.teacher-student-schedules-checkbox {
    position: relative;
    top: 10px;
}

.past-meetings-card {
    position: sticky;
    top: -94px;
    z-index: 999;
}

label.disabled_label {
    opacity: 0.5;
}

a.upcoming_red {
    background-color: rgba(219, 40, 40, .67);
    color: black;
}

a.upcoming_orange {
    background-color: rgba(242, 98, 2, .67);
    color: black;
}

a.upcoming_green {
    background-color: rgba(22, 171, 57, .67);
    color: black;
}

.selectable {
    cursor: pointer;
}

.selectable:hover {
    background-color: var(--bs-primary-bg-subtle) !important;
}

.no_border {
    border-width: 0px !important;
}

.bg-info {
    background-color: #4380b5 !important;
}

.progress, .progress-bar {
    height: 20px;
}

.progress {
    background-color: #e9ecef !important;
}