to avoid ValidateDOMNesting warnings. */ .thingy { margin-top: 10px; margin-bottom: 10px; } .thingy:first-child { margin-top: 0; } ul.navbar { display: flex; list-style-type: none; margin: 0; padding: 0; justify-content: flex-end; } ul.navbar li { border-right: 1px solid gray; margin-right: 8px; padding-right: 8px; } ul.navbar li:last-child { border-right: none; padding-right: 0; margin-right: 0; } .flex-widget { display: flex; flex-direction: column; } .flex-widget label { margin-bottom: 8px; } .canvas { grid-area: canvas; display: flex; align-items: center; justify-content: center; overflow: hidden; } .canvas.scrollable { display: block; overflow: auto; } .sidebar .disabled { color: gray; } .sidebar label.checkbox { display: block; margin-top: 10px; margin-bottom: 10px; } .error { color: red; } .page-error { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.75); } .page-error div { background: crimson; color: white; padding: 2em; max-width: 50em; } .page-error div p:first-child { margin-top: 0; } .page-error div p:last-child { margin-bottom: 0; } .page-error div button { display: block; width: 66%; margin: 3em auto 0 auto; text-align: center; }