/* ******************** *
 * ******************** *
 * ****            **** *
 * ****   Layout   **** *
 * ****            **** *
 * ******************** *
 * ******************** */

/**[class$="__en"] { font-family: Arial; }
*::-webkit-scrollbar { width: 3px; }*/

/**::-webkit-scrollbar-track {
    /* background-color: transparent; */
/*    background-color: rgb(189, 189, 189);
}*/

/**::-webkit-scrollbar-thumb {
    /* background-color: rgba(80, 80, 80, 0.5); */
/*    background-color: rgba(228, 76, 101, 1);
    border-radius: 5px;
}*/

html{ width: 100%; height: 100%; padding: 0; margin: 0; outline: 0; color: #ffffff; scroll-behavior: smooth; }
body{ position: relative; width: 100%; padding: 0; margin: 0; background-color: rgb( 28, 27, 37); font-weight: 400; }
body::before{ position: absolute; z-index: -1; content: ""; top: 0; left: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; background-image: url(../images/layout/bg_layout.png); }

a{ text-decoration: none; }
h1{ font-size: 2.5rem; margin-bottom: .5rem; }

main{ max-width: 1680px; }

table td, table th{ padding:5px; }

/* 原 Layout 補正 */
header .menu_box{ z-index: 3; }

/* 大腦頁 */
main{ position: relative; }
.conent_narrow.full_height{ transition: opacity 1s; }
.conent_narrow>.layout_title{ margin-bottom: 50px; }
        
.layout_describe{ font-size: 30px; line-height: 36.31px; text-align: center; }
.layout_loadingbox{ margin-top: 40px; display: flex; justify-content: center; flex-direction: column; }
.layout_loadingbox>*{ margin-bottom: 15px; }
/*.layout_loadingbox>*:last-child{ margin-bottom: unset; }*/
.layout_loading{ display: inline-block; background-color: rgba(228, 76, 101, 1); border-radius: 20px; padding: 5px 15px; margin-left: auto; margin-right: auto; }
.layout_loading_string{ font-weight: 700; font-size: 16px; line-height: 19.36px; text-align: center; }
.layout_loading_btn{ display: inline-block; background-color: rgba(228, 76, 101, 1); border-radius: 5px; padding: 10px 15px 10px 15px; margin: 10px auto; }
.layout_loading_btn *{ font-size: 16px; line-height: 19.36px; color: rgba(255, 255, 255, 1); }

.remark_box{ position: absolute; bottom: 0px; right: 30px; }
.remark_title{ display: inline-block; color: rgba(251, 53, 53, 1); font-size: 18px; line-height: 25px; margin-bottom: 8px; }
.remark_subbox{ display: flex; flex-direction: column; align-items: center; border-radius: 20px; padding: 20px 15px; border: 1px dashed rgba(251, 53, 53, 1); }
.layout_remark_btn{ background-color: rgba(251, 53, 53, 1); border-radius: 5px; padding: 15px; margin-bottom: 10px; }
.layout_remark_btn span{ color: rgba(255, 255, 255, 1); font-size: 18px; line-height: 25px; }
.remark_textbox{ display: flex; flex-direction: column; align-items: center; text-align: center; }
.remark_textbox span{ color: rgba(255, 255, 255, 1); font-size: 18px; line-height: 25px; text-align: center; }

/* 無障礙反應 */
main a:focus,
main span:focus,
main button:focus,
.swal2-container .btn:focus,
.grid-stack-item-content.grid-stack-item-content-focus{ outline: 3.5px solid #ffcc00 !important; transition: none !important; }
input.search:focus,
main .ui-focus{ box-shadow: rgba(51, 136, 204, 0.16) 0px 1px 4px, rgb(51, 136, 204) 0px 0px 0px 3px; }
input.search:focus{ margin-left: 3px !important; }
.table_min_box_box input.search:focus{ margin-left: 3px !important; width: calc(100% - 6px); }
.btns_deleteAll:focus{ margin-top: 3.5px !important; }
.btn_history:focus,
.table_min_title .sort button:focus,
.audio_table .table_mintool .btns_play:focus,
#audio_list .item-class-play button.btns_play:focus{ margin-left: 3.5px !important; }
.table_min_title button.btns_deleteAll:focus,
.grid-item-mini #audio_list .item-class-remove .btns_play:focus{ margin-right: 3.5px !important; }

.btn_history{ z-index: 9; position: fixed; display: none !important; bottom: 0px; left: 0; margin: 0.5em 0; padding: 0.7em 1em; background-color: #f6f6f6 !important; border-color: #ddd; -webkit-border-radius: 0.3125em; border-radius: 0.3125em; text-align: center; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px; }
.btn_history span{ font-size: 16px; color: #333; text-shadow: 0 1px 0 #f3f3f3; }

/* 拖曳按鈕 */
.voice-draggable-handle-class{ z-index: 2 !important; cursor: move; display: none; position: absolute; top: 2.5px; left: 2.5px; width: 48px; height: 48px; background-color: white; outline: 3.5px solid #ffcc00; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; }
.grid-stack-item>.ui-resizable-se{ z-index: 2 !important; bottom: 1px; right: 1px; outline: 3.5px solid #ffcc00; width: 48px; height: 48px; background-size: 25px; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; }
.ui-droppable .voice-draggable-handle-class,
.ui-droppable .grid-stack-item>.ui-resizable-se{ display: inline-block; }
.ui-droppable .grid-stack-item-content{ outline: 3.5px solid #ffcc00 !important; transition: none !important; }
.ui-droppable .grid-stack-item-content::after{ z-index: 1; cursor: move; background-color: rgba( 0, 0, 0, 0.3); position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ""; }
.ui-droppable .ui-slider .ui-slider-handle{ z-index: 1; }
.ui-droppable *{ -moz-user-focus: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; }


/* 快捷鍵按鈕 */
.hidden_anchor{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
}
.hidden_anchor:focus{
    opacity: 1;
    top: 3.5px;
    left: 3.5px;
    width: auto;
    height: auto;
}



.layout_btns{ transition: opacity 1s; border-radius: 5px; display: flex; align-items: center; word-break: keep-all; padding: 10px 15px 10px 15px; word-break: keep-all; transition: all 0.5s; justify-content: center; }
.btns_red{ color: rgba(255, 255, 255, 1); background-color: rgba(228, 76, 101, 1) !important; border-width: 1px; border-style: solid; border-color:  rgba(228, 76, 101, 1); }
.btns_play{ color: rgba(255, 255, 255, 1); background-color: rgba(228, 76, 101, 1) !important; border-width: 1px; border-style: solid; border-color:  rgba(228, 76, 101, 1); }
.btns_black{ color: rgba(255, 255, 255, 1); background-color: rgba(0, 0, 0, 0.3) !important; border-width: 1px; border-style: solid; border-color: rgba( 255, 255, 255, 1); }
.btns_white{ color: rgba( 0, 0, 0, 1); background-color: rgba( 255, 255, 255, 1) !important; border-width: 1px; border-style: solid; border-color: rgba( 255, 255, 255, 1); }
.btns_deleteAll{ padding: 9px 10px; }
.btns_deleteAll span{ font-size: 14px; line-height: 16.94px; }
.btns_delete{ padding: 10px; color: rgba(255, 255, 255, 1); background-color: rgba(0, 0, 0, 0) !important; }
.btns_delete:hover,
.btns_delete:focus{ background-color: rgba(0, 0, 0, 0.3) !important; }
.btns_delete img{ width: 16px; height: 16px; margin-right: 5px; }
.p_text{ padding: 10px; word-break: keep-all; }

/*header{ width: 100%; z-index: 100; position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; padding: 30px 50px 30px 50px; }
header .header_logos{ display: flex; margin-right: auto; }
header .header_logos a{ margin-right: 30px; }
header .header_logos a:last-child{ margin-right: unset; }
header .header_logos a img{ height: 78px; }
header .header_menu{ display: flex; align-items: center; margin-left: auto; }
header .header_menu>*{ margin-right: 10px; }
header .header_menu>*:last-child{ margin-right: unset; }
header .header_member{ border-left: solid 1px #ffffff; display: flex; flex-direction: row; align-items: center; padding: 5px 0px 5px 20px; }
header .header_member img{ padding-right: 10px; }
header .btns_mobile{ display: none; padding-right: 0; }
header .btns_mobile img{ width: 24px; height: 24px; }

footer{ width: 100%; display: flex; flex-direction: column; text-align: center; padding: 30px 0 30px 0; margin-top: auto; }
footer .footer_copyright{ display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
footer .footer_copyright .footer_copyright_img{ margin-right: 20px; }
footer .footer_copyright .footer_copyright_img img{ width: 134px; }
footer .footer_copyright .footer_copyright_text{ font-size: 16px; color: #ffffff; }
footer .footer_design{ font-size: 16px; color: #ffffff; opacity: 0.3; }*/


body>.container{ min-height: calc( 100vh - 138px ); margin: 138px auto 0; display: flex; flex-direction: column; flex-wrap: nowrap; }
@media screen and (max-width:1200px){
    body>.container{ min-height: calc( 100vh - 74px ); margin: 74px auto 0; }
}

.layout_titlebox{ transition: opacity 1s; position: relative; width: 100%; margin: 32px 0 40px; display: flex; flex-direction: row; justify-content: center; align-items: center; margin-left: auto; }
.layout_title{ font-size: 33px; margin: 0 auto; text-align: center; }
.layout_titlebox .layout_titletool{ display: flex; flex-wrap: wrap; }
.layout_titlebox .member_gearbox{ margin-left: auto; }

.grid-stack-voicebank-content{ transition: opacity 1s; margin: 0 -14px; }
.grid-stack-voicebank-wrapper{}


/* 詢問視窗 - sweetaler2 */
.swal2-container .swal2-popup.swal2-modal{ width: auto; padding: 0; border-radius: 10px; }
.swal2-container .swal2-popup.swal2-modal::before{ z-index: 0; content: ""; position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; border: 1px solid rgba(228, 76, 101, 1); border-radius: 10px; }
.swal2-container .swal2-title{ padding: 40px 70px 0; font-size: 30px; line-height: 36.31px; }

.swal2-container .btn.btn-success,
.swal2-container .btn.btn-danger{ font-size: 16px; line-height: 19.36px; padding: 10px 15px; }
.swal2-container .swal2-actions{ margin: 0; padding: 0 70px 40px; }
.swal2-container .swal2-actions>*{ margin: 10px 10px 0 0; }
.swal2-container .swal2-actions>*:last-child{  margin-right: 0; }

/* 提示視窗 */
.iziToast{ background-color: #ffffff; padding-top: 4px; padding-bottom: 5px; padding-right: 15px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px; }
.iziToast:after{ opacity: 0; }
.iziToast > .iziToast-body .iziToast-icon{ margin-top: -20px; width: 40px; height: 40px; }
.iziToast > .iziToast-body .iziToast-message{ font-size: 1rem; padding: 0.5rem 1rem; }
.iziToast > .iziToast-progressbar > div{ height: 0.25rem; background: rgba(0,0,0,.2); }

/** 語音系統 **/
.member_gridbox{ text-align: left; display: flex; }
.member_gridbox .layout_btns{ padding: 8.5px 15px; margin-right: 10px; }
.member_gridbox .layout_btns:last-child{ margin-right: auto; }
.member_gridbox .layout_btns img{ margin-right: 5px; }
.member_gridbox .layout_btns svg{ display: none; width: 16px; height: 16px; margin-left: 2px; margin-right: 7px; }
.member_gridbox.locking .layout_btns img{ display: none; }
.member_gridbox.locking .layout_btns svg{ display: block; }

.member_gearbox{ display: flex; align-items: center; flex-direction: row; justify-content: flex-end; }
.member_gearbox>*{ margin-right: 10px; }
.member_gearbox>*:last-child{ margin-right: unset; }
.member_gearbox .member_gearbox_text{ line-height: 20px; display: flex; align-items: center; border-right-color: rgba( 255, 255, 255, 0.3); border-right-width: 1px; border-right-style: solid; }
.member_gearbox .member_gearbox_text span{ padding: 8px 15px; word-break: keep-all; }
.member_gearbox .layout_btns{ padding: 3px 10px; }

#layout_button_size { display: flex; grid-gap: 10px; }

@media screen and (min-width: 768px ) {
    .layout_titlebox>*{ flex: 33; }
    
    .layout_titlebox .layout_titletool .member_gridbox{ display: none; }
}
@media screen and (max-width: 767px ) {
    .layout_titlebox{ flex-direction: column; }
    .layout_titlebox .layout_titletool{ width: 100%; grid-gap: 10px; }
    .layout_titlebox .layout_titletool>*:first-child{ margin-right: auto; }
    .layout_titlebox .layout_titletool>*:last-child{ margin-left: unset; }
    
    .layout_titlebox>.member_gridbox{ display: none; }
    
    /** 語音系統 **/
    .member_gearbox .member_gearbox_text{ display: none; }
}


/* ********************* *
 * ********************* *
 * ****             **** *
 * **** Audio Style **** *
 * ****             **** *
 * ********************* *
 * ********************* */

/* Grid.js */
.btn-primary{ color: #fff; background-color: #007bff; }
.btn{ display: inline-block; padding: .375rem .75rem; line-height: 1.5; border-radius: .25rem; }

 /*.grid-stack{ background: #FAFAD2; }*/
.grid-stack-item-content{ text-align: center;/* background-color: rgba(25, 190, 157, .2);*/ }

.grid-stack-item-removing{ opacity: 0.5; }
.sidebar{ background: rgba(0, 255, 0, 0.1); padding: 25px 0; height: 100px; text-align: center; }
.sidebar .grid-stack-item{ width: 120px; height: 50px; border: 2px dashed green; text-align: center; line-height: 35px; background: rgba(0, 255, 0, 0.1); cursor: default; display: inline-block; overflow: hidden; }
.sidebar .grid-stack-item .grid-stack-item-content{ background: none; }

/* make nested grid have slightly darker bg take almost all space (need some to tell them apart) so items inside can have similar to external size+margin */
.grid-stack > .grid-stack-item.grid-stack-sub-grid > .grid-stack-item-content{ background: rgba(0,0,0,0.1); inset: 0 2px; }
.grid-stack.grid-stack-nested{
    background: none;
    /* background-color: red; */
    /* take entire space */
    position: absolute;
    inset: 0; /* TODO change top: if you have content in nested grid */
}

/* ********************** *
 * **** Audio Player **** *
 * ********************** */

.audio_container { position: relative; color: rgba( 255, 255, 255, 1); padding: 4px; overflow: hidden; width: 100%; height: 100%; max-height: 100%; }
.audio_container .audio_wrapper { padding: 10px; position: relative; display: flex; flex-direction: column; width: 100%; height: /*100%*/auto; min-height: calc( 100% - 20px ); border-radius: 5px; border-color: rgba( 255, 255, 255, 1); border-style: solid; border-width: 1px; }

/* 播放文字 */
#audio_text { font-size: 30px; line-height: 36px; min-height: 52px; flex: 100; display: block; height: 100%; color: rgba( 255, 255, 255, 0.7); background-color: transparent; resize: none; }

.audio_toolbox { border-top: 1px solid rgba(255, 255, 255, 1); display: inline-flex; flex-wrap: wrap; align-items: flex-end; width: 100%; margin-top: auto; text-align: right; }
.audio_toolbox .audio_toolitems { padding: 10px 5px 0; width: 50%; }
.audio_toolbox .audio_toolitems.audio_toolitems_subtool { display: flex; }
.audio_toolbox .audio_toolitems.audio_toolitems_subtool > * { margin-right: 10px !important; }
.audio_toolbox .audio_toolitems.audio_toolitems_subtool > :nth-last-child(1) { margin-right: unset !important; }
.audio_toolbox>* { flex: auto; }
.audio_toolbox>*:first-child { padding-left: unset; text-align: left; }
.audio_toolbox>*:last-child { padding-right: unset; }

#layout_reset_mb { display: none; }

/* 播放按鈕 */
#layout_reset,
#audio_btn_play { width: 50%; }
#layout_reset { padding: 8px 20px; }
#audio_btn_play { padding: 8px 32.5px 8px 32.5px; margin-right: auto; }
#audio_btn_play img { height: 30px; margin-right: 10px; }
#layout_reset span,
#audio_btn_play span { font-size: 24px; line-height: 32px; }

/* 播放速度 */
.audio_speedbox{ padding: 5px; display: flex; align-items: center; justify-content: center; margin: 0 auto; width: 100%; }
.audio_speedbox>img{ width: 36px; margin: 0 10px 0 5px; }
.audio_speedbox .layout_btns{ font-size: 20px; padding: 8px; margin-right: 10px; border-width: 0px; background-color: rgba(255, 255, 255, 0.2); flex: auto; }
.audio_speedbox .layout_btns:last-child{ margin-right: 0px; }
.audio_speedbox .layout_btns span{ line-height: 26px; word-break: keep-all; }
.audio_speedbox .focus{ background-color: rgba( 255, 255, 255, 1) !important; color: rgba(51, 51, 51, 1); }

/* 音量 */
.audio_volumebox{ width: 100%; min-width: 150px !important; background-color: rgba(255, 255, 255, 0.2); padding: 7px 15px 7px 15px; border-radius: 5px; display: flex; align-items: center; justify-content: flex-end; margin-left: auto; }
.audio_volumebox img{ width: 36px; height: 36px; }

#audio_volume{ margin-left: 10px; width: 100%; height: 5px;/* max-width: 200px;*/ border-width: 0px; border-radius: unset; }
#audio_volume .ui-slider-range { background: rgba(228, 76, 101, 1); border-width: 0px; border-radius: unset; }
#audio_volume .ui-slider-handle { background: rgba(228, 76, 101, 1); border-color: rgba(228, 76, 101, 1); border-radius: 50%; width: 14px; height: 14px; }

/* PC版 橫向拖曳 */
.hor_flex{ display: none; margin-top: 10px; }
.hor_box{ overflow-y: hidden; width: auto; min-width: 100%; height:40px; background-color: rgba(255, 255, 255, 0.2); border-radius: 5px; }
.hor_box .range{ overflow-x: scroll; overflow-y: hidden; white-space: nowrap;  }
.hor_box .range *{ text-decoration: none; }
.hor_box .range .audio_speedbox{ padding: 5px /*24*/10px; margin-bottom: 5px; width: auto; }

@media screen and (max-width: 1200px ) {
    .grid-item-mini .audio_toolbox .audio_toolitems:first-child{ width: 100%; }
    .grid-item-mini .audio_toolbox .audio_toolitems:last-child{ width: 100%; }
    .grid-item-mini .audio_toolbox .audio_toolitems{ padding: 10px 0 0; }
}
@media screen and (max-width: 800px ) {
    .audio_toolbox .audio_toolitems:first-child{ width: 100%; }
    .audio_toolbox .audio_toolitems:last-child{ width: 100%; }
    .audio_toolbox .audio_toolitems{ padding: 10px 0 0; }
}

/* 大 .main_btn_big */
.main_btn_big .audio_toolbox .audio_toolitems{ padding: 10px 0 0; }
.main_btn_big .audio_toolbox .audio_toolitems:first-child{ padding-left: 0; }
.main_btn_big .audio_toolbox .audio_toolitems:last-child{ padding-right: 0; }

.main_btn_big #layout_reset { padding: 10px 15px 10px 15px; width: 50%; }
.main_btn_big #audio_btn_play { padding: 10px 20px 10px 20px; width: 50%; }
.main_btn_big #audio_btn_play img { height: 36px; }
.main_btn_big #layout_reset span,
.main_btn_big #audio_btn_play span { font-size: 32px; line-height: 38.73px; }

.main_btn_big #audio_text{ font-size: 38px; }

.main_btn_big .audio_speedbox>img{ display: none; }
/*.main_btn_big .audio_speedbox .layout_btns{ font-size: 24px; padding: 10px 20px 10px 20px; }*/
.main_btn_big .audio_speedbox .layout_btns{ font-size: 24px; max-width: 14%; padding-top: 10px; padding-bottom: 10px; padding-left: unset; padding-right: unset; }
.main_btn_big .audio_speedbox .layout_btns span{ line-height: 29.05px; }

.main_btn_big .audio_volumebox{ padding: 6px 15px 6px 15px; }
.main_btn_big .audio_volumebox img{ width: 48px; height: 48px; }

/* 大 .main_btn_big 窄版 */
.main_btn_big .grid-item-mini .audio_toolbox .audio_toolitems{ width: 100%; }
@media screen and (max-width: 1200px ) {
    .main_btn_big .audio_toolbox .audio_toolitems:first-child{ width: 100%; }
    .main_btn_big .audio_toolbox .audio_toolitems:last-child{ width: 100%; }
}

/* 小 .main_btn_small */
.main_btn_small #layout_reset,
.main_btn_small #audio_btn_play { padding: 7px 15px 7px 15px; }
.main_btn_small #audio_btn_play img{ width: 24px; height: 24px; }
.main_btn_small #layout_reset span,
.main_btn_small #audio_btn_play span{ font-size: 16px; line-height: 19.36px; }

.main_btn_small #audio_text{ font-size: 20px; }

.main_btn_small .audio_speedbox>img{ width: 24px; margin: 0 10px 0 5px; }
/*.main_btn_small .audio_speedbox .layout_btns{ font-size: 16px; padding: 6px 20px 6px 20px; }*/
.main_btn_small .audio_speedbox .layout_btns{ font-size: 16px; max-width: 14%; padding-top: 6px; padding-bottom: 6px; padding-left: unset; padding-right: unset; }
.main_btn_small .audio_speedbox .layout_btns span{ line-height: 19.36px; }

.main_btn_small .audio_volumebox{ padding: 8px 15px 8px 15px; }
.main_btn_small .audio_volumebox img{ width: 24px; height: 24px; }

/*  行動版 / 窄版 */
.grid-item-mini .audio_toolbox .audio_toolitems{ width: 50%; }
.grid-item-mini .audio_toolbox .audio_toolitems:nth-child(2){ display: none; }
.grid-item-mini .hor_flex{ display: flex; }

@media screen and (max-width: 767px ) {
    .hor_flex{ display: flex; }
    .audio_toolbox .audio_toolitems:nth-child(3){ flex: 80; }
    .audio_toolbox .audio_toolitems:nth-child(2){ display: none; }
}

/* ******************** *
 * **** Audio List **** *
 * ******************** */

/*.sort.asc, .sort.desc { background-color: black; }*/  
#audio_list{ overflow: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; height: 100%; }

.audio_table{ color: rgba( 255, 255, 255, 1); width: 100%; }
.audio_table thead tr th{ padding: 0px 20px 6px 0; text-align: left; word-break: keep-all; }
.audio_table thead tr th input{ width: 100%; color: rgba( 255, 255, 255, 1); background-color: transparent; }
.audio_table thead tr th.sort{ text-align: right; cursor: pointer; }
.audio_table thead tr th.sort span{ display: inline-block; position: relative; padding-right: 17px; }
.audio_table tbody tr{ border-color: rgb( 245, 245, 244, 1); border-top-width: 1px; }
.audio_table tbody tr td{ padding: 10px 20px 10px 0; vertical-align: top; text-align: left; }
.audio_table tbody tr td:last-child{ padding-right: unset; }

.table_nodata{ font-size: 20px; line-height: 26px; display: block; padding: 10px; }
.audio_table .item-class-title .table_title{ font-size: 20px; line-height: 26px; display: block; padding-right: 10px; }

.audio_table .table_minbox{ display: flex; margin-top: 10px; padding-right: 10px; }
.audio_table .table_minbox .table_minbox_items{ color: rgba(255, 255, 255, 0.5); margin-right: 25px; display: inline-flex; flex-direction: column; }
.audio_table .table_minbox .table_minbox_items:last-child{ margin-right: 0px; }
.audio_table .table_minbox .table_minbox_items span{ font-size: 16px; line-height: 20px; }
.audio_table .table_mintool{ display: none; flex-direction: row; justify-content: center; margin-top: 15px; }
.audio_table .table_mintool>*{ margin-right: 10px; flex: 1; justify-content: center; }
.audio_table .table_mintool>*:last-child{ margin-right: 0; }


/* 排序 */
.sort{ text-align: left; word-break: keep-all; }
.sort span{ color: rgba( 255, 255, 255, 0.5); }
.sort span::after{ content: ""; width: 14px; height: 14px; position: absolute; top: 50%; right: 0px; transform: translateY(-50%); padding-left: 3px; background-repeat: no-repeat; }
.sort.asc span,
.sort.desc span{ color: rgba( 255, 255, 255, 1); }
.sort span::after{ background-image: url(../images/layout/icon_down_gray.png); transform: translateY(-50%); }
.sort.asc span::after{ background-image: url(../images/layout/icon_down.png); transform: translateY(-50%); }
.sort.desc span::after{ background-image: url(../images/layout/icon_down.png); transform: translateY(-50%) rotate(180deg); }

/* 排序 行動版 */
.table_min_title{ padding: 6px 0; display: none; align-items: center; flex-wrap: wrap; }
.table_min_title>*{ flex: 1; }
.table_min_title .table_min_box_delete{ text-align: right ; text-align: -webkit-right; }
.table_min_title .table_min_box_box{ margin-top: 5px; margin-bottom: 2.5px; flex: 100%; text-align: left; position: relative; padding: 5px 10px; border-radius: 5px; background-color: rgba(255,255,255,.2); }
.table_min_title .table_min_box_box .search{ width: 100%; font-size: 20px; line-height: 24.2px; padding-right: 17px; color: rgba( 255, 255, 255, 1); background-color: transparent; }
.table_min_title .sort span{ position: relative; font-size: 20px; line-height: 24.2px; padding-right: 17px; }
.table_min_title .table_min_box_box .search::-webkit-input-placeholder{ color:#fff; }
.table_min_title .table_min_box_box .search::-moz-placeholder{ color:#fff; }
.table_min_title .table_min_box_box .search:-ms-input-placeholder{ color:#fff; }
.table_min_title .table_min_box_box input.search:-moz-placeholder{ color:#fff; }
.table_min_title .btns_deleteAll{ padding: 10px 15px 10px 15px; }
.table_min_title .btns_deleteAll span{ font-size: 18px; line-height: 21.78px; }


/*  行動版 / 窄版 */
.grid-item-mini .table_min_title{ display: flex; }
.grid-item-mini .audio_table thead{ display: none; }
@media screen and (max-width: 1000px ) {
    .grid-item-mini #pagination_left,
    .grid-item-mini #pagination_right,
    .grid-item-mini .pagination li{ margin-right: 5px; }
    .grid-item-mini #pagination_left,
    .grid-item-mini #pagination_right,
    .grid-item-mini .pagination li button{ padding: 10px 12px; }
}

@media screen and (max-width: 767px ) {
    .table_min_title{ display: flex; }
    .audio_table thead{ display: none; }
}

/* 頁碼 */
.paginationbox{ display: flex; justify-content: center; margin-top: auto; padding-bottom: 3.5px; }
#pagination_left,
#pagination_right{ margin-bottom: auto; }
#pagination_left,
#pagination_right,
.pagination li{ display: inline-block; margin-right: 10px; }
.pagination li.disabled button{ background-color: unset; padding: 5px 0px; }
.pagination a{ cursor: pointer; }
#pagination_left,
#pagination_right,
.pagination li a,
.pagination li span,
.pagination li button{ line-height: 1.188rem; border-radius: 5px; padding: 10px 15px; color: #ffffff; background-color: #4b4a50; display: flex; justify-content: center; }
#pagination_right{ margin-right: unset; }
.pagination .active span,
.pagination .active button,
.pagination .active a{ color: #000000; background-color: #ffffff; }


#audio_list .item-class-play button{ padding: 10px 15px 10px 15px; }
#audio_list .item-class-play button span,
#audio_list .item-class-remove button span,
.audio_table .table_mintool span{ font-size: 20px; line-height: 24.205px; }
#audio_list .item-class-remove button img{ height: 16px; }
#audio_list .item-class-remove .btns_play{ display: none; margin-bottom: 10px; padding: 10px 20.5px; }

/* 大 .main_btn_big */
.main_btn_big .table_min_title .table_min_box_box .search,
.main_btn_big #audio_list .table_nodata,
.main_btn_big #audio_list .item-class-title .table_title{ font-size: 24px; line-height: 32px; }
.main_btn_big #audio_list .item-class-datetime,
.main_btn_big #audio_list .item-class-clickcount{ font-size: 18px; line-height: 21.78px; }
.main_btn_big #audio_list .item-class-play button span,
.main_btn_big #audio_list .item-class-remove button span,
.main_btn_big .audio_table .table_mintool span{ font-size: 24px; line-height: 29.05px; }
.main_btn_big .audio_table .table_minbox .table_minbox_items span{ font-size: 18px; line-height: 21.78px; }

/* 小 .main_btn_small */
.main_btn_small .table_min_title .table_min_box_box .search,
.main_btn_small #audio_list .table_nodata,
.main_btn_small #audio_list .item-class-title .table_title{ font-size: 16px; line-height: 20px; }
.main_btn_small #audio_list .item-class-datetime,
.main_btn_small #audio_list .item-class-clickcount{ font-size: 14px; line-height: 16.94px; }
.main_btn_small #audio_list .item-class-play button span,
.main_btn_small #audio_list .item-class-remove button span,
.main_btn_small .audio_table .table_mintool span{ font-size: 16px; line-height: 19.36px; }
.main_btn_small .audio_table .table_minbox .table_minbox_items span{ font-size: 12px; line-height: 20px;}


#audio_list .item-class-timestamp{ display: none !important; }
/*  行動版 / 窄版 */
.grid-item-mini #audio_list .item-class-id,
.grid-item-mini #audio_list .item-class-play,
.grid-item-mini #audio_list .item-class-datetime,
.grid-item-mini #audio_list .item-class-clickcount{ display: none; }
.grid-item-mini #audio_list .item-class-remove .btns_play{ display: inline-block; }
.grid-item-mini .hor_box{ height: 52px; }
.main_btn_big .grid-item-mini .hor_box{ height: 59px; }
.main_btn_small .grid-item-mini .hor_box{ height: 42px; }

@media screen and (max-width: 767px ) {
    .grid-stack-voicebank-content{ margin: 0 auto; }
    
    .btn_history{ display: block !important; }

    .member_gridbox .layout_btns { margin-right: unset; }

    #audio_btn_play:focus{ margin-left: 3.5px !important; }


    #audio_list .item-class-id,
    #audio_list .item-class-play,
    #audio_list .item-class-datetime,
    #audio_list .item-class-timestamp,
    #audio_list .item-class-clickcount,
    #audio_list .item-class-remove{ display: none; }

    .audio_table .item-class-title .table_title,
    .audio_table .table_minbox{ padding-right: 0; }
    .audio_table .table_minbox{ justify-content: space-between; }

    .audio_table .table_mintool{ display: flex; }

	.hor_box{ height: 52px; }
    .main_btn_big .hor_box{ height: 59px; }
    .main_btn_small .hor_box{ height: 42px; }
    .audio_speedbox>img{ display: none; }

    .audio_container{ padding: 0; }
    .audio_container .audio_wrapper{ padding: 0; border: 0; }
    #audio_text{ border: 1px solid #fff; border-radius: 5px; padding: 10px; }
    .audio_toolbox{ border: 0; }
    .grid-item-mini .hor_flex{}
    .hor_box .range .audio_speedbox{ background: none; border-radius: 0; }
    .audio_volumebox{ max-width: none; }
    #audio_volume{ max-width: none; }

    .grid-stack>.grid-stack-item>.grid-stack-item-content{ margin: auto -10px; }

    /* 提示視窗 */
    .iziToast-wrapper{ padding: 0 5px; }
    .iziToast-capsule{ margin-bottom: 5px; }
}

/* 客製化 卷軸 */
.grid-stack-voicebank-content .audio_container .mCSB_container { display: inline; min-height: 100%; }

.grid-stack-voicebank-content .mCSB_scrollTools a + .mCSB_draggerContainer { margin: 26px 0px; }

.grid-stack-voicebank-content .mCSB_scrollTools { background-color: #f1f1f1; width: 24px; }
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_buttonUp,
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_buttonDown { height: 24px; opacity: 1; }
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_buttonUp { background-position: -192px -2px; background-size: 240px 216px; background-image: unset; }
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_buttonDown { background-position: -192px -33px; background-size: 240px 216px; background-image: unset; }
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_buttonUp::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); width: 20px; height: 20px; background-size: 20px; background-image: url( "../malihu-custom-scrollbar-plugin-master/voice_arrow_up.svg" ); }
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_buttonDown::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); width: 20px; height: 20px; background-size: 20px; background-image: url( "../malihu-custom-scrollbar-plugin-master/voice_arrow_down.svg" ); }
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_buttonUp:active,
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_buttonUp:active { background-color: #787878; }
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_buttonUp:hover,
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_buttonUp:focus,
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_buttonDown:focus,
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_buttonDown:hover { background-color: #c1c1c1; }
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_dragger .mCSB_draggerRail { background-color: #c1c1c1; border-radius: 0; }
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_dragger .mCSB_draggerRail { width: 20px; }

.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_dragger:hover .mCSB_draggerRail,
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #a8a8a8; }

.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_dragger:active .mCSB_draggerRail,
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_draggerRail,
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #787878; }
.grid-stack-voicebank-content .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 14px; }