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

.path-box {
  width: 100%;
  height: 100%;
  background: #e2f6f3; }
  .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(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)); }
      .path-box .carousel .carousel-control.carousel-control-next {
        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)); }
  .path-box .round-box {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
    --nodeW: 50px;
    --color: #5ed0bd;
    --color: #70ad47; }
    .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: 1rem;
        font-weight: 600;
        padding: 5px 0;
        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: 5px 10px; }
        .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;
          border-radius: 20px; }
          .path-box .round-box .sfb-box .sbf-body .sf-box .sf-name {
            padding: 5px 10px;
            background: var(--color);
            width: 40%;
            max-width: 250px;
            text-align: center;
            color: #eee;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-radius: 20px; }
          .path-box .round-box .sfb-box .sbf-body .sf-box .fn-box {
            width: 60%;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 0 20px 20px 0; }
            .path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .node {
              position: relative;
              width: 20px;
              height: 20px;
              border-radius: 50%;
              border: 2px solid var(--color);
              background: var(--color);
              --line: 20px;
              margin: 0 calc(var(--line)/2); }
              .path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .node:before {
                content: "";
                position: absolute;
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
                border-left: 10px solid var(--color);
                left: -10px;
                top: 4px; }
              .path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .node:after {
                content: "";
                position: absolute;
                height: 5px;
                width: calc(var(--line) - 5px);
                left: 100%;
                background: var(--color);
                top: 6px; }
              .path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .node:first-child:before {
                border: none; }
              .path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .node:last-child:after {
                background: transparent; }
              .path-box .round-box .sfb-box .sbf-body .sf-box .fn-box .node:last-child:not(.end) {
                background: transparent; }
      .path-box .round-box .sfb-box.left {
        margin-right: var(--margin); }
        .path-box .round-box .sfb-box.left:before {
          right: calc(50% + var(--nodeW)/2); }
      .path-box .round-box .sfb-box.right {
        margin-left: var(--margin); }
        .path-box .round-box .sfb-box.right:before {
          left: calc(50% + var(--nodeW)/2); }
    .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: #00817e; }
      .path-box .round-box.start .sfb-box .sbf-body .sf-box {
        background: #5ed0bd; }
    .path-box .round-box.end {
      --color: #4472c4; }
      .path-box .round-box.end .sfb-box .sbf-body .sf-box {
        background: #bdcde9; }