.dark-mode .card .card .card {
    background-color: #343a40;
    color: #fff;
}

    .dark-mode .card .card .card .badge-dark {
        background-color: #454d55;
        color: #ced4da;
    }

.page-item {
    z-index: 1;
    cursor: pointer;
}

    .page-item:not(:active):not(.active) .page-link:hover {
        z-index: 3;
        background-color: #ffc107;
        border-color: #ffc107;
        color: #000000;
    }

    .page-item.disabled {
        cursor: default;
    }

.large-text {
    font-size: 1.5rem;
}

.medium-text {
    font-size: 1.25rem;
}

.normal-text {
    font-size: 1rem;
}

.bg-light-gray {
    background-color: lightgray;
}

.table-scroll {
    max-height: 400px;
    overflow: auto;
}

.table-scroll-md {
    max-height: 600px;
    overflow: auto;
}

.table-scroll-lg {
    max-height: 800px;
    overflow: auto;
}

#QuestionNavigation {
    width: 40px;
    height: 40px;
}

#ModulePartialDiv {
    min-height: 700px;
}

#QuestionView {
    min-height: 400px;
}

.border-purple {
    border-color: #6f42c1 !important;
}

.border-maroon {
    border-color: #d81b60 !important;
}

.border-lightblue {
    border-color: #3c8dbc !important;
}

.border-fuchsia {
    border-color: #f012be !important;
}

.bg-whitesmoke {
    background-color: #ededed !important;
}

.lecture-choose-card {
    transition: box-shadow 0.3s ease-in-out;
}

    .lecture-choose-card:hover {
        box-shadow: 0 5px 15px rgb(0, 38, 255);
        cursor: pointer;
    }

.questionImage {
    border-radius: 0.25rem;
    transition: box-shadow 0.3s ease-in-out;
    user-select: none;
}

    .questionImage:hover {
        cursor: pointer;
        box-shadow: 0 5px 20px rgb(0, 38, 255);
    }

@media only screen and (max-width: 768px) {
    .large-text {
        font-size: 1.2rem !important;
    }

    .medium-text {
        font-size: 1.1rem !important;
    }
}

.hover-olive {
    transition: box-shadow 0.3s ease-in-out;
}

    .hover-olive:hover {
        box-shadow: 0px 0px 12px #3d9970 !important;
        cursor: pointer;
    }

.hover-navy {
    transition: box-shadow 0.3s ease-in-out;
}

    .hover-navy:hover {
        box-shadow: 0px 0px 12px #001f3f !important;
        cursor: pointer;
    }

.dark-mode .hover-navy:hover {
    box-shadow: 0px 0px 12px #ffffff !important;
    cursor: pointer;
}

.watermark-side-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 14px;
    color: black;
    opacity: 0.2;
    font-weight: 700;
}

    .watermark-side-text.left {
        left: 0;
    }

    .watermark-side-text.right {
        right: 0;
    }

.clickable-card-header {
    transition: 0.5s all;
}

    .clickable-card-header:hover {
        box-shadow: 0px 0px 10px black;
        cursor: pointer;
    }

.drop-shadow-black-sm {
    filter: drop-shadow(2px 4px 6px black);
}

.drop-shadow-black-md {
    filter: drop-shadow(3px 5px 7px black);
}

.drop-shadow-black-lg {
    filter: drop-shadow(4px 6px 8px black);
}

.btn-group-flex-row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: .25rem;
}

.dark-mode .pagination p {
    color: #ced4da !important;
}

.dark-mode .pagination .page-item:not(:active):not(.active) .page-link:hover {
    background-color: #3f6791;
    border-color: #3f6791;
    color: #fff;
}

.pagination {
    justify-content: center;
    border-radius: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

    .pagination .page-item.disabled {
        cursor: not-allowed;
    }

    .pagination .page-item.active {
        cursor: default;
    }

    .pagination p {
        margin-bottom: 0;
    }

.math-formula {
    font-size: 1.25rem;
}

.homework-unassigned-student-pool, .homework-assigned-student-pool {
    display: flex;
    padding: .5rem;
    border-radius: .5rem;
    border: 1px Dashed black;
    gap: .5rem;
    flex-wrap: wrap;
    max-height: 150px;
    overflow-y: auto;
    background-color: #e9ecef;
}

.dark-mode .homework-unassigned-student-pool {
    background-color: black;
}

.dark-mode .homework-assigned-student-pool {
    background-color: black;
}

.homework-student-assign-badge {
    cursor: pointer;
    padding: .5rem;
}