﻿* {
  margin: 0;
  padding: 0;
}

ul, ol, li {
  list-style: none;
}


/* 节点之间的连接线 */
.process-wrapper li:before,
.process-wrapper li:after,
.process-wrapper ul:before,
.process-wrapper div.node-img-box:before,
.process-wrapper div.node-img-box:after {
  border-style: solid;
  /* 激活状态 */
  border-color: #e60012;
  /* 灰色状态 */
  /* border-color: #bcbcbc; */
  width: 5em;
  border-width: 6px 0 0;
}

.process-wrapper li.gray:before,
.process-wrapper li.after-gray:after,
.process-wrapper ul.gray:before,
.process-wrapper div.node-img-box.gray:before,
.process-wrapper div.node-img-box.after-gray:after {
  /* 灰色状态 */
  border-color: #bcbcbc;
}

/************************************************************/

/* 图表的定位 */
.process-wrapper,
.process-wrapper ol,
.process-wrapper ul,
.process-wrapper li {
  /* display: block; */
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
}

.process-wrapper li {
  position: relative;
}

.process-wrapper,
.item-ol {
  width: 100%;
}

.process-box,
.item-ol>li {
  display: table-cell;
}

.process-box,
.node-item > li,
.item-ol > li {
  padding: 6px 0
}

/* 在所有ul前面和后面的线 */
.node-item {
  position: relative;
  /* padding: 0 5em; */
  padding-left: 5em;
}

.node-item:before,
.node-item:after {
  display: block;
  position: absolute;
  content: "";
  top: calc(50% - 35px);
}

.node-item:before {
  left: 0;
}
.node-item:after {
  right: 0;
}

/* 放置连接垂直线 */
.node-item > li:before,
.node-item > li:after {
  position: absolute;
  display: block;
  content: "";
  top: calc(0em - 40px);
  bottom: 0;
  height: 100%;
}

.node-item>li:before {
  left: 0;
  border-width: 0 0 0 6px;
}
.node-item>li:after {
  right: 0;
  border-width: 0 6px 0 0;
}

/* ul中第一个和最后一个li项目的线的正确长度和位置 */
.node-item > li:first-child:before,
.node-item > li:first-child:after {
  height: calc(50% - 30px);
  top: 46%;
  bottom: auto;
}

.node-item>li:last-child:before,
.node-item>li:last-child:after {
  height: calc(50% - 15px);
  top: calc(0em - 40px);
  bottom: auto;
  z-index: 10;
}

/* 放置左右短划线 */
.node-img-box {
  position: relative;
  margin: 0 5em;
  padding: 1em;
  border-width: 6px;
}

.node-img-box:before,
.node-img-box:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5em;
  height: calc(50% - 5px);
  border-width: 6px 0 0;
}

.node-img-box:after {
  right: calc(0em - 5em);
  /* margin-right: 0; */
}

.node-img-box:before {
  left: calc(0em - 5em);
  /* margin-left: 0; */
}

.node-item li:last-child > .node-img-box:after,
.node-item li:last-child > .node-img-box:before {
  top: 0px;
  border-width: 0 0 6px;
}

/* .process-box .node-item li.no-before:last-child :last-child > .node-img-box:after{
  width: 3.5em;
  right: calc(0-3.5em);
} */
.process-box .node-item li.no-before:not(:first-of-type):last-child .item-ol > li > div.node-img-box::after {
  width: 4.5em;
  right: calc(0em - 4.5em);
}
.process-box .node-item li.no-after:not(:first-of-type):last-child .item-ol > li > div.node-img-box::before {
  width: 3.5em;
  left: calc(0em - 3.5em);
}

.process-box .node-item li.no-after:not(:last-of-type):first-child .item-ol > li > div.node-img-box::before {
  width: 3.5em;
  left: calc(0em - 3.5em);
}

.process-box .node-item li.no-before:not(:last-of-type):first-child .item-ol > li > div.node-img-box::after {
  width: 3.5em;
  right: calc(0em - 3.5em);
}

.node-one-line::after {
  width: 5em !important;
  right: calc(0em - 5em) !important;
}

.alone-one-line:after{
  height: calc(50% - 10px) !important;
  top: 37% !important;
}

/* 删除起始节点（RSC）和结束节点（DLV）的前后线条，保留边距和填充 */
ul.RCS-node:before,
ul.RCS-node .node-img-box:before,
ul.DLV-node:after,
ul.DLV-node .node-img-box:after {
  border: 0;
}

.no-after:after,
.no-before:before {
  border-width: 0 !important;
}

.no-padding-left {
  padding-left: 0 !important;
}
/* 甩出单独节点（isAlone: true） */
.lare-class {
  position: absolute !important;
}

.last-has-border:after {
  height: 100% !important;
}

/* 节点 */
.node-wrapper {
  position: relative;
}

.node-wrapper .airpot-name {
  width: 100%;
  font-size: 14px;
  height: 35px;
  display: inline-block;
  vertical-align: middle;
  padding: 0px 15px;
}

.process-wrapper .node-img-box {
  width: 73px;
  height: 68px;
  padding: 0;
}

div.node-img-box img {
  width: 100%;
  height: auto;
}

.node-wrapper .node-info {
  width: 100%;
}

.node-wrapper .node-info p {
  height: 24px;
  margin: 0;
  line-height: 24px;
  font-size: 14px;
}

.node-wrapper .bold {
  font-weight: bold;
  color: #333;
}

.node-wrapper .airpot-info {
  position: absolute;
  font-size: 14px;
  line-height: 24px;
  overflow: hidden;
  width: 100%;
  top: 40px;
  left: 50%;
}

/* 结束节点箭头 */
.dlv-wrapper .end-img {
  position: absolute;
  left: 65%;
  top: 64px;
}

/* 连线圆角设置 */
.border-lt {
  position: absolute;
  left: 0;
  top: 70px;
  z-index: 9;
}

.border-lb {
  position: absolute;
  left: 0;
  bottom: 135px;
  z-index: 9;
}

.border-tr {
  position: absolute;
  right: 0;
  top: 70px;
  z-index: 9;
}

.border-br {
  position: absolute;
  right: 0;
  bottom: 135px;
  z-index: 9;
}

/* 激活状态线条 */
/* .active-before:before,
.active-after:after {
  border-color: #ed0022 !important;
} */

.RCS-node {
  padding-left: 0px;
}

.aline-grey:before{
  /* 灰色状态 */
  border-color: #bcbcbc !important;
}

/* @media screen and (max-width: 1199px) {
  .border-lt{
    top: 58px;
  }

  .border-tr {
    top: 58px;
  }
} */
