body {
	margin: 0;
	min-height: 100%;
	font-size: 20px;
	font-family: sans-serif;
	color: #fff;
	background-color: #000;
}

h1 {
	font-size: 20px;
	margin: 0;
	flex-grow: 1;
}

button, input {
	border-radius: 5px;
	padding: 5px;
	color: inherit;
	background-color: unset;
	border: unset;
	outline: none;
}
button:hover, input {
	background-color: #3b3b3b;
}

nav, footer {
	display: flex;
	position: fixed;
	align-items: center;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	background-color: #000;
	padding: 5px 10px;
}

nav {
	--nav_heigth: 50px;
	width: calc(100vw - 20px);
	height: var(--nav_heigth);
	max-width: 600px;
	top: 0;
	gap: 5px;
}

nav h1 {
	margin-left: 10px;
}

nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--nav_heigth);
	height: var(--nav_heigth);
	font-size: 30px;
}

footer {
	--footer_heigth: 45px;
	width: calc(100vw - 40px);
	height: var(--footer_heigth);
	max-width: 580px;
	bottom: 0;
	padding: 8px 20px;
}

footer input {
	height: calc(var(--footer_heigth) - 16px);
	padding: 5px 10px;
	padding-left: 20px;
	flex: 1 1 auto;
}

footer button {
	display: flex;
	margin-left: 5px;
	height: calc(var(--footer_heigth) - 6px);
	width: calc(var(--footer_heigth) - 6px);
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex: 0 0 auto;
}

/* ############################################### */
#alias_list {
	margin: 60px auto;
	max-width: 620px;
}

alias {
	--alias_heigth: 35px;
	display: flex;
	background-color: #222222;
	border-radius: 10px;
	height: var(--alias_heigth);
	padding: 5px 10px;
	padding-left: 20px;
	justify-content: right;
	align-items: center;
	gap: 5px;
	margin: 10px 20px;
}

alias.search_hidden {
	display: none;
}
alias.highlight {
	background-color: #4BD865;
}

alias span {
	display: inline-block;
	height: 100%;
	align-content: center;
	font-size: 15px;
	flex: 1 1 auto;
	overflow-x: auto;
	text-wrap: nowrap;
}

alias button {
	height: var(--alias_heigth);
	width: var(--alias_heigth);
	flex: 0 0 auto;
	background-position: center;
	background-repeat: no-repeat;
}
.alias_copy {
	background-image: url(copy.svg);
	background-size: 60%;
}
.alias_delete {
	background-image: url(delete.svg);
	background-size: 70%;
}

/* Toggle https://csstoggles.github.io/, id modelSh10, index 44 */
.toggle {
	position: relative;
	margin-left: 15px;
	--toggle_height: 25px;
}
.toggle:before {
	content: '';
	position: absolute;
	border-bottom: calc(var(--toggle_height)/14) solid #fff; /*3px*/
	border-right: calc(var(--toggle_height)/14) solid #fff; /*3px*/
	width: calc(var(--toggle_height) /7); /*6px*/
	height: calc(var(--toggle_height) /3); /*14px*/
	z-index: 2;
	transform: rotate(45deg);
	top: calc(var(--toggle_height) /3.8); /*11px*/
	left: calc(var(--toggle_height) /2.8); /*15px*/
}
.toggle:after {
	content: '×';
	position: absolute;
	top: 0;
	left: calc(var(--toggle_height) /0.8); /*55px*/
	z-index: 2;
	line-height: var(--toggle_height); /*42px*/
	font-size: calc(var(--toggle_height) /1.6); /*26px*/
	color: #fff;
}
.toggle input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	cursor: pointer;
	opacity: 0;
}
.toggle input[type="checkbox"]:disabled {
	cursor: not-allowed;
}
.toggle label {
	position: relative;
	display: flex;
	align-items: center;
}
.toggle label:before {
	content: '';
	width: calc(var(--toggle_height) /0.525); /*80px*/
	height: var(--toggle_height); /*42px*/
	background: #3b3b3b;
	position: relative;
	display: inline-block;
	border-radius: calc(var(--toggle_height) /0.9); /*46px*/
	transition: 0.2s ease-in;
}
.toggle label:after {
	content: '';
	position: absolute;
	width: var(--toggle_height); /*42px*/
	height: var(--toggle_height); /*42px*/
	border-radius: 50%;
	left: 0;
	top: 0;
	z-index: 5;
	background: #fff;
	transition: 0.2s ease-in;
}
.toggle input[type="checkbox"]:checked + label:before {
	transition: 0.1s 0.2s ease-in;
	background: #4BD865;
}
.toggle input[type="checkbox"]:checked + label:after {
	left: calc(var(--toggle_height) /1.1); /*38px*/
}
/* ############################################### */
dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 101;
	margin: 0;
	transform: translate(-50%, -50%);
	background-color: #000;
	color: inherit;
	padding: 30px 40px;
	padding-bottom: 15px;
	border: 1px solid #3b3b3b;
	border-radius: 5px;
	font-size: initial;
	width: calc(100vw - 100px);
	max-width: 450px;
}

dialog label {
	display: block;
	margin-top: 20px;
}

dialog .button_box {
	margin-top: 20px;
	display: flex;
	justify-content: end;
	align-items: end;
	width: 100%;
	gap: 5px;
	flex-wrap: wrap;
}

dialog .button_box .button_box {
	width: unset;
	margin: 0;
}

dialog button {
	padding: 8px 15px;
	border: 1px solid #3b3b3b;
}

dialog input {
	display: block;
	width: calc(100% - 10px);
	margin: 5px 0;
}

dialog .alias_scrollbox {
	margin-top: 20px;
	padding-bottom: 10px;
	overflow-x: auto;
}

dialog .alias_scrollbox span {
	display: block;
	min-width: fit-content;
	padding: 5px;
	outline: none;
	border-radius: 5px;
	background-color: #3b3b3b;
	text-wrap: nowrap;
}