#tab-content-settings
{
 grid-template-columns:min-content 1fr;
 grid-template-rows:repeat(15, min-content);
 grid-template-areas:"zoom-title zoom-title"
                     "magnify-label magnify"
                     "truncate-values-label truncate-values"
                     "preview-title preview-title"
                     "preview-width-label preview-width"
                     "preview-height-label preview-height"
                     "edges-title edges-title"
                     "edges-color-label edges-color"
                     "edges-opacity-label edges-opacity"
                     "edges-width-label edges-width"
                     "highlight-title highlight-title"
                     "highlight-color-label highlight-color"
                     "highlight-opacity-label highlight-opacity"
                     "background-title background-title"
                     "background-color-label background-color"
}

.zoom-title { grid-area:zoom-title }
.truncate-values-label { grid-area:truncate-values-label }
.truncate-values { grid-area:truncate-values }
.magnify-label { grid-area:magnify-label }
.magnify { grid-area:magnify }
.preview-title { grid-area:preview-title }
.preview-width-label { grid-area:preview-width-label }
.preview-width { grid-area:preview-width }
.preview-height-label { grid-area:preview-height-label }
.preview-height { grid-area:preview-height }
.edges-title { grid-area:edges-title }
.edges-color-label { grid-area:edges-color-label }
.edges-color { grid-area:edges-color }
.edges-opacity-label { grid-area:edges-opacity-label }
.edges-opacity { grid-area:edges-opacity }
.edges-width-label { grid-area:edges-width-label }
.edges-width { grid-area:edges-width }
.highlight-title { grid-area:highlight-title }
.highlight-color-label { grid-area:highlight-color-label }
.highlight-color { grid-area:highlight-color }
.highlight-opacity-label { grid-area:highlight-opacity-label }
.highlight-opacity { grid-area:highlight-opacity }
.background-title { grid-area:background-title }
.background-color-label { grid-area:background-color-label }
.background-color { grid-area:background-color }

@media (min-width:40rem)
{
 #tab-content-settings
 {
  grid-template-columns:min-content min-content min-content 1fr;
  grid-template-rows:repeat(11, min-content);
  grid-template-areas:"zoom-title zoom-title zoom-title zoom-title"
                      "magnify-label magnify truncate-values-label truncate-values"
                      "preview-title preview-title preview-title preview-title"
                      "preview-width-label preview-width preview-height-label preview-height"
                      "edges-title edges-title edges-title edges-title"
                      "edges-color-label edges-color edges-opacity-label edges-opacity"
                      "edges-width-label edges-width edges-width edges-width"
                      "highlight-title highlight-title highlight-title highlight-title"
                      "highlight-color-label highlight-color highlight-opacity-label highlight-opacity"
                      "background-title background-title background-title background-title"
                      "background-color-label background-color background-color background-color"
 }
}

#tab-content-slices > canvas
{
 vertical-align:top;
 margin:0.25em 0
}

#tab-content-output > textarea
{
 font-family:monospace;
 font-size:var(--font-size-text);
 line-height:var(--line-height-text);
 white-space:pre;
 overflow:auto;
 padding:0;
 margin:0 0.5em;
 width:calc(100% - 1em);
 min-height:250px;
 border:0;
 outline:0
}