.polymer-class-selection-wrapper {
}

.polymer-page {
  grid-template-columns: repeat(10, 10%);
  grid-template-rows: repeat(3, 9.5vh);

  width: 90%;
  margin: 25px auto;
  max-width: 1700px;
}

.show-polymer-page {
  display: grid;
}
.page-buttons {
  text-align: center;
}

.page-buttons button {
  width: 10%;
  padding: 10px;
  margin: 0px 10px;
  cursor: pointer;
  border: none;
  background-color: #0b3d91;
  color: white;
  border-radius: 4px;
}

.page-buttons button:disabled {
  background-color: lightgray;
  color: gray;
  cursor: default;
}

.page-buttons button[disabled]:hover {
  background-color: lightgray;
  color: gray;
}

.page-buttons button:hover {
  background-color: #000a5e;
}

.polymer-class {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border: 1px solid lightgray;
  border-radius: 5px;
  width: 90%;
  height: 90%;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 0px 2.5px;

  background-color: #eee;
  box-shadow: -2px 2px 4px lightgrey;
}

.polymer-class:hover {
  background-color: #0b3d91;
  cursor: pointer;
  color: white;
}

.polymer-class.selected {
  background-color: #0b3d91;
  color: white;
  border: 2px solid #000a5e;
  font-weight: 600;
}

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .polymer-class:hover {
    box-shadow: -2px 2px 4px grey;
  }

  .polymer-class.selected {
    box-shadow: 1px 1px 6px grey;
  }
}

.polymer-class hr {
  width: 25%;
  border-top: 1px solid darkgrey;
}

.base-chemical-class {
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 0.55vmax;
  height: 50%;
  overflow: hidden;
  word-break: break-all;
}

.representative-chemical-structure {
  display: flex;
  justify-content: center;
  align-items: center;
}

.representative-chemical-structure img {
  max-width: 35%;
  margin: 5px;
}


.polymer-class:hover .representative-chemical-structure img,
.polymer-class.selected .representative-chemical-structure img{
  background-color: #eee;
  border-radius: 5px;
}

/* .polymer-class.Elastomers .base-chemical-class,
.polymer-class.Norbornene .base-chemical-class,
.polymer-class.Polyacrylate .base-chemical-class,
.polymer-class.Polyacrylic .base-chemical-class,
.polymer-class.Polyolefins .base-chemical-class,
.polymer-class.Polypyrrole .base-chemical-class,
.polymer-class.Terephthalic .base-chemical-class
{
    font-size: 0.6vmax;
}

.polymer-class.Benzoxazine .base-chemical-class,
.polymer-class.Bismaleimide .base-chemical-class,
.polymer-class.NOA63-Norland .base-chemical-class,
.polymer-class.Maleic .base-chemical-class,
.polymer-class.Polycarbonate .base-chemical-class,
.polymer-class.Polystyrene .base-chemical-class,
.polymer-class.Polyurethane .base-chemical-class,
.polymer-class.Polyelectrolyte .base-chemical-class
{
    font-size: 0.5vmax;
}

/* produced == Calomer - fix css class in component*/
/* .polymer-class.produced .base-chemical-class,
.polymer-class.Polycaprolactone .base-chemical-class,
.polymer-class.Fluoropolymers .base-chemical-class,
.polymer-class.Polyacrylonitrile .base-chemical-class,
.polymer-class.Polyphenylene .base-chemical-class
{
    font-size: 0.6vmax;
}

.polymer-class.Polyaryletherketone .base-chemical-class,
.polymer-class.Polyisocyanurate .base-chemical-class,
.polymer-class.Polyphosphazene .base-chemical-class
{
    font-size: 0.6vmax;
} */

/* Hide missing images */

.polymer-class.Biobased .representative-chemical-structure,
.polymer-class.produced .representative-chemical-structure,
.polymer-class.Elastomers .representative-chemical-structure,
.polymer-class.NOA63-Norland .representative-chemical-structure,
.polymer-class.Polypyrrole .representative-chemical-structure,
.polymer-class.Verowhite .representative-chemical-structure,
.polymer-class.Polyelectrolyte .representative-chemical-structure,
.polymer-class.Polyolefins .representative-chemical-structure,
.polymer-class.Polycaprolactone .representative-chemical-structure,
.polymer-class.Polyacrylonitrile .representative-chemical-structure,
.polymer-class.Polycarbonate .representative-chemical-structure,
.polymer-class.Polyaryletherketone .representative-chemical-structure {
  display: none;
}

.polymer-class.Biobased hr,
.polymer-class.produced hr,
.polymer-class.Elastomers hr,
.polymer-class.NOA63-Norland hr,
.polymer-class.Polypyrrole hr,
.polymer-class.Verowhite hr,
.polymer-class.Polyelectrolyte hr,
.polymer-class.Polyolefins hr,
.polymer-class.Polycaprolactone hr,
.polymer-class.Polyacrylonitrile hr,
.polymer-class.Polycarbonate hr,
.polymer-class.Polyaryletherketone hr {
  display: none;
}

.polymer-class.Biobased .base-chemical-class,
.polymer-class.Elastomers .base-chemical-class,
.polymer-class.Polypyrrole .base-chemical-class,
.polymer-class.Verowhite .base-chemical-class,
.polymer-class.Polyelectrolyte .base-chemical-class,
.polymer-class.Polyolefins .base-chemical-class,
.polymer-class.Polycaprolactone .base-chemical-class,
.polymer-class.Polyacrylonitrile .base-chemical-class,
.polymer-class.Polycarbonate .base-chemical-class,
.polymer-class.Polyaryletherketone .base-chemical-class {
  height: 25%;
}

.polymer-class.produced .base-chemical-class,
.polymer-class.NOA63-Norland .base-chemical-class,
NOA63-Norland {
  height: 60%;
}

/* Custom Image Sizing */
.polymer-class.Polystyrene .representative-chemical-structure img {
  width: 50%;
}