$sequence-item-width: 340px;
#easy_sequence_designer{
  margin-left: -$box-padding;
  margin-right: -$box-padding;
  border-top: 1px solid $color-border;
  //background: mix($color-foreground, $color-background);
  & > .splitcontent {
    &left{
      position: absolute;
      top: 0;
      bottom: 0;
      padding: 0;
      left: -1px;
    }
    &right{
      padding-left: 1.5*$box-padding;
      min-height: $sequence-item-width;
    }
  }

  .entities_accordion{
    //margin-left: -$gap - 1;
    height: 100% !important;
    .ui-accordion{
      &-header{
        padding: 1.5*$gap 3*$gap;
        border-right-color: $color-border;
        background: mix($color-foreground, $color-background);
        //border-bottom-color: $color-border;
      }
      &-content{
        background: mix($color-foreground, $color-background);
        padding: $gap;
        height: 81% !important;
        height: calc(100% - 63px)!important;
        overflow: auto;
      }
    }

    ul.entities{
      margin: 0;
      padding: 0;
    }
    .entity_container{
      @extend %flex;
      @extend %flex-direction-row-rewerse;
      @extend %align-items-center;
      .item{
        width: 100%;
      }
    }
    .avatar-container{

    }
  }
  .entity_container{
    @extend %journal-message;
    position: relative;
    margin-bottom: 0;

    .avatar-container{
      //position: absolute;
      //left: 83%;
      //top: $gap;
      margin-left: 0;
    }
    & + .entity_container{
      margin-top: $gap;
    }
  }

}
.easy_entities_sequence_designer_container{
  margin-left: -$gap - 1;
  padding-right: $gap - 1;
  table.steps_container{
    border-top: 1px solid $color-border-minor;
    border-bottom: 1px solid $color-border;
    td {
      background: mix($color-foreground, $color-background);
      vertical-align: top;
      padding-left: $gap;
      padding-right: $gap;
      width: $sequence-item-width + 2*$gap;
      &:first-child{
        padding-left: $box-padding;
      }
      &:last-child{
        padding-right: $box-padding;
      }
      & + td {
        border-left: 1px solid $color-border-minor;
      }
      .contextual{
        a{
          @extend %button-mini;
        }
      }
      &.active{
        background: rgba(mix($color-positive, $color-foreground), .20);
      }
      &.done{

      }
      &.pending{
        background: rgba(mix($color-important, $color-foreground), .20);
      }
    }
  }
  ul.step_container{
    @extend %page-zone;
    min-width: $sequence-item-width - 2*$gap;
    .item{
      padding-bottom: $gap;
      border-bottom: 1px solid $color-border-minor;
      margin-bottom:  $gap;
    }
    .avatar-container{
      width: $box-padding + .6*$gap;
      margin-top: -.3*$gap;
    }
    .rules{
      @include small;
      font-style: italic;
      overflow: hidden;
      padding-top: 0.2*$gap;
      p{
        margin-bottom: 0;
      }
    }
  }
}