@import"https://fonts.googleapis.com/css2?family=Muli&display=swap";@import"https://fonts.googleapis.com/css2?family=Open+Sans&display=swap";.vue-slider-disabled .vue-slider-process{background-color:#a7a7a7}.vue-slider-disabled .vue-slider-dot-handle{border-color:#a7a7a7}.vue-slider-disabled .vue-slider-mark-step-active{box-shadow:0 0 0 2px #a7a7a7}.vue-slider-rail{background-color:#f5f5f5;border-radius:15px;transition:background-color .3s}.vue-slider:hover .vue-slider-rail{background-color:#e1e1e1}.vue-slider-process{background-color:#9cd5ff;border-radius:15px;transition:background-color .3s}.vue-slider:hover .vue-slider-process{background-color:#69c0ff}.vue-slider-mark-step{width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 2px #e8e8e8;background-color:#fff}.vue-slider-mark-step-active{box-shadow:0 0 0 2px #9cd5ff}.vue-slider:hover .vue-slider-mark-step-active{box-shadow:0 0 0 2px #69c0ff}.vue-slider-mark-label{font-size:12px;white-space:nowrap}.vue-slider-dot-handle{cursor:pointer;width:100%;height:100%;border-radius:50%;background-color:#fff;border:2px solid #9cd5ff;box-sizing:border-box;transition:box-shadow .3s,border-color .3s}.vue-slider:hover .vue-slider-dot-handle{border-color:#69c0ff}.vue-slider-dot-handle-focus{border-color:#36abff;box-shadow:0 0 0 5px #36abff33}.vue-slider:hover .vue-slider-dot-handle-focus,.vue-slider-dot-handle:hover,.vue-slider:hover .vue-slider-dot-handle:hover{border-color:#36abff}.vue-slider-dot-handle-disabled{cursor:not-allowed;border-color:#ddd!important}.vue-slider-dot-tooltip{opacity:0;visibility:hidden;transition:all .3s}.vue-slider-dot-tooltip-inner{font-size:14px;white-space:nowrap;padding:6px 8px;color:#fff;border-radius:5px;border-color:#000000bf;background-color:#000000bf;box-shadow:0 2px 8px #00000026;transform:scale(.9);transition:transform .3s}.vue-slider-dot-tooltip-inner:after{content:"";position:absolute}.vue-slider-dot-tooltip-inner-top:after{top:100%;left:50%;transform:translate(-50%);height:0;width:0;border-color:transparent;border-style:solid;border-width:5px;border-top-color:inherit}.vue-slider-dot-tooltip-inner-bottom:after{bottom:100%;left:50%;transform:translate(-50%);height:0;width:0;border-color:transparent;border-style:solid;border-width:5px;border-bottom-color:inherit}.vue-slider-dot-tooltip-inner-left:after{left:100%;top:50%;transform:translateY(-50%);height:0;width:0;border-color:transparent;border-style:solid;border-width:5px;border-left-color:inherit}.vue-slider-dot-tooltip-inner-right:after{right:100%;top:50%;transform:translateY(-50%);height:0;width:0;border-color:transparent;border-style:solid;border-width:5px;border-right-color:inherit}.vue-slider-dot-tooltip-inner-top{transform-origin:50% 100%}.vue-slider-dot-tooltip-inner-bottom{transform-origin:50% 0}.vue-slider-dot-tooltip-inner-left{transform-origin:100% 50%}.vue-slider-dot-tooltip-inner-right{transform-origin:0% 50%}.vue-slider-dot:hover .vue-slider-dot-tooltip,.vue-slider-dot-tooltip-show{opacity:1;visibility:visible}.vue-slider-dot:hover .vue-slider-dot-tooltip .vue-slider-dot-tooltip-inner,.vue-slider-dot-tooltip-show .vue-slider-dot-tooltip-inner{transform:scale(1)}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes flip-in-hor-bottom{0%{-webkit-transform:rotateX(80deg);transform:rotateX(80deg);opacity:0}to{-webkit-transform:rotateX(0);transform:rotateX(0);opacity:1}}@keyframes appear-smoothly{0%{opacity:0}to{opacity:1}}*{box-sizing:border-box;user-select:none;overflow-wrap:break-word;margin:0;padding:0}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#f5f5f5}::-webkit-scrollbar{width:10px;background-color:#f5f5f5}::-webkit-scrollbar-thumb{background-color:#b1b1b1}ul{list-style:none}body{display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:Open Sans,sans-serif;background:rgb(186,194,34);background:linear-gradient(90deg,rgba(120,88,85,255)0%,rgba(107,81,80,255) 35%,rgba(103,79,80,255) 100%);background-size:400% 400%;animation:gradient 15s ease infinite;-webkit-font-smoothing:antialiased}main{width:100%;max-width:375px;max-height:723px;margin:0 auto;padding:25px;background-color:#fff;border-radius:15px;animation:scale-up-center 1s cubic-bezier(.39,.575,.565,1) both}button{appearance:none;background:none;border:none;outline:none;cursor:pointer}button:hover{opacity:.8;transform:scale(1.1)}.song-details{margin-top:25px}.cover-playlist{height:50px;width:50px}.cover-wrapper{width:100%;margin-top:15px;height:270px;text-align:center}.animated{animation:appear-smoothly 1s normal both;transition:all .3s}.cover{height:100%;width:270px;box-shadow:0 24px 35px -16px #6bb3ed80;border-radius:5px}.cover-playlist>.cover{margin-right:15px;width:50px}.song-title{width:100%;color:#53565a;font-size:1em;text-align:center;margin-bottom:5px}.artist{font-family:Muli;width:100%;font-weight:400;text-align:center;margin-bottom:7px;font-size:15px}.copy-btn{display:block;margin:5px auto 15px;padding:6px;background-color:transparent;color:#f50;border:1px solid #f50;border-radius:50%;width:32px;height:32px;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .3s}.copy-btn:hover{background-color:#f50;color:#fff;transform:scale(1.1);box-shadow:0 2px 5px #0000001a}.details{margin-left:10px;width:100%}.details>.song-title{color:#585858;font-size:1em;text-align:left}.details>.artist{color:#5d5555;text-align:left;font-size:14px}.controls{display:flex;justify-content:center;align-items:center;padding:0 15px 30px}.play,.pause{background-image:linear-gradient(to right top,#f50,#f50,#f50,#f50,#f50,#f50,#f50,#f50,#f50,#f50,#f50,#f50);border-radius:50%;width:80px;height:80px;justify-content:center;box-shadow:-1px 17px 24px -6px #0003;cursor:pointer;font-size:25px;color:#fff;margin-left:20px;margin-right:20px}.next,.prev{border:0;border-radius:50%;font-size:20px;width:50px;height:50px;display:flex;justify-content:center;align-items:center;cursor:pointer;background-color:#00000017;color:#fff;transition:background-color .2s;position:relative}.playlist{background-color:#fff;overflow-y:auto;max-height:672px;border-radius:5px;max-width:400px}.playlist h3{color:#212121;font-size:18px;font-weight:400;margin-top:20px;margin-bottom:20px;text-align:center}.playlist .song{display:flex;padding:10px;cursor:pointer}.actions>.delete{border-radius:50%;width:40px;height:40px;justify-content:center;box-shadow:-1px 17px 24px -6px #0003;cursor:pointer;font-size:20px;color:#ba83ca}.playlist .song:hover{background-color:#ededed;transition:box-shadow .2s,background-color .3s}.timer{display:flex;width:100%;justify-content:space-between;padding:10px;font-size:14px}.k-progress-outer{margin-top:15px!important;padding-right:0!important}.footer{display:flex;justify-content:end;font-size:10px}.footer a{margin-top:5px;cursor:pointer;color:#3b3a3a;position:relative;top:-10px;font-size:13px;text-decoration:none}#app{display:grid;gap:1rem;grid-template-columns:1fr 1fr;padding:20px}.player{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:375px;max-height:723px;margin:0 auto;padding:25px;background-color:#fff;border-radius:15px;animation:scale-up-center 1s cubic-bezier(.39,.575,.565,1) both}@media (max-width: 768px){#app{grid-template-columns:1fr}body{height:100%;margin-top:10px}}.player h1{font-size:20px;text-align:center;color:#674f50;text-transform:uppercase}.player .dot{width:100%;height:100%;border-radius:9999px;background-color:#f50;transform:none;transition:all .3s;cursor:pointer}.song.active{background-color:#ebebeb}::-webkit-scrollbar{display:none}