/*PEN TOOL*/
.pen-control .penActive {
    z-index: 1000;
    visibility: visible;
}

.penColourOption:hover {
    transition: 0.2s;
    -webkit-transform: scale(1.1);
}

button.pen-control-active {
    border: 1px solid #333;
}
/*add this class to elements you want to sit above the canvas and the pen tool to ignore
*/
.pen-ignore {
    pointer-events: auto;
    position: relative;
    z-index: 1001;
}

/*CANVAS*/
canvas {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
}

.canvas-pen,
.canvas-erase,
.canvas-drawing {
    position: absolute;
    top: 0;
    left: 0;
}

.canvas-pen {
    position: absolute;
    z-index: 998;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    cursor: url(images/eraser_cursor.png), auto;
}

.canvas-drawing {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    cursor: crosshair;
}

.no-select {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
}

/*MODAL*/

.modal-pen .modal-header h3 {
    margin: 0;
}

.modal-pen .modal-footer .btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}