:root {
	--bodyGapWidth: 1px;
	--borderColor: rgb(160,160,160);
	
	--headerHeight: 1.7rem;
	--headerButtonSize: calc(var(--headerHeight) * 0.58);
	
	--secondHeaderHeight: 1.3rem;
	--secondHeaderButtonSize: calc(var(--secondHeaderHeight) * 0.5);
	
	--navigationWidth: 14rem;
	
	--headerBackground: #d0d0d0;
	--pageHeaderBackground: #f0f0f0;
	--navigationBackground: #f8f8f8;
	--contentBackground: white;
	
	--formGroupBackground: unset;
	--formGroupMargin: 0px;
	--formGroupBorder: calc(var(--formGroupMargin) * 0.5);
	--formGroupPadding: calc(var(--formGroupMargin) * 0.3);
}

html {
	/* needed for android browser because else overflow hidden is not respected */
	position: fixed;
	width: 100%;
	height: 100%;
}

body {
	font-family: sans-serif;
	font-size: 11px;
	margin: 0px;
	height: 100%;
	overflow: hidden;
	display: grid;
	grid-template-rows: var(--headerHeight) minmax(200px, 1fr);
	gap: var(--bodyGapWidth);
	background: var(--borderColor);
}

::selection {
	background: rgba(0,0,0,.05);
}

#header {
	display: grid;
	grid-template-columns: var(--navigationWidth) auto min-content;
	box-sizing: border-box;
	text-align: left;
	background-color: var(--headerBackground);
	padding-left: 0ex;
}

#headerStart {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

.headerButton {
	padding: calc(var(--headerButtonSize) / 5);
	margin-left: calc(var(--headerButtonSize) / 1.5);
	width: var(--headerButtonSize);
	height: var(--headerButtonSize);
}

#headerEnd {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

#search {
	border: solid 1px #888;
	height: 1.55em;
	margin-right: 2em;
}

#search input:focus {
	outline: none;
}

/* content */

#container {
	display: flex;
	gap: var(--bodyGapWidth);
}

#navigationContainer {
	width: var(--navigationWidth);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--bodyGapWidth);
}

.secondHeader {
	display: flex;
	align-items: center;
}

.pageTitle {
	flex-grow: 1;
}

.pageButton {
	padding: calc(var(--secondHeaderButtonSize) / 5);
	margin-right: calc(var(--secondHeaderButtonSize) / 1.7);
	width: var(--secondHeaderButtonSize);
	height: var(--secondHeaderButtonSize);
}

#navigationHeader {
	height: var(--secondHeaderHeight);
	flex-shrink: 0;
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	background: var(--pageHeaderBackground);
}

#navigation {
	flex-grow: 1;
	overflow: auto;
	padding-left: 0.7rem;
	background: var(--navigationBackground);
}

#navigation ul {
	padding-left: 0.2rem;
}

#navigation li, .contextMenu li, .actionSideBar li {
	margin: 0.4rem;
}

#navigation li, .contextMenu li, .actionSideBar li {
	list-style: none;
}

#navigation li a, .contextMenu li a, .actionSideBar li a {
	display: block;
	border-top: 0.2rem transparent solid;
	border-bottom: 0.2rem transparent solid;
	width: 100%;
	box-sizing: border-box;
}

.action {
	color: -moz-hyperlinktext;
	color: blue;
	cursor: pointer;
	text-decoration: none;
}

.action:hover {
	text-decoration: underline;
}

.action[disabled] {
	cursor: default;
	text-decoration: none;
	color: gray;
}

.button {
	stroke: #555;
	fill: #555;
}

.button:hover {
	stroke: #000;
	fill: #000;
}

/* pages */

#pageContainer {
	margin: 0px;
	overflow: auto;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.page {
	width: 100%;
	flex-grow: 1;
	flex-basis: 2em;
	overflow-y: hidden;
	overflow-x: auto;
	box-sizing: border-box;
	display: grid;
	grid-template-rows: var(--secondHeaderHeight) auto;
	gap: var(--bodyGapWidth);
}

.pageHeader {
	box-sizing: border-box;
	background: var(--pageHeaderBackground);;
	padding-right: 1em;
	padding-left: 1em;
}

.pageContentAndActions {
	overflow-y: auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bodyGapWidth);
}

.pageContent {
	background: var(--contentBackground);
	height: 100%;
	max-height: 100%;
	flex-grow: 1;
	box-sizing: border-box;
	padding-left: 0.7rem;
	padding-top: 0.5ex;
	padding-right: 0.7rem;
	overflow: auto;
}

.pageContent.contentQuery {
	padding-right: 1em;
}

.pageContent iframe {
	height: calc(100% + 0.5ex);
	width: calc(100% + 1.4rem);
	margin-left: -0.7rem;
	margin-top: -0.5ex;
	margin-right: -0.7rem;
	border: 0;
	font-family: inherit;
}

.pageContent .contentLogin {
	width: 90%;
}

table.table tr td {
	height: 1.7em;
	line-height: 1.6em;
	text-overflow: ellipsis;
}

table.table tr th {
	padding-right: 0.5em;
}

table.table tr th:last-child {
	padding-right: 0em;
}

table.table thead {
	position: sticky;
	top: -0.5ex;
	padding-top: 0.5ex;
	background: white;
}

.table .form.noGrow > div > div {
	padding-top: 0;
	padding-bottom: 0;
	flex-grow: 0 !important;
}

.table .form {
	margin-top: 0;
}

.table .columnFilter input {
	width: 100%;
	box-sizing: border-box;
}

.table tfoot tr td * {
	padding: 0.5em;
	vertical-align: middle;
}

.contextMenu {
	width: 10rem;
	background: white;
	overflow: auto;
	position: fixed;
	height: unset;
	border: 1px var(--borderColor) solid;
	padding: 0.2rem 0ex 0.2rem 1.2rem;
	z-index: 20;
}

.actionSideBar {
	background: var(--navigationBackground);
	width: 15rem;
	height: 100%;
	box-sizing: border-box;
	margin: 0px;
	padding-left: 1.5rem;
	overflow: auto;
	flex-grow: 0;
	flex-basis: 15em;
}

/* dialog */

dialog {
	border: 1px var(--borderColor) solid;
	padding: 0em;
	width: auto;
	bottom: auto;
	right: auto;
	color: unset;
	display: flex;
	flex-direction: column;
}

dialog:nth-child(3n+1) {
	top: 2em;
}

dialog:nth-child(3n+2) {
	top: 3em;
}

.dialogHeader {
	border-bottom: 1px var(--borderColor) solid;
	background: rgb(240,240,240);
	overflow: hidden;
	cursor: move;
	flex-shrink: 0;
	display: flex;
}

.dialogHeader .button {
	cursor: default;
}

.dialogHeader span {
	flex-grow: 1;
	flex-shrink: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dialogContent {
	flex-grow: 1;
	overflow-y: auto;
	overflow-x: hidden;
}

.dialogContentWrapper {
	overflow: hidden;
}

.dialogFooter {
	text-align: right;
	background: rgb(240,240,240);
	border-top: 1px var(--borderColor) solid;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	height: fit-content;
}

.dialogFooter button {
	margin-right: 1rem;
}

.fullscreen .dialogFooter button {
	margin-right: 0.2rem;
}

.dialogResize {
	position: absolute;
	right: 0px;
	bottom: 0px;
	cursor: se-resize;
}

.dialogResize .button {
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: var(--secondHeaderButtonSize);
	height: var(--secondHeaderButtonSize);
}

dialog.fullscreen {
	position: absolute;
	top: 0em !important;
	bottom: 0em;
	left: 0em !important;
	right: 0em;
	width: auto !important;
	height: auto !important;
	border: none;
	margin: 0em;
	max-width: unset;
	max-height: unset;
}

dialog.fullscreen .dialogHeader {
	cursor: unset;
}

dialog.fullscreen .dialogResize {
	display: none;
}

@media (max-width: 450px) {
	dialog.fullscreen .maximizeButton {
		display: none;
	}
}

#applicationVersion {
	display: none;
}

/* table */

table {
	table-layout: fixed;
	font-size: inherit;
	border-spacing: 0px;
}

td, th {
	text-align: left;
	color: black;
	white-space: nowrap;
	vertical-align: top;
	overflow: hidden;
}

table.selected {
	background: blue;
}

table tbody tr:nth-child(even) {
	background: #f8f8f8;
}

table tbody tr:nth-child(even).selected {
	background: #99f;
}

table tbody  tr:nth-child(odd).selected {
	background: #99f;
}

.form {
	border-spacing: 0px;
	width: 100%;
}

.form > div {
	display: flex;
	flex-wrap: nowrap;	
	overflow: hidden;

	background: var(--formGroupBackground);
	border-left: var(--formGroupBackground) var(--formGroupBorder) solid;
	border-right: var(--formGroupBackground) var(--formGroupBorder) solid;
	padding-left: var(--formGroupPadding);
	padding-right: var(--formGroupPadding);
}

.form>div.ignoreCaption {
	min-height: 1.7rem;
}

.form>div.groupStart, .form>div.groupSingleRow {
	border-top: var(--formGroupBackground) var(--formGroupBorder) solid;
	border-top-left-radius: var(--formGroupBorder);
	border-top-right-radius: var(--formGroupBorder);
	margin-top: var(--formGroupBorder);
}

.form>div.groupEnd, .form>div.groupSingleRow {
	border-bottom: var(--formGroupBackground) var(--formGroupBorder) solid;
	border-bottom-left-radius: var(--formGroupBorder);
	border-bottom-right-radius: var(--formGroupBorder);
	margin-bottom: var(--formGroupBorder);
}

.form .form>div {
	background: unset;
	border: 0px;
	padding: 0px;
	margin: 0px;
}

.dialogContent, .dialogHeader {
	padding: 0.4rem 1rem;
	box-sizing: border-box;
}

dialog table {
    /* for search dialogs */
	width: 100%;
}

.form > div > div, .dialogButtons {
	padding-right: 0.7rem;
}

.form > div > div:last-child {
	padding-right: 0em;
}

.form > div > div {
	position: relative;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
	flex-shrink: 0;
}

.fullscreen .form > div {
	flex-wrap: wrap;	
}

.fullscreen .form > div > div {
	flex-shrink: 1;
}

.form > div > div > *, .form input[type=text], .form select {
	width: 100%;
 	box-sizing: border-box;
}

.form .text {
	padding-top: 0.35em;
}

.form .noCaption {
	padding-top: 1.2rem;
}

/* radio buttons would be too low */
.form fieldset.noCaption {
	padding-top: 1.0rem;
}

.lookup .text, .lookup input {
	width: 100%;
	min-height: 1.8em;
	box-sizing: border-box;
}

.lookup input {
	width: 100%;
}

.lookup .text {
	padding: 3.5px;
	border: lightgray solid 1px;
	margin: 0em 2em 0em 0em;
	padding-right: 2em !important;
	text-overflow: ellipsis;
    overflow: hidden;
}

.textAlignRight {
	text-align: right;
}

.changed[title],
.form.showValidations *[title],
.form.showValidations div[title] *
{
	border-color: red;
}

.asterisk {
	position: relative;
	top: -1px;
	color: red;
	padding-left: 0.2ex;
}

th .form {
	font-weight: normal;
}

input[disabled]::placeholder, textarea[disabled]::placeholder {
	color: transparent;
}

.dropdownButton {
	position: absolute;
	right: 0px;
	bottom: 0px;
	top: 0px;
	width: 2em;
	height: 2em;
	background-size: 0.8em 0.5em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='stroke: black; stroke-width:20%25'%3E%3Cline x1='7%25' y1='7%25' x2='51%25' y2='93%25'/%3E%3Cline x1='93%25' y1='7%25' x2='49%25' y2='93%25'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* https://css-tricks.com/using-svg/
<svg style="stroke: black; stroke-width:20%">
<line x1="7%" y1="7%" x2="51%" y2="93%"/>
<line x1="93%" y1="7%" x2="49%" y2="93%"/>
</svg>
*/

.dropdown {
	position: fixed;
	width: -moz-fit-content;
	width: fit-content;
	border: black solid 1px;
	background: white;
	z-index: 4;
}

.dropdown * {
	margin: 6px;
}

.dropdown div {
	color: blue;
}

.dropdown div:hover {
	text-decoration: underline;
}

.form .groupItem:first-child .lookup .text {
	border-top: lightgray solid 1px;
}

dialog .form div.list {
	padding-top: 0.05rem;
}

/* group (of form elements) must not double the paddings and keep background pattern */

.groupHorizontal {
	display: table;
	table-layout: fixed;
	width: 100%;
	box-sizing: border-box;	
}

.groupHorizontal > * {
	display: table-cell;
}

.groupVertical {
	display: block;
}

/* various elements */

input, .checkBoxContainer, select {
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	font-size: inherit;
}

input[type="checkbox"] {
	height: inherit;
	width: 1.2em;
	margin: 0px 5px 0px 1px;
	vertical-align: baseline;
}

label.checkboxLabel {
	white-space: nowrap; /* important for long labels */
	padding-top: 0.35em;
	font-weight: normal;
	font-size: unset;
	color: unset;
}

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

textarea[disabled] {
	resize: none;
}

hr {
	margin: 0px;
	border: 0px;
	border-top: 1px var(--borderColor) solid;
}

fieldset {
	border: none;
	padding: 0px;
}

fieldset label {
	display: inline;
	font-size: unset;
	font-weight: normal;
	padding-right: 2em;
	vertical-align: bottom;
}

label {
	display: block;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	font-size: smaller;
	font-weight: bolder;
}

label.help {
	font-size: x-small;
	visibility: hidden;	
}

label.invisible {
	color: transparent;
}

.form .title {
	font-size: larger;
	font-weight: bolder;
}

.lookup {
	position: relative;
}

.lookup input {
	margin: 0px;
}

.lookup select option:first-child {
	display: none;
}

/* https://css-tricks.com/using-svg/
<svg style="stroke: black; stroke-width:20%">
<line x1="7%" y1="7%" x2="93%" y2="51%"/>
<line x1="7%" y1="93%" x2="93%" y2="49%"/>
</svg>
*/

.lookupButton {
	position: absolute;
	width: 2em;
	top: 0;
	right: 0;
	bottom: 0;
	background-size: 0.5em 0.8em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='stroke: black; stroke-width:20%25'%3E%3Cline x1='7%25' y1='7%25' x2='93%25' y2='51%25'/%3E%3Cline x1='7%25' y1='93%25' x2='93%25' y2='49%25'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.columnFilter .lookupButton {
	width: 1.5em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='stroke: black; stroke-width:15%25'%3E%3Cline x1='7%25' y1='40%25' x2='50%25' y2='80%25'/%3E%3Cline x1='93%25' y1='40%25' x2='50%25' y2='80%25'/%3E%3C/svg%3E");
}

.hide {
	display: none;
}

/* don't let form rows with only hidden elements collapse */
.formElement > :nth-child(2) {
  min-height: 1.3rem;
}

.hideFormElement {
	visibility: hidden;
	max-height: 0px;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}

.red { color: red; }
.green { color: green; }
.blue { color: blue; }
.yellow { color: #c1aa1e; }
.gray { color: gray; }

.bold { font-weight: bold; }
.italic { font-style: italic; }
.strike { text-decoration: line-through; }

@media screen and (min-width: 992px) {
	#search { display: inline !important; }
	#searchButton { display: none; }
	#sideBarActionButton, #tableFilterButton { display: none; }
}

@media screen and (max-width: 991px) {
	#search { display: none; }
	#navigationHeader { display: none; }
	#navigation { max-height: 100%}
	#pageContainer { height: 100%}
	/* not working with ie: #pageContainer .page:not(:last-child) { display: none; } */	.page { display: none; }
	.page:last-child { display: block; border-bottom: none; top: 0em; right: 0em; min-height: unset; height: 100%; }
	.page:last-child > .pageContentAndActions { top: 0em; height: 100%;}
	.pageHeader { display: none; }
	.contextMenu { min-width: 13em;}
	table.form > tbody > tr > td:first-child, table.form > tbody > tr > td:last-child, table.form th { padding: 1ex; }
	table.form, table.form input, table.form select { margin: 0px; }
}

@media print {
  .hidden-print, .customFilterActions {
    display: none !important;
  }
 
  html, body, #container, .pageContentAndActions {
	position: unset;
	height: unset;
	overflow-y: unset;
	max-height: unset;
	flex-shrink: 0;
  }
  
  body {
	grid-template-rows: minmax(200px, 1fr);
  }
  
  #pageContainer {
  	display: unset;
  }
  
  table.table thead tr:nth-last-child(3), .columnFilters, .customFilter {
  	display: none;
  }
}