/* ---------------------------------------------------------------------- xqpos (c) xqpos ---------------------------------------------------------------------- */ html { width:100%; height:100%; overflow:hidden; } body { margin:0; padding:55px 0 0 0; left:0px; top:0px; background:#fff; overflow:hidden; height:auto; position: fixed; right:0; bottom:0; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); font-family:Roboto,Arial; } @media (min-width: 1025px) { body { } } div.frame { width:100%; height:100%; } div.footer { height: 48px; width: 100%; background:#cccccc; border-top: 4px solid #bbbbbb; Z-INDEX : 800; position:fixed; left:0; bottom:0; } div.footer h1 { left: 50%; position:absolute; margin: 0; padding-top: 6px; height: 40px; font-size: 20px; font-weight: bold; text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0; text-align: center; color: #FFFFFF; } div.trans { height:100%; top:0px; left:0px; } div.pagebox { padding:0; width:100%; height:100%; } div.hidden { display: none; } article li { height: 36px; background: #ffffff; list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: solid; font-size: 18px; font-weight: bold; margin: 0; } article li[active="true"] { background-color: #194fdb; background-repeat: no-repeat, repeat-x; background-position: right center, left top; color: #FFFFFF; } article li a { display: block; color: inherit; text-decoration:none; height: inherit; } __article li a:active { background-color: #194fdb; background-repeat: no-repeat, repeat-x; background-position: right center, left top; color: #FFFFFF; } article li a:hover { } article li a div { float:left; padding: 6px 4px 4px 0px; } img[role="menu"] { background: transparent url(icons-18-black.png) 18px 18px no-repeat; background-position:-108px 0; width: 36; float: right; padding: 12px 8px 8px 8px; } img[role="icon"] { padding:0; margin:0; float:left; width:32px; padding: 2px 0px 0px 2px; } div._panel { background: #ffffff; list-style-type: none; border-color: #cccccc; border-width: 1px; border-style: solid; padding: 8px 8px 8px 8px; font-size: 18px; font-weight: bold; margin: 10px; border-radius:10px; } div._panel li { height:32px; padding:0; margin:0; } div.sep { height:1px; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: solid; padding:0; margin:0; } div.panel li div.label { border:0; font-size:16px; font-weight:none; position:fixed; padding: 2px; } div.panel li input.edit { border:0; font-size:16px; font-weight: bold; position:fixed; left:120px; } div[visible="false"] { display: none; } li[visible="false"] { display: none; } .header { margin: 0px 0px 0px 0px; padding: 4px 8px 4px 52px; height: 32px; line-height: 34px; text-align:left; font-size: 18px; font-weight1: bold; color:#777; background: #eee; } .butt { border-top: 8px solid #eee; height:0px; } .button { padding: 10px 8px 10px 12px; height: 28px; line-height: 30px; text-align:left; font-size: 16px; font-weight1: bold; border-bottom: 1px solid #eee; white-space: nowrap; overflow: hidden; } @media (min-width: 1025px) { .button[type="null"] { display:none; } } .button[xtype="flat"] { border-bottom: 0px; } .button[xtype="pack"] { margin-top:0px; margin-bottom:0px; } .button[xtype="text"] { color: #222; } .button[xtype="blue"] { color: #3e78b3; } .button[xtype="scan"] { } .button[xtype="combo"] { color: #3e78b3; background: #eee; height: 24px; line-height: 26px; border-top: 3px solid #fff; border-bottom: 1px solid #fff; } .button[xtype="info"] { border-bottom: 0px; background:#fff; color: #3e78b3; } .button[xtype="green"] { color: #008000; } .button[xtype="red"] { background: #ff0000; color: #fff; } .button[xtype="gray"] { color: #3e78b3; } .button[xtype="cx"] { box-sizing: border-box; border-radius:8px; border:2px solid #ddd; margin-right:2px; text-align:right; height: 32px; padding-top: 4px; line-height: 22px; color: #3e78b3; width: -webkit-calc(20% - 4px); float:left; } .button:active1 { background: #0000ff; color: #ffffff; } .button[touch="yes"] { background: #0080ff; color: #ffffff; } .button[disabled="yes"] { opacity:0.6; border-bottom: 1px solid #ddd; background: #ffffff; color: #444444; } .button[selected="yes"] { background: #008000; color: #ffffff; } .button[color="red"] { color: #ff0000; } .button[xtype="green"] { color: green; } .button[sel="1"] { background: #3e78b3; color: #fff; } .button img { float: left; border-style: none; margin-top:-2px; width:32px; height:32px; } .button[disabled="yes"] img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .button info { margin-top: -2px; margin-left: 2px; float: left; width:26px; height:26px; line-height:26px; border-radius:50%; border: 2px solid #777; color: #777; font-size:16px; text-align:center; } .button text { display: inline-block; text-overflow:ellipsis; max-width: calc(100% - 60px); margin-left: 8px; float: left; } .button next { margin-top: -2px; float: right; width:24px; height:30px; } .button next:after { position: relative; top: -8px; bottom: 0; left: 0; right: 0; content: "\203A"; /* use the hex value here... */ color:#ccc; font-size: 36px; font-weight:normal; line-height: 40px; text-align: right; } .button .alert { float:right; padding-right:8px; color: #ff0000; } .button checked { margin-top: -2px; float: right; width:40px; height:30px; background: url(res/img-checked.png) no-repeat; } .button gi { height: 42px; height: 42px; margin: 0px 80px 8px 4px; position : absolute; right : 0px; font-weight:bold; font-size:16px; color:#0000ff; } .button ei { height: 42px; height: 42px; margin: 0px 80px 8px 4px; position : absolute; right : 0px; font-weight:bold; font-size:16px; color:#800080; } .button price { height: 42px; height: 42px; margin: 0px 80px 8px 4px; position : absolute; right : 0px; font-weight:bold; font-size:16px; color:#3e78b3; } .button[flashing="yes"] { animation:worknotify 2s; -moz-animation:worknotify 2s infinite; -webkit-animation:worknotify 2s infinite; } @keyframes flashing { 0% {background:#008000;color: #fff;} 50% {background:#eee;color: #444;} 100% {background:#008000;color: #fff;} } @-moz-keyframes flashing { 0% {background:#008000;color: #fff;} 50% {background:#eee;color: #444;} 100% {background:#008000;color: #fff;} } @-webkit-keyframes flashing { 0% {background:#008000;color: #fff;} 50% {background:#eee;color: #444;} 100% {background:#008000;color: #fff;} } .button[notif="yes"] { animation:notif 1s; -moz-animation:notif 1s infinite; -webkit-animation:notif 1s infinite; } @keyframes notif { 0% {background:#fff;} 50% {background:#ccc;} 100% {background:#fff;} } @-moz-keyframes notif { 0% {background:#fff;} 50% {background:#ccc;} 100% {background:#fff;} } @-webkit-keyframes notif { 0% {background:#fff;} 50% {background:#ccc;} 100% {background:#fff;} } select[type="butt"] { padding: 4px 8px 4px 48px; height: 44px; text-align:left; font-size: 16px; font-weight1: bold; width:100%; border-bottom: 1px solid #eee; background: #3e78b3; color:#fff; box-sizing: border-box; border:none; } select[visible="false"] { display:none; } a.tool { padding: 0 6px; line-height: 44px; height: 40px; font-family: inherit; font-size: 16px; } a.tool[shape="back"] { margin: 4px 5px 5px 16px; float: left; left: 6px; width:40px; background: url(res/back.png) no-repeat; background-size: 32px 32px; } a.conx { padding: 0 6px; line-height: 44px; height: 40px; font-family: inherit; font-size: 16px; margin: 4px 2px 5px -8px; float: right; left: 6px; width:40px; background: url(res/img-offline.png) no-repeat; background-size: 32px 32px; animation: conx-blinker 1s linear infinite; } @keyframes conx-blinker { 50% { opacity: 0; } } a.conx[visible="false"] { display: none; } @media screen and (min-width: 1024px) { a.tool[shape="back"] { margin: 2px 2px 5px 2px; margin-left:324px; width:32px; } body[vert="1"] a.tool[shape="back"] { margin: 2px 2px 5px 2px; margin-left:16px; width:40px; } } a.tool[shape="conn"] { margin: 10px 8px 5px 2px; position:absolute; width:24px; height: 24px; padding:0 0 0 0; border-radius:50%; background:#999; left:242px; } @media not screen and (min-width: 1024px) { a.tool[shape="conn"] { left:60px; } } a.tool[shape="dots"] { margin: 2px 2px 5px 2px; position: absolute; padding-left:8px; padding-top:2px; left:280px; width:26px; height:32px; border:2px solid #eee; border-radius:6px; background-size: 32px 32px; } @media not screen and (min-width: 1024px) { a.tool[shape="dots"] { display:none; } } a.tool[shape="plus"] { margin: 8px 0px 5px 16px; float: right; left1: 6px; width:36px; background: url(res/plus.png) no-repeat; background-size: 32px 32px; } a.tool[shape="sele"] { margin: 8px 0px 5px 16px; float: right; left1: 6px; width:36px; background: url(res/plus.png) no-repeat; background-size: 32px 32px; } a.tool[shape="menu"] { margin: 4px 0px 5px 4px; float: right; width:36px; background: url(res/menu.png) no-repeat; background-size: 32px 32px; } a.tool[shape="icon"] { margin: 8px 8px 5px 16px; float: right; left1: 6px; width:36px; } a.tool[shape="icon"] img { width:32px; height:32px; } a.tool[visible="false"] { display:none; } a.tool[shape="y"] { margin: 8px 5px 5px 8px; float: left; width:64px; height:42px; line-height:42px; color:#3e78b3; background:#eee; text-align: center; } a.tool[shape="n"] { margin: 8px 5px 5px 8px; float: left; width:64px; height:42px; line-height:42px; color:#777; background:#eee; text-align: center; } 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: 16px; color: #3e78b3; float: right; } a.tool[shape="tool"] { margin: 4px 5px 5px 12px; padding-left: 6px; padding-right: 6px; float: right; } a.tool[shape="exec"] img{ margin-top: 0px; } 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; } button.skip { background-color: #8c9cbf; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8c9cbf), color-stop(50%, #546a9e), color-stop(50%, #36518f), color-stop(100%, #3d5691)); background-image: -webkit-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%); background-image: -moz-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%); background-image: -ms-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%); background-image: -o-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%); background-image: linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%); border: 1px solid #172d6e; border-bottom: 1px solid #0e1d45; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0 1px 0 0 #b1b9cb; -moz-box-shadow: inset 0 1px 0 0 #b1b9cb; -ms-box-shadow: inset 0 1px 0 0 #b1b9cb; -o-box-shadow: inset 0 1px 0 0 #b1b9cb; box-shadow: inset 0 1px 0 0 #b1b9cb; color: #fff; font: bold 16px "helvetica neue", helvetica, arial, sans-serif; padding: 7px 0 8px 0; text-decoration: none; text-align: center; text-shadow: 0 -1px 1px #000f4d; width: 150px; } button.skip:hover, button.skip:active { background-color: #7f8dad; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7f8dad), color-stop(50%, #4a5e8c), color-stop(50%, #2f477d), color-stop(100%, #364c80)); background-image: -webkit-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%); background-image: -moz-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%); background-image: -ms-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%); background-image: -o-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%); background-image: linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%); cursor: pointer; } .dots-info { position:absolute; top:440px; text-align: center; color:#444; font-size:20px; font-weight:bold; left:24px; width:280px; } .pin-button { margin: 6px 6px 6px 6px; padding: 6px 6px 6px 6px; height: 48px; width: 64px; position:absolute; opacity:0.9; background:#eeeeee; background-position:center; background-repeat:no-repeat; background-size:36px 36px; -webkit-box-shadow: 0 0 8px #3e78b3; border-top-left-radius: 12px; border-top-right-radius: 12px; -webkit-border-bottom-left-radius: 12px; -webkit-border-bottom-right-radius: 12px; } .pin-button[touch="yes"] { background-color: #0080ff; color: #ffffff; } .pin-button text { line-height: 48px; text-align:center; font-size: 32px; font-weight: bold; margin-top: 14px; margin-left: 22px; color:#3e78b3; } /* bars ---------------------------------------------------------------------- */ .bar1, .bar2, .bar3 { width: 24px; height: 1px; background-color: #787979; margin: 8px 0; } .bar1 { margin-top: 6px; } /* mdi ---------------------------------------------------------------------- */ .mdi-header { height: 40px; top: 0; width: 100%; background: #cccccc; --Z-INDEX : 100; } .mdi-header h1 { --left: 0px; --position: absolute; --width: 0px; float: left; margin: 0; padding: 8px 6px 6px 8px; font-size: 20px; font-weight: bold; text-shadow: rgba(180, 180, 180, 0.4) 0px -1px 0; text-align: center; color: #555555; } .mdi-footer { height: 40px; width: 100%; --Z-INDEX : 100; clear: both; } /* page ---------------------------------------------------------------------- */ .page { position:absolute; background:#fff; z-Index:1; margin:auto; max-height:768px; animation-duration: 0.6s; } .page[form="1"] { background: #f3f4f5; } @media (min-width: 1024px) { .page { left: 0px; right: 0px; top: 0px; bottom: 0px; width: 1024px; margin:auto; } } @media (min-width: 460px) { body[vert="1"] .page { width: 460px; margin:auto; } } @media (min-width: 460px) and (max-width: 1023px) { .page { width: 460px; margin:auto; } } @media (max-width: 1025px) { .page { left: 0px; right: 0px; top: 0px; bottom: 0px; } } .load { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 1; background-color: rgba(0,0,0,0.3); display:none; } .load[loading="yes"] { display:inline; z-index: 999; } .spinner { margin:auto; position: relative; top:50%; width: 70px; text-align: center; width:200px; height:200px; } .spinner > 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; } .spinner .bounce1 { background:#3e78b3; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; background:#3e78b3; } .spinner .bounce3 { background:#3e78b3; } @-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); } } .sleep { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 1; background:rgba(0,0,0,0.3); background-image: url(res/hour.png); background-position: center center; background-repeat: no-repeat; display:none; } .sleep[sleeping="yes"] { display:inline; z-index: 999; } .work { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 1; display:none; } .work[working="yes"] { display:inline; z-index: 999; } .dialog { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 999; background:#666666; display:inline; } /* label ---------------------------------------------------------------------- */ .label { margin: 0; text-align: center; vertical-align: text-bottom; --background:#ff0000; } .label[align="client"] { height: inherit; } .label span { position: absolute; margin-top : -0.5em; top: 50%; } /* panel ---------------------------------------------------------------------- */ .panel { padding: 4px 0px 4px 0px; } .panel[align="client"] { width:100%; --height:100%; } .panel[clr="page"] { background:#eeeeee; } /* headers... ---------------------------------------------------------------------- */ .h1 { padding: 6px 6px 6px 6px; margin-top: 2px; font-size:16px; text-align:left; color:#606060; } /* slot ---------------------------------------------------------------------- */ .line { height:2px; } .s-line { margin-top: 8px; border-top: solid 1px #bbbbbb; margin-bottom: 7px; } .slot { margin: 0px 0px 0px 0px; border-top1: 8px solid #eee; border-bottom: 8px solid #eee; background:#ffffff; } .slot[color="green"] { background: #008000; color: #ffffff; } .slot[color="red"] { background: #ff0000; color: #ffffff; } .slot[color="yellow"] { background: #ffff80; color: #000000; } .slot[color="def"] { background: #eeeeee; color: #000000; } .slot li { list-style-type: none; padding: 8px 8px 8px 12px; height: 28px; line-height: 28px; border-top: 1px solid #eee; overflow: hidden; } .slot li:first-child { border-top-width: 0px; } .slot li[ro="yes"] { background: #eeeeee; } .slot li[color="green"] { background: #008000; color:#fff; } .slot li[color="red"] { background: #ff0000; color: #fff; } .slot li[color="yellow"] { background: #ffffb6; color: #000000; } .slot li label { margin-top: 0px; margin-right: 4px; line-height1:28px; font-size:16px; float:left; align: right; width:40%; text-align:right; color:#000000; } .slot li label[__link="yes"] { text-decoration: underline; } .slot[pos="1"] li .tool { position: absolute; background: url(res/img-no.png); background-size: 32px 32px; width: 32px; height: 32px; } .slot[pos="1"] li .tool[disabled="yes"] { filter: grayscale(100%); } .slot[pos="1"] li label { color: #3e78b3; } .slot li text { font-size:16px; color:#888; } .slot li .link { color:#000080; } .slot[color="green"] li text { color:#fff; } .slot[color="red"] li text { color:#fff; } .slot li h1 { padding: 9px 8px 8px 8px; margin-top: 2px; margin-bottom: 2px; font-size:15px; float:left; text-align:right; color:#000000; } .slot li round { padding: 8px 8px 8px 8px; margin: 12px 0px 12px 12px; width:4px; height:4px; float:left; border-radius:50%; background:#cccccc; } .slot li round[ok="yes"] { background:#3e78b3; } .slot li warning { position:relative; width:20px; height:20px; } .slot li info { padding: 6px 6px 6px 6px; margin-top: 4px; font-size:15px; float:left; width:50%; text-align:left; overflow: hidden; white-space: nowrap; color:#606060; } .slot li info[type="full"] { width:100%; } .slot input { border: 0; margin-left: 2px; padding-left: 2px; height:26px; font-size:16px; display: inline; overflow: hidden; width:50%; color:#3e78b3; border-bottom:1px solid #ccc; background: #fff; outline: none; } .slot input[type="text"] { } .slot input[type="password"] { } .slot input[type="number"] { -moz-appearance: textfield; } .slot input[type="number"]::-webkit-outer-spin-button, .slot input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .slot input:focus { border-bottom:1px solid #3e78b3; } .slot input[readonly="yes"] { background:#fff; border-bottom:1px solid #ccc; color:#777; } .slot input[type=checkbox] { visibility: hidden; } .slot[pos="1"] input { color:#222; border-bottom:1px solid #fff; } .slot select { font-size:16px; height:24px; } .slot .checkbox { width: 44px; height: 11px; background: #ccc; position: relative; float:left; margin-left:8px; margin-top:8px; border-radius: 3px; } .slot .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; } .slot .checkbox input[type=checkbox]:checked + label { left: 30px; background: green; } .slot .checkbox input[type=checkbox]:disabled + label { cursor: default; } .slot input[full="yes"] { width:90%; } /* dots ---------------------------------------------------------------------- */ .dots { margin-top: 50px; } .dots li { margin-top: 8px; height: 48px; margin-left:6px; margin-right:6px; opacity:0.9; list-style-type: none; overflow: hidden; } .dots li round { padding: 8px 8px 8px 8px; margin: 12px 0px 12px 12px; width:4px; height:4px; float:left; border-radius:50%; background:#eeeeee; -webkit-box-shadow: 0 0 8px #3e78b3; border-top-left-radius: 12px; border-top-right-radius: 12px; -webkit-border-bottom-left-radius: 12px; -webkit-border-bottom-right-radius: 12px; } .dots li round[ok="yes"] { background:#3e78b3; } /* list ---------------------------------------------------------------------- */ .list { background: #fff; margin: 0px 0px 2px 0px; border-bottom:1px solid #ddd; } @media not screen and (min-width: 381px) { .list { border-bottom:8px solid #eee; } } .list li { padding: 0px 0px 0px 0px; height: 45px; line-height: 46px; list-style-type: none; border-top: 1px solid #ddd; font-size: 16px; font-weight: normal; overflow: hidden; white-space:nowrap; } .list li:first-child { border-top-width: 0px; } .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; } .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 li[type="sel"] { margin-top: 0px; height: 32px; line-height: 32px; border-top:7px solid #fff; border-bottom:6px solid #fff; width: 78px; text-align: right; background: #eee; } .list li[pending="yes"] li[type="sel"] { border-top:7px solid #ff0000; border-bottom:6px solid #ff0000; } .list li[sel1="yes"] li[type="sel"] { background: #fff; border-top: 7px solid var(--c-bcselect); border-bottom: 6px solid var(--c-bcselect); color: #000; } .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; } /* view ---------------------------------------------------------------------- */ .view { float: left; width: 192px; margin-right: 8px; } .view li { height: 48px; background: #bbbbbb; border-top: 4px solid #cccccc; border-bottom: 4px solid #cccccc; font-size: 16px; font-weight: normal; padding-left: 8px; list-style-type: none; line-height: 48px; vertical-align: middle; } .scroll { top: 50px; bottom: 0px; right:0; left:0; position:absolute; overflow:auto; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; padding-top:0px; padding-bottom:16px; } .scroll[bot="1"] { bottom: 55px; } body[vert="1"] .scroll { border-top:2px solid #eee; } @media not screen and (min-width: 1024px) { .scroll { border-top:2px solid #eee; } } .info { font-size: 16px; font-weight: normal; margin: 6px 6px 6px 6px; padding: 4px 4px 4px 4px; align:left; } /* tools ---------------------------------------------------------------------- */ .tools { height: 48px; width: 100%; background:#cccccc; border-bottom: 8px solid #bbbbbb; Z-INDEX : 800; position:fixed; left:0; bottom:0; } .tools a { position:relative; padding: 2px 2px 2px 2px; width:64px; } .tools a img { border-radius:50%; border: 2px solid #50a0ab; padding: 2px 2px 2px 2px; } .tools a text { position:absolute; width:64px; left:0px; top:-20px; overflow:hidden; text-align:center; } .tools2 { height: 48px; width: 100%; background:#cccccc; border-bottom: 8px solid #bbbbbb; Z-INDEX : 800; position:fixed; left:0; bottom:48px; } /* repl ---------------------------------------------------------------------- */ .repl { background1: #ffffff; padding:0px 0px 24px 16px; } .repl li[type="box"] { height: 32px; list-style-type: none; border-width: 0px; font-size: 17px; font-weight: normal; overflow: hidden; white-space:nowrap; color:#222; } .repl li[type="sep"] { height : 8px; list-style-type: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #ccc; } .repl li[kind="dot"] { border-bottom-style: dotted; } .repl li[type="und"] { list-style-type: none; height : 8px; } .repl li[touch="yes"] { background: #0080ff; color: #ffffff; } .repl li[status="blocked"] { background: #cccccc; } .repl li[sel1="yes"] { background: #ff00ff; } .repl li li { margin-top: 12px; float: left; overflow: hidden; text-overflow: ellipsis; 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; } /* repf ---------------------------------------------------------------------- */ .repf { position: absolute; top: 55px; left: 0; right: 0; bottom: 0; border: 0; } .repf-wrapper { position: fixed; right: 0; bottom: 0; left: 0; top: 55px; -webkit-overflow-scrolling: touch; overflow-y: scroll; } .repf-wrapper iframe { height: 100%; width: 100%; border:0; } /* bx ---------------------------------------------------------------------- */ .bx { __height: 320px; } .bx li { height: 48px; width: 147px; position: absolute; background: #eeeeee; list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; font-size: 16px; font-weight: normal; padding: 4px 0px 4px 0px; margin: 4px 0px 0px 0px; color: #222222; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; } .bx li[type__="sys"] { background: #747474; color: #ffffff; } .bx li[type__="folder"] { background: #ffffff; } .bx li[type__="record"] { background: #d9e9d9; } .bx li:active { background: #0000ff; color: #ffffff; } .bx li span { font-size: 16px; font-weight: normal; margin-top: 8px; } .bx li img { float: left; padding: 6px 6px 6px 6px; margin-left: 4px; margin-right: 2px; width: 32px; height: 32px; } .bx 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; } /* mm ---------------------------------------------------------------------- */ .mm { } .mm[id="root"] { } .mm[id="make"] { } .mm[xactive="false"] { height: 0px; visibility: hidden; } .mm li { background: #eeeeee; list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; font-size: 16px; font-weight: normal; padding: 4px 0px 4px 0px; margin: 4px 0px 0px 0px; color: #222222; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; } .mm li[type__="sys"] { background: #747474; color: #ffffff; } .mm li[type__="folder"] { background: #ffffff; } .mm li[type__="record"] { background: #d9e9d9; } .mm li:active { background: #0000ff; color: #ffffff; } .mm li span { font-size: 16px; font-weight: bold; margin-top: 8px; } .mm li img { float: left; padding: 6px 6px 6px 6px; margin-left: 4px; margin-right: 2px; width: 32px; height: 32px; } .mm 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; } /* vx ---------------------------------------------------------------------- */ .vx { vertical-align:middle; width:370px; position:fixed;left:50%;margin-left:-160px;bottom:0;top:0px; overflow:auto; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; } .vx li { float: left; width: 146px; height: 95px; list-style-type: none; margin: 10px 0px 0px 10px; background: #eeeeee; background-repeat: no-repeat; background-position: center 12px; border-radius: 8px; } .vx li[touch="yes"] { float: left; width: 146px; height: 95px; margin: 10px 0px 0px 10px; background: #0080ff; background-repeat: no-repeat; background-position: center 12px; } .vx li img { display:block; position: relative; top: 50%; left: 50%; margin-left: -16px; margin-top: -34px; } .vx li span { display:block; position: absolute; margin: 66px 0px 0px 0px; padding-top:4px; background:#333333; width:146px; opacity:0.4; color: #ffffff; font-size:16px; font-weight: bold; text-align: center; height: 26px; border-radius: 8px; } /* space ---------------------------------------------------------------------- */ .space { height: 48px; width: 100%; Z-INDEX : 800; position:fixed; left:0; top:0; } /* tool ---------------------------------------------------------------------- */ .title { height: 42px; width: 100%; max-width:1024px; padding-top:6px; background:#fff; Z-INDEX : 800; position:absolute; top:0; } body[info="0"] .title { display:none; } body[slim="1"] .title { display:none; } .title[fixed="yes"] { position:fixed; } .title[bold="1"] { background:#eee; } .title h1 { text-align: left; line-height:14px; position:absolute; width:520px; box-sizing: border-box; margin: 0; left:0; right:0; Z-INDEX : -1; padding: 8px 0px 6px 0px; margin-left:336px; font-size: 16px; font-weight: bold; color: #222; } .title h1 { text-align: center; line-height:20px; width:inherit; margin: 0; } .title count { height: 44px; margin: 10px 40px 8px 4px; position : absolute; right : 0px; font-weight:bold; font-size:22px; color:#008000; } .title sums { height: 44px; margin: 10px 40px 8px 4px; float:left; font-weight:bold; font-size:22px; color:#3e78b3; } /* tiles ---------------------------------------------------------------------- */ .tiles { padding-top:8px; background:#eee; padding-bottom:4px; } .tiles li { list-style-type: none; margin-bottom:4px; height:56px; background:#fff; overflow: hidden; } .tiles li .text { position:relative; top:6px; left:6px; font-size:14px; color:#444; } .tiles li .data { position:relative; top:4px; left:4px; font-size:24px; text-align:right; padding-right:12px; color:#222; } /* offline ---------------------------------------------------------------------- */ .conn { height: 4px; width: 100%; background:#fff; Z-INDEX : 802; position:absolute; left:0; bottom:0px; } .conn[xxxline="yes"] { background:#ff0000; } /* dialogs ---------------------------------------------------------------------- */ .dlg { padding:16px; top:50%; height:200px; background: #fff; left:0; right:0; position: absolute; box-sizing: border-box; width:640px; margin:auto; margin-top:-100px; animation-duration: 0.4s; } .dlg__[type="cb"] { width:440px; height: 520px; margin-top: -260px; } @media not screen and (min-width: 1024px) { .dlg { top:auto; height:auto; margin-top:auto; bottom:0; width:1024px; max-height:320px; } .dlg[type="cb"] { max-height:400px; } } @media (min-width: 1023px) { .dlg { bottom: max(-webkit-calc((100% - 768px)/2), 0px); } } @media (max-width: 1023px) { .dlg { top:auto; height:auto; margin-top:auto; bottom: max(-webkit-calc((100% - 768px)/2), 0px); padding:8px; width: 460px; max-height:320px; } .dlg[type="cb"] { max-height:440px; } } body[vert="1"] .dlg { top:auto; height:auto; margin-top:auto; bottom:0; bottom: max(-webkit-calc((100% - 768px)/2 + 0px), 0px); padding:8px; width: 460px; max-height:320px; } body[vert="1"] .dlg[type="cb"] { max-height:440px; } @media not screen and (min-width: 460px) { .dlg { width: 100%; } body[vert="1"] .dlg { width: 100%; } } @media (max-width: 1024px) { .dlg__[type="cb"] { top:40px; bottom:40px; height:auto; margin:auto; } } body[vert="1"] .dlg__[type="cb"] { top:40px; bottom:40px; height:auto; margin:auto; } .dlg .title { position:relative; -webkit-box-shadow: 0 0px 0px -0px #000; } .dlg a.tool[shape="back"] { margin-left:0px; width: 100%; box-sizing: border-box; padding: 8px 24px 0px 24px; background-position: 8px 4px; background-color: #eee; } .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.6); } .error { font-size: 16px; line-height: 22px; font-weight: normal; padding: 12px 12px 12px 12px; max-height:220px; overflow:hidden; color:#222; } .error img { animation: img-blink 1s linear infinite; } @keyframes img-blink { 50% { opacity: 0; } } .error hr { border-top: 4px solid #ccc; } .yndlg { font-size: 16px; line-height: 24px; font-weight: normal; padding: 12px 12px 12px 12px; color:#222; } .cbdlg { font-size: 16px; line-height: 24px; font-weight: normal; padding: 12px 12px 12px 12px; color:#222; overflow-y: scroll; top:10px; bottom:40px; max-height:320px; } .msgbox { margin: -80px auto; padding: 20px; top:50%; background: #fff; border-radius: 5px; width: 100%; position: relative; } /* work ---------------------------------------------------------------------- */ .work-form { position:absolute; top:0; left:0; right:0; bottom:0; background:#d5d7d9 url(res/xqpos.png) no-repeat center; } @media (min-width: 1025px) { .work-form { background-size:540px; } } @media (max-width: 1023px) { .work-form { background-size:100%; } } @media not screen and (min-width: 381px) { .work-form { } } body[vert="1"] .work-form { background-size:100%; } @media (max-width: 1024px) { .work-form { background-size:100%; } } @media not screen and (min-width: 381px) { body[vert="1"] .work-form { } } .work-box { width:348px; left:50%; margin:auto; margin-left:-170px; padding-top:8px; padding-bottom:8px; position: absolute; height: auto;//408px; overflow-y:scroll; -webkit-overflow-scrolling: touch; top:90px; bottom:80px; } .work-box[full="1"] { margin-top: -280px; height: 460px; top:50%; } @media screen and (min-width: 1024px) { .work-box { margin-top: -280px; width:980px; margin-left:-420px; height: 520px; top:50%; } body[vert="1"] .work-box { margin-top:inherit; margin:auto; width:348px; margin-left:-170px; top:90px; height: auto; } } .work-pack { min-width: 348px; overflow-x: scroll; } @media screen and (min-width: 1024px) { .work-pack { overflow-x: inherit; } } .work-horz { width: 900px; overflow: hidden; padding-bottom: 4px; } .work-horz[nr="3"] { width: 900px; } .work-horz[nr="4"] { width: 900px; } @media not screen and (min-width: 1024px) { .work-horz { width: 900px; } .work-horz[nr="3"] { width: 520px; } .work-horz[nr="4"] { width: 682px; } } .work-part { width:400px; overflow-x:scroll; } @media screen and (min-width: 1024px) { .work-part { width:inherit; overflow-x:inherit; } } .work-head { position:absolute; width:300px; left: 0; right: 0; margin:auto; top:16px; height:36px; line-height:36px; padding-left:8px; background:#eee; opacity:0.6; cursor: pointer; display:none; } .work-user { position:absolute; width:240px; left: 0; right: 0; margin:auto; bottom:20px; height:36px; line-height:36px; padding-left:8px; cursor: pointer; } @media screen and (min-width: 1024px) { .work-user { bottom:66px; } body[vert="1"] .work-user { bottom:20px; } } .work-user[color="green"] { background: #008000; color: #fff; } .work-user[color="red"] { background: #ff0000; color: #fff; } .work-user[notify="1"] { animation:worknotify 2s; -moz-animation:worknotify 2s infinite; -webkit-animation:worknotify 2s infinite; } @keyframes worknotify { 0% {background:#008000;color: #fff;} 50% {background:#eee;color: #444;} 100% {background:#008000;color: #fff;} } @-moz-keyframes worknotify { 0% {background:#008000;color: #fff;} 50% {background:#eee;color: #444;} 100% {background:#008000;color: #fff;} } @-webkit-keyframes worknotify { 0% {background:#008000;color: #fff;} 50% {background:#eee;color: #444;} 100% {background:#008000;color: #fff;} } .work-bars { position:absolute; width:40px; left: 50%; right: 0; margin-left:20px; bottom:18px; height:36px; line-height:36px; margin-left:-158px; cursor: pointer; } @media screen and (min-width: 1024px) { .work-bars { bottom:64px; } body[vert="1"] .work-bars { bottom:18px; } } .work-offline { position:absolute; width:300px; left: 0; right: 0; margin:auto; top:28px; height:40px; } .work-offline img { height:40px; width:40px; float:left; } /* home ---------------------------------------------------------------------- */ .home-button { float: left; width: 152px; height: 92px; opacity:0.9; background:#ffffff; margin: 4px 0px 4px 8px; background-repeat: no-repeat; background-position: 16px 12px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .3); box-shadow: 0 2px 4px #999; background-size:48px 48px; } .home-button[kind="plan"] { background-color: #f4dab2; opacity:0.96; } .home-button[kind="call"] { background-color: #c4a9cf; opacity:0.96; } .home-button[kind="cust"] { background-color: #a6cfbe; opacity:0.96; } .home-button[kind="tool"] { background-color: #bbbbbb; opacity:0.96; } .home-button[kind="reps"] { background-color: #b1c8e0; opacity:0.96; } .work-horz .home-button { margin-bottom: 0px; } .work-box[fullx="1"] .home-button { height: 78px; background-position: center 12px; background-size:40px 40px; } .home-button[touch="yes"] { background: #0080ff; background-repeat: no-repeat; background-position: 16px 12px; background-size:48px 48px; } .home-button[active="0"] { background-color:#ccc; } @media screen and (min-width: 382px) { #NP { display:none; } } @media not screen and (min-width: 1024px) { #XXNULL { display:none; } #XXCHAT { display:none; } #XXNETX { display:none; } #XXPRSS { display:none; } } .home-button p { margin: 60px 4px 0px 4px; padding-top:4px; padding-left:12px; height:24px; opacity:0.96; font-size:16px; text-align: left; } .work-box[fullx="1"] .home-button p { margin-top:52px; padding-left:0px; text-align: center; } .home-button warning { position:relative; left:4px; top:-80px; width:20px; height:20px; } .home-button warning img { width:24px; height:24px; } .home-button upgrade { position:relative; left:110px; top:-80px; width:20px; height:20px; } @keyframes upgrade { from {opacity: 0;} to {opacity: 1;} } .home-button upgrade img { opacity:1; border: 2px solid black; border-radius:50%; -webkit-animation: upgrade 1s infinite; -moz-animation:    upgrade 1s infinite; animation:         upgrade 1s infinite; } .home-button .caption1 { margin: 73px 0px 0px 0px; background:#cccccc; width:146px; opacity:0.6; color: #000000; font-size:16px; font-weight: bold; text-align: center; height: 22px; } .home-button p[color="green"] { background: #008000; color: #ffffff; } .home-button p[color="red"] { background: #ff0000; color: #ffffff; } .home-button p[color="gray"] { background: #666666; color: #ffffff; } .home-button[disabled="yes"] { background-color: #ddd; opacity:0.8; color: #222; } .home-button .mark { font-size: 26px; font-weight: normal; position:relative; left:72px; top:-70px; width:48px; text-align:right; padding:2px 4px 2px 4px; color:#cccccc; } .home-button .mark[flash="1"] { animation:markflash 2s; -moz-animation:markflash 2s infinite; -webkit-animation:markflash 2s infinite; } @keyframes markflash { 0% {opacity:0.2;} 50% {opacity:1;} 100% {opacity:0.2;} } @-moz-keyframes markflash { 0% {opacity:0.2;} 50% {opacity:1;} 100% {opacity:0.2;} } @-webkit-keyframes markflash { 0% {opacity:0.2;} 50% {opacity:1;} 100% {opacity:0.2;} } .page-button { float: left; width: 56px; height: 40px; line-height: 40px; background:#fff; opacity:0.9; padding-left: 8px; border: 2px solid rgba(0, 0, 0, .3); margin: 16px 0px 12px 0px; } .page-button[sel="1"] { background:#3e78b3; color: #fff; } .page-button[disabled="yes"] { background-color: #ddd; opacity:0.8; color: #222; } .page-button[full="1"] { width: 132px; } .dash-button { float: left; width: 316px; height: 94px; opacity:0.9; background:#ffffff; margin: 4px 0px 4px 8px; background-repeat: no-repeat; background-position: 16px 12px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .3); box-shadow: 0 2px 4px #999; box-sizing: border-box; padding:4px 4px 4px 4px; } .stat-button { float: left; width: 316px; height: 94px; opacity:0.9; background:#ffffff; margin: 8px 0px 0px 8px; background-repeat: no-repeat; background-position: 16px 12px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .3); box-shadow: 0 2px 4px #999; box-sizing: border-box; padding:4px 4px 4px 4px; } .stat-button .stat { left:2px; float:left; margin-top:12px; padding: 4px 8px 4px 8px; margin-left: 16px; margin-right: 2px; width: 32px; height: 32px; } .stat-button .stat > div { width: 24px; height: 24px; margin:3px 3px 3px 3px; background-color: #eee; border: 2px solid #aaa; border-radius: 100%; display: inline-block; } .stat-button .stat[nr="3"] > div { background-color: #ccc; } .stat-button .stat[nr="0"] > div { background-color: #ff0000; } .stat-button .stat[nr="1"] > div { background-color: #00ff00; } .stat-button .stat[nr="2"] > div { background-color: #00ff00; } .null-button { float: left; width: 154px; height: 78px; margin: 8px 0px 0px 8px; } .home-caption { float: left; width: 142px; height: 30px; margin: 8px 4px 0px 4px; font-size:20px; padding-top:24px; padding-left:24px; opacity:0.5; color:#000000; text-shadow: 2px 2px 2px #ffffff; text-align: left; } .np { clear: both; width: 100%; height: 0px; } .op {  } @media not screen and (min-width: 1024px) { .op { clear: both; width: 100%; height: 0px; } } .cprognosi { height: 32px; margin-top: 6px; float: left; left: 0; width: 100%; background:#cccccc; opacity:0.5; color:#000000; font-size:24px; text-shadow: 2px 2px 2px #ffffff; } @-webkit-keyframes blink { from { background: #ffffff; } to { background: #eeeeee; } } .blink { -webkit-animation-name: blink; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear(1.0, 0, 0, 1.0); -webkit-animation-duration: 1s; } /* form ---------------------------------------------------------------------- */ .form { margin-top: 4px; margin-bottom: 12px; } .form .button { padding: 8px 8px 8px 8px; height: 16px; text-align:center; font-size: 16px; font-weight: bold; background: #7c91ac; color: #ffffff; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 0px; border: 0px; width:160px; margin-left:181px; } .form .button:active { background: #0000ff; color: #ffffff; } .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:4px; border: 0px; clear: both; } .form .h1 { padding: 6px 6px 6px 6px; margin-top: 2px; font-size:16px; text-align:left; color:#606060; } /* data ---------------------------------------------------------------------- */ .data { padding: 4px 4px 4px 4px; } .data[color="green"] { background: #008000; } .data[color="red"] { background: #ff0000; } .data li { min-height:40px; list-style-type: none; border-width: 0px; border-style:solid; } .data li[color="green"] { background: #008000; } .data li[color="red"] { background: #ff0000; } .data li:last-child { border-bottom-width:0; } .data li label { padding: 6px 6px 6px 6px; margin-top: 4px; font-size:16px; float:left; width:160px; text-align:right; color:#000000; } .data li label[__link="yes"] { text-decoration: underline; } .data li text { color:#888888; } .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: 2px solid #dddddd; margin: 4px 4px 4px 4px; font-size:16px; height:26px; display: inline; overflow: hidden; width:220px; color:#000088; background: #ffffff; } .data input[type="password"] { width:322px; } .data input[type="text"] { width:322px; } .data input[readonly="yes"]{ color:#606060; background:#eeeeee; } .data textarea { border: 2px solid #dddddd; margin: 4px 4px 4px 4px; font-size:16px; width:96%; height:86px; } .data textarea[readonly="yes"]{ color:#606060; background:#eeeeee; } .data select { border: 2px solid #dddddd; margin: 4px 4px 4px 4px; font-size:16px; height:32px; display: inline; overflow: hidden; width:326px; color:#000088; background: #ffffff; } .data select[readonly="yes"]{ color:#606060; background:#eeeeee; } .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; } .novis[visible="false"]{ display: inline; } /* 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; } /* ---------------------------------------------------------------------- xqpos (c) xqpos ---------------------------------------------------------------------- */ .pos-order { margin-top: 0px; border-top:8px solid #eee; border-bottom:8px solid #eee; } .pos-order li { height: 36px; line-height: 38px; background: #ffffff; list-style-type: none; border-top-color: #ddd; border-width: 0px; border-top-width: 1px; border-style: solid; font-size: 16px; font-weight: normal; padding-left: 2px; overflow: hidden; white-space:nowrap; } .pos-order li[kind="B"][kitok="0"] { background: #fff; } .pos-order li[kitok="0"] { background: #f0f3c0; } .pos-order li[dr1="1"] { background: #b4b4ff; } .pos-order li[voided="1"] { background: #f0c0c0; } .pos-order li[hwait="1"] { background: #b8dee4; } .pos-order li[touch="yes"] { background: #0080ff; color: #ffffff; } .pos-order li[kind="H"] { } .pos-order li[kind="X"] { background: #eee; } .pos-order li[kind="X"] text { float: right; } .pos-order li[kind="X"] img{ position:relative; left:-64px; top:-6px; width:32px; float:left; } .pos-order li[kind="F"] { } .pos-order li[kind="F"] text { float: right; } .pos-order li[kind="B"] { color: #800080; } .pos-order li[kind="B"] nil{ width:20px; } .pos-order li[kind="B"] img{ position:relative; left:8px; top:-6px; width:32px; float:left; } .pos-order li[kind="B"]:active1 { background: #0080ff; color: #ffffff; } .pos-order li[kind="A"] { color:#ff0000; } .pos-order li[kind="T"] { color:#ec6000; } .pos-order li[kind="W"] { color:#ff00ff; } .pos-order[order="yes"] li:last-child { border-bottom-width:0; } .pos-order li span { float: left; overflow: hidden; max-width: 184px; } .pos-order li text { margin-left: 8px; } .pos-order li value { margin: 0px 4px 0px 4px; float:right; width:100px; text-align:right; } .pos-order li total { margin: 0px 10px 0px 4px; float:right; width:80px; text-align:right; white-space: nowrap; } .pos-order li line { position:absolute; margin-left:70px; width:200px; height:3px; margin-top:-6px; } .pos-order li line[dis="1"] { background:#000080; } .pos-order li line[crg="1"] { background:#ff0000; } .pos-order li line[pay="1"] { background:#008000; } .pos-order li line[cob="1"] { background:#800080; } .pos-order li line[ds="1"] { background:#000000; } .pos-order li gi { margin: 0px 4px 0px 4px; font-weight:bold; float:right; color:#0000ff; } .pos-order li ei { margin: 0px 4px 0px 4px; font-weight:bold; float:right; color:#800080; } .pos-order li price { margin: 0px 4px 0px 4px; float:right; width:60px; text-align:right; } .pos-order li count { margin: 0px 4px 0px 4px; font-weight:bold; float:right; color:#0000ff; } .pos-order li quantity { margin-right: 12px; float:left; width:56px; text-align:right; } .pos-order li bx { margin: 13px 6px 12px 0px; float:right; width:8px; height:8px; font-size:24px; line-height:32px; color:#777; text-align:center; } .pos-order li bx[type="dr"] { border:1px solid #999; background:#999; } .pos-order li bx[type="dp"] { border:1px solid #999; } .pos-order li bx[type="hw"]:before { content: "\2715"; position:relative; font-size:14px; top:-13px; } .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; background-image: url(images/plus48.png); } .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; background-image: url(images/del48.png); } .pos-order li nil { margin-right: 12px; float:left; width:56px; text-align:right; } .pos-order li[kind="M"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 16px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 24px; line-height: 20px; color:#999999; } .pos-order li[kind="O"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 16px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 24px; line-height: 20px; color:#999999; } .pos-order li[kind="C"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 16px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 24px; line-height: 20px; color:#999999; } .pos-order li[kind="Z"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 16px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 24px; line-height: 20px; color:#999999; } .pos-order li[kind="L"] { list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 16px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 24px; line-height: 20px; color:#53b0db; } .pos-order li[kind="Y"] { color:#008000; } .pos-order li[kind="U"] { color:#808000; } .pos-order li[kind="Y"] img{ position:relative; left:8px; top:-6px; width:32px; float:left; } .pos-order li[kind="D"] { color:#000080; } .pos-order li[kind="D"] img{ position:relative; left:8px; top:-6px; width:32px; float:left; } .pos-order li[attr="yes"]{ list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; border-style: none; font-size: 16px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; height: 24px; line-height: 26px; color:#999999; } .pos-order li[sel1="yes"] { background:#0080ff; color:#fff; } .pos-order li:first-child { border-top-width: 0px; } .pos-order li:last-child[attr="yes"] { border-style: dotted; border-bottom-width: 1px; } /* over ---------------------------------------------------------------------- */ .back { top: 0; left: 0; height: 100%; position: fixed; z-index: 999; background:rgba(0,0,0,0.3); } .over { position:fixed; padding-top: 40px; top:0; right:0; width:140px; height:100%; background:#cccccc; border-left: 8px solid #bbbbbb; z-index:900; } .over [visible="false"] { display:none; } /* attrs ---------------------------------------------------------------------- */ .pos-attrs { --background: #ff0000; } .pos-attrs li { background: #eeeeee; list-style-type: none; border-bottom-color: #cccccc; border-width: 0px; border-bottom-width: 1px; font-size: 16px; font-weight: normal; padding: 4px 0px 4px 0px; margin: 4px 0px 0px 0px; color: #222222; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; -webkit-tap-highlight-color:#0000ff; } .pos-attrs li:active1 { background: #0000ff; color: #ffffff; } .pos-attrs li span { font-size: 16px; font-weight: normal; margin-top: 8px; } .pos-attrs li img { float: left; padding: 6px 6px 6px 6px; margin-left: 4px; margin-right: 2px; width: 32px; height: 32px; } .pos-attrs 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; } /* menu... ---------------------------------------------------------------------- */ .pos-menu { } .pos-menu[full="1"] { } body[vert="1"] .pos-menu[full="1"] { border-left:8px solid #fff; border-right:8px solid #fff; } .pos-menu li { height: 48px; background: #ffffff; list-style-type: none; border-bottom-color: #eeeeee; border-width: 0px; border-bottom-width: 2px; border-style: solid; font-size: 20px; font-weight: normal; padding-left: 8px; padding-bottom: 2px; overflow: hidden; color:#222; min-width:100%; box-sizing: border-box; white-space:nowrap; } .pos-menu[full="1"] li { position:absolute; padding-left: 4px; min-width:80px; border: 3px solid rgba(0, 0, 0, .2); border-radius: 8px; height:60px; white-space:normal; } .pos-menu li[next="yes"] { background:#ffffff url(res/next.png) no-repeat 96% center; } .pos-menu li[exists="1"] { background: #00ff00; } .pos-menu li[touch="yes"] { background-color: #0080ff; color:#ffffff; } .pos-menu li[disabled="yes"] { background-color: #999999; } .pos-menu li[selected="yes"] { background-color:#00ff00; } .pos-menu[order="yes"] li:last-child { border-bottom-width:0; } .pos-menu li modifs { width: 50px; height: 42px; float:left; text-align:center; font-size: 20px; font-weight: bold; border: 3px solid #3e78b3; border-radius: 50%; margin-left:4; padding-left:4; padding-right:4; background-image: url(res/add.png); background-repeat: no-repeat; background-position: center; } .pos-menu li modifs[disabled="yes"] { background: #ffffff; color:#ffffff; border: 3px solid #ffffff; } .pos-menu li modifs[touch="yes"] { background: #3e78b3; color:#ffffff; border: 3px solid #ffffff; } .pos-menu li span { padding: 0px 8px 0px 8px; line-height:42px; font-size:20px; font-weight:bold; float: left; display: inline; } .pos-menu li itm { padding: 0px 8px 0px 8px; line-height:44px; font-size:20px; font-weight1:bold; float: left; display: inline; color:#3e78b3; } .pos-menu[full="1"] li itm { padding: 6px 8px 0px 4px; font-size:15px; line-height:20px; color: inherit; } .pos-menu li[rq="red"] itm { color:#ff0000; } .pos-menu li mat { padding: 12px 8px 8px 8px; margin-left:48px; font-size:20px; font-weight:bold; float: left; display: inline; color:#3e78b3; } .pos-menu li not { padding: 12px 8px 8px 8px; margin-left:48px; font-size:20px; font-weight:bold; float: left; display: inline; color:#3e78b3; } .pos-menu li price { padding: 12px 8px 8px 8px; font-size:20px; font-weight:bold; float:right; width:40px; text-align:right; float: right; display: none; } .pos-menu li count { line-height: 44px; margin: 0px 52px 0px 4px; font-size:20px; font-weight1:bold; position : absolute; right : 0px; color:#008000; } .pos-menu[full="1"] li count { line-height: 44px; margin: 8px 52px 0px 4px; font-size:42px; font-weight1:bold; position : absolute; left : 8px; color: var(--c-bcform); opacity: 0.4; } .pos-menu li cat { padding: 0px 8px 0px 8px; line-height: 44px; font-size:20px; font-weight1:bold; left:0px; float: left; display: inline; } .pos-menu[full="1"] li cat { padding: 6px 8px 0px 4px; font-size:15px; line-height:20px; } .pos-menu li next { height: 42px; margin: 5px 5px 5px 5px; float: right; width:20px; height:40px; top:0px; } .pos-menu li button[touch="yes"] { background: #0080ff; color:#ffffff; } .pos-menu li next:after { position: relative; top: -4px; bottom: 0; left: 0; right: 0; content: "\203A"; /* use the hex value here... */ color:#ccc; font-size: 36px; font-weight:normal; line-height: 40px; text-align: right; } .pos-menu[full="1"] next:after { position: absolute; top: 4px; right: 4px; } .pos-menu li blocked { width: 56px; height: 42px; float:left; margin-left:4; padding-left:4; padding-right:4; } .pos-menu li bcat { width: 56px; height: 48px; background: #00ff00; float:left; text-align:center; font-size: 20px; font-weight: bold; color:#ffffff; background: url(res/menu.png) center center no-repeat; } .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; background-image: url(res/add.png); } .pos-menu 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; background-image: url(images/del48.png); } .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; background-image: url(images/del48.png); } .pos-menu li input[type="text"] { border: 0; padding-left: 8px; padding-top: 2px; padding-bottom: 2px; height:24px; margin: 8px 16px 4px 4px; border-radius: 8px; font-size:16px; display: inline-block; overflow: hidden; width:90%; color:#3e78b3; background: #eee; outline: none; } .pos-menu li img[type="search"] { width:32px; height:32px; margin-top:8px; margin-left:8px; float:left; } .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: 16px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; -webkit-tap-highlight-color:#0000ff; height: 24px; line-height: 26px; color:#999999; } .pos-menu li:last-child[attr="yes"] { border-style: dotted; border-bottom-width: 1px; } .pos-menu div img { width: 100%; border: none; } /* dock ---------------------------------------------------------------------- */ .pos-menu-dock { width:132px; background:#d5d7d9; position:absolute; padding-top:8px; padding-left:6px; padding-right:6px; left:0; top:48px; bottom:0; } .pos-menu-dock::-webkit-scrollbar { width: 10px; } .pos-menu-dock::-webkit-scrollbar-track { background: #f1f1f1; } .pos-menu-dock::-webkit-scrollbar-thumb { background: #888; } .pos-menu-dock::-webkit-scrollbar-thumb:hover { background: #555; } body[vert="1"] .pos-menu-dock { display:none; } @media not screen and (min-width: 1024px) { .pos-menu-dock { display:none; } } .pos-menu-dock li { height: 44px; background: var(--c-bctool); list-style-type: none; border-radius: 4px; border: 2px solid var(--c-xframe); font-size: 16px; line-height: 40px; font-weight: normal; padding-left: 4px; padding-bottom: 4px; margin-bottom: 4px; overflow: hidden; min-width:100%; box-sizing: border-box; white-space:nowrap; } /* modf ---------------------------------------------------------------------- */ .pos-menu-modf { width:92px; background:#d5d7d9; position:absolute; padding-top:8px; padding-left:6px; padding-right:6px; position: absolute; left:0px; top:48px; bottom:0; } .pos-menu-modf::-webkit-scrollbar { width: 10px; } .pos-menu-modf::-webkit-scrollbar-track { background: #f1f1f1; } .pos-menu-modf::-webkit-scrollbar-thumb { background: #888; } .pos-menu-modf::-webkit-scrollbar-thumb:hover { background: #555; } body[vert="1"] .pos-menu-modf { } @media not screen and (min-width: 381px) { .pos-menu-modf { } } .pos-menu-modf li { height: 44px; background: var(--c-bctool); list-style-type: none; border-radius: 4px; border: 2px solid var(--c-xframe); font-size: 16px; line-height: 40px; font-weight: normal; padding-left: 4px; padding-bottom: 4px; margin-bottom: 4px; overflow: hidden; min-width:100%; box-sizing: border-box; white-space:nowrap; } /* builder ---------------------------------------------------------------------- */ .pos-menu-builder { width:100%; } .pos-menu-builder[full="1"] .mats { background:#fff000; position:relative; } .pos-menu-builder li { height: 44px; background: #ffffff; list-style-type: none; font-size: 16px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; } .pos-menu-builder li[kind="mats"] { border-top: 2px solid #eee; } .pos-menu-builder[full="1"] li[kind="mats"] { position:absolute; min-width:80px; width:80px; height:60px; white-space:normal; } .pos-menu-builder li[kind="dims"] { border-top: 2px solid #eee; } .pos-menu-builder li[kind="group"] { height: 36px; background:#eee; color:#222; margin: 6px 6px 6px 6px; padding: 6px 6px 6px 66px; font-weight:bold; height: 24px; line-height: 24px; } .pos-menu-builder li[kind="group"][expanded="1"]{ } .pos-menu-builder li[kind="group"][expanded="0"]{ } .pos-menu-builder li[kind="group"][error="yes"] { background: #ff8040; } .pos-menu-builder li[kind="header"]{ height: 40px; background:#00ff00; color:#000000; margin: 8px 8px 8px 8px; padding: 8px 8px 8px 8px; height: 24px; } .pos-menu-builder li[kind="rq"]{ height: 40px; background:#ffffff; color:#aaaaaa; margin: 8px 8px 8px 8px; padding: 8px 8px 8px 8px; height: 24px; font-weight:bold; text-align:right; } .pos-menu-builder li[kind="rq"][warning="1"]{ background:#ff0000; color:#ffffff; } .pos-menu-builder li[nodisp="yes"]{ display:none; } .pos-menu-builder li quantity{ height:40px; width:60px; float:left; text-align:right; padding-right: 4px; margin-right: 4px; background:#ffffff; color:#3e78b3; height: 24px; } .pos-menu-builder li input { width: 100%; padding-left: 8px; padding-right: 8px; height:100%; -webkit-appearance:none; border:none; outline:none; color:#222; font-size: 16px; } .pos-menu-builder li button { width: 48px; height:36px; background: #00ff00; float:left; text-align:center; font-size: 20px; font-weight: bold; outline:none; border:none; margin: 4px 8px 4px 8px; background:#fff; border:3px solid #3e78b3; border-radius:4px; color:#3e78b3; } .pos-menu-builder[full="1"] li button { display:none; } .pos-menu-builder li button[null="yes"] { border:4px solid #eee; border-radius:4px; color:#eee; } .pos-menu-builder li .price { width: 48px; height:42px; line-height:42px; position: absolute; right: 0; color:#3e78b3; } .pos-menu-builder li input[valid="yes"] { background: #00ff00; } .pos-menu-builder li input[type="radio"] { } .pos-menu-builder li input[type="radio"]:checked { background: #00ff00; } .pos-menu-builder li input[type="checkbox"] { } .pos-menu-builder li input[type="checkbox"]:checked { background: #00ff00; } /* 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: 20px; font-weight: normal; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; -webkit-tap-highlight-color:#0000ff; } /* plan... ---------------------------------------------------------------------- */ .pos-plan { top: 100px; bottom: 0px; width:800px; height:600px; background:#00ff00; left:0; position:fixed; overflow:auto; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; } .pos-plan li { list-style-type: none; height: 48px; width:48px; position: absolute; background:#ff0000; } /* ---------------------------------------------------------------------- xqpos (c) xqpos ---------------------------------------------------------------------- */ .kds-panel { } .kds-panel li[sep="1"] { top:0px; list-style-type: none; width: 2px; background: #ccc; height: 600px; position:absolute; } .kds-order { margin-top: 0px; background: #fff; width:254px; position:absolute; } @media not screen and (min-width: 1024px) { .kds-order { position: inherit; width: 100%; } } .kds-order[type="sums"] { width: 256px; background: var(--c-bcform); } @media not screen and (min-width: 1024px) { .kds-order[type="sums"] { background: #fff; width: 100%; } } .kds-order[prep="1"] { background: #D2E7DE; } .kds-order::-webkit-scrollbar { width: 10px; } .kds-order::-webkit-scrollbar-track { background: #f1f1f1; } .kds-order::-webkit-scrollbar-thumb { background: #888; } .kds-order::-webkit-scrollbar-thumb:hover { background: #555; } .kds-order li { height: 36px; line-height: 36px; list-style-type: none; border-width: 0px; border-style: solid; font-size: 14px; font-weight: normal; padding-left: 2px; overflow: hidden; white-space:nowrap; } .kds-order li[kind="M"] { color: #999; } .kds-order li[kind="G"] { color: #800080; } .kds-order li[done="1"] { text-decoration: line-through; } .kds-order li[itm="yes"] { background: #00ff00; color: #000; } .kds-order li[sel="yes"] { background: var(--c-bcselect); color: var(--c-fcselect); } .kds-order .m { width:60px; float:left; text-align:left; padding-left:8px; } .kds-order .h { width:82px; float:left; text-align:left; padding-left:8px; } .kds-order .t { width:40px; float:left; text-align:left; padding-left:8px; } .kds-order .c { background: var(--c-bcselect); width:20px; margin: 2px 2px 2px 2px; height: 24px; float:right; text-align:left; padding-left:8px; } .kds-order .q { width:44px; float:left; text-align:right; padding-right:10px; } .kds-order span { } .kds-order li:first-child { background: #777; color:#fff; height: 28px; line-height: 28px; border-top: 4px solid #fff; border-bottom: 4px solid #fff; position:fixed; width: 252px; } @media not screen and (min-width: 1024px) { .kds-order li:first-child { position:inherit; width: 100%; } } .kds-order li:nth-child(2) { margin-top: 36px; } @media not screen and (min-width: 1024px) { .kds-order li:nth-child(2) { margin-top: 0px; } } /* ---------------------------------------------------------------------- xqpos (c) xqpos ---------------------------------------------------------------------- */ .reg-block { padding-top:4px; padding-bottom:8px; max-width:632px; background:#fff; margin: auto; } .reg-block[color="green"] { background:	#cce6cc; } .reg-block[color="red"] { background: #ffcccc; } .reg-block[color="blue"] { background: #cce6ff; } .reg-block a { text-decoration: none; } .reg-block .button { padding: 8px 6px 1px 6px; font-size: 16px; font-weight: bold; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 0px; } .reg-block .button[type="green"] { background:#008000; } .reg-block .button[type="red"] { background:#ff0000; } .reg-block .button:active { background:#000080; } .reg-block .button[type="googleplay"] { padding:0; background: url(img/googleplay.png); background-size:100% 100%; } .reg-block .button[type="gray"] { background:#666666; } .reg-block li { min-height:42px; list-style-type: none; border-width: 0px; border-style:solid; padding-right:100px; overflow: hidden; } .reg-block li[color="green"] { background: #008000; } .reg-block li[color="red"] { background: #ff0000; } .reg-block li:last-child { border-bottom-width:0; } .reg-block li label { padding: 6px 6px 0px 6px; margin-top: 4px; font-size:15px; float:left; max-width:120px; width:120px; text-align:right; color:#000000; } .reg-block li label[__link="yes"] { text-decoration: underline; } .reg-block li label img { padding: 0; margin:0; margin-top: -6px; float:right; width:32px; height:32px; } .reg-block li img[type="icon"] { padding-left:8px; width:48px; } .reg-block li .icon { border-radius:50%; float:left; height:52px; width:52px; border:2px solid #777; } .reg-block li .icon[sel="1"] { background:#0080ff; } .reg-block li .text { padding: 6px 6px 10px 6px; float:left; overflow:hidden; margin-left:0px; font-size:15px; position:relative; top:4px; color:#444; } .reg-block li .step { border-radius:50%; width:24px; height:24px; font-size:24px; float:right; border: 2px solid #777; color:#777; margin-right:4px; text-align:center; } .reg-block li .button { margin: 4px 4px 4px 4px; padding: 8px 6px 1px 6px; height:24px; float:left; text-align:center; font-size: 16px; font-weight: bold; -webkit-box-shadow: 0 0 0px #000; -webkit-border-radius: 0px; width:160px; } .reg-block li .link { padding: 1px 6px 1px 2px; margin-top: 4px; padding-top: 4px; padding-left: 12px; font-size:15px; color:#0080ff; float:left; height:28px; width:320px; } .reg-block li .link:hover { background:#eee; } .reg-block li .account { margin-top: 4px; padding-left: 12px; font-size:15px; color:#444; float:left; display:inline-block; padding-top:8px; height:28px; line-height:28px; width:320px; } .reg-block li .account[type="user"] { font-weight:bold; } .reg-block li .account[type="link"] { color:#0080ff; cursor : pointer; } .reg-block li .account[type="link"]:hover { background:#eee; } .reg-block li a { text-decoration:none; } .reg-block li info { border: 2px solid #dddddd; padding: 6px 6px 6px 6px; margin-top: 4px; font-size:15px; float:left; width:320px; text-align:left; color:#606060; } .reg-block li info[type="full"] { } .reg-block input { border: 0; border-bottom: 2px solid #ccc; margin: 4px 4px 4px 4px; padding: 1px 6px 1px 6px; font-size:15px; height:32px; display: inline; float:left; width:320px; -webkit-box-sizing:content-box; -webkit-appearance:none; color:#000088; background: #ffffff; } .reg-block input[readonly="yes"]{ color:#606060; background:#eeeeee; } .reg-block select { border: 0; border-bottom: 2px solid #ccc; margin: 4px 4px 4px 4px; padding: 1px 6px 1px 6px; font-size:14px; height:32px; display: inline; float:left; width:320px; -webkit-box-sizing:content-box; color:#000088; background: #ffffff; } .reg-block select[readonly="yes"]{ color:#606060; background:#eeeeee; } .reg-block .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; } @media not screen and (min-width: 560px) { .reg-block  { border-bottom: 1px solid #cccccc; padding-top:0px; padding-bottom:0px; } .reg-block li { border-bottom: 1px solid #cccccc; padding-right:20px; } .reg-block li label { width:16%; } .reg-block li .link  { } .reg-block li .button { background: #0080ff; color: #fff; width:70%; } .reg-block input { width:70%; border: none; outline: none; } .reg-block select { width:70%; border: none; outline: none; } } @media screen and (min-width: 560px) { .reg-block li .button { float:left; background: #0080ff; color: #ffffff; border-radius: 6px; border: 0px; } .reg-block li .link  { float:left; } .reg-block .button { margin-top:3px; margin-bottom:3px; background: #0080ff; color: #ffffff; border-radius: 6px; border: 0px; width:160px; text-align:center; margin-left:136px; height:22px; } .reg-block .button[type="googleplay"] { width:172px; height:33px; } } /* ---------------------------------------------------------------------- xqpos (c) xqpos ---------------------------------------------------------------------- */ :root { --c-navy: #3e78b3; --c-bcselect: #0080ff; --c-fcselect: #fff; --c-bcblue: #c1d3e5; --c-fcblue: #303030; --c-bctool: #f3f4f5; --c-bcform: #d5d7d9; --c-xframe: #bbb; } .x-left { position:absolute; left:0; width:220px; top:48px; bottom:114px; background: var(--c-bctool); overflow:auto; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; z-index:0; padding-top:48px; padding-bottom:52px; } .x-left::-webkit-scrollbar__ { width: 10px; } .x-left::-webkit-scrollbar__-track { background: #f1f1f1; } .x-left::-webkit-scrollbar__-thumb { background: #888; } .x-left::-webkit-scrollbar__-thumb:hover { background: #555; } body[info="0"] .x-left { top: 0px; bottom: 82px; } body[slim="1"] .x-left { top:0px; bottom:82px; } .x-left[up="1"] { z-index:1; } .x-left .butt { display:none; } .x-left .bars { float: left; margin-left: 4px; margin-right: 4px; } .x-left .bar1 { display:none; } .x-left .bar2 { display:none; } .x-left .bar3 { display:none; } .x-left .tool { float: left; width: 44px; height: 32px; background-repeat: no-repeat; background-position: 8px 0px; background-size: 32px 32px; margin-left: 4px; margin-right: 4px; } .x-left .tool[flash="1"] { -webkit-animation-name: x-tool-li-background; -webkit-animation-duration: 1s; -webkit-animation-direction: alternate; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; } .x-left .tool[disabled="yes"] { opacity:0.6; filter:grayscale(100%); } .x-left .x-bars img[type="search"] { width:32px; height:32px; } .x-left .x-bars input[type="text"] { border: 0; padding-left: 8px; padding-top: 2px; padding-bottom: 2px; height:24px; margin: 0px 16px 4px 8px; border-radius: 8px; font-size:16px; position:absolute; overflow: hidden; left: 48px; right: 4px; color:#3e78b3; background: #eee; outline: none; } .x-left li { list-style-type: none; border-bottom:1px solid #ccc; padding: 10px 8px 10px 12px; height: 25px; line-height: 30px; text-align:left; font-size: 16px; background-color: #f3f4f5; color: #444; background-repeat: no-repeat; background-position: 8px 8px; background-size: 32px 32px; } .x-left li[type="i"] { border-bottom:1px solid #eee; } .x-left li[type="t"] { background-color:#fff; border-bottom:1px solid #fff; } .x-left li[type="s"] { background-color:#fff; } .x-left li .mark { color: var(--c-bcselect); float:right; } /* VERT ---------------------------------------------------------------------- */ body[vert="1"] .x-left { height: 68px; width: 100%; background:#fff; overflow-x:scroll; left:0; padding-top:0px; border-top:2px solid #eee; border-bottom:4px solid #eee; top:50px; right:0; height:100%; width:inherit; z-index:996; } body[vert="1"] .x-left[open="0"] { padding: 10px 0px 10px 0px; height:28px; overflow:hidden; z-index:0; } body[vert="1"] .x-left .x-bars { padding-left:16px; } body[vert="1"] .x-left[open="0"] .bar1 { display:inherit; } body[vert="1"] .x-left[open="0"] .bar2 { display:inherit; } body[vert="1"] .x-left[open="0"] .bar3 { display:inherit; } body[vert="1"] .x-left .x-buts { background:#fff; max-width:1024px; position:absolute; left:0; width:auto; top:0; bottom:0; margin:0 auto; white-space: nowrap; top: 0px; bottom: 0px; right:0; left:0; position:absolute; overflow:auto; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; padding-top:0px; padding-bottom:16px; animation-duration: 0.4s; } body[vert="1"] .x-left[open="0"] .x-buts { display:none; } body[vert="1"] .x-left .butt { display:inherit; } body[vert="1"] .x-left li { display:inline-block; display:inherit; padding: 10px 8px 10px 12px; height: 28px; line-height: 30px; text-align:left; font-size: 16px; font-weight1: bold; border-bottom: 1px solid #eee; background-color: #fff; width:calc(100% - 20px); } body[vert="1"] .x-left[open="0"] li { display:none; } body[vert="1"] .x-left li[type="i"] { display:none; } body[vert="1"] .x-left li[type="t"] { display:none; } body[vert="1"] .x-left li[type="s"] { display:none; } @media not screen and (min-width: 1024px) { .x-left { height: 68px; width: 100%; background:#fff; overflow-x:scroll; left:0; padding-top:0px; border-top:2px solid #eee; border-bottom:4px solid #eee; top:50px; right:0; height:100%; width:inherit; z-index:996; } .x-left[open="0"] { padding: 10px 0px 10px 0px; height:28px; overflow:hidden; z-index:0; } .x-left .x-bars { padding-left:16px; } .x-left[open="0"] .bar1 { display:inherit; } .x-left[open="0"] .bar2 { display:inherit; } .x-left[open="0"] .bar3 { display:inherit; } .x-left .x-buts { background:#fff; max-width:1024px; position:absolute; left:0; width:auto; top:0; bottom:0; margin:0 auto; white-space: nowrap; top: 0px; bottom: 0px; right:0; left:0; position:absolute; overflow:auto; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; padding-top:0px; padding-bottom:16px; } .x-left[open="0"] .x-buts { display:none; } .x-left .butt { display:inherit; } .x-left li { display:inline-block; display:inherit; padding: 10px 8px 10px 12px; height: 28px; line-height: 30px; text-align:left; font-size: 16px; font-weight1: bold; border-bottom: 1px solid #eee; background-color: #fff; width:calc(100% - 20px); } .x-left[open="0"] li { display:none; } .x-left li[type="i"] { display:none; } .x-left li[type="t"] { display:none; } .x-left li[type="s"] { display:none; } } /* ---------------------------------------------------------------------- */ .x-left li[sel="1"] { background-color: var(--c-bcblue); color: var(--c-fcblue); } body[vert="1"] .x-left li[sel="1"] { background-color: var(--c-bcblue); color: var(--c-fcblue); } .x-left li[type="p"] { position:fixed; width:220px; top:48px; padding-left:86px; padding-top:16px; border-bottom:1px solid #eee; display:none; } .x-left li[type="p"] .up { width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 16px solid #999; } .x-left li[type="n"] { position:fixed; width:220px; bottom:114px; padding-left:86px; padding-top:16px; display:none; } .x-left li[type="n"] .down { width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 16px solid #999; } /* x-main ---------------------------------------------------------------------- */ .x-main { position:absolute; left:220px; right:0px; top:48px; bottom:114px; background:#fff; overflow:auto; overflow-x:hidden; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; padding-left:8px; padding-right:8px; } .x-main::-webkit-scrollbar__ { width: 10px; } .x-main::-webkit-scrollbar__-track { background: #f1f1f1; } .x-main::-webkit-scrollbar__-thumb { background: #888; } .x-main::-webkit-scrollbar__-thumb:hover { background: #555; } body[info="0"] .x-main { top: 0px; bottom: 82px; } body[slim="1"] .x-main { top:0px; bottom:0px; } .x-main[long="1"] { bottom:162px; } .x-main[full="1"] { left:0px; } .x-main[tb="yes"] { max-width: 380px; } /* VERT ---------------------------------------------------------------------- */ body[vert="1"] .x-main { width:auto; top:106px; bottom:0px; left:0; padding-left:0px; padding-right:0px; } body[vert="1"] .x-main[tb="yes"] { max-width: inherit; } @media not screen and (min-width: 1024px) { .x-main { width:auto; top:106px; bottom:0px; left:0; padding-left:0px; padding-right:0px; } .x-main[tb="yes"] { max-width: inherit; } } /* ---------------------------------------------------------------------- */ /* x-vert ---------------------------------------------------------------------- */ .x-vert { position:absolute; width:420px; left: 0; right: 0; margin:auto; top:48px; bottom:32px; background:#fff; overflow:auto; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; padding-left:8px; padding-right:8px; box-sizing: border-box; margin-top:8px; } .x-vert[flex="1"] { width:100%; } /* VERT ---------------------------------------------------------------------- */ body[vert="1"] .x-vert { width:auto; bottom:0; left:0; padding-left:0px; padding-right:0px; border-left:0px; border-right:0px; margin-top:0px; margin-bottom:0px; } @media not screen and (min-width: 1024px) { .x-vert { width:auto; bottom:0; left:0; padding-left:0px; padding-right:0px; border-left:0px; border-right:0px; margin-top:0px; margin-bottom:0px; } } /* ---------------------------------------------------------------------- */ .x-head { width:560px; left: 0; right: 0; margin:auto; } @media not screen and (min-width: 540px) { .x-head { width:100%; } } /* x-long ---------------------------------------------------------------------- */ .x-long { height: 48px; width:1024px; margin:auto; position:fixed; background:#d5d7d9; overflow:hidden; left:0; right: 0; bottom:114px; } /* VERT ---------------------------------------------------------------------- */ body[vert="1"] .x-long { display:none; } @media not screen and (min-width: 1024px) { .x-long { display:none; } } /* ---------------------------------------------------------------------- */ @media (min-width: 1025px) { .x-long { bottom: max(calc(100% - 768px + 72px + 32px), 114px); } } .x-long .x-buts { background:#d5d7d9; max-width:1024px; position:absolute; left:0; right:0; top:0; bottom:0; margin:0 auto; } .x-long li { float:left; list-style-type: none; height:34px; line-height:34px; background:#eee; margin:0px 0px 0px 0px; padding-left:8px; border-right:1px solid #bbb; background-repeat: no-repeat; background-position: center center; background-size: 26px 26px; } .x-long li:first-child { margin-left:6px; } .x-long li:last-child { } .x-long li[disabled="yes"] { opacity:0.6; filter:grayscale(100%); } .x-long .x-buts { border-radius: 12px; margin: 9px 8px 1px 6px; border: 2px solid #999; background: var(--c-bctool); box-shadow: 0 0 4px var(--c-bctool); } /* x-info ---------------------------------------------------------------------- */ .x-info { height: 32px; width: 100%; max-width:1024px; position:fixed; background:#d5d7d9; overflow:hidden; margin:auto; left: 0px; right: 0px; bottom:0px; z-index:998; } body[info="0"] .x-info { display:none; } body[slim="1"] .x-info { display:none; } @media not screen and (min-width: 1024px) { .x-info { display:none; } } .x-info .x-buts { max-width:1024px; position:absolute; left:0; right:0; top:0; bottom:0; margin:0 auto; } @media (min-width: 1025px) { .x-info { bottom: max(calc((100% - 768px)/2), 0px); } } /* x-tool ---------------------------------------------------------------------- */ .x-tool { height: 82px; position:fixed; background: var(--c-bcform); overflow:hidden; width:1024px; margin:auto; left:0; right: 0; bottom:32px; z-index: 4; } body[info="0"] .x-tool { bottom: 0px; } body[slim="1"] .x-tool { bottom: 0px; } .x-tool::-webkit-scrollbar__ { height: 6px; background:#eee; display:none; } .x-tool::-webkit-scrollbar__-thumb { background:#888; } @media (min-width: 1025px) { .x-tool::-webkit-scrollbar__ { display: none; } } @media (min-width: 1025px) { .x-tool { bottom: max(calc((100% - 768px)/2 + 32px), 32px); } } .x-tool .x-buts { max-width:1024px; position:absolute; left:0; right:0; top:0; bottom:0; margin:0 auto; } @media not screen and (min-width: 1024px) { .x-tool .x-buts { right: inherit; width: 1024px; } } .x-tool li { float:left; list-style-type: none; width:99px; height:54px; background:#f3f4f5; margin:10px 0px 4px 0px; font-size:15px; line-height:54px; color: var(--c-navy); text-align:center; border-top:2px solid #bbb; border-bottom:2px solid #bbb; border-left:1px solid #bbb; background-repeat: no-repeat; background-position: center center; background-size: 40px 40px; } .x-tool li[flash="1"] { -webkit-animation-name: x-tool-li-background; -webkit-animation-duration: 1s; -webkit-animation-direction: alternate; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes x-tool-li-background { 0% { background-image: url(res/img-refresh.png); } 100% { background-image: url(res/img-refresh__.png); } } .x-tool li:first-child { background:#d5d7d9; border:2px solid #d5d7d9; } .x-tool li:nth-child(2) { margin-left:4px; border-left:2px solid #bbb; border-top-left-radius:12px; border-bottom-left-radius:12px; } .x-tool li:last-child { border-right:2px solid #bbb; border-top-right-radius:12px; border-bottom-right-radius:12px; } @media not screen and (min-width: 1024px) { .x-tool li:last-child { border-right:0px; } } .x-tool li span { display:none; } .x-tool li[disabled="yes"] { opacity:0.6; filter:grayscale(100%); } body[vert="1"] .x-tool li[type="null"] { display:none; } body[vert="1"] .x-tool li[type="exit"] { display:none; } @media not screen and (min-width: 1024px) { .x-tool li[type="null"] { display:none; } .x-tool li[type="exit"] { display:none; } } @media not screen and (min-width: 1024px) { .x-tool { height: 42px; position: fixed; background-color: var(--c-bcwhite); top: max(calc((100% - 768px)/2 + 54px), 54px); left: 54px; width : 416px; margin-top: inherit; } .x-tool li { border:0; margin:2px 2px 4px 0px; width:64px; height:40px; background-color: var(--c-bcwhite); background-size: 32px 32px; border-left: 2px solid #eee; line-height:48px; } .x-tool li:first-child { background:#fff; border:0; } .x-tool li:nth-child(2) { margin-left:0; border-left:0; border-top-left-radius:0px; border-bottom-left-radius:0px; } .x-tool li:last-child { border-top-right-radius:0px; border-bottom-right-radius:0px; } .x-tool li1 span { display:inherit; } } body[vert="1"] .x-tool { height: 42px; position: fixed; background-color: var(--c-bcwhite); top: max(calc((100% - 768px)/2 + 54px), 54px); left: 54px; width : 416px; margin-top: inherit; } body[vert="1"] .x-tool li { border:0; margin:2px 2px 4px 0px; width:64px; height:40px; background-color: var(--c-bcwhite); background-size: 32px 32px; border-left: 2px solid #eee; line-height:48px; } body[vert="1"] .x-tool li:first-child { background:#fff; border:0; } body[vert="1"] .x-tool li:nth-child(2) { margin-left:0; border-left:0; border-top-left-radius:0px; border-bottom-left-radius:0px; } body[vert="1"] .x-tool li:last-child { border-top-right-radius:0px; border-bottom-right-radius:0px; } body[vert="1"] .x-tool li1 span { display:inherit; } /* x-opts ---------------------------------------------------------------------- */ .x-opts { height: 50px; width: 100%; position:fixed; background:#00ffff; overflow:hidden; left:0; bottom:60px; } .x-opts .x-buts { background:#ff00ff; max-width:1024px; position:absolute; left:0; right:0; top:0; bottom:0; margin:0 auto; } @media not screen and (min-width: 1024px) { .x-opts { position:initial; height1:auto; } .x-opts .x-buts { position:initial; height1:auto; } } .x-opts li { float:left; list-style-type: none; width:88px; height:40px; background:#fff; margin:4px 0px 4px 4px; } .x-opts li:first-child { margin-left:8px; } /* x-pos-slider ---------------------------------------------------------------------- */ .x-pos-slider { z-index:100; position:absolute; width:10px; height:80px; background:#fff; border-radius: 4px; border:2px solid #ccc; margin-top:-40px; top:50%; right:0; } .x-pos-slider .line { float:left; margin-left:2px; position:relative; top:30px; height:20px; width:2px; background:#777; } /* x-pos-panel ---------------------------------------------------------------------- */ .x-pos-panel { position:absolute; left:0; width:408px; top:102px; bottom:194px; background:#fff; border-right: 12px solid #fff; box-sizing: border-box; overflow:auto; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; } .x-pos-panel[visible="false"] { display:inline-block; } .x-pos-panel::-webkit-scrollbar__ { width: 10px; } .x-pos-panel::-webkit-scrollbar__-track { background: #f1f1f1; } .x-pos-panel::-webkit-scrollbar__-thumb { background: #888; } .x-pos-panel::-webkit-scrollbar__-thumb:hover { background: #555; } @media not screen and (min-width: 1024px) { .x-pos-panel { width:100%; bottom:50%; left:0; } } @media not screen and (min-width: 1024px) { .x-pos-panel { position:absolute; top: 50px; border-right: 0px; right:0; bottom: 0px; left:0; } } .x-pos-header { position: absolute; height: 52px; width: 380px; left: 0; border-bottom: 2px solid #777; top: 48px; z-index: 999; } @media not screen and (min-width: 1024px) { .x-pos-header { display: none; } } .x-pos-footer { position: absolute; height: 30px; width: 380px; left: 0; border-top: 2px solid #777; bottom: 162px; z-index: 999; } @media not screen and (min-width: 1024px) { .x-pos-footer { display: none; } } .x-pos-line { position:absolute; left:400px; width:8px; top:48px; bottom:120px; background:#ccc000; } @media not screen and (min-width: 1024px) { .x-pos-line { display:none; } } .x-pos-other { position:absolute; left:408px; right:0; top:0px; bottom:162px; background: var(--c-bcwhite); overflow:auto; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; } .x-pos-other[dock="1"] { left:552px; } @media not screen and (min-width: 1024px) { .x-pos-other { width:100%; top:50%; left:0; } } @media not screen and (min-width: 1024px) { .x-pos-other { position:initial; width:100%; top:48px; bottom:0; left:0; z-index:2; } } .x-pos-other[pop="1"] { position:absolute; left:0px; right:0px; top:0px; bottom:0px; background-color: rgba(0,0,0,0.3); } .x-pos-none { display:none; } body[vert="1"] .x-pos-none { } @media not screen and (min-width: 1024px) { .x-pos-none { } } .x-pos-combo { margin-left:40px; margin-right:40px; margin-top:48px; margin-bottom:48px; } .x-pos-left { margin-left:142px; } @media not screen and (min-width: 1024px) { .x-pos-left { margin-left:0px; } } .x-pos-cmds { } .x-pos-cmds::-webkit-scrollbar__ { width: 10px; } .x-pos-cmds::-webkit-scrollbar__-track { background: #f1f1f1; } .x-pos-cmds::-webkit-scrollbar__-thumb { background: #888; } .x-pos-cmds::-webkit-scrollbar__-thumb:hover { background: #555; } @media (min-width: 1025px) { .x-pos-cmds .button { padding-left: 52px; border-bottom: 2px solid #eee; } } /* x-reg-panel ---------------------------------------------------------------------- */ .x-reg-panel { left:0; top: 50px; height:480px; border-right: 0px; right:0; bottom: 0px; background:#fff; box-sizing: border-box; overflow:hidden; } .x-reg-panel .display { width:100%; height:140px; border-top: 4px solid #000; border-bottom: 4px solid #000; box-sizing: border-box; background:#000; color:#fff; } .x-reg-panel .display span{ float:right; } .x-reg-panel .line-1 { height:36; font-size:24px; } .x-reg-panel .line-2 { height:36; font-size:24px; } .x-reg-panel .line-3 { height:36; font-size:32px; } .x-reg-panel .line-4 { height:32; font-size:24px; } .x-reg-panel .break { clear: both; width: 100%; height: 0px; } .x-reg-panel .push { width:calc(14% + 3px); height:48px; box-sizing: border-box; line-height:48px; margin: 6px 3px 0px 3px; border-radius: 8px; border: 2px solid #999; background:#fff; float:left; } .x-reg-panel .push .text { background:#D5D7D9; margin: 0px 0px 0px 0px; height: 44px; font-size: 12px; line-height: 44px; border-radius: 4px; position: relative; } .x-reg-panel .push[type="num"] { padding-left:4px; padding-top:4px; color:#444; line-height:24px; text-align:left; } .x-reg-panel .push[type="num"] span{ font-size:26px; } .x-reg-panel .push img { width: 32px; height: 32px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; position: absolute; display: block; } .x-reg-panel .push[type="plu"] .text { text-align:center; } .x-reg-panel .push[type="dep"] .text { background:#787878; color:#fff; text-align:center; } .x-reg-panel .push[type="dep"][shft="dis"] .text { background :#3E78B3; } .x-reg-panel .push[type="dep"][shft="crg"] .text { background :#E74C3C; } .x-reg-panel .push[type="dep"][shft="pay"] .text { background :#4DA07D; } .x-reg-panel .push[type="qty"] .text { color: #444; text-align: center; font-size: 30px; } .x-reg-panel .push[type="clr"] { width: calc(28% + 12px); } .x-reg-panel .push[type="clr"] .text { background:#ffA500; } .x-reg-panel .push[type="clr"] img { left: 2px; right: inherit; margin: inherit; margin-top: auto; margin-bottom: auto; } .x-reg-panel .push[type="sbt"] .text { background: #fff; line-height:24px; text-align:center; } .x-reg-panel .push[type="csh"] .text { background-color :#4DA07D; color:#fff; text-align:center; } .x-reg-panel .push[type="sft"] .text { background: url(res/shift.png) no-repeat; background-color :#777; background-position: 2px 6px; background-size: 20px 20px; } .x-reg-panel .push[type="pay"] .text { background: url(res/shift.png) no-repeat; background-color :#4DA07D; background-position: 2px 6px; background-size: 20px 20px; } .x-reg-panel .push[type="eft"] .text { background-color :#4DA07D; } .x-reg-panel .push[type="dis"] .text { background: url(res/shift.png) no-repeat; background-color :#3E78B3; background-position: 2px 6px; background-size: 20px 20px; } .x-reg-panel .push[type="crg"] .text { background: url(res/shift.png) no-repeat; background-color :#E74C3C; background-position: 2px 6px; background-size: 20px 20px; } .x-reg-panel .push[type="cmd"] { background:white; }