body {
	margin: 0;
	line-height: normal;
}

:root {
	/* Color */
	--color-steelblue: #3881a6;
	--color-whitesmoke: #f0f2f5;
	--color-darkgray: #96abb1;
	--color-black: #000;
	--color-gray-200: #121417;
	--color-gray-100: #252525;
	--color-silver: #a9bbc0;
	--color-slategray: #637d87;
	--color-white: #fff;
	--color-brown: brown;
	--color-green: green;
	--color-indianred: #be695b;
	--color-tan: #bbc1a0;
	--color-gray: #252525;
	--color-whitesmoke-200: #e5ecee;
	--color-whitesmoke-100: #f5f5f5;
	--color-lightslategray-200: #7d96a1;
	--color-lightslategray-100: #869ca4;
	--color-gainsboro: #d9d9d9;
	--color-gray: #20272f;
	--color-steelblue: #3881a6;
	--color-whitesmoke: #f5f5f5;
	--color-slategray-200: #61758a;
	--color-slategray-100: #637d87;
	--color-silver-300: rgba(182, 202, 208, 0.35);
	--color-silver-200: #a9bbc0;
	--color-silver-100: #bfbfbf;

	/* Gap */
	--gap-11: 11px;
	--gap-12: 12px;
	--gap-8: 8px;
	--gap-4: 4px;
	--gap-16: 16px;
	--gap-30: 30px;
	--gap-20: 20px;
	--gap-26: 26px;
	--gap-18: 18px;
	--gap-24: 24px;
	--gap-19: 19px;

	/* Padding */
	--padding-16: 16px;
	--padding-24: 24px;
	--padding-26: 26px;
	--padding-19: 19px;
	--padding-20: 20px;
	--padding-14: 14px;
	--padding-10: 10px;
	--padding-11: 11px;
	--padding-6: 6px;
	--padding-15: 15px;

	/* BorderRadius */
	--br-25: 25px;
	--br-20: 20px;
	--br-15: 15px;
	--br-12: 12px;
	--br-10: 10px;
	--br-5: 5px;
	--br-3: 3px;
	--br-3: 3px;

	/* Font */
	--font-ibm-plex-serif: IBM Plex Serif;
	--font-lexend: Lexend;
	--font-hahmlet: Hahmlet;
	--font-hina-mincho: Hina Mincho;
	--font-im-fell-double-pica-sc: IM FELL Double Pica SC;
	--font-inter: Inter;
	--font-noto-sans-jp: Noto Sans JP;

	/* FontSize */
	--font-size-12: 12px;
	--font-size-19: 19px;
	--font-size-24: 24px;
	--font-size-36: 36px;
	--font-size-14: 14px;
	--font-size-22: 22px;
	--font-size-16: 16px;
	--font-size-20: 20px;
	--font-size-26: 26px;
	--font-size-32: 32px;
	--font-size-18: 18px;
}

.button-themed {
		padding: var(--padding-20) 41px var(--padding-19);
		border-radius: var(--br-15);
		background-color: #A9BBC0;
		cursor: pointer;
		font-size: var(--font-size-20);
		letter-spacing: 1px;
		line-height: 21px;
		color: var(--color-white);
		display: inline-block;
		z-index: 1;
}

.w100 {
	width: 100%;
}
.w20 {
	width: 20%;
}

body {
	margin: 0;
	line-height: normal;
}

.center-margin-auto {
	margin: auto;
}

.text-align-center {
	text-align: center;
}


.form input[type="file"] {
	border-radius: var(--br-15);
	background-color: #A9BBC0;
	cursor: pointer;
	font-size: var(--font-size-20);
	letter-spacing: 1px;
	line-height: 21px;
	color: var(--color_white);
	padding: 10px;
}

.autocomplete-suggestions {
  border: 1px solid #999;
  background: #fff;
  overflow: auto;
  position: absolute;
  z-index: 19999 !important;
  max-height: 200px !important;
  color: #3881A6;
  border-radius: 6px;
}
.autocomplete-suggestion {
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.autocomplete-selected {
  background: #f0f0f0;
}

.dropdown-container {
	position: relative;
	display: inline-block;
}

.dropdown-menu {
	display: none; /* keep this hidden initially */
	position: absolute;
	right: 0;
	top: 100%;
	background-color: white;
	border: 1px solid #ccc;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	z-index: 999;
	min-width: 160px;
	padding: 0.5em 0;
	box-sizing: border-box;
}

.dropdown-item {
	padding: 0.5em 1em;
	cursor: pointer;
	white-space: nowrap;
}

.dropdown-item:hover {
	background-color: #f0f0f0;
}

@media (hover: none) {
	.dropdown-item:active {
		background-color: #e0e0e0;
	}
}

#volume-control-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

#volume-slider {
	flex-grow: 1;
}

#mute-icon {
	width: 24px;
	height: 24px;
	cursor: pointer;
}