body {
	font-family: -apple-system, BlinkMacSystemFont, Verdana, "Segoe UI", Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: small;
	text-rendering: optimizelegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "liga", "kern";
	text-size-adjust: 100%;
}

img {
	border: 0;
	vertical-align: middle;
}

table {
	border: none;
	border-collapse: collapse;
}

.stu_photo {
	border-radius: 1rem;
	height: 180px;
	width: 170px;
	object-fit: cover;
}

/* Block styles */
.blockOuter {
	background: linear-gradient(rgba(29, 74, 255, 1), rgba(43, 128, 255, 1) 40%);
	padding: 5px 2px 2px 2px;
	border-radius: 10px;
}

.temporaryBlock {
	background: linear-gradient(to right, #7b1fa2, #4a148c);
}

.blockInner {
	background: #fff;
	padding: 8px;
	border-radius: 3px 3px 8px 8px;
}

.blockTitle {
	padding: 0 0 3px 10px;
	color: #ffffff;
	font-weight: bold;
}

/* Header styles */
.deptArea {
	margin-left: -8px;
	margin-right: -8px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #0093ff;
	background-color: #d2eeff;
	font-size: small;
	font-weight: bold;
	text-align: center;
}

@keyframes pulse {
	0%,
	100% {
		transform: scale(0.6);
		opacity: 0.6;
	}
	50% {
		transform: scale(1);
		opacity: 1;
	}
}

.logoArea {
	max-width: 2100px;
	margin: auto;
	display: flex;
	place-content: space-between;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

.menu {
	display: flex;
	place-items: center;
	min-width: max-content;
	max-width: 2100px;
	margin: auto;
	height: 60px;
	padding-left: 8px;
}

.menuArea {
	border-top: 2px solid #0093ff;
	border-bottom: 2px solid #0093ff;
	margin-left: -8px;
	margin-right: -8px;
}

.logoutMenu {
	vertical-align: top;
	position: absolute;
	top: 90px;
	right: 40px;
	z-index: 3;
}

.logoutButton {
	border-bottom: 4px solid #fff;
	width: 100px;
	color: #000;
	text-decoration: none;
}

.logoutButtonOver {
	border-bottom: 4px solid #09f;
	width: 100px;
	color: #000;
	text-decoration: none;
}

.whoLoggedText {
	text-align: right;
}

/* Print styles */
@media print {
	.headerArea {
		display: none;
	}

	.deptArea {
		display: none;
	}
}

/* Footer styles */
.footerArea {
	padding: 20px;
	text-align: center;
	font-size: 12px;
	color: #757575;
	border-top: 1px solid #ddd;
	margin-left: -8px;
	margin-right: -8px;
	margin-top: 20px;
}

/* Core styles */
.loginBack {
	background-color: #d5d6db;
}

.loginMain {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 260px;
	gap: 1rem;
}

.loginLogo {
	max-width: 650px;
}

.loginMainArea {
	background: #fafbff40;
	border-radius: 2rem;
	border: 1px solid #00000029;
	width: 350px;
	padding: 25px;
	margin: 5px;
	text-align: center;
}

.loginTitle {
	font-weight: bold;
	font-size: medium;
	text-align: center;
}

.loginNote {
	border: 2px solid #f8ba01;
	background: #fff3dd;
	margin-top: 4px;
	padding: 3px;
	text-align: center;
}

.loginWarning {
	border: 2px solid #f00;
	background: #ffd9da;
	margin-top: 4px;
	padding: 3px;
	text-align: center;
}

.logoutNote {
	border: 2px solid #78f57b;
	background: #d1fcd2;
	margin-top: 4px;
	padding: 3px;
	text-align: center;
}

/* Utility classes */
#verticaltextSAR {
	writing-mode: bt-rl;
}

:focus-visible {
	outline: none;
}

.boxTopText {
	color: #ffffff;
	font-weight: bold;
	margin-top: -2px;
	padding-bottom: 9px;
}

.boxSpacer {
	height: 5px;
}

.col {
	float: left;
}

.colClear {
	clear: both;
}

.divCol {
	display: inline;
	float: left;
}

.grayImage {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.pageBody {
	max-width: 2100px;
	margin: auto;
	min-height: calc(100vh - 275px);
}

.home {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
	gap: 1rem;
}

.homeCol {
	display: flex;
	flex-flow: column;
	gap: 1rem;
}

.mainTitle {
	font-size: 1.1rem;
	margin-bottom: 20px;
	font-weight: bold;
	text-align: center;
}

.note {
	color: #09f;
}

.noteSM {
	color: #09f;
	font-size: x-small;
}

.note2 {
	position: relative;
	background: #fffdb3;
	padding: 10px;
	width: 400px;
	border-radius: 0.5rem;
	border: 2px solid #ffbb3c;
	overflow-wrap: break-word;
}

.tabDivider {
	padding: 5px 5px 5px 15px;
	margin: 10px auto;
	background: rgb(201, 201, 201);
	background: linear-gradient(
		174deg,
		rgba(201, 201, 201, 1) 19%,
		rgba(238, 238, 238, 1) 55%
	);
}

/* List styles */
.listUnstyled {
	list-style-type: none;
	margin-block-start: unset;
	margin-block-end: unset;
	padding-inline-start: 0;
}

/* Page bars */
.barConfidential {
	border: 2px solid #ffd69d;
	background: #fff5d7;
	font-style: inherit;
	text-align: center;
	padding: 3px;
	margin-bottom: 2px;
}

.divBar {
	background: #d2eeff;
	border-bottom: 2px solid #0093ff;
	padding: 10px;
	margin: 10px 0;
	font-weight: bold;
}

/* Box styles */
.BOXSaved {
	border: 2px solid #69ff37;
	border-radius: 0.3rem;
	background: #e2fcd8;
	padding: 10px;
	margin-bottom: 5px;
	text-align: center;
}

.BOXNotFound {
	border: 2px solid #f4a733;
	border-radius: 0.3rem;
	background: #fce3be;
	text-align: center;
	padding: 10px;
}

.BOXError {
	border: 2px solid #ff0000;
	background: #ffcccc;
	border-radius: 0.3rem;
	padding: 10px;
}

.BOXDisabled {
	border: 2px solid #dfdfdf;
	border-radius: 0.5rem;
	background: #f3f3f3;
	padding: 10px;
}

.BOXWarn {
	padding: 10px;
	border-radius: 0.3rem;
	border: 2px solid #ff8e00;
	background: #fff1da;
}

.BOXInfo {
	padding: 10px;
	border-radius: 0.3rem;
	border: 2px solid #93c9ff;
	background: #d2e8ff;
}

.BOXClear {
	border-radius: 0.3rem;
	border: 2px solid #dbdbdb;
	padding: 10px;
}

/* Favourites styles */
.favButton {
	border: 2px solid #09f;
	padding: 5px 10px;
	margin-left: 5px;
	cursor: pointer;
	border-radius: 0.25rem;
}

.favButton:hover {
	border: 2px solid #06f;
	background: #d2ebff;
}

.favButton.active {
	border: 2px solid #06f;
	background: #80c6ffa5;
	color: #000;
}

/* GrayBlock styles */
.grayBlock {
	position: relative;
	cursor: pointer;
	background: #f0f0f0;
	padding: 7px;
	width: 180px;
	height: 90px;
	transition: 0.5s ease;
}

.grayBlock:hover {
	background: #e1e1e1;
	transition: 0.5s ease;
}

.grayBlock > .blockSpacedTitle {
	margin: 10px 0;
	font-weight: bold;
}

.grayBoxButtonBL {
	position: absolute;
	bottom: 3px;
	right: 3px;
}

/* Expand Derivative styles */
.expandBlock {
	background: #f0f0f0;
	padding: 5px;
	margin-bottom: 5px;
	cursor: pointer;
	transition: 0.5s ease;
}

.expandBlock:hover {
	background: #e1e1e1;
	transition: 0.5s ease;
}

.expandBlock > div {
	background: #fff;
	margin: 5px -3px -3px -3px;
	padding: 5px;
	display: none;
}

/* Search table styles */
.searchTable th,
td {
	padding: 5px;
}

.searchTable tbody tr:nth-of-type(even) {
	background-color: #d9e8ff;
	border-bottom: 1px solid #ccc;
}

.searchTable tbody tr:nth-of-type(odd) {
	background-color: #ffffff;
	border-bottom: 1px solid #ccc;
}

.searchTableTop {
	height: 28px;
	background: linear-gradient(to bottom, #5c7eb0 0%, #40628d 100%);
	color: #ffffff;
}

.searchTableTopSticky {
	height: 28px;
	background: linear-gradient(to bottom, #5c7eb0 0%, #40628d 100%);
	color: #ffffff;
	position: sticky;
	top: -1px;
}

.searchTableBottom {
	height: 28px;
	background: linear-gradient(to bottom, #f5f5f5 0%, #e0e0e0 100%);
	border-top: 1px solid #999999;
	font-size: 0.6rem;
	font-weight: bold;
}

/* Subject report styles */
.reportBox {
	border: 1px solid #666;
	background: #fff;
	padding: 6px;
}

/* Timetable layout classes */
.dayCol {
	display: inline;
	float: left;
	width: 235px;
	height: 880px;
	border: 1px solid #ccc;
	margin-left: -1px;
}

.dayColFull {
	display: inline;
	float: left;
	width: 235px;
	height: 1207px;
	border: 1px solid #ccc;
	margin-left: -1px;
}

.dayName {
	background: #06f;
	color: #fff;
	padding: 3px;
	font-weight: 500;
	text-align: center;
}

.itemTime {
	width: 95px;
	height: 70px;
	text-align: center;
	border-bottom: 1px solid #ccc;
}

.timeCol {
	display: inline;
	float: left;
	width: 95px;
	border: 1px solid #ccc;
}

/* Button styles */
.but {
	padding: 7px 10px;
	border-radius: 0.5rem;
	text-align: center;
	cursor: pointer;
	transition: 0.3s ease;
	text-decoration: none;
	color: #000000;
	border: 2px solid #2587d8;
	background-color: #cae2ff;
}

.but:hover {
	background-color: #80c6ff;
}

.butSG {
	padding: 7px 10px;
	border-radius: 0.5rem;
	text-align: center;
	cursor: pointer;
	transition: 0.3s ease;
	text-decoration: none;
	color: #000000;
	border: 2px solid #b70000;
	background-color: #ffbcbd;
}

.butSG:hover {
	background-color: #ff7578;
}

.butYellow {
	padding: 7px 10px;
	border-radius: 0.5rem;
	text-align: center;
	cursor: pointer;
	transition: 0.3s ease;
	text-decoration: none;
	color: #000000;
	border: 2px solid #fdc248;
	background-color: #fff9cc;
}

.butYellow:hover {
	background-color: #fcf19f;
}

.butDisabled {
	display: inline-block;
	margin: 0 10px 0 0;
	padding: 7px 10px;
	appearance: none;
	font-size: medium;
	color: #686868;
	background-color: #9b9b9b9d;
	border: 1px solid #9b9b9b;
	border-radius: 8px;
	transition: 0.3s ease;
}

.butGreen {
	padding: 7px 10px;
	border-radius: 0.5rem;
	text-align: center;
	cursor: pointer;
	transition: 0.3s ease;
	text-decoration: none;
	color: #000000;
	border: 2px solid #41c73e;
	background-color: #b3ffb2;
}

.butGreen:hover {
	background-color: #5aff57;
}

.filterButton {
	display: inline-block;
	width: -moz-fit-content;
	width: fit-content;
	padding: 6px;
	margin: 0 2px;
	text-decoration: none;
	color: #000000;
	border: 2px solid #636363;
	border-radius: 0.3rem;
	background: #cfcfcf;
	text-align: center;
	cursor: pointer;
	transition: 0.3s ease;
}

.filterButton:hover {
	background: #b2b2b2;
}

.filterButton.selected {
	border: 2px solid #2587d8 !important;
	background: #80c6ff !important;
}

/* Report headlines */
.headline__report {
	margin: 30px auto;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	width: fit-content;
	text-align: center;
}

.headline__report > div {
	border: 2px solid #0093ff;
	background: #dcecff;
	color: #40628d;
	flex: 1 1 0;
	min-width: fit-content;
	border-radius: 0.5rem;
	padding: 15px;
}

.headline__report > div > span {
	font-size: large;
}

.subheadline__report {
	border: 2px solid #008000 !important;
	background: #c0ffc0 !important;
	color: #008000 !important;
}

/* Text styles */
.textEllipsis {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* Breadcrumb styles */
.breadcrumb {
	border-radius: 10px;
	background: #e9e9e9;
	margin: 20px auto;
	display: flex;
	list-style: none;
	overflow: hidden;
	padding-inline-start: unset;
}

.breadcrumb li {
	text-align: center;
	padding: 8px 20px;
	cursor: pointer;
	color: white;
	text-decoration: none;
	background: hsla(222, 100%, 45%, 1);
	transition: all 1s ease;
}

.breadcrumb li:nth-child(2) {
	background: hsla(222, 100%, 55%, 1);
}

.breadcrumb li:nth-child(2):after {
	border-left-color: hsla(222, 100%, 55%, 1);
}

.breadcrumb li:nth-child(3) {
	background: hsla(222, 100%, 65%, 1);
}

.breadcrumb li:nth-child(3):after {
	border-left-color: hsla(222, 100%, 65%, 1);
}

.breadcrumb li:nth-child(4) {
	background: hsla(222, 100%, 75%, 1);
}

.breadcrumb li:nth-child(4):after {
	border-left-color: hsla(222, 100%, 75%, 1);
}

.breadcrumb li:nth-child(5) {
	background: hsla(222, 100%, 85%, 1);
}

.breadcrumb li:nth-child(5):after {
	border-left-color: hsla(222, 100%, 85%, 1);
}

.breadcrumb li:hover {
	background: hsla(222, 55%, 25%, 1);
}

.breadcrumb li:hover:after {
	border-left-color: hsla(222, 55%, 25%, 1) !important;
}

.small-label {
	display: inline-block;
	font-size: 0.75rem;
	color: #ffffff;
	background-color: #007bff;
	padding: 3px 6px;
	border-radius: 12px;
	letter-spacing: 1px;
	line-height: 1;
}

.status-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.status-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px;
	border-bottom: 1px solid #e5e5e5;
}

.status-item:last-child {
	border-bottom: none;
}

.status-name {
	font-weight: 500;
}

.status-details {
	display: flex;
	align-items: center;
}

.status-text {
	color: #4b5563;
	margin-right: 5px;
}

.status-icon {
	width: 20px;
	height: 20px;
	margin-right: 5px;
}

.status-time {
	font-size: 12px;
}

/* jQuery styles */
.jqHide {
	display: none;
}

.jqShow {
	display: block;
}

.jqShowFlex {
	display: flex;
}

.ui-tooltip {
	border-radius: 0.5rem;
	box-shadow: 0 0 2px darkgrey;
}