body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: rgba(0,0,0,0);
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

#root {
  position: relative;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.logo-height {
  height: 2rem;
}

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.main-alarm {
  position: absolute;
  left: 0;
  top: 20%;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999999;
}

.main-alarm-body {
  width: 60%;
  height: 70%;
  background: #fff;
}

.logo-height {
  height: 2rem;
}

#mainbox {
  overflow: scroll;
}


.main {
  margin: .5rem;
}

.header-right {
  display: flex;
  flex-direction: row-reverse;
  flex: 0 1 100%;
}

.header-x {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 1.25rem;
  width: 8rem;
  max-width: 12rem;
  text-align: right;
  color: #fff;
  
}

.header-x-sub {
  cursor: pointer;
  font-size: 1rem;
}

.header-org {
  display: flex;
  flex: 0 1 50%;
  color: #fff;
  align-items: center;
  justify-content: flex-end;
  color: #36CFC9;
}

.logo {
  width: 8rem;
  height: 32px;
  margin-top: .5rem;
  margin-left: 3rem;
}

.logo-img {
  height: 75%;
  margin-top: .1rem;
}

.i-header {
  position: relative;
  display: flex;
  background: #2F4050;
}

.logo-text {
  margin-left: 1rem;
  font-size: 1.5rem;
  height: 42px;
  flex: 0 1 0;
  width: 50%;
  line-height: 42px;
  color: #fff;
  overflow: hidden;
}

.full-width {
  width: 100%;
}

#sider_ {
  overflow: hidden;
}

.sider {
  position: relative;
  max-height: 95%;
  overflow: auto;
}

.sider-copyright {
  position: absolute;
  bottom: 5px;
  left: 10px;
  color: rgba(250,250,250,.5);
  font-size: .75rem;
}

::-webkit-scrollbar {  /*隐藏滚轮*/
  display: none;
  background: transparent;
  scrollbar-width: none;
  width: 0;
}


.login-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #356DAB, #2BAD86);
}

.login-logo {
  position: absolute;
  top: 2rem;
  left: 2rem;
}

.login {
  position: absolute;
  top: 40%;
  left: 50%;
  margin-left: -14rem;
  margin-top: -15rem;
  padding: .5rem 0 0;
  height: 28rem;
  width: 30rem;
  background-color: rgba(255,255,255,0);
  border-radius: .5rem;
}

.login-alt {
  position: absolute;
  top: 45%;
  left: 50%;
  margin-left: -14rem;
  margin-top: -12rem;
  padding: 2rem 2rem 2.5rem;
  height: 26rem;
  width: 28rem;
  background-color: rgba(255,255,255,.5);
  border-radius: .5rem;
}

.login-sub {
  height: 5rem;
  text-align: center;
  color: #073562;
  font: bolder 2rem/5rem 'Microsoft YaHei';
  margin-bottom: 7.5rem;
}

.login-sub-alt {
  height: 2rem;
  text-align: center;
  color: #073562;
  font: bolder 1.5rem/2rem 'Microsoft YaHei';
  margin-bottom: 1rem;
}

.product {
  padding: 2rem;
  position: relative;
}

.product-plus {
  position: absolute;
  top: 1.5rem;
  right: 3rem;
  background: #36cfc9;
  border-radius: 4rem;
  width: 4rem;
  height: 4rem;
  line-height: 3.5rem;
  text-align: center;
  color: #fff;
  font-size: 3rem;
  cursor: pointer;
  box-shadow: .125rem .125rem .25rem .25rem #ddd;
  text-decoration: none;
}

.product-back {
  padding-top: .75rem;
  left: 3rem;
  font-size: 2.5rem;
  line-height: 2.5rem;
}

.product-button {
  margin-left: 1rem;
}

.table-title {
  padding-left: 2rem;
  height: 3rem;
  line-height: 3rem;
  font-size: 1.5rem;
  background-color: #fff;
  border-left: solid .25rem #36cfc9;
  box-shadow: .1rem .1rem .2rem .2rem #ddd;
}

.table-title-close {
  float: right;
  margin-top: .75rem;
  margin-right: 1rem;
  color: #36cfc9;
}

.index-panel{
  box-sizing: border-box;
  height: 100%;
  margin: 0 .25rem;
  background: #fff;
  border-top: solid 2px #52B791;
  box-shadow: 0 .1rem .2rem .05rem #cce;
}

.index-panel-alt{
  box-sizing: border-box;
  height: 100%;
  margin: 0 .25rem;
  background: #fff;
  box-shadow: 0 0 .2rem .05rem #cce;
}

.index-title {
  padding-left: '1rem';
  height: '2.5rem';
  font: 'bolder 1rem/2.5rem "Microsoft YaHei"'; 
  color: '#888';
}

.index-datepicker {
  height: 3rem;
  margin-top: .5rem;
}

.index-count {
  flex: 0 1 33%;
  background: #58AFFF;
  color: #fff;
  text-align: center;
}

.index-panel-item {
  box-sizing: border-box;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}

.index-count-value {
  height: 6rem;
  font: bolder 2rem/6rem 'Microsoft YaHei';
}

.index-count-name {
  height: 2rem;
  font: bolder 1rem/2rem 'Microsoft YaHei';
  margin-bottom: 1.5rem;
}

.count-panel-sub {
  margin: 17.5% auto 0;
  padding: 2rem 1.5rem;
  background-color: #fff;
  height: 15rem;
  width: 100%;
  border-radius: .25rem;
  box-shadow: .1rem .1rem .75rem .25rem #ddf; 
  overflow: hidden;
  border-left: solid .5rem #36cfc9;
}

.count-panel-item {
  text-align: center;
  font-size: 1.25rem;
  height: 3rem;
  line-height: 3rem;
}

.count-panel-title {
  margin: 2rem 0 0 2rem;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 1.5rem;
}

.count-panel-sub-alt {
  padding: 0;
}

.date-picker {
  position: absolute;
  left: .5rem;
  top: .5rem;
  width: 8rem;
}



.user-avatar {
  border-radius: 50%;
}

.user-title {
  padding-left: .5rem;
  height: 2.25rem;
  font: bolder 1rem/2.25rem arial;
  color: #1C4A73;
  background-color: #fff;
  border-left: solid .5rem #5786B1;
}

.user-back {
  float: right;
  padding-right: .75rem;
  border: none;
  text-align: center;
  color: #5786B1;
  font: 1.5rem/2.25rem arial;
  background-color: #fff;
  cursor: pointer;
}

.search-box {
  box-sizing: border-box;
  padding-left: 1rem;
  margin: 0 .2rem;
  line-height: 3.75rem;
  background-color: #fff;
  border-top: solid 2px #52B791;
  border-left: solid 1px #cce;
  border-right: solid 1px #cce; 
  border-bottom: solid 1px #e2e2e2;
           
}

.search-box-alt {
  margin-top: 1rem;
}

.search-box-bar {
  width: 100%;
  height: 3.75rem;
  text-align: right;
  line-height: 3.75rem;
  display: flex; 
  justify-content: flex-end;
  align-items: center;
}

.edit {
  margin: 0 auto;
  padding: 1rem;
  background-color: #fff;
  border-radius: .25rem;
}

.edit_ {
  margin: 0 auto;
  height: calc(100vh - 60px);
  overflow: scroll;
}

.edit-form {
  box-sizing: border-box;
  position: relative;
  margin: 0 .25rem;
  padding: 3rem 0 2rem;
  background-color: #fff;
  border-top: solid 2px #36CFC9;
  box-shadow: 0 .1rem .2rem .05rem #cce;
}

.table {
  box-sizing: border-box;
  background-color: #fff; 
  border-left: solid 1px #cce;
  border-right: solid 1px #cce;
  border-bottom: solid 1px #cce;
}

.table-alt {
  border-left: none;
  border-right: none;
  border-bottom: none;
}

.table-sub {
  box-sizing: border-box;
  margin: 0 .5rem;
}

.concern-device {
  height: 50%;
}

.report-card-content-sub {
  width: 100%;
  height: 10rem;
}

.thead {
  padding-left: 1rem;
  background-color: #E3E8EC;
  height: 2rem;
  border: solid 1px #fff;
}

.tcell {
  padding-left: 1rem;
  background-color: #fff;
  height: 2rem;
  border: solid 1px #fff;
}


.tcell-dark {
  padding-left: 1rem;
  background-color: #F3F3F3;
  height: 2rem;
  border: solid 1px #fff;
}

.article {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.article-item {
  flex: 0 0 50%;
  background-color: #fff;
}

.article-item-title {
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  font-size: 1.5rem;
}

.article-item-body {
  width: 100%;
  height: 10rem;
}

.report {
  position: 'relative';
  background:'#fff';
  overflow: auto;
}

.report-header-tab {
  height: 3rem;
  line-height: 3rem;
}

.report-date {
  height: 2rem;
  line-height: '2rem';
  text-align: center;
  font: bolder 1.25rem/3rem "PingFangSC-Regular";
}

.realtime {
  margin: 0 .2rem;
  height: 100%;
  width: 100%;
  background: #fff;
  overflow: hidden;
  border: solid 1px #ddf;
  border-top: solid 2px #52B791;
}

.real-infobox {
  width: 20rem;
  overflow: hidden;
}

.real-info-bar {
  box-sizing: border-box;
  margin-top: .5rem;
  display: flex;
  height: 2rem;
}

.real-info-left {
  flex: 0 1 40%;
  text-align: right;
  margin-right: .275rem;
  overflow: hidden;
  height: 2rem;
  font: bolder 1rem/2rem "Microsoft YaHei";
  color: #B3B7BA;
}

.real-info {
  flex: 0 1 40%;
  text-align: left;
  margin-left: .275rem;
  overflow: hidden;
  height: 2rem;
  font: bolder 1rem/2rem "Microsoft YaHei";
  color: #B3B7BA;
}

.real-rate-left {
  width:10rem;
  float: left;
  height: 3rem;
  margin-left: 1rem; 
  font: bolder 1rem/3rem "Microsoft YaHei";
  color: #B3B7BA;
}

.real-rate {
  width: 5rem;
  float: left;
  height: 3rem;
  font: bolder 1rem/3rem "Microsoft YaHei";
  color: #17d292;
}

.real-rate-rr {
  color: #29b6f4;
}

.list-detail {
  width: 100%;
  display: flex;
}

.real-box {
  display: flex;
}

.real-rate-bar, .real-rate-chart {
  display: flex;
  flex: 0 1 100%;
}


.list-detail-item {
  flex: 0 1 33%;
}

.template {
  position: absolute;
  right: 3rem;
  top: 0;
  box-shadow: .1rem .1rem .1rem .1rem #dde;
}

.chartRef {
  overflow: auto;
  background: #fff;
}

.upfile-div {
  position: relative;
  margin-top: .25rem;
  width: 100%;
  height: 2rem; 
}

.upfile {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 2rem;
  opacity: 0;
}

.upfile-btn {
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  color: #667;
  border: solid 1px #ccd;
  border-radius: .25rem;
  text-indent: .75rem;
  overflow: hidden;
}

.chartInfo {
  display: flex;
  height: 1.5rem;
  line-height: 1.5rem;
  width: 100%;
}

.echart {
  width: 100%;
  height: 225px;

}

.chartbox {
  padding: 1rem 0;
  background: #fff;
  border-radius: .25rem;
  box-shadow: #dde .15rem .15rem .1rem .1rem;
}

.role_check {
  margin-left: 1rem;
}

.form-title {
  height: 2rem;
  text-align: center; 
  color: #fff;
  font: bolder 1rem/2rem "Microsoft YaHei";
  background: linear-gradient(45deg, #86B1D8, #83AC65);
  border-radius: .25rem .25rem 0 0;
}

.reset-default {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(225,225,225,0.25);
}

.footer {
  position: absolute;
  left: 0;
  bottom: 2.5%;
  color: #fff;
  font-size: .8rem;
  width: 100%;
  text-align: center;
}

.main-footer {
  position: fixed;
  right: 1rem;
  bottom: .25rem;
  color: rgba(100,100,100,.5);
  font-size: .8rem;
  text-align: right;
}

.navibar {
  box-sizing: border-box;
  width: 100%;
  height: 2rem;
  margin: 0;
  display: flex;
}

.navibar-tab {
  flex: 0 1 12.5%;
  background: #fff;
  height: 2rem;
  line-height: 2rem;
  display: flex;
  border-top-left-radius: .25rem;
  border-top-right-radius: .75rem;
  border: solid 1px #ccc;
  border-bottom: none;
}

.navibar-title {
  flex: 0 1 85%;
  padding-left: .75rem;
  font-weight: bolder;
  cursor: pointer;
}

.navibar-close {
  flex: 0 1 15%;
  text-align: right;
  padding-right: .75rem;
  font-weight: bolder;
  cursor: pointer;
}

.tab-select {
  background: #52B791;
  color: #fff;
}

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.ant-menu-item > a:hover {
  color: #52B791;
}

.ant-menu-item:hover,
.ant-menu-item-active,
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
.ant-menu-submenu-active,
.ant-menu-submenu-title:hover {
  color: #52B791;
}
.ant-menu-horizontal .ant-menu-item,
.ant-menu-horizontal .ant-menu-submenu {
  margin-top: -1px;
}
.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-item-active,
.ant-menu-horizontal > .ant-menu-submenu .ant-menu-submenu-title:hover {
  background-color: transparent;
}
.ant-menu-item-selected {
  color: #52B791;
}
.ant-menu-item-selected > a,
.ant-menu-item-selected > a:hover {
  color: #52B791;
}

.ant-menu.ant-menu-dark .ant-menu-item-selected,
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
  background-color: #52B791;
}

.test-main {
  background: #fff;
  height: 100%;
  margin-left: .15rem;
  padding-top: .5rem;
  border: solid 1px #ddf;
  border-top: solid 2px #52B58F;
}

.test-form {
  border-bottom: solid 1px #ddf;
}

.test-box {
  margin: 0 auto;
  width: 90%;
}

.test-title {
  text-align: left;
  font: bolder 1rem/2rem "Microsoft YaHei";
}

.test-content {
  text-align: left;
  padding: .75rem;
  width: 100%;
  overflow-y: auto;
  height: 20rem;
  background: #eef;
}

.user-table > div > div > div > div > div > table > tbody > tr > td {
  padding: 8px 16px;
}

.report_switch {
  background: #36CFC9
  
}

.real-title {
  position: relative;
  height: 3.5rem;
  font: bolder 1.5rem/3.5rem "Microsoft YaHei";
  color: #55667A;
  text-align: center;
  border-bottom: solid 1px #ddf;
}

.real-mac {
  position: absolute;
  top: .5rem;
  left: 1rem;
  font: bolder 1.25rem/2.5rem "Microsoft YaHei";
  color: #9E9A9B;
}

.import-msg {
  height: 3rem;
  font: 1.1rem/3rem "Microsoft YaHei";
}

.chartInfo {
  margin: .5rem auto;
  display: flex;
  height: 3rem;
  width: 100%;
  background: #F1F0F5;
  border-radius: .5rem;
  overflow: hidden;
}

.chartInfo-item {
  flex: 0 1 25%; 
  padding-left: 1rem;
  text-align: left;
  font: .9rem/3rem "Microsoft YaHei";
  color: #4A5A6A;
  overflow: hidden;
}

.chartInfo-value {
  font: bolder 1.1rem "Microsoft YaHei";
  color: #4A5A6A;
}

.dateItem {
  height: 2.5rem;
  width: 2rem;
}

.dateItem-date {
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  font: bolder 1rem/2rem "Microsoft YaHei";
  color: #979CC2;
  cursor: pointer; 
}

.dateItem-dot {
  margin: .15rem auto 0;
  width: .35rem;
  height: .35rem;
  background: #C3C5DE;
  border-radius: 50%;
}

.ant-calendar-selected-day > .dateItem > .dateItem-date {
  background: #40A9FC;
  color: #fff;
}

.ant-calendar-selected-day > .dateItem > .dateItem-dot {

}

.ant-calendar-last-month-cell > .dateItem > .dateItem-date,
.ant-calendar-next-month-btn-day > .dateItem > .dateItem-date {
  color: #C0C0D0;
}

.ant-calendar-disabled-cell > .dateItem > .dateItem-date {
  color: #E2E1F1;
  cursor: default; 
}

.ant-calendar-disabled-cell > .dateItem > .dateItem-dot {
  background: #ffffff;
  border-radius: none;
}

.online {
  color: #17d292;
}

.offline {
  color: #777;
}

.now-date {
  float: right;
  font: bolder 1.25rem/3rem "Microsoft YaHei";
  margin-right: .5rem;
}

.ant-drawer-header {
  background: #2F4050;
  border-bottom: none;
}

#sider-btn {
  display: none;
}

.login-img {
  height: 3rem;
}

.index-date-picker-mobile {
  display: none;
}

.user-search-mobile {
  display: none;
}

.user-table-mobile {
  display: none;
}

.loading-page {
  text-align: center;
  background: rgba(0,0,0,.08);
  width: 100%;
  height: 100%;
}

.mobile-style {
  display: none;
}

.main-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
}

.main-loading-img {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 15rem;
  height: 15rem;
  margin-left: -7.5rem;
  margin-top: -7.5rem;
  z-index: 9999;
}

.search-device {
  border: none; 
  border-bottom: solid 1px #e2e2e2;  
}

.online-dot {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: #53B791;
  margin: .45rem .2rem 0 0;
  float: left;
}

.offline-dot {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: #aaa;
  margin: .45rem .2rem 0 0;
  float: left;
}

.import-input {
  display: none;
}

.ant-calendar-picker-input, .ant-calendar-picker .ant-calendar-picker-input {
  border-width: 0px;
  border: none; 
  outline: none;
}

.ant-calendar-picker-icon {
  font-size: 1.25rem;
}

@media screen and (max-width: 768px) {
  #sider {
    display: none;
  }
  
  #sider-btn {
    display: block;
    position: absolute;
    top: .8rem;
    left: .75rem; 
    font-size: 1.5rem;
  }

  .login {
    position: absolute;
    top: 10%;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    padding: 0;
    width: 100%;
    background-color: rgba(255,255,255,0);
  }

  .login-logo {
    position: absolute;
    top: 10%;
    left: 50%;
    width: 10rem;
    margin-left: -6rem;
  }

  .login-img { width: 12rem; }

  .login-sub {
    position: absolute;
    top: 17.5%;
    left: 0;
    height: 5rem;
    width: 100%;
    text-align: center;
    color: #073562;
    font: bolder 1.8rem/5rem 'Microsoft YaHei';
  }
  
  .login-form {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    text-align: center;
  }

  .login-input {
    width: 100%;
  }

  .navibar { 
    display: none;
  }

  .index-panel{
    box-sizing: border-box;
    border-top: none;
  }

  .index-date-picker {
    display: none;
  }

  .index-date-picker-mobile {
    display: block;
  }

  .user-search-mobile {
    display: block;
    line-height: 3.5rem;
    margin-bottom: .5rem;
  }


  .search-box {
    border-top: 1px solid #ddf;
    line-height: 3rem;
  }

  .user-table {
    display: none;
  }

  .user-table-mobile {
    display: block;
  }

  .chartInfo-item {
    flex: 0 0 50%; 
    padding-left: .5rem;
  }

  .chartInfo-value {
    font: bolder 1rem "Microsoft YaHei";
  }

  .main {
    margin: .5rem 0;
  }

  .mobile-style {
    display: block;
  }

  .normal-style {
    display: none;
  }

  .ant-drawer-close {
    color: #fff;
  }

  .chartInfo-item-mobile {
    padding-left: .5rem;
    font: .9rem/1.5rem "Microsoft YaHei";
  }

  .chartInfo-box {
    margin: .5rem 0;
    padding: .5rem;
    background: #F1F0F5;
  }

  .chartInfo-box-alt {
    display: flex;
    margin: .2rem 0;
    background: #F1F0F5;
  }

  .test-form {
    display: none;
  }

  html, body {
    font-size: 14px;
  }
  
  .test-label {
    font: bolder 1rem/2rem "Microsoft YaHei";
    text-align: left;
    margin-left: 8.25%;
  }

  .test-main {
    border: none;
  }

  .ant-dropdown-link {
    font: 1.1rem/2.25rem "Microsoft YaHei";
  }

  .device-operate {
    width: 49.5%;
    float: left;
  }

  .template {
    right: 0;
    top: 0;
    box-shadow: .1rem .1rem .1rem .1rem #dde;
  }

  .import-input {
    display: block;
    margin-top: 3rem;
  }

  .edit-form {
    position: relative;
    padding: 3rem 0 2rem;
    box-shadow: none;
  }



  .ant-table-tbody>tr>td, .ant-table-thead>tr>th {
    padding: 10px;
  }

  .search-box-bar {
    justify-content: flex-start;
  }

}  

.ecc-header {
  box-sizing: border-box;
  height: 2.5rem;
  font: bold .9rem/1.5rem "Arial";
  padding: .5rem;
}

.ecc-sep-line {
  color: #ddd;
  height: 0;
  border: none;
  border-top: solid 1px #ddd;
}

.ecc-amount {
  color: #2BAD86;
  font-size: 1.2rem;
}

.ecc-list {
  box-sizing: border-box;
  padding: .5rem;
}

.ecc-down {
  font-size: 1rem;
  width: 25%;
  cursor: pointer;
  border: solid 1px #52B58F;
  border-radius: .25rem;
  margin: 0 auto;
  text-align: center;
  color: #52B58F;
  overflow: hidden;
}


.update-box {
  box-sizing: border-box;
  margin-top: .5rem;
  line-height: 4.5rem;
  background-color: #fff;
  /*border-top: solid 2px #52B791;*/
  border: solid 1px #cce;
  /*border-right: solid 1px #cce; */
  /*border-bottom: solid 1px #cce;*/              
}

.update-box-alt {
  border-top: solid 2px #52B791;
}

.app-title {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: .5rem;
  font-weight: bold;
  font-size: 1.25rem;
}

.icon-ios {
  width: 1.75rem;
  height: 1.75rem;
  background-image: url(/ios.svg);
  background-size: 100% 100%;
}

.icon-android {
  background-image: url(/android.svg)
}

.card-item {
  display: flex;
  overflow: hidden;
}

.card-item-left {
  padding-right: .5rem;
  width: 6rem;
  text-align: right;
}

.card-item-right {
  flex: 50%;
  text-align: left;
}

.org-search {
  width: 150px;
  margin-right: 1rem;
  text-align: left;
}

.index-alarm {
  position: absolute;
  top: 50%;
  right: .375rem;
  width: 20rem;
  height: 24rem;
  margin-top: -8rem;
  background-color: #F3FFFD;
  border-radius: .25rem;
  box-shadow: 0 0 .375rem .25rem #dcdcdc;
  z-index: 999;
}

.index-alarm-alt {
  box-sizing: border-box;
  width: 3rem;
  height: 3rem;
  margin-top: -8.5rem;
  padding: .25rem;
  background: rgba(0,0,0,0);
  box-shadow: none;
}

.index-alarm-head {
  width: 100%;
  height: 2rem;
  display: flex;
  border-bottom: solid 1px rgba(0,0,0,.15);
}

.index-alarm-head-icon-l, .index-alarm-head-icon-r {
  width: 2rem;
  height: 2rem;
  padding: .5rem;
}

.index-alarm-head-text {
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  font: bold 1rem/2rem "Microsoft YaHei";
}

.index-alarm-icon {
  position: relative;
  box-sizing: border-box;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #0BB78F;
  box-shadow: 0 0 .35rem .12rem #ccc;
  padding: .6rem .75rem .9rem;
}

.index-alarm-red {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background-color: #FB474E;
  color: #fff;
  line-height: 1.1rem;
  font-size: .7rem;
  text-align: center;
}

.index-icon {
   color: #2F404F;
   cursor: pointer;
}

.index-alarm-body {
  width: 100%;
  height: 90%;
  overflow: auto;
  padding: .5rem;
}

.index-alarm-item {
  width: 100%;
  height: 1.75rem;
  display: flex;
}

.index-alarm-item:hover {
  /*background-image: linear-gradient(135deg, rgba(90,128,252,.95), rgba(98,207,137,.95));*/
  background-color: #ffce3a;
}

.index-alarm-item-l {
  flex: 0 1 22.5%;
  color: #4f4141;
  font: .75rem/1.75rem "Microsoft YaHei";
  overflow: hidden;
  text-overflow: ellipsis;
}

.index-alarm-item-m1 {
  flex: 0 1 21%;
  color: #4f4141;
  font: .75rem/1.75rem "Microsoft YaHei";
  overflow: hidden;
  text-overflow: ellipsis;
}

.index-alarm-item-m2 {
  flex: 0 1 37.5%;
  color: #FB474E;
  font: .75rem/1.75rem "Microsoft YaHei";
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 .2rem;
}

.index-alarm-item-r {
  flex: 0 1 19%;
  color: #008AFF;
  font: .75rem/1.75rem "Microsoft YaHei";
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  text-align: center;
}

.alarm-float {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.alarm-float-body {
  position: relative;
  width: 88%;
  height: 85%;
  background-image: linear-gradient(45deg, #fbfbfb, #e0e0e0);
  border-radius: .25rem;
  padding: 2rem 1.5rem 1.5rem;
}

.alarm-float-x {
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
  height: 2rem;
  padding: .5rem;
  cursor: pointer;
}

.alarm-float-bar {
  width: 100%;
  height: 2.5rem;
  background: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.alarm-float-bar-text {
  width: 10rem;
  height: 2rem;
  font: bold 1rem/2rem "Microsoft YaHei";
  padding-left: 1rem;
}

.alarm-float-bar-search {
  width: 100%;
  height: 2rem;
}

.alarm-float-list {
  width: 100%;
  height: 90.5%;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  margin-top: 1rem;
  align-content: flex-start;
}

.alarm-float-item {
  width: 8.5rem;
  height: 13.5rem;
  padding: .75rem .5rem;
}

.alarm-float-item-sub_ {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: .25rem;
  box-shadow: 0 0 .25rem .1rem #ddd;
}

.alarm-float-item-sub {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: .25rem;
  box-shadow: 0 0 .25rem .1rem #ddd;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-name: blinkblink;
  animation-name: blinkblink;
  animation-iteration-count: infinite;
}

@keyframes blinkblink {
  25% {
    box-shadow: 0 0 .375rem .1rem #FB474E;
  }
  50% {
    box-shadow: 0 0 .375rem .1rem #ddd;
  }
  75% {
    box-shadow: 0 0 .375rem .1rem #FB474E;
  }
  100% {
    box-shadow: 0 0 .375rem .1rem #ddd;
  }
}

.alarm-float-pic {
  box-sizing: border-box;
  width: 7.5rem;
  height: 6rem;
  padding: .5rem 1.25rem;
}

.alarm-float-pic-pic {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.alarm-float-name {
  width: 100%;
  height: 1.75rem;
  font: bold 1rem/1.75rem "Microsoft YaHei";
  text-align: center;
  color: #202B36;
}

.alarm-float-mac {
  width: 100%;
  height: 1.25rem;
  font: bold .75rem/1.25rem "Microsoft YaHei";
  text-align: center;
  color: #6C757E;
}

.alarm-float-val {
  width: 100%;
  height: 3rem;
  color: #202B36;
}

.alarm-float-val-upper {
  width: 100%;
  height: 1.5rem;
  font: 1rem/1.5rem "Microsoft YaHei";
  text-align: center;
  display:flex;
  align-items: center;
}

.alarm-float-val-hr {
  width: 50%;
  display: flex;
  align-items: center;
}

.alarm-float-val-hr-icon {
  width: 2rem;
  height: 1.5rem;
  padding: .25rem .5rem .25rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.alarm-float-val-text {
  font: bold .9rem/1.5rem "Microsoft YaHei";
  text-align: center;
  color: #555;
}

.alarm-float-val-text-alt {
  font: bold .9rem/1.5rem "Microsoft YaHei";
  text-align: center;
  color: FB474E;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-name: blinktext;
  animation-name: blinktext;
  animation-iteration-count: infinite;
}

@keyframes blinktext {
  25% {
    color: #FB474E;
  }
  50% {
    color: #fff;
  }
  75% {
    color: #FB474E;
  }
  100% {
    color: #fff;
  }
}

.alarm-float-val-lower {
  width: 100%;
  height: 1.5rem;
  font: bold .9rem/1.5rem "Microsoft YaHei";
  border-top: solid 1px #ddd;
  text-align: center;
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.alarm-float-val-lower-icon {
  width: 1rem;
  height: 1rem;
  margin-right: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.alarm-search {
  border: none;
}

.full-img {
  width: 100;
  height: 100%;
}


.ant-select-selection-selected-value {
  width: 100%;
}

.login-item {
  width: 100%;
  height: 3rem;
  box-sizing: border-box;
  padding: .25rem 18%;
}

.login-item-sub {
  width: 100%;
  height: 100%;
  background-color: #fff;
  text-align: center;
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  border-radius: .25rem;
  box-sizing: border-box;
  padding: 0 .5rem;
  border: solid 1px rgba(0,0,0,0);
}

.login-item-sub:hover {
  border: solid 1px #008AFF;
}

.login-item-msg {
  width: 100%;
  height: 1rem;
  padding: 0 18%;
  line-height: 1rem;
  color: #FB474E;
  font-size: .8rem;
}

.login-input-item {
  width: 100%;
  margin: 0 .5rem;
  font-variant: tabular-nums;
  list-style: none;
  display: inline-block;
  line-height: 1.5;
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  transition: all .3s;
  border: none;
}


.login-submit {
  width: 100%;
  height: 2.5rem;
  border-radius: .25rem;
  background: #008AFF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.login-message {
  position: fixed;
  top: 2rem;
  left: 50%;
  width: 12rem;
  line-height: 2rem;
  padding: .5rem;
  margin-left: -6rem;
  background: rgba(225,225,225,.75);
  box-shadow: 0 0 .15rem .05rem rgba(128, 128 , 128, .35);
  color: #222;
  display: none;
  z-index: 999;
  text-align: center; 
  border-radius: .25rem;
}

.device-alarm {
  width: 50%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.device-alarm-item {
  flex: 0 0 100%;
  height: 3rem;
  display: flex;
}

.device-alarm-label {
  flex: 0 0 40%;
  height: 3rem;
  line-height: 3rem;
  overflow: hidden;
}

.device-alarm-value {
  flex: 0 0 60%;
  height: 3rem;
  line-height: 3rem;
  align-items: center;
}

th.my-table-head {
  background-color: #fff !important;
  color: #4f6a92 !important;
  font-weight: 600 !important;
}

.ant-table-expand-icon-th {
  background-color: #fff !important;
}