.seat-map-container {
    position: relative;
    min-height: 300px;
    width: 100%;
    background-color: #FFF;
}

.seat-map-container .options-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background-color: slategray;
    padding: 5px;
}

.seat-map-container .options-bar.bg-white {
    background-color: #FFF;
}

.seat-map-container .options-bar .legend {
    border: 1px solid #FFF;
    border-radius: 3px;
    background-color: #FFF;
    padding: 10px;
}

.seat-map-container .legend-h {
    border-radius: 3px;
    background-color: #EFEFEF;
    padding: 5px 10px;
}

.seat-map-container .legend-h .legend-item, .seat-map-container .legend-h b{
    margin-right: 15px;
}

.seat-map-container .legend-h .color-seat {
    color: #0d6aad;
}
.seat-map-container .legend-h .color-seat-selected {
    color: #009688;
}
.seat-map-container .legend-h .color-seat-taken {
    color: #b71c1c;
}

.legend table {
    border-collapse: collapse;
    border-spacing: 0;
}
.legend table td {
    border-top: 1px solid #f4f4f4;
    padding: 8px;
    vertical-align: middle;
    line-height: 1.42857143;
}
.legend table td.info-title {
    background-color: #EFEFEF;
    color: #000;
    font-weight: bold;
}

.legend table td.color {
    height: 40px;
    max-height: 40px;
    width: 40px;
    max-width: 40px;
}

.legend table.edit-mode tr {
    cursor: pointer;
}

.legend table td.color.seat {
    background-color: #0d6aad;
}

.legend table td.color.seat-selected {
    background-color: #009688;
}
.legend table td.color.seat-taken {
    background-color: #b71c1c;
}

.legend table td.color.object {
    background-color: #5e5e5e;
}
.legend table td.color.free-space {
    background-color: #D5D5D5;
}
.legend table td.color.text {
    background-color: #EFEFEF;
    text-align: center;
}

.seat-map-container.with-options-bar .seat-map {
    width: calc(100% - 220px);
    margin-left: 220px;
}

.seat-map-container .seat-map {
    width: 100%;
    overflow-x: auto;
}

.seat-map table {

}

.seat-map table.generator td {
    border: 4px solid #FFF;
    background-color: #D5D5D5;
    cursor: pointer;
}
.seat-map table.generator tr.tools td {
    background-color: #EFEFEF;
    cursor: default;
    padding: 5px;
    text-align: center;
    height: 50px;
    max-height: 50px;
}

.seat-map table.generator td.tools {
    background-color: #EFEFEF;
    width: auto;
    max-width: none;
    cursor: default;
    padding: 5px;
}
.seat-map table.generator td.tools .input-group {
    width: 120px;
}

.seat-map table td.info {
    background-color: #EFEFEF;
    width: auto;
    max-width: none;
    cursor: default;
    padding: 5px 10px;
    text-align: right;
    /*border: 4px solid #FFF;*/
    border: 0;
}

.seat-map table > tbody > tr > td {
    height: 50px;
    max-height: 50px;
    width: 50px;
    max-width: 50px;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    overflow: visible;
}

.seat-map table > tbody > tr {
    border-bottom: 1px solid #FFF;
}

.seat-map.noclick table > tbody > tr > td.seat {
    cursor: default;
}
.seat-map.noclick table > tbody > tr > td.taken {
    cursor: default;
}

.seat-map table > tbody > tr > td.seat {
    background-color: #0d6aad;
    /*border: 4px solid #FFF;*/
    border: 0 solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
    color: #FFF;
    cursor: pointer;
}

.seat-map table > tbody > tr > td.seat.selected {
    background-color: #009688;
    /*border: 4px solid #FFF;*/
    color: #FFF;
}
.seat-map table > tbody > tr > td.seat.taken {
    background-color: #b71c1c;
    /*border: 4px solid #FFF;*/
    color: #FFF;
    cursor: not-allowed;
}
.seat-map table > tbody > tr > td.seat.taken.selected {
    background-color: #009688;
    /*border: 4px solid #FFF;*/
    color: #FFF;
    cursor: not-allowed;
}

.seat-map table > tbody > tr > td.object {
    background-color: #5e5e5e;
    /*border: 4px solid #FFF;*/
    border: 0 solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
    color: #FFF;
}
.seat-map table > tbody > tr > td.object span {
    color: #FFF;
    padding: 5px;
    background-color: #5e5e5e;
}


#event-seatmap {
    position: relative;
}

#event-seatmap .select-timelock-overlay {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

#event-seatmap .select-timelock-overlay span {
    color: #FFF;
    padding: 10px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
    display: block;
    background-color: rgba(183,28,28,0.8);
}