/* Style the buttons that are used to open and close the accordion panel */
.accordion {
   background-color: #eee;
   color: rgb(44, 119, 168);
   cursor: pointer;
   padding: 18px;
   width: 100%;
   text-align: left;
   border: none;
   outline: none;
   transition: 0.4s;
 }
 
 /* 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) */
 .active, .accordion:hover {
   background-color: #ccc;
 }
 
 /* Style the accordion panel. Note: hidden by default */
 /* .panel {
   padding: 0 18px;
   background-color: white;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.2s ease-out;
 } */
 .panel {
   padding: 0 18px;
   background-color: rgb(250, 246, 246);
   display: none;
   overflow: hidden;
   transition: max-height 0.4s ease-out;
 }
 .panel p {
   font-weight: bolder;
   color: blue;
   text-decoration: underline;
 }

 .accordion:after {
   content: '\02795'; /* Unicode character for "plus" sign (+) */
   font-size: 13px;
   color: #777;
   float: right;
   margin-left: 5px;
 }
 
 .active:after {
   content: "\2796"; /* Unicode character for "minus" sign (-) */
 }