.camera-container {
    position: relative;
    display: inline-block;
}

.bounding-box {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 40%;
    border: 3px solid red;
    border-radius: 8px;
    cursor: move;
}

.resize-handle {
    width: 12px;
    height: 12px;
    background: red;
    position: absolute;
    cursor: pointer;
}

    .resize-handle.top-left {
        top: -6px;
        left: -6px;
        cursor: nwse-resize;
    }

    .resize-handle.top-right {
        top: -6px;
        right: -6px;
        cursor: nesw-resize;
    }

    .resize-handle.bottom-left {
        bottom: -6px;
        left: -6px;
        cursor: nesw-resize;
    }

    .resize-handle.bottom-right {
        bottom: -6px;
        right: -6px;
        cursor: nwse-resize;
    }

.result {
    margin-top: 15px;
    max-width: 300px;
    border: 2px solid #444;
    border-radius: 8px;
}

video, canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

#overlay {
    touch-action: none; /* allow pinch/drag */
}

.corner {
    width: 20px;
    height: 20px;
    background: lime;
    border-radius: 50%;
    position: absolute;
    margin: -10px 0 0 -10px;
    touch-action: none;
}

.pictureButton {
    width: 50px;
    height: 50px !important;
    border-radius: 50%;
    border: 1px solid #ddd;
    box-shadow: 0 0 5px 0 #888;
    position: relative;
    display: grid;
    place-items: center;
}

.pictureButton:hover {
    cursor: pointer;
    border: 1px solid var(--holly-red);
}

.pictureButton:active {
    box-shadow: 0 0 10px 0px #888;
}

.pictureButton:active::before {
    border-color: var(--holly-red);
}

.pictureButton::before {
    content: "";
    width: 80%;
    height: 80%;
    border: 20px solid var(--evergreen-trns);
    border-radius: 50%;
    position: absolute;
}