form {
    background: rgba(225, 231, 239, 0.96);
    border: 1px solid rgba(47, 58, 74, 0.18);
    border-radius: 1rem;
    box-shadow: 0 0.75rem 1.8rem rgba(32, 41, 53, 0.16);
    width: max-content;
    margin: 0 auto;
    padding: 0.75rem 0.95rem 0.95rem;
}

form, select, input, textarea {
    font-family: "Series E";
    font-size: 1rem;
}

select, input, textarea, label, legend {
    width: 7.5rem;
    margin: 0;
}

select, input, textarea {
    background-color: rgb(238, 238, 238);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 0.48rem;
    box-sizing: border-box;
    min-height: 2.05rem;
    padding: 0.3rem 0.52rem;
    color: #111;
}

select {
    background: rgb(238, 238, 238) url(../img/select.svg) no-repeat right 0.42rem center;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 1.5rem;
}

input[type=button] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background-color 0.18s, box-shadow 0.18s, transform 0.12s;
    background: linear-gradient(to bottom, rgb(244, 244, 244), rgb(222, 222, 222));
    border-color: rgba(0, 0, 0, 0.2);
}
input[type=button]:hover {
    background: linear-gradient(to bottom, rgb(236, 236, 236), rgb(209, 209, 209));
    box-shadow: 0 0.18rem 0.45rem rgba(0, 0, 0, 0.12);
}
input[type=button]:active {
    transform: translateY(1px);
}
input[type=checkbox] {
    width: auto;
    min-height: 0;
}
textarea {
    min-width: 15.5rem;
    resize: vertical;
}

label {
    text-align: left;
    display: inline-block;
    font-size: 0.98rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: #111;
}

.shiftButton {
    width: 3.5rem;
}

#shieldBacksLabel {
    width: auto;
}

fieldset {
    border: none;
    margin: 0.5rem 0;
}

#shields div {
    border-radius: 0.25rem;
    width: intrinsic;
    width: -webkit-max-content;
    width: -moz-max-content;
    margin-left: 0.25rem;
}
#shields div:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.33);
}
#shields label, #shields select:first-of-type {
    width: auto;
}
#shields label {
    margin: 0;
}

#controlCitiesLabel {
    position: relative;
    top: -5rem;
}

#guideArrowLanes {
    width: 2.25rem;
}

#actionMessage {
    width: 15.75rem;
}
#oSNum {
    margin-left: 8.5rem;
}

input[value="New Shield"], input[value="New Sign"] {
    margin-bottom: 0.75rem;
}
input[value=Delete]:hover {
    background-color: rgb(255, 208, 208);
}


.topButtonGrid {
    display: grid;
    grid-template-columns: 10.65rem 10.65rem;
    column-gap: 0.6rem;
    row-gap: 0.5rem;
    align-items: stretch;
    width: max-content;
    margin-bottom: 0.85rem;
}
.topButtonGrid input[type="button"] {
    width: 100%;
    min-height: 2.15rem;
    padding: 0.25rem 0.45rem;
    font-weight: 700;
    letter-spacing: 0.015em;
}
.shiftPair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.6rem;
    width: 100%;
}
.shiftPair .shiftButton {
    width: 100%;
}

.staticControlRows {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.46rem;
    padding: 0.72rem 0.78rem;
    margin-bottom: 0.78rem;
    border-radius: 0.82rem;
    background: rgba(255, 255, 255, 0.54);
    border: 1px solid rgba(47, 58, 74, 0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}
.formRow {
    display: grid;
    grid-template-columns: 6.5rem 9.7rem;
    align-items: center;
    column-gap: 0.8rem;
}
.formRow label {
    width: auto;
}

#postPosition,
#panelEditing,
#panelColor,
#shieldsPosition,
#exitNumber,
#exitTabMode {
    width: 9.7rem;
    min-width: 9.7rem;
}

.dynamicEditor {
    min-height: 10rem;
    margin-top: 0.12rem;
    display: grid;
    gap: 0.62rem;
}
.modeCard {
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid rgba(47, 58, 74, 0.10);
    border-radius: 0.84rem;
    padding: 0.7rem 0.75rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.58);
}
.modeCard h3 {
    font-size: 1rem;
    margin: 0.08rem 0 0.55rem 0.1rem;
    color: #111;
}
.shieldConfigGrid {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    flex-wrap: nowrap;
}
.shieldConfigStack {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-items: stretch;
}
.shieldConfigUnit {
    display: grid;
    align-items: center;
    justify-items: stretch;
    column-gap: 0.82rem;
    row-gap: 0.34rem;
    padding: 0.58rem 0.7rem 0.62rem;
    border-radius: 0.72rem;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(47,58,74,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.74);
}
.shieldConfigUnit.aboveBelow {
    grid-template-columns: 8.1ch 8.1ch 8.1ch;
    grid-template-areas:
      ". top ."
      "left type right"
      ". number .";
}
.shieldConfigUnit.sideMode.leftModeUnit {
    grid-template-columns: 8.1ch 8.1ch 9.2rem;
    grid-template-areas:
      ". top ."
      "left type right"
      ". number .";
}
.shieldConfigUnit.sideMode.rightModeUnit {
    grid-template-columns: 9.2rem 8.1ch 8.1ch;
    grid-template-areas:
      ". top ."
      "left type right"
      ". number .";
}
.shieldConfigUnit .btbTop { grid-area: top; }
.shieldConfigUnit .btbLeft { grid-area: left; }
.shieldConfigUnit .shieldType {
    grid-area: type;
    width: 8.1ch;
    min-width: 8.1ch;
    justify-self: center;
}
.shieldConfigUnit .btbRight,
.shieldConfigUnit .ebtbField,
.shieldConfigUnit .ebtbLeft { grid-area: right; }
.shieldConfigUnit.rightModeUnit .ebtbLeft { grid-area: left; }
.shieldConfigUnit.rightModeUnit .btbRight { grid-area: right; }
.shieldConfigUnit .numberBox {
    grid-area: number;
    width: 5.8ch;
    min-width: 5.8ch;
    text-align: center;
    justify-self: center;
}
.shieldConfigUnit .btbTop,
.shieldConfigUnit .btbLeft,
.shieldConfigUnit .btbRight {
    width: 8.1ch;
    min-width: 8.1ch;
    text-align: center;
    letter-spacing: 0.02em;
}
.shieldConfigUnit .fieldPlaceholder {
    visibility: hidden;
}
.shieldConfigUnit .ebtbField,
.shieldConfigUnit .ebtbLeft {
    width: 9.2rem;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    text-transform: none;
}
.shieldConfigUnit .btbTop,
.shieldConfigUnit .numberBox {
    justify-self: center;
}
.shieldConfigUnit.locked {
    opacity: 0.55;
}
.shieldConfigUnit input:disabled,
.shieldConfigUnit select:disabled,
.modeCard textarea:disabled {
    opacity: 0.6;
}
.modeCard textarea.modeControlText {
    width: 100%;
    min-width: 0;
    height: 8.25rem;
    display: block;
}
.modeCard .bottomControls label {
    width: auto;
    text-align: left;
}
.modeCard .bottomControls input[type="text"] {
    width: 12.5rem;
}
.modeCard .bottomControls input[type="number"] {
    width: 3rem;
}
.modeCard .bottomControls.controlsOnly {
    margin-top: 0;
}
.modeCard .bottomControls.controlOnly {
    padding-top: 0.32rem;
}
.modeCard .bottomControls.controlOnly label,
.modeCard .modeCard h3 {
    display: none;
}

.bottomControlsGrid {
    display: grid;
    gap: 0.5rem;
}
.bottomControlRow {
    display: grid;
    grid-template-columns: 7.5rem 12.9rem;
    align-items: center;
    column-gap: 0.72rem;
}
.arrowCluster {
    display: inline-grid;
    grid-template-columns: 9rem 3.4rem;
    gap: 0.5rem;
    align-items: center;
    justify-content: start;
    width: 12.9rem;
}
#modeGuideArrow {
    width: 9rem;
    min-width: 9rem;
}
#modeGuideArrowLanes {
    width: 3.4rem;
    min-width: 3.4rem;
    text-align: center;
}
#modeActionMessage {
    width: 12.9rem;
    min-width: 12.9rem;
}

.leftmode .enhancedSideText,
.leftmode .enhancedInner,
.rightmode .enhancedSideText,
.rightmode .enhancedInner {
    text-align: left;
    justify-content: flex-start;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(53, 95, 170, 0.45);
    outline-offset: 1px;
    box-shadow: 0 0 0 2px rgba(53, 95, 170, 0.14);
}


form.soloUiLock #newPanelButton,
form.soloUiLock #duplicateButton,
form.soloUiLock #shiftLeftButton,
form.soloUiLock #shiftRightButton,
form.soloUiLock label[for="panelEditing"],
form.soloUiLock #panelEditing {
    color: #ff1f1f;
    -webkit-text-fill-color: #ff1f1f;
}

form.soloUiLock #newPanelButton,
form.soloUiLock #duplicateButton,
form.soloUiLock #shiftLeftButton,
form.soloUiLock #shiftRightButton {
    background-image: none;
}

form.soloUiLock #newPanelButton:disabled,
form.soloUiLock #duplicateButton:disabled,
form.soloUiLock #shiftLeftButton:disabled,
form.soloUiLock #shiftRightButton:disabled,
form.soloUiLock #panelEditing:disabled {
    color: #ff1f1f;
    -webkit-text-fill-color: #ff1f1f;
    opacity: 1;
}

form.soloUiLock #panelEditing,
form.soloUiLock #panelEditing:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolygon fill='%23ff1f1f' points='5.5,6.2 10,13.8 14.5,6.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.42rem center;
    background-size: auto;
}



.shieldConfigUnit .specShieldSelect {
    grid-area: number;
    width: 12rem;
    min-width: 12rem;
    justify-self: center;
}