.bx-schedule{
  .flexbox();
  padding: 15px 0;
  background-color: #FFF;
  .bx-schedule-step{
    .flex();
    position: relative;
    &:before{
      content: '';
      position: absolute;
      top: 8px;
      right: 50%;
      width: 100%;
      height: 1px;
      background-color: #E5E5E5;
    }
    &:first-child{
      &:before{
        content: '';
        height: 0;
      }
    }
    .bx-schedule-label{
      position: relative;
      z-index: 1;
      width: 17px;
      height: 17px;
      line-height: 17px;
      margin: 0 auto;
      border-radius: 999px;
      font-size: 10px;
      text-align: center;
      color: #FFF;
      background-color: #E5E5E5;
      .bx-icon{
        font-size: 12px;
      }
    }
    .bx-schedule-title{
      margin-top: 15px;
      font-size: 13px;
      text-align: center;
      .ellipsisLn(1);
      color: @textColorPatch;
    }
  }
  .bx-schedule--dot{
    &:before{
      content: '';
      top: 4px;
    }
    .bx-schedule-label{
      width: 10px;
      height: 10px;
      line-height: normal
    }
  }
  .bx-schedule--final{
    .bx-schedule-label{
      .bx-icon{
        &:after{
          content: "\E6BB";
        }
      }
    }
  }
  .bx-schedule--doing{
    &:before{
      background-color: @colorPrimary;
    }
    .bx-schedule-label{
      background-color: @colorPrimary;
    }
    .bx-schedule-title{
      color: @colorPrimary;
    }
  }
  .bx-schedule--done{
    &:before{
      background-color: @colorPrimary;
    }
    .bx-schedule-label{
      background-color: @colorPrimary;
      .bx-icon{
        &:after{
          content: "\E6BB";
        }
      }
    }
  }
  .bx-schedule--warning{
    &:before{
      background-color: @colorPrimary;
    }
    .bx-schedule-label{
      background-color: #F04848;
      .bx-icon{
        &:after{
          content: "\E6BF";
        }
      }
    }
    .bx-schedule-title{
      color: #F04848;
    }
  }
}

.bx-schedule-vertical{
  padding: 15px 15px;
  background-color: #FFF;
  .bx-schedule-step{
    padding-bottom: 10px;
    .flexbox();
    position: relative;
    min-height: 60px;
    &:after{
      content: '';
      position: absolute;
      top: 0;
      left: 8px;
      width: 1px;
      height: 100%;
      background-color: #E5E5E5;
    }
    &:last-child{
      &:after{
        width: 0;
      }
    }
    .bx-schedule-label{
      position: relative;
      z-index: 1;
      width: 17px;
      height: 17px;
      line-height: 17px;
      margin: 0 auto;
      border-radius: 999px;
      font-size: 10px;
      text-align: center;
      color: #FFF;
      background-color: #E5E5E5;
      .bx-icon{
        font-size: 12px;
      }
    }
    .bx-schedule-content{
      .flex();
      padding-left: 15px;
      font-size: 12px;
      color: @textColorPatch;
      .text-wrap();
      .bx-schedule-title{
        padding-bottom: 6px;
        font-size: 15px;
        color: #000;
      }
      p{
        line-height: 18px;
      }
    }
  }
  .bx-schedule--dot{
    &:after{
      left: 5px;
    }
    .bx-schedule-label{
      width: 10px;
      height: 10px;
      line-height: normal
    }
  }
  .bx-schedule--final{
    .bx-schedule-label{
      .bx-icon{
        &:after{
          content: "\E6BB";
        }
      }
    }
  }
  .bx-schedule--doing{

    .bx-schedule-label{
      background-color: @colorPrimary;
    }
    .bx-schedule-content{
      color: @colorPrimary;
      .bx-schedule-title{
        color: @colorPrimary;
      }
    }
  }
  .bx-schedule--done{
    &:after{
      background-color: @colorPrimary;
    }
    .bx-schedule-label{
      background-color: @colorPrimary;
      .bx-icon{
        &:after{
          content: "\E6BB";
        }
      }
    }
  }
  .bx-schedule--warning{
    .bx-schedule-label{
      background-color: #F04848;
      .bx-icon{
        &:after{
          content: "\E6BF";
        }
      }
    }
    .bx-schedule-content{
      color: #F04848;
      .bx-schedule-title{
        color: #F04848;
      }
    }

  }
}