.drawing-board, .drawing-board * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }

.drawing-board-utils-hidden, .drawing-board-controls-hidden { display: none !important; }

.drawing-board { position: relative; display: block; }

.drawing-board-canvas-wrapper { position: relative; margin: 0; border: 2px solid #999; }

.drawing-board-canvas { position: absolute; top: 0; left: 0; z-index: 10; width: auto; }

.drawing-board-canvas { cursor: crosshair; z-index: 20; }

.drawing-board-cursor { position: absolute; top: 0; left: 0; pointer-events: none; border-radius: 50%; background: #ccc; background: rgba(0, 0, 0, 0.2); z-index: 30; }


.drawing-board-control > button, .drawing-board-control-colors-rainbows, .drawing-board-control-size .drawing-board-control-inner, .drawing-board-control-size-dropdown { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; border: none; background-color: #eee; padding: 0px 0px; border: 1px solid #999; box-shadow: 0 1px 3px -2px #121212, inset 0 2px 5px 0 rgba(255, 255, 255, 0.3); -webkit-box-shadow: 0 1px 3px -2px #121212, inset 0 2px 5px 0 rgba(255, 255, 255, 0.3); height: 40px; }

.drawing-board-control > button { cursor: pointer; min-width: 40px; line-height: 14px; }
.drawing-board-control > button:hover, .drawing-board-control > button:focus { background-color: #ddd; }
.drawing-board-control > button:active, .drawing-board-control > button.active { box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2); background-color: #ddd; }
.drawing-board-control > button[disabled] { color: gray; }
.drawing-board-control > button[disabled]:hover, .drawing-board-control > button[disabled]:focus, .drawing-board-control > button[disabled]:active, .drawing-board-control > button[disabled].active { background-color: #eee; box-shadow: 0 1px 3px -2px #121212, inset 0 2px 5px 0 rgba(255, 255, 255, 0.3); -webkit-box-shadow: 0 1px 3px -2px #121212, inset 0 2px 5px 0 rgba(255, 255, 255, 0.3); cursor: default; }

.drawing-board-controls { margin: 0 auto; text-align: center; font-size: 0; display: table; border-spacing: 9.33333px 0; position: relative; min-height: 30px; }
.drawing-board-controls[data-align="left"] { margin: 0; left: -9.33333px; }
.drawing-board-controls[data-align="right"] { margin: 0 0 0 auto; right: -9.33333px; }
.drawing-board-canvas-wrapper + .drawing-board-controls, .drawing-board-controls + .drawing-board-canvas-wrapper { margin-top: 5px; }

.drawing-board-controls-hidden { height: 0; min-height: 0; padding: 0; margin: 0; border: 0; }

.drawing-board-control { display: table-cell; border-collapse: separate; vertical-align: middle; font-size: 16px; height: 100%; }

.drawing-board-control-inner { position: relative; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.drawing-board-control > button { margin: 0; vertical-align: middle; }

.drawing-board-control-colors { color: gray; font-weight: bold; }

/*Color button size*/
.drawing-board-control-colors-current { border: 1px solid #666; cursor: pointer; width: 54px; height: 40px; display: table-cell;vertical-align: middle;}

.drawing-board-control-colors-rainbows { display: inline-block; margin-left: 5px; position: absolute; left: 0; top: 33px; margin-left: 0; z-index: 100; width: 250px; height: auto; padding: 4px; }

.drawing-board-control-colors-rainbow { height: 18px; }

.drawing-board-control-colors-picker:first-child { margin-right: 5px; }

.drawing-board-control-colors-picker { display: inline-block; width: 18px; height: 18px; cursor: pointer; }

.drawing-board-control-colors-picker[data-color="rgba(255, 255, 255, 1)"] { width: 16px; height: 17px; border: 1px solid #999; border-bottom: none; }

.drawing-board-control-colors-picker:hover { width: 16px; height: 16px; border: 1px solid #555; }

.drawing-board-control-drawingmode > button { margin-right: 2px; }
.drawing-board-control-drawingmode > button:last-child { margin-right: 0; }

.drawing-board-control-drawingmode-pencil-button { overflow: hidden; *text-indent: -9999px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAACB0RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaXJld29ya3MgTVi7kSokAAAAFnRFWHRDcmVhdGlvbiBUaW1lADEwLzA0LzEz3QcQUgAAA0JJREFUeJzt3M9L03Ecx/HX94e6g0KBULBunhQSpLyMQDoH0+27m1J4UAS9tF3EU6d58D8QRIjotG/THUQKDLRhLHIVlofQEbTt6zd1OBV/fMNvlxrTMoZv8PP5wvsBX/bZxhfePPl8t7HBFNd1XbBLU0UP4HUckIgDEnFAIg5IxAGJOCARByTigEQckIgDEnFAIg5IxAGJOCARByTigEQckIgDEnFAIg5IxAGJOCARByTigEQckIgDEnFAIg5IxAGJOCARByTigEQckIgDEnFAIg5IxAGJOCARByTigEQckIgDEnFAIg5IxAGJOCARByTigEQckIgDEnFAIp3/c4LGszuwmE7jWWen6DG8uQNzqRSW43G09vdD9PzeCui6WJ2cxKepKdzs6kLH0JDwgIrjOJ4oeOo4eB+P4+vcHBpbWvBgehpaQ4PosbyxA539fSyPjmI7m8VPRUFnLAa1vl747gM8EPDQtpGORnGaz+NIUdA1MYEbHR1SxAMkD1heX0c6GsX142PkHQetg4O4FQhIEw+QOOBWNoul4WG0NDfj+9ERrgUCuN3XJ1U8QNKAW9ks3oyMoN3vx7dSCUpbG+6Pj0sXDwCUg4MDqaYqrK3h3cAA2v1+FHZ3UWxsRCSRED3WhXTRA1SzLAvZjQ34fT7kd3awfniIR/Pzosf6L2kuYcuysLKygmAwiNdNTciNjeHh0pKUl201KQLuFb4g9+IJgo+TWFhYQCaTQWxxUfp4AKCUy2XhU354OoIm3wkK+R/InN5DLBYTPVLNhO/At6sn+Lh9F3d8L5Hbu4HewV7Ytg1VVaGqKjRNq6yrD0VRKrciCQ/4/JWD1c+tKPgPEAoFYNs2dF2HpmnQdR11dXXQdf3MWtM0aJoGAFBVsd/IKaVSSfgl7GXCd6DXSRkw8fuDcyQSObOWkeq6LmQ4EolEZf2H67owDAOGYZx5/l/niDqk+E3ENE0YhgHTNAGgEq3a+fuyEL4DTdNEOByG67oIh8MwTbPmcwEI34FCXwOTySRCoRDOz1DLTBede9WUzc1N6d5FZmZm0NPTc+nnr5JiWZZ0AQFgdnYW3d3dNT8uilIsFqUMWC2VSlXWwWBQ4CR/+wU73fDjmh5Q+QAAAABJRU5ErkJggg=='); background-position: bottom; background-repeat: no-repeat; }
.drawing-board-control-drawingmode-pencil-button:before { content: ""; display: block; width: 0; height: 100%; }

.drawing-board-control-drawingmode-eraser-button { overflow: hidden; *text-indent: -9999px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAACB0RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaXJld29ya3MgTVi7kSokAAAAFnRFWHRDcmVhdGlvbiBUaW1lADEwLzA0LzEz3QcQUgAABDRJREFUeJztnFtPYlcUx/97e5SkD6bCJE4zbeKDo2mwqAWimbSZ2hj70ioRP0o/Qx/7FfraKGj0bRp7SVOk7Us7NaklY7gcK6hgAY2IXM7pwwgBkcG6xH2mWb9kh8Na+7LO72wOlweEaZommFsjVRfwusMCibBAIiyQCAskwgKJsEAiLJAICyTCAomwQCIskAgLJMICibBAIiyQCAskwgKJsEAiLJAICyTCAomwQCIskAgLJMICibBAIiyQCAskwgKJsEAiLJAICyTCAomwQCIskAgLJMICibBAIiyQCAskwgKJsEAiLJAICyTCAomwQCIskAgLJMICibBAIiyQiMb/OUFDU13ATcj9+hyZzTBgGngw+wRvTk2oLqmO5Xdg7pfnyHy7hWGvF0IIRL75CYZhYmDaGhItLTD78+/IbG7hsdeD7PExICVGp6fx57MfUa1W4XjyvuoSIcrlsiUNvpQXwmOPB9lsFkJKCCEAKWG32/HH9z9g8JMP8eADj9I6RalUspzAdDqNVCqF9/4+Qy6bBS7l1STmdB12ux3RF7twffG50lot9xJOp9NIJpNwuVyovFuF+fUzCACmlIBh4B9dh5QSpmmiUqlAdf2iWCxaxuDR0RH29/cxPj6OSqVSjxdWNiGkxPGlPLvdjt2/Inj06ccYfDqlsGJAnJ+fW0Lg4eEh9vb2MDk5iXK53JLf+/IrSCnhcDiwG4ng7c9m8VCxPAAQhUJBucCDgwPoug63242Li4uWvH658xzf/YZo5AXeWZjFw4+mFVTaivJ7YCqVQiKRgMfjQaFQaMknEglIKdHf34+tR2/APTKDwadTyu99NZR/E4nFYvB6vTg7O2vJxePxurxwOAyn04m3RkcVVNke5Tuwdr+rVqtN8VgsVpcXCoXgcrkwMjJimZ1XQ5yeniqtKB6PY2dnB3Nzc8jn8wCAaDQKIQQGBgYQDocxMTEBp9Opssy2iJOTE+WXNBKJYHt7GzMzM8hms/V4KBSC2+3G2NiYwupejcjn80oF5nI5ZDIZ6LqOZDIJwzBgGAYAYHh4GENDQ9A0DX19fejt7YWmadA0DT09PZBS/c+ZIpfLKRVYLBZRKBRQKpVeFiQEpJT1VhNVe2xsQgiVpQOwwJuIzWaDzWa71VjVtQOANE0T3WrLy8sd4+36dJr36rjbzHMXres7sN38jfFONQQCgabnS0tL9XGNuZWVlXo+EAjU+3WTexMYDAab4oFAAH6/v6lPO2r9rs7ZmAsGg03z+f3+pjW6xb19E2k8kcaTvQuuXpzr1uwWXb0HAugYb9fnpi0YDGJxcZE8z23bayFwdXW14xpX53nVmP+9wLW1taZjn8/Xdg2fz3dtn1q82wLv/V14fX0dCwsLTfHG4075m67zX8ZSEKlU6l4+jW5sbAAA5ufn2+Zukm+kse91fa6b6675Fy5oGNxReu0iAAAAAElFTkSuQmCC'); background-position: bottom; background-repeat: no-repeat; }
.drawing-board-control-drawingmode-eraser-button:before { content: ""; display: block; width: 0; height: 100%; }

.drawing-board-control-drawingmode-filler-button { overflow: hidden; *text-indent: -9999px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAACB0RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaXJld29ya3MgTVi7kSokAAAAFnRFWHRDcmVhdGlvbiBUaW1lADEwLzA0LzEz3QcQUgAABEJJREFUeJzt3M1LI3cYwPFvdLPVLFa09OAidBUt7tYkuoJig60IYffkK26XHpYeeuit9NA/wpOHstDSa+mCL8EXsFDBg+yiIBqlIOjBKFYEFZLRvKgxmR5K7LqaVfap/rLwfGEgjr9JHj7MjCOCDtu2bbR3Ls/0AO97CihMAYUpoDAFFKaAwhRQmAIKU0BhCihMAYUpoDAFFKaAwhRQmAIKU0BhCihMAYUpoDAFFKaAwhRQmAIKU0BhCihMAYUpoDAFFKaAwhRQmAIKU0BhCihMAYUpoDAFFKaAwhRQmAIKU0BhCihMAYUpoDAFFKaAwhRQmAIKU0BhCihMAYUpoLBb+j8nZN0yPcBFbWxssLKywsHBAdXV1Xg8HtMjZS0nz8DV1VX8fj8A/f39uN1uwxNlLycBk8kka2trBINBDg4OWFpaytmzMCcBbdtmYWEBv9/P/Pw8s7OznJycUF9fb3q0c+UcYCgUIhaL4ff72dnZAaC39yueP/+JWCyGz+czPOHZcgowFAqxuLhIW1sbu7u7WJYFwOLiAp2dz3jx4hfy8/NpamoyPOl/OQ4PD3NCcH19nWAwSGtrK5ZlYVkWm5ubzM3N8eCBh1TqNg8fNjEx8Rubjqd82fARnV98YHps8mzbxvQWCoUIBoO0tLSc4kWjUba2tujt7WV9/W/S6TyWl5d58uQ7PnbMMDZtMfNXwvjsxgEzeD6fj2g0eoqXTqcpKLhDX18fLlcxLtcdSkpKuH3byaflNvv7+/z+x45xQOP3wMyZF4/Hz+BFo0c4ncU8evT0FO/+/Rqmp0fxer38/GeESARsu9zo/MZ/E4lGo6RSqXN44XCCdDrvFK+6uoqXL8fxer1UVlYSDk+ZHh3IgZ/CHo+H8fFxmpubs+Ldu/cJMzMTeL1eKioqsG2bSCQC/PvMaDLjgLW1taTTaSYnJ2lo8BEOR87glZeXMzMzQV1d3SkegGVZ/PhtvQICuN1ujo6OePVqmpqaz0kmk5SUlHD3bhlTU0M0NjZSVVV1Buv7Z5/xwzdu44AOy7KMTnB4eEgqleL4+Ji5uTmCwSCPH39NcfGHDA39itfrpba2FqfTicvlIj8/n2QyyfHxMU6nk6KiIpPj44hEIkYB9/f3SSQSxONxEokEKysrLC0tAZze8wAKCwspLS2loKCAWCxGLBbD5XJRVlZmcnwc4XDY/DX8Hmf8Qfpt28DAgPEZLtuMAw4ODjI4OHjh94ArHW9yfsfe3t6NXsLDw8P09PSce51t7UX19PS89X0ue9//M6N/lctAXFQGIbNl1r/+OtuxN5mR58A3P/PNrwOBAN3d3Zeuy+x7fW22Y6+rG70HBgIBurq6zuzr6uoiEAic23eV++FV113nduNnYLbPu8ocl60ZGRmhs7Pzxs4+uMFLeHR0lI6OjncCvOzYq665jhzb29s5+yA9NjYGQHt7u2jNdfYPAuwt8f8ZW/EAAAAASUVORK5CYII='); background-position: bottom; background-repeat: no-repeat; }
.drawing-board-control-drawingmode-filler-button:before { content: ""; display: block; width: 0; height: 100%; }

.drawing-board-control-navigation > button { font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-right: 2px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wNC8xM90HEFIAAAAgdEVYdFNvZnR3YXJlAE1hY3JvbWVkaWEgRmlyZXdvcmtzIE1Yu5EqJAAAAMpJREFUeJzt3LEJwDAQBEFZqP+W3z14AyOYqUAsl3yiZ2Zm8dn++wG3EzASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwOv6caCwwssBIwEjASMBIwEjASMBIwEjAyCUSWWAkYCRgJGAkYCRgJGAkYCRg5BKJLDASMBIwEjASMHoB9LpMhFHmb5UAAAAASUVORK5CYII='); background-position: bottom; background-repeat: no-repeat;padding: 0px 4px;}
.drawing-board-control-navigation > button:last-child { margin-right: 0; }

.drawing-board-control-size[data-drawing-board-type="range"] .drawing-board-control-inner { width: 60px; }
.drawing-board-control-size[data-drawing-board-type="dropdown"] .drawing-board-control-inner { overflow: visible; }

.drawing-board-control-size-range-input { position: relative; width: 100%; z-index: 100; margin: 0; padding: 0; border: 0; }

.drawing-board-control-size-range-current, .drawing-board-control-size-dropdown-current span, .drawing-board-control-size-dropdown span { display: block; background: #333; opacity: .8; }

.drawing-board-control-size-range-current { display: inline-block; opacity: .15; position: absolute; pointer-events: none; left: 50%; top: 50%; z-index: 50; }

.drawing-board-control-size-dropdown-current { display: block; height: 100%; width: 60px; padding: 0px 4px;overflow: hidden; position: relative; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wNC8xM90HEFIAAAAgdEVYdFNvZnR3YXJlAE1hY3JvbWVkaWEgRmlyZXdvcmtzIE1Yu5EqJAAAAhRJREFUeJztnFuOqzAQBTuju0EexktMeIV1JZvwfBkBMQ5DZXQ10ikJBdztdlMyQvzkEkIIJk7z9b8b+OtIIEQCIRIIkUCIBEIkECKBEAmESCBEAiESCJFAiARCJBAigRAJhEggRAIhEgiRQIgEQiQQIoEQCYRIIEQCIRIIkUCIBEIkECKBEAmESCBEAiESCJFAiARCJBAigRAJhEggRAIhEgiRQIgEQiQQIoEQCYRIIEQCIRII+af/nGBoB0K0AyESCJFAiARCJBAigRAJhEggRAIh+hKBaAdCJBAigZCvEIKR43q9Zq+Pxs6u95s5R46P7MBtjVTNtm3Ne5+MLXOWeO9fcrz3drvdduO5Hs7kvOMjArc33ratNU3zkpdbq+s6a5pm/s3ViWO5eqlY13W7fafWOcJpgX3fz+fOudW4c251A6mxba1lPP4656zrulX9ZX6OWCP26ZzL1jnr4bTAuq7NzGwYhkOPcN/385wUyzlH6uX6rut6FhfX3MunTyB+icQmQgg2DMPqOo5VVWVVVc2y43iqxnb+tv7e2N6aqVg8zCw5/0cvEaR/Q1VVnyyXXWccx1lSPDez1fmWVGwcR9TLr7yFI/f73cqy3H0843lZlvONLPOX84/WyvWTim1r/pTL8/nEBqdpehkrisKmabKiKJK52/FUzVTOkfl7/aRi7/p4x+XxeOhTBKBPOYgEQr4BZ5fTubJHpB8AAAAASUVORK5CYII='); background-position: bottom; background-repeat: no-repeat;}

.drawing-board-control-size-dropdown-current span { position: absolute; left: 50%; top: 50%; }

.drawing-board-control-size-dropdown { position: absolute; left: -1px; top: 33px; height: auto; list-style-type: none; margin: 0; padding: 0; z-index: 100; background: #fff; }
.drawing-board-control-size-dropdown li { display: block; padding: 4px; margin: 0px 0px; min-height: 16px; }
.drawing-board-control-size-dropdown li:hover { background: #ccc; }
.drawing-board-control-size-dropdown span { margin: 0 auto; }

.drawing-board-control-download-button { overflow: hidden;*text-indent: -9999px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wNC8xM90HEFIAAAAgdEVYdFNvZnR3YXJlAE1hY3JvbWVkaWEgRmlyZXdvcmtzIE1Yu5EqJAAAAMpJREFUeJzt3LEJwDAQBEFZqP+W3z14AyOYqUAsl3yiZ2Zm8dn++wG3EzASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwEjASMBIwOv6caCwwssBIwEjASMBIwEjASMBIwEjAyCUSWWAkYCRgJGAkYCRgJGAkYCRg5BKJLDASMBIwEjASMHoB9LpMhFHmb5UAAAAASUVORK5CYII='); background-position: bottom; background-repeat: repeat-x;}

.drawing-board-control-download-button { overflow: hidden; *text-indent: -9999px;font-weight: bold;}
.drawing-board-control-download-button:before { display: block; width: 0; height: 100%;}
.skm {padding: 0px 5px;}