.road-title {
  margin-bottom: 16px;
  font-weight: bold;
  font-size: 16px;
  color: var(--stat-item-value-color);
}
.dark {
  --stat-item-label-color: #fff;
  --stat-item-value-color: #59ffe2;
}
.road-modal .vtx-modal-tabs {
  min-height: unset !important;
}
.road-base-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 10px;
  --stat-item-label-color: #000;
  --stat-item-value-color: #000;
  --content-bg-color: #f1f1f1;
  --content-module-color: #fff;
  background: var(--content-bg-color);
}
.road-base-content .road-base-search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  height: 52px;
  padding-right: 16px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}
.road-base-content .road-base-data {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: 10px;
}
.road-base-content .road-base-info {
  height: 280px;
  padding: 16px;
  overflow: hidden;
  background: var(--content-module-color);
}
.road-base-content .road-base-info .info-collection {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.road-base-content .road-base-info .info-collection .info-line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  margin-bottom: 12px;
  width: 50%;
}
.road-base-content .road-base-info .info-collection .info-line .label {
  color: var(--label-color);
  white-space: nowrap;
}
.road-base-content .road-base-info .info-collection .info-line .value {
  color: var(--info-color);
  font-weight: 400;
}
.road-base-content .work-rule {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 32px;
  margin-bottom: 8px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 8px 32px;
}
.road-base-content .work-rule:nth-child(even) {
  background-color: #FAFAFA;
  border: 1px solid rgba(4, 0, 0, 0.08);
}
.road-base-content .work-rule-name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.road-base-content .work-rule-name .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4EE2D6;
}
.road-base-content .work-rule-time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.road-base-content .work-rule-num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.road-statistics-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 10px;
  --content-bg-color: #f1f1f1;
  --content-module-color: #fff;
  background: var(--content-bg-color);
}
.road-statistics-content .road-statistics-search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 52px;
  padding-left: 16px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}
.road-statistics-content .road-statistics-data {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.road-statistics-content .road-statistics-info {
  padding: 16px;
  color: var(--stat-item-label-color);
  background: var(--content-module-color);
}
.road-statistics-content .road-statistics-info:nth-child(1),
.road-statistics-content .road-statistics-info:nth-child(2) {
  height: 220px;
}
.road-statistics-content .road-statistics-info:nth-child(3),
.road-statistics-content .road-statistics-info:nth-child(4) {
  height: 340px;
}
.road-statistics-content .statistics-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.road-statistics-content .statistics-row .statistics-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
}
.road-statistics-content .statistics-row .statistics-item span {
  color: #222;
  font-size: 20px;
}
.road-statistics-content .progress {
  position: relative;
  height: 4px;
  background: #DBDBDB;
  border-radius: 4px;
  margin-top: 16px;
}
.road-statistics-content .progress .active_progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
  background: -webkit-gradient(linear, right top, left top, from(#62C1FD), to(#3E9DF9));
  background: linear-gradient(270deg, #62C1FD 0%, #3E9DF9 100%);
}
.road-statistics-content .statistics-work-summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  color: var(--stat-item-label-color);
}
.road-statistics-content .statistics-work-summary > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  width: 50%;
  margin-bottom: 16px;
}