@import 'cover';
@import 'base';
/*
* 组件工具样式库
*/

.drawCur{
 cursor: url(./images/cur/draw.cur), auto;
}

.measureCur{
 cursor: url(./images/cur/measure.cur), auto;
}

/*--------tooltip----------------*/

.twipsy {
    display: block;
    position: absolute;
    visibility: visible;
    max-width: 300px;
    min-width: 100px;
    padding: 5px;
    font-size: 11px;
    z-index: 1000;
    opacity: 0.8;
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    filter: alpha(opacity=80);
  }
  
  .twipsy.left .twipsy-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #000000;
  }
  
  .twipsy.right .twipsy-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #000000;
  }
  
  .twipsy-inner {
    padding: 3px 8px;
    background-color: #000000;
    color: white;
    text-align: center;
    max-width: 300px;
    text-decoration: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
  
  .twipsy-arrow {
    position: absolute;
    width: 0;
    height: 0;
  }
  
  
  /*--------tooltip end------------*/
  
  
  /*--------地形裁剪补充 str-----------*/

  //坡度坡向颜色带
.color-select {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  justify-content: center;
  width: 48%;
  background-color: var(--panel-bg-color);
  right: 0;
  top: 24px;
  z-index: 1000;
  border: 1px solid var(--border-color);
  box-sizing: border-box;

}

.ban {
 width: 100%;
 @include cal-height(24px);
}

.ban:hover {
  border: 1px solid var(--theme-bg-color);
}


.band1 {
  background: -webkit-linear-gradient(left, #95e8f9, #002794) !important;
}

.band2 {
  background: -webkit-linear-gradient(left, #a2fbc2, #ff6767) !important;
}

.band3 {
  background: -webkit-linear-gradient(left, #e6c6ff, #9d00ff) !important;
}

.band4 {
  background: -webkit-linear-gradient(left, #0909d4, #00a1ff 20%, #14bb12 40%, #dde007 60%, #d20f0f) !important;
}

.band5 {
  background: -webkit-linear-gradient(left, #baffe5, #1ab99c) !important;
}

.band5 {
  background: -webkit-linear-gradient(left, #baffe5, #1ab99c) !important;
}

.band6 {
  background: -webkit-linear-gradient(left, #93f602, #2fac01, #74cb01, #d0ef01, #e1ce01, #e16a01, #f70701) !important;
}

.label {
  display: inline;
  padding: 0.4em 4em .01em 6em;
  font-size: 110%;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  line-height: 1.1;


}

  /*--------地形裁剪补充 end-----------*/

/*--------悬浮窗口 str-----------*/
.bubble {
  @include  cal-width(200px);
  @include  cal-max-height(200px);
  box-sizing: border-box;
  // padding: 15px 15px 5px 15px;
  padding: 2px 8px 8px 8px;
  display: inline-block;
  position: absolute;
  z-index: 99;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 2px 2px 6px rgba(26, 26, 26, 0.5);
  background-color: var(--panel-bg-color);
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  i {
    font-size: 16px;
    &:hover {
      color: var(--theme-bg-color);
    }
    }
}

// .bubble::-webkit-scrollbar {
//   display: none;
//   /* Chrome Safari */
// }

// .bubble:after {
//   content: "";
//   position: absolute;
//   bottom: -50px;
//   left: 50px;
//   border-width: 0 20px 50px 0px;
//   border-style: solid;
//   border-color: transparent #fff;
//   display: block;
//   width: 0;
// }

.bubbleDock{
  top:auto !important;
  left: auto  !important;
  bottom: 20%  !important;
  right: 10px  !important;
}

.legend{
  position: fixed;
  right: 6px;
  bottom: 6px;
z-index: 999;
}

// 消息提示
.tooltip {
  // @include  cal-width(300px);
  max-width: 240px;
  box-sizing: border-box;
  display: inline-block;
  position: fixed;
  // right: 10px;
  top: 30%;
  z-index: 999;
  border-radius : 4px;
  box-shadow: 2px 2px 6px rgba(26, 26, 26, 0.5);
  background-color: var(--panel-bg-color);
  border: none;
  overflow: hidden;
  @include cal-font-size(var(--tip-font-size));
  padding: 4px 10px;
  right: -300px;
  transition-duration: 0.5s;
  p{
    margin: 6px 0;
    // position: absolute;
    // position: relative;
  }
}

.bubble-tabel{
  @extend .bubble;
  width:  auto;
  @include  cal-max-height(200px);
  max-width: 350px;
}
  .tab thead, .tab tr {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(211, 202, 221);
  }
  .tab {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(211, 202, 221);
    border-spacing:0;
    border-collapse:collapse;
    width: 100%;
    text-align: center;
  }
  
  /* Padding and font style */
  .tab td, .tab th {
    padding: 5px ;
    font-size: 12px;
    font-family: Verdana;
    color: rgb(95, 74, 121);
    border: 1px solid rgb(193, 168, 223);
  }
  
  /* Alternating background colors */
  .tab tr:nth-child(even) {
    background: rgb(223, 216, 232)
  }
  .tab tr:nth-child(odd) {
    background: #FFF
  }

  .tab2{
    td,th{
      width: 33%;
      padding: 4px ;
      height: 15px;
      border-color: var(--border-color) !important;
      .input{
        background: var(--panel-bg-color) !important;
        width: 76%;
        height: 92%;
        border: none;
        position: absolute;
        overflow: hidden;
        position: absolute;
        right: 15px;
        top: 0;
        text-align: center;
      }
      .input2{
        background: var(--panel-bg-color) !important;
        width: 90%;
        border: none;
        text-align: center;
      }
      select{
        border:none;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
    }
    tr{
      background: var(--panel-bg-color) !important
    }
  }
