/*.hotspot-container {
    position: relative;
    min-height: 600px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #ddd;
}*/

/*.hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
}*/

/*.hotspot-dot {
    background: #ff4444;
    color: #fff;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}*/

/* sidebar table styles */
/*.table-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.table-box {
    padding: 8px 12px;
    width: 110px;
    text-align: center;
    border-radius: 6px;
    font-weight: bold;
}

    .table-box.placed {
        background: #ffd54f;
    }

    .table-box.booked {
        background: #ffc107;
    }

    .table-box.unplaced {
        background: #eee;
        color: #777;
    }

.cancel-box {
    background: #ff4444;
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 6px;
}

.place-box {
    background: #6c757d;
    color: white;
    border: none;
    padding: 6px 8px;
    border-radius: 6px;
}
.table-row {
    display: flex;
    align-items: center;
    margin: 5px;
}

.table-box {
    padding: 10px 20px;
    border: none;
    margin-right: 5px;
    border-radius: 5px;
    cursor: pointer;
}

    .table-box.Available {
        background: green;
        color: white;
    }

    .table-box.Booked {
        background: yellow;
        color: black;
    }

    .table-box.Cancelled {
        background: grey;
        color: white;
    }

.cancel-box {
    background: red;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
}
.hotspot {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

    .hotspot.available {
        background: green;
    }

    .hotspot.booked {
        background: orange;
    }

    .hotspot.cancelled {
        background: gray;
    }*/

.floorplan-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.floorplan-img {
    width: 100%;
    height: auto;
    display: block;
}

.hotspot-circle {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: dodgerblue;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transform: translate(-50%, -50%);
}



.btn-danger {
    cursor: not-allowed;
    opacity: 0.7;
}