/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  border: none;
  border-color:#CCCCCC;
  font-size: 1.1rem;
  color: #000000;
  text-decoration: none;
  background-color:#F0F0F0;
  width: 100%;
  display:flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem;
  padding-left:1.0rem;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: .7rem;
  margin-bottom: .5rem;
  padding: .5rem;
  box-shadow: .5rem 2px .5rem rgba(212, 212, 212, 0.1);
  height:auto;
  }

  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .accordion:hover {
    background-color: rgb(255, 181, 181);
  }
  
  /* Style the accordion panel. Note: hidden by default */
  .panel {
    padding: 35px 18px;
    background-color: rgba(128, 128, 128, 0.137);
    display: none;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    color:#000000;
    border-radius: .7rem;
    margin-top:-15px;
    margin-bottom:10px;
  }

  .accordion:after {
    content: '\002B'; /* Unicode character for "plus" sign (+) */
    font-size: 20px;
    color: rgb(0, 0, 0);
    float: right;
    margin-left: 5px;
    border:none;
    
  }
  
  .active:after {
    content: "\002D"; /* Unicode character for "minus" sign (-) */
  }