@charset "utf-8";
/* CSS Document */

/*@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);*/


/*************************************************************************************************************************/
/* GENERAL PAGE SETTINGS */
/*************************************************************************************************************************/

* {
	font-family: "Open Sans", "Trebuchet MS", Arial, Helvetica, sans-serif;
	outline: none !important;
}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
}


html, body {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
}

body {
	background-color: #111;
	text-transform: uppercase;
	font-size: 1vw;
	font-family: "Open Sans", "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: 400;
	min-width: 800px;
	min-height: 450px;	
	color: #777;
}

body > div {
	overflow: hidden;
}


.flexbox {
	display: 			flex;
	flex-direction: 	row;
	flex-wrap:			nowrap;
	/* SAFARI / WEBKIT */
	display: 						-webkit-flex; 		/* Safari */
	-webkit-flex-direction: 	row; 					/* Safari */
	-webkit-flex-wrap: 			nowrap; 				/* Safari */
}


/*************************************************************************************************************************/
/* MAIN CONTAINERS */
/*************************************************************************************************************************/

#logo {
	position: absolute;
	top: 0%;
	right: 80%;
	bottom: 90%;
	left:0%;
}

#topnav {
	position: absolute;
	top: 0%;
	right: 0%;
	bottom: 90%;
	left:20%;
	background-color: #333;
}

#categories {
	position: absolute;
	top: 10%;
	right: 70%;
	bottom: 10%;
	left: 0%;
}

#products {
	position: absolute;
	top: 10%;
	right: 30%;
	bottom: 10%;
	left: 30%;
}

#table {
	position: absolute;
	top: 10%;
	right: 0%;
	bottom: 80%;
	left: 70%;
}

#sales {
	position: absolute;
	top: 30%;
	right: 0%;
	bottom: 20%;
	left: 70%;
}

#sales_menu {
	position: absolute;
	top: 20%;
	right: 0%;
	bottom: 70%;
	left: 70%;
}

#salesnav,
#tablenav {
	position: absolute;
	top: 80%;
	right: 0%;
	bottom: 10%;
	left: 70%;
}

/*
#categories-paging {
	position: absolute;
	top: 90%;
	right: 80%;
	bottom: 10%;
	left: 0%;
}*/

#bottomnav {
	position: absolute;
	top: 90%;
	right: 50%;
	bottom: 0%;
	left: 20%;
}

/*
#products-paging {
	position: absolute;
	top: 90%;
	right: 30%;
	bottom: 0%;
	left: 50%;
}*/

#total {
	position: absolute;
	top: 90%;
	right: 0%;
	bottom: 0%;
	left: 70%;
}

#system_settings {
	position: absolute;
	top: 10%;
	right: 70%;
	bottom: 10%;
	left: 0%;
}
#cashdesk_settings {
	position: absolute;
	top: 10%;
	right: 40%;
	bottom: 10%;
	left: 30%;
}
#waitor_settings {
	position: absolute;
	top: 10%;
	right: 0%;
	bottom: 10%;
	left: 70%;
}

#cashdesk_info {
	position: absolute;
	top: 90%;
	right: 30%;
	bottom: 0%;
	left: 0%;
	color: #FFF;
	display: -webkit-flex;
  	display: flex;	
}

#cashdesk_info.mode_n {
	background-color: #222;
	color: #888;
}
#cashdesk_info.mode_t {
	background-color: #C00;
	color: #FFF;
}

#cashdesk_info .col {
	width: calc(100% / 7); 
	height: 100%;
	text-align: center;
	box-sizing: border-box;
	/*
	border-top: 1px solid #111;
	border-right: 1px solid #111;
	*/
	border: 1px solid #333;

	-webkit-flex-wrap: wrap; /* Safari */
  	flex-wrap:         wrap;

	-webkit-flex: 1;
          flex: 1;

	display: -webkit-flex;
	display:         flex;
	
	-webkit-align-items: center;
	align-items: center;
	
	-webkit-justify-content: center;
	justify-content: center;

}

#cashdesk_info .col .var {
	font-weight: normal;
	font-size: 0.9vw;
	width: 100%;
}
#cashdesk_info .col .var strong {
	font-weight: bold;
	font-size: 1vw;
	color: #DDD;
}

#cashdesk_info .col .val {
	font-weight: bold;
	color: #AAA;
	width: 100%;
}

#srv_status {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: green;
	display: inline-block;
	margin-left: 10px;
}

#srv_status.offline {
	background-color: red;
}

/*************************************************************************************************************************/
/* KEYBOARD */
/*************************************************************************************************************************/


#keyboard {
	position: absolute;
	left: 0;
	top: 50;
	right: 0;
	bottom: 0;	
	display: flex;
	height: 50%;
	z-index: 9999999999;
	background-color: #344a49;
	display: border-box;
}

#keyboard div {
	width: 100%;
	-webkit-flex-grow: 	1;
	flex-grow:         	1;
	display: 			flex;
}

#keyboard div button
{
	
	-webkit-flex-basis: 	5%;
	flex-basis:         	5%;
	
	background-color: #DDD;
	font-size: 2vw;
	margin: 5px;
	border-radius: 5px;
	flex: 1;
	color: #222;
	
}
#keyboard div button.wide
{
	
	-webkit-flex: 			4;
	flex: 					4;
}

#keyboard div button:hover
{
	background-color: #344a49;
	color: #FFF;
	border-color: #DDD;
}


/*************************************************************************************************************************/
/* FLEX CLASSES */
/*************************************************************************************************************************/

.flex {
	display: -webkit-flex; /* Safari */
	display: flex;	

 	-webkit-flex-direction: row; /* Safari */
  	flex-direction: row;
	
	-webkit-flex-wrap: wrap; /* Safari */
  	flex-wrap:         wrap;
	
	-webkit-justify-content: flex-start; /* Safari ORIG flex-start*/
	justify-content:         flex-start;
	
	-webkit-align-content: stretch; /* Safari */
	align-content:         stretch;	
}

.wrap {
	-webkit-flex-wrap: wrap; /* Safari */
  	flex-wrap:         wrap;
}
.nowrap {
	-webkit-flex-wrap: nowrap; /* Safari */
  	flex-wrap:         nowrap;
}

.center {
	-webkit-justify-content: center; /* Safari ORIG center*/
	justify-content:         center;
	
	-webkit-align-content: 	center; /* Safari */
	align-content:         	center;	
	
	-webkit-align-items: 	center; /* Safari */
	align-items: 				center;
}


/*************************************************************************************************************************/
/* PAGE CONTAINER */
/*************************************************************************************************************************/

.page {
	width: 100%;
	height: 100%;
}

.hidden {
	display: none;
}


/*************************************************************************************************************************/
/* FLEX PROPERTIES OF BUTTONS */
/*************************************************************************************************************************/

#logo button {
	-webkit-flex-grow: 1; /* Safari */
	flex-grow:         1;
	-webkit-flex-basis: 100%; /* Safari */
	flex-basis:         100%;
}

#topnav button {
	-webkit-flex-grow: 	1; /* Safari */
	flex-grow:         	1;
	
	-webkit-flex-basis: 	calc(100% / 8); /* Safari */
	flex-basis:         	calc(100% / 8);

	border-color: 			#111;
	color: 			#DDD;
}

#categories button {
	-webkit-flex-grow: 1; /* Safari */
	flex-grow:         1;
	
	-webkit-flex-basis: calc(100% / 2); /* Safari */
	flex-basis:         calc(100% / 2);

	height: 			calc(100% / 6);
	min-height: 		calc(100% / 6);
	max-height: 		calc(100% / 6);
	
	color: #FFF;
	
}

#products button {
	-webkit-flex-grow: 1; /* Safari */
	flex-grow:         1;
	
	-webkit-flex-basis: 33.333%; /* Safari */
	flex-basis:         33%;
	
	height: 				calc(100% / 6);	
}

#sales_menu button
{
	-webkit-flex-grow: 1; /* Safari */
	flex-grow:         1;
	
	-webkit-flex-basis: calc(100% / 3); /* Safari */
	flex-basis:         calc(100% / 3);

	background-color: #344a49;
	color: #FFF;
}

#sales button {
	-webkit-flex-grow: 1; /* Safari */
	flex-grow:         1;
	
	-webkit-flex-basis: 100%; /* Safari */
	flex-basis:         100%;
	
	height: 				calc(100% / 8);	
	width: 				100%;
}

#salesnav button {
	-webkit-flex-grow: 1; /* Safari */
	flex-grow:         1;
}

#categories-paging button,
#products-paging button{
	-webkit-flex-grow: 1; /* Safari */
	flex-grow:         1;
	
	-webkit-flex-basis: 50%; /* Safari */
	flex-basis:         50%;
	
	width: 				calc(100% / 2);	
}

#bottomnav button {
	-webkit-flex-grow: 	1; /* Safari */
	flex-grow:         	1;

	-webkit-flex-shrink: 1; /* Safari */
	flex-shrink:         1;

	-webkit-flex-basis: 	calc(100% / 3); /* Safari */
	flex-basis:         	calc(100% / 3);

	min-width:				calc(100% / 3);
	max-width:				calc(100% / 3);
}

#popup_content button {
	-webkit-flex-grow: 	1; /* Safari */
	flex-grow:         	1;

	-webkit-flex-shrink: 1; /* Safari */
	flex-shrink:         1;

	-webkit-flex-basis: 	calc(100% / 4); /* Safari */
	flex-basis:         	calc(100% / 4);

	width:					calc(100% / 4);
	min-width:				calc(100% / 4);
	max-width:				calc(100% / 4);
	
}

#popup_content button.sub {
	-webkit-flex-grow: 	1; /* Safari */
	flex-grow:         	1;

	-webkit-flex-shrink: 1; /* Safari */
	flex-shrink:         1;

	-webkit-flex-basis: 	1; /* Safari */
	flex-basis:         	1;
	
	width: auto;
	max-width: inherit;
	min-width: inherit;

}

.btn-primary {
	background-color: #1ab394;
}
.btn-danger, .confirm {
	background-color: #ed5565 !important;
}

/*************************************************************************************************************************/
/* LOGIC STYLES */
/*************************************************************************************************************************/

#products div,
#categories div,
#tables div,
#guests div {
	display: none;	
}
#products div.active,
#categories div.active,
#tables div.active,
#guests div.active {
	display: flex;	
}

li.campaign,
button.campaign {
	background: url(../img/kassa/in_aktion.png) top right no-repeat;
	background-size: 20px;
	outline: none none !important;
}

/*************************************************************************************************************************/
/* POPUP STYLES */
/*************************************************************************************************************************/

#popup {
	z-index: 100;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left:0;
	width: 100%;
	height: 100%;
}

#popup_holder {
	z-index: 10010;
	background: #222;
	opacity: 1;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0; 
}
#popup_content {
	z-index: 10020;
	background: #222;
	color: #FFF;
	position: fixed;
	/*margin: 25px;
	width: calc(100% - 2*25px);
	height: calc(100% - 2*25px);*/
	top: 15%;
	right: 5%;
	bottom: 5%;	
	left: 5%;
}

#popup_content label {
	color: #FFF;
}

#popup_content div.container {
	width: 100%;	
	height: 100%;
	box-sizing: border-box;
}

#popup_content div button {
	background-color: #EEE;
	color: #222;
	border-radius: 0px;
	border-color: #222;
}

#popup_content div button i {
	font-size: 2vw;
	margin-bottom: 10px;
	clear: both;
	display: block;
	color: #999;
}

#popup_content div button i.ib,
i.ib {
	display: inline-block;
}

#popup_content div button i.block,
i.block {
	display: block;
}

#popup_content div button i.mrl,
i.mrl {
	margin: 0px 10px;
}

#popup_content div button i.active,
i.active {
	color: red;
}


/*#popup_content div button:not([disabled]) {
	background-color: #FFF;
	color:#DDD;
}
 oder :enabled für alle aktiven */


#popup_exit {
	z-index: 10030;
	position: fixed;
	top: 5%;
	right: 5%;
	/*
	bottom: 85%;
	left: 70%;
	display: flex;
	-webkit-display: flex;
	background-color: #222;
	padding: 10px;*/
	width: 50px;
	height: 50px;
	
}

#popup_exit button,
#popup_prev button,
#popup_next button {
	border-color: #FFF;
	border-radius: 0;
	color: #FFF;
	width: 50px;
	height: 50px;
}

#popup_exit button 
{
	background:url(../img/kassa/cross.png) center no-repeat;
}

#popup_prev {
	z-index: 10030;
	position: fixed;
	top: 85%;
	right: 90%;
	bottom: 5%;
	left: 5%; 
	display: flex;
	-webkit-display: flex;
	background-color: #222;
	padding: 10px;
}

#popup_next {
	z-index: 10030;
	position: fixed;
	top: 85%;
	right: 5%;
	bottom: 5%;
	left: 90%; 
	display: flex;
	-webkit-display: flex;
	background-color: #222;
	padding: 10px;
}

#popup div.block
{
	display: block;
	width: 100%;
	height: auto;
}

#popup_exit button
{
	border: none;	
}

.input-xl{
		height:60px;
		padding:10px 16px;
		font-size:24px;
		line-height:1.5;
		border-radius:6px;
}

#popup_content .options button {
    background-color: #5b7170;
    color: #ddd;
}

#popup_content .options button:disabled  {
    background-color: #333;
    color: #888;
}

#popup_content #popup_invoices_list .options button i {
    color: #ddd;
}
#popup_content #popup_invoices_list .options button:disabled i {
    color: #888;
}

#popup_content tr.active td {
	background-color: #FFF;
	color: #222;
	vertical-align: middle;
}


#popup_content button.headline {
	-webkit-flex-grow: 	1; /* Safari */
	flex-grow:         	1;

	-webkit-flex-shrink: 1; /* Safari */
	flex-shrink:         1;

	-webkit-flex-basis: 	calc(100% / 1); /* Safari */
	flex-basis:         	calc(100% / 1);

	min-width:				calc(100% / 1);
	max-width:				calc(100% / 1);
	
}



/*************************************************************************************************************************/
/* BUTTON STYLES */
/*************************************************************************************************************************/

/*
button {
	RESET BORDER FIRST 
	border: 0;
	
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-style: solid;
	border-color: #222;
	
	background: none;
	color: #777;
	font-size: 1vw;
	
	
	-webkit-flex: 	1;
	flex: 			1;
	outline: none none !important;

}
*/

button {
	
	border: 1px solid #222;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 2px;
	
	padding: 0px;
	background: none;
	color: #777;
	font-size: 1.5vw;
	
	overflow: hidden;
	-webkit-flex: 	1;
	flex: 			1;
	outline: none none !important;
	
}

button.clicked,
button.active,
button.clicked span,
button.active span,
button.clicked small,
button.active small {
	color: #222 !important;
	background-color: #FFF !important;
}

button,
button:focus,
button:active,
button:hover,
button:active,
button:visited {
	outline: hidden;
}

button:not([disabled]) {
	cursor: pointer;	
}

#topnav button.active {
	color: #FFF;
	font-weight: 700;	
}

.bl {
	border-left-width: 1px;
	border-style: solid;
	border-color: #222;
}
.br {
	border-right-width: 1px;
	border-style: solid;
	border-color: #222;
}
.bt {
	border-top-width: 1px;
	border-style: solid;
	border-color: #222;
}
.bb {
	border-bottom-width: 1px;
	border-style: solid;
	border-color: #222;
}

.options button {
	background-color: #5b7170;
	color: #DDD;
}
.options button i {
	color: #DDD;
}

#categories button,
#products button {
	color: #FFF;
}

#categories button:nth-child(2n)
{
		/*border-right: 5px solid #111;*/
}

#products button:nth-child(5n+1)
{
		/*border-left: 5px solid #111;*/
}

#products button:nth-child(5n)
{
		/*border-right: 5px solid #111;*/
}

#table, #sales, #salesnav
{
		/*border-left: 5px solid #111;*/
}

#products, #bottomnav {
	/*margin-left: 10px;
	border-left: 1px solid #222;*/	
}


button.cancel {
	background-color: #F33;
	color: #FFF;
	font-size: 1.3vw;
	line-height: 1.3vw;
}


/*************************************************************************************************************************/
/* LOGO */
/*************************************************************************************************************************/

#logo {
	/*
	background: url(../img/logo/vertigo_schriftzug_bar_est_weiss_1c.svg)	center center no-repeat;
	background-size:contain;
	margin: 5px 0px 10px 0px;
	*/
	border-right: 1px solid #222;
	border-bottom: 1px solid #222;
	margin: 0;
	padding: 0;

	background-color: #222;
	border-color: #111;
	
}

#logo .logo{
	width: 50%;
	height: 50%;
	box-sizing: content-box;
	background: url(../img/logo/vertigo_schriftzug_bar_est_weiss_1c.svg) center center no-repeat;
	background: url(../img/logo/logo.png) center center no-repeat;
	background-size: contain;
}

/*************************************************************************************************************************/
/* TABLE */
/*************************************************************************************************************************/


#table div,
.tableinfo div
{
	padding: 10px;	
	flex-basis: 100%;
	flex-grow: 1;
	border: 1px solid #222;
	border-radius: 2px;
	box-sizing: border-box;
	background-color: #344a49;
}

#table h3,
.tableinfo h3 {
	color: #b1cccb;
	font-size: 1.5vw !important;
}
/*
#table h3,
.tableinfo h3 {
	color: #b1cccb
}*/

#table h3 span,
.tableinfo h3 span {
	float: right;
}

#table h4,
.tableinfo h4
{
	color: #FFF;
	text-transform:capitalize;
	font-size: 1vw !important;
}

#table h4 span,
.tableinfo h4 span 
{
	float: right;
}

#table div.open,
.tableinfo div.open
{
	background-color: #F33;
}
#table div.open h3,
.tableinfo div.open h3
{
	color: #000;
	font-size: 1.5vw !important;
}


/*************************************************************************************************************************/
/* SALES CONTAINER SPECIFIC STYLING */
/*************************************************************************************************************************/

#sales div,
.sales div {
	background-color: #DDD;
	overflow: auto;
	border: 1px solid #222;
	border-radius: 2px;
	flex-basis: 100%;
	flex-grow: 1;
	height: 100%;
	box-sizing: border-box;
}

#sales div ul li,
.sales div ul li {
	list-style: none;
	line-height: 2.5vw;
	padding: 0px 10px;	
	text-transform:none;
	cursor: pointer;
}

#sales div ul li input,
.sales div ul li input {
	margin-right: 10px;
	border: none;
	background-color: #DDD;
	text-align: center;
	padding: 5px;
	font-size: 1vw;
}

#sales div ul li span,
.sales div ul li span {
	float: right;	
	margin-left: 10px;
}


#sales div ul li.selected,
.sales div ul li.selected {
	background-color: #FFF;
	color: #000;
	list-style: none;
	font-weight: 700;
}


#sales div textarea,
.sales div textarea
{
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
	padding: 0;
	resize: none;
	oveflow: auto;
}


/*************************************************************************************************************************/
/* SALESNAV CONTAINER SPECIFIC STYLING */
/*************************************************************************************************************************/

#salesnav button#remove_product {
	background-color: #F33;
	color: #FFF;
	font-size: 1.3vw;
	line-height: 1.3vw;
}
#salesnav button#decrease_quantity {
	font-size: 3vw;
	line-height: 1vw;
}
#salesnav button#increase_quantity {
	font-size: 3vw;
	line-height: 1vw;
}
#salesnav button#sell_products {
	background-color: #344a49;
	color: #FFF;
	font-size: 2vw;
	line-height: 2vw;
}


/*************************************************************************************************************************/
/* POPUP INVOICES STYLES */
/*************************************************************************************************************************/

#popup table.invoices_list tr {
	line-height: 20rem;
	margin: 0; padding: 0;
	border-bottom: 1px dotted #444;
}
#popup table.invoices_list td ,
#popup table.invoices_list td * {
	font-size: 1.4vw;
	line-height: 4vw;
	margin: 0 !important; padding: 0 !important;
	box-sizing: border-box;
}

#popup table.invoices_list td span,
#popup table.invoices_list td small
{
	margin: 0px 0px 10px 0px !important;
	padding: 2px 10px !important;
}

#popup table.invoices_list tr.active td,
/*#popup table.invoices_list tr.active td span,*/
#popup table.invoices_list tr.active td small
{
	color: #222;
	font-size: 1.4vw;
}

#popup #receipt_preview  {
}

#popup #receipt_preview hr  {
	border-top: 1px dotted #000 !important;
	margin: 10px 0px;
	height: 0px;
}

#popup #receipt_preview .ibox * {
	font-family: "Courier New", Courier, monospace;
	font-size: 1vw;
}

#popup #receipt_preview .ibox {
	padding-bottom: 30px;
}

#popup #receipt_preview .invoice-reversal-btn {
	display: none;	
}

/*************************************************************************************************************************/
/* BUTTON STYLES */
/*************************************************************************************************************************/

button.paging_btn {
	background-color: #FFF;
	color: #333 !important;	
	border: 1px solid #222;
}

button.paging_btn[disabled] {
	background: none;
	background-color: #222;
	/*
	background-image: url("../img/kassa/locked.png");
    background-repeat: repeat;
	*/
	color: #DDD !important;
}

/*************************************************************************************************************************/
/* FONT STYLES */
/*************************************************************************************************************************/

h1,h2,h3,h4,h5,h6,p,spansmall,big,li,ul,i {
	margin: 0;
	padding: 0;	
}

hr {
	border: none;
	border-top: 1px solid #FFF;
	margin-left: 15px;	
	margin-right: 15px;	
}

#total {
	font-size: 3vw;
}

hr.spacing
{
	border: none;
	border-top: 3px solid #000;
}

#topnav i
{
	color: #DDD;
	margin-right: 10px;
	font-size: 1.2vw;
}

#topnav i.fa-times
{
	color: #F33;
}

#topnav .active i,
#topnav .clicked i {
	color: #222;
}

.left {
	text-align: left;	
}
.center {
	text-align: center;	
}
.right {
	text-align: right;	
}

.normal {
	font-weight: 400;	
}

.bold {
	font-weight: 700;	
}

/*************************************************************************************************************************/
/* BACKGROUND COLOR STYLES */
/*************************************************************************************************************************/

.bg_green
{
	background-color: #4a9b53;
}
.bg_red
{
	background-color: #f33;
}
.bg_grey
{
	background-color: #344a49;
}
.bg_lightgrey
{
	background-color: #5b7170;
}


/*************************************************************************************************************************/
/* FONT COLOR STYLES */
/*************************************************************************************************************************/

.c_green
{
	color: #4a9b53;
}
.c_red
{
	color: #f33;
}
.c_grey
{
	color: #344a49;
}
.c_lightgrey
{
	color: #5b7170;
}
.c_white
{
	color: #DDD;
}

.c_purewhite
{
	color: #FFF;	
}


.good {
	color: #FFF;	
}

.bad {
	color: #C00;
}