.ui-card {
  position: relative;
  margin: 0.41667rem;
  overflow: hidden;
  padding: 0.08333rem;

}

  .ui-card .ui-card-box {
    border: solid 0.08333rem #17243e;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

.ui-card.no-border {
  border: none;
  overflow: visible;

}

.ui-card .card-corner {
    width: 0.625rem;
    height: 0.625rem;
    border: 0;
    position: absolute;
    z-index: 999;

}

.ui-card .card-corner-top {
    border-top: 0.08333rem solid #266297;
    border-left: 0.08333rem solid #266297;
    margin-top: -0.08333rem;
    margin-left: -0.08333rem;

}

.ui-card .card-corner-bottom {
    border-bottom: 0.08333rem solid #266297;
    border-right: 0.08333rem solid #266297;
    position: absolute;
    right: -0.08333rem;
    bottom: -0.08333rem;

}

.ui-card .am-flexbox, .ui-card .am-flexbox-item {
    height: 100%;

}

.ui-card .am-flexbox .echarts-for-react, .ui-card .am-flexbox-item .echarts-for-react {
      width: 100%;
      height: 100% !important;
    }



.connection-tip {
  position: absolute;
  /*top: -6%;*/
  top: 0;
  right: 0%;
  padding: 0.5%;
  height: 0.83333rem;
  width: 6.25rem;
  text-align: center;
  border-radius: 0 0 0.41667rem 0.41667rem;
  background: rgba(255, 255, 255, 0.2);
  transition: opacity 0.5s 1.5s,-webkit-transform 0.5s;
  transition: transform 0.5s,opacity 0.5s 1.5s;
  transition: transform 0.5s,opacity 0.5s 1.5s,-webkit-transform 0.5s;
  -webkit-transform: translate(100%,0);
          transform: translate(100%,0);
  opacity: 0.5;
}

.connected{
  -webkit-transform: translateX(0);
          transform: translateX(0);
  opacity: 0;
}

/* font size */
/* the segmentation-line's height */
/* colors */

/* .ui-counter {*/
/*   color: $secondary-color;*/
/*   font-weight: bold;*/
/*   $box-height: calc(#{$font-size} * .6);*/
/*   $counter-height: calc(#{$box-height} * 2 + #{$line-height});*/
/*   display: inline-block;*/

/*   .counter-num {*/
/*     width: $font-size;*/
/*     height: $counter-height;*/
/*     line-height: $counter-height;*/
/*     font-size: $font-size;*/
/*     text-align: center;*/
/*     background: transparent;*/
/*     margin-right: 10px;*/
/*     position: relative;;*/
/*     display: inline-block;*/

/*     span {*/
/*       color: $font-color;*/
/*     }*/

/*     .segmentation {*/
/*       position: absolute;*/
/*       top: $box-height;*/
/*       background: transparent;*/
/*       height: $line-height;*/
/*       width: $font-size;*/
/*     }*/

/*     .top {*/
/*       height: $counter-height;*/
/*       background: transparent;*/
/*       position: relative;*/
/*       display: flex;*/
/*       justify-content: center;*/

/*       span {*/
/*         width: $font-size;*/
/*         height: $box-height;*/
/*         position: absolute;*/
/*         background: $background-color;*/
/*         border-radius: 10px 10px 0 0;*/
/*         display: block;*/
/*         overflow: hidden;*/
/*       }*/

/*       .placeholder {*/
/*         width: $font-size;*/
/*         height: calc(#{$box-height} + #{$line-height});*/
/*         position: absolute;*/
/*         top: $box-height;*/
/*         background: transparent;*/
/*       }*/
/*     }*/

/*     .bottom {*/
/*       height: $box-height;*/
/*       position: absolute;*/
/*       top: calc(#{$box-height} + #{$line-height});*/
/*       display: flex;*/
/*       justify-content: center;*/
/*       width: $font-size;*/
/*       overflow: hidden;*/
/*       background: $background-color;*/
/*       border-radius: 0 0 10px 10px;*/

/*       span {*/
/*         position: absolute;*/
/*         bottom: 0;*/
/*         display: block;*/
/*       }*/
/*     }*/
/*   }*/
/* }*/

@-webkit-keyframes svg-scale {
  0%   {
    -webkit-transform: scale(0) rotateZ(0deg);
            transform: scale(0) rotateZ(0deg);
  }
  25%  {
    -webkit-transform: scale(1) rotateZ(60deg);
            transform: scale(1) rotateZ(60deg);
  }
  50%  {
    -webkit-transform: scale(.3) rotateZ(180deg);
            transform: scale(.3) rotateZ(180deg);
  }
  75%  {
    -webkit-transform: scale(1) rotateZ(300deg);
            transform: scale(1) rotateZ(300deg);
  }
  100% {
    -webkit-transform: scale(0) rotateZ(360deg);
            transform: scale(0) rotateZ(360deg);
  }
}

@keyframes svg-scale {
  0%   {
    -webkit-transform: scale(0) rotateZ(0deg);
            transform: scale(0) rotateZ(0deg);
  }
  25%  {
    -webkit-transform: scale(1) rotateZ(60deg);
            transform: scale(1) rotateZ(60deg);
  }
  50%  {
    -webkit-transform: scale(.3) rotateZ(180deg);
            transform: scale(.3) rotateZ(180deg);
  }
  75%  {
    -webkit-transform: scale(1) rotateZ(300deg);
            transform: scale(1) rotateZ(300deg);
  }
  100% {
    -webkit-transform: scale(0) rotateZ(360deg);
            transform: scale(0) rotateZ(360deg);
  }
}

.bling {
  -webkit-transform: scale(0) rotateZ(0deg);
          transform: scale(0) rotateZ(0deg);
  -webkit-transform-origin:50% 50%;
          transform-origin:50% 50%;

  animation: svg-scale 3s linear;
  -webkit-animation: svg-scale 3s linear;
  -moz-animation: svg-scale 3s linear;
  -o-animation: svg-scale 3s linear;
}


.ui-map-view {
  width: 100%;
  height: 100%;
  position: relative;
}

  .ui-map-view .echarts-for-react {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
  }

  .ui-map-view .am-flexbox-item {
    height: 100%;
  }

  .ui-map-view .echarts-for-react {
    height: 100% !important;
  }

.ui-monitor {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

  .ui-monitor .monitor-header {
    width: 100%;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 0.83333rem;
  }

  .ui-monitor .monitor-header :nth-child(n) {
      display: inline-block;
    }

  .ui-monitor .monitor-header .monitor-title {
      width: 2.08333rem;
    }

  .ui-monitor .monitor-header .header-data {
      font-size: 0.41667rem;
      line-height: 0.41667rem;
    }

  .ui-monitor .monitor-header .header-data span:not(:first-child) {
        margin-left: 0.41667rem;
      }

  .ui-monitor .monitor-header .header-extra {
      float: right;
      font-size: 0.41667rem;
      padding-top: 0.16667rem;
    }

  .ui-monitor .echarts-for-react {
    width: 100%;
    height: 100% !important;
  }