/* General Styles */
/*testinglang*/
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 100px;
    box-sizing: border-box;
}

h2{
    margin-bottom: 0;
    margin-top: 0;
}
/* Admin Pages Styles */
#home {
    margin-right: 4vw;
    margin-left: 2vw;
    margin-bottom: 6vh;
}

#requestList {
    margin-right: 4vw;
    margin-left: 2vw;
    margin-bottom: 6vh;
}

#manageUsers {
    margin-top: 3vh;
    margin-right: 4vw;
    margin-left: 2vw;
    margin-bottom: 6vh;
}


#appointment {
    margin-right: 4vw;
    margin-left: 2vw;
    margin-bottom: 6vh;
}



#requestListContent {
    margin-right: 3vw;
}

#tabContents {
    margin-top: 3vh; /* Add this to move the div down */

}

/* Header Styles */
.header-content {
    display: flex;
    align-items: center;
}

.admin-logo {
    display: flex;
    align-items: center;
    
}

.admin-logo img {
    height: 75px;
    width: 75px;
    margin-left: 40px; /* Add spacing between logo and text */
}

.admin-logo h3,
.admin-logo h4 {
    font-size: 13px;
    color: white;
    font-weight: bold;
    padding-left: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sub-name{
    font-size: 18px; 
margin-left: 1px; 
font-family:Georgia, 'Times New Roman', Times, serif;
padding-left: 8px;
}

.admin-logo h3,
.admin-logo-text h4, .admin-logo-text p {
    margin: 0; /* Remove extra margin */
    font-size: 10px;
}

.sub-name {
    font-size: 13px;
    margin-top: 0;
    color: #f5f1f1;
}

.header {
    background-color: #550000;
    display: flex;
    justify-content: space-between; /* Space between logo + menu and icons */
    color: white;
    width: 100vw;
    padding: 15px 30px;
    width: calc(100% - 250px); /* Adjust for sidebar width */
}

.header-icons {
    display: flex;
}

.header-icons button {
    background-color: transparent;
    border: none;
    color: white;
    font-size: 16px;
    margin: 0 10px; /* Adjust spacing between icons */
    cursor: pointer;
}

.notification-count {
    background-color: red;
    color: white;
    font-size: 12px;
    border-radius: 50%;
    padding: 2px 6px;
    margin-left: 5px;
}

.openbtn, .closebtn {
    background-color: #333;
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.sidebar-openbtn{
    background-color: transparent;
    color: white;
    border: none;
    font-size: 24px;
    font-weight: bolder;
    cursor: pointer;
}


.sidebar-openbtn:hover {
    color: #ffbb00;
    background-color: transparent;
}

.openbtn:hover, .closebtn:hover {
    background-color: #555;
}



/* Tabs Styles */

.tablinks {
    background-color: #333;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
}

.tablinks.active {
    background-color: #555;
}

/* Table Styles */
#newRequestsTable {
    margin-top: 300px;
}
#newRequestsTable, #staffTable, #clientsTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px;
}



#newRequestsTable th, #staffTable th, #clientsTable th {
    background-color: #A90000;
    color: white;
    padding: 15px;
}
#newRequestsTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
}

/* Table header styles */
#newRequestsTable thead {
    background-color: #A90000; /* Green background */
    color: white; /* White text */
}

#newRequestsTable th {
    padding: 12px 15px;
    text-align: left;
    border-top: 2px solid;
}

#newRequestsTable th:first-child{
    border-radius: 15px 0 0 0; 
    border-left: 2px solid;
    border-top: 2px solid;
}

#newRequestsTable th:last-child{
    border-radius: 0 10px 0 0;
    border-right: 2px solid;
    border-top: 2px solid;
}

/* Table body styles */
#newRequestsTable tbody tr {
    background-color: #f9f9f9; /* Light background */
    border-bottom: 1px solid;
    border-bottom-color: rgb(197, 197, 197);
}

#newRequestsTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Alternate row color */
}

#newRequestsTable td {
    padding: 12px 15px;
    border: none    ;
    text-align: left;
}

/* Hover effect for rows */
#newRequestsTable tbody tr:hover {
    background-color: #d8f0e5; /* Light green on hover */
}

#newRequestsTable button {
    background-color: #A90000; 
    color: white;
    border: none;
    padding: 8px 12px;
    margin: 10px;
    cursor: pointer;
    border-radius: 10px;
}

#newRequestsTable td:last-child {
        display: flex;
        justify-content: center; /* Horizontally center the button */
        align-items: center; /* Vertically center the button (optional) */
    }

/* Staff Table Styles*/
#staffTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px;
}

/* Table header styles */
#staffTable thead {
    background-color: #A90000; /* Green background */
    color: white; /* White text */
}

#staffTable th {
    padding: 12px 15px;
    text-align: left;
    border-top: 2px solid;
}

#staffTable th:first-child{
    border-radius: 15px 0 0 0; 
    border-left: 2px solid;
    border-top: 2px solid;
}

#staffTable th:last-child{
    border-radius: 0 10px 0 0;
    border-right: 2px solid;
    border-top: 2px solid;
}

/* Table body styles */
#staffTable tbody tr {
    background-color: #f9f9f9; /* Light background */
    border-bottom: 1px solid;
    border-bottom-color: rgb(197, 197, 197);
}

#staffTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Alternate row color */
}

#staffTable td {
    padding: 12px 15px;
    border: none    ;
    text-align: left;
}

/* Hover effect for rows */
#staffTable tbody tr:hover {
    background-color: #d8f0e5; /* Light green on hover */
}


#staffTable button {
    background-color: #A90000; 
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 10px;
}

#staffTable td:last-child {
        display: flex;
        justify-content: center; /* Horizontally center the button */
        align-items: center; /* Vertically center the button (optional) */
    }



/* Buttons */
button {
    padding: 10px 20px;
    margin: 10px;
    background-color: #0288d1;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
}

.logInMenu-container button {
    flex-direction: column;
    width: 350px;
    height: 48px;
    padding: 10px 40px;
    transform: translateX(5%);

}

/* Client Login Menu */
#client-login-menu {
    background-color: #4642FF;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .7); /* Soft shadow */
    transition: background-color 0.3s ease; /* Smooth color transition */
}

#client-login-menu:hover {
    background-color: #6d6bf0; /* Lighter shade on hover */
}

/* Lab Staff Login */
#lab-staff-login {
    background-color: #00761A;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .7); /* Soft shadow */
    transition: background-color 0.3s ease;
}

#lab-staff-login:hover {
    background-color: #009623; /* Lighter green on hover */
}

/* Admin Login */
#admin-login {
    background-color: #B60000;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .7); /* Soft shadow */
    transition: background-color 0.3s ease;
}

#admin-login:hover {
    background-color: #D90000; /* Lighter red on hover */
}

.clientLogInMenu-container {
    position: relative; /* Positioning context for the icon */
    margin-top: 0;
}

.clientLogInMenu-container button {
    flex-direction: column;
    width: 350px;
    height: 48px;
    padding: 10px 40px;
    transform: translateX(5%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .7); /* Soft shadow */
    transition: background-color 0.3s ease; /* Smooth color transition */
    position: relative; /* Positioning context for the icon */
}

.clientLogInMenu-container p {
    font-size: 13.5px;
    color: #666;
    font-style: italic;
    text-align: center;
    margin-top: 2%;
}

#IclientLogIn-btn{
    background-color: #4642FF;
    text-align: center;
    margin: 0;
}

#IclientLogIn-btn:hover{
    background-color: #6d6bf0; /* Lighter shade on hover */
}

#EclientLogIn-btn{
    background-color: #00761A;
    text-align: center;
}

#EclientLogIn-btn:hover{
    background-color: #009623; /* Lighter green on hover */
}

button:hover {
    background-color: #0277bd;
}

/* Utility Classes */
.hidden {
    display: none;
}

/* Error Messages */
#error-message {
    display: none; /* Hide error messages by default */
}




/* Log-In Forms */
form {
    display: flex;
    flex-direction: column;
    width: 350px;
    margin: 0 auto;
}

input {
    padding: 10px;
    background-color: #D9D9D9;
    color: #000000;
    border: 0px;
    font-size: 15px;
}

#sign-inbtn  {
    padding: 10px;
    margin: 10px;
    background-color: #0288d1;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    width: 130px;
    -ms-transform: translate(5%);
    transform: translateX(87%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
    margin-top: 37px;
}

#sign-inbtn:hover  {
    background-color: #035d8e;
}

#admin-inbtn  {
    padding: 10px;
    margin: 10px;
    background-color: #0288d1;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    width: 130px;
    -ms-transform: translate(5%);
    transform: translateX(75%);
}

#lab-inbtn  {
    padding: 10px;
    margin: 10px;
    background-color: #0288d1;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    width: 100px;
    -ms-transform: translate(5%);
    transform: translateX(120%);
}

#lab-inbtn  {
    padding: 10px;
    margin: 10px;
    background-color: #0288d1;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    width: 130px;
    -ms-transform: translate(5%);
    transform: translateX(87%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
    margin-top: 37px;
}

#admin-inbtn  {
    padding: 10px;
    margin: 10px;
    background-color: #0288d1;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    width: 130px;
    -ms-transform: translate(5%);
    transform: translateX(87%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
    margin-top: 37px;
}

.adm-low-label p {
    color: black;
    margin-left: 75svw;
    padding-top: 20px;
}

.low-label-reset p {
    color: black;
    padding-top: 20px;
}

.low-label {
    margin-left: 74.4vw;
    padding-top: 20px;
}

.lower-label {
    margin-left: 68vw;  
}

.lower-label-lab {
    margin-left: 68.4vw;
}



.low-label p{
    color: black;
}

.lower-label p{
    -ms-transform: translate(5%);
    color: black;
    font-size: 11px;
    text-align: center;
    padding-top: 11px;
}

.lower-label-reset p{
    -ms-transform: translate(5%);
    color: black;
    font-size: 11px;
    text-align: center;
    padding-top: 11px;
}

.lower-label-lab p{
    -ms-transform: translate(5%);
    color: black;
    font-size: 11px;
    text-align: center;
    padding-top: 11px;
}

.pswrd-low-label p{
    -ms-transform: translate(5%);
    transform: translateX(6.3%);
    color: black;
}

.pswrd-lower-label p{
    -ms-transform: translate(5%);
    transform: translateX(0.1%);
    color: black;
    font-size: 11px;
    text-align: center;
    padding-top:10px;
}

.index-lower-label p{
    color: black;
    font-size: 11px;
    text-align: center;
    padding-top:10px;
}

.lab-low-label p{
    color: black;
    margin-left: 72.9vw;
    padding-top: 20px;
}


#enter {
        margin-top: -15px;
        font-size: 0.9rem;
        color: #000000;
        font-weight: bold;
        text-align: center;
}



#reset-btn  {
    padding: 10px;
    margin: 10px;
    background-color: #0288d1;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    width: 160px;
}


/* Client Dashboard Specific Styles */

.client-header .header-icons button {
    margin: 0;
}

.client-sidebar {
    height: 100%;
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #7D1B1B;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 20px;
    color: white;
    z-index: 999;
}

.client-sidebar a {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 18px;
    color: white;
    display: block;
}

.client-sidebar a:hover {
    background-color: #7D1B1B;
    transform: scale(1.1);       /* Slight scale effect on icon hover */
    padding: 12px 12.5px;
}

.client-main {
    padding: 10px;
    transition: margin-left 0.5s;
    margin-top: 5vh; 
    margin-right: 1vw;
}


/* Our Services*/


body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #ffffff;
  
    line-height: 1.6;
    

}

.client-sidebar a {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 18px;
    color: white;
    display: block;
    transition: 0.3s;
}

.client-sidebar a:hover {
    background-color: #b23030;
    transform: scale(1.1);       /* Slight scale effect on icon hover */
   
}

#mySidebar {
    width: 250px; /* Initial sidebar width */
    height: 92vh; /* Adjusted height */
    transition: width .5s ease; /* Smooth transition */
    background-color: #8a1c1c;
    margin-top: 12vh;
    padding-top: 15px;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    
}

#mySidebar.minimized {
    width: 7vw; /* Adjust as needed for minimized state */
}

#mySidebar a {
    display: flex;
    align-items: center;
    padding: 10px;
    text-decoration: none;
    font-size: 5px; /* Font size for links */
    margin-right: 10px;
    transition: .3s;
    margin-top: 1vh;
}

#mySidebar i {
    font-size: 25px;
    padding-right: 5%;
    padding-left: 7%;
}

#mySidebar.minimized a i {
    margin-right: 0;
    text-align: center;
    width: 100%;
}

#mySidebar.minimized .lab-side {
    display: none; /* Hide text in minimized state */
}

#main {
    transition: margin-left 0.3s;
    margin-left: 60px; /* Initial margin for minimized state */
    margin-top: 10vh; /* Margin for top */
    padding-left: 100px; /* Padding for content */
}

#main.minimized {
    margin-left: 10vw; /* Match sidebar width when minimized */
}


#main {
    padding: 2px;
    transition: margin-left 0.5s;
}


.client-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #8a1c1c;
    color: white;
    padding: 10px 20px;
}

.client-header h1 {
    margin: 0;
}

.header-icons button {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    margin-left: 15px;
    cursor: pointer;
}

.request-type-btn.clicked {
    background-color: #4abb4a;
    color: white;
}

.tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.request-type-btn {
    background-color: #d4d4d4;
    color: black;
    margin: -4.5px;
    margin-left: .5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s; 
    text-decoration:none;
    border-radius: 0px;
    padding-top: 15px;
    text-align: center;
    border-right: 2px solid #b8b5b5;
    width:fit-content;
    display: inline-flex;
    padding: 18px 8px;
    justify-content: center;
    width: 33.3%;
    font-size: 15px;
}

.request-type-btn:last-of-type {
    border-right: none; 
}


.request-type-btn:hover, .request-type-btn.active {
    background-color: #8a1111;
    color: white;
}

.request-type-btn.active {
    background-color: #8a1111;
    color: white;
}


.service-type { 
    background-color: #e2e1e1;
    display: flex;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    align-items: center;
    justify-content: space-around;
}

.service-image {
    width: 350px; 
    height: 80%vh;
    margin-left: 80px; 
    object-fit: cover;
    padding-right: 10px;
}

.service-text {
    max-width: 600px; 
    padding: 10px;
    text-align: justify;
}

@font-face {
    font-family: myFirstFont;
    src: url(montessarat_bold.woff);
    font-weight: bold;
  }

.service-text h2 {
    margin-top: 0;
    font-size: 28px;
    color: #550000;
    font-weight: bolder;
    text-align: left;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.service-text p {
    margin-bottom: 20px;
}

button {
    padding: 10px 18px;
    background-color: #8a1111;
    color: white;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-weight: bolder;
    margin: -4px;
    margin-top: 10px;
    margin-bottom: 15px;
}

button:hover {
    background-color: #550000;
}


.tabs button.active {
    background-color: #550000;
}

.hidden {
    display: none;
}


.tabs {
    display: flex;
    justify-content: center;
    background-color: #d4d4d4;
    padding: 10px 0;
  
}

.tabs button {
    background-color: #d4d4d4;
    border: none;
    color: rgb(0, 0, 0);
    cursor: pointer;
    transition: background-color 0.3s;
    text-transform: uppercase;
    font-weight: bold;
}

.tabs button:hover, .tabs button.active {
   
    color: white;
}

.tabs button + button {
    border-left: 3px solid #d4d4d4;
}

/* Services Options */

body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    font-family: 'Montserrat';
}

.sub-title {
    color: #7b1f2d;
    text-align: left;
    padding-left: 30px;
    font-size: 28px;
    font-weight: bolder;
}



#microbialTestingOptions button, 
#microbialAnalysisOptions button, 
#labResearchProcessesOptions button {
    font-size: 16px;
    font-weight: 900;
    padding: 20px;
    background-color: white;
    color: #333;
    border: 1px solid #ffffff;
    width: 90%;
    text-align: left;
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 0px;
    border-radius: 8px;
    margin-left: 30px;
    margin-top: 20px;
    transition: background-color 0.3s, box-shadow 0.3s;
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 3px rgba(0, 0, 0, 0.1);
    font-family: 'Montserrat';
}


.left-content {
    display: flex;
    align-items: center;
}

.left-content img.icon {
    width: 55px;
    height: 55px;
    margin-right: 15px;
    object-fit: cover;
    padding-right: 30px;

}


.button-text {
    font-size: 16px;
    color: #1d1d1d;
    margin-left: 65px;
}

button .fa-angle-right {
    font-size: 15px;
    font-weight: bolder;
    color: #7b1f2d;
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%); 
}

.description {
    font-size: 10px;
    color: #3a3a3a;
    margin-top: 3px;
    font-family: 'Montserrat';
    margin-left: 65px;
}
.title-page {
    color: black;
    padding-left: 30px;
    font-weight: bolder;
}

.button-text-container span {
    display: block; 
}

#microbialTestingOptions button:hover, 
#microbialAnalysisOptions button:hover, 
#labResearchProcessesOptions button:hover {
    background-color: #f0f0f0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


button#backToCreateRequestMicrobialTesting, 
button#backToCreateRequestMicrobialAnalysis, 
button#backToCreateRequestLabResearchProcesses {
    background-color: #b32b2b;
    color: white;
    border: none;
    width: 75px; 
    padding: 10px 22px;
    border-radius: 5px;
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    transform: translateY(-60%); 
    left: 1120px;
    top: 50px; 
    margin-bottom: 80px;
}

button#backToCreateRequestMicrobialAnalysis {
    background-color: #b32b2b;
    color: white;
    border: none;
    width: 55px;
    padding: 7px 13px;
    border-radius: 5px;
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    transform: translateY(-1%);
    left: 1150px;
    top: 50px; 
   
}

button#backToCreateRequestLabResearchProcesses {
    background-color: #b32b2b;
    color: white;
    border: none;
    width: 55px; 
    padding: 7px 13px;
    border-radius: 5px;
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    transform: translateY(-1%); 
    left: 1150px;
    top: 50px;
}

button#backToCreateRequestMicrobialTesting:hover, 
button#backToCreateRequestMicrobialAnalysis:hover, 
button#backToCreateRequestLabResearchProcesses:hover {
    background-color: #7b1f2d;
}

button:focus {
    outline: none;
}

button + button {
    margin-top: 10px;
}

/*Request List*/

#requestListGroup {
    margin: 0 auto;
    padding: 30px;
    max-width: 1200px;
    font-family: 'Arial', sans-serif;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}


h1 {
    font-size: 32px;
    color: #4B0000;
    margin-bottom: 5px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
}

.request-header-container {
    display: flex;
    align-items: center; /* Vertically aligns the search bar with the header */
    justify-content: space-between; /* Optional: Space between header and search bar */
    margin-bottom: 20px; /* Add some space below the header and search bar */
    border-bottom: 2px solid;
}

.request-header-container h1 {
    margin: 0; /* Remove default margin to better align with the input */
    white-space: nowrap;
}







.search-icon {
    position: absolute;           /* Position the icon absolutely */
    right: 15px;                 /* Adjust right position to create space */
    top: 50%;                    /* Align top at the center */
    transform: translateY(-50%); /* Center vertically */
    font-size: 20px;             /* Font size for the icon */
    color: #333;                 /* Icon color */
    cursor: pointer;             /* Pointer cursor */
    margin-right: 20px;
}



#requestListTable {
    width: 100%; 
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 20px;
    table-layout: fixed;
}

#requestListTable thead {
    background-color: #7D1A1A;
    color: white;
    border-radius: 10px 10px 0 0; 
}

#requestListTable th, #requestListTable td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid #ddd; /
}

#requestListTable th {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 13px;
    border-bottom: none; 
    text-align: center;
}

#requestListTable td {
    color: #333;
    white-space: nowrap;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

#requestListTable tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

#progress-button {
    background-color: #38487e;
    color: white;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 14px;
    cursor: pointer;
    border: none;
}

#pending-button {
    background-color: #bebebe;
    color: white;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 14px;
    cursor: pointer;
    border: none;
}

.progress-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.action-button {
    background-color: #007BFF;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.action-button i {
    font-size: 16px;
}

#requestListTable th:first-child {
    border-radius: 15px 0 0 15px; 
}

#requestListTable th:last-child {
    border-radius: 0 15px 15px 0; 
}

#paginationContainer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    align-items: center;
}

#addRequestButton {
    background-color: #007BFF;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#addRequestButton:hover {
    background-color: #0056b3;
}

#paginationControls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#paginationControls button {
    background-color: #7D1A1A;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    margin-left: 10px;
    font-size: 14px;
    cursor: pointer;
}

#paginationControls button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

#paginationControls span {
    margin: 0 10px;
    font-size: 16px;
    color: #555;
}

#paginationControls .page-numbers {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 14px;
    cursor: pointer;
}

#paginationControls .page-numbers.active {
    background-color: #7D1A1A;
    color: white;
    font-weight: bold;
    border: 1px solid #7D1A1A;
}

/*---------*/

.bg-image-section {
    flex: 2;
    background-color: #ffffff;
}

.LogInBg-image {
    width: 67vw;
    height: 100vh;
    object-fit: cover;
    float: left;
}

.LogInBg-image-lab {
    width: 67vw;
    height: 100vh;
    object-fit: cover;
    float: left;
}


.logo {
    text-align: center;
}

.logo img {
    width: 150px;
    height: 150px;
    margin-top: 61px;
    margin-bottom: -36px;
   
}

.logo-reset {
    text-align:center;
}



.logo-reset img {
    width: 150px;
    height: 150px;
    margin-top: 97px;
    margin-bottom: -36px;
    align-items:  center;
}

.logo h1 {
    margin-top: 1px;
    font-size: 2.5rem;
}

.logo p {
    margin-top: -8px;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    margin-bottom: 16px;
}

.password-reset-title { 
    margin-top: 1px;
    font-size: 2.5rem;
    font-size: 32px;
    color: #4B0000;
    margin-bottom: 5px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    margin-left: 15px;
}

.sign-in p {
    margin-top: -15px;
    font-size: 0.9rem;
    color: #000000;
    font-weight: bold;
    text-align: center;
}

#enter p{
    margin-top: -15px;
    font-size: 0.9rem;
    color: #000000;
    font-weight: bold;
    text-align: center;
}

.options p {
    margin-top: 21px;
    font-size: 0.9rem;
    color: #000000;
    font-weight: bold;
    text-align: center;
}

#arrow {
    transform: translateX(59px);
   -ms-transform: translateY(12px);
}

/* Styling for the Edit Event Modal */
#editEventModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* On top of everything */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: auto; /* Full height */
    background-color: rgba(0, 0, 0, 0.5); /* Black background with transparency */
    overflow: auto; /* Enable scrolling if needed */
}

/* Modal content box */
#editEventModal .modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* 10% from the top and center-aligned */
    padding: 20px;
    border: 1px solid #888;
    width: 40%; /* Adjust width as needed */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    animation: fadeIn 0.5s; /* Fade-in animation */
}

/* Close button */
#editEventModal .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

#editEventModal .close:hover,
#editEventModal .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Input fields */
#editEventModal input[type="text"],
#editEventModal textarea {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 16px;
}

/* Save button */
#saveEditEventBtn {
    background-color: #4CAF50; /* Green background */
    color: white;
    padding: 10px 20px;
    margin-top: 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#saveEditEventBtn:hover {
    background-color: #45a049; /* Darker green on hover */
}

/* Modal fade-in animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* Modal styles */
.modal-container-userdetails {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

.modal-content-userdetails {
    background-color: #fff;
    border-radius: 10px;
    width: 70%;
    margin-top: 100px;
    overflow: hidden;
  }

  .btnuserdetails {
    display: flex;
    justify-content: center;
}
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-content {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 50%;
    margin: 40px auto;
  }
  .edit-modal-content {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 50%;
    margin: 40px auto;
  }

  .AddClientmodal {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 30%;
    margin: 40px auto;
    margin-top: 10%;
  }

    .addClientForm {
        width: 100%;
        height: auto;
    }.addClientForm {
        width: 100%;
        height: auto;
        max-width: 90%; /* Adjust as needed to fit within the modal */
        max-height: 80vh; /* Limits height to 80% of the viewport height */
        overflow: auto; /* Allows scrolling if content overflows */
    }
    
    

    #addClientSubmit {
        display: block;
        margin: 0 auto;
    }

.addLabModal {
    display: block;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 40%;
    margin: 40px auto;
    margin-top: 10%;
  }
    .addStaffForm {
            width: 90%;
    }
    #addStaffSubmit {
        display: block;
        margin: 0 auto;
    }

    .eventdetails-modal {
        background-color: #fff;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 10px;
        width: 50%;
        max-height: 80vh;            /* Set a maximum height */
        height: auto;                /* Allow the height to adjust with content */
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;              /* Ensure it’s above other content */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Adds a shadow for a floating effect */
        overflow-y: auto;           /* Makes the modal scrollable if content exceeds max height */
    }

    /* Overlay styles */
.overlay {
    position: fixed; /* Position it to cover the entire screen */
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    z-index: 900; /* Behind the modal but above other content */
    display: none; /* Initially hidden */
}

/* Show overlay when a class is added */
.show-overlay .overlay {
    display: block; /* Display the overlay when active */
}

    
    .eventdetails-modal::-webkit-scrollbar {
        width: 10px; /* Width of the scrollbar */
    }
    
    .eventdetails-modal::-webkit-scrollbar-track {
        background: #f1f1f1; /* Background of the scrollbar track */
        border-radius: 100px;
        margin: 1%;
    }
    
    .eventdetails-modal::-webkit-scrollbar-thumb {
        background: #888; /* Color of the scrollbar thumb */
        border-radius: 10px; /* Rounded corners for the thumb */
    }
    
    .eventdetails-modal::-webkit-scrollbar-thumb:hover {
        background: #555; /* Color when hovering over the thumb */
    }
    
    .eventImageModal {
        max-width: 700px;
        max-height: 500px;
        display: block;
        margin: auto;
        margin-top: 3%;
    }
    .eventdetails-modal p{
    margin-left: 5%;
    margin-right: 5%;
    word-wrap: break-word;
    }
    .eventdetails-modal h3{
        text-align: center;
    }
    .eventsButton {
        display: flex;
        justify-content: center;
    }
    .eventsButton  button{
        margin: 10px;
    }
    
  
  .editmodal-content {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 25%;
    margin: 40px auto;
    margin-left: 150;
    margin-top: 225px;
    padding-top: 0;
  }

  .editmodal-content label{
    content: 300px;
  }

  .modal-content h2 {
    margin-top: 10px;
    margin-left: 20px;
  }

  .edit-modal-content h2 {
    margin-top: 10px;
    margin-left: 20px;
  }

  .modal-content button {
    margin: 0 auto 20px auto;
    display: block;
  }

  .modal-content form{
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
    margin-top: 30px;
  }

  .edit-modal-content button {
    margin: 0 auto 20px auto;
    display: block;
  }

  .edit-modal-content form{
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
    margin-top: 30px;
  }

  #closeModal {
    background-color: #4CAF50;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  #closeModal:hover {
    background-color: #3e8e41;
  }

        /* Optional styles for better visibility */
        .hidden { display: none; }
        .openbtn, .closebtn {
            cursor: pointer;
        }
        
        .tablinks {
            cursor: pointer;
        }
        .sidebar {
            width: 250px;
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            background-color: #550000;
            padding-top: 60px;
        }
        .sidebar a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }

        /* Dashboards */

        /* Dashboards : Help,Notif, Settings Styles*/

        

        
        .header-icons {
            display: flex;
            align-items: center;
            margin-right: 30px;
        }

        .header-icons button {
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .header-icons i {
        font-size: 30px;
        }
    
        
        /* Modal styles */
        


        .modal-content {
            background-color: #fefefe;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 70%;
            height: 55vh;
        }

        
        .edit-modal-content {
            background-color: #fefefe;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 70%;
            height: 90vh !important;
            margin-top: 100px;
        }
        
        .requestModal {
            background-color: #fefefe;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 70%;
            height: auto; /* Allow height to adjust based on content */
            max-height: 70%; /* Set a maximum height */
            overflow-y: auto; /* Add scroll if content exceeds max height */
            border-radius: 10px;
        }


       

        .reviewclose {
            color: #ffffff;
            float: right;
            font-size: 28px;
            font-weight: bold;
            position: absolute;
            right: 10px; /* Position the 'X' 10px from the right edge */
            top: 50%;
            transform: translateY(-50%); /* Vertically center the 'X' */
            font-size: 24px;
            cursor: pointer;
            color: white;
        }

        .reviewheader {
            background-color: #7e1e1e; /* Dark red background */
            padding: 10px;
            border-radius: 10px 10px 0 0;
            position: relative; /* Make the header a reference for absolute positioning */
            text-align: center;
            color: white;
            font-size: 20px;
        }

       

        .image-section {
            position: relative;
            width: 100%;
            height: 100vh; /* Make the image section take up the full viewport height */
            overflow: hidden;
        }

        
/*manage users*/

    .manageusers h1 {
        margin-top: 0;
        margin-bottom: 0px;
    }

    .manageuserbutton button {
        background-color: rgb(207, 207, 207); /* Default button color */
        color: black; /* Text color */
        border: none; /* Remove default border */
        padding: .7vw 1vw; /* Add padding */
        margin: 5px; /* Add margin */
        cursor: pointer; /* Pointer cursor on hover */
        border-radius: 5px; /* Rounded corners */
        transition: background-color 0.3s; /* Smooth transition for color change */
    }

/* More specific selector for the active button */
#requestButtons button.active {
    background-color: #FFCC00; /* Color when the button is selected */
    color: black; /* Change text color for better contrast */
    display: flex;
    justify-content: flex-start; /* Align items starting from the left */
    align-items: center; /* Vertically centers the content */
}

.manageuserbutton {
    display: flex;
    align-items: center;
    margin-right: auto; /* Pushes the search bar to the right */
}

#allRequestsSearch {
    padding: 5px;
    font-size: 14px;
    width: 200px;
}

.adminTable{
    margin: 0;
}

    
/* Active Button Style */
.manageuserbutton button.active {
    background-color: #FFCC00; /* Color when the button is selected */
    color: black; /* Change text color for better contrast */
}


    #addClientBtn, #addStaffBtn {
        background-color: #FFCC00 !important;
        color: #000000;
    }

    .color-change {
        margin:0px;
        margin-right:10px;
    }
    
    .color-change button.active {
        background-color: yellow; /* Color when the button is selected */
        color: black; /* Change text color for better contrast */
    }

    #main {
        transition: margin-left 0.5s;  /* Smooth transition effect for shifting */
    }
    

    
    .hidden {
        display: none;  /* Ensure the hidden class hides the sidebar */
    }

/* Registration */
        .reg-background{
            background-size: auto 100%; 
            margin-left: -5vw; 
            background-position: left; 
            background-repeat: no-repeat; 
            height: 120vh; 
            display: flex;
            justify-content: flex-end;
        }

        .lab-reg-background{
            background-size: auto 118%; 
            background-position: left; 
            background-repeat: no-repeat; 
            height: 100vh; 
            display: flex;
            justify-content: flex-end;
        }

        @media (max-width: 1000px) {

            .event-title{
                margin-left: 20px !important;
            }

            .deadline-card .date-box{
                height: unset !important;
            }

            .register-body-external{
                width: 100% !important;
                height: 75vh !important;
            
            }
            
            .register-body-lab{
                padding-top: 20px;
                width: 85% !important;
                height: 70% !important;
                margin: auto;
                background: rgba(255, 255, 255, 0.765) !important;
                border-radius: 10px;
            }

            .register-body-admin{
                padding-left: 40px !important;
                width: 100% !important;
                height: 75vh !important;
            }

            h1.register-h1{
                font-size: 21px !important;
            }

            .user-icon-reset {
                margin-left: 13.1% !important;
                background-image: url(https://www.transparentpng.com/download/user/gray-user-profile-icon-png-fP8Q1P.png);
                margin-top: 7px !important;
            }

            input#firstName, input#middleName, input#lastName, input.email, input#username, input.password, input#address, input#contactNumber, input#school, input#department{
                font-size: 12px !important;
            }

            .lab-reg-background{
                background-position: center;
            }

            td.sampleReport{
                display: flex;
                flex-direction: column-reverse;
                align-items: flex-end;
            }

            .btn-samplereport, .btn-count-colonies{
                margin-right: 0;
            }
        }

            .icon.user-icon-reset {
                margin-left: 24px !important;
                transform: none;
                left: unset;
                top: unset;
                margin-top: 3px !important;
            }


        .register-body {
            background: rgb(255, 255, 255);
            padding-left: 20px;
            padding-right: 20px;
            width: 30vw;
            height: 110vh;
        }

        form#labRegisterForm {
            margin: 0;
            width: 100%;
        }

        .register-body-admin, .register-body-lab {
            background: rgb(255, 255, 255);
            padding-left: 20px;
            padding-right: 20px;
            width: 30vw;
            height: 100vh;
        }

        .register-body-external {
            background: rgb(255, 255, 255);
            padding-left: 20px;
            padding-right: 20px;
            width: 30vw;
            height: 120vh;
        }

        .wrapper {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .reg-logo {
            display: block;
            max-width: 150px; 
            margin: auto; 
        }

        .register-form {
            padding-top: 2vh;
        }

        .lower-reg-form {
            text-align: center;
        }

        h1.register-h1 {
            margin: 10px;
            font-size: 30px;
        }

        .fullname {
            display: flex;
            gap: 10px;
        }

        .form-reg {
            width: 100% !important;
        }

        button#registerBtn {
            width: 30%;
            margin: 10px auto;
            margin-top: 30px;
        }

        select#userType {
            height: 4vh;
            margin: 10px 0;
        }

        form {
            display: flex;
            flex-direction: column;
            width: 350px;
            margin: 0 auto;
        }

        .form-header {
            background-color: #8a1111;
            color: white;
            padding: 15px;
            text-align: center;
            font-weight: bold;
            font-size: 24px;
            border-radius: 10px 10px 0 0;
            
            margin-top: -10px;
            
        }

        button#addSampleButtonAgarDisc {
            background-color: dodgerblue;
            margin-left: 225px;
            margin-top: 10px;
            width: 211px;
        }
        button#addSampleButtonAgarWell {
            background-color: dodgerblue;
            margin-left: 225px;
            margin-top: 10px;
            width: 211px;
        }
        button#addSampleButtonMicTesting {
            background-color: dodgerblue;
            margin-left: 225px;
            margin-top: 10px;
            width: 211px;
        }
       button#addSampleButtonMbcTesting {
            background-color: dodgerblue;
            margin-left: 225px;
            margin-top: 10px;
            width: 211px;
        }
        button#addSampleButtonMicrobialWaterAnalysis {
        background-color: dodgerblue;
        margin-left: 225px;
        margin-top: 10px;
        width: 211px;
        }
        button#addSampleButtonMicrobialChar {
        background-color: dodgerblue;
        margin-left: 225px;
        margin-top: 10px;
        width: 211px;
        }
        button#addSampleButtonMicrobialCultureCollections {
        background-color: dodgerblue;
        margin-left: 225px;
        margin-top: 10px;
        width: 211px;
        }
        button#addSampleButtonMicroscopy {
        background-color: dodgerblue;
        margin-left: 225px;
        margin-top: 10px;
        width: 211px;
        }
        #addSampleButtonPlantSpecies {
        background-color: dodgerblue;
        margin-left: 225px;
        margin-top: 10px;
        width: 211px;
        
        }

        
        .input-wrapper {
            position: relative; /* Positioning context for the icon */
            margin-top: 15px;  /* Space above each input */
            margin-right: 4vw;
        }

        .clientLogInMenu-container {
            position: relative;
            margin-right: 4vw;
            margin-left: 70%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        
        .clientLogInMenu-container button {
            width: 350px;
            height: 48px;
            padding: 10px 40px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, .7);
            transition: background-color 0.3s ease;
            position: relative;
            margin: 0;                /* Remove margin that may misalign the button */
        }

        .logInMenu-container {
            position: relative;
            margin-top: 42px;
            margin-right: 4vw;
            margin-left: 69.1%;
            display: flex;            /* Make it a flexbox container */
            justify-content: center;  /* Center child elements horizontally */
            align-items: center;      /* Center child elements vertically */
            flex-direction: column;   /* Arrange items in a column (optional, if you want vertical stacking) */
        }
        
        .logInMenu-container button {
            width: 350px;
            height: 48px;
            padding: 10px 40px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, .7);
            transition: background-color 0.3s ease;
            position: relative;
            margin: 0;                /* Remove margin that may misalign the button */
        }
        
        .input-wrapper-reset input {
            padding: 10px 10px 10px 40px; /* Padding for left to make space for icon */
            background-color: rgb(232, 250, 255);
            color: #000000;
            border: 1px solid #9e9e9e; /* Optional: Add border for better visibility */
            border-radius: 4px; /* Optional: Add rounded corners */
            font-size: 15px;
            width: 78%;; /* Make input fill the wrapper */
            margin-top: -23px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, .3); /* Shadow for depth */
        }


        .input-wrapper input {
            padding: 10px 10px 10px 40px; /* Padding for left to make space for icon */
            background-color: rgb(232, 250, 255);
            color: #000000;
            border: 1px solid #9e9e9e; /* Optional: Add border for better visibility */
            border-radius: 4px; /* Optional: Add rounded corners */
            font-size: 15px;
            width: 100%; /* Make input fill the wrapper */
            margin-left: 6%;
            box-shadow: 0 4px 10px rgba(0, 0, 0, .3); /* Shadow for depth */
        }

        .icon {
            position: absolute; /* Position icon inside the input field */
            left: 10px; /* Space from the left edge of the input */
            top: 50%; /* Center vertically */
            transform: translateY(-50%); /* Adjust to perfectly center */
            width: 20px; /* Icon size */
            height: 20px; /* Icon size */
            background-size: contain; /* Ensure the icon fits the space */
            background-repeat: no-repeat; /* Prevent repetition */
        }
        
        .user-icon {
            margin-left: 6.1%;
            background-image: url(https://www.transparentpng.com/download/user/gray-user-profile-icon-png-fP8Q1P.png);
            margin-top: 0px;
        }

        .user-icon-reset {
            margin-left: 73.1%;
            background-image: url(https://www.transparentpng.com/download/user/gray-user-profile-icon-png-fP8Q1P.png);
            margin-top: -43px;
        }
        
        .key-icon {
            margin-left: 6%;
            background-image: url("https://images.vexels.com/content/131184/preview/key-flat-icon-e94865.png");
        }
        
        /* Media Query for smaller screens (e.g., tablets) */
        
        
        input {
            padding: 10px 10px 10px 40px; /* Padding for left to make space for icon */
            background-color: #D9D9D9;
            color: #000000;
            border: 1px solid #ccc; /* Optional: Add border for better visibility */
            border-radius: 4px; /* Optional: Add rounded corners */
            font-size: 15px;
            width: 50%; /* Make input fill the wrapper */
        }
        

          #helpBtn  {
            border: none;
            color: white;
            padding: 12px 19px;
            font-size: 45px;
            cursor: pointer; 
            color: white;
          }

          #notificationsBtn {
            border: none;
            color: white;
            padding: 12px 19px;
            font-size: 45px;
            cursor: pointer; 
            color: white;
          }

          #settingsBtn {
            border: none;
            color: white;
            padding: 12px 19px;
            font-size: 45px;
            cursor: pointer; 
            color: white;
          }



/* Lab Dashboard */

  
  /* Welcome message styling */
  #welcomeMessage {
    font-size: 40px; /* Match the font size for the 'Hello' */
    font-weight: bold; /* Make it bold */
    margin-top: -10px;
  }
  
  /* Current date styling */
  #currentDate {
    font-size: 18px; /* Adjust the size for the date text */
    font-weight: normal;
    margin: 0;
    color: #333333; /* Match the color of the date text */
    margin-top: -40px;
  }
  


/* Lab Staff Sidebar and header  */

        .lab-header {
            background-color: #550000; /* Main background color */
            color: white; /* Text color */
            padding: 20px; /* Padding around the content */
            display: flex; /* Use flexbox for layout */
            justify-content: space-between; /* Space between items */
            align-items: center; /* Center items vertically */
            width: 100%; /* Full width */
            position: fixed; /* Fixed position at the top */
            top: 0; /* Position it at the top */
            z-index: 1; /* Ensure it stays above other content */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Shadow for depth */
            transition: background-color 0.3s ease; /* Smooth transition for background color */
        }

        .lab-sidebar {
            width: 100vw;
            height: 100vh;
            transition: width .5s ease;
            background-color: #550000;
            height: 92vh;
            margin-top: 12vh;
            padding-top:15px;
            
        }

        .lab-sidebar.minimized .lab-side {
            display: none;
        }


        .lab-sidebar a {
            padding: 10px 15px;
            text-decoration: none;
            font-size: 24px;
            color: white;
            display: block;
        }
        
        .lab-sidebar a:hover {
            background-color: #960505;
            transform: scale(1.0);       /* Slight scale effect on icon hover */
        }
        

        .lab-sidebar {
            width: 250px; /* Initial sidebar width */
            transition: width .5s ease; /* Adjusted transition */
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            margin-top: 15vh;
        }
        

        .lab-sidebar.minimized {
            width: 6vw; /* Adjust as needed */
        }
        
        .lab-sidebar a {
            display: flex;
            align-items: center;
            padding: 10px;
            text-decoration: none;
        }
        
        .lab-sidebar a {
            font-size: 5px;
            margin-right: 10px;
            transition: .3s;
            margin-top: 2vh;
            
        }
        .lab-sidebar i{
            font-size: 25px;
            padding-right: 5%;
            padding-left: 7%;
        }
        
        .lab-sidebar.minimized a i {
            margin-right: 0;
            text-align: center;
            width: 100%;
        }

        /* Hide the sidebar by default on mobile */
        @media (max-width: 768px) {

        .admin-sidebar.minimized .lab-side {
            display: none;
        }
        .close-popup-btn {
            background: none;
            border: none;
            font-size: 2rem;
            cursor: pointer;
            color: rgb(58, 0, 0);
        }
    }
        
/* Mobile styles (for screens 768px or smaller) */
/* Mobile styles (for screens 768px or smaller) */
/* Ensure the body and html don’t allow horizontal scrolling */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    /* Background image setup */
    .bg-image-section {
        background-image: url('images/log-in-bg.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    /* Image fitting */
    .LogInBg-image-lab {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Foreground content */
    .front {
        position: relative;
        z-index: 1;
        padding: 20px;
        padding-top: 5px !important;
        padding-bottom: 15px !important;
        background-color: rgba(255, 255, 255, 0.765);
        align-items: center;
        margin: 20% auto 0;
        width: 100%;
        max-width: 100%;
        overflow-y: auto;
        height: auto;
        padding-left: 0;
    }

    .logInMenu-container {
        position: relative;
        margin-top: 17px !important;
        margin-right: 8vw !important;
        margin-left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .options p {
        margin-top: 6px !important;
        font-size: 0.9rem;
        color: #000000;
        font-weight: bold;
        text-align: center;
    }
    .logInMenu-container button {
        width: 300px;
        height: 48px;
        padding: 10px 40px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, .7);
        transition: background-color 0.3s ease;
        position: relative;
        margin: 0;
    }


    /* Center the lab low label text */
    .lab-low-label p {
        display: flex;
        justify-content: center; /* Horizontally center */
        align-items: center;     /* Vertically center */
        text-align: center;      /* Ensure text is centered inside */
        width: 100%;             /* Ensure it takes up the full width of the parent */
        margin: 0 auto;          /* Optional: Centers it within the parent container */
        gap: 6px;
        font-size: 14px;
        padding-top: 10px;
    }
    .logo h1 {
        margin-top: 1px;
        font-size: 2.5rem; 
    }
    .logo img{
        margin-top: 0 !important;
    }
    .sign-in p {
        margin-top: -45px;
        font-size: 0.9rem;
        color: #000000;
        font-weight: bold;
        text-align: center;
    }
    #lab-inbtn {
        margin-top: 30px;
        margin-left: 0;
    }
    .logInMenu-container {
        position: relative;
        margin-top: 42px;
        margin-right: 4vw;
        margin-left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .LogInBg-image {
        width: 100%;
        height: 100vh;
        object-fit: cover;
        float: left;
    }
    .lower-label {
        margin-left: 0 !important;  
    }
    .lower-label p {
        -ms-transform: translate(5%);
        color: black;
        font-size: 11px;
        text-align: center;
        padding-top: 0 !important;
    }



    /* Style the lower label for small screens */
    .lower-label-lab p {
        color: black;
        font-size: 11px;
        text-align: center;
        padding-top: 10px;
        margin-left: 0 !important;
    
        /* Centering horizontally and vertically */
        position: absolute;  /* Allow positioning relative to the nearest positioned ancestor */
        left: 50%;  /* Horizontally center */
        transform: translateX(-50%);  /* Fine-tune to ensure exact centering */
    
        /* Prevent text from breaking */
        white-space: nowrap;  /* Prevent text from wrapping to the next line */
        overflow: hidden;      /* Hide overflowing content */
        text-overflow: ellipsis; /* Add ellipsis if text overflows */
    }
    
    .input-wrapper input {
        padding: 10px 10px 10px 40px;
        background-color: rgb(232, 250, 255);
        color: #000000;
        border: 1px solid #9e9e9e;
        border-radius: 4px;
        font-size: 15px;
        width: 83% !important;
        margin-left: 4%;
        box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
    }
    .icon {
        position: absolute;
        left: 5px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-size: contain;
        background-repeat: no-repeat;
    }
    
    /* Notification */
    .notification-popup {
        position: fixed;
        right: 17px !important;
        top: 60px;
        width: 90%;
        background-color: #fff;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        display: none;
        flex-direction: column;
        z-index: 1000;
        height: auto !important;
    }
    .notification-popup {
        position: fixed;
        right: 80px;
        top: 60px;
        width: 90%;
        background-color: #fff;
        box-shadow: 0px 0px 10px rgb(0 0 0 / 70%) !important;
        border-radius: 10px;
        display: none;
        flex-direction: column;
        z-index: 1000;
    }

    .popup-body{
        height: 70% !important;
    }
    .close-popup-btn {
        background: none;
        border: none;
        font-size: 2rem;
        cursor: pointer;
        color: rgb(58, 0, 0);
    }

    /* Settings*/
    button#reset-btn {
        margin: auto;
        margin-top: 30px !important;
        transform: none;
        margin-bottom: 0 !important;
    }
    label#enter {
        width: 78vw !important;
        text-align: left;
        margin: 10px;
        margin-top: -14px;
    }

}



        
        @media (max-width: 768px) {
            #sidebar.minimized {
                transform: translateX(-100%); /* Hide sidebar completely when minimized */
            }
    
            .lab-sidebar {
                width: 50vw; /* Set a narrower width on mobile */
                height: 100vh;
                position: fixed;
                top: 0;
                margin-top: 15% !important;
                padding-top: 40px;
                z-index: 2;
            }
            .lab-sidebar.minimized i{
                display: none !important;
            }


            .lab-header {
                display: flex;
                align-items: center;
                padding: 10px !important;
                background-color: #550000; /* Adjust as necessary */
                padding-left: 0 !important;
                z-index: 3;
                justify-content: space-between;
            }
        
            /* Logo styling */
            .lab-header img { 
                width: 50px; /* Smaller logo */
                height: 50px;
                margin-bottom: 5px; /* Add space below the logo */
            }

            /* Title styling */
            .admin-logo img {
                font-size: 1.2rem; /* Smaller font size */
                text-align: center; /* Center align the text */
                line-height: 1.2;
                margin: 5px 0; /* Adjust margin to control spacing */
            }
            #notificationsBtn, #settingsBtn{
                padding: 0;
                margin: 5px;
                width: 35px;
            }

            .header-icons{
                margin-right:10px;
            }
        
            /* Icon container styling */
            .lab-header .icons {
                gap: 10px; /* Space between icons */
                margin-top: 5px; /* Adjust space above icons */
            }
        
            /* Adjust each icon */
            #sidebar.open {
                transform: translateX(0); /* Slide sidebar into view */
            }
        
            #main {
                transition: margin-left 0.3s;
                margin-left: 0 !important;
                padding: 5% !important;
                margin-top: 7vh !important;
                background-color: #f8f9fe;
            }
            
            /* Show sidebar when active */
            .lab-sidebar.active {
                transform: translateX(0); /* Slide into view */
            }

            .popup-header{
                height: 55px;
            }
            
        }

        /* Mobile fix spacing*/
        @media only screen and (max-width: 768px) {
            #events {
                margin-right: 0 !important;
            }
            #account {
                margin-right: 0 !important;
            }
            #analysisReport{
                margin-right: 0 !important;
            }
            #taskContent{
                margin-right: 0 !important;
            }
        }            
    
        @media only screen and (max-width: 768px) {
            
            .no-more-tables table, 
            .no-more-tables tbody, 
            .no-more-tables tr { 
                display: block;
                margin-bottom: 10%;
            }
            .no-more-tables tr {
                box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
            }
            .no-more-tables tr {
                font-size: 12px;
            }
            
            .no-more-tables thead {
                display: none;
            }
         
            .no-more-tables td { 
                display: flex;
                align-items: center;
                padding: 10px;
                padding-bottom: 0 !important;
                border-bottom: 1px solid #eee;
                text-align: left;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .no-more-tables td:last-child{
                padding-bottom: 10px !important;
            }
        
            .no-more-tables td:before { 
                content: attr(data-title);
                font-weight: bold;
                min-width: 40%; /* Adjusts label width */
                text-align: left;
                margin-right: 10px;
                font-size: 12px;
            }
            #taskTable td:last-child {
                justify-content: left !important;
                align-items: center;
            }
            #ongoingTaskTable td:last-child {
                display: flex;
                justify-content: left !important;
                align-items: center;
            }
            #processedTaskTable td:last-child {
                display: flex;
                justify-content: left !important;
                align-items: center;
            }
            #rejectedTaskTable td:last-child {
                display: flex;
                justify-content: left !important;
                align-items: center;
            }
            #taskList {
                margin-right: 0 !important;
                margin-bottom: 10px;
            }


.pill-gray, .pill.pending, .pill.released, .pill.rejected, 
.pill.releasing, .pill.preparing, .pill.low, .pill.medium, 
.pill.high, .pill.unknown {
    font-size: 15px !important;
    font-weight: bold;
    padding: 5px 15px 5px !important;
    width: 30%;
    text-align: center;
    display: flex;
    align-items: center; /* Centers vertically */
    justify-content: center; /* Centers horizontally */
    border-radius: 15px; /* Keeps rounded corners */
    cursor: pointer;
    
}
.gc-colony-count-section{
    padding-right: 0 !important;
}
            
.gc-header {
    font-size: 20px !important;
}
.gc-title-text{
    font-size: 20px !important;
    margin: 12px 0 !important;
}
.gc-form {
    width: 100% !important;
}

.gc-container{
    width: 100% !important;
}

.colonyHeader {
    width: 85% !important;
}

.gc-label{
    font-size: 12px;
    margin-top: 13px;
}

.gc-browse-button, button#captureButton, .gc-run-inference-btn, .gc-save-button, .gc-back-button{
    font-size: 12px;
    margin: 0;
}

.gc-save-button, .gc-back-button{
    margin-top: 0 !important;
}

.colony-count-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
}

#tabContents {
    margin-top: 5vh;
}

.reportbtn {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    gap: 10px;
}

            .no-more-tables td span {
                width: 60%; /* Allows more space for data */
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: r;
                font-size: 12px;
            }
            #analysisReportTable td {
                display: flex;
            }
            #analysisReportTable td:last-child {
                display: none;
                justify-content: left !important;
                align-items: left;
                margin-left: 0 !important;
            }
            .filter-buttons{
                display: flex;
                width: 110% !important;
                justify-content: left !important;
            }
            .filter-buttons button{
                padding-bottom: 3vh;
                font-size: 0.8rem !important;  /* Smaller text on mobile */
            }
            .filter-buttons button.active {
                background-color: #FFCC00;
                color: black;
                z-index: 0 !important;
            }
        }


                    /* Events mobile */
        @media only screen and (max-width: 768px) {
            .events-header{
                text-align: center;
                padding-bottom: 5% !important;
            }
            .events-header h2 {
                font-size: 1.5rem;  /* Adjust this value to your preferred font size */
            }
            .events-header ::placeholder{
                text-align: center;
            }
            .scroll-container{
                margin-left: 0 !important;
            }
            .event-item {
                height: 70% !important;
            }
            .admin-modal-content{
                width: 80% !important;
            }
            .admin-modal-content {
                background-color: white;
                margin: 10% auto;
                padding: 20px;
                margin-top: 34% !important;
                border: 1px solid #888;
                width: 50%;
                position: relative;
                border-radius: 10px 10px 5px 5px;
                z-index: 4;
                box-shadow: 3px 5px 8px 3px rgba(0, 0, 0, 0.1);
            }
        }

        /* Client Sidebar and header  */

        .client-header {
            background-color: #8a1c1c; /* Match the lab-header color */
            color: white; /* Set text color for contrast */
            padding-top: 15px; /* Consistent padding */
            padding-bottom: 6px; /* Consistent padding */
            padding-left: 8px; /* Consistent padding */
            display: flex; /* Use flexbox for layout */
            justify-content: space-between; /* Space between items */
            align-items: center; /* Center items vertically */
            width: 100vw; /* Full width */
            position: fixed; /* Keeps the header fixed at the top */
            top: 0; /* Position it at the top */
            z-index: 1; /* Ensure it stays above other content */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Shadow for depth */
            transition: background-color 0.3s ease; /* Smooth transition for background color */
        }

        .client-sidebar {
            width: 100vw;
            height: 100vh;
            transition: width .5s ease;
            background-color: #8a1c1c;
            height: 92vh;
            margin-top: 12vh;
            padding-top:15px;
            
            
        }

        .client-sidebar.minimized .lab-side {
            display: none;
        }


        .client-sidebar a {
            padding: 10px 15px;
            text-decoration: none;
            font-size: 24px;
            color: white;
            display: block;
        }
        
        .client-sidebar a:hover {
            background-color: #960505;
            transform: scale(1.1);       /* Slight scale effect on icon hover */
            padding: 12px 12.5px;
        }
        

        .client-sidebar {
            width: 250px; /* Initial sidebar width */
            transition: width .5s ease; /* Adjusted transition */
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
        }
        

        .client-sidebar.minimized {
            width: 7vw; /* Adjust as needed */
        }
        
        .client-sidebar a {
            display: flex;
            align-items: center;
            padding: 10px;
            text-decoration: none;
        }
        
        .client-sidebar a {
            font-size: 5px;
            margin-right: 10px;
            transition: .3s;
            margin-top: 2vh;
            
        }
        .client-sidebar i{
            font-size: 25px;
            padding-right: 5%;
            padding-left: 7%;
        }
        
        .client-sidebar.minimized a i {
            margin-right: 0;
            text-align: center;
            width: 100%;
        }

        .admin-sidebar.minimized .lab-side {
            display: none;
        }


/* Admin Dashboard Specific Styles */
.admin-header {
    background-color: #A90000; /* Keep the same color */
    padding-top: 15px;
    padding-bottom: 6px;
    padding-left: 8px;
    display: flex;
    justify-content: space-between; 
    width: 100vw;
    position: fixed; /* Keeps the header fixed at the top */
    top: 0; /* Position it at the top */
    z-index: 3; /* Ensure it stays above other content */
    box-shadow: 
        0 4px 10px rgba(0, 0, 0, 0.3), /* Outer shadow for depth */
        inset 0 -1px 5px rgba(255, 255, 255, 0.2); /* Inset shadow for a pressed effect */
    transition: padding-left 0.3s ease;
}

.admin-header .header-icons button {
    margin: 0;
}

/* Sidebar width transition for smooth closing/opening */
.admin-sidebar {
    width: 100vw;
    height: 100vh;
    transition: width .5s ease;
    background-color: #A90000;
    height: 92vh;
    margin-top: 12vh;
    padding-top:15px;
}

.admin-sidebar.minimized {
    width: 7vw; /* Adjust as needed */
}

.admin-sidebar a {
    display: flex;
    align-items: center;
    padding: 10px;
    text-decoration: none;
}

.admin-sidebar a {
    font-size: 5px;
    margin-right: 10px;
    transition: .3s;
    margin-top: 1vh;
    
}
.admin-sidebar i{
    font-size: 25px;
    padding-right: 5%;
    padding-left: 7%;
}

.admin-sidebar.minimized a i {
    margin-right: 0;
    text-align: center;
    width: 100%;
}
.lab-side {
    font-size: 18px;
    text-align: left ;
    padding-left: 8%;
    font-weight: lighter;
}

.admin-sidebar.minimized .lab-side {
    display: none;
}

#main {
    transition: margin-left 0.3s;
    margin-left: 200px;
    margin-top: 15vh;
    padding-left: 100px;
    background-color: #f8f9fe;
}

#main.minimized {
    margin-left: 10vw; /* Match sidebar width */
}

.admin-sidebar {
    width: 250px; /* Initial sidebar width */
    transition: width .5s ease; /* Adjusted transition */
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
}


.admin-content {
    margin-left: 250px; /* Match the sidebar width */
    transition: margin-left 0.3s ease;
}

.admin-header {
    transition: padding-left 0.3s ease;
}

.minimized-sidebar {
    width: 50px; /* Sidebar in minimized state */
}

.minimized-content {
    margin-left: 50px; /* Content adjusted for minimized sidebar */
}

.minimized-header {
    padding-left: 50px; /* Adjust header padding when sidebar is minimized */
}



/* Sidebar Logo */
.sidebar-logo {
    display: flex;
    align-items: center; /* Center vertically */
    padding: 10px; /* Add some padding for spacing */
}

.sidebar-logo-img {
    height: 50px; /* Set a consistent height for the logo */
    width: auto;  /* Maintain aspect ratio */
}

/* Make the sidebar shrink instead of hiding it immediately */
.sidebar-closed {
    width: 0;
    padding: 0;  /* Optional: remove padding for a smoother collapse */
}

.admin-sidebar a {
    padding: 1vw 1vw;
    text-decoration: none;
    font-size: 24px;
    color: white;
    display: flex; /* Flexbox for icon and text alignment */
    align-items: center; /* Aligns icon and text vertically */
    gap: 15px; /* Adjust spacing between icon and text */
    margin-bottom: 10px; /* Space between each item */
}

.admin-sidebar i {
    font-size: 24px; /* Ensure the icon size matches the text */
    display: inline-block;
    width: 30px; /* Fixes icon width to maintain uniform alignment */
    text-align: center; /* Centers the icon within its container */
}

.admin-sidebar a:hover {
    background-color: #cc0202;
    transform: scale(1.1);       /* Slight scale effect on icon hover */
}

.fa-solid.fa-right-from-bracket {
    background-color: #680000;
    height: 4vh;
    width: 4vh; /* Set the width for the icon's box */
    display: inline-flex; /* Ensures it respects dimensions */
    justify-content: center; /* Centers the icon */
    align-items: center; /* Centers the icon vertically */
    padding: 0 9px; /* Adjust padding as needed */
    border-radius: 5vh; /* Fully round border */
    color: white; /* Optional: Set the icon color */
    border: 2px solid white; /* Fixes the border styling */
}


/*Lab Logout*/
#labLogoutbtn{
    width: 85%;              /* Full width, just like the sidebar links */
      /* Align text to the left */
    background-color:#8a1c1c; /* Same background color as sidebar */
    color: white;              /* Text color to white */
    padding: 8px 12px;        /* Padding similar to sidebar links */
    border: none;              /* Remove border */
    cursor: pointer;           /* Show pointer on hover */
    display: flex;             /* Flexbox for aligning icon and text */
    align-items: center;       /* Vertically center */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
    border-radius: 0%;
    margin-right: 10px;
    text-align: left;
}

#labLogoutbtn i {
    font-size: 25px;            /* Icon size to match sidebar icons */
    padding-right: 15px;          /* Padding for space between icon and text */
    padding-left: -70%;           /* Padding to align the icon nicely */
    transition: transform 0.3s ease;  /* Add transition for icon hover */
    margin: 0px;
}

#labLogoutbtn:hover {
    background-color: #cc0202;   /* Background color change on hover */
    color: white;                /* Keep the text white on hover */
    transform: scale(1.1);       /* Slight scale effect on icon hover */
    padding: 12px 10px;
}



#labLogoutbtn:hover i {
    transform: scale(1.1);       /* Slight scale effect on icon hover */
}

#labLogoutbtn span {
    font-size: 16px;              /* Text size similar to sidebar links */
    margin-right: 10px;          /* Space between icon and text */
    transition: .3s;             /* Smooth transition */
    margin-top: .5vh;             /* Align with the icon */
    transform: scale(1.1);       /* Slight scale effect on icon hover */
}

.lab-sidebar.minimized #labLogoutbtn {
    width: 7vw;                  /* Adjust button width when sidebar is minimized */
}

.lab-sidebar.minimized #labLogoutbtn i {
    margin-left: 0px;
    width: 100%;
}


#clientLogoutbtn {
    width: 85%;              
    background-color: #8a1c1c;
    color: white;
    padding: 8px 12px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 0%;
}

#clientLogoutbtn i {
    font-size: 25px;
    padding-right: 15px; /* Space between icon and text */
    margin: 0;           /* Reset any default margin */
    /* Removed the padding-left property */
}

#clientLogoutbtn:hover {
    background-color: #cc0202;
    color: white;
    padding: 12px 10px;
}

#clientLogoutbtn:hover i {
    transform: scale(1.1);
}

#clientLogoutbtn span {
    font-size: 16px;
    margin-right: 10px;
    transition: .3s;
    margin-top: .5vh;
    transform: scale(1.1);
}

.lab-sidebar.minimized #clientLogoutbtn {
    width: 7vw; /* Adjust button width when sidebar is minimized */
}

.lab-sidebar.minimized #clientLogoutbtn i {
    margin-left: 0;
    width: 100%;
}


/*Admin Logout*/
#adminLogoutbtn{
    width: 85%;              /* Full width, just like the sidebar links */
      /* Align text to the left */
    background-color:#8a1c1c; /* Same background color as sidebar */
    color: white;              /* Text color to white */
    padding: 8px 12px;        /* Padding similar to sidebar links */
    border: none;              /* Remove border */
    cursor: pointer;           /* Show pointer on hover */
    display: flex;             /* Flexbox for aligning icon and text */
    align-items: center;       /* Vertically center */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
    border-radius: 0%;
    margin-right: 10px;
    text-align: left;
}

#adminLogoutbtn i {
    font-size: 25px;            /* Icon size to match sidebar icons */
    padding-right: 15px;          /* Padding for space between icon and text */
    padding-left: -70%;           /* Padding to align the icon nicely */
    transition: transform 0.3s ease;  /* Add transition for icon hover */
    margin: 0px;
}

#adminLogoutbtn:hover {
    background-color: #cc0202;   /* Background color change on hover */
    color: white;                /* Keep the text white on hover */
    transform: scale(1.1);       /* Slight scale effect on icon hover */
    padding: 12px 15px;
}



#adminLogoutbtn:hover i {
    transform: scale(1.1);       /* Slight scale effect on icon hover */
}

#adminLogoutbtn span {
    font-size: 16px;              /* Text size similar to sidebar links */
    margin-right: 10px;          /* Space between icon and text */
    transition: .3s;             /* Smooth transition */
    margin-top: .5vh;             /* Align with the icon */
    transform: scale(1.1);       /* Slight scale effect on icon hover */
}

.lab-sidebar.minimized #adminLogoutbtn {
    width: 57vw;                  /* Adjust button width when sidebar is minimized */
}

.lab-sidebar.minimized #adminLogoutbtn i {
    margin-left: 0px;
    width: 100%;
}




.side-logo {
    display: flex;                  /* Use flexbox to arrange items in a row */
    align-items: center;            /* Center logo and text vertically */
    
}

.side-logo img {
    width: 95px;                    /* Set desired width for the logo */
    object-fit: cover;              /* Maintain aspect ratio */
    border-radius: 50%;             /* Make it circular */
    margin-right: 10px;             /* Space between logo and text */
}

.logo-name {
    margin: 0;                      /* Remove default margin */
}



/* Lab Staff Dashboard */

.lab-dashboard-body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    height: 100vh;
    overflow: hidden;
}

#requestDetailsSection{
    margin-right: 2vw;
}
/* Styles for the request details table */
.requestDetailsTable {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 1rem;
    font-family: Arial, sans-serif;
}

.requestDetailsTable thead {
    background-color: #f2f2f2;
    text-align: left;
}


.requestDetailsTable th, .requestDetailsTable td {
    padding: 12px 15px;
    border: none;
}

.requestDetailsTable th {
    padding: 12px 15px;
    text-align: left;
    border-top: 2px solid;
}

.requestDetailsTable th:first-child{
    border-radius: 15px 0 0 0; 
    border-left: 2px solid;
    border-top: 2px solid;
}
.requestDetailsTable th:last-child{
    border-radius: 0 10px 0 0;
    border-right: 2px solid;
    border-top: 2px solid;
}


.requestDetailsTable tbody tr {
    background-color: #f9f9f9; /* Light background */
    border-bottom: 1px solid;
    border-bottom-color: rgb(197, 197, 197);
}


.requestDetailsTable tbody tr:hover {
    background-color: #f1f1f1;
}

.requestDetailsTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Alternate row color */
}


.requestDetailsTable th {
    background-color: #A90000;
    color: white;
}

.requestDetailsTable td {
    color: #333;
    text-align: left;
    padding-left: 1%;
    border-bottom: 1px solid;
    border-bottom-color: rgb(197, 197, 197);

}
.requestDetailsTable td:first-child {
    color: #333;
    padding-left: 1%;
}


/* Request Review*/
.request-info {
    display: flex;
    justify-content: space-between; /* This will push the left and right sections to opposite ends */
    margin: 10px 0; /* Optional: Adds space between the elements */
    background-color: rgb(213, 213, 213);
    padding: 0 2% 0 2%;
    border-radius: 5px;
}

.left-info {
    text-align: left; /* Aligns text to the left */
}

.right-info {
    text-align: right; /* Aligns text to the right */
}

.labdash{
    display: flex;
    margin-top: 50px;
}

.labdashleft{
    display: flex;
    flex-direction: column;
    width: 70%;
}

.labdashright{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
     margin-top: -73px;
}

/* Upcoming Events Section Styling */
#upcomingEvents {
    background-color: white;
    padding: 0 20px;
    border-radius: 10px;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
    width: 82%;
}

#upcomingEvents h3 {
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    color: #333;                  /* Text color for the heading */
    margin-bottom: 10px;
}

/* Individual Event Styling */
.upcomingEvents {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd; /* Separate events with a thin line */
    padding: 8px 1px;
}

.upcomingEvents:last-child {
    border-bottom: none;          /* Remove line for the last event */
}

/* Date Styling */
.event-date {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #333;
}

/* Event Title Styling */
.event-title {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    color: #555;
    flex-grow: 1;
    text-align: left;
    font-weight: bold ;
    margin-left: 50px;            /* Space between date and title */
}

h2.title-header {
        margin: 0;
        background: #7D1B1B;
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
}

.userdetails {
    margin: 10px auto;
    width: 50%;
}

.userdeets {
    display: flex;
    align-items: center;
    font-size: 16px;
}

.userdeets p {
    margin: 10px;
}

.deetslbl {
    width: 150px;
}

/* Days Left Styling */
.event-days-left {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    color: #888;
    text-align: right;
}

.request-info-container {
    padding: 12px; /* Increased padding for a more spacious look */
    background-color: #ffffff; /* Changed to a cleaner white background */
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: box-shadow 0.3s ease; /* Smooth transition for hover effect */
}

/* Optional: Add a hover effect for interactivity */
.request-info-container:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Slightly larger shadow on hover */
}

.client-name {
    margin-bottom: 50px;
}

.progress-bar {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    padding: 15px 0;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.24);
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

/* Circle for each step */
.step-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #e0e0e0;
    transition: background-color 0.3s ease, transform 0.4s ease;
    z-index: 0;
}

.step-circle:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}

.step-circle.active {
    background-color: gold /* Yellow for active */
}

.step-circle.completed {
    background-color: green; /* Green for completed */
}

/* Line connector between steps */
.step-line {
    position: absolute;
    top: 10px; /* Aligns with the center of the circles */
    left: calc(100% + 10px); /* Starts the line after the circle */
    width: calc(100% - 40px); /* Connects circles evenly */
    height: 2px;
    background-color: #e0e0e0;
}

.step-line.completed {
    background-color: #66bb6a;
}

/* Label for each step */
.step-label {
    margin-top: 10px;
    width: 100%;
    max-width: 120px;
    height: 64px;
    padding: 6px 0;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    font-weight: 500;
    font-size: 14px;
    color: #616161;
    background-color: #f5f5f5;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s ease; /* Adjusted transition duration */

}

.step-label:hover {
    background-color: #ffd54f; /* Change color on hover */
    color: #212121; /* Darker text on hover */
    transform: scale(1.15); /* Slightly enlarge on hover */
}

/* Active and completed styles */
.progress-step.active .step-label {
    background-color: #f5ffb9;;;
    color: #212121;
    transform: scale(1.15); /* Scale up the active label */
}

.progress-step.completed .step-label {
    background-color: #69f32d63;
    color: #040404;
}


/* Styles for the Request List Tab */


/* Table Container Styles */
#requestList #table-container {
    margin-top: 0;
    margin-bottom: 1px;
}

.adminTitle {
    display: flex; 
    justify-content: space-between; /* Space items apart */
    align-items: center; /* Center items vertically */
    margin-top: 20px;
    margin-bottom: 0;
    padding-bottom: 0;
}

.adminTitleSearch {
    display: flex;
    align-items: center; /* Vertically align the input and button */
    gap: 20px; /* Space between the input and button */
    margin-top: 0;
    margin-bottom: 0;
}

.adminTitleSearch {
    margin-top: 0;
    margin-bottom: 0;
}


/* Table Styles */
#requestList table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

/* Table Header Styles */
#requestList thead {
    background-color: #A90000; /* Unique header color */
    color: white;
}

#requestList th, #requestList td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}


#clientsTable th:first-child, #newRequestsTable th:first-child, #staffTable th:first-child {
    border-radius: 15px 0 0 0;
}

#clientsTable th:last-child, #newRequestsTable th:last-child, #staffTable th:last-child {
    border-radius: 0 15px 0 0;
    justify-content: center;
    align-items: center;

}

#staffTable th:nth-child(3), #staffTable td:nth-child(3){
    text-align: center; /* Center text horizontally */
    vertical-align: middle;
}

#clientsTable th:nth-child(3) {
    text-align: center; /* Center text horizontally */
    vertical-align: middle;
}
#clientsTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Alternate row color */
}


#clientsTable td:last-child, #clientsTable td:nth-child(3){
    text-align: center; /* Center text horizontally */
    vertical-align: middle;
}

#clientsTable tbody tr {
    background-color: #f9f9f9;
    border-bottom: 1px solid;
    border-bottom-color: rgb(197, 197, 197);
}
#clientsTable {
    text-align: left;
}
#clientsTable td {
    text-align: left;
    padding-left: 10px;
}

.manageusers{
font-family: Arial, sans-serif;
}

.view-details-icon {
    font-size: 18px; /* Adjust icon size */
    margin-right: 10px; /* Space between icon and delete button */
    cursor: pointer; /* Make the icon clickable */
    margin-top: 1px;
}

.view-details-icon:hover {
    color: #007bff; /* Change color on hover */
}

.viewDetailsIcon {
    font-size: 18px; /* Adjust icon size */
    margin-right: 10px; /* Space between icon and delete button */
    cursor: pointer; /* Make the icon clickable */
    margin-top: 1px;
}

.viewDetailsIcon:hover {
    color: #007bff; /* Change color on hover */
}



.staff-search-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust spacing between input and button */
    margin-top: auto;
}


#addStaffBtn {
    /* Add custom styles for the button if needed */
    width: 15vw;
}

#addClientModal, #addStaffModal {
    display: none; /* Hide modals by default */
}

.view-details-icon {
    padding-left: 1vw; /* Add left padding to the eye icon */
}

.deactivate-btn {
    padding-left: 1vw; /* Add left padding to the deactivate button */
}



/* Specific Styles for Each Table */


/* Flexbox for aligning h1 and button */
.header-section {
    display: flex;
    justify-content: space-between; /* Aligns h1 to the left and button to the right */
    align-items: center; /* Vertically centers both elements */
}

/* Heading alignment is already handled by flexbox */
.left-align {
    margin: 0; /* Removes default margin to align better */
}

/* Style for the button */
#forecastBtn {
    background-color: #1EBFFF;
    color: black;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
}

#allRequestsTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
}

/* Table header styles */
#allRequestsTable thead {
    background-color: #A90000; /* Green background */
    color: white; /* White text */
}

#allRequestsTable th {
    padding: 12px 15px;
    text-align: left;
    border-top: 2px solid;
}

#allRequestsTable th:first-child{
    border-radius: 15px 0 0 0; 
    border-left: 2px solid;
    border-top: 2px solid;
}

#allRequestsTable th:last-child{
    border-radius: 0 10px 0 0;
    border-right: 2px solid;
    border-top: 2px solid;
}

/* Table body styles */
#allRequestsTable tbody tr {
    background-color: #f9f9f9; /* Light background */
    border-bottom: 1px solid;
    border-bottom-color: rgb(197, 197, 197);
}

#allRequestsTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Alternate row color */
}

#allRequestsTable td {
    padding: 12px 15px;
    border: none    ;
}


/* Hover effect for rows */
#allRequestsTable tbody tr:hover {
    background-color: #d8f0e5; /* Light green on hover */
}



#allRequestsTable button {
    background-color: #A90000; 
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 10px;
}

#allRequestsTable td:last-child {
        display: flex;
        justify-content: center; /* Horizontally center the button */
        align-items: center; /* Vertically center the button (optional) */
    }



  /* Service Requests Table Styling */
  
#serviceRequestsTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

/* Table header styles */
#serviceRequestsTable thead {
    background-color: #A90000; /* Green background */
    color: white; /* White text */
}

#serviceRequestsTable th {
    padding: 12px 15px;
    text-align: left;
    border-top: 2px solid;
}

#serviceRequestsTable th:first-child{
    border-radius: 15px 0 0 0; 
    border-left: 2px solid;
    border-top: 2px solid;
}

#serviceRequestsTable th:last-child{
    border-radius: 0 10px 0 0;
    border-right: 2px solid;
    border-top: 2px solid;
}

/* Table body styles */
#serviceRequestsTable tbody tr {
    background-color: #f9f9f9; /* Light background */
    border-bottom: 1px solid;
    border-bottom-color: rgb(197, 197, 197);
}

#serviceRequestsTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Alternate row color */
}

#serviceRequestsTable td {
    padding: 12px 15px;
    border: none    ;
}

/* Hover effect for rows */
#serviceRequestsTable tbody tr:hover {
    background-color: #d8f0e5; /* Light green on hover */
}





#serviceRequestsTable button {
    background-color: #A90000; 
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;    
    border-radius: 10px;
}

#serviceRequestsTable td:last-child {
        display: flex;
        justify-content: center; /* Horizontally center the button */
        align-items: center; /* Vertically center the button (optional) */
}



  /* Follow up Requests Table Styling */

  #followUpRequestsTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

/* Table header styles */
#followUpRequestsTable thead {
    background-color: #A90000; /* Green background */
    color: white; /* White text */
}

#followUpRequestsTable th {
    padding: 12px 15px;
    text-align: left;
    border-top: 2px solid;
}

#followUpRequestsTable th:first-child{
    border-radius: 15px 0 0 0; 
    border-left: 2px solid;
    border-top: 2px solid;
}

#followUpRequestsTable th:last-child{
    border-radius: 0 10px 0 0;
    border-right: 2px solid;
    border-top: 2px solid;
}

/* Table body styles */
#followUpRequestsTable tbody tr {
    background-color: #f9f9f9; /* Light background */
    border-bottom: 1px solid;
    border-bottom-color: rgb(197, 197, 197);
}

#followUpRequestsTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Alternate row color */
}

#followUpRequestsTable td {
    padding: 12px 15px;
    border: none    ;
}

/* Hover effect for rows */
#followUpRequestsTable tbody tr:hover {
    background-color: #d8f0e5; /* Light green on hover */
}



#followUpRequestsTable button {
    background-color: #A90000; 
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 10px;
}

#followUpRequestsTable td:last-child {
        display: flex;
        justify-content: center; /* Horizontally center the button */
        align-items: center; /* Vertically center the button (optional) */
}

/* Input Styles within Request List */
#requestList input[type="text"] {
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    width: calc(100% - 22px); /* Full width accounting for padding */
}

#requestList input[type="text"]:focus {
    border-color: #A90000; /* Focus color for inputs */
    outline: none;
}

/* Responsive Styles for Request List */
@media (max-width: 600px) {
    #requestList th, #requestList td {
        font-size: 14px; /* Adjust font size for smaller screens */
    }

    #requestList input[type="text"] {
        width: calc(100% - 20px); /* Adjust input width */
    }
}

.appointment-form-container {
    display: flex;
    justify-content: space-between;
  }

  #appointmentPage.content {
    width: 94%; /* Take up a portion of the screen, leaving space on the right */
    margin-right: auto; /* Align to the left */
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Avoid content overflow */
}

  .appointment-form {
    margin-left: 0;
  }
  
  .appointment-form-fields {
    flex: 1;
}

#calendar.appointment-calendar {
    flex: 1; /* Make calendar area responsive */
    max-width: 100%;
    background-color: #ffffff; /* White background for a card look */
    border-radius: 12px; /* Soft rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    margin-right: 20px;
    transition: box-shadow 0.3s ease; /* Smooth transition for shadow effect */
    font-family: 'Roboto', Arial, sans-serif; /* Google's preferred font */
    overflow: hidden;
}

/* Hover effect for calendar container */
#calendar.appointment-calendar:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

/* FullCalendar toolbar styles */
.fc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px; /* Space below the toolbar */
    font-weight: 500; /* Slightly bolder font for better readability */
    color: #202124; /* Dark gray for neutral text */
}

/* Day grid day styles */
.fc-daygrid-day {
    background-color: #f5f5f5; /* Light gray background for day cells */
    border: 1px solid #e0e0e0; /* Light border for structure */
    transition: background-color 0.2s ease;
}

/* Hover effect for day cells */
.fc-daygrid-day:hover {
    background-color: #e8f0fe; /* Light blue background on hover */
}

/* Event styles */
.fc-event {
    background-color: #1a73e8; /* Google’s primary blue color */
    border: none; /* Remove default borders */
    color: white; /* White text for contrast */
    border-radius: 8px; /* Rounded corners for events */
    padding: 6px 12px; /* Padding for event content */
    font-size: 0.9em; /* Adjust font size for better readability */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for events */
}

/* Event hover effect */
.fc-event:hover {
    background-color: #0c59d4; /* Darker blue on hover for events */
}

/* List view event styles */
.fc-list-event {
    background-color: #ffffff; /* White background for list events */
    border: 1px solid #e0e0e0; /* Light border */
    border-radius: 8px; /* Round corners */
    margin-bottom: 10px; /* Space between events */
    padding: 10px; /* Padding for event content */
}

/* Specific styles for today's date */
.fc-daygrid-day.fc-day-today {
    background-color: #e8f0fe; /* Light blue background for today */
}

/* Adding styles for calendar headers */
.fc-daygrid-week-header {
    background-color: #f5f5f5; /* Light gray for week headers */
    color: #202124; /* Dark gray text */
    font-weight: 500; /* Bold font for better readability */
    text-align: center; /* Center align header text */
    padding: 10px 0; /* Padding for headers */
    border-radius: 8px; /* Rounded corners for headers */
}

/* Style for the event dots in the list view */
.fc-list-event-dot {
    background-color: #1a73e8; /* Google Blue for event dots */
    border-radius: 50%; /* Round dots */
    margin-right: 8px; /* Space between dot and text */
}

/* Responsiveness */
@media (max-width: 600px) {
    #calendar.appointment-calendar {
        padding: 10px; /* Less padding on smaller screens */
        margin-left: 10px; /* Less left margin */
    }

    .fc-daygrid-day {
        padding: 5px; /* Adjust padding for day cells on small screens */
    }

    .fc-event {
        font-size: 0.8em; /* Smaller font size for events on small screens */
    }
}

  .appointmentline {
    display: flex;
    justify-content: space-between;
    }
  
    .appointmentheaderform {
        background: #7D1B1B;
        height: 5vh;
    }
      form#appointmentForm {
        width: 85%;
        margin: 30px auto 10px auto;
      }
      .appointmentbody {
        width: 80%;
        border-radius: 10px;
        background: #fdfdfd;
        overflow: hidden;
        margin: 20px 60px;
        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
    }
    .appointment-information {
        width: 73%;
        margin: 20px auto;
        padding: 13px;
        padding-left: 30px;
        background-color: #ffe7e7;
        border-radius: 20px;
        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
        transition: box-shadow 0.3s ease;
    }
    
    .appointment-information:hover {
        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.75); /* Stronger shadow on hover */
    }
    
      .appointmentbuttons {
        display: flex;
        justify-content: center;
        gap: 50px;
        margin-top: 10px;
    }
    
    .appointment-title {
        font-size: 1.8rem;
        font-weight: 600; /* Slightly bolder for emphasis */
        color: #3c4043; /* Material Design neutral text color */
        margin-bottom: 20px;
        letter-spacing: 0.5px;
        line-height: 1.4;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Material-style shadow */
        transition: color 0.3s ease; /* Smooth transition for interactive feel */
        border-bottom: 2px solid;
        padding-bottom: 10px;
    }
    
    .appointment-title:hover {
        color: #1a73e8; /* Subtle color change on hover for interactivity */
    }
    
    
  .appointment-label {
    display: block;
    margin: 10px 0 5px;
    width: 350px;
    font-size: 14px;
  }
  
  .appointment-input, .appointment-select {
    width: 100%; /* Make inputs full width */
    padding: 8px;
    margin-bottom: 15px;
  }
  
  .appointment-button {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
  }
  
  .appointment-button:hover {
    background-color: #0056b3;
  }

#forecastSection {
    margin-left: 3vw;
    margin-right: 2vw;
}
#requestHistoryContainer {
    margin-top: 1vh;
    margin-right: 4vw;
    margin-left: 2vw;
}
/* Released Requests Header */
  .released-requests-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Ensure vertical alignment */
    margin-bottom: 20px;  /* Adjust spacing as needed */
}

.released-requests-header input {
    max-width: 300px;  /* Set a max-width for the search input */
    padding: 8px;      /* Adjust padding for the input */
}

/* Released Requests Table Styling */
#releasedRequestsTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    margin-top: 20px;
}

/* Table header styles */
#releasedRequestsTable thead {
    background-color: #A90000; /* Green background */
    color: white; /* White text */
}

#releasedRequestsTable th {
    padding: 12px 15px;
    text-align: left;
    border-top: 2px solid;
}

#releasedRequestsTable th:first-child{
    border-radius: 15px 0 0 0; 
    border-left: 2px solid;
    border-top: 2px solid;
}

#releasedRequestsTable th:last-child{
    border-radius: 0 10px 0 0;
    border-right: 2px solid;
    border-top: 2px solid;
}

/* Table body styles */
#releasedRequestsTable tbody tr {
    background-color: #f9f9f9; /* Light background */
    border-bottom: 1px solid;
    border-bottom-color: rgb(197, 197, 197);
}

#releasedRequestsTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Alternate row color */
}

#releasedRequestsTable td {
    padding: 12px 15px;
    border: none    ;
}

/* Hover effect for rows */
#releasedRequestsTable tbody tr:hover {
    background-color: #d8f0e5; /* Light green on hover */
}


#releasedRequestsTable button {
    background-color: #A90000; 
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 10px;
}

#releasedRequestsTable td:last-child {
        display: flex;
        justify-content: center; /* Horizontally center the button */
        align-items: center; /* Vertically center the button (optional) */
    }



/* Rejected Requests Table Styling */

#rejectedRequestsTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

/* Table header styles */
#rejectedRequestsTable thead {
    background-color: #A90000; /* Green background */
    color: white; /* White text */
}

#rejectedRequestsTable th {
    padding: 12px 15px;
    text-align: left;
    border-top: 2px solid;
}

#rejectedRequestsTable th:first-child{
    border-radius: 15px 0 0 0; 
    border-left: 2px solid;
    border-top: 2px solid;
}

#rejectedRequestsTable th:last-child{
    border-radius: 0 10px 0 0;
    border-right: 2px solid;
    border-top: 2px solid;
}

/* Table body styles */
#rejectedRequestsTable tbody tr {
    background-color: #f9f9f9; /* Light background */
    border-bottom: 1px solid;
    border-bottom-color: rgb(197, 197, 197);
}

#rejectedRequestsTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Alternate row color */
}

#rejectedRequestsTable td {
    padding: 12px 15px;
    border: none    ;
}

/* Hover effect for rows */
#rejectedRequestsTable tbody tr:hover {
    background-color: #d8f0e5; /* Light green on hover */
}


#rejectedRequestsTable button {
    background-color: #A90000; 
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 10px;
}

#rejectedRequestsTable td:last-child {
        display: flex;
        justify-content: center; /* Horizontally center the button */
        align-items: center; /* Vertically center the button (optional) */
    }



.event-item {
    display: inline-block;
    margin: 10px;
    width: 200px;
  }
  
  .event-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
  }
  
  .event-item .more-info-btn {
    display: center;
    margin-top: 10px;
  }
  
 
  input#eventSearch {
    width: 70%;
}
.events-header-admin {
    display: flex;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    align-items: center;
    height: 20vh;
    justify-content: space-evenly;
    background: #A90000;
    border-radius: 10px;
  }

  .events-header-admin h2 {
    margin: 0;
    font-size: 40px;
    color: #ffffff;
    font-weight: bold;
  }

  .searchandbtn {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    }

    button#addEventBtn {
        margin: 20px;
        background: #FFCC00;
        color: black;
    }

  .events-header {
    display: flex;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    align-items: center;
    height: 20vh;
    justify-content: space-evenly;
    background: #550000;
    border-radius: 10px;
  }
  
  .events-header h2 {
    margin: 0;
    font-size: 40px;
    color: #ffffff;
    font-weight: bold;
  }
  
  .events-header input {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 300px;
  }
  
  .events-header button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    background-color: #4285f4;
    color: #fff;
    cursor: pointer;
  }
  
  .events-header button:hover {
    background-color: #357ae8;
  }

  .event-details-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 80%; /* adjust the width to fit the screen */
    max-width: 800px; /* set a maximum width */
  }


  .event-image-modal {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
  }



#appointmentsTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

/* Table header styles */
#appointmentsTable thead {
    background-color: #A90000; /* Green background */
    color: white; /* White text */
}

#appointmentsTable th {
    padding: 12px 15px;
    text-align: left;
    border-top: 2px solid;
}

#appointmentsTable th:first-child{
    border-radius: 15px 0 0 0; 
    border-left: 2px solid;
    border-top: 2px solid;
}

#appointmentsTable th:last-child{
    border-radius: 0 10px 0 0;
    border-right: 2px solid;
    border-top: 2px solid;
}

/* Table body styles */
#appointmentsTable tbody tr {
    background-color: #f9f9f9; /* Light background */
    border-bottom: 1px solid;
    border-bottom-color: rgb(197, 197, 197);
}

#appointmentsTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Alternate row color */
}


#appointmentsTable td {
    padding: 12px 15px;
    border: none    ;
    text-align: left;
}

/* Hover effect for rows */
#appointmentsTable tbody tr:hover {
    background-color: #d8f0e5; /* Light green on hover */
}



/* No appointments message styles */
#appointmentsTable tbody tr.no-appointments td {
    text-align: center;
    color: #999; /* Grey text */
    font-style: italic;
}

#taskList {
    margin-right: 3vw;
    margin-bottom: 10px;
}
/* Counter */
#taskTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
}

/* Table header styles */
#taskTable thead {
    background-color: #A90000; /* Green background */
    color: white; /* White text */
}

#taskTable th {
    padding: 12px 15px;
    border-top: 2px solid;
    text-align: left;
}

#taskTable th:first-child{
    border-radius: 15px 0 0 0; 
    border-left: 2px solid;
    border-top: 2px solid;
}

#taskTable th:last-child{
    border-radius: 0 10px 0 0;
    border-right: 2px solid;
    border-top: 2px solid;
}

/* Table body styles */
#taskTable tbody tr {
    background-color: #f9f9f9; /* Light background */
    border-bottom: 1px solid;
    border-bottom-color: rgb(197, 197, 197);
}

#taskTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Alternate row color */
}

#taskTable td {
    padding: 12px 15px 12px 15px;
    border: none    ;
    text-align: left;
}

/* Hover effect for rows */
#taskTable tbody tr:hover {
    background-color: #d8f0e5; /* Light green on hover */
}


#taskTable button {
    background-color: #A90000; 
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 10px;
}

#taskTable td:last-child {
        justify-content: center; /* Horizontally center the button */
        align-items: center; /* Vertically center the button (optional) */
    }


    #ongoingTaskTable {
        width: 100%;
        border-collapse: collapse;
        margin-top: 1vh;
    }
    
    /* Table header styles */
    #ongoingTaskTable thead {
        background-color: #A90000; /* Green background */
        color: white; /* White text */
    }
    
    #ongoingTaskTable th {
        padding: 12px 15px;
        text-align: left;
        border-top: 2px solid;
    }
    
    #ongoingTaskTable th:first-child{
        border-radius: 15px 0 0 0; 
        border-left: 2px solid;
        border-top: 2px solid;
    }
    
    #ongoingTaskTable th:last-child{
        border-radius: 0 10px 0 0;
        border-right: 2px solid;
        border-top: 2px solid;
    }
    
    /* Table body styles */
    #ongoingTaskTable tbody tr {
        background-color: #f9f9f9; /* Light background */
        border-bottom: 1px solid;
        border-bottom-color: rgb(197, 197, 197);
    }
    
    #ongoingTaskTable tbody tr:nth-child(even) {
        background-color: #f2f2f2; /* Alternate row color */
    }
    
    #ongoingTaskTable td {
        padding: 12px 15px;
        border: none;
        cursor: pointer;
        
    }
    
    /* Hover effect for rows */
    #ongoingTaskTable tbody tr:hover {
        background-color: #d8f0e5; /* Light green on hover */
    }
    
    
    #ongoingTaskTable button {
        background-color: #A90000; 
        color: white;
        border: none;
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 10px;
    }
    
    #ongoingTaskTable td:last-child {
            display: flex;
            justify-content: center; /* Horizontally center the button */
            align-items: center; /* Vertically center the button (optional) */
        }
    

#processedTaskTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1vh;
}

/* Table header styles */
#processedTaskTable thead {
    background-color: #A90000; /* Green background */
    color: white; /* White text */
}

#processedTaskTable th {
    padding: 12px 15px;
    text-align: left;
    border-top: 2px solid;
}

#processedTaskTable th:first-child{
    border-radius: 15px 0 0 0; 
    border-left: 2px solid;
    border-top: 2px solid;
}

#processedTaskTable th:last-child{
    border-radius: 0 10px 0 0;
    border-right: 2px solid;
    border-top: 2px solid;
}

/* Table body styles */
#processedTaskTable tbody tr {
    background-color: #f9f9f9; /* Light background */
    border-bottom: 1px solid;
    border-bottom-color: rgb(197, 197, 197);
}

#processedTaskTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Alternate row color */
}

#processedTaskTable td {
    padding: 12px 15px 12px 15px;
    border: none    ;
    text-align: left;
}

/* Hover effect for rows */
#processedTaskTable tbody tr:hover {
    background-color: #d8f0e5; /* Light green on hover */
}


#processedTaskTable button {
    background-color: #A90000; 
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 10px;
}

#processedTaskTable td:last-child {
        display: flex;
        justify-content: center; /* Horizontally center the button */
        align-items: center; /* Vertically center the button (optional) */
}


#rejectedTaskTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1vh;
}

/* Table header styles */
#rejectedTaskTable thead {
    background-color: #A90000; /* Green background */
    color: white; /* White text */
}

#rejectedTaskTable th {
    padding: 12px 15px;
    text-align: left;
    border-top: 2px solid;
}

#rejectedTaskTable th:first-child{
    border-radius: 15px 0 0 0; 
    border-left: 2px solid;
    border-top: 2px solid;
}

#rejectedTaskTable th:last-child{
    border-radius: 0 10px 0 0;
    border-right: 2px solid;
    border-top: 2px solid;
}

/* Table body styles */
#rejectedTaskTable tbody tr {
    background-color: #f9f9f9; /* Light background */
    border-bottom: 1px solid;
    border-bottom-color: rgb(197, 197, 197);
}

#rejectedTaskTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Alternate row color */
}

#rejectedTaskTable td {
    padding: 12px 15px 12px 15px;
    border: none    ;
    text-align: left;
}

/* Hover effect for rows */
#rejectedTaskTable tbody tr:hover {
    background-color: #d8f0e5; /* Light green on hover */
}


#rejectedTaskTable button {
    background-color: #A90000; 
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 10px;
}

#rejectedTaskTable td:last-child {
        display: flex;
        justify-content: center; /* Horizontally center the button */
        align-items: center; /* Vertically center the button (optional) */
    }

.task-overview {
    background-color: #ffffff; /* White background for the entire section */
    padding: 15px; /* Reduced padding around the section */
    border-radius: 10px; /* Slightly rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
    margin: -50px 0; /* Center align the box to the left */
    width: 95%; /* Width of the overview box */

}

.task-overview h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    margin-top: 2px;
    color: #333;
}

.task-overview table {
    width: 100%; /* Full-width table */
    border-collapse: collapse; /* Collapse borders */
    border-radius: 10px; /* Rounded corners for the table */
    overflow: hidden; /* Hide overflow for rounded corners */
}

.task-overview th, .task-overview td {
    padding: 10px; /* Reduced padding for table cells */
    text-align: center; /* Center align text in headers and cells */
    border: none; /* No borders */
    font-size: 14px; /* Decreased font size for table text */
    font-family: Arial, sans-serif; /* Font family for table text */
    color: #333; /* Dark text color for better readability */
}

.task-overview thead {
    background-color: #f2f2f2; /* Light gray header background */
    color: #333; /* Dark text color for header */
}

.task-overview th {
    font-weight: bold; /* Bold text for headers */
    font-size: 16px; /* Decreased font size for header text */
    border-bottom: 2px solid #ddd; /* Border below the header */
}

.task-overview tbody tr {
    border-bottom: 1px solid #ddd; /* Bottom border for each row */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Default shadow for all rows */
    border-radius: 5px; /* Slightly rounded corners for floating effect */
    transition: box-shadow 0.3s; /* Smooth transition for shadow effect */
}

.task-overview tbody tr:hover {
    background-color: #e9ecef; /* Slightly darker gray on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Shadow for floating effect on hover */
    padding: 10px
}

.task-overview .priority-high {
    background-color: #DC3545; /* Red for high priority */
    color: #ffffff; /* White text for high priority */
    padding: 8px 20px;; /* Adjusted padding */
    font-weight: bold;
  
    border-radius: 10px; /* Rounded corners for priority levels */
    font-size: 13px; /* Decreased font size for priority level */
}

.task-overview .priority-medium {
    background-color: #ffc107; /* Yellow for medium priority */
    color: #ffffff;
    width: 15px; 
    padding: 8px 10px; /* Adjusted padding */
    border-radius: 5px; /* Rounded corners for priority levels */
    font-weight: bold;
    border-radius: 10px;
    font-size: 13px; /* Decreased font size for priority level */
}

.task-overview .priority-low {
    background-color: #28A745; /* Green for low priority */
    width: 15px; 
    color: #ffffff; /* White text for low priority */
    padding: 8px 20px; /* Adjusted padding */
    border-radius: 10px; /* Rounded corners for priority levels */
    font-size: 13px; /* Decreased font size for priority level */
}


.status-rejected {
    background-color: #ff4c4c; 
    color: #ffffff;
    padding: 8px 20px; 
    border-radius: 5px;
    font-size: 14px; 
    border-radius: 10px;
}

.status-released {
    background-color: #28A745; 
    color: #ffffff; 
    padding: 8px 20px; 
    border-radius: 5px; 
    font-size: 14px; 
    font-weight: bold;
    border-radius: 10px;
}

.status-preparing {
    background-color: #007BFF; 
    color: #ffffff; 
    padding: 8px 20px;  
    font-weight: bold;
    border-radius: 10px;
    font-size: 14px; 
}

.task-overview .status-button {
    padding: 5px 10px; /* Adjusted padding for the button */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners for the button */
    color: white; /* White text color */
    font-size: 12px; /* Decreased font size for the button text */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s; /* Smooth background color transition */
    outline: none; /* Remove outline */
}

.task-overview .status-processed {
    background-color: #28a745; /* Green for processed status */
}

.task-overview .status-in-progress {
    background-color: #ffc107; /* Yellow for in-progress status */
}

.task-overview .status-rejected {
    background-color: #dc3545; /* Red for rejected status */
}

.task-overview .status-button:hover {
    filter: brightness(85%); /* Darken button on hover */
}

/* Column Width Adjustments */
.task-overview th:nth-child(1), /* Date */
.task-overview td:nth-child(1) {
    width: 10%; /* Width for Date */
}

.task-overview th:nth-child(2), /* Request No. */
.task-overview td:nth-child(2) {
    width: 15%; /* Width for Request No. */
}

.task-overview th:nth-child(3), /* Service Type */
.task-overview td:nth-child(3) {
    width: 15%; /* Width for Service Type */
}

.task-overview th:nth-child(4), /* Client Type */
.task-overview td:nth-child(4) {
    width: 15%; /* Width for Client Type */
}

.task-overview th:nth-child(5), /* Client Name */
.task-overview td:nth-child(5) {
    width: 20%; /* Width for Client Name */
}

.task-overview th:nth-child(6), /* No. of Samples */
.task-overview td:nth-child(6) {
    width: 10%; /* Width for No. of Samples */
}

.task-overview th:nth-child(7), /* Priority Level */
.task-overview td:nth-child(7) {
    width: 15%; /* Width for Priority Level */
}

.task-overview th:nth-child(8), /* Status */
.task-overview td:nth-child(8) {
    width: 15%; /* Width for Status */
}

/* Media Queries for Responsiveness */

@media (max-width: 768px) {
    .task-overview {
        width: 130%; /* Almost full width on smaller screens */
    }

    .task-overview h3 {
        font-size: 20px; /* Smaller heading size */
    }

    .task-overview th, .task-overview td {
        font-size: 12px; /* Smaller font size for table */
        padding: 8px; /* Less padding */
        font-size: 12px;
    }

    .task-overview .status-button {
        font-size: 10px; /* Smaller font size for buttons */
        padding: 4px 6px; /* Less padding for buttons */
    }

    #upcomingEvents{
        margin: 0% !important;
        width: 88%;
    }

    #progressBarSection{
        margin: 0 !important;
    }
}

@media (max-width: 576px) {
    .task-overview {
        width: 140%; /* Full width on the smallest screens */
        padding: 5px; /* Minimal padding */
    }

    .task-overview h3 {
        font-size: 18px; /* Smaller heading size */
    }

    .task-overview th, .task-overview td {
        font-size: 10px; /* Smaller font size for table */
        padding: 4px; /* Less padding */
        font-size: 12px;
    }

    .task-overview .status-button {
        font-size: 8px; /* Smaller font size for buttons */
        padding: 3px 5px; /* Less padding for buttons */
    }
}



/* Button Styles */
.task-buttons button {
    background-color: rgb(207, 207, 207);
    color: black;
    border: none;
    padding: .7vw 1vw;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}

/* Active Button Style */
.task-buttons button.active {
    background-color: #FFCC00; /* Color when the button is selected */
    color: black; /* Change text color for better contrast */
}

.task-buttons {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    gap: 20px;
    border-bottom: 2px solid;
    margin-bottom: 20px;
}


/* General Button Styles */
.filter-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-buttons button {
    background-color: rgb(207, 207, 207); /* Default button color */
    border: none;
    color: black;
    font-size: 17px;
    cursor: pointer;
    border-radius: 0;
    width: 25%;
    height: 8.5vh;
}

.separator {
    display: inline-block;
    width: 2px;
    height: 25px;
    background-color: black;
    margin: 0 10px;
}

button:hover {
    background-color: #e0e0e0;
}

/* Active Button Style */
.filter-buttons button.active {
    background-color: #FFCC00; /* Darker color when active */
    color: black; /* Keep text color white */
    z-index: 1; /* Bring active button above others */
}

/* General Table Styles for Processed and Rejected Tasks */
#processed .task-placeholder #processedTaskTable,
#rejected .task-placeholder #rejectedTaskTable {
    width: 100%;
    border-collapse: collapse; /* Remove space between cells */
    margin: 20px 0; /* Add some margin above and below the table */
    font-size: 1rem; /* Set the base font size */
}

/* Header Styles for Processed Tasks */
#processed .task-placeholder #processedTaskTable thead {
    background-color: #ffc107; /* Yellow color for processed tasks header */
    color: #ffffff; /* White text color for the header */
}

/* Header Styles for Rejected Tasks */
#rejected .task-placeholder #rejectedTaskTable thead {
    background-color: #dc3545; /* Red color for rejected tasks header */
    color: #ffffff; /* White text color for the header */
}

/* Common Header Cell Styles */
#processed .task-placeholder #processedTaskTable th,
#rejected .task-placeholder #rejectedTaskTable th {
    padding: 12px; /* Padding for header cells */
    text-align: left; /* Align text to the left */
    border-bottom: 2px solid #d39e00; /* Darker yellow line for processed */
}

#rejected .task-placeholder #rejectedTaskTable th {
    border-bottom: 2px solid #c82333; /* Darker red line for rejected */
}

/* Body Styles for Processed Tasks */
#processed .task-placeholder #processedTaskTable tbody {
    background-color: #f9f9f9; /* Light background for the body */
}

/* Body Styles for Rejected Tasks */
#rejected .task-placeholder #rejectedTaskTable tbody {
    background-color: #f9f9f9; /* Light background for the body */
}

/* Common Table Cell Styles */
#processed .task-placeholder #processedTaskTable td,
#rejected .task-placeholder #rejectedTaskTable td {
    padding: 10px; /* Padding for table cells */
    border-bottom: 1px solid #ddd; /* Light gray border at the bottom */
}

/* Hover Effect for Processed Tasks Table Rows */
#processed .task-placeholder #processedTaskTable tbody tr:hover {
    background-color: #ffeeba; /* Light yellow background on hover */
}

/* Hover Effect for Rejected Tasks Table Rows */
#rejected .task-placeholder #rejectedTaskTable tbody tr:hover {
    background-color: #f5c6cb; /* Light red background on hover */
}

/* Responsive Design for Processed and Rejected Tasks */
@media (max-width: 768px) {
    #processed .task-placeholder #processedTaskTable,
    #rejected .task-placeholder #rejectedTaskTable {
        font-size: 0.9rem; /* Slightly smaller font on smaller screens */
    }

    #processed .task-placeholder #processedTaskTable th,
    #processed .task-placeholder #processedTaskTable td,
    #rejected .task-placeholder #rejectedTaskTable th,
    #rejected .task-placeholder #rejectedTaskTable td {
        padding: 8px; /* Reduce padding on smaller screens */
    }
}

/*Approching Deadlines*/
#approachingDeadlines {
    padding: 15px;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
    width: 95%;
    margin-top: 75px;
}

/* Heading styling */
#approachingDeadlines h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    margin-top: 2px;
    color: #800000;
    font-weight: bold;
    text-align: left;
}

/* Flexbox container for the cards */
.approaching-deadlines-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* Card styling */
.deadline-card {
    display: flex;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    width: 270px;
    align-items: stretch; /* Ensures the date box and info section are the same height */
}

/* Date box styling */
.date-box {
    background-color: #800000;
    color: #ffffff;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px; /* Keeps the width consistent */
    margin-right: 10px;
    flex-shrink: 0; /* Prevents the date box from shrinking */
}

/* Ensure the date box stretches the entire height of the card */
.deadline-card .date-box {
    height: 100%;
}

/* Styling for day and month in date box */
.date-box .day {
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
}

.date-box .month {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Information section styling */
.deadline-info {
    padding: 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.deadline-info h4 {
    font-size: 16px;
    color: #333;
    margin: 0;
    font-weight: bold;
}

.deadline-info p {
    margin: 5px 0;
    font-size: 13px;
    color: #555;
}

.deadline-info .days-left {
    color: red;
    font-weight: bold;
    font-size: 14px;
}

/* Responsive design to handle mobile views */
@media (max-width: 768px) {
    .approaching-deadlines-container {
        flex-direction: column;
    }

    .deadline-card {
        width: 100%; /* Full width on small screens */
    }
}



            /* Account Profile Section */

            /* IDs */
            span#fullNameDetail, span#address, span#contactNumber, span#username {
                background: lightgray;
                height: 30px;
                align-content: center;
                padding-left: 10px;
                width: 100%;
                border-radius: 10px;
            }

            input#firstName, input#middleName, input#lastName, input.email, input#username, input.password, input#address, input#contactNumber, input#school, input#department {
                width: auto;
                padding: 10px;
                margin-top: 1vh;
            } 

            button#editAccountBtn {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: auto;
                margin-top: 20px;
                margin-bottom: 17px;
            }

            /* Classes */
            .tabcontent {
                display: none;
            }

            .adminprofile {
                box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
                border-radius: 15px;
                margin-top: 20px;
            }

            h1.accproflabel {
                width: 100%;
                border-bottom: 2px solid;
                margin-top: 15px;
                margin-bottom: 6px;
            }

            .accountinfo {
                padding: 20px 150px;
                margin-bottom: 30px;
            }

            h2.profinfolabel {
                background: #7D1B1B;
                height: 50px;
                color: white;
                text-align: center;
                align-content: center;
                border-top-left-radius: 15px;
                border-top-right-radius: 15px;
            }

            .account-header {
                display: flex;
                align-items: center;
                gap: 20px;
                height: 20vh;
            }

            .profile-picture-container {
                position: relative;
                width: 125px;
                height: 125px;
                border-radius: 50%;
                overflow: hidden;
                cursor: pointer;
            }

            .profile-picture {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 50%;
                background-color: #f0f0f0; /* Placeholder background color */
            }

            .account-details {
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

            /* Full Name Styling (Header) */
            .full-name {
                font-size: 24px;
                font-weight: bold;
                color: #333;
                display: block;
            }

            /* Account Number Styling */
            .account-number {
                font-size: 16px;
                color: #666;
                margin-bottom: 20px;
                margin: 0;
            }

            .role-bubble {
                background-color: #FFFACD;
                color: #333;
                padding: 10px 15px;
                border-radius: 30px;
                display: inline-block;
                font-size: 14px;
                font-weight: bold;
                width: 17vh;
                height: 1.5vh;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            /* Account Details Bubbles */

            .detail-bubble {
                padding: 5px;
                border-radius: 30px;
                font-size: 16px;
                color: #333;
                justify-content: space-between;
                width: 100%;
                box-sizing: border-box;
                display: flex;
                align-content: center;
                flex-direction: column;
            }

            .detail-bubble span {
                font-weight: bold;
                color: #444;
            }

            p.accdeetslbl { /* account details label */
                margin: 0;
                width: 40%;
                align-content: center;
            }

            /* Edit button styles */
            .edit-btn {
                background-color: #007bff; /* Blue background */
                color: white; /* White text */
                border: none;
                padding: 6px 12px;
                border-radius: 4px; /* Rounded corners */
                cursor: pointer;
                transition: background-color 0.3s;
            }

            .edit-btn:hover {
                background-color: #0056b3; /* Darker blue on hover */
            }

            .event-item .edit-btn, .event-item .delete-btn {
                display: none;
            }
            
            .event-item.show-actions .edit-btn, .event-item.show-actions .delete-btn {
                display: block;
            }

            /* Media Queries for Responsiveness */

            /* Small screens (up to 600px) */
            @media (max-width: 600px) {
                .accountinfo {
                    padding: 10px;
                }
                
                .account-header {
                    flex-direction: column;
                    gap: 10px;
                    height: auto;
                }

                .profile-picture-container {
                    width: 80px;
                    height: 80px;
                }
                
                .full-name {
                    font-size: 20px;
                }

                .account-number {
                    font-size: 14px;
                }
                
                .role-bubble {
                    font-size: 12px;
                    width: auto;
                    padding: 8px;
                }
                
                h2.profinfolabel {
                    font-size: 18px;
                    height: auto;
                    padding: 10px;
                }
                
                .detail-bubble {
                    font-size: 14px;
                    padding: 8px;
                }
                
                .edit-btn {
                    font-size: 14px;
                    padding: 5px 10px;
                }
            }

            /* Medium screens (up to 768px) */
            @media (max-width: 768px) {
                .accountinfo {
                    padding: 10px 20px;
                }
                
                .account-header {
                    flex-direction: row;
                    gap: 15px;
                    height: auto;
                }

                .profile-picture-container {
                    width: 100px;
                    height: 100px;
                }
                
                .full-name {
                    font-size: 22px;
                }

                .account-number {
                    font-size: 15px;
                }

                .role-bubble {
                    font-size: 13px;
                    width: auto;
                }

                h2.profinfolabel {
                    font-size: 20px;
                    height: auto;
                    padding: 15px;
                }
                
                .detail-bubble {
                    font-size: 15px;
                    padding: 10px;
                }
                
                .edit-btn {
                    font-size: 15px;
                    padding: 6px 12px;
                }

                input#editFirstName, input#editMiddleName, input#editLastName {
                    width: 335% !important;
                }
            }

            /*Edit Account Profile Section*/

            /* Form Layout */
            #editClientForm {
                display: flex;
                flex-direction: column;
                height: 100%;
                gap: 15px; /* Spacing between form fields */
                padding-top: 20px;
            }

            #editClientForm div {
                display: flex;
                justify-content: space-between;
                gap: 10px;
            }

            #editClientForm label {
                font-weight: bold;
                margin-bottom: 5px;
                font-size: 14px;
            }

            /* Input Fields */
            #editClientForm input[type="text"] {
                width: 100%;
                padding: 12px; /* Increase padding for larger input */
                border: 1px solid #ccc;
                border-radius: 5px;
                font-size: 16px; /* Slightly larger font */
                box-sizing: border-box;
                background-color: #f0f0f0;
            }

            /* Input Containers for First, Middle, Last Name */
            #editClientForm div div {
                display: flex;
                flex-direction: column;
                width: 32%; /* Ensures three fields fit in one row */
            }

            /*edit account admin*/
            input#editFirstName, input#editMiddleName, input#editLastName {
                width: 100% !important;
            }

            input#editAddress, input#editContactNumber,input#editUsername {
                width: auto;
            }

            button#saveChangesBtn {
                margin: auto;
            }

            button#saveChangesBtn {
                padding: 10px 20px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                display: block;
                margin: 20px auto; /* Center the button horizontally */
                margin-bottom: 100px;
            }

            /* Close Button */
            .modal-content .close {
                position: absolute;
                top: 9px;
                right: 20px;
                color: white;
                font-size: 35px;
                font-weight: bold;
                cursor: pointer;
            }
            .edit-modal-content .close {
                position: absolute;
                top: 9px;
                right: 20px;
                color: white;
                font-size: 35px;
                font-weight: bold;
                cursor: pointer;
            }

            .edit-modal-content .close {
                position: absolute;
                top: 9px;
                right: 20px;
                color: white;
                font-size: 35px;
                font-weight: bold;
                cursor: pointer;
            }


            /* Sample Duration Section*/

            /* Main container for the sample duration section */
    #sampleDurationSection {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center align the content */
    }

    #startDate{
        width: 100%;
    }

    #searchInput {
        border-radius: 5px;          /* Rounded corners */
        font-size: 16px;             /* Font size */
        box-sizing: border-box;       /* Include padding in width */
        width: 30%;
    }

    #sampleIdHeader {
        margin: 0; /* Remove default margin */
        padding: 10px; /* Padding for the header */
        color:white;
        font-weight: bold; /* Bold text for emphasis */
        font-size: 23px;
        background-color: darkred;
        width: 92%;
        text-align: center;
        margin-left: -111px;
    }

    #backSampleDuration {
                padding: 10px 20px;
                margin: 10px;
                background-color: #8a1111;
                color: white;
                border: none;
                cursor: pointer;
                border-radius: 5px;
                font-size: 18px;
                margin-top: 58px;
                margin-bottom: 40px;
                margin-left: 90px;
    }

    #colonyCountGraph {
        margin: 20px auto;
        max-width: 100%; /* Increase width if you want the graph to be wider */
        display: block; /* Increase height for more vertical space */
    }


    #showGrowthRateBtn {
    padding: 10px 20px;
    margin: 10px;
    background-color: #00761A;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 18px;
    margin-left: 752px;
    }

    .sample-duration-title {
        color: #202124; /* Dark gray for title text */
        font-weight: 700;/* Medium weight for visibility */
        margin-bottom: 15px; /* Space below the title */
        text-align: left; /* Align the title to the left */
        font-size: 1.5em; /* Slightly smaller title size */
    }


    .sample-duration-container {
        background-color: #E4E4E4; /* White background for card look */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
        padding: 20px; /* Internal padding for spacing */
        font-family: 'Roboto', Arial, sans-serif; /* Use Google's preferred font */
        width: 88%;
    }

    .sample-duration-grid {
        display: grid; /* Use CSS Grid for layout */
        grid-template-columns: repeat(2, 1fr); /* Two columns layout */
        gap: 0px; /* Space between grid items */
    }

    .sample-duration-item {
        border-radius: 20px; /* Rounded corners for items */
        padding: 10px; /* Padding for item content */
        text-align: left; /* Align text to the left */
        transition: background-color 0.2s ease; /* Smooth background transition */
    }


    .sample-duration-heading {
        color: #000000; /* Dark gray text for headings */
        margin: 0; /* Remove default margins */
        font-weight: 700; /* Make headings bold */
        font-size: 20px; /* Slightly smaller size for headings */
    }

    .sample-duration-value {
        font-weight: 500; /* Medium weight for values */
        color: #202124; /* Set value color to dark gray instead of blue */
        font-size: 0.9em; /* Smaller size for values */
    }


    .search-container {
        position: relative;           /* Allow positioning of the icon */
        display: flex;               /* Use flexbox for alignment */
        align-items: center;         /* Center items vertically */
        width: 91%;
        padding: 20px;
    }


    .search-input {
        flex-grow: 1;                /* Allow the input to grow and fill available space */
        padding: 10px 15px;         /* Padding for better spacing */
        border: 1px solid #dcdcdc;  /* Light gray border */
        border-radius: 24px;        /* Rounded corners */
        font-size: 1em;             /* Font size for input text */
        font-family: 'Roboto', sans-serif; /* Use a Google font */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        transition: box-shadow 0.3s ease; /* Smooth shadow transition */
    }

    .search-input:focus {
        outline: none;                       /* Remove default outline */
        border-color: #b1b1b1;              /* Change border color on focus */
        box-shadow: 0 1px 5px rgba(138, 138, 138, 0.5); /* Enhanced shadow matching the border color */
    }

    .search-button {
        margin-left: 10px;          /* Space between input and button */
        padding: 14px 35px;
        border: none;               /* Remove default border */
        border-radius: 24px;        /* Match input corners */
        background-color: darkred;  /* Google blue background */
        color: #ffffff;             /* White text color */
        font-size: 20px;
        cursor: pointer;            /* Pointer cursor on hover */
        transition: background-color 0.3s ease; /* Smooth background transition */
    }

    .search-button:hover {
        background-color: #d40c0c;  /* Darker blue on hover */
    }

    .sample-duration-group {
        padding: 15px; /* Padding inside the group */
        border-radius: 4px; /* Rounded corners */
        display: flex; /* Use flexbox */
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
    }

    /* Container for the duration information */
    .duration-container {
        display: flex;
        overflow-x: auto; /* Allow horizontal scrolling */
        background-color: #ffffff;
        padding: 15px;

        margin-right: auto;
        width: 91.2%;
        scroll-snap-type: x mandatory; 
        margin-left: -13px;
    }

    /* Scrollbar styling */
    .duration-container::-webkit-scrollbar {
        width: 12px; /* Width of the scrollbar */
    }

    /* Scrollbar track */
    .duration-container::-webkit-scrollbar-track {
        background: #f0f0f0; /* Background of the scrollbar track */
        border-radius: 6px; /* Rounded corners for the track */
    }

    /* Scrollbar thumb */
    .duration-container::-webkit-scrollbar-thumb {
        background: #888; /* Color of the scrollbar handle */
        border-radius: 6px; /* Rounded corners for the scrollbar handle */
    }

    .duration-container::-webkit-scrollbar-thumb:hover {
        background: #555; /* Color of the scrollbar handle on hover */
    }

    /* Adding arrows on both sides */
    .duration-container::-webkit-scrollbar-button {
        background: #ccc; /* Color of the arrow buttons */
        border-radius: 6px; /* Rounded corners for the buttons */
        height: 20px; /* Height of the arrow buttons */
        width: 12px; /* Width of the arrow buttons */
    }

    /* Left arrow button */
    .duration-container::-webkit-scrollbar-button:vertical:decrement {
        background: url('images/left.png') no-repeat center; /* Left arrow icon */
        background-size: 80%; /* Adjust size as needed */
    }

    /* Right arrow button */
    .duration-container::-webkit-scrollbar-button:vertical:increment {
        background: url('images/next.png') no-repeat center; /* Right arrow icon */
        background-size: 80%; /* Adjust size as needed */
    }

    /* Hide the default scrollbar buttons */
    .duration-container::-webkit-scrollbar-button:vertical {
        display: block; /* Ensure buttons are displayed */
    }

    .day-box {
        flex: 0 0 30%;
        height: 100px;
        margin: 10px 50px;
        padding: 15px 15px 15px 70px;
        border: 1px solid #ccc;
        background-color: #FFFFFF;
        color: black;
        font-weight: bold;
        display: inline-block;
        box-sizing: border-box;
        position: relative;
        scroll-snap-align: center; /* Center the box when scrolling */
        transition: opacity 0.3s ease; /* Smooth transition for fading */
        padding-top: 24px;
        padding-left: 138px;
        font-size: 33px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

    button#addDayButton {
        padding: 10px 18px;
        background-color: dodgerblue;
        color: white;
        border: none;
        border-radius: 15px;
        cursor: pointer;
        font-weight: bolder;
        margin: -4px;
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .day-box.faded {
        opacity: 0.5; /* Faded effect for previous and next days */
    }

    /* Add star icon using ::before */
    .day-box::before {
        content: "★"; /* Unicode star icon */
        color: gold; /* Star color */
        position: absolute; /* Position the star absolutely */
        left: 52px;
        top: 50%; /* Center vertically */
        transform: translateY(-50%); /* Adjust for vertical centering */
        font-size: 50px; /* Size of the star */
    }

    /* Buttons container for navigation */
    .durationButtons {
        display: flex;
        justify-content: center; /* Centers the buttons horizontally */
        margin: 20px 0; /* Adds spacing above and below */
    }

    /* Button styles */
    .durationButtons button {
        margin: 0 10px; /* Adds space between the left and right buttons */
        padding: 10px 20px; /* Adjust the padding for better button size */
    }

    .modal {
                display: none; /* Hidden by default */
                position: fixed;
                z-index: 1;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: rgb(0,0,0);
                background-color: rgba(0,0,0,0.4);
            }

    .modal-content-growthrate {
                background-color: #FFFFFF;
                border-radius: 8px;
                width: 75%;
                height: 73%;
                max-width: 10000px;
                max-height: 10000px;
                padding: 0px;
                position: relative;
                box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.2);
                margin-top: 159px;
                margin-left: 189px;
            }

    .modal-content-growthrate h2{
                text-align: center;
                background-color: #8B0000;
                color: white;
                margin: 0;
                padding: 15px;
                font-size: 24px;
                font-weight: bold;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
                width: 100%;
                box-sizing: border-box;
            }

    .modal-content-growthrate .close {
                position: absolute;
                top: 9px;
                right: 20px;
                color: white;
                font-size: 35px;
                font-weight: bold;
                cursor: pointer;
            }

    .close {
                color: #aaa;
                float: right;
                font-size: 28px;
                font-weight: bold;
            }

    .close:hover,
            .close:focus {
                color: black;
                text-decoration: none;
                cursor: pointer;
            }


/* Small devices (portrait phones, 320px and up) */
@media (max-width: 480px) {
    #sampleDurationSection {
        align-items: flex-start;
    }

    #startDate, #searchInput, #sampleIdHeader, .search-container, .sample-duration-container, .duration-container {
        width: 100%;
        margin-left: 0;
    }

    #sampleIdHeader {
        font-size: 18px;
        padding: 8px;
    }

    #backSampleDuration, #showGrowthRateBtn {
        font-size: 14px;
        padding: 8px 16px;
        margin: 10px 0;
    }

    .sample-duration-title {
        font-size: 1.2em;
        margin-bottom: 20px;
        margin-top: 43px;
    }

    .sample-duration-grid {
        grid-template-columns: 1fr;
    }

    .search-button {
        padding: 8px 16px;
        font-size: 16px;
    }
    .day-box {
        flex: 1 1 90%;
        margin: 5px auto;
        font-size: 24px;
        padding: 15px;
        min-width: 30%;
        display: flex;
        flex-direction: column; /* Stack elements vertically */
        justify-content: flex-start; /* Aligns all content to the top */
        text-align: center; /* Centers text horizontally */
    }
    
    .day-box::before {
        content: "Day X"; /* Example static text, or adjust based on JS content */
        align-self: flex-start; /* Aligns it to the top */
        text-align: center; /* Centers the text horizontally within the box */
    }
    
    

    button#addDayButton {
        font-size: 14px;
        padding: 8px 12px;
    }

    .modal-content-growthrate {
        width: 90%;
        margin: 10px auto;
        margin-top: 252px !important;
        height: 40vh;

    }

    #colonyCountGraph {
        margin: 20px auto;
        max-width: 85vw !important;
        max-height: 268vh !important;
    }

    .durationButtons button {
        padding: 8px 16px;
        font-size: 14px;
        
    }
}

@media (max-width: 480px) {
    
 }


/* Medium devices (phones in landscape, larger phones, 481px and up) */
@media (min-width: 481px) and (max-width: 768px) {
    #sampleDurationSection {
        align-items: center;
    }

    #startDate, #searchInput, #sampleIdHeader, .sample-duration-container, .duration-container {
        width: 95%;
    }

    #sampleIdHeader {
        font-size: 20px;
    }

    #backSampleDuration, #showGrowthRateBtn {
        font-size: 15px;
        padding: 10px 18px;
    }

    .sample-duration-title {
        font-size: 1.3em;
    }

    .search-button {
        padding: 10px 20px;
        font-size: 18px;
    }

    .day-box {
        flex: 1 1 80%;
        font-size: 26px;
    }

    button#addDayButton {
        font-size: 16px;
        padding: 10px 15px;
    }

    .modal-content-growthrate {
        width: 85%;
    }

    .durationButtons button {
        padding: 10px 20px;
        font-size: 16px;
    }
}



/* Large devices (small tablets, 769px and up) */
@media (min-width: 769px) and (max-width: 1024px) {
    #sampleDurationSection {
        align-items: center;
    }

    #startDate, #searchInput, #sampleIdHeader, .sample-duration-container, .duration-container {
        width: 90%;
    }

    #sampleIdHeader {
        font-size: 22px;
    }

    #backSampleDuration, #showGrowthRateBtn {
        font-size: 16px;
    }

    .sample-duration-title {
        font-size: 1.4em;
    }

    .sample-duration-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-button {
        padding: 12px 24px;
        font-size: 18px;
    }

    .day-box {
        font-size: 28px;
    }

    button#addDayButton {
        font-size: 18px;
        padding: 10px 20px;
    }

    .modal-content-growthrate {
        width: 80%;
    }

    .durationButtons button {
        padding: 12px 24px;
        font-size: 18px;
    }
}

/* Extra large devices (tablets, 1025px and up) */
@media (min-width: 1025px) and (max-width: 1280px) {
    #sampleDurationSection {
        flex-direction: row;
        justify-content: space-between;
    }

    #sampleIdHeader {
        font-size: 24px;
        padding: 10px;
    }

    #backSampleDuration, #showGrowthRateBtn {
        font-size: 18px;
        padding: 12px 25px;
    }

    .sample-duration-title {
        font-size: 1.5em;
    }

    .sample-duration-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-button {
        padding: 14px 30px;
        font-size: 20px;
    }

    .day-box {
        font-size: 30px;
    }

    button#addDayButton {
        font-size: 20px;
        padding: 12px 24px;
    }

    .modal-content-growthrate {
        width: 75%;
    }

    .durationButtons button {
        padding: 12px 30px;
        font-size: 20px;
    }
}

/* Sample Report Section*/










span#clientFullNameDetail, span#clientAddress, span#clientUsername, span#clientContactNumber {
    background: lightgray;
    height: 30px;
    align-content: center;
    padding-left: 10px;
    width: 100%;
    border-radius: 10px;
}






/*admin account profile*/










/*account profile for client*/

div#myAccountContent {
    margin-right: 3vw;
}

span#clientfullNameDetail, span#clientaddress, span#clientcontactNumber, span#clientusername {
    background: lightgray;
    height: 30px;
    align-content: center;
    padding-left: 10px;
}

button#editClientAccountBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top: 20px;
}

/*edit account for client*/

input#editClientFirstName, input#editClientMiddleName, input#editClientLastName {
    width: 95%;
}

input#editClientAddress, input#editClientContactNumber,input#editClientUsername {
    width: auto;
}

button#saveClientChangesBtn {
    margin: auto;
    background-color: #00761A;
    border-radius: 5px;
}

/* Laboratory Staff Role Bubble */
.adappedit-btn {
    background-color: #A90000   ;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    margin-left: -6px;
}

/* Process container styling */
.process-container h2 {
    text-align: left;
    padding-left: 20px;
    margin: 10px 0;
}
.process-container h3 {
    text-align: left;
    padding-left: 20px;
    font-size: 30px;
    margin:0;
}
.process-container {
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.subtitle {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 20px;
}

.steps {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.step-box {
    background-color: #ffffff;
    padding: 15px;
    border: 1px solid #ccc;
    width: 15%;
    text-align: center;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    height: 30%;
    margin: 20px;
}

.step-box h4 {
    font-size: 1.2em;
    margin: 0;
    color: #7D1B1B !important;
    text-align: left;
}

.step-box p {
    text-align: left;
    font-weight: bold;
}

/* Button styling */
#requestNowButton {
    background-color: #008AC0;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display:block;
    margin: 20px;
    margin-bottom: 10px;
}


/* Requests Overview */
.requests-overview {
    padding: 10px 25px 20px;
    background: #EAA6A660;
    border-radius: 15px;
    margin-bottom: 20px;
}

.requests-overview table {
    width: 100%;
    border-collapse: collapse;
}

.requests-overview th {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: left;
}

.requests-overview td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: left;
    text-align: center;
}


#recentRequestsTable thead {
    background: #7D1B1B;
    color: white;
}

#recentRequestsTable th, td{
    border: none;
    text-align: center;

}

#recentRequestsTable td {
    padding: 10px; /* Adds padding to table cells */
    border: none; /* Removes borders from table data cells */
    background-color: white; /* White background for body rows */
    vertical-align: middle; /* Vertically center-align text */
    border-bottom: 2px solid #00000030;
}

#eventContainer {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden; /* Prevent vertical scrolling */
    white-space: nowrap; /* Prevent items from wrapping */
    width: 100%; /* Adjust based on your layout */
}

/* Events Section */


.events-container h2{    
    padding-left: 25px;
    padding-top: 10px;
}

div#eventsSection{
    background-color: #f7f7f7;
    border-radius: 10px;
}

.scroll-container {
    display: flex;
    overflow-x: auto;
    height: 50vh;
}

.event-item {
    width: 30vh;
    margin: 10px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: center;
    box-shadow: 5px 5px 5px rgba(177, 177, 177, 0.2);
    background-color: rgb(255, 255, 255);
    height: 40vh;
    display: inline-block;
    flex-direction: column;
    justify-content: space-around;
}

.event-item h3{
    word-wrap: break-word; /* Ensures long words break and wrap to the next line */
    overflow-wrap: break-word; /* Provides a fallback for older browsers */
    margin-right: 3%;
}

.event-item img {
    width: 30vh;
    height: 15vh;
    object-fit: cover;
}

#taskOverview {
    margin-left: -25px;
    text-align: left; /* Align text to the left */
    padding: 20px 0 ; /* Maintain padding for the section */
}

.task-count {
    gap: 20px;
    display: flex;
    width: calc(70% - 300px);
    text-overflow: ellipsis;
    transition: width 0.3s;
    margin-left: 25px;
}

.task-count p {
    position: relative; /* Needed for the colored line */
    background-color: #fff; /* White background for boxes */
    padding: 5px 110px; /* Slightly reduced padding */
    padding-left: 20px; /* Space for the number */
    border-radius: 8px; /* Rounded corners for the boxes */
    display: flex;
    flex-direction: row; /* Align number and text horizontally */
    align-items: center; /* Vertically center content */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Increased shadow for depth */
    text-align: left; /* Align text to the left */
    width: 25% !important;
    white-space: nowrap; /* Ensure text stays on the same line */
}

/* Add the colored line to the top-left using ::before */
.task-count p::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px; /* Thickness of the colored line */
    height: 100%;
    border-radius: 8px 0 0 8px; /* Smooth the top left corner */
}

/* Center the number and text side by side */
.task-count p span {
    font-size: 2.5rem; /* Font size for the numbers */
    font-weight: bold; /* Bold font for the number */
    margin-right: 8px; /* Space between number and text */
    color: inherit;
}

/* Ensure the label text stays in line */
.task-count p .task-label {
    flex: 1; /* Allow the label to take up available space */
    text-align: left; /* Align text to the left */
    font-size: 1rem; /* Font size for text */
    color: #555; /* Dark color for the label */
}

.task-count p strong {
    font-size: 1rem; /* Font size for the label */
    color: #555; /* Dark color for the label */
    font-weight: normal;
}

/* Task-specific color styling for the top-left border */
.assigned::before {
    background-color: #007BFF; /* Blue for Assigned tasks */
}

.ongoing::before {
    background-color: #28A745; /* Green for Ongoing tasks */
}

.processed::before {
    background-color: #FFC107; /* Yellow for Processed tasks */
}

.rejected::before {
    background-color: #DC3545; /* Red for Rejected tasks */
}

/* Media query for when the sidebar is collapsed */
@media (max-width: 900px) { /* Adjust this width based on when the sidebar collapses */
    .task-count {
        justify-content: flex-start; /* Align boxes to the left */
        gap: 8px;
        min-width: 60px; /* Smaller minimum width */
        max-width: 60px; /* Smaller maximum width */
    }

    .task-count p {
        max-width: 40px;
        width: 13% !important;
        margin: 10px 5px;
    }

    .task-count p span{
        font-size: 25px;
    }

    .task-count p strong{
        font-size: 14px;
    }

    #welcomeMessage{
        font-size: 30px;
    }
    #currentDate{
        font-size: 15px;
    }

    .labdash{
        display: block;
    }

    .task-count-media-q {
        display: flex;
        gap: 0px !important;
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    table {
        border: 0;
    }
    
    thead {
        display: none;
    }
    
    tr {
        display: block;
        margin-bottom: 10px;
        border: 1px solid #ddd;
        padding: 10px;
    }
    
    td {
        display: block;
        text-align: right;
        padding: 8px;
        border: none;
        border-bottom: 1px solid #ddd;
        position: relative;
    }
    
    td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }

    .pill {
        padding: 5px 20px !important;
        display: unset !important;
    }

    .task-overview td{
        text-align: right;
        width: 100% !important;
    }
}

.task-count-media-q {
    display: flex;
    gap: 20px;
}

#approachingDeadlines h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #333;
}

.approaching-deadline {
    display: flex;
    align-items: center;
    background-color: red;
    padding: 15px;
    color: white;
    border-radius: 5px;
    margin: 10px 0;
}

.approaching-deadline .date {
    font-size: 1.5rem;
    margin-right: 20px;
    flex-shrink: 0;
}

.approaching-deadline .details {
    flex: 1;
    text-align: right;
}

.approaching-deadline .details span {
    display: block;
    font-size: 1rem;
}

#upcomingEvents {
    margin: 20px;
    padding-bottom: 40px;
}

#upcomingEvents h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #333;
}

#upcomingEventsTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#upcomingEventsTable th, #upcomingEventsTable td {
    padding: 12px;
    border: 1px solid #ccc;
    text-align: left;
}

#upcomingEventsTable th {
    background-color: #f4f4f4;
}

#upcomingEventsTable tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

#upcomingEventsTable tbody tr:hover {
    background-color: #f1f1f1;
}

/* Media Queries for Responsive Design */
@media (max-width: 1024px) {
    #approachingDeadlines h3,
    #upcomingEvents h3 {
        font-size: 1.5rem; /* Decrease heading size */
    }

    .approaching-deadline .date {
        font-size: 1.2rem; /* Decrease date size */
    }

    .approaching-deadline .details span {
        font-size: 0.9rem; /* Decrease details text size */
    }

    #upcomingEventsTable th, #upcomingEventsTable td {
        padding: 10px; /* Reduce padding for smaller screens */
    }
}

@media (max-width: 768px) {

    .approaching-deadline {
        flex-direction: column; /* Stack elements vertically */
        align-items: flex-start; /* Align to the left */
    }

    .approaching-deadline .date {
        margin-bottom: 10px; /* Space between date and details */
    }

    #upcomingEventsTable th, #upcomingEventsTable td {
        padding: 8px; /* Further reduce padding */
        font-size: 0.8rem; /* Decrease font size for table */
    }

    #upcomingEventsTable {
        font-size: 0.9rem; /* Decrease overall font size */
    }

    .labdashright {
        margin: 0;
        gap: 30px;
    }

    #approachingDeadlines{
            width: 130%;
    
    }
}

@media (max-width: 480px) {
    #approachingDeadlines h3,
    #upcomingEvents h3 {
        font-size: 1.2rem; /* Further decrease heading size */
    }

    .approaching-deadline .date {
        font-size: 1rem; /* Further decrease date size */
    }

    .approaching-deadline .details span {
        font-size: 0.8rem; /* Further decrease details text size */
    }
}


/* Progress Bar Section Styling */
#progressBarSection {
    background-color: #f5f5f5; /* Light gray background like in the image */
    border-radius: 15px; /* Rounded corners */
    padding: 8; /* Padding for spacing inside the box */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    width: 150%; /* Full width */
    max-width: 350px; /* Set max width to match the example */
    top: 870px; /* Distance from the top */
    text-align: center; /* Center the text */
    margin-left: 23px;
}

/* Weekly Progress Title */
#progressBarSection h3 {
    font-size: 28px; /* Adjust heading size to match the image */
    font-weight: bold; /* Bold font for title */
    color: #333; /* Dark gray color */
    margin-bottom: 4px; /* Space below title */
    text-align: left;
    margin-top: 20px;
    padding-left: 25px;
}

/* Subtitle Text (e.g., "Start from Sept 2-5, 2024") */
#progressBarSection p {
    font-size: 13px; /* Smaller font size */
    color: #777; /* Lighter gray color for subtitles */
    margin: 5px 0 0; /* Minimal margin */
    font-weight: 500; /* Semi-bold for better readability */
}

/* Progress Circle Container */
.progress-circle {
    position: relative;
    width: 120px; /* Adjust size to match the example */
    height: 120px;
    margin: 10px auto; /* Center the progress circle */
}

/* SVG for the Circle */
svg {
    width: 100%; /* Fill the container */
    height: 100%;
    transform: rotate(-90deg); /* Rotate to start from the top */
}

/* Background Circle */
.progress-background {
    fill: none; /* No fill */
    stroke: #e6e6e6; /* Light gray background stroke */
    stroke-width: 10; /* Thickness of the background circle */
}

/* Foreground Circle (Progress) */
.progress-foreground {
    fill: none; /* No fill */
    stroke: #800000; /* Dark red color matching the image */
    stroke-width: 10; /* Adjust thickness */
    stroke-linecap: round; /* Rounded ends */
    stroke-dasharray: 283; /* Full circumference for 100% */
    stroke-dashoffset: calc(283 - (283 * 45) / 100); /* 45% progress */
    transition: stroke-dashoffset 0.5s ease; /* Smooth animation */
}

/* Text Inside the Progress Circle */
.progress-text {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-65%, -20%); /* Adjust position to fully center */
    font-size: 15px; /* Set the font size */
    color: #333; /* Dark text color */
    font-weight: bold; /* Bold font for the percentage text */
    text-align: center; /* Ensure multi-line text is centered */
    line-height: 1.2; /* Slight adjustment to line height for better text fit */
}


#editEventDescription {
    width: 70%; /* Optional: Adjust width */
    height: 200px; /* Optional: Adjust height */
    padding: 20px; /* Inside space */
    font-size: 16px; /* Optional: Adjust text size */
}

label, #editEventDescription {
    display: inline-block;
    vertical-align: middle; /* Align the textarea with the label at the top */
}

label {
    width: 100px; /* Adjust the label width */
    margin-right: 10px; /* Add space between the label and textarea */
}



.form-container {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space between the two containers */
    gap: 20px; /* Gap between the containers */
    margin-right: 3vw;
    margin-bottom: 3vh;
}

.photo-container {
    border: 1px solid #ddd; /* Optional: Add borders to the containers */
    padding: 40px; /* Add padding inside the containers */
    border-radius: 5px; /* Optional: Round the corners */
    width: 30%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.event-details-container {
    flex: 1; /* Each container takes equal space */
    border: 1px solid #ddd; /* Optional: Add borders to the containers */
    padding: 40px; /* Add padding inside the containers */
    border-radius: 5px; /* Optional: Round the corners */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

input#eventTitle {
    width: 95%;
}

#imagePreview {
    margin-bottom: 10px; /* Space below the image preview */
}

label, #eventTitle {
    display: inline-block;
    vertical-align: middle; /* Align the textarea with the label at the top */
}

label {
    width: 100px; /* Adjust the label width */
    margin-right: 10px; /* Add space between the label and textarea */
}

label, #eventDescription {
    display: inline-block;
    vertical-align: middle; /* Align the textarea with the label at the top */
}

label {
    width: 100px; /* Adjust the label width */
    margin-right: 10px; /* Add space between the label and textarea */
}

#eventDescription{
    width: 92%;
    height: 35vh;
    padding: 20px; /* Inside space */
    font-size: 16px; /* Optional: Adjust text size */
    margin-bottom: 20px;
    margin-top: 10px;
}
/*
#plantSpeciesFormContent {
    border: 2px solid #ccc;
    padding: 20px; 
    border-radius: 10px;  
    background-color: white; 
    width: 50%;      
    margin: 20px auto;   
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
}

#plantSpeciesFormContent input[type="text"] {
    width: 80%;      
    padding: 10px;   
    margin-bottom: 10px; 
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; 
}*/

.requestform {
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    width: 70%;
    align-content: center;
    margin: auto;
    margin-top: 75px;
    margin-bottom: 30px;
}

button#backPlateCountForm {
    height: 41px;
    width: 88px;
}

h2.requestformheader{
    background: #7D1B1B;
    height: 50px;
    color: white;
    text-align: center;
    align-content: center;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.requestformbody{
    margin: 30px auto;
    width: 70%;
    padding: 10px;
}


.sampleEntry {
    text-align: left;
    border-bottom: 2px solid #d7d7d7;
    padding-bottom: 20px;
}

.sampleLabel {
    margin: 20px 0;
}




.left-buttons {
    flex: 1;                     /* Take up remaining space on the left */
    margin-top: 40px;
}


button.deleteSampleButton {
    background-color: gray;
}

.right-buttons {
    display: flex;
    gap: 480px !important;
    margin-top: -65px;
}

.back-button, .submit-button {
    cursor: pointer;             /* Change cursor on hover */
}

#addSampleButtonPlantSpecies {
    cursor: pointer;             /* Change cursor on hover */
}




#backLabUseAndEquipmentAccessForm, 
#submitLabUseAndEquipmentAccessForm {
    width: fit-content;             /* Keep button width to fit content */
    padding: 8px 16px;              /* Normal padding for balance */
    font-size: 1rem;                /* Normal font size */
    cursor: pointer;                /* Pointer on hover */
    margin-right: 10px;             /* Space between buttons */
    cursor: pointer;
}   

input[type="text"] {
    padding: 10px; /* Add padding for a better look */
    font-size: 1rem; /* Normal font size */
    border: 1px solid #ccc; /* Add a border to match your design */
    border-radius: 4px; /* Optional: add rounded corners */
}



.backButton, #submitResearchCollaborationForm {
    padding: 8px 12px;              /* Adjust padding */
    font-size: 1rem;                /* Font size */
}

#researchCollaborationFormContent input{
    width: 95%;
}

#researchCollaborationFormContent label{
    width: 300px;
}

#researchCollaborationFormContent textarea{
    width: 95%;
}



.notification-count {
    background-color: red;
    color: white;
    font-size: 0.8rem;
    padding: 2px 5px;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    right: -10px;
}

.notifications-btn {
    position: relative;
}

/* Popup Notification Tab */
.notification-popup {
    position: fixed;
    right: 80px;
    top: 60px;
    width: 90%;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: none;
    flex-direction: column;
    z-index: 1000;
}

/* Visible when clicked */
.notification-popup.visible {
    display: flex;
}

/* Popup Header */
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 2px solid #898989;
    background-color: #f9f9f9;
    border-radius: 10px 10px 0 0;
}

.popup-header h3 {
    margin: 0;
}

.close-popup-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Popup Body for Notifications */
.popup-body {
    padding: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.notification-item {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-item p {
    margin: 5px 0;
}

.notification-menu {
    display: none; /* Hide the menu by default */
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

.notification-item:hover .notification-menu {
    display: inline-block; /* Show menu on hover */
}

.notification-options {
    display: none; /* Hide the options by default */
    position: absolute;
    width: 120px;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 10;
}

.notification-item:hover .notification-options {
    display: block; /* Show options on hover */
}

.notification-options li {
    padding: 10px;
    cursor: pointer;
    list-style: none;
}

.notification-options li:hover {
    background-color: #f0f0f0;
}

.notification-item.read {
    background-color: #f0f0f0; /* Change background color for read notifications */
}

.notification-item .notification-time {
    font-size: 0.9rem;
    margin-top: 5px;
}

.time-unread {
    color: blue; /* Color for unread notifications */
}

.time-read {
    color: gray; /* Color for read notifications */
}


body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #ffffff;
}

.container {
    max-width: 82vw;
    margin: 0 0px;
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    margin-top: 20px;
}


.input-section {
    margin-bottom: 20px;
}

/* Container for the form to add a background */
.input-form-container {
    background-color: #f8f9fa; /* Light gray background color */
    border-radius: 8px; /* Slightly rounded corners */
    padding: 20px; /* Padding around the form */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    max-width: 450px; /* Maximum width for the form */
    margin: 20px auto; /* Center the form horizontally */
}


.input-section input[type="file"] {
    margin-bottom: 10px;
}

.input-section button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
}

.input-section button:hover {
    background-color: #3e8e41;
}

.parameters {
    margin-bottom: 20px;
}

.parameters div {
    margin-bottom: 10px;
}

.parameters label {
    display: block;
    margin-bottom: 5px;
}

.image-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.image-container canvas {
    width: 45%;
    height: 300px;
    border: 1px solid #ccc;
}

.results {
    margin-bottom: 20px;
}

.results h2 {
    margin-top: 0;
}

#resultsTable {
    width: 100%;
    border-collapse: collapse;
}

#resultsTable th, #resultsTable td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

#resultsTable th {
    background-color: #f0f0f0;
}

#eventetails {
    padding: 20px;
    padding-top: 0;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}








/* Additional Styling for Table Layout */
.sampleTableBody tr {
    transition: background-color 0.3s;
}

.sampleTableBody tr:hover {
    background-color: #f9f9f9;
}





/* General styles for the analysis report section */

#analysisReportTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

/* Table header styles */
#analysisReportTable thead {
    background-color: #A90000; /* Green background */
    color: white; /* White text */
}

#analysisReportTable th {
    padding: 12px 15px;
    text-align: left;
    border-top: 2px solid;
}

#analysisReportTable th:first-child{
    border-radius: 15px 0 0 0; 
    border-left: 2px solid;
    border-top: 2px solid;
    margin-right: 0;
}

#analysisReportTable th:last-child{
    border-radius: 0 10px 0 0;
    border-right: 2px solid;
    border-top: 2px solid;
}

/* Table body styles */
#analysisReportTable tbody tr {
    background-color: #f9f9f9; /* Light background */
    border-bottom: 1px solid;
    border-bottom-color: rgb(197, 197, 197);
}

#analysisReportTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Alternate row color */
}

#analysisReportTable td {
    padding: 12px 15px;
    border: none    ;
    text-align: left;
    cursor: pointer;
}
#analysisReportTable td:first-child{
    margin-right: 0;
}
#analysisReportTable td:last-child {
    display: flex;
    justify-content: center; /* Horizontally center the button */
    align-items: center; /* Vertically center the button (optional) */
    margin-left: 30px;
}
#analysisReportTable th:last-child {
    margin-left: 10000px;
    text-align: center;
}

/* Hover effect for rows */
#analysisReportTable tbody tr:hover {
    background-color: #d8f0e5; /* Light green on hover */
}

.analysis-reports-header {
    display: flex;
    align-items: center; /* Vertically align items */
    justify-content: space-between; /* Add space between the text and the search bar */
}

.analysis-reports-header p {
    margin-right: 10px; /* Add some space between the text and the search bar */
}

#searchBar {
    padding: 5px;
    font-size: 16px;
}

.taskheader-container{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #f1f1f1; /* Light gray background */
    padding: 40px;
    border-radius: 8px; /* Rounded corners for the header */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow */
}

@media (max-width: 800px) {
    .taskheader-container {
        padding: 20px;
        border-radius: 4px; /* Smaller border radius for compact view */
        box-shadow: none; /* Remove shadow for simpler look */
        background-color: #eaeaea; /* Slightly different background for mobile */
        display: flex;
        flex-direction: column;
        width: 96%;
    }
    
    .appointment-details {
        margin-top: 15px;
        font-size: 16px;
        color: #555;
    }

    #main{
        margin-left: 0px;
        padding-left: 30px;
    }

        #sampleTable {
            border: 0;
        }
    
        #sampleTable thead {
            display: none; /* Hide the table header on small screens */
        }
    
        #sampleTable, 
        #sampleTable tbody, 
        #sampleTable tr, 
        #sampleTable td {
            display: block;
            width: 100%;
        }
    
        #sampleTable tr {
            margin-bottom: 15px; /* Add space between rows */
        }
    
        #sampleTable td {
            text-align: right;
            padding-left: 50%;
            position: relative;
        }
    
        #sampleTable td::before {
            content: attr(data-label); /* Use the data-label attribute to show the header */
            position: absolute;
            left: 10px;
            width: calc(50% - 20px); /* Adjust to fit the content */
            font-weight: bold;
            text-align: left;
        }

        .reportbtns{
            margin-top: 20px !important;
        }
    }


/* Styles for the appointment details div */
.appointment-details-left {
    text-align: right;
    font-size: 0.9em;
    color: #555; /* Medium gray text */
}

.header-container {
    display: flex; /* Use Flexbox for alignment */
    justify-content: space-between; /* Space between the elements */
    align-items: center; /* Center the items vertically */
    margin-bottom: 20px; /* Add some space below the header */
}

#searchBar {
    padding: 8px 12px; /* Padding for the search bar */
    border: 1px solid #ccc; /* Border for the search bar */
    border-radius: 4px; /* Rounded corners */
    width: 300px; /* Set a width for the search bar */
}


/* Responsive styles */
@media (max-width: 600px) {
    #searchBar {
        font-size: 14px; /* Smaller font size on mobile */
    }
    #analysisReportTable {
        font-size: 14px; /* Smaller font size on mobile */
    }
}

.search-container {
    display: flex; /* Use Flexbox for alignment */
    justify-content: flex-end; /* Align to the right */
    margin-left: -21px;
}

#searchBar {
    padding: 8px 12px; /* Padding for the search bar */
    border: 1px solid #ccc; /* Border for the search bar */
    border-radius: 4px; /* Rounded corners */
    width: 300px; /* Set a width for the search bar */
}


/* Dashboard Styles */
.dashboard-container {
    display: flex;
    flex-direction: column; /* Stack the rows vertically */
}

.dashboard-row {
    display: flex; /* Use flexbox for the row */
    justify-content: space-between; /* Space out the boxes */
}

.dashboard-box {
    flex: 1; /* Ensure all boxes are of equal width */
    margin: 10px; /* Add spacing between boxes */
    padding: 20px; /* Add padding inside the boxes */
    color: white; /* Text color */
    border-radius: 30px; /* Rounded corners */
    display: flex; /* Use flexbox for the box */
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the left */
    position: relative; /* Enable absolute positioning for the icon */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Increased shadow for depth */
}

.dashboard-box h3 {
    margin: 0; /* Remove margin for h3 */
    text-align: left; /* Align text to the left */
}

/* Style the count number */
.count {
    font-size: 2.5em; /* Increase font size for visibility */
    font-weight: bold; /* Make the number bold */
    margin-bottom: 5px; /* Space between the number and the text */
}

/* Adjust icon size */
.dashboard-box h3 i {
    position: absolute; /* Position the icon absolutely */
    right: 10px; /* Align the icon to the right */
    bottom: 10px; /* Adjust the bottom position as needed */
    font-size: 6em; /* Adjust icon size */
    color: white; /* Icon color */
}

/* Hover effect for dashboard-box */
.dashboard-box:hover {
    cursor: pointer; /* Change cursor to pointer to indicate clickability */
    transform: scale(1.02); /* Slightly scale up the box */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Add a more prominent shadow on hover */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effect */
    opacity: 0.9; /* Slightly reduce opacity for visual feedback */
}

/* Color classes */
.green {
    background-color: #4CAF50; /* Green */
}

.yellow {
    background-color: #FFC107; /* Yellow */
}

.orange {
    background-color: #FF9800; /* Orange */
}

.red {
    background-color: #F44336; /* Red */
}

.gray {
    background-color: #9E9E9E; /* Gray */
}

.blue {
    background-color: #2196F3; /* Blue */
}


/* Ensure boxes resize properly on smaller screens */
@media (max-width: 768px) {
    .dashboard-row {
        flex-direction: column; /* Stacks boxes vertically on smaller screens */
        align-items: center;
    }

    .dashboard-box {
        width: 90%;
        max-width: none;
    }
}

/* Forecast Section Styling */
.dashboard-forecast {
    margin-top: 40px;
    text-align: center;
}
.charts-container {
    display: flex;
    flex-direction: column; /* Keep this as column for the title */
    gap: 20px;
    margin-top: 30px;
}

.charts-container > h2 {
    align-self: flex-start; /* Align the title to the start */
}

.charts-container {
    display: flex;
    flex-direction: column; /* Keeps the title on top */
    gap: 20px;
    margin-top: 30px;
}

.charts-container > h2 {
    align-self: flex-start; /* Align the title to the start */
}

.chart-box-container {
    display: flex;          /* Align chart boxes in a row */
    gap: 20px;             /* Space between boxes */
}
.chart-box {
    background-color: #ffffff;
    padding: 15px;         /* Padding inside each box */
    border-radius: 10px;
    
    /* Enhanced box shadow for better visibility */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Increased blur radius and opacity */
    
    /* Size adjustments */
    flex: 1;               /* Change this to 'flex: 2;' or similar for more space */
    max-width: 86vw;      /* Maximum width for each box - adjust this value */
    box-sizing: border-box; /* Include padding and border in width calculation */
}



.chart-box h3 {
    text-align: center;
    margin-bottom: 10px;   /* Reduced margin */
}

#generatePdfBtn {
    width: 14%;
    padding: 12px;
    border: none;
    border-radius: 40px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    color: white;
    transition: background-color 0.3s ease;
    margin-left: 600px;
    margin-bottom: 63px;
    margin-top: 150px;
    background-color: darkgreen;
}



canvas {
    max-width: 100%;
    height: 400px;
}

/* Admin Events Section Styling */

input#eventImage, input#eventStartDate, input#eventEndDate {
    width: auto;
}

.admin-events-section {
    margin-top: 20px;
}

.admin-search-bar {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 16px;
}

.admin-event-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-event-item {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    width: 30%;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 10px;
}

.admin-event-item img {
    width: 100%;
    border-radius: 5px;
    min-height: 250px;
    max-height: 250px;
}

.admin-event-item h3 {
    font-size: 18px;
    margin: 10px 0;
    
}

.admin-event-item p {
    font-size: 14px;
    
}

.admin-more-info-btn, .admin-edit-btn, .admin-delete-btn {
    padding: 5px 10px;
    margin: 5px;
    font-size: 14px;
    cursor: pointer;
}

.admin-more-info-btn {
    background-color: #007bff;
    color: white;
    border: none;
}

.admin-edit-btn {
    background-color: #28a745;
    color: white;
    border: none;
}

.admin-delete-btn {
    background-color: #dc3545;
    color: white;
    border: none;
}

.admin-modal {
    display: none;
    position: fixed;
    z-index: 1000; /* Ensures modal is in front */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5); /* Adds a background overlay */
}

.admin-modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 20px;
    margin-top: 3%;
    border: 1px solid #888;
    width: 50%; 
    position: relative;
    border-radius: 10px 10px 5px 5px;
    z-index: 1000000;
    box-shadow: 3px 5px 8px 3px rgba(0, 0, 0, 0.1);
}

.admin-modal-content img {
    width: 90%;
    display: block;
    margin: auto;
    border-radius: 5px;
    margin-top: 3%;
}
.admin-modal-content p{
    margin-left: 4%;
    margin-right: 4%;
    word-wrap: break-word;
    margin-bottom: 5%;
    text-align: justify;
}

.admin-modal-content h3{
    margin-left: 4%;
    text-align: center;
}
.admin-event-item p{

        overflow: hidden; /* Hide overflow text */
        white-space: nowrap; /* Prevent text from wrapping */
        text-overflow: ellipsis; /* Show ellipsis (...) */
        max-width: 100ch; /* Limit width to 100 characters */
}
.event-item p{
    margin-left: 4%;
    margin-right: 4%;
    overflow: hidden; /* Hide overflow text */
    white-space: nowrap; /* Prevent text from wrapping */
    text-overflow: ellipsis; /* Show ellipsis (...) */
    max-width: 100ch; /* Limit width to 100 characters */
}
.event-item h3{
    overflow: hidden; /* Hide overflow text */
    white-space: nowrap; /* Prevent text from wrapping */
    text-overflow: ellipsis; /* Show ellipsis (...) */
}

/* Close Button */
.admin-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.admin-close:hover, .admin-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Modal Image Styling */
.admin-modal-image {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}

button.cancelrequest-button {
    background: #007bff;
}


.reqButton {
    display: flex;
    align-content: center;
    justify-content: space-evenly;
    align-items: flex-end;
    flex-direction: column;
}

.reqButton button {
    background-color: #00761a;
    color: white;
    margin-left: 750px;
}
.reqButton button:hover {
background-color: #e0e0e0;
}

button.followup-button {
    background-color: #00761a;
    margin-left: 1130px;
    white-space: nowrap;
}

button.followup-button:hover {
    background-color: #e0e0e0;
}




#requestHistoryBtn {
    text-decoration: none; /* Removes underline from the link */
    color: inherit; /* Keeps the text color consistent */
    align-items: center; /* Vertically centers the icon and text */
    margin: 10vh 2vw ;
}

#requestHistoryBtn i {
    font-size: 24px; /* Size of the icon */
    margin-right: 5px; /* Space between icon and text */
    margin-top: 10px;
}

#requestHistoryBtn span {
    line-height: 1; /* Ensures text aligns properly with the icon */
}


#paginationControls button {
    margin: 0 10px; /* Optional margin between pagination buttons */
}

.colony-list {
    max-height: 150px;
    overflow-y: scroll;
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
    width: 200px;
  }
  .colony-list label {
    margin-right: 10px;
  }

  #helpSection * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

#helpSection body {
    background-color: #f0f0f0;
    color: #333;
}

#helpSection header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #4b0000;
    padding: 1rem 2rem;
    color: white;
}

#helpSection .logo img {
    height: 50px;
}

#helpSection nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
}

#helpSection nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

#helpSection .auth-buttons {
    display: flex;
    gap: 1rem;
}

#helpSection .auth-buttons .login-btn, .help-section .auth-buttons .signup-btn {
    padding: 0.5rem 1rem;
    border: none;
    background-color: #ffcc00;
    color: black;
    font-weight: bold;
    cursor: pointer;
}

#helpSection .auth-buttons .signup-btn {
    background-color: white;
    color: #4b0000;
}

#helpSection .search-section {
    text-align: center;
    padding: 2rem;
}

#helpSection .search-section h1 {
    margin-bottom: 1rem;
    font-size: 2.5rem;
    color: #ffffff;
}

section.search-section {
    background: #8a1c1c;
    border-radius:10px;
}

#helpSection .search-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

#helpSection .search-bar input {
    width: 60%;
    padding-left: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 7vh;
    font-size: 20px;
}

#helpSection .search-bar button {
    padding: 0.5rem;
    border: none;
    background-color: #ffcc00;
    color: white;
    border-radius: 5px;
}

img.imgsearch {
    width: 30px;
}

#helpSection .categories {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
    width: 100%; 
    text-align: center;
}

#helpSection .category-box {
    display: flex;
    justify-content: center;
    gap: 1rem; 
    flex-wrap: wrap; 
    max-width: 100%;
}

#helpSection .category-box button {
    background-color: #ffcc00;
    border: none;
    padding: 1rem 2rem;
    border-radius: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    height: 10vh;
    width: 15vw;
    color: black;
}

#helpSection .category-box button img {
    width: 50px;
    height: 50px;
}

#helpSection .faq, .help-section .instructions, #helpSection .instructions {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

#helpSection .faq h2 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

#helpSection .faq ul {
    list-style: none;
}

#helpSection .faq ul li, #helpSection .instructions ul li {
    background-color: #8a1c1c;
    margin: 0.5rem 0;
    padding: 1rem;
    border-radius: 5px;
    cursor: pointer;
    color: white;
}

#helpSection .faq ul li span {
    display: inline-block;
    width: 100%;
}

#helpSection .faq ul .answer, #helpSection .instructions ul .answer {
    display: none;
    margin-top: 0.5rem;
    background-color: #bb5a5a;
    padding: 0.5rem;
    border-radius: 5px;
}

#helpSection .instructions h3 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

#helpSection .instructions ul {
    list-style: none;
}

#helpSection .instructions ul li span {
    display: inline-block;
    width: 100%;
}


#helpSection .no-results {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    color: red;
    margin-top: 1rem;
    text-align: center;
    padding: 2rem;
    height: 50vh; 
}

#helpSection .no-results img {
    width: 150px; 
    height: 150px; 
    margin-bottom: 1rem;
}

#helpSection .no-results div {
    font-size: 1.5rem; 
}

#helpSection html, #helpSection body {
    height: 100%; 
    margin: 0;
    padding: 0;
}

#helpSection body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    background-color: #f0f0f0;
}

#helpSection main {
    flex: 1; 
}

#helpSection footer {
    background-color: #4b0000;
    color: white;
    text-align: center;
    padding: 1rem;
    width: 100%; 
    margin-top: auto; 
}
.sort-icon {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    position: relative;
}

.sort-icon::after {
    content: '';
    position: absolute;
    top: 6px;
    left: -5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}

.sort-icon.asc {
    border-top-color: transparent;
    border-bottom-color: black;
}

.sort-icon.desc {
    border-bottom-color: transparent;
    border-top-color: black;
}


.client-container {
    display: flex;
    align-items: center;
    margin-top: auto; /* Optional, based on your layout */
}

#clientSearch {
    margin-right: 10px; /* Adjust the spacing between input and button */
}

#addClientBtn{
    width: 15vw;
}

/* Add this to your CSS file */
.disabled-sidebar {
    pointer-events: none; /* Prevents all click events */
    display: none;
}

.disabled-settings-btn {
    opacity: 0.5;  /* Visually indicate settings button is disabled */
    cursor: not-allowed;  /* Change cursor to indicate non-clickable state */
}

/*Client Request List Table css*/
#requestListTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
}

/* Table header styles */
#requestListTable thead {
    background-color: #A90000; /* Green background */
    color: white; /* White text */
}

#requestListTable th {
    padding: 12px 15px;
    text-align: left;
    border-top: 2px solid;
}

#requestListTable th:first-child{
    border-radius: 15px 0 0 0; 
    border-left: 2px solid;
    border-top: 2px solid;
}

#requestListTable th:last-child{
    border-radius: 0 10px 0 0;
    border-right: 2px solid;
    border-top: 2px solid;
}

/* Table body styles */
#requestListTable tbody tr {
    background-color: #f9f9f9; /* Light background */
    border-bottom: 1px solid;
    border-bottom-color: rgb(197, 197, 197);
}

#requestListTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Alternate row color */
}

#requestListTable td {
    padding: 12px 15px;
    border: none    ;
}

/* Hover effect for rows */
#requestListTable tbody tr:hover {
    background-color: #d8f0e5; /* Light green on hover */
}


#requestListTable button {
    background-color: #A90000; 
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 10px;
}

#requestListTable td:last-child {
        display: flex;
        justify-content: center; /* Horizontally center the button */
        align-items: center; /* Vertically center the button (optional) */
    }

/* Admin Request Information Style*/
#adminRequestDetailsSection {
    margin-top: 7vh;
    margin-right: 3vw;
    margin-left: 2vw;
}

.request-header {
    display: flex;              /* Use flexbox for alignment */
    justify-content: space-between; /* Space between header and button */
    align-items: center;       /* Center items vertically */
    margin-bottom: 20px;      /* Space between header and content */
}

#adminRequestDetailsHeader {
    margin: 0;                /* Remove default margin */
}



#adminRequestDetailsContent {
    margin-top: 7vh;
}


/*settings*/
div#clientSettingsSection, div#labSettingsSection, div#adminSettingsSection{
    margin-top: 7vh;
    margin-right: 4vw;
    margin-left: 3vw;
    margin-bottom: 6vh
}

label#enter {
    width: 24vw;
    text-align: center;
    margin: 10px;
}

form#settingsPasswordResetForm {
    width: 60vw;
}

#arrow-down {
    color: #000000;
}

div#clientSettingsSection label {
    margin-top: 14px;
    margin-left: 12px;
}

button#reset-btn {
    margin: auto;
    margin-top: 20px;
}

input#resetEmail {
    margin: 10px;
    width: auto;
    padding: 10px;
}

#settingsPasswordResetForm h2 {
    margin-left: 450px;
    margin-top: 14px;
}


form#settingsPasswordResetForm {
    width: auto;
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .7);
    margin-top: 20px;
}

h1.settingslabel {
    width: 100%;
    border-bottom: 2px solid;
    margin-top: -33px;
}

button#addSampleButtonPlateCount { 
    background-color: dodgerblue;
    margin-left: 225px;
    margin-top: 10px;
    width: 211px;
}

button#submitPlateCountForm {
    background-color: green;
}

.pill {
    display: inline-block;
    width: 100px;
    height: 30px;
    padding-top: 10px;
    border-radius: 20px; /* Rounded corners for a pill shape */
    font-weight: 500; /* Medium font weight */
    font-size: 14px; /* Font size */
    text-align: center; /* Center the text */
    color: #ffffff; /* Text color */
    transition: background-color 0.3s ease; /* Smooth transition for hover effects */
}

/* In Progress Pill */
.pill-gray { 
    background-color: #DCB000;
    color: white;
    padding: 10px 25px;
    border-radius: 15px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.pill.pending {
    background-color: #DCB000; /* Color for pending */
    color: black; /* Text color for better visibility */
}

.pill.released {
    background-color: #00823E; /* Green for released status */
    font-size: 13px;
    font-weight: bold;
}

.pill.rejected {
    background-color: #A90000; /* Color for rejected */
    font-size: 13px;
    font-weight: bold;
}

.pill.releasing {
    background-color: #00761A; /* Color for releasing */
    font-size: 13px;
    font-weight: bold;
}

.pill.preparing {
    background-color: #008AC0; /* Color for preparing */
    font-size: 13px;
    font-weight: bold;
}

.pill.low {
    background-color: #DCB000; /* Color for low priority */
    font-size: 13px;
    font-weight: bold;
}

.pill.medium {
    background-color: #008AC0; /* Color for medium priority */
    font-size: 13px;
    font-weight: bold;
}

.pill.high {
    background-color: #A90000; 
    font-size: 13px;
    font-weight: bold;
}

.pill.unknown {
    background-color: #808080;
    font-size: 13px;
    font-weight: bold;
}

#taskDetailsSection {
    width: 95%;
    font-family: Arial, sans-serif;
}
#taskHeader {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}
.header-section {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.header-section h3 {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
}
.header-section p {
    margin: 5px 0;
    color: #666;
    font-size: 14px;
}
.header-section .status-badge {
    padding: 5px 15px;
    background-color: #4caf50;
    color: white;
    border-radius: 5px;
    font-weight: bold;
    margin-left: 15px;
}
.header-section .priority-high {
    color: red;
    font-weight: bold;
}
.header-section .request-info {
    text-align: right;
}
#sampleTable {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}
#backToTaskButton {
    top: 800px;
}

#sampleTable th,
#sampleTable td {
    padding: 10px 30px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
#sampleTable th {
    background-color: #f7f7f7;
    font-weight: bold;
}

td.sampleNo {
    width: 55%;
}

#sampleTable th:last-child,
#sampleTable th:nth-child(2) {
    text-align: center;
}

#sampleTable tbody td:nth-child(2), /* middle column */
#sampleTable tbody td:last-child {  /* last column */
    text-align: center;
}

    .sampleStat {
         padding-left: 25px;
    }


    #sampleTable thead th {
        font-size: 26px;
        font-weight: bold;
        text-align: left;
        padding: 10px 25px;
        background-color: #f8f9fa;
        color: #333;
        border-bottom: 2px solid #ddd;
    }

            #sampleTable tbody tr {
                border-bottom: 1px solid #ddd;
            }

            #sampleTable tbody td {
                font-size: 20px;
                padding: 0 25px !important;
                color: #333;
                text-align: left;
            }

            .pill-green {
                background-color: green;
                color: white;
                padding: 10px 20px;
                border-radius: 15px;
                font-size: 15px;
                font-weight: bold;
            }

            /* Button styling */
            .btn-samplereport, .btn-count-colonies {
                background-color: #666;
                color: white;
                padding: 10px 25px;
                border: none;
                border-radius: 15px;
                font-size: 15px;
                cursor: pointer;
                margin-right: 5px;
                margin-top: 19px;
            }

            .btn-samplereport:disabled, .btn-count-colonies:disabled {
             background-color: #0e4a1b;
                color: white;
                padding: 10px 25px;
                border: none;
                border-radius: 15px;
                font-size: 15px;
                cursor: not-allowed;
                margin-right: 5px;
        }

            .btn-samplereport:hover:isnot(:disabled), .btn-count-colonies:hover:isnot(:disabled) {
                background-color: #555;
            }


    @media (max-width: 800px) {
        #sampleTable tbody td{
            text-align: right;
            display: flex;
            justify-content: flex-end;
            width: 90%;
        }

        #sampleTable tbody td:nth-child(2), /* middle column */
        #sampleTable tbody td:last-child {  /* last column */
        text-align: right;
        margin: 10px;
        margin-left: 0;
        }

        .btn-samplereport:disabled, .btn-count-colonies:disabled, .pill-green {
            margin: 10px;
            margin-left: 0;
        }
        
    }
/* Status Labels */
.status.in-progress {
    background-color: #ffeb3b;
    color: #555;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
}
/* Action Buttons */
.action-btn {
    border: none;
    padding: 8px 15px;
    margin-right: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    display: inline-block;
}
.action-btn.report {
    background-color: #a9a9a9;
    color: white;
}
.action-btn.view {
    background-color: transparent;
    color: #555;
    padding: 8px 10px;
}

.statusSpacing {
    left: 58px;
}

/* Create Report Button */
#createReportButton {
    background-color: #00761A;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    display: block;
}

button#backToTasksButton {
    border-radius: 5px;
}

.reportbtns {
    display: flex;
    justify-content: space-between;
    margin: 20px;
    margin-top: 140px;
}

/* Additional Styling for Table Layout */
.sampleTableBody tr {
    transition: background-color 0.3s;
}
.sampleTableBody tr:hover {
    background-color: #f9f9f9;
}


button#uploadMOUButton {
    background-color: green;
    margin-left: 20px;
}




.reject-button {
    width: 91px;
    height: 39px;
    border-radius: 20px;
    background-color: #a90000;
    margin: 0;
    margin-left: 120px;
    margin-bottom: 50px;
}

.approve-button {
    width: 100px;
    height: 39px;
    border-radius: 20px;
    background-color: #009623;
    margin: 0;
    margin-left: 800px;
    margin-top: 50px;
}

#reportFormContainer {
    position: -webkit-sticky;
    width: 40%;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 1;
    margin-bottom: 35px;
    margin-left: 359px;
}

.input-group label{
    
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
    font-size: 16px;
    width: fit-content;
}

.button-container {
    gap: 10px;
   margin-top: 30px;
    margin-right: 15px;
    margin-bottom: 2vh;
}

.button-container .btn-done {
    gap: 10px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 34px;
    background-color: green;
}
.button-container .btn-back {
    gap: 10px;
    margin-left: 35px;
    margin-right: 109px;
    margin-top: 34px;
}

.input-group input[type="text"], input[type="number"], textarea  {
  
    width: 351px;
    margin-top: 10px;
    margin-bottom: 5px;
}
.green {
    background-color: green;
}
button#uploadEventBtn {
    background-color: dodgerblue;
}
button#editEventBtn {
    background-color: dodgerblue;
}
.input-group label {
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
    font-size: 16px;
    margin-top: 10px;
}
@media (max-width: 768px) {
    #reportContainer {
        display: flex;
        flex-direction: column;
        margin-right: 50px;
        padding-top: 40px;
        background: white;
        border-radius: 31px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1);
        width: 90vw;
    }

    .reportform {
        margin-left: 1vw;
    }

   #notes {
        width: 74vw;
        height: 20vh;
        
        margin-right: 15px;
    }

    .button-container {
        gap: 10px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .button-container  .btn-done {
        gap: 10px;
        margin-left: 45px;
        margin-right: 15px;
        margin-top: 34px;
        background-color: green;
    }

    .button-container button {
        gap: 10px;
        margin-left: 45px;
        margin-right: 15px;
        margin-top: 34px;
    }
    
    .input-group input[type="text"], input[type="number"], textarea  {
        margin-left: 15px;
        width: 74vw;
        margin-bottom: 10px;
    }

   
   
    
    .reqlabelform {
        font-weight: bold;
        color: #555;
        margin-bottom: 5px;
        font-size: 16px;
        margin-left: 15px;
        width: 69vw;
    }

    .report-header {
        padding: 45px;
        background-color: #E4E4E4;
        border-radius: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1);
        font-size: 15px !important;
        font-weight: 500;
        width: 67% !important; 
        margin: auto;
        margin-top: -25px !important;
    }

    .report-details {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        flex-direction: column;
        align-items: flex-start;
        width: 110vw;
        margin-left: -18px;
    }

    .report-header h2 {
        margin-left: 47px;
    }

    .notes-section {
        width: 69vw !important;
        padding: 30px;
        border-radius: 8px;
        background-color: #FFF4F4;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .report-summary {
        width: 78vw !important;
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: #f9f9f9;
    }
    
    .report-summary h3 {
        margin-left: 60px;
    }

    .report-summary ul {
        margin-left: -20px;
    }
    
    .report-body {
     margin-top: -9px !important;
    }

    .button-container .btn-done {
        gap: 10px;
        margin-left: -21px;
        margin-right: -33px;
        margin-top: 34px;
        background-color: green;
    }
    .button-container .btn-back {
        gap: 10px;
        margin-left: 35px;
        margin-right: 109px;
        margin-top: 34px;
    }

}

/* Small devices (max-width: 480px) */
@media (max-width: 480px) {
    #sampleDurationSection {
        align-items: flex-start;
    }

    #reportFormContainer {
        position: -webkit-sticky;
        width: 90%;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        z-index: 1;
        height: auto;
        margin-left: 0px;
    }

    .input-group label{
    
        font-weight: bold;
        color: #555;
        margin-bottom: 5px;
        font-size: 16px;
    }

    label {
        width: 100px;
        margin-right: 10px;
        margin-left: 15px;
    }

    #startDate, #searchInput, #sampleIdHeader, .search-container, .sample-duration-container, .duration-container {
        width: 89%;
        margin-left: 0;
    }

    .search-container {
        margin: 15px 0;
    }

    #sampleIdHeader {
        font-size: 18px;
        padding: 8px;
        width: 83vw;
        margin-top: -20px;
        margin-left: 36px;

    }

     .sample-duration-group {
        width: 79.6vw;
        margin-left: -14px;
    }

    .duration-container {
        width: 79.6vw;
        margin-left: 3px;
    }

    #backSampleDuration {
        margin: 0 56px 0 24px !important;
    }

    #showGrowthRateBtn {
        margin: 50px 0 35px 55px !important;
    }

    button#addDayButton {
        font-size: 14px;
        padding: 8px 12px;
        background-color: dodgerblue;
        color: white;
        border: none;
        border-radius: 15px;
        cursor: pointer;
        font-weight: bolder;
    }

    .day-box {
        flex: 1 1 90%;
        margin: 5px auto;
        font-size: 18px;
        padding: 15px;
        height: 14vh;
        margin-right: 14px;
    }

    .day-box::before {
        content: "★";
        color: gold;
        position: absolute;
        left: 23px;
        top: 62%;
        transform: translateY(-50%);
        font-size: 46px;
    }

    .sample-duration-title {
        font-size: 1.2em;
    }

    .sample-duration-grid {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: flex-start;
    }

    .search-button, .durationButtons button {
        padding: 8px 16px;
        font-size: 14px;
    }

    .modal-content-growthrate {
        width: 90%;
        margin: 10px auto;
    }

    .sample-duration-value, .sample-duration-heading {
        font-weight: 500;
        color: #202124;
        font-size: 14px;
    }

    .sample-duration-heading {
        font-weight: 700;
    }

    .sample-duration-item {
        border-radius: 20px;
        padding: 10px;
        text-align: left;
        margin-left: -2px;
    }
}

/* Medium devices (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    #sampleDurationSection {
        align-items: center;
    }

    #startDate, #searchInput, #sampleIdHeader, .sample-duration-container, .duration-container {
        width: 95%;
    }

    #sampleIdHeader {
        font-size: 20px;
    }

    #backSampleDuration, #showGrowthRateBtn {
        font-size: 15px;
        padding: 10px 18px;
    }

    .sample-duration-title {
        font-size: 1.3em;
    }

    .search-button {
        padding: 10px 20px;
        font-size: 18px;
    }

    button#addDayButton {
        font-size: 16px;
        padding: 10px 15px;
    }

    .modal-content-growthrate {
        width: 85%;
        margin-top: 159px;
        margin-left: 189px;
    }

    .durationButtons button {
        padding: 10px 20px;
        font-size: 16px;
    }
}




label {
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
    font-size: 16px;
}

input[type="text"], input[type="number"], textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fafafa;
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    transition: border 0.3s ease;
}

input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
    border-color: #a20000;
    outline: none;
}

textarea {
    resize: vertical;
    height: 100px;
    margin-bottom: 15px;
}







body.has-report-form {
    font-family: 'Arial', sans-serif;
}

body.no-report-form {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Arial', sans-serif;
}

/* Loader wrapper to center it on the page */
.loader-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; /* Fixed position to cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    z-index: 999; /* Ensure it is on top of other content */
    display: none; /* Initially hidden */
    border-radius: 10px; /* Rounded corners */
}

/* Loader styles */
.loader {
    width: 48px;
    height: 48px;
    display: block;
    margin: 15px auto;
    position: relative;
    color: #FFCC00;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader::after,
.loader::before {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: scale(0.5) translate(0, 0);
    background-color: #FFCC00;
    border-radius: 50%;
    animation: animloader 1s infinite ease-in-out;
}

.loader::before {
    background-color: #E4080A;
    transform: scale(0.5) translate(-48px, -48px);
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes animloader {
    50% {
        transform: scale(1) translate(-50%, -50%);
    }
}



#reportContainer {
    display: flex;
    flex-direction: column;
    margin-right: 50px;
    padding-top: 40px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1);
}

.report-header {
    padding: 45px;
    background-color: #E4E4E4;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 1.25rem;
    font-weight: 500;
    width: 85%;
    margin: auto;
}

.report-details {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Distribute space between columns */
    margin-top: 10px; /* Add some space above */
}

/* Flex container for the two sections */


.info-left {
    text-align: left;
    /* Additional styling for the left section */
}

.info-right {
    text-align: right;
    /* Additional styling for the right section */
}

.left-column,
.right-column {
    width: 48%; /* Adjust width as needed */
}

.left-column p,
.right-column p {
    margin: 5px 0; /* Space between paragraphs */
}


.report-body {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    max-width: 91%;
    margin: 0 auto;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 15px;
}

.report-summary {
    width: 54%; /* Adjust width as needed */
    padding: 40px;
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    background-color: #f9f9f9;
}

.reportbtn {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 30px;
}

.notes-section {
    width: 30%;
    padding: 30px;
    border-radius: 8px;
    background-color: #FFF4F4;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

textarea {
    width: 100%;
    resize: none; /* Prevent resizing */
}














/* Colony Count Section */
.gc-form {
    width: 60%;
    gap: 10px;
}

input#confidence, input#overlap, input#fileName{
    width: 100%;
}

.gc-confidence-input, .gc-file-input, .gc-overlap-input {
    display: flex;
    width: 100%;
}

.preview {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.23);
    padding: 50px;
    padding-top: 40px;
    background: #ededed;
}

.gc-colony-count-section {
    padding-right: 50px;
}

.gc-submit-button {
    display: flex;
    justify-content: flex-end;
}

/* Header Styles */
.gc-header {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Message Styles */
.gc-message {
    margin-bottom: 20px;
}

/* Container Styles */
.gc-container {
    margin: auto;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 80%;
    overflow: hidden;
    margin-bottom: 50px;
}

img.imgoutput {
    width: 24vw;
}

/* Title Styles */
.gc-title {
    margin-bottom: 20px;
    background: #550000;
}

.gc-title-text {
    color: #ffffff;
    width: 100%;
    text-align: center;
    margin: 15px;
}

@media (min-width: 768px) {
    .gc-grid {
        grid-template-columns: 1fr 1fr;
    }
}

#backButtonReport {
    width: 90px;
    padding: 10px;
    margin-bottom: 30px;
    margin-top: 15px;

}

#sendButton {
    background-color: #009623;
    width: 90px;
    margin-bottom: 30px;
    margin-top: 15px;
}

/* Input Form Container */
.gc-input-form-container {
    padding: 20px;
}

/* Input Styles */
.gc-label {
    margin-bottom: 5px;
    width: 170px;
}

.gc-file-input-wrapper {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.gc-file-name {
    border-right: none; /* Remove right border for seamless look */
}

.gc-browse-button {
    border-left: none; /* Remove left border for seamless look */
    cursor: pointer;
    margin: 0;
}

.gc-browse-button:hover {
    border-left: none; /* Remove left border for seamless look */
    cursor: pointer;
    margin: 0;
    background-color: darkred; /* Darker shade on hover */
}

/* Number Input Styles */
.gc-confidence-number,
.gc-overlap-number {
    border-radius: 4px;
}

/* Submit Button Styles */
.gc-run-inference-btn {
    background-color: dodgerblue;
    transition: background-color 0.3s;
}

.gc-run-inference-btn:hover {
    background-color: #0559ab; /* Darker shade on hover */
}

/* Result Container */
.colonyHeader {
    width: 77%;
    margin: auto;
    height: 100px;
    background: #d9d9d9;
    margin-bottom: 20px;
    padding: 25px;
    border-radius: 10px;
}

.gc-result-border.border-t.border-gray-300.pt-4 {
    display: flex;
    justify-content: space-around;
}

.gc-result-container {
    padding: 20px;
    border-radius: 8px;
    padding-bottom: 30px;
}

/* Result Title Styles */
.gc-preview-title, .gc-result-title {
    margin: 0;
    font-size: 30px;
    color: #4a4a4a;
}

/* Image Preview Styles */
.gc-image-preview {
    display: flex;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
}

.gc-uploaded-image {
    border-radius: 8px;
    width: 24vw;
}


/* Colony Count Styles */
.gc-colony-count {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0;
}

/* Output Styles */
.gc-output {
    background-color: #f3f4f6; /* Light gray background */
    border-radius: 8px;
}

/* Button Styles */
.gc-save-button{
    margin-top: 20px;
    padding: 10px 20px;
    border: none;
    background-color: #00761A; 
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

.gc-back-button {
    margin-top: 20px;
    padding: 10px 20px;
    border: none;
    background-color: #7D1B1B;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

.gc-save-button:hover {
    background-color: darkgreen; /* Darker shade on hover */
}

.gc-back-button:hover {
    background-color: darkred; /* Darker shade on hover */
}


    button#backLabUseAndEquipmentAccessForm {
    padding: 8px 12px;
    font-size: 1rem;
    margin-right: 490px;
    }
    button#backResearchCollaborationForm {
        margin-right: 490px;
    }
    
/* Responsive Styles */
@media (max-width: 768px) {
    .gc-preview-title,
    .gc-result-title {
        font-size: 24px; /* Slightly smaller title on mobile */
    }

    .gc-uploaded-image {
        width: 50vw; /* Adjust image size to fit better on mobile */
    }

    .gc-colony-count {
        font-size: 18px; /* Make text a bit smaller on mobile */
    }
    .gc-result-border {
        display: flex;
        flex-direction: column; /* Stack items vertically */
    }
    img.imgoutput {
        width: 50vw;
    }

    .preview:first-of-type {
        order: 1; /* Ensures preview is on top */
    }
    
    .preview:last-of-type {
        order: 2; /* Ensures result is at the bottom */
    }
}

.statusSpacing {
    padding-left: 80px;
}

/* Modal Styling */
#editClientModal {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Content */
.modal-content {
    background-color: #FFFFFF;
    border-radius: 8px;
    width: 75%; /* Increased width to 80% */
    height: 100%;
    max-width: 10000px; /* Set a maximum width for larger screens */
    max-height: 10000px; /* Set a maximum width for larger screens */
    padding: 0px;
    position: relative;
    box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.2);
    margin-top: 100px; /* Centered on screen */
    margin-left: 10px;
    margin-right: 10px;
}

/* Header */
.modal-content h2 {
    text-align: center;
    background-color: #8B0000; /* Dark red color */
    color: white;
    margin: 0;
    padding: 15px;
    font-size: 24px; /* Slightly larger font */
    font-weight: bold;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    width: 100%; /* Full width to align with form container */
    box-sizing: border-box;
}

/* Modal Content */
.edit-modal-content {
    background-color: #FFFFFF;
    border-radius: 8px;
    width: 75%;
    max-width: 10000px;
    padding: 0;
    position: relative;
    box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.2);
    margin-top: 100px;
    margin-left: 223px;
    margin-right: 0px;
    height: 66vh;
    max-height: 80vh;
    margin-top: 123px;
    position:fixed;
}



/* Header */
.edit-modal-content h2 {
    text-align: center;
    background-color: #8B0000; /* Dark red color */
    color: white;
    margin: 0;
    padding: 15px;
    font-size: 24px; /* Slightly larger font */
    font-weight: bold;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    width: 100%; /* Full width to align with form container */
    box-sizing: border-box;
}




/* Button */
#saveClientChangesBtn {
    width: 200px; /* Increase button width */
    align-self: center;
    padding: 12px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
}

#saveClientChangesBtn:hover {
    background-color: #45a049;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-content {
        width: 95%; /* Wider width on smaller screens */
    }
    .edit-modal-content {
        width: 95%; /* Wider width on smaller screens */
    }
    #editClientForm div div {
        width: 48% !important; /* Adjusts to two fields per row on smaller screens */
        display: flex !important;
        justify-content: space-between !important;
        gap: 10px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    input#editFirstName, input#editMiddleName, input#editLastName {
        width: 210% !important;
    }
    #editClientForm div {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        flex-direction: column;
        align-items: flex-start !important;
    }

}

@media (max-width: 480px) {
    .modal-content {
        width: 100%; /* Full width on very small screens */
        max-width: 1000px; /* Set a max-width to control scaling */
    }
    .edit-modal-content {
        width: 96%;
        max-width: 1000px;
        margin-top: 109px;
        margin-left: 8px;
        max-height: 82vh;
    }
    
    #editClientForm  div {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        flex-direction: column;
    }
    
    /* Decrease gap between label and input */
    #editClientForm label {
        margin-bottom: 3px;
    }
    
    /* Adjust button width on smaller screens */
    #saveClientChangesBtn {
        width: 100%;
    }
}

       
        .swal2-cancel btn btn-danger {
            padding: 10px 20px;
            margin: 10px;
            background-color: #8a1111;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            font-size: 18px;
            margin-top: 58px;
            margin-bottom: 40px;
            margin-left: 90px;
        }

       
        

        
        
 /* Modal header styling */
.swal2-popup .swal2-title {
    background-color: #8B1E1E; /* Dark red */
    color: #fff; /* White text */
    padding: 15px;
    margin: 0;
    border-radius: 10px 10px 0 0;
    font-weight: bold;
    font-size: 18px;
}

/* Modal content styling */
.swal2-popup .swal2-content {
    font-size: 16px;
    color: black; /* Set message text color to black */
    padding: 20px;
    font-weight: 500;
}

/* Styling for the confirm button */
.btn-success {
    background-color: #00823E; /* Green */
    color: #fff;
    font-weight: bold;
    border: none;
    padding: 10px 30px;
    border-radius: 5px;
    cursor: pointer;
}

/* Styling for the cancel button */
.btn-danger {
    background-color:#8B1E1E; /* red */
    color: white; /* Set cancel button text color to black */
    font-weight: bold;
    border: none;
    padding: 10px 30px;
    border-radius: 5px;
    margin-right: 100px;
    cursor: pointer;
}

.btn-danger:hover, .btn-success:hover {
    opacity: 0.9;
}

/* Modal border radius */
.swal2-popup {
    border-radius: 10px;
}

.swal2-confirm {
    border-radius: 10px;
    background-color: #00823E; /* Green */
    color: #fff;
    font-weight: bold;
    border: none;
    padding: 10px 30px;
    border-radius: 5px;
    cursor: pointer;
}

/* Customize the size and color of the SweetAlert2 icon */
.swal2-icon.swal2-warning {
    color: #8B1E1E; /* Set icon color to black */
    width: 60px;
    height: 60px;
    border-color: #8B1E1E; /* Set icon border color to black */
    border-width:  6px;
}

.swal2-icon.swal2-question {
    color: lightseagreen; /* Set icon color to black */
    width: 60px;
    height: 60px;
    border-color: lightseagreen; /* Set icon border color to black */
    border-width:  6px;
}





/* Make sure the title stays on top */
.swal2-title {
    order: -1; /* Moves the title to the top */
    margin-bottom: 10px; /* Adds some spacing below the title */
}

/* Move the icon below the title */
.swal2-icon {
    margin-top: 40px; /* Adds some spacing above the icon */
}

/* Target the container to apply a flex layout adjustment */
.swal2-popup {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.swal2-actions {
    gap: 100px;
    margin-bottom: 5px;
}

.swal2-deny  {
    border-radius: 10px;
    background-color:#8B1E1E;
    color: #fff;
    font-weight: bold;
    border: none;
    padding: 10px 30px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 5px;
}

.swal2-cancel  {
    border-radius: 10px;
    background-color:#8B1E1E;
    color: #fff;
    font-weight: bold;
    border: none;
    padding: 10px 30px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 5px;
}

.swal2-input-label {
    width: 400px;
}

/* Ensure to include Font Awesome for icons */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

/* Container styling */
.initiating-message {
    margin: 20px;
    margin-bottom: 30px; /* Adds margin at the bottom */
    padding: 20px;
    background-color: #ffffff; /* White background */
    border-radius: 8px;
    color: #555;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Adds shadow */
    text-align: center;
}

/* Link styling for the Download MOU Template */
.initiating-message a {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 12px 20px;
    background-color: #007bff;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.initiating-message a:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

.initiating-message a::before {
    content: "\f019"; /* Font Awesome download icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
}

/* File upload section styling */
.file-upload {
    margin-top: 20px;
}

/* Input field styling with icon */
.file-upload input[type="file"] {
    display: inline-flex;
    align-items: center;
    padding: 10px;
    border: 2px solid #28a745; /* Green border */
    border-radius: 5px;
    background-color: #ffffff;
    font-weight: bold;
    color: #28a745; /* Green text */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
    padding-left: 35px; /* Space for icon */
}

.file-upload input[type="file"]::before {
    content: "\f093"; /* Font Awesome upload icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 10px;
    color: #28a745; /* Green icon */
}

.file-upload input[type="file"]::file-selector-button {
    display: none; /* Hide default file button for modern browsers */
}

.file-upload input[type="file"]:hover {
    background-color: #28a745; /* Green background on hover */
    color: #ffffff; /* White text on hover */
}

/* Button styling with icon */
.file-upload button {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #28a745; /* Green background */
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.file-upload button:hover {
    background-color: #218838; /* Darker green on hover */
    transform: scale(1.05);
}

.file-upload button::before {
    content: "\f093"; /* Font Awesome upload icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
}



label.reqformlabel {
    width: 200px;
}

input.sampleId, 
input.sampleName, 
input.agarType, 
input.sampleType, 
input.microbeName, 
input.sampleIdentification, 
input.microbeSource, 
input.waterSource, 
input.morphologicalCharacteristics, 
input.specialHandling, 
input.plantSpecimen, 
input.accessionNumber, 
input.sampleCondition,
input.postUseCondition,
input.equipmentId, 
input.equipmentRequesting {
    width: 66%;
}

input.scheduledDate {
    width: 58%;
}

.fc-daygrid-day, .fc-col-header-cell {
    width: 70px;
}

.fc .fc-toolbar.fc-header-toolbar {
    background: #7D1B1B;
    margin-bottom: 1.5em;
    padding: 10px 20px;
}

.fc .fc-toolbar-title {
    color: white;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    background-color: #fafafa; 
    color: black; /* Change text color to black for better contrast */
    padding: 10px 20px;
    border: 1px solid #ccc; /* Add a gray border */
    border-radius: 4px;
    font-weight: normal;
    cursor: pointer;
    font-size: 16px;
    text-align: left;
    width: 440px; /* Adjust width as needed */
}

.dropdown-toggle:hover {
    background-color: #e0e0e0; /* Light gray background on hover */
}


.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 5px 0;
    margin: 0;
    border-radius: 4px;
    width: 250px;
    min-width: 180px;
}

.dropdown-menu li {
    padding: 8px 15px;
    cursor: pointer;
    color: #333;
    transition: background-color 0.3s;
}

.dropdown-menu li:hover {
    background-color: #f0f0f0;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > span {
    display: block;
}

.dropdown-submenu .dropdown-menu {
    position: relative; /* Set position relative to the parent menu */
    top: 0;
    left: 0;
    margin-left: 15px; /* Indent to align inside the parent menu */
    margin-top: -5px; /* Adjust overlap */
    border-radius: 4px;
    box-shadow: none; /* Remove extra shadow for submenus */
    width: calc(100% - 30px); /* Keep it within the parent menu width */
}

/* Optional: Styling for arrow indicator */
.dropdown-submenu > span::after {
    content: '▶'; /* Arrow pointing right */
    float: right;
    font-size: 12px;
    color: #666;
    margin-left: 5px;
}

.dropdown-submenu:hover > span::after {
    content: '▼'; /* Arrow pointing down when hovered */
}

.required {
    color: red;
    font-weight: bold;
}