// body,
// html {
//   background: transparent;
// }

.dataMeter {
  width: 100vw;
  margin: 0 auto;
  min-height: 100%;
  background: url('@/Project/assets/newBackground.jpg') no-repeat center;
  background-size: 100% 100%;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei'; //'Microsoft YaHei';
  color: #fff;
  user-select: none;
}

.gridBox {
  width: 100%;
  position: relative;
  height: 100%;
}

.noScroll {
  height: 100vh;
  overflow: hidden;
}

.btnToUnity {
  position: absolute;
  top: 27px;
  left: 16px;
  font-size: 20px;
  z-index: 999;
}

.item {
  // background: url('@/Project/assets/dataMeter/conLeft.png') no-repeat 100% 100%;
  background-size: 100% 100%;
  position: relative;

  .controlBox {
    position: absolute;
    top: 0.1rem;
    right: 0.3rem;
    display: flex;
  }

  .edit {
    width: 0.16rem;
    height: 0.16rem;
    // font-size: 0.2rem;
    background: url('@/Project/assets/dataMeter/icon-edit.png') no-repeat center;
    background-size: 100% 100%;
    cursor: pointer;
    margin-right: 0.1rem;
    cursor: pointer;
  }

  .close {
    width: 0.16rem;
    height: 0.16rem;
    // font-size: 0.2rem;
    background: url('@/Project/assets/dataMeter/icon-close.png') no-repeat center;
    background-size: 100% 100%;
    cursor: pointer;
    margin-right: 0.1rem;
    cursor: pointer;
  }
}

.addMask {
  width: 3rem;
  height: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  top: 160px;
  left: 50%;
  transform: translateX(-50%);
  position: fixed;
  background: #000;
  z-index: 10001;
  font-size: 0.16rem;

  &.active {
    color: #000;
    font-weight: bold;
  }
}

.mapContent {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid #2866B2;

  .mapControl {
    top: 10px;
    right: 10px;
    position: absolute;
    z-index: 100;
    display: flex;
    align-items: center;
  }

  .uploadModal {
    :global {
      .ant-tabs-tabpane-active {
        min-height: 400px;
      }
    }
  }

  .carousel {
    width: 100%;

    // height: 400px;
    .carouselItem {
      width: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      background-color: #000;
    }

    img {
      // width: 100%;
      max-width: 100%;
      display: block;
      margin: 0 auto;
    }
  }

  .selectList {
    display: flex;
    color: #fff;
    margin-bottom: 0;
    margin-right: 0.1rem;

    li {
      padding: 0.04rem 0;
      margin-right: 0.26rem;
      cursor: pointer;
      border-bottom: 1px solid transparent;
      font-size: 0.12rem;

      &.active {
        border-bottom: 1px solid #fff;
      }
    }
  }

  .iconUpload {
    background: url('@/Project/assets/dataMeter/icon-upload.png') no-repeat center;
    background-size: 100% 100%;
    cursor: pointer;
    width: 0.16rem;
    height: 0.16rem;
  }
}

.modelTitleTabs {
  display: flex;
  flex-direction: column;
}

.contentBg {
  // background: rgba(0, 0, 0, 0.6);
}

.modelBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  line-height: 1;
  font-size: 0.14rem;
  // background: url('@/Project/assets/chartBox/bg.png') no-repeat center;
  // background-size: 100% 100%;
  // border: #2866B2 solid 1px;
  background: linear-gradient(rgba(29, 56, 104, 0.72), rgba(4, 18, 51, 0.76));
  border: 1px solid;
  border-image: linear-gradient(45deg, rgba(74, 196, 253, 0.45), rgba(173, 219, 240, 0.34), rgba(146, 213, 249, 0.28)) 1;
  // box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.16);
  opacity: 1;

  .tabBox {
    width: 100%;
    padding: 0.16rem;
    padding-bottom: 0;
  }

  :global {
    ::-webkit-scrollbar {
      background: transparent;
    }

    .ant-spin-nested-loading {
      height: auto;
    }

    .ant-radio-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      border-left: none;
      width: 100%;
      background: #121921;

      .ant-radio-button-wrapper {
        border: none !important;
        background: transparent;
        font-size: 0.14rem;
        height: 0.32rem;
        color: rgba(255, 255, 255, 0.6);

        &::before {
          display: none;
        }

        &.ant-radio-button-wrapper-checked {
          background: #055dff;
          box-shadow: none;
          color: #fff;
        }

        &:first-child,
        &:last-child {
          border-radius: 0;
        }
      }
    }

    .ant-progress-inner {
      // background: #7A96BF;
    }

    .ant-progress-success-bg,
    .ant-progress-bg {
      background: #284d86;
    }

    .ant-empty {
      margin-top: 40px;
    }

    .oc-fm--file-manager {
      width: 100%;
    }

    .oc-fm--file-navigator__toolbar {
      display: none !important;
    }

    .oc-fm--file-navigator {
      background: transparent;
    }

    .oc-fm--list-view__table {
      color: #fff;
    }

    .oc-fm--name-cell__icon,
    .oc-fm--no-files-found-stub {
      background: transparent;
    }

    .oc-fm--list-view__row:hover:not(.oc-fm--list-view__row--selected):not(.oc-fm--list-view__row--loading) {
      // background: rgba(255, 255, 255, 0.3);
      background: transparent;
    }

    .oc-fm--location-bar__item {
      color: rgba(255, 255, 255, 0.6);
    }

    .oc-fm--location-bar__item:hover {
      color: #fff;
      // background: rgba(255, 255, 255, 0.3);
      background: transparent;
    }

    .oc-fm--no-files-found-stub__icon {
      fill: rgba(255, 255, 255, 0.72);
    }

    .oc-fm--list-view__row--selected {
      background: #448bf1;
    }
  }

  // 项目详情
  .projectInfoContent {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    padding-top: 0.1rem;

    .detailItem {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;

      span:first-child {
        color: #C0F0FF;
        font-size: 18px;
        margin-right: 10px;
        text-align: right;
        flex-shrink: 0;
        line-height: 20px;
      }

      .data {
        color: #D7E4E8;
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 1px;
      }
    }

    .detailRow {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 14px 0;
      width: 100%;
      margin: 0 35px;
      border-bottom: 1px solid rgba(153, 231, 255, 0.40);

      &:last-child {
        border-bottom: none;
      }

      p {
        margin-bottom: 0;
      }
    }
  }

  // 报警中心
  .alarmTable {
    width: 100%;
    table-layout: fixed;
    padding-left: 0.14rem;

    // background: linear-gradient(270deg, rgba(153, 231, 255, 0.8) 0%, #60A8FF 100%);
    tr {

      td,
      th {
        padding: 0.04rem 0.02rem;
        font-size: 0.14rem;
        font-weight: 400;
        color: #183266;
      }

      td {
        color: #D7E4E8;
        ;
        vertical-align: top;
        line-height: 1.5;
        font-weight: 400;
        font-size: 0.14rem;
      }
    }

    .alarmTitle {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  // 消息中心
  .messageList {
    padding: 0.16rem;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;

    li {
      margin-bottom: 0.06rem;
    }

    .messageTitle {
      font-size: 0.12rem;
      margin-bottom: 0.02rem;
      color: #13EDF5;
    }

    .messageContent {
      color: #D7E4E8;
      line-height: 1.5;
    }
  }

  // 计划管理类
  .tabsList {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    width: -webkit-fill-available;
    margin: 0.1rem 0.16rem 0 0.16rem;
    border-bottom: 0.25px solid rgba(216, 216, 216, 0.34);
    padding: inherit;
    padding: 0 0 0.06rem 0;

    li {
      color: #D7E4E8;
      font-weight: 300;
      margin-right: 0.1rem;
      cursor: pointer;
      margin-bottom: 2px;

      &.active {
        color: #D7E4E8;
        font-weight: 400;
      }
    }
  }

  .activeSelect {
    margin-left: 0.16rem;
    margin-top: 10px;
    width: 149px;
    height: 24px;
    background: url('@/Project/assets/dataMeter/ProjectList/search_bg.png') no-repeat center;
    background-size: 100% 100%;
    cursor: pointer;
  }

  .other {
    width: 100%;
    // height: 100%;
    table-layout: fixed;
    padding-left: 0.14rem;

    .messageTitle {
      font-size: 0.12rem;
      margin-bottom: 0.02rem;
      color: rgba(255, 255, 255, 0.6);
    }

    .messageContent {
      td {
        color: #fff;
        vertical-align: top;
        line-height: 1.5;
        font-size: 0.14rem;
        word-break: break-all;
        padding-right: 0.1rem;
      }
    }

    tr {
      th {
        color: #dd7777;
        padding: 0.04rem 0.02rem;
        font-size: 0.16rem;
      }
    }

    .alarmTitle {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .chartBox {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .planChart {
      flex: 1 1 auto;
      width: 100%;
      height: 100%;
    }

    :global {
      .ant-progress-text {
        color: #fff;
      }
    }
  }
}

.modelContent {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  width: 100%;
  padding-top: 10px;
}

// 项目列表
.projectList {
  position: absolute;
  min-width: 100px;
  top: 0.6rem;
  right: 0.35rem;
  background: #121921;
  margin: 0;
  padding: 0;

  li {
    padding: 5px 10px;
    cursor: pointer;

    &:hover,
    &:active,
    &:focus {
      background: #055dff;
    }
  }
}

// 地图
.mapBg {
  // background: url('@/Project/assets/dataMeter/map-bg.png') no-repeat center;
  background-size: 100% 100%;
  // background: #010522;
}

.mapWapper {
  height: 100%;
  position: relative;
  padding-top: 0.14rem;
}

.mapBox {
  height: 100%;
  position: relative;

  .mapIcon {
    position: absolute;
    width: 0.12rem;
    height: 0.12rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    &.icon1 {
      top: 0;
      left: 0;
      background-image: url('@/Project/assets/dataMeter/map-icon1.png');
    }

    &.icon2 {
      top: 0;
      right: 0;
      background-image: url('@/Project/assets/dataMeter/map-icon2.png');
    }

    &.icon3 {
      bottom: 0;
      left: 0;
      background-image: url('@/Project/assets/dataMeter/map-icon4.png');
    }

    &.icon4 {
      bottom: 0;
      right: 0;
      background-image: url('@/Project/assets/dataMeter/map-icon3.png');
    }
  }
}

.listItem {
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-right: 10px;

  .left {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    margin-right: 20px;
    width: 100%;
    min-width: 0;

    :global {
      .ant-avatar {
        flex-shrink: 0;
      }
    }
  }

  .right {
    flex-shrink: 0;
  }

  .listInfo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 10px;
  }
}

.videoList {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  li {
    position: relative;
    padding: 10px;
    width: 50%;
    height: 50%;

    .bg {
      background: #000;
      height: 100%;
    }

    video {
      width: 100%;
      height: 100%;
    }
  }

  .fullscreen {
    position: absolute;
    cursor: pointer;
    bottom: 20px;
    right: 20px;
    z-index: 100;
  }
}

.uploadList {
  :global {
    .ant-upload-list {
      height: 200px;
      overflow: auto;
    }
  }
}

// 模块列表
.drawer {
  width: 502px;
  padding: 43px 86px;
  // box-shadow: -2px 0 8px rgb(0, 0, 0, 0.15);
  position: fixed;
  top: 0;
  right: 0;
  // background: #0d1a2b;
  background: url('@/Project/assets/dataMeter/drawLeftBg.png') no-repeat center;
  background-size: 100% 100%;
  z-index: 10000;

  .header {
    position: relative;
    padding: 16px 24px;
    height: 45px;
    // border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: all-scroll;
    font-size: 22px;
    font-weight: 400;
    color: #183266;
    line-height: 24px;
    letter-spacing: 2px;
    background: linear-gradient(to right, rgba(153, 231, 255, 0.80), rgba(96, 168, 255, 1));

    .title {
      margin: 0;
      color: #fff;
      font-weight: 500;
      font-size: 0.2rem;
      line-height: 1;
      font-family: 'dataMeter';
    }

    .closeIcon {
      width: 26px;
      height: 26px;
      background: url('@/Project/assets/newUI/modalClose.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  .itemContent {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .titleTip {
    width: 304px;
    height: 36px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 14px;
    padding-right: 14px;
    background: linear-gradient(to right, rgba(153, 231, 255, 0.80), rgba(96, 168, 255, 1));

    .titleTipIcon {
      width: 26px;
      height: 18px;
      margin-right: 8px;
    }

    .iconIn {
      .titleTipIcon;
      background: url('@/Project/assets/newUI/icon_in.png');
      background-size: 100% 100%;
    }

    .iconOut {
      .titleTipIcon;
      background: url('@/Project/assets/newUI/icon_out.png');
      background-size: 100% 100%;
    }

    .titleTipText {
      font-size: 14px;
      font-weight: 400;
      color: #183266;
      line-height: 36px;
    }

    .titleTipLine {
      margin: 0 16px;
      width: 1px;
      height: 18px;
      background: #183266;
    }
  }

  .itemIconIn {
    width: 26px;
    height: 18px;
    background: url('@/Project/assets/newUI/icon1_in.png');
    background-size: 100% 100%;
  }

  .itemIconOut {
    width: 26px;
    height: 18px;
    background: url('@/Project/assets/newUI/icon1_out.png');
    background-size: 100% 100%;
  }

  .childIconIn {
    margin-top: 8px;
    width: 16px;
    height: 12px;
    float: right;
    background: url('@/Project/assets/newUI/icon1_in.png');
    background-size: 100% 100%;
  }

  .childIconOut {
    margin-top: 8px;
    width: 16px;
    height: 12px;
    float: right;
    background: url('@/Project/assets/newUI/icon1_out.png');
    background-size: 100% 100%;
  }

  .icon {
    width: 7px;
    height: 10px;
    background: url('@/Project/assets/dataMeter/arrowIcon.png') no-repeat center;
    background-size: 100% 100%;
    margin-right: 12px;
    transition: transform 0.2s;
  }

  .itemDiv {
    color: #C0F0FF;
    font-size: 16px;
    line-height: 32px;
    height: 32px;
    align-items: center;
    border-bottom: 1px solid #3a6481;
    // paddingLeft: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 1px;
  }

  .content {
    max-height: 80vh;
    padding: 26px 13px;
    font-size: 16px;
    word-wrap: break-word;
    overflow-y: auto;
    background: url('@/Project/assets/dataMeter/contentBg.png') no-repeat center;
    background-size: 100% 100%;

    .title {
      font-size: 22px;
      font-weight: 400;
      color: #C0F0FF;
      line-height: 24px;
      letter-spacing: 2px;
    }

    :global {
      .ant-list-bordered {
        border: none;
      }

      .ant-list-bordered .ant-list-item {
        background: url('~@/Project/assets/dataMeter/itemBg.png') no-repeat center;
        background-size: 100% 100%;
        margin-bottom: 14px;
        border-bottom: 1px solid #6597BA;
      }

      .ant-collapse-borderless>.ant-collapse-item>.ant-collapse-content>.ant-collapse-content-box {
        padding-left: 26px;
      }

      .ant-collapse {
        border: none;

        >.ant-collapse-item>.ant-collapse-header {
          color: #183266;
          background: #C0F0FF;
          height: auto;
          font-size: 18px;
          font-weight: 500;
          line-height: 22px;
        }

      }
    }
  }
}

//模板列表
.mouldList {
  width: 598px;
  position: fixed;
  top: 0;
  right: 50px;
  background: linear-gradient(to right, rgba(9, 20, 64, 0.85), rgba(48, 85, 148, 0.77));
  z-index: 999;
  height: 1000px;

  .header {
    position: relative;
    padding: 10px 20px 10px 18px;
    height: 45px;
    width: 100%;
    background: url('@/Project/assets/newUI/theadBg.png') no-repeat center;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

    .title {
      margin: 0;
      font-size: 22px;
      font-weight: 400;
      color: #183266;
      line-height: 24px;
      letter-spacing: 2px;
    }

    .closeIcon {
      width: 26px;
      height: 26px;
      background: url('@/Project/assets/newUI/modalClose.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
    }
  }

  .content {
    padding: 20px;
    min-height: 470px;
    max-height: 950px;
    word-wrap: break-word;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  .item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0 20px 0;

    .img {
      background-size: auto;
      background-position: center;
      background-repeat: no-repeat;
      width: 558px;
      height: 286px;
      // border: 1px solid #ada1a1;
      cursor: pointer;
    }

    .name {
      font-size: 22px;
      font-weight: 400;
      color: #C0F0FF;
      line-height: 24px;
      letter-spacing: 2px;
      width: 100%;
    }

    .btnGroup {
      display: flex;
      width: 100%;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      border-top: 2px solid #99E7FF;
      margin-top: 40px;

      :global {
        .ant-btn {
          height: 46px;
          width: 96px;
          font-size: 22px;
          border-radius: 4px;
          line-height: 1;
          font-weight: 400;
          color: #D7E4E8;
          line-height: 24px;
          letter-spacing: 2px;
          margin-top: 20px;
        }
      }
    }
  }
}

// pfd模块
.pfdBox {
  height: 100%;
  width: 100%;
  // margin: 0 auto;
  position: relative;
  background-position: left center;
  background-size: cover;

  // img {
  //   height: 100%;
  // }
  .pfdFont {
    padding: 5px;
    position: absolute;
    white-space: nowrap;
    user-select: none;
    transform: translate(-50%, -50%);
  }
}

:global {
  .dataMeter {
    .react-grid-item>.react-resizable-handle.react-resizable-handle-se {
      width: 30px;
      height: 30px;
      z-index: 100;
      bottom: 5px;
      right: 5px;
    }

    .ant-tooltip-arrow::before {
      background-color: #fff;
    }

    .ant-tooltip-inner {
      background-color: #fff;
      color: #333;
    }

    .react-grid-item>.react-resizable-handle::after {
      right: 0 !important;
      bottom: 0 !important;
      width: 10px !important;
      height: 10px !important;
      border-right: 4px solid rgb(255 0 0) !important;
      border-bottom: 4px solid rgb(255 0 0) !important;
    }

    .ant-collapse>.ant-collapse-item>.ant-collapse-header {
      padding: 0;
      padding-left: 5px;

      .ant-collapse-arrow {
        left: -9px;
      }
    }

    .ant-collapse-content>.ant-collapse-content-box {
      padding: 0;
    }

    .ant-list,
    .ant-collapse>.ant-collapse-item>.ant-collapse-header {
      color: #fff;
      font-size: 0.18rem;
    }

    .ant-collapse-content {
      color: #fff;
      font-size: 0.16rem;
    }

    .ant-collapse>.ant-collapse-item>.ant-collapse-header .ant-collapse-arrow {
      font-size: 0.14rem;
      left: -0.1rem;
    }

    .ant-collapse-borderless {
      background: transparent;
    }

    .ant-collapse-borderless>.ant-collapse-item {
      border-bottom: none;
    }

    .dataMeter .ant-collapse>.ant-collapse-item>.ant-collapse-header {
      padding-left: 0.08rem;
    }

    .ant-collapse-borderless>.ant-collapse-item>.ant-collapse-content>.ant-collapse-content-box {
      padding-left: 10px;
    }

    .ant-select-selection {
      background-color: transparent;
      // border: 1px solid #fff;
      color: #fff;
    }

    .ant-select-arrow {
      color: #fff;
    }

    .ant-select-selection {
      height: 24px;
      font-size: 14px;
    }

    .ant-select-selection__rendered {
      line-height: 24px;
    }

    .ant-select-arrow {
      font-size: 14px;
      margin-top: -7px;
      right: 10px;
    }

    .ant-select-dropdown-menu .ant-select-dropdown-menu-item {
      font-size: 14px;
      line-height: 20px;
    }

    .ant-col-8 {
      margin-bottom: 18px;
    }

    .ant-checkbox+span {
      font-size: 18px;
      color: #D7E4E8;
    }
  }

}

//遮罩
.mask {
  width: 780px;
  height: 100vh;
  background: url('@/Project/assets/dataMeter/drawLeftBg.png') no-repeat center;
  background-size: 100% 100%;
  z-index: 998;
  position: fixed;
  top: 0;
  right: -80px;
}