body {
}

:root {
	--header-height: 40px;
	--footer-height: 45px;
	--breadcrump-header-overlay-top: 10px;
	--breadcrump-header-overlay-left: 110px;
}


@media (max-width: 767px) {
	:root {
		--header-height: 70px;
		--breadcrump-header-overlay-top: 27px;
		--breadcrump-header-overlay-left: 2px;
	}
}

	.content-view {
		position: fixed;
		margin: 5px;
		width: 100%;
		top: var(--header-height);
		bottom: var(--footer-height);
		overflow-y: auto;
		overflow-x: hidden;
		z-index: 0;
	}

.breadcrump-header-overlay {
	position: fixed;
	top: var(--breadcrump-header-overlay-top);
	left: var(--breadcrump-header-overlay-left);
	z-index: 2;
	width: 100%;
	margin: 0px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	min-height: 30px;
	overflow: auto;
	list-style: none;
	font-size: 12px;
}

		.breadcrump-header-overlay li {
			display: inline-block;
			color: white;
		}

		.breadcrump-header-overlay a {
			color: white;
			text-decoration: underline;
		}

	/*this came from WrapBootstrap.css which was causing problems with the bootbox.js functionality, so I removed the file and kept this. */
	header {
		border-top: 3px solid #428bca;
		background-color: #212121;
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), color-stop(95%, #262626), to(#0d0d0d));
		background-image: -webkit-linear-gradient(#333333, #262626 95%, #0d0d0d);
		background-image: -moz-linear-gradient(top, #333333, #262626 95%, #0d0d0d);
		background-image: -o-linear-gradient(#333333, #262626 95%, #0d0d0d);
		background-image: linear-gradient(#333333, #262626 95%, #0d0d0d);
		background-repeat: no-repeat;
		height: var(--header-height);
		line-height: 38px;
		vertical-align: middle;
		width: 100%;
		position: fixed;
		top: 0px;
		z-index: 0;
	}

		header .logo {
			max-width: 360px;
			color: #e6e6e6;
			padding-left: 10px;
			font-size: 18px;
			float: left;
		}

		header #mini-nav {
			float: right;
			margin: 0;
			height: 38px;
			line-height: 38px;
			vertical-align: middle;
		}

			header #mini-nav li {
				float: left;
				border-right: 1px solid #1a1a1a;
			}

				header #mini-nav li:last-child {
					border-right: 0;
				}

				header #mini-nav li:first-child {
					border-left: 0;
				}

				header #mini-nav li a {
					display: block;
					padding: 0 10px;
					color: #f2f2f2;
					cursor: pointer;
				}

					header #mini-nav li a [data-icon]:before {
						line-height: 40px;
					}

			header #mini-nav .dropdown .name {
				color: #e84f4c;
			}

			header #mini-nav .dropdown .caret {
				margin-top: 17px;
				border-top: 4px solid #cccccc;
			}

			header #mini-nav .dropdown-toggle {
				padding: 0 12px;
			}

			header #mini-nav .dropdown-menu {
				min-width: 160px;
				margin-right: -1px;
				border: 1px solid #b3b3b3;
				border-top: 0;
			}

				header #mini-nav .dropdown-menu li {
					float: none;
					padding: 2px 0;
					-webkit-border-radius: 0;
					-moz-border-radius: 0;
					border-radius: 0;
					border: none;
					border-bottom: 1px dotted #d9d9d9;
				}

					header #mini-nav .dropdown-menu li a {
						color: black;
					}

					header #mini-nav .dropdown-menu li:hover {
						background: #d9d9d9;
					}

					header #mini-nav .dropdown-menu li:last-child {
						border-bottom: 0;
					}


	.div-calc-TA-NAOH {
		display: none;
		position: absolute;
		z-index: 1;
	}

	.ModalWindow {
		display: none;
		box-shadow: 10px 10px 5px #888888;
		z-index: 5;
		position: absolute;
		overflow: hidden;
		border: none;
		/*background-color:White;   don't make this white, make sure you make the contents white, otherwise there will be a ugly white edge on all modals */
	}


	.ModalWindowBackground {
		position: fixed;
		top: 0;
		left: 0;
		border: none;
		background-color: #666666;
		opacity: 0.5;
		filter: alpha(opacity=50);
	}

	.small-thumbnail {
		width: 50px;
		height: 50px;
	}

	.spinner-icon {
		content: url(/Content/spinner.gif);
		width: 20px;
		height: 20px;
	}


	.scrollable-table {
		overflow-x: auto;
	}

	.toolbar-footer {
		position: fixed;
		bottom: 0px;
		height: var(--footer-height);
		left: 0px;
		overflow-x: hidden;
		width: 100%;
		background-color: rgba(230, 230, 230, 0.7);
	}

		.toolbar-footer button {
			margin-top: 5px;
			padding-left: 10px;
			padding-right: 10px;
		}

		.toolbar-footer .dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
			bottom: var(--footer-height);
			z-index: 1000;
			position: fixed;
		}


	.vine-button {
		min-width: 50px;
		margin-bottom: 15px;
	}