.dropdown { position: absolute; top: 8px; right: 30px; z-index:100; } .bpm {font-size: 12px; float: right;}
#audioPlayer {position: relative; top: 29px; z-index:20; width: 53%; height: 26px; display: block;} a { text-decoration: none; color:white;}
.btn {position: relative; top: 10px; width: 320px; height: 60px; font-size: 26px; font-weight: bold; border: none; box-shadow: 2px 2px 5px #555555; white-space: nowrap;
background:rgb(222, 184, 135)url('https://i.imgup.co/pVjAj.png'); text-shadow: 1px 1px 3px #474747; z-index: 60;
color:rgb(250, 235, 215); outline: none; cursor: pointer; border-radius: 5px;} .inb {display: none; }
#QR {transform: perspective(1000px) rotateX(0deg) translateX(0); transition: 0.5s; transform-origin:center; z-index:1000;} #QR.active {position: absolute; transform: perspective(2000px) translateX(-480px) rotateY(-88deg); transition: 0.5s;} 
.mode-tag {display: block; color:rgb(222, 184, 135); border: 1px solid rgb(222, 184, 135); border-radius: 3px; padding: 2px 6px; font-family: sans-serif; font-size: 14px; line-height: 1; background-color: transparent; white-space: nowrap; float: right; right: 35px; width: 100px; position: absolute; top: 92%; opacity: 0.6; z-index:0;}
#rota {position: absolute; top: 80px; margin: 0; padding: 0; width: 320px; height: 0; transition: 1.2s; 
background: #ccc; transform-origin: top; transform: perspective(1000px) rotateX(0deg); box-shadow: 2px 2px 5px #555555;} #rota {list-style: none; margin:auto;}
.back {height: 20px; font-size: 18px; background:rgb(222, 184, 135) url('https://i.imgup.co/pVjAj.png'); color: white; text-shadow: 1px 1px 2px #555;padding:10px; text-align: right;}
#rota .current-song a {color: #ffff00; font-weight: bold;} .number {background-color:#000000; font-size: 26px; display: flex; color: rgb(126, 124, 124); width: 15%; float:left; height: 50px; line-height: 50px; justify-content: center; vertical-align: middle;}
#rota.active {transform: perspective(1000px) rotateX(-90deg); box-shadow: 2px 2px 5px #555555;} .word-active, .noLyr { text-shadow: 2px 2px 2px #000000; font-family: '微軟正黑體'; color: yellow; text-shadow: 2 2 4px rgb(16, 16, 16);  filter: drop-shadow(3px 3px 3px #1b1b1b);}
#rota li {list-style: none; font-size: 16px; word-wrap:break-word;}
#rota li a { display: block; padding: 10px; height: 30px; line-height: 20px; text-decoration: none; text-indent: 10px;
text-align: left; text-shadow: 2px 2px 4px #474747;
background:rgb(0, 0, 0) url('https://i.imgup.co/yz14M.png');
color:rgb(255, 255, 255); font-family: 'Verdana', serif;
border-bottom: 1px solid rgba(255, 255, 255, 0.2)}


#rota li a:hover { background: rgb(144, 164, 174); transition: 0.3s;}
.list {position: relative; top: 5px; width:320px; height:auto; overflow-x: hidden; font-family: Verdana, serif; letter-spacing: 2px;}
.lyrics {position: absolute; width: 58vw; top: 80px; left: 21px; align-items: center; padding: 10px 10px; flex-wrap: wrap; z-index:15;} rt {color:#efac95; text-shadow: 2px 2px 4px #000000; font-size:50%;}
.lyrics .box { position: relative; width: 100%; height: 58vh; color: #fff; justify-content: center; align-items: center; margin: 20px 10px; transition:0.5s; border-style: solid; backdrop-filter: blur(5px) brightness(1.2); background: rgba(189, 243, 249, 0.08); border: 1px solid rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(5px);}
.lyrics .box::before {content: ''; position: absolute; top:0; left:0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(3, 105, 97, 0.01),rgba(3, 89, 92, 0.02)); animation: reflect 0.5s ease forwards;}
.lyrics .box::after {content: ''; position: absolute; top:0; left:0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(49, 240, 243, 0.02),rgba(255,0,88,0.01)); animation: flash 0.5s ease forwards;}
.lyrics .box .layer { position: absolute; top: 6px; left: 6px; right: 6px; bottom: 6px; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0)); height: 270px;; z-index:2;}
.lyrics .box .layer::before { content: ''; position: absolute; top:0; left:0; width: 50%; height: 100%; background-image: linear-gradient(to bottom, rgba(185, 252, 242, 0.03), rgba(0, 0, 0, 0)); pointer-events: none;}
.controllers {width: 8%; color:rgb(222, 184, 135); float: right; position: relative; top:26px; right:18px; z-index: 50; margin: 5px; cursor: pointer; font-size: 20px; background-color: transparent; border-width:0;} 
.lyrics .box #content {position: relative; top: -42px; z-index: 10; padding: 20px 10px; height: 58vh; width: 100%;} .lyrics .box:hover{transform: translateY(-20px);} .controllers:hover {color: white;}
.lyrics .box #content h2 { z-index: 100; width:91%; font-size: 28px; color: #efac95; margin-bottom: 5px; font-family:'Verdana'; position: relative; top: 26px; left: 0%; margin-bottom: 10px; letter-spacing:1px; text-align: left; text-shadow: 3px 3px 6px #300505; position: sticky;  word-wrap: normal; line-height: 28px;}
.lyrics .box #content ruby, rb { font-size: 16px; color: #ffe4e1; margin-bottom: 5px; line-height: 16px; margin-right: 10px; font-family: Verdana; z-index:-10; text-shadow: 2px 2px 4px #000000; letter-spacing: 2px; transition: color 0.6s ease;}
.lyrics .box #content li { list-style-type: none; width: 97%; height: 55vh; overflow: auto; padding: 3px; font-size: 16px;}


.editorT {position: absolute; top: 15%; opacity: 10%; width:320px; font-size: 1px;} .editorT:hover {opacity:1;} #banner {position: relative; top: -12%; opacity: 90%; width:100%; height:auto; z-index: 50; padding: 0;}
.Fbtn {padding: 5px 5px; float: right; background: #bbb; color: #555; text-align: center; align-items: center; cursor: pointer; width: 18px; position: absolute; bottom: 0%; z-index: 100; border-radius: 3px;}
.Fbuttons .Fbtn.motive {background: #a52a2a; color: #bbb; position: absolute; right:90px;} .Fbuttons {width: 100%; display: flex; float: right; justify-content:center;}
.Fbuttons .Fbtn {position: absolute; right:90px;} .lyrics .box #content .p, p {transition: 0.2s ease-in-out; width: 100%;}
.Fbuttons .Fbtn:nth-child(2) {font-size: 1.45em; position: absolute; right:50px;}
.Fbuttons .Fbtn:nth-child(3) {font-size: 2em; position: absolute; right:10px;}
::-webkit-scrollbar {background: transparent; overflow: visible; width: 17px;} ::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.2); border: solid rgba(255,255,255,0.8); z-index:15;}
::-webkit-scrollbar-thumb:horizontal {border-width: 4px 6px; min-width: 40px;} ::-webkit-scrollbar-thumb:vertical {border-width: 6px 4px; min-height: 40px;} ::-webkit-scrollbar-track-piece {background-color: rgba(0,0,0,0);}
::-webkit-scrollbar-corner {background: transparent;} ::-webkit-scrollbar-thumb {background-color: rgba(250,250,250,0.1);} ::-webkit-scrollbar-thumb:hover {background-color: #b22222;}
audio::-webkit-media-controls-play-button {display: none;} audio::-webkit-media-controls-current-time-display {color:white;}
audio::-webkit-media-controls-panel {background-color:rgb(222, 184, 135);} audio::-webkit-media-controls-enclosure {opacity:1;} 
#div2 {font-size: 26px; padding:5px; position:absolute; bottom:15px;} #qrc {position: absolute; left: 11.5%; top: 22%;} select {font-size:26px; width: 270px; color: white; background-color: #555;}
.line-number-tag {position: relative; margin-left: 10px; text-align: right; font-weight: 800; font-size: 0.9em; font-family:'Arial Bold', sans-serif; color: rgb(241, 169, 36);}
.p {opacity: 90%; text-shadow: 2px 2px 2px #000000; letter-spacing: 1px; font-family: '微軟正黑體', sans-serif; font-size: 18px; overflow-wrap: break-word; text-align: center;}
.l-active {color: yellow; font-size :18px; opacity: 100%; text-shadow: 2px 2px 4px #000000; transition: color 0.3s ease-in-out; transition: transform 0.3s ease;} p[data-lang="pn"] span { display: inline-block; white-space: nowrap;}

.loader {height: 70px; display: flex; position: absolute; left:38%; top:28%; justify-content: center; align-items: center;}
.loader .stroke{background: #f1f1f1; height: 150%; width: 10px; border-radius: 50px; margin: 0 5px; animation: animate 1.4s linear infinite;}
@keyframes animate {50% {height: 20%; background: #96430c;} 100% {background: #fa3c3c;height: 100%;}}
.stroke:nth-child(1), .stroke:nth-child(7){animation-delay: 0s;} .stroke:nth-child(3), .stroke:nth-child(5){animation-delay: 0.6s;} .stroke:nth-child(4){animation-delay: 0.9s;} .stroke:nth-child(2), .stroke:nth-child(6){animation-delay: 0.3s;}
@keyframes slideInFromTop {0%{transform: translateY(-750%); opacity: 0;} 70%{transform: translateY(-700%); opacity: 0.3;} 100%{transform: translateY(4%); opacity: 0.7;}}
#qrc {animation: 1.5s ease-in 1s 1 slideInFromTop; animation-delay: 1s; animation-fill-mode: forwards;} option {width: 100px;}
.box.active {animation: reflect 0.5s ease forwards;}
@keyframes flash {0% { background: transparent; } 27.99999% { background: rgba(255,255,255,0.2);} 78% { background: transparent; } 100% {background: transparent;}}
@keyframes reflect {0% { background: transparent; } 27.99999% { background: rgba(255,255,255,0.2);} 28% { background: transparent;} 100% {background: transparent;}}
#panel1,#flip1{ padding: 5px; width:80%; text-align: left; background:rgb(135, 206, 235)url(https://i.imgup.co/yI33e.png); display: none;
border: solid 1px rgba(114, 124, 124, 0.5); font-size:32px; margin: 0 0 0 10%;} 
#panel1{ display: none; font-size: 18px;}  
#flip1{margin-top: 5px; border-radius: 3px; box-shadow: 0 0 15px 0 rgb(37, 37, 37); text-align:left;text-shadow: 2px 2px 4px #000000; font-size:  18px; color: rgb(255, 255, 255); opacity: 0.1;} 
#flip1:hover { opacity: 1;}
a:hover { cursor: pointer; opacity: 1; color: rgba(255, 165, 0,0.8); text-decoration: none;} 
h1 {font-size: 32px; color: rgb(245, 245, 245); font-family: 'Segoe UI'; text-align: center; margin-right: 100px;}
.edMTB { color: rgba(255, 255,255, 0.8); float: right; opacity: 0.1;font-size:2px;} a:hover { cursor: pointer; opacity: 1; color:rgba(255, 165, 0,0.8); text-decoration: none;} a:link {text-decoration: none;} a:hover { color: grb(255, 255, 255); cursor: pointer; opacity: 1; text-decoration: none;}
.mtb { margin: 380px 10px 0 10%;} #panel1 {width: 80.5%; display: none; padding: 2px;}
.site-info { background:rgb(173, 216, 230)url(https://i.imgup.co/yz14M.png); box-shadow: 0 0 10px 0 rgb(81, 82, 83); margin: 10px 5px 0 0; padding: 5px;}
.contact h3, .site-info h3 {text-align: left; line-height:1.5; margin:5px 0 5px 0; color:rgb(102, 102, 102); font-size:20px; word-wrap: nowrap;}
.contact h3 {text-align: left; font-size: 20px;}
.site-info ul li { margin-left: 15%; text-align: left; line-height:1.5 ;font-size: 16px; list-style: square;}
.contact {margin: 0 auto; width: 90%; background:rgb(245, 245, 245); padding: 2rem; box-shadow: 0 0 10px 0 rgb(81, 82, 83);}
table {width: 100%; border-spacing: 0px; table-layout: fixed;} td {padding: 2 0px; line-height: 15px;}
.update {color: green; margin: 1px;} .delete {color:red; margin: 1px;}
table td:focus{ background-color: #eae9e9;} pre {font-size: 16px; white-space: pre-wrap;}
.tbl th, .tbl td {padding: 1px 0px; border-bottom: 1px solid #cacaca; outline: none;}
.addNew_1 {color: green; float: right; font-size: 1.1rem; border-radius: 5px; border-width:0; box-shadow: 0 0 6px 0 rgb(137, 137, 137);} .addNew_1:active {transform: scale(0.95);}
.tr_1:nth-child(odd) {background:rgb(220, 220, 220)url(https://i.imgup.co/yyRsM.png); color: rgb(95, 6, 6 );} #tbd1 {color: rgb(0, 0, 0);}
.th_1 {text-align: center;  background: rgba(0, 0, 0,0.7)url(https://i.imgup.co/pdFtC.png);}  table .td1:focus{ background-color: #eae9e9;}
.thead_1 { border: solid 1px rgb(169, 169, 169); box-shadow: 0px 0px 5px #777; position: sticky; z-index:1;  top: 0px;} th {height: 40px;}
.td1 {text-align: left; border-width: 1px; border-color:rgb(169, 169, 169); padding: 3px;}
.h2_1 {text-align: center; margin-bottom: 20px; font-size: 32px; color: rgb(255, 255, 255); filter:drop-shadow(2px 2px 6px black);}
.th_1 {color: rgb(255, 255, 255); font-size: 16px;}