:root {
	--text-color: #404040;
	--prim-color: #295178; /* Alternative Text-Farbe, z.B. für Labels */
	--sec-color: #f6a725; /* Effektfarbe */
	--light-color: white;
	--background-color: white;
	--h1-icon-text-color: var(--sec-color);
	--h1-icon-background-color: var(--prim-color);
	--table-text-color: var(--prim-color); /* #6e8ec4; */
	--hover-background-color: #e0e8f8;
	--button-text-color: var(--light-color);
	--button-background-color: var(--prim-color);
	--button-down-text-color: var(--light-color);
	--button-down-background-color: #0092d9; /* #0080ff; */
	--label-text-color: var(--prim-color);
	--label-background-color: var(--background-color);
	--modcolor: #ffffa0;
	--input-background: #f0f0f8;
	--zebracolor: #f4f4f8;
	--inaktivcolor: #c0c0c0;
	--menucolor: #606060;
	--menuheadcolor: var(--hover-background-color);
	--menubgcolor: #f8f8f8;
}

.uxv1 {
	--label-text-color: var(--button-text-color);
	--label-background-color: var(--button-background-color);
}

@font-face {
	font-family: 'Q';
	/* src: url('/files/Q.ttf') format('truetype'); */
	src: url('/files/Q.woff2') format('woff2');
}

@font-face { font-family: 'OpenSans'; src: url('/files/open-sans-latin-500-normal.woff') format('woff'); }
@font-face { font-family: 'OpenSans'; src: url('/files/open-sans-latin-500-italic.woff') format('woff'); font-style: italic; }
@font-face { font-family: 'OpenSans'; src: url('/files/open-sans-latin-700-normal.woff') format('woff'); font-weight: bold; }
@font-face { font-family: 'OpenSans'; src: url('/files/open-sans-latin-700-italic.woff') format('woff'); font-weight: bold; font-style: italic; }

body {
	font-family: "OpenSans";
	font-weight: normal;
	color: var(--text-color);
	background-color: var(--background-color);
	box-sizing: border-box;
	overflow-x: hidden;
	padding: 1vw 0vw 0vw 2vw;
	margin: 0;
}

body>div.layout, .layout>div>.layout {
	grid-template-rows: repeat(100000, auto) 1fr; /* unten auffüllen */ 
}

div {
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}

form {
	display: contents;
}

button, .button {
	color: var(--button-text-color);
	font: inherit;
	background-color: var(--button-background-color);
	padding: 6px 12px;
	border-style: outset;
	border-width: 0px;
	border-radius: 2px;
	margin: 0px;
}

span.button { /* gefummelt, damit's in Firefox aussieht wie ein Button */
	box-sizing: border-box;
	position: relative;
	top: -2px;
	padding: 6px 12px;
}

:disabled {
	opacity: 0.5;
}

button:not([disabled]):hover, .button:not([disabled]):hover {
	color: var(--button-down-text-color);	
	background-color: var(--button-down-background-color);
}

.detail.ulf button.yesno, .detail.ulf .button.yesno {
    padding: 1px 9px 1px 9px;
    margin-top: -2px;
}


button.down, .button.down {
	border-style: inset;
}

input {
	font-family: inherit;
	font-size: inherit;
	background-color: var(--input-background);
	border-width: 1px;
	border-style: inset;
	max-width: 100%;	
}

input[type=checkbox] {
    transform: scale(2.0);
    vertical-align: -7px;
}

input[type=checkbox].data {
	margin-left: 8px;
}

input[type="file"] {
	font-size: 100%;	
	padding: 2px 8px;
	margin: 0px 0px 0px 0px;
}

textarea {
	background-color: var(--input-background);
	border-width: 1px;
	border-style: inset;
}

/*
button i, .button i {
	font-size: 120%;
}
*/

textarea {
	font-family: inherit;
	font-size: inherit;
	resize: both;
}

select {
	font-family: inherit;
	font-size: inherit;
	background-color: var(--input-background);
	max-width: 100%;	
}

progress {
	width: 100%;
}

fieldset {
	display: inline-block;
	border: none;
	padding: 0px 0px 0px 0px;
}

/* RadioButtons als echte Buttons darstellen */
/* Checkboxen als Toggle-Buttons darstellen */

fieldset input[type="radio"]{
	display: none;
}

fieldset input[type="checkbox"]{
	display: none;
}

fieldset label {
    font-size: 100%;
    background-color: var(--input-background);
    padding: 3px 8px 2px 8px;
    box-shadow: 1px 1px 0px 0px grey;
}

fieldset input:checked + label {
	color: var(--button-down-text-color);	
	background-color: var(--button-down-background-color);
	box-shadow: 2px 2px 0px 0px grey inset;
}

fieldset.data {
    padding-top: 0px;
    padding-left: 0px;
    margin: 8px 12px -1px 0px;
}

label i {
    margin-right: 4px;
}

span {
	display: inline-block;
	white-space: pre-wrap;
}

span.tablename {
	position: relative;
	height: 0px;
	top: 1ex;
	left: 4.8em;
	font-size: 90%;
	color: var(--table-text-color);
}

.more a {
	color: gray;
}

a {
	color: inherit;
}

i {
	font-family: 'Q';
	font-style: normal;
	font-weight: normal;
	font-size: 106%;
	vertical-align: text-bottom;
}

dl {
	display: grid;
	grid-template-columns: max-content 1fr;
}

dt {
	grid-column-start: 1;
	text-align: right;
	color: var(--label-text-color);
	background-color: var(--label-background-color);
	padding: 3px 3px 3px 6px;
	border: 1px solid lightgray;
	margin: 0px 0px 4px 0px;	
}

dt::after {
	content: ":";
}

dd {
	grid-column-start: 2;
	grid-column-end: -1;
	padding: 4px 4px 4px 6px;
	margin: 0px 0px 4px 0px;	
}


details {
	margin-bottom: 36px;
}


details:not([open]) div.title span::after,
details:not([open])>summary>div.layout>div.h2>span::after {
	content: " ▼";
	color: var(--sec-color);
}


summary::-webkit-details-marker,	
summary::marker {
	 content: "▶ "; /* Verwendung des "Pfeil"-Symbols anstelle des Dreiecks */
	 color: var(--sec-color);
	 font-size: 1em;
	 font-weight: bold;
}	

details[open] > summary::-webkit-details-marker,
details[open] > summary::marker {
	 content: "▾ ";
	 color: var(--prim-color);
/* 	 font-size: 2em; */
}


/* #tabs { */
/* 	list-style: none; */
/* 	margin: 0; */
/* 	padding: 0; */
/* } */

.tabs {
	margin-top: 24px;
}

.tabs>ul {
	margin-block-start: 0em;
	margin-block-end: 0.4em;
	padding-inline-start: 0.2em;
}

.tabs li {
	display: inline;
	background-color: var(--inaktivcolor);
	border: 0.1em solid grey;
	border-bottom: none;
	border-radius: 0.5em 0.5em 0 0;
	padding: 0.4em;
	line-height: 150%;
}

.tabs li:focus,
.tabs li:hover {
	background-color: var(--hover-background-color);
}

.tabs li[aria-selected="true"] {
	background-color: var(--light-color);
	padding: 0.5em;  
}

.tabsContent {
	border-top: 0.1em solid grey; 
	padding: 0.2em;
}

.tabsContent[aria-hidden="true"] {
	display: none;
}
 
.tabsContent[aria-hidden="false"] {
	display: block;
}


.draggable::before {
	cursor: move;
	content: "drag_indicator";
	color: #00000060;
	font-family: 'Q';
	vertical-align: text-bottom
}

.positionable::before {
	cursor: ns-resize;
	content: "drag_handle";
	color: #00000060;
	font-family: 'Q';
	vertical-align: text-bottom
}

.red, .detail.red div, span i.red { color: #f60;}
.warnred, .detail.warnred div, span i.warnred { background-color: red; color: white; }
.green, .detail.green div, span i.green { color: #0b0;}
.yellow, .detail.yellow div, span i.yellow { color: #FFA000;}
.blue, .detail.blue div, span i.blue { color: blue;}
.inaktiv, .detail.inaktiv div, span i.inaktiv { color: var(--inaktivcolor); }

.button .blue { color: white; }

.header0 .tab {
	padding-right: 12px;
/* 	margin-left: 0px; */
}

.h1, .col1.h1 {
	font-size: 160%;
	font-weight: bold; 
	margin-bottom: 1ex;
}

.h1.title {
/* 	margin-top: 2ex; */
}

.h1 span i {
	font-size: 130%;
	color: var(--h1-icon-text-color);
	background-color: var(--h1-icon-background-color);
	padding: 0.3em;
	border-radius: 20%;
}

.h2 {
	font-size: 26px;
	margin: 0px 0px 6px 0px;
}


.h3 {
	font-size: 22px;
	margin: 12px 0px 6px 0px;
	margin: 0px;
	padding: 0px;
}

.col1.last:has(>.hidden) {
	margin-top: 0px;
	margin-bottom: 0px;
}

.tab {
	margin-left: 8px;
}

.panel {
	padding: 1px 8px 1px 8px;
	display: contents;
}

.last {
	grid-column-end: -1;
}

.detail.ulf .last {
	padding-right: 0px;
}

.left {
	justify-self: start;
	text-align: left;
}

.center {
	justify-self: center;
	text-align: center;
	justify-items: center;
	width: 100%
}

.right {
	justify-self: end;
	text-align: right;
}

.detail.ulf .right {
	float: right;
}

.data {
	float: none;
}

.top {
	align-self: start;
}

.middle {
	align-self: center;
    vertical-align: middle;
}

.bottom {
	align-self: end;
}

.layout {
	position: relative;
	display: inline-grid;
	height: 100%; /* für table-Scrollbalken */ 
	grid-template-columns: repeat(99, max-content) 1fr;
	padding: 0px;
}


div:has(>.layout) {
	overflow-y: auto;
}

div:has(>#OMainMenuLayout, >#OMainMenu) {
	overflow-y: unset;
}

body:has(.layout.ulf .layout.list, .table) {
	height: 100dvh;
}

.layout.ulf div:has(>.layout.list), div.table {
	overflow-y: auto; /* für Scrollbalken */
}

.layout.ulf div.layout.list, div.table {
	padding-right: 16px; /* Scrolling ignores padding/margin/border */
	padding-bottom: 16px;
}


.col1 { grid-column-start: 1; }
.col2 { grid-column-start: 2; }
.col3 { grid-column-start: 3; }
.col4 { grid-column-start: 4; }
.col5 { grid-column-start: 5; }
.col6 { grid-column-start: 6; }
.col7 { grid-column-start: 7; }
.col8 { grid-column-start: 8; }
.col9 { grid-column-start: 9; }
.col10 { grid-column-start: 10; }
.col11 { grid-column-start: 11; }
.col12 { grid-column-start: 12; }
.col13 { grid-column-start: 13; }
.col14 { grid-column-start: 14; }
.col15 { grid-column-start: 15; }
.col16 { grid-column-start: 16; }
.col17 { grid-column-start: 17; }
.col18 { grid-column-start: 18; }
.col19 { grid-column-start: 19; }

.cols1 { grid-column: span 1; }
.cols2 { grid-column: span 2; }
.cols3 { grid-column: span 3; }
.cols4 { grid-column: span 4; }
.cols5 { grid-column: span 5; }
.cols6 { grid-column: span 6; }
.cols7 { grid-column: span 7; }
.cols8 { grid-column: span 8; }
.cols9 { grid-column: span 9; }

.buttons {
	margin-top: 24px;
	margin-bottom: 18px;
}

.buttons button {
	margin: 0px 18px 0px 0px;
}

.card {
	box-shadow: 2px 2px 2px silver inset;
/* 	border-left: 2px silver solid; */
/* 	border-top: 2px silver solid; */
	padding: 12px;
}

.label {
	display: block;
	font-size: 90%;
	text-align: right;
	color: var(--label-text-color);
	background-color: var(--label-background-color);
	padding: 0px 0px 0px 9px;
	margin: 6px 0px 0px 0px;
}

.innerlabel {
	font-size: 90%;
	color: var(--label-text-color);
	background-color: var(--label-background-color);
	padding: 3px 0px 0px 9px;
	margin: 7px 0px 0px 0px;
}

.data {
	display: inline-block;
	padding: 0px 6px 0px 0px;
	margin: 6px 12px 0px 0px;
}

body.editMode span.data {
	margin-top: 2px;
}

input.data {
	margin: 4px 0px 4px 0px;
}	

span.checkbox {
	font-family: "Q";
	border: none;
	font-size: 180%;
	margin: 0;
	padding: 0;
	line-height: 1.0;
	vertical-align: -35%;
}

span.data.checkbox {
	margin: 0px 0 -16px -8px;
	vertical-align: -50%;
}

button.data, .button.data {
/* 	margin: 4px 18px 0px 0px; */
	padding: 4px 6px 4px 6px;
}

button.yesno.data, .button.yesno.data {
    padding: 1px 9px 1px 9px;
    margin-top: 4px;
}

button.nobutton {
	color: var(--button-background-color);;
	background-color: transparent;
	padding: 0px;
}

.parentlabel.data {
	padding-left: 0px;
}

.column_header {
	font-weight: bold;
}

.modified:not(.column_header) {
	background-color: var(--modcolor);
}

.modified.column_header {
	color: var(--modcolor);
}

.header0, .footer0, .header1, .footer1, .header2, .footer2, .header3, .footer3 {
	display: contents;
	font-weight: bold;
}

.header0 div, .header1 div, .header2 div, .header3 div, th {
	margin-top: 16px;	
	color: var(--button-text-color);
	background-color: var(--button-background-color);
}

.header1, .footer1 {
	font-size: 110%;
}

.header2, .footer2 {
	font-size: 120%;
}

.header3, .footer3 {
	font-size: 130%;
}

.title span i {
	margin-right: 0.3em;
}

.title span {
	text-indent: -2.8em;
	padding-left: 2.8em;
}

table {
	border-collapse: separate;
	border-spacing: 4px 4px;
}

th, td	 {
	  vertical-align: top;
	  text-align: left;
}

thead>tr, .header0>div, .searchable>div {
	position: sticky;
	top: 0px;
	z-index: 2;
}

tr:not(.searchable)>th {
	padding: 0 6px;
}

thead>tr.searchable, .searchable>div {
	top: 30px;
}

th.lineButtons {
	visibility:hidden; 
}


div.searchable {
	display: contents;
}

.searchable button {
	padding: 0px;
}

.searchable div, .searchable th {
	background-color: var(--hover-background-color);
}

.addButton {
	border-radius: 100%;
	font-weight: bold;
	font-size: 28px;
	line-height: 1;
	padding: 3px 0 0 0;
	width: 28px;
	height: 28px;
}

.guestMode .addButton {
	visibility: visible;
}

:hover > .addButton:not([disabled]) {
	visibility: visible;
}

.list>.detail>div{
	padding: 4px 4px 4px 4px;
}

div.detail {
	display: contents;
}

.zebra:not(:hover) :not(.lineButtons):not(.detailrow):not(.showButton):not(.showButton>i) {
	background-color: var(--zebracolor);
}

.detailrow {
	position: absolute;
	grid-column: 1/-1;
/* 	border: 2px solid black; */
/* 	border-radius: 16px; */
/* 	top: -10px; */
/* 	bottom: -10px; */
/* 	right: -10px; */
/* 	left: -10px; */
}

.detail.ulf:hover > :not(.detailrow):not([disabled]) {
	background-color: var(--hover-background-color);
	box-shadow: 2px 2px 5px silver;
}

.lineButtons {
	white-space: nowrap;
}

.lineButtons button {
	visibility: hidden;
	padding: 0px;	
}

.detail.ulf:hover .lineButtons button:not([disabled]) {
	visibility: visible;
}


.signature {
	border: 1px solid silver;
}


.inputshort {
	width: 3em;
}

.inputint {
	width: 5em;
}

.inputlong {
	width: 6em;
}

.c10, .inputc10 {
	width: 10em;
}

.c15, .inputc15 {
	width: 15em;
}

.c20, .inputc20 {
	width: 20em;
}

.c30, .inputc30 {
	width: 30em;
}

.c40, .inputc40 {
	width: 40em;
}

.c50, .inputc50 {
	width: 50em;
}

input::-webkit-calendar-picker-indicator {
  display: none;/* remove default arrow */
}
.datalistArrow:after {
    content: url(/files/triangle.png);
    margin-left: -32px;
    margin-right: 20px; 
    pointer-events:none;
}

/* .unsortable::after { } */
.sortable::after { font-family: 'Q'; content: 'unfold_more';  color: var(--inaktivcolor); }
.ascending::after { font-family: 'Q'; content: 'keyboard_arrow_up'; }
.descending::after { font-family: 'Q'; content: 'keyboard_arrow_down'; }


.vspace, .col1.h1.vspace {
	margin-top: 36px;
}


.hline {
  border-left: solid black 1px;
  margin-left: 2em;
  padding-left: 2em;
}

/* .rotate0 { } */
.rotateRight { transform: rotate(90deg) scale(.707);} /* Die Größe des Containers wird nicht automatisch angepasst. :-( */
.rotate180 { transform: rotate(180deg); }
.rotateLeft { transform: rotate(270deg) scale(.707);}


#Ode\.tesd\.q\.MI6\.Login {
	margin: 2em 0 0 1em;
}


.hidden {
	display: none;
}

@media (max-width: 60em) {
	.layout { grid-template-columns: repeat(3, max-content) 1fr; }
	.col1 { grid-column-start: 1; }
	.col2 { grid-column-start: 2; }
	.col3 { grid-column-start: 3; }
	.col4 { grid-column-start: 4; }
	.col5 { grid-column-start: 1; }
	.col6 { grid-column-start: 2; }
	.col7 { grid-column-start: 3; }
	.col8 { grid-column-start: 4; }
	.col9 { grid-column-start: 1; }
	.col10 { grid-column-start: 2; }
	.col11 { grid-column-start: 3; }
	.col12 { grid-column-start: 4; }
	.col13 { grid-column-start: 1; }
	.col14 { grid-column-start: 2; }
	.col15 { grid-column-start: 3; }
	.col16 { grid-column-start: 4; }
	.col17 { grid-column-start: 1; }
	.col18 { grid-column-start: 2; }
	.col19 { grid-column-start: 3; }
}

@media (max-width: 32em) {
	.layout { grid-template-columns: auto; }
	.label { display: inline; text-align: left; }
	.col1 { grid-column-start: 1; }
	.col2 { grid-column-start: 1; }
	.col3 { grid-column-start: 1; }
	.col4 { grid-column-start: 1; }
	.col5 { grid-column-start: 1; }
	.col6 { grid-column-start: 1; }
	.col7 { grid-column-start: 1; }
	.col8 { grid-column-start: 1; }
	.col9 { grid-column-start: 1; }
	.col10 { grid-column-start: 1; }
	.col11 { grid-column-start: 1; }
	.col12 { grid-column-start: 1; }
	.col13 { grid-column-start: 1; }
	.col14 { grid-column-start: 1; }
	.col15 { grid-column-start: 1; }
	.col16 { grid-column-start: 1; }
	.col17 { grid-column-start: 1; }
	.col18 { grid-column-start: 1; }
	.col19 { grid-column-start: 1; }
	.label {
		text-align: left;
	}
}

/* no support in Firefox */
/*.map {
	resize:both;
/*}

/* Dictionary.Icon größer */

span[id^="Icon-"] a i {
	font-size: 300%;
}


.uxv1 .label {
	font-size: inherit;
	padding: 3px 6px 3px 9px;
	margin: 4px 0px 0px 0px;	
}


.ratingContainer {
	direction: rtl;
	unicode-bidi: bidi-override;
	text-align: left;
	margin-top: 8px;
}

input[type="radio"].rating {
  display: none;
}

label.rating:hover, label.rating:hover ~ label.rating {
  color: orange;
}

input[type="radio"].rating:checked ~ label {
  color: var(--sec-color);
}