@CHARSET "UTF-8"; /* Copyright Droggitis IT Systems */ :root, :root.theeme_normal { --bgcolor: #000080; --textcolor: #000080; --inputborder: none; --PopUpWColor : #000080; --PopUpWBgColor : #F0F0F0; --PopUpWLabelColor : #003366; --PopUpWInputBorderWidth : 1px; --PopUpWInputBorderColor : #003366; --PopUpWInputBgColor : #F8F8F8; --PopUpWInputColor : #000080; --GridDivBackBgColor : #E8E8E8; --GridDivBgColor : #E8E8E8; --GridDivColor : #000080; --GridDivBorderColor : #d3d7cf; --POSDivBgColor : #E0E0E0; --POSOrderDivBgColor : #404040; --POSOrderDivColor : #EBF5FF; --PlanTblSelGbColor : #edd400; --PlanTblStage1BrdColor : green; --PlanTblStage2BrdColor : red; } :root.theeme_highcontrast { --bgcolor: #000080; --textcolor: black; --inputborder: black; --PopUpWColor : black; --PopUpWBgColor : #F0F0F0; --PopUpWLabelColor : black; --PopUpWInputBorderWidth : 2px; --PopUpWInputBorderColor : black; --PopUpWInputBgColor : white; --PopUpWInputColor : black; --GridDivBackBgColor : white; --GridDivBgColor : white; --GridDivColor : black; --GridDivBorderColor : black; --POSDivBgColor : white; --POSOrderDivBgColor : white; --POSOrderDivColor :black; --PlanTblSelGbColor : blue; --PlanTblStage1BrdColor : black; --PlanTblStage2BrdColor : black; } * { -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */ } body { -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */ -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */ -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */ background-color:var(--bgcolor); background:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); background:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); background:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); background:-webkit-gradient( linear,left top, left bottom, color-stop(0, #A7A7A7), color-stop(0.51, #E4E4E4) ); background-attachment:fixed; font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif; font-size:12px; height:100%; margin:0px; padding:0px; /*text-transform:uppercase;*/ width:100%; } input{border: var(--inputborder);} textarea{ resize:none; outline: none;} fieldset { border: 0; } label { display: block; margin: 30px 0 0 0; } .overflow { height: 200px; } h6{font-family: arial, verdana, helvetica, sans-serif; font-size: 16px; padding:0px; margin:0px; color: red; overflow:hidden; font-weight:bold;} h4{font-family: arial, verdana, helvetica, sans-serif; font-size: 12px; padding:0px; margin:0px; color: red; overflow:hidden; font-weight:bold;} h2{font-family: arial, verdana, helvetica, sans-serif; font-size: 8px; padding:0px; margin:0px; color: black; overflow:hidden; font-weight:bold;} h3{font-family: arial, verdana, helvetica, sans-serif; font-size: 10px; padding:0px; margin:0px; color: black; overflow:hidden; font-weight:bold;} .OtherText{position:absolute; top:0px; left:0px; right:0px; height:20px; font-family: arial, verdana, helvetica, sans-serif; font-size: 12px; padding:0px; margin:0px; color: blue; overflow:hidden; font-weight:bold;} @font-face {font-family: DigitalFont; src: url(../js/sa-digital-number.ttf); } #OuterAppArea{position:absolute; top:0px; left:0px; right:0px; bottom:0px; overflow:hidden; background-color:gray; min-width:600px; min-height:600px;} #AppArea{position:absolute; top:5px; left:5px; right:5px; bottom:5px; overflow:hidden; background-color:white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .MainPrgdiv{position:absolute; top:0px; left:0px; right:0px; bottom:0px; background-color:white; overflow:hidden;font-size:10px; z-index:5;} .TextDiv8{position:absolute; top:0px; left:0px; font-family: arial, verdana, helvetica, sans-serif; font-size: 8px; color:#6D6968; padding:0px; margin:0px; color: black; overflow:hidden; font-weight:bold;} .TextDiv10{position:absolute; top:0px; left:0px; font-family: arial, verdana, helvetica, sans-serif; font-size: 10px; color:#6D6968; padding:0px; margin:0px; color: black; overflow:hidden; font-weight:bold;} /* =============== TOP SCREEN STUFF =========================================================== */ #TopArea{position:absolute; top:0px; left:0px; height:60px; right:0px; background-color:gray; display:block; color:white; overflow:hidden; font-size: 10px; background: #efefef; background: linear-gradient(top, #0066FF 5%, #000099 70%); background: -moz-linear-gradient(top, #0066FF 5%, #000099 70%); background: -webkit-linear-gradient(top, #0066FF 5%,#000099 70%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15);} /* #TopArea{position:absolute; top:0px; left:0px; height:60px; right:0px; background-color:gray; display:block; color:white; overflow:hidden; font-size: 10px; background: #efefef; background: linear-gradient(top, #0099FF 0%, #4169E1 70%); background: -moz-linear-gradient(top, #0099FF 0%, #4169E1 70%); background: -webkit-linear-gradient(top, #0099FF 0%,#4169E1 70%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15);} */ .menuIcon{position:fixed; top:5px; left:5px; width:50px; height:50px; display:block; overflow:hidden; border:none; float:left; background:url(../img/menu_icon.png) no-repeat 0 0; } #Logo{position:fixed; top:15px; left:60px; height:40px; width:350px; float:left; background:url(../img/AppLogoTop.png) no-repeat 0 0;} #JobName{position:absolute; bottom:8px; left:420px; height:20px; width:400px; color:white; font-size:20px; text-align:left; font-style:italic;} .loginIcon{position:fixed; top:5px; right:15px; width:50px; height:50px; display:block; overflow:hidden; border:none; float:left; background:url(../img/loginicon.png) no-repeat 0 0; } .loginUserName{position:fixed; top:20px; right:70px; width:100px; height:26px; display:block; overflow:hidden; border:none; float:left; font-size:20px; color:white; text-align: right;} .MenuContainer{position:absolute; top:0px; left:5px; width:350px; height:530px; z-index:9999; display:none; background-color:#4169E1; float:left; padding: 2px; margin:2px; overflow-x:hidden; overflow-y:auto; border-width: 1px; border-style: solid; border-color: #000080 ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .MenuItem{display:block; position:relative; left:0px; right:0px; height:80px; background:url(../img/menu_menu.png); background-size: 70px 70px; background-repeat: no-repeat; background-position: 5px center; background-color:#eeeeec; padding: 2px; margin: 2px; border-width: 1px; border-style: solid; border-color: #D8D8D8; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .MenuItem:hover{left:1px; } .MenuItemStr{position:absolute; bottom:10px; left:95px; font-family: arial; font-size: 36px; color:#0033cc; font-weight:bold;} .MenuItem_Sales{ background:url(../img/menu_sales.png); background-color:#eeeeec; background-size: 70px 70px; background-repeat:no-repeat; background-position: 5px center; } .MenuItem_Items{ background:url(../img/menu_items.png); background-color:#eeeeec; background-size: 70px 70px; background-repeat:no-repeat; background-position: 5px center; } .MenuItem_Customers{ background:url(../img/menu_customers.png);background-color:#eeeeec; background-size:70px 70px; background-repeat:no-repeat; background-position: 5px center; } .MenuItem_Reports{ background:url(../img/menu_reports.png) ; background-color:#eeeeec; background-size:70px 70px; background-repeat:no-repeat; background-position: 5px center; } .MenuItem_Config{ background:url(../img/menu_config.png); background-color:#eeeeec; background-size:70px 70px; background-repeat:no-repeat; background-position: 5px center; } .MenuItem_About{ background:url(../img/menu_about.png); background-color:#eeeeec; background-size:70px 70px; background-repeat:no-repeat; background-position: 5px center; } .subMenuItem{position:relative; display:block; width:250px; height:90px; float:left; background:url(../img/menu_menu.png); background-size: 50px; background-repeat: no-repeat; background-position: 5px 5px; background-color:#eeeeec; padding: 2px; margin:2px; border-width: 1px; border-style: solid; border-color: #D8D8D8; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .subMenuItem:hover{border-color: blue; -moz-box-shadow: 2px 2px 2px 0px blue; -webkit-box-shadow: 2px 2px 2px 0px blue; box-shadow: 2px 2px 2px 0px blue;} .subMenuItemStr{position:absolute; top:5px; left: 60px; right:5px; font:Arial; font-size:20px; color:#0033cc ;font-weight:bold;} /* =============== MAIN SCREEN STUFF =========================================================== */ #MainArea{position:absolute; top:60px; left:0px; bottom: 0px; right:0px; display:block; color:blue; overflow:hidden; font-size: 1px; background-color: #DCDCDC; } .MainPrgdiv{position:absolute; top:0px; left:0px; right:0px; bottom:0px; background:url(../img/RSystemLogo.png); background-size: 489px 276px; background-repeat: no-repeat; background-position: center center; background-color: #DCDCDC; overflow:hidden; font-size: 10px;z-index:2;} /* .MainPrgSubdiv{position:absolute; top:0px; left:0px; right:0px; bottom:0px; background-color: #DCDCDC; overflow:hidden; font-size: 10px;z-index:3;} */ .GraphTopControls{position:absolute; top:0px; left:0px; height:60px; right:0px; background-color:#3377ff ; display:block; color:white; overflow:hidden; font-size: 10px; box-shadow: 0px 0px 9px rgba(0,0,0,0.15);} .planBtn{position:absolute; top:5px; width:50px; height:50px; display:block; overflow:hidden; border:none;} .planBtn:hover{border:0px #6666FF solid; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color:#4da6ff;} /* .planBtn:hover{border:2px #6666FF solid; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color:yellow;} */ .BtnRefresh{right:50px; background-image:url(../img/refresh.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnSave{right:120px; background-image:url(../img/save.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnUpload{right:200px; background:url(../img/upload.png) no-repeat 0 0;} .BtnDownload{left:280px; background-image:url(../img/download.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnCloudUp{left:700px; background-image:url(../img/cloudup.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnCloudDown{left:700px; background-image:url(../img/clouddown.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} /* background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; */ .BtnAdd{left:10px; background:url(../img/add.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnEdit{left:80px; background:url(../img/edit.png) ; background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnDelete{left:150px; background:url(../img/delete.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnCarbonCopy{left:220px; background:url(../img/carboncopy.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPause{left:630px; background:url(../img/pause.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPlay{left:700px; background:url(../img/play.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnFixPrices{left:700px; background:url(../img/changeprice.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnDataImport{left:10px; background:url(../img/dataimport.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnAddMany{left:220px; background:url(../img/add_many.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnTable{left:220px; background:url(../img/table.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnStand{left:220px; background:url(../img/stand.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnSunbed{left:220px; background:url(../img/sunbed.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnSearch{left:160px; background:url(../img/search.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnSelectAll{left:170px; background:url(../img/selectall.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnSelectNone{left:240px; background:url(../img/selectnone.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnLink{left:310px; background:url(../img/link.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnUnlink{left:380px; background:url(../img/unlink.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnRemove{left:920px; background:url(../img/remove.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnCatremove{left:980px; background:url(../img/catremove.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnReceipt{left:70px; background:url(../img/receipt.png) ; background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPayment{left:130px; background:url(../img/payment.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPrint{left:200px; background:url(../img/print.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnNoTblAcc{left:260px; background:url(../img/person.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnMoveTbl{left:320px; background:url(../img/movetbl.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnNote{left:390px; background:url(../img/note.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnReceiptAll{left:450px; background:url(../img/allreceipt.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPayall{left:510px; background:url(../img/allpayment.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnSend{left:570px; background:url(../img/send.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnChangeWaiter{left:570px; background:url(../img/changewaiter.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPerson{left:630px; background:url(../img/customers.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnStats{left:630px; background:url(../img/stats.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnStop{left:200px; background:url(../img/stop.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnNoTblAccount{left:260px; background:url(../img/person.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnCustomer{left:240px; background:url(../img/customers.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnSplit{left:240px; background:url(../img/split.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPayCash{right:450px; background:url(../img/cash.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPayCard{right:250px; background:url(../img/card.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPayCredit{right:350px; background:url(../img/credit.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPayAccAll{right:450px; background:url(../img/accall.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPayAccIssued{right:250px; background:url(../img/accissued.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPayAccOrdered{right:350px; background:url(../img/accordered.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPhonePicked{left:240px; background:url(../img/phonepicked.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPhoneList{left:310px; background:url(../img/phonelist.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPhoneLast{left:380px; background:url(../img/phonelast.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnHistoryReport{left:810px; background:url(../img/receipt.png) ; background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnMainPricesToAll{right:450px; background:url(../img/accall.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnKeybInput{left:250px; background:url(../img/accordered.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnFix{left:240px; background:url(../img/fix.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnNum140px{left:160px; background:url(../img/num1.png); background-size:40px 40px;background-repeat:no-repeat;background-position: center center;} /*----------- record pages --------------------------*/ .planBtn40{position:absolute; top:10px; width:30px; height:40px; display:block; overflow:hidden; border:none;} .planBtn40:hover{border:0px #6666FF solid; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color:#4da6ff;} .GraphTopControlsRecordPgdiv{position:absolute; top:0px; bottom:0px; right:140px; width:250px; font-size: 12px; color: var(--PopUpWInputBgColor); text-align:center; padding: 0px 0px 0px 0px; margin:0px; } .BtnGotoFirst{right:120px; background:url(../img/gotofirst.png); background-size:30px 40px;background-repeat:no-repeat;background-position: center center;} .BtnGotoPrev{right:90px; background:url(../img/gotoprev.png); background-size:30px 40px;background-repeat:no-repeat;background-position: center center;} .BtnGotoNext{right:30px; background:url(../img/gotonext.png); background-size:30px 40px;background-repeat:no-repeat;background-position: center center;} .BtnGotoLast{right:0px; background:url(../img/gotolast.png); background-size:30px 40px;background-repeat:no-repeat;background-position: center center;} .planBtn4040{position:absolute; top:10px; width:40px; height:40px; display:block; overflow:hidden; border:none;} .Btn40pxNum1{left:220px; background:url(../img/num1.png); background-size:40px 40px;background-repeat:no-repeat;background-position: center center;} .Btn40pxNum2{left:265px; background:url(../img/num2.png); background-size:40px 40px;background-repeat:no-repeat;background-position: center center;} .Btn40pxNum5{left:310px; background:url(../img/num5.png); background-size:40px 40px;background-repeat:no-repeat;background-position: center center;} .GraphTopControlsRecordPgInput{position:absolute; top:0px; right:60px; width:30px; bottom:0px; font-size: 12px; color: var(--PopUpWInputBgColor); text-align:center; padding: 4px 1px 4px 1px; margin:0px; } .GraphTopControlsRecordPgTitle{position:absolute; top:5px; left:0px; width:30px; height:15px; font-size: 10px; color: white; text-align:center; padding: 1px; margin:0px; } .GraphTopControlsRecordPgInput input{position:absolute; top:21px; left:0px; width:30px; height:20px; font-size:12px; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} /*----------- record pages END --------------------------*/ .BtnAlerts{left:50px; background:url(../img/alerts.png) no-repeat 0 0;} .BtnSensors{left:130px; background:url(../img/sensor.png) no-repeat 0 0;} .BtnMimic{left:210px; background:url(../img/mimics.png) no-repeat 0 0;} .BtnGeneral{left:290px; background:url(../img/config.png) no-repeat 0 0;} .GraphTopControlsInput{position:absolute; top:10px; left:0px; width:150px; height:30px; font-size: 20px; color: var(--PopUpWInputColor); text-align:center; padding: 5px 5px 5px 5px; margin:0px; background-color:#F8F8F8 ; border-width: 1px; border-style: solid; border-color: var(--PopUpWInputBorderColor) ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .GraphTopControlsInput input{width:100%; height:100%; font-size:20px; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .GraphTopControlsdiv{position:absolute; top:0px; bottom:0px; left:0px; width:150px; font-size: 20px; color: var(--PopUpWBgColor); text-align:center; padding: 0px 0px 0px 0px; margin:0px; } .GraphTopControlsSELECTBox{position:absolute; top:10px; left:100px; width:200px; height:24px; text-align:left; font-size: 18px; color: var(--PopUpWInputColor); padding: 5px 4px 5px 4px; margin:0px;} .GraphTopControlsSELECTBox SELECT{font-size: 18px; width:180px; color: var(--PopUpWInputColor); background-color:var(--PopUpWInputBgColor); ;} .GraphTopControlsSELECTBox140{position:absolute; top:10px; left:100px; width:140px; height:24px; text-align:left; font-size: 16px; color: var(--PopUpWInputColor); padding: 5px 4px 5px 4px; margin:0px;} .GraphTopControlsSELECTBox140 SELECT{font-size: 16px; width:140px; color: var(--PopUpWInputColor); background-color:var(--PopUpWInputBgColor); ;} .MainPlanSelect{position:absolute; top:15px; left:400px; width:120px; font-size:14px; border-width: 1px; border-style: solid; border-color: blue; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px ; } .MainPlanSelect SELECT{width:120px;} .GraphTopControlsHalfInput{position:absolute; top:10px; left:300px; width:120px; height:20px; font-size: 14px; color: var(--PopUpWInputBgColor); text-align:center; padding: 1px 1px 1px 1px; margin:0px; background-color:#F8F8F8 ; border-width: 1px; border-style: solid; border-color: var(--POSDivBgColor) ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .GraphTopControlsHalfInput input{width:100%; height:100%; font-size:14px; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .GraphTopControlsLabel{position:absolute; top:2px; left:100px; width:50px; height:20px; font-size: 12px; color: white; text-align:right;} .GridDiv{position:absolute; top:60px; left:0px; bottom:0px; right:0px; background-color:var(--GridDivBackBgColor); display:block; color:var(--GridDivColor); overflow:auto; font-size: 20px; box-shadow: 0px 0px 9px rgba(0,0,0,0.15);} .GridDivWhiteParerRoll{width:600px; height:100%; min-width: 600px;max-width: 600px; display:block; background-color: white; margin: 0 auto; } .GridDivTable{ display:table; font-family: Arial; width:100%; background-color:var(--GridDivBgColor) ; color:var(--GridDivColor); margin:0px; padding:0px; } .GridDivTabletr{display:table-row; overflow:hidden; font-size: 18px; color:var(--GridDivColor); padding:5px;} .GridDivTabletr:hover{color: #0000FF ; background-color:#E6E6E6;} .GGridDivTableth{display:table-cell; min-width:30px; max-width:250px; min-height:20px; overflow:hidden; max-height:50px; text-align:center; background-color:var(--GridDivColor) ; color:var(--GridDivBgColor); padding:4px 4px 4px 4px; font-size: 18px; border:1px #E8E8E8 solid; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;} .GridDivTabletd{display:table-cell; min-width:50px; max-width:250px; min-height:20px; overflow:hidden; max-height:50px; text-align:right; padding:4px 4px 4px 4px; font-size: 18px; border-bottom:1px var(--GridDivBorderColor) solid; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;} .GridDivTableInput{ font-family: Arial; font-size: 18px; text-align:center; width:100%; background-color:var(--PopUpWInputBgColor) ; color:var(--PopUpWInputColor); padding:4px 4px 4px 4px; } .GridDivTableColorBox{ width:25px; height:15px; background-color:var(--POSOrderDivColor) ; padding:5px 5px 5px 5px; border:1px black solid; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;} .GridDivTabletrSelected{ background-color:#aaccff ;} .CNFGENERAL_GridDivTableInput{ font-family: Arial; font-size: 18px; text-align:center; width:550px; background-color:var(--POSOrderDivColor) ; color:var(--POSOrderDivBgColor); padding:4px 4px 4px 4px; } .GridDivTabletr SELECT{font-size: 16px; width:120px; color: var(--PopUpWInputColor); background-color:var(--GridDivBgColor) ;} /* ------------------------------- SALES IN SCREEN ------------------------------------------*/ .GridDivRight{position:absolute; top:60px; right:0px; bottom:0px; width:200px; background-color:var(--GridDivBgColor); color: var(--PopUpWInputBgColor); overflow:hidden; font-size: 20px; box-shadow: 0px 0px 9px rgba(0,0,0,0.15);} .GridDivRightTitle{position:absolute; top:10px; left:5px; right:5px; height:12px; font-size:12px; color: #000080; text-align:center; } .GridDivRightBox{position:absolute; top:30px; left:5px; right:5px; bottom:20px; font-size: 12px; color: var(--PopUpWInputBgColor); text-align:center; padding:4px 2px 4px 2px; margin:0px; vertical-align: middle; background-color:#F8F8F8 ; overflow-x:hidden; overflow-y:auto; border-width: 1px; border-style: solid; border-color: var(--POSDivBgColor) ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .GridDivRightTotalsBox{position:absolute; top:90px; left:5px; right:5px; height:100px; color: white; background-color:#000080 ; font-family: DigitalFont; overflow:hidden; border-width: 1px; border-style: solid; border-color: var(--POSDivBgColor) ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .GridDivRightTotalsBoxTotalNum{position:absolute; top:10px; left:3px; right:3px; height:50px; text-align:center; font-size:34px; font-weight:bold;} .GridDivRightTotalsBoxTotalBeginTime{position:absolute; top:70px; left:5px; width:75px; height:16px; text-align:left; font-size:14px;} .GridDivRightTotalsBoxTotalBalance{position:absolute; top:70px; right:10px; width:100px; height:16px; text-align:right; font-size:14px; } /* ------------------------------- TABLE ICONS ------------------------------------------*/ .planTbl{position:absolute; display:block; top:5px; left:10px; width:50px; height:50px; color:blue; font-size: 10px; overflow:hidden; border:none; background-image:url(../img/table.png); background-size:50px 50px;background-repeat:no-repeat; background-position: top center;} .planTbl a{position:absolute; bottom:0px; right:1px; background-color:#ffffffaa; color:#000080; font-size: 15px; font-weight:bold; text-align:right; } .planTblSelected{background-color:var(--PlanTblSelGbColor); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;} .planTblSelected a{ background-color:var(--PlanTblSelGbColor); } /* .planTblStage1{border:3px green solid; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;} .planTblStage2{border:3px red solid; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;} */ .planTblStage1{ border-width: 3px ; border-style: solid; border-color: var(--PlanTblStage1BrdColor); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;} .planTblStage2{ border-width: 3px ; border-style: solid; border-color: var(--PlanTblStage2BrdColor); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;} .planTblstatsdata{position:absolute; min-width:20px; top:0px; left:0px; background-color:#ffffff; color:#000080; font-size: 12px; font-weight:bold; text-align:right; } /* ------------------------------- POS NEW SCREEN ------------------------------------------*/ .POSDiv{position:absolute; top:0px; left:0px; right:0px; bottom:0px; display:block; display:none; background-color:#888a85; overflow:hidden;font-size: 10px;z-index:10;} .POSDivContents{position:absolute; top:0px; left:0px; right:0px; bottom:0px;} /* transparentgraybk.png background-color:#d3d7cf; */ .POSDivOverlap{position:absolute; top:0px; left:0px; right:0px; bottom:0px; display:block; display:none; background:url(../img/transparentgraybk.png); background-repeat:repeat; ; overflow:hidden;font-size: 10px;z-index:50; } .POSDivOverlapContents{position:absolute; top:65px; left:350px; width:360px; height:400px; background-color:#F0F0F0; z-index:51; border:2px #000080 solid; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} .POSDivLeftDiv{position:absolute; top:0px; bottom:62px; left:0px; right:255px; text-align:center; padding: 0px; margin:0px; } /* .POSDivLeftTopDiv{position:absolute; top:0px; height:350px; left:0px; right:0px; text-align:center; padding: 0px; margin:0px; } .POSDivLeftBottomDiv{position:absolute; top:355px; bottom:0px; left:0px; right:0px; text-align:center; padding: 0px; margin:0px; overflow-x:hidden; overflow-y:auto; background-color:var(--POSDivBgColor) ; border-width: 1px; border-style: solid; border-color: #888a85 ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} */ .POSDivLeftTopDiv{position:absolute; top:0px; height:40%; left:0px; right:0px; text-align:center; padding: 0px; margin:0px; } .POSDivLeftBottomDiv{position:absolute; top:40%; bottom:0px; left:0px; right:0px; text-align:center; padding: 0px; margin:2px 0px 0px 0px; overflow-x:hidden; overflow-y:auto; background-color:var(--POSDivBgColor) ; border-width: 2px; border-style: solid; border-color: #000080 ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .POSDivLeftDivWaiters{position:absolute; top:0px; bottom:0px; left:0px; width:200px; text-align:center; padding: 0px; margin:0px; overflow-x:hidden; overflow-y:auto; background-color:var(--POSDivBgColor) ; border-width: 2px; border-style: solid; border-color: #000080 ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .POSDivLeftDivGroups{position:absolute; top:0px; bottom:0px; left:205px; width:200px; text-align:center; padding: 0px; margin:0px; overflow-x:hidden; overflow-y:auto; background-color:var(--POSDivBgColor) ; border-width: 2px; border-style: solid; border-color: #000080 ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .POSDivLeftDivCategs{position:absolute; top:0px; bottom:0px; left:410px; right:0px; text-align:center; padding: 0px; margin:0px; overflow-x:hidden; overflow-y:auto; background-color:var(--POSDivBgColor) ; border-width: 2px; border-style: solid; border-color: #000080 ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .POSDivRightDiv{position:absolute; top:0px; bottom:62px; right:0px; width:250px; text-align:center; padding: 0px; margin:0px; } .POSDivRightDivTotal{position:absolute; top:10px; left:0px; height:100px; right:0px; text-align:center; padding: 0px; margin:0px; color: white; background-color:#000080 ; font-family: DigitalFont; overflow:hidden; border-width: 1px; border-style: solid; border-color: var(--POSDivBgColor) ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .POSDivRightDivTotalNum{position:absolute; top:20px; left:3px; right:3px; height:50px; text-align:center; font-size:34px; font-weight:bold;} .POSDivRightDivToPayTotalNum{position:absolute; top:10px; left:3px; right:3px; height:50px; text-align:center; font-size:34px; font-weight:bold;} .POSDivRightDivParastTotalNum{position:absolute; top:70px; left:10px; width:100px; height:16px; text-align:left; font-size:14px; } .POSDivRightDivSelParLinesTotalNum{position:absolute; top:70px; right:10px; width:100px; height:16px; text-align:right; font-size:14px; } .POSDivLeftDivCustName{position:absolute; top:120px; height:70px; left:0px; right:0px; padding: 0px; margin:0px; overflow:hidden; background-color:var(--POSDivBgColor) ; border-width: 2px; border-style: solid; border-color: #000080 ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .POSDivLeftDivCustName a{ margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 15px; color:#000080; font-weight:bold;} .POSDivLeftDivPricelists{position:absolute; top:200px; bottom:0px; left:0px; right:0px; text-align:center; padding: 0px; margin:0px; overflow-x:hidden; overflow-y:auto; background-color:var(--POSDivBgColor) ; border-width: 2px; border-style: solid; border-color: #000080 ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .POSDivRightDivOrderlines{position:absolute; top:120px; left:0px; right:0px; bottom:2px; text-align:center; padding: 3px; margin:0px; overflow-x:hidden; overflow-y:auto; background-color:var(--POSDivBgColor); border:1px #B0B0B0 solid; } .POSDivRightDivPayments{position:absolute; top:120px; left:0px; right:0px; bottom:2px; text-align:center; padding: 3px; margin:0px; overflow-x:hidden; overflow-y:auto; background-color:var(--POSDivBgColor); border:1px #B0B0B0 solid; } .POSDivLeftDivRemarksItemName{position:absolute; top:10px; left:5px;right:0px; height:50px; text-align:center; padding: 0px; margin:0px; overflow-x:hidden; overflow-y:auto; background-color:#000080 ; border-width: 2px; border-style: solid; border-color: #000080 ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .POSDivLeftDivRemarksItemName a{ margin:0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; color:white; font-weight:bold;} .POSDivBottomControls{position:absolute; bottom:0px; left:0px; height:60px; right:0px; background-color:#3377ff ; display:block; color:white; overflow:hidden; font-size: 10px; box-shadow: 0px 0px 9px rgba(0,0,0,0.15);} /* echo '
ΠΕΛΑΤΗΣ..
'; */ .POSDivBottomCustName{position:absolute; left:10px; top:5px; bottom: 5px; width:150px; font-color:white; } .POSDivBottomCustName a{ margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; font-color:white; color:white; font-weight:bold;} .BtnPOSok{right:30px; background:url(../img/posok.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPOScancel{right:110px; background:url(../img/poscancel.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnExtras{right:250px; background:url(../img/extras.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnQtyPlus{right:330px; background:url(../img/qtyplus.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnQtyMinus{right:390px; background:url(../img/qtyminus.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnTrash{right:460px; background:url(../img/trash.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPrintDeliveryNote{left:720px; background:url(../img/printdeliverynote.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnChangePrice{right:530px; background:url(../img/changeprice.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnChangeQty{right:600px; background:url(../img/changeqty.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnOrder{right:670px; background:url(../img/changeorder.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPricelist{right:740px; background:url(../img/pricelist.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnChCustomerBottom{right:810px; background:url(../img/customers.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnClockBottom{right:880px; background:url(../img/clock.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnPickedByWhom{right:950px; background:url(../img/whopicks.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnNotesBottom{right:1020px; background:url(../img/freetext.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnLastCustomerOrder{right:1090px; background:url(../img/lastcustomerorder.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnParGroup{right:1090px; background:url(../img/pargroup.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnFreetext{right:300px; background:url(../img/freetext.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .BtnRefactor{left:530px; background:url(../img/config.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} .POSDivItemBlock{display:block; position:relative; left:0px; right:0px; width:190px; height:60px; float:left; background-color:#eeeeec; padding: 2px; margin: 2px; overflow:hidden; border-width: 1px; border-style: solid; border-color: #D8D8D8; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .POSDivItemBlock:hover{border-color: #729fcf;} .POSDivItemBlock a{ margin:0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color:#000080; font-weight:bold;} .POSDivItemBlockPortions{position: absolute; bottom: 1px; right:1px; font-size: 14px; color:#0066ff; font-weight:bold;} .POSDivItemBlockIsForSaleNo{position: absolute; bottom: 1px; left:1px; width:26px; height:26px; background:url(../img/stop.png); background-size:26px 26px;background-repeat:no-repeat;background-position: center center;} /* .POSDivItemBlockIsForSaleNo{position: absolute; bottom: 1px; left:1px; width:30px; height:30px; border:2px red solid; background:red;} */ .POSDivItemBlock50{display:block; position:relative; left:0px; right:0px; width:190px; height:50px; float:left; background-color:#FAF0E6; padding: 2px; margin: 2px; border-width: 1px; border-style: solid; border-color: #D8D8D8; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .POSDivItemBlock50:hover{border-color: #729fcf;} .POSDivItemBlock50Selected{ background:#3399ff; border-color:#204a87; } .POSDivItemBlock50Selected a{font-size:14px; color: white;} .POSDivItemBlock50 a{ margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color:#000080; font-weight:bold;} .POSDivTable{ display:table; font-family: Arial; width:100%; background-color:var(--POSOrderDivColor) ; color:var(--POSOrderDivBgColor); margin:0px; padding:0px; } .POSDivTabletr{display:table-row; overflow:hidden; font-size: 14px; color:var(--POSOrderDivBgColor); padding:2px; min-height:80px;} .POSDivTabletr:hover{color: #0000FF ; background-color:#E6E6E6;} .POSDivTableth{display:table-cell; min-width:20px; max-width:250px; min-height:12px; overflow:hidden; max-height:30px; text-align:center; background-color:var(--POSOrderDivBgColor) ; color:var(--POSOrderDivColor); padding:2px; font-size: 12px; } .POSDivTabletd{display:table-cell; min-width:20px; max-width:250px; min-height:20px; max-height:60px; height:40px; overflow:hidden; text-align:right; padding:5px 2px 5px 2px; vertical-align: middle; font-size: 14px; margin:2px 0px 2px 0px; } .POSDivTabletrSelected{ background-color:#aaccff ;} .DETAILDivTable{ display:table; font-family: Arial; left:0px; right:0px; background-color:var(--POSOrderDivColor) ; color:var(--POSOrderDivBgColor); margin:0px; padding:0px; } .DETAILDivTabletr{display:table-row; overflow:hidden; color:#4e9a06; min-height:12px; background-color:var(--POSOrderDivColor) ;} .DETAILDivTabletrStage2{display:table-row; overflow:hidden; color:#ef2929; min-height:12px; background-color:var(--POSOrderDivColor) ;} .DETAILDivTabletrStage3{display:table-row; overflow:hidden; color:var(--POSOrderDivBgColor); min-height:12px; background-color:var(--POSOrderDivColor) ;} .DETAILDivTableth{display:table-cell; min-width:30px; max-width:100px; min-height:10px; overflow:hidden; max-height:30px; text-align:center; background-color:var(--POSOrderDivBgColor) ; color:var(--POSOrderDivColor); padding:2px 2px 2px 2px; margin:1px 1px 1px 1px; vertical-align: middle; font-size: 10px; } .DETAILDivTabletd{display:table-cell; min-width:30px; max-width:150px; min-height:10px; max-height:50px; overflow:hidden; text-align:right; padding:2px 2px 2px 2px; vertical-align: middle; font-size: 10px; margin:1px 1px 1px 1px; } /*---------------------- ISSUE PARASTATIKO -------------------------------------------------*/ .POSDivOrderlinesGrid{position:absolute; top:0px; bottom:0px; left:205px; right:0px; text-align:center; padding: 0px; margin:2px 0px 0px 0px; overflow-x:hidden; overflow-y:auto; background-color:var(--POSDivBgColor) ; border-width: 2px; border-style: solid; border-color: #000080 ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .POSDivOrderlinesGridParast{display:block; position:relative; left:0px; right:0px; width:200px; height:60px; float:left; background-color:var(--POSOrderDivBgColor); color:var(--POSOrderDivColor); padding: 2px; margin: 2px; overflow:hidden; border-width: 1px; border-style: solid; border-color: #D8D8D8; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .POSDivOrderlinesGridParastSELECTED{display:block; color:white; background-color: #000080; } .POSDivOrderlinesGridOrder{display:block; position:relative; left:0px; right:0px; width:200px; height:60px; float:left; background-color:var(--POSOrderDivBgColor); color:var(--POSOrderDivColor); padding: 2px; margin: 2px; overflow:hidden; border-width: 1px; border-style: solid; border-color: #D8D8D8; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .POSDivOrderlinesGridOrderSelected{ color: white; background-color: #000080 ; border: 1px red solid; } .POSDivOrderlinesGridOrderWaiter{position: absolute;top:10px; left:5px; right:5px; text-align:center; font-size:16px;} .POSDivOrderlinesGridOrderTime{position: absolute; bottom:15px;left:5px; right:5px; text-align:center; font-size:12px;} .POSDivParastNumTime{position: absolute; top:5px; left:5px; right:5px; text-align:center; font-size:14px;font-weight:bold;} .POSDivParastValues{position: absolute; top:22px; left:5px; right:5px; text-align:center; font-size:16px; font-family: DigitalFont; } .POSDivParastWaiter{position: absolute; bottom:5px;left:5px; right:5px; text-align:center; font-size:12px;} /* .POSDivOrderlinesGridItem{overflow:hidden; vertical-align: middle; font-size: 14px; border:1px red solid;} */ .POSDivOrderlinesGridItem{display:block; position:relative; left:0px; right:0px; width:200px; height:60px; float:left; background-color:#eeeeec; padding: 2px; margin: 2px; overflow:hidden; border-width: 1px; border-style: solid; border-color: #D8D8D8; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .POSDivOrderlinesGridItemSelected{border-color:var(--PopUpWInputBgColor); -moz-box-shadow: 2px 2px 2px 0px #edd400; -webkit-box-shadow: 2px 2px 2px 0px #edd400; box-shadow: 2px 2px 2px 0px #edd400;} .POSDivOrderlinesGridItemDoNOTproceed{background-color:#babdb6; color:var(--POSDivBgColor); } /* background:url(../img/yes30.png); background-size:16px 16px; background-repeat:no-repeat;background-position: left top; .POSDivOrderlinesGridItemSelImg{position: absolute;left:5px; background:url(../img/yes30.png); background-size:30px 30px; background-repeat:no-repeat;background-position: center center;} */ .POSDivOrderlinesGridItemItemName{position: absolute; top:2px; left:5px; right:5px; height:16px; overflow:hidden; text-align:left; font-size:14px; font-weight:bold; font-stretch:ultra-condensed;} .POSDivOrderlinesGridRemarksDescr{position: absolute; top:20px; left: 5px; right:50px; bottom:2px; overflow:hidden; text-align:left; font-size:9px; font-stretch: ultra-condensed; } .POSDivOrderlinesGridItemQty{position: absolute; bottom:25px; right:3px; width:45px; text-align:right; font-size:11px; font-weight:bold; font-family: DigitalFont;} .POSDivOrderlinesGridItemPrice{position: absolute;bottom:2px; right:3px; width:45px; text-align:right; font-size:11px; font-weight:bold; font-family: DigitalFont; } /* .BtnSearch{left:160px; background:url(../img/search.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;} grid-auto-columns: 300px 100px; */ .BottomSelectionContainer{position:absolute; bottom:60px; right:700px; width:250px; height:200px; z-index:9999; background-color:#4169E1; float:left; padding: 2px; margin:2px; overflow-x:hidden; overflow-y:auto; border-width: 1px; border-style: solid; border-color: #000080 ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; display:none;} .BottomSelectionContainerBlock{display:block; position:relative; left:0px; right:0px; height:50px; min-width:240px; float:left; background-color:#eeeeec; padding: 2px; margin: 2px; overflow:hidden; border-width: 1px; border-style: solid; border-color: #D8D8D8; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .BottomSelectionContainerBlock:hover{border-color: #729fcf;} .BottomSelectionContainerBlock a{ margin:0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; color:#000080; font-weight:bold;} .TopSelectionContainer{position:absolute; top:60px; left:200px; width:300px; height:200px; z-index:9999; background-color:#4169E1; float:left; padding: 2px; margin:2px; overflow-x:hidden; overflow-y:auto; border-width: 1px; border-style: solid; border-color: #000080 ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; display:none;} .TopSelectionContainerBlock{display:block; position:relative; left:0px; right:0px; height:50px; min-width:280px; float:left; background-color:#eeeeec; padding: 2px; margin: 2px; overflow:hidden; border-width: 1px; border-style: solid; border-color: #D8D8D8; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .TopSelectionContainerBlock:hover{border-color: #729fcf;} .TopSelectionContainerBlock a{ margin:0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; color:#000080; font-weight:bold;} /*---------------------- DELIVERY -------------------------------------------------*/ .DeliveryAcc{display:block; position:relative; width:170px; height:250px; float:left; background-color:#f8f8f8; color:#555753; padding: 2px; margin: 2px; overflow:hidden; border-width: 1px; border-style: solid; border-color: #000080; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .DeliveryAccFuture{ border-width: 6px; border-style: solid; border-color: #000080; } .DeliveryPickedByCustomer{background-color:#00FF00;} .DeliveryAccTopIcons{position: absolute; top:2px; left:1px; right:1px; height:30px; overflow:hidden; text-align:center; font-size:12px; font-weight:bold; color:#2e3436;} .DeliveryAccIcon{position:absolute; top:2px; width:26px; height:26px; display:block; overflow:hidden; border:none;} .DeliveryAccIconCash{left:5px; background-image:url(../img/cash.png); background-size:26px 26px;background-repeat:no-repeat;background-position: center center;} .DeliveryAccIconCard{left:35px; background-image:url(../img/card.png); background-size:26px 26px;background-repeat:no-repeat;background-position: center center;} .DeliveryAccIconPayed{left:70px; background-image:url(../img/accall.png); background-size:26px 26px;background-repeat:no-repeat;background-position: center center;} .DeliveryAccIconIssued{left:105px; background-image:url(../img/receipt.png); background-size:26px 26px;background-repeat:no-repeat;background-position: center center;} .DeliveryAccIconParGroup{position: absolute; top:2px; left:140px; width:26px; color:white; background:blue; font-size:12px; font-weight:bold; text-align:center; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} .DeliveryAccName{position: absolute; top:32px; left:1px; right:1px; height:16px; overflow:hidden; text-align:left; font-size:12px; font-weight:bold; font-stretch:ultra-condensed; color:#2e3436;} .DeliveryAccNameYellow{background-color:#fce94f;} .DeliveryAccNameOrange{background-color:#fcaf3e;} .DeliveryAccNameRed{background-color:#ff5a5a;} .DeliveryAccAdress{position: absolute; top:49px; left:1px; right:1px; height:16px; overflow:hidden; text-align:left; font-size:12px; font-weight:bold; font-stretch:ultra-condensed; color:#555753;} .DeliveryAccArea{position: absolute; top:68px; left:1px; right:1px; height:16px; overflow:hidden; text-align:left; font-size:12px; font-weight:bold; font-stretch:ultra-condensed; color:#555753;} .DeliveryLine4{position: absolute; top:85px; left:1px; right:1px; height:16px; overflow:hidden; text-align:left; font-size:12px; font-weight:bold; font-stretch:ultra-condensed; color:#555753;} .DeliveryAccOLinesBox{position: absolute; top:100px; left:1px; right:1px; bottom:20px; overflow-x:hidden; overflow-y:auto; font-weight:normal; border-top: 1px gray solid; border-bottom: 1px gray solid;} .DeliveryAccOLinesBoxLine{position: relative;top:0px;left:0px; right:0px; height:13px; overflow:hidden; padding:1px;} .DeliveryAccOLinesQty{position: absolute; top:0px; left:1px; width:25px; overflow:hidden; text-align:center; font-size:10px; font-stretch:ultra-condensed; color:#555753;} .DeliveryAccOLinesItem{position: absolute; top:0px; left:30px; right:2px; overflow:hidden; text-align:left; font-size:10px; font-stretch:ultra-condensed; color:#555753;} .DeliveryAccTotalTitle{position: absolute; bottom:2px; left:5px; right:1px; height:16px; overflow:hidden; text-align:left; font-size:10px; font-weight:bold; } .DeliveryAccTimeFieldBotom{position: absolute; bottom:2px; left:5px; right:60px; height:16px; overflow:hidden; text-align:left; font-size:10px; font-weight:bold; } .DeliveryAccTotal{position: absolute; bottom:2px; left:60px; right:5px; height:16px; overflow:hidden; text-align:right; font-size:12px; font-weight:bold; font-family: DigitalFont; } /* .DeliveryAccOkToGo{background-color:#8ae234;} .DeliveryAccSelected{border-color:#edd400;-moz-box-shadow: 2px 2px 2px 0px #edd400; -webkit-box-shadow: 2px 2px 2px 0px #edd400; box-shadow: 2px 2px 2px 0px #edd400;} */ .DeliveryAccOkToGo{ background:url(../img/chosen.png); background-size:100px 100px;background-repeat:no-repeat;background-position: center center;} .DeliveryAccSelected{background-color:#edd400;} .POSNEWPOPPAY_input{border:none;} .SALESPAY_PAYTYPES_input{border:none;} /* =============== POP UP WINDOW STUFF =========================================================== */ .PopUpWindow{position: relative; width:100%; height:100%; min-width:100px; max-width:300px; min-height:100px; max-height:180px; top:50px; top: 40%; left:50%; transform: perspective(1px) translateY(-50%) translateX(-40%);; display:none; z-index:9999; background-color:var(--PopUpWBgColor);; padding:15px; border-width: 2px; margin:0px; border-style: solid; border-color: blue; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999;} .PopUpWindowFormLine{position:relative; top: 0px; left:0px; right:0px; height:60px; margin:0px; padding:0px 10px 0px 10px; } .PopUpWindowFormLineTitle{position:absolute; top: 1px; left:0px; right:0px; height:15px; font-size:11px; color: var(--PopUpWLabelColor); text-align:left; padding: 3px 5px 3px 5px; margin:0px; float:left;} .PopUpWindowFormLineInputBorder{position:absolute; top:20px; left:0px; right:0px; height:30px; font-size: 20px; color: var(--PopUpWInputColor); text-align:center; padding: 5px 5px 5px 5px; margin:0px; background-color:#F8F8F8 ; border-width: var(--PopUpWInputBorderWidth); border-style: solid; border-color: var(--PopUpWInputBorderColor); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .PopUpWindowFormLineInputBorder input{width:100%; height:100%; font-size:20px;} .PopUpWindowFormLineTitle2{position:absolute; top: 1px; left:0px; width:130px; height:15px; font-size:11px; color:var(--PopUpWLabelColor); text-align:left; padding: 2px 5px 2px 5px; margin:0px; float:left;} .PopUpWindowFormLineInputBorder2{position:absolute; top:20px; left:0px; width:155px; height:30px; font-size: 20px; color: var(--PopUpWInputColor); text-align:center; padding: 5px 5px 5px 5px; margin:0px; background-color:#F8F8F8 ; border-width: var(--PopUpWInputBorderWidth); border-style: solid; border-color:var(--PopUpWInputBorderColor); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .PopUpWindowFormLineInputBorder2 input{width:145px; height:100%; font-size:20px; text-align:right; border: none; } /* .PopUpWindowFormLineInputBorder2 input{width:100%; height:100%; font-size:20px;} */ .PopUpWindowFormLineTitle3{position:absolute; top: 1px; left:0px; width:90px; height:15px; font-size:11px; color:var(--PopUpWLabelColor); text-align:left; padding: 3px 5px 3px 5px; margin:0px; float:left;} .PopUpWindowFormLineInputBorder3{position:absolute; top:20px; left:0px; width:90px; height:30px; font-size: 20px; color: var(--PopUpWInputColor); text-align:center; padding: 5px 5px 5px 5px; margin:0px; background-color:#F8F8F8 ; border-width: var(--PopUpWInputBorderWidth); border-style: solid; border-color:var(--PopUpWInputBorderColor); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .PopUpWindowFormLineInputBorder3 input{width:100%; height:100%; font-size:20px;} .PopUpWindowContentsFormFieldSELECT{position:absolute; top:20px; left:0px; width:300px; height:24px; text-align:left; font-size: 18px; color: var(--PopUpWInputColor); padding: 5px 4px 5px 4px; margin:0px;} .PopUpWindowContentsFormFieldSELECT SELECT{font-size: 18px; width:300px; color: var(--PopUpWInputColor); background-color:var(--PopUpWInputBgColor);} .PopUpWindowFormLineTextArea4{position:absolute; top: 20px; left:0px; right:10px; height:60px; text-align:left; font-size:11px;color: var(--PopUpWInputColor); padding: 0px; margin:0px; background-color:var(--PopUpWInputBgColor); background-color:white; border: 1px var(--POSDivBgColor) solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .PopUpWindowGeneralSpace{position:absolute; top: 20px; left:0px; right:10px; height:160px; text-align:left; font-size:10px; color:var(--PopUpWInputBgColor); padding: 0px; margin:0px; background-color:#F8F8F8 ; background-color:white; border: 1px var(--POSDivBgColor) solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .PopUpWindowContentsFormLineSeperator{position:relative; top: 0px; left:5px; right:15px; height:2px; margin: 11px 0px 11px 0px; background-color:blue;} .PopUpWindowOK{position:absolute; bottom:10px; right:10px; width:50px; height:50px; background:url(../img/ok.png) no-repeat 0 0; } .PopUpWindowCancel{position:absolute; bottom:10px; right:90px; width:50px; height:50px; background:url(../img/cancel.png) no-repeat 0 0; } .PopUpWindowClearAll{position:absolute; bottom:10px; right:90px; width:50px; height:50px; background:url(../img/clear.png); background-size:40px 40px;background-repeat:no-repeat;background-position: center center;} .PopUpWindowPOSBig{position:absolute; top:60px; left:400px; height:520px; width:500px; display:none; z-index:9003; background-color:#F0F0F0 ; border-width: 1px; padding: 10px; margin:0px; border-style: solid; border-color: blue; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .PopUpWindowPOSBigFormLine{position:relative; top: 0px; left:0px; right:0px; height:80px; margin:0px; padding:0px 10px 0px 10px; } .PopUpWindowPOSBigFormLineTitle{position:absolute; top: 1px; left:0px; right:0px; height:22px; font-size:16px; color:var(--PopUpWInputBgColor); text-align:left; padding: 3px 5px 3px 5px; margin:0px; float:left;} .PopUpWindowPOSBigFormLineInputBorder{position:absolute; top:24px; left:0px; right:0px; height:40px; font-size: 30px; color: var(--PopUpWInputBgColor); text-align:center; padding: 5px 5px 5px 5px; margin:0px; background-color:#F8F8F8 ; border-width: 1px; border-style: solid; border-color: var(--POSDivBgColor) ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .PopUpWindowPOSBigFormLineInputBorder input{width:100%; height:100%; font-size:20px; border:none;} .PopUpWindowData{position:absolute; top:50px; left:400px; height:520px; width:360px; display:none; z-index:9003; background-color:#F0F0F0 ; border-width: 1px; padding: 10px; margin:0px; border-style: solid; border-color: blue; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .PopUpWindowDataTop{position:absolute; top:0px; left:0px; height:50px; width:100%; background:#3377ff; padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px; border-width: 0px; border-style: solid; border-color: gray; -webkit-border-radius: 2px 2px 0px 0px; -moz-border-radius: 2px 2px 0px 0px; border-radius: 2px 2px 0px 0px;;} .PopUpWindowDataTopTitle{position:relative; top:13px; height:14px; left: 10px; width:300px; font-family: Arial, verdana, helvetica, sans-serif; font-size: 14px; font-weight:bold; color: white; } .PopUpWindowDataTopClose{position:absolute; top:5px; height:40px; right:5px; width:40px; background: url("../img/exit.png"); background-size: contain; } .PopUpWindowDataContents{position:absolute; top:50px; bottom:50px; left: 5px; right:5px; font-family: Arial, verdana, helvetica, sans-serif; font-size: 20px; color: blue; background-color:#F0F0F0;} .PopUpWindowDataBottom{position:absolute; bottom:0px; height:50px; left: 0px; width:100%; padding: 2px; float:left;} .PopUpFormLineTotal{position:absolute; top:5px; height:50px; right:5px; width:150px; text-align:center; padding: 0px; margin:0px; color: white; background-color:#000080 ; font-family: DigitalFont; overflow:hidden; border-width: 1px; border-style: solid; border-color: var(--POSDivBgColor) ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .PopUpFormLineTotalNum{position:absolute; top:5px; left:5px; right:5px; height:30px; text-align:center; font-size:30px; font-weight:bold;} /*-----customers windows ------*/ .PopUpWindowDataBig2{position:absolute; top:3px; left:30px; height:520px; width:760px; display:none; z-index:9003; background-color:var(--PopUpWBgColor); border-width: 1px; padding: 10px; margin:0px; border-style: solid; border-color: blue; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .PopUpWindowDataContentsBig1{position:absolute; top:50px; bottom:50px; left: 5px; width:350px; font-family: Arial, verdana, helvetica, sans-serif; font-size: 20px; color: blue; background-color:var(--PopUpWBgColor);} .PopUpWindowDataContentsBig2{position:absolute; top:50px; bottom:50px; left: 400px; width:350px; font-family: Arial, verdana, helvetica, sans-serif; font-size: 20px; color: blue; background-color:var(--PopUpWBgColor);} .PopUpWindowFormLineListInputBox{position:absolute; top:20px; left:0px; right:0px; height:30px; font-size: 20px; color: var(--PopUpWInputBgColor); text-align:center; padding: 5px 5px 5px 5px; margin:0px; background-color:#F8F8F8 ; border-width: var(--PopUpWInputBorderWidth); border-style: solid; border-color: var(--PopUpWInputBorderColor); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .PopUpWindowFormLineListInputBox input{left:0px; right:50px; height:100%; font-size:20px; text-align:center;} .PopUpWindowFormLineListInputBoxBtnAdd{position:absolute; top:0px; right:5px; width:40px; height:40px; display:block; background:url(../img/add.png); background-size:40px 40px;background-repeat:no-repeat;background-position: center center;} .PopUpWindowFormLineListRecordsBoxOuter{display:block; position:absolute; top:65px; left:0px; right:0px; bottom:10px; overflow-y:auto ; font-size: 20px; color: var(--PopUpWInputBgColor); text-align:center; padding: 2px 10px 2px 10px; margin:0px; background-color:#F8F8F8 ; border-width: 1px; border-style: solid; border-color: var(--POSDivBgColor) ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .PopUpWindowFormLineListRecordsBox{display:table; min-width:300px; font-size: 20px; color: var(--PopUpWInputBgColor); text-align:center; padding: 2px 10px 2px 10px; margin:0px; background-color:#F8F8F8 ; } .PopUpWindowFormLineListRecordsBoxDataBox{display:table-row; overflow:hidden; height:30px; padding:0px 5px 0px 5px; } .PopUpWindowFormLineListRecordsBoxDataField{display:table-cell; height:30px; margin: 0px,5px 0px 5px; font-size:20px; color:black; border-bottom:1px var(--POSDivBgColor) solid;} .PopUpWindowFormLineListInputBoxBtnTrash{display:table-cell; width:30px; height:30px; background:url(../img/trash.png); background-size:30px 30px;background-repeat:no-repeat;background-position: center center;} /* --- SLIDERS */ .switch {position: relative; display: inline-block; width: 60px; height: 34px;} /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0;} /* The slider */ .slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ff0000; -webkit-transition: .4s; transition: .4s;} .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;} input:checked + .slider { background-color: #009000;} input:focus + .slider { box-shadow: 0 0 1px #2196F3;} input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);} /* Rounded sliders */ .slider.round { border-radius: 34px;} .slider.round:before { border-radius: 50%;} /*------ PROGRESS BAR -------------*/ .ProgressBarContainerBox{position:absolute; top:0px; left:0px; right:0px; bottom:0px; display: flex; justify-content: center; align-items: center; } .ProgressBarContainer {display: flex; justify-content: flex-start; align-items: center; max-width:200px; max-height:50px; background-color:#D8D8D8; width: 80%; border-radius: 15px; border-color:red; } .ProgressBarContainerMeter{ background-color: blue; color: white; padding: 1%; text-align: right; font-size: 20px; border-radius: 15px; width: 80%; } /*------------ NEW DATA POPUPWINDOW PopUpWnd ----------------------*/ .PopUpWnd{position:absolute; top:50px; left:300px; height:600px; width:750px; display:none; z-index:9004; background-color:#F0F0F0 ; font-family: Arial, verdana, helvetica, sans-serif; font-size: 20px; border: 1px blue solid; padding: 10px; margin:0px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .PopUpWndTop{position:absolute; top:0px; left:0px; height:50px; width:100%; background:#3377ff; padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px; border-width: 0px; border-style: solid; border-color: gray; -webkit-border-radius: 2px 2px 0px 0px; -moz-border-radius: 2px 2px 0px 0px; border-radius: 2px 2px 0px 0px;} .PopUpWndTopTitle{position:relative; top:13px; height:14px; left: 10px; width:250px; font-family: Arial, verdana, helvetica, sans-serif; font-size: 14px; font-weight:bold; color: white; } .PopUpWndTopClose{position:absolute; top:5px; height:40px; right:5px; width:40px; background: url("../img/exit.png"); background-size: contain; } .PopUpWndMainBody{position:absolute; top:50px; bottom:50px; left: 5px; right:5px; font-family: Arial, verdana, helvetica, sans-serif; font-size: 20px; color: blue; background-color:#F0F0F0; padding: 0px; } .PopUpWndTabsArea{position:absolute; top:0px;height:50px; left: 5px; right:5px; font-size: 20px; color: blue; background-color:#F0F0F0; display: flex; flex-direction: row; padding:0px; border-bottom:2px gray solid; } .PopUpWndTab{width:80px; height:42px; margin:2px; padding:2px; font-size: 14px; color: blue; background-color:#F0F0F0; border:1px blue solid; border-radius: 0px 6px 0px 0px;} .PopUpWndTab:hover{ border: 2px blue solid; } .PopUpWndTabSelected{color:white; background-color:blue;} /* font-weight:bold; */ .PopUpWndContents{position:absolute; top:53px; bottom:0px; left: 5px; right:5px; font-family: Arial, verdana, helvetica, sans-serif; font-size: 20px; color: blue; background-color:#F0F0F0; padding: 0px; display:none;} .PopUpWndBottom{position:absolute; bottom:0px; height:50px; left: 0px; right:0px; padding: 0px; } .PopUpWndOK{position:absolute; top:0px; right:10px; width:50px; height:50px; background:url(../img/ok.png) no-repeat 0 0; } .PopUpWndCancel{position:absolute; top:0px; right:90px; width:50px; height:50px; background:url(../img/cancel.png) no-repeat 0 0; } .PopUpWndContentsTop{position:absolute; top:0px; left:0px; height:50px; right:0px; background-color:#3377ff ; display:block; color:white; overflow:hidden; font-size: 10px; box-shadow: 0px 0px 9px rgba(0,0,0,0.15);} .PopUpWndContentsBody{position:absolute; top:52px; bottom:2px; left: 0px; right:0px; color: blue; background-color:#F0F0F0; padding: 0px; overflow-x:hidden; overflow-y:auto;} .PopUpWndContentsFullWidthColumn{position:absolute; top:52px; bottom:3px; left: 5px; right:5px; background-color:#F0F0F0; display:flex; flex-wrap: wrap; flex-direction: row; padding: 0px; overflow-x:hidden; overflow-y:auto;} .PopUpWndContentsColumn{position:absolute; top:52px; bottom:3px; left: 5px; width:360px; background-color:#F0F0F0; display: flex; flex-direction: column; padding: 0px; } .PopUpWndBtn{position:absolute; top:3px; width:44px; height:44px; display:block; overflow:hidden; border:none;} .PopUpWndBtn:hover{border:0px #6666FF solid; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color:#4da6ff;} .PopUpWndBtnSelectAll{left:250px; background:url(../img/selectall.png); background-size:44px 44px;background-repeat:no-repeat;background-position: center center;} .PopUpWndBtnSelectNone{left:310px; background:url(../img/selectnone.png); background-size:44px 44px;background-repeat:no-repeat;background-position: center center;} .PopUpWndFormLine{left:0px; right:0px; height:60px; margin:0px; padding:0px 10px 0px 10px; display:flex; flex-direction:row; } .PopUpWndFormLineBox{left:0px; right:0px; top:0px; bottom:0px; margin:0px; padding:0px; display: flex; flex-direction: column; ;} .PopUpWndFormLineBox4{position:absolute; top:20px; left:0px; right:0px; bottom:0px; margin:0px; padding:0px; display: flex; flex-direction: column; ;} .PopUpWndFormLineTitle{left:0px; right:0px; height:15px; font-size:11px; color:var(--PopUpWLabelColor); text-align:left; padding: 3px 5px 3px 5px; margin:0px;} .PopUpWndFormLineInputBorder{left:0px; right:0px; height:30px; color: var(--PopUpWInputBgColor); text-align:center; padding: 5px 5px 5px 5px; margin:0px; background-color:#F8F8F8 ; border: 1px var(--POSDivBgColor) solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .PopUpWndFormLineInputBorder input{width:100%; height:100%; font-size:20px;} .PopUpWndFormLineSELECT{left:0px; right:10px; height:30px; text-align:left; color: var(--PopUpWInputColor); background-color:var(--PopUpWInputBgColor); padding: 5px 4px 5px 4px; margin:0px;} .PopUpWndFormLineSELECT SELECT{font-size: 16px; left:0px; right:10px; color: var(--PopUpWInputColor); background-color:var(--PopUpWInputBgColor); ;} .PopUpWndFormLineTextArea4{left:0px; right:10px; height:90px; text-align:left; font-size:12px; color: black; padding: 0px; margin:0px; background-color:white; border: 1px var(--POSDivBgColor) solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .PopUpWndItemBlock{width:170px; height:60px; background-color:#eeeeec; padding: 2px; margin: 2px; overflow:hidden; border-width: 1px; border-style: solid; border-color: #D8D8D8; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .PopUpWndItemBlock:hover{border-color: #729fcf;} /* .PopUpWndItemBlock a{ margin:0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; color:#000080; font-weight:bold;} */ .PopUpWndItemBlockSELECTED{color:#eeeeec; background-color:blue; } .PopUpWndItemBlockSmall{width:170px; height:45px; font-size:15px; background-color:#eeeeec; padding: 2px; margin: 2px; overflow:hidden; border-width: 1px; border-style: solid; border-color: #D8D8D8; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .PopUpWndItemBlockSmall:hover{border-color: #729fcf;} .PopUpWndItemBlockSmallSELECTED{color:#eeeeec; background-color:blue; } .PopUpWndFormLineBox2{left:0px; width:170px; top:0px; bottom:0px; margin:0px; padding:0px; display: flex; flex-direction: row; ;} .PopUpWndFormLineTitle2{left:0px; right:0px; height:15px; font-size:11px; color:var(--PopUpWLabelColor); text-align:left; padding: 3px 5px 3px 5px; margin:0px;} .PopUpWndFormLineSELECT2{left:0px; width:160px; height:30px; text-align:left; color: var(--PopUpWInputColor); background-color:var(--PopUpWInputBgColor); padding: 5px 4px 5px 4px; margin:0px;} .PopUpWndFormLineSELECT2 SELECT{font-size: 16px; left:0px; width:160px; color: var(--PopUpWInputColor); background-color:var(--PopUpWInputBgColor); ;} .POSDivPayGridItem{display:block; position:relative; left:0px; right:0px; width:220px; height:60px; float:left; background-color:#eeeeec; padding: 2px; margin: 2px; overflow:hidden; border-width: 1px; border-style: solid; border-color: #D8D8D8; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background:url(../img/delete.png); background-size:20px 20px;background-repeat:no-repeat;background-position: top right; -moz-box-shadow: 2px 2px 2px 0px #999999; -webkit-box-shadow: 2px 2px 2px 0px #999999; box-shadow: 2px 2px 2px 0px #999999; } .POSDivPayGridItemName{position: absolute; top:2px; left:5px; right:5px; height:16px; overflow:hidden; text-align:left; font-size:14px; font-weight:bold; font-stretch:ultra-condensed;} .POSDivPayGridItemNotes{position: absolute; top:20px; right:20px; width:180px; overflow:hidden; text-align:right; font-size:11px; font-family: DigitalFont; } .POSDivPayGridItemPrice{position: absolute;bottom:3px; right:20px; width:100px; text-align:right; font-size:14px; font-weight:bold; font-family: DigitalFont; } .QrPaymentQrCodeContainer{position:absolute; top:5px;left:25px; width:250px; height:250px; } .QrPaymentCheckIfPayedOk{position:absolute; top:5px;right:5px; width:200px; height:70px; font-size:20px; text-align: center; background-color:blue; color:white; font-weight:bold; border-width: var(--PopUpWInputBorderWidth); border-style: solid; border-color:var(--PopUpWInputBorderColor); border-radius: 4px;} .QrPaymentCheckIfPayedOk a{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2px;} .QrPaymentPaymentId{position:absolute; top:90px;right:5px; width:200px; height:40px; font-size:12px; text-align: center; background-color:#F8F8F8; color: var(--PopUpWInputColor); border-width: var(--PopUpWInputBorderWidth); border-style: solid; border-color:var(--PopUpWInputBorderColor); border-radius: 3px;} .QrPaymentPaymentId a{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2px;} .QrPaymentPaymentResultMessage{position:absolute; top:90px;right:5px; width:200px; height:150px; text-align: center; font-weight:bold; background-color:orange; color: var(--PopUpWInputColor); font-size:20px; border-width: var(--PopUpWInputBorderWidth); border-style: solid; border-color:var(--PopUpWInputBorderColor); border-radius: 3px;} .QrPaymentPaymentResultMessage a{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color:var(--PopUpWLabelColor); padding: 2px;} /* .PopUpWindowFormLineTitle2{position:absolute; top: 1px; left:0px; width:130px; height:15px; font-size:11px; color:var(--PopUpWLabelColor); text-align:left; padding: 2px 5px 2px 5px; margin:0px; float:left;} .PopUpWindowFormLineInputBorder2{position:absolute; top:20px; left:0px; width:155px; height:30px; font-size: 20px; color: var(--PopUpWInputColor); text-align:center; padding: 5px 5px 5px 5px; margin:0px; background-color:#F8F8F8 ; border-width: var(--PopUpWInputBorderWidth); border-style: solid; border-color:var(--PopUpWInputBorderColor); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .PopUpWindowFormLineInputBorder2 input{width:145px; height:100%; font-size:20px; text-align:right; border: none; } */ /* .PopUpWindowFormLineInputBorder2 input{width:100%; height:100%; font-size:20px;} */