.cr-status {
  min-width: 120px;
  height: 32px;
  border-radius: 27px;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  transition: 0.3;

  &:hover {
    transition: 0.3;
    cursor: pointer;
  }

  &.cr-new {
    font-weight: 700;
    color: #627b66;
    background: hsla(130, 11%, 43%, 0.1);
    &:hover {
      background: hsla(130, 11%, 43%, 0.2);
    }
  }

  &.cr-in_progress {
    color: #f39c12;
    background: hsla(37, 90%, 51%, 0.1);
    &:hover {
      background: hsla(37, 90%, 51%, 0.2);
    }
  }
  &.cr-cancelled {
    color: #e74c3c;
    background: hsla(6, 78%, 57%, 0.1);
    &:hover {
      background: hsla(6, 78%, 57%, 0.2);
    }
  }

  &.cr-complete {
    color: #208ef4;
    background: hsla(209, 91%, 54%, 0.1);
    &:hover {
      background: hsla(209, 91%, 54%, 0.2);
    }
  }
  &.cr-no_show {
    color: white;
    background: red;
    &:hover {
      background: rgb(255 0 0 / 54%);
      transition: 0.3;
    }
  }
}