:root {
    --active-tab-colour: #fde8d8;
    --inactive-tab-colour: #f590b0;
    --title-footer-colour: #e8407a;
}

*{
	margin			: 0px;
}

/* The document must never be horizontally scrollable. body already clipped its own overflow,
   but body is not the root: with the root still scrollable sideways, Chrome widens the layout
   viewport to fit the widest content, and a fixed element anchored to its RIGHT edge then opens
   past the right of the screen. That is what put the phone navigation drawer off-screen on the
   Withdrawals tab, reachable only by pinching out.
   `clip`, not `hidden`, on purpose: `hidden` would make the root a scroll container, and
   #navbar's position:sticky resolves against the nearest scroll container, so the tab bar would
   stop sticking to the viewport. `clip` clips without scrolling and leaves sticky alone. A
   browser too old for `clip` ignores the line and is no worse off than before. */
html{
    overflow-x      : clip;
}

body{
  	color			: #000;
    background      : linear-gradient(to right, #ff66c4, #ff914d);
    background-attachment: fixed;
  	font			: 400 16px/24px Roboto,sans-serif;
  	font-family		: 'Roboto','Helvetica Neue',Helvetica,sans-serif;
  	line-height		: 23px;
    padding-left    : calc(100vw - 100%);
    overflow-x      : clip;
}

/* The page frame: one 1px line on the wrapper, instead of a 2px border restated on each child
   which used to stack up at every seam. Deliberately NOT overflow:hidden, because that would
   make #navbar's position:sticky stick to the wrapper rather than the viewport and the nav
   would scroll away. The banner and footer keep their own corner radii so they follow this
   border's curve without needing to be clipped. */
#wrapper{
	border			: 1px solid #e8407a;
	border-radius	: 6px;
	width			: 100%;
	max-width		: 1000px;
    background      : #ff8fab;
    margin-top      : 10px;
    margin-bottom   : 10px;
	margin-right	: auto;
	margin-left		: auto;
	height			: auto;
    padding-bottom	: 0px;
	padding-top		: 0px;
	box-sizing		: border-box;
}

/* The shell children fill whatever #wrapper allows and never state a cap of their own.
   The width of the page is declared in exactly one place, on #wrapper, in three rules:
   the default, wide-mode, and the wide-screen media query. It used to be restated on all
   six of these as well, which is how the wide-screen change first landed with the page
   still pinned at 1000px: six values were updated and the seventh, the one that actually
   governs, was missed. */
#banner,#statusbar,#navbar,#content,#container,#footer{
	width			: 100%;
	margin			: auto;
	box-sizing		: border-box;
}
/* The artwork is painted as a background; the <img> inside is invisible and exists only to
   give the div its height. The background colour is sampled from the artwork's own edges
   (#2e2a23, consistent on three sides), so where the banner is wider than the image's aspect
   ratio the fill either side is indistinguishable from the image. It is letterboxed, it just
   does not read as letterboxed. 'contain' keeps the whole image visible and centred instead
   of cropping its sides as the old 'auto 100%' did in wide mode. */
/* The artwork is set here AND as the <img> src in form.php: the img is transparent and exists
   only to give the box its height, so both have to name the same brand asset.

   A brand may supply its ground as a CSS value rather than baking it into the image. That is
   what bannerGradient is: the artwork keeps its alpha and this element paints the ground behind
   it, so the ground is always exactly the element's size. Baking a gradient into the image
   instead left a visible seam wherever the image's edge colour met the bar or the page, because
   the two were sized and positioned independently. A brand with a full-bleed banner (PMDES's
   header.png) sets no gradient and gets the single-layer rules it always had. */
#banner{
	height			: auto;
	max-height		: 200px;
	background-color: #2e2a23;
	color			: #fff;
	border-radius	: 6px 6px 0px 0px;
	margin			: 0px auto;
	background-image: url(/images/header.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size	: contain;
	position		: relative;
	z-index			: 0;
	overflow		: hidden;
}
#banner img{
	width: 100%;
	height: auto;
	max-height: 200px;
	opacity:0;
}
/* The status block: page title, who you are, venue and dates. Scrolls away normally.
   It used to be the sticky element, which pinned the whole header and ate the viewport
   on small screens. Only #navbar below is pinned now. */
#statusbar{
    background-color: #e8407a;
}

/* The tab navigation, pinned to the top. This has to be a SIBLING of #statusbar, not a
   child: a sticky element only stays pinned while its own parent is still in view, so
   nesting it inside the status block would scroll it away with the block. */
#navbar{
    position		: sticky;
    top				: 0;
    z-index			: 100;
    background-color: #e8407a;
}

#footer{
	height			: auto;
	border-radius	: 0px 0px 6px 6px;
	background-color: #e8407a;
	margin			: auto;
}

body.wide-mode {
	padding-left	: 0;
}
body.wide-mode #wrapper {
	max-width		: calc(100% - 24px);
}
body.wide-mode #banner {
	background-size		: contain;
	background-position	: center;
}
body.wide-mode #banner img {
	width			: 1000px;
}

#content{
	height			: auto;
	background		: #fff;
	margin			: auto;
	overflow-x		: hidden;
}

#container{
	display			: flow-root;
	background		: #fde8d8;
	text-align		: left;
	position		: relative;
	z-index			: 1;
}
#container3{
	overflow		: hidden;
	background		: #f07aaa;
	text-align		: left;
	position		: relative;
	z-index			: 3;
	border-top		: 2px solid #f07aaa;
	border-left		: 2px solid #f07aaa;
	border-right	: 2px solid #f07aaa;
	box-shadow		: rgba(0, 0, 0, 0.15) -5px -5px 3px 0px, rgba(0, 0, 0, 0.15) 5px -5px 3px 0px;
}

#lcontain,#rcontain,#fourcontain{
	text-align		: center;
    padding-bottom	: 20px;
}

/* ---- Wide screens: fieldsets packed into columns --------------------------------------
   At 1000px the page is a single column, which leaves most of a 4K display empty. Above
   1900px the shell widens and the tiles are packed into two columns by form.php's JS,
   shortest column first so the two sides finish level rather than one running long.
   The packing is JS because no CSS mechanism does shortest-first: multi-column balances by
   splitting content mid-element, and grid fills in source order regardless of height.
   Tiles are whole <form> elements (autoform.php emits one form per fieldset), so moving one
   moves its inputs with it and submission is unaffected. */
#container.packed, #container3.packed{
	/* #container3 is overflow:hidden normally, which makes it a scroll container, and a sticky
	   descendant then sticks to THAT box rather than the viewport. Since the box never scrolls,
	   nothing sticks. The flex context here already contains floats, so the clip is not needed
	   while packed. */
	overflow		: visible;
}
.packcol{
	flex			: 1 1 0;
	min-width		: 0;
}
/* The fieldset margin already provides the gutter; without this the middle gap doubles. */
.packcol > form > fieldset,
.packcol > fieldset{
	width			: calc(100% - 40px);
}

/* Above 1900px the 1000px shell is released and the page uses whatever width is actually
   there, rather than stopping at a second fixed cap. #wrapper has to be in this list: it
   caps everything inside it, so widening only the inner elements leaves the columns
   squeezed into the old width. The column COUNT steps up with the viewport in form.php,
   which is what keeps each column readable instead of just stretching two of them. */
@media only screen and (min-width: 1900px){
	#wrapper{
		max-width	: calc(100% - 40px);
	}
	/* wide-mode tabs declare their own wrapper cap at a higher specificity, so it has to be
	   restated here or they would stay at the 24px gutter while everything else moved. */
	body.wide-mode #wrapper{
		max-width	: calc(100% - 40px);
	}
}

/* ---- Tile roles ------------------------------------------------------------------------
   Instruction tiles are prose, navigation tiles are a picker. Both are read or used once and
   then worked beneath, so on wide screens they pack into the leftmost column (see form.php)
   and the navigation one stays in view while you scroll the content beside it.

   Colours are the brand gradient stops local uses on the social cards, so the two stay
   consistent. Checked for contrast rather than chosen by eye: white text sits at 7.88:1 on
   #5b3fa0, 9.34:1 on #7A1F6E and 5.09:1 on #C42C93, so it clears 4.5:1 across the whole
   sweep. #E8459E was dropped from the gradient at 3.64:1, which only passes for large text.

   Note the legend: a script sets every legend's background from its fieldset's border colour,
   so the border colour here is doing double duty and the legend text is set to match it. */
/* fieldset.instruction-note is the same treatment for a block that cannot be a top-level
   tile. The checkout page is one big form with nested fieldsets, so its guidance cannot be
   lifted out into the column layout without restructuring the payment page. It still reads as
   instruction rather than as more body copy. */
.tile-instruction > fieldset,
fieldset.instruction-note{
	background		: linear-gradient(160deg, #fff8ef 0%, #ffe9d5 100%);
	border			: 1px solid #e3b98f;
	border-left		: 5px solid #ff914d;
}
.tile-instruction > fieldset > legend,
fieldset.instruction-note > legend{
	color			: #000;
	font-style		: italic;
}
fieldset.instruction-note p,
.tile-instruction > fieldset p,
.tile-instruction > fieldset li{
	color			: #3a2a1c;
	line-height		: 1.55;
}

.tile-navigation > fieldset{
	background		: linear-gradient(135deg, #5b3fa0 0%, #7A1F6E 55%, #C42C93 100%);
	/* Border colour is the gradient's FAR end, not its near one. A script paints each legend
	   with its fieldset's border colour, and the legend sits at the top left where this
	   gradient starts at #5b3fa0, so matching that made the legend vanish into the panel.
	   #C42C93 is the opposite stop, so the legend reads as a tab against the purple corner.
	   White on it is 5.09:1. */
	border			: 1px solid #C42C93;
	box-shadow		: 0 2px 14px rgba(91,63,160,.35);
}
.tile-navigation > fieldset > legend{
	color			: #fff;
	font-weight		: bold;
}
/* Everything that is not a control inherits the light-on-dark treatment. */
/* Same ID-rule problem: #container p beats a class selector, so the paragraphs on the dark
   navigation tile were rendering black on purple. */
.tile-navigation > fieldset,
.tile-navigation > fieldset label,
#container .tile-navigation > fieldset p,
#container3 .tile-navigation > fieldset p,
.tile-navigation > fieldset p{
	color			: #fff;
}
/* The control itself stays a normal light control: dark text on white reads better in a
   dropdown than any tinted variant, and it marks the one thing on the tile you act on. */
/* Colour only. The control's geometry belongs to select#soflow, an ID rule carrying the
   padding, width and -webkit-appearance it is built around; overriding the padding here
   pushed the text out of the box and clipped it. */
.tile-navigation > fieldset select,
.tile-navigation > fieldset input{
	background-color: #fff;
	color			: #000;
	border-color	: rgba(255,255,255,.75);
}
.tile-navigation > fieldset select:focus,
.tile-navigation > fieldset input:focus{
	outline			: 3px solid #ffd9f0;
	outline-offset	: 1px;
}

/* The instruction and navigation tiles ride together in a group at the top of the left
   column, and that group is what sticks. Sticking each tile separately would have them
   overlap each other at the same offset as you scroll.

   'can-stick' is added by form.php only when the group is short enough to leave a usable
   slice of viewport below it. A group taller than the screen would pin content permanently
   off the bottom, which is worse than not sticking at all. Only ever applied while packed:
   in a single column there is nothing beside it to scroll past. */
.packcol > .stickygroup.can-stick{
	position		: sticky;
	top				: var(--stickytop, 90px);
	z-index			: 2;
}

/* A form whose body is one fieldset per competitor or per section used to draw a box around a
   stack of boxes, and that outer box also meant the inner ones could not spread across the
   column layout. When form.php packs them (see wideColumns), the wrapper gives up its chrome
   and becomes just the flex context, so the per-competitor fieldsets read as the tiles they
   are. The legend stays as the heading it always was, but is painted explicitly: a script sets
   each legend's background from its fieldset's border colour, and this fieldset no longer has
   one. */
/* The columns live in their own row, not in the wrapper itself. Making the wrapper a flex
   container turned everything beside the fieldsets into a flex item: on checkout the entry
   status heading, the totals and the invoice button each took a column. In a row, that content
   keeps normal flow at full width and only the fieldsets are columnised. */
.packrow{
	display			: flex;
	align-items		: flex-start;
	width			: 100%;
}
fieldset.fieldset-unwrapped{
	border			: 0;
	box-shadow		: none;
	background		: transparent;
	padding			: 0;
	margin			: 0 0 10px;
	width			: 100%;
}
fieldset.fieldset-unwrapped > legend{
	/* #a0334a rather than the lighter brand pink: white on that pink is 3.86:1, which fails
	   for a 16px bold legend. This is 6.85:1. */
	background		: #a0334a !important;
	color			: #fff;
	border-radius	: 6px;
	padding			: 4px 12px;
	margin-bottom	: 6px;
}

/* Entry status sits at the top of the checkout page and is the one thing people come to that
   page to read, so it is given weight rather than being another paragraph. The h1 above it
   carries the state word itself (Complete, or an amount owing); this is the sentence under it.
   Black on the pale ground is 17.7:1. */
p.entry-status{
	font-weight		: bold;
	font-size		: 1.05em;
	margin			: 0 0 4px;
	color			: #231f20;
}
p.entry-status:empty{
	display			: none;
}
p.entry-status-note{
	margin			: 0 0 14px;
	color			: #4a3a40;
}

/* The three figures on the checkout page are one calculation, not three remarks, so they are
   a single panel with the balance marked as the line that matters. Full width and centred: it
   is the summary of the page, not an aside, and it reads as a statement rather than a note in
   the margin.

   Colours are the brand gradient used on the navigation tiles, so the two read as the same
   system. Checked rather than eyeballed: white on #5b3fa0 is 7.88:1 and on #7A1F6E is 9.34:1,
   both clear of 4.5:1. The balance is separated by a rule as well as by size, so it does not
   rely on colour alone. */
.balance-summary{
	background		: linear-gradient(135deg, #5b3fa0 0%, #7A1F6E 100%);
	border			: 0;
	border-radius	: 8px;
	padding			: 18px 20px;
	/* Matches the fieldset rule (margin 20px, width calc(100% - 40px)) so it lines up with the
	   boxes above and below it instead of running to the edges on its own. */
	margin			: 16px 20px;
	width			: calc(100% - 40px);
	box-sizing		: border-box;
	text-align		: center;
	box-shadow		: 0 2px 14px rgba(91,63,160,.3);
}
/* Prefixed with #container deliberately. `#container p { color: black }` is an ID selector and
   silently beats any class rule, so white text set here alone rendered black on the gradient.
   The same trap has now caught the select padding, the styled-select background and this. */
#container .balance-summary p,
#container3 .balance-summary p,
.balance-summary p{
	margin			: 0 0 8px;
	color			: #fff;
	font-size		: 1em;
}
/* Payments received sit inside the summary now, so they need to read as a sub-list within it
   rather than as more body copy. Left-aligned against the centred totals on purpose: a list of
   references and amounts is easier to scan down one edge. */
#container .balance-summary p.balance-heading,
#container3 .balance-summary p.balance-heading,
.balance-summary p.balance-heading{
	margin			: 12px 0 4px;
	font-size		: 0.8em;
	text-transform	: uppercase;
	letter-spacing	: 0.08em;
	opacity			: 0.85;
}
#container .balance-summary p.balance-payment,
#container3 .balance-summary p.balance-payment,
.balance-summary p.balance-payment{
	display			: flex;
	justify-content	: space-between;
	gap				: 12px;
	text-align		: left;
	/* auto margins centre the capped block in the tile. Every other line in this summary is a
	   plain <p>, and the global `p { text-align: center }` centres those, so a left-hugging
	   block here was the odd one out. */
	margin			: 0 auto 3px;
	font-size		: 0.8em;
	opacity			: 0.9;
	/* Capped, not full width. space-between across the whole tile threw the reference against
	   the left edge and the amount against the right, a hand's width apart on a desktop, which
	   stopped reading as one line. Every other line in this summary is plain inline text, so
	   these were also the only ones spreading. The cap keeps the pair together while the
	   amounts still line up under each other, which is the reason for the flex in the first
	   place. */
	max-width		: 34em;
	/* The payment intent reference is long and must not push the amount off the tile. */
	word-break		: break-all;
}
#container .balance-summary p.balance-payment span,
#container3 .balance-summary p.balance-payment span,
.balance-summary p.balance-payment span{
	flex			: 0 0 auto;
	font-weight		: bold;
	word-break		: normal;
}

#container .balance-summary p.balance-line,
#container3 .balance-summary p.balance-line,
.balance-summary p.balance-line{
	margin			: 14px 0 0;
	padding-top		: 14px;
	border-top		: 2px solid rgba(255,255,255,.4);
	font-weight		: bold;
	font-size		: 1.45em;
	color			: #fff;
	letter-spacing	: 0.01em;
}
@media only screen and (max-width: 600px){
	.balance-summary{
		padding		: 14px 14px;
		/* The phone rules take fieldsets to margin 10px 0 and width 100%, so this follows. */
		margin		: 10px 0;
		width		: 100%;
	}
	.balance-summary p.balance-line{
		font-size	: 1.25em;
	}
}

/* Item Details is a fieldset per competitor, each holding a fieldset per item. The competitor
   fieldset is the top-level box, so it keeps the normal fieldset chrome: it was stripped at
   first, which left the items as the only boxes and the competitor as a floating heading. Its
   legend is just a legend, painted from its own border like every other, so nothing special is
   needed here beyond the spacing that stops two nested boxes crowding each other. */
fieldset.owner-group{
	margin-bottom	: 24px;
}
fieldset.owner-group > fieldset{
	margin			: 14px 20px;
	width			: calc(100% - 40px);
}

/* Prose lists. The global `li { float: left }` exists for the tab navigation but applies to
   every list on the site, and `ul` carries a pink background with no padding for the same
   reason, so an ordinary bulleted list renders as a single run-on line on a pink strip. Any
   list written as content needs this to read as a list. */
ul.info-list{
	list-style-type	: disc;
	background		: transparent;
	/* Centred as a block, with the items still ranged left inside it. The paragraphs around
	   these lists are centred by the global `p { text-align: center }`, so a list pinned to the
	   left edge by a left margin was the only thing not lining up. The indent that margin used
	   to provide comes from padding instead, so auto margins are free to do the centring.
	   The cap is a readable measure: centring a full-width list would leave the bullets adrift
	   from the text above them on a wide screen. */
	max-width		: 46em;
	margin			: 10px auto 14px;
	padding			: 0 0 0 26px;
	box-sizing		: border-box;
}
ul.info-list > li{
	float			: none;
	position		: static;
	display			: list-item;
	margin			: 0 0 7px;
	line-height		: 1.5;
	text-align		: left;
}


/* Link state on the sync instructions. Three states, each carrying a word as well as a colour
   so the meaning does not depend on seeing the difference. Contrast on the pale instruction
   ground: #1b5e20 is 7.4:1, #8a4b00 is 5.2:1, #43484d is 7.8:1. */
p.link-state{
	margin			: 0 0 12px;
	padding			: 9px 12px;
	border-radius	: 6px;
	border-left		: 4px solid currentColor;
	font-weight		: bold;
	font-size		: 0.95em;
	background		: rgba(255,255,255,.55);
}
p.link-state.link-up   { color: #1b5e20; }
p.link-state.link-down { color: #8a4b00; }
p.link-state.link-idle { color: #43484d; }


/* The pinned action bar, at every width. These buttons move you between tabs and between items,
   and at the foot of a long entry form they were below the fold on a desktop just as much as on
   a phone. The buttons do not move in the DOM, so they still submit the form they belong to;
   only the painting changes.

   The row stays a grid, so its existing left and right placement still holds, but it is capped
   to the page width and centred so the buttons line up with the content above them rather than
   sitting at the far corners of a 4K display. */
#buttonrow.buttonbar-fixed{
	position		: fixed;
	left			: 0;
	right			: 0;
	bottom			: 0;
	z-index			: 900;
	/* Same width as the footer it comes to rest on, so the two read as one piece of furniture
	   rather than a strip floating across an unrelated page. Centred with auto margins, not a
	   translateX: form.php drives the footer lift with translateY, and a transform here would
	   be overwritten by it. The caps mirror #wrapper's, which is where the footer's width
	   actually comes from. */
	width			: 100%;
	max-width		: 1000px;
	margin			: 0 auto;
	/* Without this the bar is content-box, because the global reset sets only margin. form.php
	   sets its width to the footer's measured width, and the padding then pushed it 28px past
	   the right edge. */
	box-sizing		: border-box;
	padding			: 10px 14px calc(10px + env(safe-area-inset-bottom));
	gap				: 10px;
	background		: #e8407a;
	box-shadow		: 0 -2px 12px rgba(0,0,0,.3);
	border-radius	: 6px 6px 0 0;
}
body.wide-mode #buttonrow.buttonbar-fixed{
	max-width		: calc(100% - 24px);
}
/* Has to sit AFTER the base rule, not up with the other 1900px rules. Both selectors are
   (1,1,0), so at equal specificity the later one wins and a cap declared earlier would simply
   be overwritten by the 1000px default. */
@media only screen and (min-width: 1900px){
	#buttonrow.buttonbar-fixed,
	body.wide-mode #buttonrow.buttonbar-fixed{
		max-width	: calc(100% - 40px);
	}
}
#buttonrow.buttonbar-fixed .button{
	margin			: 0;
}
/* The clearance goes on the CONTENT, not on the body. On the body it reserved space after the
   footer as well, so the footer and the bar ended up competing for the same strip at the bottom
   of the page. With it on the content, the content clears the bar, the footer follows
   immediately after, and form.php lifts the bar out of the footer's way as it scrolls into
   view: the footer pushes the bar up and sits beneath it. The exact height is measured there,
   since it depends on how many buttons the tab has and how they wrap. */
body.has-button-bar #container,
body.has-button-bar #content{
	padding-bottom	: var(--buttonbar-height, 96px);
}
@media only screen and (max-width: 800px){
	#buttonrow.buttonbar-fixed{
		padding		: 8px 10px calc(8px + env(safe-area-inset-bottom));
		gap			: 8px;
	}
	#buttonrow.buttonbar-fixed .button{
		width		: 100%;
		padding		: 11px 6px;
		font-size	: 13px;
	}
}


/* An item's description: guidance about what belongs in that section, shown inside the item's
   own fieldset. It was an <h4> padded with <br>, so body copy was the largest text in the box
   and screen readers were handed a heading that is not one.

   It keeps the left-edge accent the site's notices use, but in the brand pink rather than the
   warning amber: a description of what belongs in a section is guidance, not a caution, and
   borrowing the warning tone would have made every item look like it had a problem. */
.item-note{
	/* A pale panel floated over the fieldset's own pink, rather than the amber used by
	   .msg-notification.msg-warning. The amber reads as a caution, and an item description is
	   not a caution, it is just guidance about what belongs in that section. White at 72% over
	   the fieldset ground resolves to #fce0e9, and #2b2124 on that is 12.62:1. */
	background		: rgba(255,255,255,.72);
	border			: 1px solid rgba(255,255,255,.9);
	border-left		: 4px solid #e8407a;
	color			: #2b2124;
	/* Rounded on all four corners. It was squared off on the left to sit flush against the
	   accent edge, but that edge is part of the same box, so the result just looked clipped. */
	border-radius	: 6px;
	padding			: 10px 14px;
	/* Equal margins, and no max-width. The cap was holding it short of the fieldset's right
	   edge while its left margin lined up with everything else, which read as a mistake rather
	   than as a measure. */
	margin			: 10px 20px 14px;
	font-size		: 0.92em;
	line-height		: 1.5;
	text-align		: left;
}
@media only screen and (max-width: 600px){
	.item-note{
		margin		: 10px 0 14px;
	}
}

/* A wrapper fieldset whose contents are themselves fieldsets gives up its appearance entirely,
   legend included. The legend carried the form's title, which on these tabs restates what the
   tab already says: "Withdraw from Sections" above the list of sections to withdraw from. The
   element stays in the DOM because the column packer needs something to pack into, so this is
   presentation only. Marked by form.php at every width, not only when packing. */
fieldset.fieldset-passthrough{
	border			: 0;
	box-shadow		: none;
	background		: transparent;
	padding			: 0;
	margin			: 0;
	width			: 100%;
}
fieldset.fieldset-passthrough > legend{
	display			: none;
}



/* The unsynced-changes dialog. Built rather than using alert(), so it can explain what is
   actually happening and offer the safe choice first. Contrast checked: white on #5b3fa0 is
   7.88:1, and the body text is near-black on white at 18:1. */
#leaveguard{
	position		: fixed;
	inset			: 0;
	background		: rgba(0,0,0,.55);
	display			: none;
	align-items		: center;
	justify-content	: center;
	z-index			: 1100;
	padding			: 20px;
}
#leaveguard.open{
	display			: flex;
}
#leaveguard .lg-box{
	background		: #fff;
	border-radius	: 10px;
	max-width		: 460px;
	width			: 100%;
	padding			: 22px 24px 18px;
	box-shadow		: 0 12px 40px rgba(0,0,0,.4);
	text-align		: left;
}
#leaveguard h2{
	margin			: 0 0 10px;
	font-size		: 1.15em;
	color			: #231f20;
	text-align		: left;
	padding			: 0;
}
#leaveguard p{
	margin			: 0 0 18px;
	color			: #231f20;
	font-size		: 0.95em;
	line-height		: 1.5;
	text-align		: left;
}
#leaveguard .lg-actions{
	display			: flex;
	gap				: 10px;
	justify-content	: flex-end;
	flex-wrap		: wrap;
}
#leaveguard .lg-actions .button{
	margin			: 0;
}
/* The safe choice is the solid one. Leaving is still available, just not the thing your eye
   lands on and your finger finds first. */
#leaveguard .lg-stay{
	background		: #5b3fa0;
	color			: #fff;
}
#leaveguard .lg-go{
	background		: transparent;
	color			: #5b3fa0;
	border			: 1px solid #5b3fa0;
}
@media only screen and (max-width: 600px){
	#leaveguard .lg-actions{
		flex-direction	: column-reverse;
	}
	#leaveguard .lg-actions .button{
		width			: 100%;
	}
}


/* A wrapper fieldset whose contents are themselves fieldsets gives up its appearance entirely,
   legend included. The legend carried the form's title, which on these tabs restates what the
   tab already says: "Withdraw from Sections" above the list of sections to withdraw from. The
   element stays in the DOM because the column packer needs something to pack into, so this is
   presentation only. Marked by form.php at every width, not only when packing. */
fieldset.fieldset-passthrough{
	border			: 0;
	box-shadow		: none;
	background		: transparent;
	padding			: 0;
	margin			: 0;
	width			: 100%;
}
fieldset.fieldset-passthrough > legend{
	display			: none;
}



/* Event notices: the section, championship and scholarship rules, and the studio report notes.
   Several hundred words of eligibility rules that people read carefully and still get wrong, so
   they take the same treatment as the other guidance on the site rather than being bare prose.

   The text-align and color here are prefixed with #container because the stylesheet carries
   `#container p { text-align: center; color: black }` as an ID rule, which a class cannot beat.
   Centred rules are genuinely hard to read at this length. */
.event-notice{
	background		: rgba(255,255,255,.72);
	border			: 1px solid rgba(255,255,255,.9);
	border-left		: 4px solid #e8407a;
	border-radius	: 6px;
	padding			: 14px 18px;
	margin			: 16px 20px;
	line-height		: 1.55;
}
#container .event-notice p,
#container3 .event-notice p,
.event-notice p{
	text-align		: left;
	color			: #2b2124;
	margin			: 0 0 10px;
	font-size		: 0.95em;
}
#container .event-notice p:last-child,
#container3 .event-notice p:last-child,
.event-notice p:last-child{
	margin-bottom	: 0;
}
/* Paragraphs that are nothing but a bold heading, marked server-side by eventNoticeHtml. Not
   done with p > strong:only-child, which looks equivalent but matches any paragraph whose only
   ELEMENT child is a strong, text around it or not. That broke "The <strong>entrants listed
   below</strong> have selected..." across two lines with the strong styled as a heading. */
#container .event-notice p.notice-heading,
#container3 .event-notice p.notice-heading,
.event-notice p.notice-heading{
	font-size		: 1.05em;
	color			: #a0334a;
	letter-spacing	: 0.02em;
	margin			: 14px 0 8px;
}
.event-notice p.notice-heading:first-child{
	margin-top		: 0;
}
.event-notice ul,
.event-notice ol{
	background		: transparent;
	margin			: 8px 0 12px 24px;
	padding			: 0;
}
.event-notice ul{ list-style-type: disc; }
.event-notice ol{ list-style-type: decimal; }
.event-notice li{
	float			: none;
	position		: static;
	display			: list-item;
	margin			: 0 0 6px;
	text-align		: left;
}
@media only screen and (max-width: 600px){
	.event-notice{
		margin		: 14px 0;
		padding		: 12px 14px;
	}
}


#lcontain{
	margin			: auto;
	width			: 300px;
	float			: left;
	background		: #eeeeee;
}

#rcontain{
	margin			: auto;
	width			: 550px;
	float			: right;
	background		: #eeeeee;
}

#fourcontain{
	margin			: auto;
	width			: 212px;
	float			: left;
	background		: rgba(0, 147, 214, 0.2);
}

#fourgroup{
	margin			: auto;
	width			: 850px;
	height			: 600px; /* this wasn't active */
	float			: left;
	background		: rgba(0, 147, 214, 0.2);
}

#buttonright button {
	float			: right;
}

/* The button row doubles as the page's bottom navigation. On a phone it is pinned to the
   foot of the screen where thumbs reach, which form.php enables by adding .buttonbar-fixed
   (only when there is exactly one row on the page; nine tabs carry two, and two pinned bars
   would stack on top of each other).

   The buttons stay inside their <form> in the DOM. A fixed element still submits the form it
   belongs to, so nothing about posting changes. */
/* ---- Save status pill -------------------------------------------------------------------
   One per page, fixed under the pinned nav. The per-field marks say where an individual change
   is up to; this says whether the page as a whole has anything outstanding, which is what you
   want to know before closing the tab. Hidden until there is something to report. */
#savepill{
	position		: fixed;
	top				: 12px;
	left			: 50%;
	transform		: translateX(-50%) translateY(-14px);
	z-index			: 1000;
	padding			: 8px 16px;
	border-radius	: 999px;
	font			: bold 13px/1 Arial, Helvetica, sans-serif;
	color			: #fff;
	box-shadow		: 0 3px 14px rgba(0,0,0,.3);
	opacity			: 0;
	visibility		: hidden;
	transition		: opacity .18s ease, transform .18s ease;
	pointer-events	: none;
	white-space		: nowrap;
	max-width		: calc(100% - 24px);
	overflow		: hidden;
	text-overflow	: ellipsis;
}
#savepill.savepill-show{
	opacity			: 1;
	visibility		: visible;
	transform		: translateX(-50%) translateY(0);
}
#savepill.savepill-saving{ background: #5b3fa0; }
#savepill.savepill-saved { background: #1b7f3b; }
#savepill.savepill-error { background: #b71c1c; }

@media only screen and (max-width: 800px){
	/* Sits above the button bar at the foot, clear of the pinned nav at the top. The offset
	   is only applied when a bar is actually there; the fallback used to lift the pill 70px
	   off the bottom on every page that has no buttons. */
	#savepill{
		top			: auto;
		bottom		: 14px;
		transform	: translateX(-50%) translateY(14px);
		font-size	: 14px;
		padding		: 10px 18px;
	}
	#savepill.savepill-show{ transform: translateX(-50%) translateY(0); }
	body.has-button-bar #savepill{
		bottom		: calc(var(--buttonbar-height, 70px) + 10px);
	}
}

#buttonrow {
	display				: grid;
	grid-template-columns	: 1fr 1fr;
	gap					: 6px;
	margin-top			: 8px;
}
#buttonrow .button-left,
#buttonrow .button-right {
	display				: contents;
}
#buttonrow .button-left > *:nth-child(1) { grid-column: 1; grid-row: 1; }
#buttonrow .button-left > *:nth-child(2) { grid-column: 1; grid-row: 2; }
#buttonrow .button-right > *:nth-child(1) { grid-column: 2; grid-row: 1; }
#buttonrow .button-right > *:nth-child(2) { grid-column: 2; grid-row: 2; }
/* Buttons that are neither a previous nor a next: a form's own ButtonTabs destinations. They
   span the full width under the left/right pair, auto-placed into the next free row, so a form
   with only these still gets a #buttonrow and still ends up in the pinned bar. */
#buttonrow .button-centre {
	grid-column		: 1 / -1;
	display			: flex;
	flex-wrap		: wrap;
	justify-content	: center;
	gap				: 6px;
}
#buttonrow.buttonbar-fixed .button-centre .button{
	flex			: 1 1 160px;
}
@media only screen and (max-width: 800px){
}

.btn-icon {
	width			: 16px;
	height			: 16px;
	fill			: currentColor;
	vertical-align	: middle;
	margin			: 0 5px;
	transform		: translateY(-1px);
}

#buttoncenter {
    display			: flex;
    justify-content	: center;
}

.nomargin{
	margin			: 1;
}

#message {
    display			: none;
    font-size		: 24px;
}

/* Notification banner system */
#notification-area {
    position        : sticky;
    top             : 0;
    z-index         : 200;
}
.msg-notification {
    display         : flex;
    align-items     : flex-start;
    gap             : 10px;
    padding         : 11px 14px;
    margin          : 0 0 2px;
    font-size       : 0.92em;
    line-height     : 1.45;
    border-radius   : 4px;
    animation       : notifPop 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.6s both, notifBeat 0.5s ease-in-out 1.2s;
}
.msg-notification.msg-error {
    background      : #fff0f5;
    border          : 1px solid #f590b0;
    border-left     : 4px solid #e8407a;
    color           : #6b1530;
}
.msg-notification.msg-success {
    background      : #f0fdf4;
    border          : 1px solid #86efac;
    border-left     : 4px solid #16a34a;
    color           : #14532d;
}
.msg-notification.msg-warning {
    background      : #fffbeb;
    border          : 1px solid #fcd34d;
    border-left     : 4px solid #d97706;
    color           : #78350f;
}
.msg-notification .msg-text {
    flex            : 1;
}
.msg-dismiss {
    background      : none;
    border          : none;
    cursor          : pointer;
    font-size       : 1.15em;
    line-height     : 1;
    padding         : 0 2px;
    opacity         : 0.5;
    color           : inherit;
    flex-shrink     : 0;
}
.msg-dismiss:hover { opacity: 1; }
h1.message, h2.message { font-size: inherit; font-weight: normal; margin: 0; }
@keyframes notifPop {
    0%   { opacity: 0; transform: translateY(-10px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes notifBeat {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.025); }
    100% { transform: scale(1); }
}

span.error {
	display			: block;
	margin-left		: 40px;
	color			: #a0334a;
	font-size		: 0.85em;
	font-style		: italic;
}
span.error:not(:empty)::before {
	content				: '';
	display				: inline-block;
	width				: 18px;
	height				: 18px;
	background-image	: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolygon points='10,2 1,18 19,18' fill='%23FFD700' stroke='%23000' stroke-width='1'/%3E%3Ctext x='10' y='16' text-anchor='middle' font-size='9' font-weight='bold' fill='%231a1a1a'%3E!%3C/text%3E%3C/svg%3E");
	background-size		: contain;
	background-repeat	: no-repeat;
	margin-right		: 2px;
	vertical-align		: middle;
	transform			: translateY(-2px);
}

p.music-reminder {
	display			: block;
	margin			: 8px 0 8px 40px;
	padding			: 8px 12px;
	color			: #664d03;
	background-color	: #fff3cd;
	border			: 1px solid #ffe69c;
	border-radius	: 6px;
	font-size		: 0.9em;
	font-weight		: bold;
}

/* Music-change fee: once-at-top finalisation + fee explanation, and the per-item free-length line. */
.mcf-fee-notice {
	display			: block;
	margin			: 12px 0;
	padding			: 10px 14px;
	color			: #0c5460;
	background-color	: #d1ecf1;
	border			: 1px solid #bee5eb;
	border-radius	: 6px;
	font-size		: 0.9em;
	line-height		: 1.4;
}
p.mcf-limit {
	margin			: 4px 0 6px 0;
	color			: #555;
	font-size		: 0.85em;
	font-style		: italic;
}

@keyframes musicBounce {
	0%, 100%	{ transform: translateY(0)   rotate(-10deg); }
	50%			{ transform: translateY(-5px) rotate(10deg);  }
}
@keyframes musicBoxSpin {
	from	{ transform: perspective(80px) rotateY(0deg); }
	to		{ transform: perspective(80px) rotateY(360deg); }
}
span.uploading {
	display			: block;
	margin-left		: 40px;
	color			: #555;
	font-size		: 0.85em;
	font-style		: italic;
}
span.uploading:not(:empty)::before {
	content			: '♫';
	display			: inline-block;
	font-style		: normal;
	margin-right	: 5px;
	vertical-align	: middle;
	animation		: musicBounce 0.8s ease-in-out infinite;
}

span.confirmed {
	display			: block;
	margin-left		: 40px;
	color			: #a0334a;
	font-size		: 0.85em;
	font-style		: italic;
}
span.confirmed:not(:empty)::before {
	content			: '✓';
	color			: #2e7d32;
	font-style		: normal;
	margin-right	: 5px;
}

span.listen-required {
	display			: block;
	margin-left		: 40px;
	color			: #a0334a;
	font-size		: 0.85em;
	font-style		: italic;
}
span.listen-required:not(:empty)::before {
	content			: '▶';
	color			: #a0334a;
	font-style		: normal;
	margin-right	: 5px;
	vertical-align	: middle;
}
span.convert-failed {
	display			: block;
	margin-left		: 40px;
	color			: #a0334a;
	font-size		: 0.85em;
	font-style		: italic;
}
span.convert-failed:not(:empty)::before {
	content				: '';
	display				: inline-block;
	width				: 18px;
	height				: 18px;
	background-image	: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='%23a0334a' stroke-width='2'/%3E%3Cline x1='7' y1='7' x2='13' y2='13' stroke='%23a0334a' stroke-width='2'/%3E%3Cline x1='13' y1='7' x2='7' y2='13' stroke='%23a0334a' stroke-width='2'/%3E%3C/svg%3E");
	background-size		: contain;
	background-repeat	: no-repeat;
	margin-right		: 2px;
	vertical-align		: middle;
	transform			: translateY(-2px);
}

span.playing:not(:empty)::before {
	content				: '';
	display				: inline-block;
	width				: 22px;
	height				: 22px;
	background-image	: url('/images/eisteddfod-logo.svg');
	background-size		: contain;
	background-repeat	: no-repeat;
	background-position	: center;
	margin-right		: 4px;
	vertical-align		: middle;
	animation			: musicBoxSpin 2.5s linear infinite;
}

.notice-banner {
    background-color    : #fff3cd;
    border              : 1px solid #ffc107;
    border-radius       : 6px;
    padding             : 14px 18px;
    margin              : 20px;
    text-align          : center;
}

.button-danger {
    background-color    : #c0392b;
    color               : #fff;
    padding             : 6px 14px;
    font-size           : 13px;
    margin              : 0;
}
.button-danger:hover {
    background-color    : #922b21;
    color               : #fff;
}

.listing-table {
    width               : 100%;
    border-collapse     : collapse;
    margin-top          : 8px;
}
.listing-table th,
.listing-table td {
    text-align          : left;
    padding             : 8px 10px;
    border-bottom       : 1px solid #ddd;
}
.listing-table th {
    font-weight         : bold;
}

.upcoming-events-table {
    width               : 100%;
    border-collapse     : collapse;
    margin              : 16px 0;
}
.upcoming-events-table thead tr {
    background-color    : #e8407a;
    color               : #fff;
}
.upcoming-events-table th {
    padding             : 10px 14px;
    text-align          : left;
    font-weight         : bold;
}
.upcoming-events-table td {
    padding             : 10px 14px;
    box-shadow          : none;
}
.upcoming-events-table td:hover {
    box-shadow          : none;
}

img.displayed,#ul{
    display			: block;
    margin-left		: auto;
    margin-right	: auto;
	padding			: 10px;
}

img.left {
    	display			: block;
    	float			: left;
	padding				: 10px;
}

.button:active {
  	background-color	: lightBlue;
  	box-shadow			: 0 5px #666;
  	font-size			: 16px;
}

.remover:active {
    opacity			: 0.0;
  	box-shadow		: none;
}

.remover:focus {
	opacity			: 0.2;
  	box-shadow		: none;
}

.disabled {
	background-color	: lightgrey;
    cursor				: not-allowed;
    color				: black;
}

.disabled:hover {
	font-size				: 16px;
	border					: 1px solid black;
	background-color		: lightgrey;
	margin					: 8px 1px 0px 1px;
	color					: black;
	box-shadow				: none;
}

.table-container {
    text-align: center; /* This centers the table within the container horizontally */
}

table {
	overflow				: hidden; /* Ensure the rounded corners are visible */
    font-size				: 0.9em;
    font-family				: sans-serif;
    min-width				: 100%;
	max-width				: 100%;
    margin					: 0 auto; /* This centers the table within the div container horizontally */
}



thead tr {
    background-color		: #009879;
    text-align				: center;
}


th{
	background-color			: #ff8fab;
}

td:empty::before {
  content: "\00a0"; /* Non-breaking space (&nbsp;) */
}

th, td {
    padding					: 12px 15px;
    text-align				: center;
	border-radius			: 6px;
	box-shadow				: 	0 0 20px rgba(0, 0, 0, 0.15);
}

/* Style for the sorted column */
th.sortable.ascending::after {
content: ' ▲'; /* Up arrow for ascending order */
}

th.sortable.descending::after {
content: ' ▼'; /* Down arrow for descending order */
}

/* Style to indicate that columns are sortable */
th.sortable {
cursor: pointer;
}

table th:hover, td:hover{
	color						: #e8407a;
	box-shadow					: inset 0 0 16px 0px rgba(0, 0, 0, 0.15)
}

tbody tr:nth-of-type(even) {
    background-color			: #fde8d8;
}
tbody tr:nth-of-type(odd) {
    background-color			: #f07aaa;
}

input[type="color"] {
   -webkit-appearance		: none;
    width					: 30px;
    height					: 30px;
    border					: 0;
    border-radius			: 50%;
    padding					: 0;
    overflow				: hidden;
    box-shadow				: 2px 2px 5px rgba(0,0,0,.1);
	margin-left				: 40px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
}

#top h1{
	padding-top		: 25px;
	padding-bottom	: 25px;
	color			: black;
	font-size		: 36px;
	text-align		: center;
}

#statusbar h2{
	padding-top		: 20px;
	padding-bottom	: 20px;
	color			: black;
	font-size		: 26px;
	text-align		: center;
}

#statusbar h3{
	padding-right		: 5px;
	padding-bottom		: 5px;
	color			: black;
	font-size		: 13px;
	text-align		: right;
}

#rcontain h1,#lcontain h1,#footer h1,#container h1,#fourcontain h1{
	padding-top		: 20px;
	padding-bottom	: 20px;
	color			: black;
	font-size		: 26px;
	text-align		: center;
}

p{
    text-align		: center;
}

#rcontain p,#lcontain p,#fourcontain p,#rcontain li,#lcontain li,#container p,#footer p{
	font-size		: 16px;
	color			: black;
	margin-left		: 20px;
	margin-right	: 20px;
}

#footer p{

	text-align		: center;
}

a {
    color           : black;
	text-align		: center;
}

/* The tab rows are built from lists, so they need their items floated into a row, no bullets
   and the bar colour behind them. That styling used to sit on bare `ul` and bare `li`, which
   meant every prose list on the site inherited it: a numbered set of instructions rendered as
   one run-on line on a strip of bar colour. Both are now scoped to the two navigation lists
   (ul.tab-row, built server-side and again by the row packer, and #subtabnav), and ordinary
   lists get ordinary list styling below. */
ul.tab-row,
#subtabnav{
	list-style-type	: none;
	margin			: 0;
	padding			: 0;
	background-color: #e8407a;
}

/* Prose lists, anywhere in page content. The navigation lists are excluded by selector rather
   than left to specificity: the nav rules above set only float and position, so a bare `ul > li`
   rule still reached the tab items with the rest of its declarations and put a 7px gap under
   every tab, which broke the join between a tab and the panel below it. ul.info-list and
   .event-notice ul/ol still carry their own variants and beat these on specificity. */
ol:not(.tab-row),
ul:not(.tab-row):not(#subtabnav){
	margin			: 10px 0 14px 24px;
	padding			: 0;
	background		: transparent;
}
ol:not(.tab-row){ list-style-type: decimal; }
ul:not(.tab-row):not(#subtabnav){ list-style-type: disc; }
ol:not(.tab-row) > li,
ul:not(.tab-row):not(#subtabnav) > li{
	display			: list-item;
	float			: none;
	position		: static;
	margin			: 0 0 7px;
	line-height		: 1.5;
	text-align		: left;
}
#adminmodeswitch {
	width			: 105px;
	margin-left		: auto;
	margin-top		: 0;
	margin-bottom	: 5px;
	background-color: #fde8d8;
	border-radius	: 5px;
	overflow		: hidden;
	height			: 26px;
}
#adminmodeswitch select {
	width			: 105px;
	height			: 26px;
	font-size		: 12px;
	background		: transparent;
	border			: none;
	padding			: 2px 4px;
	color			: #000;
}
/* ---- Portrait navigation ----------------------------------------------------------------
   Below 800px the seven tabs wrap to two or three rows and push the page down, so they are
   replaced by a drawer. Hidden entirely on desktop: these three rules are the off switch, and
   the media query further down is the only place they are turned on. Built by form.php's JS
   from the real nav, so it always matches whatever tabs the config produced. */
#navtoggle, #navdrawer, #navscrim{ display:none; }

#tabnav{
	display			: flex;
	align-items		: flex-end;
	position		: relative;
}
#tabnav-left, #tabnav-right{
	display			: flex;
	flex-direction	: column;
	justify-content	: flex-end;
	flex			: 0 0 auto;
}
#tabnav-spacer{
	flex			: 1;
}
.tab-row{
	display			: flex;
	flex-wrap		: wrap;
	position		: relative;
	background-color: transparent;
}
#tabnav-right .tab-row{
	justify-content	: flex-end;
}
#tabnav-shelf{
	position		: absolute;
	bottom			: 0;
	left			: 0;
	right			: 0;
	height			: 43px;
	background-color: #f590b0;
	z-index			: 0;
}
#subtabnav{
	list-style-type	: none;
	margin			: 0;
	padding-top		: 4px;
	display			: flex;
	overflow		: visible;
	background-color: #fde8d8;
	position		: relative;
	z-index			: 200;
}
#subtabnav li {
	position		: relative;
}

#subtabnav-shadow {
	height			: 2px;
	position		: relative;
	pointer-events	: none;
	background-color: #f07aaa;
}

#subtabnav li a {
	display			: block;
    background      : #f590b0;
    color           : black;
	text-align		: center;
	font-weight		: bold;
	padding			: 10px 12px;
	text-decoration	: none;
	border-radius	: 8px 8px 0px 0px;
	white-space		: nowrap;
}


@media (hover: hover) {
	#subtabnav li a:hover{
		color			: #e8407a;
		font-weight		: bold;
	}
}
#subtabnav .active {
	background-color: #f07aaa;
	color			: black;
	font-weight		: bold;
}

h2{
	padding-top		: 20px;
	padding-bottom	: 20px;
	color			: black;
	font-size		: 22px;
	text-align		: center;
}

ul.tab-row > li,
#subtabnav > li {
	float			: left;
	position		: relative;
}

.tab-row li a {
	display			: block;
    background      : #f590b0;
    color           : black;
	text-align		: center;
	font-weight		: bold;
	padding			: 10px 12px;
	text-decoration	: none;
	border-radius	: 8px 8px 0px 0px;
	white-space		: nowrap;
}

@media (hover: hover) {
	.tab-row li a:hover{
		color			: #e8407a;
		font-weight		: bold;
	}
}

.tab {
	margin-left		: 40px !important;
	margin-top		: 10px;
	margin-bottom	: 10px;
   	text-align		: left;
}

.tab2 {
	margin-left		: 80px !important;
	margin-top		: 10px;
	margin-bottom	: 10px;
   	text-align		: left;
}

.tab3 {
	margin-left		: 120px !important;
	margin-top		: 10px;
	margin-bottom	: 10px;
   	text-align		: left;
}

.item-heading {
	margin-left		: 10px !important;
	margin-top		: 10px;
	margin-bottom	: 10px;
	text-align		: left;
	font-weight		: bold;
}
.center{
   	text-align		: center;
}

.active,
.tab-row li a.active {
	background-color: #fde8d8;
	color			: black;
	font-weight		: bold;
	position		: relative;
	z-index			: 2;
	box-shadow		: 0 0 20px rgba(0, 0, 0, 0.15);
}

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #ff914d;
  border: 1px solid black;
}

/* Create a custom checkbox */
.checkmark.green {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #ff66c4;
}

/* Create a custom checkbox */
.checkmark.purple {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #cb6ce6;
}

/* Create a custom checkbox */
.checkmark.blue{
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #ff914d;
}

/* Create a custom checkbox */
.checkmark.gold {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #ba8442;
}

/* Create a custom checkbox */
.checkmark.rosegold {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #B76E79;
}

/* Create a custom checkbox */
.Xone {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: rgba(0, 0, 0, 0);
}

/* Create a custom checkbox */
.Xtwo {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: rgba(0, 0, 0, 0);
}

/* On mouse-over, lighten relative to base colour */
.container:hover input ~ .checkmark {
  background-color: #ffb07a;
}

.container:hover input ~ .checkmark.blue {
  background-color: #ffb07a;
}

.container:hover input ~ .checkmark.green {
  background-color: #ff8fd6;
}

.container:hover input ~ .checkmark.purple {
  background-color: #db8ff0;
}

.container:hover input ~ .checkmark.gold {
  background-color: #cc9a5c;
}

.container:hover input ~ .checkmark.rosegold {
  background-color: #ca8d96;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #ff914d}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark.blue {
  background-color: #ff914d}
/* When the checkbox is checked, add a purple background */
.container input:checked ~ .checkmark.purple {
  background-color: #cb6ce6}
/* When the checkbox is checked, add a green background */
.container input:checked ~ .checkmark.green {
  background-color: #ff66c4}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark.gold {
  background-color: #ba8442}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark.rosegold {
  background-color: #B76E79}

.container:hover input:checked ~ .checkmark {
  background-color: #ffb07a;
}
.container:hover input:checked ~ .checkmark.blue {
  background-color: #ffb07a;
}
.container:hover input:checked ~ .checkmark.green {
  background-color: #ff8fd6;
}
.container:hover input:checked ~ .checkmark.purple {
  background-color: #db8ff0;
}
.container:hover input:checked ~ .checkmark.gold {
  background-color: #cc9a5c;
}
.container:hover input:checked ~ .checkmark.rosegold {
  background-color: #ca8d96;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Create the checkmark/indicator (hidden when not checked) */
.Xone::before {
  content: "";
  position: absolute;
  display: none;
}

/* Create the checkmark/indicator (hidden when not checked) */
.Xtwo::before {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Show the stem of the checkmark when unchecked */
.container input:not(:checked):disabled ~ .Xone::before {
  display: block;
}

/* Show the tip of the checkmark when unchecked */
.container input:not(:checked):disabled ~ .Xtwo::before {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Style the checkmark/indicator stem */
.container .Xone::before {
  content: "";
  left: 4px;
  top: 11px;
  width: 18px;
  height: 3px;
  background: white;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Style the checkmark/indicator tip */
.container .Xtwo::before {
	content: "";
	left: 4px;
    top: 11px;
    width: 18px;
    height: 3px;
	background: white;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}



/* A standard control size. This was height:25px with 6px padding, which is small for a
   pointer and cramped for a 16px font. box-sizing makes min-height the whole control rather
   than just its text area, so 38px is the finished height. Phones get more, further down. */
input.intText, input.filterInput {
	text-align		: left;
	color			: black;
	margin-left		: 40px;
	border			: 1px solid black;
	border-radius	: 4px;
	box-sizing		: border-box;
	min-height		: 38px;
	padding			: 8px 10px;
	font-size		: 1em;
	/* Matched to .styled-select so a text field and a dropdown on the same form line up. It was
	   600px with min-width 60%, and that percentage is what made it stretch absurdly wide as the
	   container grew, since 60% of a wide column is a very long single-line field. */
	width			: 550px;
	max-width		: 100%;
	background-color: #fde8d8;
}
input.intText:-webkit-autofill,
input.intText:-webkit-autofill:hover,
input.intText:-webkit-autofill:focus,
input.filterInput:-webkit-autofill,
input.filterInput:-webkit-autofill:hover,
input.filterInput:-webkit-autofill:focus,
input.intText:autofill,
input.filterInput:autofill {
	-webkit-box-shadow	: 0 0 0px 1000px #fde8d8 inset;
	box-shadow			: 0 0 0px 1000px #fde8d8 inset;
	-webkit-text-fill-color: black;
}

textarea.intText {
	text-align		: left;
	color			: black;
	margin-left		: 40px;
	border			: 1px solid black;
	border-radius	: 4px;
	padding			: 6px;
	font-size		: 1em;
	font-family		: inherit;
	min-width		: 60%;
	max-width		: 90%;
	width			: 600px;
	resize			: vertical;
	background-color: #fde8d8;
}

input.html-duration-picker{
	text-align		: left;
	color			: black;
	margin-left		: 40px;
	border			: 1px solid black;
	border-radius	: 4px;
	height			: 40px;
	padding			: 6px;
	font-size		: 2em;
}
.controls button.scroll-btn:nth-child(1) {
  height: 18px !important;
  top: 1px !important;
}

.controls button.scroll-btn:nth-child(2) {
  height: 18px !important;
  top: 18px !important;
}

.html-duration-picker-input-controls-wrapper .html-duration-picker {
  text-align: right;
  padding-right: 20px;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  cursor: text;
}

.html-duration-picker-input-controls-wrapper .scroll-btn {
  text-align: center;
  width: 16px;
  padding: 0 4px;
  border: none;
  cursor: default;
  position: absolute;
}

.html-duration-picker-input-controls-wrapper .caret {
  width: 0;
  height: 0;
  border-style: solid;
}

.html-duration-picker-input-controls-wrapper .caret.caret-up {
  border-width: 0 4px 5px 4px;
  border-color: transparent transparent #000 transparent;
}

.html-duration-picker-input-controls-wrapper .caret.caret-down {
  border-width: 5px 4px 0 4px;
  border-color: #000 transparent transparent transparent;
}

.html-duration-picker-input-controls-wrapper .controls {
  display: inline-block;
  position: absolute;
  top: 1px;
  padding: 2px 0;
}

.html-duration-picker-input-controls-wrapper {
  display: inline-block;
  position: relative;
  background: transparent;
  padding: 0;
  box-sizing: border-box;
}



input::placeholder {
  color: pink;
  font-style: italic;
}


.intSelect{

}

label{
	font-size:		0.9em;
	color:			black;
	font-weight:	bold;
	display:		block;
	text-align:		left;
	margin-left:	40px;
	margin-bottom:	0;
}

fieldset{
	margin						: 20px;
	border						: 1px solid #e8407a;
	border-radius				: 6px;
	box-shadow					: 0 0 20px rgba(0, 0, 0, 0.15);
	background					: #f590b0;
	min-width					: 0;
	width						: calc(100% - 40px);
	box-sizing					: border-box;
}

/* Alternating nested fieldsets (autoreport.php wraps each report level in one) get a different border
   so the nesting reads. This used $activeTabColour, which is the exact colour of #container's own
   background, so on an even level the border was invisible: a report rendered as one undifferentiated
   block. $activeTab2Colour is the palette's mid pink, distinct from both the container behind it and
   the $titleAndFooterColour border an odd level uses, which is what makes the alternation visible at
   all. Deliberately softer than the odd border, since this is a nesting cue and not a divider. */
fieldset.alternate:nth-of-type(even) {
	border						: 1px solid #f07aaa;
}

legend{
    font-size					: 1em;
    padding						: 5px 30px 5px 30px;
    border						: 0px solid #f590b0;
    border-radius				: 6px;
    color						: black;
    font-weight					: bold;
    background					: #e8407a;
}

.group-info-icon {
    display                     : inline-block;
    width                       : 19px;
    height                      : 19px;
    cursor                      : pointer;
    margin-left                 : 8px;
    vertical-align              : middle;
    position                    : relative;
    user-select                 : none;
    background-image            : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%232196F3'/%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='white' stroke-width='2'/%3E%3Ctext x='10' y='10' text-anchor='middle' dominant-baseline='central' fill='white' font-size='11' font-weight='bold' font-family='Arial,Helvetica,sans-serif'%3E%3F%3C/text%3E%3C/svg%3E");
    background-size             : contain;
    background-repeat           : no-repeat;
}

.group-note-popup {
    display                     : none;
    position                    : fixed;
    background                  : white;
    border                      : 1px solid #2196F3;
    border-radius               : 6px;
    padding                     : 8px 12px;
    font-size                   : 1.4em;
    line-height                 : 1.4;
    font-weight                 : normal;
    color                       : #333;
    min-width                   : 600px;
    max-width                   : 900px;
    box-shadow                  : 0 2px 8px rgba(0,0,0,0.2);
    z-index                     : 1000;
    white-space                 : normal;
    cursor                      : default;
}

@media (hover: hover) {
    .group-info-icon:hover .group-note-popup {
        display                 : block;
    }
}
.group-info-icon:focus .group-note-popup,
.group-info-icon.open .group-note-popup {
    display                     : block;
}

/* Item-checkbox "why is this locked/pre-selected" trigger -- click-only
   (see .has-info-popup handlers in form.php), whole label is the click
   target, no visible icon. Deliberately its own class with zero base
   styling of its own -- reusing .group-info-icon directly on label.container
   fought .container's own CSS (padding-left for the checkbox indent kept
   getting lost) despite correct specificity on paper; not worth chasing
   further when this is a clean, guaranteed-no-conflict alternative. Only
   reuses .group-note-popup for the popup's own box styling, which was
   already a standalone class not dependent on its parent's class. */
label.container.has-info-popup {
    cursor                       : pointer;
}
label.container.has-info-popup.open .group-note-popup {
    display                      : block;
}

/* $pink = "#009688";
$purple = "#673ab7";
$orange = "#2196F3";
$gold = "#ba8442";
$rosegold = "#B76E79"; */

fieldset.green{
	margin:			20px;
	border:			1px solid #ff66c4;
	border-radius:	6px;
	box-shadow: 	0 0 20px rgba(0, 0, 0, 0.15);
	background:		#f590b0;
	min-width:		0;
	width:			calc(100% - 40px);
	box-sizing:		border-box;
}

legend.green{
    font-size:      1em;
    padding:        5px 30px 5px 30px;
    border:         0px solid #f590b0;
    border-radius:  6px;
    color:          black;
    font-weight:    bold;
    background:     #ff66c4;
}

fieldset.purple{
	margin:			20px;
	border:			1px solid #cb6ce6;
	border-radius:	6px;
	box-shadow: 	0 0 20px rgba(0, 0, 0, 0.15);
	background:		#f590b0;
	min-width:		0;
	width:			calc(100% - 40px);
	box-sizing:		border-box;
}

legend.purple{
    font-size:      1em;
    padding:        5px 30px 5px 30px;
    border:         0px solid #f590b0;
    border-radius:  6px;
    color:          black;
    font-weight:    bold;
    background:     #cb6ce6;
}

fieldset.blue{
	margin:			20px;
	border:			1px solid #ff914d;
	border-radius:	6px;
	box-shadow: 	0 0 20px rgba(0, 0, 0, 0.15);
	background:		#f590b0;
	min-width:		0;
	width:			calc(100% - 40px);
	box-sizing:		border-box;
}

legend.blue{
    font-size:      1em;
    padding:        5px 30px 5px 30px;
    border:         0px solid #f590b0;
    border-radius:  6px;
    color:          black;
    font-weight:    bold;
    background:     #ff914d;
}

fieldset.gold{
	margin:			20px;
	border:			1px solid #ba8442;
	border-radius:	6px;
	box-shadow: 	0 0 20px rgba(0, 0, 0, 0.15);
	background:		#f590b0;
	min-width:		0;
	width:			calc(100% - 40px);
	box-sizing:		border-box;
}

legend.gold{
    font-size:      1em;
    padding:        5px 30px 5px 30px;
    border:         0px solid #f590b0;
    border-radius:  6px;
    color:          black;
    font-weight:    bold;
    background:     #ba8442;
}

fieldset.rosegold{
	margin:			20px;
	border:			1px solid #B76E79;
	border-radius:	6px;
	box-shadow: 	0 0 20px rgba(0, 0, 0, 0.15);
	background:		#f590b0;
	min-width:		0;
	width:			calc(100% - 40px);
	box-sizing:		border-box;
}

legend.rosegold{
    font-size:      1em;
    padding:        5px 30px 5px 30px;
    border:         0px solid #f590b0;
    border-radius:  6px;
    color:          black;
    font-weight:    bold;
    background:     #B76E79;
}

input[type=file] {
    width: 100%; /* Adjust the width as needed */
    max-width: 600px; /* Set a max-width to prevent it from being too wide */
}

input[type=file]::file-selector-button {
	background-color:	#e8407a;
    border			:	0px;
    border-radius	:	4px;
    color			:	black;
    font-weight		:	bold;
    padding			:	15px 32px;
    margin			:	6px 1px 6px 41px;
    text-align		:	center;
    position		:	relative;
    text-decoration	:	none;
    display			:	inline-block;
    font-size		:	16px;
    cursor			:	pointer;
    z-index			:	1;
}

input[type=file]::file-selector-button:hover {
	border			:	0px;
    border-radius	:	4px;
    background-color:	#fde8d8;
    color			:	#fff;
    z-index			:	2;
}


.button
{
    background-color:	#e8407a;
    border			:	0px;
    border-radius	:	4px;
    color			:	black;
    font-weight		:	bold;
    padding			:	15px 32px;
    margin			:	6px 1px 6px 41px;
    text-align		:	center;
    position		:	relative;
    text-decoration	:	none;
    display			:	inline-block;
    font-size		:	16px;
    cursor			:	pointer;
    z-index			:	1;
}
.button:hover
{
    border			:	0px;
    border-radius	:	4px;
    background-color:	#fde8d8;
    /* Black, not white. The hover background is a pale cream, so white text on it was 1.21:1,
       which is effectively invisible. This is 17.71:1. It applies to every button on the site,
       not just the pinned action bar where it was noticed. */
    color			:	#000;
    z-index			:	2;
}
.button:disabled
{
    opacity			:	0.4;
    cursor			:	default;
}
.button:disabled:hover
{
    background-color:	#e8407a;
    color			:	black;
}

.helpText{
	margin-left		:	40px;
	font-size		:	80%;
}


.styled-select {
   height: 29px;
   overflow: hidden;
   width: 550px;
   max-width: 100%;
   margin-left: 40px;
   margin-top: 10px;
}

.styled-select select {
   background: transparent;
   border: none;
   font-size: 14px;
   color: black;
   height: 29px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 550px;
   max-width: 100%;
}

/* Restores the arrow to .styled-select. That rule sets `background: transparent`, and the
   shorthand resets background-image, so it wiped the chevron the generic select rule draws.
   appearance:none still applied, which had already removed the NATIVE arrow, so these controls
   were left with no indication at all that they were dropdowns. Same selector as the rule
   above, placed after it, so it wins without an arms race on specificity. */
.styled-select select,
#adminmodeswitch select {
   background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b3fa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 10px center;
   background-size: 12px 8px;
   padding-right: 30px;
}

.styled-select.slate {
   height: 34px;
   width: 550px;
   max-width: 100%;
}

.styled-select.slate select {
   border: 1px solid #ccc;
   font-size: 16px;
   height: 34px;
   width: 550px;
   max-width: 100%;
}

.rounded {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
}

.semi-square {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

/* -------------------- Colors: Background */
.slate   { background-color: #ddd; }
.green   { background-color: #779126; }
.blue    { background-color: #e8407a; }
.yellow  { background-color: #eec111; }
.black   { background-color: #000; }

/* -------------------- Colors: Text */
.slate select   { color: #000; }
.green select   { color: #fff; }
.blue select    { color: #000; }
.yellow select  { color: #000; }
.black select   { color: #fff; }


#mainselection select {
   border: 0;
   color: #EEE;
   background: transparent;
   font-size: 20px;
   font-weight: bold;
   padding: 2px 10px;
   width: 378px;
   *width: 350px;
   *background: #58B14C;
   -webkit-appearance: none;
}

#mainselection {
   overflow:hidden;
   width:350px;
   -moz-border-radius: 9px 9px 9px 9px;
   -webkit-border-radius: 9px 9px 9px 9px;
   border-radius: 9px 9px 9px 9px;
   box-shadow: 1px 1px 11px #330033;
   background: #58B14C;
}


/* ---- Dropdowns ---------------------------------------------------------------------------
   The native control paints a white box and a system-blue highlight, which fights the palette
   everywhere it appears. appearance:none removes the platform chrome so the closed control can
   be styled, and the arrow is drawn here as an inline SVG so it needs no image request.

   The open list is only partly ours: Firefox and Chrome on Windows and Linux honour option
   colours, while macOS, iOS and Android draw a native picker that ignores them. accent-color
   is the one property those platforms do respect, so the highlight at least lands on brand
   instead of system blue. Everything here degrades to a plain usable select. */
select,
select#soflow,
select#soflow-color{
	-webkit-appearance	: none;
	-moz-appearance		: none;
	appearance			: none;
	background-color	: #fff;
	background-image	: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b3fa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat	: no-repeat;
	background-position	: right 12px center;
	background-size		: 12px 8px;
	padding-right		: 34px;
	border				: 1px solid #b9a7d6;
	border-radius		: 6px;
	color				: #231f20;
	accent-color		: #e8407a;
	cursor				: pointer;
}
select:hover{
	border-color		: #8a6fc4;
}
select:focus{
	outline				: 3px solid rgba(91,63,160,.35);
	outline-offset		: 1px;
	border-color		: #5b3fa0;
}
select:disabled{
	opacity				: .6;
	cursor				: default;
}
/* Honoured on Firefox, and on Chrome under Windows and Linux. Ignored by the native pickers
   on macOS, iOS and Android, which is why accent-color is set above as well. */
select option{
	background-color	: #fff;
	color				: #231f20;
	padding				: 6px 10px;
}
select option:checked,
select option:hover{
	background-color	: #fde8d8;
	color				: #231f20;
}
/* On the dark navigation tile the control keeps a light ground, but its arrow and edge pick up
   the tile rather than the default lilac. */
.tile-navigation select{
	border-color		: rgba(255,255,255,.75);
}

select#soflow, select#soflow-color {
   /* 300px below is the preferred width, not a floor. With margin:20px either side this
      element demanded 340px, which became the minimum width of anything containing it: a
      packed column could not go narrower and a phone was pushed sideways. This clamps it to
      whatever the container can give once its own margins are paid for, so it is unchanged
      anywhere there is room. */
   max-width: calc(100% - 40px);
   box-sizing: border-box;
   -webkit-appearance: button;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-user-select: none;
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #AAA;
   color: #555;
   font-size: inherit;
   margin: 20px;
   overflow: hidden;
   /* Right padding must clear the arrow drawn by the generic select rule above. This is an
      ID selector, so a plain shorthand here silently won that rule's padding-right and let
      long option text run underneath the chevron. */
   padding: 8px 34px 8px 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 300px;
}

select#soflow-color {
   color: #fff;
   background-color: #779126;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   padding-left: 15px;
}


/* Audio player css Variables */

audio {
    width: 100%;
	max-width: 600px;
	border-radius: 10px;
	margin-left: 40px;
    background-color: #fde8d8; /* Background color of the control bar */
}

audio::-webkit-media-controls-panel {
	border-radius: 20px;
    background-color: #fde8d8; /* Control bar background color */
}

audio::-webkit-media-controls-enclosure {
    border-radius: 10px;
    background-color: #fde8d8;
}

audio::-webkit-media-controls {
    background-color: #fde8d8;
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-pause-button,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-timeline {
	border-radius: 20px;
	margin-left: 5px;
    color: #e8407a; /* Control buttons color */
    background-color: #f07aaa; /* Control buttons background color */
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-timeline-container {
    color: #e8407a; /* Time display color */
}

audio::-webkit-media-controls-volume-slider {
	padding-left: 10px;
	padding-right: 10px;
    background-color: #f590b0; /* Volume slider background color */
}







/* Stripe css Variables */

.payment-form {
  display: flex;
  justify-content: center;
}

#payment-form {
  width: 30vw;
  min-width: 500px;
  align-self: center;
  box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
    0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
  border-radius: 7px;
  padding: 40px;
}

.hidden {
  display: none;
}

#payment-message {
  color: rgb(105, 115, 134);
  font-size: 16px;
  line-height: 20px;
  padding-top: 12px;
  text-align: center;
}

#payment-element {
  margin-bottom: 24px;
}

/* Buttons and links */
#submit {
  background: #5469d4;
  font-family: Arial, sans-serif;
  color: #ffffff;
  border-radius: 4px;
  border: 0;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: block;
  transition: all 0.2s ease;
  box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
  width: 100%;
}
#submit:hover {
  filter: contrast(115%);
}
#submit:disabled {
  opacity: 0.5;
  cursor: default;
}

/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}
.spinner {
  color: #ffffff;
  font-size: 22px;
  text-indent: -99999px;
  margin: 0px auto;
  position: relative;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 2px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.spinner:before,
.spinner:after {
  position: absolute;
  content: "";
}
.spinner:before {
  width: 10.4px;
  height: 20.4px;
  background: #5469d4;
  border-radius: 20.4px 0 0 20.4px;
  top: -0.2px;
  left: -0.2px;
  -webkit-transform-origin: 10.4px 10.2px;
  transform-origin: 10.4px 10.2px;
  -webkit-animation: loading 2s infinite ease 1.5s;
  animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
  width: 10.4px;
  height: 10.2px;
  background: #5469d4;
  border-radius: 0 10.2px 10.2px 0;
  top: -0.1px;
  left: 10.2px;
  -webkit-transform-origin: 0px 10.2px;
  transform-origin: 0px 10.2px;
  -webkit-animation: loading 2s infinite ease;
  animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 800px) {
  #wrapper,
  #banner, #statusbar, #navbar, #content, #container, #footer {
    margin-top    : 0;
    margin-bottom : 0;
    border-radius : 0;
  }
  body {
    padding-left  : 0;
  }
  #lcontain, #rcontain, #fourcontain {
    float         : none;
    width         : 100%;
    box-sizing    : border-box;
  }
  #fourgroup {
    float         : none;
    width         : 100%;
    height        : auto;
    box-sizing    : border-box;
  }
  #tabnav {
    overflow      : hidden;
    display       : block;
  }

  /* ---- Portrait navigation: drawer replaces the tab rows ---- */
  /* Scoped to has-nav-drawer, which form.php sets only once the drawer is actually built.
     Unconditionally hiding these left a phone with no navigation at all if the script did not
     run: no tabs, no sub-tabs, no logout, and no way off the page. */
  body.has-nav-drawer #tabnav,
  body.has-nav-drawer #subtabnav,
  body.has-nav-drawer #subtabnav-shadow {
    display       : none !important;
  }
  #navtoggle {
    display       : flex;
    align-items   : center;
    gap           : 10px;
    width         : 100%;
    border        : 0;
    background    : #fde8d8;
    color         : #000;
    font          : bold 15px Arial, Helvetica, sans-serif;
    padding       : 13px 15px;
    text-align    : left;
    cursor        : pointer;
    border-radius : 8px 8px 0 0;
  }
  #navtoggle .bars {
    display       : block;
    width         : 19px;
    height        : 2px;
    background    : #000;
    position      : relative;
    flex          : 0 0 auto;
  }
  #navtoggle .bars::before,
  #navtoggle .bars::after {
    content       : "";
    position      : absolute;
    left          : 0;
    width         : 19px;
    height        : 2px;
    background    : #000;
  }
  #navtoggle .bars::before { top: -6px; }
  #navtoggle .bars::after  { top:  6px; }
  #navtoggle .current {
    flex          : 1;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
  }
  #navscrim {
    display       : block;
    position      : fixed;
    inset         : 0;
    background    : rgba(0,0,0,.45);
    opacity       : 0;
    visibility    : hidden;
    transition    : opacity .2s ease;
    z-index       : 998;
  }
  #navscrim.open { opacity: 1; visibility: visible; }
  #navdrawer {
    display       : block;
    /* Closed, it is only translated off-screen, so every link in it stayed focusable and in
       the accessibility tree: tabbing walked into invisible controls. visibility:hidden takes
       it out of both, and the transition keeps it visible while it slides away. */
    visibility    : hidden;
    position      : fixed;
    top           : 0;
    right         : 0;
    height        : 100%;
    width         : 78%;
    max-width     : 310px;
    background    : #e8407a;
    transform     : translateX(100%);
    transition    : transform .22s ease, visibility .22s;
    z-index       : 999;
    overflow-y    : auto;
    -webkit-overflow-scrolling: touch;
  }
  #navdrawer.open {
    transform     : translateX(0);
    visibility    : visible;
  }
  #navdrawer .shut {
    width         : 100%;
    text-align    : right;
    background    : none;
    border        : 0;
    color         : #fff;
    font-size     : 28px;
    line-height   : 1;
    padding       : 10px 16px;
    cursor        : pointer;
  }
  #navdrawer a {
    display       : block;
    color         : #fff;
    font-weight   : bold;
    font-size     : 15.5px;
    padding       : 15px 18px;
    text-decoration: none;
    border-bottom : 1px solid rgba(255,255,255,.18);
  }
  #navdrawer a.active {
    background    : #fde8d8;
    color         : #000;
  }
  /* Sub-tabs sit under their parent, indented, so the hierarchy survives the flattening. */
  #navdrawer a.sub {
    padding-left  : 34px;
    font-size     : 14px;
    font-weight   : normal;
    background    : rgba(0,0,0,.12);
  }
  #navdrawer a.sub.active {
    background    : #fde8d8;
    color         : #000;
  }

  #subtabnav {
    overflow      : hidden;
    display       : block;
    padding-top   : 0;
  }
  audio {
    margin-left   : 0;
  }
}

@media only screen and (max-width: 600px) {
  form {
    width         : 100%;
    min-width     : initial;
    box-sizing    : border-box;
  }
  #top h1 {
    font-size     : 22px;
    padding-top   : 16px;
    padding-bottom: 16px;
  }
  #statusbar h2 {
    font-size     : 18px;
    padding-top   : 12px;
    padding-bottom: 12px;
  }
  .group-note-popup {
    width         : 90vw;
    left          : 4px !important;
    font-size     : 1.1em;
    min-width     : initial;
  }
  #subtabnav {
    overflow-x    : auto;
    flex-wrap     : nowrap;
  }
  fieldset {
    min-width     : initial;
    width         : 100%;
    margin        : 10px 0;
    box-sizing    : border-box;
  }
  input, select, textarea,
  input.intText, input.filterInput, textarea.intText,
  .styled-select, .styled-select select,
  .styled-select.slate, .styled-select.slate select {
    width         : 100% !important;
    max-width     : 100% !important;
    min-width     : initial !important;
    margin-left   : 0 !important;
    /* margin-right stayed at 20px, so a width:100% control overflowed by exactly that. */
    margin-right  : 0 !important;
    box-sizing    : border-box;
      /* Phones get a bigger target and a bigger font. 16px is not cosmetic: below it,
         iOS zooms the whole page when the field takes focus, which then leaves the
         layout scrolled sideways. 46px clears the 44px touch-target minimum. */
      min-height    : 46px !important;
      font-size     : 16px !important;
      padding       : 11px 12px !important;
      line-height   : 1.3 !important;
  }

    /* The wrapper is height:29px with overflow:hidden, so forcing its select to 46px above
       clipped 17px off the control and took part of the option text with it. The wrapper has
       to grow with its contents. */
    .styled-select, .styled-select.slate, #adminmodeswitch {
      height        : auto !important;
      overflow      : visible !important;
      width         : auto !important;
    }

    /* The shorthand padding above overrides the padding-right that reserves room for the
       arrow, so option text ran underneath it on phones. Selects need the right-hand room
       back; text inputs do not. */
    select {
      padding       : 11px 34px 11px 12px !important;
    }

    /* Buttons were swept up by the 16px bump, which exists only because iOS zooms the page
       when a text field under 16px takes focus. A button does not trigger that, so this was a
       20% wider label for no benefit, inside a width:100% box whose label cannot wrap. The
       touch target stays 46px. */
    input[type="submit"], input[type="button"], input[type="reset"] {
      font-size     : 14px !important;
      padding       : 11px 10px !important;
    }
  label {
    display       : block;
  }
  label,
  audio,
  input[type="color"],
  input[type="button"], input[type="submit"], input[type="reset"],
  button,
  span.error, span.uploading, span.confirmed, span.listen-required, span.convert-failed,
  .styled-select,
  #rcontain p, #lcontain p, #fourcontain p, #rcontain li, #lcontain li, #container p, #footer p,
  .tab, .tab2 {
    margin-left   : 0 !important;
  }
  h2 {
    font-size     : 1.1em;
  }
  h3 {
    font-size     : 1em;
  }
  .container {
    font-size     : 0.8em;
  }
}

@keyframes conveyor-right {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes conveyor-left {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
.tab-conveyor-track {
    display                 : flex !important;
    flex-wrap               : nowrap !important;
    list-style              : none;
    margin                  : 0;
    padding                 : 0;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration      : 40s;
    width                   : max-content;
}
.tab-conveyor-track.paused {
    animation-play-state    : paused;
}

@keyframes bg-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes bg-twinkle {
    0%, 100% { opacity: var(--base-opacity); }
    50%       { opacity: calc(var(--base-opacity) * 0.5); }
}
@keyframes bg-drift-a {
    0%   { translate:   0px   0px; }
    25%  { translate:  40px -30px; }
    50%  { translate:  20px  50px; }
    75%  { translate: -35px  20px; }
    100% { translate:   0px   0px; }
}
@keyframes bg-drift-b {
    0%   { translate:   0px   0px; }
    25%  { translate: -50px  25px; }
    50%  { translate: -10px -40px; }
    75%  { translate:  45px -15px; }
    100% { translate:   0px   0px; }
}
@keyframes bg-drift-c {
    0%   { translate:   0px   0px; }
    33%  { translate:  30px  45px; }
    66%  { translate: -40px  15px; }
    100% { translate:   0px   0px; }
}
@keyframes bg-drift-d {
    0%   { translate:   0px   0px; }
    20%  { translate: -25px -45px; }
    60%  { translate:  50px -20px; }
    80%  { translate:  15px  35px; }
    100% { translate:   0px   0px; }
}
.bg-decoration {
    animation: bg-spin var(--spin-dur) linear infinite,
               bg-twinkle var(--twinkle-dur) ease-in-out infinite,
               var(--drift-anim) var(--drift-dur) ease-in-out infinite;
    animation-delay: 0s, 0s, var(--drift-delay);
}