$seatMapPrefixCls: #{$prefixCls}-seatMap;

.#{$seatMapPrefixCls} {
  position: relative;

  .seatArea {
    // margin: p2w(10);
    padding: p2w(10);
    background-color: #fff;
  
    display: flex;
    justify-content: space-between;
  }
  
  .rotated {
    flex-flow: column;
  }
  
  .line {
    display: flex;
    flex-wrap: nowrap;
  }
  
  .lineItem {
    text-align: center;
    margin: p2w(10);
    width: p2w(30);
    height: p2w(30);
  }
  
  .seat {
    border: p2w(1) solid #000;
    color: #fff;
  }
  .corridor {
    text-align: center;
    border-color: #fff;
    color: #000;
  }
  
  .invalid {
    visibility: hidden;
  }
  .available {
    background-color: #fff;
  }
  .occupied {
    background-color: #ddd;
  }
  .booked {
    background-color: blue;
  }
  .activedSeat {
    background-color: orange;
  }
  .activedLineMark{
    color: orange;
  }
}