   .hb-state-closed {
     .title {
        padding-right: 13px;
     }
    .card-states {
      display: block;
      .hb-state-closed {
        display: inline;
      }
       background-color: #8274d6;
       &:after {
        border-top-color: #4b3d96;
       
       }
     }
   }
   .hb-state-ready {
     .title {
        padding-right: 13px;
     }
    .card-states {
      display: block;
      .hb-state-ready {
        display: inline;
      }
       background-color: #22d186;
       &:after {
        border-top-color: #20a568;
       
       }
     }
   }
   .hb-state-blocked {
     .title {
        padding-right: 13px;
     }
    .card-states {
      display: block;
      .hb-state-blocked {
        display: inline;
      }
       background-color: #f9646e;
       &:after {
        border-top-color: #a83848;
       
       }
     }
   }
  .card-states {
    display: none;
    img {
      display:none;
    }
     
     position:absolute;
     top: 10px;
     right: -12px;
     height: 20px;
     width: 30px;
     background-color: #8274d6;
     &:after {
      position: absolute;
      right: 0px;
      bottom: -11px;
      content: '  ';
      height: 0;
      width: 0;
      border-right: 11px solid transparent;
      border-top: 11px solid #4b3d96;
     }
  }

.flex-crumbs {
   .hb-state-closed {
    .active .card-states {
      display: block;
      .hb-state-closed {
        display: inline;
      }
       background-color: #8274d6;
       &:after {
        border-top-color: #4b3d96;
       
       }
     }
   }
   .hb-state-ready {
    .active .card-states {
      display: block;
      .hb-state-ready {
        display: inline;
      }
      img {
        left: 4px;
        top: -1px;
      }
       background-color: #22d186;
       &:after {
        border-top-color: #20a568;
       
       }
     }
   }
   .hb-state-blocked {
    .active .card-states {
      display: block;
      .hb-state-blocked {
        display: inline;
      }
      img {
        left: 6px;
        top: -1px;
      }
       background-color: #f9646e;
       &:after {
        border-top-color: #a83848;
       
       }
     }
   }
   li:last-child {
    .card-states {
     right: 2px;
    }
   }
  .card-states {
    display: none;
    img {
      display:none;
      position: relative;
      left: 4px;
    }
    z-index: 6;
     
     position:absolute;
     top: 6px;
     right: -8px;
     height: 21px;
     width: 21px;
     border-radius: 50%;
     background-color: #8274d6;
     &:after {
       display:none;
     }
  }


}
