.ptz-controls {
    position: fixed;
    top: 80px;
    right: 10px;
    width: 300px; /* Aproximadamente 8cm */
    height: 300px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border: 1px solid #000;
    z-index: 1000;
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    align-items: center;
}

.ptz-controls button {
    width: 50px;
    height: 50px;
    background-color: #ddd;
    border: 1px solid #000;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

/* Posicionamento dos botões de controle */
.ptz-controls .up {
    grid-row: 2;
    grid-column: 2;
    background-image: url("../../static/img/cima.png");

}

.ptz-controls .left {
    grid-row: 3;
    grid-column: 1;
    background-image: url("../../static/img/esquerda.png");
}

.ptz-controls .center-dot {
    grid-row: 3;
    grid-column: 2;
    width: 30px;
    height: 30px;
    background-color: #000;
    border-radius: 50%;
}

.ptz-controls .right {
    grid-row: 3;
    grid-column: 3;
    background-image: url("../../static/img/direita.png");
}

.ptz-controls .down {
    grid-row: 4;
    grid-column: 2;
    background-image: url("../../static/img/baixo.png");
}

/* Zoom e captura */
.ptz-controls .zoom-in {
    grid-row: 3;
    grid-column: 4;
    background-image: url("../../static/img/zoom+.png");
}

.ptz-controls .zoom-out {
    grid-row: 4;
    grid-column: 4;
    background-image: url("../../static/img/zoom-.png");
}

.ptz-controls .capture {
    grid-row: 2;
    grid-column: 4;
    background-image: url("../../static/img/camera.png");
}