* {
	font-family: 'LINESeed', sans-serif;
	box-sizing: border-box;
	--main-button-border-color: hsl(29, 10%, 50%);
	--main-button-color: hsl(29, 10%, 85%);
	--main-button-hover-color: hsl(29, 10%, 90%);
	--main-button-active-color: hsl(29, 10%, 87%);

	--selection-hover-highlight: #c7def5;
	--selection-highlight: #275f97;
	--input-focus: #3498db;

}

body {
	background-color: #bbb;

	&.loading {
		pointer-events: none;

		&::before {
			content: "";
			position: fixed;
			top: 0;
			left: 0;
			width: 100dvw;
			height: 100dvh;
			background: rgba(0, 0, 0, 0.6);
			z-index: 9999;
		}

		&::after {
			content: "";
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 48px;
			height: 48px;
			border: 6px solid #fff;
			border-top: 6px solid #3498db;
			border-radius: 50%;
			animation: loading-spin 1s linear infinite;
			z-index: 10000;
			opacity: 0.9;
			margin: 0 auto;
		}
	}
}

@keyframes loading-spin {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

a {
	color: #00f;

	&:hover {
		color: #f00;
		text-decoration: none;
	}
}

button {
	cursor: pointer;
	border: 1px solid var(--main-button-border-color);
	border-radius: 7px;
	background: linear-gradient(#fff, var(--main-button-color));
	padding: 0.25rem 0.5rem;
	color: #333;
	outline: none;
	user-select: none;

	&:hover {
		background: linear-gradient(var(--main-button-color), var(--main-button-hover-color));
	}

	&:active {
		filter: brightness(0.95);
	}

	&:disabled {
		background: #aaa;
		border-color: #aaa;
		pointer-events: none;
		opacity: 0.5;

		&>img {
			opacity: 0.5;
		}
	}

	&.large-button {
		padding-bottom: 0;
		margin-right: 1.0rem;

		&>img {
			width: 5.0em;
		}
	}

	&.animation-button {
		&>img {
			display: inline-block;
			height: 0.7em;
			margin-right: 0.25rem;
		}
	}

	&>img {
		display: block;
		margin: 0 auto;
	}
}

input:not([type="range"]),
select {
	border: 1px solid #555;
	outline: none;

	&:focus {
		border: 1px solid var(--input-focus) !important;
		outline: none;
		box-shadow: 0 0 5px var(--input-focus);
	}
}


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

#img-area {
	z-index: 1;
	position: relative;
}

#control-panel {
	background-color: #eee;
	padding: 1.5rem;
	margin-top: -120px;
	z-index: 2;
	position: relative;
	width: 100%;

	& #led-controller-area {
		margin-bottom: 2.0rem;
		display: flex;

		&>* {
			margin-right: 1.0rem;
			vertical-align: top;
		}

		&>div {

			& .input-container:has(+select:disabled) {

				& .led-control-input-pull-down,
				& .led-control-input-box {
					pointer-events: none;
					opacity: 0.5;
					filter: brightness(0.75);
					user-select: none;
				}
			}

			& input.led-control-input-box {
				display: block;
				width: 15rem;
			}

			& select.led-control-select-box {
				width: 15rem;
			}

			&#color-container {
				display: flex;
				gap: 1.0rem;

				& select {
					display: block;
					height: calc(50% - 1.0rem);
					width: 10rem;
					margin-bottom: 1.0rem;
				}

				& #color-input-box {
					height: 50%;
					width: 10rem;
					cursor: pointer;
				}
			}
		}

	}

	& .button-area {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	& #animations-and-article-container {
		margin-top: 2.0rem;
	}

	& #animations-container {
		padding: 1.0rem;
		background-color: #fff;
		font-size: 9pt;

		&:has(+ #artcle-area) {
			margin-bottom: 2.0rem;
		}

		& #animation-controls {
			&>* {
				margin-right: 1rem;
			}
		}

		& #animation-list-container {
			margin-top: 0.5rem;
			font-size: 0.9rem;
			max-height: 12rem;
			overflow-y: auto;
			border: 1px solid #ccc;
			padding: 0;
			font-size: 9pt;

			& #animation-count {
				position: sticky;
				display: block;
				top: 0;
				left: 0;
				background-color: #fff;
				padding: 0.1rem 0.2rem;
				border-bottom: 1px solid #eee;
			}

			& ul {
				margin: 0;
				padding-left: 0;
				color: #666;

				& li {
					list-style-type: none;
					cursor: pointer;
					padding: 0.1rem 0.2rem;

					&:hover {
						background-color: var(--selection-hover-highlight);
					}

					&.playing {
						background-color: var(--selection-highlight);
						color: #fff;
					}

					& .subtext {
						font-size: 0.7em;
						color: #999;
						margin-left: 0.5rem;
						vertical-align: middle;

						&::before {
							content: '(';
						}

						&::after {
							content: ')';
						}
					}
				}
			}

		}

		& div.animation-description-label::before {
			content: "▲クリックで削除▲";
		}

		&:has(li.playing) {
			& li {
				pointer-events: none;
			}

			& div.animation-description-label::before {
				content: "アニメーション再生中";
			}
		}
	}

}

#artcle-area {
	font-size: 9pt;
}

.accessory-bar {
	position: absolute;
	width: 100%;
	left: 0;
	z-index: 0;

	&#color-bar {
		top: 12px;
		height: 111px;
		background-color: #000;
	}

	&#bottom-bar1 {
		top: 141px;
		height: 1px;
		background-color: #fff;
	}

	&#bottom-bar2 {
		top: 160px;
		height: 1px;
		background-color: #555555;
	}
}

div#file-time {
	display: none;
}


.only-smartphone {
	display: none;
}

.access-from-smartphone {
	#control-panel {
		padding: 2.0rem;

		& #led-controller-area {
			margin-bottom: 1.0rem;
			display: block;
			font-size: 5vw;

			&>* {
				margin-right: 0;
				margin-bottom: 1.0rem;
			}

			&>div {
				& .input-container {
					position: relative;
					margin-bottom: 0.5em;

					& .led-control-input-box {
						width: 100%;
						padding-left: 0.3em;
						font-size: 5vw;

					}
				}

				& .led-control-select-box:not(#color-input-box) {
					font-size: 5vw;
					width: 100%;
					margin-bottom: 1.0em;
				}

				&#color-container {
					margin-top: 2.5rem;
					margin-bottom: 10vw;
					width: 100%;

					&>div,
					& #no-color-button {
						font-size: 4vw;
						width: 50%;
					}

					&>div>select,
					&>div>#color-input-box {
						width: 100%;
						width: 100%;
						height: calc(50% - 0.2rem);
						margin-bottom: 0.1rem;
					}

					&>div>select {
						background-color: #fff;
					}
				}
			}
		}

		& .button-area {
			display: flex;
			justify-content: space-between;

			&>button {
				flex-grow: 1;
				font-size: 2vw;
				padding: 0.5rem;
				padding-bottom: 0;
			}
		}


		& #animations-container {
			& #animation-controls {
				font-size: 3vw;
				margin-bottom: 1.0em;

				& button {
					font-size: 2.5vw;
				}
			}
		}
	}

	&:not(.unsupported-showpicker) {
		.only-smartphone {
			display: block;
		}

		#control-panel {
			& #led-controller-area {
				&>div {
					& .input-container {
						& .led-control-input-pull-down {
							display: block;
							position: absolute;
							font-weight: bold;
							margin-bottom: 0.5rem;
							top: 0;
							right: 0;
							padding: 0.1rem;
							padding-left: 8vw;
							padding-right: 0.3em;
							cursor: pointer;
							color: #444;
						}
					}

					& .led-control-select-box:not(#color-input-box) {
						visibility: hidden;
						height: 0;
						margin: 0;
						padding: 0;
						position: absolute;
						z-index: -1;
						opacity: 0;
						top: 0;
						left: 0;
					}

					&#color-container {
						margin-top: 2.5rem;
						margin-bottom: 2.5rem;
					}
				}
			}
		}
	}
}