.collapsible {
  background-color: #d5dfeb;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  letter-spacing: 1px;
}

.active, .collapsible:hover {
  background-color: #b3cbe8;
}

.collapsible:after {
  content: '\2212';
  color: black;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

button.collapsible.active:after {
  content: "\002B";
}

.content {
  padding: 0px 0px 0px 0px;
  display: block;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: white;
}

.sub_collapsible {
  /* background-color: #d5dfeb; */
  background-color: white;
  color: black;
  font-weight: bold;
  cursor: pointer;
  padding: 18px;
  padding-left: 0px;
  padding-bottom: 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  letter-spacing: 1px;
}

.active, .sub_collapsible:hover {
  /* background-color: #b3cbe8; */
}

.sub_collapsible:after {
  /* content: '\1f876'; */
  content: url("./down_arrow.png");
  letter-spacing: 5px;
  color: black; 
  font-weight: bold;
  float: left;
  margin-left: 5px;
}

button.sub_collapsible.active:after {
  /* content: "\1f872"; */
  content: url("./right_arrow.png");
  letter-spacing: 5px;
}

.sub_content {
  padding: 0px 0px 0px 0px;
  display: block;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: white;
}