//---------Login Container---------
.login_container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	//---------Login Box---------
	#login {
		border: 2px solid var(--logo-color);
		padding: 10px;
		margin-top: 10rem;
		margin-bottom: 3.5rem;
		width: 50%;
		min-width: 270px !important;
		min-height: 420px;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 1px 5px 5px 2px rgba(0, 0, 0, 0.5);
		background: rgba(255, 233, 174, 0.8);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		border-radius: 10px;
		border: 1px solid rgba(255, 255, 255, 0.5);
		@media screen and (max-width: 850px) {
			margin-top: 10rem;
			margin-bottom: 3.5rem;
		}
		@media screen and (max-height: 555px) {
			margin-top: 150px;
			margin-bottom: 50px;
		}
		//---------Login Form---------
		form {
			width: 100%;
			height: 100%;
			min-height: 400px;
			padding: 10px;
			h2 {
				font-size: 2rem;
				font-weight: 600;
				color: var(--logo-color);
				margin: 10px 0;
				opacity: 0.7;
				text-align: center;
				@media screen and (max-width: 850px) {
					margin-bottom: 1.5rem;
				}
			}
			//---------Inputs---------
			.form-group {
				margin-bottom: 1rem;
				label {
					display: block;
					margin-bottom: 0.5rem;
					font-size: 1rem;
					font-weight: 600;
					color: var(--logo-color);
				}
				input {
					box-shadow: none;
					outline: none;
					border: none;
					border-radius: 0%;
					border-bottom: 1px solid var(--logo-color);
					background: transparent;
					color: var(--logo-color);
					font-weight: 400;
					letter-spacing: 0.02rem;
					&::placeholder {
						color: var(--logo-color);
						opacity: 0.7;
					}
					&:focus {
						box-shadow: none;
						outline: none;
						border-bottom: 1px solid var(--logo-color);
					}
				}
			}
			//---------Login Button---------
			.login-btn {
				margin: auto;
				margin-top: 1rem;
				width: 100%;
				padding: 0.5rem 1rem;
				font-size: 1rem;
				font-weight: 600;
				color: var(--accent-color);
				background-color: var(--logo-color);
				border: 1px solid var(--accent-color);
				border-radius: 10px;
				cursor: pointer;
				box-shadow: none;
				outline: none;
				border: none;
				&:focus {
					box-shadow: none;
					outline: none;
					border: none;
				}
			}
			.social-login {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-top: 30px;
				flex-wrap: wrap;
				@media screen and (max-width: 850px) {
					justify-content: center;
					gap: 2rem;
				}
				.btn {
					width: 40%;
					min-width: 50px;
					padding: 0.5rem 1rem;
					font-size: 1rem;
					font-weight: 600;
					color: var(--accent-color);
					background-color: var(--logo-color);
					border-radius: 10px;
					cursor: pointer;
					box-shadow: none;
					outline: none;
					border: none;
					&:focus {
						box-shadow: none;
						outline: none;
						border: none;
					}
					img {
						width: 20px;
						height: 20px;
						border: 50%;
					}
				}
				//---------Social Login Button---------
				.google-btn {
					min-width: 220px;
				}
				//---------Sign Up Button---------
				.signup-btn {
					@media screen and (max-width: 850px) {
						min-width: 220px;
					}
				}
			}
		}
	}
}

//---------Homepage Container---------
.homepage {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 10px;
	margin: auto;
	.banner {
		margin-top: 7rem;
		margin-bottom: 2rem;
		background-color: rgba(255, 167, 52, 0.8);
		border-radius: 10px;
		padding: 7px;
		word-spacing: 0.2rem;
		h2 {
			font-size: 2rem;
			font-weight: 700;
			color: var(--logo-color);
			margin: 5px 0;
			opacity: 0.8;
			text-align: center;
		}
	}
	//---------Dashboard---------
	.dashboard {
		width: 100%;
		height: 100%;
		border-radius: 10px;
		padding: 7px;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		@media screen and (max-width: 700px) {
			flex-direction: column;
			align-items: center;
		}
		.students {
			padding-right: 7px;
		}
		.interviews {
			padding-left: 7px;
		}
		//---------Student & Interviews Section---------
		.students,
		.interviews {
			@media screen and (max-width: 700px) {
				width: 100%;
			}
			width: 50%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 3rem;
			//---------Forms---------
			form {
				width: 100%;
				background-color: rgba(255, 245, 219, 0.85);
				border-radius: 10px;
				padding: 10px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				&.student-form,
				&.interview-form {
					margin-top: 1rem;
				}
				h4 {
					font-size: 1.5rem;
					font-weight: 700;
					color: var(--logo-color);
					margin: 5px 0;
					opacity: 0.8;
					text-align: center;
					margin: auto;
					margin-bottom: 1rem;
				}
				.form-group {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 1rem;
					padding: 0 10px;
					@media screen and (max-width: 410px) {
						flex-direction: column;
						justify-content: center;
					}
					label {
						font-size: 1rem;
						font-weight: 600;
						color: var(--logo-color);
					}
					//---------Inputs---------
					input,
					select {
						font-weight: 500;
						width: 65%;
						padding: 0.5rem 1rem;
						font-size: 1rem;
						color: var(--logo-color);
						background-color: var(--accent-color);
						border-radius: 10px;
						box-shadow: none;
						outline: none;
						border: none;
						&:focus {
							box-shadow: none;
							outline: none;
							border: none;
						}
						&::placeholder {
							font-size: 1rem;
							font-weight: 500;
							color: var(--logo-color);
							@media screen and (max-width: 410px) {
								text-align: center;
								margin: auto;
							}
						}
					}
				}
				//---------Buttons---------
				button {
					width: 100%;
					min-height: 40px;
					padding: 0.5rem 1rem;
					font-size: 1rem;
					font-weight: 700;
					color: var(--accent-color);
					background-color: var(--logo-color);
					border-radius: 10px;
					cursor: pointer;
					box-shadow: none;
					outline: none;
					border: none;
					&:focus {
						box-shadow: none;
						outline: none;
						border: none;
					}
				}
			}
			h3 {
				font-size: 2rem;
				font-weight: 700;
				color: var(--logo-color);
				margin: auto;
				margin-top: 1rem;
				opacity: 0.8;
				text-align: center;
				background-color: rgba(255, 167, 52, 0.8);
				border-radius: 10px;
				padding: 7px;
				word-spacing: 0.2rem;
			}
			//---------Accordion---------
			.accordion {
				margin-top: 2rem;
				width: 100% !important;
				.accordion-item {
					width: 100% !important;
					margin-bottom: 1rem;
					h2 {
						margin: 0 auto;
						width: 100%;
						button {
							transition: all 0.15s ease-in-out !important;
							font-size: 1.3rem;
							font-weight: 700;
							font-family: var(--font-family);
							color: var(--logo-color);
							word-break: break-all;
							&:focus {
								box-shadow: none;
								outline: none;
								border: none;
							}
							&::after {
								content: none;
							}
						}
					}
					//---------Accordion Body---------
					.accordion-body {
						width: 100% !important;
						img {
							min-width: 100px;
							min-height: 100px;
							max-width: 150px;
							max-height: 150px;
							margin: auto;
							display: block;
							margin-bottom: 2rem;
							-o-object-fit: cover;
							object-fit: cover;
							-o-object-position: center;
							object-position: center;
						}
						//---------Interview Data---------
						.interview-data {
							width: 100% !important;
							position: relative;
							p {
								padding: 0 1rem;
								color: var(--logo-color);
								margin: 0.5rem auto;
								font-size: 1.2rem;
								font-weight: 500;
								display: flex;
								justify-content: center;
								align-items: center;
								@media screen and (max-width: 330px) {
									justify-content: flex-start;
								}
							}
							border-bottom: 1px solid var(--logo-color);
							//---------Delete Btn---------
							.fa-trash {
								@media screen and (max-width: 330px) {
									font-size: 1.1rem;
									top: 15%;
								}
								position: absolute;
								top: 5%;
								right: 1%;
								font-size: 1.25rem;
								cursor: pointer;
								transition: all 0.15s ease-in-out;
								&:hover {
									color: rgb(33, 180, 22);
								}
							}
						}
						//---------Student's List---------
						.students-list {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							width: 100%;
							margin: 1rem 0 0.5rem 0;
							h5 {
								font-size: 1.4rem;
								font-weight: 700;
								color: var(--logo-color);
								margin: 0.5rem auto;
								text-align: center;
							}
							& + p {
								font-size: 2rem;
								font-weight: 600;
								color: var(--logo-color);
								margin: 0.5rem auto;
								text-align: center;
								i {
									transition: all 0.15s ease-in-out;
									cursor: pointer;
									&:hover {
										color: rgb(33, 180, 22);
									}
								}
							}
							//---------Interview Slots---------
							form {
								width: 100%;
								height: 100%;
								display: flex;
								flex-direction: column;
								justify-content: flex-start;
								align-items: flex-start;
								background: transparent;
								.student {
									width: 100%;
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: center;
									&:first-child {
										margin-top: 1.2rem;
									}
									margin-bottom: 1.5rem;
									.fixed {
										width: 100%;
										display: flex;
										justify-content: space-between;
										align-items: center;
										flex-wrap: wrap;
										gap: 1rem;
										@media screen and (max-width: 400px) {
											justify-content: center;
										}
										p {
											&:not(strong) {
												font-weight: 500;
											}
											font-size: 1.2rem;
											color: var(--logo-color);
											text-align: center;
											margin: 0;
											text-transform: capitalize;
											span {
												text-transform: capitalize;
											}
										}
									}
									.form-group {
										width: 100%;
										select {
											width: 100%;
										}
									}
									//---------Interview CRUD Buttons---------
									button {
										width: 100%;
										font-size: 1rem;
										font-weight: 700;
										color: var(--accent-color);
										background-color: var(--logo-color);
										transition: all 0.15s ease-in-out;
										margin-bottom: 1rem;
										min-height: 40px;
										&.edit-student-interview {
											background-color: rgb(142, 236, 142);
											color: var(--logo-color);
											margin-top: 1rem;
										}
										&.delete-student-interview {
											background-color: rgb(236, 142, 142);
											color: var(--logo-color);
										}
										&.delete-interview-slot {
											background-color: rgb(236, 142, 142);
											color: var(--logo-color);
										}
									}
								}
							}
						}
						//---------Student Data---------
						.student-data {
							width: 100% !important;
							p {
								padding: 0 1rem;
								color: var(--logo-color);
								margin: 0.5rem auto;
								font-size: 1.1rem;
								font-weight: 500;
								display: flex;
								justify-content: space-between;
								align-items: center;
								text-transform: capitalize;
								@media screen and (max-width: 370px) {
									font-size: 0.9rem;
								}
							}
						}
						//---------Student Interviews---------
						.student-interviews {
							width: 100% !important;
							margin-bottom: 1rem;
							//---------Student Table---------
							table {
								width: 100% !important;
								caption {
									font-size: 1.5rem;
									font-weight: 700;
									color: var(--logo-color);
									margin: 1rem auto;
									opacity: 0.8;
									text-align: center;
									word-spacing: 0.2rem;
									border-top: 3px solid var(--logo-color);
									border-bottom: 3px solid var(--logo-color);
								}
								tr,
								th {
									text-transform: capitalize;
								}
							}
						}
						button {
							width: 100%;
							min-height: 40px;
							padding: 0.5rem 1rem;
							font-size: 1rem;
							font-weight: 600;
							color: var(--logo-color);
							font-weight: 700;
							background-color: rgb(236, 142, 142);
							border-radius: 10px;
							cursor: pointer;
							box-shadow: none;
							outline: none;
							border: none;
							margin-bottom: 1.5rem;
							transition: all 0.15s ease-in-out !important;
							&:focus {
								box-shadow: none;
								outline: none;
								border: none;
							}
						}
					}
				}
			}
		}
	}
}

//---------Accordion Classes---------
.accordion-button:focus {
	border: none;
	outline: none;
	box-shadow: none;
}
.accordion-item {
	border: none;
	box-shadow: none;
	outline: none;
	background-color: transparent;
}
.accordion-collapse {
	background-color: rgba(255, 245, 219, 0.85);
}
.accordion-header,
.accordion-button {
	background-color: var(--background-color);
	border-radius: 10px !important;
	transition: all 0.15s ease-in-out !important;
	.round {
		transition: all 0.15s ease-in-out !important;
		border-bottom-left-radius: 0px !important;
		border-bottom-right-radius: 0px !important;
	}
}
.accordion-button:not(.collapsed) {
	transition: all 0.15s ease-in-out;
	color: var(--logo-color);
	background-color: var(--background-color);
	box-shadow: none;
}
