*{padding:0;margin:0;font-family:'Open Sans', sans-serif}body,html{overflow:hidden;background-color:#000000}.settings{position:absolute;z-index:100;height:calc(100% - 60px);width:200px;background-color:#222222;padding:30px;font-size:18px}.settings label{display:block;color:#cccccc;width:100%;margin:15px 0 5px}.settings label:nth-of-type(1){margin-top:0}.settings input{font-size:18px;display:block;width:100%;margin:0 0 5px;box-sizing:border-box;border:0;outline:0;-webkit-apperance:none;line-height:35px;padding:0 10px}.settings input[type="number"]::-webkit-inner-spin-button,.settings input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.settings input[type="number"]{-moz-appearance:textfield}.settings button{background-color:transparent;font-size:18px;padding:5px 10px;cursor:pointer;border:0;outline:0;-webkit-apperance:none}.settings .grid-setting{margin-top:15px}.settings .grid-setting:before{content:'';display:inline-block;width:calc(100% - 60px);position:absolute;height:34px;background-color:#000000;margin-top:29px}.settings .grid-setting:after{-webkit-transition:all 100ms ease-out;-moz-transition:all 100ms ease-out;-o-transition:all 100ms ease-out;transition:all 100ms ease-out;content:'';display:inline-block;width:50%;position:relative;height:34px;top:-34px}.settings .grid-setting[data-status="on"] button#grid-on{color:#ffffff}.settings .grid-setting[data-status="on"] button#grid-off{color:#ffffff}.settings .grid-setting[data-status="on"]:after{left:0px;background-color:green}.settings .grid-setting[data-status="off"] button#grid-on{color:#ffffff}.settings .grid-setting[data-status="off"] button#grid-off{color:#ffffff}.settings .grid-setting[data-status="off"]:after{left:50%;background-color:red}.settings .grid-setting button{width:50%;float:left;position:relative;z-index:20}.settings .increments{width:50px;height:35px;position:absolute;margin-top:-40px;right:30px;background-color:#000000}.settings .increments .increment{cursor:pointer;width:100%;height:50%;position:relative}.settings .increments .increment:hover{background-color:#111111}.settings .increments .increment:before,.settings .increments .increment:after{display:inline-block;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);content:'';width:8px;height:2px;background-color:white}.settings .increments .increment.up:after{transform:translateX(-50%) translateY(-50% rotate(90deg));-moz-transform:translateX(-50%) translateY(-50%) rotate(90deg);-o-transform:translateX(-50%) translateY(-50%) rotate(90deg);-webkit-transform:translateX(-50%) translateY(-50%) rotate(90deg)}.settings .undo{position:absolute;bottom:30px;width:calc(100% - 60px)}.settings .undo button{width:100%;color:#ffffff;background-color:#000000}.cp-color-picker{z-index:100}.grid{position:absolute;display:inline-block;pointer-events:none;background:-webkit-linear-gradient(rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.5) 90%, rgba(255,255,255,0) 100%);background:-o-linear-gradient(rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.5) 90%, rgba(255,255,255,0) 100%);background:-moz-linear-gradient(rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.5) 90%, rgba(255,255,255,0) 100%);background:linear-gradient(rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.5) 90%, rgba(255,255,255,0) 100%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.grid-circle-container{position:relative;top:0}.grid-circle-container .grid-circle{position:absolute;border:1px solid rgba(150,150,150,0.5);border-radius:100%;box-sizing:border-box}.canvas-container{width:100vw;height:100vh;padding-left:calc(((100vw - 260px) / 2) + 260px)}.canvas-container .canvas-part{position:absolute;display:inline-block}.canvas-container #draw-canvas{cursor:pointer}.canvas-container .active{animation-duration:2s;animation-iteration-count:infinite;animation-name:active;animation-timing-function:ease-in-out;animation-direction:alternate}.canvas-container .draw-canvas,.canvas-container .canvas,.canvas-container .mirror-canvas{position:absolute;display:inline-block;-webkit-clip-path:url("#myClip");clip-path:url("#myClip")}.canvas-container .mirror-canvas{filter:FlipH;transform:translateX(-100%) scaleX(-1);-moz-transform:translateX(-100%) scaleX(-1);-o-transform:translateX(-100%) scaleX(-1);-webkit-transform:translateX(-100%) scaleX(-1);-ms-filter:'FlipH'}@keyframes active{20%{background-color:transparent}100%{background-color:rgba(150,214,255,0.2)}}