/**
 * Body CSS
 */

 html,
 body {
     background-color: #eee;
     font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Helvetica, "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Arial, sans-serif;
     height: 100%;
 }
 
 html,
 body,
 input,
 textarea,
 buttons {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
 }
 
 .vertical-middle {
     vertical-align: middle;
 }
 
 /**
  * Layout CSS
  */
 
 #header {
     position: fixed;
     top: 0;
     right: 0;
     left: 0;
     z-index: 2;
     transition: left 0.3s;
 }
 
 #titles {
     line-height: 1rem;
     padding-top: 0.375rem;
 }
 
 #titles p {
     display: inline;
 }
 
 #sidedrawer {
     bottom: 0;
     left: -250px;
     overflow: auto;
     position: fixed;
     top: 0;
     transition: transform 0.3s;
     width: 250px;
     z-index: 2;
 }
 
 #content-wrapper {
     background-color: #fff;
     display: flex;
     margin-left: 0px;
     height: calc(100% - 88px);
     overflow: hidden;
     transition: margin-left 0.3s;
 
     /* sticky bottom */
     box-sizing: border-box;
 }
 
 .cover {
     background-color: #333;
     background-size: cover;
     background-position: center;
     display: flex;
     min-width: 100%;
     filter: blur(.5px) brightness(.5) opacity(.75);
     -webkit-filter: blur(.5px) brightness(.5) opacity(.75);
 }
 
 /* #cover {
   display: block;
   margin: 0 auto;
   height: calc(100vh - 88px - 6.5rem);
   object-fit: cover;
 } */
 
 .info {
     align-self: flex-end;
     color: #fff;
     display: flex;
     flex-wrap: wrap;
     margin-left: -100vw;
     margin-top: 4rem;
     max-height: calc(100vh - 7rem - 88px);
     min-width: 100%;
     transition: margin-left 0.3s;
     z-index: 3;
 }
 
 .info .lyric,
 .info .mui--text-caption {
     display: block;
     width: 100%;
 }
 
 .info .mdl-slider__container {
     width: 100%;
 }
 
 #lyricText {
     display: inline-block;
     list-style-type: none;
     margin-bottom: 0;
     max-height: 19.5rem;
     overflow: hidden;
     padding: 0;
     text-align: center;
     white-space: nowrap;
     width: 100%;
 }
 
 @-webkit-keyframes color-change {
     0% {}
 
     100% {
         color: rgb(244, 88, 132);
         font-weight: bold;
         text-shadow: 1px 1px rgba(0, 0, 0, 0.26);
     }
 }
 
 @-moz-keyframes color-change {
     0% {}
 
     100% {
         color: rgb(244, 88, 132);
         font-weight: bold;
         text-shadow: 1px 1px rgba(0, 0, 0, 0.26);
     }
 }
 
 @-ms-keyframes color-change {
     0% {}
 
     100% {
         color: rgb(244, 88, 132);
         font-weight: bold;
         text-shadow: 1px 1px rgba(0, 0, 0, 0.26);
     }
 }
 
 @-o-keyframes color-change {
     0% {}
 
     100% {
         color: rgb(244, 88, 132);
         font-weight: bold;
         text-shadow: 1px 1px rgba(0, 0, 0, 0.26);
     }
 }
 
 @keyframes color-change {
     0% {}
 
     100% {
         color: rgb(244, 88, 132);
         font-weight: bold;
         text-shadow: 1px 1px rgba(0, 0, 0, 0.26);
     }
 }
 
 @-webkit-keyframes color-origin {
     0% {}
 
     100% {
         color: white;
         font-weight: normal;
         text-shadow: none;
     }
 }
 
 @-moz-keyframes color-origin {
     0% {}
 
     100% {
         color: white;
         font-weight: normal;
         text-shadow: none;
     }
 }
 
 @-ms-keyframes color-origin {
     0% {}
 
     100% {
         color: white;
         font-weight: normal;
         text-shadow: none;
     }
 }
 
 @-o-keyframes color-origin {
     0% {}
 
     100% {
         color: white;
         font-weight: normal;
         text-shadow: none;
     }
 }
 
 @keyframes color-origin {
     0% {}
 
     100% {
         color: white;
         font-weight: normal;
         text-shadow: none;
     }
 }
 
 #duration {
     margin-bottom: 4px;
 }
 
 .control {
     display: table;
     max-width: 100%;
     margin: 0 auto;
 }
 
 .loop {
     height: 36px;
     margin-right: 1.25rem;
     min-width: 36px;
     padding: 0;
 }
 
 .loop .material-icons {
     color: #fff;
     font-size: 1.25rem;
     line-height: 1.25rem;
     margin-top: -4px;
     width: 1.25rem;
 }
 
 .prev {
     height: 40px;
     min-width: 40px;
     padding: 0;
 }
 
 .prev .material-icons {
     color: #fff;
     font-size: 2rem;
     line-height: 2rem;
     margin-top: -4px;
     width: 2rem;
 }
 
 .play {
     background: none;
     box-shadow: initial;
     margin: 0 1.5rem;
 }
 
 .play .material-icons {
     color: #fff;
     font-size: 56px;
     line-height: normal;
     margin-left: -16px;
     margin-top: -16px;
     width: 56px;
 }
 
 .play .power {
     font-size: 48px;
     margin-left: -12px;
     margin-top: -12px;
     width: 48px;
 }
 
 .next {
     height: 40px;
     min-width: 40px;
     padding: 0;
 }
 
 .next .material-icons {
     color: #fff;
     font-size: 2rem;
     line-height: 2rem;
     margin-top: -4px;
     width: 2rem;
 }
 
 .shuffle {
     height: 36px;
     margin-left: 1.25rem;
     min-width: 36px;
     padding: 0;
 }
 
 .shuffle .material-icons {
     color: #fff;
     font-size: 1.25rem;
     line-height: 1.25rem;
     margin-top: -4px;
     width: 1.25rem;
 }
 
 .loop .hover,
 .shuffle .hover {
     color: rgb(240, 187, 215);
 }
 
 @media (min-width: 768px) {
     #header {
         left: 250px;
     }
 
     #sidedrawer {
         transform: translate(250px);
     }
 
     #content-wrapper {
         margin-left: 250px;
     }
 
     .info {
         margin-left: calc(-100vw + 250px);
         max-height: calc(100vh - 4rem - 88px);
     }
 
     #footer {
         margin-left: 250px;
     }
 
     body.hide-sidedrawer #header {
         left: 0;
     }
 
     body.hide-sidedrawer #sidedrawer {
         transform: translate(0px);
     }
 
     body.hide-sidedrawer #content-wrapper {
         margin-left: 0;
     }
 
     body.hide-sidedrawer .info {
         margin-left: -100vw;
     }
 
     body.hide-sidedrawer #footer {
         margin-left: 0;
     }
 }
 
 
 /**
  * Toggle Sidedrawer
  */
 #sidedrawer.active {
     background-color: #eee;
     transform: translate(250px);
 }
 
 
 /**
  * Header CSS
  */
 
 .sidedrawer-toggle {
     color: #fff;
     cursor: pointer;
     margin-right: 12px;
 }
 
 .sidedrawer-toggle:hover {
     color: #fff;
     text-decoration: none;
 }
 
 
 /**
  * Sidedrawer CSS
  */
 
 #sidedrawer-brand {
     background-image: url(../images/image-asset.webp);
     background-size: cover;
     color: #fff;
     padding: 16px;
     text-align: center;
 }
 
 .jpeg2000 #sidedrawer-brand {
     background-image: url(../images/image-asset.jp2);
 }
 
 .no-webp #sidedrawer-brand {
     background-image: url(../images/image-asset.svg);
 }
 
 #sidedrawer-brand img {
     /* -moz-border-radius: 100%;
     -webkit-border-radius: 100%;
     border-radius: 100%; */
     max-width: 248px;
     /* object-fit: cover; */
 }
 
 #sidedrawer-brand span {
     font-size: 1.15rem;
 }
 
 #sidedrawer ul {
     list-style: none;
 }
 
 #sidedrawer>ul {
     padding-left: 0px;
 }
 
 /* #sidedrawer > ul > li:first-child {
     padding-top: 16px;
 } */
 
 #sidedrawer strong {
     display: block;
     padding: 16px 22px;
     cursor: pointer;
 }
 
 #sidedrawer strong:hover {
     background-color: #E0E0E0;
 }
 
 #sidedrawer strong+ul>li {
     padding: 8px 0px;
 }
 
 
 /**
  * Footer CSS
  */
 
 #footer {
     background-color: rgb(235, 134, 152);
     box-sizing: border-box;
     height: 88px;
     color: #fff;
     line-height: 1rem;
     transition: margin-left 0.3s;
 }
 
 #footer a {
     color: #fff;
     text-decoration: underline;
 }