addons/point_of_sale/static/src/css/pos.css

   1 /* --- Fonts --- */
   2
   3 @font-face{
   4     font-family: 'Inconsolata';
   5     src: url(../fonts/Inconsolata.otf);
   6 }
   7
   8 /* --- Styling of OpenERP Elements --- */
   9 .ui-dialog, .modal-dialog {
  10     background: white;
  11     padding: 10px;
  12     border-radius: 3px;
  13     font-family: sans-serif;
  14     box-shadow: 0px 10px 40px rgba(0,0,0,0.4);
  15     position: absolute;
  16     top: 30px;
  17     height: 400px;
  18     overflow: scroll;
  19 }
  20 .ui-dialog button, .modal-dialog button {
  21     padding: 8px;
  22     min-width: 48px;
  23 }
  24 .ui-dialog .ui-icon-closethick{
  25     float: right;
  26 }
  27 div.modal.in {
  28     position: absolute;
  29     background: white;
  30     padding: 20px;
  31     box-shadow: 0px 10px 20px black;
  32     border-radius: 3px;
  33     max-width: 600px;
  34     max-height: 400px;
  35     margin-top: -200px;
  36     margin-left: -300px;
  37     top: 50%;
  38     left: 50%;
  39 }
  40 /* --- Generic Restyling and Resets --- */
  41
  42 html {
  43     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  44     font-family: sans-serif;
  45 }
  46 table {
  47     border-spacing: 0px;
  48     border-collapse: collapse;
  49 }
  50 td {
  51     padding: 0px;
  52 }
  53
  54 .oe_hidden{
  55     display: none !important;
  56 }
  57 .clearfix:after {
  58     content:" ";
  59     display: block;
  60     visibility: hidden;
  61     line-height: 0;
  62     height: 0;
  63     clear: both;
  64 }
  65
  66
  67 .pos input::-webkit-outer-spin-button,
  68 .pos input::-webkit-inner-spin-button {
  69     -webkit-appearance: none;
  70     margin: 0;
  71 }
  72
  73 .pos button{
  74     box-shadow: none;
  75     outline: none;
  76     border: none;
  77     font-family: 'Lato';
  78 }
  79 .pos button:hover{
  80     background: default;
  81 }
  82
  83 .pos .oe_hidden{
  84     display: none !important;
  85 }
  86
  87 .pos ul, .pos li  {
  88     margin: 0;
  89     padding: 0;
  90     list-style-type: none;
  91 }
  92
  93 .pos {
  94     padding: 0;
  95     margin: 0;
  96     background-color: #f0eeee;
  97     font-family: "Lato","Lucida Grande", Helvetica, Verdana, Arial;
  98     color: #555555;
  99     font-size: 12px;
 100     position: absolute;
 101     left: 0;
 102     top: 0;
 103     width: 100%;
 104     height: 100%;
 105     -webkit-user-select: none;
 106        -moz-user-select: none;
 107             user-select: none;
 108     text-shadow: none;
 109     overflow: hidden;
 110 }
 111
 112 /*  ********* The black loading screen ********* */
 113
 114 .pos .loader{
 115     background-color: #222;
 116     position:absolute;
 117     left:0px;
 118     top:0px;
 119     width:100%;
 120     height:100%;
 121     z-index: 999;
 122     text-align: center;
 123     font-family: Lato;
 124     color: #555555;
 125 }
 126
 127 .pos .loader-feedback{
 128     width: 400px;
 129     height: 160px;
 130     margin: -60px -200px;
 131     position: absolute;
 132     left: 50%; top: 50%;
 133     text-align: center;
 134 }
 135 .pos .loader-feedback h1{
 136     font-weight: 300;
 137 }
 138 .pos .loader-feedback .progressbar{
 139     background: rgb(73,73,73);
 140     height: 1px;
 141 }
 142 .pos .loader-feedback .progressbar > .progress{
 143     height: 100%;
 144     background: white;
 145     width: 0%;
 146     box-shadow: 0px 0px 5px rgba(255,255,255,0.35);
 147 }
 148 .pos .loader-feedback .button{
 149     display: inline-block;
 150     margin: 25px auto;
 151     line-height: 42px;
 152     padding: 0px 16px;
 153     font-size: 20px;
 154     font-weight: 300;
 155     border: solid 1px;
 156     border-radius: 5px;
 157     cursor: pointer;
 158 }
 159 .pos .loader-feedback .button:active{
 160     color: #222;
 161     background: #555555;
 162 }
 163 /*  ********* Generic Layout Constructs  ********* */
 164
 165 .pos .window{
 166     position: absolute;
 167     top: 0px;
 168     left: 0px;
 169     width: 100%;
 170     height: 100%;
 171     display: table;
 172     border: none;
 173 }
 174 .pos .window .subwindow{
 175     display: table-row;
 176     width: 100%;
 177     height: 100%;
 178 }
 179 .pos .window .subwindow.collapsed{
 180     height: 0px;
 181 }
 182 .pos .subwindow .subwindow-container{
 183     display: table-cell;
 184     position: relative;
 185 }
 186 /* firefox seems to ignore the relative positionning of the subwindow-container
 187  * putting this inside subwindow-container fixes it.
 188  */
 189 .pos .subwindow .subwindow-container-fix{
 190     height: 100%;
 191     position: relative;
 192 }
 193
 194 /* ---- Scrollers ----- */
 195
 196 .pos .scroller-container{
 197     position: absolute;
 198     top: 0px;
 199     left: 0px;
 200     right: 0px;
 201     bottom: 0px;
 202 }
 203 .pos .scroller{
 204     width: 100%;
 205     height: 100%;
 206     overflow: hidden;
 207     overflow-y: auto;
 208     -webkit-overflow-scrolling: touch;
 209 }
 210 .pos .scroller.horizontal{
 211     overflow-y: hidden;
 212     overflow-x: auto;
 213 }
 214 .pos .scroller-content{
 215     -webkit-transform: translate3d(0,0,0);
 216 }
 217 .pos .scroller-container ::-webkit-scrollbar{
 218     width:  10px;
 219     height: 10px;
 220 }
 221 .pos .scroller-container ::-webkit-scrollbar-track{
 222     background: rgb(224,224,224);
 223     border-left: solid 1px rgb(200,200,200);
 224     border-top-right-radius: 3px;
 225     border-bottom-right-radius: 3px;
 226 }
 227 .pos .scroller-container ::-webkit-scrollbar-thumb{
 228     background: rgb(168,168,168);
 229     min-height: 30px;
 230 }
 231
 232 /*  ********* Generic element styling  ********* */
 233
 234 .pos a {
 235     text-decoration: none;
 236     color: #555555;
 237 }
 238 .pos button, .pos a.button {
 239     display: inline-block;
 240     cursor: pointer;
 241     padding: 4px 10px;
 242     font-size: 11px;
 243     border: 1px solid #cacaca;
 244     background: #e2e2e2;
 245     border-radius: 3px;
 246 }
 247 .pos ul, .pos ol {
 248     padding: 0;
 249     margin: 0;
 250 }
 251 .pos li {
 252     list-style-type: none;
 253 }
 254 .pos .pos-right-align {
 255     text-align: right;
 256 }
 257 .pos .pos-center-align {
 258     text-align: center;
 259 }
 260 .pos .pos-disc-font {
 261     font-size: 12px;
 262     font-style:italic;
 263     color: #808080;
 264 }
 265
 266 /*  ********* The black header bar ********* */
 267
 268
 269 .pos .pos-topheader {
 270     position:absolute;
 271     left:0;
 272     top:0;
 273     width: 100%;
 274     height: 48px;
 275     margin:0;
 276     padding:0;
 277     color: gray;
 278     background: #393939;
 279 }
 280
 281 /*  a) The left part of the top-bar */
 282
 283 .pos .pos-branding{
 284     position: absolute;
 285     display: table-cell;
 286     left:0;
 287     top:0;
 288     width:439px;
 289     height:100%;
 290     margin:0;
 291     padding:0;
 292     border-right: 1px solid #373737;
 293     text-align:left;
 294     line-height:100%;
 295     vertical-align: middle;
 296 }
 297 .pos .pos-logo {
 298     height: 35px;
 299     margin-left: 7px;
 300     margin-top: 2px;
 301     vertical-align:middle;
 302 }
 303 .pos .pos-branding .username{
 304     float:right;
 305     color:#DDD;
 306     font-size:16px;
 307     margin-right:32px;
 308     line-height: 48px;
 309     font-style:italic;
 310 }
 311
 312 /*  b) The right part of the top-bar */
 313
 314 .pos .pos-rightheader {
 315     position: absolute;
 316     left:440px;
 317     right:0;
 318     top:0;
 319     height:100%;
 320 }
 321
 322 .pos .order-button{
 323     color: #f0f0f0;
 324     display: inline-block;
 325     box-sizing: border-box;
 326     -moz-box-sizing: border-box;
 327     height: 46px;
 328     padding: 4px 8px;
 329     margin: 3px;
 330     margin-bottom: 0px;
 331     margin-right: 2px;
 332     padding-top: 0px;
 333     background: #8b8b8b;
 334     border-top-left-radius: 3px;
 335     border-top-right-radius: 3px;
 336     vertical-align: top;
 337     line-height: 42px;
 338     text-align: center;
 339     box-shadow: 0px -5px 10px -6px rgb(82,82,82) inset;
 340     cursor: pointer;
 341     min-width: 45px;
 342 }
 343 .pos .order-button.selected{
 344     font-weight: 900;
 345     background: #EEEEEE;
 346     color: rgb(75,75,75);
 347     height: 45px;
 348     border-bottom: solid 1px rgb(196, 196, 196);
 349     box-shadow: none;
 350 }
 351
 352 .pos .order-button .order-sequence{
 353     font-size: 16px;
 354     font-weight: 800;
 355     vertical-align: middle;
 356 }
 357 .pos .order-button.selected .order-sequence{
 358     color: white;
 359     background: black;
 360     display: inline-block;
 361     line-height: 24px;
 362     min-width: 24px;
 363     border-radius: 12px;
 364     margin-right: 4px;
 365     margin-left: -4px;
 366 }
 367
 368 .pos .order-button.square{
 369     margin-left:1px;
 370     background: #5c5c5c;
 371     color: rgb(160,160,160);
 372     font-size: 18px;
 373     line-height: 45px;
 374 }
 375 .pos .order-button:not(.square) > .fa {
 376     font-size: 16px;
 377     vertical-align: middle;
 378     margin-right: 4px;
 379 }
 380 .pos .order-button .order-sequence{
 381     font-size: 16px;
 382     font-weight: 800;
 383 }
 384
 385 .pos .order-selector {
 386     display: inline-block;
 387 }
 388 .pos .orders {
 389     display: inline-block;
 390     vertical-align: top;
 391     margin-left: 8px;
 392 }
 393
 394 /*  c) The session buttons */
 395
 396 .pos .pos-rightheader .header-button{
 397     float: right;
 398     height: 48px;
 399     padding-left: 16px;
 400     padding-right: 16px;
 401     border-right: 1px solid #292929;
 402     border-left: 1px solid #292929;
 403     color: #DDD;
 404     line-height: 48px;
 405     text-align: center;
 406     cursor: pointer;
 407
 408     -webkit-transition-property: background;
 409     -webkit-transition-duration: 0.2s;
 410     -webkit-transition-timing-function: ease-out;
 411 }
 412 .pos .pos-rightheader .header-button:last-child{
 413     border-left:  1px solid #3a3a3a;
 414 }
 415 .pos .pos-rightheader .header-button:active{
 416     background: rgba(0,0,0,0.2);
 417     color:#EEE;
 418 }
 419 .pos .pos-rightheader .header-button.confirm {
 420     background: #359766;
 421     color: white;
 422     font-weight: bold;
 423 }
 424
 425 /*  c) The notifications indicator */
 426
 427 .pos .oe_status{
 428     float:right;
 429     color: rgba(255,255,255,0.4);
 430     padding: 14px;
 431     line-height: 20px;
 432     font-size: 20px;
 433     vertical-align:middle;
 434     font-style: italic;
 435     cursor:pointer;
 436 }
 437 .pos .oe_status.oe_inactive{
 438     cursor: default;
 439 }
 440 .pos .oe_status .oe_icon{
 441     display:inline-block;
 442     cursor:pointer;
 443     width:20px; height:16px;
 444     color: white;
 445 }
 446 .pos .oe_status .oe_red,
 447 .pos .oe_icon.oe_red {
 448     color: rgb(197, 52, 0);
 449 }
 450 .pos .oe_statu .oe_green,
 451 .pos .oe_icon.oe_green {
 452     color: rgb(94, 185, 55);
 453 }
 454 .pos .oe_status .oe_orange,
 455 .pos .oe_icon.oe_orange {
 456     color: rgb(239, 153, 65);
 457 }
 458
 459 /*  ********* Contains everything below the  bar ********* */
 460
 461 .pos .pos-content {
 462     width: 100%;
 463     position: absolute;
 464     top: 48px;
 465     bottom: 0;
 466     background: #F0EEEE;
 467 }
 468
 469 /*  ********* The leftpane contains the order, numpad and paypad ********* */
 470
 471 .pos .pos-leftpane {
 472     -webkit-box-sizing: border-box;
 473        -moz-box-sizing: border-box;
 474         -ms-box-sizing: border-box;
 475             box-sizing: border-box;
 476     position:absolute;
 477     left:0;
 478     width:440px;
 479     top:0px;
 480     bottom:0;
 481     border-right: solid 1px #CECBCB;
 482 }
 483 .pos .pos-leftpane .pads {
 484     background: #F0EEEE;
 485     white-space: nowrap;
 486 }
 487 /*  ********* The control buttons ********* */
 488
 489 .pos .control-buttons {
 490     padding-top: 8px;
 491 }
 492 .pos .control-button {
 493     background: #e2e2e2;
 494     border: solid 1px #BEBEBE;
 495     display: inline-block;
 496     line-height: 38px;
 497     min-width: 38px;
 498     text-align: center;
 499     border-radius: 3px;
 500     padding: 0px 10px;
 501     font-size: 18px;
 502     margin-left: 6px;
 503     cursor: pointer;
 504 }
 505 .pos .control-button .fa{
 506     margin-right: 4px;
 507 }
 508
 509 .pos .control-button.highlight,
 510 .pos .button.highlight {
 511     background: #6EC89B !important;
 512     border: solid 1px #6EC89B !important;
 513     color: white !important;
 514 }
 515 .pos .control-button:active {
 516     background: #7F82AC;
 517     border: solid 1px #7F82AC;
 518     color: white;
 519 }
 520 .pos .control-button.disabled,
 521 .pos .control-button.disabled:active{
 522     background: #e2e2e2;
 523     border: solid 1px #BEBEBE;
 524     opacity: 0.5;
 525     cursor: default;
 526     color: inherit;
 527 }
 528
 529 /*  ********* The actionpad (payment, set customer) ********* */
 530
 531 .pos .actionpad{
 532     padding: 8px 3px 8px 19px;
 533     display: inline-block;
 534     text-align: center;
 535     vertical-align: top;
 536     width: 183px;
 537     max-height: 350px;
 538     overflow-y: auto;
 539     overflow-x: hidden;
 540 }
 541 .pos .actionpad .button {
 542     height: 50px;
 543     display: block;
 544     width: 100%;
 545     margin: 0px -6px 4px -2px;
 546     font-weight: bold;
 547     vertical-align: middle;
 548     color: #555555;
 549     font-size: 14px;
 550 }
 551 .pos .actionpad .button.pay {
 552     height: 158px;
 553 }
 554 .pos .actionpad .button.pay .fa {
 555     display: block;
 556     font-size: 32px;
 557     line-height: 54px;
 558     padding-top: 6px;
 559     background: rgb(86, 86, 86);
 560     color: white;
 561     width: 60px;
 562     margin: auto;
 563     border-radius: 30px;
 564     margin-bottom: 10px;
 565 }
 566
 567 /*  ********* The Numpad ********* */
 568
 569 .pos .numpad {
 570     padding: 8px 8px 8px 4px;
 571     display: inline-block;
 572     text-align: center;
 573 }
 574 .pos .numpad button {
 575     height: 50px;
 576     width: 50px;
 577     margin: 0px 3px 4px 0px;
 578     font-weight: bold;
 579     vertical-align: middle;
 580     color: #555555;
 581 }
 582 .pos .input-button {
 583     font-size: 24px;
 584 }
 585 .pos .mode-button {
 586     font-size: 14px;
 587 }
 588
 589 /*  ********* The right pane contains the screens and headers ********* */
 590
 591 .pos .rightpane {
 592     position: absolute;
 593     top: 0;
 594     /*bottom: 105px;*/
 595     bottom:0;
 596     left: 440px;
 597     right: 0;
 598     vertical-align: top;
 599     -webkit-transform: translate3d(0,0,0);
 600 }
 601
 602 .pos .rightpane-header {
 603     padding: 0;
 604     height: 48px;
 605     border-bottom: 1px solid #c7c7c7;
 606     background: #d3d3d3;
 607     text-align: center;
 608 }
 609
 610 /*  ********* The product list  ********* */
 611
 612 .pos .product-list {
 613     padding: 10px;
 614     text-align: left;
 615     -webkit-transform: translate3d(0,0,0);
 616 }
 617
 618 .pos .product-list-scroller{
 619     -webkit-box-sizing: border-box;
 620        -moz-box-sizing: border-box;
 621         -ms-box-sizing: border-box;
 622             box-sizing: border-box;
 623     width:100%;
 624     height:100%;
 625     overflow: hidden;
 626     overflow-y: auto;
 627     -webkit-overflow-scrolling: touch;
 628     -webkit-transform: translate3d(0,0,0);
 629
 630 }
 631 .pos .product-list-container {
 632     position:absolute;
 633     top:0px;
 634     bottom:0px;
 635     left:0px;
 636     right:0px;
 637 }
 638
 639 /*  a) the product list navigation bar */
 640
 641 .pos .breadcrumbs{
 642     display: inline-block;
 643     text-align: left;
 644     float:left;
 645 }
 646 .pos .breadcrumb{
 647     float: left;
 648     display: inline-block;
 649     line-height: 48px;
 650     height: 48px;
 651     min-width: 48px;
 652 }
 653 .pos .breadcrumb:last-child {
 654     padding-right: 3px;
 655     border-right: 1px solid #c5c5c5;
 656 }
 657 .pos .breadcrumb-button {
 658     display: inline-block;
 659     padding: 0 9px;
 660     vertical-align: top;
 661     color: #808080;
 662     font-size: 14px;
 663     cursor: pointer;
 664 }
 665 .pos .breadcrumb-arrow{
 666     width: 28px;
 667 }
 668 .pos .breadcrumb-homeimg {
 669     width: 27px;
 670     margin: 12px 6px;
 671 }
 672
 673 /*  b) the search box */
 674
 675 .pos .searchbox {
 676     position: absolute;
 677     right: 2px;
 678 }
 679 .pos .searchbox input {
 680     width: 100px;
 681     border: 1px solid #cecbcb;
 682     padding: 10px 20px;
 683     padding-left: 38px;
 684     margin: 6px;
 685     background: url("../img/search.png") no-repeat 15px;
 686     background-color: white;
 687     border-radius: 20px;
 688     font-family: Lato;
 689     font-size: 13px;
 690 }
 691 .pos .searchbox input:focus {
 692     outline: none;
 693     box-shadow: 0px 0px 0px 2px rgb(153, 153, 255) inset;
 694     color: rgb(153, 153, 255);
 695 }
 696 .pos .search-clear {
 697     position: absolute;
 698     width: 30px;
 699     height: 30px;
 700     top: 11px;
 701     left: 11px;
 702     cursor: pointer;
 703 }
 704
 705 /*  c) the categories list */
 706
 707 .pos .categories {
 708     position: relative;
 709 }
 710 .pos .categories h4 {
 711     display: inline-block;
 712     margin: 9px 5px;
 713 }
 714
 715 .pos .category-list {
 716     text-align: left;
 717     padding: 10px;
 718     background: rgb(229, 229, 229);
 719     border-bottom: 1px solid #cecece;
 720 }
 721 .pos .category-list.simple {
 722     padding: 0px;
 723     background: #cecece;
 724     display: -webkit-flex;
 725     display: flex;
 726     -webkit-flex-flow: row wrap;
 727     flex-flow: row wrap;
 728     border-bottom: none;
 729 }
 730
 731
 732 /*  d) the category button */
 733
 734 .pos .category-button {
 735     position: relative;
 736     vertical-align: top;
 737     display: inline-block;
 738     font-size: 11px;
 739     margin: 5px !important;
 740     width: 120px;
 741     height:120px;
 742     background:#fff;
 743     border: 1px solid #d7d7d7;
 744     border-radius: 3px;
 745     border-bottom-width: 3px;
 746     cursor: pointer;
 747 }
 748
 749 .pos .category-simple-button{
 750     position: relative;
 751     display: inline-block;
 752     font-size: 14px;
 753     margin-right: 1px;
 754     margin-bottom: 1px;
 755     padding: 5px 12px;
 756     line-height: 32px;
 757     flex-grow: 1;
 758     -webkit-flex-grow: 1;
 759     cursor: pointer;
 760     background: #e2e2e2;
 761 }
 762 .pos .category-simple-button:active{
 763     color: white;
 764     background: #7f82ac;
 765
 766     -webkit-transition-property: background, border;
 767     -webkit-transition-duration: 0.2s;
 768     -webkit-transition-timing-function: ease-out;
 769 }
 770
 771
 772
 773 .pos .category-button .category-img {
 774     position: relative;
 775     width: 120px;
 776     height: 100px;
 777     text-align: center;
 778     cursor: pointer;
 779 }
 780
 781 .pos .category-button .category-img img {
 782     max-height: 100px;
 783     max-width:  120px;
 784     vertical-align: middle;
 785 }
 786
 787 .pos .category-button .category-name {
 788     position: absolute;
 789     -webkit-box-sizing: border-box;
 790        -moz-box-sizing: border-box;
 791         -ms-box-sizing: border-box;
 792             box-sizing: border-box;
 793     bottom: 0;
 794     top: auto;
 795     line-height: 14px;
 796     width: 100%;
 797     /* for some reason the -90deg orientation doesn't match the -webkit-linear-gradient. It should be 180deg here.
 798      * webkit also insists on rendering *both* gradients instead of only the native one. So it doesn't looks right. ugh.
 799     background:         linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,1), rgba(255,255,255,1)); */
 800     /*background:#FFF;*/
 801     padding: 3px;
 802     padding-top: 15px;
 803     color: #7C7BAD;
 804 }
 805
 806 /*  e) the product */
 807
 808 .pos .product {
 809     position:relative;
 810     vertical-align: top;
 811     display: inline-block;
 812     line-height: 100px;
 813     font-size: 11px;
 814     margin: 5px !important;
 815     width: 120px;
 816     height:120px;
 817     background:#fff;
 818     border: 1px solid #e2e2e2;
 819     border-radius: 3px;
 820     border-bottom-width: 3px;
 821     overflow: hidden;
 822     cursor: pointer;
 823 }
 824
 825 .pos .product .product-img {
 826     position: relative;
 827     width: 120px;
 828     height: 100px;
 829     background: white;
 830     text-align: center;
 831 }
 832
 833 .pos .product .product-img img {
 834     max-height: 100px;
 835     max-width:  120px;
 836     vertical-align: middle;
 837 }
 838
 839 .pos .product .price-tag {
 840     position: absolute;
 841     top: 2px;
 842     right: 2px;
 843     vertical-align: top;
 844     color: white;
 845     line-height: 13px;
 846     background: #7f82ac;
 847     padding: 2px 5px;
 848     border-radius: 2px;
 849 }
 850
 851 .pos .product .product-name {
 852     position: absolute;
 853     -webkit-box-sizing: border-box;
 854        -moz-box-sizing: border-box;
 855         -ms-box-sizing: border-box;
 856             box-sizing: border-box;
 857     bottom:0;
 858     top:auto;
 859     line-height: 14px;
 860     width:100%;
 861     overflow: hidden;
 862     text-overflow: ellipsis;
 863     background: -webkit-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,1), rgba(255,255,255,1));
 864     background:    -moz-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,1), rgba(255,255,255,1));
 865     background:     -ms-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,1), rgba(255,255,255,1));
 866     /* troublesome in latest webkit
 867     background:         linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,1), rgba(255,255,255,1));
 868     */
 869     /*background:#FFF;*/
 870     padding: 3px;
 871     padding-top:15px;
 872 }
 873
 874
 875 /*  ********* The Screens  ********* */
 876
 877 .pos .screen {
 878     position:absolute;
 879     text-align: center;
 880     top:0px;
 881     bottom:0px;
 882     width:100%;
 883     overflow: auto;
 884     -webkit-overflow-scrolling: touch;
 885 }
 886 .pos .screen header h2 {
 887     margin-top: 0px;
 888     padding-top: 7px;
 889 }
 890 .pos .screen p{
 891     font-size: 18px;
 892 }
 893 .pos .dialog{
 894     width: 500px;
 895     margin-left: auto;
 896     margin-right: auto;
 897     margin-top: 50px;
 898     text-align: center;
 899 }
 900 .pos .dialog p{
 901     font-size: 25px;
 902     margin-top: 10px;
 903     color: #5a5a5a;
 904 }
 905
 906 /* a) Generic Screen Layout Constructs */
 907
 908 .screen .screen-content{
 909     margin: 0px auto;
 910     max-width: 1024px;
 911     text-align: left;
 912     height: 100%;
 913     overflow: hidden;
 914     position: relative;
 915 }
 916 .screen .top-content{
 917     position: absolute;
 918     left: 0px; top: 0px; right: 0px;
 919     height: 64px;
 920     border-bottom: dashed 1px rgb(215,215,215);
 921     text-align: center;
 922 }
 923 .screen .top-content .button {
 924     position: absolute;
 925     top: 0px;
 926     line-height: 32px;
 927     padding: 3px 13px;
 928     font-size: 20px;
 929     background: rgb(230, 230, 230);
 930     margin: 12px;
 931     border-radius: 3px;
 932     border: solid 1px rgb(209, 209, 209);
 933     cursor: pointer;
 934 }
 935 .screen .top-content .button.highlight{
 936     background: rgb(110,200,155);
 937     color: white;
 938     border: solid 1px rgb(110,200,155);
 939 }
 940 .screen .top-content .button.back {
 941     left: 0px;
 942     margin-left: 16px;
 943 }
 944 .screen .top-content .button.next{
 945     right: 0px;
 946     margin-right: 16px;
 947 }
 948 .screen .left-content{
 949     position: absolute;
 950     left:0px; top: 64px; bottom: 0px;
 951     right:50%;
 952     overflow-x: hidden;
 953     overflow-y: auto;
 954     border-right: dashed 1px rgb(215,215,215);
 955 }
 956 .screen .left-content.pc40{
 957     right: 66%;
 958 }
 959 .screen .right-content{
 960     position: absolute;
 961     right:0px; top: 64px; bottom: 0px;
 962     left:50%;
 963     overflow-x: hidden;
 964     overflow-y: auto;
 965 }
 966 .screen .right-content.pc60{
 967     left:34%
 968 }
 969 .screen .centered-content{
 970     position: absolute;
 971     right:25%; top: 64px; bottom: 0px;
 972     left:25%;
 973     border-right: dashed 1px rgb(215,215,215);
 974     border-left: dashed 1px rgb(215,215,215);
 975     overflow-x: hidden;
 976     overflow-y: auto;
 977 }
 978 .screen .full-content{
 979     position: absolute;
 980     right: 0%; top: 65px; bottom: 0px;
 981     left: 0%;
 982 }
 983
 984 /* a) Layout for the Product Screen */
 985
 986 .pos .screen .layout-table {
 987     border:none;
 988     width:100%;
 989     height:100%;
 990 }
 991
 992 .pos .screen .header-row {
 993     border:none;
 994     width:100%;
 995     height:0px;
 996 }
 997
 998 .pos .screen .header-cell{
 999     border:none;
1000     width:100%;
1001     height:0px;
1002 }
1003 .pos .screen .content-row {
1004     width:100%;
1005     height:100%;
1006 }
1007 .pos .screen .content-cell{
1008     width:100%;
1009 }
1010 .pos .screen .content-cell .content-container{
1011     height:100%;
1012     position:relative;
1013 }
1014
1015
1016 /* b) The payment screen */
1017
1018 .pos .payment-numpad {
1019     display: inline-block;
1020     width: 50%;
1021     box-sizing: border-box;
1022     padding: 8px;
1023     text-align: center;
1024     float: left;
1025 }
1026 .pos .payment-numpad .numpad button {
1027     width: 66px;
1028     height: 66px;
1029 }
1030
1031 .pos .paymentlines-container {
1032     padding: 16px;
1033     padding-top: 0;
1034     border-bottom: dashed 1px gainsboro;
1035     min-height: 154px;
1036 }
1037
1038 .pos .paymentlines {
1039     width: 100%;
1040 }
1041 .pos .paymentlines .controls {
1042     width: 40px;
1043 }
1044 .pos .paymentlines .label > * {
1045     font-size: 16px;
1046     padding: 8px;
1047 }
1048 .pos .paymentlines tbody{
1049     background: white;
1050     border-radius: 3px;
1051 }
1052 .pos .paymentline{
1053     font-size: 22px;
1054 }
1055 .pos .paymentline.selected {
1056     font-size: 22px;
1057     background: #6EC89B;
1058     color: white;
1059 }
1060 .pos .paymentline.selected .edit {
1061     background: white;
1062     color: #6EC89B;
1063     outline: 3px blue;
1064     box-shadow: 0px 0px 0px 3px #6EC89B;
1065     position: relative;
1066     border-radius: 3px;
1067 }
1068
1069 .pos .paymentline > *{
1070     padding: 8px 12px;
1071 }
1072 .pos .paymentline .col-due,
1073 .pos .paymentline .col-tendered,
1074 .pos .paymentline .col-change {
1075     min-width: 90px;
1076 }
1077 .pos .paymentline .col-change.highlight {
1078     background: rgb(184, 152, 204);
1079 }
1080 .pos .paymentline .col-name {
1081     font-size: 16px;
1082 }
1083 .pos .paymentline .delete-button{
1084     cursor: pointer;
1085     text-align: center;
1086 }
1087 .pos .payment-buttons {
1088     display: inline-block;
1089     width: 50%;
1090     box-sizing: border-box;
1091     padding: 16px;
1092     float: right;
1093 }
1094
1095 .payment-screen   .payment-buttons .button {
1096     background: rgb(221, 221, 221);
1097     line-height: 48px;
1098     margin-bottom: 4px;
1099     border-radius: 3px;
1100     font-size: 16px;
1101     padding: 0px 8px;
1102     border: solid 1px rgb(202, 202, 202);
1103     cursor: pointer;
1104     text-align: center;
1105 }
1106 .payment-screen  .paymentlines-empty .total {
1107     text-align: center;
1108     padding: 24px 0px 18px;
1109     font-size: 64px;
1110     color: #43996E;
1111     text-shadow: 0px 2px white, 0px 2px 2px rgba(0, 0, 0, 0.27);
1112 }
1113 .payment-screen  .paymentlines-empty .message {
1114     text-align: center;
1115 }
1116
1117 /* c) The receipt screen */
1118
1119 .pos .receipt-screen .centered-content .button {
1120     line-height: 40px;
1121     padding: 3px 13px;
1122     font-size: 20px;
1123     text-align: center;
1124     background: rgb(230, 230, 230);
1125     margin: 16px;
1126     margin-bottom: 0px;
1127     border-radius: 3px;
1128     border: solid 1px rgb(209, 209, 209);
1129     cursor: pointer;
1130 }
1131 .pos .pos-receipt-container {
1132     font-size: 0.75em;
1133     text-align: center;
1134 }
1135
1136 .pos .pos-sale-ticket {
1137     text-align: left;
1138     width: 300px;
1139     background-color: white;
1140     margin: 20px;
1141     padding: 15px;
1142     font-size: 14px;
1143     padding-bottom:30px;
1144     display: inline-block;
1145     font-family: "Inconsolata";
1146     border: solid 1px rgb(220,220,220);
1147     border-radius: 3px;
1148     overflow: hidden;
1149 }
1150 .pos .pos-sale-ticket pre{
1151     font-family: "Inconsolata";
1152 }
1153 .pos .pos-sale-ticket .emph{
1154     font-size: 20px;
1155     margin:5px;
1156 }
1157 .pos .pos-sale-ticket table {
1158     width: 100%;
1159     border: 0;
1160     table-layout: fixed;
1161 }
1162 .pos .pos-sale-ticket table td {
1163     border: 0;
1164     word-wrap: break-word;
1165 }
1166
1167 @page {
1168     margin: 0;
1169 }
1170
1171 @media print {
1172     body {
1173         margin: 0;
1174     }
1175     .oe_leftbar,
1176     .pos .pos-topheader,
1177     .pos .pos-leftpane,
1178     .pos .keyboard_frame,
1179     .pos .receipt-screen header,
1180     .pos .receipt-screen .top-content,
1181     .pos .receipt-screen .centered-content .button {
1182         display: none !important;
1183     }
1184     .pos,
1185     .pos .pos-content,
1186     .pos .rightpane,
1187     .pos .screen,
1188     .pos .window,
1189     .pos .window .subwindow,
1190     .pos .subwindow .subwindow-container{
1191         display: block;
1192         position: static;
1193         height: auto;
1194     }
1195     .pos{
1196         background: white !important;
1197     }
1198     .pos .rightpane {
1199         left: 0px !important;
1200         background-color: white;
1201     }
1202     .pos .receipt-screen {
1203         text-align: left;
1204     }
1205     .pos .receipt-screen .centered-content{
1206         position: static;
1207         border: none;
1208         margin: none;
1209     }
1210     .pos .pos-receipt-container {
1211         text-align: left;
1212     }
1213     .pos-actionbar {
1214         display: none !important;
1215     }
1216     .debug-widget{
1217         display: none !important;
1218     }
1219     .pos *{
1220         text-shadow: none !important;
1221         box-shadow: none !important;
1222         background: transparent !important;
1223     }
1224     .pos .pos-sale-ticket{
1225         margin: 0;
1226         margin-left: auto !important;
1227         margin-right: auto !important;
1228         border: none !important;
1229         font-size: 13px !important;
1230         width: 266px !important;
1231     }
1232 }
1233
1234 /* d) The Scale screen */
1235
1236 .pos .scale-screen .product-price{
1237     font-size: 25px;
1238     margin: 16px;
1239     text-align: center;
1240     display: inline-block;
1241     width: 40%;
1242 }
1243 .pos .scale-screen .computed-price{
1244     font-size: 25px;
1245     display: inline-block;
1246     text-align: right;
1247     margin: 16px;
1248     margin-top: 0px;
1249     padding: 16px;
1250     background: white;
1251     width: 40%;
1252     border-radius: 3px;
1253     font-family: Inconsolata;
1254     font-weight: bold;
1255     text-shadow: 0px 2px 0px rgb(210,210,210);
1256     box-shadow: 0px 2px 0px rgb(225,225,225) inset;
1257     float: right;
1258 }
1259 .pos .scale-screen .buy-product{
1260     text-align: center;
1261     font-size: 32px;
1262     background: rgb(110,200,155);
1263     color: white;
1264     border-radius: 3px;
1265     padding: 16px;
1266     margin: 16px;
1267     cursor: pointer;
1268 }
1269
1270 .pos .scale-screen .weight{
1271     text-align: right;
1272     margin: 16px;
1273     background: white;
1274     padding: 20px;
1275     padding-right: 30px;
1276     font-size: 56px;
1277     border-radius: 3px;
1278     font-family: Inconsolata;
1279     text-shadow: 0px 2px 0px rgb(210, 210, 210);
1280     box-shadow: 0px 2px 0px rgb(225,225,225) inset;
1281 }
1282
1283
1284 /* e) The Client List Screen */
1285
1286 .pos .clientlist-screen .client-list{
1287     font-size: 16px;
1288     width: 100%;
1289     line-height: 40px;
1290 }
1291 .pos .clientlist-screen .client-list th,
1292 .pos .clientlist-screen .client-list td {
1293     padding: 0px 8px;
1294 }
1295 .pos .clientlist-screen .client-list tr{
1296     transition: all 150ms linear;
1297     background: rgb(230,230,230);
1298 }
1299 .pos .clientlist-screen .client-list thead > tr,
1300 .pos .clientlist-screen .client-list tr:nth-child(even) {
1301     background: rgb(247,247,247);
1302 }
1303 .pos .clientlist-screen .client-list tr.highlight{
1304     transition: all 150ms linear;
1305     background: rgb(110,200,155) !important;
1306     color: white;
1307 }
1308 .pos .clientlist-screen .client-list tr.lowlight{
1309     transition: all 150ms linear;
1310     background: rgb(216, 238, 227);
1311 }
1312 .pos .clientlist-screen .client-list tr.lowlight:nth-child(even){
1313     transition: all 150ms linear;
1314     background: rgb(227, 246, 237);
1315 }
1316 .pos .clientlist-screen .client-details{
1317     padding: 16px;
1318     border-bottom: solid 5px rgb(110,200,155);
1319 }
1320 .pos .clientlist-screen .client-picture{
1321     height: 64px;
1322     width: 64px;
1323     border-radius: 32px;
1324     overflow: hidden;
1325     text-align: center;
1326     float: left;
1327     margin-right: 16px;
1328     background: white;
1329     position: relative;
1330 }
1331 .pos .clientlist-screen .client-picture > img {
1332     position: absolute;
1333     top: -9999px;
1334     bottom: -9999px;
1335     right: -9999px;
1336     left: -9999px;
1337     max-height: 64px;
1338     margin: auto;
1339 }
1340 .pos .clientlist-screen .client-picture > .fa {
1341     line-height: 64px;
1342     font-size: 32px;
1343 }
1344 .pos .clientlist-screen .client-picture .image-uploader {
1345     position: absolute;
1346     z-index: 1000;
1347     top: 0;
1348     left: 0;
1349     right: 0;
1350     bottom: 0;
1351     opacity: 0;
1352     cursor: pointer;
1353 }
1354 .pos .clientlist-screen .client-name {
1355     font-size: 32px;
1356     line-height: 64px;
1357     margin-bottom:16px;
1358 }
1359 .pos .clientlist-screen .edit-buttons {
1360     position: absolute;
1361     right: 16px;
1362     top: 10px;
1363 }
1364 .pos .clientlist-screen .edit-buttons .button{
1365     display: inline-block;
1366     margin-left: 16px;
1367     color: rgb(128,128,128);
1368     cursor: pointer;
1369     font-size: 36px;
1370 }
1371 .pos .clientlist-screen .client-details-box{
1372     position: relative;
1373     font-size: 16px;
1374 }
1375 .pos .clientlist-screen .client-details-left{
1376     width: 50%;
1377     float: left;
1378 }
1379 .pos .clientlist-screen .client-details-right{
1380     width: 50%;
1381     float: right;
1382 }
1383 .pos .clientlist-screen .client-detail{
1384     line-height: 24px;
1385 }
1386 .pos .clientlist-screen .client-detail > .label{
1387     font-weight: bold;
1388     display: inline-block;
1389     width: 75px;
1390     text-align: right;
1391     margin-right: 8px;
1392 }
1393 .pos .clientlist-screen .client-details input,
1394 .pos .clientlist-screen .client-details select
1395 {
1396     padding: 4px;
1397     border-radius: 3px;
1398     border: solid 1px #cecbcb;
1399     margin-bottom: 4px;
1400     background: white;
1401     font-family: "Lato","Lucida Grande", Helvetica, Verdana, Arial;
1402     color: #555555;
1403     width: 340px;
1404     font-size: 14px;
1405     box-sizing: border-box;
1406 }
1407 .pos .clientlist-screen .client-details input.client-name {
1408     font-size: 24px;
1409     line-height: 24px;
1410     margin: 18px 6px;
1411     width: 340px;
1412 }
1413 .pos .clientlist-screen .client-detail > .empty{
1414     opacity: 0.3;
1415 }
1416 .pos .clientlist-screen .searchbox{
1417     right: auto;
1418     margin-left: -90px;
1419     margin-top:8px;
1420     left: 50%;
1421 }
1422 .pos .clientlist-screen .searchbox input{
1423     width: 120px;
1424 }
1425 .pos .clientlist-screen .button.new-customer {
1426     left: 50%;
1427     margin-left: 120px;
1428 }
1429
1430
1431 /*  ********* The OrderWidget  ********* */
1432
1433 .pos .order-container{
1434     position: absolute;
1435     top: 0px;
1436     width:100%;
1437     height: 100%;
1438     background: #F0EEEE;
1439 }
1440
1441 .pos .order-scroller{
1442     width:100%;
1443     height:100%;
1444     overflow: hidden;
1445     overflow-y: auto;
1446     -webkit-overflow-scrolling: touch;
1447 }
1448
1449 .pos .scrollable-y{
1450     overflow: hidden !important;
1451     overflow-y: auto !important;
1452     -webkit-overflow-scrolling: touch !important;
1453 }
1454
1455 .pos .order{
1456     background: white;
1457     padding-bottom:15px;
1458     padding-top:15px;
1459     margin-left:16px;
1460     margin-right:16px;
1461     margin-top:16px;
1462     margin-bottom:16px;
1463     font-size:16px;
1464     border-radius: 3px;
1465     border: solid 1px rgb(220,220,220);
1466     text-align: left;
1467     max-width: 500px;
1468     -webkit-transform: translate3d(0,0,0);
1469 }
1470
1471 .pos .order .empty{
1472     text-align:center;
1473     margin-top: 15px;
1474     margin-bottom: 5px;
1475     color:#999;
1476     font-weight: normal;
1477 }
1478
1479 .pos .order .summary{
1480     width:100%;
1481     text-align:right;
1482     font-weight: bold;
1483     margin-top:20px;
1484     margin-bottom:10px;
1485 }
1486 .pos .order .summary .line{
1487     float: right;
1488     margin-right:15px;
1489     margin-left: 15px;
1490     padding-top:5px;
1491     border-top: solid 2px;
1492     border-color:#777;
1493 }
1494 .pos .order .summary .line .subentry{
1495     font-size: 14px;
1496     font-weight: normal;
1497     text-align: center;
1498 }
1499 .pos .order .summary .line.empty{
1500     text-align: right;
1501     border-color:#BBB;
1502     color:#999;
1503 }
1504
1505 .pos .order .summary .fidpoints{
1506     position: absolute;
1507     left: 20px;
1508     padding: 10px;
1509     color: #6EC89B;
1510     background: rgba(110, 200, 155, 0.17);
1511     border-radius: 3px;
1512 }
1513
1514 .submit-kitchen-button {
1515     float: left;
1516     background: rgb(61, 235, 82);
1517     color: white;
1518     padding: 12px 20px;
1519     margin: 0px 15px;
1520     border-radius: 3px;
1521     cursor: pointer;
1522 }
1523
1524 /*  ********* The OrderLineWidget  ********* */
1525
1526 .pos .order .orderline{
1527     width:100%;
1528     margin:0px;
1529     padding-top:3px;
1530     padding-bottom:10px;
1531     padding-left:15px;
1532     padding-right:15px;
1533     cursor: pointer;
1534     -webkit-box-sizing: border-box;
1535        -moz-box-sizing: border-box;
1536         -ms-box-sizing: border-box;
1537             box-sizing: border-box;
1538     -webkit-transition: background 250ms ease-in-out;
1539        -moz-transition: background 250ms ease-in-out;
1540             transition: background 250ms ease-in-out;
1541 }
1542 .pos .order .orderline:active{
1543     background: rgba(140,143,183,0.05);
1544     -webkit-transition: background 50ms ease-in-out;
1545        -moz-transition: background 50ms ease-in-out;
1546             transition: background 50ms ease-in-out;
1547 }
1548 .pos .order .orderline.empty:active{
1549     background: transparent;
1550     cursor: default;
1551 }
1552
1553 .pos .order .orderline.selected{
1554     background: rgba(140,143,183,0.2);
1555     -webkit-transition: background 250ms ease-in-out;
1556        -moz-transition: background 250ms ease-in-out;
1557             transition: background 250ms ease-in-out;
1558     cursor: default;
1559 }
1560 .pos .order .orderline .product-name{
1561     padding:0;
1562     display:inline-block;
1563     font-weight: bold;
1564     width:80%;
1565     overflow:hidden;
1566     text-overflow: ellipsis;
1567 }
1568 .pos .order .orderline .price{
1569     padding:0;
1570     font-weight: bold;
1571     float:right;
1572 }
1573 .pos .order .orderline .info-list{
1574     color: #888;
1575     margin-left:10px;
1576 }
1577 .pos .order .orderline .info-list em{
1578     color: #777;
1579     font-weight: bold;
1580     font-style:normal;
1581 }
1582
1583 /*  ********* SplitBill ********* */
1584
1585 .splitbill-screen .order-info {
1586     text-align: center;
1587     margin-bottom:20px;
1588     padding: 20px 0px;
1589     font-size: 64px;
1590     color: #43996E;
1591     text-shadow: 0px 2px white, 0px 2px 2px rgba(0, 0, 0, 0.27);
1592     border-bottom: dashed 1px rgb(215,215,215);
1593 }
1594 .splitbill-screen .order .orderline.selected{
1595     background: rgb(110,200,155);
1596     color: white;
1597     -webkit-transition: background 250ms ease-in-out;
1598        -moz-transition: background 250ms ease-in-out;
1599             transition: background 250ms ease-in-out;
1600     cursor: default;
1601 }
1602 .splitbill-screen .order .orderline.partially.selected{
1603     background: rgb(136, 214, 176);
1604 }
1605 .splitbill-screen .order .orderline.selected .info-list {
1606     color: white;
1607 }
1608 .splitbill-screen .order .orderline.selected .info-list em{
1609     color: white;
1610     font-size: 24px;
1611     vertical-align: top;
1612 }
1613 .splitbill-screen .paymentmethods,
1614 .payment-screen   .paymentmethods {
1615     margin: 16px;
1616 }
1617 .splitbill-screen .paymentmethod,
1618 .payment-screen   .paymentmethod {
1619     background: rgb(221, 221, 221);
1620     line-height: 40px;
1621     margin-bottom: 4px;
1622     border-radius: 3px;
1623     font-size: 16px;
1624     border: solid 1px rgb(202, 202, 202);
1625     cursor: pointer;
1626     text-align: center;
1627 }
1628 .splitbill-screen .paymentmethod.active,
1629 .payment-screen   .paymentmethod.active {
1630     background: #6EC89B;
1631     color: white;
1632     border-color: #6EC89B;
1633 }
1634
1635
1636
1637 /*  ********* The ActionBarWidget  ********* */
1638
1639 .pos .pos-actionbar{
1640     height: 105px;
1641     background: #f5f5f5;    /*#ebebeb;*/
1642     border-top: solid 1px #cecece;
1643     z-index:900;
1644 }
1645
1646 .pos .pos-actionbar ul{
1647     list-style:  none;
1648 }
1649
1650 .pos .pos-actionbar-button-list{
1651     height: 100%;
1652     margin: 0px;
1653     padding-left:3px;
1654     padding-right:3px;
1655     overflow:hidden;
1656 }
1657
1658 .pos .pos-actionbar .button{
1659     width: 90px;
1660     height: 90px;
1661     text-align:center;
1662     margin:3px;
1663     margin-top:6px;
1664     float:left;
1665
1666     font-size:   14px;
1667     font-weight: bold;
1668
1669     cursor: pointer;
1670
1671     border: 1px solid #cacaca;
1672     border-radius: 3px;
1673
1674     background: #e2e2e2;
1675 }
1676 .pos .pos-actionbar .button .label{
1677     margin-top: 37px;
1678 }
1679 .pos .pos-actionbar .button .icon{
1680     margin-top: 10px;
1681 }
1682 .pos .pos-actionbar .button:active{
1683     color: white;
1684     background: #7f82ac;
1685     border: 1px solid #7f82ac;
1686
1687     -webkit-transition-property: background, border;
1688     -webkit-transition-duration: 0.2s;
1689     -webkit-transition-timing-function: ease-out;
1690 }
1691
1692 .pos .pos-actionbar .button.disabled{
1693     opacity: 0.5;
1694 }
1695 .pos .pos-actionbar .button.disabled:active{
1696     border: 1px solid #cacaca;
1697     color: #555;
1698     cursor: default;
1699
1700     background: #e2e2e2;
1701 }
1702
1703 .pos .pos-actionbar .button.rightalign{
1704     float:right;
1705 }
1706 /*  ********* The Debug Widget  ********* */
1707
1708 .pos .debug-widget{
1709     z-index:100000;
1710     position: absolute;
1711     right: 10px;
1712     top: 10px;
1713     width: 200px;
1714     font-size: 10px;
1715
1716     background: rgba(0,0,0,0.82);
1717     color: white;
1718     padding-bottom: 10px;
1719     cursor: move;
1720     -webkit-transform: translate3d(0,0,0);
1721 }
1722 .pos .debug-widget .toggle{
1723     position: absolute;
1724     font-size: 16px;
1725     cursor:pointer;
1726     top:0px;
1727     right:0px;
1728     padding:10px;
1729     padding-right:15px;
1730 }
1731 .pos .debug-widget .content{
1732     overflow: hidden;
1733 }
1734 .pos .debug-widget h1{
1735     background:black;
1736     padding-top: 10px;
1737     padding-left: 10px;
1738     margin-top:0;
1739     margin-bottom:0;
1740 }
1741 .pos .debug-widget .category{
1742     background: black;
1743     padding-left: 10px;
1744     margin: 0px;
1745     font-weight: bold;
1746     padding-top:3px;
1747     padding-bottom:3px;
1748 }
1749 .pos .debug-widget .button{
1750     padding: 5px;
1751     padding-left: 15px;
1752     display: block;
1753     cursor:pointer;
1754 }
1755 .pos .debug-widget .button:active{
1756     background: rgba(96,21,177,0.45);
1757 }
1758 .pos .debug-widget input{
1759     margin-left:10px;
1760     margin-top:7px;
1761     padding: 4px;
1762     width: 180px;
1763     border: none;
1764     box-sizing: border-box;
1765     -moz-box-sizing: border-box;
1766     border-radius: 3px;
1767 }
1768 .pos .debug-widget .status{
1769     padding: 5px;
1770     padding-left: 15px;
1771     display: block;
1772     cursor:default;
1773 }
1774 .pos .debug-widget .status.on{
1775     background-color: #6cd11d;
1776 }
1777 .pos .debug-widget .event{
1778     padding: 5px;
1779     padding-left: 15px;
1780     display: block;
1781     cursor:default;
1782     background-color: #1E1E1E;
1783 }
1784
1785 /*  ********* The PopupWidgets  ********* */
1786
1787 .pos .modal-dialog{
1788     position: absolute;
1789     left: 0;
1790     top: 0;
1791     width: 100%;
1792     height:100%;
1793     background-color: rgba(0,0,0,0.5);
1794     z-index:1000;
1795 }
1796 .pos .modal-dialog .popup{
1797     position: absolute;
1798     left:50%;
1799     top:50%;
1800     width:500px;
1801     height:400px;
1802     margin-left: -250px;
1803     margin-top: -200px;
1804     padding:10px;
1805     padding-top:20px;
1806     text-align:center;
1807     font-size:20px;
1808     font-weight:bold;
1809     background-color: #F0EEEE;
1810     border-radius: 3px;
1811     box-shadow: 0px 10px 20px rgba(0,0,0,0.4);
1812     z-index:1200;
1813 }
1814 .pos .popup .comment{
1815     font-weight: normal;
1816     font-size: 18px;
1817     margin: 0px 16px 16px 16px;
1818 }
1819 .pos .popup .comment.traceback {
1820     height: 264px;
1821     overflow: auto;
1822     font-size: 14px;
1823     text-align: left;
1824     font-family: 'Inconsolata';
1825     -webkit-user-select: text;
1826        -moz-user-select: text;
1827             user-select: text;
1828 }
1829 .pos .popup .comment.traceback {
1830     height: 264px;
1831     overflow: auto;
1832     font-size: 12px;
1833     text-align: left;
1834     white-space: pre-wrap;
1835     font-family: 'Inconsolata';
1836     -webkit-user-select: text;
1837        -moz-user-select: text;
1838             user-select: text;
1839 }
1840 .pos .popup .footer{
1841     position:absolute;
1842     bottom:0;
1843     left:0;
1844     width:100%;
1845     height:60px;
1846     border-top: 1px solid #E0DDDD;
1847 }
1848 .pos .popup .button{
1849     float:right;
1850     width: 110px;
1851     height: 40px;
1852     line-height:40px;
1853     text-align:center;
1854     margin:3px;
1855     margin-top:10px;
1856     margin-right:10px;
1857
1858     font-size:   14px;
1859     font-weight: bold;
1860
1861     cursor: pointer;
1862
1863     border: 1px solid #cacaca;
1864
1865     background: #e2e2e2;
1866 }
1867 .pos .popup .button:active{
1868     color: white;
1869     background: #7f82ac;
1870     border: 1px solid #7f82ac;
1871
1872     -webkit-transition-property: background, border;
1873     -webkit-transition-duration: 0.2s;
1874     -webkit-transition-timing-function: ease-out;
1875 }
1876
1877 .pos .popup .button.big-left{
1878     position:absolute;
1879     top: 120px;
1880     left:40px;
1881     width: 180px;
1882     height: 180px;
1883     line-height:180px;
1884 }
1885
1886 .pos .popup .button.big-right{
1887     position:absolute;
1888     top: 120px;
1889     right:40px;
1890     width: 180px;
1891     height: 180px;
1892     line-height:180px;
1893 }
1894
1895 /*  ********* The Webkit Scrollbar  ********* */
1896
1897 .pos *::-webkit-scrollbar{
1898     width:  10px;
1899     height: 10px;
1900 }
1901 .pos *::-webkit-scrollbar-track{
1902     background: rgb(224,224,224);
1903     border-left: solid 1px rgb(200,200,200);
1904 }
1905 .pos *::-webkit-scrollbar-thumb{
1906     background: rgb(168,168,168);
1907     min-height: 30px;
1908 }
1909
1910 .pos.big-scrollbars *::-webkit-scrollbar{
1911     width:  40px;
1912     height: 40px;
1913 }
1914 .pos.big-scrollbars *::-webkit-scrollbar-track{
1915     background: rgb(224,224,224);
1916     border-left: none;
1917 }
1918 .pos.big-scrollbars *::-webkit-scrollbar-thumb{
1919     background: rgb(168,168,168);
1920     min-height: 40px;
1921     border-radius: 3px;
1922 }
1923 .pos.big-scrollbars *::-webkit-scrollbar-button{
1924     width:  40px;
1925     height: 40px;
1926     border-radius: 3px;
1927     background: rgb(210,210,210);
1928     background-size: cover;
1929 }
1930 .pos.big-scrollbars *::-webkit-scrollbar-button:decrement{
1931     background-image: url('../img/scroll-up.png');
1932 }
1933 .pos.big-scrollbars *::-webkit-scrollbar-button:increment{
1934     background-image: url('../img/scroll-down.png');
1935 }
1936
1937
1938 /*  ********* Unsupported Browser Page ********* */
1939
1940 .pos .not-supported-browser{
1941     position: absolute;
1942     z-index: 100000;
1943     top: 0; bottom: 0; left: 0; right: 0;
1944     background: #2C2C2C;
1945 }
1946 .pos .not-supported-browser .message{
1947     width:600px;
1948     margin-top: 100px;
1949     margin-left: auto;
1950     margin-right: auto;
1951     text-align: center;
1952     color: #d3d3d3;
1953     font-size: 14px;
1954 }
1955 .pos .not-supported-browser img{
1956     border-collapse: separate;
1957 }