/* stylelint-disable */
.whmis-sds, .whmis-main, .whmis-labcomp {
	/* Colours */

	/* dark blue */
	--primary-colour: hsl(205deg 100% 21%);

	/* orange */

	/* --secondary-colour: hsl(265, 95%, 51%); */

	/* accessible orange */
	--secondary-colour: hsl(25deg 95% 39%);

	/* default white */
	--thirdly-colour: hsl(0deg 0% 100%);

	/* light green */
	--light-green: hsl(90deg 42% 88%);

	/* salmon colour */
	--accent-colour: hsl(29deg 96% 90%);

	/* pure black */
	--black-colour: hsl(0deg 0% 0%);

	/* body colour */
	--body-text-colour: hsl(0deg 0% 20%);

	/* Typography */
	--body-text: 1.1rem;
	--lead-text: 1.25rem;

	--section-title: 2.5rem;
	--subsection-title: 1.875rem;
	--main-lead-text: 1.563rem;

	/* Style */
	--box-shadow: inset 0 10px 15px -15px;

	/* Spacing */
	--gap: 1rem;
}

/* Colours on focus */
[data-colour="primary"]:is(focus, hover),
[data-colour="secondary"]:is(focus, hover) {
	outline-color: transparent;
}

[data-colour="primary"]:focus-visible {
	box-shadow: 0 0 0 2px var(--thirdly-colour), 0 0 0 4px var(--primary-colour);
	outline: 2px solid transparent;
}

[data-colour="secondary"]:focus-visible {
	box-shadow: 0 0 0 2px var(--thirdly-colour), 0 0 0 4px var(--secondary-colour);
	outline: 2px solid transparent;
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	::before,
	::after {
		animation-delay: -1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		background-attachment: initial !important;
		scroll-behavior: auto !important;
		transition-duration: 0s !important;
		transition-delay: 0s !important;
	}
}

a {
	color: #0d6efd;
}

[role="list"] {
	list-style-type: none;
}

.fs-italic {
	font-style: italic;
}

.lang-toggle {
	background: #003e69;
	color: #fff !important;
	border: solid 1px #003e69;
	border-bottom-left-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
}

.lang-toggle:hover {
	background: #fff;
	color: #003e69 !important;
}

body.alt .lang-toggle {
	background: #fff;
	color: #003e69 !important;
	border: solid 1px #fff;
}

body.alt .lang-toggle:hover {
	background: #003e69;
	color: #fff !important;
}

body.alt .whmis-header #nav-collapse .navbar-nav .nav-link {
	color: #f9700b;
}

/* bootstrap build */
.mt-n2 {
	margin-top: -0.5rem !important;
}

.ms-n2 {
	margin-left: -0.5rem !important;
}

.me-n2 {
	margin-right: -0.5rem !important;
}

/* home carousel */
.whmis-carousel-overlay {
	position: absolute;
	inset: 0;
	height: 100%;
	color: #fff;
	text-align: center;
	text-shadow: #000 2px 2px 2px;
	z-index: 2;
}

.bg-dark-blue {
	background-color: #003e69 !important;
}

.bg-light-blue {
	background-color: #bed6f4 !important;
}

.bg-dark-orange {
	background-color: #f9700b !important;
}

.bg-light-orange {
	background-color: #f9d9c2 !important;
}

.text-dark-blue {
	color: #003e69 !important;
}

.footer-link-img {
	display: inline-block;

	/* margin-left: 0.50rem; */
	width: 23px;
	height: 23px;
}

.whmis-header #nav-collapse .navbar-nav .nav-link {
	font-size: 1.3rem;
	font-size: var(--lead-text);
	color: hsl(205deg 100% 21%);
	color: var(--primary-colour);
}

.whmis-header #nav-collapse .navbar-nav .nav-link:hover,
.whmis-header #nav-collapse .navbar-nav .nav-link:focus,
.whmis-header #nav-collapse .navbar-nav .nav-link.active {
	color: hsl(25deg 95% 51%);
	color: var(--secondary-colour);
}

.whmis-main {
	color: hsl(0deg 0% 20%);
	color: var(--body-text-colour);
}

body.alt #header {
	background-color: #003e69;
}

body #header {
	background-color: #fff;
}

/* Links  */
.whmis-main .whmis-nav-container a,
.whmis-main .whmis-nav-container a:hover,
.whmis-main .whmis-nav-container a:focus,
.whmis-link-wrapper .whmis-link-wrapper__link a,
.whmis-link-wrapper .whmis-link-wrapper__link,
.whmis-footer a {
	text-decoration: none;
}

/* Tabs links */
.whmis-nav-container [role="tabpanel"] a,
.whmis-footer a:hover,
.whmis-footer a:focus {
	text-decoration: underline;
}

/* Button-style link */
.whmis-link-wrapper .whmis-link-wrapper__link:hover,
.whmis-link-wrapper .whmis-link-wrapper__link:focus {
	text-decoration: none;
}

/* UI components */

/* Collapsible bars */

.whmis-resources-tabs .whmis-resources-tabs__title {
	font-size: 1.3rem;
	font-size: var(--lead-text);
}

.whmis-resources-tabs button.btn {
	background: no-repeat;
	background-image: url("/images/icons/close3.png");
	background-position: right center;
	background-origin: content-box;
	background-size: 30px 30px;
}

.whmis-resources-tabs button.btn.collapsed {
	background-image: url("/images/icons/open3.png");
}

/* Tabs list */
.whmis-tabs-list * + * {
	padding-block-start: 1rem;
}

/* Use for open/close quotes with or without <q> - start */
.ccohs-standard-quote::before {
	content: open-quote;
}

.ccohs-standard-quote::after {
	content: close-quote;
}

/* Use for open/close quotes with or without <q> - end */
.navbar-light .navbar-toggler {
	background-color: #f9d9c2;
	border-color: #f9700b;
	color: #f9700b;
}

#nav-collapse .navbar-nav .nav-link {
	color: #fe840b;
}

.navbar-brand img {
	max-height: 60px;
}

body.alt #app {
	background-color: #deedfc;
}

#jurisdiction_map_wrapper_phone,
#jurisdiction_map_wrapper_tablet,
#jurisdiction_map_wrapper_desktop {
	display: none;
}

@media (width >= 1076px) {
	#jurisdiction_map_wrapper_desktop {
		display: block;
	}
}

@media (width >= 768px) and (width <= 1075px) {
	#jurisdiction_map_wrapper_tablet {
		display: block;
	}
}

@media (width <= 767px) {
	#jurisdiction_map_wrapper_phone {
		display: block;
	}
}

.whmis-pipe-list {
	list-style: none;
	margin-left: 0;
	-webkit-margin-before: 0;
	-webkit-padding-start: 0;
}

.whmis-pipe-list li {
	display: inline-block;
}

.whmis-pipe-list > li + li::before {
	content: "|";
	margin: 0 10px;
}

body.whmis-main .whmis-audience > li {
	display: inline-block;
	margin: 0 10px 20px;
}

.whmis-audience > li a {
	display: inline-block;
	width: 100%;
	color: #000;
	text-decoration: none;
}

.whmis-audience > li a img {
	border: solid 10px #bed6f4;
}

.whmis-audience > li a:hover img {
	border-color: #fff;
	box-shadow: 3px 3px 10px #000;
}

.whmis-resource,
.whmis-resource a {
	color: #003e69;
}

.whmis-resource a {
	font-weight: bold;
}

.whmis-resource-details {
	font-size: smaller;
	display: flex;
	display: flexbox;
	justify-content: flex-start;
	-ms-flex-pack: start;
}

.whmis-resource-details label {
	margin: 0 0.75rem;
}

.whmis-resource-details label:nth-of-type(1) {
	margin-left: 0;
}

.whmis-resource-details label:nth-of-type(3) {
	margin-right: 0;
}

.whmis-resource-details .whmis-status {
	text-align: right;
	flex-grow: 1;
	-ms-flex-positive: 1;
}

.whmis-nav-container .nav-pills .nav-item {
	position: relative;
}

.whmis-nav-container .nav-pills > li + li {
	margin-left: 1px;
}

.whmis-nav-container-blue .responsive-tabs .nav-link,
.whmis-nav-container-blue .nav-pills .nav-link,
.whmis-nav-container-orange .nav-pills .nav-link {
	color: var(--thirdly-colour);
	border-radius: 0;
	height: 100%;
}

.whmis-nav-container-blue .responsive-tabs .nav-pills .nav-link,
.whmis-nav-container-blue .responsive-tabs .nav-link.collapsed,
.whmis-nav-container-blue .nav-pills .nav-link {
	background: #5b8dd6;
}

.whmis-nav-container-orange .nav-pills .nav-link {
	background-color: var(--secondary-colour);
}

.whmis-nav-container-blue .responsive-tabs .nav-link,
.whmis-nav-container-blue .responsive-tabs .nav-link:hover,
.whmis-nav-container-blue .nav-pills .nav-link.active,
.whmis-nav-container-blue .nav-pills .nav-link:hover,
.whmis-nav-container-orange .nav-pills .nav-link.active,
.whmis-nav-container-orange .nav-pills .nav-link:hover {
	color: #fff;
	background: #003e69;
}

.whmis-nav-container-blue .nav-pills .nav-link.active::after,
.whmis-nav-container-blue .nav-pills .nav-link:hover::after,
.whmis-nav-container-orange .nav-pills .nav-link.active::after,
.whmis-nav-container-orange .nav-pills .nav-link:hover::after {
	border-top: solid 10px #003e69;
	border-left: solid 10px transparent;
	border-right: solid 10px transparent;
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 0;
	height: 0;
	margin: 0 auto;
}

.whmis-resource-wrapper.whmis-resource-markup {
	border: solid 1rem #bed6f4;
	padding: 0.5rem;
	background: #fff;
	word-wrap: break-word;
}

/* get targets out from under the sticky header */
:target {
	scroll-margin-top: 6rem;
}

.list-striped > li:nth-child(odd) {
	background: #f0f0f0;
}

/* sds, labcomp */
body.whmis-sds,
whmis-labcomp {
	color: #003e69;
}

.whmis-sds a,
.whmis-labcomp a {
	text-decoration: none;
}

.text-dark-green {
	color: #639714 !important;
}

.text-dark-orange {
	color: #fe840b !important;
}

.text-dark-blue {
	color: #003e69 !important;
}

.text-grey {
	color: #707070 !important;
}

.bg-dark-green {
	background-color: #639714 !important;
}

.bg-dark-orange {
	background-color: #fe840b !important;
}

.bg-dark-blue {
	background-color: #003e69 !important;
}

.whmis-sds .bg-light-blue,
.whmis-labcomp .bg-light-blue {
	background-color: #f1f5e9 !important;
}

.whmis-sds .bg-light-orange,
.whmis-labcomp .bg-light-orange {
	background-color: #fdcea5 !important;
}

.bg-light-green {
	background-color: #dfe9d0 !important;
}

.bg-light-grey {
	background-color: #ececec !important;
}

.whmis-sds .sds-tabs,
.whmis-labcomp .labcomp-tabs {
	background-color: #aabac5 !important;
}

.whmis-sds .sds-tabs > ul li a,
.whmis-labcomp .labcomp-tabs > ul li a {
	font-weight: bold;
	color: #fff !important;
}

.whmis-sds .sds-tabs .tab-content,
.whmis-labcomp .labcomp-tabs .tab-content {
	background-color: #fff;
}

.whmis-sds .sds-tabs > ul li button,
.whmis-labcomp .labcomp-tabs > ul li button {
	font-weight: bold;
	color: #fff;
}

.whmis-sds .sds-tabs .nav-pills .nav-link.active,
.whmis-labcomp .labcomp-tabs .nav-pills .nav-link.active {
	background-color: #003e69;
}

.sds-orange-table, .sds-orange-table > :not(caption) > * > * {
	color: #707070;
}

.sds-orange-table .thead-light th,
.sds-orange-table th,
.sds-orange-table td {
	padding: 0.25rem;
	border-color: #fff;
	background-color: inherit;
}

.sds-highlight {
	background-color: #fff !important;
	border-left: solid 1px #fdcea5;
	border-right: solid 1px #fdcea5;
}

.sds-highlight:first-of-type {
	border-top-left-radius: 0.25rem !important;
	border-top-right-radius: 0.25rem !important;
	border-top: solid 1px #fdcea5;
}

.sds-highlight:last-of-type {
	border-bottom-left-radius: 0.25rem !important;
	border-bottom-right-radius: 0.25rem !important;
	border-bottom: solid 1px #fdcea5;
}

.border-top-dark-green {
	border-top: solid 2px #639714;
}

.border-bottom-dark-green {
	border-bottom: solid 2px #639714;
}

.home-purpose > p:last-of-type {
	margin-bottom: 0.5rem;
}

li.sds-highlight > ul > li,
li.sds-bullet > ul > li,
li.sds-bullet,
li.labcomp-highlight > ul > li,
li.labcomp-bullet > ul > li,
li.labcomp-bullet {
	margin-left: 2rem;
}

li.sds-highlight > ul > li,
li.sds-bullet,
li.labcomp-highlight > ul > li,
li.labcomp-bullet {
	list-style-type: disc;
}

li.sds-bullet > ul > li,
li.labcomp-bullet > ul > li {
	list-style-type: circle;
}

li.sds-bold,
li.labcomp-bold {
	font-weight: bold;
}

li.sds-bold > ul,
li.labcomp-bold > ul {
	font-weight: normal;
}

.sds-section-tabs > li,
.labcomp-section-tabs > li {
	font-weight: bold;
	text-align: center;
}

.sds-section-tabs > li > a:hover,
.labcomp-section-tabs > li > a:hover {
	text-decoration: none;
}

#home-section-list > ul > li > a,
.sds-section-tabs > li > a,
.sds-section-tabs > li > span,
.labcomp-section-tabs > li > a,
.labcomp-section-tabs > li > span {
	text-transform: uppercase;
	position: relative;
	display: block;
	padding: 0.5rem 1rem;
	color: #003e69;
	border-radius: 0;
	border-top: 1px solid #003e69;
	border-left: 1px solid #003e69;
	border-right: 1px solid #003e69;
}

#home-section-list > ul > li:last-of-type > a,
.sds-section-tabs > li:last-of-type > a,
.sds-section-tabs > li:last-of-type > span,
.labcomp-section-tabs > li:last-of-type > a,
.labcomp-section-tabs > li:last-of-type > span {
	border-bottom: 1px solid #003e69;
}

#home-section-list > ul > li > a:hover {
	text-decoration: none;
	background-color: #fe840b;
}

.sds-full-horizontal-tabs .nav-pills .nav-link.active,
.labcomp-full-horizontal-tabs .nav-pills .nav-link.active {
	position: relative;
}

.sds-full-horizontal-tabs .nav-pills .nav-link.active::after,
.labcomp-full-horizontal-tabs .nav-pills .nav-link.active::after {
	content: "";
	position: absolute;
	left: 50%;
	margin-left: -8px;
	bottom: -12px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 8px 0;
	border-color: #003e69 transparent transparent;
}

.sds-section-common-non-compliance-list li:nth-child(odd),
.labcomp-section-common-non-compliance-list li:nth-child(odd) {
	background-color: #f0f0f0;
}

.breadcrumb-list a {
	color: #003e69;
}

.sds-footer-link-img,
.labcomp-footer-link-img {
	display: inline-block;
	margin-left: 0.25rem;
	width: 23px;
	height: 23px;
}

.list-striped {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.list-striped > li:nth-child(odd) {
	background: #f0f0f0;
}

body[lang="en"] h1 {
	font-size: 1.1rem;
}

body[lang="fr"] h1 {
	font-size: 0.9rem;
}

#header {
	border-bottom: solid 1px #bed6f4;
}

.navbar-brand img {
	max-height: 60px;
}

#nav-collapse .navbar-nav .nav-link {
	color: #fe840b;
}

#nav-collapse .navbar-nav .nav-link:hover {
	color: #003e69;
}

.sds-print-button,
.labcomp-print-button {
	padding-right: 1.2rem;
	background: no-repeat 100% 50% url("/images/print_icon.svg");
	background-size: 1rem 1rem;
}

.sds-tabs > ul > li:last-of-type a,
.labcomp-tabs > ul > li:last-of-type a {
	padding-right: 2.2rem;
	background: no-repeat 80% 50% url("/images/tips_icon.svg");
	background-size: 2rem 2rem;
}

.sds-home-tips,
.labcomp-home-tips {
	padding-right: 4.4rem !important;
	background: no-repeat 99% 50% url("/images/tips_icon.svg");
	background-size: 4rem 4rem;
}

/* product label comparison tool */
body.whmis-pl h1 {
	display: block;
	padding: 1rem;
	color: #fff;
	background: #003e69;
	text-align: center;
}

/*******  */

/* responsive tabs - https://gist.github.com/howbizarre/e9e5cc2aa301c1d3ed7f5bf5e82cb1bf */

.whmis-nav-container .responsive-tabs [role="tabpanel"] a,
.responsive-tabs .nav-link {
	text-decoration: none;
}

.responsive-tabs .card {
	background: inherit;
}

.responsive-tabs .nav-tabs {
	display: none;
}

@media (width >= 768px) {
	.responsive-tabs .nav-tabs {
		display: flex;
	}

	.responsive-tabs .card {
		border: none;
	}

	.responsive-tabs .card .tab-header {
		display: none;
	}

	.responsive-tabs .card .tab-collapse.collapse {
		display: block;
	}
}

@media (width <= 767px) {
	.responsive-tabs .tab-pane {
		display: block !important;
		margin-bottom: 0.25rem;
		opacity: 1;
	}
}

/*******  */

@media (width >= 576px) {
	body .sds-page-title > h1,
	body .labcomp-page-title > h1 {
		font-size: 1.4rem;
	}
}

@media (width >= 768px) {
	body .sds-page-title > h1,
	body .labcomp-page-title > h1 {
		font-size: 1.8rem;
	}

	.sds-section-tabs > li > span::after,
	.labcomp-section-tabs > li > span::after {
		content: "";
		position: absolute;
		top: 50%;
		margin-top: -8px;
		right: -12px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 8px 0 8px 12px;
		border-color: transparent transparent transparent #003e69;
	}

	#header {
		border-bottom: none;
	}

	.navbar-brand img {
		max-height: 90px;
	}

	.lang-toggle {
		background: #003e69;
		color: #fff !important;
		border: solid 1px #003e69;
		border-bottom-left-radius: 0.25rem;
		border-bottom-right-radius: 0.25rem;
	}

	.lang-toggle:hover {
		background: #fff;
		color: #003e69 !important;
	}

	#contact-us-link a {
		color: #003e69 !important;
	}

	#contact-us-link a:hover {
		color: #fe840b !important;
	}
}

@media (width >= 992px) {
	body .sds-page-title > h1,
	body .labcomp-page-title > h1 {
		font-size: 2.3rem;
	}

	.sds-tips-tab,
	.labcomp-tips-tab {
		background-position: 65% 50%;
	}
}

@media (width >= 1200px) {
	.whmis-nav-container .nav-pills > li:first-child a {
		border-top-left-radius: 8px;
		border-bottom-left-radius: 8px;
	}

	.whmis-nav-container .nav-pills > li:last-child a {
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
	}
}

.only-print {
	display: none !important;
}

ul[role="list"],
ol[role="list"] {
	list-style-type: none;
}

@media print {
	#header,
	#header-links,
	#footer,
	#bb-wrapper,
	.no-print {
		display: none !important;
	}

	#article {
		padding-top: 0 !important;
	}

	.sds-full-horizontal-tabs .tab-content > .tab-pane,
	.labcomp-full-horizontal-tabs .tab-content > .tab-pane,
	.only-print {
		display: block !important;
	}

	/* .full-print {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  } */
}

/* ie 10+ */
@media all and (-ms-high-contrast: none),
	(-ms-high-contrast: active) {
	#header {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 10;
	}
}

@media (width >= 576px) and (-ms-high-contrast: none),
	(-ms-high-contrast: active) {
	#article {
		padding-top: 7.5rem;
	}
}

@media (width >= 768px) and (-ms-high-contrast: none),
	(-ms-high-contrast: active) {
	#article {
		padding-top: 10.5rem;
	}
}

@media (width >= 992px) and (-ms-high-contrast: none),
	(-ms-high-contrast: active) {
	#article {
		padding-top: 11.5rem;
	}
}

@media (width >= 1200px) and (-ms-high-contrast: none),
	(-ms-high-contrast: active) {
	#article {
		padding-top: 12.5rem;
	}
}

@media (width >= 768px) {
	.navbar-brand img {
		max-height: 90px;
	}

	.lang-toggle {
		background: #003e69;
		color: #fff !important;
		border: solid 1px #003e69;
		border-bottom-left-radius: 0.25rem;
		border-bottom-right-radius: 0.25rem;
	}

	.lang-toggle:hover {
		background: #fff;
		color: #003e69 !important;
	}

	body.alt .lang-toggle {
		background: #fff;
		color: #003e69 !important;
		border: solid 1px #fff;
	}

	body.alt .lang-toggle:hover {
		background: #003e69;
		color: #fff !important;
	}
}