hestiacp/web/css/src/themes/default.css

@import url("node:xterm/css/xterm.css");
@import url("node:normalize.css/normalize.css");
@import url("node:@fortawesome/fontawesome-free/css/fontawesome");
@import url("node:@fortawesome/fontawesome-free/css/solid");
@import url("../dependencies/animate");
@import url("../media_queries");
@import url("../fonts");
@import url("../base");
@import url("../utilities");

:root {
	--animate-duration: 300ms;
	--font-family: "Exo", system-ui;
	--font-family-monospace: "Inconsolata", "Lucida Console", "Monaco", monospace;
	--border-radius-base: 4px;

	/* Colors */
	--color-text: #7c7c7c;
	--color-text-link: #326b9b;
	--color-text-link-hover: #c36;
	--color-text-heading: #4b4b4b;
	--color-background: #fff;

	/* Alerts */
	--alert-border-color: #fff;
	--alert-box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
	--alert-text-shadow: 0 1px rgb(0 0 0 / 45%);
	--alert-info-color: #618ecc;
	--alert-danger-color: #ec6c6c;
	--alert-success-color: #5ea64c;

	/* Icons */
	--icon-color-teal: #3cc;
	--icon-color-purple: #8e2fca;
	--icon-color-maroon: #c36;
	--icon-color-red: #f33;
	--icon-color-green: #53ba55;
	--icon-color-orange: #ffc043;
	--icon-color-blue: #326b9b;
	--icon-color-lightblue: #6eb6f0;

	/* Top Bar */
	--top-bar-background: linear-gradient(
			to bottom,
			rgb(104 145 196 / 100%) 0%,
			rgb(69 114 181 / 100%) 50%,
			rgb(65 90 149 / 100%) 100%
		),
		#5070a6;
	--top-bar-box-shadow: 0 4px 10px rgb(100 100 100 / 40%);
	--top-bar-border-bottom: 1px solid #fff;

	/* Charts */
	--chart-label-color: #7c7c7c;
	--chart-grid-color: #e9e9e9;
	--chart-line-1-color: var(--icon-color-blue);
	--chart-line-2-color: var(--icon-color-maroon);
	--chart-line-3-color: var(--icon-color-green);
}

/* App
   ========================================================================== */

.app {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* App header
   ========================================================================== */

.app-header {
	flex: none;
	padding-top: 40px;
}

/* App content
   ========================================================================== */

.app-content {
	flex: 1 0 auto;
}

/* Container
   ========================================================================== */

.container {
	margin-left: auto;
	margin-right: auto;
	max-width: 1024px;
}

/* Top bar
   ========================================================================== */

.top-bar {
	background: var(--top-bar-background);
	box-shadow: var(--top-bar-box-shadow);
	border-bottom: var(--top-bar-border-bottom);
	position: fixed;
	display: flex;
	width: 100%;
	height: 40px;
	z-index: 2;
	top: 0;
}

.top-bar-inner {
	display: flex;
	flex-grow: 1;
	padding-left: 20px;
	padding-right: 20px;
	justify-content: space-between;

	@media (--viewport-large) {
		padding-left: 0;
		padding-right: 0;
	}
}

.top-bar-left {
	display: flex;
}

.top-bar-logo {
	display: flex;
	align-items: center;
	margin-right: 30px;
}

.top-bar-usage {
	display: none;

	@media (--viewport-small) {
		display: flex;
		align-items: center;
	}
}

.top-bar-usage-inner {
	display: flex;
	color: #fff;
	text-shadow: 1px 1px rgb(0 0 0 / 25%);
	font-weight: 500;
}

.top-bar-usage-item {
	margin-right: 11px;

	&:last-child {
		margin-right: 0;
	}

	& .fas {
		margin-right: 3px;
	}
}

.top-bar-right {
	display: flex;
}

.top-bar-notifications {
	display: flex;

	@media (--viewport-small) {
		position: relative;
	}
}

.top-bar-notifications-panel {
	background-color: #fff;
	box-shadow: 0 3px 20px 0 rgb(0 0 0 / 40%);
	max-height: 50vh;
	overflow-y: auto;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	z-index: 1;

	@media (--viewport-small) {
		left: initial;
		right: 0;
		width: 350px;
		max-height: 500px;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		border: 1px solid #fff;
		border-top: none;
	}

	@media (--viewport-medium) {
		width: 400px;
	}
}

.top-bar-notifications-empty {
	text-align: center;
	padding: 20px;
	font-size: 1rem;
	color: #6f6f6f;

	& .fas {
		font-size: 3rem;
		margin-bottom: 20px;
	}
}

.top-bar-notification-item {
	color: #6f6f6f;
	font-size: 0.8rem;
	border-bottom: 1px solid #e9e4e4;

	&:last-child {
		border-bottom: none;
	}

	&.unseen {
		& .top-bar-notification-title {
			color: #c36;
		}

		& .top-bar-notification-delete {
			display: block;
		}
	}

	& a {
		font-weight: 600;
	}
}

.top-bar-notification-inner {
	padding: 15px 20px;

	@media (--viewport-small) {
		padding-left: 15px;
		padding-right: 15px;
	}
}

.top-bar-notification-timestamp {
	font-size: 0.75rem;
	font-weight: 600;
	text-align: right;
	margin-top: 10px;
}

.top-bar-notification-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.top-bar-notification-title {
	color: #9e9e9e;
	font-size: 0.85rem;
	font-weight: 600;

	& a {
		color: #9e9e9e;
	}
}

.top-bar-notification-content {
	word-break: break-word;

	& p {
		margin-bottom: 15px;

		&:last-child {
			margin-bottom: 0;
		}
	}
}

.top-bar-notification-delete {
	display: none;
	background-color: transparent;
	border: 0;
	padding-left: 5px;
	padding-right: 5px;
	background: none;

	& .fas {
		color: #c36;
		font-size: 0.9rem;
	}

	&:hover .fas {
		opacity: 0.8;
	}
}

.top-bar-notifications-delete-all {
	display: block;
	border: 0;
	border-top: 1px solid #e9e4e4;
	background-color: transparent;
	text-align: center;
	padding: 10px 15px;
	width: 100%;
	background: none;
	color: var(--color-text-link);

	&:hover {
		background-color: rgb(0 0 0 / 5%);
		color: var(--color-text-link-hover);
	}

	& .fas {
		color: #c36;
		margin-right: 5px;
	}
}

.top-bar-menu {
	display: flex;

	@media (--viewport-small) {
		position: relative;
	}
}

.top-bar-menu-panel {
	display: block;
	background-color: #4673b6;
	box-shadow: 0 3px 20px 0 rgb(0 0 0 / 40%);
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	z-index: 1;

	@media (--viewport-small) {
		left: initial;
		right: 0;
		width: 350px;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
	}

	@media (--viewport-medium) {
		display: flex !important; /* NOTE: Overrides inline style set by JS */
		width: auto;
		background-color: transparent;
		box-shadow: none;
		position: static;
	}
}

.top-bar-menu-list {
	& .top-bar-menu-link {
		padding-left: 20px;
		padding-right: 20px;
	}

	@media (--viewport-small) {
		& .top-bar-menu-link {
			padding-left: 15px;
			padding-right: 15px;
		}
	}

	@media (--viewport-medium) {
		display: flex;

		& .top-bar-menu-link {
			padding-left: 10px;
			padding-right: 10px;
		}
	}
}

.top-bar-menu-item {
	@media (--viewport-medium) {
		display: flex;
	}
}

.top-bar-menu-link {
	color: #f7f7f7;
	display: flex;
	align-items: center;
	font-size: 0.8rem;
	font-weight: 600;
	text-shadow: 1px 1px rgb(0 0 0 / 25%);
	background-color: transparent;
	border: 0;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	padding: 10px;

	&:hover {
		box-shadow: inset 0 0 6px rgb(255 255 255 / 60%);
		color: #4686b8;
		border-left: 1px solid rgb(0 0 0 / 10%);
		border-right: 1px solid rgb(0 0 0 / 10%);
		background: linear-gradient(
			to bottom,
			rgb(255 255 255 / 60%) 0%,
			rgb(255 255 255 / 75%) 30%,
			rgb(255 255 255 / 100%) 95%
		);
		text-shadow: 0 1px rgb(255 255 255 / 80%);
	}

	&:active {
		color: #046c98;
		border-left: 1px solid rgb(0 0 0 / 15%);
		border-right: 1px solid rgb(0 0 0 / 15%);
		text-shadow: 0 -1px 1px rgb(255 255 255 / 50%);
		background: linear-gradient(
			to bottom,
			rgb(255 255 255 / 50%) 0%,
			rgb(255 255 255 / 60%) 30%,
			rgb(255 255 255 / 95%) 95%
		);
		box-shadow:
			inset 0 0 1px #fff,
			inset -1px -1px 4px rgb(220 220 220 / 40%);
	}

	&.active {
		color: #4686b8;
		background: linear-gradient(
			to bottom,
			rgb(255 255 255 / 60%) 0%,
			rgb(255 255 255 / 75%) 30%,
			rgb(255 255 255 / 100%) 95%
		);
		text-shadow: 0 1px rgb(255 255 255 / 80%);
		border-left: 1px solid rgb(255 255 255 / 98%);
		border-right: 1px solid rgb(255 255 255 / 98%);
	}

	& .fas {
		font-size: 1.1rem;
	}
}

.top-bar-menu-link-logout {
	color: #dbf94e;
}

.top-bar-menu-link-label {
	margin-left: 6px;

	@media (--viewport-medium) {
		display: none;
	}

	@media (--viewport-large) {
		display: inline;
	}
}

/* Main menu
   ========================================================================== */

.main-menu {
	@media (--viewport-medium) {
		padding-top: 10px;
	}
}

.main-menu-toggle {
	border: 0;
	background-color: transparent;
	padding: 10px;
	display: block;
	width: 100%;

	&:hover {
		background-color: rgb(0 0 0 / 5%);

		& .main-menu-toggle-label {
			color: var(--color-text-link-hover);
		}
	}

	& .fas {
		color: #999;
		margin-right: 5px;
	}

	@media (--viewport-small) {
		display: none;
	}
}

.main-menu-toggle-label {
	color: #5b5b5b;
	font-weight: 600;
}

.main-menu-list {
	display: block;
	border-top: 1px solid #ddd;

	@media (--viewport-small) {
		border-top: 0;
		display: flex !important; /* NOTE: Overrides inline style set by JS */
		justify-content: space-evenly;
	}
}

.main-menu-item {
	@media (--viewport-small) {
		flex-grow: 1;
	}

	@media (--viewport-medium) {
		flex-grow: 0;
		display: flex;

		&.focus {
			& .main-menu-item-link {
				border-bottom-color: #5edad0;
			}

			& .main-menu-item-label {
				color: #5edad0;
			}
		}
	}
}

.main-menu-item-link {
	display: block;
	text-align: center;
	padding: 10px;

	&:hover {
		background-color: rgb(0 0 0 / 5%);

		& .main-menu-item-label {
			color: var(--color-text-link-hover);
		}
	}

	&.active {
		& .main-menu-item-label {
			color: var(--color-text-link-hover);

			& .fas {
				color: var(--color-text-link-hover);
			}
		}
	}

	@media (--viewport-small) {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	@media (--viewport-medium) {
		border-bottom: 4px solid #fff;

		&:hover,
		&.active {
			background-color: transparent;
			border-bottom-color: var(--color-text-link-hover);
		}
	}

	@media (--viewport-large) {
		padding-left: 25px;
		padding-right: 25px;
	}
}

.main-menu-item-label {
	color: #5b5b5b;
	font-weight: 600;

	& .fas {
		color: #999;
		margin-left: 6px;
	}

	@media (--viewport-medium) {
		font-size: 1rem;

		& .fas {
			margin-left: 10px;
		}
	}
}

.main-menu-stats {
	display: none;

	@media (--viewport-medium) {
		color: var(--color-text);
		display: block;
		font-size: 0.75rem;
		text-transform: lowercase;
		line-height: 1.8;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* Toolbar
   ========================================================================== */

.toolbar {
	background-color: #fff;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;

	& .form-select {
		color: inherit;
		padding-top: 4px;
		padding-bottom: 4px;
		box-shadow: none;
		border-color: #ddd;
		border-right-color: transparent;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;

		&:focus {
			box-shadow: none;
		}
	}

	& .form-control {
		padding-top: 4px;
		padding-bottom: 4px;
		box-shadow: none;
		border-color: #ddd;
		border-right-color: transparent;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;

		&:hover {
			border-right-color: #94c8f0;
		}

		&:focus {
			border-right-color: #008fee;
		}
	}

	@media (--viewport-large) {
		position: sticky;
		z-index: 1;
		top: 39px;
		height: 45px;
		display: flex;
		justify-content: center;
		align-items: center;

		&.active {
			box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
		}

		& .form-select {
			max-width: 200px;
		}
	}
}

.toolbar-inner {
	padding: 10px 20px;

	@media (--viewport-large) {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-grow: 1;
		max-width: 1024px;
		padding: 5px 0;
	}
}

.toolbar-right {
	& form {
		display: flex;
	}

	@media (--viewport-large) {
		display: flex;
	}
}

.toolbar-sorting {
	position: relative;
	font-size: 0.8rem;

	& form {
		flex-grow: 1;
	}

	@media (--viewport-small) {
		display: flex;
		align-items: center;

		& form {
			margin-left: 10px;
		}
	}
}

.toolbar-sorting-toggle {
	color: var(--color-text);
	display: block;
	border: 0;
	padding-bottom: 5px;
	background: none;
	text-transform: uppercase;

	&:hover {
		color: #4b4b4b;

		& span {
			color: #4b4b4b;
		}
	}

	&:active {
		color: #3b9de8;

		& span {
			color: #3b9de8;
		}
	}

	& span {
		padding-left: 3px;
	}

	@media (--viewport-small) {
		padding-bottom: 0;
	}
}

.toolbar-sorting-menu {
	position: absolute;
	top: 25px;
	left: 0;
	z-index: 1;
	overflow: hidden;
	border-radius: var(--border-radius-base);
	border: 1px solid rgb(255 255 255 / 100%);
	background-color: rgb(255 255 255 / 95%);
	box-shadow: 0 2px 14px 0 rgb(20 20 20 / 35%);

	& li {
		display: flex;
		border-bottom: 1px solid #ddd;
		color: #2e2e2e;
		cursor: pointer;

		&:last-child {
			border-bottom: none;
		}
	}

	& span {
		display: flex;
		align-items: center;
		justify-content: space-between;

		&.name {
			padding: 11px;
			width: 141px;
			font-weight: 500;
		}

		&.up {
			padding: 11px 14px;
			width: 44px;
		}

		&.active {
			color: #4686b8;
			background: linear-gradient(
					to bottom,
					rgb(255 255 255 / 60%) 0%,
					rgb(255 255 255 / 75%) 50%,
					rgb(255 255 255 / 95%) 95%
				),
				#4f8bbc;
			text-shadow: 0 1px rgb(255 255 255 / 80%);
		}

		&:hover {
			color: #3b9de8;
			text-shadow: 1px 1px rgb(255 255 255 / 50%);
			background: linear-gradient(
				to bottom,
				rgb(241 248 253 / 100%) 0%,
				rgb(218 236 250 / 100%) 50%,
				rgb(190 221 246 / 100%) 51%,
				rgb(227 240 251 / 100%) 100%
			);
			box-shadow:
				inset 0 0 1px #fff,
				inset 0 0 6px rgb(255 255 255 / 60%);
		}

		&:active,
		&:focus {
			background: linear-gradient(
				to bottom,
				rgb(210 232 250 / 100%) 0%,
				rgb(187 220 247 / 100%) 50%,
				rgb(162 207 244 / 100%) 51%,
				rgb(194 224 248 / 100%) 100%
			);
			color: #046c98;
			text-shadow: 0 -1px 1px rgb(255 255 255 / 50%);
			box-shadow:
				inset 0 0 1px #fff,
				inset -1px -1px 4px rgb(220 220 220 / 40%);
		}
	}

	@media (--viewport-small) {
		top: 35px;
	}
}

.toolbar-input-submit {
	display: flex;
	align-items: center;
	border: 1px solid #ddd;
	border-left: 0;
	background-color: rgb(255 255 255 / 90%);
	border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
	box-shadow:
		inset 0 0 1px rgb(41 90 152 / 10%),
		inset 0 0 2px rgb(255 255 255 / 100%);
	text-shadow: 1px 1px rgb(255 255 255 / 90%);
	color: #069;
	min-width: 32px;
	padding: 0 10px;
	font-size: 0.75rem;

	&:hover {
		color: #39c;
		background-color: #fff;
	}

	&:active {
		color: #409fd5;
		box-shadow: inset 1px 1px 0 rgb(0 0 0 / 10%);
	}
}

.toolbar-link {
	display: block;
	padding: 6px 12px;
	color: #777;
	text-transform: uppercase;
	font-weight: 600;

	&.selected,
	&:hover {
		color: var(--color-text-link-hover);
	}

	&:active {
		color: #3b9de8;
	}
}

.toolbar-buttons {
	padding-bottom: 10px;

	&:last-child {
		padding-bottom: 0;
	}

	& .button {
		min-width: 0;
		width: 100%;
		margin-bottom: 5px;
		padding-left: 10px;
		padding-right: 10px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	@media (--viewport-medium) {
		display: flex;
		align-items: center;

		& .inline-alert {
			margin-right: 20px;
		}

		& .button {
			margin-bottom: 0;
			margin-right: 8px;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	@media (--viewport-large) {
		padding-bottom: 0;

		& .button {
			width: auto;
		}
	}
}

.toolbar-search {
	margin-top: 5px;

	@media (--viewport-large) {
		margin-left: 12px;
		margin-top: 0;
	}
}

/* Units table
   ========================================================================== */

.units-table {
	font-size: 0.8rem;
	padding-left: 20px;
	padding-right: 20px;

	@media (--viewport-large) {
		width: 100%;
		display: table;
		border-collapse: collapse;
		border-spacing: 0;
		padding-left: 0;
		padding-right: 0;
	}
}

.units-table-header {
	display: none;

	@media (--viewport-large) {
		display: table-row;
		border-left: 1px solid #d0d0d0;
		border-right: 1px solid #d0d0d0;
		border-bottom: 1px solid #d0d0d0;
		background: linear-gradient(
			to bottom,
			rgb(247 247 247 / 100%) 0%,
			rgb(255 255 255 / 100%) 100%
		);
		box-shadow:
			inset 0 1px 1px rgb(255 255 255 / 100%),
			inset 0 0 1px rgb(255 255 255 / 100%),
			inset 0 0 4px rgb(255 255 255 / 80%),
			0 1px 4px rgb(140 140 140 / 35%);

		& .units-table-cell {
			font-weight: bold;
			padding: 14px 15px;
		}

		& .fas {
			font-size: 1rem;
		}
	}
}

.units-table-row {
	padding: 10px;
	margin-top: 10px;
	border: 1px solid #ddd;
	border-radius: 6px;

	&:last-child {
		margin-bottom: 10px;
	}

	&.selected {
		background-color: #f8f8f8;
		box-shadow: 0 2px 10px rgb(150 150 150 / 20%);
	}

	&.disabled {
		color: silver;
		background-color: #eaeaea;

		&.selected {
			color: #b2ac87;
			background-color: #f2eab8;
		}
	}

	&.focus {
		border-left: 2px solid #5edad0;
		background-color: #eff5fc;
	}

	@media (--viewport-large) {
		display: table-row;
		padding: 0;
		margin-top: 0;
		border-top: 0;
		border-left-color: transparent;
		border-right-color: transparent;
		border-bottom-color: #ddd;
		border-radius: 0;

		&:last-child {
			margin-bottom: 0;
		}

		&:hover {
			background-color: #f8f8f8;
			box-shadow: 0 2px 10px rgb(150 150 150 / 20%);
			border-left-color: #ddd;
			border-right-color: #ddd;

			& .units-table-row-actions {
				visibility: visible;
			}
		}

		&.selected {
			border-left: 1px solid #ddd;
			border-right: 1px solid #ddd;

			&:hover {
				background-color: #fff5ce;
			}
		}

		&.disabled {
			&:hover {
				background-color: #eaeaea;
			}

			&.selected:hover {
				color: #b2ac87;
				background-color: #f2eab8;
			}
		}
	}
}

.units-table-cell {
	& a {
		color: #353535;

		&:hover {
			color: #4c8bbe;
		}
	}

	@media (--viewport-large) {
		display: table-cell;
		vertical-align: middle;
		padding: 10px 15px;

		/* Checkbox cell */
		&:nth-child(1) {
			line-height: 0.6;
		}

		&.compact {
			padding-left: 10px;
			padding-right: 10px;
		}
	}
}

.units-table-heading-cell {
	font-size: 0.9rem;
	padding-top: 5px;
	padding-bottom: 5px;

	@media (--viewport-large) {
		font-size: 0.8rem;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

.units-table-row-actions {
	display: flex;
	flex-wrap: wrap;
	padding-top: 5px;

	@media (--viewport-large) {
		visibility: hidden;
		flex-wrap: nowrap;
		padding-top: 0;
	}
}

.units-table-row-action {
	margin-right: 5px;
	margin-bottom: 5px;

	&:last-child {
		margin-right: 0;
	}

	& .fas {
		padding: 5px 5px 5px 10px;
		font-size: 0.9rem;
	}

	@media (--viewport-large) {
		margin-right: 0;
		margin-bottom: 0;

		& .fas {
			color: silver;
			padding: 4px;
		}
	}
}

.units-table-row-action-link {
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: var(--border-radius-base);
	display: flex;
	align-items: center;
	padding-right: 10px;

	@media (--viewport-large) {
		background-color: transparent;
		border: 0;
		padding-right: 0;
	}
}

.units-table-badge {
	@media (--viewport-large) {
		display: inline-block;
		min-width: 26px;
		line-height: 24px;
		border-radius: 13px;
		font-weight: 700;
		font-size: 0.75rem;
		box-shadow:
			0 1px 2px rgb(70 70 70 / 50%),
			inset 0 2px 2px #fff;
		color: #6c6c6c;
		padding-left: 4px;
		padding-right: 4px;
		text-align: center;
		text-shadow: 0 1px #fafafa;
		border: 1px solid #b8b8b8;
		background-color: #eaeaea;
	}
}

.units-table-footer {
	padding: 20px;

	@media (--viewport-large) {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* Cards
   ========================================================================== */

.cards {
	@media (--viewport-small) {
		display: grid;
		gap: 25px;
		grid-template-columns: repeat(2, 1fr);
	}

	@media (--viewport-medium) {
		grid-template-columns: repeat(4, 1fr);
	}
}

.card {
	overflow: hidden;
	background-color: #f5f5f5;
	border: 1px solid #d3d3d3;
	box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
	border-radius: var(--border-radius-base);
	margin-bottom: 20px;

	@media (--viewport-small) {
		margin-bottom: 0;
	}

	&.disabled {
		color: #b6b6b6;

		& .card-thumb {
			filter: grayscale(100%);
			opacity: 0.3;
		}
	}
}

.card-thumb {
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 180px;
	padding: 20px;

	& img {
		max-width: 100%;
		max-height: 100%;
	}
}

.card-content {
	padding: 10px;
	color: #353535;
	text-align: center;
}

.card-title {
	font-size: 1rem;
	font-weight: 600;
}

/* Statistics
   ========================================================================== */

.stats {
	padding-left: 20px;
	padding-right: 20px;

	@media (--viewport-large) {
		padding-left: 0;
		padding-right: 0;
	}
}

.stats-item {
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #ddd;

	&:last-child {
		border-bottom: none;
	}

	@media (--viewport-large) {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		border-left: 1px solid transparent;
		border-right: 1px solid transparent;
		padding: 30px 20px;

		&:hover {
			background-color: #f8f8f8;
			border-left-color: #ddd;
			border-right-color: #ddd;
			box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
		}
	}
}

.stats-item-header {
	display: flex;
	align-items: center;
	margin-bottom: 15px;

	@media (--viewport-large) {
		padding-left: 10px;
		margin-right: 60px;
	}
}

.stats-item-header-icon {
	font-size: 3em;
}

.stats-item-header-title {
	color: #606060;
	font-size: 1.4rem;
	font-weight: 500;
}

.stats-item-content {
	@media (--viewport-medium) {
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-gap: 20px;
		align-items: flex-start;
	}

	@media (--viewport-large) {
		flex-grow: 1;
	}
}

.stats-item-summary {
}

.stats-item-summary-title {
	font-size: 0.8rem;
	display: flex;
	justify-content: space-between;
	border-bottom: 3px solid #e6e6e6;
	padding-bottom: 5px;
	margin-bottom: 10px;
}

.stats-item-summary-list {
	font-size: 0.75rem;
}

.stats-item-summary-list-item {
	display: flex;
	justify-content: space-between;
}

.stats-item-list {
	font-size: 0.75rem;
	margin-top: 10px;

	@media (--viewport-small) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 5px 40px;
	}

	@media (--viewport-medium) {
		font-size: 0.8rem;
		grid-row-gap: 20px;
		margin-top: 0;
	}
}

.stats-item-list-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px;

	&:last-child {
		margin-bottom: 0;
	}

	@media (--viewport-small) {
		margin-bottom: 0;
	}
}

.stats-item-list-item-label {
	font-style: italic;

	@media (--viewport-medium) {
		flex-grow: 1;
		text-align: right;
	}
}

.stats-item-list-item-value {
	font-weight: 700;
	text-align: right;
	min-width: 25px;
	padding-right: 5px;
	border-right: 1px dotted #ddd;
	border-bottom: 1px dotted #ddd;

	@media (--viewport-medium) {
		margin-left: 40px;
	}
}

/* Web Terminal
   ========================================================================== */
.web-terminal {
	padding: 10px;
	background-color: #000;
}

/* Forms
   ========================================================================== */

.form-container {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	padding: 30px 20px;
}

.form-container-wide {
	max-width: 920px;
}

@media (--viewport-medium) {
	.sidebar-right-grid {
		display: grid;
		gap: 50px;
		grid-template-columns: 2fr 340px;
	}

	.sidebar-right-grid-content {
	}

	.sidebar-right-grid-sidebar {
	}
}

@media (--viewport-medium) {
	.sidebar-left-grid {
		display: grid;
		gap: 20px;
		grid-template-columns: 1fr 3fr;
	}

	.sidebar-left-grid-sidebar {
	}

	.sidebar-left-grid-content {
	}
}

@media (--viewport-large) {
	.sidebar-left-grid {
		gap: 50px;
	}
}

.form-label {
	margin-bottom: 5px;
	display: inline-block;
}

.form-label,
.form-check label {
	color: #4b4b4b;
	font-weight: 600;
}

.form-control {
	background-color: #fff;
	border: 1px solid #cfcfcf;
	display: block;
	width: 100%;
	padding: 8px 12px;
	font-size: 16px;
	font-weight: normal;
	color: #4e4e4e;
	border-radius: var(--border-radius-base);
	line-height: 1.5;
	appearance: none;
	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
	transition: background-color 0.5s;

	&:hover {
		border-color: #94c8f0;
	}

	&:focus {
		outline: 0;
		border-color: #008fee;
		background-color: #d7f9ff;
		color: #333;
	}

	&.list-editor {
		border-color: transparent;
		box-shadow: none;
		position: absolute;
		padding-top: 7px;
		padding-bottom: 7px;
		width: auto;
		top: 1px;
		left: 1px;
		right: 30px;

		&:hover {
			border-color: transparent;
		}

		&:focus {
			background-color: #fff;
		}
	}

	&.highlighted {
		color: #444;
		background-color: #fff7b6;
	}

	@media (--viewport-small) {
		font-size: 0.8rem;
	}
}

.form-select {
	display: block;
	width: 100%;
	font-weight: normal;
	font-size: 16px;
	padding: 8px 30px 8px 12px;
	line-height: 1.5;
	border-radius: var(--border-radius-base);
	background-color: #fff;
	border: 1px solid #ccc;
	color: #4e4e4e;
	appearance: none;
	background-image: url("/images/arrow.svg");
	background-size: 16px auto;
	background-repeat: no-repeat;
	background-position: right 9px center;
	text-shadow: 0 0 0 #4b4b4b;
	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);

	&:hover {
		border-color: #94c8f0;
	}

	&:focus {
		outline: 0;
		border-color: #008fee;
	}

	@media (--viewport-small) {
		font-size: 0.8rem;
	}
}

.form-check {
	position: relative;
	padding-left: 20px;
	margin-left: 3px;
	min-height: 24px;
}

.form-check-input {
	position: absolute;
	margin-top: 3px;
	margin-left: -20px;
}

.form-control:disabled,
.form-select:disabled {
	background-color: #e7e7e7;
	text-shadow: 1px 1px rgb(255 255 255 / 100%);
	color: #686868;
}

.form-control:focus:disabled {
	border-color: #dedede;
	background-color: #f1f1f1;
}

.form-control:disabled:hover,
.form-select:disabled:hover {
	border-color: #cfcfcf;
}

.form-link {
	color: var(--color-text-link);
	cursor: pointer;
	text-decoration: underline;
	font-weight: 600;
	border-radius: var(--border-radius-base);
	margin-left: -3px;
	border: 0;
	padding-left: 3px;
	padding-right: 3px;
	background-color: transparent;

	&:hover {
		text-decoration: none;
		color: #fff;
		background-color: #3b9de8;
	}

	&:active {
		background-color: #54a6e5;
	}
}

.form-link-danger {
	&:hover {
		background-color: #c36;
	}

	&:active {
		background-color: #f7d616;
	}
}

.password-meter {
	height: 3px;
	overflow: hidden;
	margin-left: 3px;
	margin-right: 3px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
}

.password-meter-input {
	appearance: none;
	display: block;
	width: 100%;
	height: 100%;
	background: #e7e7e7;

	&[value="1"] {
		background: red;

		&::-moz-meter-bar {
			background: red;
		}

		&::-webkit-meter-bar {
			background: red;
		}

		&::-webkit-meter-optimum-value {
			background: red;
		}
	}

	&[value="2"] {
		background: orange;

		&::-moz-meter-bar {
			background: orange;
		}

		&::-webkit-meter-bar {
			background: orange;
		}

		&::-webkit-meter-optimum-value {
			background: orange;
		}
	}

	&[value="3"] {
		background: yellow;

		&::-moz-meter-bar {
			background: yellow;
		}

		&::-webkit-meter-bar {
			background: yellow;
		}

		&::-webkit-meter-optimum-value {
			background: yellow;
		}
	}

	&[value="4"] {
		background: green;

		&::-moz-meter-bar {
			background: green;
		}

		&::-webkit-meter-bar {
			background: green;
		}

		&::-webkit-meter-optimum-value {
			background: green;
		}
	}
}

.unlimited-toggle {
	position: absolute;
	top: 0;
	right: 1px;
	z-index: 1;
	border: 0;
	padding: 0 13px;
	opacity: 0.5;
	height: 100%;
	background-color: transparent;

	&:hover {
		opacity: 0.8;
	}

	&.active {
		opacity: 1;
	}

	& .fas {
		font-size: 0.8rem;
		color: #4e4e4e;
	}
}

.optional {
	font-size: 0.8rem;
	margin-left: 6px;
	font-weight: normal;
}

.hint {
	color: #777;
	font-size: 0.8rem;
	font-style: italic;
	font-weight: normal;
}

.hint-prefix {
	color: #555;
	font-size: 0.8rem;
}

/* Modals
   ========================================================================== */

.modal {
	background-color: #f0efef;
	border: 1px solid rgb(255 255 255 / 98%);
	border-radius: var(--border-radius-base);
	box-shadow:
		inset 0 1px 3px rgb(0 0 0 / 25%),
		0 8px 40px 0 rgb(0 0 0 / 35%);

	@media (--viewport-small) {
		min-width: 360px;
		max-width: 460px;
	}
}

.modal-title {
	color: #305ba9;
	font-size: 1rem;
	text-align: center;
	padding: 15px 20px 0;
}

.modal-message {
	color: #535353;
	text-align: center;
	padding: 25px 20px;
}

.modal-options {
	box-shadow: inset 0 0 2px rgb(0 0 0 / 25%);
	display: flex;
	justify-content: flex-end;
	padding: 10px;
}

/* Shortcuts panel
   ========================================================================== */

.shortcuts {
	background-color: rgb(50 50 50 / 93%);
	color: #eee;
	border: 1px solid rgb(255 255 255 / 70%);
	border-radius: 6px;
	box-shadow: 0 8px 40px 0 rgb(0 0 0 / 35%);

	& li {
		padding: 5px 20px;
	}

	& .key {
		color: #ff3478;
		display: inline-block;
		font-weight: 600;
		padding-right: 20px;

		&.bigger {
			font-size: 1.1rem;
		}
	}
}

.shortcuts-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #606060;
	padding: 10px 10px 10px 20px;
}

.shortcuts-title {
	text-transform: uppercase;
	color: #ff3478;
	font-weight: 600;
}

.shortcuts-close {
	cursor: pointer;
	padding: 5px 10px;

	&:hover {
		color: #db0000;
	}

	&:active {
		color: #a60000;
	}
}

.shortcuts-inner {
	@media (--viewport-medium) {
		display: flex;
	}
}

.shortcuts-list {
	flex-grow: 1;
	padding: 40px;
}

/* Buttons
   ========================================================================== */

.button {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 21px;
	font-size: 0.85rem;
	font-weight: 500;
	padding: 3px 25px;
	user-select: none;
	color: var(--color-text-link);
	min-width: 100px;
	text-align: center;
	text-shadow: 0 1px 1px rgb(255 255 255 / 85%);
	border: 1px solid #0083db;
	border-radius: 3px;
	background: linear-gradient(
			to bottom,
			rgb(235 243 249 / 100%) 0%,
			rgb(192 216 236 / 100%) 51%,
			rgb(223 235 245 / 100%) 100%
		),
		#3b9de8;
	box-shadow:
		0 1px 3px rgb(0 0 0 / 25%),
		inset 0 0 1px #fff,
		inset 0 0 3px rgb(255 255 255 / 50%);

	&:hover {
		color: #0077c6;
		text-shadow: 1px 1px rgb(255 255 255 / 50%);
		border-color: #54a6e5;
		background: linear-gradient(
			to bottom,
			rgb(241 248 253 / 100%) 0%,
			rgb(190 221 246 / 100%) 51%,
			rgb(227 240 251 / 100%) 100%
		);
		box-shadow:
			0 1px 3px rgb(0 0 0 / 25%),
			inset 0 0 1px #fff,
			inset 0 0 6px rgb(255 255 255 / 60%);
	}

	&:active {
		color: #517bab;
		text-shadow: 0 -1px 2px rgb(255 255 255 / 85%);
		border-color: #0066b4;
		background: linear-gradient(
			to bottom,
			rgb(194 224 248 / 100%) 0%,
			rgb(162 207 244 / 100%) 51%,
			rgb(210 232 250 / 100%) 100%
		);
		box-shadow:
			0 1px 2px rgb(0 0 0 / 20%),
			inset 0 0 1px #fff,
			inset -1px -1px 4px rgb(220 220 220 / 40%);
	}

	& .fas {
		margin-right: 6px;
	}
}

.button-secondary {
	color: #717171;
	border-color: #aaa;
	background: linear-gradient(
		to bottom,
		rgb(250 250 250 / 100%) 0%,
		rgb(230 230 230 / 100%) 51%,
		rgb(242 242 242 / 100%) 100%
	);
}

.button-danger {
	&:hover {
		background: linear-gradient(to bottom, #fbf2f1 0%, #f6b4ac 51%, #fde6e3 100%);
		color: #f4301a;
		text-shadow: 0 1px rgb(255 255 255 / 50%);
		border-color: #f27e71;
	}

	&:active {
		background: linear-gradient(to bottom, #fcd0ca 0%, #f5a69d 50%, #f9e3df 100%);
		color: #ce1500;
		text-shadow:
			0 1px 1px rgb(255 255 255 / 20%),
			0 -1px 1px rgb(255 255 255 / 60%);
		border-color: #f4301a;
	}
}

.button-circle {
	border-radius: 50%;
	min-width: 30px;
	min-height: 30px;
	padding: 3px;

	& .fas {
		line-height: 1.1;
		margin-right: 0;
	}
}

.button-floating {
	display: none;

	@media (--viewport-medium) {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		z-index: 1;
		bottom: 70px;
	}
}

.button-floating-top {
	right: 60px;
}

.button-floating-shortcuts {
	right: 110px;
}

/* Clipboard component
   ========================================================================== */

.clipboard {
	display: flex;

	& .clipboard-input {
		cursor: default;
		border-color: #e9e9e9;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
}

.clipboard-button {
	display: flex;
	align-items: center;
	border: 0;
	border-top-right-radius: var(--border-radius-base);
	border-bottom-right-radius: var(--border-radius-base);
	background-color: #e9e9e9;
	padding-left: 8px;
	padding-right: 8px;
	font-size: 0.75rem;
	color: var(--color-text);

	&:hover {
		& .fas {
			color: var(--color-text-link-hover);
		}
	}

	& .fas {
		font-size: 0.8rem;
	}
}

/* Values List component
   ========================================================================== */

.values-list {
}

.values-list-item {
	margin-bottom: 3px;

	@media (--viewport-small) {
		display: flex;
	}
}

.values-list-label {
	display: block;
	font-weight: 600;

	@media (--viewport-small) {
		min-width: 130px;
	}
}

.values-list-value {
}

/* Server summary component
   ========================================================================== */

.server-summary {
	padding: 20px;

	@media (--viewport-medium) {
		display: flex;
	}
}

.server-summary-icon {
	text-align: center;
	margin-bottom: 10px;

	& .fas {
		font-size: 4.6rem;
	}

	@media (--viewport-medium) {
		margin-top: 8px;
		margin-bottom: 0;
	}
}

.server-summary-content {
	text-align: center;

	@media (--viewport-medium) {
		text-align: left;
		flex-grow: 1;
		margin-left: 30px;
	}

	@media (--viewport-large) {
		margin-left: 40px;
	}
}

.server-summary-title {
	margin-bottom: 10px;

	@media (--viewport-medium) {
		font-size: 1.7rem;
		margin-bottom: 0;
	}
}

.server-summary-list {
	@media (--viewport-medium) {
		display: flex;
		justify-content: space-between;
	}
}

.server-summary-item {
	@media (--viewport-large) {
		min-width: 200px;
	}
}

.server-summary-list-label {
	font-weight: 600;

	@media (--viewport-medium) {
		display: block;
	}
}

.server-summary-list-value {
}

/* Panel component
   ========================================================================== */

.panel {
	padding: 20px;
	border: 1px solid #d9d9d9;
	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
	border-radius: var(--border-radius-base);

	& .form-control {
		box-shadow: none;
		padding: 5px 10px;
	}
}

/* Box collapse component
   ========================================================================== */

.box-collapse {
}

.box-collapse[open] .box-collapse-header::after {
	transform: rotate(180deg);
}

.box-collapse-header {
	background: linear-gradient(to bottom, rgb(247 247 247 / 100%) 0%, rgb(255 255 255 / 100%) 100%);
	border: 1px solid #ddd;
	text-shadow: 0 1px rgb(255 255 255 / 95%);
	box-shadow:
		inset 0 0 1px rgb(255 255 255 / 100%),
		inset 0 0 4px rgb(255 255 255 / 80%),
		0 4px 6px rgb(190 190 190 / 40%);
	font-weight: 600;
	color: var(--color-text-link);
	cursor: pointer;
	position: relative;
	padding: 8px 18px;

	&:hover {
		color: #ff3478;
	}

	&::after {
		content: "";
		display: block;
		background-image: url("/images/arrow.svg");
		background-size: 22px auto;
		background-repeat: no-repeat;
		background-position: center;
		width: 22px;
		height: 100%;
		position: absolute;
		top: 0;
		right: 15px;
	}

	& .fas {
		min-width: 20px;
	}
}

.box-collapse-content {
	box-sizing: border-box; /* Work around box-sizing not inheriting in <details> in many browsers */
	padding: 20px 20px 10px;

	@media (--viewport-medium) {
		padding: 20px 50px 10px;
	}
}

/* Collapse component
   ========================================================================== */

.collapse {
}

.collapse[open] .collapse-header::after {
	content: "\f146";
}

.collapse-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	color: var(--color-text-heading);
	font-size: 1.05rem;
	font-weight: 600;
	padding-top: 28px;
	padding-bottom: 12px;
	border-bottom: 1px solid #ccc;

	&:hover {
		&::after {
			color: var(--icon-color-maroon);
		}
	}

	&::after {
		font: var(--fa-font-solid);
		content: "\f0fe";
		color: #ddd;
		display: inline-block;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
	}
}

.collapse-content {
	box-sizing: border-box; /* Work around box-sizing not inheriting in <details> in many browsers */
	padding-top: 15px;
}

/* Login
   ========================================================================== */

.page-login,
.page-reset {
	background: radial-gradient(circle, rgb(102 158 231 / 100%) 0%, rgb(43 86 177 / 100%) 100%),
		rgb(102 158 231);

	& .debug-panel {
		display: none;
	}

	& .app {
		align-items: center;
		justify-content: center;
		flex-direction: row;
	}
}

.login {
	flex-grow: 1;
	padding: 30px;
	margin-bottom: 15%;

	& .form-label {
		color: #fff;
	}

	& .error {
		color: #be5abf;
		margin-bottom: 20px;
	}

	@media (--viewport-small) {
		border-radius: 6px;
		background-color: rgb(255 255 255 / 70%);
		box-shadow:
			0 8px 25px rgb(0 0 0 / 30%),
			inset 0 0 2px rgb(255 255 255 / 100%);
		padding: 70px 50px;
		max-width: 370px;

		& .form-label {
			color: #4b4b4b;
		}
	}

	@media (--viewport-medium) {
		display: flex;
		align-items: flex-end;
		gap: 30px;
		max-width: 500px;

		& form {
			flex-grow: 1;
		}
	}
}

.login-title {
	color: #fff;
	font-size: 1.05rem;
	font-weight: 500;
	margin-bottom: 30px;

	@media (--viewport-small) {
		color: var(--color-text-heading);
	}
}

.login-form-link {
	color: #fff;
	text-transform: uppercase;

	@media (--viewport-small) {
		color: var(--color-text-link);

		&:hover {
			color: #0077c6;
		}
	}
}

/* Spinner
   ========================================================================== */

.spinner-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 50px;
	color: #fff;
	background-color: rgb(0 0 0 / 50%);
	font-size: 50px;
	z-index: 4;
	visibility: hidden;
	opacity: 0;

	&.active {
		visibility: visible;
		opacity: 1;
	}

	& .fas {
		border-radius: 50%;
		box-shadow: 0 0 40px 0 rgb(0 0 0 / 35%);
	}
}

.qr-code {
	border: 1px solid #cfcfcf;
	border-radius: var(--border-radius-base);
	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
}

.logs-container {
	height: 100%;
	padding: 20px;
	overflow-y: auto;
	max-height: calc(100vh - 40px - 40px);

	@media (--viewport-medium) {
		max-height: calc(100vh - 40px - 60px);
	}
}

.console-output {
	color: #202020;
	font-family: var(--font-family-monospace);
	font-size: 0.92rem;
	line-height: 1.2;
}

/* Icon component
   ========================================================================== */

.icon-large {
	font-size: 1rem;
}

.icon-teal {
	color: var(--icon-color-teal);

	&:hover {
		color: var(--icon-color-teal);
	}
}

.icon-purple {
	color: var(--icon-color-purple);

	&:hover {
		color: var(--icon-color-purple);
	}
}

.icon-maroon {
	color: var(--icon-color-maroon);

	&:hover {
		color: var(--icon-color-maroon);
	}
}

.icon-red {
	color: var(--icon-color-red);

	&:hover {
		color: var(--icon-color-red);
	}
}

.icon-green {
	color: var(--icon-color-green);

	&:hover {
		color: var(--icon-color-green);
	}
}

.icon-orange {
	color: var(--icon-color-orange);

	&:hover {
		color: var(--icon-color-orange);
	}
}

.icon-blue {
	color: var(--icon-color-blue);

	&:hover {
		color: var(--icon-color-blue);
	}
}

.icon-lightblue {
	color: var(--icon-color-lightblue);

	&:hover {
		color: var(--icon-color-lightblue);
	}
}

.icon-highlight {
	color: #323232;

	&:hover {
		color: #323232;
	}
}

.icon-dim {
	color: #ddd;
	text-shadow: 1px 1px rgb(255 255 255 / 30%);
}

/* Tabs component
   ========================================================================== */

.tabs {
	border: 1px solid #cfcfcf;
	border-radius: var(--border-radius-base);
	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
	padding: 10px;
}

.tabs-items {
	display: flex;
	flex-wrap: wrap;
}

.tabs-item {
	border: 0;
	background-color: transparent;
	text-transform: uppercase;
	font-weight: 600;
	color: #777;
	padding: 10px;

	&:hover,
	&[aria-selected="true"] {
		color: var(--color-text-link-hover);
	}

	&:active {
		color: #3b9de8;
	}

	@media (--viewport-medium) {
		margin-right: 10px;
	}
}

.tabs-panel {
	padding: 10px;
}

.cron-tabs {
	margin-top: 20px;

	@media (--viewport-medium) {
		margin-top: 25px;

		& .form-label {
			padding-right: 15px;
			padding-left: 25px;

			&.first {
				display: inline-block;
				width: 120px;
				padding-left: 0;
			}
		}

		& .form-select {
			display: inline-block;
			max-width: 384px;
		}
	}
}

/* App footer
   ========================================================================== */

.app-footer {
	flex: none;
	color: #7c7c7c;
	border-top: 1px solid #ddd;
	text-align: center;
	font-size: 0.8rem;
	padding: 10px;

	@media (--viewport-medium) {
		text-align: left;
		padding: 20px;
	}
}

.app-footer-link {
	color: #7c7c7c;
}

/* Alerts
   ========================================================================== */

.alert {
	border-radius: var(--border-radius-base);
	border: 1px solid var(--alert-border-color);
	color: #fff;
	font-weight: 400;
	padding: 15px;
	box-shadow: var(--alert-box-shadow);
	text-shadow: var(--alert-text-shadow);

	& a {
		color: #fff;
		font-weight: bold;

		&:hover {
			text-decoration: underline;
		}
	}

	& .fas {
		flex-shrink: 0;
		width: 32px;
		height: 32px;
		font-size: 1.3rem;
		font-weight: 600;
		line-height: 30px;
		border-radius: 50%;
		text-align: center;
		background-color: #fff;
		margin-bottom: 10px;
	}

	@media (--viewport-small) {
		display: flex;

		& .fas {
			margin-right: 15px;
			margin-bottom: 0;
		}
	}
}

.alert-info {
	background-color: var(--alert-info-color);

	& .fas {
		color: var(--alert-info-color);
	}
}

.alert-danger {
	background-color: var(--alert-danger-color);

	& .fas {
		color: var(--alert-danger-color);
	}
}

.alert-success {
	background-color: var(--alert-success-color);

	& .fas {
		color: var(--alert-success-color);
	}
}

/* Inline alerts
		========================================================================== */

.inline-alert {
	display: flex;
	font-weight: 600;

	& .fas {
		margin-top: 4px;
		margin-right: 6px;
	}
}

.inline-alert-danger {
	color: #f33;
}

.inline-alert-warning {
	color: #ecc500;
}

.inline-alert-success {
	color: #53ba55;

	& a {
		color: var(--color-text-link);

		&:hover {
			color: var(--color-text-link-hover);
		}

		&:active {
			color: #d53067;
		}
	}
}

/* Updates banner
   ========================================================================== */

.updates-banner {
	width: 100%;
	text-align: center;
	border-top: 1px solid rgb(255 255 255 / 25%);
	box-shadow: 0 -2px 4px rgb(0 0 0 / 40%);
	background-color: green;
	color: #fff;
	font-size: 0.75rem;
	padding: 10px;
	position: fixed;
	bottom: 0;

	& button {
		border: 0;
		padding: 0;
		background-color: transparent;
		color: #fff;
		font-weight: 500;

		&:hover {
			color: #fff;
			text-decoration: underline;
		}
	}
}

/* Debug panel
   ========================================================================== */

.debug-panel {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 3;
	box-shadow: 0 0 5px rgb(0 0 0 / 40%);

	@media (--viewport-medium) {
		width: auto;
	}
}

.debug-panel-toggle {
	display: block;
	width: 100%;
	border: 0;
	text-align: center;
	font-size: 0.8rem;
	font-weight: 500;
	color: #000;
	padding: 10px 15px;
	background-color: #ff0;

	&:hover {
		background-color: #f1f100;
	}
}

.debug-panel-content {
	background-color: #eee;
	font-size: 0.75rem;
	padding: 20px;
	max-height: 300px;
	overflow: auto;
}