:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,::after,::before{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}a,button{cursor:revert}menu,ol,summary,ul{list-style:none}ol{counter-reset:revert}img{max-inline-size:100%;max-block-size:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert;box-sizing:border-box}::placeholder{color:unset}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable=false])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert;box-sizing:border-box}::-webkit-details-marker{display:none}

/******************************************************************************/

body
{
	background-color: #313338;
	font-family: 'Roboto', sans-serif;
	color: #f2f3f5;
	display: flex;
	flex-direction: column;
	height: 100dvh;
}

/******************************************************************************/

body>nav:first-child
{
	display: flex;
	align-items: center;
	gap: .5em;
	padding: .5em;
}

body>nav:first-child svg
{
	height: 1.5em;
	fill: #f2f3f5;
}

body>nav:first-child>div
{
	flex-grow: 1;
	text-align: center;
}

body>nav:first-child>div::first-letter
{
	text-transform: uppercase;
}

/******************************************************************************/

#days-of-week
{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	grid-gap: .5em;
	padding: .5em;
	font-size: .5em;
}

/******************************************************************************/

#calendar-days
{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	grid-gap: .5em;
	padding: .5em;
}

#calendar-days>li
{
	aspect-ratio: 1;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

#calendar-days>li.selected
{
	background-color: #232428;
	cursor: default;
}

#calendar-days>li.today
{
	/*background-color: #5865f2;*/
	color: #5865f2;
	font-weight: bold;
}

#calendar-days>li.other-month,
#calendar-days>li:nth-child(7n - 1),
#calendar-days>li:nth-child(7n)
{
	color: rgba(242, 243, 245, .25);
}

/******************************************************************************/

#selected-date
{
	background-color: #232428;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .5em;
	padding: .5em;
}

#selected-date>:first-child::first-letter
{
	text-transform: uppercase;
}

#selected-date>:last-child
{
	color: #5865f2;
}

/******************************************************************************/

#periods
{
	flex-grow: 1;
}

#periods>li
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .5em;
	margin: .5em;
	font-size: .9em;
}

#periods>li>:last-child
{
	color: #5865f2;
}

/*#periods>li:nth-child(even)
{
	background-color: #2b2d31;
}*/

#periods>li+li
{
	border-top: 1px solid #2b2d31;
	padding-top: .5em;
}

/******************************************************************************/

#periods+nav>button
{
	/*background-color: #23a559;*/
	background-color: #5865f2;
	padding: .5em;
	width: 100%;
	text-align: center;
}

/******************************************************************************/

dialog
{
	background-color: #313338;
	color: #f2f3f5;
	padding: 0;
	border: 0;
	border-radius: .25em;
}

dialog[open]
{
	display: flex;
	flex-direction: column;
}

dialog::backdrop
{
	background: rgba(0, 0, 0, .9);
}

dialog>form
{
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

dialog>form>header,
dialog>form>footer
{
	background-color: #1e1f22;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5em;
	padding: .5em;
}

dialog>form>div
{
	display: flex;
	/*flex-direction: column;*/
	justify-content: space-evenly;
	align-items: center;
	gap: .5em;
	padding: .5em;
}

dialog>form>footer
{
	text-transform: none;
	padding: 0 0 0 .5em;
}

dialog>form>footer>button:not([type="submit"])
{
	color: #949ba4;
}

dialog>form>footer>button:not([type="submit"]):hover
{
	text-decoration: underline;
}

dialog>form>footer>button[type="submit"]
{
	background-color: #5865f2;
	padding: .5em;
	border-radius: 0 0 .25em;
	margin-left: auto;
}

dialog input[type="time"]
{
	background-color: #4e5058;
	padding: .5em;
	border: 1px solid #232428;
	border-radius: .25em;
	width: 5em;
	text-align: center;
}