/*
 * Combined Chemelex CSS
 * Generated: 2025-12-18T21:57:21.662Z
 * 
 * This file is automatically generated by scripts/combine-css.cjs
 * DO NOT EDIT MANUALLY - Changes will be overwritten
 * 
 * To regenerate: yarn combine-css
 * To update from S3: yarn fetch-css (then run yarn combine-css)
 * 
 * Contains 18 CSS files in cascade order:
 * 1. chemelex.css
 * 2. AI_CSS.css
 * 3. chemelex_navigation.css
 * 4. chemelex_bottomnav.css
 * 5. chemelex_slideshow.css
 * 6. chemelex_blocks.css
 * 7. chemelex_richtext.css
 * 8. chemelex_products.css
 * 9. chemelex_various.css
 * 10. chemelex_blog.css
 * 11. chemelex_searchresults.css
 * 12. chemelex_headless.css
 * 13. cookie-consent.css
 * 14. chemelex_sitestyle.css
 * 15. chemelex_cms_interface.css
 * 16. fortestingLABELS.css
 * 17. fortestingCOLORS.css
 * 18. chemelex_tweaks.css
 */


/* ========== chemelex.css (0.49 KB) ========== */

/*******************
FONT
********************/
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,125,100..900;1,125,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/*******************
NOTE: CSS files are now loaded directly from index.html with cache-busting versions.
To update the list of CSS files or their order, edit the cssFiles array in index.html.
To bust the cache, update the version in public/css-version.js
********************/



/* ========== AI_CSS.css (117.35 KB) ========== */

@media (prefers-color-scheme: dark) {
	.wmde-markdown, .wmde-markdown-var {
		color-scheme: dark;
		--color-prettylights-syntax-comment: #8b949e;
		--color-prettylights-syntax-constant: #79c0ff;
		--color-prettylights-syntax-entity: #d2a8ff;
		--color-prettylights-syntax-storage-modifier-import: #c9d1d9;
		--color-prettylights-syntax-entity-tag: #7ee787;
		--color-prettylights-syntax-keyword: #ff7b72;
		--color-prettylights-syntax-string: #a5d6ff;
		--color-prettylights-syntax-variable: #ffa657;
		--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
		--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
		--color-prettylights-syntax-invalid-illegal-bg: #8e1519;
		--color-prettylights-syntax-carriage-return-text: #f0f6fc;
		--color-prettylights-syntax-carriage-return-bg: #b62324;
		--color-prettylights-syntax-string-regexp: #7ee787;
		--color-prettylights-syntax-markup-list: #f2cc60;
		--color-prettylights-syntax-markup-heading: #1f6feb;
		--color-prettylights-syntax-markup-italic: #c9d1d9;
		--color-prettylights-syntax-markup-bold: #c9d1d9;
		--color-prettylights-syntax-markup-deleted-text: #ffdcd7;
		--color-prettylights-syntax-markup-deleted-bg: #67060c;
		--color-prettylights-syntax-markup-inserted-text: #aff5b4;
		--color-prettylights-syntax-markup-inserted-bg: #033a16;
		--color-prettylights-syntax-markup-changed-text: #ffdfb6;
		--color-prettylights-syntax-markup-changed-bg: #5a1e02;
		--color-prettylights-syntax-markup-ignored-text: #c9d1d9;
		--color-prettylights-syntax-markup-ignored-bg: #1158c7;
		--color-prettylights-syntax-meta-diff-range: #d2a8ff;
		--color-prettylights-syntax-brackethighlighter-angle: #8b949e;
		--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
		--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
		--color-fg-default: #c9d1d9;
		--color-fg-muted: #8b949e;
		--color-fg-subtle: #484f58;
		--color-canvas-default: #0d1117;
		--color-canvas-subtle: #161b22;
		--color-border-default: #30363d;
		--color-border-muted: #21262d;
		--color-neutral-muted: rgba(110, 118, 129, .4);
		--color-accent-fg: #58a6ff;
		--color-accent-emphasis: #1f6feb;
		--color-attention-subtle: rgba(187, 128, 9, .15);
		--color-danger-fg: #f85149;
		--color-danger-emphasis: #da3633;
		--color-attention-fg: #d29922;
		--color-attention-emphasis: #9e6a03;
		--color-done-fg: #a371f7;
		--color-done-emphasis: #8957e5;
		--color-success-fg: #3fb950;
		--color-success-emphasis: #238636;
		--color-copied-active-bg: #2e9b33
	}
}
@media (prefers-color-scheme: light) {
	.wmde-markdown, .wmde-markdown-var {
		color-scheme: light;
		--color-prettylights-syntax-comment: #6e7781;
		--color-prettylights-syntax-constant: #0550ae;
		--color-prettylights-syntax-entity: #8250df;
		--color-prettylights-syntax-storage-modifier-import: #24292f;
		--color-prettylights-syntax-entity-tag: #116329;
		--color-prettylights-syntax-keyword: #cf222e;
		--color-prettylights-syntax-string: #0a3069;
		--color-prettylights-syntax-variable: #953800;
		--color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
		--color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
		--color-prettylights-syntax-invalid-illegal-bg: #82071e;
		--color-prettylights-syntax-carriage-return-text: #f6f8fa;
		--color-prettylights-syntax-carriage-return-bg: #cf222e;
		--color-prettylights-syntax-string-regexp: #116329;
		--color-prettylights-syntax-markup-list: #3b2300;
		--color-prettylights-syntax-markup-heading: #0550ae;
		--color-prettylights-syntax-markup-italic: #24292f;
		--color-prettylights-syntax-markup-bold: #24292f;
		--color-prettylights-syntax-markup-deleted-text: #82071e;
		--color-prettylights-syntax-markup-deleted-bg: #ffebe9;
		--color-prettylights-syntax-markup-inserted-text: #116329;
		--color-prettylights-syntax-markup-inserted-bg: #dafbe1;
		--color-prettylights-syntax-markup-changed-text: #953800;
		--color-prettylights-syntax-markup-changed-bg: #ffd8b5;
		--color-prettylights-syntax-markup-ignored-text: #eaeef2;
		--color-prettylights-syntax-markup-ignored-bg: #0550ae;
		--color-prettylights-syntax-meta-diff-range: #8250df;
		--color-prettylights-syntax-brackethighlighter-angle: #57606a;
		--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
		--color-prettylights-syntax-constant-other-reference-link: #0a3069;
		--color-fg-default: #24292f;
		--color-fg-muted: #57606a;
		--color-fg-subtle: #6e7781;
		--color-canvas-default: #ffffff;
		--color-canvas-subtle: #f6f8fa;
		--color-border-default: #d0d7de;
		--color-border-muted: hsl(210, 18%, 87%);
		--color-neutral-muted: rgba(175, 184, 193, .2);
		--color-accent-fg: #0969da;
		--color-accent-emphasis: #0969da;
		--color-attention-subtle: #fff8c5;
		--color-danger-fg: #d1242f;
		--color-danger-emphasis: #cf222e;
		--color-attention-fg: #9a6700;
		--color-attention-emphasis: #9a6700;
		--color-done-fg: #8250df;
		--color-done-emphasis: #8250df;
		--color-success-fg: #1a7f37;
		--color-success-emphasis: #1f883d;
		--color-copied-active-bg: #2e9b33
	}
}
[data-color-mode*=dark] .wmde-markdown, [data-color-mode*=dark] .wmde-markdown-var, .wmde-markdown-var[data-color-mode*=dark], .wmde-markdown[data-color-mode*=dark], body[data-color-mode*=dark] {
	color-scheme: dark;
	--color-prettylights-syntax-comment: #8b949e;
	--color-prettylights-syntax-constant: #79c0ff;
	--color-prettylights-syntax-entity: #d2a8ff;
	--color-prettylights-syntax-storage-modifier-import: #c9d1d9;
	--color-prettylights-syntax-entity-tag: #7ee787;
	--color-prettylights-syntax-keyword: #ff7b72;
	--color-prettylights-syntax-string: #a5d6ff;
	--color-prettylights-syntax-variable: #ffa657;
	--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
	--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
	--color-prettylights-syntax-invalid-illegal-bg: #8e1519;
	--color-prettylights-syntax-carriage-return-text: #f0f6fc;
	--color-prettylights-syntax-carriage-return-bg: #b62324;
	--color-prettylights-syntax-string-regexp: #7ee787;
	--color-prettylights-syntax-markup-list: #f2cc60;
	--color-prettylights-syntax-markup-heading: #1f6feb;
	--color-prettylights-syntax-markup-italic: #c9d1d9;
	--color-prettylights-syntax-markup-bold: #c9d1d9;
	--color-prettylights-syntax-markup-deleted-text: #ffdcd7;
	--color-prettylights-syntax-markup-deleted-bg: #67060c;
	--color-prettylights-syntax-markup-inserted-text: #aff5b4;
	--color-prettylights-syntax-markup-inserted-bg: #033a16;
	--color-prettylights-syntax-markup-changed-text: #ffdfb6;
	--color-prettylights-syntax-markup-changed-bg: #5a1e02;
	--color-prettylights-syntax-markup-ignored-text: #c9d1d9;
	--color-prettylights-syntax-markup-ignored-bg: #1158c7;
	--color-prettylights-syntax-meta-diff-range: #d2a8ff;
	--color-prettylights-syntax-brackethighlighter-angle: #8b949e;
	--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
	--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
	--color-fg-default: #c9d1d9;
	--color-fg-muted: #8b949e;
	--color-fg-subtle: #484f58;
	--color-canvas-default: #0d1117;
	--color-canvas-subtle: #161b22;
	--color-border-default: #30363d;
	--color-border-muted: #21262d;
	--color-neutral-muted: rgba(110, 118, 129, .4);
	--color-accent-fg: #58a6ff;
	--color-accent-emphasis: #1f6feb;
	--color-attention-subtle: rgba(187, 128, 9, .15);
	--color-danger-fg: #f85149
}
[data-color-mode*=light] .wmde-markdown, [data-color-mode*=light] .wmde-markdown-var, .wmde-markdown-var[data-color-mode*=light], .wmde-markdown[data-color-mode*=light], body[data-color-mode*=light] {
	color-scheme: light;
	--color-prettylights-syntax-comment: #6e7781;
	--color-prettylights-syntax-constant: #0550ae;
	--color-prettylights-syntax-entity: #8250df;
	--color-prettylights-syntax-storage-modifier-import: #24292f;
	--color-prettylights-syntax-entity-tag: #116329;
	--color-prettylights-syntax-keyword: #cf222e;
	--color-prettylights-syntax-string: #0a3069;
	--color-prettylights-syntax-variable: #953800;
	--color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
	--color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
	--color-prettylights-syntax-invalid-illegal-bg: #82071e;
	--color-prettylights-syntax-carriage-return-text: #f6f8fa;
	--color-prettylights-syntax-carriage-return-bg: #cf222e;
	--color-prettylights-syntax-string-regexp: #116329;
	--color-prettylights-syntax-markup-list: #3b2300;
	--color-prettylights-syntax-markup-heading: #0550ae;
	--color-prettylights-syntax-markup-italic: #24292f;
	--color-prettylights-syntax-markup-bold: #24292f;
	--color-prettylights-syntax-markup-deleted-text: #82071e;
	--color-prettylights-syntax-markup-deleted-bg: #ffebe9;
	--color-prettylights-syntax-markup-inserted-text: #116329;
	--color-prettylights-syntax-markup-inserted-bg: #dafbe1;
	--color-prettylights-syntax-markup-changed-text: #953800;
	--color-prettylights-syntax-markup-changed-bg: #ffd8b5;
	--color-prettylights-syntax-markup-ignored-text: #eaeef2;
	--color-prettylights-syntax-markup-ignored-bg: #0550ae;
	--color-prettylights-syntax-meta-diff-range: #8250df;
	--color-prettylights-syntax-brackethighlighter-angle: #57606a;
	--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
	--color-prettylights-syntax-constant-other-reference-link: #0a3069;
	--color-fg-default: #24292f;
	--color-fg-muted: #57606a;
	--color-fg-subtle: #6e7781;
	--color-canvas-default: #ffffff;
	--color-canvas-subtle: #f6f8fa;
	--color-border-default: #d0d7de;
	--color-border-muted: hsl(210, 18%, 87%);
	--color-neutral-muted: rgba(175, 184, 193, .2);
	--color-accent-fg: #0969da;
	--color-accent-emphasis: #0969da;
	--color-attention-subtle: #fff8c5;
	--color-danger-fg: #cf222e
}
.wmde-markdown {
	-webkit-text-size-adjust: 100%;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	font-size: 16px;
	line-height: 1.5;
	word-wrap: break-word;
	color: var(--color-fg-default);
	background-color: var(--color-canvas-default)
}
.wmde-markdown details, .wmde-markdown figcaption, .wmde-markdown figure {
	display: block
}
.wmde-markdown summary {
	display: list-item
}
.wmde-markdown [hidden] {
	display: none!important
}
.wmde-markdown a {
	background-color: transparent;
	color: var(--color-accent-fg);
	text-decoration: none
}
.wmde-markdown a:active, .wmde-markdown a:hover {
	outline-width: 0
}
.wmde-markdown abbr[title] {
	border-bottom: none;
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted
}
.wmde-markdown b, .wmde-markdown strong {
	font-weight: 600
}
.wmde-markdown dfn {
	font-style: italic
}
.wmde-markdown h1 {
	margin: .67em 0;
	font-weight: 600;
	padding-bottom: .3em;
	font-size: 2em;
	border-bottom: 1px solid var(--color-border-muted)
}
.wmde-markdown mark {
	background-color: var(--color-attention-subtle);
	color: var(--color-text-primary)
}
.wmde-markdown small {
	font-size: 90%
}
.wmde-markdown sub, .wmde-markdown sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}
.wmde-markdown sub {
	bottom: -.25em
}
.wmde-markdown sup {
	top: -.5em
}
.wmde-markdown img {
	display: inline-block;
	border-style: none;
	max-width: 100%;
	box-sizing: content-box;
	background-color: var(--color-canvas-default)
}
.wmde-markdown code, .wmde-markdown kbd, .wmde-markdown pre, .wmde-markdown samp {
	font-family: monospace, monospace;
	font-size: 1em
}
.wmde-markdown figure {
	margin: 1em 40px
}
.wmde-markdown hr {
	box-sizing: content-box;
	overflow: hidden;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--color-border-muted);
	height: .25em;
	padding: 0;
	margin: 24px 0;
	background-color: var(--color-border-default)
}
.wmde-markdown input {
	font: inherit;
	margin: 0;
	overflow: visible;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit
}
.wmde-markdown [type=button], .wmde-markdown [type=reset], .wmde-markdown [type=submit] {
	-webkit-appearance: button
}
.wmde-markdown [type=button]::-moz-focus-inner, .wmde-markdown [type=reset]::-moz-focus-inner, .wmde-markdown [type=submit]::-moz-focus-inner {
	border-style: none;
	padding: 0
}
.wmde-markdown [type=button]:-moz-focusring, .wmde-markdown [type=reset]:-moz-focusring, .wmde-markdown [type=submit]:-moz-focusring {
	outline: 1px dotted ButtonText
}
.wmde-markdown [type=checkbox], .wmde-markdown [type=radio] {
	box-sizing: border-box;
	padding: 0
}
.wmde-markdown [type=number]::-webkit-inner-spin-button, .wmde-markdown [type=number]::-webkit-outer-spin-button {
	height: auto
}
.wmde-markdown [type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}
.wmde-markdown [type=search]::-webkit-search-cancel-button, .wmde-markdown [type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}
.wmde-markdown ::-webkit-input-placeholder {
	color: inherit;
	opacity: .54
}
.wmde-markdown ::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}
.wmde-markdown a:hover {
	text-decoration: underline
}
.wmde-markdown hr:before {
	display: table;
	content: ""
}
.wmde-markdown hr:after {
	display: table;
	clear: both;
	content: ""
}
.wmde-markdown table {
	border-spacing: 0;
	border-collapse: collapse;
	display: block;
	width: max-content;
	max-width: 100%
}
.wmde-markdown td, .wmde-markdown th {
	padding: 0
}
.wmde-markdown details summary {
	cursor: pointer
}
.wmde-markdown details:not([open])>*:not(summary) {
	display: none!important
}
.wmde-markdown kbd {
	display: inline-block;
	padding: 3px 5px;
	font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
	line-height: 10px;
	color: var(--color-fg-default);
	vertical-align: middle;
	background-color: var(--color-canvas-subtle);
	border: solid 1px var(--color-neutral-muted);
	border-bottom-color: var(--color-neutral-muted);
	border-radius: 6px;
	box-shadow: inset 0 -1px 0 var(--color-neutral-muted)
}
.wmde-markdown h1, .wmde-markdown h2, .wmde-markdown h3, .wmde-markdown h4, .wmde-markdown h5, .wmde-markdown h6 {
	margin-top: 24px;
	margin-bottom: 16px;
	font-weight: 600;
	line-height: 1.25
}
.wmde-markdown h2 {
	font-weight: 600;
	padding-bottom: .3em;
	font-size: 1.5em;
	border-bottom: 1px solid var(--color-border-muted)
}
.wmde-markdown h3 {
	font-weight: 600;
	font-size: 1.25em
}
.wmde-markdown h4 {
	font-weight: 600;
	font-size: 1em
}
.wmde-markdown h5 {
	font-weight: 600;
	font-size: .875em
}
.wmde-markdown h6 {
	font-weight: 600;
	font-size: .85em;
	color: var(--color-fg-muted)
}
.wmde-markdown p {
	margin-top: 0;
	margin-bottom: 10px
}
.wmde-markdown blockquote {
	margin: 0;
	padding: 0 1em;
	color: var(--color-fg-muted);
	border-left: .25em solid var(--color-border-default)
}
.wmde-markdown ul, .wmde-markdown ol {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 2em
}
.wmde-markdown ol ol, .wmde-markdown ul ol {
	list-style-type: lower-roman
}
.wmde-markdown ul ul ol, .wmde-markdown ul ol ol, .wmde-markdown ol ul ol, .wmde-markdown ol ol ol {
	list-style-type: lower-alpha
}
.wmde-markdown dd {
	margin-left: 0
}
.wmde-markdown tt, .wmde-markdown code {
	font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
	font-size: 12px
}
.wmde-markdown pre {
	margin-top: 0;
	margin-bottom: 0;
	font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
	font-size: 12px;
	word-wrap: normal
}
.wmde-markdown .octicon {
	display: inline-block;
	overflow: visible!important;
	vertical-align: text-bottom;
	fill: currentColor
}
.wmde-markdown ::placeholder {
	color: var(--color-fg-subtle);
	opacity: 1
}
.wmde-markdown input::-webkit-outer-spin-button, .wmde-markdown input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}
.wmde-markdown [data-catalyst] {
	display: block
}
.wmde-markdown:before {
	display: table;
	content: ""
}
.wmde-markdown:after {
	display: table;
	clear: both;
	content: ""
}
.wmde-markdown>*:first-child {
	margin-top: 0!important
}
.wmde-markdown>*:last-child {
	margin-bottom: 0!important
}
.wmde-markdown a:not([href]) {
	color: inherit;
	text-decoration: none
}
.wmde-markdown .absent {
	color: var(--color-danger-fg)
}
.wmde-markdown a.anchor {
	float: left;
	padding-right: 4px;
	margin-left: -20px;
	line-height: 1
}
.wmde-markdown .anchor:focus {
	outline: none
}
.wmde-markdown p, .wmde-markdown blockquote, .wmde-markdown ul, .wmde-markdown ol, .wmde-markdown dl, .wmde-markdown table, .wmde-markdown pre, .wmde-markdown details {
	margin-top: 0;
	margin-bottom: 16px
}
.wmde-markdown blockquote>:first-child {
	margin-top: 0
}
.wmde-markdown blockquote>:last-child {
	margin-bottom: 0
}
.wmde-markdown sup>a:before {
	content: "["
}
.wmde-markdown sup>a:after {
	content: "]"
}
.wmde-markdown h1 .octicon-link, .wmde-markdown h2 .octicon-link, .wmde-markdown h3 .octicon-link, .wmde-markdown h4 .octicon-link, .wmde-markdown h5 .octicon-link, .wmde-markdown h6 .octicon-link {
	color: var(--color-fg-default);
	vertical-align: middle;
	visibility: hidden
}
.wmde-markdown h1:hover .anchor, .wmde-markdown h2:hover .anchor, .wmde-markdown h3:hover .anchor, .wmde-markdown h4:hover .anchor, .wmde-markdown h5:hover .anchor, .wmde-markdown h6:hover .anchor {
	text-decoration: none
}
.wmde-markdown h1:hover .anchor .octicon-link, .wmde-markdown h2:hover .anchor .octicon-link, .wmde-markdown h3:hover .anchor .octicon-link, .wmde-markdown h4:hover .anchor .octicon-link, .wmde-markdown h5:hover .anchor .octicon-link, .wmde-markdown h6:hover .anchor .octicon-link {
	visibility: visible
}
.wmde-markdown h1 tt, .wmde-markdown h1 code, .wmde-markdown h2 tt, .wmde-markdown h2 code, .wmde-markdown h3 tt, .wmde-markdown h3 code, .wmde-markdown h4 tt, .wmde-markdown h4 code, .wmde-markdown h5 tt, .wmde-markdown h5 code, .wmde-markdown h6 tt, .wmde-markdown h6 code {
	padding: 0 .2em;
	font-size: inherit
}
.wmde-markdown ul.no-list, .wmde-markdown ol.no-list {
	padding: 0;
	list-style-type: none
}
.wmde-markdown ol[type="1"] {
	list-style-type: decimal
}
.wmde-markdown ol[type=a] {
	list-style-type: lower-alpha
}
.wmde-markdown ol[type=i] {
	list-style-type: lower-roman
}
.wmde-markdown div>ol:not([type]) {
	list-style-type: decimal
}
.wmde-markdown ul ul, .wmde-markdown ul ol, .wmde-markdown ol ol, .wmde-markdown ol ul {
	margin-top: 0;
	margin-bottom: 0
}
.wmde-markdown li>p {
	margin-top: 16px
}
.wmde-markdown li+li {
	margin-top: .25em
}
.wmde-markdown dl {
	padding: 0
}
.wmde-markdown dl dt {
	padding: 0;
	margin-top: 16px;
	font-size: 1em;
	font-style: italic;
	font-weight: 600
}
.wmde-markdown dl dd {
	padding: 0 16px;
	margin-bottom: 16px
}
.wmde-markdown table th {
	font-weight: 600
}
.wmde-markdown table th, .wmde-markdown table td {
	padding: 6px 13px;
	border: 1px solid var(--color-border-default)
}
.wmde-markdown table tr {
	background-color: var(--color-canvas-default);
	border-top: 1px solid var(--color-border-muted)
}
.wmde-markdown table tr:nth-child(2n) {
	background-color: var(--color-canvas-subtle)
}
.wmde-markdown table img {
	background-color: transparent
}
.wmde-markdown img[align=right] {
	padding-left: 20px
}
.wmde-markdown img[align=left] {
	padding-right: 20px
}
.wmde-markdown .emoji {
	max-width: none;
	vertical-align: text-top;
	background-color: transparent
}
.wmde-markdown span.frame {
	display: block;
	overflow: hidden
}
.wmde-markdown span.frame>span {
	display: block;
	float: left;
	width: auto;
	padding: 7px;
	margin: 13px 0 0;
	overflow: hidden;
	border: 1px solid var(--color-border-default)
}
.wmde-markdown span.frame span img {
	display: block;
	float: left
}
.wmde-markdown span.frame span span {
	display: block;
	padding: 5px 0 0;
	clear: both;
	color: var(--color-fg-default)
}
.wmde-markdown span.align-center {
	display: block;
	overflow: hidden;
	clear: both
}
.wmde-markdown span.align-center>span {
	display: block;
	margin: 13px auto 0;
	overflow: hidden;
	text-align: center
}
.wmde-markdown span.align-center span img {
	margin: 0 auto;
	text-align: center
}
.wmde-markdown span.align-right {
	display: block;
	overflow: hidden;
	clear: both
}
.wmde-markdown span.align-right>span {
	display: block;
	margin: 13px 0 0;
	overflow: hidden;
	text-align: right
}
.wmde-markdown span.align-right span img {
	margin: 0;
	text-align: right
}
.wmde-markdown span.float-left {
	display: block;
	float: left;
	margin-right: 13px;
	overflow: hidden
}
.wmde-markdown span.float-left span {
	margin: 13px 0 0
}
.wmde-markdown span.float-right {
	display: block;
	float: right;
	margin-left: 13px;
	overflow: hidden
}
.wmde-markdown span.float-right>span {
	display: block;
	margin: 13px auto 0;
	overflow: hidden;
	text-align: right
}
.wmde-markdown code, .wmde-markdown tt {
	padding: .2em .4em;
	margin: 0;
	font-size: 85%;
	background-color: var(--color-neutral-muted);
	border-radius: 6px
}
.wmde-markdown code br, .wmde-markdown tt br {
	display: none
}
.wmde-markdown del code {
	text-decoration: inherit
}
.wmde-markdown pre code {
	font-size: 100%
}
.wmde-markdown pre>code {
	padding: 0;
	margin: 0;
	word-break: normal;
	white-space: pre;
	background: transparent;
	border: 0
}
.wmde-markdown pre {
	font-size: 85%;
	line-height: 1.45;
	background-color: var(--color-canvas-subtle);
	border-radius: 6px
}
.wmde-markdown pre code, .wmde-markdown pre tt {
	display: inline;
	max-width: auto;
	padding: 0;
	margin: 0;
	overflow: visible;
	line-height: inherit;
	word-wrap: normal;
	background-color: transparent;
	border: 0
}
.wmde-markdown pre>code {
	padding: 16px;
	overflow: auto;
	display: block
}
.wmde-markdown pre>code::-webkit-scrollbar {
	background: transparent;
	width: 8px;
	height: 8px
}
.wmde-markdown pre>code::-webkit-scrollbar-thumb {
	background: var(--color-fg-muted);
	border-radius: 10px
}
.wmde-markdown .csv-data td, .wmde-markdown .csv-data th {
	padding: 5px;
	overflow: hidden;
	font-size: 12px;
	line-height: 1;
	text-align: left;
	white-space: nowrap
}
.wmde-markdown .csv-data .blob-num {
	padding: 10px 8px 9px;
	text-align: right;
	background: var(--color-canvas-default);
	border: 0
}
.wmde-markdown .csv-data tr {
	border-top: 0
}
.wmde-markdown .csv-data th {
	font-weight: 600;
	background: var(--color-canvas-subtle);
	border-top: 0
}
.wmde-markdown .footnotes {
	font-size: 12px;
	color: var(--color-fg-muted);
	border-top: 1px solid var(--color-border-default)
}
.wmde-markdown .footnotes ol {
	padding-left: 16px
}
.wmde-markdown .footnotes li {
	position: relative
}
.wmde-markdown .footnotes li:target:before {
	position: absolute;
	top: -8px;
	right: -8px;
	bottom: -8px;
	left: -24px;
	pointer-events: none;
	content: "";
	border: 2px solid var(--color-accent-emphasis);
	border-radius: 6px
}
.wmde-markdown .footnotes li:target {
	color: var(--color-fg-default)
}
.wmde-markdown .footnotes .data-footnote-backref g-emoji {
	font-family: monospace
}
.wmde-markdown .task-list-item {
	list-style-type: none
}
.wmde-markdown .task-list-item label {
	font-weight: 400
}
.wmde-markdown .task-list-item.enabled label {
	cursor: pointer
}
.wmde-markdown .task-list-item+.wmde-markdown .task-list-item {
	margin-top: 3px
}
.wmde-markdown .task-list-item .handle {
	display: none
}
.wmde-markdown .task-list-item-checkbox, .wmde-markdown .contains-task-list input[type=checkbox] {
	margin: 0 .2em .25em -1.6em;
	vertical-align: middle
}
.wmde-markdown .contains-task-list:dir(rtl) .task-list-item-checkbox, .wmde-markdown .contains-task-list:dir(rtl) input[type=checkbox] {
	margin: 0 -1.6em .25em .2em
}
.wmde-markdown ::-webkit-calendar-picker-indicator {
	filter: invert(50%)
}
.wmde-markdown pre {
	position: relative
}
.wmde-markdown pre .copied {
	visibility: hidden;
	display: flex;
	position: absolute;
	cursor: pointer;
	color: var(--color-fg-default);
	top: 6px;
	right: 6px;
	border-radius: 5px;
	background: var(--color-border-default);
	padding: 6px;
	font-size: 12px;
	transition: all .3s
}
.wmde-markdown pre .copied .octicon-copy {
	display: block
}
.wmde-markdown pre .copied .octicon-check {
	display: none
}
.wmde-markdown pre:hover .copied {
	visibility: visible
}
.wmde-markdown pre:hover .copied:hover {
	background: var(--color-prettylights-syntax-entity-tag);
	color: var(--color-canvas-default)
}
.wmde-markdown pre:hover .copied:active, .wmde-markdown pre .copied.active {
	background: var(--color-copied-active-bg);
	color: var(--color-canvas-default)
}
.wmde-markdown pre .active .octicon-copy {
	display: none
}
.wmde-markdown pre .active .octicon-check {
	display: block
}
.wmde-markdown .markdown-alert {
	padding: .5rem 1em;
	color: inherit;
	margin-bottom: 16px;
	border-left: .25em solid var(--borderColor-default, var(--color-border-default))
}
.wmde-markdown .markdown-alert>:last-child {
	margin-bottom: 0!important
}
.wmde-markdown .markdown-alert .markdown-alert-title {
	display: flex;
	align-items: center;
	line-height: 1;
	font-weight: 500;
	font-size: 14px
}
.wmde-markdown .markdown-alert .markdown-alert-title svg.octicon {
	margin-right: var(--base-size-8, 8px)!important
}
.wmde-markdown .markdown-alert.markdown-alert-note {
	border-left-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis))
}
.wmde-markdown .markdown-alert.markdown-alert-note .markdown-alert-title {
	color: var(--fgColor-accent, var(--color-accent-fg))
}
.wmde-markdown .markdown-alert.markdown-alert-tip {
	border-left-color: var(--borderColor-success-emphasis, var(--color-success-emphasis))
}
.wmde-markdown .markdown-alert.markdown-alert-tip .markdown-alert-title {
	color: var(--fgColor-success, var(--color-success-fg))
}
.wmde-markdown .markdown-alert.markdown-alert-important {
	border-left-color: var(--borderColor-done-emphasis, var(--color-done-emphasis))
}
.wmde-markdown .markdown-alert.markdown-alert-important .markdown-alert-title {
	color: var(--fgColor-done, var(--color-done-fg))
}
.wmde-markdown .markdown-alert.markdown-alert-warning {
	border-left-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis))
}
.wmde-markdown .markdown-alert.markdown-alert-warning .markdown-alert-title {
	color: var(--fgColor-attention, var(--color-attention-fg))
}
.wmde-markdown .markdown-alert.markdown-alert-caution {
	border-left-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis))
}
.wmde-markdown .markdown-alert.markdown-alert-caution .markdown-alert-title {
	color: var(--fgColor-danger, var(--color-danger-fg))
}
.wmde-markdown .highlight-line {
	background-color: var(--color-neutral-muted)
}
.wmde-markdown .code-line.line-number:before {
	display: inline-block;
	width: 1rem;
	text-align: right;
	margin-right: 16px;
	color: var(--color-fg-subtle);
	content: attr(line);
	white-space: nowrap
}
.wmde-markdown .token.comment, .wmde-markdown .token.prolog, .wmde-markdown .token.doctype, .wmde-markdown .token.cdata {
	color: var(--color-prettylights-syntax-comment)
}
.wmde-markdown .token.namespace {
	opacity: .7
}
.wmde-markdown .token.property, .wmde-markdown .token.tag, .wmde-markdown .token.selector, .wmde-markdown .token.constant, .wmde-markdown .token.symbol, .wmde-markdown .token.deleted {
	color: var(--color-prettylights-syntax-entity-tag)
}
.wmde-markdown .token.maybe-class-name {
	color: var(--color-prettylights-syntax-variable)
}
.wmde-markdown .token.property-access, .wmde-markdown .token.operator, .wmde-markdown .token.boolean, .wmde-markdown .token.number, .wmde-markdown .token.selector .token.class, .wmde-markdown .token.attr-name, .wmde-markdown .token.string, .wmde-markdown .token.char, .wmde-markdown .token.builtin {
	color: var(--color-prettylights-syntax-constant)
}
.wmde-markdown .token.deleted {
	color: var(--color-prettylights-syntax-markup-deleted-text)
}
.wmde-markdown .code-line .token.deleted {
	background-color: var(--color-prettylights-syntax-markup-deleted-bg)
}
.wmde-markdown .token.inserted {
	color: var(--color-prettylights-syntax-markup-inserted-text)
}
.wmde-markdown .code-line .token.inserted {
	background-color: var(--color-prettylights-syntax-markup-inserted-bg)
}
.wmde-markdown .token.variable {
	color: var(--color-prettylights-syntax-constant)
}
.wmde-markdown .token.entity, .wmde-markdown .token.url, .wmde-markdown .language-css .token.string, .wmde-markdown .style .token.string, .wmde-markdown .token.color, .wmde-markdown .token.atrule, .wmde-markdown .token.attr-value, .wmde-markdown .token.function, .wmde-markdown .token.class-name {
	color: var(--color-prettylights-syntax-string)
}
.wmde-markdown .token.rule, .wmde-markdown .token.regex, .wmde-markdown .token.important, .wmde-markdown .token.keyword {
	color: var(--color-prettylights-syntax-keyword)
}
.wmde-markdown .token.coord {
	color: var(--color-prettylights-syntax-meta-diff-range)
}
.wmde-markdown .token.important, .wmde-markdown .token.bold {
	font-weight: 700
}
.wmde-markdown .token.italic {
	font-style: italic
}
.wmde-markdown .token.entity {
	cursor: help
}
.w-md-editor-toolbar-child {
	position: absolute;
	border-radius: 3px;
	box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
	background-color: var(--md-editor-background-color);
	z-index: 1;
	display: none
}
.w-md-editor-toolbar-child.active {
	display: block
}
.w-md-editor-toolbar-child .w-md-editor-toolbar {
	border-bottom: 0;
	padding: 3px;
	border-radius: 3px
}
.w-md-editor-toolbar-child .w-md-editor-toolbar ul>li {
	display: block
}
.w-md-editor-toolbar-child .w-md-editor-toolbar ul>li button {
	width: -webkit-fill-available;
	height: initial;
	box-sizing: border-box;
	padding: 3px 4px 2px;
	margin: 0
}
.w-md-editor-toolbar {
	border-bottom: 1px solid var(--md-editor-box-shadow-color);
	background-color: var(--md-editor-background-color);
	padding: 3px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 3px 3px 0 0;
	-webkit-user-select: none;
	user-select: none;
	flex-wrap: wrap
}
.w-md-editor-toolbar.bottom {
	border-bottom: 0px;
	border-top: 1px solid var(--md-editor-box-shadow-color);
	border-radius: 0 0 3px 3px
}
.w-md-editor-toolbar ul, .w-md-editor-toolbar li {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: initial
}
.w-md-editor-toolbar li {
	display: inline-block;
	font-size: 14px
}
.w-md-editor-toolbar li+li {
	margin: 0
}
.w-md-editor-toolbar li>button {
	border: none;
	height: 20px;
	line-height: 14px;
	background: none;
	padding: 4px;
	margin: 0 1px;
	border-radius: 2px;
	text-transform: none;
	font-weight: 400;
	overflow: visible;
	outline: none;
	cursor: pointer;
	transition: all .3s;
	white-space: nowrap;
	color: var(--color-fg-default)
}
.w-md-editor-toolbar li>button:hover, .w-md-editor-toolbar li>button:focus {
	background-color: var(--color-neutral-muted);
	color: var(--color-accent-fg)
}
.w-md-editor-toolbar li>button:active {
	background-color: var(--color-neutral-muted);
	color: var(--color-danger-fg)
}
.w-md-editor-toolbar li>button:disabled {
	color: var(--md-editor-box-shadow-color);
	cursor: not-allowed
}
.w-md-editor-toolbar li>button:disabled:hover {
	background-color: transparent;
	color: var(--md-editor-box-shadow-color)
}
.w-md-editor-toolbar li.active>button {
	color: var(--color-accent-fg);
	background-color: var(--color-neutral-muted)
}
.w-md-editor-toolbar-divider {
	height: 14px;
	width: 1px;
	margin: -3px 3px 0!important;
	vertical-align: middle;
	background-color: var(--md-editor-box-shadow-color)
}
.w-md-editor-area {
	overflow: auto;
	border-radius: 5px
}
.w-md-editor-text {
	min-height: 100%;
	position: relative;
	text-align: left;
	white-space: pre-wrap;
	word-break: keep-all;
	overflow-wrap: break-word;
	box-sizing: border-box;
	padding: 10px;
	margin: 0;
	font-size: 14px!important;
	line-height: 18px!important;
	font-variant-ligatures: common-ligatures
}
.w-md-editor-text-pre, .w-md-editor-text-input, .w-md-editor-text>.w-md-editor-text-pre {
	margin: 0;
	border: 0;
	background: none;
	box-sizing: inherit;
	display: inherit;
	font-family: inherit;
	font-family: var(--md-editor-font-family)!important;
	font-size: inherit;
	font-style: inherit;
	font-variant-ligatures: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	-moz-tab-size: inherit;
	tab-size: inherit;
	text-indent: inherit;
	text-rendering: inherit;
	text-transform: inherit;
	white-space: inherit;
	overflow-wrap: inherit;
	word-break: inherit;
	word-break: normal;
	padding: 0
}
.w-md-editor-text-pre {
	position: relative;
	margin: 0!important;
	pointer-events: none;
	background-color: transparent!important
}
.w-md-editor-text-pre>code {
	padding: 0!important;
	font-family: var(--md-editor-font-family)!important;
	font-size: 14px!important;
	line-height: 18px!important
}
.w-md-editor-text-input {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	resize: none;
	color: inherit;
	overflow: hidden;
	outline: 0;
	padding: inherit;
	-webkit-font-smoothing: antialiased;
	-webkit-text-fill-color: transparent
}
.w-md-editor-text-input:empty {
	-webkit-text-fill-color: inherit!important
}
.w-md-editor-text-pre, .w-md-editor-text-input {
	word-wrap: pre;
	word-break: break-word;
	white-space: pre-wrap
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.w-md-editor-text-input {
		color: transparent!important
	}
	.w-md-editor-text-input::selection {
		background-color: #accef7!important;
		color: transparent!important
	}
}
.w-md-editor-text-pre .punctuation {
	color: var(--color-prettylights-syntax-comment, #8b949e)!important
}
.w-md-editor-text-pre .token.url, .w-md-editor-text-pre .token.content {
	color: var(--color-prettylights-syntax-constant, #0550ae)!important
}
.w-md-editor-text-pre .token.title.important {
	color: var(--color-prettylights-syntax-markup-bold, #24292f)
}
.w-md-editor-text-pre .token.code-block .function {
	color: var(--color-prettylights-syntax-entity, #8250df)
}
.w-md-editor-text-pre .token.bold {
	font-weight: unset!important
}
.w-md-editor-text-pre .token.title {
	line-height: unset!important;
	font-size: unset!important;
	font-weight: unset!important
}
.w-md-editor-text-pre .token.code.keyword {
	color: var(--color-prettylights-syntax-constant, #0550ae)!important
}
.w-md-editor-text-pre .token.strike, .w-md-editor-text-pre .token.strike .content {
	color: var(--color-prettylights-syntax-markup-deleted-text, #82071e)!important
}
.w-md-editor-bar {
	position: absolute;
	cursor: s-resize;
	right: 0;
	bottom: 0;
	margin-top: -11px;
	margin-right: 0;
	width: 14px;
	z-index: 3;
	height: 10px;
	border-radius: 0 0 3px;
	-webkit-user-select: none;
	user-select: none
}
.w-md-editor-bar svg {
	display: block;
	margin: 0 auto
}
.w-md-editor {
	text-align: left;
	border-radius: 3px;
	padding-bottom: 1px;
	position: relative;
	color: var(--color-fg-default);
	--md-editor-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--md-editor-background-color: var(--color-canvas-default, #ffffff);
	--md-editor-box-shadow-color: var(--color-border-default, #d0d7de);
	box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
	background-color: var(--md-editor-background-color);
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	display: flex;
	flex-direction: column
}
.w-md-editor.w-md-editor-rtl {
	direction: rtl!important;
	text-align: right!important
}
.w-md-editor.w-md-editor-rtl .w-md-editor-preview {
	right: unset!important;
	left: 0;
	text-align: right!important;
	box-shadow: inset -1px 0 0 0 var(--md-editor-box-shadow-color)
}
.w-md-editor.w-md-editor-rtl .w-md-editor-text {
	text-align: right!important
}
.w-md-editor-toolbar {
	height: -webkit-fit-content;
	height: fit-content
}
.w-md-editor-content {
	height: 100%;
	overflow: auto;
	position: relative;
	border-radius: 0 0 3px
}
.w-md-editor .copied {
	display: none!important
}
.w-md-editor-input {
	width: 50%;
	height: 100%
}
.w-md-editor-text-pre>code {
	word-break: break-word!important;
	white-space: pre-wrap!important
}
.w-md-editor-preview {
	width: 50%;
	box-sizing: border-box;
	box-shadow: inset 1px 0 0 0 var(--md-editor-box-shadow-color);
	position: absolute;
	padding: 10px 20px;
	overflow: auto;
	top: 0;
	right: 0;
	bottom: 0;
	border-radius: 0 0 5px;
	display: flex;
	flex-direction: column
}
.w-md-editor-preview .anchor {
	display: none
}
.w-md-editor-preview .contains-task-list li.task-list-item {
	list-style: none
}
.w-md-editor-show-preview .w-md-editor-input {
	width: 0%;
	overflow: hidden;
	background-color: var(--md-editor-background-color)
}
.w-md-editor-show-preview .w-md-editor-preview {
	width: 100%;
	box-shadow: inset 0 0
}
.w-md-editor-show-edit .w-md-editor-input {
	width: 100%
}
.w-md-editor-show-edit .w-md-editor-preview {
	width: 0%;
	padding: 0
}
.w-md-editor-fullscreen {
	overflow: hidden;
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%!important
}
.w-md-editor-fullscreen .w-md-editor-content {
	height: 100%
}
/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */

@layer properties {
	@supports (((-webkit-hyphens: none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
		*, :before, :after, ::backdrop {
			--tw-translate-x:0;
			--tw-translate-y: 0;
			--tw-translate-z: 0;
			--tw-scale-x: 1;
			--tw-scale-y: 1;
			--tw-scale-z: 1;
			--tw-rotate-x: initial;
			--tw-rotate-y: initial;
			--tw-rotate-z: initial;
			--tw-skew-x: initial;
			--tw-skew-y: initial;
			--tw-space-y-reverse: 0;
			--tw-space-x-reverse: 0;
			--tw-border-style: solid;
			--tw-gradient-position: initial;
			--tw-gradient-from: #0000;
			--tw-gradient-via: #0000;
			--tw-gradient-to: #0000;
			--tw-gradient-stops: initial;
			--tw-gradient-via-stops: initial;
			--tw-gradient-from-position: 0%;
			--tw-gradient-via-position: 50%;
			--tw-gradient-to-position: 100%;
			--tw-leading: initial;
			--tw-font-weight: initial;
			--tw-tracking: initial;
			--tw-shadow: 0 0 #0000;
			--tw-shadow-color: initial;
			--tw-shadow-alpha: 100%;
			--tw-inset-shadow: 0 0 #0000;
			--tw-inset-shadow-color: initial;
			--tw-inset-shadow-alpha: 100%;
			--tw-ring-color: initial;
			--tw-ring-shadow: 0 0 #0000;
			--tw-inset-ring-color: initial;
			--tw-inset-ring-shadow: 0 0 #0000;
			--tw-ring-inset: initial;
			--tw-ring-offset-width: 0px;
			--tw-ring-offset-color: #fff;
			--tw-ring-offset-shadow: 0 0 #0000;
			--tw-blur: initial;
			--tw-brightness: initial;
			--tw-contrast: initial;
			--tw-grayscale: initial;
			--tw-hue-rotate: initial;
			--tw-invert: initial;
			--tw-opacity: initial;
			--tw-saturate: initial;
			--tw-sepia: initial;
			--tw-drop-shadow: initial;
			--tw-drop-shadow-color: initial;
			--tw-drop-shadow-alpha: 100%;
			--tw-drop-shadow-size: initial;
			--tw-duration: initial;
			--tw-ease: initial
		}
	}
}
@layer theme {
	:root, :host {
		--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
		--color-red-100: oklch(93.6% .032 17.717);
		--color-red-200: oklch(88.5% .062 18.334);
		--color-red-300: oklch(80.8% .114 19.571);
		--color-red-500: oklch(63.7% .237 25.331);
		--color-red-600: oklch(57.7% .245 27.325);
		--color-red-700: oklch(50.5% .213 27.518);
		--color-orange-600: oklch(64.6% .222 41.116);
		--color-orange-700: oklch(55.3% .195 38.402);
		--color-yellow-100: oklch(97.3% .071 103.193);
		--color-yellow-200: oklch(94.5% .129 101.54);
		--color-yellow-400: oklch(85.2% .199 91.936);
		--color-yellow-600: oklch(68.1% .162 75.834);
		--color-yellow-800: oklch(47.6% .114 61.907);
		--color-green-100: oklch(96.2% .044 156.743);
		--color-green-500: oklch(72.3% .219 149.579);
		--color-green-600: oklch(62.7% .194 149.214);
		--color-green-700: oklch(52.7% .154 150.069);
		--color-green-800: oklch(44.8% .119 151.328);
		--color-blue-50: oklch(97% .014 254.604);
		--color-blue-100: oklch(93.2% .032 255.585);
		--color-blue-200: oklch(88.2% .059 254.128);
		--color-blue-400: oklch(70.7% .165 254.624);
		--color-blue-500: oklch(62.3% .214 259.815);
		--color-blue-600: oklch(54.6% .245 262.881);
		--color-blue-700: oklch(48.8% .243 264.376);
		--color-blue-800: oklch(42.4% .199 265.638);
		--color-purple-600: oklch(55.8% .288 302.321);
		--color-purple-700: oklch(49.6% .265 301.924);
		--color-gray-50: #f9fafb;
		--color-gray-100: #f2f4f6;
		--color-gray-200: #e5e7eb;
		--color-gray-300: #d1d5db;
		--color-gray-400: #9ca3af;
		--color-gray-500: #6b7280;
		--color-gray-600: #4b5563;
		--color-gray-700: #374151;
		--color-gray-800: #1f2937;
		--color-gray-900: #111827;
		--color-black: #000;
		--color-white: #fff;
		--spacing: .25rem;
		--container-sm: 24rem;
		--container-md: 28rem;
		--container-lg: 32rem;
		--container-2xl: 42rem;
		--container-3xl: 48rem;
		--container-4xl: 56rem;
		--container-6xl: 72rem;
		--container-7xl: 80rem;
		--text-xs: .75rem;
		--text-xs--line-height: calc(1/.75);
		--text-sm: .875rem;
		--text-sm--line-height: calc(1.25/.875);
		--text-base: 1rem;
		--text-base--line-height: 1.5;
		--text-lg: 1.125rem;
		--text-lg--line-height: calc(1.75/1.125);
		--text-xl: 1.25rem;
		--text-xl--line-height: calc(1.75/1.25);
		--text-2xl: 1.5rem;
		--text-2xl--line-height: calc(2/1.5);
		--text-3xl: 1.875rem;
		--text-3xl--line-height: 1.2;
		--text-4xl: 2.25rem;
		--text-4xl--line-height: calc(2.5/2.25);
		--text-5xl: 3rem;
		--text-5xl--line-height: 1;
		--text-6xl: 3.75rem;
		--text-6xl--line-height: 1;
		--text-9xl: 8rem;
		--text-9xl--line-height: 1;
		--font-weight-normal: 400;
		--font-weight-medium: 500;
		--font-weight-semibold: 600;
		--font-weight-bold: 700;
		--font-weight-extrabold: 800;
		--tracking-wide: .025em;
		--tracking-wider: .05em;
		--leading-tight: 1.25;
		--leading-relaxed: 1.625;
		--radius-sm: .25rem;
		--radius-md: .375rem;
		--radius-lg: .5rem;
		--shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;
		--ease-in-out: cubic-bezier(.4, 0, .2, 1);
		--animate-spin: spin 1s linear infinite;
		--default-transition-duration: .15s;
		--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
		--default-font-family: var(--font-sans);
		--default-mono-font-family: var(--font-mono);
		--color-chemelex-blue: #004976;
		--color-chemelex-lightblue: #2981c9;
		--color-chemelex-darkblue: #003a5f;
		--color-chemelex-grey: #f2f2f2;
		--color-chemelex-text-dark: #333;
		--color-chemelex-text-light: #666;
		--pc-rich-black: #000;
		--pc-light-grey: #f1f2f2;
		--pa-steel-blue: #46768a;
		--color-primary-500: #004976
	}
}
@layer base {
	*, :after, :before, ::backdrop {
		box-sizing: border-box;
		border: 0 solid;
		margin: 0;
		padding: 0
	}
	::file-selector-button {
		box-sizing: border-box;
		border: 0 solid;
		margin: 0;
		padding: 0
	}
	html, :host {
		-webkit-text-size-adjust: 100%;
		-moz-tab-size: 4;
		tab-size: 4;
		line-height: 1.5;
		font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
		font-feature-settings: var(--default-font-feature-settings, normal);
		font-variation-settings: var(--default-font-variation-settings, normal);
		-webkit-tap-highlight-color: transparent
	}
	hr {
		height: 0;
		color: inherit;
		border-top-width: 1px
	}
	abbr:where([title]) {
		-webkit-text-decoration: underline dotted;
		text-decoration: underline dotted
	}
	h1, h2, h3, h4, h5, h6 {
		font-size: inherit;
		font-weight: inherit
	}
	a {
		color: inherit;
		-webkit-text-decoration: inherit;
		text-decoration: inherit
	}
	b, strong {
		font-weight: bolder
	}
	code, kbd, samp, pre {
		font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
		font-feature-settings: var(--default-mono-font-feature-settings, normal);
		font-variation-settings: var(--default-mono-font-variation-settings, normal);
		font-size: 1em
	}
	small {
		font-size: 80%
	}
	sub, sup {
		vertical-align: baseline;
		font-size: 75%;
		line-height: 0;
		position: relative
	}
	sub {
		bottom: -.25em
	}
	sup {
		top: -.5em
	}
	table {
		text-indent: 0;
		border-color: inherit;
		border-collapse: collapse
	}
	:-moz-focusring {
		outline: auto
	}
	progress {
		vertical-align: baseline
	}
	summary {
		display: list-item
	}
	ol, ul, menu {
		list-style: none
	}
	img, svg, video, canvas, audio, iframe, embed, object {
		vertical-align: middle;
		display: block
	}
	img, video {
		max-width: 100%;
		height: auto
	}
	button, input, select, optgroup, textarea {
		font: inherit;
		font-feature-settings: inherit;
		font-variation-settings: inherit;
		letter-spacing: inherit;
		color: inherit;
		opacity: 1;
		background-color: #0000;
		border-radius: 0
	}
	::file-selector-button {
		font: inherit;
		font-feature-settings: inherit;
		font-variation-settings: inherit;
		letter-spacing: inherit;
		color: inherit;
		opacity: 1;
		background-color: #0000;
		border-radius: 0
	}
	:where(select:is([multiple], [size])) optgroup {
		font-weight: bolder
	}
	:where(select:is([multiple], [size])) optgroup option {
		padding-inline-start: 20px
	}
	::file-selector-button {
		margin-inline-end: 4px
	}
	::placeholder {
		opacity: 1
	}
	@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
		::placeholder {
			color: currentColor
		}
		@supports (color:color-mix(in lab, red, red)) {
			::placeholder {
				color: color-mix(in oklab, currentcolor 50%, transparent)
			}
		}
	}
	textarea {
		resize: vertical
	}
	::-webkit-search-decoration {
		-webkit-appearance: none
	}
	::-webkit-date-and-time-value {
		min-height: 1lh;
		text-align: inherit
	}
	::-webkit-datetime-edit {
		display: inline-flex
	}
	::-webkit-datetime-edit-fields-wrapper {
		padding: 0
	}
	::-webkit-datetime-edit {
		padding-block: 0
	}
	::-webkit-datetime-edit-year-field {
		padding-block: 0
	}
	::-webkit-datetime-edit-month-field {
		padding-block: 0
	}
	::-webkit-datetime-edit-day-field {
		padding-block: 0
	}
	::-webkit-datetime-edit-hour-field {
		padding-block: 0
	}
	::-webkit-datetime-edit-minute-field {
		padding-block: 0
	}
	::-webkit-datetime-edit-second-field {
		padding-block: 0
	}
	::-webkit-datetime-edit-millisecond-field {
		padding-block: 0
	}
	::-webkit-datetime-edit-meridiem-field {
		padding-block: 0
	}
	:-moz-ui-invalid {
		box-shadow: none
	}
	button, input:where([type=button], [type=reset], [type=submit]) {
		-webkit-appearance: button;
		-moz-appearance: button;
		appearance: button
	}
	::file-selector-button {
		-webkit-appearance: button;
		-moz-appearance: button;
		appearance: button
	}
	::-webkit-inner-spin-button {
		height: auto
	}
	::-webkit-outer-spin-button {
		height: auto
	}
	[hidden]:where(:not([hidden=until-found])) {
		display: none!important
	}
}
@layer components {
	.btn {
		border-radius: .375rem;
		padding: .5rem 1rem;
		font-weight: 500;
		transition-property: color, background-color, border-color;
		transition-duration: .2s
	}
	.btn:focus {
		ring-width: 2px;
		ring-opacity: 50%;
		outline: none
	}
	.btn-primary {
		color: #fff;
		background-color: #004976;
		border: 1px solid #004976
	}
	.btn-primary:hover {
		background-color: #003a5f
	}
	.btn-primary:focus {
		ring-color: #93c5fd
	}
	.btn-outlined {
		color: #004976;
		background-color: #0000;
		border: 1px solid #004976
	}
	.btn-outlined:hover {
		background-color: #eff6ff
	}
	.btn-outlined:focus {
		ring-color: #93c5fd
	}
	.btn-text {
		color: #004976;
		background-color: #0000;
		border: none
	}
	.btn-text:hover {
		background-color: #eff6ff
	}
	.btn-text:focus {
		ring-color: #93c5fd
	}
	.card {
		background-color: #fff;
		border: 1px solid #e5e7eb;
		border-radius: .5rem;
		overflow: hidden;
		box-shadow: 0 1px 3px #0000001a, 0 1px 2px #0000000f
	}
	.card-header {
		border-bottom: 1px solid #e5e7eb;
		padding: 1rem;
		font-weight: 500
	}
	.card-body {
		padding: 1rem
	}
	.card-footer {
		background-color: #f9fafb;
		border-top: 1px solid #e5e7eb;
		padding: 1rem
	}
	.form-input {
		border: 1px solid #d1d5db;
		border-radius: .375rem;
		width: 100%;
		padding: .5rem .75rem;
		box-shadow: 0 1px 2px #0000000d
	}
	.form-input:focus {
		ring-width: 2px;
		ring-color: #dbeafe;
		border-color: #004976;
		outline: none
	}
	.dropdown {
		display: inline-block;
		position: relative
	}
	.dropdown-menu {
		z-index: 10;
		color: #374151;
		background-color: #fff;
		border: 1px solid #e5e7eb;
		border-radius: .375rem;
		width: 14rem;
		margin-top: .25rem;
		padding-top: .25rem;
		padding-bottom: .25rem;
		position: absolute;
		box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d
	}
	.dropdown-item {
		padding: .5rem 1rem;
		display: block
	}
	.dropdown-item:hover {
		background-color: #f9fafb
	}
	.dropdown-item {
		cursor: pointer
	}
	.table-container {
		border: 1px solid #e5e7eb;
		border-radius: .5rem;
		width: 100%;
		overflow: hidden
	}
	.table {
		border-collapse: separate;
		border-spacing: 0;
		min-width: 100%
	}
	.table-header {
		background-color: #f9fafb
	}
	.table-header-cell {
		text-align: left;
		color: #6b7280;
		text-transform: uppercase;
		letter-spacing: .05em;
		padding: .75rem 1.5rem;
		font-size: .75rem;
		font-weight: 500
	}
	.table-body {
		background-color: #fff
	}
	.table-row:hover {
		background-color: #f9fafb
	}
	.table-row {
		border-top: 1px solid #e5e7eb
	}
	.table-cell {
		white-space: nowrap;
		padding: 1rem 1.5rem
	}
	.dialog-backdrop {
		background-opacity: 25%;
		z-index: 40;
		background-color: #000;
		justify-content: center;
		align-items: center;
		display: flex;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0
	}
	.dialog {
		z-index: 50;
		background-color: #fff;
		border: 1px solid #e5e7eb;
		border-radius: .5rem;
		width: 100%;
		max-width: 28rem;
		margin-left: 1rem;
		margin-right: 1rem;
		overflow: hidden;
		box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a
	}
	.dialog-header {
		border-bottom: 1px solid #e5e7eb;
		justify-content: space-between;
		align-items: center;
		padding: 1rem;
		display: flex
	}
	.dialog-body {
		padding: 1rem
	}
	.dialog-footer {
		background-color: #f9fafb;
		border-top: 1px solid #e5e7eb;
		justify-content: flex-end;
		gap: .5rem;
		padding: 1rem;
		display: flex
	}
	.badge {
		border-radius: 9999px;
		align-items: center;
		padding: .125rem .625rem;
		font-size: .75rem;
		font-weight: 500;
		display: inline-flex
	}
	.badge-success {
		color: #166534;
		background-color: #dcfce7
	}
	.badge-warning {
		color: #713f12;
		background-color: #fef9c3
	}
	.badge-danger {
		color: #991b1b;
		background-color: #fee2e2
	}
	.badge-info {
		color: #1e40af;
		background-color: #dbeafe
	}
	.message {
		border-width: 1px;
		border-radius: .375rem;
		margin-bottom: 1rem;
		padding: 1rem
	}
	.message-info {
		color: #1e40af;
		background-color: #eff6ff;
		border-color: #bfdbfe
	}
	.message-success {
		color: #166534;
		background-color: #f0fdf4;
		border-color: #bbf7d0
	}
	.message-warning {
		color: #713f12;
		background-color: #fefce8;
		border-color: #faf089
	}
	.message-error {
		color: #991b1b;
		background-color: #fef2f2;
		border-color: #fecaca
	}
}
@layer utilities {
	.pointer-events-none {
		pointer-events: none
	}
	.invisible {
		visibility: hidden
	}
	.visible {
		visibility: visible
	}
	.sr-only {
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		position: absolute;
		overflow: hidden
	}
	.absolute {
		position: absolute
	}
	.fixed {
		position: fixed
	}
	.relative {
		position: relative
	}
	.static {
		position: static
	}
	.sticky {
		position: sticky
	}
	.inset-0 {
		inset: calc(var(--spacing)*0)
	}
	.inset-x-0 {
		inset-inline: calc(var(--spacing)*0)
	}
	.inset-y-0 {
		inset-block: calc(var(--spacing)*0)
	}
	.top-0 {
		top: calc(var(--spacing)*0)
	}
	.top-1\/2 {
		top: 50%
	}
	.top-2 {
		top: calc(var(--spacing)*2)
	}
	.top-3 {
		top: calc(var(--spacing)*3)
	}
	.top-4 {
		top: calc(var(--spacing)*4)
	}
	.top-6 {
		top: calc(var(--spacing)*6)
	}
	.top-\[150px\] {
		top: 150px
	}
	.top-full {
		top: 100%
	}
	.right-0 {
		right: calc(var(--spacing)*0)
	}
	.right-2 {
		right: calc(var(--spacing)*2)
	}
	.right-3 {
		right: calc(var(--spacing)*3)
	}
	.right-4 {
		right: calc(var(--spacing)*4)
	}
	.right-6 {
		right: calc(var(--spacing)*6)
	}
	.right-8 {
		right: calc(var(--spacing)*8)
	}
	.bottom-0 {
		bottom: calc(var(--spacing)*0)
	}
	.bottom-4 {
		bottom: calc(var(--spacing)*4)
	}
	.bottom-6 {
		bottom: calc(var(--spacing)*6)
	}
	.bottom-8 {
		bottom: calc(var(--spacing)*8)
	}
	.left-0 {
		left: calc(var(--spacing)*0)
	}
	.left-1\/2 {
		left: 50%
	}
	.left-4 {
		left: calc(var(--spacing)*4)
	}
	.left-6 {
		left: calc(var(--spacing)*6)
	}
	.z-0 {
		z-index: 0
	}
	.z-10 {
		z-index: 10
	}
	.z-40 {
		z-index: 40
	}
	.z-50 {
		z-index: 50
	}
	.z-\[1000\] {
		z-index: 1000
	}
	.z-\[100000\] {
		z-index: 100000
	}
	.col-span-1 {
		grid-column: span 1/span 1
	}
	.col-span-3 {
		grid-column: span 3/span 3
	}
	.container {
		width: 100%
	}
	@media (min-width:40rem) {
		.container {
			max-width: 40rem
		}
	}
	@media (min-width:48rem) {
		.container {
			max-width: 48rem
		}
	}
	@media (min-width:64rem) {
		.container {
			max-width: 64rem
		}
	}
	@media (min-width:80rem) {
		.container {
			max-width: 80rem
		}
	}
	@media (min-width:96rem) {
		.container {
			max-width: 96rem
		}
	}
	.m-0 {
		margin: calc(var(--spacing)*0)
	}
	.-mx-2 {
		margin-inline: calc(var(--spacing)*-2)
	}
	.-mx-4 {
		margin-inline: calc(var(--spacing)*-4)
	}
	.mx-auto {
		margin-inline: auto
	}
	.my-3 {
		margin-block: calc(var(--spacing)*3)
	}
	.my-4 {
		margin-block: calc(var(--spacing)*4)
	}
	.-mt-32 {
		margin-top: calc(var(--spacing)*-32)
	}
	.mt-1 {
		margin-top: calc(var(--spacing)*1)
	}
	.mt-2 {
		margin-top: calc(var(--spacing)*2)
	}
	.mt-3 {
		margin-top: calc(var(--spacing)*3)
	}
	.mt-4 {
		margin-top: calc(var(--spacing)*4)
	}
	.mt-6 {
		margin-top: calc(var(--spacing)*6)
	}
	.mt-16 {
		margin-top: calc(var(--spacing)*16)
	}
	.mt-auto {
		margin-top: auto
	}
	.mr-1 {
		margin-right: calc(var(--spacing)*1)
	}
	.mr-2 {
		margin-right: calc(var(--spacing)*2)
	}
	.mr-4 {
		margin-right: calc(var(--spacing)*4)
	}
	.-mb-px {
		margin-bottom: -1px
	}
	.mb-1 {
		margin-bottom: calc(var(--spacing)*1)
	}
	.mb-2 {
		margin-bottom: calc(var(--spacing)*2)
	}
	.mb-3 {
		margin-bottom: calc(var(--spacing)*3)
	}
	.mb-4 {
		margin-bottom: calc(var(--spacing)*4)
	}
	.mb-6 {
		margin-bottom: calc(var(--spacing)*6)
	}
	.mb-8 {
		margin-bottom: calc(var(--spacing)*8)
	}
	.mb-12 {
		margin-bottom: calc(var(--spacing)*12)
	}
	.mb-16 {
		margin-bottom: calc(var(--spacing)*16)
	}
	.ml-0\.5 {
		margin-left: calc(var(--spacing)*.5)
	}
	.ml-1 {
		margin-left: calc(var(--spacing)*1)
	}
	.ml-2 {
		margin-left: calc(var(--spacing)*2)
	}
	.ml-3 {
		margin-left: calc(var(--spacing)*3)
	}
	.ml-4 {
		margin-left: calc(var(--spacing)*4)
	}
	.block {
		display: block
	}
	.contents {
		display: contents
	}
	.flex {
		display: flex
	}
	.grid {
		display: grid
	}
	.hidden {
		display: none
	}
	.inline {
		display: inline
	}
	.inline-block {
		display: inline-block
	}
	.inline-flex {
		display: inline-flex
	}
	.table {
		display: table
	}
	.aspect-\[4\/3\] {
		aspect-ratio: 4/3
	}
	.h-1 {
		height: calc(var(--spacing)*1)
	}
	.h-1\/2 {
		height: 50%
	}
	.h-2 {
		height: calc(var(--spacing)*2)
	}
	.h-3 {
		height: calc(var(--spacing)*3)
	}
	.h-4 {
		height: calc(var(--spacing)*4)
	}
	.h-5 {
		height: calc(var(--spacing)*5)
	}
	.h-6 {
		height: calc(var(--spacing)*6)
	}
	.h-8 {
		height: calc(var(--spacing)*8)
	}
	.h-10 {
		height: calc(var(--spacing)*10)
	}
	.h-12 {
		height: calc(var(--spacing)*12)
	}
	.h-16 {
		height: calc(var(--spacing)*16)
	}
	.h-24 {
		height: calc(var(--spacing)*24)
	}
	.h-32 {
		height: calc(var(--spacing)*32)
	}
	.h-48 {
		height: calc(var(--spacing)*48)
	}
	.h-64 {
		height: calc(var(--spacing)*64)
	}
	.h-96 {
		height: calc(var(--spacing)*96)
	}
	.h-\[400px\] {
		height: 400px
	}
	.h-\[500px\] {
		height: 500px
	}
	.h-\[600px\] {
		height: 600px
	}
	.h-\[calc\(100\%-2rem\)\] {
		height: calc(100% - 2rem)
	}
	.h-auto {
		height: auto
	}
	.h-full {
		height: 100%
	}
	.max-h-0 {
		max-height: calc(var(--spacing)*0)
	}
	.max-h-\[80vh\] {
		max-height: 80vh
	}
	.max-h-\[90vh\] {
		max-height: 90vh
	}
	.max-h-screen {
		max-height: 100vh
	}
	.min-h-\[200px\] {
		min-height: 200px
	}
	.min-h-screen {
		min-height: 100vh
	}
	.w-1\/2 {
		width: 50%
	}
	.w-1\/4 {
		width: 25%
	}
	.w-1\/5 {
		width: 20%
	}
	.w-1\/6 {
		width: 16.6667%
	}
	.w-2 {
		width: calc(var(--spacing)*2)
	}
	.w-2\/5 {
		width: 40%
	}
	.w-3 {
		width: calc(var(--spacing)*3)
	}
	.w-4 {
		width: calc(var(--spacing)*4)
	}
	.w-5 {
		width: calc(var(--spacing)*5)
	}
	.w-6 {
		width: calc(var(--spacing)*6)
	}
	.w-7 {
		width: calc(var(--spacing)*7)
	}
	.w-10 {
		width: calc(var(--spacing)*10)
	}
	.w-12 {
		width: calc(var(--spacing)*12)
	}
	.w-16 {
		width: calc(var(--spacing)*16)
	}
	.w-20 {
		width: calc(var(--spacing)*20)
	}
	.w-24 {
		width: calc(var(--spacing)*24)
	}
	.w-32 {
		width: calc(var(--spacing)*32)
	}
	.w-40 {
		width: calc(var(--spacing)*40)
	}
	.w-48 {
		width: calc(var(--spacing)*48)
	}
	.w-64 {
		width: calc(var(--spacing)*64)
	}
	.w-72 {
		width: calc(var(--spacing)*72)
	}
	.w-96 {
		width: calc(var(--spacing)*96)
	}
	.w-\[500px\] {
		width: 500px
	}
	.w-auto {
		width: auto
	}
	.w-full {
		width: 100%
	}
	.max-w-2xl {
		max-width: var(--container-2xl)
	}
	.max-w-3\/4 {
		max-width: 75%
	}
	.max-w-3xl {
		max-width: var(--container-3xl)
	}
	.max-w-4xl {
		max-width: var(--container-4xl)
	}
	.max-w-6xl {
		max-width: var(--container-6xl)
	}
	.max-w-7xl {
		max-width: var(--container-7xl)
	}
	.max-w-full {
		max-width: 100%
	}
	.max-w-lg {
		max-width: var(--container-lg)
	}
	.max-w-md {
		max-width: var(--container-md)
	}
	.max-w-none {
		max-width: none
	}
	.max-w-prose {
		max-width: 65ch
	}
	.max-w-sm {
		max-width: var(--container-sm)
	}
	.min-w-\[80px\] {
		min-width: 80px
	}
	.min-w-full {
		min-width: 100%
	}
	.flex-1 {
		flex: 1
	}
	.flex-shrink-0 {
		flex-shrink: 0
	}
	.shrink {
		flex-shrink: 1
	}
	.flex-grow {
		flex-grow: 1
	}
	.border-collapse {
		border-collapse: collapse
	}
	.origin-left {
		transform-origin: 0
	}
	.-translate-x-1\/2 {
		--tw-translate-x: -50%;
		translate: var(--tw-translate-x)var(--tw-translate-y)
	}
	.-translate-y-1\/2 {
		--tw-translate-y: -50%;
		translate: var(--tw-translate-x)var(--tw-translate-y)
	}
	.translate-y-0 {
		--tw-translate-y: calc(var(--spacing)*0);
		translate: var(--tw-translate-x)var(--tw-translate-y)
	}
	.translate-y-2 {
		--tw-translate-y: calc(var(--spacing)*2);
		translate: var(--tw-translate-x)var(--tw-translate-y)
	}
	.scale-x-0 {
		--tw-scale-x: 0%;
		scale: var(--tw-scale-x)var(--tw-scale-y)
	}
	.rotate-180 {
		rotate: 180deg
	}
	.transform {
		transform: var(--tw-rotate-x, )var(--tw-rotate-y, )var(--tw-rotate-z, )var(--tw-skew-x, )var(--tw-skew-y, )
	}
	.animate-spin {
		animation: var(--animate-spin)
	}
	.cursor-pointer {
		cursor: pointer
	}
	.resize {
		resize: both
	}
	.resize-none {
		resize: none
	}
	.scroll-mt-\[200px\] {
		scroll-margin-top: 200px
	}
	.list-inside {
		list-style-position: inside
	}
	.list-decimal {
		list-style-type: decimal
	}
	.list-disc {
		list-style-type: disc
	}
	.list-none {
		list-style-type: none
	}
	.appearance-none {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none
	}
	.grid-cols-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr))
	}
	.grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}
	.flex-col {
		flex-direction: column
	}
	.flex-col-reverse {
		flex-direction: column-reverse
	}
	.flex-row {
		flex-direction: row
	}
	.flex-row-reverse {
		flex-direction: row-reverse
	}
	.flex-wrap {
		flex-wrap: wrap
	}
	.items-center {
		align-items: center
	}
	.items-end {
		align-items: flex-end
	}
	.items-start {
		align-items: flex-start
	}
	.justify-between {
		justify-content: space-between
	}
	.justify-center {
		justify-content: center
	}
	.justify-end {
		justify-content: flex-end
	}
	.gap-1 {
		gap: calc(var(--spacing)*1)
	}
	.gap-2 {
		gap: calc(var(--spacing)*2)
	}
	.gap-3 {
		gap: calc(var(--spacing)*3)
	}
	.gap-4 {
		gap: calc(var(--spacing)*4)
	}
	.gap-5 {
		gap: calc(var(--spacing)*5)
	}
	.gap-6 {
		gap: calc(var(--spacing)*6)
	}
	.gap-8 {
		gap: calc(var(--spacing)*8)
	}
	.gap-12 {
		gap: calc(var(--spacing)*12)
	}
	.gap-16 {
		gap: calc(var(--spacing)*16)
	}
	:where(.space-y-1>:not(:last-child)) {
		--tw-space-y-reverse: 0;
		margin-block-start: calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));
		margin-block-end: calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))
	}
	:where(.space-y-2>:not(:last-child)) {
		--tw-space-y-reverse: 0;
		margin-block-start: calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));
		margin-block-end: calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))
	}
	:where(.space-y-3>:not(:last-child)) {
		--tw-space-y-reverse: 0;
		margin-block-start: calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));
		margin-block-end: calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))
	}
	:where(.space-y-4>:not(:last-child)) {
		--tw-space-y-reverse: 0;
		margin-block-start: calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));
		margin-block-end: calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))
	}
	:where(.space-y-6>:not(:last-child)) {
		--tw-space-y-reverse: 0;
		margin-block-start: calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));
		margin-block-end: calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))
	}
	:where(.space-x-1>:not(:last-child)) {
		--tw-space-x-reverse: 0;
		margin-inline-start: calc(calc(var(--spacing)*1)*var(--tw-space-x-reverse));
		margin-inline-end: calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-x-reverse)))
	}
	:where(.space-x-2>:not(:last-child)) {
		--tw-space-x-reverse: 0;
		margin-inline-start: calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));
		margin-inline-end: calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))
	}
	:where(.space-x-4>:not(:last-child)) {
		--tw-space-x-reverse: 0;
		margin-inline-start: calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));
		margin-inline-end: calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))
	}
	:where(.space-x-8>:not(:last-child)) {
		--tw-space-x-reverse: 0;
		margin-inline-start: calc(calc(var(--spacing)*8)*var(--tw-space-x-reverse));
		margin-inline-end: calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-x-reverse)))
	}
	.overflow-auto {
		overflow: auto
	}
	.overflow-hidden {
		overflow: hidden
	}
	.overflow-x-auto {
		overflow-x: auto
	}
	.overflow-y-auto {
		overflow-y: auto
	}
	.rounded {
		border-radius: .25rem
	}
	.rounded-full {
		border-radius: 3.40282e38px
	}
	.rounded-lg {
		border-radius: var(--radius-lg)
	}
	.rounded-md {
		border-radius: var(--radius-md)
	}
	.rounded-sm {
		border-radius: var(--radius-sm)
	}
	.rounded-t-lg {
		border-top-left-radius: var(--radius-lg);
		border-top-right-radius: var(--radius-lg)
	}
	.border {
		border-style: var(--tw-border-style);
		border-width: 1px
	}
	.border-0 {
		border-style: var(--tw-border-style);
		border-width: 0
	}
	.border-2 {
		border-style: var(--tw-border-style);
		border-width: 2px
	}
	.border-t {
		border-top-style: var(--tw-border-style);
		border-top-width: 1px
	}
	.border-r {
		border-right-style: var(--tw-border-style);
		border-right-width: 1px
	}
	.border-b {
		border-bottom-style: var(--tw-border-style);
		border-bottom-width: 1px
	}
	.border-b-2 {
		border-bottom-style: var(--tw-border-style);
		border-bottom-width: 2px
	}
	.border-l {
		border-left-style: var(--tw-border-style);
		border-left-width: 1px
	}
	.border-l-2 {
		border-left-style: var(--tw-border-style);
		border-left-width: 2px
	}
	.border-blue-200 {
		border-color: var(--color-blue-200)
	}
	.border-blue-500 {
		border-color: var(--color-blue-500)
	}
	.border-blue-600 {
		border-color: var(--color-blue-600)
	}
	.border-blue-700 {
		border-color: var(--color-blue-700)
	}
	.border-chemelex-blue {
		border-color: var(--color-chemelex-blue)
	}
	.border-gray-100 {
		border-color: var(--color-gray-100)
	}
	.border-gray-200 {
		border-color: var(--color-gray-200)
	}
	.border-gray-300 {
		border-color: var(--color-gray-300)
	}
	.border-gray-700 {
		border-color: var(--color-gray-700)
	}
	.border-red-200 {
		border-color: var(--color-red-200)
	}
	.border-red-300 {
		border-color: var(--color-red-300)
	}
	.border-transparent {
		border-color: #0000
	}
	.border-yellow-200 {
		border-color: var(--color-yellow-200)
	}
	.border-t-transparent {
		border-top-color: #0000
	}
	.bg-\[\#46768A\] {
		background-color: #46768a
	}
	.bg-\[--pa-steel-blue\] {
		background-color: --pa-steel-blue
	}
	.bg-\[var\(--pa-steel-blue\)\] {
		background-color: var(--pa-steel-blue)
	}
	.bg-\[var\(--pc-light-grey\)\] {
		background-color: var(--pc-light-grey)
	}
	.bg-black {
		background-color: var(--color-black)
	}
	.bg-blue-50 {
		background-color: var(--color-blue-50)
	}
	.bg-blue-100 {
		background-color: var(--color-blue-100)
	}
	.bg-blue-500 {
		background-color: var(--color-blue-500)
	}
	.bg-blue-600 {
		background-color: var(--color-blue-600)
	}
	.bg-chemelex-blue {
		background-color: var(--color-chemelex-blue)
	}
	.bg-chemelex-grey {
		background-color: var(--color-chemelex-grey)
	}
	.bg-gray-50 {
		background-color: var(--color-gray-50)
	}
	.bg-gray-100 {
		background-color: var(--color-gray-100)
	}
	.bg-gray-200 {
		background-color: var(--color-gray-200)
	}
	.bg-gray-600 {
		background-color: var(--color-gray-600)
	}
	.bg-green-100 {
		background-color: var(--color-green-100)
	}
	.bg-green-500 {
		background-color: var(--color-green-500)
	}
	.bg-green-600 {
		background-color: var(--color-green-600)
	}
	.bg-orange-600 {
		background-color: var(--color-orange-600)
	}
	.bg-purple-600 {
		background-color: var(--color-purple-600)
	}
	.bg-red-100 {
		background-color: var(--color-red-100)
	}
	.bg-red-500 {
		background-color: var(--color-red-500)
	}
	.bg-red-600 {
		background-color: var(--color-red-600)
	}
	.bg-transparent {
		background-color: #0000
	}
	.bg-white {
		background-color: var(--color-white)
	}
	.bg-yellow-100 {
		background-color: var(--color-yellow-100)
	}
	.bg-gradient-to-t {
		--tw-gradient-position: to top in oklab;
		background-image: linear-gradient(var(--tw-gradient-stops))
	}
	.from-black\/40 {
		--tw-gradient-from: #0006
	}
	@supports (color:color-mix(in lab, red, red)) {
		.from-black\/40 {
			--tw-gradient-from: color-mix(in oklab, var(--color-black)40%, transparent)
		}
	}
	.from-black\/40 {
		--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
	}
	.from-black\/60 {
		--tw-gradient-from: #0009
	}
	@supports (color:color-mix(in lab, red, red)) {
		.from-black\/60 {
			--tw-gradient-from: color-mix(in oklab, var(--color-black)60%, transparent)
		}
	}
	.from-black\/60 {
		--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
	}
	.to-transparent {
		--tw-gradient-to: transparent;
		--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
	}
	.object-contain {
		object-fit: contain
	}
	.object-cover {
		object-fit: cover
	}
	.p-0 {
		padding: calc(var(--spacing)*0)
	}
	.p-1 {
		padding: calc(var(--spacing)*1)
	}
	.p-2 {
		padding: calc(var(--spacing)*2)
	}
	.p-3 {
		padding: calc(var(--spacing)*3)
	}
	.p-4 {
		padding: calc(var(--spacing)*4)
	}
	.p-6 {
		padding: calc(var(--spacing)*6)
	}
	.p-8 {
		padding: calc(var(--spacing)*8)
	}
	.px-1 {
		padding-inline: calc(var(--spacing)*1)
	}
	.px-2 {
		padding-inline: calc(var(--spacing)*2)
	}
	.px-3 {
		padding-inline: calc(var(--spacing)*3)
	}
	.px-4 {
		padding-inline: calc(var(--spacing)*4)
	}
	.px-6 {
		padding-inline: calc(var(--spacing)*6)
	}
	.px-8 {
		padding-inline: calc(var(--spacing)*8)
	}
	.py-1 {
		padding-block: calc(var(--spacing)*1)
	}
	.py-1\.5 {
		padding-block: calc(var(--spacing)*1.5)
	}
	.py-2 {
		padding-block: calc(var(--spacing)*2)
	}
	.py-3 {
		padding-block: calc(var(--spacing)*3)
	}
	.py-4 {
		padding-block: calc(var(--spacing)*4)
	}
	.py-6 {
		padding-block: calc(var(--spacing)*6)
	}
	.py-8 {
		padding-block: calc(var(--spacing)*8)
	}
	.py-12 {
		padding-block: calc(var(--spacing)*12)
	}
	.py-20 {
		padding-block: calc(var(--spacing)*20)
	}
	.py-24 {
		padding-block: calc(var(--spacing)*24)
	}
	.py-32 {
		padding-block: calc(var(--spacing)*32)
	}
	.pt-2 {
		padding-top: calc(var(--spacing)*2)
	}
	.pt-4 {
		padding-top: calc(var(--spacing)*4)
	}
	.pt-5 {
		padding-top: calc(var(--spacing)*5)
	}
	.pt-6 {
		padding-top: calc(var(--spacing)*6)
	}
	.pt-36 {
		padding-top: calc(var(--spacing)*36)
	}
	.pt-\[56\.25\%\] {
		padding-top: 56.25%
	}
	.pr-4 {
		padding-right: calc(var(--spacing)*4)
	}
	.pb-4 {
		padding-bottom: calc(var(--spacing)*4)
	}
	.pb-6 {
		padding-bottom: calc(var(--spacing)*6)
	}
	.pb-8 {
		padding-bottom: calc(var(--spacing)*8)
	}
	.pb-20 {
		padding-bottom: calc(var(--spacing)*20)
	}
	.pl-2 {
		padding-left: calc(var(--spacing)*2)
	}
	.pl-3 {
		padding-left: calc(var(--spacing)*3)
	}
	.pl-4 {
		padding-left: calc(var(--spacing)*4)
	}
	.pl-5 {
		padding-left: calc(var(--spacing)*5)
	}
	.pl-6 {
		padding-left: calc(var(--spacing)*6)
	}
	.pl-8 {
		padding-left: calc(var(--spacing)*8)
	}
	.pl-10 {
		padding-left: calc(var(--spacing)*10)
	}
	.text-center {
		text-align: center
	}
	.text-justify {
		text-align: justify
	}
	.text-left {
		text-align: left
	}
	.text-right {
		text-align: right
	}
	.align-bottom {
		vertical-align: bottom
	}
	.align-top {
		vertical-align: top
	}
	.font-mono {
		font-family: var(--font-mono)
	}
	.text-2xl {
		font-size: var(--text-2xl);
		line-height: var(--tw-leading, var(--text-2xl--line-height))
	}
	.text-3xl {
		font-size: var(--text-3xl);
		line-height: var(--tw-leading, var(--text-3xl--line-height))
	}
	.text-4xl {
		font-size: var(--text-4xl);
		line-height: var(--tw-leading, var(--text-4xl--line-height))
	}
	.text-9xl {
		font-size: var(--text-9xl);
		line-height: var(--tw-leading, var(--text-9xl--line-height))
	}
	.text-base {
		font-size: var(--text-base);
		line-height: var(--tw-leading, var(--text-base--line-height))
	}
	.text-lg {
		font-size: var(--text-lg);
		line-height: var(--tw-leading, var(--text-lg--line-height))
	}
	.text-sm {
		font-size: var(--text-sm);
		line-height: var(--tw-leading, var(--text-sm--line-height))
	}
	.text-xl {
		font-size: var(--text-xl);
		line-height: var(--tw-leading, var(--text-xl--line-height))
	}
	.text-xs {
		font-size: var(--text-xs);
		line-height: var(--tw-leading, var(--text-xs--line-height))
	}
	.text-\[20px\] {
		font-size: 20px
	}
	.text-\[24px\] {
		font-size: 24px
	}
	.leading-6 {
		--tw-leading: calc(var(--spacing)*6);
		line-height: calc(var(--spacing)*6)
	}
	.leading-relaxed {
		--tw-leading: var(--leading-relaxed);
		line-height: var(--leading-relaxed)
	}
	.leading-tight {
		--tw-leading: var(--leading-tight);
		line-height: var(--leading-tight)
	}
	.font-bold {
		--tw-font-weight: var(--font-weight-bold);
		font-weight: var(--font-weight-bold)
	}
	.font-extrabold {
		--tw-font-weight: var(--font-weight-extrabold);
		font-weight: var(--font-weight-extrabold)
	}
	.font-medium {
		--tw-font-weight: var(--font-weight-medium);
		font-weight: var(--font-weight-medium)
	}
	.font-normal {
		--tw-font-weight: var(--font-weight-normal);
		font-weight: var(--font-weight-normal)
	}
	.font-semibold {
		--tw-font-weight: var(--font-weight-semibold);
		font-weight: var(--font-weight-semibold)
	}
	.tracking-wide {
		--tw-tracking: var(--tracking-wide);
		letter-spacing: var(--tracking-wide)
	}
	.tracking-wider {
		--tw-tracking: var(--tracking-wider);
		letter-spacing: var(--tracking-wider)
	}
	.break-all {
		word-break: break-all
	}
	.whitespace-nowrap {
		white-space: nowrap
	}
	.whitespace-pre-line {
		white-space: pre-line
	}
	.\!text-\[--pc-rich-black\] {
		color: --pc-rich-black!important
	}
	.text-blue-400 {
		color: var(--color-blue-400)
	}
	.text-blue-500 {
		color: var(--color-blue-500)
	}
	.text-blue-600 {
		color: var(--color-blue-600)
	}
	.text-blue-700 {
		color: var(--color-blue-700)
	}
	.text-blue-800 {
		color: var(--color-blue-800)
	}
	.text-chemelex-blue {
		color: var(--color-chemelex-blue)
	}
	.text-chemelex-darkblue {
		color: var(--color-chemelex-darkblue)
	}
	.text-chemelex-lightblue {
		color: var(--color-chemelex-lightblue)
	}
	.text-chemelex-text-dark {
		color: var(--color-chemelex-text-dark)
	}
	.text-chemelex-text-light {
		color: var(--color-chemelex-text-light)
	}
	.text-gray-100 {
		color: var(--color-gray-100)
	}
	.text-gray-200 {
		color: var(--color-gray-200)
	}
	.text-gray-300 {
		color: var(--color-gray-300)
	}
	.text-gray-400 {
		color: var(--color-gray-400)
	}
	.text-gray-500 {
		color: var(--color-gray-500)
	}
	.text-gray-600 {
		color: var(--color-gray-600)
	}
	.text-gray-700 {
		color: var(--color-gray-700)
	}
	.text-gray-800 {
		color: var(--color-gray-800)
	}
	.text-gray-900 {
		color: var(--color-gray-900)
	}
	.text-green-600 {
		color: var(--color-green-600)
	}
	.text-green-800 {
		color: var(--color-green-800)
	}
	.text-red-500 {
		color: var(--color-red-500)
	}
	.text-red-600 {
		color: var(--color-red-600)
	}
	.text-red-700 {
		color: var(--color-red-700)
	}
	.text-white {
		color: var(--color-white)
	}
	.text-yellow-400 {
		color: var(--color-yellow-400)
	}
	.text-yellow-600 {
		color: var(--color-yellow-600)
	}
	.text-yellow-800 {
		color: var(--color-yellow-800)
	}
	.lowercase {
		text-transform: lowercase
	}
	.uppercase {
		text-transform: uppercase
	}
	.italic {
		font-style: italic
	}
	.no-underline {
		text-decoration-line: none
	}
	.underline {
		text-decoration-line: underline
	}
	.opacity-0 {
		opacity: 0
	}
	.opacity-40 {
		opacity: .4
	}
	.opacity-100 {
		opacity: 1
	}
	.shadow {
		--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px 0 var(--tw-shadow-color, #0000000f);
		box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
	}
	.shadow-lg {
		--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -2px var(--tw-shadow-color, #0000000d);
		box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
	}
	.shadow-md {
		--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -1px var(--tw-shadow-color, #0000000f);
		box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
	}
	.shadow-sm {
		--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
		box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
	}
	.shadow-xl {
		--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 10px 10px -5px var(--tw-shadow-color, #0000000a);
		box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
	}
	.blur {
		--tw-blur: blur(8px);
		filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
	}
	.transition {
		transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
		transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
		transition-duration: var(--tw-duration, var(--default-transition-duration))
	}
	.transition-all {
		transition-property: all;
		transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
		transition-duration: var(--tw-duration, var(--default-transition-duration))
	}
	.transition-colors {
		transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
		transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
		transition-duration: var(--tw-duration, var(--default-transition-duration))
	}
	.transition-opacity {
		transition-property: opacity;
		transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
		transition-duration: var(--tw-duration, var(--default-transition-duration))
	}
	.transition-shadow {
		transition-property: box-shadow;
		transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
		transition-duration: var(--tw-duration, var(--default-transition-duration))
	}
	.transition-transform {
		transition-property: transform, translate, scale, rotate;
		transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
		transition-duration: var(--tw-duration, var(--default-transition-duration))
	}
	.duration-200 {
		--tw-duration: .2s;
		transition-duration: .2s
	}
	.duration-300 {
		--tw-duration: .3s;
		transition-duration: .3s
	}
	.ease-in-out {
		--tw-ease: var(--ease-in-out);
		transition-timing-function: var(--ease-in-out)
	}
	@media (hover:hover) {
		.group-hover\:scale-x-100:is(:where(.group): hover *) {
			--tw-scale-x:100%;
			scale: var(--tw-scale-x)var(--tw-scale-y)
		}
		.group-hover\:opacity-100:is(:where(.group):hover *) {
			opacity: 1
		}
	}
	.last\:border-r-0:last-child {
		border-right-style: var(--tw-border-style);
		border-right-width: 0
	}
	@media (hover:hover) {
		.hover\:scale-105:hover {
			--tw-scale-x: 105%;
			--tw-scale-y: 105%;
			--tw-scale-z: 105%;
			scale: var(--tw-scale-x)var(--tw-scale-y)
		}
		.hover\:border-2:hover {
			border-style: var(--tw-border-style);
			border-width: 2px
		}
		.hover\:border-chemelex-blue:hover {
			border-color: var(--color-chemelex-blue)
		}
		.hover\:border-gray-300:hover {
			border-color: var(--color-gray-300)
		}
		.hover\:bg-\[\#3A6272\]:hover {
			background-color: #3a6272
		}
		.hover\:bg-blue-50:hover {
			background-color: var(--color-blue-50)
		}
		.hover\:bg-blue-600:hover {
			background-color: var(--color-blue-600)
		}
		.hover\:bg-blue-700:hover {
			background-color: var(--color-blue-700)
		}
		.hover\:bg-chemelex-blue:hover {
			background-color: var(--color-chemelex-blue)
		}
		.hover\:bg-chemelex-darkblue:hover {
			background-color: var(--color-chemelex-darkblue)
		}
		.hover\:bg-gray-50:hover {
			background-color: var(--color-gray-50)
		}
		.hover\:bg-gray-100:hover {
			background-color: var(--color-gray-100)
		}
		.hover\:bg-gray-200:hover {
			background-color: var(--color-gray-200)
		}
		.hover\:bg-gray-300:hover {
			background-color: var(--color-gray-300)
		}
		.hover\:bg-gray-700:hover {
			background-color: var(--color-gray-700)
		}
		.hover\:bg-green-700:hover {
			background-color: var(--color-green-700)
		}
		.hover\:bg-orange-700:hover {
			background-color: var(--color-orange-700)
		}
		.hover\:bg-purple-700:hover {
			background-color: var(--color-purple-700)
		}
		.hover\:bg-red-700:hover {
			background-color: var(--color-red-700)
		}
		.hover\:\!text-\[--pc-rich-black\]:hover {
			color: --pc-rich-black!important
		}
		.hover\:text-blue-600:hover {
			color: var(--color-blue-600)
		}
		.hover\:text-chemelex-blue:hover {
			color: var(--color-chemelex-blue)
		}
		.hover\:text-chemelex-darkblue:hover {
			color: var(--color-chemelex-darkblue)
		}
		.hover\:text-gray-200:hover {
			color: var(--color-gray-200)
		}
		.hover\:text-gray-500:hover {
			color: var(--color-gray-500)
		}
		.hover\:text-gray-600:hover {
			color: var(--color-gray-600)
		}
		.hover\:text-gray-700:hover {
			color: var(--color-gray-700)
		}
		.hover\:text-gray-800:hover {
			color: var(--color-gray-800)
		}
		.hover\:text-white:hover {
			color: var(--color-white)
		}
		.hover\:underline:hover {
			text-decoration-line: underline
		}
		.hover\:opacity-90:hover {
			opacity: .9
		}
		.hover\:shadow-lg:hover {
			--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -2px var(--tw-shadow-color, #0000000d);
			box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
		}
		.hover\:shadow-md:hover {
			--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -1px var(--tw-shadow-color, #0000000f);
			box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
		}
		.hover\:shadow-sm:hover {
			--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
			box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
		}
		.hover\:shadow-xl:hover {
			--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 10px 10px -5px var(--tw-shadow-color, #0000000a);
			box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
		}
	}
	.focus\:border-chemelex-blue:focus {
		border-color: var(--color-chemelex-blue)
	}
	.focus\:border-transparent:focus {
		border-color: #0000
	}
	.focus\:ring-1:focus {
		--tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color, currentcolor);
		box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
	}
	.focus\:ring-2:focus {
		--tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color, currentcolor);
		box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
	}
	.focus\:ring-blue-500:focus {
		--tw-ring-color: var(--color-blue-500)
	}
	.focus\:ring-chemelex-blue:focus {
		--tw-ring-color: var(--color-chemelex-blue)
	}
	.focus\:ring-gray-500:focus {
		--tw-ring-color: var(--color-gray-500)
	}
	.focus\:ring-offset-2:focus {
		--tw-ring-offset-width: 2px;
		--tw-ring-offset-shadow: var(--tw-ring-inset, )0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)
	}
	.focus\:outline-none:focus {
		--tw-outline-style: none;
		outline-style: none
	}
	.active\:bg-blue-800:active {
		background-color: var(--color-blue-800)
	}
	.active\:bg-gray-800:active {
		background-color: var(--color-gray-800)
	}
	.disabled\:opacity-50:disabled {
		opacity: .5
	}
	@media (min-width:40rem) {
		.sm\:my-8 {
			margin-block: calc(var(--spacing)*8)
		}
		.sm\:mt-0 {
			margin-top: calc(var(--spacing)*0)
		}
		.sm\:ml-3 {
			margin-left: calc(var(--spacing)*3)
		}
		.sm\:block {
			display: block
		}
		.sm\:flex {
			display: flex
		}
		.sm\:inline-block {
			display: inline-block
		}
		.sm\:h-screen {
			height: 100vh
		}
		.sm\:w-auto {
			width: auto
		}
		.sm\:w-full {
			width: 100%
		}
		.sm\:max-w-lg {
			max-width: var(--container-lg)
		}
		.sm\:flex-row-reverse {
			flex-direction: row-reverse
		}
		.sm\:p-0 {
			padding: calc(var(--spacing)*0)
		}
		.sm\:p-6 {
			padding: calc(var(--spacing)*6)
		}
		.sm\:px-6 {
			padding-inline: calc(var(--spacing)*6)
		}
		.sm\:pb-4 {
			padding-bottom: calc(var(--spacing)*4)
		}
		.sm\:align-middle {
			vertical-align: middle
		}
		.sm\:text-sm {
			font-size: var(--text-sm);
			line-height: var(--tw-leading, var(--text-sm--line-height))
		}
	}
	@media (min-width:48rem) {
		.md\:col-span-1 {
			grid-column: span 1/span 1
		}
		.md\:col-span-2 {
			grid-column: span 2/span 2
		}
		.md\:col-span-4 {
			grid-column: span 4/span 4
		}
		.md\:col-span-8 {
			grid-column: span 8/span 8
		}
		.md\:mx-auto {
			margin-inline: auto
		}
		.md\:mb-0 {
			margin-bottom: calc(var(--spacing)*0)
		}
		.md\:block {
			display: block
		}
		.md\:flex {
			display: flex
		}
		.md\:hidden {
			display: none
		}
		.md\:w-1\/2 {
			width: 50%
		}
		.md\:w-1\/3 {
			width: 33.3333%
		}
		.md\:w-2\/3 {
			width: 66.6667%
		}
		.md\:w-48 {
			width: calc(var(--spacing)*48)
		}
		.md\:max-w-7xl {
			max-width: var(--container-7xl)
		}
		.md\:grid-cols-2 {
			grid-template-columns: repeat(2, minmax(0, 1fr))
		}
		.md\:grid-cols-3 {
			grid-template-columns: repeat(3, minmax(0, 1fr))
		}
		.md\:grid-cols-4 {
			grid-template-columns: repeat(4, minmax(0, 1fr))
		}
		.md\:grid-cols-12 {
			grid-template-columns: repeat(12, minmax(0, 1fr))
		}
		.md\:flex-row {
			flex-direction: row
		}
		.md\:justify-between {
			justify-content: space-between
		}
		.md\:px-4 {
			padding-inline: calc(var(--spacing)*4)
		}
		.md\:text-2xl {
			font-size: var(--text-2xl);
			line-height: var(--tw-leading, var(--text-2xl--line-height))
		}
		.md\:text-3xl {
			font-size: var(--text-3xl);
			line-height: var(--tw-leading, var(--text-3xl--line-height))
		}
		.md\:text-5xl {
			font-size: var(--text-5xl);
			line-height: var(--tw-leading, var(--text-5xl--line-height))
		}
		.md\:text-sm {
			font-size: var(--text-sm);
			line-height: var(--tw-leading, var(--text-sm--line-height))
		}
		@media (hover:hover) {
			.md\:group-hover\:visible:is(:where(.group): hover *) {
				visibility:visible
			}
			.md\:group-hover\:translate-y-0:is(:where(.group):hover *) {
				--tw-translate-y: calc(var(--spacing)*0);
				translate: var(--tw-translate-x)var(--tw-translate-y)
			}
			.md\:group-hover\:opacity-100:is(:where(.group):hover *) {
				opacity: 1
			}
		}
	}
	@media (min-width:64rem) {
		.lg\:col-span-1 {
			grid-column: span 1/span 1
		}
		.lg\:hidden {
			display: none
		}
		.lg\:w-1\/3 {
			width: 33.3333%
		}
		.lg\:w-1\/4 {
			width: 25%
		}
		.lg\:w-1\/5 {
			width: 20%
		}
		.lg\:w-1\/6 {
			width: 16.6667%
		}
		.lg\:grid-cols-2 {
			grid-template-columns: repeat(2, minmax(0, 1fr))
		}
		.lg\:grid-cols-3 {
			grid-template-columns: repeat(3, minmax(0, 1fr))
		}
		.lg\:grid-cols-4 {
			grid-template-columns: repeat(4, minmax(0, 1fr))
		}
		.lg\:px-8 {
			padding-inline: calc(var(--spacing)*8)
		}
		.lg\:text-3xl {
			font-size: var(--text-3xl);
			line-height: var(--tw-leading, var(--text-3xl--line-height))
		}
		.lg\:text-6xl {
			font-size: var(--text-6xl);
			line-height: var(--tw-leading, var(--text-6xl--line-height))
		}
	}
}
@media screen and (max-width:576px) {
	h1 {
		font-size: 1.75rem
	}
	h2 {
		font-size: 1.5rem
	}
}
.btn-chemelex {
	background-color: var(--color-chemelex-blue);
	color: #fff;
	border-radius: .25rem;
	padding: .75rem 1.5rem;
	font-weight: 500;
	transition: all .3s;
	display: inline-block
}
.btn-chemelex:hover {
	background-color: var(--color-chemelex-darkblue);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px)
}
.btn-chemelex-outline {
	color: var(--color-chemelex-blue);
	border: 2px solid var(--color-chemelex-blue);
	background-color: #0000;
	border-radius: .25rem;
	padding: .75rem 1.5rem;
	font-weight: 500;
	transition: all .3s
}
.btn-chemelex-outline:hover {
	background-color: var(--color-chemelex-blue);
	color: #fff;
	box-shadow: var(--shadow-md);
	transform: translateY(-2px)
}
.headline {
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	width: 100%!important;
	margin: 0!important;
	padding: 20px!important;
	font-family: Archivo, sans-serif!important;
	font-size: 100pt!important;
	font-weight: 500!important;
	line-height: 120pt!important
}
h1 {
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	width: 100%!important;
	margin: 0!important;
	padding: 20px!important;
	font-family: Archivo, sans-serif!important;
	font-size: 80pt!important;
	font-weight: 500!important;
	line-height: 92pt!important
}
h2 {
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	width: 100%!important;
	margin: 0!important;
	padding: 20px!important;
	font-family: Archivo, sans-serif!important;
	font-size: 40pt!important;
	font-weight: 600!important;
	line-height: 48pt!important
}
h3 {
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	width: 100%!important;
	margin: 0!important;
	padding: 20px!important;
	font-family: Archivo, sans-serif!important;
	font-size: 32pt!important;
	font-weight: 600!important;
	line-height: 40pt!important
}
h4 {
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	width: 100%!important;
	margin: 0!important;
	padding: 20px!important;
	font-family: Noto Sans, sans-serif!important;
	font-size: 32pt!important;
	font-weight: 400!important;
	line-height: 40pt!important
}
h5 {
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	width: 100%!important;
	margin: 0!important;
	padding: 20px!important;
	font-family: Noto Sans, sans-serif!important;
	font-size: 24pt!important;
	font-weight: 400!important;
	line-height: 32pt!important
}
h6 {
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	width: 100%!important;
	margin: 0!important;
	padding: 20px!important;
	font-family: Noto Sans, sans-serif!important;
	font-size: 20pt!important;
	font-weight: 700!important;
	line-height: 28pt!important
}
.large-body {
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	width: 100%!important;
	margin: 0!important;
	padding: 20px!important;
	font-family: Noto Sans, sans-serif!important;
	font-size: 20pt!important;
	font-weight: 400!important;
	line-height: 28pt!important
}
.body {
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	width: 100%!important;
	margin: 0!important;
	padding: 20px!important;
	font-family: Noto Sans, sans-serif!important;
	font-size: 16pt!important;
	font-weight: 400!important;
	line-height: 24pt!important
}
.small-body {
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	width: 100%!important;
	margin: 0!important;
	padding: 20px!important;
	font-family: Noto Sans, sans-serif!important;
	font-size: 14pt!important;
	font-weight: 400!important;
	line-height: 18pt!important
}
.primary-button {
	letter-spacing: 0%!important;
	color: #fff!important;
	cursor: pointer!important;
	background-color: #000!important;
	border: none!important;
	border-radius: 12px!important;
	justify-content: center!important;
	align-items: center!important;
	gap: 8px!important;
	height: auto!important;
	margin: 0!important;
	padding: 5px 16px!important;
	font-family: Noto Sans, sans-serif!important;
	font-size: 16px!important;
	font-weight: 400!important;
	line-height: 24px!important;
	transition: background-color .2s!important;
	display: flex!important
}
.primary-button:before {
	content: "○"!important;
	color: #fff!important;
	font-size: 20px!important;
	line-height: 1!important
}
.menu-item {
	letter-spacing: 0%!important;
	color: var(--rich-black)!important;
	font-family: Noto Sans, sans-serif!important;
	font-weight: 400!important
}
@media (min-width:1024px) {
	.menu-item {
		font-size: 13px!important;
		line-height: 19px!important
	}
}
@media (min-width:768px) and (max-width:1023px) {
	.menu-item {
		font-size: 11px!important;
		line-height: 14px!important
	}
}
@media (max-width:767px) {
	.menu-item {
		font-size: 11px!important;
		line-height: 14px!important
	}
}
.menu-header {
	letter-spacing: 0%;
	font-family: Noto Sans, sans-serif;
	font-weight: 700
}
@media (min-width:1024px) {
	.menu-header {
		font-size: 14.4pt;
		line-height: 21.6pt
	}
}
@media (min-width:768px) and (max-width:1023px) {
	.menu-header {
		font-size: 12.6pt;
		line-height: 16.2pt
	}
}
@media (max-width:767px) {
	.menu-header {
		font-size: 12.6pt;
		line-height: 16.2pt
	}
}
.menu-title {
	letter-spacing: 0%!important;
	color: var(--rich-black)!important;
	text-transform: initial!important;
	width: auto!important;
	margin: 0!important;
	padding: 0!important;
	font-family: Noto Sans, sans-serif!important;
	font-size: 17px!important;
	font-weight: 700!important;
	line-height: 24px!important
}
.grid {
	flex-wrap: wrap;
	margin-left: -1rem;
	margin-right: -1rem;
	display: flex
}
.col {
	flex: 1 0;
	padding: 0 1rem
}
.hero-section {
	background-color: var(--chemelex-grey);
	text-align: center;
	padding: 5rem 0
}
.hero-title {
	color: var(--chemelex-blue);
	margin-bottom: 1.5rem;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2
}
.hero-subtitle {
	color: var(--chemelex-text-light);
	margin-bottom: 2.5rem;
	font-size: 1.5rem
}
.feature-section {
	background-color: #fff;
	padding: 5rem 0
}
.feature-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	padding: 2rem;
	transition: transform .3s, box-shadow .3s
}
.feature-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-5px)
}
.btn {
	cursor: pointer;
	text-align: center;
	border-radius: .25rem;
	padding: .75rem 1.5rem;
	font-weight: 500;
	transition: background-color .2s, transform .2s, box-shadow .2s;
	display: inline-block
}
.btn-outline {
	color: var(--chemelex-blue);
	border: 1px solid var(--chemelex-blue);
	background-color: #0000
}
.btn-outline:hover {
	color: var(--chemelex-blue);
	background-color: #0049761a
}
@media (max-width:768px) {
	.hero-title {
		font-size: 2.25rem
	}
	.hero-subtitle {
		font-size: 1.25rem
	}
	.main-container {
		padding: 0 1rem
	}
}
.blue-banner {
	background-color: var(--chemelex-blue);
	color: #fff;
	text-align: center;
	padding: 5rem 0
}
.blue-banner h2 {
	color: #fff;
	margin-bottom: 1.5rem;
	font-size: 2.5rem
}
.blue-banner p {
	color: #ffffffe6;
	max-width: 800px;
	margin: 0 auto;
	font-size: 1.25rem
}
html, body {
	width: 100%;
	height: 100%;
	overflow-x: hidden
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
	font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif
}
#root {
	flex-direction: column;
	height: 100%;
	display: flex
}
button {
	font: inherit;
	cursor: pointer;
	background: 0 0;
	border: none
}
:root {
	--text-color: #212529;
	--text-color-secondary: #6c757d;
	--primary-color: #004976;
	--primary-color-light: #0049761a;
	--primary-color-text: #fff;
	--secondary-color: #0077b6;
	--chemelex-blue: #004976;
	--chemelex-lightblue: #0077b6;
	--chemelex-darkblue: #00334e
}
@media screen and (max-width:768px) {
	h1 {
		font-size: 1.75rem!important
	}
	h2 {
		font-size: 1.5rem!important
	}
	h3 {
		font-size: 1.25rem!important
	}
}
.chemelex-heading {
	color: var(--chemelex-blue);
	font-weight: 700;
	line-height: 1.2
}
.chemelex-subheading {
	color: var(--chemelex-darkblue);
	font-weight: 600
}
.main-layout {
	flex-direction: column;
	min-height: 100vh;
	display: flex
}
.card {
	background: #fff;
	border: 1px solid #0000000d;
	border-radius: .25rem;
	box-shadow: 0 2px 1px -1px #0049761a, 0 1px 1px #00497612, 0 1px 3px #0049760f
}
.avatar {
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	overflow: hidden
}
.chemelex-button {
	background-color: var(--chemelex-blue);
	color: #fff;
	cursor: pointer;
	border: none;
	border-radius: .25rem;
	padding: .75rem 1.5rem;
	font-weight: 600;
	transition: all .3s
}
.chemelex-button-outline {
	color: var(--chemelex-blue);
	border: 2px solid var(--chemelex-blue);
	background-color: #0000
}
@property --tw-translate-x {
	syntax: "*";
	inherits: false;
	initial-value: 0
}
@property --tw-translate-y {
	syntax: "*";
	inherits: false;
	initial-value: 0
}
@property --tw-translate-z {
	syntax: "*";
	inherits: false;
	initial-value: 0
}
@property --tw-scale-x {
	syntax: "*";
	inherits: false;
	initial-value: 1
}
@property --tw-scale-y {
	syntax: "*";
	inherits: false;
	initial-value: 1
}
@property --tw-scale-z {
	syntax: "*";
	inherits: false;
	initial-value: 1
}
@property --tw-rotate-x {
	syntax: "*";
	inherits: false
}
@property --tw-rotate-y {
	syntax: "*";
	inherits: false
}
@property --tw-rotate-z {
	syntax: "*";
	inherits: false
}
@property --tw-skew-x {
	syntax: "*";
	inherits: false
}
@property --tw-skew-y {
	syntax: "*";
	inherits: false
}
@property --tw-space-y-reverse {
	syntax: "*";
	inherits: false;
	initial-value: 0
}
@property --tw-space-x-reverse {
	syntax: "*";
	inherits: false;
	initial-value: 0
}
@property --tw-border-style {
	syntax: "*";
	inherits: false;
	initial-value: solid
}
@property --tw-gradient-position {
	syntax: "*";
	inherits: false
}
@property --tw-gradient-from {
	syntax: "<color>";
	inherits: false;
	initial-value: #0000
}
@property --tw-gradient-via {
	syntax: "<color>";
	inherits: false;
	initial-value: #0000
}
@property --tw-gradient-to {
	syntax: "<color>";
	inherits: false;
	initial-value: #0000
}
@property --tw-gradient-stops {
	syntax: "*";
	inherits: false
}
@property --tw-gradient-via-stops {
	syntax: "*";
	inherits: false
}
@property --tw-gradient-from-position {
	syntax: "<length-percentage>";
	inherits: false;
	initial-value: 0%
}
@property --tw-gradient-via-position {
	syntax: "<length-percentage>";
	inherits: false;
	initial-value: 50%
}
@property --tw-gradient-to-position {
	syntax: "<length-percentage>";
	inherits: false;
	initial-value: 100%
}
@property --tw-leading {
	syntax: "*";
	inherits: false
}
@property --tw-font-weight {
	syntax: "*";
	inherits: false
}
@property --tw-tracking {
	syntax: "*";
	inherits: false
}
@property --tw-shadow {
	syntax: "*";
	inherits: false;
	initial-value: 0 0 #0000
}
@property --tw-shadow-color {
	syntax: "*";
	inherits: false
}
@property --tw-shadow-alpha {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 100%
}
@property --tw-inset-shadow {
	syntax: "*";
	inherits: false;
	initial-value: 0 0 #0000
}
@property --tw-inset-shadow-color {
	syntax: "*";
	inherits: false
}
@property --tw-inset-shadow-alpha {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 100%
}
@property --tw-ring-color {
	syntax: "*";
	inherits: false
}
@property --tw-ring-shadow {
	syntax: "*";
	inherits: false;
	initial-value: 0 0 #0000
}
@property --tw-inset-ring-color {
	syntax: "*";
	inherits: false
}
@property --tw-inset-ring-shadow {
	syntax: "*";
	inherits: false;
	initial-value: 0 0 #0000
}
@property --tw-ring-inset {
	syntax: "*";
	inherits: false
}
@property --tw-ring-offset-width {
	syntax: "<length>";
	inherits: false;
	initial-value: 0
}
@property --tw-ring-offset-color {
	syntax: "*";
	inherits: false;
	initial-value: #fff
}
@property --tw-ring-offset-shadow {
	syntax: "*";
	inherits: false;
	initial-value: 0 0 #0000
}
@property --tw-blur {
	syntax: "*";
	inherits: false
}
@property --tw-brightness {
	syntax: "*";
	inherits: false
}
@property --tw-contrast {
	syntax: "*";
	inherits: false
}
@property --tw-grayscale {
	syntax: "*";
	inherits: false
}
@property --tw-hue-rotate {
	syntax: "*";
	inherits: false
}
@property --tw-invert {
	syntax: "*";
	inherits: false
}
@property --tw-opacity {
	syntax: "*";
	inherits: false
}
@property --tw-saturate {
	syntax: "*";
	inherits: false
}
@property --tw-sepia {
	syntax: "*";
	inherits: false
}
@property --tw-drop-shadow {
	syntax: "*";
	inherits: false
}
@property --tw-drop-shadow-color {
	syntax: "*";
	inherits: false
}
@property --tw-drop-shadow-alpha {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 100%
}
@property --tw-drop-shadow-size {
	syntax: "*";
	inherits: false
}
@property --tw-duration {
	syntax: "*";
	inherits: false
}
@property --tw-ease {
	syntax: "*";
	inherits: false
}
@keyframes spin {
	to {
		transform: rotate(360deg)
	}
}
@theme {
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--color-chemelex-blue: #004976;
	--color-chemelex-lightblue: #2981C9;
	--color-chemelex-darkblue: #003A5F;
	--color-chemelex-grey: #F2F2F2;
	--color-chemelex-text-dark: #333333;
	--color-chemelex-text-light: #666666;
	--color-chemelex-text-muted: #999999;
	--pc-rich-black: #000000;
	--pc-rich-black-75: rgba(0, 0, 0, .75);
	--pc-rich-black-50: rgba(0, 0, 0, .5);
	--pc-rich-black-25: rgba(0, 0, 0, .25);
	--pc-rich-black-20: rgba(0, 0, 0, .2);
	--pc-rich-black-10: rgba(0, 0, 0, .1);
	--pc-rich-black-5: rgba(0, 0, 0, .05);
	--pc-white: #FFFFFF;
	--pc-white-75: rgba(255, 255, 255, .75);
	--pc-white-50: rgba(255, 255, 255, .5);
	--pc-white-25: rgba(255, 255, 255, .25);
	--pc-white-20: rgba(255, 255, 255, .2);
	--pc-white-10: rgba(255, 255, 255, .1);
	--pc-white-5: rgba(255, 255, 255, .05);
	--pc-light-grey: #F1F2F2;
	--pa-steel-blue: #46768A;
	--pa-connection-red: #FF0547;
	--pa-connection-red-50: rgba(255, 5, 71, .5);
	--pa-connection-red-10: rgba(255, 5, 71, .1);
	--pa-red: #46768A;
	--pa-red-50: rgba(70, 118, 138, .5);
	--pa-green: #46768A;
	--pa-green-50: rgba(70, 118, 138, .5);
	--pa-yellow: #46768A;
	--pa-yellow-50: rgba(70, 118, 138, .5);
	--sc-pepper: #8A4647;
	--sc-grape: #84468A;
	--sc-violet: #4F468A;
	--sc-blue: #251EE3;
	--sc-orange: #F46913;
	--sc-pink: #E456EB;
	--sc-purple: #7F00E7;
	--sc-sky: #36AADA;
	--color-primary-50: #E6EEF5;
	--color-primary-100: #C0D3E6;
	--color-primary-200: #97B6D7;
	--color-primary-300: #6E99C7;
	--color-primary-400: #4F83BC;
	--color-primary-500: #004976;
	--color-primary-600: #00416A;
	--color-primary-700: #00375A;
	--color-primary-800: #002E4A;
	--color-primary-900: #00223A;
	--color-gray-50: #F9FAFB;
	--color-gray-100: #F2F4F6;
	--color-gray-200: #E5E7EB;
	--color-gray-300: #D1D5DB;
	--color-gray-400: #9CA3AF;
	--color-gray-500: #6B7280;
	--color-gray-600: #4B5563;
	--color-gray-700: #374151;
	--color-gray-800: #1F2937;
	--color-gray-900: #111827;
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
	--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
}
h1, h2, h3, h4, h5, h6 {
	color: var(--color-chemelex-blue);
	font-weight: 600;
	line-height: 1.2
}
p {
	color: var(--color-chemelex-text-light);
	line-height: 1.5
}
@media screen and (max-width: 576px) {
	h1 {
		font-size: 1.75rem
	}
	h2 {
		font-size: 1.5rem
	}
}
.bg-primary {
	background-color: var(--color-primary-500)!important
}
.text-primary {
	color: var(--color-primary-500)!important
}
.btn-chemelex {
	display: inline-block;
	background-color: var(--color-chemelex-blue);
	color: #fff;
	padding: .75rem 1.5rem;
	border-radius: .25rem;
	font-weight: 500;
	transition: all .3s ease
}
.btn-chemelex:hover {
	background-color: var(--color-chemelex-darkblue);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md)
}
.btn-chemelex-outline {
	background-color: transparent;
	color: var(--color-chemelex-blue);
	border: 2px solid var(--color-chemelex-blue);
	padding: .75rem 1.5rem;
	border-radius: .25rem;
	font-weight: 500;
	transition: all .3s ease
}
.btn-chemelex-outline:hover {
	background-color: var(--color-chemelex-blue);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md)
}
.headline {
	font-family: Archivo, sans-serif!important;
	font-weight: 500!important;
	font-size: 100pt!important;
	line-height: 120pt!important;
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	padding: 20px!important;
	margin: 0!important;
	width: 100%!important
}
h1 {
	font-family: Archivo, sans-serif!important;
	font-weight: 500!important;
	font-size: 80pt!important;
	line-height: 92pt!important;
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	padding: 20px!important;
	margin: 0!important;
	width: 100%!important
}
h2 {
	font-family: Archivo, sans-serif!important;
	font-weight: 600!important;
	font-size: 40pt!important;
	line-height: 48pt!important;
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	padding: 20px!important;
	margin: 0!important;
	width: 100%!important
}
h3 {
	font-family: Archivo, sans-serif!important;
	font-weight: 600!important;
	font-size: 32pt!important;
	line-height: 40pt!important;
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	padding: 20px!important;
	margin: 0!important;
	width: 100%!important
}
h4 {
	font-family: Noto Sans, sans-serif!important;
	font-weight: 400!important;
	font-size: 32pt!important;
	line-height: 40pt!important;
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	padding: 20px!important;
	margin: 0!important;
	width: 100%!important
}
h5 {
	font-family: Noto Sans, sans-serif!important;
	font-weight: 400!important;
	font-size: 24pt!important;
	line-height: 32pt!important;
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	padding: 20px!important;
	margin: 0!important;
	width: 100%!important
}
h6 {
	font-family: Noto Sans, sans-serif!important;
	font-weight: 700!important;
	font-size: 20pt!important;
	line-height: 28pt!important;
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	padding: 20px!important;
	margin: 0!important;
	width: 100%!important
}
.large-body {
	font-family: Noto Sans, sans-serif!important;
	font-weight: 400!important;
	font-size: 20pt!important;
	line-height: 28pt!important;
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	padding: 20px!important;
	margin: 0!important;
	width: 100%!important
}
.body {
	font-family: Noto Sans, sans-serif!important;
	font-weight: 400!important;
	font-size: 16pt!important;
	line-height: 24pt!important;
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	padding: 20px!important;
	margin: 0!important;
	width: 100%!important
}
.small-body {
	font-family: Noto Sans, sans-serif!important;
	font-weight: 400!important;
	font-size: 14pt!important;
	line-height: 18pt!important;
	letter-spacing: 0%!important;
	text-align: left!important;
	color: #000!important;
	padding: 20px!important;
	margin: 0!important;
	width: 100%!important
}
.primary-button {
	font-family: Noto Sans, sans-serif!important;
	font-weight: 400!important;
	font-size: 16px!important;
	line-height: 24px!important;
	letter-spacing: 0%!important;
	height: auto!important;
	display: flex!important;
	align-items: center!important;
	justify-content: center!important;
	gap: 8px!important;
	color: #fff!important;
	background-color: #000!important;
	border-radius: 12px!important;
	padding: 5px 16px!important;
	margin: 0!important;
	cursor: pointer!important;
	border: none!important;
	transition: background-color .2s ease!important
}
.primary-button:hover {
	background-color: #333!important
}
.primary-button:before {
	content: "○"!important;
	font-size: 20px!important;
	color: #fff!important;
	line-height: 1!important
}
.menu-item {
	font-family: Noto Sans, sans-serif!important;
	font-weight: 400!important;
	letter-spacing: 0%!important;
	color: var(--rich-black)!important
}
@media (min-width: 1024px) {
	.menu-item {
		font-size: 13px!important;
		line-height: 19px!important
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.menu-item {
		font-size: 11px!important;
		line-height: 14px!important
	}
}
@media (max-width: 767px) {
	.menu-item {
		font-size: 11px!important;
		line-height: 14px!important
	}
}
.menu-header {
	font-family: Noto Sans, sans-serif;
	font-weight: 700;
	letter-spacing: 0%
}
@media (min-width: 1024px) {
	.menu-header {
		font-size: 14.4pt;
		line-height: 21.6pt
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.menu-header {
		font-size: 12.6pt;
		line-height: 16.2pt
	}
}
@media (max-width: 767px) {
	.menu-header {
		font-size: 12.6pt;
		line-height: 16.2pt
	}
}
.menu-title {
	font-family: Noto Sans, sans-serif!important;
	font-weight: 700!important;
	font-size: 17px!important;
	line-height: 24px!important;
	letter-spacing: 0%!important;
	color: var(--rich-black)!important;
	text-transform: initial!important;
	padding: 0!important;
	margin: 0!important;
	width: auto!important
}
div.border-t>.steel-blue-button, div.border-t>a.steel-blue-button {
	background-color: var(--pa-steel-blue)!important;
	color: #fff!important;
	border: none!important;
	outline: none!important
}
div.border-t>.steel-blue-button:hover, div.border-t>a.steel-blue-button:hover {
	background-color: var(--pa-steel-blue)!important;
	opacity: .9!important
}
div.border-t>.steel-blue-button span, div.border-t>a.steel-blue-button span {
	color: #fff!important
}
:root {
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--chemelex-blue: #004976;
	--chemelex-lightblue: #2981C9;
	--chemelex-darkblue: #003A5F;
	--chemelex-grey: #F2F2F2;
	--chemelex-text-dark: #333333;
	--chemelex-text-light: #666666;
	--chemelex-text-muted: #999999
}
html, body {
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	scroll-behavior: smooth
}
body {
	font-family: var(--font-sans);
	line-height: 1.5;
	font-weight: 400;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: #fff;
	color: var(--chemelex-text-dark);
	margin: 0
}
#root {
	height: 100%
}
a {
	text-decoration: none;
	transition: color .2s ease-in-out
}
a:hover {
	text-decoration: none
}
h1, h2, h3, h4, h5, h6 {
	margin-bottom: .75rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--chemelex-blue)
}
h1 {
	font-size: 2.5rem;
	font-weight: 700
}
h2 {
	font-size: 2rem;
	font-weight: 700
}
h3 {
	font-size: 1.75rem
}
h4 {
	font-size: 1.5rem
}
h5 {
	font-size: 1.25rem
}
h6 {
	font-size: 1rem
}
p {
	margin-bottom: 1rem;
	line-height: 1.6;
	color: var(--chemelex-text-light)
}
@media screen and (max-width: 768px) {
	h1 {
		font-size: 2rem
	}
	h2 {
		font-size: 1.75rem
	}
	h3 {
		font-size: 1.5rem
	}
	h4 {
		font-size: 1.25rem
	}
}
.text-center {
	text-align: center
}
.text-chemelex {
	color: var(--chemelex-blue)
}
.text-muted {
	color: var(--chemelex-text-muted)
}
.bg-chemelex {
	background-color: var(--chemelex-blue)
}
.container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem
}
.section-light {
	background-color: var(--chemelex-grey);
	padding: 4rem 0
}
.section-dark {
	background-color: var(--chemelex-blue);
	color: #fff;
	padding: 4rem 0
}
.section-white {
	background-color: #fff;
	padding: 4rem 0
}
.main-container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem
}
.main-content {
	padding: 2rem 0
}
.grid {
	display: flex;
	flex-wrap: wrap;
	margin-right: -1rem;
	margin-left: -1rem
}
.col {
	flex: 1 0 0%;
	padding: 0 1rem
}
.hero-section {
	padding: 5rem 0;
	background-color: var(--chemelex-grey);
	text-align: center
}
.hero-title {
	font-size: 3rem;
	font-weight: 700;
	color: var(--chemelex-blue);
	margin-bottom: 1.5rem;
	line-height: 1.2
}
.hero-subtitle {
	font-size: 1.5rem;
	color: var(--chemelex-text-light);
	margin-bottom: 2.5rem
}
.feature-section {
	padding: 5rem 0;
	background-color: #fff
}
.feature-card {
	padding: 2rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	transition: transform .3s ease, box-shadow .3s ease
}
.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-md)
}
.btn {
	display: inline-block;
	padding: .75rem 1.5rem;
	border-radius: .25rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
	text-align: center
}
.btn-primary {
	background-color: var(--chemelex-blue);
	color: #fff;
	border: 1px solid var(--chemelex-blue)
}
.btn-primary:hover {
	background-color: var(--chemelex-darkblue);
	border-color: var(--chemelex-darkblue)
}
.btn-outline {
	background-color: transparent;
	color: var(--chemelex-blue);
	border: 1px solid var(--chemelex-blue)
}
.btn-outline:hover {
	background-color: #0049761a;
	color: var(--chemelex-blue)
}
::-webkit-scrollbar {
	width: 8px
}
::-webkit-scrollbar-track {
	background: #f2f4f6
}
::-webkit-scrollbar-thumb {
	background: #9ca3af;
	border-radius: 4px
}
::-webkit-scrollbar-thumb:hover {
	background: #004976
}
.fade-enter {
	opacity: 0
}
.fade-enter-active {
	opacity: 1;
	transition: opacity .3s ease-out
}
.fade-exit {
	opacity: 1
}
.fade-exit-active {
	opacity: 0;
	transition: opacity .3s ease-in
}
@media (max-width: 768px) {
	.hero-title {
		font-size: 2.25rem
	}
	.hero-subtitle {
		font-size: 1.25rem
	}
	.main-container {
		padding: 0 1rem
	}
}
.blue-banner {
	background-color: var(--chemelex-blue);
	color: #fff;
	padding: 5rem 0;
	text-align: center
}
.blue-banner h2 {
	color: #fff;
	font-size: 2.5rem;
	margin-bottom: 1.5rem
}
.blue-banner p {
	color: #ffffffe6;
	font-size: 1.25rem;
	max-width: 800px;
	margin: 0 auto
}
html, body {
	height: 100%;
	width: 100%;
	overflow-x: hidden
}
body {
	font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0
}
#root {
	height: 100%;
	display: flex;
	flex-direction: column
}
button {
	background: none;
	border: none;
	font: inherit;
	cursor: pointer
}
a {
	transition: color .2s ease-in-out;
	text-decoration: none
}
:root {
	--text-color: #212529;
	--text-color-secondary: #6c757d;
	--primary-color: #004976;
	--primary-color-light: rgba(0, 73, 118, .1);
	--primary-color-text: #ffffff;
	--secondary-color: #0077B6;
	--chemelex-blue: #004976;
	--chemelex-lightblue: #0077B6;
	--chemelex-darkblue: #00334E
}
@media screen and (max-width: 768px) {
	h1 {
		font-size: 1.75rem!important
	}
	h2 {
		font-size: 1.5rem!important
	}
	h3 {
		font-size: 1.25rem!important
	}
}
.bg-primary-light {
	background-color: var(--primary-color-light)!important
}
.text-danger {
	color: #f44336!important
}
.cursor-pointer {
	cursor: pointer
}
.min-h-screen {
	min-height: 100vh
}
.w-18rem {
	width: 18rem
}
.chemelex-heading {
	font-weight: 700;
	color: var(--chemelex-blue);
	line-height: 1.2
}
.chemelex-subheading {
	font-weight: 600;
	color: var(--chemelex-darkblue)
}
.main-layout {
	display: flex;
	flex-direction: column;
	min-height: 100vh
}
.main-layout main {
	flex: 1
}
.card {
	box-shadow: 0 2px 1px -1px #0049761a, 0 1px 1px #00497612, 0 1px 3px #0049760f;
	border-radius: .25rem;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .05)
}
.avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	overflow: hidden
}
.avatar.bg-primary {
	background-color: var(--primary-color);
	color: var(--primary-color-text)
}
a {
	transition: all .2s
}
.hover-scale {
	transition: transform .2s
}
.hover-scale:hover {
	transform: scale(1.03)
}
.chemelex-button {
	background-color: var(--chemelex-blue);
	color: #fff;
	font-weight: 600;
	padding: .75rem 1.5rem;
	border-radius: .25rem;
	border: none;
	cursor: pointer;
	transition: all .3s ease
}
.chemelex-button:hover {
	background-color: var(--chemelex-darkblue);
	transform: translateY(-2px);
	box-shadow: 0 4px 6px -1px #0049761a, 0 2px 4px -1px #0049760f
}
.chemelex-button-outline {
	background-color: transparent;
	color: var(--chemelex-blue);
	border: 2px solid var(--chemelex-blue)
}
.chemelex-button-outline:hover {
	background-color: var(--chemelex-blue);
	color: #fff
}


/****************************************
OVERWRITE
*****************************************/
:where(.space-y-1>:not(:last-child)),
:where(.space-y-2>:not(:last-child)),
:where(.space-y-3>:not(:last-child)),
:where(.space-y-4>:not(:last-child)),
:where(.space-y-6>:not(:last-child)),
/**/
.space-y-1,
.space-y-2,
.space-y-3,
.space-y-4,
.space-y-6 {
--tw-space-y-reverse: 0;
		margin-block-start: calc(calc(var(--spacing)*0)*var(--tw-space-y-reverse)) !important;
		margin-block-end: calc(calc(var(--spacing)*0)*calc(1 - var(--tw-space-y-reverse))) !important;
}

:where(.space-x-1>:not(:last-child)),
:where(.space-x-2>:not(:last-child)),
:where(.space-x-4>:not(:last-child)),
:where(.space-x-8>:not(:last-child)),
/**/
.space-x-1,
.space-x-2,
.space-x-4,
.space-x-8 {
		--tw-space-x-reverse: 0;
		margin-inline-start: calc(calc(var(--spacing)*0)*var(--tw-space-x-reverse)) !important;
		margin-inline-end: calc(calc(var(--spacing)*0)*calc(1 - var(--tw-space-x-reverse))) !important;
}

.p-0,
.p-1,
.p-2,
.p-3,
.p-4,
.p-6,
.p-8 {
		padding: calc(var(--spacing)*0) !important;
}

.px-1,
.px-2,
.px-3,
.px-4,
.px-6,
.px-8 {
		padding-inline: calc(var(--spacing)*0) !important;
}

.py-1,
.py-1\.5 ,
.py-2,
.py-3,
.py-4,
.py-6,
.py-8,
.py-12,
.py-20,
.py-24,
.py-32 {
		padding-block: calc(var(--spacing)*0) !important;
}
.pt-2,
.pt-4,
.pt-5,
.pt-6,
.pt-36,
.pt-\[56\.25\%\] {
	 padding-top: 0;
}

.pr-4 {
		padding-right: calc(var(--spacing)*0) !important;
}

.pb-4,
.pb-6,
.pb-8,
.pb-20 {
		padding-bottom: calc(var(--spacing)*0) !important;
}

.pl-2,
.pl-3,
.pl-4,
.pl-5,
.pl-6,
.pl-8,
.pl-10 {
		padding-left: calc(var(--spacing)*0) !important;
}

.h-1,
.h-1\/2,
.h-2,
.h-3,
.h-4,
.h-5,
.h-6,
.h-8,
.h-10,
.h-12,
.h-16,
.h-24,
.h-32,
.h-48,
.h-64,
.h-96 {
  height: auto;
}

.h-\[400px\],
.h-\[500px\],
.h-\[600px\],
.h-\[calc\(100\%-2rem\)\] {
}
/*these stay the same*/
.h-auto {
		height: auto
	}
	.h-full {
		height: 100%
	}

.m-0 {
		margin: calc(var(--spacing)*0)
	}
	.-mx-2,
	.-mx-4 {
		margin-inline: calc(var(--spacing)*-0)
	}
	.mx-auto {
		margin-inline: auto
	}
	.my-3,
	.my-4 {
		margin-block: calc(var(--spacing)*0)
	}
	.-mt-32 {
		margin-top: calc(var(--spacing)*-0)
	}
	.mt-1,
	.mt-2,
	.mt-3,
	.mt-4,
	.mt-6,
	.mt-16 {
		margin-top: calc(var(--spacing)*0)
	}
	.mt-auto {
		margin-top: auto
	}
	.mr-1,
	.mr-2,
	.mr-4 {
		margin-right: calc(var(--spacing)*0)
	}
	.-mb-px {
		margin-bottom: -1px
	}
	.mb-1,
	.mb-2,
	.mb-3,
	.mb-4,
	.mb-6,
	.mb-8,
	.mb-12,
	.mb-16 {
		margin-bottom: calc(var(--spacing)*0)
	}
	.ml-0\.5 {
		margin-left: calc(var(--spacing)*.5)
	}
	.ml-1,
	.ml-2,
	.ml-3,
	.ml-4 {
		margin-left: calc(var(--spacing)*0)
	}

body button,
button {
}





.rounded,
	.rounded-full,
	.rounded-lg,
	.rounded-md ,
	.rounded-sm,
	.rounded-t-lg {
		border-radius: 0px !important;
	}


/***************************************
COLOR FOR TESTING
***************************************


:where(.space-y-1>:not(:last-child)),
:where(.space-y-2>:not(:last-child)),
:where(.space-y-3>:not(:last-child)),
:where(.space-y-4>:not(:last-child)),
:where(.space-y-6>:not(:last-child)),

.space-y-1,
.space-y-2,
.space-y-3,
.space-y-4,
.space-y-6 {
   border: dotted 1px blue !important;
	}

:where(.space-x-1>:not(:last-child)),
:where(.space-x-2>:not(:last-child)),
:where(.space-x-4>:not(:last-child)),
:where(.space-x-8>:not(:last-child)),

.space-x-1,
.space-x-2,
.space-x-4,
.space-x-8 {
   border: dotted 1px red !important;
	}

.p-0,
.p-1,
.p-2,
.p-3,
.p-4,
.p-6,
.p-8 {
   border: dashed 1px red !important;
	}

.px-1,
.px-2,
.px-3,
.px-4,
.px-6,
.px-8 {
   border: dashed 1px green !important;
}

.py-1,
.py-1\.5 ,
.py-2,
.py-3,
.py-4,
.py-6,
.py-8,
.py-12,
.py-20,
.py-24,
.py-32 {
  border: dashed 1px violet !important;
}

.pt-2,
.pt-4,
.pt-5,
.pt-6,
.pt-36,
.pt-\[56\.25\%\] {
  border: dashed 1px aqua !important;
}

.pr-4 {
  border: dashed 1px pink !important;
}

.pb-4,
.pb-6,
.pb-8,
.pb-20 {
  border: dashed 1px Chartreuse !important;
}

.pl-2,
.pl-3,
.pl-4,
.pl-5,
.pl-6,
.pl-8,
.pl-10 {
  border: dashed 1px Chartreuse !important;
}

.h-1,
.h-1\/2,
.h-2,
.h-3,
.h-4,
.h-5,
.h-6,
.h-8,
.h-10,
.h-12,
.h-16,
.h-24,
.h-32,
.h-48,
.h-64,
.h-96,
.h-\[400px\],
.h-\[500px\],
.h-\[600px\],
.h-\[calc\(100\%-2rem\)\],
.h-auto,
.h-full {
  border: double 3px red !important;
}

body button,
button {
 border: solid 5px cyan !important;
}


/* ========== chemelex_navigation.css (28.98 KB) ========== */

/*********************************
v: 082125
*********************************/

/*********************************
MAIN NAV
*********************************/

/*overwrite visted bug*/
#cxstyle_brand_navigation a:visited,
#cxstyle_megamenu a:visited,
#cxstyle_single_menu a:visited,
#cxstyle_mobile_menu a:visited,
_#cxstyle_chemelex_navigation a:visited,
_#cxstyle_chemelex_navigation_left a:visited{
 background-color: coral !important;
 _border: solid 10px red;
}

#cxstyle_brand_navigation a:visited {
    background-color: #ffffff !important;
    border: solid 1px #ffffff !important;
 color: #000000 !important;
}

#cxstyle_megamenu a:visited,
#cxstyle_single_menu a:visited,
#cxstyle_mobile_menu a:visited,
#cxstyle_chemelex_navigation_left a:visited {
    background-color: #ffffff !important;
    border: solid 1px #e5e4e4 !important;
 color: #000000 !important;
}



/*********************************
TOP NAVIGATION
*********************************/
#fixed-header {
 z-index: 999
}
/*push the content below the menu*/
.flex-grow {
 padding-top: 88px !important; /*pushed below the nav*/
}





/*===============================
LAYOUT: this is the brands nav
================================*/
#fixed-header #cxstyle_chemelex_navigation {
 max-width: 100%;
 width: 100%;
 margin: 0 auto 0 auto;
 height: 40px;
 /**/
 display: flex;
 align-items: center; /*center vertically*/
 justify-content: left; /*left horizontally*/
}
#fixed-header #cxstyle_chemelex_navigation div {
 max-width: 1440px;
 width: 100%;
 margin: 0 auto 0 auto;
}
#fixed-header #cxstyle_chemelex_navigation div div{
 width: auto;
 margin: 0 auto 0 auto;
}

/*this are the chemelex link*/
#fixed-header #cxstyle_chemelex_navigation a:link {
}

/****************************
Chemelex Nav: LEFT
*****************************/
#cxstyle_chemelex_navigation_left {
 margin-left: 11px !important;
}
#cxstyle_chemelex_navigation_left button:hover {
    background-color: transparent !important;
}

#cxstyle_chemelex_navigation_left a:link{
 padding-right: 10px;
}

/*brands pulldown*/
#fixed-header #cxstyle_chemelex_navigation {
}
#fixed-header #cxstyle_chemelex_navigation .absolute{
 border-radius: 0px !important;
 margin-top: 0px !important;
 width: 250px;
}



/****************************
Chemelex Nav: RIGHT
*****************************/
#cxstyle_chemelex_navigation_right {
 _background-color: orange !important;
} 
#cxstyle_chemelex_navigation_right a:link{
 padding-right: 10px;
}
/*language tab*/
#fixed-header #cxstyle_chemelex_navigation_language button:hover{
background-color: #e5e7eb !important;
}

/*flag size*/
#fixed-header #cxstyle_chemelex_navigation_language img{
 width: 22px !important;
}
/*languages pulldown*/
#fixed-header #cxstyle_chemelex_navigation .absolute {
 border-radius: 0px !important;
 margin-top: 0px !important;
 width: 250px;
}
/*flag size*/
#fixed-header #cxstyle_chemelex_navigation .absolute img{
 width: 22px !important;
 margin-right: 10px;
}

/*===============================
this is the main nav
================================*/
#fixed-header #cxstyle_brand_navigation {
 margin: 0 auto 0 auto;
 _border: solid 1px purple;
 height: 135px; /*height of the navigation*/
}

#fixed-header #cxstyle_brand_navigation #cxstyle_brand_navigation_content{
 max-width: 1440px;
 width: 100%;
 margin: 0 auto 0 auto;
 _border: solid 1px red;
}

/*logo*/
#fixed-header #cxstyle_brand_navigation #cxstyle_logo {
 _border: solid 1px orange;
height: 80px;
 width: 50% !important;
 float: left !important;
 _background-color: aqua;
}
#fixed-header #cxstyle_brand_navigation #cxstyle_logo a:link {
 _border: solid 1px blue;
 padding: 0 !important;
 padding-bottom: 2px !important;
}
#fixed-header #cxstyle_brand_navigation #cxstyle_logo {
 padding-left: 20px !important;
}
#fixed-header #cxstyle_brand_navigation #cxstyle_logo img{
 height: 50px !important;
 padding-left: 0px !important;
 display: block !important;
 _border: solid 1px red;
}



/*tabbed navigation*/
#fixed-header #cxstyle_navigation {
 padding-top: 5px !important;
}
/*===============================
this is the mega menu
================================*/
#cxstyle_megamenu {
 overflow: hidden !important;
 _border: solid 1px red !important;
 border: solid 1px #d5d3d3 !important;
 border-top: none !important;
 max-width: 808px !important; /*width of menu title x 3 - 2px*/
}

#cxstyle_megamenu .menu-title {
 width: 270px !important; /*the width of the title set the width of the column*/
}

#cxstyle_megamenu div {
 border: solid 0px red !important;
 _display: inline-block !important;
}

#cxstyle_megamenu div div{
 border-right: solid 1px yellow !important;
 border: none !important;
}
#cxstyle_megamenu div div .flex{
 border-right: solid 1px #cccccc !important;
 border: none !important;
 
}
#cxstyle_megamenu div div div{
 border-right: solid 1px #cccccc !important;
}
#cxstyle_megamenu div div div div{
 border-right: solid 1px #cccccc !important;
 border: none !important;
}

#cxstyle_megamenu ul{
 padding-bottom: 5px;
}

/*===============================
this is the single menu
================================*/
#cxstyle_single_menu {
 width: 250px !important; /*the width of the title set the width of the column*/
 margin-top: 1px !important;
 /*make the menu scollable if longer than page*/
  max-height: calc(100vh - 250px);
 overflow-y:auto !important;
}
#cxstyle_single_menu a:link {
    margin-top:-1px !important;

}

 

/*SMALLER MONITORS*/
@media only screen and (max-width : 1400px) /*TABLET BREAKPOINT*/{
#fixed-header #cxstyle_chemelex_navigation div {
 max-width: 1240px;
}
#fixed-header #cxstyle_brand_navigation #cxstyle_brand_navigation_content{
 max-width: 1240px;
 width: 100%;
 margin: 0 auto 0 auto;
}
}

/*********************************
MOBILE NAVIGATION
*********************************/

@media only screen and (max-width : 1023px) /*HAMBURGER TRIGGER*/ {

#fixed-header #cxstyle_brand_navigation {
 margin: 0 auto 0 auto;
 _border: solid 1px purple;
 height: 85px; /*height of the navigation*/
}
/*push the content below the menu*/
.flex-grow {
 margin-top: 60px !important; /*pushed below the nav*/
 padding-top: 0 !important; /*pushed below the nav*/
}


/*===============================
this is the hamburger
================================*/
 .mobile-hamburger-container {
  position: absolute; 
  top: 19px !important;
  right: 15px; 
  z-index: 99999;
 }
 
#cxstyle_brand_navigation .mobile-hamburger-container button.mobile-hamburger-btn {
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background-color: #46768A !important;
  border: solid 1px #46768A !important;
  color: #ffffff !important;
  border-radius: 0px !important;
  /**/
  height: 45px !important;
}

 #cxstyle_brand_navigation .mobile-hamburger-container .mobile-hamburger-btn svg {
  margin: 0 !important;
  color: #ffffff !important;
 }


/*===============================
this is the brands nav
================================*/
#fixed-header #cxstyle_chemelex_navigation {
 height: 40px !important;
 padding-left: 15px;
 padding-right: 15px;
}
/*brands*/
#cxstyle_chemelex_navigation_left svg {
 transform: scale(1.7) !important;
 transform-origin: left !important;
 _background-color: blue;
}
/*languages*/
#cxstyle_chemelex_navigation_right svg {
 transform: scale(1.7) !important;
 transform-origin: left !important;
 _background-color: green;
}

/*flag size*/
#fixed-header #cxstyle_chemelex_navigation_language img{
 width: 22px !important;
}
/*languages pulldown*/
#fixed-header #cxstyle_chemelex_navigation_language_menu button {
    border: solid 1px #e5e4e4;
    padding: 7px !important;
 background-color: #ffffff;
 width: 250px;
}
#fixed-header #cxstyle_chemelex_navigation_language_menu img{
 width: 22px !important;
}


 
/*===============================
this makes the BKG transparent: fix for the scrolling bug
================================*/
#fixed-header .max-w-7xl,
#fixed-header .bg-white {
 background-color: transparent !important;
}
 
/*===============================
this is pulldown
================================*/
#cxstyle_mobile_menu {
  margin-top: 5px !important;
 margin-left: 10px !important;
 margin-right: 10px !important;
  padding: 0 !important;
  /**/
  height: calc(100vh - 150px);
 overflow-y:scroll !important;
  background-color: #ffffff !important;
 }
 /*this is for the page color*/
 #cxstyle_mobile_menu .space-y-1 {
  
 }
}




/*===============================
ALL buttons and links in the navigation
================================*/
#fixed-header div,
#fixed-header div a:link,
#fixed-header button,
#fixed-header svg{
 color: #000000 !important;
 font-weight: 600 !important;
}

/*plain*/
#fixed-header button,
#fixed-header a:link,
#fixed-header h3.menu-title,
#fixed-header #cxstyle_mobile_menu a:link
{
 padding: 8px 10px !important;
 _background-color: blueviolet  !important;
 _border: solid 1px chartreuse !important;
 font-size: 13px !important;
 line-height: 22px !important;
}
#fixed-header button span,
#fixed-header #cxstyle_megamenu a:link,
#fixed-header #cxstyle_single_menu a:link,
#fixed-header #cxstyle_mobile_menu a:link{
 font-size: 13px !important;
 line-height: 22px !important;
}



/*===============================
OVERWRITE: ALL buttons and links in the navigation
================================*/


#fixed-header button,
#fixed-header button span {
 _background-color: green !important;
}

/*--------------------------------
brands pulldown
---------------------------------*/
#cxstyle_chemelex_navigation_left .absolute a:link {
 background-color: darkcyan !important;
 background-color: #ffffff !important;
 _border: solid 1px red !important;
 border: solid 1px #e5e4e4 !important;
 margin-top: -1px !important;
}
#cxstyle_chemelex_navigation_left .absolute a:hover{
 background-color: blueviolet !important;
 background-color: #e5e4e4 !important;
}
#cxstyle_chemelex_navigation_left .absolute a:active{
 background-color: brown !important;
 background-color: #d5d3d3 !important;
}
/*
#cxstyle_chemelex_navigation_left .absolute a:visited{
 background-color: coral !important;
 background-color: #e5e4e4 !important;
}
*/
/*--------------------------------
languages pulldown
---------------------------------*/
#cxstyle_chemelex_navigation_right .absolute button span {
 background-color: transparent !important;
}

#cxstyle_chemelex_navigation_right .absolute button {
 background-color: pink !important;
 background-color: #ffffff !important;
 _border: solid 1px red !important;
 border: solid 1px #e5e4e4 !important;
 margin-top: -1px !important;
}

#cxstyle_chemelex_navigation_right .absolute button:hover{
 background-color: yellow !important;
 background-color: #e5e4e4 !important;
}

#cxstyle_chemelex_navigation_right .absolute button:active{
 background-color: brown !important;
 background-color: #d5d3d3 !important;
}
/*
#cxstyle_chemelex_navigation_right .absolute button:visited{
 background-color: coral !important;
 background-color: #e5e4e4 !important;
}
*/
/*--------------------------------
tabbed navigation
---------------------------------*/
#fixed-header #cxstyle_navigation button,
#fixed-header #cxstyle_navigation button span,
#fixed-header #cxstyle_navigation a:link {
 /**/
 font-family: "Archivo", sans-serif!important;
	font-size: 16px !important;
 line-height: 18px !important;
	font-weight: 600!important;
 /**/
 font-variation-settings: "wdth" 125 !important;
 /**/
 padding-top: 15px !important;
 padding-bottom: 13px !important;
 padding-left: 20px !important;
 /**/
 border: solid 1px white !important;
 border-bottom: none !important;
 /**/
 background-color: orange !important;
 background-color: #ffffff !important;
}

#fixed-header #cxstyle_navigation a:link {
 padding-right: 22px !important; /*add more padding - is NO arrow*/
}
#fixed-header #cxstyle_navigation button:hover,
#fixed-header #cxstyle_navigation button span:hover,
#fixed-header #cxstyle_navigation a:hover{
 background-color: blueviolet !important;
 background-color: #e5e4e4 !important;
}
#fixed-header #cxstyle_navigation button:active,
#fixed-header #cxstyle_navigation button span:active,
#fixed-header #cxstyle_navigation a:active{
 background-color: brown !important;
 background-color: #d5d3d3 !important;
}
/*
#fixed-header #cxstyle_navigation button:visited,
#fixed-header #cxstyle_navigation button span:visited,
#fixed-header #cxstyle_navigation a:visited{
 background-color: coral !important;
 background-color: #e5e4e4 !important;
}
*/

/*ARROW inside BUTTON*/
#fixed-header #cxstyle_navigation button svg {
 margin: 0 5px;
}
/*--------------------------------
mega menu
---------------------------------*/ 
/*TITLE*/
#fixed-header #cxstyle_navigation #cxstyle_megamenu h3 {
 /**/
 font-family: "Archivo", sans-serif!important;
	font-size: 16px !important;
 line-height: 18px !important;
	font-weight: 600!important;
 /**/
 font-variation-settings: "wdth" 125 !important;
 /**/
 padding-top: 5px !important;
 padding-bottom: 5px !important;
 padding-left: 15px !important;
 padding-right: 10px !important;
 /**/
 _border: solid 1px red !important;
 border: solid 1px #ffffff !important;
 _margin-top: -1px !important;
 _margin-left: -1px !important;
 /**/
 background-color: lawngreen !important;
 background-color: #e5e4e4 !important;
 background: rgba(0,0,0,0.1) !important;
 border: none !important;
 /**/
 min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: left !important;
} 
/*when there are 2 rows of links*/
#cxstyle_megamenu_first_row.flex{
}
#cxstyle_megamenu_second_row.flex{
 border-top: solid 1px #cccccc !important;
}
/*LINKS*/
#fixed-header #cxstyle_navigation #cxstyle_megamenu a:link {
 font-size: 13px !important;
 line-height: 16px !important;
 font-family: "Noto Sans", sans-serif !important;
 /**/
 _border: solid 1px red !important;
 _border: solid 1px #e5e4e4 !important;
 border: none !important;
 _border-right: solid 1px red !important;
 _border-left: solid 1px red !important;
 _margin-top: -1px !important;
 margin-left: -1px !important;
 /**/
 padding-top: 8px !important;
 padding-bottom: 8px !important;
 padding-left: 15px !important;
 padding-right: 10px !important;
 /**/
 _background-color: deeppink !important;
 _background-color: #ffffff !important;
 background: rgba(255,255,255,0) !important;
 
}
/*FORCE BREAK*/
#fixed-header #cxstyle_navigation #cxstyle_megamenu li a:link {
 width: 100% !important;
 max-width: 270px !important;
}
#fixed-header #cxstyle_navigation #cxstyle_megamenu a:hover {
 background-color: darkgoldenrod !important;
 background-color: #e5e4e4 !important;
 background: rgba(0,0,0,0.05) !important;
}
#fixed-header #cxstyle_navigation #cxstyle_megamenu a:active {
 background-color: coral !important;
 background-color: #d5d3d3 !important;
}
/*
#fixed-header #cxstyle_navigation #cxstyle_megamenu a:visited {
 background-color: cadetblue !important;
 background-color: #e5e4e4 !important;
}
/*

/*MEGA BOTTOM SPAN BUTTON*/
#cxstyle_megamenu .w-full {
 padding: 10px !important;
 border-top: 1px solid #cccccc !important;
}

#fixed-header #cxstyle_navigation #cxstyle_megamenu .w-full a:link{
 /**/
 _font-family: "Archivo", sans-serif!important;
	_font-size: 16px !important;
 _line-height: 22px !important;
	_font-weight: 600!important;
 /**/
 _font-variation-settings: "wdth" 125 !important;
 /**/
 color: #ffffff !important;
 text-align: center !important;
 /**/
 border: solid 1px #46768A !important;
 border-top: solid 1px #e5e4e4 !important;
 /**/
 width: calc(100% + 1px);
 /**/
 background-color: blue !important;
 background-color: #46768A !important;
 width: calc(100% - 0px);
 border: 0 !important;
 /**/
 border-radius: 100px !important;
    font-size: 14px !important;
    line-height: 14px !important;
    padding: 14px 24px !important;
}

#fixed-header #cxstyle_navigation #cxstyle_megamenu .w-full a:link {
}

#fixed-header #cxstyle_navigation #cxstyle_megamenu .w-full a:hover{
 background-color: #345766 !important;
 color: #ffffff;
}

#fixed-header #cxstyle_navigation #cxstyle_megamenu .w-full a:active{
 background-color: #27414D !important;
 color: #ffffff;
}

#fixed-header #cxstyle_navigation #cxstyle_megamenu .w-full a:visited{
 background-color: #46768A !important;
 color: #ffffff !important;
}


/*--------------------------------
single menu
---------------------------------*/

/*LINKS*/
#fixed-header #cxstyle_navigation #cxstyle_single_menu a:link {
 font-size: 13px !important;
 line-height: 16px !important;
 font-family: "Noto Sans", sans-serif !important;
 /**/
 /**/
 _border: solid 1px red !important;
 _border: solid 1px #e5e4e4 !important;
 border: none !important;
 margin-top: -1px !important;
 margin-left: -1px !important;
 /**/
 _background-color: crimson !important;
 _background-color: #ffffff !important;
 background: rgba(255,255,255,0) !important;
 /**/
 padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: 15px !important;
    padding-right: 2px !important;
 
}
#fixed-header #cxstyle_navigation #cxstyle_single_menu a:hover {
 background-color: cornflowerblue !important;
 background-color: #e5e4e4 !important;
 background: rgba(0,0,0,0.05) !important;
}
#fixed-header #cxstyle_navigation #cxstyle_single_menu a:active {
 background-color: darkgoldenrod !important;
 background-color: #d5d3d3 !important;
 background: rgba(0,0,0,0.1) !important;
}
/*
#fixed-header #cxstyle_navigation #cxstyle_single_menu a:visited {
 background-color: darkolivegreen !important;
 background-color: #e5e4e4 !important;
}
*/

/*SINGLE BOTTOM SPAN BUTTON*/

#cxstyle_single_menu div div{
 border: solid 1px #46768A !important;
 border-top: none !important;
 /**/
 width: calc(100% + 0px);
 margin-top: -1px;
 padding-top: 10px !important;
 padding-bottom: 10px !important;
 /**/
 font-family: "Archivo", sans-serif!important;
	font-size: 16px !important;
 line-height: 24px !important;
	font-weight: 600!important;
 /**/
 font-variation-settings: "wdth" 125 !important;
 /**/
 background-color: blue !important;
 background-color: #46768A !important;
}

#fixed-header #cxstyle_single_menu svg {
    color: #ffffff !important;
    font-weight: 600 !important;
 margin-right: 5px !important;
 margin-left: -5px !important;
}

#cxstyle_single_menu div div:hover{
 background-color: brown !important;
 background-color: #345766 !important;
}
#cxstyle_single_menu div div:active{
 background-color: bisque !important;
 background-color: #46768A !important;
}

/*--------------------------------
mobile menu
---------------------------------*/
/*BUTTON*/
#fixed-header #cxstyle_mobile_menu button {
 /**/
 font-family: "Archivo", sans-serif!important;
	font-size: 18px !important;
 line-height: 20px !important;
	font-weight: 600!important;
 /**/
 font-variation-settings: "wdth" 125 !important;
 /**/
 border: solid 1px #e5e4e4 !important;
 border-bottom: solid 1px #ffffff !important;
 /**/
 background-color: cyan !important;
 background-color: #e5e4e4 !important;
}
#fixed-header #cxstyle_mobile_menu button:hover {
 background-color: bisque !important;
 background-color: #d5d3d3 !important;
}
#fixed-header #cxstyle_mobile_menu button:active {
 background-color: coral !important;
 background-color: #e5e4e4 !important;
}
/*
#fixed-header #cxstyle_mobile_menu button:visited {
 background-color: darkgoldenrod !important;
 background-color: #d5d3d3 !important;
}
*/
/*ARROW inside BUTTON*/
#fixed-header #cxstyle_mobile_menu button svg {
 margin: 0 5px;
}
/*TITLE*/
#fixed-header #cxstyle_mobile_menu h3 {
 padding-bottom: 9px !important;
 padding-top: 8px !important;
 /**/
 font-family: "Archivo", sans-serif!important;
	font-size: 20px !important;
 line-height: 22px !important;
	font-weight: 600!important;
 /**/
 font-variation-settings: "wdth" 125 !important;
 /**/
 border: solid 1px #e5e4e4 !important;
 margin-top: -1px !important;
 /**/
 background-color: darkcyan !important;
 background-color: #d5d3d3 !important;
} 

/*LINKS in LIST*/
#fixed-header #cxstyle_mobile_menu ul li a:link {
 padding-bottom: 11px !important;
 padding-top: 10px !important;
 /**/
 font-size: 14px !important;
 line-height: 17px !important;
 font-family: "Noto Sans", sans-serif !important;
  /**/
 border: solid 1px #e5e4e4 !important;
 margin-top: -1px !important;
 /**/
 background-color: deeppink !important;
 background-color: #ffffff !important;
}
#fixed-header #cxstyle_mobile_menu ul li a:hover {
 background-color: darkgoldenrod !important;
 background-color: #e5e4e4 !important;
}
#fixed-header #cxstyle_mobile_menu ul li a:active {
 background-color: coral !important;
 background-color: #d5d3d3 !important;
}
/*
#fixed-header #cxstyle_mobile_menu ul li a:visited {
 background-color: cadetblue !important;
 background-color: #e5e4e4 !important;
}
*/

/*LINKS NOT in LIST*/
#fixed-header #cxstyle_mobile_menu a:link {
 /**/
 font-family: "Archivo", sans-serif!important;
	font-size: 18px !important;
 line-height: 20px !important;
	font-weight: 600!important;
 /**/
 font-variation-settings: "wdth" 125 !important;
 /**/
 border: solid 1px #e5e4e4 !important;
 border-bottom: solid 1px #ffffff !important;
 /**/
 background-color: deeppink !important;
 background-color: #e5e4e4 !important;
}
#fixed-header #cxstyle_mobile_menu a:hover {
 background-color: darkgoldenrod !important;
 background-color: #d5d3d3 !important;
}
#fixed-header #cxstyle_mobile_menu a:active {
 background-color: coral !important;
 background-color: #e5e4e4 !important;
}
/*
#fixed-header #cxstyle_mobile_menu a:visited {
 background-color: cadetblue !important;
 background-color: #e5e4e4 !important;
}
*/

/*********************************
DUPLICATING AND SPLITTING THE #fixed-header TO ALLOW LANGUAGE PULLDOWN TO BE ON TOP OF THE atomic SEARCH
*********************************/

#fixed-header:first-child {
 top: 0px !important;
 z-index: 9999999 !important;
}

#fixed-header {
 top: 40px !important;
}


/*********************************
THIS IS THE SEARCH
*********************************/

#fixed-header #cxstyle_brand_navigation #cxstyle_search {
 border: solid 1px violet;
 width: 50% !important;
 float: left !important;
 _background-color: yellow;
 text-align: right !important;
 margin: 0 !important;
 border: none !important;
}
#fixed-header #cxstyle_brand_navigation #cxstyle_search form{
 margin: 0 15px !important;
 float: right !important;
 border-radius: none !important;
 font-size: 12pt !important;
 font-weight: 400 !important;
}
#fixed-header #cxstyle_brand_navigation #cxstyle_search form input{
 padding: 5px 5px 5px 30px !important;
 font-weight: 400 !important;
}
#fixed-header #cxstyle_brand_navigation #cxstyle_search form div div{
 padding: 10px !important;
}
#fixed-header #cxstyle_brand_navigation #cxstyle_search .rounded-md {
 border-radius: 0 !important;
}



/*===============================
this is the main nav
================================*/
/*hide this search*/
/*#fixed-header #cxstyle_search {
 display: none;
}
*/
/*this is the logo*/
/*#fixed-header #cxstyle_brand_navigation #cxstyle_logo {
 _border: solid 1px orange;
 width: 100% !important;
 width: 100vw !important;
 float: left !important;
 _background-color: aqua;
 padding: 10px;
}
*/


/*this is mobile search*/
/*
#fixed-header #cxstyle_mobile_menu form{
 margin: 0 !important;
 border: solid 10px #e5e4e4 !important;
 border-bottom: solid 15px #e5e4e4 !important;
 border-radius: none !important;
 font-size: 12pt !important;
 font-weight: 400 !important;
 width: 100% !important;
 background-color: white;
}

#fixed-header #cxstyle_mobile_menu form input{
 padding: 12px 12px 12px 35px !important;
 font-weight: 400 !important;
 border: solid 1px #999999;
}
#fixed-header #cxstyle_mobile_menu form div div{
 padding: 10px !important;
}
/*


/*********************************
SEARCH ATOMIC
*********************************/
/*REMOVE THIS*/
#fixed-header #cxstyle_brand_navigation #cxstyle_logo {
    height: 80px;
    width: 50% !important;
    float: left !important;
    _background-color: aqua;
 _border: solid 1px aqua !important;
}

/*THIS IS THE REGULAR SEARCH in DESKTOP, THE SEARCH ON THE RUSULT PAGE INSIDE THE RESULTS CSS*/

#fixed-header #cxstyle_brand_navigation #cxstyle_search {
 width: calc(50% - 20px);
 float: right !important;
 text-align: right !important;
 padding: 0 !important;
 padding-right: 20px !important;
 padding-top: 10px !important;
 display: flex !important;
 max-height: 60px;
  _background-color: yellow;
 _border: solid 1px red !important;
}
/*align search to the right*/
#fixed-header #cxstyle_brand_navigation #cxstyle_search atomic-search-interface {
 display: flex !important;
  justify-content: flex-end !important;
 _background-color: aqua;
}
/*reduce the size of the search*/
atomic-search-box.main-search {
 width: 500px !important;
 transform: scale(.8) !important;
 transform-origin: 0px 0px !important;
}

/*this make the suggestion pulldowb box white*/
atomic-search-box::part(suggestions-wrapper) {
 background-color: #ffffff !important;
}

/*********************************
HAMBURGER MENU FROM HERE ON
*********************************/
@media only screen and (max-width : 1024px) {
/*hide regular desktop search*/
 #fixed-header #cxstyle_brand_navigation #cxstyle_search atomic-search-interface {
 display: none !important;
}
/*make this wider as there is no search*/
#fixed-header #cxstyle_brand_navigation #cxstyle_logo {
    width: calc(100%) !important; 
}
/*these are the pulldown buttons*/
#fixed-header #cxstyle_mobile_menu button {
 padding: 15px !important;
}
/*these are the mainlink*/
#fixed-header #cxstyle_mobile_menu .py-1 .py-3 {
  padding: 15px !important;
 }
/*these are the pulldown subcategory*/
#fixed-header #cxstyle_mobile_menu h3 {
    padding-bottom: 9px !important;
    padding-top: 8px !important;
    padding: 15px !important;
}
/*these are the pulldown subcategory links*/
#fixed-header #cxstyle_mobile_menu li .py-2 {
    padding: 15px !important;
}
#fixed-header #cxstyle_mobile_menu ul li a:link {
    padding: 15px !important;
    font-size: 16px !important;
    line-height: 19px !important;
}
/*this is the style in search in the pulldown*/
#cxstyle_mobile_menu {}
#cxstyle_mobile_menu .py-3 {
 background-color: #d5d3d3;
 padding: 15px !important; 
 }
 #cxstyle_mobile_menu form input.py-3 {
  padding: 10px 10px 10px 40px !important; 
  background-color: #ffffff !important; 
 }
 /*this is the lens*/
 #cxstyle_mobile_menu form .absolute {
  left: 10px !important; 
 }
 /*brand menu*/
 #cxstyle_chemelex_navigation_left {
  margin-left: 0 !important; 
 }
}

@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
/*fix the menu bug in mobile;*/
 #cxstyle_mobile_menu {
  overflow-x: hidden; /* Hides horizontal overflow */
 }
 h3.menu-title {
  width: 100%;
  background-color: aqua !important;
  width: 133% !important;
  font-size: 18px !important;
  line-height: 20px !important;
 }
}

/*REVISE MOBILE HIERARCHY*/
#cxstyle_mobile_menu {
 _border: solid 10px red;
}
/*two level*/
#cxstyle_mobile_menu .space-y-4   {
 _border: solid 10px orange;
}
#cxstyle_mobile_menu .space-y-4 .space-y-2   {
 _border: solid 10px blue;
} 
#fixed-header #cxstyle_mobile_menu .space-y-4 h3.menu-title {
 /**/
 padding: 15px !important;
 font-size: 18px !important;
  line-height: 20px !important;
}

#fixed-header #cxstyle_mobile_menu .space-y-4 .space-y-2 a:link {
 /**/
 padding: 12px !important;
 font-size: 14px !important;
 line-height: 17px !important;
 font-family: "Noto Sans", sans-serif !important;
 background-color: #ffffff !important;
}

#fixed-header #cxstyle_mobile_menu .space-y-4 .space-y-2 a:hover{
background-color: #f2f1f1 !important;
}

/*one level*/
#cxstyle_mobile_menu .space-y-2  {
 _border: solid 10px aqua;
}

#fixed-header #cxstyle_mobile_menu .space-y-2 a:link {
 /**/
 padding: 12px !important;
 font-size: 14px !important;
 line-height: 17px !important;
 font-family: "Noto Sans", sans-serif !important;
 background-color: #ffffff !important;
}
#fixed-header #cxstyle_mobile_menu .space-y-2 a:hover{
background-color: #f2f1f1 !important;
}

  /*************************
  COVEO SEARCH BUG FIX
  **************************/
  #cxstyle_search {
   display: flex !important;
  justify-content: flex-end !important;
   _background-color: aqua;
}

  #fixed-header #cxstyle_brand_navigation #cxstyle_search form input{
  border: solid 1px #000000 !important;
   color: #000000 !important;
   font-weight: 800 !important;
   font-size: 13px !important;
   margin: -6px 0 0 15px !important;
   padding: 11px 15px 12px 12px !important;
   width: 400px;
}


#fixed-header #cxstyle_brand_navigation #cxstyle_search .main-search {
 border: none !important;
   width: 380px;
 padding: 0 !important;
 margin: 0 !important;
 margin-top: -5px !important;
}
#fixed-header #cxstyle_brand_navigation #cxstyle_search .main-search .border-gray-300 {
 border: solid 1px #000000 !important;
}
/*this is the field*/
#fixed-header #cxstyle_brand_navigation #cxstyle_search .main-search input{
 font-size: 13px !important;
 line-height: 15px !important;
 padding: 14px 14px 13px 13px !important;
 color: #000000 !important;
 width: 360px !important;
}
/*this is the lend*/
#fixed-header #cxstyle_brand_navigation #cxstyle_search .main-search button{
   padding: 14px !important;
 color: #000000 !important;
}

#fixed-header #cxstyle_brand_navigation #cxstyle_search .main-search button svg {
  width: 13px !important;
  height: 13px !important;
}


  @media only screen and (max-width : 1023px) {
  #fixed-header #cxstyle_brand_navigation #cxstyle_search form input,
  #fixed-header #cxstyle_brand_navigation #cxstyle_search .main-search{
   display: none !important;
    }
}


/* ========== chemelex_bottomnav.css (5.26 KB) ========== */

/*********************************
BOTTOM NAV
*********************************/

#cxstyle_footer {
 padding-top: 50px !important;
 padding-bottom: 50px !important;
 background: #46768A !important;
 /**/
 _border: solid 10px red;
}

#cxstyle_footer .max-w-7xl {
 max-width: 1440px;
 width: 100%;
 margin: 0 auto 0 auto;
 padding: 0px 15px !important;
 background: #46768A !important;
 /**/
 _border: solid 10px yellow;
 _display: none;
}

#cxstyle_footer .max-w-7xl .grid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -1rem;
    margin-left: -1rem;
 _background-color: violet !important;
 /**OVERWRITE**/
 _flex-wrap:nowrap !important;
 margin-right: 0rem !important;
 margin-left: 0rem !important;
 gap: 0  !important;
 
}

/*THIS IS THE LEFT*/
#cxstyle_footer #cxstyle_footer_logo {
 margin: 0;
 padding-bottom: 40px;
 padding-right: 25px;
 margin-right: 24px;
 border-right: solid 1px #5b98b1;
 width: calc(100% - 440px);
 
 /**/
 _background-color: blue !important;

}

/*LOGO*/
#cxstyle_footer #cxstyle_footer_logo #cxstyle_footer_logo_image {
 margin: 0;
 padding: 0px;
 padding-bottom: 30px;
 width: 100%;
 display: block;
 /**/
 background-image: url(images/Chemelex_Tag_RGB_White.png) !important;
	background-position: top 25px left 315px !important;
 background-repeat: no-repeat !important;
 background-size: 230px !important;
 background-size: cover;
 /**/
 _border: solid 1px yellow;
}
#cxstyle_footer #cxstyle_footer_logo #cxstyle_footer_logo_image img{
 width: 100%;
 max-width: 300px;
 display: block;
 /**/
 _border: solid 1px pink;
}

/*TAGLINE: HIDING THIS*/
#cxstyle_footer #cxstyle_footer_logo .text-xs {
 margin: 0;
 padding: 0px;
 width: 100%;
 display: none !important;
 /**/
 _border: solid 1px yellow;
}
#cxstyle_footer #cxstyle_footer_logo p {
 color: #ffffff !important;
 font-size: 14px;
 line-height: 18px;
}

/*THIS IS THE RIGHT*/
#cxstyle_footer_social_media {
 margin: 0;
 padding: 0px;
 width: 150px;
 /**/
 _background-color: pink;
 float: right;
}

#cxstyle_footer_social_media #cxstyle_footer_social_media{
 border: none !important;
 padding: 0 !important;
 margin: 0 !important;
 text-align: center !important;
 display: flex !important;
}

#cxstyle_footer_social_media p {
 color: #ffffff !important;
 font-size: 14px;
 line-height: 18px;
 text-align: center;
 padding-bottom: 10px;
 text-align: center !important;
}
#cxstyle_footer_social_media #cxstyle_footer_social_media a:link{
 text-align: right !important;
}

#cxstyle_footer_social_media svg{
 fill: #ffffff !important;
 margin-right: -5px !important;
 height: 25px !important;
 width: 25px !important;
 float: right !important;
 _background-color: aqua !important;
}

/*THIS IS THE QUICK LINKS*/
#cxstyle_footer_quick_links {
 width: 220px;
 padding-bottom: 15px;
 padding-left: 25px;
 margin-left: 24px;
 border-left: solid 1px #5b98b1;
 /**/
 _background-color: yellow;
 float: right;
 
}
#cxstyle_footer_quick_links h3 {
    font-family: Archivo, sans-serif !important;
    font-weight: 600 !important;
    font-size: 32pt !important;
    line-height: 40pt !important;
    letter-spacing: 0%!important;
    text-align: left !important;
    color: #000 !important;
    padding: 20px !important;
    margin: 0 !important;
    width: 100%;
 /**OVERWRITE**/
 padding: 0px !important;
 color: #ffffff !important;
 font-size: 22px !important;
    line-height: 26px !important;
 padding-bottom: 15px !important;
}

#cxstyle_footer_quick_links ul {
 font-size: 14px !important;
    line-height: 16px !important;
}

#cxstyle_footer_quick_links ul li{
 padding-bottom: 6px;
}
#cxstyle_footer hr {
 _background-color: red;
 display: none;
}
/*THIS IS THE COPYRIGHT*/
.cxstyle-copyright-container {
 _background-color: chartreuse;
 font-size: 14px !important;
    line-height: 16px !important;
 
}

.cxstyle-copyright-container .justify-center {
 justify-content: center;
 /**OVERWRITE**/
 justify-content: left;
 padding-top: 10px !important;
 gap: 5px !important;
}



@media only screen and (max-width : 1024px) /*MOBILE BREAKPOINT*/{
cxstyle_footer #cxstyle_footer_logo {
    border: none !important;
}
/*LOGO*/
#cxstyle_footer #cxstyle_footer_logo #cxstyle_footer_logo_image {
 padding-bottom: 60px;
	background-position: top 60px left 0 !important;
}
/*THIS IS THE LEFT*/
#cxstyle_footer #cxstyle_footer_logo {
 margin: 0;
 padding-bottom: 10px;
 padding-right: 0px;
 margin-right: 0px;
 border-right: none;
 width: calc(100% - 0px) !important;
}
 
#cxstyle_footer_social_media p {
    text-align: left !important;
}


 /*THIS IS THE QUICK LINKS*/
#cxstyle_footer_quick_links {
 width: 220px;
 padding-bottom: 15px;
 padding-left: 25px;
 margin-left: 24px;
 border-left: solid 1px #5b98b1;
 /**/
 float: right;
 
}

.cxstyle-copyright-container .justify-center {
    justify-content: center;
    justify-content: left;
    padding-top: 10px !important;
    gap: 5px !important;
 display: block;
}
.cxstyle-copyright-container .justify-center span{
 display: none;
}
.cxstyle-copyright-container .justify-center a:link{
 width: 100% !important;
 display: block;
 padding-bottom: 6px !important;
}
 
 

}

@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
 
 /*THIS IS THE QUICK LINKS*/
#cxstyle_footer_quick_links {
 width: 100%;
 padding-top: 15px;
 padding-bottom: 15px;
 padding-left: 0px;
 margin-left: 0px;
 border-left: none;
 /**/
 float: left;
 
}
}


/* ========== chemelex_slideshow.css (31.05 KB) ========== */

@charset "UTF-8";
/* CSS Document */
/* v:0912:*/
/*********************************
FIXES OR ADDITION
- Fixes BTN click on slides
*********************************/



/*********************************/
/*make go behind navigation*/
.pointer-events-none {
 z-index: 9 !important;
}

/*********************************
COMMON ELEMENTS: SLIDESHOW INTERFACE
*********************************/
/*make go behind navigation*/
.pointer-events-none {
 z-index: 9 !important
}
/*---------------------
LEFT AND RIGHT ARROWS
----------------------*/

#cxstyle_slideshow_container .rounded-full,
#cxstyle_slideshow_fullwidth_container .rounded-full{
 width: 40px !important;
 height: 40px !important;
 background-color: rgba(0, 0, 0, 0.7) !important;
 color: #ffffff !important;
 margin: 20px !important;
 border-radius: 50% !important;
}
#cxstyle_slideshow_container .rounded-full:hover,
#cxstyle_slideshow_fullwidth_container .rounded-full:hover{
 background-color: rgba(0, 0, 0, 0.5) !important;
}
/*---------------------
DOTS
----------------------*/
#cxstyle_slideshow_container .absolute.bottom-8,
#cxstyle_slideshow_fullwidth_container .absolute.bottom-8 {
 z-index: 9 !important;
 position: absolute !important;
 bottom: 10px !important;
}
@media only screen and (max-width : 768px) /*TABLET BREAKPOINT*/{
}
@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
#cxstyle_slideshow_container .rounded-full,
#cxstyle_slideshow_fullwidth_container .rounded-full{
 width: 35px !important;
 height: 35px !important;
 margin: 15px !important;
}
}


/*********************************
SLIDESHOW WRAPPER: VERTICAL SIZES
*********************************/
/*---------------------------------
VERTICAL
----------------------------------*/

/*DESKTOP OR NONE*/
/* Reserve height on parent container to prevent CLS */
.cxstyle-slideshow.cxstyle-height-regular {
 min-height: 500px !important;
}
.cxstyle-slideshow.cxstyle-height-regular .cxstyle-slideshow-wrapper {
 height: 500px !important;
 width: 100%;
 position: relative;
}
/* Reserve height on parent containers to prevent CLS */
.cxstyle-slideshow.cxstyle-height-100pct,
.cxstyle-slideshow.cxstyle-height-tall {
 min-height: calc(100vh - 175px) !important;
}
.cxstyle-slideshow.cxstyle-height-short {
 min-height: 250px !important;
}
.cxstyle-slideshow.cxstyle-height-100pct .cxstyle-slideshow-wrapper,
.cxstyle-slideshow.cxstyle-height-tall .cxstyle-slideshow-wrapper {
 width: 100%;
 position: relative;
 height: calc(100vh - 175px) !important;
}
.cxstyle-slideshow.cxstyle-height-short .cxstyle-slideshow-wrapper {
 height: 250px !important;
 width: 100%;
 position: relative;
}

/*NOT USED*/
.cxstyle-slideshow.cxstyle-height-auto .cxstyle-slideshow-wrapper {
 height: auto !important;
}
.cxstyle-slideshow.cxstyle-height-auto .cxstyle-slideshow-wrapper:before{
  content: "NOT USED";
 background-color: red !important;
 color: #ffffff !important;
 position: absolute;
 top: 0 !important;
 left: 0 !important;
}

/*RESPONSIVE*/
@media only screen and (max-width : 768px) /*TABLET BREAKPOINT*/{
}

@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
}


/*********************************
OVERLAY ON TOP OF IMAGE
*********************************/
#cxstyle_content_overlay {
 /*these classes styles are now inside here: absolute inset-0 flex*/
 position: absolute;
 display: flex;
 inset: calc(var(--spacing) * 0);
 
}


/*********************************
COPY CONTAINER:
*********************************/
.cxstyle-slideshow #cxstyle_copy_container {
 /*this is inside the sitestyle.css*/
 background-image: red !important;
 _border: solid 50px red !important;
 z-index: 999 !important;
 position: relative !important;
}

/*COPY width*/
.cxstyle-slideshow #cxstyle_copy_container #cxstyle_copy_position {
 padding: 20px 20px !important;
 width: 100% !important;
 _max-width: calc(50% - 40px) !important;
 max-width: calc(700px - 0px) !important;
 _border: solid 10px aqua !important;
}
/*COPY width when INSIDE BANNERS*/
.cxstyle-slideshow.cxstyle-height-short #cxstyle_copy_container #cxstyle_copy_position {
 max-width: calc(100% - 0px) !important;
}
/*COPY width in REVERSE MASK*/
.cxstyle-slideshow.cxstyle-height-short .cxstyle-mask-x-mask-left-b #cxstyle_copy_container #cxstyle_copy_position {
  max-width: calc(650px - 0px) !important;
}
.cxstyle-slideshow .cxstyle-align-center #cxstyle_copy_container #cxstyle_copy_position {
 padding: 20px;
 width: 100% !important;
 _max-width: calc(50% - 40px) !important;
 max-width: calc(800px - 0px) !important;
}



/*********************************
HORIZONTAL ALIGNMENT INSIDE THE SLIDE:
*********************************/

/*LEFT*/
.cxstyle-slideshow .cxstyle-align-left #cxstyle_copy_container{
 display: flex;
  align-items: center; /*center vertically*/
 justify-content: left; /*left horizontally*/
}
#cxstyle_slideshow_fullwidth_container .cxstyle-align-left #cxstyle_copy_container{
 padding-left: 50px !important;
 padding-right: 50px !important;
 /**/
 _border: solid 10px red;
 
}
#cxstyle_slideshow_container .cxstyle-align-left #cxstyle_copy_container{
 padding-left: 75px !important;
 padding-right: 75px !important;
 /**/
}

.cxstyle-slideshow .cxstyle-align-left #cxstyle_copy_container h1,
.cxstyle-slideshow .cxstyle-align-left #cxstyle_copy_container h2,
.cxstyle-slideshow .cxstyle-align-left #cxstyle_copy_container h3,
.cxstyle-slideshow .cxstyle-align-left #cxstyle_copy_container h4,
.cxstyle-slideshow .cxstyle-align-left #cxstyle_copy_container h5,
.cxstyle-slideshow .cxstyle-align-left #cxstyle_copy_container p {
 text-align: left !important;
}

.cxstyle-slideshow .cxstyle-align-left .cxstyle-button button{
 float: left;
}

/*RIGHT*/
.cxstyle-slideshow .cxstyle-align-right #cxstyle_copy_container{
 display: flex;
  align-items: center; /*center vertically*/
 justify-content: right; /*right horizontally*/
}
#cxstyle_slideshow_fullwidth_container .cxstyle-align-right #cxstyle_copy_container{
 padding-left: 50px !important;
 padding-right: 50px !important;
 /**/
 _border: solid 10px red;
}
#cxstyle_slideshow_container .cxstyle-align-right #cxstyle_copy_container{
 padding-left: 75px !important;
 padding-right: 75px !important;
 /**/
 _border: solid 10px blue;
}
.cxstyle-slideshow .cxstyle-align-right #cxstyle_copy_container h1,
.cxstyle-slideshow .cxstyle-align-right #cxstyle_copy_container h2,
.cxstyle-slideshow .cxstyle-align-right #cxstyle_copy_container h3,
.cxstyle-slideshow .cxstyle-align-right #cxstyle_copy_container h4,
.cxstyle-slideshow .cxstyle-align-right #cxstyle_copy_container h5,
.cxstyle-slideshow .cxstyle-align-right #cxstyle_copy_container p {
 text-align: right !important;
}

.cxstyle-slideshow .cxstyle-align-right .cxstyle-button button{
 float: right;
}

/*CENTER*/
.cxstyle-slideshow .cxstyle-align-center #cxstyle_copy_container{
 display: flex;
  align-items: center; /*center vertically*/
  justify-content: center; /*center horizontally*/
}
#cxstyle_slideshow_fullwidth_container .cxstyle-align-center #cxstyle_copy_container{
 padding-left: 50px !important;
 padding-right: 50px !important;
 /**/
 _border: solid 10px red;
}
#cxstyle_slideshow_container .cxstyle-align-center #cxstyle_copy_container{
 padding-left: 75px !important;
 padding-right: 75px !important;
 /**/
 _border: solid 10px blue;
}
.cxstyle-slideshow .cxstyle-align-center #cxstyle_copy_container h1,
.cxstyle-slideshow .cxstyle-align-center #cxstyle_copy_container h2,
.cxstyle-slideshow .cxstyle-align-center #cxstyle_copy_container h3,
.cxstyle-slideshow .cxstyle-align-center #cxstyle_copy_container h4,
.cxstyle-slideshow .cxstyle-align-center #cxstyle_copy_container h5,
.cxstyle-slideshow .cxstyle-align-center #cxstyle_copy_container p {
 text-align: center !important;
}

.cxstyle-slideshow .cxstyle-align-center .cxstyle-button button{
 display: block;
 margin: 0 auto 0 auto !important;
}


/*********************************
COPY COLOR INSIDE THE SLIDE: ALWAYS WHITE EXCEPT WHERE OVERWRITE
*********************************/
.cxstyle-bgcolor- #cxstyle_slide_container h1,
.cxstyle-bgcolor- #cxstyle_slide_container h2,
.cxstyle-bgcolor- #cxstyle_slide_container h3,
.cxstyle-bgcolor- #cxstyle_slide_container h4,
.cxstyle-bgcolor- #cxstyle_slide_container p,
.cxstyle-bgcolor- #cxstyle_slide_container ul,
.cxstyle-bgcolor- #cxstyle_slide_container li,
/**/
.cxstyle-bgcolor-white #cxstyle_slide_container h1,
.cxstyle-bgcolor-white #cxstyle_slide_container h2,
.cxstyle-bgcolor-white #cxstyle_slide_container h3,
.cxstyle-bgcolor-white #cxstyle_slide_container h4,
.cxstyle-bgcolor-white #cxstyle_slide_container p,
.cxstyle-bgcolor-white #cxstyle_slide_container ul,
.cxstyle-bgcolor-white #cxstyle_slide_container li,
/**/
.cxstyle-bgcolor-gray #cxstyle_slide_container h1,
.cxstyle-bgcolor-gray #cxstyle_slide_container h2,
.cxstyle-bgcolor-gray #cxstyle_slide_container h3,
.cxstyle-bgcolor-gray #cxstyle_slide_container h4,
.cxstyle-bgcolor-gray #cxstyle_slide_container p,
.cxstyle-bgcolor-gray #cxstyle_slide_container ul,
.cxstyle-bgcolor-gray #cxstyle_slide_container li,
/**/
.cxstyle-bgcolor-black #cxstyle_slide_container h1,
.cxstyle-bgcolor-black #cxstyle_slide_container h2,
.cxstyle-bgcolor-black #cxstyle_slide_container h3,
.cxstyle-bgcolor-black #cxstyle_copy_container h4,
.cxstyle-bgcolor-black #cxstyle_slide_container p,
.cxstyle-bgcolor-black #cxstyle_slide_container ul,
.cxstyle-bgcolor-black #cxstyle_slide_container li,
/**/
.cxstyle-bgcolor-connection-red #cxstyle_slide_container h1,
.cxstyle-bgcolor-connection-red #cxstyle_slide_container h2,
.cxstyle-bgcolor-connection-red #cxstyle_slide_container h3,
.cxstyle-bgcolor-connection-red #cxstyle_slide_container h4,
.cxstyle-bgcolor-connection-red #cxstyle_slide_container p,
.cxstyle-bgcolor-connection-red #cxstyle_slide_container ul,
.cxstyle-bgcolor-connection-red #cxstyle_slide_container li,
/**/
.cxstyle-bgcolor-steel-blue #cxstyle_slide_container h1,
.cxstyle-bgcolor-steel-blue #cxstyle_slide_container h2,
.cxstyle-bgcolor-steel-blue #cxstyle_slide_container h3,
.cxstyle-bgcolor-steel-blue #cxstyle_slide_container h4,
.cxstyle-bgcolor-steel-blue #cxstyle_slide_container p,
.cxstyle-bgcolor-steel-blue #cxstyle_slide_container ul,
.cxstyle-bgcolor-steel-blue #cxstyle_slide_container li {
 color: #ffffff !important;
 /*ADD COPY SHADOW FOR THE SLIDE*/
 text-shadow: 0px 1px 4px rgba(0,0,0,0.6);
}


/*********************************
MASK COLOR on TOP of SLIDE
*********************************/

/*---------------------------------
MASK THE ENTIRE SLIDE
----------------------------------*/
.cxstyle-slideshow .cxstyle-blackmask-whitecopy  {
 background-color: rgba(0, 0, 0, 0.4);
}
.cxstyle-slideshow .cxstyle-whitemask-blackcopy  {
 background-color: rgba(255, 255, 255, 0.4);
}

/*---------------------------------
MASK THE COPY CONTAINER - OSOLETE
----------------------------------*/
.cxstyle-slideshow .cxstyle-whitebox-blackcopy #cxstyle_copy_container #cxstyle_copy_position {
 background-color: rgba(255, 255, 255, 0.4) !important;
}
.cxstyle-slideshow .cxstyle-blackbox-whitecopy #cxstyle_copy_container #cxstyle_copy_position {
 background-color: rgba(0, 0, 0, 0.4) !important;
}
/*add thin border and inside shade*/
.cxstyle-slideshow .cxstyle-whitebox-blackcopy,
.cxstyle-slideshow .cxstyle-blackbox-whitecopy {
 border: solid 1px #e5e4e4 !important;
 /**/
 box-shadow: 0px 0px 52px 0px rgba(0,0,0,0.36) inset;
-webkit-box-shadow: 0px 0px 52px 0px rgba(0,0,0,0.36) inset;
-moz-box-shadow: 0px 0px 52px 0px rgba(0,0,0,0.36) inset;
}

/*---------------------------------
NO MASK, RIGHT ON TOP OF IMAGE
----------------------------------*/
.cxstyle-slideshow .cxstyle-nomask-whitecopy  {
}
.cxstyle-slideshow .cxstyle-nomask-blackcopy  {
}


/*********************************
BKG - GRAPHIC ELEMENTS ON TOP OF SLIDE
*********************************/
/*
cxstyle-mask-x-mask-left-a - 
cxstyle-mask-x-mask-left-b -
cxstyle-mask-x-mask-right-a 
cxstyle-mask-x-mask-right-b
cxstyle-mask-x-mask-top-a
cxstyle-mask-x-mask-top-b
cxstyle-mask-x-mask-bottom-a
cxstyle-mask-x-mask-bottom-b
cxstyle-mask-x-mask-none
*/


/* --------------------------------------------------------
X EDGE RIGHT: THIS IS USED:
for this configuration should be:
cxstyle-nomask-whitecopy cxstyle-mask-x-mask-right-a cxstyle-align-left
-------------------------------------------------------- */
.cxstyle-slideshow .cxstyle-mask-x-mask-right-a {
 background-image: url(images/cxstyle-mask-x-mask-right-a.png), linear-gradient(-90deg,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 80%) !important;
	background-position: center right !important;
 background-size: contain;
 background-repeat: no-repeat !important;
 border: none !important;
 box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
}

/* --------------------------------------------------------
X FULL LEFT with RED TRIANGLE RIGHT: THIS IS USED:
for this configuration should be:
cxstyle-nomask-whitecopy cxstyle-mask-x-mask-right-a cxstyle-align-left
-------------------------------------------------------- */
.cxstyle-slideshow .cxstyle-mask-x-mask-left-b {
 background-image: url(images/cxstyle-mask-x-mask-left-b.png) !important;
	background-position: center center !important;
 background-size: cover;
 background-repeat: no-repeat !important;
 border: none !important;
 box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
}
.cxstyle-slideshow .cxstyle-mask-x-mask-left-b:before {
 content:'';
    display:block;
    background-image: url(images/cxstyle-mask-x-mask-bottom-a_corner.png);
 background-position: top right !important;
 background-size: contain;
 background-repeat: no-repeat !important;
    width:100%;
    height: 100%;
 position: absolute !important;
 right: 0 !important;
}
/*OVERWRITE COPY COLOR: USUALLY WHITE - BLACK ON THIS*/
.cxstyle-bgcolor-white .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h1,
.cxstyle-bgcolor-white .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h2,
.cxstyle-bgcolor-white .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h3,
.cxstyle-bgcolor-white .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h4,
.cxstyle-bgcolor-white .cxstyle-mask-x-mask-left-b #cxstyle_copy_container p,
.cxstyle-bgcolor-white .cxstyle-mask-x-mask-left-b #cxstyle_copy_container ul,
.cxstyle-bgcolor-white .cxstyle-mask-x-mask-left-b #cxstyle_copy_container li,
/**/
.cxstyle-bgcolor-gray .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h1,
.cxstyle-bgcolor-gray .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h2,
.cxstyle-bgcolor-gray .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h3,
.cxstyle-bgcolor-gray .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h4,
.cxstyle-bgcolor-gray .cxstyle-mask-x-mask-left-b #cxstyle_copy_container p,
.cxstyle-bgcolor-gray .cxstyle-mask-x-mask-left-b #cxstyle_copy_container ul,
.cxstyle-bgcolor-gray .cxstyle-mask-x-mask-left-b #cxstyle_copy_container li,
/**/
.cxstyle-bgcolor-black .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h1,
.cxstyle-bgcolor-black .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h2,
.cxstyle-bgcolor-black .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h3,
.cxstyle-bgcolor-black .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h4,
.cxstyle-bgcolor-black .cxstyle-mask-x-mask-left-b #cxstyle_copy_container p,
.cxstyle-bgcolor-black .cxstyle-mask-x-mask-left-b #cxstyle_copy_container ul,
.cxstyle-bgcolor-black .cxstyle-mask-x-mask-left-b #cxstyle_copy_container li,
/**/
.cxstyle-bgcolor-connection-red .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h1,
.cxstyle-bgcolor-connection-red .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h2,
.cxstyle-bgcolor-connection-red .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h3,
.cxstyle-bgcolor-connection-red .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h4,
.cxstyle-bgcolor-connection-red .cxstyle-mask-x-mask-left-b #cxstyle_copy_container p,
.cxstyle-bgcolor-connection-red .cxstyle-mask-x-mask-left-b #cxstyle_copy_container ul,
.cxstyle-bgcolor-connection-red .cxstyle-mask-x-mask-left-b #cxstyle_copy_container li,
/**/
.cxstyle-bgcolor-steel-blue .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h1,
.cxstyle-bgcolor-steel-blue .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h2,
.cxstyle-bgcolor-steel-blue .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h3,
.cxstyle-bgcolor-steel-blue .cxstyle-mask-x-mask-left-b #cxstyle_copy_container h4,
.cxstyle-bgcolor-steel-blue .cxstyle-mask-x-mask-left-b #cxstyle_copy_container p,
.cxstyle-bgcolor-steel-blue .cxstyle-mask-x-mask-left-b #cxstyle_copy_container ul,
.cxstyle-bgcolor-steel-blue .cxstyle-mask-x-mask-left-b #cxstyle_copy_container li {
 color: #000000 !important;
 /*REMOVE COPY SHADOW FOR THESE TYPE*/
 text-shadow: none !important;
}

/*OVERWRITE COPY WIDTH*/
.cxstyle-slideshow .cxstyle-mask-x-mask-left-b #cxstyle_copy_container #cxstyle_copy_position {
 padding: 20px 20px !important;
 width: 100% !important;
 _max-width: calc(50% - 40px) !important;
 max-width: calc(630px - 0px) !important;
 _border: solid 10px red;
}

.cxstyle-slideshow .cxstyle-mask-x-mask-left-b #cxstyle_copy_container #cxstyle_copy_position .cxstyle-description{
 width: 90% !important;
}

/* --------------------------------------------------------
LEDGE BOTTOM LEFT with RED TRIANGLE TOP RIGHT: THIS IS USED
for this configuration should be:
cxstyle-nomask-whitecopy cxstyle-mask-x-mask-bottom-a cxstyle-align-left
-------------------------------------------------------- */

.cxstyle-slideshow .cxstyle-mask-x-mask-bottom-a {
 background-image: url(images/cxstyle-mask-x-mask-bottom-a.png), linear-gradient(-90deg,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 80%) !important;
	background-position: bottom left !important;
 background-size: contain;
 background-repeat: no-repeat !important;
 border: none !important;
 box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
 _border: solid 10px red;
}
.cxstyle-slideshow .cxstyle-mask-x-mask-bottom-a:before {
 content:'';
    display:block;
    background-image: url(images/cxstyle-mask-x-mask-bottom-a_corner.png);
 background-position: top right !important;
 background-size: contain;
 background-repeat: no-repeat !important;
    width:100%;
    height: 100%;
 position: absolute !important;
 right: 0 !important;
}
/*OVERWRITE COPY POSITION TO CLEAR LEDGE WHEN ON ".cxstyle-height-regular" BANNER HEIGHT*/
.cxstyle-slideshow.cxstyle-height-regular .cxstyle-mask-x-mask-bottom-a #cxstyle_copy_container #cxstyle_copy_position {
 padding: 20px 20px !important;
 width: 100% !important;
 _max-width: calc(50% - 40px) !important;
 max-width: calc(800px - 0px) !important;
 margin-top: -120px !important;
}

/*OVERWRITE COPY POSITION TO CLEAR LEDGE WHEN ON ".cxstyle-height-short" BANNER HEIGHT*/
.cxstyle-slideshow.cxstyle-height-short .cxstyle-mask-x-mask-bottom-a #cxstyle_copy_container #cxstyle_copy_position {
 padding: 20px 20px !important;
 width: 100% !important;
 _max-width: calc(50% - 40px) !important;
 max-width: calc(80% - 0px) !important;
}

/* --------------------------------------------------------
RED TRIANGLE RIGHT TOP: THIS IS USED
for this configuration should be:
cxstyle-blackmask-whitecopy cxstyle-mask-x-mask-top-a cxstyle-align-left OR cxstyle-align-right OR cxstyle-align-center
-------------------------------------------------------- */
.cxstyle-slideshow .cxstyle-mask-x-mask-top-a {
 background-image: url(images/cxstyle-mask-x-mask-bottom-a_corner.png), linear-gradient(-90deg,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 80%) !important;
	background-position: top right !important;
 background-size: contain;
 background-repeat: no-repeat !important;
 border: none !important;
 box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
}

.cxstyle-slideshow .cxstyle-mask-x-mask-top-a #cxstyle_copy_container #cxstyle_copy_position {
 padding: 0 20px !important;
 width: 100% !important;
 _max-width: calc(50% - 40px) !important;
 max-width: calc(700px - 0px) !important;
 _border: solid 10px yellow !important;
}

/* --------------------------------------------------------
NO BKG ELEMENTS on SLIDE
-------------------------------------------------------- */
.cxstyle-slideshow .cxstyle-mask-x-mask-none {
 background-image: none !important;
}

/* --------------------------------------------------------
OBSOLETE
-------------------------------------------------------- */
.cxstyle-mask-x-mask-left-a:before,
.cxstyle-mask-x-mask-right-b:before,
.cxstyle-mask-x-mask-top-b:before,
.cxstyle-mask-x-mask-bottom-b:before {
  content: "NOT USED";
 background-color: red !important;
 color: #ffffff !important;
 position: absolute;
 top: 0 !important;
 left: 0 !important;
}


/* --------------------------------------------------------
GRAPHIC COLOR CORNER
-------------------------------------------------------- */
/*REGULAR SLIDES*/
/*DEFAULT WHITE*/
.cxstyle-slideshow.cxstyle-height-regular.cxstyle-bgcolor-white .cxstyle-mask-x-mask-bottom-a {
 background-image: url(images/cxstyle-mask-x-mask-bottom-a_white.png), linear-gradient(-90deg,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 80%) !important;
}

/*CHANGE BKG IMAGE WHEN COMPONENT IS GRAY BECAUSE OF COMPONENT BELOW IS GRAY*/
.cxstyle-slideshow.cxstyle-height-regular.cxstyle-bgcolor-gray .cxstyle-mask-x-mask-bottom-a {
 background-image: url(images/cxstyle-mask-x-mask-bottom-a_gray.png), linear-gradient(-90deg,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 80%) !important;
}

/*CHANGE BKG IMAGE WHEN COMPONENT IS GRAY BECAUSE OF COMPONENT BELOW IS GRAY*/
.cxstyle-slideshow.cxstyle-height-regular.cxstyle-bgcolor-black .cxstyle-mask-x-mask-bottom-a {
 background-image: url(images/cxstyle-mask-x-mask-bottom-a_black.png), linear-gradient(-90deg,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 80%) !important;
}
/*FULLPAGE SLIDES*/
/*DEFAULT WHITE*/
.cxstyle-slideshow.cxstyle-height-tall.cxstyle-bgcolor-white .cxstyle-mask-x-mask-right-a {
 background-image: url(images/cxstyle-mask-x-mask-right-a_white.png), linear-gradient(-90deg,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 80%) !important;
}

/*GRAY: CHANGE BKG IMAGE WHEN COMPONENT IS GRAY BECAUSE OF COMPONENT BELOW IS GRAY*/
.cxstyle-slideshow.cxstyle-height-tall.cxstyle-bgcolor-gray .cxstyle-mask-x-mask-right-a {
 background-image: url(images/cxstyle-mask-x-mask-right-a_gray.png), linear-gradient(-90deg,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 80%) !important;
}

/*BLACK: CHANGE BKG IMAGE WHEN COMPONENT IS GRAY BECAUSE OF COMPONENT BELOW IS GRAY*/
.cxstyle-slideshow.cxstyle-height-tall.cxstyle-bgcolor-black .cxstyle-mask-x-mask-right-a {
 background-image: url(images/cxstyle-mask-x-mask-right-a_black.png), linear-gradient(-90deg,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 80%) !important;
}


/*SHORT SLIDES*/
/*DEFAULT WHITE*/
.cxstyle-slideshow.cxstyle-height-short.cxstyle-bgcolor-white .cxstyle-mask-x-mask-bottom-a {
 background-image: url(images/cxstyle-mask-x-mask-bottom-a_white.png), linear-gradient(-90deg,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 80%) !important;
}

/*CHANGE BKG IMAGE WHEN COMPONENT IS GRAY BECAUSE OF COMPONENT BELOW IS GRAY*/
.cxstyle-slideshow.cxstyle-height-short.cxstyle-bgcolor-gray .cxstyle-mask-x-mask-bottom-a {
 background-image: url(images/cxstyle-mask-x-mask-bottom-a_gray.png), linear-gradient(-90deg,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 80%) !important;
}

/*CHANGE BKG IMAGE WHEN COMPONENT IS GRAY BECAUSE OF COMPONENT BELOW IS GRAY*/
.cxstyle-slideshow.cxstyle-height-short.cxstyle-bgcolor-black .cxstyle-mask-x-mask-bottom-a {
 background-image: url(images/cxstyle-mask-x-mask-bottom-a_black.png), linear-gradient(-90deg,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 80%) !important;
}

/*SET SLIDES TO WHITE WHEN BKG IS NOT SET*/
/*REGULAR SLIDES*/
.cxstyle-slideshow.cxstyle-height-regular.cxstyle-bgcolor- .cxstyle-mask-x-mask-bottom-a {
 background-image: url(images/cxstyle-mask-x-mask-bottom-a_white.png), linear-gradient(-90deg,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 80%) !important;
}

/*SHORT SLIDES*/
.cxstyle-slideshow.cxstyle-height-short.cxstyle-bgcolor- .cxstyle-mask-x-mask-bottom-a {
 background-image: url(images/cxstyle-mask-x-mask-bottom-a_white.png), linear-gradient(-90deg,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 80%) !important;
}

/*FULLPAGE SLIDES*/
.cxstyle-slideshow.cxstyle-height-tall.cxstyle-bgcolor- .cxstyle-mask-x-mask-right-a {
 background-image: url(images/cxstyle-mask-x-mask-right-a_white.png), linear-gradient(-90deg,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 80%) !important;
}

/*-----------------------------------------------
RESPONSIVE
------------------------------------------------*/

@media only screen and (max-width : 1400px) /*SMALLER MONITORS*/{

}

@media only screen and (max-width : 1180px) /*LARGE TABLET LANDSCAPE BREAKPOINT*/{
 
}
 
@media only screen and (max-width : 1024px) /*SMALL TABLET LANDSCAPE BREAKPOINT*/{
 
}

/*RESPONSIVE*/
@media only screen and (max-width : 820px) /*TABLET PORTRAIT:*/{
 
}

@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
#cxstyle_slideshow_container .absolute,
#cxstyle_slideshow_fullwidth_container .absolute{
 _background-color: aqua;
 }
#cxstyle_slideshow_container .rounded-full,
#cxstyle_slideshow_fullwidth_container .rounded-full{
}
 
#cxstyle_slideshow_container .rounded-full,
#cxstyle_slideshow_fullwidth_container .rounded-full{
 width: 40px !important;
 height: 40px !important;
}

#cxstyle_slideshow_fullwidth_container.cxstyle-slideshow.cxstyle-height-regular .rounded-full{
 margin-top: 500px !important;
}
#cxstyle_slideshow_fullwidth_container.cxstyle-slideshow.cxstyle-height-tall .rounded-full{
 margin-top: 450px !important;
}
#cxstyle_slideshow_fullwidth_container.cxstyle-slideshow.cxstyle-height-short .rounded-full{
 margin-top: 500px !important;
}

/*remove the padding as arrove get move to the bottom*/
#cxstyle_slideshow_fullwidth_container .cxstyle-align-left #cxstyle_copy_container {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
/*change the bkg type on phones*/

 
#cxstyle_slideshow_fullwidth_container.cxstyle-slideshow.cxstyle-height-tall .absolute.bottom-8 {
 z-index: 9 !important;
 position: absolute !important;
 bottom: 20px !important;
 background-color: red;
 padding: 10px;
 -webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.cxstyle-slideshow .cxstyle-mask-x-mask-right-a {
 background-image: url(images/cxstyle-mask-x-mask-bottom-a.png), linear-gradient(-90deg,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 80%) !important;
	background-position: bottom left !important;
 background-size: 200%;
 background-repeat: no-repeat !important;
}
.cxstyle-slideshow .cxstyle-mask-x-mask-right-a:before {
 content:'';
    display:block;
    background-image: url(images/cxstyle-mask-x-mask-bottom-a_corner.png);
 background-position: top right !important;
 background-size: contain;
 background-repeat: no-repeat !important;
    width:50%;
    height: 50%;
 position: absolute !important;
 right: 0 !important;
}
}

/*********************************
Make links insinde the slideshow content underlined
*********************************/

.cxstyle-slideshow .cxstyle-title a,
.cxstyle-slideshow .cxstyle-title a:hover,
.cxstyle-slideshow .cxstyle-title a:active,
.cxstyle-slideshow .cxstyle-title a:visited,
/**/
.cxstyle-slideshow .cxstyle-subtitle a,
.cxstyle-slideshow .cxstyle-subtitle a:hover,
.cxstyle-slideshow .cxstyle-subtitle a:active,
.cxstyle-slideshow .cxstyle-subtitle a:visited,
/**/
.cxstyle-slideshow .cxstyle-description a,
.cxstyle-slideshow .cxstyle-description a:hover,
.cxstyle-slideshow .cxstyle-description a:active,
.cxstyle-slideshow .cxstyle-description a:visited
{
  text-decoration: underline !important;
  color: #ffffff !important;
 white-space: nowrap !important;
}

/*resize back images*/
@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{

/*FULLPAGE SLIDES*/
/*USE A TRANSPARENT IMAGE BACKGROUND*/
.cxstyle-slideshow.cxstyle-height-tall.cxstyle-bgcolor-white .cxstyle-mask-x-mask-right-a,
.cxstyle-slideshow.cxstyle-height-tall.cxstyle-bgcolor-gray .cxstyle-mask-x-mask-right-a,
 .cxstyle-slideshow.cxstyle-height-tall.cxstyle-bgcolor-black .cxstyle-mask-x-mask-right-a{
 background-image: url(images/cxstyle-mask-x-mask-tall-mobile_NONE.png), linear-gradient(-90deg,rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 80%) !important;
}

/*ADD THE CORNER THIS WAY*/
.cxstyle-slideshow.cxstyle-height-tall.cxstyle-bgcolor-gray .cxstyle-mask-x-mask-right-a:after,
.cxstyle-slideshow.cxstyle-height-tall.cxstyle-bgcolor-white .cxstyle-mask-x-mask-right-a:after,
 .cxstyle-slideshow.cxstyle-height-tall.cxstyle-bgcolor-white .cxstyle-mask-x-mask-black-a:after{
 content:'';
    display:block;
 background-position: top right !important;
 background-size: contain;
 background-repeat: no-repeat !important;
    width:100%;
    height: 100%;
 position: absolute !important;
 right: 0 !important;
}
.cxstyle-slideshow.cxstyle-height-tall.cxstyle-bgcolor-gray .cxstyle-mask-x-mask-right-a:after {
    background-image: url(images/cxstyle-mask-x-mask-tall-mobile_gray.png);
}
.cxstyle-slideshow.cxstyle-height-tall.cxstyle-bgcolor-white .cxstyle-mask-x-mask-right-a:after {
    background-image: url(images/cxstyle-mask-x-mask-tall-mobile_white.png);
}
.cxstyle-slideshow.cxstyle-height-tall.cxstyle-bgcolor-white .cxstyle-mask-x-mask-black-a:after {
    background-image: url(images/cxstyle-mask-x-mask-tall-mobile_black.png);
}
}

/*********************************
MAINTANCE MESSAGE
*********************************/
#cxstyle_maintenance_message {
 
}

#cxstyle_maintenance_message:before {
 content:'';
    display:block;
    background-image: url(images/cxstyle-mask-x-mask-bottom-a_corner.png);
 background-image: url(images/cxstyle-mask-x-mask-right-a_white.png);
 background-position: top right !important;
 background-size: contain;
 background-repeat: no-repeat !important;
    width:100%;
    height: 100%;
 position: absolute !important;
 right: 0 !important;
}


#cxstyle_maintenance_message .p-8 {
    background-color: rgba(0, 0, 0, 0) !important;
}

#cxstyle_maintenance_message .p-8 p {
    letter-spacing: 0%!important;
    font-variation-settings: "wdth" 125 !important;
    width: 100%;
    font-family: Archivo, sans-serif !important;
 color: #ffffff !important;
 font-size: 38px !important;
 line-height: 42px !important;
 background-color: rgba(0, 0, 0, 0) !important;
 padding: 20px !important;
 text-shadow: 0px 2px 2px rgba(0,0,0,0.75);
 font-weight: 600 !important;
 
}

#cxstyle_maintenance_message .p-8 {
    backdrop-filter: blur(0) !important;
  -webkit-backdrop-filter: blur(0) !important;
}

@media only screen and (max-width : 820px) /*TABLET PORTRAIT:*/{
#cxstyle_maintenance_message:before {
 content:'';
    display:block;
    background-image: url(images/cxstyle-mask-x-mask-bottom-a_corner.png);
 background-position: top right !important;
 background-size: contain;
 background-repeat: no-repeat !important;
    width:100%;
    height: 100%;
 position: absolute !important;
 right: 0 !important;
}
#cxstyle_maintenance_message .p-8 p {
 font-size: 28px !important;
 line-height: 32px !important;
 padding: 20px !important;
 padding-top: 180px !important;
 padding-right: 100px !important;
}
}




/* ========== chemelex_blocks.css (26.04 KB) ========== */

@charset "UTF-8";
/* CSS Document */
/*OLD*/
/* v:0917:*/
/*********************************
FIXES OR ADDITION
- make image 100% height to fit on:
.cxstyle-grid-item-image-right-copy-left #cxstyle_image img,
.cxstyle-grid-item-image-left-copy-right #cxstyle_image img
- added arrow to product buttons
*********************************/

/***************************
PAGE SIZE
**************************
sizes of the containers are inside the sitestyle.css*/

/*********************************
COPY CONTAINERS
*********************************/
#cxstyle_grid_item #cxstyle_copy_container {
    width: calc(100% - 0%) !important;
    max-width: 1300px !important;
    margin: 0 auto 0 auto !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
 /*changing this to % for now*/
 padding-left: 5% !important;
    padding-right: 5% !important;
}

#cxstyle_grid_item #cxstyle_copy_container #cxstyle_copy_position {
    width: calc(100% - 0%) !important;
    max-width: 1300px !important;
    margin: 0 auto 0 auto !important;
}

/*-----------------------------
PADDING OF ELEMENTS
------------------------------*/
/*the first elemement inside the #cxstyle_copy_position gets a margin top*/
#cxstyle_copy_position div:first-child {
  margin-top: 20px !important;
}
/*last elemement inside the #cxstyle_copy_position gets a margin bottom*/
#cxstyle_copy_position div:last-child {
 margin-bottom: 20px !important;
}
/*FIXES THE TITLE PADDING*/
.cxstyle-padding-top-medium#cxstyle_grid_container {
}
.cxstyle-padding-top-medium#cxstyle_grid_container #cxstyle_copy_container {
 position: relative !important;
 margin-top: -20px !important;
}

/*********************************
TOP and BOTTOM PADDING OF GRIDS
*********************************/
/*TOP*/
.cxstyle-padding-top-small#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-top-small{
 border-top: solid 35px !important;
 border-color: rgba(255, 255, 255, 1) !important;
 margin-top: 0 !important;
 margin-bottom: 0 !important;
 padding-top: 0 !important;
 padding-bottom: 0 !important;
 
}
.cxstyle-padding-top-medium#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-top-medium {
 border-top: solid 65px !important;
 border-color: rgba(255, 255, 255, 0) !important;
 margin-top: 0 !important;
 margin-bottom: 0 !important;
 padding-top: 0 !important;
 padding-bottom: 0 !important;
 /*REDUCE SIZE*/
 border-top: solid 35px !important;
 border-color: rgba(255, 255, 255, 0) !important;
}
.cxstyle-padding-top-large#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-top-large {
 border-top: solid 110px !important;
 border-color: rgba(255, 255, 255, 0) !important;
 margin-top: 0 !important;
 margin-bottom: 0 !important;
 padding-top: 0 !important;
 padding-bottom: 0 !important;
}

/*BOTTOM*/
.cxstyle-padding-bottom-small#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-bottom-small,
#cxstyle_flowgrid_standard.cxstyle-padding-bottom-small{
 border-bottom: solid 35px !important;
 border-color: rgba(255, 255, 255, 0) !important;
 margin-top: 0 !important;
 margin-bottom: 0 !important;
 padding-top: 0 !important;
 padding-bottom: 0 !important;
}
.cxstyle-padding-bottom-medium#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-bottom-medium,
#cxstyle_flowgrid_standard.cxstyle-padding-bottom-medium{
 border-bottom: solid 65px !important;
 border-color: rgba(255,2550, 255, 0) !important;
 margin-top: 0 !important;
 margin-bottom: 0 !important;
 padding-top: 0 !important;
 padding-bottom: 0 !important;
 /*REDUCE SIZE*/
 border-bottom: solid 35px !important;
 border-color: rgba(255, 255, 255, 0) !important;
}
.cxstyle-padding-bottom-large#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-bottom-large,
#cxstyle_flowgrid_standard.cxstyle-padding-bottom-large{
 border-bottom: solid 110px !important;
 border-color: rgba(255, 255, 255, 0) !important;
 margin-top: 0 !important;
 margin-bottom: 0 !important;
 padding-top: 0 !important;
 padding-bottom: 0 !important;
}


/*********************************
PANELS SPACING BETWEEN CONTAINERS
*********************************/
/*this is inside sitestyle*

/*********************************
INSIDE GRID ITEM - CONTENT
*********************************/
.cxstyle-kicker {
}
.cxstyle-title {
}
.cxstyle-subtitle {
}
.cxstyle-align-center .cxstyle-description {
 width: 100% !important;
 max-width: 900px !important;
 margin-left: auto !important;
 margin-right: auto !important;
 /**/
}
.cxstyle-button {
}



/*********************************
INSIDE GRID ITEM IMAGE LEFT or RIGHT
*********************************/
/*image left*/
.cxstyle-grid-item-image-left-copy-right#cxstyle_grid_item {
 display: inline-flex !important;
}
.cxstyle-grid-item-image-left-copy-right .flex-col {
 flex-direction: row !important;
 _border: solid 10px aqua !important;
}
.cxstyle-grid-item-image-left-copy-right#cxstyle_grid_item .gap-3 {
 gap: 0 !important;
}
.cxstyle-grid-item-image-left-copy-right #cxstyle_image {
  _border: solid 10px blue;
 width: 40% !important;
  display: flex;
 align-items: center; /*center vertically*/
}
/*image right*/
.cxstyle-grid-item-image-right-copy-left#cxstyle_grid_item {
 _border: solid 10px blue !important;
 display: inline-flex !important;
}
.cxstyle-grid-item-image-right-copy-left .flex-col {
 flex-direction: row-reverse !important;
 _border: solid 10px orange !important;
}
.cxstyle-grid-item-image-right-copy-left#cxstyle_grid_item .gap-3 {
 gap: 0 !important;
}
.cxstyle-grid-item-image-right-copy-left #cxstyle_image {
  _border: solid 10px blue;
 width: 40% !important;
  display: flex;
 align-items: center; /*center vertically*/
}

/*********************************
make image 100% height to fit
*********************************/
.cxstyle-grid-item-image-right-copy-left #cxstyle_image img,
.cxstyle-grid-item-image-left-copy-right #cxstyle_image img {
  object-fit: contain !important; /*REVISED NOT 100%*/
  _object-fit: cover !important;
 _object-fit: none !important;
 height: 100% !important;
} 



/*********************************
WHEN THE GRID HAS 2 COLUMNS - WEIGHTED
*********************************/
/*this is 50% 50% - this was causing a gap issue
.cxstyle-column-weight-equal {
 display: grid !important;
  grid-template-columns: 50% 1fr !important;
 gap: 0 !important;
}
*/

/*make right column 75%*/
.cxstyle-column-weight-weight-right-large {
  display: grid !important;
  grid-template-columns: 32% 1fr !important;
 gap: 0 !important;
}

/*make right column 50%*/
.cxstyle-column-weight-weight-right-medium {
  display: grid !important;
  grid-template-columns: 50% 1fr !important;
 gap: 0 !important;
}

/*make right column 25%*/
.cxstyle-column-weight-weight-right-small {
 display: grid !important;
  grid-template-columns: 75% 1fr !important;
 gap: 0 !important;
 
}
.cxstyle-column-weight-weight-right-small img,
.cxstyle-column-weight-weight-right-medium img,
.cxstyle-column-weight-weight-right-large img {
  _border: solid 1px red;
}
/*TALK TO CHUCK*/
.cxstyle-column-weight-weight-right-medium #cxstyle_grid_item .h-full img,
.cxstyle-column-weight-weight-right-medium #cxstyle_grid_item .h-full {
 _width: 100% !important;
 _height: auto !important;
}

/*max image hight on a side by side*/
#cxstyle_media_embed_block_image {
 max-height: 265px;
 overflow: hidden;
}
.cxstyle-bgcolor-white #cxstyle_grid_item.cxstyle-grid-item-background-color-white {
 box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.15) inset;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.15) inset;
-moz-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.15) inset;
}
.cxstyle-grid-item-background-color-white #cxstyle_media_embed_block_image img {
 border-right: solid 1px #cccccc;
}

/*********************************
VIDEO COMPONENT IN GRID
*********************************/
#cxstyle_media_embed_block_video {
 height: 100% !important; 
 min-height: 235px !important; 
}
#cxstyle_media_embed_block_video iframe{
 height: 100% !important; 
 min-height: 235px !important; 
}
/*********************************
WRAPPERS VERTICAL POSITION: vertical alignment cxstyle_grid_item
*********************************/
#cxstyle_copy_block {
    flex: 1 !important;
    position: relative !important;
}


/*-----------------------------
ALIGN TOP
------------------------------*/
#cxstyle_grid_item .cxstyle-vertical-position-top#cxstyle_copy_block_container{
  display: flex;
 align-items: flex-start; /*top, vertically*/
}
#cxstyle_copy_block_container.cxstyle-vertical-position-top,
.cxstyle-vertical-position-top #cxstyle_copy_container,
.cxstyle-vertical-position-top #cxstyle_copy_position{
 display: flex;
  flex-direction: column;
  flex: 1;
}


/*-----------------------------
ALIGN TOP with button at the baseline
------------------------------*/
/*#cxstyle_grid_item .cxstyle-vertical-position-top-button-bottom#cxstyle_copy_block_container{
  display: flex;
 align-items: flex-start; /*top, vertically
}
*/
#cxstyle_copy_block_container.cxstyle-vertical-position-top-button-bottom,
.cxstyle-vertical-position-top-button-bottom #cxstyle_copy_container,
.cxstyle-vertical-position-top-button-bottom #cxstyle_copy_position{
 display: flex;
  flex-direction: column;
  flex: 1;
}
#cxstyle_copy_block_container.cxstyle-vertical-position-top-button-bottom .cxstyle-button {
 /* TARGET ELEMENT */
  margin-top: auto;
}
/*-----------------------------
ALIGN BOTTOM
------------------------------*/
#cxstyle_grid_item #cxstyle_copy_block_container.cxstyle-vertical-position-bottom{
  display: flex;
 align-items: flex-end; /*bottom, vertically*/
}

/*-----------------------------
ALIGN MIDDLE
------------------------------*/
#cxstyle_grid_item #cxstyle_copy_block_container.cxstyle-vertical-position-middle{
  display: flex;
 align-items: center; /*center vertically*/
}

/*********************************
WRAPPERS HORIZONTAL POSITION
*********************************/
/*ALIGN CENTER*/
#cxstyle_grid_item .cxstyle-align-center,
/*MAYBE WE CAN REMOVE THIS ALIGN*/
#cxstyle_grid_item .cxstyle-align-center h1,
#cxstyle_grid_item .cxstyle-align-center h2,
#cxstyle_grid_item .cxstyle-align-center h3,
#cxstyle_grid_item .cxstyle-align-center p {
 text-align: center !important;
 padding: 0 !important;
 _width: 100% !important;
}
#cxstyle_grid_item .cxstyle-align-center .cxstyle-button{
text-align: center !important;
 /*add separation from copy*/
 padding-top: 10px !important;
}

/*ALIGN LEFT*/
#cxstyle_grid_item .cxstyle-align-left,
/*MAYBE WE CAN REMOVE THIS ALIGN*/
#cxstyle_grid_item .cxstyle-align-left h1,
#cxstyle_grid_item .cxstyle-align-left h2,
#cxstyle_grid_item .cxstyle-align-left h3,
#cxstyle_grid_item .cxstyle-align-left p {
 text-align: left !important;
 padding: 0 !important;
}
#cxstyle_grid_item .cxstyle-align-left .cxstyle-button{
text-align: left !important;
 /*add separation from copy*/
 padding-top: 10px !important;
}

/*ALIGN RIGHT*/
#cxstyle_grid_item .cxstyle-align-right,
/*MAYBE WE CAN REMOVE THIS ALIGN*/
#cxstyle_grid_item .cxstyle-align-right h1,
#cxstyle_grid_item .cxstyle-align-right h2,
#cxstyle_grid_item .cxstyle-align-right h3,
#cxstyle_grid_item .cxstyle-align-right p {
 text-align: right !important;
 padding: 0 !important;
}
#cxstyle_grid_item .cxstyle-align-right .cxstyle-button{
text-align: right !important;
 /*add separation from copy*/
 padding-top: 10px !important;
}

/**************************
PRODUCTS INSIDE GRIDS
***************************/
#cxstyle_image
#cxstyle_grid_item {
 
}
.cxstyle-grid-item-product-image {
 _background-color: aqua !important;
}


/*Reduce the padding*/
.cxstyle-grid-item-product-image #cxstyle_copy_block #cxstyle_copy_block_container #cxstyle_copy_container {
 padding-left: 20px !important;
 padding-right: 10px !important;
 padding-top: 10px !important;
 padding-bottom: 10px !important;
 /**/
 _background-color: red !important;
}

.cxstyle-grid-item-product-image #cxstyle_image {
 border-right: 1px solid #cccccc;
 width: 130px !important;
}

.cxstyle-grid-item-product-image img{
 width: 120px !important;
 margin-top: 10px !important;
 margin-bottom: 10px !important;
 margin-left: 5px !important;
 margin-right: 5px !important;
 /**/
 _background-color: yellow !important;
}


.cxstyle-grid-item-product-image .cxstyle-title {
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 0px !important;
}



/*-----------------------------------------------
RESPONSIVE COLUMNS LAYOUTS: PADDING
------------------------------------------------*/

@media only screen and (max-width : 1400px) /*SMALLER MONITORS*/{
}

@media only screen and (max-width : 1024px) /*TABLET BREAKPOINT*/{
 .cxstyle-grid-item-background-color-white #cxstyle_media_embed_block_image img {
 border-right: solid 0px #cccccc !important;
}
 
}

@media only screen and (max-width : 820px) /*TABLET PORTRAIT:*/{
/*TOP*/
.cxstyle-padding-top-small#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-top-small{
 border-top: solid 27px !important;
 border-color: rgba(255, 255, 255, 0) !important;
}
.cxstyle-padding-top-medium#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-top-medium {
 border-top: solid 50px !important;
 border-color: rgba(255, 255, 255, 0) !important;
 /*REDUCE SIZE*/
 border-top: solid 30px !important;
 border-color: rgba(255, 255, 255, 0) !important;
}
.cxstyle-padding-top-large#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-top-large {
 border-top: solid 90px !important;
 border-color: rgba(255, 255, 255, 0) !important;
}

/*BOTTOM*/
.cxstyle-padding-bottom-small#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-bottom-small{
 border-bottom: solid 27px !important;
 border-color: rgba(255, 255, 255, 0) !important;
}
.cxstyle-padding-bottom-medium#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-bottom-medium{
 border-bottom: solid 50px !important;
 border-color: rgba(255, 255, 255, 0) !important;
 /*REDUCE SIZE*/
 border-bottom: solid 25px !important;
 border-color: rgba(255, 255, 255, 0) !important;
}
 
.cxstyle-padding-bottom-large#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-bottom-large{
 border-bottom: solid 90px !important;
 border-color: rgba(255, 255, 255, 0) !important;
}
}

@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
 
/*TOP*/
.cxstyle-padding-top-small#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-top-small{
 border-top: solid 22px !important;
 border-color: rgba(255, 255, 255, 0) !important;
}
.cxstyle-padding-top-medium#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-top-medium {
 border-top: solid 20px !important;
 border-color: rgba(255, 255, 255, 0) !important;
}
.cxstyle-padding-top-large#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-top-large {
 border-top: solid 80px !important;
 border-color: rgba(255, 255, 255, 0) !important;
}

/*BOTTOM*/
.cxstyle-padding-bottom-small#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-bottom-small{
 border-bottom: solid 22px !important;
 border-color: rgba(255, 255, 255, 0) !important;
}
.cxstyle-padding-bottom-medium#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-bottom-medium{
 border-bottom: solid 46px !important;
 border-color: rgba(255, 255, 255, 0) !important;
 /*REDUCE SIZE*/
 border-bottom: solid 20px !important;
 border-color: rgba(255, 255, 255, 0) !important;
}
.cxstyle-padding-bottom-large#cxstyle_grid_container,
.cxsolutionsstyle-container.cxstyle-padding-bottom-large{
 border-bottom: solid 80px !important;
 border-color: rgba(255, 255, 255, 0) !important;
}
 
/*the first elemement inside the #cxstyle_copy_position gets a margin top*/
#cxstyle_copy_position div:first-child {
  margin-top: 30px !important;
 display: block !important;
 width: 100% !important;
 float: left !important;
}
/*last elemement inside the #cxstyle_copy_position gets a margin bottom*/
#cxstyle_copy_position div:last-child {
 margin-bottom: 30px !important;
  display: block !important;
 width: 100% !important;
 float: left !important;
}
}







/*-----------------------------------------------
RESPONSIVE COLUMNS LAYOUTS: ie: SOLUTIONS
------------------------------------------------*/

@media only screen and (max-width : 1400px) /*SMALLER MONITORS*/{
}

@media only screen and (max-width : 1024px) /*TABLET BREAKPOINT*/{
 
 
}

@media only screen and (max-width : 820px) /*TABLET PORTRAIT:*/{
/*force 1 column on grid for the titles*/
#cxstyle_grid_container.cxstyle-padding-top-small,
#cxstyle_grid_container.cxstyle-padding-top-medium,
#cxstyle_grid_container.cxstyle-padding-top-large,
/**/
#cxstyle_grid_container.cxstyle-padding-bottom-small,
#cxstyle_grid_container.cxstyle-padding-bottom-medium,
#cxstyle_grid_container.cxstyle-padding-bottom-large{
  grid-template-columns: repeat(1, minmax(0px, 1fr)) !important;
 }
 #cxstyle_grid_container {
  /*force 2 over column*/
  grid-template-columns: repeat(2, minmax(0px, 1fr)) !important;
 }

}

@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
 #cxstyle_grid_container {
  /*force 1 over column*/
  grid-template-columns: repeat(1, minmax(0px, 1fr)) !important;
 }
}

/*-----------------------------------------------
RESPONSIVE SIDE BY SIDE: ie: SUCCESS STORIES
------------------------------------------------*/

@media only screen and (max-width : 1400px) /*SMALLER MONITORS*/{
 .cxstyle-column-weight-weight-right-large {
  display: grid !important;
  grid-template-columns: 36% 1fr !important;
 gap: 0 !important;
}
}
@media only screen and (max-width : 1180px) /*TABLET BREAKPOINT*/{
 .cxstyle-column-weight-weight-right-large {
  display: grid !important;
  grid-template-columns: 42% 1fr !important;
 gap: 0 !important;
}
 /*make the image fit in the height*/
 #cxstyle_media_embed_block_image {
    max-height: 265px;
 max-height: 100%;
    overflow: hidden;
}

 
 /*image left*/
.cxstyle-grid-item-image-left-copy-right#cxstyle_grid_item {
 display: block !important;
}
.cxstyle-grid-item-image-left-copy-right .flex-col {
 display: block !important;
}

.cxstyle-grid-item-image-left-copy-right #cxstyle_image {
 display: block !important;
 width: 100% !important;
}
 
.cxstyle-grid-item-image-left-copy-right #cxstyle_image img{
 display: block !important;
 width: 100% !important;
 
}
.cxstyle-grid-item-image-left-copy-right #cxstyle_copy_block {
 display: block !important;
 width: 100% !important;
 border-top: solid 1px #cccccc !important;
 
}
/*made image on top to accomdate german*/
 /*image left*/
.cxstyle-grid-item-image-left-copy-right#cxstyle_grid_item {
 display: block !important;
}
.cxstyle-grid-item-image-left-copy-right .flex-col {
 display: block !important;
}

.cxstyle-grid-item-image-left-copy-right #cxstyle_image {
 display: block !important;
 width: 100% !important;
}
 
.cxstyle-grid-item-image-left-copy-right #cxstyle_image img{
 display: block !important;
 width: 100% !important;
 
}
.cxstyle-grid-item-image-left-copy-right #cxstyle_copy_block {
 display: block !important;
 width: 100% !important;
 border-top: solid 1px #cccccc !important;
 
}
}
@media only screen and (max-width : 1024px) /*TABLET BREAKPOINT*/{
 .cxstyle-column-weight-weight-right-large {
  display: grid !important;
  grid-template-columns: 40% 1fr !important;
 gap: 0 !important;
}
 /*fixes BUG of first copy block height*/
 #cxstyle_grid_container.cxstyle-column-weight-weight-right-large  {
 _display: block !important;
}
 /*remove max image height on a side by side elements*/
 #cxstyle_media_embed_block_image {
 max-height: 100% !important;
 overflow: hidden;
}
 
/*INSIDE GRID ITEM IMAGE LEFT or RIGHT MOVE TO TOP*/
/*image left*/
.cxstyle-grid-item-image-left-copy-right#cxstyle_grid_item {
 display: block !important;
}
.cxstyle-grid-item-image-left-copy-right .flex-col {
 display: block !important;
}

.cxstyle-grid-item-image-left-copy-right #cxstyle_image {
 display: block !important;
 width: 100% !important;
 border-bottom: none;
 border-right: none;
}
 
.cxstyle-grid-item-image-left-copy-right #cxstyle_image img{
 display: block !important;
 width: 100% !important;
}
 
.cxstyle-grid-item-product-image #cxstyle_copy_block #cxstyle_copy_block_container #cxstyle_copy_container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    _background-color: red !important;
}

}
 
@media only screen and (max-width : 820px) /*TABLET PORTRAIT:*/{
/*remove gap below containers*/
 _#cxstyle_grid_container.cxstyle-grid-no-gap  {
 _grid-row-gap: 0rem !important; 
}
.cxstyle-column-weight-weight-right-large {
  display: grid !important;
  grid-template-columns: 45% 1fr !important;
 gap: 0 !important;
}
 /*fixes BUG of first copy block height*/
 #cxstyle_grid_container.cxstyle-column-weight-weight-right-large  {
 display: block !important;
}
 /*remove max image height on a side by side elements*/
 #cxstyle_media_embed_block_image {
 max-height: 100% !important;
 overflow: hidden;
  
}
 /*add border below container to emulate gap*/
 .cxstyle-column-weight-weight-right-large #cxstyle_copy_block  {
 border-bottom: solid 2rem #ffffff !important; /*matches the bkg color*/
  
}
 
/*INSIDE GRID ITEM IMAGE LEFT or RIGHT MOVE TO TOP*/
/*image left*/
.cxstyle-grid-item-image-left-copy-right#cxstyle_grid_item {
 display: flex !important;
}
.cxstyle-grid-item-image-left-copy-right .flex-col {
 display: flex !important;
}

.cxstyle-grid-item-image-left-copy-right #cxstyle_image {
 display: flex !important;
 width: 40% !important;
 border-right: solid 1px #cccccc !important;
 border-bottom: none !important;
}
 
.cxstyle-grid-item-image-left-copy-right #cxstyle_image img{
 display: block !important;
 width: 98% !important;
 border-bottom: none;
}

.cxstyle-grid-item-image-left-copy-right #cxstyle_copy_block {
        border-top: none !important;
    }
}



 
/*-----------------------------------------------
RESPONSIVE SIDE BY SIDE: ie: RESOURCES with SIDE IMAGE
------------------------------------------------*/
 
/*RESPONSIVE*/
@media only screen and (max-width : 767px) /*PHONE*/{
/*********************************
INSIDE GRID ITEM IMAGE LEFT or RIGHT
*********************************/
/*image left*/
.cxstyle-grid-item-image-left-copy-right#cxstyle_grid_item {
 display: block !important;
}
.cxstyle-grid-item-image-left-copy-right .flex-col {
 display: block !important;
}

.cxstyle-grid-item-image-left-copy-right #cxstyle_image {
 display: block !important;
 width: 100% !important;
}
 
.cxstyle-grid-item-image-left-copy-right #cxstyle_image img{
 display: block !important;
 width: 100% !important;
 
}
.cxstyle-grid-item-image-left-copy-right #cxstyle_copy_block {
 display: block !important;
 width: 100% !important;
 border-top: solid 1px #cccccc !important;
 
}


}


/*-----------------------------------------------
RESPONSIVE SIDE BY SIDE: VIDEO
------------------------------------------------*/
@media only screen and (max-width : 1400px) /*SMALLER MONITORS*/{
 #cxstyle_media_embed_block_video {
 height: 100% !important; 
 min-height: 255px !important; 
}
#cxstyle_media_embed_block_video iframe{
 height: 100% !important; 
 min-height: 255px !important; 
}
 
}
@media only screen and (max-width : 1180px) /*TABLET BREAKPOINT*/{
#cxstyle_media_embed_block_video {
 height: 100% !important; 
 min-height: 245px !important; 
}
#cxstyle_media_embed_block_video iframe{
 height: 100% !important; 
 min-height: 245px !important; 
}
 
}
@media only screen and (max-width : 1024px) /*TABLET BREAKPOINT*/{
#cxstyle_media_embed_block_video {
 height: 100% !important; 
 min-height: 500px !important; 
}
#cxstyle_media_embed_block_video iframe{
 height: 100% !important; 
 min-height: 500px !important; 
}
}
@media only screen and (max-width : 820px) /*TABLET PORTRAIT:*/{

}

@media only screen and (max-width : 767px) /*PHONE*/{
 #cxstyle_media_embed_block_video {
 height: 100% !important; 
 min-height: 320px !important; 
}
#cxstyle_media_embed_block_video iframe{
 height: 100% !important; 
 min-height: 320px !important; 
}
 
}

@media only screen and (max-width : 480px) /*PHONE*/{
 #cxstyle_media_embed_block_video {
 height: 100% !important; 
 min-height: 240px !important; 
}
#cxstyle_media_embed_block_video iframe{
 height: 100% !important; 
 min-height: 240px !important; 
}
 
}
/*-----------------------------------------------
RESPONSIVE CENTER WHEN ON PHONE
------------------------------------------------*/
 

@media only screen and (max-width : 767px) /*PHONE*/{
/*ALIGN LEFT*/
#cxstyle_grid_item .cxstyle-align-left,
#cxstyle_grid_item .cxstyle-align-left h1,
#cxstyle_grid_item .cxstyle-align-left h2,
#cxstyle_grid_item .cxstyle-align-left h3,
#cxstyle_grid_item .cxstyle-align-left p,
/**/
#cxstyle_grid_item .cxstyle-align-left .cxstyle-button,
/**/
#cxstyle_grid_item .cxstyle-align-right,
#cxstyle_grid_item .cxstyle-align-right h1,
#cxstyle_grid_item .cxstyle-align-right h2,
#cxstyle_grid_item .cxstyle-align-right h3,
#cxstyle_grid_item .cxstyle-align-right p,
/**/
#cxstyle_grid_item .cxstyle-align-right .cxstyle-button {
text-align: center !important;
}
}



/**************************
PRODUCT BUTTON: WITH a:ref wrappers and ARROW
***************************/

a:link #cxstyle_grid_item {
 
}
/*remove the shadow at roolver*/
a:hover #cxstyle_grid_item,
#cxstyle_grid_item:hover{
 border-color: none !important;
	box-shadow: none !important;
	transform: scale(1) !important;
 
}

.cxproductstyle-thumbnail:hover {
	border-color: #3b82f6;
	box-shadow: 0 2px 8px #3b82f640;
	transform: scale(1.05)
}
a:link .cxstyle-grid-item-product-image #cxstyle_copy_block #cxstyle_copy_block_container #cxstyle_copy_container {
    padding-right: 0px !important; /*remove the padding for more space*/
}

a:link #cxstyle_grid_item #cxstyle_copy_block_container::after {
  content: "\2192";
 padding-right: 10px;
 font-size: 36px;
 line-height: 36px;
 float: right !important;
}
a:hover #cxstyle_grid_item #cxstyle_copy_block_container::after {
 color: #FF0547 !important;
}

@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
 a:link #cxstyle_grid_item #cxstyle_copy_block_container::after {
  display: none !important;
  
}
 a:link #cxstyle_grid_item #cxstyle_copy_container::after {
  content: "\2192";
 padding-right: 10px;
 font-size: 36px;
 line-height: 36px;
   transform: rotate(90deg) !important;
  width: 100% !important;
}
a:hover #cxstyle_grid_item #cxstyle_copy_container::after {
 color: #FF0547 !important;
}
/*THIS WAS NOT CLOSED*/
}

/* ========== chemelex_richtext.css (9.09 KB) ========== */

@charset "UTF-8";
/* CSS Document */
/* v:0912:*/
/*********************************
FIXES OR ADDITION
- add padding to the top or the block
*********************************/

#cxstyle_rich_text_block {
 border: none;
 padding-top: 20px !important;
}

#cxstyle_rich_text_block div{
 border: none;
 _border: solid 10px blue !important;
}

/*********************************
THIS IS THE INSERT (IMG, VIDEO, ETC.)
*********************************/
#cxstyle_rich_text_block div .mb-4.text-left {
 _background-color: aqua !important;
 width: 100% !important;
 max-width: 500px !important;
 height: auto !important;
 _min-height: 262px !important;
 margin-left: 30px !important;
 margin-bottom: 30px !important;
 float: right;
}
/*********************************
THIS IS THE IMAGE (IF THERE IS ONE)
*********************************/
#cxstyle_rich_text_block img {
 width: 100% !important;
 max-width: 500px !important;
 float: right !important;
 _opacity: .5;
 display: block !important;
 z-index: 999 !important;
 /**/
 _border: solid 10px red !important;
}

/*********************************
THIS IS THE VIDEO (IF THERE IS ONE)
*********************************/
#cxstyle_rich_text_block div div .relative.w-full.h-0{
 margin-right: 30px !important;
 margin-bottom: 30px !important;
 width: 100% !important;
 min-width: 100% !important;
 max-width: 100% !important;
 height: auto !important;
 min-height: 262px !important;
 float: left;
 _background-color: pink !important;
 /**/
 _border: solid 10px #999999 !important;
 
}
#cxstyle_rich_text_block iframe {
 width: 100% !important;
 min-width: 100% !important;
 max-width: 100% !important;
 min-height: 262px !important;
 border: solid 1px #666666 !important;
}



/********************************
FORMATTING OF THE COPY
*********************************/
#cxstyle_rich_text_block h2,
#cxstyle_rich_text_block h2 strong{
 font-size: 28px !important;
    line-height: 1.1em !important;
    font-weight: 600 !important;
    padding: 0 !important;
    margin: 0 !important;
 margin-bottom: 15px !important;
 color: #000000 !important;
}

#cxstyle_rich_text_block p,
#cxstyle_rich_text_block ul,
#cxstyle_rich_text_block ol {
    font-size: 15px !important;
    line-height: 1.6em !important;
    padding: 0 !important;
    margin: 0 !important;
 margin-bottom: 15px !important;
 color: #000000 !important;
}

/*list design NOT to wrap around copy*/
#cxstyle_rich_text_block ul{
 list-style-position: outside;
 margin-left: 17px !important;
}

#cxstyle_rich_text_block ul li{
 list-style-type: square !important;
}


#cxstyle_rich_text_block ol{
 list-style-position: outside;
 margin-left: 18px !important;
}

#cxstyle_rich_text_block ol li{
 list-style-type: decimal !important;
}



/*links in copy*/
#cxstyle_rich_text_block a:link {
 color: #FF0547 !important;
 text-decoration: underline !important;
}

#cxstyle_rich_text_block a:hover {
 color: #DB043E !important;
 text-decoration: none !important;
}

#cxstyle_rich_text_block a:active{
 color: #B30432 !important;
 color: #ffffff !important;
}


.cxstyle-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000bf;
    display: flex
;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
 /*OVERWRITE*/
 
}


/********************************
OVERLAY FORMATTING OF THE COPY
*********************************/
.cxstyle-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000bf;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
 /*OVERWRITE*/
}
.cxstyle-modal-content {
    position: relative;
    background-color: #fff;
    border-radius: .5rem;
    box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
 /*OVERWRITE*/
 max-width: 1260px !important;
    width: 100%;
    overflow: hidden;
}
/*LEFT IMAGE*/
.cxstyle-modal-image-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    padding: 2rem;
 /*OVERWRITE*/
 align-items: flex-start  !important;
    justify-content: center !important;
 flex: none !important;
 padding: 20px !important;
 width: 50% !important;
 max-width: 400px !important;
}
.cxstyle-modal-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: .25rem;
 /*OVERWRITE*/
 border-radius: 0 !important;
}
.cxstyle-modal-content-section {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
 overflow: auto !important;
 /*OVERWRITE*/
 padding: 10px !important;
 overflow: auto !important;
}
#cxstyle_grid_modal_text_content {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
 /*OVERWRITE*/
 height: 100% !important;
 max-height: 400px !important;
 padding: 10px !important;
 padding-right: 20px !important;
 overflow: auto !important;
}
@media only screen and (max-width : 820px) /*TABLET PORTRAIT:*/{
#cxstyle_rich_text_block div .mb-4.text-left {
 width: 100% !important;
 min-width: 100% !important;
 max-width: 100% !important;
 height: auto !important;
 margin: 0 auto 30px auto !important;
 float: right;
}
}
@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
.cxstyle-modal-content {
    position: relative;
    background-color: #fff;
    border-radius: .5rem;
    box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    overflow: hidden;
 /*OVERWRITE*/
 width: 80vw !important;
 min-width: 80vw !important;
 max-width: 80vw !important;
 height: auto !important;
 max-height: auto !important;
 min-height: auto !important;
    overflow: hidden !important;
}
 
#cxstyle_rich_text_block div .mb-4.text-left {
 width: 100% !important;
 min-width: 100% !important;
 max-width: 100% !important;
 height: auto !important;
 margin: 0 auto 30px auto !important;
 float: right;
}
 
/*LEFT IMAGE*/
.cxstyle-modal-image-section {
 padding: 20px !important;
 width: 100% !important;
 max-width: 100% !important;
 width: auto !important;
 max-height: 100% !important;
}

.cxstyle-modal-content-section {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
 overflow: auto !important;
 /*OVERWRITE*/
 flex: none !important;
 padding: 20px !important;
 padding-bottom: 0 !important;
 width: 100% !important;
 max-width: 100% !important;
 overflow-y: none !important;
}
 #cxstyle_grid_modal_text_content {
    max-height: 400px !important;
    padding: 0px !important;
  border-bottom: solid 30px #ffffff !important;
    overflow-x: hidden !important;
}
 }

@media only screen and (max-width : 480px) /*MOBILE BREAKPOINT*/{
 
 #cxstyle_rich_text_block iframe {
 width: 100% !important;
 min-width: 100% !important;
 max-width: 100% !important;
 height: 220px !important;
 min-height: 220px !important;
}
}
#cxstyle_grid_modal_body h1,
#cxstyle_grid_modal_body h1 strong{
 font-size: 28px !important;
    line-height: 1.1em !important;
    font-weight: 600 !important;
    padding: 0 !important;
    margin: 0 !important;
 margin-bottom: 10px !important;
 color: #000000 !important;
}

#cxstyle_grid_modal_body h2,
#cxstyle_grid_modal_body h2 strong{
 font-size: 24px !important;
    line-height: 1.1em !important;
    font-weight: 600 !important;
    padding: 0 !important;
    margin: 0 !important;
 margin-bottom: 10px !important;
 color: #000000 !important;
}

#cxstyle_grid_modal_body h3,
#cxstyle_grid_modal_body h3 strong{
 font-size: 20px !important;
    line-height: 1.1em !important;
    font-weight: 600 !important;
    padding: 0 !important;
    margin: 0 !important;
 margin-bottom: 10px !important;
 color: #000000 !important;
}

#cxstyle_grid_modal_body h4,
#cxstyle_grid_modal_body h4 strong{
 font-variation-settings: "wdth" 125 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-family: Archivo, sans-serif !important;
 /**/
 font-size: 28px !important;
    line-height: 1.1em !important;
    font-weight: 600 !important;
    padding: 0 !important;
    margin: 0 !important;
 margin-bottom: 10px !important;
 color: #000000 !important;
}


#cxstyle_grid_modal_body p,
#cxstyle_grid_modal_body ul{
    font-size: 15px !important;
    line-height: 1.6em !important;
    padding: 0 !important;
    margin: 0 !important;
 margin-bottom: 15px !important;
 color: #000000 !important;
}

/*list design NOT to wrap around copy*/
#cxstyle_grid_modal_body ul{
 /*display: flex !important;
 flex-direction: column !important;
 */
 list-style-position: outside;
 margin-left: 15px !important;
}

#cxstyle_grid_modal_body ul li{
 list-style-type: square;
}



/*links in copy*/
#cxstyle_grid_modal_body a:link {
 color: #FF0547 !important;
 text-decoration: underline !important;
}

#cxstyle_grid_modal_body a:hover {
 color: #DB043E !important;
 text-decoration: none !important;
}

#cxstyle_grid_modal_body a:active{
 color: #B30432 !important;
 color: #ffffff !important;
}

 

/* ========== chemelex_products.css (39.57 KB) ========== */

/***************************
PAGE SIZE
**************************
sizes of the containers are inside the sitestyle.css*/



/********************************
MARKETING BUTTONS NAVIGATION
*********************************/

.cxproductstyle-inline-nav-actions {

 padding: 5px;
 z-index: 999999 !important;
 position: absolute;
 _background-color: aqua;
 
}

/********************************
MARKETING BUTTONS
*********************************/
.cxproductstyle-btn-mask {
 background-color: #ffffff;
 height: 250px !important;
 width: 100%;
 position: absolute !important;
 top: 0 !important;
 z-index: 100;
}

.cxproductstyle-marketing-btns  {
 _background-color: yellow;
 height: 1px !important;
 width: 100%;
 max-width: 1470px;
 margin: 0 auto 0 auto !important;
 z-index: 110;
 position: relative;
}


.cxproductstyle-marketing-btns .cxproductstyle-marketing-postion {
 position: fixed !important;
 _background-color: antiquewhite;
 height: 1px;
 width: 100%;
 max-width: 1470px;
 z-index: 110;
}

.cxproductstyle-marketing-wrappers {
 background-color: #ffffff;
 _background-color: aqua;
 padding-top: 20px;
 display: block;
 float: right;
 
}
.cxproductstyle-marketing-wrappers button{
 width: 180px !important;
 margin-right: 10px !important;
 float: left !important;
 /*removed the padding and made a height in case it wraps on two line*/
 padding: 0px 4px !important;
 height: 46px
 
}
.cxproductstyle-marketing-wrappers button:last-child{
 margin-right: 40px !important;
}

/********************************
PRODUCT PAGE TABS NAVIGATION
*********************************/
.cxproductstyle-inline-nav-border {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 2rem;
    background-color: #f9fafb;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 2px 8px #0000001a;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: box-shadow .2s ease-in-out;
 /**OVERWRITE**/
 top: 175px !important;
 margin: 0 !important;
 _background-color: red !important;
 _background-color: #FF0547 !important;
 _background-color: #000000 !important;
 background-color: #ffffff !important;
 _background-color: transparent !important;
 z-index: 105 !important;
 border-radius: 0 0 0 0 !important;
 box-shadow: none !important;
 border-bottom: 4px solid #f2f2f2 !important;
 -webkit-backdrop-filter: blur(0px) !important;
 backdrop-filter: blur(0px) !important;
}

.cxproductstyle-inline-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
 /**OVERWRITE**/
 _background-color: yellow !important;
 _background-color: #FF0547 !important;
 _background-color: #ffffff !important;
 _background-color: transparent !important;
 max-width: 1440px !important;
 width: 100% !important;
 width: calc(100% - 60px) !important;
 margin: 0 auto 0 auto !important;
 padding: 0 !important;
 padding-top: 24px !important;
 gap: 0rem !important;
}
/**tabs**/
.cxproductstyle-inline-nav-link {
    display: inline-block;
    padding: .75rem 1.5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;
    color: #374151;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-weight: 500;
    font-size: .875rem;
    transition: all .2s ease-in-out;
 /**OVERWRITE**/
 margin-top: 10px !important;
 margin-bottom: 0 !important;
 border: 0px solid #d1d5db !important;
  border-radius: 0px !important;
 padding: 10px 20px !important;
}

/********************************
TABS CONTENTS
*********************************/
.cxproductstyle-inline-nav-links {
 display: table !important; /*center vertically for 2 lines*/
 
}
.cxproductstyle-inline-nav-link {
    display: inline-block;
    padding: .75rem 1.5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;
    color: #374151;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-weight: 500;
    font-size: .875rem;
    transition: all .2s ease-in-out;
 /**OVERWRITE**/
 /*center vertically for 2 lines*/
   display: table-cell !important;
  vertical-align: middle !important;
 text-align: center !important;
 /**/
 font-weight: 500 !important;
 font-size: 14px !important;
 line-height: 17px !important;
 color: #000000 !important;
 padding: 0 15px !important;
 height: 50px !important;
 background-color: #f2f2f2 !important;
 border-right: 3px solid #ffffff !important;
 border-left: 3px solid #ffffff !important;
 max-width: 170px !important;
 min-width: 80px !important;
}
.cxproductstyle-inline-sections-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
 /**OVERWRITE**/
 gap: 0 !important;
}
.cxproductstyle-inline-section {
    width: 100%;
    padding: 2rem;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 3px #0000001a;
    scroll-margin-top: 8rem;
 /**OVERWRITE**/
 border: 0px solid #e5e7eb !important;
    border-radius: 0px !important;
 scroll-margin-top: 250px !important; /*this clears the scrolling to the right area*/
 column-gap: 0 !important;
 padding: 30px !important;
}

.cxproductstyle-inline-nav-link:hover {
    background-color: #2563eb;
    color: #fff;
    border-color: #2563eb;
    text-decoration: none;
 /**OVERWRITE**/
 background-color: #FF0547 !important;
    border-color: #FF0547 !important; 
 color: #ffffff !important; 
}

/********************************
SCROLL TOP BTN
*********************************/
.cxproductstyle-return-to-top-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background-color: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease-in-out;
    text-decoration: none;
 /**OVERWRITE**/
 cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.3s;
 border-radius: 100px !important;
 font-size: 14px !important;
 line-height: 14px !important;
 padding: 10px 16px !important;
 font-weight: 400 !important;
 margin-top: -10px !important;
 _background-color: red !important;
 white-space: nowrap !important;
 /*padding: 12px 20px !important; this is tablet*/
 /*padding: 10px 16px !important; this is phone*/
}
button.cxproductstyle-return-to-top-button{
 background-color: #000000 !important;
 color: #ffffff;
}
button.cxproductstyle-return-to-top-button:hover{ 
 background-color: #404040 !important; /*75 black%*/
 color: #ffffff;
}
button.cxproductstyle-return-to-top-button:active{
 background-color: #000000 !important;
 color: #ffffff;
}
button:hover {
	background-color: #1d4ed8;
	transform: translateY(0px)!important;
}
button:active {
	transform: translateY(0)!important;
}
button:focus {
	outline: 0 !important;
	outline-offset: 0 !important;
}

/*ARRO ALIGNMENT FIX*/
.cxproductstyle-return-to-top-button .cxproductstyle-return-to-top-icon {
 
}

.cxproductstyle-return-to-top-button {
 padding-right: 30px !important;
 padding-left: 15px !important;
}

button.cxproductstyle-return-to-top-button .cxproductstyle-return-to-top-icon {
 /**OVERWRITE**/
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0 !important;
 margin: 0 !important;
 margin-right: 5px !important;
 float: left;

}

/********************************
TABS CONTENTS FONTS
*********************************/
h2.cxproductstyle-inline-section-title {
 font-size: 32px !important;
 line-height: 36px !important;
 _border: solid 1px yellow;
}

h3.cxproductstyle-section-header,
h2.cxproductstyle-product-name,
h1.cxproductstyle-product-name,
h3.cxproductstyle-table-heading,
h3.cxproductstyle-related-products-header,
h3.cxproductstyle-resource-category-header,
h3.cxsolutionsstyle-title {
 font-size: 26px !important;
 line-height: 26px !important;
 padding-right: 0px !important;
  padding-left: 0px !important;
font-family: Archivo, sans-serif !important;
    font-variation-settings: "wdth" 125 !important;
    _width: 100% !important;
 font-weight: 600 !important;
}
h4.cxproductstyle-related-product-title,
h4.cxsolutionsstyle-column-title{
 font-size: 22px !important;
 line-height: 26px !important;
 padding: 0px !important;
 padding-bottom: 20px !important;
 _border: solid 1px orange;
font-family: Archivo, sans-serif !important;
    font-variation-settings: "wdth" 125 !important;
    _width: 100% !important;
 width: 100%;
 font-weight: 600 !important;
}
p.cxproductstyle-description-text,
.cxproductstyle-bullet-list,
.cxproductstyle-specs-container{
 font-size: 15px !important;
 line-height: 22px !important;
 color: #000000 !important;
}
p.cxproductstyle-related-product-description,
p.cxsolutionsstyle-column-description{
 font-size: 14px !important;
 line-height: 22px !important;
 color: #000000 !important;
 text-align: left !important;
}
/*
p.cxproductstyle-description-text::after {
  content: "OPTIONAL MARKETING CONTENT";
 display: block;
 border: solid 1px #cccccc !important;
 margin-top: 20px !important;
 padding: 50px 20px !important;
 text-align: center !important;
}
*/

.cxproductstyle-inline-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid #2563eb;
 /**OVERWRITE**/
 border-bottom: 2px solid #000000 !important;
}

/********************************
PREVIEW AREA
*********************************/


.cxproductstyle-inline-sections-container #preview {
 background-color: #ffffff;
 margin-bottom: 0 !important;
 margin-top: -00px !important;
 _border: solid 1px red !important; 
 position: relative !important; 
 
 
}

.cxproductstyle-inline-sections-container #preview h2.cxproductstyle-inline-section-title{
 background-color: #ffffff;
 margin-bottom: 0 !important;
 margin-top: -0px !important;
 _border: solid 1px red !important; 
 position: relative !important; 
 z-index: 105 !important; 
 background-color: transparent !important; 
 height: 70px !important; 
 width: 50% !important; 
 
}

.cxproductstyle-container {
    position: relative;
    width: 1440px;
 /**OVERWRITE**/
 width: 100% !important;
 _border: solid 10px yellow !important;
 
}


.cxproductstyle-overflow-container {
	position: relative;
	overflow: hidden;
 /**/
 height: 100% !important;
}

.cxproductstyle-main-display {
	position: relative;
	width: 100%;
	height: 500px;
 /**/
 min-height: 500px !important;
 height: 100%  !important;
 _border: solid 1px yellow;
}

.cxproductstyle-layout-container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
 /**/
 position: relative !important;
}

/*-----------------------------------------
images side
------------------------------------------*/
.cxproductstyle-image-section {
    width: 40%;
    height: 100%;
    position: relative;
}
.cxproductstyle-main-image-container {
    flex: 1;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f8fafc;
 /**OVERWRITE**/
 border-radius: 0 !important;
 border-right: solid 1px #cccccc !important; 
}
.cxproductstyle-thumbnails-column {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 80px;
    max-height: 100%;
    overflow-y: auto;
    flex-shrink: 0;
 /**OVERWRITE**/
 overflow-y: auto !important; 
overflow-x: hidden !important; 
}
.cxproductstyle-thumbnail {
    width: 80px;
    height: 80px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all .2s ease-in-out;
    flex-shrink: 0;
 /**OVERWRITE**/
 border: 2px solid #cccccc;
    border-radius: 0px !important; 
 background-color: #ffffff !important; 
}
.cxproductstyle-thumbnail-active {
    border-color: #2563eb;
    box-shadow: 0 4px 12px #2563eb4d;
    transform: scale(1.02);
 /**OVERWRITE**/
 border: 5px solid #FF0547 !important;
    box-shadow: none !important; 
}

.cxproductstyle-thumbnail:hover {
	border-color: #3b82f6;
	box-shadow: 0 2px 8px #3b82f640;
	transform: scale(1.05);
  /**OVERWRITE**/
 	transform: scale(1) !important; 
 border-color: #000000 !important;
}
.cxproductstyle-thumbnail-active {
	border-color: #2563eb;
	box-shadow: 0 4px 12px #2563eb4d;
	transform: scale(1.02);
  /**OVERWRITE**/
 	transform: scale(1) !important; 
 border-color: #FF0547 !important;
}
.cxproductstyle-thumbnail-hover {
	border-color: #60a5fa;
	box-shadow: 0 3px 10px #60a5fa66;
	transform: scale(1.08);
  /**OVERWRITE**/
 	transform: scale(1) !important; 
 border-color: #000000 !important;
}
.cxproductstyle-thumbnail-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .2s ease-in-out
}
.cxproductstyle-thumbnail:hover .cxproductstyle-thumbnail-image {
	transform: scale(1.1);
 /**OVERWRITE**/
 transform: scale(1) !important; 
}

/*-----------------------------------------
INFO side
------------------------------------------*/
.cxproductstyle-info-section {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: #fff;
 /**OVERWRITE**/
 padding: 1.5rem !important; 
 _background-color: red !important; 
    justify-content: left !important; 
 /**/
 width: 60% !important; 
 border-left: solid 1px #cccccc !important;
 margin-left: -1px !important;
 min-height: 500px !important;
}
.cxproductstyle-info-content {
    max-width: 28rem;
 /**OVERWRITE**/
 max-width: 100% !important; 
}
.cxproductstyle-buttons-section {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: #f9fafb;
    border-left: 1px solid #e5e7eb;
 /**OVERWRITE**/
 padding: 0 !important; 
 _background-color: red !important; 
 /**/
 display: none !important; 
}

/********************************
DETAILS AREA
*********************************/
.cxproductstyle-inline-sections-container #details {
 background-color: #f2f2f2
}

#cxproductstyle_features_specs_section_wrapper {
 display: flex;
 _border: solid 10px blue;
 flex-direction: row !important;
 gap: 2rem !important; /*remove gap between all containers*/
 padding-bottom: 2rem !important;
}

#cxproductstyle_features_section,
#cxproductstyle_specifications_section{
 background-color: white !important;
 padding: 20px;
 padding-bottom: 0 !important;
 display: flex;
 _border: solid 10px red;
 flex-direction: column !important;
 flex-basis: 50%;
flex-grow: 0;
}


.cxproductstyle-bullet-list {
    list-style-type: disc;
    list-style-position: inside;
    color: #374151;
    margin-bottom: 1.5rem;
 /**OVERWRITE**/
  list-style-type: square !important;
 list-style-position: outside !important;
 color: #000000 !important;
 margin-left: 15px !important;
 margin-bottom: 0rem !important;
 margin-bottom: 1.5rem !important;
}

.cxproductstyle-specs-container {
 color: #000000 !important;
}

.cxproductstyle-table-main-container {
    width: 100%;
    background-color: #fff;
    border-radius: .5rem;
    box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;
    padding: 1.5rem;
 /**OVERWRITE**/
 border-radius: 0 !important;
 box-shadow: none !important;
 padding: 0 !important;
 background-color: #f2f2f2 !important;
}

h3.cxproductstyle-table-heading {
    font-size: 1.125rem;
    font-weight: 500;
    color: #111827;
    margin-bottom: 1rem;
 /**OVERWRITE**/
 margin: 15px 0px !important;
 margin-bottom: 0 !important;
 background-color: #f2f2f2 !important;
 border: none !important;
 height: 1px !important;
 _background-color: orange !important;
 float: left !important;
 _width: 100% !important;
 width: 100%;
}
.cxproductstyle-button-container {
 margin-right: 0px !important;
 _background-color: yellow !important;
 float: right !important;
 width: auto !important;
}
/*BUTTONS*/
.cxproductstyle-copy-button {
    padding: .5rem 1rem;
    background-color: var(--chemelex-blue, #2563eb);
    color: #fff;
    border: none;
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .2s, transform .1s;
 /**OVERWRITE**/
 cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.3s;
 border-radius: 100px !important;
 font-size: 14px !important;
 line-height: 14px !important;
 padding: 10px 16px !important;
 font-weight: 400 !important;
 background-color: #ffffff !important;
 color: #000000 !important;
 white-space: nowrap !important;
 /*padding: 12px 20px !important; this is tablet*/
 /*padding: 10px 16px !important; this is phone*/
}

button.cxproductstyle-copy-button:hover {
 background-color: #f2f2f2 !important; /*5% black*/
 color: #7f7f7f !important;
}
button.cxproductstyle-copy-button:active {
 background-color: #e5e5e5 !important; /*10% black*/
 color: #404040 !important;
}

.cxproductstyle-unit-toggle-button {
    padding: .5rem 1rem;
    background-color: var(--chemelex-blue, #2563eb);
    color: #fff;
    border: none;
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .2s, transform .1s;
 /**OVERWRITE**/
 cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.3s;
 border-radius: 100px !important;
 font-size: 14px !important;
 line-height: 14px !important;
 padding: 10px 16px !important;
 font-weight: 400 !important;
 background-color: #000000 !important;
 color: #ffffff;
 white-space: nowrap !important;
 /*padding: 12px 20px !important; this is tablet*/
 /*padding: 10px 16px !important; this is phone*/
}


button.cxproductstyle-unit-toggle-button:hover{ 
 background-color: #404040 !important; /*75 black%*/
 color: #ffffff;
}
button.cxproductstyle-unit-toggle-button:active{
 background-color: #000000 !important;
 color: #ffffff;
}

/*TABLE WITH STICKY COLUMN*/

.cxproductstyle-table-scroll-container {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 60vh;
    position: relative;
 /**OVERWRITE**/
 width: 100%!important
}
.cxproductstyle-table {
    min-width: 1000px;
    border-collapse: collapse;
    border: 1px solid #d1d5db;
    table-layout: fixed;
    width: auto;
 /**OVERWRITE**/
 width: 100% !important;
 _border: 10px solid red !important;
 border: none !important;
 background-color: #d1d5db !important;
 padding: 1px !important;
 color: #000000 !important;
}
/*this the product number column*/
.cxproductstyle-table-cell:first-child {
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 5;
    box-shadow: 2px 0 4px #0000001a;
 /**OVERWRITE**/
 border-left: 1px solid #d1d5db !important;
 background-color: #e5e5e5 !important;
 _background-color: red !important;
 font-weight: 600 !important;
}
/*this the catalog column*/
.cxproductstyle-table-header-cell:first-child {
 background-color: #e5e5e5 !important;
}
/*these the catalog categories headers*/
.cxproductstyle-table-header-cell {
 /**OVERWRITE**/
 background-color: #f2f2f2 !important;
}
.cxproductstyle-table-cell {
    border: 1px solid #d1d5db;
    padding: .5rem;
    width: 200px;
    min-width: 200px;
 /**OVERWRITE**/
 background-color: #ffffff !important;
}

/********************************
RESOURCES AREA
*********************************/
.cxproductstyle-inline-sections-container #resources {
 background-color: #ffffff;
}
.cxproductstyle-resource-items {
    display: flex;
    flex-direction: column;
    gap: .5rem;
 /**OVERWRITE**/
    flex-flow: row wrap !important;
    width: 100% !important;
}
.cxproductstyle-resource-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    background-color: #f9fafb;
    border-radius: .375rem;
 /**OVERWRITE**/
 width: calc(50% - .375rem);
 flex-flow: wrap !important;
 gap: 0rem !important;
    padding: .75rem !important;
}
/********************************
VIDEO AREA
*********************************/
.cxproductstyle-video-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
 /**OVERWRITE**/
 display: block !important;
 _background-color: coral !important;
}
.cxproductstyle-inline-sections-container #video {
 background-color: #f2f2f2;
}



.cxproductstyle-video-iframe-container {
	/*position: relative;
	width: 100%;
	padding-bottom: 56.25%
 */
 /**OVERWRITE**/
 width: 33.33% !important;
 width: calc(32%) !important;
margin-right: 2% !important;
 padding-bottom: 20px !important;
 _background-color: blue;
 float: left !important;
}
/*remove padding each 3rd*/
.cxproductstyle-video-iframe-container:nth-child(4),
.cxproductstyle-video-iframe-container:nth-child(7){
 _padding-right: 0px !important;
 margin-right: 0px !important;
 float: right !important;

}

.cxproductstyle-video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: .5rem;
    border: 1px solid #d1d5db;
 /**OVERWRITE**/
 position: relative !important;
 width: 450px !important;
 min-height: 265px !important;
 border-radius: 0 !important;
 float: left !important;
}
/********************************
RELATED PRODUCT AREA
*********************************/
.cxproductstyle-inline-sections-container #related-products {
 background-color: #ffffff;
}

.cxproductstyle-related-product-card {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;
    overflow: hidden;
    transition: box-shadow .2s;
 /**OVERWRITE**/
 border-radius: 0 !important;
    box-shadow: none !important;
 position: relative !important;
 padding-bottom: 40px !important; /*add padding to accoumodate button absolute*/
 _background-color: aqua !important;
}

.cxproductstyle-related-product-button-container{
 width: auto !important;
 _background-color: yellow;
 position: absolute;
 bottom: 15px;
}

.cxproductstyle-related-product-button-container button{
 width: auto !important;
}

/********************************
SOLUTION TABLE
*********************************/
#cxstyle_solutions_table {
 /*this component does NOT have padding done the usual way, so adding here via border*/
 padding-top: 20px !important;
 padding-bottom: 40px !important;
}
#cxstyle_solutions_table_full {
 padding-top: 20px !important;
 padding-left: 30px !important;
 padding-right: 30px !important;
}

.cxsolutionsstyle-container {
    width: 100%;
    padding: 1rem;
 /**OVERWRITE**/
 padding: 0 !important;
}

.cxsolutionsstyle-copy-button-container {
    margin-top: -50px !important;
    margin-right: 0px !important;
 float: right;
 
}

.cxsolutionsstyle-copy-button {
    padding: .5rem 1rem;
    background-color: var(--chemelex-blue, #2563eb);
    color: #fff;
    border: none;
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .2s, transform .1s;
 /**OVERWRITE**/
 cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.3s;
 border-radius: 100px !important;
 font-size: 14px !important;
 line-height: 14px !important;
 padding: 10px 16px !important;
 font-weight: 400 !important;
 background-color: #ffffff !important;
 color: #000000 !important;
 white-space: nowrap !important;
}

/*TABLE WITH STICKY COLUMN*/

.cxsolutionsstyle-table {
    min-width: 100%;
    border-collapse: collapse;
    border: 1px solid #d1d5db;
 /**OVERWRITE**/
 width: 100% !important;
 _border: 10px solid red !important;
 border: none !important;
 background-color: #d1d5db !important;
 padding: 1px !important;
 color: #000000 !important;
}

.cxsolutionsstyle-header-cell,
.cxsolutionsstyle-data-cell {
    border: 1px solid #d1d5db;
    padding: .5rem;
    background-color: #f3f4f6;
    font-weight: 400 !important;
 /**OVERWRITE**/
 width: 300px;
    min-width: 300px;
}
/*this block the input from being active*/
.cxsolutionsstyle-header-cell input,
.cxsolutionsstyle-data-cell input {
      outline: none;
      pointer-events:none;
}
/*this the product number column*/
.cxsolutionsstyle-header-cell:first-child,
.cxsolutionsstyle-data-cell:first-child{
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 5;
    box-shadow: 2px 0 4px #0000001a;
 /**OVERWRITE**/
 border-left: 1px solid #d1d5db !important;
 background-color: #f2f2f2 !important;
 width: 160px;
    min-width: 160px;
 font-weight: 600 !important;
}
/*regular cells*/
.cxsolutionsstyle-header-cell,
.cxsolutionsstyle-data-cell{
 background-color: #ffffff !important;
}

/*this the cell with content*/
.cxsolutionsstyle-table {
	height: 1px; /*make button sits bottom*/
}

.cxsolutionsstyle-column-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    height: 100%;
	/**OVERWRITE**/
 padding: 5px !important;
 padding-bottom: 45px !important; /*space for the button*/
	justify-content: flex-start !important;
 _background-color: aqua;
}
.cxsolutionsstyle-column-image {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-bottom: 1rem;
    border-radius: .375rem;
    object-fit: cover;
 /**OVERWRITE**/
 border-radius: 0rem !important;
 max-width: 280px !important;
}
.cxsolutionsstyle-solution-info {
	width: 100%;
	height: 100%;
	position: relative
}
p.cxsolutionsstyle-column-description{
 _background-color: yellow;
}
/*postion bottom of the table*/
.cxsolutionsstyle-column-button {
	margin-top: auto;
	position: absolute;
	bottom: -40px;
 left: 0px;
}


@media only screen and (max-width : 1400px) /*SMALLER MONITORS*/{
 .cxsolutionsstyle-header-cell,
.cxsolutionsstyle-data-cell {
 /**OVERWRITE**/
    min-width: 250px;
}
 .cxsolutionsstyle-column-image {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-bottom: 1rem;
    border-radius: .375rem;
    object-fit: cover;
 /**OVERWRITE**/
 border-radius: 0rem !important;
 max-width: 180px !important;
}
}

@media only screen and (max-width : 1180px) /*LARGE TABLET LANDSCAPE BREAKPOINT*/{
.cxsolutionsstyle-header-cell,
.cxsolutionsstyle-data-cell {
 /**OVERWRITE**/
    min-width: 200px;
}
}

@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
 .cxsolutionsstyle-header-cell:first-child,
.cxsolutionsstyle-data-cell:first-child{
 /**OVERWRITE**/
 width: 140px;
    min-width: 140px;
}
}

/*********************************
SCROLLING PANELS BARS
*********************************/


.cxsolutionsstyle-table-container::-webkit-scrollbar,
.cxproductstyle-table-scroll-container::-webkit-scrollbar {
  width: 10px; /* Width of the vertical scrollbar */
  height: 10px; /* Height of the horizontal scrollbar */
}

/* Style the scrollbar thumb */
.cxsolutionsstyle-table-container::-webkit-scrollbar-thumb,
.cxproductstyle-table-scroll-container::-webkit-scrollbar-thumb {
  background-color: #FF0547 !important;
  border-radius: 5px !important;
 border: solid 1px #666666 !important;
}

/* Style the scrollbar track */
.cxsolutionsstyle-table-container::-webkit-scrollbar-track,
.cxproductstyle-table-scroll-container::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0) !important;
  background-color: #666666 !important;
}


/*********************************
PREVIEW AREA
*********************************/

@media only screen and (max-width : 1400px) /*SMALLER MONITORS*/{
/*MARKETING BUTTONS*/
.cxproductstyle-marketing-wrappers button{
 width: 170px !important;
 margin-right: 10px !important;
 float: left !important;
 padding: 0 4px !important;
 
}
.cxproductstyle-info-section {
 width: 65% !important; 
 min-height: 300px !important;
}
.cxproductstyle-main-display {
 min-height: 300px !important;
}
.cxproductstyle-image-section {
    width: 35% !important; 
}
/*VIDEO*/
.cxproductstyle-video-iframe {
 width: 100% !important;
 min-height: 236px !important;
}
}

@media only screen and (max-width : 1180px) /*LARGE TABLET LANDSCAPE BREAKPOINT*/{
/*MARKETING BUTTONS*/
.cxproductstyle-marketing-btns,
.cxproductstyle-marketing-btns .cxproductstyle-marketing-postion{
 height: 75px !important;
}
.cxproductstyle-btn-mask {
 height: 221px !important;
 _background-color: red;
}
.cxproductstyle-marketing-wrappers {
 background-color: #ffffff;
 _background-color: aqua;
 padding: 20px;
 padding-bottom: 10px;
 display: block;
 float: right;
 width: 100% !important;
}
.cxproductstyle-marketing-wrappers button{
 width: calc(33.33% - 7px) !important;
 margin-right: 10px !important;
 float: left !important;
 padding: 0px 4px !important;
}
.cxproductstyle-marketing-wrappers button:last-child{
 margin-right: 0px !important;
}
 
/*TABS*/
.cxproductstyle-inline-nav-border {
 /**OVERWRITE**/
 top: 230px !important;
}
.cxproductstyle-inline-section {
 /**OVERWRITE**/
 scroll-margin-top: 290px !important; /*this clears the scrolling to the right area*/
}
.cxproductstyle-inline-nav {
 /**OVERWRITE**/
 _background-color: purple !important;
 width: 100% !important;
}
.cxproductstyle-inline-nav-links {
 /**OVERWRITE**/
 _background-color: orange !important;
 width: 100% !important;
 padding: 0 20px !important;
}

.cxproductstyle-inline-nav-link {
    display: inline-block;
    padding: .75rem 1.5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;
    color: #374151;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-weight: 500;
    font-size: .875rem;
    transition: all .2s ease-in-out;
 /**OVERWRITE**/
 text-align: center !important;
 padding: .75rem 1.5rem;
 width: 20% !important;
 margin: 0rem !important;
}
 .cxproductstyle-info-section {
 width: 60% !important; 
}
.cxproductstyle-main-display {
}
.cxproductstyle-image-section {
    width: 40% !important; 
}
/*VIDEO*/
.cxproductstyle-video-iframe {
 width: 100% !important;
 min-height: 210px !important;
}
}

@media only screen and (max-width : 1024px) /*TABLET BREAKPOINT*/{
/*MOBILE BUTTON STARTS HERE!*/
/*MARKETING BUTTONS*/
.cxproductstyle-marketing-btns,
.cxproductstyle-marketing-btns .cxproductstyle-marketing-postion{
 height: 75px !important;
 margin-top: -10px !important;
}
.cxproductstyle-btn-mask {
 height: 205px !important;
 background-color: #ffffff;
}
.cxproductstyle-marketing-wrappers {
 background-color: #ffffff;
 _background-color: aqua;
 padding: 20px;
 padding-bottom: 10px;
 display: block;
 float: right;
 width: 100% !important;
}
.cxproductstyle-marketing-wrappers button{
 width: calc(33.33% - 7px) !important;
 margin-right: 10px !important;
 float: left !important;
 padding: 0px 4px !important;
}
.cxproductstyle-marketing-wrappers button:last-child{
 margin-right: 0px !important;
}
/*PREVIEW*/
#preview.cxproductstyle-inline-preview-section {
  padding-top: 0 !important;
 }
/*TABS*/
.cxproductstyle-inline-nav-border {
 /**OVERWRITE**/
 top: 200px !important;
}
.cxproductstyle-inline-section {
 /**OVERWRITE**/
 scroll-margin-top: 260px !important; /*this clears the scrolling to the right area*/
}
/*VIDEO*/
.cxproductstyle-video-iframe {
 width: 100% !important;
 min-height: 190px !important;
} 
 
}

@media only screen and (max-width : 820px) /*TABLET PORTRAIT:*/{

 
/*PREVIEW*/
/*stack elements from here on*/
.cxproductstyle-layout-container {
   display: block !important; 
 flex-direction: row !important; 
}

 .cxproductstyle-info-section {
  /**OVERWRITE**/
 width: 100% !important; 
  border: none !important;
 margin-left: 0 !important;
    padding: 0 !important;
  margin-top: 30px !important;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  border-top: solid 1px #cccccc !important;
}
 
 
.cxproductstyle-main-display {
}
 /*stack and move thumb below*/
.cxproductstyle-image-section {
    width: 100% !important; 
}
.cxproductstyle-main-image-container {
 border: none !important;
}
 .cxproductstyle-thumbnail-container {
		
  flex-direction: column-reverse!important;
	}
	.cxproductstyle-thumbnails-column {
		flex-direction: row !important;
		width: 100% !important;
	}
	.cxproductstyle-thumbnail {
		width: 80px !important;
		height: 80px !important;
		flex-shrink: 0 !important;
	}
 
 
 
/*DETAILS*/
/*stack containers*/
 #cxproductstyle_features_specs_section_wrapper {
  /**OVERWRITE**/
 flex-direction: column !important;
}

#cxproductstyle_features_section,
#cxproductstyle_specifications_section{
}
 .cxproductstyle-bullet-list {
  padding-bottom: 20px !important;
 }
/*RESOURCES*/
.cxproductstyle-resource-item {
/*stack*/
 width: calc(100% - .375rem) !important;
}
 
/*VIDEO*/
 .cxproductstyle-video-iframe-container {
 /**OVERWRITE**/
 width: 33.33% !important;
 width: calc(49%) !important;
margin-right: 2% !important;
 padding-bottom: 20px !important;
 float: left !important;
}
.cxproductstyle-video-iframe-container:nth-child(3),
.cxproductstyle-video-iframe-container:nth-child(5){
 _padding-right: 0px !important;
 margin-right: 0px !important;
 float: right !important;
 _border: solid 10px yellow !important;

}
/*remove padding each 3rd*/
.cxproductstyle-video-iframe-container:nth-child(4),
.cxproductstyle-video-iframe-container:nth-child(7){
 _padding-right: 0px !important;
 margin-right: 0px !important;
 float: left !important;
 _border: solid 10px red !important;

}
.cxproductstyle-video-iframe {
 width: 100% !important;
 min-height: 210px !important;
}
 
}

@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
/*MARKETING BUTTONS */ .cxproductstyle-marketing-btns,
.cxproductstyle-marketing-btns .cxproductstyle-marketing-postion{
 height: 75px !important;
 margin-top: -10px !important;
}
.cxproductstyle-marketing-btns button.cxstyle-btn-color-black,  
.cxproductstyle-marketing-btns button.cxstyle-btn-color-connection-red, 
.cxproductstyle-marketing-btns button.cxstyle-btn-color-steel-blue {
 padding: 5px !important;
}
.cxproductstyle-marketing-btns button.cxstyle-btn-color-black::after, 
.cxproductstyle-marketing-btns button.cxstyle-btn-color-connection-red::after, 
.cxproductstyle-marketing-btns button.cxstyle-btn-color-steel-blue::after {
    content: " ";
    padding-left: 3px;
}
/*BACK TO TOP*/ 
.cxproductstyle-return-to-top-button {
 /**OVERWRITE**/
 margin-top: -10px !important;
align-self: flex-start !important;
    }


.cxproductstyle-inline-section-header {
 /**OVERWRITE**/
  flex-direction: row !important;
    }
 
/*PREVIEW AREA*/ 
/*make the image and description stack*/
 .cxproductstyle-inline-sections-container #preview {
  /**OVERWRITE**/
  display: flex !important;
}
 .cxproductstyle-inline-section-content {
  float: left !important;
  display: flex !important;
 }
 
.cxproductstyle-inline-section-content {
        flex-direction: column !important;
    } 
 
/*DETAIL AREA*/
 #cxstyle_product_item_table {
  display: block !important;
  
 }
h3.cxproductstyle-table-heading {
 _width: 100% !important;
 width: 100%;
 height: 40px !important;
 _background-color: red !important;
}
.cxproductstyle-button-container {
 _background-color: aqua;
 width: 100% !important;
 }
/*BUTTONS*/
.cxproductstyle-copy-button,
.cxproductstyle-unit-toggle-button{
 /**OVERWRITE**/
 width: 50% !important;
}

/*these the catalog categories headers*/
.cxproductstyle-table-header-cell {
 /**OVERWRITE**/
 width: auto !important;
    min-width: 160px !important;
}
.cxproductstyle-table-cell {
 /**OVERWRITE**/
 width: auto !important;
    min-width: 160px !important;
}
 
/*VIDEO*/
 .cxproductstyle-video-iframe-container {
 width: 33.33% !important;
 width: calc(100%) !important;
margin-right: 0% !important;
 padding-bottom: 20px !important;
 float: left !important;
}
.cxproductstyle-video-iframe-container:nth-child(3),
.cxproductstyle-video-iframe-container:nth-child(5){
 _padding-right: 0px !important;
 margin-right: 0px !important;
 float: right !important;
 _border: solid 10px yellow !important;

}
/*remove padding each 3rd*/
.cxproductstyle-video-iframe-container:nth-child(4),
.cxproductstyle-video-iframe-container:nth-child(7){
 _padding-right: 0px !important;
 margin-right: 0px !important;
 float: left !important;

}
.cxproductstyle-video-iframe {
 width: 100% !important;
 min-height: 280px !important;
}
/*ALL SECTION, REMOVE SPACING*/
 .cxproductstyle-inline-section .cxproductstyle-inline-section-content{
        padding: 0rem !important;
        margin: 0 0rem !important;
    }

}

@media only screen and (max-width : 480px) /*MOBILE BREAKPOINT*/{
/*TABS*/
 .cxproductstyle-inline-nav-links a:first-child {
  display: none !important;
 }
 
 /*back to top: remove copy and leave the arrow*/
 
button.cxproductstyle-return-to-top-button  {
 /**OVERWRITE**/
  font-size: 0 !important;
 padding: .8rem !important;
 padding: 0 !important;
 gap: 0 !important;
 margin-top: -10px !important;
}
button.cxproductstyle-return-to-top-button .cxproductstyle-return-to-top-icon {
 /**OVERWRITE**/
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0 !important;
 margin: 5px !important;

}
}


/********************************
HUBSPOT OVERLAY
*********************************/

#cxstyle-modal-wrapper {
 border: solid 1px blue !important;
 _position: relative !important;
    z-index: 999 !important;
}
.cxproductstyle-quote-modal-container {
    position: relative;
    z-index: 9999 !important;
 _border: solid 1px red !important;
}

.cxproductstyle-quote-modal-container {
    padding: 2rem;
    max-width: 600px;
    margin: 0 auto;
 /*OVERWRITE*/
 margin-top: 20px !important;
 _border: solid 1px aqua !important;
 padding: 0 !important;
}

.cxproductstyle-quote-modal-container h2 {
    margin: 0 0 15px 0 !important;
    padding-bottom: 8px;
    font-size: 24px !important;
    border-bottom: 2px solid #FF0547 !important;
}

.cxproductstyle-modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
 /**/
 display: block !important;
 float: left !important;
 border-top: 0px solid #e5e7eb !important;
 margin-top: 0 !important;
 padding-top: 0px !important;
 padding-bottom: 30px !important;
}
.cxproductstyle-modal-actions button {
    color: #ffffff;
    font-size: 12px;
    line-height: 12px;
    font-family: Noto Sans;
 font-weight: 700 !important;
 border-radius: 3px !important;
}



/*MARKETING WIDTH FIX BUTTONS*/

.cxproductstyle-marketing-wrappers {
}
.cxproductstyle-marketing-wrappers button{
}
.cxproductstyle-marketing-wrappers button.cxproductstyle-inline-action-button {
  white-space: normal; /* Allows text to wrap */
  word-break: break-word; /* Breaks long words if necessary */
  _width: 150px; /* Set a fixed width to demonstrate wrapping */
}
@media only screen and (max-width : 1024px) /*SMALL TABLET LANDSCAPE BREAKPOINT*/{
.cxproductstyle-marketing-wrappers {
 padding-top: 35px !important; /*accomodate bigger buttons away from the menu*/
}
#preview .cxproductstyle-inline-section-content h2.cxproductstyle-inline-section-title {
  padding-top: 30px !important;
 }
}
@media only screen and (max-width: 767px) {

 .cxproductstyle-marketing-btns button.cxstyle-btn-color-black::after, 
 .cxproductstyle-marketing-btns button.cxstyle-btn-color-connection-red::after, 
 .cxproductstyle-marketing-btns button.cxstyle-btn-color-steel-blue::after {
        content: "";
        padding-left: 0;
    }
}
@media only screen and (max-width : 480px) /*MOBILE BREAKPOINT*/{
 .cxproductstyle-marketing-wrappers {
 padding: 5px !important;
 padding-top: 35px !important; /*accomodate bigger buttons away from the menu*/
}
.cxproductstyle-marketing-wrappers button.cxproductstyle-inline-action-button {
  min-width: 32.33% !important; 
 min-height: 55px !important; 
 padding-right: 10px !important; 
 padding-left: 10px !important; 
 display: block !important; 
 font-size: 13px !important; 
 margin: .5% !important; 
}
 #preview.cxproductstyle-inline-preview-section {
  padding-top: 30px !important; 

 }
 #preview .cxproductstyle-inline-section-content h2.cxproductstyle-inline-section-title {
  padding: 0 !important;
  font-size: 32px !important;
  line-height: 36px !important;
  min-width: 420px !important;
 }
}

/********************************
DATA BUG: REMOVE FOR NOW: DELETE BELOW THIS WHEN FIXED
*********************************/
/*
#details #cxstyle_product_item_table {
 display: none;
}
#cxproductstyle_specifications_section {
 display: none;
}
#cxproductstyle_features_section {
    flex-basis: 100%;
}

@media only screen and (max-width: 767px) {
 #details #cxstyle_product_item_table {
 display: none !important;
}
}
*/




/* ========== chemelex_various.css (20.03 KB) ========== */

@charset "UTF-8";
/* CSS Document */
/* v:0916:*/
/*********************************
FIXES OR ADDITION
- change this document name from chemelex_gridflow.css to chemelex_various.css
- added style for the FORM
*********************************/




/***************************
GRID FLOW
**************************
sizes of the containers are inside the sitestyle.css*/

.cxtest-filter-dropdown-container {
    width: 100%;
    margin-bottom: 1rem;
 /**OVERWRITE**/
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}
.cxtest-filter-dropdown-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding: .5rem 0;
 /**OVERWRITE**/
 justify-content: center !important;
 background-color: #f2f2f2 !important;
 color: #000000 !important;
 gap: .5rem;
 padding: 20px 20px 0px 20px !important;
}
.cxflowgrid-flow-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;
    align-items: flex-start;
 /**OVERWRITE**/
  gap: 0 !important;
 align-items: stretch !important;
}

.cxtest-filter-dropdown-wrapper select {
 background-color: #ffffff;
 padding: 10px 0px 10px 5px;
 border: solid 1px #cccccc;
 border-radius: 0 !important;
}
.cxtest-filter-dropdown-wrapper select:focus {
  outline: none;
  border: solid 1px #cccccc;
 border-radius: 0 !important;
}


.cxflowgrid-card {
    flex: 0 0 auto;
    min-width: 250px;
    max-width: 350px;
    min-height: 300px;
    border-radius: 8px;
    box-shadow: 0 2px 4px #0000001a;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    background: #fff;
 /**OVERWRITE**/
 border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
 min-width: 30.9% !important;
    max-width: 30.9% !important;
 _border: solid 1px orange !important;
 margin: 1.2% !important;
}
.cxflowgrid-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px #00000026;
 /**OVERWRITE**/
 transform: translateY(0) !important;
    box-shadow: none !important;
}
.cxflowgrid-card #cxstyle_copy_position {
 padding-top: 10px !important;
 padding-bottom: 15px !important;
}
.cxflowgrid-card #cxstyle_copy_position div:first-child {
    margin-top: 0px !important;
}

.cxproductstyle-subcategory-panel:hover {
    box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;
    transform: translateY(-2px)
}

@media only screen and (max-width : 820px) /*TABLET PORTRAIT:*/{
 .cxflowgrid-card {
 /**OVERWRITE**/
 border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
 min-width: 98% !important;
    max-width: 98% !important;
 _border: solid 1px orange !important;
 margin: 1% !important;
  margin-bottom: 20px !important;
}
}



/***************************
TABLES
**************************/
#cxstyle_filterable_table, 
#cxstyle_filterable_table_full,
#cxstyle_simple_table{
    width: 100%;
    margin: 0 auto;
 /**OVERWRITE**/
  max-width: 100% !important;
}

.cxsimplestyle-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--bg-white);
    border-radius: .5rem;
    box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;
 /**OVERWRITE**/
 padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.cxsimplestyle-table-container {
    width: 100%;
    overflow-x: auto;
    border-radius: .5rem;
    box-shadow: 0 1px 3px #0000001a, 0 1px 2px #0000000f;
 /**OVERWRITE**/
 padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
 background-color: aqua;
 background-color: #ffffff !important;
}
.cxsimplestyle-table-container table {
   _border: solid 1px red !important;
}
.cxsimplestyle-table-container table td{
   border: solid 1px #e5e5e5 !important;
 padding: 5px 10px;
 width: 200px !important;
}
/*header*/
.cxsimplestyle-table-container table td.cxsimplestyle-header-cell{
   background-color: #cccccc !important;
 padding: 0 !important;
  marging: 0 !important;
}
.cxsimplestyle-header-content {
    display: flex;
    align-items: center;
    gap: .5rem;
 /**OVERWRITE**/
 _border: solid 1px yellow !important;
 padding: 0 !important;
  marging: 0 !important;
}
.cxsimplestyle-filter-input {
 width: calc(100% - 20px) !important;
 margin: 10px !important;
 padding: 10px !important;
 margin-top: -5px !important;
 border-radius: 0 !important;
}

/*SCROLLING PANELS BARS*/

.cxsimplestyle-table-container::-webkit-scrollbar {
  width: 10px; /* Width of the vertical scrollbar */
  height: 10px; /* Height of the horizontal scrollbar */
}

/* Style the scrollbar thumb */
.cxsimplestyle-table-container::-webkit-scrollbar-thumb {
  background-color: #FF0547 !important;
  border-radius: 5px !important;
 border: solid 1px #666666 !important;
}

/* Style the scrollbar track */
.cxsimplestyle-table-container::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0) !important;
  background-color: #666666 !important;
}

/*COPY TABLE CONTENT BTN*/
.cxsimplestyle-copy-button {
    padding: .5rem 1rem;
    background-color: var(--chemelex-blue, #2563eb);
    color: #fff;
    border: none;
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .2s, transform .1s;
 /**OVERWRITE**/
 cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.3s;
 border-radius: 100px !important;
 font-size: 14px !important;
 line-height: 14px !important;
 padding: 10px 16px !important;
 font-weight: 400 !important;
 background-color: #ffffff !important;
 color: #000000 !important;
 white-space: nowrap !important;
}

button.cxsimplestyle-copy-button:hover {
 background-color: #e5e5e5 !important; /*10% black*/
 color: #000000;
 /**/
 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}
button.cxsimplestyle-copy-button:active {
 background-color: #cccccc !important; /*20% black*/
 color: #000000;
}

/***************************
404 Page
**************************/
#not_found_page_404 {
 background-color: #ffffff !important;
 height: calc(100vh - 150px) !important;
 display: flex !important;
 align-items: center !important;
}
#not_found_page_404 h2 {
    font-size: 36px !important;
 line-height: 42px !important;
 padding: 0 !important;
 color: #000000 !important;
 padding-bottom: 20px !important;
 text-align: left !important;
}

#not_found_page_404 p {
    font-size: 16px !important;
 line-height: 20px !important;
 padding: 0 !important;
 color: #000000 !important;
 padding-bottom: 20px !important;
 text-align: left !important;
}

/*buttons: hide for now*/
#not_found_page_404 button {
 display: none !important;
}
#not_found_page_404 button {
    padding: .5rem 1rem;
    background-color: var(--chemelex-blue, #2563eb);
    color: #fff;
    border: none;
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .2s, transform .1s;
 /**OVERWRITE**/
 cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.3s;
 border-radius: 100px !important;
 font-size: 14px !important;
 line-height: 14px !important;
 padding: 10px 16px !important;
 font-weight: 400 !important;
 background-color: #ffffff !important;
 color: #000000 !important;
 white-space: nowrap !important;
 margin-right: 10px;
}

#not_found_page_404 button:hover {
 background-color: #e5e5e5 !important; /*10% black*/
 color: #000000;
 /**/
 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}
#not_found_page_404 button:active {
 background-color: #cccccc !important; /*20% black*/
 color: #000000;
}

#not_found_page_404 button:last-child {
 background-color: #000000 !important;
 color: #ffffff !important;
}

#not_found_page_404 button:last-child:hover {
 background-color: #333333 !important; /*10% black*/
 color: #000000;
}
#not_found_page_404 button:last-child:active {
 background-color: #666666 !important; /*10% black*/
 color: #000000;
}



/***************************
iframe
**************************/
#cxstyle_grid_container.cxstyle-full-screen-override {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 0 auto;
}
.cxstyle-full-screen-override
#cxstyle_media_embed_block_iframe iframe{
 width: calc(100vw - 60px) !important;
 height: calc(100vh - 60px) !important;
 background-color: #ffffff;
 margin: 30px auto 0 auto;
 margin: 30px !important;
}


/***************************
form
**************************/

#cxstyle_warranty_form_wrapper,
#cxstyle_nuheat_warranty_form_wrapper{
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 10px #0000001a;
  /**OVERWRITE**/
 border-radius: 0px !important;
}

.cxforms-section-title,
.cxforms-checkbox-group-label{
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 25px 0 15px;
    border-bottom: 2px solid #1976d2;
    padding-bottom: 8px;
 /**OVERWRITE**/
 font-size: 24px !important;
 border-bottom: 2px solid #FF0547 !important;
}

.cxforms-input, .cxforms-select, .cxforms-textarea, .cxforms-file-input {
    padding: 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color .3s ease;
    background-color: #fff;
}

.cxforms-file-input {
    padding: 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color .3s ease;
    background-color: #fff;
 /**OVERWRITE**/
 padding: 0 !important;
    border: none !important;
    border-radius: 0px;
}

.cxforms-file-input::file-selector-button {
	background-color: #1976d2;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 8px 16px;
	margin-right: 12px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	transition: background-color .3s ease;
 /**OVERWRITE**/
 background-color: #FF0547 !important;
 border-radius: 100px !important;
 font-size: 14px !important;
 line-height: 14px !important;
 padding: 14px 24px !important;
}
.cxforms-file-input::file-selector-button:hover {
	background-color: #DB043E !important;
}
.cxforms-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 15px 0;
 /**OVERWRITE**/
  margin-bottom: 0px !important;
}
body .cxforms-warranty-info,
body .cxforms-warranty-info p,
body .cxforms-privacy-text {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin: 20px 0 10px;
 /**OVERWRITE**/
  margin: 0px !important;
 margin-bottom: 10px !important;
 _background-color: aqua;
 color: #555555 !important;
 font-weight: 400 !important;
}
.cxforms-privacy-text a {
    color: #1976d2;
    text-decoration: underline;
 /**OVERWRITE**/
 color: #FF0547 !important;
}
.cxforms-privacy-text a:hover {
    color: #1565c0;
 /**OVERWRITE**/
 color: #DB043E !important;
}

/*CHECKBOX*/

.cxforms-checkbox-group,
.cxforms-checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 15px 0;
 /**OVERWRITE**/
 display: block !important;
 _border: solid 1px red !important;
}


.cxforms-checkbox-group .cxforms-checkbox-item {
 display: block !important;
 _border: solid 1px yellow !important;
 width: 50% !important;
 float: left !important;
 position: relative !important;
}


.cxforms-checkbox-group label,
.cxforms-checkbox-item label{
 _border: solid 1px aqua !important;
 padding-left: 8px !important;
 font-size: 14px !important;
 line-height: 17px !important;
 display: inline-block !important;
 position: relative !important;
 top: -4px !important;
}
.cxforms-form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cxforms-submit-button {
    background-color: #1976d2;
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .3s ease;
    margin-top: 20px;
    min-width: 150px;
 /**OVERWRITE**/
 background-color: #FF0547 !important;
 border-radius: 100px !important;
 font-size: 14px !important;
 line-height: 14px !important;
 padding: 14px 24px !important;
 max-width: 250px !important;
 margin: 0 auto 0 auto !important;
}
.cxforms-submit-button:hover {
	background-color: #DB043E !important;
}

/***************************
form thank you
**************************/
.cxforms-success-container,
.cxforms-error-container{
    text-align: center;
    padding: 40px 20px;
    background-color: #f8fff8;
    border: 2px solid #4caf50;
    border-radius: 12px;
    margin: 20px 0;
 /*OVER WRITE*/
 border: none !important;
 background-color: #ffffff !important;
  margin: 0 !important;
}
.cxforms-success-icon,
.cxforms-error-icon {
 display: none !important;
}

.cxforms-success-title,
.cxforms-error-title {
    font-family: Archivo, sans-serif !important;
    font-weight: 600 !important;
    font-size: 28pt !important;
    line-height: 36pt !important;
    letter-spacing: 0% !important;
    text-align: center !important;
    color: #000000 !important;
    padding: 0px !important;
    margin: 0 !important;
    margin-bottom: 10px !important;
    width: 100%;
    font-variation-settings: "wdth" 125 !important; 
 text-align: 100%
}

.cxforms-success-message,
.cxforms-error-message {
 font-weight: 500 !important;
}

@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
.cxforms-form {
    display: block !important;
    flex-direction: column;
    gap: 0px !important;
}
.cxforms-form-row {
    display: block !important;
}
.cxforms-form-group{
 padding: 1px;
 padding-bottom: 10px;
 margin: 0 !important;
 gap: 0 !important;
}
.cxforms-form-row .cxforms-form-group{
}
.cxforms-checkbox-group .cxforms-checkbox-item {
 width: 100% !important;
 padding: 0 !important;
 margin: 0 !important;
 margin-bottom: 10px !important;
}
 



.cxforms-checkbox-group label,
.cxforms-checkbox-item label{
 padding-left: 6px !important;
 font-size: 14px !important;
 line-height: 17px !important;
 display: inline-block !important;
 position: relative !important;
 top: 3px !important;
 float: right;
 width: calc(100% - 20px);
}
}
/***************************
ACCORDION and TABLES
**************************/
#cxstyle_tabbed_accordion_full_width,
#cxstyle_tabbed_table_standard{
 border: solid 10px #f2f2f2;
 background-color: #f2f2f2 !important;
 /*this component does NOT have padding done the usual way, so adding here via border*/
 border-bottom: solid 40px #f2f2f2;
}
.cxstyle-tabbed-accordion-container {
    width: calc(100% - 0%) !important;
    max-width: 1300px !important;
    margin: 0 auto 0 auto !important;
 background-color: #ffffff !important;
}

/*SMALLER MONITORS*/
@media only screen and (max-width : 1400px) /*TABLET BREAKPOINT*/{

.cxstyle-tabbed-accordion-container {
    max-width: 1260px !important;
}
}
 
@media only screen and (max-width : 1180px) /*TABLET BREAKPOINT*/{
#cxstyle_tabbed_accordion_full_width,
 #cxstyle_tabbed_table_standard {
  
 }
.cxstyle-tabbed-accordion-container {
    max-width: 1240px !important; 
 
}
 }

@media only screen and (max-width : 820px) /*TABLET PORTRAIT:*/{
#cxstyle_tabbed_accordion_full_width,
 #cxstyle_tabbed_table_standard {
  
 }
 cxstyle-tabbed-accordion-container {
    max-width: 1240px !important; 
 padding-left: 30px !important;
 padding-right: 30px !important;
}
}


.cxstyle-bg-gray {
    background-color: #f5f5f5;
    color: #000;
 /**OVERWRITE**/
 background-color: #f2f2f2 !important;
}

.cxstyle-tabbed-accordion-container {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 4px #0000001a;
    overflow: hidden;
 /**OVERWRITE**/
 border-radius: 0px !important;
    box-shadow: 0 0 0 #000000 !important;
}

.cxstyle-tab-button.cxstyle-tab-active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background-color: #eff6ff;
 /**OVERWRITE**/
 background-color: #FF0547 !important;
 _border-right: solid 10px blue !important;
}

.cxstyle-tab-navigation {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 20px;
    background-color: #f8fafc;
 /**OVERWRITE**/
 border: none !important;
    margin-bottom: 20px !important;
    background-color: #f2f2f2 !important;
 font-size: 14px !important;
    line-height: 17px !important;
}
.cxstyle-tab-button {
    background: none;
    border: none;
    padding: 12px 24px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #64748b;
    border-bottom: 3px solid transparent;
    transition: all .3s ease;
 /**OVERWRITE**/
 padding: 16px 24px !important;
 background-color: #ffffff !important;
 border: none !important;
 border-right: solid 10px #f2f2f2 !important;
 font-size: 14px !important;
    line-height: 17px !important;
}
.cxstyle-tab-button.cxstyle-tab-active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background-color: #eff6ff;
 /**OVERWRITE**/
 color: #ffffff !important;
 background-color: #FF0547 !important;
 border-right: solid 10px #f2f2f2 !important;
}
.cxstyle-tab-button:hover {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background-color: #eff6ff;
 /**OVERWRITE**/
 color: #ffffff !important;
 background-color: #FF0547 !important;
 border-right: solid 10px #f2f2f2 !important;
}
.cxstyle-accordion-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    background-color: #fff;
 /**OVERWRITE**/
  border: 1px solid #f2f2f2 !important;
    border-radius: 0px !important;
}

.cxstyle-accordion-header {
    width: 100%;
    background-color: #f8fafc;
    border: none;
    padding: 16px 20px;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    transition: background-color .3s ease;
 /**OVERWRITE**/
 font-size: 15px !important;
 background-color: #f2f2f2 !important;
 padding: 10px 14px !important;
}
.cxstyle-accordion-header.cxstyle-accordion-open {
    background-color: #dddddd !important;
    border-bottom: 1px solid #dddddd;
}
.cxstyle-accordion-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
 /**OVERWRITE**/
 border-radius: 0px !important;
}

.cxstyle-accordion-table td{
 vertical-align: top !important;
}
.cxstyle-table-cell:nth-child(1n) {
    width: 30% !important;
 width: auto !important;
}
.cxstyle-table-cell:nth-child(2n) {
    background-color: #f9fafb;
 /**OVERWRITE**/
 background-color: #fafafa !important;
  width: 70% !important;
 width: auto !important;
}

body .cxstyle-table-cell a {
    color: #FF0547 !important;
    text-decoration: underline !important;
}

body .cxstyle-table-cell a:hover {
    color: #DB043E !important;
}

.cxstyle-accordion-table ol{
 list-style: decimal;
 margin-left: 15px;
}

.cxstyle-accordion-table ul{
 list-style: square !important;
 margin-left: 15px;
 
}
.cxstyle-accordion-table ol li,
.cxstyle-accordion-table ul li{
 margin-bottom: 10px;
}
/*make tabs 100%*/
@media only screen and (max-width : 820px) /*TABLET PORTRAIT:*/{
#cxstyle_tabbed_accordion_full_width,
 #cxstyle_tabbed_table_standard {
 }
 .cxstyle-tab-navigation {
  overflow-x: scroll!important;
  width: auto !important;
 }
 .cxstyle-tab-button {
    padding: 12px 15px !important; 
}
 cxstyle-tabbed-accordion-container {
    max-width: 1240px !important; 
 padding-left: 30px !important;
 padding-right: 30px !important;
}
}

/*make tabs 100%*/
@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
#cxstyle_tabbed_accordion_full_width,
 #cxstyle_tabbed_table_standard {
  
 }

.cxstyle-tab-navigation {
        flex-wrap: wrap;
     /*OVERWRITE*/
     flex-wrap: nowrap !important;
    }
}

/*SCROLLING PANELS BARS*/

.cxstyle-tab-navigation::-webkit-scrollbar {
  width: 10px; /* Width of the vertical scrollbar */
  height: 10px; /* Height of the horizontal scrollbar */
}

/* Style the scrollbar thumb */
.cxstyle-tab-navigation::-webkit-scrollbar-thumb {
  background-color: #FF0547 !important;
  border-radius: 5px !important;
 border: solid 1px #ffffff !important;
}

/* Style the scrollbar track */
.cxstyle-tab-navigation::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0) !important;
  background-color: #ffffff !important;
}


/* ========== chemelex_blog.css (8.10 KB) ========== */

@charset "UTF-8";
/* CSS Document */

/***************************
BLOG
**************************/

.cxtest-card {
    border-radius: .5rem;
    box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;
    padding: 2rem;
    margin-bottom: 2rem;
 /**OVERWRITE**/
 border-radius: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.cxtest-card .cxtest-card {
}

#cxstyle_blog_detail {
}
.cxblog-main-content {
 flex: 3 !important;
 border-right: solid 1px #cccccc;
 padding-right: 20px !important;
 /**OVERWRITE**/
 flex: 4 !important;
}
/***************************
BLOG TITLE PANEL
**************************/

.cxblog-entry-container {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 4px #0000001a;
    transition: box-shadow .3s ease;
    text-decoration: none;
    color: inherit;
 /**OVERWRITE**/
 padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: #fff;
    box-shadow: none !important;
 padding-top: 30px !important;
 padding-bottom: 20px !important;
 border-bottom: dotted 1px #cccccc !important;
}
.cxblog-entry-date {
 font-size: 14px !important;
 
}
.cxblog-entry-brand {
    background-color: #f0f0f0;
    padding: .25rem .75rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #333;
 /**OVERWRITE**/
 background-color: #ffffff !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #000000 !important;
 
}

h3.cxblog-entry-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #222;
    margin: 0;
    line-height: 1.3;
 /**OVERWRITE**/
 color: #000000 !important;
 font-size: 32px !important;
    line-height: 36px !important;
}

.cxblog-entry-image {
    flex-shrink: 0;
    width: 200px;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
 /**OVERWRITE**/
 border-radius: 0px !important;
 width: 300px !important;
    height: 225px !important;
}
.cxblog-entry-tags {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
 /**OVERWRITE**/
 margin-top: 1.5rem;
    padding: 0 !important;
    background-color: #ffffff !important;
 border: none !important;
    border-top: 1px solid #e9ecef !important;
    border-radius: 0px !important;
}

h4.cxblog-entry-tags-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 .75rem;
 /**OVERWRITE**/
 margin: 0 !important;
 margin-top: 10px !important;
 font-size: 22px !important;
 line-height: 26px !important;
    color: #000000 !important;
  font-weight: 600 !important;
 font-variation-settings: "wdth" 125 !important;
 font-family: Archivo, sans-serif !important;
}

.cxblog-entry-tag-link {
    color: #007cba;
    text-decoration: none;
    font-size: .875rem;
    margin-right: .75rem;
    transition: color .2s ease;
 /**OVERWRITE**/
 color: #FF0547 !important;
 border-right: solid 1px #cccccc !important;
 padding-right: 15px !important;
}
.cxblog-entry-tag-link:last-child {
 border-right: solid 1px #ffffff !important;
}

/***************************
BLOG CONTENT 
**************************/

.cxblog-detail-html {
    padding: 1.5rem;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    line-height: 1.6;
    color: #333;
 /**OVERWRITE**/
 padding: 0 !important;
    background-color: #fff;
    border: none !important;
    border-radius: 0px !important;
    color: #000000 !important;
}

.cxblog-detail-html h2 {
    font-size: 36px !important;
 line-height: 38px !important;
    font-weight: 700;
 color: #000000 !important;
 _background-color: aqua;
 float: left !important;
 _width: 100% !important;
}

.cxblog-detail-html h3 {
    font-size: 26px !important;
 line-height: 28px !important;
    font-weight: 700;
 color: #000000 !important;
 _background-color: chartreuse;
 margin-top: 20px !important;
 margin-bottom: 7px !important;
 float: left !important;
 _width: 100% !important;
}

.cxblog-detail-html p,
.cxblog-detail-html cite{
    font-size: 14px !important;
 line-height: 22px !important;
 color: #000000 !important;
 _background-color: cyan;
 margin-bottom: 7px !important;
 float: left !important;
 _width: 100% !important;
}

.cxblog-detail-html ul{
    font-size: 14px !important;
 line-height: 22px !important;
 color: #000000 !important;
 _background-color: yellow;
 margin-bottom: 7px !important;
 list-style-type: square;
 margin-left: 14px !important;
 float: left !important;
 _width: 100% !important;
}
.cxblog-detail-html ul li{
 margin-bottom: 5px !important;
 _background-color: blue;
 float: left !important;
 _width: 100% !important;
}

/***************************
BLOG LEFT NAV
**************************/
.cxblog-sidebar {
    flex: 1;
    background-color: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    position: sticky;
    top: 2rem;
  /**OVERWRITE**/
 background-color: #ffffff !important;
 padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
/*postion from top when scrolling*/
    top: 200px !important;
}

.cxblog-sidebar-section {
  /**OVERWRITE**/
    margin-bottom: 10px !important;
 _background-color: aqua !important;
}
.cxblog-sidebar-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #e0e0e0;
 /**OVERWRITE**/
 margin: 0 !important;
 font-size: 24px !important;
 border-bottom: 1px solid #e0e0e0 !important;
}

.cxblog-search-input {
    width: 100%;
    padding: .75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: .875rem;
    outline: none;
    transition: border-color .2s ease;
 /**OVERWRITE**/
 padding: 8px 10px !important;
 border-radius: 0px !important;
 margin-top: -1px !important;
}

.cxblog-tags-container,
.cxblog-archives-container{
 _background-color: aqua;
 padding-top: 10px !important;
 color: #000000 !important;
}
.cxblog-tag-link {
    color: #007cba;
    text-decoration: none;
    font-size: .875rem;
    margin-right: .5rem;
    transition: color .2s ease;
 /**OVERWRITE**/
 color: #FF0547 !important;
 border-right: solid 1px #cccccc !important;
 padding-right: 8px !important;
}
.cxblog-tag-link:last-child {
 border-right: solid 1px #ffffff !important;
}
.cxblog-archive-link {
    color: #007cba;
    text-decoration: none;
    font-size: .875rem;
    transition: color .2s ease;
 /**OVERWRITE**/
 color: #FF0547 !important;
}



@media only screen and (max-width : 1400px) /*SMALLER MONITORS*/{
}

@media only screen and (max-width : 1180px) /*LARGE TABLET LANDSCAPE BREAKPOINT*/{
 .cxblog-main-content {
 flex: 3 !important;
}
}
@media only screen and (max-width : 1024px) /*TABLET BREAKPOINT*/{
.cxblog-sidebar {

  /**OVERWRITE**/
/*postion from top when scrolling*/
    top: 180px !important;
} 
 
}

@media only screen and (max-width : 820px) /*TABLET PORTRAIT:*/{

}

@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
.cxblog-main-content {
 /**OVERWRITE**/
 border-right: solid 0px yellow;
 padding-right: 0px !important;
 border-bottom: solid 1px #cccccc !important;
 padding-bottom: 10px !important;
}
   .cxblog-entry-image {
    flex-shrink: 0;
    width: 200px;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
 /**OVERWRITE**/
 border-radius: 0px !important;
 width: 100% !important;
    height: auto !important;
}
 .cxblog-sidebar {
        position: static;
        order: 2;
     /**OVERWRITE**/
     order: 1 !important;
    }
 .cxblog-sidebar {
    flex: 1;
    background-color: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    position: sticky;
    top: 2rem;
  /**OVERWRITE**/
  flex: 1 !important;
  _background-color: yellow !important;
  width: 100%  !important;
}
 .cxblog-sidebar-section {
  /**OVERWRITE**/
    margin-bottom: 10px !important;
}
 .cxblog-archives-container  {
  background-color: #ffffff !important;
  border: solid 1px #ffffff !important;
}
}

/* ========== chemelex_searchresults.css (8.69 KB) ========== */

/*********************************
DOUBLE SCROLL FIX
*********************************/
html {
 height: calc(100% - 0) !important;
 max-height: calc(100% - 0) !important;
 min-height: calc(100% - 0) !important;
 overflow: hidden !important;
 _border: solid 10px yellow !important;
}
body {
 height: calc(100% - 0) !important;
 max-height: calc(100% - 0) !important;
 min-height: calc(100% - 0) !important;
 overflow-y: auto !important;
 overflow-x: hidden !important;
 _border: solid 10px pink !important;
}
#root {
 height: calc(100% - 0) !important;
 max-height: calc(100% - 0) !important;
 min-height: calc(100% - 0) !important;
 overflow-y: auto !important;
 overflow-x: hidden !important;
 _border: solid 10px red !important;
}
atomic-search-interface {
 height: calc(100% - 0) !important;
 max-height: calc(100% - 0) !important;
 min-height: calc(100% - 0) !important;
 _overflow: scroll !important;
 _border: solid 10px blue !important;
}


/*********************************
SEARCH RESULTS CONTAINER
*********************************/
/*this is all around*/
atomic-search-interface {
 _border: solid 1px blue !important;
 /**/
    max-width: 1446px !important;
    width: 100% !important;
    width: calc(100% - 0px) !important;
    margin: 0 auto 20px auto !important;
 /**/
}

/*********************************
COVEO STYLING
*********************************/

/*across: this is quary, this is empty*/
atomic-query-summary {
 width: 100% !important;
 max-width: 1446px !important;
 font-size: 0 !important;
 line-height: 0 !important;
 padding-bottom: 20px !important;
}

/*across: this is filter that appears when filter are selected*/
/*all around the result list*/
atomic-breadbox {
 _background-color: red !important;
 margin-top: 10px !important;
 font-size: 14px !important;
 width: 100% !important;
}
/*********************************
across columns: PRODUCT RESULT SEARCH
*********************************/
atomic-tab-manager {
 display: none !important;
}
/*********************************
across columns: PRODUCT RESULT SEARCH
*********************************/
/*THIS IS THE SEARCH RESULT PAGE*/
.product-search-wrapper {
 display: flex !important;
 padding-top: 10px;
 border-bottom: solid 1px #cccccc !important;
  justify-content: center !important;
}
/*reduce the size of the search*/
atomic-search-box.product-search {
 width: 500px !important;
 transform: scale(.8) !important;
 _transform-origin: center center !important;
}

/*********************************
left column: facet
*********************************/
.coveo-facet-container {
    border-right: none !important;
}

atomic-facet::part(search-input) {
    margin-bottom: 8px;
    border-radius: 6px;
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    font-size: 13px;
 /*OVERWRITE*/
 border-radius: 0px !important;
 padding: 6px 8px 6px 30px !important;
}
/*clear search button*/
atomic-facet::part(clear-button) {
 background-color: #EAEAEA !important;
 font-size: 13px !important;
 width: 100% !important;
}
/*selected*/
atomic-facet::part(value-checkbox-checked) {
 background-color: #ff0547!important;
}
atomic-facet::part(value-label) {
    font-size: 13px !important;
}


/*********************************
right column: this is the SORT BY and RESULT PER PAGE
*********************************/
.flex-1 .flex {
 border: none !important;
 padding-bottom: 10px !important;
}
.flex-1 .flex .flex {
 padding-bottom: 0px !important;
 font-size: 14px !important;
 _border: solid 1px aqua !important;
}
/*this is label and it repeat, so I'm hiding it*/
.flex-1 .flex .flex label {
 display: none !important;
}

/*********************************
right column: LIST OF RESULTS
*********************************/
atomic-result-list::part(result-list) {
 _border: dotted 1px blue !important;
 padding-top: 0px !important; /*this is a hack fix for that spacing bug*/
}
.list-root.display-list {
    display: flex;
    flex-direction: row !important;
}
/*make the content 100% not based lenght*/
atomic-result::part(outline){
    width: 100% !important;
}

/*********************************
right column: SINGLE RESULT
*********************************/
atomic-result-list::part(outline) {
 padding-bottom: 0px !important;
 border-bottom: dotted 1px #cccccc !important;
 align-self: center !important;
 border-radius: 0 !important;
 width: 100% !important;
}

/*remove padding top*/
.list-root.display-list.density-normal [part~="outline"]::before {
        margin: 0 !important;
    }
atomic-result::part(outline)::before{
    margin: 0 !important;
}
atomic-result-list::part(outline)::before{
 margin: 0 !important;
}
/*********************************
right column: PRODUCT PAGINATION
*********************************/
/*right column: product pagination*/
atomic-pager  {
 _background-color: yellow !important;
 margin-top: 10px !important;
 padding-left: 20px !important;
 padding-right: 20px !important;
 font-size: 14px !important;
 width: 100% !important;
}

/*********************************
WELCOME MESSEGE
*********************************/
#cxstyle_coveo_welcome_box {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 30px;
    box-shadow: 0 10px 25px #0000001a;
    color: #fff;
 /*OVERWRITE*/
 border-radius: 0px !important;
 background: #000000 !important;
 color: #ffffff !important;
 padding: 25px 15px !important;
 text-align: center !important;
}

#cxstyle_coveo_welcome_box h2 {
 color: #ffffff !important;
    font-family: Archivo, sans-serif !important;
    font-variation-settings: "wdth" 125 !important;
 font-size: 26px !important;
 line-height: 30px !important;
    font-weight: 600 !important;
 text-align: center !important;
 width: 100%;
 text-align: center !important;
}

#cxstyle_coveo_welcome_box p {
 font-size: 16px !important;
 line-height: 18px !important;
 color: #ffffff !important;
 font-weight: 600 !important;
 text-align: center !important;
}
ul.cxstyle_welcome_links {
}
.cxstyle_welcome_links a {
    display: inline-block;
    padding: 12px 24px;
    background-color: #fff3;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all .3s ease;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
 /*OVERWRITE*/
    -webkit-backdrop-filter: blur(0px) !important;
    backdrop-filter: blur(0px) !important;
 cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.3s;
    border-radius: 100px !important;
    font-size: 14px !important;
    line-height: 14px !important;
    font-weight: 400 !important;
    padding: 0 !important;
 padding: 10px !important;
    min-width: 300px !important;
 border: 1px solid #ffffff !important;
 background: #000000 !important;
}
.cxstyle_welcome_links a:hover {
    background-color: #ffffff4d;
    border-color: #ffffff80;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #00000026;
 /*OVERWRITE*/
  background-color: #404040 !important; /*75 black%*/
    border: 1px solid #ffffff !important;
    transform: translateY(0) !important;
    box-shadow: 0 0 0 #00000000 !important;
}

@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
    .cxstyle_welcome_links {
     display: block !important;
    }
 .cxstyle_welcome_links a {
  margin-bottom: 10px !important;
 
}
}


@media only screen and (max-width : 1400px) /*SMALLER MONITORS*/{

}

@media only screen and (max-width : 1180px) /*LARGE TABLET LANDSCAPE BREAKPOINT*/{

}
 
@media only screen and (max-width : 1024px) /*SMALL TABLET LANDSCAPE BREAKPOINT*/{

 
/*********************************
right column: SINGLE RESULT
*********************************/
/*remove the rounded border around*/
atomic-result-list::part(outline) {
 border: none !important;
 padding-bottom: 0px !important;
 border-bottom: dotted 1px #cccccc !important;
 align-self: center !important;
 border-radius: 0 !important;
 width: 100% !important;
}
}
/*RESPONSIVE*/
@media only screen and (max-width : 820px) /*TABLET PORTRAIT:*/{

}

@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
 /*********************************
right column: this is the SORT BY and RESULT PER PAGE
*********************************/
 /*make these stack and center*/
.flex-1 .flex .flex {
 padding-bottom: 0px !important;
 font-size: 14px !important;
 _border: solid 1px pink !important;
 width: 100% !important;
  flex-direction: column !important;
 justify-content: center !important;
 }
}



/*************************************
FIX OF COLUM ISSUE
**************************************/
.lg\:flex-row {
        flex-direction: row !important;
    }


@media only screen and (max-width : 1024px) /*SMALL TABLET LANDSCAPE BREAKPOINT*/{
 .lg\:flex-row {
        flex-direction: column !important;
    }
}



/* ========== chemelex_headless.css (15.53 KB) ========== */

/*********************************
HEADLESS COVEO SEARCH STYLES
Styles for the Coveo Headless implementation.
Should be loaded AFTER chemelex_searchresults.css

Uses same IDs and class names as Atomic version:
- #cxstyle_search - Navbar search container
- .main-search - Navbar search input
- .product-search-wrapper - Results page search wrapper
- .product-search - Results page search input
- .coveo-facet-container - Facet container
- #cxstyle_coveo_welcome_box - Welcome message box
- .cxstyle_welcome_title - Welcome title
- .cxstyle_welcome_text - Welcome text
*********************************/

/*********************************
NAVBAR SEARCH BOX (#cxstyle_search)
*********************************/
#cxstyle_search {
    position: relative;
    width: 100%;
    max-width: 24rem;
}

#cxstyle_search .main-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

#cxstyle_search .main-search input {
    width: 100%;
    height: 2.75rem;
    padding: 0.5rem 3rem 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #1f2937;
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 0px;
    outline: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

#cxstyle_search .main-search input::placeholder {
    color: #9ca3af;
    font-weight: 500;
}

#cxstyle_search .main-search input:focus {
    border-color: #3b82f6;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/*********************************
RESULTS PAGE SEARCH BOX
*********************************/
.product-search-wrapper {
    display: flex !important;
    padding-top: 10px;
    border-bottom: solid 1px #cccccc !important;
    justify-content: center !important;
}

.product-search-wrapper .product-search {
    position: relative;
    width: 500px !important;
    transform: scale(.8) !important;
}

.product-search-wrapper .product-search input {
    width: 100%;
    height: 3rem;
    padding: 0.5rem 3rem 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0px;
    outline: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.product-search-wrapper .product-search input::placeholder {
    color: #9ca3af;
    font-weight: 500;
}

.product-search-wrapper .product-search input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/*********************************
SEARCH BOX BUTTONS (SHARED)
*********************************/
.headless-search-button {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: #6b7280;
    background: transparent;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.headless-search-button:hover {
    color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.1);
}

.headless-search-clear {
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    color: #9ca3af;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.headless-search-clear:hover {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
}

/*********************************
SEARCH SUGGESTIONS DROPDOWN
*********************************/
.headless-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    margin-top: 0.25rem;
    padding: 0.5rem 0;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    max-height: 20rem;
    overflow-y: auto;
}

.headless-search-suggestion {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.1s ease-in-out;
}

.headless-search-suggestion:hover,
.headless-search-suggestion.highlighted {
    background-color: #f3f4f6;
}

.headless-search-suggestion.highlighted {
    background-color: #eff6ff;
}

.headless-search-suggestion mark,
.headless-search-suggestion strong {
    font-weight: 600;
    background-color: transparent;
    color: #1d4ed8;
}

/*********************************
TAB MANAGER
*********************************/
.headless-tab-manager {
    display: none !important; /* Hidden by default like atomic-tab-manager */
}

.headless-tab-manager.visible {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    background-color: #f3f4f6;
    border-radius: 0px;
    margin-bottom: 1rem;
}

.headless-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
    background-color: transparent;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    white-space: nowrap;
}

.headless-tab:hover:not(.active) {
    color: #1f2937;
    background-color: rgba(255, 255, 255, 0.5);
}

.headless-tab.active {
    color: #1f2937;
    background-color: #ffffff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/*********************************
FACET CONTAINER (matches existing)
*********************************/
.coveo-facet-container {
    width: 100%;
    max-width: 300px;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (max-width: 1024px) {
    .coveo-facet-container {
        max-width: 100%;
        min-width: 100%;
    }
}

/*********************************
INDIVIDUAL FACET
*********************************/
.headless-facet {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0px;
    overflow: hidden;
}

.headless-facet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    background-color: #f9fafb;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.headless-facet-header:hover {
    background-color: #f3f4f6;
}

.headless-facet-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.headless-facet-selected-count {
    font-weight: 500;
    color: #ff0547; /* Match existing checkbox checked color */
}

.headless-facet-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: transform 0.2s ease-in-out;
}

.headless-facet-toggle.collapsed {
    transform: rotate(-90deg);
}

.headless-facet-content {
    padding: 0.5rem;
    border-top: 1px solid #e5e7eb;
}

.headless-facet.collapsed .headless-facet-content {
    display: none;
}

/*********************************
FACET VALUES
*********************************/
.headless-facet-values {
    list-style: none;
    margin: 0;
    padding: 0;
}

.headless-facet-value-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    font-size: 13px; /* Match existing atomic-facet::part(value-label) */
    color: #374151;
    cursor: pointer;
    border-radius: 0px;
    transition: background-color 0.1s ease-in-out;
}

.headless-facet-value-label:hover {
    background-color: #f3f4f6;
}

.headless-facet-value.selected .headless-facet-value-label {
    background-color: #eff6ff;
}

.headless-facet-checkbox {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: #ff0547; /* Match existing checkbox color */
    cursor: pointer;
}

.headless-facet-value-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.headless-facet-value-count {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #9ca3af;
}

/*********************************
FACET CLEAR BUTTON
*********************************/
.headless-facet-clear {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    background-color: #EAEAEA; /* Match existing clear-button */
    border: none;
    border-radius: 0px;
    cursor: pointer;
    width: 100%;
    transition: all 0.15s ease-in-out;
}

.headless-facet-clear:hover {
    background-color: #d1d5db;
}

/*********************************
FACET SHOW MORE / SHOW LESS
*********************************/
.headless-facet-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f3f4f6;
}

.headless-facet-show-more,
.headless-facet-show-less {
    padding: 0.375rem 0.75rem;
    font-size: 13px;
    font-weight: 500;
    color: #3b82f6;
    background-color: transparent;
    border: 1px solid #bfdbfe;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.headless-facet-show-more:hover,
.headless-facet-show-less:hover {
    background-color: #eff6ff;
    border-color: #93c5fd;
}

/*********************************
RESULT LIST
*********************************/
.headless-result-list {
    width: 100%;
}

.headless-result-item {
    display: flex;
    flex-direction: row;
    padding: 1rem 0;
    border-bottom: dotted 1px #cccccc; /* Match existing */
    width: 100%;
}

.headless-result-visual {
    flex-shrink: 0;
    width: 120px;
    margin-right: 1rem;
}

.headless-result-image {
    width: 120px;
    height: 120px;
    object-fit: contain;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
}

.headless-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    font-size: 3rem;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
}

.headless-result-icon-image {
    width: 120px;
    height: 120px;
    object-fit: contain;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
}

.headless-result-content {
    flex: 1;
    min-width: 0;
}

.headless-result-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.headless-result-title a {
    color: inherit;
    text-decoration: none;
}

.headless-result-title a:hover {
    color: #3b82f6;
    text-decoration: underline;
}

.headless-result-excerpt {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/*********************************
PAGINATION
*********************************/
.headless-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 14px;
    width: 100%;
}

.headless-pager-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    font-size: 14px;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.headless-pager-button:hover:not(:disabled) {
    background-color: #f3f4f6;
    border-color: #9ca3af;
}

.headless-pager-button.active {
    color: #ffffff;
    background-color: #3b82f6;
    border-color: #3b82f6;
}

.headless-pager-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/*********************************
QUERY SUMMARY
*********************************/
.headless-query-summary {
    width: 100%;
    max-width: 1446px;
    font-size: 14px;
    line-height: 1.4;
    padding-bottom: 20px;
    color: #6b7280;
}

/*********************************
BREADBOX (Active Filters)
*********************************/
.headless-breadbox {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 10px;
    font-size: 14px;
    width: 100%;
}

.headless-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 13px;
    color: #374151;
    background-color: #f3f4f6;
    border-radius: 0px;
}

.headless-breadcrumb-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    color: #6b7280;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.headless-breadcrumb-remove:hover {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
}

/*********************************
SORT DROPDOWN
*********************************/
.headless-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
}

.headless-sort-select {
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: 14px;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

.headless-sort-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/*********************************
RESULTS PER PAGE
*********************************/
.headless-results-per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
}

.headless-results-per-page-select {
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: 14px;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

/*********************************
NO RESULTS
*********************************/
.headless-no-results {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
    font-size: 1rem;
}

/*********************************
LOADING STATE
*********************************/
.headless-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.headless-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: headless-spin 0.6s linear infinite;
}

@keyframes headless-spin {
    to {
        transform: rotate(360deg);
    }
}

/*********************************
RESPONSIVE
*********************************/
@media only screen and (max-width: 767px) {
    #cxstyle_search {
        max-width: 100%;
    }
    
    .product-search-wrapper .product-search {
        width: 100% !important;
    }
    
    .headless-result-item {
        flex-direction: column;
    }
    
    .headless-result-visual {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}



/* ========== cookie-consent.css (4.67 KB) ========== */

/*********************************
Cookie Consent Banner
v: 121624
Styled to match Chemelex navigation
*********************************/

/*================================
COOKIE CONSENT BANNER CONTAINER
================================*/
#cxstyle_cookie_consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999999;
    background-color: #ffffff;
    border-top: 1px solid #e5e4e4;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#cxstyle_cookie_consent_inner {
    max-width: 1440px;
    width: 100%;
    padding: 20px 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/*================================
COOKIE CONSENT TEXT
================================*/
#cxstyle_cookie_consent_text {
    flex: 1;
    font-family: "Noto Sans", sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #000000;
}

#cxstyle_cookie_consent_text p {
    margin: 0;
}

#cxstyle_cookie_consent_text a:link,
#cxstyle_cookie_consent_text a:visited {
    color: #46768A;
    text-decoration: underline;
    font-weight: 600;
}

#cxstyle_cookie_consent_text a:hover {
    color: #345766;
}

#cxstyle_cookie_consent_text a:active {
    color: #27414D;
}

/*================================
COOKIE CONSENT BUTTONS CONTAINER
================================*/
#cxstyle_cookie_consent_buttons {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-shrink: 0;
}

/*================================
COOKIE CONSENT BUTTONS - BASE
================================*/
#cxstyle_cookie_consent button {
    font-family: "Archivo", sans-serif;
    font-size: 14px;
    line-height: 14px;
    font-weight: 600;
    font-variation-settings: "wdth" 125;
    padding: 14px 24px;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

/*================================
ACCEPT BUTTON (Primary - matches nav CTA)
================================*/
#cxstyle_cookie_consent_accept {
    background-color: #46768A !important;
    border: 1px solid #46768A !important;
    color: #ffffff !important;
}

#cxstyle_cookie_consent_accept:hover {
    background-color: #345766 !important;
    border-color: #345766 !important;
}

#cxstyle_cookie_consent_accept:active {
    background-color: #27414D !important;
    border-color: #27414D !important;
}

/*================================
DECLINE BUTTON (Secondary - outlined)
================================*/
#cxstyle_cookie_consent_decline {
    background-color: #ffffff !important;
    border: 1px solid #46768A !important;
    color: #46768A !important;
}

#cxstyle_cookie_consent_decline:hover {
    background-color: #f5f5f5 !important;
    border-color: #345766 !important;
    color: #345766 !important;
}

#cxstyle_cookie_consent_decline:active {
    background-color: #e5e4e4 !important;
    border-color: #27414D !important;
    color: #27414D !important;
}

/*================================
TABLET RESPONSIVE
================================*/
@media only screen and (max-width: 1023px) {
    #cxstyle_cookie_consent_inner {
        padding: 20px;
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    #cxstyle_cookie_consent_text {
        font-size: 13px;
        line-height: 20px;
    }

    #cxstyle_cookie_consent_buttons {
        width: 100%;
        justify-content: center;
    }
}

/*================================
MOBILE RESPONSIVE
================================*/
@media only screen and (max-width: 767px) {
    #cxstyle_cookie_consent_inner {
        padding: 16px;
        gap: 16px;
    }

    #cxstyle_cookie_consent_text {
        font-size: 12px;
        line-height: 18px;
    }

    #cxstyle_cookie_consent button {
        font-size: 13px;
        padding: 12px 20px;
    }

    #cxstyle_cookie_consent_buttons {
        flex-direction: column;
        width: 100%;
    }

    #cxstyle_cookie_consent_buttons button {
        width: 100%;
    }
}

/*================================
ANIMATION - SLIDE UP
================================*/
#cxstyle_cookie_consent {
    animation: cxstyle_cookie_slide_up 0.4s ease-out;
}

@keyframes cxstyle_cookie_slide_up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/*================================
MANAGE COOKIES LINK IN FOOTER
================================*/
.cxstyle_manage_cookies_link {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

.cxstyle_manage_cookies_link:hover {
    text-decoration: underline;
}






/* ========== chemelex_sitestyle.css (38.88 KB) ========== */

/* CSS Document */
/* v:0912:*/
/*********************************
FIXES OR ADDITION
- ARROW TO BUTTON added and Removed
*********************************/

/*********************************
COMMON ELEMENTS: ALL PAGES
*********************************/


/*=========================
PAGES WIDTH AND CONTAINERS
===========================*/
/*DESKTOP OR NONE*/

/*fullscreen*/
#cxstyle_slideshow_fullwidth_container,
#cxstyle_grid_block_full_width,
#cxstyle_flowgrid_standard{
 max-width: 100%;
 margin: 0 auto 0 auto;
}

/*contained: THIS IS OBSOLETE*/
/*#cxstyle_slideshow_container,
#cxstyle_grid_block_standard{
 max-width: 1440px;
 width: 100%;
 margin: 0 auto 0 auto;
 padding: 20px !important;
}
*/

.cxstyle-slideshow #cxstyle_copy_container {
 _z-index: 99 !important;
 width: 100% !important;
 max-width: 1440px !important; /*this is wider but the slide content should align to 1300px of other components*/
 margin: 0 auto 0 auto !important;
}

#cxstyle_grid_container {
 width: 100%;
 max-width: 1300px !important; /*matches width of slide content*/
 _padding-left: 70px !important;
 _padding-right: 70px !important;
 margin: 0 auto 0 auto;
}

.cxflowgrid-flow-container {
 width: 100%;
 max-width: 1340px !important; /*matches width of slide content*/
 _padding-left: 70px !important;
 _padding-right: 70px !important;
 margin: 0 auto 0 auto;
}

/*make the page 100% width*/
#cxstyle_product_inline {
 _background-color: yellow;
   width: 100vw;
   max-width: 100%;
}
/*make the content inside the page 1440*/

.cxproductstyle-inline-section-content,
.cxsolutionsstyle-container,
.cxsimplestyle-container{
 max-width: 1300px !important;
 margin: 0 auto 0 auto !important;
}

#cxstyle_blog_detail {
    max-width: 1300px !important;
 margin: 0 auto 0 auto !important;
    padding: 0 !important;
}

/*********************************
PANELS SPACING BETWEEN CONTAINERS
*********************************/
#cxstyle_grid_container  {
 gap: 2rem !important; /*gap between all containers*/
}
#cxstyle_grid_container.cxstyle-grid-no-gap  {
 gap: 0rem !important; /*remove gap between all containers*/
 grid-row-gap: 2rem !important; /*add gap below containers*/
}
#cxstyle_grid_item .gap-3 {
 gap: 0 !important;
}


/*SMALLER MONITORS*/
@media only screen and (max-width : 1400px) /*TABLET BREAKPOINT*/{
.cxstyle-slideshow #cxstyle_copy_container {
 max-width: 1340px !important; /*this is wider but the slide content should align to 1200px of other components*/
}
#cxstyle_grid_container,
.cxflowgrid-flow-container {
 max-width: 1260px !important;
}
.cxproductstyle-inline-section-content,
.cxsolutionsstyle-container,
.cxsimplestyle-container{
 max-width: 1260px !important;
}
 
#cxstyle_blog_detail {
    max-width: 1260px !important;
}


/*********************************
PANELS SPACING BETWEEN CONTAINERS
*********************************/
#cxstyle_grid_container  {
 gap: 1.8rem !important; /*gap between all containers*/
}
#cxstyle_grid_container.cxstyle-grid-no-gap  {
 gap: 0rem !important; /*remove gap between all containers*/
 grid-row-gap: 1.8rem !important; /*add gap below containers*/
}
#cxstyle_grid_item .gap-3 {
 gap: 0 !important;
}

}

/*-----------------------------------------------
RESPONSIVE
------------------------------------------------*/
@media only screen and (max-width : 1180px) /*TABLET BREAKPOINT*/{
 .cxstyle-slideshow #cxstyle_copy_container {
 max-width: 1240px !important; 
}
#cxstyle_grid_container {
 max-width: 1240px !important; 
 padding-left: 40px !important;
 padding-right: 40px !important;
}
.cxflowgrid-flow-container {
 max-width: 1240px !important; 
 padding-left: 25px !important;
 padding-right: 25px !important;
}
.cxproductstyle-inline-section-content,
.cxsolutionsstyle-container,
.cxsimplestyle-container{
 max-width: 1240px !important; 
 padding-left: 40px !important;
 padding-right: 40px !important;
}

#cxstyle_blog_detail {
    max-width: 1240px !important; 
 padding-left: 40px !important;
 padding-right: 40px !important;
}
 
/*********************************
PANELS SPACING BETWEEN CONTAINERS
*********************************/
#cxstyle_grid_container  {
 gap: 1.6rem !important; /*gap between all containers*/
}
#cxstyle_grid_container.cxstyle-grid-no-gap  {
 gap: 0rem !important; /*remove gap between all containers*/
 grid-row-gap: 1.6rem !important; /*add gap below containers*/
}
#cxstyle_grid_item .gap-3 {
 gap: 0 !important;
}

}

@media only screen and (max-width : 820px) /*TABLET PORTRAIT:*/{
 .cxstyle-slideshow #cxstyle_copy_container {
 max-width: 1240px !important; 
}
#cxstyle_grid_container {
 max-width: 1240px !important; 
 padding-left: 40px !important;
 padding-right: 40px !important;
}

.cxflowgrid-flow-container {
 max-width: 1240px !important; 
 padding-left: 30px !important;
 padding-right: 30px !important;
}

.cxproductstyle-inline-section-content,
.cxsolutionsstyle-container,
.cxsimplestyle-container{
 max-width: 1240px !important; 
 padding-left: 40px !important;
 padding-right: 40px !important;
}
 
#cxstyle_blog_detail {
    max-width: 1240px !important; 
 padding-left: 40px !important;
 padding-right: 40px !important;
}
/*********************************
PANELS SPACING BETWEEN CONTAINERS
*********************************/
#cxstyle_grid_container  {
 gap: 1.6rem !important; /*gap between all containers*/
}
#cxstyle_grid_container.cxstyle-grid-no-gap  {
 gap: 0rem !important; /*remove gap between all containers*/
 grid-row-gap: 1.6rem !important; /*add gap below containers*/
}
#cxstyle_grid_item .gap-3 {
 gap: 0 !important;
}

}
@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
 .cxstyle-slideshow #cxstyle_copy_container {
}
#cxstyle_grid_container,
.cxflowgrid-flow-container {
 max-width: 1240px !important; 
 padding-left: 20px !important;
 padding-right: 20px !important;
}
.cxproductstyle-inline-section-content,
.cxsolutionsstyle-container,
.cxsimplestyle-container{
 max-width: 1240px !important; 
 padding-left: 20px !important;
 padding-right: 20px !important;
}

#cxstyle_blog_detail {
    max-width: 1240px !important; 
 padding-left: 20px !important;
 padding-right: 20px !important;
}
}

/*=========================
COMPONENT BKG COLOR and INSIDE COPY
===========================*/

.cxstyle-bgcolor-white,
.cxstyle-grid-item-background-color-white{
 background-color: #ffffff !important;
 color: #000000 !important;
}
/*CHUCK TO FI THIS*/
.cxstyle-bgcolor-gray,
.cxstyle-grid-item-background-color-gray,
.cxstyle-bgcolor-grey,
.cxstyle-grid-item-background-color-grey{
 background-color: #f2f2f2 !important; /*5% black*/
 color: #000000 !important;
}

.cxstyle-bgcolor-black,
.cxstyle-grid-item-background-color-black{
 background-color: #000000 !important;
 color: #ffffff !important;
}

.cxstyle-bgcolor-connection-red,
.cxstyle-grid-item-background-color-connection-red{
 background-color: #FF0547 !important;
 color: #ffffff !important;
}

.cxstyle-bgcolor-steel-blue,
.cxstyle-grid-item-background-color-steel-blue{
 background-color: #46768A !important;
 color: #ffffff !important;
}

/*-----------------------------------
FONT COLOR INSIDE BLOCKS
------------------------------------*/
/*inside WHITE BKG*/
.cxstyle-bgcolor-white,
.cxstyle-bgcolor-white h1,
.cxstyle-bgcolor-white h2,
.cxstyle-bgcolor-white h3,
.cxstyle-bgcolor-white h4,
.cxstyle-bgcolor-white p,
.cxstyle-bgcolor-white ul,
.cxstyle-bgcolor-white li {
color: #000000 !important;
 _color: red !important;
}

/*inside GRAY BKG*/
.cxstyle-bgcolor-gray,
.cxstyle-bgcolor-gray h1,
.cxstyle-bgcolor-gray h2,
.cxstyle-bgcolor-gray h3,
.cxstyle-bgcolor-gray h4,
.cxstyle-bgcolor-gray p,
.cxstyle-bgcolor-gray ul,
.cxstyle-bgcolor-gray li {
color: #000000 !important;
 _color: aqua !important;
}
/*inside BLACK BKG*/
.cxstyle-bgcolor-black,
.cxstyle-bgcolor-black h1,
.cxstyle-bgcolor-black h2,
.cxstyle-bgcolor-black h3,
.cxstyle-bgcolor-black h4,
.cxstyle-bgcolor-black p,
.cxstyle-bgcolor-black ul,
.cxstyle-bgcolor-black li {
color: #ffffff !important;
 _color: orange !important;
}
/*inside WHITE GRID ELEMENT*/
.cxstyle-grid-item-background-color-white,
.cxstyle-grid-item-background-color-white h1,
.cxstyle-grid-item-background-color-white h2,
.cxstyle-grid-item-background-color-white h3,
.cxstyle-grid-item-background-color-white h4,
.cxstyle-grid-item-background-color-white p,
.cxstyle-grid-item-background-color-white ul,
.cxstyle-grid-item-background-color-white li {
color: #000000 !important;
 _color: blueviolet !important;
}
/*inside GRAY GRID ELEMENT*/
/*CHUCK TO FIX THIS*/
.cxstyle-grid-item-background-color-grey,
.cxstyle-grid-item-background-color-grey h1,
.cxstyle-grid-item-background-color-grey h2,
.cxstyle-grid-item-background-color-grey h3,
.cxstyle-grid-item-background-color-grey h4,
.cxstyle-grid-item-background-color-grey p,
.cxstyle-grid-item-background-color-grey ul,
.cxstyle-grid-item-background-color-grey li,
/**/
.cxstyle-grid-item-background-color-gray,
.cxstyle-grid-item-background-color-gray h1,
.cxstyle-grid-item-background-color-gray h2,
.cxstyle-grid-item-background-color-gray h3,
.cxstyle-grid-item-background-color-gray h4,
.cxstyle-grid-item-background-color-gray p,
.cxstyle-grid-item-background-color-gray ul,
.cxstyle-grid-item-background-color-gray li {
color: #000000 !important;
 _color: aquamarine !important;
}

/*inside BLACK GRID ELEMENT*/
.cxstyle-grid-item-background-color-black,
.cxstyle-grid-item-background-color-black h1,
.cxstyle-grid-item-background-color-black h2,
.cxstyle-grid-item-background-color-black h3,
.cxstyle-grid-item-background-color-black h4,
.cxstyle-grid-item-background-color-black p,
.cxstyle-grid-item-background-color-black ul,
.cxstyle-grid-item-background-color-black li {
color: #ffffff !important;
 _color: pink !important;
}

/*********************************
BUTTONS COLORS
*********************************/
button.cxstyle-btn-color-black,
button.cxstyle-btn-color-white,
button.cxstyle-btn-color-grey,
button.cxstyle-btn-color-connection-red,
button.cxstyle-btn-color-steel-blue,
/*buttons on solution table*/
button.cxsolutionsstyle-button-black,
button.cxsolutionsstyle-button-connection-red,
button.cxsolutionsstyle-button-steel-blue,
button.cxsolutionsstyle-button-grey,
/*buttons on product page tab bar*/
_button.cxproductstyle-inline-action-button-black,
_button.cxproductstyle-inline-action-button-red,
_button.cxproductstyle-inline-action-button-blue,
/*HREF*/
a.cxstyle-btn-color-black,
a.cxstyle-btn-color-white,
a.cxstyle-btn-color-grey,
a.cxstyle-btn-color-connection-red,
a.cxstyle-btn-color-steel-blue,
/*buttons on solution table*/
a.cxsolutionsstyle-button-black,
a.cxsolutionsstyle-button-connection-red,
a.cxsolutionsstyle-button-steel-blue,
a.cxsolutionsstyle-button-grey
{
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.3s;
 border-radius: 100px !important;
 font-size: 14px !important;
 line-height: 14px !important;
 padding: 14px 24px !important;
 font-weight: 400 !important;
 /*padding: 12px 20px !important; this is tablet*/
 /*padding: 10px 16px !important; this is phone*/
 /*use btn height in case copy in on 2 lines*/
 padding: 0 !important;
 padding-left: 24px !important;
 padding-right: 24px !important;
 height: 48px !important;
 min-width: 120px !important;
}

/*********************************
HREF BTN CENTER VERICALL
*********************************/
/*HREF*/
a.cxstyle-btn-color-black,
a.cxstyle-btn-color-white,
a.cxstyle-btn-color-grey,
a.cxstyle-btn-color-connection-red,
a.cxstyle-btn-color-steel-blue,
/*buttons on solution table*/
a.cxsolutionsstyle-button-black,
a.cxsolutionsstyle-button-connection-red,
a.cxsolutionsstyle-button-steel-blue,
a.cxsolutionsstyle-button-grey
{
 /*CENTER VERTICALLY IN BUTTON*/   
 display: inline-flex;
 align-items: center;
}








/*add a white border when they are on the same color bkg*/
.cxstyle-bgcolor-black button.cxstyle-btn-color-black,
.cxstyle-bgcolor-connection-red button.cxstyle-btn-color-connection-red,
.cxstyle-bgcolor-steel-blue button.cxstyle-btn-color-steel-blue,
/*HREF*/
.cxstyle-bgcolor-black a.cxstyle-btn-color-black,
.cxstyle-bgcolor-connection-red a.cxstyle-btn-color-connection-red,
.cxstyle-bgcolor-steel-blue a.cxstyle-btn-color-steel-blue{
 border: solid 1px #ffffff !important;
}

/*buttons on product page tab bar*/
/*=========================
BLACK
===========================*/
button.cxstyle-btn-color-black,
button.cxsolutionsstyle-button-black,
button.cxproductstyle-inline-action-button-black,
/*HREF*/
a.cxstyle-btn-color-black,
a.cxsolutionsstyle-button-black,
a.cxproductstyle-inline-action-button-black{
 background-color: #000000 !important;
 color: #ffffff;
}
button.cxstyle-btn-color-black:hover,
button.cxsolutionsstyle-button-black:hover,
button.cxproductstyle-inline-action-button-black:hover,
/*HREF*/
a.cxstyle-btn-color-black:hover,
a.cxsolutionsstyle-button-black:hover,
a.cxproductstyle-inline-action-button-black:hover{ 
 background-color: #404040 !important; /*75 black%*/
 color: #ffffff;
 /**/
 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}
button.cxstyle-btn-color-black:active,
button.cxsolutionsstyle-button-black:active,
button.cxproductstyle-inline-action-button-black:active,
/*HREF*/
a.cxstyle-btn-color-black:active,
a.cxsolutionsstyle-button-black:active,
a.cxproductstyle-inline-action-button-black:active{
 background-color: #000000 !important;
 color: #ffffff;
}

/*=========================
WHITE
===========================*/
button.cxstyle-btn-color-white,
/*HREF*/
a.cxstyle-btn-color-white{
 background-color: #ffffff !important;
 color: #000000;
}
button.cxstyle-btn-color-white:hover,
/*HREF*/
a.cxstyle-btn-color-white:hover{
 background-color: #f2f2f2 !important; /*5% black*/
 color: #7f7f7f;
 /**/
 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}
button.cxstyle-btn-color-white:active,
/*HREF*/
a.cxstyle-btn-color-white:active,
{
 background-color: #e5e5e5 !important; /*10% black*/
 color: #404040;
}

/*=========================
GRAY
===========================*/
button.cxstyle-btn-color-grey,
button.cxsolutionsstyle-button-grey,
/*HREF*/
a.cxstyle-btn-color-grey,
a.cxsolutionsstyle-button-grey{
 background-color: #f2f2f2 !important; /*5% black*/
 color: #000000;
}
button.cxstyle-btn-color-grey:hover,
button.cxsolutionsstyle-button-grey:hover,
/*HREF*/
a.cxstyle-btn-color-grey:hover,
a.cxsolutionsstyle-button-grey:hover{
 background-color: #e5e5e5 !important; /*10% black*/
 color: #000000;
 /**/
 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}
button.cxstyle-btn-color-grey:active,
button.cxsolutionsstyle-button-grey:active,
/*HREF*/
a.cxstyle-btn-color-grey:active,
a.cxsolutionsstyle-button-grey:active{
 background-color: #cccccc !important; /*20% black*/
 color: #000000;
}


/*=========================
connection-red
===========================*/
button.cxstyle-btn-color-connection-red,
button.cxsolutionsstyle-button-connection-red,
button.cxproductstyle-inline-action-button-red,
/*HREF*/
a.cxstyle-btn-color-connection-red,
a.cxsolutionsstyle-button-connection-red,
a.cxproductstyle-inline-action-button-red{
 background-color: #FF0547 !important;
 color: #ffffff;
}
button.cxstyle-btn-color-connection-red:hover,
button.cxsolutionsstyle-button-connection-red:hover,
button.cxproductstyle-inline-action-button-red:hover,
/*HREF*/
a.cxstyle-btn-color-connection-red:hover,
a.cxsolutionsstyle-button-connection-red:hover,
a.cxproductstyle-inline-action-button-red:hover{
 background-color: #DB043E !important;
 color: #ffffff;
 /**/
 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}
button.cxstyle-btn-color-connection-red:active,
button.cxsolutionsstyle-button-connection-red:active,
button.cxproductstyle-inline-action-button-red:active,
/*HREF*/
a.cxstyle-btn-color-connection-red:active,
a.cxsolutionsstyle-button-connection-red:active,
a.cxproductstyle-inline-action-button-red:active{
 background-color: #B30432 !important;
 color: #ffffff;
}

/*=========================
steel-blue
===========================*/
button.cxstyle-btn-color-steel-blue,
button.cxsolutionsstyle-button-steel-blue,
button.cxproductstyle-inline-action-button-blue,
/*HREF*/
a.cxstyle-btn-color-steel-blue,
a.cxsolutionsstyle-button-steel-blue,
a.cxproductstyle-inline-action-button-blue{
 background-color: #46768A !important;
 color: #ffffff;
}
button.cxstyle-btn-color-steel-blue:hover,
button.cxsolutionsstyle-button-steel-blue:hover,
button.cxproductstyle-inline-action-button-blue:hover,
/*HREF*/
a.cxstyle-btn-color-steel-blue:hover,
a.cxsolutionsstyle-button-steel-blue:hover,
a.cxproductstyle-inline-action-button-blue:hover{
 background-color: #345766 !important;
 color: #ffffff;
 /**/
 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}
button.cxstyle-btn-color-steel-blue:active,
button.cxsolutionsstyle-button-steel-blue:active,
button.cxproductstyle-inline-action-button-blue:active,
/*HREF*/
a.cxstyle-btn-color-steel-blue:active,
a.cxsolutionsstyle-button-steel-blue:active,
a.cxproductstyle-inline-action-button-blue:active
{
 background-color: #27414D !important;
 color: #ffffff;
}


/*SMALLER MONITORS*/
@media only screen and (max-width : 1400px) /*TABLET BREAKPOINT*/{
button.cxstyle-btn-color-black,
button.cxstyle-btn-color-white,
button.cxstyle-btn-color-grey,
button.cxstyle-btn-color-connection-red,
button.cxstyle-btn-color-steel-blue,
/*buttons on solution table*/
button.cxsolutionsstyle-button-black,
button.cxsolutionsstyle-button-connection-red,
button.cxsolutionsstyle-button-steel-blue,
button.cxsolutionsstyle-button-grey,
/*HREF*/
a.cxstyle-btn-color-black,
a.cxstyle-btn-color-white,
a.cxstyle-btn-color-grey,
a.cxstyle-btn-color-connection-red,
a.cxstyle-btn-color-steel-blue,
/*buttons on solution table*/
a.cxsolutionsstyle-button-black,
a.cxsolutionsstyle-button-connection-red,
a.cxsolutionsstyle-button-steel-blue,
a.cxsolutionsstyle-button-grey
 {
     padding-left: 20px !important;
 padding-right: 20px !important;
 height: 46px !important;
}
}

/*RESPONSIVE*/
@media only screen and (max-width : 1024px) /*TABLET BREAKPOINT*/{

}

@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
 button.cxstyle-btn-color-black,
button.cxstyle-btn-color-white,
button.cxstyle-btn-color-grey,
button.cxstyle-btn-color-connection-red,
button.cxstyle-btn-color-steel-blue,
/*buttons on solution table*/
button.cxsolutionsstyle-button-black,
button.cxsolutionsstyle-button-connection-red,
button.cxsolutionsstyle-button-steel-blue,
button.cxsolutionsstyle-button-grey,
/*HREF*/
a.cxstyle-btn-color-black,
a.cxstyle-btn-color-white,
a.cxstyle-btn-color-grey,
a.cxstyle-btn-color-connection-red,
a.cxstyle-btn-color-steel-blue,
/*buttons on solution table*/
a.cxsolutionsstyle-button-black,
a.cxsolutionsstyle-button-connection-red,
a.cxsolutionsstyle-button-steel-blue,
a.cxsolutionsstyle-button-grey{
     padding-left: 16px !important;
 padding-right: 16px !important;
 height: 44px !important;
}
}
/*********************************
BLOCKS:
*********************************/
#cxstyle_grid_item   {
 _border: solid 10px pink;
 border: none !important;
 width: 100% !important;
}

#cxstyle_copy_block  {
 _border: solid 10px aqua;
 border: none !important;
 width: 100% !important;
}

#cxstyle_copy_block_container {
 _border: solid 10px yellow;
 border: none !important;
 width: 100% !important;
}

#cxstyle_copy_position {
 _border: solid 10px chartreuse;
 _border: none !important;
 width: 100% !important;
}

#cxstyle_grid_container img{
 _border: solid 1px black !important;
}



/***********************************************************
THESE ARE THE FONTS STYLING AND SIZES
***********************************************************/

/*REMOVE MARGIN ADDED BY USER AGENT*/ 
#cxstyle_copy_position h1,
#cxstyle_copy_position h2,
#cxstyle_copy_position p {
    margin-block-start: 0;
    margin-block-end: 0;
}
/*ADD MARGIN TO ELEMENTS*/ 
.cxstyle-kicker,
.cxstyle-title,
.cxstyle-subtitle,
.cxstyle-description{
    margin-bottom: 7px !important;
}

/*=========================
KICKER: Same Slideshow and grid
===========================*/
.cxstyle-kicker {
 letter-spacing: 3px;
 text-transform: uppercase;
 font-weight: 800 !important;
  /**/
 padding: 0 !important;
 margin: 0 !important;
 margin-bottom: 7px !important;
}
/*REGULAR*/
.cxstyle-kicker-regular p {
 font-size: 18px !important;
 line-height: 1.3em !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
}
/*LARGE*/
.cxstyle-kicker-large p {
 font-size: 22px !important;
 line-height: 1.3em !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
}
/*SMALL*/
.cxstyle-kicker-small p {
 font-size: 16px !important;
 line-height: 1.3em !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
}

/*=========================
TITLE
===========================*/
.cxstyle-title {
  /**/
 padding: 0 !important;
 margin: 0 !important;
 margin-bottom: 7px !important;
}
/*OVERIGHT TITLE P tag to "archivio"*/
.cxstyle-title p {
    letter-spacing: 0%!important;
    font-variation-settings: "wdth" 125 !important;
    width: 100%;
    font-family: Archivo, sans-serif !important;
}


/*-------------------
TITLE: INSIDE SLIDE SHOW
---------------------*/
/*REGULAR*/
#cxstyle_slide_container .cxstyle-title-regular h1,
#cxstyle_slide_container .cxstyle-title-regular h2,
#cxstyle_slide_container .cxstyle-title-regular p
{
 font-size: 40px !important;
 line-height: 1.1em !important;
 font-weight: 600 !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
 /**/
 _background-color: blueviolet;
}
/*LARGE*/
#cxstyle_slide_container .cxstyle-title-large h1,
#cxstyle_slide_container .cxstyle-title-large h2,
#cxstyle_slide_container .cxstyle-title-large p{
 font-size: 52px !important;
 line-height: 1.1em !important;
 font-weight: 600 !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
 /**/
 _background-color: chartreuse;
}
/*SMALL*/
#cxstyle_slide_container .cxstyle-title-small h1,
#cxstyle_slide_container .cxstyle-title-small h2,
#cxstyle_slide_container .cxstyle-title-small p{
 font-size: 32px !important;
 line-height: 1.1em !important;
 font-weight: 600 !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
 /**/
 _background-color: darkturquoise;
}

/*-------------------
TITLE: INPAGE
---------------------*/
/*REGULAR*/
.cxstyle-title-regular h1,
.cxstyle-title-regular h2,
.cxstyle-title-regular p
{
 font-size: 30px !important;
 line-height: 1.1em !important;
 font-weight: 600 !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
 /**/
 _background-color: blueviolet;
}
/*LARGE*/
.cxstyle-title-large h1,
.cxstyle-title-large h2,
.cxstyle-title-large p{
 font-size: 38px !important;
 line-height: 1.1em !important;
 font-weight: 600 !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
 /**/
 _background-color: chartreuse;
}
/*SMALL*/
.cxstyle-title-small h1,
.cxstyle-title-small h2,
.cxstyle-title-small p{
 font-size: 26px !important;
 line-height: 1.1em !important;
 font-weight: 600 !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
 /**/
 _background-color: darkturquoise;
}

/*EXTRA SMALL*/
.cxstyle-title-xsmall h1,
.cxstyle-title-xsmall h2,
.cxstyle-title-xsmall p{
 font-size: 18px !important;
 line-height: 1.1em !important;
 font-weight: 600 !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
 /**/
 _background-color: darkturquoise;
}


/*=========================
SUBTITLE 
===========================*/
.cxstyle-subtitle {
  /**/
 padding: 0 !important;
 margin: 0 !important;
 margin-bottom: 7px !important;
}
#cxstyle_slide_container .cxstyle-subtitle {
  /**/
 padding: 0 !important;
 margin: 0 !important;
 margin-bottom: 10px !important;
}
/*-------------------
SUBTITLE: INSIDE SLIDE SHOW
---------------------*/
/*REGULAR*/
#cxstyle_slide_container .cxstyle-subtitle-regular h1,
#cxstyle_slide_container .cxstyle-subtitle-regular h2,
#cxstyle_slide_container .cxstyle-subtitle-regular p{
 font-size: 28px !important;
 line-height: 1.1em !important;
 font-weight: 600 !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
}

/*LARGE*/
#cxstyle_slide_container .cxstyle-subtitle-large h1,
#cxstyle_slide_container .cxstyle-subtitle-large h2,
#cxstyle_slide_container .cxstyle-subtitle-large p{
 font-size: 24px !important;
 line-height: 1.1em !important;
 font-weight: 600 !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
}

/*SMALL*/
#cxstyle_slide_container .cxstyle-subtitle-small h1,
#cxstyle_slide_container .cxstyle-subtitle-small h2,
#cxstyle_slide_container .cxstyle-subtitle-small p{
 font-size: 22px !important;
 line-height: 1.1em !important;
 font-weight: 600 !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
}

/*-------------------
SUBTITLE: INPAGE
---------------------*/
/*REGULAR*/
.cxstyle-subtitle-regular h1,
.cxstyle-subtitle-regular h2,
.cxstyle-subtitle-regular p{
 font-size: 23px !important;
 line-height: 1.1em !important;
 font-weight: 600 !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
}

/*LARGE*/
.cxstyle-subtitle-large h1,
.cxstyle-subtitle-large h2,
.cxstyle-subtitle-large p{
 font-size: 26px !important;
 line-height: 1.1em !important;
 font-weight: 600 !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
}

/*SMALL*/
.cxstyle-subtitle-small h1,
.cxstyle-subtitle-small h2,
.cxstyle-subtitle-small p{
 font-size: 20px !important;
 line-height: 1.1em !important;
 font-weight: 600 !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
}

/*=========================
DESCRIPTION:
===========================*/
.cxstyle-description {
  /**/
 padding: 0 !important;
 margin: 0 !important;
 margin-bottom: 10px !important;
}

/*-------------------
DESCRIPTION: INSIDE SLIDE SHOW
---------------------*/
/*REGULAR*/
#cxstyle_slide_container .cxstyle-description-regular p {
 font-size: 16px !important;
 line-height: 1.6em !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
}
/*LARGE*/
#cxstyle_slide_container .cxstyle-description-large p {
 font-size: 22px !important;
 line-height: 1.6em !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
}
/*SMALL*/
#cxstyle_slide_container .cxstyle-description-small p {
 font-size: 14px !important;
 line-height: 1.6em !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
}

/*-------------------
DESCRIPTION: INPAGE
---------------------*/

/*REGULAR*/
.cxstyle-description-regular p {
 font-size: 15px !important;
 line-height: 1.6em !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
 /**/
 _background-color: coral;
}

/*LARGE*/
.cxstyle-description-large p {
 font-size: 17px !important;
 line-height: 1.6em !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
 /**/
 _background-color: deepskyblue;
 /**/
}

/*SMALL*/
.cxstyle-description-small p {
 font-size: 13px !important;
 line-height: 1.6em !important;
 /**/
 padding: 0 !important;
 margin: 0 !important;
 /**/
 _background-color: cyan;
}

/*=========================
ADD MORE SPACING INSIDE THE SLIDES
===========================*/
#cxstyle_slide_container .cxstyle-kicker,
#cxstyle_slide_container .cxstyle-title,
#cxstyle_slide_container .cxstyle-subtitle,
#cxstyle_slide_container .cxstyle-description {
 margin-bottom: 20px !important;
}



/*=========================
RESPONSIVE FONT SIZE
===========================*/
@media only screen and (max-width : 1400px) /*SMALLER MONITORS*/{
 
}
@media only screen and (max-width : 1180px) /*TABLET BREAKPOINT*/{

}
@media only screen and (max-width : 1024px) /*TABLET BREAKPOINT*/{
 
}
@media only screen and (max-width : 820px) /*TABLET PORTRAIT:*/{

}
 
@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
/*INTRO TITLES ARE SET TO LARGE - INSIDE THE GRID ALL SIZES BECOME THE SAME WHEN IN MOBILE*/
.cxstyle-kicker-regular p,
.cxstyle-kicker-small p {
 font-size: 16px !important;
 _font-size: 100px !important;
}
/*-------*/
.cxstyle-title-regular h1,
.cxstyle-title-regular h2,
.cxstyle-title-regular p,
/**/
.cxstyle-title-small h1,
.cxstyle-title-small h2,
.cxstyle-title-small p,
/**/
.cxstyle-title-xsmall h1,
.cxstyle-title-xsmall h2,
.cxstyle-title-xsmall p {
 font-size: 32px !important;
 _font-size: 120px !important;
}
/*-------*/
.cxstyle-subtitle-regular h1, 
.cxstyle-subtitle-regular h2, 
.cxstyle-subtitle-regular p,
/**/
.cxstyle-subtitle-small h1, 
.cxstyle-subtitle-small h2, 
.cxstyle-subtitle-small p {
 font-size: 24px !important;
    _font-size: 100px !important;
}
/**/
}

/*=========================
FOR SMALLER PHONES 
===========================*/
@media only screen and (max-width : 480px) /*MOBILE BREAKPOINT*/{

}


/*=========================
COPY SIZE 
===========================*/
h1{
 _width: 100% !important;
 width: 100%;
}
h2{
 _width: 100% !important;
 width: 100%;
}
h3{
 _width: 100% !important;
 width: 100%;
}

h4{
 _width: 100% !important;
 width: 100%;
}

h5{
 _width: 100% !important;
 width: 100%;
}

p {
 _width: 100% !important;
 width: 100%;
}

ul.cxproductstyle-bullet-list li,
.cxproductstyle-spec-item {
  width: 100% !important;
}


@media only screen and (max-width : 767px) {
h1{
  transform: scale(0.85);
 transform-origin: top left !important;
 width: 118% !important;
 float: left !important;
}
h2{
  transform: scale(0.85);
 transform-origin: top left !important;
 width: 118% !important;
 float: left !important;
 padding-bottom: 100px !important;
}

h3{
 transform: scale(0.85);
 transform-origin: top left !important;
 width: 118% !important;
 float: left !important;
}

h4,
h4.cxproductstyle-related-product-title, 
h4.cxsolutionsstyle-column-title{
  transform: scale(0.85);
 transform-origin: top left !important;
 width: 118% !important;
 float: left !important;
}

p {
 transform: scale(0.90);
 transform-origin: top left !important;
 width: 111% !important;
 float: left !important;
}

/*
.cxstyle-description {
 transform: scale(0.85);
 transform-origin: top left !important;
 width: 118% !important;
 background-color: blue !important;
}
 */

ul.cxproductstyle-bullet-list li,
.cxproductstyle-spec-item{
  transform: scale(0.90);
 transform-origin: top left !important;
 width: 111% !important;
 
}
 
#cxstyle_rich_text_block ul li{
 transform: scale(0.90);
 transform-origin: top left !important;
 width: 111% !important;
 float: left !important;
}

 
/*various copy elements*/
/*product page: product items table*/
 .cxproductstyle-table span {
  transform: scale(0.90);
 transform-origin: top left !important;
 width: 111% !important;
 }
 
 .cxproductstyle-resource-items {
  transform: scale(0.90);
 transform-origin: top left !important;
 width: 111% !important;
 }
 
 .cxsolutionsstyle-data-cell input {
  transform: scale(0.90);
 transform-origin: top left !important;
 width: 111% !important;
 }
 
 .cxstyle-kicker,
.cxstyle-title,
.cxstyle-subtitle,
.cxstyle-description,
 /**/
 .cxproductstyle-related-product-title,
 /**/
 ul.cxproductstyle-bullet-list li,
.cxproductstyle-spec-item {
 margin-bottom: 0px !important;
}

#cxstyle_slide_container .cxstyle-kicker,
#cxstyle_slide_container .cxstyle-title,
#cxstyle_slide_container .cxstyle-subtitle,
#cxstyle_slide_container .cxstyle-description {
 margin-bottom: 10px !important;
}
}

@media only screen and (max-width : 480px) {
h1{
  transform: scale(0.75);
 transform-origin: top left !important;
 width: 133% !important;
}
h2{
  transform: scale(0.75);
 transform-origin: top left !important;
 width: 133% !important;
}

h3{
 transform: scale(0.75);
 transform-origin: top left !important;
 width: 133% !important;
}

h4,
h4.cxproductstyle-related-product-title, 
h4.cxsolutionsstyle-column-title{
  transform: scale(0.75);
 transform-origin: top left !important;
 width: 133% !important;
}
/*KEEP THIS LARGER
p {
 transform: scale(0.75);
 transform-origin: top left !important;
 width: 133% !important;
}

ul.cxproductstyle-bullet-list li,
.cxproductstyle-spec-item{
  transform: scale(0.75);
 transform-origin: top left !important;
 width: 133% !important;
}

 .cxproductstyle-table span {
 transform: scale(0.75);
 transform-origin: top left !important;
 width: 133% !important;
 }
 
 .cxproductstyle-resource-items {
  transform: scale(0.75);
 transform-origin: top left !important;
 width: 133% !important;
 }
 
 .cxsolutionsstyle-data-cell input {
  transform: scale(0.75);
 transform-origin: top left !important;
 width: 133% !important;
 }
 */
}

/*
.cxstyle-description {
 border: solid 1px blue !important;
 margin-bottom: 0 !important;
}
*/

/***************************
iframe
**************************/


@media only screen and (max-width : 1400px) /*SMALLER MONITORS*/{

}

@media only screen and (max-width : 1180px) /*LARGE TABLET LANDSCAPE BREAKPOINT*/{
#cxstyle_grid_container.cxstyle-full-screen-override {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 0 auto !important;
 padding: 0 !important;
}
.cxstyle-full-screen-override
#cxstyle_media_embed_block_iframe iframe{
 margin: 0 auto 0 auto;
}
}

/*RESPONSIVE*/
@media only screen and (max-width : 820px) /*TABLET PORTRAIT:*/{
#cxstyle_grid_container.cxstyle-full-screen-override {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 0 auto !important;
 padding: 0 !important;
 /*this overight the colum bug: may need to add it to the others*/
 display: grid !important;
  grid-template-columns: 100% 1fr !important;
 gap: 0 !important;
}
.cxstyle-full-screen-override
#cxstyle_media_embed_block_iframe iframe{
 margin: 0 auto 0 auto;
}
 

}

@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
#cxstyle_grid_container.cxstyle-full-screen-override {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 0 auto !important;
 padding: 0 !important;
}
.cxstyle-full-screen-override
#cxstyle_media_embed_block_iframe iframe{
 margin: 0 auto 0 auto;
}
}


@media only screen and (max-width : 480px) /*MOBILE BREAKPOINT*/{

}

/*ADD ARROW TO ALL BTN ARROW TEST*/
button.cxstyle-btn-color-black,
button.cxstyle-btn-color-white,
button.cxstyle-btn-color-grey,
button.cxstyle-btn-color-connection-red,
button.cxstyle-btn-color-steel-blue,
/*HREF*/
a.cxstyle-btn-color-black,
a.cxstyle-btn-color-white,
a.cxstyle-btn-color-grey,
a.cxstyle-btn-color-connection-red,
a.cxstyle-btn-color-steel-blue{
 padding-left: 24px !important;
 padding-right: 20px !important;
 
}

button.cxstyle-btn-color-black::after,
button.cxstyle-btn-color-white::after,
button.cxstyle-btn-color-grey::after,
button.cxstyle-btn-color-connection-red::after,
button.cxstyle-btn-color-steel-blue::after,
/*HREF*/
a.cxstyle-btn-color-black::after,
a.cxstyle-btn-color-white::after,
a.cxstyle-btn-color-grey::after,
a.cxstyle-btn-color-connection-red::after,
a.cxstyle-btn-color-steel-blue::after{
  content: "\2192";
 padding-left: 3px;
}

/*-----------------------------------------------
SIZE OF MAIN CONTENT
------------------------------------------------*/
/*NAVIGATION*/
#fixed-header #cxstyle_brand_navigation #cxstyle_brand_navigation_content{
    max-width: 1440px;
    width: 100%;
    margin: 0 auto 0 auto;
}
/*CONTENT*/
.cxtest-filter-dropdown-container,
.cxflowgrid-flow-container,
#cxstyle_grid_container, 
.cxstyle-tabbed-accordion-container,
/*PRODUCT PAGE*/
.cxproductstyle-inline-section-content, 
.cxsolutionsstyle-container, 
.cxsimplestyle-container,
/*SEARCH RESULT PAGE*/
atomic-search-interface{
    width: 100%;
    max-width: 1390px !important;
    margin: 0 auto 0 auto;
}





@media only screen and (max-width : 1400px) 
/*SMALLER MONITORS: 
REMOVE 60PX FROM NAV MAX SIZE
REMOVE 100PX FROM CONTENT MAX SIZE*/{
#fixed-header #cxstyle_chemelex_navigation div,
#fixed-header #cxstyle_brand_navigation #cxstyle_brand_navigation_content{
    max-width: 1340px;
}
.cxtest-filter-dropdown-container,
.cxflowgrid-flow-container,
#cxstyle_grid_container, 
.cxstyle-tabbed-accordion-container,
/*PRODUCT PAGE*/
.cxproductstyle-inline-section-content, 
.cxsolutionsstyle-container, 
.cxsimplestyle-container,
/*SEARCH RESULT PAGE*/
atomic-search-interface {
    max-width: 1300px !important;
}
 
}

@media only screen and (max-width : 1180px) 
/*LARGE TABLET LANDSCAPE BREAKPOINT: 
REMOVE 60PX FROM NAV MAX SIZE
REMOVE 100PX FROM CONTENT MAX SIZE*/{
#fixed-header #cxstyle_chemelex_navigation div,
#fixed-header #cxstyle_brand_navigation #cxstyle_brand_navigation_content{
    max-width: 1120px;
}
.cxtest-filter-dropdown-container,
.cxflowgrid-flow-container,
#cxstyle_grid_container, 
.cxstyle-tabbed-accordion-container,
/*PRODUCT PAGE*/
.cxproductstyle-inline-section-content, 
.cxsolutionsstyle-container, 
.cxsimplestyle-container,
/*SEARCH RESULT PAGE*/
atomic-search-interface {
    max-width: 1080px !important;
}

}

/*********************************
HAMBURGER MENU FROM HERE ON
*********************************/
@media only screen and (max-width : 1024px) 
 /*SMALL TABLET LANDSCAPE BREAKPOINT: 
REMOVE 60PX FROM NAV MAX SIZE
REMOVE 100PX FROM CONTENT MAX SIZE*/{
#fixed-header #cxstyle_chemelex_navigation div,
#fixed-header #cxstyle_brand_navigation #cxstyle_brand_navigation_content{
    max-width: 964px;
}
.cxtest-filter-dropdown-container,
.cxflowgrid-flow-container,
#cxstyle_grid_container, 
.cxstyle-tabbed-accordion-container,
/*PRODUCT PAGE*/
.cxproductstyle-inline-section-content, 
.cxsolutionsstyle-container, 
.cxsimplestyle-container,
/*SEARCH RESULT PAGE*/
atomic-search-interface {
    max-width: 924px !important;
}
}
/*RESPONSIVE*/
@media only screen and (max-width : 820px) 
/*TABLET PORTRAIT:
REMOVE 60PX FROM NAV MAX SIZE
REMOVE 100PX FROM CONTENT MAX SIZE*/{
#fixed-header #cxstyle_chemelex_navigation div,
#fixed-header #cxstyle_brand_navigation #cxstyle_brand_navigation_content{
    max-width: 760px;
}
.cxtest-filter-dropdown-container,
.cxflowgrid-flow-container,
#cxstyle_grid_container, 
.cxstyle-tabbed-accordion-container,
/*PRODUCT PAGE*/
.cxproductstyle-inline-section-content, 
.cxsolutionsstyle-container, 
.cxsimplestyle-container,
/*SEARCH RESULT PAGE*/
atomic-search-interface {
    max-width: 720px !important;
}
 }
@media only screen and (max-width : 767px) 
/*MOBILE BREAKPOINT:
REMOVE 40PX FROM NAV MAX SIZE
REMOVE 80PX FROM CONTENT MAX SIZE*/{
#fixed-header #cxstyle_chemelex_navigation div,
#fixed-header #cxstyle_brand_navigation #cxstyle_brand_navigation_content{
    max-width: 727px;
}
.cxtest-filter-dropdown-container,
.cxflowgrid-flow-container,
#cxstyle_grid_container, 
.cxstyle-tabbed-accordion-container,
/*PRODUCT PAGE*/
.cxproductstyle-inline-section-content, 
.cxsolutionsstyle-container, 
.cxsimplestyle-container,
/*SEARCH RESULT PAGE*/
atomic-search-interface {
    max-width: 687px !important;
}
 }


@media only screen and (max-width : 480px) 
/*MOBILE BREAKPOINT:
REMOVE 20PX FROM NAV MAX SIZE
REMOVE 60PX FROM CONTENT MAX SIZE*/{
#fixed-header #cxstyle_chemelex_navigation div,
#fixed-header #cxstyle_brand_navigation #cxstyle_brand_navigation_content{
    max-width: 460px;
}
.cxtest-filter-dropdown-container,
.cxflowgrid-flow-container,
#cxstyle_grid_container, 
.cxstyle-tabbed-accordion-container,
/*PRODUCT PAGE*/
.cxproductstyle-inline-section-content, 
.cxsolutionsstyle-container, 
.cxsimplestyle-container,
/*SEARCH RESULT PAGE*/
atomic-search-interface {
    max-width: 420px !important;
}
 }


/*********************************
SEARCH RESPONSIVE FIX
*********************************/




/* ========== chemelex_cms_interface.css (2.15 KB) ========== */

/********************
STYLE CMS 
********************/


#cxstyle_grid_test_page_form select,
.cxtest-slideshow-container select {
 flex: 1;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px #0000000d;
    font-size: .875rem;
 background-color: #46768A !important;
 color: #ffffff !important;
 padding: 10px !important;
 margin: 5px !important;
 border-radius: 0px !important;
}

#cxstyle_grid_test_page_form input,
/**/
.cxtest-slideshow-container input{
 flex: 1;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px #0000000d;
    font-size: .875rem;
 background-color: #f2f2f2 !important;
 color: #000000 !important;
 padding: 8px !important;
 margin: 5px !important;
 border-radius: 0px !important;
}


#cxstyle_grid_test_page_form textarea,
.cxtest-slideshow-container textarea{
    border: 1px solid #d1d5db;
}

button.cxtest-json-button {
 padding: 10px !important;
 color: #ffffff !important;
    background-color: #FF0547 !important;
 
}
.cxtest-tab-container,
.cxtest-slideshow-tab-container {
 border-bottom: solid 5px #46768A !important;
 
}
.cxtest-tab-nav {
    display: flex;
 gap: 1rem !important;
}
.cxtest-slideshow-tab-nav {
    gap: 1rem !important;
 display: flex !important;
}

.cxtest-tab-button,
.cxtest-slideshow-tab-button {
 background-color: #f2f2f2 !important;
 color: #000000 !important;
}

.cxtest-tab-button-active,
.cxtest-slideshow-tab-button-active {
    border: none !important;
    color: #ffffff !important;
    background-color: #46768A !important;
}

/*******************************
SPECIFICS: GRIDS
********************************/

.cxtest-component-form-container {
 padding: 20px;
 border: solid 1px #666666;
}
.cxtest-component-form-container .shadow,
.cxtest-component-form-container .space-y-6 .shadow{
    box-shadow: none !important;
}

#cxstyle_grid_test_page_form  .cxtest-tab-content-title {
    font-size: 24px !important;
 line-height: 26px !important;
    font-weight: 600;
 padding: 0 !important;
    margin-bottom: 10px !important;
 
}

#cxstyle_grid_test_page_form  h3.text-lg {
    font-size: 18px !important;
 line-height: 20px !important;
    font-weight: 600;
 padding: 0 !important;
    margin-bottom: 10px !important;
 
}



/* ========== fortestingLABELS.css (0.06 KB) ========== */

/* Empty stub - original file not accessible from S3 */



/* ========== fortestingCOLORS.css (0.06 KB) ========== */

/* Empty stub - original file not accessible from S3 */



/* ========== chemelex_tweaks.css (4.96 KB) ========== */

/*******************************
TWEAKS
********************************/

/*----------------------------------
NAVIGATION SEARCH
-----------------------------------*/


#fixed-header #cxstyle_brand_navigation #cxstyle_search {
 /**/
    width: calc(50% - 20px) !important;
 min-width: calc(50% - 20px) !important;
 margin: 0 !important;
 padding: 0 !important;
 
}

#fixed-header #cxstyle_brand_navigation #cxstyle_search .main-search {
 /**/
 margin: 0 !important;
}

#fixed-header #cxstyle_brand_navigation #cxstyle_search .main-search input {
 /**/
 border: solid 1px #666666 !important;
 width: 380px !important;
}

#fixed-header #cxstyle_brand_navigation #cxstyle_search .main-search button {
 /**/
 padding: 0px !important;
}
#fixed-header #cxstyle_brand_navigation #cxstyle_search .main-search button:hover {
 /**/
 padding: 0px !important;
 margin-top: -16px !important;
 background-color: #ff0547 !important;
 color: #ffffff !important;
}
#fixed-header #cxstyle_brand_navigation #cxstyle_search .main-search button:hover svg,
#fixed-header #cxstyle_brand_navigation #cxstyle_search .main-search svg:hover,
#fixed-header #cxstyle_brand_navigation #cxstyle_search .main-search button svg:hover{
    color: #ffffff !important;
}
/*----------------------------------
SEARCH RESULT PAGE
-----------------------------------*/
#cxstyle_search_page {
 padding-bottom: 20px !important;
}
#cxstyle_search_page .border {
 border: none;
 border: solid 1px #ffffff !important;
}

#cxstyle_search_content {
 border: solid 15px #ffffff;
 width: 100%;
    max-width: 1460px !important;
margin: 0 auto 0 auto;
}
/*TABS*/
.headless-tab-manager.visible {
 /**/
 display: none !important;
}

/*TOP BAR*/
.product-search-wrapper {
 /**/
 padding-bottom: 8px;
}
.headless-breadbox {
 /**/
 padding: 10px 15px;
 border-bottom: solid 1px #cccccc !important;
 border-top: solid 1px #ffffff !important;
 margin-top: -1px !important;
}

.headless-breadcrumb {
 /**/
 padding: 10px;
 padding-right: 8px;
 background-color: #ffffff;
 border: solid 1px #d1d5db;
 font-size: 13px;
    font-weight: 500;
    color: #374151;
}
button.headless-breadcrumb-clear-all {
 /**/
 background-color: #EAEAEA;
 padding: 10px;
 font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.headless-query-summary {
 /**/
 padding: 10px 15px;
}

/*LEFT*/

.coveo-facet-container {
 /**/
 padding: 1rem !important;
 background-color: #f9fafb !important;
}

.headless-facet .headless-facet-header  {
 /**/
    padding: .75rem 1rem .6rem !important;
    background-color: #ff0547 !important;
    color: #fff !important;
    font-family: Archivo, sans-serif !important;
    font-variation-settings: "wdth" 125 !important;
    font-size: 12pt !important;
    font-weight: 600 !important;
    line-height: 16pt !important;
    flex: 1;
}
.headless-facet-toggle {
 /**/
 color: #ffffff !important;
}
.headless-facet-content {
 /**/
 padding: 0 !important;
}

.headless-facet-value-label {
 /**/
 padding: 10px !important;
 margin-bottom: 1px !important;
}

.headless-facet-value.selected .headless-facet-value-label {
 /**/
background-color: #f3f4f6;
}
.headless-facet-clear {
 /**/
 padding: 8px !important;
 margin-bottom: 1px !important;
}
.headless-facet-value-label .headless-facet-checkbox[type="checkbox"] {
 /**/
 border-radius: 20px !important;
}

.headless-facet-actions {
 /**/
 padding-top: 0 !important;
 background-color: #EAEAEA !important;
}

.headless-facet-show-more, .headless-facet-show-less {
 /**/
 width: 100% !important;
 border: none !important;
 font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
}


/*RIGHT*/

.headless-result-item {
 /**/
 padding: 10px 0 !important;
}

.headless-result-visual {
 /**/
 width: 200px !important;
}
.headless-result-image {
 /**/
 background-color: #ffffff;
    border: none !important;
 width: 100% !important;
    height: 100% !important;
}

.headless-result-content {
}

.headless-result-title {
 /**/
    font-family: "Archivo", sans-serif !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    font-variation-settings: "wdth" 125 !important;
    padding: 10px 0 !important;
    margin: 0 !important;
}

.headless-result-title a:hover {
 /**/
    color: #ff0547;
    text-decoration: none;
}

.headless-pager-button.active {
    color: #ffffff;
    background-color: #ff0547;
    border-color: #ff0547;
 /**/
}


.headless-result-content {
    flex: 1;
    min-width: 0;
 align-self: center !important;
}



@media only screen and (max-width : 767px) /*MOBILE BREAKPOINT*/{
 .headless-query-summary  {
  text-align: center !important;
 }
 .headless-sort {
    justify-content: center !important;
  width: 100% !important;
   min-width: 100% !important;
}
.headless-result-visual {
 width: 100% !important;
 max-width: 250px !important;
 margin: 0 auto 0 auto;
} 
.headless-result-title {
    text-align: center !important;
 padding-bottom: 0 !important;
}
.headless-result-excerpt {
 font-size: 12px;
 border: solid 1px #ffffff;
 text-align: center;
}
}