.multiload-more__btns button, .multiload-more__btn, .multiload-more__title, .multiload__btn, .multiload__title, .load-files__save, .load-files__btn, .load-files__title, .load-template__select, .load-template__btn, .load-template__title, .load-file__btn, .load-file__title, .load-container__file, .load-container__title, .create-one__field-btn, .create-one__search-btn, .create-one__field-title, .create-one__edit-btn, .create-one__edit-btns button, .create-one__share-btn, .create__field-btn, .create__search-btn, .create__field-title, .create__edit-btn, .create__edit-btns button, .create__share-btn, .create__info-title, .create__user-link, .create__user-name, .create__route-title, .create__title, .setting__edit-btn, .setting__edit-btns button, .setting__do-title, .setting__share-title, .setting__share-btn, .setting__info-title, .setting__user-link, .setting__user-name, .setting__route-title, .setting__title, .calendar-wrapper thead td, .calendar-wrapper td.today, .calendar-wrapper td.not-current, .calendar-wrapper td, .search__bottom-btn, .search__date-num, .search__resul-name, .search__box-name, .dropdown-share__copy, .dropdown-share__title, .dropdown-history__title, .point-more__tabs > label, .build__bottom-btn, .build__item-title, .build__title {
    font-family: "SF Pro Display";
    font-weight: 600;
    font-style: normal
}

.multiload-more__item button, .load-files__item button, .load-template__text, .load-container__text, .create-one__bottom-text, .create-one__field-form input, .create-one__search-input input, .create-one__edit-header, .create-one__ready-title, .create__bottom-text, .create__field-form input, .create__search-input input, .create__info-title span, .create__user-descr, .create__route-name, .create__title span, .setting__bottom-text, .setting__do-item, .setting__do-box, .setting__share-input, .setting__info-title span, .setting__user-descr, .setting__route-name, .setting__title span, .search__label, .search__range-title, .search__date-text, .search__result-role, .search__user-input input, .search__input input, .doc__submenu-text, .newdoc__btn, .newdoc__item, .dropdown-share__input, .dropdown-history__route-text, .dropdown-item, .category__menu .user__menu-item, .user__menu-item, .tip-big, .tip, .footer__list-item, .footer__select-text, .footer__view, .notification__user-name, .itinerary__time, .itinerary__user-status, .build__calc-num, .build__calc-text, .build__user-text, .build__user-role, .build__user-name, .build__result-search input, .build__btn span, .history__route-status, .history__route-edit, .history__form-input, .doc__dir-role, .doc__path, .doc__type span, .doc__name, .doc__term, .doc__data, .doc__filter-label, .menu__user-mail, .header__breadcrumbs-item::after, .header__breadcrumbs-item a {
    font-family: "SF Pro Display";
    font-weight: 400;
    font-style: normal
}

.multiload-more__setup, .create-one__bottom-link, .create__bottom-link, .setting__bottom-link, .search__pagination-num, .search__content-item, .dropdown-history__route-date, .status__menu-btn, .status__menu-item, .user__menu-btn, .pagination__list-num, .footer__select-box, .footer__weight, .footer__name, .notification__user-time, .notification__user-name span, .notification__title, .itinerary__bottom-date, .itinerary__user-name, .itinerary__box-name, .itinerary__name, .itinerary__title--status span, .history__bottom-btn, .history__bottom-info, .history__route-procent, .history__route-name, .history__title, .doc__dir-name, .doc__way-more span, .doc__content-status span, .doc__content th, .doc__filter-btn, .doc__filter-reset, .doc__filter-setting, .doc__route-his, .doc__route-add, .doc__add-text, .doc__btns-num, .doc__btns-text, .doc__title, .menu__user-name, .menu__item-link, .menu__btn, .header__breadcrumbs-item:nth-child(2) a {
    font-family: "SF Pro Display";
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/SFProDisplay-Regular.eot");
    src: local("SF Pro Display Regular"), local("SFProDisplay-Regular"), url("../fonts/SFProDisplay-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/SFProDisplay-Regular.woff2") format("woff2"), url("../fonts/SFProDisplay-Regular.woff") format("woff"), url("../fonts/SFProDisplay-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/SFProDisplay-Medium.eot");
    src: local("SF Pro Display Medium"), local("SFProDisplay-Medium"), url("../fonts/SFProDisplay-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/SFProDisplay-Medium.woff2") format("woff2"), url("../fonts/SFProDisplay-Medium.woff") format("woff"), url("../fonts/SFProDisplay-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/SFProDisplay-Semibold.eot");
    src: local("SF Pro Display Semibold"), local("SFProDisplay-Semibold"), url("../fonts/SFProDisplay-Semibold.eot?#iefix") format("embedded-opentype"), url("../fonts/SFProDisplay-Semibold.woff2") format("woff2"), url("../fonts/SFProDisplay-Semibold.woff") format("woff"), url("../fonts/SFProDisplay-Semibold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/SFProDisplay-Bold.eot");
    src: local("SF Pro Display Bold"), local("SFProDisplay-Bold"), url("../fonts/SFProDisplay-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/SFProDisplay-Bold.woff2") format("woff2"), url("../fonts/SFProDisplay-Bold.woff") format("woff"), url("../fonts/SFProDisplay-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal
}

@font-face {
    font-family: "SF Pro Display";
    src: url("/SFProDisplay-Heavy.eot");
    src: local("SF Pro Display Heavy"), local("SFProDisplay-Heavy"), url("../fonts/SFProDisplay-Heavy.eot?#iefix") format("embedded-opentype"), url("../fonts/SFProDisplay-Heavy.woff2") format("woff2"), url("../fonts/SFProDisplay-Heavy.woff") format("woff"), url("../fonts/SFProDisplay-Heavy.ttf") format("truetype");
    font-weight: 800;
    font-style: normal
}

html {
    box-sizing: border-box
}

*, *::after, *::before {
    box-sizing: inherit
}

ul[class], ol[class] {
    padding: 0
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
    margin: 0
}

ul[class] {
    list-style: none
}

img {
    max-width: 100%;
    display: block
}

input, button, textarea, select {
    font: inherit
}

a {
    text-decoration: none
}

button {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
    padding: 0
}

html, body {
    height: 100%
}

.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%
}

.main {
    flex: 1 auto auto
}

.footer {
    flex: 0 0 auto
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-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: rgba(0, 0, 0, 0)
}

.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);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.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 rgba(0, 0, 0, 0)
}

.slick-arrow.slick-hidden {
    display: none
}

body.hide::before {
    content: "";
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    width: 100%;
    background: #1d1929;
    opacity: .2;
    z-index: 1;
    transition: .3s
}

.header {
    padding-top: 30px;
    margin-bottom: 30px
}

.doc__menu button{
    padding-left: 10px;
    padding-right: 10px;
}


.header__breadcrumbs-list {
    display: flex
}

.header__breadcrumbs-item:nth-child(1) {
    display: flex;
    align-items: center
}
.header__breadcrumbs-item:nth-child(1) a {
    margin-left: 8px;
}
.header__breadcrumbs-item a {
    font-size: 14px;
    color: #7d7b83;
 }

.header__breadcrumbs-item:not(:last-child)::after {
    content: "/";
    color: #7d7b83  !important;;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 14px;
    font-weight: 500;

}

.header__breadcrumbs-item:nth-last-child(1) a {
    font-size: 14px;
    color: #4e73f8;
    font-weight: 500;
 }

.menu {
    position: fixed;
    left: 0;
    top: 0;
    background: #fff;
    box-shadow: 2px 0px 40px 10px rgba(0, 0, 0, .07);
    border-radius: 0px 40px 40px 0px;
    height: 100%;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: .5s;
    max-width: 500px;
    z-index: 5
}

.menu i {
    transition: .5s
}

.menu__item-link {
    cursor: pointer
}

.menu.hide {
    max-width: 84px
}

.menu.hide .menu__btn span {
    opacity: 0;
     transform: translateX(-50px)
}

.menu.hide .menu__btn i {
    transform: rotate(180deg)
}

.menu.hide .menu__list span {
    opacity: 0;
    transform: translateX(-50px)
}

.menu.hide .menu__list {
    max-width: 38px
}

.menu.hide .menu__user-info {
    transform: translateX(-50px);
    opacity: 0;
}

.menu.hide i {
    margin-right: 0
}

.menu.hide img {
    margin-right: 0
}

.menu__btn {
    align-items: center;
    display: flex;
    padding: 0;
    font-size: 13px;
    color: #1d1929;
    margin-left: 10px
}

.menu__btn span {

}

.menu__btn i {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-right: 8px;
 }

.menu__list {
    max-width: 600px;
 }

.menu__item {
    margin-bottom: 40px;
    padding: 10px;
    cursor: pointer
}

.menu__item:nth-last-child(1) {
    margin-bottom: 0
}

.menu__item--active {
    background-color: #e7ebf8;
    border-radius: 12px
}

.menu__item--active .menu__item-link {
    color: #4e73f8
}

.menu__item--not.menu__item--active path {
    stroke: #4e73f8
}

.menu__item-sms {
    position: absolute;
    transform: translate(12px, -6px)
}

.menu__item-link {
    align-items: center;
    display: flex;
    padding: 0;
    color: #1d1929;
    font-size: 13px
}

.menu__item-link span {

    white-space: nowrap
}

.menu__item-link i {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-right: 10px
}

.menu__user {
    display: flex;
    align-items: center;
    position: relative
}

.menu__user-img {
    margin-right: 10px;
 }

.menu__user-info {
  }

.menu__user-sms {
    position: absolute;
    transform: translate(27px, 13px);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    background: #f84e58;
    padding: 2px 8px;
    border-radius: 50px
}

.menu__user-name {
    color: #1d1929;
    font-size: 13px;
    margin-bottom: 5px
}

.menu__user-mail {
    color: #7d7b83;
    font-size: 12px
}

.doc__inner .status {
    position: absolute;
    transform: translate(19px, -36px)
}

.doc__inner .status--one {
    transform: translate(30px, -36px)
}

.doc__inner .status--two {
    transform: translate(18px, -20px)
}

.doc__title {
    color: #1d1929;
    font-size: 34px;
    line-height: 124%;
    margin-bottom: 40px
}

.doc__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #e9e9ea;
    margin-bottom: 30px
}

.doc__btns-btn {
    margin-right: 32px;
    padding-bottom: 20px;
    transition: .5s;
    border-bottom: 2px solid rgba(0, 0, 0, 0)
}

.doc__btns-btn.active {
    border-bottom: 2px solid #4e73f8
}

.doc__btns-btn.active .doc__btns-text {
    color: #4e73f8
}

.doc__btns-btn.active span + span {
    background: #f88b4e
}

.doc__btns-text {
    color: #1d1929;
    font-size: 18px;
    margin-right: 10px
}

.doc__btns-num {
    color: #fff;
    font-size: 14px;
    line-height: 150%;
    background: #caccd0;
    border-radius: 20px;
    padding: 0 12px
}

.doc__top-add {
    display: flex;
    align-items: center;
    justify-content: center
}

.doc__add-btn {
    margin-left: 32px;
    display: flex;
    align-items: center;
    justify-content: center
}

.doc__add-btn i {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px
}

.doc__add-text {
    font-size: 18px;
    color: #1d1929
}

.doc__edit {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px
}

.doc__edit-route {
    display: flex
}

.doc__route-add {
    border-radius: 12px;
    background: #4e73f8;
    padding: 8px 10px;
    color: #fff;
    margin-right: 22px;
    font-size: 14px;
    display: flex
}

.doc__route-add i {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px
}

.doc__route-his {
    font-size: 14px;
    color: #1d1929;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid #e9e9ea;
    transition: .3s
}

.doc__route-his:hover {
    border: 1px solid #4e73f8;
    color: #4e73f8
}

.doc__edit-filter {
    display: flex;
    position: relative
}

.doc__filter-setting {
    font-size: 14px;
    color: #1d1929;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid #e9e9ea;
    display: flex;
    align-items: center;
    transition: .3s
}

.doc__filter-setting:hover {
    background: #4e73f8;
    color: #fff
}

.doc__filter-setting:hover span {
    color: #fff
}

.doc__filter-setting:hover svg path {
    stroke: #fff;
    fill: #fff
}

.doc__filter-setting span {
    color: #4e73f8
}

.doc__filter-setting i:nth-last-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px
}

.doc__filter-setting i:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px
}

.doc__filter-reset {
    font-size: 14px;
    color: #1d1929;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid #e9e9ea;
    display: flex;
    align-items: center;
    margin-left: 20px
}

.doc__filter-reset i {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px
}

.doc__filter-menu {
    position: absolute;
    left: 0;
    top: 40px;
    background: #fff;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    border-radius: 16px;
    padding: 10px;
    z-index: 2;
    display: none
}

.doc__filter-menu.show {
    display: block
}

.doc__filter-label {
    display: flex;
    margin-bottom: 10px;
    padding: 8px 10px;
    align-items: center;
    cursor: pointer;
    border-radius: 10px;
    font-size: 14px;
    color: #1d1929
}

.doc__filter-label.checked {
    background: #f7f8fc
}

.doc__filter-label .doc__fake {
    margin-right: 8px
}

.doc__filter-btns {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px dashed #caccd0
}

.doc__filter-btn {
    border-radius: 16px;
    font-size: 12px;
    padding: 16px 35px;
    text-align: center
}

.doc__filter-btn:first-child {
    background: #f8f8f8;
    margin-right: 8px;
    color: #1d1929
}

.doc__filter-btn:last-child {
    color: #fff;
    background: #4e73f8
}

.doc__content {
    white-space: nowrap
}

.doc__content--1, .doc__content--2, .doc__content--3 {
    display: none
}

.doc__content.active {
    display: block
}

.doc__content table {
    width: 100%;
    border-spacing: 0 10px
}

.doc__content tr {
    height: 52px;
    transition: .3s
}

.doc__content tr td:nth-child(1) {
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    padding-left: 14px;
    padding-right: 10px
}

.doc__content tr td:nth-last-child(1) {
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    padding-right: 10px;
    padding-left: 10px
}

.doc__content tr:hover {
    background: #f7f8fc
}

.doc__content th {
    font-size: 14px;
    color: #7d7b83;
    text-align: left;
    padding-right: 10px
}

.doc__content--2 .doc__path, .doc__content--2 .doc__data {
    width: 470px
}

.doc__content-header {
    background: #f8f8f8
}

.doc__content-th:nth-child(1) {
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    padding-left: 14px;
    padding-right: 10px
}

.doc__content-th:nth-last-child(1) {
    width: 25px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    opacity: 0
}

.doc__content-status {
    display: flex
}

.doc__content-status span {
    font-size: 14px;
    border-radius: 12px;
    padding: 4px 8px 4px 20px;
    margin-left: -20px
}

.doc__content-status i {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px
}

.doc__content-green span {
    background: #e8fff4;
    color: #1fca63
}

.doc__content-green i circle {
    fill: #1fca63
}

.doc__content-gray span {
    background: #f8f8f8;
    color: #7d7b83
}

.doc__content-gray i circle {
    fill: #7d7b83
}

.doc__content-orange span {
    background: #fff1e9;
    color: #ee7937
}

.doc__content-orange i circle {
    fill: #ee7937
}

.doc__content-red span {
    background: #ffe8e9;
    color: #e4343f
}

.doc__content-red i circle {
    fill: #e4343f
}

.doc__label {
    display: flex
}

.doc__checkbox {
    display: none
}

.doc__checkbox:checked + .doc__fake::before {
    opacity: 1
}

.doc__content--3 tr td:nth-last-child(1) {
    padding-left: 40px
}

.doc__name, .doc__term, .doc__data {
    font-size: 14px;
    color: #1d1929
}

.doc__term {
    padding-left: 5px
}

.doc__type span {
    font-size: 14px;
    color: #7d7b83;
    padding: 4px 8px;
    border-radius: 12px;
    background: #f8f8f8
}

.doc__type-red span {
    color: #e4343f;
    background: #ffe8e9
}

.doc__path {
    font-size: 14px;
    color: #1d1929;
    width: 114px
}

.doc__path span {
    text-decoration: underline
}

.doc__fake {
    cursor: pointer;
    display: block;
    width: 26px;
    height: 26px;
    border: 2px solid #e9e9ea;
    border-radius: 10px;
    position: relative;
    background: rgba(0, 0, 0, 0)
}

.doc__fake::before {
    content: url("../images/checkbox.svg");
    position: absolute;
    display: block;
    width: 26px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    height: 26px;
    background-color: #4e73f8;
    opacity: 0;
    transition: .2s;
    border-radius: 10px
}

.doc__content-way--td {
    border: 1px dashed rgba(0, 0, 0, 0);
    transition: .3s
}

.doc__content-way--td:hover {
    border: 1px dashed #4e73f8
}

.doc__content-way {
    display: flex;
    width: 280px;
    justify-content: space-between;
    margin-left: 8px;
    position: relative;
    cursor: pointer
}

.doc__content-way::after {
    position: absolute;
    content: "";
    height: 2px;
    width: 71px;
    background: #1d1929;
    left: 46px;
    bottom: 16px;
    border-radius: 50px
}

.doc__content-way::before {
    position: absolute;
    content: "";
    height: 2px;
    width: 71px;
    background: #e9e9ea;
    right: 46px;
    bottom: 16px;
    border-radius: 50px
}

.doc__content-way--template {
    margin: 0 20px;
    width: 483px
}

.doc__content-way--template::after {
    width: 165px;
    background: #e9e9ea
}

.doc__content-way--template::before {
    width: 165px
}

.doc__way-th {
    width: 310px
}

.doc__way-more {
    position: absolute
}

.doc__way-more span {
    color: #fff;
    font-size: 12px
}

.doc__way-more--one {
    transform: translate(14px, -32px)
}

.doc__way-more--one span {
    transform: translate(-24px, 9px);
    position: absolute
}

.doc__way-more--two {
    transform: translate(0px, -17px)
}

.doc__way-more--two span {
    position: absolute;
    transform: translate(-24px, 10px)
}

.doc__way {
    position: relative
}

.doc__way--more {
    transform: translateY(-7px)
}

.doc__way-user {
    min-width: 33px
}

.doc__dir-user {
    display: flex
}

.doc__dir-info {
    margin-left: 10px
}

.doc__dir-info--hor {
    margin-left: 20px;
    margin-top: -7px
}

.doc__dir-name {
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 3px;
    color: #1d1929
}

.doc__dir-role {
    font-size: 12px;
    color: #7d7b83
}

.doc__none {
    padding-left: 10px
}

.history {
    position: fixed;
    top: 0;
    right: -470px;
    transition: .5s;
    width: 460px;
    height: 100%;
    background: #fff;
    border-radius: 16px 0px 0px 16px;
    padding: 20px;
    z-index: 10
}

.history.show {
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    right: 0
}

.history__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px
}

.history__title {
    font-size: 16px;
    color: #1d1929;
    padding-left: 10px
}

.history__btn {
    padding-right: 10px
}

.history__list {
    height: calc(100vh - 205px);
    overflow-y: auto;
    margin-bottom: 10px
}

.history__form {
    display: flex;
    position: relative;
    border: 1px solid #e9e9ea;
    border-radius: 16px;
    height: 51px;
    width: 100%
}

.history__form-input {
    background: rgba(0, 0, 0, 0);
    color: #7d7b83;
    padding: 0 50px 0 20px;
    border: none;
    width: 100%
}

.history__form-input:focus-visible {
    outline: none
}

.history__form-btn {
    position: absolute;
    right: 20px;
    top: 16px
}

.history__route {
    padding: 10px 0
}

.history__route-inner {
    padding: 10px 20px;
    border-radius: 16px;
    position: relative
}

.history__route-inner:hover {
    background: #f7f8fc
}

.history__route-inner::after {
    content: "";
    border-bottom: 1px dashed #caccd0;
    height: 1px;
    width: calc(100% - 20px);
    position: absolute;
    left: 10px;
    bottom: -10px
}

.history__route-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px
}

.history__route-edit {
    font-size: 14px;
    color: #7d7b83
}

.history__route-link:first-child {
    margin-right: 20px
}

.history__route-name {
    margin-bottom: 10px;
    color: #4e73f8;
    font-size: 16px;
    display: block
}

.history__route-progress {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.history__route-progress--100 p {
    color: #20dd82
}

.history__route-progress--orange p {
    color: #f88b4e
}

.history__route-progress--red p {
    color: #f84e58
}

.history__route-progress--gray p {
    color: #1d1929
}

.history__route-procent {
    color: #1d1929;
    font-size: 16px
}

.history__route-status {
    color: #7d7b83;
    font-size: 14px
}

.history__route-line {
    height: 4px;
    background: #1d1929;
    border-radius: 50px;
    z-index: 2;
    margin-top: -4px
}

.history__route-line--100 {
    background: #20dd82
}

.history__route-line--orange {
    background: #f88b4e
}

.history__route-line--gray {
    background: #1d1929
}

.history__route-line--red {
    background: #f84e58
}

.history__route-line--max {
    margin-top: 10px;
    height: 4px;
    background: #e9e9ea;
    border-radius: 50px
}

.history__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px
}

.history__bottom-info {
    font-size: 13px;
    color: #7d7b83
}

.history__bottom-btn {
    background: #4e73f8;
    border-radius: 16px;
    padding: 16px 65px;
    color: #fff
}

.build {
    position: fixed;
    top: 0;
    right: -500px;
    transition: .5s;
    width: 480px;
    height: 100%;
    background: #fff;
    border-radius: 16px 0px 0px 16px;
    padding: 20px;
    z-index: 10;
    padding: 10px 20px 30px
}

.build.show {
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    right: 0
}

.build__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 20px;
    border-bottom: 1px dashed #caccd0
}

.build__title {
    font-size: 14px;
    color: #1d1929;
    line-height: 150%
}

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

.build__btn i {
    display: flex;
    align-items: center
}

.build__btn span {
    font-size: 14px;
    color: #4e73f8;
    text-decoration: underline;
    margin-left: 6px;
    margin-right: 10px
}

.build__list {
    overflow-y: auto;
    height: calc(100vh - 160px)
}

.build__item-title {
    font-size: 14px;
    color: #1d1929;
    margin: 20px 0px 10px
}

.build__item-box {
    padding: 0 10px;
    border-radius: 16px
}

.build__item-user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    border-radius: 16px
}

.build__item-user:hover {
    background: #f7f8fc
}

.build__user-result {
    background: #fff;
    border: 1px solid #caccd0;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, .1);
    border-radius: 16px;
    padding: 10px;
    margin-bottom: 10px;
    display: none
}

.build__user-result.show {
    display: block
}

.build__user-result .build__user-info {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 16px;
    cursor: pointer
}

.build__user-result .build__user-info:hover {
    background: #f7f8fc
}

.build__user-result .build__user-remove {
    display: none
}

.build__result-search {
    position: relative;
    width: 100%;
    margin-bottom: 10px
}

.build__result-search input {
    padding: 11px 20px;
    padding-right: 40px;
    width: 100%;
    border-radius: 16px;
    background: #fff;
    color: #7d7b83;
    font-size: 14px;
    border: 1px solid #e9e9ea
}

.build__result-search input:focus-visible {
    outline: none;
    color: #1d1929;
    border: 1px solid #4e73f8
}

.build__result-search i {
    position: absolute;
    right: 15px;
    top: 11px;
    cursor: pointer
}

.build__user-info {
    display: flex;
    align-items: center
}

.build__user-img {
    width: 36px;
    height: 36px;
    margin-right: 10px
}

.build__user-img.hide {
    display: none
}

.build__user-add {
    width: 36px;
    height: 36px;
    margin-right: 10px
}

.build__user-add.hide {
    display: none
}

.build__user-name {
    margin-right: 10px;
    font-size: 14px;
    line-height: 150%;
    color: #1d1929
}

.build__user-name.hide {
    display: none
}

.build__user-role {
    font-size: 12px;
    color: #7d7b83;
    line-height: 150%
}

.build__user-text {
    font-size: 14px;
    line-height: 150%;
    color: #7d7b83
}

.build__user-text.hide {
    display: none
}

.build__user-remove i {
    display: flex;
    align-items: center
}

.build__user-remove.hide {
    display: none
}

.build__user-btn {
    width: 36px;
    height: 36px
}

.build__user-btn.hide {
    display: none
}

.build__item-days {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    padding-top: 10px;
    border-bottom: 1px dashed #caccd0
}

.build__days-calc {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.build__calc-text {
    margin-right: 10px;
    font-size: 14px;
    color: #7d7b83
}

.build__calc-box {
    padding: 9px 8px;
    display: flex;
    align-items: center;
    border: 1px solid #caccd0;
    border-radius: 40px
}

.build__calc-btn {
    margin: 0 10px;
    height: 20px
}

.build__calc-btn i {
    display: flex;
    align-items: center
}

.build__calc-num {
    font-size: 14px;
    -moz-columns: #1d1929;
    columns: #1d1929;
    width: 16px;
    text-align: center
}

.build__bottom {
    margin: 20px 0
}

.build__bottom-btn {
    width: 100%;
    font-size: 14px;
    color: #fff;
    padding: 16px 20px;
    background: #4e73f8;
    border-radius: 16px
}

.itinerary {
    position: fixed;
    top: 0;
    right: -470px;
    transition: .5s;
    width: 460px;
    height: 100%;
    background: #fff;
    border-radius: 16px 0px 0px 16px;
    padding: 20px;
    z-index: 10
}

.itinerary.show {
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    right: 0
}

.itinerary__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px
}

.itinerary__title--status {
    display: flex;
    align-items: center;
    margin-left: 5px
}

.itinerary__title--status span {
    font-size: 14px;
    border-radius: 12px;
    padding: 4px 8px 4px 20px;
    margin-left: -20px
}

.itinerary__title--status i {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px
}

.itinerary__title--green span {
    background: #e8fff4;
    color: #1fca63
}

.itinerary__title--green i circle {
    fill: #1fca63
}

.itinerary__title--gray span {
    background: #f8f8f8;
    color: #7d7b83
}

.itinerary__title--gray i circle {
    fill: #7d7b83
}

.itinerary__title--orange span {
    background: #fff1e9;
    color: #ee7937
}

.itinerary__title--orange i circle {
    fill: #ee7937
}

.itinerary__title--red span {
    background: #ffe8e9;
    color: #e4343f
}

.itinerary__title--red i circle {
    fill: #e4343f
}

.itinerary__name {
    font-size: 16px;
    color: #1d1929;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #caccd0
}

.itinerary__name span {
    color: #4e73f8;
    text-decoration: underline
}

.itinerary__list {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dashed #caccd0;
    overflow-y: auto;
    height: calc(100% - 180px)
}

.itinerary__box {
    padding: 10px
}

.itinerary__box-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    cursor: pointer
}

.itinerary__box-header.hide .itinerary__box-btn {
    transform: rotate(-90deg)
}

.itinerary__box-name {
    font-size: 14px;
    color: #1d1929
}

.itinerary__box-name span {
    color: #7d7b83
}

.itinerary__box-btn {
    transition: all .3s ease-in-out
}

.itinerary__content {
    transition: all .5s ease-in-out;
    max-height: 1000px;
    border-bottom: 1px dashed #caccd0;
    overflow: hidden
}

.itinerary__content.hide {
    max-height: 0px
}

.itinerary__content-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px
}

.itinerary__user {
    display: flex
}

.itinerary__user-img {
    margin-right: 10px;
    position: relative
}

.itinerary__user-img i {
    position: absolute;
    right: 0;
    top: 0
}

.itinerary__user-info {
    margin-top: 5px
}

.itinerary__user-name {
    margin-bottom: 5px;
    font-size: 14px;
    color: #1d1929
}

.itinerary__user-status {
    font-size: 14px
}

.itinerary__user-status--green {
    color: #1fca63
}

.itinerary__user-status--orange {
    color: #f88b4e
}

.itinerary__user-status--red {
    color: #e4343f
}

.itinerary__user-status--gray {
    color: #7d7b83
}

.itinerary__time {
    font-size: 12px;
    color: #1d1929
}

.itinerary__time span {
    color: #7d7b83
}

.itinerary__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.itinerary__bottom-date {
    color: #7d7b83;
    font-size: 13px;
    line-height: 150%
}

.itinerary__bottom-date span {
    color: #1d1929
}

.itinerary__bottom-link {
    margin-left: 10px
}

.notification {
    position: fixed;
    top: 0;
    right: -470px;
    transition: .5s;
    width: 460px;
    height: 100%;
    background: #fff;
    border-radius: 16px 0px 0px 16px;
    padding: 20px;
    z-index: 10
}

.notification.show {
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    right: 0
}

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

.notification__title {
    font-size: 16px;
    color: #1d1929
}

.notification__list {
    height: 97%;
    overflow-y: auto
}

.notification__user {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px dashed #caccd0;
    position: relative
}

.notification__user:first-child {
    border-top: 1px dashed #caccd0;
    padding-top: 15px
}

.notification__user--add {
    border-bottom: none;
    margin-top: 14px;
    padding-bottom: 0;
    margin-left: 48px;
    flex-wrap: nowrap
}

.notification__user-img {
    position: relative;
    margin-right: 8px
}

.notification__user-info {
    margin-top: 3px
}

.notification__user-name {
    font-size: 14px;
    line-height: 150%;
    color: #1d1929
}

.notification__user-time {
    color: #4e73f8;
    font-size: 12px
}

.notification .status {
    position: absolute;
    right: 0;
    top: 0
}

.notification .new {
    position: absolute;
    right: 10px
}

.footer {
    margin-top: 30px;
    padding-bottom: 30px
}

.footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center
}

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

.footer__name {
    margin-right: 20px;
    font-size: 13px;
    color: #4e73f8
}

.footer__weight {
    color: #7d7b83;
    font-size: 13px
}

.footer__view {
    font-size: 14px;
    color: #7d7b83
}

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

.footer__select-text {
    font-size: 14px;
    color: #7d7b83;
    margin-right: 10px
}

.footer__select-box {
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid #caccd0;
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 14px;
    color: #1d1929;
    cursor: pointer
}

.footer__select-box i {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: 12px
}

.footer__select-num {
    width: 20px
}

.footer__select-list {
    position: absolute;
    background: #fff;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    border-radius: 16px;
    top: -150px;
    right: 4px;
    padding: 10px;
    display: none;
    align-items: center;
    flex-direction: column-reverse;
    z-index: 2
}

.footer__select-list.show {
    display: flex
}

.footer__list-item {
    font-size: 14px;
    color: #1d1929;
    margin-top: 10px;
    border-radius: 10px;
    width: 100%;
    padding: 8px;
    text-align: center
}

.footer__list-item:last-child {
    margin-top: 0
}

.footer__list-item.active {
    background: #f7f8fc;
    color: #4e73f8
}

.pagination {
    display: flex
}

.pagination__arrow {
    padding: 10px 13px
}

.pagination__list {
    display: flex
}

.pagination__list-item {
    padding: 8px 15px
}

.pagination__list-num {
    color: #7d7b83;
    font-size: 16px;
    transition: .3s
}

.pagination__list-num:hover {
    color: #4e73f8
}

.pagination__list-num--active {
    color: #4e73f8
}

.tip {
    background: #3b3648;
    border-radius: 12px;
    padding: 8px 16px;
    color: #fff;
    font-size: 14px;
    transform: translate(-75px, 0px);
    position: relative;
    z-index: 10;
    display: none
}

.tip.show {
    display: block
}

.tip__dir {
    position: absolute;
    background: #3b3648;
    transform: rotate(45deg) translate(-13px, -2px);
    height: 16px;
    width: 16px
}

.tip-big {
    background: #4e73f8;
    border-radius: 12px;
    padding: 8px 16px;
    color: #fff;
    font-size: 14px;
    line-height: 130%;
    transform: translate(-355px, -80px);
    position: absolute;
    z-index: 10;
    display: none;
    text-align: left;
    width: 340px
}

.tip-big.show {
    display: block
}

.tip-big__dir {
    position: absolute;
    right: -15px;
    top: 50%;
    background: #4e73f8;
    transform: rotate(45deg) translate(-13px, -2px);
    height: 16px;
    width: 16px
}

.doc__menu {
    position: relative
}

.user__menu {
    position: absolute;
    left: -190px;
    top: 70px;
    background: #fff;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    border-radius: 16px;
    padding: 10px;
    z-index: 2;
    display: none;
    width: 220px
}

.user__menu.show {
    display: block
}

.user__menu-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px dashed #caccd0;
    margin-bottom: 10px
}

.user__menu-item {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #1d1929
}

.user__menu-item.active {
    color: #4e73f8;
    background: #f7f8fc
}

.user__menu-item.active i path {
    stroke: #4e73f8
}

.user__menu-item i {
    padding-right: 8px
}

.user__menu-sms {
    margin-left: 8px;
    padding: 4px 6px;
    color: #f84e58;
    background: #ffe8e9;
    font-size: 12px;
    border-radius: 12px
}

.user__menu-btn {
    background: #4e73f8;
    border-radius: 16px;
    padding: 16px 10px;
    color: #fff;
    width: 100%;
    font-size: 12px
}

.doc__menu--1, .doc__path {
    position: relative
}

.category__menu {
    position: absolute;
    left: -60px;
    top: 50px;
    background: #fff;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    border-radius: 16px;
    padding: 10px;
    z-index: 2;
    display: none;
    width: 220px
}

.category__menu.show {
    display: block
}

.category__menu .user__menu-item {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #1d1929
}

.category__menu .user__menu-item.active {
    color: #4e73f8;
    background: #f7f8fc
}

.doc__name {
    position: relative
}

.point__menu {
    position: absolute;
    left: -60px;
    top: 50px;
    background: #fff;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    border-radius: 16px;
    padding: 10px;
    z-index: 2;
    display: none;
    width: 220px
}

.point__menu.show {
    display: block
}

.point__menu .user__menu-sms {
    margin-left: auto
}

.point__menu .user__menu-item.active .user__menu-sms {
    color: #2c56eb;
    background: #e7ebf8
}

.doc__type {
    position: relative
}

.point-more__menu {
    position: absolute;
    left: -60px;
    top: 50px;
    background: #fff;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    border-radius: 16px;
    padding: 10px;
    z-index: 2;
    display: none;
    width: 290px
}

.point-more__menu.show {
    display: block
}

.point-more__menu .user__menu-sms {
    margin-left: auto
}

.point-more__menu .user__menu-item.active .user__menu-sms {
    color: #2c56eb;
    background: #e7ebf8
}

.point-more__tabs {
    font-size: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap
}

.point-more__tabs > input[type=radio] {
    display: none
}

.point-more__tabs > div {
    display: none;
    font-size: 16px
}

#tab-btn-1:checked ~ #content-1, #tab-btn-2:checked ~ #content-2, #tab-btn-3:checked ~ #content-3 {
    display: block;
    width: 100%
}

.point-more__tabs > label {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: #fff;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
    font-size: 14px;
    line-height: 1.5;
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
    cursor: pointer;
    position: relative;
    top: 1px;
    width: 90px;
    padding: 10px;
    margin-bottom: 25px;
    color: #7d7b83
}

.point-more__tabs > label:not(:first-of-type) {
    border-left: none
}

.point-more__tabs > input[type=radio]:checked + label {
    background-color: #fff;
    border-bottom: 2px solid #4e73f8;
    color: #4e73f8
}

.status__menu {
    position: absolute;
    left: -60px;
    top: 50px;
    background: #fff;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    border-radius: 16px;
    padding: 10px;
    z-index: 2;
    display: none;
    width: 240px
}

.status__menu.show {
    display: block
}

.status__menu-items {
    display: flex;
    flex-wrap: wrap
}

.status__menu-item {
    margin-right: 16px;
    padding: 4px 8px;
    margin-bottom: 16px;
    font-size: 13px
}

.status__menu-item--orange {
    color: #ee7937;
    background: #fff1e9
}

.status__menu-item--green {
    color: #1fca63;
    background: #e8fff4
}

.status__menu-item--gray {
    color: #7d7b83;
    background: #f8f8f8
}

.status__menu-item--blue {
    color: #2c56eb;
    background: #f7f8fc
}

.status__menu-btns {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px dashed #caccd0
}

.status__menu-btn {
    border-radius: 16px;
    font-size: 12px;
    padding: 16px 23px;
    text-align: center
}

.status__menu-btn:first-child {
    background: #f8f8f8;
    margin-right: 8px;
    color: #1d1929
}

.status__menu-btn:last-child {
    color: #fff;
    background: #1d1929
}

.doc__term {
    position: relative
}

.dropdown {
    position: absolute;
    left: -60px;
    top: 50px;
    background: #fff;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    border-radius: 16px;
    padding: 10px;
    z-index: 2;
    display: none;
    width: 220px
}

.dropdown.show {
    display: block
}

.dropdown-item {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #7d7b83
}

.dropdown-item.active {
    background: #f7f8fc
}

.dropdown-item--red {
    color: #f84e58;
    margin-bottom: 0
}

.dropdown-item--history {
    position: relative
}

.dropdown-history {
    position: absolute;
    left: -250px;
    top: -95px;
    background: #fff;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    border-radius: 16px;
    padding: 10px;
    z-index: 2;
    display: none;
    width: 220px
}

.dropdown-history.show {
    display: block
}

.dropdown-history__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 20px;
    border-bottom: 1px dashed #caccd0
}

.dropdown-history__title {
    font-size: 14px;
    color: #1d1929
}

.dropdown-history__route {
    display: flex;
    margin-top: 10px;
    padding: 10px 8px 18px;
    align-items: center;
    border-bottom: 1px dashed #caccd0
}

.dropdown-history i {
    margin-right: 8px
}

.dropdown-history__route-info {
    text-align: left
}

.dropdown-history__route-text {
    font-size: 14px;
    line-height: 150%;
    color: #7d7b83
}

.dropdown-history__route-date {
    font-size: 12px;
    color: #4e73f8
}

.dropdown-share {
    position: absolute;
    left: -300px;
    top: 0;
    background: #fff;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    border-radius: 16px;
    padding: 10px;
    z-index: 2;
    display: none;
    width: 290px
}

.dropdown-share.show {
    display: flex;
    flex-direction: column
}

.dropdown-share__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    margin-bottom: 10px
}

.dropdown-share__title {
    font-size: 14px;
    color: #1d1929
}

.dropdown-share__label-link {
    margin-bottom: 10px;
    position: relative
}

.dropdown-share__input {
    padding: 8px;
    width: 100%;
    border-radius: 10px;
    background: #f8f8f8;
    color: #7d7b83;
    font-size: 14px;
    border: none
}

.dropdown-share__input:focus-visible {
    outline: none
}

.dropdown-share__input-icon {
    position: absolute;
    right: 8px;
    top: 8px
}

.dropdown-share__copy {
    font-size: 12px;
    color: #fff;
    padding: 16px 70px;
    border-radius: 16px;
    background: #4e73f8
}

.doc__data {
    position: relative
}

.newdoc {
    position: absolute;
    left: -140px;
    top: 0;
    background: #fff;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    border-radius: 16px;
    padding: 10px;
    z-index: 2;
    display: none;
    width: 132px
}

.newdoc.show {
    display: flex;
    flex-direction: column
}

.newdoc__item {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    color: #1d1929;
    font-size: 14px
}

.newdoc__item.active {
    color: #4e73f8;
    background: #f7f8fc
}

.newdoc__btn {
    border-radius: 10px;
    background: #4e73f8;
    display: flex;
    color: #fff;
    font-size: 14px;
    padding: 8px 10px
}

.newdoc__btn i {
    margin-right: 6px
}

.doc__submenu {
    position: absolute;
    right: 0;
    top: 40px;
    background: #fff;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    border-radius: 16px;
    padding: 10px;
    z-index: 2;
    display: none;
    width: 220px
}

.doc__submenu.show {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.doc__submenu-item {
    padding: 8px 10px;
    display: flex;
    align-items: flex-start;
    border-radius: 10px;
    width: 100%;
    position: relative
}

.doc__submenu-item i {
    margin-right: 8px
}

.doc__submenu-item.active {
    background: #f7f8fc
}

.doc__submenu-text {
    font-size: 14px;
    color: #7d7b83;
    line-height: 150%
}

.doc__submenu-item--red span {
    color: #f84e58
}

.search {
    position: fixed;
    top: 0;
    width: 290px;
    height: 100%;
    background: #fff;
    border-radius: 16px 0px 0px 16px;
    padding: 10px;
    padding: 10px 20px 30px;
    right: -500px;
    transition: .5s;
    z-index: 10
}

.search.show {
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    right: 0
}

.search__input {
    position: relative;
    margin-bottom: 10px
}

.search__input input {
    width: 100%;
    padding: 11px 40px 11px 14px;
    border: 1px solid #e9e9ea;
    border-radius: 16px;
    background: #fff;
    color: #7d7b83;
    font-size: 14px
}

.search__input input:focus-visible {
    outline: none
}

.search__input button {
    position: absolute;
    right: 10px;
    top: 12px
}

.search__list {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 110px)
}

.search__box {
    padding-bottom: 10px;
    border-bottom: 1px dashed #caccd0;
    padding-top: 20px
}

.search__box:first-child {
    padding-top: 0
}

.search__box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    cursor: pointer
}

.search__box-header.hide button {
    transform: rotate(-90deg)
}

.search__box-name {
    font-size: 14px;
    color: #1d1929
}

.search__box-btn {
    transition: all .3s ease-in-out
}

.search__content {
    transition: all .5s ease-in-out;
    max-height: 1000px;
    overflow: hidden;
    position: relative
}

.search__content.hide {
    max-height: 0px
}

.search__content-btns {
    margin-top: 10px
}

.search__content-item {
    margin-right: 8px;
    font-size: 13px;
    line-height: 150%;
    color: #7d7b83;
    border-radius: 12px;
    background: #f8f8f8;
    padding: 4px 5px;
    transition: .3s
}

.search__content-item.active {
    background: #4e73f8;
    color: #fff
}

.search__user-input {
    position: relative;
    margin-bottom: 10px
}

.search__user-input input {
    width: 100%;
    padding: 11px 40px 11px 14px;
    border: 1px solid #e9e9ea;
    border-radius: 16px;
    background: #fff;
    color: #7d7b83;
    font-size: 14px
}

.search__user-input input:focus-visible {
    outline: none
}

.search__user-input button {
    position: absolute;
    right: 10px;
    top: 12px
}

.search__content-user.result .search__user-result {
    display: block
}

.search__content-user.result .search__pagination, .search__content-user.result .search__user-list {
    display: none
}

.search__result-insert .search__result-item {
    position: relative
}

.search__result-insert .search__result-item::after {
    content: url(../images/clear.svg);
    position: absolute;
    right: 15px;
    top: 19px
}

.search__result-insert .search__result-item:last-child {
    margin-bottom: 10px
}

.search__user-result {
    background: #fff;
    border: 1px solid #caccd0;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, .1);
    border-radius: 16px;
    padding: 10px;
    display: none
}

.search__result-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 16px;
    padding: 8px 10px;
    margin-bottom: 10px;
    cursor: pointer
}

.search__result-item:last-child {
    margin-bottom: 0
}

.search__result-item:hover {
    background: #f7f8fc
}

.search__result-img {
    margin-right: 10px;
    width: 36px
}

.search__resul-name {
    color: #1d1929;
    font-size: 14px;
    line-height: 150%
}

.search__result-role {
    font-size: 12px;
    color: #7d7b83;
    line-height: 150%
}

.search__user-list {
    display: grid;
    grid-template-rows:1fr 1fr;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px
}

.search__user-item {
    cursor: pointer
}

.search__user-item img {
    margin: 0 auto;
    height: 36px;
    width: 36px
}

.search__pagination {
    display: flex;
    justify-content: center;
    margin-bottom: -10px
}

.search__pagination-arrow {
    padding: 10px 13px
}

.search__pagination-list {
    display: flex
}

.search__pagination-item {
    padding: 7px 13px
}

.search__pagination-num {
    color: #7d7b83;
    font-size: 16px;
    transition: .3s
}

.search__pagination-num:hover {
    color: #4e73f8
}

.search__pagination-num--active {
    color: #4e73f8
}

.search__date-box {
    padding: 2px 14px;
    border: 1px solid #e9e9ea;
    border-radius: 16px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer
}

.search__date-box i {
    display: flex;
    align-items: center
}

.search__date-info {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.search__date-info i {
    margin-right: 10px
}

.search__date-text {
    color: #7d7b83;
    font-size: 14px
}

.search__date-num {
    font-size: 14px;
    color: #1d1929;
    line-height: 150%
}

.search__range-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #1d1929;
    margin-bottom: 5px
}

.search__range-values {
    margin-left: 7px
}

.search__label {
    display: flex;
    margin-bottom: 10px;
    padding: 8px 10px;
    align-items: center;
    cursor: pointer;
    border-radius: 10px;
    font-size: 14px;
    color: #1d1929
}

.search__label.checked {
    background: #f7f8fc
}

.search__label .search__fake {
    margin-right: 8px
}

.search__range-middle {
    position: relative;
    height: 20px;
    margin-top: 5px
}

.search__range-slider {
    position: relative;
    z-index: 1;
    height: 4px;
    margin: 0 11px
}

.search__range-slider .search__range-track {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 5px;
    background-color: #c6aee7
}

.search__range-slider .search__range-range {
    position: absolute;
    z-index: 2;
    left: 25%;
    right: 25%;
    top: 0;
    bottom: 0;
    border-radius: 5px;
    background-color: #4e73f8
}

.search__range-slider .search__range-thumb {
    position: absolute;
    z-index: 2;
    width: 18px;
    height: 18px;
    border: 3px solid #4e73f8;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer
}

.search__range-slider .search__range-thumb.left {
    transform: translate(-9px, -8px)
}

.search__range-slider .search__range-thumb.right {
    transform: translate(9px, -8px)
}

.search__range-input {
    -webkit-appearance: none;
    position: absolute;
    pointer-events: none;
    z-index: 2;
    height: 10px;
    width: 100%;
    opacity: 0
}

.search__range-input::-webkit-slider-thumb {
    pointer-events: all;
    width: 30px;
    height: 30px;
    border-radius: 0;
    border: none;
    background-color: 0;
    -webkit-appearance: none
}

.search__checkbox {
    display: none
}

.search__checkbox:checked + .search__fake::before {
    opacity: 1
}

.search__fake {
    cursor: pointer;
    display: block;
    width: 26px;
    height: 26px;
    border: 2px solid #e9e9ea;
    border-radius: 10px;
    position: relative;
    background: rgba(0, 0, 0, 0)
}

.search__fake::before {
    content: url("../images/checkbox.svg");
    position: absolute;
    display: block;
    width: 26px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    height: 26px;
    background-color: #4e73f8;
    opacity: 0;
    transition: .2s;
    border-radius: 10px
}

.search__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.search__bottom-btn {
    font-size: 12px;
    padding: 16px 32px;
    border-radius: 16px;
    margin-top: 10px
}

.search__bottom-btn:last-child {
    background: #4e73f8;
    color: #fff
}

.search__bottom-btn:first-child {
    background: #f8f8f8;
    color: #1d1929
}

.calendar-wrapper {
    position: relative;
    margin: 0 auto;
    width: 240px;
    background: #fff;
    box-shadow: 0px 10px 60px rgba(0, 0, 0, .07);
    border-radius: 16px;
    transition: .5s;
    overflow-y: hidden;
    max-height: 0px
}

.calendar-wrapper.show {
    max-height: 1000px;
    padding: 10px;
    margin: 10px auto 0
}

.calendar-wrapper table {
    width: 100%
}

.calendar-wrapper .days > td {
    color: #7d7b83;
    border-bottom: 1px dashed #caccd0;
    height: 60px;
    padding-bottom: 10px
}

.calendar-wrapper td {
    height: 48px;
    text-align: center;
    vertical-align: middle;
    width: 14.28571429%;
    color: #1d1929;
    font-size: 16px;
    line-height: 150%;
    cursor: pointer
}

.calendar-wrapper td:hover {
    color: #4e73f8
}

.calendar-wrapper td.not-current {
    font-size: 16px;
    line-height: 150%;
    color: #caccd0
}

.calendar-wrapper td.today {
    font-size: 16px;
    line-height: 150%;
    color: #4e73f8;
    border: 2px solid #4e73f8;
    border-radius: 10px
}

.calendar-wrapper thead td {
    font-size: 18px;
    color: #1d1929;
    line-height: 132%
}

.calendar-wrapper #btnPrev {
    left: 20px
}

.calendar-wrapper #btnNext {
    right: 20px
}

.calendar-wrapper #btnPrev, .calendar-wrapper #btnNext {
    position: absolute;
    cursor: pointer;
    top: 20px
}

.document__slider-img {
    display: flex;
    justify-content: center
}

.document__slider-img img {
    margin: 0 auto
}

.document__slider .slick-arrow {
    position: absolute;
    top: 50%;
    bottom: 50%;
    transform: translateY(-50%);
    z-index: 10;
    transition: .5s;
    opacity: .3;
    cursor: pointer
}

.document__slider .slick-arrow circle {
    transition: .5s
}

.document__slider .slick-arrow:hover {
    opacity: 1
}

.document__slider .slick-arrow:hover circle {
    fill: #4e73f8
}

.document__slider .slick-arrow:first-child {
    left: 0
}

.document__slider .slick-arrow:last-child {
    right: 0
}

.document__slider .slick-arrow.slick-disabled {
    opacity: 0
}

.template__slider-img {
    display: flex;
    justify-content: center
}

.template__slider-img img {
    margin: 0 auto
}

.template__slider .slick-arrow {
    position: absolute;
    top: 50%;
    bottom: 50%;
    transform: translateY(-50%);
    z-index: 10;
    transition: .5s;
    cursor: pointer;
    opacity: .3
}

.template__slider .slick-arrow circle {
    transition: .5s
}

.template__slider .slick-arrow:hover {
    opacity: 1
}

.template__slider .slick-arrow:hover circle {
    fill: #4e73f8
}

.template__slider .slick-arrow:first-child {
    left: 0
}

.template__slider .slick-arrow:last-child {
    right: 0
}

.template__slider .slick-arrow.slick-disabled {
    opacity: 0
}

section.footer {
    margin: 0;
    padding: 0
}

.main-document {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    transition: .5s;
    overflow-x: hidden
}

.main-document.window {
    margin-right: 500px
}

.setting {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 480px;
    background: #fff;
    border-left: 1px solid #caccd0;
    border-radius: 0px 20px 20px 0px;
    padding: 10px 20px;
    right: -500px;
    transition: .5s;
    z-index: 10
}

.setting.show {
    right: 0
}

.setting__header {
    padding: 10px 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #caccd0
}

.setting__title {
    font-size: 14px;
    color: #1d1929
}

.setting__btn i {
    display: flex;
    align-items: center
}

.setting__list {
    height: calc(100% - 90px);
    overflow-y: auto
}

.setting__route {
    border-bottom: 1px dashed #caccd0
}

.setting__route-header {
    padding: 20px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

.setting__route-title {
    font-size: 14px;
    color: #1d1929
}

.setting__route-name {
    text-decoration: underline;
    font-size: 14px;
    color: #4e73f8
}

.setting__route-users {
    padding: 6px 10px 16px
}

.setting__route-user {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 42px;
    position: relative
}

.setting__route-user::after {
    position: absolute;
    content: "";
    background: #e9e9ea;
    border-radius: 20px;
    transform: rotate(90deg);
    height: 1px;
    width: 22px;
    bottom: -20px;
    left: 12px
}

.setting__route-user:last-child {
    margin-bottom: 0
}

.setting__route-user:last-child::after {
    content: none
}

.setting__user-img {
    margin-right: 20px;
    position: relative
}

.setting__user-img i {
    position: absolute;
    right: -1px;
    top: -2px
}

.setting__user-name {
    font-size: 14px;
    color: #1d1929;
    line-height: 150%
}

.setting__user-link {
    font-size: 14px;
    color: #1d1929;
    transition: .3s
}

.setting__user-link:hover {
    color: #4e73f8
}

.setting__user-descr {
    color: #7d7b83;
    font-size: 14px;
    line-height: 150%
}

.setting__info {
    padding: 10px 0;
    border-bottom: 1px dashed #caccd0;
    margin-bottom: 20px
}

.setting__info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px
}

.setting__info-title {
    font-size: 14px;
    color: #1d1929
}

.setting__info-btn {
    position: relative
}

.setting__info-btn i {
    display: flex;
    align-items: center
}

.setting__share {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #caccd0
}

.setting__share-btn {
    border-radius: 16px;
    background: #1d1929;
    width: 100%;
    font-size: 12px;
    line-height: 150%;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    padding: 16px 50px;
    justify-content: center
}

.setting__share-btn i {
    display: flex;
    align-items: center;
    margin-right: 8px
}

.setting__share-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.setting__share-title {
    font-size: 14px;
    color: #1d1929
}

.setting__share-checkbox {
    display: none
}

.setting__share-checkbox:checked + .setting__share-switch::after {
    left: 23px
}

.setting__share-checkbox:checked + .setting__share-switch {
    background-color: #20dd82
}

.setting__share-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 20px;
    background-color: #caccd0;
    border-radius: 20px
}

.setting__share-switch::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
    top: 2px;
    left: 3px;
    transition: all .3s
}

.setting__share-label {
    position: relative
}

.setting__share-input {
    padding: 8px;
    padding-right: 40px;
    width: 100%;
    border-radius: 10px;
    background: #f8f8f8;
    color: #7d7b83;
    font-size: 14px;
    border: none
}

.setting__share-input:focus-visible {
    outline: none
}

.setting__share-icon {
    position: absolute;
    right: 8px;
    top: 3px;
    cursor: pointer
}

.setting__do {
    border-bottom: 1px dashed #caccd0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    margin-bottom: 20px
}

.setting__do-title {
    font-size: 14px;
    color: #1d1929
}

.setting__do-box {
    padding: 10px;
    border: 1px solid #e9e9ea;
    border-radius: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    font-size: 14px;
    color: #1d1929
}

.setting__do-box i:first-child {
    display: flex;
    align-items: center;
    margin-right: 6px
}

.setting__do-box span {
    margin-right: 10px
}

.setting__do-box i:last-child {
    display: flex;
    align-items: center
}

.setting__do-change {
    display: flex;
    align-items: center
}

.setting__do-list {
    position: absolute;
    background: #fff;
    border: 1px solid #e9e9ea;
    box-shadow: 0px 4px 40px rgba(0, 0, 0, .1);
    border-radius: 12px;
    padding: 8px;
    left: -20px;
    top: -100%;
    display: none
}

.setting__do-list.active {
    display: block
}

.setting__do-item {
    padding: 5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #1d1929;
    border-radius: 20px
}

.setting__do-item i {
    display: flex;
    align-items: center
}

.setting__do-item.active, .setting__do-item:hover {
    background: #f7f8fc
}

.setting__do-item.disabled {
    opacity: .2;
    cursor: default
}

.setting__edit {
    margin-bottom: 10px
}

.setting__edit-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

.setting__edit-btns button {
    font-size: 12px;
    line-height: 150%;
    border-radius: 16px;
    padding: 16px 50px;
    width: calc(50% - 5px)
}

.setting__edit-btns button i {
    display: flex;
    align-items: center;
    margin-right: 8px
}

.setting__edit-btns button:first-child {
    background: #f8f8f8;
    color: #1d1929;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px
}

.setting__edit-btns button:last-child {
    background: #4e73f8;
    color: #fff
}

.setting__edit-btn {
    background: #f8f8f8;
    color: #1d1929;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 150%;
    border-radius: 16px;
    padding: 16px 30px;
    width: 100%;
    text-decoration: underline
}

.setting__edit-btn i {
    display: flex;
    align-items: center;
    margin-right: 8px
}

.setting__bottom {
    padding-top: 20px;
    padding-bottom: 10px;
    border-top: 1px dashed #caccd0;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.setting__bottom-info {
    display: flex;
    align-items: center
}

.setting__bottom-text {
    color: #7d7b83;
    font-size: 13px;
    line-height: 150%;
    margin-right: 10px
}

.setting__bottom-text span {
    color: #1d1929
}

.setting__bottom-link {
    font-size: 13px;
    color: #4e73f8
}

.create {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 480px;
    background: #fff;
    border-left: 1px solid #caccd0;
    border-radius: 0px 20px 20px 0px;
    padding: 10px 20px;
    right: -500px;
    transition: .5s;
    z-index: 10
}

.create.show {
    right: 0
}

.create__header {
    padding: 10px 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #caccd0
}

.create__title {
    font-size: 14px;
    color: #1d1929
}

.create__btn i {
    display: flex;
    align-items: center
}

.create__list {
    height: calc(100% - 95px);
    overflow-y: auto
}

.create__route {
    border-bottom: 1px dashed #caccd0
}

.create__route-header {
    padding: 20px 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.create__route-title {
    font-size: 14px;
    color: #1d1929
}

.create__user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.create__route-name {
    text-decoration: underline;
    font-size: 14px;
    color: #4e73f8
}

.create__route-users {
    padding: 6px 10px 16px
}

.create__route-user {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 42px;
    position: relative
}

.create__route-user::after {
    position: absolute;
    content: "";
    background: #e9e9ea;
    border-radius: 20px;
    transform: rotate(90deg);
    height: 1px;
    width: 22px;
    bottom: -20px;
    left: 5px
}

.create__route-user:last-child {
    margin-bottom: 0
}

.create__route-user:last-child::after {
    content: none
}

.create .doc__way--one {
    width: 68px
}

.create .doc__way--two {
    width: 46px
}

.create .status {
    position: absolute;
    transform: translate(19px, -36px)
}

.create .status--one {
    transform: translate(30px, -36px)
}

.create .status--two {
    transform: translate(18px, -20px)
}

.create__user-name {
    font-size: 14px;
    color: #1d1929;
    line-height: 120%
}

.create__user-link {
    font-size: 14px;
    color: #1d1929;
    transition: .3s
}

.create__user-link:hover {
    color: #4e73f8
}

.create__user-descr {
    color: #7d7b83;
    font-size: 14px;
    line-height: 150%
}

.create__info {
    padding: 10px 0;
    border-bottom: 1px dashed #caccd0;
    margin-bottom: 20px
}

.create__info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px
}

.create__info-title {
    font-size: 14px;
    color: #1d1929
}

.create__info-btn {
    position: relative
}

.create__info-btn i {
    display: flex;
    align-items: center
}

.create__share {
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #caccd0
}

.create__share-btn {
    border-radius: 16px;
    background: #1d1929;
    width: 100%;
    font-size: 12px;
    line-height: 150%;
    color: #fff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding: 16px 50px;
    justify-content: center
}

.create__share-btn i {
    display: flex;
    align-items: center;
    margin-right: 8px
}

.create__edit {
    margin-bottom: 10px
}

.create__edit-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

.create__edit-btns button {
    font-size: 12px;
    line-height: 150%;
    border-radius: 16px;
    padding: 16px 50px;
    width: calc(50% - 5px)
}

.create__edit-btns button i {
    display: flex;
    align-items: center;
    margin-right: 8px
}

.create__edit-btns button:first-child {
    background: #f8f8f8;
    color: #1d1929;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px
}

.create__edit-btns button:last-child {
    background: #4e73f8;
    color: #fff
}

.create__edit-btn {
    background: rgba(0, 0, 0, 0);
    color: #7d7b83;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 150%;
    border-radius: 16px;
    padding: 16px 30px;
    width: 100%
}

.create__edit-btn i {
    display: flex;
    align-items: center;
    margin-right: 8px
}

.create__field-header {
    margin-bottom: 10px
}

.create__field-title {
    font-size: 14px;
    color: #1d1929
}

.create__field-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px
}

.create__search-input {
    position: relative;
    width: calc(50% - 5px)
}

.create__search-input input {
    padding: 11px 20px;
    padding-right: 40px;
    width: 100%;
    border-radius: 16px;
    background: #fff;
    color: #7d7b83;
    font-size: 14px;
    border: 1px solid #e9e9ea
}

.create__search-input input:focus-visible {
    outline: none;
    color: #1d1929;
    border: 1px solid #4e73f8
}

.create__search-input i {
    position: absolute;
    right: 15px;
    top: 11px;
    cursor: pointer
}

.create__search-btn {
    width: calc(50% - 5px);
    background: #f8f8f8;
    color: #7d7b83;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 150%;
    border-radius: 16px;
    padding: 12px 30px;
    cursor: pointer
}

.create__search-btn i {
    display: flex;
    align-items: center;
    margin-left: 8px
}

.create__field-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.create__field-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    width: calc(50% - 5px)
}

.create__field-form input {
    margin-top: 10px;
    padding: 11px 20px;
    width: 100%;
    border-radius: 16px;
    background: #fff;
    color: #7d7b83;
    font-size: 14px;
    border: 1px solid #e9e9ea
}

.create__field-form input:focus-visible {
    outline: none;
    color: #1d1929;
    border: 1px solid #4e73f8
}

.create__field-btn {
    margin-top: 20px;
    background: #1d1929;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 150%;
    border-radius: 16px;
    padding: 16px 30px;
    width: 100%;
    margin-bottom: 10px
}

.create__field-btn i {
    display: flex;
    align-items: center;
    margin-left: 10px
}

.create__bottom {
    padding-top: 20px;
    padding-bottom: 10px;
    border-top: 1px dashed #caccd0;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.create__bottom-info {
    display: flex;
    align-items: center
}

.create__bottom-text {
    color: #7d7b83;
    font-size: 13px;
    line-height: 150%;
    margin-right: 10px
}

.create__bottom-text span {
    color: #1d1929
}

.create__bottom-link {
    font-size: 13px;
    color: #4e73f8
}

.create-one {
    position: fixed;
    right: 0;
    top: 0;
    height: auto;
    width: 600px;
    background: #fff;
    border: 1px solid #caccd0;
    border-radius: 20px;
    padding: 10px 20px;
    right: -640px;
    transition: .5s;
    z-index: 10
}

.create-one.show {
    right: 0
}

.create-one__ready {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.create-one__ready-title {
    white-space: nowrap;
    margin-right: 20px;
    font-size: 14px;
    color: #1d1929
}

.create-one__share {
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #caccd0
}

.create-one__share-btn {
    border-radius: 16px;
    background: #1d1929;
    width: 100%;
    font-size: 12px;
    line-height: 150%;
    color: #fff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding: 16px 50px;
    justify-content: center
}

.create-one__share-btn i {
    display: flex;
    align-items: center;
    margin-right: 8px
}

.create-one__edit {
    margin-bottom: 10px
}

.create-one__edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
    color: #7d7b83
}

.create-one__edit-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

.create-one__edit-btns button {
    font-size: 12px;
    line-height: 150%;
    border-radius: 16px;
    padding: 16px 50px;
    width: calc(50% - 5px)
}

.create-one__edit-btns button i {
    display: flex;
    align-items: center;
    margin-right: 8px
}

.create-one__edit-btns button:first-child {
    background: #f8f8f8;
    color: #1d1929;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px
}

.create-one__edit-btns button:last-child {
    background: #4e73f8;
    color: #fff
}

.create-one__edit-btn {
    background: #f8f8f8;
    color: #7d7b83;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 150%;
    border-radius: 16px;
    padding: 16px 30px;
    width: 100%
}

.create-one__edit-btn i {
    display: flex;
    align-items: center;
    margin-right: 12px
}

.create-one__edit-btn i:last-child {
    margin-left: 8px;
    margin-right: 0
}

.create-one__field-header {
    margin-bottom: 10px
}

.create-one__field-title {
    font-size: 14px;
    color: #1d1929
}

.create-one__field-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px
}

.create-one__search-input {
    position: relative;
    width: calc(50% - 5px)
}

.create-one__search-input input {
    padding: 11px 20px;
    padding-right: 40px;
    width: 100%;
    border-radius: 16px;
    background: #fff;
    color: #7d7b83;
    font-size: 14px;
    border: 1px solid #e9e9ea
}

.create-one__search-input input:focus-visible {
    outline: none;
    color: #1d1929;
    border: 1px solid #4e73f8
}

.create-one__search-input i {
    position: absolute;
    right: 15px;
    top: 11px;
    cursor: pointer
}

.create-one__search-btn {
    width: calc(50% - 5px);
    background: #f8f8f8;
    color: #7d7b83;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 150%;
    border-radius: 16px;
    padding: 12px 30px;
    cursor: pointer
}

.create-one__search-btn i {
    display: flex;
    align-items: center;
    margin-left: 8px
}

.create-one__field-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.create-one__field-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    width: calc(50% - 5px)
}

.create-one__field-form input {
    margin-top: 10px;
    padding: 11px 20px;
    width: 100%;
    border-radius: 16px;
    background: #fff;
    color: #7d7b83;
    font-size: 14px;
    border: 1px solid #e9e9ea
}

.create-one__field-form input:focus-visible {
    outline: none;
    color: #1d1929;
    border: 1px solid #4e73f8
}

.create-one__field-btn {
    margin-top: 20px;
    background: #1d1929;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 150%;
    border-radius: 16px;
    padding: 16px 30px;
    width: 100%;
    margin-bottom: 10px
}

.create-one__field-btn i {
    display: flex;
    align-items: center;
    margin-left: 10px
}

.create-one__bottom {
    padding-top: 20px;
    border-top: 1px dashed #caccd0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

.create-one__bottom-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.create-one__bottom-text {
    color: #1d1929;
    font-size: 13px;
    line-height: 150%;
    margin-right: 10px;
    margin-bottom: 10px
}

.create-one__bottom-link {
    font-size: 13px;
    color: #4e73f8
}

.load-container {
    background: #fff;
    width: 100%;
    max-width: 1200px;
    position: fixed;
    transform: translate(-50%, 35vh);
    left: 50%;
    right: 50%;
    z-index: 10;
    display: none
}

.load-container.show {
    display: block
}

.load-container.load .load-container__file {
    display: block
}

.load-container.load .load-container__text {
    display: none
}

.load-container__box {
    border-radius: 20px;
    border: 1px dashed #4e73f8;
    padding: 40px;
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column
}

.load-container__box-input {
    width: 300px
}

.load-container__box-input input {
    position: absolute;
    top: 95px;
    opacity: 0;
    cursor: pointer
}

.load-container__icon {
    margin-bottom: 10px;
    display: flex;
    align-items: center
}

.load-container__icon i {
    margin: 0 auto
}

.load-container__title {
    font-size: 16px;
    color: #1d1929;
    text-align: center;
    margin-bottom: 8px;
    cursor: pointer
}

.load-container__title span {
    text-decoration: underline
}

.load-container__text {
    text-align: center;
    color: #7d7b83;
    font-size: 14px
}

.load-container__file {
    font-size: 14px;
    color: #1d1929;
    display: none;
    padding-left: 10px
}

.load-file {
    position: fixed;
    transform: translate(-50%, 35vh);
    left: 50%;
    right: 50%;
    z-index: 10;
    display: none
}

.load-file.show {
    display: block
}

.load-file__box {
    width: 320px;
    padding: 20px 10px 10px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #caccd0;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    flex-direction: column;
    transform: translateX(-50%)
}

.load-file__title {
    margin-bottom: 20px;
    font-size: 14px;
    color: #1d1929;
    text-align: center
}

.load-file__btn {
    background: #1d1929;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 150%;
    border-radius: 16px;
    padding: 16px 30px;
    width: 100%
}

.load-file__btn i {
    display: flex;
    align-items: center;
    margin-right: 12px
}

.load-template {
    position: fixed;
    transform: translate(-50%, 35vh);
    left: 50%;
    right: 50%;
    z-index: 10;
    display: none
}

.load-template.show {
    display: block
}

.load-template__box {
    width: 320px;
    padding: 20px 10px 10px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #caccd0;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    flex-direction: column;
    transform: translateX(-50%)
}

.load-template__title {
    margin-bottom: 20px;
    font-size: 14px;
    color: #1d1929;
    text-align: center
}

.load-template__btn {
    background: #1d1929;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 150%;
    border-radius: 16px;
    padding: 16px 30px;
    width: 100%
}

.load-template__btn i {
    display: flex;
    align-items: center;
    margin-right: 12px
}

.load-template__create {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.load-template__text {
    white-space: nowrap;
    margin-right: 20px;
    font-size: 14px;
    color: #1d1929;
    font-size: 14px
}

.load-template__select {
    padding: 12px;
    border-radius: 16px;
    background: #f8f8f8;
    font-size: 12px;
    color: #7d7b83;
    display: flex;
    align-items: center
}

.load-template__select i {
    display: flex;
    align-items: center;
    margin-right: 12px
}

.load-files {
    position: fixed;
    transform: translate(-50%, 35vh);
    left: 50%;
    right: 50%;
    z-index: 10;
    display: none
}

.load-files.show {
    display: block
}

.load-files__box {
    width: 320px;
    padding: 20px 10px 10px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #caccd0;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    flex-direction: column;
    transform: translateX(-50%)
}

.load-files__title {
    margin-bottom: 20px;
    font-size: 14px;
    color: #1d1929;
    text-align: center
}

.load-files__btns {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.load-files__btn {
    background: #f8f8f8;
    padding: 16px 20px;
    font-size: 12px;
    color: #1d1929;
    border-radius: 16px;
    display: flex;
    align-items: center;
    margin-right: 10px;
    white-space: nowrap
}

.load-files__btn i {
    display: flex;
    align-items: center;
    margin-right: 8px
}

.load-files__save {
    background: #4e73f8;
    padding: 16px 20px;
    font-size: 12px;
    color: #fff;
    border-radius: 16px
}

.load-files__item {
    width: 100%
}

.load-files__item button {
    margin-top: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    font-size: 14px;
    color: #1d1929;
    text-align: left;
    transition: .3s;
    border-radius: 16px
}

.load-files__item button i {
    display: flex;
    align-items: center
}

.load-files__item button:hover {
    background: #f7f8fc
}

.load-files__item button:hover i circle {
    transition: .5s;
    fill: #f84e58
}

.load-files__item button:hover i path {
    transition: .5s;
    fill: #fff
}

.load-files__item:nth-last-child(2) {
    padding-bottom: 10px;
    border-bottom: 1px dashed #caccd0
}

.multiload {
    width: 438px;
    background: #fff;
    border: 1px solid #caccd0;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    border-radius: 16px;
    padding: 10px;
    position: fixed;
    transform: translate(-50%, 20vh);
    left: 50%;
    right: 50%;
    z-index: 10;
    display: none
}

.multiload.show {
    display: block
}

.multiload__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px dashed #caccd0;
    margin: 10px
}

.multiload__title {
    margin-bottom: 20px;
    font-size: 14px;
    color: #1d1929;
    text-align: center
}

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

.multiload__setup i {
    display: flex;
    align-items: center
}

.multiload__box {
    border-radius: 20px;
    border: 1px dashed #4e73f8;
    padding: 20px;
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 10px
}

.multiload__box input {
    width: 300px;
    position: absolute;
    top: 60px;
    opacity: 0;
    cursor: pointer
}

.multiload__icon {
    margin-bottom: 20px;
    display: flex;
    align-items: center
}

.multiload__icon i {
    margin: 0 auto
}

.multiload__title {
    font-size: 16px;
    color: #1d1929;
    text-align: center;
    margin-bottom: 8px;
    cursor: pointer
}

.multiload__btn {
    background: #1d1929;
    border-radius: 16px;
    padding: 16px 30px;
    display: flex;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    width: 100%
}

.multiload__btn i {
    display: flex;
    align-items: center;
    margin-right: 10px
}

.multiload-more {
    width: 438px;
    background: #fff;
    border: 1px solid #caccd0;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, .1);
    border-radius: 16px;
    padding: 10px;
    position: fixed;
    transform: translate(-50%, 20vh);
    left: 50%;
    right: 50%;
    z-index: 10;
    display: none
}

.multiload-more.show {
    display: block
}

.multiload-more__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px dashed #caccd0;
    margin: 10px
}

.multiload-more__title {
    margin-bottom: 20px;
    font-size: 14px;
    color: #1d1929;
    text-align: center
}

.multiload-more__setup {
    display: flex;
    align-items: flex-end;
    font-size: 13px;
    color: #7d7b83
}

.multiload-more__setup i {
    display: flex;
    align-items: flex-start;
    margin-left: 8px
}

.multiload-more__box {
    border-radius: 20px;
    border: 1px dashed #4e73f8;
    padding: 20px;
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 10px
}

.multiload-more__box input {
    width: 300px;
    position: absolute;
    top: 60px;
    opacity: 0;
    cursor: pointer
}

.multiload-more__icon {
    margin-bottom: 20px;
    display: flex;
    align-items: center
}

.multiload-more__icon i {
    margin: 0 auto
}

.multiload-more__title {
    font-size: 16px;
    color: #1d1929;
    text-align: center;
    margin-bottom: 8px;
    cursor: pointer
}

.multiload-more__btn {
    background: #1d1929;
    border-radius: 16px;
    padding: 16px 30px;
    display: flex;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    width: 100%
}

.multiload-more__btn i {
    display: flex;
    align-items: center;
    margin-right: 10px
}

.multiload-more__item {
    width: 100%
}

.multiload-more__item button {
    margin-top: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    font-size: 14px;
    color: #1d1929;
    text-align: left;
    transition: .3s;
    border-radius: 16px
}

.multiload-more__item button i {
    display: flex;
    align-items: center
}

.multiload-more__item button:hover {
    background: #f7f8fc
}

.multiload-more__item button:hover i circle {
    transition: .5s;
    fill: #f84e58
}

.multiload-more__item button:hover i path {
    transition: .5s;
    fill: #fff
}

.multiload-more__item:nth-last-child(3) {
    padding-bottom: 10px;
    border-bottom: 1px dashed #caccd0
}

.multiload-more__btns {
    margin-top: 10px
}

.multiload-more__btns button {
    border-radius: 16px;
    width: calc(50% - 5px);
    padding: 16px 30px;
    font-size: 12px
}

.multiload-more__btns button:first-child {
    color: #1d1929;
    background: #f8f8f8
}

.multiload-more__btns button:last-child {
    color: #fff;
    background: #4e73f8
}

.skeleton {
    animation: skeleton-loading 1s linear infinite alternate
}

.doc__td-status {
    width: 100px;
    height: 13px;
    border-radius: 17.5px;
    margin-right: 0px
}

.doc__td-name {
    width: 40px;
    height: 13px;
    border-radius: 17.5px
}

.doc__td-type {
    width: 48px;
    height: 13px;
    border-radius: 17.5px
}

.doc__td-path {
    width: 78px;
    height: 13px;
    border-radius: 17.5px
}

.doc__td-way {
    display: flex;
    align-items: center;
    justify-content: center
}

.doc__td-way .way-skeleton-1 {
    border-radius: 17.5px;
    height: 13px;
    width: 25px;
    margin-right: 20px
}

.doc__td-way .way-skeleton-2 {
    width: 55.5px;
    height: 1px;
    border-radius: 20px;
    margin-right: 10px
}

.doc__td-way .way-skeleton-3 {
    width: 50px;
    height: 40px;
    border-radius: 50px;
    margin-right: 10px
}

.doc__td-way .way-skeleton-4 {
    width: 55.5px;
    height: 1px;
    border-radius: 20px;
    margin-right: 20px
}

.doc__td-way .way-skeleton-5 {
    border-radius: 17.5px;
    height: 13px;
    width: 25px
}

.doc__td-term {
    height: 13px;
    width: 34px;
    border-radius: 17.5px
}

.doc__td-data {
    border-radius: 17.5px;
    height: 13px;
    width: 69px
}

.doc__td-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 20px
}

.doc__td-menu .menu-skeleton {
    width: 4.5px;
    height: 4.5px;
    border-radius: 50px
}

@keyframes skeleton-loading {
    0% {
        background-color: #c2cfd6
    }
    100% {
        background-color: #f0f3f5
    }
}

.hero {
    display: none;
    position: fixed;
    left: 20px;
    bottom: 20px
}

.hero.show {
    display: block
}

@media (max-width: 1400px) {
    .container {
        margin-left: 80px
    }

    .main-document .container {
        margin-left: 0px
    }
}

@media (max-width: 1200px) {
    .main-document.window {
        margin-right: 0
    }
}

@media (max-width: 1000px) {
    .doc .doc__content {
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: auto
    }

    .doc .doc__content tr td {
        padding-right: 20px
    }

    .menu {
        position: fixed
    }

    .menu__item {
        margin-bottom: 20px;
        padding: 8px
    }
}

@media (max-width: 850px) {
    .doc__top-add {
        flex-direction: column;
        align-items: flex-end
    }

    .doc__top-add button {
        margin-bottom: 10px;
        margin-left: 0px
    }

    .doc__btns-btn:nth-last-child(1) {
        margin-right: 5px
    }

    .doc__top {
        align-items: flex-end
    }
}

@media (max-width: 700px) {
    .doc__edit {
        margin-bottom: 5px
    }

    .doc__edit-route, .doc__edit-filter {
        flex-direction: column
    }

    .doc__edit-route button, .doc__edit-filter button {
        margin-bottom: 5px
    }

    .doc__btns-btn {
        margin-right: 10px
    }

    .doc__filter-reset {
        margin-left: 0
    }

    .doc__route-add {
        margin-right: 0
    }

    .doc__filter-menu {
        left: -130px
    }

    .build {
        width: 100%;
        right: -105%
    }

    .create {
        width: 100%;
        right: -105%
    }
}

@media (max-width: 650px) {
    .footer__inner {
        flex-direction: column
    }

    .pagination__list-item {
        padding: 8px 15px
    }

    .footer__view {
        margin-bottom: 5px
    }

    .doc__top {
        flex-direction: column-reverse;
        align-items: flex-start;
        margin-bottom: 10px
    }

    .doc__btns-btn {
        padding-bottom: 10px
    }

    .doc__top-add {
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap
    }

    .doc__top-add button {
        margin-right: 20px
    }

    .notification, .history, .itinerary, .search {
        width: 100%;
        padding: 10px;
        right: -100%
    }

    .dropdown-history {
        left: -10px
    }

    .setting, .create-one {
        width: 100%;
        right: -100%
    }

    .search__range-values {
        margin: 0 auto
    }

    .search__range-values svg {
        width: 100%
    }

    .calendar-wrapper {
        width: 360px
    }
}

@media (max-width: 475px) {
    .header__breadcrumbs-item:nth-child(1) {
     }

    .header .header__breadcrumbs .header__breadcrumbs-link {
        font-size: 12px
    }

    .header__breadcrumbs-item:nth-child(1)::after {
        font-size: 12px;
     }

    .header {
        padding-top: 15px;
        margin-bottom: 15px
    }

    .doc__title {
        margin-bottom: 20px;
        font-size: 22px
    }

    .doc__add-text {
        font-size: 14px
    }

    .doc__btns-text {
        font-size: 14px;
        margin-right: 5px
    }

    .doc__top-btns {
        display: flex;
        margin-top: 5px
    }

    .doc__edit {
        flex-direction: column
    }

    .doc__edit-route button, .doc__edit-filter button {
        width: 160px;
        margin: 5px 0 0 0
    }

    .history__bottom-btn {
        padding: 10px 35px
    }

    .history__list {
        height: calc(100vh - 165px)
    }

    .doc__filter-menu {
        left: 0px;
        top: 50px;
        z-index: 3
    }

    .doc__submenu {
        left: 0px;
        top: 90px
    }

    .doc__filter-menu .doc__filter-btn {
        width: 100px;
        padding: 10px 0
    }

    .point-more__menu {
        width: 220px
    }

    .point-more__tabs > label {
        width: 65px
    }

    .dropdown-share {
        width: 250px;
        left: -260px
    }

    .dropdown-share__copy {
        padding: 10px 30px
    }

    .dropdown-history .dropdown-history__btn {
        width: auto
    }

    .setting__list {
        height: calc(100% - 100px)
    }

    .setting__bottom-text {
        font-size: 11px
    }

    .create__user-name, .create__user-link {
        font-size: 12px
    }

    .create__search-btn, .create-one__search-btn, .create-one__edit-btn {
        font-size: 10px;
        padding: 12px 12px
    }

    .create__bottom-text {
        font-size: 12px;
        margin-right: 5px
    }

    .multiload-more, .multiload {
        width: 360px
    }

    .tip-big {
        width: 250px;
        transform: translate(-265px, -95px)
    }
}

.container-d {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px
}

@media (max-width: 1400px) {
    .container-d {
        margin-left: 80px
    }

    .main-document .container-d {
        margin-left: 0px
    }
}

.doc__td-full {
    height: 13px;
    border-radius: 17.5px;
    margin-right: 0px;
    min-width: 20px;
    max-width: 70%;
}

.create__field-form input{
    color: #1d1929;
}

.doc__menu button{
    padding-left: 10px;
    padding-right: 10px;
}