
#plan{
  background-color: #FFF;
  position:relative;
  padding: 15px 15px 0 15px;
  border-radius: 10px;
  margin: 20px auto;
  text-align:center;
}

#stage{
  width: 600px;
  text-align:center;
  padding: 20px;
  margin: 50px auto 0 auto;
  border-radius: 10px 10px 0 0;
  background-color: #EEE9FC;
  color: #312D3C;
}

.row{
  margin-bottom: 5px;
}


.seat{
  display:inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 16px; 
  vertical-align: middle;
}

.seat input{
  display: none !important; 
}

.seatlabel{
  display: block;
  width:100%;
  height: 100%; 
  background: url('/images/seat.svg?v=4') center/80% no-repeat;
  transition:.3s all;
}

.seatlabel.booked{
  background: url('/images/seat-booked.svg?v=5') center/70% no-repeat;
  
}
.seatlabel.blocked{
  background: url('/images/seat-blocked.svg') center/70% no-repeat;
}

.seatlabel.available{
  cursor:pointer;
}
.seatlabel.available:hover{
  background-size: 90% auto;   
} 

.seat.wheelchair .seatlabel.available{
  background-image: url('/images/seat-wheelchair.svg');
}

.seat input[type="checkbox"]:checked + .seatlabel.available {
  background-image: url('/images/seat-selected.svg?v=3') !important;
  opacity: 1;
  background-size: 95% auto;
}

.seat.wheelchair input[type="checkbox"]:checked + .seatlabel.available {
  background-image: url('/images/wheelchair-selected.svg') !important;
}


.seat.wheelchair{
  background-image:none;
}



.seat.AReserve{
  background-color: #EDDCDA;
}
.seat.Premium{
  background-color: #E3F3EB;
}


.key-item{
  display: inline-block;
  margin-right: 25px; 
}


