@font-face {
  font-display: swap;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 400;
  src: url(../assets/fonts/Montserrat-400.woff2);
}

@font-face {
  font-display: swap;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  src: url(../assets/fonts/Montserrat-500.woff2);
}

@font-face {
  font-display: swap;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  src: url(../assets/fonts/Montserrat-600.woff2);
}

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

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
}

[hidden] {
  display: none;
}

body {
  line-height: 1;
}

menu,
ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
  content: '';
  content: none;
}

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

a,
a:hover {
  text-decoration: none;
}

button {
  cursor: pointer;
  font: inherit;
}

*,
:after,
:before {
  box-sizing: border-box;
}

.chat__input,
.date-range__input,
.form__input,
.input-error,
.modal__input,
.modal__search-input,
.modal__textarea,
.question__input,
.search-box__input,
.select__search-input {
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  color: #262626;
  font: inherit;
  outline: none;
  padding: 8px 34px 8px 12px;
  position: relative;
  width: 100%;
}

.chat__input::-webkit-input-placeholder,
.date-range__input::-webkit-input-placeholder,
.form__input::-webkit-input-placeholder,
.input-error::-webkit-input-placeholder,
.modal__input::-webkit-input-placeholder,
.modal__search-input::-webkit-input-placeholder,
.modal__textarea::-webkit-input-placeholder,
.question__input::-webkit-input-placeholder,
.search-box__input::-webkit-input-placeholder,
.select__search-input::-webkit-input-placeholder {
  color: #8c8c8c;
}

.chat__input::placeholder,
.date-range__input::placeholder,
.form__input::placeholder,
.input-error::placeholder,
.modal__input::placeholder,
.modal__search-input::placeholder,
.modal__textarea::placeholder,
.question__input::placeholder,
.search-box__input::placeholder,
.select__search-input::placeholder {
  color: #8c8c8c;
}

.chat__input:focus,
.date-range__input:focus,
.form__input:focus,
.input-error:focus,
.modal__input:focus,
.modal__search-input:focus,
.modal__textarea:focus,
.question__input:focus,
.search-box__input:focus,
.select__search-input:focus {
  border-color: #1890ff;
  box-shadow: 0 0 4px rgba(24, 144, 255, 0.5);
}

.input-error {
  border-color: #ff4d4f !important;
  box-shadow: 0 0 4px rgba(255, 77, 79, 0.5);
}

.date-range__input--small,
.select__search-input {
  padding-bottom: 0;
  padding-top: 0;
}

.aside__button-add,
.chat-menu__button-add,
.chat__button-cancel,
.chat__button-send,
.data__button-add,
.form__button,
.message__attach-button,
.modal-grid__button,
.modal-table__button,
.modal__button,
.modal__button--unread,
.modal__button-add,
.nav-controls__link--add,
.notifications__button-add,
.project-list__button,
.result-task__button,
.salary-filter__button,
.subheader__button,
.subheader__button--light,
.survey__submit-button,
.task-access__button-add,
.task-data__button {
  background-color: #1890ff;
  border: 1px solid #1890ff;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  padding: 7px 15px;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
}

.aside__button-add:hover,
.chat-menu__button-add:hover,
.chat__button-cancel:hover,
.chat__button-send:hover,
.data__button-add:hover,
.form__button:hover,
.message__attach-button:hover,
.modal-grid__button:hover,
.modal-table__button:hover,
.modal__button--unread:hover,
.modal__button-add:hover,
.modal__button:hover,
.nav-controls__link--add:hover,
.notifications__button-add:hover,
.project-list__button:hover,
.result-task__button:hover,
.salary-filter__button:hover,
.subheader__button--light:hover,
.subheader__button:hover,
.survey__submit-button:hover,
.task-access__button-add:hover,
.task-data__button:hover {
  background-color: #0084fe;
}

._disabled.aside__button-add,
._disabled.chat-menu__button-add,
._disabled.chat__button-cancel,
._disabled.chat__button-send,
._disabled.data__button-add,
._disabled.form__button,
._disabled.message__attach-button,
._disabled.modal-grid__button,
._disabled.modal-table__button,
._disabled.modal__button,
._disabled.modal__button--unread,
._disabled.modal__button-add,
._disabled.nav-controls__link--add,
._disabled.notifications__button-add,
._disabled.project-list__button,
._disabled.result-task__button,
._disabled.salary-filter__button,
._disabled.subheader__button,
._disabled.subheader__button--light,
._disabled.survey__submit-button,
._disabled.task-access__button-add,
._disabled.task-data__button,
.aside__button-add:disabled,
.chat-menu__button-add:disabled,
.chat__button-cancel:disabled,
.chat__button-send:disabled,
.data__button-add:disabled,
.form__button:disabled,
.message__attach-button:disabled,
.modal-grid__button:disabled,
.modal-table__button:disabled,
.modal__button--unread:disabled,
.modal__button-add:disabled,
.modal__button:disabled,
.nav-controls__link--add:disabled,
.notifications__button-add:disabled,
.project-list__button:disabled,
.result-task__button:disabled,
.salary-filter__button:disabled,
.subheader__button--light:disabled,
.subheader__button:disabled,
.survey__submit-button:disabled,
.task-access__button-add:disabled,
.task-data__button:disabled {
  background-color: #f5f5f5;
  border: 2px solid #d9d9d9;
  color: #bfbfbf;
  cursor: not-allowed;
  pointer-events: none;
}

.chat__button-cancel,
.subheader__button--light {
  background-color: transparent;
  border-color: transparent;
  color: #1890ff;
}

.chat__button-cancel:hover,
.subheader__button--light:hover {
  background-color: transparent;
  border-color: #1890ff;
}

.aside__button-add,
.chat-menu__button-add,
.data__button-add,
.modal-grid__button,
.modal-table__button,
.modal__button--create,
.modal__button--no,
.modal__button--read,
.modal__button-add,
.nav-controls__link--add,
.notifications__button-add,
.project-list__button,
.result-task__button--accept,
.salary-filter__button,
.task-access__button-add,
.task-data__button--accept {
  background-color: #52c41a;
  border-color: #52c41a;
  color: #fff;
}

.aside__button-add:hover,
.chat-menu__button-add:hover,
.data__button-add:hover,
.modal-grid__button:hover,
.modal-table__button:hover,
.modal__button--create:hover,
.modal__button--no:hover,
.modal__button--read:hover,
.modal__button-add:hover,
.nav-controls__link--add:hover,
.notifications__button-add:hover,
.project-list__button:hover,
.result-task__button--accept:hover,
.salary-filter__button:hover,
.task-access__button-add:hover,
.task-data__button--accept:hover {
  background-color: #49ad17;
}

.access-list__button,
.access__button-lock:before,
.aside__button-arrow,
.aside__button-edit,
.aside__control--delete,
.aside__control--edit,
.attach-tags__button-delete,
.attach__button-delete,
.catalog-file:before,
.catalog-file__button-delete,
.catalog-file__button-dots,
.catalog-folder:before,
.catalog-folder__button-delete,
.catalog-folder__button-dots,
.chat-menu__button-add:after,
.chat__controls--attach,
.chat__controls--dots,
.chat__controls--event,
.chat__controls--goal,
.chat__controls--richtext,
.chat__controls--tags,
.data__button-add:after,
.data__button-delete,
.favorite__button-delete:after,
.index-settings__button,
.message__controls--attach,
.message__controls--dots,
.message__controls--pin,
.message__icon--thumb-down,
.message__icon--thumb-up,
.modal-grid__control--delete,
.modal-grid__control--edit,
.modal-table__control--delete,
.modal-table__control--edit,
.modal__button-add:after,
.modal__button-dots,
.modal__button-info,
.modal__controls,
.modal__search-button,
.nav-controls__link--add:after,
.nav-controls__link--search:before,
.notifications__button--delete,
.notifications__button--edit,
.notifications__button-add:after,
.profile__control--delete,
.profile__control--edit,
.project-list__button:before,
.question__control--attach,
.question__control--delete,
.quote-box__button-delete,
.result-task__button-dots,
.search-box__button:before,
.select__search-button,
.side-menu__button,
.social-link:after,
.storage__add-file,
.storage__add-folder,
.storage__button-back:before,
.subtask__controls--dots,
.subtask__controls--dots-white,
.subtask__controls--profile,
.tags-block__icon-link,
.task-access__button-add:after,
.task-access__button-lock:before,
.task-access__control--delete,
.task-access__control--edit,
.task-data__button-dots,
.task-list__icon-done,
.task-list__icon-link,
.user-nav__link--alarm:before,
.user-nav__link--notify:before,
.user-nav__link--recent:before,
.user-nav__link--star:before {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.access-list__button:hover,
.access__button-lock:hover:before,
.aside__button-arrow:hover,
.aside__button-edit:hover,
.aside__control--delete:hover,
.aside__control--edit:hover,
.attach-tags__button-delete:hover,
.attach__button-delete:hover,
.catalog-file:hover:before,
.catalog-file__button-delete:hover,
.catalog-file__button-dots:hover,
.catalog-folder:hover:before,
.catalog-folder__button-delete:hover,
.catalog-folder__button-dots:hover,
.chat-menu__button-add:hover:after,
.chat__controls--attach:hover,
.chat__controls--dots:hover,
.chat__controls--event:hover,
.chat__controls--goal:hover,
.chat__controls--richtext:hover,
.chat__controls--tags:hover,
.data__button-add:hover:after,
.data__button-delete:hover,
.favorite__button-delete:hover:after,
.index-settings__button:hover,
.message__controls--attach:hover,
.message__controls--dots:hover,
.message__controls--pin:hover,
.message__icon--thumb-down:hover,
.message__icon--thumb-up:hover,
.modal-grid__control--delete:hover,
.modal-grid__control--edit:hover,
.modal-table__control--delete:hover,
.modal-table__control--edit:hover,
.modal__button-add:hover:after,
.modal__button-dots:hover,
.modal__button-info:hover,
.modal__controls:hover,
.modal__search-button:hover,
.nav-controls__link--add:hover:after,
.nav-controls__link--search:hover:before,
.notifications__button--delete:hover,
.notifications__button--edit:hover,
.notifications__button-add:hover:after,
.profile__control--delete:hover,
.profile__control--edit:hover,
.project-list__button:hover:before,
.question__control--attach:hover,
.question__control--delete:hover,
.quote-box__button-delete:hover,
.result-task__button-dots:hover,
.search-box__button:hover:before,
.select__search-button:hover,
.side-menu__button:hover,
.social-link:hover:after,
.storage__add-file:hover,
.storage__add-folder:hover,
.storage__button-back:hover:before,
.subtask__controls--dots-white:hover,
.subtask__controls--dots:hover,
.subtask__controls--profile:hover,
.tags-block__icon-link:hover,
.task-access__button-add:hover:after,
.task-access__button-lock:hover:before,
.task-access__control--delete:hover,
.task-access__control--edit:hover,
.task-data__button-dots:hover,
.task-list__icon-done:hover,
.task-list__icon-link:hover,
.user-nav__link--alarm:hover:before,
.user-nav__link--notify:hover:before,
.user-nav__link--recent:hover:before,
.user-nav__link--star:hover:before {
  -webkit-filter: invert(50%) sepia(29%) saturate(7072%) hue-rotate(190deg) brightness(100%) contrast(101%);
  filter: invert(50%) sepia(29%) saturate(7072%) hue-rotate(190deg) brightness(100%) contrast(101%);
}

.user-nav__link--alarm:before {
  background-image: url(../assets/images/icons/icon-clock.svg);
}

.aside__title--info:before,
.event-list__status:after,
.incoming-data__title:after,
.modal__button-info,
.side-menu__button--info {
  background-image: url(../assets/images/icons/icon-info.svg);
}

.aside__button-arrow {
  background-image: url(../assets/images/icons/arrow-right.svg);
}

.aside__title--file:before,
.side-menu__button--file {
  background-image: url(../assets/images/icons/icon-file.svg);
}

.aside__title--db:before,
.side-menu__button--db {
  background-image: url(../assets/images/icons/icon-structure.svg);
}

.catalog-file--upload-done:after,
.catalog-folder--upload-done:after {
  background-image: url(../assets/images/icons/icon-check.svg);
}

.aside__title--results:before,
.side-menu__button--filedone {
  background-image: url(../assets/images/icons/icon-goals.svg);
}

.side-menu__button--image {
  background-image: url(../assets/images/icons/icon-fileimage.svg);
}

.chat__controls--goal {
  background-image: url(../assets/images/icons/chat-goal.svg);
}

.aside__title--link:before,
.chat__controls--attach,
.message__controls--attach,
.modal__controls--attach,
.question__control--attach,
.side-menu__button--attach {
  background-image: url(../assets/images/icons/chat-attach.svg);
}

.aside__title--tags:before,
.chat__controls--tags,
.side-menu__button--tags {
  background-image: url(../assets/images/icons/chat-tags.svg);
}

.chat__controls--richtext,
.modal__controls--richtext {
  background-image: url(../assets/images/icons/chat-richtext.svg);
}

.aside__title--event:before,
.chat__controls--event,
.side-menu__button--event {
  background-image: url(../assets/images/icons/chat-event.svg);
}

.catalog-file__button-dots,
.catalog-folder__button-dots,
.chat__controls--dots,
.message__controls--dots,
.modal__button-dots,
.result-task__button-dots,
.subtask__controls--dots,
.task-data__button-dots {
  background-image: url(../assets/images/icons/subtask-dots.svg);
}

.subtask__controls--dots-white {
  background-image: url(../assets/images/icons/subtask-dots-white.svg);
}

.message__icon--thumb-down,
.message__icon--thumb-up {
  background-image: url(../assets/images/icons/thumb.svg);
}

.message__controls--pin {
  background-image: url(../assets/images/icons/pin.svg);
}

.aside__title--profile:before,
.profile__icon-contacts,
.side-menu__button--profile,
.subtask__controls--profile {
  background-image: url(../assets/images/icons/subtask-profile.svg);
}

.attach-tags__button-delete,
.attach__button-delete,
.catalog-file__button-delete,
.catalog-folder__button-delete,
.data__button-delete,
.quote-box__button-delete {
  background-image: url(../assets/images/icons/delete-circle.svg);
}

.access-list__button--delete,
.aside__control--delete,
.favorite__button-delete:after,
.modal-grid__control--delete,
.modal-table__control--delete,
.modal__controls--delete,
.notifications__button--delete,
.profile__control--delete,
.question__control--delete,
.storage__delete-element:before,
.storage__title--delete:before,
.task-access__control--delete {
  background-image: url(../assets/images/icons/delete.svg);
}

.access__button-lock:before,
.modal__controls--lock,
.task-access__button-lock:before {
  background-image: url(../assets/images/icons/lock.svg);
}

.access-list__button--edit,
.aside__button-edit,
.aside__control--edit,
.index-settings__button,
.modal-grid__control--edit,
.modal-table__control--edit,
.modal__controls--edit,
.notifications__button--edit,
.profile__control--edit,
.task-access__control--edit {
  background-image: url(../assets/images/icons/edit.svg);
}

.chat-menu__button-add:after,
.data__button-add:after,
.modal__button-add:after,
.nav-controls__link--add:after,
.notifications__button-add:after,
.project-list__button:before,
.task-access__button-add:after {
  background-image: url(../assets/images/icons/plus.svg);
}

.aside__title--search:before,
.modal__search-button,
.nav-controls__link--search:before,
.search-box__button:before,
.select__search-button,
.side-menu__button--search,
.storage__title--search:before {
  background-image: url(../assets/images/icons/search.svg);
}

.social-link--mail:after {
  background-image: url(../assets/images/icons/mail.svg);
}

.social-link--phone:after {
  background-image: url(../assets/images/icons/phone.svg);
}

.social-link--twi:after {
  background-image: url(../assets/images/icons/twi.svg);
}

.social-link--insta:after {
  background-image: url(../assets/images/icons/insta.svg);
}

.social-link--fb:after {
  background-image: url(../assets/images/icons/fb.svg);
}

.catalog-file--upload-wait:after,
.catalog-folder--upload-wait:after,
.user-nav__link--recent:before {
  background-image: url(../assets/images/icons/icon-history.svg);
}

.user-nav__link--star:before {
  background-image: url(../assets/images/icons/star.svg);
}

.user-nav__link--notify:before {
  background-image: url(../assets/images/icons/icon-notifications.svg);
}

.tags-block__icon-link,
.task-list__icon-link {
  background-image: url(../assets/images/icons/icon-new-window.svg);
}

.task-list__icon-done {
  background-image: url(../assets/images/icons/check-green.svg);
}

.catalog-folder:before,
.storage__title--folder:before {
  background-image: url(../assets/images/icons/icon-folder-close.svg);
}

.storage__add-folder {
  background-image: url(../assets/images/icons/interface-folder-add.svg);
}

.storage__add-file {
  background-image: url(../assets/images/icons/interface-file-add.svg);
}

.storage__button-back:before {
  background-image: url(../assets/images/icons/icon-arrow-back.svg);
}

.chat-userlist__userpic,
.modal-grid__userpic,
.modal-table__userpic,
.salary-table__userpic,
.select__image {
  border-radius: 50%;
  height: 24px;
  width: 24px;
}

.chat-userlist__userpic img,
.modal-grid__userpic img,
.modal-table__userpic img,
.salary-table__userpic img,
.select__image img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.aside__userpic,
.blog__userpic,
.message__userpic,
.modal-usercard__pic,
.notifications__userpic,
.project-card__userpic,
.result-task__userpic,
.tags-block__userpic,
.task-access__userpic,
.task-current__userpic,
.task-data__userpic,
.user-nav__userpic {
  border-radius: 50%;
  height: 32px;
  width: 32px;
}

.aside__userpic img,
.blog__userpic img,
.message__userpic img,
.modal-usercard__pic img,
.notifications__userpic img,
.project-card__userpic img,
.result-task__userpic img,
.tags-block__userpic img,
.task-access__userpic img,
.task-current__userpic img,
.task-data__userpic img,
.user-nav__userpic img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.team-card__userpic,
.team-tree-card__userpic,
.vacation-list__userpic {
  border-radius: 50%;
  height: 64px;
  width: 64px;
}

.team-card__userpic img,
.team-tree-card__userpic img,
.vacation-list__userpic img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.auth__title,
.success__title {
  font-size: 38px;
  font-weight: 500;
  line-height: 46px;
  text-align: center;
}

.favorite__title,
.my-tasks__title,
.notifications__title,
.project-list__title,
.salary__title,
.storage__title,
.team-tree__title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

.access-list__link,
.catalog-file__name,
.catalog-folder__name,
.date-range__input--small,
.modal__label,
.result-task__username,
.search-box--small .search-box__input,
.select__header,
.select__item--rows,
.select__search-input,
.table-vacation__head,
.task-data__title,
.team-card__pay,
.team-card__social-text,
body,
html {
  font-size: 14px;
  line-height: 22px;
}

.aside__button-add,
.aside__subtitle,
.blog__subtitle,
.chat-menu__button-add,
.chat-menu__title,
.chat__button-cancel,
.chat__button-send,
.chat__input,
.data__button-add,
.date-range__input,
.dropdown,
.favorite__item-header,
.form__button,
.form__input,
.input-error,
.message__attach-button,
.modal-grid__button,
.modal-table__button,
.modal__button,
.modal__button--unread,
.modal__button-add,
.modal__input,
.modal__search-input,
.modal__subtitle,
.modal__textarea,
.nav-controls__link--add,
.notifications__button-add,
.profile__username,
.profile__value,
.project-hover__title,
.project-list__button,
.question__input,
.result-task__button,
.result-task__title,
.salary-filter__button,
.salary-table__footer,
.salary-table__header,
.search-box__input,
.select__search-input,
.subheader__button,
.subheader__button--light,
.subtask__name,
.survey__submit-button,
.task-access__button-add,
.task-data__button,
.team-card__username,
.team-tree-card__username,
.vacation-list__username {
  font-size: 16px;
  line-height: 24px;
}

.aside__title,
.index__title,
.message__title,
.modal-upload__title,
.modal__title,
.vacation-list__title {
  font-size: 18px;
  line-height: 24px;
}

.access-list__item ul label,
.aside__description,
.attach__item,
.blog__date,
.catalog-file,
.catalog-folder,
.chat-menu,
.chat-userlist,
.chat__link,
.chat__texting,
.chat__username,
.data__item,
.dropdown--narrow,
.incoming-data__done,
.incoming-data__type,
.incoming-menu__done,
.incoming-menu__type,
.message__attach-button,
.message__date,
.message__delete-text,
.message__edit-button,
.message__mark-box,
.message__read-more-button,
.message__status,
.message__task-status,
.modal-grid__button,
.modal-grid__counter,
.modal-grid__tr,
.modal-list__item,
.modal-table__button,
.modal-table__counter,
.modal-usercard__name,
.modal-usercard__position,
.modal__button--edit,
.modal__error-text,
.modal__header-button,
.my-tasks__date,
.my-tasks__project-link,
.notifications__username,
.profile__label,
.profile__status,
.project-card,
.quote__date,
.quote__name,
.result-task,
.select--extended .select__item,
.select__search-input,
.select__tab,
.status-header__button,
.status-header__title,
.storage__header-button,
.subheader__link,
.subtask__info,
.subtask__quote-text,
.survey__amount,
.survey__date,
.survey__submit-button,
.survey__total,
.table-vacation__fixed-cell,
.tabs-xl__value,
.tag,
.tags-block__date,
.task-access__button-lock,
.task-access__description,
.task-access__mail,
.task-access__username,
.task-current__date,
.task-current__link,
.task-current__message,
.task-data,
.team-card,
.term__item,
.user-status__info {
  font-size: 12px;
  line-height: 20px;
}

.auth {
  flex: 1;
  margin: 0 auto;
  max-width: 370px;
  padding: 80px 12px 0;
  width: 100%;
}

.auth__title {
  margin-bottom: 8px;
}

.auth__info {
  margin-bottom: 40px;
  text-align: center;
}

.auth__link {
  color: #1890ff;
  margin-left: 8px;
  text-decoration: underline;
}

.auth__link:hover {
  text-decoration: none;
}

.form__field {
  margin-bottom: 24px;
}

.form__field:last-child {
  margin-bottom: 0;
}

.form__input-wrapper {
  position: relative;
}

.form__label {
  display: inline-block;
  margin-bottom: 8px;
}

.form__checkbox {
  display: none;
}

.form__error {
  color: #ff4d4f;
  font-size: 12px;
  line-height: 22px;
}

.form__restore-link {
  color: #8c8c8c;
  display: inline-block;
  font-size: 14px;
  line-height: 22px;
  margin-top: 8px;
  transition: color 0.2s ease-in-out;
}

.form__restore-link:hover {
  color: #1890ff;
}

.form__agreement-link {
  color: #1890ff;
  text-decoration: underline;
}

.form__agreement-link:hover {
  text-decoration: none;
}

.form__button {
  display: block;
  margin-top: 32px;
  text-align: center;
}

.form__icon-label {
  background-image: url(../assets/images/icons/question-circle.svg);
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
}

.form__icon-input,
.form__icon-label {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 16px;
  width: 16px;
}

.form__icon-input {
  top: 42px;
  position: absolute;
  right: 12px;
}

.form__input[type='password'] + .form__icon-input._invisible {
  background-image: url(../assets/images/icons/eye-invisible.svg);
  cursor: pointer;
  height: 18px;
  width: 18px;
}

.form__input[type='text'] + .form__icon-input._visible {
  background-image: url(../assets/images/icons/eye-visible.svg);
  cursor: pointer;
  height: 18px;
  width: 18px;
}

.form__field--valid .form__input {
  border-color: #1890ff;
  box-shadow: 0 0 4px rgba(24, 144, 255, 0.5);
}

.form__field--valid .form__icon-input {
  background-image: url(../assets/images/icons/checkbox-green.svg);
}

.form__field--invalid .form__input {
  border-color: #ff4d4f;
  box-shadow: 0 0 4px rgba(255, 77, 79, 0.5);
}

.form__label--checkbox {
  align-items: center;
  display: flex;
  font-size: 12px;
  line-height: 22px;
  margin: 0;
  -webkit-user-select: none;
  user-select: none;
}

.form__label--checkbox:before {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  content: '';
  display: inline-block;
  height: 16px;
  margin-right: 8px;
  width: 16px;
}

.form__checkbox:checked + .form__label--checkbox:before {
  background-color: #1890ff;
  background-image: url(../assets/images/icons/checkbox.svg);
  border-color: #1890ff;
}

.warning-box {
  background-color: #fff1f0;
  font-size: 12px;
  line-height: 22px;
  padding: 9px 16px 9px 42px;
  position: relative;
}

.warning-box:before {
  background-image: url(../assets/images/icons/error.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 14px;
  left: 17px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 14px;
}

.success {
  flex: 1;
  margin: 0 auto;
  max-width: 370px;
  padding: 80px 12px 0;
  text-align: center;
}

.success__title {
  margin-bottom: 45px;
}

.success__image {
  height: 63px;
  margin-bottom: 28px;
  width: 63px;
}

.success__image img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.success__subtitle {
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 4px;
}

.success__text {
  color: #8c8c8c;
}

.bubble {
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  bottom: 70px;
  box-shadow: 0 0 4px #d9d9d9;
  font-size: 12px;
  line-height: 22px;
  opacity: 0;
  padding: 10px;
  position: absolute;
  right: 0;
  transition: all 0.3s ease-in-out;
  visibility: hidden;
  z-index: 1;
}

.form__icon-label:hover ~ .bubble {
  bottom: 75px;
  opacity: 1;
  visibility: visible;
}

.dropdown {
  cursor: pointer;
  min-width: 153px;
  position: relative;
  width: 100%;
}

.dropdown--tag {
  margin-right: 24px;
  min-width: auto;
  width: 70px;
}

.dropdown--narrow .dropdown__input {
  min-height: 24px;
  padding-bottom: 1px;
  padding-top: 1px;
}

.dropdown--narrow .select {
  top: 21px;
}

.dropdown--narrow .select__item {
  padding: 0 8px;
}

.dropdown__input {
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  min-height: 42px;
  padding: 8px 28px 8px 8px;
  position: relative;
  width: 100%;
}

.dropdown__input:after {
  border-bottom: 1px solid #bfbfbf;
  border-right: 1px solid #bfbfbf;
  content: '';
  height: 6px;
  pointer-events: none;
  position: absolute;
  right: 13px;
  top: 45%;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s ease-in-out;
  width: 6px;
}

.dropdown__tag {
  border-radius: 50%;
  height: 10px;
  margin: 7px 0;
  width: 10px;
}

.dropdown__tag--green {
  background-color: #52c41a;
}

.dropdown__tag--red {
  background-color: #f5222d;
}

.dropdown__tag--yellow {
  background-color: #fa8c16;
}

.dropdown__tag--grey {
  background-color: #bfbfbf;
}

.dropdown__tag-name {
  margin-left: 12px;
}

.dropdown._show .dropdown__input:after {
  top: 43%;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.dropdown._show .select {
  max-height: 270px;
  opacity: 1;
  overflow-y: auto;
  transition: all 0.2s ease-in-out;
}

.dropdown._show .select--extended {
  max-height: 262px;
}

.select {
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  left: 0;
  list-style: none;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 100%;
  transition: all 0.2s ease-in-out;
  width: 100%;
  z-index: 10;
}

.select .rubric {
  padding: 0 8px;
}

.select--relative {
  position: relative;
}

.select__header {
  grid-gap: 10px;
  align-items: center;
  background-color: #fafafa;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 230px;
  margin-bottom: 12px;
  padding: 16px 8px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.select__tabs {
  grid-gap: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.select__tab {
  padding: 0 8px;
  transition: all 0.3s;
}

.select__tab:hover {
  color: #1890ff;
}

.select__tab--active {
  border: 1px solid #1890ff;
  border-radius: 2px;
}

.select__search-input-wrapper {
  position: relative;
}

.select__search-button {
  background-color: transparent;
  border: none;
  height: 16px;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 16px;
  z-index: 1;
}

.select__item {
  display: flex;
  padding: 8px;
}

.select__item:hover {
  background-color: #d9d9d9;
}

.select__item--rows {
  flex-wrap: wrap;
}

.select__title {
  font-weight: 600;
  padding: 8px;
}

.select__row {
  width: 100%;
}

.select__name {
  font-weight: 600;
}

.select__image {
  margin-right: 8px;
}

.select__project-status {
  align-items: center;
  display: flex;
}

.select__project-status--actual {
  border: 1px solid #b7eb8f;
  border-radius: 2px;
  color: #52c41a;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.select__project-status--completed {
  border: 1px solid #1890ff;
  border-radius: 2px;
  color: #1890ff;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.select--extended .select__item {
  grid-gap: 20px;
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 8px;
}

@media (max-width: 767px) {
  .dropdown__input {
    width: 100%;
  }

  .select__header {
    grid-template-columns: 1fr;
  }

  .select__tabs {
    grid-gap: 10px;
    gap: 10px;
  }

  .select span {
    grid-column: 1/-1;
  }

  .select--extended .select__item {
    grid-gap: 10px;
    gap: 10px;
  }
}

.copy {
  padding: 16px 0 24px;
  text-align: center;
}

.tag {
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  padding: 1px 8px 1px 28px;
  position: relative;
  white-space: nowrap;
  width: -webkit-max-content;
  width: max-content;
}

.tag--color {
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
  color: #52c41a;
}

.tag--active {
  background-color: #fff;
  border: 1px solid #1890ff;
}

.tag:before {
  background-color: #8c8c8c;
  border-radius: 50%;
  content: '';
  height: 12px;
  left: 8px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 12px;
}

.tag--icon-red:before {
  background-color: #f5222d;
}

.tag--icon-green:before {
  background-color: #52c41a;
}

.tag--icon-blue:before {
  background-color: #1890ff;
}

.tag--icon-yellow:before {
  background-color: #fa8c16;
}

.header {
  background-color: #001529;
  color: #fff;
  position: fixed;
  width: 100%;
  z-index: 20;
}

.header__logo-wrapper {
  align-items: center;
  display: flex;
  margin-right: 10px;
}

.header__logo {
  flex: 0 0 74px;
  height: 18px;
}

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

.header__mobile-menu {
  display: none;
}

.site-nav {
  display: flex;
  flex: 0 0 700px;
  overflow-x: auto;
  overflow-y: hidden;
}

.site-nav__list {
  display: inline-block;
  position: relative;
}

.site-nav__list .site-nav__link:after {
  background-image: url(../assets/images/icons/dropdown.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 6px;
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
  width: 9px;
}

.site-nav__list._active .site-nav__link:after {
  -webkit-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}

.site-nav__list._active .site-nav__inner-list {
  opacity: 1;
  visibility: visible;
}

.site-nav__inner-list {
  min-width: 223px;
  background-color: #001529;
  display: flex;
  flex-direction: column;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 100%;
  transition: all 0.3s ease-in-out;
  visibility: hidden;
}

.site-nav__inner-link {
  cursor: pointer;
  display: inline-flex;
  padding: 15px;
  transition: color 0.2s ease-in-out;
  white-space: nowrap;
}

.site-nav__inner-link:hover {
  color: #1890ff;
}

.site-nav__link {
  cursor: pointer;
  display: inline-flex;
  margin-right: 10px;
  padding: 15px;
  transition: color 0.2s ease-in-out;
  white-space: nowrap;
}

.site-nav__link--logo {
  padding: 0;
  flex: 0 0 100px;
}

.site-nav__link .logo {
  width: 120px;
}

.site-nav__link:hover {
  color: #1890ff;
}

.site-nav__link:last-child {
  margin-right: 0;
}

.nav-controls {
  display: flex;
  align-items: center;
}

.nav-controls__item {
  cursor: pointer;
  position: relative;
}

.nav-controls__link {
  align-items: center;
  border-radius: 2px;
  display: flex;
  height: 32px;
  justify-content: center;
  width: 48px;
}

.nav-controls__link--add {
  margin-right: 24px;
  position: relative;
}

.nav-controls__link--add:after {
  content: '';
  height: 16px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 16px;
}

.nav-controls__link--add:hover:after {
  -webkit-filter: none;
  filter: none;
}

.nav-controls__link--search {
  background-color: #fff;
  position: relative;
}

.nav-controls__link--search:before {
  content: '';
  height: 16px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 16px;
}

.nav-controls__inner-list {
  background-color: #001529;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: calc(100% + 10px);
  transition: all 0.3s ease-in-out;
  visibility: hidden;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  transform: translateX(-50%);
}

.nav-controls__inner-list span {
  padding: 10px 20px 10px;
}

.nav-controls__item._active .nav-controls__inner-list {
  opacity: 1;
  visibility: visible;
}

.user-nav {
  align-items: center;
  flex: 0 1 450px;
  justify-content: space-between;
}

.user-nav,
.user-nav__list {
  display: flex;
  align-items: center;
}

.user-nav__list {
  justify-content: flex-end;
  gap: 16px;
}

.user-nav__item {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex: 0 0 45px;
  height: 52px;
  justify-content: center;
  position: relative;
  width: 45px;
}

.user-nav__item--profile {
  flex: 0 0 52px;
  width: 52px;
}

.user-nav__item--star {
  flex: 0 0 20px;
}

.user-nav__link {
  display: inline-flex;
  flex: 0 0 45px;
  height: 100%;
  padding: 15px;
  position: relative;
  transition: color 0.2s ease-in-out;
}

.user-nav__link:hover {
  color: #1890ff;
}

.user-nav__link--recent {
  padding: 0;
}

.user-nav__link--recent:before {
  content: '';
  height: 20px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 20px;
}

.user-nav__link--star {
  padding: 0;
  margin-top: -1px;
  flex: 0 0 20px;
}

.user-nav__link--star:before {
  content: '';
  height: 18px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 20px;
}

.user-nav__link--notify {
  padding: 0;
}

.user-nav__link--notify:before {
  content: '';
  height: 20px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 20px;
}

.user-nav__link--alarm {
  padding: 0;
}

.user-nav__link--alarm:before {
  content: '';
  height: 30px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 27px;
}

.user-nav__link--profile {
  flex: 0 0 52px;
  height: auto;
  padding: 0;
  width: 52px;
}

.user-nav__link--profile:after {
  background-image: url(../assets/images/icons/arrow.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 4px;
  position: absolute;
  right: 5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
  width: 7px;
}

.user-nav__link--profile + .user-nav__inner-list {
  right: -24px;
}

.user-nav__inner-list {
  background-color: #001529;
  display: flex;
  flex-direction: column;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 100%;
  transition: all 0.3s ease-in-out;
  visibility: hidden;
  white-space: nowrap;
}

.user-nav__item._active :after {
  -webkit-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}

.user-nav__item._active .user-nav__inner-list {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1450px) {
  .user-nav {
    flex: 0 1 300px;
  }
}

@media (max-width: 1150px) {
  .header__site-nav {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: auto;
    padding-top: 52px;
    position: absolute;
    z-index: 3;
  }

  .header__site-nav,
  .header__site-nav:before {
    background-color: #001529;
    left: -100%;
    top: 0;
    transition: left 0.3s ease-in-out;
    width: 100%;
  }

  .header__site-nav:before {
    content: '';
    height: 60px;
    position: fixed;
    z-index: 2;
  }

  .header__site-nav._active,
  .header__site-nav._active:before {
    left: 0;
  }

  .header__mobile-menu {
    cursor: pointer;
    display: block;
    flex: 0 0 18px;
    height: 16px;
    margin-right: 15px;
    position: relative;
    z-index: 5;
  }

  .header__mobile-menu span,
  .header__mobile-menu:after,
  .header__mobile-menu:before {
    background-color: #fff;
    height: 2px;
    left: 0;
    position: absolute;
    transition: all 0.3s ease 0s;
    width: 100%;
  }

  .header__mobile-menu:after,
  .header__mobile-menu:before {
    content: '';
  }

  .header__mobile-menu:before {
    top: 0;
  }

  .header__mobile-menu:after {
    bottom: 0;
  }

  .header__mobile-menu span {
    top: 50%;
    -webkit-transform: scale(1) translateY(-50%);
    transform: scale(1) translateY(-50%);
  }

  .header__mobile-menu._active span {
    background-color: #fff;
    -webkit-transform: scale(0) translateY(-50%);
    transform: scale(0) translateY(-50%);
  }

  .header__mobile-menu._active:before {
    background-color: #fff;
    top: 50%;
    -webkit-transform: rotate(-45deg) translateY(-50%);
    transform: rotate(-45deg) translateY(-50%);
  }

  .header__mobile-menu._active:after {
    background-color: #fff;
    bottom: 50%;
    -webkit-transform: rotate(45deg) translateY(50%);
    transform: rotate(45deg) translateY(50%);
  }

  .header__user-nav {
    justify-content: flex-end;
  }

  .site-nav__link {
    display: flex;
  }

  .site-nav__list .site-nav__link::after {
    top: 24px;
  }

  .site-nav__list._active .site-nav__link::after {
    transform: rotate(180deg);
  }

  .site-nav__inner-list {
    background-color: #f0f0f0;
    color: #001529;
    position: absolute;
    width: 100%;
    transition: all 0.2s;
  }

  .site-nav__list._active .site-nav__inner-list {
    position: static;
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 550px) {
  .nav-controls__inner-list {
    position: fixed;
    left: 0;
    top: 52px;
    width: 100%;
    transform: none;
  }

  .user-nav__inner-list {
    position: fixed;
    left: 0;
    top: 52px;
    width: 100%;
  }

  .nav-controls__link--add {
    margin-right: 8px;
    padding: 12px;
    width: auto;
    height: auto;
  }

  .nav-controls__link--search {
    background-color: transparent;
  }

  .nav-controls__link--search:before {
    -webkit-filter: brightness(0) saturate(100%) invert(1);
    filter: brightness(0) saturate(100%) invert(1);
    height: 20px;
    width: 20px;
  }
}

@media (max-width: 413px) {
  .nav-controls__link--add {
    margin-right: 0;
  }

  .header__logo-wrapper {
    flex: 0 0 140px;
  }

  .nav-controls {
    gap: 8px;
  }

  .nav-controls__link {
    width: 28px;
  }

  .user-nav__item--profile {
    flex: 0 0 32px;
    width: 32px;
  }

  .user-nav__link--profile {
    flex: 0 0 32px;
    width: 32px;
  }

  .user-nav__link--profile::after {
    display: none;
  }
}

.subheader {
  background-color: #fafafa;
  padding: 24px 0;
}

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

.subheader__col {
  display: flex;
}

.subheader__dropdown {
  width: 100%;
  margin-right: 24px;
}

.subheader__link {
  margin-right: 32px;
  transition: color 0.3s ease-in-out;
  white-space: nowrap;
}

.subheader__link:hover {
  color: #1890ff;
}

.subheader__link--active {
  border: 1px solid #1890ff;
  border-radius: 2px;
  padding: 0 8px;
  pointer-events: none;
  width: auto;
}

.subheader__button {
  margin-right: 24px;
  white-space: nowrap;
}

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

@media (max-width: 1150px) {
  .subheader__container {
    align-items: flex-start;
    flex-direction: column;
  }

  .subheader__col {
    margin-bottom: 20px;
    width: 100%;
  }

  .subheader__button:only-child {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}

@media (max-width: 600px) {
  .subheader__col {
    flex-wrap: wrap;
  }

  .subheader__link {
    margin-bottom: 5px;
  }

  .subheader__button {
    margin: 0 0 5px;
  }

  .subheader__button:only-child {
    width: 100%;
  }
}

.search-box {
  display: flex;
}

.search-box--small .search-box__input {
  min-width: auto;
  padding: 8px;
}

.search-box__input {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  min-width: 291px;
}

.search-box__button {
  background-color: transparent;
  border: 1px solid #d9d9d9;
  border-bottom-right-radius: 2px;
  border-left: transparent;
  border-top-right-radius: 2px;
  flex: 0 0 40px;
  padding: 0;
  position: relative;
  width: 40px;
}

.search-box__button:before {
  content: '';
  height: 16px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 16px;
}

@media (max-width: 767px) {
  .search-box__input {
    min-width: auto;
  }
}

.date-range {
  position: relative;
}

.date-range__title {
  font-weight: 600;
  margin-bottom: 8px;
}

.date-range__input-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  width: 100%;
}

.date-range__input {
  cursor: pointer;
  flex: 1 1 50%;
  font-size: 12px;
}

.date-range__input--start {
  border-bottom-right-radius: 0;
  border-right-color: transparent;
  border-top-right-radius: 0;
}

.date-range__input--end {
  border-bottom-left-radius: 0;
  border-left-color: transparent;
  border-top-left-radius: 0;
}

.date-range__icon-calendar {
  background-image: url(../assets/images/icons/calendar.svg);
  bottom: 7px;
  height: 13px;
  right: 8px;
  width: 13px;
}

.date-range__icon-arrow,
.date-range__icon-calendar {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  position: absolute;
}

.date-range__icon-arrow {
  background-image: url(../assets/images/icons/calendar-arrow.svg);
  bottom: 10px;
  height: 6px;
  right: 53%;
  width: 11px;
}

.pagination {
  display: flex;
}

.pagination__button {
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  cursor: pointer;
  height: 32px;
  padding: 0;
  position: relative;
  transition: all 0.3s ease-in-out;
  width: 32px;
}

.pagination__button:after {
  border-bottom: 1px solid #262626;
  border-right: 1px solid #262626;
  content: '';
  height: 7px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 7px;
}

.pagination__button:hover {
  border-color: #1890ff;
}

.pagination__button:hover:after {
  border-bottom: 1px solid #1890ff;
  border-right: 1px solid #1890ff;
}

.pagination__button:disabled {
  background-color: #f5f5f5;
  pointer-events: none;
}

.pagination__button:disabled:after {
  border-bottom: 1px solid #bfbfbf;
  border-right: 1px solid #bfbfbf;
}

.pagination__button--prev {
  margin-right: 4px;
}

.pagination__button--prev:after {
  -webkit-transform: translate(-30%, -50%) rotate(135deg);
  transform: translate(-30%, -50%) rotate(135deg);
}

.pagination__button--next {
  margin-left: 4px;
}

.pagination__button--next:after {
  -webkit-transform: translate(-70%, -50%) rotate(-45deg);
  transform: translate(-70%, -50%) rotate(-45deg);
}

.pagination__item {
  align-items: center;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  height: 32px;
  justify-content: center;
  margin: 0 4px;
  padding: 0;
  transition: all 0.3s ease-in-out;
  width: 32px;
}

.pagination__item--active,
.pagination__item:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.pagination__item--active {
  font-weight: 600;
}

.breadcrumbs__item {
  color: #8c8c8c;
  padding-right: 21px;
  position: relative;
}

.breadcrumbs__item:after {
  content: '/';
  position: absolute;
  right: 5px;
  top: 0;
}

.breadcrumbs__item--active {
  color: #262626;
  pointer-events: none;
}

.breadcrumbs__item--active:after {
  display: none;
}

.drag-drop {
  background-color: #f5f5f5;
  border: 1px dashed #d9d9d9;
  color: #8c8c8c;
  padding: 24px;
  position: relative;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.drag-drop__label {
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

.drag-drop__input {
  display: none;
}

.drag-drop__text {
  padding-top: 30px;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.drag-drop__text:before {
  height: 22px;
  top: 0;
  width: 2px;
}

.drag-drop__text:after,
.drag-drop__text:before {
  background-color: #8c8c8c;
  content: '';
  left: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.drag-drop__text:after {
  height: 2px;
  top: 11px;
  width: 22px;
}

.drag-drop:hover {
  background-color: #fff;
  color: #262626;
}

.drag-drop:hover .drag-drop__text:after,
.drag-drop:hover .drag-drop__text:before {
  -webkit-transform: translateX(-50%) scale(1.1);
  transform: translateX(-50%) scale(1.1);
}

.data {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.data__button-add {
  height: 20px;
  margin-right: 24px;
  padding: 0;
  position: relative;
  width: 20px;
}

.data__button-add:after {
  content: '';
  height: 16px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 16px;
}

.data__button-add:hover:after {
  -webkit-filter: none;
  filter: none;
}

.data__button-add--margin {
  margin: 0;
}

.data__button-delete {
  background-color: transparent;
  border: none;
  display: inline-flex;
  height: 15px;
  margin-left: 4px;
  padding: 5px;
  width: 15px;
}

.data__button-delete:hover {
  -webkit-filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(4859%) hue-rotate(349deg)
    brightness(102%) contrast(92%);
  filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(4859%) hue-rotate(349deg) brightness(102%)
    contrast(92%);
}

.data__item {
  align-items: center;
  display: flex;
  margin: 4px 16px 4px 0;
  white-space: nowrap;
}

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

.data__item--border {
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  padding: 0 8px;
}

.task-list {
  background-color: #fff;
  cursor: pointer;
}

.task-list [data-spoiler] {
  margin-left: 12px;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.task-list [data-spoiler]:before {
  background-image: url(../assets/images/icons/arrow.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  content: '';
  -webkit-filter: brightness(0) saturate(100%);
  filter: brightness(0) saturate(100%);
  height: 5px;
  left: -12px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
  transition: all 0.3s ease-in-out;
  width: 9px;
}

.task-list [data-spoiler]._active:before {
  -webkit-transform: translateY(-50%) rotate(0deg);
  transform: translateY(-50%) rotate(0deg);
}

.task-list__item {
  position: relative;
}

.task-list__item > ul {
  margin-left: 24px;
}

.task-list p {
  padding: 0 5px;
  transition: all 0.3s ease-in-out;
}

.task-list p:hover {
  background-color: #e6f7ff;
}

.task-list__icon-done,
.task-list__icon-link {
  height: 15px;
  opacity: 0;
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: opacity 0.3s ease-in-out;
  width: 15px;
}

.task-list__icon-done {
  visibility: hidden;
}

.task-list__done .task-list__icon-done {
  opacity: 1;
  visibility: visible;
}

.task-list__done:hover .task-list__icon-done {
  opacity: 0;
  visibility: hidden;
}

p:hover .task-list__icon-link {
  opacity: 1;
}

.task-list__title {
  font-weight: 600;
}

.task-list__title._active {
  background-color: #bae7ff;
}

.task-current {
  background-color: #f4f4f4;
  margin-bottom: 8px;
}

.task-current__body {
  padding: 16px;
}

.task-current__item {
  margin-bottom: 20px;
}

.task-current__title {
  background-color: #bae7ff;
  font-weight: 600;
  padding: 8px 16px;
}

.task-current__tag {
  cursor: default;
  margin: 0 8px 8px 0;
}

.task-current__tag:last-child {
  margin-right: 0;
}

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

.task-current__usercard {
  align-items: center;
  display: flex;
  margin: 8px 16px 8px 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.task-current__userpic {
  margin-right: 8px;
  transition: all 0.3s ease-in-out;
}

.task-current__username {
  font-weight: 500;
  transition: all 0.3s ease-in-out;
}

.task-current__usercard:hover .task-current__userpic {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.task-current__usercard:hover .task-current__username {
  color: #1890ff;
}

.task-current__date {
  color: #8c8c8c;
  margin-top: 2px;
}

.task-current__message {
  margin-top: 8px;
}

.task-current__highlight-text {
  background-color: #bae7ff;
  font-weight: 600;
}

.task-current__link {
  color: #1890ff;
}

.task-current__link:hover {
  text-decoration: underline;
}

.user-status {
  align-items: center;
  cursor: pointer;
  display: flex;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.user-status:before {
  right: 0;
  top: 0;
}

.user-status:after,
.user-status:before {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 12px;
  position: absolute;
  width: 12px;
}

.user-status:after {
  bottom: 0;
  left: 0;
}

.user-status__info {
  background-color: #fafafa;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  color: #8c8c8c;
  left: 80%;
  min-width: -webkit-max-content;
  min-width: max-content;
  opacity: 0;
  padding: 8px;
  position: absolute;
  top: 70%;
  transition: all 0.3s ease-in-out;
  visibility: hidden;
  z-index: 3;
}

.user-status__date {
  color: #262626;
}

.user-status:hover .user-status__info {
  opacity: 1;
  visibility: visible;
}

.user-status--offline:before {
  background-image: url(../assets/images/icons/icon-status-offline.svg);
}

.user-status--online:before {
  background-image: url(../assets/images/icons/icon-status-online.svg);
}

.user-status--fired:after {
  background-image: url(../assets/images/icons/icon-status-fired.svg);
}

.user-status--leaving:after {
  background-image: url(../assets/images/icons/icon-status-leaving.svg);
}

.user-status--not-work:after {
  background-image: url(../assets/images/icons/icon-status-not-work.svg);
}

.tabs-xl {
  border-bottom: 1px solid #f0f0f0;
}

.tabs-xl__link {
  display: inline-flex;
  margin-right: 40px;
  padding: 12px 0;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.tabs-xl__link:after {
  bottom: 0;
  content: '';
  height: 2px;
  position: absolute;
  transition: background-color 0.3s ease-in-out;
  width: 100%;
}

.tabs-xl__link--active,
.tabs-xl__link:hover {
  color: #1890ff;
}

.tabs-xl__link--active:after,
.tabs-xl__link:hover:after {
  background-color: #1890ff;
}

.tabs-xl__value {
  align-items: center;
  background-color: #fafafa;
  border-radius: 50%;
  color: #8c8c8c;
  display: flex;
  font-weight: 500;
  justify-content: center;
  margin-left: 10px;
  min-width: 22px;
}

.tabs-xl__link--active .tabs-xl__value,
.tabs-xl__link:hover .tabs-xl__value {
  color: #1890ff;
}

.team__list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  padding: 10px 0;
}

@media (max-width: 731px) {
  .team__list {
    grid-template-columns: none;
  }
}

.team-filter {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 32px 0;
  gap: 24px;
}

.team-filter__col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.team-filter__dropdown {
  margin-left: 24px;
}

.team-filter__dropdown:first-child {
  margin-left: 0;
}

.team-filter__dropdown--wide {
  min-width: 273px;
}

@media (max-width: 1150px) {
  .team-filter {
    align-items: flex-start;
    flex-direction: column;
  }

  .team-filter__col {
    width: 100%;
  }

  .team-filter__search {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .team-filter__col {
    grid-template-columns: 1fr;
    margin: 0;
  }

  .team-filter__dropdown,
  .team-filter__search {
    width: 100%;
  }
}

.team-card {
  background-color: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  position: relative;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

.team-card--work:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.team-card__link {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.team-card__info,
.team-card__state {
  margin-bottom: 16px;
}

.team-card__info {
  display: flex;
}

.team-card__group,
.team-card__position {
  margin-bottom: 8px;
}

.team-card__slash {
  color: hsla(0, 0%, 55%, 0.3);
  margin: 0 8px;
}

.team-card__date {
  margin-bottom: 16px;
}

.team-card__access {
  transition: all 0.4s;
}

.team-card__access b {
  font-weight: 700;
}

.team-card__pay {
  color: #1890ff;
  font-weight: 600;
}

.team-card__user-wrapper {
  display: flex;
  margin-bottom: 16px;
  position: relative;
}

.team-card__userpic {
  margin-right: 16px;
}

.team-card__username {
  font-weight: 600;
  margin-bottom: 8px;
}

.team-card__social-link {
  margin-right: 8px;
}

.team-card__mail,
.team-card__phone {
  align-items: center;
  display: flex;
  margin-bottom: 8px;
}

.team-card__social-text {
  font-weight: 500;
  margin-left: 8px;
  transition: color 0.3s ease-in-out;
}

.team-card__link:hover ~ div .team-card__access,
.team-card__social-text:hover {
  color: #1890ff;
}

.team-tree__title {
  margin-bottom: 32px;
}

.team-tree li ul,
.team-tree__item {
  position: relative;
}

.team-tree li ul:after {
  border-left: 1px dashed #bfbfbf;
  bottom: 32px;
  content: '';
  height: 102%;
  left: 32px;
  position: absolute;
}

.team-tree li ul li {
  margin-top: 40px;
  padding-left: 60px;
}

.team-tree li ul li:before {
  border-bottom: 1px dashed #bfbfbf;
  content: '';
  left: 32px;
  position: absolute;
  top: 32px;
  width: 27px;
}

.team-tree-card {
  display: flex;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.team-tree-card:last-child {
  margin-bottom: 0;
}

.team-tree-card__link {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

.team-tree-card__userpic {
  margin-right: 24px;
  position: relative;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  z-index: 1;
}

.team-tree-card__username {
  font-weight: 600;
  margin-bottom: 8px;
}

.team-tree-card__position {
  margin: 0 4px 4px 0;
}

.team-tree-card__position,
.team-tree-card__status {
  border: 1px solid #91d5ff;
  border-radius: 2px;
  color: #1890ff;
  display: inline-block;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.team-tree-card__status {
  white-space: nowrap;
}

.team-tree-card__status--not-working {
  border: 1px solid #ffa39e;
  border-radius: 2px;
  color: #f5222d;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.team-tree-card__status--fired {
  border: 1px solid #ffd591;
  border-radius: 2px;
  color: #fa8c16;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.team-tree-card__status--vacation {
  border: 1px solid #b7eb8f;
  border-radius: 2px;
  color: #52c41a;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.team-tree-card:hover .team-tree-card__userpic {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.vacation__table-wrapper {
  overflow-x: auto;
  margin-left: 20px;
  cursor: grab;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none;
}

.vacation__table-wrapper.grabbing {
  cursor: grabbing;
}

.table-vacation {
  border: 1px solid #f0f0f0;
  table-layout: fixed;
  hyphens: none;
  border-spacing: 0 1em;
}

.table-vacation__head {
  background-color: #fff;
  border: 1px solid #f0f0f0;
  font-weight: 600;
  text-align: center;
  vertical-align: bottom;
  padding: 5px;
}

.table-vacation__fixed-cell {
  background-color: #fff;
  left: 0;
  padding: 5px;
  vertical-align: middle;
  border: 1px solid #f0f0f0;
}

.table-vacation__week {
  border: 1px solid #f0f0f0;
  padding: 5px 16px;
  white-space: nowrap;
}

.table-vacation__day {
  border: 1px solid #f0f0f0;
  padding: 5px 7px;
}

.vacation-list__title {
  font-weight: 600;
  margin: 24px 0;
}

.vacation-list__card {
  cursor: pointer;
  margin-bottom: 24px;
}

.vacation-list__date {
  color: #8c8c8c;
  margin-bottom: 12px;
}

.vacation-list__userpic-box {
  display: flex;
  flex: 0 0 64px;
  margin-right: 24px;
}

.vacation-list__userpic {
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.vacation-list__userpic:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.vacation-list__info {
  display: flex;
  margin-bottom: 8px;
}

.vacation-list__username {
  display: block;
  font-weight: 600;
  transition: color 0.3s ease-in-out;
}

.vacation-list__username:hover {
  color: #1890ff;
}

.vacation-list__department {
  color: #8c8c8c;
  display: inline-block;
  transition: color 0.3s ease-in-out;
}

.vacation-list__department:hover {
  color: #1890ff;
}

.vacation-list__link {
  color: #1890ff;
  display: inline-block;
  margin-right: 12px;
  text-decoration: underline;
}

.vacation-list__link:hover {
  text-decoration: none;
}

.salary__title {
  margin: 32px 0;
}

.salary-filter {
  align-items: center;
  display: flex;
}

.salary-filter__dropdown {
  margin-right: 24px;
  width: -webkit-max-content;
  width: max-content;
}

.salary-filter__date-range {
  align-items: center;
  display: flex;
}

.salary-filter__input-wrapper {
  margin-right: 24px;
  width: 100%;
}

.salary-filter__input-wrapper input {
  padding: 8px 34px 8px 12px;
}

.salary-filter__input-wrapper .date-range__icon-calendar {
  bottom: 50%;
  right: 14px;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
}

.salary-filter__button {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.salary-table {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 24px;
}

.salary-table tr {
  border-bottom: 1px solid #f0f0f0;
}

.salary-table__footer,
.salary-table__header {
  background-color: #fafafa;
  font-weight: 600;
}

.salary-table__col {
  padding: 16px;
  vertical-align: middle;
}

.salary-table__col:first-child {
  position: sticky;
  left: 0;
}

.salary-table__userpic {
  margin-right: 10px;
}

.salary-table__username {
  align-self: center;
}

.salary-table__position {
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 2px;
  color: #1890ff;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.salary-table__description {
  display: none;
}

.salary-table__col--vertical {
  vertical-align: top;
}

@media (max-width: 767px) {
  .salary-table {
    table-layout: auto;
    width: 100%;
  }

  .salary__title {
    margin: 16px 0;
  }

  .salary-table__description {
    display: block;
    color: #8c8c8c;
  }

  .salary-table__col {
    font-size: 12px;
    font-weight: 500;
    min-width: 200px;
    padding: 5px 10px;
  }

  .salary-table__col:first-child {
    background-color: #fff;
  }
  .salary-table__col--vertical {
    vertical-align: top;
  }

  .salary-table__position {
    background-color: transparent;
    border-color: transparent;
    color: #262626;
    padding: 0;
  }
}

@media (max-width: 480px) {
  .salary-table__col {
    font-size: 12px;
    font-weight: 500;
    min-width: 160px;
    padding: 5px 10px;
  }
}

.project-list__header {
  padding: 40px 0;
  flex-wrap: wrap;
  gap: 12px;
}

.project-list__button {
  align-items: center;
  display: flex;
  padding-left: 40px;
  position: relative;
  width: auto;
}

.project-list__button:before {
  content: '';
  height: 16px;
  left: 15px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 16px;
}

.project-list__button:hover:before {
  -webkit-filter: none;
  filter: none;
}

.project-list__button-icon {
  margin-right: 10px;
}

.project-list__filter {
  padding: 12px 0 28px;
}

.project-list__cards {
  grid-gap: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 330px);
}

.project-list__pagination {
  padding: 40px 0;
}

.project-list__row {
  align-items: center;
}

.project-filter__row,
.project-list__row {
  display: flex;
  justify-content: space-between;
}

.project-filter__row {
  grid-gap: 24px;
  align-items: flex-end;
  gap: 24px;
  padding: 12px 0;
}

.project-filter__col {
  grid-gap: 8px 0;
  display: flex;
  gap: 8px 0;
}

.project-filter__tags {
  flex-wrap: wrap;
}

.project-filter__title {
  font-weight: 600;
  margin-bottom: 8px;
}

.project-filter__date-range {
  margin-right: 16px;
}

.project-filter__tag {
  margin-right: 8px;
}

.project-filter__dropdown {
  margin-right: 16px;
}

.project-filter__dropdown:last-child {
  margin-right: 0;
}

@media (max-width: 1180px) {
  .project-filter__row {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-filter__col {
    flex-wrap: wrap;
    margin-bottom: 16px;
    width: 100%;
  }

  .project-filter__col:last-child {
    margin-bottom: 0;
  }

  .project-filter__dropdown {
    margin: 0 0 16px;
  }

  .project-filter__date-range {
    margin-bottom: 16px;
  }
}

@media (max-width: 731px) {
  .project-list__cards {
    grid-template-columns: none;
  }
}

@media (max-width: 550px) {
  .project-filter__col--dropdown {
    flex-direction: column;
  }

  .project-filter__wrapper {
    width: 100%;
  }

  .project-filter__date-range {
    margin-right: 0;
    width: 100%;
  }
}

.project-card {
  background-color: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  position: relative;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

.project-card:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.project-card__link {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.project-card__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.project-card__project-link {
  transition: all 0.3s;
}

.project-card__project-link:hover {
  color: #1890ff;
}

.project-card__title {
  font-weight: 600;
  margin-bottom: 12px;
}

.project-card__description {
  margin-bottom: 12px;
}

.project-card__staff {
  margin-bottom: 8px;
}

.project-card__user {
  align-items: center;
  display: flex;
  margin-bottom: 21px;
}

.project-card__user--no-margin {
  margin-bottom: 0;
}

.project-card__userpic {
  margin-right: 8px;
}

.project-card__username {
  font-weight: 600;
}

.project-card__status {
  align-items: center;
  display: flex;
}

.project-card__status--green {
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  padding: 1px 28px 1px 8px;
  position: relative;
  width: -webkit-max-content;
  width: max-content;
}

.project-card__status--green:after {
  background-color: #52c41a;
  border-radius: 50%;
  content: '';
  height: 12px;
  position: absolute;
  right: 8px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 12px;
}

.project-card__status--red {
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  padding: 1px 28px 1px 8px;
  position: relative;
  width: -webkit-max-content;
  width: max-content;
}

.project-card__status--red:after {
  background-color: #f5222d;
  border-radius: 50%;
  content: '';
  height: 12px;
  position: absolute;
  right: 8px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 12px;
}

.project-card__status--yellow {
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  padding: 1px 28px 1px 8px;
  position: relative;
  width: -webkit-max-content;
  width: max-content;
}

.project-card__status--yellow:after {
  background-color: #fa8c16;
  border-radius: 50%;
  content: '';
  height: 12px;
  position: absolute;
  right: 8px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 12px;
}

.project-card__status--grey {
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  padding: 1px 28px 1px 8px;
  position: relative;
  width: -webkit-max-content;
  width: max-content;
}

.project-card__status--grey:after {
  background-color: #bfbfbf;
  border-radius: 50%;
  content: '';
  height: 12px;
  position: absolute;
  right: 8px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 12px;
}

.project-card__icon-notify {
  -webkit-filter: brightness(0) saturate(100%) invert(10%) sepia(12%) saturate(7%) hue-rotate(339deg) brightness(104%)
    contrast(88%);
  filter: brightness(0) saturate(100%) invert(10%) sepia(12%) saturate(7%) hue-rotate(339deg) brightness(104%)
    contrast(88%);
  height: 14px;
  margin: 0 10px;
  width: 11px;
}

.project-card__tag {
  display: inline-flex;
  margin-right: 8px;
}

.project-card__file-list {
  grid-gap: 20px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 15px;
}

.project-card__file-link {
  display: block;
  font-weight: 700;
  padding: 5px 10px;
  transition: all 0.3s;
}

.project-card__file-link:hover {
  color: #1890ff;
}

.project-card__file-icon {
  padding-left: 25px;
  position: relative;
}

.project-card__file-icon:before {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 17px;
  left: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 17px;
}

.project-card__file-icon--folder:before {
  background-image: url(../assets/images/icons/icon-folder-open.svg);
}

.project-card__file-icon--file:before {
  background-image: url(../assets/images/icons/icon-doc.svg);
}

.project-card:hover .project-card__hover {
  opacity: 1;
  top: 0;
  visibility: visible;
}

.project-hover {
  background-color: #fff;
  border-radius: 8px;
  height: 100%;
  left: 0;
  list-style: decimal;
  opacity: 0;
  overflow-y: auto;
  padding: 16px;
  position: absolute;
  top: 5%;
  transition: all 0.2s ease-in-out;
  visibility: hidden;
  width: 100%;
}

.project-hover__item {
  margin: 0 0 16px 16px;
  padding: 8px 0 0 8px;
  position: relative;
}

.project-hover__item:last-child {
  margin-bottom: 0;
}

.project-hover__item::marker {
  font-weight: 600;
}

.project-hover__item:before {
  border-top: 1px solid #f0f0f0;
  content: '';
  left: -16px;
  position: absolute;
  top: 0;
  width: calc(100% + 16px);
}

.project-hover__attach {
  margin-bottom: 16px;
}

.project-hover__link {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.project-hover__text {
  margin-bottom: 8px;
}

.project-hover__title {
  font-weight: 600;
  margin-bottom: 16px;
  position: relative;
}

.project-hover__done {
  border: 1px solid #52c41a;
  border-radius: 2px;
  color: #52c41a;
}

.project-hover__done,
.project-hover__not-done {
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.project-hover__not-done {
  border: 1px solid #8c8c8c;
  border-radius: 2px;
  color: #8c8c8c;
}

.favorite__breadcrumbs {
  padding: 32px 0;
}

.favorite__title {
  margin-bottom: 32px;
}

.favorite__list {
  border: 1px solid #f0f0f0;
}

.favorite__item-header {
  background-color: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  font-weight: 600;
  padding: 16px;
}

.favorite__item {
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  padding: 16px 75px 16px 16px;
  position: relative;
}

.favorite__item:hover {
  background-color: #fafafa;
}

.favorite__name {
  margin-right: 24px;
}

.favorite__button-delete {
  align-items: center;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #f5222d;
  cursor: pointer;
  display: flex;
  flex: 0 0 94px;
  font: inherit;
  opacity: 0;
  padding: 5px;
  position: relative;
  transition: all 0.2s ease-in-out;
  z-index: 2;
}

.favorite__button-delete:hover {
  border-color: #f5222d;
}

.favorite__button-delete:hover:after {
  -webkit-filter: none;
  filter: none;
}

.favorite__button-delete:after {
  content: '';
  height: 14px;
  position: absolute;
  right: 4px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 14px;
}

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

.favorite__item:hover .favorite__button-delete {
  opacity: 1;
}

@media (max-width: 1024px) {
  .favorite__item {
    padding: 16px;
  }
}

.my-tasks__title {
  padding: 32px 0;
}

.my-tasks__row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.my-tasks__data {
  background-color: #fafafa;
  border: 1px solid #f0f0f0;
  justify-content: flex-end;
  padding: 18px 24px;
}

.my-tasks__tag {
  margin-right: 8px;
}

.my-tasks__list {
  margin-top: 24px;
}

.my-tasks__item {
  align-items: center;
  display: flex;
  padding: 12px 0;
}

.my-tasks__info {
  margin-right: 48px;
}

.my-tasks__task-link {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  transition: color 0.3s ease-in-out;
}

.my-tasks__task-link:hover {
  color: #1890ff;
}

.my-tasks__project-link {
  margin-right: 16px;
  transition: color 0.3s ease-in-out;
}

.my-tasks__project-link:hover {
  color: #1890ff;
}

.my-tasks__pagination {
  padding: 40px 0;
}

@media (max-width: 1500px) {
  .my-tasks__row {
    align-items: flex-start;
    flex-direction: column;
  }

  .my-tasks__tabs {
    margin-bottom: 24px;
  }
}

@media (max-width: 600px) {
  .my-tasks__data {
    align-items: flex-start;
    flex-direction: column-reverse;
    width: 100%;
  }

  .my-tasks__item {
    flex-wrap: wrap;
  }

  .my-tasks__info {
    margin: 0 0 8px;
  }
}

.modal {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  height: 100vh;
  justify-content: center;
  z-index: 25;
}

.modal,
.modal__wrapper {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.modal__wrapper {
  max-height: 100%;
  overflow-y: auto;
  padding: 70px 15px;
}

.modal__inner {
  margin: 0 auto;
  max-width: 743px;
  position: relative;
}

.modal__inner--info {
  max-width: 459px;
}

.modal__inner--info .modal__body {
  padding: 32px;
}

.modal__inner--position-right {
  bottom: 0;
  position: absolute;
  right: 0;
  width: 100%;
}

.modal__inner--small {
  max-width: 548px;
}

.modal__inner--medium {
  max-width: 771px;
}

.modal__inner--wide {
  max-width: 1009px;
}

.modal__inner--xl {
  max-width: 1200px;
}

.modal__body {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  overflow-x: hidden;
  padding: 32px 59px;
  width: calc(100% - 59px);
}

.modal__body--no-padding {
  padding: 0;
}

.modal__header {
  align-items: flex-start;
  display: grid;
  margin-bottom: 32px;
  grid-gap: 8px 16px;
  grid-template-columns: 1fr max-content;
}

.modal__header--padding {
  padding: 32px 24px 0;
}

.modal__header--margin {
  margin-bottom: 0;
}

.modal__header-storage {
  grid-gap: 12px;
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 2fr 1fr;
  margin-bottom: 32px;
}

.modal__search-input-wrapper {
  position: relative;
}

.modal__search-button {
  background-color: transparent;
  border: none;
  height: 16px;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 16px;
  z-index: 1;
}

.modal__header-buttons {
  display: flex;
  gap: 8px;
  grid-column: 2/3;
}

@media (max-width: 767px) {
  .modal__header-buttons {
    grid-column: 1/2;
    grid-row: 2/3;
  }
}

.modal__header-button {
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  color: #262626;
  padding: 1px 8px;
  width: max-content;
}

.modal__header-button:hover {
  background-color: #ededed;
}

.modal__close-modal {
  background-color: #fff;
  border: none;
  border-radius: 4px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  height: 35px;
  margin-left: auto;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 35px;
}

.modal__close-modal:after,
.modal__close-modal:before {
  background-color: #262626;
  content: '';
  height: 2px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
  transition: background-color 0.3s ease-in-out;
  width: 15px;
}

.modal__close-modal:after {
  right: 0;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close-modal:hover:after,
.modal__close-modal:hover:before {
  background-color: #ff4d4f;
}

.modal__subheader {
  background-color: transparent;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 0;
}

.modal__subheader .subheader__link {
  margin: 0 24px 8px 0;
}

.modal__info-wrapper {
  padding-left: 35px;
}

.modal__title-wrapper {
  position: relative;
}

.modal__title {
  font-weight: 600;
  grid-template: 1/2;
}

.modal__title--info {
  margin-bottom: 8px;
  position: relative;
}

.modal__title--info:before {
  background-image: url(../assets/images/icons/icon-check.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  content: '';
  height: 23px;
  left: -35px;
  position: absolute;
  top: 2px;
  width: 23px;
}

.modal__button-info {
  background-color: transparent;
  border: none;
  bottom: -4px;
  display: inline-flex;
  flex: 0 0 24px;
  height: 24px;
  padding: 0;
  position: relative;
  right: -4px;
  width: 24px;
}

.modal__profile {
  padding: 32px 59px;
}

.modal__project-card {
  max-width: 300px;
  opacity: 0;
  position: absolute;
  top: calc(100% + 10px);
  transition: all 0.3s;
  visibility: hidden;
  z-index: 3;
}

.modal__project-card:hover {
  -webkit-transform: none;
  transform: none;
}

.modal__button-info:hover + .modal__project-card,
.modal__project-card:hover {
  opacity: 1;
  top: calc(100% + 5px);
  visibility: visible;
}

.modal__button-add {
  height: 20px;
  margin-right: 24px;
  padding: 0;
  position: relative;
  width: 20px;
}

.modal__button-add:after {
  content: '';
  height: 16px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 16px;
}

.modal__button-add:hover:after {
  -webkit-filter: none;
  filter: none;
}

.modal__button-add--gap {
  margin: 0 0 0 24px;
}

.modal__confirm-text {
  color: #262626;
  font-weight: 600;
  margin-bottom: 32px;
  text-align: center;
}

.modal__subtitle-wrapper {
  align-items: flex-start;
  display: flex;
}

.modal__subtitle {
  font-weight: 500;
  margin: 0 13px 16px 0;
}

.modal__scroll-box {
  max-height: 120px;
  overflow-y: auto;
}

.modal__scroll-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  padding: 8px;
  transition: all 0.3s ease-in-out;
}

.modal__scroll-checkbox:checked + .modal__scroll-item,
.modal__scroll-item:hover {
  background-color: #bae7ff;
}

.modal__scroll-checkbox {
  display: none;
}

.modal__notification-content,
.modal__task-list {
  margin-bottom: 32px;
}

.modal__radio-box {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.modal__radio-input {
  display: none;
}

.modal__radio-label {
  cursor: pointer;
  margin: 0 16px 8px 0;
  padding-left: 24px;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.modal__radio-label:hover {
  color: #1890ff;
}

.modal__radio-label:before {
  border: 1px solid #d9d9d9;
  height: 16px;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: border 0.2s ease-in-out;
  width: 16px;
}

.modal__radio-label:after,
.modal__radio-label:before {
  border-radius: 50%;
  content: '';
  position: absolute;
  top: 50%;
}

.modal__radio-label:after {
  background-color: #1890ff;
  height: 8px;
  left: 4px;
  -webkit-transform: translateY(-50%) scale(0);
  transform: translateY(-50%) scale(0);
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  width: 8px;
}

.modal__radio-input:checked + .modal__radio-label:before {
  border: 1px solid #1890ff;
}

.modal__radio-input:checked + .modal__radio-label:after {
  -webkit-transform: translateY(-50%) scale(1);
  transform: translateY(-50%) scale(1);
}

.modal__checkbox-wrapper {
  width: 100%;
}

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

.modal__label--bold {
  font-weight: 600;
}

.modal__label--gap {
  margin: 0 8px 0 0;
}

.modal__label--checkbox {
  align-items: center;
  cursor: pointer;
  display: flex;
  margin: 0;
  padding-left: 24px;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}

.modal__label--checkbox:before {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  content: '';
  display: inline-block;
  height: 16px;
  left: 0;
  margin-right: 8px;
  position: absolute;
  top: 2px;
  width: 16px;
}

.modal__checkbox:checked + .modal__label--checkbox:before {
  background-color: #1890ff;
  background-image: url(../assets/images/icons/checkbox.svg);
  border-color: #1890ff;
}

.modal__checkbox {
  display: none;
}

.modal__error-text {
  color: #ff4d4f;
}

.modal__textarea {
  resize: none;
}

.modal__controls-box {
  display: flex;
  justify-content: flex-end;
}

.modal__controls {
  background-color: transparent;
  border: none;
}

.modal__controls--richtext {
  height: 13px;
  margin-right: 8px;
  width: 10px;
}

.modal__controls--attach {
  height: 13px;
  width: 15px;
}

.modal__controls--lock {
  height: 20px;
  width: 14px;
}

.modal__controls--edit {
  height: 14px;
  margin-right: 8px;
  width: 14px;
}

.modal__controls--delete {
  -webkit-filter: brightness(0) saturate(100%);
  filter: brightness(0) saturate(100%);
  height: 14px;
  width: 14px;
}

.modal__controls--delete:hover {
  -webkit-filter: none;
  filter: none;
}

.modal__controls--xl {
  height: 18px;
  margin-left: 8px;
  width: 18px;
}

.modal__icon-tag,
.modal__tag {
  margin: 0 8px 8px 0;
}

.modal__tag {
  display: inline-block;
  padding: 1px 8px;
}

.modal__tag:before {
  display: none;
}

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

.modal__mark {
  margin-right: 16px;
  padding-left: 16px;
  position: relative;
}

.modal__mark:before {
  border-radius: 50%;
  content: '';
  height: 8px;
  left: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 8px;
}

.modal__mark--blue:before {
  background-color: #1890ff;
}

.modal__mark--red:before {
  background-color: #ff4d4f;
}

.modal__mark--green:before {
  background-color: #52c41a;
}

.modal__date-range {
  align-items: center;
  display: flex;
  margin-bottom: 32px;
}

.modal__icon-calendar {
  background-image: url(../assets/images/icons/calendar.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 14px;
  height: 14px;
  pointer-events: none;
  position: absolute;
  right: 14px;
  width: 14px;
}

.modal__notification-box {
  grid-gap: 16px;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
}

.modal__notification-link {
  color: #1890ff;
  grid-column: 3/4;
  grid-row: 1/2;
  text-decoration: underline;
}

.modal__notification-link:hover {
  text-decoration: none;
}

.modal__notification-cancel {
  grid-column: 2/3;
  grid-row: 1/2;
}

.modal__button-box {
  display: flex;
  justify-content: center;
  gap: 12px 24px;
}

.modal__button {
  width: 153px;
}

.modal__button--wide {
  width: 100%;
}

.modal__button--edit {
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  color: #262626;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.modal__button--edit:hover {
  background-color: #ededed;
}

.modal__button--read {
  grid-row: 1/2;
  margin-right: 0;
}

.modal__button--read,
.modal__button--unread {
  grid-column: 1/2;
  min-width: 240px;
  white-space: nowrap;
  width: auto;
}

.modal__button--unread {
  grid-row: 2/3;
}

.modal__button--info {
  display: block;
  margin: 24px 0 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.modal__button--yes {
  background-color: #f5222d;
  border: 1px solid #f5222d;
}

.modal__button--yes:hover {
  background-color: #da0a15;
}

.modal__button--add {
  margin-top: 16px;
  width: 100%;
}

.modal__button--gap {
  margin-left: 24px;
}

.modal__button--cancel {
  background-color: #f5f5f5;
  border: 1px solid #f5f5f5;
  color: #262626;
  margin-right: 0;
}

.modal__button--cancel:hover {
  background-color: #e8e8e8;
}

.modal__button--right {
  display: block;
  margin-left: auto;
}

.modal__input-with-button {
  align-items: center;
  display: flex;
}

.modal__button-dots {
  background-color: #f0f0f0;
  background-size: auto;
  border: none;
  border-radius: 2px;
  flex: 0 0 42px;
  height: 42px;
  margin-left: 8px;
  padding: 0;
  width: 42px;
}

.modal__button-dots:hover {
  background-color: #e3e3e3;
  -webkit-filter: none;
  filter: none;
}

.modal__row {
  margin-bottom: 24px;
}

.modal__row--start {
  align-items: flex-start;
  display: flex;
}

.modal__row--end {
  align-items: flex-end;
  display: flex;
}

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

.modal__col {
  flex: 0 1 50%;
  margin-right: 24px;
}

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

.modal__col--wide {
  flex: 1 1 60%;
}

.modal__col--diff {
  flex-direction: column;
  justify-content: flex-end;
}

.modal__col--diff:first-child {
  display: flex;
  flex: 1 0 68%;
  margin-right: 24px;
}

.modal__social {
  align-items: center;
  display: flex;
  margin-bottom: 16px;
}

.modal__social:last-child {
  margin-bottom: 0;
}

.modal__social-link {
  margin-right: 8px;
}

.modal__question-list {
  list-style-type: decimal;
  margin-bottom: 32px;
  padding-left: 16px;
}

.modal__question {
  padding-left: 8px;
}

.modal__list,
.modal__question {
  margin-bottom: 24px;
}

.modal__attach {
  margin-bottom: 32px;
}

.modal__link {
  color: #1890ff;
  text-decoration: underline;
}

.modal__link:hover {
  text-decoration: none;
}

.modal__search-results {
  border-top: 1px solid #f0f0f0;
  margin-top: 24px;
  padding-top: 24px;
}

.modal__file-extension {
  color: #8c8c8c;
  margin-left: 8px;
}

.modal-upload {
  background-color: #fff;
  border-radius: 4px;
  bottom: 0;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  max-width: 500px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 24px;
  position: fixed;
  right: 0;
  width: 100%;
  z-index: 25;
}

.modal-upload__close-modal {
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  flex: 0 0 25px;
  grid-column: -1/-2;
  grid-row: 1/2;
  height: 25px;
  margin-left: auto;
  padding: 0;
  position: relative;
  width: 25px;
}

.modal-upload__close-modal:after,
.modal-upload__close-modal:before {
  background-color: #262626;
  content: '';
  height: 2px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
  transition: background-color 0.3s ease-in-out;
  width: 15px;
}

.modal-upload__close-modal:after {
  right: 0;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-upload__close-modal:hover:after,
.modal-upload__close-modal:hover:before {
  background-color: #ff4d4f;
}

.modal-upload__header {
  grid-gap: 16px;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 25px;
  margin-bottom: 32px;
}

.modal-upload__title {
  font-weight: 600;
  grid-template: 1/2;
}

.modal-grid {
  grid-gap: 4px 16px;
  display: grid;
  gap: 4px 16px;
}

.modal-grid--five {
  grid-template-columns: repeat(5, auto);
}

.modal-grid--four {
  grid-template-columns: repeat(4, auto);
}

.modal-grid--three {
  grid-template-columns: repeat(3, auto);
}

.modal-grid--two {
  grid-template-columns: repeat(2, auto);
}

.modal-grid__header,
.modal-grid__tr {
  display: contents;
}

.modal-grid__header {
  font-weight: 500;
}

.modal-grid__td {
  align-items: center;
  display: grid;
  padding: 4px 0;
}

.modal-grid__td a,
.modal-grid__td button,
.modal-grid__td p,
.modal-grid__td span {
  z-index: 2;
}

.modal-grid__button {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin-left: auto;
  padding: 4px 8px;
  width: auto;
}

.modal-grid__description {
  color: #8c8c8c;
  display: none;
  font-weight: 500;
  margin-bottom: 4px;
}

.modal-grid__counter {
  color: #8c8c8c;
}

.modal-grid__userpic {
  margin-right: 10px;
}

.modal-grid__username {
  transition: color 0.2s ease-in-out;
}

.modal-grid__username:hover {
  color: #1890ff;
}

.modal-grid__control-box {
  align-items: center;
  display: flex;
  margin-left: auto;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.modal-grid__control {
  align-items: center;
  background-color: transparent;
  border: none;
  border-radius: 2px;
  display: flex;
  height: 15px;
  justify-content: center;
  margin-right: 12px;
  padding: 0;
  white-space: nowrap;
  width: 15px;
}

.modal-grid__control--delete {
  -webkit-filter: brightness(0) saturate(100%);
  filter: brightness(0) saturate(100%);
  margin: 0;
}

.modal-grid__tr:hover .modal-grid__control-box {
  opacity: 1;
}

.modal-grid__tr:hover .modal-grid__td {
  background-color: #fafafa;
  cursor: pointer;
  position: relative;
}

.modal-grid__tr:hover .modal-grid__td:after {
  background-color: #fafafa;
  bottom: 0;
  content: '';
  left: -100%;
  position: absolute;
  right: 100%;
  top: 0;
  width: 1000%;
  z-index: 0;
}

.modal-grid__tr--highlight .modal-grid__td {
  background-color: #bae7ff;
  position: relative;
}

.modal-grid__tr--highlight .modal-grid__td:after {
  background-color: #bae7ff;
  bottom: 0;
  content: '';
  left: -100%;
  position: absolute;
  right: 100%;
  top: 0;
  width: 1000%;
  z-index: 0;
}

.modal-grid__tr--current .modal-grid__td {
  font-weight: 600;
}

.modal-table__header {
  font-weight: 500;
}

.modal-table__header,
.modal-table__row {
  align-items: center;
  display: flex;
  margin: 0 -59px;
  padding: 8px 51px;
}

.modal-table__row {
  cursor: pointer;
}

.modal-table__row:hover {
  background-color: #fafafa;
}

.modal-table__row--highlight {
  background-color: #bae7ff;
}

.modal-table__row--current {
  font-weight: 600;
}

.modal-table__wrapper {
  display: flex;
  flex-grow: 1;
}

.modal-table__col {
  display: flex;
  flex: 0 0 30%;
  padding: 0 8px;
}

.modal-table__col--narrow {
  flex: 0 0 13%;
}

.modal-table__col--medium {
  flex: 0 0 20%;
}

.modal-table__col--wide {
  flex: 0 0 40%;
}

.modal-table__col--vertical {
  flex-direction: column;
}

.modal-table__col--buttons {
  flex: 0 0 10%;
  margin-left: auto;
}

.modal-table__button {
  padding: 4px 8px;
}

.modal-table__description {
  color: #8c8c8c;
  display: none;
  font-weight: 500;
  margin-right: 12px;
  min-width: 110px;
}

.modal-table__counter {
  color: #8c8c8c;
}

.modal-table__userpic {
  margin-right: 10px;
}

.modal-table__username {
  transition: color 0.2s ease-in-out;
}

.modal-table__username:hover {
  color: #1890ff;
}

.modal-table__control-box {
  align-items: center;
  display: flex;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.modal-table__control {
  align-items: center;
  background-color: transparent;
  border: none;
  border-radius: 2px;
  display: flex;
  height: 15px;
  justify-content: center;
  margin-right: 12px;
  padding: 0;
  white-space: nowrap;
  width: 15px;
}

.modal-table__control--delete {
  -webkit-filter: brightness(0) saturate(100%);
  filter: brightness(0) saturate(100%);
  margin: 0;
}

.modal-table__row:hover .modal-table__control-box {
  opacity: 1;
}

.modal-list__item {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-list__item:last-child {
  margin-bottom: 0;
}

.modal-list__name {
  flex: 0 1 50%;
}

.modal-list__link {
  color: #1890ff;
  margin: 0 40px 0 auto;
}

.modal-usercard {
  align-items: center;
  display: flex;
}

.modal-usercard__pic {
  margin-right: 10px;
  transition: all 0.2s ease-in-out;
}

.modal-usercard__name {
  font-weight: 500;
}

.modal-usercard:hover .modal-usercard__pic {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

@media (max-width: 992px) {
  .modal__header-storage {
    grid-template-columns: 1fr 1fr;
  }

  .modal__search-input-wrapper {
    grid-column: 1/-1;
  }

  .modal-grid {
    grid-gap: 0;
    grid-template-columns: 1fr 1fr;
  }

  .modal-grid__header {
    display: none;
  }

  .modal-grid__description {
    display: block;
  }

  .modal-grid__td--button {
    grid-column: 1/-1;
  }

  .modal-grid__button {
    margin-left: 0;
  }

  .modal-grid__counter {
    display: none;
  }

  .modal-grid__control-box {
    margin: 10px 0;
    opacity: 1;
  }

  .modal-grid__control {
    padding: 9px;
  }
}

@media (max-width: 767px) {
  .modal__wrapper--no-padding {
    padding: 0;
  }

  .modal__inner--xl,
  .modal__inner--xl .modal__body {
    height: 100%;
  }

  .modal__body {
    padding: 24px;
    width: 100%;
  }

  .modal__body--no-padding {
    padding: 0;
  }

  .modal__header--padding {
    padding: 24px 24px 0;
  }

  .modal__header-storage {
    align-items: start;
    grid-template-columns: 1fr 25px;
  }

  .modal__storage-dropdown {
    grid-column: 1/-1;
  }

  .modal__close-modal {
    border: 1px solid #d9d9d9;
    box-shadow: none;
    flex: 0 0 25px;
    grid-column: -1/-2;
    grid-row: 1/2;
    height: 25px;
    position: relative;
    width: 25px;
  }

  .modal__notification-box {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .modal__notification-link {
    grid-column: 2/3;
    grid-row: 2/3;
  }

  .modal__notification-cancel {
    width: 100%;
  }

  .modal-table__row {
    margin: 0 -24px;
    padding: 8px 16px;
  }
}

@media (max-width: 650px) {
  .modal-table__header {
    display: none;
  }

  .modal-table__row {
    border: 1px solid #f0f0f0;
  }

  .modal-table__wrapper {
    flex-direction: column;
  }

  .modal-table__control-box {
    margin-bottom: 16px;
    opacity: 1;
  }

  .modal-table__col {
    margin-bottom: 8px;
  }

  .modal-table__col:last-child {
    margin-bottom: 0;
  }

  .modal-table__col--buttons {
    margin-left: 0;
  }

  .modal-table__description {
    display: block;
  }
}

@media (max-width: 550px) {
  .modal {
    padding: 92px 15px 40px;
  }

  .modal__dropdown-wrapper {
    align-items: flex-start;
    flex-direction: column;
  }

  .modal__dropdown {
    margin: 0 0 16px;
    width: 100%;
  }

  .modal__row {
    align-items: flex-start;
    flex-direction: column;
  }

  .modal__col {
    width: 100%;
  }

  .modal__col:first-child {
    margin: 0 0 16px;
  }

  .modal__button {
    width: 100%;
  }

  .modal__button--add {
    margin-top: 0;
  }

  .modal__button--edit {
    width: -webkit-max-content;
    width: max-content;
  }

  .modal__button--gap {
    margin-left: 0;
  }

  .modal__date-range {
    flex-direction: column;
  }

  .modal__notification-box {
    grid-template-columns: 1fr;
  }

  .modal__button--read {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .modal__button--unread {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .modal__notification-link {
    grid-column: 1/2;
    grid-row: 4/5;
  }

  .modal__notification-cancel {
    grid-column: 1/2;
    grid-row: 3/4;
  }

  .modal-table__row {
    align-items: flex-start;
    flex-direction: column-reverse;
  }

  .modal-grid {
    grid-template-columns: 1fr;
  }

  .modal-list__item {
    align-items: flex-start;
    flex-direction: column;
  }

  .modal-list__name {
    margin-bottom: 16px;
  }

  .modal-list__link {
    margin: 0 0 16px;
  }
}

.chat {
  background-color: #f0f0f0;
}

@media (max-width: 767px) {
  .chat__container.container {
    padding: 0;
  }
}

.chat__wrapper {
  align-items: flex-start;
  display: flex;
}

.chat__page {
  height: 100dvh;
  overflow-y: auto;
  width: 100%;
}

.chat__sticky-header {
  background-color: #fff;
  box-shadow: 0 0 4px #d9d9d9;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.chat__subheader {
  padding: 32px 0;
}

.chat__link {
  color: #1890ff;
  white-space: nowrap;
}

.chat__link:hover {
  text-decoration: underline;
}

.chat__body {
  background-color: #fff;
  padding: 30px 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.chat__footer {
  background-color: #fff;
  bottom: 40px;
  padding: 30px 59px;
  position: sticky;
  width: 100%;
}

.chat__texting {
  color: #8c8c8c;
  font-style: italic;
  margin-bottom: 16px;
  height: 12px;
}

.chat__input {
  margin-bottom: 8px;
  padding: 8px 12px;
  resize: none;
}

.chat__attach {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.chat__attach,
.chat__attach-tags {
  background-color: #fafafa;
  margin-bottom: 8px;
  padding-bottom: 12px;
}

.chat__attach {
  background-color: unset;
  margin-bottom: 0;
}

.chat__row {
  align-items: center;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
}

.chat__editor-wrapper {
  display: grid;
  grid-template-columns: 1fr 42px;
  gap: 12px;
  align-items: end;
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .chat__editor-wrapper {
    grid-template-columns: 1fr;
  }
}

.chat__button-send-mobile {
  width: 42px;
  height: 42px;
  background-color: #1890ff;
  border-radius: 2px;
  background-image: url('../assets/images/icons/send-mobile.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  border: none;
}

.chat__button-send {
  display: none;
}

@media (min-width: 768px) {
  .chat__button-send {
    display: block;
    margin-right: 12px;
  }

  .chat__button-send-mobile {
    display: none;
  }
}

.chat__col {
  display: flex;
}

.chat__col:last-child {
  background-color: #fafafa;
  padding: 10px;
}

.chat__controls-wrapper {
  margin-right: 24px;
}

.chat__controls-wrapper:last-child {
  margin-right: 0;
}

.chat__controls-wrapper .chat-menu {
  bottom: 32px;
  left: 50%;
  top: auto;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.chat__controls-wrapper .chat-menu.active {
  bottom: 40px;
  top: auto;
}

.chat__controls {
  align-items: center;
  background-color: transparent;
  border: none;
  border-radius: 2px;
  display: inline-flex;
  height: 18px;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  width: 18px;
}

.chat__controls--goal {
  margin-right: 0;
}

.chat__controls--active {
  -webkit-filter: invert(50%) sepia(29%) saturate(7072%) hue-rotate(190deg) brightness(100%) contrast(101%);
  filter: invert(50%) sepia(29%) saturate(7072%) hue-rotate(190deg) brightness(100%) contrast(101%);
}

.chat__controls-wrapper {
  position: relative;
}

.chat__username {
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  color: #262626;
  margin: 0 8px;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.chat__message {
  padding: 16px 59px;
}

.chat__message.highlight {
  background-color: rgba(24, 144, 255, 0.2);
}

.chat__task-data {
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  min-width: 320px;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 36px;
  transition: all 0.2s ease-in-out;
  visibility: hidden;
  z-index: 100;
}

.chat__task-data.active {
  opacity: 1;
  top: 28px;
  visibility: visible;
}

.chat__project-hover {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  height: 229px;
  left: 0;
  max-width: 328px;
  opacity: 0;
  position: absolute;
  top: 8px;
  transition: all 0.2s ease-in-out;
  visibility: hidden;
  width: -webkit-max-content;
  width: max-content;
  z-index: 100;
}

.chat__project-hover.active {
  opacity: 1;
  top: 0;
  visibility: visible;
}

.chat__task-list {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  left: 0;
  min-width: 300px;
  opacity: 0;
  padding: 8px;
  position: absolute;
  top: 8px;
  transition: all 0.2s ease-in-out;
  visibility: hidden;
  z-index: 100;
}

.chat__task-list.active {
  opacity: 1;
  top: 0;
  visibility: visible;
}

.chat__incoming-data {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  left: 0;
  max-width: 280px;
  opacity: 0;
  padding: 8px 8px 8px 16px;
  position: absolute;
  top: 8px;
  transition: all 0.2s ease-in-out;
  visibility: hidden;
  z-index: 100;
}

.chat__incoming-data .incoming-data__item {
  margin-left: 8px;
}

.chat__incoming-data.active {
  opacity: 1;
  top: 0;
  visibility: visible;
}

.chat__button-scroll {
  align-items: center;
  background-color: #fff;
  border: none;
  border-radius: 50%;
  bottom: 20px;
  box-shadow: 0 0 4px rgba(38, 38, 38, 0.3);
  display: flex;
  height: 40px;
  justify-content: center;
  position: fixed;
  left: 16px;
  transition: all 0.3s;
  width: 40px;
  z-index: 3;
}

@media (min-width: 768px) {
  .chat__button-scroll {
    position: absolute;
    bottom: 32px;
    left: 0;
  }
}

.chat__button-scroll.hide {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.chat__button-scroll:hover {
  box-shadow: 0 0 4px #1890ff;
}

.chat__button-scroll:hover:before {
  border-bottom-color: #1890ff;
  border-right-color: #1890ff;
}

.chat__button-scroll:before {
  border-color: transparent rgba(38, 38, 38, 0.3) rgba(38, 38, 38, 0.3) transparent;
  border-radius: 2px;
  border-style: solid;
  border-width: 2px;
  content: '';
  height: 13px;
  position: absolute;
  top: 12px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: all 0.3s;
  width: 13px;
}

.chat-userlist {
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 8px;
  transition: all 0.2s ease-in-out;
  visibility: hidden;
  z-index: 100;
}

.chat-userlist.active {
  opacity: 1;
  top: 0;
  visibility: visible;
}

.chat-userlist__separate {
  border-bottom: 1px solid #d9d9d9;
}

.chat-userlist__item {
  align-items: center;
  cursor: pointer;
  display: flex;
  padding: 4px 8px;
  transition: all 0.2s ease-in-out;
}

.chat-userlist__item:hover {
  background-color: #bae7ff;
}

.chat-userlist__username,
.chat-userlist__userpic {
  margin-right: 10px;
  font-size: 14px;
}

.chat-userlist__usermail {
  color: #8c8c8c;
}

@media (max-width: 767px) {
  .chat__body {
    padding: 30px 0 150px;
  }

  .chat__footer {
    padding: 16px;
    position: fixed;
    bottom: 0;
  }
}

.chat-menu {
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 32px;
  transition: all 0.2s ease-in-out;
  visibility: hidden;
  width: -webkit-max-content;
  width: max-content;
  z-index: 100;
}

.chat-menu.active {
  opacity: 1;
  top: 24px;
  visibility: visible;
}

.chat-menu__header {
  align-items: center;
  display: flex;
  padding: 8px 16px;
}

.chat-menu__title {
  font-weight: 600;
}

.chat-menu__button-add {
  height: 17px;
  margin-left: 16px;
  padding: 0;
  position: relative;
  width: 17px;
}

.chat-menu__button-add:after {
  content: '';
  height: 14px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 14px;
}

.chat-menu__button-add:hover:after {
  -webkit-filter: none;
  filter: none;
}

.chat-menu__breadcrumbs {
  padding: 8px 16px;
}

.chat-menu__item {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: block;
  padding: 8px 16px;
  text-align: left;
  transition: all 0.2s ease-in-out;
  width: 100%;
}

.chat-menu__item:hover {
  background-color: #bae7ff;
}

.chat-menu__item--delete {
  color: #ff4d4f;
}

.chat-menu__item--delete:hover {
  background-color: #fff1f0;
}

.chat-menu__mark {
  margin-right: 16px;
  padding-left: 16px;
  position: relative;
}

.chat-menu__mark:before {
  border-radius: 50%;
  content: '';
  height: 8px;
  left: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 8px;
}

.chat-menu__mark--blue:before {
  background-color: #1890ff;
}

.chat-menu__mark--red:before {
  background-color: #ff4d4f;
}

.chat-menu__mark--green:before {
  background-color: #52c41a;
}

.chat-menu__mark--orange:before {
  background-color: #fa8c16;
}

.chat-menu__mark--pink:before {
  background-color: #ffa39e;
}

.chat-menu__link {
  color: #1890ff;
  display: block;
  padding: 8px 16px;
  text-decoration: underline;
}

.chat-menu__link:hover {
  text-decoration: none;
}

.chat-menu__separator {
  border-bottom: 1px solid #f0f0f0;
}

.incoming-menu {
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  bottom: 40px;
  counter-reset: menu;
  left: auto;
  max-width: 280px;
  opacity: 0;
  position: absolute;
  z-index: 2;
  right: 0;
  top: auto;
  transition: all 0.2s ease-in-out;
  visibility: hidden;
  width: -webkit-max-content;
  width: max-content;
}

.incoming-menu.active {
  bottom: 48px;
  opacity: 1;
  top: auto;
  visibility: visible;
}

.incoming-menu__item {
  cursor: pointer;
  margin-bottom: 8px;
  padding: 8px;
  transition: all 0.3s ease-in-out;
}

.incoming-menu__item:hover {
  background-color: #bae7ff;
}

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

.incoming-menu__title {
  font-weight: 500;
  margin-right: 16px;
  position: relative;
}

.incoming-menu__title:before {
  content: counter(menu) '. ';
  counter-increment: menu;
  font-weight: 500;
}

.incoming-menu__body {
  margin-top: 8px;
  max-height: 100px;
  overflow-y: auto;
}

.incoming-menu__type {
  color: #8c8c8c;
}

.incoming-menu__done {
  color: #52c41a;
}

.task-access {
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  left: 28px;
  max-height: 300px;
  max-width: 320px;
  opacity: 0;
  overflow-y: auto;
  position: absolute;
  top: 8px;
  transition: all 0.2s ease-in-out;
  visibility: hidden;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  z-index: 100;
}

.task-access.active {
  opacity: 1;
  top: 0;
  visibility: visible;
}

.task-access__header {
  padding: 8px 8px 0;
}

.task-access__button-lock {
  background-color: transparent;
  border: none;
  color: #1890ff;
  padding-left: 24px;
  position: relative;
  text-decoration: underline;
}

.task-access__button-lock:before {
  content: '';
  height: 17px;
  left: 0;
  position: absolute;
  top: 2px;
  width: 17px;
}

.task-access__button-lock:hover {
  text-decoration: none;
}

.task-access__description {
  color: #8c8c8c;
}

.task-access__item {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 8px;
  transition: all 0.2s ease-in-out;
}

.task-access__title-wrapper {
  align-items: center;
  display: flex;
  margin-top: 16px;
}

.task-access__title {
  font-weight: 600;
  padding: 0 16px 0 8px;
}

.task-access__button-add {
  height: 17px;
  padding: 0;
  position: relative;
  width: 17px;
}

.task-access__button-add:after {
  content: '';
  height: 14px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 14px;
}

.task-access__button-add:hover:after {
  -webkit-filter: none;
  filter: none;
}

.task-access__control-box {
  display: flex;
  margin-left: 16px;
  opacity: 0;
  visibility: hidden;
}

.task-access__control,
.task-access__control-box {
  align-items: center;
  transition: all 0.2s ease-in-out;
}

.task-access__control {
  background-color: transparent;
  border: none;
  border-radius: 2px;
  display: inline-flex;
  height: 15px;
  justify-content: center;
  margin: 0 4px;
  padding: 0;
  white-space: nowrap;
  width: 15px;
}

.task-access__control:last-child {
  margin-right: 0;
}

.task-access__control--delete {
  -webkit-filter: brightness(0);
  filter: brightness(0);
}

.task-access__usercard {
  align-items: center;
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.task-access__userpic {
  margin-right: 8px;
  transition: all 0.3s ease-in-out;
}

.task-access__username {
  font-weight: 500;
  transition: all 0.3s ease-in-out;
}

.task-access__usercard:hover .task-access__userpic {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.task-access__usercard:hover .task-access__username {
  color: #1890ff;
}

.task-access__item:hover .task-access__control-box {
  opacity: 1;
  visibility: visible;
}

.task-data__title {
  font-weight: 600;
  padding: 8px 16px;
}

.task-data__item {
  grid-gap: 8px 16px;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
  border-top: 1px solid #f5f5f5;
  display: grid;
  gap: 8px 16px;
  grid-template-columns: 1fr 88px;
  padding: 16px;
}

.task-data__col {
  grid-gap: 12px;
  display: grid;
  gap: 12px;
}

.task-data__control {
  grid-gap: 8px;
  display: grid;
  gap: 8px;
  justify-items: end;
}

.task-data__attach {
  display: flex;
  flex-direction: column;
}

.task-data__attach-text {
  font-weight: 500;
  grid-column: span 2;
}

.task-data__attach-image {
  height: 116px;
  width: 206px;
}

.task-data__attach-image img {
  border-radius: 16px;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.task-data__userlink {
  align-items: center;
  display: flex;
}

.task-data__userpic {
  margin-right: 12px;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.task-data__username {
  font-weight: 500;
  transition: color 0.3s ease-in-out;
}

.task-data__userlink:hover .task-data__userpic {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.task-data__userlink:hover .task-data__username {
  color: #1890ff;
}

.task-data__date {
  color: #8c8c8c;
  text-align: right;
}

.task-data__link {
  color: #1890ff;
  display: block;
  text-decoration: underline;
}

.task-data__link:hover {
  text-decoration: none;
}

.task-data__accept {
  border: 1px solid #b7eb8f;
  border-radius: 2px;
  color: #52c41a;
}

.task-data__accept,
.task-data__decline {
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.task-data__decline {
  border: 1px solid #ffa39e;
  border-radius: 2px;
  color: #f5222d;
}

.task-data__button-dots {
  align-items: center;
  background-color: transparent;
  background-size: auto;
  border: none;
  cursor: pointer;
  display: flex;
  height: 24px;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease-in-out;
  width: 25px;
}

.task-data__button-box {
  grid-gap: 16px;
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.task-data__button--decline {
  background-color: #f5222d;
  border: 1px solid #f5222d;
}

.task-data__button--decline:hover {
  background-color: #da0a15;
}

.subtask {
  box-shadow: 0 0 4px #d9d9d9;
}

.subtask__header {
  grid-row-gap: 16px;
  background-color: #fff;
  display: grid;
  grid-template-columns: 1fr max-content;
  padding: 8px 16px;
}

@media (min-width: 768px) {
  .subtask__header {
    padding: 16px;
    /*grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));*/
  }
}

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

.subtask__col:first-of-type {
  justify-content: flex-start;
}

.subtask__col:last-of-type {
  justify-content: flex-end;
}

.subtask__name {
  font-weight: 600;
  margin-right: 24px;
}

.subtask__info {
  background-color: transparent;
  border: none;
  margin-right: 12px;
}

.subtask__info--success {
  background-color: #52c41a;
  border: 1px solid #389e0d;
  border-radius: 2px;
  color: #fff;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.subtask__controls-wrapper {
  display: flex;
  position: relative;
}

.subtask__controls-wrapper--status {
  display: none;
}

@media (min-width: 768px) {
  .subtask__controls-wrapper--status {
    display: flex;
  }
}

.subtask__controls {
  align-items: center;
  background-color: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  height: 24px;
  justify-content: center;
  margin-right: 24px;
  padding: 0;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  width: 18px;
}

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

.subtask__controls--dots {
  background-size: auto;
  margin-right: 0;
  width: 25px;
}

.subtask__controls--light {
  background-color: #f0f0f0;
}

.subtask__controls--light:hover {
  background-color: #e3e3e3;
  -webkit-filter: none;
  filter: none;
}

.subtask__controls--lightest {
  background-color: #fff;
  padding: 1px 8px;
  width: auto;
}

.subtask__controls--lightest:hover {
  background-color: #f2f2f2;
}

.subtask__controls--start {
  background-color: #1890ff;
  color: #fff;
  padding: 1px 8px;
  width: auto;
}

.subtask__controls--start:hover {
  background-color: #0084fe;
}

.subtask__controls--process {
  color: #1890ff;
}

.subtask__controls--finish,
.subtask__controls--process {
  padding: 1px 8px;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  width: auto;
}

.subtask__controls--finish {
  color: #52c41a;
  margin-right: 0;
}

.subtask__controls--success {
  background-color: #52c41a;
  background-size: auto;
  width: 25px;
}

.subtask__controls--success:hover {
  background-color: #49ad17;
  -webkit-filter: none;
  filter: none;
}

.subtask__warning {
  align-items: center;
  background-color: #ffa39e;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 16px;
}

.subtask__quote {
  background-color: #fafafa;
  padding: 16px;
}

.subtask__quote-text {
  color: #52c41a;
}

.term {
  display: flex;
  flex: 0 0 178px;
}

.term__item {
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  color: #262626;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.term__item:first-child {
  margin-right: 5px;
}

.term__item:last-child {
  margin-left: 5px;
}

.term__item--deadline {
  background-color: #ff7875;
  border: 1px solid #ff4d4f;
  border-radius: 2px;
  color: #fff;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.quote {
  border-left: 1px solid #1890ff;
  padding: 0 16px;
}

.quote--error {
  border-left: 1px solid #f5222d;
}

.quote--success {
  border-left: 1px solid #52c41a;
}

.quote__date,
.quote__name {
  color: #8c8c8c;
  display: inline-block;
  margin-bottom: 8px;
}

.message {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr max-content;
  transition: background-color 0.3s ease-in-out;
}

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

.message__info {
  align-items: start;
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  width: 100%;
}

.message__user-status {
  margin-right: 12px;
}

.message__username {
  font-weight: 600;
  margin-right: 8px;
}

.message__username--status {
  padding-left: 16px;
  position: relative;
}

.message__username--status:before {
  border-radius: 50%;
  content: '';
  height: 8px;
  left: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 8px;
}

.message__username--online:before {
  background-color: #52c41a;
}

.message__username--offline:before {
  background-color: #d9d9d9;
}

.message__date {
  color: #8c8c8c;
  margin-right: 24px;
  grid-row: 2/3;
}

@media (min-width: 768px) {
  .message__info {
    display: flex;
    align-items: center;
  }
}

.message__controls-wrapper {
  margin-right: 12px;
  position: relative;
}

.message__controls-wrapper:last-child {
  margin-right: 0;
}

.message__controls {
  align-items: center;
  background-color: transparent;
  border: none;
  border-radius: 2px;
  display: inline-flex;
  height: 18px;
  justify-content: center;
  opacity: 0;
  padding: 0;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  width: 18px;
}

.message__controls.active,
.message__controls:hover {
  -webkit-filter: invert(50%) sepia(29%) saturate(7072%) hue-rotate(190deg) brightness(100%) contrast(101%);
  filter: invert(50%) sepia(29%) saturate(7072%) hue-rotate(190deg) brightness(100%) contrast(101%);
}

.message__row.active .message__controls {
  opacity: 1;
}

.message__thumb {
  background-color: transparent;
  border: none;
  border-radius: 2px;
  display: inline-flex;
  justify-content: center;
  margin-right: 12px;
  padding: 0;
  white-space: nowrap;
}

.message__thumb:hover {
  -webkit-filter: invert(50%) sepia(29%) saturate(7072%) hue-rotate(190deg) brightness(100%) contrast(101%);
  filter: invert(50%) sepia(29%) saturate(7072%) hue-rotate(190deg) brightness(100%) contrast(101%);
}

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

.message__thumb--active {
  -webkit-filter: invert(50%) sepia(29%) saturate(7072%) hue-rotate(190deg) brightness(100%) contrast(101%);
  filter: invert(50%) sepia(29%) saturate(7072%) hue-rotate(190deg) brightness(100%) contrast(101%);
}

.message__thumb-box {
  align-items: flex-start;
  display: flex;
  margin-left: auto;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
}

.message:hover .message__thumb-box {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 768px) {
  .message__thumb-box {
    margin: 0;
    position: static;
    opacity: 1;
    visibility: visible;
  }
}

.message__icon {
  height: 18px;
  margin-right: 4px;
  width: 18px;
}

.message__icon--thumb-down,
.message__icon--thumb-down:hover {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.message__content {
  margin: 8px 0 8px 44px;
  transition: max-height 0.9s;
}

.message__content p {
  hyphens: auto;
}

.message__content--hide {
  max-height: 65px;
  overflow: hidden;
  position: relative;
}

.message__content--hide:after {
  background: linear-gradient(0deg, #fff, transparent);
  bottom: 0;
  content: '';
  height: 35px;
  left: 0;
  position: absolute;
  width: 100%;
}

.message__content--show {
  max-height: 100%;
}

.message__attach {
  margin-left: 44px;
}

.message__attach-link {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  transition: color 0.2s ease-in-out;
}

.message__attach-link:hover {
  color: #1890ff;
}

.message__attach-buttons {
  margin-top: 8px;
}

.message__attach-button {
  margin-right: 8px;
  padding: 1px 8px;
  width: auto;
}

.message__attach-button--cancel {
  background-color: #ff4d4f;
  border: 1px solid #ff4d4f;
}

.message__attach-button--cancel:hover {
  background-color: #ff3436;
}

.message__quote {
  margin-bottom: 8px;
}

.message__delete-text {
  background-color: #ff7875;
  border: 1px solid #ff4d4f;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  margin-right: 8px;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.message__status {
  cursor: default;
  display: block;
  margin-top: 8px;
}

.message__status--accept {
  border: 1px solid #b7eb8f;
  border-radius: 2px;
  color: #52c41a;
}

.message__status--accept,
.message__status--decline {
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.message__status--decline {
  border: 1px solid #ffa39e;
  border-radius: 2px;
  color: #f5222d;
}

.message__status--pending {
  border: 1px solid #91d5ff;
  border-radius: 2px;
  color: #1890ff;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.message__edit-button {
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  cursor: pointer;
  margin-right: 24px;
  padding: 1px 8px;
  transition: all 0.2s ease-in-out;
}

.message__edit-button:hover {
  background-color: #ededed;
}

.message__content-link {
  color: #1890ff;
  text-decoration: underline;
}

.message__content-link:hover {
  text-decoration: none;
}

.message__read-more-button {
  background-color: transparent;
  border: none;
  color: #1890ff;
  cursor: pointer;
  display: block;
  margin-left: 44px;
  margin-top: 4px;
  padding: 0;
  text-decoration: underline;
}

.message__read-more-button:hover {
  text-decoration: none;
}

.message__task-status {
  display: inline-block;
  margin-bottom: 5px;
}

.message__task-status--error {
  background-color: #ff7875;
  border: 1px solid #ff4d4f;
  border-radius: 2px;
}

.message__task-status--error,
.message__task-status--success {
  color: #fff;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.message__task-status--success {
  background-color: #52c41a;
  border: 1px solid #389e0d;
  border-radius: 2px;
}

.message__task-status--pending {
  background-color: #bae7ff;
  border: 1px solid #1890ff;
  border-radius: 2px;
  color: #1890ff;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.message__mark-box {
  margin-bottom: 4px;
}

.message__mark {
  margin-right: 16px;
  padding-left: 12px;
  position: relative;
}

.message__mark:before {
  border-radius: 50%;
  content: '';
  height: 6px;
  left: 0;
  position: absolute;
  top: 4px;
  width: 6px;
}

.message__mark--blue:before {
  background-color: #1890ff;
}

.message__mark--red:before {
  background-color: #ff4d4f;
}

.message__mark--green:before {
  background-color: #52c41a;
}

.message__mark--yellow:before {
  background-color: #fa8c16;
}

.message__mark--grey:before {
  background-color: #bfbfbf;
}

.message:hover .message__controls {
  opacity: 1;
}

.message__title {
  font-weight: 600;
  margin-bottom: 12px;
}

.message__paragraph {
  margin-bottom: 8px;
}

.message--highlight {
  background-color: #bae7ff;
}

.message--files {
  background-color: #fafafa;
}

.message--pin .message__controls--pin {
  opacity: 1;
}

.message__highlight-text {
  background-color: #bae7ff;
}

.message__highlight-text--red {
  background-color: #ffa39e;
}

.message__highlight-text--green {
  background-color: #52c41a;
  color: #fff;
}

.message__gallery {
  padding: 8px 0;
}

.gallery-big {
  grid-gap: 16px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(11, 5vw);
}

.gallery-big__img {
  display: block;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
}

.gallery-big__item:first-child {
  grid-column: 1/2;
  grid-row: 1/3;
}

.gallery-big__item:nth-child(2) {
  grid-column: 2/3;
  grid-row: 1/3;
}

.gallery-big__item:nth-child(3) {
  grid-column: 3/5;
  grid-row: 1/6;
}

.gallery-big__item:nth-child(4) {
  grid-column: 1/3;
  grid-row: 3/6;
}

.gallery-big__item:nth-child(5) {
  grid-column: 1/3;
  grid-row: 6/12;
}

.gallery-big__item:nth-child(6) {
  grid-column: 3/4;
  grid-row: 6/9;
}

.gallery-big__item:nth-child(7) {
  grid-column: 4/5;
  grid-row: 6/9;
}

.gallery-big__item:nth-child(8) {
  grid-column: 3/5;
  grid-row: 9/12;
}

.gallery-small {
  grid-gap: 16px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, 30vw);
}

.gallery-small__img {
  display: block;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
}

.gallery-small__item:nth-child(3) {
  grid-column: span 2;
}

.gallery-xs {
  grid-gap: 16px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  grid-template-rows: 30vw;
}

.gallery-xs__img {
  display: block;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
}

@media (max-width: 767px) {
  .message {
    flex-wrap: wrap-reverse;
    padding: 16px;
  }

  .message__col:last-child {
    margin-bottom: 16px;
  }
}

.survey__date {
  color: #8c8c8c;
}

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

.survey__question {
  font-weight: 600;
  margin-bottom: 8px;
}

.survey__input {
  display: none;
}

.survey__label {
  cursor: pointer;
  margin-bottom: 4px;
  padding-left: 24px;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.survey__label:hover {
  color: #1890ff;
}

.survey__label:last-of-type {
  margin-bottom: 12px;
}

.survey__label:before {
  border: 1px solid #d9d9d9;
  height: 16px;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: border 0.2s ease-in-out;
  width: 16px;
}

.survey__label:after,
.survey__label:before {
  border-radius: 50%;
  content: '';
  position: absolute;
  top: 50%;
}

.survey__label:after {
  background-color: #1890ff;
  height: 8px;
  left: 4px;
  -webkit-transform: translateY(-50%) scale(0);
  transform: translateY(-50%) scale(0);
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  width: 8px;
}

.survey__input:checked + .survey__label:before {
  border: 1px solid #1890ff;
}

.survey__input:checked + .survey__label:after {
  -webkit-transform: translateY(-50%) scale(1);
  transform: translateY(-50%) scale(1);
}

.survey__submit-button {
  margin-bottom: 12px;
  padding: 1px 8px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.survey__result-box {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;
}

.survey__total {
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  color: #262626;
  margin-right: 16px;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.survey__cancel-button {
  background-color: transparent;
  border: none;
  color: #1890ff;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.survey__cancel-button:hover {
  text-decoration: none;
}

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

.survey__row:last-child {
  margin-bottom: 12px;
}

.survey__amount,
.survey__chart {
  margin-right: 8px;
}

.survey__amount {
  color: #8c8c8c;
  min-width: 60px;
}

.notifications__title-wrapper {
  align-items: center;
  display: flex;
  margin: 32px 0;
}

.notifications__title {
  margin-right: 16px;
}

.notifications__button-add {
  height: 20px;
  margin-right: 24px;
  padding: 0;
  position: relative;
  width: 20px;
}

.notifications__button-add:after {
  content: '';
  height: 16px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 16px;
}

.notifications__button-add:hover:after {
  -webkit-filter: none;
  filter: none;
}

.notifications__button-add--margin {
  margin: 0;
}

.notifications__subheader {
  display: flex;
  padding: 12px 24px;
}

.notifications__list.container {
  padding: 0;
}

.notifications__item {
  align-items: flex-start;
  display: flex;
  padding: 16px 24px;
}

.notifications__item--highlight {
  background-color: #bae7ff;
}

.notifications__row {
  flex-grow: 1;
}

.notifications__text {
  margin: 0 16px 16px 0;
}

.notifications__link {
  color: #1890ff;
  text-decoration: underline;
}

.notifications__link:hover {
  text-decoration: none;
}

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

.notifications__userpic {
  margin-right: 10px;
}

.notifications__username {
  font-weight: 600;
}

.notifications__content {
  margin-right: 32px;
}

.notifications__button,
.notifications__button-box {
  align-items: center;
  display: flex;
}

.notifications__button {
  background-color: transparent;
  border: none;
  border-radius: 2px;
  height: 18px;
  justify-content: center;
  margin-right: 12px;
  opacity: 0;
  padding: 0;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  width: 18px;
}

.notifications__button--delete {
  -webkit-filter: brightness(0) saturate(100%);
  filter: brightness(0) saturate(100%);
}

.notifications__item:hover .notifications__button {
  opacity: 1;
}

@media (max-width: 550px) {
  .notifications__subheader {
    display: flex;
    padding: 12px;
  }
}

@media (max-width: 500px) {
  .notifications__item {
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap-reverse;
  }

  .notifications__button-box {
    margin-bottom: 16px;
  }

  .notifications__button {
    opacity: 1;
  }
}

.chart {
  align-items: center;
  display: flex;
  height: 45px;
  justify-content: center;
  width: 45px;
}

.chart__background {
  fill: none;
  stroke: #d9e1e9;
  stroke-width: 3;
}

.chart__progress {
  fill: none;
  stroke: #1890ff;
  stroke-width: 3;
  -webkit-animation: progress 1s ease-out forwards;
  animation: progress 1s ease-out forwards;
}

.chart__value {
  fill: #39434d;
  text-anchor: middle;
  font-family: inherit;
  font-size: 9px;
  font-weight: 600;
}

@-webkit-keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.social-link {
  align-items: center;
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 32px;
  height: 32px;
  justify-content: center;
  position: relative;
  width: 32px;
}

.social-link:after {
  content: '';
  height: 15px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 15px;
}

.social-link--insta:after,
.social-link--twi:after {
  height: 18px;
  width: 18px;
}

.attach__item {
  align-items: center;
  display: inline-flex;
  margin: 4px 16px 4px 0;
}

.attach__image {
  height: 27px;
  margin-right: 8px;
  -o-object-fit: cover;
  object-fit: cover;
  width: 48px;
}

.attach__image--xls {
  background-image: url(../assets/images/icons/file-xlsx.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 27px;
  width: 24px;
}

.attach__user-image {
  border-radius: 4px;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.attach__button-delete {
  background-color: transparent;
  border: none;
  display: inline-flex;
  height: 15px;
  margin-left: 8px;
  width: 15px;
}

.attach__button-delete:hover {
  -webkit-filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(4859%) hue-rotate(349deg)
    brightness(102%) contrast(92%);
  filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(4859%) hue-rotate(349deg) brightness(102%)
    contrast(92%);
}

.context-menu {
  min-width: 168px;
  z-index: 3;
}

.context-menu,
.context-menu [data-context-inner] {
  opacity: 0;
  position: fixed;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  visibility: hidden;
}

.context-menu [data-context-inner]._active,
.context-menu._active {
  opacity: 1;
  visibility: visible;
}

.context-menu__header {
  align-items: center;
  display: none;
  font-weight: 600;
  padding: 8px 8px 8px 16px;
}

.context-menu__header--highlight {
  background-color: #bae7ff;
}

.context-menu__close {
  background-color: transparent;
  border: none;
  flex: 0 0 16px;
  height: 16px;
  margin-left: auto;
  padding: 0;
  position: relative;
  width: 16px;
}

.context-menu__close:after,
.context-menu__close:before {
  background-color: #262626;
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  transition: background-color 0.3s ease-in-out;
  width: 16px;
}

.context-menu__close:after {
  right: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.context-menu__close:hover:after,
.context-menu__close:hover:before {
  background-color: #ff4d4f;
}

.context-menu__list {
  background-color: #fff;
  box-shadow: 0 0 4px #d9d9d9;
}

.context-menu__item {
  cursor: pointer;
  padding: 8px 24px 8px 16px;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.context-menu__item:after {
  background-image: url(../assets/images/icons/arrow-black.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  height: 6px;
  opacity: 0;
  position: absolute;
  right: 8px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
  width: 6px;
}

.context-menu__item:hover {
  background-color: #bae7ff;
}

.context-menu__item:hover:after {
  opacity: 1;
}

.context-menu__search {
  padding: 8px 16px;
}

@media (max-width: 500px) {
  .context-menu__header {
    display: flex;
  }
}

.index {
  padding: 50px 0;
}

.index__container {
  align-items: flex-start;
  display: flex;
}

.index__col {
  flex: 0 1 60%;
  margin-right: 54px;
}

.index__col:last-child {
  flex: 0 1 40%;
}

.index__section-box {
  grid-column-gap: 54px;
  grid-row-gap: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.index__cards {
  grid-gap: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 75vh;
  margin: -15px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 15px;
  /* visibility: hidden; */
}

.index__card,
.index__cards:hover {
  visibility: visible;
}

.index__section {
  position: relative;
}

.index__section:after {
  background: linear-gradient(0deg, hsla(0, 0%, 100%, 0.8), transparent);
  bottom: 0;
  content: '';
  height: 15px;
  position: absolute;
  width: 100%;
}

.index__title-wrapper {
  border-bottom: 2px solid #262626;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.index__title {
  display: inline-block;
  font-weight: 600;
  padding-right: 40px;
  position: relative;
  transition: all 0.2s ease-in-out;
}

.index__title:after {
  background-image: url(../assets/images/icons/index-arrow.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 8px;
  position: absolute;
  right: 10px;
  top: 55%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all 0.2s ease-in-out;
  width: 20px;
}

.index__title:hover {
  color: #1890ff;
}

.index__title:hover:after {
  -webkit-filter: invert(50%) sepia(29%) saturate(7072%) hue-rotate(190deg) brightness(100%) contrast(101%);
  filter: invert(50%) sepia(29%) saturate(7072%) hue-rotate(190deg) brightness(100%) contrast(101%);
  right: 5px;
}

.index__post-wrapper {
  height: 32vh;
  overflow-y: auto;
  visibility: hidden;
}

.index__post,
.index__post-wrapper:hover {
  visibility: visible;
}

.index__content {
  margin-top: 8px;
}

.index-post {
  align-items: flex-start;
  display: flex;
  margin-bottom: 24px;
}

.index-post__image {
  flex: 0 0 53px;
  height: 40px;
  margin-right: 16px;
  -o-object-fit: cover;
  object-fit: cover;
  width: 53px;
}

.index-post__image img {
  border-radius: 4px;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.index-settings {
  grid-gap: 24px;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 32px;
  min-height: 412px;
  padding: 24px;
}

.index-settings,
.index-settings__item {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  display: grid;
}

.index-settings__item {
  align-items: flex-start;
  grid-template-columns: 1fr -webkit-max-content;
  grid-template-columns: 1fr max-content;
  padding: 8px;
}

.index-settings__item:first-child {
  grid-column: 1/2;
  grid-row: 1/2;
}

.index-settings__item:nth-child(2) {
  grid-column: 2/3;
  grid-row: 1/2;
}

.index-settings__item:nth-child(3) {
  grid-column: 1/2;
  grid-row: 2/3;
}

.index-settings__item:nth-child(4) {
  grid-column: 2/3;
  grid-row: 2/3;
}

.index-settings__item:last-child {
  grid-column: 3/4;
  grid-row: 1/3;
}

.index-settings__title {
  font-weight: 600;
}

.index-settings__button {
  background-color: transparent;
  border: none;
  height: 18px;
  width: 18px;
}

@media (max-width: 1650px) {
  .index__col,
  .index__col:last-child {
    flex: 0 1 50%;
  }

  .index__section-box {
    grid-template-columns: 1fr;
  }

  .index__cards {
    height: auto;
  }
}

@media (max-width: 1300px) {
  .index__col {
    flex: 0 1 40%;
  }

  .index__col:last-child {
    flex: 0 1 60%;
  }
}

@media (max-width: 1200px) {
  .index__container {
    flex-direction: column;
  }

  .index__col {
    margin: 0 0 54px;
  }

  .index__col:last-child {
    width: 100%;
  }

  .index__section-box {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .index__section-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .index__message {
    padding: 0;
  }

  .index__cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .index-settings {
    display: flex;
    flex-direction: column;
  }

  .index-settings__item {
    display: flex;
    justify-content: space-between;
    min-height: 150px;
  }
}

.search-results__list {
  list-style-type: decimal;
  margin-top: 24px;
  padding-left: 16px;
}

.search-results__item {
  margin-bottom: 16px;
}

.search-results__project {
  display: block;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}

.search-results__project:hover {
  color: #1890ff;
}

.search-results__task {
  display: block;
  margin-bottom: 4px;
  transition: all 0.2s ease-in-out;
}

.search-results__task:hover {
  color: #1890ff;
}

.search-results__message {
  display: block;
  transition: all 0.2s ease-in-out;
}

.search-results__message:hover {
  color: #1890ff;
}

.search-results__highlight {
  background-color: #bae7ff;
}

.profile__subheader {
  align-items: center;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  padding: 0;
}

.profile__contact {
  border-bottom: 1px solid #f0f0f0;
  padding-top: 32px;
}

.profile__contact:last-of-type {
  border-bottom: none;
  margin-bottom: 32px;
}

.profile__item {
  display: flex;
  padding: 16px 0;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.profile__item:before {
  left: -100%;
}

.profile__item:after,
.profile__item:before {
  content: '';
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.3s ease-in-out;
  width: 100%;
}

.profile__item:after {
  right: -100%;
}

.profile__item--checked,
.profile__item:hover {
  background-color: #bae7ff;
  cursor: pointer;
}

.profile__item--checked:after,
.profile__item--checked:before,
.profile__item:hover:after,
.profile__item:hover:before {
  background-color: #bae7ff;
}

.profile__control-box {
  align-items: center;
  display: flex;
  margin-left: auto;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 15px;
  transition: all 0.2s ease-in-out;
}

.profile__control {
  align-items: center;
  background-color: transparent;
  border: none;
  border-radius: 2px;
  display: flex;
  height: 15px;
  justify-content: center;
  margin-right: 12px;
  padding: 0;
  white-space: nowrap;
  width: 15px;
}

.profile__control--delete {
  -webkit-filter: brightness(0) saturate(100%);
  filter: brightness(0) saturate(100%);
  margin: 0;
}

.profile__item:hover .profile__control-box {
  opacity: 1;
}

.profile__content {
  width: 100%;
}

.profile__content .modal__row:last-child {
  margin-bottom: 0;
}

.profile__icon-contacts {
  height: 18px;
  margin: 5px 32px 0 0;
  width: 20px;
}

.profile__userpic {
  height: 212px;
  width: 212px;
}

.profile__userpic--edit {
  margin-bottom: 32px;
  position: relative;
}

.profile__userpic img {
  border-radius: 50%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.profile__change-userpic {
  background-color: transparent;
  border: none;
  bottom: -32px;
  color: #1890ff;
  left: 50%;
  position: absolute;
  text-decoration: underline;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.profile__change-userpic:hover {
  text-decoration: none;
}

.profile__username {
  font-weight: 600;
  margin-bottom: 8px;
}

.profile__state,
.profile__status {
  margin-bottom: 8px;
}

.profile__label {
  color: #8c8c8c;
}

.profile__value {
  font-weight: 500;
}

.profile__attach {
  border-bottom: 1px solid #f0f0f0;
  border-top: 1px solid #f0f0f0;
  padding: 32px 0;
}

.profile__info {
  padding: 20px 0 0;
}

.profile__link {
  color: #1890ff;
  display: inline-block;
  margin: 12px 24px 12px 0;
  text-decoration: underline;
  white-space: nowrap;
}

.profile__link:hover {
  text-decoration: none;
}

.profile__link--delete {
  color: #f5222d;
}

@media (max-width: 767px) {
  .profile {
    padding: 0 24px 24px;
  }
}

@media (max-width: 640px) {
  .profile__subheader {
    flex-direction: column;
  }
}

@media (max-width: 550px) {
  .profile__userpic {
    margin: 0 auto 24px;
  }
}

.person-state {
  border: 1px solid #91d5ff;
  border-radius: 2px;
  color: #1890ff;
}

.person-state,
.person-state--not-working {
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.person-state--not-working {
  border: 1px solid #ffa39e;
  border-radius: 2px;
  color: #f5222d;
}

.person-state--fired {
  border: 1px solid #ffd591;
  border-radius: 2px;
  color: #fa8c16;
}

.person-state--fired,
.person-state--vacation {
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.person-state--vacation {
  border: 1px solid #b7eb8f;
  border-radius: 2px;
  color: #52c41a;
}

.question__row {
  align-items: center;
  display: flex;
  margin-bottom: 8px;
}

.question__input {
  margin-right: 16px;
}

.question__control,
.question__controls-box {
  align-items: center;
  display: flex;
}

.question__control {
  background-color: transparent;
  border: none;
  border-radius: 2px;
  height: 17px;
  justify-content: center;
  margin-right: 12px;
  padding: 0;
  white-space: nowrap;
  width: 17px;
}

.question__control--attach {
  margin-right: 8px;
}

.question__control--delete {
  -webkit-filter: brightness(0) saturate(100%);
  filter: brightness(0) saturate(100%);
  margin: 0;
}

.question__image {
  height: 83px;
  width: 110px;
}

.question__image img {
  border-radius: 4px;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.status-header {
  padding: 8px 10px;
}

.status-header--fired {
  background-color: #ffa39e;
}

.status-header--info {
  background-color: #fff;
}

.status-header--leaving {
  background-color: #fff1f0;
}

.status-header--go-vacation {
  background-color: #fffbe6;
}

.status-header--on-vacation {
  background-color: #f6ffed;
}

.status-header__container,
.status-header__wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 952px;
}

.status-header__container {
  align-items: center;
  justify-content: space-between;
}

.status-header__info-box {
  margin-right: 80px;
}

.status-header__info-box:last-child {
  margin-right: 0;
}

.status-header__info {
  display: flex;
  flex-wrap: wrap;
}

.status-header__title {
  color: #8c8c8c;
}

.status-header__text {
  font-weight: 600;
  margin-right: 24px;
}

.status-header__text:last-child {
  margin-right: 0;
}

.status-header__button-box {
  align-items: center;
  display: flex;
}

.status-header__button {
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  color: #262626;
  cursor: pointer;
  margin-right: 8px;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.status-header__button:last-child {
  margin-right: 0;
}

.status-header__button:hover {
  background-color: #ededed;
}

@media (max-width: 768px) {
  .status-header__container {
    align-items: flex-start;
    flex-direction: column;
  }

  .status-header__info {
    margin-bottom: 8px;
  }
}

@media (max-width: 480px) {
  .status-header__wrapper {
    align-items: flex-start;
    flex-direction: column;
  }

  .status-header__info-box {
    margin: 0 0 8px;
  }

  .status-header__info-box:last-child {
    margin: 0;
  }

  .status-header__info {
    align-items: flex-start;
    flex-direction: column;
  }

  .status-header__button-box {
    flex-wrap: wrap-reverse;
  }

  .status-header__button {
    margin-bottom: 4px;
    margin-top: 4px;
  }
}

.side-menu {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  height: auto;
  margin: 0 16px;
  padding: 16px;
  position: absolute;
  top: 52px;
  gap: 16px;
  z-index: 2;
  right: -15px;
  transform: translateX(200%);
  transition: all 0.3s;
}

.side-menu.active {
  transform: translateX(0);
}

.side-menu__button {
  background-color: transparent;
  border: none;
  height: 24px;
  padding: 0;
  width: 24px;
}

.side-menu__button:last-child {
  margin-bottom: 0;
}

.side-menu__button._active {
  -webkit-filter: invert(50%) sepia(29%) saturate(7072%) hue-rotate(190deg) brightness(100%) contrast(101%);
  filter: invert(50%) sepia(29%) saturate(7072%) hue-rotate(190deg) brightness(100%) contrast(101%);
}

.side-menu__button--attach {
  background-size: auto;
}

.side-menu__button--search {
  width: 22px;
}

.side-menu__button--event,
.side-menu__button--profile,
.side-menu__button--tags {
  background-size: auto;
}

@media (min-width: 768px) {
  .side-menu {
    position: sticky;
    transform: translateX(0);
  }
}

.aside {
  background-color: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  height: calc(100vh - 52px);
  max-width: 480px;
  opacity: 0;
  overflow-x: hidden;
  position: sticky;
  top: 52px;
  /*transition: all 0.6s linear;*/
  visibility: hidden;
  width: 0;
}

.aside._active {
  opacity: 1;
  visibility: visible;
  width: 100%;
  transition: all 0.6s linear;
}

.aside__header {
  background-color: #fff;
  display: grid;
  grid-template-columns: 1fr 24px;
  padding: 16px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1;
}

.aside__body {
  overflow-y: auto;
  padding: 0 16px 16px;
}

.aside__backward {
  display: block;
  margin-bottom: 12px;
  padding-left: 16px;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.aside__backward:hover {
  color: #1890ff;
}

.aside__backward:hover:before {
  border-right-color: #1890ff;
}

.aside__backward:before {
  border-bottom: 5px solid transparent;
  border-right: 7px solid #262626;
  border-top: 5px solid transparent;
  content: '';
  height: 0;
  left: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
  width: 0;
}

.aside__forward {
  display: inline-block;
  margin-bottom: 12px;
  padding-right: 16px;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.aside__forward:hover {
  color: #1890ff;
}

.aside__forward:hover:before {
  border-left-color: #1890ff;
}

.aside__forward:before {
  border-bottom: 5px solid transparent;
  border-left: 7px solid #262626;
  border-top: 5px solid transparent;
  content: '';
  height: 0;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
  width: 0;
}

.aside__separator {
  border-bottom: 1px solid #f5f5f5;
  margin: 16px 0;
}

.aside__title {
  font-weight: 600;
  padding-left: 38px;
  position: relative;
}

.aside__title:before {
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 18px;
  left: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 18px;
}

.aside__title--db:before,
.aside__title--file:before,
.aside__title--info:before,
.aside__title--results:before,
.aside__title--search:before {
  height: 22px;
  width: 22px;
}

.aside__subtitle {
  font-weight: 600;
  margin: 24px 0 8px;
}

.aside__subtitle--button {
  position: relative;
}

.aside__button-edit {
  height: 15px;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 15px;
}

.aside__button-arrow,
.aside__button-edit {
  background-color: transparent;
  border: none;
  padding: 0;
}

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

.aside__search-box {
  padding: 16px;
}

.aside__highlight-text {
  background-color: #bae7ff;
  font-weight: 600;
}

.aside__item {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  transition: all 0.3s ease-in-out;
}

.aside__control-box {
  display: flex;
  margin-left: 16px;
  opacity: 0;
  visibility: hidden;
}

.aside__control,
.aside__control-box {
  align-items: center;
  transition: all 0.2s ease-in-out;
}

.aside__control {
  background-color: transparent;
  border: none;
  border-radius: 2px;
  display: inline-flex;
  height: 15px;
  justify-content: center;
  margin: 0 4px;
  padding: 0;
  white-space: nowrap;
  width: 15px;
}

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

.aside__control--delete {
  -webkit-filter: brightness(0);
  filter: brightness(0);
}

.aside__item:hover .aside__control-box {
  opacity: 1;
  visibility: visible;
}

.aside__usercard {
  align-items: center;
  display: flex;
  margin: 8px 0;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.aside__userpic {
  margin-right: 8px;
  transition: all 0.3s ease-in-out;
}

.aside__username {
  font-weight: 500;
  transition: all 0.3s ease-in-out;
}

.aside__usercard:hover .aside__userpic {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.aside__usercard:hover .aside__username {
  color: #1890ff;
}

.aside__userlink {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

.aside__email {
  font-size: 12px;
  margin-left: 8px;
  position: relative;
  transition: all 0.3s;
  z-index: 3;
}

.aside__email:hover {
  color: #1890ff;
  text-decoration: underline;
}

.aside__access {
  color: #8c8c8c;
  display: block;
  font-size: 12px;
  font-style: italic;
  margin-top: -5px;
}

.aside__position {
  font-weight: 600;
}

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

.aside__description {
  color: #8c8c8c;
}

.aside__preposition {
  color: #8c8c8c;
  margin-right: 12px;
}

.aside__button-add {
  margin-top: 8px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.aside__button-add--center {
  display: block;
  margin: 0 auto;
}

.aside__task-current {
  margin-left: -64px;
  margin-right: -16px;
  margin-top: 16px;
}

.aside__result-list {
  list-style: decimal;
}

.aside__result-task {
  margin-left: 16px;
}

.aside__roles {
  margin-bottom: 8px;
}

.aside__tag {
  cursor: default;
  margin-right: 8px;
}

.aside__task-list {
  margin-bottom: 24px;
}

.aside__link {
  color: #1890ff;
  display: block;
  text-decoration: underline;
}

.aside__link:hover {
  text-decoration: none;
}

.aside__parent-task {
  margin-bottom: 8px;
}

.roles__item {
  font-weight: 500;
  padding-left: 16px;
  position: relative;
}

.roles__item:before {
  border: 1px solid #52c41a;
  border-radius: 50%;
  content: '';
  height: 10px;
  left: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 10px;
}

.roles__item--set:before {
  background-color: #52c41a;
}

.access__button-lock {
  background-color: transparent;
  border: none;
  color: #1890ff;
  padding-left: 24px;
  position: relative;
  text-decoration: underline;
}

.access__button-lock:before {
  content: '';
  height: 17px;
  left: 0;
  position: absolute;
  top: 2px;
  width: 17px;
}

.access__button-lock:hover {
  text-decoration: none;
}

.access__description {
  color: #8c8c8c;
}

.result-task__attach {
  display: flex;
  flex-direction: column;
}

.result-task__attach-text {
  font-weight: 500;
  grid-column: span 2;
}

.result-task__attach-image {
  height: 116px;
  width: 206px;
}

.result-task__attach-image img {
  border-radius: 16px;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.result-task__userpic {
  margin-right: 12px;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.event-list__item {
  border-bottom: 1px solid #f5f5f5;
  padding: 16px 0;
}

.event-list__date,
.event-list__status {
  color: #8c8c8c;
  margin-bottom: 8px;
}

.event-list__status {
  padding-right: 32px;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.event-list__status:after {
  background-size: cover;
  content: '';
  height: 20px;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 20px;
}

.event-list__message {
  font-weight: 500;
}

.task-status {
  margin-bottom: 12px;
}

.task-status--accept {
  border: 1px solid #b7eb8f;
  border-radius: 2px;
  color: #52c41a;
}

.task-status--accept,
.task-status--decline {
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.task-status--decline {
  border: 1px solid #ffa39e;
  border-radius: 2px;
  color: #f5222d;
}

.task-status--pending {
  border: 1px solid #91d5ff;
  border-radius: 2px;
  color: #1890ff;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.incoming-data {
  background-color: #fff;
  list-style-type: decimal;
  margin-bottom: 16px;
  max-width: 480px;
  padding-left: 16px;
}

.incoming-data__item {
  margin-bottom: 8px;
}

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

.incoming-data__title {
  font-weight: 500;
  padding-right: 32px;
  position: relative;
}

.incoming-data__title:after {
  background-size: cover;
  content: '';
  height: 20px;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 20px;
}

.incoming-data__body {
  margin-top: 8px;
  max-height: 100px;
  overflow-y: auto;
}

.incoming-data__type {
  color: #8c8c8c;
}

.incoming-data__done {
  color: #52c41a;
}

.tags-block {
  padding: 16px 0;
}

.tags-block__item {
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  padding: 8px 0;
}

.tags-block__item:first-of-type {
  border-top: 1px solid #f5f5f5;
}

.tags-block__header,
.tags-block__usercard {
  align-items: center;
  display: flex;
}

.tags-block__usercard {
  margin: 8px 16px 8px 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.tags-block__userpic {
  margin-right: 8px;
  transition: all 0.3s ease-in-out;
}

.tags-block__username {
  font-weight: 500;
  transition: all 0.3s ease-in-out;
}

.tags-block__usercard:hover .tags-block__userpic {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.tags-block__usercard:hover .tags-block__username {
  color: #1890ff;
}

.tags-block__date {
  color: #8c8c8c;
  margin-top: 2px;
}

.tags-block__message {
  display: block;
  transition: all 0.3s ease-in-out;
}

.tags-block__message:hover {
  color: #1890ff;
}

.tags-block__icon-link {
  height: 15px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  width: 15px;
}

.tags-block__item:hover .tags-block__icon-link {
  opacity: 1;
}

@media (max-width: 1150px) {
  .aside {
    position: fixed;
    right: 0;
    top: 52px;
    z-index: 2;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    transition: -webkit-transform 0.4s linear;
    transition: transform 0.4s linear;
    transition: transform 0.4s linear, -webkit-transform 0.4s linear;
    width: 100%;
  }

  .aside._active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.attach-tags {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.attach-tags__item {
  align-items: center;
  display: flex;
  margin-right: 16px;
}

.attach-tags .message__mark {
  margin-right: 0;
}

.attach-tags .message__mark:before {
  top: 8px;
}

.attach-tags__button-delete {
  background-color: transparent;
  border: none;
  display: inline-flex;
  height: 15px;
  margin-left: 8px;
  width: 15px;
}

.attach-tags__button-delete:hover {
  -webkit-filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(4859%) hue-rotate(349deg)
    brightness(102%) contrast(92%);
  filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(4859%) hue-rotate(349deg) brightness(102%)
    contrast(92%);
}

.quote-box {
  background-color: #fafafa;
  margin-bottom: 8px;
  padding: 4px 12px;
}

.quote-box__body {
  border-bottom: 1px solid #f0f0f0;
  padding: 8px 25px 8px 0;
  position: relative;
}

.quote-box__body:last-child {
  border-bottom: none;
}

.quote-box__button-delete {
  background-color: transparent;
  border: none;
  height: 20px;
  position: absolute;
  right: 0;
  top: 8px;
  width: 20px;
}

.quote-box__button-delete:hover {
  -webkit-filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(4859%) hue-rotate(349deg)
    brightness(102%) contrast(92%);
  filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(4859%) hue-rotate(349deg) brightness(102%)
    contrast(92%);
}

.access-list {
  list-style: decimal;
  margin-top: -16px;
  width: 100%;
}

.access-list__item {
  border-bottom: 1px solid #f5f5f5;
  padding: 16px 0;
  position: relative;
}

.access-list__item:last-child {
  border-bottom: none;
}

.access-list__item::marker {
  font-weight: 600;
}

.access-list__link {
  display: block;
  margin: 0 48px 8px 0;
  transition: all 0.3s;
}

.access-list__link:hover a {
  color: #1890ff;
  text-decoration: underline;
}

.access-list__button-box {
  position: absolute;
  right: 0;
  top: 16px;
}

.access-list__button {
  background-color: transparent;
  border: none;
}

.access-list__button--edit {
  height: 14px;
  margin-right: 8px;
  width: 14px;
}

.access-list__button--delete {
  -webkit-filter: brightness(0) saturate(100%);
  filter: brightness(0) saturate(100%);
  height: 14px;
  width: 14px;
}

.access-list__button--delete:hover {
  -webkit-filter: none;
  filter: none;
}

.result-task::marker {
  font-weight: 600;
}

.result-task__title {
  font-weight: 600;
  margin: 16px 0;
}

.result-task__item {
  grid-gap: 8px 16px;
  align-items: start;
  border-bottom: 1px solid #f5f5f5;
  border-top: 1px solid #f5f5f5;
  display: grid;
  gap: 8px 16px;
  grid-template-columns: 1fr 88px;
  padding: 16px 0;
}

.result-task__col {
  grid-gap: 12px;
  display: grid;
  gap: 12px;
}

.result-task__control {
  grid-gap: 8px;
  display: grid;
  gap: 8px;
  justify-items: end;
}

.result-task__userlink {
  align-items: center;
  display: flex;
}

.result-task__username {
  font-weight: 500;
  transition: color 0.3s ease-in-out;
}

.result-task__userlink:hover .result-task__userpic {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.result-task__userlink:hover .result-task__username {
  color: #1890ff;
}

.result-task__date {
  color: #8c8c8c;
  text-align: right;
}

.result-task__link {
  color: #1890ff;
  display: block;
  text-decoration: underline;
}

.result-task__link:hover {
  text-decoration: none;
}

.result-task__accept {
  border: 1px solid #b7eb8f;
  border-radius: 2px;
  color: #52c41a;
}

.result-task__accept,
.result-task__decline {
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.result-task__decline {
  border: 1px solid #ffa39e;
  border-radius: 2px;
  color: #f5222d;
}

.result-task__pending {
  border: 1px solid #1890ff;
  border-radius: 2px;
  color: #1890ff;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.result-task__button-dots {
  align-items: center;
  background-color: transparent;
  background-size: auto;
  border: none;
  cursor: pointer;
  display: flex;
  height: 24px;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease-in-out;
  width: 25px;
}

.result-task__button-box {
  grid-gap: 16px;
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.result-task__button--decline {
  background-color: #f5222d;
  border: 1px solid #f5222d;
}

.result-task__button--decline:hover {
  background-color: #da0a15;
}

.blog {
  border-top: 1px solid #f0f0f0;
  margin-top: 24px;
}

.blog__post {
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 0 8px;
}

.blog__subtitle {
  font-weight: 600;
  margin-bottom: 8px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.blog__text {
  margin-bottom: 16px;
}

.blog__text a {
  color: #0069c2;
  text-decoration: underline;
}

.blog__usercard {
  align-items: center;
  display: flex;
  margin: 8px 0;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.blog__username,
.blog__userpic {
  margin-right: 8px;
  transition: all 0.3s ease-in-out;
}

.blog__username {
  font-weight: 500;
}

.blog__usercard:hover .blog__userpic {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.blog__usercard:hover .blog__username {
  color: #1890ff;
}

.blog__date {
  color: #8c8c8c;
}

.storage {
  display: flex;
  height: 100%;
  padding: 0;
}

.storage__aside {
  background-color: #fff;
  border-right: 1px solid #f0f0f0;
  bottom: -100%;
  height: 100%;
  opacity: 0;
  overflow: auto;
  padding: 20px 0 47px;
  position: fixed;
  scrollbar-width: none;
  transition: all 0.3s;
  visibility: hidden;
  width: 100%;
  z-index: 10;
}

.storage__aside.active {
  bottom: 0;
  opacity: 1;
  visibility: visible;
}

.storage__aside::-webkit-scrollbar {
  display: none;
}

.storage__aside-button-menu {
  background-color: transparent;
  background-color: #fff;
  border: none;
  border-top: 2px solid #fafafa;
  bottom: 0;
  color: #8c8c8c;
  cursor: pointer;
  display: block;
  font: inherit;
  font-weight: 500;
  left: 0;
  padding: 15px 15px 15px 45px;
  position: fixed;
  text-align: left;
  width: 100%;
  z-index: 13;
}

.storage__aside-button-menu:before {
  background-image: url(../assets/images/icons/icon-catalog-close.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 15px;
  left: 20px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all 0.3s;
  width: 15px;
}

.storage__aside-button-menu.active:before {
  background-image: url(../assets/images/icons/icon-catalog-open.svg);
}

.storage__content {
  height: 100%;
  width: 100%;
}

.storage__delete-element {
  border-radius: 15px;
  color: #262626;
  cursor: pointer;
  display: block;
  font-weight: 500;
  padding: 12px 12px 12px 44px;
  position: relative;
  transition: all 0.2s;
}

.storage__delete-element:before {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  border-radius: 10px;
  box-sizing: content-box;
  content: '';
  -webkit-filter: brightness(0) saturate(100%);
  filter: brightness(0) saturate(100%);
  height: 16px;
  left: 10px;
  padding: 5px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all 0.3s;
  width: 16px;
}

.storage__delete-element:hover {
  background-color: #fff1f0;
}

.storage__delete-element:hover:before {
  -webkit-filter: none;
  filter: none;
}

.storage__header {
  grid-gap: 12px;
  border-bottom: 1px solid #f0f0f0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin-bottom: 24px;
  padding: 12px 0;
  align-items: baseline;
}

.storage__breadcrumbs {
  grid-column: 1/-1;
}

.storage__title {
  padding-left: 32px;
  position: relative;
}

.storage__title:before {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  height: 20px;
  left: 0;
  position: absolute;
  top: 6px;
  width: 20px;
}

.storage__button-box {
  grid-gap: 12px;
  align-items: center;
  display: flex;
  gap: 12px;
  padding-left: 32px;
}

.storage__add-folder {
  height: 24px;
  width: 24px;
}

.storage__add-file,
.storage__add-folder {
  background-color: transparent;
  border: none;
}

.storage__add-file {
  height: 22px;
  width: 22px;
}

.storage__button-back {
  background-color: transparent;
  border: none;
  padding: 12px 12px 12px 32px;
  position: relative;
}

.storage__button-back:before {
  content: '';
  height: 20px;
  left: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 20px;
}

.storage__button-back:hover {
  color: #1890ff;
}

.storage__header-button {
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  color: #262626;
  padding: 1px 8px;
  width: -webkit-max-content;
  width: max-content;
}

.storage__header-button:hover {
  background-color: #ededed;
}

.rubric {
  overflow-x: auto;
}

.rubric__item {
  min-width: 100%;
  position: relative;
  width: -webkit-max-content;
  width: max-content;
}

.rubric__link {
  border-radius: 12px;
  color: #262626;
  cursor: pointer;
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
  padding: 12px 12px 12px 44px;
  position: relative;
  transition: all 0.2s;
  white-space: nowrap;
}

.rubric__link:before {
  background-image: url(../assets/images/icons/icon-folder-close.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  border-radius: 10px;
  box-sizing: content-box;
  content: '';
  height: 16px;
  left: 10px;
  padding: 5px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all 0.3s;
  width: 16px;
}

.rubric__link._highlight,
.rubric__link:hover {
  background-color: #bae7ff;
}

.rubric__link._active:before {
  background-image: url(../assets/images/icons/icon-folder-open.svg);
}

.rubric ul {
  margin-left: 20px;
}

.storage-list {
  margin-left: -16px;
  margin-right: -12px;
}

.catalog-file,
.catalog-folder {
  grid-gap: 8px;
  align-items: start;
  border-radius: 8px;
  color: #8c8c8c;
  cursor: pointer;
  display: grid;
  font-weight: 500;
  gap: 8px 12px;
  grid-template-columns: 1fr max-content 24px;
  margin-bottom: 8px;
  padding: 12px 12px 12px 58px;
  position: relative;
  transition: all 0.2s;
  text-overflow: ellipsis;
  /* overflow: hidden; */
  word-break: break-word;
}

.catalog-file:before,
.catalog-folder:before {
  background-position: 0;
  content: '';
  height: 20px;
  left: 16px;
  position: absolute;
  top: 12px;
  width: 20px;
}

.catalog-file:hover,
.catalog-folder:hover {
  background-color: rgba(186, 231, 255, 0.5);
}

.catalog-file--upload,
.catalog-folder--upload {
  grid-template-columns: 1fr;
  padding-right: 50px;
  position: relative;
}

.catalog-file--upload:after,
.catalog-folder--upload:after {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 24px;
  position: absolute;
  right: 50px;
  top: 12px;
  width: 24px;
}

.catalog-file--replace,
.catalog-folder--replace {
  grid-template-columns: 1fr 1fr;
}

.catalog-file--upload-wait:after,
.catalog-folder--upload-wait:after {
  -webkit-filter: brightness(0.5);
  filter: brightness(0.5);
  height: 20px;
  width: 20px;
}

.catalog-file__name,
.catalog-folder__name {
  font-size: 12px;
  color: #262626;
  grid-column: 1/2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog-file__popup {
  position: absolute;
  border: 1px solid #d9d9d9;
  background-color: #ffffff;
  border-radius: 2px;
  bottom: 36px;
  left: 48px;
  padding: 4px 8px;
  max-width: 250px;
  white-space: normal;
  transition: all 0.3s;
  opacity: 0;
  visibility: hidden;
}

.catalog-file__popup.active {
  opacity: 1;
  visibility: visible;
  bottom: 40px;
}

.catalog-file__author,
.catalog-folder__author {
  color: #262626;
  grid-column: 1/-1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s;
}

.catalog-file__author:hover,
.catalog-folder__author:hover {
  color: #1890ff;
  text-decoration: underline;
}

.catalog-file__button-dots,
.catalog-folder__button-dots {
  background-color: #f0f0f0;
  background-size: auto;
  border: none;
  border-radius: 2px;
  grid-column: -1/-2;
  grid-row: 1/2;
  height: 24px;
  margin-left: auto;
  width: 24px;
}

.catalog-file__button-dots:hover,
.catalog-folder__button-dots:hover {
  background-color: #e3e3e3;
  -webkit-filter: none;
  filter: none;
}

.catalog-file__menu,
.catalog-folder__menu {
  color: #262626;
  right: 12px;
  top: calc(100% + 5px);
  transition: all 0.3s;
}

.catalog-file__menu.active,
.catalog-folder__menu.active {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.catalog-file__list,
.catalog-folder__list {
  padding: 12px 0;
}

.catalog-file__button-delete,
.catalog-folder__button-delete {
  background-color: transparent;
  border: none;
  height: 18px;
  position: absolute;
  right: 12px;
  top: 14px;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  width: 18px;
}

.catalog-file__button-delete,
.catalog-file__button-delete:hover,
.catalog-folder__button-delete,
.catalog-folder__button-delete:hover {
  -webkit-filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(4859%) hue-rotate(349deg)
    brightness(102%) contrast(92%);
  filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(4859%) hue-rotate(349deg) brightness(102%)
    contrast(92%);
}

.catalog-file__button-delete:hover,
.catalog-folder__button-delete:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.catalog-file__button-delete.disabled,
.catalog-file__button-delete:disabled,
.catalog-folder__button-delete.disabled,
.catalog-folder__button-delete:disabled {
  cursor: not-allowed;
  -webkit-filter: none;
  filter: none;
}

@media (min-width: 576px) {
  .storage__header {
    grid-template-columns: 1fr auto;
  }

  .storage__button-box {
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .storage__aside {
    flex: 0 0 200px;
    margin-left: -16px;
    max-width: 200px;
    opacity: 1;
    padding: 0 16px 0 0;
    position: static;
    visibility: visible;
    z-index: 1;
  }

  .storage__aside-button-menu {
    display: none;
  }

  .storage__content {
    padding-left: 24px;
  }
}

@media (min-width: 992px) {
  .storage__aside {
    flex: 0 0 300px;
    max-width: 300px;
  }

  .catalog-file,
  .catalog-folder {
    grid-gap: 12px;
    align-items: center;
    gap: 12px;
    grid-template-columns: minmax(120px, 305px) 70px 70px minmax(120px, 170px) 32px 32px;
    white-space: nowrap;
  }

  .catalog-file--upload,
  .catalog-folder--upload {
    grid-template-columns: 1fr;
  }

  .catalog-file--replace,
  .catalog-folder--replace {
    grid-template-columns: minmax(120px, 305px) 70px 70px minmax(120px, 170px);
  }

  .catalog-file__author,
  .catalog-file__name,
  .catalog-folder__author,
  .catalog-folder__name {
    grid-column: auto;
  }
}

.progress-bar {
  background-color: #d9d9d9;
  border-radius: 5px;
  height: 5px;
  max-width: 100%;
  overflow: hidden;
  width: 100%;
}

.progress-bar__fill {
  background-color: #52c41a;
  border-radius: 5px;
  height: 100%;
  transition: all 0.3s;
}

body,
html {
  color: #262626;
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 400;
  min-height: 100%;
  hyphens: auto;
}

a {
  color: inherit;
}

body._lock {
  overflow-y: hidden;
}

.body-storage {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.container {
  margin: 0 auto;
  max-width: 1920px;
  padding: 0 24px;
}

@media (max-width: 550px) {
  .container {
    padding: 0 12px;
  }

  .aside {
    max-width: 100%;
  }
}

.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

main {
  padding-bottom: 100px;
  padding-top: 52px;
}

main.no-padding {
  padding-bottom: 0;
  position: fixed;
  width: 100%;
}

img {
  max-width: 100%;
}

.separator {
  border-bottom: 1px solid #d9d9d9;
  margin: 0 15px;
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
}

::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px #d9d9d9;
}

::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
}