/***************************************
*** Definiert den Aufbau der Kasse
***************************************/

/** Rahmen in der die Kasse und der Checkout angezeigt wird */
#kassenskinlayer {
	position: relative;
	width: 100%;
	height: calc(100% - 25px);
	background-color: inherit;
}


/******************************************
*** Aufteilung der linken Seite der Kasse
******************************************/
#kassenskin_left_box {
	position: relative;
	float: left;
	width: 704px;
	width: calc(100% - 320px);
	height: 100%;
	background-color: inherit;
}
/** Angaben zur Tischnummer, Kellner und Anlagedatum */
#kassenskin_infoleiste {
	position: relative;
	float: left;
	width: calc(100% - 10px);
	height: 25px;
	padding: 5px 0 0 10px;
	font-size: 14px;
	font-weight: bold;
	color: white;
	background-color: darkslategray;
}
/** Rahmen in dem die Quick-Functions, die Artikel, das Storno am Tisch und die Gangfolge angezeigt wird */
#kassenskin_cashpoint {
	position: relative;
	float: left;
	width: 100%;
	height: calc(100% - 30px);
	background-color: inherit;
}
/** Rahmen für die Quick-Functions */
.kassenskin_quickfunction {
	position: relative;
	float: left;
	height: 100%;
	background-color: inherit;
	z-index: 999;
}
.kassenskin_quickfunction_column {
	position: relative;
	float: left;
	width: 100px;
	height: 100%;
	border-right: 1px solid gray;
}
#kassenskin_quickfunction_right {
	width: 200px;
}
/** Rahmen in dem die die Artikel, das Storno am Tisch und die Gangfolge angezeigt wird */
.kassenskin_mittelspalte {
	position: absolute;
	left: 100px;
	width: calc(100% - 100px);
	height: 100%;
	background-color: inherit;
}
/** Definiert die Größe der Dialoge innerhalb der mittleren Spalte */
.kassenskin_mittelspalte_dialog {
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
	background-color: inherit;
}
.kassenskin_mittelspalte_content {
	position: relative;
	float: left;
	width: 100%;
	height: calc(100% - 5px);
	margin-top: 5px;
	background-color: white;
}
.kassenskin_mittelspalte_content_header {
	padding: 50px 0 20px 50px;
	font-size: 20px;
	font-weight: bold;
}
.kassenskin_hauptkategorien {
	overflow: hidden;
	width: inherit;
	background: #bbb;
}
.kassenskin_unterkategorien {
	overflow: hidden;
	width: inherit;
	background: #eee;
}
.categoryContent {
	float: left;
	width: calc(100% - 40px);
	height: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
}
.categoryScrollbar {
	position: relative;
	float: left;
	width: 40px;
	height: 70px;
	display: flex;
	justify-content: center;
}
.kassenskin_article {
	position: relative;
	width: inherit;
	height: calc(100% - 74px - 74px - 40px - 10px);
	padding: 0;
	margin: 5px;
	background: #fff;
	overflow: auto;
	overflow-y: auto;
	overflow-y: hidden;
}
/** DIV in dem die Icons zum Blättern und den Gangfolgen angezeigt werden */
.kassenskin_article_buttons {
	position: absolute;
	width: 100%;
	height: 40px; /* 61px; */
	bottom: 0px;
	background-color: inherit;
}
/** DIV in dem die Icons zum Blättern in den Artikeln angezeigt werden */
.kassenskin_article_scrollbar {
	position: relative;
	float: left;
	display: flex;
	height: inherit;
	width: 80px;
	align-items: center;
}
/** DIV in dem die Buttons der Gangfolgen angezeigt werden */
.kassenskin_article_gangfolge {
	position: absolute;
	right: 0px;
	bottom: 0px;
	height: 40px;
	max-width: 470px;
	background-color: inherit;
}
.kassenskin_big_gangfolge {
	height: 77px;
}
.kassenskin_gangfolge_print {
	position: relative;
	float: left;
	height: 100%;
	width: 54px;
}
.kassenskin_gangfolge_buttons {
	position: relative;
	float: left;
	height: 100%;
	width: calc(100% - 54px);
}
/** DIV in dem die Icons zum Blättern in den Kategorien angezeigt werden */
.kassenskin_kategorie_scrollbar {
	position: absolute;
	right: 0px;
	width: 35px;
}
/** DIV in dem die Buttons der Dialog ("Storno am Tisch", "Gangfolge" und System-Infos) angezeigt werden */
.kassenskin_dialog_buttons {
	position: absolute;
	width: 100%;
	height: 54px;
	bottom: 0px;
	background-color: inherit;
}

/*******************************************
*** Aufteilung der rechten Seite der Kasse
*******************************************/
.kassenskin_right_box {
	position: relative;
	float: left;
	width: 320px;
	height: 100%;
	background-color: inherit;
}
/** Rahmen in dem die Position angezeigt werden */
.position_table {
	position: relative;
	float: left;
	width: 320px;
	height: calc(100% - 340px);
	font-size: 14px;
	font-weight: normal;
	background-color: inherit;
	z-index: 999;
}

/** Großer Rahmen in dem die Position angezeigt werden */
.position_table_big {
	height: 100%;
}

/** Position des Numpads */
#kassenskin_numpad {
	position: absolute;
	bottom: 25px;
	right: 0px;
	width: 320px;
	height: 340px;
}