@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://www.verkinafaktura.xyz/rsrc/NotoSans-Regular.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Noto Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(https://www.verkinafaktura.xyz/rsrc/NotoSans-Italic.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://www.verkinafaktura.xyz/rsrc/NotoSans-Bold.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Noto Sans';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(https://www.verkinafaktura.xyz/rsrc/NotoSans-BoldItalic.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--c0: #ffffff;
	--c1: #d0e0f0;
	--c2: #374559;
	--c3: #3d4d63;
	--c4: #48add9;
	--c5: #4db7e5;
	--c6: #60d1e0;
	--c7: #000000;
	--c8: #f0f0f0;
}

* {
	font-family: 'Noto Sans';
	font-size: 14px;
}

html, body {
	margin: 0;
	padding: 0;
	background-color: #505050;
}
body {
	min-height: 100%;
	background: linear-gradient(-135deg, var(--c0), var(--c1));
}

input, a, select, textarea {
	padding: 0.5rem;
	border: 1px solid var(--c3);
	border-radius: 0.5rem;
	box-sizing: border-box;
	text-decoration: none;
	background-color: var(--c0);
	color: var(--c2);
}
textarea {
	height: 5em;
}
input[type="submit"], input[type="button"], a, input[type="checkbox"] {
	display: inline-block;
	padding: 0.5rem;
	font-weight: bold;
	cursor: pointer;
	background-color: var(--c3);
	color: var(--c1);
}
input:focus, textarea:focus, a:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="checkbox"]:hover {
	outline: none;
	border-color: var(--c5);
	box-shadow: 0 0 0.5rem var(--c6);
	color: var(--c7);
}
a:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="checkbox"]:hover {
	background-color: var(--c4);
	color: var(--c2);
}


#container {
	width: 100%;
	min-height: 100vh;
	display: flex;
	justify-content: center;
    align-items: flex-start;
}

#login {
	width: 30rem;
	height: 31rem;
	align-self: center;
	padding: 0 0 0 31rem;
	background: bottom left / 30rem no-repeat var(--c0) url(/rsrc/favicon.svg);
	border-radius: 2rem;
	overflow: hidden;
	box-shadow: 0 0 0.1rem var(--c3);
}
#login div {
	display: flex;
	justify-content: center;
	flex-direction: column;
	width: 30rem;
	height: 100%;
	box-sizing: border-box;
	background-color: var(--c2);
	padding: 1rem;
	text-align: center;
}
#login input {
	padding: 1rem;
	width: 100%;
	font-size: 18px;
	margin-top: 2rem;
}

#main {
	width: 70rem;
	margin: 2rem 0 2rem 0;
	background: var(--c2);
	border-radius: 2rem;
	overflow: hidden;
	box-shadow: 0 0 0.1rem var(--c3);
}

#menu {
	display: flex;
    border-radius: 2rem;
	margin-bottom: -2rem;
}
#menu a, #menu span {
	padding: 2rem 2rem 4rem 2rem;
	color: var(--c1);
	background-color: var(--c2);
	text-decoration: none;
	font-weight: bold;
	border-radius: 0px;
	box-shadow: none;
	border: none;
}
#menu a:hover {
	background-color: var(--c5);
	color: var(--c0);
}
#menu span {
	background-color: var(--c4);
	color: var(--c0);
	cursor:pointer;
}

#content {
	padding: 2rem;
	background-color: var(--c0);
	border-radius: 2rem 2rem 0 0;
	position: relative;
}

#content table {
	margin-top: 0.5rem;
	border: none;
    border-spacing: 0;
}
#content table th {
	padding: 0.5rem;
	text-align: left;
}
#content table td {
	padding: 0.5rem;
}
#content table tbody tr:nth-child(odd) th, #content table tbody tr:nth-child(odd) td {
	background-color: var(--c8);
}
#content table tbody tr:nth-child(even) td {
	background-color: var(--c0);
}
#content table tfoot td {
	text-align: right;
}
#content table tr.s td {
	font-style: italic;
	color: #374559;
}

#tab_make th:nth-child(2), #tab_make th:nth-child(3) {
	width:1%;
}
#tab_list th:nth-child(5), #tab_list th:nth-child(6), #tab_list th:nth-child(7), #tab_list th:nth-child(8), #tab_list th:nth-child(9) {
	width:1%;
}
#tab_cform {
	width: 100%;
}
.wide_text {
	width: 100%;
}

#product_list {
	width: 100%;

}
#product_list th:nth-child(1), #product_list td:nth-child(1) {
	width:100%;
	white-space: nowrap;
}
#product_list td:nth-child(1) input {
	width:100%;
}

#product_picked {
	width: 100%;
	display: none;
	white-space: nowrap;
}
#product_picked td:first-child {
	width: 100%;
}
#product_picked input[type="text"] {
	width: 3em;
}


.tab_archive table {
	width: 100%;
	display: none;
}
.tab_archive .open table {
	display: table;
}
.tab_archive table th:nth-child(1), .tab_archive table td:nth-child(1), .tab_archive table th:nth-child(3) {
	width:1%;
	white-space: nowrap;
}
.tab_archive > div {
	padding: 0.5rem;
}
.tab_archive > div:nth-child(odd) {
	background-color: var(--c8);
}
.tab_archive button {
	outline: none;
	width: 2.5rem;
	padding: 0.5rem;
	margin-right: 0.5rem;
	border: 1px solid var(--c3);
	border-radius: 0.5rem;
	box-sizing: border-box;
	text-decoration: none;
	display: inline-block;
	font-weight: bold;
	cursor: pointer;
	background-color: var(--c3);
	color: var(--c1);
}
.tab_archive button:hover {
	border-color: var(--c5);
	box-shadow: 0 0 0.5rem var(--c6);
	background-color: var(--c4);
	color: var(--c2);
}
.tab_archive a {
	float: right;
}