:root {
  --non-metal: #b5a6c9;
  --alkali-metal: #1982c4;
  --alkaline-earth-metal: #52a675;
  --transition-metal: #c5ca30;
  --post-transition-metal: #6a4c93;
  --metalloid: #ffca3a;
  --halogen: #ff924c;
  --noble-gas: #4267ac;
  --lanthanide: #ff595e;
  --actinide: #8ac926;
  --unknown: #9c9c9c;
}

@view-transition {
  navigation: auto;
}

::view-transition-group(element-dialog) {
  /* If interacting with the navigation too fast you can create a transition was skipped error need to catch with js */
  animation-duration: 1s;
}

::view-transition-group(*) {
  animation-duration: .5s;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background-color: #fff;
  color: #3d3d3d;
  font-family: 'Roboto', 'Segoe UI', 'GeezaPro', 'DejaVu Serif', 'sans-serif', '-apple-system', 'BlinkMacSystemFont';
  height: 100%;
  margin: 0;
  font-weight: 200;

  &:has(dialog[open]) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  margin: 0px;
}
h1 {
  font-weight: 200;
}

a {
  color: chocolate;

  &:hover {
    text-decoration: none;
  }

  &:visited,
  &:active,
  &:focus {
    /* color: #3d3d3d; */
    text-decoration: none;
  }
}

ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

dialog {
  view-transition-name: element-dialog;
}

body:has(#legend-popover:popover-open) button[popovertarget="legend-popover"] {
  color: rgb(132, 142, 0);
}

button {
  -webkit-appearance: none;
  background: transparent;
  border: 0px;
  cursor: pointer;
  padding: 0px;
  vertical-align: middle;

  &.btn--icon {
    line-height: 0px;

    &:hover {
      color: rgb(132, 142, 0);
    }
    
    svg {
      fill: currentColor;
    }
  }
}

.header-main {
  display: grid;
  gap: 16px;
  padding: 16px;
  width: 100%; /* for mobile */

  .header-main__top {
    align-items: center;
    display: grid;
    column-gap: 16px;
    grid-template-columns: 1fr auto;
  }

  h1 {
    /* line-height: 1em; */
  }

  .btn {
    anchor-name: --legend-anchor;
    font-size: 42px;
    line-height: 0px;
    padding: 0px;
  }

  .tempature-display{
    font-size: clamp(16px, 3vw , 24px);
    text-align: center;

    span {
      display: inline-block;
    }
  }

  .utilities{ 
    gap: 16px;
    display: grid;
    justify-content: center;
  }

  form {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(133px, 1fr));
    justify-content: right;

    > div {
      display: grid;
    }
  }
}

#periodic-table__container {
  height: 100%;
  width: 100%;
}

.periodic-table-elements {
  display: grid;
  gap: 14px 6px;
  /* grid: repeat(9, auto) / repeat(18, minmax(65px, 1fr)); */
  grid-template-areas:
    "full full full full full full full full full full full full full full full full full full"
    "full full full full full full full full full full full full full full full full full full"
    "full full full full full full full full full full full full full full full full full full"
    "full full full full full full full full full full full full full full full full full full"
    "full full full full full full full full full full full full full full full full full full"
    "full full full full full full full full full full full full full full full full full full"
    "full full full full full full full full full full full full full full full full full full"

    "c c c c c c c c c c c c c c c c c c"
    "c c c c c c c c c c c c c c c c c c";
  height: 100%;
  overflow: auto;
  padding: 6px 16px;
  width: 100%;

  .stateType-Lanthanide,
  .stateType-Actinide {
    display: grid;
    gap: 14px 6px;
    grid: 1fr / repeat(15, 1fr);
  }

  .stateType-Lanthanide {
    grid-column: 4 / c;
    grid-row: 8;
    
  }

  .stateType-Actinide {
    grid-column: 4 / c;
    grid-row: 9;
  }
}

.periodic-table-container__sorted {
  .periodic-table-elements {
    grid: repeat(7, auto) / repeat(18, minmax(65px, 1fr));
    grid-template-areas:
      "full full full full full full full full full full full full full full full full full full"
      "full full full full full full full full full full full full full full full full full full"
      "full full full full full full full full full full full full full full full full full full"
      "full full full full full full full full full full full full full full full full full full"
      "full full full full full full full full full full full full full full full full full full"
      "full full full full full full full full full full full full full full full full full full"
      "full full full full full full full full full full full full full full full full full full"
  }

  .stateType-Lanthanide {
    display: contents;
  }

  .stateType-Actinide {
    display: contents;
  }

  .elem__colSpan {
    display: none;
  }
}

.elem-container {
  display: grid;
  grid-template-rows: auto 1fr;
}

.elem__statuses {
  display: flex;
  column-gap: 6px;
  justify-content: right;
}

.elem__wrapper.elem--flippable {
  transform-style: preserve-3d;
  transition: 0.5s transform ease-in-out;
  
  &.elem__wrapper--flipped {
    transform: rotateY(-180deg);
  }

  .elem {
    backface-visibility: hidden;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 3;

    &.elem--legend {
      position: absolute;
      transform: rotateY(180deg);
      z-index: 1;
    }
  }
}

.elem {
  align-items: center;
  color: #3d3d3d;
  container-type: inline-size;
  container-name: table-element;
  border-width: 5px;
  border-style: solid;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
  display: grid;
  justify-content: stretch;
  padding: 5px 0px 0px 5px;
  text-decoration: none;
  transition: 0.2s ease-in-out;
  
  &.elem--active,
  &:not(.elem--legend):hover,
  &:focus {
    background-color: rgb(61 61 61 / 3%);
    border-right-color: #000;
    border-radius: 15px;
  }

  &:focus-visible {
    outline-offset: 6px;
  }

  &.elem--active {
    font-weight: 400;
  }
}

.elem--legend {
  .elem__symbol {
    font-size: clamp(14px, 28cqw, 54px);
  }
}

.elem__header {
  align-self: start;
  column-gap: 2px;
  display: flex;
  flex-flow: nowrap;
  overflow: hidden;
  justify-content: space-between;
  width: 100%;
}

.elem__am {
  font-size: clamp(10px, 14cqw, 20px);
  max-width: 74%;
  overflow: hidden;
  padding-right: 5px;
  text-overflow: ellipsis;
  text-box-trim: trim-both;
}

.elem__an {
  text-box-trim: trim-both;
}

.elem__an,
.elem__name {
  font-size: clamp(12px, 18cqw, 24px);
}

.elem__footer {
  align-self: end;
  display: grid;
  width: 100%;
}

.elem__name {
  letter-spacing: -1px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-box-trim: trim-both;
  width: 100%;
}

.elem__sortedBy {
  font-size: clamp(10px, 14cqw, 20px);
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  text-box-trim: trim-both;
  text-transform: capitalize;
  width: 100%;
}

.elem__symbol {
  color: transparent;
  font-size: clamp(24px, 33cqw, 54px);
  font-weight: 400;
  letter-spacing: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  text-shadow: 1px 1px 5px #fff, 0px 0px 0px rgb(73 73 73);
  text-box-trim: trim-both;
}

.elem[data-classif="Nonmetal"] {
  --classification-color: var(--non-metal);
  border-left-color: var(--classification-color);

  &.elem--active,
  &:hover {
    border-right-color: var(--classification-color);
  }

  .elem__symbol {
    text-shadow: 1px 1px 5px #fff, 0px 0px 0px oklch(from var(--classification-color) calc(l - 0.3) c h);
  }
}

.elem[data-classif="Alkalimetal"] {
  --classification-color: var(--alkali-metal);
  border-left-color: var(--classification-color);

  &.elem--active,
  &:hover {
    border-right-color: var(--classification-color);
  }

  .elem__symbol {
    text-shadow: 1px 1px 5px #fff, 0px 0px 0px oklch(from var(--classification-color) calc(l - 0.2) c h);
  }
}

.elem[data-classif="Alkalineearthmetal"] {
  --classification-color: var(--alkaline-earth-metal);
  border-left-color: var(--classification-color);

  &.elem--active,
  &:hover {
    border-right-color: var(--classification-color);
  }

  .elem__symbol {
    text-shadow: 1px 1px 5px #fff, 0px 0px 0px oklch(from var(--classification-color) calc(l - 0.2) c h);
  }
}

.elem[data-classif="Transitionmetal"] {
  --classification-color: var(--transition-metal);
  border-left-color: var(--classification-color);

  &.elem--active,
  &:hover {
    border-right-color: var(--classification-color);
  }

  .elem__symbol {
    text-shadow: 1px 1px 5px #fff, 0px 0px 0px oklch(from var(--classification-color) calc(l - 0.4) c h);
  }
}

.elem[data-classif="Lanthanide"] {
  --classification-color: var(--lanthanide);
  border-left-color: var(--classification-color);

  &.elem--active,
  &:hover {
    border-right-color: var(--classification-color);
  }

  .elem__symbol {
    text-shadow: 1px 1px 5px #fff, 0px 0px 0px oklch(from var(--classification-color) calc(l - 0.2) c h);
  }
}

.elem[data-classif="Actinide"] {
  --classification-color: var(--actinide);
  border-left-color: var(--classification-color);

  &.elem--active,
  &:hover {
    border-right-color: var(--classification-color);
  }

  .elem__symbol {
    text-shadow: 1px 1px 5px #fff, 0px 0px 0px oklch(from var(--classification-color) calc(l - 0.3) c h);
  }
}

.elem[data-classif="Unknown"] {
  --classification-color: var(--unknown);
  border-left-color: var(--classification-color);

  &.elem--active,
  &:hover {
    border-right-color: var(--classification-color);
  }

  .elem__symbol {
    text-shadow: 1px 1px 5px #fff, 0px 0px 0px oklch(from var(--classification-color) calc(l - 0.2) c h);
  }
}

.elem[data-classif="Post-transitionmetal"] {
  --classification-color: var(--post-transition-metal);
  border-left-color: var(--classification-color);

  &.elem--active,
  &:hover {
    border-right-color: var(--classification-color);
  }

  .elem__symbol {
    text-shadow: 1px 1px 5px #fff, 0px 0px 0px oklch(from var(--classification-color) calc(l - 0.2) c h);
  }
}

.elem[data-classif="Metalloid"] {
  --classification-color: var(--metalloid);
  border-left-color: var(--classification-color);

  &.elem--active,
  &:hover {
    border-right-color: var(--classification-color);
  }

  .elem__symbol {
    text-shadow: 1px 1px 5px #fff, 0px 0px 0px oklch(from var(--classification-color) calc(l - 0.4) c h);
  }
}

.elem[data-classif="Noblegas"] {
  --classification-color: var(--noble-gas);
  border-left-color: var(--classification-color);

  &.elem--active,
  &:hover {
    border-right-color: var(--classification-color);
  }

  .elem__symbol {
    text-shadow: 1px 1px 5px #fff, 0px 0px 0px oklch(from var(--classification-color) calc(l - 0.2) c h);
  }
}

.elem[data-classif="Halogen"] {
  --classification-color: var(--halogen);
  border-left-color: var(--classification-color);

  &.elem--active,
  &:hover {
    border-right-color: var(--classification-color);
  }

  .elem__symbol {
    text-shadow: 1px 1px 5px #fff, 0px 0px 0px oklch(from var(--classification-color)  calc(l - 0.3) c h);
  }
}

.elem-container {
  .elem-status--btn {
    visibility: hidden;
    margin-right: auto;
    margin-left: 5px;
  }
  &:hover {
    .elem-status--btn {
      visibility: visible;
    }
  }
}

.elem-container[data-an="1"]+.elem__colSpan {
  grid-column: span 16;
}

.elem-container[data-an="4"]+.elem__colSpan {
  grid-column: span 10;
}

.elem-container[data-an="12"]+.elem__colSpan {
  grid-column: span 10;
}

.dialog-element {
  background-color: transparent;
  border: 0px;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 0px;
  width: 100%;

  &.dialog-element--collapsed {
    .dialog-element__details {
      opacity: 0;
      transform: translate(-1000px, 0px);
      z-index: 0;
    }

     .btn-toggle-details__collapseIcon {
        display: none;
      }
      .btn-toggle-details__expandIcon {
        display: block;
      }
  }

  .dialog-element__header {
    background-image: linear-gradient(-180deg, rgb(255 255 255) 0%, rgb(255 255 255) 50%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0) 100%);
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 16px 16px 32px;
    position: absolute;
    width: 100%;
    z-index: 10;
  }

  .dialog-element__details {
    background-image: radial-gradient(circle at left,rgb(255, 255, 255) 0%, rgb(255, 255, 255, 0.8) 59%, rgba(255, 255, 255, 0) 68%);
    max-width: 600px;
    overflow: auto;
    height: 100%;
    padding: 112px 16px 64px;
    position: relative;
    transform: translate(0px, 0px);
    transition: all 0.7s ease-in-out;
    z-index: 5;

    p {
      line-height: 1.3em;
    }

    ul {
      margin-bottom: 16px;
    }
  }

  .dialog-element__footer {
    align-items: center;
    background-image: linear-gradient(360deg, rgb(255 255 255) 0%, rgb(255 255 255) 50%, rgb(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0) 100%);
    bottom: 0px;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: 32px 16px 16px;
    position: absolute;
    width: 100%;
    z-index: 10;

    a {
      padding: 6px 8px;
    }
  }
  

  .btn-toggle-details__expandIcon {
    display: none;
  }
  .btn-toggle-details__collapseIcon {
    display: block;
  }


  &.dialog-element--classified {
    .dialog-element__model {
      filter: blur(30px);
    }
    
    ul li span {
      background: linear-gradient(to bottom, transparent 40%, #000000 40% 70%, transparent 70%);
    }

    .dialog-element__pagination{
      display: none;
    }
  }

  .dialog-element__model {
    height: 100vh;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;
  }

  &::backdrop {
    background-color: #f6f6f691;
    backdrop-filter: blur(8px);
  }
}

.periodic-table-legend {
  margin-bottom: 16px;

  li {
    margin-bottom: 6px;
    text-align: right;
    white-space: nowrap;
  }

  &.periodic-table-legend--statuses {
    .elem-status {
      display: inline-block;
      vertical-align: text-top;
    }
  }

  &.periodic-table-legend--classifications {
    li {
      border: 5px solid red;
      border-width: 0px;
      border-right-width: 5px;
      padding-right: 6px;
      line-height: 1em;
      text-box-trim: trim-start;

      
      &.periodic-table-legend__nonmetal {
        border-right-color: var(--non-metal);
      }
      &.periodic-table-legend__alkalimetal {
        border-right-color: var(--alkali-metal);
      }
      &.periodic-table-legend__alkalineearthmetal {
        border-right-color: var(--alkaline-earth-metal);
      }
      &.periodic-table-legend__transitionmetal {
        border-right-color: var(--transition-metal);
      }
      &.periodic-table-legend__lanthanide {
        border-right-color: var(--lanthanide);
      }
      &.periodic-table-legend__actinide {
        border-right-color: var(--actinide);
      }
      &.periodic-table-legend__post-transitionmetal {
        border-right-color: var(--post-transition-metal);
      }
      &.periodic-table-legend__metalloid {
        border-right-color: var(--metalloid);
      }
      &.periodic-table-legend__noblegas {
        border-right-color: var(--noble-gas);
      }
      &.periodic-table-legend__halogen {
        border-right-color: var(--halogen);
      }
    }
  }
}


#legend-popover {
  background: linear-gradient(-90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 90%, rgba(255, 255, 255, 0) 100%);
  border: 0px;
  height: 100%;
  inset: auto;
  margin: 0px;
  opacity: 0;
  padding: 16px;
  padding-left: 64px;
  position-anchor: --legend-anchor;
  right: calc(anchor(right) - 16px);
  translate: 200px 0px;
  top: anchor(--legend-anchor bottom);
  transition: all 0.5s ease-in-out;
  width: min-content;
  display: block;
  z-index: 100;

  &:popover-open {
    opacity: 1;
    translate: 0px 0px;
  }

  .elem-container {
    margin-bottom: 16px;
  }

  ul {
    margin-bottom: 16px;
  }
}

.elem-status {
  display: block;
  height: 15px;
  width: 15px;
  position: relative;
  z-index: 20;

  &.elem-status--btn{
    font-size: 140%;
    line-height: 18px;
  }

  &.elem-status--melting {
    border-radius: 50%;
    background-image:
      radial-gradient(circle at 30% 30%, white 0%, rgba(255, 255, 255, 0) 20%),
      radial-gradient(circle at 50% 50%, rgba(235, 135, 167, 0.3) 0%, rgba(235, 135, 167, 0.8) 100%);

    &::before,
    &::after {
      background-image:
        radial-gradient(circle at 30% 30%, white 0%, rgba(255, 255, 255, 0) 20%),
        radial-gradient(circle at 50% 50%, rgba(235, 135, 167, 0.3) 0%, rgba(235, 168, 135, 0.8) 100%);
      border: 1px solid rgba(255, 0, 0, 0.4);
      border-radius: 100%;
      background-size: 200% 200%;
      content: ' ';
      display: block;
      position: absolute;
      height: 10px;
      width: 10px;
      animation-name: element-melting;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: ease;
      z-index: 100;
    }

    &::before {
      left: -1px;
      top: -2px;
    }

    &::after {
      animation-name: element-melting2;
      animation-duration: 3s;
      right: -1px;
      top: -4px
    }
  }

  &.elem-status--boiling {
    border-radius: 50%;
    background-image:
      radial-gradient(circle at 30% 30%, white 0%, rgba(255, 255, 255, 0) 20%),
      radial-gradient(circle at 50% 50%, rgba(135, 206, 235, 0.3) 0%, rgba(135, 206, 235, 0.8) 100%);

    &::before,
    &::after {
      background-image:
        radial-gradient(circle at 30% 30%, white 0%, rgba(255, 255, 255, 0) 20%),
        radial-gradient(circle at 50% 50%, rgba(135, 206, 235, 0.3) 0%, rgba(0, 183, 255, 0.8) 100%);
      border: 1px solid rgba(0, 94, 255, 0.4);
      border-radius: 100%;
      background-size: 200% 200%;
      content: ' ';
      display: block;
      position: absolute;
      height: 10px;
      width: 10px;
      animation-name: element-boiling;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: ease;
      z-index: 100;
    }

    &::before {
      left: 0px;
    }

    &::after {
      animation-name: element-boiling2;
      animation-duration: .7s;
      right: -3px;
      top: -2px;
    }
  }

  &.elem-status--gas {
    border-radius: 50%;
    background-color: transparent;
    box-shadow: inset 0 0 8px 5px rgba(154, 154, 154, 0.2);
    filter: blur(2px);

    &::before,
    &::after {
      content: '';
      left: 0px;
      height: 0px;
      position: absolute;
      width: 0px;
    }

    &::before {
      border: 1px solid #333;
      background-color: transparent;
      border-radius: 50%;
      filter: blur(2px);
      height: 15px;
      width: 15px;
    }

    &::after {
    }
  }
  &.elem-status--liquid {
    background-image:
      radial-gradient(circle at 30% 30%, white 0%, rgba(255, 255, 255, 0) 20%),
      radial-gradient(circle at 50% 50%, rgba(135, 206, 235, 0.3) 0%, rgba(135, 206, 235, 0.8) 100%);
    border-radius: 100%;

    &::before,
    &::after {
      background-image:
        radial-gradient(circle at 30% 30%, white 0%, rgba(255, 255, 255, 0) 20%),
        radial-gradient(circle at 50% 50%, rgba(135, 206, 235, 0.3) 0%, rgba(135, 206, 235, 0.8) 100%);
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 100%;
      background-size: 200% 200%;
      content: ' ';
      display: block;
      position: absolute;
      height: 10px;
      width: 10px;
      z-index: 100;
    }

    &::after {
      height: 5px;
      right: 0px;
      top: -3px;
      width: 5px;
    }
  }

  &.elem-status--solid {
    background-color: #b0b0b0;
    transform: rotate3d(0, 0, 1, -180deg) scale(.65);
    top: 2px;

    &::before,
    &::after {
      content: '';
      left: 0px;
      height: 15px;
      position: absolute;
      width: 15px;
    }

    &::before {
      background-color: #d5d5d5;
      height: 4px;
      translate: 3px 15px;
      transform: rotate3d(0, 0, 0, 45deg) skew(53deg, 0deg);
      width: 15px;
    }

    &::after {
      background-color: #878787;
      translate: 15px 2px;
      transform: rotate3d(0, 0, 0, 45deg) skew(0deg, 35deg);
      width: 6px;
    }
  }

  &.elem-status--uncertain {
    text-align: center;
    &::before {
      content: '?';
      font-weight: bold;
      text-align: center;
    }
  }
}

.footer-main {
  background-color: #3d3d3d;
  color: #fff;
  padding: 16px;
  margin-top: 16px;
  font-size: small;
  text-align: center;

  p {
    margin: 0px;
  }
  a{
    color: #fff;
    font-weight: bold;
  }
}

@media (max-width: 680px) {
  .header-main {
    background: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 90%, rgba(0, 0, 0, 0) 100%);
    position: fixed;
    
    z-index: 50;

    .utilities {
      justify-content: stretch;
    }
    
    .tempature-display {
      text-align: right;
    }
  }

  #periodic-table__container {
    height: auto;
    padding-top: 166px;
  }

  .periodic-table-container__sorted .periodic-table-elements,
  .periodic-table-elements {
    grid: none;
    grid-template-columns: repeat(auto-fill, minmax(200px, 100%));
    grid-template-rows: repeat(118, auto);
    grid-template-areas: none;
    row-gap: 12px;

    .stateType-Lanthanide,
    .stateType-Actinide {
      display: contents;
      gap: none;
      grid-column: none;
      grid-row: none;

    }
  }

  .periodic-table-container__sorted {
    .elem-container:has(.elem__wrapper .elem[tabindex="1"]) {
      grid-area: 1 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="2"]) {
      grid-area: 2 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="3"]) {
      grid-area: 3 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="4"]) {
      grid-area: 4 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="5"]) {
      grid-area: 5 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="6"]) {
      grid-area: 6 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="7"]) {
      grid-area: 7 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="8"]) {
      grid-area: 8 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="9"]) {
      grid-area: 9 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="10"]) {
      grid-area: 10 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="11"]) {
      grid-area: 11 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="12"]) {
      grid-area: 12 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="13"]) {
      grid-area: 13 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="14"]) {
      grid-area: 14 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="15"]) {
      grid-area: 15 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="16"]) {
      grid-area: 16 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="17"]) {
      grid-area: 17 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="18"]) {
      grid-area: 18 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="19"]) {
      grid-area: 19 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="20"]) {
      grid-area: 20 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="21"]) {
      grid-area: 21 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="22"]) {
      grid-area: 22 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="23"]) {
      grid-area: 23 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="24"]) {
      grid-area: 24 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="25"]) {
      grid-area: 25 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="26"]) {
      grid-area: 26 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="27"]) {
      grid-area: 27 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="28"]) {
      grid-area: 28 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="29"]) {
      grid-area: 29 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="30"]) {
      grid-area: 30 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="31"]) {
      grid-area: 31 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="32"]) {
      grid-area: 32 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="33"]) {
      grid-area: 33 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="34"]) {
      grid-area: 34 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="35"]) {
      grid-area: 35 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="36"]) {
      grid-area: 36 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="37"]) {
      grid-area: 37 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="38"]) {
      grid-area: 38 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="39"]) {
      grid-area: 39 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="40"]) {
      grid-area: 40 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="41"]) {
      grid-area: 41 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="42"]) {
      grid-area: 42 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="43"]) {
      grid-area: 43 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="44"]) {
      grid-area: 44 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="45"]) {
      grid-area: 45 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="46"]) {
      grid-area: 46 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="47"]) {
      grid-area: 47 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="48"]) {
      grid-area: 48 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="49"]) {
      grid-area: 49 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="50"]) {
      grid-area: 50 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="51"]) {
      grid-area: 51 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="52"]) {
      grid-area: 52 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="53"]) {
      grid-area: 53 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="54"]) {
      grid-area: 54 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="55"]) {
      grid-area: 55 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="56"]) {
      grid-area: 56 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="57"]) {
      grid-area: 57 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="58"]) {
      grid-area: 58 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="59"]) {
      grid-area: 59 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="60"]) {
      grid-area: 60 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="61"]) {
      grid-area: 61 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="62"]) {
      grid-area: 62 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="63"]) {
      grid-area: 63 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="64"]) {
      grid-area: 64 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="65"]) {
      grid-area: 65 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="66"]) {
      grid-area: 66 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="67"]) {
      grid-area: 67 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="68"]) {
      grid-area: 68 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="69"]) {
      grid-area: 69 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="70"]) {
      grid-area: 70 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="71"]) {
      grid-area: 71 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="72"]) {
      grid-area: 72 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="73"]) {
      grid-area: 73 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="74"]) {
      grid-area: 74 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="75"]) {
      grid-area: 75 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="76"]) {
      grid-area: 76 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="77"]) {
      grid-area: 77 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="78"]) {
      grid-area: 78 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="79"]) {
      grid-area: 79 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="80"]) {
      grid-area: 80 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="81"]) {
      grid-area: 81 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="82"]) {
      grid-area: 82 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="83"]) {
      grid-area: 83 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="84"]) {
      grid-area: 84 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="85"]) {
      grid-area: 85 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="86"]) {
      grid-area: 86 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="87"]) {
      grid-area: 87 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="88"]) {
      grid-area: 88 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="89"]) {
      grid-area: 89 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="90"]) {
      grid-area: 90 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="91"]) {
      grid-area: 91 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="92"]) {
      grid-area: 92 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="93"]) {
      grid-area: 93 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="94"]) {
      grid-area: 94 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="95"]) {
      grid-area: 95 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="96"]) {
      grid-area: 96 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="97"]) {
      grid-area: 97 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="98"]) {
      grid-area: 98 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="99"]) {
      grid-area: 99 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="100"]) {
      grid-area: 100 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="101"]) {
      grid-area: 101 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="102"]) {
      grid-area: 102 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="103"]) {
      grid-area: 103 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="104"]) {
      grid-area: 104 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="105"]) {
      grid-area: 105 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="106"]) {
      grid-area: 106 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="107"]) {
      grid-area: 107 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="108"]) {
      grid-area: 108 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="109"]) {
      grid-area: 109 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="110"]) {
      grid-area: 110 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="111"]) {
      grid-area: 111 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="112"]) {
      grid-area: 112 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="113"]) {
      grid-area: 113 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="114"]) {
      grid-area: 114 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="115"]) {
      grid-area: 115 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="116"]) {
      grid-area: 116 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="117"]) {
      grid-area: 117 / 1 !important;
    }

    .elem-container:has(.elem__wrapper .elem[tabindex="118"]) {
      grid-area: 118 / 1 !important;
    }
  }

  .elem__symbol,
  .elem--legend .elem__symbol {
    font-size: clamp(18px, 33cqw, 28px);
  }

  .elem__colSpan {
    display: none;
  }

  .elem .elem__am,
  .elem .elem__sortedBy {
    font-size: clamp(14px, 1vw, 20px);
  }

  .elem .elem__name,
  .elem .elem__an {
    font-size: clamp(16px, 1vw, 24px);
  }
}