body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

#canvas {
	width: 100vw;
	height: calc(100vh - 10rem);
	position: relative;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-color: black;
}

.draggable {
    width: 50px;
    cursor: move;
}

#element-selector {
    margin-top: 10px;
}

.draggable {
    resize: both; /* This will allow resizing from both right and bottom edge. */
    overflow: auto;
}

.draggable {
    position: relative;
    overflow: visible;
}

.draggable:after, 
.draggable:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: rgba(0,0,0,0.4);
    border-radius: 50%;
    z-index: 10;
}

.draggable:after {
    bottom: -8px;
    right: -8px;
    cursor: se-resize;
}

.draggable:before {
    top: -8px;
    left: -8px;
    cursor: nw-resize;
}

.boundingBox {
    border: 2px dashed #333;
}