/* MAIN-LAYOUT: */
body {
	margin: 0;
	padding: 0;
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	font-size: 11pt; /* Standard-Schriftgröße; Im Rest der Website relativ dazu per em; ACHTUNG: Auch in Semantic site.variables mitändern!! */
	font-family: Arial, sans-serif;
	overflow: hidden;
	display: grid;
	transition: 0.25s; /* f. Sidebar-Toggle */
}

	body.withHeadline {
		grid-template-rows: 5em fit-content(0) fit-content(0) 2.5em auto 2em;
		/*                  1-2 2-3            3-4            4-5   5-6  6-7*/
	}

	body.withoutHeadline {
		grid-template-rows: 0   0              fit-content(0) 2.5em auto 2em;
		/*                  1-2 2-3            3-4            4-5   5-6  6-7*/
	}

	body.withSidebar {
		grid-template-columns: 300px auto;
		/*                     1-2   2-3  */
	}

	body.withoutSidebar {
		grid-template-columns: 0   auto;
		/*                     1-2 2-3  */
	}

/* Media-Default: */
.restrictedContentWidth {
	width: 900px;
	max-width: 90% !important;
}

/* Media: */
/* Media - width: */
@media (max-width: 1139px) {
	body {
		font-size: 10pt;
	}

		body.withSidebar {
			grid-template-columns: 200px auto;
			/*                     1-2   2-3  */
		}

	.restrictedContentWidth {
		width: 90% !important;
		max-width: 90% !important;
	}
}

@media (max-width: 799px) {
	body {
		font-size: 9pt;
	}

	.restrictedContentWidth {
		width: 90% !important;
		max-width: 90% !important;
	}
}

@media (max-width: 549px) {
	body {
		font-size: 7pt;
	}

	.restrictedContentWidth {
		width: 98% !important;
		max-width: 98% !important;
	}
}

/* Media - Einblendungsstufen .forSmall .forMedium .forLarge: */
@media (max-width: 949px) {
	.forLarge {
		display: none !important; /* <=999px ausgeblendet, >999px eingeblendet */
	}
}

@media (max-width: 549px) {
	.forMediumOrLarge {
		display: none !important; /* >549 eingeblendet */
	}
}

@media (min-width:950px), (max-width:549px) {
	.forMedium {
		display: none !important; /* >549 eingeblendet, <1000 ausgeblendet */
	}
}

@media (min-width:950px) {
	.forSmallOrMedium {
		display: none !important; /* >549 eingeblendet, <1000 ausgeblendet */
	}
}

@media (min-width: 550px) {
	.forSmall {
		display: none !important; /* <550 eingeblendet, >=550 ausgeblendet */
	}
}

@media (orientation: portrait) {
	.notForPortrait {
		display: none !important;
	}
}

@media print {
	.noprint {
		display: none !important;
	}

	body {
		grid-template-rows: 5em 0              fit-content(0) 2.5em auto 2em;
		/*                  1-2 2-3            3-4            4-5   5-6  6-7*/
		height: unset;
	}
}

#TitleLine {
	grid-row: 1/2;
	grid-column: 1/3;

	padding: 0; /* Bei enthaltenen Items direkt, individuell! */

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center; /* vertical */
	justify-items: start; /* horizontal */
}

#MenueLine {
	grid-row: 2/3;
	grid-column: 1/3;
	padding: 0; /* Bei enthaltenen Items direkt, individuell! */
	background-color: #DDDDDD;
	text-align: center;
	display: flex;
	flex-direction: row;
	align-items: center; /* vertical */
	justify-content: center; /* horizontal: flex-start: links; center: mittig; */
}

#SidebarLeft {
	grid-row: 5/6;
	grid-column: 1/2;
	align-items: center; /* horizontal: flex-start: links; center: mittig; */
	overflow: auto;
}

#HeadlineLeft { /* Links in Sidebar-Spalte */
	grid-row: 4/5;
	grid-column: 1/2;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	z-index: 5;
	line-height:1.25em;
}

#HeadlineMain { /* Rechts in MainContent-Spalte. Dort dann nochmals unterteilt in 'HeadlineMainLeft' / 'HeadlineMainMiddle' / 'HeadlineMainRight'. Diese werden per JS setHeadlineMain() befüllt */
	grid-row: 4/5;
	grid-column: 2/3;

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	font-weight: bold;
	line-height:1.25em;
	margin-top: 3px;
	padding: 0 0.5em;
}

.HeadlineSystem { /* Nur Rechts, unter HeadlineMain. I.d.R. ausgeblendet. Für Systemmeldungen reserviert. */
	grid-row: 3/4;
	grid-column: 1/3;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-weight: bold;
	line-height: 1.25em;
	margin-top: 0;
	padding: 0 0.5em;
	color: red;
	background-color: #9494d477; /* Wie secondary-buttons + '77' */
}

#MainContentArea { /* Großer Hauptdarstellungsbereich, rechts neben SidebarLeft */
	grid-row: 5/6;
	grid-column: 2/3;

	display: flex;
	flex-direction: column;
	padding: 0.25em;
	padding-top: 0;
	align-items: center; /* horizontal: flex-start: links; center: mittig; */
	overflow: auto;
}

#FootLine {
	grid-row: 6/7;
	grid-column: 2/3;
	text-align: center;
	align-items: center; /* vertical */
	padding: 0.25em;
}

/* TAGS: */
table, tr, td, th {
	vertical-align: top;
}

tr, td, th {
	page-break-inside: avoid;
	page-break-after: auto;
}

/*
input, select, textarea {
	color: #555555 !important;
	border-color: #CCCCCC !important;
}

	input::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder {
		color: #999999 !important;
	}

	input.required, select.required, textarea.required {
		border-color: #FFC0A3 !important;
	}
*/

input[type="color"] {
	border-radius: .3rem;
	padding: .1rem;
}

input[type="file"] {
	border-radius: .3rem;
	padding: .1rem;
}


input:focus, textarea:focus, select:focus, input[type="checkbox"]:focus {
	/* border-color: #000000 !important; $base_text_color */
	border-color: #FEB952 !important; /* secondary color */
}

select {
	border-radius: .3rem;
	padding: .0rem;
}

/* OWN CLASSES: */
.disabled {
	background-color: #eee !important;
}

.nopadding {
	padding: 0;
}

.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.colorBaseText {
	color: #000000; /* Dunkelblau; Hier kein !important, damit Links bei hover Farbe weiterhin nach orange ändern */
}

.colorBaseDesign {
	color: #8080c0 !important; /* Orange */
}

.colorSuccess {
	color: green !important;
}

.colorAttention {
	color: #8080c0 !important; /* Derzeit wie colorBaseDesign-Orange */
}

.colorError {
	color: red !important;
}

.clickable {
	cursor: pointer;
}

.clickableBaseDesignColor {
	cursor: pointer;
	color: #8080c0 !important; /* Orange */
}

.secondary {
	background-color: #9494d4 !important;
	color: white !important;
}

.noborder {
	border-style: none;
	border-width: 0;
}

.noTableBorder {
	border-style: none !important;
	border-width: 0 !important;
	border-collapse: collapse !important;
}

.singleTableBorder {
	border-style: solid;
	border-width: 1px;
	border-collapse: collapse;
/*	vertical-align: top; */
}

.errorborder {
	border-style: solid !important;
	border-width: 1px !important;
	border-color: red !important;
	border-radius: .3em !important;
}

.attentionborder {
	border-style: solid !important;
	border-width: 1px !important;
	border-color: #8080c0 !important; /* Derzeit wie colorBaseDesign-Orange */
	border-radius: .3em !important;
}

.successborder {
	border-style: solid !important;
	border-width: 1px !important;
	border-color: green !important;
	border-radius: .3em !important;
}

.lightimageborder {
	border-style: solid !important;
	border-width: 1px !important;
	border-color: #ccc !important;
	border-radius: .3em !important;
}

.messageBox {
	margin: 1em;
	margin-top: 0 !important;
	text-align: center;
	min-height: auto;
	height: auto;
	line-height: 1.2em;
}

.explanationText { /* siehe auch passive oder gray */
	color: #444444; /* Dunkelgrau */
	margin-top: 0.2em;
	line-height: 1.1em;
	font-size: 90%;
}

.ui.sortable.table thead th {
	white-space: normal;
}

.ckalenderLabel {
	font-style: italic;
	font-weight: bold;
	color: #000000; /* CKalender-blau */
	font-style: italic;
}

.ckalenderLabelC {
	font-style: italic;
	font-weight: bold;
	color: #8080c0; /* Orange */ /* #C60021; CKalender-rot */
}

.groupBorder {
	border-style: solid;
	border-width: 1px;
	border-radius: .3em;
	border-color: rgba(255,255,255,0.0); /* zunächst unsichtbar */
	padding: 0 .3em;
	white-space: nowrap;
}

.bgAccordionTitle {
	background-color: #F0F0F0;
	border-radius: .3em;
	padding: .2em .4em !important;
}

.bgTableStriped {
	background-color: #FFAA000F; /* #F0F0F0; */
}

.bgCalToday {
	background-color: #FFFFA0;
}

.bgCalSunday {
	background-color: #CCCCCC;
}

.bgCalForeignMonth {
	background-color: #EEEEEE;
}

.bgCalHighlighted {
	cursor: pointer;
	/* background-color: #FFFF004D !important; */
	background-color: rgba(255,255,0,0.3) !important;
	*/
}

.bgLigthGray {
	background-color: #F8F8F8 !important;
}

.calEventBox {
	border-style: solid;
	border-width: 1px;
	border-radius: .3em;
	border-color: #A0A0A0;
	padding: .2em;
	padding-right: .8em;
	margin-bottom: 3px;
	line-height: 1.1em;
	text-align: left;
	position: relative;
	overflow: hidden;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}

.calGrid {
	border-style: solid;
	border-width: 1px !important;
	border-color: #A0A0A0 !important;
	border-collapse: collapse;
}

.tableGrid {
	border-style: solid;
	border-width: 1px !important;
	border-color: #A0A0A0 !important;
	border-collapse: collapse;
	padding: 0.2em 0.3em;
}

.tableGridWhite {
	border-style: solid;
	border-width: 1px !important;
	border-color: #FFFFFF !important;
	border-collapse: collapse;
	padding: 0.2em 0.3em;
}

.myTableSize {
	font-size: 0.9em !important;
	line-height: 1.2em !important;
	margin: 0 auto !important;
}

.tableHead {
	background-color: #DDDDDD !important;
	font-weight: bold;
	text-align: center !important;
	vertical-align: middle !important;
	color: #444444 !important;
	line-height: 1em;
	padding: 0.5em !important;
	border-collapse: collapse;
}

.orangeTableFootline {
	margin: 0 !important;
	padding: 0 !important;
	max-height: 1px !important;
	border-bottom-color: #8080c0;
	border-bottom-style: solid;
	border-bottom-width: 4px;
	border-radius: 0 0 4px 4px;
}

.orangeHeader {
	background-color: #8080c0 !important; /* Orange */
	color: white !important;
}

.compactHeader {
	padding: 0.4em !important;
}

.compactOrangeHeader {
	background-color: #8080c0 !important; /* Orange */
	color: white !important;
	padding: 0.4em !important;
}

.orangeWhite {
	background-color: #8080c0 !important; /* Orange */
	color: white !important;
}

.tabHead {
	color: #444444 !important;
}

.dropableBackground {
	background-color: rgba(255, 0, 0, 0.5);
}

/* Fixiert Tabellenkopf, während Body scrollbar ist:
	s. https://stackoverflow.com/questions/29906134/semantic-ui-keep-thead-visible-when-scrolling-tbody
*/
.ui.table thead tr:first-child > th {
	position: sticky !important;
	top: -0.7em; /* Etwas größer als padding in MainContentArea */
	z-index: 2;
}

.passive { /* siehe auch gray oder explanationText */
	opacity: 0.5;
}

.gray { /* siehe auch passive oder explanationText */
	color: #525252 !important;
}

.ui.message {
	border-radius: 0.3em;
}

#DocumentDragDropField {
	min-height: 3em;
	border-style: dashed;
	border-color: rgba(34, 36, 38, 0.4);
	border-width: 1px;
	border-radius: .3em;
	cursor: pointer;
	vertical-align: middle;
	padding: 3px;
	background-image: url('../../../images/upload_light.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* An Semantic UI angepasst / adaptiert: */
.uiModalActionFooter {
	text-align: right;
	background-color: #FFFFFF;
	margin: 0;
	border-top: 1px solid rgba(34, 36, 38, 0.15);
	padding: 14px;
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
}

[v-cloak] {
	display: none;
}

.ui.segment.mysiteeditorsegment {
	/*	width: 100%; */
	/*	max-width: 90%; */
	min-width: 50%;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 3rem;
}

/* ui font-sizes relativ, sonst arbeitet ui leider mit rem :-( */
.ui.segments .segment, .ui.segment, .ui.form, .ui.buttons .button, .ui.buttons .or, .ui.button, .ui.checkbox, .ui.checkbox .box, .ui.checkbox label {
	font-size: inherit;
}

.ui.large.buttons .button, .ui.large.buttons .or, .ui.large.button {
	font-size: 1.16666667em;
}

.ui.label {
	font-size: 0.875em;
}

.ui.message {
	min-height: unset;
}

.ui.form:disabled { /* scheint nicht zu greifen? */
	background-color: #eee !important;
}