/* GENERATED by tools/build-posui-css.mjs from POSUI client/styles/app.scss (2026-10-01) - do not edit. Scoped to .pui--pos; keyframes renamed pos-*. */ /*=========================================== | Name: | Application styles | | Description: | Functions as style bundler. | | Rules: | May not contain any logic, only imports | | Location: | ~./app | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | Name: | Application configuration | | Description: | Functions as configuration file | | Rules: | May not contain any logic, only imports | | Location: | ~./config | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | VENDOR |============================================*/ /*= COLORS =*/ /*= FONTS =*/ /*= ICONS PATH =*/ /*= TRANSITIONS =*/ /*= BREAKPOINTS =*/ /*! * Bootstrap Grid Only (grid and responsive utilities extracted from Bootstrap 4.1.3) * GitHub: https://github.com/dmhendricks/bootstrap-grid-css * Bootstrap License: MIT (https://github.com/twbs/bootstrap/blob/v4-dev/LICENSE) * Credits: Twitter, Inc. & The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors) */@-ms-viewport{width:device-width}.pui.pui--pos{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-overflow-style:scrollbar}.pui.pui--pos,.pui--pos *,.pui.pui--pos::before,.pui--pos *::before,.pui.pui--pos::after,.pui--pos *::after{-webkit-box-sizing:inherit;box-sizing:inherit}.pui--pos .bootstrap-wrapper .clearfix::after{display:block;clear:both;content:""}.pui--pos .bootstrap-wrapper .visible{visibility:visible !important}.pui--pos .bootstrap-wrapper .invisible{visibility:hidden !important}.pui--pos .bootstrap-wrapper .hidden-xs-up{display:none !important}@media(max-width:575.98px){.pui--pos .bootstrap-wrapper .hidden-xs-down{display:none !important}}@media(min-width:576px){.pui--pos .bootstrap-wrapper .hidden-sm-up{display:none !important}}@media(max-width:767.98px){.pui--pos .bootstrap-wrapper .hidden-sm-down{display:none !important}}@media(min-width:768px){.pui--pos .bootstrap-wrapper .hidden-md-up{display:none !important}}@media(max-width:991.98px){.pui--pos .bootstrap-wrapper .hidden-md-down{display:none !important}}@media(min-width:992px){.pui--pos .bootstrap-wrapper .hidden-lg-up{display:none !important}}@media(max-width:1199.98px){.pui--pos .bootstrap-wrapper .hidden-lg-down{display:none !important}}@media(min-width:1200px){.pui--pos .bootstrap-wrapper .hidden-xl-up{display:none !important}}.pui--pos .bootstrap-wrapper .hidden-xl-down{display:none !important}.pui--pos .bootstrap-wrapper .visible-print-block{display:none !important}@media print{.pui--pos .bootstrap-wrapper .visible-print-block{display:block !important}}.pui--pos .bootstrap-wrapper .visible-print-inline{display:none !important}@media print{.pui--pos .bootstrap-wrapper .visible-print-inline{display:inline !important}}.pui--pos .bootstrap-wrapper .visible-print-inline-block{display:none !important}@media print{.pui--pos .bootstrap-wrapper .visible-print-inline-block{display:inline-block !important}}@media print{.pui--pos .bootstrap-wrapper .hidden-print{display:none !important}}.pui--pos .bootstrap-wrapper .container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media(min-width:576px){.pui--pos .bootstrap-wrapper .container{max-width:540px}}@media(min-width:768px){.pui--pos .bootstrap-wrapper .container{max-width:720px}}@media(min-width:992px){.pui--pos .bootstrap-wrapper .container{max-width:960px}}@media(min-width:1200px){.pui--pos .bootstrap-wrapper .container{max-width:1140px}}.pui--pos .bootstrap-wrapper .container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.pui--pos .bootstrap-wrapper .row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.pui--pos .bootstrap-wrapper .no-gutters{margin-right:0;margin-left:0}.pui--pos .bootstrap-wrapper .no-gutters>.col,.pui--pos .bootstrap-wrapper .no-gutters>[class*="col-"]{padding-right:0;padding-left:0}.pui--pos .bootstrap-wrapper .col-1,.pui--pos .bootstrap-wrapper .col-2,.pui--pos .bootstrap-wrapper .col-3,.pui--pos .bootstrap-wrapper .col-4,.pui--pos .bootstrap-wrapper .col-5,.pui--pos .bootstrap-wrapper .col-6,.pui--pos .bootstrap-wrapper .col-7,.pui--pos .bootstrap-wrapper .col-8,.pui--pos .bootstrap-wrapper .col-9,.pui--pos .bootstrap-wrapper .col-10,.pui--pos .bootstrap-wrapper .col-11,.pui--pos .bootstrap-wrapper .col-12,.pui--pos .bootstrap-wrapper .col,.pui--pos .bootstrap-wrapper .col-auto,.pui--pos .bootstrap-wrapper .col-sm-1,.pui--pos .bootstrap-wrapper .col-sm-2,.pui--pos .bootstrap-wrapper .col-sm-3,.pui--pos .bootstrap-wrapper .col-sm-4,.pui--pos .bootstrap-wrapper .col-sm-5,.pui--pos .bootstrap-wrapper .col-sm-6,.pui--pos .bootstrap-wrapper .col-sm-7,.pui--pos .bootstrap-wrapper .col-sm-8,.pui--pos .bootstrap-wrapper .col-sm-9,.pui--pos .bootstrap-wrapper .col-sm-10,.pui--pos .bootstrap-wrapper .col-sm-11,.pui--pos .bootstrap-wrapper .col-sm-12,.pui--pos .bootstrap-wrapper .col-sm,.pui--pos .bootstrap-wrapper .col-sm-auto,.pui--pos .bootstrap-wrapper .col-md-1,.pui--pos .bootstrap-wrapper .col-md-2,.pui--pos .bootstrap-wrapper .col-md-3,.pui--pos .bootstrap-wrapper .col-md-4,.pui--pos .bootstrap-wrapper .col-md-5,.pui--pos .bootstrap-wrapper .col-md-6,.pui--pos .bootstrap-wrapper .col-md-7,.pui--pos .bootstrap-wrapper .col-md-8,.pui--pos .bootstrap-wrapper .col-md-9,.pui--pos .bootstrap-wrapper .col-md-10,.pui--pos .bootstrap-wrapper .col-md-11,.pui--pos .bootstrap-wrapper .col-md-12,.pui--pos .bootstrap-wrapper .col-md,.pui--pos .bootstrap-wrapper .col-md-auto,.pui--pos .bootstrap-wrapper .col-lg-1,.pui--pos .bootstrap-wrapper .col-lg-2,.pui--pos .bootstrap-wrapper .col-lg-3,.pui--pos .bootstrap-wrapper .col-lg-4,.pui--pos .bootstrap-wrapper .col-lg-5,.pui--pos .bootstrap-wrapper .col-lg-6,.pui--pos .bootstrap-wrapper .col-lg-7,.pui--pos .bootstrap-wrapper .col-lg-8,.pui--pos .bootstrap-wrapper .col-lg-9,.pui--pos .bootstrap-wrapper .col-lg-10,.pui--pos .bootstrap-wrapper .col-lg-11,.pui--pos .bootstrap-wrapper .col-lg-12,.pui--pos .bootstrap-wrapper .col-lg,.pui--pos .bootstrap-wrapper .col-lg-auto,.pui--pos .bootstrap-wrapper .col-xl-1,.pui--pos .bootstrap-wrapper .col-xl-2,.pui--pos .bootstrap-wrapper .col-xl-3,.pui--pos .bootstrap-wrapper .col-xl-4,.pui--pos .bootstrap-wrapper .col-xl-5,.pui--pos .bootstrap-wrapper .col-xl-6,.pui--pos .bootstrap-wrapper .col-xl-7,.pui--pos .bootstrap-wrapper .col-xl-8,.pui--pos .bootstrap-wrapper .col-xl-9,.pui--pos .bootstrap-wrapper .col-xl-10,.pui--pos .bootstrap-wrapper .col-xl-11,.pui--pos .bootstrap-wrapper .col-xl-12,.pui--pos .bootstrap-wrapper .col-xl,.pui--pos .bootstrap-wrapper .col-xl-auto{position:relative;width:100%;padding-right:15px;padding-left:15px}.pui--pos .bootstrap-wrapper .col{-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.pui--pos .bootstrap-wrapper .col-auto{-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.pui--pos .bootstrap-wrapper .col-1{-webkit-box-flex:0;-webkit-flex:0 0 8.3333333333%;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}.pui--pos .bootstrap-wrapper .col-2{-webkit-box-flex:0;-webkit-flex:0 0 16.6666666667%;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.pui--pos .bootstrap-wrapper .col-3{-webkit-box-flex:0;-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.pui--pos .bootstrap-wrapper .col-4{-webkit-box-flex:0;-webkit-flex:0 0 33.3333333333%;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.pui--pos .bootstrap-wrapper .col-5{-webkit-box-flex:0;-webkit-flex:0 0 41.6666666667%;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}.pui--pos .bootstrap-wrapper .col-6{-webkit-box-flex:0;-webkit-flex:0 0 50%;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.pui--pos .bootstrap-wrapper .col-7{-webkit-box-flex:0;-webkit-flex:0 0 58.3333333333%;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}.pui--pos .bootstrap-wrapper .col-8{-webkit-box-flex:0;-webkit-flex:0 0 66.6666666667%;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.pui--pos .bootstrap-wrapper .col-9{-webkit-box-flex:0;-webkit-flex:0 0 75%;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.pui--pos .bootstrap-wrapper .col-10{-webkit-box-flex:0;-webkit-flex:0 0 83.3333333333%;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.pui--pos .bootstrap-wrapper .col-11{-webkit-box-flex:0;-webkit-flex:0 0 91.6666666667%;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}.pui--pos .bootstrap-wrapper .col-12{-webkit-box-flex:0;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.pui--pos .bootstrap-wrapper .order-first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.pui--pos .bootstrap-wrapper .order-last{-webkit-box-ordinal-group:14;-webkit-order:13;-ms-flex-order:13;order:13}.pui--pos .bootstrap-wrapper .order-0{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}.pui--pos .bootstrap-wrapper .order-1{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.pui--pos .bootstrap-wrapper .order-2{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2}.pui--pos .bootstrap-wrapper .order-3{-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3}.pui--pos .bootstrap-wrapper .order-4{-webkit-box-ordinal-group:5;-webkit-order:4;-ms-flex-order:4;order:4}.pui--pos .bootstrap-wrapper .order-5{-webkit-box-ordinal-group:6;-webkit-order:5;-ms-flex-order:5;order:5}.pui--pos .bootstrap-wrapper .order-6{-webkit-box-ordinal-group:7;-webkit-order:6;-ms-flex-order:6;order:6}.pui--pos .bootstrap-wrapper .order-7{-webkit-box-ordinal-group:8;-webkit-order:7;-ms-flex-order:7;order:7}.pui--pos .bootstrap-wrapper .order-8{-webkit-box-ordinal-group:9;-webkit-order:8;-ms-flex-order:8;order:8}.pui--pos .bootstrap-wrapper .order-9{-webkit-box-ordinal-group:10;-webkit-order:9;-ms-flex-order:9;order:9}.pui--pos .bootstrap-wrapper .order-10{-webkit-box-ordinal-group:11;-webkit-order:10;-ms-flex-order:10;order:10}.pui--pos .bootstrap-wrapper .order-11{-webkit-box-ordinal-group:12;-webkit-order:11;-ms-flex-order:11;order:11}.pui--pos .bootstrap-wrapper .order-12{-webkit-box-ordinal-group:13;-webkit-order:12;-ms-flex-order:12;order:12}.pui--pos .bootstrap-wrapper .offset-1{margin-left:8.3333333333%}.pui--pos .bootstrap-wrapper .offset-2{margin-left:16.6666666667%}.pui--pos .bootstrap-wrapper .offset-3{margin-left:25%}.pui--pos .bootstrap-wrapper .offset-4{margin-left:33.3333333333%}.pui--pos .bootstrap-wrapper .offset-5{margin-left:41.6666666667%}.pui--pos .bootstrap-wrapper .offset-6{margin-left:50%}.pui--pos .bootstrap-wrapper .offset-7{margin-left:58.3333333333%}.pui--pos .bootstrap-wrapper .offset-8{margin-left:66.6666666667%}.pui--pos .bootstrap-wrapper .offset-9{margin-left:75%}.pui--pos .bootstrap-wrapper .offset-10{margin-left:83.3333333333%}.pui--pos .bootstrap-wrapper .offset-11{margin-left:91.6666666667%}@media(min-width:576px){.pui--pos .bootstrap-wrapper .col-sm{-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.pui--pos .bootstrap-wrapper .col-sm-auto{-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.pui--pos .bootstrap-wrapper .col-sm-1{-webkit-box-flex:0;-webkit-flex:0 0 8.3333333333%;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}.pui--pos .bootstrap-wrapper .col-sm-2{-webkit-box-flex:0;-webkit-flex:0 0 16.6666666667%;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.pui--pos .bootstrap-wrapper .col-sm-3{-webkit-box-flex:0;-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.pui--pos .bootstrap-wrapper .col-sm-4{-webkit-box-flex:0;-webkit-flex:0 0 33.3333333333%;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.pui--pos .bootstrap-wrapper .col-sm-5{-webkit-box-flex:0;-webkit-flex:0 0 41.6666666667%;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}.pui--pos .bootstrap-wrapper .col-sm-6{-webkit-box-flex:0;-webkit-flex:0 0 50%;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.pui--pos .bootstrap-wrapper .col-sm-7{-webkit-box-flex:0;-webkit-flex:0 0 58.3333333333%;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}.pui--pos .bootstrap-wrapper .col-sm-8{-webkit-box-flex:0;-webkit-flex:0 0 66.6666666667%;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.pui--pos .bootstrap-wrapper .col-sm-9{-webkit-box-flex:0;-webkit-flex:0 0 75%;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.pui--pos .bootstrap-wrapper .col-sm-10{-webkit-box-flex:0;-webkit-flex:0 0 83.3333333333%;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.pui--pos .bootstrap-wrapper .col-sm-11{-webkit-box-flex:0;-webkit-flex:0 0 91.6666666667%;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}.pui--pos .bootstrap-wrapper .col-sm-12{-webkit-box-flex:0;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.pui--pos .bootstrap-wrapper .order-sm-first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.pui--pos .bootstrap-wrapper .order-sm-last{-webkit-box-ordinal-group:14;-webkit-order:13;-ms-flex-order:13;order:13}.pui--pos .bootstrap-wrapper .order-sm-0{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}.pui--pos .bootstrap-wrapper .order-sm-1{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.pui--pos .bootstrap-wrapper .order-sm-2{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2}.pui--pos .bootstrap-wrapper .order-sm-3{-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3}.pui--pos .bootstrap-wrapper .order-sm-4{-webkit-box-ordinal-group:5;-webkit-order:4;-ms-flex-order:4;order:4}.pui--pos .bootstrap-wrapper .order-sm-5{-webkit-box-ordinal-group:6;-webkit-order:5;-ms-flex-order:5;order:5}.pui--pos .bootstrap-wrapper .order-sm-6{-webkit-box-ordinal-group:7;-webkit-order:6;-ms-flex-order:6;order:6}.pui--pos .bootstrap-wrapper .order-sm-7{-webkit-box-ordinal-group:8;-webkit-order:7;-ms-flex-order:7;order:7}.pui--pos .bootstrap-wrapper .order-sm-8{-webkit-box-ordinal-group:9;-webkit-order:8;-ms-flex-order:8;order:8}.pui--pos .bootstrap-wrapper .order-sm-9{-webkit-box-ordinal-group:10;-webkit-order:9;-ms-flex-order:9;order:9}.pui--pos .bootstrap-wrapper .order-sm-10{-webkit-box-ordinal-group:11;-webkit-order:10;-ms-flex-order:10;order:10}.pui--pos .bootstrap-wrapper .order-sm-11{-webkit-box-ordinal-group:12;-webkit-order:11;-ms-flex-order:11;order:11}.pui--pos .bootstrap-wrapper .order-sm-12{-webkit-box-ordinal-group:13;-webkit-order:12;-ms-flex-order:12;order:12}.pui--pos .bootstrap-wrapper .offset-sm-0{margin-left:0}.pui--pos .bootstrap-wrapper .offset-sm-1{margin-left:8.3333333333%}.pui--pos .bootstrap-wrapper .offset-sm-2{margin-left:16.6666666667%}.pui--pos .bootstrap-wrapper .offset-sm-3{margin-left:25%}.pui--pos .bootstrap-wrapper .offset-sm-4{margin-left:33.3333333333%}.pui--pos .bootstrap-wrapper .offset-sm-5{margin-left:41.6666666667%}.pui--pos .bootstrap-wrapper .offset-sm-6{margin-left:50%}.pui--pos .bootstrap-wrapper .offset-sm-7{margin-left:58.3333333333%}.pui--pos .bootstrap-wrapper .offset-sm-8{margin-left:66.6666666667%}.pui--pos .bootstrap-wrapper .offset-sm-9{margin-left:75%}.pui--pos .bootstrap-wrapper .offset-sm-10{margin-left:83.3333333333%}.pui--pos .bootstrap-wrapper .offset-sm-11{margin-left:91.6666666667%}}@media(min-width:768px){.pui--pos .bootstrap-wrapper .col-md{-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.pui--pos .bootstrap-wrapper .col-md-auto{-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.pui--pos .bootstrap-wrapper .col-md-1{-webkit-box-flex:0;-webkit-flex:0 0 8.3333333333%;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}.pui--pos .bootstrap-wrapper .col-md-2{-webkit-box-flex:0;-webkit-flex:0 0 16.6666666667%;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.pui--pos .bootstrap-wrapper .col-md-3{-webkit-box-flex:0;-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.pui--pos .bootstrap-wrapper .col-md-4{-webkit-box-flex:0;-webkit-flex:0 0 33.3333333333%;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.pui--pos .bootstrap-wrapper .col-md-5{-webkit-box-flex:0;-webkit-flex:0 0 41.6666666667%;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}.pui--pos .bootstrap-wrapper .col-md-6{-webkit-box-flex:0;-webkit-flex:0 0 50%;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.pui--pos .bootstrap-wrapper .col-md-7{-webkit-box-flex:0;-webkit-flex:0 0 58.3333333333%;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}.pui--pos .bootstrap-wrapper .col-md-8{-webkit-box-flex:0;-webkit-flex:0 0 66.6666666667%;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.pui--pos .bootstrap-wrapper .col-md-9{-webkit-box-flex:0;-webkit-flex:0 0 75%;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.pui--pos .bootstrap-wrapper .col-md-10{-webkit-box-flex:0;-webkit-flex:0 0 83.3333333333%;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.pui--pos .bootstrap-wrapper .col-md-11{-webkit-box-flex:0;-webkit-flex:0 0 91.6666666667%;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}.pui--pos .bootstrap-wrapper .col-md-12{-webkit-box-flex:0;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.pui--pos .bootstrap-wrapper .order-md-first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.pui--pos .bootstrap-wrapper .order-md-last{-webkit-box-ordinal-group:14;-webkit-order:13;-ms-flex-order:13;order:13}.pui--pos .bootstrap-wrapper .order-md-0{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}.pui--pos .bootstrap-wrapper .order-md-1{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.pui--pos .bootstrap-wrapper .order-md-2{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2}.pui--pos .bootstrap-wrapper .order-md-3{-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3}.pui--pos .bootstrap-wrapper .order-md-4{-webkit-box-ordinal-group:5;-webkit-order:4;-ms-flex-order:4;order:4}.pui--pos .bootstrap-wrapper .order-md-5{-webkit-box-ordinal-group:6;-webkit-order:5;-ms-flex-order:5;order:5}.pui--pos .bootstrap-wrapper .order-md-6{-webkit-box-ordinal-group:7;-webkit-order:6;-ms-flex-order:6;order:6}.pui--pos .bootstrap-wrapper .order-md-7{-webkit-box-ordinal-group:8;-webkit-order:7;-ms-flex-order:7;order:7}.pui--pos .bootstrap-wrapper .order-md-8{-webkit-box-ordinal-group:9;-webkit-order:8;-ms-flex-order:8;order:8}.pui--pos .bootstrap-wrapper .order-md-9{-webkit-box-ordinal-group:10;-webkit-order:9;-ms-flex-order:9;order:9}.pui--pos .bootstrap-wrapper .order-md-10{-webkit-box-ordinal-group:11;-webkit-order:10;-ms-flex-order:10;order:10}.pui--pos .bootstrap-wrapper .order-md-11{-webkit-box-ordinal-group:12;-webkit-order:11;-ms-flex-order:11;order:11}.pui--pos .bootstrap-wrapper .order-md-12{-webkit-box-ordinal-group:13;-webkit-order:12;-ms-flex-order:12;order:12}.pui--pos .bootstrap-wrapper .offset-md-0{margin-left:0}.pui--pos .bootstrap-wrapper .offset-md-1{margin-left:8.3333333333%}.pui--pos .bootstrap-wrapper .offset-md-2{margin-left:16.6666666667%}.pui--pos .bootstrap-wrapper .offset-md-3{margin-left:25%}.pui--pos .bootstrap-wrapper .offset-md-4{margin-left:33.3333333333%}.pui--pos .bootstrap-wrapper .offset-md-5{margin-left:41.6666666667%}.pui--pos .bootstrap-wrapper .offset-md-6{margin-left:50%}.pui--pos .bootstrap-wrapper .offset-md-7{margin-left:58.3333333333%}.pui--pos .bootstrap-wrapper .offset-md-8{margin-left:66.6666666667%}.pui--pos .bootstrap-wrapper .offset-md-9{margin-left:75%}.pui--pos .bootstrap-wrapper .offset-md-10{margin-left:83.3333333333%}.pui--pos .bootstrap-wrapper .offset-md-11{margin-left:91.6666666667%}}@media(min-width:992px){.pui--pos .bootstrap-wrapper .col-lg{-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.pui--pos .bootstrap-wrapper .col-lg-auto{-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.pui--pos .bootstrap-wrapper .col-lg-1{-webkit-box-flex:0;-webkit-flex:0 0 8.3333333333%;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}.pui--pos .bootstrap-wrapper .col-lg-2{-webkit-box-flex:0;-webkit-flex:0 0 16.6666666667%;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.pui--pos .bootstrap-wrapper .col-lg-3{-webkit-box-flex:0;-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.pui--pos .bootstrap-wrapper .col-lg-4{-webkit-box-flex:0;-webkit-flex:0 0 33.3333333333%;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.pui--pos .bootstrap-wrapper .col-lg-5{-webkit-box-flex:0;-webkit-flex:0 0 41.6666666667%;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}.pui--pos .bootstrap-wrapper .col-lg-6{-webkit-box-flex:0;-webkit-flex:0 0 50%;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.pui--pos .bootstrap-wrapper .col-lg-7{-webkit-box-flex:0;-webkit-flex:0 0 58.3333333333%;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}.pui--pos .bootstrap-wrapper .col-lg-8{-webkit-box-flex:0;-webkit-flex:0 0 66.6666666667%;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.pui--pos .bootstrap-wrapper .col-lg-9{-webkit-box-flex:0;-webkit-flex:0 0 75%;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.pui--pos .bootstrap-wrapper .col-lg-10{-webkit-box-flex:0;-webkit-flex:0 0 83.3333333333%;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.pui--pos .bootstrap-wrapper .col-lg-11{-webkit-box-flex:0;-webkit-flex:0 0 91.6666666667%;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}.pui--pos .bootstrap-wrapper .col-lg-12{-webkit-box-flex:0;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.pui--pos .bootstrap-wrapper .order-lg-first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.pui--pos .bootstrap-wrapper .order-lg-last{-webkit-box-ordinal-group:14;-webkit-order:13;-ms-flex-order:13;order:13}.pui--pos .bootstrap-wrapper .order-lg-0{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}.pui--pos .bootstrap-wrapper .order-lg-1{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.pui--pos .bootstrap-wrapper .order-lg-2{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2}.pui--pos .bootstrap-wrapper .order-lg-3{-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3}.pui--pos .bootstrap-wrapper .order-lg-4{-webkit-box-ordinal-group:5;-webkit-order:4;-ms-flex-order:4;order:4}.pui--pos .bootstrap-wrapper .order-lg-5{-webkit-box-ordinal-group:6;-webkit-order:5;-ms-flex-order:5;order:5}.pui--pos .bootstrap-wrapper .order-lg-6{-webkit-box-ordinal-group:7;-webkit-order:6;-ms-flex-order:6;order:6}.pui--pos .bootstrap-wrapper .order-lg-7{-webkit-box-ordinal-group:8;-webkit-order:7;-ms-flex-order:7;order:7}.pui--pos .bootstrap-wrapper .order-lg-8{-webkit-box-ordinal-group:9;-webkit-order:8;-ms-flex-order:8;order:8}.pui--pos .bootstrap-wrapper .order-lg-9{-webkit-box-ordinal-group:10;-webkit-order:9;-ms-flex-order:9;order:9}.pui--pos .bootstrap-wrapper .order-lg-10{-webkit-box-ordinal-group:11;-webkit-order:10;-ms-flex-order:10;order:10}.pui--pos .bootstrap-wrapper .order-lg-11{-webkit-box-ordinal-group:12;-webkit-order:11;-ms-flex-order:11;order:11}.pui--pos .bootstrap-wrapper .order-lg-12{-webkit-box-ordinal-group:13;-webkit-order:12;-ms-flex-order:12;order:12}.pui--pos .bootstrap-wrapper .offset-lg-0{margin-left:0}.pui--pos .bootstrap-wrapper .offset-lg-1{margin-left:8.3333333333%}.pui--pos .bootstrap-wrapper .offset-lg-2{margin-left:16.6666666667%}.pui--pos .bootstrap-wrapper .offset-lg-3{margin-left:25%}.pui--pos .bootstrap-wrapper .offset-lg-4{margin-left:33.3333333333%}.pui--pos .bootstrap-wrapper .offset-lg-5{margin-left:41.6666666667%}.pui--pos .bootstrap-wrapper .offset-lg-6{margin-left:50%}.pui--pos .bootstrap-wrapper .offset-lg-7{margin-left:58.3333333333%}.pui--pos .bootstrap-wrapper .offset-lg-8{margin-left:66.6666666667%}.pui--pos .bootstrap-wrapper .offset-lg-9{margin-left:75%}.pui--pos .bootstrap-wrapper .offset-lg-10{margin-left:83.3333333333%}.pui--pos .bootstrap-wrapper .offset-lg-11{margin-left:91.6666666667%}}@media(min-width:1200px){.pui--pos .bootstrap-wrapper .col-xl{-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.pui--pos .bootstrap-wrapper .col-xl-auto{-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.pui--pos .bootstrap-wrapper .col-xl-1{-webkit-box-flex:0;-webkit-flex:0 0 8.3333333333%;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}.pui--pos .bootstrap-wrapper .col-xl-2{-webkit-box-flex:0;-webkit-flex:0 0 16.6666666667%;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.pui--pos .bootstrap-wrapper .col-xl-3{-webkit-box-flex:0;-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.pui--pos .bootstrap-wrapper .col-xl-4{-webkit-box-flex:0;-webkit-flex:0 0 33.3333333333%;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.pui--pos .bootstrap-wrapper .col-xl-5{-webkit-box-flex:0;-webkit-flex:0 0 41.6666666667%;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}.pui--pos .bootstrap-wrapper .col-xl-6{-webkit-box-flex:0;-webkit-flex:0 0 50%;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.pui--pos .bootstrap-wrapper .col-xl-7{-webkit-box-flex:0;-webkit-flex:0 0 58.3333333333%;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}.pui--pos .bootstrap-wrapper .col-xl-8{-webkit-box-flex:0;-webkit-flex:0 0 66.6666666667%;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.pui--pos .bootstrap-wrapper .col-xl-9{-webkit-box-flex:0;-webkit-flex:0 0 75%;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.pui--pos .bootstrap-wrapper .col-xl-10{-webkit-box-flex:0;-webkit-flex:0 0 83.3333333333%;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.pui--pos .bootstrap-wrapper .col-xl-11{-webkit-box-flex:0;-webkit-flex:0 0 91.6666666667%;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}.pui--pos .bootstrap-wrapper .col-xl-12{-webkit-box-flex:0;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.pui--pos .bootstrap-wrapper .order-xl-first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.pui--pos .bootstrap-wrapper .order-xl-last{-webkit-box-ordinal-group:14;-webkit-order:13;-ms-flex-order:13;order:13}.pui--pos .bootstrap-wrapper .order-xl-0{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}.pui--pos .bootstrap-wrapper .order-xl-1{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.pui--pos .bootstrap-wrapper .order-xl-2{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2}.pui--pos .bootstrap-wrapper .order-xl-3{-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3}.pui--pos .bootstrap-wrapper .order-xl-4{-webkit-box-ordinal-group:5;-webkit-order:4;-ms-flex-order:4;order:4}.pui--pos .bootstrap-wrapper .order-xl-5{-webkit-box-ordinal-group:6;-webkit-order:5;-ms-flex-order:5;order:5}.pui--pos .bootstrap-wrapper .order-xl-6{-webkit-box-ordinal-group:7;-webkit-order:6;-ms-flex-order:6;order:6}.pui--pos .bootstrap-wrapper .order-xl-7{-webkit-box-ordinal-group:8;-webkit-order:7;-ms-flex-order:7;order:7}.pui--pos .bootstrap-wrapper .order-xl-8{-webkit-box-ordinal-group:9;-webkit-order:8;-ms-flex-order:8;order:8}.pui--pos .bootstrap-wrapper .order-xl-9{-webkit-box-ordinal-group:10;-webkit-order:9;-ms-flex-order:9;order:9}.pui--pos .bootstrap-wrapper .order-xl-10{-webkit-box-ordinal-group:11;-webkit-order:10;-ms-flex-order:10;order:10}.pui--pos .bootstrap-wrapper .order-xl-11{-webkit-box-ordinal-group:12;-webkit-order:11;-ms-flex-order:11;order:11}.pui--pos .bootstrap-wrapper .order-xl-12{-webkit-box-ordinal-group:13;-webkit-order:12;-ms-flex-order:12;order:12}.pui--pos .bootstrap-wrapper .offset-xl-0{margin-left:0}.pui--pos .bootstrap-wrapper .offset-xl-1{margin-left:8.3333333333%}.pui--pos .bootstrap-wrapper .offset-xl-2{margin-left:16.6666666667%}.pui--pos .bootstrap-wrapper .offset-xl-3{margin-left:25%}.pui--pos .bootstrap-wrapper .offset-xl-4{margin-left:33.3333333333%}.pui--pos .bootstrap-wrapper .offset-xl-5{margin-left:41.6666666667%}.pui--pos .bootstrap-wrapper .offset-xl-6{margin-left:50%}.pui--pos .bootstrap-wrapper .offset-xl-7{margin-left:58.3333333333%}.pui--pos .bootstrap-wrapper .offset-xl-8{margin-left:66.6666666667%}.pui--pos .bootstrap-wrapper .offset-xl-9{margin-left:75%}.pui--pos .bootstrap-wrapper .offset-xl-10{margin-left:83.3333333333%}.pui--pos .bootstrap-wrapper .offset-xl-11{margin-left:91.6666666667%}}.pui--pos .bootstrap-wrapper .img-fluid{max-width:100%;height:auto} @font-face { font-family: "DdD-Assets"; src: url("../fonts/DdD-Assets.eot"); src: url("../fonts/DdD-Assets.eot?#iefix") format("embedded-opentype"), url("../fonts/DdD-Assets.woff2") format("woff2"), url("../fonts/DdD-Assets.woff") format("woff"), url("../fonts/DdD-Assets.ttf") format("truetype"), url("../fonts/DdD-Assets.svg#DdD-Assets") format("svg"); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: "DdD-Assets"; src: url("../fonts/DdD-Assets.svg#DdD-Assets") format("svg"); } } .pui--pos [data-icons8]:before, .pui--pos .icons8-activity-grid:before, .pui--pos .icons8-add-shopping-cart:before, .pui--pos .icons8-add-tag:before, .pui--pos .icons8-advance:before, .pui--pos .icons8-android-tablet:before, .pui--pos .icons8-backspace:before, .pui--pos .icons8-bank-card-back-side:before, .pui--pos .icons8-bank-cards:before, .pui--pos .icons8-barcode:before, .pui--pos .icons8-bill:before, .pui--pos .icons8-box-filled:before, .pui--pos .icons8-business:before, .pui--pos .icons8-buy:before, .pui--pos .icons8-calendar:before, .pui--pos .icons8-card-in-use:before, .pui--pos .icons8-cardboard-box:before, .pui--pos .icons8-cash-register:before, .pui--pos .icons8-checklist:before, .pui--pos .icons8-checkmark:before, .pui--pos .multiselect__list-item:before, .pui--pos .multiple-select + .dropdown-menu li:before, .pui--pos .user-module__checkbox-content:before, .pui--pos .icons8-checkout:before, .pui--pos .icons8-circled-chevron-down:before, .pui--pos .timepicker .glyphicon.glyphicon-chevron-down:before, .pui--pos .icons8-circled-chevron-left:before, .pui--pos .datepicker .glyphicon.glyphicon-chevron-left:before, .pui--pos .icons8-circled-chevron-right:before, .pui--pos .datepicker .glyphicon.glyphicon-chevron-right:before, .pui--pos .icons8-circled-chevron-up:before, .pui--pos .timepicker .glyphicon.glyphicon-chevron-up:before, .pui--pos .icons8-clear-filters:before, .pui--pos .icons8-clear-shopping-cart:before, .pui--pos .icons8-cloakroom:before, .pui--pos .icons8-clothes:before, .pui--pos .icons8-coins:before, .pui--pos .icons8-collapse:before, .pui--pos .icons8-collapse-arrow:before, .pui--pos .icons8-compress:before, .pui--pos .icons8-connected:before, .pui--pos .icons8-customer-support:before, .pui--pos .icons8-delete:before, .pui--pos .icons8-diners-club:before, .pui--pos .icons8-disconnected:before, .pui--pos .icons8-discount:before, .pui--pos .icons8-do-not-drop:before, .pui--pos .icons8-edit:before, .pui--pos .icons8-eject:before, .pui--pos .icons8-electronics:before, .pui--pos .icons8-empty-box:before, .pui--pos .icons8-enter-pin:before, .pui--pos .icons8-exclamation-mark:before, .pui--pos .icons8-exit:before, .pui--pos .icons8-expand-arrow:before, .pui--pos .icons8-expensive:before, .pui--pos .icons8-expensive-2:before, .pui--pos .icons8-filing-cabinet:before, .pui--pos .icons8-filter:before, .pui--pos .icons8-fit-to-width:before, .pui--pos .icons8-forgot-password:before, .pui--pos .icons8-gender-neutral-user:before, .pui--pos .icons8-gift:before, .pui--pos .icons8-gift-card:before, .pui--pos .icons8-group-message:before, .pui--pos .icons8-hanger:before, .pui--pos .icons8-hashtag-activity-grid:before, .pui--pos .icons8-high-importance:before, .pui--pos .icons8-historic-ship:before, .pui--pos .icons8-home:before, .pui--pos .icons8-info:before, .pui--pos .icons8-insert-card:before, .pui--pos .icons8-invoice:before, .pui--pos .icons8-iphone:before, .pui--pos .icons8-jacket:before, .pui--pos .icons8-keyboard:before, .pui--pos .icons8-laptop:before, .pui--pos .icons8-library:before, .pui--pos .icons8-lock:before, .pui--pos .icons8-login-as-user:before, .pui--pos .icons8-long-arrow-right:before, .pui--pos .icons8-long-arrow-up:before, .pui--pos .icons8-loyalty-card:before, .pui--pos .icons8-mastercard:before, .pui--pos .icons8-menu:before, .pui--pos .icons8-message:before, .pui--pos .icons8-message-filled:before, .pui--pos .icons8-minus-math:before, .pui--pos .icons8-money:before, .pui--pos .icons8-money-bag:before, .pui--pos .icons8-money-bag-yen:before, .pui--pos .icons8-monitor:before, .pui--pos .icons8-more:before, .pui--pos .icons8-new:before, .pui--pos .icons8-new-post:before, .pui--pos .icons8-new-product:before, .pui--pos .icons8-nfc-c:before, .pui--pos .icons8-no-cash:before, .pui--pos .icons8-no-credit-cards:before, .pui--pos .icons8-offline:before, .pui--pos .icons8-old-cash-register:before, .pui--pos .icons8-online:before, .pui--pos .icons8-online-support:before, .pui--pos .icons8-paid:before, .pui--pos .icons8-paint-bucket:before, .pui--pos .icons8-paint-palette:before, .pui--pos .icons8-password:before, .pui--pos .icons8-plus-math:before, .pui--pos .icons8-pos-terminal:before, .pui--pos .icons8-price-tag:before, .pui--pos .icons8-print:before, .pui--pos .icons8-purchase-order:before, .pui--pos .icons8-puzzle:before, .pui--pos .icons8-qr-code:before, .pui--pos .icons8-receipt:before, .pui--pos .icons8-receive-cash:before, .pui--pos .icons8-refresh:before, .pui--pos .icons8-remove-tag:before, .pui--pos .icons8-remove-user-male:before, .pui--pos .icons8-resize-diagonal:before, .pui--pos .icons8-return:before, .pui--pos .icons8-right:before, .pui--pos .icons8-rotate-left:before, .pui--pos .icons8-run-command:before, .pui--pos .icons8-search:before, .pui--pos .icons8-self-service-kiosk:before, .pui--pos .icons8-services:before, .pui--pos .icons8-shirt:before, .pui--pos .icons8-shop:before, .pui--pos .icons8-shopping-bag:before, .pui--pos .icons8-shopping-basket:before, .pui--pos .icons8-shopping-basket-2:before, .pui--pos .icons8-shopping-cart:before, .pui--pos .icons8-shopping-cart-loaded:before, .pui--pos .icons8-synchronize:before, .pui--pos .icons8-tags:before, .pui--pos .icons8-tasklist:before, .pui--pos .icons8-teams:before, .pui--pos .icons8-test-passed:before, .pui--pos .icons8-todo-list:before, .pui--pos .icons8-track-order:before, .pui--pos .icons8-trash:before, .pui--pos .icons8-truck:before, .pui--pos .icons8-urgent-message:before, .pui--pos .icons8-usb-connector:before, .pui--pos .icons8-used-product:before, .pui--pos .icons8-user-group-man-woman:before, .pui--pos .icons8-view-details:before, .pui--pos .icons8-visa:before, .pui--pos .icons8-wallet:before { display: inline-block; font-family: "DdD-Assets"; font-style: normal; font-weight: normal; font-variant: normal; line-height: 1; text-decoration: inherit; text-rendering: optimizeLegibility; text-transform: none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .pui--pos [data-icons8]:before { content: attr(data-icons8); } .pui--pos .icons8-activity-grid:before { content: "\f149"; } .pui--pos .icons8-add-shopping-cart:before { content: "\f115"; } .pui--pos .icons8-add-tag:before { content: "\f123"; } .pui--pos .icons8-advance:before { content: "\f16d"; } .pui--pos .icons8-android-tablet:before { content: "\f159"; } .pui--pos .icons8-backspace:before { content: "\f15b"; } .pui--pos .icons8-bank-card-back-side:before { content: "\f154"; } .pui--pos .icons8-bank-cards:before { content: "\f140"; } .pui--pos .icons8-barcode:before { content: "\f11e"; } .pui--pos .icons8-bill:before { content: "\f13a"; } .pui--pos .icons8-box-filled:before { content: "\f17a"; } .pui--pos .icons8-business:before { content: "\f145"; } .pui--pos .icons8-buy:before { content: "\f114"; } .pui--pos .icons8-calendar:before { content: "\f111"; } .pui--pos .icons8-card-in-use:before { content: "\f14a"; } .pui--pos .icons8-cardboard-box:before { content: "\f135"; } .pui--pos .icons8-cash-register:before { content: "\f12d"; } .pui--pos .icons8-checklist:before { content: "\f126"; } .pui--pos .icons8-checkmark:before, .pui--pos .multiselect__list-item:before, .pui--pos .multiple-select + .dropdown-menu li:before, .pui--pos .user-module__checkbox-content:before { content: "\f10a"; } .pui--pos .icons8-checkout:before { content: "\f130"; } .pui--pos .icons8-circled-chevron-down:before, .pui--pos .timepicker .glyphicon.glyphicon-chevron-down:before { content: "\f11a"; } .pui--pos .icons8-circled-chevron-left:before, .pui--pos .datepicker .glyphicon.glyphicon-chevron-left:before { content: "\f11b"; } .pui--pos .icons8-circled-chevron-right:before, .pui--pos .datepicker .glyphicon.glyphicon-chevron-right:before { content: "\f11c"; } .pui--pos .icons8-circled-chevron-up:before, .pui--pos .timepicker .glyphicon.glyphicon-chevron-up:before { content: "\f11d"; } .pui--pos .icons8-clear-filters:before { content: "\f15f"; } .pui--pos .icons8-clear-shopping-cart:before { content: "\f188"; } .pui--pos .icons8-cloakroom:before { content: "\f167"; } .pui--pos .icons8-clothes:before { content: "\f163"; } .pui--pos .icons8-coins:before { content: "\f143"; } .pui--pos .icons8-collapse:before { content: "\f161"; } .pui--pos .icons8-collapse-arrow:before { content: "\f178"; } .pui--pos .icons8-compress:before { content: "\f129"; } .pui--pos .icons8-connected:before { content: "\f173"; } .pui--pos .icons8-customer-support:before { content: "\f134"; } .pui--pos .icons8-delete:before { content: "\f117"; } .pui--pos .icons8-diners-club:before { content: "\f157"; } .pui--pos .icons8-disconnected:before { content: "\f172"; } .pui--pos .icons8-discount:before { content: "\f179"; } .pui--pos .icons8-do-not-drop:before { content: "\f17c"; } .pui--pos .icons8-edit:before { content: "\f118"; } .pui--pos .icons8-eject:before { content: "\f14c"; } .pui--pos .icons8-electronics:before { content: "\f185"; } .pui--pos .icons8-empty-box:before { content: "\f17b"; } .pui--pos .icons8-enter-pin:before { content: "\f155"; } .pui--pos .icons8-exclamation-mark:before { content: "\f162"; } .pui--pos .icons8-exit:before { content: "\f18d"; } .pui--pos .icons8-expand-arrow:before { content: "\f10b"; } .pui--pos .icons8-expensive:before { content: "\f144"; } .pui--pos .icons8-expensive-2:before { content: "\f148"; } .pui--pos .icons8-filing-cabinet:before { content: "\f169"; } .pui--pos .icons8-filter:before { content: "\f15e"; } .pui--pos .icons8-fit-to-width:before { content: "\f160"; } .pui--pos .icons8-forgot-password:before { content: "\f12c"; } .pui--pos .icons8-gender-neutral-user:before { content: "\f100"; } .pui--pos .icons8-gift:before { content: "\f113"; } .pui--pos .icons8-gift-card:before { content: "\f186"; } .pui--pos .icons8-group-message:before { content: "\f105"; } .pui--pos .icons8-hanger:before { content: "\f168"; } .pui--pos .icons8-hashtag-activity-grid:before { content: "\f18e"; } .pui--pos .icons8-high-importance:before { content: "\f175"; } .pui--pos .icons8-historic-ship:before { content: "\f18c"; } .pui--pos .icons8-home:before { content: "\f177"; } .pui--pos .icons8-info:before { content: "\f176"; } .pui--pos .icons8-insert-card:before { content: "\f13f"; } .pui--pos .icons8-invoice:before { content: "\f14b"; } .pui--pos .icons8-iphone:before { content: "\f158"; } .pui--pos .icons8-jacket:before { content: "\f165"; } .pui--pos .icons8-keyboard:before { content: "\f15a"; } .pui--pos .icons8-laptop:before { content: "\f15d"; } .pui--pos .icons8-library:before { content: "\f153"; } .pui--pos .icons8-lock:before { content: "\f12a"; } .pui--pos .icons8-login-as-user:before { content: "\f132"; } .pui--pos .icons8-long-arrow-right:before { content: "\f16e"; } .pui--pos .icons8-long-arrow-up:before { content: "\f18b"; } .pui--pos .icons8-loyalty-card:before { content: "\f101"; } .pui--pos .icons8-mastercard:before { content: "\f156"; } .pui--pos .icons8-menu:before { content: "\f107"; } .pui--pos .icons8-message:before { content: "\f106"; } .pui--pos .icons8-message-filled:before { content: "\f16a"; } .pui--pos .icons8-minus-math:before { content: "\f10d"; } .pui--pos .icons8-money:before { content: "\f147"; } .pui--pos .icons8-money-bag:before { content: "\f142"; } .pui--pos .icons8-money-bag-yen:before { content: "\f14d"; } .pui--pos .icons8-monitor:before { content: "\f15c"; } .pui--pos .icons8-more:before { content: "\f108"; } .pui--pos .icons8-new:before { content: "\f180"; } .pui--pos .icons8-new-post:before { content: "\f16b"; } .pui--pos .icons8-new-product:before { content: "\f17e"; } .pui--pos .icons8-nfc-c:before { content: "\f13c"; } .pui--pos .icons8-no-cash:before { content: "\f13d"; } .pui--pos .icons8-no-credit-cards:before { content: "\f137"; } .pui--pos .icons8-offline:before { content: "\f125"; } .pui--pos .icons8-old-cash-register:before { content: "\f12e"; } .pui--pos .icons8-online:before { content: "\f124"; } .pui--pos .icons8-online-support:before { content: "\f133"; } .pui--pos .icons8-paid:before { content: "\f13b"; } .pui--pos .icons8-paint-bucket:before { content: "\f182"; } .pui--pos .icons8-paint-palette:before { content: "\f181"; } .pui--pos .icons8-password:before { content: "\f12b"; } .pui--pos .icons8-plus-math:before { content: "\f10c"; } .pui--pos .icons8-pos-terminal:before { content: "\f13e"; } .pui--pos .icons8-price-tag:before { content: "\f121"; } .pui--pos .icons8-print:before { content: "\f116"; } .pui--pos .icons8-purchase-order:before { content: "\f12f"; } .pui--pos .icons8-puzzle:before { content: "\f184"; } .pui--pos .icons8-qr-code:before { content: "\f11f"; } .pui--pos .icons8-receipt:before { content: "\f131"; } .pui--pos .icons8-receive-cash:before { content: "\f141"; } .pui--pos .icons8-refresh:before { content: "\f170"; } .pui--pos .icons8-remove-tag:before { content: "\f122"; } .pui--pos .icons8-remove-user-male:before { content: "\f10f"; } .pui--pos .icons8-resize-diagonal:before { content: "\f127"; } .pui--pos .icons8-return:before { content: "\f119"; } .pui--pos .icons8-right:before { content: "\f16f"; } .pui--pos .icons8-rotate-left:before { content: "\f128"; } .pui--pos .icons8-run-command:before { content: "\f104"; } .pui--pos .icons8-search:before { content: "\f109"; } .pui--pos .icons8-self-service-kiosk:before { content: "\f146"; } .pui--pos .icons8-services:before { content: "\f136"; } .pui--pos .icons8-shirt:before { content: "\f166"; } .pui--pos .icons8-shop:before { content: "\f102"; } .pui--pos .icons8-shopping-bag:before { content: "\f189"; } .pui--pos .icons8-shopping-basket:before { content: "\f152"; } .pui--pos .icons8-shopping-basket-2:before { content: "\f14f"; } .pui--pos .icons8-shopping-cart:before { content: "\f112"; } .pui--pos .icons8-shopping-cart-loaded:before { content: "\f187"; } .pui--pos .icons8-synchronize:before { content: "\f171"; } .pui--pos .icons8-tags:before { content: "\f120"; } .pui--pos .icons8-tasklist:before { content: "\f150"; } .pui--pos .icons8-teams:before { content: "\f164"; } .pui--pos .icons8-test-passed:before { content: "\f14e"; } .pui--pos .icons8-todo-list:before { content: "\f151"; } .pui--pos .icons8-track-order:before { content: "\f103"; } .pui--pos .icons8-trash:before { content: "\f10e"; } .pui--pos .icons8-truck:before { content: "\f18f"; } .pui--pos .icons8-urgent-message:before { content: "\f16c"; } .pui--pos .icons8-usb-connector:before { content: "\f110"; } .pui--pos .icons8-used-product:before { content: "\f17f"; } .pui--pos .icons8-user-group-man-woman:before { content: "\f174"; } .pui--pos .icons8-view-details:before { content: "\f18a"; } .pui--pos .icons8-visa:before { content: "\f139"; } .pui--pos .icons8-wallet:before { content: "\f138"; } /*=========================================== | Name: | Application configuration | | Description: | Functions as configuration file | | Rules: | May not contain any logic, only variables | | Location: | ~./config | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | NAVIGATION BAR |============================================*/ /*=========================================== | INPUTS |============================================*/ /*=========================================== | RIGHT MENU |============================================*/ /*=========================================== | BUTTONS |============================================*/ /*=========================================== | CONTENT FOOTER |============================================*/ /*=========================================== | ASIDE |============================================*/ /* FONT PATH * -------------------------- */ @font-face { font-family: "FontAwesome"; src: url("../fonts/fontawesome-webfont.eot?v=4.4.0"); src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.4.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.4.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.4.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; } .pui--pos .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* makes the font 33% larger relative to the icon container */ .pui--pos .fa-lg { font-size: 1.3333333333em; line-height: 0.75em; vertical-align: -15%; } .pui--pos .fa-2x { font-size: 2em; } .pui--pos .fa-3x { font-size: 3em; } .pui--pos .fa-4x { font-size: 4em; } .pui--pos .fa-5x { font-size: 5em; } .pui--pos .fa-fw { width: 1.2857142857em; text-align: center; } .pui--pos .fa-ul { padding-left: 0; margin-left: 2.1428571429em; list-style-type: none; } .pui--pos .fa-ul > li { position: relative; } .pui--pos .fa-li { position: absolute; left: -2.1428571429em; width: 2.1428571429em; top: 0.1428571429em; text-align: center; } .pui--pos .fa-li.fa-lg { left: -1.8571428571em; } .pui--pos .fa-border { padding: 0.2em 0.25em 0.15em; border: solid 0.08em #eee; border-radius: 0.1em; } .pui--pos .fa-pull-left { float: left; } .pui--pos .fa-pull-right { float: right; } .pui--pos .fa.fa-pull-left { margin-right: 0.3em; } .pui--pos .fa.fa-pull-right { margin-left: 0.3em; } /* Deprecated as of 4.4.0 */ .pui--pos .pull-right, .pui--pos #aside .alert-dismissible .close { float: right; } .pui--pos .pull-left { float: left; } .pui--pos .fa.pull-left { margin-right: 0.3em; } .pui--pos .fa.pull-right, .pui--pos #aside .alert-dismissible .fa.close { margin-left: 0.3em; } .pui--pos .fa-spin { -webkit-animation: pos-fa-spin 2s infinite linear; animation: pos-fa-spin 2s infinite linear; } .pui--pos .fa-pulse { -webkit-animation: pos-fa-spin 1s infinite steps(8); animation: pos-fa-spin 1s infinite steps(8); } @-webkit-keyframes pos-fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes pos-fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .pui--pos .fa-rotate-90 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .pui--pos .fa-rotate-180 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .pui--pos .fa-rotate-270 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .pui--pos .fa-flip-horizontal { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } .pui--pos .fa-flip-vertical { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); } .pui.pui--pos .fa-rotate-90, .pui.pui--pos .fa-rotate-180, .pui.pui--pos .fa-rotate-270, .pui.pui--pos .fa-flip-horizontal, .pui.pui--pos .fa-flip-vertical { filter: none; } .pui--pos .fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; } .pui--pos .fa-stack-1x, .pui--pos .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } .pui--pos .fa-stack-1x { line-height: inherit; } .pui--pos .fa-stack-2x { font-size: 2em; } .pui--pos .fa-inverse { color: #fff; } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .pui--pos .fa-glass:before { content: "\f000"; } .pui--pos .fa-music:before { content: "\f001"; } .pui--pos .fa-search:before { content: "\f002"; } .pui--pos .fa-envelope-o:before { content: "\f003"; } .pui--pos .fa-heart:before { content: "\f004"; } .pui--pos .fa-star:before { content: "\f005"; } .pui--pos .fa-star-o:before { content: "\f006"; } .pui--pos .fa-user:before { content: "\f007"; } .pui--pos .fa-film:before { content: "\f008"; } .pui--pos .fa-th-large:before { content: "\f009"; } .pui--pos .fa-th:before { content: "\f00a"; } .pui--pos .fa-th-list:before { content: "\f00b"; } .pui--pos .fa-check:before { content: "\f00c"; } .pui--pos .fa-remove:before, .pui--pos .fa-close:before, .pui--pos .fa-times:before { content: "\f00d"; } .pui--pos .fa-search-plus:before { content: "\f00e"; } .pui--pos .fa-search-minus:before { content: "\f010"; } .pui--pos .fa-power-off:before { content: "\f011"; } .pui--pos .fa-signal:before { content: "\f012"; } .pui--pos .fa-gear:before, .pui--pos .fa-cog:before { content: "\f013"; } .pui--pos .fa-trash-o:before { content: "\f014"; } .pui--pos .fa-home:before { content: "\f015"; } .pui--pos .fa-file-o:before { content: "\f016"; } .pui--pos .fa-clock-o:before { content: "\f017"; } .pui--pos .fa-road:before { content: "\f018"; } .pui--pos .fa-download:before { content: "\f019"; } .pui--pos .fa-arrow-circle-o-down:before { content: "\f01a"; } .pui--pos .fa-arrow-circle-o-up:before { content: "\f01b"; } .pui--pos .fa-inbox:before { content: "\f01c"; } .pui--pos .fa-play-circle-o:before { content: "\f01d"; } .pui--pos .fa-rotate-right:before, .pui--pos .fa-repeat:before { content: "\f01e"; } .pui--pos .fa-refresh:before { content: "\f021"; } .pui--pos .fa-list-alt:before { content: "\f022"; } .pui--pos .fa-lock:before { content: "\f023"; } .pui--pos .fa-flag:before { content: "\f024"; } .pui--pos .fa-headphones:before { content: "\f025"; } .pui--pos .fa-volume-off:before { content: "\f026"; } .pui--pos .fa-volume-down:before { content: "\f027"; } .pui--pos .fa-volume-up:before { content: "\f028"; } .pui--pos .fa-qrcode:before { content: "\f029"; } .pui--pos .fa-barcode:before { content: "\f02a"; } .pui--pos .fa-tag:before { content: "\f02b"; } .pui--pos .fa-tags:before { content: "\f02c"; } .pui--pos .fa-book:before { content: "\f02d"; } .pui--pos .fa-bookmark:before { content: "\f02e"; } .pui--pos .fa-print:before { content: "\f02f"; } .pui--pos .fa-camera:before { content: "\f030"; } .pui--pos .fa-font:before { content: "\f031"; } .pui--pos .fa-bold:before { content: "\f032"; } .pui--pos .fa-italic:before { content: "\f033"; } .pui--pos .fa-text-height:before { content: "\f034"; } .pui--pos .fa-text-width:before { content: "\f035"; } .pui--pos .fa-align-left:before { content: "\f036"; } .pui--pos .fa-align-center:before { content: "\f037"; } .pui--pos .fa-align-right:before { content: "\f038"; } .pui--pos .fa-align-justify:before { content: "\f039"; } .pui--pos .fa-list:before { content: "\f03a"; } .pui--pos .fa-dedent:before, .pui--pos .fa-outdent:before { content: "\f03b"; } .pui--pos .fa-indent:before { content: "\f03c"; } .pui--pos .fa-video-camera:before { content: "\f03d"; } .pui--pos .fa-photo:before, .pui--pos .fa-image:before, .pui--pos .fa-picture-o:before { content: "\f03e"; } .pui--pos .fa-pencil:before { content: "\f040"; } .pui--pos .fa-map-marker:before { content: "\f041"; } .pui--pos .fa-adjust:before { content: "\f042"; } .pui--pos .fa-tint:before { content: "\f043"; } .pui--pos .fa-edit:before, .pui--pos .fa-pencil-square-o:before { content: "\f044"; } .pui--pos .fa-share-square-o:before { content: "\f045"; } .pui--pos .fa-check-square-o:before { content: "\f046"; } .pui--pos .fa-arrows:before { content: "\f047"; } .pui--pos .fa-step-backward:before { content: "\f048"; } .pui--pos .fa-fast-backward:before { content: "\f049"; } .pui--pos .fa-backward:before { content: "\f04a"; } .pui--pos .fa-play:before { content: "\f04b"; } .pui--pos .fa-pause:before { content: "\f04c"; } .pui--pos .fa-stop:before { content: "\f04d"; } .pui--pos .fa-forward:before { content: "\f04e"; } .pui--pos .fa-fast-forward:before { content: "\f050"; } .pui--pos .fa-step-forward:before { content: "\f051"; } .pui--pos .fa-eject:before { content: "\f052"; } .pui--pos .fa-chevron-left:before { content: "\f053"; } .pui--pos .fa-chevron-right:before { content: "\f054"; } .pui--pos .fa-plus-circle:before { content: "\f055"; } .pui--pos .fa-minus-circle:before { content: "\f056"; } .pui--pos .fa-times-circle:before { content: "\f057"; } .pui--pos .fa-check-circle:before { content: "\f058"; } .pui--pos .fa-question-circle:before { content: "\f059"; } .pui--pos .fa-info-circle:before { content: "\f05a"; } .pui--pos .fa-crosshairs:before { content: "\f05b"; } .pui--pos .fa-times-circle-o:before { content: "\f05c"; } .pui--pos .fa-check-circle-o:before { content: "\f05d"; } .pui--pos .fa-ban:before { content: "\f05e"; } .pui--pos .fa-arrow-left:before { content: "\f060"; } .pui--pos .fa-arrow-right:before { content: "\f061"; } .pui--pos .fa-arrow-up:before { content: "\f062"; } .pui--pos .fa-arrow-down:before { content: "\f063"; } .pui--pos .fa-mail-forward:before, .pui--pos .fa-share:before { content: "\f064"; } .pui--pos .fa-expand:before { content: "\f065"; } .pui--pos .fa-compress:before { content: "\f066"; } .pui--pos .fa-plus:before { content: "\f067"; } .pui--pos .fa-minus:before { content: "\f068"; } .pui--pos .fa-asterisk:before { content: "\f069"; } .pui--pos .fa-exclamation-circle:before { content: "\f06a"; } .pui--pos .fa-gift:before { content: "\f06b"; } .pui--pos .fa-leaf:before { content: "\f06c"; } .pui--pos .fa-fire:before { content: "\f06d"; } .pui--pos .fa-eye:before { content: "\f06e"; } .pui--pos .fa-eye-slash:before { content: "\f070"; } .pui--pos .fa-warning:before, .pui--pos .fa-exclamation-triangle:before { content: "\f071"; } .pui--pos .fa-plane:before { content: "\f072"; } .pui--pos .fa-calendar:before { content: "\f073"; } .pui--pos .fa-random:before { content: "\f074"; } .pui--pos .fa-comment:before { content: "\f075"; } .pui--pos .fa-magnet:before { content: "\f076"; } .pui--pos .fa-chevron-up:before { content: "\f077"; } .pui--pos .fa-chevron-down:before { content: "\f078"; } .pui--pos .fa-retweet:before { content: "\f079"; } .pui--pos .fa-shopping-cart:before { content: "\f07a"; } .pui--pos .fa-folder:before { content: "\f07b"; } .pui--pos .fa-folder-open:before { content: "\f07c"; } .pui--pos .fa-arrows-v:before { content: "\f07d"; } .pui--pos .fa-arrows-h:before { content: "\f07e"; } .pui--pos .fa-bar-chart-o:before, .pui--pos .fa-bar-chart:before { content: "\f080"; } .pui--pos .fa-twitter-square:before { content: "\f081"; } .pui--pos .fa-facebook-square:before { content: "\f082"; } .pui--pos .fa-camera-retro:before { content: "\f083"; } .pui--pos .fa-key:before { content: "\f084"; } .pui--pos .fa-gears:before, .pui--pos .fa-cogs:before { content: "\f085"; } .pui--pos .fa-comments:before { content: "\f086"; } .pui--pos .fa-thumbs-o-up:before { content: "\f087"; } .pui--pos .fa-thumbs-o-down:before { content: "\f088"; } .pui--pos .fa-star-half:before { content: "\f089"; } .pui--pos .fa-heart-o:before { content: "\f08a"; } .pui--pos .fa-sign-out:before { content: "\f08b"; } .pui--pos .fa-linkedin-square:before { content: "\f08c"; } .pui--pos .fa-thumb-tack:before { content: "\f08d"; } .pui--pos .fa-external-link:before { content: "\f08e"; } .pui--pos .fa-sign-in:before { content: "\f090"; } .pui--pos .fa-trophy:before { content: "\f091"; } .pui--pos .fa-github-square:before { content: "\f092"; } .pui--pos .fa-upload:before { content: "\f093"; } .pui--pos .fa-lemon-o:before { content: "\f094"; } .pui--pos .fa-phone:before { content: "\f095"; } .pui--pos .fa-square-o:before { content: "\f096"; } .pui--pos .fa-bookmark-o:before { content: "\f097"; } .pui--pos .fa-phone-square:before { content: "\f098"; } .pui--pos .fa-twitter:before { content: "\f099"; } .pui--pos .fa-facebook-f:before, .pui--pos .fa-facebook:before { content: "\f09a"; } .pui--pos .fa-github:before { content: "\f09b"; } .pui--pos .fa-unlock:before { content: "\f09c"; } .pui--pos .fa-credit-card:before { content: "\f09d"; } .pui--pos .fa-feed:before, .pui--pos .fa-rss:before { content: "\f09e"; } .pui--pos .fa-hdd-o:before { content: "\f0a0"; } .pui--pos .fa-bullhorn:before { content: "\f0a1"; } .pui--pos .fa-bell:before { content: "\f0f3"; } .pui--pos .fa-certificate:before { content: "\f0a3"; } .pui--pos .fa-hand-o-right:before { content: "\f0a4"; } .pui--pos .fa-hand-o-left:before { content: "\f0a5"; } .pui--pos .fa-hand-o-up:before { content: "\f0a6"; } .pui--pos .fa-hand-o-down:before { content: "\f0a7"; } .pui--pos .fa-arrow-circle-left:before { content: "\f0a8"; } .pui--pos .fa-arrow-circle-right:before { content: "\f0a9"; } .pui--pos .fa-arrow-circle-up:before { content: "\f0aa"; } .pui--pos .fa-arrow-circle-down:before { content: "\f0ab"; } .pui--pos .fa-globe:before { content: "\f0ac"; } .pui--pos .fa-wrench:before { content: "\f0ad"; } .pui--pos .fa-tasks:before { content: "\f0ae"; } .pui--pos .fa-filter:before { content: "\f0b0"; } .pui--pos .fa-briefcase:before { content: "\f0b1"; } .pui--pos .fa-arrows-alt:before { content: "\f0b2"; } .pui--pos .fa-group:before, .pui--pos .fa-users:before { content: "\f0c0"; } .pui--pos .fa-chain:before, .pui--pos .fa-link:before { content: "\f0c1"; } .pui--pos .fa-cloud:before { content: "\f0c2"; } .pui--pos .fa-flask:before { content: "\f0c3"; } .pui--pos .fa-cut:before, .pui--pos .fa-scissors:before { content: "\f0c4"; } .pui--pos .fa-copy:before, .pui--pos .fa-files-o:before { content: "\f0c5"; } .pui--pos .fa-paperclip:before { content: "\f0c6"; } .pui--pos .fa-save:before, .pui--pos .fa-floppy-o:before { content: "\f0c7"; } .pui--pos .fa-square:before { content: "\f0c8"; } .pui--pos .fa-navicon:before, .pui--pos .fa-reorder:before, .pui--pos .fa-bars:before { content: "\f0c9"; } .pui--pos .fa-list-ul:before { content: "\f0ca"; } .pui--pos .fa-list-ol:before { content: "\f0cb"; } .pui--pos .fa-strikethrough:before { content: "\f0cc"; } .pui--pos .fa-underline:before { content: "\f0cd"; } .pui--pos .fa-table:before { content: "\f0ce"; } .pui--pos .fa-magic:before { content: "\f0d0"; } .pui--pos .fa-truck:before { content: "\f0d1"; } .pui--pos .fa-pinterest:before { content: "\f0d2"; } .pui--pos .fa-pinterest-square:before { content: "\f0d3"; } .pui--pos .fa-google-plus-square:before { content: "\f0d4"; } .pui--pos .fa-google-plus:before { content: "\f0d5"; } .pui--pos .fa-money:before { content: "\f0d6"; } .pui--pos .fa-caret-down:before { content: "\f0d7"; } .pui--pos .fa-caret-up:before { content: "\f0d8"; } .pui--pos .fa-caret-left:before { content: "\f0d9"; } .pui--pos .fa-caret-right:before { content: "\f0da"; } .pui--pos .fa-columns:before { content: "\f0db"; } .pui--pos .fa-unsorted:before, .pui--pos .fa-sort:before { content: "\f0dc"; } .pui--pos .fa-sort-down:before, .pui--pos .fa-sort-desc:before { content: "\f0dd"; } .pui--pos .fa-sort-up:before, .pui--pos .fa-sort-asc:before { content: "\f0de"; } .pui--pos .fa-envelope:before { content: "\f0e0"; } .pui--pos .fa-linkedin:before { content: "\f0e1"; } .pui--pos .fa-rotate-left:before, .pui--pos .fa-undo:before { content: "\f0e2"; } .pui--pos .fa-legal:before, .pui--pos .fa-gavel:before { content: "\f0e3"; } .pui--pos .fa-dashboard:before, .pui--pos .fa-tachometer:before { content: "\f0e4"; } .pui--pos .fa-comment-o:before { content: "\f0e5"; } .pui--pos .fa-comments-o:before { content: "\f0e6"; } .pui--pos .fa-flash:before, .pui--pos .fa-bolt:before { content: "\f0e7"; } .pui--pos .fa-sitemap:before { content: "\f0e8"; } .pui--pos .fa-umbrella:before { content: "\f0e9"; } .pui--pos .fa-paste:before, .pui--pos .fa-clipboard:before { content: "\f0ea"; } .pui--pos .fa-lightbulb-o:before { content: "\f0eb"; } .pui--pos .fa-exchange:before { content: "\f0ec"; } .pui--pos .fa-cloud-download:before { content: "\f0ed"; } .pui--pos .fa-cloud-upload:before { content: "\f0ee"; } .pui--pos .fa-user-md:before { content: "\f0f0"; } .pui--pos .fa-stethoscope:before { content: "\f0f1"; } .pui--pos .fa-suitcase:before { content: "\f0f2"; } .pui--pos .fa-bell-o:before { content: "\f0a2"; } .pui--pos .fa-coffee:before { content: "\f0f4"; } .pui--pos .fa-cutlery:before { content: "\f0f5"; } .pui--pos .fa-file-text-o:before { content: "\f0f6"; } .pui--pos .fa-building-o:before { content: "\f0f7"; } .pui--pos .fa-hospital-o:before { content: "\f0f8"; } .pui--pos .fa-ambulance:before { content: "\f0f9"; } .pui--pos .fa-medkit:before { content: "\f0fa"; } .pui--pos .fa-fighter-jet:before { content: "\f0fb"; } .pui--pos .fa-beer:before { content: "\f0fc"; } .pui--pos .fa-h-square:before { content: "\f0fd"; } .pui--pos .fa-plus-square:before { content: "\f0fe"; } .pui--pos .fa-angle-double-left:before { content: "\f100"; } .pui--pos .fa-angle-double-right:before { content: "\f101"; } .pui--pos .fa-angle-double-up:before { content: "\f102"; } .pui--pos .fa-angle-double-down:before { content: "\f103"; } .pui--pos .fa-angle-left:before { content: "\f104"; } .pui--pos .fa-angle-right:before { content: "\f105"; } .pui--pos .fa-angle-up:before { content: "\f106"; } .pui--pos .fa-angle-down:before { content: "\f107"; } .pui--pos .fa-desktop:before { content: "\f108"; } .pui--pos .fa-laptop:before { content: "\f109"; } .pui--pos .fa-tablet:before { content: "\f10a"; } .pui--pos .fa-mobile-phone:before, .pui--pos .fa-mobile:before { content: "\f10b"; } .pui--pos .fa-circle-o:before { content: "\f10c"; } .pui--pos .fa-quote-left:before { content: "\f10d"; } .pui--pos .fa-quote-right:before { content: "\f10e"; } .pui--pos .fa-spinner:before { content: "\f110"; } .pui--pos .fa-circle:before { content: "\f111"; } .pui--pos .fa-mail-reply:before, .pui--pos .fa-reply:before { content: "\f112"; } .pui--pos .fa-github-alt:before { content: "\f113"; } .pui--pos .fa-folder-o:before { content: "\f114"; } .pui--pos .fa-folder-open-o:before { content: "\f115"; } .pui--pos .fa-smile-o:before { content: "\f118"; } .pui--pos .fa-frown-o:before { content: "\f119"; } .pui--pos .fa-meh-o:before { content: "\f11a"; } .pui--pos .fa-gamepad:before { content: "\f11b"; } .pui--pos .fa-keyboard-o:before { content: "\f11c"; } .pui--pos .fa-flag-o:before { content: "\f11d"; } .pui--pos .fa-flag-checkered:before { content: "\f11e"; } .pui--pos .fa-terminal:before { content: "\f120"; } .pui--pos .fa-code:before { content: "\f121"; } .pui--pos .fa-mail-reply-all:before, .pui--pos .fa-reply-all:before { content: "\f122"; } .pui--pos .fa-star-half-empty:before, .pui--pos .fa-star-half-full:before, .pui--pos .fa-star-half-o:before { content: "\f123"; } .pui--pos .fa-location-arrow:before { content: "\f124"; } .pui--pos .fa-crop:before { content: "\f125"; } .pui--pos .fa-code-fork:before { content: "\f126"; } .pui--pos .fa-unlink:before, .pui--pos .fa-chain-broken:before { content: "\f127"; } .pui--pos .fa-question:before { content: "\f128"; } .pui--pos .fa-info:before { content: "\f129"; } .pui--pos .fa-exclamation:before { content: "\f12a"; } .pui--pos .fa-superscript:before { content: "\f12b"; } .pui--pos .fa-subscript:before { content: "\f12c"; } .pui--pos .fa-eraser:before { content: "\f12d"; } .pui--pos .fa-puzzle-piece:before { content: "\f12e"; } .pui--pos .fa-microphone:before { content: "\f130"; } .pui--pos .fa-microphone-slash:before { content: "\f131"; } .pui--pos .fa-shield:before { content: "\f132"; } .pui--pos .fa-calendar-o:before { content: "\f133"; } .pui--pos .fa-fire-extinguisher:before { content: "\f134"; } .pui--pos .fa-rocket:before { content: "\f135"; } .pui--pos .fa-maxcdn:before { content: "\f136"; } .pui--pos .fa-chevron-circle-left:before { content: "\f137"; } .pui--pos .fa-chevron-circle-right:before { content: "\f138"; } .pui--pos .fa-chevron-circle-up:before { content: "\f139"; } .pui--pos .fa-chevron-circle-down:before { content: "\f13a"; } .pui--pos .fa-html5:before { content: "\f13b"; } .pui--pos .fa-css3:before { content: "\f13c"; } .pui--pos .fa-anchor:before { content: "\f13d"; } .pui--pos .fa-unlock-alt:before { content: "\f13e"; } .pui--pos .fa-bullseye:before { content: "\f140"; } .pui--pos .fa-ellipsis-h:before { content: "\f141"; } .pui--pos .fa-ellipsis-v:before { content: "\f142"; } .pui--pos .fa-rss-square:before { content: "\f143"; } .pui--pos .fa-play-circle:before { content: "\f144"; } .pui--pos .fa-ticket:before { content: "\f145"; } .pui--pos .fa-minus-square:before { content: "\f146"; } .pui--pos .fa-minus-square-o:before { content: "\f147"; } .pui--pos .fa-level-up:before { content: "\f148"; } .pui--pos .fa-level-down:before { content: "\f149"; } .pui--pos .fa-check-square:before { content: "\f14a"; } .pui--pos .fa-pencil-square:before { content: "\f14b"; } .pui--pos .fa-external-link-square:before { content: "\f14c"; } .pui--pos .fa-share-square:before { content: "\f14d"; } .pui--pos .fa-compass:before { content: "\f14e"; } .pui--pos .fa-toggle-down:before, .pui--pos .fa-caret-square-o-down:before { content: "\f150"; } .pui--pos .fa-toggle-up:before, .pui--pos .fa-caret-square-o-up:before { content: "\f151"; } .pui--pos .fa-toggle-right:before, .pui--pos .fa-caret-square-o-right:before { content: "\f152"; } .pui--pos .fa-euro:before, .pui--pos .fa-eur:before { content: "\f153"; } .pui--pos .fa-gbp:before { content: "\f154"; } .pui--pos .fa-dollar:before, .pui--pos .fa-usd:before { content: "\f155"; } .pui--pos .fa-rupee:before, .pui--pos .fa-inr:before { content: "\f156"; } .pui--pos .fa-cny:before, .pui--pos .fa-rmb:before, .pui--pos .fa-yen:before, .pui--pos .fa-jpy:before { content: "\f157"; } .pui--pos .fa-ruble:before, .pui--pos .fa-rouble:before, .pui--pos .fa-rub:before { content: "\f158"; } .pui--pos .fa-won:before, .pui--pos .fa-krw:before { content: "\f159"; } .pui--pos .fa-bitcoin:before, .pui--pos .fa-btc:before { content: "\f15a"; } .pui--pos .fa-file:before { content: "\f15b"; } .pui--pos .fa-file-text:before { content: "\f15c"; } .pui--pos .fa-sort-alpha-asc:before { content: "\f15d"; } .pui--pos .fa-sort-alpha-desc:before { content: "\f15e"; } .pui--pos .fa-sort-amount-asc:before { content: "\f160"; } .pui--pos .fa-sort-amount-desc:before { content: "\f161"; } .pui--pos .fa-sort-numeric-asc:before { content: "\f162"; } .pui--pos .fa-sort-numeric-desc:before { content: "\f163"; } .pui--pos .fa-thumbs-up:before { content: "\f164"; } .pui--pos .fa-thumbs-down:before { content: "\f165"; } .pui--pos .fa-youtube-square:before { content: "\f166"; } .pui--pos .fa-youtube:before { content: "\f167"; } .pui--pos .fa-xing:before { content: "\f168"; } .pui--pos .fa-xing-square:before { content: "\f169"; } .pui--pos .fa-youtube-play:before { content: "\f16a"; } .pui--pos .fa-dropbox:before { content: "\f16b"; } .pui--pos .fa-stack-overflow:before { content: "\f16c"; } .pui--pos .fa-instagram:before { content: "\f16d"; } .pui--pos .fa-flickr:before { content: "\f16e"; } .pui--pos .fa-adn:before { content: "\f170"; } .pui--pos .fa-bitbucket:before { content: "\f171"; } .pui--pos .fa-bitbucket-square:before { content: "\f172"; } .pui--pos .fa-tumblr:before { content: "\f173"; } .pui--pos .fa-tumblr-square:before { content: "\f174"; } .pui--pos .fa-long-arrow-down:before { content: "\f175"; } .pui--pos .fa-long-arrow-up:before { content: "\f176"; } .pui--pos .fa-long-arrow-left:before { content: "\f177"; } .pui--pos .fa-long-arrow-right:before { content: "\f178"; } .pui--pos .fa-apple:before { content: "\f179"; } .pui--pos .fa-windows:before { content: "\f17a"; } .pui--pos .fa-android:before { content: "\f17b"; } .pui--pos .fa-linux:before { content: "\f17c"; } .pui--pos .fa-dribbble:before { content: "\f17d"; } .pui--pos .fa-skype:before { content: "\f17e"; } .pui--pos .fa-foursquare:before { content: "\f180"; } .pui--pos .fa-trello:before { content: "\f181"; } .pui--pos .fa-female:before { content: "\f182"; } .pui--pos .fa-male:before { content: "\f183"; } .pui--pos .fa-gittip:before, .pui--pos .fa-gratipay:before { content: "\f184"; } .pui--pos .fa-sun-o:before { content: "\f185"; } .pui--pos .fa-moon-o:before { content: "\f186"; } .pui--pos .fa-archive:before { content: "\f187"; } .pui--pos .fa-bug:before { content: "\f188"; } .pui--pos .fa-vk:before { content: "\f189"; } .pui--pos .fa-weibo:before { content: "\f18a"; } .pui--pos .fa-renren:before { content: "\f18b"; } .pui--pos .fa-pagelines:before { content: "\f18c"; } .pui--pos .fa-stack-exchange:before { content: "\f18d"; } .pui--pos .fa-arrow-circle-o-right:before { content: "\f18e"; } .pui--pos .fa-arrow-circle-o-left:before { content: "\f190"; } .pui--pos .fa-toggle-left:before, .pui--pos .fa-caret-square-o-left:before { content: "\f191"; } .pui--pos .fa-dot-circle-o:before { content: "\f192"; } .pui--pos .fa-wheelchair:before { content: "\f193"; } .pui--pos .fa-vimeo-square:before { content: "\f194"; } .pui--pos .fa-turkish-lira:before, .pui--pos .fa-try:before { content: "\f195"; } .pui--pos .fa-plus-square-o:before { content: "\f196"; } .pui--pos .fa-space-shuttle:before { content: "\f197"; } .pui--pos .fa-slack:before { content: "\f198"; } .pui--pos .fa-envelope-square:before { content: "\f199"; } .pui--pos .fa-wordpress:before { content: "\f19a"; } .pui--pos .fa-openid:before { content: "\f19b"; } .pui--pos .fa-institution:before, .pui--pos .fa-bank:before, .pui--pos .fa-university:before { content: "\f19c"; } .pui--pos .fa-mortar-board:before, .pui--pos .fa-graduation-cap:before { content: "\f19d"; } .pui--pos .fa-yahoo:before { content: "\f19e"; } .pui--pos .fa-google:before { content: "\f1a0"; } .pui--pos .fa-reddit:before { content: "\f1a1"; } .pui--pos .fa-reddit-square:before { content: "\f1a2"; } .pui--pos .fa-stumbleupon-circle:before { content: "\f1a3"; } .pui--pos .fa-stumbleupon:before { content: "\f1a4"; } .pui--pos .fa-delicious:before { content: "\f1a5"; } .pui--pos .fa-digg:before { content: "\f1a6"; } .pui--pos .fa-pied-piper:before { content: "\f1a7"; } .pui--pos .fa-pied-piper-alt:before { content: "\f1a8"; } .pui--pos .fa-drupal:before { content: "\f1a9"; } .pui--pos .fa-joomla:before { content: "\f1aa"; } .pui--pos .fa-language:before { content: "\f1ab"; } .pui--pos .fa-fax:before { content: "\f1ac"; } .pui--pos .fa-building:before { content: "\f1ad"; } .pui--pos .fa-child:before { content: "\f1ae"; } .pui--pos .fa-paw:before { content: "\f1b0"; } .pui--pos .fa-spoon:before { content: "\f1b1"; } .pui--pos .fa-cube:before { content: "\f1b2"; } .pui--pos .fa-cubes:before { content: "\f1b3"; } .pui--pos .fa-behance:before { content: "\f1b4"; } .pui--pos .fa-behance-square:before { content: "\f1b5"; } .pui--pos .fa-steam:before { content: "\f1b6"; } .pui--pos .fa-steam-square:before { content: "\f1b7"; } .pui--pos .fa-recycle:before { content: "\f1b8"; } .pui--pos .fa-automobile:before, .pui--pos .fa-car:before { content: "\f1b9"; } .pui--pos .fa-cab:before, .pui--pos .fa-taxi:before { content: "\f1ba"; } .pui--pos .fa-tree:before { content: "\f1bb"; } .pui--pos .fa-spotify:before { content: "\f1bc"; } .pui--pos .fa-deviantart:before { content: "\f1bd"; } .pui--pos .fa-soundcloud:before { content: "\f1be"; } .pui--pos .fa-database:before { content: "\f1c0"; } .pui--pos .fa-file-pdf-o:before { content: "\f1c1"; } .pui--pos .fa-file-word-o:before { content: "\f1c2"; } .pui--pos .fa-file-excel-o:before { content: "\f1c3"; } .pui--pos .fa-file-powerpoint-o:before { content: "\f1c4"; } .pui--pos .fa-file-photo-o:before, .pui--pos .fa-file-picture-o:before, .pui--pos .fa-file-image-o:before { content: "\f1c5"; } .pui--pos .fa-file-zip-o:before, .pui--pos .fa-file-archive-o:before { content: "\f1c6"; } .pui--pos .fa-file-sound-o:before, .pui--pos .fa-file-audio-o:before { content: "\f1c7"; } .pui--pos .fa-file-movie-o:before, .pui--pos .fa-file-video-o:before { content: "\f1c8"; } .pui--pos .fa-file-code-o:before { content: "\f1c9"; } .pui--pos .fa-vine:before { content: "\f1ca"; } .pui--pos .fa-codepen:before { content: "\f1cb"; } .pui--pos .fa-jsfiddle:before { content: "\f1cc"; } .pui--pos .fa-life-bouy:before, .pui--pos .fa-life-buoy:before, .pui--pos .fa-life-saver:before, .pui--pos .fa-support:before, .pui--pos .fa-life-ring:before { content: "\f1cd"; } .pui--pos .fa-circle-o-notch:before { content: "\f1ce"; } .pui--pos .fa-ra:before, .pui--pos .fa-rebel:before { content: "\f1d0"; } .pui--pos .fa-ge:before, .pui--pos .fa-empire:before { content: "\f1d1"; } .pui--pos .fa-git-square:before { content: "\f1d2"; } .pui--pos .fa-git:before { content: "\f1d3"; } .pui--pos .fa-y-combinator-square:before, .pui--pos .fa-yc-square:before, .pui--pos .fa-hacker-news:before { content: "\f1d4"; } .pui--pos .fa-tencent-weibo:before { content: "\f1d5"; } .pui--pos .fa-qq:before { content: "\f1d6"; } .pui--pos .fa-wechat:before, .pui--pos .fa-weixin:before { content: "\f1d7"; } .pui--pos .fa-send:before, .pui--pos .fa-paper-plane:before { content: "\f1d8"; } .pui--pos .fa-send-o:before, .pui--pos .fa-paper-plane-o:before { content: "\f1d9"; } .pui--pos .fa-history:before { content: "\f1da"; } .pui--pos .fa-circle-thin:before { content: "\f1db"; } .pui--pos .fa-header:before { content: "\f1dc"; } .pui--pos .fa-paragraph:before { content: "\f1dd"; } .pui--pos .fa-sliders:before { content: "\f1de"; } .pui--pos .fa-share-alt:before { content: "\f1e0"; } .pui--pos .fa-share-alt-square:before { content: "\f1e1"; } .pui--pos .fa-bomb:before { content: "\f1e2"; } .pui--pos .fa-soccer-ball-o:before, .pui--pos .fa-futbol-o:before { content: "\f1e3"; } .pui--pos .fa-tty:before { content: "\f1e4"; } .pui--pos .fa-binoculars:before { content: "\f1e5"; } .pui--pos .fa-plug:before { content: "\f1e6"; } .pui--pos .fa-slideshare:before { content: "\f1e7"; } .pui--pos .fa-twitch:before { content: "\f1e8"; } .pui--pos .fa-yelp:before { content: "\f1e9"; } .pui--pos .fa-newspaper-o:before { content: "\f1ea"; } .pui--pos .fa-wifi:before { content: "\f1eb"; } .pui--pos .fa-calculator:before { content: "\f1ec"; } .pui--pos .fa-paypal:before { content: "\f1ed"; } .pui--pos .fa-google-wallet:before { content: "\f1ee"; } .pui--pos .fa-cc-visa:before { content: "\f1f0"; } .pui--pos .fa-cc-mastercard:before { content: "\f1f1"; } .pui--pos .fa-cc-discover:before { content: "\f1f2"; } .pui--pos .fa-cc-amex:before { content: "\f1f3"; } .pui--pos .fa-cc-paypal:before { content: "\f1f4"; } .pui--pos .fa-cc-stripe:before { content: "\f1f5"; } .pui--pos .fa-bell-slash:before { content: "\f1f6"; } .pui--pos .fa-bell-slash-o:before { content: "\f1f7"; } .pui--pos .fa-trash:before { content: "\f1f8"; } .pui--pos .fa-copyright:before { content: "\f1f9"; } .pui--pos .fa-at:before { content: "\f1fa"; } .pui--pos .fa-eyedropper:before { content: "\f1fb"; } .pui--pos .fa-paint-brush:before { content: "\f1fc"; } .pui--pos .fa-birthday-cake:before { content: "\f1fd"; } .pui--pos .fa-area-chart:before { content: "\f1fe"; } .pui--pos .fa-pie-chart:before { content: "\f200"; } .pui--pos .fa-line-chart:before { content: "\f201"; } .pui--pos .fa-lastfm:before { content: "\f202"; } .pui--pos .fa-lastfm-square:before { content: "\f203"; } .pui--pos .fa-toggle-off:before { content: "\f204"; } .pui--pos .fa-toggle-on:before { content: "\f205"; } .pui--pos .fa-bicycle:before { content: "\f206"; } .pui--pos .fa-bus:before { content: "\f207"; } .pui--pos .fa-ioxhost:before { content: "\f208"; } .pui--pos .fa-angellist:before { content: "\f209"; } .pui--pos .fa-cc:before { content: "\f20a"; } .pui--pos .fa-shekel:before, .pui--pos .fa-sheqel:before, .pui--pos .fa-ils:before { content: "\f20b"; } .pui--pos .fa-meanpath:before { content: "\f20c"; } .pui--pos .fa-buysellads:before { content: "\f20d"; } .pui--pos .fa-connectdevelop:before { content: "\f20e"; } .pui--pos .fa-dashcube:before { content: "\f210"; } .pui--pos .fa-forumbee:before { content: "\f211"; } .pui--pos .fa-leanpub:before { content: "\f212"; } .pui--pos .fa-sellsy:before { content: "\f213"; } .pui--pos .fa-shirtsinbulk:before { content: "\f214"; } .pui--pos .fa-simplybuilt:before { content: "\f215"; } .pui--pos .fa-skyatlas:before { content: "\f216"; } .pui--pos .fa-cart-plus:before { content: "\f217"; } .pui--pos .fa-cart-arrow-down:before { content: "\f218"; } .pui--pos .fa-diamond:before { content: "\f219"; } .pui--pos .fa-ship:before { content: "\f21a"; } .pui--pos .fa-user-secret:before { content: "\f21b"; } .pui--pos .fa-motorcycle:before { content: "\f21c"; } .pui--pos .fa-street-view:before { content: "\f21d"; } .pui--pos .fa-heartbeat:before { content: "\f21e"; } .pui--pos .fa-venus:before { content: "\f221"; } .pui--pos .fa-mars:before { content: "\f222"; } .pui--pos .fa-mercury:before { content: "\f223"; } .pui--pos .fa-intersex:before, .pui--pos .fa-transgender:before { content: "\f224"; } .pui--pos .fa-transgender-alt:before { content: "\f225"; } .pui--pos .fa-venus-double:before { content: "\f226"; } .pui--pos .fa-mars-double:before { content: "\f227"; } .pui--pos .fa-venus-mars:before { content: "\f228"; } .pui--pos .fa-mars-stroke:before { content: "\f229"; } .pui--pos .fa-mars-stroke-v:before { content: "\f22a"; } .pui--pos .fa-mars-stroke-h:before { content: "\f22b"; } .pui--pos .fa-neuter:before { content: "\f22c"; } .pui--pos .fa-genderless:before { content: "\f22d"; } .pui--pos .fa-facebook-official:before { content: "\f230"; } .pui--pos .fa-pinterest-p:before { content: "\f231"; } .pui--pos .fa-whatsapp:before { content: "\f232"; } .pui--pos .fa-server:before { content: "\f233"; } .pui--pos .fa-user-plus:before { content: "\f234"; } .pui--pos .fa-user-times:before { content: "\f235"; } .pui--pos .fa-hotel:before, .pui--pos .fa-bed:before { content: "\f236"; } .pui--pos .fa-viacoin:before { content: "\f237"; } .pui--pos .fa-train:before { content: "\f238"; } .pui--pos .fa-subway:before { content: "\f239"; } .pui--pos .fa-medium:before { content: "\f23a"; } .pui--pos .fa-yc:before, .pui--pos .fa-y-combinator:before { content: "\f23b"; } .pui--pos .fa-optin-monster:before { content: "\f23c"; } .pui--pos .fa-opencart:before { content: "\f23d"; } .pui--pos .fa-expeditedssl:before { content: "\f23e"; } .pui--pos .fa-battery-4:before, .pui--pos .fa-battery-full:before { content: "\f240"; } .pui--pos .fa-battery-3:before, .pui--pos .fa-battery-three-quarters:before { content: "\f241"; } .pui--pos .fa-battery-2:before, .pui--pos .fa-battery-half:before { content: "\f242"; } .pui--pos .fa-battery-1:before, .pui--pos .fa-battery-quarter:before { content: "\f243"; } .pui--pos .fa-battery-0:before, .pui--pos .fa-battery-empty:before { content: "\f244"; } .pui--pos .fa-mouse-pointer:before { content: "\f245"; } .pui--pos .fa-i-cursor:before { content: "\f246"; } .pui--pos .fa-object-group:before { content: "\f247"; } .pui--pos .fa-object-ungroup:before { content: "\f248"; } .pui--pos .fa-sticky-note:before { content: "\f249"; } .pui--pos .fa-sticky-note-o:before { content: "\f24a"; } .pui--pos .fa-cc-jcb:before { content: "\f24b"; } .pui--pos .fa-cc-diners-club:before { content: "\f24c"; } .pui--pos .fa-clone:before { content: "\f24d"; } .pui--pos .fa-balance-scale:before { content: "\f24e"; } .pui--pos .fa-hourglass-o:before { content: "\f250"; } .pui--pos .fa-hourglass-1:before, .pui--pos .fa-hourglass-start:before { content: "\f251"; } .pui--pos .fa-hourglass-2:before, .pui--pos .fa-hourglass-half:before { content: "\f252"; } .pui--pos .fa-hourglass-3:before, .pui--pos .fa-hourglass-end:before { content: "\f253"; } .pui--pos .fa-hourglass:before { content: "\f254"; } .pui--pos .fa-hand-grab-o:before, .pui--pos .fa-hand-rock-o:before { content: "\f255"; } .pui--pos .fa-hand-stop-o:before, .pui--pos .fa-hand-paper-o:before { content: "\f256"; } .pui--pos .fa-hand-scissors-o:before { content: "\f257"; } .pui--pos .fa-hand-lizard-o:before { content: "\f258"; } .pui--pos .fa-hand-spock-o:before { content: "\f259"; } .pui--pos .fa-hand-pointer-o:before { content: "\f25a"; } .pui--pos .fa-hand-peace-o:before { content: "\f25b"; } .pui--pos .fa-trademark:before { content: "\f25c"; } .pui--pos .fa-registered:before { content: "\f25d"; } .pui--pos .fa-creative-commons:before { content: "\f25e"; } .pui--pos .fa-gg:before { content: "\f260"; } .pui--pos .fa-gg-circle:before { content: "\f261"; } .pui--pos .fa-tripadvisor:before { content: "\f262"; } .pui--pos .fa-odnoklassniki:before { content: "\f263"; } .pui--pos .fa-odnoklassniki-square:before { content: "\f264"; } .pui--pos .fa-get-pocket:before { content: "\f265"; } .pui--pos .fa-wikipedia-w:before { content: "\f266"; } .pui--pos .fa-safari:before { content: "\f267"; } .pui--pos .fa-chrome:before { content: "\f268"; } .pui--pos .fa-firefox:before { content: "\f269"; } .pui--pos .fa-opera:before { content: "\f26a"; } .pui--pos .fa-internet-explorer:before { content: "\f26b"; } .pui--pos .fa-tv:before, .pui--pos .fa-television:before { content: "\f26c"; } .pui--pos .fa-contao:before { content: "\f26d"; } .pui--pos .fa-500px:before { content: "\f26e"; } .pui--pos .fa-amazon:before { content: "\f270"; } .pui--pos .fa-calendar-plus-o:before { content: "\f271"; } .pui--pos .fa-calendar-minus-o:before { content: "\f272"; } .pui--pos .fa-calendar-times-o:before { content: "\f273"; } .pui--pos .fa-calendar-check-o:before { content: "\f274"; } .pui--pos .fa-industry:before { content: "\f275"; } .pui--pos .fa-map-pin:before { content: "\f276"; } .pui--pos .fa-map-signs:before { content: "\f277"; } .pui--pos .fa-map-o:before { content: "\f278"; } .pui--pos .fa-map:before { content: "\f279"; } .pui--pos .fa-commenting:before { content: "\f27a"; } .pui--pos .fa-commenting-o:before { content: "\f27b"; } .pui--pos .fa-houzz:before { content: "\f27c"; } .pui--pos .fa-vimeo:before { content: "\f27d"; } .pui--pos .fa-black-tie:before { content: "\f27e"; } .pui--pos .fa-fonticons:before { content: "\f280"; } /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ .pui.pui--pos { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } .pui.pui--pos { margin: 0; } .pui--pos article, .pui--pos aside, .pui--pos details, .pui--pos figcaption, .pui--pos figure, .pui--pos footer, .pui--pos header, .pui--pos hgroup, .pui--pos main, .pui--pos menu, .pui--pos nav, .pui--pos section, .pui--pos summary { display: block; } .pui--pos audio, .pui--pos canvas, .pui--pos progress, .pui--pos video { display: inline-block; vertical-align: baseline; } .pui--pos audio:not([controls]) { display: none; height: 0; } .pui--pos [hidden], .pui--pos template { display: none; } .pui--pos a { background-color: transparent; } .pui--pos a:active, .pui--pos a:hover { outline: 0; } .pui--pos abbr[title] { border-bottom: 1px dotted; } .pui--pos b, .pui--pos strong { font-weight: bold; } .pui--pos dfn { font-style: italic; } .pui--pos h1 { font-size: 2em; margin: 0.67em 0; } .pui--pos mark { background: #ff0; color: #000; } .pui--pos small { font-size: 80%; } .pui--pos sub, .pui--pos sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } .pui--pos sup { top: -0.5em; } .pui--pos sub { bottom: -0.25em; } .pui--pos img { border: 0; } .pui--pos svg:not(:root) { overflow: hidden; } .pui--pos figure { margin: 1em 40px; } .pui--pos hr { box-sizing: content-box; height: 0; } .pui--pos pre { overflow: auto; } .pui--pos code, .pui--pos kbd, .pui--pos pre, .pui--pos samp { font-family: monospace, monospace; font-size: 1em; } .pui--pos button, .pui--pos input, .pui--pos optgroup, .pui--pos select, .pui--pos textarea { color: inherit; font: inherit; margin: 0; } .pui--pos button { overflow: visible; } .pui--pos button, .pui--pos select { text-transform: none; } .pui--pos button, .pui.pui--pos input[type=button], .pui--pos input[type=reset], .pui--pos input[type=submit] { -webkit-appearance: button; cursor: pointer; } .pui--pos button[disabled], .pui.pui--pos input[disabled] { cursor: default; } .pui--pos button::-moz-focus-inner, .pui--pos input::-moz-focus-inner { border: 0; padding: 0; } .pui--pos input { line-height: normal; } .pui--pos input[type=checkbox], .pui--pos input[type=radio] { box-sizing: border-box; padding: 0; } .pui--pos input[type=number]::-webkit-inner-spin-button, .pui--pos input[type=number]::-webkit-outer-spin-button { height: auto; } .pui--pos input[type=search] { -webkit-appearance: textfield; box-sizing: content-box; } .pui--pos input[type=search]::-webkit-search-cancel-button, .pui--pos input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } .pui--pos fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } .pui--pos legend { border: 0; padding: 0; } .pui--pos textarea { overflow: auto; } .pui--pos optgroup { font-weight: bold; } .pui--pos table { border-collapse: collapse; border-spacing: 0; } .pui--pos td, .pui--pos th { padding: 0; } /*=========================================== | Name: | Application variables | | Description: | Functions as variables file | | Rules: | May not contain any logic, only variables | | Location: | ~./variables | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | TEXT |============================================*/ /*=========================================== | SIZES |============================================*/ /*=========================================== | COLORS |============================================*/ /*=========================================== | INDEXING |============================================*/ /*=========================================== | BREAKPOINTS |============================================*/ /*=========================================== | ANIMATIONS |============================================*/ /*=========================================== | SHADOWS |============================================*/ /*=========================================== | Name: | Mixins | | Description: | Mixins for use around the application | | Rules: | None | | Location: | ~./utilities/mixins | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | ALIGNMENT AND POSITIONING |============================================*/ /*=========================================== | MEDIA QUERIES |============================================*/ /*=========================================== | GRADIENTS |============================================*/ /*=========================================== | CLEARFIX |============================================*/ /*=========================================== | VISIBILITY |============================================*/ /*=========================================== | Name: | Animations | | Description: | Animations for use around the application | | Rules: | None | | Location: | ~./utilities/animations | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | ANIMATIONS - FADE |============================================*/ @keyframes pos-fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /*=========================================== | ANIMATIONS - SLIDE |============================================*/ @keyframes pos-slideInFromTop { 0% { opacity: 0; transform: translateY(-100vh); } 100% { opacity: 1; transform: translateY(0); } } @keyframes pos-slideInFromRight { 0% { opacity: 0; transform: translateX(100vw); } 100% { opacity: 1; transform: translateX(0); } } @keyframes pos-slideOutRight { 0% { opacity: 0; transform: translateX(0); } 100% { opacity: 1; transform: translateX(100vw); } } @keyframes pos-slideInFromBottom { 0% { opacity: 0; transform: translateY(100vh); } 100% { opacity: 1; transform: translateY(0); } } @keyframes pos-slideInFromLeft { 0% { opacity: 0; transform: translateX(-100vw); } 100% { opacity: 1; transform: translateX(0); } } @keyframes pos-pushUpFromBottom { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } } /*=========================================== | ANIMATIONS - CONNECTOR INDICATOR |============================================*/ @keyframes pos-connectorIndicator { 0% { background-color: transparent; } 50% { background-color: #EE1111; } 100% { background-color: transparent; } } .pui--pos .use-bootstrap html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } .pui--pos .use-bootstrap body { margin: 0; } .pui--pos .use-bootstrap article, .pui--pos .use-bootstrap aside, .pui--pos .use-bootstrap details, .pui--pos .use-bootstrap figcaption, .pui--pos .use-bootstrap figure, .pui--pos .use-bootstrap footer, .pui--pos .use-bootstrap header, .pui--pos .use-bootstrap hgroup, .pui--pos .use-bootstrap main, .pui--pos .use-bootstrap menu, .pui--pos .use-bootstrap nav, .pui--pos .use-bootstrap section, .pui--pos .use-bootstrap summary { display: block; } .pui--pos .use-bootstrap audio, .pui--pos .use-bootstrap canvas, .pui--pos .use-bootstrap progress, .pui--pos .use-bootstrap video { display: inline-block; vertical-align: baseline; } .pui--pos .use-bootstrap audio:not([controls]) { display: none; height: 0; } .pui--pos .use-bootstrap [hidden], .pui--pos .use-bootstrap template { display: none; } .pui--pos .use-bootstrap a { background-color: transparent; } .pui--pos .use-bootstrap a:active, .pui--pos .use-bootstrap a:hover { outline: 0; } .pui--pos .use-bootstrap abbr[title] { border-bottom: 1px dotted; } .pui--pos .use-bootstrap b, .pui--pos .use-bootstrap strong { font-weight: bold; } .pui--pos .use-bootstrap dfn { font-style: italic; } .pui--pos .use-bootstrap h1 { margin: 0.67em 0; font-size: 2em; } .pui--pos .use-bootstrap mark { color: #000; background: #ff0; } .pui--pos .use-bootstrap small { font-size: 80%; } .pui--pos .use-bootstrap sub, .pui--pos .use-bootstrap sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } .pui--pos .use-bootstrap sup { top: -0.5em; } .pui--pos .use-bootstrap sub { bottom: -0.25em; } .pui--pos .use-bootstrap img { border: 0; } .pui--pos .use-bootstrap svg:not(:root) { overflow: hidden; } .pui--pos .use-bootstrap figure { margin: 1em 40px; } .pui--pos .use-bootstrap hr { height: 0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .pui--pos .use-bootstrap pre { overflow: auto; } .pui--pos .use-bootstrap code, .pui--pos .use-bootstrap kbd, .pui--pos .use-bootstrap pre, .pui--pos .use-bootstrap samp { font-family: monospace, monospace; font-size: 1em; } .pui--pos .use-bootstrap button, .pui--pos .use-bootstrap input, .pui--pos .use-bootstrap optgroup, .pui--pos .use-bootstrap select, .pui--pos .use-bootstrap textarea { margin: 0; font: inherit; color: inherit; } .pui--pos .use-bootstrap button { overflow: visible; } .pui--pos .use-bootstrap button, .pui--pos .use-bootstrap select { text-transform: none; } .pui--pos .use-bootstrap button, .pui--pos .use-bootstrap html input[type=button], .pui--pos .use-bootstrap input[type=reset], .pui--pos .use-bootstrap input[type=submit] { -webkit-appearance: button; cursor: pointer; } .pui--pos .use-bootstrap button[disabled], .pui--pos .use-bootstrap html input[disabled] { cursor: default; } .pui--pos .use-bootstrap button::-moz-focus-inner, .pui--pos .use-bootstrap input::-moz-focus-inner { padding: 0; border: 0; } .pui--pos .use-bootstrap input { line-height: normal; } .pui--pos .use-bootstrap input[type=checkbox], .pui--pos .use-bootstrap input[type=radio] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; } .pui--pos .use-bootstrap input[type=number]::-webkit-inner-spin-button, .pui--pos .use-bootstrap input[type=number]::-webkit-outer-spin-button { height: auto; } .pui--pos .use-bootstrap input[type=search] { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield; } .pui--pos .use-bootstrap input[type=search]::-webkit-search-cancel-button, .pui--pos .use-bootstrap input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } .pui--pos .use-bootstrap fieldset { padding: 0.35em 0.625em 0.75em; margin: 0 2px; border: 1px solid #c0c0c0; } .pui--pos .use-bootstrap legend { padding: 0; border: 0; } .pui--pos .use-bootstrap textarea { overflow: auto; } .pui--pos .use-bootstrap optgroup { font-weight: bold; } .pui--pos .use-bootstrap table { border-spacing: 0; border-collapse: collapse; } .pui--pos .use-bootstrap td, .pui--pos .use-bootstrap th { padding: 0; } .pui--pos .use-bootstrap { /*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */ } @media print { .pui--pos .use-bootstrap *, .pui--pos .use-bootstrap *:before, .pui--pos .use-bootstrap *:after { color: #000 !important; text-shadow: none !important; background: transparent !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .pui--pos .use-bootstrap a, .pui--pos .use-bootstrap a:visited { text-decoration: underline; } .pui--pos .use-bootstrap a[href]:after { content: " (" attr(href) ")"; } .pui--pos .use-bootstrap abbr[title]:after { content: " (" attr(title) ")"; } .pui--pos .use-bootstrap a[href^="#"]:after, .pui--pos .use-bootstrap a[href^="javascript:"]:after { content: ""; } .pui--pos .use-bootstrap pre, .pui--pos .use-bootstrap blockquote { border: 1px solid #999; page-break-inside: avoid; } .pui--pos .use-bootstrap thead { display: table-header-group; } .pui--pos .use-bootstrap tr, .pui--pos .use-bootstrap img { page-break-inside: avoid; } .pui--pos .use-bootstrap img { max-width: 100% !important; } .pui--pos .use-bootstrap p, .pui--pos .use-bootstrap h2, .pui--pos .use-bootstrap h3 { orphans: 3; widows: 3; } .pui--pos .use-bootstrap h2, .pui--pos .use-bootstrap h3 { page-break-after: avoid; } .pui--pos .use-bootstrap .navbar { display: none; } .pui--pos .use-bootstrap .btn > .caret, .pui--pos .use-bootstrap .dropup > .btn > .caret { border-top-color: #000 !important; } .pui--pos .use-bootstrap .label { border: 1px solid #000; } .pui--pos .use-bootstrap .table { border-collapse: collapse !important; } .pui--pos .use-bootstrap .table td, .pui--pos .use-bootstrap .table th { background-color: #fff !important; } .pui--pos .use-bootstrap .table-bordered th, .pui--pos .use-bootstrap .table-bordered td { border: 1px solid #ddd !important; } } @font-face { font-family: "Glyphicons Halflings"; src: url("../fonts/glyphicons-halflings-regular.eot"); src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); } .pui--pos .use-bootstrap .glyphicon { position: relative; top: 1px; display: inline-block; font-family: "Glyphicons Halflings"; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .pui--pos .use-bootstrap .glyphicon-asterisk:before { content: "*"; } .pui--pos .use-bootstrap .glyphicon-plus:before { content: "+"; } .pui--pos .use-bootstrap .glyphicon-euro:before, .pui--pos .use-bootstrap .glyphicon-eur:before { content: "€"; } .pui--pos .use-bootstrap .glyphicon-minus:before { content: "−"; } .pui--pos .use-bootstrap .glyphicon-cloud:before { content: "☁"; } .pui--pos .use-bootstrap .glyphicon-envelope:before { content: "✉"; } .pui--pos .use-bootstrap .glyphicon-pencil:before { content: "✏"; } .pui--pos .use-bootstrap .glyphicon-glass:before { content: "\e001"; } .pui--pos .use-bootstrap .glyphicon-music:before { content: "\e002"; } .pui--pos .use-bootstrap .glyphicon-search:before { content: "\e003"; } .pui--pos .use-bootstrap .glyphicon-heart:before { content: "\e005"; } .pui--pos .use-bootstrap .glyphicon-star:before { content: "\e006"; } .pui--pos .use-bootstrap .glyphicon-star-empty:before { content: "\e007"; } .pui--pos .use-bootstrap .glyphicon-user:before { content: "\e008"; } .pui--pos .use-bootstrap .glyphicon-film:before { content: "\e009"; } .pui--pos .use-bootstrap .glyphicon-th-large:before { content: "\e010"; } .pui--pos .use-bootstrap .glyphicon-th:before { content: "\e011"; } .pui--pos .use-bootstrap .glyphicon-th-list:before { content: "\e012"; } .pui--pos .use-bootstrap .glyphicon-ok:before { content: "\e013"; } .pui--pos .use-bootstrap .glyphicon-remove:before { content: "\e014"; } .pui--pos .use-bootstrap .glyphicon-zoom-in:before { content: "\e015"; } .pui--pos .use-bootstrap .glyphicon-zoom-out:before { content: "\e016"; } .pui--pos .use-bootstrap .glyphicon-off:before { content: "\e017"; } .pui--pos .use-bootstrap .glyphicon-signal:before { content: "\e018"; } .pui--pos .use-bootstrap .glyphicon-cog:before { content: "\e019"; } .pui--pos .use-bootstrap .glyphicon-trash:before { content: "\e020"; } .pui--pos .use-bootstrap .glyphicon-home:before { content: "\e021"; } .pui--pos .use-bootstrap .glyphicon-file:before { content: "\e022"; } .pui--pos .use-bootstrap .glyphicon-time:before { content: "\e023"; } .pui--pos .use-bootstrap .glyphicon-road:before { content: "\e024"; } .pui--pos .use-bootstrap .glyphicon-download-alt:before { content: "\e025"; } .pui--pos .use-bootstrap .glyphicon-download:before { content: "\e026"; } .pui--pos .use-bootstrap .glyphicon-upload:before { content: "\e027"; } .pui--pos .use-bootstrap .glyphicon-inbox:before { content: "\e028"; } .pui--pos .use-bootstrap .glyphicon-play-circle:before { content: "\e029"; } .pui--pos .use-bootstrap .glyphicon-repeat:before { content: "\e030"; } .pui--pos .use-bootstrap .glyphicon-refresh:before { content: "\e031"; } .pui--pos .use-bootstrap .glyphicon-list-alt:before { content: "\e032"; } .pui--pos .use-bootstrap .glyphicon-lock:before { content: "\e033"; } .pui--pos .use-bootstrap .glyphicon-flag:before { content: "\e034"; } .pui--pos .use-bootstrap .glyphicon-headphones:before { content: "\e035"; } .pui--pos .use-bootstrap .glyphicon-volume-off:before { content: "\e036"; } .pui--pos .use-bootstrap .glyphicon-volume-down:before { content: "\e037"; } .pui--pos .use-bootstrap .glyphicon-volume-up:before { content: "\e038"; } .pui--pos .use-bootstrap .glyphicon-qrcode:before { content: "\e039"; } .pui--pos .use-bootstrap .glyphicon-barcode:before { content: "\e040"; } .pui--pos .use-bootstrap .glyphicon-tag:before { content: "\e041"; } .pui--pos .use-bootstrap .glyphicon-tags:before { content: "\e042"; } .pui--pos .use-bootstrap .glyphicon-book:before { content: "\e043"; } .pui--pos .use-bootstrap .glyphicon-bookmark:before { content: "\e044"; } .pui--pos .use-bootstrap .glyphicon-print:before { content: "\e045"; } .pui--pos .use-bootstrap .glyphicon-camera:before { content: "\e046"; } .pui--pos .use-bootstrap .glyphicon-font:before { content: "\e047"; } .pui--pos .use-bootstrap .glyphicon-bold:before { content: "\e048"; } .pui--pos .use-bootstrap .glyphicon-italic:before { content: "\e049"; } .pui--pos .use-bootstrap .glyphicon-text-height:before { content: "\e050"; } .pui--pos .use-bootstrap .glyphicon-text-width:before { content: "\e051"; } .pui--pos .use-bootstrap .glyphicon-align-left:before { content: "\e052"; } .pui--pos .use-bootstrap .glyphicon-align-center:before { content: "\e053"; } .pui--pos .use-bootstrap .glyphicon-align-right:before { content: "\e054"; } .pui--pos .use-bootstrap .glyphicon-align-justify:before { content: "\e055"; } .pui--pos .use-bootstrap .glyphicon-list:before { content: "\e056"; } .pui--pos .use-bootstrap .glyphicon-indent-left:before { content: "\e057"; } .pui--pos .use-bootstrap .glyphicon-indent-right:before { content: "\e058"; } .pui--pos .use-bootstrap .glyphicon-facetime-video:before { content: "\e059"; } .pui--pos .use-bootstrap .glyphicon-picture:before { content: "\e060"; } .pui--pos .use-bootstrap .glyphicon-map-marker:before { content: "\e062"; } .pui--pos .use-bootstrap .glyphicon-adjust:before { content: "\e063"; } .pui--pos .use-bootstrap .glyphicon-tint:before { content: "\e064"; } .pui--pos .use-bootstrap .glyphicon-edit:before { content: "\e065"; } .pui--pos .use-bootstrap .glyphicon-share:before { content: "\e066"; } .pui--pos .use-bootstrap .glyphicon-check:before { content: "\e067"; } .pui--pos .use-bootstrap .glyphicon-move:before { content: "\e068"; } .pui--pos .use-bootstrap .glyphicon-step-backward:before { content: "\e069"; } .pui--pos .use-bootstrap .glyphicon-fast-backward:before { content: "\e070"; } .pui--pos .use-bootstrap .glyphicon-backward:before { content: "\e071"; } .pui--pos .use-bootstrap .glyphicon-play:before { content: "\e072"; } .pui--pos .use-bootstrap .glyphicon-pause:before { content: "\e073"; } .pui--pos .use-bootstrap .glyphicon-stop:before { content: "\e074"; } .pui--pos .use-bootstrap .glyphicon-forward:before { content: "\e075"; } .pui--pos .use-bootstrap .glyphicon-fast-forward:before { content: "\e076"; } .pui--pos .use-bootstrap .glyphicon-step-forward:before { content: "\e077"; } .pui--pos .use-bootstrap .glyphicon-eject:before { content: "\e078"; } .pui--pos .use-bootstrap .glyphicon-chevron-left:before { content: "\e079"; } .pui--pos .use-bootstrap .glyphicon-chevron-right:before { content: "\e080"; } .pui--pos .use-bootstrap .glyphicon-plus-sign:before { content: "\e081"; } .pui--pos .use-bootstrap .glyphicon-minus-sign:before { content: "\e082"; } .pui--pos .use-bootstrap .glyphicon-remove-sign:before { content: "\e083"; } .pui--pos .use-bootstrap .glyphicon-ok-sign:before { content: "\e084"; } .pui--pos .use-bootstrap .glyphicon-question-sign:before { content: "\e085"; } .pui--pos .use-bootstrap .glyphicon-info-sign:before { content: "\e086"; } .pui--pos .use-bootstrap .glyphicon-screenshot:before { content: "\e087"; } .pui--pos .use-bootstrap .glyphicon-remove-circle:before { content: "\e088"; } .pui--pos .use-bootstrap .glyphicon-ok-circle:before { content: "\e089"; } .pui--pos .use-bootstrap .glyphicon-ban-circle:before { content: "\e090"; } .pui--pos .use-bootstrap .glyphicon-arrow-left:before { content: "\e091"; } .pui--pos .use-bootstrap .glyphicon-arrow-right:before { content: "\e092"; } .pui--pos .use-bootstrap .glyphicon-arrow-up:before { content: "\e093"; } .pui--pos .use-bootstrap .glyphicon-arrow-down:before { content: "\e094"; } .pui--pos .use-bootstrap .glyphicon-share-alt:before { content: "\e095"; } .pui--pos .use-bootstrap .glyphicon-resize-full:before { content: "\e096"; } .pui--pos .use-bootstrap .glyphicon-resize-small:before { content: "\e097"; } .pui--pos .use-bootstrap .glyphicon-exclamation-sign:before { content: "\e101"; } .pui--pos .use-bootstrap .glyphicon-gift:before { content: "\e102"; } .pui--pos .use-bootstrap .glyphicon-leaf:before { content: "\e103"; } .pui--pos .use-bootstrap .glyphicon-fire:before { content: "\e104"; } .pui--pos .use-bootstrap .glyphicon-eye-open:before { content: "\e105"; } .pui--pos .use-bootstrap .glyphicon-eye-close:before { content: "\e106"; } .pui--pos .use-bootstrap .glyphicon-warning-sign:before { content: "\e107"; } .pui--pos .use-bootstrap .glyphicon-plane:before { content: "\e108"; } .pui--pos .use-bootstrap .glyphicon-calendar:before { content: "\e109"; } .pui--pos .use-bootstrap .glyphicon-random:before { content: "\e110"; } .pui--pos .use-bootstrap .glyphicon-comment:before { content: "\e111"; } .pui--pos .use-bootstrap .glyphicon-magnet:before { content: "\e112"; } .pui--pos .use-bootstrap .glyphicon-chevron-up:before { content: "\e113"; } .pui--pos .use-bootstrap .glyphicon-chevron-down:before { content: "\e114"; } .pui--pos .use-bootstrap .glyphicon-retweet:before { content: "\e115"; } .pui--pos .use-bootstrap .glyphicon-shopping-cart:before { content: "\e116"; } .pui--pos .use-bootstrap .glyphicon-folder-close:before { content: "\e117"; } .pui--pos .use-bootstrap .glyphicon-folder-open:before { content: "\e118"; } .pui--pos .use-bootstrap .glyphicon-resize-vertical:before { content: "\e119"; } .pui--pos .use-bootstrap .glyphicon-resize-horizontal:before { content: "\e120"; } .pui--pos .use-bootstrap .glyphicon-hdd:before { content: "\e121"; } .pui--pos .use-bootstrap .glyphicon-bullhorn:before { content: "\e122"; } .pui--pos .use-bootstrap .glyphicon-bell:before { content: "\e123"; } .pui--pos .use-bootstrap .glyphicon-certificate:before { content: "\e124"; } .pui--pos .use-bootstrap .glyphicon-thumbs-up:before { content: "\e125"; } .pui--pos .use-bootstrap .glyphicon-thumbs-down:before { content: "\e126"; } .pui--pos .use-bootstrap .glyphicon-hand-right:before { content: "\e127"; } .pui--pos .use-bootstrap .glyphicon-hand-left:before { content: "\e128"; } .pui--pos .use-bootstrap .glyphicon-hand-up:before { content: "\e129"; } .pui--pos .use-bootstrap .glyphicon-hand-down:before { content: "\e130"; } .pui--pos .use-bootstrap .glyphicon-circle-arrow-right:before { content: "\e131"; } .pui--pos .use-bootstrap .glyphicon-circle-arrow-left:before { content: "\e132"; } .pui--pos .use-bootstrap .glyphicon-circle-arrow-up:before { content: "\e133"; } .pui--pos .use-bootstrap .glyphicon-circle-arrow-down:before { content: "\e134"; } .pui--pos .use-bootstrap .glyphicon-globe:before { content: "\e135"; } .pui--pos .use-bootstrap .glyphicon-wrench:before { content: "\e136"; } .pui--pos .use-bootstrap .glyphicon-tasks:before { content: "\e137"; } .pui--pos .use-bootstrap .glyphicon-filter:before { content: "\e138"; } .pui--pos .use-bootstrap .glyphicon-briefcase:before { content: "\e139"; } .pui--pos .use-bootstrap .glyphicon-fullscreen:before { content: "\e140"; } .pui--pos .use-bootstrap .glyphicon-dashboard:before { content: "\e141"; } .pui--pos .use-bootstrap .glyphicon-paperclip:before { content: "\e142"; } .pui--pos .use-bootstrap .glyphicon-heart-empty:before { content: "\e143"; } .pui--pos .use-bootstrap .glyphicon-link:before { content: "\e144"; } .pui--pos .use-bootstrap .glyphicon-phone:before { content: "\e145"; } .pui--pos .use-bootstrap .glyphicon-pushpin:before { content: "\e146"; } .pui--pos .use-bootstrap .glyphicon-usd:before { content: "\e148"; } .pui--pos .use-bootstrap .glyphicon-gbp:before { content: "\e149"; } .pui--pos .use-bootstrap .glyphicon-sort:before { content: "\e150"; } .pui--pos .use-bootstrap .glyphicon-sort-by-alphabet:before { content: "\e151"; } .pui--pos .use-bootstrap .glyphicon-sort-by-alphabet-alt:before { content: "\e152"; } .pui--pos .use-bootstrap .glyphicon-sort-by-order:before { content: "\e153"; } .pui--pos .use-bootstrap .glyphicon-sort-by-order-alt:before { content: "\e154"; } .pui--pos .use-bootstrap .glyphicon-sort-by-attributes:before { content: "\e155"; } .pui--pos .use-bootstrap .glyphicon-sort-by-attributes-alt:before { content: "\e156"; } .pui--pos .use-bootstrap .glyphicon-unchecked:before { content: "\e157"; } .pui--pos .use-bootstrap .glyphicon-expand:before { content: "\e158"; } .pui--pos .use-bootstrap .glyphicon-collapse-down:before { content: "\e159"; } .pui--pos .use-bootstrap .glyphicon-collapse-up:before { content: "\e160"; } .pui--pos .use-bootstrap .glyphicon-log-in:before { content: "\e161"; } .pui--pos .use-bootstrap .glyphicon-flash:before { content: "\e162"; } .pui--pos .use-bootstrap .glyphicon-log-out:before { content: "\e163"; } .pui--pos .use-bootstrap .glyphicon-new-window:before { content: "\e164"; } .pui--pos .use-bootstrap .glyphicon-record:before { content: "\e165"; } .pui--pos .use-bootstrap .glyphicon-save:before { content: "\e166"; } .pui--pos .use-bootstrap .glyphicon-open:before { content: "\e167"; } .pui--pos .use-bootstrap .glyphicon-saved:before { content: "\e168"; } .pui--pos .use-bootstrap .glyphicon-import:before { content: "\e169"; } .pui--pos .use-bootstrap .glyphicon-export:before { content: "\e170"; } .pui--pos .use-bootstrap .glyphicon-send:before { content: "\e171"; } .pui--pos .use-bootstrap .glyphicon-floppy-disk:before { content: "\e172"; } .pui--pos .use-bootstrap .glyphicon-floppy-saved:before { content: "\e173"; } .pui--pos .use-bootstrap .glyphicon-floppy-remove:before { content: "\e174"; } .pui--pos .use-bootstrap .glyphicon-floppy-save:before { content: "\e175"; } .pui--pos .use-bootstrap .glyphicon-floppy-open:before { content: "\e176"; } .pui--pos .use-bootstrap .glyphicon-credit-card:before { content: "\e177"; } .pui--pos .use-bootstrap .glyphicon-transfer:before { content: "\e178"; } .pui--pos .use-bootstrap .glyphicon-cutlery:before { content: "\e179"; } .pui--pos .use-bootstrap .glyphicon-header:before { content: "\e180"; } .pui--pos .use-bootstrap .glyphicon-compressed:before { content: "\e181"; } .pui--pos .use-bootstrap .glyphicon-earphone:before { content: "\e182"; } .pui--pos .use-bootstrap .glyphicon-phone-alt:before { content: "\e183"; } .pui--pos .use-bootstrap .glyphicon-tower:before { content: "\e184"; } .pui--pos .use-bootstrap .glyphicon-stats:before { content: "\e185"; } .pui--pos .use-bootstrap .glyphicon-sd-video:before { content: "\e186"; } .pui--pos .use-bootstrap .glyphicon-hd-video:before { content: "\e187"; } .pui--pos .use-bootstrap .glyphicon-subtitles:before { content: "\e188"; } .pui--pos .use-bootstrap .glyphicon-sound-stereo:before { content: "\e189"; } .pui--pos .use-bootstrap .glyphicon-sound-dolby:before { content: "\e190"; } .pui--pos .use-bootstrap .glyphicon-sound-5-1:before { content: "\e191"; } .pui--pos .use-bootstrap .glyphicon-sound-6-1:before { content: "\e192"; } .pui--pos .use-bootstrap .glyphicon-sound-7-1:before { content: "\e193"; } .pui--pos .use-bootstrap .glyphicon-copyright-mark:before { content: "\e194"; } .pui--pos .use-bootstrap .glyphicon-registration-mark:before { content: "\e195"; } .pui--pos .use-bootstrap .glyphicon-cloud-download:before { content: "\e197"; } .pui--pos .use-bootstrap .glyphicon-cloud-upload:before { content: "\e198"; } .pui--pos .use-bootstrap .glyphicon-tree-conifer:before { content: "\e199"; } .pui--pos .use-bootstrap .glyphicon-tree-deciduous:before { content: "\e200"; } .pui--pos .use-bootstrap .glyphicon-cd:before { content: "\e201"; } .pui--pos .use-bootstrap .glyphicon-save-file:before { content: "\e202"; } .pui--pos .use-bootstrap .glyphicon-open-file:before { content: "\e203"; } .pui--pos .use-bootstrap .glyphicon-level-up:before { content: "\e204"; } .pui--pos .use-bootstrap .glyphicon-copy:before { content: "\e205"; } .pui--pos .use-bootstrap .glyphicon-paste:before { content: "\e206"; } .pui--pos .use-bootstrap .glyphicon-alert:before { content: "\e209"; } .pui--pos .use-bootstrap .glyphicon-equalizer:before { content: "\e210"; } .pui--pos .use-bootstrap .glyphicon-king:before { content: "\e211"; } .pui--pos .use-bootstrap .glyphicon-queen:before { content: "\e212"; } .pui--pos .use-bootstrap .glyphicon-pawn:before { content: "\e213"; } .pui--pos .use-bootstrap .glyphicon-bishop:before { content: "\e214"; } .pui--pos .use-bootstrap .glyphicon-knight:before { content: "\e215"; } .pui--pos .use-bootstrap .glyphicon-baby-formula:before { content: "\e216"; } .pui--pos .use-bootstrap .glyphicon-tent:before { content: "⛺"; } .pui--pos .use-bootstrap .glyphicon-blackboard:before { content: "\e218"; } .pui--pos .use-bootstrap .glyphicon-bed:before { content: "\e219"; } .pui--pos .use-bootstrap .glyphicon-apple:before { content: "\f8ff"; } .pui--pos .use-bootstrap .glyphicon-erase:before { content: "\e221"; } .pui--pos .use-bootstrap .glyphicon-hourglass:before { content: "⌛"; } .pui--pos .use-bootstrap .glyphicon-lamp:before { content: "\e223"; } .pui--pos .use-bootstrap .glyphicon-duplicate:before { content: "\e224"; } .pui--pos .use-bootstrap .glyphicon-piggy-bank:before { content: "\e225"; } .pui--pos .use-bootstrap .glyphicon-scissors:before { content: "\e226"; } .pui--pos .use-bootstrap .glyphicon-bitcoin:before { content: "\e227"; } .pui--pos .use-bootstrap .glyphicon-btc:before { content: "\e227"; } .pui--pos .use-bootstrap .glyphicon-xbt:before { content: "\e227"; } .pui--pos .use-bootstrap .glyphicon-yen:before { content: "¥"; } .pui--pos .use-bootstrap .glyphicon-jpy:before { content: "¥"; } .pui--pos .use-bootstrap .glyphicon-ruble:before { content: "₽"; } .pui--pos .use-bootstrap .glyphicon-rub:before { content: "₽"; } .pui--pos .use-bootstrap .glyphicon-scale:before { content: "\e230"; } .pui--pos .use-bootstrap .glyphicon-ice-lolly:before { content: "\e231"; } .pui--pos .use-bootstrap .glyphicon-ice-lolly-tasted:before { content: "\e232"; } .pui--pos .use-bootstrap .glyphicon-education:before { content: "\e233"; } .pui--pos .use-bootstrap .glyphicon-option-horizontal:before { content: "\e234"; } .pui--pos .use-bootstrap .glyphicon-option-vertical:before { content: "\e235"; } .pui--pos .use-bootstrap .glyphicon-menu-hamburger:before { content: "\e236"; } .pui--pos .use-bootstrap .glyphicon-modal-window:before { content: "\e237"; } .pui--pos .use-bootstrap .glyphicon-oil:before { content: "\e238"; } .pui--pos .use-bootstrap .glyphicon-grain:before { content: "\e239"; } .pui--pos .use-bootstrap .glyphicon-sunglasses:before { content: "\e240"; } .pui--pos .use-bootstrap .glyphicon-text-size:before { content: "\e241"; } .pui--pos .use-bootstrap .glyphicon-text-color:before { content: "\e242"; } .pui--pos .use-bootstrap .glyphicon-text-background:before { content: "\e243"; } .pui--pos .use-bootstrap .glyphicon-object-align-top:before { content: "\e244"; } .pui--pos .use-bootstrap .glyphicon-object-align-bottom:before { content: "\e245"; } .pui--pos .use-bootstrap .glyphicon-object-align-horizontal:before { content: "\e246"; } .pui--pos .use-bootstrap .glyphicon-object-align-left:before { content: "\e247"; } .pui--pos .use-bootstrap .glyphicon-object-align-vertical:before { content: "\e248"; } .pui--pos .use-bootstrap .glyphicon-object-align-right:before { content: "\e249"; } .pui--pos .use-bootstrap .glyphicon-triangle-right:before { content: "\e250"; } .pui--pos .use-bootstrap .glyphicon-triangle-left:before { content: "\e251"; } .pui--pos .use-bootstrap .glyphicon-triangle-bottom:before { content: "\e252"; } .pui--pos .use-bootstrap .glyphicon-triangle-top:before { content: "\e253"; } .pui--pos .use-bootstrap .glyphicon-console:before { content: "\e254"; } .pui--pos .use-bootstrap .glyphicon-superscript:before { content: "\e255"; } .pui--pos .use-bootstrap .glyphicon-subscript:before { content: "\e256"; } .pui--pos .use-bootstrap .glyphicon-menu-left:before { content: "\e257"; } .pui--pos .use-bootstrap .glyphicon-menu-right:before { content: "\e258"; } .pui--pos .use-bootstrap .glyphicon-menu-down:before { content: "\e259"; } .pui--pos .use-bootstrap .glyphicon-menu-up:before { content: "\e260"; } .pui--pos .use-bootstrap * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .pui--pos .use-bootstrap *:before, .pui--pos .use-bootstrap *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .pui--pos .use-bootstrap html { font-size: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .pui--pos .use-bootstrap body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; } .pui--pos .use-bootstrap input, .pui--pos .use-bootstrap button, .pui--pos .use-bootstrap select, .pui--pos .use-bootstrap textarea { font-family: inherit; font-size: inherit; line-height: inherit; } .pui--pos .use-bootstrap a { color: #337ab7; text-decoration: none; } .pui--pos .use-bootstrap a:hover, .pui--pos .use-bootstrap a:focus { color: #23527c; text-decoration: underline; } .pui--pos .use-bootstrap a:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .pui--pos .use-bootstrap figure { margin: 0; } .pui--pos .use-bootstrap img { vertical-align: middle; } .pui--pos .use-bootstrap .img-responsive, .pui--pos .use-bootstrap .thumbnail > img, .pui--pos .use-bootstrap .thumbnail a > img, .pui--pos .use-bootstrap .carousel-inner > .item > img, .pui--pos .use-bootstrap .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; } .pui--pos .use-bootstrap .img-rounded { border-radius: 6px; } .pui--pos .use-bootstrap .img-thumbnail { display: inline-block; max-width: 100%; height: auto; padding: 4px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .pui--pos .use-bootstrap .img-circle { border-radius: 50%; } .pui--pos .use-bootstrap hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee; } .pui--pos .use-bootstrap .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .pui--pos .use-bootstrap .sr-only-focusable:active, .pui--pos .use-bootstrap .sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } .pui--pos .use-bootstrap [role=button] { cursor: pointer; } .pui--pos .use-bootstrap h1, .pui--pos .use-bootstrap h2, .pui--pos .use-bootstrap h3, .pui--pos .use-bootstrap h4, .pui--pos .use-bootstrap h5, .pui--pos .use-bootstrap h6, .pui--pos .use-bootstrap .h1, .pui--pos .use-bootstrap .h2, .pui--pos .use-bootstrap .h3, .pui--pos .use-bootstrap .h4, .pui--pos .use-bootstrap .h5, .pui--pos .use-bootstrap .h6 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } .pui--pos .use-bootstrap h1 small, .pui--pos .use-bootstrap h2 small, .pui--pos .use-bootstrap h3 small, .pui--pos .use-bootstrap h4 small, .pui--pos .use-bootstrap h5 small, .pui--pos .use-bootstrap h6 small, .pui--pos .use-bootstrap .h1 small, .pui--pos .use-bootstrap .h2 small, .pui--pos .use-bootstrap .h3 small, .pui--pos .use-bootstrap .h4 small, .pui--pos .use-bootstrap .h5 small, .pui--pos .use-bootstrap .h6 small, .pui--pos .use-bootstrap h1 .small, .pui--pos .use-bootstrap h2 .small, .pui--pos .use-bootstrap h3 .small, .pui--pos .use-bootstrap h4 .small, .pui--pos .use-bootstrap h5 .small, .pui--pos .use-bootstrap h6 .small, .pui--pos .use-bootstrap .h1 .small, .pui--pos .use-bootstrap .h2 .small, .pui--pos .use-bootstrap .h3 .small, .pui--pos .use-bootstrap .h4 .small, .pui--pos .use-bootstrap .h5 .small, .pui--pos .use-bootstrap .h6 .small { font-weight: normal; line-height: 1; color: #777; } .pui--pos .use-bootstrap h1, .pui--pos .use-bootstrap .h1, .pui--pos .use-bootstrap h2, .pui--pos .use-bootstrap .h2, .pui--pos .use-bootstrap h3, .pui--pos .use-bootstrap .h3 { margin-top: 20px; margin-bottom: 10px; } .pui--pos .use-bootstrap h1 small, .pui--pos .use-bootstrap .h1 small, .pui--pos .use-bootstrap h2 small, .pui--pos .use-bootstrap .h2 small, .pui--pos .use-bootstrap h3 small, .pui--pos .use-bootstrap .h3 small, .pui--pos .use-bootstrap h1 .small, .pui--pos .use-bootstrap .h1 .small, .pui--pos .use-bootstrap h2 .small, .pui--pos .use-bootstrap .h2 .small, .pui--pos .use-bootstrap h3 .small, .pui--pos .use-bootstrap .h3 .small { font-size: 65%; } .pui--pos .use-bootstrap h4, .pui--pos .use-bootstrap .h4, .pui--pos .use-bootstrap h5, .pui--pos .use-bootstrap .h5, .pui--pos .use-bootstrap h6, .pui--pos .use-bootstrap .h6 { margin-top: 10px; margin-bottom: 10px; } .pui--pos .use-bootstrap h4 small, .pui--pos .use-bootstrap .h4 small, .pui--pos .use-bootstrap h5 small, .pui--pos .use-bootstrap .h5 small, .pui--pos .use-bootstrap h6 small, .pui--pos .use-bootstrap .h6 small, .pui--pos .use-bootstrap h4 .small, .pui--pos .use-bootstrap .h4 .small, .pui--pos .use-bootstrap h5 .small, .pui--pos .use-bootstrap .h5 .small, .pui--pos .use-bootstrap h6 .small, .pui--pos .use-bootstrap .h6 .small { font-size: 75%; } .pui--pos .use-bootstrap h1, .pui--pos .use-bootstrap .h1 { font-size: 36px; } .pui--pos .use-bootstrap h2, .pui--pos .use-bootstrap .h2 { font-size: 30px; } .pui--pos .use-bootstrap h3, .pui--pos .use-bootstrap .h3 { font-size: 24px; } .pui--pos .use-bootstrap h4, .pui--pos .use-bootstrap .h4 { font-size: 18px; } .pui--pos .use-bootstrap h5, .pui--pos .use-bootstrap .h5 { font-size: 14px; } .pui--pos .use-bootstrap h6, .pui--pos .use-bootstrap .h6 { font-size: 12px; } .pui--pos .use-bootstrap p { margin: 0 0 10px; } .pui--pos .use-bootstrap .lead { margin-bottom: 20px; font-size: 16px; font-weight: 300; line-height: 1.4; } @media (min-width: 768px) { .pui--pos .use-bootstrap .lead { font-size: 21px; } } .pui--pos .use-bootstrap small, .pui--pos .use-bootstrap .small { font-size: 85%; } .pui--pos .use-bootstrap mark, .pui--pos .use-bootstrap .mark { padding: 0.2em; background-color: #fcf8e3; } .pui--pos .use-bootstrap .text-left { text-align: left; } .pui--pos .use-bootstrap .text-right { text-align: right; } .pui--pos .use-bootstrap .text-center { text-align: center; } .pui--pos .use-bootstrap .text-justify { text-align: justify; } .pui--pos .use-bootstrap .text-nowrap { white-space: nowrap; } .pui--pos .use-bootstrap .text-lowercase { text-transform: lowercase; } .pui--pos .use-bootstrap .text-uppercase { text-transform: uppercase; } .pui--pos .use-bootstrap .text-capitalize { text-transform: capitalize; } .pui--pos .use-bootstrap .text-muted { color: #777; } .pui--pos .use-bootstrap .text-primary { color: #337ab7; } .pui--pos .use-bootstrap a.text-primary:hover, .pui--pos .use-bootstrap a.text-primary:focus { color: #286090; } .pui--pos .use-bootstrap .text-success { color: #3c763d; } .pui--pos .use-bootstrap a.text-success:hover, .pui--pos .use-bootstrap a.text-success:focus { color: #2b542c; } .pui--pos .use-bootstrap .text-info { color: #31708f; } .pui--pos .use-bootstrap a.text-info:hover, .pui--pos .use-bootstrap a.text-info:focus { color: #245269; } .pui--pos .use-bootstrap .text-warning { color: #8a6d3b; } .pui--pos .use-bootstrap a.text-warning:hover, .pui--pos .use-bootstrap a.text-warning:focus { color: #66512c; } .pui--pos .use-bootstrap .text-danger { color: #a94442; } .pui--pos .use-bootstrap a.text-danger:hover, .pui--pos .use-bootstrap a.text-danger:focus { color: #843534; } .pui--pos .use-bootstrap .bg-primary { color: #fff; background-color: #337ab7; } .pui--pos .use-bootstrap a.bg-primary:hover, .pui--pos .use-bootstrap a.bg-primary:focus { background-color: #286090; } .pui--pos .use-bootstrap .bg-success { background-color: #dff0d8; } .pui--pos .use-bootstrap a.bg-success:hover, .pui--pos .use-bootstrap a.bg-success:focus { background-color: #c1e2b3; } .pui--pos .use-bootstrap .bg-info { background-color: #d9edf7; } .pui--pos .use-bootstrap a.bg-info:hover, .pui--pos .use-bootstrap a.bg-info:focus { background-color: #afd9ee; } .pui--pos .use-bootstrap .bg-warning { background-color: #fcf8e3; } .pui--pos .use-bootstrap a.bg-warning:hover, .pui--pos .use-bootstrap a.bg-warning:focus { background-color: #f7ecb5; } .pui--pos .use-bootstrap .bg-danger { background-color: #f2dede; } .pui--pos .use-bootstrap a.bg-danger:hover, .pui--pos .use-bootstrap a.bg-danger:focus { background-color: #e4b9b9; } .pui--pos .use-bootstrap .page-header { padding-bottom: 9px; margin: 40px 0 20px; border-bottom: 1px solid #eee; } .pui--pos .use-bootstrap ul, .pui--pos .use-bootstrap ol { margin-top: 0; margin-bottom: 10px; } .pui--pos .use-bootstrap ul ul, .pui--pos .use-bootstrap ol ul, .pui--pos .use-bootstrap ul ol, .pui--pos .use-bootstrap ol ol { margin-bottom: 0; } .pui--pos .use-bootstrap .list-unstyled { padding-left: 0; list-style: none; } .pui--pos .use-bootstrap .list-inline { padding-left: 0; margin-left: -5px; list-style: none; } .pui--pos .use-bootstrap .list-inline > li { display: inline-block; padding-right: 5px; padding-left: 5px; } .pui--pos .use-bootstrap dl { margin-top: 0; margin-bottom: 20px; } .pui--pos .use-bootstrap dt, .pui--pos .use-bootstrap dd { line-height: 1.42857143; } .pui--pos .use-bootstrap dt { font-weight: bold; } .pui--pos .use-bootstrap dd { margin-left: 0; } @media (min-width: 768px) { .pui--pos .use-bootstrap .dl-horizontal dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .pui--pos .use-bootstrap .dl-horizontal dd { margin-left: 180px; } } .pui--pos .use-bootstrap abbr[title], .pui--pos .use-bootstrap abbr[data-original-title] { cursor: help; border-bottom: 1px dotted #777; } .pui--pos .use-bootstrap .initialism { font-size: 90%; text-transform: uppercase; } .pui--pos .use-bootstrap blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eee; } .pui--pos .use-bootstrap blockquote p:last-child, .pui--pos .use-bootstrap blockquote ul:last-child, .pui--pos .use-bootstrap blockquote ol:last-child { margin-bottom: 0; } .pui--pos .use-bootstrap blockquote footer, .pui--pos .use-bootstrap blockquote small, .pui--pos .use-bootstrap blockquote .small { display: block; font-size: 80%; line-height: 1.42857143; color: #777; } .pui--pos .use-bootstrap blockquote footer:before, .pui--pos .use-bootstrap blockquote small:before, .pui--pos .use-bootstrap blockquote .small:before { content: "— "; } .pui--pos .use-bootstrap .blockquote-reverse, .pui--pos .use-bootstrap blockquote.pull-right, .pui--pos .use-bootstrap #aside .alert-dismissible blockquote.close, .pui--pos #aside .alert-dismissible .use-bootstrap blockquote.close { padding-right: 15px; padding-left: 0; text-align: right; border-right: 5px solid #eee; border-left: 0; } .pui--pos .use-bootstrap .blockquote-reverse footer:before, .pui--pos .use-bootstrap blockquote.pull-right footer:before, .pui--pos .use-bootstrap #aside .alert-dismissible blockquote.close footer:before, .pui--pos #aside .alert-dismissible .use-bootstrap blockquote.close footer:before, .pui--pos .use-bootstrap .blockquote-reverse small:before, .pui--pos .use-bootstrap blockquote.pull-right small:before, .pui--pos .use-bootstrap #aside .alert-dismissible blockquote.close small:before, .pui--pos #aside .alert-dismissible .use-bootstrap blockquote.close small:before, .pui--pos .use-bootstrap .blockquote-reverse .small:before, .pui--pos .use-bootstrap blockquote.pull-right .small:before, .pui--pos .use-bootstrap #aside .alert-dismissible blockquote.close .small:before, .pui--pos #aside .alert-dismissible .use-bootstrap blockquote.close .small:before { content: ""; } .pui--pos .use-bootstrap .blockquote-reverse footer:after, .pui--pos .use-bootstrap blockquote.pull-right footer:after, .pui--pos .use-bootstrap #aside .alert-dismissible blockquote.close footer:after, .pui--pos #aside .alert-dismissible .use-bootstrap blockquote.close footer:after, .pui--pos .use-bootstrap .blockquote-reverse small:after, .pui--pos .use-bootstrap blockquote.pull-right small:after, .pui--pos .use-bootstrap #aside .alert-dismissible blockquote.close small:after, .pui--pos #aside .alert-dismissible .use-bootstrap blockquote.close small:after, .pui--pos .use-bootstrap .blockquote-reverse .small:after, .pui--pos .use-bootstrap blockquote.pull-right .small:after, .pui--pos .use-bootstrap #aside .alert-dismissible blockquote.close .small:after, .pui--pos #aside .alert-dismissible .use-bootstrap blockquote.close .small:after { content: " —"; } .pui--pos .use-bootstrap address { margin-bottom: 20px; font-style: normal; line-height: 1.42857143; } .pui--pos .use-bootstrap code, .pui--pos .use-bootstrap kbd, .pui--pos .use-bootstrap pre, .pui--pos .use-bootstrap samp { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; } .pui--pos .use-bootstrap code { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; } .pui--pos .use-bootstrap kbd { padding: 2px 4px; font-size: 90%; color: #fff; background-color: #333; border-radius: 3px; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); } .pui--pos .use-bootstrap kbd kbd { padding: 0; font-size: 100%; font-weight: bold; -webkit-box-shadow: none; box-shadow: none; } .pui--pos .use-bootstrap pre { display: block; padding: 9.5px; margin: 0 0 10px; font-size: 13px; line-height: 1.42857143; color: #333; word-break: break-all; word-wrap: break-word; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; } .pui--pos .use-bootstrap pre code { padding: 0; font-size: inherit; color: inherit; white-space: pre-wrap; background-color: transparent; border-radius: 0; } .pui--pos .use-bootstrap .pre-scrollable { max-height: 340px; overflow-y: scroll; } .pui--pos .use-bootstrap .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .pui--pos .use-bootstrap .container { width: 750px; } } @media (min-width: 992px) { .pui--pos .use-bootstrap .container { width: 970px; } } @media (min-width: 1200px) { .pui--pos .use-bootstrap .container { width: 1170px; } } .pui--pos .use-bootstrap .container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .pui--pos .use-bootstrap .row { margin-right: -15px; margin-left: -15px; } .pui--pos .use-bootstrap .col-xs-1, .pui--pos .use-bootstrap .col-sm-1, .pui--pos .use-bootstrap .col-md-1, .pui--pos .use-bootstrap .col-lg-1, .pui--pos .use-bootstrap .col-xs-2, .pui--pos .use-bootstrap .col-sm-2, .pui--pos .use-bootstrap .col-md-2, .pui--pos .use-bootstrap .col-lg-2, .pui--pos .use-bootstrap .col-xs-3, .pui--pos .use-bootstrap .col-sm-3, .pui--pos .use-bootstrap .col-md-3, .pui--pos .use-bootstrap .col-lg-3, .pui--pos .use-bootstrap .col-xs-4, .pui--pos .use-bootstrap .col-sm-4, .pui--pos .use-bootstrap .col-md-4, .pui--pos .use-bootstrap .col-lg-4, .pui--pos .use-bootstrap .col-xs-5, .pui--pos .use-bootstrap .col-sm-5, .pui--pos .use-bootstrap .col-md-5, .pui--pos .use-bootstrap .col-lg-5, .pui--pos .use-bootstrap .col-xs-6, .pui--pos .use-bootstrap .col-sm-6, .pui--pos .use-bootstrap .col-md-6, .pui--pos .use-bootstrap .col-lg-6, .pui--pos .use-bootstrap .col-xs-7, .pui--pos .use-bootstrap .col-sm-7, .pui--pos .use-bootstrap .col-md-7, .pui--pos .use-bootstrap .col-lg-7, .pui--pos .use-bootstrap .col-xs-8, .pui--pos .use-bootstrap .col-sm-8, .pui--pos .use-bootstrap .col-md-8, .pui--pos .use-bootstrap .col-lg-8, .pui--pos .use-bootstrap .col-xs-9, .pui--pos .use-bootstrap .col-sm-9, .pui--pos .use-bootstrap .col-md-9, .pui--pos .use-bootstrap .col-lg-9, .pui--pos .use-bootstrap .col-xs-10, .pui--pos .use-bootstrap .col-sm-10, .pui--pos .use-bootstrap .col-md-10, .pui--pos .use-bootstrap .col-lg-10, .pui--pos .use-bootstrap .col-xs-11, .pui--pos .use-bootstrap .col-sm-11, .pui--pos .use-bootstrap .col-md-11, .pui--pos .use-bootstrap .col-lg-11, .pui--pos .use-bootstrap .col-xs-12, .pui--pos .use-bootstrap .col-sm-12, .pui--pos .use-bootstrap .col-md-12, .pui--pos .use-bootstrap .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .pui--pos .use-bootstrap .col-xs-1, .pui--pos .use-bootstrap .col-xs-2, .pui--pos .use-bootstrap .col-xs-3, .pui--pos .use-bootstrap .col-xs-4, .pui--pos .use-bootstrap .col-xs-5, .pui--pos .use-bootstrap .col-xs-6, .pui--pos .use-bootstrap .col-xs-7, .pui--pos .use-bootstrap .col-xs-8, .pui--pos .use-bootstrap .col-xs-9, .pui--pos .use-bootstrap .col-xs-10, .pui--pos .use-bootstrap .col-xs-11, .pui--pos .use-bootstrap .col-xs-12 { float: left; } .pui--pos .use-bootstrap .col-xs-12 { width: 100%; } .pui--pos .use-bootstrap .col-xs-11 { width: 91.66666667%; } .pui--pos .use-bootstrap .col-xs-10 { width: 83.33333333%; } .pui--pos .use-bootstrap .col-xs-9 { width: 75%; } .pui--pos .use-bootstrap .col-xs-8 { width: 66.66666667%; } .pui--pos .use-bootstrap .col-xs-7 { width: 58.33333333%; } .pui--pos .use-bootstrap .col-xs-6 { width: 50%; } .pui--pos .use-bootstrap .col-xs-5 { width: 41.66666667%; } .pui--pos .use-bootstrap .col-xs-4 { width: 33.33333333%; } .pui--pos .use-bootstrap .col-xs-3 { width: 25%; } .pui--pos .use-bootstrap .col-xs-2 { width: 16.66666667%; } .pui--pos .use-bootstrap .col-xs-1 { width: 8.33333333%; } .pui--pos .use-bootstrap .col-xs-pull-12 { right: 100%; } .pui--pos .use-bootstrap .col-xs-pull-11 { right: 91.66666667%; } .pui--pos .use-bootstrap .col-xs-pull-10 { right: 83.33333333%; } .pui--pos .use-bootstrap .col-xs-pull-9 { right: 75%; } .pui--pos .use-bootstrap .col-xs-pull-8 { right: 66.66666667%; } .pui--pos .use-bootstrap .col-xs-pull-7 { right: 58.33333333%; } .pui--pos .use-bootstrap .col-xs-pull-6 { right: 50%; } .pui--pos .use-bootstrap .col-xs-pull-5 { right: 41.66666667%; } .pui--pos .use-bootstrap .col-xs-pull-4 { right: 33.33333333%; } .pui--pos .use-bootstrap .col-xs-pull-3 { right: 25%; } .pui--pos .use-bootstrap .col-xs-pull-2 { right: 16.66666667%; } .pui--pos .use-bootstrap .col-xs-pull-1 { right: 8.33333333%; } .pui--pos .use-bootstrap .col-xs-pull-0 { right: auto; } .pui--pos .use-bootstrap .col-xs-push-12 { left: 100%; } .pui--pos .use-bootstrap .col-xs-push-11 { left: 91.66666667%; } .pui--pos .use-bootstrap .col-xs-push-10 { left: 83.33333333%; } .pui--pos .use-bootstrap .col-xs-push-9 { left: 75%; } .pui--pos .use-bootstrap .col-xs-push-8 { left: 66.66666667%; } .pui--pos .use-bootstrap .col-xs-push-7 { left: 58.33333333%; } .pui--pos .use-bootstrap .col-xs-push-6 { left: 50%; } .pui--pos .use-bootstrap .col-xs-push-5 { left: 41.66666667%; } .pui--pos .use-bootstrap .col-xs-push-4 { left: 33.33333333%; } .pui--pos .use-bootstrap .col-xs-push-3 { left: 25%; } .pui--pos .use-bootstrap .col-xs-push-2 { left: 16.66666667%; } .pui--pos .use-bootstrap .col-xs-push-1 { left: 8.33333333%; } .pui--pos .use-bootstrap .col-xs-push-0 { left: auto; } .pui--pos .use-bootstrap .col-xs-offset-12 { margin-left: 100%; } .pui--pos .use-bootstrap .col-xs-offset-11 { margin-left: 91.66666667%; } .pui--pos .use-bootstrap .col-xs-offset-10 { margin-left: 83.33333333%; } .pui--pos .use-bootstrap .col-xs-offset-9 { margin-left: 75%; } .pui--pos .use-bootstrap .col-xs-offset-8 { margin-left: 66.66666667%; } .pui--pos .use-bootstrap .col-xs-offset-7 { margin-left: 58.33333333%; } .pui--pos .use-bootstrap .col-xs-offset-6 { margin-left: 50%; } .pui--pos .use-bootstrap .col-xs-offset-5 { margin-left: 41.66666667%; } .pui--pos .use-bootstrap .col-xs-offset-4 { margin-left: 33.33333333%; } .pui--pos .use-bootstrap .col-xs-offset-3 { margin-left: 25%; } .pui--pos .use-bootstrap .col-xs-offset-2 { margin-left: 16.66666667%; } .pui--pos .use-bootstrap .col-xs-offset-1 { margin-left: 8.33333333%; } .pui--pos .use-bootstrap .col-xs-offset-0 { margin-left: 0; } @media (min-width: 768px) { .pui--pos .use-bootstrap .col-sm-1, .pui--pos .use-bootstrap .col-sm-2, .pui--pos .use-bootstrap .col-sm-3, .pui--pos .use-bootstrap .col-sm-4, .pui--pos .use-bootstrap .col-sm-5, .pui--pos .use-bootstrap .col-sm-6, .pui--pos .use-bootstrap .col-sm-7, .pui--pos .use-bootstrap .col-sm-8, .pui--pos .use-bootstrap .col-sm-9, .pui--pos .use-bootstrap .col-sm-10, .pui--pos .use-bootstrap .col-sm-11, .pui--pos .use-bootstrap .col-sm-12 { float: left; } .pui--pos .use-bootstrap .col-sm-12 { width: 100%; } .pui--pos .use-bootstrap .col-sm-11 { width: 91.66666667%; } .pui--pos .use-bootstrap .col-sm-10 { width: 83.33333333%; } .pui--pos .use-bootstrap .col-sm-9 { width: 75%; } .pui--pos .use-bootstrap .col-sm-8 { width: 66.66666667%; } .pui--pos .use-bootstrap .col-sm-7 { width: 58.33333333%; } .pui--pos .use-bootstrap .col-sm-6 { width: 50%; } .pui--pos .use-bootstrap .col-sm-5 { width: 41.66666667%; } .pui--pos .use-bootstrap .col-sm-4 { width: 33.33333333%; } .pui--pos .use-bootstrap .col-sm-3 { width: 25%; } .pui--pos .use-bootstrap .col-sm-2 { width: 16.66666667%; } .pui--pos .use-bootstrap .col-sm-1 { width: 8.33333333%; } .pui--pos .use-bootstrap .col-sm-pull-12 { right: 100%; } .pui--pos .use-bootstrap .col-sm-pull-11 { right: 91.66666667%; } .pui--pos .use-bootstrap .col-sm-pull-10 { right: 83.33333333%; } .pui--pos .use-bootstrap .col-sm-pull-9 { right: 75%; } .pui--pos .use-bootstrap .col-sm-pull-8 { right: 66.66666667%; } .pui--pos .use-bootstrap .col-sm-pull-7 { right: 58.33333333%; } .pui--pos .use-bootstrap .col-sm-pull-6 { right: 50%; } .pui--pos .use-bootstrap .col-sm-pull-5 { right: 41.66666667%; } .pui--pos .use-bootstrap .col-sm-pull-4 { right: 33.33333333%; } .pui--pos .use-bootstrap .col-sm-pull-3 { right: 25%; } .pui--pos .use-bootstrap .col-sm-pull-2 { right: 16.66666667%; } .pui--pos .use-bootstrap .col-sm-pull-1 { right: 8.33333333%; } .pui--pos .use-bootstrap .col-sm-pull-0 { right: auto; } .pui--pos .use-bootstrap .col-sm-push-12 { left: 100%; } .pui--pos .use-bootstrap .col-sm-push-11 { left: 91.66666667%; } .pui--pos .use-bootstrap .col-sm-push-10 { left: 83.33333333%; } .pui--pos .use-bootstrap .col-sm-push-9 { left: 75%; } .pui--pos .use-bootstrap .col-sm-push-8 { left: 66.66666667%; } .pui--pos .use-bootstrap .col-sm-push-7 { left: 58.33333333%; } .pui--pos .use-bootstrap .col-sm-push-6 { left: 50%; } .pui--pos .use-bootstrap .col-sm-push-5 { left: 41.66666667%; } .pui--pos .use-bootstrap .col-sm-push-4 { left: 33.33333333%; } .pui--pos .use-bootstrap .col-sm-push-3 { left: 25%; } .pui--pos .use-bootstrap .col-sm-push-2 { left: 16.66666667%; } .pui--pos .use-bootstrap .col-sm-push-1 { left: 8.33333333%; } .pui--pos .use-bootstrap .col-sm-push-0 { left: auto; } .pui--pos .use-bootstrap .col-sm-offset-12 { margin-left: 100%; } .pui--pos .use-bootstrap .col-sm-offset-11 { margin-left: 91.66666667%; } .pui--pos .use-bootstrap .col-sm-offset-10 { margin-left: 83.33333333%; } .pui--pos .use-bootstrap .col-sm-offset-9 { margin-left: 75%; } .pui--pos .use-bootstrap .col-sm-offset-8 { margin-left: 66.66666667%; } .pui--pos .use-bootstrap .col-sm-offset-7 { margin-left: 58.33333333%; } .pui--pos .use-bootstrap .col-sm-offset-6 { margin-left: 50%; } .pui--pos .use-bootstrap .col-sm-offset-5 { margin-left: 41.66666667%; } .pui--pos .use-bootstrap .col-sm-offset-4 { margin-left: 33.33333333%; } .pui--pos .use-bootstrap .col-sm-offset-3 { margin-left: 25%; } .pui--pos .use-bootstrap .col-sm-offset-2 { margin-left: 16.66666667%; } .pui--pos .use-bootstrap .col-sm-offset-1 { margin-left: 8.33333333%; } .pui--pos .use-bootstrap .col-sm-offset-0 { margin-left: 0; } } @media (min-width: 992px) { .pui--pos .use-bootstrap .col-md-1, .pui--pos .use-bootstrap .col-md-2, .pui--pos .use-bootstrap .col-md-3, .pui--pos .use-bootstrap .col-md-4, .pui--pos .use-bootstrap .col-md-5, .pui--pos .use-bootstrap .col-md-6, .pui--pos .use-bootstrap .col-md-7, .pui--pos .use-bootstrap .col-md-8, .pui--pos .use-bootstrap .col-md-9, .pui--pos .use-bootstrap .col-md-10, .pui--pos .use-bootstrap .col-md-11, .pui--pos .use-bootstrap .col-md-12 { float: left; } .pui--pos .use-bootstrap .col-md-12 { width: 100%; } .pui--pos .use-bootstrap .col-md-11 { width: 91.66666667%; } .pui--pos .use-bootstrap .col-md-10 { width: 83.33333333%; } .pui--pos .use-bootstrap .col-md-9 { width: 75%; } .pui--pos .use-bootstrap .col-md-8 { width: 66.66666667%; } .pui--pos .use-bootstrap .col-md-7 { width: 58.33333333%; } .pui--pos .use-bootstrap .col-md-6 { width: 50%; } .pui--pos .use-bootstrap .col-md-5 { width: 41.66666667%; } .pui--pos .use-bootstrap .col-md-4 { width: 33.33333333%; } .pui--pos .use-bootstrap .col-md-3 { width: 25%; } .pui--pos .use-bootstrap .col-md-2 { width: 16.66666667%; } .pui--pos .use-bootstrap .col-md-1 { width: 8.33333333%; } .pui--pos .use-bootstrap .col-md-pull-12 { right: 100%; } .pui--pos .use-bootstrap .col-md-pull-11 { right: 91.66666667%; } .pui--pos .use-bootstrap .col-md-pull-10 { right: 83.33333333%; } .pui--pos .use-bootstrap .col-md-pull-9 { right: 75%; } .pui--pos .use-bootstrap .col-md-pull-8 { right: 66.66666667%; } .pui--pos .use-bootstrap .col-md-pull-7 { right: 58.33333333%; } .pui--pos .use-bootstrap .col-md-pull-6 { right: 50%; } .pui--pos .use-bootstrap .col-md-pull-5 { right: 41.66666667%; } .pui--pos .use-bootstrap .col-md-pull-4 { right: 33.33333333%; } .pui--pos .use-bootstrap .col-md-pull-3 { right: 25%; } .pui--pos .use-bootstrap .col-md-pull-2 { right: 16.66666667%; } .pui--pos .use-bootstrap .col-md-pull-1 { right: 8.33333333%; } .pui--pos .use-bootstrap .col-md-pull-0 { right: auto; } .pui--pos .use-bootstrap .col-md-push-12 { left: 100%; } .pui--pos .use-bootstrap .col-md-push-11 { left: 91.66666667%; } .pui--pos .use-bootstrap .col-md-push-10 { left: 83.33333333%; } .pui--pos .use-bootstrap .col-md-push-9 { left: 75%; } .pui--pos .use-bootstrap .col-md-push-8 { left: 66.66666667%; } .pui--pos .use-bootstrap .col-md-push-7 { left: 58.33333333%; } .pui--pos .use-bootstrap .col-md-push-6 { left: 50%; } .pui--pos .use-bootstrap .col-md-push-5 { left: 41.66666667%; } .pui--pos .use-bootstrap .col-md-push-4 { left: 33.33333333%; } .pui--pos .use-bootstrap .col-md-push-3 { left: 25%; } .pui--pos .use-bootstrap .col-md-push-2 { left: 16.66666667%; } .pui--pos .use-bootstrap .col-md-push-1 { left: 8.33333333%; } .pui--pos .use-bootstrap .col-md-push-0 { left: auto; } .pui--pos .use-bootstrap .col-md-offset-12 { margin-left: 100%; } .pui--pos .use-bootstrap .col-md-offset-11 { margin-left: 91.66666667%; } .pui--pos .use-bootstrap .col-md-offset-10 { margin-left: 83.33333333%; } .pui--pos .use-bootstrap .col-md-offset-9 { margin-left: 75%; } .pui--pos .use-bootstrap .col-md-offset-8 { margin-left: 66.66666667%; } .pui--pos .use-bootstrap .col-md-offset-7 { margin-left: 58.33333333%; } .pui--pos .use-bootstrap .col-md-offset-6 { margin-left: 50%; } .pui--pos .use-bootstrap .col-md-offset-5 { margin-left: 41.66666667%; } .pui--pos .use-bootstrap .col-md-offset-4 { margin-left: 33.33333333%; } .pui--pos .use-bootstrap .col-md-offset-3 { margin-left: 25%; } .pui--pos .use-bootstrap .col-md-offset-2 { margin-left: 16.66666667%; } .pui--pos .use-bootstrap .col-md-offset-1 { margin-left: 8.33333333%; } .pui--pos .use-bootstrap .col-md-offset-0 { margin-left: 0; } } @media (min-width: 1200px) { .pui--pos .use-bootstrap .col-lg-1, .pui--pos .use-bootstrap .col-lg-2, .pui--pos .use-bootstrap .col-lg-3, .pui--pos .use-bootstrap .col-lg-4, .pui--pos .use-bootstrap .col-lg-5, .pui--pos .use-bootstrap .col-lg-6, .pui--pos .use-bootstrap .col-lg-7, .pui--pos .use-bootstrap .col-lg-8, .pui--pos .use-bootstrap .col-lg-9, .pui--pos .use-bootstrap .col-lg-10, .pui--pos .use-bootstrap .col-lg-11, .pui--pos .use-bootstrap .col-lg-12 { float: left; } .pui--pos .use-bootstrap .col-lg-12 { width: 100%; } .pui--pos .use-bootstrap .col-lg-11 { width: 91.66666667%; } .pui--pos .use-bootstrap .col-lg-10 { width: 83.33333333%; } .pui--pos .use-bootstrap .col-lg-9 { width: 75%; } .pui--pos .use-bootstrap .col-lg-8 { width: 66.66666667%; } .pui--pos .use-bootstrap .col-lg-7 { width: 58.33333333%; } .pui--pos .use-bootstrap .col-lg-6 { width: 50%; } .pui--pos .use-bootstrap .col-lg-5 { width: 41.66666667%; } .pui--pos .use-bootstrap .col-lg-4 { width: 33.33333333%; } .pui--pos .use-bootstrap .col-lg-3 { width: 25%; } .pui--pos .use-bootstrap .col-lg-2 { width: 16.66666667%; } .pui--pos .use-bootstrap .col-lg-1 { width: 8.33333333%; } .pui--pos .use-bootstrap .col-lg-pull-12 { right: 100%; } .pui--pos .use-bootstrap .col-lg-pull-11 { right: 91.66666667%; } .pui--pos .use-bootstrap .col-lg-pull-10 { right: 83.33333333%; } .pui--pos .use-bootstrap .col-lg-pull-9 { right: 75%; } .pui--pos .use-bootstrap .col-lg-pull-8 { right: 66.66666667%; } .pui--pos .use-bootstrap .col-lg-pull-7 { right: 58.33333333%; } .pui--pos .use-bootstrap .col-lg-pull-6 { right: 50%; } .pui--pos .use-bootstrap .col-lg-pull-5 { right: 41.66666667%; } .pui--pos .use-bootstrap .col-lg-pull-4 { right: 33.33333333%; } .pui--pos .use-bootstrap .col-lg-pull-3 { right: 25%; } .pui--pos .use-bootstrap .col-lg-pull-2 { right: 16.66666667%; } .pui--pos .use-bootstrap .col-lg-pull-1 { right: 8.33333333%; } .pui--pos .use-bootstrap .col-lg-pull-0 { right: auto; } .pui--pos .use-bootstrap .col-lg-push-12 { left: 100%; } .pui--pos .use-bootstrap .col-lg-push-11 { left: 91.66666667%; } .pui--pos .use-bootstrap .col-lg-push-10 { left: 83.33333333%; } .pui--pos .use-bootstrap .col-lg-push-9 { left: 75%; } .pui--pos .use-bootstrap .col-lg-push-8 { left: 66.66666667%; } .pui--pos .use-bootstrap .col-lg-push-7 { left: 58.33333333%; } .pui--pos .use-bootstrap .col-lg-push-6 { left: 50%; } .pui--pos .use-bootstrap .col-lg-push-5 { left: 41.66666667%; } .pui--pos .use-bootstrap .col-lg-push-4 { left: 33.33333333%; } .pui--pos .use-bootstrap .col-lg-push-3 { left: 25%; } .pui--pos .use-bootstrap .col-lg-push-2 { left: 16.66666667%; } .pui--pos .use-bootstrap .col-lg-push-1 { left: 8.33333333%; } .pui--pos .use-bootstrap .col-lg-push-0 { left: auto; } .pui--pos .use-bootstrap .col-lg-offset-12 { margin-left: 100%; } .pui--pos .use-bootstrap .col-lg-offset-11 { margin-left: 91.66666667%; } .pui--pos .use-bootstrap .col-lg-offset-10 { margin-left: 83.33333333%; } .pui--pos .use-bootstrap .col-lg-offset-9 { margin-left: 75%; } .pui--pos .use-bootstrap .col-lg-offset-8 { margin-left: 66.66666667%; } .pui--pos .use-bootstrap .col-lg-offset-7 { margin-left: 58.33333333%; } .pui--pos .use-bootstrap .col-lg-offset-6 { margin-left: 50%; } .pui--pos .use-bootstrap .col-lg-offset-5 { margin-left: 41.66666667%; } .pui--pos .use-bootstrap .col-lg-offset-4 { margin-left: 33.33333333%; } .pui--pos .use-bootstrap .col-lg-offset-3 { margin-left: 25%; } .pui--pos .use-bootstrap .col-lg-offset-2 { margin-left: 16.66666667%; } .pui--pos .use-bootstrap .col-lg-offset-1 { margin-left: 8.33333333%; } .pui--pos .use-bootstrap .col-lg-offset-0 { margin-left: 0; } } .pui--pos .use-bootstrap table { background-color: transparent; } .pui--pos .use-bootstrap caption { padding-top: 8px; padding-bottom: 8px; color: #777; text-align: left; } .pui--pos .use-bootstrap th { text-align: left; } .pui--pos .use-bootstrap .table { width: 100%; max-width: 100%; margin-bottom: 20px; } .pui--pos .use-bootstrap .table > thead > tr > th, .pui--pos .use-bootstrap .table > tbody > tr > th, .pui--pos .use-bootstrap .table > tfoot > tr > th, .pui--pos .use-bootstrap .table > thead > tr > td, .pui--pos .use-bootstrap .table > tbody > tr > td, .pui--pos .use-bootstrap .table > tfoot > tr > td { padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #ddd; } .pui--pos .use-bootstrap .table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid #ddd; } .pui--pos .use-bootstrap .table > caption + thead > tr:first-child > th, .pui--pos .use-bootstrap .table > colgroup + thead > tr:first-child > th, .pui--pos .use-bootstrap .table > thead:first-child > tr:first-child > th, .pui--pos .use-bootstrap .table > caption + thead > tr:first-child > td, .pui--pos .use-bootstrap .table > colgroup + thead > tr:first-child > td, .pui--pos .use-bootstrap .table > thead:first-child > tr:first-child > td { border-top: 0; } .pui--pos .use-bootstrap .table > tbody + tbody { border-top: 2px solid #ddd; } .pui--pos .use-bootstrap .table .table { background-color: #fff; } .pui--pos .use-bootstrap .table-condensed > thead > tr > th, .pui--pos .use-bootstrap .table-condensed > tbody > tr > th, .pui--pos .use-bootstrap .table-condensed > tfoot > tr > th, .pui--pos .use-bootstrap .table-condensed > thead > tr > td, .pui--pos .use-bootstrap .table-condensed > tbody > tr > td, .pui--pos .use-bootstrap .table-condensed > tfoot > tr > td { padding: 5px; } .pui--pos .use-bootstrap .table-bordered { border: 1px solid #ddd; } .pui--pos .use-bootstrap .table-bordered > thead > tr > th, .pui--pos .use-bootstrap .table-bordered > tbody > tr > th, .pui--pos .use-bootstrap .table-bordered > tfoot > tr > th, .pui--pos .use-bootstrap .table-bordered > thead > tr > td, .pui--pos .use-bootstrap .table-bordered > tbody > tr > td, .pui--pos .use-bootstrap .table-bordered > tfoot > tr > td { border: 1px solid #ddd; } .pui--pos .use-bootstrap .table-bordered > thead > tr > th, .pui--pos .use-bootstrap .table-bordered > thead > tr > td { border-bottom-width: 2px; } .pui--pos .use-bootstrap .table-striped > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9; } .pui--pos .use-bootstrap .table-hover > tbody > tr:hover { background-color: #f5f5f5; } .pui--pos .use-bootstrap table col[class*=col-] { position: static; display: table-column; float: none; } .pui--pos .use-bootstrap table td[class*=col-], .pui--pos .use-bootstrap table th[class*=col-] { position: static; display: table-cell; float: none; } .pui--pos .use-bootstrap .table > thead > tr > td.active, .pui--pos .use-bootstrap .table > tbody > tr > td.active, .pui--pos .use-bootstrap .table > tfoot > tr > td.active, .pui--pos .use-bootstrap .table > thead > tr > th.active, .pui--pos .use-bootstrap .table > tbody > tr > th.active, .pui--pos .use-bootstrap .table > tfoot > tr > th.active, .pui--pos .use-bootstrap .table > thead > tr.active > td, .pui--pos .use-bootstrap .table > tbody > tr.active > td, .pui--pos .use-bootstrap .table > tfoot > tr.active > td, .pui--pos .use-bootstrap .table > thead > tr.active > th, .pui--pos .use-bootstrap .table > tbody > tr.active > th, .pui--pos .use-bootstrap .table > tfoot > tr.active > th { background-color: #f5f5f5; } .pui--pos .use-bootstrap .table-hover > tbody > tr > td.active:hover, .pui--pos .use-bootstrap .table-hover > tbody > tr > th.active:hover, .pui--pos .use-bootstrap .table-hover > tbody > tr.active:hover > td, .pui--pos .use-bootstrap .table-hover > tbody > tr:hover > .active, .pui--pos .use-bootstrap .table-hover > tbody > tr.active:hover > th { background-color: #e8e8e8; } .pui--pos .use-bootstrap .table > thead > tr > td.success, .pui--pos .use-bootstrap .table > tbody > tr > td.success, .pui--pos .use-bootstrap .table > tfoot > tr > td.success, .pui--pos .use-bootstrap .table > thead > tr > th.success, .pui--pos .use-bootstrap .table > tbody > tr > th.success, .pui--pos .use-bootstrap .table > tfoot > tr > th.success, .pui--pos .use-bootstrap .table > thead > tr.success > td, .pui--pos .use-bootstrap .table > tbody > tr.success > td, .pui--pos .use-bootstrap .table > tfoot > tr.success > td, .pui--pos .use-bootstrap .table > thead > tr.success > th, .pui--pos .use-bootstrap .table > tbody > tr.success > th, .pui--pos .use-bootstrap .table > tfoot > tr.success > th { background-color: #dff0d8; } .pui--pos .use-bootstrap .table-hover > tbody > tr > td.success:hover, .pui--pos .use-bootstrap .table-hover > tbody > tr > th.success:hover, .pui--pos .use-bootstrap .table-hover > tbody > tr.success:hover > td, .pui--pos .use-bootstrap .table-hover > tbody > tr:hover > .success, .pui--pos .use-bootstrap .table-hover > tbody > tr.success:hover > th { background-color: #d0e9c6; } .pui--pos .use-bootstrap .table > thead > tr > td.info, .pui--pos .use-bootstrap .table > tbody > tr > td.info, .pui--pos .use-bootstrap .table > tfoot > tr > td.info, .pui--pos .use-bootstrap .table > thead > tr > th.info, .pui--pos .use-bootstrap .table > tbody > tr > th.info, .pui--pos .use-bootstrap .table > tfoot > tr > th.info, .pui--pos .use-bootstrap .table > thead > tr.info > td, .pui--pos .use-bootstrap .table > tbody > tr.info > td, .pui--pos .use-bootstrap .table > tfoot > tr.info > td, .pui--pos .use-bootstrap .table > thead > tr.info > th, .pui--pos .use-bootstrap .table > tbody > tr.info > th, .pui--pos .use-bootstrap .table > tfoot > tr.info > th { background-color: #d9edf7; } .pui--pos .use-bootstrap .table-hover > tbody > tr > td.info:hover, .pui--pos .use-bootstrap .table-hover > tbody > tr > th.info:hover, .pui--pos .use-bootstrap .table-hover > tbody > tr.info:hover > td, .pui--pos .use-bootstrap .table-hover > tbody > tr:hover > .info, .pui--pos .use-bootstrap .table-hover > tbody > tr.info:hover > th { background-color: #c4e3f3; } .pui--pos .use-bootstrap .table > thead > tr > td.warning, .pui--pos .use-bootstrap .table > tbody > tr > td.warning, .pui--pos .use-bootstrap .table > tfoot > tr > td.warning, .pui--pos .use-bootstrap .table > thead > tr > th.warning, .pui--pos .use-bootstrap .table > tbody > tr > th.warning, .pui--pos .use-bootstrap .table > tfoot > tr > th.warning, .pui--pos .use-bootstrap .table > thead > tr.warning > td, .pui--pos .use-bootstrap .table > tbody > tr.warning > td, .pui--pos .use-bootstrap .table > tfoot > tr.warning > td, .pui--pos .use-bootstrap .table > thead > tr.warning > th, .pui--pos .use-bootstrap .table > tbody > tr.warning > th, .pui--pos .use-bootstrap .table > tfoot > tr.warning > th { background-color: #fcf8e3; } .pui--pos .use-bootstrap .table-hover > tbody > tr > td.warning:hover, .pui--pos .use-bootstrap .table-hover > tbody > tr > th.warning:hover, .pui--pos .use-bootstrap .table-hover > tbody > tr.warning:hover > td, .pui--pos .use-bootstrap .table-hover > tbody > tr:hover > .warning, .pui--pos .use-bootstrap .table-hover > tbody > tr.warning:hover > th { background-color: #faf2cc; } .pui--pos .use-bootstrap .table > thead > tr > td.danger, .pui--pos .use-bootstrap .table > tbody > tr > td.danger, .pui--pos .use-bootstrap .table > tfoot > tr > td.danger, .pui--pos .use-bootstrap .table > thead > tr > th.danger, .pui--pos .use-bootstrap .table > tbody > tr > th.danger, .pui--pos .use-bootstrap .table > tfoot > tr > th.danger, .pui--pos .use-bootstrap .table > thead > tr.danger > td, .pui--pos .use-bootstrap .table > tbody > tr.danger > td, .pui--pos .use-bootstrap .table > tfoot > tr.danger > td, .pui--pos .use-bootstrap .table > thead > tr.danger > th, .pui--pos .use-bootstrap .table > tbody > tr.danger > th, .pui--pos .use-bootstrap .table > tfoot > tr.danger > th { background-color: #f2dede; } .pui--pos .use-bootstrap .table-hover > tbody > tr > td.danger:hover, .pui--pos .use-bootstrap .table-hover > tbody > tr > th.danger:hover, .pui--pos .use-bootstrap .table-hover > tbody > tr.danger:hover > td, .pui--pos .use-bootstrap .table-hover > tbody > tr:hover > .danger, .pui--pos .use-bootstrap .table-hover > tbody > tr.danger:hover > th { background-color: #ebcccc; } .pui--pos .use-bootstrap .table-responsive { min-height: 0.01%; overflow-x: auto; } @media screen and (max-width: 767px) { .pui--pos .use-bootstrap .table-responsive { width: 100%; margin-bottom: 15px; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #ddd; } .pui--pos .use-bootstrap .table-responsive > .table { margin-bottom: 0; } .pui--pos .use-bootstrap .table-responsive > .table > thead > tr > th, .pui--pos .use-bootstrap .table-responsive > .table > tbody > tr > th, .pui--pos .use-bootstrap .table-responsive > .table > tfoot > tr > th, .pui--pos .use-bootstrap .table-responsive > .table > thead > tr > td, .pui--pos .use-bootstrap .table-responsive > .table > tbody > tr > td, .pui--pos .use-bootstrap .table-responsive > .table > tfoot > tr > td { white-space: nowrap; } .pui--pos .use-bootstrap .table-responsive > .table-bordered { border: 0; } .pui--pos .use-bootstrap .table-responsive > .table-bordered > thead > tr > th:first-child, .pui--pos .use-bootstrap .table-responsive > .table-bordered > tbody > tr > th:first-child, .pui--pos .use-bootstrap .table-responsive > .table-bordered > tfoot > tr > th:first-child, .pui--pos .use-bootstrap .table-responsive > .table-bordered > thead > tr > td:first-child, .pui--pos .use-bootstrap .table-responsive > .table-bordered > tbody > tr > td:first-child, .pui--pos .use-bootstrap .table-responsive > .table-bordered > tfoot > tr > td:first-child { border-left: 0; } .pui--pos .use-bootstrap .table-responsive > .table-bordered > thead > tr > th:last-child, .pui--pos .use-bootstrap .table-responsive > .table-bordered > tbody > tr > th:last-child, .pui--pos .use-bootstrap .table-responsive > .table-bordered > tfoot > tr > th:last-child, .pui--pos .use-bootstrap .table-responsive > .table-bordered > thead > tr > td:last-child, .pui--pos .use-bootstrap .table-responsive > .table-bordered > tbody > tr > td:last-child, .pui--pos .use-bootstrap .table-responsive > .table-bordered > tfoot > tr > td:last-child { border-right: 0; } .pui--pos .use-bootstrap .table-responsive > .table-bordered > tbody > tr:last-child > th, .pui--pos .use-bootstrap .table-responsive > .table-bordered > tfoot > tr:last-child > th, .pui--pos .use-bootstrap .table-responsive > .table-bordered > tbody > tr:last-child > td, .pui--pos .use-bootstrap .table-responsive > .table-bordered > tfoot > tr:last-child > td { border-bottom: 0; } } .pui--pos .use-bootstrap fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } .pui--pos .use-bootstrap legend { display: block; width: 100%; padding: 0; margin-bottom: 20px; font-size: 21px; line-height: inherit; color: #333; border: 0; border-bottom: 1px solid #e5e5e5; } .pui--pos .use-bootstrap label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: bold; } .pui--pos .use-bootstrap input[type=search] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .pui--pos .use-bootstrap input[type=radio], .pui--pos .use-bootstrap input[type=checkbox] { margin: 4px 0 0; margin-top: 1px \9 ; line-height: normal; } .pui--pos .use-bootstrap input[type=file] { display: block; } .pui--pos .use-bootstrap input[type=range] { display: block; width: 100%; } .pui--pos .use-bootstrap select[multiple], .pui--pos .use-bootstrap select[size] { height: auto; } .pui--pos .use-bootstrap input[type=file]:focus, .pui--pos .use-bootstrap input[type=radio]:focus, .pui--pos .use-bootstrap input[type=checkbox]:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .pui--pos .use-bootstrap output { display: block; padding-top: 7px; font-size: 14px; line-height: 1.42857143; color: #555; } .pui--pos .use-bootstrap .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; } .pui--pos .use-bootstrap .form-control:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); } .pui--pos .use-bootstrap .form-control::-moz-placeholder { color: #999; opacity: 1; } .pui--pos .use-bootstrap .form-control:-ms-input-placeholder { color: #999; } .pui--pos .use-bootstrap .form-control::-webkit-input-placeholder { color: #999; } .pui--pos .use-bootstrap .form-control::-ms-expand { background-color: transparent; border: 0; } .pui--pos .use-bootstrap .form-control[disabled], .pui--pos .use-bootstrap .form-control[readonly], .pui--pos .use-bootstrap fieldset[disabled] .form-control { background-color: #eee; opacity: 1; } .pui--pos .use-bootstrap .form-control[disabled], .pui--pos .use-bootstrap fieldset[disabled] .form-control { cursor: not-allowed; } .pui--pos .use-bootstrap textarea.form-control { height: auto; } .pui--pos .use-bootstrap input[type=search] { -webkit-appearance: none; } @media screen and (-webkit-min-device-pixel-ratio: 0) { .pui--pos .use-bootstrap input[type=date].form-control, .pui--pos .use-bootstrap input[type=time].form-control, .pui--pos .use-bootstrap input[type=datetime-local].form-control, .pui--pos .use-bootstrap input[type=month].form-control { line-height: 34px; } .pui--pos .use-bootstrap input[type=date].input-sm, .pui--pos .use-bootstrap input[type=time].input-sm, .pui--pos .use-bootstrap input[type=datetime-local].input-sm, .pui--pos .use-bootstrap input[type=month].input-sm, .pui--pos .use-bootstrap .input-group-sm input[type=date], .pui--pos .use-bootstrap .input-group-sm input[type=time], .pui--pos .use-bootstrap .input-group-sm input[type=datetime-local], .pui--pos .use-bootstrap .input-group-sm input[type=month] { line-height: 30px; } .pui--pos .use-bootstrap input[type=date].input-lg, .pui--pos .use-bootstrap input[type=time].input-lg, .pui--pos .use-bootstrap input[type=datetime-local].input-lg, .pui--pos .use-bootstrap input[type=month].input-lg, .pui--pos .use-bootstrap .input-group-lg input[type=date], .pui--pos .use-bootstrap .input-group-lg input[type=time], .pui--pos .use-bootstrap .input-group-lg input[type=datetime-local], .pui--pos .use-bootstrap .input-group-lg input[type=month] { line-height: 46px; } } .pui--pos .use-bootstrap .form-group { margin-bottom: 15px; } .pui--pos .use-bootstrap .radio, .pui--pos .use-bootstrap .checkbox { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; } .pui--pos .use-bootstrap .radio label, .pui--pos .use-bootstrap .checkbox label { min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: normal; cursor: pointer; } .pui--pos .use-bootstrap .radio input[type=radio], .pui--pos .use-bootstrap .radio-inline input[type=radio], .pui--pos .use-bootstrap .checkbox input[type=checkbox], .pui--pos .use-bootstrap .checkbox-inline input[type=checkbox] { position: absolute; margin-top: 4px \9 ; margin-left: -20px; } .pui--pos .use-bootstrap .radio + .radio, .pui--pos .use-bootstrap .checkbox + .checkbox { margin-top: -5px; } .pui--pos .use-bootstrap .radio-inline, .pui--pos .use-bootstrap .checkbox-inline { position: relative; display: inline-block; padding-left: 20px; margin-bottom: 0; font-weight: normal; vertical-align: middle; cursor: pointer; } .pui--pos .use-bootstrap .radio-inline + .radio-inline, .pui--pos .use-bootstrap .checkbox-inline + .checkbox-inline { margin-top: 0; margin-left: 10px; } .pui--pos .use-bootstrap input[type=radio][disabled], .pui--pos .use-bootstrap input[type=checkbox][disabled], .pui--pos .use-bootstrap input[type=radio].disabled, .pui--pos .use-bootstrap input[type=checkbox].disabled, .pui--pos .use-bootstrap fieldset[disabled] input[type=radio], .pui--pos .use-bootstrap fieldset[disabled] input[type=checkbox] { cursor: not-allowed; } .pui--pos .use-bootstrap .radio-inline.disabled, .pui--pos .use-bootstrap .checkbox-inline.disabled, .pui--pos .use-bootstrap fieldset[disabled] .radio-inline, .pui--pos .use-bootstrap fieldset[disabled] .checkbox-inline { cursor: not-allowed; } .pui--pos .use-bootstrap .radio.disabled label, .pui--pos .use-bootstrap .checkbox.disabled label, .pui--pos .use-bootstrap fieldset[disabled] .radio label, .pui--pos .use-bootstrap fieldset[disabled] .checkbox label { cursor: not-allowed; } .pui--pos .use-bootstrap .form-control-static { min-height: 34px; padding-top: 7px; padding-bottom: 7px; margin-bottom: 0; } .pui--pos .use-bootstrap .form-control-static.input-lg, .pui--pos .use-bootstrap .form-control-static.input-sm { padding-right: 0; padding-left: 0; } .pui--pos .use-bootstrap .input-sm { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .pui--pos .use-bootstrap select.input-sm { height: 30px; line-height: 30px; } .pui--pos .use-bootstrap textarea.input-sm, .pui--pos .use-bootstrap select[multiple].input-sm { height: auto; } .pui--pos .use-bootstrap .form-group-sm .form-control { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .pui--pos .use-bootstrap .form-group-sm select.form-control { height: 30px; line-height: 30px; } .pui--pos .use-bootstrap .form-group-sm textarea.form-control, .pui--pos .use-bootstrap .form-group-sm select[multiple].form-control { height: auto; } .pui--pos .use-bootstrap .form-group-sm .form-control-static { height: 30px; min-height: 32px; padding: 6px 10px; font-size: 12px; line-height: 1.5; } .pui--pos .use-bootstrap .input-lg { height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } .pui--pos .use-bootstrap select.input-lg { height: 46px; line-height: 46px; } .pui--pos .use-bootstrap textarea.input-lg, .pui--pos .use-bootstrap select[multiple].input-lg { height: auto; } .pui--pos .use-bootstrap .form-group-lg .form-control { height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } .pui--pos .use-bootstrap .form-group-lg select.form-control { height: 46px; line-height: 46px; } .pui--pos .use-bootstrap .form-group-lg textarea.form-control, .pui--pos .use-bootstrap .form-group-lg select[multiple].form-control { height: auto; } .pui--pos .use-bootstrap .form-group-lg .form-control-static { height: 46px; min-height: 38px; padding: 11px 16px; font-size: 18px; line-height: 1.3333333; } .pui--pos .use-bootstrap .has-feedback { position: relative; } .pui--pos .use-bootstrap .has-feedback .form-control { padding-right: 42.5px; } .pui--pos .use-bootstrap .form-control-feedback { position: absolute; top: 0; right: 0; z-index: 2; display: block; width: 34px; height: 34px; line-height: 34px; text-align: center; pointer-events: none; } .pui--pos .use-bootstrap .input-lg + .form-control-feedback, .pui--pos .use-bootstrap .input-group-lg + .form-control-feedback, .pui--pos .use-bootstrap .form-group-lg .form-control + .form-control-feedback { width: 46px; height: 46px; line-height: 46px; } .pui--pos .use-bootstrap .input-sm + .form-control-feedback, .pui--pos .use-bootstrap .input-group-sm + .form-control-feedback, .pui--pos .use-bootstrap .form-group-sm .form-control + .form-control-feedback { width: 30px; height: 30px; line-height: 30px; } .pui--pos .use-bootstrap .has-success .help-block, .pui--pos .use-bootstrap .has-success .control-label, .pui--pos .use-bootstrap .has-success .radio, .pui--pos .use-bootstrap .has-success .checkbox, .pui--pos .use-bootstrap .has-success .radio-inline, .pui--pos .use-bootstrap .has-success .checkbox-inline, .pui--pos .use-bootstrap .has-success.radio label, .pui--pos .use-bootstrap .has-success.checkbox label, .pui--pos .use-bootstrap .has-success.radio-inline label, .pui--pos .use-bootstrap .has-success.checkbox-inline label { color: #3c763d; } .pui--pos .use-bootstrap .has-success .form-control { border-color: #3c763d; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .pui--pos .use-bootstrap .has-success .form-control:focus { border-color: #2b542c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; } .pui--pos .use-bootstrap .has-success .input-group-addon { color: #3c763d; background-color: #dff0d8; border-color: #3c763d; } .pui--pos .use-bootstrap .has-success .form-control-feedback { color: #3c763d; } .pui--pos .use-bootstrap .has-warning .help-block, .pui--pos .use-bootstrap .has-warning .control-label, .pui--pos .use-bootstrap .has-warning .radio, .pui--pos .use-bootstrap .has-warning .checkbox, .pui--pos .use-bootstrap .has-warning .radio-inline, .pui--pos .use-bootstrap .has-warning .checkbox-inline, .pui--pos .use-bootstrap .has-warning.radio label, .pui--pos .use-bootstrap .has-warning.checkbox label, .pui--pos .use-bootstrap .has-warning.radio-inline label, .pui--pos .use-bootstrap .has-warning.checkbox-inline label { color: #8a6d3b; } .pui--pos .use-bootstrap .has-warning .form-control { border-color: #8a6d3b; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .pui--pos .use-bootstrap .has-warning .form-control:focus { border-color: #66512c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; } .pui--pos .use-bootstrap .has-warning .input-group-addon { color: #8a6d3b; background-color: #fcf8e3; border-color: #8a6d3b; } .pui--pos .use-bootstrap .has-warning .form-control-feedback { color: #8a6d3b; } .pui--pos .use-bootstrap .has-error .help-block, .pui--pos .use-bootstrap .has-error .control-label, .pui--pos .use-bootstrap .has-error .radio, .pui--pos .use-bootstrap .has-error .checkbox, .pui--pos .use-bootstrap .has-error .radio-inline, .pui--pos .use-bootstrap .has-error .checkbox-inline, .pui--pos .use-bootstrap .has-error.radio label, .pui--pos .use-bootstrap .has-error.checkbox label, .pui--pos .use-bootstrap .has-error.radio-inline label, .pui--pos .use-bootstrap .has-error.checkbox-inline label { color: #a94442; } .pui--pos .use-bootstrap .has-error .form-control { border-color: #a94442; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .pui--pos .use-bootstrap .has-error .form-control:focus { border-color: #843534; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; } .pui--pos .use-bootstrap .has-error .input-group-addon { color: #a94442; background-color: #f2dede; border-color: #a94442; } .pui--pos .use-bootstrap .has-error .form-control-feedback { color: #a94442; } .pui--pos .use-bootstrap .has-feedback label ~ .form-control-feedback { top: 25px; } .pui--pos .use-bootstrap .has-feedback label.sr-only ~ .form-control-feedback { top: 0; } .pui--pos .use-bootstrap .help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; } @media (min-width: 768px) { .pui--pos .use-bootstrap .form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; } .pui--pos .use-bootstrap .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; } .pui--pos .use-bootstrap .form-inline .form-control-static { display: inline-block; } .pui--pos .use-bootstrap .form-inline .input-group { display: inline-table; vertical-align: middle; } .pui--pos .use-bootstrap .form-inline .input-group .input-group-addon, .pui--pos .use-bootstrap .form-inline .input-group .input-group-btn, .pui--pos .use-bootstrap .form-inline .input-group .form-control { width: auto; } .pui--pos .use-bootstrap .form-inline .input-group > .form-control { width: 100%; } .pui--pos .use-bootstrap .form-inline .control-label { margin-bottom: 0; vertical-align: middle; } .pui--pos .use-bootstrap .form-inline .radio, .pui--pos .use-bootstrap .form-inline .checkbox { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; } .pui--pos .use-bootstrap .form-inline .radio label, .pui--pos .use-bootstrap .form-inline .checkbox label { padding-left: 0; } .pui--pos .use-bootstrap .form-inline .radio input[type=radio], .pui--pos .use-bootstrap .form-inline .checkbox input[type=checkbox] { position: relative; margin-left: 0; } .pui--pos .use-bootstrap .form-inline .has-feedback .form-control-feedback { top: 0; } } .pui--pos .use-bootstrap .form-horizontal .radio, .pui--pos .use-bootstrap .form-horizontal .checkbox, .pui--pos .use-bootstrap .form-horizontal .radio-inline, .pui--pos .use-bootstrap .form-horizontal .checkbox-inline { padding-top: 7px; margin-top: 0; margin-bottom: 0; } .pui--pos .use-bootstrap .form-horizontal .radio, .pui--pos .use-bootstrap .form-horizontal .checkbox { min-height: 27px; } .pui--pos .use-bootstrap .form-horizontal .form-group { margin-right: -15px; margin-left: -15px; } @media (min-width: 768px) { .pui--pos .use-bootstrap .form-horizontal .control-label { padding-top: 7px; margin-bottom: 0; text-align: right; } } .pui--pos .use-bootstrap .form-horizontal .has-feedback .form-control-feedback { right: 15px; } @media (min-width: 768px) { .pui--pos .use-bootstrap .form-horizontal .form-group-lg .control-label { padding-top: 11px; font-size: 18px; } } @media (min-width: 768px) { .pui--pos .use-bootstrap .form-horizontal .form-group-sm .control-label { padding-top: 6px; font-size: 12px; } } .pui--pos .use-bootstrap .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } .pui--pos .use-bootstrap .btn:focus, .pui--pos .use-bootstrap .btn:active:focus, .pui--pos .use-bootstrap .btn.active:focus, .pui--pos .use-bootstrap .btn.focus, .pui--pos .use-bootstrap .btn:active.focus, .pui--pos .use-bootstrap .btn.active.focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .pui--pos .use-bootstrap .btn:hover, .pui--pos .use-bootstrap .btn:focus, .pui--pos .use-bootstrap .btn.focus { color: #333; text-decoration: none; } .pui--pos .use-bootstrap .btn:active, .pui--pos .use-bootstrap .btn.active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .pui--pos .use-bootstrap .btn.disabled, .pui--pos .use-bootstrap .btn[disabled], .pui--pos .use-bootstrap fieldset[disabled] .btn { cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: 0.65; } .pui--pos .use-bootstrap a.btn.disabled, .pui--pos .use-bootstrap fieldset[disabled] a.btn { pointer-events: none; } .pui--pos .use-bootstrap .btn-default { color: #333; background-color: #fff; border-color: #ccc; } .pui--pos .use-bootstrap .btn-default:focus, .pui--pos .use-bootstrap .btn-default.focus { color: #333; background-color: #e6e6e6; border-color: #8c8c8c; } .pui--pos .use-bootstrap .btn-default:hover { color: #333; background-color: #e6e6e6; border-color: #adadad; } .pui--pos .use-bootstrap .btn-default:active, .pui--pos .use-bootstrap .btn-default.active, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-default { color: #333; background-color: #e6e6e6; border-color: #adadad; } .pui--pos .use-bootstrap .btn-default:active:hover, .pui--pos .use-bootstrap .btn-default.active:hover, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-default:hover, .pui--pos .use-bootstrap .btn-default:active:focus, .pui--pos .use-bootstrap .btn-default.active:focus, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-default:focus, .pui--pos .use-bootstrap .btn-default:active.focus, .pui--pos .use-bootstrap .btn-default.active.focus, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-default.focus { color: #333; background-color: #d4d4d4; border-color: #8c8c8c; } .pui--pos .use-bootstrap .btn-default:active, .pui--pos .use-bootstrap .btn-default.active, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-default { background-image: none; } .pui--pos .use-bootstrap .btn-default.disabled:hover, .pui--pos .use-bootstrap .btn-default[disabled]:hover, .pui--pos .use-bootstrap fieldset[disabled] .btn-default:hover, .pui--pos .use-bootstrap .btn-default.disabled:focus, .pui--pos .use-bootstrap .btn-default[disabled]:focus, .pui--pos .use-bootstrap fieldset[disabled] .btn-default:focus, .pui--pos .use-bootstrap .btn-default.disabled.focus, .pui--pos .use-bootstrap .btn-default[disabled].focus, .pui--pos .use-bootstrap fieldset[disabled] .btn-default.focus { background-color: #fff; border-color: #ccc; } .pui--pos .use-bootstrap .btn-default .badge { color: #fff; background-color: #333; } .pui--pos .use-bootstrap .btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; } .pui--pos .use-bootstrap .btn-primary:focus, .pui--pos .use-bootstrap .btn-primary.focus { color: #fff; background-color: #286090; border-color: #122b40; } .pui--pos .use-bootstrap .btn-primary:hover { color: #fff; background-color: #286090; border-color: #204d74; } .pui--pos .use-bootstrap .btn-primary:active, .pui--pos .use-bootstrap .btn-primary.active, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-primary { color: #fff; background-color: #286090; border-color: #204d74; } .pui--pos .use-bootstrap .btn-primary:active:hover, .pui--pos .use-bootstrap .btn-primary.active:hover, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-primary:hover, .pui--pos .use-bootstrap .btn-primary:active:focus, .pui--pos .use-bootstrap .btn-primary.active:focus, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-primary:focus, .pui--pos .use-bootstrap .btn-primary:active.focus, .pui--pos .use-bootstrap .btn-primary.active.focus, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-primary.focus { color: #fff; background-color: #204d74; border-color: #122b40; } .pui--pos .use-bootstrap .btn-primary:active, .pui--pos .use-bootstrap .btn-primary.active, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-primary { background-image: none; } .pui--pos .use-bootstrap .btn-primary.disabled:hover, .pui--pos .use-bootstrap .btn-primary[disabled]:hover, .pui--pos .use-bootstrap fieldset[disabled] .btn-primary:hover, .pui--pos .use-bootstrap .btn-primary.disabled:focus, .pui--pos .use-bootstrap .btn-primary[disabled]:focus, .pui--pos .use-bootstrap fieldset[disabled] .btn-primary:focus, .pui--pos .use-bootstrap .btn-primary.disabled.focus, .pui--pos .use-bootstrap .btn-primary[disabled].focus, .pui--pos .use-bootstrap fieldset[disabled] .btn-primary.focus { background-color: #337ab7; border-color: #2e6da4; } .pui--pos .use-bootstrap .btn-primary .badge { color: #337ab7; background-color: #fff; } .pui--pos .use-bootstrap .btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; } .pui--pos .use-bootstrap .btn-success:focus, .pui--pos .use-bootstrap .btn-success.focus { color: #fff; background-color: #449d44; border-color: #255625; } .pui--pos .use-bootstrap .btn-success:hover { color: #fff; background-color: #449d44; border-color: #398439; } .pui--pos .use-bootstrap .btn-success:active, .pui--pos .use-bootstrap .btn-success.active, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-success { color: #fff; background-color: #449d44; border-color: #398439; } .pui--pos .use-bootstrap .btn-success:active:hover, .pui--pos .use-bootstrap .btn-success.active:hover, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-success:hover, .pui--pos .use-bootstrap .btn-success:active:focus, .pui--pos .use-bootstrap .btn-success.active:focus, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-success:focus, .pui--pos .use-bootstrap .btn-success:active.focus, .pui--pos .use-bootstrap .btn-success.active.focus, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-success.focus { color: #fff; background-color: #398439; border-color: #255625; } .pui--pos .use-bootstrap .btn-success:active, .pui--pos .use-bootstrap .btn-success.active, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-success { background-image: none; } .pui--pos .use-bootstrap .btn-success.disabled:hover, .pui--pos .use-bootstrap .btn-success[disabled]:hover, .pui--pos .use-bootstrap fieldset[disabled] .btn-success:hover, .pui--pos .use-bootstrap .btn-success.disabled:focus, .pui--pos .use-bootstrap .btn-success[disabled]:focus, .pui--pos .use-bootstrap fieldset[disabled] .btn-success:focus, .pui--pos .use-bootstrap .btn-success.disabled.focus, .pui--pos .use-bootstrap .btn-success[disabled].focus, .pui--pos .use-bootstrap fieldset[disabled] .btn-success.focus { background-color: #5cb85c; border-color: #4cae4c; } .pui--pos .use-bootstrap .btn-success .badge { color: #5cb85c; background-color: #fff; } .pui--pos .use-bootstrap .btn-info { color: #fff; background-color: #5bc0de; border-color: #46b8da; } .pui--pos .use-bootstrap .btn-info:focus, .pui--pos .use-bootstrap .btn-info.focus { color: #fff; background-color: #31b0d5; border-color: #1b6d85; } .pui--pos .use-bootstrap .btn-info:hover { color: #fff; background-color: #31b0d5; border-color: #269abc; } .pui--pos .use-bootstrap .btn-info:active, .pui--pos .use-bootstrap .btn-info.active, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-info { color: #fff; background-color: #31b0d5; border-color: #269abc; } .pui--pos .use-bootstrap .btn-info:active:hover, .pui--pos .use-bootstrap .btn-info.active:hover, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-info:hover, .pui--pos .use-bootstrap .btn-info:active:focus, .pui--pos .use-bootstrap .btn-info.active:focus, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-info:focus, .pui--pos .use-bootstrap .btn-info:active.focus, .pui--pos .use-bootstrap .btn-info.active.focus, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-info.focus { color: #fff; background-color: #269abc; border-color: #1b6d85; } .pui--pos .use-bootstrap .btn-info:active, .pui--pos .use-bootstrap .btn-info.active, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-info { background-image: none; } .pui--pos .use-bootstrap .btn-info.disabled:hover, .pui--pos .use-bootstrap .btn-info[disabled]:hover, .pui--pos .use-bootstrap fieldset[disabled] .btn-info:hover, .pui--pos .use-bootstrap .btn-info.disabled:focus, .pui--pos .use-bootstrap .btn-info[disabled]:focus, .pui--pos .use-bootstrap fieldset[disabled] .btn-info:focus, .pui--pos .use-bootstrap .btn-info.disabled.focus, .pui--pos .use-bootstrap .btn-info[disabled].focus, .pui--pos .use-bootstrap fieldset[disabled] .btn-info.focus { background-color: #5bc0de; border-color: #46b8da; } .pui--pos .use-bootstrap .btn-info .badge { color: #5bc0de; background-color: #fff; } .pui--pos .use-bootstrap .btn-warning { color: #fff; background-color: #f0ad4e; border-color: #eea236; } .pui--pos .use-bootstrap .btn-warning:focus, .pui--pos .use-bootstrap .btn-warning.focus { color: #fff; background-color: #ec971f; border-color: #985f0d; } .pui--pos .use-bootstrap .btn-warning:hover { color: #fff; background-color: #ec971f; border-color: #d58512; } .pui--pos .use-bootstrap .btn-warning:active, .pui--pos .use-bootstrap .btn-warning.active, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-warning { color: #fff; background-color: #ec971f; border-color: #d58512; } .pui--pos .use-bootstrap .btn-warning:active:hover, .pui--pos .use-bootstrap .btn-warning.active:hover, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-warning:hover, .pui--pos .use-bootstrap .btn-warning:active:focus, .pui--pos .use-bootstrap .btn-warning.active:focus, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-warning:focus, .pui--pos .use-bootstrap .btn-warning:active.focus, .pui--pos .use-bootstrap .btn-warning.active.focus, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-warning.focus { color: #fff; background-color: #d58512; border-color: #985f0d; } .pui--pos .use-bootstrap .btn-warning:active, .pui--pos .use-bootstrap .btn-warning.active, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-warning { background-image: none; } .pui--pos .use-bootstrap .btn-warning.disabled:hover, .pui--pos .use-bootstrap .btn-warning[disabled]:hover, .pui--pos .use-bootstrap fieldset[disabled] .btn-warning:hover, .pui--pos .use-bootstrap .btn-warning.disabled:focus, .pui--pos .use-bootstrap .btn-warning[disabled]:focus, .pui--pos .use-bootstrap fieldset[disabled] .btn-warning:focus, .pui--pos .use-bootstrap .btn-warning.disabled.focus, .pui--pos .use-bootstrap .btn-warning[disabled].focus, .pui--pos .use-bootstrap fieldset[disabled] .btn-warning.focus { background-color: #f0ad4e; border-color: #eea236; } .pui--pos .use-bootstrap .btn-warning .badge { color: #f0ad4e; background-color: #fff; } .pui--pos .use-bootstrap .btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; } .pui--pos .use-bootstrap .btn-danger:focus, .pui--pos .use-bootstrap .btn-danger.focus { color: #fff; background-color: #c9302c; border-color: #761c19; } .pui--pos .use-bootstrap .btn-danger:hover { color: #fff; background-color: #c9302c; border-color: #ac2925; } .pui--pos .use-bootstrap .btn-danger:active, .pui--pos .use-bootstrap .btn-danger.active, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-danger { color: #fff; background-color: #c9302c; border-color: #ac2925; } .pui--pos .use-bootstrap .btn-danger:active:hover, .pui--pos .use-bootstrap .btn-danger.active:hover, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-danger:hover, .pui--pos .use-bootstrap .btn-danger:active:focus, .pui--pos .use-bootstrap .btn-danger.active:focus, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-danger:focus, .pui--pos .use-bootstrap .btn-danger:active.focus, .pui--pos .use-bootstrap .btn-danger.active.focus, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-danger.focus { color: #fff; background-color: #ac2925; border-color: #761c19; } .pui--pos .use-bootstrap .btn-danger:active, .pui--pos .use-bootstrap .btn-danger.active, .pui--pos .use-bootstrap .open > .dropdown-toggle.btn-danger { background-image: none; } .pui--pos .use-bootstrap .btn-danger.disabled:hover, .pui--pos .use-bootstrap .btn-danger[disabled]:hover, .pui--pos .use-bootstrap fieldset[disabled] .btn-danger:hover, .pui--pos .use-bootstrap .btn-danger.disabled:focus, .pui--pos .use-bootstrap .btn-danger[disabled]:focus, .pui--pos .use-bootstrap fieldset[disabled] .btn-danger:focus, .pui--pos .use-bootstrap .btn-danger.disabled.focus, .pui--pos .use-bootstrap .btn-danger[disabled].focus, .pui--pos .use-bootstrap fieldset[disabled] .btn-danger.focus { background-color: #d9534f; border-color: #d43f3a; } .pui--pos .use-bootstrap .btn-danger .badge { color: #d9534f; background-color: #fff; } .pui--pos .use-bootstrap .btn-link { font-weight: normal; color: #337ab7; border-radius: 0; } .pui--pos .use-bootstrap .btn-link, .pui--pos .use-bootstrap .btn-link:active, .pui--pos .use-bootstrap .btn-link.active, .pui--pos .use-bootstrap .btn-link[disabled], .pui--pos .use-bootstrap fieldset[disabled] .btn-link { background-color: transparent; -webkit-box-shadow: none; box-shadow: none; } .pui--pos .use-bootstrap .btn-link, .pui--pos .use-bootstrap .btn-link:hover, .pui--pos .use-bootstrap .btn-link:focus, .pui--pos .use-bootstrap .btn-link:active { border-color: transparent; } .pui--pos .use-bootstrap .btn-link:hover, .pui--pos .use-bootstrap .btn-link:focus { color: #23527c; text-decoration: underline; background-color: transparent; } .pui--pos .use-bootstrap .btn-link[disabled]:hover, .pui--pos .use-bootstrap fieldset[disabled] .btn-link:hover, .pui--pos .use-bootstrap .btn-link[disabled]:focus, .pui--pos .use-bootstrap fieldset[disabled] .btn-link:focus { color: #777; text-decoration: none; } .pui--pos .use-bootstrap .btn-lg, .pui--pos .use-bootstrap .btn-group-lg > .btn { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } .pui--pos .use-bootstrap .btn-sm, .pui--pos .use-bootstrap .btn-group-sm > .btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .pui--pos .use-bootstrap .btn-xs, .pui--pos .use-bootstrap .btn-group-xs > .btn { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .pui--pos .use-bootstrap .btn-block { display: block; width: 100%; } .pui--pos .use-bootstrap .btn-block + .btn-block { margin-top: 5px; } .pui--pos .use-bootstrap input[type=submit].btn-block, .pui--pos .use-bootstrap input[type=reset].btn-block, .pui--pos .use-bootstrap input[type=button].btn-block { width: 100%; } .pui--pos .use-bootstrap .fade { opacity: 0; -webkit-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .pui--pos .use-bootstrap .fade.in { opacity: 1; } .pui--pos .use-bootstrap .collapse { display: none; } .pui--pos .use-bootstrap .collapse.in { display: block; } .pui--pos .use-bootstrap tr.collapse.in { display: table-row; } .pui--pos .use-bootstrap tbody.collapse.in { display: table-row-group; } .pui--pos .use-bootstrap .collapsing { position: relative; height: 0; overflow: hidden; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 0.35s; -o-transition-duration: 0.35s; transition-duration: 0.35s; -webkit-transition-property: height, visibility; -o-transition-property: height, visibility; transition-property: height, visibility; } .pui--pos .use-bootstrap .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-top: 4px solid \9 ; border-right: 4px solid transparent; border-left: 4px solid transparent; } .pui--pos .use-bootstrap .dropup, .pui--pos .use-bootstrap .dropdown { position: relative; } .pui--pos .use-bootstrap .dropdown-toggle:focus { outline: 0; } .pui--pos .use-bootstrap .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); } .pui--pos .use-bootstrap .dropdown-menu.pull-right, .pui--pos .use-bootstrap #aside .alert-dismissible .dropdown-menu.close, .pui--pos #aside .alert-dismissible .use-bootstrap .dropdown-menu.close { right: 0; left: auto; } .pui--pos .use-bootstrap .dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; } .pui--pos .use-bootstrap .dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333; white-space: nowrap; } .pui--pos .use-bootstrap .dropdown-menu > li > a:hover, .pui--pos .use-bootstrap .dropdown-menu > li > a:focus { color: #262626; text-decoration: none; background-color: #f5f5f5; } .pui--pos .use-bootstrap .dropdown-menu > .active > a, .pui--pos .use-bootstrap .dropdown-menu > .active > a:hover, .pui--pos .use-bootstrap .dropdown-menu > .active > a:focus { color: #fff; text-decoration: none; background-color: #337ab7; outline: 0; } .pui--pos .use-bootstrap .dropdown-menu > .disabled > a, .pui--pos .use-bootstrap .dropdown-menu > .disabled > a:hover, .pui--pos .use-bootstrap .dropdown-menu > .disabled > a:focus { color: #777; } .pui--pos .use-bootstrap .dropdown-menu > .disabled > a:hover, .pui--pos .use-bootstrap .dropdown-menu > .disabled > a:focus { text-decoration: none; cursor: not-allowed; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } .pui--pos .use-bootstrap .open > .dropdown-menu { display: block; } .pui--pos .use-bootstrap .open > a { outline: 0; } .pui--pos .use-bootstrap .dropdown-menu-right { right: 0; left: auto; } .pui--pos .use-bootstrap .dropdown-menu-left { right: auto; left: 0; } .pui--pos .use-bootstrap .dropdown-header { display: block; padding: 3px 20px; font-size: 12px; line-height: 1.42857143; color: #777; white-space: nowrap; } .pui--pos .use-bootstrap .dropdown-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 990; } .pui--pos .use-bootstrap .pull-right > .dropdown-menu, .pui--pos .use-bootstrap #aside .alert-dismissible .close > .dropdown-menu, .pui--pos #aside .alert-dismissible .use-bootstrap .close > .dropdown-menu { right: 0; left: auto; } .pui--pos .use-bootstrap .dropup .caret, .pui--pos .use-bootstrap .navbar-fixed-bottom .dropdown .caret { content: ""; border-top: 0; border-bottom: 4px dashed; border-bottom: 4px solid \9 ; } .pui--pos .use-bootstrap .dropup .dropdown-menu, .pui--pos .use-bootstrap .navbar-fixed-bottom .dropdown .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 2px; } @media (min-width: 768px) { .pui--pos .use-bootstrap .navbar-right .dropdown-menu { right: 0; left: auto; } .pui--pos .use-bootstrap .navbar-right .dropdown-menu-left { right: auto; left: 0; } } .pui--pos .use-bootstrap .btn-group, .pui--pos .use-bootstrap .btn-group-vertical { position: relative; display: inline-block; vertical-align: middle; } .pui--pos .use-bootstrap .btn-group > .btn, .pui--pos .use-bootstrap .btn-group-vertical > .btn { position: relative; float: left; } .pui--pos .use-bootstrap .btn-group > .btn:hover, .pui--pos .use-bootstrap .btn-group-vertical > .btn:hover, .pui--pos .use-bootstrap .btn-group > .btn:focus, .pui--pos .use-bootstrap .btn-group-vertical > .btn:focus, .pui--pos .use-bootstrap .btn-group > .btn:active, .pui--pos .use-bootstrap .btn-group-vertical > .btn:active, .pui--pos .use-bootstrap .btn-group > .btn.active, .pui--pos .use-bootstrap .btn-group-vertical > .btn.active { z-index: 2; } .pui--pos .use-bootstrap .btn-group .btn + .btn, .pui--pos .use-bootstrap .btn-group .btn + .btn-group, .pui--pos .use-bootstrap .btn-group .btn-group + .btn, .pui--pos .use-bootstrap .btn-group .btn-group + .btn-group { margin-left: -1px; } .pui--pos .use-bootstrap .btn-toolbar { margin-left: -5px; } .pui--pos .use-bootstrap .btn-toolbar .btn, .pui--pos .use-bootstrap .btn-toolbar .btn-group, .pui--pos .use-bootstrap .btn-toolbar .input-group { float: left; } .pui--pos .use-bootstrap .btn-toolbar > .btn, .pui--pos .use-bootstrap .btn-toolbar > .btn-group, .pui--pos .use-bootstrap .btn-toolbar > .input-group { margin-left: 5px; } .pui--pos .use-bootstrap .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0; } .pui--pos .use-bootstrap .btn-group > .btn:first-child { margin-left: 0; } .pui--pos .use-bootstrap .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .pui--pos .use-bootstrap .btn-group > .btn:last-child:not(:first-child), .pui--pos .use-bootstrap .btn-group > .dropdown-toggle:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .pui--pos .use-bootstrap .btn-group > .btn-group { float: left; } .pui--pos .use-bootstrap .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } .pui--pos .use-bootstrap .btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child, .pui--pos .use-bootstrap .btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle { border-top-right-radius: 0; border-bottom-right-radius: 0; } .pui--pos .use-bootstrap .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .pui--pos .use-bootstrap .btn-group .dropdown-toggle:active, .pui--pos .use-bootstrap .btn-group.open .dropdown-toggle { outline: 0; } .pui--pos .use-bootstrap .btn-group > .btn + .dropdown-toggle { padding-right: 8px; padding-left: 8px; } .pui--pos .use-bootstrap .btn-group > .btn-lg + .dropdown-toggle { padding-right: 12px; padding-left: 12px; } .pui--pos .use-bootstrap .btn-group.open .dropdown-toggle { -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .pui--pos .use-bootstrap .btn-group.open .dropdown-toggle.btn-link { -webkit-box-shadow: none; box-shadow: none; } .pui--pos .use-bootstrap .btn .caret { margin-left: 0; } .pui--pos .use-bootstrap .btn-lg .caret { border-width: 5px 5px 0; border-bottom-width: 0; } .pui--pos .use-bootstrap .dropup .btn-lg .caret { border-width: 0 5px 5px; } .pui--pos .use-bootstrap .btn-group-vertical > .btn, .pui--pos .use-bootstrap .btn-group-vertical > .btn-group, .pui--pos .use-bootstrap .btn-group-vertical > .btn-group > .btn { display: block; float: none; width: 100%; max-width: 100%; } .pui--pos .use-bootstrap .btn-group-vertical > .btn-group > .btn { float: none; } .pui--pos .use-bootstrap .btn-group-vertical > .btn + .btn, .pui--pos .use-bootstrap .btn-group-vertical > .btn + .btn-group, .pui--pos .use-bootstrap .btn-group-vertical > .btn-group + .btn, .pui--pos .use-bootstrap .btn-group-vertical > .btn-group + .btn-group { margin-top: -1px; margin-left: 0; } .pui--pos .use-bootstrap .btn-group-vertical > .btn:not(:first-child):not(:last-child) { border-radius: 0; } .pui--pos .use-bootstrap .btn-group-vertical > .btn:first-child:not(:last-child) { border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .pui--pos .use-bootstrap .btn-group-vertical > .btn:last-child:not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .pui--pos .use-bootstrap .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } .pui--pos .use-bootstrap .btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, .pui--pos .use-bootstrap .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .pui--pos .use-bootstrap .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { border-top-left-radius: 0; border-top-right-radius: 0; } .pui--pos .use-bootstrap .btn-group-justified { display: table; width: 100%; table-layout: fixed; border-collapse: separate; } .pui--pos .use-bootstrap .btn-group-justified > .btn, .pui--pos .use-bootstrap .btn-group-justified > .btn-group { display: table-cell; float: none; width: 1%; } .pui--pos .use-bootstrap .btn-group-justified > .btn-group .btn { width: 100%; } .pui--pos .use-bootstrap .btn-group-justified > .btn-group .dropdown-menu { left: auto; } .pui--pos .use-bootstrap [data-toggle=buttons] > .btn input[type=radio], .pui--pos .use-bootstrap [data-toggle=buttons] > .btn-group > .btn input[type=radio], .pui--pos .use-bootstrap [data-toggle=buttons] > .btn input[type=checkbox], .pui--pos .use-bootstrap [data-toggle=buttons] > .btn-group > .btn input[type=checkbox] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } .pui--pos .use-bootstrap .input-group { position: relative; display: table; border-collapse: separate; } .pui--pos .use-bootstrap .input-group[class*=col-] { float: none; padding-right: 0; padding-left: 0; } .pui--pos .use-bootstrap .input-group .form-control { position: relative; z-index: 2; float: left; width: 100%; margin-bottom: 0; } .pui--pos .use-bootstrap .input-group .form-control:focus { z-index: 3; } .pui--pos .use-bootstrap .input-group-lg > .form-control, .pui--pos .use-bootstrap .input-group-lg > .input-group-addon, .pui--pos .use-bootstrap .input-group-lg > .input-group-btn > .btn { height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } .pui--pos .use-bootstrap select.input-group-lg > .form-control, .pui--pos .use-bootstrap select.input-group-lg > .input-group-addon, .pui--pos .use-bootstrap select.input-group-lg > .input-group-btn > .btn { height: 46px; line-height: 46px; } .pui--pos .use-bootstrap textarea.input-group-lg > .form-control, .pui--pos .use-bootstrap textarea.input-group-lg > .input-group-addon, .pui--pos .use-bootstrap textarea.input-group-lg > .input-group-btn > .btn, .pui--pos .use-bootstrap select[multiple].input-group-lg > .form-control, .pui--pos .use-bootstrap select[multiple].input-group-lg > .input-group-addon, .pui--pos .use-bootstrap select[multiple].input-group-lg > .input-group-btn > .btn { height: auto; } .pui--pos .use-bootstrap .input-group-sm > .form-control, .pui--pos .use-bootstrap .input-group-sm > .input-group-addon, .pui--pos .use-bootstrap .input-group-sm > .input-group-btn > .btn { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .pui--pos .use-bootstrap select.input-group-sm > .form-control, .pui--pos .use-bootstrap select.input-group-sm > .input-group-addon, .pui--pos .use-bootstrap select.input-group-sm > .input-group-btn > .btn { height: 30px; line-height: 30px; } .pui--pos .use-bootstrap textarea.input-group-sm > .form-control, .pui--pos .use-bootstrap textarea.input-group-sm > .input-group-addon, .pui--pos .use-bootstrap textarea.input-group-sm > .input-group-btn > .btn, .pui--pos .use-bootstrap select[multiple].input-group-sm > .form-control, .pui--pos .use-bootstrap select[multiple].input-group-sm > .input-group-addon, .pui--pos .use-bootstrap select[multiple].input-group-sm > .input-group-btn > .btn { height: auto; } .pui--pos .use-bootstrap .input-group-addon, .pui--pos .use-bootstrap .input-group-btn, .pui--pos .use-bootstrap .input-group .form-control { display: table-cell; } .pui--pos .use-bootstrap .input-group-addon:not(:first-child):not(:last-child), .pui--pos .use-bootstrap .input-group-btn:not(:first-child):not(:last-child), .pui--pos .use-bootstrap .input-group .form-control:not(:first-child):not(:last-child) { border-radius: 0; } .pui--pos .use-bootstrap .input-group-addon, .pui--pos .use-bootstrap .input-group-btn { width: 1%; white-space: nowrap; vertical-align: middle; } .pui--pos .use-bootstrap .input-group-addon { padding: 6px 12px; font-size: 14px; font-weight: normal; line-height: 1; color: #555; text-align: center; background-color: #eee; border: 1px solid #ccc; border-radius: 4px; } .pui--pos .use-bootstrap .input-group-addon.input-sm { padding: 5px 10px; font-size: 12px; border-radius: 3px; } .pui--pos .use-bootstrap .input-group-addon.input-lg { padding: 10px 16px; font-size: 18px; border-radius: 6px; } .pui--pos .use-bootstrap .input-group-addon input[type=radio], .pui--pos .use-bootstrap .input-group-addon input[type=checkbox] { margin-top: 0; } .pui--pos .use-bootstrap .input-group .form-control:first-child, .pui--pos .use-bootstrap .input-group-addon:first-child, .pui--pos .use-bootstrap .input-group-btn:first-child > .btn, .pui--pos .use-bootstrap .input-group-btn:first-child > .btn-group > .btn, .pui--pos .use-bootstrap .input-group-btn:first-child > .dropdown-toggle, .pui--pos .use-bootstrap .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), .pui--pos .use-bootstrap .input-group-btn:last-child > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } .pui--pos .use-bootstrap .input-group-addon:first-child { border-right: 0; } .pui--pos .use-bootstrap .input-group .form-control:last-child, .pui--pos .use-bootstrap .input-group-addon:last-child, .pui--pos .use-bootstrap .input-group-btn:last-child > .btn, .pui--pos .use-bootstrap .input-group-btn:last-child > .btn-group > .btn, .pui--pos .use-bootstrap .input-group-btn:last-child > .dropdown-toggle, .pui--pos .use-bootstrap .input-group-btn:first-child > .btn:not(:first-child), .pui--pos .use-bootstrap .input-group-btn:first-child > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .pui--pos .use-bootstrap .input-group-addon:last-child { border-left: 0; } .pui--pos .use-bootstrap .input-group-btn { position: relative; font-size: 0; white-space: nowrap; } .pui--pos .use-bootstrap .input-group-btn > .btn { position: relative; } .pui--pos .use-bootstrap .input-group-btn > .btn + .btn { margin-left: -1px; } .pui--pos .use-bootstrap .input-group-btn > .btn:hover, .pui--pos .use-bootstrap .input-group-btn > .btn:focus, .pui--pos .use-bootstrap .input-group-btn > .btn:active { z-index: 2; } .pui--pos .use-bootstrap .input-group-btn:first-child > .btn, .pui--pos .use-bootstrap .input-group-btn:first-child > .btn-group { margin-right: -1px; } .pui--pos .use-bootstrap .input-group-btn:last-child > .btn, .pui--pos .use-bootstrap .input-group-btn:last-child > .btn-group { z-index: 2; margin-left: -1px; } .pui--pos .use-bootstrap .nav { padding-left: 0; margin-bottom: 0; list-style: none; } .pui--pos .use-bootstrap .nav > li { position: relative; display: block; } .pui--pos .use-bootstrap .nav > li > a { position: relative; display: block; padding: 10px 15px; } .pui--pos .use-bootstrap .nav > li > a:hover, .pui--pos .use-bootstrap .nav > li > a:focus { text-decoration: none; background-color: #eee; } .pui--pos .use-bootstrap .nav > li.disabled > a { color: #777; } .pui--pos .use-bootstrap .nav > li.disabled > a:hover, .pui--pos .use-bootstrap .nav > li.disabled > a:focus { color: #777; text-decoration: none; cursor: not-allowed; background-color: transparent; } .pui--pos .use-bootstrap .nav .open > a, .pui--pos .use-bootstrap .nav .open > a:hover, .pui--pos .use-bootstrap .nav .open > a:focus { background-color: #eee; border-color: #337ab7; } .pui--pos .use-bootstrap .nav .nav-divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; } .pui--pos .use-bootstrap .nav > li > a > img { max-width: none; } .pui--pos .use-bootstrap .nav-tabs { border-bottom: 1px solid #ddd; } .pui--pos .use-bootstrap .nav-tabs > li { float: left; margin-bottom: -1px; } .pui--pos .use-bootstrap .nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; border: 1px solid transparent; border-radius: 4px 4px 0 0; } .pui--pos .use-bootstrap .nav-tabs > li > a:hover { border-color: #eee #eee #ddd; } .pui--pos .use-bootstrap .nav-tabs > li.active > a, .pui--pos .use-bootstrap .nav-tabs > li.active > a:hover, .pui--pos .use-bootstrap .nav-tabs > li.active > a:focus { color: #555; cursor: default; background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent; } .pui--pos .use-bootstrap .nav-tabs.nav-justified { width: 100%; border-bottom: 0; } .pui--pos .use-bootstrap .nav-tabs.nav-justified > li { float: none; } .pui--pos .use-bootstrap .nav-tabs.nav-justified > li > a { margin-bottom: 5px; text-align: center; } .pui--pos .use-bootstrap .nav-tabs.nav-justified > .dropdown .dropdown-menu { top: auto; left: auto; } @media (min-width: 768px) { .pui--pos .use-bootstrap .nav-tabs.nav-justified > li { display: table-cell; width: 1%; } .pui--pos .use-bootstrap .nav-tabs.nav-justified > li > a { margin-bottom: 0; } } .pui--pos .use-bootstrap .nav-tabs.nav-justified > li > a { margin-right: 0; border-radius: 4px; } .pui--pos .use-bootstrap .nav-tabs.nav-justified > .active > a, .pui--pos .use-bootstrap .nav-tabs.nav-justified > .active > a:hover, .pui--pos .use-bootstrap .nav-tabs.nav-justified > .active > a:focus { border: 1px solid #ddd; } @media (min-width: 768px) { .pui--pos .use-bootstrap .nav-tabs.nav-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; } .pui--pos .use-bootstrap .nav-tabs.nav-justified > .active > a, .pui--pos .use-bootstrap .nav-tabs.nav-justified > .active > a:hover, .pui--pos .use-bootstrap .nav-tabs.nav-justified > .active > a:focus { border-bottom-color: #fff; } } .pui--pos .use-bootstrap .nav-pills > li { float: left; } .pui--pos .use-bootstrap .nav-pills > li > a { border-radius: 4px; } .pui--pos .use-bootstrap .nav-pills > li + li { margin-left: 2px; } .pui--pos .use-bootstrap .nav-pills > li.active > a, .pui--pos .use-bootstrap .nav-pills > li.active > a:hover, .pui--pos .use-bootstrap .nav-pills > li.active > a:focus { color: #fff; background-color: #337ab7; } .pui--pos .use-bootstrap .nav-stacked > li { float: none; } .pui--pos .use-bootstrap .nav-stacked > li + li { margin-top: 2px; margin-left: 0; } .pui--pos .use-bootstrap .nav-justified { width: 100%; } .pui--pos .use-bootstrap .nav-justified > li { float: none; } .pui--pos .use-bootstrap .nav-justified > li > a { margin-bottom: 5px; text-align: center; } .pui--pos .use-bootstrap .nav-justified > .dropdown .dropdown-menu { top: auto; left: auto; } @media (min-width: 768px) { .pui--pos .use-bootstrap .nav-justified > li { display: table-cell; width: 1%; } .pui--pos .use-bootstrap .nav-justified > li > a { margin-bottom: 0; } } .pui--pos .use-bootstrap .nav-tabs-justified { border-bottom: 0; } .pui--pos .use-bootstrap .nav-tabs-justified > li > a { margin-right: 0; border-radius: 4px; } .pui--pos .use-bootstrap .nav-tabs-justified > .active > a, .pui--pos .use-bootstrap .nav-tabs-justified > .active > a:hover, .pui--pos .use-bootstrap .nav-tabs-justified > .active > a:focus { border: 1px solid #ddd; } @media (min-width: 768px) { .pui--pos .use-bootstrap .nav-tabs-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; } .pui--pos .use-bootstrap .nav-tabs-justified > .active > a, .pui--pos .use-bootstrap .nav-tabs-justified > .active > a:hover, .pui--pos .use-bootstrap .nav-tabs-justified > .active > a:focus { border-bottom-color: #fff; } } .pui--pos .use-bootstrap .tab-content > .tab-pane { display: none; } .pui--pos .use-bootstrap .tab-content > .active { display: block; } .pui--pos .use-bootstrap .nav-tabs .dropdown-menu { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; } .pui--pos .use-bootstrap .navbar { position: relative; min-height: 50px; margin-bottom: 20px; border: 1px solid transparent; } @media (min-width: 768px) { .pui--pos .use-bootstrap .navbar { border-radius: 4px; } } @media (min-width: 768px) { .pui--pos .use-bootstrap .navbar-header { float: left; } } .pui--pos .use-bootstrap .navbar-collapse { padding-right: 15px; padding-left: 15px; overflow-x: visible; -webkit-overflow-scrolling: touch; border-top: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .pui--pos .use-bootstrap .navbar-collapse.in { overflow-y: auto; } @media (min-width: 768px) { .pui--pos .use-bootstrap .navbar-collapse { width: auto; border-top: 0; -webkit-box-shadow: none; box-shadow: none; } .pui--pos .use-bootstrap .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; } .pui--pos .use-bootstrap .navbar-collapse.in { overflow-y: visible; } .pui--pos .use-bootstrap .navbar-fixed-top .navbar-collapse, .pui--pos .use-bootstrap .navbar-static-top .navbar-collapse, .pui--pos .use-bootstrap .navbar-fixed-bottom .navbar-collapse { padding-right: 0; padding-left: 0; } } .pui--pos .use-bootstrap .navbar-fixed-top .navbar-collapse, .pui--pos .use-bootstrap .navbar-fixed-bottom .navbar-collapse { max-height: 340px; } @media (max-device-width: 480px) and (orientation: landscape) { .pui--pos .use-bootstrap .navbar-fixed-top .navbar-collapse, .pui--pos .use-bootstrap .navbar-fixed-bottom .navbar-collapse { max-height: 200px; } } .pui--pos .use-bootstrap .container > .navbar-header, .pui--pos .use-bootstrap .container-fluid > .navbar-header, .pui--pos .use-bootstrap .container > .navbar-collapse, .pui--pos .use-bootstrap .container-fluid > .navbar-collapse { margin-right: -15px; margin-left: -15px; } @media (min-width: 768px) { .pui--pos .use-bootstrap .container > .navbar-header, .pui--pos .use-bootstrap .container-fluid > .navbar-header, .pui--pos .use-bootstrap .container > .navbar-collapse, .pui--pos .use-bootstrap .container-fluid > .navbar-collapse { margin-right: 0; margin-left: 0; } } .pui--pos .use-bootstrap .navbar-static-top { z-index: 1000; border-width: 0 0 1px; } @media (min-width: 768px) { .pui--pos .use-bootstrap .navbar-static-top { border-radius: 0; } } .pui--pos .use-bootstrap .navbar-fixed-top, .pui--pos .use-bootstrap .navbar-fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030; } @media (min-width: 768px) { .pui--pos .use-bootstrap .navbar-fixed-top, .pui--pos .use-bootstrap .navbar-fixed-bottom { border-radius: 0; } } .pui--pos .use-bootstrap .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .pui--pos .use-bootstrap .navbar-fixed-bottom { bottom: 0; margin-bottom: 0; border-width: 1px 0 0; } .pui--pos .use-bootstrap .navbar-brand { float: left; height: 50px; padding: 15px 15px; font-size: 18px; line-height: 20px; } .pui--pos .use-bootstrap .navbar-brand:hover, .pui--pos .use-bootstrap .navbar-brand:focus { text-decoration: none; } .pui--pos .use-bootstrap .navbar-brand > img { display: block; } @media (min-width: 768px) { .pui--pos .use-bootstrap .navbar > .container .navbar-brand, .pui--pos .use-bootstrap .navbar > .container-fluid .navbar-brand { margin-left: -15px; } } .pui--pos .use-bootstrap .navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 8px; margin-right: 15px; margin-bottom: 8px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; } .pui--pos .use-bootstrap .navbar-toggle:focus { outline: 0; } .pui--pos .use-bootstrap .navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; } .pui--pos .use-bootstrap .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; } @media (min-width: 768px) { .pui--pos .use-bootstrap .navbar-toggle { display: none; } } .pui--pos .use-bootstrap .navbar-nav { margin: 7.5px -15px; } .pui--pos .use-bootstrap .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; } @media (max-width: 767px) { .pui--pos .use-bootstrap .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } .pui--pos .use-bootstrap .navbar-nav .open .dropdown-menu > li > a, .pui--pos .use-bootstrap .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .pui--pos .use-bootstrap .navbar-nav .open .dropdown-menu > li > a { line-height: 20px; } .pui--pos .use-bootstrap .navbar-nav .open .dropdown-menu > li > a:hover, .pui--pos .use-bootstrap .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none; } } @media (min-width: 768px) { .pui--pos .use-bootstrap .navbar-nav { float: left; margin: 0; } .pui--pos .use-bootstrap .navbar-nav > li { float: left; } .pui--pos .use-bootstrap .navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; } } .pui--pos .use-bootstrap .navbar-form { padding: 10px 15px; margin-top: 8px; margin-right: -15px; margin-bottom: 8px; margin-left: -15px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); } @media (min-width: 768px) { .pui--pos .use-bootstrap .navbar-form .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; } .pui--pos .use-bootstrap .navbar-form .form-control { display: inline-block; width: auto; vertical-align: middle; } .pui--pos .use-bootstrap .navbar-form .form-control-static { display: inline-block; } .pui--pos .use-bootstrap .navbar-form .input-group { display: inline-table; vertical-align: middle; } .pui--pos .use-bootstrap .navbar-form .input-group .input-group-addon, .pui--pos .use-bootstrap .navbar-form .input-group .input-group-btn, .pui--pos .use-bootstrap .navbar-form .input-group .form-control { width: auto; } .pui--pos .use-bootstrap .navbar-form .input-group > .form-control { width: 100%; } .pui--pos .use-bootstrap .navbar-form .control-label { margin-bottom: 0; vertical-align: middle; } .pui--pos .use-bootstrap .navbar-form .radio, .pui--pos .use-bootstrap .navbar-form .checkbox { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; } .pui--pos .use-bootstrap .navbar-form .radio label, .pui--pos .use-bootstrap .navbar-form .checkbox label { padding-left: 0; } .pui--pos .use-bootstrap .navbar-form .radio input[type=radio], .pui--pos .use-bootstrap .navbar-form .checkbox input[type=checkbox] { position: relative; margin-left: 0; } .pui--pos .use-bootstrap .navbar-form .has-feedback .form-control-feedback { top: 0; } } @media (max-width: 767px) { .pui--pos .use-bootstrap .navbar-form .form-group { margin-bottom: 5px; } .pui--pos .use-bootstrap .navbar-form .form-group:last-child { margin-bottom: 0; } } @media (min-width: 768px) { .pui--pos .use-bootstrap .navbar-form { width: auto; padding-top: 0; padding-bottom: 0; margin-right: 0; margin-left: 0; border: 0; -webkit-box-shadow: none; box-shadow: none; } } .pui--pos .use-bootstrap .navbar-nav > li > .dropdown-menu { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .pui--pos .use-bootstrap .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { margin-bottom: 0; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .pui--pos .use-bootstrap .navbar-btn { margin-top: 8px; margin-bottom: 8px; } .pui--pos .use-bootstrap .navbar-btn.btn-sm { margin-top: 10px; margin-bottom: 10px; } .pui--pos .use-bootstrap .navbar-btn.btn-xs { margin-top: 14px; margin-bottom: 14px; } .pui--pos .use-bootstrap .navbar-text { margin-top: 15px; margin-bottom: 15px; } @media (min-width: 768px) { .pui--pos .use-bootstrap .navbar-text { float: left; margin-right: 15px; margin-left: 15px; } } @media (min-width: 768px) { .pui--pos .use-bootstrap .navbar-left { float: left !important; } .pui--pos .use-bootstrap .navbar-right { float: right !important; margin-right: -15px; } .pui--pos .use-bootstrap .navbar-right ~ .navbar-right { margin-right: 0; } } .pui--pos .use-bootstrap .navbar-default { background-color: #f8f8f8; border-color: #e7e7e7; } .pui--pos .use-bootstrap .navbar-default .navbar-brand { color: #777; } .pui--pos .use-bootstrap .navbar-default .navbar-brand:hover, .pui--pos .use-bootstrap .navbar-default .navbar-brand:focus { color: #5e5e5e; background-color: transparent; } .pui--pos .use-bootstrap .navbar-default .navbar-text { color: #777; } .pui--pos .use-bootstrap .navbar-default .navbar-nav > li > a { color: #777; } .pui--pos .use-bootstrap .navbar-default .navbar-nav > li > a:hover, .pui--pos .use-bootstrap .navbar-default .navbar-nav > li > a:focus { color: #333; background-color: transparent; } .pui--pos .use-bootstrap .navbar-default .navbar-nav > .active > a, .pui--pos .use-bootstrap .navbar-default .navbar-nav > .active > a:hover, .pui--pos .use-bootstrap .navbar-default .navbar-nav > .active > a:focus { color: #555; background-color: #e7e7e7; } .pui--pos .use-bootstrap .navbar-default .navbar-nav > .disabled > a, .pui--pos .use-bootstrap .navbar-default .navbar-nav > .disabled > a:hover, .pui--pos .use-bootstrap .navbar-default .navbar-nav > .disabled > a:focus { color: #ccc; background-color: transparent; } .pui--pos .use-bootstrap .navbar-default .navbar-toggle { border-color: #ddd; } .pui--pos .use-bootstrap .navbar-default .navbar-toggle:hover, .pui--pos .use-bootstrap .navbar-default .navbar-toggle:focus { background-color: #ddd; } .pui--pos .use-bootstrap .navbar-default .navbar-toggle .icon-bar { background-color: #888; } .pui--pos .use-bootstrap .navbar-default .navbar-collapse, .pui--pos .use-bootstrap .navbar-default .navbar-form { border-color: #e7e7e7; } .pui--pos .use-bootstrap .navbar-default .navbar-nav > .open > a, .pui--pos .use-bootstrap .navbar-default .navbar-nav > .open > a:hover, .pui--pos .use-bootstrap .navbar-default .navbar-nav > .open > a:focus { color: #555; background-color: #e7e7e7; } @media (max-width: 767px) { .pui--pos .use-bootstrap .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #777; } .pui--pos .use-bootstrap .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .pui--pos .use-bootstrap .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #333; background-color: transparent; } .pui--pos .use-bootstrap .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .pui--pos .use-bootstrap .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .pui--pos .use-bootstrap .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #555; background-color: #e7e7e7; } .pui--pos .use-bootstrap .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .pui--pos .use-bootstrap .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .pui--pos .use-bootstrap .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #ccc; background-color: transparent; } } .pui--pos .use-bootstrap .navbar-default .navbar-link { color: #777; } .pui--pos .use-bootstrap .navbar-default .navbar-link:hover { color: #333; } .pui--pos .use-bootstrap .navbar-default .btn-link { color: #777; } .pui--pos .use-bootstrap .navbar-default .btn-link:hover, .pui--pos .use-bootstrap .navbar-default .btn-link:focus { color: #333; } .pui--pos .use-bootstrap .navbar-default .btn-link[disabled]:hover, .pui--pos .use-bootstrap fieldset[disabled] .navbar-default .btn-link:hover, .pui--pos .use-bootstrap .navbar-default .btn-link[disabled]:focus, .pui--pos .use-bootstrap fieldset[disabled] .navbar-default .btn-link:focus { color: #ccc; } .pui--pos .use-bootstrap .navbar-inverse { background-color: #222; border-color: #080808; } .pui--pos .use-bootstrap .navbar-inverse .navbar-brand { color: #9d9d9d; } .pui--pos .use-bootstrap .navbar-inverse .navbar-brand:hover, .pui--pos .use-bootstrap .navbar-inverse .navbar-brand:focus { color: #fff; background-color: transparent; } .pui--pos .use-bootstrap .navbar-inverse .navbar-text { color: #9d9d9d; } .pui--pos .use-bootstrap .navbar-inverse .navbar-nav > li > a { color: #9d9d9d; } .pui--pos .use-bootstrap .navbar-inverse .navbar-nav > li > a:hover, .pui--pos .use-bootstrap .navbar-inverse .navbar-nav > li > a:focus { color: #fff; background-color: transparent; } .pui--pos .use-bootstrap .navbar-inverse .navbar-nav > .active > a, .pui--pos .use-bootstrap .navbar-inverse .navbar-nav > .active > a:hover, .pui--pos .use-bootstrap .navbar-inverse .navbar-nav > .active > a:focus { color: #fff; background-color: #080808; } .pui--pos .use-bootstrap .navbar-inverse .navbar-nav > .disabled > a, .pui--pos .use-bootstrap .navbar-inverse .navbar-nav > .disabled > a:hover, .pui--pos .use-bootstrap .navbar-inverse .navbar-nav > .disabled > a:focus { color: #444; background-color: transparent; } .pui--pos .use-bootstrap .navbar-inverse .navbar-toggle { border-color: #333; } .pui--pos .use-bootstrap .navbar-inverse .navbar-toggle:hover, .pui--pos .use-bootstrap .navbar-inverse .navbar-toggle:focus { background-color: #333; } .pui--pos .use-bootstrap .navbar-inverse .navbar-toggle .icon-bar { background-color: #fff; } .pui--pos .use-bootstrap .navbar-inverse .navbar-collapse, .pui--pos .use-bootstrap .navbar-inverse .navbar-form { border-color: #101010; } .pui--pos .use-bootstrap .navbar-inverse .navbar-nav > .open > a, .pui--pos .use-bootstrap .navbar-inverse .navbar-nav > .open > a:hover, .pui--pos .use-bootstrap .navbar-inverse .navbar-nav > .open > a:focus { color: #fff; background-color: #080808; } @media (max-width: 767px) { .pui--pos .use-bootstrap .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { border-color: #080808; } .pui--pos .use-bootstrap .navbar-inverse .navbar-nav .open .dropdown-menu .divider { background-color: #080808; } .pui--pos .use-bootstrap .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #9d9d9d; } .pui--pos .use-bootstrap .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .pui--pos .use-bootstrap .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { color: #fff; background-color: transparent; } .pui--pos .use-bootstrap .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .pui--pos .use-bootstrap .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .pui--pos .use-bootstrap .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { color: #fff; background-color: #080808; } .pui--pos .use-bootstrap .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, .pui--pos .use-bootstrap .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, .pui--pos .use-bootstrap .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #444; background-color: transparent; } } .pui--pos .use-bootstrap .navbar-inverse .navbar-link { color: #9d9d9d; } .pui--pos .use-bootstrap .navbar-inverse .navbar-link:hover { color: #fff; } .pui--pos .use-bootstrap .navbar-inverse .btn-link { color: #9d9d9d; } .pui--pos .use-bootstrap .navbar-inverse .btn-link:hover, .pui--pos .use-bootstrap .navbar-inverse .btn-link:focus { color: #fff; } .pui--pos .use-bootstrap .navbar-inverse .btn-link[disabled]:hover, .pui--pos .use-bootstrap fieldset[disabled] .navbar-inverse .btn-link:hover, .pui--pos .use-bootstrap .navbar-inverse .btn-link[disabled]:focus, .pui--pos .use-bootstrap fieldset[disabled] .navbar-inverse .btn-link:focus { color: #444; } .pui--pos .use-bootstrap .breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px; } .pui--pos .use-bootstrap .breadcrumb > li { display: inline-block; } .pui--pos .use-bootstrap .breadcrumb > li + li:before { padding: 0 5px; color: #ccc; content: "/ "; } .pui--pos .use-bootstrap .breadcrumb > .active { color: #777; } .pui--pos .use-bootstrap .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; } .pui--pos .use-bootstrap .pagination > li { display: inline; } .pui--pos .use-bootstrap .pagination > li > a, .pui--pos .use-bootstrap .pagination > li > span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #337ab7; text-decoration: none; background-color: #fff; border: 1px solid #ddd; } .pui--pos .use-bootstrap .pagination > li:first-child > a, .pui--pos .use-bootstrap .pagination > li:first-child > span { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .pui--pos .use-bootstrap .pagination > li:last-child > a, .pui--pos .use-bootstrap .pagination > li:last-child > span { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .pui--pos .use-bootstrap .pagination > li > a:hover, .pui--pos .use-bootstrap .pagination > li > span:hover, .pui--pos .use-bootstrap .pagination > li > a:focus, .pui--pos .use-bootstrap .pagination > li > span:focus { z-index: 2; color: #23527c; background-color: #eee; border-color: #ddd; } .pui--pos .use-bootstrap .pagination > .active > a, .pui--pos .use-bootstrap .pagination > .active > span, .pui--pos .use-bootstrap .pagination > .active > a:hover, .pui--pos .use-bootstrap .pagination > .active > span:hover, .pui--pos .use-bootstrap .pagination > .active > a:focus, .pui--pos .use-bootstrap .pagination > .active > span:focus { z-index: 3; color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7; } .pui--pos .use-bootstrap .pagination > .disabled > span, .pui--pos .use-bootstrap .pagination > .disabled > span:hover, .pui--pos .use-bootstrap .pagination > .disabled > span:focus, .pui--pos .use-bootstrap .pagination > .disabled > a, .pui--pos .use-bootstrap .pagination > .disabled > a:hover, .pui--pos .use-bootstrap .pagination > .disabled > a:focus { color: #777; cursor: not-allowed; background-color: #fff; border-color: #ddd; } .pui--pos .use-bootstrap .pagination-lg > li > a, .pui--pos .use-bootstrap .pagination-lg > li > span { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; } .pui--pos .use-bootstrap .pagination-lg > li:first-child > a, .pui--pos .use-bootstrap .pagination-lg > li:first-child > span { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .pui--pos .use-bootstrap .pagination-lg > li:last-child > a, .pui--pos .use-bootstrap .pagination-lg > li:last-child > span { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .pui--pos .use-bootstrap .pagination-sm > li > a, .pui--pos .use-bootstrap .pagination-sm > li > span { padding: 5px 10px; font-size: 12px; line-height: 1.5; } .pui--pos .use-bootstrap .pagination-sm > li:first-child > a, .pui--pos .use-bootstrap .pagination-sm > li:first-child > span { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .pui--pos .use-bootstrap .pagination-sm > li:last-child > a, .pui--pos .use-bootstrap .pagination-sm > li:last-child > span { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .pui--pos .use-bootstrap .pager { padding-left: 0; margin: 20px 0; text-align: center; list-style: none; } .pui--pos .use-bootstrap .pager li { display: inline; } .pui--pos .use-bootstrap .pager li > a, .pui--pos .use-bootstrap .pager li > span { display: inline-block; padding: 5px 14px; background-color: #fff; border: 1px solid #ddd; border-radius: 15px; } .pui--pos .use-bootstrap .pager li > a:hover, .pui--pos .use-bootstrap .pager li > a:focus { text-decoration: none; background-color: #eee; } .pui--pos .use-bootstrap .pager .next > a, .pui--pos .use-bootstrap .pager .next > span { float: right; } .pui--pos .use-bootstrap .pager .previous > a, .pui--pos .use-bootstrap .pager .previous > span { float: left; } .pui--pos .use-bootstrap .pager .disabled > a, .pui--pos .use-bootstrap .pager .disabled > a:hover, .pui--pos .use-bootstrap .pager .disabled > a:focus, .pui--pos .use-bootstrap .pager .disabled > span { color: #777; cursor: not-allowed; background-color: #fff; } .pui--pos .use-bootstrap .label { display: inline; padding: 0.2em 0.6em 0.3em; font-size: 75%; font-weight: bold; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25em; } .pui--pos .use-bootstrap a.label:hover, .pui--pos .use-bootstrap a.label:focus { color: #fff; text-decoration: none; cursor: pointer; } .pui--pos .use-bootstrap .label:empty { display: none; } .pui--pos .use-bootstrap .btn .label { position: relative; top: -1px; } .pui--pos .use-bootstrap .label-default { background-color: #777; } .pui--pos .use-bootstrap .label-default[href]:hover, .pui--pos .use-bootstrap .label-default[href]:focus { background-color: #5e5e5e; } .pui--pos .use-bootstrap .label-primary { background-color: #337ab7; } .pui--pos .use-bootstrap .label-primary[href]:hover, .pui--pos .use-bootstrap .label-primary[href]:focus { background-color: #286090; } .pui--pos .use-bootstrap .label-success { background-color: #5cb85c; } .pui--pos .use-bootstrap .label-success[href]:hover, .pui--pos .use-bootstrap .label-success[href]:focus { background-color: #449d44; } .pui--pos .use-bootstrap .label-info { background-color: #5bc0de; } .pui--pos .use-bootstrap .label-info[href]:hover, .pui--pos .use-bootstrap .label-info[href]:focus { background-color: #31b0d5; } .pui--pos .use-bootstrap .label-warning { background-color: #f0ad4e; } .pui--pos .use-bootstrap .label-warning[href]:hover, .pui--pos .use-bootstrap .label-warning[href]:focus { background-color: #ec971f; } .pui--pos .use-bootstrap .label-danger { background-color: #d9534f; } .pui--pos .use-bootstrap .label-danger[href]:hover, .pui--pos .use-bootstrap .label-danger[href]:focus { background-color: #c9302c; } .pui--pos .use-bootstrap .badge { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; font-weight: bold; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: middle; background-color: #777; border-radius: 10px; } .pui--pos .use-bootstrap .badge:empty { display: none; } .pui--pos .use-bootstrap .btn .badge { position: relative; top: -1px; } .pui--pos .use-bootstrap .btn-xs .badge, .pui--pos .use-bootstrap .btn-group-xs > .btn .badge { top: 0; padding: 1px 5px; } .pui--pos .use-bootstrap a.badge:hover, .pui--pos .use-bootstrap a.badge:focus { color: #fff; text-decoration: none; cursor: pointer; } .pui--pos .use-bootstrap .list-group-item.active > .badge, .pui--pos .use-bootstrap .nav-pills > .active > a > .badge { color: #337ab7; background-color: #fff; } .pui--pos .use-bootstrap .list-group-item > .badge { float: right; } .pui--pos .use-bootstrap .list-group-item > .badge + .badge { margin-right: 5px; } .pui--pos .use-bootstrap .nav-pills > li > a > .badge { margin-left: 3px; } .pui--pos .use-bootstrap .jumbotron { padding-top: 30px; padding-bottom: 30px; margin-bottom: 30px; color: inherit; background-color: #eee; } .pui--pos .use-bootstrap .jumbotron h1, .pui--pos .use-bootstrap .jumbotron .h1 { color: inherit; } .pui--pos .use-bootstrap .jumbotron p { margin-bottom: 15px; font-size: 21px; font-weight: 200; } .pui--pos .use-bootstrap .jumbotron > hr { border-top-color: #d5d5d5; } .pui--pos .use-bootstrap .container .jumbotron, .pui--pos .use-bootstrap .container-fluid .jumbotron { padding-right: 15px; padding-left: 15px; border-radius: 6px; } .pui--pos .use-bootstrap .jumbotron .container { max-width: 100%; } @media screen and (min-width: 768px) { .pui--pos .use-bootstrap .jumbotron { padding-top: 48px; padding-bottom: 48px; } .pui--pos .use-bootstrap .container .jumbotron, .pui--pos .use-bootstrap .container-fluid .jumbotron { padding-right: 60px; padding-left: 60px; } .pui--pos .use-bootstrap .jumbotron h1, .pui--pos .use-bootstrap .jumbotron .h1 { font-size: 63px; } } .pui--pos .use-bootstrap .thumbnail { display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .pui--pos .use-bootstrap .thumbnail > img, .pui--pos .use-bootstrap .thumbnail a > img { margin-right: auto; margin-left: auto; } .pui--pos .use-bootstrap a.thumbnail:hover, .pui--pos .use-bootstrap a.thumbnail:focus, .pui--pos .use-bootstrap a.thumbnail.active { border-color: #337ab7; } .pui--pos .use-bootstrap .thumbnail .caption { padding: 9px; color: #333; } .pui--pos .use-bootstrap .alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } .pui--pos .use-bootstrap .alert h4 { margin-top: 0; color: inherit; } .pui--pos .use-bootstrap .alert .alert-link { font-weight: bold; } .pui--pos .use-bootstrap .alert > p, .pui--pos .use-bootstrap .alert > ul { margin-bottom: 0; } .pui--pos .use-bootstrap .alert > p + p { margin-top: 5px; } .pui--pos .use-bootstrap .alert-dismissable, .pui--pos .use-bootstrap .alert-dismissible { padding-right: 35px; } .pui--pos .use-bootstrap .alert-dismissable .close, .pui--pos .use-bootstrap .alert-dismissible .close { position: relative; top: -2px; right: -21px; color: inherit; } .pui--pos .use-bootstrap .alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .pui--pos .use-bootstrap .alert-success hr { border-top-color: #c9e2b3; } .pui--pos .use-bootstrap .alert-success .alert-link { color: #2b542c; } .pui--pos .use-bootstrap .alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } .pui--pos .use-bootstrap .alert-info hr { border-top-color: #a6e1ec; } .pui--pos .use-bootstrap .alert-info .alert-link { color: #245269; } .pui--pos .use-bootstrap .alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } .pui--pos .use-bootstrap .alert-warning hr { border-top-color: #f7e1b5; } .pui--pos .use-bootstrap .alert-warning .alert-link { color: #66512c; } .pui--pos .use-bootstrap .alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .pui--pos .use-bootstrap .alert-danger hr { border-top-color: #e4b9c0; } .pui--pos .use-bootstrap .alert-danger .alert-link { color: #843534; } @-webkit-keyframes pos-progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-o-keyframes pos-progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @keyframes pos-progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } .pui--pos .use-bootstrap .progress { height: 20px; margin-bottom: 20px; overflow: hidden; background-color: #f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .pui--pos .use-bootstrap .progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: #337ab7; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; } .pui--pos .use-bootstrap .progress-striped .progress-bar, .pui--pos .use-bootstrap .progress-bar-striped { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; background-size: 40px 40px; } .pui--pos .use-bootstrap .progress.active .progress-bar, .pui--pos .use-bootstrap .progress-bar.active { -webkit-animation: pos-progress-bar-stripes 2s linear infinite; -o-animation: pos-progress-bar-stripes 2s linear infinite; animation: pos-progress-bar-stripes 2s linear infinite; } .pui--pos .use-bootstrap .progress-bar-success { background-color: #5cb85c; } .pui--pos .use-bootstrap .progress-striped .progress-bar-success { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .pui--pos .use-bootstrap .progress-bar-info { background-color: #5bc0de; } .pui--pos .use-bootstrap .progress-striped .progress-bar-info { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .pui--pos .use-bootstrap .progress-bar-warning { background-color: #f0ad4e; } .pui--pos .use-bootstrap .progress-striped .progress-bar-warning { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .pui--pos .use-bootstrap .progress-bar-danger { background-color: #d9534f; } .pui--pos .use-bootstrap .progress-striped .progress-bar-danger { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .pui--pos .use-bootstrap .media { margin-top: 15px; } .pui--pos .use-bootstrap .media:first-child { margin-top: 0; } .pui--pos .use-bootstrap .media, .pui--pos .use-bootstrap .media-body { overflow: hidden; zoom: 1; } .pui--pos .use-bootstrap .media-body { width: 10000px; } .pui--pos .use-bootstrap .media-object { display: block; } .pui--pos .use-bootstrap .media-object.img-thumbnail { max-width: none; } .pui--pos .use-bootstrap .media-right, .pui--pos .use-bootstrap .media > .pull-right, .pui--pos .use-bootstrap #aside .alert-dismissible .media > .close, .pui--pos #aside .alert-dismissible .use-bootstrap .media > .close { padding-left: 10px; } .pui--pos .use-bootstrap .media-left, .pui--pos .use-bootstrap .media > .pull-left { padding-right: 10px; } .pui--pos .use-bootstrap .media-left, .pui--pos .use-bootstrap .media-right, .pui--pos .use-bootstrap .media-body { display: table-cell; vertical-align: top; } .pui--pos .use-bootstrap .media-middle { vertical-align: middle; } .pui--pos .use-bootstrap .media-bottom { vertical-align: bottom; } .pui--pos .use-bootstrap .media-heading { margin-top: 0; margin-bottom: 5px; } .pui--pos .use-bootstrap .media-list { padding-left: 0; list-style: none; } .pui--pos .use-bootstrap .list-group { padding-left: 0; margin-bottom: 20px; } .pui--pos .use-bootstrap .list-group-item { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid #ddd; } .pui--pos .use-bootstrap .list-group-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .pui--pos .use-bootstrap .list-group-item:last-child { margin-bottom: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .pui--pos .use-bootstrap a.list-group-item, .pui--pos .use-bootstrap button.list-group-item { color: #555; } .pui--pos .use-bootstrap a.list-group-item .list-group-item-heading, .pui--pos .use-bootstrap button.list-group-item .list-group-item-heading { color: #333; } .pui--pos .use-bootstrap a.list-group-item:hover, .pui--pos .use-bootstrap button.list-group-item:hover, .pui--pos .use-bootstrap a.list-group-item:focus, .pui--pos .use-bootstrap button.list-group-item:focus { color: #555; text-decoration: none; background-color: #f5f5f5; } .pui--pos .use-bootstrap button.list-group-item { width: 100%; text-align: left; } .pui--pos .use-bootstrap .list-group-item.disabled, .pui--pos .use-bootstrap .list-group-item.disabled:hover, .pui--pos .use-bootstrap .list-group-item.disabled:focus { color: #777; cursor: not-allowed; background-color: #eee; } .pui--pos .use-bootstrap .list-group-item.disabled .list-group-item-heading, .pui--pos .use-bootstrap .list-group-item.disabled:hover .list-group-item-heading, .pui--pos .use-bootstrap .list-group-item.disabled:focus .list-group-item-heading { color: inherit; } .pui--pos .use-bootstrap .list-group-item.disabled .list-group-item-text, .pui--pos .use-bootstrap .list-group-item.disabled:hover .list-group-item-text, .pui--pos .use-bootstrap .list-group-item.disabled:focus .list-group-item-text { color: #777; } .pui--pos .use-bootstrap .list-group-item.active, .pui--pos .use-bootstrap .list-group-item.active:hover, .pui--pos .use-bootstrap .list-group-item.active:focus { z-index: 2; color: #fff; background-color: #337ab7; border-color: #337ab7; } .pui--pos .use-bootstrap .list-group-item.active .list-group-item-heading, .pui--pos .use-bootstrap .list-group-item.active:hover .list-group-item-heading, .pui--pos .use-bootstrap .list-group-item.active:focus .list-group-item-heading, .pui--pos .use-bootstrap .list-group-item.active .list-group-item-heading > small, .pui--pos .use-bootstrap .list-group-item.active:hover .list-group-item-heading > small, .pui--pos .use-bootstrap .list-group-item.active:focus .list-group-item-heading > small, .pui--pos .use-bootstrap .list-group-item.active .list-group-item-heading > .small, .pui--pos .use-bootstrap .list-group-item.active:hover .list-group-item-heading > .small, .pui--pos .use-bootstrap .list-group-item.active:focus .list-group-item-heading > .small { color: inherit; } .pui--pos .use-bootstrap .list-group-item.active .list-group-item-text, .pui--pos .use-bootstrap .list-group-item.active:hover .list-group-item-text, .pui--pos .use-bootstrap .list-group-item.active:focus .list-group-item-text { color: #c7ddef; } .pui--pos .use-bootstrap .list-group-item-success { color: #3c763d; background-color: #dff0d8; } .pui--pos .use-bootstrap a.list-group-item-success, .pui--pos .use-bootstrap button.list-group-item-success { color: #3c763d; } .pui--pos .use-bootstrap a.list-group-item-success .list-group-item-heading, .pui--pos .use-bootstrap button.list-group-item-success .list-group-item-heading { color: inherit; } .pui--pos .use-bootstrap a.list-group-item-success:hover, .pui--pos .use-bootstrap button.list-group-item-success:hover, .pui--pos .use-bootstrap a.list-group-item-success:focus, .pui--pos .use-bootstrap button.list-group-item-success:focus { color: #3c763d; background-color: #d0e9c6; } .pui--pos .use-bootstrap a.list-group-item-success.active, .pui--pos .use-bootstrap button.list-group-item-success.active, .pui--pos .use-bootstrap a.list-group-item-success.active:hover, .pui--pos .use-bootstrap button.list-group-item-success.active:hover, .pui--pos .use-bootstrap a.list-group-item-success.active:focus, .pui--pos .use-bootstrap button.list-group-item-success.active:focus { color: #fff; background-color: #3c763d; border-color: #3c763d; } .pui--pos .use-bootstrap .list-group-item-info { color: #31708f; background-color: #d9edf7; } .pui--pos .use-bootstrap a.list-group-item-info, .pui--pos .use-bootstrap button.list-group-item-info { color: #31708f; } .pui--pos .use-bootstrap a.list-group-item-info .list-group-item-heading, .pui--pos .use-bootstrap button.list-group-item-info .list-group-item-heading { color: inherit; } .pui--pos .use-bootstrap a.list-group-item-info:hover, .pui--pos .use-bootstrap button.list-group-item-info:hover, .pui--pos .use-bootstrap a.list-group-item-info:focus, .pui--pos .use-bootstrap button.list-group-item-info:focus { color: #31708f; background-color: #c4e3f3; } .pui--pos .use-bootstrap a.list-group-item-info.active, .pui--pos .use-bootstrap button.list-group-item-info.active, .pui--pos .use-bootstrap a.list-group-item-info.active:hover, .pui--pos .use-bootstrap button.list-group-item-info.active:hover, .pui--pos .use-bootstrap a.list-group-item-info.active:focus, .pui--pos .use-bootstrap button.list-group-item-info.active:focus { color: #fff; background-color: #31708f; border-color: #31708f; } .pui--pos .use-bootstrap .list-group-item-warning { color: #8a6d3b; background-color: #fcf8e3; } .pui--pos .use-bootstrap a.list-group-item-warning, .pui--pos .use-bootstrap button.list-group-item-warning { color: #8a6d3b; } .pui--pos .use-bootstrap a.list-group-item-warning .list-group-item-heading, .pui--pos .use-bootstrap button.list-group-item-warning .list-group-item-heading { color: inherit; } .pui--pos .use-bootstrap a.list-group-item-warning:hover, .pui--pos .use-bootstrap button.list-group-item-warning:hover, .pui--pos .use-bootstrap a.list-group-item-warning:focus, .pui--pos .use-bootstrap button.list-group-item-warning:focus { color: #8a6d3b; background-color: #faf2cc; } .pui--pos .use-bootstrap a.list-group-item-warning.active, .pui--pos .use-bootstrap button.list-group-item-warning.active, .pui--pos .use-bootstrap a.list-group-item-warning.active:hover, .pui--pos .use-bootstrap button.list-group-item-warning.active:hover, .pui--pos .use-bootstrap a.list-group-item-warning.active:focus, .pui--pos .use-bootstrap button.list-group-item-warning.active:focus { color: #fff; background-color: #8a6d3b; border-color: #8a6d3b; } .pui--pos .use-bootstrap .list-group-item-danger { color: #a94442; background-color: #f2dede; } .pui--pos .use-bootstrap a.list-group-item-danger, .pui--pos .use-bootstrap button.list-group-item-danger { color: #a94442; } .pui--pos .use-bootstrap a.list-group-item-danger .list-group-item-heading, .pui--pos .use-bootstrap button.list-group-item-danger .list-group-item-heading { color: inherit; } .pui--pos .use-bootstrap a.list-group-item-danger:hover, .pui--pos .use-bootstrap button.list-group-item-danger:hover, .pui--pos .use-bootstrap a.list-group-item-danger:focus, .pui--pos .use-bootstrap button.list-group-item-danger:focus { color: #a94442; background-color: #ebcccc; } .pui--pos .use-bootstrap a.list-group-item-danger.active, .pui--pos .use-bootstrap button.list-group-item-danger.active, .pui--pos .use-bootstrap a.list-group-item-danger.active:hover, .pui--pos .use-bootstrap button.list-group-item-danger.active:hover, .pui--pos .use-bootstrap a.list-group-item-danger.active:focus, .pui--pos .use-bootstrap button.list-group-item-danger.active:focus { color: #fff; background-color: #a94442; border-color: #a94442; } .pui--pos .use-bootstrap .list-group-item-heading { margin-top: 0; margin-bottom: 5px; } .pui--pos .use-bootstrap .list-group-item-text { margin-bottom: 0; line-height: 1.3; } .pui--pos .use-bootstrap .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } .pui--pos .use-bootstrap .panel-body { padding: 15px; } .pui--pos .use-bootstrap .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; } .pui--pos .use-bootstrap .panel-heading > .dropdown .dropdown-toggle { color: inherit; } .pui--pos .use-bootstrap .panel-title { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .pui--pos .use-bootstrap .panel-title > a, .pui--pos .use-bootstrap .panel-title > small, .pui--pos .use-bootstrap .panel-title > .small, .pui--pos .use-bootstrap .panel-title > small > a, .pui--pos .use-bootstrap .panel-title > .small > a { color: inherit; } .pui--pos .use-bootstrap .panel-footer { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #ddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } .pui--pos .use-bootstrap .panel > .list-group, .pui--pos .use-bootstrap .panel > .panel-collapse > .list-group { margin-bottom: 0; } .pui--pos .use-bootstrap .panel > .list-group .list-group-item, .pui--pos .use-bootstrap .panel > .panel-collapse > .list-group .list-group-item { border-width: 1px 0; border-radius: 0; } .pui--pos .use-bootstrap .panel > .list-group:first-child .list-group-item:first-child, .pui--pos .use-bootstrap .panel > .panel-collapse > .list-group:first-child .list-group-item:first-child { border-top: 0; border-top-left-radius: 3px; border-top-right-radius: 3px; } .pui--pos .use-bootstrap .panel > .list-group:last-child .list-group-item:last-child, .pui--pos .use-bootstrap .panel > .panel-collapse > .list-group:last-child .list-group-item:last-child { border-bottom: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } .pui--pos .use-bootstrap .panel > .panel-heading + .panel-collapse > .list-group .list-group-item:first-child { border-top-left-radius: 0; border-top-right-radius: 0; } .pui--pos .use-bootstrap .panel-heading + .list-group .list-group-item:first-child { border-top-width: 0; } .pui--pos .use-bootstrap .list-group + .panel-footer { border-top-width: 0; } .pui--pos .use-bootstrap .panel > .table, .pui--pos .use-bootstrap .panel > .table-responsive > .table, .pui--pos .use-bootstrap .panel > .panel-collapse > .table { margin-bottom: 0; } .pui--pos .use-bootstrap .panel > .table caption, .pui--pos .use-bootstrap .panel > .table-responsive > .table caption, .pui--pos .use-bootstrap .panel > .panel-collapse > .table caption { padding-right: 15px; padding-left: 15px; } .pui--pos .use-bootstrap .panel > .table:first-child, .pui--pos .use-bootstrap .panel > .table-responsive:first-child > .table:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; } .pui--pos .use-bootstrap .panel > .table:first-child > thead:first-child > tr:first-child, .pui--pos .use-bootstrap .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child, .pui--pos .use-bootstrap .panel > .table:first-child > tbody:first-child > tr:first-child, .pui--pos .use-bootstrap .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; } .pui--pos .use-bootstrap .panel > .table:first-child > thead:first-child > tr:first-child td:first-child, .pui--pos .use-bootstrap .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child, .pui--pos .use-bootstrap .panel > .table:first-child > tbody:first-child > tr:first-child td:first-child, .pui--pos .use-bootstrap .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child, .pui--pos .use-bootstrap .panel > .table:first-child > thead:first-child > tr:first-child th:first-child, .pui--pos .use-bootstrap .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child, .pui--pos .use-bootstrap .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child, .pui--pos .use-bootstrap .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child { border-top-left-radius: 3px; } .pui--pos .use-bootstrap .panel > .table:first-child > thead:first-child > tr:first-child td:last-child, .pui--pos .use-bootstrap .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child, .pui--pos .use-bootstrap .panel > .table:first-child > tbody:first-child > tr:first-child td:last-child, .pui--pos .use-bootstrap .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child, .pui--pos .use-bootstrap .panel > .table:first-child > thead:first-child > tr:first-child th:last-child, .pui--pos .use-bootstrap .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child, .pui--pos .use-bootstrap .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child, .pui--pos .use-bootstrap .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child { border-top-right-radius: 3px; } .pui--pos .use-bootstrap .panel > .table:last-child, .pui--pos .use-bootstrap .panel > .table-responsive:last-child > .table:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } .pui--pos .use-bootstrap .panel > .table:last-child > tbody:last-child > tr:last-child, .pui--pos .use-bootstrap .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child, .pui--pos .use-bootstrap .panel > .table:last-child > tfoot:last-child > tr:last-child, .pui--pos .use-bootstrap .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } .pui--pos .use-bootstrap .panel > .table:last-child > tbody:last-child > tr:last-child td:first-child, .pui--pos .use-bootstrap .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child, .pui--pos .use-bootstrap .panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child, .pui--pos .use-bootstrap .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child, .pui--pos .use-bootstrap .panel > .table:last-child > tbody:last-child > tr:last-child th:first-child, .pui--pos .use-bootstrap .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child, .pui--pos .use-bootstrap .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child, .pui--pos .use-bootstrap .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child { border-bottom-left-radius: 3px; } .pui--pos .use-bootstrap .panel > .table:last-child > tbody:last-child > tr:last-child td:last-child, .pui--pos .use-bootstrap .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child, .pui--pos .use-bootstrap .panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child, .pui--pos .use-bootstrap .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child, .pui--pos .use-bootstrap .panel > .table:last-child > tbody:last-child > tr:last-child th:last-child, .pui--pos .use-bootstrap .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child, .pui--pos .use-bootstrap .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child, .pui--pos .use-bootstrap .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child { border-bottom-right-radius: 3px; } .pui--pos .use-bootstrap .panel > .panel-body + .table, .pui--pos .use-bootstrap .panel > .panel-body + .table-responsive, .pui--pos .use-bootstrap .panel > .table + .panel-body, .pui--pos .use-bootstrap .panel > .table-responsive + .panel-body { border-top: 1px solid #ddd; } .pui--pos .use-bootstrap .panel > .table > tbody:first-child > tr:first-child th, .pui--pos .use-bootstrap .panel > .table > tbody:first-child > tr:first-child td { border-top: 0; } .pui--pos .use-bootstrap .panel > .table-bordered, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered { border: 0; } .pui--pos .use-bootstrap .panel > .table-bordered > thead > tr > th:first-child, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > thead > tr > th:first-child, .pui--pos .use-bootstrap .panel > .table-bordered > tbody > tr > th:first-child, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > tbody > tr > th:first-child, .pui--pos .use-bootstrap .panel > .table-bordered > tfoot > tr > th:first-child, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child, .pui--pos .use-bootstrap .panel > .table-bordered > thead > tr > td:first-child, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > thead > tr > td:first-child, .pui--pos .use-bootstrap .panel > .table-bordered > tbody > tr > td:first-child, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > tbody > tr > td:first-child, .pui--pos .use-bootstrap .panel > .table-bordered > tfoot > tr > td:first-child, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child { border-left: 0; } .pui--pos .use-bootstrap .panel > .table-bordered > thead > tr > th:last-child, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > thead > tr > th:last-child, .pui--pos .use-bootstrap .panel > .table-bordered > tbody > tr > th:last-child, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > tbody > tr > th:last-child, .pui--pos .use-bootstrap .panel > .table-bordered > tfoot > tr > th:last-child, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child, .pui--pos .use-bootstrap .panel > .table-bordered > thead > tr > td:last-child, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > thead > tr > td:last-child, .pui--pos .use-bootstrap .panel > .table-bordered > tbody > tr > td:last-child, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > tbody > tr > td:last-child, .pui--pos .use-bootstrap .panel > .table-bordered > tfoot > tr > td:last-child, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child { border-right: 0; } .pui--pos .use-bootstrap .panel > .table-bordered > thead > tr:first-child > td, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > thead > tr:first-child > td, .pui--pos .use-bootstrap .panel > .table-bordered > tbody > tr:first-child > td, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > tbody > tr:first-child > td, .pui--pos .use-bootstrap .panel > .table-bordered > thead > tr:first-child > th, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > thead > tr:first-child > th, .pui--pos .use-bootstrap .panel > .table-bordered > tbody > tr:first-child > th, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > tbody > tr:first-child > th { border-bottom: 0; } .pui--pos .use-bootstrap .panel > .table-bordered > tbody > tr:last-child > td, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > tbody > tr:last-child > td, .pui--pos .use-bootstrap .panel > .table-bordered > tfoot > tr:last-child > td, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td, .pui--pos .use-bootstrap .panel > .table-bordered > tbody > tr:last-child > th, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > tbody > tr:last-child > th, .pui--pos .use-bootstrap .panel > .table-bordered > tfoot > tr:last-child > th, .pui--pos .use-bootstrap .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th { border-bottom: 0; } .pui--pos .use-bootstrap .panel > .table-responsive { margin-bottom: 0; border: 0; } .pui--pos .use-bootstrap .panel-group { margin-bottom: 20px; } .pui--pos .use-bootstrap .panel-group .panel { margin-bottom: 0; border-radius: 4px; } .pui--pos .use-bootstrap .panel-group .panel + .panel { margin-top: 5px; } .pui--pos .use-bootstrap .panel-group .panel-heading { border-bottom: 0; } .pui--pos .use-bootstrap .panel-group .panel-heading + .panel-collapse > .panel-body, .pui--pos .use-bootstrap .panel-group .panel-heading + .panel-collapse > .list-group { border-top: 1px solid #ddd; } .pui--pos .use-bootstrap .panel-group .panel-footer { border-top: 0; } .pui--pos .use-bootstrap .panel-group .panel-footer + .panel-collapse .panel-body { border-bottom: 1px solid #ddd; } .pui--pos .use-bootstrap .panel-default { border-color: #ddd; } .pui--pos .use-bootstrap .panel-default > .panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; } .pui--pos .use-bootstrap .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #ddd; } .pui--pos .use-bootstrap .panel-default > .panel-heading .badge { color: #f5f5f5; background-color: #333; } .pui--pos .use-bootstrap .panel-default > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #ddd; } .pui--pos .use-bootstrap .panel-primary { border-color: #337ab7; } .pui--pos .use-bootstrap .panel-primary > .panel-heading { color: #fff; background-color: #337ab7; border-color: #337ab7; } .pui--pos .use-bootstrap .panel-primary > .panel-heading + .panel-collapse > .panel-body { border-top-color: #337ab7; } .pui--pos .use-bootstrap .panel-primary > .panel-heading .badge { color: #337ab7; background-color: #fff; } .pui--pos .use-bootstrap .panel-primary > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #337ab7; } .pui--pos .use-bootstrap .panel-success { border-color: #d6e9c6; } .pui--pos .use-bootstrap .panel-success > .panel-heading { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .pui--pos .use-bootstrap .panel-success > .panel-heading + .panel-collapse > .panel-body { border-top-color: #d6e9c6; } .pui--pos .use-bootstrap .panel-success > .panel-heading .badge { color: #dff0d8; background-color: #3c763d; } .pui--pos .use-bootstrap .panel-success > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #d6e9c6; } .pui--pos .use-bootstrap .panel-info { border-color: #bce8f1; } .pui--pos .use-bootstrap .panel-info > .panel-heading { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } .pui--pos .use-bootstrap .panel-info > .panel-heading + .panel-collapse > .panel-body { border-top-color: #bce8f1; } .pui--pos .use-bootstrap .panel-info > .panel-heading .badge { color: #d9edf7; background-color: #31708f; } .pui--pos .use-bootstrap .panel-info > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #bce8f1; } .pui--pos .use-bootstrap .panel-warning { border-color: #faebcc; } .pui--pos .use-bootstrap .panel-warning > .panel-heading { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } .pui--pos .use-bootstrap .panel-warning > .panel-heading + .panel-collapse > .panel-body { border-top-color: #faebcc; } .pui--pos .use-bootstrap .panel-warning > .panel-heading .badge { color: #fcf8e3; background-color: #8a6d3b; } .pui--pos .use-bootstrap .panel-warning > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #faebcc; } .pui--pos .use-bootstrap .panel-danger { border-color: #ebccd1; } .pui--pos .use-bootstrap .panel-danger > .panel-heading { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .pui--pos .use-bootstrap .panel-danger > .panel-heading + .panel-collapse > .panel-body { border-top-color: #ebccd1; } .pui--pos .use-bootstrap .panel-danger > .panel-heading .badge { color: #f2dede; background-color: #a94442; } .pui--pos .use-bootstrap .panel-danger > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #ebccd1; } .pui--pos .use-bootstrap .embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; } .pui--pos .use-bootstrap .embed-responsive .embed-responsive-item, .pui--pos .use-bootstrap .embed-responsive iframe, .pui--pos .use-bootstrap .embed-responsive embed, .pui--pos .use-bootstrap .embed-responsive object, .pui--pos .use-bootstrap .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } .pui--pos .use-bootstrap .embed-responsive-16by9 { padding-bottom: 56.25%; } .pui--pos .use-bootstrap .embed-responsive-4by3 { padding-bottom: 75%; } .pui--pos .use-bootstrap .well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } .pui--pos .use-bootstrap .well blockquote { border-color: #ddd; border-color: rgba(0, 0, 0, 0.15); } .pui--pos .use-bootstrap .well-lg { padding: 24px; border-radius: 6px; } .pui--pos .use-bootstrap .well-sm { padding: 9px; border-radius: 3px; } .pui--pos .use-bootstrap .close { float: right; font-size: 21px; font-weight: bold; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; filter: alpha(opacity=20); opacity: 0.2; } .pui--pos .use-bootstrap .close:hover, .pui--pos .use-bootstrap .close:focus { color: #000; text-decoration: none; cursor: pointer; filter: alpha(opacity=50); opacity: 0.5; } .pui--pos .use-bootstrap button.close { -webkit-appearance: none; padding: 0; cursor: pointer; background: transparent; border: 0; } .pui--pos .use-bootstrap .modal-open { overflow: hidden; } .pui--pos .use-bootstrap .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; } .pui--pos .use-bootstrap .modal.fade .modal-dialog { -webkit-transition: -webkit-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); -o-transform: translate(0, -25%); transform: translate(0, -25%); } .pui--pos .use-bootstrap .modal.in .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .pui--pos .use-bootstrap .modal-open .modal { overflow-x: hidden; overflow-y: auto; } .pui--pos .use-bootstrap .modal-dialog { position: relative; width: auto; margin: 10px; } .pui--pos .use-bootstrap .modal-content { position: relative; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; outline: 0; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); } .pui--pos .use-bootstrap .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; } .pui--pos .use-bootstrap .modal-backdrop.fade { filter: alpha(opacity=0); opacity: 0; } .pui--pos .use-bootstrap .modal-backdrop.in { filter: alpha(opacity=50); opacity: 0.5; } .pui--pos .use-bootstrap .modal-header { padding: 15px; border-bottom: 1px solid #e5e5e5; } .pui--pos .use-bootstrap .modal-header .close { margin-top: -2px; } .pui--pos .use-bootstrap .modal-title { margin: 0; line-height: 1.42857143; } .pui--pos .use-bootstrap .modal-body { position: relative; padding: 15px; } .pui--pos .use-bootstrap .modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; } .pui--pos .use-bootstrap .modal-footer .btn + .btn { margin-bottom: 0; margin-left: 5px; } .pui--pos .use-bootstrap .modal-footer .btn-group .btn + .btn { margin-left: -1px; } .pui--pos .use-bootstrap .modal-footer .btn-block + .btn-block { margin-left: 0; } .pui--pos .use-bootstrap .modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } @media (min-width: 768px) { .pui--pos .use-bootstrap .modal-dialog { width: 600px; margin: 30px auto; } .pui--pos .use-bootstrap .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } .pui--pos .use-bootstrap .modal-sm { width: 300px; } } @media (min-width: 992px) { .pui--pos .use-bootstrap .modal-lg { width: 900px; } } .pui--pos .use-bootstrap .tooltip { position: absolute; z-index: 1070; display: block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; line-height: 1.42857143; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; word-wrap: normal; white-space: normal; filter: alpha(opacity=0); opacity: 0; line-break: auto; } .pui--pos .use-bootstrap .tooltip.in { filter: alpha(opacity=90); opacity: 0.9; } .pui--pos .use-bootstrap .tooltip.top { padding: 5px 0; margin-top: -3px; } .pui--pos .use-bootstrap .tooltip.right { padding: 0 5px; margin-left: 3px; } .pui--pos .use-bootstrap .tooltip.bottom { padding: 5px 0; margin-top: 3px; } .pui--pos .use-bootstrap .tooltip.left { padding: 0 5px; margin-left: -3px; } .pui--pos .use-bootstrap .tooltip-inner { max-width: 200px; padding: 3px 8px; color: #fff; text-align: center; background-color: #000; border-radius: 4px; } .pui--pos .use-bootstrap .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .pui--pos .use-bootstrap .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000; } .pui--pos .use-bootstrap .tooltip.top-left .tooltip-arrow { right: 5px; bottom: 0; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000; } .pui--pos .use-bootstrap .tooltip.top-right .tooltip-arrow { bottom: 0; left: 5px; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000; } .pui--pos .use-bootstrap .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #000; } .pui--pos .use-bootstrap .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #000; } .pui--pos .use-bootstrap .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } .pui--pos .use-bootstrap .tooltip.bottom-left .tooltip-arrow { top: 0; right: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } .pui--pos .use-bootstrap .tooltip.bottom-right .tooltip-arrow { top: 0; left: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } .pui--pos .use-bootstrap .popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; padding: 1px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 1.42857143; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; word-wrap: normal; white-space: normal; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); line-break: auto; } .pui--pos .use-bootstrap .popover.top { margin-top: -10px; } .pui--pos .use-bootstrap .popover.right { margin-left: 10px; } .pui--pos .use-bootstrap .popover.bottom { margin-top: 10px; } .pui--pos .use-bootstrap .popover.left { margin-left: -10px; } .pui--pos .use-bootstrap .popover-title { padding: 8px 14px; margin: 0; font-size: 14px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0; } .pui--pos .use-bootstrap .popover-content { padding: 9px 14px; } .pui--pos .use-bootstrap .popover > .arrow, .pui--pos .use-bootstrap .popover > .arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } .pui--pos .use-bootstrap .popover > .arrow { border-width: 11px; } .pui--pos .use-bootstrap .popover > .arrow:after { content: ""; border-width: 10px; } .pui--pos .use-bootstrap .popover.top > .arrow { bottom: -11px; left: 50%; margin-left: -11px; border-top-color: #999; border-top-color: rgba(0, 0, 0, 0.25); border-bottom-width: 0; } .pui--pos .use-bootstrap .popover.top > .arrow:after { bottom: 1px; margin-left: -10px; content: " "; border-top-color: #fff; border-bottom-width: 0; } .pui--pos .use-bootstrap .popover.right > .arrow { top: 50%; left: -11px; margin-top: -11px; border-right-color: #999; border-right-color: rgba(0, 0, 0, 0.25); border-left-width: 0; } .pui--pos .use-bootstrap .popover.right > .arrow:after { bottom: -10px; left: 1px; content: " "; border-right-color: #fff; border-left-width: 0; } .pui--pos .use-bootstrap .popover.bottom > .arrow { top: -11px; left: 50%; margin-left: -11px; border-top-width: 0; border-bottom-color: #999; border-bottom-color: rgba(0, 0, 0, 0.25); } .pui--pos .use-bootstrap .popover.bottom > .arrow:after { top: 1px; margin-left: -10px; content: " "; border-top-width: 0; border-bottom-color: #fff; } .pui--pos .use-bootstrap .popover.left > .arrow { top: 50%; right: -11px; margin-top: -11px; border-right-width: 0; border-left-color: #999; border-left-color: rgba(0, 0, 0, 0.25); } .pui--pos .use-bootstrap .popover.left > .arrow:after { right: 1px; bottom: -10px; content: " "; border-right-width: 0; border-left-color: #fff; } .pui--pos .use-bootstrap .carousel { position: relative; } .pui--pos .use-bootstrap .carousel-inner { position: relative; width: 100%; overflow: hidden; } .pui--pos .use-bootstrap .carousel-inner > .item { position: relative; display: none; -webkit-transition: 0.6s ease-in-out left; -o-transition: 0.6s ease-in-out left; transition: 0.6s ease-in-out left; } .pui--pos .use-bootstrap .carousel-inner > .item > img, .pui--pos .use-bootstrap .carousel-inner > .item > a > img { line-height: 1; } @media all and (transform-3d), (-webkit-transform-3d) { .pui--pos .use-bootstrap .carousel-inner > .item { -webkit-transition: -webkit-transform 0.6s ease-in-out; -o-transition: -o-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px; } .pui--pos .use-bootstrap .carousel-inner > .item.next, .pui--pos .use-bootstrap .carousel-inner > .item.active.right { left: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .pui--pos .use-bootstrap .carousel-inner > .item.prev, .pui--pos .use-bootstrap .carousel-inner > .item.active.left { left: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .pui--pos .use-bootstrap .carousel-inner > .item.next.left, .pui--pos .use-bootstrap .carousel-inner > .item.prev.right, .pui--pos .use-bootstrap .carousel-inner > .item.active { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .pui--pos .use-bootstrap .carousel-inner > .active, .pui--pos .use-bootstrap .carousel-inner > .next, .pui--pos .use-bootstrap .carousel-inner > .prev { display: block; } .pui--pos .use-bootstrap .carousel-inner > .active { left: 0; } .pui--pos .use-bootstrap .carousel-inner > .next, .pui--pos .use-bootstrap .carousel-inner > .prev { position: absolute; top: 0; width: 100%; } .pui--pos .use-bootstrap .carousel-inner > .next { left: 100%; } .pui--pos .use-bootstrap .carousel-inner > .prev { left: -100%; } .pui--pos .use-bootstrap .carousel-inner > .next.left, .pui--pos .use-bootstrap .carousel-inner > .prev.right { left: 0; } .pui--pos .use-bootstrap .carousel-inner > .active.left { left: -100%; } .pui--pos .use-bootstrap .carousel-inner > .active.right { left: 100%; } .pui--pos .use-bootstrap .carousel-control { position: absolute; top: 0; bottom: 0; left: 0; width: 15%; font-size: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0); filter: alpha(opacity=50); opacity: 0.5; } .pui--pos .use-bootstrap .carousel-control.left { background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001))); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); background-repeat: repeat-x; } .pui--pos .use-bootstrap .carousel-control.right { right: 0; left: auto; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5))); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); background-repeat: repeat-x; } .pui--pos .use-bootstrap .carousel-control:hover, .pui--pos .use-bootstrap .carousel-control:focus { color: #fff; text-decoration: none; filter: alpha(opacity=90); outline: 0; opacity: 0.9; } .pui--pos .use-bootstrap .carousel-control .icon-prev, .pui--pos .use-bootstrap .carousel-control .icon-next, .pui--pos .use-bootstrap .carousel-control .glyphicon-chevron-left, .pui--pos .use-bootstrap .carousel-control .glyphicon-chevron-right { position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -10px; } .pui--pos .use-bootstrap .carousel-control .icon-prev, .pui--pos .use-bootstrap .carousel-control .glyphicon-chevron-left { left: 50%; margin-left: -10px; } .pui--pos .use-bootstrap .carousel-control .icon-next, .pui--pos .use-bootstrap .carousel-control .glyphicon-chevron-right { right: 50%; margin-right: -10px; } .pui--pos .use-bootstrap .carousel-control .icon-prev, .pui--pos .use-bootstrap .carousel-control .icon-next { width: 20px; height: 20px; font-family: serif; line-height: 1; } .pui--pos .use-bootstrap .carousel-control .icon-prev:before { content: "‹"; } .pui--pos .use-bootstrap .carousel-control .icon-next:before { content: "›"; } .pui--pos .use-bootstrap .carousel-indicators { position: absolute; bottom: 10px; left: 50%; z-index: 15; width: 60%; padding-left: 0; margin-left: -30%; text-align: center; list-style: none; } .pui--pos .use-bootstrap .carousel-indicators li { display: inline-block; width: 10px; height: 10px; margin: 1px; text-indent: -999px; cursor: pointer; background-color: #000 \9 ; background-color: rgba(0, 0, 0, 0); border: 1px solid #fff; border-radius: 10px; } .pui--pos .use-bootstrap .carousel-indicators .active { width: 12px; height: 12px; margin: 0; background-color: #fff; } .pui--pos .use-bootstrap .carousel-caption { position: absolute; right: 15%; bottom: 20px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .pui--pos .use-bootstrap .carousel-caption .btn { text-shadow: none; } @media screen and (min-width: 768px) { .pui--pos .use-bootstrap .carousel-control .glyphicon-chevron-left, .pui--pos .use-bootstrap .carousel-control .glyphicon-chevron-right, .pui--pos .use-bootstrap .carousel-control .icon-prev, .pui--pos .use-bootstrap .carousel-control .icon-next { width: 30px; height: 30px; margin-top: -10px; font-size: 30px; } .pui--pos .use-bootstrap .carousel-control .glyphicon-chevron-left, .pui--pos .use-bootstrap .carousel-control .icon-prev { margin-left: -10px; } .pui--pos .use-bootstrap .carousel-control .glyphicon-chevron-right, .pui--pos .use-bootstrap .carousel-control .icon-next { margin-right: -10px; } .pui--pos .use-bootstrap .carousel-caption { right: 20%; left: 20%; padding-bottom: 30px; } .pui--pos .use-bootstrap .carousel-indicators { bottom: 20px; } } .pui--pos .use-bootstrap .clearfix:before, .pui--pos .use-bootstrap .clearfix:after, .pui--pos .use-bootstrap .dl-horizontal dd:before, .pui--pos .use-bootstrap .dl-horizontal dd:after, .pui--pos .use-bootstrap .container:before, .pui--pos .use-bootstrap .container:after, .pui--pos .use-bootstrap .container-fluid:before, .pui--pos .use-bootstrap .container-fluid:after, .pui--pos .use-bootstrap .row:before, .pui--pos .use-bootstrap .row:after, .pui--pos .use-bootstrap .form-horizontal .form-group:before, .pui--pos .use-bootstrap .form-horizontal .form-group:after, .pui--pos .use-bootstrap .btn-toolbar:before, .pui--pos .use-bootstrap .btn-toolbar:after, .pui--pos .use-bootstrap .btn-group-vertical > .btn-group:before, .pui--pos .use-bootstrap .btn-group-vertical > .btn-group:after, .pui--pos .use-bootstrap .nav:before, .pui--pos .use-bootstrap .nav:after, .pui--pos .use-bootstrap .navbar:before, .pui--pos .use-bootstrap .navbar:after, .pui--pos .use-bootstrap .navbar-header:before, .pui--pos .use-bootstrap .navbar-header:after, .pui--pos .use-bootstrap .navbar-collapse:before, .pui--pos .use-bootstrap .navbar-collapse:after, .pui--pos .use-bootstrap .pager:before, .pui--pos .use-bootstrap .pager:after, .pui--pos .use-bootstrap .panel-body:before, .pui--pos .use-bootstrap .panel-body:after, .pui--pos .use-bootstrap .modal-header:before, .pui--pos .use-bootstrap .modal-header:after, .pui--pos .use-bootstrap .modal-footer:before, .pui--pos .use-bootstrap .modal-footer:after { display: table; content: " "; } .pui--pos .use-bootstrap .clearfix:after, .pui--pos .use-bootstrap .dl-horizontal dd:after, .pui--pos .use-bootstrap .container:after, .pui--pos .use-bootstrap .container-fluid:after, .pui--pos .use-bootstrap .row:after, .pui--pos .use-bootstrap .form-horizontal .form-group:after, .pui--pos .use-bootstrap .btn-toolbar:after, .pui--pos .use-bootstrap .btn-group-vertical > .btn-group:after, .pui--pos .use-bootstrap .nav:after, .pui--pos .use-bootstrap .navbar:after, .pui--pos .use-bootstrap .navbar-header:after, .pui--pos .use-bootstrap .navbar-collapse:after, .pui--pos .use-bootstrap .pager:after, .pui--pos .use-bootstrap .panel-body:after, .pui--pos .use-bootstrap .modal-header:after, .pui--pos .use-bootstrap .modal-footer:after { clear: both; } .pui--pos .use-bootstrap .center-block { display: block; margin-right: auto; margin-left: auto; } .pui--pos .use-bootstrap .pull-right, .pui--pos .use-bootstrap #aside .alert-dismissible .close, .pui--pos #aside .alert-dismissible .use-bootstrap .close { float: right !important; } .pui--pos .use-bootstrap .pull-left { float: left !important; } .pui--pos .use-bootstrap .hide { display: none !important; } .pui--pos .use-bootstrap .show { display: block !important; } .pui--pos .use-bootstrap .invisible { visibility: hidden; } .pui--pos .use-bootstrap .text-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .pui--pos .use-bootstrap .hidden { display: none !important; } .pui--pos .use-bootstrap .affix { position: fixed; } @-ms-viewport { .pui--pos .use-bootstrap { width: device-width; } } .pui--pos .use-bootstrap .visible-xs, .pui--pos .use-bootstrap .visible-sm, .pui--pos .use-bootstrap .visible-md, .pui--pos .use-bootstrap .visible-lg { display: none !important; } .pui--pos .use-bootstrap .visible-xs-block, .pui--pos .use-bootstrap .visible-xs-inline, .pui--pos .use-bootstrap .visible-xs-inline-block, .pui--pos .use-bootstrap .visible-sm-block, .pui--pos .use-bootstrap .visible-sm-inline, .pui--pos .use-bootstrap .visible-sm-inline-block, .pui--pos .use-bootstrap .visible-md-block, .pui--pos .use-bootstrap .visible-md-inline, .pui--pos .use-bootstrap .visible-md-inline-block, .pui--pos .use-bootstrap .visible-lg-block, .pui--pos .use-bootstrap .visible-lg-inline, .pui--pos .use-bootstrap .visible-lg-inline-block { display: none !important; } @media (max-width: 767px) { .pui--pos .use-bootstrap .visible-xs { display: block !important; } .pui--pos .use-bootstrap table.visible-xs { display: table !important; } .pui--pos .use-bootstrap tr.visible-xs { display: table-row !important; } .pui--pos .use-bootstrap th.visible-xs, .pui--pos .use-bootstrap td.visible-xs { display: table-cell !important; } } @media (max-width: 767px) { .pui--pos .use-bootstrap .visible-xs-block { display: block !important; } } @media (max-width: 767px) { .pui--pos .use-bootstrap .visible-xs-inline { display: inline !important; } } @media (max-width: 767px) { .pui--pos .use-bootstrap .visible-xs-inline-block { display: inline-block !important; } } @media (min-width: 768px) and (max-width: 991px) { .pui--pos .use-bootstrap .visible-sm { display: block !important; } .pui--pos .use-bootstrap table.visible-sm { display: table !important; } .pui--pos .use-bootstrap tr.visible-sm { display: table-row !important; } .pui--pos .use-bootstrap th.visible-sm, .pui--pos .use-bootstrap td.visible-sm { display: table-cell !important; } } @media (min-width: 768px) and (max-width: 991px) { .pui--pos .use-bootstrap .visible-sm-block { display: block !important; } } @media (min-width: 768px) and (max-width: 991px) { .pui--pos .use-bootstrap .visible-sm-inline { display: inline !important; } } @media (min-width: 768px) and (max-width: 991px) { .pui--pos .use-bootstrap .visible-sm-inline-block { display: inline-block !important; } } @media (min-width: 992px) and (max-width: 1199px) { .pui--pos .use-bootstrap .visible-md { display: block !important; } .pui--pos .use-bootstrap table.visible-md { display: table !important; } .pui--pos .use-bootstrap tr.visible-md { display: table-row !important; } .pui--pos .use-bootstrap th.visible-md, .pui--pos .use-bootstrap td.visible-md { display: table-cell !important; } } @media (min-width: 992px) and (max-width: 1199px) { .pui--pos .use-bootstrap .visible-md-block { display: block !important; } } @media (min-width: 992px) and (max-width: 1199px) { .pui--pos .use-bootstrap .visible-md-inline { display: inline !important; } } @media (min-width: 992px) and (max-width: 1199px) { .pui--pos .use-bootstrap .visible-md-inline-block { display: inline-block !important; } } @media (min-width: 1200px) { .pui--pos .use-bootstrap .visible-lg { display: block !important; } .pui--pos .use-bootstrap table.visible-lg { display: table !important; } .pui--pos .use-bootstrap tr.visible-lg { display: table-row !important; } .pui--pos .use-bootstrap th.visible-lg, .pui--pos .use-bootstrap td.visible-lg { display: table-cell !important; } } @media (min-width: 1200px) { .pui--pos .use-bootstrap .visible-lg-block { display: block !important; } } @media (min-width: 1200px) { .pui--pos .use-bootstrap .visible-lg-inline { display: inline !important; } } @media (min-width: 1200px) { .pui--pos .use-bootstrap .visible-lg-inline-block { display: inline-block !important; } } @media (max-width: 767px) { .pui--pos .use-bootstrap .hidden-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .pui--pos .use-bootstrap .hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199px) { .pui--pos .use-bootstrap .hidden-md { display: none !important; } } @media (min-width: 1200px) { .pui--pos .use-bootstrap .hidden-lg { display: none !important; } } .pui--pos .use-bootstrap .visible-print { display: none !important; } @media print { .pui--pos .use-bootstrap .visible-print { display: block !important; } .pui--pos .use-bootstrap table.visible-print { display: table !important; } .pui--pos .use-bootstrap tr.visible-print { display: table-row !important; } .pui--pos .use-bootstrap th.visible-print, .pui--pos .use-bootstrap td.visible-print { display: table-cell !important; } } .pui--pos .use-bootstrap .visible-print-block { display: none !important; } @media print { .pui--pos .use-bootstrap .visible-print-block { display: block !important; } } .pui--pos .use-bootstrap .visible-print-inline { display: none !important; } @media print { .pui--pos .use-bootstrap .visible-print-inline { display: inline !important; } } .pui--pos .use-bootstrap .visible-print-inline-block { display: none !important; } @media print { .pui--pos .use-bootstrap .visible-print-inline-block { display: inline-block !important; } } @media print { .pui--pos .use-bootstrap .hidden-print { display: none !important; } } /*=========================================== | Name: | Application fonts | | Description: | The application font root | | Rules: | None | | Location: | ~./defaults/fonts |============================================*/ @font-face { font-family: "latolight"; src: url("../fonts/lato-light-webfont.eot"); src: url("../fonts/lato-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-light-webfont.woff2") format("woff2"), url("../fonts/lato-light-webfont.woff") format("woff"), url("../fonts/lato-light-webfont.ttf") format("truetype"), url("../fonts/lato-light-webfont.svg#latolight") format("svg"); font-weight: normal; font-style: normal; } /*= GLOBAL STYLES =*/ .pui.pui--pos, .pui.pui--pos { overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 0; margin: 0; color: #043C5B; font-weight: 300; font-size: 14px; font-family: "Lato", latolight, Helvetica Neue, Helvetica, Arial, sans-serif; background-color: rgba(0, 0, 0, 0); scrollbar-face-color: #043C5B; scrollbar-arrow-color: #5BC0DE; scrollbar-track-color: rgba(0, 0, 0, 0); scrollbar-shadow-color: rgba(0, 0, 0, 0); scrollbar-highlight-color: rgba(0, 0, 0, 0); scrollbar-3dlight-color: rgba(0, 0, 0, 0); scrollbar-darkshadow-Color: rgba(0, 0, 0, 0); -ms-overflow-style: -ms-autohiding-scrollbar; } .pui--pos .layout_content { overflow-x: hidden; flex-grow: 1; height: 0; overflow-y: hidden; flex-direction: column; display: flex; } .pui--pos .layout__pane-content { height: 100%; } .pui.pui--pos, .pui--pos * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @media only screen and (min-width: 768px) { .pui--pos ::-webkit-scrollbar { width: 8px; height: 8px; } .pui--pos ::-webkit-scrollbar-button { width: 4px; height: 4px; } .pui--pos ::-webkit-scrollbar-thumb { background: rgb(1.315995872%, 19.7399380805%, 29.9389060888%); border: 2px solid rgba(0, 0, 0, 0); border-radius: 0; } .pui--pos ::-webkit-scrollbar-thumb:hover { background: rgb(1.315995872%, 19.7399380805%, 29.9389060888%); } .pui--pos ::-webkit-scrollbar-thumb:active { background: rgb(1.315995872%, 19.7399380805%, 29.9389060888%); } .pui--pos ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0); border: 0px none #ffffff; border-radius: 0; } .pui--pos ::-webkit-scrollbar-track:hover { background: rgba(0, 0, 0, 0); } .pui--pos ::-webkit-scrollbar-track:active { background: rgba(0, 0, 0, 0); } .pui--pos ::-webkit-scrollbar-corner { background: transparent; } } /** * Browsersync */ .pui--pos #__bs_notify__ { border-radius: 15px !important; animation: pos-pulseBrowserSync 2s cubic-bezier(0.05, 0.74, 0.27, 0.99); } @keyframes pos-pulseBrowserSync { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.7); opacity: 0; } } /*= RESPONSIVE METHODS =*/ .pui--pos .hide { display: none; } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos .hide-mobile { display: none; } } @media only screen and (min-width: 768px) and (max-width: 1200px) { .pui--pos .hide-desktop-small { display: none; } } @media only screen and (min-width: 992px) and (max-width: 1440px) { .pui--pos .hide-desktop { display: none; } } /*=========================================== | Name: | DdD style library | | Description: | Functions as a global style library | | Rules: | May not contain any logic, only imports | | Location: | ~./style | | Please refer to ~./documentation for comment documentation |============================================ =========================================== | VENDOR |============================================ =========================================== | UTILITIES |============================================ 'utilities/variables', 'utilities/mixins', 'utilities/animations'; =========================================== | DEFAULTS |============================================ 'defaults/input', 'defaults/lists', 'defaults/visibility', 'defaults/fonts', 'defaults/buttons', 'defaults/text'; =========================================== | COMPONENTS |============================================ 'components/aside-alerts', 'components/button-list', 'components/button-row', 'components/itemline', 'components/chart', 'components/gridblock', 'components/datepicker', 'components/user-management', 'components/tooltip', 'components/group', 'components/command-block', 'components/stats', 'components/loading-bar', 'components/widget', 'components/notes', 'components/panel', 'components/debug-pane', 'components/slide-action', 'components/modal', 'components/itemgroup-items', 'components/iscroll'; =========================================== | PARTIALS |============================================ 'partials/layout', 'partials/keyboard', 'partials/login', 'partials/left-menu', 'partials/right-menu', 'partials/toast-messages', 'partials/aside'; */ /*=========================================== | Name: | Documentation guide | | Description: | Contains stylesheet documentation/definitions | | Rules: | May only contain comments. | | Markup: | None | | Location | ~./documentation |============================================*/ /*=========================================== | COMMENTS |============================================*/ /*=========================================== | Name: | Module function | | Description: | Module description | | Markup: | Module markup | | Rules: | Module rules | | Location | Module location |============================================*/ /* Selector documentation. Stick to one line if possible*/ /*=========================================== | SCSS |============================================*/ /* Always preserve element availability, as empty selectors. This may for some seem as bad practice, but it makes an easier approach for others to access the given accessible element styles. /*=========================================== | Naming |============================================*/ /* Generic naming is essential, to maintain proper semantics. For example "date__container", "summary__container". If coded properly, this shouldn't be causing any interference. */ /*! * Icon Font DdD-Assets * Made with love by Icons8 [ https://icons8.com/ ] using FontCustom [ https://github.com/FontCustom/fontcustom ] * * Contacts: * [ https://icons8.com/contact ] * * Follow Icon8 on * Twitter [ https://twitter.com/icons_8 ] * Facebook [ https://www.facebook.com/Icons8 ] * Google+ [ https://plus.google.com/+Icons8 ] * GitHub [ https://github.com/icons8 ] */ /*=========================================== | Name: | DdD Style aside alerts | | Description: | Contains DdD style aside alerts styling | | Rules: | None | | Location: | ~./molecules/aside-alerts |============================================*/ .pui--pos .alert { padding: 15px; border: none; border-radius: 0; color: #FFFFFF; margin-top: 8px; cursor: default; } .pui--pos .alert-success { background-color: #00A300; } .pui--pos .alert-warning { background-color: #FFC40D; } .pui--pos .alert-info { background-color: #5BC0DE; } .pui--pos .alert-danger { background-color: #EE1111; } .pui--pos .alert p { word-break: break-word; } .pui--pos .alert h2 { margin-bottom: 8px; font-size: 27px; font-weight: thin; padding-right: 35px; } .pui--pos .alert p h1, .pui--pos .alert p h3, .pui--pos .alert p { font-size: 14px; margin: 0; } .pui--pos .alert-dismissible { min-height: 50px; padding-right: 40px; } .pui--pos .alert-dismissible .close { font-size: 44px; background-color: transparent; border: none; color: #FFFFFF; float: right; font-weight: thin; line-height: 21px; opacity: 1; outline: 0; position: relative; right: -30px; text-align: center; width: 35px; cursor: pointer; } .pui--pos .alert .close:hover { background-color: transparent; background-image: none; } .pui--pos .alert a { color: #FFFFFF; font-size: inherit; font-weight: 600; } /*=========================================== | Name: | Button list | | Description: | Contains button list styles | | Rules: | None | | Location: | ~./molecules/aside-alerts |============================================*/ .pui--pos .button-list .button { box-sizing: content-box; padding: 8px 0; margin: 15px 0 0 0; } .pui--pos .button-list .button:first-child { margin: 0; } .pui--pos .button-list__tab-group { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; width: 100%; } .pui--pos .button-list__tab-group .button { margin: 0 0 0 8px; padding: 0 8px; font-size: 14px; background-color: #B4B4B4; } .pui--pos .button-list__tab-group .button.active { background-color: #03324c; } /*=========================================== | Name: | Button row | | Description: | Contains button row styles | | Rules: | None | | Location: | ~./molecules/aside-alerts |============================================*/ .pui--pos .button-row { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; } .pui--pos .button-row .button { box-sizing: content-box; padding: 8px 0; flex-grow: 1; flex-basis: 0; margin: 0 0 0 8px; } .pui--pos .button-row .button:first-child { margin: 0; } /*=========================================== | Name: | Chart | | Description: | Angular chart styles | | Rules: | None | | Location: | ~./components/chart | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | CHART |============================================*/ .pui--pos .chart { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; position: relative; width: 100%; } .pui--pos .chart__settings { display: flex; align-items: space-between; justify-content: space-between; flex-direction: column; flex-wrap: nowrap; height: 100%; width: 200px; flex-basis: 200px; } .pui--pos .chart__settings-setting { width: 100%; padding: 0 15px; margin: 22.5px 0; box-sizing: border-box; } .pui--pos .chart__placeholder { /*@include attr(width, $desktop-smallPortrait: 60%, $desktop: 100%);*/ position: relative; } @media only screen and (min-width: 768px) { .pui--pos .chart__placeholder { position: absolute; } } .pui--pos .chart__placeholder { top: 0; right: 0; bottom: 0; left: 200px; height: 100%; box-sizing: border-box; padding: 15px 0; } .pui--pos .chart__placeholder-inner { position: relative; height: 100%; width: 100%; } .pui--pos .chart__content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; box-sizing: border-box; padding: 0 15px; pointer-events: none; } .pui--pos .chart__content.chart__content--active { opacity: 1; pointer-events: initial; } .pui--pos .chart__container { width: 100%; height: 100%; } .pui--pos .chart__content-chart { width: 100%; height: 100%; } /*=========================================== | Name: | Command component | | Description: | The command component styles | | Rules: | None | | Location: | ~./components/command-block | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | COMMAND CENTER BLOCK |============================================*/ .pui--pos .command-center__container { box-sizing: border-box; padding: 15px 0; } .pui--pos .command-center__left { margin: 0 0 15px; } .pui--pos .command-center__right { margin: 0 0 0 15px; } .pui--pos .command-center__title { padding: 0 0 15px 0; } .pui--pos .command-center__content { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: wrap; padding: 0 15px; margin: 0 -30px; } /*=========================================== | COMMAND |============================================*/ .pui--pos .command-center__command { margin: 0 0 8px 0; } .pui--pos .command-center__command .command-center__command-inner { background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); padding: 15px; box-sizing: border-box; cursor: pointer; } .pui--pos .command-center__command--active .command-center__command-inner { background-color: #03324c; color: #FFFFFF; } .pui--pos .command-center__left .command-center__command { flex-basis: 100%; } @media only screen and (min-width: 1200px) { .pui--pos .command-center__left .command-center__command { flex-basis: 50%; } } .pui--pos .command-center__left .command-center__command { padding-bottom: 0; width: 100%; } .pui--pos .command .command-center__command-title { font-size: 21px; font-weight: 600; } .pui--pos .command-center__command-text { word-wrap: break-word; } .pui--pos .command .command-center__command-text { margin: 15px 0 0 0; } .pui--pos .command-center__command-button { margin: 15px 0 0 0; } /*=========================================== | Name: | Content | | Description: | Content container for wrapping content | | Rules: | None | | Location: | ~./components/content |============================================*/ /*=========================================== | GENERAL CONTENT |============================================*/ .pui--pos #app__content { height: 100%; width: 100%; box-sizing: border-box; background-color: #ececec; padding: 55px 15px 0 15px; position: relative; } .pui--pos .content__container { height: 100%; width: 100%; position: relative; } .pui--pos .content-container { height: 100%; } .pui--pos .content-container__inner { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; flex-wrap: nowrap; height: 100%; position: relative; box-sizing: border-box; display: flex; } /*=========================================== | CONTENT HEADER |============================================*/ .pui--pos .content-container__header { height: 60px; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .content-container__header { height: 40px; } } .pui--pos .content-container__header { width: 100%; } .pui--pos .content-container__title { font-size: 27px; font-weight: 100; } .pui--pos .content-container__header-wrap { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; width: 100%; } .pui--pos .content-container__header-wrap .content-container__header-item { width: 100%; margin: 0 8px; } .pui--pos .content-container__header-wrap .content-container__header-item:first-child { margin-left: 0; } .pui--pos .content-container__header-wrap .content-container__header-item:last-child { margin-right: 0; } /*=========================================== | CONTENT NOTIFICATION |============================================*/ .pui--pos .content-container__notification { width: 100%; height: auto; background-color: #03324c; color: #FFFFFF; text-align: left; padding: 8px; box-sizing: border-box; margin: 0 0 15px 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .pui--pos .content-container__notification--success { background-color: #00A300; } .pui--pos .content-container__notification--danger { background-color: #EE1111; } .pui--pos .content-container__notification--warning { background-color: #FFC40D; } .pui--pos .content-container__notification--info { background-color: #5BC0DE; } .pui--pos .notification__banner-icon { margin: 0 8px 0 0; } /*=========================================== | CONTENT FOOTER |============================================*/ .pui--pos .content-container__footer { display: flex; align-items: flex-start; justify-content: center; flex-direction: row; flex-wrap: nowrap; width: 100%; min-height: 60px; } .pui--pos .content-container__footer--wrap-content { flex-wrap: wrap; } .pui--pos .content-container__footer--buttons { margin: 0 -2px; padding: 0 2px; } .pui--pos .content-container__button { height: 60px; } @media only screen and (min-width: 992px) { .pui--pos .content-container__button { height: 80px; } } .pui--pos .content-container__button { flex-grow: 1; width: 100%; box-sizing: border-box; padding: 2px; } .pui--pos .content-container__button .button { height: 60px; } @media only screen and (min-width: 992px) { .pui--pos .content-container__button .button { height: 80px; } } .pui--pos .content-container__button .button { line-height: inherit; } .pui--pos .footer-wrap { display: flex; align-items: flex-start; justify-content: spacebetween; flex-direction: row; flex-wrap: nowrap; } .pui--pos .footer-wrap .input { border: none; margin: 0 8px 0 0; } .pui--pos .footer-wrap .button { width: 20%; height: 45px; } .pui--pos .footer-wrap + .dropdown-menu { position: absolute; top: -40px !important; transform: translateY(-100%); left: -15px !important; width: calc(100% + 30px); background-color: #FFFFFF; padding: 15px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-sizing: border-box; outline: 0; } .pui--pos .footer-wrap + .dropdown-menu li { width: 100%; display: block; height: 40px; line-height: 40px; } .pui--pos .footer-wrap + .dropdown-menu li a { font-size: 14px; color: #03324c; cursor: pointer; text-decoration: none; display: block; width: 100%; padding: 2px 8px; } .pui--pos .footer-wrap + .dropdown-menu li a:hover { background-color: rgba(0, 0, 0, 0.05); } /*=========================================== | CONTENT FOOTER STICKY |============================================*/ .pui--pos .content-container__footer--sticky { width: 100%; bottom: 75px; background-color: rgb(1.4043186895%, 23.4053114917%, 35.5760734674%); outline: 0; box-sizing: border-box; padding: 8px 15px; height: auto; margin-bottom: 8px; } .pui--pos .content-container__footer--sticky label { display: block; padding-right: 15px; color: #FFFFFF; line-height: 55px; } .pui--pos .content-container__footer--sticky select { width: 50%; flex-grow: 1; } .pui--pos .content-container__footer--sticky input { width: 100%; flex-basis: 100%; } /*=========================================== | CONTENT FOOTER DRAWER |============================================*/ .pui--pos .content-container__footer--drawer { display: none; width: 100%; background-color: rgb(1.4043186895%, 23.4053114917%, 35.5760734674%); outline: 0; box-sizing: border-box; padding: 15px; height: auto; z-index: 20; margin-bottom: 8px; } .pui--pos .content-container__footer--drawer label { display: block; padding-right: 15px; color: #FFFFFF; line-height: 55px; } .pui--pos .content-container__footer--drawer select { width: 50%; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .content-container__footer--drawer select { width: 40%; } } .pui--pos .content-container__footer--drawer select { margin-right: 0; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .content-container__footer--drawer select { margin-right: 15px; } } .pui--pos .content-container__footer--drawer select { flex-grow: 1; } .pui--pos .content-container__footer--drawer input { width: 100%; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .content-container__footer--drawer input { width: 40%; } } .pui--pos .content-container__footer--drawer input { flex-basis: 100%; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .content-container__footer--drawer input { flex-basis: 40%; } } .pui--pos .content-container__footer--drawer.is-visible { animation: pos-pushUpFromBottom 0.3s; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .content-container__footer--drawer .seperator { display: none; } } .pui--pos .content-container__footer--drawer--narrow { padding: 8px; } .pui--pos .content-drawer__inner { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: wrap; height: 100%; width: 100%; } /*=========================================== | CONTENT FOOTER AREA |============================================*/ .pui--pos .content-container__footer-area { width: 100%; height: auto; } /*=========================================== | ACTUAL CONTENT AREA |============================================*/ .pui--pos .content-container__area { width: 100%; flex-grow: 1; margin: 0 0 15px 0; position: relative; } .pui--pos .content-container__area.iscroll-fix { padding-right: 12px; } .pui--pos .no-iscroll .content-container__area { padding-right: 15px; overflow-y: auto; height: 100%; } /*=========================================== | MISC |============================================*/ .pui--pos .seperator { width: 100%; display: block; height: 8px; } /*=========================================== | Name: | Datepicker component | | Description: | The datepicker component styles | | Rules: | None | | Location: | ~./components/datepicker | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | DATEPICKER |============================================*/ .pui--pos .datepicker { position: absolute; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .pui--pos .datepicker i { color: #03324c !important; } .pui--pos .datepicker .active { background-color: #03324c; color: #FFFFFF; } .pui--pos .datepicker td { transition: background-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .datepicker td:hover { background-color: rgba(3, 50, 76, 0.1); } .pui--pos .timepicker { position: absolute; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .pui--pos .timepicker i { color: #03324c !important; } .pui--pos .timepicker .active { background-color: #03324c; color: #FFFFFF; } .pui--pos .timepicker td { transition: background-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .timepicker td:hover { background-color: rgba(3, 50, 76, 0.1); } /*=========================================== | Name: | Debug pane | | Description: | Allows for easy debugging. Simply add .debug-pane to jade | and output whichever functionality you need to access easily. | | Rules: | None | | Location: | ~./components/debug-pane | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | DEBUG PANE |============================================*/ .pui--pos .debug-pane { position: fixed; top: 0; left: 0; background-color: #FFFFFF; color: #03324c; padding: 15px; border-bottom-right-radius: 15px; z-index: 99999; opacity: 0.3; } .pui--pos .debug-pane:hover { opacity: 1; } /*=========================================== | Name: | Grid block | | Description: | A simple block for displaying rows and columns. Used in eg. Loyalty | | Rules: | None | | Location: | ~./components/gridblock | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | GRID BLOCK |============================================*/ .pui--pos .gridblock { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; width: 100%; } .pui--pos .gridblock .gridblock__row { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; width: 100%; margin-top: 15px; } .pui--pos .gridblock .gridblock__row :first-child { margin-top: 0; } .pui--pos .gridblock .gridblock__column { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; flex-wrap: nowrap; width: 100%; margin: 0 8px; } .pui--pos .gridblock .gridblock__column:first-child { margin-left: 0; } .pui--pos .gridblock .gridblock__column:last-child { margin-right: 0; } .pui--pos .gridblock .gridblock__column--align-right { margin-left: auto; margin-right: 0; width: auto; } .pui--pos .gridblock .gridblock__element { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: wrap; width: 100%; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); min-height: 70px; box-sizing: border-box; padding: 15px; } .pui--pos .gridblock .gridblock__element-row { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; width: 100%; margin-top: 23px; } .pui--pos .gridblock .gridblock__element-row:first-child { margin-top: 0; } .pui--pos .gridblock .gridblock__element-column { width: 100%; margin: 0 8px; } .pui--pos .gridblock .gridblock__element-column:first-child { margin-left: 0; } .pui--pos .gridblock .gridblock__element-column:last-child { margin-right: 0; } .pui--pos .gridblock .gridblock__element-column--align-right { margin-left: auto; margin-right: 0; width: auto; } .pui--pos .gridblock .gridblock__heading { font-size: 18px; } .pui--pos .gridblock .gridblock__input, .pui--pos .gridblock .gridblock__textarea { margin: 8px 0 0 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0; position: relative; } .pui--pos .gridblock .gridblock__input[disabled], .pui--pos .gridblock .gridblock__textarea[disabled] { background-color: #ececec; border-color: #d1d1d1; color: rgba(0, 0, 0, 0.5); } .pui--pos .gridblock .gridblock__input select, .pui--pos .gridblock .gridblock__textarea select { -webkit-appearance: none; background-color: transparent; border: none; } .pui--pos .gridblock .gridblock__input select[disabled], .pui--pos .gridblock .gridblock__textarea select[disabled] { background-color: #ececec; border-color: #d1d1d1; color: rgba(0, 0, 0, 0.5); } .pui--pos .gridblock .gridblock__input i, .pui--pos .gridblock .gridblock__textarea i { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); pointer-events: none; } .pui--pos .gridblock .gridblock__textarea { resize: none; min-height: 80px; outline: 0; box-sizing: border-box; padding: 8px; } .pui--pos .gridblock .gridblock__seperator { width: 100%; height: 1px; background-color: #d1d1d1; } .pui--pos .gridblock .gridblock__button { padding: 0 40px; height: 60px; } .pui--pos .aside-navigation__button { text-decoration: none; } .pui--pos .input-buttons--gridblock { right: 8px; } .pui--pos .gridblock__item { font-weight: 600; width: 100%; } .pui--pos .gridblock__item-right { font-weight: 300; text-align: right; } .pui--pos .gridblock__element-row--low-margin { margin-top: 10px !important; } .pui--pos .gridblock__element-row--no-margin { margin-top: 0 !important; } .pui--pos .gridblock__input-button { width: 30px; } .pui--pos .gridblock__input-button i { right: 3px !important; font-size: 23px; } .pui--pos .gridblock__item-minor { font-size: 11px; opacity: 0.7; } .pui--pos .gridblock__element-row--wrap { flex-wrap: wrap !important; } .pui--pos .gridblock__column-part { width: 20% !important; } .pui--pos .gridblock__row.gridblock__row--mobile-align, .pui--pos .gridblock__element-row.gridblock__row--mobile-align { flex-wrap: wrap; } @media only screen and (min-width: 992px) { .pui--pos .gridblock__row.gridblock__row--mobile-align, .pui--pos .gridblock__element-row.gridblock__row--mobile-align { flex-wrap: nowrap; } } .pui--pos .gridblock__element-column.gridblock__column--fit, .pui--pos .gridblock__column.gridblock__column--fit { width: 100%; margin: 0; } @media only screen and (min-width: 992px) { .pui--pos .gridblock__element-column.gridblock__column--fit, .pui--pos .gridblock__column.gridblock__column--fit { margin: 0 8px; } } .pui--pos .gridblock__element-column.gridblock__column--fit:last-child, .pui--pos .gridblock__column.gridblock__column--fit:last-child { margin-top: 8px; } @media only screen and (min-width: 992px) { .pui--pos .gridblock__element-column.gridblock__column--fit:last-child, .pui--pos .gridblock__column.gridblock__column--fit:last-child { margin-top: 0; } } /*=========================================== | Name: | Group | | Description: | Group block | | Rules: | None | | Location: | ~./components/group | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | GROUP |============================================*/ /*=========================================== | Name: | DdD Style iScroll | | Description: | Contains DdD style iScroll styling | | Rules: | None | | Location: | ~./molecules/scroll |============================================*/ .pui--pos .iScrollHorizontalScrollbar { height: 3px; } @media only screen and (min-width: 768px) { .pui--pos .iScrollHorizontalScrollbar { height: 7px; } } .pui--pos .iScrollHorizontalScrollbar { bottom: 0px; left: 2px; overflow: hidden; position: absolute; right: 2px; z-index: 1; } .pui--pos .iScrollHorizontalScrollbar.iScrollBothScrollbars { right: 18px; } .pui--pos .iScrollVerticalScrollbar { width: 3px; } @media only screen and (min-width: 768px) { .pui--pos .iScrollVerticalScrollbar { width: 7px; } } .pui--pos .iScrollVerticalScrollbar { bottom: 2px; overflow: hidden; position: absolute; right: 1px; top: 2px; z-index: 1; } .pui--pos .iScrollVerticalScrollbar.iScrollBothScrollbars { bottom: 18px; } .pui--pos .iScrollIndicator { display: none; background: transparent; background-color: rgba(180, 180, 180, 0.7); border: none; border-radius: 0; box-sizing: border-box; height: 100%; position: absolute; transform: translate(0px, 0px) translateZ(0px); transition-duration: 0ms; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); width: 932px; } .pui--pos .iScrollVerticalScrollbar .iScrollIndicator { display: block; height: 560px; position: absolute; transform: translate(0px, 0px) translateZ(0px); transition-duration: 0ms; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); width: 100%; } .pui--pos .iscroll-on .iscroll-wrapper { height: 100%; overflow: hidden; position: absolute; width: 100%; top: 0; right: 0; bottom: 0; left: 0; } .pui--pos .iscroll-on .iscroll-scroller { min-height: 100%; position: absolute; width: 100%; } .pui--pos .iscroll-content { padding-right: 12px; box-sizing: border-box; } /*=========================================== | Name: | Item group items | | Description: | Item group items | | Rules: | None | | Location: | ~./components/itemgroup-items | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | ITEM GROUP WRAPPER |============================================*/ .pui--pos .itemgroup-wrapper { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; height: 100%; width: calc(100% + 16px); margin: 0 -8px; } /*=========================================== | ITEM GROUP ITEM |============================================*/ .pui--pos .itemgroup__item { width: calc((100vw - 30px - 16vw) / 2); } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .itemgroup__item { width: calc((100vw - 30px - 16vw) / 4); } } @media only screen and (min-width: 768px) { .pui--pos .itemgroup__item { width: calc((100vw - 30px - 50vw) / 2); } } @media only screen and (min-width: 992px) { .pui--pos .itemgroup__item { width: calc((100vw - 30px - 500px) / 4); } } @media only screen and (min-width: 1200px) { .pui--pos .itemgroup__item { width: calc((100vw - 30px - 640px) / 5); } } .pui--pos .itemgroup__item { height: calc((100vw - 30px - 16vw) / 2); } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .itemgroup__item { height: calc((100vw - 30px - 16vw) / 4); } } @media only screen and (min-width: 768px) { .pui--pos .itemgroup__item { height: calc((100vw - 30px - 50vw) / 2); } } @media only screen and (min-width: 992px) { .pui--pos .itemgroup__item { height: calc((100vw - 30px - 500px) / 4); } } @media only screen and (min-width: 1200px) { .pui--pos .itemgroup__item { height: calc((100vw - 30px - 640px) / 5); } } .pui--pos .itemgroup__item { flex-basis: 50%; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .itemgroup__item { flex-basis: 25%; } } @media only screen and (min-width: 768px) { .pui--pos .itemgroup__item { flex-basis: 50%; } } @media only screen and (min-width: 992px) { .pui--pos .itemgroup__item { flex-basis: 25%; } } @media only screen and (min-width: 1200px) { .pui--pos .itemgroup__item { flex-basis: 20%; } } .pui--pos .itemgroup__item { padding: 8px; box-sizing: border-box; position: relative; } .pui--pos .itemgroup__item--wrap:after { content: "..."; position: absolute; left: 15px; bottom: 15px; color: #FFFFFF; } .pui--pos .itemgroup__item > .button { height: 100%; } .pui--pos .itemgroup__item > .button.active { background-color: #5BC0DE; } .pui--pos .itemgroup__item-name { line-height: 18px; text-align: left; position: absolute; right: 15px; top: 15px; left: 15px; bottom: 42px; z-index: 10; overflow: hidden; font-weight: 300 !important; } .pui--pos .itemgroup__item-number { line-height: 18px; text-align: right; position: absolute; right: 15px; bottom: 15px; z-index: 10; font-weight: 300 !important; } /*=========================================== | Name: | Itemline items | | Description: | The itemline component styles | | Rules: | None | | Location: | ~./components/itemline | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | ITEMLINE ITEM |============================================*/ .pui--pos .itemline { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; flex-wrap: nowrap; width: 100%; box-sizing: border-box; padding: 8px; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); margin: 0 0 15px 0; cursor: default; position: relative; } .pui--pos .itemline .button.no-button, .pui--pos .itemline .button.no-button:hover { pointer-events: none; background: transparent; background-color: transparent; background-image: none; } .pui--pos .itemline .button.full-button { display: block; width: 100%; text-align: left; } .pui--pos .itemline__inner-wrap--full { width: 100%; } /*=========================================== | ITEMLINE ITEM TOP |============================================*/ .pui--pos .itemline__top { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; flex-wrap: wrap; } @media only screen and (min-width: 768px) { .pui--pos .itemline__top { flex-wrap: nowrap; } } .pui--pos .itemline__top { height: auto; width: 100%; } .pui--pos .itemline__top.non-expandable { align-items: center; } .pui--pos .no-discount .itemline__top { flex-wrap: wrap; } .pui--pos .itemline__left-wrap { width: 42%; } @media only screen and (min-width: 992px) { .pui--pos .itemline__left-wrap { width: 70%; } } .pui--pos .itemline__left-wrap { flex-basis: 42%; } @media only screen and (min-width: 992px) { .pui--pos .itemline__left-wrap { flex-basis: 70%; } } .pui--pos .itemline__input { width: 100%; margin: 8px 0 15px 0; border: 1px solid #d1d1d1; display: block; } .pui--pos .itemline__inner-wrap { width: 100%; } .pui--pos .itemline__quantity { font-size: 21px; font-weight: 300; } .pui--pos .itemline__quantity .button { height: auto; padding: 15px; background-color: rgba(0, 0, 0, 0.05); color: #000000; cursor: pointer; line-height: 21px; width: 51px; } .pui--pos .itemline__quantity .button:hover { background-color: rgba(0, 0, 0, 0.05); } @media only screen and (min-width: 768px) { .pui--pos .itemline__quantity .button:hover { background-color: rgba(0, 0, 0, 0.1); } } .pui--pos .alert-danger .itemline__quantity .button { color: #ffffff; } .pui--pos .itemline__wrap-full { width: 100%; } .pui--pos .itemline__descriptor { width: 100%; padding: 8px 15px; font-size: 18px; box-sizing: border-box; } .pui--pos .itemline__descriptor span { width: 100%; display: block; padding: 8px 0; } .pui--pos .itemline__descriptor--start span { border-bottom: 2px solid #03324c; border-top: 2px solid #03324c; } .pui--pos .itemline__descriptor--end span { border-top: 2px solid #03324c; border-bottom: 2px solid #03324c; } .pui--pos .itemline__price { text-align: right; font-size: 21px; font-weight: 300; width: 100%; width: 58%; } @media only screen and (min-width: 992px) { .pui--pos .itemline__price { width: 30%; } } .pui--pos .itemline__price { flex-basis: 58%; } @media only screen and (min-width: 992px) { .pui--pos .itemline__price { flex-basis: 30%; } } .pui--pos .itemline__price .button { display: block; padding: 15px; height: auto; background-color: rgba(0, 0, 0, 0.05); color: #000000; text-align: right; cursor: pointer; line-height: 21px; min-width: 120px; } .pui--pos .itemline__price .button.button--inline-text { display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; } .pui--pos .alert-danger .itemline__price .button { color: #ffffff; } .pui--pos .itemline__price .button span { width: 100%; text-align: right; font-weight: 300; } .pui--pos .itemline__price .button .itemline__small-price { text-align: right; line-height: 14px; width: 100%; } .pui--pos .itemline__price .button:hover { background-color: rgba(0, 0, 0, 0.05); } @media only screen and (min-width: 768px) { .pui--pos .itemline__price .button:hover { background-color: rgba(0, 0, 0, 0.1); } } .pui--pos .itemline__small-price { display: block; text-align: right; font-size: 14px; font-weight: 300; opacity: 0.8; } /*=========================================== | ITEMLINE ITEM DESCRIPTION |============================================*/ .pui--pos .itemline__description { font-size: 14px; } @media only screen and (min-width: 768px) { .pui--pos .itemline__description { font-size: 18px; } } .pui--pos .itemline__description { padding: 0 50% 0 0; } @media only screen and (min-width: 768px) { .pui--pos .itemline__description { padding: 0 15px; } } .pui--pos .itemline__description { flex-basis: 100%; } @media only screen and (min-width: 768px) { .pui--pos .itemline__description { flex-basis: initial; } } .pui--pos .itemline__description { box-sizing: border-box; } @media only screen and (min-width: 768px) { .pui--pos .itemline__description { box-sizing: content-box; } } .pui--pos .itemline__description { width: 100%; margin: 8px 0; } .pui--pos .alert-danger .itemline__description { color: #ffffff; } .pui--pos .itemline__description .itemline__icon-distance { margin: 0 8px 0 0; } .pui--pos .no-discount .itemline__description { padding: 0 15px; display: block; flex-basis: 100%; } .pui--pos .itemline__description--wrap { box-sizing: border-box; } .pui--pos .itemline__inner-wrap .itemline__description { box-sizing: border-box; } .pui--pos .itemline__id { color: #B4B4B4; max-width: 200px; } .pui--pos .alert-danger .itemline__id { color: #ffffff; } /*=========================================== | ITEMLINE ITEM CONTENT |============================================*/ .pui--pos .itemline__content { width: 100%; } /*=========================================== | ITEMLINE ITEM FOOTER |============================================*/ .pui--pos .itemline__footer { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; margin-top: 8px; width: 100%; background-color: transparent; } .pui--pos .itemline__footer .button { width: 100%; margin: 0 2px; height: 60px; } .pui--pos .itemline__footer .button:first-child { margin-left: 0; } .pui--pos .itemline__footer .button:last-child { margin-right: 0; } .pui--pos .itemline__footer.alert-danger { background-color: transparent; } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos .itemline__button { display: none !important; } } .pui--pos .itemline__discount-button { margin: 8px 0 0 0; font-size: 14px; } /*=========================================== | ITEMLINE COMMENT |============================================*/ .pui--pos .itemline__comment { margin: 8px 0 0 0; } /*=========================================== | ITEMLINE BLOCK |============================================*/ .pui--pos .itemline-block { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: wrap; width: 100%; background-color: #03324c; color: #FFFFFF; margin: 0 0 15px 0; text-align: center; } .pui--pos .itemline-block h3 { font-size: 21px; padding: 8px 0; width: 100%; } .pui--pos .itemline-block__row { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; padding: 8px 15px; box-sizing: border-box; flex-basis: 100%; width: 100%; } .pui--pos .itemline-block__item { width: 50%; flex-basis: 50%; flex-grow: 1; font-size: 21px; text-align: left; } .pui--pos .itemline-block__item:last-child { text-align: right; } /*=========================================== | Name: | Loading bar | | Description: | Styles for Angular Loading Bar | | Rules: | None | | Location: | ~./components/loading-bar | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | LOADING BAR |============================================*/ .pui--pos #loading-bar, .pui--pos #loading-bar-spinner { pointer-events: none; transition: all 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos #loading-bar.ng-enter, .pui--pos #loading-bar.ng-leave.ng-leave-active, .pui--pos #loading-bar-spinner.ng-enter, .pui--pos #loading-bar-spinner.ng-leave.ng-leave-active { opacity: 0; } .pui--pos #loading-bar.ng-enter.ng-enter-active, .pui--pos #loading-bar.ng-leave, .pui--pos #loading-bar-spinner.ng-enter.ng-enter-active, .pui--pos #loading-bar-spinner.ng-leave { opacity: 1; } .pui--pos #loading-bar .bar { transition: width 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); background-color: #5BC0DE; position: fixed; z-index: 10002; top: 0; left: 0; width: 100%; height: 4px; } .pui--pos #loading-bar .peg { position: absolute; width: 70px; right: 0; top: 0; height: 4px; opacity: 0.45; box-shadow: #5BC0DE 1px 0 6px 1px; border-radius: 100%; } /*=========================================== | LOADING BAR - SPINNER |============================================*/ .pui--pos #loading-bar-spinner { display: block; position: fixed; z-index: 10002; top: 10px; left: 10px; } .pui--pos #loading-bar-spinner .spinner-icon { width: 14px; height: 14px; border: solid 2px transparent; border-top-color: #5BC0DE; border-left-color: #5BC0DE; border-radius: 50%; animation: pos-loading-bar-spinner 400ms linear infinite; } @keyframes pos-loading-bar-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*=========================================== | Name: | Modal component | | Description: | The modal component styles | | Rules: | None | | Location: | ~./components/modal | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | MODAL |============================================*/ .pui--pos .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-sizing: border-box; padding: 15px; } .pui--pos .modal textarea { border: none; padding-bottom: 15px; } /*=========================================== | Name: | Note items | | Description: | The note component styles | | Rules: | None | | Location: | ~./components/note | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | NOTE ITEM |============================================*/ .pui--pos .receipt-note { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; flex-wrap: nowrap; width: 100%; cursor: pointer; box-sizing: border-box; padding: 8px; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); margin: 0 0 15px 0; transition: background-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .receipt-note:hover { background-color: rgba(0, 0, 0, 0.018); } .pui--pos .receipt-note:hover.active { background-color: #FFFFFF; } .pui--pos .receipt-note .button.no-button, .pui--pos .receipt-note .button.no-button:hover { pointer-events: none; background: transparent; background-color: transparent; background-image: none; } /*=========================================== | NOTE TOP |============================================*/ .pui--pos .receipt-note__top { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; flex-wrap: wrap; } @media only screen and (min-width: 768px) { .pui--pos .receipt-note__top { flex-wrap: nowrap; } } .pui--pos .receipt-note__top { width: 100%; } .pui--pos .receipt-note__description span { text-align: right; font-size: 18px; } .pui--pos .receipt-note__amount .span { text-align: right; font-size: 18px; font-weight: 600; } /*=========================================== | NOTE CONTENT |============================================*/ .pui--pos .receipt-note__items { width: 100%; margin: 15px 0 0 0; } .pui--pos .receipt-note__items-total { position: relative; } .pui--pos .receipt-note__items-total:before, .pui--pos .receipt-note__items-total:after { content: ""; width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.1); top: -1px; position: absolute; } .pui--pos .receipt-note__items-total:after { top: -5px; } .pui--pos .receipt-note__item { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; width: 100%; font-size: 18px; margin: 8px 0 0 0; padding: 0 0 8px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .pui--pos .receipt-note__item:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 8px 0; } .pui--pos .receipt-note__item:last-child { border: none; padding: 0 0 8px 0; } .pui--pos .receipt-note__item-info { width: 45%; flex-basis: 45%; display: block; font-size: 14px; } .pui--pos .receipt-note__item-ean { font-weight: 600; font-size: 18px; } .pui--pos .receipt-note__item-line { display: block; } .pui--pos .receipt-note__item-price { font-weight: 600; font-size: 14px; } .pui--pos .receipt-note__item-price span { display: block; text-align: right; } /*=========================================== | NOTE BOTTOM |============================================*/ .pui--pos .receipt-note__date-time { color: #B4B4B4; margin: 15px 0 0 0; } .pui--pos .receipt-note__footer { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; margin-top: 8px; width: 100%; } .pui--pos .receipt-note__footer .button { width: 100%; margin: 0 2px; height: 60px; } .pui--pos .receipt-note__footer .button:first-child { margin-left: 0; } .pui--pos .receipt-note__footer .button:last-child { margin-right: 0; } /*=========================================== | Name: | Panel component | | Description: | The panel component styles | | Rules: | None | | Location: | ~./components/panel | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | PANEL GROUP |============================================*/ .pui--pos .panel-group { width: 100%; } .pui--pos .panel-group .panel { margin: 15px 0 0 0; } .pui--pos .panel-group .panel:first-child { margin: 0; } /*=========================================== | PANEL |============================================*/ .pui--pos .panel { width: 100%; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .pui--pos .panel--no-shadow { box-shadow: none; } .pui--pos .panel.header-panel { margin: 15px 0 0 0; } .pui--pos .panel--no-background { background-color: transparent; } .pui--pos .panel--color-white { color: #FFFFFF; } .pui--pos .panel--full { width: 100%; display: block; flex-basis: 100%; } .pui--pos .panel:last-child { margin-bottom: 2px; } /*=========================================== | PANEL HEADER |============================================*/ .pui--pos .panel-header { width: 100%; padding: 8px 8px; background-color: #03324c; box-sizing: border-box; } .pui--pos a.panel-header__title { color: #FFFFFF; text-decoration: none; width: 100%; display: block; cursor: pointer; padding: 8px; box-sizing: border-box; transition: background-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos a.panel-header__title:hover { background-color: rgba(255, 255, 255, 0.1); } /*=========================================== | PANEL CONTENT |============================================*/ .pui--pos .panel-content { width: 100%; } /*=========================================== | PANEL TABLE |============================================*/ .pui--pos .panel-table { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; width: 100%; } .pui--pos .background-base { background-color: #03324c; color: #FFFFFF; } .pui--pos .background-base span, .pui--pos .background-base a, .pui--pos .background-base i { color: #FFFFFF; } .pui--pos .panel-row { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; padding: 15px; width: 100%; box-sizing: border-box; } .pui--pos .panel-row--no-padding { padding: 0; } .pui--pos .panel-row--no-v-padding { padding-top: 0; padding-bottom: 0; } .pui--pos .panel-row--no-h-padding { padding-left: 0; padding-right: 0; } .pui--pos .panel-row--seperator { margin: 15px 0 0 0; } .pui--pos .panel-row--seperator:first-child { margin: 0; } .pui--pos .panel-row--has-border { padding: 15px 0; margin: 0 15px; border-bottom: 1px solid #d1d1d1; width: calc(100% - 30px); } .pui--pos .panel-row--has-border:last-child { border: none; } .pui--pos .panel-column { width: 100%; margin: 0 15px; text-align: left; } .pui--pos .panel-column:first-child { margin-left: 0; } .pui--pos .panel-column:last-child { margin-right: 0; } .pui--pos .panel-column.has-error { color: #EE1111; } .pui--pos .panel-column--relative { position: relative; } .pui--pos .panel-column span.dark-text { color: #333333; } .pui--pos .panel-column__spacer { display: block; height: 2px; width: 100%; } .pui--pos .panel-scroll { overflow-y: auto; height: calc(100% - 30px); } .pui--pos .panel-split { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; flex-wrap: nowrap; width: 100%; } .pui--pos .panel-message { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); width: 100%; color: #FFFFFF; border: 1px solid #FFFFFF; padding: 15px; margin: 15px 0 0 0; box-sizing: border-box; } .pui--pos .panel-message :first-child { margin: 0; } .pui--pos span.panel-message__heading { font-weight: 600; display: block; } .pui--pos span.panel-message__body { display: block; } /*=========================================== | PANEL MISC |============================================*/ .pui--pos .message-days { padding: 0 8px; line-height: 25px; vertical-align: top; pointer-events: none; user-select: none; } .pui--pos .panel__button-indicator { font-size: 21px; } /*=========================================== | Name: | Slide action component | | Description: | The slide action component styles | | Rules: | None | | Location: | ~./components/slide-action | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | SLIDE ACTION |============================================*/ .pui--pos .slide-action { position: relative; } .pui--pos .slide-action__container { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; color: rgba(0, 0, 0, 0.5); position: absolute; top: 2px; left: 2px; right: 2px; height: 100%; box-sizing: border-box; } .pui--pos .slide-action__container--danger { background-color: #EE1111; color: #FFFFFF; } .pui--pos .slide-action__container--danger .slide-action__slider { background-color: #EE1111; } .pui--pos .slide-action__container--success { background-color: #00A300; color: #FFFFFF; } .pui--pos .slide-action__container--success .slide-action__slider { background-color: #00A300; } .pui--pos .slide-action__container--warning { background-color: #FFC40D; color: #FFFFFF; } .pui--pos .slide-action__container--warning .slide-action__slider { background-color: #FFC40D; } .pui--pos .slide-action__container--info { background-color: #5BC0DE; color: #FFFFFF; } .pui--pos .slide-action__container--info .slide-action__slider { background-color: #5BC0DE; } .pui--pos .slide-action__label { width: 200%; font-weight: 300; font-size: 14px; padding-left: calc(20% + 8px); pointer-events: none; } .pui--pos .slide-action__slider-label { position: absolute; left: calc(20% + 8px); top: 50%; transform: translate(-20%, -50%); color: #FFFFFF; opacity: 0; pointer-events: none; font-size: 14px; transition: transform 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .slide-action__slider-label--visible { transform: translate(0%, -50%); opacity: 1; } .pui--pos .slide-action__lane { display: flex; align-items: center; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; position: relative; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.2); width: 100%; height: 100%; overflow: hidden; } .pui--pos .slide-action__slider { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; width: 100%; padding-left: 80%; box-sizing: border-box; height: 100%; margin-left: -80%; position: absolute; left: 0; top: 0; background-color: #FFFFFF; color: #FFFFFF; font-size: 22px; } /*=========================================== | Name: | Stats component | | Description: | The stats component styles | | Rules: | None | | Location: | ~./components/stats | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | STATS |============================================*/ .pui--pos .stats__wrapper { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; } .pui--pos .stats__container { width: 100%; background-color: #FFFFFF; margin: 0 15px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .pui--pos .stats__container:first-child { margin-left: 0; } .pui--pos .stats__container:last-child { margin-right: 0; } /*=========================================== | STATS HEADER |============================================*/ .pui--pos .stats__header { background-color: #03324c; color: #FFFFFF; text-align: center; } .pui--pos .stats__header-text { padding: 15px; font-size: 18px; } /*=========================================== | STATS CONTENT |============================================*/ .pui--pos .stats__content { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; flex-wrap: wrap; } @media only screen and (min-width: 768px) { .pui--pos .stats__content { flex-wrap: nowrap; } } .pui--pos .stats__content { flex-basis: 100%; } @media only screen and (min-width: 768px) { .pui--pos .stats__content { flex-basis: auto; } } .pui--pos .stats__content { width: 100%; padding: 15px; box-sizing: border-box; } .pui--pos .stats__item { width: 100%; text-align: center; font-size: 32px; font-weight: 300; } .pui--pos .stats__item--success { color: #00A300; } .pui--pos .stats__seperator { width: 100%; text-align: center; font-size: 32px; color: #777777; } /*=========================================== | Name: | Tooltip | | Description: | The tooltip component styles | | Rules: | None | | Location: | ~./components/tooltip | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | TOOLTIP |============================================*/ .pui--pos .tooltip { z-index: 20; background-color: rgba(0, 0, 0, 0.8); color: #FFFFFF; position: absolute !important; display: block !important; padding: 8px; } .pui--pos [bs-tooltip]:hover { cursor: default; } /*=========================================== | Name: | User management | | Description: | The user management module styles | | Rules: | None | | Location: | ~./components/user-management | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | USER MODULE |============================================*/ .pui--pos .user-module { width: 100%; color: #222222; } /*=========================================== | USER MODULE - HEADER |============================================*/ .pui--pos .user-module__header { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; height: 70px; width: 100%; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .pui--pos .user-module__header-item { display: flex; align-items: center; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; width: 100%; height: 100%; font-size: 14px; font-weight: 800; } .pui--pos .user-module__header-item > span { transition: color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); cursor: pointer; } .pui--pos .user-module__header-item > span i { padding-left: 5px; } .pui--pos .user-module__header-item > span:hover { color: #B4B4B4; } .pui--pos .user-module__header-item .multiselect__header-close { cursor: pointer; } .pui--pos .user-module__header-items { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; width: calc(100% - 85px); height: 100%; min-height: 70px; box-sizing: border-box; padding: 0 15px; } .pui--pos .user-module__header-item--preservation { min-width: 70px; width: 70px; flex-basis: 70px; height: 70px; margin: 0 15px 0 0; } /*=========================================== | USER MODULE - CONTENT |============================================*/ .pui--pos .user-module__content { width: 100%; } .pui--pos .user-module__row { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: wrap; width: 100%; margin: 15px 0 0 0; } .pui--pos .user-module__row-inner { background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .pui--pos .user-module__columns { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); width: calc(100% - 85px); box-sizing: border-box; padding: 0 15px; } .pui--pos .user-module__columns-full { width: 100%; } .pui--pos .user-module__column { display: flex; align-items: center; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; width: 100%; height: 100%; min-height: 70px; font-size: 14px; } .pui--pos .user-module__column span a { color: #5BC0DE; position: relative; cursor: pointer; text-decoration: none; } .pui--pos .user-module__column span a:after { content: ""; position: absolute; bottom: -1px; left: 50%; height: 1px; width: 0px; background-color: #5BC0DE; transform: translateX(-50%); transition: width 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .user-module__column span a:hover { cursor: pointer; } .pui--pos .user-module__column span a:hover:after { width: 100%; } .pui--pos .user-module__column .button { padding-left: 15px; padding-right: 15px; } .pui--pos .user-module__column-flex { width: 25%; } .pui--pos .user-module__column-final { margin-left: auto; width: auto; } .pui--pos .user-module__column--preservation { min-width: 70px; width: 70px; flex-basis: 70px; height: 70px; margin: 0 15px 0 0; } .pui--pos .user-module__expanded { flex-basis: 100%; width: 100%; } /*=========================================== | USER MODULE - PERIPHERALS |============================================*/ .pui--pos .user-module__checkbox { width: 70px; height: 70px; position: relative; cursor: pointer; } .pui--pos .user-module__checkbox-input { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 20; opacity: 0; } .pui--pos .user-module__checkbox-content { background-color: #d1d1d1; width: 100%; height: 100%; transition: background-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .user-module__checkbox-content:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #FFFFFF; font-size: 32px; opacity: 0; transition: opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .user-module__checkbox-input:checked + .user-module__checkbox-content { background-color: #03324c; } .pui--pos .user-module__checkbox-input:checked + .user-module__checkbox-content:before { opacity: 1; } .pui--pos .discountlevel-input { margin: 0 10px 0 0; border: 1px solid rgba(0, 0, 0, 0.1); } .pui--pos .user-module__column.discount-level { flex-direction: column; } @media only screen and (min-width: 768px) { .pui--pos .user-module__column.discount-level { flex-direction: row; } } .pui--pos .user-module__column.discount-level { align-items: flex-start; } @media only screen and (min-width: 768px) { .pui--pos .user-module__column.discount-level { align-items: center; } } .pui--pos .user-module__column.discount-level > span { width: 100%; text-align: left; font-size: 18px; margin: 15px 0 0 0; } .pui--pos .user-module__column.discount-level > span.colored { margin: 0; } .pui--pos .user-module__columns.discount-level { flex-direction: column; } @media only screen and (min-width: 768px) { .pui--pos .user-module__columns.discount-level { flex-direction: row; } } .pui--pos .discountlevel-delete { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; height: 80%; width: 80%; margin: 10%; background-color: rgb(1.4043186895%, 23.4053114917%, 35.5760734674%); color: #FFFFFF; font-size: 30px; cursor: pointer; transition: 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .discountlevel-delete:hover { opacity: 0.8; } .pui--pos .product-attribute { display: inline-block; height: 30px; line-height: 24px; box-sizing: content-box; margin: 10px 10px 0 0; padding: 2px 38px 2px 8px; position: relative; } .pui--pos .product-attribute span, .pui--pos .product-attribute i { display: inline-block; vertical-align: middle; line-height: 26px; } .pui--pos .product-attribute span.hidden-span { opacity: 0; } .pui--pos .product-attribute i { font-size: 20px; position: absolute; right: 15px; top: 50%; transform: translate(50%, -50%); z-index: 3; cursor: pointer; } .pui--pos .product-attribute input { background-color: #FFFFFF; color: #03324c; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; width: 100%; border: 2px solid #5BC0DE; z-index: 2; } .pui--pos .product-attribute input.visible-input { opacity: 1; } .pui--pos .product-attribute input.visible-input + i { color: #5BC0DE; } .pui--pos .user-module__column--preservation.reverse { margin: 0 0 0 15px; } /*=========================================== | Name: | Widget | | Description: | The default widget template | | Rules: | None | | Location: | ~./components/widget | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | WIDGET CONTAINER |============================================*/ .pui--pos .widget-container { padding: 0 15px; } /*=========================================== | WIDGET CONTAINER HEADER |============================================*/ .pui--pos .widget-container__header { padding: 15px 0; color: #FFFFFF; } .pui--pos .widget-container__header-title { font-size: 21px; font-weight: 300; } /*=========================================== | WIDGET ITEM |============================================*/ .pui--pos .widget-item { box-sizing: border-box; padding: 8px 0; color: #FFFFFF; margin: 15px 0 0; } /*=========================================== | WIDGET ITEM HEADER |============================================*/ .pui--pos .widget-item__header { width: calc(100% + 30px); background-color: rgba(0, 0, 0, 0.1); margin: 0 -15px; padding: 8px 15px; } /*=========================================== | WIDGET ITEM CONTENT |============================================*/ .pui--pos .widget-item__content { margin: 15px 0 0 0; } /*=========================================== | Name: | Aside | | Description: | The right aside in the DdD applications | | Rules: | None | | Location: | ~./partials/aside | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | ASIDE BACKDROP |============================================*/ .pui--pos .aside-backdrop { animation: pos-fadeIn 0.4s cubic-bezier(0.05, 0.74, 0.27, 0.99); z-index: 25 !important; top: 55px !important; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.2); } /*=========================================== | ASIDE BODY |============================================*/ .pui--pos #aside { width: 80vw; } @media only screen and (min-width: 768px) { .pui--pos #aside { width: 320px; } } .pui--pos #aside { animation: pos-slideInFromRight 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); z-index: 30 !important; position: fixed; top: 55px; background-color: rgb(1.4043186895%, 23.4053114917%, 35.5760734674%); right: 0; bottom: 0; overflow: hidden; } .pui--pos #aside.aside--notifications { padding: 85px 0 0 0; } .pui--pos #aside.aside--notifications .iscroll-wrapper { top: 85px; height: initial; } .pui--pos .aside-body { padding: 0 15px; min-height: calc(100vh - 63px); height: auto; display: flex; flex-direction: column; justify-content: space-between; } .pui--pos .aside-body li { margin: 8px 0 0 0; position: relative; } /*=========================================== | ASIDE BUTTONS |============================================*/ .pui--pos .aside__button-container { z-index: 10; padding: 15px 15px 0 15px; background-color: rgb(1.4043186895%, 23.4053114917%, 35.5760734674%); position: absolute; top: 0; right: 0; left: 0; } .pui--pos .aside__button, .pui--pos .button.payment-widget__button { font-size: 18px; } @media only screen and (min-width: 768px) { .pui--pos .aside__button, .pui--pos .button.payment-widget__button { font-size: 21px; } } .pui--pos .aside__button, .pui--pos .button.payment-widget__button { height: 65px; } @media only screen and (min-width: 768px) { .pui--pos .aside__button, .pui--pos .button.payment-widget__button { height: 70px; } } .pui--pos .aside__button, .pui--pos .button.payment-widget__button { line-height: 65px; } @media only screen and (min-width: 768px) { .pui--pos .aside__button, .pui--pos .button.payment-widget__button { line-height: 70px; } } .pui--pos .aside__button, .pui--pos .button.payment-widget__button { background-color: rgb(0.948622487%, 15.8103747828%, 24.0317696699%); padding: 0 15px; color: #d1d1d1; font-weight: 100; width: 100%; text-align: left; transition: background-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .aside__button.active, .pui--pos .active.button.payment-widget__button { background-color: rgb(1.9359642591%, 32.2660709854%, 49.0444278977%); } .pui--pos .aside__button.selected, .pui--pos .selected.button.payment-widget__button { cursor: default; } .pui--pos .aside__button:disabled, .pui--pos .button.payment-widget__button:disabled { background-color: rgba(0, 0, 0, 0.05); color: rgba(209, 209, 209, 0.5); pointer-events: none; } .pui--pos .aside__button:hover, .pui--pos .button.payment-widget__button:hover { background-color: rgba(0.948622487%, 15.8103747828%, 24.0317696699%, 0.5); } .pui--pos .aside__button-container .aside__button, .pui--pos .aside__button-container .button.payment-widget__button { height: 45px; } @media only screen and (min-width: 768px) { .pui--pos .aside__button-container .aside__button, .pui--pos .aside__button-container .button.payment-widget__button { height: 55px; } } .pui--pos .aside__button-container .aside__button, .pui--pos .aside__button-container .button.payment-widget__button { line-height: 45px; } @media only screen and (min-width: 768px) { .pui--pos .aside__button-container .aside__button, .pui--pos .aside__button-container .button.payment-widget__button { line-height: 55px; } } /*=========================================== | ASIDE BUTTONS - INDICATOR |============================================*/ .pui--pos .aside__button-indicator { position: absolute; top: 50%; transform: translateY(-50%); left: 15px; width: 10px; height: 10px; border-radius: 100%; background-color: transparent; animation: pos-connectorIndicator 1s cubic-bezier(0.05, 0.74, 0.27, 0.99) infinite; transition: transform 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), left 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .aside__button-indicator:after { background-color: #00A300; background: linear-gradient(to bottom, #00A300 0%, rgb(0%, 53.9215686275%, 0%) 100%); height: 100%; width: 100%; border-radius: 5px; top: 0; left: 0; content: ""; position: absolute; transition: opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), border-radius 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .aside__button-indicator.selected { height: 100%; left: 0; border-radius: 0; } .pui--pos .aside__button-indicator.selected:after { border-radius: 0; } .pui--pos .aside__button-indicator[disabled]:after { opacity: 0; } .pui--pos .aside__button-indicator[disabled].selected:after { background-color: #EE1111; background: linear-gradient(to bottom, #EE1111 0%, rgb(84%, 6%, 6%) 100%); opacity: 1; border-radius: 0; } .pui--pos .aside__button-indicator + .aside__button, .pui--pos .aside__button-indicator + .button.payment-widget__button { padding: 0 15px 0 35px; } /*=========================================== | ASIDE BUILD NUMBER |============================================*/ .pui--pos .aside__build-number { font-size: 11px; font-weight: 100; color: rgba(255, 255, 255, 0.4); } /*=========================================== | ASIDE MESSAGES |============================================*/ .pui--pos #aside .alert { padding: 15px; box-sizing: border-box; border: none; border-radius: 0; color: #FFFFFF; margin: 15px 0 0 0; } .pui--pos #aside .alert.alert-success { background-color: #00A300; } .pui--pos #aside .alert.alert-warning { background-color: #FFC40D; } .pui--pos #aside .alert.alert-info { background-color: #5BC0DE; } .pui--pos #aside .alert.alert-danger { background-color: #EE1111; } .pui--pos #aside .alert h2 { margin: 0 0 8px 0; font-size: 27px; font-weight: 100; padding: 0 35px 0 0; } .pui--pos #aside .alert p, .pui--pos #aside .alert p h1, .pui--pos #aside .alert p h3 { word-break: break-word; font-size: 14px; margin: 0; } .pui--pos #aside .alert a { color: #FFFFFF; font-size: inherit; font-weight: 600; } .pui--pos #aside .alert-dismissible { min-height: 55px; padding-right: 40px; } .pui--pos #aside .alert-dismissible .close { font-size: 44px; background-color: transparent; color: #FFFFFF; font-weight: 100; line-height: 21px; outline: 0; position: relative; right: -30px; text-align: center; width: 30px; transition: opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos #aside .alert-dismissible .close:hover { opacity: 0.8; } .pui--pos #aside .toast:hover { box-shadow: none !important; } /*=========================================== | ASIDE SCROLLING |============================================*/ .pui--pos .scroll-preservation { height: 27.5px; } /*=========================================== | BOTTOM INFORMATION |============================================*/ .pui--pos .aside-info { color: rgba(255, 255, 255, 0.4); padding: 8px 0; } /*=========================================== | Name: | Keyboard | | Description: | The right keyboard in the DdD applications | | Rules: | None | | Location: | ~./partials/keyboard | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | KEYBOARD BACKDROP |============================================*/ .pui--pos .keyboard__backdrop { position: absolute; background-color: rgba(0, 0, 0, 0); width: 100vw; top: 0; right: 0; bottom: 0; left: 0; transform: translateY(100vh); z-index: 30; overflow: hidden; } .pui--pos .keyboard__backdrop--visible { transform: translateY(0); background-color: rgba(0, 0, 0, 0.3); } .pui--pos .keyboard-detoggle { position: absolute; z-index: 10; top: -200vh; left: 0; width: 100%; height: 100%; transition: top 0s cubic-bezier(0.05, 0.74, 0.27, 0.99); transition-delay: 0s; } .pui--pos .keyboard__backdrop--visible .keyboard-detoggle { top: 0; transition: top 0s cubic-bezier(0.05, 0.74, 0.27, 0.99); transition-delay: 0.4s; } /*=========================================== | KEYBOARD GLOBAL |============================================*/ .pui--pos .keyboard-expanded { display: none; background-color: #03324c; } .pui--pos .keyboard-expanded--true { display: block; } .pui--pos .keyboard-wrap { padding: 8px; } @media only screen and (min-width: 768px) { .pui--pos .keyboard-wrap { padding: 8px; } } @media only screen and (min-width: 992px) { .pui--pos .keyboard-wrap { padding: 8px; } } @media only screen and (min-width: 1200px) { .pui--pos .keyboard-wrap { padding: 8px; } } @media only screen and (min-width: 1440px) { .pui--pos .keyboard-wrap { padding: 8px 320px; } } .pui--pos .keyboard-wrap { position: absolute; bottom: 0; height: auto; padding: 8px; box-sizing: border-box; width: 100%; background-color: #03324c; z-index: 20; } .pui--pos .keypad-pop { display: none; position: absolute; width: 120%; left: -10%; height: 50px; top: -50px; z-index: 30; background-color: #03324c; color: #FFFFFF; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } .pui--pos .keypad-pop span { line-height: 50px; } .pui--pos .keypad-pop:after { content: ""; border-top: 10px solid #03324c; border-left: 10px solid transparent; border-right: 10px solid transparent; height: 0; width: calc(100% - 20px); position: absolute; bottom: -10px; left: 0; } .pui--pos .ng-click-active .keypad-pop { display: block; top: -60px; } /*=========================================== | KEYPAD |============================================*/ @media only screen and (min-width: 768px) { .pui--pos .keypad__container { display: flex; } } @media only screen and (min-width: 768px) { .pui--pos .keypad__container { justify-content: space-between; } } @media only screen and (min-width: 768px) { .pui--pos .keypad__container { flex-wrap: wrap; } } .pui--pos .keypad__top { padding: 8px; } @media only screen and (min-width: 992px) { .pui--pos .keypad__top { padding: 8px calc(25% - 15px); } } .pui--pos .keypad__top { width: 100%; flex-basis: 100%; box-sizing: border-box; } .pui--pos .keypad__functions { display: none; } @media only screen and (min-width: 768px) { .pui--pos .keypad__functions { display: block; } } @media only screen and (min-width: 768px) { .pui--pos .keypad__functions { width: 20vh; } } @media only screen and (min-width: 768px) { .pui--pos .keypad__functions { flex-basis: 20vh; } } .pui--pos .keypad__functions { height: auto; padding: 6px; } @media only screen and (max-width: 1200px) and (orientation: portrait) { .pui--pos .keypad__container--keyboard .keypad__functions { display: none; } } .pui--pos .keypad__content { height: auto; padding: 6px; } .pui--pos .keypad__container--keyboard .keypad__content { flex-grow: 1; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .keypad__keys { max-width: 100%; } } .pui--pos .keypad__keys { width: 100%; display: flex; align-items: space-between; } .pui--pos .keypad__functions .keypad__keys { flex-wrap: wrap; } .pui--pos .keypad-keys__key { height: 25vw; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .keypad-keys__key { height: 18vh; } } @media only screen and (min-width: 768px) { .pui--pos .keypad-keys__key { height: 10vh; } } .pui--pos .keypad-keys__key { line-height: 25vw; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .keypad-keys__key { line-height: 18vh; } } @media only screen and (min-width: 768px) { .pui--pos .keypad-keys__key { line-height: 10vh; } } .pui--pos .keypad-keys__key { width: 25vw; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .keypad-keys__key { width: 18vh; } } @media only screen and (min-width: 768px) { .pui--pos .keypad-keys__key { width: 10vh; } } .pui--pos .keypad-keys__key { cursor: pointer; display: block; font-size: 21px; color: #FFFFFF; box-sizing: border-box; padding: 2px; position: relative; } .pui--pos .keypad-keys__key span { display: block; background-color: rgba(255, 255, 255, 0.06); height: 100%; text-align: center; width: 100%; } .pui--pos .dark .keypad-keys__key span { background-color: rgba(0, 0, 0, 0.3); } .pui--pos .dark .keypad-keys__key span:active { background-color: rgba(0, 0, 0, 0.3); } .pui--pos .base .keypad-keys__key span { background-color: #03324c; } .pui--pos .base .keypad-keys__key span:active { background-color: rgb(0.4169769173%, 6.9496152892%, 10.5634152395%); } .pui--pos .keypad-keys__key span.keypad-keys__key--light { background-color: rgba(255, 255, 255, 0.16); } .pui--pos .keypad-keys__key span.keypad-keys__key--light:active { background-color: rgba(90%, 90%, 90%, 0.16); } .pui--pos .base .keypad-keys__key span.keypad-keys__key--light { background-color: rgb(1.4043186895%, 23.4053114917%, 35.5760734674%); } .pui--pos .base .keypad-keys__key span.keypad-keys__key--light:active { background-color: rgb(0.6448250186%, 10.7470836436%, 16.3355671382%); } .pui--pos .keypad-keys__key span.keypad-keys__key--success { background-color: #00A300; } .pui--pos .keypad-keys__key span.keypad-keys__key--success:active { background-color: #007000; } .pui--pos .keypad-keys__key span.keypad-keys__key--warning { background-color: #FFC40D; } .pui--pos .keypad-keys__key span.keypad-keys__key--warning:active { background-color: rgb(85.0980392157%, 64.350996597%, 0%); } .pui--pos .keypad-keys__key span.keypad-keys__key--danger { background-color: #EE1111; } .pui--pos .keypad-keys__key span.keypad-keys__key--danger:active { background-color: rgb(74.6666666667%, 5.3333333333%, 5.3333333333%); } .pui--pos .keypad-keys__key span.keypad-keys__key--info { background-color: #5BC0DE; } .pui--pos .keypad-keys__key span.keypad-keys__key--info:active { background-color: rgb(19.0365283169%, 68.8981785608%, 83.7085697223%); } .pui--pos .keypad-keys__key span i { font-size: 27px; } .pui--pos .keypad__functions .keypad-keys__key { flex-basis: 100%; width: 100%; } .pui--pos .keypad-keys__key:active { opacity: 0.7; } /*=========================================== | KEYBOARD |============================================*/ .pui--pos .keypad-keys__key-letter { height: 9vh; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .keypad-keys__key-letter { height: 15vh; } } @media only screen and (min-width: 768px) { .pui--pos .keypad-keys__key-letter { height: 10vh; } } .pui--pos .keypad-keys__key-letter { line-height: 9vh; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .keypad-keys__key-letter { line-height: 15vh; } } @media only screen and (min-width: 768px) { .pui--pos .keypad-keys__key-letter { line-height: 10vh; } } .pui--pos .keypad-keys__key-letter { font-size: 14px; } @media only screen and (min-width: 768px) { .pui--pos .keypad-keys__key-letter { font-size: 21px; } } .pui--pos .keypad-keys__key-letter { width: 7.1428571429vw; } @media only screen and (min-width: 768px) { .pui--pos .keypad-keys__key-letter { width: 7.1428571429%; } } .pui--pos .keypad-keys__key-letter { flex-grow: 1; } .pui--pos .keypad-keys__key-letter--double { width: 14.2857142857vw; flex-basis: 14.2857142857vw; } .pui--pos .keypad-keys__key-letter--uneven { width: 12.1428571429vw; flex-basis: 12.1428571429vw; } .pui--pos .keypad-keys__key-letter--uneven-fill { width: 2.1428571429vw; flex-basis: 2.1428571429vw; } .pui--pos .keypad-keys__key-letter--space { width: 100%; } .pui--pos .keypad-keys__key-letter.text-lowercase { text-transform: lowercase; } @media only screen and (min-width: 768px) { .pui--pos .keypad-keys__key-letter:hover { opacity: 0.8; } } /*=========================================== | KEYPAD INVIEW |============================================*/ .pui--pos .keypad__container--inview { position: relative; height: 100%; width: 100%; } .pui--pos .keypad__container--inview .keypad__content { position: absolute; padding: 0; top: 0; right: 0; bottom: 0; left: 0; padding-bottom: 15px; } .pui--pos .keypad__container--inview .keypad__keys { height: 25%; } .pui--pos .keypad__container--inview .keypad-keys__key { height: 100%; line-height: 21px; width: 25%; transition: opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .keypad__container--inview .keypad-keys__key span:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .pui--pos .keypad__container--inview .keypad-keys__key--double-height { position: relative; height: 200%; z-index: 20; } .pui--pos .keypad__container--inview .keypad-keys__key--double-height span { position: absolute; top: 2px; right: 2px; left: 2px; height: calc(100% - 4px); z-index: 20; width: auto; } .pui--pos .keypad__container--inview .keypad-keys__key--transparent span { background-color: transparent; color: transparent; } .pui--pos .keypad__container--inview .keypad-keys__key:hover { opacity: 0.9; } /*=========================================== | Name: | Layout | | Description: | The layout styles | | Rules: | None | | Location: | ~./partials/layout | | Please refer to ~./documentation for comment documentation |============================================*/ .pui.pui--pos, .pui.pui--pos { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: auto !important; overflow: hidden; } .pui--pos #app__content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: auto !important; } /*=========================================== | CENTER CONTENT |============================================*/ .pui--pos #center-content { height: 100%; box-sizing: border-box; padding-top: 15px; padding-bottom: 15px; } .pui--pos #content__inner { height: 100%; } .pui--pos #right-content ~ #center-content { padding-right: 16vw; } @media only screen and (min-width: 768px) { .pui--pos #right-content ~ #center-content { padding-right: 25vw; } } @media only screen and (min-width: 992px) { .pui--pos #right-content ~ #center-content { padding-right: 250px; } } @media only screen and (min-width: 1200px) { .pui--pos #right-content ~ #center-content { padding-right: 320px; } } .pui--pos #left-content ~ #center-content { padding-left: 0; } @media only screen and (min-width: 768px) { .pui--pos #left-content ~ #center-content { padding-left: 0; } } @media only screen and (min-width: 992px) { .pui--pos #left-content ~ #center-content { padding-left: 250px; } } @media only screen and (min-width: 1200px) { .pui--pos #left-content ~ #center-content { padding-left: 320px; } } /*=========================================== | FLIP TOGGLE |============================================*/ .pui--pos .flip-toggle__pre { backface-visibility: hidden; transition: opacity 0.4s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .flip-toggle__pre--active { opacity: 0.8; } .pui--pos .flip-toggle__pre--active + .flip-toggle__post { clip-path: circle(100% at center); opacity: 1; pointer-events: initial; } .pui--pos .flip-toggle__post { position: fixed; } @media only screen and (min-width: 992px) { .pui--pos .flip-toggle__post { position: absolute; } } .pui--pos .flip-toggle__post { top: auto; } @media only screen and (min-width: 992px) { .pui--pos .flip-toggle__post { top: 2px; } } .pui--pos .flip-toggle__post { bottom: 8px; } @media only screen and (min-width: 992px) { .pui--pos .flip-toggle__post { bottom: 0; } } .pui--pos .flip-toggle__post { left: 15px; } @media only screen and (min-width: 992px) { .pui--pos .flip-toggle__post { left: 2px; } } .pui--pos .flip-toggle__post { right: calc(16vw + 15px); } @media only screen and (min-width: 768px) { .pui--pos .flip-toggle__post { right: calc(25vw + 15px); } } @media only screen and (min-width: 992px) { .pui--pos .flip-toggle__post { right: 2px; } } .pui--pos .flip-toggle__post { height: 75px; } @media only screen and (min-width: 992px) { .pui--pos .flip-toggle__post { height: 100%; } } .pui--pos .flip-toggle__post { transform-style: preserve-3d; perspective: 800px; backface-visibility: hidden; clip-path: circle(0 at center); pointer-events: none; opacity: 0; transition: clip-path 0.4s ease-in-out, opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } /*=========================================== | Name: | Left menu | | Description: | The left menu navigation | | Rules: | None | | Location: | ~./partials/left-menu | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | LEFT CONTENT |============================================*/ .pui--pos #left-content { display: none; } @media only screen and (min-width: 992px) { .pui--pos #left-content { display: block; } } .pui--pos #left-content { width: 16vw; } @media only screen and (min-width: 768px) { .pui--pos #left-content { width: 320px; } } @media only screen and (min-width: 992px) { .pui--pos #left-content { width: 250px; } } @media only screen and (min-width: 1200px) { .pui--pos #left-content { width: 320px; } } .pui--pos #left-content { position: absolute; top: 55px; left: 0; bottom: 0; background-color: rgb(1.4043186895%, 23.4053114917%, 35.5760734674%); z-index: 20; overflow: initial; } /*=========================================== | Name: | Login | | Description: | Portal login | | Rules: | None | | Location: | ~./partials/login | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | LOGIN - WRAPPER |============================================*/ .pui--pos #login.login__wrapper { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; background-color: #03324c; height: 100%; width: 100%; } .pui--pos .login__inner { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; flex-wrap: wrap; padding: 0 15px; } @media only screen and (min-width: 768px) { .pui--pos .login__inner { padding: 0; } } .pui--pos .login__inner { width: 380px; max-width: 100%; } .pui--pos .login__inner-row { display: flex; align-items: flex-start; justify-content: center; flex-direction: row; flex-wrap: nowrap; width: 100%; margin: 8px 0 0 0; } /*=========================================== | LOGIN - LOGO |============================================*/ .pui--pos .login__inner-logo { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; flex-wrap: nowrap; padding: 0 0 8px 0; } .pui--pos .login__logo { padding: 0 0 8px 0; max-width: 280px; } .pui--pos .login__subtitle { color: #FFFFFF; } /*=========================================== | LOGIN - INPUTS |============================================*/ .pui--pos #login .button { width: 100%; height: 60px; } /*=========================================== | Name: | Navigation bar | | Description: | The top bar in the DdD applications | | Rules: | None | | Location: | ~./partials/navigation-bar | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | NAVIGATION BAR |============================================*/ .pui--pos #navigation-bar { width: 100%; padding: 0 2px; box-sizing: border-box; background-color: #03324c; height: 55px; position: fixed; top: 0; left: 0; right: 0; z-index: 20; color: #FFFFFF; } .pui--pos .navigation-bar__inner { display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; height: 100%; } /*=========================================== | NAVIGATION BAR - LEFT |============================================*/ .pui--pos .navigation-bar__left { display: flex; align-items: center; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; width: 55px; } @media only screen and (min-width: 768px) { .pui--pos .navigation-bar__left { width: initial; } } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos .navigation-bar__logo { display: none !important; } } .pui--pos .navigation-bar__logo { float: left; } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos .navigation-bar__connector { display: none !important; } } .pui--pos .navigation-bar__connector { float: left; } .pui--pos .navigation-bar__connector-id { display: none !important; } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos .navigation-bar__connector-id { display: block !important; } } .pui--pos .navigation-bar__connector-id { font-size: 18px; } @media only screen and (min-width: 768px) { .pui--pos .navigation-bar__connector-id { font-size: initial; } } .pui--pos .navigation-bar__connector-id { width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .navigation-bar__connector-id { width: initial; } } .pui--pos .navigation-bar__connector-id { text-align: center; } @media only screen and (min-width: 768px) { .pui--pos .navigation-bar__connector-id { text-align: initial; } } @media only screen and (min-width: 768px) { .pui--pos .navigation-bar__connector-id:before { content: "("; } } @media only screen and (min-width: 768px) { .pui--pos .navigation-bar__connector-id:after { content: ")"; } } .pui--pos .navigation-bar__connector-id { float: left; color: rgba(255, 255, 255, 0.8); } /*=========================================== | NAVIGATION BAR - CENTER |============================================*/ @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos .navigation-bar__center { display: none !important; } } .pui--pos .navigation-bar__center { font-weight: 600; text-align: center; } .pui--pos .navigation-bar__time-info { font-size: 21px; font-weight: 300; } .pui--pos .navigation-bar__date-info { font-size: 11px; font-weight: 100; } /*=========================================== | NAVIGATION BAR - RIGHT |============================================*/ .pui--pos .navigation-bar__right { float: right; } .pui--pos .navigation-bar__caption-item { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; font-size: 27px; } @media only screen and (min-width: 480px) { .pui--pos .navigation-bar__caption-item { font-size: 27px; } } .pui--pos .navigation-bar__caption-item { min-width: calc(16vw - 2px); } @media only screen and (min-width: 480px) { .pui--pos .navigation-bar__caption-item { min-width: 0; } } .pui--pos .navigation-bar__caption-item { box-sizing: border-box; position: relative; padding: 0 15px; text-align: center; float: left; cursor: pointer; height: 55px; border-left: 1px solid rgb(1.5562174237%, 25.9369570613%, 39.4241747332%); transition: opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), background-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), filter 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .navigation-bar__caption-item--selected { background-color: rgb(1.4043186895%, 23.4053114917%, 35.5760734674%); color: #FFFFFF; } @media only screen and (min-width: 768px) { .pui--pos .navigation-bar__caption-item:hover { opacity: 0.8; } } .pui--pos .navigation-bar__caption-item:hover { background-color: rgba(1.4043186895%, 23.4053114917%, 35.5760734674%, 0.6); } .pui--pos .navigation-bar__caption-item:active { filter: brightness(80%); } .pui--pos .navigation-bar__caption-icon { display: inline-block; } .pui--pos .navigation-bar__caption-icon.text-warning { color: #FFC40D; } .pui--pos .navigation-bar__caption-icon.text-danger { color: #EE1111; } .pui--pos .navigation-bar__caption-icon.text-info { color: #5BC0DE; } .pui--pos .navigation-bar__caption-icon.text-success { color: #00A300; } /*=========================================== | NAVIGATION BAR - CONNECTION |============================================*/ .pui--pos .navigation-bar__caption-connection { min-width: 5vw; } @media only screen and (min-width: 480px) { .pui--pos .navigation-bar__caption-cloud, .pui--pos .navigation-bar__caption-connecting { font-size: 27px; } } .pui--pos .navigation-bar__caption-cloud, .pui--pos .navigation-bar__caption-connecting { position: absolute; width: 100%; top: 0; left: 0; line-height: 55px; } .pui--pos .navigation-bar__caption-connecting { font-size: 27px; } @media only screen and (min-width: 480px) { .pui--pos .navigation-bar__caption-connecting { font-size: 44px; } } .pui--pos .navigation-bar__caption-connecting { color: #777777; } /*=========================================== | NAVIGATION BAR - BADGE |============================================*/ .pui--pos .navigation-bar__caption-badge { box-sizing: border-box; font-size: 11px; font-weight: 600; margin: 0 0 0 8px; display: inline-block; color: #333333; background-color: #FFFFFF; padding: 2px 4px; } /*=========================================== | Name: | Right menu | | Description: | The right menu navigation | | Rules: | None | | Location: | ~./partials/right-menu | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | RIGHT ASIDE |============================================*/ .pui--pos #right-content { width: 16vw; } @media only screen and (min-width: 768px) { .pui--pos #right-content { width: 25vw; } } @media only screen and (min-width: 992px) { .pui--pos #right-content { width: 250px; } } @media only screen and (min-width: 1200px) { .pui--pos #right-content { width: 320px; } } .pui--pos #right-content { position: absolute; top: 55px; right: 0; bottom: 0; background-color: rgb(1.4043186895%, 23.4053114917%, 35.5760734674%); z-index: 20; overflow: initial; transition: width 0s cubic-bezier(0.55, 0, 0.1, 1); } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos #right-content.menu--open { position: absolute; } } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos #right-content.menu--open { width: 75vw; } } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos #right-content.menu--open { transition: width 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos #right-content.menu--open { right: 0; } } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos #right-content.menu--open .aside-navigation__label { display: inline-block; } } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos #right-content.menu--open .aside-navigation__label { width: 72%; } } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos #right-content.menu--open .aside-navigation__label { padding: 0 0 0 15px; } } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos #right-content.menu--open .aside-navigation__icon { flex-basis: calc(16vw - 5px); } } /*=========================================== | RIGHT ASIDE - CONTAINER |============================================*/ .pui--pos .aside-navigation__container { height: 16vw; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .aside-navigation__container { height: 8vw; } } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__container { height: 75px; } } .pui--pos .aside-navigation__container { position: absolute; top: 0; width: 100%; z-index: 20; } /*=========================================== | RIGHT ASIDE - LIST |============================================*/ .pui--pos .aside-navigation__list { margin-top: 16vw; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .aside-navigation__list { margin-top: 8vw; } } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__list { margin-top: 75px; } } .pui--pos .aside-navigation__list { height: calc(100% - 16vw); } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .aside-navigation__list { height: calc(100% - 8vw); } } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__list { height: calc(100% - 75px); } } .pui--pos .aside-navigation__list { padding-right: 6px; } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__list { padding-right: 12px; } } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__list { width: calc(100% - 2px); } } .pui--pos .aside-navigation__list { box-sizing: border-box; position: relative; } .pui--pos .aside-navigation__button-container { padding-right: 6px; } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__button-container { padding-right: 12px; } } .pui--pos .aside-navigation__button-container { box-sizing: border-box; height: 100%; } /*=========================================== | RIGHT ASIDE - BUTTON |============================================*/ .pui--pos .aside-navigation__button { display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; height: 16vw; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .aside-navigation__button { height: 8vw; } } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__button { height: 75px; } } .pui--pos .aside-navigation__button { padding: 0 0 0 2px; } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__button { padding: 0 15px; } } .pui--pos .aside-navigation__button { width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__button { width: calc(100% - 15px); } } .pui--pos .aside-navigation__button { background-color: rgb(1.4043186895%, 23.4053114917%, 35.5760734674%); color: rgba(209, 209, 209, 0.7); border-bottom: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; transition: background-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__button:hover { background-color: rgba(0, 0, 0, 0.2); } } .pui--pos .aside-navigation__container .aside-navigation__button { padding: 0; } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__container .aside-navigation__button { padding: 0 15px; } } .pui--pos .aside-navigation__container .aside-navigation__button { box-sizing: border-box; width: 100%; } .pui--pos .aside-navigation__currency-choice .aside-navigation__button { background-color: rgb(1.9359642591%, 32.2660709854%, 49.0444278977%); } .pui--pos .aside-navigation__currency-choice .aside-navigation__button:hover { background-color: rgba(1.9359642591%, 32.2660709854%, 49.0444278977%, 0.7); } .pui--pos .aside-navigation__label { display: none; } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__label { display: block; } } .pui--pos .aside-navigation__label { font-size: 18px; width: 75%; flex-basis: 75%; } .pui--pos .aside-navigation__icon { width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__icon { width: 25%; } } .pui--pos .aside-navigation__icon { flex-basis: 100%; } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__icon { flex-basis: 25%; } } .pui--pos .aside-navigation__icon { font-size: 21px; } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__icon { font-size: 32px; } } .pui--pos .aside-navigation__icon { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; height: 100%; } .pui--pos .aside-navigation__currency-label { font-size: 14px; } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__button--header, .pui--pos .aside-navigation__container { display: none; } } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__list { margin-top: 0; } } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__list { height: 100%; } } /*=========================================== | Name: | Toast messages | | Description: | The toast messages navigation | | Rules: | None | | Location: | ~./partials/toast-messages | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | ANIMATIONS |============================================*/ @keyframes pos-animateToast { 0% { transform: translateY(-100vw); } 15% { transform: translateY(0); } 85% { transform: translateY(0); } 100% { transform: translateY(-100vw); } } /*=========================================== | TOAST MESSAGES |============================================*/ .pui--pos #toast-container { z-index: 99999; position: fixed; top: 0; right: 0; } .pui--pos .toast { width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .toast { width: 25vw; } } @media only screen and (min-width: 992px) { .pui--pos .toast { width: 250px; } } @media only screen and (min-width: 1200px) { .pui--pos .toast { width: 320px; } } .pui--pos .toast { display: block; height: auto; padding: 15px; margin: 0 15px 0 0; background-color: #1C1C1C; color: #FFFFFF; font-size: 14px; animation: pos-animateToast 4s ease-in-out forwards; transition: opacity 0.25s cubic-bezier(0.55, 0, 0.1, 1); cursor: pointer; display: flex; flex-direction: column; justify-content: flex-start; } @media only screen and (min-width: 768px) { .pui--pos .toast:first-child { margin-top: 15px; } } .pui--pos .toast { /* &:before { content: ''; height: 3px; width: 100%; min-width: 10px; background-color: $g-color--blue; display: block; margin-bottom: 10px; } */ } .pui--pos .toast-error { border-top: 3px solid #EE1111; } .pui--pos .toast-success { border-top: 3px solid #00A300; } .pui--pos .toast-warning { border-top: 3px solid #FFC40D; } .pui--pos .toast-info { border-top: 3px solid #5BC0DE; } .pui--pos .toast:hover { opacity: 0.7; transform: translateX(0); animation-play-state: paused; } .pui--pos .toast, .pui--pos .toast:hover { box-shadow: none !important; } /*=========================================== | Name: | Buttons | | Description: | Button styles | | Rules: | None | | Location: | ~./defaults/buttons |============================================*/ .pui--pos .button { display: flex; align-items: center; justify-content: center; flex-direction: column; flex-wrap: nowrap; text-align: center; background-color: #03324c; color: #FFFFFF; height: 40px; line-height: 40px; cursor: pointer; box-sizing: border-box; padding: 0 4px; text-decoration: none; transition: opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), background-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), filter 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .button--success { background-color: #00A300; } .pui--pos .button--warning { background-color: #FFC40D; } .pui--pos .button--danger { background-color: #EE1111; } .pui--pos .button--info { background-color: #5BC0DE; } .pui--pos .button--grey { background-color: #ececec; color: #000000; } .pui--pos .button--base-dodge { background-color: rgb(1.4043186895%, 23.4053114917%, 35.5760734674%); } .pui--pos .button--text { flex-direction: row; height: 30px; } .pui--pos .button--text span { display: inline-block; font-size: 14px; } .pui--pos .button--text i { display: inline-block; margin: 0 0 0 2px; top: 2px; position: relative; } .pui--pos .button i { display: block; font-size: 27px; } .pui--pos .button i + span { display: block; font-size: 11px; line-height: 21px; } .pui--pos .button--overlay-text { position: relative; } .pui--pos .button--overlay-text span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #000000; } .pui--pos .button--inline-text { justify-content: space-between; flex-direction: row; } .pui--pos .button--inline-text i { line-height: 14px; } .pui--pos .button--inline-text i + span { font-size: 14px; line-height: 14px; padding: 0 0 0 8px; } .pui--pos .button--inline-text span { line-height: 14px; font-size: 14px; } .pui--pos .button--icon-discount i { color: #FFC40D; font-size: 44px; } .pui--pos .button span { line-height: 11px; font-family: "Lato", latolight, Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 500; } @media only screen and (min-width: 768px) { .pui--pos .button:hover { opacity: 0.8; } } .pui--pos .button:active { filter: brightness(80%); } .pui--pos .button.active { filter: brightness(80%); } .pui--pos .button.multiple-select { height: auto; } .pui--pos .button.button--no-hover:hover { opacity: 1 !important; } /*=========================================== | Name: | Application fonts | | Description: | The application font root | | Rules: | None | | Location: | ~./defaults/fonts |============================================*/ @font-face { font-family: "latolight"; src: url("../fonts/lato-light-webfont.eot"); src: url("../fonts/lato-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-light-webfont.woff2") format("woff2"), url("../fonts/lato-light-webfont.woff") format("woff"), url("../fonts/lato-light-webfont.ttf") format("truetype"), url("../fonts/lato-light-webfont.svg#latolight") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "kontrapunktlight"; src: url("../fonts/Kontrapunkt-Light-webfont.eot"); src: url("../fonts/Kontrapunkt-Light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Kontrapunkt-Light-webfont.woff2") format("woff2"), url("../fonts/Kontrapunkt-Light-webfont.woff") format("woff"), url("../fonts/Kontrapunkt-Light-webfont.ttf") format("truetype"), url("../fonts/Kontrapunkt-Light-webfont.svg#kontrapunktlight") format("svg"); font-weight: normal; font-style: normal; } /*=========================================== | Name: | Input reset | | Description: | Resets the default browser input styles | | Rules: | None | | Location: | ~./defaults/input |============================================*/ /*=========================================== | REGULAR INPUT |============================================*/ .pui--pos input, .pui--pos button, .pui--pos select { -webkit-apperance: none; border: none; outline: 0; background-color: transparent; border-radius: 0; padding: 8px; box-sizing: border-box; color: #333333; width: 100%; height: 100%; } .pui--pos input:active, .pui--pos input:hover, .pui--pos button:active, .pui--pos button:hover, .pui--pos select:active, .pui--pos select:hover { outline: 0; } .pui--pos input::-webkit-input-placeholder, .pui--pos button::-webkit-input-placeholder, .pui--pos select::-webkit-input-placeholder { color: #333333; opacity: 1; } .pui--pos input::-moz-placeholder, .pui--pos button::-moz-placeholder, .pui--pos select::-moz-placeholder { color: #333333; opacity: 1; } .pui--pos input:-moz-placeholder, .pui--pos button:-moz-placeholder, .pui--pos select:-moz-placeholder { color: #333333; opacity: 1; } .pui--pos input:-ms-input-placeholder, .pui--pos button:-ms-input-placeholder, .pui--pos select:-ms-input-placeholder { color: #333333; opacity: 1; } .pui--pos input.below-keypad, .pui--pos button.below-keypad, .pui--pos select.below-keypad { position: relative; transform: translateX(-200vw); } .pui--pos .input { font-size: 14px; } @media only screen and (min-width: 768px) { .pui--pos .input { font-size: 18px; } } .pui--pos .input { width: 100%; height: 45px; background-color: #FFFFFF; line-height: normal; margin: 0; font-weight: 100; } .pui--pos .input .input__icon { display: none; } .pui--pos .input.below-keypad { position: relative; transform: translateX(-200vw); } .pui--pos .input--has-border { border: 1px solid #B4B4B4; } .pui--pos .input--has-icon { position: relative; } .pui--pos .input--has-icon .input__icon { width: 30px; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); display: block; font-size: 27px; color: #333333; } .pui--pos .input--has-icon input { padding-left: 47px; } .pui--pos .input__buttons { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); height: 30px; font-size: 14px; display: flex; } .pui--pos .input__buttons .button { margin: 0 15px 0 0; padding: 0 8px; } .pui--pos .input__buttons .button:last-child { margin: 0; } .pui--pos .input--has-button { position: relative; } .pui--pos .input--has-button .input__button { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; line-height: 30px; background-color: #03324c; color: #FFFFFF; text-align: center; font-weight: 100; font-size: 14px; } .pui--pos .input--has-button .input__button--danger { background-color: #EE1111; } .pui--pos .input--has-button .input__button--warning { background-color: #FFC40D; } .pui--pos .input--has-button .input__button--info { background-color: #5BC0DE; } .pui--pos .input--has-button .input__button--success { background-color: #00A300; } .pui--pos .input--has-button .input__button--grey { background-color: #E7E7E7; color: #000000; } .pui--pos .input--has-button .input__button i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .pui--pos .input--has-button .input__button--text { width: auto; flex-direction: row; } .pui--pos .input--has-button .input__button--text i { position: relative; font-size: 14px; top: 1px; left: initial; transform: initial; margin: 0 0 0 2px; } .pui--pos .input--has-button input { padding-right: 45px; } .pui--pos .input--align { margin: -15px -15px 0; width: calc(100% + 30px); } .pui--pos input.pickDate { color: #FFFFFF; font-weight: 300; } .pui--pos input.pickDate::-webkit-input-placeholder { color: #FFFFFF; font-weight: 300; } .pui--pos input.pickDate:-moz-placeholder { /* Firefox 18- */ color: #FFFFFF; font-weight: 300; } .pui--pos input.pickDate::-moz-placeholder { /* Firefox 19+ */ color: #FFFFFF; font-weight: 300; } .pui--pos input.pickDate:-ms-input-placeholder { color: #FFFFFF; font-weight: 300; } .pui--pos .input__buttons .dropdown-menu { position: absolute !important; z-index: 9999999; left: initial !important; right: 0 !important; width: 200% !important; } /*=========================================== | RADIO BUTTON |============================================*/ .pui--pos .input-radio { display: flex; align-items: center; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; position: relative; cursor: pointer; } .pui--pos .input-radio .input-radio__checkmark { position: absolute; top: 50%; left: 10px; transform: translate(-50%, -50%); height: 0; width: 0; display: block; border-radius: 20px; background-color: transparent; transition: background-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), width 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .input-radio input[type=radio] { border: 2px solid #03324c; border-radius: 20px; height: 20px; width: 20px; background-color: transparent; transition: border-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); -webkit-appearance: none; cursor: pointer; outline: 0; } .pui--pos .input-radio input[type=radio]:checked { border-color: #00A300; } .pui--pos .input-radio input[type=radio]:checked + .input-radio__checkmark { background-color: #00A300; height: 10px; width: 10px; } .pui--pos .input-radio .input-radio__label { padding: 0 0 0 8px; } /*=========================================== | SWITCH TOGGLE |============================================*/ .pui--pos .input-switch { display: flex; align-items: center; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; position: relative; cursor: pointer; } .pui--pos .input-switch .input-switch__toggle { position: absolute; top: 50%; left: 10px; border-radius: 20px; background-color: #03324c; height: 10px; width: 10px; transform: translate(-50%, -50%); transition: transform 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .input-switch [type=checkbox] { border-radius: 20px; height: 100%; width: 100%; opacity: 0; background-color: transparent; transition: border-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); -webkit-appearance: none; cursor: pointer; outline: 0; } .pui--pos .input-switch [type=checkbox]:checked + .input-switch__toggle { transform: translate(150%, -50%); background-color: #00A300; } .pui--pos .input-switch .input-switch__input { position: relative; height: 20px; width: 40px; border: 2px solid #03324c; border-radius: 20px; } .pui--pos .input-switch .input-switch__label { padding: 0 0 0 8px; } .pui--pos .input-switch--linebreak { display: flex; align-items: center; justify-content: flex-start; flex-direction: column; flex-wrap: nowrap; } .pui--pos .input-switch--linebreak .input-switch__label { padding: 8px 0 0; } /*=========================================== | SELECT |============================================*/ .pui--pos .multiple-select + .dropdown-menu { position: absolute; background-color: #FFFFFF; color: #03324c; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); left: 0 !important; top: -8px; width: 100%; } .pui--pos .multiple-select + .dropdown-menu li { position: relative; padding: 8px; transition: background-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); overflow: hidden; cursor: pointer; } .pui--pos .multiple-select + .dropdown-menu li:before { position: absolute; right: 8px; transform: translateX(200%); transition: transform 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .multiple-select + .dropdown-menu li a { width: 100%; display: block; cursor: pointer; } .pui--pos .multiple-select + .dropdown-menu li.active { background-color: #ececec; } .pui--pos .multiple-select + .dropdown-menu li.active:before { transform: translateX(0%); } /*=========================================== | MULTISELECT |============================================*/ .pui--pos .multiselect { position: relative; } .pui--pos .multiselect__inner { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; flex-wrap: nowrap; width: 320px; max-height: 320px; position: absolute; z-index: 30; right: 0; top: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .pui--pos .multiselect--end .multiselect__inner { right: auto; left: 0; } .pui--pos .multiselect__header { background-color: #d1d1d1; width: 100%; box-sizing: border-box; padding: 8px; } .pui--pos .multiselect__header-close { position: absolute; top: 8px; right: 8px; } .pui--pos .multiselect__header-input { margin: 15px 0 0 0; } .pui--pos .multiselect__content { background-color: #ececec; color: #222222; height: 100%; width: 100%; overflow-y: auto; } .pui--pos .multiselect__list { width: 100%; } .pui--pos .multiselect__list-item { display: flex; align-items: center; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; width: 100%; height: 50px; padding-left: 30px; position: relative; cursor: pointer; transition: background-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .multiselect__list-item:before { left: 15px; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); font-size: 21px; } .pui--pos .multiselect__list-item:hover { background-color: rgba(209, 209, 209, 0.4); } .pui--pos .multiselect__list-item--selected { background-color: #03324c; color: #FFFFFF; } .pui--pos .multiselect__list-item--selected:before { opacity: 1; } .pui--pos .multiselect__list-item--selected:hover { background-color: rgb(1.4043186895%, 23.4053114917%, 35.5760734674%); } /*=========================================== | Name: | List reset | | Description: | Resets the default browser list styles | | Rules: | None | | Location: | ~./defaults/list |============================================*/ .pui--pos ul, .pui--pos li { margin: 0; padding: 0; list-style: none; } /*=========================================== | Name: | Application style reset | | Description: | Resets the default browser root styles | | Rules: | None | | Location: | ~./atoms/variables |============================================*/ .pui.pui--pos, .pui.pui--pos { overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; color: #333333; font-weight: 300; font-size: 14px; font-family: "Lato", latolight, Helvetica Neue, Helvetica, Arial, sans-serif; } /*=========================================== | Name: | Text reset | | Description: | Resets the default browser text styles | | Rules: | None | | Location: | ~./defaults/text |============================================*/ .pui--pos h1, .pui--pos h2, .pui--pos h3, .pui--pos h4, .pui--pos h5, .pui--pos h6, .pui--pos p, .pui--pos a, .pui--pos b, .pui--pos u, .pui--pos s { margin: 0; padding: 0; } /*=========================================== | Name: | Visibility classes | | Description: | Visibility classes | | Rules: | May only contain classes and SCSS logic | | Location: | ~./defaults/visibility |============================================*/ @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos .hidden-mobile { display: none !important; } } @media only screen and (min-width: 768px) and (max-width: 1200px) { .pui--pos .hidden-desktop { display: none !important; } } /*! * Font Awesome 4.4.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ /** # Name: Checkbox # Type: Component # Description: Checkbox input **/ /*= CONFIG =*/ /*= KEYFRAMES =*/ @keyframes pos-ripple { 0% { transform: scale(1); background-color: #47809F; } 100% { transform: scale(1.6); opacity: 0; } } /*= COMPONENT =*/ .pui--pos .c-checkbox__wrap { display: inline-block; cursor: pointer; transition: background-color 0.25s cubic-bezier(0.55, 0, 0.1, 1); padding: 5px; margin: 0 0 0 -5px; } @media only screen and (min-width: 768px) { .pui--pos .c-checkbox__wrap:hover { background-color: rgba(71, 128, 159, 0.1); } } .pui--pos .c-checkbox { width: 20px; height: 20px; background-color: #A1A1A1; position: relative; display: inline-block; cursor: pointer; vertical-align: middle; } .pui--pos .c-checkbox__input { height: 0%; width: 0%; z-index: -1; position: relative; cursor: pointer; background-color: rgba(0, 0, 0, 0); opacity: 0; display: inline-block; pointer-events: none; } .pui--pos .c-checkbox__label { padding: 0 0 0 9px; font-weight: 300; display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; } .pui--pos .c-checkbox__ripple { height: 100%; width: 100%; position: absolute; top: 0; left: 0; } .pui--pos .c-checkbox__background.u-visible ~ .c-checkbox__ripple { animation: pos-ripple 0.5s; } .pui--pos .c-checkbox__background { transition: background-color 0.25s cubic-bezier(0.55, 0, 0.1, 1), color 0.25s cubic-bezier(0.55, 0, 0.1, 1), top 0.25s cubic-bezier(0.55, 0, 0.1, 1), opacity 0.25s cubic-bezier(0.55, 0, 0.1, 1), transform 0.25s cubic-bezier(0.55, 0, 0.1, 1); background-color: #47809F; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; transform: scale(0.9); font-size: 15px; color: #ffffff; display: flex; align-items: center; justify-content: center; opacity: 0; } .pui--pos .c-checkbox__background .c-checkbox__icon { transition: padding 0.25s cubic-bezier(0.55, 0, 0.1, 1) 0.05s; padding: 10px 0 0 0; } .pui--pos .c-checkbox__background { /*= VARIANTS =*/ } .pui--pos .c-checkbox__background.default { background-color: #043C5B; border-color: #043C5B; } .pui--pos .c-checkbox__background.blue { background-color: #47809F; border-color: #47809F; } .pui--pos .c-checkbox__background.success { background-color: #00A300; border-color: #00A300; } .pui--pos .c-checkbox__background.info { background-color: #5BC0DE; border-color: #5BC0DE; } .pui--pos .c-checkbox__background.warning { background-color: #EE9F11; border-color: #EE9F11; } .pui--pos .c-checkbox__background.danger { background-color: #EE1111; border-color: #EE1111; } .pui--pos .c-checkbox__background.u-visible { transform: scale(1); opacity: 1; } .pui--pos .c-checkbox__background.u-visible .c-checkbox__icon { padding: 0; } /** # Name: Button # Type: Component # Options: [--default, --success, --info, --warning, --danger] # Description: This is a generic button component, used across the whole DdD Web App Suite. **/ /*= ANIMATIONS =*/ @keyframes pos-expandableButtonHover { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.2% { transform: matrix3d(0.947, 0, 0, 0, 0, 0.947, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 6.41% { transform: matrix3d(0.934, 0, 0, 0, 0, 0.934, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 11.11% { transform: matrix3d(0.949, 0, 0, 0, 0, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 15.72% { transform: matrix3d(0.973, 0, 0, 0, 0, 0.973, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 20.42% { transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 25.03% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 31.43% { transform: matrix3d(0.997, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 50.05% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 56.46% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 75.08% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 81.48% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } /*= MIXINS =*/ /*= STYLES =*/ .pui--pos c-button { padding: 0; margin: 0; border: none; appearance: none; background-color: rgba(0, 0, 0, 0); outline: 0; cursor: pointer; } .pui--pos .c-button { transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out, color 0.2s ease-in-out; background-color: #043C5B; border: 2px solid #043C5B; color: #ffffff; width: auto; padding: 0 12px; height: 32px; display: flex; align-items: center; justify-content: center; outline: 0; } .pui--pos .c-button:hover { opacity: 0.7; } .pui--pos .c-button:active { animation: pos-expandableButtonHover 1000ms linear both; } .pui--pos .c-button { /*= VARIANTS =*/ } .pui--pos .c-button.default { background-color: #043C5B; border-color: #043C5B; } .pui--pos .c-button.default.outline { background-color: rgba(4, 60, 91, 0); color: #043C5B; border-color: #043C5B; } .pui--pos .c-button.blue { background-color: #47809F; border-color: #47809F; } .pui--pos .c-button.blue.outline { background-color: rgba(71, 128, 159, 0); color: #47809F; border-color: #47809F; } .pui--pos .c-button.success { background-color: #00A300; border-color: #00A300; } .pui--pos .c-button.success.outline { background-color: rgba(0, 163, 0, 0); color: #00A300; border-color: #00A300; } .pui--pos .c-button.info { background-color: #5BC0DE; border-color: #5BC0DE; } .pui--pos .c-button.info.outline { background-color: rgba(91, 192, 222, 0); color: #5BC0DE; border-color: #5BC0DE; } .pui--pos .c-button.warning { background-color: #EE9F11; border-color: #EE9F11; } .pui--pos .c-button.warning.outline { background-color: rgba(238, 159, 17, 0); color: #EE9F11; border-color: #EE9F11; } .pui--pos .c-button.danger { background-color: #EE1111; border-color: #EE1111; } .pui--pos .c-button.danger.outline { background-color: rgba(238, 17, 17, 0); color: #EE1111; border-color: #EE1111; } .pui--pos .c-button.grey { background-color: #5C5C5B; border-color: #5C5C5B; } .pui--pos .c-button.grey.outline { background-color: rgba(92, 92, 91, 0); color: #5C5C5B; border-color: #5C5C5B; } .pui--pos select { outline: 0; appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: none; padding: 0; margin: 0; } .pui--pos select::-ms-expand { display: none; } .pui--pos .c-dropdown { max-width: 100%; width: 100%; min-width: 50vw; position: relative; } @media only screen and (min-width: 768px) { .pui--pos .c-dropdown { width: 334px; min-width: 0; } } .pui--pos .c-dropdown__label { font-size: 15px; font-weight: 400; margin: 0 0 7px 0; display: block; user-select: none; cursor: default; } .pui--pos .c-dropdown__input { transition: border-color 0.25s cubic-bezier(0.55, 0, 0.1, 1); display: flex; width: 100%; background-color: #ffffff; border: 2px solid #5C5C5B; height: 30px; width: 100%; font-size: 15px; -webkit-font-smoothing: antialiased; appearance: none; -moz-appearance: none; padding: 0 12px; box-sizing: border-box; font-weight: 300; border-radius: 0; } .pui--pos .c-dropdown__input[disabled] { opacity: 0.7; } .pui--pos .c-dropdown__input:focus { border-color: #47809F; } .pui--pos .c-dropdown__icon { position: absolute; right: 12px; bottom: 6px; pointer-events: none; } .pui--pos .c-aside { transition: transform 0.25s cubic-bezier(0.55, 0, 0.1, 1); position: absolute; right: 0; top: 0; bottom: 0; width: 275px; background-color: #043C5B; box-sizing: border-box; padding: 12px; color: #ffffff; transform: translateX(100%); } .pui--pos .is-visible .c-aside { transform: translateX(0%); } .pui--pos .c-aside__wrap { transition: background-color 0.25s cubic-bezier(0.55, 0, 0.1, 1), opacity 0.25s cubic-bezier(0.55, 0, 0.1, 1); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; background-color: rgba(0, 0, 0, 0.2); opacity: 0; pointer-events: none; } .pui--pos .c-aside__wrap.is-visible { pointer-events: all; opacity: 1; } /** # Name: Grid # Type: Component # Description: Grid layout **/ /*= COMPONENT =*/ .pui--pos .c-grid { width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; } .pui--pos .c-grid__row { width: 100%; display: flex; flex-wrap: wrap; } .pui--pos .c-grid__row > *:not(column) { margin: 0 0 12px 0; } @media only screen and (min-width: 768px) { .pui--pos .c-grid__row > *:not(column) { margin: 0 12px 12px 0; } } .pui--pos .c-grid__column { width: 100%; } /** # Name: Header # Type: Component # Description: The page header **/ /*= CONFIG =*/ /*= COMPONENT =*/ .pui--pos .c-header { background-color: #043C5B; height: 48px; width: 100%; display: flex; align-items: center; -webkit-font-smoothing: antialiased; } .pui--pos .c-header--theme-dark { background-color: #0B0B0B; } .pui--pos .c-header__text { display: flex; flex-direction: column; margin: 0 0 0 10px; } .pui--pos .c-header__heading { color: #ffffff; font-size: 15px; font-weight: 400; user-select: none; cursor: default; } .pui--pos .c-header__subheading { color: rgba(255, 255, 255, 0.58); font-size: 13px; font-weight: 400; user-select: none; cursor: default; } .pui--pos .c-header__spacing { flex-grow: 1; } .pui--pos .c-header__buttons { display: flex; } .pui--pos .c-header__button { height: 48px; width: 48px; color: #ffffff; background-color: transparent; outline: 0; border: none; appearance: none; display: block; display: flex; align-items: center; justify-content: center; transition: background-color 0.25s cubic-bezier(0.55, 0, 0.1, 1); cursor: pointer; } @media only screen and (min-width: 768px) { .pui--pos .c-header__button:hover { background-color: rgba(255, 255, 255, 0.1); } } .pui--pos .c-header__button-icon { font-size: 22px; } .pui--pos .c-input-group { display: flex; flex-direction: row; align-items: flex-end; } .pui--pos .c-input-group .c-button { width: 26px; height: 26px; padding: 0; } .pui--pos .c-input-group .c-textinput { width: 0; flex-grow: 1; min-width: 60px; } /** # Name: List # Type: Component # Description: Item list **/ /*= COMPONENT =*/ .pui--pos list { overflow-y: auto; -webkit-overflow-scrolling: touch; } /** # Name: List # Type: Component # Description: Item list **/ /*= CONFIG =*/ /*= ANIMATIONS =*/ @keyframes pos-expandableButtonHover { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.2% { transform: matrix3d(0.947, 0, 0, 0, 0, 0.947, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 6.41% { transform: matrix3d(0.934, 0, 0, 0, 0, 0.934, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 11.11% { transform: matrix3d(0.949, 0, 0, 0, 0, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 15.72% { transform: matrix3d(0.973, 0, 0, 0, 0, 0.973, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 20.42% { transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 25.03% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 31.43% { transform: matrix3d(0.997, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 50.05% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 56.46% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 75.08% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 81.48% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } @keyframes pos-animateListItemIn { 0% { max-height: 0; } 100% { max-height: 400px; } } /*= COMPONENT =*/ .pui--pos list { overflow-x: hidden; } .pui--pos list-item { display: block; } .pui--pos list-item.dim { background-color: rgba(0, 0, 0, 0.1); } .pui--pos list-item.new { overflow: hidden; animation: pos-animateListItemIn 0.25s cubic-bezier(0.55, 0, 0.1, 1); animation-fill-mode: forwards; } .pui--pos .c-list-item { transition: background-color 0.25s cubic-bezier(0.55, 0, 0.1, 1); width: 100%; height: 60px; display: block; display: flex; box-sizing: border-box; padding: 0 12px; align-items: center; background-color: #ffffff; border-bottom: 1px solid rgba(92, 92, 91, 0.38); } .pui--pos [expanded] .c-list-item { align-items: flex-start; padding-top: 12px; height: auto; padding-bottom: 12px; flex-direction: column; cursor: pointer; } @media only screen and (min-width: 768px) { .pui--pos [expanded] .c-list-item:hover { background-color: rgba(71, 128, 159, 0.015); } } .pui--pos .expanded[expanded] .c-list-item { cursor: default; background-color: rgba(71, 128, 159, 0.015); } .pui--pos .c-list-item checkbox:not([no-overwrite]) .c-checkbox__wrap { border-radius: 100%; } .pui--pos .c-list-item checkbox:not([no-overwrite]) .c-checkbox { width: 40px; height: 40px; border-radius: 100%; } .pui--pos .c-list-item checkbox:not([no-overwrite]) .c-checkbox__background { border-radius: 100%; } .pui--pos .c-list-item checkbox:not([no-overwrite]) .c-checkbox__ripple { border-radius: 100%; } .pui--pos .c-list-item c-button:not([no-overwrite]) .c-button { width: 44px; height: 44px; border-radius: 100%; font-size: 15px; padding: 0; } .pui--pos .c-list-item condensed { transition: margin 0.5s cubic-bezier(0.55, 0, 0.1, 1), opacity 0.5s cubic-bezier(0.55, 0, 0.1, 1); width: 100%; display: flex; align-items: center; max-height: 70px; } .pui--pos list-item.expanded .c-list-item condensed { margin: 0 0 12px 0; } .pui--pos .c-list-item expanded { transition: max-height 0.5s cubic-bezier(0.55, 0, 0.1, 1), opacity 0.5s cubic-bezier(0.55, 0, 0.1, 1), background-color 0.5s cubic-bezier(0.55, 0, 0.1, 1), margin 0.5s cubic-bezier(0.55, 0, 0.1, 1); display: block; max-height: 0; overflow: hidden; opacity: 0; width: 100%; } .pui--pos list-item.expanded .c-list-item expanded { opacity: 1; max-height: 400px; } /** # Name: List item group # Type: Component # Description: Item list text group **/ /*= COMPONENT =*/ .pui--pos list-item-group { margin: 0 30px 0 0; } .pui--pos list-item-group:last-child { margin: 0; } .pui--pos .c-list-item__group { display: block; -webkit-font-smoothing: antialiased; } .pui--pos .c-list-item__group .c-list-item__group-label { font-size: 14px; display: block; font-weight: 400; color: #000000; user-select: none; cursor: default; } .pui--pos .c-list-item__group .c-list-item__group-label i { font-size: 18px; margin: 0 0 0 8px; } .pui--pos .c-list-item__group .c-list-item__group-text { font-size: 13px; color: #5C5C5B; display: block; font-weight: 400; user-select: none; cursor: default; } .pui--pos .c-list-item__group .c-list-item__group-text i { font-size: 17px; margin: 0 0 0 8px; } .pui--pos .c-list-item__group.align-left { text-align: left; } .pui--pos .c-list-item__group.align-right { text-align: right; } /** # Name: Logo # Type: Component # Description: The DdD Logo **/ /*= COMPONENT =*/ .pui--pos .c-logo { height: 26px; } .pui--pos .c-multiselect { max-width: 100%; width: 100%; min-width: 50vw; position: relative; z-index: 99; } @media only screen and (min-width: 768px) { .pui--pos .c-multiselect { width: 334px; min-width: 0; } } .pui--pos .c-multiselect__list { transition: opacity 0.25s cubic-bezier(0.55, 0, 0.1, 1), max-height 0.25s cubic-bezier(0.55, 0, 0.1, 1); width: 100%; max-height: 0; position: absolute; top: 100%; background-color: #ffffff; overflow-y: auto; overflow-x: hidden; opacity: 0; } .pui--pos .c-multiselect__input:focus ~ .c-multiselect__list { max-height: 163px; opacity: 1; } .pui--pos .c-multiselect__list-item { transition: background-color 0.25s cubic-bezier(0.55, 0, 0.1, 1); height: 40px; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: flex; align-items: center; padding: 0 45px 0 15px; cursor: pointer; position: relative; box-sizing: border-box; } .pui--pos .c-multiselect__list-item:last-child { border: none; } .pui--pos .c-multiselect__list-item:hover { background-color: rgba(0, 0, 0, 0.05); } .pui--pos .c-multiselect__list-icon { transition: opacity 0.25s cubic-bezier(0.55, 0, 0.1, 1); position: absolute; right: 15px; top: 50%; transform: translateY(-50%); opacity: 0; } .pui--pos .c-multiselect__list-icon.selected { opacity: 1; } .pui--pos .c-multiselect__label { font-size: 15px; font-weight: 400; margin: 0 0 7px 0; display: block; user-select: none; cursor: default; } .pui--pos .c-multiselect__input { transition: border-color 0.25s cubic-bezier(0.55, 0, 0.1, 1); display: flex; align-items: center; width: 100%; background-color: #ffffff; border: 2px solid #5C5C5B; height: 30px; width: 100%; font-size: 15px; -webkit-font-smoothing: antialiased; padding: 0 36px 0 12px; box-sizing: border-box; font-weight: 300; border-radius: 0; overflow: hidden; outline: 0; cursor: pointer; } .pui--pos .c-multiselect__input[disabled] { opacity: 0.7; } .pui--pos .c-multiselect__input:focus { border-color: #47809F; } .pui--pos .c-multiselect__input-text { pointer-events: none; user-select: none; overflow: hidden; max-width: 100%; white-space: nowrap; } .pui--pos .c-multiselect__input-placeholder { opacity: 0.5; } .pui--pos .c-multiselect__icon { position: absolute; right: 12px; bottom: 6px; pointer-events: none; } .pui--pos .c-modal { width: 475px; max-width: 90%; background-color: #043C5B; box-sizing: border-box; padding: 12px; color: #ffffff; display: flex; flex-direction: column; } .pui--pos .c-modal > * { margin: 0 0 12px 0; } .pui--pos .c-modal > *:last-child { margin-bottom: 0; } .pui--pos .c-modal__wrap { transition: background-color 0.25s cubic-bezier(0.55, 0, 0.1, 1), opacity 0.25s cubic-bezier(0.55, 0, 0.1, 1); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; background-color: rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; display: flex; justify-content: center; align-items: center; } .pui--pos .c-modal__wrap.is-visible { pointer-events: all; opacity: 1; } .pui--pos .c-modal__title { font-size: 18px; cursor: default; display: flex; justify-content: space-between; } .pui--pos .c-modal__title-text { user-select: none; cursor: default; } .pui--pos .c-modal__title-exit { cursor: pointer; } .pui--pos .c-modal__description { user-select: none; font-size: 14px; cursor: default; } .pui--pos .c-modal__actions { display: flex; flex-direction: row; justify-content: space-between; } .pui--pos .c-modal__actions c-button { width: 100%; margin: 0 6px; user-select: none; } .pui--pos .c-modal__actions c-button:first-child { margin-left: 0; } .pui--pos .c-modal__actions c-button:last-child { margin-right: 0; } /** # Name: Navigation # Type: Component # Description: The page navigation **/ /*= CONFIG =*/ /*= COMPONENT =*/ .pui--pos navigation { height: 100%; } .pui--pos .c-navigation { background-color: rgb(1.315995872%, 19.7399380805%, 29.9389060888%); height: 100%; width: 100%; display: flex; flex-direction: column; align-items: space-between; color: #ffffff; -webkit-font-smoothing: antialiased; } .pui--pos .c-navigation__buttons { width: 100%; height: 55px; display: flex; flex-direction: column; position: relative; overflow-x: hidden; } @media only screen and (min-width: 768px) { .pui--pos .c-navigation__buttons { flex-direction: column; overflow-y: scroll; -webkit-overflow-scrolling: touch; display: block; height: auto; flex-grow: 1; } } .pui--pos .c-navigation__button-group, .pui--pos navigation-main { height: 55px; width: 100%; display: flex; -webkit-overflow-scrolling: touch; background-color: rgb(1.315995872%, 19.7399380805%, 29.9389060888%); } @media only screen and (min-width: 768px) { .pui--pos .c-navigation__button-group, .pui--pos navigation-main { height: auto; flex-direction: column; } } .pui--pos .c-navigation__button-group-main, .pui--pos navigation-main { position: relative; z-index: 3; } .pui--pos .c-navigation__background { background-color: rgba(0, 0, 0, 0.2); position: fixed; width: 100%; top: 48px; bottom: 55px; opacity: 0; pointer-events: none; transition: opacity 0.25s cubic-bezier(0.55, 0, 0.1, 1); } .pui--pos .c-navigation__background.open { opacity: 1; pointer-events: all; } @media only screen and (min-width: 768px) { .pui--pos .c-navigation__background { opacity: 1; pointer-events: all; background-color: transparent; position: relative; top: 0; } } .pui--pos .c-navigation__button-drawer { position: absolute; bottom: 0; background-color: #043C5B; height: auto; max-height: 275px; flex-wrap: wrap; overflow-y: scroll; z-index: 2; pointer-events: none; transform: translateY(100vh); transition: transform 0.25s cubic-bezier(0.55, 0, 0.1, 1); } .pui--pos .c-navigation__button-drawer:before { /*content: '';*/ position: fixed; z-index: -1; background-color: rgba(0, 0, 0, 0.2); width: 100%; top: 48px; left: 0; bottom: 55px; } .pui--pos .c-navigation__background.open .c-navigation__button-drawer { pointer-events: all; transform: translateY(0); } @media only screen and (min-width: 768px) { .pui--pos .c-navigation__button-drawer { pointer-events: all; display: flex; flex-direction: column; position: static; background-color: transparent; max-height: none; transform: none; overflow: hidden; } } @media only screen and (min-width: 768px) { .pui--pos navigation-drawer { pointer-events: all; display: flex; flex-direction: column; position: static; background-color: transparent; max-height: none; transform: none; overflow: hidden; } } /** # Name: Page actions # Type: Component # Description: Page actions **/ /*= COMPONENT =*/ .pui--pos page-actions { transition: max-height 0.25s cubic-bezier(0.55, 0, 0.1, 1), min-height 0.25s cubic-bezier(0.55, 0, 0.1, 1); max-height: 0; min-height: 0; pointer-events: none; overflow: hidden; display: block; } .pui--pos page-actions.page-actions__visible { max-height: 120px; pointer-events: all; min-height: 60px; } .pui--pos .c-page-actions { background-color: #D2D2D2; color: #ffffff; box-sizing: border-box; display: flex; padding: 12px; align-items: center; } .pui--pos .c-page-actions p { margin: 0; } .pui--pos .c-page-actions > c-button { min-width: 100px; width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .c-page-actions > c-button { width: auto; } } /** # Name: Navigation item # Type: Component # Description: The page navigation **/ .pui--pos navigation-item { width: 25%; } .pui--pos .c-navigation__button-drawer navigation-item { width: 100%; } @media only screen and (min-width: 768px) { .pui--pos navigation-item { width: 100%; } } .pui--pos .c-navigation__button { transition: background-color 0.25s cubic-bezier(0.55, 0, 0.1, 1); width: 100%; height: 55px; color: #ffffff; box-sizing: border-box; padding: 0 18px; position: relative; cursor: pointer; display: flex; align-items: center; flex-direction: column; justify-content: center; -webkit-font-smoothing: antialiased; user-select: none; } .pui--pos .c-navigation__button-drawer .c-navigation__button { flex-direction: row; justify-content: flex-start; } @media only screen and (min-width: 768px) { .pui--pos .c-navigation__button { height: 50px; flex-direction: row; justify-content: flex-start; } } .pui--pos .c-navigation__button:before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; height: 3px; width: 80%; background-color: rgba(255, 255, 255, 0); transition: background-color 0.25s cubic-bezier(0.55, 0, 0.1, 1), width 0.25s cubic-bezier(0.55, 0, 0.1, 1); } @media only screen and (min-width: 768px) { .pui--pos .c-navigation__button:before { height: 50px; bottom: auto; top: 0; } } @media only screen and (min-width: 768px) { .pui--pos .c-navigation__button:hover:before { background-color: rgba(255, 255, 255, 0.1); width: 100%; opacity: 1; } } .pui--pos .c-navigation__button:active:before, .pui--pos .c-navigation__button.active, .pui--pos navigation-item.active .c-navigation__button { background-color: #5BC0DE; } @media only screen and (min-width: 768px) { .pui--pos .c-navigation__button:active:before, .pui--pos .c-navigation__button.active, .pui--pos navigation-item.active .c-navigation__button { background-color: rgba(0, 0, 0, 0.2); } } .pui--pos navigation-item.active .c-navigation__button:active { color: #ffffff; } .pui--pos navigation-item.active .c-navigation__button:active .c-navigation__button-icon, .pui--pos navigation-item.active .c-navigation__button:active .c-navigation__button-label { color: #ffffff; } @media only screen and (min-width: 768px) { .pui--pos .c-navigation__button-navigation-trigger { display: none !important; } } .pui--pos .c-navigation__button-disabled { opacity: 0.5; pointer-events: none; } .pui--pos .c-navigation__button-icon { width: 20px; font-size: 16px; position: relative; z-index: 1; text-align: center; } .pui--pos .c-navigation__button-drawer .c-navigation__button-icon { margin: 0 22px 0 0; font-size: 20px; text-align: left; } @media only screen and (min-width: 768px) { .pui--pos .c-navigation__button-icon { margin: 0 22px 0 0; font-size: 20px; text-align: left; } } .pui--pos .c-navigation__button:active .c-navigation__button-icon { color: #5BC0DE; } @media only screen and (min-width: 768px) { .pui--pos .c-navigation__button:active .c-navigation__button-icon { color: #ffffff; } } .pui--pos .c-navigation__button-label { font-size: 12px; position: relative; z-index: 1; text-align: center; font-weight: 400; } .pui--pos .c-navigation__button-drawer .c-navigation__button-label { font-size: 15px; text-align: left; } @media only screen and (min-width: 768px) { .pui--pos .c-navigation__button-label { font-size: 15px; text-align: left; } } .pui--pos .c-navigation__button:active .c-navigation__button-label { color: #5BC0DE; } @media only screen and (min-width: 768px) { .pui--pos .c-navigation__button:active .c-navigation__button-label { color: #ffffff; } } /** # Name: Page Splash # Type: Component # Description: Splash for empty pages **/ /*= COMPONENT =*/ .pui--pos page-splash { flex-grow: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; } .pui--pos .page-splash__icon { display: block; font-size: 120px; color: #D2D2D2; text-align: center; } .pui--pos .page-splash__label { display: block; color: #D2D2D2; font-weight: 300; font-size: 26px; text-align: center; } .pui--pos .page-splash__content { margin: 15px 0 0 0; display: flex; justify-content: center; } .pui--pos .progress-bar { display: block; width: 100%; height: 6px; background: #F0F0F0; } .pui--pos .progress-bar.size-small { height: 3px; } .pui--pos .progress-bar.size-large { height: 9px; } .pui--pos .progress-bar { /* &.type-info { background: lighten($g-color--info, 10); } &.type-warning { background: lighten($g-color--warning, 10); } &.type-danger { background: lighten($g-color--danger, 10); } &.type-success { background: lighten($g-color--success, 10); } */ } .pui--pos .progress-bar__fill { height: 100%; display: block; background: rgb(89.1176470588%, 89.1176470588%, 89.1176470588%); } .pui--pos .progress-bar.type-info .progress-bar__fill { background: #5BC0DE; } .pui--pos .progress-bar.type-warning .progress-bar__fill { background: #EE9F11; } .pui--pos .progress-bar.type-danger .progress-bar__fill { background: #EE1111; } .pui--pos .progress-bar.type-success .progress-bar__fill { background: #00A300; } /** # Name: Select menu # Type: Component # Description: Dropdown selection menu, globally usable **/ /*= ANIMATIONS =*/ @keyframes pos-selectItemSelected {} /*= COMPONENT =*/ .pui--pos .c-select-menu__wrap { position: relative; user-select: none; cursor: pointer; outline: 0; } .pui--pos .c-select-menu { width: 100vw; position: fixed; top: 100px; bottom: 0; max-width: 100vw; right: 0; background-color: #ffffff; display: flex; flex-direction: column; height: 252px; max-height: 100vw; box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1); z-index: 5; opacity: 0; transition: visibility 0s linear 0.2s, opacity 0.25s cubic-bezier(0.55, 0, 0.1, 1), transform 0.25s cubic-bezier(0.55, 0, 0.1, 1); visibility: hidden; transform: translateY(0%); } @media only screen and (min-width: 768px) { .pui--pos .c-select-menu { top: 0; width: 336px; position: absolute; } } .pui--pos .c-select-menu__wrap:focus .c-select-menu { transition: visibility 0s, opacity 0.25s cubic-bezier(0.55, 0, 0.1, 1), transform 0.25s cubic-bezier(0.55, 0, 0.1, 1); transform: translateY(10%); visibility: visible; opacity: 1; } .pui--pos .c-select-menu__header { height: auto; width: 100%; display: block; padding: 12px; box-sizing: border-box; } .pui--pos .c-select-menu__body { flex-grow: 1; overflow-y: auto; padding: 0 12px; box-sizing: border-box; } .pui--pos .c-select-menu__body checkbox { display: block; } .pui--pos .c-select-menu__body .c-checkbox__wrap { width: 100%; } .pui--pos .c-select-menu__item { transition: background-color 0.25s cubic-bezier(0.55, 0, 0.1, 1), color 0.25s cubic-bezier(0.55, 0, 0.1, 1); height: 44px; padding: 0 12px; box-sizing: border-box; display: flex; align-items: center; position: relative; } .pui--pos .c-select-menu__item-label { position: relative; z-index: 1; } .pui--pos .c-select-menu__item-background { z-index: 0; transition: background-color 0.25s cubic-bezier(0.55, 0, 0.1, 1), width 0.25s cubic-bezier(0.55, 0, 0.1, 1); position: absolute; top: 0; left: 50%; width: 80%; height: 100%; display: block; transform: translateX(-50%); } @media only screen and (min-width: 768px) { .pui--pos .c-select-menu__item:hover .c-select-menu__item-background { width: 100%; background-color: rgba(71, 128, 159, 0.1); } .pui--pos .c-select-menu__item:active .c-select-menu__item-background { background-color: rgba(21.6692242114%, 39.0656436488%, 48.5268542199%, 0.3); } } .pui--pos .c-select-menu__item.selected { background-color: #47809F; color: #ffffff; } .pui--pos .c-select-menu__item.selected .c-select-menu__item-icon { opacity: 1; transform: scale(1); } .pui--pos .c-select-menu__item-icon { transition: opacity 0.25s cubic-bezier(0.55, 0, 0.1, 1), transform 0.25s cubic-bezier(0.55, 0, 0.1, 1) 0.05s; font-size: 21px; opacity: 0; position: relative; z-index: 1; transform: scale(0.5); } /** # Name: Spacer # Type: Component # Description: Fills remaining horizontal space **/ /*= COMPONENT =*/ .pui--pos spacer { flex-grow: 1; } .pui--pos space { width: 12px; display: block; height: 1px; } .pui--pos space-vertical { height: 10px; width: 100%; display: block; } .pui--pos .sidebars { display: flex; flex-direction: column; height: 100%; } .pui--pos .sidebars .sidebar { flex-grow: 1; } .pui--pos .sidebar { height: 100%; width: 240px; padding-top: 30px; display: flex; flex-direction: column; } .pui--pos .sidebar__header { color: #ffffff; font-size: 20px; font-weight: 300; padding-bottom: 15px; user-select: none; cursor: default; } .pui--pos .sidebar__content { flex-grow: 1; } .pui--pos .sidebar--outline .sidebar__content { border-left: 1px solid rgba(255, 255, 255, 0.27); } .pui--pos .sidebar__link { transition: background-color 0.25s cubic-bezier(0.55, 0, 0.1, 1); width: 100%; display: block; padding: 10px 20px; box-sizing: border-box; color: #ffffff; text-decoration: none; display: flex; justify-content: space-between; align-items: center; user-select: none; cursor: default; } .pui--pos .sidebar__link:hover { background-color: rgba(255, 255, 255, 0.07); } .pui--pos .sidebar__link-text { display: flex; flex-direction: column; } .pui--pos .sidebar__link-heading { font-weight: 400; } .pui--pos .sidebar__link-subheading { font-size: 12px; padding-top: 5px; } .pui--pos .sidebar__link-chevron { transition: opacity 0.25s cubic-bezier(0.55, 0, 0.1, 1); width: 26px; height: 26px; background-color: #47809F; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; pointer-events: none; } .pui--pos .sidebar__link:hover .sidebar__link-chevron { opacity: 1; pointer-events: all; } .pui--pos .sidebar__link:hover .sidebar__link-chevron:hover { opacity: 0.8; } .pui--pos .sidebar__message { color: #ffffff; padding: 10px 20px; } .pui--pos .sidebar__message-heading { font-weight: 400; user-select: none; cursor: default; } .pui--pos .sidebar__message-content { font-size: 12px; padding-top: 5px; user-select: none; cursor: default; } .pui--pos .c-split-button { transition: opacity 0.25s cubic-bezier(0.55, 0, 0.1, 1); height: 30px; display: inline-flex; flex-direction: row; } .pui--pos .c-split-button--disabled { user-select: none; cursor: not-allowed; pointer-events: none; opacity: 0.6; } .pui--pos .c-split-button__icon-polyfill { transition: opacity 0.25s cubic-bezier(0.55, 0, 0.1, 1); height: 30px; width: 30px; background-color: #D2D2D2; display: flex; align-items: center; justify-content: center; color: #ffffff; } .pui--pos .c-split-button--type-default .c-split-button__icon-polyfill { background-color: rgb(22.9040068201%, 41.2917306053%, 51.2920716113%); } .pui--pos .c-split-button--type-success .c-split-button__icon-polyfill { background-color: rgb(0%, 47.9215686275%, 0%); } .pui--pos .c-split-button--type-danger .c-split-button__icon-polyfill { background-color: rgb(78.4%, 5.6%, 5.6%); } .pui--pos .c-split-button--type-warning .c-split-button__icon-polyfill { background-color: rgb(78.4%, 52.3764705882%, 5.6%); } .pui--pos .c-split-button--type-info .c-split-button__icon-polyfill { background-color: rgb(22.3664775555%, 70.177366378%, 84.3786204837%); } .pui--pos .c-split-button--type-grey .c-split-button__icon-polyfill { background-color: rgb(47.6862745098%, 47.6862745098%, 47.6862745098%); } .pui--pos .c-split-button__icon { font-size: 17px; cursor: default; cursor: default; user-select: none; position: relative; } @media only screen and (min-width: 768px) { .pui--pos .c-split-button:not(.c-split-button--full-click) .c-split-button__icon:hover + .c-split-button__label { opacity: 0.7; } .pui--pos .c-split-button__icon { /* When hovering the icon part of the split button */ } .pui--pos .c-split-button--dynamic-icon .c-split-button__icon:hover .c-split-button__icon-original { transform: rotate(90deg); opacity: 0; } .pui--pos .c-split-button--dynamic-icon .c-split-button__icon:hover .c-split-button__icon-hover { transform: rotate(0deg); opacity: 1; } .pui--pos .c-split-button__icon:hover > .c-split-button__icon-label, .pui--pos .c-split-button--full-click:hover .c-split-button__icon > .c-split-button__icon-label { max-width: 120px; padding-right: 10px; } .pui--pos .c-split-button__icon:hover + .c-split-button__label, .pui--pos .c-split-button--full-click:hover .c-split-button__icon + .c-split-button__label { opacity: 0.7; } } .pui--pos .c-split-button--dynamic-icon.c-split-button--full-click:hover .c-split-button__icon-original { transform: rotate(90deg); opacity: 0; } .pui--pos .c-split-button--dynamic-icon.c-split-button--full-click:hover .c-split-button__icon-hover { transform: rotate(0deg); opacity: 1; } .pui--pos .c-split-button__icon-original, .pui--pos .c-split-button__icon-hover { transition: transform 0.25s cubic-bezier(0.55, 0, 0.1, 1), opacity 0.25s cubic-bezier(0.55, 0, 0.1, 1); user-select: none; position: absolute; transform-style: preserve-3d; } .pui--pos .c-split-button__icon-hover { transform: rotate(-90deg); opacity: 0; } .pui--pos .c-split-button__icon-label { transition: max-width 0.25s cubic-bezier(0.55, 0, 0.1, 1), padding 0.25s cubic-bezier(0.55, 0, 0.1, 1); position: absolute; left: 30px; top: 0; height: 100%; display: flex; align-items: center; max-width: 0; overflow: hidden; z-index: 3; font-size: 14px; padding: 0; cursor: default; user-select: none; color: #ffffff; } .pui--pos .c-split-button--type-default .c-split-button__icon-label { background-color: rgb(22.9040068201%, 41.2917306053%, 51.2920716113%); } .pui--pos .c-split-button--type-success .c-split-button__icon-label { background-color: rgb(0%, 47.9215686275%, 0%); } .pui--pos .c-split-button--type-danger .c-split-button__icon-label { background-color: rgb(78.4%, 5.6%, 5.6%); } .pui--pos .c-split-button--type-warning .c-split-button__icon-label { background-color: rgb(78.4%, 52.3764705882%, 5.6%); } .pui--pos .c-split-button--type-info .c-split-button__icon-label { background-color: rgb(22.3664775555%, 70.177366378%, 84.3786204837%); } .pui--pos .c-split-button--type-grey .c-split-button__icon-label { background-color: rgb(47.6862745098%, 47.6862745098%, 47.6862745098%); } .pui--pos .c-split-button__label { transition: opacity 0.25s cubic-bezier(0.55, 0, 0.1, 1); font-size: 14px; display: flex; align-items: center; justify-content: center; padding: 0 10px; color: #ffffff; cursor: default; user-select: none; } .pui--pos .c-split-button--type-default .c-split-button__label { background-color: #47809F; } .pui--pos .c-split-button--type-success .c-split-button__label { background-color: #00A300; } .pui--pos .c-split-button--type-danger .c-split-button__label { background-color: #EE1111; } .pui--pos .c-split-button--type-warning .c-split-button__label { background-color: #EE9F11; } .pui--pos .c-split-button--type-info .c-split-button__label { background-color: #5BC0DE; } .pui--pos .c-split-button--type-grey .c-split-button__label { background-color: #8E8E8E; } .pui--pos split-view, .pui--pos .split-view { display: flex; height: 100%; width: 100%; flex-grow: 1; position: relative; } .pui--pos .split-view { flex-direction: column-reverse; } @media only screen and (min-width: 768px) { .pui--pos .split-view { flex-direction: row; } } .pui--pos split-view { flex-direction: column; } .pui--pos split-navigation { display: flex; flex-direction: column; flex-grow: 1; } .pui--pos .split-view__navigation { flex-grow: 1; max-height: 180px; min-height: 180px; width: 100%; background-color: #E7E7E7; box-sizing: border-box; padding: 10px; display: flex; flex-direction: column; flex-basis: 180px; } @media only screen and (min-width: 768px) { .pui--pos .split-view__navigation { flex-basis: 250px; max-width: 250px; max-height: none; } } .pui--pos .split-view__content { flex-grow: 1; background-color: #ffffff; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .pui--pos split-navigation-list { flex-grow: 1; overflow: hidden; display: flex; flex-direction: column; } @media only screen and (min-width: 768px) { .pui--pos split-navigation-list { overflow: visible; } } .pui--pos .split-view__navigation-list { margin: 10px 0 0; overflow-y: auto; overflow-x: hidden; height: 100%; flex-grow: 1; -webkit-overflow-scrolling: touch; } @media only screen and (min-width: 768px) { .pui--pos .split-view__navigation-list { overflow: visible; } } .pui--pos .split-view__navigation-button { transition: background-color 0.25s cubic-bezier(0.55, 0, 0.1, 1); height: 40px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #171717; margin: 0 -10px; padding: 0 10px; cursor: pointer; } @media only screen and (min-width: 768px) { .pui--pos .split-view__navigation-button:hover { background-color: rgba(0, 0, 0, 0.1); } } .pui--pos .split-view__navigation-button:active { background-color: rgba(0, 0, 0, 0.2); } .pui--pos split-navigation-button.active .split-view__navigation-button { background-color: #D2D2D2; } .pui--pos .split-view__navigation-button span, .pui--pos .split-view__navigation-button i { user-select: none; } .pui--pos .split-view__navigation-button-icon { transform: rotate(90deg); } /** # Name: List toolbar # Type: Component # Description: Item list toolbar **/ /*= COMPONENT =*/ .pui--pos .c-toolbar { width: 100%; background-color: #F0F0F0; height: 40px; display: flex; align-items: center; padding: 0 12px; box-sizing: border-box; } .pui--pos toolbar-wrap { width: 100%; height: 100%; } .pui--pos .c-toolbar__wrap { width: calc(100% + 24px); margin: 0 -12px; display: flex; align-items: center; height: 100%; } .pui--pos .c-toolbar label { color: #000000; } .pui--pos .c-toolbar label i { color: #000000; } .pui--pos .c-toolbar select-menu { margin-left: 12px; } .pui--pos .c-toolbar > .c-textinput, .pui--pos .c-toolbar__wrap > .c-textinput { box-sizing: content-box; height: 100%; width: 0%; flex-grow: 1; } .pui--pos .c-toolbar > .c-textinput .c-textinput__input, .pui--pos .c-toolbar__wrap > .c-textinput .c-textinput__input { height: 100%; border: none; background-color: #F6F6F6; } .pui--pos .c-toolbar > .c-textinput ~ c-button, .pui--pos .c-toolbar__wrap > .c-textinput ~ c-button { height: 100%; } .pui--pos .c-toolbar > .c-textinput ~ c-button .c-button, .pui--pos .c-toolbar__wrap > .c-textinput ~ c-button .c-button { height: 100%; border: none; } .pui--pos .c-toolbar > .c-textinput + .c-textinput, .pui--pos .c-toolbar__wrap > .c-textinput + .c-textinput { border-left: 1px solid rgba(92, 92, 91, 0.3); } .pui--pos .c-toolbar > c-button, .pui--pos .c-toolbar__wrap > c-button { min-width: .c-toolbar > c-button, .c-toolbar__wrap > c-buttonc-button; min-width-border-left: 1px solid #ffffff; } .pui--pos .toggle-switch { display: flex; flex-direction: column; position: relative; } .pui--pos .toggle-switch__label { user-select: none; cursor: default; } .pui--pos .toggle-switch__input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; /* appearance: none; visibility: hidden; opacity: 0;*/ } .pui--pos .toggle-switch__container { display: flex; margin: 5px 0 0; cursor: pointer; } .pui--pos .toggle-switch__controller { width: 30px; height: 14px; border: 2px solid #043C5B; border-radius: 14px; margin: 0 5px 0 0; } .pui--pos .toggle-switch__knob { transition: transform 0.25s cubic-bezier(0.55, 0, 0.1, 1); display: block; height: 9px; width: 9px; background-color: #043C5B; border-radius: 100%; margin: 3px; } .pui--pos .toggle-switch__controller.active .toggle-switch__knob { transform: translateX(16px); } .pui--pos .toggle-switch__value { user-select: none; } /** # Name: List # Type: Component # Description: Item list **/ /*= COMPONENT =*/ .pui--pos view, .pui--pos .view { height: 100%; width: 100%; flex-grow: 1; display: flex; flex-direction: column; } .pui--pos view.view--screen, .pui--pos .view.view--screen { height: 100vh; width: 100vw; } /** # Name: Flex # Type: Component # Description: Flex box layout styles **/ /*= COMPONENT =*/ .pui--pos .flex { display: flex; } .pui--pos .flex-direction-row { flex-direction: row; } .pui--pos .flex-direction-column { flex-direction: column; } .pui--pos .flex-fill-vertical { height: 100%; } .pui--pos .flex-fill-horizontal { width: 100%; } .pui--pos .flex-grow { height: 0; flex-grow: 1; } .pui--pos .vertical-scroll { overflow-y: scroll; } .pui--pos .no-horizontal-scroll { overflow-x: hidden; } .pui--pos .fit-to-old-view { margin: -15px; width: calc(100% + 30px); height: calc(100% + 30px); } .pui--pos .fill-horizontal { width: 100% !important; } .pui--pos .c-textinput { outline: 0; appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: none; padding: 0; margin: 0; max-width: 100%; width: 334px; position: relative; } .pui--pos .c-textinput__label { font-size: 15px; font-weight: 300; margin: 0 0 7px 0; display: block; user-select: none; cursor: default; } .pui--pos .theme--dark .c-textinput__label { color: #ffffff; } .pui--pos .c-textinput__input { transition: border-color 0.25s cubic-bezier(0.55, 0, 0.1, 1); display: flex; width: 100%; border: 2px solid #5C5C5B; height: 30px; width: 100%; font-size: 15px; -webkit-font-smoothing: antialiased; padding: 0 12px; box-sizing: border-box; font-weight: 300; background-color: #ffffff; font-weight: 400; } .pui--pos .c-textinput__input[disabled] { opacity: 0.7; } .pui--pos .c-textinput__input:focus { border-color: #47809F; } .pui--pos .c-textinput__input.transparent { background-color: transparent; } .pui--pos .theme--dark .c-textinput__input { color: #ffffff; } .pui--pos .theme--dark .c-textinput__input::-webkit-input-placeholder { color: #7A7B7B; } .pui--pos .theme--dark .c-textinput__input:not(:focus) { border-color: #7A7B7B; } .pui--pos .c-textinput__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 19px; color: #5C5C5B; } .pui--pos .c-textinput__icon ~ .c-textinput__input { padding-left: 36px; } .pui--pos [toggle-element-target] { transition: max-height 0.25s cubic-bezier(0.55, 0, 0.1, 1), min-height 0.25s cubic-bezier(0.55, 0, 0.1, 1); max-height: 0; min-height: 0; overflow: hidden; } .pui--pos [toggle-element-target].toggle-element-visible { max-height: 300px; min-height: 300px; } @media only screen and (min-width: 768px) { .pui--pos [toggle-element-target].toggle-element-visible { max-height: 460px; min-height: 460px; } } /** # Name: Layout # Type: Component # Description: The layout file for the DdD Web Application Suite **/ /*= LAYOUT =*/ .pui--pos .layout { display: flex; flex-direction: column; width: 100%; height: 100%; background-color: #F6F6F6; } @media only screen and (min-width: 768px) { .pui--pos .layout { flex-direction: row; } } .pui--pos .layout__pane-left { display: flex; flex-direction: column; flex-grow: 1; } @media only screen and (min-width: 768px) { .pui--pos .layout__pane-left { width: 0; } } .pui--pos .layout__content { flex-grow: 1; display: flex; flex-direction: column; } .pui--pos .layout__pane-right { width: 100%; z-index: 1; } @media only screen and (min-width: 768px) { .pui--pos .layout__pane-right { width: 256px; min-width: 256px; } } .pui--pos .ng-toast { position: fixed; z-index: 1080; width: 100%; height: 0; margin-top: 20px; text-align: center; } .pui--pos .ng-toast.ng-toast--top { top: 0; bottom: auto; } .pui--pos .ng-toast.ng-toast--top .ng-toast__list { top: 0; bottom: auto; } .pui--pos .ng-toast.ng-toast--top.ng-toast--center .ng-toast__list { position: static; } .pui--pos .ng-toast.ng-toast--bottom { top: auto; bottom: 0; } .pui--pos .ng-toast.ng-toast--bottom .ng-toast__list { top: auto; bottom: 0; } .pui--pos .ng-toast.ng-toast--bottom.ng-toast--center .ng-toast__list { pointer-events: none; } .pui--pos .ng-toast.ng-toast--bottom.ng-toast--center .ng-toast__message .alert { pointer-events: auto; } .pui--pos .ng-toast.ng-toast--right .ng-toast__list { left: auto; right: 0; margin-right: 20px; } .pui--pos .ng-toast.ng-toast--right .ng-toast__message { text-align: right; } .pui--pos .ng-toast.ng-toast--left .ng-toast__list { right: auto; left: 0; margin-left: 20px; } .pui--pos .ng-toast.ng-toast--left .ng-toast__message { text-align: left; } .pui--pos .ng-toast .ng-toast__list { display: inline-block; position: absolute; right: 0; left: 0; margin: 0 auto; padding: 0; list-style: none; } .pui--pos .ng-toast .ng-toast__message { display: block; width: 100%; text-align: center; } .pui--pos .ng-toast .ng-toast__message .alert { display: inline-block; } .pui--pos .ng-toast .ng-toast__message__count { display: inline-block; margin: 0 15px 0 5px; } .pui--pos .ng-toast--animate-fade .ng-enter, .pui--pos .ng-toast--animate-fade .ng-leave, .pui--pos .ng-toast--animate-fade .ng-move { transition-property: opacity; transition-duration: 0.3s; transition-timing-function: ease; } .pui--pos .ng-toast--animate-fade .ng-enter { opacity: 0; } .pui--pos .ng-toast--animate-fade .ng-enter.ng-enter-active { opacity: 1; } .pui--pos .ng-toast--animate-fade .ng-leave { opacity: 1; } .pui--pos .ng-toast--animate-fade .ng-leave.ng-leave-active { opacity: 0; } .pui--pos .ng-toast--animate-fade .ng-move { opacity: 0.5; } .pui--pos .ng-toast--animate-fade .ng-move.ng-move-active { opacity: 1; } .pui--pos .ng-toast--animate-slide .ng-enter, .pui--pos .ng-toast--animate-slide .ng-leave, .pui--pos .ng-toast--animate-slide .ng-move { position: relative; transition-duration: 0.3s; transition-timing-function: ease; } .pui--pos .ng-toast--animate-slide.ng-toast--center.ng-toast--top .ng-toast__message { position: relative; transition-property: top, margin-top, opacity; } .pui--pos .ng-toast--animate-slide.ng-toast--center.ng-toast--top .ng-toast__message.ng-enter { opacity: 0; top: -100px; } .pui--pos .ng-toast--animate-slide.ng-toast--center.ng-toast--top .ng-toast__message.ng-enter.ng-enter-active { opacity: 1; top: 0; } .pui--pos .ng-toast--animate-slide.ng-toast--center.ng-toast--top .ng-toast__message.ng-leave { opacity: 1; top: 0; } .pui--pos .ng-toast--animate-slide.ng-toast--center.ng-toast--top .ng-toast__message.ng-leave.ng-leave-active { opacity: 0; margin-top: -72px; } .pui--pos .ng-toast--animate-slide.ng-toast--center.ng-toast--bottom .ng-toast__message { position: relative; transition-property: bottom, margin-bottom, opacity; } .pui--pos .ng-toast--animate-slide.ng-toast--center.ng-toast--bottom .ng-toast__message.ng-enter { opacity: 0; bottom: -100px; } .pui--pos .ng-toast--animate-slide.ng-toast--center.ng-toast--bottom .ng-toast__message.ng-enter.ng-enter-active { opacity: 1; bottom: 0; } .pui--pos .ng-toast--animate-slide.ng-toast--center.ng-toast--bottom .ng-toast__message.ng-leave { opacity: 1; bottom: 0; } .pui--pos .ng-toast--animate-slide.ng-toast--center.ng-toast--bottom .ng-toast__message.ng-leave.ng-leave-active { opacity: 0; margin-bottom: -72px; } .pui--pos .ng-toast--animate-slide.ng-toast--right { transition-property: right, margin-right, opacity; } .pui--pos .ng-toast--animate-slide.ng-toast--right .ng-enter { opacity: 0; right: -200%; margin-right: 20px; } .pui--pos .ng-toast--animate-slide.ng-toast--right .ng-enter.ng-enter-active { opacity: 1; right: 0; margin-right: 0; } .pui--pos .ng-toast--animate-slide.ng-toast--right .ng-leave { opacity: 1; right: 0; margin-right: 0; } .pui--pos .ng-toast--animate-slide.ng-toast--right .ng-leave.ng-leave-active { opacity: 0; right: -200%; margin-right: 20px; } .pui--pos .ng-toast--animate-slide.ng-toast--left { transition-property: left, margin-left, opacity; } .pui--pos .ng-toast--animate-slide.ng-toast--left .ng-enter { opacity: 0; left: -200%; margin-left: 20px; } .pui--pos .ng-toast--animate-slide.ng-toast--left .ng-enter.ng-enter-active { opacity: 1; left: 0; margin-left: 0; } .pui--pos .ng-toast--animate-slide.ng-toast--left .ng-leave { opacity: 1; left: 0; margin-left: 0; } .pui--pos .ng-toast--animate-slide.ng-toast--left .ng-leave.ng-leave-active { opacity: 0; left: -200%; margin-left: 20px; } /*=========================================== | COMPONENTS |============================================*/ /*=========================================== | Name: | Dashboard date | | Description: | Date component on the dashboard | | Rules: | None | | Location: | ~./components/dashboard-date | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | COMPONENT |============================================*/ .pui--pos .date__container { height: 33%; } @media only screen and (min-width: 768px) { .pui--pos .date__container { height: 100%; } } .pui--pos .date__container { float: none; } @media only screen and (min-width: 768px) { .pui--pos .date__container { float: left; } } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .date__container { display: none; } } .pui--pos .date__container { flex-grow: 1; box-sizing: border-box; width: 100%; color: #FFFFFF; padding: 2px; } .pui--pos .date__inner { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; margin: 0 -15px; } @media only screen and (min-width: 768px) { .pui--pos .date__inner { margin: 0; } } .pui--pos .date__inner { padding: 0 15px; } @media only screen and (min-width: 768px) { .pui--pos .date__inner { padding: 0; } } .pui--pos .date__inner { position: relative; background-color: #EE1111; box-sizing: border-box; padding: 15px; height: 100%; } .pui--pos .date__icon { position: absolute; font-size: 32px; top: 8px; left: 8px; } .pui--pos .date__inner-text { font-size: 27px; display: block; font-weight: 100; text-align: center; } /*=========================================== | Name: | Dashboard connector | | Description: | Connector component on the dashboard | | Rules: | None | | Location: | ~./components/dashboard-connector | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | COMPONENT |============================================*/ .pui--pos .connector__container { height: 33%; } @media only screen and (min-width: 768px) { .pui--pos .connector__container { height: 100%; } } .pui--pos .connector__container { float: none; } @media only screen and (min-width: 768px) { .pui--pos .connector__container { float: left; } } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .connector__container { display: none; } } .pui--pos .connector__container { flex-grow: 1; box-sizing: border-box; width: 100%; color: #FFFFFF; padding: 2px; } .pui--pos .connector__inner { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px; margin: 0 -15px; } @media only screen and (min-width: 768px) { .pui--pos .connector__inner { margin: 0; } } .pui--pos .connector__inner { padding: 0 15px; } @media only screen and (min-width: 768px) { .pui--pos .connector__inner { padding: 0; } } .pui--pos .connector__inner { position: relative; background-color: #135B83; box-sizing: border-box; padding: 15px; height: 100%; } .pui--pos .login__wrap { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; margin: 0 -15px; } @media only screen and (min-width: 768px) { .pui--pos .login__wrap { margin: 0; } } .pui--pos .login__wrap { width: 100%; } .pui--pos .connector__icon { position: absolute; font-size: 32px; top: 8px; left: 8px; } .pui--pos .connector__inner-text { font-size: 27px; display: block; font-weight: 600; border-radius: 100%; text-align: center; border: 2px solid #FFFFFF; line-height: 80px; height: 80px; width: 80px; } /*=========================================== | Name: | Dashboard login | | Description: | Login component on the dashboard | | Rules: | None | | Location: | ~./components/dashboard-login | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | COMPONENT |============================================*/ .pui--pos .login__container { height: 33%; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .login__container { height: 50%; } } @media only screen and (min-width: 768px) { .pui--pos .login__container { height: 100%; } } .pui--pos .login__container { float: none; } @media only screen and (min-width: 768px) { .pui--pos .login__container { float: left; } } @media only screen and (min-width: 768px) { .pui--pos .login__container { overflow: hidden; } } .pui--pos .login__container { flex-grow: 1; box-sizing: border-box; width: 100%; color: #FFFFFF; padding: 2px; } .pui--pos .login__inner { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; margin: 0 -15px; } @media only screen and (min-width: 768px) { .pui--pos .login__inner { margin: 0; } } .pui--pos .login__inner { background-color: #5BC0DE; box-sizing: border-box; padding: 15px; height: 100%; width: 100%; position: relative; } .pui--pos .login__inner.login__unlogged { box-sizing: content-box; } @media only screen and (min-width: 768px) { .pui--pos .login__inner.login__unlogged { box-sizing: border-box; } } .pui--pos .login__inner.login__unlogged { margin: 0 -15px; } @media only screen and (min-width: 768px) { .pui--pos .login__inner.login__unlogged { margin: 0; } } .pui--pos .login__inner.login__unlogged { padding: 0 15px; } @media only screen and (min-width: 768px) { .pui--pos .login__inner.login__unlogged { padding: 15px; } } .pui--pos .login__inner.login__logged { box-sizing: content-box; } @media only screen and (min-width: 768px) { .pui--pos .login__inner.login__logged { box-sizing: border-box; } } .pui--pos .login__inner.login__logged { margin: 0 -15px; } @media only screen and (min-width: 768px) { .pui--pos .login__inner.login__logged { margin: 0; } } .pui--pos .login__inner.login__logged { padding: 0 15px; } @media only screen and (min-width: 768px) { .pui--pos .login__inner.login__logged { padding: 15px; } } .pui--pos .login__inner.login__logged { cursor: pointer; } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos .login__inner-desktop { display: none !important; } } .pui--pos .login__inner-mobile { display: none !important; } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos .login__inner-mobile { display: block !important; } } .pui--pos .login__wrap { display: flex; align-items: center; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; padding: 0; } @media only screen and (min-width: 768px) { .pui--pos .login__wrap { padding: 15px; } } .pui--pos .login__wrap { margin: 0; } @media only screen and (min-width: 768px) { .pui--pos .login__wrap { margin: -15px; } } .pui--pos .login__wrap { box-sizing: content-box; height: 100%; } .pui--pos .login__left { display: flex; align-items: center; justify-content: center; flex-direction: column; flex-wrap: nowrap; padding: 0 15px; } @media only screen and (min-width: 768px) { .pui--pos .login__left { padding: 15px 0 15px 15px; } } .pui--pos .login__left { margin: 0 -15px; } @media only screen and (min-width: 768px) { .pui--pos .login__left { margin: -15px 0 -15px -15px; } } .pui--pos .login__left { width: 30%; height: 100%; box-sizing: content-box; } .pui--pos .login__left.darken { background-color: rgba(0, 0, 0, 0.1); transition: opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .login__left.darken:hover { opacity: 0.6; } .pui--pos .login__icon-large { font-size: 50px; } .pui--pos .login__right { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; flex-wrap: nowrap; width: 70%; height: 100%; } .pui--pos .login__right .input__label { display: block; font-size: 18px; font-weight: 500; padding: 0 0 2px 0; } .pui--pos .login__inner-text { font-size: 27px; display: block; font-weight: 600; border-radius: 100%; text-align: center; border: 2px solid #FFFFFF; line-height: 80px; height: 80px; width: 80px; } .pui--pos .login__unlogged { transform: rotateX(90deg); transition: transform 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); transform-origin: 0% 50%; } .pui--pos .login__unlogged.active { transform: rotateZ(0deg); } .pui--pos .login__logged { transform: translateY(4px); transition: transform 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); background-color: #00A300; } @media only screen and (min-width: 768px) { .pui--pos .login__logged.active { height: calc(100% - 1px); } } .pui--pos .login__logged.active { transform: translateY(-100%); } .pui--pos .login__button { display: flex; align-items: center; justify-content: center; flex-direction: column; flex-wrap: nowrap; text-align: center; } @media only screen and (min-width: 768px) { .pui--pos .login__button { text-align: left; } } .pui--pos .login__button { width: 40%; position: absolute; top: 0; left: 0; height: 100%; background-color: rgba(0, 0, 0, 0.1); z-index: 20; } .pui--pos .login__button-icon { display: block; font-size: 27px; } .pui--pos .login__cancel-text { display: block; text-align: center; font-size: 21px; } .pui--pos .login__continue-text { display: flex; align-items: center; justify-content: center; flex-direction: column; flex-wrap: nowrap; height: 100%; width: 100%; box-sizing: border-box; padding: 0 0 0 15px; } .pui--pos .login__user-text { font-size: 21px; width: 100%; padding-left: 15px; box-sizing: border-box; text-align: left; } .pui--pos .login__user-name { font-size: 21px; width: 100%; padding-left: 15px; box-sizing: border-box; text-align: left; } .pui--pos .login__user-name .fa.login__icon { display: inline-block; } @media only screen and (min-width: 480px) { .pui--pos .login__user-name .fa.login__icon { display: none; } } @media only screen and (min-width: 992px) { .pui--pos .login__user-name .fa.login__icon { display: inline-block; } } .pui--pos .login__user-name .fa.login__icon { margin-top: 6px; padding: 0 15px 0 0; transform: rotateZ(180deg); } /*=========================================== | Name: | Dashboard summary | | Description: | Summary component on the dashboard | | Rules: | None | | Location: | ~./components/dashboard-summary | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | COMPONENT |============================================*/ .pui--pos .summary__container { margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px; display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; height: 25%; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .summary__container { height: 50%; } } @media only screen and (min-width: 768px) { .pui--pos .summary__container { height: 32%; } } .pui--pos .summary__container { background-color: rgb(1.4043186895%, 23.4053114917%, 35.5760734674%); border-top: 2px solid #FFFFFF; width: 100vw; color: #FFFFFF; } .pui--pos .summary__container-item { width: 100%; flex-grow: 1; text-align: center; } .pui--pos .summary__item-key { font-size: 18px; } @media only screen and (min-width: 768px) { .pui--pos .summary__item-key { font-size: 27px; } } @media only screen and (min-width: 480px) { .pui--pos .summary__item-key { margin: 4px; } } .pui--pos .summary__item-key { display: block; } .pui--pos .summary__item-amount { font-size: 21px; } @media only screen and (min-width: 480px) { .pui--pos .summary__item-amount { font-size: 27px; } } .pui--pos .summary__item-amount { font-weight: 500; display: block; } /*=========================================== | Name: | Cash statement | | Description: | Cash statement component | | Rules: | None | | Location: | ~./components/cash-drawer | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | COMPONENT |============================================*/ .pui--pos .cash-drawer { width: 100%; background-color: #FFFFFF; margin: 8px 0 0 0; } .pui--pos .cash-drawer:first-child { margin: 0; } /*=========================================== | CASH STATEMENT HEADER |============================================*/ .pui--pos .cash-drawer__header { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; width: 100%; } /*=========================================== | CASH STATEMENT CONTENT |============================================*/ .pui--pos .cash-drawer__content { width: 100%; } .pui--pos .cash-drawer__item { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; margin: 8px 0 0 0; } .pui--pos .cash-drawer__item:first-child { margin: 0; } .pui--pos .cash-drawer__item-column { flex-grow: 1; flex-basis: 0; } .pui--pos .cash-drawer__label { line-height: 45px; display: block; } .pui--pos .cash-drawer__input { border: 1px solid rgba(0, 0, 0, 0.1); } /*=========================================== | CASH STATEMENT LIST |============================================*/ .pui--pos .cash-drawer__list { width: 100%; border-bottom: 1px solid #03324c; margin: 15px 0; position: relative; } .pui--pos .cash-drawer__list-icon { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); height: 20px; width: 20px; border-radius: 100%; background-color: #03324c; color: #FFFFFF; text-align: center; line-height: 20px; transition: transform 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); transform-origin: 50% 50%; } .pui--pos .cash-drawer__list-icon.reverse { transform: translateX(-50%) rotateX(180deg); } .pui--pos .cash-drawer__list-inner { border-top: 1px solid transparent; width: 100%; overflow: hidden; padding: 0; opacity: 0; max-height: 0; transition: max-height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), border-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), padding 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .cash-drawer__list-inner.active { border-color: #03324c; max-height: 1000px; padding: 15px 0; opacity: 1; } .pui--pos .cash-drawer__list-row { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; } .pui--pos .cash-drawer__list-item { width: 25%; flex-basis: 25%; box-sizing: border-box; padding: 0 15px 0 0; } .pui--pos .cash-drawer__list-item:first-child { width: 50%; flex-basis: 50%; text-align: right; } .pui--pos .cash-drawer__list-item:last-child { padding: 0; } .pui--pos .cash-drawer__list-input { border: 1px solid rgba(0, 0, 0, 0.1); } .pui--pos datepicker a, .pui--pos [datepicker] a, .pui--pos .datepicker a { color: inherit; text-decoration: none; } .pui--pos datepicker a:hover, .pui--pos [datepicker] a:hover, .pui--pos .datepicker a:hover { text-decoration: none; } .pui--pos datepicker select, .pui--pos datepicker select:focus, .pui--pos datepicker select:hover, .pui--pos .datepicker select, .pui--pos .datepicker select:focus, .pui--pos .datepicker select:hover, .pui--pos [datepicker] select, .pui--pos [datepicker] select:focus, .pui--pos [datepicker] select:hover { width: 100%; overflow: hidden; background: none; color: #fff; background-color: #03324c; border-radius: 2px; border: 0; margin-top: 5px; } .pui--pos datepicker, .pui--pos .datepicker, .pui--pos [datepicker], .pui--pos ._720kb-datepicker-calendar-header, .pui--pos ._720kb-datepicker-calendar-body, .pui--pos ._720kb-datepicker-calendar-days-header, .pui--pos ._720kb-datepicker-calendar-years-pagination-pages { font-family: Helvetica Neue, Arial, sans-serif; font-size: 13.5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 100%; margin: 0 auto; float: left; clear: right; position: relative; } .pui--pos ._720kb-datepicker-calendar { background: white; color: #333; position: absolute; z-index: 999; min-width: 220px; margin: 0 auto; width: 101%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); visibility: hidden; overflow: hidden; margin-left: -0.5%; } .pui--pos ._720kb-datepicker-calendar._720kb-datepicker-open, .pui--pos ._720kb-datepicker-calendar._720kb-datepicker-forced-to-open { visibility: visible; } .pui--pos ._720kb-datepicker-calendar-header { text-align: center; font-size: 15px; line-height: 15px; padding-top: 7px; } .pui--pos ._720kb-datepicker-calendar-header:nth-child(odd) { background: #03324c; } .pui--pos ._720kb-datepicker-calendar-header:nth-child(even) { background: #7bc6fc; } .pui--pos ._720kb-datepicker-calendar-header-left, .pui--pos ._720kb-datepicker-calendar-header-middle, .pui--pos ._720kb-datepicker-calendar-header-right { width: 15%; float: left; } .pui--pos ._720kb-datepicker-calendar-header-middle { width: 70%; } .pui--pos ._720kb-datepicker-calendar-header-closed-pagination::after { content: " ▾"; } .pui--pos ._720kb-datepicker-calendar-header-opened-pagination::after { content: " ▾"; margin-left: 4px; position: relative; bottom: -3px; display: inline-block; transform: rotate(180deg); } .pui--pos ._720kb-datepicker-calendar-body { width: 96%; margin: 2%; text-align: center; } .pui--pos ._720kb-datepicker-calendar-day { cursor: pointer; font-size: 12.5px; width: 12.2%; margin: 5px 1%; padding: 1.5% 0; float: left; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .pui--pos ._720kb-datepicker-calendar-day:hover, .pui--pos ._720kb-datepicker-calendar-day._720kb-datepicker-active { background: rgba(0, 0, 0, 0.03); } .pui--pos ._720kb-datepicker-calendar-header a, .pui--pos ._720kb-datepicker-calendar-header a:hover { text-decoration: none; padding: 3% 9% 4% 9%; font-size: 13.5px; color: rgba(255, 255, 255, 0.55); } .pui--pos ._720kb-datepicker-calendar-header a:hover { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.45); } .pui--pos ._720kb-datepicker-calendar-month { color: #fff; } .pui--pos ._720kb-datepicker-calendar-month span { font-size: 13px; color: rgba(255, 255, 255, 0.4); } .pui--pos ._720kb-datepicker-calendar-month a span i { font-style: normal; font-size: 15px; } .pui--pos ._720kb-datepicker-calendar-month a, .pui--pos ._720kb-datepicker-calendar-month a:hover { padding: 3px; margin-left: 1%; } .pui--pos ._720kb-datepicker-calendar-years-pagination { padding: 2% 0 0 0; float: left; clear: right; width: 100%; } .pui--pos ._720kb-datepicker-calendar-years-pagination a, .pui--pos ._720kb-datepicker-calendar-years-pagination a:hover { font-size: 12px; padding: 0 7px; font-weight: normal; margin: 3px 1% 0 1%; line-height: 20px; display: inline-block; } .pui--pos ._720kb-datepicker-calendar-years-pagination a._720kb-datepicker-active { color: rgba(255, 255, 255, 0.9); font-weight: 500; background: rgba(255, 255, 255, 0.45); } .pui--pos ._720kb-datepicker-calendar-years-pagination-pages a, .pui--pos ._720kb-datepicker-calendar-years-pagination-pages a:hover { padding: 5px 10px; } .pui--pos ._720kb-datepicker-calendar-days-header { max-width: 100%; margin: 0 auto; padding: 0 2% 0 2%; background: rgba(19, 142, 250, 0.08); border-bottom: 1px solid rgba(0, 0, 0, 0.02); } .pui--pos ._720kb-datepicker-calendar-days-header div { width: 14.18%; font-weight: 500; font-size: 11.5px; padding: 10px 0; float: left; text-align: center; color: rgba(0, 0, 0, 0.7); } .pui--pos ._720kb-datepicker-calendar-days ._720kb-datepicker-default-button { font-size: 18.5px; position: relative; bottom: -0.5px; } .pui--pos ._720kb-datepicker-default-button { padding: 0 4.5px; } .pui--pos ._720kb-datepicker-calendar-header-middle._720kb-datepicker-mobile-item { width: 95%; float: none; margin: 0 auto; } .pui--pos ._720kb-datepicker-item-hidden { visibility: hidden; } .pui--pos ._720kb-datepicker-calendar-day._720kb-datepicker-disabled, .pui--pos ._720kb-datepicker-calendar-day._720kb-datepicker-disabled:hover, .pui--pos ._720kb-datepicker-calendar-years-pagination a._720kb-datepicker-disabled, .pui--pos ._720kb-datepicker-calendar-years-pagination a._720kb-datepicker-disabled:hover, .pui--pos ._720kb-datepicker-calendar-years-pagination a._720kb-datepicker-active._720kb-datepicker-disabled, .pui--pos ._720kb-datepicker-calendar-years-pagination a._720kb-datepicker-active._720kb-datepicker-disabled:hover { color: rgba(0, 0, 0, 0.2); background: rgba(25, 2, 0, 0.02); cursor: default; } .pui--pos datepicker input { font-family: Lato, latolight, Helvetica Neue, Helvetica, Arial, sans-serif; } /** * CONFIG */ /** * ELEMENTS */ /** * LAYOUT */ .pui--pos .receipt-item { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; flex-wrap: nowrap; font-size: 14px; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item { font-size: 18px; } } .pui--pos .receipt-item { background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-sizing: border-box; cursor: default; margin: 0 0 15px 0; padding: 15px; position: relative; } .pui--pos .receipt-item__row { display: flex; flex-wrap: wrap; width: 100%; position: relative; margin: 0 0 8px 0; transition: margin 0.25s cubic-bezier(0.55, 0, 0.1, 1); } .pui--pos .receipt-item__row:last-child { margin: 0; } .pui--pos .receipt-item__row { /* * * MODIFIERS */ } .pui--pos .receipt-item__row--has-background, .pui--pos .receipt-item__row--has-background:last-child { margin: 0 -15px -15px; padding: 8px 15px; box-sizing: content-box; } .pui--pos .receipt-item__row--base { background-color: #2f8bc8; color: #FFFFFF; } .pui--pos .receipt-item__row--danger { background-color: #EE1111; color: #FFFFFF; } .pui--pos .receipt-item__row--editable-only, .pui--pos .receipt-item__row--editable-only:last-child { max-height: 0; opacity: 0; padding: 0 15px; transition: max-height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), padding 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .receipt-item--editable .receipt-item__row--editable-only, .pui--pos .receipt-item--editable .receipt-item__row--editable-only:last-child { max-height: 70px; opacity: 1; padding: 8px 15px; } .pui--pos .receipt-item__row.parked-receipt__content-item { transition: padding 0.3s, opacity 0.3s; margin: 0; border: none; box-sizing: border-box; opacity: 0; padding: 15px; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__row.parked-receipt__content-item { padding: 0; } } .pui--pos .receipt-item--editable .receipt-item__row.parked-receipt__content-item { opacity: 1; } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos .receipt-item--editable .receipt-item__row.parked-receipt__content-item { padding: 15px; } } .pui--pos .receipt-item__row.receipt-item__row--head { margin: 0; } .pui--pos .receipt-item__row.receipt-item__row--head .receipt-item__column-content { margin: 0; } .pui--pos .receipt-item__column-split { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; flex-wrap: nowrap; width: 45%; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__column-split { width: 49%; } } .pui--pos .receipt-item__column-split:last-child { width: 55%; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__column-split:last-child { width: 40%; } } .pui--pos .receipt-item__column-split:last-child { min-width: 0; margin: 0; } .pui--pos .receipt-item__column { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; flex-wrap: nowrap; width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__column { width: 49%; } } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__column { min-width: 49%; } } .pui--pos .receipt-item__column { display: flex; margin: 0 5px 0 0; position: relative; transition: width 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), margin 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .receipt-item--editable .receipt-item__column { /* @include attr('width', $mobile: 0%, $desktop-small: 49%); @include attr('opacity', $mobile: 0, $desktop-small: 1); margin: 0; width: 0%; opacity: 0; */ } .pui--pos .receipt-item__column:first-child { background-color: #f3f3f3; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__column:first-child { background-color: transparent; } } .pui--pos .receipt-item__column:first-child { margin: -15px -15px 8px; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__column:first-child { margin: 0; } } .pui--pos .receipt-item__column:first-child { padding: 15px; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__column:first-child { padding: 0; } } .pui--pos .receipt-item__column:first-child { box-sizing: content-box; } .pui--pos .receipt-item__column:last-child { width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__column:last-child { width: 40%; } } .pui--pos .receipt-item__column:last-child { min-width: 0; margin: 0; } .pui--pos .receipt-item--editable .receipt-item__column:last-child { width: 10%; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item--editable .receipt-item__column:last-child { width: 40%; } } .pui--pos .receipt-item--editable .receipt-item__column:last-child { width: 100%; opacity: 1; } .pui--pos .receipt-item__column { /* * * MODIFIERS */ } .pui--pos .receipt-item__column--fill, .pui--pos .receipt-item--editable .receipt-item__column--fill { display: none; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__column--fill, .pui--pos .receipt-item--editable .receipt-item__column--fill { display: flex; } } .pui--pos .receipt-item__column--fill, .pui--pos .receipt-item--editable .receipt-item__column--fill { min-width: 0; width: auto; flex-grow: 1; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__column-header { display: none; } } .pui--pos .receipt-item__column-header { width: 100%; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), margin 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .receipt-item--editable .receipt-item__column-header { opacity: 1; margin: 8px 0 0 0; max-height: 40px; } .pui--pos .receipt-item--editable .receipt-item__column-header + .receipt-item__input { margin: 40px 0 8px; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item--editable .receipt-item__column-header + .receipt-item__input { margin: 0 0 8px 0; } } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__column-footer { display: none; } } .pui--pos .receipt-item__column-footer { max-height: 0; opacity: 0; transition: max-height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), margin 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .receipt-item--editable .receipt-item__column-footer { opacity: 1; margin: 8px 0 0 0; max-height: 40px; } .pui--pos .receipt-item__column-content { margin: 0; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__column-content { margin: 0 0 8px 0; } } .pui--pos .receipt-item__column-content { /* @include attr('min-width', $mobile: calc(45vw - 60px), $desktop-small: 100%); */ width: 100%; } .pui--pos .receipt-item__column-content .receipt-item__text-line { max-height: 0; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__column-content .receipt-item__text-line { max-height: none; } } .pui--pos .receipt-item__column-content .receipt-item__text-line { opacity: 0; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__column-content .receipt-item__text-line { opacity: 1; } } .pui--pos .receipt-item__column-content .receipt-item__text-line { transition: max-height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); overflow: hidden; } .pui--pos .receipt-item__column-content .receipt-item__text-line:first-child { max-height: 30px; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__column-content .receipt-item__text-line:first-child { max-height: none; } } .pui--pos .receipt-item__column-content .receipt-item__text-line:first-child { opacity: 1; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__column-content .receipt-item__text-line:first-child { opacity: 1; } } .pui--pos .receipt-item--editable .receipt-item__column-content .receipt-item__text-line { max-height: 30px; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item--editable .receipt-item__column-content .receipt-item__text-line { max-height: none; } } .pui--pos .receipt-item--editable .receipt-item__column-content .receipt-item__text-line { opacity: 1; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item--editable .receipt-item__column-content .receipt-item__text-line { opacity: 1; } } .pui--pos .receipt-item--editable .receipt-item__column-content { /* @include attr('position', $mobile: absolute, $desktop-small: static); @include attr('width', $mobile: calc(45vw - 60px), $desktop-small: 100%); */ } .pui--pos .receipt-item--deleted .receipt-item__column-content { position: static !important; } .pui--pos .receipt-item__flow-content { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; width: 100%; } .pui--pos .receipt-item__flow-content--vertical { align-items: center; } .pui--pos .receipt-item__flow-fill { flex-grow: 1; } .pui--pos .receipt-item__footer { width: 100%; } .pui--pos .receipt-item__column-header .receipt-item__text-line:nth-child(2) { max-height: 19px; } .pui--pos .receipt-item__seperate { margin: 15px 0 0 0; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__seperate { margin: 8px 0 0 0; } } .pui--pos .receipt-item__seperate { padding: 8px 0 0 0; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__seperate { padding: 8px 0 0 0; } } .pui--pos .receipt-item__seperate { justify-content: space-between; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__seperate { justify-content: flex-end; } } .pui--pos .receipt-item__seperate { width: 100%; display: flex; border-top: 1px solid #ececec; padding: 8px 0 0 0; } .pui--pos .receipt-item--editable .receipt-item__seperate { display: flex; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item--editable .receipt-item__seperate { display: none; } } .pui--pos .receipt-item--editable .receipt-item__seperate { padding: 0; margin: 0; } .pui--pos .receipt-item__seperate .receipt-item__text { margin: 0 0 8px 8px; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__seperate .receipt-item__text { margin: 0 0 0 8px; } } .pui--pos .receipt-item__seperate .receipt-item__text { display: inline-block; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__seperate .receipt-item__text { display: inline-block; } } .pui--pos .receipt-item__seperate--fixed { display: flex !important; padding: 8px 0 0 0 !important; margin: 8px 0 0 0 !important; } .pui--pos .receipt-item__text { font-size: 12px; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__text { font-size: 14px; } } .pui--pos .receipt-item__text { display: block; word-wrap: break-word; } .pui--pos .receipt-item__text-line:first-child .receipt-item__text:first-child { font-weight: 600; } .pui--pos .receipt-item__text { /* * * INHERITS */ } .pui--pos .receipt-item__column-footer .receipt-item__text-line .receipt-item__text, .pui--pos .receipt-item__column-footer .receipt-item__text-line .receipt-item__text:first-child { font-size: 12px; } .pui--pos .receipt-item__text { /* * * MODIFIERS */ } .pui--pos .receipt-item__text--greyed { color: #B4B4B4; } .pui--pos .receipt-item__text--highlight { font-weight: 500; margin: 8px 0 0 0; } .pui--pos .receipt-item__text--slide-on-edit { overflow: hidden; max-height: 19px; transition: max-height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), margin 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), padding 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .receipt-item--editable .receipt-item__text--slide-on-edit { max-height: 0; opacity: 0; } .pui--pos .receipt-item__text--heading { font-size: 16px; font-weight: 500; } .pui--pos .receipt-item__text--heading-minified { font-size: 12px !important; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__text--heading-minified { font-size: 16px !important; } } .pui--pos .receipt-item__text--slide { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .receipt-item__text--slide-active { max-height: 32px; opacity: 1; } .pui--pos .hidden + .receipt-item__input { margin-top: 0 !important; } .pui--pos .receipt-item__input { box-sizing: border-box; display: block; text-align: right; pointer-events: none; width: 100%; position: relative; transition: padding 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), margin 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), background-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); /* &:nth-child(2) { margin: 0; } */ } .pui--pos .receipt-item .receipt-item__input + .receipt-item__input { border-top: 1px solid #ececec; margin: 8px 0 0 0; padding: 8px 0 0 0; } .pui--pos .receipt-item--editable .receipt-item__input + .receipt-item__input { padding: 8px; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__input:first-child { margin: 0 !important; } } .pui--pos .receipt-item__input.no-margin { margin: 0 !important; } .pui--pos .receipt-item--editable .receipt-item__input { pointer-events: auto; background-color: #ececec; padding: 8px; margin: 8px 0 0 0; } .pui--pos .receipt-item--deleted .receipt-item__input, .pui--pos .receipt-item__input.receipt-item__input--no-edit { background-color: transparent !important; padding-right: 0 !important; padding-left: 0 !important; pointer-events: none !important; } .pui--pos .receipt-item__input.receipt-item__input--no-edit { margin-top: 0 !important; } .pui--pos .receipt-item__input i { opacity: 0; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); transition: opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .receipt-item--editable .receipt-item__input i { opacity: 1; } .pui--pos .receipt-item__input i ~ span { padding-left: 20px; } .pui--pos .receipt-item__input i + span { font-size: 16px; } .pui--pos .receipt-item__input i:first-child + span { font-size: 16px; } .pui--pos .receipt-item__input span { box-sizing: border-box; display: block; } .pui--pos .receipt-item__input span:nth-child(1) { font-size: 16px; font-weight: 500; } .pui--pos .receipt-item__input span:nth-child(2) { font-size: 12px; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__input span:nth-child(2) { font-size: 16px; } } .pui--pos .toggled { transition: background-color 0.8s; background-color: rgb(65.7254901961%, 98.1960784314%, 65.7254901961%) !important; } .pui--pos .un-toggled { transition: background-color 0.8s; background-color: rgb(98%, 62%, 62%) !important; } @keyframes pos-animate-toggled { 5% { background-color: #00a300; } 100% { background-color: rgb(65.7254901961%, 98.1960784314%, 65.7254901961%); } } .pui--pos .receipt-item__text--faded { font-size: 12px; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__text--faded { font-size: 16px; } } .pui--pos .receipt-item__text--faded { color: #B4B4B4; } .pui--pos .receipt-item__text--double-line { border-bottom: 3px double #B4B4B4; margin-left: 50%; } .pui--pos .receipt-item__button-group { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; max-height: 0; width: 100%; overflow: hidden; opacity: 0; transition: max-height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .receipt-item--editable .receipt-item__button-group { max-height: 50px; opacity: 1; } .pui--pos .receipt-item__button-group { /* * * MODIFIERS */ } .pui--pos .receipt-item__button-group--full-height { height: 100%; } .pui--pos .receipt-item__flow-content .receipt-item__button-group { width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__flow-content .receipt-item__button-group { width: auto; } } .pui--pos .receipt-item__button-group ~ .receipt-item__button-group { margin-left: 10px; } .pui--pos .receipt-item__button { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; max-width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__button { max-width: 90px; } } .pui--pos .receipt-item__button { height: 43px; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__button { height: 100%; } } .pui--pos .receipt-item__button { position: relative; background-color: #ececec; padding: 0; box-sizing: border-box; pointer-events: none; text-align: center; margin: 0 5px; width: 100%; } .pui--pos .receipt-item__button:first-child { margin-left: 0; } .pui--pos .receipt-item__button:last-child { margin-right: 0; } .pui--pos .receipt-item--editable .receipt-item__button { pointer-events: auto; padding: 8px 2px; } .pui--pos .receipt-item--deleted .receipt-item__button { background-color: transparent !important; padding: 0 !important; pointer-events: none !important; } .pui--pos .receipt-item__button.full { flex-grow: 1; max-width: none; } .pui--pos .receipt-item__button { /* * * MODIFIERS */ } .pui--pos .receipt-item__button--fit-content, .pui--pos .receipt-item--editable .receipt-item__button--fit-content { padding: 5px 8px; } .pui--pos .receipt-item__button--fit-content { display: flex; align-items: center; justify-content: center; position: relative; box-sizing: content-box; } .pui--pos .receipt-item__button--fit-content span, .pui--pos .receipt-item__button--fit-content i { position: absolute; font-size: 9px; font-weight: 500; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; } .pui--pos .receipt-item__button--fit-content span + i { font-size: 28px; z-index: 1; font-weight: 500; position: static; transform: none; } .pui--pos .receipt-item__row--base .receipt-item__button { background-color: rgba(0, 0, 0, 0.2); position: relative; } .pui--pos .receipt-item__row--danger .receipt-item__button { width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__row--danger .receipt-item__button { width: auto !important; } } .pui--pos .receipt-item__row--danger .receipt-item__button { background-color: rgba(0, 0, 0, 0.2); } .pui--pos .receipt-item__button--yellow-icon { height: 33px; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__button--yellow-icon { height: 100%; } } .pui--pos .receipt-item__button--yellow-icon i { color: #FFC40D; } .pui--pos .receipt-item__button--yellow-icon span { color: rgb(1.4043186895%, 23.4053114917%, 35.5760734674%); } .pui--pos .receipt-item__button--info { background-color: #5BC0DE; color: #FFFFFF; } .pui--pos .receipt-item__button--large { font-size: 20px; height: auto; } .pui--pos .receipt-item__button--dynamic { min-width: 50px; width: auto !important; max-width: 100% !important; } .pui--pos .receipt-item__button--disabled::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 1; } .pui--pos .receipt-item__flow-content .receipt-item__button { width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .receipt-item__flow-content .receipt-item__button { width: 50px; } } .pui--pos .receipt-item__button .fa { padding-top: 2px; padding-bottom: 2px; } .pui--pos .receipt-item__no-events { pointer-events: none !important; } .pui--pos .receipt-item__set { background-color: #5999c9; width: calc(100% + 30px); margin: -15px; } .pui--pos .receipt-item__set .receipt-item { box-shadow: none; margin-bottom: 0; } .pui--pos .receipt-item__set-space { height: 8px; display: block; width: 100%; } .pui--pos .receipt-item__set-text { padding: 8px; color: #FFFFFF; } .pui--pos .hide-mobile { display: none !important; } @media only screen and (min-width: 768px) { .pui--pos .hide-mobile { display: flex !important; } } @media only screen and (min-width: 768px) { .pui--pos .hide-desktop { display: none !important; } } .pui--pos .receipt__total { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; width: 100%; } .pui--pos .receipt__total-left { font-size: 12px; } @media only screen and (min-width: 768px) { .pui--pos .receipt__total-left { font-size: 16px; } } .pui--pos .receipt__total-right { text-align: right; } .pui--pos .receipt-footer__total-label { font-size: 16px; font-weight: 500; display: block; } .pui--pos .receipt-footer__total-sublabel { font-size: 12px; } @media only screen and (min-width: 768px) { .pui--pos .receipt-footer__total-sublabel { font-size: 16px; } } .pui--pos .receipt-footer__total-sublabel { display: block; } .pui--pos .set-item__total { display: block; } .pui--pos .content-container__button { position: relative; } .pui--pos .hidden-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0); border: none; outline: 0; -webkit-appearance: 0; z-index: 3; } .pui--pos .parked-receipt { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; flex-wrap: nowrap; font-size: 14px; } @media only screen and (min-width: 768px) { .pui--pos .parked-receipt { font-size: 18px; } } .pui--pos .parked-receipt { background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-sizing: border-box; cursor: default; margin: 0 0 15px 0; padding: 15px; position: relative; } .pui--pos .parked-receipt__header { background-color: #f3f3f3; } @media only screen and (min-width: 768px) { .pui--pos .parked-receipt__header { background-color: transparent; } } .pui--pos .parked-receipt__header { padding: 15px; margin: -15px -15px 0 -15px; width: 100%; display: flex; justify-content: space-between; } .pui--pos .parked-receipt__selected { width: 100%; transition: opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .parked-receipt__price { text-align: right; } .pui--pos .parked-receipt__price span { font-size: 16px; font-weight: 600; text-align: right; display: block; width: 100%; } .pui--pos .parked-receipt__price span.small { font-size: 12px; } .pui--pos .parked-receipt__line { display: flex; justify-content: space-between; } .pui--pos .parked-receipt__seperator { width: 100%; height: 15px; border-top: 1px solid #ececec; margin: 15px 0 0 0; } .pui--pos .parked-receipt__seperator--no-border { border: none; margin: 0; } .pui--pos .parked-receipt__buttons { display: flex; } .pui--pos .parked-receipt__buttons .button { flex-grow: 1; margin: 0 8px; } .pui--pos .parked-receipt__buttons .button:first-child { margin-left: 0; } .pui--pos .parked-receipt__buttons .button:last-child { margin-right: 0; } .pui--pos .parked-receipt__description { width: 50%; word-wrap: break-word; } .pui--pos .parked-receipt__spacing { height: 15px; display: block; width: 100%; } .pui--pos .parked-receipt__spacing--editable-only { height: 0px; transition: height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .parked-receipt--editable .parked-receipt__spacing--editable-only { height: 15px; } .pui--pos .parked-receipt__description-line { display: block; } .pui--pos .parked-receipt__description-line--grey { color: #d1d1d1; } .pui--pos .parked-receipt__content-item { border-bottom: 1px solid rgba(209, 209, 209, 0); padding-bottom: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), padding-bottom 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), margin 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), border-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); max-height: 0; margin: 0; } .pui--pos .parked-receipt--editable .parked-receipt__content-item { max-height: 250px; padding-bottom: 15px; border-color: #d1d1d1; opacity: 1; margin: 0 0 15px 0; } .pui--pos .parked-receipt__footer { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .parked-receipt--editable .parked-receipt__footer { max-height: 80px; opacity: 1; } .pui--pos .receipt-note__item-line { word-break: break-all; } .pui--pos .sidebar-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 99; display: none; } .pui--pos .sidebar-modal--open { z-index: 99; display: block; } .pui--pos .sidebar-modal__list { margin: 15px 0 0; position: relative; height: calc(100% - 30px); box-sizing: border-box; } .pui--pos .sidebar-modal__list .iscroll-content { padding-left: 0 !important; } .pui--pos .sidebar-modal__container { width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .sidebar-modal__container { width: 320px; } } .pui--pos .sidebar-modal__container { max-width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .sidebar-modal__container { max-width: 90%; } } .pui--pos .sidebar-modal__container { position: absolute; top: 0; left: 0; bottom: 0; width: 320px; max-width: 90%; background-color: #333333; padding: 15px; box-sizing: border-box; transform: translateX(-150%); transition: transform 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .sidebar-modal--open .sidebar-modal__container { transform: translateX(0%); } .pui--pos .sidebar-modal__container .iscroll-content { padding: 15px; } .pui--pos .sidebar-modal__container .input-container { margin-bottom: 2em; } .pui--pos .sidebar-modal__container .input-container label { color: white; display: block; margin-bottom: 0.2em; } .pui--pos .sidebar-modal__title { color: #FFFFFF; font-weight: 300; font-size: 28px; } .pui--pos .sidebar-modal__item { margin: 10px 0 0 0; background-color: #5999c9; color: #FFFFFF; box-sizing: border-box; padding: 8px; display: flex; justify-content: space-between; align-items: center; transition: opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); cursor: pointer; width: 100%; } .pui--pos .sidebar-modal__item:last-child { margin-bottom: 15px; } .pui--pos .sidebar-modal__item:hover { opacity: 0.8; } .pui--pos .sidebar-modal__id { width: 30px; padding: 0 8px; font-weight: 600; box-sizing: border-box; } .pui--pos .sidebar-modal__description { flex-grow: 1; padding: 0 8px; box-sizing: border-box; } .pui--pos .sidebar-modal__toggle { font-size: 21px; } .pui--pos .itemline__discount-spans { text-align: right; } .pui--pos .itemline__discount-overflow { overflow: hidden; } .pui--pos span.itemline__discount-amount { font-size: 21px; } .pui--pos .itemline__discount-label { display: block; } .pui--pos .itemline__footer { position: relative; } .pui--pos .itemline__footer-drawer { width: 100%; padding: 0; box-sizing: border-box; z-index: 3; max-height: 0; transition: max-height 0.4s cubic-bezier(0.05, 0.74, 0.27, 0.99), padding 0.4s cubic-bezier(0.05, 0.74, 0.27, 0.99); overflow: hidden; } .pui--pos .itemline__footer-drawer--open { transition: max-height 0.4s cubic-bezier(0.05, 0.74, 0.27, 0.99), padding 0.4s cubic-bezier(0.05, 0.74, 0.27, 0.99); padding: 15px 0 0; max-height: 290px; } .pui--pos .itemline__discount-button { position: relative; } .pui--pos .itemline__discount-button:after { transition: height 0.4s cubic-bezier(0.05, 0.74, 0.27, 0.99); content: ""; height: 0px; width: 100%; position: absolute; top: 60px; background-color: #ececec; } .pui--pos .itemline__discount-button.itemline__discount-button--extended:after { height: 30px; width: 100%; position: absolute; top: 60px; background-color: #ececec; } .pui--pos .itemline__id { word-wrap: break-word; } /*=========================================== | Name: | Widget | | Description: | General-purpose widget skeleton | | Rules: | None | | Location: | ~./components/widget | | Please refer to ~./documentation for comment documentation |============================================*/ .pui--pos .insurance-widget__button { margin: 0 0 15px 0; } .pui--pos .input-insurance { border: 2px solid #ffffff; margin: 0 0 15px 0; } .pui--pos .input-insurance--error { border-color: red; } .pui--pos .c-widget .c-textinput input { border-color: #F6F6F6; color: #ffffff; } .pui--pos .c-widget__title { color: #ffffff; font-weight: 300; -webkit-font-smoothing: antialiased; font-size: 21px; display: inline-block; margin: 0 0 15px 0; } .pui--pos .c-widget__content { transition: max-height 0.25s cubic-bezier(0.55, 0, 0.1, 1), opacity 0.25s cubic-bezier(0.55, 0, 0.1, 1); opacity: 0; max-height: 0; overflow: hidden; } .pui--pos .c-widget__content > * { margin: 15px 0 0 0; } .pui--pos .c-widget__content .progress-bar { width: 100%; } .pui--pos .c-widget__content.visible { max-height: 350px; opacity: 1; } .pui--pos .c-widget__info { width: 100%; display: flex; flex-direction: column; } .pui--pos .c-widget__info-row { width: 100%; display: flex; flex-direction: row; } .pui--pos .c-widget__info-item { width: 50%; display: flex; flex-direction: column; } .pui--pos .c-widget__label { display: block; font-size: 16px; font-weight: 400; } .pui--pos .c-widget__label.small { font-size: 12px; font-weight: 300; } .pui--pos .c-widget__value { display: block; font-size: 14px; } .pui--pos .c-widget__value.full { width: 100%; text-align: left; } .pui--pos .widget-offline { text-align: center; padding-top: 1em; font-size: 1.5em; } .pui--pos .widget__center-icon { width: 100%; padding: 10px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .pui--pos .widget__center-icon i { font-size: 24px; } .pui--pos .customer-item__content { margin-top: 0.1em; } .pui--pos .customer-item { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; flex-wrap: wrap; margin: 0 0 0.5em 0; width: 100%; } .pui--pos .widget-customer__label { color: #FFFFFF; font-weight: 300; -webkit-font-smoothing: antialiased; font-size: 14px; } .pui--pos .widget-customer__label.loyalty-warning { color: orange; font-weight: bold; text-align: center; } .pui--pos .widget-customer__value { color: #FFFFFF; font-size: 17px; font-weight: 600; } .pui--pos .customer-dropdown__wrapper { cursor: pointer; position: relative; width: 100%; margin: 3px 0 3px 0; } .pui--pos .customer-dropdown__wrapper.disabled { cursor: default; } .pui--pos .customer-dropdown__wrapper.disabled .customer-dropdown__selected { background-color: #eef0f2; } .pui--pos .customer-dropdown__selected { background-color: #555555; padding: 0.75em; display: flex; justify-content: space-between; font-weight: bold; } .pui--pos .customer-dropdown__selected.light { background-color: white; } .pui--pos .customer-dropdown__items { background-color: #333333; margin: 0; position: absolute; top: 100%; left: 0; right: 0; max-height: 9em; overflow-y: scroll; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transform: scaleY(0); opacity: 0; transform-origin: top center; z-index: 100; } .pui--pos .customer-dropdown__items.customer-dropdown__open { transform: scaleY(1); opacity: 1; } .pui--pos .customer-dropdown__items.light { background-color: #eef0f2; } .pui--pos .customer-dropdown__items_bottom { background-color: #333333; margin: 0; position: absolute; bottom: 100%; left: 0; right: 0; max-height: 9em; overflow-y: scroll; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transform: scaleY(0); opacity: 0; transform-origin: bottom center; z-index: 100; } .pui--pos .customer-dropdown__items_bottom.customer-dropdown__open { transform: scaleY(1); opacity: 1; } .pui--pos .customer-dropdown__items_bottom.light { background-color: #eef0f2; } .pui--pos .customer-dropdown__item { padding: 0.4em 1em; font-size: 120%; } .pui--pos .customer-dropdown__item:hover { background: #666666; } .pui--pos .customer-dropdown__item.light:hover { background: #9ec0da; } .pui--pos .customer-filters { width: 100%; } .pui--pos .customer-filters__item { margin: 0.5em 0; } /*=========================================== | Name: | Kega Widget | | Description: | The Kega webshop order widget | | Rules: | None | | Location: | ~./components/kega-widget | | Please refer to ~./documentation for comment documentation |============================================*/ .pui--pos .kega-widget { position: absolute; } @media only screen and (min-width: 768px) { .pui--pos .kega-widget { position: static; } } .pui--pos .kega-widget { top: 0; } @media only screen and (min-width: 768px) { .pui--pos .kega-widget { top: auto; } } .pui--pos .kega-widget { bottom: 5px; } @media only screen and (min-width: 768px) { .pui--pos .kega-widget { bottom: auto; } } .pui--pos .kega-widget { left: 0; } @media only screen and (min-width: 768px) { .pui--pos .kega-widget { left: auto; } } .pui--pos .kega-widget { overflow: hidden; width: 100%; transition: max-height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); -webkit-overflow-scrolling: touch; } .pui--pos .kega-widget--mobile { display: block; } @media only screen and (min-width: 992px) { .pui--pos .kega-widget--mobile { display: none; } } .pui--pos .kega-widget--desktop { display: none; } @media only screen and (min-width: 992px) { .pui--pos .kega-widget--desktop { display: block; } } /*=========================================== | CONTENT |============================================*/ .pui--pos .kega-widget__content { margin: 0 0 75px; } @media only screen and (min-width: 992px) { .pui--pos .kega-widget__content { margin: 0; } } .pui--pos .kega-widget__content { overflow-y: auto; } @media only screen and (min-width: 768px) { .pui--pos .kega-widget__content { overflow-y: visible; } } .pui--pos .kega-widget__content { height: 100%; } @media only screen and (min-width: 768px) { .pui--pos .kega-widget__content { height: auto; } } .pui--pos .kega-widget__content { width: 100%; position: relative; } .pui--pos .kega-widget--desktop .kega-widget__content { padding: 0 0 15px 0; margin: 0; } .pui--pos .kega-widget__item { background-color: #555555; padding: 15px; box-sizing: border-box; margin: 15px 0 0 0; transition: max-height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); max-height: 74px; overflow: hidden; cursor: default; } .pui--pos .kega-widget__item--active { max-height: 245px; } .pui--pos .kega-widget__item:last-child { margin-bottom: 45px; } .pui--pos .kega-widget__item-row { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; width: 100%; margin: 0 0 15px 0; } .pui--pos .kega-widget__item-column { width: 100%; -webkit-font-smoothing: antialiased; } .pui--pos .kega-widget__item-column:last-child { text-align: right; } .pui--pos .kega-widget__item-column:first-child { text-align: left; } .pui--pos .kega-widget__label { display: block; font-size: 19px; font-weight: 400; } .pui--pos .kega-widget__value { display: block; font-size: 17px; font-weight: 600; } .pui--pos .button.button--inline.button--load-weborders { position: absolute; } @media only screen and (min-width: 992px) { .pui--pos .button.button--inline.button--load-weborders { position: static; } } .pui--pos .button.button--inline.button--load-weborders { width: calc(100% - 30px); } @media only screen and (min-width: 992px) { .pui--pos .button.button--inline.button--load-weborders { width: 100%; } } .pui--pos .button.button--inline.button--load-weborders { top: 0; left: 15px; right: 15px; } .pui--pos .stock-widget__wrap { width: 100%; } .pui--pos .stock-info__item { display: flex; justify-content: space-between; font-size: 14px; user-select: none; margin-bottom: 5px; } .pui--pos .stock-widget__quantity { font-weight: 600; } .pui--pos .stock-info__negative { color: #EE1111; } .pui--pos .stock-info__positive { color: #00A300; } .pui--pos .stock-widget__button { width: 100%; } .pui--pos .mpwidget select { padding-left: 10px; } .pui--pos .mpwidget .selectdiv:after { content: "\f078"; font: normal normal normal 17px/1 FontAwesome; color: #076db9; right: 11px; top: 6px; height: 28px; padding: 15px 8px 0px 8px; border-left: 1px solid #076db9; position: absolute; pointer-events: none; } .pui--pos .mpwidget .selectdiv select { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Add some styling */ display: block; width: 100%; float: right; margin: 5px 0px; padding: 0px 24px; background-image: none; border: 1px solid #076db9; -ms-word-break: normal; word-break: normal; } .pui--pos .mpwidget .widget-item__content { background-color: #bdd0e0; } .pui--pos .mpwidget .mpstock-flexgrid { display: grid; padding: 5px; grid-gap: 5px; } .pui--pos .mpwidget .mpstock-flexgrid.columns_1 { grid-template-columns: auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_2 { grid-template-columns: auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_3 { grid-template-columns: auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_4 { grid-template-columns: auto auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_5 { grid-template-columns: auto auto auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_6 { grid-template-columns: auto auto auto auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_7 { grid-template-columns: auto auto auto auto auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_8 { grid-template-columns: auto auto auto auto auto auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_9 { grid-template-columns: auto auto auto auto auto auto auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_10 { grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_11 { grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_12 { grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_13 { grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_14 { grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_15 { grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_16 { grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_17 { grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_18 { grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_19 { grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid.columns_20 { grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto; } .pui--pos .mpwidget .mpstock-flexgrid .stock-info__item { background-color: #eef0f2; border: 1px solid rgba(0, 0, 0, 0.8); padding: 10px; font-size: 20px; text-align: center; } .pui--pos .mpwidget .mpstock-flexgrid .column_header { background-color: #076db9; color: #fff; } .pui--pos .mpwidget .mpstock-flexgrid .row_header { background-color: #2f8bc8; color: #fff; } .pui--pos .mpwidget .mpstock-table { width: 100%; } .pui--pos .mpwidget .mpstock-table .stock-table__item { background-color: #eef0f2; border: 1px solid rgba(0, 0, 0, 0.8); padding: 10px; font-size: 20px; text-align: center; } .pui--pos .mpwidget .mpstock-table .column_header { background-color: #076db9; color: #fff; } .pui--pos .mpwidget .mpstock-table .row_header { background-color: #2f8bc8; color: #fff; } .pui--pos .mpstock-scroll { overflow: scroll; } .pui--pos .item { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; flex-wrap: nowrap; font-size: 14px; } @media only screen and (min-width: 768px) { .pui--pos .item { font-size: 18px; } } .pui--pos .item { background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-sizing: border-box; cursor: default; margin: 0 0 15px 0; padding: 15px; position: relative; } .pui--pos .item__text { font-size: 12px; } @media only screen and (min-width: 768px) { .pui--pos .item__text { font-size: 14px; } } .pui--pos .item__text { display: block; word-wrap: break-word; } .pui--pos .item__text--greyed { color: #B4B4B4; } .pui--pos .item__column-content { width: 100%; } .pui--pos .item__row { display: flex; flex-wrap: wrap; width: 100%; position: relative; margin: 0 0 8px 0; transition: margin 0.25s cubic-bezier(0.55, 0, 0.1, 1); } .pui--pos .item__column { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; flex-wrap: nowrap; width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .item__column { width: 49%; } } @media only screen and (min-width: 768px) { .pui--pos .item__column { min-width: 49%; } } .pui--pos .item__column { display: flex; margin: 0 5px 0 0; position: relative; transition: width 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), margin 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .item__button-group { width: 90px; height: 35px; float: right; display: none; } .pui--pos .item--editable { background-color: #5999c9; color: #FFFFFF; } .pui--pos .item__button { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; max-width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .item__button { max-width: 90px; } } .pui--pos .item__button { height: 43px; } @media only screen and (min-width: 768px) { .pui--pos .item__button { height: 100%; } } .pui--pos .item__button { background-color: #ececec; padding: 0; box-sizing: border-box; pointer-events: none; text-align: center; margin: 0 5px; width: 100%; transition: padding 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), background-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .filter-title { width: 75%; color: #FFFFFF; } .pui--pos .filters { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: wrap; width: 100%; } .pui--pos .filters__main { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: wrap; flex-basis: 100%; margin: 0 0 15px 0; } .pui--pos .filters__main .filters__item { flex-basis: 50%; } .pui--pos .filters__item { width: 50%; flex-basis: 50%; box-sizing: border-box; padding: 2px; } .pui--pos .edit__item select { padding: 8px; } .pui--pos .edit__item label { font-weight: 500; } .pui--pos .label-info { padding-left: 5px; font-weight: 200; color: #555555; } .pui--pos .input-customer { border: 2px solid #ffffff; margin: 0 0 15px 0; } .pui--pos .input-customer--error { border-color: red; border-style: solid; } .pui--pos .input-customer--disabled { border: 2px solid #ececec; background-color: #ececec; } .pui--pos .customer-country--error { border: 1px solid red; } .pui--pos .weborder-item { font-size: 14px; } @media only screen and (min-width: 768px) { .pui--pos .weborder-item { font-size: 18px; } } .pui--pos .weborder-item { background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-sizing: border-box; cursor: default; margin: 0 0 15px 0; padding: 15px; position: relative; } .pui--pos .weborder-item .content-container, .pui--pos .weborder-item .content-container > table { width: 100%; } .pui--pos .weborder-item .content-container { transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); transform-origin: top center; max-height: 9999px; overflow: hidden; } .pui--pos .weborder-item .content-container.content-container__hidden { max-height: 0; transform: scaleY(0); } .pui--pos .weborder-item__text { font-size: 12px; } @media only screen and (min-width: 768px) { .pui--pos .weborder-item__text { font-size: 14px; } } .pui--pos .weborder-item__text { display: block; word-wrap: break-word; } .pui--pos .weborder-item__text--greyed { color: #B4B4B4; } .pui--pos .weborder-item__column-content { width: 100%; } .pui--pos .weborder-item__table { margin-top: 15px; } .pui--pos .weborder-item__table th { text-align: left; font-weight: normal; color: rgb(82.5490196078%, 82.5490196078%, 82.5490196078%); font-size: 0.8em; } .pui--pos .weborder-item__table tbody > tr { vertical-align: middle; } .pui--pos .weborder-item__table tbody > tr > td { padding: 10px 0; border-bottom: 1px solid rgb(95%, 95%, 95%); } .pui--pos .weborder-item__button-container { display: flex; } .pui--pos .weborder-item__row { display: flex; flex-wrap: wrap; width: 100%; position: relative; margin: 0 0 8px 0; transition: margin 0.25s cubic-bezier(0.55, 0, 0.1, 1); } .pui--pos .weborder-item__column { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; flex-wrap: nowrap; width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .weborder-item__column { width: 49%; } } @media only screen and (min-width: 768px) { .pui--pos .weborder-item__column { min-width: 49%; } } .pui--pos .weborder-item__column { display: flex; margin: 0 5px 0 0; position: relative; transition: width 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), margin 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .weborder-item__button-group { width: 90px; height: 35px; float: right; display: none; } .pui--pos .weborder-item--editable { background-color: #5999c9; color: #FFFFFF; } .pui--pos .weborder-item__button { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; max-width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .weborder-item__button { max-width: 90px; } } .pui--pos .weborder-item__button { height: 43px; } @media only screen and (min-width: 768px) { .pui--pos .weborder-item__button { height: 100%; } } .pui--pos .weborder-item__button { background-color: #ececec; padding: 0; box-sizing: border-box; pointer-events: none; text-align: center; margin: 0 5px; width: 100%; transition: padding 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99), background-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .weborder__filter-title { width: 75%; color: #FFFFFF; } .pui--pos .weborder-filters { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: wrap; width: 100%; } .pui--pos .weborder-filters__main { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: wrap; flex-basis: 100%; margin: 0 0 15px 0; } .pui--pos .weborder-filters__main .weborder-filters__item { flex-basis: 50%; } .pui--pos .weborder-filters__item { width: 50%; flex-basis: 50%; box-sizing: border-box; padding: 2px; } .pui--pos .weborder-edit__item select { padding: 8px; } .pui--pos .input-weborder { border: 2px solid #ffffff; margin: 0 0 15px 0; } .pui--pos .input-weborder--error { border-color: red; } .pui--pos .panel-body { max-height: 400px; overflow: scroll; } .pui--pos .customer-order-table { font-size: 12px; } @media only screen and (min-width: 768px) { .pui--pos .customer-order-table { font-size: 14px; } } .pui--pos .customer-order-table { width: 100%; } .pui--pos .customer-order-table th, .pui--pos .customer-order-table td { padding: 5px; } /* The modal is achieved through CSS */ .pui--pos .modal-container { position: fixed; display: flex; justify-content: center; align-items: center; align-content: center; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.6); } .pui--pos .modal-window { background-color: #fff; display: flex; flex-direction: column; max-width: 50%; max-height: 90%; box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.2); } .pui--pos .modal-header { padding: 1rem; font-family: sans-serif; background-color: #2f8bc8; color: #fff; } .pui--pos .modal-body { padding: 1rem; } .pui--pos .relative { padding: 10px; margin: 10px; height: 50px; } .pui--pos .btn-group-print { display: inline-block; width: 200px; padding: 10px; background-color: #2f8bc8; color: #fff; cursor: pointer; font-weight: bold; } .pui--pos .btn-group-basket { display: inline-block; width: 200px; padding: 10px; background-color: #3cc82f; color: #fff; cursor: pointer; font-weight: bold; } .pui--pos .btn-group-save { display: inline-block; width: 200px; padding: 10px; background-color: #3cc82f; color: #fff; cursor: pointer; font-weight: bold; } .pui--pos .btn-group-cancel { display: inline-block; width: 200px; padding: 10px; background-color: #c82f2f; color: #fff; cursor: pointer; font-weight: bold; } .pui--pos .btn-group-unpick { display: inline-block; width: 200px; padding: 10px; background-color: #c8672f; color: #fff; cursor: pointer; font-weight: bold; } .pui--pos input[type=number]::-webkit-inner-spin-button, .pui--pos input[type=number]::-webkit-outer-spin-button { opacity: 1; } .pui--pos .edit-form#solid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em; } .pui--pos .edit-form#solid :first-child { grid-column: 1/span 2; } .pui--pos .content-container__footer datepicker select { background-color: inherit; } .pui--pos .content-container__footer datepicker select option { background-color: #7bc6fc; } .pui--pos ._720kb-datepicker-calendar-top { top: -260px; } .pui--pos .input--has-icon .input__icon { z-index: 1; top: 38%; } .pui--pos .input-filter { width: 100%; display: grid; grid-template-areas: "start" "end" "allStores" "search"; align-items: center; } @media screen and (min-width: 1400px) { .pui--pos .input-filter { grid-template-areas: "start end allStores" "search search search"; } } .pui--pos .input-filter { grid-row-gap: 10px; } .pui--pos .input-filter .cell { display: grid; align-items: center; grid-template-columns: 1fr 2fr; } .pui--pos .input-filter .cell:nth-child(1) { grid-area: start; } .pui--pos .input-filter .cell:nth-child(2) { grid-area: end; } .pui--pos .input-filter .cell:nth-child(3) { grid-area: allStores; grid-template-columns: 3fr 1fr; } .pui--pos .input-filter .cell:nth-child(4) { grid-area: search; } .pui--pos .input-filter .cell:nth-child(4) div { grid-column: 1/span 2; } .pui--pos .input-filter label { color: #333; padding-left: 15px; } .pui--pos .input-filter input { padding-top: 15px; padding-bottom: 15px; background-color: white; } .pui--pos .receipt-note { max-width: 35em; font-family: "Consolas", "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Monaco", "Courier New", "Courier", "monospace"; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } .pui--pos .receipt-note .receipt-note__items.no-top-margin { margin-top: -15px; } .pui--pos .receipt-note .receipt-note__item { align-items: flex-end; border-bottom: none; } .pui--pos .receipt-note .receipt-note__item:first-child { border: none; } .pui--pos .receipt-note .receipt-note__item-price { font-weight: normal; } .pui--pos .receipt-note .receipt-note__item-vat { font-weight: normal; } .pui--pos .receipt-note .receipt-note__items-total { font-weight: bold; font-size: 110%; } .pui--pos .receipt-note .receipt-note__items-total:after, .pui--pos .receipt-note .receipt-note__items-total:before { background-color: transparent; } .pui--pos .receipt-note .receipt-note__footer-info { text-align: center; } .pui--pos .receipt-note .receipt-note__clerk { margin-left: auto; margin-right: auto; font-size: 14px; } .pui--pos .receipt-note > .cashStatement .title, .pui--pos .receipt-note > .cashStatement .periods, .pui--pos .receipt-note > .cashStatement .vat { margin: 10px 0; } .pui--pos .receipt-note > .cashStatement .title { text-align: center; font-size: 1.5em; } .pui--pos .receipt-note > .cashStatement .periods > .date { display: flex; flex-wrap: nowrap; justify-content: center; } .pui--pos .receipt-note > .cashStatement .periods > .date div { flex-grow: 1; } .pui--pos .receipt-note > .cashStatement .periods > .date div:first-child { text-align: right; } .pui--pos .receipt-note > .cashStatement .sep { border-bottom: 1px dashed black; padding: 0; margin: 10px 0; } .pui--pos .receipt-note > .cashStatement .region { margin-bottom: 30px; } .pui--pos .receipt-note > .cashStatement .group { margin-bottom: 5px; position: relative; } .pui--pos .receipt-note > .cashStatement .group .plus:before { content: "+"; position: absolute; left: 0; } .pui--pos .receipt-note > .cashStatement .group .equals:before { content: "="; position: absolute; left: 0; } .pui--pos .receipt-note > .cashStatement .group .minus:before { content: "-"; position: absolute; left: 0; } .pui--pos .receipt-note > .cashStatement .group .lvl1 { margin-left: 10px; } .pui--pos .receipt-note > .cashStatement .group .lvl2 { margin-left: 20px; } .pui--pos .receipt-note > .cashStatement .group .line { display: grid; grid-template-columns: 1fr 1fr; } .pui--pos .receipt-note > .cashStatement .group .line .amount { text-align: right; } .pui--pos .picklist-form label.required:after { content: "*"; } .pui--pos .picklist-form .checkbox__field { padding: 20px 20px 0px 0px; } .pui--pos .picklist-form .checkbox__label { display: inline-block; vertical-align: middle; font-weight: 700; } .pui--pos .picklist-form .checkbox__input { vertical-align: middle; margin: 0px 10px 0px 0px; } .pui--pos .picklist-form .picklist-large-row-margin { margin-bottom: 20px; } .pui--pos .picklist-form .picklist-small-row-margin { margin-bottom: 5px; } .pui--pos .picklist-form .picklist-input { background-color: white; } .pui--pos .picklist-form .picklist-bold-label { font-weight: bold; } .pui--pos .picklist-form .picklist-dropdown__wrapper { cursor: pointer; position: relative; width: 100%; margin: 3px 0 3px 0; } .pui--pos .picklist-form .picklist-dropdown__wrapper.disabled { cursor: default; } .pui--pos .picklist-form .picklist-dropdown__wrapper.disabled .picklist-dropdown__selected { background-color: #eef0f2; } .pui--pos .picklist-form .picklist-dropdown__selected { background-color: #555555; padding: 0.75em; display: flex; justify-content: space-between; } .pui--pos .picklist-form .picklist-dropdown__selected.light { background-color: white; } .pui--pos .picklist-form .picklist-dropdown__items { background-color: #333333; margin: 0; position: absolute; top: 100%; left: 0; right: 0; max-height: 9em; overflow-y: scroll; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transform: scaleY(0); opacity: 0; transform-origin: top center; z-index: 100; } .pui--pos .picklist-form .picklist-dropdown__items.picklist-dropdown__open { transform: scaleY(1); opacity: 1; } .pui--pos .picklist-form .picklist-dropdown__items.light { background-color: #eef0f2; } .pui--pos .picklist-form .picklist-dropdown__item { padding: 0.4em 1em; font-size: 100%; } .pui--pos .picklist-form .picklist-dropdown__item:hover { background: #666666; } .pui--pos .picklist-form .picklist-dropdown__item.light:hover { background: #9ec0da; } .pui--pos #quaggaCamera { overflow-y: hidden; } .pui--pos #quaggaCamera video { border: 10px solid gray; max-width: 90%; height: 300px; display: block; } .pui--pos #quaggaCamera canvas { display: none; } /*=========================================== | Name: | Weborder Widget | | Description: | The weborder order widget | | Rules: | None | | Location: | ~./components/weborder-widget | | Please refer to ~./documentation for comment documentation |============================================*/ .pui--pos .weborder-widget { position: absolute; } @media only screen and (min-width: 768px) { .pui--pos .weborder-widget { position: static; } } .pui--pos .weborder-widget { top: 0; } @media only screen and (min-width: 768px) { .pui--pos .weborder-widget { top: auto; } } .pui--pos .weborder-widget { bottom: 5px; } @media only screen and (min-width: 768px) { .pui--pos .weborder-widget { bottom: auto; } } .pui--pos .weborder-widget { left: 0; } @media only screen and (min-width: 768px) { .pui--pos .weborder-widget { left: auto; } } .pui--pos .weborder-widget { overflow: hidden; width: 100%; transition: max-height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); -webkit-overflow-scrolling: touch; } .pui--pos .weborder-widget--mobile { display: block; } @media only screen and (min-width: 992px) { .pui--pos .weborder-widget--mobile { display: none; } } .pui--pos .weborder-widget--desktop { display: none; } @media only screen and (min-width: 992px) { .pui--pos .weborder-widget--desktop { display: block; } } .pui--pos .weborder-button-active { background-color: grey !important; } .pui--pos .weborderdetails-show-hide { float: right; overflow: hidden; } /*=========================================== | CONTENT |============================================*/ .pui--pos .weborder-widget__content { margin: 0 0 75px; } @media only screen and (min-width: 992px) { .pui--pos .weborder-widget__content { margin: 0; } } .pui--pos .weborder-widget__content { overflow-y: auto; } @media only screen and (min-width: 768px) { .pui--pos .weborder-widget__content { overflow-y: visible; } } .pui--pos .weborder-widget__content { height: 100%; } @media only screen and (min-width: 768px) { .pui--pos .weborder-widget__content { height: auto; } } .pui--pos .weborder-widget__content { width: 100%; position: relative; } .pui--pos .weborder-widget--desktop .weborder-widget__content { padding: 0 0 15px 0; margin: 0; } .pui--pos .weborder-widget__item { background-color: rgb(1.4043186895%, 23.4053114917%, 35.5760734674%); padding: 15px; box-sizing: border-box; margin: 15px 0 0 0; transition: max-height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); max-height: 74px; overflow: hidden; cursor: default; } .pui--pos .weborder-widget__item--active { max-height: 420px; } .pui--pos .weborder-widget__item:last-child { margin-bottom: 45px; } .pui--pos .weborder-widget__item-row { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; width: 100%; margin: 0 0 15px 0; } .pui--pos .weborder-widget__item-column { width: 100%; -webkit-font-smoothing: antialiased; } .pui--pos .weborder-widget__item-column:last-child { text-align: right; } .pui--pos .weborder-widget__item-column:first-child { text-align: left; } .pui--pos .weborder-widget__label { display: block; font-size: 19px; font-weight: 400; } .pui--pos .weborder-widget__value { display: block; font-size: 17px; font-weight: 600; } .pui--pos .button.button--inline.button--load-weborders { position: absolute; } @media only screen and (min-width: 992px) { .pui--pos .button.button--inline.button--load-weborders { position: static; } } .pui--pos .button.button--inline.button--load-weborders { width: calc(100% - 30px); } @media only screen and (min-width: 992px) { .pui--pos .button.button--inline.button--load-weborders { width: 100%; } } .pui--pos .button.button--inline.button--load-weborders { top: 0; left: 15px; right: 15px; } .pui--pos .article-widget__wrap { width: 100%; } .pui--pos .article-widget__wrap .stock-dropdown__wrapper { cursor: pointer; position: relative; } .pui--pos .article-widget__wrap .stock-dropdown__selected { background-color: #5999c9; padding: 1em; display: flex; justify-content: space-between; font-weight: bold; } .pui--pos .article-widget__wrap .stock-dropdown__items { background-color: #2f8bc8; margin: 0; position: absolute; top: 100%; left: 0; right: 0; max-height: 9em; overflow-y: scroll; transition: transform 0.2s ease-in-out; transform: scaleY(0); transform-origin: top center; } .pui--pos .article-widget__wrap .stock-dropdown__items.stock-dropdown__open { transform: scaleY(1); } .pui--pos .article-widget__wrap .stock-dropdown__item { padding: 0.4em 2em; font-size: 120%; } .pui--pos .article-widget__wrap .stock-dropdown__item:hover { background: rgb(48.8767166786%, 72.3934270064%, 87.9860284195%); } .pui--pos .article-widget__wrap .stock-quantities { margin-top: 1em; padding: 0 0.5em; } .pui--pos .ng-toast .alert { padding: 25px; margin-bottom: 10px; border-top: 5px solid transparent; border-radius: 0px; background-color: #333; width: 100%; box-sizing: border-box; } .pui--pos .ng-toast .alert > p, .pui--pos .ng-toast .alert > ul { margin-bottom: 0; } .pui--pos .ng-toast .alert > p + p { margin-top: 5px; } .pui--pos .ng-toast .alert-dismissable, .pui--pos .ng-toast .alert-dismissible { padding-right: 35px; } .pui--pos .ng-toast .alert-dismissable .close, .pui--pos .ng-toast .alert-dismissible .close { position: relative; top: -2px; right: -21px; color: inherit; } .pui--pos .ng-toast .alert-success { border-color: #00a300; } .pui--pos .ng-toast .alert-success hr { border-top-color: #c9e2b3; } .pui--pos .ng-toast .alert-info { border-color: #5bc0de; } .pui--pos .ng-toast .alert-info hr { border-top-color: #a6e1ec; } .pui--pos .ng-toast .alert-warning { border-color: #ffc40d; } .pui--pos .ng-toast .alert-warning hr { border-top-color: #f7e1b5; } .pui--pos .ng-toast .alert-danger { border-color: #e11; } .pui--pos .ng-toast .alert-danger hr { border-top-color: #e4b9c0; } .pui--pos .ng-toast .toasts { width: 350px; } .pui--pos .product-image { max-width: 85%; box-sizing: border-box; display: block; margin: 1.5em auto; } .pui--pos .edit-address-form label.required:after { content: "*"; } .pui--pos .edit-address-form .checkbox__field { padding: 20px 20px 0px 0px; } .pui--pos .edit-address-form .checkbox__label { display: inline-block; vertical-align: middle; font-weight: 700; } .pui--pos .edit-address-form .checkbox__input { vertical-align: middle; margin: 0px 10px 0px 0px; } .pui--pos .edit-address-form .input-address--error { color: red; } .pui--pos .edit-address-form .address-country--error { border: 1px solid red; } .pui--pos .c-modal__wrap { z-index: 25 !important; } .pui--pos .c-modal__wrap .c-modal .c-modal__input input { background-color: white; } .pui--pos .c-modal__return { width: 700px !important; height: 450px; max-width: 90%; background-color: #043c5b; box-sizing: border-box; padding: 12px; color: #fff; z-index: 25; } .pui--pos .c-modal__returntable { margin-top: 20px; text-align: middle; width: 100%; max-height: 350px !important; overflow: scroll; } .pui--pos .c-modal__returntable th { text-align: left; font-weight: bolder; color: white; font-size: 1.2em; background-color: #045079; padding: 10px; } .pui--pos .c-modal__returntable tbody > tr { vertical-align: middle; } .pui--pos .c-modal__returntable tbody > tr > td { padding: 5px; } .pui--pos .c-modal__returntable input { background-color: white; text-align: center; height: 30px !important; } .pui--pos .c-modal__returntable select { -webkit-appearance: menulist; background-color: white; height: 30px !important; } .pui--pos .c-modal__returntable select::-ms-expand { display: block; } .pui--pos .c-modal__voucheraction { width: 600px !important; height: 250px; max-width: 90%; background-color: #043c5b; box-sizing: border-box; padding: 12px; color: #fff; z-index: 25; } .pui--pos .c-modal__voucheraction_table { margin-top: 20px; text-align: middle; width: 100%; max-height: 120px !important; overflow: scroll; } .pui--pos .c-modal__voucheraction_table th { text-align: left; font-weight: bolder; color: white; font-size: 1.2em; background-color: #045079; padding: 10px; } .pui--pos .c-modal__voucheraction_table tbody > tr { vertical-align: middle; } .pui--pos .c-modal__voucheraction_table tbody > tr > td { padding: 5px; } .pui--pos .widget__trimit-icon { width: 20%; box-sizing: border-box; margin-left: 8px; display: flex; } .pui--pos .widget__trimit-icon i { font-size: 24px; } .pui--pos .trimit-item__content { margin-top: 0.1em; } .pui--pos .trimit-item { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; flex-wrap: wrap; margin: 0 0 0.5em 0; width: 100%; } .pui--pos .widget-trimit__label { color: #FFFFFF; font-weight: 300; -webkit-font-smoothing: antialiased; font-size: 14px; } .pui--pos .widget-trimit__value { color: #FFFFFF; font-size: 17px; font-weight: 600; } .pui--pos .exchangeExpiryDatepicker { position: fixed; top: 20%; left: calc(50% - 200px); z-index: 100; max-width: 400px; } .pui--pos .receipt-item__input input.exchangeExpiryDateInput { text-align: right; } @media only screen and (max-width: 1024px) { .pui--pos .exchangeExpiryDatepicker { position: absolute; top: -8em; left: calc(50% - 25em); z-index: 100; min-width: 25em; } } @media only screen and (max-width: 500px) { .pui--pos .exchangeExpiryDatepicker { position: absolute; top: -8em; left: calc(50% - 12.5em); z-index: 100; min-width: 25em; } } .pui--pos .print-page-container { max-width: 1000px; margin: 0 auto; } .pui--pos .print-page-header table { width: 100%; margin-top: 10px; } .pui--pos .print-page-header td .large-column { width: 60%; } .pui--pos .print-page-header td .small-column { width: 20%; } .pui--pos .print-container table { width: 100%; } .pui--pos .print-container table td { padding-bottom: 10px; } .pui--pos .print-container .top-container { padding: 20px; width: 100%; border: 1px solid #000000; margin-bottom: 20px; } .pui--pos .print-container .column { width: 50%; } .pui--pos .print-container .addressContainer { padding: 10px; } .pui--pos .print-container .addressContainer .header { font-weight: bold; } .pui--pos .print-container .details-section { padding-top: 14px; } .pui--pos .print-container .details-section .long-cell { width: 70%; padding-left: 10px; } .pui--pos .print-container .details-section .short-cell { width: 70%; } .pui--pos .print-container .details-section .header { font-weight: bold; } .pui--pos .print-container .header-row th { padding: 10px; text-align: left; border-top: 1px solid #000000; border-bottom: 1px solid #000000; } .pui--pos .print-container .right-text { text-align: right; } .pui--pos .print-container .totals { margin-top: 20px; } .pui--pos .print-container .totals tr { padding-bottom: 15px; } .pui--pos .print-container .totals td { border-top: 1px solid #000000; } .pui--pos .print-container .signature-container { border-top: 1px solid #000000; margin-top: 40px; padding-top: 15px; width: 35%; float: right; } .pui--pos .weborderview-overlay { transition: background-color 0.25s cubic-bezier(0.55, 0, 0.1, 1), opacity 0.25s cubic-bezier(0.55, 0, 0.1, 1); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 25; background-color: rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; pointer-events: all; opacity: 1; } .pui--pos .webordercontainer { width: 50%; height: 60%; background-color: #03324c; box-sizing: border-box; padding: 12px; color: #fff; z-index: 25 !important; } .pui--pos .weborderlimitedspace { height: 40% !important; overflow: scroll !important; } /*=========================================== | PARTIALS |============================================*/ /*=========================================== | Name: | Widget Tray | | Description: | Widget tray styles | | Rules: | None | | Location: | ~./partials/widget-tray | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | CONFIG |============================================*/ /*=========================================== | CONTAINER |============================================*/ .pui--pos .widget-tray { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; flex-wrap: nowrap; position: fixed; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray { position: absolute; } } .pui--pos .widget-tray { transform: translateY(105vh); } @media only screen and (min-width: 992px) { .pui--pos .widget-tray { transform: none; } } .pui--pos .widget-tray { top: 0; left: 0; right: 0; bottom: 0; height: 100%; background-color: #222222; font-family: "Lato", latolight, Helvetica Neue, Helvetica, Arial, sans-serif; color: #FFFFFF; transition: transform 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .widget-tray--open { transform: translateY(0); } @media only screen and (min-width: 992px) { .pui--pos .widget-tray--open { transform: none; } } /* =========================================== | HEADER |============================================ */ .pui--pos .widget-tray__header { background-color: #333333; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__header { background-color: transparent; } } .pui--pos .widget-tray__header { display: block; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__header { display: none; } } .pui--pos .widget-tray__header { padding: 15px 15px 5px; width: 100%; box-sizing: border-box; height: 85px; } .pui--pos .widget-tray__headline { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; width: 100%; } .pui--pos .widget-tray__title { color: #FFFFFF; font-weight: 300; -webkit-font-smoothing: antialiased; font-size: 27px; } .pui--pos .widget-tray__close { display: block; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__close { display: none; } } .pui--pos .widget-tray__close { font-size: 30px; line-height: 0; } .pui--pos .widget-tray__navigation { display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; width: 100%; height: 55px; } .pui--pos .widget-tray__navigation:before { content: ""; position: absolute; left: 0; height: 60px; width: 20px; z-index: 3; background: linear-gradient(to right, #333333 20%, rgba(51, 51, 51, 0) 100%); pointer-events: none; } .pui--pos .widget-tray__navigation:after { content: ""; position: absolute; right: 0; height: 60px; width: 20px; z-index: 3; background: linear-gradient(to left, #333333 20%, rgba(51, 51, 51, 0) 100%); pointer-events: none; } .pui--pos .widget-tray__navigation-previous, .pui--pos .widget-tray__navigation-next { font-size: 30px; } .pui--pos .widget-space { height: 10px; width: 100%; display: block; } .pui--pos .widget-tray__navigation-wrap { width: 100%; overflow-y: hidden; overflow-x: auto; height: 50px; margin: 0 -15px; padding: 15px 15px 20px; -webkit-overflow-scrolling: touch; position: relative; } .pui--pos .widget-tray__navigation-wrap::-webkit-scrollbar { width: 4px; height: 10px; } .pui--pos .widget-tray__navigation-wrap::-webkit-scrollbar-button { width: 0px; height: 0px; } .pui--pos .widget-tray__navigation-wrap::-webkit-scrollbar-thumb { background: #222222; border: 3px solid #03324c; border-radius: 0; } .pui--pos .widget-tray__navigation-wrap::-webkit-scrollbar-thumb:hover { background: #ffffff; } .pui--pos .widget-tray__navigation-wrap::-webkit-scrollbar-thumb:active { background: #222222; } .pui--pos .widget-tray__navigation-wrap::-webkit-scrollbar-track { background: #03324c; border: 0px none #ffffff; border-radius: 0; } .pui--pos .widget-tray__navigation-wrap::-webkit-scrollbar-track:hover { background: #ffffff; } .pui--pos .widget-tray__navigation-wrap::-webkit-scrollbar-track:active { background: #03324c; } .pui--pos .widget-tray__navigation-wrap::-webkit-scrollbar-corner { background: transparent; } .pui--pos .widget-tray__navigation-list { width: auto; white-space: nowrap; } .pui--pos .widget-tray__navigation-item { background-color: #555555; display: inline-block; position: relative; height: 50px; width: 50px; margin: 0 6px; transition: background-color 0.4s cubic-bezier(0.05, 0.74, 0.27, 0.99), color 0.4s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .widget-tray__navigation-item:first-child { margin-left: 0; } .pui--pos .widget-tray__navigation-item:last-child { margin-right: 12px; } .pui--pos .widget-tray__navigation-item--active { background-color: #FFFFFF; color: #03324c; } .pui--pos .widget-tray__navigation-icon { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; width: 100%; height: 100%; } .pui--pos .widget-tray__navigation-icon i { font-size: 30px; } .pui--pos .widget-tray__navigation-toggle { width: 100%; height: 100%; position: absolute; -webkit-appearance: none; opacity: 0; z-index: 3; } /* =========================================== | WIDGETS |============================================ */ .pui--pos .widget-tray__body-header { width: 100vw; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__body-header { width: 100%; } } .pui--pos .widget-tray__body-header { top: 85px; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__body-header { top: 15px; } } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__body-header { display: none; } } .pui--pos .widget-tray__body-header { position: absolute; left: 0; right: 0; height: 30px; background: linear-gradient(to bottom, #222222 0%, rgba(34, 34, 34, 0) 100%); z-index: 5; pointer-events: none; } .pui--pos .widget-tray__body { padding: 15px 0; position: absolute; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__body { position: relative; } } .pui--pos .widget-tray__body { top: 85px; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__body { top: 0; } } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__body { width: 100%; } } .pui--pos .widget-tray__body { box-sizing: border-box; flex-grow: 1; overflow: hidden; -webkit-overflow-scrolling: touch; bottom: 0; left: 0; right: 0; } @media only screen and (min-width: 768px) { .pui--pos .widget-tray__body--mobile { display: none; } } .pui--pos .widget-tray__body--desktop { display: none; } @media only screen and (min-width: 768px) { .pui--pos .widget-tray__body--desktop { display: block; } } .pui--pos .widget-tray__body::-webkit-scrollbar { width: 4px; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__body::-webkit-scrollbar { width: 10px; } } .pui--pos .widget-tray__body::-webkit-scrollbar { height: 10px; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__body::-webkit-scrollbar { height: 4px; } } .pui--pos .widget-tray__body::-webkit-scrollbar-button { width: 0px; height: 0px; } .pui--pos .widget-tray__body::-webkit-scrollbar-thumb { background: #222222; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__body::-webkit-scrollbar-thumb { background: rgba(209, 209, 209, 0.7); } } .pui--pos .widget-tray__body::-webkit-scrollbar-thumb { border: 3px solid #03324c; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__body::-webkit-scrollbar-thumb { border: 3px solid #03324c; } } .pui--pos .widget-tray__body::-webkit-scrollbar-thumb { border-radius: 0; } .pui--pos .widget-tray__body::-webkit-scrollbar-track { background: #03324c; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__body::-webkit-scrollbar-track { background: #03324c; } } .pui--pos .widget-tray__body::-webkit-scrollbar-track { border: 0px none #ffffff; border-radius: 0; } .pui--pos .widget-tray__body::-webkit-scrollbar-track:active { background: #03324c; } .pui--pos .widget-tray__body::-webkit-scrollbar-corner { background: transparent; } .pui--pos .widget-tray__slide { width: 100vw; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__slide { width: 100%; } } .pui--pos .widget-tray__slide { padding: 0 15px; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__slide { padding: 0 22px 0 15px; } } .pui--pos .widget-tray__slide { opacity: 0; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__slide { opacity: 1; } } .pui--pos .widget-tray__slide { transform: translateY(10%); } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__slide { transform: translateY(0%); } } .pui--pos .widget-tray__slide { position: absolute; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__slide { position: static; } } .pui--pos .widget-tray__slide { top: 15px; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__slide { top: 0; } } .pui--pos .widget-tray__slide { margin: 0; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__slide { margin: 0 0 15px; } } .pui--pos .widget-tray__slide { left: 0; bottom: 0; box-sizing: border-box; transition: none; } .pui--pos .widget-tray__slide--active { transition: transform 0.4s cubic-bezier(0.05, 0.74, 0.27, 0.99), opacity 0.4s cubic-bezier(0.05, 0.74, 0.27, 0.99); opacity: 1; transform: translateY(0%); z-index: 3; } .pui--pos .widget-tray__slide--last { margin-bottom: 0; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__slide--last { margin-bottom: 30px; } } .pui--pos .widget-tray__container > div { height: 100%; } .pui--pos .widget-tray__item--flex { display: flex; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__item--flex { display: block; } } .pui--pos .widget-tray__item--flex { height: 100%; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__item--flex { height: auto; } } .pui--pos .widget-tray__item--flex { flex-direction: column; } .pui--pos .widget-item__title-wrap { display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; width: 100%; flex-basis: 50px; height: 50px; } .pui--pos .widget-item__title { color: #eef0f2; font-weight: 300; -webkit-font-smoothing: antialiased; font-size: 21px; display: inline-block; } .pui--pos .widget-tray__title-action { display: inline-block; text-align: right; cursor: pointer; transition: opacity 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .widget-tray__title-action:hover { opacity: 0.8; } .pui--pos .widget-tray__title-action--underline { text-decoration: underline; } .pui--pos .widget-tray__title-icon { font-size: 30px; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__title-icon { font-size: 20px; } } .pui--pos .widget-item__error { color: #ff3c3c; padding: 0 0 15px 0; font-size: 14px; width: 100%; text-align: left; } .pui--pos .widget-item__content { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; flex-grow: 1; } @media only screen and (min-width: 992px) { .pui--pos .widget-item__content { flex-grow: 0; } } .pui--pos .widget-item__content { position: relative; background-color: #222222; box-sizing: border-box; padding: 0; } .pui--pos .widget-item__content--fluid { margin: 0 -15px; padding: 0; } .pui--pos .widget-item__content--transparent { background-color: transparent; } .pui--pos .widget-item__content--center-content { align-items: center; justify-content: center; } .pui--pos .widget-item__content--set-padding { padding: 15px 15px 0; } .pui--pos .widget-item__content.widget-item__content--fix-padding { padding: 0; /* @include attr('padding', $mobile: $size__offset, $desktop: 0 !important); */ } .pui--pos .widget-item__data-group { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; flex-wrap: wrap; margin: 0 15px 15px 0; } .pui--pos .widget-item__data-group--fluid { width: 100%; } .pui--pos .widget-item__label { color: #FFFFFF; font-weight: 300; -webkit-font-smoothing: antialiased; font-size: 21px; } .pui--pos .widget-item__value { color: #FFFFFF; font-weight: 700; -webkit-font-smoothing: antialiased; font-size: 18px; } /* =========================================== | FOOTER |============================================ */ .pui--pos .widget-tray__footer { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; width: 100vw; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__footer { width: 100%; } } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__footer { display: none; } } .pui--pos .widget-tray__footer { background: linear-gradient(to top, #222222 0%, rgba(34, 34, 34, 0) 100%); border-bottom: 30px solid #222222; width: 100vw; position: absolute; bottom: 0; left: 0; right: 0; height: 30px; z-index: 3; } @media only screen and (min-width: 992px) { .pui--pos .widget-tray__footer-icon { display: none; } } .pui--pos .widget-tray__footer-icon { font-size: 21px; transform: translateY(50%); } /* =========================================== | FIXES |============================================ */ .pui--pos .keyboard__backdrop { z-index: 9999; } @media only screen and (min-width: 992px) { .pui--pos .navigation-bar__caption-item--widgets { display: none; } } .pui--pos #center-content { transition: transform 0.4s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .center-content--downscale { transform: scale(0.8); } @media only screen and (min-width: 992px) { .pui--pos .center-content--downscale { transform: none; } } /*=========================================== | Name: | Tray Content | | Description: | Tray content styles | | Rules: | None | | Location: | ~./partials/tray-content | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | CONTAINER |============================================*/ .pui--pos #left-content.tray-content { z-index: 9999; } @media only screen and (min-width: 992px) { .pui--pos #left-content.tray-content { z-index: 5; } } .pui--pos #left-content.tray-content { width: 0; } @media only screen and (min-width: 768px) { .pui--pos #left-content.tray-content { width: 0; } } @media only screen and (min-width: 992px) { .pui--pos #left-content.tray-content { width: 250px; } } @media only screen and (min-width: 1200px) { .pui--pos #left-content.tray-content { width: 320px; } } .pui--pos #left-content.tray-content { display: block; } .pui--pos .aside-body__regular { justify-content: flex-start; min-height: 0; } /*=========================================== | PAGES |============================================*/ /*=========================================== | Name: | Dashboard page | | Description: | Styles specific to the dashboad (landing) page | | Rules: | None | | Location: | ~./pages/dashboard | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | DASHBOARD |============================================*/ .pui--pos .dashboard__container { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; height: 75%; } @media only screen and (max-width: 768px) and (orientation: landscape) { .pui--pos .dashboard__container { height: 50%; } } @media only screen and (min-width: 768px) { .pui--pos .dashboard__container { height: 23%; } } .pui--pos .dashboard__container { width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .dashboard__container { width: calc(100% + 30px); } } .pui--pos .dashboard__container { flex-direction: column; } @media only screen and (min-width: 768px) { .pui--pos .dashboard__container { flex-direction: row; } } .pui--pos .dashboard__container { margin: 0 -15px; padding: 0 15px; } @media only screen and (min-width: 768px) { .pui--pos .dashboard__container { padding: 0; } } .pui--pos .dashboard__bottom { display: none; } @media only screen and (min-width: 768px) { .pui--pos .dashboard__bottom { display: flex; } } @media only screen and (min-width: 768px) { .pui--pos .dashboard__bottom { justify-content: space-between; } } .pui--pos .dashboard__bottom { width: calc(100% + 30px); margin: 0 -15px; height: 45%; } .pui--pos .dashboard__chart { width: 66.6666666667vw; height: 100%; } .pui--pos .dashboard__keyboard { flex-basis: 50vw; } @media only screen and (min-width: 768px) { .pui--pos .dashboard__keyboard { flex-basis: 50vw; } } .pui--pos .dashboard__keyboard { width: 100%; height: 100%; } .pui--pos .sales-target { position: absolute; right: 20px; top: 10px; font-weight: bold; } .pui--pos .drawer-selection__button { background-color: #5999c9; } .pui--pos .modal-content__footer { display: flex; justify-content: center; /* optional: center buttons */ gap: 10px; /* space between buttons */ } .pui--pos .modal-content-container__header, .pui--pos .modal-content__body { display: flex; flex-direction: column; margin: 10px; } /*=========================================== | Name: | Receipt page | | Description: | Styles specific to the dashboad (landing) page | | Rules: | None | | Location: | ~./pages/receipt | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | RECEIPT TOTAL |============================================*/ .pui--pos .receipt__total { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; color: #FFFFFF; width: 100%; cursor: default; } .pui--pos .receipt__total--no-flex { display: block; } .pui--pos .receipt__total-row { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; width: 100%; } /*=========================================== | RECEIPT TOTAL - LEFT |============================================*/ .pui--pos .receipt__total-left { width: 50%; } .pui--pos .receipt__total-amount { text-align: left; font-size: 27px; } /*=========================================== | RECEIPT TOTAL - RIGHT |============================================*/ .pui--pos .receipt__total-right { width: 50%; } .pui--pos .receipt__total-right--align-right { text-align: right; } .pui--pos .receipt__total-sum { text-align: right; margin: 0 -8px 0 0; padding: 8px 8px 8px 0; } .pui--pos button.receipt__total-sum { background-color: rgba(0, 0, 0, 0.1); width: calc(100% + 8px); } .pui--pos button.receipt__total-sum[style="display: inline-block;"] { display: block !important; } .pui--pos .receipt__total-label { font-size: 21px; display: block; } .pui--pos .receipt__total-label--small-text { font-size: 18px; } .pui--pos .receipt__total-sub { font-size: 14px; display: block; } /*=========================================== | RECEIPT DISCOUNT BUTTONS |============================================*/ .pui--pos .receipt__discount-drawer { margin: 0; } .pui--pos .receipt__discount-footer { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; } .pui--pos .receipt__discount-button { width: 25%; position: relative; height: 55px; margin: 0 2px; } .pui--pos .receipt__discount-button:first-child { margin-left: 0; } .pui--pos .receipt__discount-button:last-child { margin-right: 0; } .pui--pos .receipt__discount-button i { color: #FFC40D; font-size: 44px; } .pui--pos .receipt__discount-button span { color: #03324c; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .pui--pos .receipt-item__input-no-button { padding: 10px; } .pui--pos .receipt-item__input-button { transition: background-color 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); padding: 10px; background-color: rgba(0, 0, 0, 0.1); pointer-events: all; } .pui--pos .receipt-item__input-button:hover { background-color: rgba(0, 0, 0, 0.05); } /*=========================================== | Name: | Payment page | | Description: | Styles specific to the dashboad (landing) page | | Rules: | None | | Location: | ~./pages/payment | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | PAYMENT |============================================*/ .pui--pos .button.payment-widget__button { font-size: 18px; } @media only screen and (min-width: 768px) { .pui--pos .button.payment-widget__button { font-size: 21px; } } .pui--pos .button.payment-widget__button { text-align: left; height: 70px; box-sizing: border-box; justify-content: flex-start; font-weight: 300; } .pui--pos .button.payment-widget__button span { width: 100%; } .pui--pos .journals-wrapper { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: wrap; width: 100%; } @media only screen and (min-width: 768px) { .pui--pos .journals-wrapper { flex-wrap: nowrap; } } .pui--pos .journals-wrapper .break { min-width: 15px; } .pui--pos .journals-wrapper .datepicker { width: 100%; } /*=========================================== | Name: | Articles page | | Description: | Styles specific to the dashboad (landing) page | | Rules: | None | | Location: | ~./pages/articles | | Please refer to ~./documentation for comment documentation |============================================*/ /*=========================================== | ARTICLE FILTERS |============================================*/ .pui--pos .articles__filter-title { width: 75%; color: #FFFFFF; } .pui--pos .article-filters { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: wrap; width: 100%; } .pui--pos .article-filters__main { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: wrap; flex-basis: 100%; margin: 0 0 15px 0; } .pui--pos .article-filters__main .article-filters__item { flex-basis: 50%; } .pui--pos .article-filters__item { width: 50%; flex-basis: 50%; box-sizing: border-box; padding: 2px; } .pui--pos .smart-search { width: 100%; } .pui--pos .smart-search .smart-search__main { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: wrap; flex-basis: 100%; margin: 0 0 15px 0; } .pui--pos .smart-search .smart-search__item { width: 100%; flex-basis: 100%; box-sizing: border-box; padding: 2px; } .pui--pos .article-item__table { margin-top: 15px; } .pui--pos .article-item__table th { text-align: left; font-weight: normal; color: rgb(82.5490196078%, 82.5490196078%, 82.5490196078%); font-size: 0.8em; } .pui--pos .article-item__table tbody > tr { vertical-align: middle; } .pui--pos .article-item__table tbody > tr > td { padding: 10px; border-bottom: 1px solid rgb(95%, 95%, 95%); } .pui--pos .stocklookup-table th { padding: 10px; } .pui--pos .stocklookup-table tbody > tr { vertical-align: middle; } .pui--pos .stocklookup-table tbody > tr > td { padding: 10px; border-bottom: 1px solid rgb(95%, 95%, 95%); } .pui--pos .item-shortcut-grid-container { display: grid; grid-template-rows: 1em 200px 1em 1fr; width: 100%; height: 100%; } .pui--pos .item-shortcut-relative { position: relative; clear: both; overflow: hidden; height: 100%; margin: 10px; padding-bottom: 150px; } .pui--pos .item-shortcut-relative:not(:first-child) { margin-top: 1em; } .pui--pos .item-shortcut-relative h3 { font-weight: normal; } .pui--pos .item-iscroll-wrapper { height: 100%; width: 100%; display: inline-block; } .pui--pos .item-shortcut-wrapper { box-sizing: border-box; width: max-content; position: absolute; padding: 10px; } .pui--pos .item-shortcut-wrapper.flex { display: flex; flex-wrap: wrap; } .pui--pos .vertical { width: 100%; height: max-content; } .pui--pos .folder-up { background-image: url("../img/icons8-folder-up.png"); } .pui--pos .item-shortcut { background-repeat: no-repeat; background-position: center; background-size: contain; background-color: white; width: 150px; height: 150px; border: 1px solid #bdd0e0; display: inline-block; margin: 5px; text-align: center; transition: transform 0.3s, box-shadow 0.5s; cursor: pointer; } .pui--pos .item-shortcut a { background-color: rgba(255, 255, 255, 0.7); width: 100%; padding: 5%; display: block; } .pui--pos .item-shortcut:hover { transform: scale(1.05); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); } .pui--pos .input-filter.saft-input-filter { width: 90%; display: grid; grid-template-areas: "start" "end" "allStores" "search"; align-items: center; } @media screen and (min-width: 1400px) { .pui--pos .input-filter.saft-input-filter { grid-template-areas: "start" "end" "allStores" "search"; } } .pui--pos .select-dimension-combo { height: 100%; text-align: center; } .pui--pos .select-dimension-combo .select-dimension-combo-grid { display: grid; grid-template-rows: 1em 1fr; height: 100%; } .pui--pos .select-dimension-combo header { font-size: 1.2em; font-weight: bold; } .pui--pos .select-dimension-combo .row { font-size: 1em; color: #01246c; padding: 1em; margin: 1em; cursor: pointer; background-color: #d8e0e8; border: 1px solid #bdd0e0; transition: transform 0.1s, opacity 0.1s, border 0.1s, filter 0.1s; } .pui--pos .select-dimension-combo .row.selected { border: 2px solid #5999c9; } .pui--pos .select-dimension-combo .row.disabled { transform: scale(0.95); opacity: 0.5; filter: blur(2px); cursor: not-allowed; } .pui--pos .select-dimension-combo .row.pagination { color: #5999c9; background-color: #cad3dc; } .pui--pos .select-dimension-combo .row.pagination i { font-size: 1.5em; } /*=========================================== | OVERWRITES |============================================*/ .pui--pos .aside-info { display: grid; grid-template-areas: "stat stat stat stat" "info info info reload"; } .pui--pos .aside-info__top { grid-area: stat; border: none; max-width: 100%; } .pui--pos .aside-info__left { grid-area: info; } .pui--pos .aside-info__right { text-align: right; grid-area: reload; } .pui--pos .aside-info__text { user-select: none; cursor: default; } .pui--pos .aside-features { width: 100%; height: 100%; justify-content: flex-end; flex-direction: column; align-items: flex-end; display: flex; } .pui--pos .aside-features__feature { color: #ffffff; } .pui--pos .aside-features__feature i { font-size: 26px; } .pui--pos .aside-features__feature--rotate { transition: transform 0.25s cubic-bezier(0.55, 0, 0.1, 1); } @media only screen and (min-width: 768px) { .pui--pos .aside-features__feature--rotate:hover { transform: rotate(180deg); } } /** * * IMAGINE OVERWRITES */ .pui--pos #aside { background-color: #333333; } .pui--pos .aside__button-container { background-color: #333333; } .pui--pos .aside-navigation__button { background-color: transparent; border-left: 5px solid #bdd0e0; transition: border-left-color 0.25s cubic-bezier(0.55, 0, 0.1, 1), background-color 0.25s cubic-bezier(0.55, 0, 0.1, 1); padding: 0 0 0 15px; width: 100%; } .pui--pos .aside-navigation__button:hover { background-color: rgba(0, 0, 0, 0.06); border-left-color: #5999c9; } .pui--pos .aside-navigation__label { color: #536b77; text-transform: capitalize; } .pui--pos .aside-navigation__icon { color: #94a5ae; } .pui--pos .aside-body__regular ul .aside__connector-row { display: flex; align-items: stretch; } .pui--pos .aside__connector-indicator-col { flex: 0 0 10px; width: 10px; position: relative; align-self: stretch; } .pui--pos .aside__connector-indicator-col .aside__button-indicator { left: 0; } .pui--pos .aside__connector-indicator-col .aside__button-indicator.selected { left: 0; width: 100%; } .pui--pos .aside__connector-indicator-col .aside__button-indicator[disabled].selected:after { background-color: #00a300; background: linear-gradient(180deg, #00a300 0, #008a00); } .pui--pos .aside__connector-offline-col { flex: 0 0 14px; width: 14px; display: flex; align-items: center; justify-content: center; } .pui--pos .aside__connector-offline-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background-color: rgb(255, 80, 80); animation: pos-connector-offline-pulse 1s ease-in-out infinite; } @keyframes pos-connector-offline-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .pui--pos .button-list li { position: relative; } .pui--pos .button-list li .aside__connector-offline-dot { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); } .pui--pos .aside__connector-lock-col { flex: 0 0 32px; width: 32px; display: flex; align-items: center; justify-content: center; align-self: stretch; } .pui--pos .aside__connector-actions { flex: 1 1 auto; display: flex; min-width: 0; } .pui--pos .aside__connector-actions .arm-selection.aside__button:first-child, .pui--pos .aside__connector-actions .arm-selection.button.payment-widget__button:first-child { flex: 1 1 80%; width: auto; vertical-align: top; padding-left: 10px; } .pui--pos .aside__connector-actions .arm-selection.aside__button:last-child, .pui--pos .aside__connector-actions .arm-selection.button.payment-widget__button:last-child { flex: 0 0 20%; width: auto; vertical-align: top; } .pui--pos .aside__connector-lock-col .aside__connector-lock { position: static; margin: 0; } .pui--pos .aside__connector-lock { flex-shrink: 0; width: 22px; height: 22px; cursor: pointer; filter: brightness(0) invert(1); } .pui--pos .aside__connector-lock--unlocked { opacity: 0.85; } .pui--pos .aside__connector-lock--locked { opacity: 1; filter: none; } .pui--pos .aside__connector-lock--inactive { opacity: 0.3; cursor: default; pointer-events: none; } .pui--pos .aside__serial { padding: 14px 16px 18px; border-top: 1px solid rgba(0, 0, 0, 0.12); color: #536b77; } .pui--pos .aside__serial-title { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; margin-bottom: 8px; } .pui--pos .aside__serial-status { display: flex; align-items: center; font-size: 14px; line-height: 1.4; } .pui--pos .aside__serial-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; background-color: #b23b34; } .pui--pos .aside__serial-status--on .aside__serial-dot { background-color: #00a300; } .pui--pos .aside__serial-error { margin-top: 6px; font-size: 13px; line-height: 1.4; color: #b23b34; } .pui--pos .aside__serial-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .pui--pos .aside__serial-button { flex: 0 0 auto; padding: 8px 14px; font-size: 14px; } .pui--pos .aside__serial--unsupported .aside__serial-status { opacity: 0.7; } .pui--pos .aside__serial-baud { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, 0.12); } .pui--pos .aside__serial-baud-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; margin-bottom: 8px; } .pui--pos .aside__serial-baud-row { display: flex; gap: 8px; align-items: stretch; } .pui--pos .aside__serial-baud-row { flex-wrap: wrap; } .pui--pos .aside__serial-rate { flex: 0 0 auto; padding: 8px 12px; font-size: 13px; font-variant-numeric: tabular-nums; color: #536b77; background-color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 2px; cursor: pointer; } .pui--pos .aside__serial-rate--on { background-color: #00a300; border-color: #00a300; color: white; font-weight: 600; } .pui--pos .aside__serial-find { margin-top: 10px; } .pui--pos .aside__serial-build { margin-top: 14px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.45; } .pui--pos .aside__serial-hint { margin-top: 8px; font-size: 12.5px; line-height: 1.45; opacity: 0.7; } .pui--pos .aside__pending { margin: 0 16px 18px; padding: 14px 16px; border-left: 3px solid #b8860b; background-color: rgba(184, 134, 11, 0.12); } .pui--pos .aside__pending-count { font-size: 15px; font-weight: 600; color: #536b77; } .pui--pos .aside__pending-hint { margin: 4px 0 10px; font-size: 12.5px; line-height: 1.45; opacity: 0.75; } .pui--pos #navigation-bar { background-color: #2f8bc8; color: #eef0f2; } .pui--pos #navigation-bar.offline-alert { background-color: rgb(255, 80, 80); } .pui--pos #navigation-bar.offline-alert .navigation-bar__caption-item { border-left-color: #f00; } .pui--pos .navigation-bar__caption-item { border-left-color: #076db9; } .pui--pos .navigation-bar__caption-item:hover { background-color: rgba(0, 0, 0, 0.06); } .pui--pos .navigation-bar__logo svg, .pui--pos .navigation-bar__logo img { height: 29px; margin-left: 15px; } .pui--pos .navigation-bar__connector { padding-left: 10px; } .pui--pos .navigation-bar__caption-item--selected { background-color: rgba(0, 0, 0, 0.2); } .pui--pos .navigation-bar__shop { padding: 0 20px; font-size: 18pt; } .pui--pos .base .keypad-keys__key span { background-color: #536b77; } .pui--pos .keyboard-wrap { background-color: #222222; } @media only screen and (min-width: 1440px) { .pui--pos .keyboard-wrap { padding: 8px 10%; } } .pui--pos .keyboard-expanded { background-color: #222222; } .pui--pos .keypad-keys__key.keypad-keys__key--double-height:hover { opacity: 1; } .pui--pos .keypad__content.keypad-denominations { flex-grow: 1; } .pui--pos .keypad__top { display: flex; align-items: center; } @media only screen and (max-width: 768px) { .pui--pos .keypad__top { display: block; text-align: center; } .pui--pos .keypad__top .placeholder { margin-bottom: 5px; } } .pui--pos .keypad__top .placeholder { font-size: 1.7em; color: white; white-space: nowrap; padding-right: 10px; } .pui--pos .keypad__top .placeholder::after { content: ":"; } .pui--pos .keypad__content.voucher-info { flex: 1; color: white; } .pui--pos .keypad__content.voucher-info table { width: 100%; } .pui--pos .keypad__content.voucher-info table td { padding: 5px; } .pui--pos .button--info, .pui--pos .input__button--info, .pui--pos .button.payment-widget__button, .pui--pos .input--has-button .input__button--info, .pui--pos .receipt-item__button--info, .pui--pos .button--base { background-color: #5999c9; text-transform: capitalize; } .pui--pos .receipt__discount-footer .button { background-color: #5999c9; } .pui--pos .itemgroup__item .button { background-color: #5999c9; } .pui--pos .itemgroup__item .button.active { background-color: #2f8bc8; } .pui--pos .aside__button, .pui--pos .button.payment-widget__button { background-color: #555555; text-transform: capitalize; } .pui--pos .aside__button-indicator:after { background: #00A300; } .pui--pos .aside__button:hover, .pui--pos .button.payment-widget__button:hover { background-color: rgb(40.9383244207%, 63.7090909091%, 80.7871657754%); } .pui--pos .button.disabled { background-color: #555555; color: rgb(50%, 50%, 50%); cursor: not-allowed; } .pui--pos .button.address { line-height: normal; } .pui--pos .kega-widget { background-color: #333333; } .pui--pos .widget-overflow { overflow-x: hidden; } .pui--pos #left-content { background-color: #333333; } .pui--pos #right-content { background-color: #eef0f2; } .pui--pos .content-container__footer--sticky { background-color: #d8e0e8; } .pui--pos .content-container__footer--drawer { background-color: #d8e0e8; } .pui--pos .receipt__total-left, .pui--pos .receipt__total-right { color: #536b77; } .pui--pos .summary__container { background-color: rgb(29.443518298%, 61.8994998809%, 83.4192268%); } .pui--pos .date__inner { background-color: #076db9; } .pui--pos .connector__inner { background-color: #536b77; } .pui--pos .login__inner { background-color: #7badd3; } .pui--pos .invalid__content { width: 50%; height: 50%; margin: 0 auto; font-size: 18px !important; } .pui--pos .cash-drawer__list-item { padding: 0; margin-left: 15px; flex-basis: 26%; } .pui--pos .cash-drawer__list-item--first { display: flex; align-items: center; justify-content: flex-end; flex-direction: row; flex-wrap: nowrap; height: 45px; } .pui--pos .cash-drawer__list-item--list { flex-basis: 26%; } .pui--pos .cash-drawer__label { line-height: 15px; } @media only screen and (min-width: 768px) { .pui--pos .cash-drawer__label { line-height: 45px; } } .pui--pos .cash-drawer__item-column.cash-drawer__item-column--dual-line { display: flex; align-items: center; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; height: 45px; } .pui--pos .button.payment-widget__button { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; } .pui--pos .button.payment-widget__button span { line-height: 25px; } .pui--pos input.ng-empty { text-transform: capitalize; } .pui--pos button.aside__button, .pui--pos button.button.payment-widget__button { line-height: 25px; } @media only screen and (min-width: 768px) { .pui--pos .hidden-desktop { display: none; } } /* changes for the KEGA integration TODO: Move to ddd-styles */ .pui--pos .widget-overflow { overflow-y: auto; } .pui--pos .widget-tray__body--mobile .bottom-button-padding { margin-bottom: 45px !important; } .pui--pos .widget-item__title--padding { margin-bottom: 24px; } .pui--pos .intersolve-widget { top: 0; bottom: 5px; left: 0; overflow: hidden; width: 100%; transition: max-height 0.3s cubic-bezier(0.05, 0.74, 0.27, 0.99); -webkit-overflow-scrolling: touch; } .pui--pos .intersolve-widget__content { margin: 0 0 24px; overflow-y: auto; height: 100%; width: 100%; position: relative; } /* changes for the KEGA integration TODO: Move to ddd-styles */ .pui--pos .receipt__remove-total { color: black !important; font-size: 18px !important; } .pui--pos .order__item--right { text-align: right; } .pui--pos .navigation-bar__caption-item { font-size: 24px; padding: 0 12px; height: 50px; } .pui--pos .navigation-bar__caption-badge { display: block; position: absolute; color: #FFFFFF; border-radius: 21px; padding: 3px 5px; font-size: 9px; top: 8px; right: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: transform 0.4s cubic-bezier(0.05, 0.74, 0.27, 0.99); background-color: #EE1111; color: #FFFFFF; } .pui--pos .navigation-bar__caption-badge--inactive { transform: scale(0); } .pui--pos #right-content { transition: 0.4s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos #__bs_notify__ { border-radius: 15px !important; animation: pos-pulseBrowserSync 2s cubic-bezier(0.05, 0.74, 0.27, 0.99); } @keyframes pos-pulseBrowserSync { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.7); opacity: 0; } } .pui--pos .button-state__disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none !important; color: grey; background-color: rgba(0, 0, 0, 0.1); } .pui--pos .button--inline { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; padding: 0 15px; width: 100%; } .pui--pos .icon-spin { animation: pos-spin 1s infinite linear; } @keyframes pos-spin { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } .pui--pos .aside-navigation__icon img { width: 23px; } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__icon img { width: 32px; } } .pui--pos .aside-navigation__icon img { height: 23px; } @media only screen and (min-width: 768px) { .pui--pos .aside-navigation__icon img { height: 32px; } } .pui--pos [ng-click] { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .pui--pos .visible-on-mobile { display: initial; } @media only screen and (min-width: 992px) { .pui--pos .visible-on-mobile { display: none; } } .pui--pos .hidden-on-mobile { display: none; } @media only screen and (min-width: 992px) { .pui--pos .hidden-on-mobile { display: initial; } } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos .iscroll-scroller { overflow-y: scroll; } } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos .iscroll-scroller { position: static !important; } } @media only screen and (min-width: 1px) and (max-width: 768px) { .pui--pos .iscroll-scroller { height: 100%; } } .pui--pos .iscroll-wrapper.iscroll-off { overflow-y: scroll !important; } .pui--pos .iscroll-wrapper.iscroll-off .aside-navigation__button:hover { background-color: transparent; } .pui--pos .flip-toggle__post { z-index: 9; } .pui--pos .content-container__button.content-container__button--no-fixed-position.slide-action { padding: 0; height: 60px; } .pui--pos .content-container__button.content-container__button--no-fixed-position.slide-action .flip-toggle__post { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; } .pui--pos .aside-navigation__button { overflow: hidden; position: relative; } .pui--pos .aside-navigation__button:before { content: ""; height: 14px; width: 14px; position: absolute; left: -7px; top: 50%; margin-top: -7px; transform: rotateZ(45deg) translateX(-100%); background-color: #7badd3; transition: transform 0.4s cubic-bezier(0.05, 0.74, 0.27, 0.99); } .pui--pos .aside-navigation__button--active { color: #ececec; } .pui--pos .aside-navigation__button--active:before { color: #ececec; transform: rotateZ(45deg) translateX(0%); } .pui--pos .aside-navigation__button--active { border-left: 5px solid #7badd3; } .pui--pos a.button span { line-height: 11px; } .pui--pos [iscroll-tap] { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .pui--pos .button--fill { width: 100%; } .pui--pos .content-container__footer--sticky.button-state__disabled { background-color: rgb(1.4043186895%, 23.4053114917%, 35.5760734674%) !important; cursor: default !important; opacity: 1 !important; } .pui--pos .hidden { display: none !important; } .pui--pos .aside__button-indicator[disabled].selected:after { background-color: #00a300; background: linear-gradient(180deg, #00a300 0, #008a00); } .pui--pos .aside__button-indicator.offline.selected:after { background-color: transparent; background: transparent; } .pui--pos input[type=checkbox] { appearance: none; background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); padding: 14px; border-radius: 3px; display: inline-block; position: relative; width: 30px; height: 30px; flex-basis: 0; } .pui--pos input[type=checkbox]:active, .pui--pos input[type=checkbox]:checked:active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1); } .pui--pos input[type=checkbox]:checked { background-color: #e9ecee; border: 1px solid #adb8c0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1); color: #99a1a7; } .pui--pos input[type=checkbox]:checked:after { content: "✔"; font-size: 24px; position: absolute; top: -4px; left: 4px; color: #99a1a7; } .pui--pos .booking-activated { background-color: #ffebf5; } @media print { .pui--pos .noprint { display: none; } } @media only screen and (max-width: 1024px) { .pui--pos .iscroll-on .iscroll-scroller { padding-bottom: 10%; } } @keyframes pos-blurPulse { 0% { filter: blur(0); opacity: 1; color: rgb(255, 255, 255); } 50% { filter: blur(3px); color: rgb(255, 0, 0); opacity: 0.6; } 100% { filter: blur(0); opacity: 1; color: rgb(255, 0, 0); } } /* Apply animation */ .pui--pos .navigation-bar__captions a.navigation-bar__caption-connection { animation: pos-blurPulse 2s ease-in-out infinite; border-radius: 6px; }