.menupanel, .menupanel > .aoci { 
	overflow:visible; 
}

.aos__menu:not(.mobile).smooth * { 
	transition: all .3s ease;
}

/* KEEP THIS AT TWO CLASSES (0,2,0). It deliberately TIES with `.aos__menu.mobile`
   further down, which sets position:inherit, and the later rule wins on source order —
   that tie is what lets a burger panel escape its cell and span the design row.
   Adding a third :not() here (e.g. :not(.mega)) raises specificity to 0,3,0, wins
   outright, and silently collapses every burger panel to the width of its icon.
   Mega Menu opts out below instead, at matching specificity. */
.aos__menu:not(.fullwidth) {
	position:relative;
}

.aos__menu a[class*="-N"]:not(.aos-FWB), 
.aos__menu a[class*="-N"]:not(.aos-FWB):hover,
.aos__menu a[class*="-WYSEdit"]:not(.aos-FWB), 
.aos__menu a[class*="-WYSEdit"]:not(.aos-FWB):hover { 
	text-decoration:none; 
	font-weight: inherit;
}

.aos__menu:not(.in-page):not(.mobile), 
.aos__menu:not(.in-page):not(.mobile) .aos__menu__l1 { 
	height:100%;
}
		
.aos__menu.dropdown .sublevel,
.aos__menu.fullwidth .sublevel { 
	position:absolute;
	z-index:1111;
	left:0; 
}
.aos__menu.dropdown .aos__menu__node:not(.aos-W100),
.aos__menu.fullwidth .aos__menu__node:not(.aos-W100) {
    flex-shrink: 0;
}

.aos__menu:not(.dropdown) .sublevel/*,.aos__menu .aoci*/{
	width: 100%;
}

.aos__menu__node.tree:not(.activeNode){
	overflow: hidden;
}

.aos__menu .aos-DF.component{
	flex-direction:column;
}

.aos__menu div[id*="aoc-Panel"] {
	position: relative !important;
}
.aos__menu div[id*="aoc-Panel"] .activePanel,
.aos__menu .activePanel div[id*="aoc-Panel"] {
   transition: none;
}

.aos__menu.dropdown .aos__menu__node.aos__DONode > div.sublevel {
	position: absolute;
	left: 0;
	width: 100%;
}

.aos__menu__node .aor{
	width:100%;
}

/* Dropdown Menu */
.aos__menu.dropdown .aos__menu__node:not(.aos__DONode) {
	position:relative; 
}

.aos__menu.dropdown .sublevel { 
	width: max-content;
}
.aos__menu.dropdown .aos__menu__l2.sublevel,
.aos__menu.dropdown .aos__menu__l3.sublevel { 
	min-width: 100%;
}

.aos__menu .aos__menu__node > *[class*="-Border"] { 
	border-radius:0;
}
/* Drop the trailing divider on the last node of a level: in a stacked list its bottom border
   doubles up with the panel edge, and on a level 1 bar its right border leaves a dangling rule.
   Level 2 is exempted for Mega Menu — there the level 2 nodes are grid CELLS, not a stack, so
   ":last-of-type" is just whichever column heading happens to be last in the DOM and its
   underline is load-bearing, not redundant. */
.aos__menu .aos__menu__l1 > .aos__menu__node:last-of-type > *[class*="-Border"],
.aos__menu:not(.mega) .aos__menu__l2 > .aos__menu__node:last-of-type > *[class*="-Border"],
.aos__menu .aos__menu__l3 > .aos__menu__node:last-of-type > *[class*="-Border"] {
	border:0 none;
}

.aos__menu:not(.in-page):not(.mega) .sublevel:not(.activeLevel) {
	display:none;
}

/* Mega Menu: ONLY the level 2 panel opens and closes. Level 3 is rendered permanently open
   inside it, so it must not be caught by the blanket .sublevel rule above. */
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2:not(.activeLevel) {
	display:none;
}

/* Dropdown menu alignment */

.aos__menu.dropdown .aos__menu__l2 .aos__menu__l3 { 
	position: absolute;
	left: 100%;
	top: 0; 
}	

/* AUTO */
.aos__menu.dropdown .aos__menu__l2.rhc { 
	left: auto;
	right:0; 
}
.aos__menu.dropdown .aos__menu__l2.rhc .aos__menu__l3 { 
	left: auto;
	right:100%; 
}

/* LEFT */
.aos__menu.dropdown.left .aos__menu__l2 { 
	left: 0;
	right:auto; 
}

/* RIGHT */
.aos__menu.dropdown.right .aos__menu__l2 { 
	left: auto;
	right:0; 
}

/* CENTER */
.aos__menu.dropdown.center .aos__menu__l2 { 
  left: 50%;
  right: auto;
	transform: translateX(-50%);
}

/******************************* MEGA MENU *******************************
   Level 1 behaves like a Dropdown / Full Width bar. Its level 2 panel spans the design row and
   lays the level 2 nodes out on the Item Grid (grid-template-columns generated per-DE in
   DC_MenuDisplay.cfc). Each grid cell is one level 2 heading plus its permanently-open level 3
   list, so within the panel nothing toggles — only the panel itself opens and closes. */

/* The panel. Fills whichever positioned ancestor it escapes to — normally the full-width design
   row — and stacks above following content. Capped by the Mega Menu Panel Max Width setting and
   placed by the Dropdown Menu Alignment setting.
   Two values arrive from getDesignElementCSS as plain lengths, deliberately: the generated skin CSS
   is put through YUI Compressor 2.4.8, which predates calc()/min() and strips units off zeros, so
   all the arithmetic has to live in this file, which is served raw. It also means none of these
   rules need media queries of their own — they re-derive as --aos-mega-gap changes per breakpoint.
     --aos-mega-gap        the Item Grid gap: column gutter AND panel padding
     --aos-mega-panel-max  the Panel Max Width setting */
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 {
	position: absolute;
	z-index: 1111;
	left: 0;
	width: 100%;
	max-width: var(--aos-mega-panel-max, none);
	gap: var(--aos-mega-gap, 0px);
	padding: var(--aos-mega-gap, 0px);
}

/* --- Column order ---
   The columns read in document order DOWN each column: 3 groups over 2 columns give 1,2 in the
   first and 3 in the second; 4 over 2 give 1,2 and 3,4 (Mark, 4-Aug-2026). Grid fills row-major by
   default, which would put 1,3 in the first column, so the flow is switched to column-major — and
   column-major only lands correctly when grid is told how many rows to fill.

   --aos-mega-rows* is ceil(items / columns), emitted inline per panel by getMegaPanelRows in
   DC_MenuDisplay.cfc: the row count depends on each panel's own item count, which the generated
   per-DE CSS cannot see. Hence the media queries here, which the rest of the Mega Menu rules avoid.

   All of this applies to BOTH Mega Menu modes, because "Balance the Megamenu Columns" changes what
   is gridded, not how: by default the items are the level 2 groups, balanced they are the
   .aos__menu__col wrappers. Either way --aos-mega-rows is ceil(items / columns) over whatever the
   items happen to be, so a narrower breakpoint reflows finished columns exactly as it reflows loose
   groups. Do not scope these rules to one mode. */
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 {
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--aos-mega-rows, 1), auto);
}
@media screen and (max-width:1024px) {
	.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 {
		grid-template-rows: repeat(var(--aos-mega-rows-1, 1), auto);
	}
}
@media screen and (max-width:799px) {
	.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 {
		grid-template-rows: repeat(var(--aos-mega-rows-2, 1), auto);
	}
}
@media screen and (max-width:599px) {
	.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 {
		grid-template-rows: repeat(var(--aos-mega-rows-3, 1), auto);
	}
}
@media screen and (max-width:479px) {
	.aos__menu.mega > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 {
		grid-template-rows: repeat(var(--aos-mega-rows-4, 1), auto);
	}
}

/* --- Balanced columns (Mega Menu > Balance the Megamenu Columns) ---
   A column becomes a real element: DC_MenuDisplay.cfc packs the level 2 groups into
   .aos__menu__col wrappers by line count, so a column can hold several groups and the columns come
   out roughly level. The wrappers are then the grid items, so everything above still applies.

   Why a wrapper rather than CSS columns. Multi-column was the obvious answer and was tried first,
   but column-fill:balance settles on a column height BEFORE placing anything, so any group taller
   than that height gets fragmented however emphatically break-inside:avoid asks otherwise. On lion
   it split "BR NAVIGATION" in half and stranded its last two links at the top of the next column
   (26-Aug-2026). A group is only safe from being split if it sits in a box of its own — hence this.

   The wrapper stacks its groups and spaces them with the Item Grid gap, so the space between two
   groups in a column matches the space between the columns themselves. gap on the parent, not
   margins on the groups, which also leaves the groups' own DS borders and backgrounds untouched. */
.aos__menu.mega.balanced .aos__menu__col {
	display: flex;
	flex-direction: column;
	gap: var(--aos-mega-gap, 0px);
	min-width: 0;
}

/* Level 1 bar: items keep their intrinsic width instead of being squeezed by the flex row
   (mirrors the dropdown/fullwidth rule near the top of this file). */
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node:not(.aos-W100) {
	flex-shrink: 0;
}

/* .tree nodes get overflow:hidden until they are .activeNode. Mega level 2 headings are .tree
   (they have children) but never become active, so that would make every grid cell a new block
   formatting context for no reason.

   The second selector is the balanced mode, where the group sits one level deeper inside its
   .aos__menu__col wrapper. Both are needed: matching only the direct child would silently clip
   every group in a balanced panel. */
.aos__menu.mega .aos__menu__l2 > .aos__menu__node.tree,
.aos__menu.mega .aos__menu__l2 > .aos__menu__col > .aos__menu__node.tree {
	overflow: visible;
}

/* --- Fit Content to Row Width ---
   The panel is deliberately wider than the page content — that is the point of a mega menu — but the
   columns inside it should still line up with the rest of the page. So inset them by the half
   difference between the panel and the row, which lands the content area exactly on the row's width.

   --aos-row-max-width is the row's own max-width, published beside it by the row generator in
   DC_DesignCentre.cfc. It inherits down the DOM, so it reaches this panel even though the panel has
   positioned itself outside the row's box. That avoids hardcoding a width, and it tracks whatever
   each row is set to — px, a percentage, or a different value at every breakpoint.

   min(100%, --aos-mega-panel-max) is the panel's own width: percentage padding resolves against the
   containing block, so bare 100% would be the row's full-width ancestor rather than the capped panel.

   max(--aos-mega-gap, ..) is what handles narrow screens. Below the row's max-width the difference
   goes negative, the gap wins, and this becomes an ordinary gap-sized inset — no overhang, no
   negative offsets, nothing to clip. Fallbacks are chosen so a missing value collapses its own term:
   no row max-width -> 100% -> the difference is 0 -> the gap wins. */
.aos__menu.mega.fitrow > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 {
	/* The inset is symmetric, so it only lands on the row if the panel is centred too. Matters
	   once Panel Max Width caps the panel: left-aligned, a 1500px panel inside a 1900px page would
	   centre its columns on itself rather than on the page. This is why displayDesignElement does
	   not emit the Dropdown Menu Alignment class in this mode. */
	left: 50%;
	transform: translateX(-50%);
	padding-inline: max(
		var(--aos-mega-gap, 0px),
		(min(100%, var(--aos-mega-panel-max, 100%)) - var(--aos-row-max-width, 100%)) / 2
	);
}

/* Panel alignment, used when the Max Width setting makes it narrower than the row. */
.aos__menu.mega.left > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 {
	left: 0;
	right: auto;
}
.aos__menu.mega.right > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 {
	left: auto;
	right: 0;
}
.aos__menu.mega.center > .aos__menu__l1 > .aos__menu__node > .aos__menu__l2 {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

.aos__menu .aos-ToggleLevel > a {
	border-radius:0;
}
.aos__menu .aos-ToggleLevel > span { 
	cursor:pointer;
	width:40px; 
}
.aos__menu .aos__menu__node.tree > .aos-DF:not(.aos-ToggleLevel) > span,
.aos__menu .aos__menu__node.tree > span > span.aos-FS, 
.aos__menu .aos__menu__node.tree > span::after {
	cursor:pointer;
}
.aos__menu__node *[class*="-N"] .aos-FWB{
	color:inherit;
}
.aos__menu.scroll.aos__menu__boxshadow,
.aos__menu:not(.scroll) .aos__menu__l1.aos__menu__boxshadow,
.aos__menu:not(.scroll) .aos__menu__boxshadow:not(.aos__menu__l1) > * {
	box-shadow: 0 5px 5px -3px rgba(0,0,0,.2);
}

/*Burger Menu */
.aos__menu.mobile {
	height: 100%;
	position: inherit;
}
/* Mega Menu needs its panel to position against an ancestor further up the design row so it
   can span wider than the menu bar. Done here rather than as a third :not() on the
   `.aos__menu:not(.fullwidth)` rule at the top of this file — that would raise its specificity
   above `.aos__menu.mobile` above and break every burger panel. Same 0,2,0, later wins. */
.aos__menu.mega {
	position: inherit;
}
.aos__menu.mobile .aos__burger+.aos__menu__l1{
	display: none;
	position: absolute;
	width: 100%;
	z-index:1113;
	max-height: 100vh;	
}
.aos__menu.mobile .aos__burger+.aos__menu__l1:not(:has(.ao-searchde-serchform)){
	overflow-y: auto;
}
.aos__menu.mobile:not(.rhc) .aos__burger+.aos__menu__l1{
	left: 0;
}
.aos__menu.mobile.rhc .aos__burger+.aos__menu__l1{
	right: 0;
}
.aos__menu.mobile .aos__burger:not(.expanded) > .hidemenu{
	display: none;
}
.aos__menu.mobile .aos__burger.expanded > .showmenu{
	display: none;
}
.aos__menu.mobile .aos__burger > i{
	font-size: 33px;
	width: 33px;
}

/******* Default Icons *********/
.aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu__node.tree > span.aos-ToggleLevel > span {
	background-size: 20px;
	background-repeat:no-repeat;
	background-position:center;
}
.aos__menu.mobile .aos__menu__node.tree > span.aos-ToggleLevel > span {
	text-align:center;
	padding: 0 !important;
}

/**** Level 1 ****/

/** -- MOBILE -- **/
.aos__menu.mobile .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel) {
	padding-right:40px;
}
.aos__menu.mobile .aos__menu__l1 > .aos__menu__node.tree > span.aos-ToggleLevel > a {
	width:calc(100% - 40px);
}

.aos__menu.mobile:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after {
	font-family: 'Font Awesome 5 Free';
	content:"\f078"; /* Down Chevron */
	width:20px;
	background-size: auto;
	position:absolute;
	right:10px;
	text-align: center;
	font-size: 11px;
	font-weight: 900;
}
.aos__menu.mobile:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree.activeNode > span:not(.aos-ToggleLevel)::after {	
	content:"\f077"; /* Up Chevron */
}

.aos__menu.mobile .aos__menu__l1 > .aos__menu__node.tree > span.aos-ToggleLevel > span::after {
	font-family: 'Font Awesome 5 Free';
	font-size: 11px;
	font-weight: 900;
	content:"\f078"; /* Down Chevron */
}
.aos__menu.mobile .aos__menu__l1 > .aos__menu__node.tree.activeNode > span.aos-ToggleLevel > span::after {
	content:"\f077"; /* Up Chevron */
}

/** -- Dropdown or Full-width -- **/					
.aos__menu.dropdown .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.fullwidth .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.mega .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.dropdown .aos__menu__l1 > .aos__menu__node.tree > a.hover::after,
.aos__menu.fullwidth .aos__menu__l1 > .aos__menu__node.tree > a.hover::after,
.aos__menu.mega .aos__menu__l1 > .aos__menu__node.tree > a.hover::after {
	width:16px;
	min-height:16px;
	background-size: 100% auto;
	background-repeat:no-repeat;
	margin-left:5px;
}
.aos__menu.dropdown:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.fullwidth:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.mega:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.dropdown:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree > a.hover::after,
.aos__menu.fullwidth:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree > a.hover::after,
.aos__menu.mega:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree > a.hover::after {
	font-family: 'Font Awesome 5 Free';
	content:"\f078"; /* Down Chevron */
	font-size: 11px;
	font-weight: 900;
	display: flex;
  align-items: center;
  justify-content: center;
}
.aos__menu.dropdown:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree.activeNode > span:not(.aos-ToggleLevel)::after,
.aos__menu.fullwidth:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree.activeNode > span:not(.aos-ToggleLevel)::after,
.aos__menu.mega:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree.activeNode > span:not(.aos-ToggleLevel)::after,
.aos__menu.dropdown:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree.activeNode > a.hover::after,
.aos__menu.fullwidth:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree.activeNode > a.hover::after,
.aos__menu.mega:not(.notexticons) .aos__menu__l1 > .aos__menu__node.tree.activeNode > a.hover::after {
	content:"\f077"; /* Up Chevron */
}

/**** Level 2 ****/

/** -- Dropdown -- **/	
.aos__menu.dropdown .aos__menu__l2 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.fullwidth .aos__menu__l2 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.dropdown .aos__menu__l2 > .aos__menu__node.tree > a.hover::after,
.aos__menu.fullwidth .aos__menu__l2 > .aos__menu__node.tree > a.hover::after {
	width:16px;
	min-height:16px;
	background-size: 16px;
	background-position: center right;
	background-repeat:no-repeat;
	margin-left:5px;
}

.aos__menu.dropdown:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.fullwidth:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.dropdown:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree > a.hover::after,
.aos__menu.fullwidth:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree > a.hover::after {
	font-family: 'Font Awesome 5 Free';
	content:"\f054"; /* Right Chevron */
	font-size: 11px;
	font-weight: 900;	
	position: absolute;
	right: 0;
}

/* Level 2 closes the chevron back on itself: Right when collapsed (above), Left when open.
   Full Width shares this because its level 2 opens sideways just like Dropdown — Mobile is the
   only level 2 that expands downwards, so it keeps Down/Up further below. */
.aos__menu.dropdown:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree.activeNode > span:not(.aos-ToggleLevel)::after,
.aos__menu.dropdown:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree.activeNode > a.hover::after,
.aos__menu.fullwidth:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree.activeNode > span:not(.aos-ToggleLevel)::after,
.aos__menu.fullwidth:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree.activeNode > a.hover::after {
	content:"\f053"; /* Left Chevron */
}

/** -- Full-width or Mobile -- **/
/*.aos__menu.fullwidth .aos__menu__l2 > .aos__menu__node.tree > span:not(.aos-ToggleLevel),*/
.aos__menu.mobile .aos__menu__l2 > .aos__menu__node.tree > span:not(.aos-ToggleLevel) {
	padding-right:40px;
}

/*.aos__menu.fullwidth .aos__menu__l2 > .aos__menu__node.tree > span.aos-ToggleLevel > a,*/
.aos__menu.mobile .aos__menu__l2 > .aos__menu__node.tree > span.aos-ToggleLevel > a {
	width:calc(100% - 40px);
}			

.aos__menu.mobile:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after {
	font-family: 'Font Awesome 5 Free';
	content:"\f078"; /* Down Chevron */
	width:16px;
	min-height:16px;
	background-size: 100% auto;
	background-repeat:no-repeat;	
	text-align: center;
	font-size: 11px;
	font-weight: 900;
	position:absolute;
	right:8px;
}
.aos__menu.mobile:not(.notexticons) .aos__menu__l2 > .aos__menu__node.tree.activeNode > span:not(.aos-ToggleLevel)::after {
	content:"\f077"; /* Up Chevron */
}

.aos__menu.fullwidth .aos__menu__l2 > .aos__menu__node.tree > span.aos-ToggleLevel > span,
.aos__menu.mobile .aos__menu__l2 > .aos__menu__node.tree > span.aos-ToggleLevel > span::after {
	font-family: 'Font Awesome 5 Free';
	content:"\f078"; /* Down Chevron */
	font-size: 11px;
	font-weight: 900;
}

.aos__menu.fullwidth .aos__menu__l2 > .aos__menu__node.tree.activeNode > span.aos-ToggleLevel > span,
.aos__menu.mobile .aos__menu__l2 > .aos__menu__node.tree.activeNode > span.aos-ToggleLevel > span::after {
	content:"\f077"; /* Up Chevron */
}

/* Mega Menu is scoped to level 1 in these three: only its level 1 items carry a chevron, so the
   level 2 headings inside the panel must keep normal flow and full-width text. */
.aos__menu.dropdown .aos__menu__node.tree > .aos-DF:not(.aos-ToggleLevel),
.aos__menu.fullwidth .aos__menu__node.tree > .aos-DF:not(.aos-ToggleLevel),
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node.tree > .aos-DF:not(.aos-ToggleLevel) {
	justify-content: space-between;
}
.aos__menu.dropdown .aos__menu__node.tree > .aos-DF:not(.aos-ToggleLevel) > span,
.aos__menu.fullwidth .aos__menu__node.tree > .aos-DF:not(.aos-ToggleLevel) > span,
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node.tree > .aos-DF:not(.aos-ToggleLevel) > span {
	width:100%;
	/*text-align: center;*/
}

.aos__menu.dropdown .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.dropdown .aos__menu__node.tree > a.hover::after,
.aos__menu.fullwidth .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.fullwidth .aos__menu__node.tree > a.hover::after,
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node.tree > span:not(.aos-ToggleLevel)::after,
.aos__menu.mega > .aos__menu__l1 > .aos__menu__node.tree > a.hover::after {
	flex-shrink: 0;
}

/************ COMPONENTS *****************/

/*LOGIN FORM */
.aos__menu form#deLogin div input[type="text"], 
.aos__menu form#deLogin div input[type="password"] { 
	padding:0.5em; 
	min-width:100px;
}	

.aos__menu form { 
	width:100%;
}

.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-email,
.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-password { 
	width:calc(50% - 40px); 
}

.aos__menu form.ao-loginde-horizontal > div.aos-CA { 
	display:flex; 
	align-items: stretch;
}
.aos__menu form.ao-loginde-horizontal div input[type="text"], 
.aos__menu form.ao-loginde-horizontal input[type="password"] { 
	display:flex; 
	height: 100%; 
}

@media screen and (max-width:479px) {
	.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-email { width:100%; padding-right:0; }
	.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-password { width:100%; padding-right:0; }
	.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-submit { width:100%; padding-right:0; }
	.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-bottomlinks { text-align:center; }
}

@media screen and (min-width:480px) {
	.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-email { margin-bottom:0; }
	.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-password { margin-bottom:0; }
	.aos__menu form.ao-loginde-horizontal > div > div.ao-loginde-submit { margin-bottom:0; }
}

.aos__menu .ao-searchde-srchbox {
	padding: 0.5em;
	width: 100%;
	min-height:37px;
}
.aos__menu .ao-searchde-serchform > div:not(.ao-searchde-result) {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
}
.aos__menu .ao-searchde-serchform > div > span {
	display: flex;
}
/* Input span takes only what the button leaves. flex-basis MUST be 0, not auto:
   with auto it claims the input's content width (~180px) up front and competes with
   the button's min-width, overflowing the form whenever Search Form Max Width is set.
   min-width:0 releases the flex auto-minimum so it can shrink below that content width. */
.aos__menu .ao-searchde-serchform > div > span:first-of-type {
	flex: 1 1 0;
	min-width: 0;
}
.aos__menu .ao-searchde-serchform button {
	background-position: center center;
	line-height:normal;
	min-width:37px;
	min-height:37px;
	height:100%;
}
.aos__menu .aos-searchde-srchbox-label {
	position:absolute;
	left:-999999px;
	z-index:-1;
}
.aos__menu .ao-searchde-srchbox:focus:not(:focus-visible) {
	outline:none;
}

.aos__menu .ao-searchde-serchform.image > div > span:nth-of-type(2) {
	min-width: 40px;
}

.aos__menu .ao-searchde-result{ 
	display:none; 
	z-index:9999;
	position:absolute;
	text-align:left;
	max-height:300px;
	overflow-y:auto;
	overflow-x:hidden;
	top: calc(100% + 5px);
	width:100% !important; }
.aos__menu .ao-searchde-result .ao-srchres-thmb { 
	width:80px; 
}
.aos__menu .ao-searchde-result .ao-srchres-thmb+div { 
	width:calc(100% - 80px); 
}
.aos__menu .ao-searchde-result .ao-srchres-avatar { 
	width:50px; 
}
.aos__menu .ao-searchde-result .ao-srchres-avatar+div { 
	width:calc(100% - 50px); 
}
.aos__menu .ao-searchde-result .ao-srchres-label { 
	max-width:200px;
	line-height:110%; 
} 

/****************** HORIZONTAL SCROLL MENU ***************************/

/* The scroll menu sits inside CSS-table cell wrappers (.aori/.aoc = display:table,
   .aoci = display:table-cell). An auto-layout table shrink-wraps to the menu's content
   width and overflows the column instead of scrolling, so the whole page scrolls
   sideways. Force block layout for just this cell chain: the wrappers then fill the
   column (width:100%) and the strip scrolls internally. Scoped via :has so no other
   design cell is affected. TASK-290423 (teiss).

   The :not(.ao-Hide) qualifiers on .aoc are load-bearing - do not simplify them away.
   :has() ignores visibility, so a scroll menu sitting in a HIDDEN cell wrapper (.aoc,
   a breakpoint variant say) still matched the row, and this rule's display:block then
   beat .ao-Hide{display:none} on specificity and un-hid the whole chain - two menus
   painted on top of each other. Wyvex Fish Farmer, Aug 2026. So: only match when a
   VISIBLE .aoc holds the menu, and never force a hidden .aoc to block. */
.aori:has(> .aoc:not(.ao-Hide) > .aoci > .aos__menu.scroll),
.aori:has(> .aoc:not(.ao-Hide) > .aoci > .aos__menu.scroll) > .aoc:not(.ao-Hide),
.aori:has(> .aoc:not(.ao-Hide) > .aoci > .aos__menu.scroll) > .aoc:not(.ao-Hide) > .aoci {
  display: block;
  width: 100%;
}

.aos__menu.scroll {
  overflow: hidden;
  min-width: 0;    /* allow the scroll menu (if a flex item) to shrink to its column */
  max-width: 100%; /* and never grow past it, so the strip scrolls internally instead
                      of expanding to content width and overflowing the viewport.
                      TASK-290423 (teiss). */
}

.aos__menu.scroll .aos__menu__l1 {
  display: flex;
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}


.aos__menu.scroll .aos__menu__navtrack {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;  /* Shrink to container so the track scrolls internally instead of
                    expanding to content width. Container-relative (not viewport), so it
                    never breaks out of a contained/centred layout and overflow detection
                    + scroll work at every breakpoint. TASK-290423 (teiss). */
  -ms-overflow-style: none;  /* IE and Edge */
  scroll-behavior: smooth;
  scrollbar-width: none;  /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.aos__menu.scroll .aos__menu__navtrack::-webkit-scrollbar {
  display: none;
}

/* Scrollable Nav Overflowing */
.aos__menu.scroll .aos__menu__l1.overflowingHSMenu .aos__menu__navtrack {
  justify-content: space-between;
}
.aos__menu.scroll .aos__menu__l1.overflowingHSMenu > button {
  display: flex;
  height: 100%;
}

.inactiveHSMenu {
  opacity: 0;
  visibility: hidden;
  cursor: auto;
}

.aos__menu.scroll .aos__menu__l1 > button {
  cursor: pointer;  
  background-color: #FFF;
  width: 30px;   
  align-items: center;
  justify-content: center;
  display: none;
  position: absolute;
  z-index: 1;
  border: none;
  padding: 0;
}
.aos__menu.scroll .aos__menu__l1 > button.right {
	right:0;
}
.aos__menu.scroll .aos__menu__l1 > button.left {
	left:0;
}
.aos__menu.scroll .aos__menu__l1 button:active,
.aos__menu.scroll .aos__menu__l1 button:focus:not(:focus-visible) {
  outline: none;
  border: none;
}

.aos__menu.scroll .aos__menu__l1 > button:not(.inactiveHSMenu):after {
  position: absolute;
  top: 0;
  left: 30px;
  height: 100%;
  width: 14px;
  content: "";
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
  z-index: 1;
}
.aos__menu.scroll .aos__menu__l1 > button.right:not(.inactiveHSMenu):after {
  background-image: linear-gradient(-90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
  left: -14px;
}
.aos__menu.scroll .aos__menu__l1 > button i {
  z-index: 1;
  font-size: 14px;
  transition: opacity .2s ease-in-out;
}

.aos__menu.scroll .aos__menu__node {
  flex-shrink: 0;
}

.aos__menu.scroll .overflowingHSMenu .aos__menu__node {
  /*height: calc(100% - 17px);*/
  width: auto !important;
}

.aos__menu.scroll .aos__menu__node:last-of-type > * {
	border: none;
}


/**
* Media Queries
**/

@media screen and (min-width: 600px) {

  .aos__menu.scroll .aos__menu__l1 > button:after {
    width: 50px;
  }

  .aos__menu.scroll .aos__menu__l1 > button.right:after {
    left: -45px; 
  } 
  
  .aos__menu.scroll {
    max-height: 60px; 
  }
  .aos__menu.scroll .aos__menu__l1 {
    min-height: 50px;
  }
}

/* Hide node at Breakpoint */
@media screen and (min-width: 1200px){ 
	.aos__menu__BPHide_F{ 
		display:none;
	} 
}
@media screen and (min-width: 1025px) and (max-width: 1199px) { 
	.aos__menu__BPHide_0{ 
		display:none;
	} 
}
@media screen and (min-width: 800px) and (max-width: 1024px) { 
	.aos__menu__BPHide_1{ 
		display:none;
	} 
}
@media screen and (min-width: 600px) and (max-width: 799px) { 
	.aos__menu__BPHide_2{ 
		display:none;
	} 
}
@media screen and (min-width: 480px) and (max-width: 599px) { 
	.aos__menu__BPHide_3{ 
		display:none;
	} 
}
@media screen and (max-width:479px) {  
	.aos__menu__BPHide_4{ 
		display:none;
	}  
}