:root {
	--red:#ff653b;
	--green:#2fff2f;
}
#ascm_bg {
	background:#0008;
	position:fixed;
	top:0;
	left:0;
	margin:0;
	padding:0;
	border:none;
	width:100vw;
	height:100vh;
}

#ascm_ct {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: clamp(320px,50vw,640px);
	background: url(gradientdark.png);
	box-shadow: 0 0 10px #0003,0 0 25px #0003,0 0 50px #0003;
	border: none;
	padding: 1em;
	margin: 0;
	border-radius: 12px;
	max-height: 80vh;
	overflow-y: auto;
	z-index: 2342;
	background-size: cover;
}

#ascm_ct label {
	display:flex;
	align-items:center;
	justify-content:space-between;
	border:none;
	padding:.25em;
	position:relative;
	font: 500 0.9rem/1.6rem Fahkwang;
	letter-spacing: 0.3rem;
	text-transform: uppercase;
}

#ascm_ct label:hover { color:#ff9828; cursor:pointer; border-radius:8px; }


#ascm_ct input[type=checkbox] {
	outline:none;
	-webkit-appearance:none;
	width:32px;
	height:16px;
	background:#eee;
	border:none;
	border-radius:8px;
	position:relative;
	transition:background .25s ease-in-out;
	margin:0;
	cursor:pointer;
	box-shadow:inset -1px 3px 3px #0002;
}

#ascm_ct input[type=checkbox]:before {
	content:'';
	position:absolute;
	background:#949494;
	width:12px;
	height:12px;
	border-radius:50%;
	top:2px;
	left:2px;
	transition:left .25s ease-in-out,background .25s ease-in-out;
}


#ascm_ct input[type=checkbox]:checked:before { left:18px; background:#eee; }
#ascm_ct input[type=checkbox]:checked { background:#0b0; }
#ascm_ct h2 {
	font: 500 0.9rem/1.6rem Fahkwang;
	letter-spacing: 0.3rem;
	text-transform:uppercase;
}
#ascm_ct p {
	padding: 0;
	margin:1em 0 0;
	font: 300 16px/24px Fahkwang;
}
#ascm_close { float:right; }
.ascm_buttonbox {border:none; padding:0;display:flex; gap:1em; margin-bottom:1em; }

.ascm_buttonbox > * { flex-basis:50%; margin:0;box-sizing:border-box; }

#ascm_open, #ascm_ct button {
	display:flex;
	align-items:center;
	justify-content:center;
	border:none;
	cursor:pointer;
	box-shadow:-2px 2px 3px #0002;

	color:inherit;
	background:#fff3;
	text-decoration:none;
	padding:0.1rem 0.7rem 0 1rem;
	display: inline-block;
	margin:0.65em 0;
	text-wrap:nowrap;
	border-radius:0.75rem;
	font:700 0.47rem/1.4rem Fahkwang;
	letter-spacing:58%;
	text-transform:uppercase;
}

#ascm_ct button:hover {
	background:#fff;
	box-shadow:-2px 2px 3px #0004;
}
#ascm_ct > *:last-child { margin-bottom:0; }

#ascm_ct #ascm_alloff {
	color:var(--red);
	font-weight:bold;
}

#ascm_ct #ascm_allon {
	color:var(--green);
	font-weight:bold;
}

#ascm_ct #ascm_save {
	color:var(--green);
	font-weight:bold;
}

#ascm_ct #ascm_close {
	width:22px;
	height:22px;
	min-height:unset;
	border-radius:50%;
	position:relative;
	margin-right:-10px;
	margin-top:-10px;
	padding:0;
}

#ascm_ct #ascm_close:before {
	content:'';
	background:#444;
	width:2px;
	height:12px;
	left:10.5px;
	position:
	absolute;
	top:5.5px;
	transform:rotate(45deg);
}
#ascm_ct #ascm_close:after {
	content:'';
	background:#444;
	width: 12px;
	height: 2px;
	position:absolute;
	left:5.5px;
	top:10.5px;
	transform:rotate(45deg);
}

#ascm_options {
	border-radius:12px;
	padding:0 6px;
	border:none;
	background: #0003;
	box-shadow:inset -3px 3px 4px #0001;
	margin:2em 0 1em;
}
#ascm_options span {
	margin: -.75em 0 0.75em 0;
	padding: 0 0.4em;
	font: 300 12px/27px Fahkwang;
	hyphens: auto;
	hyphenate-character: '-';
	letter-spacing: 10%;
	display: block;
}

#ascm_options span + label:before {
	content:'';
	border-top:1.5px dashed #fff5;
	position:absolute;
	left:10px;
	right:10px;
	top:-1px;
}