/* For CAPD */
body { color:#666; font-family:sans-serif; line-height:1.4; }
h1 { color:#444; font-size:1.2em; padding:14px 2px 12px; margin:0px; }
h1 em { font-style:normal; color:#999; }
a { color:#888; text-decoration:none; }
.wrapper { width:452px; margin:10px auto; }
ul { padding:0px; margin:0px; list-style:none; color:#CCC; width:100%; border-top:1px solid #CCC; font-size:0.9em; } /*decimal-leading-zero inside;*/
ul li { position:relative; margin:0px; padding:4px 2px 4px; border-bottom:1px solid #CCC; cursor:pointer; }
ul li a { display:-webkit-inline-box; text-indent:-3.3ex; padding:0px 14px 0px 40px; }
li.playing { color:#AAA; text-shadow:1px 1px 0px rgba(255, 255, 255, 0.3); }
li.playing a { color:#000; }
li.playing:before { content:'♬'; width:14px; height:14px; padding:1px; line-height:14px; margin:0px;
    position:absolute; left:4px; top:6px; color:#000; font-size:13px; text-shadow:1px 1px 0px rgba(0, 0, 0, 0.2);
}
.tab { text-indent: 20px; }
.current-word { color: red; } /* 設定逐字指示的文字顏色 */
.grid-container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } /* repeat定義為5列， gap定義列間距和行間距 */
.grid-head { list-style: none; text-align:center; color:#666; border-bottom: 0px; grid-column: 1 / -1; cursor: default; }
.grid-item { list-style: none; border: 1px solid #ccc; padding: 4px; }
#shortcuts { position:fixed; bottom:30px; width:100%; color:#666; font-size:0.9em; margin:60px 0px 0px; padding:20px 20px 15px; background:rgba(240, 240, 240, 0.7); }
#shortcuts div { width:460px; margin:0px auto; }
#shortcuts h1 { margin:0px 0px 6px; }
#shortcuts p { margin:0px 0px 18px; }
#shortcuts em { font-style:normal; background:#D3D3D3; padding:3px 9px; position:relative; left:-3px;
    -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px;
    -webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow:1px 1px 2px rgba(0, 0, 0, 0.1);
}
@media screen and (max-device-width:480px) {
    #wrapper { position:relative; left:-3%; }
    #shortcuts { display:none; }
}
/* */
.credit { text-align:center; }
.pointer { cursor: pointer; }
.containerDsi { display: grid; place-items: center; height: 42vh; }
.containerRgd { display: grid; place-items: center; height: 20vh; }
/* for toggle button */
.buttons-container { display: flex; align-items: center; justify-content: center; }
.toggle-button, .toggleStart, .togglePause { width: 60px; height: 34px; background-color: #ddd; border-radius: 15px; cursor: pointer; display: flex; align-items: center; position: relative; overflow: hidden; margin: 8px 20px 8px 20px; }
.knobStart, .knobPause { width: 30px; height: 30px; background-color: #33A7F5; border-radius: 50%; transition: 0.2s; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.active .knobStart, .active .knobPause { transform: translateX(30px); }
/* for Blink */
.FixedBox { font-size: 20px; color: #4CC134; margin: 10px;}
.BlinkBox { font-size: 20px; color: #C13434; margin: 10px;
    -o-animation: changeshadow 1s linear infinite;
    /* 其它瀏覽器相容性前綴 */
    -webkit-animation: changeshadow 1s linear infinite;
    -moz-animation: changeshadow 1s linear infinite;
    animation: changeshadow 1s  ease-in  infinite;
} 
/* 實作 css animation - 閃爍霓虹文字 https://ithelp.ithome.com.tw/articles/10206477 */
.centered {
    position:absolute;
    left:50%;
    top:50%;
    font-size: 65px;
    transform:translate(-50%,-50%); 
}
.neon-effect {
    color:#000;
    /*letter-spacing:2px;*/
    cursor: pointer;
}
.neon-effect:nth-of-type(1) {
    text-shadow:
    0 0 5px rgba(247, 245, 41, 1),
    0 0 10px rgba(247, 245, 41, 1),
    0 0 20px rgba(247, 245, 41, 1),
    0 0 40px rgba(247, 245, 41, 1);
    animation:neon-shine 1s linear infinite;
}
.neon-effect:nth-of-type(2) {
    text-shadow:
    0 0 5px rgba(67,232,216, 1),
    0 0 10px rgba(67,232,216, 1),
    0 0 20px rgba(67,232,216, 1),
    0 0 40px rgba(67,232,216, 1);
    animation:neon-shine 2s 1s linear infinite;
}
.neon-effect:nth-of-type(3) {
    text-shadow:
    0 0 5px rgba(255, 65, 65, 1),
    0 0 10px rgba(255, 65, 65, 1),
    0 0 20px rgba(255, 65, 65, 1),
    0 0 40px rgba(255, 65, 65, 1);
    animation:neon-shine 1s linear infinite;
}
@keyframes neon-shine {
  0%{ opacity:1; }
  90%{ opacity:0; }
  100%{ color:#232323; }
} 
/* for alert message */
.danger { background-color:#FFDDDD; border:2px solid #F44336; }
.success { background-color:#DDFFDD; border:2px solid #04AA6D; }
.info { background-color:#E7F3FE; border:2px solid #2196F3; }
.warning { background-color:#FFFFCC; border-left:2px solid #FFEB3B; }
.alert { background-color:#F44336; transition:opacity 0.6s; margin:8px 0 4px 0;  padding:4px; } /* color:rgb(0 123 255 / 05%); opacity:1; */
.alert.success {background-color:#04AA6D; }
.alert.info { background-color:#87C2F3; } /* #2196F3; */
.alert.warning {background-color:#FF9800; }

.linkbtn { display:unset; background:#4EAF73; padding:2px; text-align:center; border-radius:5px; color:white; font-weight:bold; line-height:25px; }
.closebtn { margin-left:15px; color:white; font-weight:bold; float:right; font-size:22px; line-height:20px; cursor:pointer; transition:0.3s; }
.closebtn:hover { color:black; }
/* for wavesurfer */
.waveform { max-width: 100%; height: auto; margin: auto; }
/* CAPD Table */
.tableDsiWrapper { width:620px; margin:10px auto; }
.tableRgdWrapper { width:660px; margin:10px auto; }
table { border-collapse: collapse; margin: 6px 0 6px 0; width: 100%; }
th { border: 1px solid #ccc; padding: 0; text-align: center; background-color: #87C2F3; }
td { border: 1px solid #ccc; padding: 0; text-align: center; }
.editable { border: double; }
.save-btn { display: none; }
/*
#content { text-align:center; }
audio.media-controls { overflow:hidden !important }
audio.media-controls-enclosure { width:calc(100% + 64px); margin-left:auto; }
*/