html, :root
{
  --size-swatch:          30px;
}


/* --- input group additions -------------------------------------------------*/
.input-group li
 {
  margin-bottom:     .5em;
}
.input-group pre
  {
  color:             var(--col-B-dddd);
  background-color:  var(--col-B-ll);
  font-weight:       bold;
  margin:            .3em;
  padding:           .3em;
}


/* --- summary items ---------------------------------------------------------*/
.summary-element
{
  display: flex;
  gap:     1em;
}
.summary-label
{
  min-width: 10em;
  width:     12em;
  color:     var(--col-B-ll);
}
.summary-value
{
  min-width: 10em;
  width:     20em;
}

/* --- framerates ------------------------------------------------------------*/
#framerate_field
  {
  display:               grid;
  grid-template-columns: repeat(4, 60px);
  column-gap:            5px;
  row-gap:               5px;
}
.fr_tag
  {
  width:            3.5em;
  height:           1.66em;
  border-radius:    15px;
  box-sizing:       border-box;

  display:          flex;
  align-items:      center; 
  justify-content:  center;
  
  text-align:       center;

  background-color: var(--col-B-d);
  user-select:      none;
}
.fr_tag:hover
  {
  background-color: var(--col-B);
}
.fr_tag.selected
  {
  background-color: var(--col-A);
  color:            var(--col-B-dddd);
  font-weight:      bold;
}


/* --- swatches ------------------------------------------------------------- */
#swatches_field
  {
  display:               grid;
  grid-template-columns: repeat(8, var(--size-swatch));
  column-gap:            5px;
  row-gap:               5px;
}
.swatch
  {
  width:         var(--size-swatch);
  height:        var(--size-swatch);
  border-radius: 5px;
  box-sizing:    border-box;
  border:        2px solid rgba(0,0,0,.5);
}
.swatch:hover
  {
  border: none;
}
.swatch.selected
  {
  border: 2px solid white;
}