#modal-icu-upc-picker {
  --grid-gap: 1rem;
  --cell-width: 3rem;
  --cell-height: 4rem;
  --left-panel-width: calc(var(--cell-width) * 4 + 3 * var(--grid-gap));
  --front-panel-width: calc(var(--cell-width) * 9 + 8 * var(--grid-gap));

  --diopter-250-color: #2c4ef3;
  --diopter-225-color: cyan;
  --diopter-200-color: limegreen;
  --diopter-175-color: yellow;
  --diopter-150-color: OrangeRed;
  --diopter-125-color: DarkRed;

  font-size: 1.5rem;
  background-color: rgba(0, 0, 0, 0.7);
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(223, 202, 174);
  text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;

  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 1rem;
}

.hidden {
  display: none;
}

#grids-container {
  display: flex;
  justify-content: space-evenly;
}

#grids-container ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

#grids-container li {
  background-color: antiquewhite;
  border-radius: 5px;
  width: var(--cell-width);
  height: var(--cell-height);
  cursor: pointer;
  text-align: center;
  line-height: 300%;
  box-shadow: 1px 1px 5px rgba(255, 255, 255, 0.089), -1px -1px 5px rgba(255, 255, 255, 0.062);
}

.top-row-flex-container {
  display: flex;
  gap: var(--grid-gap);
}

/* .top-row-peg {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
} */

.top-row-peg li {
  background-color: inherit;
  margin-bottom: 0.5rem;
  writing-mode: tb-rl;
  /* color: rgb(125, 139, 168); */
  /* text-shadow: 1px 1px 1px black, -1px -1px 1px black; */
}

.panel {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-auto-flow: column;
  gap: var(--grid-gap);
}

#left-panel {
  width: var(--left-panel-width);
}

#front-panel-flex-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

#front-panel-flex-container li {
  height: calc(var(--cell-height) + 1rem);
}

#front-panel {
  width: var(--front-panel-width);
  /* gap: calc( var(--grid-gap) + 1rem ) var(--grid-gap); */
  gap: var(--grid-gap);
}

#right-panel {
  width: var(--left-panel-width);
}

#wink-panel {
  grid-template-rows: repeat(4, 1fr);
  grid-auto-flow: column;
  justify-content: center;
  gap: calc(var(--grid-gap) + 1rem) var(--grid-gap);
}

#wink-panel li {
  height: calc(var(--cell-height) + 1rem);
}

#grids-container .selected {
  background: linear-gradient(46deg, #720072, violet) !important;
}

#modal-icu-upc-picker button {
  background-color: rgb(174, 198, 243);
  font-weight: bold;
  display: block;
  margin: 0 auto;
  border: 0;
  border-radius: 5px;
  width: 8rem;
  height: 4rem;
  font-size: 1.5rem;
}

#modal-icu-upc-picker button:hover {
  filter: brightness(90%);
}

#upc-submit-btn:active {
  border: 2px solid rgba(102, 101, 101, 0.678);
}

#modal-icu-upc-picker .diopter-250 {
  background-color: var(--diopter-250-color);
}

#modal-icu-upc-picker .diopter-225 {
  background-color: var(--diopter-225-color);
}

#modal-icu-upc-picker .diopter-200 {
  background-color: var(--diopter-200-color);
}

#modal-icu-upc-picker .diopter-175 {
  background-color: var(--diopter-175-color);
}

#modal-icu-upc-picker .diopter-150 {
  background-color: var(--diopter-150-color);
}

#modal-icu-upc-picker .diopter-125 {
  background-color: var(--diopter-125-color);
}