div.vgke-schedule
{
	position: relative;

	display: grid;
	row-gap: 1em;
	justify-content: center;

	font-size: 14px;
	font-family: Bahnschrift, Inter;

	font-weight: 400;

	--main-text-color: rgb(0, 107, 14);
	--main-text-color2: rgb(100, 100, 100);
	--main-back-color: white;

	--alt-text-color: white;
	--alt-back-color: rgb(0, 110, 15);
}

.vgke-schedule-container
{
	background-color: var(--main-back-color);
	border: lightgray 1px solid;
	padding: 0.75em;
	color: var(--main-text-color2);
}

div.vgke-schedule button
{
	background-color: var(--alt-back-color);
	color: var(--alt-text-color);
	border: lightgray 1px solid;

	font-weight: inherit;
	font-family: inherit;
	text-transform: inherit;
	font-size: 1em;

	cursor: pointer;

	padding: 0.25em 1em;
}

div.vgke-schedule button:hover
{
	background-color: rgb(0, 148, 20);
}

div.vgke-schedule button:active
{
	background-color: rgb(0, 85, 11);
}

div.vgke-schedule button:hover, [type="submit"]:hover
{
	color: var(--alt-text-color);
	box-shadow: inherit;
	text-decoration: inherit;
}

div.vgke-schedule input
{
	outline: none;
	width: 100%;
	height: inherit;

	background-color: var(--main-back-color);
	color: var(--main-text-color);
	border: lightgray 1px solid;

	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;

	padding: 0.25em;
}

div.vgke-schedule input:-webkit-autofill
{
	-webkit-text-fill-color: initial;
}

div.vgke-schedule input::placeholder
{
	color: rgb(100, 100, 100, 0.3);
	opacity: 1;
}

.vgke-schedule-group
{
	display: grid;
	grid-template-columns: auto 15em;
	gap: 0.5em;
}

@media (width < 900px)
{
	.vgke-schedule-group
	{
		grid-template-columns: auto;
	}
}

div.vgke-schedule-authwindow
{
	position: fixed;
	z-index: 10;

	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-color: rgb(0, 0, 0, 0.5);

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 1em;
}

.vgke-schedule-authwindow-form
{
	display: grid;
	row-gap: 1em;

	width: 30em;
}

.vgke-schedule-input-box
{
	position: relative;
}

div.vgke-schedule input.vgke-schedule-input
{
	width: 100%;
	padding: 0.5em;
}

.vgke-schedule-input:hover,
.vgke-schedule-input:focus
{
	border: rgb(0, 136, 18) 1px solid;
}

.vgke-schedule-input:focus
{
	box-shadow: 0 0 0.2em rgb(0, 87, 12);
}

.vgke-schedule-input-dropdown
{
	position: absolute;
	z-index: 5;
	top: 100%;

	width: 100%;
	height: fit-content;
	max-height: 20em;
	overflow-y: auto;

	box-shadow: 0 0 0.2em black;

	display: grid;
	row-gap: 0.25em;

	padding: 0.25em;
}
.vgke-schedule-input-dropdown[hidden] { display: none; }

.vgke-schedule-input-dropdown-option
{
	padding: 0.25em;
	cursor: pointer;
}

.vgke-schedule-input-dropdown-option-active
{
	background-color: rgb(228 228 228);
	color: var(--main-text-color);
}

.vgke-schedule-input-noresults
{
	padding: 0.25em;
	color: rgb(150, 150, 150);
}

.vgke-schedule-loading
{
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 0.75em;
	padding: 0.5em;
}

.vgke-schedule-loading-element
{
	animation: 1s vgke-schedule-loading-anim infinite var(--delay);

	width: 0.75em;
	height: 0.75em;
	border-radius: 50%;
	
	background-color: var(--alt-back-color);
}

@keyframes vgke-schedule-loading-anim
{
	0%, 60% {
		transform: scale(1, 1);
	}

	10%, 50% {
		transform: scale(1.3, 1.3);
	}
}

.vgke-schedule-notify
{
	position: relative;
	padding: 0.5em;
}

.vgke-schedule-notify:has(.vgke-schedule-notify-close)
{
	padding: 0.5em 2em 0.5em 0.5em;
}

.vgke-schedule-notify-warning
{
	background-color: rgb(255, 191, 72);
	border-color: rgb(133, 86, 0);
	color: rgb(124, 81, 0);
}

.vgke-schedule-notify-error
{
	background-color: rgb(255, 124, 124);
	border-color: rgb(133, 0, 0);
	color: rgb(124, 0, 0);
}

.vgke-schedule-notify-close
{
	position: absolute;
	top: 0.4em;
	right: 0.5em;

	width: fit-content;
	height: fit-content;

	cursor: pointer;
}

.vgke-schedule-notify-close::after
{
	content: "✕";
}

.vgke-schedule-info
{
	width: fit-content;
	margin: 0 auto;
}

.vgke-schedule-info-container
{
	display: grid;
	grid-template-columns: auto;
	row-gap: 0.25em;

	align-items: center;
	text-align: left;
}

.vgke-schedule-info-row
{
	display: flex;
	justify-content: space-between;
	column-gap: 1em;
}

.vgke-schedule-info-row > *:nth-child(even)
{
	text-align: right;
}


.vgke-schedule-info-divider
{
	height: 2px;
	background-color: var(--alt-back-color);
}

.vgke-schedule-info-name
{
	font-size: 1.5em;
	font-weight: 600;
	color: var(--main-text-color);
}

.vgke-schedule-info-info
{
	display: grid;
	grid-template-rows: auto auto;
	grid-auto-flow: column;
	row-gap: 0.5em;
	column-gap: 1em;
}

.vgke-schedule-info-info > *
{
	text-align: center;
}

.vgke-schedule-info-info > *:nth-child(even),
.vgke-schedule-info-bold
{
	font-weight: 800;
	color: var(--main-text-color);
}

.vgke-schedule-info-expand
{
	text-decoration: underline;
	cursor: pointer;
}

.vgke-schedule-schedule-error
{
	width: fit-content;
	margin: 0 auto;
}

.vgke-schedule-schedule-container
{
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 1em;
	row-gap: 1em;
}

@media (width < 900px)
{
	.vgke-schedule-schedule-container
	{
		grid-template-columns: auto;
	}
}

@media (width > 1200px)
{
	.vgke-schedule-schedule-container
	{
		grid-template-columns: auto auto auto;
	}
}

.vgke-schedule-schedule-periods
{
	display: grid;
	row-gap: 0.5em;
	height: fit-content;
}

.vgke-schedule-schedule-periods-current.vgke-schedule-schedule-periods
{
	box-shadow: 0 0 0.2em rgb(0, 107, 57);
	background-color: rgb(0, 107, 57, 0.2);
}

.vgke-schedule-schedule-periods-date
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.25em;

	color: var(--main-text-color);
	background-color: rgb(250, 250, 250);
}

.vgke-schedule-schedule-periods-current .vgke-schedule-schedule-periods-date
{
	color: var(--alt-text-color);
	background-color: var(--alt-back-color);
}

.vgke-schedule-schedule-periods-date-wday
{
	font-weight: 800;
	font-size: 1.25em;
}

.vgke-schedule-schedule-periods-container
{
	display: grid;
	row-gap: 0.5em;
}

@keyframes vgke-schedule-schedule-current-anim
{
	0%, 100%
	{
		box-shadow: 0 0 0 rgb(0, 107, 57);
		background-color: white;
	}
	50%
	{
		box-shadow: 0 0 0.5em rgb(0, 107, 57);
		background-color: rgb(171, 255, 216);
	}
}

.vgke-schedule-schedule-period
{
	padding: 0;

	display: grid;
	grid-template-columns: 6.5em auto;
}

.vgke-schedule-schedule-period.vgke-schedule-schedule-period-current
{
	animation: 1.5s vgke-schedule-schedule-current-anim infinite;
}

.vgke-schedule-schedule-period-timing
{
	display: grid;
	grid-template-rows: auto auto;
	grid-auto-flow: column;
	align-items: center;
	justify-content: space-between;
	row-gap: 0.1em;

	padding: 0.5em;
}

.vgke-schedule-schedule-period-divider
{
	background-color: var(--main-text-color);
	margin: 0.25em;
	width: 1px;
}

.vgke-schedule-schedule-period-timing-subject
{
	background-color: rgb(49 128 67);
	color: var(--alt-text-color);
}

.vgke-schedule-schedule-period-timing-activity
{
	background-color: rgb(49 69 128);
	color: var(--alt-text-color);
}

.vgke-schedule-schedule-period-timing-custom
{
	background-color: rgb(128, 107, 49);
	color: var(--alt-text-color);
}

.vgke-schedule-schedule-period-timing-warnpair
{
	color: rgb(255 204 110);
}

.vgke-schedule-schedule-period-pair1,
.vgke-schedule-schedule-period-time1
{
	font-size: 1.25em;
}

.vgke-schedule-schedule-period-pair1,
.vgke-schedule-schedule-period-pair2
{
	text-align: left;
}

.vgke-schedule-schedule-period-time1,
.vgke-schedule-schedule-period-time2
{
	text-align: right;
}

.vgke-schedule-schedule-period-pair
{
	grid-row: 1 / 3;
	font-size: 2em;
}

.vgke-schedule-schedule-period-occupation
{
	display: grid;
	grid-template-columns: auto;
	row-gap: 0.25em;

	align-items: center;

	padding: 0.5em;
}

.vgke-schedule-schedule-period-occupation-row
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
}

.vgke-schedule-schedule-period-occupation-center
{
	justify-content: center;
	text-align: center;
}

.vgke-schedule-schedule-period-name
{
	font-weight: 800;
	font-size: 1.25em;
}

.vgke-schedule-schedule-period-form
{
	font-size: 1em;
}

.vgke-schedule-schedule-period-occupation-center .vgke-schedule-schedule-period-nameform
{
	text-align: center;
}

.vgke-schedule-schedule-period-room
{
	font-size: 1.25em;
}

.vgke-schedule-schedule-period-misc
{
	width: 100%;
}

.vgke-schedule-schedule-period-links
{
	display: flex;
	gap: 0.25em;
	flex-wrap: wrap;
	justify-content: right;
}

div.vgke-schedule button.vgke-schedule-schedule-period-link
{
	background-color: var(--main-back-color);
	color: var(--main-text-color2);
	padding: 0.1em 0.5em;
}

div.vgke-schedule button.vgke-schedule-schedule-period-link:hover
{
	background-color: rgb(233, 233, 233);
}

.vgke-schedule-schedule-period-occupation-activity
{
	display: flex;
}