/* START Iso */

 :root {
    --ISO-Std: #738FA0;
    --ISO-HL: #95b3c1;
    --Delay: 0.5s;
    --LiftHight: -30px;
    --primary-txt-color-light: rgb( 0, 38, 80);
  }

  .cls-2 {
    transition: all 1s ease;
    }

  .cls-3 {
    transition: all 1s ease;
    }

  .highlighted {
    fill: var(--ISO-HL) !important;
    }

  .lift {
    transform: translateY(var(--LiftHight));
    -ms-transform: translate(0, var(--LiftHight));
  }

  tr.table-row-hightlighted {
    transition: all 1s ease;
    background-color: var(--ISO-HL) !important;
  }

.sticky-iso {
    position: sticky;
    top: 6rem;
    height: 400px; /*Height must be defined with a fixed size, else sticky is not working*/
    /* background-color: red; */
  }

.info-graphic {
    max-width: 80vw;
    margin-bottom: 5rem;
}

/* END Iso */


/* START Table */

table {
  border-collapse: collapse;
  width: 100%;
}

table a {
  color: white;
}

table.tbl-center {
  margin: 0 auto;
}

thead th {
  vertical-align: middle;
  color: var(--primary-txt-color-light);
}

table.table-fold th {
  color: var(--primary-txt-color-dark);
}

table td, table th {
  padding: 1rem;
  border-bottom: var(--primary-txt-color-light) solid 1px;
  text-align: center;
}

table tr {
  color: var(--primary-txt-color-dark);
}

table tbody tr:nth-child(odd) {
  background-color: rgba(var(--primary-bg-color-dark), 1);
}

table tbody tr:nth-child(even) {
  background-color: rgba(var(--primary-bg-color-dark), 0.7);
}

#building-a table tbody tr:nth-child(4n-5) {
  background-color: rgba(var(--primary-bg-color-dark), .7);
}

table tbody tr td:last-child {
  cursor: pointer;
}

table.table-fold {
  margin: 0 auto;
  display: block;
}

/* Force table to not be like tables anymore */
table.table-fold, 
table.table-fold thead, 
table.table-fold tbody, 
table.table-fold th, 
table.table-fold td, 
table.table-fold tr { 
    display: block; 
  }


table.table-fold td { 
  /* Behave  like a "row" */
  border: none;
  border-bottom: 1px dotted var(--ISO-HL);
  position: relative;
  padding-left: 13rem; 
  white-space: normal;
  text-align:left;
}

table.table-fold td:last-child { 
  border: none; 
}

table.table-fold td:before { 
  /* Now like a table header */
  position: absolute;
  /* Top/left values mimic padding */
  top: 1rem;
  left: 1rem;
  width: 45%; 
  padding-right: 10px; 
  white-space: nowrap;
  text-align: left;
  font-weight: bold;
  /* Label the data */
  content: attr(data-title); 
}

/* Hide table headers (but not display: none;, for accessibility) */
table.table-fold thead tr { 
  position: absolute;
  top: -9999px;
  left: -9999px;
}

tr.fold {
  display: none;
  transition: 1s;
}

tr.fold.open {
  display: table-row;
}

td.hide {
  display: none;
}

#noResults {
  display: none;
  padding: 1rem 1rem 1rem 0;
}

/* END Table */


/* START Tabs */

.tabcontent {
  display: none;
}
.tabcontent.show {
  display: block;
}

button {
  color: var(--primary-txt-color-dark);
}

button.create-pdf {
  background-color: blue;
}

button.tablink {
  background-color: rgba(var(--primary-bg-color-dark), 1);
  border: none;
  font-size: 1rem;
  padding: 1rem;
  cursor: pointer;
}

button.tablink.active {
  background-color: rgba(var(--primary-bg-color-dark), 0.7);
}

td.opener div {
  width: 1.6rem;
  height: 1.6rem;
  /* background-color: var(--ISO-HL); */
  background-color: white;
  color: var(--primary-txt-color-light);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* END Tabs */


/***************/
/* Breakpoints */
/***************/

/* Desktop */
@media only screen 
    and (min-width: 80rem) {

    /* START Table */
    .l-hide {
        display: none;
    }

    /* END Table */

  }

/* Tablets */
@media only screen
  and (min-width: 40rem)
  and (max-width: 80rem) {

    /* START Table */
    .fold .m-hide,
    .m-hide {
      display: none;
    }
    /* END Table */

    .sticky-iso {
      position: relative;
      height: 100%;
      top: -2rem;
  }

  .info-graphic {
    /* margin-top: -8rem; */
    max-width: 65vw;
    margin-top: -10rem;
}

  }

/* Smartphone*/
@media only screen 
    and (max-width: 40rem) {

    /* START Table */
    .fold .s-hide,
    .s-hide {
        display: none;
    }
    /* END Table */

    .sticky-iso {
      position: relative;
      height: 100%;
  }

  .info-graphic {
    max-width: 85vw;
    margin-bottom: 10rem;
}

  }