html {
	width: 100%;
	height: 100%;
}

body {
	margin:	auto;
	padding: 0;
	background-color: #bbb;
	width: 100%;
	height: 100%;
}

form {
	width: 100%;
	height: 100%;
}

/**
 * Die Datei definiert den Aufbau der Kasse mit folgenden Elementen.
 *  
 *  - header:          Header der Kasse
 *  - workbenchlayer:  Rahmen der Tischübersicht
 *  - kassenskinlayer: Rahmen um einen Tisch zu bearbeiten
 
 */
 
#monitorContainer {
	position: relative;
	width: 100%; /* 1920px; */
	height: 100%; /* 1080px; */
	margin: auto;
	padding: 0;
	font-family: tahoma, arial,sans-serif;
	font-size: 16px;
	color: #333;
	overflow: hidden;
	background-color: #69c;
}

#monitorHeader {
	position: relative;
	float: left;
	width: calc(100%);
	height: 50px;
	border-bottom: 5px inset #69c;
	background: #fff url(../../img/monitor/monitorHeader.jpg) top left no-repeat;
}

#monitorMenu {
	position: absolute;
	right: 10px;
	top: 5px;
}

#monitorDesktop {
	position: relative;
	float: left;
	width: 100%;
	height: calc(100% - 80px);
}

.monitorArticleSummaryDiv {
	position: relative;
	float: left;
	width: 350px;
	height: 100%;
	background-color: inherit;
}
.monitorArticleCollapseDiv {
	position: relative;
	float: left;
	width: 36px;
	height: 100%;
	display: flex;
	justify-content: center;
	padding-top: 5px;
	background: lightgray;
	border-right: 2px solid darkgray;
}
.monitorArticleDataDiv {
	position: relative;
	float: left;
	width: calc(100% - 40px);
	height: 100%;
}
.monitorArticleListDiv {
	width: calc(100% - 3px);
	height: 33%;
	margin: 0 0 2px 2px;
	background-color: white;
}
.monitorArticleListHeader {
	height: 30px;
	display: flex;
	align-items: center;
	background-color: #f2f2f2;
	padding-left: 10px;
	font-weight: bold;
}
.monitorArticleListCollapseIcon {
	position: absolute;
	right: 0px;
	width: 35px;
}
#monitorArticleCollapseIcon {
	position: absolute;
	top: 5px;
	left: 3px;
}
#monitorActiveTableIcon {
	position: absolute;
	top: 45px;
	left: 3px;
}
.monitorArticleListContent {
	height: calc(100% - 30px);
	padding-left: 5px;
}
.monitorArticleListData {
	height: calc(100% - 36px);
	padding-left: 5px;
	overflow: auto;
	overflow-y: hidden;
}
.monitorArticleListScrollbar {
	width: 100%;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: end;
	border-top-style: dotted;
	border-top-width: 1px;
}
.monitorArticleListRowDiv {
	height: 25px;
}
.monitorArticleDescription {
	width: 80%;
	float: left;
	white-space: nowrap;
	overflow: hidden;
}
.monitorArticleAmount {
	width: 18%;
	float: left;
	text-align: right;
}
#monitorContentDiv {
	position: relative;
	float: left;
	width: calc(100% - 350px);
	height: 100%;
	background-color: white;
}
#monitorContent {
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
	
	/* display: flex;
	flex-wrap: wrap; */
	
	overflow: auto;
	overflow-x: hidden;
	overflow-y: hidden;
}
#monitorContentScrollbar {
	position: absolute;
	right: 0px;
	bottom: 0px;
}
#monitorStatus {
	display: table;
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 25px;
	font-size: 16px;
	background-color: inherit;
}
#monitorStatusRow {
	display: table-row;
	text-align: center;
	vertical-align: middle;
}
.monitorStatusField {
	display: table-cell;
	width: 180px;
	/* max-width: 180px; */
	vertical-align: middle;
	text-align: left;
	padding-left: 3px;
	border: 2px inset darkgray;
	white-space: nowrap;
	overflow: hidden;
}
#monitorStatusTimestamp {
	display: table-cell;
	vertical-align: middle;
	border: 2px inset darkgray;
}

/** Abweichung in der Auflösung 1366 * 768 */
@media only screen and (width : 1366px){
	
	.monitorContainer {
		width: 1366px;
	}
}

.hidden {
  display:none;
}

.nothidden {}

.bold {
  font-weight: bold;
}

.tableView {
	position: relative;
	float: left;
	width: 295px;
	height: max-content;
	margin: 5px;
	border: 2px inset darkgray;
	border-radius: 5px;
}
.tableViewHeader {
	position: relative;
	float: left;
	width: inherit;
	background-color: #69c;
}

.tableViewTableInfo {
	position: relative;
	float: left;
	width: 100%;
	height: inherit;
	padding-left: 3px;
}
.tableViewTableNumber {
	position: relative;
	float: left;
	width: 100%;
	text-align: left;
	font-size: 20px;
	font-weight: bold;
	overflow: hidden;
	white-space: nowrap;
}
.tableViewTableWaiter {
	position: relative;
	float: left;
	width: 100%;
	text-align: left;
	overflow: hidden;
	white-space: nowrap;
}
.tableViewTableTimer {
	position: relative;
	float: left;
	width: 100%;
	text-align: left;
	overflow: hidden;
	white-space: nowrap;
}
.tableViewTableActions {
	position: absolute;
	right: 0px;
	overflow: hidden;
}
.tableViewTableActionContent {
	width: max-content;
	margin-left: auto;
	margin-right: auto;
}

.tableViewCourseRow {
	float: left;
	width: inherit;
	height: 50px;
	font-weight: bold;
	white-space: nowrap;
	background-color: #F2F2F2;
	border-top: 1px dotted darkgray;
}
.tableViewCourseLabel {
	float: left;
	width: 130px;
	height: inherit;
	margin-left: 5px;
}
.tableViewCourseLabelContent {
	display: table-cell;
	height: inherit;
	vertical-align: middle;
}
.tableViewPositions {
	position: relative;
	float: left;
	width: inherit;
}
.tableViewPositionRow {
	position: relative;
	float: left;
	width: inherit;
	margin-bottom: 2px;
}
.tableViewPositionData {
	position: relative;
	float: left;
	width: inherit;
	display: flex;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}
.tableViewAddInfoData {
	position: relative;
	float: left;
	width: inherit;
	display: flex;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}
.tableViewPositionAmount {
	position: relative;
	float: left;
	width: 10%;
	padding-top: 3px;
	background-color: #F2F2F2;
	border-top: 1px dotted darkgray;
}
.tableViewAddInfoAmount {
	position: relative;
	float: left;
	width: 10%;
	background-color: #F2F2F2;
}
.tableViewPositionDetails {
	width: calc(100% - 10%);
}
.tableViewPositionDescription {
	position: relative;
	float: left;
	width: 100%;
	min-height: 25px;
	white-space: nowrap;
	overflow: hidden;
	border-top: 1px dotted darkgray;
}
.tableViewAddInfoDescription {
	border-top: 1px dotted darkgray;
}
.tableViewPositionArticle {
	position: relative;
	float: left;
	width: calc(100% - 75px);
	padding-top: 3px;
	white-space: nowrap;
	overflow: hidden;
}
.tableViewPositionRightColumn {
	position: absolute;
	right: 0px;
	float: left;
	width: 85px;
	height: inherit;
	padding-left: 10px;
	background: white;
}
.tableViewPositionActivity {
	position: relative;
	float: right;
	width: 27px;
	height: inherit;
}
.tableViewPositionProcessTime {
	position: relative;
	float: left;
	width: 55px;
	height: inherit;
	text-align: right;
	padding-top: 3px;
}
.tableViewPositionNotice {
	float: left;
	width: calc(100% - 20px);
	margin: 5px;
	padding: 3px;
	color: red;
	background-color: white;
	border-color: red;
	border-style: groove;
	border-width: 1px;
}
.tableViewPositionCancelled {
	color: red;
	font-style: italic;
	text-decoration: line-through;
}