@font-face   { font-family: 'Montserrat'; src: url('Montserrat-Medium.otf'); }
@font-face   { font-family: 'Montserrat2'; src: url('Montserrat-Light.otf'); }

body         { font-family: 'Montserrat'; color: white; padding: 0; margin: 0; overflow: hidden; user-select: none; }
canvas       { position: absolute; top: 25%; left: 15%; user-select: none; }

#title       { font-size: 60px; text-transform: uppercase; cursor: default; text-shadow: 4px 4px 3px rgba(0,0,0,0.25); user-select: none; }
#subtitle    { font-size: 30px; text-transform: uppercase; cursor: default; text-shadow: 4px 4px 3px rgba(0,0,0,0.25); font-family: 'Montserrat2'; user-select: none; }
#album       { position: absolute; top: 65%; left: 15%; width: 128px; box-shadow: 4px 4px 3px rgba(0,0,0,0.25); height: 128px; background-image: url(back.jpeg); background-size: cover; background-repeat: no-repeat; background-position: center; }

.back        { background: url(back.jpeg) center center; z-index: -1; background-size: cover; position: absolute; top: -10%; filter: brightness(50%); left: -10%; height: 120%; width: 120%; }
.text        { display: flex; align-items: center; position: absolute; top: 65%; left: calc(15% + 146px); width: calc(70% - 146px); height: 128px; }
.folder      { padding: 0 5px; border-left: 4px solid grey; color: white; font-family: 'Montserrat'; height: 30px; line-height: 30px; font-size: 16px; text-transform: uppercase; }
.track       { position: relative; overflow: hidden; transition: 0.1s all; }
.track:hover { background: rgba(255,255,255,0.2) }
.track-t     { position: relative; margin-left: 10px; font-size: 14px; display: inline-block; line-height: 18px; color: white; }
.track-s     { position: relative; margin-left: 50px; font-size: 12px; border-bottom: 1px solid #444; vertical-align: top; margin-top: 2px; display: inline-block; text-align: right; width: 240px; color: #aaa; }
.trackshow   { height: calc(100vh - 150px); overflow-y: auto; }
.bottombar   { background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)); z-index: 99; position: absolute; top: 100vh; left: 0; width: 100%; transition: 0.5s all; height: 100px; }
.button-list { position: absolute; bottom: 25px; left: 0; width: 100%; text-align: center; }
.button-play { font-size: 48px; color: white; position: inline-block; margin: 0 10px; text-shadow: 4px 4px 3px rgba(0,0,0,0.25); user-select: none; cursor: pointer; }
.button-chan { font-size: 22px; color: white; position: inline-block; margin: 0 5px; text-shadow: 4px 4px 3px rgba(0,0,0,0.25); user-select: none; cursor: pointer; }
.timeline    { position: absolute; left: 20px; width: calc(100% - 40px); height: 5px; background: #444; bottom: 10px; box-shadow: 4px 4px 3px rgba(0,0,0,0.25); }
.timelino    { position: relative; height: 5px; background: white; }
.durat       { color: white; position: absolute; right: 20px; bottom: 25px; text-align: right: font-size: 22px; text-shadow: 4px 4px 3px rgba(0,0,0,0.25); }
.footer      { position: fixed; bottom: 5px; left: 0; font-family: 'Montserrat2'; right: 10px; text-align: right; text-shadow: 4px 4px 3px rgba(0,0,0,0.25); color: #ddd }
.botom-bar   { position: absolute; top: 100px; left: 0; width: 100%; height: calc(100vh - 100px); background: rgba(0,0,0,0.7) }

.bot-barko   { position: absolute; top: 0; left: 0px; width: 64px; height: 100%; background: rgba(0,0,0,0.1) }
.butos       { position: relative; cursor: pointer; padding-top: 15px; color: white; font-size: 28px; text-align: center; transition: 0.25s all; border-left: 3px solid #ccc; height: 64px; }
.butos-s     { font-family: 'Montserrat2'; text-align: center; font-size: 10px; position: absolute; bottom: 5px; left: 0; width: 100%; }
.butos-menu  { position: absolute; font-size: 24px; cursor: pointer; bottom: 25px; left: 20px; z-index: 10000 }
.butos-men-b { font-size: 16px; margin: 0 2px; color: #888; }
.butos-men-a { font-size: 18px; margin: 0 2px; color: white; }

.optio-h     { cursor: context-menu; padding: 0 5px; border-left: 4px solid #aaa; color: white; padding-left: 10px; font-family: 'Montserrat'; margin-top: 15px; height: 50px; line-height: 50px; font-size: 32px; text-transform: uppercase; }
.optio       { cursor: context-menu; padding: 0 5px; color: white; font-family: 'Montserrat'; margin-top: 15px; height: 30px; line-height: 30px; font-size: 16px; text-transform: uppercase; }
.optio-desc  { cursor: context-menu; padding: 0 5px 5px 5px; margin-bottom: 5px; color: #ccc; font-family: 'Montserrat2'; font-size: 12px; }
.optio-buto  { border-left: 4px solid #333; transition: 0.2s all; background-position: -100px 0; background-size: 100px 1px; background-repeat-x: no-repeat; font-family: 'Montserrat2'; font-size: 12px; padding: 5px; cursor: pointer; }
.optio-buto:hover { background-position: 0px 0; }

.fill-barko  { position: absolute; top: 0; left: 74px; right: 10px; height: 100%; overflow-y: auto; }
input[type="range"] { -webkit-appearance: none; transition: 0.5s background; border-radius: 2px; background-color: rgba(123,123,123,0.4); width: 100px; height: 4px; margin: 5px 0; position: absolute; bottom: 30px; left: 145px; z-index: 10000 }
input[type="range"]:hover { background-color: #ddd; }
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-thumb { background-color: white; -webkit-appearance: none; border: 1px solid #000000; height: 16px; width: 8px; border-radius: 3px; background: #ffffff; cursor: pointer; margin-top: -2px; 0px 0px 1px #0d0d0d; }

.butos:hover { background: #222; color: #777 !important; border-left-color: #777 !important }
.trackshow::-webkit-scrollbar-track   { }
.trackshow::-webkit-scrollbar         { width: 10px; background: rgba(83,83,83,0.4) }
.trackshow::-webkit-scrollbar-thumb   { background-color: #777; border-radius: 0px; }
.fill-barko::-webkit-scrollbar-track   { }
.fill-barko::-webkit-scrollbar         { width: 10px; background: rgba(83,83,83,0.4) }
.fill-barko::-webkit-scrollbar-thumb   { background-color: #777; border-radius: 0px; }

.track-alb { position: relative; width: 128px; height: 128px; background-size: cover; background-image: linear-gradient(-45deg, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); background-position: center; margin: 10px 10px 35px 10px; float: left; }
.track-tit { position: absolute; top: 134px; left: 0; font-size: 10px; color: #999; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 128px; }
.track-sun { font-family: 'Montserrat2'; position: absolute; top: 148px; left: 0; font-size: 10px; color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 128px; }