body{margin:16px 40px;font-family:Roboto,sans-serif}@media screen and (max-width:600px){body{margin:16px 10px}}.header{display:flex;align-items:center;justify-content:space-between;height:70px;margin-bottom:30px;border-radius:5px;box-shadow:0 5px 5px rgba(0,0,0,.05)}@media screen and (max-width:650px){.header{flex-flow:column;height:100%;padding-bottom:20px}}.header__title{font-size:24px;margin-left:20px;background:-webkit-linear-gradient(#31d9c3,#07a7e3);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.form{border-radius:50px;background-color:rgba(234,236,237,0);border:1px solid #dee7eb;max-width:370px;margin-right:20px;padding:10px 25px;font-size:14px;display:flex;align-items:center;justify-content:space-between}@media screen and (max-width:600px){.form{margin:auto}}.form__input{width:350px;border:none;outline:none}@media screen and (max-width:650px){.form__input{width:150px}}.form__search-icon{width:20px;height:20px}.main{display:flex;justify-content:space-between}@media screen and (max-width:1024px){.main{flex-flow:column nowrap}}.widget{width:60%;height:100%;border-radius:5px;box-shadow:0 5px 5px rgba(0,0,0,.05);padding:17px 13px;box-sizing:border-box;position:relative}@media screen and (max-width:1024px){.widget{width:100%}}.widget__visual{display:flex}@media screen and (max-width:750px){.widget__visual{flex-flow:column}}.widget__visual:after{content:"";width:100%;height:8px;background:-webkit-linear-gradient(#31d9c3,#07a7e3);position:absolute;left:0;top:170px}.widget__picture{width:140px;height:140px;background-color:#dee7eb}.widget__controls{display:flex;margin-top:45px;align-items:center}.widget__waveform{width:500px;position:relative;left:30px;top:30px}@media screen and (max-width:650px){.widget__waveform{left:0;width:100%}}@media screen and (min-width:1024px) and (max-width:1220px){.widget__waveform{width:370px}}.widget__all-time,.widget__current-time{font-size:14px;margin:0;padding:0;position:absolute}@media screen and (max-width:750px){.widget__all-time,.widget__current-time{top:20px}}.widget__current-time{left:170px}.widget__all-time{right:30px;padding:3px 5px;background-color:#4f5b60;color:#fff;border-radius:15px}@media screen and (max-width:750px){.controls{display:flex;flex-flow:column;justify-content:center;align-items:center}}@media screen and (min-width:1024px) and (max-width:1220px){.controls{display:flex;flex-flow:column;justify-content:center;align-items:center}}.controls__buttons{display:flex;align-items:center;position:relative}.controls__next,.controls__play,.controls__prev{border:none;background-repeat:no-repeat;cursor:pointer;outline:none}.controls__prev{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAOCAMAAAD6xte7AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEhQTFRF////3uTn8vT15enrq7nAsb7Ey9TYl6mx+Pr6vsnOpLS72N/inq62uMTJ6+/wsb/FpbW8t8TJmaqypLO6r73DxM7T0dndna626tnBiwAAAGRJREFUeJx9zssSgCAIBVDSECt72PP//zTQMtp4FwhnRgaAappUjfnEtiiPI/uK74jYbE/FhkBsfuT62DRLT0ugYo5+SWZiHlZlvHqTYT+0gZf/CBMq4wUot8B5KeN7Yj5UWz034csDgK6LxlkAAAAASUVORK5CYII=);width:17px;height:14px}.controls__play{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAVCAMAAACT1yXjAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAFdQTFRF5ursyNHW/f39////l6mxo7O62N/is8DG6Ozuw83S9/n5nq+209rerbzC4ufqvcnO8vT1mKqyzdbaqLe+3ePluMTK7fDx3uPmzdbZ4ufpyNLWuMXK7fDygS2PswAAAGdJREFUeJxl0VkOgCAMBFCUcRcVUXG7/zk1GEWYfr6kmXQqRJLKaIRAlrMBRckGVDUbmpYNUB0b0A9s0CMbYCY2YF7YYGxseqVdFx2Y2uLc7xRv/uTX/tU8FlbobA+rvu04qWcbv0NeaG4GzZpulgwAAAAASUVORK5CYII=);width:19px;height:21px;margin:0 36px}.controls__next{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAOCAMAAAD+MweGAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAHVQTFRF////3+Tn7vHyz9jbl6mxzNXYsr/FrbvC5Ojrqbi/4OXowczR+Pn5vsnO9Pb3n7C31d3gm620prW8s8DG6u3vyNHVmquzusbM8fP0xc/Usb7Epra93ePl5+vtydLWna6109vetMHH6+7wv8rP9ff4197h+fr6IdU0kAAAAGdJREFUeJxlj0cOgDAMBClL7z30zv+fCEkUg8QePNIc7LWm/aIbAubHwOKwHfc18PzHAEFIBojixyBJX4MsFyhKMpSKTC3RMGXajs9+UHu6kd/CpG7NC++DdVN99kM0PKkzk7j+/1FuzyEEQPhTDD0AAAAASUVORK5CYII=);width:17px;height:14px}.controls__next:hover,.controls__prev:hover{background-color:#696969;background-blend-mode:screen}.controls__play:after,.controls__play:before{content:"";width:5px;height:21px;position:absolute;top:0;background-color:#97a9b1;opacity:0}.controls__play:before{left:58px}.controls__play:after{left:66px}.controls__img{width:332px;height:32px;border-radius:15px;position:relative;margin-left:40px}@media screen and (max-width:400px){.controls__img{width:270px}}@media screen and (max-width:750px){.controls__img{margin:20px 0}}@media screen and (min-width:1024px) and (max-width:1220px){.controls__img{margin:20px 0}}.controls__picture{width:32px;height:32px;border-radius:50%}.controls__song{position:absolute;left:50px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:300px;color:#72848c}@media screen and (max-width:400px){.controls__song{width:200px}}.controls__artist,.controls__title{margin:0;padding:0}.controls__title{font-size:14px;font-weight:700;margin-bottom:7px}@media screen and (max-width:400px){.controls__title{font-size:12px}}.controls__artist{font-size:12px}@media screen and (max-width:400px){.controls__artist{font-size:10px}}.controls__volume{display:flex;align-items:center}.list{width:35%;height:75vh;border-radius:5px;box-shadow:0 5px 5px rgba(0,0,0,.05);color:#8d9ba2;font-size:14px;font-weight:700;overflow-y:scroll;overflow-x:hidden}@media screen and (max-width:1024px){.list{margin-top:20px;width:100%}}.list__list{list-style:none;margin:0;padding:0}.list__song{padding:15px 0;border-bottom:1px solid #8d9ba2;cursor:pointer;display:flex;align-items:center}.list__song span{margin-left:30px;margin-right:10px}.list__song>span:nth-child(2){display:inline-block;width:60%}.list__song>span:last-child{float:right}.list__text{margin-top:20px}.list__searching,.list__text{text-align:center}.active{color:#07a7e3}.playing{background-image:none;background-color:#fff}.playing:after,.playing:before{opacity:1}::-webkit-scrollbar{width:7px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background:-webkit-linear-gradient(#31d9c3,#07a7e3);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#545867}
/*# sourceMappingURL=main.d4854f73.chunk.css.map */