/*###########################################################################*/
/*---DMS App // Main styles---*/
/*---Release 0.8.4.4.8---*/
/*###########################################################################*/
/*---import color set---*/
@import url("color-set.css");
/*###########################################################################*/
/*---import temp staging styles---*/
@import url("pre-staging.css");
/*###########################################################################*/
/*---import theme---*/
@import url("theme.css");
/*###########################################################################*/
/*---pre staging // import---*/
.bold {
	font-weight: bold !important;
}
#selBlockingNotice.blockingValue {
	font-weight: bold;
}
.kontierungNetto,
.kontierungBrutto {
    text-align: right;
}
div .fieldDisabled h3 {
	font-weight: normal;
}
div .fieldDisabled h3:before,
section .fieldDisabled h2:before {
	content: "\01F512";
}
/*###########################################################################*/
/*---generic html settings---*/
html,
body {
	width: 100%;
	height: 100%;
}
body,
h1,
h2,
h3,
p,
nav ul,
.buttons,
.breadcrumb,
.ratingNew ul,
.tags ul,
.checkNotes .images ul,
.editControls ul,
.checkList dl,
.checkList dd,
.listDropdown ul {
	margin: 0;
	padding: 0;
}
nav ul,
.buttons,
.breadcrumb,
.ratingNew ul,
.checkNotes .images ul,
.editControls ul,
.listDropdown ul {
	list-style: none;
	width: 100%;
}
/*---patch mf start---*/
.tags ul {
	list-style: none;
	min-width: 200px;
	flex-grow: 1;
}
/*---patch mf end---*/
body,
button,
select {
	position: relative;
}
button {
	cursor: pointer;
}
a {
	text-decoration: none;
}
/*---pdf viewer // iframe---*/
.pdfViewer #pdfFrame {
	width: 100%;
	height: 100%;
	border: none;
}
/*---search field---*/
.searchFilter {
	width: calc(100% - 40px);
	border: none;
	margin-bottom: 0;
	padding-top: 8px;
	padding-right: 8px;
	padding-bottom: 8px;
	padding-left: 32px;
	background-image: url(../images/search.svg);
	background-repeat: no-repeat;
	background-size: 33px 33px;
	background-position: left;
}
/*---needs to be synced with header #styleSwitcher etc...*/ 
#selSwitchMode,
#tableFilter02,
.inboxQueryParameterBox input,
#Units_prt,
#Status_exa {
	flex: 1;
	box-sizing: border-box;
	margin-right: 8px;
	padding-top: 4px;
	padding-right: 4px;
	padding-bottom: 4px;
	padding-left: 4px;
}
/*###########################################################################*/
/*---query result // filter---*/
.inboxQueryParameters {
	width: auto;
	display: flex;
	flex-direction: row;
	justify-content:flex-start;
	flex-wrap:wrap;
	align-items:flex-start;
}
.inboxQueryParameterBox {
	margin-right: 10px;
	margin-bottom: 10px;
	width: 120px;
}
.inboxQueryParameterBox > .inboxQueryParameterHeader {
	display: flex;
	padding: 5px;
	margin-bottom: 5px;
	white-space: nowrap;
}
.inboxQueryParameterBox label,
.inboxQueryParameterBox input[type="text"],
.inboxQueryParameterBox select {
	display: block;
	width: 100%;
}
.inboxQueryParameterBox label {
	font-size:12px;
}
.inboxQueryParameterBox closeMark {
	font-weight: bold;
	margin-left: auto;
}
.inboxQueryParameterBox closeMark:hover {
	cursor: pointer;
}
/*###########################################################################*/
/*---query result // controls---*/
.inboxQueryControl {
	margin-bottom: 10px;
}
.inboxQueryActions {
	margin-top: 10px;
	display: flex;
}
.inboxQueryActions .inboxQueryRun {
}
.inboxQueryActions .inboxQueryClear {
}
.inboxQueryActions .inboxQueryPrevPage {
	margin-left: auto;
}
.inboxQueryActions .inboxQueryNextPage {
	margin-right: 0;
}
/*###########################################################################*/
/*---header---*/
header {
	position: relative;
}
header h1 {
	font-weight: 400;
	line-height: 64px;
	padding-right: 16px;
	padding-left: 164px;
	background-image: url(../images/logo.svg);
	background-repeat: no-repeat;
	background-size: auto 32px;
	background-position: 16px center;
}
header #styleSwitcher {
	position: absolute;
	top: 18px;
	right: 4px;
}
/*###########################################################################*/
/*---app version display---*/
.appVersion {
	font-size: 11px;
	padding-left: 16px;
	padding-bottom: 15px;
}
/*###########################################################################*/
/*---generic scroll behaviour---*/
.tableDisplay {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
/*###########################################################################*/
/*---row display // input / checkbox---*/
.rowDisplay input[type="checkbox"] {
	cursor: pointer;
	position: relative;
	-webkit-appearance: none;
	outline: none;
	transition: 0.25s;
}
.rowDisplay input[type="checkbox"]::after {
	content: "";
	position: absolute;
	transition: all 0.25s ease 0s;
}
.rowDisplay input[type="checkbox"]:checked:after {
	left: 20px;
}
/*---checkbox dimmed---*/
.rowDisplay input.dimmed[type="checkbox"],
.rowDisplay input.dimmed[type="checkbox"]::after {
	box-shadow: none;
}
/*---checkbox disabled---*/
.rowDisplay input[type="checkbox"][disabled] {
	cursor: default;
}
/*---generic checkbox---*/
.rowDisplay input.checkBox[type="checkbox"] {
}
.rowDisplay input.checkBox[type="checkbox"]::after {
	opacity: 0.35;
	background-image: url("../images/checkmark.svg");
	background-repeat: no-repeat;
	background-size: auto 24px;
	background-color: transparent;
	width: 24px;
	height: 24px;
}
.rowDisplay input.checkBox[type="checkbox"]:checked:after {
	opacity: 1;
	left: 3px;
}
/*###########################################################################*/
/*---button // date picker---*/
button.datePicker {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background-repeat: no-repeat;
}
/*###########################################################################*/
/*---button // with icon / generic---*/
/*---is this needed?---*/.mainControls .rowDisplay button.icon,
button.icon {
	position: relative;
}
button.icon::before,
button.icon::after {
	position: absolute;
	content: "";
	background-repeat: no-repeat;
	opacity: 1;
	transition: all 0.25s ease 0s;
}
button.icon::before {
	opacity: 1;
}
button.icon::after {
	opacity: 0;
}
button.icon:hover::before {
	opacity: 0;
}
button.icon:hover::after {
	opacity: 1;
}
/*###########################################################################*/
/*---button // link based---*/
a.button.link {
	background-size: 16px 14px;
	background-position-y: center;
	background-repeat: no-repeat;
	line-height: 18px;
	margin-left: 16px;
	margin-bottom: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 21px;
}
/*###########################################################################*/
/*---edit controls // button---*/
.editControls button {
	width: 100%;
	margin-top: 16px;
	margin-right: 0;
	margin-bottom: 0;
}
/*###########################################################################*/
/*---tag display---*/
.tagDisplayGeneric {
	display: flex;
	flex-flow: column;
}
/*###########################################################################*/
/*---tag // generic---*/
.tags a,
.tags span,
.tags button {
	display: block;
	width: auto;
	margin-right: 4px;
	margin-bottom: 4px;
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 8px;
	line-height: 14px;
}
.tags ul {
	width: auto;
	display: flex;
	flex-wrap: wrap;
}
/*###########################################################################*/
/*---section // row display---*/
section .rowDisplay h3 {
	margin-bottom: 0;
}
section .rowDisplay .hasDetailView {
	cursor: pointer;
}
/*###########################################################################*/
/*---navigation menus // function---*/
.editControls.generic nav .menu {
	display: none;
}
.editControls.generic nav .nav-trigger {
    position: absolute;
	top: 0;
	left: 0;
    clip: rect(0, 0, 0, 0);
}
.editControls.generic nav label {
    cursor: pointer;
}
.editControls.generic nav .nav-trigger:checked ~ .menu {
	display: flex;
}
/*###########################################################################*/
/*---navigation menus // edit controls / chrome---*/
.editControls.generic,
.editControls.tag {
	margin-top: auto;
}
.editControls.generic nav {
	display: flex;
	width: 100%;
	flex-direction: row-reverse;
}
.editControls.generic nav .menu li {
	width: auto;
	margin-right: 4px;
}
.editControls.generic nav button,
.editControls.generic nav label {
	border: none;
	width: auto;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
}
.editControls.generic nav button {
	padding-right: 8px;	
}
/*###
increase padding left for all
buttons that use icon addon
###*/
.editControls.generic nav button[class*="icon"] {
	padding-left: 32px;
}
.editControls.generic nav label::before {
	content: "Bearbeiten";
}
.editControls.generic nav .nav-trigger:checked ~ label::before {
	content: "Abbrechen";
}
.editControls.generic nav label {
	background-image: url(../images/buttons/edit.svg);
	background-size: 24px;
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 28px;
}
.editControls.generic nav .nav-trigger:checked ~ label {
	background-image: url(../images/buttons/cancel.svg);
}
/*###########################################################################*/
/*---context dialog // icon buttons---*/
.iconDelete {
	background-image: url(../images/buttons/delete.svg);
	background-repeat: no-repeat;
	background-size: 32px 24px;
	background-position: left center;
}
/*###########################################################################*/
/*---panel switcher---*/
.panelSwitcher ul {
	display: flex;
}
.panelSwitcher li,
.panelSwitcher button {
	width: 100%;
}
.panelSwitcher button {
	margin-bottom: 0;
	margin-right: 0;
	border: none;
}
.panelSwitcher li button {
	border-right: 1px solid #ffffff;
}
.panelSwitcher li:last-of-type button {
	border-right: none;
}
/*###########################################################################*/
/*---panel set // visibility control---*/
body.panelSetVisibilty01 .panelSet02,
body.panelSetVisibilty02 .panelSet01,
body.panelSetVisibilty03 .panelSet01,
body.panelSetVisibilty03 .panelSet02,
body.panelSetVisibilty03 main,
.gridLayout01.panelSetVisibilty02 > .layoutControl > aside {
	display: none !important;
}
.gridLayout01.panelSetVisibilty02 > .layoutControl > main,
.gridLayout01.panelSetVisibilty03 > .layoutControl > aside {
	width: 100%;
}
/*###########################################################################*/
/*---table display // description list / generic---*/
.tableDisplayGeneric {
	font-size: 12px;
	display: flex;
	flex-flow: column;
}
.tableDisplayGeneric dl {
	display: flex;
	flex-flow: wrap;
	position: relative;
	margin: 0;
}
.tableDisplayGeneric dt,
.tableDisplayGeneric dd {
	padding-top: 2px;
	padding-right: 8px;
	padding-bottom: 2px;
}
.tableDisplayGeneric dt:first-of-type {
	padding-left: 0;
	
}
.tableDisplayGeneric dd:last-of-type {
	padding-right: 0;
}
.tableDisplayGeneric dd:last-of-type {
	border-right:none;
}
.tableDisplayGeneric dt {
	font-weight: 600;
}
.tableDisplayGeneric dd {
	margin-left: 0;
}
.tableDisplayGeneric .columnDisplay {
	flex-direction: column;
}
.tableDisplayGeneric .columnDisplay > div {
	margin-bottom: 2px;
}
.tableDisplayGeneric .columnDisplay > div:last-of-type {
	margin-bottom: 0;
}
/*###########################################################################*/
/*---table display // description list---*/
.tableDisplay dl {
	position: relative;
	display: flex;
	margin: 0;
	transition: all 0.25s ease 0s;
}
.tableDisplay dt,
.tableDisplay dd {
	padding-top: 2px;
	padding-right: 4px;
	padding-bottom: 2px;
	padding-left: 4px;
}
.tableDisplay .caption dt:last-of-type,
.tableDisplay dd:last-of-type {
	border-right:none;
}
.tableDisplay dt {
	font-weight: 600;
}
.tableDisplay dd {
	margin-left: 0;
}
.tableDisplay .columnDisplay {
	flex-direction: column;
}
.tableDisplay .columnDisplay > div {
	margin-bottom: 2px;
}
.tableDisplay .columnDisplay > div:last-of-type {
	margin-bottom: 0;
}
.tableDisplay select {
	box-sizing: border-box;
	width: 100%;
	min-width: 40px;
	padding-top: 2px;
	padding-right: 4px;
	padding-bottom: 2px;
	padding-left: 4px;
}
/*###########################################################################*/
/*---table display // description list / cell control---*/
/*---cell width---*/
.tableDisplay .doubleWidth {
	flex: 2 !important;
}
.tableDisplay .trippleWidth {
	flex: 3 !important;
}
/*---cell white space---*/
.tableDisplay .noWrap {
	white-space: nowrap;
}
/*###########################################################################*/
/*---table display // description list / equal column width---*/
.tableDisplay.equalColumnWidth dl {
	flex-flow: wrap;
}
/*###########################################################################*/
/*---table display // description list / fixed width column 01---*/
.tableDisplay.fixedColumnWidth01 .caption dt:nth-of-type(1),
.tableDisplay.fixedColumnWidth01 dd:nth-of-type(1) {
	width: 100px;
}
.tableDisplay.fixedColumnWidth01 .caption dt:nth-of-type(2),
.tableDisplay.fixedColumnWidth01 dd:nth-of-type(2) {
	width: 64px;
}
.tableDisplay.fixedColumnWidth01 .caption dt:nth-of-type(3),
.tableDisplay.fixedColumnWidth01 dd:nth-of-type(3) {
	width: 108px;
}
.tableDisplay.fixedColumnWidth01 .caption dt:nth-of-type(4),
.tableDisplay.fixedColumnWidth01 dd:nth-of-type(4) {
	width: 108px;
}
.tableDisplay.fixedColumnWidth01 .caption dt:nth-of-type(5),
.tableDisplay.fixedColumnWidth01 dd:nth-of-type(5) {
	width: 108px;
}
.tableDisplay.fixedColumnWidth01 .caption dt:nth-of-type(6),
.tableDisplay.fixedColumnWidth01 dd:nth-of-type(6) {
	width: 95px;
}
.tableDisplay.fixedColumnWidth01 .caption dt:nth-of-type(7),
.tableDisplay.fixedColumnWidth01 dd:nth-of-type(7) {
	width: 145px;
}
.tableDisplay.fixedColumnWidth01 .caption dt:nth-of-type(8),
.tableDisplay.fixedColumnWidth01 dd:nth-of-type(8) {
	width: 106px;
}
/*###########################################################################*/
/*---content segment width options---*/
.width25 {
	width: 25%;
}
.width50 {
	min-width: 736px;
	width: calc(50% - 4px);
}
.width75 {
	width: 75%;
}
/*###########################################################################*/
/*---content segment split options---*/
.split50 {
	display: flex;
}
.split50 .rowDisplay:nth-of-type(2) {
	margin-bottom: 8px;
	margin-left: 8px;
}
.split50 .rowDisplay {
	flex-basis: 50%;
}
/*
.split50:last-of-type .rowDisplay {
	margin-bottom: 0;
}
*/
/*###########################################################################*/
/*---search filter---*/
.searchControls {
	margin-bottom: 16px;
}
.searchControls .rowDisplay {
}
.searchControls .rowDisplay h3 {
}
/*###########################################################################*/
/*---grid layout 01 // main viewport structure / layout segmentation---*/
.gridLayout01 > .layoutControl,
.gridLayout01 > .layoutControl > main,
.gridLayout01 > .layoutControl > aside,
.gridLayout01 > .layoutControl > main > .layoutControl {
	display: flex;
}
.gridLayout01 > .layoutControl,
.gridLayout01 > .layoutControl > main,
.gridLayout01 > .layoutControl > aside,
.gridLayout01 > .layoutControl > main > .layoutControl {
	flex-direction: column;
}
/*###########################################################################*/
/*---grid layout 01 // flex items sort order---*/
.gridLayout01 > .layoutControl main > section {
	order: 1;
}
.gridLayout01 > .layoutControl main > .layoutControl {
	order: 2;
}
/*###########################################################################*/
/*---grid layout 01 // chrome---*/
.gridLayout01 section h2 {
	font-size: 18px;
	margin-bottom: 8px;
}
/*###########################################################################*/
/*---grid layout 01 // main section / chrome---*/
.gridLayout01 main > .layoutControl > section {
	margin-bottom: 1px;
}
/*---search field---*/
.gridLayout01 .searchFilter {
	font-size: 12px;
	box-sizing: border-box;
	border-width: 1px 1px 0 1px;
	border-style: solid;
	width: 100%;
	border-radius: 0;
	padding-top: 4px;
	padding-bottom: 4px;
	background-size: 30px 30px;
}
/*###########################################################################*/
/*---grid layout 01 // section padding---*/
main > section,
aside > section,
.gridLayout01 main > .layoutControl > section,
.gridLayout01 > .layoutControl > aside .pdfViewer {
	padding: 16px;
}
/*###########################################################################*/
/*---grid layout 01 // sidebar pdf viewer tab---*/
.gridLayout01.panelSetVisibilty01 > .layoutControl > aside .pdfViewer {
	height: 580px;
}
/*###########################################################################*/
/*---grid layout 01 // fullscreen pdf viewer tab---*/
.gridLayout01.panelSetVisibilty03 > .layoutControl {
	height: calc(100% - 98px);
}
.gridLayout01.panelSetVisibilty03 > .layoutControl > aside,
.gridLayout01.panelSetVisibilty03 > .layoutControl > aside .pdfViewer {
	height: 100%;
}
/*###########################################################################*/
/*---checklist view---*/
.checkListView .checkListTitle,
.checkListView .checkListSelection {
	padding-bottom: 0;
}
.checkListView .checkListTitle h2 {
	font-size: 24px;
	font-weight: 400;
	text-transform: none;
	margin-bottom: 0;
}
.checkListView .checkListSelection label {
	font-size: 16px;
	font-weight: 600;
}
.checkListView .checklistShift {
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 8px;
	font-weight: 600;
	text-transform: uppercase;
}
.checkListView .checklistEntry {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 2px;
	padding-top: 8px;
	padding-bottom: 8px;
}
.checkListView .checkListDataSet .checklistEntry:last-of-type {
	margin-bottom: 0;
}
.checkListView .divCheckMark {
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background-image: url(../images/checkmark.svg);
	background-size: 16px;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	width: 30px;
	height: 28px;
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
}
.checkListView .divChecklistText {
	font-weight: 400;
	width: calc(100% - 84px);
	padding-right: 8px;
	padding-left: 8px;
}
.checkListView .checklistEditButton {
	margin: 0;
	padding: 0;
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background-image: url(../images/editWhite.svg);
	background-size: 24px;
	background-repeat: no-repeat;
	background-position: 8px 5px;
	cursor: pointer;
	width: 36px;
	height: 32px;
	border-top: none;
	border-left: none;
	border-bottom: none;
	border-right: none;
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
}
.checkListView .divEditButton.hasContent .checklistEditButton {
	background-image: url(../images/editDark.svg);
}
/*###########################################################################*/
/*---to sort---*/
#txtDokNr {
	font-weight: bold;
}
.historyLookup:hover {
    text-decoration:underline;
}
.historyLookup {
    cursor:pointer;
}
.divAlertMessage{
    text-align: left;
    max-width:800px;
    max-height:600px;
    text-wrap:none;
    overflow-x:auto;
    overflow-y:auto;
}
.btConcludeStep {
    margin-left: 20px;
}
section.tags {
    margin-bottom: 10px;
}
#documentList {
    list-style: none;
}
#documentList li a {
    font-size: 12px;
    font-weight: normal;
}
.textAreaUserMessage {
    resize: none;
}
[data-package]:hover {
    cursor: pointer;
}
#skonto3,
#txtBruttoSkonto3 {
	text-align: center;
}
.discountExpired {
	color: #ff6a00 !important;
}
#btOpenDocReference{
	margin-left: 20px;
}
.formStaticStyle {
	font-size: 14px;
	padding-left: 8px;
	color: rgb(76, 76, 75);
}
/*###########################################################################*/
/*---experimental---*/
.inputPanel {
	position: absolute;
	z-index: 9999;
	top: 50%;
	transform: translateY(-50%);
	right: 20%;
	left: 20%;
	min-width: 768px;
}
#mfsdOverlay {
	z-index: 9998;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
}
main > section {
	position: relative;
}
main > section:hover {
}
.center60 main > section {
	margin-right: 20%;
	margin-left: 20%;
}
.center60 main > section.mainControls {
	margin-right: 0;
	margin-left: 0;
	padding-right: calc(20% + 16px);
	padding-left: calc(20% + 16px);
}
/*###########################################################################*/
/*---patch for DMS InVal SHGR / overlapping buttons / 2019 09 16---*/
main > section:nth-of-type(3) > .rowDisplay:nth-of-type(12) input[type="text"],
main > section:nth-of-type(5) > .rowDisplay:nth-of-type(6) input[type="text"] {
	min-width: 100px;
}
main > section:nth-of-type(5) > .rowDisplay:nth-of-type(7) button {
	white-space: normal;
	height: 50px;
}
/*###########################################################################*/
/*---open close menu for DMS InVal SHGR / 2019 09 16---*/
.collapsibleContentHeader input {
	margin-right: 47px !important;
}
.collapsibleContent {
	display: none;
}
/*---hide trigger element---*/
input.openCloseTrigger {
	position: absolute;
	top: 0;
	left: 0;
	clip: rect(0, 0, 0, 0);
}
/*---when trigger is checked, display menu---*/
input.openCloseTrigger:checked ~ .collapsibleContent {
	display: block;
}
/*---when trigger is checked, switch bg image---*/
input.openCloseTrigger:checked ~ label.openCloseTrigger {
	background-image: url(../images/close.svg);
}
label.openCloseTrigger {
	float: right;
	width: 36px;
	height: 26px;
	margin-top: -40px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background-image: url(../images/open.svg);
	background-size: 36px;
	background-repeat: no-repeat;
	cursor: pointer;
}
/*###########################################################################*/
/*---print output---*/
@media print {
	/*#######################################################################*/
	/*---hide elements from print output---*/
	button,
	.mainControls,
	.empty {
		display: none;
	}
	/*#######################################################################*/
	/*---header---*/
	header h1 {
		background-image: none;
		padding-left: 16px;
	}
	/*#######################################################################*/
	/*---row display---*/
	.rowDisplay {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}
	.rowDisplay h3 {
		width: 160px;
		padding-right: 4px;
	}
	.rowDisplay input {
		flex: 1;
	}
	.rowDisplay input,
	.rowDisplay select {
		box-sizing: border-box;
		margin-right: 8px;
		padding: 4px;
	}
	.rowDisplay *:last-child {
		margin-right: 0;
	}
	/*#######################################################################*/
	/*---content segment width options---*/
	.width25,
	.width50,
	.width75	{
		min-width: auto;
		width: auto;
	}
	/*#######################################################################*/
	/*---table display // table---*/
	.tableDisplay table {
		width: 100%;
		border-collapse: collapse;
	}
	.tableDisplay th,
	.tableDisplay td {
		padding-right: 8px;
		padding-left: 8px;
		border-right: none;
	}	
	.tableDisplay th {
		padding-top: 8px;
		padding-bottom: 8px;
		text-align: left;
		font-weight: 600;
	}
}
/*###########################################################################*/
/*---responsive design // 440px---*/
@media screen and (min-width: 440px) {
	/*#######################################################################*/
	/*---button styling // specific---*/
	.editControls button {
		width: auto;
	}
	/*#######################################################################*/
	/*---table display // description list / equal column width---*/
	.tableDisplay.equalColumnWidth dt,
	.tableDisplay.equalColumnWidth dd {
		flex: 1;
	}
	/*#######################################################################*/
	/*---table display // description list / equal column width / caption---*/
	.tableDisplay.equalColumnWidth.caption dt:first-of-type {
		flex: 2;
	}
}
/*###########################################################################*/
/*---responsive design // 1024px---*/
@media screen and (min-width: 1024px) {
	/*#######################################################################*/
	/*---edit controls // alignment---*/
	.editControls.horizontal {
		margin-top: auto;
	}
	/*#######################################################################*/
	/*---edit controls // horizontal flex item alignment---*/
	.editControls.horizontal ul {
		display: flex;
	}
	.editControls.horizontal li {
		flex: 1;
		margin-right: 16px;
	}
	.editControls.horizontal li:last-of-type {
		margin-right: 0;
	}
	/*#######################################################################*/
	/*---button styling // specific---*/
	.editControls button {
		width: 100%;
	}
	/*#######################################################################*/
	/*---one & two column layout---*/
	.oneColumnLayout section textarea {
		width: 555px;
		height: 96px;
	}
	/*#######################################################################*/
	/*---grid layout 01 // flex items sort order---*/
	.gridLayout01 > .layoutControl main > section {
		order: 2;
	}
	.gridLayout01 > .layoutControl main > .layoutControl {
		order: 1;
	}
	/*#######################################################################*/
	/*---grid layout 01 // main viewport structure / segmentation---*/
	.gridLayout01 > .layoutControl {
		flex-direction: row;
	}
	.gridLayout01 > .layoutControl > main {
		width: 67%;
	}
	.gridLayout01 > .layoutControl > aside {
		width: 33%;
	}
	/*#######################################################################*/
	/*---grid layout 01 // main viewport structure / height---*/
	.gridLayout01 > .layoutControl {
		height: calc(100% - 98px);
	}
	/*#######################################################################*/
	/*---grid layout 01 // main viewport structure / exeptions---*/
	.gridLayout01 .flexDisabled {
		flex: none !important;
	}
	/*#######################################################################*/
	/*---grid layout 01 // main viewport structure / scrolling---*/
	/*###
	this needs to be set to make
	flex items inside flex container
	scollable (.tableDisplay)
	###*/
	.gridLayout01 > .layoutControl main > section {
		display: flex;
		flex-flow: column;
		flex: 1;
		overflow: auto;
	}
	/*#######################################################################*/
	/*---grid layout 01 // main section---*/
	.gridLayout01 > .layoutControl > main > .layoutControl {
		flex-direction: row;
	}
	/*---equal section width---*/
	.gridLayout01 > .layoutControl > main > .layoutControl > section {
		flex: 1;
	}
	/*#######################################################################*/
	/*---grid layout 01 // main section / chrome---*/
	.gridLayout01 main > .layoutControl > section {
		margin-right: 1px;
		margin-bottom: 0;
	}
	/*#######################################################################*/
	/*---grid layout 01 // section padding---*/
	main > section,
	aside > section,
	.gridLayout01 main > .layoutControl > section,
	.gridLayout01 > .layoutControl > aside .pdfViewer {
		padding: 8px;
	}
	/*#######################################################################*/
	/*---grid layout 01 // table display / description list---*/
	.gridLayout01 .tableDisplay {
		font-size: 11px;
	}
	.gridLayout01 .tableDisplay dt,
	.gridLayout01 .tableDisplay dd {
		padding: 4px;
	}
	/*#######################################################################*/
	/*---grid layout 01 // sidebar pdf viewer tab---*/
	.gridLayout01.panelSetVisibilty01 > .layoutControl > aside .pdfViewer {
		height: 100%;
	}
	/*#######################################################################*/
	/*---row display---*/
	.rowDisplay {
		display: flex;
		align-items: center;
	}
	header #styleSwitcher,
	.rowDisplay input,
	.rowDisplay select {
		flex: 1;
		box-sizing: border-box;
	}
	.rowDisplay input[type="checkbox"] {
		flex: none;
	}
	.rowDisplay button {
		white-space: nowrap;
	}
	/*#######################################################################*/
	/*---row display // options---*/
	/*---remove flex attribute---*/
	.rowDisplay.removeFlex input,
	.rowDisplay.removeFlex select {
		flex: none;
	}
	/*---remove width attribute---*/
	.rowDisplay input.removeWidth[type="text"] {
		min-width: inherit;
	}
	.rowDisplay h3.removeWidth {
		width: auto;
		padding-right: 8px;
	}
	/*---align element to right of parent flex container---*/
	.rowDisplay .alignRight {
		margin-left: auto;
	}
	/*#######################################################################*/
	/*---!!!deprecated!!! // row display // fluidWidth---*/
	.rowDisplay.fluidWidth h3,
	.rowDisplay.fluidWidth p {
		width: auto;
		margin-right: 8px;
	}
	/*#######################################################################*/
	/*---row display // variations---*/
	.rowDisplay.spacingBefore {
		padding-top: 24px;
	}
	.rowDisplay.spacingAfter {
		padding-bottom: 24px;
	}
	/*#######################################################################*/
	/*---column grid---*/
	.columnGrid {
		display: flex;
	}
	.columnGrid .column {
		flex: 1;
	}
	.columnGrid .column:first-of-type {
		margin-right: 32px;
	}
	.columnGrid .rowDisplay button {
		min-width: 42px;
	}	
	/*#######################################################################*/
	/*---column grid // exeptions---*/
	.columnGrid .rowDisplay {
		margin-bottom: 4px;
	}
	.columnGrid input,
	.columnGrid textarea {
		width: calc(100% - 208px);
	}
	.columnGrid input[type="text"] {
		padding-top: 2px;
		padding-bottom: 2px;
	}
	.columnGrid textarea {
		height: 64px;
	}
	/*#######################################################################*/
	/*---table display // description list / generic---*/
	.tableDisplayGeneric .descriptionShort,
	.tableDisplayGeneric .descriptionLong {
		flex-flow: nowrap;
	}
	.tableDisplayGeneric .descriptionShort dt {
		width: 64px;
	}
	.tableDisplayGeneric .descriptionShort dd {
		width: calc(100% - 64px);
	}
	.tableDisplayGeneric .descriptionLong dt {
		width: 104px;
	}
	.tableDisplayGeneric .descriptionLong dd {
		width: calc(100% - 104px);
	}
	/*#######################################################################*/
	/*---table display // description list / sortable---*/
	.tableDisplay.header {
		overflow: visible;
		border-bottom: none;
	}
	.tableDisplay.header dt,
	.tableDisplay.header dd {
		font-weight: 600;
	}
	.tableDisplay.header.sortable dt,
	.tableDisplay.header.sortable dd {
		cursor: pointer;
		transition: opacity 0.25s ease 0s;
		background-image: url(../images/tableSortSmall.svg);
		background-repeat: no-repeat;
		background-position: right -12px;
		background-size: 24px 48px;
	}
	.tableDisplay.header.sortable dt:hover,
	.tableDisplay.header.sortable dd:hover {
		opacity: 0.75;
	}
	.tableDisplay.header.sortable .headerSortDown {
		background-image: url(../images/tableSort.svg);
		background-position: right -24px;
	}
	.tableDisplay.header.sortable .headerSortUp {
		background-image: url(../images/tableSort.svg);
		background-position: right 0;
	}	
	/*#######################################################################*/
	/*---table display // table---*/
	.tableDisplay table {
		border-collapse: collapse;
	}
	.tableDisplay th:last-of-type,
	.tableDisplay td:last-of-type {
		border-right: none;
	}
	.tableDisplay tr {
		cursor: pointer;
		transition: all 0.25s ease 0s;
	}
	/*#######################################################################*/
	/*---table display // table / kontierung---*/
	#divKontierung.tableDisplay th,
	#divKontierung.tableDisplay td {
		padding-right: 4px;
		padding-left: 4px;
	}
	/*#######################################################################*/
	/*---table display // table / specific cells---*/
	.tableDisplay td .kontierungNetto,
	.tableDisplay td .kontierungBrutto {
		width: 80px;
	}
	.tableDisplay td .kontierungSachkonto {
		width: 160px;
	}
	.tableDisplay td .kontierungSachlicherPruefer {
		width: 104px;
	}
	.tableDisplay td .kontierungVermerk {
		width: 48px;
	}
	/*#######################################################################*/
	/*---table display // table / alignemnt options---*/
	.tableDisplay .alignRight {
		text-align: right;
	}
	/*#######################################################################*/
	/*---table display // table / sortable---*/
	.tableDisplay.sortable th {
		white-space: nowrap;
		padding-right: 28px;
		cursor: pointer;
		transition: opacity 0.25s ease 0s;
		background-image: url(../images/tableSortSmall.svg);
		background-repeat: no-repeat;
		background-position: right -9px;
		background-size: 26px 52px;
	}
	.tableDisplay.sortable th.headerSortUp {
		background-image: url(../images/tableSort.svg);
		background-repeat: no-repeat;
		background-position: right 4px;
		background-size: 26px 52px;
	}
	.tableDisplay.sortable th.headerSortDown {
		background-image: url(../images/tableSort.svg);
		background-repeat: no-repeat;
		background-position: right -22px;
		background-size: 26px 52px;
	}
	/*#######################################################################*/
	/*---table display // table / sortable / variant 01---*/
	#sortableTable01 tbody tr td:nth-child(7) {
		 text-align: right;
	}	
	/*#######################################################################*/
	/*---table display // description list / equal column width---*/
	.tableDisplay.equalColumnWidth dt,
	.tableDisplay.equalColumnWidth dd {
		flex: 1;
	}
	/*#######################################################################*/
	/*---table display // description list / equal column width / caption---*/
	.tableDisplay.equalColumnWidth.caption dt:first-of-type {
		flex: 2;
	}
	/*#######################################################################*/
	/*---table display // height setting---*/
	.tableDisplay.fixedHeight144 {
		height: 144px;
	}
	/*#######################################################################*/
	/*---input display---*/
	.dimmed {
		opacity: 0.5;
	}
	.rowDisplay input.short {
		width: 48px;
	}
	.rowDisplay input.long {
		width: 409px;
	}
	/*#######################################################################*/
	/*---main controls---*/
	section.mainControls .metaData {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	/*#######################################################################*/
	/*---two column layout---*/
	.twoColumnLayout .layoutControl {
		display: flex;
	}
	.twoColumnLayout main {
		margin: 0;
		box-shadow: none;
		width: 55%;
	}
	.twoColumnLayout main section.mainControls {
		padding-right: 0;
	}
	.twoColumnLayout aside {
		width: 45%;
	}
	.twoColumnLayout section textarea {
		width: calc(100% - 18px);
		height: 128px;
	}
	.twoColumnLayout section.pdfViewer {
		height:calc(100% - 32px);
	}
	.twoColumnLayout section.pdfViewer #pdfFrame {
		width: 100%;
		height: 100%;
		border: none;
	}
}
/*###########################################################################*/
/*---responsive design // 1336px---*/
@media screen and (min-width: 1336px) {
	/*#######################################################################*/
	/*---grid layout 01 // main viewport structure / segmentation---*/
	.gridLayout01 > .layoutControl > main {
		width: 70%;
	}
	.gridLayout01 > .layoutControl > aside {
		width: 30%;
	}
	/*#######################################################################*/
	/*---grid layout 01 // section padding---*/
	main > section,
	aside > section,
	.gridLayout01 main > .layoutControl > section,
	.gridLayout01 > .layoutControl > aside .pdfViewer {
		padding: 16px;
	}
	/*#######################################################################*/
	/*---grid layout 01 // table display / description list---*/
	.gridLayout01 .tableDisplay {
		font-size: 12px;
	}
	.gridLayout01 .tableDisplay dt,
	.gridLayout01 .tableDisplay dd {
		padding-right: 8px;
		padding-left: 8px;
	}
	/*#######################################################################*/
	/*---table display // description list / sortable---*/
	.tableDisplay.header.sortable dt,
	.tableDisplay.header.sortable dd {
		background-position: right -13px;
		background-size: 26px 52px;
	}
	.tableDisplay.header.sortable .headerSortDown {
		background-position: right -25px;
	}
	.tableDisplay.header.sortable .headerSortUp {
		background-position: right 0;
	}	
}
/*###########################################################################*/
/*---responsive design // 1920px---*/
@media screen and (min-width: 1920px) {
	/*#######################################################################*/
	/*---header---*/
	header {
		margin-top: 32px;
		margin-right: 32px;
		margin-left: 32px;
	}
	/*#######################################################################*/
	/*---generic main content styling---*/
	main {
		margin-right: 32px;
		margin-left: 32px;
		margin-bottom: 32px;
		box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
	}
	/*#######################################################################*/
	/*---two column layout---*/
	.twoColumnLayout .layoutControl {
		margin-right: 32px;
		margin-left: 32px;
		margin-bottom: 32px;
		box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
	}
}