.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: 1px solid #ddd; }

.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; padding: 2px 4px; height: 28px; background-color: #fff; border: none; box-shadow: none; border-radius: 2px; border: 1px solid #ccc; }

.drawing-board-control > button { cursor: pointer; min-width: 28px; line-height: 14px; background-color: #fff; border: none; box-shadow: none; border-radius: 2px; }
.drawing-board-control > button:hover, .drawing-board-control > button:focus { background-color: #ccc; }
.drawing-board-control > button:active, .drawing-board-control > button.active { 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: 28px; }
.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 { font-size: 0; line-height: 0; }

.drawing-board-control-colors-current { border: 1px solid #ccc; cursor: pointer; display: inline-block; width: 26px; height: 26px; border: none; border-radius: 2px; }

.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 #ccc; 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,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFo9M/3AAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAAXnVPIAAACF0lEQVQ4EZVSXWsTQRSd2Zk7m6S2aGPVqGkjraAiJEisWKvFim9aRX2z9AMR/4V/QRRBwb/QJ59EQRGFotVHo9QXEWJKtamNpk12Z3acO82GbAx+DOzOzD33nJm55xLSOqqXx7XdM4AZcm0wLYUQB5sZN4b65bsPi5oYePbm4cEggmIaABzDmTY2w/nenhd+Zj9DJI/y5/bu9BEkcydyeiLd2NhI2w+1Jqdm1N1797W9T4gb4Oh1cxWUw6/bdZW9idaaHkluUyFw3pwVuWKX6y6e3b29ThnXESCU7jSLWLzUKW5jXLjVb6tr2uGgfksCDj+XL47pfQOZ+vLKqjZKH21lMBPB7xdOduF6zZck8+RN2dtYT26WjsMPA25BUGpN+h6+LHvST+LeMcyvIajaQEwgqURiwySpyqXTWnBYscHW38iOJFat7oL43Br/rzX6A26semr8jMLnRzz6k5IhDuPr+xJxiaXBlsIaotGhEO8kgMYTTZ7NDqRit7JDDHPWVcAmxo57S7FuciibNXyoECVfRQQaxKfT/bvit3OmG1uGcCjpBe68LRYrxdKXUc/z3iNsBQwxjydOGeKdNiL6cvV1QT5eKleIQ0eNP5YYanPsMF8FC5zSYE9cNJ1HzyYXCvJRqTMxFCCMwYMr6ZSP/Tw3ktOM8eDA1h6Jnv5L+1IBomBO92sqeE4ZnQfHma/Vap+aJ/xl8Qv3MNZ5ACXiagAAAABJRU5ErkJggg=='); background-position: 50% 50%; 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,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFo9M/3AAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAAXnVPIAAACXklEQVQ4EWNgAAIOUflWBi0dnSWnz53/DxIAA8Y37z/+D9vGwsAI4mpqai6XrDkTAZZiYmL6B5IFYbAAjGDi4H4OYzPwKBj8d1r69T8DI9M/hlVr1oKVC+m6/Gdi5fjHANPPzs7+D64FxuCW1V5uULkZoR0moaWtvXT12nX/z5y/8F9I1xmsAGSH/bzX/xk6u3vAdsCMBtFgL4EcAAQgj3gxMjJumbdg4ROQQGpykvSfP398QWysgImN6yNQIhgmyQxjgGgmFvZ/DgvecrDyioR9uHn4yf8/v88jK/hnN/cVIxMzCwOfsgkDCyef34ebRx+CAxPk56cvXjGqqqr80Ou+wcHMxgE2eF8s339GmCTMKhUV5Z/6PTfZ769pZvj1/mkWPOSQvcnOwflb0i4mH6ypt38CSjjk5Rf8j4yMLICZyHz+3DnF27dvy/35/ftNY30d4+UrVxbu3bPnGFCBKhD/hSnESvPI6qwExaBqbNd/hcBKcPQyc3AlIysG+xJZAMRmF5be9+vDawf90jWMwLhDkX6yaybDrUUl/5nZOVL+/vg2jwlZVlNTexkoVHqbqh0FBPl/Pto6keHvrx/IShhk3NIZnJZ8ZlQMrp3LyMzyGywJSi0gjbDEBwsxUOoRFBb9DkpB9vPfwlMRKCXJeub+Z+bg+c3AxsaGoRFmAIwGpS4BYZEfoFQt65HznxGYJMRtYvPAtucXFqFEA0wTOp2bl/8fZJm2kU0Lip+0tLQqQVmtb8JErAaB4hXkPeS4RTYAFAvfoQKghAnCv6B8EMUGxH+AGDP/gWQZGJYCACwfg50LoOvzAAAAAElFTkSuQmCC'); background-position: 50% 50%; 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,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFo9M/3AAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAAXnVPIAAACi0lEQVQ4EWNgAAJRUbGpIJrB/u2O/2AGmBD2tPwPFxEREZsG54CkL168iJAFCYiIiS0D0SDABCJYZcWFJfU1Y0FsBklj3Z0g/fZvtv+XNNCKZhL/z/bxz4t3DLfcy3Y9v3BtKVgViBAWFW0F0SIiUkYNDQ1go0B8OINVTNBZsS7pv/b1OWd3mvL+BRkHUsACIkDOymK5ysAiIQTiMrBZaANdwgJyBMIKAyPjVSCFIEeBVaEToqISYcKiYvOVlJT40eXAfBFZWSkHBwcWoGPnIiuAO1KAnf3L14qgL9ymGkEYCkA6eVoSX3GZqrGzf/8hoJIR8gKmiAUk+SHT9QuHjgI7SFBsRgkDiwi/ODBmnt+dsUaSiYub5zLPggOf2SWEwZqAkgxfT934KXvjjSxY4P///4wLFy36auPp+hoU5iY7Jv4AmQqWBBIsjIyMQDX/eYDsL1PDOt7y/GWQOHDgwB+YAgxaWELCFJgCOmESIlJS6kD+DBgfnWZEFwAlHw4OtmIVFZXfNz+/3cquIG7w+cjld5ysrEZPnjz5jq4e7lZkib8ivNuAYWopycbIzquvyvCsYYHYvy/fH0ie5ytCSUJATcwwjSCP/xTm3SHVmhLw/u4jFZFQBxYuFRmGP68/MAgv3cjArijJLTa7PIj1049M9j8Mz7+8eH0ZpBfsBTMz80UMvJxef0v9hVllxRhgQQ4zHJn+evrmz1cT1zz6cfMRL8OX7wbgpPD/P8Pn7PgkznmSTgwsJQvegFI8OgDF3S230l08Het5Hm0/rPbq3kPJV69evYSrA8UnKMmC4hSUbEHxan11GTheQUkYOW7hmoAMjFgAGWRkZDyHX0DA/sPHj+cE+Hij8MU7ABLp9d+qlvSMAAAAAElFTkSuQmCC'); background-position: 50% 50%; 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; }
.drawing-board-control-navigation > button:last-child { margin-right: 0; }

.drawing-board-control-size[data-drawing-board-type="range"] .drawing-board-control-inner { width: 75px; }
.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: 30px; overflow: hidden; position: relative; }
.drawing-board-control-size-dropdown-current span { position: absolute; left: 50%; top: 50%; }

.drawing-board-control-size-dropdown { position: absolute; left: -6px; top: 33px; height: auto; list-style-type: none; margin: 0; padding: 0; z-index: 100; }
.drawing-board-control-size-dropdown li { display: block; padding: 4px; margin: 3px 0; 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,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAoBJREFUeNqMkr9PU1EUx7/vR1tQ3yu10hAmTawtBSYSy2YccFOcnDQm/gewOLnj5GYMg4sdXFxkMca4OBAwdUBe/ZkIGFp+9tHXvh/3/fTcAm01aLzJybnn3nM+95tzrnDl6Tb+sibuTmWUWj3C6/Juk+LySUmyvt0FCKKA02ryOCy6LBiu15ngMbZ5DDCNBqIw6gKM+n4nECUJru3glKry8CpjQaHVYmC2rVH82DIMMMdGGARdwJ+SPNdFS9chx+MXDNMp/NzagWNatk/nQU/hiYAoih6FYTBCBs9zUXMCbAhx2OYOv351lPOJ3EwH4LteL6Dcp/Rfu3FrstDyIizt+agpaYxNDU0M9gl4v7Ck+TYrCYLQqZHUyTtdQBiutPSGUflczSXHs5lVKwZdSOBMvwztxVvN0RtzsiyXBFHsAvL5PBSnCpXV2getILFiE2SjspYbuZzPiDSZ2vOXmlvX5yQqTmMfg9ZXqtls1wnT09OHEyAq0aFLg/gSXsSWq9wWk+p9PrCoYTwcijdLOfE7UsEufN9HGIYnT4EnTGIXe1KqtNNIvuNnGamxfi7SgQD/nIJCTbzOPQ/SQh1pud7T4M6W/8qFIw/5WAr5m7Ozsw9UVc069Fls2yJzSC5/lnc9RhaHZVnfSqUnEgXP2oBqtYqBgYG2+mKxmOVADnAcB4yxHgD1RzehKKns/LyV4gUHBweQy+UyRkdH6UKJ6fQDFxcXoWkaXJeRuTgUGCdLQJ9bx72lGZimGWs2m+083oN+2iiFQiGxvLy8RrDzudyltgrG3N8U2G8CrPz4sGYYRqJSqWR4H/jNWbJhUjAWi8XG8R/L87yPpGCVttVfAgwAVpZR+8tZC08AAAAASUVORK5CYII='); background-position: 50% 50%; background-repeat: no-repeat; }
.drawing-board-control-download-button:before { content: ""; display: block; width: 0; height: 100%; }