/* FONTS */
@font-face { font-family: 'font-1'; src: url('oldcomedy.ttf')  format('truetype'); }
@font-face { font-family: 'font-2'; src: url('rooffont.ttf')  format('truetype'); }

/* COLORS */
:root
{
/* COLORS */
--color1:rgb(0, 58, 116); /* Blue */
--color2:rgb(0, 152, 179); /* Green light */
--color3:rgb(0, 173, 204); /* Green extra light */
--color4:rgb(255, 255, 255); /* White */
--color5:rgb(34, 34, 34); /* Black extra light */
--color6:rgb(255, 201, 14); /* Warm yellow */
--color7:rgb(241, 243, 244); /* Player white */
--color8:rgb(0, 122, 149); /* Green darker */
--color9:rgb(235, 235, 235); /* Green very light */
--color10:rgb(35, 35, 35); /* Black lighter */
--color11:rgb(40, 40, 40); /* Black more lighter */
--color12:rgb(45, 45, 45); /* Black very light */
--color13:rgb(0, 187, 168); /* Special green */
--color14:rgb(106, 228, 255); /* Green very light */
--color15:rgb(118, 118, 118); /* Green very light */ 
--color16:rgb(64, 42, 50); /* Brown like note */ 
--color17:rgb(245, 135, 135); /* Light red */  
}
a:link{color:var(--color8);}
a:visited{color:var(--color8);}
a:hover{color:var(--color2);}
a:active{color:var(--color2);}
body{font-family: tahoma;font-size:12px;line-height:18px;font-weight:400;margin:0px;padding:0px;text-align:left;color:var(--color7);background:var(--color10);background-size:100%;}
form{display:inline-block;}
input:focus{outline:none;} 
input[type='search'] {font-family: tahoma;width:146px;margin-left:25px;margin-top:-4px;height:24px;display:inline-block;position:fixed;border:3px solid var(--color2);border-radius:6px 6px 6px 6px;background-color:var(--color3);color:var(--color7);text-decoration:none;} 
::placeholder{color:var(--color7);}
label{float:center;margin:0;}
p{font-size:46px; color:var(--color1);margin-bottom:270px;}
span{color:var(--color7);margin-top:-105px;margin-right:25px;}
.add{display:inline-block;float:center;width:17px;height:17px;margin-top:8px;border:none;border-radius:2px;cursor:pointer;}
.audio_1{width:308px;float:center;margin-top:-23px;margin-bottom:70px;}
.audio_2{width:207px;float:center;margin-top:-23px;margin-bottom:70px;}
.audio_3{width:308px;float:center;margin-top:-23px;margin-bottom:70px;}
.button{display:inline-block;position:absolute;width:52px;height:52px;float:center;margin-top:-13px;margin-bottom:70px;cursor:pointer;} 
.cell{padding:0px 6px;display:table-cell;}
.checkbox{float:center;width:17px;height:17px;margin-top:8px;cursor:pointer;}
.checkbutton{float:center;font-size:25px;width:158px;height:32px;line-height:7px;cursor:pointer;border-style:solid;border-radius:6px;background-color:red;}
.col-demo{float:left;width:50%;height:95%;overflow:auto;}
.col-left{float:left;width:37.5%;height:95%;overflow:auto;}
.col-center{float:left;width:25%;;height:95%;overflow:auto;}
.col-right{float:left;width:37.5%;height:95%;overflow:auto;}
.control-demo-left{position:fixed;font-size:23px;width:50%;height:33px;background-color:var(--color12);color:var(--color7);border-top:3px solid var(--color8);text-align:center;overflow:auto;z-index:999;}
.control-demo-right{position:fixed;font-size:23px;width:50%;height:33px;background-color:var(--color11);color:var(--color7);border-top:3px solid var(--color8);text-align:center;overflow:auto;z-index:999;}
.control-left{position:fixed;font-size:23px;width:37.5%;height:33px;background-color:var(--color11);color:var(--color7);border-top:3px solid var(--color8);text-align:center;overflow:auto;z-index:999;}
.control-center{position:fixed;font-size:23px;width:25.0%;height:33px;background-color:var(--color11);color:var(--color7);border-top:3px solid var(--color8);text-align:center;overflow:auto;z-index:999;}
.control-right{position:fixed;font-size:23px;width:37.5%;height:33px;background-color:var(--color11);color:var(--color7);border-top:3px solid var(--color8);text-align:center;overflow:auto;z-index:999;}
.controls{transform: translate(0%, 40%);float:center;margin-top:10px;margin-bottom:90px;font-size:16px;}
.cover{float:right;margin-left:20px;margin-right:0px;border-bottom:0px;}
.currenttime{display:inline-block;position:absolute;padding:16px 0px 0px 0px;float:center;width:78px;height:34px;margin-right:131px;border-left:1px solid var(--color15);border-top:1px solid var(--color15);border-bottom:1px solid var(--color15);border-radius: 25px 0px 0px 25px; background-color:var(--color7);color:var(--color10);margin-top:-13px;cursor:pointer;}
.div{display:flex;justify-content:center;}
.div1{display:flex;justify-content:right;}
.features{margin-left:auto;margin-right:25px;color:var(--color7);margin-top:4px;text-align:center;}
.footer-demo-left{position:fixed;bottom:0;width:50.0%;height:165px;background-color:var(--color11);color:var(--color7);text-align:center;z-index:999;}
.footer-demo-right{position:fixed;bottom:0;width:50.0%;height:165px;background-color:var(--color12);color:var(--color7);text-align:center;z-index:999;}
.footer-left{position:fixed;bottom:0;width:37.5%;;height:165px;background-color:var(--color13);color:var(--color7);text-align:center;z-index:999;}
.footer-center{position:fixed;bottom:0;width:25.0%;height:165px;background-color:var(--color2);color:var(--color7);text-align:center;z-index:999;}
.footer-right{position:fixed;bottom:0;width:37.5%;height:165px;background-color:var(--color13);color:var(--color7);text-align:center;z-index:999;}
.header{position:fixed;left:0;top:0;width:100%;height:30px;background-color:var(--color3);border-bottom:3px solid var(--color8);text-align:center;z-index:999;}
.header_left{float:left;color:var(--color7);font-size:22px;font-weight:600;margin-top:7px;margin-left:25px;margin-right:-26px;text-align:left;width:auto;} 
.header_center{font-size:22px;font-weight:600;margin-top:8px;width:auto;}
.header_search{float:right;margin-left:25px;text-align:right;min-width:100px;width:auto;}
.header_right{float:right;color:var(--color7);margin-top:0px;margin-right:25px;text-align:right;width:64px;}
.info{transform: translate(0%, -105%);margin-top:45px;overflow:hidden;white-space:nowrap;font-size:12px;font-weight:600;}
.info_j{transform: translate(0%, -105%);margin-top:54px;overflow:hidden;white-space:nowrap;font-size:12px;font-weight:600;}
.message{display:flex;justify-content:center;background-color:var(--color7);width:100%;}
.mp3table{margin:0;width:100%;display:table;}
.open{display:flex;justify-content:center;background-color:var(--color7);width:100%;z-index:1;}
.player1{overflow:hidden;height:100%;width:37.5%;float:left;margin-top:-18px;border:none;}
.player2{overflow:hidden;height:100%;width:25%;float:left;margin-top:-18px;border:none;}
.player3{overflow:hidden;height:100%;width:37.5%;float:left;margin-top:-18px;border:none;}
.remaintime{display:inline-block;position:absolute;padding:16px 0px 0px 0px;float:center;width:78px;height:34px;margin-right:-131px;border-top:1px solid var(--color15);border-bottom:1px solid var(--color15);border-right:1px solid var(--color15);border-radius: 0px 25px 25px 0px;background-color:var(--color7);color:var(--color10);margin-top:-13px;cursor:pointer;}
.row{background:var(--color11);}
.row:nth-of-type(odd){background:var(--color12);}
.row:after{content:"";display:table;clear:both;}
.row.header{background:var(--color3);font-family: font-2, sans-serif;font-size:14px;color:var(--color4);border:0;height:18px;position:relative;z-index:1;}
.row.green{background:var(--color2);}
.row.blue{background:var(--color1);}
.row-left{margin-top:43px;}
.row-center{margin-top:43px;}
.row-right{margin-top:43px;}
.span-center{color:var(--color7);margin-left:auto;margin-right:auto;width:782px;display: inline-block;height:23px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.span-demo{color:var(--color7);margin-left:auto;margin-right:auto;width:782px;display: inline-block;height:23px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.table {max-width:100%;border-color:var(--color5);margin-bottom:0px;border-right: 3px solid var(--color10);}
.volume{margin-left:auto;margin-left:25px;color:var(--color7);margin-top:4px;text-align:center;}
.wrapper{cursor: pointer;margin-left:auto;margin-right:auto;max-width:800px;padding-bottom:200px;background:var(--color7);}
::-webkit-scrollbar{width:0px;height:0px;}