.wrapper {
  margin: 0 auto;
  max-width: 1700px;
}

#table {
  display: grid;
  grid-template-columns: repeat(17, auto) 1fr;
}

#selector-section-shapememory {
  width: 100%;
}

/* Helium to the top right  */
.element2 {
  grid-column-start: -2;
}

/* Boron & Alumunium to the right  */
.element5,
.element13 {
  grid-column-start: 13;
}

/* Lanthinide & Actinoid split  */
.element58,
.element90 {
  grid-column-start: 3;
}

.element119 {
  grid-column-start: -2;
}

.element57 {
  margin: 0;
}

.quaternary-button,
.multi-element-button {
  cursor: pointer;
  font-size: 0.7em;
}

.quaternary-button {
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 2;
}

.multi-element-button {
  grid-column-start: 9;
  grid-column-end: 12;
  grid-row-start: 2;
}

/* Styling for element box */
.element {
  cursor: pointer;
  width: 3.0vw;
  height: 4.0vh;
  padding: 2px 2px 3px 2px;
  border: 1px solid #333333;
  border-collapse: collapse;
  overflow: hidden;

  transition-property: background-color;
  transition-duration: 0.1s;
  transition-timing-function: linear;
  transition-delay: 0ms;
}

.number {
  float: left;
  font-size: 0.3vw;
  position: absolute;
}

.symbol {
  font-weight: bold;
  text-align: center;
  font-size: 1vw;
  margin-top: -0.4vh;
}

.element-name {
  font-size: 0.45vw;
  text-align: center;
  margin-top: -0.4vw;
}

#element-box .symbol {
  font-size: 3vw;
}

#element-box .number {
  font-size: 0.6vw;
}

#element-box .element-name {
  font-size: 1.2vw;
}

#element-box {
  grid-column: 3/5;
  grid-row: 2/4;
  margin: 0;
  padding: 0.2vw;
  overflow: hidden;
}

/* Categories and Groups */

/* Noble Gas  */
.noble {
  background: #f3d2e8;
}

/* Alkali Metal  */
.alkali {
  background: #f88379;
}

/* Alkaline Earth Metal  */
.alkaline {
  background: #ffc3a0;
}

/* Transition Metal  */
.transition {
  background: #e9ff08;
}

/* Polyatomic Non Metal  */
.polyatomic {
  background: #a3d2d5;
}

/* Diatomic Non Metal  */
.diatomic {
  background: #a3d5bf;
}

/* Post Transition Metal  */
.post-transition {
  background: #8eb1e7;
}

/* Metalloid  */
.metalloid {
  background: #5ed89c;
}

/* Lanthanide  */
.lanthanide {
  background: #cc99ff;
  /* Put a space to seperate the split table  */
  /* margin-top: 2.5vw; */
}

/* Actinide  */
.actinide {
  background: #ad87bd;
}

/* The Unknown Element  */
.unknown {
  background: #ccffff;
}

/* When element is hovered (focused) */
.active {
  background-color: #eeeeee;
}

/* When element is selected */
.selected {
  background-color: #888888;

  transition-property: background-color;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  transition-delay: 0ms;
}

.disabled-element {
  opacity: 0.4;
  cursor: initial;
}

.base-element {
  border: 1px solid #fc3d21;
  opacity: 1;
}

.base-element .element-name,
.base-element .number,
.base-element .symbol {
  color: #fc3d21;
  opacity: 0.5;
}

/* TODO: remove placeholder */
#shape-memory-ceramic-placeholder {
  justify-content: center;
}

#shape-memory-ceramic-placeholder img {
  width: 60%;
  margin: 20px 10vw auto 10vw;
  max-width: 1700px;
}