body,html{font-family:Arial,sans-serif;height:100%;margin:0;overflow:hidden;padding:0}*{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.App{background-color:#f0f0f0;display:flex;height:100vh;overflow:hidden;width:100vw}.App[data-toolbar-position=bottom]{flex-direction:column}.App[data-toolbar-position=left]{flex-direction:row}.App[data-toolbar-position=left] .toolbar{order:-1}.toolbar{background-color:#333;color:#fff;display:flex;flex-shrink:0;position:relative;z-index:1000}.toolbar[data-position=bottom]{align-items:center;flex-direction:row;height:64px;justify-content:center;width:100%}@supports (-webkit-touch-callout:none){.toolbar[data-position=bottom]{bottom:0;left:0;padding-bottom:env(safe-area-inset-bottom);position:fixed;width:100%;z-index:1000}.App[data-toolbar-position=bottom]{bottom:0;height:100%;left:0;position:fixed;right:0;top:0}.App[data-toolbar-position=bottom] canvas{height:calc(100% - 64px - env(safe-area-inset-bottom, 0px));position:absolute;top:0;width:100%}}.toolbar[data-position=left]{align-items:center;flex-direction:column;height:100%;justify-content:flex-start;padding-top:30px;width:64px}.button{background-color:initial;border:none;color:#fff;cursor:pointer;display:inline-block;font-size:18px;line-height:1;padding:6px 15px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.button:hover{color:#ccc}.button-container{display:inline-block;position:relative;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.toolbar[data-position=bottom] .button-container{margin:0 8px}.toolbar[data-position=left] .button-container{margin:8px 0}.toolbar[data-position=bottom] .button{padding-bottom:9px;padding-top:3px}.sub-menu{background-color:#333;border-radius:8px;box-shadow:0 -2px 10px #0003;display:none;max-width:300px;min-width:100px;padding:15px;position:absolute;text-align:left;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;white-space:nowrap;z-index:1000}.sub-menu.active{display:block}.sub-menu.sidebar-mode{left:74px;top:0;transform:none}.sub-menu.bottom-mode{bottom:74px;left:0;transform:none}.sub-menu.centered-mode{bottom:74px;left:50%;position:fixed;top:auto;transform:translateX(-50%)}.sub-menu-item{border-bottom:1px solid #eee;color:#333;display:block;padding:8px 0;text-decoration:none}.sub-menu-item:last-child{border-bottom:none}.sub-menu-item:hover{color:#4caf50}.button.disabled{cursor:not-allowed;opacity:.5}.brush-button{align-items:center;border:1px solid #ccc;border-radius:5px;cursor:pointer;display:flex;height:48px;justify-content:center;width:48px}.brush-button.active{background:#888;cursor:default;opacity:.6}.brush-button:not(.active){background:#444;opacity:1}.stroke-button{align-items:center;border:1px solid #ccc;border-radius:5px;display:flex;height:48px;justify-content:center;width:48px}.stroke-button.active{background:#888;cursor:default;opacity:.6}.stroke-button:not(.active){background:#444;cursor:pointer;opacity:1}.tool-icon{color:#fff;font-size:28px}.brush-container{align-items:center;display:flex;height:20px;justify-content:center;width:20px}.color-swatch{border:1px solid #fff;display:inline-block;height:20px;width:20px}.color-grid{grid-gap:0;border:1px solid #fff;display:grid;gap:0;grid-template-rows:repeat(8,1.8rem);padding:0}.color-row{grid-gap:0;display:grid;gap:0;grid-template-columns:repeat(8,1.8rem)}.color-cell{cursor:pointer;height:1.8rem;width:1.8rem}.brush-menu{display:flex;flex-direction:row;gap:8px;padding:8px}canvas{touch-action:none}.canvas-container{align-items:center;background-color:#666;display:flex;flex-grow:1;justify-content:center;min-height:0;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);position:relative}.canvas{background-color:#fff;display:block;margin:auto}
/*# sourceMappingURL=main.653a54ac.css.map*/