/*----Application/CONTROLLER/STYLES/clearfix.style.css----*/
/* CLEAR FIX */  
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {text-decoration:none;}

a img { border: none; }


.clearfix:after 
{
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

html[xmlns] .clearfix 
{
	display: block;
}

* html .clearfix 
{
	height: 1%;
}

.floatLeft
{
	float:left;
}
.floatRight
{
	float:right;
}

/*----Application/CONTROLLER/STYLES/components.style.css----*/


.ods-focus-ring,
.ods-btn:focus-visible,
.ods-btn.is-focus,
.ods-field:focus-visible,
.ods-field.is-focus,
.ods-check:focus-visible,
.ods-check.is-focus,
.ods-radio:focus-visible,
.ods-radio.is-focus,
.ods-table__sort:focus-visible,
.ods-table__action:focus-visible,
.ods-pagination__link:focus-visible,
.ods-alert__action:focus-visible
{
	outline        : 2px solid var(--color-grey-dark);
	outline-offset : 2px;
}

/* Text available to assistive technology but not shown on screen. */
.ods-visually-hidden
{
	position    : absolute;
	width       : 1px;
	height      : 1px;
	margin      : -1px;
	padding     : 0;
	overflow    : hidden;
	clip        : rect(0 0 0 0);
	white-space : nowrap;
	border      : 0;
}

/* One spin keyframe, shared by the button Loading state and the loading indicator. */
@keyframes ods-spin
{
	to { transform : rotate(360deg); }
}

.ods-btn
{
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	gap             : var(--space-2);
	box-sizing      : border-box;
	border          : 1px solid transparent;
	border-radius   : var(--radius-button);
	font-family     : var(--font-family);
	font-weight     : 400;
	letter-spacing  : 0;
	text-decoration : none;
	white-space     : nowrap;
	cursor          : pointer;
		transition      : opacity 300ms ease-in-out,
	                  background-color 200ms ease-in-out,
	                  border-color 200ms ease-in-out,
	                  color 200ms ease-in-out;
}

.ods-btn--lg
{
	min-height  : 56px;
	padding     : 15px var(--space-6);
	font-size   : 18px;
	line-height : 24px;
}

.ods-btn--md
{
	min-height  : 48px;
	padding     : 13px var(--space-6);
	font-size   : 16px;
	line-height : 20px;
}

.ods-btn--sm
{
	min-height  : 32px;
	padding     : 7px var(--space-5);
	font-size   : 14px;
	line-height : 16px;
}

/* ---- Primary: Shade S1 fill, white label ---- */
.ods-btn--primary
{
	background   : var(--color-shade-1);
	border-color : var(--color-shade-1);
	color        : var(--color-white);
}

.ods-btn--primary:hover,
.ods-btn--primary.is-hover
{
	opacity : 0.9; }

.ods-btn--primary:active,
.ods-btn--primary.is-active
{
	background   : var(--color-shade-2); /* Active / click = Shade S2 */
	border-color : var(--color-shade-2);
	opacity      : 1;
}

/* ---- Secondary: white fill, green outline ---- */
.ods-btn--secondary
{
	background   : var(--color-white);
	border-color : var(--color-shade-1);
	color        : var(--color-shade-1);
}

.ods-btn--secondary:hover,
.ods-btn--secondary.is-hover
{
	opacity : 0.9;
}

.ods-btn--secondary:active,
.ods-btn--secondary.is-active
{
	border-color : var(--color-shade-2);
	color        : var(--color-shade-2);
	opacity      : 1;
}

/* ---- Tertiary: ghost ---- */
.ods-btn--tertiary
{
	background   : transparent;
	border-color : transparent;
	color        : var(--color-shade-1);
}

.ods-btn--tertiary:hover,
.ods-btn--tertiary.is-hover
{
	opacity : 0.9;
}

.ods-btn--tertiary:active,
.ods-btn--tertiary.is-active
{
	color   : var(--color-shade-2);
	opacity : 1;
}

/* ---- Link: inline, no box ---- */
.ods-btn--link
{
	background      : transparent;
	border-color    : transparent;
	color           : var(--color-shade-1);
	text-decoration : underline;
	padding-left    : 0;
	padding-right   : 0;
	min-height      : 0;
}

.ods-btn--link:hover,
.ods-btn--link.is-hover
{
	opacity : 0.9;
}

.ods-btn--link:active,
.ods-btn--link.is-active
{
	color   : var(--color-shade-2);
	opacity : 1;
}

/* ---- Danger: white fill, error outline ---- */
.ods-btn--danger
{
	background   : var(--color-white);
	border-color : var(--color-error);
	color        : var(--color-error);
}

.ods-btn--danger:hover,
.ods-btn--danger.is-hover
{
	opacity : 0.9;
}

.ods-btn--danger:active,
.ods-btn--danger.is-active
{
	background : var(--color-error);
	color      : var(--color-white);
	opacity    : 1;
}

.ods-btn.is-loading
{
	pointer-events : none;
}

.ods-btn.is-loading::after
{
	content             : "";
	width               : 1em;
	height              : 1em;
	box-sizing          : border-box;
	border              : 2px solid currentColor;
	border-right-color  : transparent;
	border-radius       : 50%;
	animation           : ods-spin 800ms linear infinite;
}

.ods-btn:disabled,
.ods-btn.is-disabled
{
	background     : var(--color-silver);
	border-color   : var(--color-border);
	color          : var(--color-grey-light);
	cursor         : not-allowed;
	opacity        : 1;
	pointer-events : none;
	text-decoration: none;
}

.ods-btn--icon
{
	padding : 0;
	width   : 48px;
}

.ods-btn--icon.ods-btn--lg { width : 64px; }
.ods-btn--icon.ods-btn--sm { width : 32px; }

/* Text input, select and textarea share one base. */
.ods-field
{
	box-sizing    : border-box;
	width         : 100%;
	font-family   : var(--font-family);
	font-size     : 16px;
	line-height   : 24px;
	color         : var(--color-black);
	background    : var(--color-white);
	border        : 1px solid var(--color-border);
	border-radius : var(--radius-button);
	padding       : var(--space-2) var(--space-3);
	transition    : border-color 200ms ease-in-out, background-color 200ms ease-in-out;
}

/* Focus also darkens the border, so the state reads without relying on the ring alone. */
.ods-field:focus-visible,
.ods-field.is-focus
{
	border-color : var(--color-grey-dark);
}

.ods-field--error,
.ods-field[aria-invalid="true"]
{
	border-color : var(--color-error);
	border-width : 2px;
	padding      : 7px 11px; /* keeps the box the same height as the 1px border state */
}

.ods-field:disabled,
.ods-field.is-disabled
{
	background   : var(--color-silver);
	border-color : var(--color-border);
	color        : var(--color-grey-light);
	cursor       : not-allowed;
}

.ods-field--textarea
{
	min-height : 96px;
	resize     : vertical;
}

/* Checkbox and radio. accent-color tints the native control with the brand green. */
.ods-check,
.ods-radio
{
	width        : 16px;
	height       : 16px;
	margin       : 0;
	accent-color : var(--color-shade-1);
	cursor       : pointer;
}

.ods-check--error,
.ods-check[aria-invalid="true"],
.ods-radio--error,
.ods-radio[aria-invalid="true"]
{
	/* box-shadow, not outline: the outline belongs to the focus ring. */
	box-shadow : 0 0 0 2px var(--color-error);
	border-radius : var(--radius-button);
}

.ods-check:disabled,
.ods-check.is-disabled,
.ods-radio:disabled,
.ods-radio.is-disabled
{
	cursor  : not-allowed;
	opacity : 0.4;
}

/* ---- Form field wrapper ---- */
.ods-form-field
{
	display       : block;
	margin-bottom : var(--space-4);
	font-family   : var(--font-family);
}

.ods-form-field__label
{
	display       : block;
	font-size     : 14px;
	line-height   : 20px;
	font-weight   : 500;
	color         : var(--color-grey-dark);
	margin-bottom : var(--space-1);
}

.ods-form-field__required
{
	color       : var(--color-error);
	margin-left : var(--space-1);
}

/* Inline error message, wired to the control with aria-describedby / aria-errormessage. */
.ods-form-field__error
{
	display     : block;
	margin-top  : var(--space-1);
	font-size   : 14px;
	line-height : 20px;
	font-weight : 500;
	color       : var(--color-error);
}

.ods-form-field__hint
{
	display     : block;
	margin-top  : var(--space-1);
	font-size   : 14px;
	line-height : 20px;
	color       : var(--color-grey-light);
}

/* A checkbox / radio sitting beside its own label. */
.ods-choice
{
	display     : flex;
	align-items : flex-start;
	gap         : var(--space-3);
	font-size   : 14px;
	line-height : 20px;
	color       : var(--color-grey-dark);
	cursor      : pointer;
}

/* A group of choices under one shared label. */
.ods-choice-group
{
	display        : flex;
	flex-direction : column;
	gap            : var(--space-2);
}

/* A long checkbox group that scrolls rather than pushing the form down. */
.ods-choice-group--boxed
{
	max-height    : 200px;
	overflow-y    : auto;
	border        : 1px solid var(--color-border);
	border-radius : var(--radius-button);
	padding       : var(--space-3);
}

/* Two fields to a row above 768px, one below. */
.ods-form-grid
{
	display               : grid;
	grid-template-columns : repeat(2, minmax(0, 1fr));
	column-gap            : var(--space-5);
}

.ods-form-grid > .ods-form-field--full
{
	grid-column : 1 / -1;
}

.ods-form-actions
{
	display         : flex;
	flex-wrap       : wrap;
	align-items     : center;
	justify-content : flex-end;
	gap             : var(--space-2);
	margin-top      : var(--space-5);
}

.ods-form-actions--start
{
	justify-content : flex-start;
}

/* A block of text sitting between fields, at field-label weight. */
.ods-form-note
{
	margin      : 0 0 var(--space-4) 0;
	font-family : var(--font-family);
	font-size   : 14px;
	line-height : 20px;
	color       : var(--color-grey);
}

@media (max-width: 767px)
{
	.ods-form-grid
	{
		grid-template-columns : minmax(0, 1fr);
	}
}

.ods-table-wrap
{
	width         : 100%;
	overflow-x    : auto;
	background    : var(--color-white);
	border        : 1px solid var(--color-border);
	border-radius : var(--radius-card);
	box-shadow    : var(--shadow-4);
}

/* The wrap sits inside a panel that already carries the card chrome. */
.ods-table-wrap--flush
{
	background    : transparent;
	border        : 0;
	border-radius : 0;
	box-shadow    : none;
}

.ods-table
{
	width           : 100%;
	border-collapse : collapse;
	font-family     : var(--font-family);
	font-size       : 14px;
	line-height     : 20px;
	color           : var(--color-grey);
}

.ods-table thead th
{
	background     : var(--color-silver);
	color          : var(--color-grey-light);
	font-size      : 12px;
	line-height    : 16px;
	font-weight    : 500;
	text-transform : uppercase;
	letter-spacing : var(--tracking-wide);
	text-align     : left;
	padding        : var(--space-3);
	border-bottom  : 1px solid var(--color-border);
	white-space    : nowrap;
}

.ods-table tbody td
{
	padding       : var(--space-3);
	border-bottom : 1px solid var(--color-silver);
	vertical-align: top;
}

.ods-table tbody tr:hover
{
	background : var(--color-silver);
}

.ods-table__sort
{
	display         : inline-flex;
	align-items     : center;
	gap             : var(--space-1);
	color           : inherit;
	text-decoration : none;
	font            : inherit;
	background      : none;
	border          : 0;
	padding         : 0;
	cursor          : pointer;
	text-transform  : inherit;
	letter-spacing  : inherit;
}

.ods-table__sort::after
{
	content : "\2195"; /* up-down arrow: sortable, not currently sorted */
	opacity : 0.5;
}

.ods-table th[aria-sort="ascending"] .ods-table__sort::after
{
	content : "\25B2"; /* filled up triangle */
	opacity : 1;
}

.ods-table th[aria-sort="descending"] .ods-table__sort::after
{
	content : "\25BC"; /* filled down triangle */
	opacity : 1;
}

.ods-table th[aria-sort="ascending"],
.ods-table th[aria-sort="descending"]
{
	background : var(--color-tint-5);
	color      : var(--color-black);
}

/* ---- Select-all / row select cell ---- */
.ods-table__select
{
	width      : 40px;
	text-align : center;
}

/* ---- Row actions cell ---- */
.ods-table__actions
{
	text-align  : right;
	white-space : nowrap;
}

.ods-table__action
{
	color           : var(--color-shade-1);
	text-decoration : none;
	transition      : opacity 200ms ease-in-out;
}

.ods-table__action:hover
{
	opacity         : 0.9;
	text-decoration : underline;
}

.ods-table__action--danger
{
	color : var(--color-error);
}

.ods-table__action-sep
{
	color   : var(--color-grey-light);
	padding : 0 var(--space-1);
}

/* A row whose record is switched off: muted, never colour alone. */
.ods-table tbody tr.ods-table__row--off td
{
	color : var(--color-grey-light);
}

/* Bulk actions and pagination, below the table and inside its box. Pinned left
   so a sideways-scrolled table never carries them out of view. */
.ods-table__bulk
{
	display         : flex;
	flex-wrap       : wrap;
	align-items     : center;
	justify-content : space-between;
	gap             : var(--space-3);
	padding         : var(--space-4);
	border-top      : 1px solid var(--color-silver);
	position        : sticky;
	left            : 0;
	background      : var(--color-white);
}

.ods-table__bulk-actions
{
	display     : flex;
	flex-wrap   : wrap;
	align-items : center;
	gap         : var(--space-2);
}

.ods-table__bulk .ods-pagination
{
	padding : 0;
}

/* ---- Empty state ---- */
.ods-table__empty
{
	padding     : var(--space-8) var(--space-5);
	text-align  : center;
	color       : var(--color-grey-light);
	font-size   : 16px;
	line-height : 24px;
}

.ods-table__empty-title
{
	display     : block;
	color       : var(--color-black);
	font-size   : 20px;
	line-height : 28px;
	font-weight : 600;
	margin-bottom : var(--space-2);
}

/* ---- Pagination ---- */
.ods-pagination
{
	display         : flex;
	flex-wrap       : wrap;
	align-items     : center;
	justify-content : center;
	gap             : var(--space-1);
	list-style      : none;
	margin          : 0;
	padding         : var(--space-4);
	font-family     : var(--font-family);
}

.ods-pagination__item
{
	display : inline-flex;
}

.ods-pagination__link
{
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	box-sizing      : border-box;
	min-width       : 32px;
	height          : 32px;
	padding         : 0 var(--space-2);
	border          : 1px solid var(--color-border);
	border-radius   : var(--radius-button);
	background      : var(--color-white);
	color           : var(--color-grey-dark);
	font-size       : 14px;
	line-height     : 20px;
	text-decoration : none;
	transition      : background-color 200ms ease-in-out, opacity 200ms ease-in-out;
}

.ods-pagination__link:hover
{
	background : var(--color-silver);
	opacity    : 0.9;
}

/* Current page: marked programmatically with aria-current="page", and styled
   off that same attribute so the two always agree. */
.ods-pagination__link[aria-current="page"]
{
	background   : var(--color-shade-1);
	border-color : var(--color-shade-1);
	color        : var(--color-white);
	font-weight  : 500;
}

.ods-pagination__link.is-disabled
{
	color          : var(--color-grey-light);
	background     : var(--color-silver);
	pointer-events : none;
}

.ods-badge
{
	display        : inline-flex;
	align-items    : center;
	box-sizing     : border-box;
	border         : 1px solid transparent;
	border-radius  : var(--radius-button);
	padding        : 2px var(--space-2);
	font-family    : var(--font-family);
	font-size      : 12px;
	line-height    : 16px;
	font-weight    : 500;
	letter-spacing : var(--tracking-wide);
	white-space    : nowrap;
}

/* 0 NEW - informational */
.ods-badge--new
{
	background   : var(--color-white);
	border-color : var(--color-info);
	color        : var(--color-info);
}

/* 1 COMPLETED - success */
.ods-badge--completed
{
	background   : var(--color-tint-5);
	border-color : var(--color-tint-2);
	color        : var(--color-success);
}

/* 2 DISABLED - muted neutral */
.ods-badge--disabled
{
	background   : var(--color-silver);
	border-color : var(--color-border);
	color        : var(--color-grey-light);
}

/* 3 DECLINED - error */
.ods-badge--declined
{
	background   : var(--color-white);
	border-color : var(--color-error);
	color        : var(--color-error);
}

/* 4 INVALID - error on a filled ground, to read apart from DECLINED */
.ods-badge--invalid
{
	background   : var(--color-error);
	border-color : var(--color-error);
	color        : var(--color-white);
}

/* 5 REFUND - neutral, distinct from DISABLED */
.ods-badge--refund
{
	background   : var(--color-white);
	border-color : var(--color-grey-blue);
	color        : var(--color-grey-dark);
}

/* 6 HELD (card payment under review) - warning */
.ods-badge--pending,
.ods-badge--held
{
	background   : var(--color-warning);
	border-color : var(--color-warning);
	color        : var(--color-black);
}

.ods-alert
{
	display          : flex;
	align-items      : flex-start;
	gap              : var(--space-3);
	box-sizing       : border-box;
	padding          : var(--space-4);
	border           : 1px solid var(--color-border);
	border-left-width: 4px;
	border-radius    : var(--radius-card);
	background       : var(--color-white);
	font-family      : var(--font-family);
	font-size        : 14px;
	line-height      : 20px;
	color            : var(--color-grey-dark);
}

.ods-alert__title
{
	display     : block;
	font-size   : 16px;
	line-height : 24px;
	font-weight : 500;
	margin-bottom : var(--space-1);
}

.ods-alert__body
{
	display : block;
}

.ods-alert--info
{
	border-color : var(--color-info);
	background   : var(--color-silver);
}
.ods-alert--info .ods-alert__title { color : var(--color-info); }

.ods-alert--success
{
	border-color : var(--color-success);
	background   : var(--color-tint-5);
}
.ods-alert--success .ods-alert__title { color : var(--color-success); }

.ods-alert--warning
{
	border-color : var(--color-warning);
	background   : var(--color-white);
}
.ods-alert--warning .ods-alert__title { color : var(--color-black); }

.ods-alert--error
{
	border-color : var(--color-error);
	background   : var(--color-white);
}
.ods-alert--error .ods-alert__title { color : var(--color-error); }

.ods-alert__icon
{
	flex        : 0 0 auto;
	line-height : 24px;
}

.ods-alert--info .ods-alert__icon    { color : var(--color-info); }
.ods-alert--success .ods-alert__icon { color : var(--color-success); }
.ods-alert--warning .ods-alert__icon { color : var(--color-warning); }
.ods-alert--error .ods-alert__icon   { color : var(--color-error); }

.ods-steps
{
	display     : flex;
	flex-wrap   : wrap;
	align-items : center;
	gap         : var(--space-3);
	list-style  : none;
	margin      : 0;
	padding     : 0;
	font-family : var(--font-family);
	font-size   : 14px;
	line-height : 20px;
}

.ods-steps__item
{
	display     : flex;
	align-items : center;
	gap         : var(--space-2);
	color       : var(--color-grey-light);
}

.ods-steps__num
{
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	box-sizing      : border-box;
	width           : 32px;
	height          : 32px;
	border          : 1px solid var(--color-border);
	border-radius   : 50%;
	background      : var(--color-white);
	color           : var(--color-grey-light);
	font-weight     : 500;
}

/* Completed steps */
.ods-steps__item--done
{
	color : var(--color-grey-dark);
}

.ods-steps__item--done .ods-steps__num
{
	background   : var(--color-tint-5);
	border-color : var(--color-tint-2);
	color        : var(--color-shade-3);
}

/* Current step: filled green marker plus a darker, heavier label. */
.ods-steps__item[aria-current="step"]
{
	color       : var(--color-black);
	font-weight : 500;
}

.ods-steps__item[aria-current="step"] .ods-steps__num
{
	background   : var(--color-shade-1);
	border-color : var(--color-shade-1);
	color        : var(--color-white);
}

.ods-steps__sep
{
	flex       : 0 0 var(--space-7);
	height     : 1px;
	background : var(--color-border);
}

.ods-card
{
	box-sizing    : border-box;
	background    : var(--color-white);
	border-radius : var(--radius-card);   /* 8px */
	box-shadow    : var(--shadow-4);      /* Section 5 resting elevation */
	padding       : var(--space-5);
	font-family   : var(--font-family);
	font-size     : 16px;
	line-height   : 24px;
	color         : var(--color-grey);
}

/* The other approved resting elevation. */
.ods-card--raised
{
	box-shadow : var(--shadow-6);
}

.ods-card__title
{
	display       : block;
	font-size     : 20px;
	line-height   : 28px;
	font-weight   : 600;
	color         : var(--color-black);
	margin        : 0 0 var(--space-3) 0;
}

.ods-card__footer
{
	display     : flex;
	gap         : var(--space-3);
	align-items : center;
	margin-top  : var(--space-4);
}

.ods-spinner
{
	display          : inline-block;
	box-sizing       : border-box;
	width            : 24px;
	height           : 24px;
	border           : 3px solid var(--color-tint-4);
	border-top-color : var(--color-shade-1);
	border-radius    : 50%;
	animation        : ods-spin 800ms linear infinite;
}

.ods-spinner--sm
{
	width        : 16px;
	height       : 16px;
	border-width : 2px;
}

.ods-spinner--lg
{
	width        : 40px;
	height       : 40px;
	border-width : 4px;
}

/* Centres a spinner inside a fixed-size overlay box. */
.ods-loading-overlay
{
	display         : flex;
	align-items     : center;
	justify-content : center;
	width           : 100%;
	height          : 100%;
}

.ods-loading
{
	display     : inline-flex;
	align-items : center;
	gap         : var(--space-3);
	font-family : var(--font-family);
	font-size   : 14px;
	line-height : 20px;
	color       : var(--color-grey);
}

@media (prefers-reduced-motion: reduce)
{
	.ods-btn,
	.ods-field,
	.ods-table__action,
	.ods-pagination__link
	{
		transition : none;
	}

	.ods-spinner,
	.ods-btn.is-loading::after
	{
		animation : none;
	}
}


/*----Application/CONTROLLER/STYLES/datepicker.style.css----*/
/* Overrides the jQuery UI 1.7.3 theme for the shared date picker popup.
   Everything is keyed off the #ui-datepicker-div id so it wins the cascade. */

#ui-datepicker-div
{
	box-sizing     : border-box;
	width          : 288px;
	padding        : var(--space-4);
	background     : var(--color-white);
	border         : 1px solid var(--color-border);
	border-radius  : var(--radius-card);
	box-shadow     : var(--shadow-16);
	font-family    : var(--font-family);
	font-size      : 14px;
	line-height    : 20px;
	font-weight    : 400;
	color          : var(--color-black);
}

#ui-datepicker-div select,
#ui-datepicker-div input,
#ui-datepicker-div button
{
	font-family : var(--font-family);
	font-size   : 14px;
	line-height : 20px;
}

/* Only the one-month picker is clamped: squeezing a multi-month one
   overlaps its columns, so those keep the width the widget sets. */
#ui-datepicker-div:not(.ui-datepicker-multi)
{
	max-width : calc(100vw - 32px);
}

/* ---- Header: month title between two square paging controls ---- */

#ui-datepicker-div .ui-datepicker-header
{
	position      : relative;
	min-height    : 32px;
	margin        : 0;
	padding       : 0;
	background    : none;
	border        : 0;
	border-radius : 0;
	color         : var(--color-black);
	font-weight   : 400;
}

#ui-datepicker-div .ui-datepicker-title
{
	margin      : 0 40px;
	font-size   : 16px;
	line-height : 32px;
	font-weight : 500;
	text-align  : center;
	color       : var(--color-black);
}

#ui-datepicker-div .ui-datepicker-title select
{
	float         : none;
	display       : inline-block;
	width         : auto;
	max-width     : 45%;
	margin        : 0 2px;
	padding       : 2px var(--space-1);
	background    : var(--color-white);
	border        : 1px solid var(--color-border);
	border-radius : var(--radius-button);
	color         : var(--color-black);
	line-height   : 20px;
}

#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next,
#ui-datepicker-div .ui-datepicker-prev-hover,
#ui-datepicker-div .ui-datepicker-next-hover
{
	position      : absolute;
	top           : 0;
	width         : 32px;
	height        : 32px;
	margin        : 0;
	padding       : 0;
	background    : none;
	border        : 0;
	border-radius : var(--radius-button);
	color         : var(--color-grey);
	cursor        : pointer;
}

#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-prev-hover
{
	left  : 0;
	right : auto;
}

#ui-datepicker-div .ui-datepicker-next,
#ui-datepicker-div .ui-datepicker-next-hover
{
	right : 0;
	left  : auto;
}

#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover,
#ui-datepicker-div .ui-datepicker-prev-hover,
#ui-datepicker-div .ui-datepicker-next-hover
{
	background : var(--color-silver);
	color      : var(--color-black);
}

#ui-datepicker-div .ui-datepicker-prev:focus-visible,
#ui-datepicker-div .ui-datepicker-next:focus-visible
{
	outline        : 2px solid var(--color-grey-dark);
	outline-offset : 2px;
}

/* The themed sprite is dropped for a chevron drawn from the current colour. */
#ui-datepicker-div .ui-datepicker-prev .ui-icon,
#ui-datepicker-div .ui-datepicker-next .ui-icon
{
	display : none;
}

#ui-datepicker-div .ui-datepicker-prev:after,
#ui-datepicker-div .ui-datepicker-next:after
{
	content      : "";
	position     : absolute;
	top          : 50%;
	left         : 50%;
	width        : 7px;
	height       : 7px;
	border-style : solid;
	border-color : currentColor;
	border-width : 2px 0 0 2px;
}

#ui-datepicker-div .ui-datepicker-prev:after
{
	transform : translate(-40%, -50%) rotate(-45deg);
}

#ui-datepicker-div .ui-datepicker-next:after
{
	transform : translate(-60%, -50%) rotate(135deg);
}

/* ---- Calendar grid ---- */

#ui-datepicker-div .ui-datepicker-calendar
{
	width           : 100%;
	margin          : var(--space-3) 0 0;
	border-collapse : collapse;
	font-size       : 14px;
}

#ui-datepicker-div .ui-datepicker-calendar th
{
	padding     : 0 0 var(--space-1);
	border      : 0;
	font-size   : 12px;
	line-height : 16px;
	font-weight : 500;
	text-align  : center;
	color       : var(--color-grey-light);
}

#ui-datepicker-div .ui-datepicker-calendar td
{
	padding : 1px;
	border  : 0;
}

#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span
{
	display         : block;
	box-sizing      : border-box;
	min-height      : 32px;
	padding         : 6px 0;
	background      : none;
	border          : 0;
	border-radius   : var(--radius-button);
	font-size       : 14px;
	line-height     : 20px;
	font-weight     : 400;
	text-align      : center;
	text-decoration : none;
	color           : var(--color-black);
}

#ui-datepicker-div .ui-datepicker-calendar td a:hover,
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-hover
{
	background : var(--color-silver);
	color      : var(--color-black);
}

#ui-datepicker-div .ui-datepicker-calendar td a:focus-visible
{
	outline        : 2px solid var(--color-grey-dark);
	outline-offset : -2px;
}

#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today a,
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-highlight
{
	background  : var(--color-tint-5);
	color       : var(--color-shade-1);
	font-weight : 500;
}

#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active,
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active:hover
{
	background  : var(--color-shade-1);
	color       : var(--color-white);
	font-weight : 500;
}

/* Days after today: shown, readable, not selectable. */
#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled,
#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled span
{
	background : none;
	color      : var(--color-grey-light);
	opacity    : 1;
	filter     : none;
}

#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-other-month span
{
	color : var(--color-grey-blue);
}

/* ---- Button pane ---- */

#ui-datepicker-div .ui-datepicker-buttonpane
{
	margin        : var(--space-3) 0 0;
	padding       : var(--space-3) 0 0;
	background    : none;
	border        : 0;
	border-top    : 1px solid var(--color-border);
	border-radius : 0;
}

#ui-datepicker-div .ui-datepicker-buttonpane button
{
	margin        : 0 0 0 var(--space-2);
	padding       : 6px var(--space-4);
	background    : var(--color-white);
	border        : 1px solid var(--color-shade-1);
	border-radius : var(--radius-button);
	color         : var(--color-shade-1);
	cursor        : pointer;
}

#ui-datepicker-div .ui-datepicker-buttonpane button.ui-datepicker-current
{
	background   : var(--color-shade-1);
	border-color : var(--color-shade-1);
	color        : var(--color-white);
}

/* ---- Phone ---- */

@media (max-width: 479px)
{
	#ui-datepicker-div
	{
		padding : var(--space-3);
	}

	#ui-datepicker-div .ui-datepicker-title
	{
		margin : 0 36px;
	}
}


/*----Application/CONTROLLER/STYLES/isolation.style.css----*/

/* ------------------------------------------------------------------ */
/* 1. Scope root - the type and colour a redesigned screen inherits    */
/* ------------------------------------------------------------------ */

.rd-scope.rd-scope
{
	font-family:    var(--font-family);
	font-size:      16px;  	line-height:    24px;  	font-weight:    400;
	color:          var(--color-grey);
	letter-spacing: var(--tracking-wide);
	text-shadow:    none;
}

/* ------------------------------------------------------------------ */
/* 2. Elements the legacy bundle styles by element selector            */
/* ------------------------------------------------------------------ */

.rd-scope.rd-scope a
{
	color:           var(--color-shade-1);  	text-decoration: none;
}

.rd-scope.rd-scope a:focus-visible,
.rd-scope.rd-scope button:focus-visible,
.rd-scope.rd-scope input:focus-visible,
.rd-scope.rd-scope select:focus-visible,
.rd-scope.rd-scope textarea:focus-visible
{
	outline:        2px solid var(--color-grey-dark);  	outline-offset: 2px;
}

/* .ods-btn is a redesigned component, not legacy chrome: exempt it, or this reset
   (0,2,1) out-specifies it (0,1,0) and every button in a scope renders unstyled. */
.rd-scope.rd-scope input[type=button]:not(.ods-btn),
.rd-scope.rd-scope input[type=submit]:not(.ods-btn),
.rd-scope.rd-scope input[type=image]:not(.ods-btn),
.rd-scope.rd-scope button:not(.ods-btn)
{
	background:    none;
	border:        0;
	border-radius: 0;
	box-shadow:    none;
	text-shadow:   none;
	color:         inherit;
	font:          inherit;
	height:        auto;
	padding:       0;
}

/* `.green-button` and `.green` set colour with !important. */
.rd-scope.rd-scope .green-button,
.rd-scope.rd-scope .green,
.rd-scope.rd-scope input[type=button].mini,
.rd-scope.rd-scope input[type=submit].mini
{
	background:  none !important;
	color:       inherit !important;
	text-shadow: none !important;
	font-size:   inherit !important;
	padding:     0 !important;
}

/* ------------------------------------------------------------------ */
/* 3. Legacy class hooks - background images, boxes, fixed widths      */
/* ------------------------------------------------------------------ */

.rd-scope.rd-scope .shoppingcart,
.rd-scope.rd-scope .shoppingcart > .wrapper,
.rd-scope.rd-scope .steps,
.rd-scope.rd-scope .steps-tabs,
.rd-scope.rd-scope .step,
.rd-scope.rd-scope .header,
.rd-scope.rd-scope .footer,
.rd-scope.rd-scope .page-header,
.rd-scope.rd-scope .gray-box,
.rd-scope.rd-scope .info-box,
.rd-scope.rd-scope .icon,
.rd-scope.rd-scope .cart-items-header,
.rd-scope.rd-scope .payment_tabs .tabs li,
.rd-scope.rd-scope .payment_tabs .tab_content,
.rd-scope.rd-scope .loginForm,
.rd-scope.rd-scope .download-page > .wrapper,
.rd-scope.rd-scope .product-list > .wrapper,
.rd-scope.rd-scope table.list thead th,
.rd-scope.rd-scope table.list tfoot td,
.rd-scope.rd-scope table.form thead th,
.rd-scope.rd-scope table.list tbody tr:nth-child(even),
.rd-scope.rd-scope table.list tr.pagination a
{
	background-image: none !important;
	background-color: transparent;
	border:           0;
	border-radius:    0;
	box-shadow:       none;
	text-shadow:      none;
	color:            inherit;
	font-size:        inherit;
	line-height:      inherit;
	min-width:        0;
}

/* Fixed legacy widths, one of them !important. */
.rd-scope.rd-scope .cart-text,
.rd-scope.rd-scope .top-text,
.rd-scope.rd-scope .bottom-text,
.rd-scope.rd-scope .product-list,
.rd-scope.rd-scope .options-list,
.rd-scope.rd-scope .product-add,
.rd-scope.rd-scope .menu-wrapper
{
	width:      auto !important;
	min-width:  0 !important;
	max-width:  none;
	margin:     0;
	text-align: left;
}

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */

.rd-scope.rd-scope img[src*="card.png"],
.rd-scope.rd-scope img[src*="paypal.png"],
.rd-scope.rd-scope img[src*="payment-tab-paypal-icon.gif"]
{
	display: none !important;
}


/*----Application/CONTROLLER/STYLES/jquery-ui-1.7.3.style.css----*/
/*
* jQuery UI CSS Framework
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*/

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*
* jQuery UI CSS Framework
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS,%20Tahoma,%20Verdana,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=02_glass.png&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=08_diagonals_thick.png&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=08_diagonals_thick.png&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=01_flat.png&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
*/


/* Component containers
----------------------------------*/
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(/orders/Application/CONTROLLER/IMAGES/jqui/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(/orders/Application/CONTROLLER/IMAGES/jqui/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url(/orders/Application/CONTROLLER/IMAGES/jqui/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1c94c4; outline: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; outline: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url(/orders/Application/CONTROLLER/IMAGES/jqui/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #c77405; outline: none; }
.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; outline: none; }
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #fbd850; background: #ffffff url(/orders/Application/CONTROLLER/IMAGES/jqui/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #eb8f00; outline: none; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; outline: none; text-decoration: none; }

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px solid #fed22f; background: #ffe45c url(/orders/Application/CONTROLLER/IMAGES/jqui/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x; color: #363636; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a { color: #363636; }
.ui-state-error, .ui-widget-content .ui-state-error {border: 1px solid #cd0a0a; background: #b81900 url(/orders/Application/CONTROLLER/IMAGES/jqui/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat; color: #ffffff; }
.ui-state-error a, .ui-widget-content .ui-state-error a { color: #ffffff; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text { color: #ffffff; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }

/* Icons
----------------------------------*/

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(/orders/Application/CONTROLLER/IMAGES/jqui/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(/orders/Application/CONTROLLER/IMAGES/jqui/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(/orders/Application/CONTROLLER/IMAGES/jqui/ui-icons_ffffff_256x240.png); }
.ui-state-default .ui-icon { background-image: url(/orders/Application/CONTROLLER/IMAGES/jqui/ui-icons_ef8c08_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(/orders/Application/CONTROLLER/IMAGES/jqui/ui-icons_ef8c08_256x240.png); }
.ui-state-active .ui-icon {background-image: url(/orders/Application/CONTROLLER/IMAGES/jqui/ui-icons_ef8c08_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(/orders/Application/CONTROLLER/IMAGES/jqui/ui-icons_228ef1_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(/orders/Application/CONTROLLER/IMAGES/jqui/ui-icons_ffd27a_256x240.png); }

/* positioning */
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-off { background-position: -96px -144px; }
.ui-icon-radio-on { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; }
.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-right {  -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; }

/* Overlays */
.ui-widget-overlay { background: #666666 url(/orders/Application/CONTROLLER/IMAGES/jqui/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat; opacity: .50;filter:Alpha(Opacity=50); }
.ui-widget-shadow { margin: -5px 0 0 -5px; padding: 5px; background: #000000 url(/orders/Application/CONTROLLER/IMAGES/jqui/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 5px; -webkit-border-radius: 5px; }/* Resizable
----------------------------------*/
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/* Accordion
----------------------------------*/
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; }
.ui-accordion .ui-accordion-content-active { display: block; }/* Dialog
----------------------------------*/
.ui-dialog { position: relative; padding: .2em; width: 300px; }
.ui-dialog .ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
/* Slider
----------------------------------*/
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }

.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }/* Tabs
----------------------------------*/
.ui-tabs { padding: .2em; zoom: 1; }
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; }
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }
/* Datepicker
----------------------------------*/
.ui-datepicker { width: 17em; padding: .2em .2em 0; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; }

/* RTL support */
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
    display: none; /*sorry for IE5*/
    display/**/: block; /*sorry for IE5*/
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}

/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

/*----Application/CONTROLLER/STYLES/layout.style.css----*/
/* Storefront layout container and page rhythm. Values come from tokens.style.css. */

.storefront-container
{
	box-sizing    : border-box;
	width         : 100%;
	max-width     : var(--container-max, 1080px);
	margin-left   : auto;
	margin-right  : auto;
	padding-left  : var(--container-gutter, 24px);
	padding-right : var(--container-gutter, 24px);
}

/* overflow-x makes this region the horizontal scroller, so over-wide content
   scrolls inside it instead of dragging the whole page sideways. */
.storefront-page
{
	padding-top    : var(--space-8, 48px);
	padding-bottom : var(--space-8, 48px);
	overflow-x     : auto;
}

@media (min-width: 1024px)
{
	.storefront-page
	{
		padding-top    : var(--space-9, 64px);
		padding-bottom : var(--space-9, 64px);
	}
}

/* ------------------------------------------------------------------ */
/* Admin shell: dark sidebar, slim top bar, full-width content.        */
/* Desktop is the base; 768-1023px is an icon rail, below 768 stacks.  */
/* ------------------------------------------------------------------ */

.ods-admin-body
{
	margin      : 0;
	background  : var(--color-silver);
	/* Replaces the legacy `#site` Calibri rule as the shell-wide inherited face. */
	font-family : var(--font-family);
}

.ods-admin
{
	display     : flex;
	align-items : stretch;
	min-height  : 100vh;
}

.ods-admin .ods-sidebar
{
	box-sizing     : border-box;
	flex           : 0 0 256px;
	width          : 256px;
	height         : 100vh;
	position       : sticky;
	top            : 0;
	display        : flex;
	flex-direction : column;
	overflow-y     : auto;
	background     : var(--color-secondary);
	color          : var(--color-silver);
	font-size      : 14px;
	line-height    : 20px;
}

/* Off-screen but focusable: the phone menu toggle and the rail labels. */
.ods-sidebar__switch,
.ods-sidebar__toggle-label
{
	position : absolute;
	width    : 1px;
	height   : 1px;
	margin   : -1px;
	padding  : 0;
	border   : 0;
	overflow : hidden;
	clip     : rect(0 0 0 0);
}

.ods-sidebar__brand
{
	box-sizing    : border-box;
	flex          : 0 0 auto;
	height        : var(--space-9);
	display       : flex;
	align-items   : center;
	padding       : 0 var(--space-5);
	border-bottom : 1px solid var(--color-grey-dark);
	font-size     : 20px;
	line-height   : 28px;
	font-weight   : 600;
	color         : var(--color-white);
}

.ods-sidebar__brand-accent
{
	color : var(--color-primary);
}

.ods-sidebar__brand-short
{
	display : none;
	color   : var(--color-primary);
}

.ods-sidebar__toggle
{
	display     : none;
	margin-left : auto;
	padding     : var(--space-2);
	cursor      : pointer;
	color       : var(--color-silver);
}

.ods-sidebar__nav
{
	flex    : 1 1 auto;
	padding : var(--space-4) 0;
}

.ods-sidebar__sections,
.ods-sidebar__pages
{
	list-style : none;
	margin     : 0;
	padding    : 0;
}

.ods-sidebar__section
{
	position : relative;
}

.ods-admin .ods-sidebar a
{
	color           : inherit;
	text-decoration : none;
}

.ods-sidebar__link
{
	display     : flex;
	align-items : center;
	gap         : var(--space-3);
	padding     : var(--space-2) var(--space-5);
}

/* Section rows with no page of their own are buttons, so they click like one. */
span.ods-sidebar__link
{
	cursor      : pointer;
	user-select : none;
}

.ods-admin .ods-sidebar a.ods-sidebar__link:hover,
.ods-admin .ods-sidebar span.ods-sidebar__link:hover
{
	background : rgba(255, 255, 255, 0.05);
	color      : var(--color-white);
}

.ods-sidebar__icon
{
	flex    : 0 0 20px;
	width   : 20px;
	height  : 20px;
	display : block;
}

/* Collapsed by default: only the current section lists its sub-pages. */
.ods-sidebar__pages
{
	display : none;
	padding : var(--space-1) 0;
}

.ods-sidebar__section.is-current > .ods-sidebar__pages,
.ods-sidebar__section.is-open > .ods-sidebar__pages
{
	display : block;
}

/* Current section: green bar plus a lifted row, per the admin shell mockup. */
.ods-admin .ods-sidebar .ods-sidebar__section.is-current > .ods-sidebar__link
{
	background   : rgba(255, 255, 255, 0.10);
	color        : var(--color-white);
	font-weight  : 500;
	border-left  : 4px solid var(--color-primary);
	padding-left : calc(var(--space-5) - 4px);
}

.ods-sidebar__page
{
	display : block;
	padding : var(--space-1) var(--space-4) var(--space-1) calc(var(--space-5) + 20px + var(--space-2));
}

.ods-admin .ods-sidebar a.ods-sidebar__page:hover
{
	color : var(--color-white);
}

.ods-admin .ods-sidebar a.ods-sidebar__page.is-current
{
	color       : var(--color-primary);
	font-weight : 500;
}

.ods-admin__main
{
	flex           : 1 1 auto;
	min-width      : 0;
	display        : flex;
	flex-direction : column;
}

.ods-topbar
{
	box-sizing      : border-box;
	flex            : 0 0 auto;
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	gap             : var(--space-4);
	height          : var(--space-9);
	padding         : 0 var(--space-6);
	background      : var(--color-white);
	border-bottom   : 1px solid var(--color-border);
}

.ods-topbar__crumbs
{
	display     : flex;
	align-items : center;
	gap         : var(--space-1);
	min-width   : 0;
	margin      : 0;
	font-size   : 14px;
	line-height : 20px;
}

.ods-topbar__crumb-section
{
	flex        : 0 1 auto;
	overflow    : hidden;
	white-space : nowrap;
	color       : var(--color-grey-light);
}

.ods-topbar__crumb-sep
{
	flex   : 0 0 12px;
	width  : 12px;
	height : 12px;
	color  : var(--color-grey-light);
}

.ods-topbar__crumb-section:empty + .ods-topbar__crumb-sep
{
	display : none;
}

.ods-topbar__crumb-page
{
	flex          : 0 1 auto;
	overflow      : hidden;
	text-overflow : ellipsis;
	white-space   : nowrap;
	font-weight   : 500;
	color         : var(--color-black);
}

.ods-topbar__account
{
	flex        : 0 0 auto;
	display     : flex;
	align-items : center;
	gap         : var(--space-3);
	font-size   : 14px;
	line-height : 20px;
	white-space : nowrap;
	color       : var(--color-grey);
}

.ods-admin .ods-topbar__logout
{
	display     : inline-flex;
	align-items : center;
	gap         : var(--space-1);
	color       : var(--color-shade-1);
}

.ods-topbar__logout-icon
{
	flex   : 0 0 16px;
	width  : 16px;
	height : 16px;
}

/* Over-wide legacy screens scroll inside the content region, not the whole page. */
.ods-admin__content
{
	box-sizing : border-box;
	flex       : 1 1 auto;
	width      : 100%;
	padding    : var(--space-6);
	overflow-x : auto;
}

/* ---- Admin page scaffolding: title row, panels, list-beside-form split ---- */
.ods-admin-page
{
	display        : flex;
	flex-direction : column;
	gap            : var(--space-5);
	font-family    : var(--font-family);
	font-size      : 14px;
	line-height    : 20px;
	color          : var(--color-grey);
}

.ods-admin-page__head
{
	display         : flex;
	flex-wrap       : wrap;
	align-items     : center;
	justify-content : space-between;
	gap             : var(--space-3);
}

.ods-admin-page__heading
{
	display        : flex;
	flex-direction : column;
	gap            : var(--space-1);
	min-width      : 0;
}

.ods-admin .ods-admin-page__back
{
	display         : inline-flex;
	align-items     : center;
	gap             : var(--space-2);
	color           : var(--color-shade-1);
	font-size       : 14px;
	line-height     : 20px;
}

.ods-admin-page__title
{
	margin      : 0;
	font-size   : 28px;
	line-height : 36px;
	font-weight : 700;
	color       : var(--color-black);
}

.ods-admin-page__actions
{
	display     : flex;
	flex-wrap   : wrap;
	align-items : center;
	gap         : var(--space-2);
}

.ods-admin-panel
{
	box-sizing    : border-box;
	min-width     : 0;
	background    : var(--color-white);
	border-radius : var(--radius-card);
	box-shadow    : var(--shadow-4);
}

.ods-admin-panel__head
{
	display         : flex;
	flex-wrap       : wrap;
	align-items     : baseline;
	justify-content : space-between;
	gap             : var(--space-3);
	padding         : var(--space-4) var(--space-5);
	border-bottom   : 1px solid var(--color-silver);
}

.ods-admin-panel__title
{
	margin      : 0;
	font-size   : 20px;
	line-height : 28px;
	font-weight : 600;
	color       : var(--color-black);
}

.ods-admin-panel__body
{
	padding : var(--space-5);
}

.ods-admin-panel--narrow
{
	max-width : 720px;
}

/* A data list beside the form that edits it. */
.ods-admin-split
{
	display               : grid;
	grid-template-columns : minmax(0, 2fr) minmax(0, 3fr);
	gap                   : var(--space-5);
	align-items           : start;
}

.ods-admin-columns
{
	display               : grid;
	grid-template-columns : repeat(2, minmax(0, 1fr));
	gap                   : var(--space-5);
	align-items           : start;
}

.ods-admin-stack
{
	display        : flex;
	flex-direction : column;
	gap            : var(--space-5);
	min-width      : 0;
}

@media (max-width: 1023px)
{
	.ods-admin-split,
	.ods-admin-columns
	{
		grid-template-columns : minmax(0, 1fr);
	}
}

/* ---- 768-1023px: icon rail, labels read but not shown ---- */
@media (min-width: 768px) and (max-width: 1023px)
{
	.ods-admin .ods-sidebar
	{
		flex     : 0 0 64px;
		width    : 64px;
		overflow : visible;
	}

	.ods-sidebar__brand
	{
		justify-content : center;
		padding         : 0;
	}

	.ods-sidebar__brand-full
	{
		display : none;
	}

	.ods-sidebar__brand-short
	{
		display : inline;
	}

	.ods-sidebar__label
	{
		position : absolute;
		width    : 1px;
		height   : 1px;
		margin   : -1px;
		overflow : hidden;
		clip     : rect(0 0 0 0);
	}

	.ods-sidebar__link
	{
		justify-content : center;
		padding         : var(--space-3) 0;
	}

	/* Sub-pages stay reachable from the rail as a hover / keyboard flyout. */
	.ods-sidebar__pages
	{
		display    : none;
		position   : absolute;
		top        : 0;
		left       : 64px;
		z-index    : 60;
		min-width  : 224px;
		padding    : var(--space-2) 0;
		background : var(--color-secondary);
		box-shadow : var(--shadow-8);
	}

	.ods-admin .ods-sidebar .ods-sidebar__section.is-current > .ods-sidebar__link
	{
		padding : var(--space-3) 4px var(--space-3) 0;
	}

	/* The rail shows sub-pages as a flyout, so the current section keeps its list closed. */
	.ods-sidebar__section.is-current > .ods-sidebar__pages
	{
		display : none;
	}

	.ods-sidebar__section:hover > .ods-sidebar__pages,
	.ods-sidebar__section:focus-within > .ods-sidebar__pages,
	.ods-sidebar__section.is-open > .ods-sidebar__pages
	{
		display : block;
	}

	.ods-sidebar__page
	{
		padding : var(--space-1) var(--space-4);
	}
}

/* ---- Below 768px: the sidebar stacks above the page, never over it ---- */
@media (max-width: 767px)
{
	.ods-admin
	{
		flex-direction : column;
	}

	.ods-admin .ods-sidebar
	{
		flex     : 0 0 auto;
		display  : block;
		width    : auto;
		height   : auto;
		position : static;
		overflow : visible;
	}

	.ods-sidebar__brand
	{
		height  : var(--space-8);
		padding : 0 var(--space-4);
	}

	.ods-sidebar__toggle
	{
		display : inline-flex;
	}

	.ods-sidebar__nav
	{
		display : none;
	}

	.ods-sidebar__switch:checked ~ .ods-sidebar__nav
	{
		display : block;
	}

	.ods-sidebar__link
	{
		padding : var(--space-2) var(--space-4);
	}

	.ods-admin .ods-sidebar .ods-sidebar__section.is-current > .ods-sidebar__link
	{
		padding-left : calc(var(--space-4) - 4px);
	}

	/* No hover flyout on a phone, so the open menu lists every section's sub-pages. */
	.ods-sidebar__pages
	{
		display : block;
	}

	.ods-sidebar__page
	{
		padding : var(--space-1) var(--space-4) var(--space-1) calc(var(--space-4) + 20px + var(--space-3));
	}

	.ods-topbar
	{
		height     : auto;
		flex-wrap  : wrap;
		gap        : var(--space-2);
		padding    : var(--space-3) var(--space-4);
	}
}

/* ------------------------------------------------------------------ */
/* Yes/no toggle switch. The native checkbox is kept and restyled, so  */
/* the posted value and the keyboard behaviour are unchanged.          */
/* ------------------------------------------------------------------ */
.ods-switch
{
	display     : flex;
	align-items : center;
	gap         : var(--space-3);
	font-size   : 14px;
	line-height : 20px;
	color       : var(--color-grey-dark);
	cursor      : pointer;
}

.ods-switch__input
{
	-webkit-appearance : none;
	-moz-appearance    : none;
	appearance         : none;
	position           : relative;
	flex               : 0 0 auto;
	width              : 40px;
	height             : 22px;
	margin             : 0;
	padding            : 0;
	border             : 1px solid var(--color-border);
	border-radius      : 11px;
	background         : var(--color-silver);
	cursor             : pointer;
	transition         : background-color 200ms ease-in-out, border-color 200ms ease-in-out;
}

.ods-switch__input::after
{
	content       : "";
	position      : absolute;
	top           : 2px;
	left          : 2px;
	width         : 16px;
	height        : 16px;
	border-radius : 50%;
	background    : var(--color-white);
	box-shadow    : var(--shadow-2);
	transition    : transform 200ms ease-in-out;
}

.ods-switch__input:checked
{
	background   : var(--color-shade-1);
	border-color : var(--color-shade-1);
}

.ods-switch__input:checked::after
{
	transform : translateX(18px);
}

.ods-switch__input:hover
{
	border-color : var(--color-grey-light);
}

.ods-switch__input:focus-visible,
.ods-switch__input.is-focus
{
	outline        : 2px solid var(--color-grey-dark);
	outline-offset : 2px;
}

.ods-switch__input:disabled
{
	cursor  : not-allowed;
	opacity : 0.4;
}

.ods-switch__label
{
	min-width : 0;
}

/* ------------------------------------------------------------------ */
/* Gateway secret: a masked field with its own show/hide button.       */
/* ------------------------------------------------------------------ */
.ods-secret
{
	display     : flex;
	align-items : center;
	gap         : var(--space-2);
}

.ods-secret .ods-secret__field
{
	flex      : 1 1 auto;
	min-width : 0;
}

.ods-secret__toggle
{
	flex        : 0 0 auto;
	white-space : nowrap;
}


/*----Application/CONTROLLER/STYLES/main-addins.style.css----*/
#addins-header
{
	font-family: Arial, Helvetica, sans-serif;
	font-size:   14px;
}

#addins-header td
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:   14px;
	color:       #000000
}

#addins-header .bigred
{
	font-family: Arial, Helvetica, sans-serif;
	font-size:   14px;
	font-weight: bold;
	color:       #CC0000
}

#addins-header .red
{
	color:           #CC0000;
	text-decoration: none
}

#addins-header .redbold
{
	font-weight: bold;
	color:       #CC0000;
	font-size:   12px
}

#addins-header a
{
	color:           #0033CC;
	text-decoration: underline
}

#addins-header a:hover
{
	text-decoration: underline
}

#addins-header .small
{
	font-size: 10px
}

#addins-header .white
{
	color: #FFFFFF
}

#addins-header h2
{
	font-family: Arial, Helvetica, sans-serif;
	font-size:   20px;
	font-weight: bold;
	font-style:  italic
}

#addins-header .active
{
	font-weight: bold;
	color:       #CC0000
}

#addins-header .title
{
	font-family: Arial, Helvetica, sans-serif;
	font-size:   24px;
	font-weight: bold;
	font-style:  italic;
}

#addins-header h1
{
	font-size:   18px;
	font-weight: bold;
	font-style:  italic;
}

#addins-header h4
{
	background:    #339933 repeat-x scroll left center;
	border:        1px solid #339933;
	color:         white;
	font-size:     14px;
	height:        17px;
	line-height:   14px;
	margin-bottom: 15px;
	padding:       3px 10px 1px;
}

#addins-header .Blue
{
	font-size:   14px;
	font-weight: bold;
	color:       #0000FF;
}

/*----Application/CONTROLLER/STYLES/main.style.css----*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
#loding-data
{
	position    : fixed;
	top         : 50%;
	left        : 50%;
	margin-left : -35px;
	margin-top  : -35px;
	width       : 70px;
	height      : 70px;
	display     : none;
}

a
{
	text-decoration : none;
}

input[type=button], input[type=submit]
{
	border                : 1px solid #aaaaaa;
	background            : #efefef;
	-moz-border-radius    : 4px;
	-webkit-border-radius : 4px;
	-khtml-border-radius  : 4px;
	border-radius         : 4px;
	font-size             : 12px;
	height                : 26px;
	text-shadow           : 0px 0px 1px #aaaaaa;
	font-weight           : bold;
	color                 : #666666;
	font-size             : 12px;
	cursor                : pointer;
	padding-bottom        : 2px;
}

input[type=button]:hover, input[type=submit]:hover
{
	background : #e1e1e1;
}

.green
{
	color : #249a1b !important;
}

.green-button
{
	background  : #31d821 !important;
	color       : white !important;
	text-shadow : 0px 0px 1px #aaaaaa;
}

.green-button:hover
{
	background : #2dbd20 !important;
}

input[type=button].mini, input[type=submit].mini
{
	font-size : 10px;
	padding   : 3px;
	cursor    : pointer;
}

#content
{
}

#content > .wrapper
{
}

.gray-box
{
	-moz-border-radius    : 5px;
	-webkit-border-radius : 5px;
	-khtml-border-radius  : 5px;
	border-radius         : 5px;
	border                : 1px solid #aaaaaa;
}

/* LIST LAYOUT [Case SC-1] */

.page-header
{
	min-height        : 40px;
	line-height   : 40px;
	margin-bottom : 5px;
	background    : #ededed;
	padding-left  : 10px;
	padding-right : 10px;
}

.page-header.mini
{
}

.back-link
{
	width        : 20px;
	height       : 34px;
	float        : left;
	margin-right : 5px;
	overflow     : hidden;
	padding-top  : 6px;
}

.back-link img
{
	width : 30px;
}

.page-header h2
{
	line-height : 40px;
	height      : 40px;
	font-size   : 22px;
	float       : left;
	text-indent : 3px;
}

.page-header.mini h2
{
	font-size : 18px;
}

.page-header .list-buttons
{
	float       : left;
	margin-left : 30px;
	line-height : 40px;
}

.page-text
{
	padding      : 5px;
	padding-left : 15px;
	line-height  : 25px
}

table.list
{

}

table.list thead
{

}

table.list thead th.ASC span, table.list tfoot td.ASC span
{
	margin-left : 18px;
}

table.list thead th.ASC a, table.list tfoot td.ASC a
{
	background : url(/orders/Application/CONTROLLER/IMAGES/asc.png) no-repeat left;
}

table.list thead th.DESC span, table.list tfoot td.DESC span
{
	margin-left : 18px;
}

table.list thead th.DESC a, table.list tfoot td.DESC a
{
	background : url(/orders/Application/CONTROLLER/IMAGES/desc.png) no-repeat left;

}

table.list thead th, table.list tfoot td, table.list tfoot td, table.form thead th
{
	/*background:    url(/orders/Application/CONTROLLER/IMAGES/header-bg.png) repeat-x;*/
	background    : #70a2d1;
	text-align    : left;
	border-bottom : 2px solid #aaaaaa;
	font-size     : 14px;
	color         : white;
}

table.list thead th a, table.list tfoot td a
{
	color : #f1f1f1;
}

table.list tfoot td
{
	border-top    : 2px solid #aaaaaa;
	border-bottom : 0px solid #aaaaaa;
}

table.list tfoot tr.pagination td
{
	border-top : 0px solid #aaaaaa;
}

table.list tbody
{

}

table.list tbody td, table.list thead th, table.list tfoot td, table.list tfoot tr.pagination, table.form thead th
{
	padding : 5px;
}

table.list tbody tr:nth-child(even)
{
	background : #ededed;
}

table.list tbody td
{
	border-bottom : 1px solid #f1f1f1;
}

table.list tr.pagination td
{
	height      : 30px;
	line-height : 30px;
	text-align  : center;
	background  : none !important;
}

table.list tr.pagination a
{
	color                 : #555555;
	padding               : 5px;
	padding-left          : 10px;
	padding-right         : 10px;
	background            : #eeeeee;
	-moz-border-radius    : 5px;
	-webkit-border-radius : 5px;
	-khtml-border-radius  : 5px;
	border-radius         : 5px;
	border                : 1px solid #aaaaaa;
}

table.list tr.pagination a.currentpage
{
	border : 2px solid green !important;
}

table.list tr.pagination img
{
	width          : 20px;
	height         : 30px;
	vertical-align : bottom;
	display        : inline;
}

.hidden
{
	display : none;
}

.disabled
{
	color : #888888;
}

.width30
{
	width : 30px;
}

.width50
{
	width : 50px;
}

.width75
{
	width : 75px;
}

.width100
{
	width : 100px;
}

.width150
{
	width : 150px;
}

.width200
{
	width : 200px;
}

.width250
{
	width : 250px;
}

.width300
{
	width : 300px;
}

.width350
{
	width : 350px;
}

.width400
{
	width : 400px;
}

.width450
{
	width : 450px;
}

.width550
{
	width : 550px;
}

/* FORMS */
.form
{
	width : 98%;
}

.form .field
{
	padding    : 5px;
	text-align : right;
	color      : #666666;
	font-size  : 14px;
}

.form .value
{
	padding : 5px;
	width   : 320px;
}

.error
{
	color     : red !important;
	font-size : 12px;
}

.error-text
{
	color : red;
}

.success
{
	color : green;
}

.error-line
{
	padding       : 5px;
	color         : white;
	background    : red;
	margin-top    : 5px;
	margin-bottom : 5px;
}

.form .value input[type=text],
.form .value input[type=password],
.form .value select,
.form .value textarea
{
	width : 300px;
}

.form .value select
{
	width  : 306px !important;
	height : 25px;
}

/* TEXTS */

small, .small
{
	font-size : 12px;
}

.bold
{
	font-weight : bold;
}

.top-text, .bottom-text
{
	margin-top : 10px;
	width      : 100%;
}

.top-text p,
.bottom-text p
{
	margin-bottom : 0.5em;
}

.bigred
{
	color: #CC0000;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 14px;
	font-weight: bold;
}

#addins-header span.white {font-family: Verdana, Arial, Helvetica, sans-serif !important}

/*----Application/CONTROLLER/STYLES/richtext.style.css----*/

/* ------------------------------------------------------------------ */
/* 1. The container                                                    */
/* ------------------------------------------------------------------ */

.rd-scope .rd-richtext.rd-richtext
{
	font-family:    var(--font-family) !important;
	font-size:      16px !important;   	line-height:    24px !important;   	font-weight:    400;
	color:          var(--color-grey);
	letter-spacing: var(--tracking-wide);
	text-align:     left;
	width:          auto !important;   /* answers .shoppingcart .cart-text */
	min-width:      0 !important;
	max-width:      none;
	margin:         0;
}

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */

.rd-scope .rd-richtext.rd-richtext h1
{
	font-family: var(--font-family) !important;
	font-size:   36px !important;   	line-height: 44px !important;
	font-weight: 600 !important;
	color:       var(--color-black);
	margin:      0 0 var(--space-4);
}

.rd-scope .rd-richtext.rd-richtext h2
{
	font-family: var(--font-family) !important;
	font-size:   28px !important;   	line-height: 36px !important;
	font-weight: 700 !important;
	color:       var(--color-black);
	margin:      0 0 var(--space-4);
}

.rd-scope .rd-richtext.rd-richtext h3,
.rd-scope .rd-richtext.rd-richtext h4,
.rd-scope .rd-richtext.rd-richtext h5,
.rd-scope .rd-richtext.rd-richtext h6
{
	font-family: var(--font-family) !important;
	font-size:   20px !important;   	line-height: 28px !important;
	font-weight: 600 !important;
	color:       var(--color-black);
	margin:      0 0 var(--space-3);
}

/* A heading that follows body copy needs air above it. */
.rd-scope .rd-richtext.rd-richtext p + h1,
.rd-scope .rd-richtext.rd-richtext p + h2,
.rd-scope .rd-richtext.rd-richtext p + h3,
.rd-scope .rd-richtext.rd-richtext ul + h3,
.rd-scope .rd-richtext.rd-richtext ol + h3
{
	margin-top: var(--space-5);
}

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */

.rd-scope .rd-richtext.rd-richtext p,
.rd-scope .rd-richtext.rd-richtext li,
.rd-scope .rd-richtext.rd-richtext div,
.rd-scope .rd-richtext.rd-richtext td,
.rd-scope .rd-richtext.rd-richtext th,
.rd-scope .rd-richtext.rd-richtext span,
.rd-scope .rd-richtext.rd-richtext blockquote
{
	font-family: var(--font-family) !important;
	font-size:   16px !important;   	line-height: 24px !important;
	color:       var(--color-grey);
}

.rd-scope .rd-richtext.rd-richtext p,
.rd-scope .rd-richtext.rd-richtext blockquote
{
	margin: 0 0 var(--space-4);
}

.rd-scope .rd-richtext.rd-richtext p:last-child
{
	margin-bottom: 0;
}

/* clearfix.style.css strips list markers site-wide (`ol, ul { list-style: none }`).
   Inside an admin-edited text the markers are part of the content. */
.rd-scope .rd-richtext.rd-richtext ul
{
	list-style:   disc outside;
	padding-left: var(--space-5);
	margin:       0 0 var(--space-4);
}

.rd-scope .rd-richtext.rd-richtext ol
{
	list-style:   decimal outside;
	padding-left: var(--space-5);
	margin:       0 0 var(--space-4);
}

.rd-scope .rd-richtext.rd-richtext li
{
	margin-bottom: var(--space-1);
}

.rd-scope .rd-richtext.rd-richtext strong,
.rd-scope .rd-richtext.rd-richtext b
{
	font-weight: 500 !important;
	color:       var(--color-black);
}

.rd-scope .rd-richtext.rd-richtext em,
.rd-scope .rd-richtext.rd-richtext i
{
	font-style: italic;
}

.rd-scope .rd-richtext.rd-richtext small
{
	font-size:   12px !important;   	line-height: 16px !important;
	color:       var(--color-grey-light);
}

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */

.rd-scope .rd-richtext.rd-richtext a,
.rd-scope .rd-richtext.rd-richtext a:visited
{
	color:           var(--color-shade-1) !important;   	font-weight:     500;
	text-decoration: underline;
}

.rd-scope .rd-richtext.rd-richtext a:hover
{
	opacity: 0.9;   }

.rd-scope .rd-richtext.rd-richtext a:active
{
	color: var(--color-shade-2) !important;   }

/* clearfix.style.css kills focus outlines site-wide (`:focus { outline: 0 }`).
   Keyboard focus has to stay visible inside admin-edited texts. */
.rd-scope .rd-richtext.rd-richtext a:focus-visible
{
	outline:        2px solid var(--color-grey-dark) !important;  	outline-offset: 2px;
	border-radius:  var(--radius-button);
}

/* ------------------------------------------------------------------ */
/* 5. Legacy font elements and inline font sizes / families            */
/* ------------------------------------------------------------------ */

.rd-scope .rd-richtext.rd-richtext font,
.rd-scope .rd-richtext.rd-richtext font[size],
.rd-scope .rd-richtext.rd-richtext font[face],
.rd-scope .rd-richtext.rd-richtext [style*="font-size"]:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.rd-scope .rd-richtext.rd-richtext [style*="font-family"]:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.rd-scope .rd-richtext.rd-richtext [style*="font:"]:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)
{
	font-family: var(--font-family) !important;
	font-size:   inherit !important;
	line-height: inherit !important;
}

/* A <font> inside a heading follows the heading, not the body. */
.rd-scope .rd-richtext.rd-richtext h1 font,
.rd-scope .rd-richtext.rd-richtext h2 font,
.rd-scope .rd-richtext.rd-richtext h3 font,
.rd-scope .rd-richtext.rd-richtext h4 font
{
	font-family: var(--font-family) !important;
	font-size:   inherit !important;
	line-height: inherit !important;
	color:       inherit;
}

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */

/* red -> Error */
.rd-scope .rd-richtext.rd-richtext [style*="color: red" i],
.rd-scope .rd-richtext.rd-richtext [style*="color:red" i],
.rd-scope .rd-richtext.rd-richtext [style*="color: #f00" i],
.rd-scope .rd-richtext.rd-richtext [style*="color:#f00" i],
.rd-scope .rd-richtext.rd-richtext [style*="color: #ff0000" i],
.rd-scope .rd-richtext.rd-richtext [style*="color:#ff0000" i],
.rd-scope .rd-richtext.rd-richtext [style*="color: #cc0000" i],
.rd-scope .rd-richtext.rd-richtext [style*="color:#cc0000" i],
.rd-scope .rd-richtext.rd-richtext font[color="red" i],
.rd-scope .rd-richtext.rd-richtext font[color="#FF0000" i],
.rd-scope .rd-richtext.rd-richtext font[color="#CC0000" i],
.rd-scope .rd-richtext.rd-richtext .red,
.rd-scope .rd-richtext.rd-richtext .bigred,
.rd-scope .rd-richtext.rd-richtext .redbold
{
	color: var(--color-error) !important;   }

/* blue -> Info */
.rd-scope .rd-richtext.rd-richtext [style*="color: blue" i],
.rd-scope .rd-richtext.rd-richtext [style*="color:blue" i],
.rd-scope .rd-richtext.rd-richtext [style*="color: #0000ff" i],
.rd-scope .rd-richtext.rd-richtext [style*="color:#0000ff" i],
.rd-scope .rd-richtext.rd-richtext [style*="color: #0033cc" i],
.rd-scope .rd-richtext.rd-richtext [style*="color:#0033cc" i],
.rd-scope .rd-richtext.rd-richtext font[color="blue" i],
.rd-scope .rd-richtext.rd-richtext font[color="#0000FF" i],
.rd-scope .rd-richtext.rd-richtext .Blue
{
	color: var(--color-info) !important;   }

/* green -> Success */
.rd-scope .rd-richtext.rd-richtext [style*="color: green" i],
.rd-scope .rd-richtext.rd-richtext [style*="color:green" i],
.rd-scope .rd-richtext.rd-richtext [style*="color: #008000" i],
.rd-scope .rd-richtext.rd-richtext [style*="color:#008000" i],
.rd-scope .rd-richtext.rd-richtext [style*="color: #339933" i],
.rd-scope .rd-richtext.rd-richtext [style*="color:#339933" i],
.rd-scope .rd-richtext.rd-richtext font[color="green" i]
{
	color: var(--color-success) !important;   }

/* the assorted legacy greys and blacks -> Grey body copy */
.rd-scope .rd-richtext.rd-richtext [style*="color: #444" i],
.rd-scope .rd-richtext.rd-richtext [style*="color:#444" i],
.rd-scope .rd-richtext.rd-richtext [style*="color: #555" i],
.rd-scope .rd-richtext.rd-richtext [style*="color:#555" i],
.rd-scope .rd-richtext.rd-richtext [style*="color: #666" i],
.rd-scope .rd-richtext.rd-richtext [style*="color:#666" i],
.rd-scope .rd-richtext.rd-richtext [style*="color: #777" i],
.rd-scope .rd-richtext.rd-richtext [style*="color:#777" i],
.rd-scope .rd-richtext.rd-richtext [style*="color: gray" i],
.rd-scope .rd-richtext.rd-richtext [style*="color:gray" i],
.rd-scope .rd-richtext.rd-richtext [style*="color: black" i],
.rd-scope .rd-richtext.rd-richtext [style*="color:black" i],
.rd-scope .rd-richtext.rd-richtext font[color="black" i],
.rd-scope .rd-richtext.rd-richtext font[color="gray" i]
{
	color: var(--color-grey) !important;   }

/* ------------------------------------------------------------------ */
/* 7. Legacy background colours inside stored text                     */
/* ------------------------------------------------------------------ */

.rd-scope .rd-richtext.rd-richtext [style*="background" i],
.rd-scope .rd-richtext.rd-richtext font[bgcolor]
{
	background-image: none !important;
}

/* ------------------------------------------------------------------ */
/* 8. Empty spacer blocks tagged at render time                        */
/* ------------------------------------------------------------------ */

/* One empty paragraph or heading takes one Body 2 line; a run of them takes one line in total. */
.rd-scope .rd-richtext.rd-richtext .rd-richtext__spacer
{
	height:  24px;
	margin:  0;
	padding: 0;
}

.rd-scope .rd-richtext.rd-richtext .rd-richtext__spacer + .rd-richtext__spacer
{
	display: none;
}


/*----Application/CONTROLLER/STYLES/tokens.style.css----*/

:root
{
	/* ---- Brand ---- */
	--color-primary:        #28CB8B; /* Brand/Primary - hero accents, highlights */
	--color-secondary:      #263238; /* Brand/Secondary (= Neutral/Black) */
	--color-info:           #2194F3; /* Brand/Info */

	/* ---- Neutral ---- */
	--color-black:          #263238; /* headings, strong text */
	--color-grey-dark:      #4D4D4D; /* D_Grey - focus rings, secondary headings */
	--color-grey:           #717171; /* Grey - body copy */
	--color-grey-light:     #89939E; /* L_Grey - muted/caption text */
	--color-grey-blue:      #ABBED1; /* borders, dividers, shadow tint */
	--color-silver:         #F5F7FA; /* Silver - hero / section panel backgrounds */
	--color-white:          #FFFFFF;
	--color-border:         #ABBED1; /* default stroke (Neutral/White-stroke) */

	/* ---- Green shades (darker) ---- */
	--color-shade-1:        #42A046; /* button default fill - NOT the primary green */
	--color-shade-2:        #388E38; /* button active / click */
	--color-shade-3:        #237D31;
	--color-shade-4:        #1B5E1F;
	--color-shade-5:        #103E13;

	/* ---- Green tints (lighter) ---- */
	--color-tint-1:         #66BB69;
	--color-tint-2:         #81C784;
	--color-tint-3:         #A5D6A7;
	--color-tint-4:         #C8E6C9;
	--color-tint-5:         #E8F5E9; /* icon-badge backgrounds, soft fills */

	/* ---- Action / status ---- */
	--color-warning:        #FBC02D;
	--color-error:          #E53835;
	--color-success:        #2E7D31;

	/* ---- Typography ---- */
	--font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* ---- Radius ---- */
	--radius-button:        4px;
	--radius-card:          8px;

	/* ---- Shadows (tint = Grey_Blue #ABBED1) ---- */
	--shadow-2:   0px 2px 4px 0px rgba(171,190,209,0.6);
	--shadow-4:   0px 4px 8px 0px rgba(171,190,209,0.4);
	--shadow-6:   0px 6px 12px 0px rgba(171,190,209,0.3);
	--shadow-8:   0px 8px 16px 0px rgba(171,190,209,0.4);
	--shadow-16:  0px 16px 32px 0px rgba(171,190,209,0.3);

	/* ---- Spacing scale (8px base) ---- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 40px;
	--space-8: 48px;
	--space-9: 64px;
	--space-10: 80px;

	/* ---- Layout ---- */
	--container-max:        1080px;
	--section-padding-y:    80px;
	--container-gutter:     24px;

		--tracking-wide:        0.025em;
}

.text-heading-1 { font-size: 64px; line-height: 76px; }
.text-heading-2 { font-size: 36px; line-height: 44px; }
.text-heading-3 { font-size: 28px; line-height: 36px; }
.text-heading-4 { font-size: 20px; line-height: 28px; }

.text-body-1 { font-size: 18px; line-height: 28px; }
.text-body-2 { font-size: 16px; line-height: 24px; }
.text-body-3 { font-size: 14px; line-height: 20px; }
.text-body-4 { font-size: 12px; line-height: 16px; }