/* Variables */
:root {
	--qgate-green: rgb(49, 163, 84);
	--qgate-red: rgb(214, 97, 107);
	--qgate-grey: rgb(199, 199, 199);
	--qgate-yellow: rgb(219, 219, 141);
}

/* Base Layout */
body {
	background-color: hsl(23, 8%, 89%);
}

* {
	min-height: 0;
	min-width: 0;
}

#wrapper {
	display: table;
	table-layout: fixed;
	height: 100%;
	width: 100%;
}

#nav {
	width: 180px;
	border-right: 1px solid transparent;
	padding-left: 5px;
	padding-right: 0;
	vertical-align: top;
	height: inherit;
	display: table-cell;
}

#content {
	display: table-cell;
	width: 100%;
	height: inherit;
	vertical-align: top;
	padding-top: 0.9375rem;
	border: none;
	background-color: hsl(23, 8%, 89%);
}

#feedback-spacers .spacer {
	height: 4.4em;
}

.max-height {
	height: 100% !important;
}

.column, .columns {
	position: relative;
}

/* Top Bar */
.accordion-divider {
	height: 0.9375rem;
}

.app-title-ul {
	margin-bottom: 0 !important;
}

.app-title-section>a {
	background: rgb(239, 239, 239);
	color: rgb(34, 34, 34);
	padding: 1rem;
	display: block;
	font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	font-size: 1rem;
}

.app-logo {
	max-height: 2.8125rem;
	max-width: 5rem;
}

.app-title {
	font-size: 1.125rem;
	color: rgb(255, 255, 255);
	font-weight: bold;
	line-height: 2.8125rem;
}

.top-bar-section ul {
	list-style-type: none;
}

/* Allgemein */
.suppress-bottom-margin {
	margin-bottom: 0;
}

.filter-shortcut {
	outline: 0;
}

.panel-box {
	border: 1px solid lightgrey;
	padding: 0.5rem 1rem;
	border-radius: 2px;
	background-color: rgb(245, 245, 245);
}

.append-colon:not(:empty)::after {
	content: ":";
	color: black;
}

.limit-label-size {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

label.required:after {
	content: '*';
	display: inline;
	color: red;
}

.dont-hide-overflow {
	overflow: visible !important;
}

.force-word-wrap {
	overflow: hidden;
	word-wrap: break-word;
	white-space: normal;
}

.position-relative {
	position: relative;
}

.link-to::before {
	content: "\2197\00a0";
}

/* Listen Anstriche */
.square {
	list-style-type: square;
}

.dash {
	list-style-type: none !important;
}

.dash>li::before {
	display: inline-block;
	content: '-';
	width: 1em;
	margin-left: -1em;
}

/* Anpassung Tabellen Layout */
.cell {
	font-size: 14px;
	/* sorgt für ausreichend Abstand zwischen den Zeilen */
	line-height: 2.75;
}

.detail-label > input {
	margin-bottom: 0;
}

.padding-for-small, .head-row .columns {
	overflow: hidden;
	text-overflow: ellipsis;
}

.head-row {
	font-weight: bold !important;
	background-color: rgb(245, 245, 245);
}

.prevent-void-icon:empty:after, .detail-label:empty:after {
	content: "\00a0";
	display: inline;
}

.head-label:empty:after {
	content: '\00a0';
}

.head-label:after {
	content: ':';
}

.display img {
	max-width: none;
}

.display:nth-child(2n+1) {
	background-color: rgb(245, 245, 245);
}

@media only screen and (max-width: 63.9375em) , only screen and
	(max-device-width: 63.9375em) {
	.display {
		padding-bottom: 1rem !important;
	}
	
	.micro-row {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
	}
	
	.head-label {
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: 150px;
	}
	
	.detail-label {
		flex-grow: 1;
		flex-shrink: 0;
	}
}

.browserWarning {
	display: block;
	text-align: center;
	font: 16px sans-serif;
	color: rgb(255, 255, 255);
	line-height: 20px;
	margin: 0;
	padding: 10px;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: rgba(199, 199, 199, 0.8);
	background-color: rgb(0, 0, 0);
	opacity: 0.7;
	z-index: 1000;
	width: 100%;
}

@keyframes browserWarningAnimation {
	0% {
		height: 0px;
		padding: 0px;
	}
	
	99% {
	height: 0px;
	padding: 0px;
	}
	
	100% {
	height: 100%;
	padding: initial;
	}
}

.browserWarning.delayed {
	animation-name: browserWarningAnimation;
	animation-duration: 10s;
}

.box-title {
	font: 12pt sans-serif;
	color: rgb(237, 139, 0);
	font-weight: bold;
	margin-bottom: 1rem;
	word-wrap: break-word;
}

.footer-link {
	color: rgb(170, 167, 161);
}

.footer-top-space {
	margin-top: 7px;
}

.footer-title {
	font-size: 0.7rem;
	white-space: nowrap;
}

.footer-logo {
	margin-top: 10px;
}

/* Verdict */
.verdict {
	font-weight: bold;
}

.verdict.v-none {
	color: rgb(81, 81, 81);
	fill: rgb(81, 81, 81);
}

.verdict.v-passed {
	color: rgb(45, 127, 45);
	fill: rgb(45, 127, 45);
}

.verdict.v-inconclusive {
	color: rgb(127, 127, 45);
	fill: rgb(127, 127, 45);
}

.verdict.v-failed {
	color: rgb(214, 97, 107);
	fill: rgb(214, 97, 107);
}

.verdict.v-error {
	color: rgb(214, 39, 40);
	fill: rgb(214, 39, 40);
}

/* Tooltip */
.tooltip-line {
	line-height: 1.3rem;
}

/* Progress Bar wenn Diagramm noch nicht fertig geladen ist */
.progress-bar {
	display: block;
	width: 100%;
}

/* Abstand nach unten erzwingen */
.bottom-1rem {
	margin-bottom: 1rem !important;
}

.top-1rem {
	margin-top: 1rem !important;
}

/* BorderRadius unterdrücken */
.suppress-border-radius {
	border-radius: 0 !important;
}

/* Filter Speichern & Laden */
.icon-24x24 {
	width: 24px !important;
	height: 24px !important;
	min-width: 24px;
}

.icon-16x16 {
	width: 16px !important;
	height: 16px !important;
	min-width: 16px;
}

.callout-icon {
	height: 3em;
	margin: -1em 0;
}

/* deaktivierte Links mittels CSS "abschalten" */
a:disabled, a:disabled:hover, button:disabled, button:disabled:hover {
	color: inherit;
	cursor: default;
	text-decoration: none;
}

a[disabled="disabled"] img, button[disabled="disabled"] img {
	filter: grayscale(80%);
}

a[disabled="disabled"]:hover img, button[disabled="disabled"]:hover img {
	filter: grayscale(100%);
}

/* Sortier Pfeile für Spaltenkopf */
.order-by-none:before,
.order-by-ascending:before,
.order-by-descending:before,
.wicket_orderNone:before,
.wicket_orderDown:before,
.wicket_orderUp:before {
	content: '';
	padding-right: 12px;
	background-repeat: no-repeat;
	margin: 0 2px;
	outline: 0;
}

.order-by-none,
.order-by-ascending,
.order-by-descending,
.wicket_orderNone,
.wicket_orderDown,
.wicket_orderUp {
	/* hinter sort-Indicator nicht umbrechen */
	white-space: nowrap;
}

.order-by-none a,
.order-by-ascending a,
.order-by-descending a,
.wicket_orderNone a,
.wicket_orderDown a,
.wicket_orderUp a {
	/* Sortier Link wiederum umbrechen */
	white-space: wrap;
}

.order-by-none:before,
.wicket_orderNone:before {
	background-image: url('images/none.png');
}

.order-by-ascending:before,
.wicket_orderDown:before {
	background-image: url('images/ascending.png');
}

.order-by-descending:before,
.wicket_orderUp:before {
	background-image: url('images/descending.png');
}

/* Modal Window */
@media only screen and (max-width: 63.9375em) , only screen and
	(max-device-width: 63.9375em) {
	/* Modal Fenster bei kleinen Auflösungen in der Breite limitieren */
	div.wicket-modal {
		left: 0 !important;
		width: 100% !important;
	}
}

.modal-window {
	box-shadow: 0 0 3px rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);
}

.modal-legend {
	margin-top: 50px;
	font-size: 0.8rem;
}

.w_caption {
	height: 2em;
	margin-bottom: 1rem;
}

.w_close::after {
	content: '\2716';
	font-family: "Segoe UI Symbol";
}

.w_captionText {
	font-size: 1em;
	line-height: 1.6em;
}

.w_content_3 {
	border: 0 !important;
}

.w_content_container>.callout {
	margin-bottom: 0;
}

.modern-modal.modal-window {
	background-color: hsl(23, 8%, 89%);
}

.modern-modal .w_content, .modern-modal .w_content_2 {
	padding-top: 0 !important;
	background-color: inherit !important;
}

.modern-modal .w_caption {
	border: 1px solid rgb(190, 190, 190) !important;
	box-shadow: 0 0 10px rgb(200, 200, 200) !important;
}

.modern-modal .w_caption {
	padding: 5px;
	height: 2rem !important;
}

div.modern-modal.modal-window a.w_close {
	height: auto;
}

.modern-modal .w_captionText {
	text-indent: 1.3rem !important;
}

.svg-as-img {
	display: inline-block;
	vertical-align: middle;
}

/* Utility für Flex Rows */
.force-column-padding {
	padding: 0 1rem;
}

.force-column-padding.input-group {
	margin-bottom: 0;
}

/* off canvas nav */
@media screen and (max-width: 64em) {
	.off-canvas {
		background: #333;
	}
}

.menu>li:not(.menu-text) >a:not(.text-menu-item) {
	display: block;
	padding: 0.66667rem;
	color: rgba(255, 255, 255, 0.7);
	border-bottom: 1px solid #262626;
	transition: background 300ms ease;
	outline: 0;
}

.menu>li:not(.menu-text) >a:not(.text-menu-item):hover {
	background: #242424;
}

.mobile-ofc .title {
	display: block;
	padding: 0.3rem 0.9375rem;
	color: #999;
	text-transform: uppercase;
	font-size: 0.75rem;
	font-weight: bold;
	background: #444;
	border-top: 1px solid #5e5e5e;
	border-bottom: none;
	margin: 0;
}

/* stretch callouts */
.stretch-column {
	display: flex;
}

.stretch-column>.callout {
	flex: 1;
}

.stretch-row {
	width: 100%;
}

/* Prefix und Postfix aus Foundation 5 */
.postfix {
	border-left: none;
}

.prefix, .postfix {
	background: #e6e6e6;
	color: #0a0a0a;
	border-color: #cacaca;
	border-style: solid;
	border-width: 1px;
	display: block;
	font-size: 1rem;
	height: 2.4375rem;
	line-height: 2.3375rem;
	padding-bottom: 0;
	padding-top: 0;
	position: relative;
	text-align: center;
	width: 100%;
}

@media screen and (max-width: 40em) {
	.medium-3 .prefix, .medium-3 .postfix {
		border-bottom: 0;
	}
	
	.small-12 .prefix {
		border-bottom: 0;
	}
	
	.small-12 .postfix {
		border-left: 0;
	}
}

@media screen and (min-width: 40em) {
	.medium-3 .prefix {
		border-right: 0;
	}
	.large-3 .prefix {
		border-right: 0;
	}
	
	.medium-3 .postfix {
		border-left: 0;
	}
	.large-3 .postfix {
		border-left: 0;
	}
}

/* Minimal Button Design */

/*
 * Eine Btn-Ng-Gruppe sollte ein <span> sein, welches ausschließlich
 * btn-ng-Elemente (<a>) enthält. Die einzelnen Buttons werden dann ohne
 * Zwischenraum dargestellt und die Border zwischen zwei Buttons kollabiert.
 */
.btn-ng-group {
	line-height: 1.5;
	display: inline-block;
	/* keine Zwischenräume zwischen den inline Buttons durch font-size:0 */
	font-size: 0;
}

.btn-ng-group .btn-ng {
	/* font-size:0 der btn-ng-group für die Elemente der Gruppe wieder zurücksetzen: */
    font-size: 1rem; /* 'initial' wird von IE11 nicht unterstützt */
}

.cell .btn-ng-group .btn-ng {
	/* font-size:0 der btn-ng-group für die Elemente der Gruppe wieder zurücksetzen: */
    font-size: 14px; /* .cell Inhalte haben eine kleinere font-size */
}

.btn-ng-group .btn-ng:not(:last-child) {
	/* Border collapse in btn-ng-group */
    border-right-width: 0px;
    /* Damit die rechte Border beim Umbrechen der Buttons nicht fehlt: */
    box-shadow: 1px 0 lightgray;
}

.btn-ng-dummy {
	background-color: #ECECEC;
	box-shadow: 0 0 0 1px LightGrey;
	padding: 0.1rem 0.5rem;
}

.btn-ng {
	background-color: #ECECEC;
	color: rgb(237, 139, 0);
	border: 1px solid lightgrey;
	padding: 0.3em 0.5em 0.1em 0.5em;
	cursor: pointer;
	white-space: nowrap;
	display: inline-block;
	line-height: 1;
	/* vertikal auf der Baseline ausrichten */
	vertical-align: baseline;
	margin: 2px 0;
	
	/* Mindest-Höhe ist so eingestellt, dass Btns mit Text und Btns mit 16x16 Icon gleich hoch sind,
	damit es gut aussieht, falls sie direkt nebeneinander angeordnet sind (btn-ng-group) */
	box-sizing: content-box;
	min-height: 1.2em;
}

.btn-ng img {
	position: relative;
	top: -2px;
}

.btn-ng:hover {
	background-color: FloralWhite;
	color: rgb(237, 139, 0);
}

.btn-ng.disabled, .btn-ng[disabled="disabled"] {
	opacity: 0.6;
	cursor: not-allowed;
}

.btn-ng.disabled:hover, .btn-ng[disabled="disabled"]:hover {
	background-color: #ECECEC;
}

.btn-ng.arrow-link:after {
	position: relative;
	top: -1px;
}

.dropdown-pane {
	background-color: white;
	padding: 0;
}

.dropdown-pane .icon-16x16 {
	vertical-align: text-top;
}

.dropdown-row {
	display: block;
	padding: 0.2rem;
	border-bottom: 1px solid #cacaca;
	line-height: 1.5rem;
}

.dropdown-row:last-child {
	border-bottom: none;
}

.dropdown-row:hover {
	background-color: FloralWhite;
}

.arrow-link::after {
	content: '\25BC';
	font-size: 0.6rem;
}

.dots-link::after {
	background-image: url("images/action.svg");
	background-size: 16px 16px;
	width: 16px;
	height: 16px;
	display: inline-block;
	content: "";
	vertical-align: middle;
}

.pointer {
	cursor: pointer;
}

.no-pointer-events {
	pointer-events: none;
}

/**
 * Flex Spalten Custom:
 * Spalten mit .shrink nur auf large und größen als shrink behalten,
 * darunter wird bspw. small-12 verwendet
 */
@media screen and (max-width: 64em) {
	.shrink.large-expand {
		-webkit-flex: 1 1 0px !important;
		-ms-flex: 1 1 0px !important;
		flex: 1 1 0px !important;
	}
}

textarea {
	resize: none;
}
textarea.resize-vertical{
	resize: vertical;
}

.url-schema {
	padding-left: 20px;
	font-size: 0.7rem;
	margin-top: -0.5rem;
	margin-bottom: 1rem;
}

.odd {
	background-color: rgb(245, 245, 245);
}

/* Inhalt der NoRecordsToolbar zentriert darstellen: */
.norecords-td {
	text-align: center;
}

.comma-separated-list:after {
	content: '';
	display: block;
	clear: left;
}
.comma-separated-item {
	float: left;
}
.comma-separated-item:after {
	content: ',\00a0';
}
.comma-separated-item:last-child:after {
	content: '';
}

/**
 * In Wicket 9 bekommen (im Zuge der CSP Einführung, vgl. [WICKET-6747] und [WICKET-6725]) Komponenten-Platzhaltern und
 * Hidden-Formular-Elemente ein Hidden-Attribut, statt das direkt display: none gesetzt wird. Die Platzhalter-Elemente
 * bekommen weder den CSS-Style noch die CSS-Klasse des Elements, wodurch Layouts zerrissen werden können, z.B. wenn die
 * Komponente des Platzhalters eigentlich display: inline hat, aber dann plötzlich ihr Platzhalter display: block ist.
 *
 * Daher die hidden-Elemente auf jedem Fall ausblenden:
 */
*[hidden] {
	display: none!important;
}

.highlightable:hover {
    background: #d8d8d8!important;
}

.monospace-label {
    font-family: monospace;
}