:root {
	/*Company Colors*/
	--theme-highlight: #FFD100;
	--theme-highlight-opaque: #FFD10040;

	/*Theme Specific*/
	--theme-pure: var(--theme-pure-dark);
	--theme-opposite: var(--theme-opposite-dark);
	--theme-basic: var(--theme-basic-dark);
	--theme-basic-50: var(--theme-basic-50-dark);
	--theme-highlight-read: var(--theme-highlight-read-dark);
	--theme-font-shadow: var(--theme-font-shadow-dark);
	--accent-color: var(--accent-color-dark);
	--accent-color-varient: var(--accent-color-varient-dark);
	--font-color: var(--font-color-dark);
	--placeholder-font-color: var(--placeholder-font-color-dark);
	--caster-background: var(--caster-background-dark);


	/*Dark Theme - DEFAULT*/
	--theme-pure-dark: #000000;
	--theme-opposite-dark: #FFFFFF;
	--theme-basic-dark: #202126;
	--theme-basic-50-dark: #20212680;
	--theme-highlight-read-dark: var(--theme-highlight);
	--theme-font-shadow-dark: none;
	--accent-color-dark: #2D2E37;
	--accent-color-varient-dark: #C7C8CA;
	--font-color-dark: #ABABAB;
	--placeholder-font-color-dark: #757575;
	--caster-background-dark: url(/media/CDpattern_Black50.webp);

	/*Light Theme*/
	--theme-pure-light: #FFFFFF;
	--theme-opposite-light: #000000;
	--theme-basic-light: #F5F5F5;
	--theme-basic-50-light: #F5F5F580;
	--theme-highlight-read-light: #BCA424;
	--theme-font-shadow-light: 0 .25rem 0 var(--theme-highlight);
	--accent-color-light: #E5E5E5;
	--accent-color-varient-light: #63656B;
	--font-color-light: #666666;
	--placeholder-font-color-light: #6D6D6D;
	--caster-background-light: url(/media/CDpattern_Black10.webp);

	--theme-font: #333333;

	/*Errors & Warnings*/
	--error-color: #FF3838;
	--success-color: #3AE374;
	--warning-color: #FFAF40;

	/*Global layout*/
	--page-padding: calc(var(--layout-width) * .15);
	--page-content-width: calc(var(--layout-width)-(var(--page-padding) * 2));
	--default-font-size: 16rem;
	--border-width: 2rem;
	--border-radius: 4rem;
	--button-border-radius: 2rem 6rem 2rem 6rem;
	--input-height: 36rem;
	--transition-speed: .3s;	

	/*Icons*/
	--square-icon-xs: 18rem;
	--square-icon-small: 24rem;
	--square-icon: 50rem;

	/*z-Index*/
	--zIndex-behind: -1;
	--zIndex-necessary: 0; /*used when needed to give a z-index to an element to bring another element above it*/
	--zIndex-above: 1;
	--zIndex-aboveAll: 99;	

	/*fonts*/
	--font-family: "NunitoSans_Regular", san-serif;
	--font-family-bold: "NunitoSans_ExtraBold", san-serif;
	--logo-font-family: "Inter-Regular", san-serif;
}

/*As of 01/09/2024 does not work on Chrome Ubunto or Chrome Win 11*/
/*Duplicate in framework.js strUI_Color_Theme setter function for full support*/
/*@media (prefers-color-scheme: dark){
	:root {
		--theme-pure: var(--theme-pure-dark);
		--theme-opposite: var(--theme-opposite-dark);
		--theme-basic: var(--theme-basic-dark);
		--theme-font-shadow: var(--theme-font-shadow-dark);
		--accent-color: var(--accent-color-dark);
		--accent-color-varient: var(--accent-color-varient-dark);
		--font-color: var(--font-color-dark);
		--placeholder-font-color: var(--placeholder-font-color-dark);
	}
}

@media (prefers-color-scheme: light){
	:root {
		--theme-pure: var(--theme-pure-light);
		--theme-opposite: var(--theme-opposite-light);
		--theme-basic: var(--theme-basic-light);
		--theme-font-shadow: var(--theme-font-shadow-light);
		--accent-color: var(--accent-color-light);
		--accent-color-varient: var(--accent-color-varient-light);
		--font-color: var(--font-color-light);
		--placeholder-font-color: var(--placeholder-font-color-light);
	}
}*/

@font-face {
	font-family: "NunitoSans_ExtraBold";
	src: url("/fonts/NunitoSans_ExtraBold.ttf");
}

@font-face {
	font-family: "NunitoSans_Regular";
	src: url("/fonts/NunitoSans_Regular.ttf");
}

@font-face {
	font-family: "Inter-Regular";
	src: url("/fonts/Inter-Regular.ttf");
}

body {
	background: var(--theme-basic);
	margin: 0;
}

.pagePadding {
	padding-left: var(--page-padding);
	padding-right: var(--page-padding);
}

.divMainContainer {
	color: var(--font-color);
	font-family: var(--font-family);
	font-size: var(--default-font-size);
	min-height: var(--layout-height);
	min-width: var(--layout-width);
}

.title_Bold {
	font-family: var(--font-family-bold);
	font-size: 18rem;	
	margin: 40rem 0 0;
	text-transform: uppercase;
}

.title_Bold_Caps {
	font-family: var(--font-family-bold);
	font-size: 22rem;
	margin-top: 40rem;
	text-transform: capitalize;	
}

.divText {
	font-size: 18rem;
	line-height: 38rem;
	margin-bottom: 40rem;
}

main {
	position: relative;
}

.highlight {
	color: var(--theme-highlight-read);
}

.flex {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

.flex.flexRow {
	flex-direction: row;
	flex-wrap: nowrap;
}

.flex.flexColumn {
	flex-direction: column;
}

.flex.flexNoWrap {
	flex-wrap: nowrap;
}

.flex.flexSpace {
	justify-content: space-between;
}

.flex.flexCenter {
	justify-content: center;
}

.flex.flexJustifyEnd {
	justify-content: flex-end;
}

.flex.flexStart {
	align-items: flex-start;
}

.flex.flexEnd {
	align-items: flex-end;
}

.flexMargin {
	margin-bottom: 20rem;
}

.borderBottom {
	border-bottom: var(--border-width) solid var(--theme-highlight);
}

.invalid {
	color: var(--error-color);
}

.valid {
	color: var(--success-color);
}

button {
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--default-font-family);
	font-size: var(--default-font-size);
	vertical-align: middle;
}

.bttnStyle1 {
	background: var(--theme-highlight);
	border: var(--border-width) solid var(--theme-highlight);
	border-radius: var(--button-border-radius);
	box-sizing: border-box;
	color: var(--theme-font);
	font-size: var(--default-font-size);
	font-weight: bold;
	margin-top: 20rem;
	padding: 10rem;
	text-align: center;
	text-decoration: none;
	transition: var(--transition-speed) ease background;
}

.bttnHover_Container:hover .bttnStyle1,
.bttnStyle1:hover {
	background: var(--theme-highlight-opaque);
	border: var(--border-width) solid var(--theme-highlight);
	color: var(--theme-opposite);
}

.bttnHover_Container:hover .bttnStyle2,
.bttnStyle2 {
	background: transparent;
	border: var(--border-width) solid var(--theme-highlight);
	border-radius: var(--button-border-radius);
	color: var(--theme-highlight-read);
	padding: 8rem;
	transition: var(--transition-speed) ease border;
}

.bttnStyle2:hover {
	border-color: var(--theme-opposite);
	color: var(--theme-opposite);
}

.bttnStyle1:disabled,
.bttnStyle2:disabled {
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--accent-color-varient);
	cursor: auto;
	opacity: .5;
}

.bttnText,
.aText {
	color: var(--font-color);
	transition: var(--transition-speed) ease color;
	margin-right: 10rem;
}

.aTextGap,
.aTextGap:last-child {
	display: block;
	margin-bottom: 20rem;
}

.bttnText:last-child,
.aText:last-child {
	margin-bottom: 0rem;
	margin-right: 0;
}

.bttnText:hover,
.aText:hover {
	color: var(--theme-opposite);
}

.divBold {
	font-weight: bold;
}

#chat-widget-container iframe {
	display: block !important;
}

iframe#chat-widget-minimized,
iframe {
	display: none !important;
	border: none;
}

.svgIcon,
.aIcon svg,
.bttnIcon svg {
	cursor: pointer;
	height: var(--square-icon);
	width: var(--square-icon);
}

.svgIconSM {
	height: var(--square-icon-small);
	min-width: var(--square-icon-small);	
}

.svgIconXS {
	height: var(--square-icon-xs);
	min-width: var(--square-icon-xs);	
}

.svgRotate {
	transform: rotate(180deg);
}

::part(displayNone),
.displayMobile,
.displayTabletAndMobile,
.displayTablet,
.displayNone {
	display: none !important;
}

.bttnChat_Minimized,
.bttnChat_Bubble,
.bttnThemeSwitch,
.bttnArrowToTop {	
	right: 32rem;
}

.bttnThemeSwitch.aText {
	text-decoration: underline;
	bottom:27%;
}

.bttnThemeSwitch.aText + .bttnThemeSwitch.aText {
	bottom:24%;
}

.bttnThemeSwitch {
	bottom: 17%;
}

.bttnArrowToTop {
	bottom: 11%;
}

.bttnChat_Minimized,
.bttnChat_Bubble {
	bottom: 5.5%;
}

.bttnChat_Minimized .svgChat {
	background: transparent;
	border: none;
	fill: var(--theme-highlight);
	height: auto;
	opacity: 1;
	padding-top: 0;
	position: absolute;
	right: 0;
	width: var(--square-icon);
}

.divChat_Icon {
	color: var(--theme-font);
	font-family: var(--font-family-bold);
	font-size: 12rem;
	line-height: 14rem;
	margin-top: 8rem;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}

.bttnChat_Status {
	background: var(--success-color);
	border: calc(var(--border-width) * 2) solid var(--theme-basic);
	border-radius: 100%;
	height: 10rem;
	left: -10rem;
	opacity: 1;
	position: absolute;
	top: -10rem;
	width: 10rem;
}

.bttnChat_Status {
	animation: blink 2s ease infinite; 
}

@keyframes blink {
	0%, 100% { opacity: 0; }
	50% { opacity: 1; }
}

.bttnChat_Bubble {
	background: var(--theme-highlight);
	border: var(--border-width) solid var(--theme-highlight);
	border-radius: 10rem;
	box-sizing: border-box;
	cursor: pointer;
	display: grid;
	grid-template-columns: var(--square-icon) 0rem;
	height: var(--square-icon);
	min-width: var(--square-icon);
	position: fixed;
}

.divChat_Icon {
	align-self: center;
	flex-shrink: 0;
	height: var(--square-icon);
	overflow: hidden;
	width: var(--square-icon);
}

.divChat_Message_Container {
	align-items: center;
	display: flex;
	height: var(--square-icon);
	overflow: hidden;
	padding: 0 1rem;
	position: relative;
	white-space: nowrap;
	width: 100%;
}

.divChat_Message1,
.divChat_Message2 {
	color: var(--theme-font);
	font-family: var(--font-family-bold);
	opacity: 0;
	position: absolute;
	text-transform: uppercase;
	transform: translateY(0.5rem);
	white-space: nowrap;
	width: 100%;
}

.bttnChat_Minimized.is-animating .bttnChat_Bubble {
	animation: stretch 10s ease-in-out infinite;
}

.bttnChat_Minimized.is-animating .divChat_Icon {
	animation: icon_disappear 10s ease-in-out infinite;
}

.bttnChat_Minimized.is-animating .divChat_Message1 {
	animation: slide_Chat_Message1 10s ease-in-out infinite;
}

.bttnChat_Minimized.is-animating .divChat_Message2 {
	animation: slide_Chat_Message2 10s ease-in-out infinite;
}

@keyframes icon_disappear {
	0%   { opacity: 1; width: var(--square-icon); }
	10%  { opacity: 0; width: 0rem; }
	80%  { opacity: 0; width: 0rem; }
	90%  { opacity: 1; width: var(--square-icon); }
	100% { opacity: 1; width: var(--square-icon); }
}

@keyframes slide_Chat_Message1 {
	0%   { opacity: 0; transform: translateY(0.5rem); }
	12%  { opacity: 1; transform: translateY(0); }
	38%  { opacity: 1; transform: translateY(0); }
	48%  { opacity: 0; transform: translateY(-0.5rem); }
	100% { opacity: 0; transform: translateY(0.5rem); }
}

@keyframes slide_Chat_Message2 {
	0%   { opacity: 0; transform: translateY(0.5rem); }
	50%  { opacity: 0; transform: translateY(0.5rem); }
	62%  { opacity: 1; transform: translateY(0); }
	78%  { opacity: 1; transform: translateY(0); }
	88%  { opacity: 0; transform: translateY(-0.5rem); }
	100% { opacity: 0; transform: translateY(0.5rem); }
}

@keyframes stretch {
	0%   { grid-template-columns: var(--square-icon) 0rem; }
	10%  { grid-template-columns: 0rem 250rem; }
	80%  { grid-template-columns: 0rem 250rem; }
	90%  { grid-template-columns: var(--square-icon) 0rem; }
	100% { grid-template-columns: var(--square-icon) 0rem; }
}

.imgAgent {
	bottom: 0;
	height: 150rem;
	position: absolute;
	right: -15%;
}

.imgAgent2 {
	display: none;
}

.chatCaster_SVG {
	display: block;
	margin: 0 auto;
}

.bttnChat_Minimized,
.bttnThemeSwitch, 
.bttnArrowToTop {
	margin: 0;
	position: fixed;
	z-index: var(--zIndex-above);
}

.bttnChat_Minimized svg:hover,
.bttnThemeSwitch svg:hover, 
.bttnArrowToTop svg:hover {
	opacity: .66;
}

.bttnChat_Minimized svg,
.bttnThemeSwitch svg,
.bttnArrowToTop svg {
	background: var(--theme-basic);
	border: var(--border-width) solid var(--accent-color-varient);
	border-radius: 6rem;
	box-sizing: border-box;
	cursor: pointer;
	fill: var(--accent-color-varient);
	height: var(--square-icon);
	opacity: .33;
	padding: 8rem;
	transition: var(--transition-speed) ease opacity;
	width: var(--square-icon);
}

.bttnChat_Minimized.is-new-message .divChat_Message1 {
	opacity: 1;
	transform: translateY(0);	
}

.bttnChat_Minimized.is-new-message .bttnChat_Bubble {
	background: var(--theme-basic);
	grid-template-columns: 0rem 325rem;
}

.bttnChat_Minimized.is-new-message .divChat_Icon {
	opacity: 0;
	width: 0rem;
}

.bttnChat_Minimized.is-new-message .divChat_Icon,
.bttnChat_Minimized.is-new-message .divChat_Message1,
.bttnChat_Minimized.is-new-message .divChat_Message2 {
	color: var(--theme-highlight-read);
}

.bttnChat_Minimized.is-offline svg {
	border: none;
}

.bttnChat_Minimized.is-offline .divChat_Icon {
	margin-top: 0;
}

.bttnChat_Minimized.is-offline .bttnChat_Bubble{
	background: none;
	border: none;
	height: auto; 
	min-width: 0; 
	position: static;
}

.bttnChat_Minimized.is-offline .divChat_Message1,
.bttnChat_Minimized.is-offline .divChat_Message2 {
	color: transparent;
}

.bttnChat_Minimized.is-offline .svgChat{
	fill: transparent;
}

/*Text Input*/
::part(ti_divInput) {
	border-radius: var(--border-radius);
	box-sizing: border-box;
	display: flex;
	height: var(--input-height);
}

::part(ti_input):-webkit-autofill, 
::part(ti_input):-webkit-autofill:hover {
	-webkit-box-shadow: 0 0 0 60px var(--accent-color) inset !important; /* background color */
	-webkit-text-fill-color: var(--font-color) !important; /* optional: set text color */
	transition: background-color 5000s ease-in-out 0s; /* optional: prevent transition flash */
}

::part(ti_input) {
	background: var(--accent-color);
	border: none;
	box-shadow: 0 1rem 1rem rgba(0, 0, 0, .15) inset;
	box-sizing: border-box;
	color: var(--font-color);
	font-family: var(--font-family);
	font-size: var(--default-font-size);
	height: var(--input-height);
	padding: 4rem 10rem;
	width: 100%;
}

::part(ti_input):focus {
	outline: none;
}

text-input:focus::part(ti_divInput) {
	outline-offset: calc(var(--border-width) * -0.5);
	outline: var(--border-width) solid var(--theme-highlight);
}

::part(ti_divInput_Input) {
	flex: 1;
}

::part(ti_divInput_Left),
::part(ti_divInput_Right) {
	flex: 0;
}

::part(ti_inputDisabled) {
	border: none;
	opacity: .5;
	pointer-events: none;
}

::part(ti_divContainer) {
	color: var(--font-color);
	margin: 10rem 10rem 0 0;
	position: relative;
}

product-search-filter,
::part(ti_divContainer) {
	width: 250rem;
}

::part(ti_divLabel) {
	color: var(--font-color);
	font-size: var(--default-font-size);
	margin-bottom: 6rem;
	text-transform: capitalize;
	width: 100%;
}

::part(ti_spanRequired) {
	color: var(--theme-highlight);
}

.bttnText_Input_Add_On {
	background: var(--theme-highlight);
	border-radius: 0;
	height: var(--input-height);
	padding: 6rem;
	width: var(--input-height);
}

.bttnText_Input_Add_On svg {
	fill: var(--theme-basic);
}

.divOffcanvasPosition {
	overflow:hidden;
	position: sticky;
	top: 0;
	z-index: var(--zIndex-aboveAll);
}

/*Notifications*/
div.divNotifications_Container {
	height: 100%;
	left: 0;
	overflow-y: hidden;
	pointer-events: none;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1;
}

div.divNotification_Container {
	background: white;
	border-collapse: collapse;
	box-shadow: 0rem 5rem 8rem 0rem rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0rem 5rem 8rem 0rem rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0rem 5rem 8rem 0rem rgba(0, 0, 0, 0.1);
	flex-wrap: wrap;
	font-family: var(--font-family);
	font-size: var(--default-font-size);
	justify-content: space-around;
	margin: 20rem auto;
	pointer-events: auto;
	position: relative;
	text-align: center;
	transition: opacity 1s, height 1s;
	-webkit-transition: opacity 1s, height 1s;
	width: 500rem;
}

div.divNotification_Container_Success,
div.divNotification_Container_Info,
div.divNotification_Container_Warning,
div.divNotification_Container_Error  {
	background: var(--accent-color);
	border-radius: var(--border-radius);
	box-sizing: border-box;
	padding: 20rem;
}

div.divNotification_Container_Success {
	border: var(--border-width) solid var(--success-color);
}

div.divNotification_Container_Info {
	border: var(--border-width) solid var(--theme-highlight);
}

div.divNotification_Container_Warning {
	border: var(--border-width) solid var(--warning-color);
}

div.divNotification_Container_Error {
	border: var(--border-width) solid var(--error-color);
}

div.divNotification_Container_Success div.divNotification_Title{
	color: var(--success-color);
}

div.divNotification_Container_Info div.divNotification_Title{
	color: var(--theme-highlight);
}

div.divNotification_Container_Warning div.divNotification_Title{
	color: var(--warning-color);
}

div.divNotification_Container_Error div.divNotification_Title{
	color: var(--error-color);
}

div.divNotification_Title {
	font-size: 24rem;
	text-transform: uppercase;
	width: 100%;
}

div.divNotification_Message {
	color: var(--font-color);
	font-size: 20rem;
}

button.bttnNotification_Close {
	padding: 10rem;
	position: absolute;
	right: 0;
	top:0;
}

button.bttnNotification_Undo {
	padding: 10rem;
	position: absolute;
	left: 0;
	top:0;
}

button.bttnNotification_Undo svg,
button.bttnNotification_Close svg {
	height: var(--square-icon-small);
	opacity: .5;
	fill: var(--accent-color-varient);
	width: var(--square-icon-small);
}

button.bttnNotification_Undo:hover svg,
button.bttnNotification_Close:hover svg {
	opacity: 1;
}

/*Dislogs for Confirmation / Re Login*/
dialog.diaContainer {
	background:none;
	border: none;
	font-family: var(--font-family);
}

dialog.diaContainer:focus{
	outline: none
}

dialog.diaContainer::backdrop {
	background: var(--theme-basic);
	opacity: .75;
}

div.divConfirmation_Container { /* NOTE: flex on the dialog itself as that breaks the intrinsic functionality. */
	background: var(--accent-color);
	border: var(--border-width) solid var(--theme-highlight);
	border-radius: var(--border-radius);
	box-sizing: border-box;
	font-size: 20rem;
	justify-content: space-evenly;
	outline: none;
	padding: 30rem;
	text-align: center;
	width: 500rem;
}

div.divForms ::part(ti_divLabel),
div.divConfirmation_Container ::part(ti_divLabel) {
	color: var(--font-color);
	font-size: var(--default-font-size);
	margin: 16rem auto 8rem;
	text-align: center;
}

div.divConfirmation_Container ::part(ti_input) {
	background: var(--theme-basic);
}

div.divConfirmation_Container ::part(ti_divContainer) {
	margin: 40rem auto;
}

.divLoading,
div.divConfirmation_Container.divConfirmation_LoadingAnimation {
	background-color: var(--accent-color);
	background-image: url(/media/svgs/loading.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50%;
	color: transparent;
	pointer-events: none;
}

.divLoading {
	display: flex;
	height: 30rem;
	background-color: transparent;	
}

h3.divConfirmation_Message,
div.divConfirmation_Message {
	color: var(--font-color);
	font-family: var(--font-family);
	font-size: 20rem;
	margin: 20rem auto;
	text-align: center;
	width: 100%;
}

button.bttnConfirmation_Yes {
	margin-right: 20rem;
}

button.bttnConfirmation_Yes,
button.bttnConfirmation_No {
	background: var(--theme-highlight);
	border: var(--border-width) solid var(--theme-highlight); /* for hover effect */
	border-radius: var(--button-border-radius);
	box-sizing: border-box;
	color: var(--theme-font);
	display: inline-block;
	font-size: 20rem;
	min-width: 150rem;
	padding: 8rem;
	transition: var(--transition-speed) ease all;
}

button.bttnConfirmation_Yes:hover,
button.bttnConfirmation_No:hover {
	color: var(--theme-opposite);
	background: var(--theme-highlight-opaque);
}

button.bttnRe_Login_Submit {
	width: 200rem;
}

::part(cb_divSelected_Scrollbar_Container),
::part(cb_divScrollbar_Container),
 .divScrollbarContainer {
	bottom: 0;
	box-sizing: border-box;
	position: absolute;
	right: 0rem;
	top: 0;
	transition: var(--transition-speed) ease opacity;
	width: 5rem;
	z-index: calc(var(--zIndex-above) + 1);
}

::part(cb_divSelected_Scrollbar),
::part(cb_divScrollbar),
 .divScrollbar {
	background: var(--theme-highlight-opaque);;
	border-radius: var(--border-radius);
	box-sizing: border-box;
	margin: 0 auto;
	min-height: 10rem;
	position: absolute;
	left: -2.5rem;
	width: 4rem;
}

/*Framework Controls*/
::part(ta_input) {
	background: var(--accent-color);
	border: none;
	box-shadow: 0 1rem 1rem rgba(0, 0, 0, .15) inset;
	box-sizing: border-box;
	color: var(--font-color);
	font-family: var(--font-family);
	font-size: var(--default-font-size);
	height: var(--input-height);
	padding: 4rem 10rem;
	width: 100%;
}

::part(ta_input):focus,
::part(psf_input):focus {
	outline: none;
}

::part(divAttribute_Icon_Container) {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	width: 100%;
}

::part(bttnAttribute_Icon),
::part(bttnAttribute_Icon_Selected) {
	align-items: center;
	background: none;
	border: none;
	display: flex;
	flex-direction: column;
	max-width: 100rem;
	padding: 0;
}

::part(svgAttribute_Icon) {
	background: var(--accent-color);
	border: var(--border-width) solid var(--accent-color);
	border-color: inherit;
	border-radius: var(--button-border-radius);
	box-sizing: border-box;
	cursor: pointer;
	fill: inherit;
	margin: 15rem;
	margin-bottom: 0;
	padding: 10rem;
	transition: var(--transition-speed) ease border;
	width: 70rem;
}

::part(svgAttribute_Icon svgAttribute_Icon_Thirds) {
	margin: 20rem 10rem 0 10rem;
	padding: 4rem;
	width: 60rem;
}

::part(svgAttribute_Icon_Fit_Height) {
	height: 70rem;
	width: 100%;
}

::part(svgAttribute_Icon_Fit_Width) {
	flex: 0 1 60rem;
}

::part(svgAttribute_Icon_Image) {
	width: 70%;
	height: auto;
}

::part(divAttribute_Icon_Name) {
	box-sizing: border-box;
	color: inherit;
	flex: 0 0 20%;
	font-size: 12rem;
	margin-bottom: 10rem;
	padding-top: 10rem;
}

::part(bttnAttribute_Icon):hover,
::part(bttnAttribute_Icon_Selected):hover {
	border-color: var(--theme-highlight-opaque);
}

::part(bttnAttribute_Icon) {
	border-color: var(--font-color);
	color: var(--font-color);
	fill: var(--font-color);
}

::part(bttnAttribute_Icon_Selected) {
	border-color: var(--theme-highlight);
	color: var(--theme-highlight-read);
	fill: var(--theme-highlight);
}

::part(svgReferance_Icon) {
	fill: var(--font-color);
	margin: 10rem;
	min-width: 60rem;
}

::part(divAttribute_Icon_Container),
::part(divAttribute_Referance_Image) {
	border: 4rem solid var(--accent-color);
	border-bottom-left-radius: 4rem;
	border-bottom-right-radius: 4rem;
	box-sizing: border-box;
	margin-top: -4rem;
}

::part(divAttribute_Referance_Image),
::part(divAttribute_Referance_Image_Multiple){
	align-items: flex-end;
	display: flex;
	justify-content: space-around;
	width: 100%;
}

::part(psf_divLevel_Container) {
	border-bottom: var(--border-width) solid var(--theme-highlight-opaque);
	padding: 10rem 0;
}

product-search-filter:focus::part(psf_divInput),
text-area:focus::part(ta_input) {
	outline-offset: calc(var(--border-width) * -0.5);
	outline: var(--border-width) solid var(--theme-highlight);
}

::part(ta_divInput){
	border-radius: var(--border-radius);
	box-sizing: border-box;
	display: flex;
}

::part(ta_input) {
	min-height: 150rem;
}

/*Radio Button*/
::part(rb_divInput){
	display: flex;
	min-height: var(--input-height);
}

radio-button-option:first-child::part(rbo_bttnOption) {
	border-right: 0;
}

radio-button-option:last-child::part(rbo_bttnOption) {
	border-left: 0;
}

::part(rbo_bttnOption) {
	background: var(--accent-color);
	border: var(--border-width) solid var(--theme-highlight-opaque);
	box-sizing: border-box;
	cursor: pointer;
	font-size: var(--default-font-size);
	height: 100%;
	padding: 4rem 14rem;
	text-transform: uppercase;
	transition: var(--transition-speed) ease background;
	width: 100%;
}

::part(rbo_bttnUnselected) {
	background: var(--theme-basic);
	color: var(--placeholder-font-color);
}

::part(rbo_bttnSelected) {
	background: var(--theme-highlight);
	color: var(--theme-font);
	font-weight: bold;
}

::part(rbo_bttnUnselected):focus {
	color: var(--theme-highlight-opaque);
	border-color: var(--theme-highlight-opaque);
}

::part(rbo_bttnSelected):focus {
	background: var(--theme-highlight-opaque);
}

::part(rbo_bttnSelected):focus,
::part(rbo_bttnUnselected):focus {
	outline: none;
}

::part(rbo_bttnDisabled){
	cursor: auto;
}

::part(rbo_bttnSelected rbo_bttnDisabled){
	background: var(--theme-highlight-opaque);
	border: none;
}

/*Combobox*/
.loadingSVG,
::part(cb_bttnCombo_Box_Text_Waiting)  {
	background: url(/media/svgs/loading.svg) repeat-x;
	background-position: center;
	background-size: 50%;
	color: transparent;
	pointer-events: none;
}

::part(cb_divInput) {
	box-shadow: 0 1rem 1rem rgba(0,0,0,.15) inset;
	height: var(--input-height);
	position: relative;
}

::part(cb_bttnCombo_Box) {
	background: var(--accent-color);
	border: var(--border-width) solid var(--accent-color);
	border-radius: var(--border-radius);
	color: var(--font-color);
	cursor: pointer;
	display: flex;
	font-size: var(--default-font-size);
	height: 100%;
	align-items: center;
	padding: 4rem 10rem;
	width: 100%;
}

::part(cb_bttnCombo_Box):focus {
	outline: none;
}

::part(cb_bttnCombo_Box_No_Selection) {
	color: var(--placeholder-font-color);
	font-style: italic;
}

::part(cb_bttnCombo_Box_Error) {
	border: var(--border-width) solid var(--error-color);
}

::part(cb_bttnCombo_Box_Text) {
	flex: 1;
	font-size: var(--default-font-size);
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}

::part(cb_bttnCombo_Box_Arrow) {
	box-sizing: border-box;
	fill: var(--font-color);
	padding: 0 4rem;
	transform: rotate(180deg);
	width: var(--square-icon-small);
}

::part(cb_svgCombo_Box_Button_Arrow) {
	display: block;
}

::part(cb_divDropdown) {
	background-color: var(--theme-basic);
	border: var(--border-width) solid var(--theme-highlight);
	border-radius: var(--border-radius);
	box-sizing: border-box;
	padding: 2rem;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: var(--zIndex-aboveAll);
}

::part(cb_inputSearch_Container) {
	display: flex;
	flex-wrap: nowrap;
}

::part(bttnCancel) {
	background: var(--theme-basic);
	border: 0;
	margin: 0;
	padding: 0;
}

::part(svgCancel) {
	background: var(--theme-basic);
	box-sizing: border-box;
	cursor: pointer;
	fill: var(--font-color);
	padding: 8rem;
	height: 31rem;
	width: 38rem;
}

::part(cb_inputSearch) {
	background: var(--accent-color);
	border: none;
	border-radius: var(--border-radius);
	box-shadow: 0 1rem 1rem rgba(0,0,0,.15) inset;
	box-sizing: border-box;
	color: var(--font-color);
	font-size: var(--default-font-size);
	height: 31rem;
	padding: 0 6rem;
	width: 100%;
}

::part(cb_inputSearch)::placeholder {
	color: var(--placeholder-font-color);
	font-style: italic;
}

::part(cb_inputSearch):focus {
	outline: none;
}

::part(cb_bttnSelection_Access) {
	background-color: var(--accent-color);
	border: none;
	border-top: var(--border-width) solid var(--theme-basic);
	color: var(--font-color);
	cursor: pointer;
	font-size: var(--default-font-size);
	padding: 6rem;
	width: 100%;
}

::part(cb_divSelected_Scrollbar_Options_Container),
::part(cb_divScrollbar_Options_Container) {
	overflow: hidden;
	position: sticky;
	top: 0;
	z-index: var(--zIndex-aboveAll);
}

::part(cb_divSelected_Options_Container) {
	display: flex;
	flex-wrap: wrap;
}

::part(cb_divSelected_Options_Container),
::part(cb_divOptions_Container) {
	box-sizing: border-box;
	max-height: 200rem;
	overflow-x: hidden;
	overflow-y: scroll;
	width: calc(100% + 30rem);
}

::part(cb_divSelected_Option) {
align-items: center;
	background: var(--accent-color);
	border-radius: var(--border-radius);
	box-sizing: border-box;
	color: var(--font-color);
	display: flex;
	justify-content: space-between;
	margin: 4rem;
	max-width: 95%;
	padding: 4rem;
}

::part(cb_divSelected_Option_Text) {
	flex: 1;
	font-size: var(--default-font-size);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

::part(cb_bttnSelected_Option_Button) {
	background: none;
	border: none;
	cursor: pointer;
	display: flex; /* This forces the svg icon contained inside to display as flex. This fixes an alignment issue in Firefox. */
	fill: var(--theme-highlight);
	height: var(--square-icon-xs);
	margin-left: 4rem;
	padding: 2rem;
	position: relative;
	width: var(--square-icon-xs);
}

::part(cb_bttnOption),
::part(cbo_bttnOption) {
	border: none;
	border-bottom: 1rem solid var(--theme-basic);
	color: var(--font-color);
	cursor: pointer;
	display: block;
	font-size: var(--default-font-size);
	overflow: hidden;
	padding: 6rem 6rem 6rem 25rem;
	position: relative;
	text-align: left;
	text-overflow: ellipsis;
	width: 100%;
}

::part(cbo_bttnUnselected) {
	background: var(--accent-color);
}

::part(cbo_bttnSelected),
::part(cbo_bttnHighlighted) {
	background: var(--theme-basic);
}

::part(cbo_bttnUnselected):after,
::part(cbo_bttnSelected):after {
	border: var(--border-width) solid;
	border-radius: var(--border-radius);
	content: "";
	height: 10rem;
	left: 4rem;
	position: absolute;
	top: 7rem;
	width: 10rem;
}

::part(cbo_bttnUnselected):after {
	border-color: var(--theme-basic);
}

::part(cbo_bttnSelected):after {
	background: var(--theme-highlight);
	border-color: var(--accent-color);
}

/*::part(cbo_bttnSelected cbo_bttnHighlighted):after {
	background: var(--theme-highlight-opaque);
}
*/
::part(cbo_bttnHighlighted):after {
	border-color: var(--theme-highlight);
}

::part(cbo_spanQuery_Match_Highlight) {
	background: var(--theme-highlight);
	color: var(--theme-font);
}

::part(cb_bttnUnselected_New_Option) {
	background: var(--theme-highlight);
	border-bottom: var(--border-width) solid var(--theme-basic);
	color: var(--theme-font);
	text-align: center;
	white-space: normal;
}

::part(cb_bttnUnselected_New_Option_Highlighted) {
	color: var(--theme-font);
	opacity: 0.80;
}

::part(cb_divNo_Search) {
	background: var(--theme-highlight);
	color: var(--theme-font);
}

::part(cb_divNo_Matches) {
	background: var(--accent-color);
	color: var(--font-color);
}

::part(cb_divAJAJ_Error_Message) {
	background: var(--error-color);
	color: var(--theme-basic);
	text-transform: uppercase;
}

::part(cb_divNo_Search),
::part(cb_divNo_Matches),
::part(cb_divAJAJ_Error_Message) {
	box-sizing: border-box;
	font-size: var(--default-font-size);
	padding: 6rem;
	text-align: center;
	width: 100%;
}

::part(cb_divAJAJ_Animator) {
	background: url(/media/gifs/comboboxCircleLoader.gif) no-repeat;
	background-position: center;
	background-size: contain;
	box-sizing: border-box;
	height: 20rem;
	margin: 10rem auto;
	width: 20rem;
}

/*Button Select all / none options*/
::part(cb_divAll_None_Button_Container) {
	display: flex;
	width: 100%;
}

::part(cb_bttnAll),
::part(cb_bttnNone) {
	background: var(--theme-highlight);
	border: 0;
	border-radius: 0;
	color: var(--theme-font);
	cursor: pointer;
	flex: 0 0 50%;
	font-size: var(--default-font-size);
	margin: 0;
	padding: 6rem 0;
}

::part(cb_bttnAll) { /*Oddly, ::part(bttnAll):disabled does not work in any browser as of March '24 though it is in spec.*/
	border-right: 1rem solid var(--theme-basic);
}

::part(dt_input):disabled,
::part(cb_bttnDisabled),
::part(ti_inputDisabled),
::part(cb_divInput_Disabled) {
	border: none;
	opacity: .5;
	pointer-events: none;
}

/*Date-Time Custom Element*/
::part(dt_divInput),
::part(dt_divDate_Container),
::part(dt_divTime_Container) {
	align-items: stretch;
	display: flex;
	justify-content: flex-start;
	position: relative;
}

::part(dt_divInput) {
	flex-wrap: wrap;
	font-size: var(--default-font-size);
	font-family: var(--font-family);
	gap: 4rem 8rem;
}

::part(dt_divDate_Container),
::part(dt_divTime_Container) {
	border-radius: var(--border-radius);
	width: auto;
}

::part(dt_input) {
	background: var(--accent-color);
	border: none;
	box-shadow: 0 1rem 1rem rgba(0,0,0,.15) inset;
	box-sizing: border-box;
	color: var(--font-color);
	font-family: var(--font-family);
	font-size: var(--default-font-size);
	height: var(--input-height);
	outline-width: 2rem;
	padding: 4rem 10rem;
	position: relative;
	text-align: right;
	width: 100%;
}
::part(dt_input)::placeholder {
	color: var(--placeholder-font-color);
	font-size: var(--default-font-size);
	font-style: italic;
	opacity: 1;
	text-align: right;
}

::part(dt_input):focus {
	outline: 1rem solid var(--theme-highlight);
/*	offset the outline width to show with scrollcontainer overflow standards*/
	outline-offset: -2rem; 
}

::part(dt_gap) {
	align-items: center;
	background: var(--accent-color);
	box-shadow: 0 1rem 1rem rgba(0,0,0,.15) inset;
	display: flex;	
	height: var(--input-height);
	padding: 0 6rem;
}

::part(dt_inputMonth),
::part(dt_inputHour) {
	border-bottom-left-radius: var(--border-radius);
	border-top-left-radius: var(--border-radius);
}

::part(dt_inputMinute) {
	border-bottom-right-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	margin-right: 6rem ;
}

::part(dt_inputYear) {
	border-top-right-radius: 0;
	border-right: none;
	border-bottom-right-radius: 0rem;
	border-top-right-radius: 0rem;
}

::part(dt_bttnCalendar) {
	align-self: center;
	background: var(--accent-color);
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
	border: var(--border-width) solid var(--accent-color);
	border-left: var(--border-width) solid var(--theme-basic);
	box-sizing: border-box;
	cursor: pointer;
	fill: var(--font-color);
	height: var(--input-height);
	margin-left: 1rem;
	min-width: 36rem;
	padding: 6rem;
}

::part(bttnFocus) {
	border: var(--border-width) solid var(--theme-highlight);
	border-bottom: none;
	border-radius: 0 var(--border-radius) 0 0;
	margin-top: -1rem;
	z-index: var(--zIndex-aboveAll);
}

::part(bttnFocus):focus {
	outline-color: transparent;
}

::part(dt_bttnCalendar_SVG) {
	fill: var(--theme-highlight);
	height: var(--square-icon-xs);
	padding: 4rem;
	vertical-align: text-bottom;
}

::part(dt_divCalendar_Container) {
	background: var(--accent-color);
	border: var(--border-width) solid var(--theme-highlight);
	border-radius: var(--border-radius);
	border-top-right-radius: 0;
	box-sizing: border-box;
	color: var(--font-color);
	display: flex;
	flex-direction: column;
	height: 225rem;
	justify-content: flex-start;
	left: 0;
	margin-top: -2rem;
	padding: 2rem;
	position: absolute;
	top: var(--input-height);
	width: 275rem;
	z-index: var(--zIndex-above);
}

::part(dt_divCalendar_Header_Buttons_Container) {
	display: flex;
	width: 100%;
}

::part(dt_buttonCalendar_Arrows) {
	border: 1rem solid var(--theme-basic);
	flex: 0 1 15%;
}

::part(dt_buttonCalendar_Month),
::part(dt_buttonCalendar_Year) {
	flex: 1 0 30%;
	border: 1rem solid var(--theme-basic);
}

::part(dt_buttonCalendar_Arrows),
::part(dt_buttonCalendar_Month),
::part(dt_buttonCalendar_Year) {
	background: var(--accent-color);
	color: var(--font-color);	
	cursor: pointer;
	font-family: var(--font-family-bold);
	font-size: var(--default-font-size);
	padding: 8rem 0;
}

::part(dt_buttonCalendar_Arrows):hover,
::part(dt_buttonCalendar_Month):hover,
::part(dt_buttonCalendar_Year):hover {
	background: var(--theme-basic);
	transition: var(--transition-speed) ease background
}

::part(dt_divCalendar_Header_Days_Of_Week_Container) {
	display: flex;
	width: 100%;
}

::part(dt_divCalendar_Day_Of_Week) {
	flex: 1 1 calc(100%/7);
	font-family: var(--font-family-bold);
	font-size: var(--default-font-size);
	padding:6rem 0;
	text-align: center;
}

::part(dt_divCalendar_Entries_Container) {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	width: 100%;
}

::part(dt_buttonCalendar_Year_Of_Span),
::part(dt_buttonCalendar_Month_Of_Year),
::part(dt_buttonCalendar_Day_Of_Month) {
	background: var(--accent-color);
	border: 1rem solid var(--theme-basic);
	color: var(--font-color);
	cursor: pointer;
	font-size: var(--default-font-size);
	text-align: center;
}

::part(dt_buttonCalendar_Year_Of_Span):hover,
::part(dt_buttonCalendar_Month_Of_Year):hover,
::part(dt_buttonCalendar_Day_Of_Month):hover {
	color: var(--theme-highlight);
}

::part(dt_buttonCalendar_Day_Of_Month_Other_Month) {
	background: var(--theme-basic);
	color: var(--placeholder-font-color);
}

::part(dt_buttonCalendar_Entry_Selected) {
	background: var(--theme-highlight);
	color: var(--theme-basic);
	font-family: var(--font-family-bold);
}

::part(dt_buttonCalendar_Entry_Current) {
	border: 2rem solid var(--theme-highlight-opaque);
	box-sizing: border-box;
}

::part(dt_buttonCalendar_Day_Of_Month) {
	flex: 1 1 calc(100%/7);
}

::part(dt_buttonCalendar_Month_Of_Year) {
	flex: 1 1 calc(100%/3);
}

::part(dt_buttonCalendar_Year_Of_Span) {
	flex: 1 1 calc(100%/5);
}

::part(dt_buttonReset_Hidden) {
	background: none;
	border: none;
	position: absolute;
	top: 0;
	right: 0;
	z-index: var(--zIndex-behind);
}

::part(dt_buttonReset_Visible) {
	background: none;
	border: none;
	color: var(--theme-highlight);
	cursor: pointer;
	font-size: var(--default-font-size);
	height: 30rem;
	position: absolute;
	right: 0;
	text-decoration: underline;
	top: -28rem;
	transition: var(--transition-speed) ease top;
/*	z-index: var(--zIndex-behind);*/
}

::part(dt_buttonReset_Visible):hover {
	color: var(--theme-highlight-opaque);
}

::part(psf_buttonAttributes) {
	background: transparent;
	border: var(--border-width) solid var(--theme-highlight);
	border-radius: var(--border-radius);
	color: var(--theme-highlight);
	font-size: var(--default-font-size);
	margin: 20rem 0;
	padding: 4rem 8rem;
}

/*shared custom component CSS*/
::part(dt_divContainer),
::part(ta_divContainer),
::part(cb_divContainer),
::part(rb_divContainer) {
	color: var(--font-color);
	margin: 10rem 10rem 0 0;
	position: relative;
}

::part(dt_divInput),
product-search-filter,
::part(psf_divLevel_Container),
::part(ti_divContainer),
::part(cb_divContainer) {
	width: 250rem;
}

product-search-filter {
	display: block;
	max-width: 250rem;
}

.divInputSmall ::part(ti_divContainer),
.divInputSmall ::part(cb_divContainer){
	width: 110rem;
}

::part(ta_divContainer) {
	margin-bottom: 20rem;
}

::part(cb_LinkLabel) {
	color: var(--font-color);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	margin-bottom: 6rem;
	position: relative;
	width: 100%;	
}

::part(cb_LinkLabel_Anchor) {
	color: var(--font-color);
	font-size: var(--default-font-size);
	text-decoration: underline;
	text-transform: capitalize;
}

::part(cb_LinkLabel_Icon){
	fill: var(--font-color);
	flex-grow: 1;
	justify-items: flex-end;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: var(--transition-speed) ease opacity, fill;
	width: 100%;
}

::part(cb_LinkLabel_Icon):hover{
	fill: var(--theme-highlight);
	opacity: .75;
}

::part(cb_svgLinkLabel_Icon) {
	display: block;
	fill: inherit;
	height: var(--square-icon-xs);
	width: var(--square-icon-xs);
}

::part(dt_divLabel),
::part(ta_divLabel),
::part(ti_divLabel),
::part(cb_divLabel),
::part(rb_divLabel) {
	color: var(--font-color);
	font-size: var(--default-font-size);
	margin-bottom: 6rem;
	position: relative;
	text-transform: capitalize;
	width: 100%;
	z-index: var(--zIndex-necessary);
}

::part(dt_spanRequired),
::part(ta_spanRequired),
::part(ti_spanRequired),
::part(cb_spanRequired),
::part(rb_spanRequired) {
	color: var(--theme-highlight);
}

::part(dt_divError),
::part(ta_divError),
::part(ti_divError),
::part(rb_divError),
::part(cb_divError) {
	background: var(--theme-highlight);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	bottom: auto;
	box-sizing: border-box;
	color: var(--theme-font);
	font-size: var(--default-font-size);
	left: 0;
	line-height: normal;
	width: 100%;
	padding: 4rem;
	position: absolute;
	right: auto;
	z-index: var(--zIndex-above);
}

/* Desktop portrait layout. */
@media (min-width: 742px) and (max-width: 1330px) {
	:root {
		--page-padding: calc(var(--layout-width) * .1);
	}

	.displayTabletAndMobile,
	.displayTablet {
		display: block !important;
	}

	.hideTabletAndMobile,
	.hideTablet {
		display: none !important;
	}	

	.divOffcanvasPosition {
		height: 100%;
		left: 0;
		overflow: visible;
		position: fixed;
	}
}

@media (max-width: 1330px) { 
	:root {
		--default-font-size: 26rem;
		--input-height: 60rem;	
	}
	::part(cb_bttnOption), ::part(cbo_bttnOption) {
		padding: 6rem 6rem 6rem 35rem;
	}

	::part(cbo_bttnUnselected):after,
	::part(cbo_bttnSelected):after {
		height: 20rem;
		top: 8rem;
		width: 20rem;
	}

	::part(psf_divLevel_Container), 
	::part(ti_divContainer), 
	::part(cb_divContainer),
	product-search-filter {
		max-width: 100%;
		width: 100%;
	}
}

@media (max-width: 742px) { 
	:root {
		--input-height: 46rem;
		--page-padding: 36rem;
		--sqaure-icon: 50rem;
	}

	.displayTabletAndMobile,
	.displayMobile {
		display: block !important;
	}

	.hideTabletAndMobile,
	.hideMobile {
		display: none !important;
	}

	::part(rb_divInput) {
		display: block;
	}

	::part(rbo_bttnOption) {
		min-height: var(--input-height);
	}

	::part(ti_divContainer) {
		width: 100%;
	}

	.bttnStyle1,
	.bttnStyle2 {
		display: block;
		margin-bottom: 20rem;
		width: 100%;
	}

	::part(dt_divContainer),
	::part(rb_divContainer),
	::part(ta_divContainer),
	::part(ti_divContainer),
	::part(cb_divContainer) {
		margin-right: 0;
		min-width: 100%;
		width: 100%;
	}

	::part(rb_divInput) {
		height: 100%;
	}

	div.divNotification_Container {
		width: 100%;
	}

	.divNotification_Message{
		font-size: 26rem;
		line-height: 32rem;
	}
}