@compassActiveColor: #68ADFE;

.mapboxgl-ctrl-drawArea{
  padding: 5px;
  box-sizing: border-box;
  background-color: white;
  border: 1px solid grey;
  border-radius: 3px;
  width:40px;
  [disabled="true"]{
    color: grey;
    pointer-events: none;
    cursor: not-allowed;
  }
  li{
    list-style: none;
    color: black;
    border-bottom: 1px solid grey;
    cursor: pointer;
    &:hover{
      color: #0086b3;
    }
    span{
      display: block;
      width: 100%;
      text-align: center;
      font-size: 18px;
    }
    &:last-child{
      border-bottom: none;
    }
    div{
      width: 100%;
      text-align: center;
      font-size: 12px;
    }
  }
}

.editToolBtn{
  color: black;
  cursor: pointer;
  background-color: white;
  padding: 5px;
  border: 1px solid grey;
  border-radius: 3px;
  width:35px;
  text-align: center;
  &:hover{
    color: #0086b3;
  }
  &.active{
    color: #0086b3;
  }
}

.noSelect{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}




.compass{
  pointer-events: auto;
  position: relative;
  width: 95px;
  height: 95px;
  overflow: hidden;
  .compass-svg {
    .noSelect;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
  }
  .compass-outer-ring {
    position: absolute;
    .noSelect;
    top: 0;
    width: 95px;
    height: 95px;
    fill: rgba(255, 255, 255, 0.5);
  }

  .compass-outer-ring-background {
    position: absolute;
    .noSelect;
    top: 14px;
    left: 14px;
    width: 44px;
    height: 44px;
    border-radius: 44px;
    border: 12px solid rgba(47, 53, 60, 0.8);
    box-sizing: content-box;
  }

  .compass-gyro {
    .noSelect;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 95px;
    height: 95px;
    fill: #CCC;
  }

  .compass-gyro-active {
    fill: @compassActiveColor;
  }

  .compass-gyro-background {
    .noSelect;
    position: absolute;
    top: 30px;
    left: 30px;
    width: 33px;
    height: 33px;
    border-radius: 33px;
    background-color: rgba(47, 53, 60, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-sizing: content-box;
  }

  .compass-gyro-background:hover + .compass-gyro {
    fill: @compassActiveColor;
  }

  .compass-rotation-marker {
    position: absolute;
    top: 0;
    width: 95px;
    height: 95px;
    fill: @compassActiveColor;
    opacity: 0.6;
    user-select: none;
  }
}


.blue_scrollvar_box{
  .el-scrollbar__wrap{
    overflow-y: auto;
    overflow-x: hidden;
  }
}

.fps-control{
  font-size: 15px;
  padding: 10px;
}


@media screen and (max-width: 1024px){
  ._cross{
    &:before{
      height: 2px;
    }
    &:after{
      width: 2px;
    }
  }
  .mapboxgl-popup-content{
    padding: 0px !important;
    /* 设置文字描边宽度和颜色 */
    -webkit-text-stroke: 1px yellow;
    text-stroke: 1px yellow;
    color: white ;
    background-color: rgba(0,0,0,0) !important;
  }
  .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{
    display: none;
  }
}
@media screen and (min-width: 1025px){
  ._cross{
    &:before{
      height: 4px;
    }
    &:after{
      width: 4px;
    }
  }
}


._cross{
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 50%;

  &:before{
    width: 60px;
    content: "";
    position: absolute;
    background: red;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  &:after{
    height: 60px;
    content: "";
    position: absolute;
    background: red;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}

.customTree{


  .notSelect {
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
  }

  .dragArea{
    min-height: 5px;
    outline: none;
  }
}