/*
 CSS for the main interaction
*/
.accordion > input[name="collapse"] {
  display: none;
  
  /*position: absolute;
  left: -100vw;*/
}

.accordion label,
.accordion .content{
 max-width: 800px;
  margin: 0 auto;
 }


.accordion .content {
  background: #FFFFFF;
  overflow: auto; /* This will add a scrollbar if the content overflows */
  max-height: 0;
  transition: max-height 0.5s ease-in-out;
  padding-right: 20px; /* Add right padding */
}

.accordion > input[name="collapse"]:checked ~ .content {
  max-height: 2000px; /* Adjust this value as needed */
  transition: max-height 0.5s ease-in-out;
}

.accordion label {
  display: block;
 
}


/* For Desktop */
@media only screen and (min-width: 620px){
  .accordion > input[name="collapse"]:checked ~ .content {
    max-height: 2000px; /* Adjust this value as well */
  }
}



.accordion {
  margin-bottom: 1em;
}

.accordion > input[name="collapse"]:checked ~ .content {
  border-top: 0;
  transition: 0.3s;
}

.accordion .handle {
  margin: 0;
  font-size: 16px;
  
}

.accordion label {
  color: #010101;
  cursor: pointer;
  font-weight: normal;
  padding: 10px;
  background: #c7fcd6;
  user-select: none;
  border-style: solid;border-color: #010101;border-width: 1pt;-webkit-border-radius: 4pt;-moz-border-radius: 4pt;border-radius: 4pt;-webkit-box-shadow: #666 0px 4px 3px;-moz-box-shadow: #666 0px 4px 3px;box-shadow: #666 0px42px 3px;	behavior: url(/pie/PIE.htc);}
  


.accordion label:hover,
.accordion label:focus {
  background: #252525;
}

.accordion .handle label:before {
  font-family: FontAwesome;
  content: "\f107";
  display: inline-block;
  margin-right: 10px;
  font-size: 1em;
  line-height: 1.556em;
  vertical-align: middle;
  transition: 0.4s;
  
}

.accordion > input[name="collapse"]:checked ~ .handle label:before {
    transform: rotate(180deg);
    transform-origin: center;
    transition: 0.4s;
}