.online-document-draw-button-area {
  background: #ffffff;
  position: fixed;
  text-align: left;
  padding: 10px;
  width: 110px;
  left: 0;
  bottom: 0;
  word-break: keep-all;
  z-index: 9999;  
}

.custom-button {
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
    7px 7px 20px 0px rgba(0,0,0,.1),
    4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}

.draw-button {
  color: #000000;
  border-radius: 2px;
  padding: 1px 5px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: #DDDDDD;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: solid 1px #000000;
  margin: 2px;
  box-sizing: border-box;
  height:21px;
  min-width:22px;
  vertical-align: middle;
}

.draw-button.on {
  background: #FFFFFF;
}

.draw-action-tool span.pen {
	background: no-repeat center/100% url('/online-documents/pen.png');
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-8px;
	margin-top:-8px;
	width:16px;
	height:16px;
}

.draw-action-tool span.neon-pen {
	background: no-repeat center/100% url('/online-documents/neonPen.png');
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-8px;
	margin-top:-8px;
	width:16px;
	height:16px;
}

.draw-action-tool span.eraser {
	background: no-repeat center/100% url('/online-documents/eraser.png');
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-8px;
	margin-top:-8px;
	width:16px;
	height:16px;
}

.draw-common-tool span.undo {
	background: no-repeat center/100% url('/online-documents/undo.png');
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-8px;
	margin-top:-8px;
	width:16px;
	height:16px;
}

.draw-common-tool span.redo {
	background: no-repeat center/100% url('/online-documents/redo.png');
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-8px;
	margin-top:-8px;
	width:16px;
	height:16px;
}

.draw-color-tool.black {
  background-color: #000000;
}

.draw-color-tool.red {
	background-color: #FF0000;
}

.draw-color-tool.green {
	background-color: #00FF00;
}

.draw-color-tool.blue {
	background-color: #0000FF;
	border: none;
}

.draw-color-tool.on {
  border: solid 2px white;
}

.draw-size-tool span {
	background-color: #000000;
	position:absolute;
	left:50%;
	top:50%;
}

.draw-size-tool span.size1 {
	width:2px;
	height:2px;
	margin-left:-1px;
	margin-top:-1px;
	border-radius: 1px;
}

.draw-size-tool span.size1 {
	width:2px;
	height:2px;
	margin-left:-1px;
	margin-top:-1px;
	border-radius: 1px;
}

.draw-size-tool span.size2 {
	width:4px;
	height:4px;
	margin-left:-2px;
	margin-top:-2px;
	border-radius: 2px;
}

.draw-size-tool span.size3 {
	width:6px;
	height:6px;
	margin-left:-3px;
	margin-top:-3px;
	border-radius: 3px;
}

.draw-size-tool span.size4 {
	width:8px;
	height:8px;
	margin-left:-4px;
	margin-top:-4px;
	border-radius: 4px;
}

.draw-size-tool span.size5 {
	width:10px;
	height:10px;
	margin-left:-5px;
	margin-top:-5px;
	border-radius: 5px;
}

.draw-size-tool span.size6 {
	width:12px;
	height:12px;
	margin-left:-6px;
	margin-top:-6px;
	border-radius: 6px;
}

.draw-size-tool span.size7 {
	width:14px;
	height:14px;
	margin-left:-7px;
	margin-top:-7px;
	border-radius: 7px;
}

.draw-size-tool span.size8 {
	width:16px;
	height:16px;
	margin-left:-8px;
	margin-top:-8px;
	border-radius: 8px;
}

.draw-splitter {
	display:inline-block;
	width:10px;
}

.draw-canvas-container {
  width: 100%;
  height: 100%;
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
}

.draw-view {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 998;
}

.draw-preview {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  touch-action: pinch-zoom;  
}

.custom-cursor1 {
	cursor: url(cursor1.svg) 20 20, auto;
}

.custom-cursor2 {
	cursor: url(cursor2.svg) 20 20, auto;
}

.custom-cursor3 {
	cursor: url(cursor3.svg) 20 20, auto;
}

.custom-cursor4 {
	cursor: url(cursor4.svg) 20 20, auto;
}

.custom-cursor5 {
	cursor: url(cursor5.svg) 20 20, auto;
}

.custom-cursor6 {
	cursor: url(cursor6.svg) 20 20, auto;
}

.custom-cursor7 {
	cursor: url(cursor7.svg) 20 20, auto;
}

.custom-cursor8 {
	cursor: url(cursor8.svg) 20 20, auto;
}

.custom-cursor10 {
	cursor: url(cursor10.svg) 20 20, auto;
}

.custom-cursor12 {
	cursor: url(cursor12.svg) 20 20, auto;
}

.custom-cursor14 {
	cursor: url(cursor14.svg) 20 20, auto;
}

.custom-cursor16 {
	cursor: url(cursor16.svg) 20 20, auto;
}

.not-draggable {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}

@media print {
	.online-document-button-area {
		display:none;
	}
	.online-document-draw-button-area {
		display:none;
	}	
}