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

html, body {
  touch-action: manipulation;
}

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;
	scrollbar-width: none;
}

.mainContainer section {
	background: var(--section-bg);

	.body {}

	&.inputField {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		align-items: center;
		background: var(--background-bg);

		.head {
			>* {
				background: #eee;
				border-radius: .3rem;
				text-align: center;
			}
		}

		>* {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			gap: .25rem;
			width: min(100%, 30rem);
			textarea {
				width: 100%;
				padding: .5rem .5rem;
				font-size: 1.2rem;
				border-radius: .3rem;
				background: var(--section-bg);
				resize: none;
				outline-offset: -1px;

				&::-webkit-scrollbar {
					display: none;
				}

				&:hover {
					outline: 1px solid var(--col-green);
				}

				&:focus {
					outline: 1px solid var(--col-orange);
					background: var(--content-bg);
				}
			}

			.summary {
				flex-grow: 1;
				flex-shrink: 1;
				line-height: 1;
			}

			.buttons {
				display: flex;
				align-items: stretch;
				gap: .25rem;
				min-height: 2.5rem;

				>* {
					display: flex;
					align-items: center;
				}

				input {
					display: none;
				}

				.btn {
					background: var(--section-bg);
					text-align: center;
					border-radius: .3rem;
					cursor: pointer;
					outline-color: var(--border-color);
					color: var(--text-color);

					&.checked {
						background: var(--col-orange);
						color: var(--col-yellow);
					}

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

				.btnCopy {
					flex-grow: 1;
				}

				.btnArchive {
					width: 3rem;
				}
			}
		}
	}

	&.settingX {
		.unit {
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			gap: .5rem;
			padding: .5rem;

			fieldset {
				position: relative;
				padding: .7rem 0 0;
				display: flex;
				align-items: stretch;
				gap: .2rem;

				.border {
					border: 1px solid #eee;
				}

				.btn {
					display: flex;
				}

				label {
					position: absolute;
					top: 0;
					left: 0;
					padding: 1px;
					font-size: .5rem;
					background: #333;
					color: #fff;
					line-height: 1;
				}

				input[type="text"] {
					padding: 0.25rem .5rem;
					width: auto;
				}
			}
		}
	}

	&.settingCategory {
		.unit {
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			gap: .5rem;
			padding: .5rem;

			fieldset {
				position: relative;
				padding: .7rem 0 0;
				display: flex;
				align-items: stretch;
				gap: .2rem;

				.border {
					border: 1px solid #eee;
				}

				.btn {
					display: flex;
				}

				label {
					position: absolute;
					top: 0;
					left: 0;
					padding: 1px;
					font-size: .5rem;
					background: #333;
					color: #fff;
					line-height: 1;
				}

				input[type="text"] {
					padding: 0.25rem .5rem;
					width: auto;
				}
			}
		}
	}

	&.jsonFileUpdate {
		padding: 1rem;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		align-items: center;

		div {}

		.button span {
			padding: .5rem;
		}
	}

}

.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;
	}
}