@charset "UTF-8";
header {
    z-index: 101 !important;
}

body,
.mui-content {
    background: #FFFFFF;
    position: relative;
    z-index: 100;
}

//顶部信息样式
.top-info {
    position: relative;
    span {
        width: 100%;
        color: #333333;
        display: block;
        padding: .1rem .3rem;
        font-size: .43rem;
    }
    .countdown {
        position: absolute;
        right: .2rem;
        top: .5rem;
        color: #73D13D;
    }
    .mui-icon-right-nav {
        position: absolute;
        right: .2rem;
        top: .1rem;
        img {
            width: .3rem;
            height: .3rem;
            vertical-align: middle;
        }
        label {
            font-size: .24rem;
            padding-left: .1rem;
            color: #D43436;
        }
    }
}

//已付款页面的顶部信息样式
.had-top-info {
    text-align: center;
    span {
        display: block;
        margin: .1rem 0;
    }
    .money {
        font-size: .37rem;
        color: #4B557D;
    }
    .anti-money {
        color: #333333;
    }
    .pay-time {
        display: flex;
        align-items: center;
        justify-content: center;
        .countdown {
            color: #73D13D;
            margin-left: .2rem;
        }
        .mui-icon-right-nav {
            img {
                width: .3rem;
                height: .3rem;
                vertical-align: middle;
            }
            label {
                font-size: .24rem;
                padding-left: .1rem;
                color: #D43436;
            }
        }
    }
}

//选择切换方式
.mui-card {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    margin: .5rem .3rem .1rem .3rem;
    .mui-checkbox input[type=checkbox],
    .mui-radio input[type=radio] {
        top: 11px;
        &:checked:before {
            //          content: '√';
            color: #D7393E;
        }
    }
    .mui-input-row {
        display: flex;
        align-items: center;
        height: .86rem;
    }
    img {
        width: .4rem;
        height: .4rem;
        margin-left: .2rem;
    }
}

.info-box {
    span {
        width: 100%;
        color: #A0A5AD;
        display: block;
        padding: .1rem .3rem;
        .person-name {
            color: #D43436;
            font-size: .24rem;
        }
        label {
            color: #484860;
            font-size: .23rem;
            padding-left: .3rem;
            float: right;
            img {
                width: .26rem;
                height: .3rem;
                vertical-align: text-bottom;
                margin-left: .2rem;
            }
        }
    }
}

//已付款的详细样式
.had-info-box {
    width: 92%;
    margin: .4rem auto;
    background: rgba(251, 251, 251, 1);
    border-radius: 2px;
    padding: .1rem 0;
    font-size: .2rem;
    span {
        width: 100%;
        color: #A0A5AD;
        display: block;
        padding: .1rem .2rem;
        label {
            color: #484860;
            float: right;
            img {
                width: .26rem;
                height: .3rem;
                vertical-align: text-bottom;
                margin-left: .2rem;
            }
        }
    }
    .info-box-title {
        font-size: .24rem;
        img {
            width: .4rem;
            height: .4rem;
            vertical-align: middle;
            margin-right: .2rem;
        }
        label {
            color: #D43436;
        }
    }
}

//.payment {
//  margin-top: .2rem;
//  .mui-icon {
//      font-size: .3rem;
//      label {
//          font-size: .24rem;
//          padding-left: .1rem;
//      }
//  }
//  .mui-table-view:before,
//  .mui-table-view:after {
//      height: 0;
//  }
//  .mui-table-view-cell {
//      &:first-child {
//          border: 1px solid #EEEEEE;
//      }
//      &:after {
//          height: 0;
//      }
//      .payment-txt {
//          display: inline;
//          color: #999999;
//      }
//      label {
//          float: right;
//          margin-right: .3rem;
//          color: #333333;
//          img {
//              width: .26rem;
//              height: .3rem;
//              vertical-align: text-bottom;
//              margin-left: .2rem;
//          }
//      }
//      .switth {
//          color: #999999;
//      }
//  }
//}
.notice {
    margin-bottom: 1rem;
    .mui-table-view {
        .mui-table-view-cell {
            .mui-active {
                background: rgba(216, 216, 216, 1);
            }
            padding: .1rem .3rem;
        }
        &:before,
        &:after {
            height: 0;
        }
    }
    p {
        color: #A0A5AD;
    }
    a {
        display: block;
        height: 1rem;
        background: rgba(216, 216, 216, 1);
        border-radius: 3px;
        color: #A0A5AD;
        opacity: 0.2;
        margin: .1rem 0 !important;
        word-break:break-all;
        white-space:normal !important;
        overflow: scroll !important;
    }
}

//.mui-table-view-cell a.mui-active {
//  background: none !important;
//}
//按鈕樣式
.btn-group {
    width: 100%;
    display: flex;
    position: fixed;
    bottom: 0;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    .chat-btn {
        width: 1.29rem;
        height: .84rem;
        text-align: center;
        line-height: .9rem;
        img {
            width: .4rem;
            height: .4rem;
        }
    }
    .cancel-btn,
    .yes-btn {
        flex: 1;
        height: .84rem;
        background: #FBEBEB;
        text-align: center;
        color: #D43436;
        font-size: .27rem;
        line-height: .84rem;
    }
    .yes-btn {
        background: #D43436;
        color: #FFFFFF;
    }
}

//已付款按鈕樣式
.hadbtn-group {
    margin-top: 2rem;
    .hadpay-btn {
        width: 92%;
        height: .8rem;
        background: #D43436;
        color: #FFFFFF;
        text-align: center;
        line-height: .8rem;
        margin: 0 auto;
    }
}

//取消订单弹出框
.cancelOrder {
    width: 90%;
    height: 3.58rem;
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -45%;
    margin-top: -1.79rem;
    z-index: 111;
    .orderCont {
        width: 100%;
        background-color: #fff;
        overflow: hidden;
        padding: 0.3rem 0 0 0.3rem;
        border-radius: 0.1rem 0.1rem 0 0;
        .popText_1 {
            font-size: 0.28rem;
            color: #F96B6B;
            margin-top: 0.49rem;
        }
        .popText_2 {
            font-size: 0.24rem;
            color: #666;
            margin-top: 0.36rem;
            margin-bottom: 0.5rem;
        }
    }
    .orderHandle {
        width: 100%;
        height: 0.98rem;
        display: flex;
        border-top: 0.01rem solid #EEEEEE;
        margin-top: -1px;
        .thinkBtn {
            color: #999;
            background-color: #fff;
            border-radius: 0 0 0 0.1rem;
        }
        .cancelBtn {
            color: #fff;
            background: linear-gradient(-90deg, rgba(212, 52, 54, 1), rgba(255, 146, 125, 1));
            border-radius: 0 0 0.1rem 0;
        }
    }
    .popTitle {
        font-size: 0.32rem;
        color: #000;
    }
    .popText {
        width: 92%;
        text-align: justify;
        line-height: 0.41rem;
    }
    .btn {
        width: 50%;
        line-height: 0.98rem;
        text-align: center;
        font-size: 0.32rem;
    }
}

//蒙版背景
.bg {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background: rgba(21, 33, 54, 0.2);
    z-index: 102;
    //  display: none;
}

//二维码弹出框样式
.code {
    width: 4rem;
    height: 4rem;
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -2rem;
    margin-top: -2rem;
    text-align: center;
    z-index: 111;
    background: #FFFFFF;
    padding: .2rem;
    box-sizing: border-box;
    img {
        height: 3rem;
        display: inline-block;
        max-width: 100%;
    }
    span {
        display: block;
        font-size: .5rem;
        font-weight: 500;
    }
}

//<!--买入卖出交易密码确认样式-->
.confirm {
    width: 5.42rem;
    height: 3.54rem;
    border-radius: 4px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -2.71rem;
    margin-top: -1.77rem;
    background: #FFFFFF;
    border-radius: .2rem;
    z-index: 110;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    .input-group {
        position: relative;
        text-align: center;
        overflow: hidden;
        .title-top {
            height: .8rem;
            border-bottom: 1px solid #F1F1F1;
        }
        .icon {
            position: absolute;
            left: .1rem;
            padding-top: .2rem;
            color: #333333;
        }
        .title {
            display: inline-block;
            width: 100%;
            padding-top: .2rem;
            color: #333333;
        }
        .mui-input-row {
            padding: 0 .3rem;
            margin-top: .4rem;
            label {
                font-size: .24rem;
                font-weight: 400;
                color: #333333;
                text-align: left;
                padding: 0;
                margin-bottom: .17rem;
            }
            .mui-input-password {
                width: 100%;
                height: .6rem;
                border: none;
                background-color: #F1F1F1;
                color: #333333;
                padding-left: .2rem;
                &::-webkit-input-placeholder {
                    font-size: .22rem;
                    font-weight: 400;
                    color: #999999;
                }
            }
            .mui-icon-eye {
                top: .5rem;
                right: .29rem;
            }
        }
        .mui-button-row {
            button {
                width: 89%;
                height: .6rem;
                background: #D43436;
                border-radius: 4px;
                border: 1px solid #D43436;
                margin-top: .2rem;
            }
        }
    }
}

//底部弹出框
#popover {
    background: #FFFFFF;
    width: 100%;
    height: 10rem;
    border-radius: .2rem .2rem 0 0;
    position: fixed;
    z-index: 1000;
    top: 100px;
    .popover-info {
         border-bottom:1px solid #EEEEEE;
        .info-txt {
            display: flex;
            align-items: center;
            padding: .3rem .3rem .2rem .3rem;
            .img-box {
                width: .5rem;
                height: .5rem;
                border-radius: 50%;
                overflow: hidden;
                img {
                    width: .5rem;
                    height: .5rem;
                }
            }
            h4 {
                flex: 1;
                color: #333333;
                font-size: .31rem;
                padding-left: .2rem;
            }
            p {
                flex: 1;
                color: #999999;
                text-align: right;
            }
        }
    }
    .money-info {
        display: flex;
        justify-content: space-between;
        padding: 0 .3rem;
        .money-info-left {
            .money-info-txt {
                color: #9DA6B3;
                display: block;
            }
            .money-info-num {
                color: #D7393E;
                font-size: .3rem;
                display: block;
                padding-top: .1rem;
            }
        }
        .money-info-right {
            .money-info-txt {
                display: flex;
                align-items: center;
                color: #73D13D;
                img {
                    width: .3rem;
                    height: .3rem;
                    vertical-align: middle;
                    margin-right: .1rem;
                }
            }
            .money-info-num {
                color: #D7393E;
                font-size: .3rem;
                display: block;
                text-align: right;
            }
        }
    }
}