/* style_c.css */
@media only screen and (max-width: 600px) {

  input[type="text"],
  input[type="number"],
  input[type="email"],
  select {
      width: 100%;
  }
  .form-container {
    width: 100%;
    margin: 0 auto;
    background-color: #f4f4f4;
    border-radius: 40px;
    border: 2px solid #ffffff;
  box-sizing: border-box;}


.form-container-report{
  width: 100%;
  padding-bottom:  20px;
  border-radius: 20px;
  border: 2px solid #ffffff;
  padding-top: 20px;

}
.maincontainer{
  width: 100%;
  margin-top: 160px;
  max-width: 600px; 

  padding-left: 20px;
  padding-right: 20PX;
  background-color: #f4f4f4;
  border: 2px solid #ffffff;
  align-items: center;
}
}


.horizontal-container {
    display: flex;
    flex-direction: row;
    align-items: center; 
    margin-bottom: 10px;
  }
  
  label {
    flex: 1;
    text-align: right;
    margin-right: 10px;
   /* font-size: 16pt;*/
   /* font-weight: 700;*/
  }
  

  select,
  input[type="number"],
  input[type="email"],
   input[type="text"] {
    flex: 2;
    border: 2px solid #ccc;
    padding: 20px;
    margin: 5px;
    border-radius: 20px;
  }
  .reportbutton{
    padding: 10px 40px; 
    background-color: #007BFF;
    color: #fff;
    border: none;
    cursor: pointer;
    display: block; 
    margin: 0 auto;
    border-radius: 20px;
    background-image: url('icons8-export-pdf-80.png'); 
    background-repeat: no-repeat;
    background-position: 10px center; 
    background-size: 20px 20px; 
}

  
  
.calcbutton {
    padding: 10px 40px; 
    background-color: #007BFF;
    color: #fff;
    border: none;
    cursor: pointer;
    display: block; 
    margin: 0 auto;
    border-radius: 20px;
    background-image: url('solar-panel1.png'); 
    background-repeat: no-repeat;
    background-position: 10px center; 
    background-size: 20px 20px; 
}

  .header {
    text-align: center;
    background-color: #007BFF;
    color: #fff;
    padding: 10px;
  }
  

  .form-container {
    width: 100%;
    padding-bottom:  20px;
    background-color: #f4f4f4;
    border-radius: 40px;
    border: 2px solid #ffffff;
  box-sizing: border-box;}
.form-container-report{

  width: 100%;
  padding-bottom:  20px;
  border-radius: 40px;
  border: 2px solid #ffffff;
  padding-top: 20px;
}
.maincontainer{
  width: 100%;
  max-width: 800px; 
  padding:10px;
  margin: 140px 20px 20px 20px;
  background-color: #f4f4f4;
  border: 2px solid #ffffff;
}


  .results {
    display: none;
    background-color: #f5f5f5;
    border: 2px solid #ccc;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    text-align: center;
}

.results label {
    font-weight: bold;
    margin-right: 10px;
}

.results label,
.results span {
    display: inline;
   }




.chart-container{
  display: block;
  padding-top: 20px;
  padding-bottom:  20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;


  }


 .chart-containerD {
  display: flex;
  flex-wrap: wrap;
  padding-bottom:  20px;
  margin-left: 20px;
  margin-right: 20PX;
  padding-top: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
}

  
  #chartContainer,
  #loadProfileChart,
  #monthlyEnergyChart,
  #chart,
  #my_dataviz,
  #calculatedDataChart,
  #daillyEnergyChart,
  #compareChart,
  #chart-container 
  #compareChart
  #doughnutChart{
    margin-top: 20px;
  }
  
  /* Additional styling for readonly input fields */
  input[readonly] {
    background-color: #f4f4f4;
    border: none;
    padding: 5px;
  }
  .chart-container {
    width: 100%;
    max-width: 600px; 
    height: 400px; 
    margin: 0 auto; 
}  
.required-field {
  color: red;
  margin-left: 5px;
}


.batterytr {
  display: none;

}
.batterytr label,
.batterytr span {
    display: inline;

}
.card-title {
font-size: larger;
padding: 25px 0px 25px;
background-color: #f4f4f4;
  font-weight: bold;
  text-align: center;
}

.chart-card {
  padding: 25px 0px 25px;
  border-radius: 8px;

}