@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&display=swap');

	:root {
		--orange: rgb(255, 100, 0);
	}

	body {
		margin: 0;
		padding: 0;
	}

	.Hide {
		display: none !important;
	}

	img#logo {
		width: 25%;
		max-width: 500px;
		min-width: 250px;
	}

	img#welcomeLogo {
		max-width: 300px;
	}

	div#logoBox {
		margin-bottom: 0px;
	}

	button {
		cursor: pointer;
		-webkit-user-select: none;
		/* Safari 3.1+ */
		-moz-user-select: none;
		/* Firefox 2+ */
		-ms-user-select: none;
		/* IE 10+ */
		user-select: none;
		/* Standard syntax */
	}

	button:disabled {
		cursor: auto;
		pointer-events: none;
	}

	button:disabled img {
		opacity: 0.15;
	}

	div#main {
		margin: 0 auto;
		border: none;
		padding: 0;
		text-align: center;
		background-color: white;
		position: relative;
		min-width: 375px;
		min-height: calc(100vh - 22px);
	}

	div#footer {
		margin: 0px auto;
		text-align: center;
		background-color: #999999;
		color: black;
		width: 100%;
		position: absolute;
		bottom: 0;
		min-height: 22px;
	}

	div#appContainer {
		background-color: white;
		padding: 0;
		box-sizing: border-box;
		min-height: 100vh;
		position: relative;
		font-family: sans-serif;
		padding-bottom: 22px;
	}


	.Flex {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.FlexCol {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	div.FieldIconBox {
		display: inline-block;
		position: relative;
		margin: 0;
		padding: 0;
		z-index: 0;
		background-color: white;
	}

	div.FieldInput {
		padding: 10px 10px;
	}

	div#signInPage {
		text-align: center;
	}

	img.FieldIcon {
		position: absolute;
		top: 18px;
		left: 5px;
		z-index: -1;
	}

	button.PasswordVisibility {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 18px;
		right: 5px;
		left: auto;
		border: none;
		background-color: transparent;
	}

	div#pzLocalInstructions {
		padding: 10px;
		border-collapse: collapse;
		box-shadow: 0 0 8px rgb(0 0 0 / 25%);
		border-radius: 15px;
	}

	div#pzLocalInstructions p {
		font-size: 1.2em;
	}

	img.ErrorIcon {
		top: 18px;
		left: 5px;
		z-index: -1;
		vertical-align: middle;
	}

	.AuthInput {
		margin: 5px auto;
		font-size: large;
		width: 300px;
		padding: 10px;
		padding-left: 30px;
		border: 1px solid #aaaaaaaa;
		color: black;
		background-color: transparent;
	}

	img.ButtonIcon {
		vertical-align: middle;
	}

	img.ButtonIcon.Products {
		width: 30px;
	}

	img.FooterIcon {
		width: 8%;
		min-width: 100px;
		padding: 0 10px;
	}

	div#calibrationStepsBox h1,
	h2,
	h3,
	h4 {
		margin: 5px;
		padding: 0;
	}

	form h1,
	h2 {
		text-align: center;
		margin: 5px;
		padding: 0;
	}

	form h3 {
		text-align: center;
		margin: 2px;
		padding: 0;
	}

	textarea#note {
		width: 15vw;
		height: 60px;
		vertical-align: middle;
	}

	button.Close {
		color: #000;
		float: right;
		font-size: 28px;
		font-weight: bold;
		border: none;
		background-color: white;
	}

	button.Close:hover,
	button.Close:focus {
		color: #bbbbbb;
		text-decoration: none;
	}

	div#createMachineForm {
		display: inline-block;
		text-align: right;
	}

	div#confirmationBox {
		border-radius: 15px;
		background-color: white;
		color: black;
		width: 50%;
		margin: 0 auto;
		padding: 5px 15px;
		min-width: 320px;
	}

	button.ConfirmationButton {
		font-size: large;
		border: none;
		/*2px solid #62727b*/
		padding: 10px;
		color: black;
		background-color: #cccccc;
		display: inline-block;
		min-width: 100px;
		margin: 10px;
		border-radius: 5px;
	}

	button.ConfirmationButton:hover {
		background-color: #eeeeee;
	}

	button.ConfirmationButton:disabled {
		background-color: #cccccc !important;
		color: #aaaaaa !important;
		cursor: default;
	}

	div#verifyEmail {
		min-height: 300px;
		height: 66vh;
	}

	div#outboundEmailBackground {
		z-index: 4;
	}

	div.Popup {
		/* TODO this is used for other things */
		position: absolute;
		z-index: 2;
		width: 100%;
		top: 0;
		/*bottom:0;*/
		left: 0;
		right: 0;
		background-color: rgba(200, 200, 200, .8);
		text-align: center;
		height: auto;
		min-height: 100%;
	}

	div.PopupMain {
		max-width: 600px;
		width: 90%;
		min-width: 300px;
		/*background-color:rgb(240,250,255);*/
		background-color: #eeeeee;
		margin: 40px auto;
	}

	div.PopupBox {
		padding: 10px;
	}

	p.PopupNote {
		font-size: small;
		text-align: left;
		margin-left: 20px;
		margin-right: 20px;
	}

	p.PopupP {
		text-align: left;
		margin-left: 20px;
		margin-right: 20px;
	}

	div.PopupField {
		margin: 10px;
	}

	div.PopupFieldLeft {
		text-align: left;
	}

	div.PopupFieldRight {
		text-align: right;
	}

	div.PopupCustomSelect {
		/* TODO this is used elsewhere */
		margin: 0;
		padding: 0;
		display: inline-block;
		position: relative;
		min-width: 125px;
		width: 125px;
		height: 32px;
		vertical-align: middle;
		text-align: center;
	}

	div#signOutBox {
		text-align: right;
		position: relative;
		/* overflow: hidden; */
		height: 32px;
	}

	img#smallLogo {
		width: 8%;
	}

	img#signOutLogo {
		height: 1.9em;
	}

	a#signOutImage {
		position: absolute;
		top: 0;
		left: 0;
		padding: 0 4px;
	}

	button.SignInUp {
		font-size: medium;
		border: none;
		padding: 5px 8px;
		margin-left: 8px;
		min-width: 100px;
		background-color: #bbbbbb;
		border-radius: 4px;
	}

	button.SignInUp.ProductsButtons {
		margin: 10px 0;
		width: 300px;
		font-size: medium;
	}

	button.SignInUp:hover {
		background-color: #cccccc;
	}

	button.SignUp:disabled {
		background-color: #cccccc !important;
		color: #aaaaaa !important;
		cursor: default;
	}

	img.ButtonIconTBottom {
		vertical-align: text-bottom;
	}

	button.SignIn {
		font-size: large;
		border: none;
		padding: 10px;
		margin-left: 5px;
		margin-right: 5px;
		min-width: 200px;
		background-color: #bbbbbb;
		border-radius: 4px;
	}

	button.SignIn:hover {
		background-color: #cccccc;
	}

	button.ListButton {
		font-size: medium;
		padding: 10px;
		color: black;
		background-color: #cccccc;
		display: inline-block;
		min-width: 100px;
		margin: 10px;
		border: none;
		border-radius: 4px;
	}

	button.ListButton:hover {
		background-color: #777777;
	}


	button.SignInStatusBox {
		color: #37474f;
		font-size: medium;
		padding: 5px;
		border: none;
		background-color: #f1f3f4;
	}

	button.SignInStatusBox span {
		font-size: small;
	}

	button#trialVersion.SignInStatusBox {
		color: black;
		font-weight: bold;
		background-color: rgba(255, 0, 0, 0.6);
	}

	button.SignOut {
		font-size: medium;
		border: none;
		padding: 5px;
		color: white;
		min-width: 100px;
		width: auto;
		background-color: #555555;
	}

	button#goBackHistoryPageButton {
		float: left;
	}

	button.SignOut:hover {
		background-color: #cccccc;
	}

	button.Settings {
		background-color: #999999;
		color: white;
		min-width: auto;
		width: auto;
		position: relative;
	}

	button.Settings:disabled {
		background-color: #cccccc !important;
		color: #aaaaaa !important;
		cursor: default;
	}

	button.SmallIconButton {
		font-size: large;
		font-weight: bold;
		border: none;
		padding: 5px;
		min-width: 20px;
		background-color: #bbbbbb;
		border-radius: 5px;
		margin: 0 3px;
	}

	button.SmallIconButton:hover {
		background-color: #cccccc;
	}

	button.SmallIconButton img {
		width: 16px;
	}

	div#historyPage {
		min-width: 320px;
		max-width: 900px;
		margin: 0 auto;
		border: none;
		padding: 20px;
		text-align: center;
		background-color: #eeeeee;
	}

	div#machineHistory {
		overflow: auto !important;
		width: 100%;
		position: relative;
		height: calc(100vh - 54px);
	}

	div#machineHistory p {
		width: auto;
		vertical-align: top;
		padding: 0;
	}

	span.MachineHistoryTextCell {
		display: block;
		padding: 0px 80px;
	}

	table.MachineHistoryMainTable {
		border-top: 1px solid gray;
		margin: 15px auto;
		border-spacing: 1px;
		text-align: left;
		break-inside: avoid;
	}

	table.DeltaTable {
		border-collapse: collapse;
		max-width: 300px;
		text-align: center;
		margin: 10px auto;
	}

	table.DeltaTable td {
		border: 1px solid black;
		padding: 0 5px;
		background-color: white;
		text-align: right;
	}

	table.DeltaTable tr,
	table.DeltaTable th {
		border: 1px solid black;
		padding: 0 5px;
		background-color: #bbbbbb;
		text-align: center;
	}


	img.MachineHistoryImage {
		width: 320px;
		display: block;
	}

	/*MACHINE HISTORY SLIDESHOW*/
	div#toolsSlideshow {
		position: relative;
		margin-left: auto;
		margin-right: auto;
	}

	div.Slide {
		display: block;
	}

	div.Slide img {
		width: auto;
		height: calc(100vh - 120px);
	}

	div.InformationDiv {
		background-color: #fff !important;
		color: #000 !important;
		position: relative;
		margin: 0 auto;
		width: 40vw;
		padding: 20px;
		border-collapse: collapse;
		box-shadow: 0 0 20px rgb(0 0 0 / 10%);
		border-radius: 15px;
	}

	div.InformationDiv span {
		margin: 0 10px;
	}

	button.SlideshowButton {
		border: none;
		background-color: transparent;
		font-size: 3.5vw;
		color: white;
		z-index: 10;
	}

	button.SlideshowButton:hover {
		font-weight: bold;
	}

	button#leftButtonSlideshow {
		position: absolute;
		top: 50vh;
		left: 0%;
		transform: translate(0%, -50%);
	}

	button#rightButtonSlideshow {
		position: absolute;
		top: 50vh;
		right: 0%;
		transform: translate(0%, -50%);
	}

	button#slideshowPopupCloseButton {
		color: white;
		right: 0%;
		font-size: 3vw;
		border: none;
		z-index: 10;
		position: absolute;
		background-color: transparent;
	}

	button#slideshowPopupCloseButton:hover {
		font-weight: bold !important;
	}

	div#historyPagePopup {
		background-color: rgba(100, 100, 100, .99);
	}

	textarea {
		resize: none;
	}

	a.Weblink {
		text-decoration: none;
		color: black;
		font-weight: bold;
	}

	hr#splitLine {
		color: black;
		max-width: 600px;
	}

	hr.SignInPagesplitLine {
		display: inline-block;
		width: 80px;
		margin: 3px;
	}

	table#mainTable {
		width: 100%;
		margin: 0;
		padding: 0;
		border-collapse: collapse;
		height: calc(100vh - 54px);
	}

	table#mainTable td {
		margin: 0;
		padding: 0;
		vertical-align: top;
	}

	td#right {
		position: relative;
		width: 27%;
		background-color: #eeeeee;
		min-width: 375px;
	}

	td#left {
		background-color: #dddddd;
		min-width: 300px;
	}

	div#rightContent {
		vertical-align: top;
		overflow: auto;
		min-width: 375px;
		margin-bottom: 10px;
		padding: 0 15px;
	}

	div#cameraContainer {
		position: relative;
		display: block;
		box-sizing: border-box;
		width: 100%;
		height: calc(100vh - 54px);
		/*Fixes the height resizing */
		max-height: calc(100vh - 54px);
		margin: 0;
		padding: 0;
		background-color: #dddddd;
		overflow: auto;
		overscroll-behavior: contain;
	}

	div#zoomContainer {
		margin: 0;
		padding: 0;
		width: 100%;
		height: auto;
		overflow: hidden;
		position: relative;
		overscroll-behavior: contain;
	}

	div#cameraPopupAndLogoContainer,
	div#inspectionPrintsContainer {
		width: 100%;
		background-color: #dddddd;
	}

	img#cameraContainerLogo {
		position: absolute;
		opacity: 0.3;
		top: 40%;
		transform: translateY(-50%);
		transform: translateX(-50%);
		width: 40%;
		min-width: 250px;
		max-width: 500px;
	}

	button#expandButton {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		border: none;
		background-color: #bbbbbb;
		font-size: x-large;
		font-weight: bold;
		font-family: monospace;
		color: black;
	}

	button#expandButton:hover {
		background-color: #bbbbbb;
		cursor: auto;
	}

	button#expandButton:disabled {
		background-color: #cccccc;
	}

	button#expandButton::after {
		content: '>';
	}

	td.RightExpand {
		width: 20px !important;
		min-width: 20px !important;
		overflow: hidden;
	}

	td.RightExpand button {
		position: absolute;
		top: 0;
		bottom: 0;
	}

	td.RightExpand button::after {
		content: '<' !important;
	}

	td.RightExpand div {
		display: none;
	}

	video#usbCamera,
	video#webCam {
		display: block;
		width: 100%;
		height: auto;
	}

	img#wifiCamera,
	img#freezeFrame {
		display: block;
		width: 100%;
		height: auto;
	}

	canvas {
		position: absolute;
		display: block;
		top: 0;
		/* background-color: rgba(0, 0, 255, 0.1); */
	}

	/*MEDIA QUERIES */
	@media print {

		button,
		div#signOutBox,
		div#footer,
		table#mainTable {
			display: none;
		}


		div#historyPage {
			border: none;
			margin: 0;
			padding: 0;
			height: auto;
			font-size: 0.8rem;
			page-break-after: avoid;
			background-color: white;
		}

		select {
			border: none;
			-webkit-appearance: none;
			appearance: none;
			text-indent: 1px;
			text-overflow: '';
		}
	}

	@media screen and (max-width: 1280px) {

		/* div#app,
		button.SignInUp,
		div.ToolForm .FieldLabel,
		.FieldInput,
		div.InputInspection {
			font-size: 1.1vw;
		} */
	}

	/* Footer changes height at this point */
	@media screen and (max-width: 1038px) {

		#footer {
			font-size: xx-small !important;
		}

		#productsButtons {
			margin-bottom: 15px;
		}
	}

	@media (max-width: 768px) {

		#usernameBox {
			display: none;
		}

		#expandButton {
			font-size: xx-large !important;
		}

		td.RightExpand {
			width: 35px !important;
			min-width: 35px !important;
		}
	}

	/* END OF MEDIA QUERIES */

	select {
		min-width: 70px;
	}

	select#calibrationHistorySelect {
		min-width: 163px;
	}

	div.TextBox {
		margin: 5px;
		padding: 5px;
	}

	div#mainControls {
		font-weight: bold;
	}

	div.ButtonBox {
		margin: 10px;
		padding: 5px;
	}

	div.FlexContainer {
		display: flex;
		justify-content: center;
	}

	div.FlexContainer#wifiCameraControlButtons {
		z-index: 1;
		top: 0;
		left: 0;
		position: absolute;
		margin-top: 35px;
	}

	button.VideoButton {
		background-color: rgba(238, 238, 238, .4);
		height: 25px;
		margin: 5px;
		border: none;
		outline: none;
		border-radius: 5px;
		min-width: 120px;
	}

	button.VideoButton:hover {
		background-color: rgba(238, 238, 238, .8) !important;
	}

	button.VideoButton:disabled {
		background-color: rgba(238, 238, 238, .3);
		color: gray;
	}

	div.FlexChild {
		margin-top: 10px;
	}

	div.FieldBox.ToolForm {
		background-color: #eeeeee !important;
	}

	form .FlexContainer {
		margin: 10px;
	}

	div.SignInButtonBox {
		margin: 5px;
		padding: 5px;
	}

	div#wifiCameraContent {
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 10px;
	}

	div.PopupContent {
		background-color: #fefefe;
		margin: 20px auto;
		padding: 20px;
		border: none;
		width: 30vw;
		min-width: 320px;
		border-collapse: collapse;
		box-shadow: 0 0 20px rgb(0 0 0 / 10%);
		border-radius: 15px;
	}

	div.PopupFieldBox {
		width: 30vw;
		margin: 15px 15px;
	}

	span#reviewNote {
		display: block;
		overflow: auto;
	}

	div.SpinnerBackground {
		background-color: rgba(100, 100, 100, .5);
		/*light gray 50%*/
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 5;
	}

	table.SpinnerTable {
		position: fixed;
		height: 100%;
		width: 100%;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	div.Spinner {
		border: 16px solid #eeeeee;
		border-top: 16px solid #bbbbbb;
		border-radius: 50%;
		width: 120px;
		height: 120px;
		animation: spin 2s linear infinite;
		margin: 0 auto;
	}


	div.FieldBox {
		background-color: #dddddd;
		padding: 10px;
	}

	label.FieldLabel {
		font-size: medium;
		font-weight: bold;
		display: inline-block;
		text-align: right;
		vertical-align: middle;
		min-width: 110px;
	}

	img.FieldIconSmall {
		position: absolute;
		top: 6px;
		left: 5px;
		z-index: -1;
	}

	input.FieldInput {
		font-size: medium;
		min-width: 200px;
		padding: 5px;
		padding-left: 30px;
		vertical-align: middle;
		border: none;
		position: relative;
		background-color: transparent;
		color: black;
	}

	input.FieldInput:disabled {
		color: black;
		background-color: #bbbbbb;
		z-index: -2;
	}

	div#noShopMessage {
		text-align: center;
		margin: 0 auto;
		max-width: 500px;
		padding: 60px;
	}

	div#noShopMessage p {
		text-align: left;
	}

	input.AuthInput#inviteCode {
		width: 125px;
	}

	div.ListBlock {
		background-color: #eee;
		padding: 10px;
		margin: 10px 0;
		text-align: left;
	}

	div.ListBlock li {
		color: black;
	}

	div.InnerListBlock {
		background-color: #555555;
	}

	div.SearchFieldIconBox {
		position: relative;
		margin: 0;
		padding: 0;
		z-index: 0;
		background-color: white;
	}

	input.SearchInput {
		width: 100%;
		font-size: medium;
		color: black;
		background-color: transparent;
		padding: 10px;
		padding-left: 30px;
		border: none;
	}

	img.ListIcon {
		vertical-align: baseline;
	}

	img.FieldIconMedium {
		position: absolute;
		top: 12px;
		left: 5px;
		z-index: -1;
	}

	button.SearchButton {
		width: 100%;
		background-color: #333333;
		color: white;
		font-size: large;
		padding: 10px;
		display: block;
		border: none;
		margin: 10px 0;
	}

	button.SearchButton:hover {
		background-color: #555555
	}

	span#signInMessage {
		font-size: medium;
		color: red;
	}

	input#baselineMeasurementInput::-webkit-outer-spin-button,
	input#baselineMeasurementInput::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	button.BaselineTargets {
		font-size: medium;
		font-weight: normal;
		background-color: #bbb;
		padding: 4px;
	}

	select#measurementUnitSelect {
		margin-left: 35px;
		width: 65px;
	}

	/* Help*/
	html {
		scroll-behavior: smooth;
	}

	div#help {
		padding: 20px;
		text-align: left;
		margin: 0 auto;
		width: 85%;
		max-width: 1700px;
		text-align: center;
		overflow: auto;
		display: flex;
		background-color: #eeeeee;
		min-height: calc(100vh - 54px);
	}

	div#optionsSection {
		width: 300px;
		float: left;
		margin-top: 20px;
		padding: 10px;
	}

	div#contentSection {
		width: 100%;
		padding: 0;
		text-align: left;
	}

	button.helpButton {
		background-color: #bbb;
		padding: 10px;
		width: 180px;
		margin-bottom: 20px;
		border: none;
		font-size: medium;
	}

	button.helpButton:hover {
		background-color: #cccccc !important;
	}

	#help img {
		width: 100%;
		height: auto;
		margin-bottom: 20px;
	}

	#help li {
		margin-bottom: 20px;
	}

	button#scrollUp {
		display: none;
		position: fixed;
		bottom: 20px;
		right: 18px;
		z-index: 99;
		border: none;
		outline: none;
		background-color: rgb(187, 187, 187, .7);
		color: white;
		padding: 15px;
		border-radius: 50px;
		width: 50px;
		height: 50px;
	}

	button#scrollUp:hover {
		background-color: rgb(158, 158, 158);
	}

	button#scrollUp img {
		width: 100%;
		height: 100%;
	}

	ol>li::marker {
		font-weight: bold;
	}

	h1#subscriptionType,
	span#subscriptionBox {
		font-weight: bold;
		margin: 0;
		color: rgb(255, 100, 0);
		font-family: 'EB Garamond', serif;
	}

	span#subscriptionBox {
		color: rgb(255, 100, 0);
		font-weight: bold;
		margin: 0;
		position: absolute;
		bottom: 1px;
		padding-left: 5px;
		text-align: left;
		width: 200px;
		font-family: 'EB Garamond', serif;
	}

	button#upgradeToAdvance {
		position: absolute;
		right: calc(50vw - 85px);
		width: 170px;
		margin-top: 5px;
		border-radius: 5px;
		border: none;
		background-color: rgba(255, 0, 0, 0.5);
		height: 1.5rem;
	}

	button#upgradeToAdvance:hover {
		background-color: rgba(255, 0, 0, 0.6);
	}

	button.GrayedOut {
		background-color: lightgray;
		color: gray;
		cursor: auto;
	}

	div#coordinates {
		display: inline-block;
	}

	/* PLANS PAGE */

	div.ProductBox {
		display: inline-block;
		width: 370px;
		height: 220px;
		vertical-align: top;
		margin: 5px 15px;
		position: relative;
		border-collapse: collapse;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		border-radius: 15px;
	}

	div.ProductBoxLink {
		cursor: pointer;
	}

	div.ProductBox .ProductTitle {
		color: black;
		margin: 20px;
		text-align: center;
		padding: 5px 15px;
	}

	div.ProductBox p {
		margin: 10px 25px;
		text-align: center;
	}

	div#productsWrapper a,
	a:visited,
	a:hover,
	a:active {
		color: inherit;
		text-decoration: none;
	}


	/* INSPECTION */
	div#inspectionInstructionsBox {
		background: transparent;
		height: 20px;
	}

	select.InspectionList {
		min-width: 100px;
	}

	#inspectionDeltaTable {
		font-size: 1.2em;
	}

	#inspectionDeltaTable td,
	#inspectionDeltaTable th {
		padding: 5px !important;
	}

	#inspectionDeltaTable th {
		min-width: 30px;
	}

	#inspectionDeltaTable td {
		min-width: 150px;
		vertical-align: middle !important;
	}

	div#inspectionControlButtons {
		z-index: 1;
		top: 3px;
		left: 0;
		position: absolute;
	}

	div#inspectionControlButtons input {
		background: white;
		margin: 5px;
		height: 20px;
		width: 100px;
		outline: none;
		border: 1px solid transparent;
		text-align: center;
		color: red;
	}

	button.InspectionButton.SignInUp {
		display: block;
		margin: 5px auto;
		border: transparent 2px solid;
		font-size: small;
		min-width: 310px;
		width: 80%;
		position: relative;
		font-size: medium;
	}

	button.InspectionButton.SignInUp.MachineHistoryInspectionButton {
		margin: 15px auto;
		min-width: 400px;
	}

	div#elementsBox {
		overflow: auto;
		height: 40vh;
		background-color: white;
		overscroll-behavior: contain;
		padding: 0 10px;
	}

	div#elementsBox button,
	div#specificationsBox button {
		width: 100%;
	}

	button.SignInUp.Selected {
		background-color: #ffff8d;
		border: #000 2px solid;
	}

	div#inspectionMainButtonsBox {
		margin-top: 2px;
		position: absolute;
		left: 50vw;
		transform: translateX(-50%);
		z-index: 3;
	}

	div#inspectionMainButtonsBox button {
		font-weight: bolder;
	}

	div#inspectionMainButtonsBox img {
		width: 80%;
	}

	button#newBestFitCircleInspection {
		color: cyan;
	}

	button#newBestFitCircleInspection:disabled {
		color: rgba(0, 255, 255, 0.284);
	}

	button.InspectionButton.ToolBarButton {
		min-width: 40px;
		max-height: 28px;
		margin: 0 3px;
		border: none;
		font-size: large;
		border: transparent 2px solid;
		line-height: 14px;
	}

	button.InspectionButton.ToolBarButton.Selected {
		border: 2px solid black;
	}

	button.InspectionButton.ToolBarButton.Active {
		border: 2px solid black;
		background-color: #ddd;
	}

	div#m-page-1 h4 {
		margin: 1px;
	}

	div#inspectionFilters {
		display: flex;
		justify-content: space-evenly;
		position: relative;
		margin: 0;
		padding: 0;
		z-index: 0;
	}

	div#inspectionFilters select,
	div#inspectionFilters input {
		width: 20%;
	}

	select#machinesListHistoryPageInspection:invalid,
	select#machinesListHistoryPageInspection option[value=""] {
		color: lightgrey;
	}

	div#inspectionSummary {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	button#inspectionSummaryButton {
		width: 50px;
		height: 22px;
		border-top-left-radius: 110px;
		border-top-right-radius: 110px;
		border: none;
		border-bottom: 0;
		background-color: rgba(238, 238, 238, .4);
		outline: none;
	}

	div#inspectionSummaryContent {
		margin: auto;
		min-width: 250px;
		padding: 10px 30px;
		background-color: rgba(255, 255, 255, .35);
		min-height: 100px;
	}

	div#inspectionSummaryContent div {
		margin-right: 20px;
	}

	div#inspectionSummaryContent p {
		text-align: left;
	}

	div#inspectionSummaryContent.InspectionSummaryCollapsed {
		display: none;
	}

	span#operatorInspectionSummary,
	span#partNameInspectionSummary,
	td#operatorPrintMainTable {
		text-transform: capitalize;
	}

	/*INSPECTION REPORT TABLES*/
	table#inspectionTable,
	table#specificationsTable,
	table#featureByFeatureTable,
	table#pointsAndGeometriesTable {
		margin: 40px auto;
		min-width: 90%;
	}

	table#inspectionTable td {
		text-align: center;
		min-width: 250px;
	}

	table#inspectionTable tr,
	table#inspectionTable th {
		border: 1px solid black;
		padding: 4px 5px;
		background-color: #bbbbbb;
		text-align: center;
	}

	table#specificationsTable td,
	table#specificationsTable th,
	table#featureByFeatureTable td,
	table#featureByFeatureTable th {
		padding: 4px 5px;
	}

	table#specificationsTable td {
		text-align: left;
	}

	table#specificationsTable th {
		text-align: center;
	}

	td.FeatureByFeatureCell {
		min-width: 200px;
		max-width: 350px;
		text-align: center !important;
		word-wrap: break-word;
	}

	table#featureByFeatureTable {
		border-collapse: collapse;
		text-align: center;
		border: 1px solid black;
	}

	table#featureByFeatureTable th {
		min-width: 200px;
	}

	td#pointsTd,
	td#geometriesTd {
		width: 50%;
		vertical-align: top;
	}

	td#pointsTd {
		border-right: 1px solid grey;
	}

	tr#pointsAndGeometriesData div {
		height: 100%;
	}

	div.InputInspection {
		margin: auto 3px;
	}

	div.InputInspection input {
		width: 50px;
	}

	div#newBestFitCircleInspection {
		position: relative;
		display: inline-block;
	}

	div.InspectionDropdownContent {
		position: absolute;
		background-color: #f1f1f1;
		z-index: 1;
		font-size: small;
		margin-top: 3px;
	}

	div.InspectionDropdownContent button {
		padding: 5px;
		display: block;
		border: none;
		font-size: small;
		font-weight: normal !important;
	}

	div.InspectionDropdownContent button:hover {
		background-color: #ddd;
	}

	span#inspectionInstructions {
		color: cornflowerblue;
		font-size: small;
		font-weight: bold;
	}

	button.ButtonAsLink {
		color: blue;
		background-color: transparent;
		text-decoration: underline;
		border: none;
		margin: 0;
		padding: 0;
		font-family: sans-serif;
		cursor: pointer;
		margin-left: 10px;
		font-size: medium;
	}

	button.ButtonAsLink:hover {
		color: cornflowerblue;
	}

	button#backPrintButton.SignInUp {
		position: absolute;
		top: 7px;
		left: 0;
		height: 25px;
		font-size: small;
		min-width: 25px;
	}

	div#specificationsBox {
		overflow: auto;
		height: 20vh;
		background-color: white;
		width: 100%;
		overscroll-behavior: contain;
		margin: 25px auto;
	}

	div#specificationsPopupContent.PopupContent {
		max-width: 80%;
	}

	img.SpecificationCheckImg {
		float: right;
		width: 15px;
	}

	table#pointsAndGeometriesTable td {
		vertical-align: top !important;
	}

	div#pointsPrint button,
	div#geometriesPrint button {
		border: none !important;
		background: transparent !important;
		font-size: 0.8rem !important;
		width: 95%;
		display: block;
		cursor: auto;
	}

	div.InspectionBox {
		display: block !important;
		width: auto;
		height: auto;
		overflow: visible !important;
	}

	div#printReportPopupContent label {
		min-width: 270px;
		display: inline-block;
		text-align: left;
	}

	div#printReportPopupContent div {
		margin: 5px;
	}

	.FrameText {
		position: absolute;
		right: 5px;
		font-weight: bold;
		background: white;
		padding: 0 5px;
		border-radius: 4px;
		color: black !important;
	}

	.FrameText.ConfirmPoint {
		position: absolute;
		right: 5px;
		font-weight: bold;
		background: white;
		padding: 0 5px;
		border-radius: 4px;
	}

	.FrameText.ConfirmPoint:hover {
		color: cornflowerblue !important;
	}

	span.GeometryText {
		flex: 1;
	}

	button.FrameButton {
		display: flex !important;
		justify-content: center;
		align-items: center;
	}

	button#multiFrameViewButton {
		background: #6495eda6;
	}

	button#multiFrameViewButton:hover {
		background: #6495ed66;
	}

	div#appPopupContent {
		width: 35vw;
		max-height: 80vh;
		overflow: hidden;
	}

	div#appPopupData {
		padding: 10px;
		overflow-y: auto;
		max-height: calc(80vh - 40px);
		box-sizing: border-box;
	}

	.AnchorButton {
		color: white !important;
		background-color: rgb(204, 82, 0);
		font-size: large;
		border: none;
		padding: 10px;
		margin-left: 5px;
		margin-right: 5px;
		min-width: 180px;
		border-radius: 4px;
		cursor: pointer;
		display: inline-block;
		text-decoration: none;
	}

	.AnchorButton:hover {
		background-color: rgb(204, 82, 0, 0.9);
		color: white;
	}

	/* SHOP VISION*/
	#cameraListShopVision {
		height: 60vh;
		overflow: auto;
		background-color: white;
		width: 100%;
		overscroll-behavior: contain;
		margin: 25px auto;
	}

	#cameraListShopVision button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 95%;
	}

	#cameraListShopVision input {
		text-align: center;
		border: none;
		min-width: 200px;
		width: 80%;
		margin: 0 5px;
	}

	#cameraListShopVision input:read-only {
		text-align: center;
		background: none;
		border: none;
		color: black;
		cursor: pointer;
		width: 80%;
		margin: 0 5px;
	}

	#cameraListShopVision input:read-only:focus {
		outline: none;
	}

	.WebcamImgButton {
		border: 1px solid transparent;
		background-color: transparent;
		border-radius: 50%;
		padding: 2px;
	}

	.WebcamImgButton:hover {
		background-color: #ddd;
		border-radius: 50%;
		padding: 2px;
	}

	.WebcamButton div {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
	}

	.WebcamButton span {
		font-size: 11px;
		font-weight: bold;
		margin-right: 5px;
	}