.coloring-book-canvas{background:transparent;cursor:crosshair}.coloring-book-canvas.loading{cursor:wait}.confetti-canvas{width:100vw;height:100vh;position:fixed;left:0;top:0}.coloring-book-canvas-bg{background:transparent;overflow:hidden}.canvas-holder{overflow:hidden}.drawing-box{padding:.5em;background:#fff;border:2px #d9e3e7 dashed;border-left:0;border-right:0}.tools-panel{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:fixed;bottom:1em;left:1em;background:#0a7bcc80;border-radius:8px;display:flex;flex-direction:row;align-items:center;z-index:2;padding:.2em;max-width:calc(100vw - 2em);flex-wrap:wrap;row-gap:3px}.tools-panel.play-only *{display:none}.tools-panel.play-only .play-elem{display:block}@media(max-width: 840px){.tools-panel{bottom:0;left:0;max-width:100vw;width:100vw}}.coloring-book-canvas{box-shadow:rgba(0,0,0,.2) 0px 3px 1px -2px,rgba(0,0,0,.14) 0px 2px 2px 0px,rgba(0,0,0,.12) 0px 1px 5px 0px}.tools-spacer{margin:8px;border:1px #fff solid;height:1em}.color-item{width:1.8em;height:1.8em;margin:.05em;border-radius:100%;cursor:pointer;border:2px #1d1d1d solid}.color-item.active{border-color:#fff}.pencil{pointer-events:none;position:fixed;border-radius:100%}.pen-elem-holder{border:1px #add8e6 solid;border-radius:8px;overflow:hidden;display:flex}.pen-settings-holder{position:absolute;background:#0a7bcc80;padding:.2em;max-width:calc(100vw - 2em);top:-2.5em;left:0;border-radius:8px;display:flex;flex-direction:row;align-items:center;z-index:2}.pen-elem{color:#fff;cursor:pointer;padding:4px;background:none;width:1.4em}.pen-elem.active{color:#1d1d1d;background:#add8e6}@keyframes spin{to{-webkit-transform:rotate(360deg)}}.spinner{position:fixed;top:0;left:0;width:100vw;height:100vh;display:none;z-index:100;justify-content:center;align-items:center;color:#fff;padding-top:100px;background:#00000040;backdrop-filter:blur(2px)}.spinner:after{display:inline-block;content:"";width:50px;height:50px;border:3px solid #add8e6;border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite;position:absolute;left:calc(50% - 25px);top:calc(50% - 25px)}.button{text-align:left;color:#2c475c;margin-bottom:.5em;font-weight:bold;background:transparent;border:none;border-radius:0;border-bottom:1px #1b9a59 solid;box-shadow:none}.button.subbutton{padding:.4em .2em;margin:.1em;background:#ffffff80;font-size:1.1rem;filter:drop-shadow(0px 1px 2px white);border:none}.my-drawing-wrapper{display:flex;height:190px;overflow-y:hidden;overflow-x:auto;background:#d9e3e7;padding:0 .5em .5em .5em;border-radius:0 0 8px 8px}.my-drawing-header{text-align:center;background:#d9e3e7;border-radius:8px 8px 0 0;width:100%;margin:1em 0 0;padding:.2em}.opacity-tool{display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:1em;background-color:#eee;background-size:6px 6px;background-position:0 0,3px 3px;background-image:linear-gradient(45deg, gray 25%, transparent 25%, transparent 75%, gray 75%, gray),linear-gradient(45deg, gray 25%, transparent 25%, transparent 75%, gray 75%, gray)}.my-drawing{display:inline-block;padding:.2em}.my-drawing>img{width:auto;height:150px;box-shadow:0px 3px 1px -2px rgba(0,0,0,.2),0px 2px 2px 0px rgba(0,0,0,.14),0px 1px 5px 0px rgba(0,0,0,.12)}.my-drawing-image{width:100px;height:auto;position:absolute;top:0;left:0}.drawing-tag{font-size:.9rem;line-height:1.8em;border-radius:.3em;color:#383432;background:#c8e2ec;padding:.2em .4em .2em;font-weight:normal;white-space:nowrap}.drawing-tag.tag-active{color:#fff;background:#7f5194}.audio-elem{position:absolute;top:.5em;left:.5em;padding:8px;filter:drop-shadow(1px 1px 2px gray)}@keyframes scale{from{transform:scale(0);opacity:1}to{transform:scale(100);opacity:.5;display:none}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}