@font-face {
	font-family: "Alfa Slab One";
	src: url("data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAA3cABEAAAAAHjwAAA1+AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgQYcKgZgAFQIgRgJmhYRCAqKfIofCxoAATYCJAMwBCAFjUAHPwyBIxuaHCMR9pOTYkVRKhi/ZH95wJPda6gBNWGFLfYhGGUg6s1o2qkmHjT6FAWJvvGN7rn1B63Fv96c3dKjEZLMHp+b/UxCWQhU/UHFKBVHKuoUgvjSdEVUr99u4ieN/7xdfefcp2qpuqeh6gFcA/2eFT57lgilCA5yK3SQSKGyjRb6R1tKRZmwmqf8AGkDZNiQjhK2WQpq72wXdYp6u2q0YYLo0GbvLqVRRCNUOgU7SBeOWWlEb/qmmvuntS2Zkawzxd7ZOWWYmJFStQPEbBvh7WYKGw2uNEN5Z5EGrdqaVe//83Opfe8PEP+IhLp2aCunZ0zycj+9JIXDUsqUER8MACSDLuAQHYOa39SMmzODzLZsJ+0GYQW5hFegUMRjwCGEBOVYhpd8cnGJWx9V9HDOnImPqJEAAaQInSg0Y6jx8IyObNSwurETfI46zgk+NACsKpY6sB4niEDSiyYjk0e0rQCFQvQQPu4NKY4nghyFAFSNmUgpIYg4ILlF2Eqt6wvSIlwHXkDdqF4AaBhacQ/Z0QS4g5cZ0UN1LXqa4R4Irkj//wkEf1hj3Ivq0YxBxENqZBogCE3ZTgKhIRW1Kq1Jj+XCYRKSjk6ePxv/A3+A389v57cCaml/cRiIf4N0k1IA8HL95f/rOYz/Y3JSKunmg6QqZCYc4P8cLVj+e5oJI+9HM3ja6LFg1e21/ArDrw6MCVyVJll6+w/J5Vvs51NiThmqcqL+qhdB99+bdtrC5s57cBrs2HgAscQAnWafBMR1JL7YQuunYUiinCwm2JQ8Cnnnc/LmXX+tcelOnrCcWBoXL1VWBWZ0Rwy9hURKsSl9CgRflNOJ+qd1J0S18tGb2np0zBZg4TsoOWcHLWcDl6bjnAPKNREa3ZEw3EoYiViJzvsMc0C7efM6qqZG1QhtlONO/c+CypMF6umFpfrm9z5anVr9aN1OZct1OzlZ9lmET4LmPGFNYksbx/HWACEJ7FM5iSYQxA6pJ7DBjHkGnMubi8W4+KenKtuZhJ31PWWcqc/zwR0nTuJNTztE/KMhKsrgxjQDO2gUTfpgdESVGxU6y2gqIUEJKCSjxs5vTMyqi04DImgO4uSb5zTEDsuUvDOfb/pAwqssEjfOOJB0mCXifJOV90KJmYQEL8fEnIGUi3RwNKh/emp9MCRZ1J/YJkXB7j/N271UdR/nyySG/QhkeLud3u6quJzXTXIjZqlIDfYdqeXqsERSlsEOgljjOUxUBaMJha1UA86Jpmb/NHFzvqc3WKZRzghEnpRa+UycMxJYBgKEUyihd80KdG0MCTYGznP1O8ixVCGjvURKoibEJBIVVI4qsPzOnMu4eMf+5M8eozyVppdyIE9F7lagQOUQfCZQZApKTEMfM1BmFirMQZV5UGOR1GGM8iqx+e1eMjXwO3fsHRjRaeE3/dmOthho+r+i6yyRMNGwgXVs0hBaTKDNFARMQ4cZ6GcWBpiDQebBEItkjaE2jsK4tZBpjexujMIxk5mxZPrXTMB4Mh6BSaSZIjDTujVbGYZuqDvBYUqUqmdkMqqZwyTdzb4zpkkJTS9rBj3Cqs2W7IDJBROay0G1rgr/F4DhM1urM1Lw2SWZQ61mnk0AO/I3CszTnGsDC+acEJRzP+giVaZ4RY1mIIgIXvdP1/jMOqW58xlKHBaE4fTNwBLAJ+0RDTTMVEyEt477CZfafikezrJXDZtMtETQM4uTnUR4p59yXW26n6Kr5RyjCY/qA2CCTYvcHxHEtCSzbzIqEZYjQ7E7MosJO4diKQWE31FnElpt2q05w+MUwapw2GFRTre0ZqBeQuDEBh2GYRJahTHggZYo9uXkSnxyc2CFgrEkYTTB2rX/FqsePCPHFJOLFHExa9qKTwS59eHK1Kg17xCVvYQJfpfFY53XG3Z7yAWN0yKSdE/WMetNIl6tnbDQ7JOKGraFG5gaAqWp4fSVttxOTmpzUyckfysRdjPijtvacGgvZPApb8FSurb4Nixn37Q2ae1kv2TOgmbDBIUdD/xkiarG3nRTKxm9xvAPukv1VojAr/8XsyRLAtDy6djW1pxPHD6f8cFeKpZuUaDtPyTr85YXQkT6GA+iCnO3e8Bi7DgFtZyLKTnMP6KCNxfzLOMULK7QrQv+xNRo2gdDkvuY+Ouie1ouYuAcoFJgM0NoaY2ArQyhrRNAFbYzhI7WCNjJ0NqluAgAZRy7myD0tEHA3iYIfZ0BEPubIAy0QcDBJqgP8cMKNowDNoI7bBQrdJ0xVrMxHDM97jMDVhsspoRyG9m2iXKb2baFvq2U20bfdspvh+I8qEJvdkq2c8VnXJRM7gDvM5QOk39XNJan0OOF4nZQM2QiaqZEvUydUKppK+pqeqFmFGrmDhpWzIqG2dEwJxrmtrTmFWp+4bgAd1oWRsuiaFkcLUtaWksLtazwsVxxUSygtlRfytPOidhzdHzrtE3wVzog/vPgC4fKZxgAycRr/gYkuOgOiNaBJC3+WwQRIeIoqU9oYrhkkq9wzNtL+vkL53+VrPxcBEzMP8GsAJgnWdkDlz4xmjqJk/Ox23v61wK4BhgDgGWOAbhIQ2LekEyzGfSGWqQ1xzyc+vUkFieYd1zy4+VguLHOp7zjPe783H2Rq3KRN7+6Et3lGbkhKa/qszOERs5efOVdRAnERFmlryyAQ78N9jOJzCVTpapSdNp776a1a6dHX1M1OyHpyakA2Z0YVWl3c1+Hw393zIzQcqNuRatnbXDUVgoTLuRo4SdbvU++JKalyCGVv46OfiOTlh4/eEhzKPWQ7E6UpnSTrlspflAcCmiuGbB3tJsGPlqcyFy3e8vqoTXq/BuZQfamUalcV/GuqODy3XkZJRVlZT39h+z1t1l3vUaR83CJN5e06QCTqc1PCPreGLYrckvPwhH37K6UlduYoEMR2cT/fM2KXr+GgdqBOSMTu/d4W40zLpOFErvl6Z+mLD00/GSyN9GJz3bfGA7Isp4UAHxiNSFTo2HSo6BARZ9aqVPd91OXXhvWQFHCeyGCHoBGF0rpnqHWNX1cCetGO6EeyT/x6TABoA+lIMh1rCuNhusZCrNUIqccDZ3P8CZoXWhYRPUslaqpY98H/PrgqHSJBeT58/dccfSTQHE81X0/c+m1YdVSxPU8OlfsRiNGaRLnNYECjivhgN6cXg+e1+iCdngeucpOh1kAFVTamd6ZDaZzxFxtNBwWxmnI75Q9TbLG43gciPfFS7kMYohKb2EUSYPJHGEUCTklNIcVAEthU0k8qijCaO/p03b1PiwPZnrOijHFriIp5yFSkGNn9EAXbBGtbXRNbv88CiVhC1qrxsKsv3EVp0+HKQA+Cr4lSh1ld5VojlpIQznVfd/n9BqgNLS6FyBxN7SWHkQaXZDmxNKYmvHUWh1zh6LBh/LesN/MTuORPCHDZGX96ATZ4XbWuT42SZ4GBVqD0adpQUi5GwYWxj6iCbCnSBa7ojpr1rnCZnpn5cmcPQgySigGTJKUeSYQgAC3v3nR3F5q7X+vof4F4If0t4Y3OrT4y9ftgv4J4C0ngfZjby57mICF+wHRGikuvzmDXI4BQ4vMICmXdwWfy8p9+M2nkBeHLL/mgQDiOA2Ni+EgmMEOngHwJv+jQQBVXs0DHhFTTiTwCBc4PMMV6niZaxTwPjdI4FtukcN33KGDv7gHR42IbcVcIh9+tlLu7UWMv7GPclwCGosYAP/yzZRTOb3gIpl+4Mpa+oNrI1nJjXLu5dZA9nDnMG/jnmT+xjbCY4byL7ZxnggiCDkmaa6SfzyZLrjesNPMkjK7UUc67Lox0uL8cVDxkGB08nlAOunvszr+vapQqbeTWdfGx5bKolMuw6o3rdHNfMonUyJZbytXuiNevq9n/74YHePV1XqUk1l0etofHE3y4tK8Yi30uv9vjSlX5dMdd876JpDwimFQwZQzGIrn1T+DUs/BrnR2IqmjrvE5nYpJ8Y0uqtecWcrBIA4Je+uQn5YE3bxlbUTHqQgK8QXqjvEC5czJQbZUN2o+MVRwcZvOw8LEjENky5QlH9H5QXbkMnZGOq3j6KQzZrZwaltbebhYL1OPg2kTW3VmLh7jiGSGVo6bSsbQZOq/SMnKYZyLHUtJz46YhbBwMnIpNeyUQmFOZWFeQLRj8T+A5TEFy4Co5uLEIZrpOLAIOewHK6cUiFiaJhMac3pkU8ps16fWpUGPZmqboiAK60lPh0xaIJDZjSXLsKBfi3BcU1wMC/mk7MTxFBmwHMCRbQgXo1mvCa5S7C9dLdFGiYQ4+ZNvdDA3OVO5ASsMU+wsZ06ixyPMnODEpXtQiuRW1KFOI1HoXtfJdN1G26gISBxkUVck32A8VyZGm0KjLXSRMH6Jy9ClzTJtU+mLKn86ZNpJzyM9B3HGKYmNoUz6mil15ltUa4R7KK1Z8pch21NIAZAEBcq+Wm3adenWU/7u5jrQ8INnl/eeR1zTdw6P9VR5PQ+T+pdqcmJpGJksfVUlShQFiGiRZLRKYaYwSlg507/lc098T3APaBEJ3h4obSvpimnYvcfjsrbec6XLeikYWGK5G6J5gKVL0nf26mur/nauakTJoiARLU29hvzic4LV56nf2Z9eBiHsDgEAAAA=")
		format("woff2");
	/* limited to rsecnotes chars*/
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--dark-percent: 0%;
}
@media (prefers-color-scheme: dark) {
	:root {
		--dark-percent: 100%;
	}
}
:root[data-theme="dark"] {
	--dark-percent: 100%;
}
:root[data-theme="light"] {
	--dark-percent: 0%;
}

:root {
	--bg-color: color-mix(in srgb, #1b1b1b var(--dark-percent), #fff);
	--bg2-color: color-mix(in srgb, #313131 var(--dark-percent), #eee);
	--text-color: color-mix(in srgb, #f3f4f6 var(--dark-percent), #1a1a1a);
	--focus-border-color: #007bff;
	--focus-bg-color: #60a5fa;
	--primary-green: #00d061;
	--primary-blue: #60a5fa;
	--border-color: color-mix(in srgb, #fff var(--dark-percent), #999);
	--drop-color: #bbb;
}

body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
	background-color: var(--bg-color);
	color: var(--text-color);
	margin: 20px auto;
	max-width: 900px;
	display: grid;
}

#rsecnotes {
	font-family: "Alfa Slab One", serif;
	font-size: 3em;
	font-weight: 400;
	font-style: normal;
	margin-bottom: 0;
	color: var(--text-color);
	text-decoration: none;
}

#rsecnotes:hover > span {
	text-decoration: underline;
}

#rsecnotes > .y {
	margin-left: 0.25rem;
	color: #ffc832;
}

#rsecnotes > .b {
	margin-left: 0.25rem;
	color: #083bb5;
}

h2 {
	margin-top: -35px;
	font-family: monospace;
}

h2 > span {
	cursor: help;
	text-decoration-line: underline;
	text-decoration-style: dashed;
	/* dotted | double | wavy also work */
	text-decoration-thickness: 1px;
	/* optional */
	text-underline-offset: 2px;
	/* move it away from the text a bit */
	text-decoration-skip-ink: auto;
	/* nicer around glyphs */
}

footer {
	position: fixed;
	top: 0;
	right: 0;
	font-size: 1rem;
}
footer > button {
	background: transparent;
	border: none;
	font-size: 1rem;
}

button.error {
	background: #d43407 !important;
	opacity: 1 !important;
}

div.error {
	color: #d43407 !important;
}

.progress {
	--progress: 0%;
	background: linear-gradient(
		to right,
		var(--primary-green) var(--progress),
		var(--bg2-color) var(--progress)
	) !important;
}

button,
textarea,
input,
.drop,
.list,
.pwd {
	background: var(--bg2-color);
	border: 1px solid var(--border-color);
	color: var(--text-color);
	margin: 0.25rem;
	padding: 0.5rem 1rem;
	border-radius: 0.25rem;
	outline: none;
	transition: border, background-color, opacity 0.2s ease;
	font-size: 1.25rem;
}

textarea {
	min-height: 200px;
	font-family: monospace;
}

textarea:focus-visible,
input:focus-visible {
	border: 1px solid var(--focus-border-color);
}

button {
	background: var(--bg2-color);
	border: 1px solid var(--border-color);
	color: var(--text-color);
	margin: 0.25rem;
	padding: 0.5rem 1rem;
	border-radius: 0.25rem;
	cursor: pointer;
}

button:hover:not(:disabled) {
	background: var(--primary-blue);
}

button:disabled {
	cursor: default;
	opacity: 0.3;
}

label,
#input_settings > input,
#input_pwd > input {
	margin-top: 1rem;
	margin-bottom: 0.25rem;
}

#input_pwd > label,
#input_pwd > input {
	margin-top: 5px;
	margin-bottom: 0;
	text-align: right;
	font-weight: normal;
	align-self: center;
}
label > input[type="checkbox"] {
	height: 1.5rem;
	width: 1.5rem;
	margin: 0 10px 0 0;
	vertical-align: bottom;
}

#input_file {
	display: none;
}

label {
	font-size: 1.25rem;
	font-weight: 700;
}

label > span {
	display: block;
	font-weight: normal;
	font-size: 0.9rem;
}

.list {
	display: grid;
	grid-template-columns: 1fr auto auto;
}

.list > div > span,
.list > button {
	font-size: 0.9rem;
	justify-self: center;
}

.list > * {
	align-content: center;
}

.drop {
	border: 2px dashed var(--drop-color);
	text-align: center;
	cursor: pointer;
}

.drop.dragover {
	border-color: var(--primary-blue);
}

#input_settings {
	display: grid;
	grid-template-columns: 50% 1fr;
}
#input_pwd {
	display: grid;
	grid-template-columns: auto auto auto;
	margin: auto;
	margin-bottom: 2rem;
}
#input_pwd > input:read-only {
	text-align: center;
	padding: 0.2rem;
}
#input_pwd > .pwd {
	grid-column: 1 / 3;
	min-width: 600px;
}
.pwd {
	font-family: monospace;
	text-align: center;
}
.pwd-numbers {
	color: color-mix(in srgb, #85beff var(--dark-percent), #0364d3);
}
.pwd-symbols {
	color: color-mix(in srgb, #ffa18a var(--dark-percent), #bb3b1b);
}
.copy > svg {
	scale: 1.25;
	vertical-align: middle;
}
.copy.copied {
	animation: copied 2s;
}
@keyframes copied {
	0% {
		background: var(--bg2-color);
	}
	20% {
		background: var(--primary-green);
	}
	100% {
		background: var(--bg2-color);
	}
}

#input_block,
#link_block,
#consume_block,
#read_block,
#input_files,
#read_pwd {
	display: grid;
}

#link_block,
#read_pwd {
	grid-template-columns: 1fr auto;
}
#link_block > * {
	grid-column: 1 / 3;
}
#link_url {
	grid-column: 1 / 2;
}
#link_block > .copy {
	grid-column: 2 / 3;
}

#link_qrcode > img {
	padding: 10px;
	background-color: white;
	margin: 2rem auto;
	border-radius: 0.5rem;
	border: 1px solid var(--border-color);
}

.multi-link {
	text-decoration: none;
	/* remove default underline */
}