#image_preview {
    position: relative; /* Add this since child are absolute! */
    background: #eee;
    cursor: crosshair;
}

#image_preview img {
    display: inline-block;
    vertical-align: top;
}

#image_preview_fe {
    position: relative; /* Add this since child are absolute! */
    background: #eee;
}

#image_preview_fe img {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    border: 1px solid #ccc;
}

.circle {
    position: absolute;
    background: rgba(0, 4, 255, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%); /* use translate instead of JS calculations */
    cursor: pointer;
    border: 1px solid  black;
}

.circle-available {
    position: absolute;
    background: rgba(216, 216, 216, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%); /* use translate instead of JS calculations */
    border: 1px solid black;
}

.circle-booked {
    position: absolute;
    background: rgba(255, 247, 0, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%); /* use translate instead of JS calculations */
    border: 1px solid black;
}

.circle-soldout {
    position: absolute;
    background: rgba(255, 0, 0, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%); /* use translate instead of JS calculations */
    border: 1px solid black;
}

.radius {
    position: absolute;
}