@font-face {
  font-family: YSBTH;
  src: url('../fonts/YouSheBiaoTiHei.ttf') format("truetype");
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width : 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  border-radius: 12px;
  background   : #40FFD9;
}
::-webkit-scrollbar-track {
  border-radius: 12px;
  background   : #20827A;
}

//常用文字样式
.text-28 {
  font-size: 28px;
  line-height: 28px;
  color: #FFFFFF;
}
.text-emp-36 {
  font-size: 36px;
  line-height: 36px;
  font-family: YSBTH;
  color: #FFE359;
}
.text-emp-18 {
  font-size: 18px;
  line-height: 18px;
  font-family: YSBTH;
  color: #FFE359;
}

// 图片按钮 
.button-pic {
  cursor: pointer;
  &:hover {
    filter: brightness(1.1);
  }
}

// 默认定位面板样式
.panel-default {
  position: absolute;
  border: 1px solid #7FFFEA;
  background: rgba(0,58,64,0.8);
  box-sizing: border-box;
  padding: 35px 20px 35px 35px;
  display: flex;
  flex-direction: column;
  header {
    position: relative;
    margin-bottom: 30px;
    span {
      font-size: 42px;
      font-family: YSBTH;
      color: transparent;
      background: linear-gradient(0deg, #8CFFEC 0%, #FFFFFF 100%);
      -webkit-background-clip: text;
    }
    i {
      position: absolute;
      right: -20px;
      top: -20px;
      display: block;
      width: 40px;
      height: 40px;
      background: url('../../assets/imgs/deck/page_nygh/btn-close.png');
      background-size: contain;
      cursor: pointer;
    }
  }
  main {
    flex: 1;
    height: 0;
  }
}

// 驾驶舱子页面布局
.deck-pages {
  position: relative;
  z-index: 4;
  .c-left,.c-right {
    position: absolute;
    width: 810px;
    height: calc(100vh - 215px);
    top: 185px;
    bottom: 30px;
    border: 1px solid #7FFFEA;
    background: rgba(0,58,64,0.8);
    box-sizing: border-box;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .c-left {
    left: 240px;
  }
  .c-right {
    right: 30px;
  }
}

// 面板一级标题
.box-title1 {
  display: block;
  font-size: 42px;
  line-height: 42px;
  font-family: YSBTH;
  color: transparent;
  background: linear-gradient(0deg, #8CFFEC 0%, #FFFFFF 100%);
  -webkit-background-clip: text;
  margin-bottom: 45px;
}

// 面板二级标题
.box-title2 {
  display: flex;
  align-items: flex-end;
  width: 100%;
  margin-bottom: 20px;
  font-size: 32px;
  line-height: 20px;
  font-family: YSBTH;
  color: #FFFFFF;
  &::before {
    content: '';
    display: block;
    width: 11px;
    height: 20px;
    margin-right: 8px;
    background: linear-gradient(-90deg, rgba(178,202,235,0) 0%, rgba(39,162,186,0.6) 100%);
  }
  &::after {
    content: '';
    display: block;
    margin-left: 8px;
    flex: 1;
    height: 4px;
    background: url('../../assets/imgs/deck/title2-bg.png') no-repeat;
    background-size: 100% 100%;
  }
}

// 透明度滑动条
.opacity-slider {
  background-color: rgba($color: #000000, $alpha: 0.2);
  border-color: #50978b;
  border-radius: 5px;
  padding: 0 15px;
  .popper__arrow {
    display: none;
  }
}

// 默认表格
.table-default {
  background: transparent !important;
  border: none !important;
  &::before {
    display: none;
  }
  &::after {
    width: 0;
  }
  .el-table__header {
    height: 72px;
    tr {
      background: transparent !important;
      &:nth-child(2) {
        &>th>div {
          font-size: 24px;
        }
      }
    }
    th {
      border: none !important;
      background: rgba($color: #83C7BC, $alpha: 0.3) !important;
      &>div {
        padding-left: 20px !important;
        font-size: 28px;
        line-height: 28px;
        font-weight: bold;
        color: #FFFFFF;
        opacity: 0.6;
      }
      &:not(.is-leaf) {
        text-align: center;
        padding: 5px 0 0;
      }
    }
  }
  .el-table__body {
    -webkit-border-vertical-spacing: 19px;
    .el-table__row {
      height: 72px;
      background: rgba($color: #B5E8E0, $alpha: 0.1) !important;
      td {
        background: transparent !important;
        border: none !important;
        &>div {
          padding-left: 20px;
          display: flex;
          align-items: center;
          color: #fff;
          font-size: 28px;
          line-height: 28px;
        }
      }
      &.current-row {
        background: rgba(255,255,0,0.2) !important;
      }
    }
  }
  .color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 12px;
  }
  .td-emphasis {
    font-size: 36px;
    font-family: YSBTH;
    color: #FFE566;
  }
}

// 默认按钮
.button-default {
  display: inline-block;
  min-width: 130px;
  height: 34px;
  // background: rgba(0,90,101,0.4);
  // border: 1px solid #16b7c6;
  background: #00988B;
  border: 1px solid #00ab9d;
  border-radius: 1px;
  cursor: pointer;
  font-size: 22px;
  color: #FFFFFF;
  text-align: center;
  line-height: 32px;
  &:hover {
    filter: brightness(1.1);
    // color: #16b7c6;
  }
}

// 单选
.radio-default {
  .el-radio__input {
    display: none;
  }
  .el-radio.is-checked > .el-radio__label {
    color: #fff;
    box-shadow: 0 0 15px 0 inset #21967F;
  }
  .el-radio__label {
    display: block;
    min-width: 130px;
    height: 43px;
    padding: 0;
    background: rgba($color: #0C5451, $alpha: 0.5);
    border: 1px solid #21967F;
    border-radius: 4px;
    font-size: 20px;
    color: rgba($color: #fff, $alpha: 0.6);
    line-height: 43px;
    text-align: center;
  }
}

// 默认选择框样式
.select-default {
  .is-focus>.el-input__inner {
    border: 1px solid #17D2E3 !important;
  }
  .el-input__inner {
    height: 38px;
    background-color: transparent;
    border: 1px solid #15b5c4;
    border-radius: 0;
    background: rgba(0,90,101,0.4);
    font-size: 20px;
    color: #fff;
  }
  .el-input__icon {
    line-height: 38px;
  }
  .input-suffix-search {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 6px;
    vertical-align: middle;
    background: url('@/assets/imgs/deck/page_znfx/btn-search.png') no-repeat;
    background-size: contain;
    cursor: pointer;
  }
}
.select-default-popper {
  border: 1px solid #17D2E3;
  background: rgba(0,90,101,0.9);
  .el-select-dropdown__item {
    color: #fff;
    font-size: 20px;
    &.hover {
      background-color: rgba(0, 123, 139, 0.9);
    }
  }
}

.el-message {
  min-width: 20vw;
  height: 5vh;
  background-color: #13353b;
  border: 1px solid #00a2a2;
  top: 10vh !important;
  border-radius: 16px;
  .el-message__content {
    font-size: 30px;
    color: #fff;
  }
  .el-message__icon {
    font-size: 30px;
  }
  .el-message__closeBtn {
    font-size: 30px;
  }
}

// 面板关闭按钮
.box-close {
  display: block;
  position: absolute;
  right: 24px;
  top: 24px;
  width: 22px;
  height: 22px;
  padding: 5px;
  background: url('../../assets/imgs/deck/page_nygh/btn-close.png');
  background-size: contain;
  cursor: pointer;
}
.my-abs-model{
  border: 1px solid #7FFFEA;
  background: rgba(0,58,64,0.8);
  box-sizing: border-box;
  padding: 50px 20px 50px 40px;
}
.my-prop-s{
  background: rgba(0, 58, 64, 1);
  border-color: #008C75;
  .el-select-dropdown__item{
    line-height: 2;
    height: auto;
    color: #fff;
  }
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
    background: transparent;
  }
}

// 边框发光盒子
.alight-box {
  box-shadow: 0 0 20px 8px rgba(18, 172, 152, 1), 0 0 20px 8px inset rgba(18, 172, 152, 0.5);
}

// 日期选择器
.date-default-popper {
  // filter: invert(0.9) hue-rotate(140deg);

  border: 1px solid #7FFFEA !important;
  background: rgba(0,58,64,9) !important;
  border-radius: 0 !important;
  .el-date-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
    button, span {
      color: #aaa;
      font-size: 22px !important;
      margin: 0;
      padding: 0;
    }
  }
  .el-picker-panel__content {
    table {
      font-size: 22px !important;
      th {
        color: #999;
        border-bottom: 1px solid #85feeb;
      }
      td {
        color: #999;
        .cell {
          color: #fff;
        }
        &.available {
          color: #fff;
        }
      }
      &.el-month-table {
        a.cell {
          width: fit-content;
        }
      }
    }
  }
}

// 默认tab样式
.tab-default {
  height: 47px;
  background: url('@/assets/imgs/deck/page_znfx/bg-tab.png');
  background-size: 100% 100%;
  display: flex;
  margin: 10px 0 15px;
  &>div {
    flex: 1;
    position: relative;
    cursor: pointer;
    &.highlight {
      background: url('@/assets/imgs/deck/page_znfx/bg-tab-h.png');
      background-size: 100% 100%;
      &>span {
        font-weight: bold;
        opacity: 1;
      }
    }
    &>span {
      width: 100%;
      position: absolute;
      top: -15px;
      text-align: center;
      font-size: 28px;
      color: #FFFFFF;
      opacity: 0.4;
    }
  }
}

// 单列描述列表样式
.des-default {
  li {
    height: 72px;
    background: rgba($color: #fff, $alpha: 0.1);
    display: flex;
    align-items: center;
    padding: 0 26px;
    margin-bottom: 18px;
    span:first-child {
      display: inline-block;
      width: 180px;
      margin-right: 42px;
      font-size: 28px;
      color: rgba(255, 255, 255, 0.7);
      text-align: justify;
      text-align-last: justify;
      text-justify:distribute-all-lines;
    }
    span:last-child {
      font-size: 28px;
      color: #FFFFFF;
    }
  }
}