#statbox {
    position: absolute;
    lowest: .5em;
    right: .5em;
}
.Warehouse {
    border: 1px dashed black;
    display: inline-block;
    padding: .8em;
}
.Product {
    border: .5px solid lightgrey;
    display: inline-block;    
    padding: .2em;
    display: grid;
    grid: auto-flow;
    grid-template-columns: Black Caramel Chocolate Coffee;
    grid-template-rows: iP6 iP7
}
.Color {
    color: orange;
   /* display: inline-block; */
}
.Phone {
  /*  display: inline-block; */
}
.Color {
  /*  display: inline-block; */
}
.Phone > label {
    color: blue;
}
.Color > label {
    transform: rotate(80deg);
}
.SKU {
    border: .5px solid lightgray;
    padding: .1em;
}
.SKU > label {
    color: green;
    font-size: 100%;
    display: none;
}
/*  An attempt to control with appearance with data-
.SKU > label:hover {
    content: attr(data-phone);
}
*/
/*
input.lowerColorBound {
    grid-column-start: lowest;
    grid-column-end: lower;
    grid-row: bounds;
}
.colorController input[type=color] {
    grid-row: colors;
    border: 1em dashed yellow;
}
.colorController input[type=range] {
    grid-row: bounds;
    border: 1em dashed pink;    
}
input.lowerColorBound::before {
    content: attr(value);
    font-size: 1.7em;
}

*/

.colorController {
    display: inline-grid;
    grid-template-columns:
      [lowest] auto [lower] auto [higher] auto [highest];
    grid-template-rows:
      [colors] auto [bounds] auto [gradient];
}
input.higherColorBound::before, input.lowerColorBound::after {
    content: attr(value);
    font-size: 1.7em;
}
.colorController .lowestColor {
    grid-column: lowest;
    grid-row: colors;
}
.colorController .lowerColor {
    grid-column: lower;
    grid-row: colors;
}
.colorController .higherColorBound {
    grid-column: span 2;
    grid-row: bounds;
}
.colorController .lowerColorBound {
    grid-column: span 2;
    grid-row: bounds;
}
.colorController .higherColor {
    grid-column: higher;
    grid-row: colors;
}
.colorController .highestColor {
    grid-column: highest;
    grid-row: colors;    
}
.gradientController {
    height: 1em;
    width: 100%;
    grid-row: gradient;
    grid-column: span 4;
    background-image: linear-gradient(to right,
				      #ff0000, #ff0000,
				      #ff8111, #e5ff00,
				      #00ff00, #00ff00);
}

/*
    COLUMNS: lowest      lower       higher     highest      
ROWS:
colors    lowestColor lowerColor higherColor highestColor
bounds       lowerColorBound       higherColorBound
gradient               gradientController
*/

#inspector {
    position:absolute;
    bottom: .2em;
    left: .2em;
    background-color: grey;
    overflow: scroll;
    height: 50%;
    width: 40%;
    display: none;
}
#inspector::before {
    content: 'x';
    color: black;
    background-color: red;
    font-size: 2em;
    position:absolute;
    top: 0px;
    right: 0px;
}