Seniortutordashboard.css

/* Seniortutordashboard.css */
body {
    font-family: 'Arial', sans-serif;
    background-color: #a595c5;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.dashboard {
    width: 1100px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: flex;
    border-radius: 15px;
    overflow: hidden;
}

.sidebar {
    background-color: #2c3f50;
    color: #ffffff;
    width: 280px;
    padding: 30px;
}

.sidebar h1 {
    font-size: 26px;
    margin: 0;
    margin-bottom: 30px;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li a {
    display: block;
    padding: 15px;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.sidebar ul li a:hover {
    background-color: #21435c;
}

.content {
    padding: 30px;
    flex-grow: 1;
}

.content h2 {
    color: #333;
    font-size: 24px;
}

.form-field input,
.form-field select,
.form-field textarea,
.login-button {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 2px solid #ccc;
    border-radius: 8px;
}

.login-button {
    background-color: #2980b9;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
}

.login-button:hover {
    background-color: #3498db;
}
#systemOverview {
    height: 400px; /* Adjust height based on your layout needs */
    overflow-y: auto; /* Enables vertical scrolling if content exceeds the container's height */
    background-color: #f8f9fa; /* Optional: sets a background color for the section */
    border: 1px solid #ddd; /* Optional: adds a border for better visibility */
    padding: 8px; /* Provides space between the content and the borders of the div */
    margin-top: 20px; /* Optional: adds space above the section */
    border-radius: 5px; /* Rounds the corners of the section */
}

.overview-section h4 {
    margin-top: 0;
    color: #2c3f50; /* Adjust the color to match your design */
    padding-bottom: 5px; /* Padding below the header for spacing */
}

.overview-section ul {
    list-style-type: none; /* Removes default list styling */
    padding: 0;
    margin: 0; /* Removes default margin */
}

.overview-section ul li {
    padding: 8px; /* Padding inside each list item */
    border-bottom: 1px solid #eee; /* Adds a subtle line between items */
    margin-bottom: 2px; /* Space between items */
}
/* Inside your Seniortutordashboard.css */
#viewStudents {
    height: 400px; /* Adjust height based on your layout needs */
    overflow-y: auto; /* Enables vertical scrolling if content exceeds the container's height */
    background-color: #f8f9fa; /* Optional: sets a background color for the section */
    border: 1px solid #ddd; /* Optional: adds a border for better visibility */
    padding: 8px; /* Provides space between the content and the borders of the div */
    margin-top: 20px; /* Optional: adds space above the section */
    border-radius: 5px; /* Rounds the corners of the section */
}

#viewStudents ul {
    list-style-type: none; /* Removes default list styling */
    padding: 0;
}

#viewStudents ul li {
    padding: 8px; /* Padding inside each list item */
    border-bottom: 1px solid #eee; /* Adds a subtle line between items */
    margin-bottom: 2px; /* Space between items */
}
#viewSupervisors {
    height: 300px;  /* Set a fixed height suitable for your layout */
    overflow-y: auto;  /* Enables vertical scrolling */
    background-color: #f8f9fa;  /* Light background for the section */
    border: 1px solid #ddd;  /* Border for clarity */
    padding: 8px;  /* Padding inside the section */
    margin-top: 20px;  /* Space above the section */
    border-radius: 5px;  /* Rounded corners */
}

#viewSupervisors ul {
    list-style-type: none;  /* No bullets */
    padding: 0;  /* No padding to start */
}

#viewSupervisors ul li {
    padding: 8px;  /* Comfortable padding inside each list item */
    border-bottom: 1px solid #eee;  /* Subtle separator between items */
    margin-bottom: 2px;  /* Small margin between items */
}
#viewMeetings {
    height: 300px;  /* Adjust this height based on your UI design */
    overflow-y: auto;  /* Enables vertical scrolling */
    background-color: #f8f9fa;  /* Light background color for the section */
    border: 1px solid #ddd;  /* Border for visual separation */
    padding: 8px;  /* Padding inside the section */
    margin-top: 20px;  /* Space above the section */
    border-radius: 5px;  /* Rounded corners for aesthetics */
}

#viewMeetings ul {
    list-style-type: none;  /* No bullets */
    padding: 0;  /* Removes default padding */
    margin: 0;  /* Aligns content properly */
}

#viewMeetings ul li {
    padding: 8px;  /* Adequate padding for readability */
    border-bottom: 1px solid #eee;  /* Light line between items */
    margin-bottom: 2px;  /* Small margin for separation */
    font-size: 14px;  /* Font size for clarity */
}
#deleteStudentForm input[type="text"] {
    width: 80%; /* Adjust width as necessary */
    padding: 10px; /* Padding for better text visibility */
    margin: 10px 0; /* Margin for spacing */
    border: 2px solid #ccc; /* Border color */
    border-radius: 25px; /* This creates the rounded effect */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); /* Optional: adds an inset shadow for depth */
}

#deleteStudentForm button {
    padding: 10px 20px;
    background-color: #f44336; /* Red color for the delete button */
    color: white;
    border: none;
    border-radius: 25px; /* Rounded edges for the button */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Optional: adds shadow for the button */
}

#deleteStudentForm button:hover {
    background-color: #d32f2f; /* Darker shade when hovered */
}

#deleteStudentForm input[type="text"] {
    width: 80%;  /* Appropriate width */
    padding: 10px;  /* Padding for text alignment */
    margin: 10px 0;  /* Margin for vertical spacing */
    border: 2px solid #ccc;  /* Border style */
    border-radius: 25px;  /* Rounded corners */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);  /* Subtle inner shadow for depth */
}

#deleteStudentForm button {
    padding: 10px 20px;
    background-color: #f44336;  /* Red button for deletion */
    color: white;
    border: none;
    border-radius: 25px;  /* Rounded edges */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);  /* Button shadow */
}

#deleteStudentForm button:hover {
    background-color: #d32f2f;  /* Darker red on hover */
}
#deleteSupervisorForm input[type="text"] {
    width: 80%;  /* Adjust width as necessary */
    padding: 10px;  /* Padding for better text visibility */
    margin: 10px 0;  /* Margin for spacing */
    border: 2px solid #ccc;  /* Border color */
    border-radius: 25px;  /* Creates the rounded effect */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);  /* Optional: adds an inset shadow for depth */
}

#deleteSupervisorForm button {
    padding: 10px 20px;
    background-color: #f44336;  /* Red color for the delete button */
    color: white;
    border: none;
    border-radius: 25px;  /* Rounded edges for the button */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);  /* Optional: adds shadow for the button */
}

#deleteSupervisorForm button:hover {
    background-color: #d32f2f;  /* Darker shade when hovered */
}
#addStudentForm .form-group {
    margin-bottom: 15px;
}

#addStudentForm label {
    display: block;
    margin-bottom: 5px;
    color: #333;
}

#addStudentForm input[type="text"],
#addStudentForm input[type="password"] {
    width: 100%;  /* Ensure input fields take up the full width of their container */
    padding: 10px; 
    border: 2px solid #ccc;
    border-radius: 25px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

#addStudentForm button {
    width: auto;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    display: inline-block;  /* Makes the button align to the form naturally */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#addStudentForm button:hover {
    background-color: #45a049;
}
.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligns items to the start of the flex container */
}
#addSupervisorForm .form-group {
    margin-bottom: 15px;
}

#addSupervisorForm label {
    display: block;
    margin-bottom: 5px;
    color: #333;
}

#addSupervisorForm input[type="text"],
#addSupervisorForm input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 25px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

#addSupervisorForm button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#addSupervisorForm button:hover {
    background-color: #45a049;
}