@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai+Looped&display=swap);body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}body{overscroll-behavior-y:contain;background-color:#121212;color:#fff;font-family:"IBM Plex Sans Thai Looped",sans-serif}:root{--max-width:700px}#root{max-width:700px;max-width:var(--max-width);margin:auto;box-shadow:-1px 0 25px #883227;position:relative}button,input{font-family:"IBM Plex Sans Thai Looped",sans-serif;outline:none;-webkit-tap-highlight-color:transparent}button:disabled{color:grey;cursor:not-allowed}.btn_reload{background:none;border:none;color:#fff;font-size:.9rem;margin:auto}.btn_reload,.btn_reload>small{display:block}.btn_follow{position:absolute;top:-25px;left:0;font-weight:700;color:#d3d3d3;background:none;border:2px solid;border-radius:5px;font-size:.8rem}::selection{background:#1db954}::-moz-selection{background:#1db954}.info_btn{border:none;background:rgba(0,0,0,.85);font-weight:700;font-size:.8rem;width:20px;height:20px;border-radius:50%;position:absolute;right:1rem;top:1rem;color:#fff}.bg{height:300px;background-image:url(/static/media/jose.d8c33d35.jpg);background-attachment:fixed;background-position-x:center;background-position-y:-50px;background-size:cover;background-repeat:no-repeat;-webkit-filter:grayscale(.3);filter:grayscale(.3)}.scrollable{padding:1rem 1rem 100px}button{cursor:pointer}.header{height:0;position:relative}.header .title{font-size:2.5rem;-webkit-transform:translateY(-105px);transform:translateY(-105px)}.btnPlayAll{width:55px;height:55px;border-radius:50%;background-color:#1db954;border:none;position:sticky;top:1rem;float:right;z-index:20;display:flex;justify-content:center;align-items:center}.btnPlayAll span{font-size:30px;position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.track_list{list-style-type:none;margin:0;padding:0;text-align:left}.track_list>li{padding:.5rem 0;margin:.25rem 0}.track_list.loading{-webkit-animation-name:load;animation-name:load;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:2s;animation-duration:2s}.track_list.loading>li{display:flex}.streams,.track_duration{opacity:1;transition:all .5s ease}.streams{position:absolute;left:0;bottom:0}.hidden{opacity:0}.l1,.l2>span{background-color:#a9a9a9;display:block;border-radius:2.5px}.l2{display:flex;align-items:flex-start;flex-direction:column;height:40px;width:250px}.l2 span:first-child{width:70%;height:1rem}.l2 span:last-child{width:40%;height:1rem;margin-top:.5rem}@-webkit-keyframes load{0%{opacity:.25}50%{opacity:1}to{opacity:.25}}@keyframes load{0%{opacity:.25}50%{opacity:1}to{opacity:.25}}.track_wrapper{display:flex;justify-content:space-between}.track_wrapper .clickable{display:flex;max-width:200px}.track_wrapper.new_release{padding:.5rem}.track_wrapper.new_release .img{border-radius:50%;width:50px;height:50px;margin-left:0}.track_list>li:hover{background-color:#5a5a5a;border-radius:5px}li:hover .track_nr_hidden{display:inherit}li:hover button.track_nr_hidden{display:flex;align-items:center}li:hover .play_animation,li:hover .track_nr_visible{display:none}.track_nr_hidden{display:none;border:none;background:none;margin:0;padding:0;font-size:1rem;color:#fff}.track_wrapper>div{display:flex}.track_nr{font-size:.8rem;align-self:center;margin-left:1rem;margin-right:.5rem;display:block;width:15px}.img{width:45px;height:45px;margin:0 1rem}.track_title{align-self:flex-start;display:block;white-space:nowrap;position:relative}.track_title.expl:after{content:"explicit";background:#a9a9a9;color:#d3d3d3;position:absolute;top:5px;right:-55px;z-index:100;width:45px;text-align:center;font-size:.7rem;font-weight:700;border-radius:5px}.track_wrapper.new_release .track_title{max-width:unset}.track_title>small{font-size:.7em;color:grey;display:block}.track_ctx{font-size:1.5rem;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.expand_tracklist,.track_ctx{border:none;background:none;color:grey;font-weight:700}.expand_tracklist{font-size:.7rem;padding:.5rem;margin:auto;display:block}.current_track{position:fixed;width:100%;max-width:700px;max-width:var(--max-width);bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#181818;height:60px;display:flex;justify-content:space-between}.current_track img{width:60px;height:60px;border:1px solid grey;margin:0}.current_track .left{display:flex;align-items:center}.current_track_title{margin-left:.5rem;display:block;max-width:40vw;white-space:nowrap;overflow:hidden}.current_track_art{color:grey;font-size:.7em;display:block;margin-left:.5rem}.current_track_btn{background:none;border:none;font-size:2rem;margin-right:1rem}.chromecast,.current_track_btn{color:#fff;display:flex;align-items:center;justify-content:center}.chromecast{left:0;background-color:#1db954;background-color:var(--main-color);padding:5px 0;height:25px;font-size:.7rem;width:100%;top:-35px}.btn_disconnect,.chromecast{position:absolute;font-weight:700}.btn_disconnect{right:1rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:none;border:none;color:#000;font-size:.8rem}.overlay .chromecast{top:unset;bottom:0}#Test{position:absolute;visibility:hidden;height:auto;width:auto;white-space:nowrap}.move_left{-webkit-animation-name:move_left;animation-name:move_left;-webkit-animation-duration:7s;animation-duration:7s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;display:block}@-webkit-keyframes move_left{0%{-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-transform:translateX(0);transform:translateX(0)}90%{-webkit-transform:translateX(-50%);transform:translateX(-50%)}to{-webkit-transform:translateX(-50%);transform:translateX(-50%)}}@keyframes move_left{0%{-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-transform:translateX(0);transform:translateX(0)}90%{-webkit-transform:translateX(-50%);transform:translateX(-50%)}to{-webkit-transform:translateX(-50%);transform:translateX(-50%)}}.progress{width:100%;height:3px;position:absolute;top:-3px;left:0;z-index:30;background-color:#a9a9a9}.progress>div{background:#fff;height:3px;width:0}.info{background-image:url(/static/media/jose3.1abeec69.jpg);background-size:cover;background-repeat:no-repeat;min-height:300px;display:flex;align-items:flex-end;-webkit-filter:grayscale(.3);filter:grayscale(.3)}.info p{font-size:.8rem;padding:1rem;margin:0;background-color:rgba(0,0,0,.3)}.bmab{margin-top:50px;text-align:center}.bmab small,.error{font-weight:700}.error{position:fixed;bottom:75px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:#e61b1b;max-width:420px;border-radius:5px;padding:1rem;font-size:.7rem}.error>h3{font-size:1.4rem;margin:0}.overlay{position:fixed;top:0;left:0;height:100%;background-color:rgba(0,0,0,.85);z-index:100}.overlay,.overlay>.overlay_inner{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.overlay>.overlay_inner{padding-top:100px;padding-bottom:50px;max-height:100%;overflow-y:scroll}.overlay.ctx{z-index:101}.lg_img{border:1px solid grey;width:150px;height:150px}.overlay ul{list-style:none;margin:0;padding:0;width:70%}.overlay ul li{font-weight:700;margin:1rem 0}.overlay h2,.overlay h3{margin-bottom:0}.overlay h3{margin-top:0;font-weight:400;color:#d3d3d3}._streams{width:80%;font-weight:700;margin-bottom:185px}._streams,.controls{display:flex;justify-content:space-between}.controls{flex-direction:row;align-items:center;margin-top:2rem}.controls button{width:60px;height:60px;border-radius:50%;background:#fff;font-size:1.2rem;text-align:center;border:none;margin:0 1rem;font-size:2rem;display:flex;justify-content:center;align-items:center}.controls button:first-child,.controls button:nth-child(3){font-size:2rem}.settings{margin-top:1.5rem;justify-content:space-between;width:250px}.playbackRate,.settings{display:flex;align-items:center}.playbackRate{background:none;border:none;color:#fff;font-weight:700;font-size:1.1rem;width:65px;justify-content:center}a,a:hover,a:visited{color:#fff;text-decoration:none}.close_overlay{top:1.5rem;left:1.5rem;background:none;border:none;font-size:1.1rem}.close_overlay,.overlay .track_ctx{position:absolute;color:#d3d3d3;font-weight:700}.overlay .track_ctx{top:1.25rem;right:1.25rem;font-size:1.5rem}.play_animation{width:30px;margin-left:-5px}.play_animation span{display:inline-block;width:3px;height:15px;margin:0 1px;background-color:#1db954;-webkit-animation-name:playing;animation-name:playing;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.play_animation span:first-child{-webkit-animation-delay:.25s;animation-delay:.25s}.play_animation span:nth-child(2){-webkit-animation-delay:.5s;animation-delay:.5s}.play_animation span:nth-child(3){-webkit-animation-delay:.75s;animation-delay:.75s}@-webkit-keyframes playing{0%{height:0}to{height:15px}}@keyframes playing{0%{height:0}to{height:15px}}input{background:#fff;border:1px solid #d3d3d3;border-radius:8px;height:7px;width:356px;max-width:90%;outline:none;transition:background .45s ease-in;-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{border:1px solid #ccc;height:18px;width:18px;border-radius:25px;background:#fff;cursor:pointer;-webkit-appearance:none}input[type=range]::-moz-range-thumb,input[type=range]::-ms-thumb{border:1px solid #ccc;height:18px;width:18px;border-radius:25px;background:#fff;cursor:pointer;-webkit-appearance:none}.time{font-weight:700;display:block}.time,input[type=range]{margin-top:1rem}.toggle{display:flex;justify-content:space-between;width:50%;margin-bottom:1.5rem}.toggle label{display:block;font-weight:700}.img_container,.xlg_img{width:200px;height:200px}.img_container{border-radius:50%;border:5px solid #000;position:absolute;overflow:hidden;cursor:pointer;top:180px}.img_container.spin{transition:all .35s linear}:root{--spin-border-color:rgba(0,0,0,0.4);--main-color:#1db954}.inner{display:none}.img_container.spin>.inner{display:block;position:absolute;width:170px;height:170px;border-radius:50%;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);border:1px solid rgba(0,0,0,.4);border:1px solid var(--spin-border-color)}.inner:before{width:130px;height:130px}.inner:after,.inner:before{content:"";position:absolute;border-radius:50%;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);border:1px solid rgba(0,0,0,.4);border:1px solid var(--spin-border-color)}.inner:after{width:90px;height:90px}.img_container:before{width:50px;height:50px;border-radius:50%;border:1px solid rgba(0,0,0,.4);border:1px solid var(--spin-border-color)}.img_container:after,.img_container:before{content:"";position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.img_container:after{width:20px;height:20px;border-radius:50%;background-color:#000;z-index:100}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff}input:checked+.slider{background-color:#1db954}input:focus+.slider{box-shadow:0 0 1px #1db954}input:checked+.slider:before{-webkit-transform:translateX(26px);transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.rotate{-webkit-animation-name:rotate;animation-name:rotate;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;color:#1db954;color:var(--main-color)}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@media only screen and (max-height:670px){.overlay>.overlay_inner{padding-top:40px}.img_container{width:130px;height:130px}._streams{margin-bottom:130px}.img_container{top:140px}.img_container .xlg_img{width:140px;height:140px}}.dot-flashing{position:relative;width:5px;height:5px;border-radius:50%;background-color:#1db954;background-color:var(--main-color);color:#1db954;color:var(--main-color);-webkit-animation:dotFlashing 1s linear infinite alternate;animation:dotFlashing 1s linear infinite alternate;-webkit-animation-delay:.5s;animation-delay:.5s}.dot-flashing:after,.dot-flashing:before{content:"";display:inline-block;position:absolute;top:0}.dot-flashing:before{left:-7.5px;-webkit-animation:dotFlashing 1s infinite alternate;animation:dotFlashing 1s infinite alternate;-webkit-animation-delay:0s;animation-delay:0s}.dot-flashing:after,.dot-flashing:before{width:5px;height:5px;border-radius:50%;background-color:#1db954;background-color:var(--main-color);color:#1db954;color:var(--main-color)}.dot-flashing:after{left:7.5px;-webkit-animation:dotFlashing 1s infinite alternate;animation:dotFlashing 1s infinite alternate;-webkit-animation-delay:1s;animation-delay:1s}@-webkit-keyframes dotFlashing{0%{background-color:#1db954;background-color:var(--main-color)}50%,to{background-color:#d3d3d3}}@keyframes dotFlashing{0%{background-color:#1db954;background-color:var(--main-color)}50%,to{background-color:#d3d3d3}}@media only screen and (min-width:670px){.error{bottom:unset;top:50px}#root{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes pulse{0%{box-shadow:-1px 0 35px #883227}50%{box-shadow:-1px 0 35px grey}to{box-shadow:-1px 0 35px #883227}}@keyframes pulse{0%{box-shadow:-1px 0 35px #883227}50%{box-shadow:-1px 0 35px grey}to{box-shadow:-1px 0 35px #883227}}}.upload label{display:block}.upload input[type=file]{display:none}.upload input{height:30px}fieldset{border:none}.upload button{background:none;border:2px solid #1db954;border-radius:5px;color:#1db954;font-weight:700}.upload button.ico{border:none}.upload.err button{color:#e61b1b;border-color:#e61b1b}.info_banner{width:290px;max-width:80%;position:absolute;top:1rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:#fbfbfb;padding:.5rem;border-radius:5px;color:#000;font-size:.8rem;text-align:center}.info_banner a{text-decoration:underline;color:var(--main-color)}.info_banner a:first-of-type{float:left;font-weight:700}.hide_banner{float:right;color:#a9a9a9!important}
/*# sourceMappingURL=main.467bd8d4.chunk.css.map */