/* STYLE 1 */

.opptylab-accordion-rounded  .opptylab-accordion-wrapper  {
  border-radius: var(--border-radius-s);
  background-color:var(--surface-light-1);
  color: var(--text);
  border:1px solid var(--border-dark-10);
  box-shadow:var(--box-shadow);
}
.opptylab-accordion-rounded .opptylab-accordion-content-wrapper{
  border-radius: var(--border-radius-s);
  background-color:var(--surface-light-1);

}


/* STYLE 2 */

.opptylab-accordion-border-bottom .opptylab-accordion-wrapper  {
  border-radius: var(--border-radius-s);
  color: var(--text);
  border:0px solid var(--border-dark-10);
  border-bottom:1px solid var(--border-dark-10);
  /* needs reset when accordion in accordion  */
  background-color:none;
  box-shadow:none;

}










.opptylab-accordion-wrapper{
  margin-bottom: 0.5rem;
}

.opptylab-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.3rem 1.00rem 1.2rem 1.5rem;
  cursor: pointer;
  transition:  0.15s linear;
}

.opptylab-accordion-header .opptylab-accordion-title {
  width: 100%;
  padding-right: 1.5rem;
    transition:  0.15s linear;
}
.opptylab-accordion-header .opptylab-accordion-title  {
  color: var(--text);
}
.opptylab-accordion-header:hover .opptylab-accordion-title  {
  color: var(--accent);

}


.opptylab-accordion-header .opptylab-accordion-icon { 
  float:left;
  width:2rem;    
  margin-right:1rem;    
  line-height: 1px; 
  color:var(--accent);
}

.opptylab-accordion-header img.opptylab-accordion-icon { 
  float:left;
  width:2rem;    
  margin-right:1rem;    
}





/* Content panels */

.opptylab-accordion-content-wrapper{
  overflow: hidden;
  height: 0;
  transition: height .35s ease;
  padding: 0 1.5rem ;
}
.opptylab-accordion-content,
.opptylab-accordion-content-indent
 {
  padding-bottom:  1rem;
}
.opptylab-accordion-content-indent {
  padding-left:3rem;  /* = gelijk aan header icon   */     
}





/* Disclosure indicator */

.opptylab-accordion-header .opptylab-accordion-icon-di-chevron,
.opptylab-accordion-header .opptylab-accordion-icon-di-plus
 {
    transition: transform 0.15s ease-in-out; 
    margin-left: 0.25rem;
    left: -0.5rem;
    position: relative;
 }

 
.opptylab-accordion-header .opptylab-accordion-icon-di-chevron .material-symbols-outlined::before {  content:'\e313';}
.opptylab-accordion-header .opptylab-accordion-icon-di-chevron               { transform: rotate(0deg) translateY(3px); }
.opptylab-accordion-header.active .opptylab-accordion-icon-di-chevron         { transform: rotate(180deg) translateY(1px);}

@media only screen and (min-width: 768px) {
.opptylab-accordion-header:hover .opptylab-accordion-icon-di-chevron          { transform: rotate(0deg) translateY(6px); }
.opptylab-accordion-header.active:hover .opptylab-accordion-icon-di-chevron   { transform: rotate(180deg) translateY(1px); }
}

/* Plus */
.opptylab-accordion-header .opptylab-accordion-icon-di-plus .material-symbols-outlined::before {  content:'\e145'; font-size:1rem;}
.opptylab-accordion-header .opptylab-accordion-icon-di-plus               { transform: rotate(0deg) translateY(-2px); }
.opptylab-accordion-header.active .opptylab-accordion-icon-di-plus         { transform: rotate(45deg) translateY(-2px);}

@media only screen and (min-width: 768px) {
.opptylab-accordion-header:hover .opptylab-accordion-icon-di-plus          { transform: rotate(0deg) translateY(-2px); }
.opptylab-accordion-header.active:hover .opptylab-accordion-icon-di-plus   { transform: rotate(45deg) translateY(-2px); }
}