@import '../../../style/default.scss';
$firmBlue: #00AEEA;
$firmGreen: #5daf33;
$firmFontGray: #898888;
$firmIcon: #737272;
$firmFontBlack: #2e2e2e;
$firmBackGray: #dbd8d8;
$firmBackColor: #f1f1f1;
$firmLineGray: #aaaaaa;
$firmOtherRed: #f75a5a;
$firmOtherGreen: #1cc262;
$firmOtherBlue: #d7efff;
$firmOtherOrange: #faa44f;
html,body{
    background: $firmBackColor;
}
.quotation-container{
    border-top: 1px solid $firmLineGray;
}
.quotation-box {
    // padding-top: size(90);
    background: $firmBackColor;
}
.trade-price {
    height: size(60);
    background: #fff;
    border-top: 2px solid #CDCDCD;
    border-bottom: 1px solid #CDCDCD;
    padding: 0 size(10);
    .coin-cp {
        width: 25%;
        float: left;
        height: size(32);
        margin-top: size(15);
        margin-right: 13%;
        font-weight: bold;
    }
}
.coin-cp .cp {
    text-align: left;
    font-size: pxToRem(36);
    color: $firmFontBlack;
}
.coin-cp .time {
    font-size: pxToRem(24);
    text-align: left;
    // line-height: 1.2;
    color: #898888;
}

.details {
    background: #fff;
    padding: size(15) size(10);
    div {
        overflow: hidden;
    }
}
.left {
    width: 30%;
    float: left;
    text-align: left;
    height: size(16);
    line-height: size(16);
    font-size: pxToRem(30);
    margin-bottom: size(15);
    color: #898888;
}
.right {
    width: 50%;
    float: left;
    text-align: left;
    height: size(16);
    line-height: size(16);
    font-size: pxToRem(30);
    margin-bottom: size(15);
    color: $firmFontBlack;
}
.trade-time,
.trade-coin,
.sell-or-buy,
.order-type,
.coin-flag,
.state,
.order-amount,
.order-rate,
.order-expireDate,
.order-rate2,
.order-rate3{
    .left {
        letter-spacing: adapt(0.5);
    }
}
// .trade-cp .cp,
// .trade-coin .coin {
//     font-weight: bold;
// }
.state .right  {
    color: $firmOtherRed;
}
.order-expireDate   {
    .left,.right{
        margin-bottom: 0;
    }
}
.priceItem{
    position: relative;
    background: $price-list-bg-color;
    border-top: solid 1px $price-list-border-color;
    height: pxToRem(100);
    line-height: pxToRem(100);
    .coin-cp{
        width: pxToRem(248);
        position: absolute;
        font-size: pxToRem(30);
        padding-left:pxToRem(18);
    }
    .sell-price, .buy-price{
        color: $price-primary-color;
        width: pxToRem(200);
        height: pxToRem(70);
        line-height: pxToRem(70);
        top: pxToRem(15);
        text-align: center;
        font-size: pxToRem(45);          
    }
    .sell-price{
        position:relative; 
        margin-left: pxToRem(280);
    }
    .buy-price{
        position: absolute;
        top: pxToRem(15);
        right: 0;
        margin-right: pxToRem(30); 
    }
    .up{
        color: $white;
        background-color: $price-bg-up;
        border-radius: pxToRem(10);;
    }
    .down{
        color: $white;
        background-color: $price-bg-down;
        border-radius: pxToRem(10);
    }        
}
.orderModules{
    position: relative;
    width: 100%;
    height: size(135);
    ul{
        margin-top: size(9.5);
    }
    li{
        list-style-type: none;
        float: left;
        width: 100%;
        height: size(45);
        line-height:size(45);
        font-size:pxToRem(30);
        background: #fff;
        border-bottom:1px solid #aaaaaa;
        label{
            float: left;
            padding-left:size(10);
            color: #898888;
        }
        span{
            float: right;
            padding-right: size(10);
            color: $firmFontBlack;
        }
    }
}
.failReason{
    position: relative;
    width: 100%;
    top: size(9.5);
    height: size(120);
    background:#FFF;
    font-size:pxToRem(30);
    .word{
        height: size(45);
        line-height: size(45);
        color: #898888;
        padding-left: size(10);
        float: left;
    }
    .introduce{
        height: size(75);
        float: left;
    }
}