#flatroof {
    --control-row-space: 6px;
}

#flatroof .tab-container {
    max-width: 1132px;
}

#flatroof .control-row {
    margin: var(--control-row-space) 0;
}

#flatroof-single-options {
    display: grid;
    grid-row-gap: var(--control-row-space);
    grid-column-gap: 12px;
    grid-template-columns: repeat(3, minmax(20em, max-content));
    grid-template-areas:
        "subtypes           subtypes           subtypes"
        "num-outlets        grating-type       dummy1"
        "sump-depth         spigot-jointing    spigot-orientation"
        "outlet-diameter    dummy2             dummy3";
}

#flatroof-outlet-subtype {
    grid-area: subtypes;
}

#flatroof-num-outlets {
    grid-area: num-outlets;
}

#flatroof-grating-type {
    grid-area: grating-type;
}

#flatroof-sump-depth {
    grid-area: sump-depth;
}

#flatroof-spigot-jointing {
    grid-row: 3;
}

#flatroof-orientation {
    grid-row: 3;
}

#flatroot-outlet-diameter {
    grid-area: outlet-diameter;
}

#flatroof-project-data {
    display: grid;
    grid-row-gap: var(--control-row-space);
    grid-column-gap: 12px;
    grid-template-columns: repeat(3, minmax(5em, max-content));
    grid-template-areas:
        "header             areas                area-reference"
        "roof-slope         roof-slope           design-rainfall"
        "safety-factor      building-life        dummy"
        "roof-dimensions    roof-dimensions    roof-dimensions"
}

#flatroof-project-data-header {
    grid-area: header;
    padding: 0;
    margin: 0;
}

#flatroof-project-data-areas {
    grid-area: areas;
}

#flatroof-project-data-area-reference {
    grid-area: area-reference;
}

#flatroof-project-data-roof-slope {
    grid-area: roof-slope;
}

#flatroof-project-data-design-rainfall {
    grid-area: design-rainfall;
}

#flatroof-project-data-safety-factor {
    grid-area: safety-factor;
}

#flatroof-project-data-building-life {
    grid-area: building-life;
}

#flatroof-project-data-roof-dimensions {
    display: flex;
    grid-area: roof-dimensions;
}

#flatroof-project-data-roof-dimensions > * {
    margin-right: 2em;
}

#flatroof-project-data-roof-length {
    grid-area: roof-length;
}

#flatroof-project-data-roof-width {
    grid-area: roof-width;
}

#flatroof-project-data-roof-area {
    grid-area: roof-area;
}

table.flatroof-results {
    margin-left: 24px;
    white-space: nowrap;
}

table.flatroof-results td {
    padding-right: 4em;
}

.grid-container {
    display: grid;
    gap: 1px 1px;
}

.grid-container.harmer {
    grid-template-columns: 120px 90px 60px 60px 60px 60px 60px 100px 160px auto auto auto auto auto;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
  "no_outlets outlets_inp outlets_inp outlets_inp outlets_inp outlets_inp blank_1 blank_1 spigot_jointing jointing_opts  jointing_opts blank_1a blank_1a blank_1a"
  "blank_2 blank_2 blank_2 blank_2 blank_2 blank_2 blank_2 blank_2 spigot_orientation spigot_opts spigot_opts spigot_opts spigot_opts spigot_opts"
  "sump_depth depth depth blank_3 blank_3 blank_3 blank_3 blank_3 grating_type grating_opts grating_opts grating_opts grating_opts grating_opts"
  "blank_4 blank_4 blank_4 blank_4 blank_4 blank_4 blank_4 blank_4 grating_loading grating_loading_opts grating_loading_opts grating_loading_opts grating_loading_opts grating_loading_opts"
  "outlet_diameters diameters diameters diameters diameters diameters diameters diameters flange flange_opts flange_opts flange_opts flange_opts flange_opts"
  "blank_6 blank_6 blank_6 blank_6 blank_6 blank_6 blank_6 blank_6 grating_material grating_material_opts grating_material_opts grating_material_opts grating_material_opts grating_material_opts";
}

.grid-container.harmer .grating_loading,
.grid-container.harmer .grating_loading_opts,
    /*.grid-container.harmer .grating_material,*/
    /*.grid-container.harmer .grating_material_opts,*/
.grid-container.harmer .roof_system,
.grid-container.harmer .roof_system_opts {
    display: none;
}

.grid-container.wade {
    display: grid;
    grid-template-columns: 120px 90px 60px 60px 60px 60px 60px 100px 160px auto auto auto auto auto;
    grid-template-rows: auto auto auto auto auto;
    gap: 1px 1px;
    grid-template-areas:
  "no_outlets outlets_inp outlets_inp outlets_inp outlets_inp outlets_inp blank_1 spigot_jointing jointing_opts  jointing_opts blank_3 blank_3 blank_3 blank_3"
    "blank_4 blank_4 blank_4 blank_4 blank_4 blank_4 blank_4 roof_system roof_system_opts roof_system_opts roof_system_opts roof_system_opts roof_system_opts roof_system_opts"
    "sump_depth depth depth blank_5 blank_5 blank_5 blank_5 spigot_orientation spigot_opts spigot_opts spigot_opts spigot_opts spigot_opts spigot_opts"
    "outlet_diameters diameters diameters diameters diameters diameters diameters grating_type grating_opts grating_opts grating_opts grating_opts grating_opts grating_opts"
    "blank_6 blank_6 blank_6 blank_6 blank_6 blank_6 blank_6 grating_loading grating_loading_opts grating_loading_opts grating_loading_opts grating_loading_opts grating_loading_opts grating_loading_opts"
    "blank_6 blank_6 blank_6 blank_6 blank_6 blank_6 blank_6 grating_material grating_material_opts grating_material_opts grating_material_opts grating_material_opts grating_material_opts grating_material_opts";
}

.grid-container.wade .flange, .grid-container.wade .flange_opts {
    display: none;
}

.spigot_jointing {
    grid-area: spigot_jointing;
}

.jointing_opts {
    grid-area: jointing_opts;
}

.flange {
    grid-area: flange;
}

.spigot_orientation {
    grid-area: spigot_orientation;
}

.no_outlets {
    grid-area: no_outlets;
}

.outlets_inp {
    grid-area: outlets_inp;
}

.manually_set {
    grid-area: manually_set;
}

.grating_type {
    grid-area: grating_type;
}

.grating_loading {
    grid-area: grating_loading;
}

.sump_depth {
    grid-area: sump_depth;
}

.depth {
    grid-area: depth;
}

.roof_system {
    grid-area: roof_system;
}

.outlet_diameters {
    grid-area: outlet_diameters;
}

.diameters {
    grid-area: diameters;
}

.flange_opts {
    grid-area: flange_opts;
}

.spigot_opts {
    grid-area: spigot_opts;
}

.blank_1 {
    grid-area: blank_1;
}

.grating_opts {
    grid-area: grating_opts;
}

.blank_2 {
    grid-area: blank_2;
}

.grating_loading_opts {
    grid-area: grating_loading_opts;
}

.grating_material_opts {
    grid-area: grating_material_opts;
}

.grating_material {
    grid-area: grating_material;
}

.material_opts {
    grid-area: material_opts;
}

.blank_3 {
    grid-area: blank_3;
}

.roof_system_opts {
    grid-area: roof_system_opts;
}

.spigot_opt {
    grid-area: spigot_opt;
}
 input.invalid, .disabled {
     background-color: #faa;
 }