html, body {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
	padding-top: env(safe-area-inset-top);
}

h1:focus {
	outline: none;
}

a, .btn-link {
	color: #0071c1;
}

.btn-primary {
	color: #fff;
	background-color: #1b6ec2;
	border-color: #1861ac;
}

.content {
	padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
	outline: 1px solid #26b050;
}

.invalid {
	outline: 1px solid red;
}

.validation-message {
	color: red;
}

#blazor-error-ui {
	background:rgba(0, 0, 0, 0.1);
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 1.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

	.blazor-error-boundary::after {
		content: "An error has occurred."
	}

/* customisations */

:root {
	--company-color-primary: #f7941e;
	--company-heading-primary: #ffc107;
	--card-header-colour: rgb(3,65, 114);
	--take5-icon-bg-colour: rgb(194, 180, 172);
	--take5-hover-colour: rgb(194, 180, 172, .2);
}

body, html, .container .appcontainer {
	height: 100% !important;
}

.container {
	flex-grow: 1;
}

body, html {
	background-color: var(--bs-gray-100);
	width: 100%;
}

.icon {
	padding-left: 1em;
	height: 2em;
}

.icon-sml {
	height: 1rem;
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 0;
}



.card {
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.card-header {
	background: var(--card-header-colour) !important;
	color: white;
	font-weight: bold;
}

.take5-icon {
	max-height: 3rem;
	max-width: 3rem;
}

.w-2 {
	width: 2%;
}

.w-5 {
	width: 5%;
}

.w-10 {
	width: 10%;
}

.w-15 {
	width: 15%;
}

.w-20 {
	width: 20%;
}

.w-30 {
	width: 30%;
}

.w-40 {
	width: 40%;
}

.w-50 {
	width: 50%;
}

.w-70 {
	width: 70%;
}

.w-80 {
	width: 80%;
}

.w-85 {
	width: 85%;
}

.w-90 {
	width: 90%;
}

div.dataTables_wrapper > div:first-of-type {
	display: none;
}

label.required::after {
	content: ' *';
	color: red;
}

.btnRadioGroup {
	min-width: 70px;
}

tr.trExpired {
	color: var(--bs-warning);
}

tr.trArchived {
	color: var(--bs-danger);
}

.pointer {
	cursor: pointer;
}

.cbIsHeading {
	position: relative;
	top: -4px;
}

.spTake5TableHeading {
	position: relative;
	left: -50px;
}

.previewCompanyLogo {
	max-height: 2em;
}

.card-companylogo {
	max-width: 12rem;
}

.completeTake5Logo {
	height: 2rem;
	margin-right: 1rem;
}

.logoPreview {
	max-height: 2em;
}

#progress {
	background-color: #d9d9d9;
	border-radius: 5px;
	padding: 0;
	margin: 0;
}

	#progress > .bar {
		width: 0%;
		height: 10px;
		background-color: #28a745;
		border-radius: 5px;
	}

.full-sk-wave {
	position: fixed;
	background-color: black;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 70%;
	z-index: 100;
	display: flex;
}

	.full-sk-wave .sk-wave {
		margin-top: auto;
		margin-bottom: auto;
	}

		.full-sk-wave .sk-wave .sk-wave-rect {
			background-color: white;
		}

.btn-result {
	min-width: 6rem;
}

.tbTableSearch {
	min-width: 1rem;
	margin-left: 1rem;
}

.grow, .grow-lg {
	display: inline-block;
	transition: all .3s ease-in-out;
}

.grow-on-hover:hover .grow {
	transform: scale(1.2) rotate(20deg);
	color: var(--bs-blue) !important;
}

.grow-on-hover:hover .grow-lg {
	animation: pulse 1s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(1.2);
	}

	50% {
		transform: scale(1.6);
	}

	100% {
		transform: scale(1.2);
	}
}

/*
    .noCSVExport::after, .noCSVExport:before{
    content:'' !important;
}*/

.mobile-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: .5rem;
	padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
	background-color: var(--bs-gray-dark);
	position: fixed;
	bottom: 0;
	left: 0;
	color: white;
	font-size: 1.5rem;
	z-index: 100;
}

	.mobile-footer a {
		text-decoration: none;
		color: white;
		margin-left: auto;
		margin-right: auto;
	}

.mobile-body {
	padding-bottom: calc(5rem + env(safe-area-inset-bottom));
	margin: .5rem;
	height: 100%;
	overflow: auto;
}

.spTake5TableHeading {
	position: relative;
	left: -50px;
}

.hierarchy {
	display: flex;
}

	.hierarchy label {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .9rem;
		font-weight: bold;
		min-width: 3rem;
		height: 2.2rem;
		margin: .3rem;
		border-radius: 1rem;
		text-align: center;
		padding: 1rem;
		color: white;
		opacity: .2;
		user-select: none;
		transition: all 1s;
		margin: auto;
	}

	.hierarchy input[type=radio], .hierarchy input[type=radio] + label span {
		display: none;
	}

		.hierarchy input[type=radio]:checked + label span {
			display: initial;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.hierarchy input[type=radio]:checked + label {
			opacity: 1;
			transform: scale(110%);
		}

.eliminate + label {
	background-color: darkgreen !important;
}

.substitute + label {
	background-color: lightseagreen !important;
}

.isolation + label {
	background-color: cornflowerblue !important;
}

.engineering + label {
	background-color: goldenrod !important;
}

.administration + label {
	background-color: darkorange !important;
}

.ppe + label {
	background-color: orangered !important;
}

.matrix {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	text-align: center;
	color: white;
	border-radius: 3rem;
}

	.matrix div {
		display: flex;
		align-items: center;
		justify-content: center;
		border: solid 1px white;
	}

.matrix-label {
	background-color: dimgrey;
	line-height: 1;
	font-size: .8rem;
	padding: .3rem;
}

.matrix-red label, .matrix-orange label, .matrix-green label {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	opacity: .2;
	width: 100%;
	height: 100%;
	font-weight: bold;
	user-select: none;
	padding: .2rem;
	transition: all 1s;
}

.matrix-red label {
	background-color: red;
}

.matrix-green label {
	background-color: darkgreen;
}

.matrix-orange label {
	background-color: orange;
}

.matrix input {
	display: none;
}

	.matrix input[type='radio']:checked + label {
		opacity: 1;
	}

		.matrix input[type='radio']:checked + label::before {
			content: '\F26A';
			display: inline-block;
			font-family: bootstrap-icons !important;
			font-style: normal;
			font-weight: normal !important;
			font-variant: normal;
			text-transform: none;
			line-height: 1;
			vertical-align: -.125em;
			-webkit-font-smoothing: antialiased;
			margin-right: .4rem;
		}


.grid-x-2 {
	display: grid;
	grid-template-columns: 1fr 2fr;
}

	.grid-x-2 div {
		margin-bottom: .5rem;
	}

.risk-matrix {
	display: grid;
	gap: .3rem;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.t5-block {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-weight: bold;
	align-items: center;
	padding: 1rem;
	border-radius: 1rem;
	font-size: 1.5rem;
	color: white;
	margin: 1rem;
	background-color: red;
	min-width: 15%;
}

	.t5-block img {
		max-height: 5rem;
	}



.warning-popup .modal-header {
	color: white !important;
	background-color: var(--bs-orange);
	padding: .1rem 1rem;
}

.instructions-popup .modal-header {
	background-color: var(--bs-warning);
	padding: .5rem 1rem;
}

.addcontrol-popup .modal-header {
	background-color: var(--bs-gray-400);
	padding: .5rem 1rem;
}

.dots {
	display: flex;
	border: solid 1px var(--bs-gray-500);
	border-radius: 1rem;
	padding-left: .2rem;
	padding-right: .2rem;
	background: var(--bs-gray-200);
	margin-top: .15rem;
}

.dot-red, .dot-green {
	width: .9rem;
	aspect-ratio: 1;
	margin: .1rem;
	border-radius: 50%;
}

.dot-red {
	background: var(--bs-red);
}

.dot-green {
	background: var(--bs-green);
}

.take5-card {
	border: solid;
	border-color: var(--take5-icon-bg-colour);
	display: flex;
	text-decoration: none;
	border-radius: .5rem;
	text-align: center;
	height: 100%;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
	transition: all .2s ease-in-out;
}

	.take5-card:hover {
		border-radius: 1rem;
		background: var(--take5-hover-colour);
		box-shadow: 0 .1rem .5rem rgba(0,0,0,.15) !important;
		transform: scale(1.01);
	}

	.take5-card .take5-label {
		align-content: center;
		padding: 1rem;
		margin: auto;
		font-size: 1.5rem;
		color: black;
		font-weight: bold;
		text-decoration: none;
	}

.card-icon {
	display: flex;
	border-radius: 1rem;
	width: 10rem;
	height: 100%;
}

	.card-icon img {
		max-width: 100%;
		max-height: 6rem;
		min-width: 5rem;
		margin: auto;
		padding: .5rem;
	}

.hazob {
	border: solid;
	border-top: 0;
	color: var(--bs-gray-600);
	text-align: center;
	border-color: var(--take5-icon-bg-colour);
	background-color: rgb(237 229 210);
	padding: .5rem;
	text-decoration: none;
	border-radius: 0 0 .5rem .5rem;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
	transition: all .2s ease-in-out;
	margin-right: 1rem;
}
	.hazob:hover {
		color: var(--bs-gray-60);
		box-shadow: 0 .1rem .5rem rgba(0,0,0,.15) !important;
		transform: scale(1.01);
		opacity: .8;
	}

.hoc-triangle {
	max-width: 20rem;
	margin-left: auto;
}

.hoc-triangle .st0 {
	fill: #A9D2D4;
}

.hoc-triangle .st1 {
	fill: #9AC1C3;
}

.hoc-triangle .st2 {
	fill: #8AADB0;
}

.hoc-triangle .st3 {
	opacity: 0.5;
	fill: #ED1C24;
}

.hoc-triangle .st4 {
	fill: #FFFFFF;
}



g #H1, g #H2, g #H3, g #H4, g #H5, g #H6 {
	opacity: 0;
}

	#H1:hover, #H2:hover, g #H3:hover, g #H4:hover, g #H5:hover, g #H6:hover {
		opacity: 0.5;
	}

.triangleHover { opacity: 0.5 !important; }

.accordion-button {
	background-color: var(--bs-gray-200);
}

@media (max-width: 768px) {
	.card-icon {
		max-height: 5rem !important;
	}

	.take5-card {
		flex-direction: column;
		align-items: center;
	}
}


/* mobiles*/
@media (max-width: 992px) {
	.hideMedium {
		display: none !important;
	}
}

@media (max-width: 768px) {
	html {
		font-size: 14px !important;
	}

	.hidesmall, .tbTableSearch {
		display: none !important;
	}

	.spTake5TableHeading {
		position: relative;
		left: 0px !important;
	}

	.users-icon {
		margin-left: 0px;
	}

	.nav-link {
		padding-left: 1rem !important;
		color: black !important;
	}

	.mobile-footer {
		padding: .5rem !important;
		padding-bottom: calc(.5rem + env(safe-area-inset-bottom)) !important;
		font-size: 1rem !important;
	}

	.mobile-body {
		padding-bottom: calc(5rem + env(safe-area-inset-bottom)) !important;
		margin: .5rem !important;
	}

	.fs-5 {
		font-size: 1rem !important;
	}

	.fs-6 {
		font-size: .7rem !important;
	}

	input[type="date"] {
		height: 2.6rem;
		line-height: 1rem;
		margin: auto;
		padding: 0.75rem .2rem;
		background-color: white;
	}

	td[data-cell] {
		display: grid;
		grid-template-columns: 12ch auto;
		border: none;
		padding: 0 1rem;
		text-align: left !important;
	}

		td[data-cell]:last-child {
			padding-bottom: 1rem;
			border-bottom: solid 1px;
		}

		td[data-cell]:first-child {
			padding-top: 1rem;
		}

		td[data-cell]::before {
			content: attr(data-cell) ": ";
			font-weight: 700;
			text-transform: capitalize;
		}

	.t5-block {
		margin: .3rem !important;
		font-size: 1rem;
		flex-wrap: wrap;
		padding: .5rem
	}

		.t5-block img {
			height: 3rem;
			max-width: 100%;
		}
}

@media (min-width: 768px) {
	.hideIfLarge {
		display: none !important;
	}
}


.uploadedImgThumb, .image-thumb img {display:inline-block; max-width: 60px; max-height: 60px; }