/* 
	cnbilgin 
	https://github.com/cnbilgin/jquery-drawpad
	v 0.1
*/

.drawpad * {
	box-sizing: border-box;
}
.drawpad {
	background-color: #fff;
	position: relative;
}
.drawpad.drawpad-dashed {
	border: 2px dashed black;
	background-color: rgba(255, 255, 255, 0.6);
}

.drawpad > canvas {
	width: 100%;
	height: 100%;
}
.drawpad .drawpad-toolbox {
	width: 25px;
	right: 10px;
	top: 10px;
	position: absolute;
	z-index: 10;
	display: flex;
	height: calc(100% - 20px);
	flex-direction: column;
	opacity: 0.3;
	pointer-events: none;
}
.drawpad .drawpad-toolbox:hover {
	opacity: 1;
}

.drawpad .drawpad-colors {
	margin-bottom: 15px;
	pointer-events: all;
}
.drawpad .drawpad-colorbox {
	width: 25px;
	height: 25px;
	margin-bottom: 10px;
	border: 2px solid transparent;
	cursor: pointer;
}

.drawpad.drawpad-drawing .drawpad-colors {
	pointer-events: none;
}

.drawpad .drawpad-colorbox:last-child {
	margin-bottom: 0;
}

.drawpad .drawpad-colorbox:hover {
	filter: brightness(1.3);
}
.drawpad .drawpad-colorbox:active {
	filter: brightness(0.8);
}
.drawpad .drawpad-eraser {
	background-color: #fff;
	border-style: dashed;
	border-color: gray;
}
.drawpad .drawpad-colorbox.drawpad-colorbox-active {
	border-color: #000;
}