.status-circle {
  width:30px;
  height:30px;
  border-radius:50%;
  margin-right: 10px;
  > i {
    margin-bottom: 3px;
    color: $white;
    display: block;
    text-align: center;
    margin-top: 3px;
    margin-left: 3px;
    font-size: 25px;
    text-align: center;
    background-repeat: no-repeat;

    height: 90%;
    width: 80%;
    &:after {
      color: $white;
    }
  }

  &.WAITING {
    background: $grey;

    > i {

      background-image: url(/lystore/public/img/scss/send.svg);
    }
  }

  &.PROGRESS{
    background: $yellow;

    > i {
      background-image: url(/lystore/public/img/scss/sync.svg);
    }
  }

  &.SENT {
    background: $yellow;

    > i {
      background-image: url(/lystore/public/img/scss/truck.svg);
    }
  }

  &.DONE {
    background: $green;
    > i {
      background-image: url(/lystore/public/img/scss/check-all.svg);
      fill: white;
    }
  }
  &.REJECTED{
    background: $red;
    >i{
      font-size: 20px;
      content: '\e866';
    }
  }

  &.WAITING_FOR_ACCEPTANCE{
    background: $orange;
    >i{
      background-image: url(/lystore/public/img/scss/check.svg);
    }
  }

  &.VALID{
    background: $yellow;
    >i{
      background-image: url(/lystore/public/img/scss/check.svg);
    }
  }
}