.border{border: 1px solid #ddd;}
.color-333{color: #333;}
.color-666{color: #666;}
.color-999{color: #999;}
.color-fff{color: #fff;}
.color-red{color: red;}
.color-green{color: #1ec659;}
.color-24bafc{color: #24bafc;}

//margin,padding
@for $i from 0 through 101{
  .margin-right-#{$i}{
    margin-right: #{$i}px;
  }
  .margin-left-#{$i}{
    margin-left: #{$i}px;
  }
  .margin-top-#{$i}{
    margin-top: #{$i}px;
  }
  .margin-bottom-#{$i}{
    margin-bottom: #{$i}px;
  }
  .margin-#{$i}{
    margin: #{$i}px;
  }
  .padding-#{$i}{
    padding: #{$i}px;
  }
  .padding-right-#{$i}{
    padding-right: #{$i}px;
  }
  .padding-left-#{$i}{
    padding-left: #{$i}px;
  }
  .padding-top-#{$i}{
    padding-top: #{$i}px;
  }
  .padding-bottom-#{$i}{
    padding-bottom: #{$i}px;
  }
}

//margin,padding
@for $i from 0 through 51{
  @for $j from 0 through 51{
    .margin-#{$i}-#{$j}{
      margin: #{$i}px #{$j}px ;
    }
    .padding-#{$i}-#{$j}{
      padding: #{$i}px #{$j}px ;
    }
  }
}

//flex布局
.flex{
  display: flex;
}
@for $j from 1 to 25{
  .flex-#{$j}{
    flex: #{$j};
  }
}

//UI框架





.container {
  height: 100%;
  padding: 0 16px 16px;
}

nz-header {
  padding: 0 16px;
}



//自己写的
//主机详情
.host-item-title {
  padding: 10px 15px;
  height: 50px;
  line-height: 30px;
}

.database-name {
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 12px;
}

.host-item-content {
  padding: 10px;
  height: 400px;
  position: relative;

  nz-row {
    nz-col:nth-child(2n +1) {
      text-align: right;
      margin-bottom: 10px;
    }

    nz-col:nth-child(2n) {
      text-align: left;
      margin-bottom: 10px;
    }
  }
}

.host-item-table {
  padding: 10px;
  height: 400px;

  nz-col {
    padding:6px 10px;
    word-break: break-all;
  }

  .table-title {
    nz-col {
      border: 1px solid #597cb5;
    }
  }

  .table-content {
    border-bottom: 1px solid #597cb5;
  }
}

.dataChart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  font-size: 12px;
  p {
    margin-bottom: 10px;
  }

  p:nth-child(2n) {
    text-align: right;
    border-bottom: 1px solid #b7d1f1;
  }

  p:nth-child(2n +1) {
    text-align: left;
  }
}

.time-group {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 9;
}

.width-host {
  position: relative;
  width: 80%;
  margin: 0 auto;
  height: 23px;
  .space{
    height: 23px;
    transition: all 500ms;
  }
}
