@brand-primary:         darken(#2d8cf0, 6.5%);
@brand-success:         #19be6b;
@brand-info:            #2d8cf0;
@brand-warning:         #ff9900;
@brand-danger:          #ed3f14;
//定义全局颜色
html{
  &,body{height:100%;}
  body{
    display:block;
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1); }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
            transform: rotate(180deg) scale(0.6); }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1); } }

.loading{position:fixed;left:0;top:0;right:0;bottom:0;background-color:rgba(0,0,0,.7);color:#FFF;width:100%;height:100%;z-index:9000;display:none;transition: all 0.2s;}
.loading-box {
    position: absolute;
    height:80px;
    width: 80px;
    left:50%;
    top:50%;
    margin:-40px 0 0 -40px;
   > .circle {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    left: -20px;
    top: -20px;
    border: 4px solid #19be6b;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-radius: 100%;
    height: 35px;
    width: 35px;
    -webkit-animation: rotate 1s 0s ease-in-out infinite;
            animation: rotate 1s 0s ease-in-out infinite;
    }
     > .circle:last-child {
      display: inline-block;
      top: -10px;
      left: -10px;
      width: 15px;
      height: 15px;
      -webkit-animation-duration: 0.5s;
              animation-duration: 0.5s;
      border-color: #19be6b transparent #19be6b transparent;
      -webkit-animation-direction: reverse;
       animation-direction: reverse;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(-20px,0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInleft {
  from {
    opacity: 0;
    transform: translate3d(10px,0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInRight,.fadeInleft{
  animation-name: fadeInRight;
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes rotate{
    100% {
        transform: rotate(360deg)
    }
}

.mb0{margin-bottom:0;}
//end ===================全局设置


// 登录页专用样式
.page-login{
  background:#2a3c92 url(../images/bg_login.png) center center / auto 100% no-repeat;
  .login{
    background-color:rgba(17, 123, 235, 0.15);
    border-radius:6px;
    padding:15px;
    margin:30px 15px;
    h1{
      font-size:24px;
      text-align: center;
      color:#FFF;
      margin:0 0 15px;
      padding:15px 0;
    }
    .input-group-addon{
      background-color:#E3F2FD;
      border-color:#E3F2FD;
      color:@brand-primary;
    }
    .input-group-addon-vscode{
      border:none;
      padding:0;
      border-radius: 0 4px 4px 0;
      overflow: hidden;
      > img{width:140px;height:46px;display: block;}
    }
  }
  .animation-bg{
    position: absolute;
    z-index:-1;
    left:55%;
    top:13%;
    width:366px;
    height:366px;
    margin:0;
    > .circle-img{
      position: absolute;
      left:0;
      top:0;
      animation: rotate 1s linear infinite;

      &:nth-child(1) {
          animation-duration: 30s
      }

      &:nth-child(2) {
          animation-duration: 40s
      }

      &:nth-child(3) {
          animation-duration: 50s
      }

      &:nth-child(4) {
          animation-duration: 60s
      }

      &:nth-child(5) {
          animation-duration: 70s
      }

      &:nth-child(6) {
          animation-duration: 80s
      }

      &:nth-child(7) {
          animation-duration: 90s
      }

      &:nth-child(8) {
          animation-duration: 100s
      }

      &:nth-child(9) {
          animation-duration: 110s
      }

      &:nth-child(10) {
          animation-duration: 120s
      }

    }

  }
}
@media(min-width:768px){
  .page-login{
    background:#2a3c92 url(../images/bg_login.png) center center / 100% auto no-repeat;
    .login{
      width:400px;
      position: absolute;
      top:50%;
      left:60%;
      transform:translate(-50%,-50%);
      margin:0;
      z-index: 20;
      }
    }
}

// 全局主要框架的样式
.page-main{
  padding-top:50px;
  .navbar-fixed-top{
    .navbar-brand{}
    .navbar-text .badge{
      margin-right:15px;
    }
  }
  .aside{
    width:175px;
    position:fixed;
    left:0;
    top:50px;
    bottom:0;
    z-index:20;
    background-color:#21252b;
    transition: transform  0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    .btn-toggle-aside{
      position: absolute;
      width:15px;
      right:-15px;
      top:0;
      bottom:0;
      transition: all 0.2s;
      > .fa{
        position: absolute;
        width:15px;
        height:48px;
        text-align: center;
        line-height: 48px;
        background-color:#21252b;
        color:#FFF;
        top:50%;
        margin-top:-24px;
        opacity: 0;
      }
      &:hover{
        background-color:rgba(74, 81, 97, 0.4);
        > .fa{
          opacity: 1;
          background-color:#4b5261;
        }
      }
      &:active{
        > .fa{
        background-color:#0e1115;
        }
      }
    }
    .left-menu{
      margin:0;
      padding:0;
      list-style: none;
      > li > ul{
        max-height: 0;
        overflow:hidden;
        margin:0;
        padding:0;
        transition:all 0.4s  cubic-bezier(0.215, 0.61, 0.355, 1);
        background-color: #080a0c;
        list-style:none;
        >li{
          > a{
            display: block;
            padding:10px 15px 10px 2.4em;
            transition: all 0.2s;
            color:#9da5b4;
            border-bottom:1px dashed #13181d;
            &:hover{
              text-decoration: none;
              background-color:#13181d;
            }
            &:active{
              text-decoration: none;
              background-color:#010202;
            }
            &:focus,&:visited{
              text-decoration: none;
            }
          }
          &.active{
            > a{
              animation-name: fadeInleft;
              animation-duration: 0.4s;
              animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
              color:@brand-warning;
            }
          }
        }
      }
      > li >a {
        display: block;
        padding:10px 12px;
        color:#9da5b4;
        transition:all 0.1s;
        position: relative;
        > .fa-caret-down{
          margin:0;
          position: absolute;
          right:10px;
          top:50%;
          margin-top:-7px;
          transition: transform 0.2s;
        }
        > .fa{margin-right:5px;}
        &:hover,&:visited,&:focus{
          text-decoration: none;
          background-color:#4b5261;
        }
        &:hover{
          color:#FFF;
        }
        &:active{
          text-decoration: none;
          background-color:@brand-info;
          color:#FFF;
        }
      }
      > li.active{
        > ul{
            max-height:900px;
            transition-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1);
            transition-delay: 0s;
        }
      }
      > li.active > a {
          text-decoration: none;
          background-color:#3a3f4b;
          color:@brand-success;
          > .fa-caret-down{
          transform: rotate(180deg);
          }
      }
    }
  }
  .main{
    height:100%;
    margin-left:175px;
    transition: all 0.2s cubic-bezier(0.5, 0, 1, 0);
    transition-delay: 0.3s;
    position: relative;
  }
  &.off{
    .aside{
      transform: translate(-100%,0);
      .btn-toggle-aside .fa-caret-left:before{
        content:"\f0da";
      }
    }
    .main{
      margin-left:0;
      .pagination-footer{left:0;}
    }
  }
}
//分页样式
.pagination-footer{
    position:fixed;
    bottom:0;left:175px;
    right:0;
    background-color:#f2f2f2;
    text-align: right;
    .pagination{
      margin:10px 15px;
    }
  }
// ======================================================================
//首页样式
.home-wrapper{padding-top:15px;}
//地图页面样式
.map-wrapper{
  height: 100%;
  position:relative;
  .map{
    height:100%;
    width:100%;
    background-color:#f3f1ec;
  }
  .map-search{
    position: absolute;
    right:20px;top:20px;
    width:250px;
    z-index:500;
    background-color:#FFF;
    box-shadow:0 1px 10px rgba(0,0,0,.25);
    transition: all 0.2s cubic-bezier(0.5, 0, 1, 0);
    .input-label{
      position: absolute;left:0;top:0;bottom:0;color:#999;line-height: 1.56;
      padding:6px 15px;
      &:after{
        content:"";
        position: absolute;
        right:0;
        top:4px;
        bottom:4px;
        border-right:1px solid #e5e5e5;
      }
    }
    .form-control{
      padding-left:65px;
      border-color:transparent;
      border-radius: 0;
      box-shadow:none;
    }
    .result-list{
      position: absolute;
      width:100%;
      top:36px;
      left:0;
      background-color: #FFF;
      box-shadow:0 4px 10px rgba(0,0,0,.25);
      .list-group{
        margin:0;
        .list-group-item{
          border-left:none;
          border-right:none;
          .list-group-item-text{color:#999;font-size:12px;}
        }
        .list-group-item:first-child,.list-group-item:last-child{
          border-radius: 0;
        }
      }
    }
  }
}
//工程管理样式
.project-wrapper{
  padding-top:15px;
  padding-bottom:50px;
}
//机型配置
.type-cogs-wrapper{
    padding-top:15px;
}
//维保服务：维保计划、维保记录
.wb-plan-wrapper{
  padding-top:15px;
}
.wb-record-wrapper{
  padding-top:15px;
}
// 报警服务、报警模板、报警历史、订阅规则
.alarm-tmp-wrapper{
  padding-top:15px;
}
.alarm-rule-wrapper{
  padding-top:15px;
}
.alarm-history-wrapper{
  padding-top:15px;
}
.alarm-subscription-rule-wrapper{
  padding-top:15px;
}

// 数据保存策略
.data-saving-rule-wrapper{
  padding-top:15px;
}
// 账号管理
.account-management-wrapper{
  padding-top:15px;
}

// 数据分析：故障分析、机组分布
.fault-analysis-wrapper{
  padding-top:15px;
}
.unit-distribution-wrapper{
  padding-top:15px;
}

//远程升级：设备升级、DTU升级、固件升级
.equipment-upgrading-wrapper{
  padding-top:15px;
}
.dtu-update-wrapper{
  padding-top:15px;
}
.firmware-management-wrapper{
  padding-top:15px;
}
//操作日志
.operation-log-wrapper{
  padding-top:15px
}
//常见问题
.help-wrapper{
  padding-top:15px
}
//问题反馈
.feed-wrapper{
  padding-top:15px
}

::-webkit-scrollbar {
    width: 6px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 7px;
    -webkit-box-shadow: inset 0 0 2px #929292;
    background-color: #929292;
}