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 @media print {
1168     body {
1169         margin: 0;
1170     }
1171     .oe_leftbar,
1172     .pos .pos-topheader,
1173     .pos .pos-leftpane,
1174     .pos .keyboard_frame,
1175     .pos .receipt-screen header,
1176     .pos .receipt-screen .top-content,
1177     .pos .receipt-screen .centered-content .button {
1178         display: none !important;
1179     }
1180     .pos,
1181     .pos .pos-content,
1182     .pos .rightpane,
1183     .pos .screen,
1184     .pos .window,
1185     .pos .window .subwindow,
1186     .pos .subwindow .subwindow-container{
1187         display: block;
1188         position: static;
1189         height: auto;
1190     }
1191     .pos{
1192         background: white !important;
1193     }
1194     .pos .rightpane {
1195         left: 0px !important;
1196         background-color: white;
1197     }
1198     .pos .receipt-screen {
1199         text-align: left;
1200     }
1201     .pos .receipt-screen .centered-content{
1202         position: static;
1203         border: none;
1204         margin: none;
1205     }
1206     .pos .pos-receipt-container {
1207         text-align: left;
1208     }
1209     .pos-actionbar {
1210         display: none !important;
1211     }
1212     .debug-widget{
1213         display: none !important;
1214     }
1215     .pos *{
1216         text-shadow: none !important;
1217         box-shadow: none !important;
1218         background: transparent !important;
1219     }
1220     .pos .pos-sale-ticket{
1221         margin: 0;
1222         margin-left: auto !important;
1223         margin-right: auto !important;
1224         border: none !important;
1225         font-size: 13px !important;
1226         width: 266px !important;
1227     }
1228 }
1229
1230 /* d) The Scale screen */
1231
1232 .pos .scale-screen .product-price{
1233     font-size: 25px;
1234     margin: 16px;
1235     text-align: center;
1236     display: inline-block;
1237     width: 40%;
1238 }
1239 .pos .scale-screen .computed-price{
1240     font-size: 25px;
1241     display: inline-block;
1242     text-align: right;
1243     margin: 16px;
1244     margin-top: 0px;
1245     padding: 16px;
1246     background: white;
1247     width: 40%;
1248     border-radius: 3px;
1249     font-family: Inconsolata;
1250     font-weight: bold;
1251     text-shadow: 0px 2px 0px rgb(210,210,210);
1252     box-shadow: 0px 2px 0px rgb(225,225,225) inset;
1253     float: right;
1254 }
1255 .pos .scale-screen .buy-product{
1256     text-align: center;
1257     font-size: 32px;
1258     background: rgb(110,200,155);
1259     color: white;
1260     border-radius: 3px;
1261     padding: 16px;
1262     margin: 16px;
1263     cursor: pointer;
1264 }
1265
1266 .pos .scale-screen .weight{
1267     text-align: right;
1268     margin: 16px;
1269     background: white;
1270     padding: 20px;
1271     padding-right: 30px;
1272     font-size: 56px;
1273     border-radius: 3px;
1274     font-family: Inconsolata;
1275     text-shadow: 0px 2px 0px rgb(210, 210, 210);
1276     box-shadow: 0px 2px 0px rgb(225,225,225) inset;
1277 }
1278
1279
1280 /* e) The Client List Screen */
1281
1282 .pos .clientlist-screen .client-list{
1283     font-size: 16px;
1284     width: 100%;
1285     line-height: 40px;
1286 }
1287 .pos .clientlist-screen .client-list th,
1288 .pos .clientlist-screen .client-list td {
1289     padding: 0px 8px;
1290 }
1291 .pos .clientlist-screen .client-list tr{
1292     transition: all 150ms linear;
1293     background: rgb(230,230,230);
1294 }
1295 .pos .clientlist-screen .client-list thead > tr,
1296 .pos .clientlist-screen .client-list tr:nth-child(even) {
1297     background: rgb(247,247,247);
1298 }
1299 .pos .clientlist-screen .client-list tr.highlight{
1300     transition: all 150ms linear;
1301     background: rgb(110,200,155) !important;
1302     color: white;
1303 }
1304 .pos .clientlist-screen .client-list tr.lowlight{
1305     transition: all 150ms linear;
1306     background: rgb(216, 238, 227);
1307 }
1308 .pos .clientlist-screen .client-list tr.lowlight:nth-child(even){
1309     transition: all 150ms linear;
1310     background: rgb(227, 246, 237);
1311 }
1312 .pos .clientlist-screen .client-details{
1313     padding: 16px;
1314     border-bottom: solid 5px rgb(110,200,155);
1315 }
1316 .pos .clientlist-screen .client-picture{
1317     height: 64px;
1318     width: 64px;
1319     border-radius: 32px;
1320     overflow: hidden;
1321     text-align: center;
1322     float: left;
1323     margin-right: 16px;
1324     background: white;
1325     position: relative;
1326 }
1327 .pos .clientlist-screen .client-picture > img {
1328     position: absolute;
1329     top: -9999px;
1330     bottom: -9999px;
1331     right: -9999px;
1332     left: -9999px;
1333     max-height: 64px;
1334     margin: auto;
1335 }
1336 .pos .clientlist-screen .client-picture > .fa {
1337     line-height: 64px;
1338     font-size: 32px;
1339 }
1340 .pos .clientlist-screen .client-picture .image-uploader {
1341     position: absolute;
1342     z-index: 1000;
1343     top: 0;
1344     left: 0;
1345     right: 0;
1346     bottom: 0;
1347     opacity: 0;
1348     cursor: pointer;
1349 }
1350 .pos .clientlist-screen .client-name {
1351     font-size: 32px;
1352     line-height: 64px;
1353     margin-bottom:16px;
1354 }
1355 .pos .clientlist-screen .edit-buttons {
1356     position: absolute;
1357     right: 16px;
1358     top: 10px;
1359 }
1360 .pos .clientlist-screen .edit-buttons .button{
1361     display: inline-block;
1362     margin-left: 16px;
1363     color: rgb(128,128,128);
1364     cursor: pointer;
1365     font-size: 36px;
1366 }
1367 .pos .clientlist-screen .client-details-box{
1368     position: relative;
1369     font-size: 16px;
1370 }
1371 .pos .clientlist-screen .client-details-left{
1372     width: 50%;
1373     float: left;
1374 }
1375 .pos .clientlist-screen .client-details-right{
1376     width: 50%;
1377     float: right;
1378 }
1379 .pos .clientlist-screen .client-detail{
1380     line-height: 24px;
1381 }
1382 .pos .clientlist-screen .client-detail > .label{
1383     font-weight: bold;
1384     display: inline-block;
1385     width: 75px;
1386     text-align: right;
1387     margin-right: 8px;
1388 }
1389 .pos .clientlist-screen .client-details input,
1390 .pos .clientlist-screen .client-details select
1391 {
1392     padding: 4px;
1393     border-radius: 3px;
1394     border: solid 1px #cecbcb;
1395     margin-bottom: 4px;
1396     background: white;
1397     font-family: "Lato","Lucida Grande", Helvetica, Verdana, Arial;
1398     color: #555555;
1399     width: 340px;
1400     font-size: 14px;
1401     box-sizing: border-box;
1402 }
1403 .pos .clientlist-screen .client-details input.client-name {
1404     font-size: 24px;
1405     line-height: 24px;
1406     margin: 18px 6px;
1407     width: 340px;
1408 }
1409 .pos .clientlist-screen .client-detail > .empty{
1410     opacity: 0.3;
1411 }
1412 .pos .clientlist-screen .searchbox{
1413     right: auto;
1414     margin-left: -90px;
1415     margin-top:8px;
1416     left: 50%;
1417 }
1418 .pos .clientlist-screen .searchbox input{
1419     width: 120px;
1420 }
1421 .pos .clientlist-screen .button.new-customer {
1422     left: 50%;
1423     margin-left: 120px;
1424 }
1425
1426
1427 /*  ********* The OrderWidget  ********* */
1428
1429 .pos .order-container{
1430     position: absolute;
1431     top: 0px;
1432     width:100%;
1433     height: 100%;
1434     background: #F0EEEE;
1435 }
1436
1437 .pos .order-scroller{
1438     width:100%;
1439     height:100%;
1440     overflow: hidden;
1441     overflow-y: auto;
1442     -webkit-overflow-scrolling: touch;
1443 }
1444
1445 .pos .scrollable-y{
1446     overflow: hidden !important;
1447     overflow-y: auto !important;
1448     -webkit-overflow-scrolling: touch !important;
1449 }
1450
1451 .pos .order{
1452     background: white;
1453     padding-bottom:15px;
1454     padding-top:15px;
1455     margin-left:16px;
1456     margin-right:16px;
1457     margin-top:16px;
1458     margin-bottom:16px;
1459     font-size:16px;
1460     border-radius: 3px;
1461     border: solid 1px rgb(220,220,220);
1462     text-align: left;
1463     max-width: 500px;
1464     -webkit-transform: translate3d(0,0,0);
1465 }
1466
1467 .pos .order .empty{
1468     text-align:center;
1469     margin-top: 15px;
1470     margin-bottom: 5px;
1471     color:#999;
1472     font-weight: normal;
1473 }
1474
1475 .pos .order .summary{
1476     width:100%;
1477     text-align:right;
1478     font-weight: bold;
1479     margin-top:20px;
1480     margin-bottom:10px;
1481 }
1482 .pos .order .summary .line{
1483     float: right;
1484     margin-right:15px;
1485     margin-left: 15px;
1486     padding-top:5px;
1487     border-top: solid 2px;
1488     border-color:#777;
1489 }
1490 .pos .order .summary .line .subentry{
1491     font-size: 14px;
1492     font-weight: normal;
1493     text-align: center;
1494 }
1495 .pos .order .summary .line.empty{
1496     text-align: right;
1497     border-color:#BBB;
1498     color:#999;
1499 }
1500
1501 .pos .order .summary .fidpoints{
1502     position: absolute;
1503     left: 20px;
1504     padding: 10px;
1505     color: #6EC89B;
1506     background: rgba(110, 200, 155, 0.17);
1507     border-radius: 3px;
1508 }
1509
1510 .submit-kitchen-button {
1511     float: left;
1512     background: rgb(61, 235, 82);
1513     color: white;
1514     padding: 12px 20px;
1515     margin: 0px 15px;
1516     border-radius: 3px;
1517     cursor: pointer;
1518 }
1519
1520 /*  ********* The OrderLineWidget  ********* */
1521
1522 .pos .order .orderline{
1523     width:100%;
1524     margin:0px;
1525     padding-top:3px;
1526     padding-bottom:10px;
1527     padding-left:15px;
1528     padding-right:15px;
1529     cursor: pointer;
1530     -webkit-box-sizing: border-box;
1531        -moz-box-sizing: border-box;
1532         -ms-box-sizing: border-box;
1533             box-sizing: border-box;
1534     -webkit-transition: background 250ms ease-in-out;
1535        -moz-transition: background 250ms ease-in-out;
1536             transition: background 250ms ease-in-out;
1537 }
1538 .pos .order .orderline:active{
1539     background: rgba(140,143,183,0.05);
1540     -webkit-transition: background 50ms ease-in-out;
1541        -moz-transition: background 50ms ease-in-out;
1542             transition: background 50ms ease-in-out;
1543 }
1544 .pos .order .orderline.empty:active{
1545     background: transparent;
1546     cursor: default;
1547 }
1548
1549 .pos .order .orderline.selected{
1550     background: rgba(140,143,183,0.2);
1551     -webkit-transition: background 250ms ease-in-out;
1552        -moz-transition: background 250ms ease-in-out;
1553             transition: background 250ms ease-in-out;
1554     cursor: default;
1555 }
1556 .pos .order .orderline .product-name{
1557     padding:0;
1558     display:inline-block;
1559     font-weight: bold;
1560     width:80%;
1561     overflow:hidden;
1562     text-overflow: ellipsis;
1563 }
1564 .pos .order .orderline .price{
1565     padding:0;
1566     font-weight: bold;
1567     float:right;
1568 }
1569 .pos .order .orderline .info-list{
1570     color: #888;
1571     margin-left:10px;
1572 }
1573 .pos .order .orderline .info-list em{
1574     color: #777;
1575     font-weight: bold;
1576     font-style:normal;
1577 }
1578
1579 /*  ********* SplitBill ********* */
1580
1581 .splitbill-screen .order-info {
1582     text-align: center;
1583     margin-bottom:20px;
1584     padding: 20px 0px;
1585     font-size: 64px;
1586     color: #43996E;
1587     text-shadow: 0px 2px white, 0px 2px 2px rgba(0, 0, 0, 0.27);
1588     border-bottom: dashed 1px rgb(215,215,215);
1589 }
1590 .splitbill-screen .order .orderline.selected{
1591     background: rgb(110,200,155);
1592     color: white;
1593     -webkit-transition: background 250ms ease-in-out;
1594        -moz-transition: background 250ms ease-in-out;
1595             transition: background 250ms ease-in-out;
1596     cursor: default;
1597 }
1598 .splitbill-screen .order .orderline.partially.selected{
1599     background: rgb(136, 214, 176);
1600 }
1601 .splitbill-screen .order .orderline.selected .info-list {
1602     color: white;
1603 }
1604 .splitbill-screen .order .orderline.selected .info-list em{
1605     color: white;
1606     font-size: 24px;
1607     vertical-align: top;
1608 }
1609 .splitbill-screen .paymentmethods,
1610 .payment-screen   .paymentmethods {
1611     margin: 16px;
1612 }
1613 .splitbill-screen .paymentmethod,
1614 .payment-screen   .paymentmethod {
1615     background: rgb(221, 221, 221);
1616     line-height: 40px;
1617     margin-bottom: 4px;
1618     border-radius: 3px;
1619     font-size: 16px;
1620     border: solid 1px rgb(202, 202, 202);
1621     cursor: pointer;
1622     text-align: center;
1623 }
1624 .splitbill-screen .paymentmethod.active,
1625 .payment-screen   .paymentmethod.active {
1626     background: #6EC89B;
1627     color: white;
1628     border-color: #6EC89B;
1629 }
1630
1631
1632
1633 /*  ********* The ActionBarWidget  ********* */
1634
1635 .pos .pos-actionbar{
1636     height: 105px;
1637     background: #f5f5f5;    /*#ebebeb;*/
1638     border-top: solid 1px #cecece;
1639     z-index:900;
1640 }
1641
1642 .pos .pos-actionbar ul{
1643     list-style:  none;
1644 }
1645
1646 .pos .pos-actionbar-button-list{
1647     height: 100%;
1648     margin: 0px;
1649     padding-left:3px;
1650     padding-right:3px;
1651     overflow:hidden;
1652 }
1653
1654 .pos .pos-actionbar .button{
1655     width: 90px;
1656     height: 90px;
1657     text-align:center;
1658     margin:3px;
1659     margin-top:6px;
1660     float:left;
1661
1662     font-size:   14px;
1663     font-weight: bold;
1664
1665     cursor: pointer;
1666
1667     border: 1px solid #cacaca;
1668     border-radius: 3px;
1669
1670     background: #e2e2e2;
1671 }
1672 .pos .pos-actionbar .button .label{
1673     margin-top: 37px;
1674 }
1675 .pos .pos-actionbar .button .icon{
1676     margin-top: 10px;
1677 }
1678 .pos .pos-actionbar .button:active{
1679     color: white;
1680     background: #7f82ac;
1681     border: 1px solid #7f82ac;
1682
1683     -webkit-transition-property: background, border;
1684     -webkit-transition-duration: 0.2s;
1685     -webkit-transition-timing-function: ease-out;
1686 }
1687
1688 .pos .pos-actionbar .button.disabled{
1689     opacity: 0.5;
1690 }
1691 .pos .pos-actionbar .button.disabled:active{
1692     border: 1px solid #cacaca;
1693     color: #555;
1694     cursor: default;
1695
1696     background: #e2e2e2;
1697 }
1698
1699 .pos .pos-actionbar .button.rightalign{
1700     float:right;
1701 }
1702 /*  ********* The Debug Widget  ********* */
1703
1704 .pos .debug-widget{
1705     z-index:100000;
1706     position: absolute;
1707     right: 10px;
1708     top: 10px;
1709     width: 200px;
1710     font-size: 10px;
1711
1712     background: rgba(0,0,0,0.82);
1713     color: white;
1714     padding-bottom: 10px;
1715     cursor: move;
1716     -webkit-transform: translate3d(0,0,0);
1717 }
1718 .pos .debug-widget .toggle{
1719     position: absolute;
1720     font-size: 16px;
1721     cursor:pointer;
1722     top:0px;
1723     right:0px;
1724     padding:10px;
1725     padding-right:15px;
1726 }
1727 .pos .debug-widget .content{
1728     overflow: hidden;
1729 }
1730 .pos .debug-widget h1{
1731     background:black;
1732     padding-top: 10px;
1733     padding-left: 10px;
1734     margin-top:0;
1735     margin-bottom:0;
1736 }
1737 .pos .debug-widget .category{
1738     background: black;
1739     padding-left: 10px;
1740     margin: 0px;
1741     font-weight: bold;
1742     padding-top:3px;
1743     padding-bottom:3px;
1744 }
1745 .pos .debug-widget .button{
1746     padding: 5px;
1747     padding-left: 15px;
1748     display: block;
1749     cursor:pointer;
1750 }
1751 .pos .debug-widget .button:active{
1752     background: rgba(96,21,177,0.45);
1753 }
1754 .pos .debug-widget input{
1755     margin-left:10px;
1756     margin-top:7px;
1757     padding: 4px;
1758     width: 180px;
1759     border: none;
1760     box-sizing: border-box;
1761     -moz-box-sizing: border-box;
1762     border-radius: 3px;
1763 }
1764 .pos .debug-widget .status{
1765     padding: 5px;
1766     padding-left: 15px;
1767     display: block;
1768     cursor:default;
1769 }
1770 .pos .debug-widget .status.on{
1771     background-color: #6cd11d;
1772 }
1773 .pos .debug-widget .event{
1774     padding: 5px;
1775     padding-left: 15px;
1776     display: block;
1777     cursor:default;
1778     background-color: #1E1E1E;
1779 }
1780
1781 /*  ********* The PopupWidgets  ********* */
1782
1783 .pos .modal-dialog{
1784     position: absolute;
1785     left: 0;
1786     top: 0;
1787     width: 100%;
1788     height:100%;
1789     background-color: rgba(0,0,0,0.5);
1790     z-index:1000;
1791 }
1792 .pos .modal-dialog .popup{
1793     position: absolute;
1794     left:50%;
1795     top:50%;
1796     width:500px;
1797     height:400px;
1798     margin-left: -250px;
1799     margin-top: -200px;
1800     padding:10px;
1801     padding-top:20px;
1802     text-align:center;
1803     font-size:20px;
1804     font-weight:bold;
1805     background-color: #F0EEEE;
1806     border-radius: 3px;
1807     box-shadow: 0px 10px 20px rgba(0,0,0,0.4);
1808     z-index:1200;
1809 }
1810 .pos .popup .comment{
1811     font-weight: normal;
1812     font-size: 18px;
1813     margin: 0px 16px 16px 16px;
1814 }
1815 .pos .popup .comment.traceback {
1816     height: 264px;
1817     overflow: auto;
1818     font-size: 14px;
1819     text-align: left;
1820     font-family: 'Inconsolata';
1821     -webkit-user-select: text;
1822        -moz-user-select: text;
1823             user-select: text;
1824 }
1825 .pos .popup .comment.traceback {
1826     height: 264px;
1827     overflow: auto;
1828     font-size: 12px;
1829     text-align: left;
1830     white-space: pre-wrap;
1831     font-family: 'Inconsolata';
1832     -webkit-user-select: text;
1833        -moz-user-select: text;
1834             user-select: text;
1835 }
1836 .pos .popup .footer{
1837     position:absolute;
1838     bottom:0;
1839     left:0;
1840     width:100%;
1841     height:60px;
1842     border-top: 1px solid #E0DDDD;
1843 }
1844 .pos .popup .button{
1845     float:right;
1846     width: 110px;
1847     height: 40px;
1848     line-height:40px;
1849     text-align:center;
1850     margin:3px;
1851     margin-top:10px;
1852     margin-right:10px;
1853
1854     font-size:   14px;
1855     font-weight: bold;
1856
1857     cursor: pointer;
1858
1859     border: 1px solid #cacaca;
1860
1861     background: #e2e2e2;
1862 }
1863 .pos .popup .button:active{
1864     color: white;
1865     background: #7f82ac;
1866     border: 1px solid #7f82ac;
1867
1868     -webkit-transition-property: background, border;
1869     -webkit-transition-duration: 0.2s;
1870     -webkit-transition-timing-function: ease-out;
1871 }
1872
1873 .pos .popup .button.big-left{
1874     position:absolute;
1875     top: 120px;
1876     left:40px;
1877     width: 180px;
1878     height: 180px;
1879     line-height:180px;
1880 }
1881
1882 .pos .popup .button.big-right{
1883     position:absolute;
1884     top: 120px;
1885     right:40px;
1886     width: 180px;
1887     height: 180px;
1888     line-height:180px;
1889 }
1890
1891 /*  ********* The Webkit Scrollbar  ********* */
1892
1893 .pos *::-webkit-scrollbar{
1894     width:  10px;
1895     height: 10px;
1896 }
1897 .pos *::-webkit-scrollbar-track{
1898     background: rgb(224,224,224);
1899     border-left: solid 1px rgb(200,200,200);
1900 }
1901 .pos *::-webkit-scrollbar-thumb{
1902     background: rgb(168,168,168);
1903     min-height: 30px;
1904 }
1905
1906 .pos.big-scrollbars *::-webkit-scrollbar{
1907     width:  40px;
1908     height: 40px;
1909 }
1910 .pos.big-scrollbars *::-webkit-scrollbar-track{
1911     background: rgb(224,224,224);
1912     border-left: none;
1913 }
1914 .pos.big-scrollbars *::-webkit-scrollbar-thumb{
1915     background: rgb(168,168,168);
1916     min-height: 40px;
1917     border-radius: 3px;
1918 }
1919 .pos.big-scrollbars *::-webkit-scrollbar-button{
1920     width:  40px;
1921     height: 40px;
1922     border-radius: 3px;
1923     background: rgb(210,210,210);
1924     background-size: cover;
1925 }
1926 .pos.big-scrollbars *::-webkit-scrollbar-button:decrement{
1927     background-image: url('../img/scroll-up.png');
1928 }
1929 .pos.big-scrollbars *::-webkit-scrollbar-button:increment{
1930     background-image: url('../img/scroll-down.png');
1931 }
1932
1933
1934 /*  ********* Unsupported Browser Page ********* */
1935
1936 .pos .not-supported-browser{
1937     position: absolute;
1938     z-index: 100000;
1939     top: 0; bottom: 0; left: 0; right: 0;
1940     background: #2C2C2C;
1941 }
1942 .pos .not-supported-browser .message{
1943     width:600px;
1944     margin-top: 100px;
1945     margin-left: auto;
1946     margin-right: auto;
1947     text-align: center;
1948     color: #d3d3d3;
1949     font-size: 14px;
1950 }
1951 .pos .not-supported-browser img{
1952     border-collapse: separate;
1953 }