We_Relese/App/Relese/Content/Css/path2.css

.path-box {
  width: 100%;
  height: 100%;
  --color: #0094ff;
  --fs: 16px;
  --pt: 5px;
  --minW: 80px; }
  .path-box .carousel {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    .path-box .carousel .carousel-inner {
      width: 89%;
      height: auto; }
    .path-box .carousel .carousel-control {
      width: 4.5%; }
      .path-box .carousel .carousel-control.carousel-control-prev {
        background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.2)); }
      .path-box .carousel .carousel-control.carousel-control-next {
        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.01)); }
  .path-box .round-box {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
    --nodeW: 50px; }
    .path-box .round-box .line-v {
      height: calc(100% - 15px - var(--nodeW));
      width: 10px;
      background-color: var(--color);
      position: absolute;
      top: var(--nodeW);
      left: calc(50% - 4px);
      z-index: 0; }
      .path-box .round-box .line-v:before {
        content: "";
        position: absolute;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 20px solid var(--color);
        left: -5px;
        bottom: -15px; }
    .path-box .round-box .round-node {
      position: relative;
      width: var(--nodeW);
      height: var(--nodeW);
      border-radius: 50%;
      color: #fff;
      border: 1px solid var(--color);
      background: var(--color);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1; }
      .path-box .round-box .round-node.start-node {
        width: auto;
        height: calc(var(--nodeW) - 10px);
        white-space: nowrap;
        padding: 5px 20px;
        border-radius: 4px; }
        .path-box .round-box .round-node.start-node:before {
          border: none; }
    .path-box .round-box .sfb-box {
      width: 42%;
      min-height: 100px;
      border: 2px solid var(--color);
      border-radius: 5px;
      padding: 0;
      margin-top: 10px;
      --w: calc(4%);
      --sw: 170px;
      --margin: calc(var(--w)); }
      .path-box .round-box .sfb-box:before {
        content: "";
        position: absolute;
        background: var(--color);
        width: var(--w);
        height: 10px;
        top: calc(var(--nodeW)/2 - 5px); }
      .path-box .round-box .sfb-box .sfb-title {
        width: 100%;
        text-align: center;
        font-size: calc(var(--fs) * 1.2);
        padding: var(--pt) 0;
        font-weight: 600;
        border-bottom: 1px solid var(--color);
        color: #fff;
        background: var(--color);
        border-bottom: 1px solid var(--color); }
      .path-box .round-box .sfb-box .sbf-body {
        padding: var(--pt) 5px;
        font-size: var(--fs); }
        .path-box .round-box .sfb-box .sbf-body .sf-box {
          width: 100%;
          border: 1px solid var(--color);
          border-radius: 3px;
          margin: 5px 0;
          display: flex; }
          .path-box .round-box .sfb-box .sbf-body .sf-box .sf-name {
            width: auto;
            max-width: var(--minW);
            padding: 3px 5px;
            background: var(--color);
            color: #eee;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            /*   flex-wrap: wrap;
                        display: flex;
                        justify-content: center;
                        align-items: center;*/ }
          .path-box .round-box .sfb-box .sbf-body .sf-box .fn-box {
            width: calc(100% - var(--minW));
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap; }
            .path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .node {
              --line: 12px;
              position: relative;
              width: var(--line);
              height: var(--line);
              border-radius: 50%;
              border: 2px solid var(--color);
              margin: 0 1px; }
              .path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .node.end {
                background: var(--color); }
            .path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .arrow {
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative;
              width: 10px;
              height: 4px;
              background: var(--color);
              margin-right: 3px; }
              .path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .arrow:before {
                content: "";
                position: absolute;
                border-top: 4px solid transparent;
                border-bottom: 4px solid transparent;
                border-left: 7px solid var(--color);
                right: -3px; }
      .path-box .round-box .sfb-box.left {
        margin-right: calc(var(--margin) - 5px); }
        .path-box .round-box .sfb-box.left:before {
          right: calc(50% + var(--nodeW)/2 - 2px); }
      .path-box .round-box .sfb-box.right {
        margin-left: calc(var(--margin) - 5px); }
        .path-box .round-box .sfb-box.right:before {
          left: calc(50% + var(--nodeW)/2 - 2px); }
    .path-box .round-box:first-child {
      padding-bottom: 40px; }
      .path-box .round-box:first-child .line-v {
        height: calc(100% - 15px - var(--nodeW) + 10px);
        top: calc(var(--nodeW) - 10px); }
    .path-box .round-box.start {
      --color: #049e9a; }
    .path-box .round-box.end {
      --color: #FF3366; }