:root {
 --background: #1d2d50;
 --accent: #fcdab7;
 --accent2: #1e5f74;
 --color: #fefefe;
 --dull: #b8b8b8;
 --error: #e74c3c;
 --highlight: rgba(255,255,255,.05);
}

html, body {
	height: 100%;  /* Wichtig: Setze 100% Höhe für beide */
	margin: 0;     /* Entferne Standardmargen */
	padding: 0;    /* Entferne Standardabstände */
}


body {
	font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
	width: 100%;
	background: #1d2d50;
	color: var(--color);
}
h1 {
	font-size: 5em;
	margin: 40px 0;
}
a {text-decoration: none}
.flexy {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.editable form{
	padding:0px;
}
.editable textarea {
	border: 1px solid #ccc; /* Dezenter grauer Rand */
	background-color: #ccc;
	padding: 5px;
	border-radius: 4px; /* Abgerundete Ecken */
	outline: none; /* Standard-Rand beim Fokus entfernen */
	box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
	width: 100%;
	box-sizing: border-box; /* Damit das Padding die Gesamtbreite nicht beeinflusst */
}


.editable-select form {
	display: inline-block;
}

select.w70 {
	width:70px;
}


.table-cell {
	display: flex;
	align-items: stretch; /* Alle Inhalte in der Zelle sollen die gleiche Höhe haben */
}

.content-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%; /* Höhe der Zelle */
}

.p8{
	width:8%;
	word-wrap: break-word;
	white-space: normal;
}

.p15{
	width:15%;
	word-wrap: break-word;
	white-space: normal;
}

.w150{
	width:130px;
	word-wrap: break-word;
	white-space: normal;
}

.editable {
	flex: 1; /* Füllt den verfügbaren Platz aus */
	overflow: auto;
}

.bottom-text {
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 1.3em;
	position: relative;
	max-width: 100%;
}

.one-line {
	height: 1.3em;
}

.buttons {
	position: absolute;
	right: 0px;
}

.actual {
	color: rgb(243, 83, 83);
}

.m400 {
	max-height: 400px;
	max-width: 100%;
	overflow: auto ;
	scrollbar-width: thin; /* Für Firefox */
	display: flex;
	flex-wrap: wrap;
}

.para {
	flex: 1 1 200px;
	margin: 5px;
	box-sizing: border-box;
}

@media (max-width: 400px) {
	.para {
		flex-basis: 100%;
	}
}


.noscroll{
	overflow: hidden !important;
}
.m400 b {
	color: #affec2;
}

._m200::-webkit-scrollbar {
	width: 8px; /* Breite der Scrollbar */
	height: 8px; /* Höhe der Scrollbar */
}
._m200::-webkit-scrollbar-thumb {
	background: #ccc; /* Farbe des Scrollbalkens */
	border-radius: 10px; /* Abgerundete Ecken */
}

._m22::-webkit-scrollbar-track {
	background: #f1f1f1; /* Farbe der Scrollbar-Spur */
}


.content {
	position: relative;
}
.content p:first-of-type {
	margin-top: 0;
}

.zoom {
	position: absolute;
	top: 0px;
	right: 5px;
	cursor: pointer;
	_z-index:1
}


/*
dialog {
	padding: 20px;
	border: none;
	border-radius: 5px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	max-width:90%;
	max-height:95%;
	z-index: 900;
}
.dialog-content {
	text-align: left;
	display: flex;
	flex-wrap: wrap;
}
dialog::backdrop {
	background: rgba(0,0,0,0.5);
}

.dialog-content div.para{
	border-bottom: 1px solid grey;
}

.dialog-content img {
	width: auto !important;
	max-width: 500px !important;
	height: auto;
	display: block;
	_margin: 0 auto;
}
*/

dialog {
	padding: 20px;
	border: none;
	border-radius: 5px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	max-width: 90%;
	max-height: 95%;
	_width: auto;
	z-index: 900;
}

.dialog-content {
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.dialog-content img {
	max-width: 500px !important;
}

/* Regel für genau 3 `.para` Elemente */
.dialog-content:has(.para:nth-child(3)):not(:has(.para:nth-child(4))) .para {
	flex: 1 1 calc(100% / 3 - 10); /* Drei Spalten */
}

.dialog-content div.para{
	border-bottom: 1px solid grey;
}

/* Regel für weniger als 4 `.para` Elemente */
.dialog-content:has(.para:not(:nth-child(n+4))) img {
	max-width: 100% !important;
}




/* Backdrop Styling */
dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}



.close-btn {
	display: inline-block;
	margin-top: 10px;
	padding: 5px 10px;
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 3px;
	cursor: pointer;
}

#contentDialog .dialog-content {
	max-height: 90vh; /* oder eine passende Höhe für dein Modal */
	overflow: auto;
}

.bilder {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(24%, 1fr));
	gap: calc((100% - 24% * 4) / 3);
}

.cell {
	width: 100%;
}

.cell img {
	width: 100%;
	height: auto;
	max-height: 300px;
	object-fit: contain;
}

.upload {
	_margin-bottom: 15px;
}
.upload-button {
	cursor: pointer !important;
}

.dropzone.dz-clickable, .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
  cursor: copy;
}
.quickform {
	text-align: left
}
.quickform form {
	_width:100%;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.quickform .col {
	flex: 1;
	min-width: 300px;
}

.row {
	display: flex;
	align-items: flex-start;
	margin-bottom: 10px;
}

.label {
	display:inline-block;
	width:200px;
	text-align:right;
	margin-right:15px;
	margin-block-start: 0;
	margin-block-end: 0;
}
.element {
	display:inline-block;
	width:800px;
	text-align: left;
}
.element input, .element textarea {
	width: 100%;
}
.element textarea {
	height: 100px;
}

.left {
	text-align: left
}
.comment {
	background-color: #dcdcdc !important;
	color: black;
}

.bigger {
	font-size:1.2em;
}

.white {
	color:white;
}
.red {
	color: var(--error);
}
.tableContainer {
	flex: 1;
	overflow-y: auto;
	scrollbar-width: thin; /* Für Firefox */

}

table td{
	margin-bottom: 10px;
	text-align: left;
	padding: 5px;
	vertical-align: top;
	height: 100%;
}

table th {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	text-align: left;
	white-space: nowrap;
}

thead {
  position: sticky;
  top: 0;
  z-index: 1000; /* Höherer Z-Index */
}

tr._head {
	position: sticky;
	top: 0;
	z-index: 10; /* Z-Index, um den Kopfbereich über den restlichen Zellen zu halten */
}

.mainTable {
	height: 100px;
	scrollbar-width: thin; /* Für Firefox */
	table-layout: fixed;
	width: 100%;
}

.mainTable td {
	background-color: #4c5e83
}

.subTable {
	table-layout: fixed;
	width: 100%;
}

.subTable td {
	background-color: #dcdcdc;
	word-wrap: break-word;
	white-space: normal;
}

.hidden {
	position: absolute;
	left: -1000%;
	top: -1000%;
	height: 0;
	width: 0;
	pointer-events: none;
	opacity: 0;
}

.formWrapper {
	height: 100%;
	width: 100%;
	display: grid;
	align-items: center;
	justify-content: center;
}
form#task {
	width: 95vw;
	max-width: 500px;
	box-sizing: border-box;
	padding: 50px 0;
}
form h1 {
	margin: 0 0 15px 0;
	font-size: 3em;
}
.inputblock {
	position: relative;
	display: block;
	padding: 20px 0;
	clear: both;
}
.inputblock input {
	width: 100%;
	padding: 7px;
	box-sizing: border-box;
	display: block;
	background: transparent;
	outline: none;
	font-family: inherit;
	font-size: 15px;
	color: inherit;
	border: 0;
	margin-top: 2px;
	border-bottom: 1px solid var(--color);
}

select_ {
  appearance: none; /* Remove default appearance */
  -webkit-appearance: none; /* For Safari */
  -moz-appearance: none; /* For Firefox */
  outline: none; /* Remove outline */
  cursor: pointer; /* Change cursor */

  color: inherit; /* Inherit text color */
  background-color: transparent;
  border: 2px solid var(--color);
  border-radius: 2px;
  padding: 6px 30px;
  font-family: inherit;
  font-size: 12px;
  text-align: center;

  /* Background settings for the dropdown arrow */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;

  width: 200px;
}
 /* Chosen Select styling */

.inputfield{
	width: 80px
}

.search {
	padding: 6px 12px;
}

 /* Styling für mehrere Auswahlmöglichkeiten */
 .chosen-container-multi .chosen-choices, .inputfield {
   border: 2px solid var(--color);
   border-radius: 2px;
   padding: 6px;
   font-size: 12px;
   background:unset;
   cursor: pointer;
   color: #ffffff;
   position: relative; /* Ermöglicht die Positionierung des Pfeils */
   padding-right: 30px; /* Platz für das Pfeil-Icon */
   align-items: center; /* Vertikale Zentrierung der Inhalte */

 }
 .chosen-container-multi .chosen-choices li.search-field input[type=text]{
   color: var(--color);
   height: unset;
 }

.chosen-container .chosen-choices::after {
	content: ""; /* Leeres Content, um ein pseudo-Element zu erzeugen */
	position: absolute; /* Absolute Positionierung */
	right: 7px; /* Abstand vom rechten Rand */
	border: solid var(--color); /* Pfeil-Farbe */
	border-width: 0 2px 2px 0; /* Stil für den Pfeil */
	padding: 3px; /* Größe des Pfeils */
	transform: rotate(45deg); /* Drehung, um einen Pfeil zu bilden */
	pointer-events: none; /* Verhindert Interaktion mit dem Pfeil */
 }

.chosen-container-multi .chosen-choices li.search-choice {
	padding: 0px;
	margin: 0px;
	margin-right: 2px;
	padding-right: 15px;
	padding-left: 2px;
	font-size: 10px;

}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
	top: 1px;
	right: 2px
}


.inputblock label {
	display: block;
	font-size: 13px;
	color: var(--dull);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 300;
}


.btn {
	display: inline-block;
	padding: 12px 60px;
	font-size: 18px;
	border: 2px solid var(--color);
	border-radius: 2px;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	transition: background .3s, color .3s;
}

.btn:hover, .btn:active, .active {
	border: 0;
	padding: 14px 62px;
	background: var(--color);
	color: var(--background) !important;
}
.btn:active, .active {
	box-shadow: inset 0 0 4px 5px rgba(0,0,0,.1);
}

.small{
	padding: 6px 30px;
	font-size: 12px;
}
.btn.small:hover, .btn.small:active, .active{
	padding: 8px 32px;
}
.search {
	padding: 6px 12px;
}
.btn.small.search:hover, .btn.small.search:active{
	padding: 8px 14px;
}


a.btn {
	color:white;
	text-decoration: none;
}

.errcontainer {
	font-size: 14px;
	opacity: 1;
	transition: opacity .3s;
}
.err {
	margin: 5px 0;
	color: var(--error);
}
.err ul {
	list-style-type: none;
	margin: 0;
	padding-inline-start: 2em;
}

.error, .reqnote {
	color: var(--error);
}
.reqnote {
	margin-left: 15px;
	margin-bottom: 20px;
}

.wave {
	width: 100vw;
	height: 25vw;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: -1;
	pointer-events: none;
}
.wave:nth-child(2) {
	bottom: -5%;
	width: 103%;
	left: -3%;
}
form a {
	position: relative;
	margin: 0;
	line-height: 1.4em;
	display: inline-block;
	color: var(--dull);
	text-decoration: none;
	transition: color .3s;
}

.errorcontainer, #toplinks {
	margin-bottom: 20px;
}


.errorcontainer a {
	display: inline;
	line-height: normal;
	text-decoration: underline;
	color: inherit;
}
form a:before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	height: 1px;
	background: var(--dull);
	width: 0px;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	transition: width .5s;
}
form a:hover:before {
	width: 100%;
}
form a:hover {
	color: var(--color);
}

.loader {
	height: 64px;
	width: 64px;
	position: fixed;
	top: calc(50% - 32px);
	left: calc(50% - 32px);
	border: 2px solid var(--highlight);
	border-left: 2px solid var(--color);
	border-radius: 50%;
	-webkit-animation: loader 1.5s linear infinite;
	-moz-animation: loader 1.5s linear infinite;
	-ms-animation: loader 1.5s linear infinite;
	-o-animation: loader 1.5s linear infinite;
	animation: loader 1.5s linear infinite;
}

@-webkit-keyframes loader {to {-o-transform: rotate(360deg);-ms-transform: rotate(360deg);-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
@keyframes loader {to {-o-transform: rotate(360deg);-ms-transform: rotate(360deg);-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);transform: rotate(360deg);}}


.message {
	text-align: center;
}

.message h2 {
	font-size: 4em;
}

.checkbox-group input[type="checkbox"],
.checkbox-group label {
	display: inline-block; /* Checkbox und Label in einer Zeile */
	margin-right: 8px; /* Abstand zwischen Checkbox und Label */
	vertical-align: middle; /* Vertikale Ausrichtung */
	width: auto;
}