@font-face {
    font-family: "Helvetica Neue";
    src: url('./font/HelveticaNeueCyr-Roman.woff2') format('woff2'),
    url('./font/HelveticaNeueCyr-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Helvetica Neue";
    src: url('./font/HelveticaNeueCyr-Bold.woff2') format('woff2'),
    url('./font/HelveticaNeueCyr-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html {
    scrollbar-color: #E7E7E8 transparent;
    scrollbar-width: thin;
}

html::-webkit-scrollbar {
    width: 2px;
    background-color: transparent;
    border-radius: 90px;
}

html::-webkit-scrollbar-thumb {
    background-color: #E7E7E8;
    -webkit-transition: background-color 250ms ease;
    transition: background-color 250ms ease;
    border-radius: 90px;
}

html::-webkit-scrollbar-thumb:hover {
    background-color: #D9D9D9;
}

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;

    color: #181818;
    font: 15px/20px "Helvetica Neue", Helvetica, Arial, sans-serif
}

body.dark-mode {
    color: #dedede;
}

.messages__body {
    padding: 30px 25px;
}

.messages__tabs {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #EDEEF0;
}

.tabs__button {
    display: flex;
    padding: 0 0 8px;
    margin: 0 32px 0 0;

    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    color: #7B838F;
    font-family: inherit;

    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 250ms ease;
}

.tabs__button > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 2px;

    color: white;
    font-size: 9px;
    line-height: 10px;
    font-weight: 700;

    border-radius: 50%;
    background-color: #7B838F;

    transform: translateY(-8px);
}

.tabs__button[aria-selected="true"],
.tabs__button:hover {
    color: #02ADE3;
}
.tabs__button:hover > span {
    background-color: #02ADE3;
}
.messages__form textarea,
.messages__form input {
    padding: 10px 15px;

    font-family: inherit;
    color: inherit;

    border: 1px solid #EDEEF0;
    border-radius: 6px;
}

.messages__form textarea {
    width: 100%;
    margin-bottom: 20px;
    height: 168px;
}

.btn {
    display: inline-block;
    padding: 11px 35px;
    font-weight: 700;
    font-size: 12px;
    line-height: 20px;
    font-family: inherit;
    text-transform: uppercase;
    color: #FFFFFF;

    background: #02ADE3;
    border: 1px solid #02ADE3;
    border-radius: 5px;
    cursor: pointer;
    transition: all 250ms ease;
}

.btn:hover {
    background: #30C6F6;
    border-color: #30C6F6;
}

.btn--done,
.btn--submit {
    display: flex;
    align-items: center;
}

.btn--done, .btn--done:hover {
    color: #02ADE3;
    border: 1px solid #02ADE3;
    background: transparent;
    cursor: default;
}
.btn--done::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 7px;

    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5009 3.45429L6.00127 11.9539L1.36509 7.31777' stroke='%2302ADE3' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
}

.errors {
    margin-top: 8px;
    color: #fe6c6c;
    border-color: #fe6c6c;
}

.btn[hidden],
.btn--submit[hidden],
.tabs__button > span[hidden] {
    display: none;
}

.btn--submit.wait::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 7px;

    background-image: url("../images/loader.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.calendarBlock {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.calendarBlock::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 11px;

    width: 18px;
    height: 18px;

    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.24854' y='2.16797' width='13.7905' height='13.7905' rx='2' stroke='%237B838F'/%3E%3Crect x='5.00732' y='8.10132' width='2.00549' height='2.00549' rx='1' fill='%237B838F'/%3E%3Crect x='5.00732' y='11.1091' width='2.00549' height='2.00549' rx='1' fill='%237B838F'/%3E%3Crect x='8.01709' y='8.10132' width='2.00549' height='2.00549' rx='1' fill='%237B838F'/%3E%3Crect x='8.01709' y='11.1091' width='2.00549' height='2.00549' rx='1' fill='%237B838F'/%3E%3Crect x='11.0249' y='8.10132' width='2.00549' height='2.00549' rx='1' fill='%237B838F'/%3E%3Cpath d='M2.00049 5.97205L16.0389 5.97205' stroke='%237B838F'/%3E%3Cpath d='M6.01074 3.08777L6.01074 1.08228' stroke='%237B838F' stroke-linecap='round'/%3E%3Cpath d='M12.0269 3.00537V0.999882' stroke='%237B838F' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;

    pointer-events: none;
}

.calendarBlock input {
    width: 100%;
}
.calendarBlock--error {
    border-color: #fe6c6c !important;
}

.filesBlock {
    position: relative;
    display: flex;
    margin-right: auto;
}

.filesBlock input[type=file]::file-selector-button {
    /* padding: 1em 1.5em; */
    border-width: 0;
    border-radius: 2px;
    background-color: #3BC8F5;
    color: #fff;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
    margin-right: 5px;
}

.filesBlock.btcd-f-input {
    display: block;
    width: 280px;
    position: relative;
    overflow: hidden;
}

.filesBlock.btcd-f-input > div > input::-webkit-file-upload-button {
    cursor: pointer;
}

.filesBlock .btcd-f-wrp {
    cursor: pointer;
}

.filesBlock .btcd-inpBtn {
    cursor: pointer;
    padding: 5px 12px;
    /* display: flex;
	align-items: center; */
    border-radius: 2px;
    background-color: #3BC8F5;
    color: #fff;
    margin-right: 8px;
    height: 35px;
    border: 0;
}

.filesBlock .btcd-f-wrp > button > span,
.filesBlock .btcd-f-wrp .btcd-f-title {
    vertical-align: middle;
}

.filesBlock .btcd-f-wrp .btcd-f-title {
    font-size: 13px;
}

.filesBlock.btcd-f-input > .btcd-f-wrp > input {
    z-index: 100;
    width: 100%;
    position: absolute;
    opacity: 0;
    left: 0;
    height: 35px;
    cursor: pointer;
}

.filesBlock .btcd-f-wrp:hover {
    background: transparent;
    border-radius: 4px;
}

.filesBlock .btcd-files > div {
    display: flex;
    align-items: center;
    background: #f8f8f8;
    border-radius: 2px;
    margin-left: 0;
    width: 100%;
    padding: 3px 5px;
    margin-top: 10px;
    min-height: 40px;
}

.filesBlock .btcd-files > div > div {
    display: inline-block;
    width: 72%;
}

.filesBlock .btcd-files > div > img {
    width: 36px;
    height: 36px;
    margin-right: 10px;
    border-radius: 2px;
}

.filesBlock .btcd-files > div > div > span {
    display: inline-block;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.filesBlock .btcd-files button {
    background: #e8e8e8;
    border: none;
    border-radius: 50px;
    width: 25px;
    height: 25px;
    font-size: 20px;
    margin-right: 6px;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.filesBlock .btcd-files button:hover {
    background: #bbbbbb;
}

/* .filesBlock input[type=file] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.filesBlock .form-label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
}

.filesBlock svg.text-base-400 {
    color: #bdc1c6;
}

.filesBlock-label.file-label p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    column-gap: 8px;
    margin: 0;
}

.filesBlock-label span.file-title span {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 0;
}

.filesBlock-label span.file-title span i {
    display: block;
    font-size: 13px;
    line-height: 1.3;
}

.filesBlock-label svg.text-base-400,
.filesBlock-label svg.text-base-400 path {
    height: 22px;
    width: 22px;
	fill: #bdc1c6;
}

.filesBlock-label .file-title {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-column-gap: 6px;
    -moz-column-gap: 6px;
    column-gap: 6px;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #7B838F;
    margin-bottom: 0;
} */

.messages__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.messages__table th,
.messages__table td {
    padding-left: 15px;
    padding-right: 5px;

    text-align: left;
}
.messages__table th:last-child,
.messages__table td:last-child {
    padding-right: 18px;
}

.messages__table th {
    padding-top: 10px;
    padding-bottom: 13px;

    font-weight: 700;
    color: #333333;

    background-color: #F5F6F7;
}

.messages__table td {
    padding-top: 14px;
    padding-bottom: 16px;
}
.messages__table td:last-child {
    display: flex;
    align-items: center;
}
.messages__table tbody tr {
    border-bottom: 1px solid #EDEEF0;
}

.messages__table .btn-edit,
.messages__table .btn-remove {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;

    border: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity 250ms ease;
}

.messages__table .btn-remove {
    margin-left: 10px;
}
.messages__table .btn-edit:hover,
.messages__table .btn-remove:hover {
    cursor: pointer;
}

.messages__table .btn-edit {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0092 4.13537C10.798 3.34656 12.077 3.34656 12.8658 4.13537C13.6546 4.92418 13.6546 6.20309 12.8658 6.9919L6.33726 13.5204C6.21063 13.647 6.03887 13.7182 5.85978 13.7182H3.28295L3.28296 11.1414C3.28295 10.9623 3.3541 10.7905 3.48073 10.6639L10.0092 4.13537Z' stroke='%2302ADE3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='9.17586' y1='6.1582' x2='10.8445' y2='7.82685' stroke='%2302ADE3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='8.03125' y1='14.5566' x2='14.376' y2='14.5566' stroke='%2302ADE3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.text-nowrap-file.text-files {
    display: block;
    text-align: center;
}

.messages__done.error::before,
.messages__table .btn-remove {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_634_1659)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.079 13.7862C13.2743 13.9814 13.5908 13.9814 13.7861 13.7862C13.9814 13.5909 13.9814 13.2743 13.7861 13.0791L9.89942 9.19239L13.791 5.30082C13.9863 5.10556 13.9863 4.78897 13.791 4.59371C13.5957 4.39845 13.2791 4.39845 13.0839 4.59371L9.19231 8.48528L5.30082 4.59379C5.10556 4.39853 4.78897 4.39853 4.59371 4.59379C4.39845 4.78905 4.39845 5.10563 4.59371 5.30089L8.48521 9.19239L4.5986 13.079C4.40334 13.2743 4.40334 13.5908 4.5986 13.7861C4.79386 13.9814 5.11045 13.9814 5.30571 13.7861L9.19231 9.8995L13.079 13.7862Z' fill='%23B0B0B0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_634_1659'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.messages__table th:nth-child(1) {
    width: 48%;
}

.messages__table th:nth-child(2) {
    width: 27%;
}

.messages__table th:nth-child(3) {
    width: 11%;
}

.messages__table th:nth-child(4) {
    width: 14%;
}

.text-light {
    color: #7B838F;
}

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

.red,
.red .text-light {
    color: #EA6363;
}

.messages__done {
    position: relative;
    display: inline-block;
    margin-left: 25px;
    padding-left: 20px;
    opacity: 0;

    color: #7B838F;
    transition: opacity 250ms ease;
}

.dark-mode .messages__done {
    color: #dedede;
}

.messages__done::before {
    content: '';
    position: absolute;
    left: 0;
}

.messages__done.success::before {
    border-left: 1px solid #5CC45A;
    border-bottom: 1px solid #5CC45A;
    transform: rotate(-45deg);
    top: 4px;
    width: 13px;
    height: 7px;
}

.messages__done.error::before {
    top: 1px;
    width: 17px;
    height: 17px;
    filter: invert(26%) sepia(64%) saturate(7491%) hue-rotate(353deg) brightness(93%) contrast(130%);
}

.messages__done.active {
    opacity: 1;
}

.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
    display: none;
}

.flatpickr-calendar {
    font-size: 12px;
    line-height: 16px;
    width: 400px;
    transform: translateY(-40px);
    transition: all 300ms;
}

.flatpickr-calendar.open {
    display: flex;
    flex-wrap: wrap;
    transform: unset;
}

.flatpickr-months,
.flatpickr-innerContainer {
    width: 70%;
}

.flatpickr-time {
    width: 30%;
}

.flatpickr-day {
    height: 21px;
    line-height: 21px;
    border-radius: 12px;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    height: 28px;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 5px;
}

.flatpickr-current-month {
    padding-top: 6px;
    font-size: 12px;
    line-height: 16px;
}

.dayContainer,
.flatpickr-days {
    width: auto;
    min-width: 260px;
}

.flatpickr-time,
.flatpickr-time .numInputWrapper {
    height: auto;
}

.flatpickr-time input {
    font-size: 12px;
}

.flatpickr-months {
    position: relative;
}

.flatpickr-innerContainer {
    border-top: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
}

.flatpickr-calendar.hasTime .flatpickr-time {
    height: auto;
}

.flatpickr-current-month .numInputWrapper {
    width: 7ch;
}

.dark-mode a {
    color: #a6cbff;
}

.dark-mode a:hover {
    color: #2067b0;
}

#list-add-files {
    padding-left: 10px;
}

#list-add-files p {
    margin: 3px 0 0 5px;
}

.remove-file__item {
    border: 0;
    background-color: transparent;
    cursor: pointer;
    padding: 2px 8px;
    pointer-events: all;
}

.remove-file__item svg {
    width: 16px;
    height: 16px;
    fill: #787A80;
    pointer-events: none;
}

.remove-file__item:hover svg {
    fill: #00ADE3;
}

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

.filesBlock__label {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 12px 0 25px;

    color: #02ADE3;
    border: none;
    background: transparent;
    cursor: pointer;
}

.messages__form .filesBlock__input {
    padding: 0;
}

.filesBlock__label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;

    width: 18px;
    height: 18px;

    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.22749 14.782C4.25154 16.8061 7.54356 16.8061 9.56761 14.782L16.0922 8.25744C17.5162 6.83338 17.5162 4.51623 16.0922 3.09217C14.6681 1.66811 12.351 1.66811 10.9269 3.09217L4.94605 9.07301C4.12199 9.89708 4.12199 11.2394 4.94605 12.0634C5.77012 12.8875 7.11241 12.8875 7.93647 12.0634L12.8299 7.17002C13.055 6.94488 13.055 6.57958 12.8299 6.35445C12.6048 6.12931 12.2395 6.12931 12.0143 6.35445L7.1209 11.2479C6.74604 11.6227 6.13649 11.6227 5.76162 11.2479C5.38676 10.873 5.38676 10.2634 5.76162 9.88858L11.7425 3.90774C12.7168 2.93341 14.3017 2.93288 15.2766 3.90774C16.2515 4.8826 16.2509 6.46754 15.2766 7.44187L8.75204 13.9664C7.17825 15.5402 4.61685 15.5402 3.04306 13.9664C1.46926 12.3926 1.46926 9.83124 3.04306 8.25744L8.48019 2.82031C8.70532 2.59518 8.70532 2.22987 8.48019 2.00474C8.25506 1.77961 7.88975 1.77961 7.66462 2.00474L2.22749 7.44187C0.203431 9.46593 0.203431 12.7579 2.22749 14.782Z' fill='%237B838F'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;

    transform: translateY(-50%);
}


.filesBlock {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.filesBlock__input {
    display: none;
}

.filesBlock__quantity {
    color: #C1C1C1;
}
.filesBlock__file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 4px;
    padding: 9px 16px 9px 25px;

    color: #7B838F;
    font-size: 14px;
    line-height: 21px;

    background-color: #F6F7F8;
    border-radius: 6px;
}

.filesBlock__files {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 8px;
}

.filesBlock__files[hidden] {
    display: none;
}
.filesBlock__files .btn {
    margin-top: 20px;
    order: 1;
}
.filesBlock__file .button__remove {
    position: relative;
    width: 18px;
    height: 18px;
    padding: 0;

    color: #b0b0b0;

    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all 250ms ease;
}
.filesBlock__file .button__remove svg {
    display: block;
    fill: currentColor;
    pointer-events: none;
}
.filesBlock__file .button__remove:hover {
    color: #5FBAE7;
}

.filesBlock__error {
    color: #ff5752;
    font-size: 12px;
    line-height: 16px;
    margin-left: 25px;
}

.dark-mode .tabs__button {
    color: #dedede;
    border-color: #dedede;
}
.dark-mode .tabs__button[aria-selected="true"] {
    color: #ffffff;
    border-color: #ffffff;
}

.first-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;

    text-align: center;
}
.first-step p {
    margin: 0;
    padding: 0;
}
.first-step .btn {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.showmore {
    position: relative;
    display: block;
    width: fit-content;
    padding-right: 11px;
    margin-top: 4px;
    color: #02ADE3;
    font-size: 14px;
    line-height: 21px;
    text-decoration: none;
}

.showmore svg {
    position: absolute;
    top: 9px;
    right: 0;

    width: 8px;
    height: 6px;

    fill: none;
    stroke: currentColor;
    transition: all 250ms ease;
}

.filesBlock__files.opened .showmore svg {
    transform: scaleY(-1);
}