#postContainer {
    display: flex;
    flex-direction: row;
    min-height: 30rem;
    height: auto;
    padding: 2.5rem 0 0.9rem;
    overflow: visible;
    border: none;
    border-radius: 0;
    background: rgb(134, 169, 236);
    min-width: max-content;
    box-shadow: none;
    width: 100%;
    justify-content: center;
}
#postContainer.polePositionOverhead .post {
	visibility: visible;
}
#postContainer.polePositionLeft .post:last-child,
#postContainer.polePositionRight .post:first-child,
#postContainer.polePositionRural .post,
#postContainer.polePositionSolo .post,
#postContainer.polePositionCenter .post {
	visibility: hidden;
}

#postContainer.polePositionLeft #panelContainer,
#postContainer.polePositionRight #panelContainer,
#postContainer.polePositionOverhead #panelContainer {
	background: linear-gradient(
		180deg,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,0) 47%,
		rgba(191,191,191,1) 47%,
		rgba(240,240,240,1) 49%,
		rgba(128,128,128,1) 52%,
		rgba(255,255,255,0) 52%,
		rgba(255,255,255,0) 64%,
		rgba(191,191,191,1) 64%,
		rgba(240,240,240,1) 66%,
		rgba(128,128,128,1) 69%,
		rgba(255,255,255,0) 69%
	);
	height: 12rem;
}
#postContainer.polePositionRural #panelContainer,
#postContainer.polePositionSolo #panelContainer {
	background: none;
	position: relative;
	margin-top: 0;
	padding-left: 0;
	padding-right: 0;
	min-height: auto;
	align-items: flex-end;
}
#postContainer.polePositionRural .panel,
#postContainer.polePositionSolo .panel {
	margin-top: 0;
	padding-bottom: 8rem;
	z-index: 1;
}
#postContainer.polePositionRural .signContainer,
#postContainer.polePositionSolo .signContainer {
	position: relative;
}
#postContainer.polePositionRural .signContainer::before,
#postContainer.polePositionRural .signContainer::after,
#postContainer.polePositionSolo .signContainer::before,
#postContainer.polePositionSolo .signContainer::after {
	content: "";
	position: absolute;
	top: calc(100% - 0.12rem);
	width: 1.35rem;
	height: 8rem;
	background: linear-gradient(
		90deg,
		rgb(191, 191, 191) 0%,
		rgb(240, 240, 240) 40%,
		rgb(128, 128, 128) 100%
	);
	z-index: 1;
}
#postContainer.polePositionRural .signContainer::before,
#postContainer.polePositionSolo .signContainer::before {
	left: 20%;
	transform: translateX(-50%);
}
#postContainer.polePositionRural .signContainer::after,
#postContainer.polePositionSolo .signContainer::after {
	right: 20%;
	transform: translateX(50%);
}
#postContainer.polePositionCenter #panelContainer {
	background: linear-gradient(
		90deg,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,0) 45%,
		rgba(191,191,191,1) 45%,
		rgba(240,240,240,1) 49%,
		rgba(128,128,128,1) 55%,
		rgba(255,255,255,0) 55%
	);
	margin-top: 5.5rem;
}

.post {
	background: linear-gradient(
		90deg,
		rgb(191, 191, 191) 0%,
		rgb(240, 240, 240) 40%,
		rgb(128, 128, 128) 100%
	);
	width: 1rem;
	height: 18rem;

	align-self: flex-end;
}
#postContainer.polePositionLeft .post,
#postContainer.polePositionRight .post,
#postContainer.polePositionOverhead .post {
	height: 22rem;
}
.post:first-child {
	margin-left: auto;
}
.post:last-child {
	margin-right: auto;
}

#panelContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-top: 0.9rem;
	overflow: visible;
		width: -moz-max-content;
		width: -webkit-max-content;
	width: intrinsic;
	z-index: 0;
}

.panel {
	text-align: center;

	display: block;
	padding: 0 0.5rem;

	position: relative;
}
.panel:first-child {
	padding-left: 1rem;
}
.panel:last-child {
	padding-right: 1rem;
}

#postContainer.polePositionCenter .panel {
	margin-top: -22.5rem;
}
#postContainer.polePositionRural .panel:not(:first-child),
#postContainer.polePositionCenter .panel:not(:first-child) {
	display: none;
}

.panel.green .exitTab,
.panel.blue .exitTab,
.panel.brown .exitTab,
.panel.black .exitTab,
.panel.green .sign,
.panel.blue .sign,
.panel.brown .sign,
.panel.black .sign,
.panel.green .guideArrows,
.panel.blue .guideArrows,
.panel.brown .guideArrows,
.panel.black .guideArrows {
	color: var(--white);
	border-color: var(--white);
}
.panel.white .exitTab,
.panel.yellow .exitTab,
.panel.white .sign,
.panel.yellow .sign,
.panel.white .guideArrows,
.panel.yellow .guideArrows {
	color: var(--black);
	border-color: var(--black);
}

.panel.green .exitTab,
.panel.green .sign,
.panel.green .signContainer,
.panel.green .exitTabContainer,
.panel.green .guideArrows {
	background-color: var(--green);
}
.panel.blue .exitTab,
.panel.blue .sign,
.panel.blue .signContainer,
.panel.blue .exitTabContainer,
.panel.blue .guideArrows {
	background-color: var(--blue);
}
.panel.brown .exitTab,
.panel.brown .sign,
.panel.brown .signContainer,
.panel.brown .exitTabContainer,
.panel.brown .guideArrows {
	background-color: var(--brown);
}
.panel.yellow .exitTab,
.panel.yellow .sign,
.panel.yellow .signContainer,
.panel.yellow .exitTabContainer,
.panel.yellow .guideArrows {
	background-color: var(--yellow);
}
.panel.white .exitTab,
.panel.white .sign,
.panel.white .signContainer,
.panel.white .exitTabContainer,
.panel.white .guideArrows {
	background-color: var(--white);
}
.panel.black .exitTab,
.panel.black .sign,
.panel.black .signContainer,
.panel.black .exitTabContainer,
.panel.black .guideArrows {
	background-color: var(--black);
}

.exitTab {
	border-radius: 0.5rem 0.5rem 0 0;
	border-top-style: solid;
	border-top-width: 0.2rem;
	border-right-style: solid;
	border-right-width: 0.2rem;
	border-bottom: none;
	border-left-style: solid;
	border-left-width: 0.2rem;

	font-size: 1rem;

	visibility: hidden; /* hides exitTab by default when loading page */
	float: none;
	min-height: 2.25rem;
	padding: 0 0.5rem 0rem 0.5rem;
}
.exitTab.narrow,
.exitTab.edge {
		width: -moz-max-content;
		width: -webkit-max-content;
		width: intrinsic;
	width: max-content;
}

.exitTabContainer.wide, 
.exitTabContainer.narrow {
	margin-right: 0.75rem; /* Margin keeps the edge of the tab from going above the */
	margin-left: 0.75rem; /* curved corners of the panel below */
}
.exitTabContainer.edge.right {
	margin-right: 0rem;
}
.exitTabContainer.edge.left {
	margin-left: 0rem;
}
.narrow.center,
.edge.center {
	margin: auto;
}
.exitTabContainer,
.signContainer {
	z-index: 2;	
}
.signContainer,
.exitTabContainer.narrow,
.exitTabContainer.edge {
	width: max-content;
}
.exitTabContainer.narrow.left,
.exitTabContainer.edge.left {
	margin-right: auto;
}
.exitTabContainer.narrow.right,
.exitTabContainer.edge.right {
	margin-left: auto;
}
.exitTab.wide.left,
.exitTab.full.left {
	justify-content: flex-start;
}
.exitTab.wide.center,
.exitTab.full.center {
	justify-content: center;
}
.exitTab.wide.right,
.exitTab.full.right {
	justify-content: flex-end;
}
.exitTab.full {
	margin-left: 0rem;
	margin-right: 0rem;
	border-radius: 0.75rem 0.75rem 0 0;
}
.sign.exit-full.tabVisible {
	border-radius: 0 0 0.75rem 0.75rem;
}
.sign.exit-edge.exit-right.tabVisible {
	border-radius: 0.75rem 0 0.75rem 0.75rem;
}
.sign.exit-edge.exit-left.tabVisible {
	border-radius: 0 0.75rem 0.75rem 0.75rem;
}
.sign {
	border-radius: 0.75rem;
	border-style: solid;
	border-width: 0.2rem;
	display: flex;
	clear: both;
	flex-direction: row;
	visibility: visible;
}
.panel.round .exitTabContainer,
.panel.round .signContainer {
	visibility: hidden;
}
.panel .exitTabContainer {
	visibility: hidden;
}
.panel .tabVisible {
	visibility: visible;
}
.sideLeftArrow, .sideRightArrow {
	font-family: "Arrows One";
	font-size: 5rem; /* Makes arrows large and visble */
	line-height: 0.1rem; /* Makes space text (arrow) takes up minimal */

	display: none;
	margin-top: auto;
	margin-bottom: auto;
}

.sideLeftArrow {
	padding: 0 0.1rem 3.25rem 0.75rem; /* Patting bumped up on the bottom to bump arrow up from the bottom edge */
		-moz-transform: rotate(15deg);
		-o-transform: rotate(15deg);
		-webkit-transform: rotate(15deg);
	transform: rotate(15deg);
}

.sideRightArrow {
	padding: 0 0.75rem 3rem 0.1rem; /* Patting bumped up on the bottom to bump arrow up from the bottom edge */
		-moz-transform: rotate(-15deg);
		-o-transform: rotate(-15deg);
		-webkit-transform: rotate(-15deg);
	transform: rotate(-15deg);
}

.sign.hasExactSideArrow .signContentContainer {
	width: auto;
	min-width: 0;
	flex: 1 1 auto;
}

.signContentContainer {
	display: flex;
	width: 100%;
	padding: 0.5rem 0.75rem 0.5rem 0.75rem;
}

/*
 * Arrange content within the sign depending on the shield position.  For
 * "Above" and "Below", the content is stacked vertically in the natural
 * order.  For "Left" and "Right", we also stack rows vertically but
 * rely on the row-level classes (.controlShieldRowLeft and
 * .controlShieldRowRight) to align the shield and text horizontally.
 */
.signContentContainer.shieldPositionLeft,
.signContentContainer.shieldPositionRight {
    flex-direction: column;
    justify-content: center;
}
.signContentContainer.shieldPositionAbove {
    flex-direction: column;
    justify-content: center;
}
.signContentContainer.shieldPositionRight {
    /* Already handled by the combined rule; no need for row-reverse here */
}

/*
 * Row-based layout for shields positioned to the left or right of the control
 * text.  Each row contains at most one shield and one line of text.  The
 * base class applies flexbox with center alignment.  Specific variants for
 * left and right control the spacing between the shield and the text.
 */
/*
 * When shields are positioned to the left or right of the control text, each
 * row is rendered as a two‑column grid.  The first column contains the
 * tag, directional banner and shield; the second column contains the
 * control text.  CSS Grid automatically makes the first column across all
 * rows the width of the widest tag/shield combination, ensuring that
 * shields line up perfectly on top of each other regardless of varying
 * tag lengths.  A consistent column gap provides spacing between the
 * shield column and the text column without requiring per‑element margins.
 */
.controlShieldRow {
    display: grid;
    align-items: center;
    width: 100%;
}

/* Left‑positioned shields: place the shield column first followed by the text. */
.controlShieldRowLeft {
    /*
     * Use max-content for the first column so that its width is
     * determined by the widest tag/banner/shield combination across all
     * rows.  This prevents narrower tags from causing shields in
     * subsequent rows to shift horizontally.  The second column
     * stretches to fill the remaining space.  A consistent column gap
     * provides breathing room between the shield column and the control
     * text column without relying on per-element margins.
     */
    /*
     * Use max-content for the first column so its width matches the
     * widest tag/banner/shield combination across all rows.  Reduce the
     * column gap to tighten the horizontal spacing between the shield
     * column and the control text.  A smaller gap (0.4rem) keeps the
     * shield and text visually connected without leaving a large empty
     * area between them.
     */
    grid-template-columns: max-content 1fr;
    /* Tighten the horizontal gap between the shield column and the text column
       to minimise empty space.  Reduce the gap further (0.15rem) to bring
       the shield and text closer together without letting them touch. */
    column-gap: 0.15rem;
}

/* Right‑positioned shields: place the text first followed by the shield column. */
.controlShieldRowRight {
    /* Mirror the left‑positioned layout but swap the order of the
     * columns: the control text comes first and the shield/tag column
     * uses max-content sizing.  The same gap provides equal spacing.
     */
    /*
     * Mirror the left‑positioned layout but swap the order of the
     * columns: the control text comes first and the shield/tag column
     * uses max-content sizing.  Reduce the gap to 0.4rem to minimise
     * the reserved space between the text and shield columns.
     */
    grid-template-columns: 1fr max-content;
    /* Match the reduced gap used on left‑positioned rows.  Use a 0.15rem gap to
       minimise the reserved space between the text and shield columns. */
    column-gap: 0.15rem;
}

/* Remove explicit margins on shield/tag containers when using grid layout.
 * Spacing is handled by the column gap defined above. */
.controlShieldRowLeft .tagBannerWrapper,
.controlShieldRowLeft .bannerShieldContainer,
.controlShieldRowRight .tagBannerWrapper,
.controlShieldRowRight .bannerShieldContainer {
    margin-left: 0;
    margin-right: 0;
}

/*
 * Lines of control text when used in a row-based layout.  Use the same
 * typographic settings as the standard controlText and preserve spaces.
 */
.controlTextLine {
    font-family: "Series EM";
    font-size: 1.5rem;
    /* Preserve multiple spaces and new lines within the control text.  Using pre-wrap allows
       sequences of spaces to render as entered by the user, while still permitting text to wrap
       when it exceeds the sign width.  This provides a simple way for users to left- or right-align
       control-city lines using extra spaces. */
    white-space: pre-wrap;
    /* Remove default browser margin on paragraphs used for control text lines.  Without this
       reset, blank space appears above and below dashed separator lines because the margin
       combines with the separator's margin.  Setting margin to zero ensures that the only
       vertical spacing comes from the separator itself. */
    margin: 0;
    /* Use a unit line height to minimise additional space above and below text lines.  The
       default line-height can introduce extra blank space around content such as separator
       lines.  A value of 1 provides compact spacing while maintaining legibility. */
    line-height: 1;
}

/*
 * When the shields are positioned below the control text, arrange the content
 * container vertically in reverse order so that the shield container appears
 * beneath the control text.  This mirrors the behaviour of the "Above"
 * configuration but flips the order of children.
 */
.signContentContainer.shieldPositionBelow {
    flex-direction: column-reverse;
    justify-content: center;
}

/*
 * Container for all shields, banners and TO labels.  Use flexbox to lay
 * items out in a single row.  Align items to the bottom to line up the
 * bottoms of the shields, then center the entire row within its parent.
 * The `gap` property introduces equal spacing between items without adding
 * large empty margins at either end.  This approach naturally balances
 * two‑shield layouts while still looking good for three or more shields.
 */
.shieldsContainer {
    text-align: center;
    display: flex;
    flex-direction: row;
    /* Align the bottom of each shield container so that banners line up
       consistently across the set. */
    align-items: flex-end;
    /* Centre the shield set as a whole and use a fixed gap between each
       shield container.  Using `justify-content: center` prevents the
       available space from being divided based on the varying widths of
       individual shields or banners, while `gap` ensures a consistent
       horizontal distance between adjacent items regardless of whether
       a banner is present. */
    justify-content: center;
    gap: 0.5rem;
    /* Allow absolute positioning of TO labels relative to this container */
    position: relative;
}

/*
 * Base styling for all "TO" labels.  They are hidden by default;
 * when a shield row requests the TO label, JavaScript will set the
 * element’s display property so that CSS rules below can take effect.
 * Reset margins to zero.  Padding adds a bit of space on each side
 * of the word "TO".  Removing the auto margins used previously
 * prevents unwanted vertical centering and overlap.
 */
.to {
    display: none;
    margin: 0;
    padding: 0 0.25rem;
}

/*
 * When a TO label is placed inside a banner/shield container (single shield
 * case), it acts like a banner to the left of the shield.  We use
 * inline‑flex so the text is vertically centred, and a small right
 * margin creates breathing room before the shield.  Reset all other
 * margins to zero to avoid automatic vertical centring, which caused
 * the label to overlap other elements.
 */
/*
 * Remove default styling for `.to` inside a `.bannerShieldContainer`.
 * The display of the TO label will instead be controlled by the
 * `.to-single` and `.to-multi` classes applied via JavaScript.
 */


/*
 * When a TO label appears directly within a shieldsContainer (multiple
 * shield case), treat it as its own flex item.  Inline‑flex keeps
 * the text vertically centred.  Apply equal left and right margins
 * to provide breathing room between the label and adjacent shields,
 * and reset the top and bottom margins to zero.  The parent
 * `.shieldsContainer` uses `justify-content: space-evenly` to
 * distribute items, so this margin simply adds extra space around
 * the label.
 */
/*
 * Remove default styling for `.to` when it is a direct child of a
 * `.shieldsContainer`.  The `display` and margins of the TO label
 * will instead be applied through the `.to-single` and `.to-multi`
 * classes.  This prevents TO labels from being visible by default.
 */

/*
 * Override styles for TO labels that have been marked by JavaScript as
 * belonging to single‑shield or multi‑shield rows.  These classes
 * override the generic `.shieldsContainer > .to` rule above.
 */
.to.to-single {
    /* Position small tags (TO/USE/VIA/& etc.) next to a single shield.
       Use inline‑flex so the text is vertically centred relative to the
       shield.  Removing automatic margins prevents unwanted vertical
       centring and overlap. */
    display: inline-flex;
    align-items: center;
    /* Align the tag’s baseline with the centre of its parent container. */
    align-self: center;
    /* Reset default margins. */
    margin: 0;
    /* Space between the small tag and the shield.  Matching the margin used
       for directional banners ensures equal horizontal spacing on both
       sides of the shield.  Reduce this margin slightly to 0.20rem so
       that small tags and side banners sit closer to the shield without
       looking cramped. */
    margin-right: 0.20rem;
    /* Provide a small horizontal padding inside the tag to mirror the
       padding on directional banners. */
    padding: 0 0.25rem;
    /* Do not translate the tag vertically; rely on flexbox centring. */
    transform: none;
    /* Tight line height to match banners. */
    line-height: 1;
    /* Do not force the tag to stretch to 100% of the wrapper’s height.  Let
       the natural content height determine the size so that flexbox
       alignment can centre it relative to the shield. */
}

/*
 * Make ampersand (“&”) tags slightly larger than regular TO/USE/VIA labels.  Since
 * the ampersand character tends to appear visually smaller than letters at the
 * same font size, scaling it up helps balance its weight relative to the
 * adjacent shield and directional banners.  This rule applies to tags with
 * the `to-amp` class, which is added by JavaScript whenever the tag
 * selected is AMP.  Adjust the font‑size multiplier here to fine‑tune
 * appearance across different shield sizes.
 */
.to-amp {
    font-size: 1.25em;
}

.to.to-multi {
    /* For multiple shields, centre the TO between shields by applying
       equal left and right margins.  Keep the label vertically
       centred using align-self so it isn’t anchored to the bottom
       along with the shields. */
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin: 0;
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 0 0.25rem;

    /* Do not translate the multi‑shield tag vertically; rely on flexbox centering
       for vertical alignment with adjacent banners and shields. */
    transform: none;

    /* Use a tight line height to match banners */
    line-height: 1;

    /* Fill the height of the wrapper for multi‑shield rows so the
       label aligns vertically with adjacent shields and banners. */
    height: 100%;
}

/*
 * Each shield (and its optional banner) lives inside a `.bannerShieldContainer`.
 * Use a column layout by default so the banner sits above the shield.  Do not
 * force auto margins on the left or right—flex gaps on the parent will handle
 * spacing between containers.  A small padding keeps each container from
 * touching its neighbours.
 */
.bannerShieldContainer {
    display: flex;
    flex-direction: column;
    /* Tighten the padding around the shield and banner so the row
       height is slightly reduced.  A 0.05rem padding provides
       enough breathing room without leaving excessive empty space
       above or below the shield, improving the vertical alignment
       with adjacent text lines. */
    padding: 0.05rem;
}
.bannerShieldContainer.bannerPositionLeft {
	flex-direction: row;
}
.bannerShieldContainer.bannerPositionAbove {
	flex-direction: column;
}
.bannerShieldContainer.bannerPositionRight {
	flex-direction: row-reverse;
}

.banner {
    border-radius: 0.1rem;

    font-size: 1rem;
    text-transform: uppercase;

    /* Provide horizontal padding inside banners so the text does not touch
       the edges.  This value mirrors the padding used for small tags
       (TO/USE/VIA/&), ensuring banners and tags have similar visual
       weight and spacing relative to the shield. */
    padding: 0 0.25rem;

    /*
     * Set a consistent line-height equal to the font size to prevent
     * extra vertical space above or below the text.  Without this,
     * some browsers add additional leading that causes the banner
     * text to sit slightly lower than the midline of its container.
     */
    line-height: 1;

    /*
     * Use flexbox for the banner content so that the text is vertically
     * centered within its own container.  Without this, the default
     * inline formatting causes the baseline of the text to sit slightly
     * below the midpoint of its parent, making the banner appear too
     * low relative to the associated shield.  Setting display:flex and
     * align-items:center aligns the text centrally along the y‑axis.
     */
    display: flex;
    align-items: center;

    /*
     * Ensure the banner fills the height of its parent container so
     * vertical centring is calculated relative to the shield’s height.
     * Without a defined height, the banner’s content may still sit
     * slightly low, especially when different fonts are used.
     */
    justify-content: center;
    height: 100%;

    /*
     * By default, the banner uses a bottom auto margin to push itself
     * upward when stacked vertically above the shield (bannerPositionAbove).
     * When the banner is positioned to the left or right of the shield
     * (horizontal layout), this margin causes the text to hug the top of the
     * shield instead of being vertically centered. The horizontal layouts
     * override this margin below.
     */
    margin-bottom: auto;
}

/*
 * When the banner is placed to the left or right of the shield, align
 * the banner and shield vertically to the center. Remove the auto bottom
 * margin on the banner so it doesn't push itself to the top of the
 * container. These overrides ensure that directional or informational
 * banners (e.g. East, West, To) remain vertically centered alongside
 * the shield when displayed horizontally.
 */
.bannerShieldContainer.bannerPositionLeft,
.bannerShieldContainer.bannerPositionRight {
    /*
     * When the banner is placed to the left or right of the shield, align
     * the items vertically and ensure the container stretches to the full
     * height of the shield. Without a defined height the banner can
     * appear slightly low relative to the shield despite align-items.
     */
    align-items: center;
    height: 100%;
}
/* Override banner styling when placed to the left or right of the shield.  Remove
   the upward translation so both the banner and the small tag labels share
   exactly the same vertical midline.  Horizontal margins remain set
   individually on bannerPositionLeft and bannerPositionRight below. */
.bannerShieldContainer.bannerPositionLeft .banner,
.bannerShieldContainer.bannerPositionRight .banner {
    margin-bottom: 0;
    transform: none;
}

/* Add a right margin when the banner is on the left of the shield to
   match the gap used for the small tag */
/* Match the horizontal gap between the banner and shield to the spacing used for small tags.
   Using 0.20rem rather than the previous 0.25rem tightens the spacing so the
   banner appears equidistant from the shield as the small tag. */
.bannerShieldContainer.bannerPositionLeft .banner {
    /* Match the spacing used for small tags (TO/USE/VIA/&).  Use 0.20rem
       instead of the previous 0.25rem to equalise the gap on both sides of the shield.
       Reducing this value brings the banner closer to the shield while maintaining
       consistent spacing relative to the small tag. */
    margin-right: 0.20rem;
}

/* Add a left margin when the banner is on the right of the shield to
   match the gap used for the small tag */
/* Match the horizontal gap between the banner and shield to the spacing used for small tags.
   Using 0.20rem rather than the previous 0.25rem tightens the spacing so the banner
   appears equidistant from the shield as the small tag. */
.bannerShieldContainer.bannerPositionRight .banner {
    /* Match the spacing used for small tags (TO/USE/VIA/&).  Use 0.20rem
       instead of the previous 0.25rem to equalise the gap on both sides of the shield.
       Reducing this value brings the banner closer to the shield while maintaining
       consistent spacing relative to the small tag. */
    margin-left: 0.20rem;
}

/*
 * Wrapper for a small tag (TO/USE/VIA/& etc.) and its associated banner/shield container.
 * This wrapper ensures the small tag remains to the left of the shield regardless of
 * the directional banner’s position (Above, Left, Right).  The wrapper itself
 * behaves like a flex container so that its children (the tag and the banner/shield
 * container) align vertically.
 */
.tagBannerWrapper {
    display: flex;
    align-items: center;
    /* Do not explicitly set the height on the wrapper.  Let it grow
       naturally to match the height of the shield container.  This
       avoids collapsing issues when the parent’s height is not
       defined.  Vertical centering is handled via flexbox.
    */
    /* height: 100%; */
}

/*
 * In row-based layouts, when shields are positioned to the left or right of the control
 * text, apply the same horizontal spacing rules to the tag wrapper as were previously
 * applied to the bannerShieldContainer.  Without this, the wrapper may stick to the
 * control text when the directional banner is on the left or right.
 */
.controlShieldRowLeft .tagBannerWrapper {
    margin-right: 0.75rem;
}
.controlShieldRowRight .tagBannerWrapper {
    margin-left: 0.75rem;
}
/*
 * Ensure all characters in directional/informational banners
 * (e.g. "NORTH", "SOUTH", "TO") are rendered at the same
 * size. The original stylesheet made the first letter larger
 * than the rest, which some users find distracting. Using
 * `inherit` here keeps the first letter the same size as the
 * other letters while preserving any other inherited styles.
 */
.banner::first-letter {
    font-size: inherit;
}

/*
 * Provide consistent horizontal spacing for all shield containers and TO
 * labels within a shieldsContainer. Without these overrides the
 * `.bannerShieldContainer` rules above use auto margins that can create
 * large gaps when only a couple of shields are present. By giving each
 * direct child of `.shieldsContainer` fixed side margins, the shields
 * and TO labels will stay closer together while remaining centered via
 * the `justify-content` rule on the parent.
 */
/* The gap property on `.shieldsContainer` handles spacing, so no
 * per‑child margin overrides are necessary here. */

/*
 * Previously the TO label was absolutely positioned inside
 * `.shieldsContainer`, which caused it to overlap shields and
 * ignored the flex layout.  Those styles have been removed in
 * favour of `.to-single` and `.to-multi` classes applied via
 * JavaScript to position the label appropriately for single- and
 * multi-shield cases.
 */

/*
 * When there are exactly two shields in the sign, the default auto margins on
 * each shield container (`.bannerShieldContainer`) produce an overly large gap
 * between them. The JavaScript adds a `twoShields` class to the parent
 * `.shieldsContainer` when this occurs. Use that class to override the
 * auto margins and apply more balanced spacing.
 */

.shield {
	margin: 0.15rem;
	position: relative;
}

.shieldImg {
	width: 3.12rem;
	height: 2.5rem;
}
.markerImg {
	height: 1.5rem;
	top: 0.25rem;
	position: relative;
	z-index: 0;
}
.left .markerImg {
	transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-moz-transform: scaleX(-1);
}
.otherSymbols {
	display: inline-flex;
	flex-direction: column;
	margin-right: auto;
	margin-left: auto;
	padding: 0.1rem;
	position:relative;
	margin-bottom: 0.5rem;
}
.oSNum { /* Add .left and .right */
	font-family: "Series EM";
	position: absolute;
	width: 100%;
	z-index: 1;
	text-align: center;
	top: .25rem;
    font-size: 1.25em;
	left: -.3rem;
	color: black;
}
.left .oSNum {
	left: 0.3rem;
}
.oSNum.short {
	letter-spacing: .1rem;
}
.oSNum.five {
	font-family: "Series C";
	top: .29rem;
	font-size: 1.2em;
}

.doubleInlineIcon {
    height: 2.3em;
    width: auto;
    vertical-align: -0.44em;
}

.routeNumber {
	font-size: 1.5rem;

	width: 100%;

	position: absolute;
}

/*
 * Render all‑caps control text slightly smaller than mixed‑case text to improve
 * legibility and visual hierarchy.  The JavaScript wraps all uppercase
 * words or entire lines (unless marked with an exclamation point) in this
 * class.  Adjust the font size multiplier below to fine‑tune the appearance.
 */
.allCapsSmall {
    font-size: 0.75em;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
    transform: translateY(-0.09em);
}

/* Ensure the reduced font size applies inside brown panels as well.  Without this
   additional selector, some browsers may not apply the font-size override inside
   nested elements when the parent has its own font settings. */
.brownPanel .allCapsSmall {
    font-size: 0.75em;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
    transform: translateY(-0.09em);
}

/*
 * Render a solid line for control city separators.  When a user enters a
 * dashed line (e.g. "------") in the control city box, the JavaScript
 * replaces it with a span having this class.  Display a horizontal rule
 * spanning the full available width with no additional spacing changes.
 */
    .solidLine {
        /* Render separator lines as inline blocks so their width can be set
           dynamically based on the number of dashes entered by the user.  A
           dynamic width allows lines to be shorter or longer than nearby text
           without being constrained to the full width of the sign. */
        /* Render separator lines as inline blocks so their width can be set
           dynamically based on the number of dashes entered by the user. */
        display: inline-block;
        border-top: 0.15rem solid var(--white);
        /*
         * Use a symmetric vertical margin so the space above and below the
         * divider line is identical.  A 0.05rem margin provides a small
         * cushion without introducing the appearance of an extra blank line.
         */
        /* Reduce the vertical margin slightly to balance the perceived
           spacing above and below the divider line.  A 0.04rem margin
           offers a tighter spacing while still leaving the divider
           clearly separated from adjacent text. */
        /* Use a symmetric vertical margin even smaller to eliminate the perception
           of extra space above the line.  A margin of 0.03rem on the top and
           bottom keeps the separator visually centred between adjacent text. */
        margin: 0.03rem 0;
        /*
         * Remove the line’s contribution to the baseline by setting the
         * line height to zero and aligning the element vertically to the
         * middle of the text line.  Without these properties, the
         * default baseline positioning causes extra space above the line
         * compared with below it.  A zero line-height and middle
         * vertical-align ensure the top and bottom margins behave
         * symmetrically relative to adjacent text.
         */
        line-height: 0;
        vertical-align: middle;
    }

/*
 * Render a brown panel for bracketed control-city text.  When the control
 * text contains a segment wrapped in square brackets (e.g. [Six Flags]),
 * the JavaScript wraps it in a span with this class.  Use the same brown
 * colour used for full brown signs and white text.  Padding provides a
 * small buffer around the text to mirror typical park sign styling.
 */
.brownPanel {
    display: inline-block;
    background-color: var(--brown);
    color: var(--white);
    /* Provide horizontal padding so the brown stripe surrounds the text. */
    padding: 0 0.4rem;
}
.greenPanel {
    display: inline-block;
    background-color: var(--green);
    color: var(--white);
    padding: 0 0.4rem;
}

.controlShieldRow .brownPanel,
.controlShieldRow .greenPanel {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.streetName {
	border: solid var(--white) 0.15rem;
	border-radius: 0.25rem;
	margin-bottom: 0.5rem;
	padding: 0 1rem;
}
.streetName:last-child {
	margin-bottom: 0
}
.streetName,
.controlText {
	font-family: "Series EM";
	font-size: 1.5rem;
    /* Preserve multiple spaces and new lines within the control text.  Using pre-wrap allows
       sequences of spaces to render as entered by the user, while still permitting text to wrap
       when it exceeds the sign width.  This provides a simple way for users to left- or right-align
       control-city lines using extra spaces. */
    white-space: pre-wrap;
}

.guideArrows {
	border-style: solid;
	border-width: 0.2rem;
	border-top-width: 0;
	border-radius: 0 0 0.75rem 0.75rem;

	display: none;
	padding: 0 0.25rem 0.25rem 0.25rem;
}
.guideArrows.exit_only {
	background-color: var(--yellow) !important;
	border-color: var(--black) !important;
	color: var(--black) !important;
}
.otherSymbols + .actionMessage {
	padding-right: .2rem;
}

.exitTab {
	display: flex;
	align-items: center;
}
.action_message {
	display: inline-flex;
	align-items: center;
}
.action_message {
	justify-content: center;
}

.exitOnlyArrow {
	font-family: "Arrows Two";
	font-size: 4rem; /* Makes arrows large and visble */
	line-height: 0; /* Makes space text (arrow) takes up minimal */

	display: inline-block;
	margin-top: -0.25rem;
}

.exitOnlyText {
	margin: 0 1rem;
}

.rotate180 {
	left: -0.05rem;

		-moz-transform: rotate(180deg) translateY(-2.75rem);
		-o-transform: rotate(180deg) translateY(-2.75rem);
		-webkit-transform: rotate(180deg) translateY(-2.75rem);
	transform: rotate(180deg) translateY(-2.75rem);
}

.arrow {
	font-size: 4rem; /* Makes arrows large and visble */
	line-height: 0; /* Makes space text (arrow) takes up minimal */

	display: inline-block;
	margin: -0.5rem 0.05rem 0.05rem 5rem;
	padding: 0 0.1rem 0 0.05rem;
}

.arrowContainer {
	display: inline-flex;
}
.centerText .arrow {
	margin-right: .5rem;
	margin-top: -.25rem;
}
.arrow:first-child {
	margin-left: 0.05rem;
}
.arrow:last-child {
	margin-right: .05rem;
}
.actionMessage + .arrow {
	margin-left: .5rem;
}

/*
 * Numerals in the yellow action band tend to sit lower than adjacent
 * words because they align on the text baseline.  Increasing the
 * vertical-align pushes the digit upward without affecting the line
 * height.  A value of 0.20em centres single digits between the
 * surrounding letters.  If further adjustment is needed it can be
 * tweaked here.  Fractions are handled separately via the .fraction
 * class.
 */
.numeral {
    font-size: 1.42rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transform: none;
}
.fraction {
	line-height: 1;
	display: inline-flex;
	align-items: center;
	transform: none;
}
.guideArrows.exactBottomArrows {
    text-align: center;
}

.guideArrows.new_dwn,
.guideArrows.new_dwn_x,
.guideArrows.45_bottom,
.guideArrows.45_bottom_x,
.guideArrows.315_bottom,
.guideArrows.315_bottom_x {
    padding-top: 0.34rem;
}

.arrowContainer.exactArrowGroup {
    display: inline-flex;
    align-items: flex-end;
}


.guideArrows.new_dwn .arrowContainer,
.guideArrows.new_dwn_x .arrowContainer,
.guideArrows.45_bottom .arrowContainer,
.guideArrows.45_bottom_x .arrowContainer,
.guideArrows.315_bottom .arrowContainer,
.guideArrows.315_bottom_x .arrowContainer {
    margin-top: 0.06rem;
}
.arrowContainer.splitExitOnlyGroup {
    display: inline-flex;
    align-items: center;
    --split-exit-gap: 0.3rem;
    --split-exit-edge-gap: 0.3rem;
    padding-left: var(--split-exit-edge-gap);
    padding-right: var(--split-exit-edge-gap);
}

.arrowContainer.splitExitOnlyGroup .exactArrow.bottom {
    margin: -0.15rem 0 0.05rem 0;
    padding: 0;
}

.arrowContainer.splitExitOnlyGroup.kind-diagonal {
    --split-exit-gap: 0.12rem;
}

.arrowContainer.splitExitOnlyGroup.kind-down {
    --split-exit-gap: 0.38rem;
}

.splitExitStripe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--yellow);
    color: var(--black);
    font-family: 'Series E';
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.4em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0rem 0.35rem;
}

.splitExitStripe.left {
    margin-right: var(--split-exit-gap);
}

.splitExitStripe.right {
    margin-left: var(--split-exit-gap);
}

.exactArrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    flex: 0 0 auto;
}

.exactArrow.bottom {
    line-height: 0;
    margin: -0.5rem 0.05rem 0.05rem 5rem;
    padding: 0 0.1rem 0 0.05rem;
}

.centerText .exactArrow.bottom {
    margin-right: .5rem;
    margin-top: -.25rem;
}

.exactArrow.bottom:first-child {
    margin-left: 0.05rem;
}

.exactArrow.bottom:last-child {
    margin-right: .05rem;
}

.actionMessage + .exactArrow.bottom {
    margin-left: .5rem;
}

/* For centered two-lane exact-bottom layouts, position the yellow stripe within
   the visual vertical band defined by the arrows themselves, without changing their
   horizontal spread. Diagonal arrows need a stronger lift than the New Dwn pair. */
.arrowContainer.exactArrowGroup.lanes-2.centerText .actionMessage {
    position: relative;
}

.arrowContainer.exactArrowGroup.lanes-2.kind-diagonal.centerText .actionMessage {
    top: -0.45rem;
}

.arrowContainer.exactArrowGroup.lanes-2.kind-down.centerText .actionMessage {
    top: -0.08rem;
    margin-left: 0.14rem;
    margin-right: 0.14rem;
}

.exactArrow.bottom.down {
    width: 2.84rem;
    margin-top: -0.15rem;
}

.exactArrow.bottom.diagonal {
    width: 4.1rem;
    margin-top: -1.06rem;
}

.centerText .exactArrow.bottom.diagonal {
    margin-top: -0.81rem;
}

.exactArrow.bottom.kind-90,
.exactArrow.bottom.kind-270 {
    margin-bottom: -0.18rem;
}

.exactArrow.side.diagonal {
    width: 4.175rem;
}

.exactArrow.side.upright {
    width: 3.45rem;
}

.exactArrowSvg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.exactSideArrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    color: inherit;
}

.exactSideArrow.left {
    padding: 0 0.09rem 0 0.12rem;
}

.exactSideArrow.right {
    padding: 0 0.12rem 0 0.09rem;
}

.exactSideArrow.left.kind-0 {
    padding: 0 0.04rem 0 0.05rem;
}

.exactSideArrow.right.kind-0 {
    padding: 0 0.05rem 0 0.04rem;
}

.centerText .rotate180 {
	-moz-transform: rotate(180deg) translateY(-1rem);
    -o-transform: rotate(180deg) translateY(-1rem);
    -webkit-transform: rotate(180deg) translateY(-1rem);
	transform: rotate(180deg) translateY(-1rem);
}

/*
 * Render the action message on a yellow background with black text.  The
 * actionMessage element is appended inside the guideArrows container and
 * by default inherits the sign’s colours (typically green with white
 * lettering).  To draw attention to special actions such as NEXT RIGHT
 * or EXIT NOW, override the background and foreground colours to match
 * the MUTCD yellow warning panel.  Do not change any other typographic
 * attributes so font size, weight and spacing remain consistent with
 * existing signs.
 */
/*
 * Style the action message as a yellow stripe with black text.  The
 * horizontal padding gives breathing room at the sides, while the
 * vertical padding is intentionally minimal so the stripe does not
 * overwhelm the green field.  The top and bottom margins create
 * a small gap of green above and below the stripe.  The values
 * here were tuned to provide slightly more green below than above
 * while keeping the stripe visually balanced.
 */
.actionMessage,
.action_message {
    background-color: var(--yellow);
    color: var(--black);
    /*
     * Trim the vertical padding further so the yellow stripe hugs the text.
     * A zero top and bottom padding removes excess yellow above and below the
     * lettering while preserving horizontal breathing room.  This produces a
     * thinner stripe, especially noticeable when numerals are present.
     */
    padding: 0rem 0.35rem;
    /*
     * Maintain a small gap of green above and below the stripe.  The top
     * margin remains tiny while the bottom margin stays slightly larger to
     * visually centre the stripe within the sign.
     */
    /* Increase the green space above and below the yellow stripe */
    /* Reduce the band’s own height by tightening the line height.  A unit
       line-height shrinks the yellow stripe top and bottom without
       affecting horizontal padding. */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Maintain a modest green gap above the stripe and increase the gap
       below the stripe.  This asymmetry replicates real highway signage
       where the action message sits slightly higher within the sign. */
    margin-top: 0.10rem;
    margin-bottom: 0.22rem;

    /* Ensure a consistent minimum height for the yellow band.  Without a
       numeral, the stripe can collapse to a shorter height.  Setting a
       min-height equal to roughly one and a half lines of text prevents
       the stripe from shrinking when only words are present, matching
       the height seen when numerals are displayed. */
    min-height: 1.4em;

    /* Add a thin border matching the sign’s background colour to mask
       subpixel rendering artefacts along the top edge of the yellow
       stripe.  Using a border rather than pixel-based dimensions
       prevents flickering blue lines at certain zoom levels without
       altering the layout. */
    border-top: 1px solid var(--green);

    /* Always render the action message in uppercase so that mixed-case
       input becomes consistent with the exit tab styling. */
    text-transform: uppercase;
}


/* Explicit spacer and text wrappers for the yellow action stripe.
   Because the stripe itself is an inline-flex container, raw whitespace
   nodes around the numeric group collapse away as anonymous flex items.
   These spans preserve predictable spacing without affecting anything
   outside the action line. */
.actionTextChunk {
    display: inline-flex;
    align-items: center;
    white-space: pre;
}

.actionSpaceChunk,
.actionNumberSpacer {
    display: inline-flex;
    align-items: center;
    white-space: pre;
    flex: 0 0 auto;
}

.actionOuterSpacer {
    display: inline-block;
    width: 0.26em;
    flex: 0 0 auto;
}

/* Render numeric content in the yellow stripe as one controlled inline-flex
   unit so full numbers, solo fractions and mixed numbers all share the same
   vertical centring.  This avoids relying on baseline hacks that caused the
   digits to ride low and prevents trailing numbers from visually inflating the
   right edge of the yellow band. */
.actionNumberGroup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* Keep full numbers slightly larger than words, but lift them only a bit
       so their extra height extends more evenly above and below the word line. */
    transform: translateY(-0.04em);
}

/* Mixed numbers use an explicit spacer element so the whole number and
   fraction are never jammed together. */
.actionNumberSpacer {
    display: inline-flex;
    align-items: center;
    white-space: pre;
    flex: 0 0 auto;
}

/*
 * Lines of control text beginning with an at‑sign (@) are left‑aligned
 * within the sign.  Assign this class to those lines to override the
 * default centre alignment.  The block display ensures that the line
 * occupies the full width of the sign container so that left alignment
 * is relative to the sign edges rather than the intrinsic width of the
 * text.  This class may be applied to both <span> and <p> elements.
 */
/*
 * Lines beginning with an at-sign (@) are left-aligned within the sign.
 * Use a flex container so the text sits on the same baseline as
 * centred lines.  Setting display:inline-flex allows the element
 * to participate in normal text flow (in combination with <br>
 * separators) while still spanning the full width of the sign.
 * A unit line-height and zero margins ensure left-aligned lines
 * occupy the same vertical space as centred lines, avoiding any
 * extra blank rows between consecutive left-aligned lines.  The
 * white-space rule mirrors .controlTextLine to preserve multiple
 * spaces entered by the user.
 */
/*
 * Base styling for lines that begin with an at‑sign (@).
 * These lines should be left‑aligned within the sign.  Using
 * a block display preserves normal line flow and avoids
 * inserting extra blank space above or below consecutive lines.
 * Width:100% ensures that the line spans the full width of its
 * containing column when used inside a grid layout, while
 * text-align:left overrides the default centring applied to
 * control text.  Margin and line-height settings mirror
 * `.controlTextLine` so that left‑aligned and centred lines
 * occupy the same vertical space when no shield is present.
 */
/*
 * Left‑aligned control‑city lines.  A leading at‑sign (@) in the user’s input
 * triggers left‑justification for that line only.  The at‑sign is stripped
 * from the display in JavaScript, leaving just the content.  This class
 * ensures that left‑aligned lines behave identically to centred lines in
 * terms of spacing: remove all default margins, use a unit line height and
 * preserve white‑space so that intentional spaces are respected.  These
 * settings mirror those applied to .controlTextLine.  Without resetting
 * margin and line-height, browsers may insert extra blank space above or
 * below consecutive @ lines in row‑based layouts.
 */
/*
 * Left‑aligned control‑city lines.  A leading at‑sign (@) in the user’s input
 * triggers left‑justification for that line only.  The at‑sign is stripped
 * from the display in JavaScript, leaving just the content.  This class
 * ensures that left‑aligned lines behave identically to centred lines in
 * terms of spacing.  Remove default margins and use a unit line height so
 * that adjacent @ lines do not introduce extra blank rows.  Preserve
 * whitespace with pre-wrap so users can align text manually using spaces.
 */
/*
 * Left‑aligned control‑city lines.  A leading at‑sign (@) in the user’s input
 * triggers left‑justification for that line only.  The at‑sign is stripped
 * from the display in JavaScript, leaving just the content.  This class
 * ensures that left‑aligned lines behave identically to centred lines in
 * terms of vertical spacing: remove default margins, use a unit line height
 * and preserve white‑space so intentional spaces are respected.  Using
 * inline-block and vertical-align:top prevents browsers from inserting
 * additional leading or trailing space that would otherwise appear when
 * consecutive @ lines are rendered.  Width:100% ensures the line spans
 * the full width of its container so left alignment is relative to the
 * sign edges.
 */
.leftAlignedLine {
    /* Use inline-block so the element participates in line layout like
       centred lines but still respects width and white-space settings. */
    display: inline-block;
    /* Occupy the full width of the sign so left alignment is relative
       to the edges rather than the intrinsic text width. */
    width: 100%;
    /* Override the default centre alignment applied to control text. */
    text-align: left;
    /* Remove default margins and set a unit line-height so that
       consecutive left‑aligned lines do not introduce extra blank
       space compared with centred lines. */
    margin: 0;
    line-height: inherit;
    /* Preserve whitespace and line breaks within left‑aligned content,
       mirroring the behaviour of .controlTextLine. */
    white-space: pre-wrap;
    /* Align the top of the inline-block with the top of adjacent lines
       so shields and text line up consistently. */
    vertical-align: top;
}



/*
 * When shields are positioned to the left or right of the control text,
 * each control text line should be vertically centred relative to its
 * companion shield.  Setting the text line as a flex container and
 * centering its contents along the cross‑axis ensures that the
 * baseline of the text aligns with the midpoint of the shield.
 */
/*
 * When shields are positioned left or right, ensure the control text
 * lines occupy the full height of their row and the text is vertically
 * centred relative to the adjacent shield.  Using height:100% allows
 * the flex container to stretch to the row height, and align-items:center
 * centers the text within that space.  Without explicitly setting
 * height, some browsers will treat the text as only as tall as its
 * content, causing subtle misalignment compared with the VIA tag or
 * shield.
 */
/*
 * In a row-based layout (Left or Right shield positions), both centred
 * (.controlTextLine) and left-aligned (.leftAlignedLine) lines are rendered
 * as flex containers so that their baselines align vertically with the
 * midpoint of the accompanying shield.  Using height:100% allows each
 * text container to fill the row height.  Reset margins and line-height
 * here to prevent browsers from inserting default paragraph spacing which
 * manifests as blank rows between consecutive lines when using flexbox.
 */
.controlShieldRow .controlTextLine,
.controlShieldRow .leftAlignedLine {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    line-height: inherit;
}

/*
 * NOTE: The row-based layout (Left or Right shield positions) already defines
 * .controlShieldRow .controlTextLine and .leftAlignedLine as flex containers
 * with height:100%, margin:0 and a unit line-height above.  Avoid
 * re-declaring these properties here to prevent conflicting overrides.  All
 * margin and line-height resets should be applied in a single rule.
 */

/*
 * Override margins on tag wrappers for left/right shield positions.
 * The earlier rules assign a 0.75rem margin to the tag wrapper in
 * .controlShieldRowLeft and .controlShieldRowRight to provide spacing
 * when using a flex layout.  In the new grid-based layout, that
 * margin results in uneven column widths.  Reset the margins to
 * zero so that the grid’s column gap solely determines the spacing.
 */
.controlShieldRowLeft .tagBannerWrapper,
.controlShieldRowRight .tagBannerWrapper {
    margin-left: 0;
    margin-right: 0;
}

/*
 * Align shields consistently across rows when positioned to the left or
 * right of the control text.  The wrapper column is sized to the
 * maximum width across all rows via JavaScript.  Within that column we
 * position the small tag and banner/shield container so that the
 * shield itself lines up vertically across rows regardless of tag
 * length.  For left‑positioned shields, push the shield to the far
 * right of the wrapper so it sits adjacent to the text.  For
 * right‑positioned shields, reverse the order of the tag and shield
 * within the wrapper and push the shield to the far left.
 */
.controlShieldRowLeft .tagBannerWrapper {
    /* Spread the tag and shield apart so the tag hugs the left and
       the shield hugs the right.  Without this the shield will sit
       immediately after the tag, leaving any extra width empty on
       the right and causing misalignment. */
    justify-content: space-between;
}
/* When no small tag is present on a left‑position row, the wrapper is
   simply the .bannerShieldContainer itself.  Push the shield to the
   right by using an automatic left margin. */
.controlShieldRowLeft > .bannerShieldContainer {
    margin-left: auto;
}

.controlShieldRowRight .tagBannerWrapper {
    /* Reverse the order so the shield appears at the left of the
       wrapper and the tag appears at the right.  Then space the
       children apart so the shield hugs the left edge and the tag
       hugs the right edge. */
    flex-direction: row-reverse;
    justify-content: space-between;
}
/* When no small tag is present on a right‑position row, push the
   shield to the left of the wrapper using an automatic right margin. */
.controlShieldRowRight > .bannerShieldContainer {
    margin-right: auto;
}

/*
 * Ensure that tags and shields sit adjacent to each other within the tag wrapper.
 * The equaliseTagWidths() function in JavaScript normalises the width of
 * all tag elements across rows.  Therefore, we no longer need to space the
 * tag and shield to opposite ends of the wrapper.  Use flex-start
 * justification so the tag appears immediately before the shield (or
 * vice versa in the row-reverse orientation).  Removing automatic margins
 * prevents the shield from being pushed to either side, which could
 * introduce inconsistent offsets between rows.
 */
.controlShieldRowLeft .tagBannerWrapper {
    justify-content: flex-start;
}

.controlShieldRowRight .tagBannerWrapper {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/* Reset automatic margins on wrapper children to avoid pushing shields
   within their wrappers.  The equalised tag widths handle alignment
   instead. */
.controlShieldRowLeft > .bannerShieldContainer,
.controlShieldRowRight > .bannerShieldContainer {
    margin-left: 0;
    margin-right: 0;
}

/* ================================================================
 * Custom additions for icon handling, arrow images and the new
 * "Exit Only New" guide‑arrow style.  These rules appear near the
 * end of the stylesheet so that they override earlier definitions.
 * --------------------------------------------------------------- */

/* Inline icons inserted via /a/ and /t/ codes.  Scale icons relative
 * to the surrounding text and align them with the baseline.  A slight
 * negative vertical offset helps the pictogram sit flush with
 * adjacent letters. */
/*
 * Inline pictogram icons inserted via the `/a/` and `/t/` control‑city codes.
 * Increase the overall size so that the symbols harmonise with the cap‑height
 * of the following text.  The negative vertical‑align positions the base
 * of the icon on the same baseline as adjacent characters.
 */
.inlineIcon {
    display: inline-block;
    height: 1.15em;
    width: auto;
    vertical-align: -0.22em;
    margin-right: 0;
    box-sizing: border-box;
}
.routeNumber {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    white-space: pre;
}
.routeNumber .inlineIcon {
    height: 0.92em;
    vertical-align: -0.14em;
    margin-right: 0;
}

.routeNumber.iconOnly {
    width: auto;
    left: 50%;
    top: 50% !important;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.routeNumber.iconOnly .shieldBareIcon {
    display: block;
    width: auto;
    height: 0.92em;
    max-width: none;
}



/*
 * When a left‑position row includes a directional banner placed to the right of
 * the shield, use a three‑column grid instead of the default two columns.  The
 * first column still contains the tag (if any) and the shield; the second
 * column holds the control text; and the third column holds the separate
 * right‑hand banner.  Using max‑content for the first and third columns
 * ensures that each column expands only as much as needed for its content,
 * while the middle column grows to fill the remaining width.  A consistent
 * column gap preserves breathing room between columns.
 */
/* When a left‑position row includes a banner placed to the right of the shield,
   treat the entire shield/tag/banner group as a single flex item.  A flex
   layout avoids placing the right‑hand banner in a separate grid column,
   which would otherwise cause its horizontal starting point to vary with
   control‑text length.  Using display:flex keeps the banner immediately
   adjacent to the shield and allows equalised wrapper widths to anchor
   the group consistently across rows. */
/*
 * For left‑position rows with a banner on the right of the shield, use the
 * standard two‑column grid defined for all left‑position rows.  The row
 * remains a grid so that the tag/shield wrapper and control text align
 * consistently.  Align items vertically within the row.  The wrapper
 * itself handles horizontal positioning of the tag, shield and banner.
 */
.controlShieldRowLeft.hasRightBanner {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.15rem;
    align-items: center;
}

/*
 * When a right‑position row includes a directional banner placed to the
 * left of the shield, treat the entire group as a single flex item.  A
 * flex layout allows the tag, left‑hand banner and shield to be
 * horizontally aligned without resorting to grid.  Align items
 * vertically so the banner sits level with the shield and tag.  This
 * rule applies only to rows marked with .hasLeftBanner to avoid
 * interfering with the default right‑positioned layout.
 */
.controlShieldRowRight.hasLeftBanner {
    display: flex;
    align-items: center;
}

/*
 * Override the wrapper layout for right‑position rows when a left‑hand
 * banner has been separated.  By default, right‑position rows use
 * row-reverse to place the small tag to the right of the shield.  In
 * the left‑banner case we want the tag to remain on the left, with
 * the banner immediately after it and the shield last.  Use a
 * standard row direction and align items on the vertical centre.  Use
 * flex-start justification so the tag, banner and shield sit flush
 * against each other on the left side of the wrapper.  Spacing
 * between elements is provided via explicit margins on the banner.
 */
.controlShieldRowRight.hasLeftBanner .tagBannerWrapper {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

/*
 * Left‑hand banners inserted into right‑position rows.  Mirror the
 * styling of right‑hand banners used on left‑position rows.  A
 * modest right margin separates the banner from the shield.  The
 * margin and padding values mirror those used for .rightBannerInside
 * so that both orientations look consistent.  Banners always use
 * Series EM capitals and a unit line height.
 */
.controlShieldRowRight .leftBannerInside {
    font-family: "Series EM";
    font-size: 1rem;
    text-transform: uppercase;
    padding: 0 0.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.1rem;
    margin-right: 0.20rem;
}

/*
 * Simplified alignment fix for left‑positioned shield rows (v52):
 * Ensure that the tag/shield wrapper and any separated banners stretch to
 * the full height of their parent row and centre their children
 * vertically.  Without an explicit height the wrapper collapses to
 * its content height, causing banners and control text to sit flush
 * against the top of the shield.  These rules apply only to the
 * left‑shield layout to avoid unintended side effects elsewhere.
 */
.controlShieldRowLeft .tagBannerWrapper,
.controlShieldRowLeft > .bannerShieldContainer {
    /* Fill the height of the grid row so that flex centring can align
       small tags, shields and banners relative to the tallest element. */
    height: 100%;
    /* Use flexbox to vertically centre the tag and shield.  The
       horizontal justification is controlled below. */
    display: flex;
    align-items: center;
}

/* For left rows with a separated right‑hand banner, keep the tag,
   shield and banner grouped together at the start of the wrapper.
   Do not stretch them apart. */
.controlShieldRowLeft.hasRightBanner .tagBannerWrapper {
    justify-content: flex-start;
}

/* For left rows without a separated banner, push the shield to the
   right edge of its wrapper so that shields align across rows.
   Space between ensures the tag hugs the left and the shield hugs
   the right. */
.controlShieldRowLeft:not(.hasRightBanner) .tagBannerWrapper {
    justify-content: space-between;
}

/* When a right‑hand banner is inserted inside the tag/shield wrapper
   (e.g. “North” placed to the right of the shield on left rows),
   stretch it to fill the wrapper height and centre the text
   vertically.  Without this the banner text clings to the top of
   the shield. */
.controlShieldRowLeft .rightBannerInside {
    height: 100%;
    display: flex;
    align-items: center;
}

/*
 * Style a banner that has been separated from the shield container and placed
 * in its own grid column on left‑position rows.  The styling mirrors the
 * existing .banner rules so that directional banners rendered outside the
 * shield container look visually consistent with those rendered inside.
 * A left margin equal to the tag/badge spacing (0.20rem) provides separation
 * between the control text and the banner.
 */
/* A right‑hand banner that appears inside the shield/tag wrapper on a left
   shield row.  It mirrors the styling of internal banners so that
   separated directional labels look consistent with banners drawn on
   shields themselves.  A modest left margin separates the banner from
   the shield. */
.controlShieldRowLeft .rightBannerInside {
    font-family: "Series EM";
    font-size: 1rem;
    text-transform: uppercase;
    padding: 0 0.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.1rem;
    margin-left: 0.20rem;

    /* Expand the banner to fill the height of its wrapper.  Without a
       defined height, the banner’s content may sit higher than the
       shield and tag.  Using 100% ensures the banner matches the
       wrapper’s height and the text is vertically centred via
       align-items. */
    height: 100%;
}

/* When a row has a separated right‑hand banner, do not push the shield to
   the far right of the wrapper.  Instead, align items flush to the left
   and rely on consistent wrapper widths and explicit margins to maintain
   separation between the tag, shield and banner. */
.controlShieldRowLeft.hasRightBanner .tagBannerWrapper {
    /* When a right‑hand banner has been separated and inserted into the
       shield/tag wrapper on a left‑position row, align all children
       vertically so the banner sits on the same mid‑line as the tag
       and shield.  Use flex-start horizontally to line up the tag,
       shield and banner in sequence. */
    justify-content: flex-start;
    align-items: center;
}


/* To ensure the shield itself aligns consistently across rows when the
   shield is positioned left or right of the control text, push the shield
   to the opposite edge of its wrapper.  Using space-between divides any
   extra width evenly, placing the tag at one end and the shield at the
   other.  This works in conjunction with equalised wrapper widths to
   guarantee that all shields line up vertically regardless of tag length. */
.controlShieldRowLeft .tagBannerWrapper {
    justify-content: space-between;
}
/*
 * For right‑positioned shields, always place the small tag to the left
 * of the shield.  Using row direction ensures the tag precedes the
 * shield in the markup.  The space-between justification pushes the
 * shield to the far right of the wrapper so it aligns with the
 * control text column, while the tag hugs the left edge.
 */
.controlShieldRowRight .tagBannerWrapper {
    flex-direction: row;
    justify-content: space-between;
}

/* ----------------------------------------------------------------
 * v53 left-mode spacing fix
 *
 * Keep right-side banners in the same right-content column as ordinary
 * control text so mixed rows do not change the measured width of the
 * left tag+shield block.  This is intentionally limited to
 * shield-position:left rows.
 * ---------------------------------------------------------------- */
.controlShieldRowLeft {
    display: flex;
    align-items: center;
    gap: 0.20rem;
}

.controlShieldRowLeft .rowRightContent {
    display: flex;
    align-items: center;
    gap: 0.20rem;
    min-width: 0;
}

.controlShieldRowLeft .rowRightContent > .rightBannerInside {
    margin-left: 0;
    height: auto;
}


/* v59 yellow stripe refinements */
.actionMessage {
    gap: 0;
}
/* Add a tiny bit more spacing between words on every yellow stripe line,
   whether numbers are present or not, without adding any space at the far
   left or far right edges. */
.actionMessage .actionTextChunk {
    word-spacing: 0.16em;
}
/* Keep explicit spacing between word chunks and number groups, but make it
   subtle: slightly more than v56, slightly less than v57. */
.actionMessage .actionOuterSpacer {
    display: none;
}
/* Preserve only the intentional internal mixed-number gap. */
.actionMessage .actionNumberSpacer {
    display: inline-flex;
    align-items: center;
    white-space: pre;
    flex: 0 0 auto;
}
.actionMessage .numeral {
    margin-left: 0;
    margin-right: 0;
}
/* Only full numbers and full number+letter get the slight top increase. */
.actionMessage.hasFullNumber {
    padding-top: 0.08em;
}
/* Make all fractions slightly smaller; keep mixed-number fractions a touch
   smaller still. */
.actionNumberGroup.fractionOnly .fraction {
    font-size: 0.88em;
}
.actionMessage .mixedFraction {
    font-size: 0.80em;
}



/* v60: stronger yellow-stripe numeral / fraction contrast only */
.actionMessage .numeral {
    /* Make full numbers clearly larger again */
    font-size: 1.56rem;
    line-height: 0.98;
    display: inline-flex;
    align-items: center;
    /* Balanced optical extension above/below the words */
    transform: translateY(-0.01em);
}

.actionNumberGroup.fractionOnly .fraction {
    /* Make standalone fractions visibly smaller */
    font-size: 0.78em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.actionMessage .mixedFraction {
    /* Mixed-number fractions should read smaller than the whole number */
    font-size: 0.72em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transform: translateY(-0.01em);
}


/* v61: explicit yellow-stripe number/fraction rendering */
.actionMessage .actionNumberGroup.fullOnly {
    transform: translateY(-0.01em) !important;
}
.actionMessage .numeral {
    font-size: 1.16em !important;
    line-height: 0.96 !important;
    display: inline-flex !important;
    align-items: center !important;
    transform: translateY(-0.01em) !important;
}

.actionMessage .fraction.fractionStructured {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}
.actionMessage .fraction.fractionStructured .fractionNumerator,
.actionMessage .fraction.fractionStructured .fractionDenominator {
    display: inline-block;
    font-size: 0.72em;
    line-height: 1;
}
.actionMessage .fraction.fractionStructured .fractionNumerator {
    transform: translateY(-0.28em);
}
.actionMessage .fraction.fractionStructured .fractionDenominator {
    transform: translateY(0.22em);
}
.actionMessage .fraction.fractionStructured .fractionSlash {
    display: inline-block;
    font-size: 0.92em;
    line-height: 1;
    margin: 0 0.02em;
}
.actionNumberGroup.fractionOnly .fraction.fractionStructured {
    font-size: 0.88em !important;
}
.actionMessage .mixedFraction.fractionStructured {
    font-size: 0.78em !important;
}




/* v63: authoritative yellow-stripe numeral/fraction rendering */
.actionMessage .numeral {
    font-size: 1.34em !important;
    line-height: 0.88 !important;
    display: inline-flex !important;
    align-items: center !important;
    transform: none !important;
}

.actionMessage .fraction {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    transform: none !important;
    font-variant-numeric: normal !important;
}

.actionNumberGroup.fractionOnly .fraction {
    font-size: 0.82em !important;
}

.actionMessage .mixedFraction {
    font-size: 0.72em !important;
}

.actionMessage .fractionStructured,
.actionMessage .fractionNumerator,
.actionMessage .fractionSlash,
.actionMessage .fractionDenominator {
    all: unset;
}


/* v66 final yellow-stripe numeral/fraction tuning */
.actionMessage .numeral {
    transform: none !important;
    line-height: 0.9 !important;
}
.actionMessage .fraction {
    line-height: 0.9 !important;
}
.actionMessage .actionNumberSpacer {
    width: auto !important;
    flex: 0 0 auto !important;
}


/* v67: one extra word<->fraction space only */
.actionNumberGroup.fractionOnly .fraction {
    margin-left: 0.12em;
    margin-right: 0.12em;
}
.actionNumberGroup.mixed .fraction {
    margin-right: 0.12em;
}


/* v68: one more extra word<->fraction space only */
.actionNumberGroup.fractionOnly .fraction {
    margin-left: 0.24em;
    margin-right: 0.24em;
}
.actionNumberGroup.mixed .fraction {
    margin-right: 0.24em;
}


/* v69: add three more extra word<->fraction spaces only */
.actionNumberGroup.fractionOnly .fraction {
    margin-left: 0.60em;
    margin-right: 0.60em;
}
.actionNumberGroup.mixed .fraction {
    margin-right: 0.60em;
}


/* v78: exit-tab spacing refinements only */
.exitTab {
    word-spacing: 0.08em;
}


/* v79: exit-tab manual spacing + larger tab text only */
.exitTab {
    /* Preserve user-typed spaces instead of injecting hardcoded gaps */
    white-space: pre;
    /* Larger overall exit-tab text, still below control-city scale */
    font-size: 1.2rem !important;
    word-spacing: normal !important;
}

.exitTab .numeral {
    /* Keep exit numerals proportionally larger than exit-tab words */
    font-size: 1.28em !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transform: none !important;
    margin: 0 !important;
}


/* v81 rebuilt preview label/layout classes */
.customShieldPackage {
    display: flex;
    gap: 1.15rem;
}
.customShieldPackage.abovebelow {
    justify-content: center;
    align-items: flex-start;
}
.customShieldPackage.leftmode,
.customShieldPackage.rightmode {
    flex-direction: column;
    gap: 0.65rem;
    align-items: flex-start;
}
.customShieldUnit {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.customShieldTop {
    min-height: 1.25rem;
    margin-bottom: 0.35rem;
}
.customShieldMiddle {
    display: flex;
    align-items: center;
}
.font1Text {
    font-family: "Series E";
    font-size: 1rem;
    text-transform: uppercase;
    line-height: 1;
    white-space: pre;
}
.font1Left {
    margin-right: 0.45rem;
}
.font1Right {
    margin-left: 0.45rem;
}
.enhancedSideText {
    display: flex;
    align-items: center;
    margin-left: 0.45rem;
    white-space: pre;
}
.rightmode .enhancedSideText {
    margin-left: 0;
    margin-right: 0.45rem;
}
.enhancedInner {
    font-family: "Series EM";
    font-size: 1.5rem;
    line-height: 1;
    white-space: pre;
}
.abovebelowControlText {
    text-align: center;
    font-family: "Series EM";
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 0;
}
.abovebelowControlText.aboveModeControlText {
    margin-top: 0;
    margin-bottom: 0;
}
.abovebelowControlText.belowModeControlText {
    margin-top: 0;
    margin-bottom: 0;
}
.abovebelowInterBlockSpacer {
    height: 0.45rem;
    min-height: 0.45rem;
    flex: 0 0 0.45rem;
}
.abovebelowInterBlockSpacer.aboveModeSpacer {
    height: 0.08rem;
    min-height: 0.08rem;
    flex-basis: 0.08rem;
}
.abovebelowInterBlockSpacer.belowModeSpacer {
    height: 0.45rem;
    min-height: 0.45rem;
    flex-basis: 0.45rem;
}
.abovebelowControlText .leftAlignedLine {
    display: inline-block;
    width: 100%;
    text-align: left;
    vertical-align: top;
}
.signContentContainer.customMode {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.signContentContainer.customMode.leftmode,
.signContentContainer.customMode.rightmode {
    align-items: flex-start;
}
.signContentContainer.customMode.leftmode.centeredOverBottomArrows,
.signContentContainer.customMode.rightmode.centeredOverBottomArrows {
    align-items: center;
}
.signContentContainer.customMode.abovemode {
    padding-bottom: 0.34rem;
}
.signContentContainer.customMode.belowmode {
    padding-bottom: 0;
}
.sign.hasExactSideArrow .signContentContainer.singleControlLineWithExactSideArrow {
    transform: translateY(-0.12rem);
}


/* v84 explicit preview geometry for new model */
.customShieldPackage.abovebelow {
    display: grid;
    row-gap: 0.35rem;
    align-items: center;
    justify-content: center;
}
.customShieldPackage.abovebelow.belowModePackage {
    row-gap: 0.35rem;
}
.customShieldPackage.sidegrid {
    display: grid;
    row-gap: 0.35rem;
    align-items: center;
}
.customShieldCell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.customShieldTopCell {
    min-height: 1.25rem;
}

.customCollectiveTopCell {
    align-self: end;
}
.collectiveTopWrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.collectiveTopLine {
    flex: 1 1 auto;
    border-top: 0.12em solid currentColor;
}
.collectiveTopText {
    margin-left: 0.45em;
    margin-right: 0.45em;
}
.font1ExteriorLeft {
    margin-right: 0.45rem;
}
.font1ExteriorRight {
    margin-left: 0.45rem;
}
.font1Gap {
    margin-left: 0.45rem;
    margin-right: 0.45rem;
}
.font1GapShiftTowardLeft {
    transform: translateX(0);
}
.font1GapShiftTowardRight {
    transform: translateX(0);
}
.sideLabelLeft {
    margin-right: 0.45rem;
}
.sideLabelRight {
    margin-left: 0.45rem;
}
.sideEbtbLeft {
    margin-left: 0.45rem;
}
.sideEbtbRight {
    margin-right: 0.45rem;
}
.sideRightFixedCell {
    justify-content: flex-start;
}
.sideEbtbLeft .font1Text,
.sideEbtbRight .font1Text,
.leftmode .font1Right,
.rightmode .font1Right {
    display: inline-block;
    text-align: left;
}
.leftmode .sideEbtbLeft,
.leftmode .sideEbtbLeft .font1Text {
    width: 100%;
    justify-content: flex-start;
}


/* v86 explicit geometry refinements */
.customShieldPackage.abovebelow {
    column-gap: 0;
    row-gap: 0.35rem;
}
.customShieldPackage.sidegrid {
    column-gap: 0;
}


/* v88 preview lane-collapse tweaks */
.customShieldTopCell.emptyTop,
.customShieldCell.emptySide {
    display: none;
}

.customShieldGapSpacer {
    min-width: 0.62rem;
    width: 0.62rem;
    height: 1px;
}


/* v95 targeted icon family + yellow stripe + left-mode shortcut adjustments */
.actionMessage .actionTextChunk {
    word-spacing: 0 !important;
}
.actionNumberGroup {
    transform: none !important;
}
.actionMessage .actionNumberGroup.fullOnly {
    transform: translateY(-0.10em) !important;
}
.actionNumberGroup.fractionOnly .fraction,
.actionNumberGroup.mixed .fraction,
.actionMessage .fraction,
.actionMessage .mixedFraction {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.actionSpaceChunk,
.actionNumberSpacer {
    white-space: pre !important;
}
.shortcutEnhanced {
    width: 100%;
    justify-content: flex-start;
}
.font1ShortcutLeft {
    margin-left: 0;
    text-align: left;
    display: inline-block;
}




#postContainer.polePositionRural .signContainer::before,
#postContainer.polePositionRural .signContainer::after,
#postContainer.polePositionSolo .signContainer::before,
#postContainer.polePositionSolo .signContainer::after {
    content: none !important;
}
#postContainer.polePositionRural .signContainer,
#postContainer.polePositionSolo .signContainer {
    position: relative;
    display: inline-block;
}
#postContainer.polePositionRural .sign {
    position: relative;
    overflow: visible;
}
#postContainer.polePositionSolo .sign {
    position: relative;
    overflow: visible;
    z-index: 0;
    isolation: isolate;
}
#postContainer.polePositionRural .sign .sideSupportPosts {
    position: absolute;
    left: 0;
    top: calc(100% + 0.02rem);
    width: 100%;
    height: 8rem;
    pointer-events: none;
    z-index: 5;
}
#postContainer.polePositionRural .sign .sideSupportPost {
    position: absolute;
    top: 0;
    width: 1.35rem;
    height: 8rem;
    background: linear-gradient(
        90deg,
        rgb(191, 191, 191) 0%,
        rgb(240, 240, 240) 40%,
        rgb(128, 128, 128) 100%
    );
}
#postContainer.polePositionRural .sign .sideSupportPost.left {
    left: 20%;
    transform: translateX(-50%);
}
#postContainer.polePositionRural .sign .sideSupportPost.right {
    left: 80%;
    transform: translateX(-50%);
}

#postContainer.polePositionSolo .sign .soloSupportPosts {
    position: absolute;
    left: 0;
    top: calc(100% + 0.02rem);
    width: 100%;
    height: 8rem;
    pointer-events: none;
    z-index: -1;
}
#postContainer.polePositionSolo .sign .soloSupportPost {
    position: absolute;
    top: 0;
    width: 0.8rem;
    height: 8rem;
    background: linear-gradient(
        90deg,
        rgb(191, 191, 191) 0%,
        rgb(240, 240, 240) 40%,
        rgb(128, 128, 128) 100%
    );
}
#postContainer.polePositionSolo .sign .soloSupportPost.left {
    left: 20%;
    transform: translateX(-50%);
}
#postContainer.polePositionSolo .sign .soloSupportPost.right {
    left: 80%;
    transform: translateX(-50%);
}