@import '../../../style/default.scss';

$firmBlue: #00AEEA;
$firmGreen: #5daf33;
$firmFontGray: #999999;
$firmIcon: #737272;
$firmFontBlack: #222222;
$firmBackGray: #dbd8d8;
$firmBackColor: #f1f1f1;
$firmLineGray: #aaaaaa;
$firmOtherRed: #f75a5a;
$firmOtherGreen: #1cc262;
$firmOtherBlue: #d7efff;
$firmOtherOrange: #faa44f;
html, body {
  background: $firmBackColor;
}

#QueryOrderList {
  width: 100%;
  position: absolute;
  top: 45px;
  bottom: 0;
  height: auto;
  .right-icon {
    position: fixed;
    top: 22.5px;
    color: #309FEA;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: pxToRem(30);
    font-size: 15px;
    text-align: right;
    z-index: 1000;
  }
}

.right-icon {
  position: fixed;
  top: 22.5px;
  color: #309FEA;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: pxToRem(30);
  font-size: 15px;
  text-align: right;
  z-index: 1000;
  img {
    position: absolute;
    width: pxToRem(30);
  }
}

#wrapper {
  position: absolute;
  width: 100%;
  bottom: 0;
  top: 0;
  height: auto;
}

.wrapperShadow {
  position: absolute;
  width: 100%;
  bottom: 0;
  top: 0;
  height: auto;
  opacity: 0.45;
  background-color: rgba(16, 16, 16, 1);
  box-shadow: 0px 0px 1px 0px rgba(170, 170, 170, 1);
}

.orderContent {
  width: auto;
  margin-top: pxToRem(15);;
  padding: 0 pxToRem(30);;
  background: #fff;
}

.orderContent-header {
  height: size(38.5);
  font-size: pxToRem(26);
  border-bottom: 1px solid #d8d8d8;
  .currencyPairs, .date {
    height: size(15);
    line-height: size(38.5);
    color: $firmFontBlack;
  }
  .currencyPairs {
    width: 50%;
    float: left;
    font-size: pxToRem(30);
  }
  .date {
    width: 45%;
    float: right;
    text-align: right;
    // padding-right: size(20)
  }
}

.orderContent-info {
  padding-bottom: size(15);
  overflow: hidden;
  .coin-cp, .coin-type, .sell-or-buy, .order-amount, .order-state, .coin-flag {
    float: left;
    width: 50%;
    margin-top: size(10);
    .label {
      font-size: pxToRem(26);
      float: left;
      color: $firmFontGray;
    }
    .state {
      color: $firmOtherRed;
    }
    .type, .sell-buy, .amount, .flag, .cp, .state {
      font-size: pxToRem(26);
      color: $firmFontBlack;
      float: left;
    }
  }

}

.nodata-content {
  img {
    width: 20%;
    margin-left: 40%;
    margin-top: 40%;
  }
  .nodata-instruction {
    text-align: center;
    margin-top: size(10);
    font-size: pxToRem(34);
  }
}