.app {
    padding: 10px 50px;
    display: grid;
    grid-template-columns: 0.8fr 0.2fr;
    grid-template-rows: 100px 800px 100px;
    grid-gap: 10px;
    grid-template-areas: "header header" "theater options" "footer footer";
  }
  .app .header {
    background-color: #1da1f2;
    grid-area: header;
    padding: 20px;
    display: flex;
    align-items: center;
  }
  .app .header h1 {
    color: white;
    font-size: 2.5rem;
  }
  .app .theater {
  background-color: #fff; 
    grid-area: theater;
  }
  .app .options {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
    grid-area: options;
    padding: 20px;
    background-color: #fff;
  }
  .app .options .divider {
    border: 0.5px solid gray;
    margin-bottom: 15px;
  }
  .app .options .input,
  .app .options h2,
  .app .options p {
    margin-bottom: 15px;
  }
  .app .options h2 {
    font-size: 2rem;
  }
  .app .options p {
font-size: 18px;
  }
  .app .options h3.result {
    font-size: 18px;
  }
  .app .options .input {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .app .options button {
    padding: 5px 10px;
    border-radius: 2.5px;
    border: none;
  }
  .app .footer {
    background-color: #433a3f;
    grid-area: footer;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .app .footer h2,
  .app .footer p {
    color: white;
    margin-bottom: 15px;
  }
  
  .theater {
    padding: 25px 50px;
    display: grid;
    grid-template-columns: 20px repeat(15, 0.2fr);
    grid-template-rows: 25px repeat(10, 0.21fr);
    grid-gap: 5px;
  }
  .theater .screen {
    background-color: #3e3e3e;
    color: white;
    display: flex;
    justify-content: space-around;
    align-content: stretch;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    grid-column: 1/17;
  }
  .theater .seat {
    background-color: #fff;
  }
  .theater .taken {
    background-color: #1da1f2;
  }
  .theater .taken .respaldo,
  .theater .taken .brazoIzq,
  .theater .taken .brazoDer,
  .theater .taken .cojin,
  .theater .taken .base {
    background-color: white;
  }
  .theater .rowName {
    background-color: #3e3e3e;
    color: white;
    display: flex;
    justify-content: space-around;
    align-content: stretch;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
  }
  .theater .rowName.a {
    grid-row: 2;
  }
  .theater .rowName.b {
    grid-row: 3;
  }
  .theater .rowName.c {
    grid-row: 4;
  }
  .theater .rowName.d {
    grid-row: 5;
  }
  .theater .rowName.e {
    grid-row: 6;
  }
  .theater .rowName.f {
    grid-row: 7;
  }
  .theater .rowName.g {
    grid-row: 8;
  }
  .theater .rowName.h {
    grid-row: 9;
  }
  .theater .rowName.i {
    grid-row: 10;
  }
  .theater .rowName.j {
    grid-row: 11;
  }
  
  .seat {
    position: relative;
    width: 100%;
    height: 100%;
    order: 0;
    flex: 0 1 auto;
    align-self: center;
  }
  .seat .respaldo {
    background-color: #ccc;
    -webkit-clip-path: polygon(40% 70%, 40% 30%, 41% 28%, 59% 28%, 60% 30%, 60% 70%);
            clip-path: polygon(40% 70%, 40% 30%, 41% 28%, 59% 28%, 60% 30%, 60% 70%);
    height: 100%;
    width: 100%;
  }
  .seat .brazoIzq {
    position: absolute;
    top: 0;
    background-color: #ccc;
    -webkit-clip-path: polygon(35% 80%, 35% 60%, 38% 60%, 38% 80%);
            clip-path: polygon(35% 80%, 35% 60%, 38% 60%, 38% 80%);
    height: 100%;
    width: 100%;
  }
  .seat .brazoDer {
    position: absolute;
    top: 0;
    background-color: #ccc;
    -webkit-clip-path: polygon(62% 80%, 62% 60%, 65% 60%, 65% 80%);
            clip-path: polygon(62% 80%, 62% 60%, 65% 60%, 65% 80%);
    height: 100%;
    width: 100%;
  }
  .seat .cojin {
    position: absolute;
    top: 0;
    background-color: #ccc;
    -webkit-clip-path: polygon(39% 80%, 39% 71%, 61% 71%, 61% 80%);
            clip-path: polygon(39% 80%, 39% 71%, 61% 71%, 61% 80%);
    height: 100%;
    width: 100%;
  }
  .seat .base {
    position: absolute;
    top: 0;
    background-color: #ccc;
    -webkit-clip-path: polygon(49.5% 81%, 49.5% 88%, 45% 88%, 45% 90%, 55% 90%, 55% 88%, 50.5% 88%, 50.4% 81%);
            clip-path: polygon(49.5% 81%, 49.5% 88%, 45% 88%, 45% 90%, 55% 90%, 55% 88%, 50.5% 88%, 50.4% 81%);
    height: 100%;
    width: 100%;
  }
  .setaReservation
  {
    background-image: url(../images/a);
  }
  .dropdown-container {
    position: relative;
    display: inline-block;
  }

  /* Style for the dropdown */
  .number_seats {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="16"><path d="M15 17l-6-6 1.4-1.4L15 14.2l5.6-5.6L21 11l-6 6z" fill="%23333"/></svg>') no-repeat right 10px center/12px 12px;
    background-color: #fff;
    cursor: pointer;
    width: 130px;
    padding-right: 40px;
  }
  
  /* Style for the label */
  .labelclass {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
  }

  /* Style for the number */
  .number-label {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 10px;
    background-color: #f0f0f0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  
  /* Style for the result */
  .result {
    margin-top: 20px;
  }
  .seatReservation
  {
/*     background-image: url(../images/bg55.webp) */
  }
  .custom-alert {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 30px; /* Increase padding */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .custom-alert .alert-message {
    margin: 0;
    font-size: 15px; /* Increase font size */
  } 
  .custom-alert.show {
    display: block;
  }
  .labelClass
  {
    font-size: 17px;
  }
  

.card-Form-SeatReservation {
    overflow: hidden;
  }
  
  .card-header {
    color: #333;
    text-align: left;
    padding:  5px 15px;

    border-bottom: 1px solid #ccc;
  }
  
  .card-header h2 {
    margin: 0;
    font-size: 1.2rem;
  }
  
.card-Form-SeatReservation .card-body {
    padding: 20px;
    padding-bottom: 0;
  }
  
 .card-Form-SeatReservation  form {
    display: flex;
    flex-direction: column;
  }
  
 .card-Form-SeatReservation  label {
    margin-bottom: 8px;
  }
  
 .card-Form-SeatReservation  input {
    padding: 8px;
    margin-bottom: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
 .card-Form-SeatReservation  .card-footer {
    text-align: left;
    padding: 15px;
  }
  

  
  @media (max-width: 600px) {
    .card-Form-SeatReservation {
      width: 90%;
    }
  }