/**
Verschiedene Zoomstufen für Monitore mit geringerer Höhe als 765px

führt leider zu Problemen mit der Kiosk APP

@media only screen and (max-height : 765px){
		body {  
	    zoom: 0.9;
	    -moz-transform: scale(0.9);
	    -moz-transform-origin: 0 0;
	    -o-transform: scale(0.9);
	    -o-transform-origin: 0 0;
	    -webkit-transform: scale(0.9);
	    -webkit-transform-origin: 0 0;
	    transform: scale(0.9); 
	    transform-origin: 0 0;  
	}
}
@media only screen and (max-height : 700px){
		body {  
	    zoom: 0.8;
	    -moz-transform: scale(0.8);
	    -moz-transform-origin: 0 0;
	    -o-transform: scale(0.8);
	    -o-transform-origin: 0 0;
	    -webkit-transform: scale(0.8);
	    -webkit-transform-origin: 0 0;
	    transform: scale(0.8); 
	    transform-origin: 0 0;  
	}
}
@media only screen and (max-height : 620px){
		body {  
	    zoom: 0.7;
	    -moz-transform: scale(0.7);
	    -moz-transform-origin: 0 0;
	    -o-transform: scale(0.7);
	    -o-transform-origin: 0 0;
	    -webkit-transform: scale(0.7);
	    -webkit-transform-origin: 0 0;
	    transform: scale(0.7); 
	    transform-origin: 0 0;  
	}
}
@media only screen and (max-height : 560px){
		body {  
	    zoom: 0.6;
	    -moz-transform: scale(0.6);
	    -moz-transform-origin: 0 0;
	    -o-transform: scale(0.6);
	    -o-transform-origin: 0 0;
	    -webkit-transform: scale(0.6);
	    -webkit-transform-origin: 0 0;
	    transform: scale(0.6);
	    transform-origin: 0 0; 
	}
}
@media only screen and (max-height : 490px){
		body {  
	    zoom: 0.5;
	    -moz-transform: scale(0.5);
	    -moz-transform-origin: 0 0;
	    -o-transform: scale(0.5);
	    -o-transform-origin: 0 0;
	    -webkit-transform: scale(0.5);
	    -webkit-transform-origin: 0 0;
	    transform: scale(0.5); 
	    transform-origin: 0 0; 
	}
}

*/

/********************************************
 *** Darstellung der Positionen in der Kasse
 ********************************************/
body {
  margin:			auto;
  padding:			0;
  background-color:	#bbb;
}

/********************************************
 *** Spezielle Fonts laden
 ********************************************/
@font-face {
	font-family: 'sosa-icon-font';
	src: url('../../fonts/sosa-regular-webfont.woff');
	src: url('../../fonts/sosa-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/sosa-regular-webfont.woff') format('woff'),
         url('../../fonts/sosa-regular-webfont.ttf') format('truetype'),
         url('../../fonts/sosa-regular-webfont.svg#LigatureSymbols') format('svg');
	font-weight: normal;
	font-style: normal;
}
.sosa-icon-font {
	font-family: sosa-icon-font;
}

@font-face {
	font-family: 'open-sans-reg';
	src: url('../../fonts/OpenSans-Regular-webfont.woff');
	src: url('../../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../../fonts/OpenSans-Regular-webfont.woff') format('woff'),
	     url('../../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
	     url('../../fonts/OpenSans-Regular-webfont.svg#LigatureSymbols') format('svg');
	font-weight: normal;
	font-style: normal;
}
.open-sans-reg {
	font-family: open-sans-reg;
}

/********************************************
 *** Tastatur definieren
 ********************************************/
 
/** Defniert die Standard-Auflösung (z.B. Kassen-Terminal 1024 * 768) */
@media only screen {

	/* Keyboard Start */
	.ui-keyboard-preview-wrapper {
		overflow: hidden;
		position: absolute;
		text-align: left;
		top: 348px;
		left: 0px;
		width: 100%;
		background: white;
		height: 80px;
	}
	.ui-keyboard {
		border-radius: 3;
		left: 0;
		top: 0px;
		bottom: 0;
		right:auto;
		position: absolute;
		width: 100%; 
	}
	.ui-keyboard-keyset {
		background: white;
		position: absolute;
		top: 428px;
		left:0px;
		width: 100%;
		height: 340px;
	}
	#tastatur_keyboard {
		background: rgba(204, 204, 204, 0.7);
	}
	.ui-keyboard-preview {
		width: 900px;
		line-height: 30px;
		font-size: 24px;
		position: relative;
		margin-left: 50%;
		margin-top:23px;
		left: -450px;
		background: white;
	}
	#tastatur {
		top:0px;
		left:0;
		position: absolute;	
		width: 0px;
		height: 0px;
	}
	.ui-keyboard-button {
		height: 58px;
		border-radius: 0;
		min-width: 62px;
		margin: .1em;
		cursor: pointer;
		overflow: hidden;
		line-height: 25px;
		-moz-user-focus: ignore;
		font-size: 23px;	
		font-family: Arial, sans-serif;
		color: #002471; 
		
		border-top: 2px solid lightgrey;
		border-left: 2px solid lightgrey;
		border-right: 2px solid #444;
		border-bottom: 2px solid #444;
		/*background:#ddd;*/
		color: #333;
		
		-moz-border-radius: 8px; 
		-webkit-border-radius: 8px; 
		border-radius: 8px;
		background-image:-moz-linear-gradient(270deg, #fff ,#999);  
		background-image:-webkit-linear-gradient(270deg, #fff ,#999);
		background: -o-linear-gradient(top, #fff, #999);  
		background: -ms-linear-gradient(top, #fff 30%, #999 100%);    
	}

 	#wrap {
	  display: block;
	  margin: 0;
	  width: 200px;
	} 
}

/** Definiert die Auflösung in 1366 * 768 */
@media only screen and (width : 1366px){
	
	/* Keyboard */
	.ui-keyboard-preview-wrapper {

    	width: 100%;
	}
	.ui-keyboard {
		width: 100%; 
	}

	.ui-keyboard-keyset {
		width: 100%;
	}
	.ui-keyboard-preview {
		width: 1100px;
	}
}

/*******************************************
 ***  Der grundsätzlichen Aufbau der Kasse 
 *******************************************/
#touchscreenContainer {
	position: relative;
	width: 1024px;
	height: 768px;
	margin: auto;
	padding: 0;
	font-family: tahoma, arial,sans-serif;
	font-size: 16px;
	color: #333;
	overflow: hidden;
	background-color: #69c;
}

/** Header der Kasse */
#touchscreenHeader {
	position: relative;
	float: left;
	width: 100%;
	height: 50px;
	background: #fff url(../../img/outletHeader.jpg) top left no-repeat;
}

/** Worbench in der die Daten angezeigt werden*/
#workbenchlayer {
	position: relative;
	float: left;
	width: 100%;
	height: calc(100% - 50px - 25px);
	background-color: inherit;
}

/** Statuszeile der Kasse */
#touchscreenStatus {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 25px;
	font-size: 12px;
	background-color: #ccc;
}

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

/**************************************
 *** Elemente des Headers der Kasse
 **************************************/
.header_timestamp {
	position: absolute;
	width: 200px;
	height: 30px;
	margin-top: 12px;
	margin-left: 410px;
	/* color: #6D8E53; */
	font-size: 24px;
	font-family: tahoma, arial,sans-serif;
}
.header_date, .header_time {
	float: left;
}
.workbenchHeaderMenu {
	position: absolute;
	right: 0px;
	height: 100%;
}

/******************************
 ***  Elemente des Statusbar
 ******************************/
.touchscreenStatusField {
	display: table-cell;
	min-width: 140px;
	height: 21px;
	white-space: nowrap;
	text-align: left;
	vertical-align: middle;
	padding-left: 5px;
	padding-right: 5px;
	border: 2px inset darkgray;
	overflow: hidden;
}
#touchscreenStatusInfo {
	width: 100%;
}
#touchscreenStatusTime {
	min-width: unset;
	width: 100px;
}
#touchscreenStatusHappyHour {
	min-width: unset;
}


/*****************************
 *** Standard-Formatierungen
 *****************************/
.hidden {
  display: none;
}
.nothidden {
}
.bold {
  font-weight: bold;
}
.floatLeft {
	float: left;
}
.floatRight {
	float: right;
}
.touchscreenText {
	height: 20px;
	font-size: 16px;
	text-align: left;
}
.touchscreenSmallText {
	height: 20px;
	font-size: 14px;
	text-align: left;
}
.touchscreenWarning {
	color: #db0a0ad4;
}

/***************************************************************************
 *** DIV in dem ein Content mit einem optionalen Scrollbar angezeigt wird.
 ***************************************************************************/
.browserDiv {
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
	display: flex;
	background-color: white;
	overflow: auto;
	overflow-y: hidden;
}
.browserContentDiv {
	position: relative;
	float: left;
	/* width: calc(100% - 10px); */
	width: 100%;
	height: calc(100% - 10px);
	margin: 5px;
	/* flex: auto; */
	background-color: white;
	overflow: auto;
	overflow-y: hidden;
}
.browserScrollbarDiv {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 60px;
	height: 100%;
	display: flex;
	justify-content: center;
	position: relative;
	float: left;
}