.seat {
    width: 1.2em;
    height: 1.2em;
    border: .5px solid rgba(255, 255, 255, 0.603);
    border-radius: 5px;
    cursor: pointer;
}



.seat:hover {
    background-color: aqua;
}

.reserved {
    background-color: rgba(211, 208, 208, 0.181);
    pointer-events: none;
    border: unset;
}

.selected {
    background-color: aqua;
}


.theatre {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.seat-row {
    display: flex;
    gap: 10px;
}



.aisle {
    width: 30px;
}

.seat-gap {
    width: 30px;
    height: 20px;
    margin: 0;
    visibility: hidden;
}

.selected-by-me {
  background-color: aqua !important; /* your color */
  border: unset;
}

.selected-by-other {
  background-color: #bec0c26d !important; /* another color */
}



@media screen and (min-width: 768px) {

    .seat {
        width: 2em;
        height: 2em;
    }

    .aisle {
        width: 40px;
    }

    .seat-gap {
        width: 30px;
        height: 30px;
    }


    .seat-row {
        gap: 15px;
    }

    .theatre {
        gap: 15px;
    }

}