.base-player-container { 
    width: calc(100% - 30px);
    height: 100%;
    margin:0;
    /*padding:0 15px;*/
    display: flex;
    flex-flow: column; background-color: #fff;
  }
  .base-player-main{
      margin:0 0 20px 0;
      padding:0;
      width: 100%;
      /*height: calc(100% - 140px);*/
      height:100%;
      display: flex;
      gap:15px;
  }
  .base-player-main-left{
      width: 70%;
      height:100%;
  }
  .base-player-main-left .main-left-title{
    height: 10%;
  }
  .base-player-main-left .main-left-title .left-title-text{
    width: 20%;
    height:100%;
    float:left;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .base-player-main-left .main-left-title .left-title-text span{
    font-size: 30px;
    font-weight: bold;
  }
  .base-player-main-left .main-left-title .left-title-select{
    width: 40%;
    height:100%;
    float:right;
    display: flex;
    justify-content: right;
    align-items: center;
  }
  .base-player-main-left .main-left-title .left-title-select span{
    font-size: 16px;
    margin:15px;
  }
  .base-player-main-left .main-left-title .left-title-select select{
    width: 60%;
    height: 50%;
    margin:10px;
    font-size: 16;
  }
  .base-player-main-left .main-left-content{
    width:100%;
    height: 100%;
    height: 80%;
  }
  .base-player-main-left .main-left-content textarea{
    width:100%;
    height: 100%;
    resize: none;
    border-radius: 10px;
  }
  .base-player-main-left .main-left-content textarea:focus{
    border:1px solid #1e9fff !important;
  }
  .base-player-main-left .main-left-control{
    width:100%;
    height: 10%;
  }
  .base-player-main-left .main-left-control .control-left{
    float:left;
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
  }
  .base-player-main-left .main-left-control .control-right{
    float:right;
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: right;
    align-items: center;
  }
  .base-player-main-left .main-left-control .control-left select{
    width: 90%;
    height:50%;
    margin:5px;
  }
  .base-player-main-left .main-left-control .control-right{
    float:right;
  }
  .control-right .control-right-char{
    margin:0 2%;
  }
  .control-right .control-right-clear{
    margin:0 2%;
  }
  .control-right .control-right-build{
    width: 45%;
    margin:0 2%;
  }
  .control-right .control-right-build button{
    width: 100%;
    background-color: #1e9fff;
  }

  .base-player-main-right{
      margin-left:2%;
      width: 30%;
      height: 100%;
  }
  .base-player-main-right .tab-form {
    display: flex;
    flex-direction: column;
  }
  .base-player-main-right .layui-tab{
    height: 100%;
  }
  .base-player-main-right .layui-tab .layui-tab-title{
    height: 5%;
  }
  .base-player-main-right .layui-tab .layui-tab-content{
    margin:0;
    padding: 2% 0;
    height: 95%;
  }
  .layui-tab .layui-tab-content .layui-tab-item{
    height: 100%;
  }
  .tab-form .form-item{
    margin:3% 0;
    width: 100%;
    height: 35%;
  }
  .tab-form .form-item .item-title label {
    display: block;
    font-weight: bold;
  }
  .tab-form .form-item .item-main{
    margin:3% 0;  
  }
  .form-item .emotion-select{
    width: 100%;
    padding: 1% 0;
  }

  .item-main .timbre-switch{
    border:1px solid #c4c2c2;
    width: 100%;
    height: 75px;
    border-radius: 10px;
    display: flex;
    cursor: pointer;
  }
  .item-main .timbre-switch:hover{

  }
  .timbre-switch .timbre-switch-left{
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .timbre-switch-left img{
    width: 75%;
    height: 75%;
    border-radius: 10px;
  }
  .timbre-switch .timbre-switch-main{
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .timbre-switch-main .timbre-switch-main-title{
    margin:2% 5%;
  }
  .timbre-switch-main .timbre-switch-main-language{
    margin:2% 5%;
  }
  .timbre-switch .timbre-switch-right{
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .timbre-switch .timbre-switch-right svg:hover{
    background-color: #f6f4f4;
  }
  .timbre-adjust-item{
    margin:3% 0;
    width: 100%;
    height: 35%;
  }
  .timbre-adjust-item:hover{
    cursor: pointer;
  }
  .timbre-adjust-item label{
    float:left;
    font-weight: bold;
  }
  .timbre-adjust-item svg{
    float:right;
  }
  .history-scroll{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden; 
  }
  .history-scroll .scroll-item{
    margin:1% 0;
    padding:0;
    width:100%;
    height:10%;
    display: flex;
  }
  .history-scroll .scroll-item:hover{
    cursor: pointer;
  }

  .history-scroll .scroll-item-select{
    border:1px solid #1e9fff;
    border-radius: 10px;
  }

  .history-scroll .scroll-play{
    width: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .history-scroll .scroll-play img{
    width: 75%;
    height: 75%;
    border-radius: 10px;
  }
  .history-scroll .scroll-info{
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 1%;
  }
  .history-scroll .scroll-info .scroll-info-filename{
    font-size: 16px;
  }
  .history-scroll .scroll-info .scroll-info-date{
    font-size: 12px;
    color: #aba8a8;
  }
  .history-scroll .scroll-info div{
    width: 100%;
    margin:2% 0;
  }
  .history-scroll .scroll-ctrl{
    width: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .history-scroll .scroll-ctrl a{
    margin:0 10%;
  }


  .base-player-bottom{
    margin:0;
    padding:0;
    width: 100%;
    height: 120px;
    display: flex;
    z-index: 999;
    background-color: rgba(200,206,218,.15);
    border-radius: 15px;

  }

  .base-player-bottom .base-player-bottom-left{
    width: 80px;
    height: 100%;
    display: flex;
    /* justify-content: center; */
    align-items: center;
  }
  .base-player-bottom-left a{
    width: 65px;
    height: 65px;
    border-radius: 10px;
    background-color: #1980fa;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .base-player-bottom-left a:hover{
    cursor: pointer;
    background-color: #1980fa;
  }
  .base-player-bottom-left .iconfont{
  font-size: 30px; color: #fff;
  }
  .base-player-bottom .base-player-bottom-main{
    width:calc(100% - 240px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .base-player-bottom-main .audio-name{
    display: flex;
    margin-bottom: 5px;
  }
  .base-player-bottom-main .audio-name .audio-name-filename{
    /* margin:0 1%; */
    font-weight: bold;
  }
  .base-player-bottom-main .audio-name .audio-name-tag{
    margin:0 1%;
  }
  .base-player-bottom-main .audio-name .audio-name-tag span{
    background-color: #806d6d;
    border-radius: 5px;
    padding: 2px 5px;
    color: #fff;
    font-size: 12px;
  }

  .base-player-bottom-main .audio-progress-bar {
    height: 4px;
    background: #eee;
    margin-top: 1%;
    /* position: relative; */
  }
  .base-player-bottom-main .audio-progress-bar:hover {
    cursor: pointer;
  }
  .base-player-bottom-main .audio-progress-current {
    height: 100%;
    background: #1980fa;
    width: 0;
    transition: width 0.3s;
  }
  .base-player-bottom .base-player-bottom-right{
    width: 160px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    align-content: flex-start;
  }
  .base-player-bottom-right .audio-time-display{
    margin:20px 10px;
  }
  .base-player-bottom-right .audio-download{
    margin:20px 10px;
  }
  .base-player-bottom-right .audio-time-display { 
    color: #666; 
  }


   /* 重写tab样式 */
  .layui-tab-brief > .layui-tab-title .layui-this{
    color: #1e9fff;
    border-bottom: 2px solid #1e9fff;
  }
  .layui-tab-brief > .layui-tab-title .layui-this::after {
    content: none !important; /* 彻底移除生成内容 */
  }

  /*声音复刻*/
.cloning_main{
    width: 1000px; margin: 25px auto;
}
.cloning_title{
    color: #333; line-height: 1.5; font-weight: 600; font-size: 26px; margin-bottom: 4px; box-sizing:border-box
}
.cloning_desc{
    color: #86909C; font-size: 14px; font-weight: 400;
}

.cloning_form_block_title{
   color: #181E25; font-weight: 400; font-size: 16px; line-height: 1.5;margin-top: 24px; margin-bottom: 15px;
}
.cloning_form .layui-input{
  border-radius: 12px; background: #f7f8fa; height: 51px; line-height: 51px;
}
.cloning_form .layui-upload-drag{
  border-radius: 12px; min-height: 170px; background: #f7f8fa;
}
.cloning_form .layui-upload-drag:hover {
  border: 1px dashed #1980fa;
}
.cloning_form .layui-upload-drag .iconfont{
  font-size: 36px; color: #1980fa;
}
.cloning_form .uoload_title{
  color: #181E25; font-size: 14px; font-weight: 600; line-height: 20px; margin-bottom: 8px;
}
.cloning_form .upload_desc{
  color: #86909C; font-size: 12px; font-weight: 300; line-height: 16px;
}
.cloning_form .layui-textarea{
   background: #f7f8fa; border-radius: 12px; padding: 20px;
}
.cloning_form .layui-textarea:hover{ border:1px solid #1980fa;}
.cloning_form button, .cloning_form [type="button"], .cloning_form [type="reset"], .cloning_form [type="submit"]{
  background: #1980fa; width: 250px;border-radius:10px; color: #fff;
}

.cloning_form .cloning_btn{
  display: flex;
  margin-top: 20px;
  justify-content: flex-end;
}

/*底部播放工具栏*/
#player_box{z-index:99;background-color:#f7f8f9;padding:16px 32px 20px 16px;display:none;grid-template-columns: 280px auto 80px;gap:60px;border-radius: 16px 16px 0 0;}
#player_box.active{display: grid;}
#player_box .box_l{gap:10px;}
#player_box .icon{width: 64px;height: 64px;}
#player_box .icon img{border-radius: 5px;}
#player_box .icon .mask{background-color: #00000010;border-radius: 5px;}
#player_box .info{gap:4px;}
#player_box .info .name{font-weight:bold;font-size:15px;color:#121317;line-height: 24px;max-width: 202px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;margin-right: 6px;}
#player_box .info .tags{gap:4px;}
#player_box .info .tags .tag{font-size: 12px;padding:3px 8px;background-color: #c8ceda29;border-radius: 6px;}
#player_box .control_box{gap:16px;}
#player_box .control_box .play_btn{background-color: #000;color:#fff;width:40px;height: 40px;border-radius: 100px;}
#player_box .control_box .play_btn:hover{opacity: .7;}
#player_box .control_box .op_btn{opacity: 1;cursor: pointer;}
#player_box .control_box .op_btn:hover{opacity: .6;}
#player_box .control_box .op_btn.not_allowed{user-select: none;cursor: not-allowed;opacity: 0.5;}
#player_box .bar_box{margin:6px 0;height: 12px;width: 100%;gap:15px;color: #9fa7b2;}
#player_box .bar_box .audio-progress-bar{width: 100%;margin-top:0;background-color: #c8ceda4d;}
#player_box .bar_box .audio-progress-current{height:4px;background: #121317;}
#player_box .download_btn i{font-size: 20px;cursor: pointer;}