.person-dropmenu {
  width: 320px;
  box-shadow:
    0 1px 1px 0 rgb(0 0 0 / 20%),
    0 1px 1px 0 rgb(0 0 0 / 14%),
    1px 1px 7px 0 rgb(0 0 0 / 12%);
}

.person-button.mat-menu-item {
  display: flex;
}

.input-person-button {
  display: flex;
  align-items: center;

  width: min-content;
  margin-right: 18px;
  margin-left: 5px;
}

.avatar__main {
  cursor: pointer;

  position: relative;
  z-index: 1;
  top: calc(50% - 17px);
  right: 0;
}

.app-person-status {
  cursor: pointer;

  position: relative;
  z-index: 20;

  display: block;

  width: 14px;
  height: 14px;
  margin-top: -20px;
  margin-left: 20px;

  background: #ececec;
  border: solid 2px #fff;
  border-radius: 50%;

  transition: opacity 0.2s ease;

  &.status-online {
    background: #4dd965;
  }

  &.status-dnd {
    background: #ff1414;
  }

  &.status-away {
    background: #ffe100;
  }

  &:hover {
    opacity: 0.8;
  }
}