/* General Styles */
        
    * {
      margin: 0;  
      padding: 0;
      box-sizing: border-box;
      font-family: Free, PadelFont, Helvetica, Arial, sans-serif;
      ffont-weight:bold;
      text-transform:uppercase;
    }
    
    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      background: #0089cb; /*#6c9dda*/
      color: #fff;
      background: linear-gradient(to bottom, #0089cb, #00adeb);
    }

    header {
        background: linear-gradient(to bottom, #00adeb, #0089cb);
        color: white;
        text-align: center;
        margin:0; border:0;
        
    }

    header h1 {
      font-size: 2.2rem;
      font-family: PadelFont !important;
    }
    header h3 {
      font-size: 1.2rem;
      font-family: PadelFont !important;
    }
    
@keyframes spinSlowDown {
    0% { transform: rotate(0deg); }
    30% { transform: rotate(180deg); } /* Rotazione veloce */
    100% { transform: rotate(360deg); } /* Rallenta fino a fermarsi */
}

@keyframes floatUpDown {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}

@keyframes expandFromCenter {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes neon9x1 {
  0% {
    background-color: darkblue;
  }
  50% {
    background-color: lightgreen;
  }
  100% {
    background-color: darkblue;
  }
}

@keyframes neon9x1b {
  0% {
    color: darkblue;
  }
  50% {
    color: lightgreen;
  }
  100% {
    color: darkblue;
  }
}

@keyframes neonShow {
  0% {
    color: darkblue;
  }
  50% {
    color: red;
  }
  100% {
    color: darkblue;
  }
}

@keyframes promo9x1 {
  0% {
    border: 4px solid cyan;
  }
  33% {
    border: 4px solid blue;
  }
  66% {
    border: 4px solid darkblue;
  }
  100% {
    border: 4px solid cyan;
  }
}

@keyframes promo9x1b {
  0% {
    border: 4px dashed darkblue;
  }
  20% {
    border: 4px dotted blue;
  }
  40% {
    border: 4px dashed darkblue;
  }
  60% {
    border: 4px dotted blue;
  }
  80% {
    border: 4px dashed darkblue;
  }
  100% {
    border: 4px dotted blue;
  }
}


    #whTable {     color: #0e0651; font-size: 1.2rem; }
    #whTable a {     color: #1e0fab; font-size: 1.8rem; }
    
    #logo { width:80%;  margin-top:25px;  }

    .container {
      flex: 1;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: linear-gradient(to bottom, #0089cb, #00adeb);
      margin:0; border:0;
      color: #0e0651; 
    }

    .choices {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      width: 100%;
      max-width: 1000px;
      animation: expandFromCenter 0.5s ease-out forwards;
    }
    .choices button {
      background: #0e0651;
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px 15px;
      margin: 15px 0;
      cursor: pointer;
      transition: background 0.3s ease;
      
    }

    .choices button:hover {
      background: #1e0fab;
    }

    .choice-card {
      background: white;
      border: 1px solid #ddd;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .choice-card:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    }

    .choice-card h2 {
      font-size: 2.5rem;
      margin: 15px 0;
      color: #0e0651;
      
    }

    .choice-card p {
      font-size: 1.8rem;
      color: #0e0651;
      
      width:100%;
      height:auto;
    }
    
    .choice-card button {
      
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 1.8rem;
      width:90%;

      background: #0e0651;
      color: white;
      cursor: pointer;
      transition: background 0.3s ease;
      
    }

    .tosDiv, .privDiv, .equipDiv {
        margin-top:2%;
        margin-left:2%;
        width:96%;
        height:98%;
        display:none;
        background-color:#fff;
        color:#000;
        border-radius:30px;
        padding-left:20px;
        padding-top:20px;
        padding-bottom:20px;
        z-index:5; position:fixed;
        overflow-y:scroll;
        animation: expandFromCenter 0.5s ease-out forwards;
    }
    
    #equiSpanDesc { width:100%; }
    
    #equiSpanDesc img {
        width:90%;
        max-width:300px;
        border-radius:30px;
    }
    #equiCalc, #equiCalc9 {
        width:90% !important;
        border-radius:15px;
        background-color:#f4f77b;
    }
    .promos {
        margin-top:2%;
        margin-left:2%;
        width:96%;
        height:98%;
        display:none;
        background-color:#fff;
        color:#000;
        border-radius:30px;
        padding-left:20px;
        padding-top:20px;
        padding-bottom:20px;
        z-index:5; position:fixed;
        overflow-y:scroll;
        animation: expandFromCenter 0.5s ease-out forwards;
    }
    
    

    .choice-card button:hover {
      background: #1e0fab;
    }
    
    
    .align-middle {
        display: inline-flex;
        align-items: center;
    }
    .whapp {
        vertical-align: middle; 
    }

    .booking-form {
      margin-top: 30px;
      padding: 0px;
      background: white;
      border: 1px solid #ddd;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      max-width: 1000px;
      width: 100%; 
      font-size: 1.6rem;
    }

    .booking-form h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #0e0651;
    }

    .booking-form form {
      display: flex;
      flex-direction: column;
    }

    .booking-form label {
      margin-bottom: 5px;
      ffont-weight: bold;
    }

    .booking-form input, .booking-form select, .booking-form button {
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 1.6rem;
    }

    .booking-form input[type="submit"] {
      background: #0e0651;
      color: white;
      cursor: pointer;
      transition: background 0.3s ease;

      width:90%;
    }
    .booking-form input[type="radio"] {
      color: black !important;
    }
    #bookCanc {
      background: #757575;
      color: white;
      cursor: pointer;
      transition: background 0.3s ease;

      width:90%;
    }
    
    #bookSend {
      background: #0e0651;
      color: white;
      cursor: pointer;
      transition: background 0.3s ease;

      width:90%;
    }
    
    #date {
      width:100%;
    }

    .booking-form button:hover {
      background: #0056b3;
    }

  .price-table {
    width: 95%;
    margin: 20px 0;
    border-collapse: collapse;
    text-align: center;
    font-size: 1.4rem;
    background: #f9f9f9;
    border: 1px solid #ddd;
  }

  .price-table thead {
    background: #6c9dda;
    color: white;
    ffont-weight: bold;
  }

  .price-table thead td {
    padding: 10px;
    font-size: 1.8rem;
  }

  .price-table tbody tr:nth-child(odd) {
    background: #f2f2f2;
  }

  .price-table tbody tr:nth-child(even) {
    background: white;
  }

  .price-table td {
    padding: 10px;
    border: 1px solid #ddd;
  }

  .price-table tr:hover {
    background: #007BFF;
    color: #000;
  }
    
    #compForm { display:none; width:100%; animation: expandFromCenter 0.5s ease-out forwards; }
    
    #compForm p { text-align:center; margin-bottom:15px;width:100%; }
    #compForm  h2 {
      font-size: 2.2rem;
      margin: 15px 0;
      color: #0e0651;
    
    }
    
    #compForm9 { display:none; width:100%; animation: expandFromCenter 0.5s ease-out forwards; }
    
    #compForm9 p { text-align:center; margin-bottom:15px;width:100%; }
    #compForm9  h2 {
      font-size: 2.2rem;
      margin: 15px 0;
      color: #0e0651;
    
    }
    
    #promo9 { width:95%; height:auto; padding-top:20px; padding-bottom:25px; margin-bottom:15px; background-color:#bbdfc1; 
    border:3px dashed darkblue; border-radius:15px; }
    
    #promo9h { width:95%; height:auto; padding-top:20px; padding-bottom:25px; margin-bottom:15px; background-color:#bbdfc1; 
    border:3px dashed darkblue; border-radius:15px; }
    
    #promo9b{ width:95%; height:auto; padding-top:20px; padding-bottom:25px; margin-bottom:15px; background-color:#bbdfc1; 
    border:3px dashed darkblue; border-radius:15px; display:none; }
    
    @media screen and (max-width: 496px) {
        .promo-table input[type="date"] {
            max-width:190px;
        } 
        
        
        #tdPromo { max-width:30px; width:30px; }
        
    }
    
    

  .promo-table {
    width: 98%;
    max-width: 98%;
    margin: 20px 0;
    border-collapse: collapse;
    text-align: center;
    font-size: 1.2rem;
    background: #f9f9f9;
    border: 1px solid #ddd;
    overflow:scroll;
  }

  .promo-table thead {
    background: #6c9dda;
    color: white;
  }

  .promo-table thead td {
    padding: 10px;
    font-size: 1.4rem;
  }

  .promo-table tbody tr:nth-child(odd) {
    background: #f2f2f2;
  }

  .promo-table tbody tr:nth-child(even) {
    background: white;
  }

  .promo-table td {
    padding: 10px;
    border: 1px solid #ddd;
  }

  .promo-table tr:hover {
    background: #007BFF;
    color: #000;
  }
    
    
    
    
    
    
    
    #icon { width:30%; margin-top:25px; margin-bottom:25px; }
    
    #footer { 
        text-align:center;
        margin-bottom:20px;
        margin-top:20px;
        color:#fff;
        font-size:2em; 
        font-family: PadelFont;
        font-weight:bold;
    }
    
    #timeTable {    width:98%;    }
    
    #timeTable td { width:20%; text-align:center; }
    
    
  #timeTable thead {
    background: #6c9dda;
    color: white;
    ffont-weight: bold;
  }

  #timeTable thead td {
    
    font-size: 1.8rem;
  }

  #timeTable tbody tr:nth-child(odd) {
    background: #f2f2f2;
  }

  #timeTable tbody tr:nth-child(even) {
    background: white;
  }
  
  #timeTableDiv { display:none; width:100%;height:auto; }
  
  #timeTableDiv p {  font-size: 1rem; width:100%;}
  
  #infoline {  font-size: 1.4rem !important; width:100%;}
  
  .notava { background-color: #ee664f; }
  .ava { background-color:#c4c4c4; }
  .yourBook  { background-color:#4fee57; }
  
  .notavabut { background-color: #ffc2bf; }
  .notavabutp { color: #ffc2bf; }
  
  .yourBook a { text-decoration:none; color:#3b28eb; }
  .pending  { background-color:#97f0fa; }
  .pendingbut  { background-color:#97f0fa; }
  
  .notavap { color: #ee664f;  }
  .avap { color:#c4c4c4;  }
  .yourBookp  { color:#4fee57;  }
  .pendingp  { color:#97f0fa; }
  
  h1, h2, h3, h4, h5, h6, h7, h8 { font-weight: normal; }
  
  #header h1, #header h3 { font-weight:bold; }
  
  #onlineUsers {
      z-index:100;
      right:15px; bottom:15px;
      height:50px; width:100px;
      border-radius:15px; background-color:darkblue; border:2px solid white;
      position:fixed;
      text-align:center;
      font-size: 25px;
      line-height:50px;
  }
    #firstForm, #firstForm9 { width:100%; height:auto;  }
    #bookReview, #bookReview9 { width:100%; height:auto; display:none;  }
    

    #rentSummary,#rentSummary9 {
        animation: expandFromCenter 0.5s ease-out forwards;
        text-align:center; padding-top:25px; padding-bottom:25px;  margin-bottom:25px; width:98%; height:auto; border-radius:20px; background-color:#bbdfc1; }
    #rentSummary p { width:100%; }
    #rentSummary9 p { width:100%; }
    
    .aLeft { width:25%; text-align:left !important; padding-left:2px; }
    .aRight { width:75%; text-align:right !important; padding-right:2px; }

    #pendingIco {
        animation: spinSlowDown 2.5s ease-out infinite;
    }
    #paymentIco {
        animation: floatUpDown 3s ease-in-out infinite;
    }
    
    .rentCheck {
        margin-top:2%;
        margin-left:2%;
        width:96%;
        height:98%;
        display:none;
        background-color:#fff;
        color:#000;
        border-radius:30px;
        z-index:5; position:fixed;
        overflow-y:scroll;
        text-align:center;
        padding-top:40px;
        background-image: linear-gradient(#0089cb, #fff);
    }
    #rentCheckContent { width:100%; padding-top:30px; height:auto; font-size:1.2em !important; text-align:center; }
    
    #qrCode {
        max-width:300px; border-radius:15px;
        animation: floatUpDown 3s ease-in-out infinite;
    }