body{margin:0;background-color:#fff;font-family:sans-serif;color:#000;image-rendering:pixelated;overflow:hidden;background-image:url(/assets/img/cloud-tile.png);animation:scroll-background 20s linear infinite}@keyframes scroll-background{0%{background-position-x:0%}to{background-position-x:100%}}#startGameButton{cursor:pointer}canvas{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1;cursor:pointer}#overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:999;transition:opacity .5s ease-out;cursor:default}#midiProgressWindow{position:absolute;top:8px;left:8px;right:8px;z-index:1050;display:flex;flex-direction:column}#midiProgressWindow .window-body{display:flex;align-items:center;justify-content:center;padding:5px;flex-direction:column}.play-icon-img{width:64px;height:64px;cursor:pointer;margin-top:20px}#loaderGif{width:100px;height:100px}#overlay.fade-out{opacity:0;pointer-events:none}#devControls input[type=range]{vertical-align:middle;margin-right:5px}#devControls span{vertical-align:middle}.size-multiplier-button.active,.tiles-to-swap-button.active,.update-interval-button.active,.grid-size-button.active{border-style:inset;font-weight:700}#topRightControls .field-row{margin-bottom:5px}#topRightControls .field-row:last-child{margin-bottom:0}#topRightControls .field-row button{margin-left:2px}#topRightControls .field-row button:first-child{margin-left:0}#sizeMultiplierButtons button{margin-right:2px}#sizeMultiplierButtons button:last-child{margin-right:0}#volume-control,.control-group{display:flex;align-items:center;margin:0 5px}#zoom-controls{display:flex;align-items:center}#controls-2{display:flex;flex-direction:row;align-items:center;width:100%}#playPauseMidiButton{margin-right:10px;display:flex;justify-content:center;align-items:center}#midiProgressWindow{max-width:855px;margin:0 auto}#mainControlsBar{padding:5px;max-width:855px;margin:0 auto}#mainControlsBar label{font-weight:700}@media (min-width: 901px){#mainControlsBar button{padding:10px}}#zoom-controls img{width:16px;margin-right:5px}#canvasScaleButtons{display:flex;flex-direction:row;align-items:center;justify-content:center}#canvasScaleButtons button{display:flex;flex-direction:row;align-items:center;width:100px;cursor:pointer;margin-right:5px;padding:10px}#canvasScaleButtons button:last-child{margin-right:0}#playPauseButton{width:100%}.initially-hidden{display:none}#loadingContainer{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000}#loadingContainer.fade-out{opacity:0;transition:opacity .5s ease-out;pointer-events:none}#mainControlsBar{position:absolute;bottom:8px;left:8px;right:8px;z-index:1000;display:none;flex-direction:row;justify-content:space-between;align-items:center}#isoCanvas.fade-in,#audioControlsContainer.fade-in,#mainControlsBar.fade-in,#midiProgressWindow.fade-in{opacity:1;transition:opacity .5s ease-in}#isoCanvas,#audioControlsContainer,#mainControlsBar,#midiProgressWindow{opacity:0}#progressBarContainer{width:100%}#progressBarFill{width:0%;height:20px;background-color:navy;transition:width .1s linear}#loadingLogOutput{height:100px;overflow-y:auto;border:1px solid #000;padding:5px;margin-top:10px;font-size:.8em;background-color:#fff;color:#000}@media (max-width: 900px){#loadingContainer{width:95vw!important;max-width:400px}#midiProgressWindow #controls-2{flex-wrap:wrap;gap:4px}#midiProgressWindow .control-group{flex:1 1 30%;margin:0;min-width:0}#midiProgressWindow select{width:100%}#midiProgressWindow #volume-control{flex:1 1 auto;margin:0;padding:0;display:flex;align-items:center;order:1}#midiProgressWindow #volume-control label{white-space:nowrap}#midiProgressWindow #volumeSlider{flex-grow:1;width:auto!important;margin-left:5px}#midiProgressWindow #playPauseMidiButton{flex:0 0 auto;min-width:70px;margin:0;white-space:nowrap;order:2}#mainControlsBar{flex-wrap:wrap;gap:4px;padding:6px}#mainControlsBar .control-group:first-of-type{flex:1 1 auto;margin:0;order:1}#tilesToSwapButtons{display:flex;gap:2px;width:100%}#tilesToSwapButtons button{flex:1;margin:0}#mainControlsBar>label:nth-of-type(1){flex:0 0 auto;margin:0 0 0 4px;align-self:center;order:2}#mainControlsBar .control-group:nth-of-type(2){flex:1 1 auto;margin:0;order:3}#updateIntervalButtons{display:flex;gap:2px;width:100%}#updateIntervalButtons button{flex:1;margin:0}#mainControlsBar>label:nth-of-type(2){flex:0 0 auto;margin:0 4px;align-self:center;order:4}#mainControlsBar .control-group:nth-of-type(3){flex:1 1 auto;margin:0;order:5}#gridSizeButtons{width:100%}#zoom-controls{flex:1 1 100%;margin:0;order:6}#canvasScaleButtons{display:flex;gap:4px;width:100%}#canvasScaleButtons button{flex:1;margin:0;white-space:nowrap}}.title-bar,.window,button,input,label,legend,li[role=tab],option,select,table,textarea,ul.tree-view{-webkit-font-smoothing:auto}