/*
 * 版权声明
 * 上海万位数字技术有限公司（以下简称“本公司”）对其自行研究开发、编写编制的软件程序、代码等（以下简称“研发资料”）均受《中华人民共和国反不正当竞争法》、《中华人民共和国著作权法》、《中华人民共和国专利法》及适用之国际公约中有关著作权、专利权及/或其他财产所有权法律的保护，为本公司专属或持有。
 * 使用者将本公司专属或持有的研发资料用于商业、营利、广告性目的时，需事先征得本公司书面特别授权，并注明出处“上海万位数字技术有限公司”，并按照有关国际公约及中华人民共和国法律的有关规定，向本公司支付使用费。
 * 未经本公司事先明确的书面特别授权，任何单位或个人不得以任何形式、任何途径，通过任何渠道变更、篡改、发行、发布、散布、复制、重制、展示或利用研发资料全部或部分内容，否则以侵权论，依法追究法律责任。
 *
 * Copyright Notice
 * All the software programs and codes among others (hereinafter referred to as the R&D data) solely developed and written by Shanghai Wanway Digital Technology Co., Ltd. (hereinafter referred to as the Company) are protected by the Law of the People's Republic of China against Unfair Competition, Copyright Law of the People's Republic of China, Patent Law of the People's Republic of China and provisions on laws of copyrights, patent rights and/or other property ownership in international conventions that apply and exclusive to or owned by the Company.
 * While using the R&D data exclusive to or possessed by the Company for any commercial, marketing, or advertising purpose, users need ask for special authorization from the Company in writing beforehand, note the source "Shanghai Wanway Digital Technology Co., Ltd." and pay the Company royalties subject to relevant provisions in related international conventions and laws of the People's Republic of China.
 * With no prior and express written special authorization from the Company, any unit or individual shall not alter, tamper, issue, release, distribute, duplicate, remake, produce or use part or all of the R&D data in any form and any way, otherwise it shall be deemed as infringement and subject to legal penalties by law.
 */

/**
MainLayout.js
 */
.main_layout {
  overflow: hidden;
  background: #f9f9f9;
  color: rgb(80, 80, 80);
  margin: 0;
  padding: 0;
  display: block;
  border: 1px solid rgb(67, 138, 212);
  .login_header {
    //border-bottom: 4px solid rgb(51, 98, 166);
    background-position: 0 -91px;
    margin: 0;
    padding: 0;
    display: block;
  }
}

/**
LoginInfo.js
 */
.login_info {
  .bg {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .logo {
    padding: 13px 0 13px 25px;
  }
  .menus {
    padding-right: 25px;
    display: flex;
    flex-direction: row;
    color: #ffffff;
    .notice{
      padding-left: 0;
      padding-right: 30px;
      text-align: left;
      cursor: pointer;
      &:hover{
        text-decoration: underline;
      }
      .noticeAlarm{
        display: inline-block;
        position: relative;
        top: -6px;
        left: 3px;
        width: 8px;
        height: 8px;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        background: #ff4a3b;
      }
    }
    .hello {
      padding-left: 3px;
      padding-right: 0;
      text-align: right;
    }
    .user {
      padding-left: 0;
      padding-right: 3px;
      text-align: left;
    }
    .item {
      padding-left: 3px;
      padding-right: 3px;
      text-align: center;
    }
  }
}

/**
MainContentLayout.js
 */

.main_content_layout {
  display: flex;
  flex-direction: column;
  .menu {
    height: 36px;
    line-height: 36px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-image: url('../images/repeat.png');
  }
  .content {
    flex: 1;
    overflow: hidden;
    background: #8a99ac;
  }
}

/**
MyAccount.js
 */
.my-account {
  overflow: hidden;
  background-color: #8C98AE;
  display: flex;
  flex-direction: row;
  .sider {
    border-right: 1px solid #6F7E93;
    border-bottom: 1px solid #d5d5d5;
    padding: 4px;
    background: #A0B1C5;
    overflow: auto !important;
  }
  .content {
    padding: 3px;
    margin-left: 3px;
    background: #CEDAE6;
    overflow-y: auto;
    flex: 1;
  }
  .collapse {
    width: 191px;
  }
  .collapse1 {
    margin-bottom: 5px;
  }

  .ul {
    padding: 0 16px 0 13px;
    background: #E6EBF1;
    li {
      padding: 10px 0 10px 20px;
      border-top: 1px solid #EDF2F8;
      border-bottom: 1px solid #D3D8DE;
      list-style: none;
      a {
        margin-right: 5px;
        color: #333333;
        font-size: 14px;
        &:hover {
          text-decoration: underline;
        }
        &:active {
          color: #333333;
          font-weight: bold;
        }
      }
    }
  }
}

/**
MyWorkBench.js
 */
.my-work-bench {
  .col1 {
    float: left;
    width: 44%;
    overflow: hidden;
    .box {
      border: 1px solid #a4b3c7;
      .bd {
        padding: 9px 13px 15px;
        background: #f7f7f7;
      }
      .info {
        .photo {
          float: left;
        }
        .detail {
          margin-left: 108px;
          padding-top: 2px;
          li {
            padding: 2px 0;
          }
          h3 {
            font-size: 14px;
            font-weight: bold;
          }
          label {
            font-weight: bold;
            color: #666666;
          }
        }
        .links {
          a {
            text-decoration: none;
            color: #0d5cac;
            cursor: pointer;
            &:hover {
              text-decoration: underline;
              color: #0d5cac;
            }
          }
        }
      }
      .hd {
        height: 34px;
        position: relative;
        background-position: 0 -207px;
        background-image: url("../images/repeat.png");
      }
      .hd_title {
        float: left;
        height: 34px;
        line-height: 34px;
        padding: 0 12px;
        font-weight: bold;
        font-size: 14px;
      }
      .hd_content {
        .left {
          float: left;
        }
        .right {
          float: left;
        }
      }
    }
    .ops {
      background-image: url("../images/repeat.png");
      min-width: 348px;
      border: 1px solid #a4b3c7;
      margin: 3px 0;
      background-position: 0 -294px;
      height: 36px;
      overflow: hidden;
      zoom: 1;
      &:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
      }
      .title {
        float: left;
        line-height: 36px;
        padding: 0 12px;
        font-size: 14px;
        font-weight: bold;
      }
      .operations {
        float: left;
        height: 36px;
        padding-left: 16px;
        background: url("../images/global.png") no-repeat;
        background-position: -243px -126px;
        li {
          float: left;
          line-height: 36px;
          padding: 0 3px;
          color: #0d5cac;
        }
      }
    }
  }
  .col2 {
    float: left;
    width: 56%;
    .box {
      border: 1px solid #a4b3c7;
      margin-left: 3px;
      .hd {
        height: 34px;
        position: relative;
        background-position: 0 -207px;
        background-image: url("../images/repeat.png");
      }
      .tab_ctrl {
        float: left;
        height: 34px;
        li {
          float: left;
          height: 34px;
          line-height: 34px;
          padding: 0 12px;
          font-weight: bold;
          font-size: 14px;
          border-right: 1px solid #a4b3c7;
        }
        .current {
          background-position: 0 -251px;
          background-image: url(../images/repeat.png);
        }
      }
      .bd {
        padding: 9px 13px 15px;
        background: #f7f7f7;
      }
    }
  }
}

/**
HeaderMenu.js
 */

.header_menu {
  font-Size: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .menus {
    display: flex;
    flex-direction: row;
    .item {
      margin-left: 35px;
      padding-left: 6px;
    }
  }
  .search {
    display: flex;
    flex-direction: row;
    .item {
      padding-right: 1px;
      margin-top: -2px;
    }
  }
}

/**
MyCustomer.js
 */
.my_customer {
  background-color: #8a99ac;
  display: flex;
  flex-direction: row;
  .sider {
    padding: 3px;
    background-color: #a0b0c7;
    border: 1px solid #8398B3;
    overflow: hidden;
    width: 313px;
  }
  .content {
    margin-left: 3px;
    padding: 3px;
    background-color: #cfdae7;
    overflow: hidden;
  }
}

/**
PositionLayout.js
 */
.position_layout {
  overflow: hidden;
  color: rgb(80, 80, 80);
  margin: 0;
  padding: 0;
  display: block;
  border: 1px solid rgb(67, 138, 212);
  .login_header {
    background-position: 0 -91px;
    background-image: url(../images/repeat.png);
    margin: 0;
    padding: 0;
    display: block;
  }
}

/**
PositionContentLayout.js
 */
.position_content_layout {
  display: flex;
  flex-direction: column;
  .header {
    height: 36px;
    line-height: 36px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-image: url(../images/repeat.png);
  }
  .content {
    flex: 1;
    overflow: hidden;
    background: #8a99ac;
  }
}

/**
DeviceInfo.js
 */
.ant-checkbox-checked .ant-checkbox-inner:after{
  //border-color: #0420d1 !important;
}
.ant-checkbox-checked .ant-checkbox-inner, .ant-checkbox-indeterminate .ant-checkbox-inner{
  background-color: rgba(0,0,0,0);
  //border-color: #999;
  border-color: #0420D1;
  background: #0420D1;
}
.ant-checkbox-inner:after {
  //border-color: #0420d1 !important;
}
.device_info {

  .device-selected {
    background: #E3EDFF !important;
  }
  .online {
    //border: 1px solid #a4d4f5;
    //color: #5461d9;
    border: 0;
    background:rgba(3,109,255,0.03);
  }
  .info {
    border: 0;
    background:rgba(3,109,255,0.03);
  }
  .online, .info {
    padding: 5px 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    .first {
      margin-bottom: 5px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      .first-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        .img {
          width: 16px;
          height: 16px;
        }
        .name {
          margin-left: 5px;
          //width: 200px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          max-width: 200px;
        }
      }
      .links {
        //margin-right: 15px;
        line-height: 21px;
      }
    }
    .operations {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 0 13px 0 39px;
      span{
        opacity: 0.5;
      }
      span:hover{
        opacity: 1;
      }
    }
  }
  .online_green, .detail {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    .first {
      margin-bottom: 5px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      .first-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        .img {
          width: 16px;
          height: 16px;
        }
        .name {
          margin-left: 5px;
          //width: 200px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          max-width: 200px;
        }
      }
      .links {
        //margin-right: 15px;
        line-height: 21px;
      }
    }
    .operations {
      display: none;
    }
  }

  .online_green {
    color: #28C840;
  }
  .point{
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background: #D8D8D8;
    margin-left: 10px;
    display: inline-block;
  }
}

/**
StatisticsForm.js
 */
.statistics_form {
  overflow: hidden;
  background-color: #8C98AE;
  display: flex;
  flex-direction: row;
  .sider {
    border-right: 1px solid #6F7E93;
    border-bottom: 1px solid #d5d5d5;
    padding: 4px;
    background: #A0B1C5;
    .ul {
      padding: 0 16px 0 13px;
      background: #E6EBF1;
      li {
        padding: 10px 0 10px 20px;
        border-top: 1px solid #EDF2F8;
        border-bottom: 1px solid #D3D8DE;
        list-style: none;
        a {
          margin-right: 5px;
          color: #333333;
          font-size: 12px;
          &:hover {
            text-decoration: underline;
          }
          &:active {
            color: #333333;
            font-weight: bold;
          }
        }
      }
    }
    .panel_header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .menus {
        color: #333;
        padding-right: 35px;
      }
    }
    .customertree_collapse {
      z-index: 1;
      .space_footer {
        height: 8px;
      }
    }
  }
  .content {
    padding: 3px;
    margin-left: 3px;
    background: #CEDAE6;
    overflow-y: auto;
  }
}

/**
DeviceManage.js
 */
.device_manage {
  overflow: hidden;
  background-color: #8C98AE;
  display: flex;
  flex-direction: row;
  .sider {
    border-right: 1px solid #6F7E93;
    border-bottom: 1px solid #d5d5d5;
    padding: 4px;
    background: #A0B1C5;
    overflow: auto !important;
    width: 345px;
    .ul {
      padding: 0 16px 0 13px;
      background: #E6EBF1;
      li {
        padding: 10px 0 10px 20px;
        border-top: 1px solid #EDF2F8;
        border-bottom: 1px solid #D3D8DE;
        list-style: none;
        a {
          margin-right: 5px;
          color: #333333;
          &:hover {
            text-decoration: underline;
          }
          &:active {
            color: #333333;
            font-weight: bold;
          }
        }
      }
    }
    .panel_header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .menus {
        color: #333;
        padding-right: 35px;
      }
    }
    .customertree_collapse {
      z-index: 1;
      .space_footer {
        height: 8px;
      }
    }
  }
  .content {
    padding: 3px;
    margin-left: 3px;
    background: #CEDAE6;
    overflow-y: auto;
  }
}

/**
PositionMonitoringLayout.js
 */

.position_monitoring_layout {
  overflow: hidden;
  background-color: #8C98AE;
  display: flex;
  flex-direction: row;
  margin: -10px;
  flex: 1;
  .sider {
    //border-right: 1px solid #6F7E93;
    border-bottom: 1px solid #d5d5d5;
    padding: 0px;
    //height:490px;
    background:rgba(255,255,255,1);
    box-shadow:0px 4px 7px 0px rgba(4,26,120,0.14);
    border-radius:15px;
    width: 360px;
    position: absolute;
    z-index: 1;
    padding: 10px 0;
    margin: 10px 0 0 10px;
  }
  .content {
    padding: 0;
    margin-left: 0;
    //background: #CEDAE6;
    overflow-y: auto;
    flex: 1;
  }
  #device_list_dive {
    .ant-collapse-content-active {
      height: 100% !important;
    }
  }
  .popLine {
    height: 26px;
    line-height: 20px;
    display: flex;
  }
  .popTowCol{
    display: flex;
    justify-content: space-between;

  }
  .address {
    background: rgba(3,109,255,0.03);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 18px;
    padding: 5px 0;
    cursor: pointer;
  }
  .addressStr{
    display: flex;
    align-items: center;
  }
  .tooltip {
    //position: relative;
    display: inline-block;
    //border-bottom: 1px dotted black;
    width: 40px;
  }


  .tooltip .tooltiptext {
    background: rgba(38,38,38,0.75);
    box-shadow: 0px 0px 5px 0px rgba(4, 26, 120, 0.14);
    border-radius: 4px;
    color: #fff;
    visibility: hidden;
    text-align: center;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    margin: -20px 5px;
    white-space: nowrap;
    line-height: 15px;
  }

  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  .topSearch{
    display: flex;
    padding: 0 17px 0 10px;
    align-items: center;
    justify-content: space-between;
    .expandBtn{
      cursor: pointer;
      display: flex;
    }
    .expandBtn:hover{
      opacity: 0.5;
    }
  }
  .ant-tabs{
    flex: 1
  }
  .ant-tabs-nav{
    left: 3px
  }
  .ant-select-selection--single:before{
    content: "\E670";
    margin-top: 3.5px;
    font-family: anticon!important;
    display: inline-block;
    position: absolute;
    vertical-align: text-top;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #AAA;
    margin-left: 10px;
  }
  .ant-select-selection__rendered{
    margin-left: 30px;
  }

  .sort-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 17px 0 10px;

    .sort-select{
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 40px;
      .ant-select-selection--single{
        height: 26px;
        background: rgba(243,244,249,1);
        border-radius: 13px;
        border: 0;
        width: 100px;
      }
      .ant-select-selection--single::before{
        display: none;
      }
      .ant-select-selection__rendered{
        line-height: 22px;
        margin-left: 10px;
      }
      .anticon{
        margin-left: 13px;
      }

    }
    .anticon-plus:hover{
      opacity: 0.5;
    }
    img:hover{
      opacity: 0.5;
    }
    .allDeivces {
      margin: 0 20px 0 0;
      cursor: pointer;
    }
    .allDeivces:hover {
      opacity: 0.5;
    }
  }

  .maptool_icon{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 10px;
    padding: 10px;
    cursor: pointer;

    .tooltiptext{
      background: rgba(38,38,38,0.75);
      box-shadow: 0px 0px 5px 0px rgba(4, 26, 120, 0.14);
      border-radius: 4px;
      color: #fff;
      visibility: hidden;
      text-align: center;
      padding: 5px 10px;
      position: absolute;
      z-index: 1;
      margin: 15px 5px;
      white-space: nowrap;
      line-height: 15px;
      right: 36px;
    }
    .tooltipMenu{
      background: #fff;
      box-shadow: 0px 0px 5px 0px rgba(4, 26, 120, 0.14);
      border-radius: 4px;
      color: #000;
      visibility: hidden;
      text-align: center;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      margin: 15px 5px;
      white-space: nowrap;
      line-height: 15px;
      right: 32px;
      top: 0;
    }
    .tootipMenuItem{
      height: 28px;
      line-height: 28px;
      text-align: left;
      padding: 0  10px;
    }
    .tootipMenuItem:hover {
      background:rgba(243,244,249,1);
    }
  }
  .maptool_icon:hover .tooltiptext, .maptool_icon:hover  .tooltipMenu {
    visibility: visible;
  }
  .maptool_img:hover{
    opacity: 0.5;
  }


}
.maptool_ul{
  margin: -8px -16px;
  padding: 8px 0;
  &_li{
    padding: 0 16px;
    height: 29px;
    line-height: 29px;
    &_a{
      color: #000;
    }
    &_a:hover{
      color: #000;
      text-decoration: none;
    }
  }
  &_li:hover{
    background:rgba(243,244,249,1);
  }
}
.alarm_setting_content {
  display: flex;
  flex-direction: row;
  height: 469px;
  border: 1px solid #d9d9d9;
  .left_content {
    flex: 2;
    .alarm_setting_header {
      background-color: #F7F7F7;
      border: 1px solid #d9d9d9;
      border-left: none;
      margin-bottom: 10px;
      height: 30px;
      line-height: 30px;
      padding-left: 15px;
    }
    .alarm_row {
      margin-bottom: 10px;
      margin-left: 20px;
    }
  }
}
//监控页列表按钮雪碧图
//回放按钮
.mapList_huifang_sprites{
  background-image: url("../images/sprites/sprites_map.svg");
  width: 20px;
  height: 20px;
  background-position: 0px -337px;
  display: inline-block;
}
//跟踪按钮
.mapList_genzong_sprites{
  background-image: url("../images/sprites/sprites_map.svg");
  width: 20px;
  height: 20px;
  background-position: 0px -367px;
  display: inline-block;
}
//指令按钮
.mapList_zhiling_sprites{
  background-image: url("../images/sprites/sprites_map.svg");
  width: 20px;
  height: 20px;
  background-position: 0px -457px;
  display: inline-block;
}
//详情按钮
.mapList_xiangqing_sprites{
  background-image: url("../images/sprites/sprites_map.svg");
  width: 20px;
  height: 20px;
  background-position: 0px -517px;
  display: inline-block;
}
//转移按钮
.mapList_zhuanyi_sprites{
  background-image: url("../images/sprites/sprites_map.svg");
  width: 20px;
  height: 20px;
  background-position: 0px -697px;
  display: inline-block;
}
//报表按钮
.mapList_baobiao_sprites{
  background-image: url("../images/sprites/sprites_map.svg");
  width: 20px;
  height: 20px;
  background-position: 0px -727px;
  display: inline-block;
}
//收缩按钮
.mapList_shousuo_sprites{
  background-image: url("../images/sprites/sprites_map.svg");
  width: 20px;
  height: 20px;
  background-position: 0px -547px;
  display: inline-block;
}
//展开按钮
.mapList_zhankai_sprites{
  background-image: url("../images/sprites/sprites_map.svg");
  width: 20px;
  height: 20px;
  background-position: 0px -577px;
  display: inline-block;
}
//添加按钮
.mapList_tianjia_sprites{
  background-image: url("../images/sprites/sprites_map.svg");
  width: 20px;
  height: 20px;
  background-position: 0px -667px;
  display: inline-block;
}
.mapList_tianjia_sprites:hover{
  opacity: 0.5;
}
//显示设备名按钮
.mapList_xianshi_sprites{
  background-image: url("../images/sprites/sprites_map.svg");
  width: 20px;
  height: 20px;
  background-position: 0px -607px;
  display: inline-block;
}
//已显示设备名按钮
.mapList_yixianshi_sprites{
  background-image: url("../images/sprites/sprites_map.svg");
  width: 20px;
  height: 20px;
  background-position: 0px -637px;
  display: inline-block;
}