/*#region Fonts */
@font-face {
    font-family: 'Free 3 of 9';
    font-style: normal;
    font-weight: 400;
    src: local('Free 3 of 9'), local('Free3of9'), url(../fonts/free3of9.woff) format('woff');
}

@font-face {
    font-family: "OpenSans Bold";
    src: url("../fonts/opensans-bold.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "OpenSans Bold Italic";
    src: url("../fonts/opensans-bolditalic.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "OpenSans Italic";
    src: url("../fonts/opensans-italic.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "OpenSans Regular";
    src: url("../fonts/opensans-regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Roboto Light";
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/roboto-light.eot');
    src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/roboto-light.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-light.woff2') format('woff2'), url('../fonts/roboto-light.woff') format('woff'), url('../fonts/roboto-light.ttf') format('truetype'), url('../fonts/roboto-light.svg#Roboto') format('svg');
}


@font-face {
    font-family: "Roboto Light Italic";
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/roboto-lightitalic.eot');
    src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url('../fonts/roboto-lightitalic.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-lightitalic.woff2') format('woff2'), url('../fonts/roboto-lightitalic.woff') format('woff'), url('../fonts/roboto-lightitalic.ttf') format('truetype'), url('../fonts/roboto-lightitalic.svg#Roboto') format('svg');
}

@font-face {
    font-family: "Roboto Regular";
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-regular.eot');
    src: local('Roboto'), local('Roboto-Regular'), url('../fonts/roboto-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-regular.woff2') format('woff2'), url('../fonts/roboto-regular.woff') format('woff'), url('../fonts/roboto-regular.ttf') format('truetype'), url('../fonts/roboto-regular.svg#Roboto') format('svg');
}


@font-face {
    font-family: "Roboto Italic";
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/roboto-italic.eot');
    src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/roboto-italic.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-italic.woff2') format('woff2'), url('../fonts/roboto-italic.woff') format('woff'), url('../fonts/roboto-italic.ttf') format('truetype'), url('../fonts/roboto-italic.svg#Roboto') format('svg');
}

@font-face {
    font-family: "Roboto Medium";
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/roboto-medium.eot');
    src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/roboto-medium.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-medium.woff2') format('woff2'), url('../fonts/roboto-medium.woff') format('woff'), url('../fonts/roboto-medium.ttf') format('truetype'), url('../fonts/roboto-medium.svg#Roboto') format('svg');
}

@font-face {
    font-family: "Roboto Medium Italic";
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/roboto-mediumitalic.eot');
    src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url('../fonts/roboto-mediumitalic.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-mediumitalic.woff2') format('woff2'), url('../fonts/roboto-mediumitalic.woff') format('woff'), url('../fonts/roboto-mediumitalic.ttf') format('truetype'), url('../fonts/roboto-mediumitalic.svg#Roboto') format('svg');
}

@font-face {
    font-family: "Roboto Bold";
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/roboto-bold.eot');
    src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/roboto-bold.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-bold.woff2') format('woff2'), url('../fonts/roboto-bold.woff') format('woff'), url('../fonts/roboto-bold.ttf') format('truetype'), url('../fonts/roboto-bold.svg#Roboto') format('svg');
}

@font-face {
    font-family: "Roboto Bold Italic";
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/roboto-bolditalic.eot');
    src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url('../fonts/roboto-bolditalic.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-bolditalic.woff2') format('woff2'), url('../fonts/roboto-bolditalic.woff') format('woff'), url('../fonts/roboto-bolditalic.ttf') format('truetype'), url('../fonts/roboto-bolditalic.svg#Roboto') format('svg');
}

@font-face {
    font-family: "Roboto Black";
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/roboto-black.ttf') format('truetype');
}

@font-face {
    font-family: "Roboto Black Italic";
    font-style: italic;
    font-weight: 900;
    src: url('../fonts/roboto-blackitalic.ttf') format('truetype');
}

@font-face {
    font-family: "Icons";
    src: url(../fonts/icomoon.woff) format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Icons";
    src: url(../fonts/icomoon-bookmarks.woff) format("woff");
    font-weight: normal;
    font-style: normal;
}
/*#endregion Fonts*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5,
h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    min-height: 570px;
    color: #333;
    background: #f8f8f8;
    font-family: 'Roboto Light', Arial, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.2;
}

/* * {
    font-family: Roboto, Arial;
} */

*::-webkit-scrollbar {
    display: none !important;
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

img, fieldset, a img {
    border: none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
button {
    -webkit-appearance: none;
}

input[type="submit"],
button,
a {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

a {
    color: #3888AD;
}

    input[type="submit"]::-moz-focus-inner,
    button::-moz-focus-inner,
    a::-moz-focus-inner {
        padding: 0;
        border: 0;
    }

    a.shy {
        color: inherit;
    }

hr {
    margin: 0;
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.1);
    border: none;
    height: 2px;
    width: 100%;
    clear: both;
}

#cart-cash-button {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.text-date span,
.text-date small {
    display: block;
}

.text-date small {
    opacity: 0.5;
    font-size: 70%;
}

.error-message {
    padding: 5px 0 4px;
    color: #ec4a41;
    font-size: 14px;
    line-height: 1.2;
    transition: opacity 0.17s ease-in-out, visibility 0.17s ease-in-out;
    will-change: transition;
}

.muted {
    opacity: 0.5;
}

.color-red {
    color: #ec4a41;
}

.color-green {
    color: #22B745;
}

.color-blue {
    color: #3888AD;
}

.color-gray {
    color: #9a9a9a;
}

.small {
    font-size: 70%;
}

.big {
    font-size: 120%;
}

.xl {
    font-size: 150%;
}

.text-success {
    color: #66BB6A;
}

.text-error {
    color: #ec4a41;
}

.text-primary {
    color: #3888AD;
}

.text-danger {
    color: #FF6431;
}

.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.bg-white {
    background: #fff;
}

.labeled-info {
    font-size: 16px;
}

    .labeled-info__label,
    .labeled-info label {
        display: block;
        color: #aaa;
        font-size: 12px;
    }

textarea {
    overflow: auto;
}

input, button {
    margin: 0;
    padding: 0;
    border: 0;
}

div, input, textarea, select, button,
h1, h2, h3, h4, h5, h6, a, span, a:focus {
    outline: none;
}

ul, ol, li {
    list-style-type: none;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
    -webkit-tap-highlight-color: transparent;
}

[hidden] {
    display: none !important;
}

button {
    border-radius: 0;
}


    button:disabled, button.is-disabled {
        opacity: 0.5;
        pointer-events: none;
        outline: none;
    }

.body-darkgray {
    background: #eee;
    height: 100%;
}

.main,
.container,
.sidebar,
.inner,
.applica {
    height: 100%;
}

.applica {
    position: relative;
}

.inner {
    *zoom: 1;
    overflow: hidden;
}

    .inner:after {
        content: " ";
        display: table;
        clear: both;
    }

.content {
    position: relative;
    z-index: 5;
}

.discount_keyboard_align {
    text-align: center;
}

.notes_order_align {
    text-align: center;
    padding-top: 10%;
}

.container {
    position: relative;
}

.container_right {
    float: right;
    width: 60%;
}

    .container_right .container__body {
        height: 100%;
    }

.container_upper {
    z-index: 15;
    background: #f8f8f8;
    box-shadow: 3px 0 4px 5px rgba(0, 0, 0, 0.2);
}

.is-poynt .container_upper {
    box-shadow: none !important;
}

.container_overlay {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    bottom: 0;
    width: calc(60% - 52px);
    box-shadow: -3px 0 4px 5px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate3d(-110%, 0, 0);
    transform: translate3d(-110%, 0, 0);
    transition: transform 0.3s ease-in-out;
}

.is-poynt .container_overlay {
    box-shadow: none !important;
}

.container_overlay.is-open {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.container__body {
    position: relative;
    overflow: auto;
    height: calc(100% - 50px);
    padding-top: 50px;
}

.container_payments .container__body, .container_order .container__body, .container_simple .container__body {
    padding-top: 50px;
}

.container_simple .container__body {
    height: 100%;
}

header + .container__body {
    padding-top: 0;
}

.step-body {
    position: relative;
}

.step-body__section {
    overflow: auto;
    padding: 20px 0 0;
    flex: auto;
}

.step-body__footer {
    position: relative;
}

.sidebar {
    position: relative;
    z-index: 10;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #f8f8f8;
}

.sidebar_white {
    background: #fff;
}

.sidebar_left {
    float: left;
    padding-top: 50px;
    width: 40%;
    box-shadow: -3px 0 4px 5px rgba(0, 0, 0, 0.2);
}

.sidebar_list {
    background: #eee;
}

    .sidebar_list .sidebar__body,
    .sidebar_list .totals {
        background: none;
    }

    .sidebar_list .totals-list_scroll {
        border-top-color: #ebebeb;
    }

.is-poynt .sidebar_left {
    box-shadow: none !important;
}

.sidebar_disabled .order-item__close,
.sidebar_disabled .order-item__discount {
    color: #333;
    opacity: 0.5;
}

.header + .sidebar_left,
.header ~ .container_right {
    padding-top: 50px;
}

.sidebar__body {
    position: relative;
    overflow: auto;
    -ms-flex: 1;
    flex: 1;
    background: #fff;
}

.sidebar__toolbar {
    /*padding-bottom: 15px;*/
    border-bottom: 1px solid rgba(0,0,0, 0.1);
}

    .sidebar__toolbar .toolbar__col:not(:last-child) {
        border-color: #89cb8c;
    }

.refund-mode .sidebar__toolbar .toolbar__col:first-child {
    width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/*.sidebar__toolbar .toolbar__button {
    height: 48px;
    line-height: 48px;
}*/

.refund-mode .sidebar__toolbar .toolbar__button {
    background: #ec4a41;
}

.sidebar.is-disabled .sidebar__toolbar, .sidebar.is-disabled .sidebar__menu {
    display: none;
}

.sidebar.is-disabled .header__delete {
    display: none;
}

.toolbar_overlay, .sidebar_overlay {
    left: 0;
    position: absolute;
    z-index: 30;
}

.toolbar_overlay {
    height: 50px;
    left: 60px;
    top: 0;
    width: calc(40% - 60px);
}

.sidebar_overlay {
    background: #ccc;
    height: 100%;
    top: 50px;
    opacity: 0.25;
    width: 40%;
}

.section {
    padding: 20px 0 40px;
}

.wrapper-btn-center {
    margin: 0 auto;
    max-width: 300px;
}

.wrapper-btn-center_multiple {
    max-width: 600px;
}

.wrapper-btn-center__row {
    padding: 0 10px;
}

    .wrapper-btn-center__row:after {
        content: " ";
        display: table;
        clear: both;
    }

.wrapper-btn-center__col {
    float: left;
    padding: 0 10px;
    width: 50%;
}

.items__top {
    height: 190px;
}

.items__body {
    position: relative;
    height: calc(100% - 190px);
}

.icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}

.btn .icon {
    vertical-align: top;
}

.icon-sm {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
}

.icon-narrow {
    width: 24px;
}

.icon:before {
    content: "\e421";
}

.icon-none:before {
    content: none;
}

.icon-diactivate:before {
    content: "\e900";
}

.icon-payment-card:before {
    content: "\e901";
}

.icon-payment-cash:before {
    content: "\e902";
}

.icon-payment-split:before {
    content: "\e903";
}

.icon-payment-terminal:before {
    content: "\e904";
}

.icon-time:before {
    content: "\e8b5";
}

.icon-cash:before {
    content: "\e850";
}

.icon-plus:before {
    content: "\2b";
}

.icon-back:before {
    content: "\e5c4";
}

.icon-caret:before {
    content: "\e5c5";
}

.icon-caret-up:before {
    content: "\5e";
}

.icon-next:before {
    content: "\e5c8";
}

.icon-note:before {
    content: "\e85d";
}

.icon-backspace:before {
    content: "\e14a";
}

.icon-split:before {
    content: "\e0b6";
}

.icon-chat:before {
    content: "\e0b7";
}

.icon-check:before {
    content: "\76";
}

.icon-checked:before {
    content: "\e86c";
}

.icon-nav-before:before {
    content: "\3c";
}

.icon-nav-next:before {
    content: "\3e";
}

.icon-close:before {
    content: "\78";
}

.icon-offline:before {
    content: "\e2c1";
}

.icon-cc:before {
    content: "\e8a1";
}

.icon-bo:before {
    content: "\e871";
}

.icon-delete:before {
    content: "\64";
}

.icon-walkin:before {
    content: "\e566";
}

.icon-exit:before {
    content: "\e879";
}

.icon-collapse:before {
    content: "\e5ce";
}

.icon-expand:before {
    content: "\e5cf";
}

.icon-help:before {
    content: "\3f";
}

.icon-clear:before {
    content: "\e888";
}

.icon-lock:before {
    content: "\e897";
}

.icon-pos:before {
    content: "\e8cc";
}

.icon-print:before {
    content: "\e8ad";
}

.icon-delivery:before {
    content: "\e558";
}

.icon-lock-open:before {
    content: "\e898";
}

.icon-sync:before {
    content: "\e627";
}

.icon-loyalty:before {
    content: "\e89a";
}

.icon-menu:before {
    content: "\e5d2";
}

.icon-more:before {
    content: "\e5d3";
}

.icon-more-v:before {
    content: "\e5d4";
}

.icon-user:before {
    content: "\e416";
}

.icon-undo:before {
    content: "\e042";
}

.icon-search:before {
    content: "\e8b6";
}

.icon-cog:before {
    content: "\e8b8";
}

.icon-orders:before {
    content: "\e563";
}

.icon-users:before {
    content: "\e8d3";
}

.icon-texture:before {
    content: "\e421";
}

.icon-tips:before {
    content: "\e8e0";
}

.icon-bookmarks:before {
    content: "\e9d3";
}

.btn {
    display: inline-block;
    vertical-align: top;
    padding: 0 10px;
    margin: 0;
    border: none;
    min-width: 40px;
    height: 40px;
    color: #333;
    background: #eee;
    font-family: 'Roboto Light', Arial, sans-serif;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.175s ease, box-shadow 0.175s ease;
    text-transform: capitalize;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    will-change: transition;
}

    .btn:active {
        color: #333;
        background: #dadada;
        box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.2);
    }

.is-poynt .btn {
    box-shadow: none !important;
    transition: none !important;
}


.btn_md {
    height: 50px;
    font-size: 18px;
    line-height: 50px;
}

    .btn_md .icon {
        margin-top: 5px;
    }

.btn_lg {
    padding: 0 15px;
    min-width: 60px;
    height: 60px;
    font-size: 19px;
    line-height: 60px;
}

    .btn_lg .icon {
        margin-top: 10px;
    }

    .btn_lg .icon-more-v {
        margin-top: 0;
    }

.btn_xl {
    padding: 0 20px;
    min-width: 80px;
    height: 80px;
    font-size: 30px;
    line-height: 80px;
}

.btn_block {
    display: block;
    width: 100%;
}

    .btn_block:empty {
        height: 0;
    }

.btn_green, .btn_success {
    color: #fff;
    background: #22B745;
}

    .btn_green:active, .btn_success:active {
        background: #4cac51;
    }

.btn_primary {
    color: var(--white);
    background: var(--secondary-action-color);
}

    .btn_primary:active {
        background: #2183bf;
    }


.btn-icon {
    display: inline-block;
    vertical-align: top;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: inherit;
    background: none;
    text-decoration: none;
    transition: background 0.175s ease;
}

.btn-icon_gray {
    background: #eee;
}

.btn-icon:active {
    background: rgba(0, 0, 0, 0.1);
}

.btn-icon_square {
    border-radius: 0;
}

.btn-link {
    color: inherit;
    background: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.btn_icon {
    padding: 0;
    background: none;
}

.btn-back {
    color: inherit;
    background: none;
    font-family: 'Roboto Light', Arial, sans-serif;
    font-size: 16px;
    transition: background 0.175s ease, box-shadow 0.175s ease;
    cursor: pointer;
    text-decoration: none;
}

.is-poynt .btn-back {
    box-shadow: none !important;
}

.header_large .btn-back {
    -webkit-transform: translateY(-50%);
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.btn-back:active {
    color: inherit;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.2);
}

.btn-back__icon, .btn-back__title {
    display: inline-block;
    vertical-align: top;
}

.btn-back__icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
}

.btn-back__title {
    line-height: 50px;
}

.btn-lg {
    padding: 0 15px;
    min-width: 60px;
    height: 60px;
    font-size: 19px;
    line-height: 60px;
}

.btn-xl {
    padding: 0 20px;
    min-width: 80px;
    height: 80px;
    font-size: 30px;
    line-height: 80px;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-rounded {
    border-radius: 5px;
}

.btn-go {
    width: 300px;
}

input.btn {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

.btn-danger {
    color: #fff;
    background: #FF6431;
}

    .btn-danger:active {
        background: #ff4508;
    }

.btn-green, .btn-success {
    color: #fff;
    background: #66BB6A;
}

    .btn-green:active, .btn-success:active {
        background: #4cac51;
    }

.btn-white {
    color: inherit;
    background: #fff;
}

    .btn-white:active {
        background-color: #ebebeb;
    }

.animated .btn-ripple {
    position: relative;
    overflow: hidden;
}

.animated .btn-ripple__effect {
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    opacity: 0.05;
    background: black;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: transform 500ms ease-out, opacity 500ms ease-out;
    pointer-events: none;
    will-change: auto;
}

.container_overlay {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    bottom: 0;
    width: calc(60% - 52px);
    background: #f8f8f8;
    box-shadow: -3px 0 4px 5px rgba(0, 0, 0, 0.2);
    transform: translate3d(-110%, 0, 0);
    transition: transform 0.3s ease-in-out;
}

.is-poynt .container_overlay {
    box-shadow: none !important;
    transition: none !important;
}

.container_overlay.is-open {
    transform: translate3d(0, 0, 0);
}

.is-poynt .container_overlay.container_poynt-pos {
    z-index: 35;
    width: 100%;
}

.is-poynt .container_right.container_poynt-pos .container__body {
    padding-top: 210px;
    height: 100%;
}

.container_overlay {
    height: 100%;
}

    .container_overlay .container__submit {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0 20px 40px;
        text-align: center;
    }

    .container_overlay .container__body {
        padding-top: 50px;
        height: 100%;
    }

    .container_overlay .container__content {
        padding-bottom: 100px;
    }

.animated .btn-ripple__effect.effect-on {
    opacity: 0;
    -webkit-transform: scale(2);
    transform: scale(2);
    will-change: transform;
}

.animated .btn-ripple:active {
    box-shadow: none;
}

.btn.icon {
    padding: 0;
    min-width: 0;
    color: inherit;
    background: transparent;
}

.checkbox {
    position: relative;
    display: inline-block;
    vertical-align: top;
    min-width: 30px;
    min-height: 30px;
    font-size: 0;
    line-height: 30px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .checkbox:active .icon, .checkbox:active input:checked + .icon {
        box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

.no-touch .checkbox:active .icon, .no-touch .checkbox:active input:checked + .icon {
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.checkbox input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

    .checkbox input:checked + .icon {
        border: none;
        color: var(--white);
        background: #3888AD;
        box-shadow: none;
    }

        .checkbox input:checked + .icon:before {
            opacity: 1;
        }

    .checkbox input:disabled + .icon,
    .checkbox input:disabled ~ span {
        opacity: 0.5;
        pointer-events: none;
    }

    .checkbox input:disabled + .icon {
        box-shadow: inset 0 0 0 1px #eee !important;
    }

.checkbox .icon {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    color: #eee;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0,0,0, 0.15);
    line-height: 30px;
    transition: background 0.05s ease, box-shadow 0.05s ease, color 0.05s ease;
}

    .checkbox .icon:before {
        opacity: 0;
    }

.checkbox span {
    display: inline-block;
    vertical-align: middle;
    padding-left: 36px;
    font-size: 14px;
    line-height: normal;
}

.checkbox_green input:checked + .icon, .checkbox_success input:checked + .icon {
    background: #22B745;
}

.checkbox_no-border input:disabled + .icon {
    box-shadow: none !important;
}

.checkbox_no-border .icon {
    box-shadow: none;
}

.checkbox_bordered .icon {
    border: 1px solid currentColor;
}

.checkbox_lg span {
    font-size: 18px;
}

.checkbox-success input:checked + .icon {
    background-color: #66BB6A;
}

.radio {
    position: relative;
    display: inline-block;
    vertical-align: top;
    min-width: 30px;
    min-height: 30px;
    font-size: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

    .radio:active input:checked + i,
    .radio:active input:checked + em {
        background: #fff;
    }

    .radio:active i,
    .radio:active em {
        background: #eee;
    }

.no-touch .radio:active input:checked + i,
.no-touch .radio:active input:checked + em {
    background: #fff;
}

.no-touch .radio:active i,
.no-touch .radio:active em {
    background: #eee;
}

.radio input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}

    .radio input:checked + i:before,
    .radio input:checked + em:before {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    .radio input:disabled + i,
    .radio input:disabled + em,
    .radio input:disabled ~ span {
        opacity: 0.5;
        pointer-events: none;
    }

    .radio input:disabled + i,
    .radio input:disabled + em {
        background: none !important;
    }

.radio i,
.radio em {
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid #eee;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    transition: background 0.2s ease-in-out;
}

    .radio i:before,
    .radio em:before {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        right: 3px;
        bottom: 3px;
        border-radius: 50%;
        background: #3888AD;
        -webkit-transform: scale(0);
        transform: scale(0);
        transition: transform 0.2s ease-in-out;
    }

.radio span {
    display: block;
    padding: 8px 0 8px 40px;
    font-size: 14px;
    line-height: 1;
}

[data-animation*="ripple"] {
    position: relative;
    overflow: hidden;
}

    [data-animation*="ripple"] .ripple-circle {
        position: absolute;
        z-index: 20;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        width: 112px;
        height: 112px;
        background: rgba(0, 0, 0, 0.1);
        animation: ripple 0.5s linear forwards;
        pointer-events: none;
    }

@keyframes ripple {
    0% {
        opacity: 1;
        transform: scale(0);
    }

    100% {
        opacity: 0;
        transform: scale(2);
    }
}

.icon, .icon-text {
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 24px;
    speak: none;
    font-family: "Icons" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
.title-xlg {
    font-family: 'Roboto Medium',Arial,sans-serif;
    font-size: 22px;
}

h2,
.title-lg {
    font-size: 18px;
}

h3,
.title-md {
    font-size: 16px;
}

h4,
.title-sm {
    font-size: 15px;
}

h5,
.title-xs {
    font-size: 14px;
}

p {
    margin: 10px 0;
}

h1, h2, h3, h4, h5, h6, strong, b, em, i {
    font-weight: normal;
    font-style: normal;
}

strong, b {
    font-family: 'Roboto Bold', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    margin: 20px 0 10px;
    font-family: 'Roboto Medium', Arial, sans-serif;
}

.content {
    position: relative;
    z-index: 5;
}

.box {
    margin: 0 auto;
    width: 100%;
    max-width: 450px;
    *zoom: 1;
}

    .box:after {
        content: " ";
        display: table;
        clear: both;
    }

.box__footnote {
    margin-top: 30px;
}

.fa {
    display: inline-block;
    font: 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.figure__title {
    overflow: hidden;
    padding: 0 20px;
    margin: -60px 0 0;
    border-radius: 3px 3px 0 0;
    height: 60px;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    font-weight: 700;
    font-size: 20px;
    line-height: 60px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}


.figure__footnote {
    margin: 30px 0 10px;
}

.figure__text {
    padding: 20px;
    background: #f8f8f8;
}

.display {
    position: relative;
    min-height: 80px;
    background: #fff;
}

.display__list {
    padding: 28px 0;
    font-size: 0;
    text-align: center;
}

.display__item {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px;
    border: 2px solid #3888AD;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    background: #fff;
    font-size: 24px;
    transition: transform 0.3s ease, background 0.3s ease;
}

    .display__item[data-state="active"] {
        background: #3888AD;
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }

    /* sytyle without transform fo SunMi beacuse of bad perfomance */
    .display__item[data-state="activeNoEffects"] {
        background: #3888AD;
    }

.display__error {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: #fff;
    background: #FF6431;
    *zoom: 1;
}

    .display__error:after {
        content: " ";
        display: table;
        clear: both;
    }

.display__close {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    color: #fff;
    background: none;
    font-size: 24px;
}

.display__message {
    padding: 32px 20px;
    font-size: 16px;
    line-height: 1;
}

.keyboard {
    width: 100%;
    background: #eee;
    font-size: 61px;
}

.keyboard__sm {
    font-size: 65px;
}

    .keyboard__sm .keyboard__button {
        font-size: 20px;
    }

.keyboard__lg {
    font-size: 81px;
}

.keyboard__container {
    overflow: hidden;
    margin-top: -1px;
    border-radius: 0 0 4px 4px;
    width: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    *zoom: 1;
}

    .keyboard__container:after {
        content: " ";
        display: table;
        clear: both;
    }

.keyboard__main {
    float: left;
    width: 75%;
    *zoom: 1;
}

    .keyboard__main:after {
        content: " ";
        display: table;
        clear: both;
    }

.keyboard__aside {
    float: right;
    width: 25%;
    *zoom: 1;
}

    .keyboard__aside:after {
        content: " ";
        display: table;
        clear: both;
    }

.keyboard__item {
    float: left;
    padding: 1px 1px 0 0;
    width: 33.33333%;
    height: 1em;
}

.keyboard__button {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    font-family: 'Roboto Regular', Arial, sans-serif;
    font-size: 30px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background 0.175s ease;
}

    .keyboard__button:active, .keyboard__button.is-pressed {
        color: inherit;
        /*background: #ebebeb;*/
    }

    .keyboard__button .icon {
        font-size: 30px;
    }

.keyboard [data-animation*="ripple"] .ripple-circle {
    animation-duration: 0.5s;
}

.simple-keyboard {
    width: 100%;
    font-size: 60px;
}

.simple-keyboard__container {
    margin: 0 -1px 0 0;
}

.modal-body .simple-keyboard__container {
    margin-left: 1px;
}

.simple-keyboard__head, .simple-keyboard__body {
    *zoom: 1;
}

    .simple-keyboard__head:after, .simple-keyboard__body:after {
        content: " ";
        display: table;
        clear: both;
    }

.simple-keyboard__actions, .simple-keyboard__body {
    *zoom: 1;
}

    .simple-keyboard__actions:after, .simple-keyboard__body:after {
        content: " ";
        display: table;
        clear: both;
    }

.simple-keyboard__item {
    float: left;
    padding: 1px 1px 0 0;
    width: 33.33333%;
    height: 1em;
}

.simple-keyboard__item_lg {
    width: 100%;
}

.simple-keyboard__button {
    display: block;
    width: 100%;
    height: 100%;
    color: #000;
    background: #fff;
    font-family: Roboto, Arial;
    font-weight: 300;
    font-size: 19px;
    line-height: normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background 0.175s ease;
}

    .simple-keyboard__button:active, .simple-keyboard__button.is-pressed {
        background: #ebebeb;
    }

    .simple-keyboard__button .icon {
        font-size: 24px;
        vertical-align: middle;
    }

.simple-keyboard__submit {
    color: #fff;
    background: #66BB6A;
}

    .simple-keyboard__submit:active {
        background: #4cac51;
    }

    .simple-keyboard__submit .icon {
        width: 24px;
    }


.footnote {
    color: #aaa;
    font-family: 'Roboto Bold', Arial, sans-serif;
    text-align: center;
}

    .footnote a {
        text-decoration: underline;
    }

.footnote_light {
    font-family: 'Roboto Regular',Arial,sans-serif;
}

.footnote_lg {
    font-size: 16px;
}

.iframe-confirmation {
    position: absolute;
    z-index: 5000;
    bottom: 0;
    left: calc(40% + 54px);
    right: 0px;
    font-weight: 400;
    font-size: 16px;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    transition: transform 0.3s ease-in-out;
}

.iframe-confirmation-content {
    color: #eee;
    background: #434c55;
    display: block;
    width: 100%;
    height: 120px;
}

    .iframe-confirmation-content.confirm-dialog {
        height: 100%;
        width: calc(100% - 88px);
    }

.iframe-confirmation.is-open {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.snackbar {
    position: fixed;
    z-index: 300;
    bottom: 0;
    left: 20%;
    right: 20%;
    padding: 20px;
    color: #eee;
    background: #434c55;
    font-weight: 400;
    font-size: 16px;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

    .snackbar.is-open {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .snackbar[data-state="success"] {
        color: #fff;
        background: #66BB6A;
    }

    .snackbar[data-state="error"] {
        color: #fff;
        background: #ec4a41;
    }

.snackbar__message {
    overflow: hidden;
    margin: 10px;
}

.snackbar a {
    color: inherit;
    text-decoration: underline;
}

.select {
    position: relative;
}

    .select select {
        display: block;
        padding: 0 25px 0 10px;
        border-radius: 0;
        border: none;
        width: 100%;
        height: 40px;
        color: inherit;
        background: none;
        font-family: 'Roboto Regular', Arial, sans-serif;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -webkit-appearance: none;
    }

        .select select.is-error {
            background-color: orangered;
        }

.select_lg select {
    height: 60px;
    font-size: 20px;
}

.select_lg:before, .select_lg:after {
    right: 10px;
}

.select_lg:before {
    top: 20px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 5px 8px 5px;
    border-color: transparent transparent currentColor transparent;
}

.select_lg:after {
    bottom: 20px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 8px 5px 0 5px;
    border-color: currentColor transparent transparent transparent;
}

.select_md select {
    height: 50px;
    font-size: 16px;
}

.select_md:before, .select_md:after {
    right: 10px;
}

.select_md:before {
    top: 50%;
    margin-top: -7px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 4px 6px 4px;
    border-color: transparent transparent currentColor transparent;
}

.select_md:after {
    bottom: 50%;
    margin-bottom: -7px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 6px 4px 0 4px;
    border-color: currentColor transparent transparent transparent;
}

.select_simple {
    background: #fff;
}

    .select_simple select {
        padding-left: 15px;
        border: 2px solid #eee;
        height: 60px;
        font-size: 18px;
    }

    .select_simple:before, .select_simple:after {
        right: 10px;
    }

    .select_simple:before {
        top: 50%;
        margin-top: -10px;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0 5px 8px 5px;
        border-color: transparent transparent currentColor transparent;
    }

    .select_simple:after {
        bottom: 50%;
        margin-bottom: -10px;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 8px 5px 0 5px;
        border-color: currentColor transparent transparent transparent;
    }

.select:before, .select:after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.help {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    background: none;
    transition: opacity 0s 0.3s ease-out, visibility 0s 0.3s ease-out;
}

    .help.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity 0s ease-out, visibility 0s ease-out;
    }

        .help.is-open .help__container {
            transform: translate3d(0, 0, 0);
        }

        .help.is-open:before {
            opacity: 1;
            visibility: visible;
        }

    .help:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        visibility: hidden;
        background: rgba(67, 76, 85, 0.8);
        transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
    }

.help__container {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    padding-top: 50px;
    width: 100%;
    max-width: 450px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translate3d(110%, 0, 0);
    transition: transform 0.3s ease-out;
}

.help__header {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
}

    .help__header .title-xlg {
        padding: 13px 50px;
    }

.help__body {
    position: relative;
    overflow: auto;
    padding: 20px;
    height: 100%;
}

.help__close {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.help-close {
    display: block;
    padding: 0 20px;
    width: 100%;
    height: 50px;
    color: var(--white);
    background: #3888AD;
    font-size: 0;
    text-align: left;
}

.help-close__icon, .help-close__arrow {
    display: inline-block;
    vertical-align: top;
    font-size: 24px;
    line-height: 50px;
}

.help-close__icon {
    margin-right: 10px;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.box {
    margin: 0 auto;
    width: 100%;
    max-width: 450px;
    *zoom: 1;
}

    .box:after {
        content: " ";
        display: table;
        clear: both;
    }

.box__footnote {
    margin-top: 30px;
}

.figure__sync {
    padding: 80px 20px;
    border-radius: 0 0 3px 3px;
    background: #fff;
    text-align: center;
}

.figure__loading {
    margin: 0;
}

.figure__footer {
    margin: 20px 0;
}

.figure__footnote {
    margin: 30px 0 10px;
}

.figure__text {
    padding: 20px;
    background: #f8f8f8;
}

.loading {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 1em;
    height: 1em;
    font-size: 150px;
    background: none;
}

    .loading:before, .loading:after {
        content: '';
        position: absolute;
        top: 13%;
        left: 13%;
        right: 13%;
        bottom: 13%;
        border-radius: 50%;
        width: 74%;
        height: 74%;
        background: rgba(0, 0, 0, 0.3);
        -webkit-transform: scale(0);
        transform: scale(0);
        animation: scale 2s cubic-bezier(0.1, 0.2, 0.3, 1) infinite;
    }

    .loading:after {
        animation-delay: 1s;
    }

    .loading > div {
        font-size: initial;
    }

.messageBox .loading {
    margin-left: 50%;
    transform: translateX(-50%);
}

@keyframes scale {
    0% {
        opacity: 1;
        transform: scale(0);
    }

    90% {
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

.page-activate .intro {
    margin-top: 50px;
    margin-bottom: 28px;
}

.section_sticky {
    padding: 0 20px 20px;
}

.section_inner {
    padding: 20px;
}

.section_inner_mtl_scroll {
    height: calc(100% - 150px);
    overflow: scroll;
}

.section_form {
    padding: 40px;
}

.vertical-center__content {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    text-align: left;
}

.vertical-center {
    text-align: center;
    font-size: 0;
}

.muted {
    opacity: 0.5;
}

.fieldset {
    width: 100%;
}

    .fieldset + .fieldset {
        margin-top: 1px;
    }

    .fieldset + .fieldset_standalone {
        margin-top: 30px;
    }

.fieldset__divider {
    border-top: 0px solid #f8f8f8;
}

.fieldset__container {
    overflow: hidden;
    border-bottom: 2px solid #eee;
}

.fieldset__row {
    margin: 0 0 0 -2px;
    *zoom: 1;
}

    .fieldset__row:after {
        content: " ";
        display: table;
        clear: both;
    }

.fieldset__col {
    position: relative;
    float: left;
    width: 100%;
}

    .fieldset__col + .fieldset__col {
        border-left: 1px solid #eee;
    }

        .fieldset__col + .fieldset__col:before {
            left: 0;
        }

.fieldset__col_lg {
    width: 66.8%;
}

.fieldset__col_md {
    width: 50%;
}

.fieldset__col_sm {
    width: 33.2%;
}

.fieldset__col.is-active:before {
    opacity: 1;
    visibility: visible;
}

.fieldset__col:before {
    content: '';
    position: absolute;
    top: 0;
    left: 2px;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    box-shadow: inset 0 0 0 2px #3888AD;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.fieldset__input {
    padding: 0 20px;
    width: 100%;
}

    .fieldset__input[name="fat-card-expdate"],
    .fieldset__input#fat-terminal-card-number {
        padding-left: 10px;
    }

.fieldset_lg .fieldset__label-wrapper, .fieldset_lg .fieldset__units-wrapper {
    line-height: 80px;
}

.fieldset_bordered {
    border: 2px solid #eee;
}

.fieldset_keyboard {
    border-radius: 0 0 6px 6px;
}

.fieldset_first {
    overflow: hidden;
    border-radius: 3px 3px 0 0;
}

    .fieldset_first .fieldset__inner {
        border-radius: 3px 3px 0 0;
    }

.fieldset_last {
    overflow: hidden;
    border-radius: 0 0 3px 3px;
}

    .fieldset_last .fieldset__inner {
        border-radius: 0 0 3px 3px;
    }

.fieldset_sharp {
    border-radius: 0;
}

    .fieldset_sharp .keyboard__container {
        border-radius: 0;
    }

.field {
    position: relative;
    display: table;
    width: 100%;
}

.field__inner {
    position: relative;
}

    .field__inner:before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 1px;
        border: 2px solid #3888AD;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s, visibility 0.25s;
        pointer-events: none;
    }

.field.is-active .field__inner:before {
    opacity: 1;
    visibility: visible;
}

.form .form__submit {
    min-width: 140px;
}

.form__error {
    padding: 5px 0 15px;
    color: #ec4a41;
    font-size: 14px;
    line-height: 1.2;
}

.form-box.selectable {
    position: relative;
}

    .form-box.selectable.is-active:before {
        opacity: 1;
        visibility: visible;
    }

    .form-box.selectable:before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        visibility: hidden;
        box-shadow: inset 0 0 0 2px #3888AD;
        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
        pointer-events: none;
    }

.simple-field {
    padding: 10px 0;
}

.simple-field__title {
    font-family: 'Roboto Bold', Arial, sans-serif;
}

.simple-field__title, .simple-field__error {
    text-align: center;
}

.simple-field__error {
    margin: 0 -20px;
    color: #ec4a41;
    font-size: 14px;
    line-height: 1.2;
}

.simple-field__error_reset {
    margin: 0;
}

.simple-field__label {
    display: block;
    padding-bottom: 8px;
    color: #333;
    font-size: 16px;
}

.input-box {
    position: relative;
}

.input-box__clear {
    position: absolute;
    top: 50%;
    right: 15px;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, color 0.175s ease-in-out, background 0.175s ease-in-out;
}

.input-box:hover .input-box__clear,
input:focus + .input-box__clear {
    opacity: 1;
    visibility: visible;
}

.main-display .field_static .field__static {
    height: 60px;
    line-height: 60px;
}

.main-display {
    position: relative;
    padding: 1px 41px 1px 0;
    font-family: 'Roboto Regular', Arial, sans-serif;
}

/*.main-display .field__input {
        height: 60px;
    }*/

.main-display__clear {
    position: absolute;
    z-index: 2;
    top: 2px;
    right: 2px;
    bottom: 2px;
    width: 60px;
    background: #fff;
}

.fieldset__input[name="fat-card-expdate"] + .main-display__clear {
    width: 50px;
}

.main-display__clear:active .icon {
    opacity: 0.7;
}

.no-touch .main-display__clear:active .icon {
    opacity: 0.7;
}

.main-display__clear .icon {
    opacity: 0.5;
    font-size: 30px;
    transition: opacity 0.1s ease-in-out;
}

.input,
.textarea {
    display: inline-block;
    vertical-align: top;
    border: none;
    color: #333;
    font-weight: 400;
    font-size: 16px;
    line-height: 50px;
}

.simple-input {
    display: inline-block;
    vertical-align: top;
    padding: 0 15px;
    border: 1px solid #eee;
    width: 100%;
    height: 60px;
    color: #333;
    font-family: 'Roboto Regular', Arial, sans-serif;
    font-size: 18px;
    line-height: normal;
    transition: border-color 0.17s ease-in-out;
}

    .simple-input:focus {
        border-color: #3888AD
    }

.field_static .field__box {
    text-align: right;
}

.field_static .field__units, .field_static .field__static {
    display: inline-block;
    vertical-align: middle;
}

.field_static .field__units {
    padding-right: 10px;
}

    .field_static .field__units span {
        margin: 0;
    }

.field_static .field__static {
    padding-right: 20px;
    height: 80px;
    color: #333;
    font-size: 30px;
    line-height: 80px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.field__inner {
    display: table-row;
    background: #fff;
    font-size: 0;
}

    .field__inner.is-active {
        background-color: rgba(46, 153, 219, 0.11);
    }

.field__label, .field__units, .field__switch {
    display: table-cell;
    vertical-align: middle;
    line-height: normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.field__label, .field__switch {
    padding: 5px 10px 5px 20px;
    font-size: 14px;
    width: 35%;
}

.field__switch {
    white-space: nowrap;
}

.field__units {
    opacity: 0.5;
    font-size: 16px;
    padding: 5px 20px 5px 0;
}

    .field__units span {
        display: block;
        margin-left: -10px;
    }

.field__switch-left, .field__switch-right, .field__switch-box {
    display: inline-block;
    vertical-align: middle;
}

.field__switch-box {
    margin: 0 10px;
}

.field__text {
    vertical-align: middle;
    font-size: 14px;
}

.field__box {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}

    .field__box:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px solid #ef5f53;
        opacity: 0;
        visibility: 0;
        pointer-events: none;
        transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
    }

    .field__box.is-error:before {
        opacity: 1;
        visibility: visible;
    }

.field__input {
    padding-right: 20px;
    padding-left: 20px;
    border: none;
    width: 100%;
    background: transparent;
}

.field__textarea {
    display: block;
    padding: 15px 20px;
    border: none;
    width: 100%;
    resize: vertical;
}

.field-box {
    position: relative;
    padding: 13px 20px;
    border: 2px solid #eee;
    background: #fff;
}

.field-box__switch {
    position: relative;
    margin: -13px -20px;
    min-height: 56px;
}

    .field-box__switch .field-box__label {
        padding: 20px 80px 20px 20px;
        cursor: pointer;
    }

.field-box__label {
    display: block;
    padding: 5px 10px 5px 0;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.field-box__switcher {
    position: absolute;
    top: 13px;
    right: 18px;
}

.field-box__list {
    padding: 0 10px;
    margin: 0 -20px;
    *zoom: 1;
}

    .field-box__list:after {
        content: " ";
        display: table;
        clear: both;
    }

.field-box__col {
    float: left;
    width: 100%;
}

.field-box__col_sm {
    width: 33.33%;
}

.field-box__radio {
    display: block;
    padding: 5px 10px;
}

.field-box__counter {
    margin: -13px -20px;
    font-size: 0;
}

    .field-box__counter .field-box__label {
        display: inline-block;
        vertical-align: middle;
        padding-left: 20px;
        padding-right: 20px;
        width: 35%;
    }

.field-box__counter-input,
.input.field-box__counter-input {
    width: 80px;
    height: 60px;
    font-size: 20px;
}

.field-box__controls {
    display: inline-block;
    vertical-align: middle;
    width: 65%;
    *zoom: 1;
}

    .field-box__controls:after {
        content: " ";
        display: table;
        clear: both;
    }

.field-box__controls-in {
    position: relative;
    float: right;
    width: 240px;
    padding: 0 80px;
    max-width: 100%;
}

.field-box__control {
    position: absolute;
    top: 0;
    bottom: 0;
}

    .field-box__control .btn {
        height: 100%;
        line-height: normal;
    }

.field-box__control_left {
    left: 0;
}

.field-box__control_right {
    right: 0;
}

.field-box__select-set {
    position: relative;
    margin: -13px -20px;
    min-height: 60px;
    *zoom: 1;
}

    .field-box__select-set:after {
        content: " ";
        display: table;
        clear: both;
    }

.field-box__select-col {
    float: left;
    width: 50%;
    *zoom: 1;
}

    .field-box__select-col:after {
        content: " ";
        display: table;
        clear: both;
    }

.field-box__select-input {
    padding: 0 10px;
    text-align: right;
}

.field-box__select-static {
    padding-left: 20px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .field-box__select-static em {
        float: right;
        margin: 10px 0;
        color: #22B745;
        right: 0;
        position: absolute;
    }

    .field-box__select-static.paid-payment-info {
        line-height: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        position: relative;
        height: 60px;
    }

    .field-box__select-static span {
        display: block;
        overflow: hidden;
        font-family: 'Roboto Light', Arial, sans-serif;
        font-size: 14px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .field-box__select-static span.secondary-label {
            font-size: 12px;
        }


.field-box__number {
    position: absolute;
    top: 0;
    left: 20px;
    width: 15px;
    font-size: 14px;
    line-height: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.field-box__button {
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
}

.field-box__clear {
    position: absolute;
    top: 0;
    left: 100%;
    bottom: 0;
    width: 60px;
    color: #ec4a41;
    background: none;
}

.button-tab-bottom-line {
    padding-bottom: 100px;
    height: 100%;
}

.input.is-error {
    background-color: orangered;
}

.input::-webkit-input-placeholder,
.textarea::-webkit-input-placeholder {
    opacity: 1;
}

.input::-moz-placeholder,
.textarea::-moz-placeholder {
    opacity: 1;
}

.input:-ms-input-placeholder,
.textarea:-ms-input-placeholder {
    opacity: 1;
}

.input::placeholder,
.textarea::placeholder {
    opacity: 1;
}

.input_xs,
.textarea_xs {
    font-size: 14px;
}

.input_sm,
.textarea_sm {
    font-size: 14px;
}

.input_lg,
.textarea_lg {
    font-size: 20px;
}

.input_xl,
.textarea_xl {
    font-size: 30px;
}

.input_block,
.textarea_block {
    display: block;
    width: 100%;
}

.input_default, .input_silver,
.textarea_default,
.textarea_silver {
    background: #eee;
}

.input_white,
.textarea_white {
    background: #fff;
}

.input_transparent,
.textarea_transparent {
    background: none;
}

.input_highlight:focus,
.textarea_highlight:focus {
    outline: solid #3888AD 2px;
    outline-offset: 0;
}

.input {
    height: 50px;
}

.input_xl {
    height: 80px;
    line-height: 80px;
}

.field__box > .input_xl {
    line-height: initial;
}

.field_currency_format {
    display: block;
    margin-right: 21px;
    height: 80px;
    font-size: 30px;
    line-height: 80px;
}

label.field_currency_format small {
    opacity: 0.6;
    font-size: 20px;
}

.input_xs {
    height: 30px;
    line-height: 30px;
}

.input_sm {
    height: 40px;
    line-height: 40px;
}

.input_lg {
    height: 60px;
    line-height: 60px;
}

.textarea {
    padding: 15px 20px;
    height: 200px;
    max-height: 300px;
    resize: vertical;
    line-height: normal;
}

.textarea_simple {
    border: 2px solid #eee;
    background: #fff;
}

.textarea_little {
    height: 52px;
}

.input-xs {
    height: 30px;
    font-size: 14px;
    line-height: 30px;
}

.input-sm {
    height: 40px;
    font-size: 14px;
    line-height: 40px;
}

.input-lg {
    height: 60px;
    font-size: 20px;
    line-height: 60px;
}

.input-text {
    display: inline-block;
}

.input-default {
    background: #eeeeee;
}

.input-white {
    background: #fff;
}

.input-silver {
    background: #eeeeee;
}

.input-transparent {
    background: transparent;
}

.input-focus-highlight:focus {
    outline: solid #3888AD 2px;
    outline-offset: 0;
}

textarea.input {
    line-height: normal;
}

.switcher {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 50px;
    height: 30px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .switcher:active .switcher__icon:before {
        box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .switcher input {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
    }

        .switcher input:checked:not([disabled='disabled']) + .switcher__icon:before {
            background: #3888AD;
        }

        .switcher input:checked + .switcher__icon:after {
            box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
            -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
        }

.switcher__icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

    .switcher__icon:before, .switcher__icon:after {
        content: '';
        position: absolute;
    }

    .switcher__icon:before {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 15px;
        background: #eee;
        transition: background 0.2s ease-in-out, box-shadow 0.1s ease-in-out;
    }

    .switcher__icon:after {
        top: 50%;
        left: 50%;
        margin: -12px 0 0 -12px;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        background: #fff;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

.switcher_green input:checked + .switcher__icon:before, .switcher_success input:checked + .switcher__icon:before {
    background: #22B745;
}

.switcher-box {
    margin-bottom: 20px;
    font-size: 0;
}

.switcher-box_lg .switcher-box__label {
    padding: 6px 10px;
    font-size: 18px;
}

.switcher-box__label {
    display: inline-block;
    vertical-align: top;
    padding: 8px 5px;
    font-size: 14px;
    line-height: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.toolbar_static .toolbar__col {
    vertical-align: middle;
    padding: 0 10px;
    height: 50px;
}

.toolbar_delimited {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.toolbar_make_payment {
    min-width: 322px;
}

.toolbar_container_flex {
    display: flex;
    width: 100%;
}

.toolbar__col_flex_60 {
    width: 60%;
}

.toolbar__col_flex_40 {
    width: 40%;
    position: relative;
}


.toolbar__container {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.toolbar__row {
    display: table-row;
}

.toolbar__col {
    display: table-cell;
    vertical-align: top;
    font-size: 16px;
}

.toolbar__col_male_payment {
    max-width: 322px;
    position: relative;
}

.toolbar__col:not(:last-child) {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.toolbar__button {
    padding: 0 20px;
    *zoom: 1;
}

    .toolbar__button span {
        display: inline-block;
        vertical-align: middle;
        line-height: 1.1;
        white-space: normal;
    }

    .toolbar__button:after {
        content: " ";
        display: table;
        clear: both;
    }

    .toolbar__button strong {
        float: right;
    }

    .toolbar__button strong {
        font-size: 25px;
        font-weight: normal;
    }

.totals-list__item_total {
    padding-top: 5px !important;
    font-family: 'Roboto Medium', Arial, sans-serif;
    font-size: 20px;
}

    .totals-list__item_total .totals-list__label {
        width: 30%;
    }

    .totals-list__item_total .totals-list__value {
        width: 70%;
    }

.dropdown {
    position: relative;
    font-family: 'Roboto Light', Arial, sans-serif;
}

.dropdown_header {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
}

    .dropdown_header .dropdown__header {
        height: 50px;
    }

.no-touch .dropdown_header .dropdown__header:hover {
    background: none;
}

.dropdown_header .dropdown__value {
    line-height: 50px;
}

.dropdown_header .dropdown__arrow {
    color: #fff;
}

.dropdown_fixed .dropdown-menu {
    width: 400px;
    max-width: none;
}

.dropdown_md {
    font-size: 16px;
}

.dropdown_time .dropdown__header {
    padding-right: 70px;
}

.dropdown__header {
    position: relative;
    padding: 0 20px;
    height: 60px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background 0.175s ease;
}

.no-touch .dropdown__header:hover {
    background: #eee;
}

.dropdown__label {
    padding: 10px 0 4px;
    color: #aaa;
    font-size: 12px;
    line-height: 16px;
}

    .dropdown__label + .dropdown__value {
        line-height: normal;
    }

.dropdown__value {
    font-size: 1em;
    line-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown__label + .dropdown__value {
    line-height: normal;
}

.dropdown-menu__item.with-sub-items,
.dropdown__value.with-sub-items {
    line-height: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

    .dropdown-menu__item.with-sub-items .dropdown-menu__item-primary,
    .dropdown__value.with-sub-items .dropdown__value-primary {
        font-family: 'Roboto Regular', Arial, sans-serif;
        font-size: 15px;
    }

    .dropdown-menu__item.with-sub-items .dropdown-menu__item-secondary,
    .dropdown__value.with-sub-items .dropdown__value-secondary {
        font-size: 12px;
    }

.dropdown__arrow {
    position: absolute;
    top: 50%;
    right: 0;
    color: #aaa;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}

    .dropdown__arrow ~ .dropdown__value {
        padding-right: 24px;
        max-width: 200px;
    }

.dropdown__icon {
    position: absolute;
    top: 50%;
    right: 30px;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}

.dropdown-menu {
    position: absolute;
    z-index: 2000;
    top: 0;
    left: 0;
    max-width: 600px;
    min-width: 100%;
    color: #333;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transform: scaleY(0) translate(0, -100%);
    transform: scaleY(0) translate(0, -100%);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    transition: transform 0.3s ease-out;
}

    .dropdown-menu.is-open {
        -webkit-transform: scaleY(1) translate(0, 0);
        transform: scaleY(1) translate(0, 0);
    }

.dropdown-menu_icons .dropdown-menu__item {
    padding-right: 50px;
}

.dropdown-menu_up {
    top: auto;
    bottom: 100%;
}

.dropdown-menu_no-scroll .dropdown-menu__list {
    max-height: none;
}

.dropdown-menu__header {
    position: relative;
    padding: 0 20px;
    color: #3888AD;
    line-height: 50px;
}

    .dropdown-menu__header .icon {
        float: left;
        margin: 5px 5px 0 -10px;
    }

.dropdown-menu__list {
    overflow: auto;
    max-height: 250px;
}

    .dropdown-menu__list a {
        color: inherit;
        text-decoration: none;
    }

.dropdown-menu__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-menu__item {
    position: relative;
    padding: 5px 20px 5px 20px;
    text-align: left;
    height: 50px;
    line-height: calc(50px - 10px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.08s ease-in-out, color 0.08s ease-in-out;
}

.customer_special_height {
    line-height: normal;
}

.dropdown-menu__item.is-active {
    color: #3888AD;
}

.no-touch .dropdown-menu__item:hover {
    background: #eee;
}

.no-touch .dropdown-menu__item:active {
    color: #fff;
    background: #3888AD;
}

.dropdown-menu__item:active {
    color: #fff;
    background: #3888AD;
}

.dropdown-menu__item_special {
    border-bottom: 1px solid #e6e6e6;
}


.dropdown-menu__item .icon {
    position: absolute;
    top: 5px;
    right: 10px;
}

.dropdown-menu__item .icon-next:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    bottom: 5px;
    border-left: 1px solid #e6e6e6;
}

.dropdown-menu__item .contact-box {
    font-size: 12px;
    opacity: 0.9;
}

.dropdown-menu .btn_transparent {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.dropdown-checkbox {
    position: relative;
    display: block;
    padding: 10px 20px;
    margin: 0 -20px;
    min-width: 30px;
    min-height: 30px;
    font-size: 0;
    line-height: 30px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .dropdown-checkbox:active .icon, .dropdown-checkbox:active input:checked + .icon {
        box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

.no-touch .dropdown-checkbox:active .icon, .no-touch .dropdown-checkbox:active input:checked + .icon {
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.dropdown-checkbox input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

    .dropdown-checkbox input:checked + .icon {
        border: none;
        color: #fff;
        background: #3888AD;
        box-shadow: none;
    }

    .dropdown-checkbox input:disabled + .icon,
    .dropdown-checkbox input:disabled ~ span {
        opacity: 0.5;
        pointer-events: none;
    }

    .dropdown-checkbox input:disabled + .icon {
        box-shadow: inset 0 0 0 1px #eee !important;
    }

.dropdown-checkbox .icon {
    position: absolute;
    top: 10px;
    left: 20px;
    padding: 0;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    color: #eee;
    background: #fff;
    box-shadow: inset 0 0 0 1px #eee;
    line-height: 30px;
    transition: background 0.05s ease, box-shadow 0.05s ease, color 0.05s ease;
}

.dropdown-checkbox span {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: normal;
}

.overlay {
    position: fixed;
    z-index: 1229;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    background: #434c55;
    cursor: default;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

.is-poynt .overlay {
    transition: none !important;
}

.overlay[data-color="dark-gray"] {
    background: #434c55;
}

.overlay.is-open {
    opacity: 0.8;
    visibility: visible;
}

.form-wrapper {
    padding: 36px 0 20px;
    margin: 0 auto;
    max-width: 460px;
}

.form {
    margin: 0 auto;
}

.form_sm {
    max-width: 460px;
}

.form_sm__order-discount {
    margin: 0;
    max-width: initial;
}

    .form_sm__order-discount .iframe-wrapper,
    .form_sm__order-discount .fieldset.fieldset_bordered {
        margin: 0 auto;
        max-width: 460px;
    }

.form_md {
    max-width: 800px;
}

    .form_md .form__col {
        padding: 10px;
    }

.form__section {
    margin-bottom: 20px;
}

.app_message {
    position: relative;
    margin-bottom: 25px;
}

.form__text p {
    margin: 0;
}

.form__section_sm {
    margin-bottom: 10px;
}

.form__row {
    position: relative;
    *zoom: 1;
}

    .form__row:after {
        content: " ";
        display: table;
        clear: both;
    }

    .form__row:before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        bottom: 0;
        margin-left: -1px;
        border-left: 2px solid #eee;
    }

.form__col {
    float: left;
    padding: 12px 20px;
    width: 50%;
}

.form__col_xs {
    width: 25%;
}

.form__columns {
    margin: 0 -10px;
    *zoom: 1;
}

    .form__columns:after {
        content: " ";
        display: table;
        clear: both;
    }

.form__column {
    float: left;
    padding: 0 10px 25px;
    width: 100%;
}

.form__column_md {
    width: 50%;
}

.form__column_sm {
    width: 33%;
}

.form__column_xs {
    width: 25%;
}

.form__intro {
    padding: 20px 0;
    opacity: 0.5;
}

.form__link {
    display: inline-block;
    vertical-align: top;
    padding: 9px 0 7px;
    color: inherit;
    font-size: 14px;
    line-height: 1;
}

.no-touch .form__link:hover {
    text-decoration: none;
}

.field__select select {
    padding-left: 20px;
}

.field__select_md select {
    padding-left: 20px;
    padding-right: 40px;
}

.field__select_md:before, .field__select_md:after {
    right: 20px;
}

.field__row {
    *zoom: 1;
}

    .field__row:after {
        content: " ";
        display: table;
        clear: both;
    }

.field__col {
    float: left;
    padding: 15px 20px;
    width: 100%;
}

.field__col_50 {
    width: 50%;
}

.sm-search {
    position: relative;
    padding-right: 50px;
    min-width: 240px;
}

.sm-search__input {
    padding: 0 20px;
    width: 100%;
    height: 50px;
    color: #333;
    background: #f8f8f8;
    box-shadow: inset 0 6px 4px -5px rgba(0, 0, 0, 0.2);
    font-family: Roboto, Arial;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
}

.sm-search__btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50px;
    background: #3888AD;
    line-height: 50px;
    transition: background 0.175s ease, box-shadow 0.175s ease;
}

    .sm-search__btn:active {
        background: #2183bf;
        box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.2);
    }

    .sm-search__btn .icon {
        vertical-align: middle;
        color: #fff;
    }

.search__field {
    position: relative;
    padding-left: 50px;
}

    .search__field:before {
        content: '';
        position: absolute;
        left: 10px;
        right: 0;
        bottom: 2px;
    }

.search__input {
    padding: 0 10px;
    width: 100%;
    height: 50px;
    color: #fff;
    background: none;
    font-family: Roboto, Arial;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    word-break: normal;
    white-space: nowrap;
}

    .search__input::-webkit-input-placeholder {
        color: #fff;
        opacity: .7;
    }

    .search__input::-moz-placeholder {
        color: #fff;
        opacity: .7;
    }

    .search__input:-ms-input-placeholder {
        color: #fff;
        opacity: .7;
    }

    .search__input::placeholder {
        color: #fff;
        opacity: .7;
    }

.search__input_phoneactivation {
    padding: 0 10px;
    width: 100%;
    height: 50px;
    color: #000;
    background: none;
    font-family: Roboto, Arial;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    word-break: normal;
    white-space: nowrap;
}

    .search__input_phoneactivation::-webkit-input-placeholder {
        color: #000;
        opacity: .7;
    }

    .search__input_phoneactivation::-moz-placeholder {
        color: #000;
        opacity: .7;
    }

    .search__input_phoneactivation:-ms-input-placeholder {
        color: #000;
        opacity: .7;
    }

    .search__input_phoneactivation::placeholder {
        color: #000;
        opacity: .7;
    }

.search__controls {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px;
    font-size: 0;
}

.search__button {
    color: #fff;
}

.search__button_phone_activation {
    color: #000;
}

.header {
    position: relative;
    height: 50px;
    color: var(--white);
    background: var(--secondary-action-color);
    font-family: 'Roboto Medium', Arial, sans-serif;
    font-size: 20px;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.header_large {
    height: 150px;
}

.header_medium {
    height: 90px;
}

.header_double {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    right: 0;
}

.header_container-upper .header__sidebar {
    z-index: initial;
    box-shadow: none;
}

.header_container-upper .header__container {
    z-index: 10;
    box-shadow: 3px -5px 4px 5px rgba(0, 0, 0, 0.2);
}

.header_settings .header__sidebar {
    width: 300px;
}

.header_settings .header__container {
    float: none;
    margin-left: 300px;
    width: auto;
}

.settings .settings__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.settings__sidebar {
    float: left;
    width: 300px;
}

.settings__sidebar, .settings__container {
    position: relative;
    height: 100%;
}

.settings__nav {
    overflow: auto;
    padding-top: 70px;
    height: 100%;
    background: #434c55;
}

.settings__body {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: 50px;
    height: 100%;
}

.settings__body_default {
    display: block;
    padding: 80px 20px 30px;
}

.settings__content {
    position: relative;
    height: calc(100% - 200px);
}

.settings__explanation,
.settings__footer {
    padding: 20px;
}

.explanation__icon {
    float: left;
}

.explanation__text {
    overflow: hidden;
    padding: 10px 0;
}

    .explanation__text p {
        margin: 0;
    }

.header_payments .header__back, .header_order .header__back {
    display: none;
}

.header__sidebar {
    z-index: 20;
    float: left;
    width: 40%;
    box-shadow: -3px -5px 4px 5px rgba(0, 0, 0, 0.2);
}

.header__container {
    float: right;
}

    .header__container .header__delete {
        right: 8px;
        display: none;
        color: #333;
    }

        .header__container .header__delete:active {
            color: #333;
        }

.no-touch .header__container .header__delete:active {
    color: #333;
}

.header__fullinfo {
    position: absolute;
    z-index: 15;
    top: 0;
    right: 0;
    bottom: 0;
    box-shadow: -3px -5px 4px 5px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate3d(-110%, 0, 0);
    transform: translate3d(-110%, 0, 0);
    transition: transform 0.3s ease-in-out;
}

    .header__fullinfo.is-open {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

.header__sidebar, .header__container {
    position: relative;
}

.header__sidebar, .header__container, .header__fullinfo {
    min-height: 50px;
    background: #3888AD;
}

.header__container, .header__fullinfo {
    width: 60%;
}

.header__scan {
    position: absolute;
    right: 58px;
    bottom: 0;
    display: none;
}

    .header__scan .btn-scan {
        color: #333;
    }

.header__menu {
    float: left;
    color: #3888AD;
    background: #cae9f4;
}

    .header__menu:active {
        background: #a0d7eb;
    }

.no-touch .header__menu:active {
    background: #a0d7eb;
}

.header__menu + .header__title {
    padding-left: 35px;
}

.header__back-icon {
    display: inline-block;
    vertical-align: middle;
}

.header__menu, .header__back-icon {
    margin: 0 -15px 0 0;
    width: 50px;
    height: 50px;
    line-height: 50px;
}

.header__title, .header__subtitle {
    overflow: hidden;
    padding: 0 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.header__title {
    font-size: 20px;
    margin: 0;
}

.header__title_vertical {
    padding-top: 13px;
    padding-bottom: 13px;
}

.header__subtitle {
    opacity: 0.5;
    font-family: 'Roboto Regular', Arial, sans-serif;
    font-size: 14px;
}

.header__back {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    z-index: 2;
}

    .header__back .header__title {
        display: inline-block;
        vertical-align: middle;
    }

.header__help, .header__delete, .header__search {
    position: absolute;
    top: 0;
    right: 0;
    margin: 5px;
    color: #fff;
}

.header__logo {
    font-size: 0;
    line-height: 150px;
    text-align: center;
}

    .header__logo img {
        vertical-align: middle;
        max-width: 200px;
    }

.header__logo_sm {
    position: relative;
    padding-top: 30px;
    margin: 0 auto;
    max-width: 450px;
    line-height: 60px;
}

    .header__logo_sm:before {
        content: '';
        position: absolute;
        top: 30px;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 2px 2px 0 0;
        background: rgba(255, 255, 255, 0.2);
    }

    .header__logo_sm img {
        max-height: 40px;
    }

.header__logos {
    position: relative;
    top: 30px;
    bottom: 0;
    padding: 5px 20px;
    margin: auto;
    width: 450px;
    height: 60px;
    background: rgba(255, 255, 255, 0.7);
    font-size: 0.1px;
    line-height: 40px;
    text-align: justify;
}

    .header__logos:after {
        content: '';
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .header__logos img {
        display: inline-block;
        vertical-align: middle;
        max-width: 48px;
        max-height: 100%;
    }

    .header__logos .brand-logo {
        max-width: 50%;
    }


.header__close {
    font-size: 16px;
}

.header__toolbar {
    padding: 0 50px;
}

    .header__toolbar .toolbar__col {
        border: none;
    }

.header__searchbox {
    max-width: 300px;
}

.header__searchbox_right {
    position: absolute;
    top: 0;
    right: 50px;
    width: 30%;
    max-width: none;
}

.header__sync {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    height: 50px;
    padding: 5px 13px 5px 5px;
}

.header__indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 8px;
    background: #ec4a41;
    transition: background 0.15s ease-in-out;
    will-change: transition;
}

    .header__indicator[data-state="active"] {
        background: #22B745;
    }

.header__search-for {
    padding: 0 10px;
    margin: -5px -5px -5px 0;
    height: 50px;
    color: inherit;
    background: none;
    font-family: 'Roboto Light', Arial, sans-serif;
    font-size: 16px;
}

    .header__search-for:active {
        color: inherit;
        background: rgba(0, 0, 0, 0.1);
        box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.2);
    }

.no-touch .header__search-for:active {
    color: inherit;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.2);
}

.onboarding_fieldset {
    padding: 20px 20px 28px;
    background: #fff;
}

    .onboarding_fieldset .form-group {
        position: relative;
        margin: 8px 0 0;
    }

    .onboarding_fieldset .form_label {
        display: inline-block;
        margin-bottom: 4px;
        font-size: 12px;
        line-height: 14px;
        color: #444444;
    }

    .onboarding_fieldset .form-control {
        font-size: 18px;
        border: 1px solid #eee;
        color: #444444;
    }

        .onboarding_fieldset .form-control.input {
            padding: 0 15px;
        }

    .onboarding_fieldset .dropdown__header {
        padding: 0 15px;
    }

    .onboarding_fieldset .form-group .btn {
        margin-top: 20px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 23px;
        background: #4cac51;
    }

    .onboarding_fieldset .dropdown__arrow {
        color: #444444;
    }

.order-list {
    *zoom: 1;
}

    .order-list:after {
        content: " ";
        display: table;
        clear: both;
    }

.order-item {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    *zoom: 1;
    transition: background 0.175s ease;
    will-change: auto;
}

    .order-item:after {
        content: " ";
        display: table;
        clear: both;
    }

    .order-item.is-open .order-item__container {
        -webkit-transform: translate3d(-60px, 0, 0);
        transform: translate3d(-60px, 0, 0);
    }

    .order-item.is-active, .order-item[data-state="active"],
    .order-item [data-state="active"] {
        background: #ecf7fd;
        pointer-events: none;
    }

        .order-item.is-active .order-item__notes a {
            color: inherit;
        }

.refund-mode .order-item.is-active, .refund-mode .order-item[data-state="active"], .refund-mode .order-item [data-state="active"] {
    background: #fce5e3;
}

.order-item[data-animation*="ripple"] {
    cursor: pointer;
}

    .order-item[data-animation*="ripple"] .ripple-circle {
        background: rgba(0, 0, 0, 0.05);
    }

    .order-item[data-animation*="ripple"]:active {
        background: #c7e7f9;
    }

.no-touch .order-item[data-animation*="ripple"]:active {
    background: #c7e7f9;
}

.order-item[data-animation*="ripple"].is-active:active {
    background: #c7e7f9;
}

.no-touch .order-item[data-animation*="ripple"].is-active:active {
    background: #c7e7f9;
}

.refund-mode .order-item[data-animation*="ripple"].is-active {
    background: #fce5e3;
}

.order-item_static {
    padding: 13px 0;
}

    .order-item_static .order-item__discount {
        color: #333;
        opacity: 0.5;
    }

    .order-item_static .order-item__quantity, .order-item_static .order-item__price, .order-item_static .order-item__total, .order-item_static .order-item__discount, .order-item_static .order-item__info, .order-item_static .order-item__meta {
        padding: 3px 0;
    }

.order-item__container {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: transform 0.185s ease-in-out;
    will-change: auto;
}

.is-touch .order-item__container[is-shell="true"] {
    padding-right: 30px;
    margin-right: -60px;
}

.order-item__close {
    position: absolute;
    top: 5px;
    right: 0;
    color: #ec4a41;
    background: none;
}

.is-touch .order-item__close[is-shell="true"] {
    top: 0;
    bottom: 0;
    width: 60px;
    color: #fff;
    background: #ec4a41;
}

.order-item__close .icon-close {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
}

.order-item__close + .order-item__content {
    padding-right: 50px;
}

.order-item__content {
    padding: 5px 20px;
    *zoom: 1;
}

    .order-item__content.is-selected {
        background: #c7e7f9;
    }

    .order-item__content:after {
        content: " ";
        display: table;
        clear: both;
    }

.is-touch .order-item__content {
    padding-right: 50px;
}

.order-item__row {
    float: left;
    width: 50%;
    *zoom: 1;
}

    .order-item__row:after {
        content: " ";
        display: table;
        clear: both;
    }

    .order-item__row .order-item_recomended,
    .table-body__td[data-column="order-item"] .order-item_recomended {
        background: #16B516;
        border-radius: 16px;
        width: fit-content;
        padding: 4px 16px;
        text-align: center;
        font-weight: 600;
        font-size: 0.65rem;
    }

    .order-item__row .order-item_recomended {
        margin-top: 8px;
    }

.table-body__td[data-column="order-item"] .order-item_recomended {
    margin-bottom: 8px;
}

.order-item__col {
    float: left;
    padding: 0 0 0 20px;
    text-align: right;
}

    .order-item__col:first-child {
        text-align: left;
    }

    .order-item__col.order-item__col__middle {
        width: 50%;
    }

    .order-item__col.order-item__col__small {
        width: 30%;
    }

    .order-item__col.order-item__col__large {
        width: 70%;
    }

.order-item__quantity, .order-item__price, .order-item__total, .order-item__discount, .order-item__info, .order-item__meta {
    padding: 12px 0;
}

.order-item__title, .order-item__quantity, .order-item__total {
    font-family: 'Roboto Regular', Arial, sans-serif;
}

.order-item__title, .order-item__col {
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.order-item__meta {
    clear: both;
    *zoom: 1;
}

    .order-item__meta:after {
        content: " ";
        display: table;
        clear: both;
    }

.order-item__meta-content {
    float: left;
}

.order-item__meta, .order-item__price {
    opacity: 0.5;
}

.order-item__meta, .order-item__price, .order-item__discount {
    font-size: 14px;
}

.order-item__discount {
    color: #ec4a41;
}

.order-item__tag {
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 40px;
    opacity: 0.3;
    background: url(images/tag.svg) no-repeat center center;
    background-size: 20px;
}

.order-item.order-item__header {
    font-size: 0;
}

    .order-item.order-item__header > div {
        display: inline-block;
        vertical-align: top;
        padding: 15px 0 15px 20px;
        width: 50%;
        font-size: 16px;
    }

        .order-item.order-item__header > div + div {
            border-left: 1px solid rgba(0, 0, 0, 0.1);
        }

.order-item__meta a,
.order-item__price a,
.order-item__discount a {
    display: inline-block;
    font-family: 'Roboto Regular', Arial, sans-serif;
    text-decoration: none;
}

.order-empty {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    color: #aaa;
    background: #f8f8f8;
    font-size: 0;
    text-align: center;
}

    .order-empty:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 100%;
    }

.order-empty__center {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

.order-empty__icon {
    display: block;
    margin: 0 auto;
    border: 2px dotted #cfcfcf;
    border-radius: 9px;
    width: 60px;
    height: 60px;
}

.order-empty h5 {
    font-size: 28px;
}

.order-empty p {
    font-size: 18px;
}

.quantity_description_serial_product {
    outline: none;
    font-size: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.is-hidden {
    display: none;
}

.totals {
    padding: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background: #d2edf6;
}

.totals__container {
    padding-top: 5px;
}

.totals-list {
    font-size: 14px;
    line-height: 16px;
    *zoom: 1;
}

    .totals-list:after {
        content: " ";
        display: table;
        clear: both;
    }

.totals-list_scroll {
    overflow: auto;
    /*padding-bottom: 5px;*/
    border-top: 1px solid #bde5f2;
    max-height: 72px;
}

.totals-list.total-due {
    border-top: none;
}

    .totals-list.total-due > li > .totals-list__value {
        padding: 0px;
        border-top: 1px solid;
    }

    .totals-list.total-due .totals-list__label {
        width: 50%;
        text-align: left;
    }

    .totals-list.total-due .totals-list__value {
        width: 50%;
    }

.totals-list__item_total_due {
    font-family: 'Roboto Medium', Arial, sans-serif;
}


.totals-list__item {
    position: relative;
    clear: both;
    color: #333;
    *zoom: 1;
}

    .totals-list__item:after {
        content: " ";
        display: table;
        clear: both;
    }

    .totals-list__item:not(:first-child) {
        padding-top: 1px;
    }

        .totals-list__item:not(:first-child):before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            border-top: 1px dashed #92d4e9;
            width: 100%;
            opacity: 0.3;
        }

    .totals-list__item a {
        color: #3888AD;
    }

.totals-list__label, .totals-list__value {
    float: left;
    padding: 3px 20px;
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.totals-list__value {
    text-align: right;
}

.totals__label {
    clear: both;
    color: #3888AD;
    font-size: 13px;
    font-style: italic;
    font-weight: bold;
    padding: 0 20px;
}

.categories {
    position: relative;
    padding-bottom: 30px;
}

.categories__container {
    padding: 5px 10px;
    font-size: 0;
}

.categories__item {
    display: inline-block;
    vertical-align: top;
    padding: 5px;
    width: 25%;
}

.categories__pagination {
    position: absolute;
    right: 15px;
    left: 15px;
    bottom: -6px;
}

.coupons__pagination {
    position: absolute;
    right: 15px;
    left: 5px;
    bottom: 20px;
}

.categories__pagination.hidden__peek .slick-arrow {
    visibility: hidden;
}

.coupons__pagination.hidden__peek .slick-arrow {
    visibility: hidden;
}

.products {
    position: relative;
    padding-bottom: 40px;
    height: 100%;
}

.products__container {
    overflow: auto;
    padding: 5px 10px;
    height: 100%;
    font-size: 0;
}

.products__slider,
.products__slider .slick-list,
.products__slider .slick-track {
    height: 100%;
}

.products__item {
    display: inline-block;
    vertical-align: top;
    padding: 5px;
    width: 25%;
    height: 33%;
    min-height: 62px;
}

    .products__item .item {
        height: 100%;
    }

.products__pagination {
    position: absolute;
    right: 15px;
    left: 15px;
    bottom: 5px;
}

.categories__pagination.hidden__peek .slick-arrow {
    visibility: hidden;
}

.coupons__pagination.hidden__peek .slick-arrow {
    visibility: hidden;
}

.products__pagination.hidden__peek .slick-arrow {
    visibility: hidden;
}

[data-slider-pagination] {
    padding: 0 50px;
    min-height: 40px;
    text-align: center;
}

    [data-slider-pagination] [data-slider-arrow] {
        position: absolute;
        top: 0;
        border-radius: 3px;
        background: #eee;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
        transition: color 0.05s ease-in-out, box-shadow 0.17s ease-in-out, background 0.05s ease-in-out;
        will-change: transition;
    }

        [data-slider-pagination] [data-slider-arrow]:hover {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        [data-slider-pagination] [data-slider-arrow]:active {
            color: #fff;
            background: #3888AD;
            box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
        }

    [data-slider-pagination] [data-slider-arrow="prev"] {
        left: 0;
    }

    [data-slider-pagination] [data-slider-arrow="next"] {
        right: 0;
    }

    [data-slider-pagination] .slick-dots {
        padding: 11px 0;
        font-size: 0;
    }

        [data-slider-pagination] .slick-dots li, [data-slider-pagination] .slick-dots button {
            display: inline-block;
            vertical-align: top;
        }

        [data-slider-pagination] .slick-dots li {
            padding: 3px;
        }

            [data-slider-pagination] .slick-dots li.slick-active button {
                background: #3888AD;
            }

        [data-slider-pagination] .slick-dots button {
            border-radius: 50%;
            width: 12px;
            height: 12px;
            background: #eee;
            font-size: 0;
            transition: box-shadow 0.17s ease-in-out, background 0.17s ease-in-out;
            will-change: transition;
        }

            [data-slider-pagination] .slick-dots button:hover {
                box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
            }

            [data-slider-pagination] .slick-dots button:active {
                box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
            }

.horizontal-menu {
    *zoom: 1;
}

    .horizontal-menu:after {
        content: " ";
        display: table;
        clear: both;
    }

.horizontal-menu__container {
    display: table;
    table-layout: fixed;
    width: 100%;
    background: #fff;
}

.horizontal-menu__list {
    display: flex;
    flex-wrap: wrap;
}

.horizontal-menu__item {
    position: relative;
    width: 33.3%;
    text-align: center;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.horizontal-menu__link {
    display: block;
    color: #333;
    font-size: 14px;
    line-height: 60px;
    text-decoration: none;
    transition: color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
    background: transparent;
    will-change: transition;
}

.horizontal-menu__item_inner {
    outline: 1px solid #E5E5E5;
    background: white;
    margin: 2px;
    box-shadow: 0px 12px 12px rgba(0, 0, 0, 0.1);
}


background: white;
}

.horizontal-menu__link:hover {
    background: #f8f8f8;
}

.horizontal-menu__link:active {
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.horizontal-menu__link.is-disabled {
    color: #aaa;
    background: #f8f8f8;
    cursor: default;
    pointer-events: none;
}

    .horizontal-menu__link.is-disabled:hover {
        color: #aaa;
        background: #f8f8f8;
        cursor: default;
        pointer-events: none;
    }

    .horizontal-menu__link.is-disabled[data-animation*="ripple"] .ripple-circle {
        visibility: hidden;
    }

.horizontal-menu__link[data-animation*="ripple"] .ripple-circle {
    animation-duration: 0.5s;
}

.horizontal-menu__link .icon {
    vertical-align: top;
    width: 16px;
    opacity: 0.5;
    line-height: 60px;
}

.form-box {
    border: 2px solid #eee;
}

    .form-box.is-focus {
        border-color: #3888AD;
    }

.form-box__field + .form-box__field {
    margin-top: 1px;
}

.form-box__field {
    position: relative;
    min-height: 54px;
    background: #fff;
}

.form-box__label {
    display: block;
    padding: 21px 80px 21px 20px;
    font-size: 14px;
    line-height: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.form-box__switcher {
    position: absolute;
    top: 13px;
    right: 20px;
}

.form-box__payment {
    padding: 18px 20px;
    background: #fff;
    *zoom: 1;
}

    .form-box__payment:after {
        content: " ";
        display: table;
        clear: both;
    }

    .form-box__payment li {
        float: left;
        width: 50%;
    }

        .form-box__payment li + li {
            text-align: right;
        }

.sm-box {
    position: relative;
    height: 59px;
    padding: 10px;
    border-radius: 2px;
    color: #333;
    background: #eee;
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: left;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: box-shadow 0.17s ease-in-out, background 0.17s ease-in-out, color 0.17s ease-in-out;
    will-change: transition;
}

.is-poynt .sm-box {
    border: 1px solid rgba(0,0,0,0.2) !important;
    box-shadow: none !important;
    transition: none !important;
}

.sm-box:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.sm-box:active {
    box-shadow: none;
}

.sm-box.is-active {
    color: var(--white);
    background: #3888AD !important;
}

.sm-box__icon {
    position: absolute;
    top: 50%;
    right: 0;
    opacity: 1;
    transition: opacity 0.17s ease-in-out;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    will-change: auto;
}

.sm-box__title, .sm-box__description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sm-box__title {
    position: relative;
    top: 50%;
    font-size: 20px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.sm-box__title_up {
    top: 30%;
}

.sm-box.is-active .sm-box__title {
    padding-right: 1.5em;
}

.sm-box__description {
    opacity: 0.5;
    font-size: 13px;
}

.item {
    position: relative;
    overflow: hidden;
    padding: 10px;
    border-radius: 2px;
    min-height: 50px;
    color: #333;
    background: #eee;
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: left;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: box-shadow 0.17s ease-in-out, background 0.17s ease-in-out, color 0.17s ease-in-out;
    will-change: transition;
}

.is-poynt .item {
    border: 1px solid rgba(0,0,0,0.2) !important;
    box-shadow: none !important;
    transition: none !important;
}

.item:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.item:active {
    box-shadow: none;
}

.item.is-active {
    color: #fff;
    background: #3888AD !important;
}

.item .ripple-circle {
    background: rgba(0, 0, 0, 0.1);
}

.item__img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.item__title, .item__description, .item__code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item__title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px 10px;
    background: #fff;
    font-size: 16px;
    line-height: 1.25;
}

.item__price {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 5px;
    background: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1;
}

.item__code {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -25px;
    font-size: 30px;
    text-align: center;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabs {
    position: relative;
    padding-top: 60px;
    height: 100%;
    color: #333;
    background: #f8f8f8;
}

.tabs_lg .tabs__btn {
    font-size: 16px;
}

.tabs_ph_act_lg {
    display: block;
    padding: 10px 25px;
    font-size: 20px;
    font-weight: bold;
}

.tabs__controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
}

.tabs__list {
    display: table-row;
}

.tabs__item {
    display: table-cell;
    vertical-align: top;
    width: 130px;
}

    .tabs__item:not(:last-child) {
        border-right: 2px solid rgba(0, 0, 0, 0.1);
    }

    .tabs__item.is-hidden {
        visibility: hidden;
    }

.tabs__btn {
    display: block;
    padding: 20px 10px;
    color: inherit;
    background: #eee;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
}

    .tabs__btn.is-active {
        background: #f8f8f8;
    }

    .tabs__btn.is-disabled {
        color: rgba(0, 0, 0, 0.3);
        pointer-events: none;
    }

.tabs__container {
    height: 100%;
    background: #f8f8f8;
}

.tabs__content {
    display: none;
    overflow: auto;
    padding: 20px 20px 0;
    height: 100%;
    font-size: 0;
}

    .tabs__content:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 100%;
    }

    .tabs__content.is-open {
        display: block;
    }

/*.tabs__keyboard {
    padding: 4% 0;
}*/

.tabs__keyboard, .tabs__notes, .tabs__info {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    text-align: left;
}

.tabs__keyboard, .tabs__notes {
    max-width: 460px;
}

.tabs__info {
    height: 100%;
}

.tabs__notes .fieldset {
    margin-bottom: 20px;
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
}

    .slick-list:focus {
        outline: none;
    }

    .slick-list.dragging {
        cursor: pointer;
        cursor: hand;
    }

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
}

    .slick-track:before, .slick-track:after {
        content: "";
        display: table;
    }

    .slick-track:after {
        clear: both;
    }

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none;
}

[dir="rtl"] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.loader {
    position: absolute;
    z-index: 499;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-size: 0;
}

    .loader:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 100%;
    }

.loader_products {
    /*top: 238px;*/
}

.loader_fullscreen {
    position: fixed;
}

.loader .loader__icon {
    display: inline-block;
    vertical-align: middle;
}

.sm-grid {
    position: relative;
    padding-bottom: 70px;
}

.sm-grid_full {
    padding-bottom: 0;
    vertical-align: top;
}

.sm-grid_space-md .sm-grid__row {
    margin: 0 -10px;
}

.sm-grid_space-md .sm-grid__col {
    padding: 10px;
}

.sm-grid__body {
    overflow: auto;
    padding: 5px 20px 10px;
    height: 100%;
}

.sm-grid__body_zeropadding {
    overflow: auto;
    height: 100%;
}

.sm-grid__footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.sm-grid__row {
    margin: 0 -5px;
    font-size: 0;
    *zoom: 1;
}

    .sm-grid__row:after {
        content: " ";
        display: table;
        clear: both;
    }

.sm-grid__row_steps .sm-grid__col {
    padding-right: 15px;
}

.sm-grid__col {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 5px;
    width: 100%;
}

.sm-grid__col_xl {
    width: 75%;
}

.sm-grid__col_lg {
    width: 66.66%;
}

.sm-grid__col_md {
    width: 50%;
}


@media (min-width: 1366px) {
    .sm-grid__col_sm {
        width: 33.33%;
    }
}

@media only screen and (max-width: 1366px) {
    .sm-grid__col_sm {
        width: 49.33%;
    }
}

.sm-grid__col_xs {
    width: 25%;
}

.sm-grid__col:last-child .sm-grid__icon {
    display: none;
}

.sm-grid__title {
    margin: 5px 0 0;
}

.sm-grid__footer {
    text-align: center;
}

.sm-grid__btn {
    margin: 0 auto;
    max-width: 300px;
    text-transform: uppercase;
}

.sm-grid__icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: -10px;
    margin-top: -15px;
    border: 1px solid #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background: #eee;
    line-height: 30px;
}

.sm-grid p {
    padding: 0 5px;
    font-size: 14px;
}

.sm-card {
    color: #333;
}

.sm-card_lg .sm-card__title {
    font-size: 17px;
}

.sm-card_lg .sm-card__sticker {
    font-size: 17px;
}

.sm-card__label {
    position: relative;
    display: block;
}

.sm-card input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}

    .sm-card input:checked + .sm-card__content {
        background: #f0e68c;
    }

        .sm-card input:checked + .sm-card__content .sm-card__icon {
            opacity: 1;
        }

    .sm-card input:disabled + .sm-card__content {
        opacity: 0.5;
        background: #eee;
        cursor: default;
        pointer-events: none;
    }

.sm-card__content {
    display: block;
    overflow: hidden;
    padding: 40px 20px 20px;
    color: #333;
    background: #eee;
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;
    will-change: auto;
}

.no-touch .sm-card__content:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.sm-card__content:active {
    box-shadow: none;
}

.sm-card__sticker {
    position: absolute;
    top: 0;
    right: 0;
    white-space: nowrap;
    padding: 5px 5px 5px 10px;
    background: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sm-card__title {
    display: block;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sm-card__icon {
    position: absolute;
    top: 0;
    left: 10px;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
    will-change: transition;
}

.simple-card {
    color: #333;
}

.simple-card__label {
    position: relative;
    display: block;
}

.simple-card input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}

    .simple-card input:checked + .simple-card__content {
        background: #f0e68c;
    }

    .simple-card input:disabled + .simple-card__content {
        opacity: 0.5;
        background: #eee;
        cursor: default;
        pointer-events: none;
    }

.simple-card.is-active .simple-card__content {
    background: #f0e68c;
}

.simple-card.is-disabled .simple-card__content {
    opacity: 0.5;
    background: #eee;
    cursor: default;
    pointer-events: none;
}

.simple-card__content {
    display: block;
    overflow: hidden;
    padding: 20px 20px 20px;
    min-height: 76px;
    color: #333;
    background: #eee;
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;
    will-change: auto;
}

.no-touch .simple-card__content:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.main-keyboard {
    position: relative;
    padding: 0 0 1px 1px;
    margin: -1px 0 -1px -1px;
    background: #eee;
    font-size: 61px;
}

.main-keyboard__container {
    position: relative;
    width: 100%;
    transform: translate3d(0, 0, 0);
    *zoom: 1;
}

    .main-keyboard__container:after {
        content: " ";
        display: table;
        clear: both;
    }

.main-keyboard__main {
    float: left;
    width: 100%;
    *zoom: 1;
}

    .main-keyboard__main:after {
        content: " ";
        display: table;
        clear: both;
    }

.main-keyboard__aside {
    position: absolute;
    top: 0;
    left: 100%;
    bottom: -1px;
    padding-bottom: 1px;
    width: 25%;
    background: #eee;
    *zoom: 1;
}

    .main-keyboard__aside:after {
        content: " ";
        display: table;
        clear: both;
    }

.main-keyboard__aside-item {
    padding: 1px 1px 0 0;
    height: 25%;
}

.main-keyboard__item {
    float: left;
    padding: 1px 1px 0 0;
    width: 33.33333%;
    height: 1em;
}

.main-keyboard__button {
    display: block;
    width: 100%;
    height: 100%;
    color: #333;
    background: #fff;
    font-family: 'Roboto Regular', Arial, sans-serif;
    font-size: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background 0.175s ease;
    will-change: auto;
}

    .main-keyboard__button:active {
        color: inherit;
    }

.no-touch .main-keyboard__button:active {
    color: inherit;
}

.main-keyboard__button .icon {
    font-size: 30px;
}

.main-keyboard__submit {
    color: #fff;
    background: #22B745;
}

    .main-keyboard__submit:active {
        color: #fff;
        background: #4cac51;
    }

.no-touch .main-keyboard__submit:active {
    color: #fff;
    background: #4cac51;
}

.main-keyboard__col {
    padding-top: 1px;
    height: 1em;
}

    .main-keyboard__col[data-colspan*="3"] {
        height: 3em;
        line-height: 3em;
    }

    .main-keyboard__col[data-colspan*="2"] {
        height: 2em;
        line-height: 2em;
    }

.main-keyboard__shortcuts {
    *zoom: 1;
}

    .main-keyboard__shortcuts:after {
        content: " ";
        display: table;
        clear: both;
    }

.main-keyboard__shortcuts-button {
    display: block;
    width: 100%;
    height: 100%;
    color: #3888AD;
    background: #ecf7fd;
    font-family: 'Roboto Regular', Arial, sans-serif;
    font-size: 20px;
}

    .main-keyboard__shortcuts-button.main-keyboard__shortcuts-button_red {
        color: #fff;
        background: #fd8e8c;
    }

    .main-keyboard__shortcuts-button[data-animation*="ripple"] .ripple-circle {
        background: rgba(46, 153, 219, 0.1);
    }

.main-keyboard [data-animation*="ripple"] .ripple-circle {
    animation-duration: 0.5s;
}

.main-keyboard__display {
    position: relative;
    padding: 1px 41px 1px 0;
}

.main-keyboard__clear {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 60px;
    background: #fff;
}

    .main-keyboard__clear:active .icon {
        opacity: 0.7;
    }

.no-touch .main-keyboard__clear:active .icon {
    opacity: 0.7;
}

.main-keyboard__clear .icon {
    opacity: 0.5;
    font-size: 30px;
    transition: opacity 0.1s ease-in-out;
    will-change: auto;
}

.main-keyboard__card-row {
    margin: 0 1px 0 -1px;
    font-size: 0;
    *zoom: 1;
}

    .main-keyboard__card-row:after {
        content: " ";
        display: table;
        clear: both;
    }

.main-keyboard__card-col {
    position: relative;
    float: left;
    padding-left: 1px;
    width: 100%;
}

.main-keyboard__card-col_sm {
    width: 33.2%;
}

.main-keyboard__card-col_lg {
    width: 66.8%;
}

.main-keyboard__card-col.is-active:before {
    opacity: 1;
    visibility: visible;
}

.main-keyboard__card-col:before {
    content: '';
    position: absolute;
    top: 0;
    left: 1px;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    box-shadow: inset 0 0 0 2px #3888AD;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    will-change: transition;
}

.main-keyboard__card-input {
    padding: 0 20px;
    width: 100%;
}

.simple-card__content:active {
    box-shadow: none;
}

.simple-card__title {
    display: block;
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.simple-card__description {
    opacity: 0.5;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-serial {
    color: #333;
}

.card-serial__label {
    position: relative;
    display: block;
}

.card-serial input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}

    .card-serial input:checked + .card-serial__content {
        background: #f0e68c;
    }

    .card-serial input:disabled + .card-serial__content {
        opacity: 0.5;
        background: #eee;
        cursor: default;
        pointer-events: none;
    }

.card-serial__content {
    display: block;
    overflow: hidden;
    padding: 20px 20px 20px;
    color: #333;
    background: #eee;
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;
    will-change: auto;
}

.no-touch .card-serial__content:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.card-serial__content:active {
    box-shadow: none;
}

.card-serial__title {
    display: block;
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.infoblock {
    position: relative;
}

.is-poynt .infoblock_collapsed {
    padding-right: 70px;
}

.infoblock__row {
    padding: 20px 0;
    *zoom: 1;
}

    .infoblock__row:after {
        content: " ";
        display: table;
        clear: both;
    }

.infoblock__col {
    position: relative;
    /*float: left;*/
    padding: 5px 20px;
    width: 100%;
}

.infoblock__col_md {
    float: left;
    width: 50%;
}

.infoblock__box {
    position: relative;
    padding: 5px 0;
}

.infoblock__label, .infoblock__value {
    display: block;
    font-style: normal;
}

.infoblock__label {
    font-size: 12px;
    color: #aaa;
}

    .infoblock__label::after {
        content: ':';
    }

.infoblock__value {
    font-size: 16px;
    word-break: break-word;
}

.infoblock__icon {
    position: absolute;
    top: 5px;
    right: 20px;
}

    .infoblock__icon ~ .infoblock__label,
    .infoblock__icon ~ .infoblock__value {
        padding-right: 50px;
    }

.infoblock__dropdown {
    margin: 0 -20px;
}

.infoblock__open {
    position: absolute;
    z-index: 2;
    bottom: -25px;
    right: 15px;
    display: none;
}

.is-poynt .infoblock__open {
    display: block;
}

.infotable {
    padding: 20px;
}

.infotable__row {
    *zoom: 1;
}

    .infotable__row:after {
        content: " ";
        display: table;
        clear: both;
    }

    .infotable__row:not(:first-child) {
        border-top: 1px solid #eee;
    }

.infotable__label, .infotable__value {
    float: left;
    padding: 10px;
    width: 50%;
    font-size: 14px;
}

    .infotable__label small, .infotable__value small {
        font-size: inherit;
    }

    .infotable__label strong {
        text-transform: uppercase;
    }

.infotable__value {
    text-align: right;
}

.infotable__big {
    font-size: 17px;
}

.infotable__disabled {
    opacity: 0.5;
}

.info-price__label {
    display: block;
    color: #515151;
    font-size: 14px;
}

.info-price__value {
    font-family: 'Roboto Regular', Arial, sans-serif;
    line-height: 1;
}

    .info-price__value small,
    .info-price__value span {
        display: inline-block;
        vertical-align: bottom;
    }

    .info-price__value small {
        padding: 1px 0;
        font-size: 19px;
    }

    .info-price__value span {
        font-size: 29px;
    }

.info-price__value_blue {
    color: #3888AD;
}

.infoblock_inline .infoblock__col:after {
    content: '';
    display: block;
    clear: both;
}

.infoblock_inline .infoblock__col:not(:first-child):before {
    content: '';
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    border-top: 1px solid #eee;
}

.infoblock_inline .infoblock__label,
.infoblock_inline .infoblock__value {
    float: left;
}

.infoblock_inline .infoblock__label {
    padding: 2px 0;
    width: 30%;
    text-align: left;
}

.infoblock_inline .infoblock__value {
    padding: 2px 0 1px;
    width: 70%;
    font-size: 13px;
    text-align: right;
}

.orders__container {
    position: relative;
    padding-top: 50px;
    height: 100%;
}

.orders .orders__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.orders__body {
    position: relative;
    padding: 60px 0 80px;
    height: 100%;
}

.orders__toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    *zoom: 1;
}

    .orders__toolbar:after {
        content: " ";
        display: table;
        clear: both;
    }

.orders__toolbar-left {
    float: left;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.orders__toolbar-right {
    float: right;
}

.orders__toolbar-right, .orders__toolbar-left {
    width: 50%;
    max-width: 500px;
}

.orders__content {
    height: 100%;
}

.orders__footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    background: #f8f8f8;
    text-align: center;
}

.orders__action {
    font-size: 0;
    text-align: right;
}

.orders-buttons {
    font-size: 0;
    white-space: nowrap;
}

.orders-buttons__item {
    display: inline-block;
    vertical-align: top;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    width: 33.33%;
}

.orders-buttons .btn {
    width: 100%;
}

.order .order__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.order__sidebar, .order__container {
    position: relative;
    padding-top: 50px;
    height: 100%;
}

.order__sidebar {
    float: left;
    width: 300px;
}

.order__container {
    margin-left: 300px;
    box-shadow: 3px 0 4px 5px rgba(0, 0, 0, 0.2);
}

.order__info {
    overflow: auto;
    height: 100%;
}

.order__edit {
    position: relative;
    z-index: 2;
    float: right;
    margin: 20px;
    min-width: 80px;
}

.order__body {
    height: 100%;
}

.order__content {
    height: 85%;
}

    .order__content.has-header {
        height: 77%;
    }


.order_content_header {
    height: 8%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin: 4px 0px;
}

    .order_content_header .content_header_buttons {
        position: relative;
        font-size: 0;
        text-align: center;
    }

.order__footer {
    box-shadow: inset 0 6px 4px -5px rgba(0, 0, 0, 0.2);
    height: 15%;
}

.order__buttons {
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-flow: wrap;
}

    .order__buttons .btn {
        padding-left: 20px;
        padding-right: 20px;
        margin: 4px;
    }

.order__done {
    margin: 0 auto;
    max-width: 300px;
}

    .order__done .btn {
        margin: 0;
    }

.order__showmore {
    /*float: left;*/
}

    .order__showmore .btn {
        /*margin: 0 20px 0 0;*/
        min-width: 80px;
    }

.order-totals {
    height: 110px;
    *zoom: 1;
}

    .order-totals:after {
        content: " ";
        display: table;
        clear: both;
    }

.order-totals__table {
    float: right;
    padding-right: 7%;
    width: 41%;
}

.order-totals__tr {
    font-size: 0;
    text-align: right;
}

    .order-totals__tr:not(:first-child) {
        border-top: 1px solid #eee;
    }

.order-totals__td {
    display: inline-block;
    vertical-align: middle;
    padding: 11px 10px;
    width: 50%;
    font-size: 14px;
    line-height: 1;
}

.order-totals__label {
    opacity: 0.5;
}

.order-totals__value em {
    font-family: 'Roboto Bold', Arial, sans-serif;
}

.order-notes {
    position: relative;
    float: left;
}

.order-notes__icon {
    position: absolute;
    top: -10px;
    left: -10px;
}

.order-notes__content {
    padding-left: 30px;
    margin: 2px 0;
}

.table-wrapper {
    position: relative;
    overflow: hidden;
    padding: 37px 0 61px;
    height: 100%;
}

.table-wrapper_no-footer {
    padding-bottom: 0;
}

.table-wrapper_header-lg {
    padding-top: 51px;
}

    .table-wrapper_header-lg .table-wrapper__header {
        height: 51px;
    }

.table-wrapper__header {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    height: 37px;
}

    .table-wrapper__header:before {
        content: '';
        position: absolute;
        top: 0;
        left: 100%;
        bottom: 0;
        border-bottom: 1px solid #aaa;
        width: 30px;
        opacity: 0;
        background: #eee;
        margin-left: -10px;
    }

.table-wrapper__footer {
    position: relative;
    z-index: 2;
    margin-bottom: -61px;
    height: 61px;
    background: #f8f8f8;
}

.table-wrapper__body {
    overflow: auto;
    max-height: 100%;
}

.table-wrapper__value, .table-wrapper__meta {
    position: relative;
    word-break: break-word;
}

.table-wrapper__meta {
    opacity: 0.5;
}

.table-wrapper__from {
    padding-left: 10px;
}

.table-body__tr.refunded-item .table-wrapper__value {
    text-decoration: underline;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .table-body__tr.refunded-item .table-wrapper__value:after {
        content: '';
        position: absolute;
        margin: 5px 0 0 5px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 4px 0 4px 6px;
        border-color: transparent transparent transparent #ec4a41;
        transition: transform .2s;
        will-change: transition;
    }

    .table-body__tr.refunded-item .table-wrapper__value.is-active:after {
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

.table-wrapper[data-table="terminal"] [data-table-fake],
.table-wrapper[data-table="terminal"] [data-table-scrollable] > div {
    /*min-width: 980px;*/
    min-width: 100%;
}

/*.table-wrapper[data-table="orders"] [data-table-fake],
.table-wrapper[data-table="orders"] [data-table-scrollable] > div {
    min-width: 1200px;
}*/

.table-header,
.table-body {
    display: table;
    table-layout: fixed;
    width: 100%;
    font-size: 14px;
}

.table-header__tr,
.table-body__tr {
    display: table-row;
}

.table-header__th, .table-header__td,
.table-body__th,
.table-body__td {
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
}

    .table-header__th:first-child, .table-header__td:first-child,
    .table-body__th:first-child,
    .table-body__td:first-child {
        padding-left: 20px;
    }

    .table-header__th[data-column="icon"], .table-header__td[data-column="icon"],
    .table-body__th[data-column="icon"],
    .table-body__td[data-column="icon"] {
        min-width: 60px;
    }

    .table-header__th[data-column="orders-tips-tips"], .table-header__td[data-column="orders-tips-tips"],
    .table-body__th[data-column="orders-tips-tips"],
    .table-body__td[data-column="orders-tips-tips"] {
        width: 7%;
    }

    .table-header__th[data-column="orders-status"], .table-header__th[data-column="orders-tips-status"], .table-header__td[data-column="orders-status"], .table-header__td[data-column="orders-tips-status"],
    .table-body__th[data-column="orders-status"],
    .table-body__th[data-column="orders-tips-status"],
    .table-body__td[data-column="orders-status"],
    .table-body__td[data-column="orders-tips-status"] {
        width: 70px;
    }

    .table-header__th[data-column="orders-action"], .table-header__td[data-column="orders-action"],
    .table-body__th[data-column="orders-action"],
    .table-body__td[data-column="orders-action"] {
        width: 110px;
    }

    .table-header__th[data-column="orders-action"],
    .table-header__td[data-column="orders-action"],
    .table-body__th[data-column="orders-action"],
    .table-body__td[data-column="orders-action"] {
        text-align: right;
    }

    .table-header__th[data-column="orders-id"], .table-header__td[data-column="orders-id"],
    .table-body__th[data-column="orders-id"],
    .table-body__td[data-column="orders-id"] {
        width: 11%;
    }

    .table-header__th[data-column="orders-type"], .table-header__th[data-column="orders-date"], .table-header__th[data-column="orders-tips-register"], .table-header__th[data-column="orders-tips-refnum"], .table-header__th[data-column="orders-tips-type"], .table-header__th[data-column="orders-tips-price"], .table-header__th[data-column="orders-tips-date"], .table-header__th[data-column="orders-total"], .table-header__th[data-column="orders-customer"], .table-header__td[data-column="orders-type"], .table-header__td[data-column="orders-date"], .table-header__td[data-column="orders-tips-register"], .table-header__td[data-column="orders-tips-refnum"], .table-header__td[data-column="orders-tips-type"], .table-header__td[data-column="orders-tips-price"], .table-header__td[data-column="orders-tips-date"], .table-header__td[data-column="orders-total"], .table-header__td[data-column="orders-customer"],
    .table-body__th[data-column="orders-type"],
    .table-body__th[data-column="orders-date"],
    .table-body__th[data-column="orders-tips-register"],
    .table-body__th[data-column="orders-tips-refnum"],
    .table-body__th[data-column="orders-tips-type"],
    .table-body__th[data-column="orders-tips-price"],
    .table-body__th[data-column="orders-tips-date"],
    .table-body__th[data-column="orders-total"],
    .table-body__th[data-column="orders-customer"],
    .table-body__td[data-column="orders-type"],
    .table-body__td[data-column="orders-date"],
    .table-body__td[data-column="orders-tips-register"],
    .table-body__td[data-column="orders-tips-refnum"],
    .table-body__td[data-column="orders-tips-type"],
    .table-body__td[data-column="orders-tips-price"],
    .table-body__td[data-column="orders-tips-date"],
    .table-body__td[data-column="orders-total"],
    .table-body__td[data-column="orders-customer"] {
        width: 8%;
    }

    .table-header__th[data-column="orders-source"],
    .table-body__th[data-column="orders-source"],
    .table-body__td[data-column="orders-source"],
    .table-header__td[data-column="orders-source"] {
        width: 9%;
    }

    .table-header__th[data-column="orders-name"],
    .table-body__th[data-column="orders-name"],
    .table-body__td[data-column="orders-name"],
    .table-header__td[data-column="orders-name"] {
        width: 9%;
    }

    .table-header__th[data-column="orders-register"],
    .table-body__th[data-column="orders-register"],
    .table-body__td[data-column="orders-register"],
    .table-header__td[data-column="orders-register"] {
        width: 7%;
    }

    .table-header__th[data-column="orders-store"],
    .table-header__th[data-column="orders-employee"],
    .table-header__th[data-column="orders-approvedby"],
    .table-header__th[data-column="orders-tips-store"],
    .table-header__th[data-column="orders-tips-employee"],
    .table-header__td[data-column="orders-store"],
    .table-header__td[data-column="orders-employee"],
    .table-header__td[data-column="orders-approvedby"],
    .table-header__td[data-column="orders-tips-store"],
    .table-header__td[data-column="orders-tips-employee"],
    .table-body__th[data-column="orders-store"],
    .table-body__th[data-column="orders-employee"],
    .table-body__th[data-column="orders-approvedby"],
    .table-body__th[data-column="orders-tips-store"],
    .table-body__th[data-column="orders-tips-employee"],
    .table-body__td[data-column="orders-store"],
    .table-body__td[data-column="orders-employee"],
    .table-body__td[data-column="orders-approvedby"],
    .table-body__td[data-column="orders-tips-store"],
    .table-body__td[data-column="orders-tips-employee"] {
        width: 10%;
    }

    .table-header__th[data-column="orders-tips-order"], .table-header__td[data-column="orders-tips-order"],
    .table-body__th[data-column="orders-tips-order"],
    .table-body__td[data-column="orders-tips-order"] {
        width: 15%;
    }

    .table-body__td[data-column="order-item"] {
        word-break: break-word;
    }

.table-header__th,
.table-body__th {
    font-family: 'Roboto Medium', Arial, sans-serif;
}

.table-header {
    border-bottom: 1px solid #aaa;
    background: #eee;
}

.table-body_orders .table-body__tr:nth-child(even) {
    background: #fff;
    transition: background 0.1s ease-in-out;
    will-change: transition;
}

.no-touch .table-body_orders .table-body__tr:hover {
    background: #ecf7fd;
    cursor: pointer;
}

.table-body_orders .table-body__tr:active {
    background: #c7e7f9;
}

.no-touch .table-body_orders .table-body__tr:active {
    background: #c7e7f9;
}

.table-body_orders .table-body__td {
    padding-top: 5px;
    padding-bottom: 5px;
}

.table-body_order .table-body__tr:nth-child(even) {
    background: #fff;
}

.table-body__tr:not(:first-child) .table-body__td {
    border-top: 1px solid #eee;
}

.table-body__tr .input {
    width: 100%;
    padding: 0 4px;
}

.table-footer {
    padding: 10px 20px;
    border-top: 1px solid #eee;
}

*::-webkit-scrollbar:vertical {
    width: 7px;
    background: linear-gradient(to right, transparent 3px, #b9dff6 3px, #b9dff6 4px, transparent 4px);
}

*::-webkit-scrollbar:horizontal {
    height: 7px;
    background: linear-gradient(to bottom, transparent 3px, #b9dff6 3px, #b9dff6 4px, transparent 4px);
}

[data-scrollbar="rounded"]::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: initial !important;
}

[data-scrollbar="rounded"]::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: #3888AD;
}

.no-touch *::-webkit-scrollbar-thumb:hover,
.no-touch [data-scrollbar="rounded"]::-webkit-scrollbar-thumb:hover {
    background: #2183bf;
}

[data-scrollbar="rounded"]::-webkit-scrollbar:vertical {
    width: 12px;
    background: linear-gradient(to right, transparent 5px, #b9dff6 5px, #b9dff6 6px, transparent 6px);
}

[data-scrollbar="rounded"]::-webkit-scrollbar:horizontal {
    height: 12px;
    background: linear-gradient(to bottom, transparent 5px, #b9dff6 5px, #b9dff6 6px, transparent 6px);
}

[data-scrollbar="rounded"]::-webkit-scrollbar-thumb {
    border-radius: 6px;
}

.hiddenScroll [data-scrollbar="rounded"]::-webkit-scrollbar-thumb,
.hiddenScroll *::-webkit-scrollbar-thumb {
    background: transparent;
}


.modal {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    background: rgba(67, 76, 85, 0.8);
    text-align: center;
    font-size: 0;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
    will-change: auto;
}

    .modal.is-open {
        opacity: 1;
        visibility: visible;
    }

    .modal:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 100%;
    }

.modal__container {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.2);
}

.order-receipt__container {
    max-width: 500px;
    background: #fff;
    text-align: center;
}

.order-receipt__header {
    position: relative;
    padding: 20px;
    color: var(--white);
    background: var(--secondary-action-color);
}

.order-receipt__close {
    position: absolute;
    top: 5px;
    right: 5px;
}

.order-receipt__title {
    margin: 20px 0 10px;
    font-family: 'Roboto Medium', Arial, sans-serif;
    font-size: 24px;
    line-height: 1.2;
}

.order-receipt__body {
    padding: 20px;
    text-align: left;
}

.order-receipt__field {
    padding: 10px 0;
}

    .order-receipt__field .field__label::after {
        content: '';
    }

.order-receipt__checkbox {
    padding: 10px 20px 25px;
}

.order-receipt__footer {
    padding: 20px;
    border-top: solid 1px #bdc3c7;
}

.add-terminal__container {
    max-width: 500px;
    background: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 101;
}

.add-terminal__header {
    position: relative;
    padding: 13px 20px;
    color: #fff;
    background: #3888AD;
    text-align: left;
}

.add-terminal__title {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
}

.add-terminal__body {
    padding: 20px;
    text-align: left;
}

.add-terminal__field {
    padding: 10px 0;
}

.add-terminal__input {
    text-align: right;
}

.add-terminal__close {
    position: absolute;
    top: 5px;
    right: 5px;
}

.modal-terms {
    position: fixed;
    z-index: 4000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px 0;
    color: #4b5262;
    background: rgba(0, 0, 0, 0.3);
    font-family: 'OpenSans Regular', 'Roboto', Arial, sans-serif;
}

.modal-terms__container {
    position: relative;
    padding: 106px 0 80px;
    margin: 0 auto;
    max-width: 870px;
    height: 100%;
    background: #fff;
    text-align: left;
}

.modal-terms__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 40px 70px 40px 25px;
    min-height: 70px;
}

.modal-terms__close {
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: 70px;
    background: none;
}

    .modal-terms__close .icon {
        color: #ec4a41;
        font-size: 36px;
    }

.modal-terms__title {
    margin: 0;
    text-transform: uppercase;
}

.modal-terms__footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 25px;
    background: #f8f8f8;
    *zoom: 1;
}

    .modal-terms__footer:after {
        content: " ";
        display: table;
        clear: both;
    }

.modal-terms__agreement {
    overflow: hidden;
    padding: 15px 0;
}

.modal-terms__submit {
    float: right;
    padding: 0 32px;
}

.modal-terms__body-wrapper {
    height: 100%;
}

.modal-terms__body {
    overflow: auto;
    padding: 20px 25px;
    max-height: 100%;
    font-size: 14px;
    line-height: 18px;
}

    .modal-terms__body p {
        margin: 15px 0 0;
    }

    .modal-terms__body em {
        text-decoration: underline;
    }

    .modal-terms__body span {
        display: inline-block;
        vertical-align: top;
        margin-right: 10px;
    }

    .modal-terms__body strong {
        text-transform: uppercase;
    }

    .modal-terms__body a {
        color: #3888AD;
        text-decoration: underline;
    }

.no-touch .modal-terms__body a:hover {
    color: #2183bf;
    text-decoration: none;
}

.modal-terms__subtitle {
    font-family: 'OpenSans Bold', 'Roboto Bold', Arial, sans-serif;
    line-height: 20px;
    text-align: center;
}

.modal-terms__copyright {
    margin-top: 40px;
}

.payment-terminal__body {
    margin: 20px 0px;
}

.payment-terminal__container {
    max-width: 500px;
    background: #fff;
}

.payment-terminal__vertical {
    min-height: 300px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0;
}

    .payment-terminal__vertical:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 100%;
    }

.payment-terminal__center {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    font-family: 'Roboto Regular', Arial, sans-serif;
    font-size: 14px;
}

    .payment-terminal__center p {
        padding: 10px 20px;
        margin: 0;
    }

.payment-terminal__icon {
    font-size: 100px;
}

.payment-methods {
    overflow: auto;
    padding: 35px 0 0;
    max-height: 100%;
}

.payment-top {
    padding: 0 20px;
}

.payment-field {
    padding: 20px 0 0;
}

.payment-fieldset {
    margin-top: -2px;
}

.payment-card {
    display: block;
    overflow: hidden;
    padding-bottom: 20px;
    border-radius: 2px;
    color: #656565;
    background: lightblue;
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;
    will-change: auto;
}

.no-touch .payment-card:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.payment-card:active {
    box-shadow: none;
}

.no-touch .payment-card:active {
    box-shadow: none;
}

.payment-card__title {
    height: 65px;
    font-size: 0;
    text-align: center;
}

    .payment-card__title:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 100%;
    }

    .payment-card__title span {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        font-size: 20px;
        text-transform: uppercase;
    }

.printer-setup label {
    display: inline-block;
    width: 100%;
    cursor: pointer;
}

.printer-setup__title {
    padding-bottom: 10px;
    font-family: 'Roboto Medium', Arial, sans-serif;
    font-size: 20px;
}

.printer-setup__row {
    padding: 10px 0;
    font-size: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .printer-setup__row:after {
        content: " ";
        display: table;
        clear: both;
    }

.printer-setup__checkbox,
.printer-setup__center,
.printer-setup__test {
    display: inline-block;
    vertical-align: middle;
    padding-right: 15px;
    font-size: 15px;
    line-height: 1.3;
}

.printer-setup__center,
.printer-setup__test {
    width: 25%;
}

.printer-setup__checkbox {
    position: relative;
    padding-left: 42px;
    width: 50%;
    min-height: 30px;
    line-height: 30px;
}

    .printer-setup__checkbox .checkbox {
        position: absolute;
        top: 50%;
        left: 0;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }

    .printer-setup__checkbox label {
        line-height: 1.3;
    }

.printer-setup__radios {
    padding: 5px 0 0 42px;
}

.printer-setup__radio {
    padding: 10px 0;
}

.cash-drawer label {
    display: inline-block;
    width: 100%;
    cursor: pointer;
}

.cash-drawer__row {
    padding: 10px 0;
    font-size: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cash-drawer__radio,
.cash-drawer__center,
.cash-drawer__test {
    display: inline-block;
    vertical-align: middle;
    padding-right: 15px;
    font-size: 15px;
    line-height: 1.3;
}

.cash-drawer__radio {
    position: relative;
    padding-left: 42px;
    width: 60%;
    min-height: 30px;
    line-height: 30px;
}

.cash-drawer__center {
    width: 25%;
}

.cash-drawer__test {
    width: 15%;
}

.cash-drawer__radio label {
    line-height: 1.3;
}

.cash-drawer__radio .radio {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}

.main-help {
    position: relative;
    height: 100%;
}

.main-help__close {
    position: absolute;
    z-index: 50;
    top: 0;
    right: 0;
    color: #ec4a41;
    background: none;
}

.main-help__slider,
.main-help__slide,
.main-help .slick-list,
.main-help .slick-track {
    height: 100vh;
}

.main-help__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 70px;
    text-align: center;
}

.main-help__slide {
    padding: 50px 0 100px;
    font-size: 0;
    text-align: center;
}

.main-help__controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #3888AD;
    font-size: 0;
}

.main-help__control {
    position: relative;
    z-index: 5;
    display: inline-block;
    vertical-align: top;
    border-top: 1px solid #3888AD;
    border-right: 1px solid #f8f8f8;
    width: 25%;
    color: #fff;
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background 0.175s ease;
    will-change: transition;
}

    .main-help__control:before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 100%;
        margin: -8px 0 0 -1px;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 8px 0 8px 10px;
        border-color: transparent transparent transparent #f8f8f8;
        opacity: 0;
        transition: opacity 0.175s ease;
        will-change: auto;
    }

    .main-help__control.is-active {
        z-index: 10;
        border-right: none;
        color: #3888AD;
        background: #f8f8f8;
        pointer-events: none;
    }

        .main-help__control.is-active:before {
            opacity: 1;
        }

    .main-help__control span,
    .main-help__text {
        display: block;
        font-family: 'Roboto Regular', Arial, sans-serif;
        font-size: 16px;
        line-height: 59px;
    }

.main-help__text {
    line-height: 1.2;
}

.main-help__slide img {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
}

.main-help__slider > div > div {
    transition: left 0.3s linear 0s;
    will-change: contents;
}

.customer-select-box {
    position: relative;
}

.select-box {
    background: #fff;
    position: relative;
}

    .select-box select {
        display: block;
        padding: 0 35px 0 15px;
        border: 1px solid #eee;
        border-radius: 0;
        width: 100%;
        height: 60px;
        color: #333;
        background: #fff;
        font-family: 'Roboto Regular', Arial, sans-serif;
        font-size: 18px;
        line-height: 56px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -webkit-appearance: none;
    }

.country-title {
    font-size: 18px;
}

/*#region main-header*/

.main-header {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    right: 0;
    color: var(--white);
    background: var(--secondary-action-color);
    padding-left: 88px;
}

.main-header__sidebar {
    position: relative;
    z-index: 20;
    float: left;
    width: 40%;
    box-shadow: -3px -5px 4px 5px rgba(0, 0, 0, 0.2);
}

.main-header__container {
    position: relative;
    float: right;
}

.main-header__container-flex {
    display: flex;
}

.search {
    position: relative;
}

.search__field {
    position: relative;
    padding-left: 50px;
}

    .search__field:before {
        content: '';
        position: absolute;
        left: 10px;
        right: 0;
        bottom: 2px;
        border-bottom: 2px solid #fff;
        opacity: 0.7;
    }

.search-serial__field {
    position: relative;
    padding-left: 50px;
}

    .search-serial__field:before {
        content: '';
        position: absolute;
        left: 10px;
        right: 0;
        bottom: 2px;
        border-bottom: 2px solid #000;
        opacity: 0.7;
    }

.search-serial__button {
    display: inline-block;
    vertical-align: top;
    color: #000;
}


.search__field_phone_activation {
    position: relative;
    padding-left: 50px;
}

    .search__field_phone_activation:before {
        content: '';
        position: absolute;
        left: 10px;
        right: 0;
        bottom: 2px;
        border-bottom: 2px solid #000;
        opacity: 0.7;
    }

.search-serial__input {
    padding: 15px 10px;
    width: 100%;
    height: 50px;
    color: #000;
    background: none;
    font-family: 'Roboto Regular', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    word-break: normal !important;
    word-wrap: normal !important;
    white-space: nowrap !important;
    -webkit-line-break: normal !important;
    -webkit-nbsp-mode: normal !important;
}

.search__input {
    padding: 15px 10px;
    width: 100%;
    height: 50px;
    color: #fff;
    background: none;
    font-family: 'Roboto Regular', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    word-break: normal !important;
    word-wrap: normal !important;
    white-space: nowrap !important;
    -webkit-line-break: normal !important;
    -webkit-nbsp-mode: normal !important;
}

.search__controls {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px;
    font-size: 0;
}

.search__button {
    display: inline-block;
    vertical-align: top;
    color: #fff;
}

.search-dropdown {
    position: absolute;
    z-index: 100;
    top: 100%;
    left: 10px;
    right: 0;
    margin-top: 14px;
    max-width: 570px;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.15);
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
}

.is-poynt .search-dropdown {
    border: 1px solid rgba(0,0,0, 0.15) !important;
    box-shadow: none !important;
    transition: none !important;
}

.search-dropdown.is-open {
    opacity: 1;
    visibility: visible;
}

.search-dropdown__arrow {
    position: absolute;
    z-index: 1;
    left: 20px;
    bottom: 100%;
    width: 20px;
    height: 20px;
}

    .search-dropdown__arrow:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 14px;
        height: 14px;
        background: #fff;
        box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.15);
        -webkit-transform: translate3d(-50%, 50%, 0) rotate(45deg);
        transform: translate3d(-50%, 50%, 0) rotate(45deg);
    }

.search-dropdown__container {
    position: relative;
    z-index: 2;
    background: #fff;
}

.search-dropdown__body {
    overflow: auto;
    max-height: 199px;
}

.search-dropdown__list {
    padding: 0 12px;
}

.search-dropdown__item {
    padding: 10px 0;
    margin: 0 -5px;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.17s ease-in-out;
    will-change: transition;
}

    .search-dropdown__item:not(:last-child) {
        border-bottom: 1px solid #dadada;
    }

    .search-dropdown__item:after {
        content: " ";
        display: table;
        clear: both;
    }

.search-dropdown__price,
.search-dropdown__text {
    padding: 0 5px;
}

.search-dropdown__price {
    float: right;
    font-family: 'Roboto Regular', Arial, sans-serif;
    white-space: nowrap;
    position: relative;
    max-width: 180px;
    width: 100%;
}

.search-dropdown__inStock {
    font-size: 12px;
    color: white;
    background: grey;
    padding: 1px 6px;
    display: inline-block;
    border-radius: 3px;
    vertical-align: top;
    text-align: center;
    min-width: 78px;
}

.search-product-price {
    float: right;
}

.search-dropdown-opacity {
    opacity: .3;
}

.search-dropdown__text {
    overflow: hidden;
    font-family: 'Roboto Light', Arial, sans-serif;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.isProductSearch button {
    cursor: default;
    color: grey;
}

.main-header__fullinfo {
    position: absolute;
    z-index: 15;
    top: 0;
    right: 0;
    bottom: 0;
    box-shadow: -3px -5px 4px 5px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate3d(-110%, 0, 0);
    transform: translate3d(-110%, 0, 0);
    transition: transform 0.3s ease-in-out;
    will-change: auto;
}

    .main-header__fullinfo.is-open {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

.main-header__sidebar, .main-header__container, .main-header__fullinfo {
    min-height: 55px;
    background: var(--secondary-action-color);
}

.main-header__notification-center {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 1000;
}

.main-header__container, .main-header__fullinfo {
    width: 60%;
}

.main-header__container_full, .main-header__fullinfo_full {
    width: 100%;
}

    .main-header__container_full .main-header__title, .main-header__fullinfo_full .main-header__title {
        overflow: hidden;
        padding-left: 140px;
        padding-right: 140px;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.main-header__menu {
    position: absolute;
    z-index: 50;
    top: 0;
    left: 88px;
    width: 60px;
    height: 50px;
    color: #3888AD;
    background: #cae9f4;
    font-size: 32px;
    line-height: 50px;
    transition: color 0.175s ease, background 0.175s ease;
    will-change: transition;
}

    .main-header__menu:active {
        color: var(--white);
        background: #a0d7eb;
    }

.is-touch .main-header__menu {
    width: 100px;
}

    .is-touch .main-header__menu ~ .main-header__toolbar {
        padding-left: 100px;
    }

.no-touch .main-header__menu:active {
    color: #fff;
    background: #a0d7eb;
}

.main-header__menu ~ .main-header__toolbar {
    padding-left: 60px;
}

.main-header__help, .main-header__delete {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #fff;
}

    .main-header__delete + .main-header__toolbar {
        padding-right: 50px;
    }

.main-header__sync {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    height: 50px;
    padding: 5px 13px 5px 5px;
}

    .main-header__sync .btn-sync {
        margin: -5px;
    }

.btn-sync__title {
    padding-left: 20px;
    line-height: 50px;
}

@keyframes sync {
    0% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(-360deg);
    }

    30% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(-360deg);
    }
}

.btn-open {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #3888AD;
    background: #c7e7f9;
    transition: background 0.175s ease, box-shadow 0.175s ease, color 0.175s ease;
    will-change: transition;
}

    .btn-open:active {
        box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.2);
    }

.no-touch .btn-open:active {
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.2);
}

.btn-open.is-active {
    color: #fff;
    background: #3888AD;
}

    .btn-open.is-active .icon {
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

.btn-open .icon {
    font-size: 28px;
    transition: transform 0.175s ease-in-out;
    will-change: auto;
}

.btn-sync__icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    animation: sync 2.25s ease-in-out infinite;
}

.btn-sync {
    display: inline-block;
    vertical-align: top;
    color: #fff;
    background: none;
    font-family: 'Roboto Light', Arial, sans-serif;
    font-size: 16px;
    transition: background 0.175s ease, box-shadow 0.175s ease;
    cursor: pointer;
}

.btn-sync__icon, .btn-sync__title {
    display: inline-block;
    vertical-align: top;
}

.main-header__indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 8px;
    background: #ec4a41;
    transition: background 0.15s ease-in-out;
    will-change: transition;
}

    .main-header__indicator[data-state="active"] {
        background: #22B745;
    }

.main-header__search-for {
    padding: 0 0 0 10px;
    margin: -5px -5px -5px 0;
    height: 50px;
    color: inherit;
    background: none;
    font-family: 'Roboto Light', Arial, sans-serif;
    font-size: 16px;
}

    .main-header__search-for:active {
        color: inherit;
        background: rgba(0, 0, 0, 0.1);
        box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.2);
    }

.no-touch .main-header__search-for:active {
    color: inherit;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.2);
}

.main-header__search-for span, .main-header__search-for .icon {
    display: inline-block;
    vertical-align: middle;
}

.main-header__scan {
    position: absolute;
    z-index: 35;
    right: 0;
    bottom: 0;
    display: none;
}

    .main-header__scan .btn-scan {
        color: #333;
    }

.main-header__searchbox {
    max-width: 430px;
    margin-left: 5px;
    width: 430px;
}

.main-header__barcode {
    position: relative;
    width: 32px;
}

.main-header__searchbox_right {
    position: absolute;
    top: 0;
    right: 50px;
    width: 30%;
    max-width: none;
}

.main-header__toolbar .toolbar__col {
    border: none;
}

.main-header__title {
    font-size: 20px;
    margin: 0;
    padding-top: 13px;
    padding-bottom: 13px;
}

.main-header__back {
    position: absolute;
    z-index: 10;
    top: 0;
    white-space: nowrap;
    padding-right: 15px;
}

    .main-header__back .main-header__title {
        display: inline-block;
        vertical-align: middle;
    }

.main-header .is-hidden {
    display: none;
}

/*#endregion main-header*/

.sm-card__price {
    /*margin-top: 40px;*/
    text-align: right;
}

.step-body__footer-with-signature {
    position: fixed;
    left: calc(50% - 135px);
    right: 0;
    bottom: 0;
    padding-bottom: 5px;
}

@media (max-height: 720px) {
    .credit-receipt-signature {
        background: #f8f8f8;
    }
}

.customer__done {
    float: right;
    width: 260px;
}

.payment-card__icon-text {
    display: inline-block;
    vertical-align: middle;
    font-family: 'Roboto Bold', Arial, sans-serif;
    font-size: 28px;
}

.field-box__content {
    margin: 0 -10px;
}

    .field-box__content:after {
        content: " ";
        display: table;
        clear: both;
    }

.field-box__col {
    float: left;
    padding: 0 10px;
    width: 100%;
}

.field-box__col_md {
    width: 50%;
}

.field-box__col_sm {
    width: 33.33%;
}

.tabs__content .field-box__list {
    margin-bottom: 4px;
}

.tabs__content .field-box__col_md {
    width: initial;
    padding: 0 10px 20px;
}

.btn_primary, .btn_blue, .btn.is-active {
    color: var(--white);
    background: var(--secondary-action-color);
}

.ebt-block {
    height: 90px;
}

.btn-pad-separ {
    width: 20px;
}

@media only screen and (max-width: 1200px) {

    .table-wrapper[data-table="orders"] .table-header,
    .table-wrapper[data-table="orders"] .table-body {
        font-size: 12px;
    }

    .table-wrapper[data-table="orders"] .table-header__th {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .table-header,
    .table-body {
        font-size: 12px;
    }

        .table-body .fa-exchange {
            font-size: 1.2em;
        }

    .table-header__th, .table-header__td,
    .table-body__th,
    .table-body__td {
        padding: 10px 4px;
    }

        .table-header__th[data-column="orders-action"], .table-header__td[data-column="orders-action"],
        .table-body__th[data-column="orders-action"],
        .table-body__td[data-column="orders-action"] {
            width: 90px;
        }

    .toolbar__button strong {
        font-size: 19px;
    }

    .sm-search__input {
        font-size: 14px;
    }

    .dropdown-menu {
        font-size: 14px;
    }

    .order-item__close {
        top: 4px;
    }

    .order-item__title, .order-item__col {
        font-size: 14px;
    }

    .payment-card__title span {
        font-size: 16px;
    }
}

@media only screen and (min-height: 720px) {

    .main-keyboard {
        font-size: 80px;
    }

    #custom-payment .main-keyboard__item {
        height: 0.85em;
    }
}

@media only screen and (max-height: 650px) {

    .main-keyboard {
        font-size: 57px;
    }

        .main-keyboard .field_static .field__static {
            height: 60px;
            line-height: 60px;
        }

    .main-display .field_static .field__static {
        height: 60px;
        line-height: 60px;
    }

    .main-display .field__input {
        height: 60px;
    }

    .tabs__keyboard,
    .tabs__keyboard-dis {
        padding: 0 !important;
    }

    .field_currency_format {
        height: 60px;
        line-height: 60px;
    }

    #custom-payment .main-keyboard__item {
        height: 0.85em;
    }
}

.step-body-cc {
    padding-bottom: 0px;
}

.credit-receipt-signature-cc {
    margin-top: -15px;
}

/*.tabs__keyboard-dis {
    padding: 3% 0;
}*/

.container__body_tips {
    height: 100%;
    padding-bottom: 50px;
}

.order-item__notes {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 0;
}

.field__value {
    font-weight: 400;
    font-size: 14px;
}

}

.cut-description-order {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    -webkit-box-orient: vertical;
}

/* Cart product item */
.products__item-alt {
    display: inline-block;
    position: relative;
    width: 25%;
    height: 33%;
    min-height: 62px;
    padding: 5px;
}

.item-alt {
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: #606467;
    height: 100%;
    width: 100%;
    background: #eee;
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: box-shadow 0.17s ease-in-out, background 0.17s ease-in-out, color 0.17s ease-in-out;
    will-change: auto;
}

    .item-alt:hover {
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    .item-alt:active {
        box-shadow: none;
    }

    .item-alt.is-active {
        color: #fff;
        background: #3888AD !important;
    }

    .item-alt .ripple-circle {
        background: rgba(0, 0, 0, 0.1);
    }

.item-alt__img {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.item-alt__img_condenced {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

.item-alt__title_no-img {
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
}

    .item-alt__title_no-img span {
        display: table-cell;
        overflow: hidden;
        max-height: 3.6em;
        font-size: 0.9vw;
        line-height: 1.2;
        vertical-align: middle;
    }

.item-alt__title_no-img__cell {
    display: table-cell;
    vertical-align: middle;
}

    .item-alt__title_no-img__cell span {
        display: inline-block;
        max-height: 3.6em;
        font-size: 0.9vw;
        line-height: 1.2;
        overflow: hidden;
        padding: 0 5px;
    }

.item-alt__title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 5px 3px 5px;
    background: #fff;
    overflow: hidden;
    text-align: center;
}

    .item-alt__title span {
        display: inline-block;
        vertical-align: -webkit-baseline-middle;
        overflow: hidden;
        max-height: 3.6em;
        font-size: 0.9vw;
        line-height: 1.2;
    }

.item-alt__price,
.item-alt__label {
    display: inline-block;
    position: absolute;
    top: 0;
    word-break: break-all;
    font-size: 0.9vw;
    line-height: 1.2;
    max-width: 50%;
    padding: 4px 5px 3px 5px;
    background: #fff;
    opacity: 0.8;
}

.item-alt__price {
    right: 0;
}

.item-alt__label {
    left: 0;
}

/* end Cart product item */


/* Customer Alt */
.wrapper-common {
    padding: 0 20px 10px;
}

.tabs__item_alt {
    border-right: none;
    display: table-cell;
    vertical-align: top;
}

.tabs__btn_alt {
    text-transform: uppercase;
    border-color: rgba(0, 0, 0, 0.1);
    border-width: 0 0 1px 0;
    border-style: solid;
}

    .tabs__btn_alt.is-active {
        border-width: 2px 1px 0 1px;
        border-top-color: #999;
    }

.select-box:before {
    top: 50%;
    margin-top: -10px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 5px 8px 5px;
    border-color: transparent transparent currentColor transparent;
}

.select-box:after {
    bottom: 50%;
    margin-bottom: -10px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 8px 5px 0 5px;
    border-color: currentColor transparent transparent transparent;
}

.select-box:before, .select-box:after {
    content: '';
    position: absolute;
    right: 15px;
    pointer-events: none;
}

.form-label {
    display: block;
    padding-bottom: 8px;
    color: #333;
    font-size: 16px;
}

.form-label_bold {
    font-family: 'Roboto Medium', Arial, sans-serif;
}

.input-box.is-error input {
    border-color: #ec4a41;
}

.is-error .error-message {
    opacity: 1;
    visibility: visible;
}

.input-box__input {
    padding-right: 60px;
}

.input-box.is-error input {
    border-color: #ec4a41;
}

.field-hint-wrapper {
    position: relative;
}

.field-hint {
    position: absolute;
    top: 50%;
    left: 100%;
    display: none;
    padding: 10px 0;
    border: 1px solid #eee;
    width: 200px;
    background: #fdfdfd;
    transform: translate3d(20px,-50%,0);
}

    .field-hint.is-open {
        display: block;
    }

    .field-hint:before,
    .field-hint:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 100%;
        border-style: solid;
        border-color: transparent;
        width: 0;
        height: 0;
        transform: translate3d(0,-50%,0);
    }

    .field-hint:before {
        border-width: 12px 12px 12px 0;
        border-right-color: #eee;
    }

    .field-hint:after {
        border-width: 11px 10px 11px 0;
        border-right-color: #fdfdfd;
    }

    .field-hint li {
        position: relative;
        padding: 2px 10px 2px 40px;
        margin: 0;
        color: #ec4a41;
        font-size: 14px;
        line-height: 16px;
        list-style-type: none;
    }

        .field-hint li.is-success {
            color: #22b745;
        }

            .field-hint li.is-success .field-hint__check {
                display: inline-block;
            }

            .field-hint li.is-success .field-hint__close {
                display: none;
            }

.field-hint__icon {
    position: absolute;
    top: 1px;
    left: 0;
    width: 40px;
    font-size: 0;
    line-height: 1;
    text-align: center;
}

    .field-hint__icon .fa {
        vertical-align: top;
        font-size: 18px;
    }

.field-hint__check {
    display: none;
}

.definition-list {
    color: #333;
    font-size: 16px;
}

.definition-list__title {
    font-family: 'Roboto Medium', Arial, sans-serif;
}

.definition-list__description {
    padding: 5px 0 10px 10px;
    font-family: 'Roboto Light', Arial, sans-serif;
}

.iframe-wrapper {
    width: 100%;
}

    .iframe-wrapper iframe {
        display: block;
        margin: 0 auto 20px;
        max-width: 100%;
    }

.info-price_small .info-price__value span {
    font-size: 17px;
}

.tabs__meta {
    padding: 0 0 20px;
    font-family: 'Roboto Regular', Arial, sans-serif;
    font-size: 16px;
}

/*NEW: pretty fields*/
.pretty-field {
    position: relative;
}

    .pretty-field.is-error .pretty-field__input {
        border-color: #ec4a41;
    }

    .pretty-field.is-active .pretty-field__placeholder {
        transform: translate3d(0, 10px, 0) scale(0.73);
    }

.no-touch .pretty-field:not(.is-disabled):hover .pretty-field__clear {
    opacity: 1;
    visibility: visible;
}

.pretty-field input:not(:disabled):focus + .input-box__clear {
    opacity: 1;
    visibility: visible;
}

.pretty-field__container {
    position: relative;
}

.pretty-field__clear {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    color: #333;
    opacity: 0;
    visibility: hidden;
    background: none;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    will-change: auto;
}

    .pretty-field__clear ~ .pretty-field__input, .pretty-field__clear ~ .pretty-field__placeholder {
        padding-right: 75px;
    }

.pretty-field__input, .pretty-field__select {
    padding-top: 15px !important;
    line-height: normal !important;
}

.pretty-field__textarea {
    padding: 30px 15px 15px !important;
    border-width: 1px !important;
}

.pretty-field__placeholder {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 15px;
    right: 15px;
    color: rgba(51, 51, 51, 0.7);
    font-family: 'Roboto Regular', Arial, sans-serif;
    font-size: 18px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translate3d(0, 20px, 0);
    -ms-transform-origin: top left;
    transform-origin: top left;
    transition: transform 0.15s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    will-change: auto;
}

.pretty-field__error-message {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*NEW: tabs*/
.tabs-box {
    padding: 20px 0 0;
    margin: 0 auto;
    max-width: 800px;
    height: 100%;
}

.tabs_box .tabs__content:before {
    display: none;
}

.tabs_box .tabs__item {
    border: none !important;
}

.tabs_box .tabs__btn {
    position: relative;
    background: none;
    text-transform: uppercase;
}

    .tabs_box .tabs__btn.is-active {
        background: #fcfcfc;
    }

        .tabs_box .tabs__btn.is-active:before {
            border-width: 1px 1px 0 1px;
        }

    .tabs_box .tabs__btn:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-width: 0 0 1px 0;
        border-style: solid;
        border-color: #eee;
    }

.tabs_box .tabs__container {
    border: 1px solid #eee;
    border-top: none;
    background: #fcfcfc;
}

.tabs_box .tabs__content {
    padding: 40px 40px 15px;
}

.items-empty {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 70px 20px 20px;
    color: #aaa;
    background: #f8f8f8;
    text-align: center;
    font-size: 0;
}

    .items-empty:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 100%;
    }

.items-empty__center {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    margin-bottom: 10%;
}

.items-empty h5 {
    font-size: 28px;
}

.items-empty p {
    font-size: 18px;
}

.sm-grid__field {
    float: left;
    width: 60%;
    max-width: 500px;
}

.input-box.is-error input {
    border-color: #ec4a41;
}

.is-error .error-message {
    opacity: 1;
    visibility: visible;
}

.input-box__error-message {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.white-space-normal {
    white-space: normal !important;
}

.sm-grid__field + .sm-grid__button {
    padding-left: 20px;
}

.sm-grid__button {
    float: left;
}

.dropdown-menu__submenu_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding-top: 51px;
    background: #fff;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
    transition: transform .3s ease-in-out;
    will-change: auto;
}

.dropdown-menu__submenu-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 17px 20px 17px 30px;
    color: #fff;
    background: #3888AD;
    font-size: 14px;
    line-height: 16px;
    text-align: left;
    text-decoration: none;
}

.dropdown-menu__submenu_overlay .dropdown-menu__submenu-list {
    height: 100%;
    overflow: auto;
}

.dropdown-menu__submenu_overlay .dropdown-menu__submenu-link, .field_static .field__units span {
    margin: 0;
}

.dropdown-menu__submenu-link {
    position: relative;
    display: block;
    padding: 12px 10px 12px 30px;
    margin: 0 -20px;
    color: #333;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    word-break: break-word;
}

.dropdown-menu.is-open {
    -ms-transform: scaleY(1) translate(0,0);
    -webkit-transform: scaleY(1) translate(0,0);
    transform: scaleY(1) translate(0,0);
}



.dropdown-menu_hidden {
    overflow: hidden;
}



.dropdown-menu {
    position: absolute;
    z-index: 2000;
    left: 0;
    max-width: 400px;
    min-width: 100%;
    color: #333;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-transform: scaleY(0) translate(0,-100%);
    -webkit-transform: scaleY(0) translate(0,-100%);
    transform: scaleY(0) translate(0,-100%);
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    transition: transform .3s ease-out;
    will-change: auto;
}

.dropdown-menu_up {
    top: auto;
    bottom: 100%;
}

.dropdown-menu.is-active .dropdown-menu__list {
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

.dropdown-menu.is-active .dropdown-menu__submenu_overlay {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.horizontal-menu__dropdown-menu {
    min-width: 150px !important;
}

.dropdown-menu__submenu-title em {
    position: absolute;
    top: 50%;
    left: 7px;
    margin-top: -9px;
    width: auto;
    height: auto;
    font-size: 18px;
    line-height: 1;
}

.dropdown-menu__arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -10px;
    font-size: 20px;
}

.dropdown-menu__submenu-link.is-active .fa {
    opacity: 1;
}

.dropdown-menu__submenu_overlay .dropdown-menu__submenu-link .fa {
    top: 11px;
    margin: 0;
}

.dropdown-menu__submenu-link .fa {
    position: absolute;
    top: 50%;
    left: 8px;
    margin-top: -7px;
    opacity: 0;
    font-size: 14px;
}

.no-touch .dropdown-menu__submenu-item:hover {
    background: #eee;
}

.no-touch .dropdown-menu__submenu-item:active {
    color: #fff;
    background: #3888AD;
}

.dropdown-menu__submenu-item:active {
    color: #fff;
    background: #3888AD;
}

.header__logo_multiple img {
    max-height: 50px;
}

.header__logo_multiple {
    padding: 35px 20px 5px;
    height: 90px;
    font-size: .1px;
    line-height: 1;
    text-align: justify;
}

.header_medium {
    height: 90px;
}

.product-activation__title {
    margin: 0 0 15px
}

.product-activation__items {
    margin: -10px;
    font-size: 0
}

.product-activation__item {
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    width: 33.33%
}

.product-activation__form {
    max-width: 600px;
}

.product-activation__label {
    display: block;
    margin-bottom: 10px;
    font-family: 'Roboto Medium',Arial,sans-serif;
    font-size: 16px;
    line-height: 1.3;
}

.product-activation__input {
    max-width: 600px
}

.product-activation__input {
    max-width: 600px;
}

.product-activation__field {
    margin-top: 20px;
}

.check-card input:checked ~ .check-card__content .check-card__icon {
    opacity: 1
}

.check-card input:checked ~ .check-card__content {
    background: khaki
}

.check-card input:disabled ~ .check-card__content {
    opacity: .5;
    background: #eee;
    cursor: default;
    pointer-events: none
}

.check-card__content {
    position: relative;
    display: block;
    padding: 10px 40px 10px 15px;
    height: 80px;
    color: #333;
    background: #eee;
    box-shadow: 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.1);
    line-height: 60px;
    cursor: pointer;
    transition: box-shadow .15s ease-in-out,background .15s ease-in-out;
    will-change: auto;
}

.check-card__icon {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    transition: opacity .25s;
    will-change: transition;
}

.check-card__title {
    display: inline-block;
    vertical-align: middle;
    font-size: 17px;
    line-height: 1.2
}

.denomination__section {
    position: relative;
    padding: 5px 40px 5px 0;
    margin: 0 -5px;
    font-size: 0;
}

.denomination__label {
    width: 20%;
}

.denomination__splitter {
    width: 10%;
}

.denomination__field {
    position: relative;
    width: 35%;
}

.denomination__result {
    width: 25%;
    text-align: right;
}

.denomination__field,
.denomination__label,
.denomination__result,
.denomination__splitter {
    display: inline-block;
    vertical-align: middle;
    padding-right: 4px;
    color: #333;
    font-size: 15px;
}

.denomination__input {
    padding: 10px 0;
    border-bottom: 1px solid rgba(51,51,51,.4);
    width: 100%;
    height: 40px;
    color: #333;
    font-family: 'Roboto Light',Arial,sans-serif;
    font-size: 15px;
    line-height: normal;
    text-align: right;
}

.denomination__clear .icon {
    display: inline-block;
    vertical-align: middle;
    opacity: .5;
    font-size: 32px;
}

.denomination__col:nth-child(1) {
    border-right: 1px solid #eee;
}

.denomination__col {
    display: table-cell;
    padding: 15px 20px;
    width: 60%;
}

.denomination {
    margin: 0 auto 20px;
    max-width: 600px;
}

.denomination__list, .denomination {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.denomination__text {
    padding-left: 5px;
    font-size: 16px;
    color: #3B3B3C;
    font-family: 'Roboto Regular', Arial, sans-serif;
    font-weight: 400;
    width: 100%;
}

.system_count_label {
    padding-left: 30px;
    font-size: 14px;
    margin: 20px 0 0;
}

.denomination__keyboard {
    background-color: var(--white);
    height: 410px;
    overflow-y: scroll;
    position: relative;
}

.denomination__container {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.denomination__row {
    display: table-row;
}

.denomination__keyboard.column-mode .denomination__row {
    display: flex;
    flex-direction: column;
    align-items: center
}

.denomination__keyboard.column-mode .denomination__col {
    border: none;
}

.denomination__item {
    background-color: var(--white);
    border: 1px solid #E1E1E1;
    padding: 1px 58px 1px 0;
    font-family: 'Roboto Regular', Arial, sans-serif;
    position: relative;
}

    .denomination__item .field .field__label {
        width: 60%;
    }

.denomination__item-active {
    border-color: var(--primary-action-color-active);
}

.denomination__item input {
    height: 64px;
    font-size: 22px;
}

.denomination__item .field__label {
    font-size: 11px;
}

.denomination__keyboard i.fa {
    position: absolute;
    font-size: 28px;
    right: 15px;
    top: 7px;
    cursor: pointer;
}


.denomination-notes {
    margin: 0 auto;
    max-width: 600px;
}

.denomination__clear {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background: 0 0;
    text-align: center;
    font-size: 0;
}

.denomination__title {
    margin-bottom: 10px;
    font-family: 'Roboto Medium',Arial,sans-serif;
    font-size: 20px;
    line-height: 1;
}

.attach-bottom {
    margin: auto 0 0;
}

.settings__content_simple {
    height: 100%;
}

.settings__text-info {
    padding: 40px;
    margin: 0 auto;
    max-width: 600px;
}

.text-info__item {
    padding: 8px 0;
    font-size: 0;
}

.text-info__label, .text-info__value {
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    line-height: 1.3;
}

.text-info__label {
    padding-right: 10px;
    width: 35%;
    color: #aaa;
}

.text-info__value {
    width: 65%;
    font-family: 'Roboto Medium',Arial,sans-serif;
}

.form__title {
    position: relative;
    padding: 0 40px 15px 10px;
}

.form__arrow {
    position: absolute;
    top: 3px;
    right: 10px;
    font-size: 24px;
    transition: transform 0.25s;
    will-change: transition;
}

.form__collapsable.is-active .form__arrow {
    transform: rotate(180deg);
}

.form__collapsable .form__title {
    cursor: pointer;
}

.form__collapsable .form__items {
    display: none;
}


/*.ui-datepicker {
    width: 233px;
    height: auto;
    margin: 5px auto 0;
    font: 9pt Arial, sans-serif;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}

.ui-datepicker table {
    width: 100%;
}

.ui-datepicker-header {
    background: #4D662B;
    color: #e0e0e0;
    font-weight: bold;
    -webkit-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 2);
    -moz-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
    box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
    text-shadow: 1px -1px 0px #000;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #111;
}

.ui-datepicker-title {
    text-align: center;
    font-size: 15px;
}

.ui-datepicker-prev {
    float: left;
    cursor: pointer;
    background-position: center -30px;
}

.ui-datepicker-next {
    float: right;
    cursor: pointer;
    background-position: center 0px;
}

.ui-datepicker thead {
    background-color: #f7f7f7;
    background-image: -moz-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
    background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#f7f7f7), color-stop(100%,#f1f1f1));
    background-image: -webkit-linear-gradient(top, #f7f7f7 0%,#f1f1f1 100%);
    background-image: -o-linear-gradient(top, #f7f7f7 0%,#f1f1f1 100%);
    background-image: -ms-linear-gradient(top, #f7f7f7 0%,#f1f1f1 100%);
    background-image: linear-gradient(top, #f7f7f7 0%,#f1f1f1 100%);
    border-bottom: 1px solid #bbb;
}

.ui-datepicker th {
    text-transform: uppercase;
    font-size: 6pt;
    padding: 5px 0;
    color: #666666;
    text-shadow: 1px 0px 0px #fff;
    filter: dropshadow(color=#fff, offx=1, offy=0);
}

.ui-datepicker tbody td {
    padding: 0;
    border-right: 1px solid #bbb;
}

    .ui-datepicker tbody td:last-child {
        border-right: 0px;
    }

.ui-datepicker tbody tr {
    border-bottom: 1px solid #bbb;
}

    .ui-datepicker tbody tr:last-child {
        border-bottom: 0px;
    }

.ui-datepicker a {
    text-decoration: none;
}

.ui-datepicker td span, .ui-datepicker td a {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #666666;
    text-shadow: 1px 1px 0px #fff;
    filter: dropshadow(color=#fff, offx=1, offy=1);
}

.ui-datepicker-calendar .ui-state-default {
    background: #ededed;
    background: -moz-linear-gradient(top, #9DC464 0%, #dedede 100%);
    background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#9DC464), color-stop(100%,#dedede));
    background: -webkit-linear-gradient(top, #9DC464 0%,#dedede 100%);
    background: -o-linear-gradient(top, #9DC464 0%,#dedede 100%);
    background: -ms-linear-gradient(top, #9DC464 0%,#dedede 100%);
    background: linear-gradient(top, #9DC464 0%,#dedede 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9DC464', endColorstr='#dedede',GradientType=0 );
    -webkit-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
    -moz-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
    box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
}

.ui-datepicker-calendar .ui-state-hover {
    background: #4F6828;
    color: #FFFFFF;
}

.ui-datepicker-calendar .ui-state-active {
    background: #4F6828;
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
    -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
    color: #e0e0e0;
    text-shadow: 0px 1px 0px #4d7a85;
    border: 1px solid #55838f;
    position: relative;
    margin: -1px;
}

.ui-datepicker-unselectable .ui-state-default {
    background: #D6E4BE;
    color: #000;
}*/


/*.dropdown__header {
    position: relative;
    padding: 0 20px;
    height: 60px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background .175s ease;
}*/
.ui-icon-circle-triangle-w {
    text-indent: initial;
    margin-top: -40px;
}

.ui-icon-circle-triangle-e {
    text-indent: initial;
    margin-top: -40px;
}

.ui-datepicker .ui-datepicker-next:before, .ui-datepicker .ui-datepicker-prev:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 100%
}

.ui-datepicker {
    z-index: 100 !important;
    background: white;
    width: 100%;
    max-width: 20%;
    min-width: auto;
    font-family: 'Roboto Light', Arial,sans-serif;
}

.ui-datepicker-header {
    padding: 0 20px;
    height: 50px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background .175s ease;
    top: 0;
    left: 0;
    max-width: 400px;
    min-width: 100%;
    color: #333;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    font-size: 1.40em;
    -webkit-user-select: none;
    will-change: transition;
}

.ui-datepicker.is-open .ui-datepicker__calendar {
    display: block;
}

.ui-datepicker__calendar {
    position: relative;
    padding: 0 15px 15px;
    width: 100%;
    max-width: 320px;
    min-width: auto;
    z-index: 200;
    top: 0;
    left: 0;
    max-width: 400px;
    min-width: 100%;
    color: #333;
    background: #fff;
    font-size: 1em;
    -webkit-user-select: none;
}

.ui-datepicker-prev {
    left: 0;
    padding-top: 10px;
    position: absolute;
    display: inline-block;
    width: 60px;
    height: 50px;
    text-align: center;
    vertical-align: top;
    font-size: 28px;
    color: #333;
}

.ui-datepicker-next {
    right: 0;
    padding-top: 10px;
    display: inline-block;
    position: absolute;
    text-align: center;
    vertical-align: top;
    color: #333;
    width: 60px;
    height: 50px;
    font-size: 28px;
}

.ui-datepicker .ui-datepicker-title {
    padding: 0 60px;
    line-height: 60px;
    font-weight: bold;
    text-align: center;
}

.ui-datepicker .ui-datepicker-calendar {
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    table-layout: fixed;
    font-size: 1.40em;
}

    .ui-datepicker .ui-datepicker-calendar th {
        padding-top: 5px;
        padding-bottom: 15px
    }

    .ui-datepicker .ui-datepicker-calendar .ui-state-default {
        display: block;
        border-radius: 3px;
        line-height: 40px;
        text-align: center;
        text-decoration: none;
    }

    .ui-datepicker .ui-datepicker-calendar a.ui-state-active:not(.ui-state-highlight) {
        color: #fff;
        background: #333;
    }

.coupon-card__price {
    width: 50%;
}

.coupon-card__price {
    float: right;
    text-align: right;
    padding: 5px 6px;
}

.coupon-card__price_label {
    float: right;
    text-align: right;
    padding: 5px 6px;
    position: absolute;
}

.sidebar-item__coupon {
    position: relative;
    display: inline-block;
    border-radius: 10px;
    vertical-align: top;
    padding: 8px 26px;
    margin-left: 1%;
    margin-bottom: 2%;
    margin-right: 1%;
    width: 31%;
    color: #333;
    background: #eee;
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.1);
    box-shadow: 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.1);
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: none;
    -webkit-transition: -webkit-box-shadow .15s ease-in-out;
    -o-transition: box-shadow .15s ease-in-out;
    transition: box-shadow .15s ease-in-out;
    transition: box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    will-change: auto;
}

.sidebar-item__coupon-label, .sidebar-item__coupon-value {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-item__coupon-delete-button {
    position: absolute;
    top: -7px;
    right: 7px;
    color: #ec4a41;
    background: none;
    width: 26px;
    height: 26px;
}

.sidebar-item__coupon-value {
    margin-top: 4px;
    font-size: 12px;
}

.sidebar-item__coupon-label {
    font-size: 14px;
}

.coupon-card__amount {
    float: left;
    padding: 5px 6px;
    text-align: left;
}

.coupon-grid__col {
    float: left;
    padding: 10px;
    width: 25%;
}

.coupon-card__title {
    padding: 20px;
    text-align: center;
}

.coupon-title {
    display: block;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 4px;
}

.coupon-card {
    display: block;
    overflow: hidden;
    color: #333;
    margin: 2px;
    background: #fff;
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.1);
    box-shadow: 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.1);
    font-size: 16px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: none;
    -webkit-transition: -webkit-box-shadow .15s ease-in-out;
    -o-transition: box-shadow .15s ease-in-out;
    transition: box-shadow .15s ease-in-out;
    transition: box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    will-change: auto;
}

.disabled-cart_line_item {
    pointer-events: none;
    opacity: 0.4;
}

.horizontal-menu__item span {
    position: absolute;
    top: 3px;
    right: 3px;
    padding: 0 5px;
    border-radius: 10px;
    min-width: 20px;
    color: #fff;
    background: #22b745;
    font-size: 100%;
    line-height: 20px;
    white-space: nowrap;
}

.coupon_loader {
    position: absolute;
    z-index: 1001;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-size: 0;
}

    .coupon_loader:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 100%;
    }

    .coupon_loader .coupon_loader__icon {
        display: inline-block;
        vertical-align: middle;
    }

.card-coupon {
    color: #333;
}

.card-coupon__label {
    position: relative;
    display: block;
}

.card-coupon__content {
    overflow: hidden;
    padding: 8px;
    color: #333;
    height: 80px;
    background: #eee;
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;
    display: block;
    width: 100%;
    will-change: auto;
}

    .card-coupon__content.checked {
        background: rgba(34,183,69,0.5);
    }

.no-touch .card-coupon__content:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.card-coupon__content:active {
    box-shadow: none;
}

.card-coupon_icon {
    width: 25px;
    margin-left: 4px;
    position: relative;
    display: inline-block !important;
}

.coupon-legend_item {
    font-size: 12px;
    margin-right: 16px;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
}

    .coupon-legend_item span {
        margin-left: 5px;
        overflow-wrap: break-word;
        max-width: 104px;
    }

.coupon-legend-container {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

    .coupon-legend-container.add-padding {
        bottom: -30px;
    }

.cart-line-coupon-title {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    width: 80%;
    vertical-align: middle
}

.cart-line-coupon-value {
    display: inline-block;
    vertical-align: bottom;
}

.item-alt__img.ws_metroactivation {
    background-image: url("images/apps/metro_edge_phone_activ.png")
}

.item-alt__img.ws_metroport {
    background-image: url("images/apps/metro_port_elig.png")
}

.item-alt__img.ws_incomm {
    background-image: url("images/apps/incomm_payment.png")
}

.item-alt__img.ws_incommtracfone {
    background-image: url("images/apps/incomm_1.png")
}

.item-alt__img.ws_vidapay {
    background-image: url("images/apps/vp_airtime_topup.svg")
}

.item-alt__img.billpaymentxfinity {
    background-image: url("images/apps/xfinity-logo-square.png")
}

.item-alt__img.ws_smartpay {
    background-image: url("images/apps/smartpay_leasing.png")
}

.item-alt__img.ws_tracfoneactivation {
    background-image: url("images/apps/tracfone_activation.png")
}

.item-alt__img.billpaymentboostu {
    background-image: url("images/apps/BOOST_UI_Boost_U_Learning_new.png");
}

.item-alt__img.ws_tracfonedashboard {
    background-image: url("images/apps/tracfone_dashboard.png")
}

.item-alt__img.ws_totalwsactivation {
    background-image: url("images/apps/total_wireless.png")
}

.item-alt__img.ws_twactivation_tcetra {
    background-image: url("images/apps/total_wireless_tcetra_act_280x250.png")
}

.item-alt__img.ws_twdashboard_tcetra {
    background-image: url("images/apps/total_wireless_tcetra_dash_280x250.png")
}

.item-alt__img.ws_boostactivation {
    background-image: url("images/apps/boost_280x250.png")
}

.item-alt__img.ws_epayss {
    background-image: url("images/apps/epay_payment.png")
}

.item-alt__img.ws_verizonactivation {
    background-image: url("images/apps/verizon_280x250_5.png")
}

.item-alt__img.ws_xplornetfs {
    background-image: url("images/apps/xplornet_retrieve_ssp_order_280x250.png")
}

.item-alt__img.ws_xplornetssp {
    background-image: url("images/apps/xplornet_sales_service_280x250.png")
}

.item-alt__img.ws_altice {
    background-image: url("images/apps/optimum-mobile280x250_DA.png")
}

.item-alt__img.ws_incommw {
    background-image: url("images/apps/income_make_payment.png")
}

.item-alt__img.testiframeapp {
    background-image: url("images/apps/test_app_iframe.png")
}

.item-alt__img.ws_applecare {
    background-image: url("images/apps/appleCare.png")
}

.item-alt__img.price_matrix {
    background-image: url("images/apps/price_matrix.png")
}

.item-alt__img.ws_alticepayment {
    background-image: url("images/apps/optimum-mobile280x250_MP.png")
}

.item-alt__img.ws_smartpayleasing {
    background-image: url("images/apps/smartpay_leasing.png")
}

.item-alt__img.smartpayleasing_boost {
    background-image: url("images/apps/smartpay_leasing_boost.png")
}

.item-alt__img.smartpaymerchant {
    background-image: url("images/apps/smartpay_merchant_portal.png")
}

.item-alt__img.ws_ph_ssdkp {
    background-image: url("images/apps/phobio_device_trade_in.svg")
}

.item-alt__img.ws_metroidv {
    background-image: url("images/apps/metroidv_eligibility_tool.png")
}

.item-alt__img.ws_alticereturn {
    background-image: url("images/apps/optimum-mobile280x250_ER.png")
}

.item-alt__img.ws_alticecareui {
    background-image: url("images/apps/optimum-mobile280x250_CareUi.png")
}

.item-alt__img.ws_alticepaymentwl {
    background-image: url("images/apps/bill_payment.png")
}

.item-alt__img.ws_alticewl {
    background-image: url("images/apps/activation.png")
}

.item-alt__img.ws_smartpay_leasing_integration {
    background-image: url("images/apps/smartpay_leasing_integration.png");
}

.item-alt__img.billpayment_demo {
    background-image: url("images/apps/upsell.png");
}

.item-alt__img.ws_ascf {
    background-image: url("images/apps/ascf_activation.svg");
}

    .item-alt__img.ws_ascf.boostelavate {
        background-image: url("images/apps/BOOST_UI_Boost Elevate_GSF_280x250.png");
    }

.item-alt__img.upsell {
    background-image: url("images/apps/upsell_generic.svg");
}

    .item-alt__img.upsell.boostelavate {
        background-image: url("images/apps/upsell_boostelevate.svg");
    }

.item-alt__img.elevate_marketing {
    background-image: url("images/apps/elevate_marketing_new.svg");
}

.item-alt__img.ws_gsf_shine {
    background-image: url("images/apps/ws_gsf_shine.svg");
}

.item-alt__img.ws_dummy {
    background-image: url("images/apps/ws_dummy.png");
}

.item-alt__img.ws_lla_act {
    background-image: url("images/apps/LLA_Logo_salesforce.png");
}

.item-alt__img.ws_lla_inst {
    background-image: url("images/apps/LLA_b2b_device_installments.png");
}

.item-alt__img.tcetra_activation.tracfone {
    background-image: url("images/apps/tcetra_activation_app.png");
}

.item-alt__img.tcetra_import.tracfone {
    background-image: url("images/apps/tcetra_import_app.png");
}

.item-alt__img.tcetra_billpayment.tracfone {
    background-image: url("images/apps/tcetra_billpayments_app.png");
}

.item-alt__img.tcetra_otherbillpay.tracfone {
    background-image: url("images/apps/tcetra_otherbillpay.png");
}

.item-alt__img.tcetra_activation {
    background-image: url("images/apps/tcetra_activation_app_ar.png");
}

.item-alt__img.tcetra_import {
    background-image: url("images/apps/tcetra_import_app_ar.png");
}

.item-alt__img.tcetra_billpayment {
    background-image: url("images/apps/tcetra_billpayments_app_ar.png");
}

.item-alt__img.tcetra_otherbillpay {
    background-image: url("images/apps/tcetra_otherbillpay.png");
}

.item-alt__img.billpayment_tf_dap {
    background-image: url("images/apps/vidapay_tools_app.png")
}

.item-alt__img.manual_activation {
    background-image: url("images/apps/manual_activation.png")
}

.item-alt__img.devicehotsheet {
    background-image: url("images/apps/device_hotsheet.png")
}

.item-alt__img.promooverview {
    background-image: url("images/apps/promo_overview.png")
}

.item-alt__img.ws_claro_act {
    background-image: url("images/apps/ws_claro_act_app.png")
}

.item-alt__img.ws_lla_b2b_act {
    background-image: url("images/apps/ws_lla_b2b_act.png")
}

.item-alt__img.boost_gpt {
    background-image: url("images/apps/boost_gpt.png")
}

.item-alt__img.spectrum {
    background-image: url("images/apps/spectrum.png");
}


@media screen and (max-height: 768px) {
    .main-header {
        padding-left: 80px;
    }
}


.suggestion {
    position: absolute;
    width: 100%;
    z-index: 1049;
    bottom: 0;
    font-weight: 400;
    font-size: 16px;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    transition: transform 0.3s ease-in-out;
    will-change: auto;
}

.suggestion-content {
    color: #eee;
    background: rgba(44, 48, 58, 0.9);
    display: block;
    width: 100%;
    min-height: 18vw;
    position: relative;
}

    .suggestion-content.suggestion-items-content {
        background: rgba(44, 48, 58, 1);
    }

.suggestion.is-open {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.suggestion_wrapper {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.suggestion__container {
    overflow: auto;
    padding: 5px 10px;
    height: 100%;
    font-size: 0;
}

.suggestion__slider,
.suggestion__slider .slick-list,
.suggestion__slider .slick-track {
    height: 100%;
}

/* Cart product item */
.suggestion__item-alt {
    display: inline-block;
    position: relative;
    width: 25%;
    height: 10vw;
    min-height: 62px;
    padding: 5px;
}

    .suggestion__item-alt .transparent-background {
        background: rgba(255,255,255,0.8);
    }

    .suggestion__item-alt .item-alt__title:not(.transparent-background) {
        padding: 4px 5px 4px 5px;
        background: unset;
    }


    .suggestion__item-alt .item-overlay {
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        position: absolute;
        z-index: 1;
    }

        .suggestion__item-alt .item-overlay .check-box {
            background: white;
            width: 36px;
            height: 36px;
            border: 2px solid rgba(196, 196, 196, 0.5);
            position: absolute;
            right: 0;
        }

            .suggestion__item-alt .item-overlay .check-box.icon {
                font-weight: 600;
                color: #C4C4C4;
            }

                .suggestion__item-alt .item-overlay .check-box.icon::before {
                    position: absolute;
                    right: -4px;
                    top: -4px;
                    height: 36px;
                    width: 36px;
                }

        .suggestion__item-alt .item-overlay.is-selected {
            background: rgba(104,199,81,0.2);
            border: 2px solid #68C751;
        }

            .suggestion__item-alt .item-overlay.is-selected:not(.is-disabled) .check-box {
                border: 2px solid #68C751;
                margin: -2px;
                color: #68C751;
            }

        .suggestion__item-alt .item-overlay.is-disabled:not(.is-selected) .check-box {
            background: #EEEEEE;
        }

        .suggestion__item-alt .item-overlay.is-disabled.is-selected .check-box {
            border: 2px solid rgba(104, 199, 81, 0.2);
        }

            .suggestion__item-alt .item-overlay.is-disabled.is-selected .check-box.icon {
                color: rgba(104, 199, 81, 0.2);
            }

    .suggestion__item-alt .suggestion-item-details {
        display: flex;
        flex-direction: column;
        position: absolute;
        max-width: 16vw;
    }

        .suggestion__item-alt .suggestion-item-details .item-qty,
        .suggestion__item-alt .suggestion-item-details .item-price,
        .suggestion__item-alt .suggestion-item-details .item-extended-price {
            display: inline-block;
            word-break: break-all;
            font-size: 14px;
            line-height: 1.2;
            padding: 4px 5px 0px 5px;
            opacity: 0.8;
            left: 0px;
        }

        .suggestion__item-alt .suggestion-item-details .item-qty {
            font-size: 17px;
            min-height: 28px;
        }

            .suggestion__item-alt .suggestion-item-details .item-qty .filler {
            }

        .suggestion__item-alt .suggestion-item-details .item-price {
        }

        .suggestion__item-alt .suggestion-item-details .strikethrough-diagonal {
            position: relative;
        }

            .suggestion__item-alt .suggestion-item-details .strikethrough-diagonal:before {
                position: absolute;
                content: '';
                left: 0;
                top: 45%;
                right: 0;
                color: #EC4D44;
                border-top: 1px solid;
                border-color: inherit;
                -webkit-transform: skewY(-10deg);
                -moz-transform: skewY(-10deg);
                transform: skewY(-10deg);
            }

        .suggestion__item-alt .suggestion-item-details .item-extended-price.discounted {
            font-size: 16px;
            color: #EC4D44
        }

.suggestion-loader {
    position: fixed;
    z-index: 499;
    top: 20%;
    left: 50px;
    right: 0;
    bottom: 0;
    text-align: center;
}

.suggestion-button-wrapper {
    margin-right: 8px;
}

    .suggestion-button-wrapper .suggestion-btn,
    .suggestion-btn {
        /*position: absolute;*/
        color: white;
        font-weight: bold;
        right: 0;
        margin: 10px 6px;
        background: #53606d;
        padding: 0 20px;
        min-width: 108px;
    }

.suggestion-filter-btn {
    position: absolute;
    color: white;
    font-weight: bold;
    margin: 10px 0px;
    background: #53606d;
    padding: 10px;
    line-height: normal;
}

    .suggestion-filter-btn .filter-icon {
        color: #ffffff;
        height: 20px;
        width: 20px;
    }

    .suggestion-filter-btn.is-active {
        background-color: white;
    }



.suggestion-filter {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    fill: white;
}

.suggestion-filter-btn.is-active .suggestion-filter {
    fill: #53606d;
}

.suggestion-filter svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.suggestion-title {
    /*display: inline-block;*/
    margin: 10px;
    padding: 0px 5px;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    flex: 0 1 auto;
}

.suggestion-category {
    display: inline-block;
    text-align: center;
    /*width: calc(100% - 360px);*/
    margin: 10px;
    line-height: 40px;
    flex: auto
}

.suggestion-title-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.suggestion-totals {
    display: flex;
    flex-direction: column;
    font-size: 20px;
}

    .suggestion-totals .totals-details,
    .suggestion-totals .totals-global {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        padding: 10px 14px;
    }

    .suggestion-totals .totals-global {
        margin-bottom: 10px;
    }

        .suggestion-totals .totals-details .value,
        .suggestion-totals .totals-global .value {
            font-weight: 500;
        }

            .suggestion-totals .totals-details .value.font-medium {
                font-family: 'Roboto Medium';
            }

            .suggestion-totals .totals-details .value.font-black,
            .suggestion-totals .totals-global .value.font-black {
                font-family: 'Roboto Black';
            }

        .suggestion-totals .totals-details .label,
        .suggestion-totals .totals-global .label {
            margin-left: 20px;
        }



@charset 'UTF-8';
/* Icons */
@font-face {
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;
    src: url('./slick/fonts/slick.woff') format('woff');
}

.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 85%;
    display: block;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

    .slick-prev:hover,
    .slick-prev:focus,
    .slick-next:hover,
    .slick-next:focus {
        color: transparent;
        outline: none;
        background: transparent;
    }

        .slick-prev:hover:before,
        .slick-prev:focus:before,
        .slick-next:hover:before,
        .slick-next:focus:before {
            opacity: 1;
        }

    .slick-prev.slick-disabled:before,
    .slick-next.slick-disabled:before {
        opacity: .25;
    }

    .slick-prev:before,
    .slick-next:before {
        font-size: 36px;
        line-height: 1;
        opacity: .75;
        color: white;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

.slick-prev {
    left: 15px;
}

    .slick-prev:before {
        content: '←';
    }

.slick-next {
    right: 15px;
}

    .slick-next:before {
        content: '→';
    }

.suggestion__pagination .slick-dots {
    display: block;
    position: absolute;
    top: 85%;
    display: block;
    width: 85%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.suggestion__pagination.suggested-products .slick-dots {
    top: unset;
}


.suggestion__pagination.suggested-products .slick-prev,
.suggestion__pagination.suggested-products .slick-next {
    top: unset;
}

.suggested_item_price {
    top: 25px;
}

.suggested_item_qty {
    top: 0px;
}

.suggested_item_qty,
.suggested_item_price {
    display: inline-block;
    position: absolute;
    word-break: break-all;
    font-size: 0.9vw;
    line-height: 1.2;
    max-width: 48%;
    padding: 4px 5px 3px 5px;
    background: #fff;
    opacity: 0.8;
    left: 0px;
}

.discount-label {
    right: -4px;
    top: -10px;
    padding: 10px;
    position: absolute;
    float: left;
    min-width: 60px;
    -webkit-border-radius: 0 4px 0 4px;
    -moz-border-radius: 0 4px 0 4px;
    border-radius: 0 4px 4px 0;
}

    .discount-label:after {
        right: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        border-color: rgba(136, 183, 213, 0);
        border-width: 20px;
        top: 50%;
        margin-top: -20px;
    }

    .discount-label:before {
        content: '';
        z-index: 2;
        position: absolute;
        top: 42%;
        right: 100%;
        width: 7px;
        height: 7px;
        opacity: .95;
        background: #ffffff;
        border-radius: 7px;
        -webkit-box-shadow: inset .5px 0 rgba(0, 0, 0, 0.6);
        box-shadow: inset .5px 0 rgba(0, 0, 0, 0.6);
    }


    .discount-label span {
        color: #ffffff;
        font-size: 16px;
        text-align: center;
        font-family: "Raleway",Helvetica;
    }


.red {
    background-color: #E80707;
}

    .red:after {
        border-right-color: #E80707;
    }


.blue {
    background-color: #1883DB;
}

    .blue:after {
        border-right-color: #1883DB;
    }

.green {
    background-color: #16B516;
}

    .green:after {
        border-right-color: #16B516;
    }

.yellow {
    background-color: #feaa00;
}

    .yellow:after {
        border-right-color: #feaa00;
    }

.gray {
    background-color: #737373;
}

    .gray:after {
        border-right-color: #737373;
    }

.black {
    background-color: #000;
}

    .black:after {
        border-right-color: #000;
    }

.device_center_info {
    line-height: 1.2;
    display: block;
    font-family: 'Roboto Regular', Arial, sans-serif;
    font-size: 16px;
    line-height: 59px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 90px;
    text-align: center;
}

.suggestion-filters {
    /*display: inline-block;
    position: absolute;*/
    flex-basis: 40px;
}

.suggestion-filters-items {
    position: absolute;
    z-index: 2000;
    bottom: 4px;
    right: -40px;
    width: 300px;
    color: #333;
    background: #eee;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transform: scaleY(0) translate(0, -100%);
    transform: scaleY(0) translate(0, -100%);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    transition: transform 0.3s ease-out;
    padding: 8px;
    will-change: auto;
}

    .suggestion-filters-items.is-open {
        -webkit-transform: scaleY(1) translate(0, 0);
        transform: scaleY(1) translate(0, 0);
    }


.suggestion-filters_list {
    overflow: auto;
    max-height: 250px;
}

.suggestion-filters__item {
    position: relative;
    padding: 5px 20px 5px 20px;
    text-align: left;
    height: 50px;
    line-height: calc(50px - 10px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.08s ease-in-out, color 0.08s ease-in-out;
    background-color: #fff;
    margin-bottom: 4px;
    will-change: transition;
}

    .suggestion-filters__item.is-active {
        color: #3888AD;
    }

.no-touch .suggestion-filters__item:hover {
    background: #eee;
}

.no-touch .suggestion-filters__item:active {
    color: #fff;
    background: #3888AD;
}

.suggestion-filters__item:active {
    color: #fff;
    background: #3888AD;
}

.filter-title {
    height: 14px;
    left: 8px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 14px;
    /* identical to box height */
    color: #3F424B;
    margin: 2px 0px 12px;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    pointer-events: auto;
    -webkit-backface-visibility: hidden;
    -webkit-transition: opacity 0.1s linear;
    -moz-transition: opacity 0.1s linear;
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
    z-index: 1051;
    opacity: 0.2;
    will-change: auto;
}


.signature,
.commissions,
.serial-item-tracking,
.serial-report-details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    -webkit-backface-visibility: hidden;
    -webkit-transition: opacity 0.1s linear;
    -moz-transition: opacity 0.1s linear;
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
    z-index: 1052;
    background: white;
    will-change: auto;
}

.signature-content {
    min-height: 280px;
    min-width: 300px;
}

.signature-content-img {
    padding: 8px;
    border: 1px solid rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
}

    .signature-content-img.signature-content-img-large {
        min-width: 500px;
        min-height: 220px;
    }

    .signature-content-img span {
        line-height: 30px;
        margin: 16px;
    }

    .signature-content-img img {
        max-width: 508px;
        max-height: 372px;
    }


.signature__container {
    overflow: auto;
    padding: 5px 10px;
    height: 100%;
    font-size: 0;
}

.signature-btn {
    font-weight: bold;
    padding: 0 20px;
    margin: 0px 32px 16px;
}

.signature-btn-secondary {
    color: #53606d;
    background: none;
    border: 1px solid #53606d;
    left: 0;
}

.signature-btn-main {
    color: white;
    background: #53606d;
    right: 0;
}

.signature-title {
    margin: 10px;
    padding: 0px 5px;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    font-size: 16px;
}

.signature-capture-container {
    position: relative;
    z-index: 1;
}

    .signature-capture-container + div {
        color: #eef0f3;
        font-size: 48px;
        position: absolute;
        text-align: center;
        top: 90px;
        width: 100%;
        z-index: 0;
    }

.signature-btn-container {
    display: flex;
    justify-content: space-between;
}

.commissions-overlay {
    z-index: 100;
}

.commissions,
.serial-item-tracking {
    z-index: 101;
    background: white;
    max-width: 648px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    will-change: auto;
    font-family: 'Roboto Medium', Arial, sans-serif;
}

.commissions-title,
.serial-item-tracking-title,
.serial-report-details .title {
    display: flex;
    justify-content: space-between;
    padding: 32px 0 32px 37px;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    color: rgba(0, 0, 0, 0.54);
    border-bottom: 1px solid #C4C4C4;
    align-items: center;
}

.commissions-icon-close,
.serial-item-tracking-icon-close {
    width: 45px;
    height: 42px;
    background: #FFFFFF;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.05);
    position: relative;
    border: none;
    outline: none;
    transition: all .3s ease-out;
    will-change: transition;
}

.commissions-top {
    padding: 20px 34px 50px;
}

    .commissions-top .checkbox .commissions-checkbox-text {
        padding-left: 55px;
        font-weight: 500;
        font-size: 16px;
        line-height: 40px;
        color: #757575;
    }

.commissions-checkbox-top {
    padding-right: 38px;
}

    .commissions-checkbox-top:first-child {
        padding-left: 0;
    }

    .commissions-checkbox-top:last-child {
        padding-right: 0;
    }

.commissions-checkbox.checkbox {
    min-width: 40px;
    min-height: 40px;
}

    .commissions-checkbox.checkbox .icon {
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 4px;
        box-shadow: inset 0 0 0 1px #c4c4c4;
    }

    .commissions-checkbox.checkbox input:checked + .icon {
        background-color: #3888AD;
    }

.checkbox .commissions-checkbox-text {
    line-height: 40px;
    font-size: 14px;
    letter-spacing: 1.25px;
    padding-left: 66px;
    color: #757575;
}

.commissions-inner,
.serial-item-tracking-inner {
    display: flex;
}

.commissions-overflow {
    overflow-y: scroll;
    height: 419px;
    padding: 0 34px;
}

.commissions-legend-text-first {
    padding-left: 66px;
}


.commissions-legend-text {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    line-height: 18px;
}

.commissions-legend-image {
    background: url('images/baseline-keyboard_arrow.svg') no-repeat center center;
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

    .commissions-legend-image.sorted {
        content: '';
        transform: scale(1, -1);
    }

.commission-table th,
.product-list-container th {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
}

.commission-table td,
.product-list-container td {
    padding: 10px 0;
    vertical-align: middle;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
}

.commission-table tr:first-child td,
.product-list-container tr:first-child td {
    padding-top: 20px;
}

.commission-table td:first-child {
    width: 50%;
}

.commissions-legend {
    color: #333333;
    padding: 0 0 19px;
    text-align: left;
    border-bottom: 1px solid #C4C4C4;
    cursor: pointer;
    letter-spacing: 1.25px;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    font-family: 'Roboto Medium', Arial, sans-serif;
}

.commissions-field {
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.commissions-field-disabled:after {
    content: '';
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: transparent;
}

.commissions-input {
    border-bottom: 1px solid #C4C4C4;
    height: 40px;
    color: #757575;
    font-size: 16px;
    line-height: 19px;
    text-align: left;
    width: 100%;
    padding: 6px 14px;
    color: #757575;
}

    .commissions-input:disabled {
        background: transparent;
        opacity: .7;
    }

.commissions-bottom {
    display: flex;
    justify-content: space-between;
    padding: 37px 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    color: rgba(0, 0, 0, 0.54);
    border-top: 1px solid #C4C4C4;
    align-items: center;
    letter-spacing: 1.25px;
}

.commissions-col {
    width: 50%;
    display: flex;
    align-items: center;
}

    .commissions-col:last-child {
        justify-content: flex-end;
    }

.commissions-btn {
    margin-left: 4px;
    margin-right: 4px;
    border-radius: 4px;
    min-width: 122px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    line-height: 18px;
}

.commissions-total {
    font-size: 18px;
    color: #757575;
    font-weight: 500;
}

.commissions-btn.btn-blue {
    background-color: #3888AD;
}

.commissions-btn.btn-red {
    background-color: #F44336;
}

.commissions-score-wrong {
    color: #F44336;
}

.commissions-btn:first-child {
    margin-left: 0;
}

.commissions-btn:last-child {
    margin-right: 0;
}

.payment-overlay,
.serial-item-tracking-overlay,
.suggestion-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    pointer-events: auto;
    -webkit-backface-visibility: hidden;
    -webkit-transition: opacity 0.1s linear;
    -moz-transition: opacity 0.1s linear;
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
    z-index: 10021;
    opacity: 0.2;
    will-change: auto;
}

.serial-item-tracking-overlay {
    z-index: 12021;
}

.suggestion-overlay {
    z-index: 1040;
}

.payment-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    -webkit-backface-visibility: hidden;
    -webkit-transition: opacity 0.1s linear;
    -moz-transition: opacity 0.1s linear;
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
    z-index: 10052;
    background: white;
    max-width: 1196px;
    width: 100%;
    min-height: 748px;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: 0 32px;
    will-change: auto;
}

@media screen and (max-width: 1280px) and (max-height: 768px) {
    .payment-popup {
        width: calc(100% - 80px);
        margin-left: 40px;
    }
}

.payment-popup-header {
    display: flex;
    justify-content: space-between;
    padding: 27px 0;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: rgba(0, 0, 0, 0.54);
    border-bottom: 1px solid #C4C4C4;
    align-items: center;
    font-family: 'Roboto Medium', Arial, sans-serif;
}

.payment-content {
    text-align: center;
    min-height: 542px;
    display: inline-block;
    margin: 0 auto;
    width: 100%;
}

.payment-title-container {
    width: 100%;
    position: relative;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

    .payment-title-container .payment-coupon-icon {
        fill: #ec4a41;
        height: 48px;
        width: 48px;
    }

    .payment-title-container .payment-coupon,
    .payment-title-container .payment-amount {
        width: 33%;
        line-height: 42px;
        margin: 32px 0 0;
        padding: 8px;
    }

    .payment-title-container .payment-coupon {
        display: flex;
        align-items: center;
        cursor: pointer
    }

        .payment-title-container .payment-coupon .payment-coupon-description {
            font-family: 'Roboto Regular', Arial, sans-serif;
            color: #ec4a41;
            margin-left: 12px;
            line-height: 24px;
        }

            .payment-title-container .payment-coupon .payment-coupon-description :hover {
                text-decoration: underline;
            }

    .payment-title-container .payment-amount {
        text-align: center;
        display: inline-block;
    }

.payment-popup-footer {
    display: flex;
    justify-content: space-between;
    padding: 36px 0;
    font-size: 16px;
    line-height: 19px;
    color: rgba(0, 0, 0, 0.54);
    border-top: 1px solid #C4C4C4;
    align-items: center;
}

.payment-popup-close {
    width: 45px;
    height: 42px;
    background: #FFFFFF;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.05);
    position: relative;
    border: none;
    outline: none;
    transition: all .3s ease-out;
    will-change: transition;
}

.payment-popup-close-item {
    background: url("images/icons/payment-popup-close.svg") no-repeat center;
    opacity: 0.54;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: block;
    transition: all .3s ease-in;
    will-change: transition;
}

.payment-popup-close:hover,
.payment-popup-close:active {
    transform: translate(0, 1);
    transform: scale(.9);
}

    .payment-popup-close:hover .payment-popup-close-item,
    .payment-popup-close:active .payment-popup-close-item:active {
        transform: scale(1);
    }

.payment-wrapper {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 978px;
    width: 100%;
    margin: 0 auto;
    min-height: 200px;
    padding: 16px 0;
}

.payment-item {
    position: relative;
    padding: 8px;
    width: 33%;
    height: 124px;
    outline: none;
    border: none;
    background: transparent;
}

.payment-item-inner {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background: #3888AD;
    border-radius: 1px;
    box-shadow: 4px 12px 12px rgba(0, 0, 0, 0.1);
    outline: none;
    border: none;
    transition: all .3s ease-in;
    transform: translate(0, 0);
    height: 112px;
    will-change: auto;
}

    .payment-item-inner:hover,
    .payment-item-inner:active {
        box-shadow: none;
        transform: translate(0, 1px);
        opacity: .9;
    }

.payment-icon {
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.payment-text {
    text-align: left;
    width: 65%;
    font-size: 20px;
    line-height: 28px;
    color: white;
    font-family: 'Roboto Medium', Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px 0 0;
    box-sizing: border-box;
}

.payment-popup-back,
.payment-popup-forward {
    outline: none;
    border: none;
    box-shadow: none;
    font-size: 16px;
    line-height: 19px;
    color: rgba(143, 135, 135, 0.75);
    background: transparent;
    padding: 6px 0;
}

    .payment-popup-forward span,
    .payment-popup-back span {
        display: inline-block;
        vertical-align: middle;
    }

    .payment-popup-back img {
        margin-right: 10px;
        display: inline-block;
        vertical-align: middle;
    }

    .payment-popup-forward img {
        margin-left: 10px;
        display: inline-block;
        vertical-align: middle;
    }

    .payment-popup-back.hide,
    .payment-popup-forward.hide,
    .payment-popup-pages.hide {
        visibility: hidden;
        opacity: 0;
    }

.payment-popup-pages {
    color: #8F8787;
    font-size: 16px;
    line-height: 19px;
}

.payment-amount {
    position: relative;
    color: #000000;
    font-size: 36px;
    line-height: 42px;
    display: inline-block;
    margin: 32px 0 0;
    font-family: 'Roboto Regular', Arial, sans-serif;
}

.payment-description {
    display: block;
    font-size: .875rem;
    line-height: normal;
}

.payment-method-placeholder {
    display: flex;
    justify-self: center;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    min-height: 330px;
    font-family: 'Roboto Light', Arial, sans-serif;
    font-size: 24px;
    line-height: 40px;
    color: #aaa;
    font-weight: 300;
}

.serial-item-tracking {
    z-index: 12500;
}

.serial-item-tracking-title {
    padding: 16px 0;
    font-size: 22px
}

.serial-item-tracking-overflow {
    min-height: 300px;
    padding: 0 16px;
    margin: 24px 0px 12px;
}

.serial-item-tracking-legend {
    padding: 0 0 19px;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    font-family: 'Roboto Medium', Arial, sans-serif;
}

.serial-item-tracking .product {
    cursor: pointer;
}

    .serial-item-tracking .product:nth-child(2n+1) {
        background: aliceblue;
    }

    .serial-item-tracking .product:hover {
        background: #d2e5f6;
    }

    .serial-item-tracking .product td {
        padding: 20px;
    }

.cart-cash-button-wrapper {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
    height: 60px;
}

.serial-report-details {
    z-index: 11001;
    background: white;
    box-sizing: border-box;
    padding: 0 20px;
    font-family: 'Roboto Medium', Arial, sans-serif;
    width: calc(100% - 134px);
    margin: 0px 42px;
    height: calc(100% - 25px);
}

    .serial-report-details .content {
        position: relative;
        z-index: 5;
        height: 100%;
    }

        .serial-report-details .content .content-wrapper {
            background-color: #F8F8FA;
            border-radius: 5px;
            margin-top: 20px;
            height: calc(100% - 110px);
            position: absolute;
            width: 100%;
        }

            .serial-report-details .content .content-wrapper .content-wrapper-top {
                margin: 10px;
                display: flex;
                flex-direction: column;
            }

            .serial-report-details .content .content-wrapper .content-wrapper-main {
                position: absolute;
                width: calc(100%);
                bottom: 0px;
                height: calc(100% - 104px);
            }

                .serial-report-details .content .content-wrapper .content-wrapper-main .total-info {
                    margin: 10px;
                }

                    .serial-report-details .content .content-wrapper .content-wrapper-main .total-info .total-info-value {
                        font-weight: 600;
                        margin-right: 20px;
                    }

    .serial-report-details .search__field-wrapper {
        float: left;
        flex-direction: column;
        display: flex;
    }



        .serial-report-details .search__field-wrapper .search__field {
            position: relative;
            padding-left: 50px;
            width: 300px;
            background: white;
        }

        .serial-report-details .search__field-wrapper .search__input-error {
            color: #ec4a41;
            font-size: 12px;
            margin-top: 4px;
        }

    .serial-report-details .search {
        display: flex;
        justify-content: center;
        justify-content: center;
        margin: 20px 20px 10px;
    }

    .serial-report-details .search__input {
        color: #333;
    }

        .serial-report-details .search__input::-webkit-input-placeholder {
            color: #333;
            opacity: .7;
        }

        .serial-report-details .search__input::-moz-placeholder {
            color: #333;
            opacity: .7;
        }

        .serial-report-details .search__input:-ms-input-placeholder {
            color: #333;
            opacity: .7;
        }

        .serial-report-details .search__input::placeholder {
            color: #333;
            opacity: .7;
        }

    .serial-report-details .search__button-wrapper {
        margin-left: 10px;
    }

        .serial-report-details .search__button-wrapper button {
            min-width: 177px;
            height: 50px;
            border-radius: 4px;
        }

    .serial-report-details .search__button {
        color: #333;
        opacity: .7;
    }

    .serial-report-details .title {
        padding: 16px 0 16px 0px;
        font-size: 20px;
    }

    .serial-report-details .history-table-container {
        overflow-y: scroll;
        height: calc(100% - 44px);
        padding: 0 34px;
        background: white;
        margin: 10px;
    }

        .serial-report-details .history-table-container .history-table {
        }

            .serial-report-details .history-table-container .history-table .history-item {
                width: 150px;
                padding: 20px 10px;
            }

            .serial-report-details .history-table-container .history-table .notfound-inner {
                height: calc( 100% - 100px);
                width: calc(100% - 90px);
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 32px;
                opacity: .7;
            }

        .serial-report-details .history-table-container .header-column {
            min-width: 120px;
            padding-top: 20px
        }

            .serial-report-details .history-table-container .header-column .header-column-legend {
                color: #333333;
                padding: 0 0 19px;
                text-align: left;
                border-bottom: 1px solid #C4C4C4;
                cursor: pointer;
                font-weight: 500;
                font-size: 14px;
                line-height: 18px;
                font-family: 'Roboto Medium', Arial, sans-serif;
            }

.flex-box {
    display: flex;
    height: 100%;
}

.flex-box-column {
    flex-direction: column;
}

.flex-box-column-centered {
    flex-direction: column;
    align-items: center;
}

.iframeWrapper {
    width: 100%;
    height: calc(100% - 55px);
    margin-top: 55px;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0, 0, 0);
}

.iosScrollfix {
    overflow: initial;
}

    .iosScrollfix.fixed-overflow {
        overflow: hidden;
    }

    .iosScrollfix .main-header {
        position: fixed;
    }

    .iosScrollfix .iframeWrapper {
        width: 100%;
        height: calc(100% - 5px);
        margin-top: 0;
        padding-top: 55px;
        overflow-y: visible;
    }

.spinner-inner {
    width: 100%;
    position: relative;
    height: 345px;
}

.spinner-logo {
    width: 20%;
    height: 20%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
}

    .spinner-logo svg {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        fill: white;
    }

    .spinner-logo .spin1 {
        animation: spin 1s reverse ease infinite;
        width: 100%;
        height: 100%;
        position: absolute;
        fill: #37537B;
        left: 0;
        top: 0;
    }

    .spinner-logo .spin2 {
        animation: spin 1s ease infinite;
        width: 100%;
        height: 100%;
        position: absolute;
        fill: #37537B;
        left: 0;
        top: 0;
    }

    .spinner-logo .spin3 {
        animation: spin 1s ease infinite;
        width: 100%;
        height: 100%;
        position: absolute;
        fill: #37537B;
        left: 0;
        top: 0;
    }

    .spinner-logo .text {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        fill: #37537B;
        left: 0;
        top: 0;
    }

.base-modal {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12);
}

.base-modal-body {
    padding: 10px 20px 5px 20px;
}

.base-modal .base-modal-body .field-wrapper {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.base-modal-header {
    width: 100%;
    background: var(--secondary-action-color);
    color: var(--white);
    font-family: 'Roboto Light';
    text-align: center;
}

    .base-modal-header h3 {
        font-size: 24px;
        font-weight: normal;
    }

.base-modal .base-modal-footer,
.base-modal .base-modal-header {
    padding: 20px;
}

.base-modal .base-modal-footer {
    border-top: solid 1px #bdc3c7;
    text-align: center;
}

.base-modal .base-modal-body .field-wrapper .input-error {
    color: #EC4D44;
    font-size: 12px;
    margin-top: 4px;
}

.serial-item-modal .base-modal-body .field-wrapper .label {
    width: 70%;
    margin: 4px 0px;
}

.serial-item-modal .base-modal-body .field-wrapper .serial-number-input {
    width: 70%;
    border: 1px solid var(--secondary-action-color);
    padding: 15px 10px;
    font-family: 'Roboto Regular', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    word-break: normal !important;
    white-space: nowrap !important;
}


.price-match-modal .base-modal-body {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 10px;
}

    .price-match-modal .base-modal-body .field-wrapper {
        align-items: stretch;
    }

        .price-match-modal .base-modal-body .field-wrapper .field-group {
            position: relative;
            margin: 8px 0 0;
        }

        .price-match-modal .base-modal-body .field-wrapper .label {
            display: inline-block;
            margin-bottom: 4px;
            font-size: 12px;
            line-height: 14px;
        }

        .price-match-modal .base-modal-body .field-wrapper .input,
        .price-match-modal .base-modal-body .field-wrapper .dropdown {
            font-family: 'Roboto Regular', Arial, sans-serif;
            font-size: 16px;
            border: 1px solid #eee;
        }

.subscriber-cancellation-request-modal .base-modal-header h3 {
    font-size: 24px;
}

.subscriber-cancellation-request-modal .base-modal-body {
    padding-left: 40px;
    padding-right: 40px;
    font-size: 15px;
    text-align: center;
    font-family: 'Roboto Regular', Arial, sans-serif;
}

.subscriber-cancellation-request-modal thead,
.subscriber-cancellation-request-modal tbody {
    display: block;
}

.subscriber-cancellation-request-modal tbody {
    max-height: 140px;
    overflow: auto;
}

.subscriber-cancellation-request-modal table tr {
    display: table;
    width: 100%;
}

.subscriber-cancellation-request-modal th.width-70,
.subscriber-cancellation-request-modal td.width-70 {
    width: 70%;
}

.subscriber-cancellation-request-modal td {
    height: 45px;
    vertical-align: middle;
}

.subscriber-cancellation-request-modal .cancellation-message {
    font-family: 'Roboto Bold', Arial, sans-serif;
    margin: 25px 0;
}

.subscriber-cancellation-request-modal .cancellation-legend {
    margin-bottom: 16px;
}

.subscriber-cancellation-request-modal table {
    text-align: left;
}

.subscriber-cancellation-request-modal .cancellation-legend .cancellation-legend-text {
    text-decoration: underline;
    font-weight: 400;
}

.subscriber-cancellation-request-modal .cancellation-legend-text-first,
.subscriber-cancellation-request-modal .checkbox-text {
    padding-left: 66px;
}

.subscriber-cancellation-request-modal .checkbox .icon {
    left: 20px;
}

.subscriber-cancellation-request-modal .cancellation-info {
    margin: 25px 0;
}



@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

@media screen and (max-height: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {
    .iframeWrapper {
        width: calc(100% + 7px);
        height: calc(100% - 55px);
        overflow-y: auto;
    }
}

@media screen and (max-width: 1280px) {
    .sm-box__title {
        font-size: 16px;
    }

    .item-alt__title_no-img__cell span {
        font-size: 14px;
    }

    .iframeWrapper {
        width: calc(100% + 7px);
        height: calc(100% - 55px);
        overflow-y: auto;
    }
}

@media screen and (max-width: 1024px) {
    .payment-popup {
        position: fixed;
        max-width: calc(100% - 80px);
        left: 0;
        transform: translate(0, -50%);
        margin-left: 80px;
    }

    .horizontal-menu__link {
        line-height: 50px;
        font-size: 12px;
    }

    .iframe-confirmation {
        left: calc(40% + 50px);
    }

    .coupon-card__amount,
    .coupon-card__price,
    .item__price {
        font-size: 12px;
    }

    .sm-box__title,
    .coupon-title,
    #cart-cash-button {
        font-size: 14px;
    }

    .item-alt__title_no-img__cell span {
        font-size: 13px;
    }

    .form_sm {
        max-width: 410px;
    }
}

@media screen and (max-width: 768px) and (max-height: 1024px) {
    .payment-popup {
        max-width: calc(100% - 88px);
        margin-left: 88px;
    }
}

@media screen and (max-width: 1024px) {
    .order__body {
        padding-bottom: 166px;
    }
}

@media screen and (max-width: 768px) {
    .slick-slide img {
        width: 46px;
    }

    .payment-text {
        font-size: 18px;
        padding-right: 10px;
    }

    .horizontal-menu__link {
        line-height: 50px;
        font-size: 12px;
    }
}

@media screen and (max-height: 680px) {
    .payment-popup {
        min-height: 670px;
    }

    .payment-content {
        min-height: 440px;
    }
}

@media screen and (max-width: 1280px) and (max-height: 680px) {
    .suggestion-totals {
        font-size: 16px;
    }
}

@media screen and (max-width: 1280px) and (max-height: 950px) {
    .products__item-alt {
        height: 25%;
    }
}


@media screen and (max-width: 1440px) and (max-height: 900px) {
    .products__item-alt {
        height: 25%;
    }
}

@media screen and (max-width: 1440px) and (max-height: 780px) {
    .products__item-alt {
        height: 33%;
    }
}


@media screen and (min-height: 1024px) and ( max-device-aspect-ratio: 16/9 )and (orientation: landscape) {
    .products__item-alt {
        height: 25%;
    }
}

@media screen and ( max-device-aspect-ratio: 4/3 ) and (orientation: landscape) {
    .products__item-alt {
        height: 25%;
    }
}

.d-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

.align-items-start {
    align-items: flex-start;
}

.pr-50 {
    padding-right: 50px;
}

.f-02 {
    flex: 0.2;
}

.f-1 {
    flex: 1;
}

.f-1x2 {
    flex: 1.2;
}

.f-2 {
    flex: 2;
}