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