:root {
  --tableCellPaddingLR: min(2vw, 40px);
  --tableCellPaddingTB: min(1vw, 20px);
}
#textlist {
  width: 85%;
  margin: auto;
  margin-top: 3.5%;
}

#textlist .header {
  margin: 7% auto;
}

#textlist .header .header-main {
  margin-bottom: 3.5%;
}

#textlist h2.title.next {
  margin-top: min(10vw,200px);
}

#textlist .text-container * {
  box-sizing: border-box;
}

#textlist .text-container *:before, #textlist .text-container *:after {
  box-sizing: border-box;
}

#textlist .text-container {
  width: auto;
}

#textlist .textlist-item:not(:first-of-type) {
  margin-top: 3.5%;
}

#textlist button {
  position: relative;
  display: flex;
  align-items: center;
  text-align: left;
  width: 100%;
  border: none;
  background: none;
  outline: none;
  /*
  font-family: 'montserrat';
  background-color: var(--lightGray);
  border: 1px solid var(--borderColorGray);
  font-weight: 700;
  */
  transition: 600ms;
  cursor: pointer;
}

#textlist button[aria-expanded="true"] {
  /*background-color: var(--yell);*/
}

#textlist button, #textlist .textlist-content table td, #textlist .textlist-content .table>div {
  padding: var(--tableCellPaddingTB) var(--tableCellPaddingLR);
}

#textlist .textlist-title, #textlist .textlist-number, #textlist .textlist-image {
  display: flex;
  /*
  font-size: var(--clFontSizeNormal);
  color: var(--base);
  */
}

#textlist .textlist-title {
  flex-grow: 1;
  flex: 95%;
}

#textlist .textlist-number {
  /*border: 1px solid;*/
  text-align: center;
  border-radius: 50%;
  margin-right: 4%;
  /* padding: 3px 8px; */
  width: 2vw;
  height: 2vw;
  line-height: 2vw;
}

#textlist button .icon {
  flex-grow: 1;
  content: '';
  /*
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="%23092C4C" d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>');
  */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 7px;
  height: 10px;
  flex: 7px;
  transition: 300ms;
}

#textlist button[aria-expanded=true] .icon {
  transform: rotate(90deg);
}

#textlist button[aria-expanded=true] {
  /*color: #000000;*/
}

#textlist .textlist-container button[aria-expanded=true] + .textlist-content {
  opacity: 1;
  max-height: 200em;
  transition: opacity 400ms linear, max-height 400ms linear;
  will-change: opacity, max-height;
}

#textlist .textlist-content {
  opacity: 0;
  max-height: 0em;
  overflow: hidden;
  transition: opacity 400ms linear, max-height 400ms linear;
  will-change: opacity, max-height;
}
/* TABLE */
#textlist .textlist-content table {
  width: 100%;
  border-collapse: collapse;
}

#textlist .textlist-content table tr:nth-child(even) {
  /*background-color: var(--tableCellDarker);*/
}

#textlist .textlist-content table td {
  /*border-bottom: 1px solid black;*/
}

#textlist .textlist-content table td:first-of-type {
  width: 80%;
  /*border-left: 1px solid black;*/
}

#textlist .textlist-content table td:last-of-type {
  /*border-right: 1px solid black;*/
  white-space: nowrap;
}

#textlist .textlist-content table td.highlighted {
  font-weight: 800;
  font-size: var(--clFontSizeNormal);
  width: 100%;
}

#textlist .textlist-content table td p.small.text {
  font-size: 12px;
  font-weight: 400;
}

/* DIV GRID */
/*
.subpage #textlist p.highlighted {
  line-height: normal;
}
*/

#textlist .textlist-content .table {
  display: grid;
}

#textlist .textlist-content .table .highlighted {
  font-weight: 800;
  font-size: var(--clFontSizeSmallPlus);
}

#textlist .textlist-content .table p.small.text {
  font-size: var(--clFontSizeSmaller);
  font-weight: 400;
}

/* 3 COLS*/
#textlist .textlist-content .table.col-3 {  
  grid-template-columns: 50% 25% 25%;
}

#textlist .textlist-content .table.col-3 .empty {
  display: none;
}

#textlist .textlist-content .table.col-3 .value, #textlist .textlist-content .table.col-3 .value2, #textlist .textlist-content .table.col-3 .highlighted.col-3 {
  display: flex;
  align-items: center;
  justify-content: right;
}

#textlist .textlist-content .table.col-3 .highlighted, #textlist .textlist-content .table.col-3 .type-full {
  grid-column: 1/4;
}

#textlist .textlist-content .table.col-3 .highlighted, #textlist .textlist-content .table.col-3 .name, #textlist .textlist-content .table.col-3 .type-full {
  /*border-left: 1px solid var(--borderColorGray);*/
}

#textlist .textlist-content .table.col-3 .empty, #textlist .textlist-content .table.col-3 .value2, #textlist .textlist-content .table .highlighted, #textlist .textlist-content .table.col-3 .type-full {
  /*border-right: 1px solid var(--borderColorGray);;*/
}

#textlist .textlist-content .table.col-3>div {
  /*border-bottom: 1px solid var(--borderColorGray);*/
}

#textlist .textlist-content .table.col-3 .highlighted.col-1 {
  border-right: none;
}

#textlist .textlist-content .table.col-3 .highlighted.col-2 {
  border-left: none;
  border-right: none;
}

#textlist .textlist-content .table.col-3 .highlighted.col-3 {
  border-left: none;
}

#textlist .textlist-content .table.col-3 .name, #textlist .textlist-content .table.col-3 .highlighted.col-1 {
  grid-column: 1/1;
}

#textlist .textlist-content .table.col-3 .value, #textlist .textlist-content .table.col-3 .highlighted.col-2 {
  grid-column: 2/2;
}

#textlist .textlist-content .table.col-3 .value2, #textlist .textlist-content .table.col-3 .highlighted.col-3 {
  grid-column: 3/3;
}

#textlist .textlist-content .table.col-3 div:nth-child(6n+4), #textlist .textlist-content .table.col-3 div:nth-child(6n+5),  #textlist .textlist-content .table.col-3 div:nth-child(6n) {
  /*background-color: #DDF3F7;*/
}

/* 2 COLS*/
#textlist .textlist-content .table.col-2 {  
  grid-template-columns: 75% 25%;
}

#textlist .textlist-content .table.col-2 .empty {
  display: none;
}

#textlist .textlist-content .table.col-2 .value, #textlist .textlist-content .table.col-2 .highlighted.col-2 {
  display: flex;
  align-items: center;
  justify-content: right;
}

#textlist .textlist-content .table.col-2 .highlighted, #textlist .textlist-content .table.col-2 .type-full {
  grid-column: 1/3;
}

#textlist .textlist-content .table.col-2 .highlighted, #textlist .textlist-content .table.col-2 .name, #textlist .textlist-content .table.col-2 .type-full {
  /*border-left: 1px solid var(--borderColorGray);*/
}

#textlist .textlist-content .table.col-2 .empty, #textlist .textlist-content .table.col-2 .value, #textlist .textlist-content .table .highlighted, #textlist .textlist-content .table.col-2 .type-full {
  /*border-right: 1px solid var(--borderColorGray);*/
}

#textlist .textlist-content .table.col-2>div {
  /*border-bottom: 1px solid var(--borderColorGray);*/
}

#textlist .textlist-content .table.col-2 .highlighted.col-1 {
  border-right: none;
}

#textlist .textlist-content .table.col-2 .highlighted.col-2 {
  border-left: none;
}

#textlist .textlist-content .table.col-2 .name, #textlist .textlist-content .table.col-2 .highlighted.col-1 {
  grid-column: 1/1;
}

#textlist .textlist-content .table.col-2 .value, #textlist .textlist-content .table.col-2 .highlighted.col-2 {
  grid-column: 2/2;
}

#textlist .textlist-content .table.col-2 div:nth-child(4n+3), #textlist .textlist-content .table.col-2 div:nth-child(4n) {
  /*background-color: #DDF3F7;*/
}

/* 1 COL*/
#textlist .textlist-content .table.col-1 {
  grid-template-columns: 100%;
}

#textlist .textlist-content .table.col-1>div {
  grid-column: 1/1;
  /*
  border-left: 1px solid var(--borderColorGray);
  border-right: 1px solid var(--borderColorGray);
  border-bottom: 1px solid var(--borderColorGray);
  */
}

#textlist .textlist-content .table.col-1 div:nth-child(even) {
  /*background-color: #DDF3F7;*/
}

/* OTHERS */
#textlist .textlist-content .info {
  margin-top: 1.5%;
}

#textlist .textlist-content .info p.text {
  font-size: var(--clFontSizeSmall);
}

#textlist .textlist-content sup {
  font-weight: bold;
}

@media only screen and (max-width: 1920px) {}
@media only screen and (max-width: 1600px) {}
@media only screen and (max-width: 1440px) {}
@media only screen and (max-width: 1280px) {}
@media only screen and (max-width: 1024px) {}
@media only screen and (max-width: 900px) {
  #textlist {
    width: 100%;
  }

  :root {
    --tableCellPaddingLR: max(4vw, 20px);
    --tableCellPaddingTB: max(2vw, 10px);
  }

  #textlist .textlist-content table td, #textlist .textlist-content .table>div {
    padding: calc(var(--tableCellPaddingTB) / 2) calc(var(--tableCellPaddingLR) / 2);
  }
}
@media only screen and (max-width: 800px) {}
@media only screen and (max-width: 600px) {}
@media only screen and (max-width: 500px) {
  #textlist .textlist-content .table>div, #textlist .textlist-content .table .highlighted {
    font-size: var(--clFontSizeSmall);
  }
}
@media only screen and (max-width: 400px) {}