:root
{
	--color-background: #2f2f33;
	--color-background-form: #3f3f46;
	--color-background-control: #2b2a33;

	--color-border: #959599;

	--color-button: #52525b;
	--color-button-hover: #71717a;
	--color-button-click: #3f3f46;

	--color-font: #f9f9fa;
	--color-yellow: #ffcc00;
	--color-yellow-over: #e6b800;
}

@font-face
{
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face
{
	font-family: 'Roboto-Bold';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/Roboto-Bold.ttf') format('truetype');
}

body
{
	background-color: var(--color-background);
	font-family: Roboto;
	font-size: 14px;
	color: var(--color-font);
}

h2
{
	color: var(--color-yellow);
	margin: 0px;
	text-align: center;
}

p.grid
{
	display: grid;
	grid-gap: 5px;
	margin: 25px 0px 10px 0px;
	text-align: left;
}

p.flex
{
	display: flex;
	align-items: left;
	gap: 5px;
	margin: 25px 0 10px 0;
}

p.none
{
	margin: 25px 0 0 0;
}

.logo
{
	border-radius: 50%;
}

input:focus
{
	outline: none;
}

input[type="text"],
input[type="password"]
{
	background-color: var(--color-background-control);
	border: 1px solid var(--color-border);
	color: var(--color-font);
	height: 30px;
	padding: 5px;
	width: 288px;
}

.action-button
{
	align-items: center;
	background-color: var(--color-button);
	border: 1px solid var(--color-border);
	color: var(--color-font);
	cursor: pointer;
	display: inline-flex;
	height: 20px;
	justify-content: center;
	margin: 0 5px 0 0;
	padding: 5px;
	text-decoration: none;
	width: 20px;
}

.button,
input[type="submit"]
{
	background-color: var(--color-button);
	border: 1px solid var(--color-border);
	color: var(--color-font);
	cursor: pointer;
	font-family: Roboto-Bold;
	font-style: bold;
	padding: 10px 20px;
	text-decoration: none;
}

.button:hover,
.action-button:hover,
input[type="submit"]:hover
{
	background-color: var(--color-button-hover);
}

.button:focus,
.action-button:focus,
input[type="submit"]:focus
{
	background-color: var(--color-button-click);
}

.container
{
	display: flex;
	min-height: 100vh;
}

.login-container
{
	background-color: var(--color-background-form);
	border: 1px solid var(--color-border);
	width: 300px;
	padding: 20px;
	margin: 50px auto;
	color: var(--color-font-default);
}

.captcha
{
	margin: 0px;
}

.error
{
	background-color: #ea7979;
	border: 1px solid #6d0000;
	color: #6d0000;
	display: flex;
	margin: 25px auto 10px auto;
	width: 298px;
}

.success
{
	background-color: #8dd163;
	border: 1px solid #254f0c;
	color: #254f0c;
	display: flex;
	margin: 25px auto 10px auto;
	width: 298px;
}

.top-bar {
	background-color: #000; /* Schwarz */
	color: #ffcc00; /* Gelb */
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.top-bar img
{
	height: 50px;
}

.top-bar i
{
	font-size: 24px;
	color: #ffcc00; /* Gelb */
}

.menu {
	background-color: var(--color-background-form);
	width: 250px;
	padding: 20px;
	box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2);
}

.menu img {
	width: 100px;
	margin-bottom: 20px;
}

.menu a {
	display: block;
	margin: 15px 0;
	color: var(--color-font);
	text-decoration: none;
	padding: 10px;
	background-color: var(--color-button);
	border: 1px solid var(--color-border);
	text-align: center;
	border-radius: 5px;
}

.menu a:hover {
	background-color: var(--color-button-hover);
}

.content {
	background-color: var(--color-background-form);
	flex-grow: 1;
	padding: 20px;
	margin-left: 20px;
	box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2);
}

table {
	width: 100%;
	border-collapse: collapse;
}

table, th, td {
	border: 1px solid var(--color-border);
}

th, td {
	padding: 10px;
	text-align: left;
}

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

td {
	background-color: var(--color-background-control);
}