0){var n=void 0,r=JSON.stringify(this._sourceMapGenerator.toJSON());this.sourceMapURL?n=this.sourceMapURL:this._sourceMapFilename&&(n=this._sourceMapFilename),this.sourceMapURL=n,this.sourceMap=r}return this._css.join("")},t}()}(e=new s(e,t)),e)),a=function(e){return function(){function t(e,t,i){this.less=e,this.rootFilename=i.filename,this.paths=t.paths||[],this.contents={},this.contentsIgnoredChars={},this.mime=t.mime,this.error=null,this.context=t,this.queue=[],this.files={}}return t.prototype.push=function(t,i,n,s,o){var a=this,l=this.context.pluginManager.Loader;this.queue.push(t);var u=function(e,i,n){a.queue.splice(a.queue.indexOf(t),1);var l=n===a.rootFilename;s.optional&&e?(o(null,{rules:[]},!1,null),r.info("The file "+n+" was skipped because it was not found and the import was marked optional.")):(a.files[n]||s.inline||(a.files[n]={root:i,options:s}),e&&!a.error&&(a.error=e),o(e,i,l,n))},c={rewriteUrls:this.context.rewriteUrls,entryPath:n.entryPath,rootpath:n.rootpath,rootFilename:n.rootFilename},h=e.getFileManager(t,n.currentDirectory,this.context,e);if(h){var f,p,v=function(e){var t,i=e.filename,r=e.contents.replace(/^\uFEFF/,"");c.currentDirectory=h.getPath(i),c.rewriteUrls&&(c.rootpath=h.join(a.context.rootpath||"",h.pathDiff(c.currentDirectory,c.entryPath)),!h.isPathAbsolute(c.rootpath)&&h.alwaysMakePathsAbsolute()&&(c.rootpath=h.join(c.entryPath,c.rootpath))),c.filename=i;var o=new q.Parse(a.context);o.processImports=!1,a.contents[i]=r,(n.reference||s.reference)&&(c.reference=!0),s.isPlugin?(t=l.evalPlugin(r,o,a,s.pluginArgs,c))instanceof O?u(t,null,i):u(null,t,i):s.inline?u(null,r,i):!a.files[i]||a.files[i].options.multiple||s.multiple?new Ue(o,a,c).parse(r,(function(e,t){u(e,t,i)})):u(null,a.files[i].root,i)},d=_(this.context);i&&(d.ext=s.isPlugin?".js":".less"),s.isPlugin?(d.mime="application/javascript",d.syncImport?f=l.loadPluginSync(t,n.currentDirectory,d,e,h):p=l.loadPlugin(t,n.currentDirectory,d,e,h)):d.syncImport?f=h.loadFileSync(t,n.currentDirectory,d,e):p=h.loadFile(t,n.currentDirectory,d,e,(function(e,t){e?u(e):v(t)})),f?f.filename?v(f):u(f):p&&p.then(v,u)}else u({message:"Could not find a file-manager for "+t})},t}()}(e);var u,c=function(e,t,i){var n=function(e,i,r){if("function"==typeof i?(r=i,i=M(this.options,{})):i=M(this.options,i||{}),!r){var s=this;return new Promise((function(t,r){n.call(s,e,i,(function(e,i){e?r(e):t(i)}))}))}this.parse(e,i,(function(e,i,n,s){if(e)return r(e);var o;try{o=new t(i,n).toCSS(s)}catch(e){return r(e)}r(null,o)}))};return n}(0,o),h=function(e,t,i){var n=function(e,t,r){if("function"==typeof t?(r=t,t=M(this.options,{})):t=M(this.options,t||{}),!r){var s=this;return new Promise((function(i,r){n.call(s,e,t,(function(e,t){e?r(e):i(t)}))}))}var o,a=void 0,l=new mt(this,!t.reUsePluginManager);if(t.pluginManager=l,o=new q.Parse(t),t.rootFileInfo)a=t.rootFileInfo;else{var u=t.filename||"input",c=u.replace(/[^\/\\]*$/,"");(a={filename:u,rewriteUrls:o.rewriteUrls,rootpath:o.rootpath||"",currentDirectory:c,entryPath:c,rootFilename:u}).rootpath&&"/"!==a.rootpath.slice(-1)&&(a.rootpath+="/")}var h=new i(this,o,a);this.importManager=h,t.plugins&&t.plugins.forEach((function(e){var t,i;if(e.fileContent){if(i=e.fileContent.replace(/^\uFEFF/,""),(t=l.Loader.evalPlugin(i,o,h,e.options,e.filename))instanceof O)return r(t)}else l.addPlugin(e)})),new Ue(o,h,a).parse(e,(function(e,i){if(e)return r(e);r(null,i,h,t)}),t)};return n}(0,0,a),f=bt("v4.1.1"),p={version:[f.major,f.minor,f.patch],data:l,tree:Ce,Environment:s,AbstractFileManager:ke,AbstractPluginLoader:_e,environment:e,visitors:De,Parser:Ue,functions:ft(e),contexts:q,SourceMapOutput:i,SourceMapBuilder:n,ParseTree:o,ImportManager:a,render:c,parse:h,LessError:O,transformTree:pt,utils:P,PluginManager:mt,logger:r},v=function(e){return function(){var t=Object.create(e.prototype);return e.apply(t,Array.prototype.slice.call(arguments,0)),t}},d=Object.create(p);for(var m in p.tree)if("function"==typeof(u=p.tree[m]))d[m.toLowerCase()]=v(u);else for(var g in d[m]=Object.create(null),u)d[m][g.toLowerCase()]=v(u[g]);return p.parse=p.parse.bind(d),p.render=p.render.bind(d),d}var xt={},St=function(){};St.prototype=Object.assign(new ke,{alwaysMakePathsAbsolute:function(){return!0},join:function(e,t){return e?this.extractUrlParts(t,e).path:t},doXHR:function(e,t,i,n){var r=new XMLHttpRequest,s=!gt.isFileProtocol||gt.fileAsync;function o(t,i,n){t.status>=200&&t.status<300?i(t.responseText,t.getResponseHeader("Last-Modified")):"function"==typeof n&&n(t.status,e)}"function"==typeof r.overrideMimeType&&r.overrideMimeType("text/css"),yt.debug("XHR: Getting '"+e+"'"),r.open("GET",e,s),r.setRequestHeader("Accept",t||"text/x-less, text/css; q=0.9, */*; q=0.5"),r.send(null),gt.isFileProtocol&&!gt.fileAsync?0===r.status||r.status>=200&&r.status<300?i(r.responseText):n(r.status,e):s?r.onreadystatechange=function(){4==r.readyState&&o(r,i,n)}:o(r,i,n)},supports:function(){return!0},clearFileCache:function(){xt={}},loadFile:function(e,t,i,n){t&&!this.isPathAbsolute(e)&&(e=t+e),e=i.ext?this.tryAppendExtension(e,i.ext):e,i=i||{};var r=this.extractUrlParts(e,window.location.href).url,s=this;return new Promise((function(e,t){if(i.useFileCache&&xt[r])try{var n=xt[r];return e({contents:n,filename:r,webInfo:{lastModified:new Date}})}catch(e){return t({filename:r,message:"Error loading file "+r+" error was "+e.message})}s.doXHR(r,i.mime,(function(t,i){xt[r]=t,e({contents:t,filename:r,webInfo:{lastModified:i}})}),(function(e,i){t({type:"File",message:"'"+i+"' wasn't found ("+e+")",href:r})}))}))}});var It=function(e,t){return gt=e,yt=t,St},Ct=function(e){this.less=e};Ct.prototype=Object.assign(new _e,{loadPlugin:function(e,t,i,n,r){return new Promise((function(s,o){r.loadFile(e,t,i,n).then(s).catch(o)}))}});var kt=function(t,n,r){return{add:function(s,o){r.errorReporting&&"html"!==r.errorReporting?"console"===r.errorReporting?function(e,t){var i=e.filename||t,s=[],o=(e.type||"Syntax")+"Error: "+(e.message||"There is an error in your .less file")+" in "+i,a=function(e,t,i){void 0!==e.extract[t]&&s.push("{line} {content}".replace(/\{line\}/,(parseInt(e.line,10)||0)+(t-1)).replace(/\{class\}/,i).replace(/\{content\}/,e.extract[t]))};e.line&&(a(e,0,""),a(e,1,"line"),a(e,2,""),o+=" on line "+e.line+", column "+(e.column+1)+":\n"+s.join("\n")),e.stack&&(e.extract||r.logLevel>=4)&&(o+="\nStack Trace\n"+e.stack),n.logger.error(o)}(s,o):"function"==typeof r.errorReporting&&r.errorReporting("add",s,o):function(n,s){var o,a,l="less-error-message:"+e(s||""),u=t.document.createElement("div"),c=[],h=n.filename||s,f=h.match(/([^\/]+(\?.*)?)$/)[1];u.id=l,u.className="less-error-message",a=""+(n.type||"Syntax")+"Error: "+(n.message||"There is an error in your .less file")+'
in '+f+" ";var p=function(e,t,i){void 0!==e.extract[t]&&c.push('
{content}'.replace(/\{line\}/,(parseInt(e.line,10)||0)+(t-1)).replace(/\{class\}/,i).replace(/\{content\}/,e.extract[t]))};n.line&&(p(n,0,""),p(n,1,"line"),p(n,2,""),a+="on line "+n.line+", column "+(n.column+1)+":"),n.stack&&(n.extract||r.logLevel>=4)&&(a+="
Stack Trace"+n.stack.split("\n").slice(1).join("
")),u.innerHTML=a,i(t.document,[".less-error-message ul, .less-error-message li {","list-style-type: none;","margin-right: 15px;","padding: 4px 0;","margin: 0;","}",".less-error-message label {","font-size: 12px;","margin-right: 15px;","padding: 4px 0;","color: #cc7777;","}",".less-error-message pre {","color: #dd6666;","padding: 4px 0;","margin: 0;","display: inline-block;","}",".less-error-message pre.line {","color: #ff0000;","}",".less-error-message h3 {","font-size: 20px;","font-weight: bold;","padding: 15px 0 5px 0;","margin: 0;","}",".less-error-message a {","color: #10a","}",".less-error-message .error {","color: red;","font-weight: bold;","padding-bottom: 2px;","border-bottom: 1px dashed red;","}"].join("\n"),{title:"error-message"}),u.style.cssText=["font-family: Arial, sans-serif","border: 1px solid #e00","background-color: #eee","border-radius: 5px","-webkit-border-radius: 5px","-moz-border-radius: 5px","color: #e00","padding: 15px","margin-bottom: 15px"].join(";"),"development"===r.env&&(o=setInterval((function(){var e=t.document,i=e.body;i&&(e.getElementById(l)?i.replaceChild(u,e.getElementById(l)):i.insertBefore(u,i.firstChild),clearInterval(o))}),10))}(s,o)},remove:function(i){r.errorReporting&&"html"!==r.errorReporting?"console"===r.errorReporting||"function"==typeof r.errorReporting&&r.errorReporting("remove",i):function(i){var n=t.document.getElementById("less-error-message:"+e(i));n&&n.parentNode.removeChild(n)}(i)}}},_t={javascriptEnabled:!1,depends:!1,compress:!1,lint:!1,paths:[],color:!0,strictImports:!1,insecure:!1,rootpath:"",rewriteUrls:!1,math:1,strictUnits:!1,globalVars:null,modifyVars:null,urlArgs:""};if(window.less)for(var At in window.less)window.less.hasOwnProperty(At)&&(_t[At]=window.less[At]);!function(e,i){t(i,n(e)),void 0===i.isFileProtocol&&(i.isFileProtocol=/^(file|(chrome|safari)(-extension)?|resource|qrc|app):/.test(e.location.protocol)),i.async=i.async||!1,i.fileAsync=i.fileAsync||!1,i.poll=i.poll||(i.isFileProtocol?1e3:1500),i.env=i.env||("127.0.0.1"==e.location.hostname||"0.0.0.0"==e.location.hostname||"localhost"==e.location.hostname||e.location.port&&e.location.port.length>0||i.isFileProtocol?"development":"production");var r=/!dumpLineNumbers:(comments|mediaquery|all)/.exec(e.location.hash);r&&(i.dumpLineNumbers=r[1]),void 0===i.useFileCache&&(i.useFileCache=!0),void 0===i.onReady&&(i.onReady=!0),i.relativeUrls&&(i.rewriteUrls="all")}(window,_t),_t.plugins=_t.plugins||[],window.LESS_PLUGINS&&(_t.plugins=_t.plugins.concat(window.LESS_PLUGINS));var Mt,Et,Pt,Rt=function(e,n){var r=e.document,s=wt();s.options=n;var o=s.environment,a=It(n,s.logger),l=new a;o.addFileManager(l),s.FileManager=a,s.PluginLoader=Ct,function(e,t){t.logLevel=void 0!==t.logLevel?t.logLevel:"development"===t.env?3:1,t.loggers||(t.loggers=[{debug:function(e){t.logLevel>=4&&console.log(e)},info:function(e){t.logLevel>=3&&console.log(e)},warn:function(e){t.logLevel>=2&&console.warn(e)},error:function(e){t.logLevel>=1&&console.error(e)}}]);for(var i=0;i .sidebar-user-icon {
+ width: 32px;
+ height: 32px;
+ border-radius: 100%;
+ background-image: var(--artwork);
+ margin: 10px;
+ flex: 0 0 auto;
+ box-shadow: var(--mediaItemShadow);
+ background-size: contain;
+}
+
+.app-sidebar-button > .sidebar-user-text {
+ width: 100%;
+ display: flex;
+ font-size: 14px;
+ flex-direction: column;
+}
+
+.app-sidebar-button > .sidebar-user-text .fullname {
+ text-align: left;
+}
+
+.app-sidebar-button > .sidebar-user-text .handle-text {
+ font-size: 12px;
+ opacity: 0.7;
+ text-align: left;
+}
+
+.app-sidebar-notification {
+ text-align: center;
+ font-size: 12px;
+ min-height: 60px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-top: 1px solid rgb(200 200 200 / 15%);
+ background: rgb(0 0 0 / 15%);
+ flex-direction: column;
+ padding: 20px 0px;
+}
+
+.app-sidebar-content {
+ padding: 8px;
+ overflow-y: scroll;
+ overflow-y: overlay;
+ height: 100%;
+}
+
+.app-sidebar-content::-webkit-scrollbar {
+ display: none;
+}
+
+.app-sidebar-content:hover::-webkit-scrollbar {
+ display: initial;
+}
+
+.app-sidebar-item {
+ display: flex;
+ width: 100%;
+ padding: 8px 12px;
+ font-weight: 400;
+ font-family: inherit;
+ font-size: 14px;
+ margin: 6px 0px;
+ border: 1px solid transparent;
+ border-radius: 6px;
+ background: transparent;
+ color: white;
+ transition: transform .1s;
+ text-align: left;
+}
+
+.app-sidebar-item:hover {
+ border: 1px solid rgb(200 200 200 / 5%);
+ background: rgb(200 200 200 / 15%);
+}
+
+.app-sidebar-item:active {
+ border: 1px solid rgb(200 200 200 / 5%);
+ background: rgb(200 200 200 / 15%);
+ transform: scale(0.98);
+ transition: transform 0s;
+}
+
+.app-sidebar-item.active {
+ border: 1px solid rgb(200 200 200 / 5%);
+ background: rgb(200 200 200 / 15%);
+ transform: scale(1);
+ transition: transform 0s;
+}
+
+.app-sidebar-item.active::after {
+ content: '';
+ width: 4px;
+ height: 16px;
+ display: block;
+ position: absolute;
+ top: calc(100% - 72%);
+ border-radius: 10px;
+ left: 0px;
+ background: var(--keyColor);
+}
+
+.app-chrome {
+ background: var(--color1);
+ width: 100%;
+ height: var(--chromeHeight);
+ display: flex;
+ flex-direction: row;
+ -webkit-app-region: drag;
+}
+
+.mv-chrome {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 90%;
+ height: 55px;
+ -webkit-app-region: drag;
+}
+
+.app-chrome .app-chrome--left,
+.app-chrome .app-chrome--center,
+.app-chrome .app-chrome--right {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.app-chrome .app-chrome--left {
+ width: 30%;
+ justify-content: left;
+}
+
+.app-chrome .app-chrome--center {
+ width: 100%;
+}
+
+.app-chrome .app-chrome--right {
+ width: 30%;
+ justify-content: right;
+}
+
+.app-chrome .app-chrome-item {
+ height: 100%;
+ width: auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ -webkit-app-region: no-drag;
+ height: auto;
+}
+
+.app-chrome .app-chrome-item.generic {
+ width: 50px;
+ opacity: 0.70;
+}
+
+.app-chrome .app-chrome-item.volume {
+ width: 80px;
+ margin-right: 6px;
+}
+
+.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
+ transition: all var(--appleTransition);
+}
+
+.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:hover {
+ background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
+ transform: scale(1.2);
+}
+
+.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:active {
+ background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
+ transform: scale(1);
+}
+
+.app-chrome .app-chrome-item.volume > input[type=range] {
+ width: 100%;
+}
+
+.app-chrome .app-chrome-item.volume > input[type=range] {
+ -webkit-appearance: none;
+ height: 4px;
+ background: rgba(255, 255, 255, 0.4);
+ border-radius: 5px;
+ background-size: 70% 100%;
+ background-repeat: no-repeat;
+}
+
+.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ height: 14px;
+ width: 14px;
+ border-radius: 50%;
+ background: rgb(50 50 50);
+ cursor: default;
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
+}
+
+.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track {
+ -webkit-appearance: none;
+ box-shadow: none;
+ border: none;
+ background: transparent;
+}
+
+.app-chrome .back-button {
+ height: 100%;
+ width: 60px;
+}
+
+.app-chrome .app-chrome-item.full-height {
+ height: 100%;
+}
+
+.app-chrome .app-chrome-item > .app-title {
+ width: 100px;
+ font-size: 13px;
+ background: url("./logotmp.png");
+ background-size: 90px;
+ background-repeat: no-repeat;
+ background-position: center;
+ height: 100%;
+ margin-right: 16px;
+ margin-left: 16px;
+ image-rendering: -webkit-optimize-contrast;
+ -webkit-app-region: drag;
+}
+
+.app-chrome .app-chrome-item > .window-controls {
+ width: 138px;
+ font-size: 13px;
+ height: 100%;
+ display: flex;
+}
+
+.app-chrome .app-chrome-item > .window-controls > div {
+ height: 100%;
+ width: 32px;
+}
+
+.app-chrome .app-chrome-item > .window-controls > div:hover {
+ background: rgb(200 200 200 / 10%);
+}
+
+.app-chrome .app-chrome-item > .window-controls > div.close {
+ width: 100%;
+ height: 100%;
+ background-image: var(--gfx-closeBtn);
+ background-position: center;
+ background-repeat: no-repeat;
+ -webkit-app-region: no-drag;
+}
+
+.app-chrome .app-chrome-item > .window-controls > div.minmax {
+ background-image: var(--gfx-maxBtn);
+ background-position: center;
+ background-repeat: no-repeat;
+ -webkit-app-region: no-drag;
+ width: 100%;
+ height: 100%;
+}
+
+.app-chrome .app-chrome-item > .window-controls > div.minmax.restore {
+ background-image: var(--gfx-restoreBtn);
+}
+
+.app-chrome .app-chrome-item > .window-controls > div.minimize {
+ background-image: var(--gfx-minBtn);
+ background-position: center;
+ background-repeat: no-repeat;
+ -webkit-app-region: no-drag;
+ width: 100%;
+ height: 100%;
+}
+
+.app-chrome .app-chrome-item.playback-controls {
+ width: 80%;
+ height: 90%;
+ display: flex;
+ max-width: 500px;
+ border-left: 1px solid rgb(200 200 200 / 8%);
+ border-right: 1px solid rgb(200 200 200 / 8%);
+}
+
+.app-chrome .app-chrome-item > .app-playback-controls {
+ display: flex;
+ justify-content: center;
+ align-content: center;
+ width: 100%;
+}
+
+.app-chrome .app-chrome-item > .app-playback-controls .song-name {
+ font-weight: 600;
+ text-align: center;
+ font-size: 13px;
+ height: 1em;
+ line-height: 1em;
+ overflow: hidden;
+}
+
+.app-chrome .app-chrome-item > .app-playback-controls .song-artist {
+ font-weight: 400;
+ font-size: 13px;
+ text-align: center;
+ height: 1em;
+ line-height: 1em;
+ overflow: hidden;
+ /* animation: marquee 10s linear infinite; */
+}
+
+.app-chrome .app-chrome-item > .app-playback-controls .song-progress {
+ height: 16px;
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ overflow: hidden;
+
+}
+
+@keyframes marquee {
+ from {
+ transform: translateX(100%);
+ }
+ to {
+ transform: translateX(-100%);
+ }
+}
+
+.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range] {
+ appearance: none;
+ width: 100%;
+ height: 4px;
+ background-color: rgb(200 200 200 / 10%);
+}
+
+.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 4px;
+ height: 12px;
+ border-radius: 2px;
+ background: var(--keyColor);
+ cursor: ew-resize;
+}
+
+.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range]::-moz-range-thumb {
+ width: 8px;
+ height: 8px;
+ border-radius: 100%;
+ background: var(--keyColor);
+ cursor: pointer;
+}
+
+.app-chrome .app-chrome-item > .app-playback-controls .artwork {
+ width: 42px;
+ height: 42px;
+ background-image: var(--artwork);
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ border-radius: 4px;
+ flex: 0 0 auto;
+ margin: 6px;
+ box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 25%);
+ image-rendering: -webkit-optimize-contrast;
+}
+
+.app-chrome .app-chrome-item > .app-playback-controls .actions {
+ width: 42px;
+ height: 42px;
+ border-radius: 2px;
+ flex: 0 0 auto;
+ margin: 6px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.app-chrome .app-chrome-item > .app-playback-controls .playback-info {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ position: relative;
+}
+
+.app-chrome .app-chrome-item > .app-playback-controls .playback-info > div {
+ width: 100%;
+}
+
+.app-navigation {
+ background: var(--color1);
+ height: calc(100% - var(--chromeHeight));
+ width: 100%;
+ display: flex;
+}
+
+.display--small {
+ display: none !important;
+}
+
+.web-slider.display--small{
+ margin: 10px;
+}
+
+input[type="range"].web-slider.display--small::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ height: 14px;
+ width: 14px;
+ border-radius: 50%;
+ background: rgb(50 50 50);
+ cursor: default;
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
+}
+
+/* Window is smaller <= 1023px width */
+@media only screen and (max-width: 1023px) {
+ .display--small {
+ display: inherit !important;
+ }
+
+ .display--large {
+ display: none !important;
+ }
+}
+
+.header-text {
+ margin: 0px;
+}
+
+.media-item--small {
+ background: rgb(0 0 0 / 25%);
+ height: 162px;
+ width: 132px;
+ display: inline-flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 10px;
+}
+
+.media-item--small .artwork {
+ background: red;
+ margin: 6px;
+ border-radius: 100%;
+ width: 90px;
+ height: 90px;
+ box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 30%);
+}
+
+.playlist-artwork {
+ height: 190px;
+ width: 190px;
+ background: blue;
+ border-radius: 6px;
+ background: var(--artwork);
+ background-size: cover;
+ box-shadow: var(--mediaItemShadow);
+ flex: 0 0 auto;
+ margin: 6px;
+ margin-top: 0px;
+}
+
+.media-item--small .text {
+ font-weight: 600;
+ font-size: 0.90em;
+}
+
+.media-item--small .subtext {
+ font-size: 0.75em;
+}
+
+.player-duration-time {
+ opacity: 0.5;
+}
+
+.player-artwork-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.player-duration-container {
+ font-size: 0.85em;
+ font-weight: 500;
+}
+
+.media-artwork {
+ --artwork: url("");
+ width: 80vw;
+ height: 80vw;
+ max-height: 500px;
+ max-width: 500px;
+ background: black;
+ background-image: var(--artwork);
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ border-radius: 8px;
+ box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55);
+ transition: transform .10s var(--appleEase);
+}
+
+.media-artwork.paused {
+ transition: transform .35s var(--appleEase);
+ transform: scale(0.85);
+}
+
+.playback-slider {
+ width: 90%;
+}
+
+.volume-slider {
+ width: 100%;
+}
+
+.volume-slider-container {
+ width: 90%;
+ margin: 0 auto;
+ padding: 0px;
+}
+
+.volume-slider-container .col-auto,
+.volume-slider-container .col {
+ display: flex;
+ align-items: center;
+ justify-self: center;
+ padding: 0px;
+ margin: 0px;
+}
+
+.playback-button {
+ font-size: 2em;
+ width: 40px;
+ height: 36px;
+ padding: 0px;
+ background: transparent;
+ border: 0px;
+ border-radius: 0px;
+ box-shadow: unset;
+ background-size: 12px;
+ background-position: center;
+ background-repeat: no-repeat;
+ opacity: 0.70;
+ border-radius: 6px;
+}
+
+.playback-button:active {
+ transform: scale(0.95);
+}
+
+.playback-button--small {
+ border-radius: 6px;
+ font-size: 1em;
+ color: inherit;
+ background-size: 14px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-color: transparent;
+ width: 40px;
+ height: 32px;
+ border: 0px;
+ box-shadow: unset;
+}
+
+.playback-button:hover, .playback-button--small:hover {
+ background-color: rgb(200 200 200 / 10%);
+}
+
+.playback-button:active, .playback-button--small:active {
+ transform: scale(0.9);
+}
+
+.playback-button--small.active {
+ background-color: rgb(200 200 200 / 10%);
+}
+
+.playback-button--small.search {
+ background-image: url("./assets/search.svg");
+}
+
+.playback-button--small.cast {
+ background-image: url("./assets/cast_white.svg");
+}
+
+.playback-button--small.queue {
+ background-image: url("./assets/list.svg");
+}
+
+.playback-button--small.lyrics {
+ background-image: url("./assets/quote-right.svg");
+}
+
+.playback-button--small.shuffle {
+ background-image: url("./assets/shuffle.svg");
+}
+
+.playback-button--small.repeat {
+ background-image: url("./assets/repeat.svg");
+}
+
+.playback-button--small.repeat.repeatOne {
+ background-color: var(--keyColor);
+}
+
+.playback-button.pause {
+ background-image: url('./assets/pause.svg');
+}
+
+.playback-button.play {
+ background-image: url('./assets/play.svg');
+}
+
+.playback-button.next {
+ background-image: url('./assets/forward.svg');
+}
+
+.playback-button.previous {
+ background-image: url('./assets/backward.svg');
+}
+
+.playback-buttons {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.player-volume-glyph {
+ width: 32px;
+ height: 16px;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
+}
+
+.player-volume-glyph.decrease {
+ background-image: url("./assets/volume-down.svg");
+ opacity: 0.5;
+}
+
+.player-volume-glyph.increase {
+ background-image: url("./assets/volume-up.svg");
+ opacity: 0.5;
+}
+
+.player-track-info {
+ width: 90%;
+ margin: 0 auto;
+}
+
+.player-song-title {
+ font-size: 1.25em;
+ text-align: left;
+ margin: 0 auto;
+ font-weight: 500;
+}
+
+.player-song-artist {
+ font-size: 1.0em;
+ text-align: left;
+ margin: 0 auto;
+ color: var(--keyColor);
+ font-weight: 400;
+}
+
+.player-song-artist:hover {
+ cursor: pointer;
+ text-decoration: underline;
+}
+
+.player-more-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.player-more-button {
+ appearance: none;
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ border: 0px;
+ background: var(--keyColor);
+ cursor: pointer;
+ box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
+ color: white;
+ font-weight: bold;
+ padding: 0px;
+ font-size: 16px;
+}
+
+.back-button {
+ width: 40px;
+ height: 40px;
+ background-color: transparent;
+ background-size: 16px;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-image: url("./assets/arrow-left.svg");
+ border: 0px;
+ border-radius: 0px;
+}
+
+.header-text {
+ height: 40px;
+ display: flex;
+ align-items: center;
+
+}
+
+
+.flex-center {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.list-entry-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px;
+ font-size: 1em;
+ font-family: inherit;
+}
+
+.list-entry {
+ display: flex;
+ align-items: center;
+ /* justify-content: space-between; */
+ padding: 12px;
+ font-size: 1em;
+ font-family: inherit;
+ border-bottom: 1px solid rgba(255 255 255 / 0.1);
+ cursor: pointer;
+}
+
+.list-entry-image {
+ --artwork: url("");
+ width: 64px;
+ height: 64px;
+ background: var(--artwork);
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ border-radius: 8px;
+ box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55);
+}
+
+.list-entry-image.artist {
+ border-radius: 50%;
+}
+
+.list-entry-body {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ margin-left: 12px;
+}
+
+.list-entry-name {
+ font-size: 14px;
+ font-weight: 500;
+ overflow: hidden;
+ width: 100%;
+}
+
+.list-entry-artist {
+ font-size: 12px;
+ overflow: hidden;
+ width: 100%;
+}
+
+.list-entry .handle {
+ height: 100%;
+ width: 28px;
+ background: var(--keyColor);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.md-container {
+ width: 100%;
+ position: relative;
+}
+
+.search-panel {
+ background: rgb(0 0 0 / 50%);
+}
+
+.search-header {
+ position: absolute;
+ width: 100%;
+ z-index: 1;
+ backdrop-filter: blur(16px);
+ -webkit-backdrop-filter: blur(16px);
+ border-bottom: 1px solid rgb(200 200 200 / 8%);
+}
+
+.connection-error-panel {
+ background: rgb(0 0 0 / 50%);
+}
+
+.search-type-container {
+ display: flex;
+}
+
+.search-type-button {
+ background: rgb(20 20 20 / 0.85);
+ border-radius: 50px;
+ color: white;
+ border: 0px;
+ box-shadow: unset;
+ font-family: inherit;
+ padding: 8px 16px;
+ font-size: 14px;
+ font-weight: 500;
+ margin: 8px;
+ margin-top: 0px;
+ margin-bottom: 0px;
+}
+
+.search-type-button.active {
+ background: var(--keyColor);
+}
+
+.search-tab-container {
+ overflow: auto;
+ white-space: nowrap;
+ overflow-y: hidden;
+}
+
+.search-body-container {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+.queue-body {
+ width: 100%;
+ height: 100%;
+}
+
+.search-body {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ padding-top: 220px;
+}
+
+.search-tab {
+ background: rgb(20 20 20 / 0.85);
+ border-radius: 50px;
+ color: white;
+ border: 0px;
+ box-shadow: unset;
+ font-family: inherit;
+ padding: 8px 16px;
+ font-size: 14px;
+ font-weight: 500;
+}
+
+.search-tab.active {
+ background: var(--keyColor);
+}
+
+.context-menu {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ z-index: 100;
+}
+
+.context-menu .context-menu-item {
+ --borderRadius: 10px;
+ appearance: none;
+ width: 100%;
+ display: block;
+ font-size: 1.10em;
+ padding: 18px 20px;
+ font-family: inherit;
+ border: 0px;
+ font-weight: 600;
+ border-radius: 0px;
+ border-bottom: 1px solid rgb(200 200 200 / 15%);
+ margin: 0px;
+ background: rgb(60 60 60 / 80%);
+ backdrop-filter: blur(16px) saturate(180%);
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
+ color: #ccc;
+}
+
+.context-menu .context-menu-item:hover {
+ cursor: pointer;
+}
+
+.context-menu .context-menu-item:active {
+ filter: brightness(75%);
+}
+
+.context-menu .context-menu-item:first-child {
+ border-radius: 0px;
+ border-top-left-radius: var(--borderRadius);
+ border-top-right-radius: var(--borderRadius);
+}
+
+.context-menu .context-menu-item:last-child {
+ border-radius: 0px;
+ border-bottom-left-radius: var(--borderRadius);
+ border-bottom-right-radius: var(--borderRadius);
+ border-bottom: 0px;
+}
+
+.context-menu .context-menu-item:only-child {
+ border-radius: var(--borderRadius);
+}
+
+.context-menu .context-menu-item.context-menu-item--left {
+ text-align: left;
+}
+
+.context-menu .context-menu-body {
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ flex-direction: column;
+}
+
+.lyric-body {
+ -webkit-mask-image: -webkit-gradient(linear, left 95%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
+ overflow-y: scroll;
+ overflow-x: hidden;
+ display: flex;
+ flex-flow: column;
+}
+
+.lyric-line {
+ --bgSpeed: 1s;
+ appearance: none;
+ color: white;
+ font-size: 26px;
+ transform: scale(0.8);
+ transform-origin: left center;
+ transition: transform 0.2s var(--appleEase);
+ opacity: 0.75;
+ width: auto;
+ display: inline-block;
+ margin: 10px;
+ margin-left: 5%;
+ margin-right: 0px;
+}
+
+.lyric-line:hover {
+ cursor: pointer;
+}
+
+.lyric-line:hover::after {
+ content: ' ';
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ transform: scale(1.06);
+ background: rgba(200, 200, 200, 0.1);
+ pointer-events: none;
+ border-radius: 10px;
+ -webkit-backface-visibility: hidden;
+}
+
+.lyric-line.active {
+ --bgSpeed: 1s;
+ opacity: 1;
+ transform: scale(1);
+ /*background: var(--keyColor);*/
+ transition: transform 0.2s var(--appleEase);
+}
+
+.lyric-line:not(.active) {
+ filter: blur(1px)
+}
+
+.lyricWaiting {
+ margin-top: 8px;
+ display: none;
+}
+
+.lyric-line.active .lyricWaiting {
+ display: inline-flex;
+ animation: lyricWaitingLine 6s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+}
+
+
+.lyric-line.active .lyricWaiting > div {
+ width: 10px;
+ height: 10px;
+ background: white;
+ border-radius: 50%;
+ margin: 3px;
+}
+
+.lyrics-translation {
+ font-size: 1.6rem;
+ font-weight: 400;
+}
+
+@keyframes lyricWaitingLine {
+ 0% {
+ opacity: 0.25;
+ transform: scale(0.85);
+ }
+ 50% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0.25;
+ transform: scale(0.85);
+ }
+}
+
+@keyframes dotOpacity {
+ 0% {
+ opacity: 0.25;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+
+.lyric-line2:before {
+ background: var(--keyColor);
+ content: '';
+ width: 0%;
+ height: 6px;
+ position: absolute;
+ bottom: -8px;
+ left: 0;
+ border-radius: 10px;
+ z-index: -1;
+ transition: width var(--bgSpeed);
+}
+
+.lyric-line2.active:before {
+ width: 100%;
+ transition: width var(--bgSpeed);
+}
+
+.player_top {
+ height: 100%;
+}
+
+/* Cider */
+
+.reload-btn {
+ background: rgb(86 86 86 / 52%);
+ border-radius: 100%;
+ width: 32px;
+ height: 32px;
+ border: 0px;
+ appearance: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.reload-btn:hover {
+ background: rgb(86 86 86 / 80%);
+ cursor: pointer;
+}
+
+.reload-btn>svg {
+ height: 50%;
+ color: #eee;
+}
+
+.wr-btn {
+ font-family: inherit;
+ appearance: none;
+ border:0px;
+ border-radius: 6px;
+ padding: 8px;
+ font-weight: 600;
+ background: rgb(80 80 80 / 70%);
+ color: white;
+}
+
+/* Album / Playlist Page */
+.playlist-page {
+ padding: 0px;
+}
+
+.playlist-page .well {
+ background: rgba(200, 200, 200, 0.05);
+ border-radius: 10px;
+ padding: var(--contentInnerPadding);
+ box-shadow: rgb(0 0 0 / 8%) 0px 0px 0px 1px;
+ margin-top: 16px;
+}
+
+.playlist-page .playlist-body {
+ padding: var(--contentInnerPadding);
+}
+
+.playlist-display {
+ padding: var(--contentInnerPadding);
+ min-height: 300px;
+}
+
+.playlist-display .playlist-info{
+ flex-shrink: unset;
+ display: flex;
+ flex-flow: column;
+ justify-content: flex-end;
+}
+
+.playlist-display .playlist-info .playlist-name {
+ font-weight: 700;
+ font-size: 1.6rem;
+ margin-bottom: 6px;
+ margin-right: 6px;
+ flex-shrink: unset;
+
+}
+.playlist-display .playlist-info .playlist-artist {
+ font-weight: 500;
+ font-size: 1.6rem;
+ margin-bottom: 6px;
+ margin-right: 6px;
+ flex-shrink: unset;
+}
+.playlist-display .playlist-info .playlist-desc {
+ box-sizing: border-box;
+ font-size: 14px;
+ flex-shrink: unset;
+ margin-right: 5px;
+ max-height: 100px;
+ position: relative;
+}
+.playlist-display .playlist-info .playlist-desc .content {
+ height: 100px;
+ -webkit-mask-image: -webkit-gradient(linear, left 50%, left 90%, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
+}
+
+.playlist-display .playlist-info .playlist-desc .more-btn {
+ appearance: none;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ padding: 0 5px;
+ font-size: 14px;
+ color: var(--keyColor);
+ background-color: transparent;
+ border: 0px;
+ cursor: pointer;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+ font-weight: 600;
+ font-family: inherit;
+ text-transform: uppercase;
+}
+
+.playlist-display .playlist-info .playlist-desc-expanded {
+ box-sizing: border-box;
+ font-size: 14px;
+ position: relative;
+}
+
+.playlist-display .playlist-info .playlist-desc-expanded .more-btn {
+ appearance: none;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ padding: 0 5px;
+ font-size: 14px;
+ color: var(--keyColor);
+ background-color: transparent;
+ border: 0px;
+ cursor: pointer;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+ font-weight: 600;
+ font-family: inherit;
+ text-transform: uppercase;
+}
+
+.playlist-time {
+ font-size: 0.9em;
+ margin: 6px;
+ opacity: 0.7;
+}
+
+/* Artist Page */
+
+.artist-page {
+ padding: 0px;
+}
+
+.artist-page .artist-header {
+ background: var(--keyColor);
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ min-height: 300px;
+ position: relative;
+}
+
+.artist-page .artist-image {
+ width: 200px;
+ height: 200px;
+ margin: 32px;
+}
+
+.artist-page .artist-body {
+ padding: var(--contentInnerPadding);
+}
+
+.artist-page .well {
+ background: rgba(200, 200, 200, 0.05);
+ border-radius: 10px;
+ padding: var(--contentInnerPadding);
+ box-shadow: rgb(0 0 0 / 8%) 0px 0px 0px 1px;
+ margin-top: 16px;
+}
+
+.artist-page .showmoreless {
+ font-family: inherit;
+ font-size: 16px;
+ font-weight: 500;
+ background: transparent;
+ border: 0px;
+ border-radius: 6px;
+ appearance: none;
+ color: var(--keyColor);
+ padding: 8px 12px;
+ cursor: pointer;
+ margin-top: 12px;
+ float: right;
+}
+
+.artist-page .showmoreless:hover {
+ background: rgb(200 200 200 / 10%);
+}
+
+
+/* Artist Page End */
+
+.text-overflow-elipsis {
+ display: -webkit-box;
+ min-width: 0px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+}
+
+
+.mediaitem-artwork {
+ border-radius: var(--mediaItemRadius);
+ overflow: hidden;
+ flex: 0 0 auto;
+ position:relative;
+ width: 100%;
+ height: 100%;
+}
+.mediaitem-artwork .animatedartwork-view-box .animated{
+ position: absolute;
+ top: 0px;
+ width: 100%;
+ height: 100%;
+}
+
+.mediaitem-artwork .animatedartwork-view-box .animated > video {
+ width: 100%;
+ height: 100%;
+}
+
+.mediaitem-artwork .animatedartwork-view-box{
+ position: absolute;
+ top: 0px;
+ width: 100%;
+ height: 100%;
+}
+
+.artist-header .animated{
+ width: 100%;
+ height: 100%;
+ align-self: center;
+ position: absolute;
+ overflow: hidden;
+ box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
+}
+
+.artist-header .row .col.flex-center{
+ z-index: 4;
+}
+
+.artist-header .animated > video {
+ overflow: hidden;
+ height: 100%;
+ width: 100%;
+ min-height: 56.25vw;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+
+}
+
+.mediaitem-artwork.rounded {
+ border-radius: 100%;
+}
+
+.mediaitem-artwork::after {
+ content: "";
+ box-shadow: var(--mediaItemShadow);
+ z-index: 1;
+ width:100%;
+ height:100%;
+ position: absolute;
+ top:0;
+ left:0;
+ border-radius: inherit;
+}
+
+.mediaitem-artwork.rounded::after {
+ border-radius: 100%;
+}
+
+.mediaitem-artwork>img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ image-rendering: -webkit-optimize-contrast;
+}
+
+/* horizontal media scroller */
+.cd-hmedia-scroller {
+ margin: 0 auto;
+ display: flex;
+ flex-flow: row;
+ overflow-x: scroll;
+}
+
+.cd-hmedia-scroller::-webkit-scrollbar-thumb{
+ box-shadow: none;
+}
+
+.cd-hmedia-scroller:hover::-webkit-scrollbar-thumb{
+ box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
+}
+
+/* mediaitem-list-item */
+.cd-mediaitem-list-item {
+ width: 100%;
+ height: 60px;
+ display: flex;
+ flex: 0 0 auto;
+ flex-direction: row;
+ font-size: 14px;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ border-bottom: 1px solid rgb(200 200 200 / 10%);
+}
+
+.cd-mediaitem-list-item:hover {
+ background: rgb(200 200 200 / 10%);
+}
+
+.cd-mediaitem-list-item .artwork {
+ height: 34px;
+ width: 34px;
+ border-radius: var(--mediaItemRadius);
+ object-fit: cover;
+ object-position: center;
+ flex: 0 0 auto;
+ background-repeat: no-repeat;
+ margin: 12px;
+ border: 0px;
+ outline: none;
+}
+
+.cd-mediaitem-list-item .artwork.round {
+ border-radius: var(--mediaItemRadiusRound);
+}
+
+.cd-mediaitem-list-item .info-rect {
+ width: 100%;
+}
+
+.cd-mediaitem-list-item .title {
+ width: 100%;
+}
+
+.cd-mediaitem-list-item .subtitle {
+ width: 90%;
+ font-size: 12px;
+ opacity: 0.7;
+}
+
+.cd-mediaitem-list-item .duration {
+ min-width: 60px;
+ text-align: center;
+}
+
+.cd-mediaitem-list-item .metainfo {
+ min-width: 145px;
+ text-align: center;
+}
+
+.cd-mediaitem-list-item .content-rating {
+ text-transform: uppercase;
+ font-size: 10px;
+ border-radius: 3px;
+ background: rgb(200 200 200 / 15%);
+ width: 60px;
+ text-align: center;
+ padding: 5px;
+ margin-right: 12px;
+ flex: 0 0 auto;
+ font-weight: 500;
+ color: #ccc;
+}
+
+.cd-mediaitem-list-item .isLibrary>button {
+ appearance: none;
+ border:0px;
+ background:transparent;
+ cursor:pointer;
+}
+
+/* mediaitem-hrect */
+.cd-mediaitem-hrect {
+ background: rgb(255 255 255 / 18%);
+ width: 264px;
+ height: 100px;
+ display: inline-flex;
+ flex: 0 0 auto;
+ flex-direction: row;
+ font-size: 14px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 6px;
+ cursor: pointer;
+}
+
+.cd-mediaitem-hrect .artwork {
+ height: 70px;
+ width: 70px;
+ background: blue;
+ border-radius: var(--mediaItemRadius);
+ background: var(--artwork);
+ background-size: contain;
+ flex: 0 0 auto;
+ background-repeat: no-repeat;
+ margin: 18px;
+}
+
+.cd-mediaitem-hrect .artwork.round {
+ border-radius: var(--mediaItemRadiusRound);
+}
+
+.cd-mediaitem-hrect .info-rect {
+ width: 100%;
+}
+
+.cd-mediaitem-hrect .title {
+ width: 100%;
+ text-align: center;
+}
+
+.cd-mediaitem-hrect .subtitle {
+ width: 100%;
+ text-align: center;
+ font-size: 12px;
+}
+
+/* mediaitem-square-sp */
+.cd-mediaitem-square-sp {
+ --spcolor: var("");
+ width: 190px;
+ height: 250px;
+ display: inline-flex;
+ flex: 0 0 auto;
+ flex-direction: column;
+ font-size: 14px;
+ justify-content: flex-start;
+ align-items: center;
+ border-radius: 6px;
+ margin-left: 10px;
+ cursor: pointer;
+ background-color: var(--spcolor);
+}
+
+.cd-mediaitem-square-sp:hover {
+ box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
+}
+
+.cd-mediaitem-square-sp .artwork {
+ height: 190px;
+ width: 190px;
+ background: blue;
+ border-top-left-radius: 6px;
+ border-top-right-radius: 6px;
+ background: var(--artwork);
+ background-size: cover;
+ flex: 0 0 auto;
+ margin: 6px;
+ margin-top: 0px;
+}
+
+.artwork
+{height: 190px;
+ width: 190px;
+ background: blue;
+ border-top-left-radius: 6px;
+ border-top-right-radius: 6px;
+ background: var(--artwork);
+ background-size: cover;
+ flex: 0 0 auto;
+ margin: 6px;
+ margin-top: 0px;
+}
+
+.cd-mediaitem-square-sp .artwork:hover {
+ box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
+}
+
+.cd-mediaitem-square-sp .artwork.round {
+ border-radius: var(--mediaItemRadiusRound);
+}
+
+.cd-mediaitem-square-sp .title {
+ width: 90%;
+ text-align: center;
+}
+
+.cd-mediaitem-square-sp .subtitle {
+ width: 100%;
+ text-align: center;
+ font-size: 12px;
+}
+
+
+.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay {
+ z-index: 3;
+}
+.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay:hover {
+ opacity: 1;
+}
+
+.cd-mediaitem-square-sp + .cd-mediaitem-square-large-overlay {
+ pointer-events: none;
+
+}
+
+.cd-mediaitem-square-sp:hover + .cd-mediaitem-square-large-overlay {
+ opacity: 1;
+
+}
+
+/* mediaitem-square-large */
+.cd-mediaitem-square-large {
+ width: 190px;
+ height: 250px;
+ display: inline-flex;
+ flex: 0 0 auto;
+ flex-direction: column;
+ font-size: 14px;
+ justify-content: flex-start;
+ align-items: center;
+ border-radius: 6px;
+ margin-left: 10px;
+ cursor: pointer;
+}
+.cd-mediaitem-square-large > * {
+ z-index: inherit;
+
+}
+
+/* .cd-mediaitem-square-large .artwork:hover {
+ box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
+} */
+
+.cd-mediaitem-square-large .artwork {
+ height: 190px;
+ width: 190px;
+ background: blue;
+ border-top-left-radius: 6px;
+ border-top-right-radius: 6px;
+ background: var(--artwork);
+ background-size: cover;
+ flex: 0 0 auto;
+ margin: 6px;
+ margin-top: 0px;
+}
+
+.cd-mediaitem-square-large-overlay{
+ position: absolute;
+ width: 190px;
+ float: right;
+ height: 250px;
+ top: 0px;
+ margin: 10px;
+ margin-top: 0px;
+ opacity: 0;
+
+}
+
+.cd-mediaitem-square-large-overlay > * {
+ pointer-events: auto;
+
+}
+.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay {
+ z-index: 3;
+}
+.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay:hover {
+ opacity: 1;
+}
+
+.cd-mediaitem-square-large + .cd-mediaitem-square-large-overlay {
+ pointer-events: none;
+
+}
+
+.cd-mediaitem-square-large:hover + .cd-mediaitem-square-large-overlay {
+ opacity: 1;
+
+}
+
+
+.cd-mediaitem-square-large .artwork.round {
+ border-radius: var(--mediaItemRadiusRound);
+}
+
+.cd-mediaitem-square-large .title {
+ width: 90%;
+ text-align: center;
+}
+
+.cd-mediaitem-square-large .subtitle {
+ width: 100%;
+ text-align: center;
+ font-size: 12px;
+}
+
+/* mediaitem-square */
+.cd-mediaitem-square {
+ width: 200px;
+ height: 190px;
+ display: inline-flex;
+ flex: 0 0 auto;
+ flex-direction: column;
+ font-size: 14px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 6px;
+ cursor: pointer;
+}
+
+.cd-mediaitem-square:hover {
+ background: rgb(200 200 200 / 10%);
+}
+
+.cd-mediaitem-square .artwork {
+ height: 128px;
+ width: 128px;
+ background: blue;
+ border-radius: var(--mediaItemRadius);
+ background: var(--artwork);
+ background-size: cover;
+ box-shadow: var(--mediaItemShadow);
+ flex: 0 0 auto;
+ margin: 6px;
+}
+
+.cd-mediaitem-square .artwork.round {
+ border-radius: var(--mediaItemRadiusRound);
+}
+
+.cd-mediaitem-square .title {
+ width: 90%;
+ text-align: center;
+}
+
+.cd-mediaitem-square .subtitle {
+ width: 100%;
+ text-align: center;
+ font-size: 12px;
+}
+
+
+.cd-btn-seeall {
+ background: transparent;
+ border: 0px;
+ color: var(--keyColor);
+ font-family: inherit;
+ font-size: 16px;
+ border-radius: 4px;
+ padding: 6px;
+}
+
+.cd-btn-seeall:hover {
+ cursor: pointer;
+ background: rgb(200 200 200 / 10%)
+}
+
+/* Cider */
+
+/* Transitions */
+.wpfade-enter-active,
+.wpfade-leave-active {
+ transition: opacity .1s var(--appleEase);
+}
+
+.wpfade-enter,
+.wpfade-leave-to {
+ opacity: 0;
+}
+/* Transitions End */
+
+@media (prefers-color-scheme: light) {
+ :root {
+ /* */
+ --gfx-closeBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6MjY6MjgtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI2OjI4LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6MjY6MjgtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PtPY89oAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEpJREFUGJWNkMENwDAIA1Gh3F7sP0Ty7xD5JgpU+OuTLVvMmQohhRTCnCEK8TpfBl9eBpcBu/HXcsAZ9FQjSrWqW2Pa95gzGofPBQZRG2fS0899AAAAAElFTkSuQmCC');
+ --gfx-maxBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6MjU6NTItMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI1OjUyLTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6MjU6NTItMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PntJ23wAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEhJREFUGJVjYGBgmMzAwPCXgYHhPw78l4GBYTIjlKHHwMDwlAE7EGFgYLjJANUlgEMRDPxnIqAADoaKwn8MkCDABaShaogLcACWZRl4ajKVtAAAAABJRU5ErkJggg==');
+ --gfx-restoreBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6MjY6NTMtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI2OjUzLTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6MjY6NTMtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PluKsJ0AAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGlJREFUGJWt0LEOgkAQhOFPShspSWyvMPFxKaDh0XgOq8tZuCqBIzRMMsXmn51slr9GlJVfmHC9LII3LGfoomCGHrnSloM9olnGE+3KKVgbi0oMNX1ZaXYCG50aLBj4HJwqgXuwn47eA95vgSGy6zr7OwAAAABJRU5ErkJggg==');
+ --gfx-minBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAaxaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pg0KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPg0KICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPg0KICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDItMTdUMTM6MDA6MzJaIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wOk1vZGlmeURhdGU9IjIwMjAtMDItMTdUMTM6MDA6MzJaIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg1ZDBlZGIwLWZkMDAtYjY0Zi05ZWZiLWEyYjQ1ODcwNWE4YSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmEzMDAxZTFhLTI5MTktZTQ0OS1iOTRjLWMyMTIyNDhhOWY4YSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjc4N2Y3OTljLTRiMTEtZTU0YS1iMjBkLTY4NjE3ZWQ5YzVlMiIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciPg0KICAgICAgPHhtcE1NOkhpc3Rvcnk+DQogICAgICAgIDxyZGY6U2VxPg0KICAgICAgICAgIDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjc4N2Y3OTljLTRiMTEtZTU0YS1iMjBkLTY4NjE3ZWQ5YzVlMiIgc3RFdnQ6d2hlbj0iMjAyMC0wMi0xN1QxMzowMDozMloiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgLz4NCiAgICAgICAgICA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ODVkMGVkYjAtZmQwMC1iNjRmLTllZmItYTJiNDU4NzA1YThhIiBzdEV2dDp3aGVuPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIiAvPg0KICAgICAgICA8L3JkZjpTZXE+DQogICAgICA8L3htcE1NOkhpc3Rvcnk+DQogICAgICA8cGhvdG9zaG9wOlRleHRMYXllcnM+DQogICAgICAgIDxyZGY6QmFnPg0KICAgICAgICAgIDxyZGY6bGkgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qShIiBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKEiIC8+DQogICAgICAgIDwvcmRmOkJhZz4NCiAgICAgIDwvcGhvdG9zaG9wOlRleHRMYXllcnM+DQogICAgPC9yZGY6RGVzY3JpcHRpb24+DQogIDwvcmRmOlJERj4NCjwveDp4bXBtZXRhPg0KPD94cGFja2V0IGVuZD0iciI/PmeGdrgAAAAVSURBVChTYxhOgBGI/0OYQx0wMAAAyp4BAZ26NiYAAAAASUVORK5CYII=');
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --gfx-closeBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6MzYtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjM2LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6MzYtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PmN2D9EAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEtJREFUGJWNkMENwDAIA1FGY/8hkn8HOAqPfBsFKvz1yZYtbqwAlUIB6saUAH2NJ4MvL4PLgK/x13LAGTSqEaVa1a0x7XvcmI3D1wbntaRbB2haYwAAAABJRU5ErkJggg==');
+ --gfx-maxBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6NTgtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjU4LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6NTgtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PlwQMBUAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAFBJREFUGJXV0LERgCAUBNHVsQADM3uwWWbojQIs47MEGhgAuS/eSw41qeFYqGlRA7iAm74DKLyrfRABoLrOgq+/hJXngi71BOoGZKBMHqhAbtMvQzel9pREAAAAAElFTkSuQmCC');
+ --gfx-restoreBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6MjQtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjI0LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6MjQtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PqiFCFwAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAHNJREFUGJWtkKEOwlAMRc+QM5AwQYJFoPjZCWb2YRPIaeRTLwfTLQs0UxzX3tumtxCog78UdVTbZmM8AmsdXIABeKH2ak221dDuamnUCjyA+WtbB0zAGXgT0ycSFk31kBky/moUeBLpbsl91wi6Nnbfs/g+7XOQq6ifjfkAAAAASUVORK5CYII=');
+ --gfx-minBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAGOmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMC0wMi0xN1QxMzowMDozMloiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NWQwZWRiMC1mZDAwLWI2NGYtOWVmYi1hMmI0NTg3MDVhOGEiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphMzAwMWUxYS0yOTE5LWU0NDktYjk0Yy1jMjEyMjQ4YTlmOGEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHN0RXZ0OndoZW49IjIwMjAtMDItMTdUMTM6MDA6MzJaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjg1ZDBlZGIwLWZkMDAtYjY0Zi05ZWZiLWEyYjQ1ODcwNWE4YSIgc3RFdnQ6d2hlbj0iMjAyMC0wMi0xN1QxMzowMDozMloiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8cmRmOkJhZz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSLupKEiIHBob3Rvc2hvcDpMYXllclRleHQ9Iu6koSIvPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOlRleHRMYXllcnM+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FwvRXAAAABdJREFUGNNj/P//PwMxgHGIKPw/XDwDAOr1HuzlELLnAAAAAElFTkSuQmCC');
+ }
+}
+
+
+#apple-music-video-container {
+ background: black;
+ position: absolute;
+ float: left;
+ display: none;
+ width: 100%;
+ height: calc(100% - var(--chromeHeight));
+ bottom: 0;
+ z-index: 100000;
+}
+
+#apple-music-video-player{
+ position: absolute;
+ top: 50%;
+ width: 100%;
+ transform: translate(0, -50%);
+ height: 100%;
+}
+
+#apple-music-video-player-controls{
+ position: absolute;
+ z-index: 100001;
+ float: left;
+ width: 100%;
+ height: 100%;
+}
+
+#apple-music-video-player-controls #player-exit{
+ position: absolute;
+ z-index: 100001;
+ float: left;
+ width: 100%;
+ margin: 10px;
+ cursor: pointer;
+}
+
+#apple-music-video-player-controls #player-pip{
+ position: absolute;
+ z-index: 100001;
+ width: 32px;
+ height: 32px;
+ margin: 10px;
+ right: 50px;
+ border-radius: 100%;
+ background: rgb(255 255 255 / 50%);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+}
+
+#apple-music-video-player-controls #player-pip>svg {
+ width: 50%;
+}
+
+#apple-music-video-player-controls #player-fullscreen{
+ position: absolute;
+ z-index: 100001;
+ width: 32px;
+ height: 32px;
+ margin: 10px;
+ right: 0px;
+ border-radius: 100%;
+ background: rgb(255 255 255 / 50%);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+}
+
+#apple-music-video-player-controls #player-fullscreen>svg {
+ width: 50%;
+}
+
+#apple-music-video-player-controls:hover{
+ opacity: 1;
+}
+
+img[src=""] {
+ text-indent: -10000px;
+}
+
+div#captions {
+ font-size: 1.2rem;
+ position: absolute;
+ top: 85%;
+ text-align: center;
+ width: auto;
+ align-self: center;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: rgba(0,0,0,0.6);
+ color: yellow;
+}
+
+[v-cloak] {display: none!important}
diff --git a/resources/cider-ui-tests/views/main.ejs b/resources/cider-ui-tests/views/main.ejs
index 32ca0303..d7fbdc4f 100644
--- a/resources/cider-ui-tests/views/main.ejs
+++ b/resources/cider-ui-tests/views/main.ejs
@@ -15,7 +15,8 @@
Cider
-
+
+
@@ -114,7 +115,7 @@
-