.buttons{margin-right:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.main{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden}.main .window{padding:5px;text-align:left;color:#fff;overflow:hidden}.directions-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:1px}.direction{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.window{position:relative;border:2px solid transparent;padding:20px;border-radius:5px;background-color:#f9f9f9;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.1);box-shadow:0 2px 4px rgba(0,0,0,.1);-webkit-transition:border-color .3s ease,-webkit-transform .3s ease;transition:border-color .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,border-color .3s ease;transition:transform .3s ease,border-color .3s ease,-webkit-transform .3s ease}.selected{border:3px solid rgba(4,37,255,.62);//border-color:#007bff;cursor:pointer}.window-actions{position:absolute;top:0;right:0;margin-top:-10px;text-align:right}.window-top{height:10%;color:#fff;background-color:#3f495e}.window-bottom{height:90%;background-color:#000}.tool-box{width:60vw;height:40px;padding:5px 30px;margin:20px auto 0;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:right}.canvas-wrap{width:60vw;height:33.75vw;margin:0 auto;background-color:#000;border:3px;border-color:#333;position:relative}#drawCanvas,#imgCanvas,#saveCanvas{background:rgba(255,0,255,0);position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}#drawCanvas{z-index:2}