html { -ms-touch-action: none; -ms-content-zooming: none; }
body { width:calc(100% - 10px); background: #000; padding: 5px; overflow-x:hidden; }
form { width:100%; font-family: Arial; font-size:0.8em; line-height:1.4em; }
.clear { clear:both; height:0px; }
h1 { font-size:2.0em; font-weight:normal; margin-bottom:20px; }
h2 { font-size:1.5em; font-weight:normal; margin-bottom:20px; }
h3 { font-size:1.4em; font-weight:normal; margin-bottom:20px; }
a:link, a:active, a:visited { color: #fff; transition:0.25s; }
a:link:hover, a:active:hover, a:visited:hover { color: #FFF056; }
input[type="submit"] { -webkit-appearance:none; transition:0.25s; font-family:Arial,Arial; }
input:focus { outline:none; }
.input:focus { outline:none; }
.button:focus { outline:none; }
.resetbutton:focus { outline:none; }
.actionbutton:focus { outline:none; }
.datebutton:focus { outline:none; }
.info { font-size:1.2em; margin-bottom:20px; }
/* Current user */
.currentuser { bottom:13px; position: fixed; color: #fff; font-size:1.2em; position: fixed; width:calc(100% - 20px); padding: 7px 10px; background: #444; margin-left:-13px; bottom:0; height:20px }
.currentuser .brighterpos { position: absolute; right:-40px; top:-3px; }
.currentuser .printerstatus { position: absolute; right:60px; top:8px; }
.currentuser .printerstatus .status { float:left; margin-right:0px; opacity:0.9; }
.currentuser .printerstatus .status:hover { cursor: pointer; opacity:1.0; }
.currentuser .clear { clear:both; height:0px; }
.currentuser .userdetails { position: absolute; left:20px; top:8px; }
/* Filters */
.filters { margin:30px 0px; }
.filters .input { font-size:1.4em; background: #000; color: #fff; padding:10px 10px; border: solid 2px #fff; border-radius:7px; }
/* Z Reading */
.zreading { position: absolute; top:0; left:0; width:calc(100% - 40px); padding: 20px 20px; background: #fd9409; color: #fff; font-size:1.4em; z-index:10000; border-bottom: solid 20px #000; line-height:1.3em; }
.zreading a:link, .zreading a:active, .zreading a:visited { text-decoration:none; color: #FFFFA0; }
.zreading a:link:hover, .zreading a:active:hover, .zreading a:visited:hover { text-decoration:none; color: #FFFA0C; }
.signin { left:50%; top:50%; margin-left:-150px; margin-top:-280px; position: absolute; width:300px; height:420px; border: solid 0px #2B7028; border-radius:4px; padding:20px; }
.signin .button { float:left; margin-left:5px; margin-right:5px; margin-bottom:10px; border: solid 2px #4BC145; width:90px; height:90px; border-radius:8px; background: none; color: #fff; font-size:1.7em; -webkit-font-smoothing: antialiased; font-family:Arial; }
.signin .button:hover { background: #4BC145; cursor:pointer; }
.signin .actionbutton { float:left; margin-left:5px; margin-right:5px; margin-bottom:10px; border: solid 2px #fd9409; width:90px; height:90px; border-radius:8px; background: none; color: #fff; font-size:1.7em; -webkit-font-smoothing: antialiased; font-family:Arial; }
.signin .actionbutton:hover { background: #fd9409; cursor:pointer; }
.signin .actionbutton:disabled { border-color: #444; color: #444; }
.signin .actionbutton:disabled:hover { cursor: default; background:none; }
.signin h1 { font-family: Arial; color: #fff; text-align:center; font-weight:300; font-size:1.6em; width:100%; }
.signin .values { margin-top:20px; margin-left:98px; margin-bottom:50px; }
.signin .value { float:left; margin-right:10px; border: solid 2px #4BC145; width:15px; height:15px; border-radius:15px; background: none; }
.signin .selectedvalue { float:left; margin-right:10px; border: solid 2px #4BC145; width:15px; height:15px; border-radius:15px; background: #4BC145; }
/* Home - Categories */
.home { position:fixed; height:100%; width:100%; }
.home .top { height:calc(100% - 200px); width:100%; min-height:400px; }
.home .left { float:left; width:280px; padding:0px; background: #000; height:100%; overflow-x:hidden; overflow-y:auto; margin-right:20px; margin-left:30px; }
.home .left .button { width: 120px; padding: 17px 10px; color: #000; background: #444; border: solid 1px #444; border-radius:5px; margin-bottom:10px; margin-right:10px; opacity:1.0; font-size:1.4em; }
.home .left .button:hover { opacity:0.8; cursor: pointer; }
.home .left .selectedbutton { width: 120px; padding: 16px 9px; color: #fff; background: #444; border: solid 2px #fff; border-radius:5px; margin-bottom:10px; margin-right:10px; opacity:1.0; font-size:1.4em; }
.home .left .selectedbutton:hover { opacity:1.0; cursor: pointer; }
/* Home - PLU Items */
.home .centre { float:left; padding:0px; width:calc(100% - 930px); height:100%; overflow-y:auto; oveflow-x:hidden; margin-right:20px; }
.home .centre .button { float:left; width: 140px; padding: 5px 10px; color: #000; background: none; border: solid 3px #444; border-radius:5px; margin-bottom:10px; margin-right:10px; font-size:1.4em; white-space:normal; height:80px; line-height:1.3em; opacity:1; }
.home .centre .button:hover { cursor: pointer; border-color: #fff; opacity:0.8; }
.home .centre .button:disabled:hover { cursor: default; }
.home .centre .clear { clear:both; height:0px; }
.home .centre .spacer { float:left; width:140px; height:80px; background: none; margin-right:10px; margin-bottom:10px; }
.home .centre .openbutton { float:left; width: 140px; padding: 10px 10px; color: #fff; background: #5B8AFF; border: solid 3px #fff; border-radius:5px; margin-bottom:10px; margin-right:10px; font-size:1.4em; white-space:normal; height:70px; line-height:1.3em; text-transform:uppercase; font-size:1.5em; }
.home .centre .openbutton:hover { cursor: pointer; }
/* Home - Order Details */
.home .right { float:left; padding: 20px; background: #444; width: 270px; border: solid 0px #fff; border-radius:6px; margin-top:0px; height:calc(100% - 40px); }
.home .right .orderitems { max-height: 320px; overflow-y:auto; border-bottom: solid 0px #444; margin-bottom:20px; }
.home .right h2 { font-weight:normal; font-size:1.4em; margin-bottom:10px; text-align:center; color: #fff; margin-top:0px; }
.home .right .status { text-align:center; color: #fff857; margin-bottom:15px; font-size:1.3em; }
.home .right .status a:link, .home .right .status a:active, .home .right .status a:visited { color: #fff857; text-decoration:none; }
.home .right .status a:link:hover, .home .right .status a:active:hover, .home .right .status a:visited:hover { color: #fff; text-decoration:none; }
.home .right .datetime { text-align:center; color: #fff; font-size:0.9em; margin-bottom:10px; }
.home .right input[type="checkbox"] { width:1.4em; height:1.4em; margin-right:10px; }
.home .right .orderitem { width: 100%; padding: 5px 0px; border-bottom:solid 1px #444; display:block; position: relative; }
.home .right .orderitem:hover { }
.home .right .orderitem .name { float:left; width:170px; margin-right:10px; }
.home .right .orderitem .name .refund { font-size:0.85em; text-transform:uppercase; }
.home .right .orderitem .linkbutton { color: #aaa; text-decoration:none; }
.home .right .orderitem .price { float:right; width:calc(100% - 180px); color: #aaa; text-align:right;}
.home .right .orderitem .price:hover { cursor: pointer; }
.home .right .orderitem .restorebutton { position: absolute; right:0; background: #66CC33 url(/images/pos/restore.png) no-repeat; border: solid 0px #fff; border-radius:5px; color: #fff; padding: 5px 10px 5px 24px; display:block; margin-top:-4px; width:80px; }
.home .right .orderitem .restorebutton:hover { cursor: pointer; background-color: #57AF2B; }
.home .right .orderitem .removebutton { position: absolute; right:0; background: #dd0000 url(/images/pos/remove.png) no-repeat; border: solid 0px #fff; border-radius:5px; color: #fff; padding: 5px 10px 5px 24px; display:block; margin-top:-4px; width:80px; }
.home .right .orderitem .removebutton:hover { cursor: pointer; background-color: #cc0000; }
.home .right .orderitem .linkbuttonconfirmed { color: #fff; text-decoration:none; }
.home .right .orderitem .priceconfirmed { float:right; width:calc(100% - 180px); color: #fff; text-align:right;}
.home .right .orderitem .priceconfirmed:hover { cursor: pointer; }
.home .right .servicechargeitem { width: 100%; padding: 5px 0px; border-bottom:solid 1px #444; display:block; position: relative; }
.home .right .servicechargeitem:hover { }
.home .right .servicechargeitem .name { float:left; width:170px; margin-right:10px; }
.home .right .servicechargeitem .name a:link, .home .right .servicechargeitem .name a:active, .home .right .servicechargeitem .name a:visited { color:#FFBAE8; }
.home .right .servicechargeitem .name .refund { font-size:0.85em; text-transform:uppercase; }
.home .right .servicechargeitem .linkbutton { color: #aaa; text-decoration:none; }
.home .right .servicechargeitem .price { float:right; width:calc(100% - 180px); color: #aaa; text-align:right; }
.home .right .servicechargeitem .price:hover { cursor: pointer; }
.home .right .servicechargeitem .restorebutton { position: absolute; right:0; background: #66CC33 url(/images/pos/restore.png) no-repeat; border: solid 0px #fff; border-radius:5px; color: #fff; padding: 5px 10px 5px 24px; display:block; margin-top:-4px; width:80px; }
.home .right .servicechargeitem .restorebutton:hover { cursor: pointer; background-color: #57AF2B; }
.home .right .servicechargeitem .removebutton { position: absolute; right:0; background: #dd0000 url(/images/pos/remove.png) no-repeat; border: solid 0px #fff; border-radius:5px; color: #fff; padding: 5px 10px 5px 24px; display:block; margin-top:-4px; width:80px; }
.home .right .servicechargeitem .removebutton:hover { cursor: pointer; background-color: #cc0000; }
.home .right .servicechargeitem .linkbuttonconfirmed { color: #fff; text-decoration:none; }
.home .right .servicechargeitem .priceconfirmed { float:right; width:calc(100% - 180px); color: #FFBAE8; text-align:right;}
.home .right .servicechargeitem .priceconfirmed:hover { cursor: pointer; }
.home .right .orderitemoptions { color: #A8B3FF; font-size:0.85em; }
.home .right .orderitemnotes { color: #fffb47; font-size:0.85em; }
.home .right .linkbutton .orderitemoptions { color: #aaa; }
.home .right .receiptitem { width: 100%; padding: 4px 0px; border-bottom:solid 1px #444; display:block; color: #fff960; position:relative; }
.home .right .receiptitem .name { float:left; width:140px; margin-right:10px; }
.home .right .receiptitem .name:hover { cursor:pointer; }
.home .right .receiptitem .amount { float:right; width:calc(100% - 150px); text-align:right; }
.home .right .receiptitem .amount:hover { cursor: pointer; }
.home .right .receiptitem .removebutton { position: absolute; right:0; background: #dd0000 url(/images/pos/remove.png) no-repeat; border: solid 0px #fff; border-radius:5px; color: #fff; padding: 5px 10px 5px 24px; display:block; margin-top:-4px; width:80px; }
.home .right .receiptitem .removebutton:hover { cursor: pointer; background-color: #cc0000; }
.home .right .refunditem { width: 100%; padding: 4px 0px; border-bottom:solid 1px #444; display:block; color: #ffa500; }
.home .right .refunditem .name { float:left; width:140px; margin-right:10px; }
.home .right .refunditem .amount { float:right; width:calc(100% - 150px); text-align:right; }
.home .right .discountitem { width: 100%; padding: 4px 0px; border-bottom:solid 1px #444; display:block; color: #ffa500; }
.home .right .discountitem .name { float:left; width:140px; margin-right:10px; }
.home .right .discountitem .amount { float:right; width:calc(100% - 150px); text-align:right; }
.home .right .totalcost { width: 100%; display:block; color: #fff; font-size:1.2em; padding:8px 0px; border-top: solid 1px #aaa; border-bottom: solid 1px #aaa; }
.home .right .totalcost .name { float:left; width:160px; padding-left:0px; }
.home .right .totalcost .price { float:right; width:calc(100% - 160px); text-align:right; padding-right:0px; }
.home .right .clear { clear:both; height:0px; }
.home .ordercontrols { position: absolute; bottom:117px; left:0px; width:100%; background: #000; padding-top:20px; }
.home .ordercontrols .buttons { margin-left:-10px; margin-top:0px; }
.home .ordercontrols .button { float:left; width: auto; min-width:90px; padding: 10px 15px; margin:0px 0px 10px 10px; color: #fff; background: #000; border: solid 3px #FFFB14; border-radius:10px; margin-bottom:10px; opacity:1.0; font-size:1.4em; }
.home .ordercontrols .button:hover { opacity:1.0; cursor: pointer; background: #FFFB14; color: #000; }
.home .ordercontrols .button:disabled { background: #3BCC49; border-color: #3BCC49; color: #fff; }
.home .ordercontrols .button:disabled:hover { cursor: default; }
.home .ordercontrols .button2 { float:left; width: auto; min-width:90px; padding: 10px 15px; margin:0px 0px 10px 10px; color: #fff; background: #000; border: solid 3px #D3728C; border-radius:10px; margin-bottom:10px; opacity:1.0; font-size:1.4em; }
.home .ordercontrols .button2:hover { opacity:1.0; cursor: pointer; background: #D3728C; color: #000; }
.home .ordercontrols .button2:disabled { background: #3BCC49; border-color: #3BCC49; color: #fff; }
.home .ordercontrols .button2:disabled:hover { cursor: default; }
/* Home - Latest Order Controls */
.home .centreright { float:left; width: 240px; height:100%; }
.latestorders { background: #444; width: calc(100% - 40px); padding:20px; border: solid 0px #fff; border-radius:6px; margin-top:0px; max-height:calc(100% - 74px); min-height:100px; margin-bottom:10px; height:calc(50% - 80px); overflow-y:auto; }
.latestorders h2 { font-weight:normal; font-size:1.4em; padding-bottom:20px; text-align:center; color: #fff; margin-top:0px; border-bottom: solid 1px #666; margin-bottom:8px; }
.latestorders .item { color: #fff; margin-bottom:8px; padding-bottom:8px; border-bottom: solid 1px #666; }
.latestorders .item .desc { float:left; width:calc(100% - 50px); height:16px; overflow:hidden; text-transform:none; }
.latestorders .item .descwarning { float:left; width:calc(100% - 50px); height:16px; overflow:hidden; text-transform:none; }
.latestorders .item .price { float:right; text-align:right; width:40px; }
.latestorders .item .pricewarning { float:right; text-align:right; width:40px; color: #ffa500; }
.latestorders a:link, .latestorders a:active, .latestorders a:visited { color: #fff; text-decoration:none; }
.latestorders .descwarning a:link, .latestorders .descwarning a:active, .latestorders .descwarning a:visited { color: #ffa500; text-decoration:none; }
.latestorders a:link:hover, .latestorders a:active:hover, .latestorders a:visited:hover { color: #ffff60; }
.customerorders .input { background: none; width: 100%; padding:10px; border: solid 3px #26cd4b; border-radius:6px; margin-top:0px; margin-bottom:10px; color: #fff; font-size:1.4em; transition:0.25s; }
.customerorders .input:hover { background: #26cd4b; cursor: pointer; }
.customerorders .input:disabled { border: solid 3px #444; color: #aaa; }
.customerorders .input:disabled:hover { background:none; cursor:default; }
/* Home - Controls */
.controlpanel { position: absolute; bottom:35px; left:0px; width:100%; background: #000; padding-top:10px; height:75px; overflow:hidden; }
.controlpanel .button { float:left; padding: 10px 15px; height:50px; margin:0px 10px 10px 0px; color: #fff; background: #000; border: solid 3px #3bcc49; border-radius:10px; margin-bottom:10px; opacity:1.0; font-size:1.4em; line-height:1.3em; white-space:normal; }
.controlpanel .button:hover { opacity:1.0; cursor: pointer; background: #3bcc49 }
.controlpanel .selectedbutton { float:left; padding: 10px 15px; height:50px; margin:0px 10px 10px 0px; color: #fff; background: #3bcc49; border: solid 3px #3bcc49; border-radius:10px; margin-bottom:10px; opacity:1.0; font-size:1.4em; line-height:1.3em; white-space:normal; }
.controlpanel .selectedbutton:hover { opacity:1.0; cursor: pointer; background: #000; }
.controlpanel .button:disabled { opacity:0.2; }
.controlpanel .button:disabled:hover { opacity:0.2; background:none; cursor:default; }
.controlpanel .exitbutton { float:left; padding: 10px 15px; margin:0px 10px 10px 0px; color: #fff; background: #000; border: solid 3px #fd9409; border-radius:10px; margin-bottom:10px; opacity:1.0; font-size:1.4em; line-height:1.3em; white-space:normal; }
.controlpanel .exitbutton:hover { opacity:1.0; cursor: pointer; background: #fd9409 }
/* Item Options */
.itemoptionsbg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:5000; }
.itemoptions { width: 800px; height: 480px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-423px; margin-top:-263px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.itemoptions h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; margin-bottom:20px; color: #fff; }
.itemoptions .options { margin-left:-10px; position:absolute; bottom: 20px; width: 100%; }
.itemoptions .resetbutton { float:left; margin-left:10px; width:140px; margin-bottom:10px; font-size:1.4em; padding: 5px 0px; height:60px; border: solid 2px #aaa; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.itemoptions .resetbutton:hover { cursor: pointer; background: #aaa; white-space:normal; }
.itemoptions .select { max-height:350px; overflow-y:auto; }
.itemoptions .button { float:left; margin-right:10px; width:120px; margin-bottom:10px; font-size:1.4em; padding: 5px 10px; height:60px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.itemoptions .button:hover { cursor: pointer; background: #49cc4d; }
.itemoptions .selectedbutton { float:left; margin-right:10px; width:120px; margin-bottom:10px; font-size:1.4em; padding: 5px 10px; height:60px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #49cc4d; white-space:normal; }
.itemoptions .options .button { float: right; margin-right:30px; width:160px; }
.itemoptions .title { font-size:1.4em; color: #fff; text-align:left; margin-bottom:14px; padding-bottom:6px; border-bottom: solid 1px #444; margin-top:20px; }
.itemoptions .nextbutton { clear:both; margin-top:20px; float:left; margin-right:10px; width:120px; margin-bottom:10px; font-size:1.4em; padding: 5px 10px; height:60px; border: solid 2px #ffa500; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.itemoptions .nextbutton:hover { cursor: pointer; background: #ffa500; }
/* Tab */
.tabbg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:5000; }
.tab { width: 420px; height: 500px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-233px; margin-top:-293px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.tab h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; color: #fff; margin-bottom:20px; }
.tab .options { margin-left:-10px; position:absolute; bottom: 10px; width: 100%; }
.tab .resetbutton { float:left; margin-left:10px; width:140px; margin-bottom:10px; font-size:1.4em; padding: 5px 0px; height:60px; border: solid 2px #aaa; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.tab .resetbutton:hover { cursor: pointer; background: #aaa; white-space:normal; }
.tab .headings { margin-left:-10px; height:60px; overflow-y:auto; width:calc(100% + 20px); border-bottom: solid 1px #444; margin-bottom:20px; margin-top:40px; }
.tab .headingbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.2em; padding: 9px 10px; width:auto; min-width:50px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.tab .headingbutton:hover { background: #666; cursor: pointer; }
.tab .headingbuttonselected { float:left; margin-left:10px; margin-bottom:10px; font-size:1.2em; padding: 9px 10px; width:auto; min-width:50px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #49cc4d; white-space:normal; }
.tab .slots { margin-left:-10px; height:175px; overflow-y:auto; width:calc(100% + 10px); margin-bottom:25px; }
.tab .slotbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.4em; width:68px; height:20px; padding: 23px 0px; border: solid 2px #fff; border-radius: 10px; color: #fff; background: #333; text-align:center; vertical-align:middle; text-decoration:none; transition:0.25s; }
.tab .slotbuttondisabled { float:left; margin-left:10px; margin-bottom:10px; font-size:1.4em; width:68px; height:20px; padding: 23px 0px; border: solid 2px #888; border-radius: 10px; color: #fff; background: #666; color: #fff; text-align:center; vertical-align:middle; text-decoration:none; opacity:0.4; }
.tab .slotbuttonselected { float:left; background: #49cc4d; margin-left:10px; margin-bottom:10px; font-size:1.4em; padding: 23px 0px; height:20px; width:68px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; text-align:center; text-decoration:none; }
.tab .slotbutton:hover { background: #666; cursor: pointer; }
.tab .slotbutton:disabled { background: #444; border-color: #888; color: #888; opacity:0.5; }
.tab .slotbutton:disabled:hover { cursor:default; }
.tab .usedslotbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.0em; padding: 6px 0px; height:54px; width:68px; overflow:hidden; border: solid 2px #fd9409; border-radius: 10px; color: #fff; background: #333; white-space:normal; text-align:center; text-decoration:none; }
.tab .usedslotbuttonselected { float:left; background: #fd9409; margin-left:10px; margin-bottom:10px; font-size:1.0em; padding: 6px 0px; width:68px; height: 54px; overflow:hidden; border: solid 2px #fd9409; border-radius: 10px; color: #fff; white-space:normal; text-align:center; text-decoration:none; }
.tab .usedslotbutton:hover { background: #666; cursor: pointer; }
.tab .reservedslotbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.0em; padding: 6px 0px; height:54px; width:68px; overflow:hidden; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #333; white-space:normal; text-align:center; text-decoration:none; }
.tab .reservedslotbuttonselected { float:left; margin-left:10px; margin-bottom:10px; font-size:1.0em; padding: 6px 0px; height:54px; width:68px; overflow:hidden; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #49cc4d; white-space:normal; text-align:center; text-decoration:none; }
.tab .reservedslotbutton:hover { cursor: pointer; background: #49cc4d; }
.tab .tableft { float:left; width:190px; }
.tab .tabright { float:left; width:calc(100% - 190px); }
.tab .clear { clear:both; }
.tab .text { font-size:1.2em; color: #fff; margin-bottom:10px; }
.tab .input { font-size:1.4em; border: solid 3px #fff; border-radius:10px; background: #444; color: #fff; max-width:calc(100% - 16px); padding: 10px 5px; }
.tab .button { float:left; margin-right:10px; width:120px; margin-bottom:10px; font-size:1.4em; padding: 5px 10px; height:60px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.tab .input2 { font-size:1.4em; border: solid 3px #fff; border-radius:10px; background: #222; color: #fff; width:48px; margin-right:5px; padding: 10px 5px; }
.tab .input2:hover { cursor: pointer; background: #444; }
.tab .input2selected { font-size:1.4em; border: solid 3px #49cc4d; border-radius:10px; background: #49cc4d; color: #fff; width:48px; margin-right:5px; padding: 10px 5px; }
.tab .buttons { width:100%; overflow-x: auto; }
.tab .buttonholder { width: 460px; }
.tab .button:hover { cursor: pointer; background: #49cc4d; }
.tab .button:disabled { background: #444; border-color: #888; color: #888; opacity:0.5; }
.tab .button:disabled:hover { cursor:default; }
.tab .selectedbutton { float:left; margin-right:10px; width:120px; margin-bottom:10px; font-size:1.4em; padding: 5px 10px; height:60px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #49cc4d; white-space:normal; }
.tab .options .button { float: right; margin-right:30px; width:160px; }
/* Table */
.assigntablebg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:5000; }
.assigntable { width: 660px; height: 560px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-353px; margin-top:-323px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.assigntable h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; color: #fff; margin-bottom:20px; }
.assigntable .options { margin-left:-10px; position:absolute; bottom: 10px; width: 100%; }
.assigntable .resetbutton { float:left; margin-left:10px; width:140px; margin-bottom:10px; font-size:1.4em; padding: 5px 0px; height:60px; border: solid 2px #aaa; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.assigntable .resetbutton:hover { cursor: pointer; background: #aaa; white-space:normal; }
.assigntable .headings { margin-left:-10px; height:60px; overflow-y:auto; width:calc(100% + 20px); border-bottom: solid 1px #444; margin-bottom:20px; margin-top:40px; }
.assigntable .headingbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.2em; padding: 9px 10px; width:auto; min-width:50px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.assigntable .headingbutton:hover { background: #666; cursor: pointer; }
.assigntable .headingbuttonselected { float:left; margin-left:10px; margin-bottom:10px; font-size:1.2em; padding: 9px 10px; width:auto; min-width:50px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #49cc4d; white-space:normal; }
.assigntable .slots { margin-left:-10px; height:230px; overflow-y:auto; width:calc(50% + 20px); margin-bottom:25px; float:left; }
.assigntable .reservations { margin-left:10px; height:210px; overflow-y:auto; width:calc(50% - 40px); margin-bottom:25px; float:left; background:#222; padding:10px; font-size:1.1em; color: #fff; position: relative; }
.assigntable .reservations h3 { margin:0px; margin-bottom:0px; padding-bottom:16px; text-align:center; }
.assigntable .tableres { padding:10px; border-bottom: solid 1px #666; border-top: solid 1px #666; margin-top:-1px; }
.assigntable .tableres:hover { cursor: pointer; background: #444; }
.assigntable .tableresselected { padding:10px; border-bottom: solid 1px #666; border-top: solid 1px #666; margin-top:-1px; color: #fff; background: #49cc4d; }
.assigntable .tableresselected:hover { }
.assigntable .slotbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.4em; width:68px; height:20px; padding: 23px 0px; border: solid 2px #fff; border-radius: 10px; color: #fff; background: #333; text-align:center; vertical-align:middle; text-decoration:none; transition:0.25s; }
.assigntable .slotbuttondisabled { float:left; margin-left:10px; margin-bottom:10px; font-size:1.4em; width:68px; height:20px; padding: 23px 0px; border: solid 2px #888; border-radius: 10px; color: #fff; background: #666; color: #fff; text-align:center; vertical-align:middle; text-decoration:none; opacity:0.4; }
.assigntable .slotbuttonselected { float:left; background: #49cc4d; margin-left:10px; margin-bottom:10px; font-size:1.4em; padding: 23px 0px; height:20px; width:68px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; text-align:center; text-decoration:none; }
.assigntable .slotbutton:hover { background: #666; cursor: pointer; }
.assigntable .slotbutton:disabled { background: #444; border-color: #888; color: #888; opacity:0.5; }
.assigntable .slotbutton:disabled:hover { cursor:default; }
.assigntable .usedslotbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.0em; padding: 6px 0px; height:54px; width:68px; overflow:hidden; border: solid 2px #fd9409; border-radius: 10px; color: #fff; background: #333; white-space:normal; text-align:center; text-decoration:none; }
.assigntable .usedslotbuttonselected { float:left; background: #fd9409; margin-left:10px; margin-bottom:10px; font-size:1.0em; padding: 6px 0px; width:68px; height: 54px; overflow:hidden; border: solid 2px #fd9409; border-radius: 10px; color: #fff; white-space:normal; text-align:center; text-decoration:none; }
.assigntable .usedslotbutton:hover { background: #666; cursor: pointer; }
.assigntable .reservedslotbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.0em; padding: 6px 0px; height:54px; width:68px; overflow:hidden; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #333; white-space:normal; text-align:center; text-decoration:none; }
.assigntable .reservedslotbuttonselected { float:left; margin-left:10px; margin-bottom:10px; font-size:1.0em; padding: 6px 0px; height:54px; width:68px; overflow:hidden; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #49cc4d; white-space:normal; text-align:center; text-decoration:none; }
.assigntable .reservedslotbutton:hover { cursor: pointer; background: #49cc4d; }
.assigntable .reservedslotbuttondisabled { float:left; margin-left:10px; margin-bottom:10px; font-size:1.0em; padding: 6px 0px; height:54px; width:68px; overflow:hidden; border: solid 2px #aaa; border-radius: 10px; color: #ccc; background: #333; white-space:normal; text-align:center; text-decoration:none; }
.assigntable .reservedslotbuttondisabled:hover { cursor: pointer; background: #333; }
.assigntable .tableft { float:left; width:240px; margin-right:10px; }
.assigntable .tabright { float:left; width:calc(100% - 250px); }
.assigntable .clear { clear:both; }
.assigntable .text { font-size:1.2em; color: #fff; margin-bottom:10px; }
.assigntable .input { font-size:1.4em; border: solid 2px #fff; border-radius:10px; background: #444; color: #fff; max-width:calc(100% - 16px); padding: 10px 5px; }
.assigntable .button { float:left; margin-right:10px; width:120px; margin-bottom:10px; font-size:1.4em; padding: 5px 10px; height:60px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.assigntable .input2 { font-size:1.4em; border: solid 2px #fff; border-radius:10px; background: #222; color: #fff; width:48px; margin-right:8px; padding: 10px 5px; }
.assigntable .input2:hover { cursor: pointer; background: #444; }
.assigntable .input2:disabled { opacity:0.2; }
.assigntable .input2selected { font-size:1.4em; border: solid 3px #49cc4d; border-radius:10px; background: #49cc4d; color: #fff; width:48px; margin-right:8px; padding: 10px 5px; }
.assigntable .buttons { width:100%; overflow-x: auto; }
.assigntable .buttonholder { width: 680px; }
.assigntable .button:hover { cursor: pointer; background: #49cc4d; }
.assigntable .button:disabled { background: #444; border-color: #888; color: #888; opacity:0.5; }
.assigntable .button:disabled:hover { cursor:default; }
.assigntable .selectedbutton { float:left; margin-right:10px; width:120px; margin-bottom:10px; font-size:1.4em; padding: 5px 10px; height:60px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #49cc4d; white-space:normal; }
.assigntable .options .button { float: right; margin-right:30px; width:160px; }
/* Offers */
.offersbg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:5000; }
.offers { width: 320px; height: 500px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-183px; margin-top:-273px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.offers h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; color: #fff; }
.offers .options { margin-left:-10px; position:absolute; bottom: 10px; width: 100%; }
.offers .resetbutton { float:left; margin-left:10px; width:140px; margin-bottom:10px; font-size:1.4em; padding: 5px 0px; height:60px; border: solid 2px #aaa; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.offers .resetbutton:hover { cursor: pointer; background: #aaa; white-space:normal; }
.offers .button { float:left; margin-right:10px; width:100%; margin-bottom:10px; font-size:1.4em; padding: 5px 10px; height:60px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.offers .button:hover { cursor: pointer; background: #49cc4d; }
.offers .selectedbutton { float:left; margin-right:10px; width:100%; margin-bottom:10px; font-size:1.4em; padding: 5px 10px; height:60px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #49cc4d; white-space:normal; }
.offers .selectedbutton:hover { cursor: pointer; }
.offers .options .button { float: right; margin-right:30px; width:160px; }
/* Offers */
.vouchersbg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:5000; }
.vouchers { width: 400px; height: 400px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-223px; margin-top:-223px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.vouchers h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; color: #fff; margin-bottom:30px; }
.vouchers .text { color: #fff; margin-bottom:10px; font-size:1.2em; }
.vouchers .input { font-size:1.6em; border: solid 2px #fff; border-radius:10px; background: #444; color: #fff; width:calc(100% - 16px); padding: 10px 5px; }
.vouchers .input2 { font-size:1.6em; border: solid 2px #fff; border-radius:10px; background: #444; color: #fff; padding: 10px 5px; display:inline-block; }
.vouchers .button2 { font-size:1.6em; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #333; display:inline-block; margin-left:5px; padding:10px; transition:0.25s; min-width:50px; }
.vouchers .button2:hover { cursor: pointer; background: #49cc4d; }
.vouchers .options { margin-left:-10px; position:absolute; bottom: 10px; width: 100%; }
.vouchers .resetbutton { float:left; margin-left:10px; width:140px; margin-bottom:10px; font-size:1.4em; padding: 5px 0px; height:60px; border: solid 2px #aaa; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.vouchers .resetbutton:hover { cursor: pointer; background: #aaa; white-space:normal; }
.vouchers .button { float:left; margin-right:10px; width:100%; margin-bottom:10px; font-size:1.4em; padding: 5px 10px; height:60px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.vouchers .button:hover { cursor: pointer; background: #49cc4d; }
.vouchers .options .button { float: right; margin-right:30px; width:160px; }
.vouchers .warningtext { margin-top:20px; color: #fd9409; font-size:1.4em; line-height:1.4em; }
/* Notes */
.notesbg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:5000; }
.notes { width: 400px; height: 420px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-223px; margin-top:-233px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.notes h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; margin-bottom:30px; color: #fff; }
.notes .resetbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.4em; padding: 5px 20px; height:60px; border: solid 2px #aaa; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.notes .resetbutton:hover { cursor: pointer; background: #aaa; white-space:normal; }
.notes .removebutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.4em; padding: 5px 20px; height:60px; border: solid 2px #fd9409; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.notes .removebutton:hover { cursor: pointer; background: #fd9409; white-space:normal; }
.notes .button { float:left; margin-left:10px; margin-bottom:10px; font-size:1.4em; padding: 5px 20px; height:60px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.notes .button:hover { cursor: pointer; background: #49cc4d; }
.notes .options { margin-left:-10px; position:absolute; bottom: 20px; width: calc(100% - 20px); }
.notes .input { padding: 5px 10px; margin-top:0px; font-size:2.0em; font-family:Arial; max-width:calc(100% - 20px); border: solid 2px #aaa; border-radius:10px; }
.notes .text { font-size:1.2em; margin-bottom:6px; color: #fff; }
/* Choose Printer */
.chooseprinterbg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:5000; }
.chooseprinter { width: 260px; height: 300px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-153px; margin-top:-173px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.chooseprinter h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; margin-bottom:30px; color: #fff; }
.chooseprinter .resetbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.4em; padding: 5px 20px; height:60px; border: solid 2px #aaa; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.chooseprinter .resetbutton:hover { cursor: pointer; background: #aaa; white-space:normal; }
.chooseprinter .button { float:left; margin-left:10px; margin-bottom:10px; font-size:1.4em; padding: 5px 20px; height:60px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.chooseprinter .button:hover { cursor: pointer; background: #49cc4d; }
.chooseprinter .options { margin-left:-10px; position:absolute; bottom: 20px; width: calc(100% - 20px); }
.notes .text { font-size:1.2em; margin-bottom:6px; color: #fff; }
/* Add Open Item */
.openitembg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:5000; }
.openitem { width: 300px; height: 340px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-173px; margin-top:-193px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.openitem h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; margin-bottom:30px; color: #fff; }
.openitem .text { margin-top:10px; margin-bottom:4px; }
.openitem .input { padding: 5px 10px; margin-top:0px; font-size:2.0em; font-family:Arial; max-width:calc(100% - 20px); border: solid 2px #aaa; border-radius:10px; margin-bottom:20px; }
.openitem .resetbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.4em; padding: 5px 20px; height:60px; border: solid 2px #aaa; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.openitem .resetbutton:hover { cursor: pointer; background: #aaa; white-space:normal; }
.openitem .button { float:right; margin-right:10px; margin-bottom:10px; font-size:1.4em; padding: 5px 20px; height:60px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.openitem .button:hover { cursor: pointer; background: #49cc4d; }
.openitem .options { margin-left:-10px; position:absolute; bottom: 12px; width: calc(100% - 20px); }
.openitem .text { font-size:1.2em; margin-bottom:6px; color: #fff; }
.openitem .center { text-align:center; }
.openitem .center .text { text-align:center; margin-top:10px; }
.openitem .center input[type="text"] { text-align:center; }
/* Till */
.tillbg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/bg.png); z-index:5000; }
.till { width: 680px; height: 560px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-363px; margin-top:-303px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.till h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; margin-bottom:30px; color: #fff; }
.till .display { margin-bottom:10px; font-size:1.6em; }
.till .text { font-size:1.6em; border: solid 3px #fff; border-radius:10px; background: #444; color: #fff; width:calc(100% - 16px); padding: 10px 5px; }
.till .buttons { margin-left:-10px; margin-bottom:20px; }
.till .buttons .numbers { float: left; width:250px; }
.till .buttons .exact { float:left; width:90px; }
.till .buttons .methods { float:left; width:calc(100% - 340px); }
.till .button { float:left; margin-left:10px; margin-bottom:10px; font-size:1.6em; padding: 22px 0px; width:71px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #333; }
.till .resetbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.6em; padding: 22px 0px; width:71px; border: solid 2px #aaa; border-radius: 10px; color: #fff; background: #333; }
.till .amountbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.6em; padding: 22px 0px; width:71px; border: solid 2px #4ca5ff; border-radius: 10px; color: #fff; background: #333; }
.till .button:hover { cursor: pointer; background: #49cc4d; }
.till .resetbutton:hover { cursor: pointer; background: #aaa; }
.till .amountbutton:hover { cursor: pointer; background: #4ca5ff; }
.till .options { margin-left:-10px; position:absolute; bottom: 10px; width:calc(100% - 30px); }
.till .options .button { width: 128px; margin-top:10px; padding: 15px 0px; font-size:1.4em; }
.till .button:disabled { border-color: #666; color: #666; opacity:0.5; }
.till .button:disabled:hover { background: #222; cursor: default; }
.till .amountbutton:disabled { border-color: #666; color: #666; opacity:0.5; }
.till .amountbutton:disabled:hover { background: #222; cursor: default; }
.till .options .resetbutton { width: 120px; margin-top:10px; padding: 15px 0px; font-size:1.4em; }
.till .options .amountbutton { width: 120px; margin-top:10px; padding: 15px 0px; font-size:1.4em; }
.till .options .leftbutton { float:left; }
.till .options .rightbutton { float: right; }
.till .pmbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.2em; padding: 0px; width:104px; height:72px; border: solid 2px #ffa500; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.till .pmbutton:hover { background: #ffa500; cursor: pointer; }
.till .pmbutton:disabled { border: solid 2px #444; color: #444; background: #222; opacity:0.8; }
.till .overpayment { position: absolute; left:12px; bottom:10px; color: #fff; font-size:1.2em; width:calc(100% - 220px); line-height:1.5em; background: #D38600; padding:10px; border: solid 0px #fff; border-radius:3px; }
.till .overpaymentbox { margin-top:8px; margin-left:-5px; }
.till .overpaymentbox input[type="checkbox"] { width:1.8em; height:1.8em; margin-right:9px; vertical-align:middle; }
/* Payment Methods */
.paymentmethodbg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:5000; }
.paymentmethods { width: 400px; height: 400px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-223px; margin-top:-223px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.paymentmethods h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; margin-bottom:30px; color: #fff; }
.paymentmethods .buttons { margin-left:-10px; margin-bottom:20px; }
.paymentmethods .button { float:left; margin-left:10px; margin-bottom:10px; font-size:1.2em; padding: 5px 0px; height:60px; width:125px; border: solid 2px #49cc4d; border-radius: 5px; color: #fff; background: #333; white-space:normal; }
.paymentmethods .button:hover { cursor: pointer; background: #49cc4d; }
.paymentmethods .options { margin-left:-10px; position:absolute; bottom: 20px; }
.paymentmethods .resetbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.4em; padding: 15px 0px; width:57px; border: solid 2px #fd9409; border-radius: 5px; color: #fff; background: #333; }
.paymentmethods .options .resetbutton { width: 125px; margin-top:10px; }
.paymentmethods .resetbutton:hover { cursor: pointer; background: #fd9409; }
/* Change */
.changebg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:5000; }
.change { width: 320px; height: 200px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-183px; margin-top:-113px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.change h2 { margin-top:0px; font-weight:normal; font-size:2.0em; text-align:center; margin-bottom:30px; color: #fff; }
.change .text { font-size:1.6em; text-align:center; color: #fff; line-height:1.3em; }
.change .input { font-size:1.4em; border: solid 2px #fff; border-radius:10px; background: #444; color: #fff; max-width:calc(100% - 16px); padding: 10px 5px; }
.change .options { margin-left:-10px; position:absolute; bottom: 20px; width: 100%; }
.change .resetbutton { float:left; margin-left:10px; width:140px; margin-bottom:10px; font-size:1.4em; padding: 5px 0px; height:60px; border: solid 2px #fd9409; border-radius: 5px; color: #fff; background: #333; white-space:normal; }
.change .resetbutton:hover { cursor: pointer; background: #fd9409; white-space:normal; }
.change .button { float:right; margin-right:30px; width:160px; margin-bottom:10px; font-size:1.4em; padding: 5px 0px; height:60px; border: solid 2px #49cc4d; border-radius: 5px; color: #fff; background: #333; white-space:normal; }
.change .button:hover { cursor: pointer; background: #49cc4d; }
/* Notification */
.notificationbg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:5000; }
.notification { width: 400px; height: 240px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-223px; margin-top:-143px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.notification h2 { margin-top:0px; font-weight:normal; font-size:2.4em; text-align:center; margin-bottom:30px; color: #fff; }
.notification .text { font-size:1.6em; text-align:center; color: #fff; line-height:1.3em; }
.notification .options { margin-left:-10px; position:absolute; bottom: 20px; width: 100%; }
.notification .resetbutton { position: relative; left:50%; margin-left:-70px; width:140px; margin-bottom:10px; font-size:1.4em; padding: 5px 0px; height:60px; border: solid 2px #aaa; border-radius: 5px; color: #fff; background: #333; white-space:normal; }
.notification .resetbutton:hover { cursor: pointer; background: #aaa; white-space:normal; }
/* Till Count */
.tillcountbg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:5000; }
.tillcount { width: 700px; height: 500px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-373px; margin-top:-273px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.tillcount h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; margin-bottom:30px; color: #fff; }
.tillcount .text { font-size:1.2em; text-align:center; color: #fff; }
.tillcount .entry { margin-bottom:12px; padding-bottom:12px; border-bottom: solid 1px #444; width:100%; }
.tillcount .item { float:left; width:140px; margin-right:20px; font-size:1.2em; padding-top:8px; color: #fff; }
.tillcount .value { float:left; width:150px; margin-right:30px; }
.tillcount .input { border: solid 1px #fff; padding: 5px 10px; border-radius:3px; font-size:1.4em; }
.tillcount .options { margin-left:-10px; position:absolute; bottom: 20px; width: 100%; }
.tillcount .resetbutton { float:left; margin-left:10px; width:140px; margin-bottom:10px; font-size:1.4em; padding: 5px 0px; height:60px; border: solid 2px #fd9409; border-radius: 5px; color: #fff; background: #333; white-space:normal; }
.tillcount .resetbutton:hover { cursor: pointer; background: #fd9409; white-space:normal; }
.tillcount .button { float:right; margin-right:30px; width:160px; margin-bottom:10px; font-size:1.4em; padding: 5px 0px; height:60px; border: solid 2px #49cc4d; border-radius: 5px; color: #fff; background: #333; white-space:normal; }
.tillcount .button:hover { cursor: pointer; background: #49cc4d; }
/* Mismatch */
.mismatchbg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:6000; }
.mismatch { width: 400px; height: 240px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-223px; margin-top:-143px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.mismatch h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; margin-bottom:30px; color: #fff; }
.mismatch .text { font-size:1.2em; text-align:center; color: #fff; line-height:1.4em; }
.mismatch .options { margin-left:-10px; position:absolute; bottom: 20px; width: 100%; }
.mismatch .resetbutton { position: relative; left:50%; margin-left:-70px; width:140px; margin-bottom:10px; font-size:1.4em; padding: 5px 0px; height:60px; border: solid 2px #aaa; border-radius: 5px; color: #fff; background: #333; white-space:normal; }
.mismatch .resetbutton:hover { cursor: pointer; background: #aaa; white-space:normal; }
/* Orders */
.orders { position:relative; width:100%; color: #fff; font-size:1.0em; overflow-y:auto; }
.orders h1 { padding-bottom:7px; border-bottom: solid 1px #666; width:calc(100% - 30px); line-height:1.3em; }
.orders .buttons { margin: 20px 0px; width:calc(100% - 20px); }
.orders .sessions .button { float:left; border-color: #fd9409; margin-left:5px; }
.orders .sessions .buttonselected { float:left; border-color: #fd9409; margin-left:5px; background: #fd9409; }
.orders .sessions .button:disabled { background: #fd9409; }
.orders .sessions .resetbutton { margin-left:5px; }
.orders .sessions .button:hover { background: #fd9409; }
.orders .button { float:left; width: auto; padding: 17px 25px; margin:0px 5px 10px 5px; color: #fff; background: #000; border: solid 3px #3bcc49; border-radius:10px; opacity:1.0; font-size:1.4em; }
.orders .buttonselected { float:left; width: auto; padding: 17px 25px; margin:0px 5px 10px 5px; color: #fff; background: #3bcc49; border: solid 3px #3bcc49; border-radius:10px; opacity:1.0; font-size:1.4em; }
.orders .button:disabled { background: #3bcc49; }
.orders .button:hover { opacity:1.0; cursor: pointer; background: #3bcc49 }
.orders .resetbutton { float:left; width: auto; padding: 17px 25px; margin:0px 5px 10px 5px; color: #fff; background: #000; border: solid 3px #efe010; border-radius:10px; opacity:1.0; font-size:1.4em; }
.orders .resetbutton:hover { opacity:1.0; cursor: pointer; background: #efe010 }
.orders .datebutton { float:left; width: auto; padding: 17px 25px; margin:0px 5px 10px 5px; color: #fff; background: #000; border: solid 3px #fff; border-radius:10px; opacity:1.0; font-size:1.4em; }
.orders .datebutton:hover { opacity:1.0; cursor: pointer; background: #fff; color: #222; }
.orders .datebutton:disabled { border-color: #444; color: #444; }
.orders .datebutton:disabled:hover { background: none; color: #444; cursor:default }
.orders .endofday .button:disabled { cursor: default; }
.orders .endofday .text { margin: 30px 5px; font-size:1.4em; }
.orders .column { float:left; width:270px; margin-right:20px; margin-left:10px; }
.orders h2 { font-weight:normal; }
.orders .column td { padding: 0px 10px; }
.orders .column .titleheading td { padding: 10px; }
.orders table { font-size:1.2em;}
.orders table .button { font-size:1.0em; margin-bottom:0px; padding: 5px 10px; border-width:2px; }
.orders .titleheading { background: #27872F; }
.orders .titleheading td { padding: 8px 5px; }
.orders td { padding: 5px; height:30px; }
.orders .rowlight td { background: #444; border-bottom: solid 1px #666; }
.orders .rowdark td { background: #333; border-bottom: solid 1px #666; }
.orders .rowlightwarning td { background: #bb0000; border-bottom: solid 1px #666; }
.orders .rowdarkwarning td { background: #aa0000; border-bottom: solid 1px #666; }
.orders .rowlight:hover { background: #505050; }
.orders .rowdark:hover { background: #404040; }
.orders td .button { margin: 3px 5px; float:none; }
.orders td .button:disabled { background: #000; border-color: #aaa; color: #aaa; cursor:default; opacity:0.3; }
.orders .title { font-size:1.2em; margin-bottom:10px; }
.orders .value { font-size:1.4em; margin-bottom:20px; padding-bottom:20px; border-bottom: solid 1px #666; width:calc(100% - 20px); max-width:520px; }
.orders .textinput { padding: 4px 10px; border: solid 1px #fff; border-radius:3px; font-size:1.2em; color: #222; max-width:500px; font-family:Arial; }
.orders .search { width:100%; }
.orders .search .title { font-size:1.3em; float:left; padding-top:12px; margin-right:10px; }
.orders .search .value { float:left; margin-right:10px; border-bottom:none; margin-bottom:0px; width:auto; }
.orders .search .buttonholder { float:left; margin-right:10px; }
.orders .search .value .input { font-size:1.2em; border: solid 3px #fff; border-radius:8px; padding: 5px 10px; color: #eee; background:#000; }
.orders .search .buttonholder .input { font-size:1.4em; border: solid 3px #3bcc49; border-radius:8px; padding: 8px 14px; color: #eee; background:#000; }
.orders .search .buttonholder .input:hover { background: #3bcc49; cursor: pointer; }
.orders .search .linkbutton { margin-top:13px; }
.orders .search a:link, .orders .search a:active, .orders .search a:visited { font-size:1.4em; border: solid 3px #3bcc49; border-radius:8px; padding: 8px 14px; color: #eee; background:#000; text-decoration:none; }
.orders .search a:link:hover, .orders .search a:active:hover, .orders .search a:visited:hover { background: #3bcc49; }
.orders .search .clear { clear:both; margin-bottom:20px; }
/* Tables */
.reservationinfo { float:left; width:350px; }
.reservationinfo .reservationlist { background: #222; padding:20px 10px; height:300px; overflow-y:auto; font-size:1.0em; margin-right:20px; }
.reservationinfo .buttons { margin-top:10px; margin-left:-5px; width:calc(100% + 20px); }
.reservationinfo .tableres { padding:10px; border-bottom: solid 1px #666; border-top: solid 1px #666; margin-top:-1px; }
.reservationinfo .tableres:hover { cursor: pointer; background: #444; }
.reservationinfo .tableresarrived { padding:10px; border-bottom: solid 1px #666; border-top: solid 1px #666; margin-top:-1px; background: url(/images/base/person.png) no-repeat; background-position:right; }
.reservationinfo .tableresarrived:hover { cursor: pointer; background-color: #444 }
.reservationinfo .tableresselected { padding:10px; border-bottom: solid 1px #666; border-top: solid 1px #666; margin-top:-1px; color: #fff; background: #49cc4d; }
.reservationinfo .tableresselectedarrived { padding:10px; border-bottom: solid 1px #666; border-top: solid 1px #666; margin-top:-1px; color: #fff; background: #49cc4d url(/images/base/person.png) no-repeat; background-position:right; }
.reservationinfo h2 { margin-top:0px; }
.tableinfo { float:left; width:826px; margin-right:60px; min-width:826px; }
.tables { position: relative; float: left; width:calc(100% - 374px); background: #222 url(/images/pos/grid.png); background-size:3.7%; margin-top:0px; margin-bottom:40px; border-right: solid 1px #444; border-bottom: solid 1px #444; }
.tablerectangle { border: solid 2px #777; border-radius:8px; position: absolute; background: #000; pointer-events: all; text-align:center; font-size:1.0em; font-weight:normal; color: #fff; white-space:normal; }
.tablerectangleselected { border: solid 2px #fff; border-radius:8px; position: absolute; background: #000; pointer-events: all; text-align:center; font-size:1.0em; font-weight:normal; color: #fff; white-space:normal; }
.tablerectanglearrived { border: solid 2px #27872F; border-radius:8px; background: #27872F; position: absolute; pointer-events: all; text-align:center; font-size:1.0em; font-weight:normal; color: #fff; white-space:normal; }
.tablerectanglearrivedselected { border: solid 2px #fff; border-radius:8px; background: #27872F; position: absolute; pointer-events: all; text-align:center; font-size:1.0em; font-weight:normal; color: #fff; white-space:normal; }
.tablerectangleconfirmed { border: solid 2px #888; border-radius:8px; background: #888; position: absolute; pointer-events: all; text-align:center; font-size:1.0em; font-weight:normal; color: #fff; white-space:normal; }
.tablerectangleconfirmedselected { border: solid 2px #fff; border-radius:8px; background: #888; position: absolute; pointer-events: all; text-align:center; font-size:1.0em; font-weight:normal; color: #fff; white-space:normal; }
.tablerectanglerequested { border: solid 2px #888; border-radius:8px; background: #888; position: absolute; pointer-events: all; text-align:center; font-size:1.0em; font-weight:normal; color: #fff; white-space:normal; }
.tablerectanglerequestedselected { border: solid 2px #fff; border-radius:8px; background: #888; position: absolute; pointer-events: all; text-align:center; font-size:1.0em; font-weight:normal; color: #fff; white-space:normal; }
.tables input:disabled { border: solid 2px #fff; opacity:1.0em; }
.tables input:hover { border: solid 2px #fff; cursor: pointer; }
.tablecircle { border: solid 2px #777; border-radius:8px; position: absolute; background: #000; pointer-events: all; text-align:center; font-size:1.0em; font-weight:normal; color: #fff; white-space: normal; }
.tablecircleselected { border: solid 2px #fff; border-radius:8px; position: absolute; background: #000; pointer-events: all; text-align:center; font-size:1.0em; font-weight:normal; color: #fff; white-space: normal; }
.tablecirclearrived { border: solid 2px #2ea038; border-radius:8px; position: absolute; background: #2ea038; pointer-events: all; text-align:center; font-size:1.0em; font-weight:normal; color: #fff; white-space: normal; }
.tablecirclearrivedselected { border: solid 2px #fff; border-radius:8px; position: absolute; background: #2ea038; pointer-events: all; text-align:center; font-size:1.0em; font-weight:normal; color: #fff; white-space: normal; }
.tablecircleconfirmed { border: solid 2px #888; border-radius:8px; position: absolute; background: #888; pointer-events: all; text-align:center; font-size:1.0em; font-weight:normal; color: #fff; white-space: normal; }
.tablecircleconfirmedselected { border: solid 2px #fff; border-radius:8px; position: absolute; background: #888; pointer-events: all; text-align:center; font-size:1.0em; font-weight:normal; color: #fff; white-space: normal; }
.tablecirclerequestedselected { border: solid 2px #fff; border-radius:8px; position: absolute; background: #888; pointer-events: all; text-align:center; font-size:1.0em; font-weight:normal; color: #fff; white-space: normal; }
.tablereservations { float:left; padding: 19px; background: #222; width: 320px; border: solid 2px #fff; border-radius:6px; margin-top:0px; margin-top:0px; margin-right:30px; height:366px; text-align:center; }
.tablecirclerequested { border: solid 2px #888; border-radius:8px; position: absolute; background: #888; pointer-events: all; text-align:center; font-size:1.0em; font-weight:normal; color: #fff; white-space: normal; }
.tablereservations h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; margin-bottom:15px; }
.tablereservations .time { font-size:1.2em; margin-bottom:15px; }
.tablereservations .status { margin-bottom:8px; font-size:1.3em; color: #aaa; }
.tablereservations .status .booked { color: #3bcc49; }
.tablereservations .telephone { font-size:1.2em; color: #ccc; margin-bottom:20px; }
.tablereservations .balance { font-size:1.4em; color: #fff; margin-bottom:20px; }
.tablereservations .button { padding:10px 25px; float:left; width:150px; }
.tablereservations .button:disabled { background: #000; opacity:0.2; color: #fff; border-color: #666; }
.tablereservations .cancelmovetable .button { border-color: #fd9409; }
.tablereservations .cancelmovetable .button:hover { background: #fd9409; }
/* Book Table */
.booktablebg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:5000; }
.booktable { width: 300px; height: 480px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-173px; margin-top:-263px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.booktable h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; margin-bottom:30px; color: #fff; }
.booktable .date { text-align:center; font-size:1.2em; margin-bottom:10px; }
.booktable .time { text-align: center; color: #aaa; font-size:1.0em; margin-bottom:20px; }
.booktable .clear { border-bottom:none; }
.booktable .buttons { position: absolute; bottom:0px; left:50%; margin-left:-125px;}
.booktable .button { float: left; position: relative; }
.booktable .item { float: left; padding-top:7px; font-size:1.2em; width:100px; }
.booktable .value { float:left; width:calc(100% - 110px); margin-bottom:16px; padding-bottom:0px; border-bottom: solid 0px #fff; }
.booktable .value .input { font-size:1.2em; background: #fff; padding: 5px; border: solid 2px #aaa; border-radius:5px; max-width:100%; }
/* Walk-In */
.walkinbg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:5000; }
.walkin { width: 410px; height: 480px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-233px; margin-top:-263px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.walkin h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; margin-bottom:30px; color: #fff; }
.walkin .date { text-align:center; font-size:1.2em; margin-bottom:10px; }
.walkin .time { text-align: center; color: #aaa; font-size:1.0em; margin-bottom:20px; }
.walkin .clear { border-bottom:none; }
.walkin .buttons { position: absolute; bottom:0px; left:20px;}
.walkin .button { float: left; position: relative; }
.walkin .item { float: left; padding-top:7px; font-size:1.2em; width:130px; }
.walkin .resetbutton { float:left; width:124px; }
.walkin .value { float:left; width:calc(100% - 150px); margin-bottom:16px; padding-bottom:0px; border-bottom: solid 0px #fff; }
.walkin .value .input { font-size:1.2em; background: #fff; padding: 5px; border: solid 2px #aaa; border-radius:5px; max-width:100%; }
/* Add printer */
.printerbg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:5000; }
.printer { width: 300px; height: 560px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-173px; margin-top:-303px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.printer h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; margin-bottom:30px; color: #fff; }
.printer .buttons { position: absolute; bottom:0px; left:50%; margin-left:-125px;}
.printer .button { float: left; position: relative; }
.printer .item { float: left; padding-top:10px; font-size:1.2em; width:100px; }
.printer .clear { margin-bottom:0px; padding-bottom:0px; }
.printer .value { float:left; width:calc(100% - 120px); margin-bottom:15px; padding-bottom:15px; }
.printer .value .input { font-size:1.2em; background: #fff; padding: 5px; border: solid 2px #aaa; border-radius:5px; max-width:165px; }
.printerunknown { width:16px; height:16px; background: #666; margin-left:10px; border-radius:8px; }
.printerworking { width:16px; height:16px; background: #75d86c; margin-left:10px; border-radius:8px; }
.printerproblem { width:16px; height:16px; background: #ffa500; margin-left:10px; border-radius:8px; }
/* Select printer */
.selectprinterbg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:5000; }
.selectprinter { width: 300px; height: 500px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-173px; margin-top:-273px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.selectprinter h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; margin-bottom:30px; color: #fff; }
.selectprinter .buttons { position: absolute; bottom:0px; left:50%; margin-left:-125px;}
.selectprinter .button { float: left; position: relative; }
.selectprinter .select { float: left; width:50px; }
.selectprinter .list .clear { margin-bottom:6px; padding-bottom:6px; border-bottom: solid 1px #444; }
.selectprinter .textselect { float:left; width: calc(100% - 70px); font-size:1.3em; color: #fff; padding-top:10px; }
.selectprinter .select input { width:2.5em; height:2.5em; }
.selectprinter .item { float: left; padding-top:7px; font-size:1.2em; width:100px; }
.selectprinter .value { float:left; width:calc(100% - 120px); margin-bottom:10px; }
.selectprinter .value .input { font-size:1.4em; background: #fff; padding: 5px; border: solid 2px #aaa; border-radius:5px; max-width:100%; }
/* Payment Methods */
.paymentmethodavailable { width:16px; height:16px; background: #75d86c; margin-left:10px; border-radius:8px; }
.paymentmethodunavailable { width:16px; height:16px; background: #666; margin-left:10px; border-radius:8px; }
/* Deposits */
.depositpaid { width:16px; height:16px; background: #75d86c; margin-left:10px; border-radius:8px; }
.depositused { width:16px; height:16px; background: #666; margin-left:10px; border-radius:8px; }
.depositrefunded { width:16px; height:16px; background: #666; margin-left:10px; border-radius:8px; }
/* Set stock level */
.stocklevelbg { width:100%; height:100%; position: fixed; top: 0; left: 0; background: url(/images/pos/detailsbg.png); z-index:5000; }
.stocklevel { width: 300px; height: 240px; padding:20px; position: relative; left: 50%; top: 50%; margin-left:-173px; margin-top:-143px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.stocklevel h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; margin-bottom:30px; color: #fff; line-height:1.4em; height:40px; }
.stocklevel .buttons { position: absolute; bottom:0px; left:50%; margin-left:-125px; border:0; }
.stocklevel .button { float: left; position: relative; }
.stocklevel .value { text-align:center; margin-top:40px; border-bottom:none; margin-left:5px; }
.stocklevel .value .input { font-size:1.4em; background: #fff; padding: 5px; border: solid 2px #aaa; border-radius:5px; max-width:100%; }
/* Reports */
#chart { width:100%; }
.columnchart { width: 600px; height:400px; position: relative; background:#000; margin-top:40px; }
.columnchart .xaxis { left:50px; width:calc(100% - 50px); background: #fff; height:1px; position: absolute; bottom:50px; }
.columnchart .yaxis { left:50px; width:1px; height:calc(100% - 50px); position: absolute; bottom:50px; background: #fff; }
.columnchart .ybar { left:50px; width:calc(100% - 50px); background: #555; height:1px; position: absolute; }
.columnchart .ylabel { left:0px; position: absolute; width:45px; text-align:right; color: #fff; margin-bottom:-10px; }
.columnchart .xlabel { color: #fff; position: absolute; top:calc(100% - 45px); text-align:center; margin-left:5px; }
.columnchart .bar { background: #aa0000; position: absolute; bottom:50px; margin-left:10px; }
.columnchart .subtotal { color: #fff; position: absolute; bottom:50px; text-align:center; }
@media only screen and (max-width: 1400px)
{
.home .centre { width:calc(100% - 670px); }
.home .centreright { display:none; }
}
@media only screen and (max-width: 1200px)
{
.home .left { width:140px; }
.home .centre { width:calc(100% - 530px); }
.home .centre .spacer { display:none; }
}
@media only screen and (max-width: 900px)
{
form { position: relative; height:auto; }
.zreading { left:-10px; top:-10px; width:calc(100% - 35px); }
.home { position: relative; height:auto; }
.home .ordercontrols { position: relative; bottom:0px; width:100%; background:none; }
.home .ordercontrols .button { float:left; width: 115px; padding: 12px 0px; margin-left:10px; margin-bottom:10px; color: #fff; background: #000; border: solid 3px #FFFB14; border-radius:10px; margin-bottom:10px; opacity:1.0; font-size:1.4em; }
.controlpanel { position: relative; margin-top:50px;}
.currentuser { }
.home .top { height:auto; min-height:0px; }
.home .left { float:none; width:100%; padding-top:20px; margin-right:0px; margin-left:-10px; border-top: solid 1px #666; }
.home .left .button { margin-right:0px; margin-left:10px; }
.home .left .selectedbutton { margin-right:0px; margin-left:10px; }
.home .centre { float:none; margin-right:0px; margin-left:-10px; width:100%; margin-top:20px; border-top: solid 1px #666; border-bottom: solid 1px #666; padding-top:20px; margin-bottom:20px; border-bottom: solid 1px #666; padding-bottom:10px; }
.home .centre .spacer { display:none; }
.home .centre .button { margin-right:0px; margin-left:10px; }
.home .right { float:none; width:calc(100% - 54px); margin-bottom:20px; min-height:auto; }
.home .right .orderitems { max-height:1000px; }
.home .right .buttons { margin-top:20px; }
.controlpanel { height:auto; overflow:visible; }
.controlpanel .button { width: 140px; }
.controlpanel .exitbutton { width: 140px; }
.signin { margin-top:20px; margin-left:0px; width:300px; height:auto; left:50%; margin-left:-160px; padding:20px 0px; position: relative; }
.paymentmethods { width: calc(100% - 75px); margin-left:calc(15px - 50%); }
.change { width: calc(100% - 75px); margin-left:calc(15px - 50%); }
.change .resetbutton { width: 100px; }
.change .button { width: 140px; }
.orders { position: relative; height:auto; }
.orders .hide { display:none; }
.orders .value { font-size:1.4em; margin-bottom:20px; padding-bottom:20px; border-bottom: solid 1px #666; width:calc(100% - 20px); max-width:520px; }
.orders .textinput { padding: 4px 10px; border: solid 1px #fff; border-radius:3px; font-size:1.2em; color: #222; max-width:calc(100% - 20px); }
.tablereservations { float:none; width:calc(100% - 56px); margin-right:0px; }
.tables { float:none; width:calc(100% - 20px); margin-top:30px; }
/* Till */
.tillbg { position: absolute; }
.till { width: calc(100% - 64px); height: auto; padding:20px; position: relative; left: 0px; top: 0px; margin-left:0px; margin-top:0px; background: #000; border: solid 2px #fff; border-radius:10px; z-index:5000; }
.till .buttons .numbers { float: left; width:auto; }
.till .buttons .exact { float:left; width:auto; }
.till .buttons .methods { clear:both; height:0px; float:left; width:100%; height:auto; }
.till .button { float:left; margin-left:10px; margin-bottom:10px; font-size:1.5em; padding: 18px 0px; width:63px; border: solid 2px #49cc4d; border-radius: 10px; color: #fff; background: #333; }
.till .options { margin-left:-10px; position:relative; margin-top: 20px; width: 100%; }
.till .options .rightbutton { float: left; }
.till .resetbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.5em; padding: 18px 0px; width:63px; border: solid 2px #aaa; border-radius: 10px; color: #fff; background: #333; }
.till .amountbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.5em; padding: 18px 0px; width:63px; border: solid 2px #4ca5ff; border-radius: 10px; color: #fff; background: #333; }
.till .pmbutton { float:left; margin-left:10px; margin-bottom:10px; font-size:1.2em; padding: 0px; width:100px; height:68px; border: solid 2px #ffa500; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
/* Tab */
.tabbg { position: absolute; }
.tab { width: calc(100% - 64px); height: auto; padding:20px; position: relative; left: 0px; top: 0px; margin-left:0px; margin-top:0px; background: #000; border: solid 2px #fff; border-radius:10px; z-index:5000; }
.tab .options { margin-left:-10px; position:relative; margin-top: 40px; width: calc(100% + 40px); }
.tab .resetbutton { float:left; margin-left:10px; width:120px; margin-bottom:10px; font-size:1.4em; padding: 5px 0px; height:60px; border: solid 3px #fd9409; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.tab .button { float:left; margin-right:10px; width:120px; margin-bottom:10px; font-size:1.4em; padding: 5px 10px; height:60px; border: solid 3px #49cc4d; border-radius: 10px; color: #fff; background: #333; white-space:normal; }
.tab .selectedbutton { float:left; margin-right:10px; width:120px; margin-bottom:10px; font-size:1.4em; padding: 5px 10px; height:60px; border: solid 3px #49cc4d; border-radius: 10px; color: #fff; background: #49cc4d; white-space:normal; }
.tab .options .button { float: right; margin-right:30px; width:120px; }
/* Notes */
.notesbg { position: absolute; }
.notes { width: calc(100% - 64px); height: auto; padding:20px; position: relative; left: 0px; top: 0px; margin-left:0px; margin-top:0px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.notes .options { margin-left:-10px; position:relative; margin-top: 60px; width: calc(100% + 20px); }
/* Offers */
.offersbg { position: absolute; }
.offers { width: calc(100% - 64px); height: auto; padding:20px; position: relative; left: 0px; top: 0px; margin-left:0px; margin-top:0px; background: #000; border: solid 3px #fff; border-radius:20px; z-index:5000; }
.offers h2 { margin-top:0px; font-weight:normal; font-size:1.6em; text-align:center; color: #fff; }
.offers .options { margin-left:-10px; position:relative; margin-top: 30px; width: calc(100% + 40px); }
.offers .options .button { float: right; width:120px; }
.offers .options .resetbutton { float: left; margin-right:30px; width:120px; }
.main { margin-bottom:50px; }
.currentuser { bottom:13px; position: fixed; color: #fff; font-size:1.2em; width:calc(100% - 20px); padding: 7px 10px; background: #444; margin-left:-13px; bottom:0; height:auto; }
.currentuser .printerstatus { position: relative; left:50%; text-align:center; margin-bottom:10px; margin-top:10px; }
.currentuser .printerstatus .status { float:left; margin-right:0px; }
.currentuser .userdetails { position: relative; left:0px; top:8px; text-align:center; }
}