/*****************************************/
/* Accordion widget
/*****************************************/
button.accordion {
    margin: 5px 5px 5px 5px;
    padding: 2px;
    height: 30px;
    width: calc(100% - 80px);
    text-align: left;
    border: none;
    outline: none;

}
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  transition: 0.4s;
}

.active, .active > button, .accordion:hover, .accordion:hover > button {
  background-color: #ccc;
}

.accordionActionButton {
    margin: 5px 5px 5px 5px;
    padding: 2px;
    width: 30px;
    height: 30px;
}

.accordionPanel {
  z-index: 2;
  position: relative;
}

.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

.panel button {
    padding: 20px;
    font-size: 10pt;
}

.panel p {
    padding-left: 24px;
    font-size: 9pt;
}

select {
    width: 240px;
}


/*****************************************/
/* Menu system
/*****************************************/
.menu {
  /* define the height of the menu */
  --menu-height: 33px;
  /* holder and ul general style */
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 10;
  ul {
    list-style: none;
    padding: 6px;
    margin: 0;
    li, li a {
      opacity: .8;
      color: #000;      
      cursor: pointer;
      transition: 200ms;
      text-decoration: none;
      white-space: nowrap;
      font-weight: 700;
      &:hover {
        opacity: 1;
      }
      a {
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;      
      }      
    }
    /* lets put an arrow down to the li`s with dropdown */
    li {
      padding-right: 36px;
      &::before {
        content: '';
        width: 0; 
        height: 0; 
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #08f;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .link {
      /* links dont need arrow */
      &::before {
        padding-right: 0;
        display: none;
      }      
    }
  }
  /* the first ul inside the container is the menu, so must be visible and have its own style */
  > ul {
    display: flex;
    height: var(--menu-height);
    align-items: center;
    background-color: #fff;
    /* The first ul elements can be a link or an li with a nested ul. 
       The nested ul will be a dropdown */
    li {
      position: relative;
      margin: 0 8px;
      /* the dropdown style */
      ul {
        visibility: hidden;
        opacity: 0;        
        padding: 0;
        min-width: 160px;
        background-color: #ddd;
        position: absolute;
        top: calc(var(--menu-height) + 6px);
        left: 50%;
        transform: translateX(-25%);
        transition: 200ms;
        transition-delay: 200ms;
        /* the dropdown items style */
        li {
          margin: 0;
          padding: 8px 16px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          height: 30px;
          padding-right: 40px;
          /* let's put an arrow right to the inner li`s with dropdowns */
          &::before {
            width: 0; 
            height: 0; 
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid #08f;
          }
          /* every dropdown after the first must open to the right */
          ul {
            top: -2%;
            left: 100%;
            transform: translate(0)
          }
          &:hover {
            background-color: #fff;
          }
        }
      }
      /* on hover an li (not an <a>) must show its ul (dropdown) */
      &:hover {
        > ul {
          opacity: 1;
          visibility: visible;
          transition-delay: 0ms;
        }
      }
    }
  }
}

/*****************************************/
/* Tabs
/*****************************************/
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: 1rem;
  height: calc(100% - 50px);
}

details {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: 1 / -1;
  grid-row: 1 / span 2;
}

details::details-content {
  grid-row: 2; /* position in the second row */
  grid-column: 1 / -1; /* cover all three columns */
  padding: 1rem;
  border-bottom: 5px solid #8a2be2;
  margin-bottom: 5px;
}

details:not([open])::details-content {
  display: none;
}

summary {
  grid-column: var(--n) / span 1;
  grid-row: 1; /* First subgrid row */
  display: grid;
  padding: 5px; /* Some breathing room */
  border-bottom: 5px solid dodgerblue;
  cursor: pointer; /* Update the cursor when hovered */
  z-index: 1;
}

/* Style the <summary> element when <details> is [open] */
details[open] summary {
  font-weight: bold;
  border-bottom: 5px solid #8a2be2;
  color: #1e90ff;
}

/* First item in first column */
details:nth-of-type(1) summary {
  grid-column: 1 / span 1;
}
/* Second item in second column */
details:nth-of-type(2) summary {
  grid-column: 2 / span 1;
}