.cardFirst {
  background-color: #D1F0A2; /* Light green background */
  padding: 5px;
  height: 247px;
  border-radius: none;
  font-family: Arial, sans-serif;
}
.cardSecond {
   
  padding: 5px;
  height: 247px;
  border-radius: none;
  font-family: Arial, sans-serif;
}
.cardThird {
  
  height: 640px;
  border-radius: none;
  
}
.pd20{
  
  padding: 20px;
  font-family: Arial, sans-serif;
}
.pd40{
  
  padding: 40px;
 
}
.pd15{
  
  padding-top: 15px;
  padding-right: 0px;
  padding-bottom: 15px;
  padding-left: 15px;
  font-family: Arial, sans-serif;
}
.pdL30{
  
  padding-left: 30px;
}
.pdB30{
  
 padding-bottom: 50px;
}

.pdB20{
  
  padding-bottom: 20px;
 }
 .pdT20{
  
  padding-top: 20px;
 }


@media  (max-width: 320px),(max-width: 468px),(max-width: 768px) {
  .cardSecond {
   
    padding: 5px;
    height: 100%;
    border-radius: none;
    font-family: Arial, sans-serif;
  }

  .cardThird {
  
    height:100%;
    border-radius: none;
    
  }

}

  .mtb{
    margin-top: -15%!important;
  }




@media  (max-width: 1200px), (max-width: 1300px) {

  .mt25 {
    margin-top: 5px!important;
   }
   .description2 {
    font-size: 14px !important;
    margin: 10px 0;
  }

  .SecondChart {
    width: 319px!important; height: 306px!important;
    
  }
  .mtb{
    margin-top: -23%!important;
  }
  
   
}

.description2 {
  font-size: 16px;
  margin: 10px 0;
}

.description3 {
  font-size: 17px;
  font-weight: bold;
}

.mt25 {
  margin-top: 25px;
 }
 

.large-number {
  font-size: 2em;
  font-weight: bold;
}
.large-number2 {
  font-size: 18px;
  font-weight: bold;
}
.subscript {
  vertical-align: sub;
  font-size: smaller;
}
.description {
  font-size: 1.2em;
  margin: 10px 0;
}

.date {
  color: #009AD8;
font-size: 15px;
font-weight: bold;
}

.form-switch-large .form-check-input {
 width: 51px;
 height: 27px;
}
.form-switch-large .form-check-input:checked {
  background-color: #0d6efd;
}
.form-switch-large .form-check-input::before {
  width: 26px;
  height: 26px;
  transform: translateX(2px);
}
.form-switch-large .form-check-input:checked::before {
  transform: translateX(28px);
}
#lineChart {
  height: 700px;
  width: 100%;
}


.title {
  font-size: 18px;
  font-weight: bold;
  color: #ccc;
  margin-bottom: 10px;
}
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.button {
  border: 2px solid #00aaff;
  border-radius: 25px;
  padding: 5px 15px;
  color: #00aaff;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.button:hover {
  background-color: #e0f7ff;
}
.button.active {
  background-color: #00aaff;
  color: white;
}