/* @import url(//fonts.googleapis.com/css?family=Lato); */
/* @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Sora:wght@100..800&display=swap'); */

body {
  font-family: var(--font-lato);
}

#main-container {
  max-width: 600px;
  width: 100%;
}

.api-buttons > a {
  margin: 0 5px 0 0 !important;
  text-decoration: none !important;
}

.price {
  font-size: 25px !important;
  line-height: 26px !important;
}

.color-selection {
  margin: 0 !important;
}

.color-selection .fpd-cs-item .fpd-colors {
  display: grid;
  grid-auto-flow: column;
  overflow-x: scroll;

  /* auto auto is telling the browser to render two rows, if needed */
  grid-template-rows: auto auto;
}

.fpd-item.fpd-tooltip.fpd-active {
  outline: 1px dashed blue;
  transform: scale(1.05);
}