body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}button svg{height:100%;width:100%}.App{--accent:#388e3c;--header-background:#000;--header-color:#fff;--text-color:#000}.App[data-theme=dark]{--header-background:#000;--accent:#a5d6a7;--text-color:rgba(255,255,255,87%);--background:#121212}.App{height:100vh;display:grid;grid:"header header" auto "browser queue" 1fr "footer footer" auto/4fr 5fr;background:var(--background);color:var(--text-color)}.App[data-layout=left]{grid:"header header header" auto "footer browser queue" 1fr/auto 4fr 4fr}.App[data-layout=right]{grid:"header header header" auto "browser queue footer" 1fr/4fr 4fr auto}.App-intro{font-size:large}.App-panels{display:none}.App main{grid-area:browser;overflow:auto;padding:0 16px}.App aside{grid-area:queue;overflow:auto}.App footer{grid-area:footer}@media screen and (max-width:800px){.App[data-layout]{grid:"header" auto "panels" auto "main" 1fr "footer" auto/1fr}.App main{grid-area:main;padding:0 8px}.App-panels{grid-area:panels;display:grid;grid:auto/1fr 1fr;text-align:center;margin-bottom:4px}.App-panels input{display:none}.App-panels label{background-color:var(--controls-background)}.App-panels #panel-main:checked~label[for=panel-main],.App-panels #panel-side:checked~label[for=panel-side]{background-color:var(--background)}.App aside{grid-area:main}.App[data-panel=main] aside,.App[data-panel=side] main{display:none}.ArtistName{margin:0}}.Login{--background-color:#282c34;--color:#fff;background-color:var(--background-color);min-height:100vh;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;font-size:calc(10px + 2vmin);color:var(--color)}.Header,.Login{-webkit-align-items:center;align-items:center}.Header{grid-area:header;background-color:var(--header-background);display:grid;grid:"logo title search settings user" auto/auto auto 1fr auto auto;grid-column-gap:10px}.Header-logo{grid-area:logo;height:80px}.Header-logo img{min-width:64px;height:64px;padding:8px}.Header-title{grid-area:title;color:var(--header-color);font-size:1.5em}.Header-search{grid-area:search;max-width:600px}@media screen and (max-width:800px){.Header{grid:"logo title  user" auto "logo search user" auto/auto 1fr auto;grid-column-gap:2px}.Header-title{margin:0;justify-self:center}.Header-search{height:20px;margin:6px 0}}.Settings{grid-area:settings;justify-self:right;display:grid;grid:auto/auto auto;grid-column-gap:10px}.Settings-theme{width:100px}.Settings-layout{width:170px}@media screen and (max-width:800px){.Settings{display:none}}.UserInfo{grid-area:user;justify-self:right;display:grid;grid:1fr/1fr auto;-webkit-align-items:center;align-items:center;color:var(--header-color)}.UserInfo-loading{color:#999}.UserInfo-error{color:#c00}.UserInfo img{width:64px;padding:8px;border-radius:64px}@media screen and (max-width:800px){.UserInfo span{display:none}}.Filters{padding:8px 0;display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:10px;grid-row-gap:4px}.Filters h3{font-size:1em}.Filters .Latest{-webkit-align-self:center;align-self:center}.Filters .Latest label{color:grey}.Filters .Latest input{margin-left:8px}.Filters .Filter{grid-column-end:span 3}.Filters .Filter input{width:100%;height:30px;border-radius:4px;border-width:1px;padding-left:8px;font-size:16px}@media screen and (max-width:800px){.Filters{grid-template-columns:repeat(2,1fr)}.Filters .Filter{display:none}}.Album{display:grid;grid:"cover year    title     actions" auto "cover country publisher actions" auto "cover tracks  genre     actions" auto/auto auto 1fr auto;grid-column-gap:8px;padding-bottom:10px}.Album img{grid-area:cover;width:64px;height:64px}.Album-year{grid-area:year}.Album-country{grid-area:country}.Album-tracks{grid-area:tracks}.Album-title{grid-area:title}.Album-publisher{grid-area:publisher}.Album-genre{grid-area:genre}.Album-actions{grid-area:actions}.Album-actions button{padding:0;width:24px;height:24px;border:0;border-radius:4px;cursor:pointer;background:var(--button-background)}.Album-actions button:hover{background:var(--controls-button-hover-background)}.AlbumPage table button{padding:0;width:24px;height:24px;vertical-align:bottom;border:0;border-radius:4px;cursor:pointer;background:var(--button-background)}.AlbumPage table button:hover{background:var(--controls-button-hover-background)}@media screen and (max-width:800px){.AlbumPage h1{margin:5px 0}.AlbumPage h2{margin:2px 0}.AlbumPage h3{margin:1px 0}}.Queue button{vertical-align:bottom}.Queue-active{background:var(--accent)}.Queue button{padding:0;width:24px;height:24px;border:0;border-radius:4px;cursor:pointer;background:var(--button-background)}.Queue button:hover{background:var(--controls-button-hover-background)}.App{--controls-background:#eee;--controls-button-background:#f0f0f0;--controls-button-hover-background:rgba(0,0,0,0.2);--controls-button-hover-disabled:rgba(0,0,0,0.1)}.App[data-theme=dark]{--controls-background:rgba(255,255,255,12%);--controls-button-background:rgba(240,240,240,12%)}.App[data-theme=dark] button{background:var(--controls-background);border:1px transparent}.App[data-theme=dark] svg path{fill:var(--text-color)}.Controls{display:grid;grid:"progress progress progress progress" auto "cover    buttons time title" auto "cover    buttons time album" auto "cover    buttons time artist" auto/auto auto 1fr 10fr;background-color:var(--controls-background);-webkit-align-items:center;align-items:center;grid-column-gap:16px;padding-bottom:4px}.App[data-layout=left] .Controls,.App[data-layout=right] .Controls{grid:"cover cover" auto "progress progress" auto "buttons time" auto "title title" auto "album album" auto "artist artist" 1fr/auto 1fr;grid-column-gap:0;width:300px}.App[data-layout=left] .Controls img,.App[data-layout=right] .Controls img{width:300px;height:300px}.App[data-layout=left] .Controls-artist,.App[data-layout=right] .Controls-artist{-webkit-align-self:start;align-self:start}.App[data-layout=left] .Controls>div,.App[data-layout=right] .Controls>div{padding:4px 8px}.Controls-progress{grid-area:progress}.Controls progress{-webkit-appearance:none;appearance:none;width:100%;height:8.4px;pointer-events:none;box-sizing:border-box;border:0;display:block;background-color:var(--controls-background)}.Controls progress::-webkit-progress-bar{background-color:var(--controls-background)}.Controls progress::-webkit-progress-value{background:var(--accent);border-radius:1px}.Controls progress::-moz-progress-bar{background:var(--accent);border-radius:2px}.Controls-time{grid-area:time;justify-self:center}.Controls img{grid-area:cover;width:64px}.Controls-artist{grid-area:artist}.Controls-album{grid-area:album}.Controls-error,.Controls-title{grid-area:title}.Controls-buttons{grid-area:buttons;display:grid;grid-template-columns:repeat(4,auto);-webkit-align-items:center;align-items:center;grid-column-gap:8px;justify-self:left}.Controls-buttons button{height:32px;width:32px;padding:0;border:0;border-radius:4px;cursor:pointer;background:var(--button-background)}.Controls-buttons button:hover{background:var(--controls-button-hover-background)}.Controls-buttons button:disabled{background:var(--controls-button-hover-disabled);cursor:auto}.Controls-buttons button:nth-child(2){height:48px;width:48px}@media screen and (max-width:800px){.App[data-layout] .Controls{grid:"progress progress progress" auto "cover    buttons time" auto "cover    title artist" auto "album    album album" auto/auto auto 1fr;grid-column-gap:4px;width:auto}.App[data-layout] .Controls-buttons{grid-column-gap:10px}.App[data-layout] .Controls progress{height:4px}.App[data-layout] .Controls-album{padding:0 8px}.App[data-layout] .Controls-artist{min-width:25vw;padding:0 8px;text-align:right}.App[data-layout] .Controls-time{justify-self:right;padding-right:8px}.App[data-layout] .Controls img{width:64px;height:64px}.App[data-layout] .Controls>div{padding:0}}
/*# sourceMappingURL=main.fe8f295c.chunk.css.map */