.posts .post,
.tasks-box {
  border-top: 1px solid #525f66;
  padding-top: 3px;
  background: #fff;
}
.posts .post,
.tasks {
  .card {
    background: #fafafa;
    &.task-completed {
      background: #e5f9e4;
    }
    .spt-border {
      border-left: 1px solid #c1c1c1;
    }
  }
  [data-type="user-tool"]:not(.spt-comments [data-type="user-tool"]) {
    right: 0;
    top: 5px;
    bottom: auto;
  }
}

.spt-comments-box {
  right: 0;
  bottom: 0;
}
.spt-comments {
  margin: 5px 0 0 200px;
}

.importance {
  display: block;
  width: 50%;
  max-width: 800px;
  height: 5px;
  position: absolute;
  right: 0;
  top: 0px;

  &[data-importance="low"] {
    background: #77bb33;
  }

  &[data-importance="medium"] {
    background: #ffee55;
  }

  &[data-importance="high"] {
    background: #bb1414;
  }
}

.taskCompactModeBox {
  position: relative;
  padding-left: 20px;
  cursor: pointer;
  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 14px;
    border: 1px solid rgb(33, 37, 41);
  }
  &.taskCompactMode,
  &.taskHideCompleted {
    &:after {
      content: "";
      position: absolute;
      left: 3px;
      top: 6px;
      width: 8px;
      height: 8px;
      background: rgb(33, 37, 41);
    }
  }
}
.spt-compact {
  position: relative;
  padding-top: 4px;
  padding-bottom: 12px;
  &:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 0;
    height: 1px;
    width: calc(100% - 12px);
    background: #c1c1c1;
  }
  //&:after {
  //  content: "";
  //  position: absolute;
  //  left: 0;
  //  top: 11px;
  //  bottom: 19px;
  //  width: 1px;
  //  background: #c1c1c1;
  //}
}