#app
{
	margin: 0 auto;
	width: 100vw;
	height: 100vh;
	height: 100svh;
}

.fwh
{
	width: 100% !important;
	height: 100% !important;
}

.fw
{
	width: 100% !important;
}

.fh
{
	height: 100% !important;
}

:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--mud-palette-text-primary);
	-webkit-box-shadow: 0 0 0px 1000px rgba(var(--mud-palette-info-rgb), 0.1) inset;
	transition: background-color 10000s ease-in-out 0s;
}

.badge {
	transition: transform ease 0.3s;
}

.badge-container:hover .badge {
	transform: translate(0px) !important;
}

.course-box {
	box-shadow: var(--mud-elevation-2);

	transition-property: transform, box-shadow;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}

.input-paper {
	position: relative;
	margin-top: 6px;
	padding: 18.5px 14px;
	border-color: var(--mud-palette-lines-inputs) !important;
}

.input-paper:hover {
	border-color: var(--mud-palette-action-default) !important;
}

.input-paper > span {
	position: absolute;
	transform: translate(-4px, -28px);
	padding: 0px 5px;
	background-color: var(--mud-palette-surface);
}

.mud-dialog-fullscreen {
	overflow-y: auto !important;
}

/* Hides a button's text label on narrow screens, keeping only its
   icon -- used on MyPath's per-draft action buttons (Open, Duplicate,
   Rename, Delete, etc.) so mobile users still see all the actions
   without the row overflowing, while wider screens get the more
   discoverable text label alongside the icon. Purely CSS-driven, no
   Blazor viewport-observer state needed for this. */
.hide-on-mobile {
	display: inline;
}

@media only screen and (max-width: 600px) {
	.hide-on-mobile {
		display: none;
	}
}