asb_cloud_front/src/styles/smbo.css

.smbo_container{
    display: grid;
    column-gap: 4px;
    row-gap: 4px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows:  1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    justify-items: stretch;
    align-items: stretch;
}

.smbo_rig_plan{
    grid-column-start: 2;
    grid-row-start: 2;
}

.plate_container{
    background-color: #00000010;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows:  auto;
    padding: 6px;
    margin: 4px;
    height: 100%;
    width: 100%;
}

.plate_title{
    grid-column: 1 / span 2;
    grid-row: 1 / 1;
    font-weight: bold;
}

.plate_state{
    grid-column: 3 / span 1;
    grid-row: 1 / span 1;
}

.plate_param{
    grid-row: 2 / span 1;
}

.plate_param_title{
    grid-column: 1 / span 1;
}

.plate_param_value{
    grid-column: 2 / span 1;
    font-weight: bold;
    place-self: start end;
    margin-right: 4px;
}

.plate_param_units{
    grid-column: 3 / span 1;
}

.c1{  grid-column-start: 1; }
.c2{  grid-column-start: 2; }
.c3{  grid-column-start: 3; }
.c4{  grid-column-start: 4; }
.c5{  grid-column-start: 5; }
.c6{  grid-column-start: 6; }
.c7{  grid-column-start: 7; }
.c8{  grid-column-start: 8; }

.r1{  grid-row-start: 1; }
.r2{  grid-row-start: 2; }
.r3{  grid-row-start: 3; }
.r4{  grid-row-start: 4; }
.r5{  grid-row-start: 5; }
.r6{  grid-row-start: 6; }
.r7{  grid-row-start: 7; }
.r8{  grid-row-start: 8; }

.cspan-4{ grid-column-end: 4 start;}

.rspan-6{ grid-row-end: 6 start;}

.rspan-7{ grid-row-end: 7 start;}

.center{
    place-self: center stretch;
}