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

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

.drawing-board-cursor {
position:absolute;
top:0;
left:0;
pointer-events:none;
border-radius:50%;
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;
background-color:#ecf0f1;
height:28px;
padding:2px 4px;
border: 0;
border-bottom: 2px solid #dadedf; 
box-shadow: inset 0 -2px #dadedf;
}

.drawing-board-control > button {
cursor:pointer;
min-width:28px;
line-height:14px;
vertical-align:middle;
margin:0;
}

.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 {
text-align:center;
font-size:0;
display:table;
border-spacing:9.33333px 0;
position:relative;
min-height:28px;
margin:0 auto;
}

.drawing-board-controls[data-align="left"] {
left:-9.33333px;
margin:0;
}

.drawing-board-controls[data-align="right"] {
right:-9.33333px;
margin:0 0 0 auto;
}

.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;
border:0;
margin:0;
padding: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-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;
}

.drawing-board-control-colors-rainbows {
display:inline-block;
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-pencil-button {
overflow:hidden;
text-indent:-9999px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAe9JREFUeNpiZAACVlFRBhYREQZcQPnbNwa3N28YlL5+ZfgLFfvPwGD9m4FhIgsDHuAO0gTUDNKIBvyBmqt/MTDMY8Gl0f31azD7L6oUIxCnAzWmAPHBfwwM01AMUAV6JfPQIVwOYgVqqPnFyOjz6///O38YGKpAgmAD1OXlGdTk5PD5hgeouZudj8/uy9evP/78/dsFFPsJNiAoKIiBABAHap4oLi9v8fTNm48//v7NBwbgWZgkE7rqt8DY+A8JZRBW+cfIuEDT0NDlzadP3z98/doPFDuCrB7TAGFhBqCNIGwM9OcKUzs7+xdv3355+f79VqDYAiTDwZgJh7ONgYpnOvn4GL949erT7UePdgL5JVCD4fgBLBBxaX74+PG789evnwby0/8jKXgExIeB+CG6Af///1e9Ki9vFSAkZPzoyZPPJy9evA9MB77/sWiEARZkzV+/fvXYtGnTpG3btj28EBT0BqjZ5D8OjXCwPksUhA1Wpggf/PHjx/9169Y9EBERaUlgZmaIAcrLE4rk5sIqBqDmlefnRPzfWGX5EaSZm5ubgRloADGA5QZ3RgK7gESY4PMNn9ZtObPpzZvfU4DiYkiB/RcHG+S7fyxAMH/lFU2GOZd2bLx18/cEUMoD4j9I+DcS/RtJHGTYf4AAAwAxaOMYHjxKFwAAAABJRU5ErkJggg==);
background-position:50% 50%;
background-repeat:no-repeat;
background-color: #3498db !important;
border: 0 !important;
border-bottom: 2px solid #2a8bcc !important;
box-shadow: inset 0 -2px #2a8bcc !important;
}

.drawing-board-control-drawingmode-eraser-button {
overflow:hidden;
text-indent:-9999px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAkpJREFUeNp0kk+IElEcx39vFBc9+OfQRTAwzFt4CaYOKStj6MoeculStzoIQSB4kCVckmDx4iGCXWYJIqjoVOzO1l4qT1F7WfBWHvxzDPyTB3XUmXn93suRybUffHmP997n9/cRsFgwGARJkiAcDsPlwgEIeEZQAhCRAkgAlOD6SQP4rgMFDWVnYCAQgFgsBqFQCBwOByzZNQOotPHx1RNCCCipu6bfb+zSnslkeOQVILPrBkAirbws9btdTEWAzZPXpfepOzaeGMBXwe/3w3+MwTc3Dl+UeghTiskbBvR6Pbh18mZHB0jjmxvCKhIfR37s3r+Sevf8ca/T4TBF2HTSODuDxP7uNjrZFFbBk8lEzOVyspa4ykGYw2zfbTb/7ilvok1YhlVVFfP5vDydTkHXdXDdlhZOOnPY4/HA0YPtp3h6LFjh8XgsFgoFGTPgsKm1zDr8ajTQh8Fh5eGjZzjGI8yjKlgjF4tFGdd/YKYmRja24hw+zu3sYe2HiH3hYzQjl8tleTQanWtou93G6Qngdrth6+1+9h6hTULJZ/PeziJXKhV5OByeg1ut1gJOp9NZTdNOcQ419ot+ggp1qoLdBFmqVmNpm3A8Huewy+Wq1RH8QH9zmBlJJpMRdCIqiiIPBgN+2MCGsW/r8/kgGo1m0fmpzWarseayHlmNeL1eFiWC0cRqtSr3+/3FpSiKHMZtjU1glbFyfKgLTqfzEka9OJvNeDnzz1JnCaFmqOl8ZdJY1SiDOXCiXKg1NtG5DIt0y6ov3dE/AgwAENFWYYLj4mYAAAAASUVORK5CYII=);
background-position:50% 50%;
background-repeat:no-repeat;
background-color: #2ecc71 !important;
border: 0 !important;
border-bottom: 2px solid #28be68 !important;  
box-shadow: inset 0 -2px #28be68 !important;
}

.drawing-board-control-drawingmode-filler-button {
overflow:hidden;
text-indent:-9999px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAnNJREFUeNp0k0trE1EUx89MJpNJooYYXBgDNtCKdRPwlbqoCKUtaNVNA0Uo7UbMxoVPEARTXEi+QWfnwn6DEAlEkrSLttTGRiULEQlJ8yChmbzI++E50yTUJA78uMy953/u/557LmOz2WDEZ2m1WrckSRJSqdR2tVrdHQyYebwHtVoNuFHqTqczhQnWKaBYLDoKhcIuzgHDMKBSqeD20qd+LNdsNocSoFhRr9ctpVLJigl4xIIJQizLAmG4cAPa7bYcy9Iug5TL5UYikbD6/X7Rbre/IUcYe3WUW5ZsnQQzW9LpNOPz+UQc5aBM5mgdh7vI9FCCAesW2tnr9YqZTAby+bw8f3AQRP6853n+Ph5hemSCntjj8YjZbFYWx2IxeS2RSEMwuA87O79eqdXquVolK+GxnP0EPbHb7RZJSGABIR6PA11zJHKIR2MhHA5DIPDj7eH3j95KpfK60Wg8Yntil8slkqgnpioLghacTidoNDpEC3q9HnheCc3s1jZeLcW943pirPw/4lKpBkqlDubnl/riycnLsLy88EKj0fhzuRyZv8RFo1E6wpBYkiqy7Z54YmIcVlYeyOKC4mYwJ0nHRaQuM5vNT6hB/iceG7sIq6sPnwmC4MerDkby40AOCCoiddie1Wp92W7zQ2KTyQSLizNP8T0EsPLBbxEDnCj0GkM2qIEwyZRCobizsfH5A1ZXFhuN52F29vpz3HkL574mk8lj24Y5wsHkvjjoX0BOIWc5jruHzbK2ufmzEwpFO3jnDhQv4JoROYdoERVyGjEgZ8iBDlF3FzXo4go6utZ9lftY4N/dXisjR0i1G0ublv8KMAA0ZoUlicxrhwAAAABJRU5ErkJggg==);
background-position:50% 50%;
background-repeat:no-repeat;
background-color: #8e44ad !important;
border-bottom: 2px solid #80399d !important;
border: 0 !important;
box-shadow: inset 0 -2px #80399d !important;
}

.drawing-board-control-navigation > button {
font-family:Helvetica, Arial, sans-serif;
font-size:14px;
font-weight:700;
margin-right:2px;
}

.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;
border:0;
margin:0;
padding: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:40px;
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;
z-index:100;
margin:0;
padding:0;
}

.drawing-board-control-size-dropdown li {
display:block;
min-height:16px;
margin:3px 0;
padding:4px;
}

.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/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAoVJREFUeNp8U01oE0EYffOzmzTdbWMabUPBQy+CBy0KiodaEbHooXhRoRfPCoKo+HuxhwhSvHgQxIvkoKGCF0sb8CbxKCJFRC0VoVBtGkOS1uZnd9ZvZpOSFnTgY2e+mffmfW+/YWcf5EqNph/3AgA6aDB0LDoHAwTjsC1RnL4xlpx4+AayTuDnd09jQ4UQSWFR8G3YNp2kjfPp2b52XnoE7KZJ9/s9dIOFFRzAFDKGhLEOAmLQZ9OH9Fe1BYFrZrNco1hX+OXtg0toNwIk1DwGqjeRCObRQ2vH3qwkvF0Ha8kt+vvx0zqIXM91uLS2addePEqbXYhWnsLb+xueHwIjLWm5BiOCIKzu2eA0LMo7NI8SOPP2E/ILL6l2C75qAvkZqsPDRQLbtkB8ci6ISVGUbXscHsrRJkWphPyXb3h37QzqfoCRFNtiaH7ZR8wSGHuc69s0OyLCIHKjQA8bTRzLLKBYKiP76rUJPR/NLEKSGqUC7UPIrkFagdAKhHZKokD/tt8R8JsKh4+MmHN6rnOFmm+gsq2gsnoZFhkmOYMvm+D8FMo1hV0xidyPOkYHwqO5Jc/kykSu5cugpaC0koclXEOwITfA2Tgq5F2C5Dz56uHRZ4/cCkgdoxxHmZQYBe1mWS0UIMUfSnAyqE5HFdYaiv4/x8SQxLnhnaZjsh8KePFdYb0RXi15y8apC0tbnJ78OIcameR2WTixO4Lbd+7h0pWrOD5oY2bZo73QPWkLVh1Pz7q+bseAmfaNUhkRS7eyQMqJItFrI5V00B+PQgRNymnvBZXJDMkwhdj+8JK3svdFrPekT43mBZy46Y2SIhYo0ysW112IKsO/xxDFDvx/+H8FGAAyMNy52Md5twAAAABJRU5ErkJggg==);
background-position:50% 50%;
background-repeat:no-repeat;
}

.drawing-board-control-save-button{
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 40px;
  padding: 0;
  font-size: 18px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #8e44ad;
  border: 0;
  border-bottom: 2px solid #80399d;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #80399d;
  box-shadow: inset 0 -2px #80399d;
}

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

.drawing-board-control-drawingmode-pencil-button:before,.drawing-board-control-drawingmode-eraser-button:before,.drawing-board-control-drawingmode-filler-button:before,.drawing-board-control-download-button:before {
content:"";
display:block;
width:0;
height:100%;

}
.drawing-board-control-navigation-forward {
overflow:hidden;
text-indent:-9999px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QkcDxoQ022ChQAAAMpJREFUOMut0z+OgVEUh+H3SIw/BVHodCRqiR1obUClUVgBvS1IlHagswaNXiJRKDQyxSCZZIbip/kiHI0TTnNzi/e5xc2BN8fuL5LqQB/4A1LA2symIVHSSo8zjAJpSQeHtKJIVc9TiSJtB3xLsigycsgi/E2Sjg7pROKui7eRuOHii6TSq3FR0r8DmpHXNy7uReK5iycv7YKkMtACxsAZyAI7YABkgFOyIwdgb2Y/N0BSHugCNaAI5IBCYn8l5xH4BfbA0sxmfGKudFT6/hx9F+EAAAAASUVORK5CYII=);
background-position:50% 50%;
background-repeat:no-repeat;
background-color: #d35400 !important;
border: 0 !important;
border-bottom: 2px solid #c54e00 !important;
cursor: pointer !important;
box-shadow: inset 0 -2px #c54e00 !important;
color: white !important;
}

.drawing-board-control-navigation-reset {
overflow:hidden;
text-indent:-9999px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QkcDwI6is3TCgAAAL9JREFUWMPtlTEOgzAQBK0U+UAU/oKExFdAwPsBp4tIJkWucAEYo7NS5KY9way1cHbOMAwjEeC2M7vnljfABFQrswqYgSGnfOGLD0OI3MvsBfTa8lZeHOJFHMoJQnRqnQMj6/gVeTgrtEKU0u9RHkCtXcPREPryhBDJ8ktihmvkmbdz7pnr9LWcMMYMlL+S64cAisivtjUb99Z2aojuxCJqtWvogxB7q3gBmlwf4iD9bl1GUzb5kStXrXPDMP6KD2HyVpOoYfVdAAAAAElFTkSuQmCC);
background-position:50% 50%;
background-repeat:no-repeat;
background-color: #c0392b !important;
border: 0 !important;
border-bottom: 2px solid #b53224 !important;
color: white !important;
box-shadow: inset 0 -2px #b53224 !important;
}

.drawing-board-control-navigation-back {
overflow:hidden;
text-indent:-9999px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QkcDxwiTeB0gwAAANFJREFUOMutkzFKQ0EURc8rIhqUkEJs0gmxFrKDtNmAVUDsXIC9pQsQN5EuXfp0toKQwt4iSRGJCh6bj+AT8Y/JbaaZc7jMewMbJv66oJ4DJ8AHsAvcRcRjLbt65fc81K6m9hO8UBt14Y4/c1wXDvU5wYOS6tMEX5fAZwleFs9VfUqSYamgrb4nyWmppJcEr2qrVHKRJLP/vMdtkox//QvqEXAItKqd3wfWwA3QAV6AHeASmETE8kugNoEh0K0ke8ABIPBWnQtgBcyB+4gYsY18Ag/H+v5MM0gqAAAAAElFTkSuQmCC);
background-position:50% 50%;
background-repeat:no-repeat;
background-color: #e67e22 !important;
border: 0 !important;
border-bottom: 2px solid #da751c !important;
cursor: pointer !important;
box-shadow: inset 0 -2px #da751c !important;
color: white !important;
}