%presence {
  display: inline-block;
  width: 8px;
  height: 8px;
  align-self: flex-start;
  align-items: center;
  text-indent: -10000000px;
  margin-right: 4px;
  border-radius: 50%;
  transform: translateY(12px);
}
.presence {
  @extend %presence;
  &.pcOn {
    background-color: #28ad66;
  }
  &.pcOut {
    background-color: #f35b5b;
  }
  &.pcOff {
    background-color: #a29f9f;
  }
  &.pcOther {
    background-color: #f0c10a;
  }
}

.work-status {
  &.morning-off {
    //background-color: #11845d;
    background-color: #30ad82;
  }
  &.afternoon-off {
    //background-color: #875acb;
    background-color: #976fd4;
  }
  &.day-off {
    //background-color: #2b98eb;
    background-color: #2b98eb;
  }
  &.long-time {
    //background-color: #c72f20;
    background-color: #ea4737;
  }
  &.leave-of-absence {
    // background-color: #e7853e;
    background-color: #ffa25e;
  }
}