.fontSize(@i) when(@i <= 30) {
  .f-s-@{i} {
    font-size: @i + 0px !important;
  }
  .fontSize((@i + 1));
}
.fontSize(12);

.margin(@i) when(@i <= 200) {
  .margin-@{i} {
    margin: @i + 0px;
  }
  .margin((@i + 5));
}
.margin(5);

.marginLeft(@i) when(@i <= 200) {
  .m-l-@{i} {
    margin-left: @i + 0px;
  }
  .marginLeft((@i + 5));
}
.marginLeft(5);

.marginRight(@i) when(@i <= 200) {
  .m-r-@{i} {
    margin-right: @i + 0px;
  }
  .marginRight((@i + 5));
}
.marginRight(5);

.marginTop(@i) when(@i <= 200) {
  .m-t-@{i} {
    margin-top: @i + 0px;
  }
  .marginTop((@i + 5));
}
.marginTop(5);

.marginBottom(@i) when(@i <= 200) {
  .m-b-@{i} {
    margin-bottom: @i + 0px;
  }
  .marginBottom((@i + 5));
}
.marginBottom(5);

.padding(@i) when(@i <= 200) {
  .padding-@{i} {
    padding: @i + 0px;
  }
  .padding((@i + 5));
}
.padding(5);

.paddingLeft(@i) when(@i <= 200) {
  .p-l-@{i} {
    padding-left: @i + 0px;
  }
  .paddingLeft((@i + 5));
}
.paddingLeft(5);

.paddingRight(@i) when(@i <= 200) {
  .p-r-@{i} {
    padding-right: @i + 0px;
  }
  .paddingRight((@i + 5));
}
.paddingRight(5);

.paddingTop(@i) when(@i <= 200) {
  .p-t-@{i} {
    padding-top: @i + 0px;
  }
  .paddingTop((@i + 5));
}
.paddingTop(5);

.paddingBottom(@i) when(@i <= 200) {
  .p-b-@{i} {
    padding-bottom: @i + 0px;
  }
  .paddingBottom((@i + 5));
}
.paddingBottom(5);

.width(@i) when(@i <= 700) {
  .w-@{i} {
    width: @i + 0px;
  }
  .width((@i + 5));
}
.width(5);

.height(@i) when(@i <= 500) {
  .h-@{i} {
    height: @i + 0px;
  }
  .height((@i + 5));
}
.height(5);

.textWarp(@i) when(@i <= 10) {
  .textWarp-@{i} {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: @i;
    -webkit-box-orient: vertical;
  }
  .textWarp((@i + 1));
}
.textWarp(10);
:root {
  --side-nav-width: 235px;
  --pipeline-CREATED: #606266;
  --pipeline-RUNNING: #449fff;
  --pipeline-PAUSED: #f59a23;
  --pipeline-CANCELED: #f46c6c;
  --pipeline-PENDING: #f46c6c;
  --pipeline-SUCCEED: #34d97b;
  --pipeline-ROLLBACK: #6923f5;
  --pipeline-gray-color: #c3cdd7;

  --pipeline-need-operat: #dd8106;

  --header-height: 72px;
  --footer-height: 49px;
  --breadcrumb-height: 50px;
}
.CREATED-color,
.Created-color {
  color: var(--pipeline-CREATED);
}
.Pending-color,
.PENDING-color {
  color: var(--pipeline-PENDING);
}
.RUNNING-color,
.Running-color {
  color: var(--pipeline-RUNNING);
}
.SUCCEED-color,
.Succeed-color {
  color: var(--pipeline-SUCCEED);
}
.PAUSED-color,
.Paused-color {
  color: var(--pipeline-PAUSED);
}
.CANCELED-color,
.Failed-color {
  color: var(--pipeline-CANCELED);
}
.CREATED-bg-color,
.Created-bg-color {
  background-color: var(--pipeline-CREATED);
}
.Pending-bg-color,
.PENDING-bg-color {
  background-color: var(--pipeline-PENDING);
}
.RUNNING-bg-color,
.Running-bg-color {
  background-color: var(--pipeline-RUNNING);
}
.SUCCEED-bg-color,
.Succeed-bg-color {
  background-color: var(--pipeline-SUCCEED);
}
.PAUSED-bg-color,
.Paused-bg-color {
  background-color: var(--pipeline-PAUSED);
}
.CANCELED-bg-color,
.Failed-bg-color {
  background-color: var(--pipeline-CANCELED);
}
.pipeline-running-color {
  color: var(--pipeline-RUNNING);
}
.pipeline-succeed-color {
  color: var(--pipeline-SUCCEED);
}
.pipeline-fail-color {
  color: var(--pipeline-CANCELED);
}
.pipeline-fail-bg-color {
  background-color: var(--pipeline-CANCELED) !important;
  color: #fff;
}
.active-color {
  color: #0052d9;
}