.work-item-form-history-state-graph {
  overflow-x: auto; }
  .work-item-form-history-state-graph .state-node {
    background-color: rgba( 222, 236, 249 ,  1 );
    background-color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
    margin: auto 10px;
    height: min-content; }
  .work-item-form-history-state-graph .transition-top-label,
  .work-item-form-history-state-graph .transition-bottom-label {
    color: rgba(0, 0, 0, .55);
    color: var(--text-secondary-color,rgba(0, 0, 0, .55));
    padding-right: 5px;
    text-align: center; }
  .work-item-form-history-state-graph .transition-top-label {
    padding-top: 1em; }
  .work-item-form-history-state-graph .state-graph-right-arrow {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 20px; }
    .work-item-form-history-state-graph .state-graph-right-arrow .state-graph-arrow-tail {
      height: 40%;
      background: rgba( 43, 136, 216 ,  1 );
      background: rgba( var(--palette-primary-tint-10,43, 136, 216) ,  1 );
      flex-grow: 1; }
    .work-item-form-history-state-graph .state-graph-right-arrow .state-graph-arrow-head {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 0 10px 10px;
      border-color: transparent transparent transparent rgba( 43, 136, 216 ,  1 );
      border-color: transparent transparent transparent rgba( var(--palette-primary-tint-10,43, 136, 216) ,  1 ); }