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

@keyframes backBlurOn {
    0%       { filter: blur(0px) brightness(100%); }
    100%     { filter: blur(15px) brightness(50%); }
}
@keyframes backBlurOff {
    0%       { filter: blur(15px) brightness(50%); }
    100%     { filter: blur(0px) brightness(100%); }
}
@keyframes menuDisplayOn {
    0%       { opacity: 0; transform: scale(2); }
    20%      { opacity: 0; }
    100%     { opacity: 1; transform: scale(1); }
}
@keyframes menuDisplayOff {
    0%       { opacity: 1; transform: scale(1); }
    50%      { opacity: 0; }
    100%     { opacity: 0; transform: scale(2); }
}

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; }

.wrapper     { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.wrapper-0   { animation: backBlurOff 0.5s; animation-fill-mode: forwards; }
.wrapper-1   { animation: backBlurOn 0.5s; animation-fill-mode: forwards; }
#album       { position: absolute; top: 65%; left: 15%; width: 128px; height: 128px; box-shadow: 4px 4px 3px rgba(0,0,0,0.25); background-image: url(back.jpeg); background-size: cover; background-repeat: no-repeat; background-position: center; }
#title       { font-size: 60px; text-transform: uppercase; cursor: default; text-shadow: 4px 4px 3px rgba(0,0,0,0.25); font-family: 'Montserrat'; 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; }
.back        { position: absolute; top: -10%; left: -10%; height: 120%; width: 120%; background: url(back.jpeg) center center; z-index: -1; background-size: cover; filter: brightness(50%); }
.text        { position: absolute; top: 65%; left: calc(15% + 146px); width: calc(70% - 146px); height: 128px; display: flex; align-items: center; }

.back-can    { position: absolute; top: -30px; left: -30px; height: calc(100% + 60px); width: calc(100% + 60px); z-index: -1; }

.tabs        { top: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
.tabs-wrap   { position: absolute; top: 40px; bottom: 40px; left: 40px; right: 40px; display: none; }
.tabs-wrap-0 { animation: menuDisplayOff 0.5s }
.tabs-wrap-1 { animation: menuDisplayOn 0.5s }

.tabs-line   { border-bottom: 2px solid white; height: 26px; padding: 5px; width: auto; }
.tabs-buttons{ margin-bottom: 7px; }
.tabs-buttons::after { content: ""; clear: both; display: table; }
.tabs-button { position: relative; height: 26px; padding: 5px 15px; float: left; text-align: center; transition: 0.2s color, 0.2s border-bottom-color; font-size: 18px; line-height: 26px; }
.tabs-sel    { border-bottom: 2px solid #458cff; color: #458cff; cursor: default; user-select: none; }
.tabs-notsel { border-bottom: 2px solid white; color: white; cursor: pointer; user-select: none; }
.tabs-notsel:hover { border-bottom-color: #aecdff; color: #aecdff }
.tabs-text   { font-size: 12px; line-height: 26px; padding-left: 10px; display: inline-block}

.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(100% - 83px); 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; transition: width 0.4s ease-out }
.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-div { position: relative; width: 100%; height: 32px; margin: 3px 0; }
.track-alb { position: relative; width: 32px; height: 32px; background-size: cover; background-image: linear-gradient(-45deg, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); background-position: center; display: inline-block }
.track-tit { position: relative; margin: 0 10px; font-size: 10px; display: inline-block; line-height: 32px; color: #999; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 20%; }
.track-sun { font-family: 'Montserrat2'; position: relative; display: inline-block; line-height: 32px; font-size: 10px; color: white; right: 50px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 70%; }
.track-time{ font-family: 'Montserrat2'; position: relative; display: inline-block; line-height: 32px; font-size: 10px; color: white; width: calc(10% - 52px); text-align: center; overflow: hidden; }