body {
	--padding: 50px;
	margin: 0;
	background-color: var(--bg-default);
	color: var(--fg-default);
	min-height: 100vh;
	font-family:  Arial, sans-serif;
	box-sizing: border-box;

	padding: var(--padding);
	padding-top: calc(var(--padding) + 70px);
	padding-right: calc(var(--padding) + 60px);

	position: relative;

	/* display: flex;
	flex-direction: column;
	justify-content: space-between; */
}

@media only screen and (max-width: 1000px) {
	body {
		--padding: 10px;
		padding-right: var(--padding);
	}
}

.circlebutton {
	color: white;
	background-color: var(--green);
	border: none;
	width: 1.5em;
	height: 1.5em;
	font-size: 2em;
	border-radius: 100%;
	margin: 10px;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
	cursor: pointer;
	text-align: center;
	line-height: normal;
	vertical-align: middle;
	text-decoration: none;
	display: inline-block;
	text-transform: none;
	text-indent: 0px;
	padding: 1px 6px;
	box-sizing: border-box;
	transition: box-shadow linear 0.05s;
}

.circlebutton:active {
	box-shadow: none;
}

.addressbutton {
	border: none;
	background: none;
	color: var(--fg-default);
	font-size: 1em;
	text-decoration: underline;
	cursor: pointer;
}

.icon_32 {
	width: 32px;
	height: 32px;
}

.icon_16 {
	width: 16px;
	height: 16px;
}

.twofactorcode {
	text-align: center;
}

.red_bg {
	background: var(--red);
}

a {
	color: var(--fg-default);
}

a > h1 {
	color: var(--fg-default);
}
h1 > svg {
	height: 30px;
}
h1 > svg > path {
	fill: var(--fg-default);
}

.ticket_status_elm {
	display: inline-block;
	font-size: 0.8em;
	padding: 2px;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 50px;
	color: var(--fg-default);
}

.ticket_status_elm.ticket_status_closed::after {
	content: 'CLOSED';
}
.ticket_status_elm.ticket_status_closed {
	background-color: var(--red);
}

.ticket_status_elm.ticket_status_in_progress::after {
	content: 'IN PROGRESS';
}
.ticket_status_elm.ticket_status_in_progress {
	background-color: var(--yellow);
}

.ticket_status_elm.ticket_status_open::after {
	content: 'OPEN';
}
.ticket_status_elm.ticket_status_open {
	background-color: var(--green);
}


.helpbutton {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.helpbutton::before {
	display: inline-block;
	content: '';
	gap: 5px;
	text-decoration: none;
	font-weight: bold;
	font-size: 1em;
	width: 30px;
	height: 30px;
	background-image: url("/svgs/question_mark.svg");
	background-size: contain;
}

.helpbutton::after {
	content: 'Schnellhilfe';
}

* {
	outline: none;

	--green: #00a880;
	--yellow: #ad9a47;
	--red: #fe504b;

	--bg-default: #F0F0F0;
	--bg-subtle: #dfdfdf;
	--bg-accent: white;
	--bg-highlight: rgb(203, 192, 147);

	--fg-default: rgb(20,20,20);
	--fg-subtle: rgb(102, 102, 102);

	--border: rgb(130, 130, 130);
	--border-strong: rgb(80, 80, 80);

	--accent: var(--green);
	--fg-accent: var(--green);
}

@media (prefers-color-scheme: dark) {
	* {
		--green: #00a880;
		--yellow: #ad9a47;
		--red: #fe504b;

		--bg-default: rgb(50,50,50);
		--bg-subtle: rgb(55,55,55);
		--bg-accent: rgb(40,40,40);
		--bg-highlight: rgb(112, 98, 38);

		--fg-default: rgb(230, 230, 230);
		--fg-subtle: rgb(150,150,150);

		--border: rgb(30, 30, 30);
		--border-strong: rgb(130, 130, 130);

		--accent: var(--green);
		--fg-accent: var(--green);
	}
	.circlebutton {
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
	}
}