.fbx-default{
  --color1: #c7c7d0;
  --color2: #a3a3aa;
  
  --border-color: var(--color2);
  --title-color:  #1b1b1b;
  --title-background-color: var(--color1);
  --title-padding: 0.5rem;
  --border-radius: .3rem;
  
  --padding-left: .8rem; /* for title (summary) and content (next div) */
  --padding-content: 0.5rem; 
  
  --thickshadow: 4px 4px 6px #555;
  --thinshadow: 1px 1px 2px #555;
  --noshadow: 0px 0px 0px #FFF;
}


/* for button placement */
details.fbx-default[open] {
  position: relative;
}

details.fbx-default > summary{
  background-color: var(--title-background-color);
  color: var(--title-color);
 
  cursor: pointer;
  
  border-radius: var(--border-radius);
  border-left: var(--border-radius) solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--thinshadow);
 
  padding: var(--title-padding);
  padding-left: var(--padding-left);
}

details.fbx-default > summary:hover{
  box-shadow: var(--thickshadow);
}

details.fbx-default[open] > summary{
  border-bottom-left-radius: 0px;
}

details.fbx-default > div{
  padding: var(--padding-content);
  padding-left: var(--padding-left);
  padding-bottom: 0;

  border-left: var(--border-radius) solid var(--border-color);
  border-top: 0;
  margin-top: 0;
  border-left: .3rem solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  border-bottom-left-radius: .3rem;
}

/* simple box */

details.fbx-simplebox > div{
  padding-bottom: 0;
  border-right: 1px solid var(--border-color);
  border-bottom-right-radius: .3rem;
}


/* ------ closebutton --- */

.closebutton{
  --close-text: "▲";
  --close-background-color: #dddddd;
  --close-hover-background-color: var(--title-background-color);
  --close-hover-color: var(--title-color);
}

/* adjust this by hand if close button gets in the way: just add <br/> at the end
details.closebutton[open]{
    padding-bottom: 1rem;
}
*/

details.closebutton[open] > summary::after {
  display: button;
  content: var(--close-text);
/*
background-color: var(--close-background-color); 
*/  
  border: 1px solid var(--close-background-color);
  border-radius: 0.3rem;
  padding: .2rem 0.5rem 0.2rem 0.5rem;
  box-shadow: var(--thinshadow);
  position: absolute;
  right: 0;/*1rem;*/
  bottom: .5rem;
}

details.closebutton[open] > summary:hover::after {
  background-color: var(--close-hover-background-color); 
  border: 1px solid var(--border-color);
  color: var(--close-hover-color);
  box-shadow: var(--thickshadow); 
}