.login-card {
    display: inline-block;
    width: 300px; /* Adjust width as needed */
    padding: 0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.card-header {
    width: 100%;
    text-align: left; /* Align text to the left */
    background-color: #f8f9fa; /* Match the card background */
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: 0; /* Remove any margin */
    box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
}

.mr-2 {
    margin-right: 0.5rem;
}

.card-title {
    margin: 0;
    font-size: 1.25rem; /* Adjust font size as needed */
}


.card-body {
    padding: 2rem;
}

.table tbody tr:hover {
    background-color: #d1e7fd; /* Light blue color for hover effect */
    cursor: pointer;
}

.form-input{
    display: table;
}

.form-cells{
    display: table-cell
}

.table tbody tr {
    transition: background-color 0.3s ease;
}

.table {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}


@media (max-width: 1200px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table thead {
        display: none;
    }

    .table tbody, .table tr, .table td {
        display: block;
        width: 100%;
    }

    .table tr {
        margin-bottom: 1rem;
    }

    .table td {
        text-align: right;
        padding-left: 50%; /* Adjust padding to accommodate the data-label */
        position: relative;
    }

    .table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 15px; /* Adjust as necessary */
        font-weight: bold;
        text-align: left;
    }

    .table td .transcript {
        margin-top: 20px; /* Set top margin to 20px */
        text-align: left; /* Ensure text alignment is left */
        margin-left: 8px;
        white-space: normal; /* Prevent text from being cut off */
    }
}


.login-navbar {
    max-width: 1200px; /* Set the max-width to match a medium screen */
    margin: auto;
    border-bottom-left-radius: 10px; /* Round the bottom left corner */
    border-bottom-right-radius: 10px; /* Round the bottom right corner */
    border: 1px solid #d3d3d3;
}

.navbar-toggler {
    display: none;
}

.dropdown-menu a {
    display: flex;           /* Use flexbox for alignment */
    align-items: center;     /* Vertically center the content */
    width: 100%;             /* Ensure they take up the full width */
    padding: 0.5rem 1rem;    /* Add padding to make them clickable */
    color: #000;             /* Adjust the text color if necessary */
    text-decoration: none;   /* Remove underlines */
}

.dropdown-menu a:hover {
    background-color: #204d74;
    color: #fff;
}

.dropdown-menu a span {
    flex-grow: 1;            /* Make the span take up the remaining space */
}

/* Style for the selected number */
.selected-number .page-link {
    background-color: #204d74;
    color: #fff !important;
}

/* Style for the unselected numbers and text (previous/next) */
.pagination .page-item a,
.pagination .page-item span {
    color: #204d74;
}

.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus {
    background-color: #204d74;
    border-color: #204d74;
    color: #fff !important;
}

/* This is needed to get rid of the line that was appearing. */
span.card {
    border: none;
}


.modal-backdrop {
  z-index: 1040 !important;
}

.modal {
  z-index: 1055 !important;
}








