:root{--shadow-height:6px;--box-height:70px;--main-font-size:1.45rem;--dropdown-width:200px}@font-face{font-family:PTM;src:url(./PTM75F.B2YrLDmf.ttf)}*{box-sizing:border-box;margin:0;padding:0;font-family:PTM,serif;font-size:var(--main-font-size);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{font-size:100%;background:var(--page-background-color)}a,html{color:var(--default-dark-color)}a{text-decoration:none}span.condense,span.condense-center{display:inline-block;transform:scaleX(.8);-webkit-transform:scaleX(.8);width:125%;flex-shrink:0;flex-grow:0}span.condense{transform-origin:left}span.condense-center{text-align:center;transform-origin:center}header{display:flex;justify-content:space-between;padding-top:10vh;margin-bottom:15vh}#wbi-logo-wrapper{display:block;background:var(--default-dark-color);height:var(--box-height)}#wbi-logo-wrapper .wbi-logo{margin:0 20px;display:block;line-height:var(--box-height);color:var(--default-light-color);overflow:hidden;display:flex;align-items:center;justify-content:center}#wbi-logo-wrapper:after{content:"";display:block;height:var(--shadow-height);border:2px solid var(--default-dark-color);background:var(--default-light-color)}#nav-right{display:flex;justify-content:flex-end;align-items:top;-moz-column-gap:10px;column-gap:10px}#search-button{display:block;line-height:var(--box-height);border:2px solid var(--default-dark-color);width:60px;align-self:start;background:var(--default-light-color)}#search-button svg{position:relative;top:2px;height:70px;width:45px;display:block;margin:0 auto;padding:0 10px;fill:var(--default-dark-color)}#search-button:after{content:"";display:block;height:var(--shadow-height);background:var(--default-dark-color)}#search-button:hover{background:var(--default-dark-color);color:var(--default-light-color)}#search-button:hover svg{fill:var(--default-light-color)}#search-button:hover:after{background:var(--default-light-color)}.login-menu-button{display:block;border:2px solid var(--default-dark-color);color:var(--default-dark-color);overflow:hidden}.login-menu-button a{display:block;width:100%}.login-menu-button span{padding-left:2vw}.login-menu-button:after{content:"";display:block;height:var(--shadow-height);background:var(--default-dark-color)}.login-menu-button:hover{background:var(--default-dark-color)}.login-menu-button:hover,.login-menu-button:hover a{color:var(--default-light-color)}.login-menu-button:hover:after{background:var(--default-light-color)}.user-dropdown{position:relative;line-height:var(--box-height);width:var(--dropdown-width);cursor:pointer}.user-dropdown ul li a{overflow:hidden}.user-dropdown-button{background:var(--default-light-color);display:block;border:2px solid var(--default-dark-color);color:var(--default-dark-color);overflow:hidden}.user-dropdown-button span{padding-left:2vw}.user-dropdown-button:after{content:"";display:block;height:var(--shadow-height);background:var(--default-dark-color)}.user-dropdown-button:hover{background:var(--default-dark-color);color:var(--default-light-color)}.user-dropdown-button:hover:after{background:var(--default-light-color)}.dropdown-content{display:none;position:absolute;overflow:auto;z-index:999999;width:var(--dropdown-width)}.dropdown-content a{display:block;background:var(--default-light-color);border:2px solid var(--default-dark-color);margin-top:1vh}.dropdown-content a span{padding-left:2vw}.dropdown-content a:hover{background:var(--default-dark-color);color:var(--default-light-color)}.show{display:block}.hidden{visibility:hidden}.container{width:80vw;max-width:1500px;margin:0 auto 200px}.single-track-player{width:80vw;max-width:1500px;margin-bottom:30px}.single-track-player:after{content:"";display:block;height:var(--shadow-height);background:var(--default-dark-color)}.title-bar{display:flex;justify-content:center;align-items:center;border:2px solid var(--default-dark-color)}.title-bar a{display:block;padding:auto 2vw;background:var(--default-light-color);color:var(--default-dark-color);overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}.title-bar a:hover{background:var(--default-dark-color);color:var(--default-light-color);cursor:pointer}.title-bar .title-track-link{width:100%;padding:10px 2vw;align-self:stretch;display:flex;align-items:center}.title-bar .title-track-link span{align-self:center}.title-bar .delete-button,.title-bar .download-button{padding-left:1vw;padding-right:1vw;flex-shrink:0;align-self:stretch;display:flex;align-items:center;justify-content:center;border-left:2px solid var(--default-dark-color)}.title-bar .delete-button svg,.title-bar .download-button svg{align-self:center;display:block;flex-shrink:0;height:50px;padding:8px 0 10px;stroke:var(--default-dark-color);fill:var(--default-light-color);stroke-width:5}.title-bar .delete-button:hover svg,.title-bar .download-button:hover svg{stroke:var(--default-light-color);fill:var(--default-dark-color)}.control-container{display:flex;background:var(--player-color);border:2px solid var(--default-dark-color);border-top:none;padding:1vw 2vw}.playback-controls{width:15vw;flex-shrink:0}.play-pause{background:var(--default-light-color);border:2px solid var(--default-dark-color);height:75px;cursor:pointer;display:flex;justify-content:center;align-items:center}.play-pause svg{height:50px;fill:var(--default-dark-color)}.play-pause:hover svg{fill:var(--default-light-color)}.playing{background:var(--default-light-color);background-repeat:no-repeat;background-size:auto 500%;background-position:center 34%}.playing:hover{background-position:center 96.5%;background:var(--default-dark-color)}.playing .loading-indicator,.playing .play{display:none}.paused{background:var(--default-light-color);background-repeat:no-repeat;background-size:auto 500%;background-position:center 3%}.paused:hover{background-position:center 65.5%;background:var(--default-dark-color)}.paused .loading-indicator,.paused .pause{display:none}.loading{background:var(--default-light-color);color:var(--default-dark-color)}.loading .pause,.loading .play{display:none}.loading .loading-indicator{display:flex}.loading:hover{color:var(--default-light-color)}.loading:hover .loading-indicator-item{background:var(--default-light-color)}.time-container{margin-top:10px;height:40px;display:flex}.current-time,.total-time{background:var(--default-light-color);border:2px solid var(--default-dark-color);width:50%;height:100%;display:flex;align-items:center;justify-content:center}.current-time{border-right:1px solid var(--default-dark-color)}.total-time{border-left:1px solid var(--default-dark-color)}.waveform{width:100%;margin-left:25px;cursor:pointer;position:relative}.wave-progress-wrapper{position:absolute;overflow:hidden;width:0}.main-player{position:fixed;bottom:0;z-index:9999;background:var(--player-color);width:100%}.title-bar-main{background:var(--default-dark-color);white-space:nowrap;overflow:hidden}.title-bar-main a{display:block;height:50px;margin:0 auto;width:80vw;max-width:1500px;padding-left:2vw;padding-top:10px;border:2px solid var(--default-dark-color);position:relative}.title-bar-main a,.title-bar-main a:hover{background:var(--default-dark-color);color:var(--default-light-color)}.title-bar-main a:hover{cursor:pointer}.title-bar-main a .marquee-content,.title-bar-main a .marquee-content-moving{display:inline-block}.title-bar-main a .marquee-content-moving-duplicate{display:none;margin-left:20vw}.title-bar-main.marquee .marquee-content{animation:marquee 10s ease-in-out infinite}.title-bar-main.marquee .marquee-content-moving-duplicate{display:inline}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(calc(-50% - 10vw))}}.control-container-main{display:flex;width:80vw;max-width:1500px;margin:0 auto;padding:2vw}.play-pause-main{background:var(--default-light-color);border:2px solid var(--default-dark-color);width:6vw;height:40px;cursor:pointer;flex-shrink:0;display:flex;justify-content:center;align-items:center}.play-pause-main svg{height:25px;fill:var(--default-dark-color)}.play-pause-main:hover svg{fill:var(--default-light-color)}.progress-container-main{display:flex;width:100%;height:40px;background:var(--default-light-color);border:2px solid var(--default-dark-color);margin:0 25px}.current-time-main{border-right:2px solid var(--default-dark-color);display:flex;align-items:center;justify-content:center}.volume-container{display:flex;flex-shrink:0;height:40px;border:2px solid var(--default-dark-color);width:200px}.volume-container,.volume-icon{background:var(--default-light-color)}.volume-icon{width:50px;height:36px;padding:0 5px;border-right:2px solid var(--default-dark-color)}.volume-icon svg{position:relative;top:7px;width:25px;fill:var(--default-dark-color)}.bottom{height:160px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:10px;width:100%;min-width:20px;height:15px;background-size:100% 100%;background-repeat:no-repeat;border:2px solid var(--default-dark-color);cursor:pointer}input[type=range].track-progress{background-image:linear-gradient(var(--default-dark-color),var(--default-dark-color));height:125px;margin:0}input[type=range].track-progress::-webkit-slider-thumb{opacity:0}input[type=range].track-progress::-moz-range-thumb{opacity:0}input[type=range].track-progress::-ms-thumb{opacity:0}input[type=range].main-track-progress{background-image:linear-gradient(to right,var(--input-range-color) var(--main-track-progress),var(--default-light-color) var(--main-track-progress))}input[type=range].main-volume{background-image:linear-gradient(to right,var(--input-range-color) var(--main-volume),var(--default-light-color) var(--main-volume))}input[type=range]:active,input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:2px solid var(--default-dark-color);height:15px;width:15px;border-radius:10px;background:var(--default-dark-color);cursor:pointer}input[type=range]::-webkit-slider-thumb:before{position:absolute;content:"";height:15px;width:500px;left:-132px;top:8px;background:#777}input[type=range]::-moz-range-thumb{border:2px solid var(--default-dark-color);height:15px;width:15px;border-radius:10px;background:var(--default-dark-color);cursor:pointer}input[type=range]::-moz-range-thumb:before{position:absolute;content:"";height:15px;width:500px;left:-132px;top:8px;background:#777}input[type=range]::-ms-thumb{border:2px solid var(--default-dark-color);height:15px;width:15px;border-radius:10px;background:var(--default-dark-color);cursor:pointer}.loading-box{width:30%;margin:0 auto 3vh;background:var(--default-light-color)}.loading-box .loading-box-inner{display:flex;text-align:center;justify-content:center;align-items:center;height:var(--box-height);border:2px solid var(--default-dark-color)}.loading-box .loading-box-inner .loading-indicator{display:flex;width:10%}.loading-box .loading-box-inner span{padding:20px}.loading-box:after{content:"";display:block;background:var(--default-dark-color);height:var(--shadow-height)}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}input[type=range]::-moz-range-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border:none;background:transparent}input[type=range]::-ms-track{-webkit-appearance:none;appearance:none;box-shadow:none;border:none;background:transparent}.loading-indicator{--animation-duration:1s;width:20%;height:50%;justify-content:center;align-items:center;gap:10%;position:relative;top:10%}.loading-indicator .loading-indicator-item{height:65%;background:var(--default-dark-color);width:20%;flex-shrink:0;animation:spinner5 1s ease-in-out infinite}@keyframes spinner5{25%{transform:scaleY(1.5);transform-origin:bottom}50%{transform:scaleY(1)}}.loading-indicator .loading-indicator-item:nth-child(2){animation-delay:.1s}.loading-indicator .loading-indicator-item:nth-child(3){animation-delay:.2s}.loading-indicator .loading-indicator-item:nth-child(4){animation-delay:.3s}.loading-indicator .loading-indicator-item:nth-child(5){animation-delay:.4s}.loading-indicator .loading-indicator-item:nth-child(6){animation-delay:.5s}@media screen and (min-width:2000px){.playback-controls{width:10vw}.play-pause-main{width:3vw}}@media screen and (max-width:900px){.volume-container{display:none}.progress-container-main{margin-right:0;margin-left:2vw}.control-container,.control-container-main{padding:2vw}.playback-controls{width:20vw}.play-pause-main{width:10vw}}@media screen and (max-width:650px){.title-bar .title-track-link,.title-bar a{padding:8px 4vw}.title-bar .delete-button,.title-bar .download-button{padding:0 4vw}#nav-right{width:100%;margin-top:20px}.user-dropdown{width:auto;flex-grow:500}.user-dropdown span{padding-left:4vw}.dropdown-content{position:static;width:100%}header{display:block;padding-top:5vh!important;margin-bottom:5vh}.control-container,.control-container-main{padding:3vw 2vw}.control-container{flex-direction:column}.playback-controls,.waveform{width:85%;margin:auto}.waveform{margin-top:15px}span[class*=commented-],span[class*=uploaded-]{display:none}.loading-box{width:80vw}}@media screen and (max-width:500px){.control-container,.control-container-main{padding:4vw 2vw}.play-pause-main{width:15vw}}#fileToUpload{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}#fileToUpload+label{display:flex;align-items:center;justify-content:center;background:var(--default-light-color);min-height:10vh;padding:3vh 2vh;margin:10px;cursor:pointer;text-align:center}#fileToUpload+label,.upload-button-shadow{border:2px solid var(--default-dark-color)}.upload-button-shadow{height:1vh;background:var(--default-dark-color);width:30%;margin:auto}#fileToUpload+label:hover,#fileToUpload:focus+label{background:var(--default-dark-color);color:var(--default-light-color)}#fileToUpload+label:hover+.upload-button-shadow,#fileToUpload:focus+label+.upload-button-shadow{background:var(--default-light-color);border-top:0}#fileToUpload:focus+label,#fileToUpload:focus+label+.upload-button-shadow{outline:1px dotted var(--default-dark-color);outline:5px auto -webkit-focus-ring-color}.upload-header{margin:0 20px;text-align:center;display:flex;align-items:center;justify-content:center}.upload-header span{font-size:3rem}.box-error,.box-success,.box-uploading{display:none}.upload-form{height:60vh;background:var(--default-light-color);display:flex;flex-flow:column wrap;align-items:center;justify-content:center}.upload-form-shadow{content:"";display:block;height:2vh;background:var(--default-dark-color)}.upload-form.has-advanced-upload,.upload-form.is-dragover{border:2px solid var(--default-dark-color)}.upload-form.is-dragover{background:linear-gradient(90deg,var(--highlight-color) 50%,transparent 50%),linear-gradient(90deg,var(--highlight-color) 50%,transparent 50%),linear-gradient(0deg,var(--highlight-color) 50%,transparent 50%),linear-gradient(0deg,var(--highlight-color) 50%,transparent 50%);background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-size:200px 40px,200px 40px,40px 200px,40px 200px;background-position:0 0,100% 100%,0 100%,100% 0;animation:border-dance 16s linear infinite}@keyframes border-dance{0%{background-position:0 0,150% 100%,0 200%,100% 0}to{background-position:150% 0,0 100%,0 0,100% 200%}}.upload-form.is-uploading .box__input{visibility:none}.upload-form.is-uploading .box__uploading{display:block}@media screen and (max-width:650px){#fileToUpload+label,.upload-button-shadow{width:60vw}}.message-box-green,.message-box-red{position:relative}.message-box-green div,.message-box-red div{display:flex;align-items:center;justify-content:center;padding:0 10px}.message-box-green,.message-box-red{width:20%;text-align:center;background:var(--default-light-color);position:absolute;margin:-10vh auto 3vh;left:0;right:0;z-index:100;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}.message-box-green span,.message-box-red span{display:inline-block;margin:2vh auto}.message-box-red{color:var(--message-box-red-color)}.message-box-red,.message-box-red:after{border:2px solid var(--message-box-red-color)}.message-box-red:after{content:"";display:block;height:1vh;background:var(--message-box-red-color)}.message-box-green{color:var(--message-box-green-color)}.message-box-green,.message-box-green:after{border:2px solid var(--message-box-green-color)}.message-box-green:after{content:"";display:block;height:1vh;background:var(--message-box-green-color)}@media screen and (max-width:900px){.message-box-green,.message-box-red{width:40%}}@media screen and (max-width:650px){.message-box-green,.message-box-red{width:80vw;position:relative;margin-top:0}}