/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */

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;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
*, *:before, *:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

body {
    background-color: #f7fafc;
    font-family: Roboto;
    color: #364E65;
}

input {
    -webkit-appearance: none;
}


/* DEFAULTS */

h2, .header-2 {
    display: block;
    color: #364e65;
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 13px;
}
.header-3 {
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
}
.header-3--center {
    text-align: center;
}
h5 {
    color: #364e65;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 7px;
}
.header-note {
    color: #90a8be;
    font-size: 18px;
    font-weight: 400;
}
.header-sub {
    display: block;
    color: #364e65;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 13px;
}
.header-sub.with-status {
    line-height: 40px;
}
b {
    font-weight: 700;
}
.owl-carousel .owl-item img {
    width: auto !important;
}
main {
    padding: 85px 0 85px;
    min-height: 100vh;
}
.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.default-body {
    padding: 40px 90px 41px;
}
*::-webkit-scrollbar {
    height: 18px;
    border: 1px solid #e1e5ef;
    background-color: #ffffff;
}

*::-webkit-scrollbar-track {
    border: 1px solid #e1e5ef;
    background-color: #ffffff;
}

*::-webkit-scrollbar-thumb {
    border: 1px solid #e1e5ef;
    background-color: #f0f3f6;
}
*::-webkit-scrollbar-button:vertical:increment, *::-webkit-scrollbar-button:vertical:decrement {
    width: 18px;
    height: 18px;
    border: 1px solid #e1e5ef;
}
*::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(../img/increment-2.png);
    background-position: center;
    background-size: 24px;
}
*::-webkit-scrollbar-button:vertical:increment {
    background-image: url(../img/decrement-2.png);
    background-position: center;
    background-size: 24px;
}

* {
    scrollbar-color: #f0f3f6 #fff;
}

.order-status {
    font-size: 18px;
    line-height: 24px;
    display: inline-block;
    background: #E1E5EF;
    border-radius: 4px;
    padding: 0 8px;
}

.button {
    background: #FFFFFF;
    border: 1px solid #E1E5EF;
    box-sizing: border-box;
    border-radius: 4px;
    font-family: Roboto;
    font-style: normal;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    color: #364E65;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    width: 100%;
    outline: none;
    cursor: pointer;
    position: relative;
    font-weight: 700;
}
.button--secondary {
    background: #364E65;
    color: #FFFFFF;
}
.button--full {
    color: white;
    background: #364E65;
    border-color: #364E65;
}
.button--full-red {
    color: white;
    background-color: #ED1C24;
    border-color: #ED1C24;
}
.button--red-ghost {
    color: #ED1C24;
    border-color: #ED1C24;
}
.button:active {
    filter: brightness(0.9);
}
.button__icon {
    margin-right: 8px;
}
.button--square {
    width: 48px;
}
.button--square-big {
    height: 64px;
    width: 64px;
}
.button--red {
    background: #ED1C24;
    border: 1px solid #ED1C24;
    color: white;
}
.button--green {
    background: #61BD54;
    border: 1px solid #61BD54;
    color: white;
}
.button--disabled {
    filter: grayscale(1);
    opacity: .8;
}
.button--disabled:active {
    filter: grayscale(1);
}
.button--ghost {
    background: transparent;
    border: none;
    text-decoration: underline;
}
.button--small {
    background: #FFFFFF;
    border: 1px solid #E1E5EF;
    box-sizing: border-box;
    border-radius: 4px;
    color: #364E65;
    font-size: 14px;
    line-height: 16px;
    padding: 4px 8px;
    width: auto;
    height: auto;
    min-height: auto;
    min-width: unset;
}
.button-row-space .button {
    margin-right: 16px;
}
.button-row-space .button:last-child {
    margin-right: 0;
}
.button__notification {
    position: absolute;
    top: 0;
    right: 0;
    background: #FFE400;
    border: 1px solid #FFE400;
    color: black;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    padding: 0 2px;
    display: block;
    transform: translate(50%, -50%);
    pointer-events: none;
}
.button-column-wrapper .button {
    margin-bottom: 8px;
}
.button-column-wrapper .button:last-child {
    margin-bottom: 0;
}

.input-wrapper {
    display: flex;
    justify-content: space-between;
}
.input {
    background: #E1E5EF;
    border: 1px solid #E1E5EF;
    border-radius: 4px;
    height: 48px;
    min-width: 42px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #364E65;
    width: 100%;
    outline: none;
    padding: 0 16px;
}
.input:focus {
    outline: none;
    border-color: #364e6555;
}
.input--m-b-8 {
    margin-bottom: 8px;
}
.input--m-b-16 {
    margin-bottom: 16px;
}
.input--m-a-16 {
    margin-right: 16px;
    margin-left: 16px;
}
.input--m-a-8 {
    margin-right: 8px;
    margin-left: 8px;
}
.input--center {
    text-align: center;
}
.input--white {
    color: #364E65;
    background: #FFFFFF;
}

.textarea {
    background: #E1E5EF;
    border: 1px solid #E1E5EF;
    border-radius: 4px;
    min-height: 48px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #364E65;
    width: 100%;
    outline: none;
    padding: 16px;
    resize: none;
}

.note {
    height: 48px;
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 16px;
    border: 1px solid #E1E5EF;
    position: relative;
    border-radius: 4px;
}
.note__status {
    position: absolute;
    right: -0px;
    top: -8px;
    min-width: 16px;
    height: 16px;
    font-size: 12px;
    line-height: 14px;
    color: #000000;
    background-color: white;
    border: 1px solid #E1E5EF;
    transform: translateX(50%);
    text-align: center;
    border-radius: 8px;
}
.note__status--yellow {
    background-color: #FFE400;
    border-color: #FFE400;
}
.note--yellow {
    color: #364E65;
    background-color: rgba(255, 228, 0, 0.15);
    border: 1px solid #FFE400;
}
.note--red {
    background: #ED1C24;
    color: white;
    font-weight: bold;
}
.note--center .note__status {
    top: 50%;
    transform: translate(50%, -50%);
}
.note--red .note__status {
    border-color: #ED1C24;
}

    /* MOBILE BAR */
.mobile-bar {
    height: 86px;
    width: 100%;
    padding: 0 18px;
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 990;
    background-color: #fff;
    border-top: 1px solid #e1e5ef;
    justify-content: space-between;
    align-items: center;
}

.product-actions {
    border-top: 1px solid #E1E5EF;
    display: none;
}
.ordered-product.green {
    animation: greenFlash 1s linear;
}
.ordered-product.red {
    animation: redFlash 1s linear;
}

@keyframes greenFlash {
    0% {
        border-top: 1px solid #E1E5EF;
        box-shadow: none;
    }
    40% {
        box-shadow: 0 0 8px 1px #61bd54;
        border: 1px solid #61bd5480;
    }
    60% {
        box-shadow: 0 0 8px 1px #61bd54;
        border: 1px solid #61bd5480;
    }
    100% {
        border-top: 1px solid #E1E5EF;
        box-shadow: none;
    }
}

@keyframes redFlash {
    0% {
        border-top: 1px solid #E1E5EF;
        box-shadow: none;
    }
    40% {
        box-shadow: 0 0 8px 1px #ED1C24;
        border: 1px solid #ED1C2480;
    }
    60% {
        box-shadow: 0 0 8px 1px #ED1C24;
        border: 1px solid #ED1C2480;
    }
    100% {
        border-top: 1px solid #E1E5EF;
        box-shadow: none;
    }
}

.ordered-product.active .product-actions {
    display: block;
}
.product-actions__row {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
}
.product-actions__input {
    border-radius: 0;
    text-align: center;
    padding: 0;
}
.product-actions__input-wrapper {
    display: flex;
    margin: 0 8px;
}
.product-actions__input-wrapper .button:first-child {
    border-radius: 4px 0 0 4px;
}
.product-actions__input-wrapper .button:last-child {
    border-radius: 0 4px 4px 0;
}

/* POPUP */
.popup {
    position: fixed;
    left: 0;
    right: 0;
    top: 100%;
    bottom: 0;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    background-color: white;
    z-index: 1000;
    display: none;
    flex-direction: column;
    justify-content: space-between;
}
.popup::before {
    content: '';
    background-color: white;
    position: fixed;
    height: 200vh;
    height: calc(var(--vh, 1vh) * 200);
    width: 100%;
    z-index: -1;
}
.popup--bar.popup::before, .popup--holder.popup::before {
    content: none;
}
.popup--holder {
    top: 0;
    height: 240vh;
    height: calc(var(--vh, 1vh) * 240);
    padding-top: 100vh;
    padding-top: calc(var(--vh, 1vh) * 100);
    padding-bottom: 40vh;
    padding-bottom: calc(var(--vh, 1vh) * 40);
    align-items: center;
    justify-content: center;
    background-color: #00000066;
}
.popup-holder__wrapper {
     margin: 0 30px;
     width: calc(100% - 60px);
     max-width: 420px;
     background-color: white;
     border-radius: 8px;
 }
.popup--bar {
    top: 0;
    height: 200vh;
    height: calc(var(--vh, 1vh) * 200);
    padding-top: 100vh;
    padding-top: calc(var(--vh, 1vh) * 100);;
    padding-bottom: 86px;
    justify-content: flex-end;
    background-color: #00000066;
    z-index: 980;
}
.popup--bar__wrapper {
    width: 100%;
    padding: 16px;
    background-color: #ffffff;
}
.popup-holder__main {
    padding: 16px;
}
.popup-holder__aside {
    padding: 16px;
    border-top: 1px solid #E1E5EF;
}
.popup__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 18px;
    height: 85px;
    border-bottom: 1px solid #E1E5EF;
    background-color: white;
}
.popup__header--error {
    background-color: #ED1C24;
    color: white;
}
.popup__header-text {
    font-weight: bold;
    font-size: 24px;
    line-height: 48px;
    margin-right: auto;
}
.popup__header-back {
    margin-right: 8px;
}
.popup__body {
    height: calc(100% - 171px);
    overflow: auto;
    background-color: white;
}
.popup__body--full {
    height: 100%;
}
.popup__action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 86px;
    padding: 0 18px;
    border-top: 1px solid #e1e5ef;
    background-color: white;
}
.popup__default-wrapper {
    padding: 16px;
}
.popup__dark-wrapper {
    padding: 16px;
    background: #F7FAFC;
    min-height: 100%;
}


.big-text {
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
}
.label-text {
    margin-bottom: 8px;
    display: block;
}

/* HEADER */
header {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 970;
    height: 85px;
    width: 100%;
    padding: 0 18px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #e1e5ef;
    background-color: #fff;
}
.menu__icon, .close__icon {
    width: 50px;
    height: 50px;
}
.mode {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    max-width: calc(100vw - 160px);
    overflow: hidden;
}

.mode--with-title {
    width: 100%;
}

.mode__button {
    height: 50px;
    width: 230px;
    min-width: 160px;
    background-color: transparent;
    color: #364E65;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 400;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 4px 12px;
    text-align: center;
}

.mode__title {
    font-weight: bold;
    font-size: 24px;
    line-height: 48px;
}


/* PREVIEW  ORDERS */
.preview-orders-header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.preview-orders-nubmer {
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    padding: 6px 8px;
    margin: 0 0 13px 10px;
    border-radius: 6px;
}
.done-orders {
    background-color: #61bd54;
}
.missing-orders {
    background-color: #ed1c24;
}
.packed-orders {
    background-color: #ff790e;
}
.preview-order-slider {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    width: 100%;
}
.mini-view .order-preview {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    background-color: white;
    border: 1px solid #e1e5ef;
    border-radius: 6px;
    padding: 18px 20px;
    margin: 0 20px 10px 0;

    color: #364E65;
}
.mini-view .order-header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 0;
}
.mini-view .order-header__title {
    font-size: 18px;
    line-height: 21px;
}
.mini-view  .order-header__status {
    font-size: 14px;
    line-height: 16px;
}
.mini-view .order-numbers {
    font-weight: bold;
    font-size: 24px;
    line-height: 32px;
}

.mini-view .order-preview.active {
    border: 1px solid #364E65;
}

.mini-view .order-preview.in-proggress .order-numbers {
    color: #61BD54;
}

.mini-view .order-preview.done {
    background-color: #F0F9EE;;
    border: transparent;
}
.mini-view  .order-preview.done .order-header__status {
    color: #61BD54;;
}
.mini-view  .order-preview.missing {
    background-color: #F68D91;
    color: white;
    border: transparent;
}
.mini-view  .order-preview.missing .order-header__status {
    color: #ED1C24;
}
.mini-view .order-preview.packed {
    background-color: #FFDDC3;
    border: transparent;
}
.mini-view .order-preview.packed .order-numbers {
    color: #61BD54;
}

.mini-view .order-header__worker {
    color: #364e65;
    display: inline-block;
}

.order-preview {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 422px;
    background-color: white;
    border: 1px solid #e1e5ef;
    border-radius: 6px;
    margin: 0 20px 10px 0;
    overflow: hidden;
    min-height: 100px;
}
.order-headline {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.order-header {
    -ms-flex-item-align: center;
    align-self: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 5px 16px;
    width: 100%;
}
.order-headline {
    margin-bottom: 8px;
}
.order-headline__title {
    color: #364e65;
    font-weight: bold;
    font-size: 24px;
    line-height: 32px;
}
.order-headline__title img {
    margin-right: 8px;
}
.order-delivery {
    margin-bottom: 8px;
}
.order-delivery__date {
    font-size: 14px;
    line-height: 16px;
}
.order-tags__status {
    color: #364e65;
    font-size: 18px;
    line-height: 24px;
    background-color: #f0f3f6;
    display: inline-block;
    padding: 8px;
    border-radius: 4px;
    margin: 4px 0;
}
.mini-view .order-tags {
    display: flex;
    align-items: center;
}
.mini-view .order-tags__status {
    background-color: transparent;
    display: inline-block;
    padding: 0px;
    border-radius: 0px;
    margin: 0;
    color: #364e65;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
}
.order-numbers {
    color: #364e65;
    font-size: 32px;
    font-weight: 500;
    margin-left: auto;
    margin-left: 4px;
}
.order-tags {
    margin-top: 5px;
}
.mini-view .order-tags {
    margin-top: 0px;
}
.mini-view .order-actions {
    display: none;
}
.order-actions {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border-left: 1px solid #e1e5ef;
    background-color: white;
}
.order-actions__delivery {
    height: 50%;
    width: 49px;
    background-image: url('../img/delivery_mini.svg');
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid #e1e5ef;
    min-height: 49px;
    min-width: 49px;
}
.order-actions__note {
    height: 50%;
    width: 49px;
    background-image: url('../img/note_mini.svg');
    background-position: center;
    background-repeat: no-repeat;
    min-height: 49px;
    min-width: 49px;
}

.order-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}

.order-row__left {
    display: flex;
    flex-direction: column;
}

.order-row__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.order-prices {
    color: #364e65;
    font-weight: bold;
}

.order-preview.done {
    background-color: #cbe9c7;
}
.order-preview.done .order-tags__status {
    background-color: #61bd54;
    color: white;
}

.order-preview.packing {
    background-color: #ffddc3;
}
.order-preview.packing .order-tags__status {
    background-color: #ff790e;
    color: white;
}


.order-preview.missing {
    background-color: #f68d91;
}
.order-preview.missing .order-headline__title, .order-preview.missing .order-numbers {
    color: white;
}
.mini-view .order-preview.missing .order-tags__status {
    background-color: transparent;
    color: #ed1c24;
}

.order-preview.done {
    background-color: #cbe9c7;
}
.mini-view .order-preview.done .order-tags__status {
    background-color: transparent;
    color: #61bd54;
}

.order-preview.packing {
    background-color: #ffddc3;
}
.mini-view .order-preview.packing .order-tags__status {
    background-color: transparent;
    color: #ff790e;
}


.order-preview.missing {
    background-color: #f68d91;
}
.order-preview.missing .order-headline__title, .order-preview.missing .order-numbers {
    color: white;
}
.order-preview.missing .order-tags__status {
    background-color: #ed1c24;
    color: white;
}

.order-tags__worker {
    background-color: #ffffff;
    display: inline-block;
    padding: 8px;
    color: #90a8be;
    font-size: 14px;
    font-weight: 400;
    border-radius: 4px;
    margin: 4px 0;
}

.mini-view .order-tags__worker {
    background: #364E65;
    border-radius: 12px;
    display: inline-block;
    padding: 0 8px;
    color: white;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    margin: 0 8px 0 0;
}

/* ORDER VIEW */
.title-bar {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
.title-bar__icon {
    margin-right: 8px;
}
.title-bar__text {
    margin-right: 8px;
    font-weight: bold;
    font-size: 24px;
    line-height: 32px;
}
.delivery-date-bar {
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 16px;
}

.ordering-user {
    margin-bottom: 16px;
}
.ordering-user__row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.ordering-user__icon {
    margin-right: 16px;
    min-width: 48px;
}
.ordering-user__data {
    display: flex;
    flex-direction: column;
}
.ordering-user__name {
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
}
.ordering-user__phone {
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
}
.ordering-user__more-container {
    margin-left: auto;
    min-width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.ordering-user__notification {
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
    height: 16px;
    background: rgba(255, 228, 0, 0.5);
    border: 1px solid #FFE400;
    border-radius: 50%;
}
.ordering-user__comment {
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #E1E5EF;
    border-radius: 4px;
}
.ordering-user__address {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 8px;
}
.ordered-product {
    background: #FFFFFF;
    border: 1px solid #E1E5EF;
    border-radius: 4px;
    margin-bottom: 8px;
}
.ordered-product--packed {
    opacity: .5;
}
.ordered-product--packed.active {
	opacity: 1;
}
.ordered-product--packed.active .ordered-product__name,
.ordered-product--packed.active .ordered-product__row {
	opacity: .5;
}
.ordered-product__row {
    display: flex;
    min-height: 56px;
    border-bottom: 1px solid #E1E5EF;
    margin-bottom: 8px;
}
.ordered-product__row--point {
    align-items: center;
    justify-content: space-between;
}
.ordered-product__row-button {
    margin-right: 8px;
}
.ordered-product__index {
    width: 56px;
    min-width: 56px;
    min-height: 56px;
    border-right: 1px solid #E1E5EF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.ordered-product__quantity {
    border-right: 1px solid #E1E5EF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 14px;
    white-space: nowrap;
}
.ordered-product__quantity--point {
    border-right: none;
    margin-right: auto;
}
.ordered-product__quantity--done {
    color: #61BD54;
}
.ordered-product__localization {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 14px;
}
.ordered-product__worker-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0 16px 0 8px;
}
.ordered-product__worker-wrapper {
    position: relative;
}
.ordered-product__worker {
    background: #364E65;
    border-radius: 12px;
    display: inline-block;
    padding: 0 8px;
    color: white;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
}
.ordered-product__info {
    font-weight: bold;
    font-size: 12px;
    line-height: 16px;
    position: absolute;
    left: calc(100% - 3px);
    top: calc(100% - 4px);
}
.ordered-product__done-icon {
    position: absolute;
    right: -8px;
    top: -8px;
}
.ordered-product__name {
    padding: 0 16px;
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 8px;
}
.ordered-product__data {
    padding: 0 16px;
    display: flex;
    border-bottom: 1px solid #E1E5EF;
}
.ordered-product.active .ordered-product__data {
    display: none;
}
.ordered-product__frame {
    width: 64px;
    height: 64px;
    min-width: 64px;
    margin-right: 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E1E5EF;
}
.ordered-product__image {
    max-width: 100%;
    max-height: 100%;
}
.ordered-product__detail {
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 8px;
}
.ordered-product__datail--full {
    width: 100%;
    display: block;
}
.ordered-product__datail--inline {
    display: inline-block;
}
.ordered-product__comment {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    font-size: 14px;
    line-height: 16px;
}
.ordered-product.active .ordered-product__comment {
    display: none;
}
.ordered-product__comment-icon {
    margin-right: 8px;
    min-width: 16px;
}
.ordered-product__complaint {
    padding: 0 16px 16px;
    margin-top: -1px;
    background: white;
}

/* POPUPS */
.add-product-popup__wrapper, .collect-product-popup__wrapper, .scan-product-popup__wrapper, .change-product-popup__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    flex-direction: column;
    text-align: center;
    padding: 16px;
}
.add-product-popup__image, .collect-product-popup__image, .scan-product-popup__image, .change-product-popup__image {
    margin-bottom: 16px;
}

.search-product {
    padding: 16px;
    border: 1px solid #E1E5EF;
    border-radius: 4px;
    margin-bottom: 8px;
}
.search-product__row {
    display: flex;
    margin-bottom: 16px;
}
.search-product__figure {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    border: 1px solid #E1E5EF;
}
.search-product__image {
    max-height: 100%;
    max-width: 100%;
}
.search-product__name {
    font-weight: normal;
    font-size: 18px;
    line-height: 24px;
}

.remove-product-popup__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.remove-product-popup__row--margin {
    margin-bottom: 16px;
}
.remove-product-popup__row--margin-small {
    margin-bottom: 8px;
}

.remove-all-products-popup__wrapper {
    background-color: white;
    border-radius: 8px;
    padding: 16px;
}
.remove-all-products-popup__row--margin {
    margin-bottom: 16px;
}
.remove-all-products-popup__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.later-product {
    background: #FFFFFF;
    border: 1px solid #E1E5EF;
    border-radius: 4px;
    margin-bottom: 8px;
}
.later-product.active .product-actions {
    display: block;
}
.later-product__row {
    display: flex;
    min-height: 56px;
    border-bottom: 1px solid #E1E5EF;
}
.later-product__quantity {
    border-right: 1px solid #E1E5EF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    font-size: 18px;
    white-space: nowrap;
}
.later-product__quantity--done {
    color: #61BD54;
}
.later-product__localization {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 18px;
}
.later-product__worker-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0 16px 0 8px;
}
.later-product__worker-wrapper {
    position: relative;
}
.later-product__worker {
    background: #364E65;
    border-radius: 12px;
    display: inline-block;
    padding: 0 8px;
    color: white;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
}
.later-product__info {
    font-weight: bold;
    font-size: 12px;
    line-height: 16px;
    position: absolute;
    left: calc(100% - 3px);
    top: calc(100% - 4px);
}
.later-product__name {
    font-size: 18px;
    line-height: 24px;
}
.later-product__data {
    padding: 8px 16px;
    display: flex;
}
.later-product__frame {
    width: 48px;
    height: 48px;
    min-width: 48px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E1E5EF;
}
.later-product__image {
    max-width: 100%;
    max-height: 100%;
}
.later-product__comment {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    font-size: 14px;
    line-height: 16px;
    border-top: 1px solid #E1E5EF;
}
.later-product.active .later-product__comment {
    display: none;
}
.later-product__comment-icon {
    margin-right: 8px;
    min-width: 16px;
}
.later-product__notes {
    border-top: 1px solid #E1E5EF;
    padding: 16px;
}
.later-product.active .later-product__notes {
    display: none;
}
.later-product__notes-wrapper {
    margin: 0 -4px;
    width: calc(100% + 8px);
    display: flex;
}
.later-product__pin-button-icon {
    margin: 0 4px 8px;
}
.later-product__notes-wrapper .note {
    margin: 0 4px 8px;
}

.worker-popup__wrapper {
    padding: 16px;
}
.worker-popup__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.worker-popup__content {
    font-size: 14px;
    line-height: 16px;
    margin: 16px 0 32px;
}
.work-popup__content-line {
    margin-bottom: 8px;
}
.worker-popup__notes-wrapper {
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.worker-popup__notes-wrapper .note {
    margin-bottom: 8px;
}

.receipt-sure-popup__wrapper {
    border-radius: 8px;
    padding: 16px;
}
.receipt-sure-popup__row {
    margin-bottom: 16px;
}
.scan-error-popup__wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.scan-error-popup__buttons-wrapper {
    padding: 16px;
}
.scan-error-popup__text {
    margin: auto 0;
}

.note-later-product-popup__wrapper {
    padding: 16px;
}
.note-select-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.note-select-wrapper .note {
    margin-bottom: 8px;
}
.note-products-amount__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.note-products-amount__row--margin {
    margin-bottom: 16px;
}
.note-products-amount__row--margin-small {
    margin-bottom: 8px;
}
.note-products-amount__wrapper {
    padding: 16px;
}
.change-product-confirm-popup__wrapper {
    padding: 16px;
}
.change-product {
    display: flex;
    padding: 16px 8px;
    margin-bottom: 16px;
    border: 1px solid #E1E5EF;
    border-radius: 4px;
}
.change-product__figure {
    border: 1px solid #E1E5EF;
    min-width: 48px;
    height: 48px;
    width: 48px;
    margin-right: 16px;
}
.change-product__data {
    width: 100%;
    font-size: 14px;
    line-height: 16px;
}
.change-product__data-line {
    display: block;
    margin-bottom: 8px;
}
.change-product__data-line:last-child {
    margin-bottom: 0;
}
.change-product__image {
    max-height: 100%;
    max-width: 100%;
}
.customer-popup__wrapper {
    padding: 16px;
}
.customer-popup__address {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 20px;
    display: block;
}
.customer-popup__info-label {
    margin: 16px -16px;
    padding: 16px;
    font-weight: bold;
    font-size: 24px;
    line-height: 48px;
    display: block;
    border: 1px solid #e1e5ef;
    border-width: 1px 0 1px 0;
}
.customer-popup__info {
    font-size: 14px;
    line-height: 24px;
}

.c-checkbox {
    display: flex;
    position: relative;
    user-select: none;
    cursor: pointer;
    padding: 18px 0 0;
}
.c-checkbo__input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
}

.c-checkbox__checkmark {
    position: absolute;
    left: 0;
    height: 32px;
    width: 32px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #E1E5EF;
}
.c-checkbox__checkmark::after {
     display: none;
    content: "";
    position: absolute;
    left: 11px;
    top: 3px;
    width: 7px;
    height: 15px;
    border: solid #364E65;
     border-width: 0 3px 3px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
}

.c-checkbox__label {
     color: #595959;
     font-size: 18px;
     line-height: 30px;
     font-weight: normal;
     margin-left: 38px;
     display: block;
    margin-top: 1px;
}

.c-checkbox__input:checked~.c-checkbox__checkmark::after {
     display: block;
}

.scan {
    width: 50px;
    height: 50px;
    border: 1px solid #E1E5EF;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: 16px;
}

.default-product {
    display: flex;
    background: #FFFFFF;
    border: 1px solid #E1E5EF;
    border-radius: 4px;
    margin-bottom: 8px;
}

.default-product__left-column {
    padding: 16px;
}

.default-product__frame {
    min-width: 80px;
    min-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.default-product__image {
    max-width: 100%;
    max-height: 100%;
}

.default-product__right-column {
    padding: 16px 16px 16px 0;
    width: 100%;
}

.default-product__text {
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 8px;
}

.default-product__text--no-margin {
    margin-bottom: 0;
}

.default-product__input-wrapper {
    display: flex;
    margin-bottom: 8px;
}

.default-product__input {
    margin: 0 8px;
    text-align: center;
    padding: 0 4px;
}

.default-product__input--solo {
    margin: 0;
}

.default-product__quantity {
    width: 100%;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    color: #364E65;
    height: 48px;
    border: 1px solid #E1E5EF;
    box-sizing: border-box;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.default-product__quantity--grey {
    background: #E1E5EF;
}
.default-product__quantity--no-margin {
    margin: 0;
}

.default-product__label {
    font-size: 12px;
    line-height: 16px;
}

.last-product {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(97, 189, 84, 0.04), rgba(97, 189, 84, 0.04)), #FFFFFF;
    box-shadow: 0px -1px 0px #E1E5EF;
    padding: 16px;
}

.last-product--hidden {
    display: none;
}

.last-product__title {
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 16px;
}

.last-product__name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.last-product__frame {
    min-width: 32px;
    min-height: 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

.last-product__image {
    max-width: 100%;
    max-height: 100%;
}

.last-product__name {
    font-size: 12px;
    line-height: 16px;
    width: 100%;
}

.last-product__text {
    font-size: 12px;
    line-height: 24px;
}

.last-product__row {
    display: flex;
    justify-content: space-between;
}

.last-product__quantity {
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
}

.menu-column .button {
    margin-bottom: 8px;
}

.pin-popup__text {
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 16px;
}

.inventory-mode-switcher {
    display: flex;
    margin-bottom: 16px;
}

.inventory-mode-switcher__button:first-child {
    border-radius: 4px 0 0 4px;
}

.inventory-mode-switcher__button:last-child {
    border-radius: 0 4px 4px 0;
}

.inventory-default {
    background: #FFFFFF;
    border: 1px solid #E1E5EF;
    border-radius: 4px;
    padding: 16px;
}

.inventory-default__label {
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 16px;
    display: block;
}

.inventory-default__row {
    display: flex;
    justify-content: space-between;
}

.inventory-default__value {
    margin-right: 8px;
}

@media screen and (max-width: 1024px) and (min-height: 769px), (max-width: 768px) {
    .default-body {
        padding: 20px 18px 21px;
    }
    .mode__button {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 42px;
        width: 160px;
        font-size: 16px;
    }
}

/* Tryb kuriera */

.circles-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}

.circle-box {
    padding: 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #E1E5EF;
}

.circle-box__title {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 24px;
}

.circle-box__inner-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.circle-box__span {
    width: calc(50% - 8px);
}

.circle-confirm__wrapper {
    padding: 16px;
}

.circle-confirm__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.circle-confirm__content {
    margin: 8px 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.circle-confirm__content-line {
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
}

.menu-popup__element {
    width: 100%;
    padding: 16px;
    border-bottom: 1px solid #E1E5EF;
}

.menu-popup__element-text {
    font-size: 18px;
    line-height: 24px;
}

.button-popup__wrapper {
    border-radius: 8px 8px 0 0;
    width: 100%;
    margin-top: auto;
    background: white;
    padding: 16px;
}

.button-popup__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.button-popup__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.points-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.points-list {
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.points-list--no-margin {
    margin: 0;
}

.point-box {
    background: white;
    border: 1px solid #E1E5EF;
    box-sizing: border-box;
    border-radius: 4px;
}

.point-box__header {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #E1E5EF;
}

.point-box__index {
    width: 54px;
    min-height: 54px;
    min-width: 54px;
    border-right: 1px solid #E1E5EF;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
}

.point-box__number {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px;
}

.point-box__content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.point-box__address {
    display: flex;
    align-items: center;
    gap: 8px;
}

.point-box__large-span {
    font-size: 16px;
    line-height: 24px;
}

.point-box__inner-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 8px;
}

.point-box__span {
    width: calc(50% - 8px);
    font-size: 14px;
    line-height: 16px;
}

.point-box__arrows {
    display: flex;
}

.point-box__arrow {
    width: 50%;
    background: white;
    border: none;
    border-top: 1px solid #E1E5EF;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
}

.point-box__arrow.is-inactive {
    opacity: .5;
}

.point-box__arrow:not(.is-inactive):active {
    filter: brightness(0.9);
}

.point-box__arrow + .point-box__arrow {
    border-left: 1px solid #E1E5EF;
    box-sizing: border-box;
}

.point-box__complaint-tag {
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF;
    display: block;
    padding: 4px 8px;
    background: #D81F26;
    border-radius: 4px;
    align-self: center;
    margin-right: 16px;
}

.point-order-popup__wrapper {
    min-height: 100%;
    background: #F7FAFC;
    padding: 16px;
}

.point-order-popup__payment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.point-order-popup__payment-amount {
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    color: #364E65;
    padding: 4px 8px;
    background: #E1E5EF;
    border-radius: 4px;
}

.confirm-signature-popup__wrapper {
    min-height: 100%;
    padding: 16px;
    background: #F7FAFC;
    height: 100%;
}

.confirm-signature-popup__box {
    border: 1px dashed #000000;
    box-sizing: border-box;
    border-radius: 8px;
    height: 100%;
    position: relative;
}

.confirm-signature-popup__canvas {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.point-edit-popup__wrapper {
    min-height: 100%;
    background: #F7FAFC;
    padding: 16px;
}

.point-complaint-list-popup__wrapper {
    min-height: 100%;
    background: #F7FAFC;
    padding: 16px;
    margin: -16px 0 0;
}

.error-box {
    background: rgba(216, 31, 38, 0.1);
    border: 1px solid #D81F26;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 14px;
    line-height: 16px;
    color: #364E65;
    padding: 8px;
}

.error-box--margin {
    margin: 16px 0;
}

.error-box__headline {
    display: block;
    margin-bottom: 8px;
}

.error-box__list {
    list-style-type: disc;
    padding-left: 1rem;
}

.point-complaint-popup__wrapper {
    min-height: 100%;
    padding: 16px;
    background: #F7FAFC;
    height: 100%;
}

.points-map {
    width: 100%;
    min-height: 286px;
    background: black;
    margin: 16px 0;
}

.map {
    padding: 85px 0 0;
}

.map-body {
    display: flex;
    height: calc(100vh - 85px);
}

.map-body__side-column {
    min-width: 400px;
    width: 400px;
    max-width: 400px;
    background: white;
    height: 100%;
    overflow: auto;
}

.map-body__side-column.is-colored {
    background: #F7FAFC;
}

.map-body__map-container {
    width: 100%;
    background: moccasin;
    position: relative;
}

.map-body__overlay {
    position: absolute;
    top: 8px;
    right: 16px;
}

.dispatcher-data {
    display: flex;
    padding: 0 16px;
    background: #F7FAFC;
    border: 1px solid #E1E5EF;
    box-sizing: border-box;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
}

.dispatcher-data__block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.dispatcher-data__label {
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
    color: #364E65;
}

.dispatcher-data__value {
    font-size: 18px;
    line-height: 24px;
    color: #364E65;
}

.delivery-list {
    display: none;
}

.delivery-list.active {
    display: block;
}

.delivery-block {
    border-bottom: 1px solid #E1E5EF;
    padding: 16px;
    position: relative;
}

.delivery-block__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.delivery-block__name {
    font-size: 18px;
    line-height: 24px;
}

.delivery-block__data {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.delivery-block__info-line {
    display: block;
    min-width: 30%;
}

.delivery-block__overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.64);
    justify-content: center;
    align-items: center;
    padding: 16px;
    display: none;
}

.delivery-block:hover .delivery-block__overlay {
    display: flex;
}

.delivery-route {
    display: none;
}

.delivery-route.active {
    display: block;
}

.delivery-route__header {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #E1E5EF;
}

.delivery-route__header.is-hidden {
    display: none;
}

.delivery-route__name {
    margin-right: auto;
    font-weight: bold;
}

.delivery-route__name--center {
    margin: 0 auto;
}

.delivery-route__back {
    width: 24px;
    min-width: 24px;
    height: 24px;
}

.delivery-route-block__header {
    display: flex;
    border-bottom: 1px solid #E1E5EF;
}

.delivery-route-block__index {
    font-size: 18px;
    line-height: 24px;
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.delivery-route-block__name {
    padding: 8px;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    align-items: center;
    border-left: 1px solid #E1E5EF;
}

.delivery-route-block__status {
    margin-left: auto;
    align-self: center;
    padding: 8px 16px;
}

.delivery-route-block__status-done {
    background: #364E65;
    border-radius: 4px;
    position: relative;
    color: #FFFFFF;
    padding: 4px 8px;
}

.delivery-route-block__status-icon {
    position: absolute;
    right: -8px;
    top: -8px;
}

.delivery-route-block__data {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #E1E5EF;
    position: relative;
    width: 100%;
}

.delivery-route-block__info-line {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 16px;
    line-height: 24px;
}

.delivery-route-block__overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.64);
    justify-content: center;
    align-items: center;
    padding: 16px;
    display: none;
}

.delivery-route-block:not(.is-editable) .delivery-route-block__data:hover .delivery-route-block__overlay {
    display: flex;
}


.delivery-route-block__edit-arrows {
    display: none;
    order: -1;
    border-right: 1px solid #E1E5EF;
    border-bottom: 1px solid #E1E5EF;
}

.delivery-route-block__arrow {
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    border: none;
    background-color: white;
}

.delivery-route-block__arrow.is-inactive {
    opacity: .5;
}

.delivery-route-block__arrow:not(.is-inactive):active {
    filter: brightness(0.9);
}

.delivery-route-block__arrow + .delivery-route-block__arrow {
    border-top: 1px solid #E1E5EF;
}

.delivery-route-block.is-editable {
    display: flex;
}


.is-editable .delivery-route-block__header {
    display: none;
}

.is-editable .delivery-route-block__edit-arrows {
    display: block;
}

.delivery-route__done.is-hidden {
    display: none;
}

.delivery-route__button.is-hidden {
    display: none;
}

.delivery-route__button-container.is-hidden {
    display: none;
}

.delivery-route__button-container {
    padding: 16px;
}


.delivery-details {
    display: none;
}

.delivery-details.active {
    display: block;
}

.delivery-details__header {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #E1E5EF;
    background: white;
}

.delivery-details.is-hidden {
    display: none;
}

.delivery-details__name {
    margin-right: auto;
    font-weight: bold;
}

.delivery-details__back {
    width: 24px;
    min-width: 24px;
    height: 24px;
}

.tag-status {
    font-size: 14px;
    line-height: 16px;
    border-radius: 4px;
    padding: 4px 8px;
}

.tag-status--complaint {
    color: white;
    background: #D81F26;
}

.delivery-details__body {
    padding: 16px;
}

.delivery-details__payment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.delivery-details__payment-amount {
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    color: #364E65;
    padding: 4px 8px;
    background: #E1E5EF;
    border-radius: 4px;
}