/* 2023new ---------------------------- */
 
 

 
 
.item-prompt-h5{
    width: 100%;
    height: 100%;
    position: relative;
     background: #f7f8fa!important;

    /* .hei-prompt-panel{
        background: #000!important;
     }*/

}

.heih5-anchor-prompt-panel{
  padding: 0;
}

 

.explain-time{
color: #1989fa;
margin-left: 10px;


}

 
.tb-anchor-hrader .el-avatar--medium {
  width: 30px!important;
  height: 30px!important;
  position: absolute!important;
    right: 1vh!important;
    line-height: normal!important;
    margin-top: 2px!important;
    border-radius: 0.5vh!important;
}


.hei-prompt-panel{
    padding: 0;
    width: 100%;
}

.hei-anchor-h5{
     text-align: center!important;
      height: auto !important;
  top: 20vh!important;
}

.hei-anchor-h5 > *:not(:first-child) {  
    margin-top: 15px; /* 为除了第一个直接子元素外的所有子元素设置上边距 */  
}

.live-item-grounding{
    width: 100%;
    height: 100%;
}

.live-item-grounding > *{
    margin:20px 0;
}

.el-input__inner{
    border-radius: 50px;
    height: 32px!important;
 }

 
 

.tb-anchor-hrader{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
     padding: 5px 0px;
/*    box-shadow: 0px 2px 2px #dedfe8;*/
     justify-content: center;
    align-items: center;
    gap: 10px;
 
      margin: 0 ;
      /* background: #dedfe7 ; */
      background: #000 ;
      display:inline-block ;
  z-index: 9;
  height: 4.5vh;
/*      position: fixed;*/
    }


    .anchor-nick{
 
        line-height:4.1vh ;
    display: inline-block ;
    margin-left: 8px ;
    color: #666;
    position: absolute;
    font-size: 1.6vh;
    right: 50px;
    }
 


/*--- h5手机提词 ----*/

 
  .mcn-body-h5{
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif!important;
     }

.title{
    font-size: 12px;
    padding: 10px 20px;
    /* display: block; */
    color: #999;
    background-color: #F5F8FA;
    display: inline-block;
    color: #999;
    border-radius: 10px 10px 0 0;
}




  .mcn-body-h5 .quxiao{ 
    color: #fff;
    background-color: #666;
     
}


    .mcn-zhibo-h5{
width: 100%;
/*    padding: 10vh 5%;*/
    background: #f7f8fa;
/*    background: #000;*/
    /* border-radius: 15px; */
/*    margin-bottom: 20px;*/
    display: inline-block;
    position: relative;
  }

  .mcn-zhibo-h5 p{
    font-size: 3vh;
    color: #333;
  }
/*  .mcn-zhibo-h5 button{
padding: 1vh 3vh;
    font-size: 2vh;
    color: #fff;
    background-color: #1989fa;
    border-radius: 50px;
    display: inline-block;
    text-align: left;
    text-decoration: none !important;
    border: none;
    margin: 0 1vh;
}*/

  .hei-anchor-h5 button{
    padding: 1vh 3vh;
    font-size: 2vh;
    color: #fff;
    background-color: #1989fa;
    border-radius: 50px;
    display: inline-block;
    text-align: left;
    text-decoration: none !important;
    border: none;
    margin: 0 1vh;
}



  .mcn-zhibo-h5 .zdjj .bt{
    padding: 1vh 2vh!important;
    font-size: 2vh;
    color: #fff;
    background-color: #1989fa;
    border-radius: 50px;
    display: inline-block;
    text-align: left;
    text-decoration: none !important;
    border: none;
    letter-spacing: 0.1vh;
 }


  .mcn-zhibo-h5 .sdjj .bt{
    padding: 1vh 2vh!important;
    font-size: 2vh;
    color: #fff;
    background-color: #1989fa;
    border-radius: 50px;
    display: inline-block;
    text-align: left;
    text-decoration: none !important;
    border: none;
     letter-spacing: 0.1vh;
}


  .h5-jiaoyan{
        width: 60%;
     padding: 5px 20px;
    border-radius: 100px;
    border: 1px solid #ddd;
    line-height: 32px;
    font-size: 14px;
    color: #666;
     margin:0 auto;
  }

.likai{
  margin-top:8px;
  padding: 10px 20px;
  background: #eaeaea;
  color: #1989fa;
  display: inline-block;
  border-radius: 10px;
  font-size: 18px;
  border: 1px solid #1989fa;
}

.error{
  color: #f82c50;
}

.caozuo{
   /* padding:10px 10px 30px 10px; */
padding: 2vh 1.5vh 4vh 1.5vh;
/*  border-top:1px solid #eaeaea ;*/
/*  position: relative;*/
  margin-top: 0!important;
  background: #000;

}

  .caozuo button{
  /* padding: 10px 20px; */
    font-size: 1.8vh;
    /* color: #333;
    background-color: #efefef; */
    border-radius: 10px;
    display: inline-block;
    text-align: left;
    text-decoration: none !important;
    border:none;
 }
 
   .caozuo .bt{ 
    color: #fff;
    background-color: #1989fa; 
}
 
  .tc-main {  
    position: relative;
    min-height: 70vh;
    overflow: auto;
    text-align: left;
    background-color: #fff;
   } 


  .tc-text {      
     position: absolute;  
    top: 0;  
    left: 0;  
    white-space: pre-wrap;  
    transition: top 0.2s ease;  
    font-size: 18px;
    color: #666;
/*    font-weight: 500;*/
    letter-spacing:1px;
     line-height: 3.5vh;
     padding: 2.5vh 1vh 2vh 1vh; 
     background-color: #fff;

     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif!important;
   }  

.el-tabs--border-card>.el-tabs__content{
    padding: 0!important;
}

  /* .gaoliang {  


  } */

  .highlight {  
     background-color: #ffff00;
    width: 100%;
    left: 0;
    display: none;
    height:6vh;
    position: absolute;
    top:11vh;
     opacity: 0.5;
     z-index: 99;
 /* border-top: 1px solid #333;*/
  }  
 
.left-img{
  width:40%;
  margin-top: 10px;
  display: inline-block;
    position:relative;
    text-align: center;
        border-radius: 10px;
    overflow: hidden;

}
.left-img .jiage{
 position: absolute;
    top: 0;
    left: 0;
    padding: 7px 10px;
    background: #333;
    color: #fff;
     font-size: 18px;
         border-radius: 0 0 10px 0;
              font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif!important;
}

.left-img img{
  width: 100%;
  display: inline-block;

}


.right-cz{
  width: 58%;
  display: inline-block;
  /* float:right; */
  margin-top: 0!important;
}


.right-cz p{
margin: 1.5vh 0;
text-align: center;
}
.right-cz button{
padding: 5px 15px;
}

.left-img p{
margin-top: 2px;
}

.left-img button{
padding: 3px 12px;
    margin: 0;
    background: #ffff00;
    opacity: 0.6;
    color: #333;
}


.lianjie{
     /*  color: #666;
       box-shadow: 0 3px 3px #ddd;
       padding: 0 8px 8px 8px;
       position: relative;
    z-index: 9;*/

     color: #666;
   z-index: 9;
    position: absolute;
    /* top: 1.6vh; */
    top: 1vh;
    left: 1vh;
    width: auto;
    text-align: left;
/*    background: #f7f8fa;*/
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif!important;

     .van-dropdown-menu__bar {
        background-color: #333;
        border-radius: 2vh;
        padding-right: 1vh;

        .van-ellipsis{
            color:#f7f8fa ;
        }
     }

     .item-select-main{
        background: transparent!important;
     }
        

}
.lianjie .djs {
  margin-left: 10px;
  color: #1989fa;
  font-size: 1.8vh;
}

.lianjie .xuhao {
   color: #999;
   font-size: 1.6vh;

   strong{
    font-weight: 500;
    color: #fff;

   }
}



.help{ color: #1989fa;
    right: 10px;
    position: absolute;
    top: 10px;
}


.help-main{
width: 90%;
    padding: 10px 15px;
    background: #F5F8FA;
    border-radius: 15px;
    margin-bottom: 20px;
    display: inline-block;
    position: relative;
    text-align: left;
}



.help-main .help-text{
line-height: 28px;
margin-bottom:5px;
font-size: 18px;
color: #666;
}
 
.help-main p{
font-size: 16px;
color: #666;
margin: 5px 0;
}

.help-main span{
line-height: 28px;
 font-size: 18px;
 }


.help-main b{
font-weight: 500;
color: #333;
 font-size: 18px;

}
 

.help-main a{
position: absolute;
    right: -10px;
    top: -10px;
}


.help-main .iconfont{
  font-size: 36px;
  background: #fff;
    border-radius: 50%;
}

.tiem_min .zntc{
    position: relative;
}

.tiem_min .icon-v2{
    position: absolute;
    top: -25px;
    right: 5px;
    background-color: #fff;

}

.caozuoget{
  text-align: center;
    padding: 2.5vh 1.5vh;
    position:relative;
    /* height: 4vh; */
}

/* .caozuoget .bt{

} */


.h5-jj-style{
        font-size: 1.8vh!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    gap: 10px!important;
}

.h5-jj-style label{
    font-size: 1.8vh;
     border-radius: 10px;
    padding-right: 1vh;
}

 

/*
.next-time{
  line-height: 3vh;
    color: #333;
    font-size: 1.6vh;
 }
*/

 .item-back{
     position: absolute;
    top: 2.5vh;
    left: 50%;
    width: 80%;
    padding: 1vh 2vh !important;
    background: #ddd;
    border-radius: 5vh;
    text-align: center;
    transform: translateX(-50%);
    z-index: 9;
     font-size: 2vh;
    line-height: 2vh;
    border: none;
 }

.zdjj{
  position: relative;
  display: flex;
  justify-content: center;
  gap: 3vh;



 .next-time{
    /*position: absolute;
   top: 0;
   left: 50%;
   width: auto;
   padding: 0.6vh 5%;
   background: rgb(221, 223, 231);
   border-radius: 5vh;
   text-align: center;
    transform: translateX(-50%); 
    z-index: 9;*/
        position: absolute;
        top: 0;
        left: 50%;
        width: auto;
        padding:1vh 2vh !important;
        background: #ddd;
        border-radius: 5vh;
        text-align: center;
        transform: translateX(-50%);
        z-index: 9;
        line-height: 1.8vh;
        font-size: 2vh;
        line-height: 2vh;
}

}

.sdjj{
    position: relative;
}



.sdjj .next-time{
   position: absolute;
        top: 0;
        left: 50%;
        width: auto;
        padding: 1vh 2vh !important;
        background: #ddd;
        border-radius: 5vh;
        text-align: center;
        transform: translateX(-50%);
        z-index: 9;
        line-height: 1.8vh;
        font-size: 2vh;
        line-height: 2vh;
}
 
}

.zdjj .auto{
  background-color: #e1e1ff;
    color: #1989fa;

   
}

.zdjj .el-button{
        margin: 0!important;
    }


.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
   color: #333!important;
  border-top: 1px solid #e5e7ee;
    top: 1px;
}


.heih5-anchor-prompt-panel .el-tabs--border-card{
border:none!important;
box-shadow:none!important;
margin-top: -3px;
}


.aitici-css{
  color: #888;
  padding: 5px;
  position: absolute;
  right: 0;
/*  top: 5vh;*/
  z-index: 9;

button{
   padding: 0.8vh 1vh;
        font-size: 1.5vh;
        color: #fff;
        background-color: #1989fa;
        border-radius: 50px;
        display: inline-block;
        text-align: left;
        text-decoration: none !important;
        border: none;
        margin-right:1vh;
}
.ai-btn{
    position: relative;

}
.aitici-text{
    font-size: 14px;
}

.ailoading{
      position: absolute;
    width: 90%;
    right: 20%;
    bottom: 0;
    width: 20px;
    height: 20px;
    opacity: 0.7;
}

}

.ai-btn-huan{
    padding: 0.2vh 1vh;
    font-size: 1.5vh;
    color: #1989fa;
    background-color: #d7beff;
    border-radius: 50px;
    display: inline-block;
    text-align: left;
    text-decoration: none !important;
    border: none;
    margin: 0 1vh;
    position: absolute;
    right: 1vh;
    top: 11vh;
    z-index: 99;
 
}

.mcn-zhibo-h5  {
    .el-tabs__nav{

    .el-tabs__item{
                padding: 0 1.5vh!important;
            font-size: 1.8vh!important;
}
}
}


.item-title-css{
    position: relative;
    padding: 0px 10px 10px 10px;
    background: #dedfe8;
    font-size: 1.8vh;
    color: #666;
    letter-spacing: 1px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    top: -3px;
    display: block;
}

.mcn-zhibo-h5 .is-top{
    color: #666;
  }

.mcn-zhibo-h5 .is-active{
    font-weight:700!important;
}

.mcn-zhibo-h5 .bottom-caoz-child{
    width: 10vh!important;
}

.right-cz .van-cell{
    padding: 8px 16px!important;
 
    background-color: transparent!important;
}

.right-cz .van-cell:after{
    border-bottom: none!important;
}
.mcn-zhibo-h5 .van-stepper{
        position: absolute;
    right: 0;
    width: 20vh;
    text-align: right;
}

.count-down-domain .block{
     width: 45px!important;
    color: #ee0a24!important;
    font-size: 14px;
      font-weight: 500;
      background-color:transparent!important;
}
.mcn-zhibo-h5 .keyword-reply-card{
padding: 7px!important;
height:auto!important;
}

.mcn-zhibo-h5 .set-keyword-tags{
    width: 100%;
    line-height: 22px;
}



.live-caoz-control-domain{
    display: flex;
    padding: 20px 25px;
    flex-wrap: wrap;
    gap: 5%;
}

.live-caoz-control-domain .bottom-caoz-child{
    margin:1vh 0;
}


.right-cz .van-button--round{
    height: 4vh;
    border: 1px solid #a09fd6;
    color: #1989fa;
}


.heih5-anchor-prompt-panel .el-card__body .benefit-log-checkde{
        position: absolute;
    left: 1vh;
    top: 1vh;
}

.heih5-anchor-prompt-panel .el-card__body .put-benefit-detail-css{
    margin: 1vh 0 1vh 2vh;
}

/* 2025新版h5 style */


.demo-control-btn{
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85px;
  height: 40px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  z-index: 999;
  right: 0;
  top: 60vh;
  border-radius: 50px;
  padding: 0px 5px;
}

.caozuo .van-field__label {
  width: auto !important;
  color: #888!important;
  margin-right: 1.5vh!important;
}

.bottom-caoz-child{
  flex: 1 1 70px;
  width: 8vh;
  height: 6vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #0e0e0e;
}

.bottom-caoz-child .caoz-title-t{
  font-size: 12px;
  color: #5a5a5a;
  margin-top: 5px;
}



/* new style */

.item-pc-detail{
width: 100%;
background-color: #000;
  border-radius: 1vh 1vh 0 0;
  position: relative;

.slider-container{
    margin: 0!important;
}
     .slider-item{
    border: 0.3vh solid #666!important;
    background-color: #333!important;
    }

     .active{
        border: 0.3vh solid #ff0843!important;
     }


  .jj-next{
  line-height: 3vh;
  display: flex;
  color: #fff;
  font-size: 3vh;
  justify-content: center;
  gap: 31%;
  top: 4.8vh;
  position: absolute;
  width: 100%;

 

      .jj-next-left{
       color: #000;
      }

      .jj-next-right{
         color: #000;

      }

      .next-select{
          color: #ff0843!important;
      }

      }



  .items-jjs{
   display: flex;
  gap: 1%;
  justify-content: space-evenly;
  align-items: center;
     

  .jj-item{
      width: 16%;
      position: relative;
      display: flex;
  align-items: center;
  justify-content: center;
      span{
          font-size: 1.2vh;
  position: absolute;
  background: #333;
  opacity: 0.8;
  color: #fff;
  padding: 0.2vh;
  left: 0;
  top: 0;
  border-top-left-radius: 0.5vh;
  border-bottom-right-radius: 0.3vh;
      }

      img{
          width: 100%;
   border-radius: 0.5vh;
      }
  }



  .jj-select{
       width: 28%;
       margin: 0;
  
       .jg-css{
   right: 0;
  left: auto;
  background: #ff0843;
  border-radius: 0 0 0 0.3vh;
  font-size: 1.8vh;
  padding: 0.5vh;
   }
span{
  font-size: 1.4vh;
  background: #333;
  opacity: 1;
  color: #fff;
  left: -0.3vh;
}
strong{
  font-size: 1.5vh;
  background: #333;
  opacity: 1;
  color: #fff;
}
img{
  border: 0.3vh #ff0843 solid;
}
      .jj-loading{
          width: auto;
  height: 1.5vh;
  color: #fff;
  background: #ff0843;
  border-radius: 0 0 0 0.3vh;
  padding: 0.1vh;
  position: absolute; 

      }

      
}

  }

  .item-bt-css{
      position: relative;
  padding: 0.8vh;
   font-size: 1.8vh;
  color: #ccc;
  letter-spacing: 1px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  top: 0;
  margin-bottom: 2vh;
  background: #333;
  border-radius: 1.3vh 1.3vh 0 0;
  line-height: 2.2vh;
}



 .jj-time-djs {
  position: absolute;
  bottom: 0.2vh;
  left: 0;
  font-size: 1.4vh;
  background: #ff0843;
  opacity: 1;
  color: #fff;
   width: 100%;
  display: flex;
  justify-content: flex-start;
   align-items: center;
  height: 2.3vh;

      .jj-style{
      left: auto!important;
  background: transparent!important;
  padding-left: 3vh!important;
  top:0.3vh!important
   }
   }

   .left-kong{
width:40%;
margin-top: 10px;
display: inline-block;
  position:relative;
  text-align: center;
      border-radius: 10px;
  overflow: hidden;

}
}

.zb-kong-css{ 
  display: flex;
  flex-wrap: wrap;
  gap: 1vh;
.van-cell{
    position:static!important;
}
  .one-kong{
      display: flex;
  flex-wrap: nowrap;
  gap: 1vh;
  width: 100%;
  }

  .two-kong{
      display: flex;
  flex-wrap: nowrap;
  gap: 1vh;
  width: 100%;



  .van-radio--horizontal{
      margin-right:0!important;
  }

  .van-radio-group--horizontal{
      flex-wrap: nowrap!important;
      gap: 2vh;

  }



  }

  .font-open{
      font-size: 2.5vh;
  }
  .font-style-jj{
      padding: 5px 10px;
      height: 26px;
      font-size: 1.3vh;
      margin-right: 1vh;
  }


  .van-cell{
      border-radius:0.5vh;
      padding: 10px 13px!important;
      background: #333;
      display: flex;
  align-items: center;
  }

  .van-switch{
  background-color: #888;
  }
  .van-switch__node{
      background-color: #ddd;
  }

  .zbzs-css{
      background-color: #07c160;
      font-weight: normal;
      color: #fff;
  }



}
  

.caozuo .van-radio__icon--checked .van-icon{
  background-color: #07c160;
border-color: #07c160;
}


.caozuo .van-radio__label{
  margin-left:0.5vh!important;
  color: #999!important;
  }

.select-item-nb {
      width: 16vh;
      
      .el-input__inner{
      font-size: 2vh!important;
  }
}

    .item-sel-new{
   border-radius: 5px;
    background-color: #ddd;
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 10px;
  }

.custom-image{
    margin-top: 25vh;
}

.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
}

.live-detail-css{
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #999;
}
 
.zbmlogo-gif{
        width: 3vh;
    height: 3vh;
    position: relative;
    top: 0.5vh;
    right: 0.8vh;
 }


 .lianjie .van-image{
    width: 30px;
    height: 30px;
 }

 .lianjie .van-image img{
      border-radius: 0.5vh !important;
 }
    

  .select-xuhao{
    height: auto!important;
    padding: 0.5vh 1vh!important;
    margin-right: 1vh!important;
    border-radius: 0.5vh!important;
    font-size: 1.6vh!important;
    color: #1989fa!important;
  }

    .select-xuhao i{
        font-size: 1.4vh!important
  }

.xuhao{
    color: #999;
}


/* 新增悬浮拖动样式 */
.drag-btn {
    position: fixed;
    z-index: 9999;
    cursor: move;
    user-select: none;
    transition: transform 0.1s;
/*    transform: translate3d(v-bind(translateX + 'px'), v-bind(translateY + 'px'), 0);*/
    right: 4vh;
    top: 4vh;
    margin-left: 0 !important;
    padding: 0.5vh 0.6vh;
    background: #1989fa;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
}

/* 拖拽时样式 */
.drag-btn:active {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: none;
}

.drag-btn i {
    font-size: 3vh;
}

 
/* --- 新增高亮条的样式 --- */
.tc-main {
  position: relative; /* 提词容器需要相对定位 */
  overflow-y: auto; /* 确保容器可以滚动 */
}

.highlight-bar {
  position: sticky; /* 将 absolute 修改为 sticky */
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 0, 0.3);
  border-bottom: 1px solid rgba(255, 204, 0, 0.5);
  pointer-events: none;
  z-index: 10;
}