/*标题导航栏*/
/*预约课程*/
.TopArea {
    position: fixed;
    margin-top: 0.8rem;
    width: 100%;
    height: 1rem;
    background: linear-gradient(to bottom,#f88b76,#fb5d57);
    z-index: 999;
}

    .TopArea .content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 7.5rem;
        height: 1rem;
        margin: 0 auto;
        color: #fff;
        text-align: center;
    }

        .TopArea .content .backIcon {
            width: 2rem;
            height: 1rem;
            background: url(/Content/MChooseCourse/selectLeft.png) no-repeat 0.3rem;
            background-size: 10%;
        }

        .TopArea .content .title {
            width: 3rem;
            font-size: 0.3rem;
        }

        .TopArea .content .rm-status {
            width: 2rem;
            font-size: 0.2rem;
        }
        .TopArea .content .rm-status img{
            width: 70%;
        }

        .TopArea .content .share {
            width: 2rem;
        }
        .TopArea .content .share img{
            display:inline-block;
            width: 20%;
            margin-left:1rem;
        }

/*课程类型选择*/
.rm-content {
    width: 7rem;
    height: 1rem;
    margin: 0.1rem auto 0;
}
    .rm-content .courseList {
        width: 7rem;
        padding-top: 0.3rem;
        color: #383838;
        height: 1rem;
    }

    .rm-content .courseList ul {
        display: flex;
        justify-content: space-around;
    }

    .rm-content .courseList ul .active {
        background: linear-gradient(to bottom,#f88b76,#fb5d57);
        color: #fff;
        border-radius: 0.08rem;
        border: none;
    }

    .rm-content .courseList li {
        height: 0.5rem;
        line-height: 0.5rem;
        cursor: pointer;
        padding: 0 0.2rem;
        border: 0.01rem solid #383838;
        border-radius: 0.08rem;
    }

/*已约课程-已上-未上*/
.changeState {
    position: fixed;
    margin-top: 1.8rem;
    width: 100%;
    height: 1rem;
    border-bottom:0.01rem solid #dfdcdc;
    z-index: 999;
    background:#fff;
}

.changeState a{
    height:0.6rem;
    line-height:0.6rem;
    width:50%;
    text-align:center;
    color:#aaaaaa;
    font-size:0.3rem;
    float: left;
    margin-top: 0.2rem;
}

.changeState a:nth-child(1){
    border-right:0.02rem solid #aaa;
}

    .changeState .active {
        color:#fd6055;
    }

/*我的消息*/
.messageList .noMsg{
   width:7.5rem;
   height:auto;
   margin-top:1.8rem;
   display:none;
}
.messageList .noMsg .nomsgImg{
   width:4rem;
   height:3.85rem;
   margin:1rem auto 0;
}
.messageList .noMsg .nomsgImg img{ 
   width:100%;
   height:100%;
}
.messageList .noMsg .nomsgTip{
   width:4rem;
   height:1.5rem;
   margin:0.4rem auto 0;
   text-align:center;
}
.messageList .noMsg .nomsgTip p:nth-child(1){
   width:4rem;
   height:1rem;
   line-height:1rem;
   text-align:center;
   font-size:0.42rem;
   color:#363636;
   font-weight:bold;
}
.messageList .noMsg .nomsgTip p:nth-child(2){
   width:4rem;
   height:0.4rem;
   line-height:0.4rem;
   text-align:center;
   font-size:0.33rem;
   color:#919191;
}
.messageList .noMsg .backBtn{
   width:4rem;
   height:0.8rem;
   line-height:0.8rem;
   margin:0.4rem auto 0;
   text-align:center;
   background:#fb6d5d;
   border-radius:0.5rem;
   box-shadow:0 0 0.4rem 0.06rem #fdd1cf;
}

.messageList .noMsg .backBtn a{
   display:inline-block;
   width:100%;
   height:100%;
   color:#fff;
   font-size:0.28rem;
}
.messageList .footerLink {
    width:7rem;
    margin:0 0.25rem;
    text-align:center;
    color:#b3b3b3;
    font-size:0.21rem;
    position:fixed;
    bottom:1.2rem;
}

.messageList .hasMsg{
   width:7.5rem;
   height:auto;
   margin-top:1.8rem;
}
.messageList .hasMsg .msgType{
   width:7.5rem;
   padding:0 0.25rem;
   height:0.9rem;
   position:fixed;
   background:#fff;
   z-index:9999;
}
.messageList .hasMsg .msgType li{
   width:0.6rem;
   margin:0 0.2rem;
   font-size:0.26rem;
   color:#fe5c52;
   float:left;
   height:0.8rem;
   line-height:0.8rem;
   font-weight:bold;
   text-align:center;
}

.messageList .hasMsg .msgList{
   width:7.5rem;
   margin:1rem auto 0;
   height:auto;
}

.messageList .hasMsg .msgList li{
   width:7.5rem;
   padding:0.2rem 0.25rem;
   height:1.2rem;
   border-bottom:0.01rem solid #bfbfbf;
}
.messageList .hasMsg .msgList a:nth-child(1) li{
   border-top:0.01rem solid #bfbfbf;
}
.messageList .hasMsg .msgList li div{
   float:left;
}

.messageList .hasMsg .msgList li .msgPic{
    width:0.8rem;
    height:0.8rem;
    background:#fe5b52;
    border-radius:0.4rem;
    overflow:hidden;
    line-height:0.8rem;
}
.messageList .hasMsg .msgList li .notRead::after{
    width: 0.18rem;
    height: 0.18rem;
    border-radius: 0.09rem;
    background: #fe5c52;
    content: "";
    position: absolute;
    margin-left: -0.2rem;
    margin-top: 0.05rem;
    border:0.03rem solid #fff;
}
.messageList .hasMsg .msgList li .msgPic img{ 
    width:0.8rem;
}
.messageList .hasMsg .msgList li .msgContent{
    width:5.4rem;
    padding-left:0.3rem;
    height:0.8rem;
}
.messageList .hasMsg .msgList li .msgContent p:nth-child(1){
    width:5.1rem;
    height:0.5rem;
    font-size:0.28rem;
    color:#333;
    font-weight:bold;
    line-height:0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}
.messageList .hasMsg .msgList li .msgContent p:nth-child(2){
    width:5.1rem;
    height:0.3rem;
    font-size:0.22rem;
    color:#626262;
    line-height:0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}
    .messageList .hasMsg .msgList li .msgTime {
        width: auto;
        font-size: 0.22rem;
        color: #626262;
        text-align: center;
        line-height: 0.4rem;
        overflow: hidden;
        text-overflow: ellipsis;
        float: right;
        white-space: nowrap;
        margin-top: -0.8rem;
    }

.messageList .hasMsg .msgType .active::after{
   width: 0.5rem;
    height: 0.08rem;
    border-radius: 0.04rem;
    background: #fe5c52;
    content: "";
    position: absolute;
    margin-left: -0.5rem;
    margin-top: 0.75rem;
}
.messageList .hasMsg .msgType .notRead::before{
    width: 0.14rem;
    height: 0.14rem;
    border-radius: 0.07rem;
    background: #fe5c52;
    content: "";
    position: absolute;
    margin-left: 0.5rem;
    margin-top: 0.2rem;
}

.messageDetail .msgBody{
    margin:1.8rem auto 0;
    width:7rem;
    padding:0.25rem;
}

.messageDetail .msgBody .title{
    margin-top:0.3rem;
    width:6.5rem;
    font-size:0.3rem;
    line-height:0.5rem;
    color: #222222;
    font-weight: bold;
}

    .messageDetail .msgBody .courseinfo {
        margin-top: 0.3rem;
        width: 6.5rem;
        font-size: 0.28rem;
        line-height: 0.5rem;
        color: #222222;
        font-weight: bold;
    }
        .messageDetail .msgBody .courseinfo span {
            color: #f03b32;
        }

.messageDetail .msgBody .time {
    width:6.5rem;
    font-size: 0.26rem;
    height:1.5rem;
    line-height: 1.5rem;
    color: #5d5d5d;
    font-weight: bold;
    text-align:end;
}

    .messageDetail .msgBody #gotoClass {
        display: block;
        width: 6rem;
        height: 0.7rem;
        text-align: center;
        line-height: 0.7rem;
        background-color: #f03b32;
        border-radius: 0.35rem;
        color: #fff;
        margin-top: 0.5rem;
        font-weight: 200;
        font-size: 0.3rem;
        margin-left: 0.25rem;
    }

.messageDetail .msgBody .detail {
    width:6.5rem;
    font-size: 0.3rem;
    font-weight: bold;
    color: #1b1b1b;
    text-align:center;
    margin-top:0.4rem;
}
.messageDetail .msgBody .detail p{
    margin-bottom:0.8rem;
}
.messageDetail .msgBody .detail img{
    max-width:7rem;
}

.messageDetail .logo {
    margin: 1rem auto 0;
    width: 2.4rem;
    height: 0.54rem;
}
.messageDetail .tip {
    margin: 0.5rem auto;
    width: 3.4rem;
    height: 0.54rem;
    text-align: center;
    font-size: 0.24rem;
    color: #5d5d5d;
    line-height:0.54rem;
}
.messageDetail .logo img{
    width:2.4rem;
    height:0.54rem;
}