/* *** ACCORDIONS *** */
.accordion {
    --bs-accordion-btn-padding-x: .9rem;
    --bs-accordion-btn-padding-y: .75rem;
    --bs-accordion-body-padding-x: .9rem;
    --bs-accordion-body-padding-y: .6rem;
    --bs-accordion-active-bg: #0dcaf054;
    --bs-accordion-btn-icon-width: 1.5rem;

    /* other overrides */
    }

    /* *** LAYOUT *** */

/* Header flex layout to replace inline style */
.header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Remove text decoration from links */
.no-text-decoration {
    text-decoration: none;
}

    /* *** BUTTONS *** */

/* should be used on most buttons, keep them short as possible */
.fixed-size-button {
    height: 1.875rem; /* 30px / 16px = 1.875rem */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

.sm-special-btn {
    height: 1.375rem; /* 22px / 16px = 1.875rem */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.75rem; /* 12px / 16px = 0.75rem */
    }

/* letter small width for just one letter, approximately 36px */
.letter-sm-width {
    width: 2.25rem; /* 36px / 16px = 2.25rem */
    }

/* letter small width for just one letter, approximately 32px */
.letter-xs-width {
    width: 2rem; /* 32px / 16px = 2rem */
    }

/* letter small height for just one letter, approximately 32px */
.letter-xs-height {
    height: 1.667rem; /* 26.67px / 16px = 1.667rem */
    }

        /* *** ALIGNMENT *** */

/* used primarily for buttons so they don't rest at the top or bottom of a div */
.vertical-center {
    display: flex;
    align-items: center;
    }

/* align bottom */
.vertical-bottom {
    display: flex;
    align-items: flex-end;
    }

/* align top */
.vertical-top {
    display: flex;
    align-items: flex-start;
    }

/* can be used to center something completely */
.all-center {
    display: flex;
    align-items: center;
    justify-content: center;
    }

/* can be used to right-align something completely */
.all-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    }

/* centers text or images horizontally */
.text-center {
    text-align: center;
    }

.hide-me {
    display: none;
    }

        /* *** COLORING, MARGINS, PADDING *** */

/* Used for most of the website rows */
.row {
    background-color: #cff4fc;
    }

/* Used for any smaller font size */
.sm-9 {
    font-size: 0.9rem;
}

.sm-75 {
    font-size: 0.75rem;
}

.table-responsive .table td {
    white-space: normal;
    word-wrap: break-word; /* Ensures long words can be broken and wrapped */
    }

.black-text {
    color: black;
    }

.bg-white {
    background-color: #ffffff
    }

.success {
    background-color: #d4edda;
    }

.error {
    background-color: #f8d7da;
    }

.warning {
    background-color: #fdedb8;
    }

        /* *** TOOLTIPS *** */

.custom-tooltip .tooltip-inner {
    background-color: #007bff !important; /* Change to your desired background color */
    color: #fff !important; /* Ensure text color is readable */
}

.custom-tooltip .arrow::before {
    border-color: transparent !important;
    border-bottom-color: #007bff !important; /* Arrow color, change if tooltip is in a different position */
}

        /* *** INPUT AND FORMS *** */

/* used for text input fields - keeps them short as possible */
.custom-input-height {
    height: 2.25rem; /* 36px / 16px = 2.25rem */
    max-width: 100%;
    }

        /* *** SPECIFIC PAGES *** */

/* class.html */
    /* timein timeout reset buttons */
    .ttr-width {
        width: 6rem; /* 96px / 16px = 6rem */
        min-width: 96px;
        }

    /* ttr justify right for 768px and up */
    /* used on "Buttons Explained" to keep elements a little closer together */
    @media (min-width: 768px) {
        .ttr-just-right {
            justify-content: flex-end;
        }
    }

    /* Blinking animation used for auto-refresh button */
    @keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 0.8; }
        100% { opacity: 1; }
    }

    #toggle-refresh.blink {
        animation: blink 1s linear 3;
        }

/* faq.html */
    .question {
        text-decoration: underline;
        color: blue;
        cursor: pointer;
        }

/* index.html */
    .videos-4-3 {
        width: 100%;
        aspect-ratio: 4 / 3;
        }

/* layout.html */
    /* bold button text, used on nav bar buttons */
    .btn_bold {
        font-weight: bold;
        }

    /* Used for the buttons in the navigation bar */
    .btn-nav-width {
        width: 5.9375rem; /* 95px / 16px = 5.9375rem */
        }

    .footer-text {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
        }

/* library.html */
    /* checkin checkout buttons 100px */
    .cio-width {
        width: 6.25rem; /* 100px / 16px = 6.25rem */
        min-width: 100px;
        }

/* login.html */
    /* aa = account actions */
    .aa-width {
        width: 10rem; /* 160px / 16px = 10rem */
        }

    .scroll-text {
        height: 145px;
        overflow: auto;
    }

    /* thumbails on login page */
    .img-thumbnail {
        border-radius: .4rem;
        }

    .thumbnail-link {
        display: inline-block;
        padding: 0.1875rem; /* 3px / 16px = 0.1875rem */
        outline: none;
        text-decoration: none;
        color: transparent;
        border: 0.125rem solid blue; /* 2px / 16px = 0.125rem */
        border-radius: 0.4rem;
        }

    .thumbnail-padding {
        padding: 0.1875rem;
        }

    .thumbnail-size {
        max-width: 108px;
        width: 90%;
        height: auto;
        }

    .thumbnail-size-mobile {
        max-width: 72px;
        width: 90%;
        height: auto;
        }

    .modal-img {
        max-width: 100%; /* Ensures the image does not exceed the width of its container */
        max-height: 90vh; /* Ensures the image does not exceed the height of the viewport */
        object-fit: contain; /* Maintains the image's aspect ratio and ensures it fits within the dimensions specified */
        display: block; /* Removes extra space below the image */
        margin: auto; /* Centers the image horizontally within its container */
    }

    .modal-dialog-custom {
        max-width: 80%;
        max-height: 90vh;
        display: flex; /* Allows for better control of the modal content's alignment */
        align-items: center; /* Vertically centers the modal content within the viewport */
        justify-content: center; /* Horizontally centers the modal content within the viewport */
    }

/* students.html */
    /* reactivate deactivate buttons */
    .e-width {
        width: 2.5rem; /* 40px / 16px = 2.5rem */
        }

    .rd-width {
        width: 6rem; /* 96px / 16px = 6rem */
        }

        /* *** MEDIA QUERIES *** */

@media (max-width: 449px) {
    .lt-450-mt-0 {
        margin-top: 0;
    }
    .lt-450-mt-1 {
        margin-top: 0.25rem; /* 4px / 16px = 0.25rem */
    }
    .lt-450-mt-2 {
        margin-top: 0.5rem; /* 8px / 16px = 0.5rem */
    }
    .lt-450-mt-3 {
        margin-top: 1rem; /* 16px / 16px = 1rem */
    }
    .lt-450-mb-0 {
        margin-bottom: 0;
    }
    .lt-450-mb-1 {
        margin-bottom: 0.25rem; /* 4px / 16px = 0.25rem */
    }
    .lt-450-mb-2 {
        margin-bottom: 0.5rem; /* 8px / 16px = 0.5rem */
    }
    .lt-450-mb-3 {
        margin-bottom: 1rem; /* 16px / 16px = 1rem */
    }
}

@media (max-width: 575px) {
    .lt-576-mb-0 {
        margin-bottom: 0;
    }
}

@media (min-width: 450px) and (max-width: 575px) {
    .gt-449-lt-576-mt-0 {
        margin-top: 0;
    }
    .gt-449-lt-576-mb-0 {
        margin-bottom: 0;
    }
    .gt-449-lt-576-pt-0 {
        padding-top: 0;
    }
    .gt-449-lt-576-pb-0 {
        padding-bottom: 0;
    }
}

@media (min-width: 450px) and (max-width: 767px) {
    .gt-449-lt-768-mt-0 {
        margin-top: 0;
    }
    .gt-449-lt-768-mb-0 {
        margin-bottom: 0;
    }
    .gt-449-lt-768-pt-0 {
        padding-top: 0;
    }
    .gt-449-lt-768-pb-0 {
        padding-bottom: 0;
    }
}

@media (min-width: 450px) and (max-width: 575px) {
    .hide-450-575 {
        display: none;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .gt-575-lt-768-mt-0 {
        margin-top: 0;
    }
    .gt-575-lt-768-mb-0 {
        margin-bottom: 0;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .gt-575-lt-992-mt-0 {
        margin-top: 0;
    }
    .gt-575-lt-992-mb-0 {
        margin-bottom: 0;
    }
    .gt-575-lt-992-pt-0 {
        padding-top: 0;
    }
    .gt-575-lt-992-pb-0 {
        padding-bottom: 0;
    }
}

@media (max-width: 767px) {
    .lt-768-mb-0, .lt-768-mt-0, .lt-768-pb-0, .lt-768-pt-0 {
        margin-bottom: 0;
        margin-top: 0;
        padding-bottom: 0;
        padding-top: 0;
    }
    .lt-768-mb-1 {
        margin-bottom: 0.25rem; /* Assuming 1 = 4px / 16px */
    }
    .lt-768-mt-1 {
        margin-top: 0.25rem; /* Assuming 1 = 4px / 16px */
    }
    .lt-768-mb-2 {
        margin-bottom: 0.5rem; /* Assuming 2 = 8px / 16px */
    }
    .lt-768-mt-2 {
        margin-top: 0.5rem; /* Assuming 2 = 8px / 16px */
    }
    .lt-768-pb-1 {
        padding-bottom: 0.25rem; /* Assuming 1 = 4px / 16px */
    }
    .lt-768-pt-1 {
        padding-top: 0.25rem; /* Assuming 1 = 4px / 16px */
    }
}

@media (min-width: 768px) {
    .gt-767-mt-0 {
        margin-top: 0;
    }
    .gt-767-mb-0 {
        margin-bottom: 0;
    }
    .gt-767-mt-1 {
        margin-top: 0.25rem; /* Bootstrap's mt-1 */
    }
    .gt-767-mb-1 {
        margin-bottom: 0.25rem; /* Bootstrap's mb-1 */
    }
    .gt-767-mt-2 {
        margin-top: 0.5rem; /* Bootstrap's mt-2 */
    }
    .gt-767-mb-2 {
        margin-bottom: 0.5rem; /* Bootstrap's mb-2 */
    }
    .gt-767-mt-3 {
        margin-top: 1rem; /* Bootstrap's mt-3 */
    }
    .gt-767-mb-3 {
        margin-bottom: 1rem; /* Bootstrap's mb-3 */
    }
    .gt-767-pt-0 {
        padding-top: 0;
    }
    .gt-767-pb-0 {
        padding-bottom: 0;
    }

}

@media (min-width: 768px) and (max-width: 991px) {
    .gt-767-lt-992-mb-0 {
        margin-bottom: 0;
    }
    .gt-767-lt-992-pb-0 {
        padding-bottom: 0;
    }
    .gt-767-lt-992-mb-1 {
        margin-bottom: 0.25rem; /* Bootstrap's mb-1 */
    }
    .gt-767-lt-992-pb-1 {
        padding-bottom: 0.25rem; /* Bootstrap's pb-1 */
    }
    .gt-767-lt-992-mb-2 {
        margin-bottom: 0.5rem; /* Bootstrap's mb-2 */
    }
    .gt-767-lt-992-pb-2 {
        padding-bottom: 0.5rem; /* Bootstrap's pb-2 */
    }
    .gt-767-lt-992-mb-3 {
        margin-bottom: 1rem; /* Bootstrap's mb-3 */
    }
    .gt-767-lt-992-pb-3 {
        padding-bottom: 1rem; /* Bootstrap's pb-3 */
    }
}

@media (min-width: 992px) {
    .gt-991-mt-0 {
        margin-top: 0;
    }
    .gt-991-mb-0 {
        margin-bottom: 0;
    }
    .gt-991-mt-1 {
        margin-top: 0.25rem;
    }
    .gt-991-mb-1 {
        margin-bottom: 0.25rem;
    }
    .gt-991-mt-2 {
        margin-top: 0.5rem;
    }
    .gt-991-mb-2 {
        margin-bottom: 0.5rem;
    }
    .gt-991-pt-0 {
        padding-top: 0;
    }
    .gt-991-pb-0 {
        padding-bottom: 0;
    }

}

@media (max-width: 991px) {
    .lt-992-mb-0 {
        margin-bottom: 0;
    }
    .lt-992-mt-0 {
        margin-top: 0;
    }
    .lt-992-mb-1 {
        margin-bottom: 0.25rem;
    }
    .lt-992-mt-1 {
        margin-top: 0.25rem;
    }
    .lt-992-mb-2 {
        margin-bottom: 0.5rem;
    }
    .lt-992-mt-2 {
        margin-top: 0.5rem;
    }
    .lt-992-pt-0 {
        padding-top: 0;
    }
    .lt-992-pb-0 {
        padding-bottom: 0;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .gt-991-lt-1200-mt-0 {
        margin-top: 0;
    }
    .gt-991-lt-1200-mb-0 {
        margin-bottom: 0;
    }
    .gt-991-lt-1200-mt-1 {
        margin-top: 0.25rem;
    }
    .gt-991-lt-1200-mb-1 {
        margin-bottom: 0.25rem;
    }
    .gt-991-lt-1200-pt-0 {
        padding-top: 0;
    }
    .gt-991-lt-1200-pb-0 {
        padding-bottom: 0;
    }

}

@media (min-width: 1024px) and (max-width: 1199px) {
    .gt-1023-lt-1200-mb-0 {
        margin-bottom: 0;
    }
    .gt-1023-lt-1200-mt-0 {
        margin-top: 0;
    }
}

@media (max-width: 1023px) {
    .lt-1024-mt-0 {
        margin-top: 0;
    }
    .lt-1024-mb-0 {
        margin-bottom: 0;
    }
    .lt-1024-mt-2 {
        margin-top: 0.5rem;
    }
    .lt-1024-mb-2 {
        margin-bottom: 0.5rem;
    }
    .lt-1024-pb-0 {
      padding-bottom: 0;
    }
}

@media (max-width: 1199px) {
    .lt-1200-mt-0 {
        margin-top: 0;
    }
    .lt-1200-mb-0 {
        margin-bottom: 0;
    }
    .lt-1200-mt-2 {
        margin-top: 0.5rem; /* Corrected comment if needed */
    }
    .lt-1200-mb-2 {
        margin-bottom: 0.5rem; /* Corrected comment if needed */
    }
    .lt-1200-pb-0 {
      padding-bottom: 0; /* Removes the bottom padding */
    }
}