.gridFocus {
display: grid;
gap: 5px 10px;
text-align: center;
grid-template: "image image" "label1 label2"/1fr 1fr;
}
.gridFocus .radio {
display: none;
}
.gridFocus #focusDesktopImage {
width: 100%;
}
.gridFocus #focusMobileLongImage, .gridFocus #focusMobileUltrashortImage {
display: none;
}
.gridWidth {
display: grid;
grid-template-rows: [r1] 48% [r2] auto [r3];
grid-template-columns: [c1] 44% [c2] 110px [c3] auto [c4];
}
.gridWidth #widthDesktopImage {
width: 100%;
grid-area: r1/c1/r3/c4;
}
.gridWidth #widthMobileImage {
display: none;
}
.gridWidth #widthInput {
grid-area: r1/c2/r2/c3;
width: 100px;
height: 21px;
justify-self: center;
align-self: self-end;
font-weight: bold;
text-align: center;
color: black;
border: 1px solid gray;
}
.gridWidth #widthInputLabel {
grid-area: r1/c3/r2/c4;
color: black;
justify-self: start;
align-self: self-end;
}
.gridAnsi {
display: grid;
-moz-column-gap: 10px;
column-gap: 10px;
grid-template: "input label" 24px/80px 200px;
}
.gridAnsi #ansi {
height: auto;
color: black;
}
.gridAnsi #ansiLabel {
color: #f6bd25;
}
.gridAspect {
display: grid;
gap: 5px 10px;
text-align: center;
grid-template: "image1 image2 image3" "value1 value2 value3" "desc1  desc2  desc3"/1fr 1fr 1fr;
}
.gridAspect .radioLabelMobile, .gridAspect .radio {
display: none;
}
.gridMode {
display: grid;
gap: 5px 10px;
text-align: center;
grid-template: "image1 image2 image3" "value1 value2 value3" "desc1  desc2  desc3"/1fr 1fr 1fr;
}
.gridMode .radioLabelMobile, .gridMode .radio {
display: none;
}
.gridBlackout {
display: grid;
gap: 5px 10px;
text-align: center;
grid-template: "image1 image2 image3" "value1 value2 value3" "desc1  desc2  desc3"/1fr 1fr 1fr;
}
.gridBlackout .radioLabelMobile, .gridBlackout .radio {
display: none;
}
.gridCheckBlocks {
display: grid;
gap: 5px 10px;
grid-template: "title title title" ". focus focus" ". width width" ". ansi ansi" ". aspect aspect" ". mode mode" ". blackout blackout"/33% auto 33%;
}
.gridPaint {
display: grid;
gap: 10px 30px;
grid-template: "image caption" "image desc" "image alert" "image volume" "image cart"/1fr 3fr;
}
.gridPaint #paintImage img {
width: 100%;
}
.gridPaint #paintDescription {
font-style: italic;
font-weight: normal;
align-self: center;
}
.gridPaint #paintVolumeValue {
font-weight: bold;
color: #f6bd25;
}
.gridPaint #paintOrderButton {
margin-left: auto;
}
.gridWall {
display: grid;
grid-template-columns: [c1] auto [c2] 110px [c3] 7% [c4] 110px [c5] 5% [c6] 50% [c7];
grid-template-rows: [r1] 38% [r2] 31px [r3] 5% [r4] 30px [r5] auto [r6];
}
.gridWall #wallImage {
grid-area: r1/c1/r5/c6;
width: 100%;
}
.gridWall #wallWidth {
grid-area: r4/c2/r5/c3;
width: 80px;
height: 21px;
justify-self: center;
align-self: self-end;
font-weight: bold;
text-align: center;
color: black;
}
.gridWall #wallHeight {
grid-area: r2/c4/r3/c5;
width: 80px;
height: 21px;
justify-self: center;
align-self: self-end;
font-weight: bold;
text-align: center;
color: black;
}
.gridWall #wallVolume {
grid-area: r2/c6/r6/c7;
text-align: left;
}
.gridWall #wallVolume #wallVolumeValue {
font-weight: bold;
color: #f6bd25;
}
.gridWall #wallVolume #wallOrderButton {
justify-self: end;
align-self: center;
}
.gridAdded {
display: grid;
gap: 10px 30px;
grid-template: "image1 title1" "image1 desc1" "image1 volume1" "image1 cart1"/1fr 2fr;
}
.gridAdded img {
max-width: 100%;
}
.gridAdded #primerDescription, .gridAdded #anzaDescription {
font-style: italic;
font-weight: normal;
align-self: self-start;
}
.gridAdded #primerVolumeValue, .gridAdded #anzaVolumeValue {
font-weight: bold;
color: #f6bd25;
}
.gridAdded #primerOrderButton, .gridAdded #anzaOrderButton {
margin-left: auto;
}
.gridLocation {
display: grid;
grid-template: "image"/80%;
}
.gridLocation #locationImage img {
width: 100%;
}
.gridLocation #locationLength {
position: absolute;
left: 41%;
top: 32%;
width: 70px;
height: 21px;
color: black;
}
.gridLocation #locationLengthValue {
position: absolute;
left: 51%;
top: 31%;
color: white;
}
.gridResolution {
display: grid;
gap: 5px 50px;
text-align: center;
grid-template: "image1 image2 image3 image4 image5"/1fr 1fr 1fr 1fr 1fr;
}
.gridResolution .radio {
display: none;
}
.gridResolution img {
width: 100%;
}
.gridQuality {
display: grid;
grid-template: ". screenHeader ." ". screenBody ." ". angleHeader ." ". angleBody ." ". totalHeader ." ". totalBody ."/20% 60% 20%;
}
.gridQuality > div {
padding: 5px;
border: 1px solid white;
}
.gridScreen {
display: grid;
grid-template: "image"/1fr;
font-weight: bold;
text-align: center;
}
.gridScreen img {
width: 100%;
}
.gridScreen #screenHeight {
color: rgb(91, 155, 213);
position: absolute;
left: 5%;
top: 41%;
width: 70px;
}
.gridScreen #screenWidth {
color: red;
position: absolute;
left: 44%;
top: 80%;
width: 70px;
}
.gridScreen #screenDiagonal {
color: green;
position: absolute;
left: 43%;
top: 42%;
width: 70px;
}
.gridScreen #screenSquare {
color: black;
position: absolute;
left: 78%;
top: 51%;
border: 2px solid black;
padding: 15px 10px;
width: 115px;
}
.gridAngle {
display: grid;
gap: 0px 5px;
grid-template: "image1 image2" "desc desc" "alert alert"/3fr 1.3fr;
}
.gridAngle img {
width: 100%;
}
.gridAngle #angleInfo {
position: absolute;
left: 60%;
top: 41%;
width: 70px;
text-align: center;
}
.gridAngle #angleImage1 {
padding: 5px;
border: 1px solid white;
}
.gridAngle #angleImage2 {
justify-self: center;
align-self: center;
}
.gridTotal {
display: grid;
row-gap: 5px;
grid-template: "totalResolution" "totalIllumination";
}
.gridTotal .gridTotalResolution {
display: grid;
padding: 10px;
border: 1px solid white;
-moz-column-gap: 10px;
column-gap: 10px;
grid-template: "image alert" "image desc"/1fr 3fr;
}
.gridTotal .gridTotalResolution #totalResolutionImage {
align-self: center;
justify-self: center;
}
.gridTotal .gridTotalResolution #totalResolutionImage img {
width: 100%;
}
.gridTotal .gridTotalIllumination {
display: grid;
padding: 10px;
border: 1px solid white;
-moz-column-gap: 10px;
column-gap: 10px;
grid-template: "image info" "image alert" "image desc"/1fr 3fr;
}
.gridTotal .gridTotalIllumination #totalIlluminationImage {
align-self: center;
justify-self: center;
}
.gridTotal .gridTotalIllumination #totalIlluminationImage img {
width: 100%;
}