main.css

:root {
    --button-size: 32px;
    --settings-area-width: 192px;
    --play-widget-background-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-13 -13 26 26"><path d="M -5 -8 L -5 8 L 8 0 z" fill="gray"/></svg>');
    --pause-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-13 -13 26 26"><rect x="-5" y="-7" width="4" height="14" fill="gray"/><rect x="3" y="-7" width="4" height="14" fill="gray"/></svg>');
    --record-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-13 -13 26 26"><circle cx="0" cy="0" r="6" fill="gray"/></svg>');
    --stop-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-13 -13 26 26"><rect x="-6" y="-6" width="12" height="12" fill="gray"/></svg>');
    --prev-bar-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-13 -13 26 26"><rect x="-6" y="-6" width="2" height="12" fill="gray"/><path d="M 6 -6 L 6 6 L -3 0 z" fill="gray"/></svg>');
    --next-bar-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-13 -13 26 26"><rect x="4" y="-6" width="2" height="12" fill="gray"/><path d="M -6 -6 L -6 6 L 3 0 z" fill="gray"/></svg>');
    --volume-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><path d="M 4 16 L 4 10 L 8 10 L 13 5 L 13 21 L 8 16 z M 15 11 L 16 10 A 7.2 7.2 0 0 1 16 16 L 15 15 A 5.8 5.8 0 0 0 15 12 z M 18 8 L 19 7 A 11.5 11.5 0 0 1 19 19 L 18 18 A 10.1 10.1 0 0 0 18 8 z" fill="gray"/></svg>');
    --unmuted-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="3 3 20 20"><path d="M 4 16 L 4 10 L 8 10 L 13 5 L 13 21 L 8 16 z M 15 11 L 16 10 A 7.2 7.2 0 0 1 16 16 L 15 15 A 5.8 5.8 0 0 0 15 12 z M 18 8 L 19 7 A 11.5 11.5 0 0 1 19 19 L 18 18 A 10.1 10.1 0 0 0 18 8 z" fill="gray"/></svg>');
    --muted-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="3 3 20 20"><path d="M 4 16 L 4 10 L 8 10 L 13 5 L 13 21 L 8 16 z" fill="gray"/></svg>');
    --menu-down-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-13 -13 26 26"><path d="M -4 -2 L 4 -2 L 0 3 z" fill="gray"/></svg>');
    --select-arrows-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-13 -13 26 26"><path d="M -4 -3 L 4 -3 L 0 -8 z M -4 3 L 4 3 L 0 8 z" fill="gray"/></svg>');
    --file-page-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-5 -21 26 26"><path d="M 2 0 L 2 -16 L 10 -16 L 14 -12 L 14 0 z M 3 -1 L 13 -1 L 13 -11 L 9 -11 L 9 -15 L 3 -15 z" fill="gray"/></svg>');
    --edit-pencil-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-5 -21 26 26"><path d="M 0 0 L 1 -4 L 4 -1 z M 2 -5 L 10 -13 L 13 -10 L 5 -2 zM 11 -14 L 13 -16 L 14 -16 L 16 -14 L 16 -13 L 14 -11 z" fill="gray"/></svg>');
    --preferences-gear-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-13 -13 26 26"><path d="M 5.78 -1.6 L 7.93 -0.94 L 7.93 0.94 L 5.78 1.6 L 4.85 3.53 L 5.68 5.61 L 4.21 6.78 L 2.36 5.52 L 0.27 5.99 L -0.85 7.94 L -2.68 7.52 L -2.84 5.28 L -4.52 3.95 L -6.73 4.28 L -7.55 2.59 L -5.9 1.07 L -5.9 -1.07 L -7.55 -2.59 L -6.73 -4.28 L -4.52 -3.95 L -2.84 -5.28 L -2.68 -7.52 L -0.85 -7.94 L 0.27 -5.99 L 2.36 -5.52 L 4.21 -6.78 L 5.68 -5.61 L 4.85 -3.53 M 2.92 0.67 L 2.92 -0.67 L 2.35 -1.87 L 1.3 -2.7 L 0 -3 L -1.3 -2.7 L -2.35 -1.87 L -2.92 -0.67 L -2.92 0.67 L -2.35 1.87 L -1.3 2.7 L -0 3 L 1.3 2.7 L 2.35 1.87 z" fill="gray"/></svg>');
    --customize-dial-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-13 -13 26 26"> <g transform="translate(0,1)" fill="gray"> <circle cx="0" cy="0" r="6.5" stroke="gray" stroke-width="1" fill="none"/> <rect x="-1" y="-5" width="2" height="4" transform="rotate(30)"/> <circle cx="-7.79" cy="4.5" r="0.75"/> <circle cx="-9" cy="0" r="0.75"/> <circle cx="-7.79" cy="-4.5" r="0.75"/> <circle cx="-4.5" cy="-7.79" r="0.75"/> <circle cx="0" cy="-9" r="0.75"/> <circle cx="4.5" cy="-7.79" r="0.75"/> <circle cx="7.79" cy="-4.5" r="0.75"/> <circle cx="9" cy="0" r="0.75"/> <circle cx="7.79" cy="4.5" r="0.75"/> </g> </svg>');
    --instrument-copy-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-5 -21 26 26"><path d="M 0 -15 L 1 -15 L 1 0 L 13 0 L 13 1 L 0 1 L 0 -15 z M 2 -1 L 2 -17 L 10 -17 L 14 -13 L 14 -1 z M 3 -2 L 13 -2 L 13 -12 L 9 -12 L 9 -16 L 3 -16 z" fill="currentColor"></path></svg>');
    --instrument-paste-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><path d="M 8 18 L 6 18 L 6 5 L 17 5 L 17 7 M 9 8 L 16 8 L 20 12 L 20 22 L 9 22 z" stroke="currentColor" fill="none"></path><path d="M 9 3 L 14 3 L 14 6 L 9 6 L 9 3 z M 16 8 L 20 12 L 16 12 L 16 8 z" fill="currentColor"></path></svg>');
    --export-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-13 -13 26 26"><path fill="gray" d="M -8 3 L -8 8 L 8 8 L 8 3 L 6 3 L 6 6 L -6 6 L -6 3 z M 0 2 L -4 -2 L -1 -2 L -1 -8 L 1 -8 L 1 -2 L 4 -2 z"/></svg>');
    --export-instrument-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 -960 960 960"><path fill="gray" d="M200-120v-40h560v40H200Zm279.231-150.769L254.615-568.462h130.769V-840h188.462v271.538h130.77L479.231-270.769Zm0-65.385 142.923-191.538h-88.308V-800H425.385v272.308h-88.308l142.154 191.538ZM480-527.692Z"/></svg>');
    --import-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 -960 960 960"><path fill="gray" d="M200-120v-40h560v40H200Zm185.384-150.769v-271.539H254.615L480-840l224.616 297.692h-130.77v271.539H385.384Zm40.001-40h108.461v-272.308h88.308L480-774.615 337.077-583.077h88.308v272.308ZM480-583.077Z"/></svg>');
    --close-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-13 -13 26 26"><path fill="gray" d="M -7.07 -5.66 L -5.66 -7.07 L 0 -1.4 L 5.66 -7.07 L 7.07 -5.66 L 1.4 0 L 7.07 5.66 L 5.66 7.07 L 0 1.4 L -5.66 7.07 L -7.07 5.66 L -1.4 0 z"/></svg>');
    --add-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-13 -13 26 26"><path fill="gray" d="M -8 -1 L -1 -1 L -1 -8 L 1 -8 L 1 -1 L 8 -1 L 8 1 L 1 1 L 1 8 L -1 8 L -1 1 L -8 1 z"/></svg>');
    --zoom-in-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="-10 -10 20 20"><circle cx="-1" cy="-1" r="6" stroke-width="2" stroke="gray" fill="none"></circle><path stroke="gray" stroke-width="2" d="M 3 3 L 7 7 M -1 -4 L -1 2 M -4 -1 L 2 -1" fill="none"></path></svg>');
    --zoom-out-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="-10 -10 20 20"><circle cx="-1" cy="-1" r="6" stroke-width="2" stroke="gray" fill="none"></circle><path stroke="gray" stroke-width="2" d="M 3 3 L 7 7 M -4 -1 L 2 -1" fill="none"></path></svg>');
    --undo-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 36 36"><defs><clipPath id="a"><path d="M0 0h36v36H0z"/></clipPath></defs><path d="M15 16c.53 0 1.04.21 1.41.59.38.37.59.88.59 1.41s-.21 1.04-.59 1.41c-.37.38-4.62 4.63-5 5-.37.38-.88.59-1.41.59s-1.04-.21-1.41-.59c-.38-.37-4.63-4.62-5-5C3.21 19.04 3 18.53 3 18s.21-1.04.59-1.41c.37-.38.88-.59 1.41-.59h2C7 8.825 12.825 3 20 3s13 5.825 13 13v4c0 7.175-5.823 13-13 13a3.001 3.001 0 0 1 0-6c3.862 0 7-3.137 7-7v-4c0-3.863-3.137-7-7-7s-7 3.137-7 7z"/></svg>');
    --redo-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 36 36"><defs><clipPath id="a"><path d="M0 0h36v36H0z"/></clipPath></defs><path d="M21 16c-.53 0-1.04.21-1.41.59-.38.37-.59.88-.59 1.41s.21 1.04.59 1.41c.37.38 4.62 4.63 5 5 .37.38.88.59 1.41.59s1.04-.21 1.41-.59c.38-.37 4.63-4.62 5-5 .38-.37.59-.88.59-1.41s-.21-1.04-.59-1.41c-.37-.38-.88-.59-1.41-.59h-2c0-7.175-5.825-13-13-13S3 8.825 3 16v4c0 7.175 5.823 13 13 13a3.001 3.001 0 0 0 0-6c-3.862 0-7-3.137-7-7v-4c0-3.863 3.137-7 7-7s7 3.137 7 7z"/></svg>');
    --copy-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 36 36"><defs><clipPath id="a"><path d="M0 0h36v36H0z"/></clipPath></defs><path d="M14 15H7a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-5h-2c-1.656 0-3-1.344-3-3zm7-9h-3a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-6h-6c-1.656 0-3-1.344-3-3zm8 5-5-5v4.5a.5.5 0 0 0 .5.5zm-15 1H6.182A3.184 3.184 0 0 0 3 15.182v14.636A3.184 3.184 0 0 0 6.182 33h12.636A3.184 3.184 0 0 0 22 29.818V24h7.818A3.184 3.184 0 0 0 33 20.818V12c0-.79-.32-1.56-.88-2.12l-6-6C25.56 3.32 24.8 3 24 3h-6.818A3.184 3.184 0 0 0 14 6.182zm6 4h7a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1" fill-rule="evenodd"/></svg>');
    --paste-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 36 36"><defs><clipPath id="a"><path d="M0 0h36v36H0z"/></clipPath></defs><path d="M15 31H7a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h4v2h10V8h4a1 1 0 0 1 1 1v3l3 3V8c0-1.656-1.344-3-3-3h-5a3.19 3.19 0 0 0-3.182-3h-3.636A3.19 3.19 0 0 0 11 5H6C4.344 5 3 6.344 3 8v23c0 1.656 1.344 3 3 3h9zm2.606-26.5c.493 0 .894.401.894.894V7.5h-5V5.394c0-.493.401-.894.894-.894zM19 34c-1.656 0-3-1.344-3-3V16.182A3.184 3.184 0 0 1 19.182 13H24c.8 0 1.56.32 2.12.88l6 6c.56.56.88 1.33.88 2.12v8.818A3.184 3.184 0 0 1 29.818 34zm11-12-6-6v5.5a.5.5 0 0 0 .5.5zm-9-6h-1a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-5h-6c-1.656 0-3-1.344-3-3zm6 11a1 1 0 0 1 0 2h-5a1 1 0 0 1 0-2z" /></svg>');
    --insert-channel-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 36 36"><defs><clipPath id="a"><path d="M0 0h36v36H0z"/></clipPath></defs><path d="M11 3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM6.5 5a1 1 0 0 1 2 0v4h1a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2h1V7H6a1 1 0 0 1 0-2zM11 24a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1zm-4.5 2a1 1 0 0 1 2 0v4h1a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2h1v-2H6a1 1 0 0 1 0-2zm15-23a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM17 5a1 1 0 0 1 2 0v4h1a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2h1V7h-.5a1 1 0 0 1 0-2zm4.5 19a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1zM17 26a1 1 0 0 1 2 0v4h1a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2h1v-2h-.5a1 1 0 0 1 0-2zM32 3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm-4.5 2a1 1 0 0 1 2 0v4h1a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2h1V7H27a1 1 0 0 1 0-2zM32 24a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1zm-4.5 2a1 1 0 0 1 2 0v4h1a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2h1v-2H27a1 1 0 0 1 0-2zm-19-9v-2a1 1 0 0 0-2 0v2h-2a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2zM19 17v-2a1 1 0 0 0-2 0v2h-2a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2zm10.5 0v-2a1 1 0 0 0-2 0v2h-2a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2z" fill-rule="evenodd"/></svg>');
    --delete-channel-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 36 36"><defs><clipPath id="a"><path d="M0 0h36v36H0z"/></clipPath></defs><path d="M11 3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM6.5 5a1 1 0 0 1 2 0v4h1a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2h1V7H6a1 1 0 0 1 0-2zM11 24a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1zm-4.5 2a1 1 0 0 1 2 0v4h1a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2h1v-2H6a1 1 0 0 1 0-2zm15-23a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM17 5a1 1 0 0 1 2 0v4h1a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2h1V7h-.5a1 1 0 0 1 0-2zm4.5 19a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1zM17 26a1 1 0 0 1 2 0v4h1a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2h1v-2h-.5a1 1 0 0 1 0-2zM32 3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm-4.5 2a1 1 0 0 1 2 0v4h1a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2h1V7H27a1 1 0 0 1 0-2zM32 24a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1zm-4.5 2a1 1 0 0 1 2 0v4h1a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2h1v-2H27a1 1 0 0 1 0-2zm-20-9.414-2.793-2.793a.999.999 0 1 0-1.414 1.414L6.086 18l-2.793 2.793a.999.999 0 1 0 1.414 1.414L7.5 19.414l2.793 2.793a.999.999 0 1 0 1.414-1.414L8.914 18l2.793-2.793a.999.999 0 1 0-1.414-1.414zm10.5 0-2.793-2.793a.999.999 0 1 0-1.414 1.414L16.586 18l-2.793 2.793a.999.999 0 1 0 1.414 1.414L18 19.414l2.793 2.793a.999.999 0 1 0 1.414-1.414L19.414 18l2.793-2.793a.999.999 0 1 0-1.414-1.414zm10.5 0-2.793-2.793a.999.999 0 1 0-1.414 1.414L27.086 18l-2.793 2.793a.999.999 0 1 0 1.414 1.414l2.793-2.793 2.793 2.793a.999.999 0 1 0 1.414-1.414L29.914 18l2.793-2.793a.999.999 0 1 0-1.414-1.414z" fill-rule="evenodd"/></svg>');
    --select-all-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 36 36"><defs><clipPath id="a"><path d="M0 0h36v36H0z"/></clipPath></defs><path d="M10 33H5.951A2.95 2.95 0 0 1 3 30.049V26h3v3.2a.8.8 0 0 0 .8.8H10zm1 0h4v-3h-4zm0-30h4v3h-4zm-1 0H5.951A2.95 2.95 0 0 0 3 5.951V10h3V6.8a.8.8 0 0 1 .8-.8H10zM3 25v-4h3v4zm30 0v-4h-3v4zm0 1v4.049A2.95 2.95 0 0 1 30.049 33H26v-3h3.2a.8.8 0 0 0 .8-.8V26zm-17 7h4v-3h-4zm0-30h4v3h-4zM3 20v-4h3v4zm30 0v-4h-3v4zM21 33h4v-3h-4zm0-30h4v3h-4zm12 12v-4h-3v4zM3 15v-4h3v4zM26 3h4.049A2.95 2.95 0 0 1 33 5.951V10h-3V6.8a.8.8 0 0 0-.8-.8H26zM9 8h7a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1m11 0h7a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1M9 19h7a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1m13.414 2H27a1 1 0 0 0 0-2h-7a1 1 0 0 0-1 1v7a1 1 0 0 0 2 0v-4.586l5.293 5.293a.999.999 0 1 0 1.414-1.414z" fill-rule="evenodd" /></svg>');
    --duplicate-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 36 36"><defs><clipPath id="a"><path d="M0 0h36v36H0z"/></clipPath></defs><path d="M20 13h-3.25C14.68 13 13 14.68 13 16.75V20H6.778A.78.78 0 0 1 6 19.222V6.778C6 6.349 6.349 6 6.778 6h12.444c.429 0 .778.349.778.778zm-3.222 3h12.444c.429 0 .778.349.778.778v12.444a.78.78 0 0 1-.778.778H16.778a.78.78 0 0 1-.778-.778V16.778c0-.429.349-.778.778-.778M23 13h6.25c2.07 0 3.75 1.68 3.75 3.75v12.5c0 2.07-1.68 3.75-3.75 3.75h-12.5C14.68 33 13 31.32 13 29.25V23H6.75C4.68 23 3 21.32 3 19.25V6.75C3 4.68 4.68 3 6.75 3h12.5C21.32 3 23 4.68 23 6.75zm-1 9v-3a1 1 0 0 1 2 0v3h3a1 1 0 0 1 0 2h-3v3a1 1 0 0 1-2 0v-3h-3a1 1 0 0 1 0-2z" fill-rule="evenodd"/></svg>');
    --notes-up-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 36 36"><defs><clipPath id="a"><path d="M0 0h36v36H0z"/></clipPath></defs><path d="M12 10.778V28.4c0 1.298-1.414 3.474-3.502 4.192-2.421.834-4.834.348-5.385-1.082s.968-3.269 3.389-4.102c1.728-.595 3.452-.518 4.498.095V7l18-4v22l-1-1V7.222zM26 28.82l-3.604 3.576c-.79.791-2.058.807-2.828.036-.771-.77-.755-2.038.036-2.828l5-5c.79-.791 2.058-.807 2.828-.036l5 5c.771.77.755 2.038-.036 2.828-.79.791-2.058.807-2.828.036z" /></svg>');
    --notes-down-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 36 36"><defs><clipPath id="a"><path d="M0 0h36v36H0z"/></clipPath></defs><path d="M12 10.778V28.4c0 1.298-1.414 3.474-3.502 4.192-2.421.834-4.834.348-5.385-1.082s.968-3.269 3.389-4.102c1.728-.595 3.452-.518 4.498.095V7l18-4v21l-1 1V7.222zM26 28.18l3.604-3.576c.79-.791 2.058-.807 2.828-.036.771.77.755 2.038-.036 2.828l-5 5c-.79.791-2.058.807-2.828.036l-5-5c-.771-.77-.755-2.038.036-2.828.79-.791 2.058-.807 2.828-.036z"/></svg>');
    --loop-bar-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 36 36"><defs><clipPath id="a"><path d="M0 0h36v36H0z"/></clipPath></defs><path d="M31.667 19c.736 0 1.333.597 1.333 1.333v9.334c0 .736-.597 1.333-1.333 1.333h-9.334A1.333 1.333 0 0 1 21 29.667v-9.334c0-.736.597-1.333 1.333-1.333zM26 27h-2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2h-2v-5a1 1 0 0 0-2 0v.5h-1a1 1 0 0 0 0 2h1zm5-9c0-4.967-4.033-9-9-9H12c-4.967 0-9 4.033-9 9s4.033 9 9 9h8v-5h-8c-2.208 0-4-1.792-4-4s1.792-4 4-4h10c2.208 0 4 1.792 4 4z"/></svg>');
    --fullscreen-symbol: url("https://choptop84.github.io/abyssbox-app/icon-fullscreen.png");
    --loop-within-bar-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="2 -0.5 12 12"><path d="M 5 2 C 3 2 2 3 2 5 L 2 6 C 2 8 3 9 5 9 L 11 9 C 13 9 14 8 14 6 L 14 5 C 14 3 13 2 11 2 L 8 2 L 8 4 L 11 4 C 11 4 12 4 12 5 L 12 6 C 12 7 11 7 11 7 L 5 7 C 5 7 4 7 4 6 L 4 5 C 4 4 5 4 5 4 L 8 4 L 8 2"/></svg>');
    --loop-full-song-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="2 -2 15 15"><path d="M 3 3 C 2 3 2 3 2 3 L 4 6 L 6 3 L 5 3 C 5 3 5 1 7 1 L 12 1 C 14 1 14 3 14 3 L 13 8 L 15 5 L 17 8 L 16 8 C 16 12 12 12 12 12 L 7 12 C 3 12 3 8 3 8 C 3 7 5 7 5 8 C 5 8 5 10 7 10 L 12 10 C 14 10 14 8 14 8 L 13 8 L 14 3 C 14 4 16 4 16 3 C 16 -1 12 -1 12 -1 L 7 -1 C 3 -1 3 3 3 3 Z Z"/></svg>');
    --dont-loop-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="2 -2 15 15"><path d="M 3 3 C 2 3 2 3 2 3 L 4 6 L 6 3 L 5 3 C 5 3 5 1 7 1 L 12 1 C 14 1 14 3 14 3 L 13 8 L 15 5 L 17 8 L 16 8 C 16 12 12 12 12 12 L 7 12 C 3 12 3 8 3 8 C 3 7 5 7 5 8 C 5 8 5 10 7 10 L 12 10 C 14 10 14 8 14 8 L 8 8 L 8 7 L 9 7 L 9 4.5 L 8 4.5 L 8 3.5 L 9 3 L 10 3 L 10 7 L 11 7 L 11 8 L 13 8 L 14 3 C 14 4 16 4 16 3 C 16 -1 12 -1 12 -1 L 7 -1 C 3 -1 3 3 3 3 Z Z"/></svg>');
    --checkmark-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-13 -13 26 26"><path fill="gray" d="M -9 -2 L -8 -3 L -3 2 L 9 -8 L 10 -7 L -3 8 z"/></svg>');
    --drum-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40"> <defs> <linearGradient id="gold1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="%237e3302"/> <stop offset="40%" stop-color="%23ffec6b"/> <stop offset="100%" stop-color="%237e3302"/> </linearGradient> <linearGradient id="gold2" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="%23faaf7d"/> <stop offset="15%" stop-color="%23fffba9"/> <stop offset="40%" stop-color="%23ffffe3"/> <stop offset="65%" stop-color="%23fffba9"/> <stop offset="100%" stop-color="%23faaf7d"/> </linearGradient> <radialGradient id="gold3" cx="0%" cy="0%" r="100%"> <stop offset="0%" stop-color="%23ffffe3"/> <stop offset="50%" stop-color="%23ffec6b"/> <stop offset="100%" stop-color="%237e3302"/> </radialGradient> <linearGradient id="red" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="%23641919"/> <stop offset="40%" stop-color="%23cd2c2c"/> <stop offset="100%" stop-color="%23641919"/> </linearGradient> <radialGradient id="membrane"> <stop offset="10%" stop-color="%23cccccc" /> <stop offset="90%" stop-color="%23f6f6f7" /> <stop offset="100%" stop-color="%23999" /> </radialGradient> </defs> <ellipse cx="16" cy="26" rx="16" ry="14" fill="rgba(0,0,0,0.5)"/> <ellipse cx="16" cy="25" rx="16" ry="14" fill="url(%23gold1)"/> <rect x="0" y="23" width="32" height="2" fill="url(%23gold1)"/> <ellipse cx="16" cy="23" rx="16" ry="14" fill="url(%23gold2)"/> <ellipse cx="16" cy="23" rx="15" ry="13" fill="url(%23red)"/> <rect x="1" y="17" width="30" height="6" fill="url(%23red)"/> <rect x="5" y="27" width="1" height="5" rx="0.5" fill="rgba(0,0,0,0.5)"/> <rect x="15" y="31" width="2" height="5" rx="1" fill="rgba(0,0,0,0.5)"/> <rect x="26" y="27" width="1" height="5" rx="0.5" fill="rgba(0,0,0,0.5)"/> <rect x="5" y="26" width="1" height="5" rx="0.5" fill="url(%23gold3)"/> <rect x="15" y="30" width="2" height="5" rx="1" fill="url(%23gold3)"/> <rect x="26" y="26" width="1" height="5" rx="0.5" fill="url(%23gold3)"/> <ellipse cx="16" cy="18" rx="15" ry="13" fill="rgba(0,0,0,0.5)"/> <ellipse cx="16" cy="16" rx="16" ry="14" fill="url(%23gold1)"/> <rect x="0" y="14" width="32" height="2" fill="url(%23gold1)"/> <ellipse cx="16" cy="14" rx="16" ry="14" fill="url(%23gold2)"/> <ellipse cx="16" cy="14" rx="15" ry="13" fill="url(%23membrane)"/> </svg>');
    --piano-key-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="15" preserveAspectRatio="none" viewBox="0 -1 32 15"> <defs> <linearGradient id="shadow" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="rgba(0,0,0,0.5)"/> <stop offset="100%" stop-color="transparent"/> </linearGradient> </defs> <rect x="-1" y="1" width="31" height="1" rx="0.6" fill="rgba(255,255,255,0.4)"/> <path d="M -1 11 L 30 11 L 30 2 L 33 -1 L 33 14 L -1 14 z" fill="rgba(0,0,0,0.7)"/> <rect x="-1" y="-1" width="19" height="15" fill="url(%23shadow)"/> </svg>');
    --mod-key-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="80" preserveAspectRatio="none" viewBox="0 -1 32 80"> <defs> <linearGradient id="shadow" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="rgba(0,0,0,0.4)"/> <stop offset="100%" stop-color="transparent"/> </linearGradient> </defs> <rect x="-1" y="1" width="31" height="1" rx="0.6" fill="rgba(255,255,255,0.2)"/> <path d="M -1 76 L 30 76 L 30 1 L 33 -1 L 33 80 L -1 80 z" fill="rgba(0,0,0,0.7)"/> <rect x="-1" y="-1" width="19" height="80" fill="url(%23shadow)"/> </svg>');
    --down-arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-13 -13 26 26"><path fill="gray" d="M 0 10 L -8 2 L -2 2 L -2 -10 L 2 -10 L 2 2 L 8 2 z"/> </svg>');
    --up-arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-13 -13 26 26"><path fill="gray" d="M 0 -10 L -8 -2 L -2 -2 L -2 10 L 2 10 L 2 -2 L 8 -2 z"/> </svg>');

    --logo-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 10 10"><defs><clipPath id="a"><path d="M0 0h36v36H0z"/></clipPath></defs><path d="M 0 5 C 0 8 2 10 5 10 C 8 10 10 8 10 5 C 10 2 8 0 5 0 C 2 0 0 2 0 5 M 3 5 C 3 4 4 3 5 3 C 6 3 7 4 7 5 C 7 6 6 7 5 7 C 4 7 3 6 3 5"/></svg>');
    /*M 0 20 C 0 32 8 40 20 40 C 32 40 40 32 40 20 C 40 8 32 0 20 0 C 8 0 0 8 0 20 M 12 20 C 12 16 16 12 20 12 C 24 12 28 16 28 20 C 28 24 24 28 20 28 C 16 28 12 24 12 20*/

    --share-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 30 30"><path d="M 23 3 A 4 4 0 0 0 19 7 A 4 4 0 0 0 19.09375 7.8359375 L 10.011719 12.376953 A 4 4 0 0 0 7 11 A 4 4 0 0 0 3 15 A 4 4 0 0 0 7 19 A 4 4 0 0 0 10.013672 17.625 L 19.089844 22.164062 A 4 4 0 0 0 19 23 A 4 4 0 0 0 23 27 A 4 4 0 0 0 27 23 A 4 4 0 0 0 23 19 A 4 4 0 0 0 19.986328 20.375 L 10.910156 15.835938 A 4 4 0 0 0 11 15 A 4 4 0 0 0 10.90625 14.166016 L 19.988281 9.625 A 4 4 0 0 0 23 11 A 4 4 0 0 0 27 7 A 4 4 0 0 0 23 3 z"></path></svg>');
    /*M <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 30 30">
<path d="M 23 3 A 4 4 0 0 0 19 7 A 4 4 0 0 0 19.09375 7.8359375 L 10.011719 12.376953 A 4 4 0 0 0 7 11 A 4 4 0 0 0 3 15 A 4 4 0 0 0 7 19 A 4 4 0 0 0 10.013672 17.625 L 19.089844 22.164062 A 4 4 0 0 0 19 23 A 4 4 0 0 0 23 27 A 4 4 0 0 0 27 23 A 4 4 0 0 0 23 19 A 4 4 0 0 0 19.986328 20.375 L 10.910156 15.835938 A 4 4 0 0 0 11 15 A 4 4 0 0 0 10.90625 14.166016 L 19.988281 9.625 A 4 4 0 0 0 23 11 A 4 4 0 0 0 27 7 A 4 4 0 0 0 23 3 z"></path>
</svg>*/

    --favorite-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,42.04825,40.2" width="16" height="16"><path d="M 41.2 17.8 l -8.2 8 l 1.8 11.3 c 0.2 1 -0.2 2 -1 2.6 c -0.4 0.3 -1 0.5 -1.5 0.5 c -0.4 0 -0.8 -0.1 -1.2 -0.3 l -10.1 -5.3 l -10.2 5.3 c -0.4 0.2 -0.8 0.3 -1.2 0.3 c -0.5 0 -1 -0.2 -1.5 -0.5 c -0.8 -0.6 -1.2 -1.6 -1 -2.6 l 1.9 -11.2 l -8.2 -8 c -0.8 -0.7 -1 -1.7 -0.7 -2.7 c 0.3 -1 1.1 -1.7 2.1 -1.8 l 11.3 -1.6 l 5.1 -10.3 c 0.5 -0.9 1.4 -1.5 2.4 -1.5 c 1 0 2 0.6 2.4 1.5 l 5.1 10.3 l 11.3 1.6 c 1 0.2 1.8 0.8 2.1 1.8 c 0.3 0.9 0 2 -0.7 2.6 z" fill="gray" style="left: 0;position: absolute;top: 0;"></path></svg>');

    --page-margin: #101014;
    --editor-background: #23222b;
    --primary-text: white;
    --secondary-text: #999;
    --inverted-text: black;
    --text-selection: rgba(119, 68, 255, 0.99);
    --link-accent: #98f;
    --ui-widget-background: #373640;
    --ui-widget-focus: #6c6b7c;
    --ui-icons: #747280;
    --play-widget-background: #486;
    --indicator-primary: #74f;
    --indicator-secondary: #444;
    --input-box-outline: #333;
    --favorited: #74f;
    --favorited-star: #efe8ff;
    --unfavorited: #444444;
    --unfavorited-star: #777777;
    --update-bubble: #ffa033;
    --version-bubble: #f1d7fb;
    --mod-title: #9a6bff;
    --gradient-fade: linear-gradient(to bottom, #37364000, #292831);
    --gradient-background: linear-gradient(to bottom, #373640, #23222b);
}

::selection {
    background: var(--text-selection);
}

::-moz-selection {
    background: var(--text-selection);
}

.headerBorder {
    width: 100%; 
    height: 64px; 
    background: var(--editor-background); 
    border-bottom: var(--ui-widget-background) 2px solid; 
    display: flex; 
    justify-content: space-between; 
    flex-direction: row; 
    transition: 0.2s;
}

#header {
    display: flex; 
    flex-direction: row; 
    gap: 5px;
}

#searchbarContainer {
    display: flex;
    gap: 5px;
}

#sortContainer {
    display: flex;
    gap: 5px;
}

.websiteTitle {
    align-self: center; 
    margin-right: 16px; 
    color: var(--mod-title); 
    text-align: center;
}

.mainContent {
    display: grid; 
    grid-template-columns: 64px 1fr;
}

.contentBorder {
    width: 64px; 
    justify-content: space-between; 
    background: var(--editor-background); 
    display: flex; 
    flex-direction: column; 
    border-top: var(--ui-widget-background) 2px solid;
    border-right: var(--ui-widget-background) 2px solid; 
    align-items: center; 
    padding-top: 16px; 
    padding-bottom: 16px; 
    transition: 0.2s;
}

.buttonContainer {
    display:flex; 
    flex-direction: column; 
    gap: 5px;
}

#modContainer {
    margin: 32px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-content: baseline;
    max-height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    justify-content: center;
}

.copyText {
    position: absolute;
    top: 36px;
    height: 24px;
    width: 64px;
    background: var(--play-widget-background);
    font-size: 14px;
    text-align: center;
    align-content: center;
    left: -16px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
}

.copyText::before {
    content: "Copied";
}

a {
    color: var(--link-accent, #98f);
}

html {
    background: var(--page-margin, black);
    overflow-x: hidden;
    font-size: large;
    font-family: 'B612', sans-serif;
    line-height: 1.3;
    color: var(--primary-text, white);

    scrollbar-color: var(--scrollbar-color, var(--ui-widget-background)) var(--scrollbar-background, var(--editor-background));
}

body {
    margin: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-rows: 64px 1fr;
    height: 100%;
}

.shareButton, .reverseButton {
    align-self: center; 
    height: var(--button-size);
    width: var(--button-size);
    background: var(--ui-widget-background);
    border-radius: 5px; 
    position: relative; 
    font-size: inherit; 
    font-family: inherit; 
    font-weight: inherit; 
    transition: all 0.1s ease-in-out;
}

.shareButton::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    mask-image: var(--share-symbol);
    -webkit-mask-image: var(--share-symbol);
    pointer-events: none;
    background: var(--ui-icons);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: -o-crisp-edges !important;
    image-rendering: pixelated !important;
    image-rendering: optimizeSpeed !important;
}

.up::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    mask-image: var(--up-arrow);
    -webkit-mask-image: var(--up-arrow);
    pointer-events: none;
    background: var(--ui-icons);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: -o-crisp-edges !important;
    image-rendering: pixelated !important;
    image-rendering: optimizeSpeed !important;
}

.down::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    mask-image: var(--down-arrow);
    -webkit-mask-image: var(--down-arrow);
    pointer-events: none;
    background: var(--ui-icons);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: -o-crisp-edges !important;
    image-rendering: pixelated !important;
    image-rendering: optimizeSpeed !important;
}

.shareButton:hover, .reverseButton:hover {
    filter: brightness(150%);
}

.clearButton{
    align-self: center; 
    height: var(--button-size);
    width: var(--button-size);
    background: var(--ui-widget-background);
    border-radius: 5px; 
    position: relative; 
    font-size: inherit; 
    font-family: inherit; 
    font-weight: inherit; 
    transition: all 0.1s ease-in-out;
}

.clearButton::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    mask-image: var(--logo-symbol);
    -webkit-mask-image: var(--logo-symbol);
    pointer-events: none;
    background: var(--ui-icons);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: -o-crisp-edges !important;
    image-rendering: pixelated !important;
    image-rendering: optimizeSpeed !important;
}

.clearButton:hover {
    filter: brightness(150%);
}

h1 {
    font-size: 1.7rem;
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    -webkit-text-stroke-width: 0;
    color: var(--mod-title, var(--link-accent, #9c64f7));
}

h2 {
    font-size: 1.5rem;
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    -webkit-text-stroke-width: 0;
}

#modsListButton::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    mask-image: var(--logo-symbol);
    -webkit-mask-image: var(--logo-symbol);
    pointer-events: none;
    background: var(--ui-icons);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: -o-crisp-edges !important;
    image-rendering: pixelated !important;
    image-rendering: optimizeSpeed !important;
    left: 0;
    top: 0;
}

#favoritesListButton::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    mask-image: var(--favorite-symbol);
    -webkit-mask-image: var(--favorite-symbol);
    pointer-events: none;
    background: var(--ui-icons);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: -o-crisp-edges !important;
    image-rendering: pixelated !important;
    image-rendering: optimizeSpeed !important;
    left: 0;
    top: 0;
}

.logoButton {
    height: var(--button-size);
    width: var(--button-size);
    background: var(--ui-widget-background);
    border-radius: 5px; 
    position: relative; 
    font-size: inherit; 
    font-family: inherit; 
    font-weight: inherit; 
    border: none;
    transition: 0.2s;
}

.logoButton:hover {
    filter:brightness(150%);
}

.prefButton:hover {
    filter:brightness(150%);
}

.prefButton {
    height: var(--button-size);
    width: var(--button-size);
    background: var(--ui-widget-background);
    border-radius: 5px; 
    position: absolute; 
    font-size: inherit; 
    font-family: inherit; 
    font-weight: inherit; 
    bottom: 16px;
    border: none;
    transition: 0.2s;
}

.prefButton::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    mask-image: var(--preferences-gear-symbol);
    -webkit-mask-image: var(--preferences-gear-symbol);
    pointer-events: none;
    background: var(--ui-icons);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: -o-crisp-edges !important;
    image-rendering: pixelated !important;
    image-rendering: optimizeSpeed !important;
    left: 0;
    top: 0;
}

button.playButton {
    transition: 0.2s;
    height: 100%;
    background: var(--play-widget-background);
    flex: 1;
    border-radius: 4px;
    text-align: center;
    color: #ffffff;
    border: none;
}

button.playButton:hover {
    filter: brightness(150%);
}

.favoriteButton {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    transition: 0.2s;
    background: var(--unfavorited);
    flex: 1;
    border-radius: 4px;
    text-align: center;
    color: #ffffff;
    border: none !important;
    position: absolute;
    width: 24px;
    height: 24px;
    margin: 10px; 
}

.favoriteButton:checked {
    background: var(--favorited) !important;
}

.favoriteButton:after {
	content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    mask-image: var(--favorite-symbol);
    -webkit-mask-image: var(--favorite-symbol);
    pointer-events: none;
    background: var(--unfavorited-star);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: -o-crisp-edges !important;
    image-rendering: pixelated !important;
    image-rendering: optimizeSpeed !important;
}

.favoriteButton:checked:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    mask-image: var(--favorite-symbol);
    -webkit-mask-image: var(--favorite-symbol);
    pointer-events: none;
    background: var(--favorited-star);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: -o-crisp-edges !important;
    image-rendering: pixelated !important;
    image-rendering: optimizeSpeed !important;
}

.favoriteButton:hover {
    filter: brightness(125%);
}

button.descButton {
    transition: 0.2s;
    height: 100%;
    background: var(--ui-widget-background);
    flex: 1;
    border-radius: 4px;
    text-align: center;
    color: #ffffff;
    border: none;
}

button.descButton:hover {
    filter: brightness(150%);
}

input[type=range] {
    appearance: none;
	color: inherit;
	width: 100%;
	height: var(--button-size);
	font-size: inherit;
	margin: 0;
	cursor: pointer;
	background: none;
	touch-action: pan-y;
    position: relative;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 8px;
	cursor: pointer;
	background: var(--ui-widget-background);
    border-radius: 5px;
    transition: 0.2s;
}

input[type=range]::-webkit-slider-thumb {
	height: 16px;
    width: 16px;
    border-radius: 5px;
	background: currentColor;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -10px; /* -5px works better for chrome - slarmoo */
}
input[type=range]:focus::-webkit-slider-runnable-track {
	background: var(--ui-widget-focus);
}
input[type=range]::-moz-range-track {
	width: 100%;
	height: 8px;
	cursor: pointer;
	background: var(--ui-widget-background);
    border-radius: 5px;
    transition: 0.2s;
}
input[type=range]:focus::-moz-range-track {
	background: var(--ui-widget-focus);
}
input[type=range]::-moz-range-thumb {
	height: 16px;
    width: 16px;
    border-radius: 5px;
	border: none;
	background: currentColor;
	cursor: pointer;
}
input[type=range]::-ms-track {
	width: 100%;
	height: 8px;
	cursor: pointer;
	background: var(--ui-widget-background);
	border-color: transparent;
    border-radius: 5px;
    transition: 0.2s;
}
input[type=range]:focus::-ms-track {
	background: var(--ui-widget-focus);
}
input[type=range]::-ms-thumb {
	height: 16px;
    width: 16px;
    border-radius: 5px;
	background: currentColor;
	cursor: pointer;
}

.selectRow {
    display: block;
    height: 24px;
    border: none;
    border-radius: 5px;
    background: var(--ui-widget-background);
    color: inherit;
    font-size: 16px;
    cursor: pointer;
    font-family: inherit;
    align-content: center;
    padding-top: 3px;
}

.selectRow:focus {
    background: var(--ui-widget-focus);
}

.prompt {
    text-align: center;
    background: var(--editor-background);
    border-radius: 15px;
    border: 4px solid var(--ui-widget-background);
    color: var(--primary-text);
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 5px 5px 20px 10px rgba(0, 0, 0, 0.5);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 400px;
    transition: 0.2s;
}

.promptContainerBG {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: end;
    z-index: 100;
    opacity: 0.2;
    transition: 0.2s;
}

.promptContainerBG:hover {
    backdrop-filter: brightness(50%);
    opacity: 1 !important;
}

select {
    transition: 0.2s;
}

button {
    transition: 0.2s;
}

button.cancelButton::before {
    content: "";
    position: absolute;
    width: var(--button-size);
    height: var(--button-size);
    left: 0;
    top: 0;
    pointer-events: none;
    background: currentColor;
    mask-image: var(--close-symbol);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: var(--close-symbol);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

button.cancelButton {
    float: right;
    width: var(--button-size);
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 0;
    height: var(--button-size);
    border: none;
    border-radius: 5px;
    background: var(--ui-widget-background);
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    cursor: pointer;
}

button.updateText {
    position: absolute;
    width: auto;
    height: 18px;
    background: var(--update-bubble);
    margin: 7px;
    font-size: 11px;
    text-align: center;
    color: #09080b;
    border-radius: 8px;
    padding-left: 8px;
    padding-right: 8px;
    border: none;
    font-family: 'B612', sans-serif;
    transition: 0.2s;
    right: 55px;
}

button.updateText:hover {
    filter: brightness(150%);
}

.versionText {
    position: absolute;
    width: auto;
    height: 18px;
    background: var(--version-bubble);
    margin: 7px;
    font-size: 11px;
    text-align: center;
    color: #09080b;
    border-radius: 8px;
    align-self: end;
    padding-left: 8px;
    padding-right: 8px;
    pointer-events: none;
    transition: 0.2s;
}

.modDivider {
    width: 256px;
    background: var(--gradient-background);
    height: 128px;
    margin-top:8px;
    border: var(--ui-widget-background) 2px solid;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    transition: all 0.25s ease-in-out;
}

.modDivider:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 5px rgba(255, 255, 255, 0.08);
    opacity: 1;
}


.modDividerImage {
    width: 100%;
    height: 70%;
    border-radius: 10px;
    background-position-x: center !important;
    background-position-y: -56px !important;
    background-size: cover !important;
}

.modDividerImage.AA {
    /*These are Non Anti-Aliased backgrounds*/
    image-rendering: -moz-crisp-edges !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: -o-crisp-edges !important;
    image-rendering: pixelated !important;
    image-rendering: optimizeSpeed !important;
}

.modDividerGradient {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: var(--gradient-fade);
}

.searchbar, .sort {
    width: 245px;
    height: 32px;
    background: var(--ui-widget-background);
    margin-left: 16px;
    margin-top: 16px;
    border-radius: 5px;
    color: var(--ui-icons);
    border: solid black 0px;
    padding-left: 10px;
}

#comingSoon {
    margin-top:8px;
    width: 256px;
    background: var(--gradient-background);
    height: 128px;
    border: var(--ui-widget-background) 2px solid;
    border-radius: 10px;
    display: flex;
    align-items: last baseline;
    max-height: 128px;
}