/* Center the date pickers and button */
#startDate, #endDate, #loadButton {
margin-top: 30px;
margin-right: 10px;
    display: inline-block;

  }
  /* Container for date pickers and button */
#datePickerContainer {
    text-align: center;
  }

  /* New summary styles */
.summary-box {
    border: 1.5px solid #F3E9FF;
    border-radius: 0.6875rem;
    margin: 50px auto; /* Center the box */
    max-width: 40%; /* Set width */}
    /* Mobile rule */
@media (max-width: 600px) {
    .summary-box {
        max-width: 90%; /* Set width for mobile */
    }
  }
  
  .summary-box h1 {
    background-color: #F3E9FF;
    color: #262626;
    text-align: center;
    padding: 1rem;
    margin: 0;
    font-size: 1.5rem !important;
  }
  
  .summary-header {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 0.03125rem solid #BEBEBE;
    font-size: 1.1rem;
    font-weight: 900;
  }
  
  .summary-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    border-top: 0.03125rem solid #BEBEBE;
    font-size: 1rem;
    font-weight: 500;
  }
  

/* Mobile rule */
@media (max-width: 600px) {
  .summary-box {
      width: 90% !important;
      max-width: 90% !important;
  }
}
#summaryContainer {
  width: 100%;
}

/* Mobile Styles */
@media only screen and (max-width: 768px) {
  * {
    box-sizing: border-box;
  }
  html, body {
    margin: 0;
    padding: 0;
  }
  .summary-container {
    margin: auto;

  }



}