223 lines
		
	
	
		
			4.0 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
		
		
			
		
	
	
			223 lines
		
	
	
		
			4.0 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
| 
								 | 
							
								body {
							 | 
						||
| 
								 | 
							
								    font-family: Arial, sans-serif;
							 | 
						||
| 
								 | 
							
								    background-color: #f4f4f4;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.dashboard-container {
							 | 
						||
| 
								 | 
							
								    max-width: 1200px;
							 | 
						||
| 
								 | 
							
								    margin: auto;
							 | 
						||
| 
								 | 
							
								    padding: 20px;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.header {
							 | 
						||
| 
								 | 
							
								    background-color: #20195e;
							 | 
						||
| 
								 | 
							
								    color: white;
							 | 
						||
| 
								 | 
							
								    padding: 10px 0;
							 | 
						||
| 
								 | 
							
								    text-align: center;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.section-header {
							 | 
						||
| 
								 | 
							
								    background-color: #f8f8f8;
							 | 
						||
| 
								 | 
							
								    padding: 10px;
							 | 
						||
| 
								 | 
							
								    border-left: 5px solid #20195e;
							 | 
						||
| 
								 | 
							
								    margin-bottom: 20px;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.card {
							 | 
						||
| 
								 | 
							
								    background-color: white;
							 | 
						||
| 
								 | 
							
								    padding: 15px;
							 | 
						||
| 
								 | 
							
								    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
							 | 
						||
| 
								 | 
							
								    margin-bottom: 20px;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.table-container {
							 | 
						||
| 
								 | 
							
								    overflow-x: auto;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								table {
							 | 
						||
| 
								 | 
							
								    width: 100%;
							 | 
						||
| 
								 | 
							
								    border-collapse: collapse;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								table th, table td {
							 | 
						||
| 
								 | 
							
								    padding: 12px;
							 | 
						||
| 
								 | 
							
								    text-align: left;
							 | 
						||
| 
								 | 
							
								    border-bottom: 1px solid #ddd;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								table th {
							 | 
						||
| 
								 | 
							
								    background-color: #f2f2f2;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.alert {
							 | 
						||
| 
								 | 
							
								    padding: 10px;
							 | 
						||
| 
								 | 
							
								    margin-bottom: 20px;
							 | 
						||
| 
								 | 
							
								    background-color: #f44336;
							 | 
						||
| 
								 | 
							
								    color: white;
							 | 
						||
| 
								 | 
							
								    position: relative;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.alert .close {
							 | 
						||
| 
								 | 
							
								    position: absolute;
							 | 
						||
| 
								 | 
							
								    right: 10px;
							 | 
						||
| 
								 | 
							
								    top: 50%;
							 | 
						||
| 
								 | 
							
								    transform: translateY(-50%);
							 | 
						||
| 
								 | 
							
								    color: white;
							 | 
						||
| 
								 | 
							
								    cursor: pointer;
							 | 
						||
| 
								 | 
							
								    font-weight: bold;
							 | 
						||
| 
								 | 
							
								    font-size: 18px;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.success {
							 | 
						||
| 
								 | 
							
								    padding: 10px;
							 | 
						||
| 
								 | 
							
								    margin-bottom: 20px;
							 | 
						||
| 
								 | 
							
								    background-color: #4CAF50;
							 | 
						||
| 
								 | 
							
								    color: white;
							 | 
						||
| 
								 | 
							
								    position: relative;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.success .close {
							 | 
						||
| 
								 | 
							
								    position: absolute;
							 | 
						||
| 
								 | 
							
								    right: 10px;
							 | 
						||
| 
								 | 
							
								    top: 50%;
							 | 
						||
| 
								 | 
							
								    transform: translateY(-50%);
							 | 
						||
| 
								 | 
							
								    color: white;
							 | 
						||
| 
								 | 
							
								    cursor: pointer;
							 | 
						||
| 
								 | 
							
								    font-weight: bold;
							 | 
						||
| 
								 | 
							
								    font-size: 18px;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.btn {
							 | 
						||
| 
								 | 
							
								    padding: 10px 15px;
							 | 
						||
| 
								 | 
							
								    background-color: #20195e;
							 | 
						||
| 
								 | 
							
								    color: white;
							 | 
						||
| 
								 | 
							
								    text-decoration: none;
							 | 
						||
| 
								 | 
							
								    border-radius: 5px;
							 | 
						||
| 
								 | 
							
								    display: inline-block;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.btn:hover {
							 | 
						||
| 
								 | 
							
								    background-color: #130d47;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.input-group {
							 | 
						||
| 
								 | 
							
								    margin-bottom: 20px;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.input-group label {
							 | 
						||
| 
								 | 
							
								    display: block;
							 | 
						||
| 
								 | 
							
								    margin-bottom: 5px;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.input-group input, .input-group select {
							 | 
						||
| 
								 | 
							
								    width: 100%;
							 | 
						||
| 
								 | 
							
								    padding: 10px;
							 | 
						||
| 
								 | 
							
								    border: 1px solid #ccc;
							 | 
						||
| 
								 | 
							
								    border-radius: 5px;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								/* Styling for the modern schedule */
							 | 
						||
| 
								 | 
							
								.schedule-container {
							 | 
						||
| 
								 | 
							
								    display: flex;
							 | 
						||
| 
								 | 
							
								    justify-content: center;
							 | 
						||
| 
								 | 
							
								    margin-top: 20px;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.schedule-table {
							 | 
						||
| 
								 | 
							
								    width: 100%;
							 | 
						||
| 
								 | 
							
								    max-width: 1200px;
							 | 
						||
| 
								 | 
							
								    border-collapse: collapse;
							 | 
						||
| 
								 | 
							
								    border: 1px solid #ddd;
							 | 
						||
| 
								 | 
							
								    background-color: white;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.schedule-table th,
							 | 
						||
| 
								 | 
							
								.schedule-table td {
							 | 
						||
| 
								 | 
							
								    border: 1px solid #ddd;
							 | 
						||
| 
								 | 
							
								    padding: 10px;
							 | 
						||
| 
								 | 
							
								    text-align: center;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.schedule-table th {
							 | 
						||
| 
								 | 
							
								    background-color: #4CAF50;
							 | 
						||
| 
								 | 
							
								    color: white;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.time-slot {
							 | 
						||
| 
								 | 
							
								    background-color: #f9f9f9;
							 | 
						||
| 
								 | 
							
								    font-weight: bold;
							 | 
						||
| 
								 | 
							
								    width: 70px;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.class {
							 | 
						||
| 
								 | 
							
								    background-color: #e3f2fd;
							 | 
						||
| 
								 | 
							
								    color: #333;
							 | 
						||
| 
								 | 
							
								    border-left: 5px solid #20195e;
							 | 
						||
| 
								 | 
							
								    text-align: left;
							 | 
						||
| 
								 | 
							
								    padding-left: 10px;
							 | 
						||
| 
								 | 
							
								    font-weight: bold;
							 | 
						||
| 
								 | 
							
								    position: relative;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.class span {
							 | 
						||
| 
								 | 
							
								    font-size: 0.9em;
							 | 
						||
| 
								 | 
							
								    color: #555;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.no-class {
							 | 
						||
| 
								 | 
							
								    background-color: #f9f9f9;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.week-navigation {
							 | 
						||
| 
								 | 
							
								    display: flex;
							 | 
						||
| 
								 | 
							
								    justify-content: space-between;
							 | 
						||
| 
								 | 
							
								    margin-bottom: 10px;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.week-navigation button {
							 | 
						||
| 
								 | 
							
								    padding: 10px 15px;
							 | 
						||
| 
								 | 
							
								    background-color: #5e3a19;
							 | 
						||
| 
								 | 
							
								    color: white;
							 | 
						||
| 
								 | 
							
								    border: none;
							 | 
						||
| 
								 | 
							
								    border-radius: 5px;
							 | 
						||
| 
								 | 
							
								    cursor: pointer;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.week-navigation button:hover {
							 | 
						||
| 
								 | 
							
								    background-color: #150f48;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.footer {
							 | 
						||
| 
								 | 
							
								    text-align: center;
							 | 
						||
| 
								 | 
							
								    padding: 10px 0;
							 | 
						||
| 
								 | 
							
								    margin-top: 20px;
							 | 
						||
| 
								 | 
							
								    background-color: #20195e;
							 | 
						||
| 
								 | 
							
								    color: white;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.dashboard-container {
							 | 
						||
| 
								 | 
							
								    max-width: 1200px;
							 | 
						||
| 
								 | 
							
								    margin: auto;
							 | 
						||
| 
								 | 
							
								    padding: 20px;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.header {
							 | 
						||
| 
								 | 
							
								    background-color: #20195e;
							 | 
						||
| 
								 | 
							
								    color: white;
							 | 
						||
| 
								 | 
							
								    padding: 10px 0;
							 | 
						||
| 
								 | 
							
								    display: flex;
							 | 
						||
| 
								 | 
							
								    justify-content: space-between;
							 | 
						||
| 
								 | 
							
								    align-items: center;
							 | 
						||
| 
								 | 
							
								    position: relative;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.logo-container img {
							 | 
						||
| 
								 | 
							
								    width: 200px;
							 | 
						||
| 
								 | 
							
								    height: 50px;
							 | 
						||
| 
								 | 
							
								    cursor: pointer;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.categories {
							 | 
						||
| 
								 | 
							
								    display: flex;
							 | 
						||
| 
								 | 
							
								    gap: 15px;
							 | 
						||
| 
								 | 
							
								    margin-left: 50px;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.categories a {
							 | 
						||
| 
								 | 
							
								    color: white;
							 | 
						||
| 
								 | 
							
								    text-decoration: none;
							 | 
						||
| 
								 | 
							
								    font-weight: bold;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.categories a:hover {
							 | 
						||
| 
								 | 
							
								    text-decoration: underline;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.user-section {
							 | 
						||
| 
								 | 
							
								    display: flex;
							 | 
						||
| 
								 | 
							
								    align-items: center;
							 | 
						||
| 
								 | 
							
								    margin-right: 20px;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.user-name {
							 | 
						||
| 
								 | 
							
								    margin-right: 15px;
							 | 
						||
| 
								 | 
							
								    font-size: 16px;
							 | 
						||
| 
								 | 
							
								    font-weight: bold;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.logout-container {
							 | 
						||
| 
								 | 
							
								    display: flex;
							 | 
						||
| 
								 | 
							
								    align-items: center;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								.logout-container img {
							 | 
						||
| 
								 | 
							
								    width: 25px;
							 | 
						||
| 
								 | 
							
								    height: 25px;
							 | 
						||
| 
								 | 
							
								    margin-left: 10px;
							 | 
						||
| 
								 | 
							
								    cursor: pointer;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 |