/* inter-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url('/fonts/inter-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	src: url('/fonts/inter-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
	--color-background: #fefefe;
	--color-text: #222;

	--color-grey: #fafafa;

	--color-primary: #A6C3FF;
	--color-primary-hover: #99bbff;

	--border-radius: 4vw;

	--spacing: 3.5vw;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-background: #222;
		--color-text: #fefefe;

		--color-grey: #333;

		--color-primary: #385eac;
		--color-primary-hover: #456cba;
	}
}

.darkmode {
	--color-background: #222;
	--color-text: #fefefe;

	--color-grey: #333;

	--color-primary: #385eac;
	--color-primary-hover: #456cba;
}

.icon path {
	fill: currentColor;
}

*, *::before, *::after {
	box-sizing: border-box;
}
*:focus {
	outline: 0;
}

*.no_scrollbar::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.spacer {
	flex-grow: 1;
}

html {
	height: 100%;
	font-size: 0.9vw;
}
body {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	background: var(--color-background);
	color: var(--color-text);
	font-size: 1rem;
	font-family: "Inter", sans-serif;
	user-select: none;
}

a {
	color: inherit;
	text-decoration: none;
}

i {
	display: inline-block;
	font-style: normal;
	padding-left: 0.25em;
}
.resolution i {
	padding: 0 0.3em;
}

header {
	width: 80vw;
	margin: 8rem auto 7rem;
	text-align: center;
}

header h1 {
	margin: 0;
	line-height: 1em;
}


main {
	width: 80vw;
	margin: 0 auto;
}


button {
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
}


/* TABLE */
.table {
	width: 100%;
	font: inherit;
}
.table th, .table td {
	padding: 0.4rem 0;
	text-align: left;
	border-bottom: var(--line-width) solid var(--line-color);
	white-space: nowrap;
}
.table th {
	cursor: default;
}

.table th:not(:last-child), .table td:not(:last-child) {
	padding-right: 2rem;
}

.table th[align="right"], .table td[align="right"] {
	text-align: right;
}


.table td.icon {
	width: 1px;
	white-space: nowrap;
	text-align: right;
	padding-left: 0;
	padding-right: 0.3em;
}


.table td.action {
	width: 1px;
	white-space: nowrap;
	text-align: right;
	padding-left: 1rem;
	padding-right: 0;
}
.table td.action > * {
	display: inline-block;
	background: 0;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.table td.action > * {
	opacity: 0.4;
	transition: opacity 400ms;
}

.table td.action > *:not([disabled]):hover {
	opacity: 1;
}

.table td.action > *[disabled] {
	cursor: default;
}


.table .textoverflow {
	max-width: 30vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.table th[data-sorted-direction] {
	position: relative;
}
.table th[data-sorted-direction]::after {
	content: "";
	position: absolute;
	margin-left: 0.3em;
}
.table th[data-sorted-direction="ascending"]::after {
	content: "\01F892";
	transform: rotate(90deg);
}
.table th[data-sorted-direction="descending"]::after {
	content: "\01F892";
	transform: rotate(-90deg);
}