@alifd/next/dist/next-noreset-2.css

A configurable component library for web built on React.

/*!
 * @alifd/next@1.14.7 (https://fusion.design)
 * Copyright 2018-present Alibaba Group,
 * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE)
 */

        .next-search-normal.next-primary.next-large .next-search-btn .next-icon:before {
          width: 24px;
          font-size: 24px;
          line-height: inherit; }
        .next-search-normal.next-primary.next-large .next-search-btn .next-search-btn-text {
          display: inline-block;
          padding-left: 0; }
    .next-search-normal.next-primary.next-medium {
      -webkit-box-shadow: none;
              box-shadow: none; }
      .next-search-normal.next-primary.next-medium .next-search-left, .next-search-normal.next-primary.next-medium .next-search-btn {
        border-width: 2px;
        height: 40px; }
      .next-search-normal.next-primary.next-medium .next-search-input {
        height: 36px;
        overflow-y: hidden; }
        .next-search-normal.next-primary.next-medium .next-search-input input {
          height: 36px;
          line-height: 36px \0; }
      .next-search-normal.next-primary.next-medium .next-select {
        height: 36px; }
      .next-search-normal.next-primary.next-medium .next-search-btn {
        font-size: 16px; }
        .next-search-normal.next-primary.next-medium .next-search-btn .next-icon:before {
          width: 16px;
          font-size: 16px;
          line-height: inherit; }
        .next-search-normal.next-primary.next-medium .next-search-btn .next-search-btn-text {
          display: inline-block;
          padding-left: 0; }
    .next-search-normal.next-primary .next-input {
      border-top-left-radius: 1px;
      border-bottom-left-radius: 1px; }
    .next-search-normal.next-secondary .next-search-left {
      border-color: #C4C6CF; }
      .next-search-normal.next-secondary .next-search-left .next-search-left-addon {
        border-right: 1px solid #E6E7EB; }
    .next-search-normal.next-secondary:hover .next-search-left,
    .next-search-normal.next-secondary:hover .next-btn {
      border-color: #5584FF; }
    .next-search-normal.next-secondary .next-search-btn {
      background: #5584FF;
      border-color: #5584FF;
      color: #FFFFFF; }
      .next-search-normal.next-secondary .next-search-btn:hover {
        background: #3E71F7;
        border-color: #5584FF;
        color: #FFFFFF; }
      .next-search-normal.next-secondary .next-search-btn .next-icon {
        color: #FFFFFF; }
        .next-search-normal.next-secondary .next-search-btn .next-icon:hover {
          color: #FFFFFF; }
    .next-search-normal.next-secondary.next-large {
      -webkit-box-shadow: none;
              box-shadow: none; }
      .next-search-normal.next-secondary.next-large .next-search-left, .next-search-normal.next-secondary.next-large .next-search-btn {
        border-width: 1px;
        height: 60px; }
      .next-search-normal.next-secondary.next-large .next-search-input {
        height: 58px;
        overflow-y: hidden; }
        .next-search-normal.next-secondary.next-large .next-search-input input {
          height: 58px;
          line-height: 58px \0; }
      .next-search-normal.next-secondary.next-large .next-select {
        height: 58px; }
      .next-search-normal.next-secondary.next-large .next-search-btn {
        font-size: 16px; }
        .next-search-normal.next-secondary.next-large .next-search-btn .next-icon:before {
          width: 24px;
          font-size: 24px;
          line-height: inherit; }
        .next-search-normal.next-secondary.next-large .next-search-btn .next-search-btn-text {
          display: inline-block;
          padding-left: 0; }
    .next-search-normal.next-secondary.next-medium {
      -webkit-box-shadow: none;
              box-shadow: none; }
      .next-search-normal.next-secondary.next-medium .next-search-left, .next-search-normal.next-secondary.next-medium .next-search-btn {
        border-width: 1px;
        height: 40px; }
      .next-search-normal.next-secondary.next-medium .next-search-input {
        height: 38px;
        overflow-y: hidden; }
        .next-search-normal.next-secondary.next-medium .next-search-input input {
          height: 38px;
          line-height: 38px \0; }
      .next-search-normal.next-secondary.next-medium .next-select {
        height: 38px; }
      .next-search-normal.next-secondary.next-medium .next-search-btn {
        font-size: 16px; }
        .next-search-normal.next-secondary.next-medium .next-search-btn .next-icon:before {
          width: 16px;
          font-size: 16px;
          line-height: inherit; }
        .next-search-normal.next-secondary.next-medium .next-search-btn .next-search-btn-text {
          display: inline-block;
          padding-left: 0; }
    .next-search-normal.next-secondary .next-input {
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px; }
    .next-search-normal.next-normal .next-search-left {
      border-color: #C4C6CF; }
      .next-search-normal.next-normal .next-search-left .next-search-left-addon {
        border-right: 1px solid #E6E7EB; }
    .next-search-normal.next-normal:hover .next-search-left,
    .next-search-normal.next-normal:hover .next-btn {
      border-color: #A0A2AD; }
    .next-search-normal.next-normal .next-search-btn {
      background: #F7F8FA;
      border-color: #C4C6CF;
      color: #666666; }
      .next-search-normal.next-normal .next-search-btn:hover {
        background: #EBECF0;
        border-color: #A0A2AD;
        color: #333333; }
      .next-search-normal.next-normal .next-search-btn .next-icon {
        color: #666666; }
        .next-search-normal.next-normal .next-search-btn .next-icon:hover {
          color: #333333; }
    .next-search-normal.next-normal.next-large {
      -webkit-box-shadow: none;
              box-shadow: none; }
      .next-search-normal.next-normal.next-large .next-search-left, .next-search-normal.next-normal.next-large .next-search-btn {
        border-width: 1px;
        height: 60px; }
      .next-search-normal.next-normal.next-large .next-search-input {
        height: 58px;
        overflow-y: hidden; }
        .next-search-normal.next-normal.next-large .next-search-input input {
          height: 58px;
          line-height: 58px \0; }
      .next-search-normal.next-normal.next-large .next-select {
        height: 58px; }
      .next-search-normal.next-normal.next-large .next-search-btn {
        font-size: 16px; }
        .next-search-normal.next-normal.next-large .next-search-btn .next-icon:before {
          width: 24px;
          font-size: 24px;
          line-height: inherit; }
        .next-search-normal.next-normal.next-large .next-search-btn .next-search-btn-text {
          display: inline-block;
          padding-left: 0; }
    .next-search-normal.next-normal.next-medium {
      -webkit-box-shadow: none;
              box-shadow: none; }
      .next-search-normal.next-normal.next-medium .next-search-left, .next-search-normal.next-normal.next-medium .next-search-btn {
        border-width: 1px;
        height: 40px; }
      .next-search-normal.next-normal.next-medium .next-search-input {
        height: 38px;
        overflow-y: hidden; }
        .next-search-normal.next-normal.next-medium .next-search-input input {
          height: 38px;
          line-height: 38px \0; }
      .next-search-normal.next-normal.next-medium .next-select {
        height: 38px; }
      .next-search-normal.next-normal.next-medium .next-search-btn {
        font-size: 16px; }
        .next-search-normal.next-normal.next-medium .next-search-btn .next-icon:before {
          width: 16px;
          font-size: 16px;
          line-height: inherit; }
        .next-search-normal.next-normal.next-medium .next-search-btn .next-search-btn-text {
          display: inline-block;
          padding-left: 0; }
    .next-search-normal.next-normal .next-input {
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px; }
    .next-search-normal.next-dark .next-search-left {
      border-color: #5584FF; }
      .next-search-normal.next-dark .next-search-left .next-search-left-addon {
        border-right: 1px solid #5584FF; }
    .next-search-normal.next-dark:hover .next-search-left,
    .next-search-normal.next-dark:hover .next-btn {
      border-color: #5584FF; }
    .next-search-normal.next-dark .next-search-btn {
      background: #5584FF;
      border-color: #5584FF;
      color: #FFFFFF; }
      .next-search-normal.next-dark .next-search-btn:hover {
        background: #3E71F7;
        border-color: #5584FF;
        color: #FFFFFF; }
      .next-search-normal.next-dark .next-search-btn .next-icon {
        color: #FFFFFF; }
        .next-search-normal.next-dark .next-search-btn .next-icon:hover {
          color: #FFFFFF; }
    .next-search-normal.next-dark .next-select-inner,
    .next-search-normal.next-dark input {
      color: #FFFFFF; }
    .next-search-normal.next-dark .next-input {
      background: rgba(255, 255, 255, 0); }
    .next-search-normal.next-dark .next-select {
      background: rgba(255, 255, 255, 0); }
    .next-search-normal.next-dark.next-large {
      -webkit-box-shadow: none;
              box-shadow: none; }
      .next-search-normal.next-dark.next-large .next-search-left, .next-search-normal.next-dark.next-large .next-search-btn {
        border-width: 1px;
        height: 60px; }
      .next-search-normal.next-dark.next-large .next-search-input {
        height: 58px;
        overflow-y: hidden; }
        .next-search-normal.next-dark.next-large .next-search-input input {
          height: 58px;
          line-height: 58px \0; }
      .next-search-normal.next-dark.next-large .next-select {
        height: 58px; }
      .next-search-normal.next-dark.next-large .next-search-btn {
        font-size: 16px; }
        .next-search-normal.next-dark.next-large .next-search-btn .next-icon:before {
          width: 24px;
          font-size: 24px;
          line-height: inherit; }
        .next-search-normal.next-dark.next-large .next-search-btn .next-search-btn-text {
          display: inline-block;
          padding-left: 0; }
    .next-search-normal.next-dark.next-medium {
      -webkit-box-shadow: none;
              box-shadow: none; }
      .next-search-normal.next-dark.next-medium .next-search-left, .next-search-normal.next-dark.next-medium .next-search-btn {
        border-width: 1px;
        height: 40px; }
      .next-search-normal.next-dark.next-medium .next-search-input {
        height: 38px;
        overflow-y: hidden; }
        .next-search-normal.next-dark.next-medium .next-search-input input {
          height: 38px;
          line-height: 38px \0; }
      .next-search-normal.next-dark.next-medium .next-select {
        height: 38px; }
      .next-search-normal.next-dark.next-medium .next-search-btn {
        font-size: 16px; }
        .next-search-normal.next-dark.next-medium .next-search-btn .next-icon:before {
          width: 16px;
          font-size: 16px;
          line-height: inherit; }
        .next-search-normal.next-dark.next-medium .next-search-btn .next-search-btn-text {
          display: inline-block;
          padding-left: 0; }
  .next-search-normal:not([dir=rtl]) .next-search-left {
    border-right: none; }
  .next-search-simple {
    width: 300px;
    -webkit-box-shadow: none;
            box-shadow: none;
    border-radius: 3px; }
    .next-search-simple .next-search-icon {
      cursor: pointer;
      -webkit-transition: all .3s ease-out;
      transition: all .3s ease-out; }
    .next-search-simple .next-search-left, .next-search-simple .next-input {
      border-radius: 3px; }
    .next-search-simple.next-large .next-search-icon {
      margin-right: 12px; }
    .next-search-simple.next-medium .next-search-icon {
      margin-right: 8px; }
    .next-search-simple.next-normal .next-search-left {
      border-color: #C4C6CF; }
      .next-search-simple.next-normal .next-search-left .next-search-left-addon {
        border-right: 1px solid #C4C6CF; }
    .next-search-simple.next-normal:hover .next-search-left {
      border-color: #A0A2AD; }
    .next-search-simple.next-normal .next-search-icon {
      color: #999999; }
      .next-search-simple.next-normal .next-search-icon:hover {
        color: #666666; }
    .next-search-simple.next-normal .next-search-left {
      border-width: 1px; }
    .next-search-simple.next-normal.next-large .next-search-icon:before {
      width: 20px;
      font-size: 20px;
      line-height: inherit; }
    .next-search-simple.next-normal.next-medium .next-search-icon:before {
      width: 12px;
      font-size: 12px;
      line-height: inherit; }
    .next-search-simple.next-dark .next-search-left {
      border-color: #C4C6CF; }
      .next-search-simple.next-dark .next-search-left .next-search-left-addon {
        border-right: 1px solid #C4C6CF; }
    .next-search-simple.next-dark:hover .next-search-left {
      border-color: #C4C6CF; }
    .next-search-simple.next-dark .next-search-icon {
      color: #999999; }
      .next-search-simple.next-dark .next-search-icon:hover {
        color: #666666; }
    .next-search-simple.next-dark .next-select-inner,
    .next-search-simple.next-dark input {
      color: #FFFFFF; }
    .next-search-simple.next-dark .next-input {
      background: rgba(255, 255, 255, 0); }
    .next-search-simple.next-dark .next-select {
      background: rgba(255, 255, 255, 0); }
    .next-search-simple.next-dark .next-search-left {
      border-width: 1px; }
    .next-search-simple.next-dark.next-large .next-search-icon:before {
      width: 20px;
      font-size: 20px;
      line-height: inherit; }
    .next-search-simple.next-dark.next-medium .next-search-icon:before {
      width: 12px;
      font-size: 12px;
      line-height: inherit; }

.next-search-simple .next-select.next-large {
  height: 38px; }

.next-search-simple .next-select.next-medium {
  height: 26px; }

/* Slider */
/* -------------------------------------- */
.next-slick {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  display: block;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  /* 水平滑动 */
  /* 垂直滑动 */ }
  .next-slick *,
  .next-slick *:before,
  .next-slick *:after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
  .next-slick-initialized .next-slick-slide {
    display: block; }
  .next-slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
    .next-slick-list:focus {
      outline: none; }
    .next-slick-list.dragging {
      cursor: pointer;
      cursor: hand; }
  .next-slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  .next-slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    outline: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1);
    transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1); }
    .next-slick[dir="rtl"] .next-slick-slide {
      float: right; }
    .next-slick-slide img {
      display: block; }
  .next-slick-arrow {
    display: block;
    position: absolute;
    cursor: pointer;
    text-align: center;
    -webkit-transition: .4s ease-in;
    transition: .4s ease-in;
    /* prev/next 按钮不同位置下的外观 */ }
    .next-slick-arrow.inner {
      color: #FFFFFF;
      background: #000000;
      opacity: 0.2;
      padding: 0;
      border: none; }
      .next-slick-arrow.inner:focus, .next-slick-arrow.inner:hover {
        color: #FFFFFF;
        background: #000000;
        opacity: 0.4; }
      .next-slick-arrow.inner.disabled {
        color: #CCCCCC;
        background: #F7F8FA;
        opacity: 0.5; }
    .next-slick-arrow.outer {
      color: #666666;
      background: transparent;
      opacity: 0.32;
      padding: 0;
      border: none;
      border-radius: 0; }
      .next-slick-arrow.outer:focus, .next-slick-arrow.outer:hover {
        color: #333333;
        background: transparent;
        opacity: 0.32; }
      .next-slick-arrow.outer.disabled {
        color: #CCCCCC;
        background: transparent;
        opacity: 0.32; }
    .next-slick-arrow.disabled {
      cursor: not-allowed; }
  .next-slick-dots {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
    /* dots 位于水平位置 */
    /* dots 位于右侧垂直位置 */ }
    .next-slick-dots-item {
      position: relative;
      display: inline-block;
      cursor: pointer; }
      .next-slick-dots-item button {
        cursor: pointer;
        border-width: 0;
        border-color: white;
        border-style: solid;
        outline: none;
        padding: 0;
        height: 8px;
        width: 8px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.32); }
        .next-slick-dots-item button:hover {
          background-color: rgba(0, 0, 0, 0.32);
          /* border-width: $slick-dots-border-width-hover; */
          border-color: white; }
      .next-slick-dots-item button:focus,
      .next-slick-dots-item.active button {
        background: #5584ff;
        /* border-width: $slick-dots-border-width-selected; */
        border-color: white;
        -webkit-animation: zoom 0.3s cubic-bezier(0.86, 0, 0.07, 1);
                animation: zoom 0.3s cubic-bezier(0.86, 0, 0.07, 1); }
    .next-slick-dots.hoz {
      width: 100%;
      bottom: 12px;
      left: 0;
      text-align: center; }
      .next-slick-dots.hoz .next-slick-dots-item {
        margin: 0 4px; }
    .next-slick-dots.ver {
      width: 16px;
      top: 0;
      right: 20px;
      bottom: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; }
      .next-slick-dots.ver .next-slick-dots-item {
        margin: 0 0; }
  .next-slick.next-slick-hoz.next-slick-outer {
    padding: 0 24px; }
  .next-slick.next-slick-hoz .next-slick-arrow.medium {
    width: 28px;
    height: 56px;
    line-height: 56px; }
    .next-slick.next-slick-hoz .next-slick-arrow.medium .next-icon:before {
      width: 20px;
      font-size: 20px;
      line-height: inherit; }
  .next-slick.next-slick-hoz .next-slick-arrow.medium.inner {
    top: calc((100% - 56px) / 2); }
    .next-slick.next-slick-hoz .next-slick-arrow.medium.inner.next-slick-prev {
      left: 0; }
    .next-slick.next-slick-hoz .next-slick-arrow.medium.inner.next-slick-next {
      right: 0; }
  .next-slick.next-slick-hoz .next-slick-arrow.medium.outer {
    top: calc((100% - 56px) / 2); }
    .next-slick.next-slick-hoz .next-slick-arrow.medium.outer.next-slick-prev {
      left: -4px; }
    .next-slick.next-slick-hoz .next-slick-arrow.medium.outer.next-slick-next {
      right: -4px; }
  .next-slick.next-slick-hoz .next-slick-arrow.large {
    width: 48px;
    height: 96px;
    line-height: 96px; }
    .next-slick.next-slick-hoz .next-slick-arrow.large .next-icon:before {
      width: 32px;
      font-size: 32px;
      line-height: inherit; }
  .next-slick.next-slick-hoz .next-slick-arrow.large.inner {
    top: calc((100% - 96px) / 2); }
    .next-slick.next-slick-hoz .next-slick-arrow.large.inner.next-slick-prev {
      left: 0; }
    .next-slick.next-slick-hoz .next-slick-arrow.large.inner.next-slick-next {
      right: 0; }
  .next-slick.next-slick-hoz .next-slick-arrow.large.outer {
    top: calc((100% - 96px) / 2); }
    .next-slick.next-slick-hoz .next-slick-arrow.large.outer.next-slick-prev {
      left: -8px; }
    .next-slick.next-slick-hoz .next-slick-arrow.large.outer.next-slick-next {
      right: -8px; }
  .next-slick.next-slick-ver.next-slick-outer {
    padding: 24px 0; }
  .next-slick.next-slick-ver .next-slick-slide {
    display: block;
    height: auto;
    /* border: $slick-ver-slide-border-width solid transparent; */ }
  .next-slick.next-slick-ver .next-slick-arrow {
    /* size medium */
    /* size medium & position inner */
    /* size medium & position outer */
    /* size large */
    /* size large & position inner */
    /* size large & position outer */ }
    .next-slick.next-slick-ver .next-slick-arrow.medium {
      width: 56px;
      height: 28px;
      line-height: 28px; }
      .next-slick.next-slick-ver .next-slick-arrow.medium .next-icon:before {
        width: 20px;
        font-size: 20px;
        line-height: inherit; }
    .next-slick.next-slick-ver .next-slick-arrow.medium.inner {
      left: calc((100% - 56px) / 2); }
      .next-slick.next-slick-ver .next-slick-arrow.medium.inner.next-slick-prev {
        top: 0; }
      .next-slick.next-slick-ver .next-slick-arrow.medium.inner.next-slick-next {
        bottom: 0; }
    .next-slick.next-slick-ver .next-slick-arrow.medium.outer {
      left: calc((100% - 56px) / 2); }
      .next-slick.next-slick-ver .next-slick-arrow.medium.outer.next-slick-prev {
        top: -4px; }
      .next-slick.next-slick-ver .next-slick-arrow.medium.outer.next-slick-next {
        bottom: -4px; }
    .next-slick.next-slick-ver .next-slick-arrow.large {
      width: 96px;
      height: 48px;
      line-height: 48px; }
      .next-slick.next-slick-ver .next-slick-arrow.large .next-icon:before {
        width: 32px;
        font-size: 32px;
        line-height: inherit; }
    .next-slick.next-slick-ver .next-slick-arrow.large.inner {
      left: calc((100% - 96px) / 2); }
      .next-slick.next-slick-ver .next-slick-arrow.large.inner.next-slick-prev {
        top: 0; }
      .next-slick.next-slick-ver .next-slick-arrow.large.inner.next-slick-next {
        bottom: 0; }
    .next-slick.next-slick-ver .next-slick-arrow.large.outer {
      left: calc((100% - 96px) / 2); }
      .next-slick.next-slick-ver .next-slick-arrow.large.outer.next-slick-prev {
        top: -16px; }
      .next-slick.next-slick-ver .next-slick-arrow.large.outer.next-slick-next {
        bottom: -16px; }

.next-split-btn {
  display: inline-block;
  position: relative; }
  .next-split-btn-trigger .next-icon {
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .next-split-btn-trigger.next-expand .next-icon {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg); }
  .next-split-btn-trigger.next-btn-normal:not(:disabled):not(.disabled) .next-icon {
    color: #999999; }
  .next-split-btn-trigger.next-small {
    padding-left: 4px;
    padding-right: 4px; }
  .next-split-btn-trigger.next-medium {
    padding-left: 8px;
    padding-right: 8px; }

.next-step *,
.next-step *:before,
.next-step *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

.next-step, .next-step:before, .next-step:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

.next-step {
  width: 100%;
  position: relative;
  border: none; }
  .next-step-item {
    position: relative;
    vertical-align: middle;
    outline: 0;
    height: 100%; }
    .next-step-item-body {
      outline: 0; }
    .next-step-item-node {
      -webkit-transition: all .2s ease;
      transition: all .2s ease; }
      .next-step-item-node.clicked {
        -webkit-transform: scale3d(0.8, 0.8, 0.8);
                transform: scale3d(0.8, 0.8, 0.8); }
  .next-step-horizontal {
    overflow: hidden; }
    .next-step-horizontal > .next-step-item {
      display: inline-block;
      text-align: left; }
  .next-step-vertical > .next-step-item {
    display: block;
    text-align: center; }

.next-step-arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .next-step-arrow .next-step-item {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: 32px;
    line-height: 32px;
    margin-left: 16px;
    margin-right: 4px; }
    .next-step-arrow .next-step-item:before {
      content: '';
      position: absolute;
      left: -16px;
      top: 0;
      z-index: 1;
      border: 16px solid transparent;
      border-left-color: transparent; }
    .next-step-arrow .next-step-item:after {
      content: '';
      position: absolute;
      right: -16px;
      top: 0;
      z-index: 1;
      border-top: 16px solid transparent;
      border-bottom: 16px solid transparent;
      border-left: 16px solid transparent; }
    .next-step-arrow .next-step-item .next-step-item-container {
      min-width: 100px;
      height: 32px;
      cursor: pointer; }
      .next-step-arrow .next-step-item .next-step-item-container .next-step-item-title {
        height: 32px;
        line-height: 32px;
        font-weight: bold;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center; }
  .next-step-arrow > .next-step-item-wait {
    background: #EBECF0; }
    .next-step-arrow > .next-step-item-wait .next-step-item-tail-overlay {
      background: #000000; }
    .next-step-arrow > .next-step-item-wait .next-step-item-tail-underlay {
      background: #CCCCCC; }
    .next-step-arrow > .next-step-item-wait > .next-step-item-container .next-step-item-progress {
      width: 32px;
      height: 32px; }
    .next-step-arrow > .next-step-item-wait > .next-step-item-container .next-step-item-node {
      color: #000000; }
    .next-step-arrow > .next-step-item-wait > .next-step-item-container .next-step-item-node-circle {
      background: #EBECF0;
      border-color: #000000; }
    .next-step-arrow > .next-step-item-wait > .next-step-item-container .next-step-item-node-dot {
      background: #EBECF0;
      border-color: #000000; }
    .next-step-arrow > .next-step-item-wait .next-step-item-title {
      color: #999999;
      word-break: break-word; }
    .next-step-arrow > .next-step-item-wait .next-step-item-content {
      color: #999999;
      font-size: 12px;
      word-break: break-word; }
    .next-step-arrow > .next-step-item-wait .next-step-item-node-placeholder {
      width: 32px;
      height: 32px;
      position: relative; }
    .next-step-arrow > .next-step-item-wait .next-step-item-node {
      position: relative;
      display: inline-block;
      text-align: center;
      cursor: pointer; }
      .next-step-arrow > .next-step-item-wait .next-step-item-node-circle {
        display: block;
        width: 32px;
        height: 32px;
        font-size: 12px;
        font-weight: normal;
        line-height: 30px;
        text-align: center;
        border: 1px solid;
        border-radius: 50%;
        -webkit-transition: background-color .2s ease, border-color .2s ease;
        transition: background-color .2s ease, border-color .2s ease; }
        .next-step-arrow > .next-step-item-wait .next-step-item-node-circle .next-icon {
          -webkit-animation: zoomIn .2s linear;
                  animation: zoomIn .2s linear; }
          .next-step-arrow > .next-step-item-wait .next-step-item-node-circle .next-icon:before {
            width: 12px;
            font-size: 12px;
            line-height: inherit; }
    .next-step-arrow > .next-step-item-wait .next-step-item-node-dot {
      position: absolute;
      top: 50%;
      margin-top: -16px;
      left: 50%;
      margin-left: -16px;
      display: block;
      width: 32px;
      height: 32px;
      border: 1px solid;
      border-radius: 50%;
      -webkit-transition: background-color .3s ease, border-color .3s ease;
      transition: background-color .3s ease, border-color .3s ease; }
    .next-step-arrow > .next-step-item-wait:before {
      border: 16px solid #EBECF0;
      border-left-color: transparent; }
    .next-step-arrow > .next-step-item-wait:after {
      border-left-color: #EBECF0; }
  .next-step-arrow > .next-step-item-process {
    background: #5584FF; }
    .next-step-arrow > .next-step-item-process .next-step-item-tail-overlay {
      background: #000000; }
    .next-step-arrow > .next-step-item-process .next-step-item-tail-underlay {
      background: #CCCCCC; }
    .next-step-arrow > .next-step-item-process > .next-step-item-container .next-step-item-progress {
      width: 32px;
      height: 32px; }
    .next-step-arrow > .next-step-item-process > .next-step-item-container .next-step-item-node {
      color: #000000; }
    .next-step-arrow > .next-step-item-process > .next-step-item-container .next-step-item-node-circle {
      background: #5584FF;
      border-color: #000000; }
    .next-step-arrow > .next-step-item-process > .next-step-item-container .next-step-item-node-dot {
      background: #5584FF;
      border-color: #000000; }
    .next-step-arrow > .next-step-item-process .next-step-item-title {
      color: #FFFFFF;
      word-break: break-word; }
    .next-step-arrow > .next-step-item-process .next-step-item-content {
      color: #FFFFFF;
      font-size: 12px;
      word-break: break-word; }
    .next-step-arrow > .next-step-item-process .next-step-item-node-placeholder {
      width: 32px;
      height: 32px;
      position: relative; }
    .next-step-arrow > .next-step-item-process .next-step-item-node {
      position: relative;
      display: inline-block;
      text-align: center;
      cursor: pointer; }
      .next-step-arrow > .next-step-item-process .next-step-item-node-circle {
        display: block;
        width: 32px;
        height: 32px;
        font-size: 12px;
        font-weight: normal;
        line-height: 30px;
        text-align: center;
        border: 1px solid;
        border-radius: 50%;
        -webkit-transition: background-color .2s ease, border-color .2s ease;
        transition: background-color .2s ease, border-color .2s ease; }
        .next-step-arrow > .next-step-item-process .next-step-item-node-circle .next-icon {
          -webkit-animation: zoomIn .2s linear;
                  animation: zoomIn .2s linear; }
          .next-step-arrow > .next-step-item-process .next-step-item-node-circle .next-icon:before {
            width: 12px;
            font-size: 12px;
            line-height: inherit; }
    .next-step-arrow > .next-step-item-process .next-step-item-node-dot {
      position: absolute;
      top: 50%;
      margin-top: -16px;
      left: 50%;
      margin-left: -16px;
      display: block;
      width: 32px;
      height: 32px;
      border: 1px solid;
      border-radius: 50%;
      -webkit-transition: background-color .3s ease, border-color .3s ease;
      transition: background-color .3s ease, border-color .3s ease; }
    .next-step-arrow > .next-step-item-process:before {
      border: 16px solid #5584FF;
      border-left-color: transparent; }
    .next-step-arrow > .next-step-item-process:after {
      border-left-color: #5584FF; }
  .next-step-arrow > .next-step-item-finish {
    background: #DEE8FF; }
    .next-step-arrow > .next-step-item-finish .next-step-item-tail-overlay {
      background: #000000; }
    .next-step-arrow > .next-step-item-finish .next-step-item-tail-underlay {
      background: #CCCCCC; }
    .next-step-arrow > .next-step-item-finish > .next-step-item-container .next-step-item-progress {
      width: 32px;
      height: 32px; }
    .next-step-arrow > .next-step-item-finish > .next-step-item-container .next-step-item-node {
      color: #000000; }
    .next-step-arrow > .next-step-item-finish > .next-step-item-container .next-step-item-node-circle {
      background: #DEE8FF;
      border-color: #000000; }
    .next-step-arrow > .next-step-item-finish > .next-step-item-container .next-step-item-node-dot {
      background: #DEE8FF;
      border-color: #000000; }
    .next-step-arrow > .next-step-item-finish .next-step-item-title {
      color: #5584FF;
      word-break: break-word; }
    .next-step-arrow > .next-step-item-finish .next-step-item-content {
      color: #5584FF;
      font-size: 12px;
      word-break: break-word; }
    .next-step-arrow > .next-step-item-finish .next-step-item-node-placeholder {
      width: 32px;
      height: 32px;
      position: relative; }
    .next-step-arrow > .next-step-item-finish .next-step-item-node {
      position: relative;
      display: inline-block;
      text-align: center;
      cursor: pointer; }
      .next-step-arrow > .next-step-item-finish .next-step-item-node-circle {
        display: block;
        width: 32px;
        height: 32px;
        font-size: 12px;
        font-weight: normal;
        line-height: 30px;
        text-align: center;
        border: 1px solid;
        border-radius: 50%;
        -webkit-transition: background-color .2s ease, border-color .2s ease;
        transition: background-color .2s ease, border-color .2s ease; }
        .next-step-arrow > .next-step-item-finish .next-step-item-node-circle .next-icon {
          -webkit-animation: zoomIn .2s linear;
                  animation: zoomIn .2s linear; }
          .next-step-arrow > .next-step-item-finish .next-step-item-node-circle .next-icon:before {
            width: 12px;
            font-size: 12px;
            line-height: inherit; }
    .next-step-arrow > .next-step-item-finish .next-step-item-node-dot {
      position: absolute;
      top: 50%;
      margin-top: -16px;
      left: 50%;
      margin-left: -16px;
      display: block;
      width: 32px;
      height: 32px;
      border: 1px solid;
      border-radius: 50%;
      -webkit-transition: background-color .3s ease, border-color .3s ease;
      transition: background-color .3s ease, border-color .3s ease; }
    .next-step-arrow > .next-step-item-finish:before {
      border: 16px solid #DEE8FF;
      border-left-color: transparent; }
    .next-step-arrow > .next-step-item-finish:after {
      border-left-color: #DEE8FF; }
  .next-step-arrow .next-step-item-disabled {
    cursor: not-allowed;
    background: #F7F8FA; }
    .next-step-arrow .next-step-item-disabled .next-step-item-tail-overlay {
      background: #000000; }
    .next-step-arrow .next-step-item-disabled .next-step-item-tail-underlay {
      background: #CCCCCC; }
    .next-step-arrow .next-step-item-disabled > .next-step-item-container .next-step-item-progress {
      width: 32px;
      height: 32px; }
    .next-step-arrow .next-step-item-disabled > .next-step-item-container .next-step-item-node {
      color: #000000; }
    .next-step-arrow .next-step-item-disabled > .next-step-item-container .next-step-item-node-circle {
      background: #F7F8FA;
      border-color: #000000; }
    .next-step-arrow .next-step-item-disabled > .next-step-item-container .next-step-item-node-dot {
      background: #F7F8FA;
      border-color: #000000; }
    .next-step-arrow .next-step-item-disabled .next-step-item-title {
      color: #CCCCCC;
      word-break: break-word; }
    .next-step-arrow .next-step-item-disabled .next-step-item-content {
      color: #CCCCCC;
      font-size: 12px;
      word-break: break-word; }
    .next-step-arrow .next-step-item-disabled .next-step-item-node-placeholder {
      width: 32px;
      height: 32px;
      position: relative; }
    .next-step-arrow .next-step-item-disabled .next-step-item-node {
      position: relative;
      display: inline-block;
      text-align: center;
      cursor: pointer; }
      .next-step-arrow .next-step-item-disabled .next-step-item-node-circle {
        display: block;
        width: 32px;
        height: 32px;
        font-size: 12px;
        font-weight: normal;
        line-height: 30px;
        text-align: center;
        border: 1px solid;
        border-radius: 50%;
        -webkit-transition: background-color .2s ease, border-color .2s ease;
        transition: background-color .2s ease, border-color .2s ease; }
        .next-step-arrow .next-step-item-disabled .next-step-item-node-circle .next-icon {
          -webkit-animation: zoomIn .2s linear;
                  animation: zoomIn .2s linear; }
          .next-step-arrow .next-step-item-disabled .next-step-item-node-circle .next-icon:before {
            width: 12px;
            font-size: 12px;
            line-height: inherit; }
    .next-step-arrow .next-step-item-disabled .next-step-item-node-dot {
      position: absolute;
      top: 50%;
      margin-top: -16px;
      left: 50%;
      margin-left: -16px;
      display: block;
      width: 32px;
      height: 32px;
      border: 1px solid;
      border-radius: 50%;
      -webkit-transition: background-color .3s ease, border-color .3s ease;
      transition: background-color .3s ease, border-color .3s ease; }
    .next-step-arrow .next-step-item-disabled:before {
      border: 16px solid #F7F8FA;
      border-left-color: transparent; }
    .next-step-arrow .next-step-item-disabled:after {
      border-left-color: #F7F8FA; }
    .next-step-arrow .next-step-item-disabled .next-step-item-container {
      cursor: not-allowed; }
  .next-step-arrow .next-step-item-read-only {
    cursor: default; }
    .next-step-arrow .next-step-item-read-only .next-step-item-container {
      cursor: default; }
  .next-step-arrow .next-step-item-first {
    margin-left: 0; }
    .next-step-arrow .next-step-item-first:before {
      border: 16px solid transparent; }
  .next-step-arrow .next-step-item-last {
    margin-right: 0; }
    .next-step-arrow .next-step-item-last:after {
      border: 16px solid transparent; }

.next-step-circle .next-step-item-container {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  padding: 0 8px; }
  .next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-text {
    color: #5584FF;
    font-size: 12px; }
  .next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-underlay {
    stroke: #A0A2AD;
    stroke-width: 4px; }
  .next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-overlay-normal {
    stroke: #5584FF;
    stroke-width: 4px; }
  .next-step-circle .next-step-item-container .next-step-item-node-placeholder {
    display: inline-block; }

.next-step-circle > .next-step-item-wait .next-step-item-tail-overlay {
  background: #C4C6CF; }

.next-step-circle > .next-step-item-wait .next-step-item-tail-underlay {
  background: #E6E7EB; }

.next-step-circle > .next-step-item-wait > .next-step-item-container .next-step-item-progress {
  width: 32px;
  height: 32px; }

.next-step-circle > .next-step-item-wait > .next-step-item-container .next-step-item-node {
  color: #666666; }

.next-step-circle > .next-step-item-wait > .next-step-item-container .next-step-item-node-circle {
  background: #FFFFFF;
  border-color: #A0A2AD; }

.next-step-circle > .next-step-item-wait > .next-step-item-container .next-step-item-node-dot {
  background: #FFFFFF;
  border-color: #A0A2AD; }

.next-step-circle > .next-step-item-wait .next-step-item-title {
  color: #666666;
  word-break: break-word; }

.next-step-circle > .next-step-item-wait .next-step-item-content {
  color: #666666;
  font-size: 12px;
  word-break: break-word; }

.next-step-circle > .next-step-item-wait .next-step-item-node-placeholder {
  width: 32px;
  height: 32px;
  position: relative; }

.next-step-circle > .next-step-item-wait .next-step-item-node {
  position: relative;
  display: inline-block;
  text-align: center;
  cursor: pointer; }
  .next-step-circle > .next-step-item-wait .next-step-item-node-circle {
    display: block;
    width: 32px;
    height: 32px;
    font-size: 12px;
    font-weight: normal;
    line-height: 30px;
    text-align: center;
    border: 1px solid;
    border-radius: 50%;
    -webkit-transition: background-color .2s ease, border-color .2s ease;
    transition: background-color .2s ease, border-color .2s ease; }
    .next-step-circle > .next-step-item-wait .next-step-item-node-circle .next-icon {
      -webkit-animation: zoomIn .2s linear;
              animation: zoomIn .2s linear; }
      .next-step-circle > .next-step-item-wait .next-step-item-node-circle .next-icon:before {
        width: 12px;
        font-size: 12px;
        line-height: inherit; }

.next-step-circle > .next-step-item-wait .next-step-item-node-dot {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 1px solid;
  border-radius: 50%;
  -webkit-transition: background-color .3s ease, border-color .3s ease;
  transition: background-color .3s ease, border-color .3s ease; }

.next-step-circle > .next-step-item-process .next-step-item-tail-overlay {
  background: #C4C6CF; }

.next-step-circle > .next-step-item-process .next-step-item-tail-underlay {
  background: #E6E7EB; }

.next-step-circle > .next-step-item-process > .next-step-item-container .next-step-item-progress {
  width: 32px;
  height: 32px; }

.next-step-circle > .next-step-item-process > .next-step-item-container .next-step-item-node {
  color: #FFFFFF; }

.next-step-circle > .next-step-item-process > .next-step-item-container .next-step-item-node-circle {
  background: #5584FF;
  border-color: #5584FF; }

.next-step-circle > .next-step-item-process > .next-step-item-container .next-step-item-node-dot {
  background: #5584FF;
  border-color: #5584FF; }

.next-step-circle > .next-step-item-process .next-step-item-title {
  color: #333333;
  word-break: break-word; }

.next-step-circle > .next-step-item-process .next-step-item-content {
  color: #333333;
  font-size: 12px;
  word-break: break-word; }

.next-step-circle > .next-step-item-process .next-step-item-node-placeholder {
  width: 32px;
  height: 32px;
  position: relative; }

.next-step-circle > .next-step-item-process .next-step-item-node {
  position: relative;
  display: inline-block;
  text-align: center;
  cursor: pointer; }
  .next-step-circle > .next-step-item-process .next-step-item-node-circle {
    display: block;
    width: 32px;
    height: 32px;
    font-size: 12px;
    font-weight: normal;
    line-height: 30px;
    text-align: center;
    border: 1px solid;
    border-radius: 50%;
    -webkit-transition: background-color .2s ease, border-color .2s ease;
    transition: background-color .2s ease, border-color .2s ease; }
    .next-step-circle > .next-step-item-process .next-step-item-node-circle .next-icon {
      -webkit-animation: zoomIn .2s linear;
              animation: zoomIn .2s linear; }
      .next-step-circle > .next-step-item-process .next-step-item-node-circle .next-icon:before {
        width: 12px;
        font-size: 12px;
        line-height: inherit; }

.next-step-circle > .next-step-item-process .next-step-item-node-dot {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 1px solid;
  border-radius: 50%;
  -webkit-transition: background-color .3s ease, border-color .3s ease;
  transition: background-color .3s ease, border-color .3s ease; }

.next-step-circle > .next-step-item-finish .next-step-item-tail-overlay {
  background: #5584FF; }

.next-step-circle > .next-step-item-finish .next-step-item-tail-underlay {
  background: #E6E7EB; }

.next-step-circle > .next-step-item-finish > .next-step-item-container .next-step-item-progress {
  width: 32px;
  height: 32px; }

.next-step-circle > .next-step-item-finish > .next-step-item-container .next-step-item-node {
  color: #5584FF; }

.next-step-circle > .next-step-item-finish > .next-step-item-container .next-step-item-node-circle {
  background: #FFFFFF;
  border-color: #5584FF; }

.next-step-circle > .next-step-item-finish > .next-step-item-container .next-step-item-node-dot {
  background: #FFFFFF;
  border-color: #5584FF; }

.next-step-circle > .next-step-item-finish .next-step-item-title {
  color: #666666;
  word-break: break-word; }

.next-step-circle > .next-step-item-finish .next-step-item-content {
  color: #666666;
  font-size: 12px;
  word-break: break-word; }

.next-step-circle > .next-step-item-finish .next-step-item-node-placeholder {
  width: 32px;
  height: 32px;
  position: relative; }

.next-step-circle > .next-step-item-finish .next-step-item-node {
  position: relative;
  display: inline-block;
  text-align: center;
  cursor: pointer; }
  .next-step-circle > .next-step-item-finish .next-step-item-node-circle {
    display: block;
    width: 32px;
    height: 32px;
    font-size: 12px;
    font-weight: normal;
    line-height: 30px;
    text-align: center;
    border: 1px solid;
    border-radius: 50%;
    -webkit-transition: background-color .2s ease, border-color .2s ease;
    transition: background-color .2s ease, border-color .2s ease; }
    .next-step-circle > .next-step-item-finish .next-step-item-node-circle .next-icon {
      -webkit-animation: zoomIn .2s linear;
              animation: zoomIn .2s linear; }
      .next-step-circle > .next-step-item-finish .next-step-item-node-circle .next-icon:before {
        width: 12px;
        font-size: 12px;
        line-height: inherit; }

.next-step-circle > .next-step-item-finish .next-step-item-node-dot {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 1px solid;
  border-radius: 50%;
  -webkit-transition: background-color .3s ease, border-color .3s ease;
  transition: background-color .3s ease, border-color .3s ease; }

.next-step-circle .next-step-item-disabled .next-step-item-tail-overlay {
  background: #E6E7EB; }

.next-step-circle .next-step-item-disabled .next-step-item-tail-underlay {
  background: #E6E7EB; }

.next-step-circle .next-step-item-disabled > .next-step-item-container .next-step-item-progress {
  width: 32px;
  height: 32px; }

.next-step-circle .next-step-item-disabled > .next-step-item-container .next-step-item-node {
  color: #CCCCCC; }

.next-step-circle .next-step-item-disabled > .next-step-item-container .next-step-item-node-circle {
  background: #FFFFFF;
  border-color: #E6E7EB; }

.next-step-circle .next-step-item-disabled > .next-step-item-container .next-step-item-node-dot {
  background: #FFFFFF;
  border-color: #E6E7EB; }

.next-step-circle .next-step-item-disabled .next-step-item-title {
  color: #CCCCCC;
  word-break: break-word; }

.next-step-circle .next-step-item-disabled .next-step-item-content {
  color: #CCCCCC;
  font-size: 12px;
  word-break: break-word; }

.next-step-circle .next-step-item-disabled .next-step-item-node-placeholder {
  width: 32px;
  height: 32px;
  position: relative; }

.next-step-circle .next-step-item-disabled .next-step-item-node {
  position: relative;
  display: inline-block;
  text-align: center;
  cursor: pointer; }
  .next-step-circle .next-step-item-disabled .next-step-item-node-circle {
    display: block;
    width: 32px;
    height: 32px;
    font-size: 12px;
    font-weight: normal;
    line-height: 30px;
    text-align: center;
    border: 1px solid;
    border-radius: 50%;
    -webkit-transition: background-color .2s ease, border-color .2s ease;
    transition: background-color .2s ease, border-color .2s ease; }
    .next-step-circle .next-step-item-disabled .next-step-item-node-circle .next-icon {
      -webkit-animation: zoomIn .2s linear;
              animation: zoomIn .2s linear; }
      .next-step-circle .next-step-item-disabled .next-step-item-node-circle .next-icon:before {
        width: 12px;
        font-size: 12px;
        line-height: inherit; }

.next-step-circle .next-step-item-disabled .next-step-item-node-dot {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 1px solid;
  border-radius: 50%;
  -webkit-transition: background-color .3s ease, border-color .3s ease;
  transition: background-color .3s ease, border-color .3s ease; }

.next-step-circle .next-step-item-disabled .next-step-item-node-placeholder,
.next-step-circle .next-step-item-disabled .next-step-item-node {
  cursor: not-allowed; }

.next-step-circle .next-step-item-read-only .next-step-item-node-placeholder,
.next-step-circle .next-step-item-read-only .next-step-item-node {
  cursor: default; }

.next-step-circle .next-step-item-last .next-step-item-tail {
  display: none; }

.next-step-circle.next-step-horizontal {
  text-align: center;
  white-space: nowrap; }
  .next-step-circle.next-step-horizontal > .next-step-item .next-step-item-title {
    white-space: normal; }
  .next-step-circle.next-step-horizontal > .next-step-item .next-step-item-content {
    white-space: normal; }
  .next-step-circle.next-step-horizontal > .next-step-item-wait .next-step-item-tail {
    display: inline-block;
    clear: both;
    width: calc(100% - 48px);
    vertical-align: middle; }
    .next-step-circle.next-step-horizontal > .next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay {
      display: block;
      height: 1px;
      position: relative; }
    .next-step-circle.next-step-horizontal > .next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay {
      position: absolute;
      top: 0;
      height: 1px;
      -webkit-transition: all .4s ease;
      transition: all .4s ease;
      width: 100%; }
  .next-step-circle.next-step-horizontal > .next-step-item-wait > .next-step-item-node {
    padding: 0 8px;
    width: 48px;
    height: 32px; }
  .next-step-circle.next-step-horizontal >