/* CSS Reset */
* {
	/* RESET */
	margin: 0;
	padding: 0;
	border: 0;
}

:root[data-theme="light"] {
	--text: #090b11;
	--background: #e9ecf6;
	--primary: #1e3167;
	--secondary: #7590e1;
	--accent: #1b42b6;
}
:root[data-theme="dark"] {
	--text: #eef0f6;
	--background: #090c16;
	--primary: #98ace1;
	--secondary: #1e398a;
	--accent: #4970e4;
}

/* Styles */

html,
body {
	font-family: "Courier New", monospace;
	font-size: 20px;
	line-height: 1;

	background-color: var(--background);
	color: var(--text);
}

body {
	padding: 2.5rem 10px;

	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* generics */
#footer {
	position: fixed;
	bottom: 1rem;
	left: 1rem;
}
#center {
	width: 100%;
	max-width: 500px;
	padding: 10px;

	display: flex;
	flex-direction: column;
	align-items: center;
}
#center.multi_cont {
	width: 100%;
	max-width: 1050px;
}
#center.wide {
	max-width: 85%;
}
div.center_multi {
	width: 100%;
	max-width: 1050px;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	justify-content: center;
	column-gap: 20px;
}
div.center_multi > * {
	width: 100%;
	max-width: 500px;
}

.linkbtn {
	width: 100%;
	max-width: 500px;

	text-align: center;

	border-radius: 10px;
	border: 1px solid var(--primary);

	padding-top: 15px;
	padding-bottom: 15px;

	margin: 10px 0;

	background-color: color-mix(in hsl, var(--primary) 20%, transparent);
	color: var(--text);

	text-decoration: none;
	font-size: 1.1rem;

	transition: 250ms;
}

.linkbtn:hover {
	background-color: color-mix(in hsl, var(--secondary) 50%, transparent);
	color: var(--text);

	transition: 250ms;
}

.linkbtn_small {
	background-color: var(--primary);
	color: var(--text);

	text-decoration: none;
	font-size: 1.1rem;

	margin: 0;
	padding: 5px;

	border-radius: 5px;
	text-align: center;

	transition: 250ms;
}
.linkbtn_small:hover {
	background-color: var(--secondary);
	color: var(--background);

	transition: 250ms;
}

h1 {
	margin-bottom: 1rem;
	font-size: 2.5rem;
}
h2 {
	margin-bottom: 1rem;
	font-size: 2rem;
}
h3 {
	margin-bottom: 1rem;
}
p {
	margin-bottom: 1rem;
}

input[type="text"] {
	width: 100%;

	text-align: center;

	border-radius: 10px;
	border: 1px solid var(--primary);

	padding-top: 15px;
	padding-bottom: 15px;

	margin: 10px 0;

	background-color: color-mix(in hsl, var(--primary) 10%, transparent);

	color: var(--text);

	text-decoration: none;
	font-size: 1.1rem;

	transition: 250ms;
}

input[type="text"]:focus {
	background-color: color-mix(in hsl, var(--secondary) 50%, transparent);
	color: var(--text);

	transition: 250ms;
}
div.row {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: center;
	gap: 0.5rem;
}

.invisible {
	display: none;
}

/* SPECIFIC */
div.box {
	width: 100%;
	max-width: 500px;
	text-align: center;

	margin: 10px 0;
	border-radius: 10px;
	border: 1px solid var(--primary);

	padding-top: 15px;
	padding-bottom: 15px;

	background-color: var(--background);
	color: var(--text);
}
#center.wide > .box {
	max-width: unset;
}
div.box > * {
	margin-left: 15px;
	margin-right: 15px;
}

div.box.warn {
	border-color: var(--accent);
}
div.box.error {
	border-color: var(--warn);
}

div.box > p:last-child {
	font-size: 0.8rem;
	margin-bottom: 0;
}
div.box > h1:last-child {
	margin-bottom: 0;
}

div.cname {
	display: flex;

	max-width: 300px;
	width: 100%;

	margin-bottom: 10px;
	padding-bottom: 10px;

	border-bottom: 1px solid var(--primary);

	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.cname:nth-last-child(2) {
	border: none;
	margin: 0;
	padding: 0;
}

div.cname > p {
	margin: 0;
	padding-right: 10px;
	white-space: nowrap;
	overflow: hidden !important;
	text-overflow: ellipsis;
}
div#glist {
	display: flex;
	flex-direction: column;
	align-items: center;
}

div.cname > a.linkbtn_small {
	background-color: var(--accent);
}

div.cname > a.linkbtn_small:hover {
	background-color: var(--warn);
}

div.field {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--primary);
	align-items: center;
	padding: 10px;
}
div.f_key {
	max-width: 50%;
	text-wrap: wrap;
	text-align: left;
}
div.field:last-child {
	border-bottom: none;
}
div.f_value {
	flex-grow: 1;
	flex-shrink: 1;
	font-weight: 400;
	text-align: end;
}
div.f_value.multi {
	display: flex;
	flex-direction: row;
	justify-content: end;
	align-items: center;
}
div.f_value.multi > * {
	margin: 0 10px;
}
div.f_value.multi > input[type="button"] {
	width: 1rem;
	font-weight: bold;
	font-size: 1.2rem;
	color: var(--text);
	background: none;
	border: none;
}

div.fields_cont {
	display: flex;
	flex-direction: row;
	/* justify-content: space-between; */
	flex-wrap: wrap;
}
div.fields_col {
	min-width: 150px;
	max-width: 470px;
	padding: 5px;
	flex: 1 1;
}

#preise > div.field {
	background: none;
	transition: 100ms;
}
#preise > div.field:hover {
	background-color: color-mix(in srgb, var(--secondary) 10%, transparent);
	transition: 100ms;
}

input[type="text"].f_value {
	width: 45%;

	padding-top: 5px;
	padding-bottom: 5px;
}

.tax_green {
	background-color: color-mix(in srgb, green 30%, transparent);
}
.tax_red {
	background-color: color-mix(in srgb, red 30%, transparent);
}
.tax_orange {
	background-color: color-mix(in srgb, orange 30%, transparent);
}
.tax_yellow {
	background-color: color-mix(in srgb, yellow 30%, transparent);
}
.tax_lightgreen {
	background-color: color-mix(in srgb, lightgreen 30%, transparent);
}

td,
th {
	width: 5rem;
	border: 1px solid var(--primary);
	padding: 0 0.5rem;
}
th {
	border-bottom: 3px solid var(--primary);
}
th.br,
td.br {
	border-right: 3px solid var(--primary);
}
tr {
	height: 2rem;
}

.color0 {
	background-color: color-mix(in srgb, #008cff 10%, transparent);
}

.color1 {
	background-color: color-mix(in srgb, #ff1100 10%, transparent);
}

.color2 {
	background-color: color-mix(in srgb, #b3ff00 10%, transparent);
}

.color3 {
	background-color: color-mix(in srgb, #ff7b00 10%, transparent);
}

.color4 {
	background-color: color-mix(in srgb, #00f7ff 10%, transparent);
}

#theme-toggle {
	position: fixed;
	top: 0;
	right: 0;
	padding: 5px;
	transition: 200ms;
}
#theme-toggle:hover {
	background-color: color-mix(in srgb, var(--accent) 50%, transparent);
}