.selectComponent{display:flex;align-items:center}.selectLabel{margin-right:20px;color:#537497}@media(max-width:768px){.selectLabel{margin-right:10px}}.selectWrapper{position:relative;width:220px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(100,100,100,.3);cursor:pointer}.selectWrapper .selectBar{position:absolute;bottom:-1px;border-bottom:2px solid transparent;width:0;margin:auto;left:50%;transition:.28s}@media(max-width:768px){.selectWrapper{width:initial;min-width:180px}}.selectWrapper.active{border:0 none;padding-bottom:1px}.selectWrapper.active .selectBar{position:absolute;bottom:-1px;border-bottom:2px solid rgb(83,116,151);width:100%;left:0}.selectArrow{position:absolute;right:11px;top:50%;transform:translateY(calc(-50% + 3px));width:0;height:0;margin-left:10px;vertical-align:middle;border:4px solid transparent;border-top-color:#3c4858}@media(max-width:768px){.selectArrow{right:5px}}.selectArrow.active{transform:rotate(180deg) translateY(calc(-50% + 8px))}.selectPlaceholder{display:flex;flex-grow:1;justify-content:flex-start;align-items:center;padding:0 11px;height:30px;color:#3c4858;box-sizing:border-box;border-radius:2px}@media(max-width:768px){.selectPlaceholder{padding:0 11px}}.selectPlaceholder:focus-visible{outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.selectComponent__search{position:absolute;left:0;width:100%;top:100%;z-index:5;border:none;line-height:24px;padding:8px 11px;margin-top:4px;border-bottom:2px solid rgb(83,116,151);transition:border-bottom-color 1s}.selectEl{position:absolute;top:calc(100% + 2px);left:0;display:grid;list-style:none;width:100%;margin:0;box-sizing:border-box;background-color:#fff;border-radius:4px;overflow-y:auto;padding:4px 6px;box-shadow:0 2px 5px #00000042;z-index:2}.selectEl::-webkit-scrollbar-track{border-radius:3px;background-color:#0000001a}.selectEl::-webkit-scrollbar-thumb{border-radius:3px;background:#537497}.selectEl::-webkit-scrollbar{width:6px}.selectComponent__search+.selectEl{top:calc(100% + 47px);border-radius:0 0 4px 4px;padding-top:5px}.optionEl{display:flex;justify-content:flex-start;align-items:center;height:30px;padding:5px;cursor:pointer;background-color:#fff;border:1px solid transparent;color:#000}.optionEl:hover,.optionEl:focus,.optionEl.active{background-color:#537497;color:#fff;box-shadow:0 1px #d7d8d4,0 0 0 1px #e3e4f1}.subGenre{padding-left:24px;position:relative}.subGenre:before{position:absolute;content:" ";width:5px;height:5px;border-radius:50%;background-color:#537497;left:7px;top:13px}.subGenre:hover:before{background-color:#fff}