@charset "utf-8";

/*css-reset*/
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

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

main, 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:after, blockquote:before, q:after, q:before {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a { text-decoration: none; }

body {
    font-family: 'Segoe UI', Roboto, 'SF UI', sans-serif;
    background: #3b4256;
    color: #3b4256;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga" on;
}

header {
    position: relative;
    z-index: 200;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    letter-spacing: 1px;
    /* height: 80px; */
    line-height: 80px;
    background: #3b4256;
}

main {
    margin: 0 auto 40px;
    padding: 0 0 2px;
    max-width: 400px;
    background: #fff;
    color: #3b4256;
    border-radius: 2px;
    font-size: 16px;
}

/*Logo*/
.logo { position: relative; }

.logo-title {
    color: #9ca1ad;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}

.logo-icon {
    position: relative;
    display: inline-block;
    margin-right: 8px;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    opacity: .5;
}

.logo-icon:before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: #df2e1b;
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-bottom-right-radius: 8%;
    border-top-right-radius: 8%;
}

.logo-icon:after {
    display: block;
    content: '';
    width: 50%;
    height: 50%;
    position: absolute;
    top: -8%;
    left: -8%;
    border-radius: 50%;
    background: #dfc21b;
}

.logo a { color: #9ca1ad; }

.logo img {
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: middle;
    opacity: .3;
}

/*Навигация*/
header a.prev {
    padding: 0 16px;
    white-space: nowrap;
    color: #d9dee1 !important;
}

header a.prev:before {
    content: '←';
    margin-right: 8px;
    font-size: 18px;
    transition: 1s;
}

.prev.area:hover:before,
.prev.area:active:before { padding-right: 8px; }

nav {
    position: relative;
    bottom: -2px;
    left: 0;
    right: 0;
    margin: inherit;
    width: 100%;
    max-width: inherit;
    height: 40px;
    background: #f4f7fb;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    box-shadow: 0 0 4px #3b4256;
}

nav a,
nav .active {
    float: left;
    width: 25%;
    height: 40px;
    color: #3b4256;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    border-bottom: 4px solid transparent;
    border-right: 1px solid #d9dee1;
    -moz-transition: 0.5s ease;
    transition: 0.5s ease;
}

nav .active { border-bottom-color: #0d49cc; }

nav a:hover { border-bottom-color: #0e52e5; }

nav *:last-child { border-right: none; }

/*Карта*/
.map {
    min-height: 400px;
    background: #f1f1f1;
}

.map .gm-style-iw { max-width: 250px; }

/*Карточки-перевертыши*/
.flipbook-wrapper {
    /*-webkit-perspective: 600px;*/
    /*-moz-perspective: 600px;*/
    /*perspective: 600px;*/
}

.flipbook {
    /*-webkit-transition: -webkit-transform 1.5s;*/
    /*-moz-transition: -moz-transform 1.5s;*/
    /*transition: transform 1.5s;*/
    /*-webkit-transform-style: preserve-3d;*/
    /*-moz-transform-style: preserve-3d;*/
    /*transform-style: preserve-3d;*/
}

.flipbook.active {
    /*-webkit-transform: rotateY( 180deg );*/
    /*-moz-transform: rotateY( 180deg );*/
    /*transform: rotateY( 180deg );*/
}

.flipcard {
    /*-webkit-backface-visibility: hidden;*/
    /*-moz-backface-visibility: hidden;*/
    /*backface-visibility: hidden;*/
    padding: 40px 32px;
}

.flipcard:nth-of-type(2) {
    display: none;
    /*-webkit-transform: rotateY( 180deg );*/
    /*-moz-transform: rotateY( 180deg );*/
    /*transform: rotateY( 180deg );*/
}

.flipbook.active .flipcard:nth-of-type(2) { display: block; }

.flipbook.active .flipcard:nth-of-type(1) { display: none; }

/*Select-2*/
.select2 {
    margin-bottom: 16px;
    cursor: pointer;
}

.select2-hidden-accessible { display: none; }

.select2-dropdown {
    margin-top: -28px;
    display: block;
}

.select2-search__field {
    margin: 0 16px 8px;
    border: 0 !important;
}

.select2-results__option {
    background: #fff;
    border: 1px solid #d9dee1;
    box-shadow: none;
    padding: 0px 4px 0 16px !important;
    border-top: none;
    color: #747e89 !important;
    height: 32px;
    line-height: 31px !important;
    cursor: pointer;
}

.select2-results__option--highlighted { background: #f4f7fb; }

.select2-results__option.select2-results__message { color: #e53935 !important; }

.select2-results__options {
    max-height: 240px;
    overflow-y: scroll;
}

.select2-selection__arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.select2-selection__arrow b {
    position: absolute;
    right: 16px;
    top: 20px;
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    width: 0;
    transition: 0.5s;
}

.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px;
    transition: 0.5s;
}

.select2-results__option[aria-selected="true"] { background: #f1f1f1; }

.select2-selection--multiple .select2-selection__choice {
    display: inline-block;
    margin-right: 12px;
    position: relative;
    padding-left: 10px;
}

.select2-selection--multiple .select2-selection__choice__remove {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.select2-selection--multiple .select2-selection__rendered {
    color: #747e89;
    font-size: 13px;
    transform: translate3d(0, -12px, 0);
    position: absolute;
    top: 15px !important;
    left: 15px;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
    width: 97%;
}

.select2-selection--multiple .select2-search__field {
    position: relative;
    display: block;
    width: 100% !important;
    line-height: 1;
    margin: 8px 0px 0px !important;
}

.select2-results__options[aria-multiselectable="true"] { margin-top: 28px; }

.hidden { display: none; }

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

/*Отступы*/
.wrapper { padding: 40px 32px; }

.padding { padding: 16px; }

.small.padding { padding: 8px; }

.big.padding { padding: 24px; }

.padding { padding: 40px 32px; }

.checkpoint + .sellers { margin-top: -40px; }

.wrapper + .wrapper { padding-top: 0; }

.title-bottom-disable { margin-bottom: 0; }

.wrapper-top-disable { padding-top: 0; }

.wrapper.side-only {
    padding-bottom: 0;
    padding-top: 0;
}


/*Pagination*/
.pagination {
    display: block;
    padding: 32px 32px 64px;
}

.page-separator {
    padding: 8px 0;
    text-align: center;
}

/*Checkbox*/
.checkbox, .radio {
    position: absolute;
    margin: 0;
    width: 22px;
    height: 22px;
    border: 1px solid #c7ccd1;
    border-radius: 2px;
    opacity: 0;
}

.checkbox + label, .radio + label {
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    padding-left: 40px;
    margin-right: 24px;
    margin-bottom: 16px;
    transform: none !important;
    font-weight: 600;
    font-size: 14px !important;
    line-height: 24px;
    color: #3b4256 !important;
    cursor: pointer;
}

.checkbox + label:last-of-type, .radio + label:last-of-type { margin-right: 0; }

.checkbox + label:before,
.radio + label:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    border: 1px solid #c7ccd1;
    border-radius: 2px;
    background: #fff;
}

.checkbox:checked + label:before,
.radio:checked + label:before {
    content: "✓";
    color: #0d49cc;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

/*RadioButton*/
.radio + label:before { border-radius: 50%; }

.radio:checked + label:before { content: ""; }

.radio:checked + label:after {
    position: absolute;
    content: "";
    top: 6px;
    left: 6px;
    width: 12px;
    height: 12px;
    background: #0d49cc;
    border-radius: 50%;
}

/*Comments*/
.comments {
    white-space: nowrap;
    overflow: hidden;
}

.comment {
    display: block;
    margin-right: 8px;
    white-space: normal;
    vertical-align: top;
    overflow: hidden;
}

.comment.text { margin-bottom: 32px; }

.comment:last-of-type {
    margin-right: 0;
    margin-left: 0;
}

.comment-wrapper {
    width: 100%;
    max-height: 320px;
    overflow: hidden;
    overflow-y: scroll;
}

/*Списки*/
ol.list { list-style: decimal inside; }

.list li { padding-bottom: 4px; }

.list li:last-of-type { padding: 0; }

.user-item, .list-item {
    display: block;
    position: relative;
    padding: 20px 80px 20px 32px;
    border-bottom: 1px solid #d9dee1;
    background: #fff;
}

.list-item:last-of-type,
.checkpoint:last-of-type { border: none; }

.list-item:before {
    display: block;
    position: absolute;
    content: '›';
    right: 32px;
    top: 50%;
    margin-top: -12px;
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 18px;
    text-align: center;
    border: 1px solid #c7ccd1;
    border-radius: 50%;
    color: #c7ccd1;
    transition: 0.5s;
}

.list-item:hover:before,
.list-item:active:before {
    right: 24px;
    border-color: #0e52e5;
    color: #0e52e5;
}

.list-item .adress .text,
.checkpoint .adress .text { margin: -10px 0 0; }

.checkpoint {
    padding: 20px 32px;
    border-bottom: 1px solid #d9dee1;
    background: #fff;
}

/*Tables*/
thead {
    text-align: left;
    font-style: italic;
}

th { padding-bottom: 4px; }

/*Headings*//*короткие заголовки разделов*/
h1, .h1 {
    margin-bottom: 24px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 800;
}

/*Headings*//*длинные заголовки для новости или статьи*/
/* h6,.h6,*/
.title, a.title, .soft-title /* soft-title без important отдельно */ {
    display: block;
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: #3b4256 !important;
}

.dark-bg .title,
.dark-bg a.title { color: #f4f7fb !important; }

/*Text*//*наборный текст*/
.text {
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 24px;
}

.small { font-size: 14px; }

.big { font-size: 18px; }

.small.text {
    margin-bottom: 14px;
    line-height: 20px;
}

.big.text {
    margin-bottom: 18px;
    line-height: 26px;
}

/*Interactive*//*интерактивные элементы, аналогично наборному тексту, но полужирные*/
.ui { font-weight: 600; }

/* label, .btn, button, a, .tag, .text.failure, .text.success, .ui, header, footer, .page-separator, .tab */
body {
    /*-webkit-touch-callout: none;  !* iOS Safari *!*/
    /*-webkit-user-select: none;        !* Safari *!*/
    /*-moz-user-select: none;       !* Firefox *!*/
    /*-ms-user-select: none;        !* Internet Explorer, Edge *!*/
    /*user-select: none;*/
}

/*cta*//*лид*/
.cta {
    font-size: 24px;
    line-height: 32px;
}

/*tags*/
.tag {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tag + .title { margin-top: 4px; }

/*tabs*/
.tabs-controls {
    padding: 0 32px;
    border-bottom: 1px solid #d9dee1;
    font-weight: 600;
    white-space: nowrap;
    overflow-x: scroll;
}

main > .tabs:first-child > .tabs-controls { padding: 24px 32px 0; }

.tab {
    display: inline-block;
    margin-right: 24px;
    line-height: 32px;
    color: #3b4256;
    border-bottom: 4px solid transparent;
}

.tab.active {
    border-bottom-color: #0d49cc;
    color: #3b4256 !important;
    cursor: default;
}

.tab:last-child { margin-right: 0; }

.tabs-content { display: none; }

.tabs-content.active { display: block; }

.tabs-content.companies,
.tabs-content.persons,
.tabs-content.map,
.tabs-content.faq { padding: 0; }

.checkpoints > .grey-bg:first-child { margin-top: -24px; }

/*Цвета шрифтов для заголовков*//*для h1-h6 использовать только тушь и белый*/
.ink { color: #3b4256; }

/*цвет заголовка на светлом фоне*/
.ivory { color: #f4f7fb; }

/*цвет заголовка на темном фоне*/

/*Цвета для подсказок и лидов*/
.grey { color: #747e89; }

/*цвет подсказки на светлом фоне*/
.silver { color: #d9dee1; }

/*цвет подсказки на темном фоне*/

/*Цвет бордера*/
/* #c7ccd1 */

/*Интерактивный цвет*//*Синий*/
.interactive {
    color: #0d49cc; /*интерактивный цвет*/
    color: #0e52e5; /*фокус, ховер*/
    color: #0b40b3; /*клик*/
    color: #0d49cc; /*выбранный элемент*/
}

.blue { color: #0d49cc; }

.btn.blue {
    border-color: #0b40b3;
    color: #0b40b3;
}

.blue.bg, .blue-bg {
    color: #fff;
    background-color: #0d49cc;
    border-color: transparent;
}

.grey.bg, .grey-bg { background-color: #f4f7fb; }

.dark-bg {
    background-color: #3b4256;
    color: #f4f7fb;
}

/*Цвета состояний*//*для форм и обратной связи с пользователем*/
.failure { color: #e53935; }

/*красный - ошибка,отказ*/
.success { color: #71bc90; }

/*зеленый - завершено, принято*/
.focus { color: #62b0ff; }

/*фокус на выбранном элементе*/

/*Links*/
a { color: #0d49cc; }

a:hover { color: #0e52e5; }

a:active { color: #0b40b3; }

a.area { position: static !important; }

a.area:after {
    display: block;
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.pointer { cursor: pointer; }

/*Buttons*/
button, .btn {
    display: inline-block;
    padding: 0 15px;
    margin: 16px 8px 16px 0;
    height: 48px;
    background: #fff;
    color: #747e89;
    border: 1px solid #d9dee1;
    border-radius: 2px;
    outline: none;
    white-space: nowrap;
    font-family: 'Segoe UI', Roboto, 'SF UI', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 46px;
    cursor: pointer;
}

/* .btn:only-of-type,  // не подходит если есть a.btn + button */
.btn + .btn {
    margin-right: 0;
    margin-top: 0;
}

.btn:hover {
    border-color: #0e52e5;
    color: #0e52e5;
}

.btn.bg:hover {
    background-color: #0e52e5;
    color: #fff;
}

.btn:active {
    border-color: #0b40b3;
    color: #0b40b3;
}

.btn.bg:active {
    background-color: #0b40b3;
    color: #fff;
}

.btn.selected {
    border-color: #0b40b3;
    background-color: #0b40b3;
    color: #f4f7fb;
}

.btn.disabled {
    color: #747e89 !important;
    border-color: #d9dee1 !important;
    background: #d9dee1 !important;
}

.big.btn {
    padding: 0 24px;
    height: 64px;
    line-height: 62px;
}

.small.btn {
    height: 40px;
    line-height: 38px;
}

/*Закуп*/
.sellers {
    margin-top: -16px;
    padding-bottom: 24px;
}

.checkpoint .sellers { margin: 0 -32px; }

.seller {
    position: relative;
    padding: 20px 32px;
    border-bottom: 1px solid #d9dee1;
}

.seller:last-of-type { border: none; }

.seller-photo {
    display: inline-block;
    width: 25%;
    max-width: 56px;
    vertical-align: middle;
    border-radius: 50%;
}

/* Вынес из под каждой конструкции в одну */
.avatar,
.company-avatar,
.checkpoint-avatar,
.cashback-avatar,
.shipment-avatar,
.request-avatar,
.passport,
.invalid-passport,
.valid-passport,
.request-passport   {
    display: block;
    width: 56px;
    height: 56px;
}

.avatar {
    border-radius: 50%;
    background: url(../icon/149452.svg);
}

.company-avatar { background: url(../icon/149241.svg); }

.checkpoint-avatar { background: url(../icon/149441.svg); }

.cashback-avatar { background: url(../icon/149177.svg); }

.shipment-avatar { background: url(../icon/1037584.svg); }

.request-avatar { background: url(../icon/149156.svg); }

.passport { background: url(../icon/passport.svg); }

.invalid-passport { background: url(../icon/invalid_passport.svg); }

.valid-passport { background: url(../icon/valid_passport.svg); }

.request-passport { background: url(../icon/request_passport.svg); }

.trash-icon, .settings-icon {
    display: block;
    width: 30px;
    height: 30px;
    border: 0 solid white;
}

.trash-icon { background: url(../icon/trash.svg); }

.settings-icon { background: url(../icon/settings.svg); }

.seller-info {
    display: inline-block;
    width: 75%;
    vertical-align: middle;
}

.seller-info + .seller-photo,
.seller-photo + .seller-info { padding-left: 24px; }

.seller-name {
    display: block;
    margin: 0;
    max-width: 200px;
}

a.seller-name:before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
}

.seller-phone { margin: 4px 0 0; }

.seller-info + form { margin-top: 16px; }

.navigation { width: 30% }

.icon-map { background-image: url('../icon/149441.svg'); }

.icon-search { background-image: url('../icon/149309.svg'); }

.icon-list { background-image: url('../icon/179979.svg'); }

.icon-profile { background-image: url('../icon/149220.svg'); }

.icon-add { background-image: url('../icon/149156.svg'); }

.icon-alert { background-image: url('../icon/149301.svg'); }

.icon-call-center {background-image: url('../icon/call-center.svg');}

.icon-report {background-image: url('../icon/report.svg');}

.icon-help {background-image: url('../icon/help.svg');}

.icon-alert[data-count]::after {
    position: absolute;
    content: attr(data-count);
    top: 4px;
    margin-top: 0;
    padding: 3px 5px;
    margin-left: 1px;
    width: auto;
    height: auto;
    background: #0d49cc;
    color: #fff;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 600;
    line-height: 9px;
    text-align: center;
}

/*Textarea*/
textarea {
    display: block;
    position: relative;
    width: 100%;
    height: 160px;
    padding: 15px;
    font-family: 'Segoe UI', Roboto, 'SF UI', sans-serif;
    resize: none;
    background: #d9dee1;
}

textarea:focus, textarea:not(:placeholder-shown) { background: #fff; }

/*Input*/
input[type=text]::-ms-clear, input[type=text]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

label { cursor: pointer; }

input, .select2, textarea {
    color: #3b4256;
    border: 1px solid #d9dee1;
    border-radius: 2px;
    font-size: 16px;
    outline: 0;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input:hover, .select2:hover, textarea:hover { border-color: #c7ccd1; }

input:focus, textarea:focus { border-color: #62b0ff; }

.failure > input, .failure > textarea {
    border-color: #e53935;
    color: #3b4256;
    /*margin-bottom: 8px;*/
}

.success > input, .success > textarea {
    border-color: #71bc90;
    color: #3b4256;
}

.label-inside input + label + .failure,
.label-inside textarea + label + .failure { margin-top: -8px; }

input:invalid { cursor: pointer; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    margin: 0;
    -webkit-appearance: none;
    /*-moz-appearance:  none;*/
    appearance: none;
}

input[type="number"] { -moz-appearance: textfield !important; }

/*Лейблы внутри textarea*/
.label-inside textarea + label {
    position: absolute;
    font-size: 13px;
    color: #3b4256;
    top: 4px;
    left: 15px;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
}

.label-inside textarea{
   position: relative;
    display: block;
    width: 100% !important;
    line-height: 1;
    padding: 22px 15px 7px;
    cursor: pointer;
}

/*Лейблы внутри инпута*/
select { width: 100%; }

fieldset { position: relative; }

.label-inside input, .select2 {
    position: relative;
    display: block;
    width: 100% !important;
    height: 48px;
    line-height: 1;
    padding: 22px 15px 7px;
    cursor: pointer;
}

.delete-row + input { padding: 22px 32px 7px 15px; }

input + label, .select2-selection__rendered {
    position: absolute;
    top: 15px;
    left: 15px;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
}

input:hover + label { color: #3b4256; }

/*input:valid + label,*/
input:focus + label,
.select2-container--open .select2-selection__rendered,
input.filled + label,
input:not(:placeholder-shown) + label {
    color: #747e89;
    font-size: 13px;
    top: 4px;
    /* transform: translate3d(0, -12px, 0); */
}

input.filled { margin-bottom: 16px; }

input[readonly] { color: transparent; }

input[readonly] + label {
    color: #747e89;
    /*transform: translate3d(0, 0, 0);*/
}

/*Кнопка внутри инпута*/
.btn-inside input { padding-right: 100px; }

.btn-inside .btn {
    position: absolute;
    top: 4px;
    right: 4px;
    margin: 0;
    height: 40px;
    line-height: 38px;
}

.delete-row:before {
    position: absolute;
    content: 'x';
    right: 1px;
    top: 1px;
    width: 32px;
    height: 46px;
    text-align: center;
    font-weight: 600;
    line-height: 44px;
    z-index: 10;
}

.delete-row:active:before { background: #f4f7fb; }

/*Переопределяем гугла*/
.pac-container {
    font-family: 'Segoe UI', Roboto, 'SF UI', sans-serif !important;
    border: 1px solid #d9dee1 !important;
    box-shadow: none !important;
}

.pac-container:after {
    display: none !important;
    height: 0;
    background: #fff !important;
}

.pac-item {
    padding: 0px 4px 0 16px !important;
    height: 32px;
    border-top-color: #d9dee1 !important;
    color: #747e89 !important;
    font-size: 10px !important;
    line-height: 31px !important;
}

.pac-icon { display: none !important; }

.pac-item-query {
    padding-right: 4px !important;
    color: #3b4256 !important;
    font-size: 12px !important;
}

/*Датапикер переопределяем*/
.flatpickr-calendar {
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.flatpickr-day.selected {
    background: #0d49cc !important;
    border-color: transparent !important;
}

.flatpickr-prev-month svg path, .flatpickr-next-month svg path { fill: #d9dee1 !important; }

.flatpickr-time input {
    font-size: 24px !important;
    font-weight: 400 !important;
}

.time24hr .numInputWrapper:after {
    position: absolute;
    content: 'час.';
    right: 14px;
    /* left: 96px; */
    color: #ccc;
    font-weight: 600;
    line-height: 48px;
}

.time24hr .numInputWrapper:last-of-type:after { content: 'мин.'; }

.flatpickr-current-month .cur-month { color: #3b4256 !important; }

.time24hr {
    height: 40px !important;
    border-top: 1px solid #d9dee1 !important;
}

/*Адаптив*/

@media (max-width: 1024px) {
    .tabs-controls { overflow-x: scroll; }

    .wrapper > div { overflow-y: scroll; }

    table {
        display: block;
        overflow-y: scroll;
    }
}

@media (max-width: 760px) {

    .courseTable { width: 100% !important; }

    .text {
        font-size: 14px;
        line-height: 20px;
    }

    .small { font-size: 12px; }

    .big { font-size: 16px; }

    .title,
    a.title {
        margin-bottom: 18px;
        font-size: 18px;
        line-height: 26px;
    }

    .tag { font-size: 10px; }

    .btn {
        margin: 8px 8px 8px 0;
        height: 40px;
        font-size: 12px;
        line-height: 38px;
    }

    .sales .last-cell {
        width: 80px;
        max-width: 80px;
        white-space: nowrap;
        text-align: right;
    }

    .mobile { font-size: 11px !important; }

    .mobile-br { display: block !important; }
}

@media (max-width: 480px) {
    header {
        /* height: 48px; */
        line-height: 48px;
    }

    .logo-icon {
        height: 16px;
        width: 16px;
    }

    .logo-title { font-size: 10px; }

    .hide-scrollbar {
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
    }

    .hide-scrollbar::-webkit-scrollbar { width: 0; }

    .mobile { font-size: 10px; }

    .mobile-br { display: block !important; }
}

@media (max-width: 450px) {
    body { background: #fff; }

    nav {
        position: fixed;
        bottom: 0;
    }

    nav a, nav .active {
        border-bottom: none;
        border-top: 4px solid transparent;
    }

    nav .active { border-top-color: #0d49cc; }

    nav a:hover { border-top-color: #0e52e5; }

    .icon-alert[data-count]::after { top: 8px; }
}

@media (min-width: 1000px) {
    main { max-width: 1180px; }
}

.overflow-hidden { overflow: hidden; }

.transparent-bg { background: transparent; }

.col { display: flex; }

.col__aside { width: 33%; }

/*.call-center .col__aside {*/
/*color: #fff;*/
/*}*/

.call-center .client-card {
    margin-bottom: 40px;
    color: #3b4256;
}

.col__main {
    margin-left: 1%;
    width: 67%;
    background: #fff;
}

.checkpoint .buttons .btn { margin-bottom: 0; }

#call-center main { background: transparent; }

.buttons .btn { margin-bottom: 0; }

.operator-tells {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
}

.has_step-separator::before {
    content: '. \A . \A . \A\A';
    white-space: pre;
}

.opt {
    width: 100%;
    text-align: left;
}

.opt th {
    position: relative;
    font-style: normal;
    font-size: 12px;
    font-weight: bold;
    vertical-align: middle;
    color: #879398;
}

.opt tr {
    position: relative;
    height: 63px;
    border-bottom: 1px solid #d9d9d9;
    font-size: 14px;
    cursor: pointer;
}

.opt thead tr {
    height: 41px;
    border-bottom: 2px solid #d9d9d9;
    background: #f1f1f1;
}

.opt td { vertical-align: middle; }


.mobile-br { display: block !important; }
.mobile { font-size: 10px; }

@media (max-width: 1024px) {

    .opt td {
        font-size: x-small;
        padding: 5px;
    }

}

.opt tr.todo { background: lightgreen; }

.opt tr.newWholesale { background: lightblue; }

.opt tr.overdue { background: lightcoral; }

.opt .manager {
    padding-right: 20px;
    padding-left: 20px;
    width: 80px;
    min-width: 80px;
    box-sizing: content-box;
}

.opt .client {
    padding-right: 20px;
    width: 160px;
    max-width: 160px;
    min-width: 80px;
    box-sizing: content-box;
}

.opt .link { display: block; }

/*.opt .client .link::after {*/
/*position: absolute;*/
/*content: '';*/
/*left: 0;*/
/*right: 0;*/
/*top: 0;*/
/*bottom: 0;*/
/*}*/

.opt .client .name {
    display: block;
    width: 120px;
    max-height: 32px;
    line-height: 1.2;
    word-break: break-word;
    text-transform: capitalize;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.opt .city {
    padding-right: 20px;
    width: 100px;
    max-width: 100px;
    min-width: 100px;
    box-sizing: content-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* .opt .business {
} */

.opt .missed-call { width: 32px; }

.opt tbody .missed-call.true {
    background: url(../image/523081.png) left no-repeat;
    background-size: 16px;
}

.btn.green {
    border-color: #28b028;
    color: #28b028;
}

.green.bg, .green-bg {
    color: #fff;
    background-color: #28b028;
    border-color: transparent;
}

.btn.bg.green:hover,
.btn.green-bg:hover {
    background-color: #3bc83b;
    color: #fff;
}

.btn.green:hover {
    border-color: #09e809;
    color: #30d230;
}

.btn.centered {
    width: 100%;
    text-align: center;
}

hr { border: 1px solid #d7d7d7; }

.sales-details { margin-bottom: 4px; }

.sales-details:last-child { margin-bottom: 0; }

#sales-chart text[text-anchor="middle"],
#sales-chart text[text-anchor="end"] { visibility: hidden; }

table { margin-bottom: 20px; }

th {
    padding: 10px;
    font-weight: bold;
    font-style: normal;
    border: 1px solid #d9dee1;
}

td {
    padding: 10px;
    border: 1px solid #d9dee1;
}

tr:nth-of-type(2n) { background: #f9f9f9; }

.shadow {
    margin-bottom: 25px;
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
}

.element { margin: 15px 0 15px 0; }

.WholesaleReportTitle { font-weight: 600; }

.WholesaleReportUl { padding: 10px; }

.parentCalcContainer {
    display: flex;
    flex-direction: column;
}

.childCalcContainer { display: flex; }

.new_color_row { background-color: #bfffe5 !important; }

/* .ready_for_calculate {
    /* margin: 0;
}*/

.open-close-helper { border: 2px solid blue !important; }

input[readonly] { color: black; }

.helpTable {
    width: 100%;
    text-align: center;
}

.helpDivWrapper { display: none; }

.littleDisplay { display: none; }

@media (max-width: 1024px) {

    .fullDisplay { display: none; }

    .littleDisplay { display: inline; }
}

@media (max-width: 1024px) {

    .statusBox { flex-direction: column; }
}

.slider {
  position: relative;
  width: 300px;
  /* Чтобы во время перетаскивания слайда ничего не выделить внутри него */
  user-select: none;
  /* Чтобы запретить скролл страницы, если мы начали двигать слайдер по оси X */
  touch-action: pan-y;
}

@media (max-width: 1024px) {
    .slider { margin: 0 auto 0; }
}
/* Если где-то внутри слайдера будут изображения,
то нужно задать им pointer-events: none,
чтобы они не перетаскивались мышью */

.slider img {
    width: 300px;
    pointer-events: none;
}


.slider-list {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.slider-list.grab { cursor: grab; }

.slider-list.grabbing { cursor: grabbing; }

.slider-track { display: flex; }

.slide {
    display: flex;
    justify-content: center;
    /* Чтобы слайды не сжимались */
    flex-shrink: 0;
    width: 300px;
    height: 300px;
    /* Увеличиваем и центрируем цифру внутри слайда */
    font-size: 50px;
    align-items: center;
    background-color: #efefef;
}

.slider-arrows {
    text-align: center;
    padding-bottom: 10px;
}

.nextS,
.prevS {
    margin: 0 10px;
    background: none;
    border: none;
    font-size: 50px;
    cursor: pointer;
}

.nextS.disabled,
.prevS.disabled {
    opacity: .25;
    pointer-events: none;
}

/* Вынес каждую конструкцию в одну */
.passportClientCreatePopupWrapper,
.cartUserChoisePopupWrapper,
.createNewClientPopupWrapper,
.showDifferent,
.userChoisePopupWrapper,
.passportCreatePopupWrapper {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: #3b4256;
    overflow-y: scroll;
}

#newClientButton { display: none; }

.analysisBase {
    padding: 10px;
    margin: 10px 0 10px 0;
    height: 160px;
    background-color: white;
    border: 1px solid #b2b2b3;
}

.analysisInfoContainer button { margin: 8px 8px 0 0!important; }

.analysisInfo {
    width: 100%;
    text-align: center;
    margin-bottom: 0!important;
}
.analysisButtonBlock { padding: 5px; }

.analysisButton {
    margin: 0!important;
    height: 30px;
    line-height: 10px;
}

#loadButtonsBLock { display: none; }

.avatarButton { margin: 5px 15px 5px 15px; }

.passportBlock { cursor: pointer; }

.documentPassport { background-color: #e9ffe9!important; }

.passportWithBlock {
    border: 3px solid #87b187;
    background-color: white;
}

.clientBlock {
    display: flex;
    align-items: center;
    flex-basis: 49%;
    cursor: pointer;
    background-color: white;
    border-radius: 5px;
    border: 3px solid #cccccc;
}

.avatarButton { margin: 5px 15px 5px 15px; }

.clientWrapper {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
}

.clientBlockWrapper {
    padding: 32px;
    background-color: #ebeff3;
}

#passportBlock {
    width: 50%;
    cursor: pointer;
}

@media (max-width: 1024px) {

    .clientBlock { flex-basis: 100%!important; }

    #userBlock { margin-bottom: 20px; }

    .resultBlock {
        display: flex;
        align-items: center;
        align-content: flex-start;
        justify-content: space-between;
        text-align: right;
    }

    .resultBlock .btn {
        margin-bottom: 5px!important;
        width: 180px;
        font-size: 10px;
    }

    #resultText h2 { font-size: 9px!important; }

}

.resultBlock {
    margin: 0;
    line-height: 1.5;
    text-align: right;
    font-size: 12px;
}

.resultBlock a, .resultBlock button {
    margin: 0 8px 0 0!important;
    float: left;
    text-align: center;
}

.cartsList { margin-top: 20px; }

#resultText h2{
    margin: 0;
    font-size: 15px;
    white-space: nowrap;
}

#finalPrice {
    padding: 48px 32px;
    text-align: right;
}

.company_block { width: 60vw; }

.company_block button {
    padding: 0 10px;
    margin: 0 10px 0 0;
}

.cross-control img {
    width: 30px;
    float: right;
    cursor: pointer;
}

.cross-control img:hover {
    -webkit-transform: rotateZ(20deg);
    -ms-transform: rotateZ(20deg);
    transform: rotateZ(20deg);
}

.popup {
    position: absolute;
    margin: -9999px 0 0 -9999px;
    -webkit-animation-duration: .1s;
    animation-duration: .1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    background: #fff;
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(0, 0, 0, 0.4);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.popup-wrapper .popup {
    padding: 0;
    margin: 0;
}

.popup-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #00000061;
    z-index: 999;
}

.modal{ z-index: 100000 !important; }

.select2-container--open { z-index: 9999999 !important; }

.bold { font-weight: bold; }

.block { display: block; }

.cell-block { flex-basis: 100%; }

.checkboxes { margin-bottom: 20px; }

.res-list { padding-bottom: 30px; }

.mobile { font-size: unset; }

.visits-seller-photo {
    display: inline-block;
    width: 100%;
    max-width: 180px;
    height: 100px;
    vertical-align: middle;
    border-radius: 5px;
    border: 1px solid #000;
    margin-right: 20px;
}

.visits-seller-photo img {
    width: 100%;
    height: 100%;
}

.visits-list { cursor: pointer; }

.visits-seller-photo img{
    width: 100%;
    height: 100%;
}
.res_input_2{
    background: white;
}
.res_input_2::-moz-placeholder { color: rgba(0, 0, 0, 0.8); }

.res_input_2::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.8); }

.res_input_2::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.8); }

.cashbox-filters {
    border: 1px solid #d9dee1;
}

.cashbox-filters .checkpoint {
    padding-bottom: 0;
    border-bottom: 1px solid #d9dee1;
}

.cashbox-filters .checkpoint:nth-child(3) {
    padding-bottom: 0;
    border: none;
}

.cashbox-filters .checkpoint .checkpoint-content {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

.checkpoint-content a {
    font-size: 18px;
}

.checkpoint-content a::after {
    position: relative;
    content: '—';
    left: 10px;
}

.cost-about {
    padding: 14px 32px;
}

.cost-about-title {
    display: block;
    font-weight: 600;
    margin-bottom: 15px;
}

.cost-about-content div {
    margin-bottom: 10px;
}

@media (max-width: 990px) {
    .filters {
        flex-wrap: wrap;
    }
    .cashbox-filters .checkpoint .checkpoint-content span {
        width: 150%;
        margin-left: 0 !important;
    }
    .cost-about-content span {
        display: block;
        margin-top: 5px;
    }
    .checkpoint-content a {
        margin-bottom: 10px;
    }
    .cashbox-filters .checkpoint {
        padding-bottom: 20px;
    }
    .cashbox-filters .checkpoint:nth-child(3) {
        padding-bottom: 20px;
    }
}

.filters {
    display: flex;
    align-items: center;
}

.filters fieldset {
    margin-right: 30px;
}

hr {
    margin: 0;
}

.notif-margin {
    margin-top: 40px;
}

.option-info { font-weight: 400; }

.seller-visits-name {
    font-size: 20px;
    margin: 10px 0;
}

#id_name { margin-bottom: 16px; }

.margin-b5 { margin-bottom: 5px; }

.margin-b10 { margin-bottom: 10px !important; }

.margin-b16 { margin-bottom: 16px; }

.storage-title {
    font-weight: bold;
    margin: 10px 0;
}

.black { color: black; }

.padding-b30 { padding-bottom: 30px; }


.res_input_2 { background: white; }

.res_input_2::-moz-placeholder { color: rgba(0, 0, 0, 0.8); }

.res_input_2::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.8); }

.react-main { max-width: 1780px; }

.tabs-controls::-webkit-scrollbar {
    width: 0;
    height: 4px;
}

.tabs-controls::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2);
}

.react-main { max-width: 1780px; }

.tabs-controls::-webkit-scrollbar {
    width: 0;
    height: 4px;
}

.tabs-controls::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2);
}

.sort-default{
    display: none;
    cursor: pointer;
}

.sort-default-block{
    display: inline-block;
    cursor: pointer;
}
.sort-up {
    display: none;
    cursor: pointer;
}

.sort-up-block { display: inline-block; cursor: pointer;}

.sort-down {
    display: none;
    cursor: pointer;
}

.sort-down-block { display: inline-block; cursor: pointer;}

.clients-table {
    font-size: 13px;
    border-collapse: separate;
    text-align: start;
    table-layout: fixed;
    width: 100%;
}

.clients-table-head {
    position: sticky;
    top: 50px;
    background-color: #ffffff;
}

.clients-table td{
    padding: 4px;
    text-align: start;
    margin-left: 0.5rem;
}

.clients-table td:last-child{
    text-align: center;
    margin: 0;
}

.clients-table-head span{
    display: flex;
    justify-content: space-between
}

.clients-table-width { width: 0; }

.clients-table-width-3 { width: 3%; }

.clients-table-width-5 { width: 5%; }

.clients-table-width-6 { width: 6%; }

.clients-table-width-15 { width: 15%; }

.clients-table-width-30 { width: 30%; }

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

.filters-title {
    margin-bottom: 1rem;
    font-size: 17px;
    font-weight: bolder;
}

.filters-fields { display: flex; }

.filters-margin { margin-right: 20px; }

.audio {
    vertical-align: middle;
    height: 40px;
}

.history-table td {
    padding: 0;
    padding-right: 20px;
    border: none;
    background-color: #fff;
}

.line-break{
    white-space: normal
}

.spinner-container{
    display: flex;
    justify-content: center;
    align-content: center;
}

.spinner{
    background-image: url("../icon/spinner.png");
    background-size: cover;

    animation: 1.5s linear 0s normal none infinite running spinner;
    -webkit-animation: 1.5s linear 0s normal none infinite running spinner;

    width: 100px;
    height: 100px;
}

.puge {
    background-image: url("../icon/puge.png") !important;
    background-size: cover;
}

.image404{
    background-image: url("../icon/404.png");
    background-size: auto;
    width: 800px;
    height: 536px;
}

@keyframes spinner{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg)
    }
}

@-webkit-keyframes spinner{
     0% {transform: rotate(0deg)}
    100%{
        transform: rotate(360deg)
    }
}

.flex-list {
    display: flex !important;
    gap:20px;
}