.material-symbols-outlined {
	display: flex;
	font-size: 1em;
}

header {
	display: flex;
	justify-content: space-between;

	>* {
		display: flex;
		align-items: center;
		gap: .5rem;
	}

	div.appTitle {
		display: flex;
		align-items: center;
		gap: .2rem;
	}

	.saveStatus {
		opacity: .6;

		&.saveFlag {
			opacity: 1;
			color: red;
		}

		&.saveHoldFlag {
			animation: blinking 1s ease-in-out infinite alternate;
		}
	}

	.lampStatus {
		font-size: .4rem;
		text-shadow: 0 0 2px #fff;
	}

	.lampNetwork {
		font-size: .4rem;
		text-shadow: 0 0 2px #fff;
	}

	.clock {
		visibility: hidden;
	}
}

.mainContainer {
	padding: 1rem;
	height: calc(100svh - 7.5rem);
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
	scrollbar-width: none;
}

.mainContainer section {
	.body {}
}

.statusBar {
	padding: 0 1rem;
	height: 1.5rem;
	background: var(--section-bg);
	display: flex;
	align-items: center;
	font-size: 80%;

	ul {
		display: flex;
		gap: 1rem;

		.message {
			.error {
				color: red;
			}

			.confirm {
				color: red;
			}
		}
	}
}

.bottom {
	display: grid;
	grid-template-columns: 1fr max-content;
	gap: 0 1rem;
	background: var(--background-bg);
	padding: 0.25rem 1rem;
	font-size: calc(1.375rem + ((1vw - 0.2rem) * -0.375));

	ul {
		display: flex;
		align-items: center;
		gap: 0 1rem;
		overflow-x: scroll;
		scrollbar-width: none;
		gap: 0 .3rem;

		>* {
			cursor: pointer;
		}

		a {
			display: contents;
		}

		li {
			padding: 0 .3rem;
			background: var(--section-bg);
			border-radius: var(--border-radius);
			height: 2.5rem;
			display: flex;
			align-items: center;
			white-space: nowrap;
			transition: all .2s;

			&:hover {
				background: var(--content-bg);
			}
		}
	}
}


#wsappend {
	background: var(--background-bg);

	.settingBoard {
		padding: 2rem 1rem;
		min-width: 20rem;

		.inner {
			display: flex;
			flex-direction: column;
			gap: 1rem;

			.title {
				text-align: center;
				font-weight: bold;
				background: var(--section-bg);
			}

			.name {
				text-align: center;
			}

			ul {
				display: flex;
				gap: .5rem;
				justify-content: center;

				li {}
			}
		}
	}
}

.btn {
	&.on {
		background: var(--col-orange);
	}
}

.center-box {
	display: grid;
	place-items: center;
	/* これだけで天地左右中央 */
	min-height: 100dvh;
	/* 画面全体の中央にしたい場合 */
}

.center-content {
	display: grid;
	place-content: center;
	gap: 1rem;
}

@keyframes blinking {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}