:root {
	--bg: #ABABAB;
	--lightbg: #DDDDDD;

	--error: #FF4444;
	--ok: #44FF44;
	--na: #AAAAAA;

	--bold: 700;
}

body {
	margin: 0;
}

p {
	margin: 0;
	font-size: 14px;
}

h1 {
	font-size: 24px;
	margin-bottom: 16px;
}

h2 {
	font-size: 20px;
	margin-bottom: 16px;
}

h3 {
	font-size: 16px;
	margin-bottom: 14px;
}

h4 {
	font-size: 14px;
	margin-bottom: 10px;
	margin-top: 0;
	font-weight: var(--bold);
}

table {
	width: 100%;
}

table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
}

th, td {
	padding: 2px 4px;
}

th {
	background-color: var(--lightbg);
}

label {
	display: block;
	margin-bottom: 2px;
}

input, select {
	display: block;
}

.header {
	padding: 8px;
	background-color: var(--bg);
	display: flex;
	align-items: center;
}

.header .logo {
	margin-right: 8px;
	height: 22px;
	width: 22px;
}

.header .title {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.8px;
	margin-right: 8px;
}

.header .slogan {
	font-size: 16px;
	flex-grow: 1;
}

.menu {
	background-color: var(--lightbg);
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.menu .pages {
	display: flex;
}

.menu .pages .page {
	margin-right: 16px;
}

.menu .account {
	display: flex;
	align-items: center;
}

.menu .account .username {
	font-weight: var(--bold);
	display: inline-block;
	margin-right: 16px;
}

.login {
	display: flex;
	padding-top: 120px;
	align-items: center;
	flex-direction: column;
}

.login .form {
	width: 360px;
}

.error {
	color: var(--error);
	margin-bottom: 24px;
}

.field {
	width: min(100%, 300px);
	margin-bottom: 8px;
}

.body {
	padding: 8px;
}

.marker {
	display: flex;
	align-items: center;
}

.yes {
	width: 12px;
	height: 12px;
	border-radius: 6px;
	background-color: var(--ok);
	margin-right: 4px;
}

.no {
	width: 12px;
	height: 12px;
	border-radius: 6px;
	background-color: var(--error);
	margin-right: 4px;
}

.na {
	width: 12px;
	height: 12px;
	border-radius: 6px;
	background-color: var(--na);
	margin-right: 4px;
}

.actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.actions .action {
	margin-right: 8px;
}

.tokenDetails {
}

.tokenDetails .infoGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 16px;
}

.bold {
	font-weight: var(--bold);
}

.secret {
	margin: 16px;
	padding: 8px;
	background-color: var(--lightbg);
	border-radius: 4px;
}