:root {
	--color-red: 220, 53, 69;
	--color-green: 25, 135, 84;
	--color-blue: 13, 110, 253;
	--color-yellow: 255, 193, 7;
	--color-cyan: 13, 202, 240;
	--color-purple: 111, 66, 193;
	--color-orange: 253, 126, 20;
	--color-pink: 214, 51, 132;
	--color-indigo: 102, 16, 242;
	--color-teal: 32, 201, 151;
	--color-black: 0, 0, 0;
	--color-dark: 33, 37, 41;
	--color-gray: 108, 117, 125;
	--color-light: 248, 249, 250;
	--color-white: 255, 255, 255;
	--lesson-status-color: 0, 0, 0;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	-webkit-user-drag: none !important;
	user-select: none !important;
}

html {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
}

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

@keyframes bounce-vertical {
	0% {
		transform: translateY(-50%);
	}
	50% {
		transform: translateY(50%);
	}
	100% {
		transform: translateY(-50%);
	}
}

@keyframes bounce-horizontal {
	0% {
		transform: translateX(-50%);
	}
	50% {
		transform: translateX(50%);
	}
	100% {
		transform: translateX(-50%);
	}
}

@keyframes move-ellipse {
	0% {
		transform: translate(-50%, -50%) translateX(calc(40vw)) translateY(0);
	}
	25% {
		transform: translate(-50%, -50%) translateX(0) translateY(calc(30vh));
	}
	50% {
		transform: translate(-50%, -50%) translateX(calc(-40vw)) translateY(0);
	}
	75% {
		transform: translate(-50%, -50%) translateX(0) translateY(calc(-30vh));
	}
	100% {
		transform: translate(-50%, -50%) translateX(calc(40vw)) translateY(0);
	}
}

@keyframes move-circle {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes spin-transform-rotate {
	to {
		transform: rotate(360deg);
	}
}

@keyframes spin-change-colors {
	0% {
		border-color: rgb(var(--color-red)) transparent;
	}
	10% {
		border-color: rgb(var(--color-green)) transparent;
	}
	20% {
		border-color: rgb(var(--color-blue)) transparent;
	}
	30% {
		border-color: rgb(var(--color-yellow)) transparent;
	}
	40% {
		border-color: rgb(var(--color-cyan)) transparent;
	}
	50% {
		border-color: rgb(var(--color-purple)) transparent;
	}
	60% {
		border-color: rgb(var(--color-orange)) transparent;
	}
	70% {
		border-color: rgb(var(--color-pink)) transparent;
	}
	80% {
		border-color: rgb(var(--color-indigo)) transparent;
	}
	90% {
		border-color: rgb(var(--color-teal)) transparent;
	}
	100% {
		border-color: rgb(var(--color-gray)) transparent;
	}
}

@keyframes spinner-hourglass-flip {
	from, 90% {
		transform: rotate(0);
	}
	to {
		transform: rotate(180deg);
	}
}

@keyframes spinner-hourglass-fill {
	from {
		clip-path: polygon(0% 0%, 100% 0%, 100% 24%, 50% 47%, 50% 47%, 50% 47%, 50% 47%, 50% 47%, 50% 47%, 50% 47%, 50% 47%, 0% 24%);
	}
	10% {
		clip-path: polygon(0% 4%, 100% 4%, 100% 24%, 55% 45%, 55% 100%, 55% 100%, 55% 100%, 45% 100%, 45% 100%, 45% 100%, 45% 45%, 0% 24%);
	}
	45% {
		clip-path: polygon(0% 24%, 100% 24%, 100% 24%, 55% 45%, 55% 80%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 45% 80%, 45% 45%, 0% 24%);
	}
	80% {
		clip-path: polygon(45% 45%, 55% 45%, 55% 45%, 55% 45%, 55% 58%, 100% 76%, 100% 100%, 0% 100%, 0% 76%, 45% 58%, 45% 45%, 45% 45%);
	}
	85%, to {
		clip-path: polygon(50% 53%, 50% 53%, 50% 53%, 50% 53%, 50% 53%, 100% 76%, 100% 100%, 0% 100%, 0% 76%, 50% 53%, 50% 53%, 50% 53%);
	}
}

@keyframes spinner-hourglass-glare {
	from, 90% {
		transform: translateX(0);
	}
	to {
		transform: translateX(3em);
	}
}

@keyframes lesson-status-scroll {
	0% {
		transform: translateX(calc(50% + 250px));
	}
	100% {
		transform: translateX(calc(-50% - 350px));
	}
}

@keyframes lesson-status-icon-glow {
	0%, 100% {
		opacity: 0.5;
		filter: brightness(0.75) drop-shadow(0 0 5px rgba(255, 255, 255, 0.25));
	}
	50% {
		opacity: 1;
		filter: brightness(1.1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
	}
}

@keyframes lesson-status-led-glow {
	0%, 100% {
		opacity: 0.5;
		filter: brightness(0.75) drop-shadow(0 0 5px rgba(var(--lesson-status-color), 0.25));
	}
	50% {
		opacity: 1;
		filter: brightness(1.1) drop-shadow(0 0 5px rgba(var(--lesson-status-color), 0.75)) drop-shadow(0 0 10px rgba(var(--lesson-status-color), 0.5));
	}
}

@keyframes fade-from-bottom {
    0% {
        opacity: 0;
        transform: translateY(25px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-from-top {
    0% {
        opacity: 0;
        transform: translateY(-25px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-from-left {
    0% {
        opacity: 0;
        transform: translateX(-250px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-from-right {
    0% {
        opacity: 0;
        transform: translateX(250px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes transform-panel {
	0%, 0.83% {
		animation: blur-fade-sharp 0.5s linear;
	}
	0.83%, 99.17% {
		filter: blur(0) brightness(1) contrast(1);
	}
	99.17%, 100% {
		animation: sharp-fade-blur 0.5s linear;
	}
}

@keyframes blur-fade-sharp {
	0% {
		filter: blur(5px) brightness(0.5) contrast(0.5);
	}
	100% {
		filter: blur(0) brightness(1) contrast(1);
	}
}

@keyframes sharp-fade-blur {
	0% {
		filter: blur(0) brightness(1) contrast(1);
	}
	100% {
		filter: blur(5px) brightness(0.5) contrast(0.5);
	}
}

@keyframes vertical-scroll {
	0%, 8.33% {
		transform: translateY(0);
	}
	91.67% {
		transform: translateY(calc(-100% + 860px));
	}
	100% {
		transform: translateY(calc(-100% + 860px));
	}
}

@keyframes slide-from-left {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-show {
    from {
        opacity: 0;
		transform: scale(0.8);
		transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    to {
        opacity: 1;
		transform: scale(1);
    }
}

.background {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
	top: 0;
	left: 0;
	background: linear-gradient(40deg, rgb(108, 0, 162), rgb(0, 17, 82));
}

.gradient-background {
	filter: url(#gradientBackground) blur(40px);
	width: 100%;
	height: 100%;
}

.gradient-background-1,
.gradient-background-2,
.gradient-background-3,
.gradient-background-4,
.gradient-background-5 {
	position: absolute;
	mix-blend-mode: hard-light;
	opacity: 1;
}

.gradient-background-1 {
	background: radial-gradient(circle at center, rgba(18, 113, 255, 0.8) 0, rgba(18, 113, 255, 0) 50%) no-repeat;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transform-origin: center center;
	animation: bounce-vertical 40s linear infinite;
}

.gradient-background-2 {
	background: radial-gradient(circle at center, rgba(200, 50, 50, 0.8) 0, rgba(200, 50, 50, 0) 50%) no-repeat;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transform-origin: center center;
	animation: bounce-horizontal 45s ease infinite;
}

.gradient-background-3 {
	background: radial-gradient(circle at center, rgba(221, 74, 255, 0.8) 0, rgba(221, 74, 255, 0) 50%) no-repeat;
	width: 80%;
	height: 80%;
	top: 50%;
	left: 50%;
	transform-origin: center center;
	animation: move-ellipse 30s reverse infinite;
}

.gradient-background-4 {
	background: radial-gradient(circle at center, rgba(100, 220, 255, 0.8) 0, rgba(100, 220, 255, 0) 50%) no-repeat;
	width: 80%;
	height: 80%;
	top: calc(10% + 200px);
	left: calc(10% - 500px);
	transform-origin: calc(50% + 400px);
	animation: move-circle 50s linear infinite;
}

.gradient-background-5 {
	background: radial-gradient(circle at center, rgba(180, 180, 50, 0.8) 0, rgba(180, 180, 50, 0) 50%) no-repeat;
	width: 200%;
	height: 200%;
	top: -50%;
	left: -50%;
	transform-origin: calc(50% - 1000px) calc(50% + 100px);
	animation: move-circle 60s ease infinite;
}

.main-container {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 1920px;
	height: 1080px;
	padding: 20px;
	margin: 0 auto;
	margin-left: auto;
	margin-top: auto;
	box-sizing: border-box;
	transform-origin: center;
}

.header {
	background: linear-gradient(to top, #1e3c72, #2a5298);
	background-image: linear-gradient(#33f, #09f);
	background: linear-gradient(to bottom, rgba(173, 216, 230, 0.25) 0%, rgba(100, 149, 237, 0.4) 20%, rgba(30, 144, 255, 0.6) 50%, rgba(25, 25, 112, 0.8) 80%, rgba(0, 0, 139, 0.95) 100%);
	padding: 20px;
	border-radius: 15px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.75);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	margin-bottom: 15px;
	border: 2px outset rgba(0, 154, 205, 0.75);
	border-top: 1px outset rgba(0, 154, 205, 0.75);
}

.glass-effect {
	position: relative;
	overflow: hidden;
}

.glass-effect::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
	z-index: 1;
}

.left-logo,
.right-logo {
	width: 72px;
	height: 72px;
	background-color: #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 3px solid #e0e0e0;
	flex-shrink: 0;
	border-radius: 36px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: auto;
	object-fit: cover;
}

.left-logo {
	margin-left: 60px;
	background-image: url("../img/okul-logo.png");
}

.right-logo {
	margin-right: 60px;
	background-image: url("../img/meb-logo.png");
}

.header-text {
	flex-grow: 1;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-family: 'Times New Roman';
	font-size: 48px;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 5px;
	color: color-mix(in srgb, rgba(221, 221, 221, 1), rgba(0, 0, 0, 0.5) 10%);
	text-shadow: -1px -1px 1px rgb(13, 110, 253), -1px -1px 2px rgb(0, 0, 0), -1px 1px 1px rgb(13, 110, 253), -1px 1px 2px rgb(0, 0, 0), 1px -1px 1px rgb(13, 110, 253), 1px -1px 2px rgb(0, 0, 0), 1px 1px 1px rgb(13, 110, 253), 1px 1px 2px rgb(0, 0, 0);
}

.main-content {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	grid-template-rows: auto auto auto;
	gap: 15px;
	margin-bottom: 10px;
}

.left-side-panels {
	display: flex;
	flex-direction: column;
	gap: 15px;
	grid-row: 1 / span 3;
	width: 370px;
}

.datetime-panel {
	background-color: transparent;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	text-align: center;
	overflow: hidden;
}

.datetime-title {
	background-color: #0d6efd;
	font-size: 24px;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 2px;
	color: #ddd;
	border-bottom: 2px solid rgba(7, 91, 217, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 7px;
}

.datetime-title::before {
	content: "";
	width: 32px;
	height: 32px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: auto;
	object-fit: cover;
	background-image: url("../img/date-time.png");
}

.datetime-content {
	display: flex;
	flex-direction: column;
	padding: 0;
}

.date-main {
	width: 370px;
	height: 57px;
	padding: 0 0 5px 0;
	margin: 0 0 -8px 0;
	border: 1px solid #2a4a7a;
	background: linear-gradient(-45deg, rgb(70, 110, 170) 0%, rgb(40, 70, 130) 100%);
	box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.5);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.date-letter {
	width: 21px;
	height: 36px;
	font-family: 'Typo Digit';
	font-weight: bold;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #ccc;
	background: linear-gradient(to bottom, rgb(50, 90, 150) 0%, rgb(80, 120, 180) 25%, rgb(50, 90, 150) 50%, rgb(80, 120, 180) 75%, rgb(50, 90, 150) 100%);
	padding: 0;
	line-height: 32px;
	text-shadow: 0 1px 1px #a0c0ff;
	margin: 0 1px;
	float: left;
	border-radius: 5px;
	border: 2px solid #2a4a7a;
}

.time-main {
	width: 370px;
	height: 103px;
	border: 1px solid #2a4a7a;
	background: linear-gradient(-45deg, rgb(70, 110, 170) 0%, rgb(40, 70, 130) 100%);
	box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.5);
	position: relative;
	padding: 0;
	margin-bottom: -16px;
}

.time-clock {
	width: 460px;
	height: 95px;
	font-family: 'DS-DIGIB';
	font-weight: bold;
	font-style: normal;
	font-size: 36px;
	text-align: center;
	color: #1e3c72;
	transform: scale(0.75);
	top: -6px;
	left: -50px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
	margin: 0 5px;
}

.flip-clock-wrapper ul li a div div.inn {
	background-color: #213f62;
}

.flip-clock-dot {
	background-color: #ccc;
}

.flip-clock-label {
	display: none;
}

.weekday-main {
	width: 370px;
	height: 64px;
	padding: 5px;
	margin: 0;
	border: 1px solid #2a4a7a;
	background: linear-gradient(-45deg, rgb(70, 110, 170) 0%, rgb(40, 70, 130) 100%);
	box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.5);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0 0 10px 10px;
}

.weekday-letter {
	width: 32px;
	height: 48px;
	font-family: 'Typo Digit';
	font-weight: bold;
	font-size: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #ccc;
	background: linear-gradient(to bottom, rgb(50, 90, 150) 0%, rgb(80, 120, 180) 25%, rgb(50, 90, 150) 50%, rgb(80, 120, 180) 75%, rgb(50, 90, 150) 100%);
	padding: 0;
	line-height: 32px;
	text-shadow: 0 1px 1px #a0c0ff;
	margin: 0 1px;
	float: left;
	border-radius: 5px;
	border: 2px solid #2a4a7a;
}

.lesson-status-panel {
	background-color: transparent;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	text-align: center;
	overflow: hidden;
}

.lesson-status-title {
	background-color: #0d6efd;
	font-size: 24px;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 2px;
	color: #ddd;
	border-bottom: 2px solid rgba(7, 91, 217, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 7px;
}

.lesson-status-title::before {
	content: "";
	width: 32px;
	height: 32px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: auto;
	object-fit: cover;
	background-image: url("../img/timetable.png");
}

.lesson-status-content {
	display: flex;
	flex-direction: row;
	padding: 0;
	margin: 0;
	width: 370px;
	height: 81px;
	position: relative;
	align-items: center;
	justify-content: center;
	border: 1px solid #1a3a6a;
	border-radius: 0 0 10px 10px;
	background: linear-gradient(-45deg, rgb(50, 90, 150) 0%, rgb(30, 50, 110) 100%);
	box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	word-spacing: 15px;
}

.lesson-status-content.lesson-not .status-content,
.lesson-status-content.lesson-not .status-number,
.lesson-status-content.lesson-not .time-value {
	--lesson-status-color: 255, 0, 255;
}

.lesson-status-content.lesson-start .status-content,
.lesson-status-content.lesson-start .status-number,
.lesson-status-content.lesson-start .time-value {
	--lesson-status-color: 255, 0, 0;
}

.lesson-status-content.break-bell .status-content-lesson-info-time,
.lesson-status-content.break-bell .status-number,
.lesson-status-content.break-bell .time-value {
	--lesson-status-color: 0, 255, 0;
}

.lesson-status-content.lesson-bell .status-content-lesson-info-time,
.lesson-status-content.lesson-bell .status-number,
.lesson-status-content.lesson-bell .time-value {
	--lesson-status-color: 255, 255, 0;
}

.lesson-status-content.lunch-break .status-content-lesson-info-time,
.lesson-status-content.lunch-break .status-number,
.lesson-status-content.lunch-break .time-value {
	--lesson-status-color: 0, 255, 255;
}

.lesson-status-content.lesson-start .status-icon {
	background-image: url("../img/lesson-start.png");
}

.lesson-status-content.break-bell .status-icon {
	background-image: url("../img/break-bell.png");
}

.lesson-status-content.lesson-bell .status-icon {
	background-image: url("../img/lesson-bell.png");
}

.lesson-status-content.lunch-break .status-icon {
	background-image: url("../img/lunch-break.png");
}

.status-content,
.status-number,
.time-value {
	font-family: 'CAT-Arena';
	font-weight: normal;
	font-style: normal;
	font-size: 86px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	color: rgb(var(--lesson-status-color));
	text-shadow: 0 0 10px rgb(var(--lesson-status-color)), 0 0 20px rgb(var(--lesson-status-color));
	animation: lesson-status-led-glow 2s 3 ease-in-out;
}

.status-content-lesson-info-time {
	font-size: 72px;
	display: inline-block;
	white-space: nowrap;
	animation: lesson-status-scroll 10s linear 1;
	line-height: 1;
}

.status-content-lesson-info-time-symbol {
	position: relative;
	top: -9px;
}

.status-icon {
	width: 64px;
	height: 64px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	animation: lesson-status-icon-glow 2s 3 ease-in-out;
	margin: 10px;
}

.status-content-lesson-info {
	font-size: 48px;
	line-height: 0.75;
	white-space: pre-line;
}

.weather-panel {
	background-color: transparent;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	text-align: center;
	overflow: hidden;
}

.weather-title {
	background-color: #0d6efd;
	font-size: 24px;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 2px;
	color: #ddd;
	border-bottom: 2px solid rgba(7, 91, 217, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 7px;
}

.weather-title::before {
	content: "";
	width: 32px;
	height: 32px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: auto;
	object-fit: cover;
	background-image: url("../img/weather.png");
}

.weather-content {
	width: 100%;
	height: 170px;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	background-color: #f8f8f8;
    justify-content: space-between;
    align-items: center;
}

.weather-left,
.weather-right {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.weather-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 128px;
	height: 128px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 5px 5px 0 5px;
	margin-top: 5px;
}

.weather-condition {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: #1e3c72;
	text-transform: capitalize;
	width: 100%;
	height: 100%;
	line-height: 1;
	padding: 0 5px 5px 5px;
	margin-bottom: 15px;
}

.weather-temp {
	font-weight: 700;
	color: #2a5298;
	margin-right: 10px;
	font-size: 58px;
	height: 108px;
}

.weather-details {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 5px;
}

.weather-wind-speed,
.weather-humidity,
.weather-feels-like {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 50px;
	height: 50px;
	background-size: 32px 32px;
	background-position: top center;
	background-repeat: no-repeat;
	font-size: 12px;
	color: #666;
	font-weight: bold;
}

.weather-wind-speed {
	background-image: url("../img/wind.png");
}

.weather-humidity {
	background-image: url("../img/humidity.png");
}

.weather-feels-like {
	background-image: url("../img/temperature.png");
}

.islamic-panel {
	background-color: transparent;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	text-align: center;
	overflow: hidden;
}

.islamic-title {
	background-color: #0d6efd;
	font-size: 24px;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 2px;
	color: #ddd;
	border-bottom: 2px solid rgba(7, 91, 217, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 7px;
}

.islamic-title::before {
	content: "";
	width: 32px;
	height: 32px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: auto;
	object-fit: cover;
	background-image: url("../img/islamic-information.png");
}

.islamic-content {
	display: flex;
	flex-direction: column;
	background-color: #eeeeee;
	height: 208px;
	padding: 5px;
}

.islamic-section {
	padding: 0 3px;
	border-bottom: 1px solid #d0d0d0;
	height: 69px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.islamic-section:last-child {
	border-bottom: none;
}

.islamic-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.islamic-verse-title,
.islamic-hadith-title,
.islamic-prayer-title {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: #2c5e8c;
	font-weight: 600;
}

.islamic-verse-title::before,
.islamic-hadith-title::before,
.islamic-prayer-title::before {
	content: "";
	width: 15px;
	height: 15px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: auto;
	object-fit: cover;
	margin-right: 3px;
}

.islamic-verse-title::before {
	background-image: url("../img/verse.png");
}

.islamic-hadith-title::before {
	background-image: url("../img/hadith.png");
}

.islamic-prayer-title::before {
	background-image: url("../img/prayer.png");
}

.islamic-source {
	font-size: 10px;
	font-style: italic;
	color: #888;
	margin-right: 3px;
}

.islamic-text {
	font-size: 12px;
	line-height: 1.25;
	color: #333;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	text-align: justify;
	padding: 0 5px;
}

.center-panels {
	display: flex;
	flex-direction: column;
	gap: 15px;
	grid-row: 1 / span 3;
	width: 1110px;
}

.activities-panel {
	background-color: transparent;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	text-align: center;
	overflow: hidden;
}

.activities-title {
	background-color: #0d6efd;
	font-size: 24px;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 2px;
	color: #ddd;
	border-bottom: 2px solid rgba(7, 91, 217, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 7px;
}

.activities-title::before {
	content: "";
	width: 32px;
	height: 32px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: auto;
	object-fit: cover;
	background-image: url("../img/activities.png");
}

.activities-content {
	display: flex;
	flex-direction: column;
	padding: 0;
	height: 668px;
	background-color: #000;
}

.camera_wrap {
	text-align: left;
}

.camera_wrap iframe {
	width: 100%;
	height: 100%;
	border: none;
}

.camera_target_content {
	overflow: visible;
}

.camera_bar {
	bottom: -2px;
}

.camera_caption {
	top: 624px;
}

.camera_caption div {
	background-color: transparent;
	padding-left: 12px;
	padding-right: 12px;
}

.camera-caption-animation-fade-from-bottom {
	animation: fade-from-bottom 1s ease-out forwards;
}

.camera-caption-animation-fade-from-top {
	animation: fade-from-top 1s ease-out forwards;
}

.camera-caption-animation-fade-from-left {
	animation: fade-from-left 1s ease-out forwards;
}

.camera-caption-animation-fade-from-right {
	animation: fade-from-right 1s ease-out forwards;
}

.announcements-panel {
	background-color: transparent;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	text-align: center;
	overflow: hidden;
}

.announcements-title {
	background-color: #0d6efd;
	font-size: 24px;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 2px;
	color: #ddd;
	border-bottom: 2px solid rgba(7, 91, 217, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 7px;
}

.announcements-title::before {
	content: "";
	width: 32px;
	height: 32px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: auto;
	object-fit: cover;
	background-image: url("../img/announcements.png");
}

.announcements-content {
	display: flex;
	flex-direction: column;
	padding: 0;
	width: 100%;
	height: 125px;
	background-color: #eee;
	overflow: hidden;
	position: relative;
}

.announcements-content::before,
.announcements-content::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	height: var(--announcements-content-before-after-height, 30px);
	pointer-events: none;
	z-index: 10;
}

.announcements-content::before {
	top: 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.announcements-content::after {
	bottom: 0;
	background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.announcements {
	position: absolute;
	width: 100%;
	height: 100%;
}

.announcement-item {
	padding: 10px 15px 15px 5px;
	border-bottom: 1px solid #ccc;
	position: relative;
	display: flex;
	flex-direction: column;
	transition: all 0.3s ease;
}
.announcement-item:nth-last-child(2) {
	border-bottom: none;
}

.announcement-item-order {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 10px;
	font-weight: 500;
	padding: 3px 7px;
	margin-top: 5px;
	margin-right: auto;
	border-radius: 5px;
	margin: 5px auto 0 3px;
	color: white;
	text-align: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease;
	background: linear-gradient(180deg, color-mix(in srgb, rgb(var(--color-cyan)), rgb(var(--color-white)) 50%) 0%, color-mix(in srgb, rgb(var(--color-cyan)), rgb(var(--color-black)) 50%) 100%);
}

.announcement-item-content {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
}

.announcement-item-icon {
	font-size: 32px;
	flex-shrink: 0;
	width: 50px;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
}

.announcement-item-text {
	font-size: 20px;
	line-height: 1.5;
	text-align: justify;
	display: flex;
	align-items: center;
	justify-content: left;
	flex: 1;
}

.announcement-item-text-color-blue {
	color: #0d6efd;
}

.announcement-item-text-color-indigo {
	color: #6610f2;
}

.announcement-item-text-color-purple {
	color: #6f42c1;
}

.announcement-item-text-color-pink {
	color: #d63384;
}

.announcement-item-text-color-red {
	color: #dc3545;
}

.announcement-item-text-color-orange {
	color: #fd7e14;
}

.announcement-item-text-color-yellow {
	color: #ffc107;
}

.announcement-item-text-color-green {
	color: #198754;
}

.announcement-item-text-color-teal {
	color: #20c997;
}

.announcement-item-text-color-cyan {
	color: #0dcaf0;
}

.announcement-item-date {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 10px;
	font-weight: 500;
	padding: 3px 7px;
	margin-top: 5px;
	margin-left: auto;
	border-radius: 5px;
	color: white;
	text-align: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease;
}

.announcement-item-date-today {
	background: linear-gradient(180deg, color-mix(in srgb, rgb(var(--color-green)), rgb(var(--color-white)) 60%) 0%, color-mix(in srgb, rgb(var(--color-green)), rgb(var(--color-black)) 40%) 100%);
}

.announcement-item-date-yesterday {
	background: linear-gradient(180deg, color-mix(in srgb, rgb(var(--color-blue)), rgb(var(--color-white)) 60%) 0%, color-mix(in srgb, rgb(var(--color-blue)), rgb(var(--color-black)) 40%) 100%);
}

.announcement-item-date-week {
	background: linear-gradient(180deg, color-mix(in srgb, rgb(var(--color-yellow)), rgb(var(--color-white)) 30%) 0%, color-mix(in srgb, rgb(var(--color-yellow)), rgb(var(--color-black)) 30%) 100%);
}

.announcement-item-date-old {
	background: linear-gradient(180deg, color-mix(in srgb, rgb(var(--color-red)), rgb(var(--color-white)) 60%) 0%, color-mix(in srgb, rgb(var(--color-red)), rgb(var(--color-black)) 40%) 100%);
}

.right-side-panels {
	display: flex;
	flex-direction: column;
	gap: 15px;
	grid-row: 1 / span 3;
	position: relative;
	width: 370px;
}

.duty-teacher-lesson-timetable {
	display: flex;
	flex-direction: column;
	gap: 15px;
	grid-row: 1 / span 3;
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	filter: blur(5px) brightness(0.5) contrast(0.5);
	animation: transform-panel 60s infinite linear;
}

.duty-teacher-panel {
	background-color: transparent;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	text-align: center;
	overflow: hidden;
}

.duty-teacher-title {
	background-color: #0d6efd;
	font-size: 24px;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 2px;
	color: #ddd;
	border-bottom: 2px solid rgba(7, 91, 217, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 7px;
}

.duty-teacher-title::before {
	content: "";
	width: 32px;
	height: 32px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: auto;
	object-fit: cover;
	background-image: url("../img/duty-teachers.png");
}

.duty-teacher-content {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	background-color: #ddd;
	height: 423px;
	max-height: 423px;
}

.duty-teacher-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	transition: all 0.3s;
	height: 47px;
	min-height: 47px;
	animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.duty-teacher-item:first-child {
	background-color: #156082 !important;
}

.duty-teacher-item:nth-child(2n + 1) {
	background-color: #94DCF8;
}

.duty-teacher-item:nth-child(2n) {
	background-color: #CAEDFB;
}

.duty-teacher-item:last-child {
	background-color: #0F9ED5 !important;
}

.duty-teacher-item:first-child *,
.duty-teacher-item:last-child * {
	color: #fff !important;
}

.duty-teacher-place {
	text-align: center;
	width: 75%;
	padding-right: 5px;
	color: #000;
	font-size: 15px;
    font-weight: bold;
}

.duty-teacher-name {
	width: 100%;
	padding-left: 5px;
	text-align: center;
	color: #000;
	font-size: 15px;
}

.lesson-timetable-panel {
	background-color: transparent;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	text-align: center;
	overflow: hidden;
}

.lesson-timetable-title {
	background-color: #0d6efd;
	font-size: 24px;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 2px;
	color: #ddd;
	border-bottom: 2px solid rgba(7, 91, 217, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 7px;
}

.lesson-timetable-title::before {
	content: "";
	width: 32px;
	height: 32px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: auto;
	object-fit: cover;
	background-image: url("../img/lesson-timetables.png");
}

.lesson-timetable-content {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	background-color: #ddd;
	height: 370px;
	max-height: 370px;
}

.lesson-timetable-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	transition: all 0.3s;
	height: var(--lesson-timetable-item-height);
	animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.lesson-timetable-item:nth-child(2n + 1) {
	background-color: #94DCF8;
}

.lesson-timetable-item:nth-child(2n) {
	background-color: #CAEDFB;
}

.lesson-timetable-lunch-break {
	background-color: #0F9ED5 !important;
	width: 100%;
}

.lesson-timetable-lunch-break * {
	color: #fff !important;
}

.lesson-timetable-place {
	text-align: center;
	width: 100%;
	padding-right: 5px;
	color: #000;
	font-size: 15px;
    font-weight: bold;
}

.lesson-timetable-name {
	width: 100%;
	padding-left: 5px;
	text-align: center;
	color: #000;
	font-size: 15px;
}

.classes-lesson-panel {
	display: flex;
	flex-direction: column;
	gap: 15px;
	grid-row: 1 / span 3;
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	filter: blur(5px) brightness(0.5) contrast(0.5);
	animation: transform-panel 60s infinite linear;
}

.class-timetable-panel {
	background-color: transparent;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	text-align: center;
	overflow: hidden;
}

.class-timetable-title {
	background-color: #0d6efd;
	font-size: 24px;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 2px;
	color: #ddd;
	border-bottom: 2px solid rgba(7, 91, 217, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 7px;
}

.class-timetable-title::before {
	content: "";
	width: 32px;
	height: 32px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: auto;
	object-fit: cover;
	background-image: url("../img/class-timetable.png");
}

.class-timetable-content {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	background-color: #ddd;
	height: 860px;
	max-height: 860px;
}

.class-timetable-slider {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	animation: vertical-scroll 60s infinite linear;
}

.class-timetable-item {
	display: flex;
  	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all 0.3s;
	width: 100%;
	height: 110px;
	vertical-align: middle;
	box-shadow: 0 0 1px rgba(var(--color-black), 0);
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-property: transform;
	transition-property: transform;
	cursor: pointer;
	overflow: hidden;
	background-color: #ddd;
	border-top: 1px solid rgb(var(--color-dark));
	opacity: 0;
    animation: slide-from-left 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.class-timetable-item:first-child {
	border-top: none;
}

.class-timetable-class-name-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	width: 20%;
	height: 100%;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.class-timetable-class-name {
	font-size: 24px;
    font-weight: bolder;
	line-height: 1.1;
	height: 30px;
	width: 100%;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.class-timetable-class-name-small {
	font-size: 14px;
	padding-top: 6px;
}

.class-timetable-class-name-xsmall {
	font-size: 11px;
	padding-top: 9px;
}

.class-timetable-lesson-icon {
	display: block;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: auto;
	object-fit: cover;
	background-size: 100% 100%;
	width: 61px;
	height: 80px;
	margin: auto;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.class-timetable-lesson-empty-icon {
	display: block;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: auto;
	object-fit: cover;
	background-size: 100% 100%;
	width: 54px;
	height: 54px;
	margin: auto;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.class-timetable-info {
	width: 100%;
	height: 100%;
	text-align: center;
	padding: 0;
	margin: 0;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.class-timetable-info-teacher-name {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: bolder;
	padding: 5px;
	font-size: 20px;
	margin-top: 0;
	padding-bottom: 7px;
	width: 100%;
	height: 30px;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.class-timetable-info-lesson-name {
	font-weight: bolder;
	font-size: 20px;
	width: 100%;
	height: 50px;
	padding: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.1;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.class-timetable-info-class-room {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 5px;
	background-color: rgba(0, 0, 0, 0.5);
	font-size: 16px;
	width: 100%;
	height: 30px;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.class-timetable-info-lesson-empty {
	font-size: 36px;
	font-weight: bolder;
	width: 100%;
	height: 100%;
	padding-bottom: 5px;
	line-height: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.class-timetable-item.class-field-blue {
	.class-timetable-class-name-content,
	.class-timetable-class-name,
	.class-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-blue), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-blue), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.class-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-blue), 0.25), rgba(var(--color-blue), 1));
	}

	.class-timetable-class-name,
	.class-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-blue)), rgb(255, 255, 255) 50%);
	}
	
	.class-timetable-info-teacher-name,
	.class-timetable-info-lesson-name,
	.class-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-blue)), rgb(0, 0, 0) 50%);
	}
}

.class-timetable-item.class-field-teal {
	.class-timetable-class-name-content,
	.class-timetable-class-name,
	.class-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-teal), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-teal), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.class-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-teal), 0.25), rgba(var(--color-teal), 1));
	}

	.class-timetable-class-name,
	.class-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-teal)), rgb(255, 255, 255) 50%);
	}
	
	.class-timetable-info-teacher-name,
	.class-timetable-info-lesson-name,
	.class-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-teal)), rgb(0, 0, 0) 50%);
	}
}

.class-timetable-item.class-field-green {
	.class-timetable-class-name-content,
	.class-timetable-class-name,
	.class-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-green), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-green), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.class-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-green), 0.25), rgba(var(--color-green), 1));
	}

	.class-timetable-class-name,
	.class-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-green)), rgb(255, 255, 255) 50%);
	}
	
	.class-timetable-info-teacher-name,
	.class-timetable-info-lesson-name,
	.class-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-green)), rgb(0, 0, 0) 50%);
	}
}

.class-timetable-item.class-field-pink {
	.class-timetable-class-name-content,
	.class-timetable-class-name,
	.class-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-pink), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-pink), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.class-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-pink), 0.25), rgba(var(--color-pink), 1));
	}

	.class-timetable-class-name,
	.class-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-pink)), rgb(255, 255, 255) 50%);
	}
	
	.class-timetable-info-teacher-name,
	.class-timetable-info-lesson-name,
	.class-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-pink)), rgb(0, 0, 0) 50%);
	}
}

.class-timetable-item.class-field-orange {
	.class-timetable-class-name-content,
	.class-timetable-class-name,
	.class-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-orange), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-orange), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.class-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-orange), 0.25), rgba(var(--color-orange), 1));
	}

	.class-timetable-class-name,
	.class-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-orange)), rgb(255, 255, 255) 50%);
	}
	
	.class-timetable-info-teacher-name,
	.class-timetable-info-lesson-name,
	.class-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-orange)), rgb(0, 0, 0) 50%);
	}
}

.class-timetable-item.class-field-red {
	.class-timetable-class-name-content,
	.class-timetable-class-name,
	.class-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-red), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-red), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.class-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-red), 0.25), rgba(var(--color-red), 1));
	}

	.class-timetable-class-name,
	.class-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-red)), rgb(255, 255, 255) 50%);
	}
	
	.class-timetable-info-teacher-name,
	.class-timetable-info-lesson-name,
	.class-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-red)), rgb(0, 0, 0) 50%);
	}
}

.class-timetable-item.class-field-yellow {
	.class-timetable-class-name-content,
	.class-timetable-class-name,
	.class-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-yellow), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-yellow), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.class-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-yellow), 0.25), rgba(var(--color-yellow), 1));
	}

	.class-timetable-class-name,
	.class-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-yellow)), rgb(255, 255, 255) 50%);
	}
	
	.class-timetable-info-teacher-name,
	.class-timetable-info-lesson-name,
	.class-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-yellow)), rgb(0, 0, 0) 50%);
	}
}

.class-timetable-item.class-field-indigo {
	.class-timetable-class-name-content,
	.class-timetable-class-name,
	.class-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-indigo), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-indigo), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.class-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-indigo), 0.25), rgba(var(--color-indigo), 1));
	}

	.class-timetable-class-name,
	.class-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-indigo)), rgb(255, 255, 255) 50%);
	}
	
	.class-timetable-info-teacher-name,
	.class-timetable-info-lesson-name,
	.class-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-indigo)), rgb(0, 0, 0) 50%);
	}
}

.class-timetable-item.class-field-cyan {
	.class-timetable-class-name-content,
	.class-timetable-class-name,
	.class-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-cyan), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-cyan), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.class-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-cyan), 0.25), rgba(var(--color-cyan), 1));
	}

	.class-timetable-class-name,
	.class-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-cyan)), rgb(255, 255, 255) 50%);
	}
	
	.class-timetable-info-teacher-name,
	.class-timetable-info-lesson-name,
	.class-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-cyan)), rgb(0, 0, 0) 50%);
	}
}

.class-timetable-item.class-field-purple {
	.class-timetable-class-name-content,
	.class-timetable-class-name,
	.class-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-purple), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-purple), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.class-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-purple), 0.25), rgba(var(--color-purple), 1));
	}

	.class-timetable-class-name,
	.class-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-purple)), rgb(255, 255, 255) 50%);
	}
	
	.class-timetable-info-teacher-name,
	.class-timetable-info-lesson-name,
	.class-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-purple)), rgb(0, 0, 0) 50%);
	}
}

.teachers-lesson-panel {
	display: flex;
	flex-direction: column;
	gap: 15px;
	grid-row: 1 / span 3;
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	filter: blur(5px) brightness(0.5) contrast(0.5);
	animation: transform-panel 60s infinite linear;
}

.teacher-timetable-panel {
	background-color: transparent;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	text-align: center;
	overflow: hidden;
}

.teacher-timetable-title {
	background-color: #0d6efd;
	font-size: 24px;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 2px;
	color: #ddd;
	border-bottom: 2px solid rgba(7, 91, 217, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 7px;
}

.teacher-timetable-title::before {
	content: "";
	width: 32px;
	height: 32px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: auto;
	object-fit: cover;
	background-image: url("../img/teacher-timetable.png");
}

.teacher-timetable-content {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	background-color: #ddd;
	height: 860px;
	max-height: 860px;
}

.teacher-timetable-slider {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	animation: vertical-scroll 60s infinite linear;
}

.teacher-timetable-item {
	display: flex;
  	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: all 0.3s;
	width: 100%;
	height: 110px;
	vertical-align: middle;
	box-shadow: 0 0 1px rgba(var(--color-black), 0);
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-property: transform;
	transition-property: transform;
	cursor: pointer;
	overflow: hidden;
	background-color: #ddd;
	border-top: 1px solid rgb(var(--color-dark));
	opacity: 0;
    animation: slide-from-left 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.teacher-timetable-item:first-child {
	border-top: none;
}

.teacher-timetable-class-name-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	width: 20%;
	height: 100%;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.teacher-timetable-class-name {
	font-size: 24px;
    font-weight: bolder;
	line-height: 1.1;
	height: 30px;
	width: 100%;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.teacher-timetable-class-name-small {
	font-size: 14px;
	padding-top: 6px;
}

.teacher-timetable-class-name-xsmall {
	font-size: 11px;
	padding-top: 9px;
}

.teacher-timetable-lesson-icon {
	display: block;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: auto;
	object-fit: cover;
	background-size: 100% 100%;
	width: 61px;
	height: 80px;
	margin: auto;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.teacher-timetable-lesson-empty-icon {
	display: block;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: auto;
	object-fit: cover;
	background-size: 100% 100%;
	width: 54px;
	height: 54px;
	margin: auto;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.teacher-timetable-info {
	width: 100%;
	height: 100%;
	text-align: center;
	padding: 0;
	margin: 0;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.teacher-timetable-info-teacher-name {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: bolder;
	padding: 5px;
	font-size: 20px;
	margin-top: 0;
	padding-bottom: 7px;
	width: 100%;
	height: 30px;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.teacher-timetable-info-lesson-name {
	font-weight: bolder;
	font-size: 20px;
	width: 100%;
	height: 50px;
	padding: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.1;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.teacher-timetable-info-class-room {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 5px;
	background-color: rgba(0, 0, 0, 0.5);
	font-size: 16px;
	width: 100%;
	height: 30px;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.teacher-timetable-info-lesson-empty {
	font-size: 36px;
	font-weight: bolder;
	width: 100%;
	height: 80px;
	padding-bottom: 5px;
	line-height: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	opacity: 0;
    animation: slide-show 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.teacher-timetable-item.teacher-branch-red {
	.teacher-timetable-class-name-content,
	.teacher-timetable-class-name,
	.teacher-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-red), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-red), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.teacher-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-red), 0.25), rgba(var(--color-red), 1));
	}
	
	.teacher-timetable-class-name,
	.teacher-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-red)), rgb(255, 255, 255) 50%);
	}
	
	.teacher-timetable-info-teacher-name,
	.teacher-timetable-info-lesson-name,
	.teacher-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-red)), rgb(0, 0, 0) 50%);
	}
}

.teacher-timetable-item.teacher-branch-green {
	.teacher-timetable-class-name-content,
	.teacher-timetable-class-name,
	.teacher-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-green), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-green), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.teacher-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-green), 0.25), rgba(var(--color-green), 1));
	}
	
	.teacher-timetable-class-name,
	.teacher-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-green)), rgb(255, 255, 255) 50%);
	}
	
	.teacher-timetable-info-teacher-name,
	.teacher-timetable-info-lesson-name,
	.teacher-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-green)), rgb(0, 0, 0) 50%);
	}
}

.teacher-timetable-item.teacher-branch-blue {
	.teacher-timetable-class-name-content,
	.teacher-timetable-class-name,
	.teacher-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-blue), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-blue), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.teacher-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-blue), 0.25), rgba(var(--color-blue), 1));
	}
	
	.teacher-timetable-class-name,
	.teacher-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-blue)), rgb(255, 255, 255) 50%);
	}
	
	.teacher-timetable-info-teacher-name,
	.teacher-timetable-info-lesson-name,
	.teacher-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-blue)), rgb(0, 0, 0) 50%);
	}
}

.teacher-timetable-item.teacher-branch-yellow {
	.teacher-timetable-class-name-content,
	.teacher-timetable-class-name,
	.teacher-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-yellow), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-yellow), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.teacher-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-yellow), 0.25), rgba(var(--color-yellow), 1));
	}
	
	.teacher-timetable-class-name,
	.teacher-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-yellow)), rgb(255, 255, 255) 50%);
	}
	
	.teacher-timetable-info-teacher-name,
	.teacher-timetable-info-lesson-name,
	.teacher-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-yellow)), rgb(0, 0, 0) 50%);
	}
}

.teacher-timetable-item.teacher-branch-cyan {
	.teacher-timetable-class-name-content,
	.teacher-timetable-class-name,
	.teacher-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-cyan), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-cyan), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.teacher-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-cyan), 0.25), rgba(var(--color-cyan), 1));
	}
	
	.teacher-timetable-class-name,
	.teacher-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-cyan)), rgb(255, 255, 255) 50%);
	}
	
	.teacher-timetable-info-teacher-name,
	.teacher-timetable-info-lesson-name,
	.teacher-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-cyan)), rgb(0, 0, 0) 50%);
	}
}

.teacher-timetable-item.teacher-branch-purple {
	.teacher-timetable-class-name-content,
	.teacher-timetable-class-name,
	.teacher-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-purple), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-purple), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.teacher-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-purple), 0.25), rgba(var(--color-purple), 1));
	}
	
	.teacher-timetable-class-name,
	.teacher-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-purple)), rgb(255, 255, 255) 50%);
	}
	
	.teacher-timetable-info-teacher-name,
	.teacher-timetable-info-lesson-name,
	.teacher-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-purple)), rgb(0, 0, 0) 50%);
	}
}

.teacher-timetable-item.teacher-branch-orange {
	.teacher-timetable-class-name-content,
	.teacher-timetable-class-name,
	.teacher-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-orange), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-orange), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.teacher-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-orange), 0.25), rgba(var(--color-orange), 1));
	}
	
	.teacher-timetable-class-name,
	.teacher-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-orange)), rgb(255, 255, 255) 50%);
	}
	
	.teacher-timetable-info-teacher-name,
	.teacher-timetable-info-lesson-name,
	.teacher-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-orange)), rgb(0, 0, 0) 50%);
	}
}

.teacher-timetable-item.teacher-branch-pink {
	.teacher-timetable-class-name-content,
	.teacher-timetable-class-name,
	.teacher-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-pink), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-pink), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.teacher-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-pink), 0.25), rgba(var(--color-pink), 1));
	}
	
	.teacher-timetable-class-name,
	.teacher-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-pink)), rgb(255, 255, 255) 50%);
	}
	
	.teacher-timetable-info-teacher-name,
	.teacher-timetable-info-lesson-name,
	.teacher-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-pink)), rgb(0, 0, 0) 50%);
	}
}

.teacher-timetable-item.teacher-branch-indigo {
	.teacher-timetable-class-name-content,
	.teacher-timetable-class-name,
	.teacher-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-indigo), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-indigo), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.teacher-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-indigo), 0.25), rgba(var(--color-indigo), 1));
	}
	
	.teacher-timetable-class-name,
	.teacher-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-indigo)), rgb(255, 255, 255) 50%);
	}
	
	.teacher-timetable-info-teacher-name,
	.teacher-timetable-info-lesson-name,
	.teacher-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-indigo)), rgb(0, 0, 0) 50%);
	}
}

.teacher-timetable-item.teacher-branch-teal {
	.teacher-timetable-class-name-content,
	.teacher-timetable-class-name,
	.teacher-timetable-info-teacher-name {
		background: linear-gradient(to bottom,
			color-mix(in srgb, rgba(var(--color-teal), 0.50), rgba(0, 0, 0, 0.25) 25%),
			color-mix(in srgb, rgba(var(--color-teal), 1.00), rgba(0, 0, 0, 0.50) 50%));
	}

	.teacher-timetable-info {
		background: linear-gradient(to bottom, rgba(var(--color-teal), 0.25), rgba(var(--color-teal), 1));
	}
	
	.teacher-timetable-class-name,
	.teacher-timetable-info-class-room {
		color: color-mix(in srgb, rgb(var(--color-teal)), rgb(255, 255, 255) 50%);
	}
	
	.teacher-timetable-info-teacher-name,
	.teacher-timetable-info-lesson-name,
	.teacher-timetable-info-lesson-empty {
		color: color-mix(in srgb, rgb(var(--color-teal)), rgb(0, 0, 0) 50%);
	}
}