/* ---------------------------------------------------------------------- h -->none prognosi (c) john paizis 1.2 08/10/13 ---------------------------------------------------------------------- */ /* html ---------------------------------------------------------------------- */ div[visible="false"] { display: none; } .clear { clear: both; width: 100%; height: 0px; } html { font-smoothing: antialiased; height:100%; } @media not screen and (min-width: 652px) { html[noscroll="yes"] { overflow-y: hidden; } } /* body ---------------------------------------------------------------------- */ body { margin:0; padding:0; left:0px; top:0px; width:100%; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); font-family:Helvetica,Arial,sans-serif; font-size:13px; overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; smooth-scrolling: smooth; background:#fff; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } /* ? ---------------------------------------------------------------------- */ @keyframes fadein { from { opacity: 0; } to   { opacity: 1; } } /* Firefox < 16 */ @-moz-keyframes fadein { from { opacity: 0; } to   { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein { from { opacity: 0; } to   { opacity: 1; } } /* Internet Explorer */ @-ms-keyframes fadein { from { opacity: 0; } to   { opacity: 1; } } /* Opera < 12.1 */ @-o-keyframes fadein { from { opacity: 0; } to   { opacity: 1; } } @-webkit-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @-moz-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } /* exc ---------------------------------------------------------------------- */ .exc { padding: 12px 12px 12px 12px; background: #FFD2D2; margin: 6px 24px 6px 24px; color: #D8000C; font-size: 18px; } /* msg ---------------------------------------------------------------------- */ .msg { padding: 12px 12px 12px 12px; background: #DFF2BF; margin: 6px 24px 6px 24px; color: #4F8A10; font-size: 18px; } /* inf ---------------------------------------------------------------------- */ .inf { padding: 12px 12px 12px 12px; margin: 6px 24px 6px 24px; color: #444; font-size: 18px; } .inf a, .inf a:visited { color:#0080ff; text-decoration:none; } /* appver ---------------------------------------------------------------------- */ .appver { margin-top:2px; } .appver a, .appver a:visited { color:#777; text-decoration:none; } /* txt ---------------------------------------------------------------------- */ .txt { padding: 12px 12px 12px 12px; background: #BDE5F8; margin: 6px 24px 6px 24px; color: #00529B; font-size: 18px; } /* wrn ---------------------------------------------------------------------- */ .wrn { padding: 12px 12px 12px 12px; background: #FEEFB3; margin: 6px 24px 6px 24px; color: #9F6000; font-size: 20px; } /* head ---------------------------------------------------------------------- */ .head { position:relative; width:100%; height:150px; top:0; left:0; di1splay:inline-block; z-index:994; } .head[fixed="1"] { position:fixed; box-shadow: 0 8px 6px -6px #777; background:#ff0000; } .mm-links { display:inline-block; float:left; margin-top:40px; padding-bottom:12px; width:444px; background-color: rgba(255,255,255,0.3); border-radius:8px; white-space:nowrap; overflow:hidden; } @media not screen and (min-width: 988px) { .mm-links { float:none; width:auto; position:absolute; left:412px; right:80px; } } .mm-links a[visible="false"] { display:none; } .mm-buttons { display:block; margin-left:380px; text-align: left; margin-top:40px; white-space: nowrap; padding-bottom:4px; padding-left:8px; padding-right:8px; margin-right:80px; white-space:nowrap; box-sizing1:border-box; cursor: pointer; font-size:15px; } .mm-user { display:inline-block; float:left; margin-top:40px; padding-bottom:4px; padding-left:8px; padding-right:8px; margin-right:2px; white-space:nowrap; box-sizing:border-box; cursor: pointer; } .mm-live { display:inline-block; float:left; margin-top:0px; padding-bottom:4px; padding-left:6px; padding-right:8px; margin-right:8px; white-space:nowrap; box-sizing:border-box; } @media not screen and (min-width: 652px) { .mm-buttons { display:none; } .mm-user { margin-top:26px; } .mm-live { padding-left:0px; margin-left:-40px; margin-right:38px; float:right; display:inline; margin-right:8px; margin-top:-16px; } } .mm-buttons[sel="1"]{ border-bottom:4px solid rgba(85,172,238,0.8); } .mm-buttons span { position:relative; line-height:48px; } .mm-buttons img { padding-top:6px; } .mm-user img { padding-top:6px; } .mm-buttons img[inv="1"] { } @media not screen and (min-width: 652px) { .head { height:106px; } } @media not screen and (min-width: 652px) { .mm-links { } } .head .jump { float:left; margin-left:20px; margin-right:0px; margin-top:10px; font-weight1:bold; font-size:24px; color:#fff; text-shadow: -1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000; } .head .logo-small1 { float:left; height:54px; width:92px; margin-top:0px; display:none; } @media not screen and (min-width: 652px) { .head .jump { display:inline; margin-top:2px; margin-left:8px; } .head .logo-small1 { display:inline; } } .head .logo { float:left; height:114px; width:192px; margin-top:0px; margin-left:8px; padding:16px 8px 8px 0px; } .head .logo[visible="false"] { display: none; } @media not screen and (min-width: 652px) { .head .logo { float:left; height:60px; width:96px; margin-top:24px; padding-top:0px; margin-left:8px; } } .head .text { height:32px; font-size:20px; line-height:32px; border-width:2px; border-style:solid; border-radius:8px; margin:0px 32px 0px 32px; } .head .lquickly { float:left; width:142px; margin-top:0px; margin-left:8px; padding:24px 8px 8px 0px; } .head .lquickly[visible="false"] { display: none; } /* ? ---------------------------------------------------------------------- */ .pos-show .many { position:absolute; width:30px; height:30px; left:52px; top:12px; color:#fff; background:#55acee; line-height:30px; font-size:18px; border-radius:50%; border:2px solid #fff; z-INDEX:100; } .pos-show .info { position:absolute; width:60px; height:30px; right:20px; top:12px; text-align:right; color:#fff; background:#55acee; line-height:30px; font-size:16px; opacity:0.6; z-INDEX:100; } /* user ---------------------------------------------------------------------- */ .user { height:80px; background-color:#eee; } .user-status { float:right; position:relative; width:24px; height:24px; line-height:24px; left:-4px; top:6px; color:#fff; background:#ccc; font-size:18px; border-radius:50%; border:2px solid #fff; } .user-status[status="0"] { background:red; display:none; } .user-status[status="1"] { background:green; display:none; } .user-xxname[ok="1"] { text-shadow: -1px 0 #fff,0 1px #fff,1px 0 #fff,0 -1px #fff; color: green; } .user-xxname[ok="0"] { color: white; } @media not screen and (min-width: 652px) { } .user-vvname[ok="1"] { text-shadow: -1px 0 #fff,0 1px #fff,1px 0 #fff,0 -1px #fff; color: green; } .user-vvname[ok="0"] { color: #444; } /* face ---------------------------------------------------------------------- */ .face { height:0px;//150px; z-Index:2; } @media not screen and (min-width: 652px) { .face { } } @media not screen and (min-width: 652px) { .face { } } .face span { padding-left:38px; font-size:18px; padding-top:42px; color:#fff; opacity:0.7; -shadow: rgba(0, 0, 0, 0.4) 0px -1px 0; height:40px; display:block; max-width:1000px; margin:0; text-align:left; } .face .homepage { padding-left:40px; font-size:28px; padding-top:0px; color:#fff; text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0; height:40px; display:none; margin:0; text-align:left; } .face .homepage a{ color:#fff; } .face .homepage a:visited{ color:#fff; } /* bars ---------------------------------------------------------------------- */ .bars { float:left; margin:auto; position:relative; width:45px; height:54px; margin-top:48px; padding-left:68px; display: inline-block; cursor: pointer; } @media not screen and (min-width: 652px) { .bars { margin-top:32px; padding-left:12px; } } @media screen and (min-width: 652px) { .bars { } } .bar1, .bar2, .bar3 { width: 35px; height: 5px; margin: 6px 0; transition: 0.4s; } .bar1[nos="1"] { -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; transform: rotate(-45deg) translate(-9px, 6px) ; } .bar1[nos="0"] { -webkit-transform: 0 ; transform: 0 ; } .change1 .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; transform: rotate(-45deg) translate(-9px, 6px) ; } .change1 .bar2 { opacity: 0; } .bar2[nos="1"] { opacity:0; } .bar2[nos="0"] { opacity:1; } .change1 .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px) ; transform: rotate(45deg) translate(-8px, -8px) ; } .bar3[nos="1"] { -webkit-transform: rotate(45deg) translate(-8px, -8px) ; transform: rotate(45deg) translate(-8px, -8px) ; } .bar3[nos="0"] { -webkit-transform: 0 ; transform: 0 ; } /* xn ---------------------------------------------------------------------- */ .xn { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 998; background:#000; display:none; z-index:98; } .xn1 { display:none; left:0; margin-top:52px; background:#444; width:100%; border-top:2px solid #ccc; overflow:hidden; z-index:98; } .xn[vis="1"] { display:inline; } .xn ul { position: absolute; margin-top:0; margin-bottom:0; padding-top:52px; top:0; left:0; right:0; bottom:0; list-style: none; -webkit-padding-start:0; line-height:30px; background:#444; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling: touch; } .xn ul a{ color:#fff; text-decoration: none; } .xn ul li { text-align:left; font-size:18px; padding:4px 24px 4px 24px; overflow:hidden; } .xn ul li:hover{ background:#777; } .xn ul li img{ margin-top:4px; position:relative; float:left; } /* go ---------------------------------------------------------------------- */ .go { width:44px; float:right; font-size:36px; line-height:24px; margin-top:-6px; } /* attr ---------------------------------------------------------------------- */ .attr { height:70px; line-height: 70px; top: 0; max-width:976px; margin:auto; border:2px solid #eee; border-radius:8px; position:relative; } @media not screen and (min-width: 988px) { .attr { border-radius:0px; border-left:0px; border-right:0px; } } @media not screen and (min-width: 652px) { .attr { border-radius:0px; border-left:0px; border-right:0px; } } .attr-panel[top="1"] { top:0; left: 0; right: 0; position:fixed; margin:auto; border-bottom:1px solid #eee; box-shadow: 0 4px 2px -2px #ccc; width:100%; z-index:998; } .attr-box { padding-top: 6px; max-width:1000px; line-height: 16px; } .attr-panel[top="1"] .attr{ border:2px solid #fafafa; } @media not screen and (min-width: 652px) { .attr-box { padding-top:6px; } } .live { width:30px; margin-top:-54px; float:left; color:#444; } .offline { width:30px; margin-top:-54px; margin-left:12px; float:left; color:#444; } .offline img { width:32px; } .xpaired { width:30px; margin-top:-54px; margin-left:12px; float:left; color:#444; } .xpaired img { width:32px; } @media not screen and (min-width: 652px) { .live { margin-top:26px; } } .attr-1 { width:140px; margin-left:8px; float:left; } .attr-1 .hdr { margin-top:6px; } .attr-1 .dat { line-height:32px; font-size:24px; } .attr-1 .dat[closed="1"] { color:red; } @media not screen and (min-width: 652px) { .attr-1 { margin-left:8px; } } .attr-2 { width:88px; float:left; } .attr-2 .hdr { margin-top:6px; } .attr-2 .dat { line-height:32px; font-size:24px; } .attr-3 { width:88px; float:left; } .attr-3 .dat[live="1"] { color:green; } .attr-3 .hdr { margin-top:6px; } .attr-3 .dat { line-height:32px; font-size:24px; } .attr-4 { float:left; margin-left:16px; } .attr-4 .hdr { margin-top:6px; } .attr-4 img { float:left; } .attr-4 img[type="icon"] { height:28px; border-radius:6px; margin-top:0px; margin-left:4px; padding:2px 2px 2px 2px; } .attr-4 img[type="cash"] { height:24px; border-radius:6px; margin-top:4px; margin-left:4px; padding:2px 10px 2px 10px; } @media not screen and (min-width: 492px) { .attr-4 { display:none; } } .attr-5 { } /* my-count ---------------------------------------------------------------------- */ .my-count { width:26px; height:26px; line-height:26px; margin-top:-6px; float:left; margin-right:8px; text-align:center; border-width: 2px; border-style: solid; border-radius:50%; } .my-price { float:right; margin-right:16px; opacity:60%; } /* live ---------------------------------------------------------------------- */ .live .sp { position:relative; float:left; padding: 4px 8px 4px 8px; margin-left: 2px; margin-right: 2px; width: 36px; height: 36px; } .live .sp > div { width: 24px; height: 24px; background-color: #eee; border: 2px solid #fff; border-radius: 100%; display: inline-block; opacity:0.7; } .live .sp[nr="3"] > div { background-color: #ccc; } .live .sp[nr="4"] > div { background-color: #444; } .live .sp[nr="0"] > div { background-color: #ff0000; } .live .sp[nr="9"] > div { display: none; } .live .sp[nr="1"] > div { background-color: green; } .live .sp[nr="2"] > div { background-color: #00ff00; } .live .sp[nr="7"] > div { background-color: #fff000; } .live .sp .status { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } @-webkit-keyframes live-delay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } } @keyframes live-delay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } } /* tool ---------------------------------------------------------------------- */ .title { height: 48px; width: 100%; background:#cccccc; border-bottom: 8px solid #bbbbbb; Z-INDEX : 800; position:fixed; left:0; top:0; } .title[fixed="yes"] { position:fixed; } .title h1 { --left: 0px; --position: absolute; --width: 0px; text-align: center; position:absolute; margin: 0; left:0; right:0; Z-INDEX : -1; padding: 14px 6px 6px 6px; font-size: 18px; font-weight: bold; color: #000000; } a.tool { padding: 0 6px; line-height: 44px; height: 40px; font-family: inherit; font-size: 18px; } a.tool[shape="back"] { margin: 4px 5px 5px 7px; padding-top: 4px; float: left; left: 6px; } a.tool[touch="yes"] { opacity: 0.5; } a.tool[shape="back"]:active1 { opacity: 0.5; } a.tool[disabled="yes"] { opacity: 0.3; } a.tool span { font-size: 46px; color: #3e78b3; } a.tool text { margin-left:16px; margin-top:-5px; padding-left: 2px; padding-right: 6px; top:10px; font-size: 18px; color: #3e78b3; float: right; } a.tool[shape="tool"] { margin-top: -1px; margin-left: 4px; margin-right: 4px; padding-left: 6px; padding-right: 6px; float: right; height:44px; } a.tool[shape="exec"] img{ margin-top: 5px; } a.tool[shape="exec"] { margin-top: -1px; margin-left: 4px; margin-right: 4px; padding-left: 6px; padding-right: 6px; float: left; height:44px; } a.tool[shape="tool"] img{ margin-top: 5px; } a.tool[shape="y"] { display:inline-block; width:72px; height:36px; line-height:36px; border-width:2px; border-style: solid; text-align: center; border-radius:6px; margin-right:6px; margin-left:6px; } a.tool[shape="n"] { display:inline-block; width:72px; height:36px; line-height:36px; border-width:2px; border-style: solid; text-align: center; border-radius:6px; margin-right:6px; margin-left:6px; } .done { position:absolute; top:40px; margin-left:48px; font-size:48px; cursor:pointer; } .done img { width:40px; } .tools { height: 48px; width: 100%; background:#cccccc; border-bottom: 8px solid #bbbbbb; Z-INDEX : 800; position:fixed; left:0; bottom:0; } .scroll { bottom: 55px; right:0; overflow:auto; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; } .error { font-size: 18px; font-weight: normal; margin: 6px 6px 6px 6px; padding: 8px 8px 8px 8px; } /* load ---------------------------------------------------------------------- */ .load { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 1; background:#000; opacity:0.4; display:none; } .load[loading="yes"] { display:inline; z-index: 999; } .loadspin { margin:auto; position: relative; top:50%; width: 70px; text-align: center; width:200px; height:200px; } .loadspin > div { width: 44px; height: 44px; background-color: #eee; border: 2px solid #aaa; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .loadspin .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .loadspin .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } /* wait ---------------------------------------------------------------------- */ .wait { display: inline-block; width: 80px; height: 80px; } .wait:after { content: " "; display: block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; border: 6px solid #ccc; border-color: #ccc transparent #ccc transparent; animation: wait 1.2s linear infinite; } @keyframes wait { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* send ---------------------------------------------------------------------- */ .send { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 1; display:none; } .send[sending="yes"] { display:inline; z-index: 999; } .sendspin { margin:auto; position: relative; top:50%; width: 70px; text-align: center; width:200px; height:200px; } .sendspin > div { width: 44px; height: 44px; background-color: #55acee; border: 2px solid #aaa; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .sendspin .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .sendspin .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } } /* fade ---------------------------------------------------------------------- */ .fade { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 1; background:#000; opacity:0.0; display:none; transition: opacity 2s; -webkit-transition: opacity 2s; } .fade[fade="yes"] { display:inline; opacity:0.6; transition: opacity 2s; -webkit-transition: opacity 2s; z-index: 997; } /* sleep ---------------------------------------------------------------------- */ .sleep { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 1; background:rgba(0,0,0,0,2); display:none; } .sleep[sleeping="yes"] { display:inline; z-index: 999; } .spinner2 { width: 30px; height: 30px; background-color: #333; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } .dialog { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 999; background:#666666; display:inline; opacity:0.5; } /* pc ---------------------------------------------------------------------- */ .pc { height:40px; margin-top:0px; background:#bbbbbb; float:left; width:640px; display:none; } .pc .menu{ float:left; width:151px; height:28px; padding-top:12px; padding-left:12px; text-align:left; background:#bbbbbb; } .pc .menu img { float:left; margin-top:-8px; margin-left:2px; } .pc .modu{ float:left; width:159px; height:28px; padding-top:12px; background:#eeeeee; } .pc .modu[sel="yes"] { background:#0000ff; color:#ffffff; } /* sok ---------------------------------------------------------------------- */ .sok { position:fixed; height:60px; bottom:0; width:100%; background:#ff0000; z-index:998; } .kk-pay { position:fixed; height:40px; bottom:0px; left:0; right:0; background:green; border-radius:8px; box-shadow: 0 8px 6px -6px #777; margin:6px 6px 6px 6px; z-index:998; } .kk-order { margin-left:84px; margin-right:8px; height:100%; } .kk-abort { background:#eee; width:80px; position:absolute; width:60px; height:100%; } .kk-abort img { padding-top:6px; width:32px; } .kk-but1 { width:80px; position:absolute; width:48px; height:100%; margin-left:0px; } .kk-but1 img { padding-top:8px; width:44px; } body[app="ods"] .kk-but1 img { padding-top:6px; width:36px; } .kk-lng { position:fixed; height:40px; bottom:140px; width:100%; z-index:998; } .kk-lng li { list-style-type: none; display: inline-block; cursor: pointer; margin-left:2px; margin-right:2px; } .kk-stt { position:fixed; line-height1:36px; left: 0; right:0; bottom:60px; max-width: 800px; margin:auto; background:#fff; color:#777; font-size:16px; z-index:998; padding-top:2px; padding-bottom:4px; border-top:2px solid #ccc; border-bottom:2px solid #ccc; } /* bots ---------------------------------------------------------------------- */ .adv { margin-top:12px; margin-bottom:12px; display:inline-block; padding:12px 24px; 12px 24px; } .appdownload { display:block; font-size:16px; color:#444; padding:0px 0px 16px 0px; } #qrcode { width:130px; height:130px; padding:8px 14px 8px 8px; background:#fff; border-radius:8px; border:2px solid #ccc; } .bots { padding-bottom:24px; margin-top:4px; } @media not screen and (min-width: 652px) { .bots { padding-bottom:12px; } } .bots a { display:inline; padding:8px 12px 8px 12px; text-decoration: none; color:#444; font-size:14px; } .bots a:hover { text-decoration: underline; } .comm { padding-bottom:24px; margin-top:16px; } @media not screen and (min-width: 652px) { .comm { margin-top:4px; padding-bottom:16px; } } .comm a { display:inline; padding:8px 12px 8px 12px; text-decoration: none; color:#ffffff; font-size:17px; } .comm a:hover { text-decoration: underline; } .links { padding-bottom:24px; margin-top:8px; } @media not screen and (min-width: 652px) { .links { display:none; } } .links a { display:inline; padding:8px 12px 8px 12px; text-decoration: none; color:#444; height:24px; font-size:14px; white-space: nowrap; } .links a:hover { text-decoration: underline; } .bank { padding-top:8px; padding-bottom:16px; } @media not screen and (min-width: 652px) { .links { padding-top:0px; } } .bank img[type="card"] { width:50px; border-radius:6px; } /* tracker ---------------------------------------------------------------------- */ .tracker { height:56px; } .tracker .stage { margin-left:4px; margin-top:0px; float:left; height:36px; width:100px; background:#aaaaaa; } .tracker .stage[state="1"] { background:#0000ff; } .tracker .stage[state="2"] { background:#2ecc71; } .tracker .stage span { display:inline-block; margin-top:10px; font-size: 12px; font-weight: bold; color:#eeeeee; } .tracker .stage .triangle { float:right; width: 0; height: 0; border-top: 18px solid transparent; border-bottom: 18px solid transparent; border-left: 18px solid #aaaaaa; background:#eeeeee; } .tracker .stage[state="1"] .triangle { border-left: 18px solid #0000ff; } .tracker .stage[state="2"] .triangle { border-left: 18px solid #2ecc71; } .tracker .stage[type="s"] { width:110px; border-top-left-radius: 16px; border-bottom-left-radius: 16px; } .tracker .stage[type="k"] { width:160px; border-top-left-radius: 16px; border-bottom-left-radius: 16px; } .tracker .stage[type="p"] { width:80px; border-top-left-radius: 16px; border-bottom-left-radius: 16px; } .tracker .stage[type="d"] { width:212px; border-top-left-radius: 16px; border-bottom-left-radius: 16px; } .global { left: 0; right:0; margin: 0; padding: 0; position:relative; bottom:0; } @media screen and (min-width: 652px) { .global { } } @media not screen and (min-width: 652px) { .global { position:absolute; overflow:hidden; overflow-y: scroll; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; top:60px; min-height:8px; bottom:0; } .global[top="1"] { top:0px; } } /* home ---------------------------------------------------------------------- */ .home-scan { background-color:#eee; background-image: url(img/qrscan.png); background-repeat: no-repeat; background-size: auto 80px; background-position: center 10px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; width:424px; height:100px; cursor: pointer; } .home-scan span { height:100px; line-height:100px; text-align:center; font-size:24px; font-weight: bold; color:#444; text-shadow: -1px 0 #fff,0 1px #fff,1px 0 #fff,0 -1px #fff; } .home-line { font-size:16px; color:#444; white-space: normal; } .home-demo span { display: inline-block; font-size:16px; color:#444; margin:12px 0px 24px 0px; padding:4px 4px 4px 4px; border:2px solid #55acee; width:200px; height:24px; line-height:24px; color:#55acee; } .home-demo span:hover { background:#ccc; } .home-demo a { color:#55acee; text-decoration: none; } .home-demo a:visited { color:#55acee; } .home-text { padding:8px 8px 8px 8px; } .home-text input { border: 4px solid #dddddd; padding: 0px 24px 0px 24px; border-radius: 24px; font-size:16px; height:36px; } .home-step { text-align: left; font-size:16px; color:#444; padding:12px 8px 12px 48px; white-space: normal; line-height:24px; border-top:1px #ccc dotted; } .home-step .step { border-radius:50%; border:2px solid #000; font-size:20px; margin-top:-4px; margin-right:8px; width:28px; height:28px; line-height:28px; float:left; text-align:center; } /* page ---------------------------------------------------------------------- */ .page { left: 0; right:0; top:0; margin:auto; padding: 0; overflow:hidden; border-bottom-width: 4px; border-bottom-style: solid; } @media not screen and (min-width: 652px) { .page { } } .page1[home="1"] { margin-top:0px; } .page .tool { height: 70px; line-height: 70px; top: 0; max-width:976px; border-radius:8px; border-style:solid; border-width:2px; position:relative; white-space: nowrap; } @media not screen and (min-width: 988px) { .page .tool { border-radius:0px; border-left:0px; border-right:0px; } } @media not screen and (min-width: 652px) { .page .tool { height: 56px; line-height: 56px; border-radius:0px; border-left:0px; border-right:0px; } } .page .tool[fixed="yes"] { position:fixed; top:0; left: 0; right: 0; position:fixed; margin:auto; border-bottom:1px solid #eee; box-shadow: 0 8px 6px -6px #777; background:#fafafa; width:100%; z-index:998; } .page .tool-box { max-width:936px; } .page .tool h1 { white-space: nowrap; font-size: 24px; font-weight: normal; padding-right:16px; text-align: center; text-overflow: ellipsis; padding-top:0px; margin-top:0px; display:inline-block; position:absolute; left:0; top:0; right:0; } @media not screen and (min-width: 652px) { .page .tool h1 { font-size: 20px; } } .page .tool h1 img { width:48px; margin-top:10px; display:inline; } @media not screen and (min-width: 652px) { .page .tool h1 img { width:36px; margin-top:10px; } } .page .tool h1 img[round="1"] { width:36px; padding:6px 6px 6px 6px; border-radius:50%; border:2px solid #aaa; } .page .tool h1 span { padding-left:8px; text-overflow: ellipsis; } .page .tool .back { float:left; font-size:50px; width:16px; padding-left:24px; position:relative; top:-4px; cursor:pointer; font-weight1:bold; background:inherit; z-index:1; } .page .tool .cart { float:right; width:16px; } .page .tool .cart img { margin-left:-58px; margin-top:16px; filter: invert(25%); } body[app="app"] .page .tool .back { display:inline-block; } .page .tool .exit { float:right; font-size:36px; width:76px; position:relative; cursor:pointer; color:#fff; text-shadow: -1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000; } .page .tool .null { float:right; font-size:36px; width:76px; position:relative; } @media not screen and (min-width: 652px) { .page .tool .back { width:58px; } } .page .menu { height: 44px; line-height: 44px; top: 0; max-width:976px; position:relative; white-space: nowrap; background:#eee; } /* main ---------------------------------------------------------------------- */ .main1 { background:#eee; min-height:140px; max-width: 1000px; height:100%; position:relative; margin-top:240px; } .main { left: 0px; max1-width: 1000px; margin-top:180px; padding: 0; overflow:hidden; background:#eee; } @media not screen and (min-width: 652px) { .main { } } /* advs ---------------------------------------------------------------------- */ .advs { position:relative; margin-top:32px; } .advs .row { height:280px; width:424px; background:#fff000; margin-bottom:32px; } .advs .box { height:200px; padding:12px 1px 12px 1px; margin-bottom:16px; width:200px; background:#ff0000; float:left; } .advs .hdr { background:#fff; color:#444; height:24px; font-size:16px; font-weight:bold; } .advs .pho { height:160px; background:#ccc; } .advs .pho img { width:100%; height:100%; } .advs .des { height:64px; font-size:16px; background:#fff; color:#444; } .advs .spr { height:36px; font-size:20px; background:#fff; color:#444; font-weight:bold; } /* repl ---------------------------------------------------------------------- */ .repl { margin-top: 16px; padding: 16px 16px 16px 16px; border-radius:12px; border:4px solid #eee; } .repl li[type="sep"] { list-style-type: none; } .repl li[type="box"] { height: 32px; list-style-type: none; border-width: 0px; font-size: 16px; font-weight: normal; overflow: hidden; white-space:nowrap; } .repl li[type="box"]:hover { background: #ffff00; } .repl li[touch="yes"] { background: #0000ff; color: #ffffff; } .repl li[status="blocked"] { background: #cccccc; } .repl li[sel1="yes"] { background: #ff00ff; } .repl li li { margin-top: 12px; float: left; display: inline; } .repl li li[bold="0"] { font-weight:normal; } .repl li li[bold="1"] { font-weight:bold; } .repl li img { float: left; padding: 6px 6px 6px 6px; border-style: none; } .repl li text { margin-top: 12px; text-align: center; width:100%; float: left; display: inline; } .repl li[type="sep"] { height : 4px; border-bottom: 2px solid #e1e1a8; border-bottom: 2px solid #ccc; } /* xxxx ---------------------------------------------------------------------- */ .xxxx { width:100%; margin-top:-36px; padding-top:60px; } .xxxx[app="sok1"] { position:absolute; margin-top:44px; padding-top:0px; top:210px; bottom:0px; left:8px; right:8px; } @media not screen and (min-width: 988px) { .xxxx[app="sok1"] { bottom:72px; } } .xxxx[app="sok1"][x-m="CATALOG"] { } /* full ---------------------------------------------------------------------- */ .full { max-width: 920px; } /* cont ---------------------------------------------------------------------- */ .cont { float:left; width:690px; padding-left1:8px; } .cont[kiosk="1"] { position:absolute; top:224px; bottom:0px; overflow-y: scroll; padding-top:24px; width:100%; } @media not screen and (min-width: 652px) { .cont { padding-left:0px; } } @media not screen and (min-width: 988px) { .cont { width:100%; } } /* this ---------------------------------------------------------------------- */ .this { max-width: 1000px; } /* cmbs ---------------------------------------------------------------------- */ .cmbs { max-width: 960px; } /* mbox ---------------------------------------------------------------------- */ .mbox { display:table; } @media not screen and (min-width: 652px) { .mbox { display:inline-block; width:100%; } } /* vert ---------------------------------------------------------------------- */ .vert { display:table-cell; padding-left:12px; white-space: nowrap; width:182px; min-width:182px; } @media not screen and (min-width: 652px) { .vert { display:block; background:#fff; height:50px; width:100%; } } .vert[top="1"] { top:0; left: 0; right: 0; position:fixed; margin:auto; border-bottom:1px solid #eee; box-shadow: 0 8px 6px -6px #777; background:#fafafa; width:100%; z-index:998; } /* form ---------------------------------------------------------------------- */ .form { margin-top: 12px; margin-bottom: 0px; padding:0px 8px 0px 8px; max-width:620px; } @media not screen and (min-width: 492px) { .form { padding-left:0px; padding-right:0px; } } .form .button { display: inline-block; margin-top:6px; margin-left:8px; float:left; padding: 10px 8px 10px 8px; height: 22px; line-height: 22px; text-align:center; font-size: 15px; border-radius:8px; cursor: pointer; border-width: 2px; border-style: solid; width: 206px; } .form .action { display: inline-block; float:left; margin-top:6px; padding: 10px 8px 10px 8px; height: 20px; line-height: 24px; font-size: 15px; border-radius:4px; background: url(img/img-ok.png) no-repeat center center; border:2px solid #ddd; color: #ffffff; cursor: pointer; width: 36px; } @media not screen and (min-width: 492px) { .form .button { } } .form .button:hover { background-color: #6FC6FF; box-shadow: 0 0 6px #777; } .form .button[type="r"] { background: #e74c3c; } .form .button[type="r"]:hover { background: #FF6656; } .form .button[type="r"] { background: #e74c3c; } .form .button[type="r"]:hover { background: #FF6656; } .form .button[type="u"] { background: #9b59b6; } .form .button[type="u"]:hover { background: #B573D0; } .form .button[type="g"] { background: #2ecc71; } .form .button[type="g"]:hover { background-color: #48E68B; } .form .button[type="s"] { background: #ff8040; } .form .button[type="s"]:hover { background-color: #ff8040; } .form .button[type="text"] { background: #eeeeee; color: #444444; } .form .button[type="text"]:hover { background: #cccccc; } .form .button[type="login"] { } .form .button[type="facebook"] { background:#3d5b99; color:#fff; } .form .button:active { background: #55acee; color: #ffffff; } .form .button[disabled="yes"] { cursor: default; } .form .button[disabled="yes"]:hover { cursor: default; } .form .note { border: 2px solid #eeeeee; padding: 12px 12px 12px 12px; font-size: 14px; color:#666666; background:#ffffee; } .form .none { margin: 2px 2px 2px 2px; height:8px; border: 0px; clear: both; } .form H1 { padding: 24px 6px 4px 6px; margin-top: 2px; margin-bottom: 0px; font-size:24px; font-weight: normal; text-align:left; color:#444; } .form H2 { padding: 24px 0px 12px 94px; margin-top: 2px; margin-bottom: 12px; margin-left: 8px; margin-right: 8px; font-size:18x; font-weight: bold; text-align:left; color:#444; border-bottom-width: 4px; border-bottom-style: solid; position:relative; } .form H2[visible="false"] { display: none; } .form H2[sep="1"] { padding-top: 0px; } .form H2[opt="1"]::before { content: " "; position: absolute; left:44px; top:26px; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 16px solid #ccc; } .form H2[opt="0"]::before { content: " "; position: absolute; left:52px; top:18px; width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-left: 16px solid #444; } @media not screen and (min-width: 492px) { .form H2 { padding-left: 16px; margin-left: 0px; margin-right: 0px; } } .form .checkout { background:#BDE5F8; padding: 12px 12px 24px 12px; margin-left: 8px; margin-right: 8px; } .form H2 .step { width:36px; height:36px; line-height:36px; float:left; border-radius:50%; border: 2px solid #ff8040; color: #ff8040; font-size:20px; font-weight:bold; text-align:center; margin-top:-8px; margin-left:-10px; margin-right:8px; } .form .tabs { padding: 24px 0px 12px 0px; margin-top: 2px; margin-bottom: 16px; margin-left: 24px; margin-right: 24px; box-shadow: 0px 15px 10px -15px #777; } .form .vspc { height:12px; } .form .tab-button { display:inline-block; border-width: 0px; width:120px; height:18px; margin-left:4px; margin-bottom:2px; padding: 10px 16px 6px 16px; background:#eeeeee; color:#444444; } .form .tab-button[visible="false"] { display: none; } .form .tab-button[sel="1"] { background:#eeeeee; border-bottom: 8px solid #bbbbbb; color:#444444; } .form .tabs .page[visible="false"] { display: none; } /* link ---------------------------------------------------------------------- */ .link { display: inline-block; margin:4px 8px 0px 8px; padding: 12px 8px 12px 8px; height: 46px; line-height: 18px; text-align:left; font-size: 15px; cursor: pointer; border-radius:8px; border-width: 2px; border-style: solid; width: calc(100% - 16px); box-sizing:border-box; } .link[regs--="1"] { border-radius:0px; margin-top:0px; border:0; border-left-width:2px; border-left-style: solid; border-right-width:2px; border-right-style: solid; border-bottom-width:1px; border-bottom-style: solid; } .data li:first-child .link[regs--="1"] { border-top-left-radius: 8px; border-top-right-radius:8px; border-top-width: 2px; border-top-style: solid; } .data li:last-child .link[regs--="1"] { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-bottom-width: 2px; border-bottom-style: solid; } .link:hover { background:#55acee; color:#fff; } .link[disabled="yes"] { background: #ccc; color:#444; cursor: inherit; } a[sel="yes"] .link { background:#55acee; } .link[top1="0"] { border-top:1px solid #eee; } .link[top1="0"]:hover { border-top:1px solid #55acee; } .link span { float:right; font-size:18px; margin-right:16px; color:#777; } .link:hover span { color:#fff; } .link img { float:left; width:32px; height:32px; margin-right:6px; margin-top:-6px; } /* bool ---------------------------------------------------------------------- */ .bool { display: inline-block; padding: 12px 16px 12px 14px; height: 20px; line-height: 20px; text-align:left; font-size: 15px; cursor: pointer; width: 100%; } .bool .check { width: 18px; height: 18px; float:left; font-size:28px; margin-left:6px; margin-right:10px; border-width: 1px; border-style: solid; border-radius:4px; } .bool .check:after { content: ""; } .bool[checked="true"] .check:after { content: "\2714"; } /* data ---------------------------------------------------------------------- */ .data { padding: 0px 0px 0px 0px; } .data[color="green"] { background: #008000; } .data[color="red"] { background: #ff0000; } .data hr { border: 0; border-top-width: 4px; border-top-style: dotted; margin-top:10px; margin-bottom:12px; } .data li { list-style-type: none; border-width: 0px; width:408px; margin-left:8px; margin-right:8px; padding:0px 2px 4px 2px; overflow:hidden; box-sizing:border-box; } .data .li-s { width:118px; float:left; } .data .li-f { margin-left:8px; width:280px; float:left; } .data .li-m { width:80px; float:left; } .data .li-y { margin-left:8px; width:100px; float:left; } .data .li-v { margin-left:8px; width:226px; float:left; } .data li[lnk="1"] { padding:0px 0px 0px 0px; height:56px; } .data li[sel="1"] { } .data li[pck="1"] { padding:0px 0px 0px 0px; height:46px; } .data li[txt="1"] { height:28px; } .data li[type="autocomplete"] { position: relative; display: inline-block; overflow:visible; } .autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; text-align: left; z-index: 99; top: 100%; left: 0; right: 0; } .autocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; } .autocomplete-items div:hover { background-color: #e9e9e9; } .autocomplete-active { background-color: DodgerBlue !important; color: #ffffff; } .data li[visible="false"] { display: none; } @media not screen and (min-width: 492px) { .data li { width: calc(100% - 16px); padding-left:0px; padding-right:0px; } } .data li[color="green"] { background: #008000; } .data li[color="red"] { background: #ff0000; } .data li:last-child { border-bottom-width:0; } .data li label { padding: 8px 4px 0px 14px; margin-right: 8px; margin-top: 2px; font-size:14px; float:left; display:inline-block; position:relative; margin-left:8px; z-index:99; text-align:left; border-radius:6px; } .data li label[__link="yes"] { text-decoration: underline; } .data li text { color:#444; text-align:left; font-size:14px; padding:6px 0px 16px 12px; float:left; } .data li space { padding: 6px 6px 6px 0px; margin-left: 24px; margin-right: 8px; margin-top: 6px; float:left; width:170px; } .data li info { border: 2px solid #dddddd; padding: 6px 6px 6px 6px; margin-top: 4px; font-size:16px; float:left; width:320px; text-align:left; color:#606060; } .data li info[type="full"] { width:600px; } .data input { border-width: 2px; border-style: solid; margin:8px 8px 8px 8px; margin-bottom:2px; padding:5px 8px 5px 12px; border-radius:8px; font-size:16px; height:46px; float:left; display: inline; overflow: hidden; width: calc(100% - 16px); outline: none; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .data input::-webkit-outer-spin-button, .data input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .data .li-s input { width:118px; } .data .li-f input { width:280px; } .data .li-m input { width:80px; } .data .li-y input { width:100px; } .data .li-v input { width:226px; } .data input[readonly="yes"] { } .data input[disabled="yes"] { border: 2px solid #777; } @media not screen and (min-width: 492px) { .data input { } } .data input[type="password"] { } .data input[type="text"] { } .data input[type="edit"][kind="address"] { } .data li .payment { border-width: 2px; border-style: solid; margin: 2px 0px 2px 0px; margin-top:4px; padding:12px 8px 6px 8px; font-size:16px; border-radius: 8px; -webkit-border-radius: 6px; float:left; display: inline; overflow: hidden; box-sizing:border-box; width: calc(100% - 16px); height:50px; cursor: pointer; } .data li[checked="yes"] .payment { } .data li[disabled="yes"] .payment { } .data li .payment span { float:left; padding-top:2px; } .data li .payment img { height:44px; margin-top:-12px; margin-left:4px; margin-right:4px; float:left; } .data li .round { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 2px #000; width: 18px; height: 18px; top:0px; float:left; margin-left:12px; margin-right:8px; position:relative; background:#fff; z-index:99; cursor: pointer; } .data li[checked="yes"] .round { background:#55acee; } .data input[readonly="yes"]{ color:#444; } .data input[sel="yes"]{ color:#000000; background:#00ffff; } .data input[red="yes"]{ } .data textarea { border: 2px solid #55acee; margin: 2px 0px 2px 0px; margin-top:4px; border-radius:4px; padding:4px 8px 6px 12px; font-size:16px; height:76px; min-height:76px; float:left; display: inline; overflow: hidden; width:422px; min-width:422px; max-width:422px; color:#000088; outline: none; -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:border-box; } .data textarea[readonly="yes"]{ color:#606060; background:#eeeeee; } @media not screen and (min-width: 492px) { .data textarea { width:100%; min-width:100%; max-width:100%; } } .data select { border: 2px solid #55acee; margin:8px 8px 8px 6px; padding:5px 8px 5px 12px; border-radius:8px; font-size:16px; height:46px; display: inline; overflow: hidden; width: calc(100% - 16px); color:#000088; -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; background: #fff; outline: none; box-sizing:border-box; } .data select[readonly="yes"]{ } .data select[red="yes"]{ } .data select option{ color:#000088; background: #ffffff; } @media not screen and (min-width: 492px) { .data select { } } .data .title { padding: 6px 6px 6px 6px; border-bottom: 2px solid #dddddd; margin-top: 4px; margin-left: 16px; font-size:24px; text-align:left; color:#000000; } .data .disp { font-size:15px; text-align:left; line-height:1.4; margin-top:6px; margin-bottom:6px; padding: 12px 12px 12px 12px; text-align:left; padding-left:44px; background:#eee; position:relative; } @media not screen and (min-width: 492px) { .data .disp { } } .data .disp[type="adr"] { background:#eee; color:#444; border-bottom:2px solid #ddd; } .data .disp[type="pho"] { background:#eee; color:#444; } .data .disp[type="day"] { text-align:left; background:#ccc; color:#444; } .data .disp[type="err"] { } .data .disp[type="err"]::before { content: "!"; position: absolute; left:9px; top:9px; font-weight:bold; text-align:center; border-radius:50%; border-width: 2px; border-style: solid; width:22px; height:22px; } .data .disp[type="inf"] { } .data .disp[type="inf"]::before { content: "i"; position: absolute; left:9px; top:9px; font-weight:bold; text-align:center; border-radius:50%; border-width: 2px; border-style: solid; width:22px; height:22px; } .data .disp[type="mes"] { background:#DFF2BF; color:#4F8A10; } .data .disp[type="txt"] { background:#ccc; color:#444; } .data .disp img { float:left; width:32px; height:32px; margin-top:-6px; } /* list ---------------------------------------------------------------------- */ .list { background: #fff; margin: 8px 0px 2px 0px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } @media not screen and (min-width: 381px) { .list { border-bottom:8px solid #eee; } } .list li { padding: 0px 0px 0px 0px; height: 44px; line-height: 44px; list-style-type: none; border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-size: 16px; font-weight: normal; overflow: hidden; white-space:nowrap; background:#fff; } .list li:first-child { } .list li[open="yes"] { background-color: #cccccc; } .list li[pending="yes"] { background-color: #ff0000; color: #ffffff; } .list li[notif="yes"] { background-color: #00ff00; color: #444; } .list li[touch="yes"] { background-color: #0080ff; color: #ffffff; } .list li[status="blocked"] { background: #cccccc; } .list li[type="grp"] { padding-left:106px; background: #fff; height: 38px; font-weight: bold; border-bottom:8px solid #eee; box-shadow: 0 4px 2px -2px #ccc; color:#444; } .list li[sel1="yes"] { background-color: var(--c-bcselect); } .list li li { border-width:0; margin-top: 6px; height: 32px; line-height: 32px; margin-right: 4px; padding-left: 2px; padding-right: 2px; float: left; border-radius:0px; } .list li[sel1="yes"] li { color: var(--c-fcselect); } .list li li[full="yes"] { float: none; display: inline-block; white-space: nowrap; } .list li:active1 { } .list li li[box="yes"] { border: 1px solid #cccccc; margin-top: 5px; } .list li li[box="yes"] img { margin-top:16px; padding: 0px 0px 0px 0px; margin-left:-2px; width:16px; height:16px; } .list li tool { width:44px; height:48px; vertical-align:center; float: left; color: #ffffff; text-decoration: none; display: inline-block; background-position: center center; background-repeat: no-repeat; margin: 0px 4px 0px 4px; background-image: url(res/img-tool.png); } .list li next { margin: 5px 5px 5px 5px; float: right; width:26px; height:40px; top:0px; } .list li next:after { position: relative; top: -6px; bottom: 0; left: 0; right: 0; content: "\203A"; /* use the hex value here... */ color:#ccc; font-size: 36px; line-height: 40px; text-align: right; } .list li img { float: left; padding: 6px 6px 6px 6px; border-style: none; } .list li text { margin-top: 0px; text-align: center; background: #eeeeee; width:100%; float: left; display: inline; } .list li button { width: 48px; height:32px; line-height:16px; background: #00ff00; float:left; text-align:center; font-size: 24px; font-weight: bold; outline:none; border:none; margin: 6px 6px 6px 6px; background:#fff; border:3px solid #3e78b3; border-radius:4px; color:#3e78b3; } .list li button[null="yes"] { border:4px solid #eee; border-radius:4px; color:#eee; } .list goto { width: 0px; height: 0px; border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-left: 8px solid #333333; margin-top: -8px; margin-right: 16px; float:right; } .list input[type=checkbox] { visibility: hidden; } .list .checkbox { width: 44px; height: 11px; background: #ccc; position: relative; float:left; margin-left:8px; margin-top:8px; border-radius: 3px; } .list .checkbox label { display: block; width: 20px; height: 20px; border-radius: 50%; transition: all .5s ease; cursor: pointer; position: absolute; top: -5px; left: -3px; background: #777; } .list .checkbox input[type=checkbox]:checked + label { left: 30px; background: green; } /* cats ---------------------------------------------------------------------- */ .cats { margin-top:24px; padding-bottom:16px; float:left; position:relative; width:178px; z-Index:0; } body[dsp="txt"] .cats { position:absolute; margin-top:0px; top:0px; padding-top:12px; bottom:0px; left:8px; overflow-y: scroll; } body[dsp="txt"] .cats::-webkit-scrollbar { width: 10px; } body[dsp="txt"] .cats::-webkit-scrollbar-track { background: #f1f1f1; } body[dsp="txt"] .cats::-webkit-scrollbar-thumb { background: #888; } body[dsp="txt"] .cats::-webkit-scrollbar-thumb:hover { background: #555; } body[dsp="img"] .cats { float:none; display:inline-block; width:100%; margin-top:4px; height:60px; position:absolute; left:0px; padding-bottom:6px; overflow-y: hidden; overflow-x: scroll; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; } .cats[fix="1"] { position:fixed; } @media not screen and (min-width: 652px) { .cats { float:none; display:inline-block; width:100%; margin-top:8px; height:36px; position:absolute; padding-bottom:6px; overflow-y: hidden; overflow-x: scroll; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; } } .cats li { height: 32px; list-style-type: none; padding-right:12px; margin-top:2px; margin-bottom:2px; margin-right:4px; padding-top:4px; line-height:24px; text-align: left; font-size: 14px; overflow: hidden; white-space:nowrap; box-sizing:border-box; } body[dsp="txt"] .cats li { height:32px; } body[dsp="img"] .cats li { display:inline-block; margin-top:0px; margin-bottom:0px; padding:0px 8px 0px 8px; height:40px; line-height:40px; text-align:center; border-bottom: 0px; } @media not screen and (min-width: 652px) { .cats li { display:inline-block; margin-top:0px; margin-bottom:0px; padding:0px 8px 0px 8px; height:32px; font-size:15px; line-height:32px; text-align:center; border-bottom: 2px solid #fff; } } .cats[disabled="yes"] li { color:#ccc; } .cats li[sel="1"] { border-bottom-width :2px; border-bottom-style: solid; } .cats li[link="0"] { font-weight: bold; border-bottom: 2px solid #ccc; background:#fff; } .cats li[link="1"] { cursor: pointer; } .cats[disabled="yes"] li[link="1"] { cursor: auto; } .cats li[link="1"]:hover { border-bottom-width :2px; border-bottom-style: solid; } .cats[disabled="yes"] li[link="1"]:hover { background: #fff; } .cats li img { float: right; padding: 6px 0px 6px 0px; margin-top:-14px; } @media not screen and (min-width: 652px) { .cats li img { float: none; } } .cats li text { float: right; } @media not screen and (min-width: 652px) { .cats li text { float: none; } } .cats a { text-decoration: none; } .cats a:hover, .x-cats a:visited, .x-cats a:link, .x-cats a:active { text-decoration: none; color:#444; } .cats1 goto { width: 0px; height: 0px; border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-left: 8px solid #333333; margin-top: -8px; margin-right: 16px; float:right; } /* opts ---------------------------------------------------------------------- */ .opts { color:#444; position:relative; display:inline; top:0; width:100%; } @media1 not screen and (min-width: 652px) { .opts { float:none; position:relative; display:inline; top:0; width:100%; } } .opts li { height: 24px; list-style-type: none; border-bottom: 1px solid #eee; padding-left:12px; padding-right:12px; margin-top:4px; margin-bottom:4px; margin-right:8px; padding-top:8px; text-align: right; font-size: 14px; overflow: hidden; white-space:nowrap; color:#222; float:left; -webkit-tap-highlight-color:#0000ff; } @media1 not screen and (min-width: 652px) { .opts li { float:left; } } .opts li:hover[link="1"] { background: #ccc; } .opts li[type="txt"] { } @media not screen and (min-width: 652px) { .opts li[type="txt"] { float:left; margin-top:24px; margin-left:24px; margin-right:12px; font-size:16px; color:#444; } } .opts li[type="qua"] { } @media not screen and (min-width: 652px) { .opts li[type="qua"] { float:left; width:36px; margin-top:12px; text-align:center; font-size:16px; } } .opts li[type="plu"] { } @media not screen and (min-width: 652px) { .opts li[type="plu"] { float:left; margin: 4px 0px 16px 0px; padding: 8px 4px 8px 4px; height: 18px; width:32px; text-align:center; font-size: 16px; font-weight: bold; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 4px; color: #ffffff; background-color: #ddd; box-shadow: 0px 5px 0px 0px #ccc; } } .opts li[type="les"] { } @media not screen and (min-width: 652px) { .opts li[type="les"] { float:left; margin: 4px 0px 16px 0px; padding: 8px 4px 8px 4px; height: 18px; width:32px; text-align:center; font-size: 16px; font-weight: bold; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 4px; color: #ffffff; background-color: #ddd; box-shadow: 0px 5px 0px 0px #ccc; } } .opts li[type="bck"] { background:#777; color:#fff; } @media not screen and (min-width: 652px) { .opts li[type="bck"] { display:none; } } .opts li[type="add"] { background:#55acee; color:#fff; } @media not screen and (min-width: 652px) { .opts li[type="add"] { float:left; margin: 4px 6px 16px 16px; padding: 8px 8px 8px 8px; height: 18px; width:48px; text-align:center; font-size: 16px; font-weight: bold; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 4px; color: #ffffff; background-color: #55acee; box-shadow: 0px 5px 0px 0px #3C93D5; } } .opts li[type="upd"] { background:#55acee; color:#fff; } @media not screen and (min-width: 652px) { .opts li[type="upd"] { float:left; margin: 4px 6px 16px 16px; padding: 8px 8px 8px 8px; height: 18px; width:108px; text-align:center; font-size: 16px; font-weight: bold; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 4px; color: #ffffff; background-color: #e67e22; box-shadow: 0px 5px 0px 0px #CD6509; } } .opts li[link="0"] { font-weight: bold; border: 1px solid #ccc; } .opts li[link="1"]:hover { } .opts li img { float: right; padding: 6px 6px 6px 6px; margin-top:-14px; } .opts a { text-decoration: none; } .opts a:hover, { text-decoration: none; color:#444; } /* nav ---------------------------------------------------------------------- */ .nav { } .nav .button { padding: 8px 8px 8px 8px; margin: 8px 4px 8px 0px; height: 18px; text-align:center; font-size: 16px; font-weight: bold; background: #bbbbbb; color: #ffffff; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 0px; border: 0px; width:40px; float:left; } .nav .button:active { background: #0000ff; color: #ffffff; } .nav .viewer { padding: 8px 8px 8px 8px; margin: 8px 4px 8px 0px; height: 18px; text-align:center; font-size: 16px; font-weight: bold; background: #bbbbbb; color: #ffffff; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 0px; border: 0px; width:80px; float:left; } /* mx ---------------------------------------------------------------------- */ .mx { } .mx li { height: 48px; width: 132px; float: left; position:absolute; background: #ffffff; background: -webkit-linear-gradient(#ECF0F1, #A3ABB1); background: -o-linear-gradient(#ECF0F1, #A3ABB1); background: -moz-linear-gradient(#ECF0F1, #A3ABB1); background: linear-gradient(#ECF0F1, #A3ABB1); list-style-type: none; border-color: #BDC3C7; border-width: 2px; border-style: solid; border-radius: 8px; font-weight: normal; padding: 4px 0px 4px 0px; margin: 6px 6px 6px 6px; color: #222222; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; } .mx li[type__="sys"] { background: #747474; color: #ffffff; } .mx li[type__="folder"] { background: #ffffff; } .mx li[type__="record"] { background: #d9e9d9; } .mx li:active { background: #0000ff; color: #ffffff; } .mx li span { font-size: 15px; font-weight: bold; margin-top: 8px; position: absolute; left:10px; top:28px; } .mx li img { float: left; padding: 6px 6px 6px 6px; margin-left: 4px; margin-right: 2px; width: 32px; height: 32px; left:0px; top:0px; position: absolute; } .mx goto { width: 0px; height: 0px; border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-left: 8px solid #333333; margin-top: 14px; margin-right: 16px; float:right; } /* x... ---------------------------------------------------------------------- */ .x-exec { } /* gobsk... ---------------------------------------------------------------------- */ .gobsk { padding:6px 6px 6px 6px; height:60px; line-height:44px; position:fixed; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; left:0; right:0; bottom:0; bottom:calc(2 * env(safe-area-inset-bottom)); } .gobsk span { font-size:18px; display:inline-block; width:100%; color:#fff; } .gobsk[disabled="yes"] span { color:#ccc; } .gobsk .pos-show { margin-top:4px; } @media screen and (min-width: 988px) { body[app="ods"] .gobsk { display:none; } } .mybsk { background:#55acee; height:48px; line-height:44px; border-radius:8px; } /* menu... ---------------------------------------------------------------------- */ .pos-menu { width:480px; vertical-align:top; margin-top:0px; margin-bottom:24px; padding-left:16px; display:table-cell; padding-right:12px; padding-top: 4px; padding-bottom: 48px; } @media not screen and (min-width: 652px) { .pos-menu { display:inline-block; border-left:0px; padding-right:0px; padding-left:0px; width:100%; margin-bottom:0px; } } body[dsp="txt"] .pos-menu { overflow-y: scroll; top:0px; bottom:0px; position:absolute; left:200px; right:8px; margin-bottom:0px; } body[dsp="txt"] .pos-menu::-webkit-scrollbar { width: 10px; } body[dsp="txt"] .pos-menu::-webkit-scrollbar-track { background: #f1f1f1; } body[dsp="txt"] .pos-menu::-webkit-scrollbar-thumb { background: #888; } body[dsp="txt"] .pos-menu::-webkit-scrollbar-thumb:hover { background: #555; } body[dsp="img"] .pos-menu { overflow-y: scroll; top:68px; bottom:0px; position:absolute; left:0px; right:0px; width:inherit; margin-bottom:0px; } .pos-menu li { height: 40px; list-style-type: none; border-width: 0px; border-bottom-width: 0px; border-style: dotted; font-size: 18px; font-weight: normal; padding-top: 0px; overflow: hidden; position: relative; text-align:left; white-space:nowrap; margin-right:8px; } body[dsp="img"] .pos-menu li { float:left; width:200px; height:200px; background:#ff0000; } .pos-menu li[dets="1"] { height: 68px; } @media not screen and (min-width: 652px) { .pos-menu li { padding-left:8px; } .pos-menu li[dis="0"] { } } .pos-menu li[visible="false"] { display:none; } .pos-menu li[kind="itm"] { height:98px; border-bottom-width: 1px; border-bottom-style: solid; cursor:pointer; } .pos-menu li[kind="itm"]:hover { } .pos-menu li[kind="itm"][disabled="yes"]:hover { background: inherit; } .pos-menu li[kind="itm"] img { margin-top:8px; margin-left:0px; object-fit: cover; float:left; height:82px; width:82px; } body[dsp="img"] .pos-menu li[kind="itm"] img { width:200px; height:160px; } .pos-menu li[kind="itm"] .plus { margin-top:8px; margin-left:0px; float:left; height:82px; width:82px; } body1[dsp="img"] .pos-menu li[kind="itm"] .plus { margin-top:8px; margin-left:0px; width:200px; height:160px; background: linear-gradient(#222,#222), linear-gradient(#222,#222), #fff; background-position:center; background-size: 50% 2px,2px 50%; background-repeat:no-repeat; } .pos-menu li[kind="hdr"] { height:30px; padding-top: 24px; } body[dsp="img"] .pos-menu li[kind="hdr"] { display:none; } .pos-menu li[kind="hdr"] .caption { text-align:center; border-bottom:1px solid #777; padding-bottom:4px; width:240px; margin:auto; } .pos-menu li[kind="cbs"] { height:40px; padding: 4px 4px 4px 12px; border: 2px solid #eee; margin:12px 8px 12px 8px; cursor:pointer; border-radius:8px; background:#fff; } body[dsk="img"] .pos-menu li[kind="cbs"] { display:none; } .pos-menu li[kind="cbs"]:hover { background:#55acee; } .pos-menu li[kind="cbs"] img { float:left; } .pos-menu li[kind="cbs"] .caption { text-align:center; float:left; padding-top:10px; padding-left:8px; color:#444; } .pos-menu li[kind="cbs"]:hover .caption{ color:#fff; } .pos-menu li[kind="cat"] { height:50px; padding-top: 24px; padding-bottom: 12px; border-bottom-width: 1px; border-bottom-style: solid; } body[dsp="img"] .pos-menu li[kind="cat"] { display:none; } .pos-menu li[kind="cat"]:first-child { padding-top: 4px; } .pos-menu li[kind="rel"] { height:50px; padding-top: 40px; } .pos-menu li[kind="sel"] { height:20px; background:#eee; text-align:center; color:#444; font-size:15px; padding-top:6px; padding-bottom:6px; } .pos-menu li[kind="img"] { height:120px; margin-bottom: 12px; } .pos-menu li[kind="cob"] { margin-top:8px; margin-bottom:8px; } .pos-menu li[kind="cob"]:hover { } .pos-menu li[kind="inf"] { margin-top:12px; display:block; border-bottom:2px solid #ccc; padding-bottom:0px; padding-left:4px; margin-left:2px; margin-right:10px; text-align:left; color:#222; font-size:14px; font-weight:bold; overflow:hidden; cursor: pointer; } .pos-menu li[kind="inf"] img { float: left; width:32px; } .pos-menu li[kind="inf"] img span { float:left; } .pos-menu li[kind="apply"] { border: 2px solid #0080ff; background:#0080ff; margin-top:32px; margin-bottom:12px; text-align:center; line-height:38px; border-radius:4px; cursor:pointer; } .pos-menu li[kind="apply"]:hover { box-shadow: 0 0 12px #444; } .pos-menu li[kind="apply"][disabled="yes"] { border: 2px solid #bbb; background: #bbb; cursor: not-allowed; } .pos-menu li[kind="apply"] span { color:#fff; } .pos-menu li[kind="abort"] { border: 2px solid #777; background:#fff; color:red; margin-top:12px; margin-bottom:12px; text-align:center; line-height:38px; border-radius:4px; cursor:pointer; } .pos-menu li[kind="abort"]:hover { box-shadow: 0 0 12px #444; } .pos-menu li[kind="abort"] span { color:777; } .pos-menu li[exists="1"] { background: #00ff00; } .pos-menu li[ro="yes"] .itm { } .pos-menu li .cb1 { background : url(img/cb1.png); background-size:100%; width:32px; height:32px; float:left; margin-top:4px; margin-left:2px; } .pos-menu li span { padding: 12px 8px 8px 8px; font-size:14px; text-overflow: ellipsis; overflow: hidden; width:auto; } .pos-menu li .itm { padding: 12px 8px 6px 8px; font-size:16px; text-overflow: ellipsis; overflow: hidden; width:auto; z-index: 10; } .pos-menu li[kind="itm"]:hover .itm { } .pos-menu li .det { white-space: normal; word-wrap: break-word; line-height:18px; font-size:14px; color:#999; padding-left:90px; } .pos-menu li[rq="red"] .itm { color:#ff0000; } .pos-menu li[disabled="yes"] .itm { text-decoration: line-through; } .pos-menu li[disabled="yes"]:hover .itm { text-decoration: line-through; } .pos-menu li[touch="yes"] { } .pos-menu li .cob { padding: 12px 8px 8px 8px; font-size:15px; text-overflow: ellipsis; overflow: hidden; width:auto; z-index: 10; text-align:center; } .pos-menu li[kind="cob"][sel="1"] .cob { } .pos-menu li mat { padding: 12px 8px 8px 8px; margin-left:48px; font-size:18px; font-weight:bold; float: left; display: inline; color:#3e78b3; } .pos-menu li not { padding: 12px 8px 8px 8px; margin-left:48px; font-size:18px; font-weight:bold; float: left; display: inline; color:#3e78b3; } .pos-menu li price { padding: 12px 8px 4px 0px; font-size:15px; float:right; width:48px; text-align:right; float: right; z-index: 10; } .pos-menu li count { margin: 11px 24px 0px 4px; font-size:15px; font-weight:bold; float:right; width:12px; z-index: 10; color:#3e78b3; display:none; } .pos-menu li cat { padding: 16px 0px 8px 0px; font-size:24px; text-align:center; width:100%; display: inline-block; } .pos-menu li rel { padding: 8px 0px 8px 0px; font-size:24px; text-align:center; background:#fff; width:100%; display: inline-block; } .pos-menu li rel img { float:left; margin-left:8px; width:32px; height:32px; } .pos-menu li[kind="rel"][ok="0"] rel { } .pos-menu li[kind="rel"][ok="1"] rel { } .pos-menu li next { margin: 5px 5px 5px 5px; float: right; width:40px; height:40px; top:0px; } .pos-menu li add { width:36px; height:48px; vertical-align:center; float: left; color: #ffffff; text-decoration: none; display: inline-block; background-position: center center; background-repeat: no-repeat; margin: 0px 4px 0px 4px; } .pos-menu li del { width:68px; height:68px; vertical-align:center; float: left; color: #ffffff; text-decoration: none; display: inline-block; background-position: center center; background-repeat: no-repeat; margin: 0px 4px 0px 4px; } .pos-menu li more { width:48px; height:48px; vertical-align:center; float: left; color: #ffffff; text-decoration: none; display: inline-block; background-position: center center; background-repeat: no-repeat; margin: 0px 4px 0px 4px; } .arrow-right { width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid green; } .pos-menu li[attr="yes"]{ list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 18px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; -webkit-tap-highlight-color:#0000ff; height: 14px; color:#999999; padding: 0px 8px 8px 56px; } .pos-menu li:last-child[attr="yes"] { border-style: dotted; border-bottom-width: 1px; } .pos-menu div img { width: 100%; border: none; } /* builder ---------------------------------------------------------------------- */ .pos-menu-builder { width:100%; margin-bottom:16px; } .pos-menu-builder li { height: 44px; list-style-type: none; font-size: 14px; font-weight: normal; overflow: hidden; white-space:nowrap; } .pos-menu-builder li[kind="group"] { color:#444; font-weight:bold; margin-top:16px; height: 32px; line-height: 32px; vertical-align: middle; text-align:left; font-size:15px; padding-left:24px; position:relative; } .pos-menu-builder li[kind="group"][compl="1"]{ color:#ff0000; } .pos-menu-builder li[kind="group"][opt="1"]::before { content: " "; position: absolute; right:40px; top:8px; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 16px solid #ccc; } .pos-menu-builder li[kind="group"][opt="0"]::before { content: " "; position: absolute; right:46px; top:4px; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid #444; } .pos-menu-builder li[kind="image"]{ height:282px; padding-left:4px; padding-right:4px; } .pos-menu-builder img { width:100%; box-sizing:border-box; object-fit: cover; height:260px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; } } .pos-menu-builder li[kind="option"]{ } .pos-menu-builder li[kind="input"]{ } .pos-menu-builder li[kind="input"] .icon { border:1px solid #ccc; border-radius:4px; margin:4px 8px 0px 0px; height:20px; line-height:20px; padding-top:1px; padding-left:4px; width:18px; font-weight:bold; } .pos-menu-builder li[kind="input"] .icon1::before { content: "\25A1"; font-size:20px; } .pos-menu-builder li .button{ float:left; width:100px; } .pos-menu-builder li .quantity{ float:left; width:60px; display:block; height:26px; text-align:right; font-size:26px; color:#3e78b3; padding-top:0px; border-bottom: 2px solid #cccccc; margin-right:12px; } .pos-menu-builder li .tool { margin-right:8px; width:36px; display:block; height: 36px; background: #eee; border: 2px solid #cccccc; float:left; } .pos-menu-builder .txt { padding-left:16px; font-size: 14px; text-align:left; color:#777777; } .pos-menu-builder .img { padding: 8px 16px 8px 16px; } .pos-menu-builder li .tool img{ margin-top:-8px; margin-left:-2px; } .pos-menu-builder li .icon { width:24px; text-align: center; float:left; } .pos-menu-builder li[kind="input"][embed="yes"] .icon::before { content: "\2713"; } .pos-menu-builder li[kind="input"][valid="yes"] .icon::before { content: "\2713"; } .pos-menu-builder li[kind="input"][modfid="DOUBLE"] .icon::before { content: "2"; } .pos-menu-builder li[kind="input"][modfid="LESS"] .icon::before { content: "\00BD"; } .pos-menu-builder li[kind="input"][modfid="X1"] .icon::before { content: "1"; } .pos-menu-builder li[kind="input"][modfid="X2"] .icon::before { content: "2"; } .pos-menu-builder li[kind="input"][modfid="X3"] .icon::before { content: "3"; } .pos-menu-builder li[kind="input"][modfid="X4"] .icon::before { content: "4"; } .pos-menu-builder li[kind="input"][embed="not"] .icon::before { content: "\2715"; } .pos-menu-builder li[kind="input"][valid="not"] .icon::before { content: "\2715"; } .pos-menu-builder li .comb { border:1px solid #ccc; border-radius:50%; margin:4px 8px 0px 0px; height:20px; line-height:20px; padding-top:1px; padding-left:4px; width:18px; font-weight:bold; float:left; } .pos-menu-builder li[kind="input"][valid="yes"] .comb { background : #0080ff; } .pos-menu-builder li[kind="input"] .comb1::before { content: "\25CB"; } .pos-menu-builder li[kind="input"][valid="yes"] .comb1::before { content: "\25CF"; } .pos-menu-builder li .text { overflow: hidden; width:auto; float:left; text-overflow: ellipsis; } .pos-menu-builder li .price { height: 32px; line-height: 32px; vertical-align: middle; float:right; color:#444; padding-right:8px; } .pos-menu-builder li[kind="input"][valid="yes"] .price{ color : #0080ff; } .pos-menu-builder li .plus { width:24px; height:24px; position:relative; background:#eee; color:#444; left:126px; top:-35px; border-radius:50%; border:1px solid #444; font-size:20px; line-height:24px; visibility: hidden; cursor:pointer; } @media not screen and (min-width: 652px) { .pos-menu-builder li .plus { left:86px; } } .pos-menu-builder li .plus:hover { background:#fff; } .pos-menu-builder li[kind="input"][embed="yes"] .plus { visibility: visible; border:1px solid #aaa; color:#aaa; } .pos-menu-builder li[kind="input"][valid="yes"] .plus { visibility: visible; border:1px solid #aaa; color:#aaa; } .pos-menu-builder li[kind="input"][embed="not"] .plus { visibility: hidden; } .pos-menu-builder li[kind="input"][valid="not"] .plus { visibility: hidden; } .pos-menu-builder li .less { width:24px; height:24px; position:relative; background:#eee; color:#444; left:96px; top:-61px; border-radius:50%; border:1px solid #444; font-size:20px; line-height:20px; visibility: hidden; cursor:pointer; } @media not screen and (min-width: 652px) { .pos-menu-builder li .less { left:56px; } } .pos-menu-builder li .less:hover { background:#fff; } .pos-menu-builder li[kind="input"][embed="yes"] .less { visibility: visible; border:1px solid #aaa; color:#aaa; } .pos-menu-builder li[kind="input"][valid="yes"] .less { visibility: visible; border:1px solid #aaa; color:#aaa; } .pos-menu-builder li[kind="input"][embed="not"] .less { visibility: hidden; } .pos-menu-builder li[kind="input"][valid="not"] .less { visibility: hidden; } .pos-menu-builder li input1{ height:40px; text-align:right; padding-right: 4px; margin-right: 4px; background:#ffffff; color:#3e78b3; height: 24px; } .pos-menu-builder li .input { height: 32px; line-height: 32px; vertical-align: middle; text-align:left; display:block; text-overflow: ellipsis; width:auto; cursor:pointer; margin: 4px 24px 4px 24px; border-bottom:1px solid #ddd; border-radius:4px; font-size: 15px; padding-left:8px; } .pos-menu-builder li .input:hover { } .pos-menu-builder li[kind="input"][embed="yes"] .input{ color : green; } .pos-menu-builder li[kind="input"][embed="not"] .input{ color : red; } .pos-menu-builder li[kind="input"][valid="yes"] .input{ color : #0080ff; } .pos-menu-builder li[kind="input"][valid="not"] .input{ color : red; } .pos-menu-builder li input1 { height: 32px; line-height: 32px; vertical-align: middle; text-align:left; display:block; width:auto; margin: 4px 16px 4px 100px; border:2px solid #ddd; border-radius:4px; background:#eee; font-size: 15px; font-weight:bold; color:#444; padding-left:8px; } .pos-menu-builder li[kind="input"][valid="yes"] input{ border:2px solid #0080ff; color : #0080ff; } .pos-menu-builder .comment { padding-left:24px; padding-right:44px; overflow:hidden; } .pos-menu-builder .comments { height:110px; padding-left:24px; padding-right:44px; overflow:hidden; } .pos-menu-builder li input[type="edit"] { background:#fff; left:0; top:0; height:24px; padding:4px 8px 6px 8px; font-size:15px; font-weight:bold; color:#0080ff; width:100%; outline: none; border:2px solid #ddd; border-radius:4px; } .pos-menu-builder .textarea { padding-left:24px; padding-right:44px; height:76px; } .pos-menu-builder textarea { background:#f0f0d2; left:0; top:0; height:58px; min-height:58px; max-height:58px; font-size:16px; font-weight:bold; margin-top:4px; padding:4px 8px 8px 8px; width:100%; min-width:100%; max-width:100%; outline: none; border:1px solid #ddd; border-radius:0px; background:#fff; } .pos-menu-builder textarea[valid="yes"]{ border:1px solid #0080ff; color : #0080ff; } .pos-menu-builder li button { width: 64px; height:100%; background: #00ff00; float:left; text-align:center; font-size: 20px; font-weight: bold; margin: 2px 2px 2px 2px; } .pos-menu-builder li select { width: 8px; height:28px; float:right; text-align:center; font-size: 16px; font-weight: bold; margin: 8px 2px 2px 6px; border: solid 1px #ccc; color:#444; z-Index:998; display:none; } .pos-menu-builder li select option { color:#444; font-size: 16px; font-weight: bold; } .pos-menu-builder li input[valid="yes"] { } .pos-menu-builder li input[type="radio"] { } .pos-menu-builder li input[type="radio"]:checked { background: #99d9ea; } .pos-menu-builder li input[type="checkbox"] { } .pos-menu-builder li input[type="checkbox"]:checked { background: #00ff00; } .pos-menu-builder .button { margin: 16px 6px 16px 6px; padding: 8px 8px 8px 8px; height: 20px; width:160px; text-align:center; font-size: 20px; font-weight: bold; -webkit-border-radius: 8px; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 8px; } .pos-menu-builder .button:active { transform: translate(0px, 5px); -webkit-transform: translate(0px, 5px); box-shadow: 0px 1px 0px 0px; } .pos-menu-builder .button[kind="a"] { color: #ffffff; background-color: #55acee; box-shadow: 0px 5px 0px 0px #3C93D5; } .pos-menu-builder .button[kind="a"]:hover { background-color: #6FC6FF; } .pos-menu-builder .button[kind="u"] { color: #ffffff; background-color: #e67e22; box-shadow: 0px 5px 0px 0px #CD6509; } .pos-menu-builder .button[kind="u"]:hover { background-color: #FF983C; } .pos-menu-builder .button[kind="d"] { color: #ffffff; background: #e74c3c; box-shadow: 0px 5px 0px 0px #CE3323; } .pos-menu-builder .button[kind="d"]:hover { background: #FF6656; } /* builder... ---------------------------------------------------------------------- */ .detail { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 998; display:inline; background-color: rgba(0,0,0,0.5); box-shadow: 0 0 36px -12px rgba(0, 0, 0, 0.4); } .builder-box { margin: auto; position: absolute; top: 32px; bottom: 32px; max-height:720px; margin-left:-260px; left:50%; width:520px; border-radius:8px; overflow: hidden; box-sizing: border-box; z-Index:999; border:8px solid #fff; } @media not screen and (min-width: 560px) { .builder-box { top:96px; bottom:0; margin-left:0; border-radius:0px; border-top-left-radius:16px; border-top-right-radius:16px; border:0; left:0; width:100%; } } .builder-top { position: absolute; top: 0px; left: 0; width: 100%; height:96px; z-Index:999; border-bottom-width: 4px; border-bottom-style: solid; } .builder-dat { overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling: touch; position: absolute; top:100px; bottom:78px; left:0px;//12px; right:0px;//12px; z-Index:998; } .builder-bot { position: absolute; bottom:0; left: 0; width: 100%; height:74px; border-top-width: 4px; border-top-style: solid; } .builder-pho { position: absolute; top: 8px; left: 16px; width: 154px; height: 112px; } @media not screen and (min-width: 560px) { .builder-pho { display:none; } } .builder-pho img{ width: 154px; height: 112px; } .builder-close { float:right; width:32px; height:32px; border-radius: 50%; border:2px solid #000; margin-top:16px; margin-right:12px; cursor:pointer; } .builder-close img { margin-top:0px; margin-left:0px; position:relative; width:32px; height:32px; } .builder-hdr { position:absolute; top:24px; margin-left:12px; margin-right:80px; left:0; text-overflow: ellipsis; white-space: nowrap; overflow:hidden; text-align:left; height:24px; right:0; font-size:18px; padding-left:10px; padding-right:48px; font-weight:bold; } @media not screen and (min-width: 560px) { .builder-hdr { margin-left:4px; padding-right:12px; } } .builder-txt { position:absolute; left:22px; top:52px; height:36px; text-overflow: ellipsis; overflow:hidden; padding-right:8px; font-size:14px; text-align:left; } @media not screen and (min-width: 560px) { .builder-txt { left:14px; } } .builder-les { position:absolute; top:8px; left:50%; margin-left:-56px; border: 2px solid #0080ff; border-radius: 50%; width:28px; height:28px; line-height:24px; font-size:24px; font-weight:bold; color:#0080ff; cursor: pointer; } .builder-les[disabled="yes"] { border: 2px solid #777; background:#ccc; color:#777; } @media not screen and (min-width: 560px) { .builder-les { } } .builder-les:hover { background-color: #fff; box-shadow: 0 0 12px #444; } .builder-plu { position:absolute; top:8px; left:50%; margin-left:24px; border: 2px solid #0080ff; border-radius: 50%; width:28px; height:28px; line-height:24px; font-size:24px; font-weight:bold; color:#0080ff; cursor: pointer; } .builder-plu[disabled="yes"] { border: 2px solid #777; background:#ccc; color:#777; } @media not screen and (min-width: 560px) { .builder-plu { } } .builder-plu:hover { background-color: #fff; box-shadow: 0 0 12px #444; } .builder-qua { position:absolute; top:8px; left:50%; margin-left:-22px; font-size:24px; text-align: center; font-weight:bold; text-align:center; width:44px; color:#444; } @media not screen and (min-width: 560px) { .builder-qua { } } .builder-xxx { position:absolute; top:10px; left:50%; margin-left:90px; font-size:16px; font-weight:bold; color:#777; display:none; } @media not screen and (min-width: 560px) { .builder-xxx { left:190px; } } .builder-qtext { position:absolute; top:12px; left:36px; font-size:15px; color:#444; display:none; } @media not screen and (min-width: 560px) { .builder-qtext { display:none; } } .builder-qpanel { position:absolute; top:12px; right:60px; width:100px; height:40px; } @media not screen and (min-width: 652px) { .builder-qpanel { right:32px; margin-left:-174px; top:6px; } } .builder-spr { position:absolute; top:18px; right:0px; padding-right:42px; height:32px; width:40px; font-size: 18px; } @media not screen and (min-width: 560px) { .builder-spr { } } .builder-spr span { float:right; height: 32px; line-height: 32px; vertical-align: middle; float:right; color:#0080ff; padding-right:8px; } .builder-add { position:absolute; margin: auto; height: 36px; border-radius:4px; line-height: 36px; width:160px; right:46px; left:50%; margin-left:-90px; margin-top:16px; text-align:center; font-size: 16px; background: #0080ff; color: #fff; cursor: pointer; border-top: 2px solid #0080ff; border-bottom: 2px solid #0080ff; } .builder-add[disabled="yes"] { background: #777; border-top: 2px solid #999; border-bottom: 2px solid #999; } @media not screen and (min-width: 652px) { .builder-add { width:108px; margin-left:-80px; margin-top:8px; } } .builder-add:hover { } .builder-bck { position:absolute; margin: auto; height: 36px; border-radius:4px; line-height: 36px; width:90px; left:50%; margin-left:-192px; margin-top:16px; text-align:center; font-size: 16px; color: #444; cursor: pointer; border: 1px solid #ccc; } @media not screen and (min-width: 652px) { .builder-bck { width:80px; margin-left:-172px; margin-top:8px; } } .builder-bck:hover { } .builder-upd { position:absolute; margin: auto; height: 36px; border-radius:4px; line-height: 36px; width:160px; right:46px; left:50%; margin-left:-90px; margin-top:16px; text-align:center; font-size: 16px; background: #0080ff; color: #fff; cursor: pointer; border-top: 2px solid #0080ff; border-bottom: 2px solid #0080ff; } @media not screen and (min-width: 560px) { .builder-upd { width:108px; margin-left:-80px; margin-top:8px; } .builder-bot { bottom:calc(10px + 2 * env(safe-area-inset-bottom)); height: 50px; position: fixed; } .builder-dat { left:0; right:0; top:96px; bottom:calc(62px + 2 * env(safe-area-inset-bottom)); } } .builder-upd:hover { } @media1 not screen and (min-width: 1652px) { .builder-box { bottom: 132px; top: 132px; padding:0; margin:0; margin: auto; position: absolute; border:0px; width:600px; display:inline; position: fixed; background:#ff00ff; overflow:hidden; bottom:0px; } .builder-top { top:0px; position: fixed; overflow:hidden; height: 50px; margin-top: 0px; height: 54px; border-bottom:2px solid #444; background:#00ff00; width:100%; } .builder-dat { overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling: touch; position: fixed; top: 52px; width:400px; margin-top:62px; margin-bottom:54px; bottom:54px; } .builder-bot { height:54px; width: 432px; border-top:2px solid #444; overflow:hidden; z-Index:998; bottom:0px; overflow:hidden; height: 54px; bottom: 0; background:#ff0000; width:100%; } .builder-set { display:none; } } .builder-abort { position:relative; top:8px; float:left; margin-top:8px; margin-right:-10px; background:#eee; border:1px solid #ccc; width:40px; height:40px; display:none; } @media not screen and (min-width: 1652px) { .builder-abort { display:inline; } } .builder-abort:hover { background:#ccc; } .builder-abort img { margin-top:8px; margin-left:2px; } .builder-title { float:left; margin-top:24px; margin-left:24px; margin-right:12px; font-size:16px; color:#444; } .builder-plus { float:left; margin: 4px 0px 16px 0px; padding: 8px 4px 8px 4px; height: 18px; width:32px; text-align:center; font-size: 16px; font-weight: bold; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 4px; color: #ffffff; background-color: #ddd; box-shadow: 0px 5px 0px 0px #ccc; } .builder-plus:hover { background-color: #eee; } .builder-plus img{ margin-top:-6px; } .builder-quantity { float:left; width:36px; margin-top:12px; text-align:center; font-size:16px; } .builder-less { float:left; margin: 4px 0px 16px 0px; padding: 8px 4px 8px 4px; height: 18px; width:32px; text-align:center; font-size: 16px; font-weight: bold; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 4px; color: #ffffff; background-color: #ddd; box-shadow: 0px 5px 0px 0px #ccc; } .builder-less:hover { background-color: #eee; } .builder-less img{ margin-top:-6px; } /* aph... ---------------------------------------------------------------------- */ .aph { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 999; display:inline; background-color: rgba(0,0,0,0.7); visibility: hidden; opacity:0; } .aph[vis="1"] { visibility: visible; opacity: 1; } .aph-box { margin: auto; position: absolute; top: 0px; bottom: 0px; height:400px; margin-left:-260px; left:50%; width:520px; background-color: #fff; z-Index:999; box-shadow: 0 0 24px #000; } @media not screen and (min-width: 560px) { .aph-box { top:0; bottom:0; margin-left:0; left:0; width:100%; height:100%; } } .aph-dat { position: absolute; top:16px; bottom:16px; left:12px; right:12px; z-Index:998; } @media not screen and (min-width: 560px) { .aph-dat { left:0; right:0; } } /* menu-selector ---------------------------------------------------------------------- */ .pos-menu-selector { width:320px; } .pos-menu-selector li { height: 50px; background: #ffffff; list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: dotted; font-size: 18px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; -webkit-tap-highlight-color:#0000ff; } /* order... ---------------------------------------------------------------------- */ .pos-panel[ro="1"] { display:none; } .pos-panel[hid="1"] { display:none; } .pos-panel[mobile="1"] { top:0px; bottom:0px; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling: touch; } @media not screen and (min-width: 988px) { .pos-panel[min="1"] { display:none; } } .pos-show { width:40px; height:40px; margin-top:46px; background:url(img/basket.png) no-repeat; background-size: 100%; z-INDEX:100; display:none; display:inline; margin-right:16px; margin-top:8px; } .img-flag { float:right; width:40px; height:40px; margin-top:46px; margin-right:32px; } .img-flag img { width:100%; } @media not screen and (min-width: 652px) { .img-flag { margin-top:31px; } } .ord-tracker { position:fixed; bottom:84px; width:64px; height:64px; left:50%; margin-left:500px; z-index:999; animation-duration: 0.5s; animation-name: animate-fade; animation-delay: 0.5s; animation-fill-mode: backwards; } @media not screen and (min-width: 1200px) { .ord-tracker { right:16px; left:inherit; margin-left:0px; } } @media not screen and (min-width: 988px) { .ord-tracker { bottom:58px; z-index:2; } .ord-tracker[hide="1"] { display:none; } } .ord-tracker img { width:100%; } @keyframes animate-fade { 0% { bottom: 400px; opacity: 0; } 100% { bottom: 84px; opacity: 1; } } @media not screen and (min-width: 988px) { @keyframes animate-fade { 0% { bottom: 400px; opacity: 0; } 100% { bottom: 58px; opacity: 1; } } } @media not screen and (min-width: 988px) { .head .pos-show { display:none; } } .pos-show[odstype="dsp"] { display:none; } .pos-show[visible="false"] { display:none; } .pos-hide { display:none; float:left; margin-top:12px; margin-left:12px; } @media not screen and (min-width: 652px) { .pos-panel1 { margin-top:24px; margin-bottom:24px; width:652px; position:static; margin-left:0px; } .pos-show { display:inline; margin-right:16px; margin-top:8px; } .pos-hide { display:inline; } } .pos-link { float:left; width:40px; height:40px; margin-top:8px; margin-left:8px; background:url(img/menu.png) no-repeat; background-size: 100%; } .pos-order li { height: 26px; list-style-type: none; border-width: 0px; text-align:left; font-size: 15px; font-weight: normal; padding-top: 10px; overflow: hidden; white-space:nowrap; } @media not screen and (min-width: 988px) { .pos-order li { height: 30px; font-size: 16px; } } @media not screen and (min-width: 652px) { .pos-order li{ padding-right:8px; } } .pos-order li:first-child { border-top-width: 0px; } .pos-order li[voided="1"] { background: #f0c0c0; } .pos-order li[xxx="1"] { background:#ffffff; } .pos-order li[sel1="yes"] { background:#00ff00; color:#000000; } .pos-order li[visible="false"] { display:none; } .pos-order li[kind="X"] { } .pos-order li[kind="X"] img { float: left; width:16px; padding-left: 8px; padding-right: 3px; } .pos-order li[kind="X"] { padding-top: 4px; padding-bottom: 6px; padding-left: 8px; } .pos-order li[kind="X"] span { display:inline-block; margin-top: 0px; margin-left: 30px; padding-top: 7px; text-align:center; height:23px; width:216px; font-weight: normal; color:#ffffff; -webkit-border-radius: 8px; } .pos-order li[kind="X"] span[clr="g"] { background:green; } .pos-order li[kind="X"] span[clr="r"] { background:red; } .pos-order li[kind="F"] { padding-left: 108px; } .pos-order li[kind="B"] { color: #800080; } .pos-order li[kind="B"]:active1 { background: #0000ff; color: #ffffff; } .pos-order li[kind="D"] { color:#000080; } .pos-order li[kind="T"] { display:none; } .pos-order li[kind="TX"] { padding-left: 8px; color:#ff8000; border-top:1px solid #ccc; } .pos-order li[kind="A"] { padding-top: 6px; border-top:1px solid #ccc; color:#ff0000; } .pos-order li[kind="Y"] { color:#008000; padding-left:8px; padding-top:4px; } .pos-order li[kind="E"] { cursor:pointer; border-style: solid; text-align: center; border-radius:8px; padding-top:4px; padding-bottom:4px; height:28px; border-width: 2px; border-style: solid; line-height:22px; padding-top:12px; padding-bottom:4px; } .pos-order li[kind="E"][submit="yes"] { background: #ff8040; color: #fff; } .pos-order li[kind="E"][disabled="yes"] { cursor:auto; background: #777; color: #fff; } .pos-order li[kind="U"] { color:#808000; padding-left:8px; padding-top:4px; } .pos-order li[kind="I"] { cursor:pointer; padding-left: 4px; border-top:1px solid #ccc; } .pos-order li[kind="CLR"] { cursor:pointer; border-style: solid; background: inherit; font-family:Helvetica,Arial,sans-serif; text-align: left; padding-top:10px; padding-bottom:4px; padding-left:16px; height:30px; line-height:22px; } .pos-order li[kind="I"]:hover { } .pos-order li[kind="L"] { cursor:pointer; padding-left: 4px; color: #0000ff; } .pos-order li[kind="R"] { padding-left: 8px; color: #ff0000; border-top:1px solid #ccc; } .pos-order li[kind="G"] { padding-left: 8px; color: #288028; border-top:1px solid #ccc; } .pos-order li[kind="X"] { padding-left: 8px; border-top:2px solid #777; margin-top:4px; padding-top:12px; padding-bottom:4px; } .pos-order li[kind="W"] { padding-left: 18px; } .pos-order li[kind="H"] { padding-left: 8px; background: #f8f3dc; color: #000; } .pos-order li[kind="P"] { padding-left: 8px; color: #0000ff; } .pos-order li[kind="P"][type="bank"] { background: green; color: #fff; } .pos-order[order="yes"] li:last-child { border-bottom-width:0; } .pos-order li .text { text-overflow: ellipsis; padding-left:8px; overflow: hidden; width:auto; text-overflow: ellipsis; } .pos-order li img { float: left; width:16px; padding-left: 8px; padding-right: 8px; } .pos-order li value { float:right; margin-right:22px; width:60px; text-align:right; } @media not screen and (min-width: 652px) { .pos-order li value { margin-right:32px; } } .pos-order li .line[dis="1"] { background:#000080; position:absolute; left:64px; width:100px; height:2px; } .pos-order li .line[crg="1"] { background:#ff0000; position:absolute; left:64px; width:100px; height:2px; } .pos-order li .line[pay="1"] { background:#008000; position:absolute; left:64px; width:100px; height:2px; } .pos-order li .line[cob="1"] { background:#800080; position:absolute; margin-top:-28px; left:8px; width:6px; height:36px; } .pos-order li .line[xxx="1"] { background:#eeeeee; position:absolute; margin-top:-28px; left:8px; width:6px; height:40px; } .pos-order li .price { float:right; width:60px; text-align:right; } .pos-order li .close { float:right; width:36px; font-size:36px; font-weight:bold; margin-top:-14px; margin-right:8px; cursor:pointer; } @media screen and (min-width: 988px) { .pos-order li .close { display:none; } } .pos-order li .close img { margin-top:8px; margin-left:-8px; position:relative; width:32px; height:32px; } .pos-order li count { margin: 0px 4px 0px 4px; font-weight:bold; float:right; color:#0000ff; } .pos-order li .quantity { float:right; width:42px; min-width:42px; font-weight:bold; text-align:right; } .pos-order li .del { float:right; margin-top:-8px; width:24px; height:32px; line-height:32px; min-width:24px; font-weight:normal; text-align:center; color:#ff0000; cursor: pointer; } @media not screen and (min-width: 652px) { .pos-order li .del { } } .pos-order li .del:hover { text-decoration: underline; } .pos-order li nil { float:left; width:32px; text-align:right; } .pos-order li sep { position:relative; left:54px; width:2px; height:46px; float:left; top: -12px; border-left-color: #666666; border-width: 2px; border-left-style: solid; } .pos-order li cat { padding: 8px 8px 8px 8px; font-size:24px; font-weight:bold; } .pos-order li add { width:48px; height:48px; vertical-align:center; float: left; color: #ffffff; text-decoration: none; display: inline-block; background-position: center center; background-repeat: no-repeat; margin: 0px 4px 0px 4px; } .pos-order li del { width:48px; height:48px; vertical-align:center; float: left; color: #ffffff; text-decoration: none; display: inline-block; background-position: center center; background-repeat: no-repeat; margin: 0px 4px 0px 4px; } .pos-order li[kind="M"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 12px; color:#777; padding: 0px 8px 8px 0px; } .pos-order li[kind="O"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 14px; color:#222; padding: 0px 8px 8px 0px; } .pos-order li[kind="C"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 14px; color:#777; padding: 0px 8px 8px 0px; } .pos-order li[kind="Z"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 14px; color:#777; padding: 0px 8px 8px 0px; } .pos-order li[kind="S"] { height:4px; border-top:4px solid #800080; } .pos-order li[attr="yes"]{ list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 14px; color:#777; padding: 0px 8px 8px 56px; } .pos-order li:last-child[attr="yes"] { border-style: dotted; border-bottom-width: 1px; } .pos-order li[kind="A"] { padding-top: 4px; padding-bottom: 4px; padding-left: 4px; color: #288028; height:36px; } .pos-order li select { width: 100%; height:32px; text-align:left; font-size: 15px; margin-top:2px; padding-left:4px; -webkit-border-radius: 4px; background:#fff; border: solid 1px #ddd; outline: none; } .pos-order li select[red="yes"] { border: solid 2px #ff0000; } .pos-order li[disabled="yes"] { } .pos-bevel { position:fixed; top:0px; right:0px; width:294px; z-Index:996; background: #f8f3dc; background: #eee; display:none; } .pos-bevel[disabled="yes"] { background: #ccc; } @media not screen and (min-width: 652px) { .pos-bevel { width:100%; } } /* pos-preview ---------------------------------------------------------------------- */ .pos-preview { padding: 8px 6px 8px 6px; background: #eee; overflow:hidden; border: 1px solid #ccc; width:412px; min-height:200px; max-height:200px; overflow:hidden; overflow-y:scroll; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; margin-bottom:12px; } @media not screen and (min-width: 652px) { .pos-preview { left:0px; display:inline-block; width:100%; padding-left:0px; padding-right:0px; border:0px; overflow:hidden; } } .pos-preview[disabled="yes"] { background: #ccc; } .pos-preview li { height: 28px; list-style-type: none; border-top-color: #cccccc; border-width: 0px; border-top-width: 1px; border-style: solid; text-align:left; font-size: 15px; font-weight: normal; padding-top: 10px; overflow: hidden; white-space:nowrap; } .pos-preview li:first-child { border-top-width: 0px; } .pos-preview li[voided="1"] { background: #f0c0c0; } .pos-preview li[xxx="1"] { background:#ffffff; } .pos-preview li[sel1="yes"] { background:#00ff00; color:#000000; } .pos-preview li[visible="false"] { display:none; } .pos-preview li[kind="X"] { background:#ffffff; } .pos-preview li[kind="X"] img { float: left; width:16px; padding-left: 8px; padding-right: 3px; } .pos-preview li[kind="X"] { padding-top: 4px; padding-bottom: 6px; padding-left: 8px; } .pos-preview li[kind="X"] span { display:inline-block; margin-top: 0px; margin-left: 30px; padding-top: 7px; text-align:center; height:23px; width:216px; font-size: 15px; font-weight: normal; color:#ffffff; -webkit-border-radius: 8px; } .pos-preview li[kind="X"] span[clr="g"] { background:green; } .pos-preview li[kind="X"] span[clr="r"] { background:red; } .pos-preview li[kind="F"] { padding-left: 108px; } .pos-preview li[kind="B"] { color: #800080; } .pos-preview li[kind="B"]:active1 { background: #0000ff; color: #ffffff; } .pos-preview li[kind="D"] { color:#000080; } .pos-preview li[kind="A"] { color:#ff0000; } .pos-preview li[kind="Y"] { color:#008000; } .pos-preview li[kind="E"] { cursor:pointer; padding-left: 8px; border-style: solid; background: #55acee; color: #fff; } .pos-preview li[kind="E"][disabled="yes"] { cursor:auto; background: #777; color: #fff; } .pos-preview li[kind="I"] { cursor:pointer; } .pos-preview li[kind="I"]:hover { background:#eee; } .pos-preview li[kind="L"] { cursor:pointer; padding-left: 8px; color: #0000ff; } .pos-preview li[kind="R"] { padding-left: 8px; color: #ff0000; } .pos-preview li[kind="G"] { padding-left: 8px; color: #288028; } .pos-preview li[kind="T"] { padding-left: 8px; font-weight:bold; } .pos-preview li[kind="W"] { padding-left: 38px; } .pos-preview li[kind="H"] { padding-left: 8px; background: #f8f3dc; color: #000; } .pos-preview li[kind="P"] { padding-left: 8px; color: #0000ff; } .pos-preview li[kind="P"][type="bank"] { background: green; color: #fff; } .pos-preview[order="yes"] li:last-child { border-bottom-width:0; } .pos-preview li .text { text-overflow: ellipsis; padding-left:8px; overflow: hidden; width:auto; text-overflow: ellipsis; } .pos-preview li img { float: left; width:16px; padding-left: 8px; padding-right: 8px; } .pos-preview li value { margin: 0px 10px 0px 4px; float:right; margin-right:22px; width:60px; text-align:right; } .pos-preview li .line[dis="1"] { background:#000080; position:absolute; left:64px; width:100px; height:2px; } .pos-preview li .line[crg="1"] { background:#ff0000; position:absolute; left:64px; width:100px; height:2px; } .pos-preview li .line[pay="1"] { background:#008000; position:absolute; left:64px; width:100px; height:2px; } .pos-preview li .line[cob="1"] { background:#800080; position:absolute; margin-top:-28px; left:8px; width:6px; height:36px; } .pos-preview li .line[xxx="1"] { background:#eeeeee; position:absolute; margin-top:-28px; left:8px; width:6px; height:40px; } .pos-preview li .price { float:right; width:60px; text-align:right; } .pos-preview li count { margin: 0px 4px 0px 4px; font-weight:bold; float:right; color:#0000ff; } .pos-preview li .quantity { float:right; width:42px; min-width:42px; font-weight:bold; text-align:right; color:#3e78b3; } .pos-preview li .del { float:right; width:24px; min-width:24px; text-align:center; color:#ff0000; cursor: pointer; } .pos-preview li .del:hover { text-decoration: underline; } .pos-preview li nil { float:left; width:32px; text-align:right; } .pos-preview li sep { position:relative; left:54px; width:2px; height:46px; float:left; top: -12px; border-left-color: #666666; border-width: 2px; border-left-style: solid; } .pos-preview li cat { padding: 8px 8px 8px 8px; font-size:24px; font-weight:bold; } .pos-preview li add { width:48px; height:48px; vertical-align:center; float: left; color: #ffffff; text-decoration: none; display: inline-block; background-position: center center; background-repeat: no-repeat; margin: 0px 4px 0px 4px; } .pos-preview li del { width:48px; height:48px; vertical-align:center; float: left; color: #ffffff; text-decoration: none; display: inline-block; background-position: center center; background-repeat: no-repeat; margin: 0px 4px 0px 4px; } .pos-preview li[kind="M"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 15px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 12px; color:#777; padding: 0px 8px 8px 0px; } .pos-preview li[kind="O"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 15px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 14px; color:#777; padding: 0px 8px 8px 0px; } .pos-preview li[kind="C"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 15px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 14px; color:#777; padding: 0px 8px 8px 0px; } .pos-preview li[kind="Z"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 15px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 14px; color:#777; padding: 0px 8px 8px 0px; } .pos-preview li[kind="S"] { height:4px; border-top:4px solid #800080; } .pos-preview li[attr="yes"]{ list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 15px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 14px; color:#777; padding: 0px 8px 8px 56px; } .pos-preview li:last-child[attr="yes"] { border-style: dotted; border-bottom-width: 1px; } .pos-preview li[kind="A"] { padding-top: 4px; padding-bottom: 8px; padding-left: 8px; color: #288028; } .pos-preview li select { width: 100%; height:32px; text-align:center; font-size: 14px; -webkit-border-radius: 8px; border: solid 2px rgb(170,170,170); } .pos-preview li select[red="yes"] { border: solid 2px #ff0000; } .pos-preview li[disabled="yes"] { } /* framework ---------------------------------------------------------------------- */ .user-menu { height:32px; margin-bottom:32px; } .user-item { float:left; width:24%; height:100%; padding-top:16px; background:#ccc; } .user-item[sel="1"] { background:#fff; } /* combos ---------------------------------------------------------------------- */ .combo-back  { height:480px; padding-right:16px; padding-left:16px; position:relative; } .combo-prev { position:absolute; left:50%; width:64px; height:64px; font-size:40px; top:180px; margin-left:-508px; border-radius:50%; cursor: pointer; } .combo-prev::before { content: " "; position: absolute; left:22px; top:16px; width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-right-width: 16px; border-right-style: solid; } .combo-next { position:absolute; left:50%; width:64px; height:64px; font-size:40px; top:180px; margin-left:446px; border-radius:50%; cursor: pointer; } .combo-next::before { content: " "; position: absolute; left:24px; top:16px; width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-left-width: 16px; border-left-style: solid; } .combo-list { margin-top:24px; white-space: nowrap; overflow-x: scroll; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; -webkit-transition: left 2s; transition: left 2s; } .combo-list li { list-style-type: none; width:216px; height:380px; margin:16px 6px 16px 6px; border-width: 2px; border-style: solid; border-radius: 8px; display:inline-block; white-space: normal; overflow:hidden; sizing:border-box; cursor: pointer; } .combo-list li:hover { background:#55acee; } .combo-list li img { margin-top:12px; height:174px; width:198px; object-fit: cover; overflow:hidden; } .combo-list li H1 { height:36px; padding:0; margin:0; } .combo-list li H2 { height:16px; padding:8px 8px 8px 8px; margin:0px 8px 4px 8px; line-height:20px; font-size:16px; } .combo-list li H3 { height:30px; padding:8px 8px 8px 8px; line-height:20px; margin:0; font-size:15px; color:#444; } .combo-list li H4 { height:60px; padding:8px 8px 8px 8px; line-height:20px; margin:0; font-size:13px; color:#444; } .combo-list li .plus { height:28px; width:64px; font-size:16px; padding-top:8px; margin:0px 8px 4px 8px; background: linear-gradient(#222,#222), linear-gradient(#222,#222), #eee; background-position:center; background-size: 50% 2px,2px 50%; background-repeat:no-repeat; line-height:18px; } /* comp ---------------------------------------------------------------------- */ .comp { bottom:0; padding-top:32px; margin:auto; } @media not screen and (min-width: 652px) { .comp { } } .comp .panel1  { width:1000px; margin:auto; } .comp .menu  { color:#fff; padding-top:16px; padding-bottom:16px; } .comp .menu li  { list-style-type: none; display:inline-block; font-size:16px; padding-left:8px; padding-right:8px; box-sizing :border-box; line-height:32px; } @media not screen and (min-width: 652px) { .comp .menu li  { width:100%; text-align:center; } } .comp .menu li  a { text-decoration: none; } .comp .menu li  a:hover { text-decoration: underline; } .comp .follow  { padding-top:16px; padding-bottom:16px; } .comp .follow li { list-style-type: none; display:inline-block; border-radius:50%; border-width:2px; border-style:solid; width:44px; height:44px; } .comp .follow li:hover { background:#777; } .comp .follow li span { font-size:24px; line-height:42px; } .comp .follow li:hover span { color:#444; } .comp .phone  { height:44px; font-size:24px; padding-top:12px; } .prod { border-top:1px solid #ddd; margin:auto; padding-bottom:4px; background:#fff; } @media not screen and (min-width: 652px) { .prod { padding-bottom:60px; } } /* call ---------------------------------------------------------------------- */ .call { position:fixed; height:64px; width:64px; border-radius:16px; right:0px; bottom:16px; left:50%; margin-left:500px; z-index:999; display:none; } .call img { float:right; width:48px; height:48px; padding:7px 7px 7px 7px; } @media not screen and (min-width: 1200px) { .call { right:16px; left:inherit; margin-left:0px; } } @media not screen and (min-width: 988px) { .call { height:44px; width:44px; bottom:10px; z-index:2; } .call[hide="1"] { display:none; } .call img { width:34px; height:34px; } } .call[vis="1"] { width:220px; background:#BDE5F8; margin-left:344px; } .call span { font-size:22px; line-height:64px; vertical-align: middle; display:inline-block; float:left; text-align:left; padding-left:24px; color:#444; } .call[vis="0"] span{ display:none; } .call[vis="0"] #call-hide{ display:none; } .call[vis="1"] #call-show{ display:none; } /* home ---------------------------------------------------------------------- */ .home { left: 0; right:0; top:0; bottom:0; max-width: 800px; margin:auto; width:100%; height:100%; padding: 0; overflow:hidden; z-INDEX:999; position:absolute; background: center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .back1 { background:#444; background: url(res/back.jpg) no-repeat top center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* boot ---------------------------------------------------------------------- */ .boot { background:#eee; padding-top:92px; padding-bottom:36px; margin:auto; border-bottom:8px solid #ddd; } .boot hr{ max-width:520px; border-top:1px solid #eee; margin-top:48px; } .boot-hourglass { display: inline-block; position: relative; width: 132px; height: 132px; } .boot-hourglass:after { content: " "; display: block; border-radius: 50%; width: 0; height: 0; margin: 6px; box-sizing: border-box; border: 64px solid #777; border-color: #777 transparent #777 transparent; animation: boot-hourglass 1.2s infinite; } @keyframes boot-hourglass { 0% { transform: rotate(0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 50% { transform: rotate(900deg); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 100% { transform: rotate(1800deg); } } /* foot ---------------------------------------------------------------------- */ .foot { clear:both; font-size:16px; line-height:24px; width:100%; padding-left:24px; padding-right:24px; } /* edit ---------------------------------------------------------------------- */ .edit-panel { position: relative; z-index: 1; display: inline-block; margin-top: 10px; padding-left: 8px; padding-right: 8px; background:#fff; width: 340px; vertical-align: top; } .edit-field { position: relative; display: block; float: left; padding-top: 6px; padding-bottom: 0px; padding-left: 1px; font-size:18px; width: 60%; border: none; border-radius: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; z-index: 10; width: 100%; background: transparent; color: #444; } .edit-field:focus { outline: none; } .edit-label { display: inline-block; float: right; width: 40%; color: #6a7989; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; overflow: hidden; padding: 0; width: 100%; color: #777; text-align: left; } .edit-label::before { content: ''; position: absolute; top: 0; width: 100%; height: 3px; background: #fff; -webkit-transform: scale3d(1, 0.4, 1); transform: scale3d(1, 0.4, 1); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; transition: transform 0.3s, background-color 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .edit-label::after { content: attr(data-content); position: absolute; top: 0; left: 0; padding: 4px 1px; color: #da7071; opacity: 0; -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); pointer-events: none; } .edit-field:focus + .edit-label::before { background-color: #da7071; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .edit-field:focus + .edit-label { pointer-events: none; } .edit-field:focus + .edit-label::after { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .edit-descr { position: relative; display: block; padding: 16px 0; width: 100%; padding: 4px 1px; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .edit-field:focus + .edit-label .edit-descr { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } /* legal ---------------------------------------------------------------------- */ .legal { max-width:640px; padding:16px 64px 16px 64px; text-align:left; font-family:monospace; } @media not screen and (min-width: 652px) { .legal { padding:16px 16px 16px 16px; } } .legal H1 { font-size:36px; color:#444; padding-bottom:12px; border-bottom:2px solid #444; } .legal H2 { font-size:28px; color:#444; padding-bottom:12px; } .legal H3 { font-size:20px; color:#444; padding-bottom:8px; padding-top:8px; } .legal p { font-size:15px; line-height:18px; color:#444; padding-bottom:8px; } .legal p[up="1"] { font-size:15px; line-height:20px; color:#444; padding-bottom:0px; padding-left:16px; margin-top:-16px; } .legal p[ns="1"] { border-top:1px solid #444; padding-top:8px; } .legal img { width:48px; } .legal ul { margin-top:-8px; font-size:15px; } .legal ul li { color:#444; margin-left:-8px; padding:6px 6px 6px 6px; background:#eee; margin-bottom:2px; } /* setpre ---------------------------------------------------------------------- */ .setpre { text-align:left; max-width:540px; overflow:hidden; } /* popup ---------------------------------------------------------------------- */ .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); visibility: hidden; opacity: 0; z-index:1999; } .overlay[vis="1"] { visibility: visible; opacity: 1; } .popup { margin: -80px auto; padding: 20px; top:50%; background: #fff; border-radius: 5px; width: 600px; position: relative; box-sizing:border-box; } @media not screen and (min-width: 652px) { .popup { width: 100%; border-radius: 0px; } } .popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color:#0000ff; } .popup .close:hover { color: #06D85F; } .popup .content { max-height: 30%; overflow: auto; font-size:18px; } .popup .okbtn { padding-top: 8px; padding-bottom: 8px; padding-left: 24px; padding-right: 24px; background: #86d1f0; border: none; border-radius: 4px; margin-top: 12px; margin-bottom: 4px; } /* dialogs ---------------------------------------------------------------------- */ .dlg { padding:16px; top:50%; bottom:0; background: #fff; left:0; right:0; position: relative; top: 50%; transform: translateY(-50%); width:600px; margin:auto; border-radius:6px; padding-bottom: 24px; box-shadow: 0 0 36px -12px rgba(0, 0, 0, 0.4); } @media not screen and (min-width: 988px) { .dlg { top: auto; bottom:0; position: absolute; transform:inherit; margin:0; max-height:320px; width:auto; border-radius:0; } } .dlg .title { position:relative; -webkit-box-shadow: 0 0px 0px -0px #000; } .mes { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 999; background:#eee; display:inline; background-color:rgba(0, 0, 0, 0.5); } .mes[visible="false"] { display: none; visibility:hidden; } .mes[visible="true"] { display:inline; visibility: visible; } .mes[vis="0"] { display: none; visibility:hidden; } .mes[vis="1"] { display:inline; visibility: visible; } .yndlg { font-size: 18px; line-height: 24px; font-weight: normal; padding: 6px 12px 6px 12px; margin-bottom: 12px; text-align:center; background:#eee; color:#222; } @media not screen and (min-width: 988px) { .yndlg { text-align:center; } } .pac-item { height:36px; vertical-align: middle; font-size:16px; } .pac-item-query { vertical-align: middle; font-size:16px; } /* iframe ---------------------------------------------------------------------- */ .iframe { position:absolute; top:0; left:0; border:0; width:100%; height:100%; overflow:hidden; } .iframe[visible="false"] { display: none; } iframe[visible="false"] { display: none; } /* progress ---------------------------------------------------------------------- */ .progress-bar { background-color: #1a1a1a; height: 32px; padding: 4px 4px 4px 4px; margin: 14px 24px 6px 24px; border-radius: 5px; box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; } .progress-bar span { display: inline-block; height: 100%; border-radius: 3px; float:left; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; transition: width .4s ease-in-out; } .blue span { background-color: #34c2e3; } .stripes span { background-size: 30px 30px; background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); animation: animate-stripes 1s linear infinite; } @keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;} } /* dash ---------------------------------------------------------------------- */ .dash { width:840px; padding: 32px 24px 16px 24px; border-radius:16px; position:relative; } @media not screen and (min-width: 752px) { .dash { width:100%; padding: 32px 0px 16px 0px; } } .dash .data .disp { margin-left: 40px; } @media not screen and (min-width: 752px) { .dash .data .disp { margin-left: 0px; } } .dash-left { width:100px; float:left; } @media not screen and (min-width: 752px) { .dash-left { display:none; } } .dash img { position: relative; width:120px; top:30px; left:30px; } .dash-total { position: absolute; width:100px; top:180px; left:48px; font-size:16px; } @media not screen and (min-width: 752px) { .dash-total { display:none; } } .dash-count { position: absolute; left:112px; top:44px; width:40px; height:40px; border-radius:50%; font-size:18px; line-height:40px; border:4px solid; } @media not screen and (min-width: 752px) { .dash-count { display:none; } } .dash-main { width:420px; height:110px; margin-left:-100px; display:inline-block; } @media not screen and (min-width: 752px) { .dash-main { margin-left:0; } } @media not screen and (min-width: 460px) { .dash-main { width:100%; } } .dash-type { float:left; width:112px; height:90px; margin-left:16px; background:#fff; border:4px solid; border-radius:8px; cursor:pointer; } .dash-type[sel="1"] { } @media not screen and (min-width: 460px) { .dash-type { margin-left:2%; width:28%; } } .dash-type img { width:60px; height:60px; top:6px; left:0px; } .dash-text { position:relative; top:6px; font-size: 14px; } .dash-cont { width:420px; height:40px; margin-left:-100px; text-align:left; display:inline-block; } /* ============================================== Entrance ============================================== */ .Entrance{ animation-name: Entrance; -webkit-animation-name: Entrance; animation-duration: 0.3s; -webkit-animation-duration: 0.3s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes Entrance { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes Entrance { 0% { opacity:0; } 100% { opacity:1; } } /* ============================================== EntranceB ============================================== */ .EntranceB { animation-name: EntranceB; -webkit-animation-name: EntranceB; animation-duration: 0.3s; -webkit-animation-duration: 0.3s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes EntranceB { 0% { transform: translateY(140%); opacity:0; } 100% { transform: translateY(0%); opacity:1; } } @-webkit-keyframes EntranceB { 0% { -webkit-transform: translateY(140%); opacity:0; } 100% { -webkit-transform: translateY(0%); opacity:1; } } /* ---------------------------------------------------------------------- h -->none prognosi (c) john paizis 1.2 08/10/13 ---------------------------------------------------------------------- */ /* app... ---------------------------------------------------------------------- */ /* pos... ---------------------------------------------------------------------- */ .pos-panel { margin-left:658px; position:fixed; padding:0; top:240px; width:300px; z-Index:998; padding-left:0px; transition-property: top; transition-duration: 0.4s; transition-delay: 0s; } @media not screen and (min-width: 988px) { .pos-panel { transition-property: none; background-color: rgba(0,0,0,0.5); margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; top: 0; left: 0; bottom:0; width: 100%; height: 100%; } .pos-panel[disabled="yes"] { background: #ccc; } } .pos-order { padding: 12px 8px 24px 8px; background: #fff; border-width: 2px; border-style: solid; min-height:400px; border-radius:10px; overflow:hidden; } .pos-order[disabled="yes"] { background: #ccc; } @media not screen and (min-width: 988px) { .pos-order { padding: 0px 0px 0px 0px; margin: auto; position: absolute; top: 32px; bottom: 32px; max-height:720px; margin-left:-260px; left:50%; width:516px; border-radius:8px; z-Index:999; } .pos-order .header { position: absolute; top: 4px; left: 12px; right: 4px; height:46px; z-Index:999; } .pos-order .basket { position: absolute; left: 4px; right: 4px; top: 46px; padding-left: 8px; padding-right: 8px; bottom: 100px; box-sizing:border-box; overflow-y: scroll; } .pos-order .footer { position: absolute; bottom:0; left: 16px; right: 16px; height:92px; } } @media not screen and (min-width: 560px) { .pos-order { top:96px; bottom:0; margin-left:0; border-radius:0px; border-top-left-radius:16px; border-top-right-radius:16px; border:0; left:0; width:100%; } }