.mainAudio{border-radius:1em;box-shadow:0 0 .5em var(--main-color-black)}.folders{display:flex;grid-gap:.5em;padding-bottom:1em;flex-wrap:wrap}.folders .folder:not(.bg-red){background:var(--main-color-very-dark)}.folders .folder{border-radius:2em;padding:.25em .75em;cursor:pointer}.folders .folder:not(.bg-red):hover{background:var(--selected)}.mainAudio .controlsWrap,.mainAudio .controlsWrap .controls{border-top-left-radius:inherit;border-top-right-radius:inherit}.mainAudio .controlsWrap{position:sticky;top:0;background:var(--main-color-light-black)}.mainAudio .controlsWrap .controls{background:var(--main-color-very-dark);padding:1em .5em .5em}.buttons button{cursor:pointer;width:3em;height:3em;border-radius:50%;border:0;justify-content:center}.buttons button:hover{background:var(--main-color-dark-light)}.audioTrackWrap .buttons,.buttons button,.volumeWrap,.volumeWrap .icon,.volumeWrap .volumeProgressWrap{display:flex;align-items:center}.volumeWrap{grid-gap:.5em}.buttons button,.volumeProgressWrap .volumeProgress{background:inherit}input[type=range].volumeProgress{height:.5em;-webkit-appearance:none;cursor:pointer;width:9em}input[type=range].volumeProgress.slider-progress{--range:calc(var(--max) - var(--min));--ratio:calc((var(--value) - var(--min)) / var(--range));--sx:calc(0.5 * 1.5em + var(--ratio) * (100% - 1.5em))}input[type=range].volumeProgress:focus{outline:0}input[type=range].volumeProgress::-webkit-slider-thumb{-webkit-appearance:none;width:1.5em;height:1.5em;border-radius:1em;background:var(--main-color-red);border:0;box-shadow:0 0 .25em var(--main-color-black);margin-top:calc(.25em*.5 - 1.5em*.5)}input[type=range].volumeProgress::-webkit-slider-runnable-track{height:.25em;border:0;border-radius:1em;background:var(--main-color-light-gray);box-shadow:none}input[type=range].volumeProgress::-webkit-slider-thumb:hover{background:var(--main-color-dark-red)}input[type=range].volumeProgress:hover::-webkit-slider-runnable-track{background:var(--main-color-gray)}input[type=range].volumeProgress::-webkit-slider-thumb:active{background:var(--main-color-red)}input[type=range].volumeProgress:active::-webkit-slider-runnable-track{background:var(--main-color-very-light-gray)}input[type=range].volumeProgress.slider-progress::-webkit-slider-runnable-track{background:linear-gradient(var(--main-color-red),var(--main-color-red))0/var(--sx) 100%no-repeat,var(--main-color-light-gray)}input[type=range].volumeProgress.slider-progress:hover::-webkit-slider-runnable-track{background:linear-gradient(var(--main-color-dark-red),var(--main-color-dark-red))0/var(--sx) 100%no-repeat,var(--main-color-gray)}input[type=range].volumeProgress.slider-progress:active::-webkit-slider-runnable-track{background:linear-gradient(var(--main-color-red),var(--main-color-red))0/var(--sx) 100%no-repeat,var(--main-color-very-light-gray)}input[type=range].volumeProgress::-moz-range-thumb{width:1.5em;height:1.5em;border-radius:1em;background:var(--main-color-red);border:0;box-shadow:0 0 .25em var(--main-color-black)}input[type=range].volumeProgress::-moz-range-track{height:.25em;border:0;border-radius:1em;background:var(--main-color-light-gray);box-shadow:none}input[type=range].volumeProgress::-moz-range-thumb:hover{background:var(--main-color-dark-red)}input[type=range].volumeProgress:hover::-moz-range-track{background:var(--main-color-gray)}input[type=range].volumeProgress::-moz-range-thumb:active{background:var(--main-color-red)}input[type=range].volumeProgress:active::-moz-range-track{background:var(--main-color-very-light-gray)}input[type=range].volumeProgress.slider-progress::-moz-range-track{background:linear-gradient(var(--main-color-red),var(--main-color-red))0/var(--sx) 100%no-repeat,var(--main-color-light-gray)}input[type=range].volumeProgress.slider-progress:hover::-moz-range-track{background:linear-gradient(var(--main-color-dark-red),var(--main-color-dark-red))0/var(--sx) 100%no-repeat,var(--main-color-gray)}input[type=range].volumeProgress.slider-progress:active::-moz-range-track{background:linear-gradient(var(--main-color-red),var(--main-color-red))0/var(--sx) 100%no-repeat,var(--main-color-very-light-gray)}input[type=range].volumeProgress::-ms-fill-upper{background:0 0;border-color:transparent}input[type=range].volumeProgress::-ms-fill-lower{background:0 0;border-color:transparent}input[type=range].volumeProgress::-ms-thumb{width:1.5em;height:1.5em;border-radius:1em;background:var(--main-color-red);border:0;box-shadow:0 0 .25em var(--main-color-black);margin-top:0;box-sizing:border-box}input[type=range].volumeProgress::-ms-track{height:.25em;border-radius:1em;background:var(--main-color-light-gray);border:0;box-shadow:none;box-sizing:border-box}input[type=range].volumeProgress::-ms-thumb:hover{background:var(--main-color-dark-red)}input[type=range].volumeProgress:hover::-ms-track{background:var(--main-color-gray)}input[type=range].volumeProgress::-ms-thumb:active{background:var(--main-color-red)}input[type=range].volumeProgress:active::-ms-track{background:var(--main-color-very-light-gray)}input[type=range].volumeProgress.slider-progress::-ms-fill-lower{height:.25em;border-radius:1em 0 0 1em;margin:0;background:var(--main-color-red);border:0;border-right-width:0}input[type=range].volumeProgress.slider-progress:hover::-ms-fill-lower{background:var(--main-color-dark-red)}input[type=range].volumeProgress.slider-progress:active::-ms-fill-lower{background:var(--main-color-red)}.playListWrap{border:1px solid var(--main-color-black);border-bottom-left-radius:1em;border-bottom-right-radius:1em}.playListWrap .track{border-bottom:1px solid var(--main-color-black);cursor:pointer;border-top:0;padding:.5em}.playListWrap .track.selected{font-weight:500}.playListWrap .track:hover{background:var(--main-color-dark)}.playListWrap .track:nth-last-child(1),.shuffleButtons>div:nth-last-child(1):hover{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.trackName{text-align:left;font-weight:500;padding:.5em;border-radius:.25em;text-shadow:1px 1px var(--main-color-black);color:var(--main-color-light-gray)}.timerWrap{display:grid;grid-template-columns:1fr 4em;align-items:center;margin-top:.5em}.timerWrap .timer{font-size:.85em;color:var(--main-color-gray)}.timeWrap{border-radius:var(--border-radius-big);padding:.25em;background:rgba(16,16,16,.5);cursor:pointer}.timeWrap .time{z-index:1;height:.5em;background-color:var(--main-color-red);width:0;border-bottom-left-radius:inherit;border-top-left-radius:inherit;transition:1s}.audioTrackWrap{display:grid;justify-content:center;grid-template-columns:9em 3em 10em 1fr .5fr;align-items:center;grid-gap:.5em}.shuffleWrap{position:relative;z-index:1}.shuffleWrap .shuffleControl{width:2em;height:2em;display:flex;align-items:center;justify-content:center;padding:.25em}.shuffleWrap:hover .shuffleButtons{display:block}.shuffleWrap:has(.shuffleButtons:not(.hide)) .shuffleControl,.shuffleWrap:hover .shuffleControl{background:var(--selected);border-radius:.5em;border-bottom-left-radius:0;border-bottom-right-radius:0}.shuffleWrap div:hover,.volumeWrap svg:hover{background:var(--main-color-very-dark);cursor:pointer}.shuffleButtons{top:2.5em;position:absolute;background:var(--main-color-very-dark);border-bottom-left-radius:.5em;border-bottom-right-radius:.5em;box-shadow:0 10px 10px var(--main-color-black);z-index:2}.searchWrap,.shuffleButtons>div{padding:.5em}.shuffleButtons>div:hover{background:var(--main-color-dark-light)}.searchWrap{display:grid;grid-template-columns:1fr 2em;border:1px solid var(--main-color-light-black);border-radius:2em;align-items:center;box-shadow:0 0 1em var(--main-color-black) inset}.searchWrap:active,.searchWrap:focus,.searchWrap:focus-within,.searchWrap:hover{border:1px solid var(--main-color-dark);background:var(--main-color-light-black)}.searchWrap input{border:0;background:inherit;border-top-left-radius:inherit;border-bottom-left-radius:inherit;outline:0;padding:0 .5em;color:var(--main-color-gray);height:100%}.searchWrap input:active,.searchWrap input:focus{border:0;min-width:20em;transition:1s}.searchWrap .icon{background:inherit;cursor:pointer;border-top-right-radius:inherit;border-bottom-right-radius:inherit;display:flex;align-items:center;height:100%}.searchWrap .icon:active,.searchWrap .icon:focus,.searchWrap .icon:hover{border-top-right-radius:inherit;border-bottom-right-radius:inherit}.searchWrap .icon svg{fill:var(--main-color-dark)}