:root {
	--system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--inputWidth: min(600px, calc(100svw - 3.5rem));
}

* {
	padding: 0;
	margin: 0;
	border: none;
	box-sizing: border-box;
}

html,
body {
	font-family: var(--system-ui);
	background: #f8f8f8;
	scroll-behavior: smooth;
	scroll-padding-top: 4.25rem;
	counter-reset: step;
}

a {
	text-decoration: none;
}

.container {
    /* width: fit-content; */
}

td.center {
	text-align: center;
}

.menu {
    position: sticky;
    top: 0px;
    background: #fff;
	padding-block: 0.5rem;
	box-shadow: 0px 1px 3px #0004;
    z-index: 10;
}

.menucontent {
	width: var(--inputWidth);
	margin-inline: auto;
    /* display: grid; */
    /* grid-template-columns: auto auto auto 1fr auto auto auto auto; */
	display: flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: space-between;
}

.menuspacer {
    margin-inline: auto;
    display: block;
}

.menubutton,
.tablebutton {
	display: block;
    font-size: 1.5rem;
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 0.25rem;
    width: 2.5rem;
    height: 2.5rem;
    color: #444;
    display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
	position: relative;
}

.tablebutton {
    font-size: 1rem;
    width: 2rem;
    height: 2rem;
}

.menubutton:hover,
.tablebutton:hover {
    background: #f8f8f8;
    color: #888;
}

.menubutton:disabled,
.menubutton:disabled:hover,
.tablebutton:disabled,
.tablebutton:disabled:hover {
    color: #ddd;
    cursor: default;
    background: #eee;
    border: 1px solid #ddd;
}

.menubutton i,
.tablebutton i {
	pointer-events: none;
}

.steps {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.steps a::before {
    content: "";
    position: absolute;
    background: #f8f8f8;
    width: 1.75rem;
    height: 1.75rem;
    left: 0px;
    top: 50%;
    rotate: 45deg;
    translate: -50% -50%;
    z-index: -2;
}
.steps a::after {
    content: "";
    position: absolute;
    background: #aaa;
    width: 1.75rem;
    height: 1.75rem;
    right: 0px;
    top: 50%;
    rotate: 45deg;
    translate: 50% -50%;
    z-index: -1;
}
.steps a {
    display: block;
    background: #aaa;
    color: #fff;
    padding: 0.5rem 0.25rem 0.5rem 1.75rem;
    position: relative;
    height: 2.5rem;
    z-index: var(--zIndex);
	white-space: nowrap;
}

.steps a i {
	display: none;
}

.steps a[data-complete="true"] i {
	display: inline;
}

.steps a[data-complete="true"] {
    padding: 0.5rem 0rem 0.5rem 1.75rem;
}

.steps a.active,
.steps a.active::after {
	background: #888;
}

.steps a:hover,
.steps a:hover::after {
	background: #ccc;
}

.steps a span {
	display: none;
}

@media (min-width: 850px) {
	.steps a span {
		display: inline;
	}
}

img {
	display: block;
}

input[type=text].hidden {
	display: none;
}

table {
	margin-inline: auto;
    border-radius: 0.5rem;
    margin-block: 1rem;
    background: #fff;
    border-collapse: collapse;
    box-shadow: 0px 1px 2px #0004;
}

table table {
	box-shadow: none;
}

th {
    background: #ddd;
    padding-block: 0.5rem;
}

td {
	padding-bottom: 0.25rem;
	padding-inline: 0.5rem;
}

table table td {
	padding-inline: 0;
}

table tr:first-child th:first-child {
	border-top-left-radius: 0.5rem;
}

table tr:first-child th:last-child {
	border-top-right-radius: 0.5rem;
}

table tr:last-child td:first-child {
	border-bottom-left-radius: 0.5rem;
}

table tr:last-child td:last-child {
	border-bottom-right-radius: 0.5rem;
}

td.error {
    background: darkred;
    color: #fff;
    text-align: center;
    padding-block: 0.5rem;
}

table.zebra td {
	padding-block: 0.5rem;
	border-top: 1px solid #eee;
}

table.zebra tr:nth-child(2n + 1) td {
	background: #f8f8f8;
}

td.clickable:hover,
table.zebra tr:nth-child(2n + 1) td.clickable:hover {
    background: #ddd;
}
td.clickable {
    cursor: pointer;
}
td.button {
    text-align: center;
    font-weight: 500;
    background: #eee;
    box-shadow: 0px 1px 1px #888 inset;
}

td.stepcounter {
    font-weight: 600;
}
td.stepcounter::after {
    counter-increment: step;
    content: counter(step);
}

td.rowremove i {
	pointer-events: none;
}

td.rowremove {
    width: 1.5rem;
    color: #888;
    text-align: center;
    cursor: pointer;
}

td.rowremove:hover {
    color: #444;
}

div.buttonlow i {
	pointer-events: none;
}

div.buttonlow {
    border: 1px solid #aaa;
    border-radius: 0.25rem;
	font-size: 0.75rem;
    font-family: var(--system-ui);
	width: 100%;
	background: #eee;
	cursor: pointer;
	color: #000;
    text-align: center;
}

div.buttonlow:hover {
	background: #ddd;
}

span.label {
    display: block;
    margin-left: 1rem;
    font-size: 1rem;
    font-weight: 500;
}

span.sublabel {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    width: var(--inputWidth);
	text-wrap: balance;
}

input[type=text],
input[type=number],
select,
textarea {
	display: block;
    border: 1px solid #aaa;
    padding: 0.5rem;
    border-radius: 0.25rem;
    width: var(--inputWidth);
	font-size: 1rem;
    font-family: var(--system-ui);
	margin-bottom: 0.25rem;
}

select.small {
	width: fit-content;
}

textarea {
	min-height: 5rem;
	overflow: clip;
    field-sizing: content;
}

input[type=file].empty,
input[type=file].hidden {
	position: absolute;
	width: 0px;
	height: 0px;
	opacity: 0;
}

input[type=file].empty + label {
    display: block;
    background: #eee;
	padding: 0.5rem;
    border: 1px solid #aaa;
    border-radius: 0.25rem;
    cursor: pointer;
	text-align: center;
}

.uploadaudio,
.uploadmedia {
    display: grid;
    grid-template-columns: min-content 1fr auto min-content min-content;
    margin-block: 0.25rem;
    align-items: center;
	width: var(--inputWidth);
}

.uploadmedia {
    grid-template-columns: min-content 1fr 180px min-content min-content;
}

audio {
	max-width: 50vw;
}

.closerow {
    color: #888;
    font-size: 1.5rem;
    padding: 0.25rem;
    cursor: pointer;
}

.closerow:hover {
	color: #444;
}

.closerow i,
.moverow i {
	pointer-events: none;
}

.moverow {
    padding: 0.5rem;
    border: 1px solid #aaa;
    background: #eee;
    margin-left: 0.25rem;
    border-radius: 0.25rem;
    cursor: move;
}

.download {
    padding: 0.5rem;
    border: 1px solid #aaa;
    background: #eee;
    margin-left: 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
}

a.downloadbutton {
    font-size: 1rem;
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 0.25rem;
    color: #444;
    cursor: pointer;
    position: relative;
    padding: 0.25rem;
    margin-inline: 2px;
}
a.downloadbutton:hover {
	background: #ccc;
}

.dragging {
    opacity: 0.25;
}

.uploadlabel {
	overflow: hidden;
	white-space: nowrap;
}

.uploadmedia img {
	max-height: 100px;
	justify-self: center;
}
.uploadmedia video {
	max-height: 100px;
	justify-self: center;
}


.popup input[type=name],
.popup input[type=email],
.popup input[type=password],
.popup select {
	width: 30ch;
	display: block;
    border: 1px solid #aaa;
    padding: 0.5rem;
    border-radius: 0.25rem;
	font-size: 1rem;
    font-family: var(--system-ui);
	margin-block: 0.25rem;
}

button[type=submit].submitbutton,
.popup input[type=submit],
.popup a.button {
	display: block;
    border: 1px solid #aaa;
    padding: 0.5rem;
    border-radius: 0.25rem;
	font-size: 1rem;
    font-family: var(--system-ui);
	width: 100%;
	background: #eee;
	cursor: pointer;
	color: #000;
    text-align: center;
}

button[type=submit].submitbutton {
	margin-block: 0.5rem 0.25rem;
	width: var(--inputWidth);
}
	
button[type=submit].submitbutton:hover,
.popup input[type=submit]:hover,
.popup a.button:hover {
	background: #ddd;
}

button[type=submit].submitbutton:disabled,
button[type=submit].submitbutton:disabled:hover {
    color: #ddd;
    border: 1px solid #ddd;
    cursor: default;
	background: #eee;
	position: relative;
}

button[data-wait="true"]::after {
    content: "\f110";
    position: absolute;
    left: calc(50% - 0.625rem);
    font-family: "Font Awesome 6 Pro";
    color: #000;
    font-weight: 900;
    font-size: 1.25rem;
    animation: spin infinite 1s steps(8);
}


tr.verborgen {
    display: none;
}

input.hidden {
	display: none;
}

input.hidden + label {
	cursor: pointer;
}

input.hidden + label::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f070";
}

input.hidden:checked + label::before {
	content: "\f06e";
}

table:has(input.hidden:checked) tr.verborgen {
    display: table-row;
}

table:has(input.hidden:checked) tr.zichtbaar {
    display: none;
}


@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}