@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto-Regular.ttf);
}

*{
    font-family: Roboto;
}

.home{
    background: #ffffff;
    display: flex;
    padding-left: 450px;
    padding-top: 120px;
    /*justify-content: center; !* Centers horizontally *!*/
    /*align-items: center;    !* Centers vertically *!*/
    color: #0b0c0c;
}

.title{
    font-size: 40px;
}

.text_input{
    font-family: Roboto;
    width: 400px;
    font-size: 20px;
    padding: 10px;
    border: solid #0b0c0c;
    cursor: pointer;
}

.text_input:focus{
    border-color: #0b0c0c;
    outline: 3px solid #ffdd00; /* Add yellow outline when focused */
}

.submit{
    font-weight: bold;
    cursor: pointer;
    font-family: Roboto;
    padding: 10px;
    font-size: 16px;
    width: 250px;
    background: #00703c;
    border: none;
    color: white;
}

.submit:hover {
    background-color: #004a27; /* Darker green on hover */
}

/*Navbar*/

.nav_bar {
    background: #f3f2f1;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between; /* Changed to space-between to push items apart */
    align-items: center;
    padding: 0 16px;
}

.nav_left, .nav_right {
    display: flex;
    align-items: center;
}

.navbar_li {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.navbar_li a {
    display: block;
    color: #1d70b8;
    text-align: center;
    padding: 15px 20px;
    text-decoration: none;
    position: relative;
    font-family: roboto;
    font-size: 20px;
    font-weight: bold;
}

.navbar_li a:hover::after,
.navbar_li a.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background-color: #1d70b8;
}

.navbar_li a:hover,
.navbar_li a.active {
    color: #003078;
    background: #f3f2f1;
}

.full_page_styling{
    padding-left: 100px;
    padding-right: 100px;
}

.notification_container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around; /* Distribute space around the tables */
    align-items: flex-start;
}

.notification_table {
    font-size: 20px;
    font-family: Roboto;
    border-collapse: separate;
    border-spacing: 0;
    width: 30%; /* Adjust the width to fit three tables side by side */
    box-sizing: border-box; /* Ensures padding and border are included in the width */
    margin-right: 10px; /* Adjust spacing between tables */
    overflow: hidden;
}

.notification_table_th {
    /*border: 1px solid black;*/
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ccc;
}

.notification_table_td {
    /*border: 1px solid black;*/
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ccc;
}

#out_date th{
    background-color: #E23A23;
}

#near_out_date th {
    background-color: #FC7500;
}

#far_out_date th{
    background-color: #31A719;
}

#below_min_dose th{
    background-color: #3D3B8E;
}

.secondary_button{
    background: #b1b4b6;
    border: none;
    font-size: 16px;
    font-family: Roboto;
    padding: 10px;
    cursor: pointer;
}

.secondary_button:focus{
    background: #ffdd00;
    outline: 3px solid #ffdd00; /* Add yellow outline when focused */
}

.text-element {
    font-size: 20px; /* Adjust font size */
    color: #000; /* Adjust text color */
    font-weight: bold;
    padding-bottom: 5px;
}

.text-element-faded {
    font-size: 20px; /* Adjust font size */
    color: rgba(0, 0, 0, 0.75); /* Adjust text color */
    padding-bottom: 5px;
}

.text_area{
    padding: 10px;
    width: 650px;
    height: 150px;
    font-size: 20px;
    font-family: Roboto;
    border: solid #000;
}

.text_area:focus {
    border-color: #0b0c0c;
    outline: 3px solid #ffdd00; /* Add yellow outline when focused */
}

.back_link{
    text-decoration: none;
    color: #0b0b0c;
}

.back_link:hover{
    text-decoration: none;
    border-bottom: 2px solid #0b0b0c;
}

.download_template{
    font-size: 16px;
    font-family: Roboto;
    padding: 15px;
    background-color: #00703c;
    border: none;
    cursor: pointer;
}

.download_template a{
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
}

.download_template:hover {
    background-color: #004a27; /* Darker green on hover */
}

.file_upload{
    font-family: Roboto;
    font-size: 16px;
    cursor: pointer;
}

.small_submit{
    font-weight: bold;
    cursor: pointer;
    font-family: Roboto;
    padding: 10px;
    font-size: 16px;
    width: 100px;
    background: #00703c;
    border: none;
    color: white;
}

.small_submit:hover {
    background-color: #004a27; /* Darker green on hover */
}

.small_int_input{
    font-family: Roboto;
    width: 50px;
    font-size: 20px;
    padding: 10px;
    border: solid #0b0c0c;
    cursor: pointer;
}

.small_int_input:focus{
    border-color: #0b0c0c;
    outline: 3px solid #ffdd00; /* Add yellow outline when focused */
}

.smaller_int_input{
    font-family: Roboto;
    width: 100px;
    font-size: 20px;
    padding: 10px;
    border: solid #0b0c0c;
    cursor: pointer;
}

.smaller_int_input:focus{
    border-color: #0b0c0c;
    outline: 3px solid #ffdd00; /* Add yellow outline when focused */
}

select {
    background-color: transparent;
    border: solid #0b0c0c;
    padding: 10px;
    font-size: 20px;
    color: #0b0c0c;
    width: 300px;
    cursor: pointer;
    outline: none;
    font-family: Roboto;
}

select::after {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

select:focus {
    border-color: #0b0c0c;
    outline: 3px solid #ffdd00; /* Add yellow outline when focused */
}

select option {
    font-family: Roboto;
    background-color: white;
    color: #333;
    font-size: 16px;
    /*padding: 10px;*/
}

.administer_choose_student{
    font-size: 20px;
}

.administer_choose_student_td {
    border-bottom: 1px solid #ccc;
}

.temp_date_field{
    padding: 10px;
    font-family: Roboto;
    font-size: 16px;
    border: solid #0b0b0c;
}

.temp_date_field:focus {
    border-color: #0b0c0c;
    outline: 3px solid #ffdd00; /* Add yellow outline when focused */
}

.temp_time_field{
    padding: 10px;
    font-family: Roboto;
    font-size: 16px;
    border: solid #0b0b0c;
}

.temp_time_field:focus {
    border-color: #0b0c0c;
    outline: 3px solid #ffdd00; /* Add yellow outline when focused */
}

.searchbar{
    justify-content: center;
}

.search_bar{
    font-family: Roboto;
    width: 400px;
    font-size: 16px;
    padding: 10px;
    border: solid #0b0c0c;
    cursor: pointer;
}

.text_input:focus{
    border-color: #0b0c0c;
    outline: 3px solid #ffdd00; /* Add yellow outline when focused */
}

/* Table Styling */
.big_table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

/* Table Header Styling */
.big_table_th {
    font-weight: bold;
    padding: 12px; /* Padding for table header cells */
    text-align: left;
    border-bottom: 1px solid #0b0b0c; /* Light gray border */
    font-size: 20px;
}

/* Table Data Styling */
.big_table_td {
    padding: 12px; /* Padding for table data cells */
    text-align: left;
    border-bottom: 1px solid #0b0b0c; /* Light gray border */
    font-size: 20px;
}


/* Add additional spacing between rows */
.big_table tr {
    border-bottom: 1px solid #0b0b0c; /* Light gray border */
}

/* Pagination Styling */
.pagination {
    text-align: center;
    margin-top: 20px;
}

.pagination a,
.pagination .active {
    display: inline-block;
    margin: 0 5px;
    padding: 8px 16px;
    text-decoration: none;
    color: #007bff;
    background-color: #f1f1f1;
    transition: background-color 0.3s, color 0.3s;
}

.pagination a:hover {
    background-color: #007bff;
    color: white;
}

.pagination .active {
    background-color: #007bff;
    color: white;
    font-weight: bold;
}

.pagination a:disabled {
    color: #aaa;
    border: 1px solid #ddd;
    pointer-events: none;
}

.remove_a{
    text-decoration: none;
    color: white;
}


.blue_submit{
    font-weight: bold;
    cursor: pointer;
    font-family: Roboto;
    padding: 10px;
    font-size: 16px;
    width: 250px;
    background: #1d70b8;
    border: none;
    color: white;
}

.blue_submit:hover {
    background-color: #165084; /* Darker green on hover */
}

.success-banner {
    border-left: 4px solid #00703c;
    padding: 16px 20px;
    font-family: Roboto;
    width: 750px;
    box-sizing: border-box;
}

.success-header {
    background-color: #00703c;
    color: white;
    padding: 8px 20px;
    margin: -16px -20px 16px -20px;
}

.success-header h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
}

.success-content {
    color: #0b0c0c;
}

.success-content p {
    margin: 0;
    font-size: 16px;
    word-wrap: break-word;
}

.success-content p + p {
    margin-top: 8px;
}

.success-content a {
    color: #0b0c0c;
    text-decoration: underline;
}

.success-content a:hover {
    text-decoration: none;
}

.error-banner {
    border-left: 4px solid #d4351c;
    padding: 16px 20px;
    font-family: Roboto;
    width: 750px;
    box-sizing: border-box;
}

.error-header {
    background-color: #d4351c;
    color: white;
    padding: 8px 20px;
    margin: -16px -20px 16px -20px;
}

.error-header h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
}

.error-content {
    color: #0b0c0c;
}

.error-content p {
    margin: 0;
    font-size: 16px;
    word-wrap: break-word;
}

.error-content p + p {
    margin-top: 8px;
}

.error-content a {
    color: #0b0c0c;
    text-decoration: underline;
}

.error-content a:hover {
    text-decoration: none;
}

.centered-form {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
}

.centered-form form {
    text-align: center; /* Align content inside the form */
}