/** Screen size standards
When accounting for smaller screem sizes, ensure you use one of the following screen sizes:
1900px, 1110px, 850px. 600px, 480px
**/

/****************************************************************************************************************
 *   Page structural elements 
 ****************************************************************************************************************/

@font-face {
	font-family: 'Lato';
	src: url('/webfonts/Lato-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Lato';
	src: url('/webfonts/Lato-Bold.ttf') format('truetype');
	font-weight: bold;
}
@font-face {
	font-family: 'Lato';
	src: url('/webfonts/Lato-Italic.ttf') format('truetype');
	font-style: italic;
}
@font-face {
	font-family: 'Lato Light';
	src: url('/webfonts/Lato-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'Lato Light';
	src: url('/webfonts/Lato-LightItalic.ttf') format('truetype');
	font-style: italic;
}

html {
	position: relative;
	min-height: 100%;
	font-family: 'Lato', sans-serif;
	font-size: 12px;
}

.pageBody {
	overflow-x: auto;
}

header {
	position: fixed;
	top: 0;
	z-index: 2;
	width: 100%;
}

.wrapper {
	margin-top: 0;
	top: 0;
}

/* Centered content div, intended to be directly inside a wrapper div. */
.content {
	padding-top: 5rem;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	min-height: 300px;
	position: relative;
}
@media only screen and (max-width: 600px) {
	.content {
		padding-top: 0;
		overflow-x:hidden;
	}
}

.action-button{   
	padding: 2px;
	font-size: 2em;
	color: var(--primary);   
}

.action-button:hover {
	opacity: 0.75;
}

.action-list {
	background-color: white;
	display:none;
	right: 33%;
	top: 30%;
	position: absolute;
	height: auto;
	width:  17%;
	margin: 0;
	padding-top: var(--size-5);
	padding-bottom: var(--size-5);
	border-width: .3rem;
	border-radius: var(--size-6);
	border: solid var(--size-1) black;
	transform: rotate(0deg); 
}

.action-list-item {
	background-color: white;
	cursor: pointer;
	transform: rotate(0deg); 
	width: 100%;
	height: auto;
	opacity: 1.0;
	font-family: "Segoe UI", Helvetica, Arial, serif;
	font-weight: 400;
	font-style: normal;
	font-size: var(--size-7);
	color: rgba(34, 123, 153, 1.0);
	text-align: center;
	padding-top: .8rem;
	padding-bottom: .8rem;
	display: inline-block;
	overflow: hidden;
}

.action-list-item:hover {
	opacity: 0.75;
}

.action-list-item:active {
	opacity: 0.40;
}

/* Container for the application/component title within the header bar. */
.title {
	padding-top: 28px;
	padding-left: 150px;
	color: #fff;
}

/* The first part of the title - generally the name of the app. */
.title_1 {
	font-size: 22px;
	text-transform: none;
	line-height: 10px;
}

/* The second part of the title - generally the name of the component (ex: Enterprise Resource Planning). */
.title_2 {
	font-size: 26px;
	text-transform: none;
	line-height: 26px;
	padding-left: 60px;
	font-stretch: semi-expanded;
}

/* Navigation breadcrumb bar. */
div.breadcrumb {
	position: relative;
	background-color: #eee;
	width: 100%;
	text-align: left;
	font-style: italic;
	font-size: 1.2rem;
	color: #7F7F7F;
	text-align: left;
	line-height: 1.95rem;
	border-bottom: 0.075rem solid #ccc;
	vertical-align: middle;
	height: 3.2rem;
	padding: 0.26rem 0.30rem 0.15rem 0.75rem;
	z-index: 0;
}
div.breadcrumb-content {
	float: left;
	margin-top: 0.3rem;
}

div.breadcrumb.viewing-as-customer {
	padding: 0 0;
	height: 2.5rem;
}

/* An emphasized warning message at the top of the page.  Intended to warnings that we don't want the user to miss
   and that will likely apply to every page. (For example, the user is using an unsupported browser.) */
.emphasized_warning {
	border-style: solid;
	border-width: 0.075rem;
	border-color: #aaa;
	padding: 0.30rem;
	color: #f00;
	background-color: #fee;
	text-align: center;
}

.popout-image-style {
	margin-top: 0.375rem;
	margin-right: 1rem;
	color: #227B99;
}
.user-profile-schematic {
	font-size: 1rem;
	font-weight: normal;
}
.drag-drop-file {
	color: #707070;
}

/*******************************
 *  USER SETTINGS PAGES
 *******************************/
.user-profile-settings-title {
	font-size: 2.4rem;
	font-weight: normal;
	color: black;
	float: left;
	padding-left: 6rem;
}

.user-profile-settings-container {
	border: 1px solid #707070;
	border-radius: var(--size-6);
	margin: var(--size-6) 6rem;
	padding: var(--size-9) 5rem;
	padding-bottom: var(--size-8);
	font-size: 2rem;
}

.user-profile-settings-table {
	position: relative;
	text-align: left;
	min-width: 16.5rem;
	width: 100% !important;
	padding-right: 15rem;
}

.user-profile-settings-container td {
	padding-left: 0.375rem;
	vertical-align: bottom;
}

.user-profile-settings-container span.checkbox-round {
	transform: scale(1.8);
}

.user-profile-settings-container label {
	margin-left:1.6rem;
}

.user-profile-settings-container input:not([type='submit']) {
	border: 1px solid #CCC;
	width: 16.5rem;
}

.user-profile-settings-container .left_aligned {
	line-height: 2rem;
}

.user-profile-settings-container input:disabled {
	-webkit-appearance: none;
	-moz-appearance: none;
	opacity: 0.5;
}

.user-profile-settings-container .column-label {
	display: block;
	color: #227b99;
	font-size: 1.67rem;
	padding-top: 1.2rem;
	padding-bottom: 0.8rem;
}

.user-profile-settings-button-container {
	text-align: right;
	padding-right: 15rem;
	margin-top: 3.5rem;
}

.user-profile-settings-button-container button,
	.user-profile-settings-button-container input[type="submit"] {
	font-size: 1.5rem;
}

@media only screen and (max-width: 1000px) {
	.user-profile-settings-title {
		font-size: 1.6rem;
		font-weight: normal;
		color: black;
		float: left;
		padding-left: 1rem;
		padding-top: 2rem;
	}

	.user-profile-settings-container {
		margin: 1rem;
		padding: 1rem;
		padding-bottom: 2rem;
		font-size: 1rem;
	}

	table.user-profile-settings-table {
		border-collapse: separate;
		border-spacing: 0 4rem;
	}
	table.user-profile-settings-table.narrow {
		width: auto;
		margin: auto;
	}
	
	table.user-profile-settings-table.narrow td {
		max-width: 58.33rem;
		display: flow-root;
		margin-bottom: 1rem;
	}
	
	table.user-profile-settings-table.narrow td.left_aligned {
		line-height: 0;
	}

	.user-profile-settings-container span.checkbox-round {
		transform: scale(1);
	}

	.user-profile-settings-container label {
		margin-left: 0.2rem;
		line-height: 1.1;
	}

	.user-profile-settings-container .column-label {
		font-size: 1rem;
	}

	input.full-width {
		width: 100% !important;
	}

	.user-profile-settings-button-container {
		text-align: center;
		margin-left: 6rem;
		margin-top: 0 !important;
	}
}

/*******************************
 *  HEADER STRUCTURAL ELEMENTS
 *******************************/
.close-circle {
	color: #707070;
}

.new-ui-topheader {
	display: inline-flex;
	width: 100%;
	height: 4.5rem;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: #878a91;
	vertical-align: middle;
}

.new-ui-topheader.sidebar-collapsed {
	transition: padding-left .5s;
	padding-left: 5.66rem;
}

.new-ui-topheader.sidebar-expanded {
	transition: padding-left .5s;
	padding-left: 27rem;
}

.master-container {
	top: 0;
	height: 100%;
	box-sizing: border-box;
	width: 100%;
	position: absolute;
	margin: 0;
	left: 0;
	border-style: solid;
	border-width: 0.075rem;
	border-color: rgba(112, 112, 112, 1);
	transform: rotate(0deg);
	opacity: 1;
}

.about-line {
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 1rem;
	width: 100%;
	font-family: 'Lato', sans-serif;
}

.contact-line {
	font-size: 1.5rem;
	color: black;
	margin: 1rem;
}
.contact-line:first-child {
	margin-top: 2rem;
	margin-bottom: 1.5rem;
}
.contact-line div:first-child {
	margin-bottom: 1rem;
}
.contact-line #contact-us-email-address {
	color: var(--primary);
	text-decoration: underline;
}
.contact-line #contact-us-phone-number {
	color: var(--primary);
}

.new-logo {
	background-color: rgba(255, 255, 255, 0);
	margin-top: -0.6rem;
}
@media only screen and (max-width: 600px) {
	.new-logo {
		max-width: 12rem;
	}
}

.imageStyle {
	position: relative;
	top: 0.375rem;
	left: 0.375rem;
}

#new-toprightnav {
	display: inline-flex;
	float: right;
	text-align: right;
	position: absolute;
	right: 1rem;
	height: 4.5rem;
	vertical-align: middle;
}

#new-topleftnav {
	text-align: left;
	width: 15%;
	display: inline-block;
	vertical-align: middle;
}

i.far.fa-plus-square, i.far.fa-minus-square {
	font-size: 2.2rem;
	padding-right: 1rem;
}

.fa-stack .header-icon-background {
	opacity: 0.0;
}

.fa-stack:hover .header-icon-background {
	opacity: 1.0;
	color: #ACAEB3;
	-webkit-text-stroke-width: 0.45rem;
	-webkit-text-stroke-color: #ACAEB3;
	transition: opacity 0.5s ease;
	z-index: 2;
}

.fa-stack .close-dialog-overlay {
	color: #227b99;
	font-style: normal;
}

.close-icon {
	font-size: 3.67rem;
}

button.close-dialog-button {
	position: absolute;
	right: -2.2rem;
	top: -1.65rem;
	z-index: 5;
}

.fa-stack .close-dialog-overlay-bg {
	color: #FFFFFF;
	-webkit-text-stroke-width: 0.08rem;
	-webkit-text-stroke-color: #555555;
}
.fa-stack .close-dialog-overlay {
	margin-left: 0.2rem;
}

.header-dialog-button {
	border: none;
	background: none;
	font-size: 2.8rem;
	vertical-align: middle;
	color: #EFEFEF;
	text-align: center;
	vertical-align: middle;
	transition: color 0.5s ease;
	margin-top: auto;
	margin-bottom: auto;
	padding: 0.2rem;
}

.header-dialog-button:hover {
	color: #FFFFFF;
	cursor: pointer;
}

.header-dialog-button .header-icon {
	z-index: 2;
}

.header-dialog-button:active {
	border-color: #707070;
}

.header-dialog-button:focus {
	outline: none;
}

.header-dialog-button .fa-stack {
	width: 3.2rem;
	height: 2.5rem;
	line-height: 2.0rem;
}

.badge {
	display: block;
	position: absolute;
	background-color: #D07B18;
	text-align: center;
	min-height: 1.5rem;
	min-width: 1.5rem;
	line-height: 1.5rem;
	font-size: 1rem;
	border-radius: 1rem;
	color: white;
	z-index: 2;
	padding: 0 0.06rem 0.07rem 0.05rem;
}

.two-character-badge {
	min-height: 1.3rem;
	min-width: 1.8rem;
	line-height: 1.3rem;
	padding: 0 0.15rem 0.1rem 0.1rem;
}

.three-character-badge {
	min-height: 1.3rem;
	min-width: 2.2rem;
	line-height: 1.3rem;
	border-radius: 0.75rem;
	padding: 0 0.05rem 0.08rem 0.15rem;
}

.header-dialog-button .badge {
	margin-left: 1.4rem;
	margin-top: -3.6rem;
	border: 0.075rem solid #707070;
}

.header-dialog {
	display: none;
	position: fixed;
	z-index: 3;
	padding-top: 7.5rem;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: transparent;
}

.header-dialog
div.header-dialog-content {
	position: fixed;
	background-color: white;
	margin: auto auto 0.5rem;
	border-radius: 1rem;
	box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.7), inset 0 0 0 0.08rem #a8a8a8;
}

.header-dialog
div.header-dialog-content
div.header-dialog-body {
	text-align: left;
	border-top: 0;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	padding-bottom: 0.5rem;
}

div.notification-body{
	width: inherit !important;
}

.header-dialog
div.header-dialog-content
div.header-dialog-header {
	background-color: #227b99;
	color: white;
	border: #707070;
	text-align: left;
	min-width: min-content;
	min-height: 4.45rem;
	font-size: 1.7rem;
	padding-top: 1.2rem;
	padding-left: 0.90rem;
	font-weight: 600;
	border-radius: 1rem 1rem 0 0;
	margin-bottom: 0.75rem;
	font-style: normal;
	box-shadow: inset 0 0 0 0.08rem #a8a8a8;
}

.header-dialog
div.header-dialog-content
div.header-dialog-header
span.close-dialog
.close-dialog-button {
	border-radius: 50%;
	position: fixed;
	top: 10rem;
	right: 10rem;
	z-index: 5;
}

.header-dialog
div.header-dialog-content
div.header-dialog-header
span.close-dialog {
	background-color: #ffffff;
	color: #227b99;
	float: right;
	font-weight: bold;
	border: #707070;
}

.header-dialog 
div.header-dialog-content 
div.header-dialog-header 
span.close-dialog:hover, 
.header-dialog 
div.header-dialog-content 
div.header-dialog-header 
span.close-dialog:focus {
	color: #227b99;
	text-decoration: none;
	cursor: pointer;
}

div.header-collapse-table {
	border-radius: 0.375rem;
	border: 0.075rem solid #a8a8a8;
	margin-bottom: 0.75rem;
	margin-left: 0.75rem;
	margin-right: 0.75rem;
	padding-top: 0.625rem;
	padding-left: 0.5rem;
	box-shadow: 0.1rem 0.1rem 0.5rem rgba(0,0,0,0.2);
	-moz-box-shadow: 0.1rem 0.1rem 0.5rem rgba(0,0,0,0.2);
	-webkit-box-shadow: 0.1rem 0.1rem 0.5rem rgba(0,0,0,0.2);
	-o-box-shadow: 0.1rem 0.1rem 0.5rem rgba(0,0,0,0.2);
}

.fixed-width-header-dialog {
	width: 40rem;
}
.wide-fixed-width-header-dialog {
	width: 51rem;
}

.popout-link {
	text-decoration: none;
	color: #222533;
	font-family: 'Lato', sans-serif;
	font-size: 1.7rem;
	font-style: normal;
	font-weight: 100;
}
.popout-link:not(.popout-link-mobile) {
	padding-left: 4.5rem;
	position: relative;
	display: inline-block;
}
.popout-link-mobile {
	position: absolute;
	width: max-content;
}

@-moz-document url-prefix() {
	.popout-link {
		vertical-align: middle;
	}
	.header-dialog
	div.header-dialog-content
	div.header-dialog-body
	div.header-collapse-table {
		padding-top: 0.25rem;
	}
}
.popout-link:hover {
	text-decoration: none;
}

.popout-icon-link {
	text-decoration: none;
	font-size: 2.4rem;
	vertical-align: middle;
	margin-right: 0.6rem;
	color: #227b99;;
}

.popout-icon-link:hover {
	text-decoration: none;
}

.stack-character {
	font-size: 1.25rem;
	margin-top: -0.19rem;
	display: block;
	color: var(--primary);
	font-family: 'Lato', sans-serif;
}

.stack-character-white {
	font-size: 1.5rem;
	font-family: 'Lato', sans-serif;
	margin-top: -0.15rem;
	display: block;
	color: #ffffff;
}

.stack-corner {
	font-size: 0.6rem;
	margin-top: 0;
	margin-left: 0.675rem;
	display: block;
}

.narrow-stack {
	display: inline-block;
	height: 2.7rem;
	line-height: 2rem;
	position: relative;
	vertical-align: middle;
	width: 4rem;
}
.header-collapse-table .narrow-stack {
	position: absolute;
	padding-top: 0.25rem;
}

.instructions-header.popup-instructions-header > a.popout-icon-link > .narrow-stack {
	line-height: 2.3rem;
}

div.profile-content {
	left: 19%;
}

.screen-help-button {
	margin: 0;
	position: absolute;
	top: 50%;
	right: 1.3rem;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	float: right;
	border: none;
	background: none;
	margin-right: 0.4rem;
}

.screen-help-button:focus {
	outline: none;
	background: none;
}

.screen-help-button:hover {
	background: none;
	cursor: pointer;
}

#header-logo-container {
	text-align: center;
	vertical-align: middle;
	margin: auto auto;
	letter-spacing: 0.4rem;
	font-weight: 100;
	padding-top: 0.9rem;
	padding-bottom: 0.4rem;
}

#header-logo-container .sup {
	position: relative;
	font-size: 0.6rem;
	line-height: 0;
	vertical-align: baseline;
	top: -1.9rem;
	left: -1.4rem;
	font-family: sans-serif;
	letter-spacing: 0rem;
}

#header-logo-container img {
	height: 3.5rem;	
}

.header-environment-text {
	font-size: 4.35rem;
	font-family: garamond-premier-pro-display, serif;
	font-style: normal;
	font-weight: 300;
	color: #EEEEEE;
	line-height: 1rem;
	letter-spacing: 0.3rem;
}

.header-environment-text:hover {
	text-decoration: none;
}

.fa-stack .help-icon-background, .help-icon-symbol, .help-icon-border {
	color: #ACAEB3;
}

.fa-stack .help-icon-border {
	opacity: 0.0;
}

.fa-stack:hover .help-icon-background {
	color: #ffffff;
	transition: color 0.2s ease;
}

.fa-stack:hover .help-icon-border {
	opacity: 1.0;
	color: #ACAEB3;
	-webkit-text-stroke-width: 0.3rem;
	-webkit-text-stroke-color: #ACAEB3;
	transition: color 0.2s ease;
}

.fa-stack:hover .help-icon-symbol {
	color: #ffffff;
	transition: color 0.2s ease;
}

.help-icon {
	float: right;
	right: -0.5rem;
	top: 0.1rem;
	font-size: 1.2rem;
}

.header-instructions-border {
	border-collapse: collapse;
	border-radius: 0.7rem;
	border: 0.075rem solid #707070;
	padding-top: 0.3rem;
	padding-left: 0.3rem;
	padding-bottom: 0;
	font-size: 1.2rem;
	font-family: 'Lato', sans-serif;
	margin-bottom: 1.4rem;
	margin-left: 0.75rem;
	margin-right: 0.75rem;
	cursor: pointer;
	box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
	-o-box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
}

.header-instructions {
	padding-left: 13.5rem;
}

.ui-dialog .ui-dialog-title {
	font-size: 1.5rem;
}

.ui-dialog, .ui-dialog-content {
	min-width: 27.75rem !important;
	overflow: unset !important;
}

.ui-widget-header {
	color: #ffffff;
}

.upload-named-document-table {
	width: 100%;
}

.upload-named-document-table td.label {
	padding-right: 0;
	padding-bottom: 1rem;
}

.upload-named-document-table div.drag_and_drop_files {
	padding-left: 3.6rem;
}

#customUploadButton label:hover {
	cursor: pointer;
}

.business-control-button {
	background-color: #227B99;
	text-align: center;
	border: none;
	background: #227B99;
	color: white;
	border-radius: var(--size-4);
	margin-left: 50%;
}
.business-control-button:hover {
	background-color: #aaa;
}
.business-control-button:hover::after {
	content: "Sample";
}

.button:hover {
	cursor: pointer;
}

@media only screen and (max-width: 1000px) {
	.wide-header-dialog {
		width: 37rem;
	}

	.notification-content {
		width: 30rem;
	}

	.notification-message-row {
		width: 30rem;
	}

	#instant-notifications-content .notification-message {
		max-width: 26rem !important;
	}
}

@media only screen and (max-width: 600px) {
	button.close-dialog-button {
		position: absolute;
		right: -2.0rem;
		top: -1.25rem;
		z-index: 5;
	}

	.header-environment-text {
		font-size: 7vw;
		line-height: 1rem;
		padding-right: 4rem;
	}

	.header-dialog-button {
		font-size: 2rem;
		margin-left: -0.9rem;
		margin-bottom: 0.3rem;
	}
	
	.header-dialog-button#header-more-btn {
		padding-right: 0;
		margin-right: -0.5rem;
	}
	
	.screen-help-button {
		padding-right: 0;
		margin-right: -0.2rem;
	}

	.help-icon {
		right: -0.3rem;
		font-size: 1rem;
	}

	.header-dialog-content {
		top: 12rem;
		transform: translateX(10%);
		width: 80%;
	}

	#screen-help-modal > .header-dialog-content {
		left:0;
	}

	.instructions.collapsed div.instructions-body {
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		position: fixed;
		overflow-y: scroll
	}

	.notification-content {
		width: 20rem !important;
		right: 0;
		left: 0;
		margin-right: auto;
		margin-left: auto;
	}

	.notification-message-row {
		width: 20rem;
	}

	#instant-notifications-content .notification-message {
		max-width: 16rem !important;
	}

	.notification-message {
		overflow-x: hidden;
	}

	.notification-body::-webkit-scrollbar {
		display: none;
	}

	.header-instructions {
		padding-left: 0;
	}

	.tall {
		height: 60% !important;
	}

	.regular {
		height: auto;
	}
}

@media only screen and (max-width: 380px) {
	.header-dialog-content {
		top: 12rem;
		transform: translateX(2%);
		width: 90%;
	}

	.popout-link-mobile {
		vertical-align: top;
	}
}

/****************************************************************************************************************
 *   General Site-Wide Styling (no classes or ids)
 ****************************************************************************************************************/

a {
	color: var(--primary);
	text-decoration: none;
}

h1 {
	font-size: 2.5rem;
	font-weight: bold;
}

h2 {
	font-size: 1.667rem;
	font-weight: bold;
}

h3 {
	font-family: 'Lato Light';
	text-transform: uppercase;
	font-size: 1.667rem;
}

h4 {
	font-size: 1rem;
	font-weight: bold;
}

h5 {
	font-size: 1rem;
	font-style: italic;
}

h6 {
	text-align: left;
	font-size: 2.083rem;
	font-weight: normal;
	color: var(--primary);
}

/****************************************************************************************************************
 *   Screen and print media styling
 ****************************************************************************************************************/

@media print {
	table.tablesorter, table.tablesorter thead tr th, table.tablesorter tfoot tr th {
		font-size: 6pt;
	}
	
	thead {
		break-inside: auto;
	}
	
	.no-print, .alert-overlay, .overlay, header {
		visibility: hidden;
		display: none;
	}
	
	.even>td {
		border-bottom: 1px solid #ddd;
	}
	
	.page-break {
		page-break-after: always;
	}
	
	.wrapper {
		margin: 0 auto;
	}
	
	.box {
		padding: 0;
		border: none;
		background-color: white;
	}
	
	.header_label {
		color: #000;
	}
	
	/* 
	 * jquery.printPage-1.2.js dynamically creates a div with this id to show a message while the page is reloaded for printing.
	 * Depending on timing, this div may still be visible when the print preview opens.  Ensure it's not visible.
	 */ 
	#printMessageBox {
		visibility: hidden;
		display: none;
	}
}

@media screen {
	.print-only {
		visibility: hidden;
		display: none;
	}
	
	.page-break {
		height: 20px;
		clear: both;
	}
}

/* Sidebar menu - implemented per-app (see static/css override loaded after this file);
   removed here because .sidebar-new:not(.expanded) below had equal/higher specificity
   than the app's .sidebar-new.collapsed rule and forced the sidebar to its collapsed
   width even when expanded, since no template ever adds an .expanded class. */
/****************************************************************************************************************
 *   Progress bars.
 ****************************************************************************************************************/
.progress {
	border: 1px solid #ccc;
	position: relative;
	width: 80px;
}

.progress .bar {
	background-color: #8DBDD8;
	height: 18px;
	margin-left: 0;
	margin-top: -18px;
}

.progress .bar.full {
	background-color: #66e744;
}

.progress .text {
	left: auto;
	right: auto;
	margin-top: 2px;
	z-index: 10;
}

table.progress-messages tbody tr {
	text-align: left;
}

table.progress-messages tbody tr td {
	padding: 4px;
}

/****************************************************************************************************************
 *   Overlay dialogs.
 ****************************************************************************************************************/

div#confirmBox
{
    display: none;
    overflow: scroll;
    max-height: 50%;
    background-color: #eee;
    border-radius: 5px;
    border: 2px solid #444;
    position: fixed;
    width: 300px;
    left: 50%;
    top: 25%;
    margin-top: -100px;
    margin-left: -150px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    z-index: 2000;
}
div#confirmBox .button {
    background-color: #ccc;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #aaa;
    padding: 2px;
    text-align: center;
    width: 80px;
    cursor: pointer;
}
div#confirmBox .button:hover
{
    background-color: #ddd;
}
div#confirmBox .message
{
    text-align: left;
    margin-bottom: 8px;
}

/* Overlay dialogs that are not error or notification messages.  Typically used for forms without having to leave the page.
   NOTE: We probably want to phase these out in favor of JQuery UI's dialog() function.
 */
div.overlay {
	border-style: solid;
	border-width: 1px;
	border-color: #777;
	padding: 12px;
	text-align: center;
	vertical-align: center;
	font-size: 14px;
	color: #444444;
	background-color: #f8f8f8;
	width: 700px;
	z-index: 2000;
	display: none;
}

/* Overlay dialogs for error and notification messages. */
div.alert-overlay {
	left: 50%;
	transform: translateX(-50%);
	position: fixed;
 	border-style: solid;
	border-width: 1px;
	border-color: #777;
	padding: 12px;
	text-align: center;
	font-size: 15px;
	background-color: #eee;
 	min-width: 500px;
	max-width: 1000px;
	max-height: 600px;
	z-index: 10000;
	display: none;
}
 
div.alert-overlay div.contents {
	max-height: 500px;
	overflow: auto;
}

div.alert-overlay li {
	text-align: left;
}

div.alert-overlay.error {
	color: #F44;
}

div.alert-overlay.warning {
	color: #fff400;
	background-color: #878a91;
}

a.close_dialog_button, a.close_dialog_button:active, a.close_dialog_button:visited {
	background: url("../images/quitbutton_white_both.png") 0 0 no-repeat;
	width: 19px;
	height: 21px;
	background-repeat: no-repeat;
	display: block;
	float: right;
}

a.close_dialog_button:hover {
	background-position: -19px 0;
}

div.temporary-notice-overlay {
	background-color: #eee;	
	border: 1px solid #777;
	display: none;
	font-size: 14px;
	margin: 0 auto;
	left: 0;
	right: 0;
	padding: 12px;
	position: absolute;
	text-align: center;
	vertical-align: center;
	z-index: 10000;
	min-height: 20px;
	min-width: 500px;
	max-width: 500px;
	width: auto;
}


/* Color coding based on priority for feedback tickets */
table.tablesorter tr.HIGHEST td {
	background-color: #f98;
	border-color: #f55;
}

table.tablesorter tr.HIGH td {
	background-color: #fba;
	border-color: #f77;
}

table.tablesorter tr.LOW td {
	background-color: #cdf;
	border-color: #99f;
}

table.tablesorter tr.LOWEST td {
	background-color: #bcf;
	border-color: #77f;
}

table.totals tfoot {
	font-weight: bold;
}

.alignButtons {
	float: left;
	display: inline-flex;
	gap: 5px;
	padding-bottom: 5px;
}

.downloadButtonWrapper {
	float: left;
	padding-bottom: 5px;
}

div.tablesorter-record-count {
	float: right;
	text-align: right;
	display: inline;
	right: 0;
	margin-top: 6px;
	margin-right: 3px;
}

div.tablesorter-selected-count {
	float: left;
	display: inline-block;
	text-align: left;
	left: 0;
	margin-top: 6px;
	margin-left: 3px;
}

.client_ticket {
	color: #CC0000;
}

div.dialog {
	display: none;
}

/****************************************************************************************************************
 *   Login Page
 ****************************************************************************************************************/
 
 /* Login Page left Half with Logo*/
 .login-left-container {
 	width: 18%;
 	margin-left: 15%;
 	position: fixed;
 	top: 0rem;
 	bottom: 0rem;
 	background-color: var(--primary);
 }
 
 .login-left-container img{
	margin-top: 8rem;
	width: 50%;
 }
 
 .login-right-container {
 	width: 33rem;
 	display: block;
 	position: absolute;
 	color: black;
 	top: 25%;
 	left: 50%;
 }
 
 .login-right-container #back {
 	position: relative;
 	float: left;
 	cursor: pointer;
 	font-size: 1.25rem;
 	text-align: left;
 	font-style: italic;
 	color: grey;
 }
 
 .login-right-container h3 {
 	text-align: left;
 	margin-top: var(--size-8);
 }
 
 .login-right-container hr {
 	width: 20rem;
 	float: left;
 	margin-bottom: 1rem;
 }
 
 #login-selection-bottoms button {
 	width: 60%;
 	float: left;
 }
 
 #login-contact-us-dialog-positioner {
 	position: absolute;
	right: calc(50% - 25rem);
 	top: 31rem;
 }
 @media only screen and (max-width: 850px) {
	#login-contact-us-dialog-positioner {
		right: calc(50% - 17rem);
		top: 11rem;
	}
 }
  
 .loginLabel {
 	font-size: 1.5rem;
 }

 .login-right-container table input {
 	font-size: 1.5rem;
 	padding: 1.5rem;
 	height: 3rem;
 	width: 100% !important;
 	background-color: #EFEFEF;
 }
 .login-right-container table input#j_password {
 	padding-right: 3.5rem;
 }

 .login-right-container .password-eye {
 	position: absolute;
 	right: 1.5rem;
 	font-size: 1.5rem;
 	margin-top: 0.75rem;
	cursor: pointer;
	color: #D8D8D8;
 }
 
 .login-right-container .button {
 	font-size: 1.5rem;
 	padding: 1rem 0;
 }
 
 .login-right-container a, .login-right-container .remember-me {
 	font-size: 1.25rem;
 }
 .login-right-container #show-contact-us {
 	cursor: pointer;
 }
 
 div.login-error {
	margin-top: 10rem;
	margin-left: 15rem;
 }
 
 .login {
	text-transform: none;
 }
 
 .sso-selector input.combobox{
	width: 100% !important;
	font-size: 1.5rem;
 }
 
@media only screen and (max-width: 850px) {
	.login-left-container {
		margin-left: 0;
	}
	.login-right-container {
		left: 25%;
		top: 0%;
	}
}
 
@media only screen and (max-width: 600px) {
	.login-left-container {
		width: 100%;
		margin: 0;
		position: unset;
	}
	.login-left-container img{
		margin: 0;
	}
	
	.login-right-container {
		width: 80%;
		height: 50%;
		left: 10%;
		position: relative;
	}
	.login-right-container h3 {
		padding-top: 2rem;
	}
	.login-right-container #localLogin, .login-right-container #ssoLogin {
		width: 100%;
	}
	.login-right-container .text-input {
		min-height: 2.65rem;
	}
	
	div.login-error {
		margin-top: 20% !important;
		margin-left: 0;
		min-width: 90%;
		width: 90%;
	}
}

/****************************************************************************************************************
 *   E-Forms
 ****************************************************************************************************************/

/* E-Form header labels. */
.header_label {
	text-align: left;
	border: 0;
	font-weight: bold;
	color: #777;
	padding-right: 20px;
}

.header_label div.required {
	color: #C11B17;
	display: inline-block;
	width: 5px;
	padding-left: 2px;
}

table.non_editable_eform_headers td.value {
	vertical-align: middle;
}

table.eform-data-table {
	border-collapse: collapse;
}

table.eform-data-table > tbody > tr > td {
	border: 1px solid #CCC;
	height: 20px;
	vertical-align: middle;
}

table.eform-data-table .input-index {
	padding-top: 8px;
	vertical-align: top;
	width: 5%;
}

table.eform-data-table .input-index-combined {
	padding-top: 8px;
	vertical-align: top;
	width: 5%;
}

table.eform-data-table .input-label div.required {
	color: #C11B17;
	display: inline-block;
	width: 5px;
	padding-left: 2px;
}

table.eform-data-table .input-label span.hse {
	color: #C11B17;
}

table.eform-data-table .input-label {
	padding-top: 8px;
	padding-bottom: 8px;
	text-align: right;
	vertical-align: top;
	width: 40%;
}

table.eform-data-table .input-entry {
	padding: 5px;
	text-align: left;
	vertical-align: top;
	width: 55%;
}

table.eform-data-table .input-combined {
	padding-left: 5px;
	text-align: left;
	width: 95%;
}

table.eform-data-table tr.row_selected td {
	background-color: #B0BED9;
}

table.striped.eform-data-table.ffv-eform-template-mapping-table table tbody tr:nth-child(odd) {
	background: inherit;
}

table.eform-data-table.ffv-eform-template-mapping-table .input-label {
	text-align: left;
	width: 50%;
}

table.eform-data-table.ffv-eform-template-mapping-table .input-label td  {
	width: 50%;
}

div.eform-reference-table{
	display: inline-block;
	width: 100%;
	overflow: hidden;
	padding: 5px;
	padding-left: 1px;
}
div.eform-reference-table-view{
	float: left;
	margin-left: 5px;
}
div.eform-reference-table-view-cell{
	text-align: left;
	height: 20px;
}

div.deficiency-answer-comments textarea, div.eforms-input-comments textarea {
	width: 300px;
	height: 65px;
}

div.eformInputForm {
	display: none;
}

/****************************************************************************************************************
 *   Misc
 ****************************************************************************************************************/
 
.preserve {
	font: 12px Helvetica;
}

.hidden {
	display: none;
}

.fixed_width_text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	display: inline-block;
}
 
.hide-from-clients {
	border-style: dotted;
	border-width: 1px;
	border-color: #f00;
}
.hide-in-prod {
	border-style: dotted;
	border-width: 1px;
	border-color: #f00;
	background-color: #fffafa;
}
.hide-in-mini {
	border-style: dotted;
	border-width: 1px;
	border-color: #f00;
}

.heading {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	border-bottom: 1px solid #ccc;
}

.wide {
	width: 100%;
}
 
.left {
 	float:left;
}

.right {
 	float:right;
}

div.two_thirds {
	display: inline-block;
	width: 65.32%;
	text-align: center;
}
div.third {
	width: 32%;
	text-align: center;
}
div.third > div.left_aligned {
	width: auto;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	position: relative;
	display: inline-block;
}

div.left_aligned {
	width: auto;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	position: relative;
	display: inline-block;
}

div.half {
	display: inline-block;
	width: 48.65%;
}
div.half > div.left_aligned {
	width: auto;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	position: relative;
	display: inline-block;
}

div.quarter {
	display: inline-block;
	width: 23%;
	text-align: center;
}
div.quarter > div.left_aligned {
	width: auto;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	position: relative;
	display: inline-block;
}

.highlight, .highlight td {
	background-color: #ff0;
}

.highlightPink, .highlightPink td {
	background-color: pink;
}

.error {
	color: red;
}

[data-changed="true"] {
	background-color: #ff8882;
}

[data-error="true"] {
	color: red;
}

[data-grey="true"] {
	background-color: lightgrey;
}

[data-failed="true"] {
	background-color: #ff8882;
}

[data-passed="true"] {
	background-color: #a8ff7c;
}

.validation-error, .pretty_form_warning, .field_message {
	display: list-item;
	list-style: disc;
	margin-top: 2px;
	margin-left: 20px;
	width: 300px;
}

.validation-warning {
	margin-top: 2px;
	margin-left: 2px;
	width: 300px;
	font-size: 9pt;
	color: #FD5800;
}

.warning,.pretty_form_warning {
	font-size: 9pt;
	color: red;
}

.error_message {
	border-style: solid;
	border-width: 1px;
	border-color: #aaa;
	padding: 12px;
	color: #f00;
	background-color: #fee;
	text-align: left;
	width: 750px;
}

.in_progress_message {
	border-style: solid;
	border-width: 1px;
	border-color: #aaa;
	padding: 12px;
	color: #880;
	background-color: #ffe;
	text-align: left;
	width: 750px;	
}

.success_message {
	border-style: solid;
	border-width: 1px;
	border-color: #aaa;
	padding: 12px;
	color: #0a0;
	background-color: #efe;
	text-align: left;
	width: 750px;
}

.trace {
	border-style: solid;
	border-width: 1px;
	border-color: #aaa;
	padding: 12px;
	color: #838b83;
	background-color: #fff8dc;
	text-align: left;
}

.banner_message {
	background-color: #efefef;
	border-color: #aaa;
	border-style: solid;
	border-width: 1px;
	margin: 5px;
	padding: 12px;
	text-align: center;
}

/* Container for a set of buttons. */
.buttons {
	width: auto;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

tr.shaded {
	background-color: #DDD;
}

/* A bordered box with a white background. */
.bordered {
	border-collapse: collapse;
	border: 1px solid #CCC;
	background-color: #fff;
	padding: 5px 5px 5px 5px;
}

table.outer-bordered {
	border-collapse: collapse;
	border: 1px solid #CCC;
}

table.bordered th {
	border: 1px solid #CCC;
}

table.bordered td {
	border: 1px solid #CCC;
}

table.centered td {
	text-align: center;
}

table.file-list {
	border-spacing: 2px;
}

table.file-list td {
	vertical-align: middle;
}

table td.middle-text {
	vertical-align: middle;
}

td.expand {
	width: 100%;
}

.underline {
	border-bottom: 1px solid #ccc;
}

tr.underline-grey td, tr.underline-grey th {
	border-bottom: 1px solid #aaa;
}

tr.underline td, tr.underline th {
	border-bottom: 1px solid #000;
}

/* Standard menu console layout */
table.console {
	border-spacing: 2px;
}
table.console>tr>td,table.console>tbody>tr>td {
	border: 1px solid #CCC;
	background-color: #fff;
	padding: 5px;
	width: 400px;
	height: 50px;
	vertical-align: top;
	text-align: center;
}

/* Table with rows separated by horizontal lines and an outer border */
table.lined-outer-bordered {
	border-spacing: 0;
	border-collapse: collapse;
	border: 1px solid #CCC;
}
table.lined-outer-bordered>tr>td,table.lined-outer-bordered>tbody>tr>td {
	border-width: 1px;
	border-style: solid;
	border-color: #CCC;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;
}

/* Tables with rows separated by horizontal lines. */
table.lined {
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 0.4rem;
}

table.lined > tr {
	border-collapse: collapse;
}

table.spaced td,
table.spaced th {
	padding: 5px 1px 5px 1px;
}

table.spaced-thin td,
table.spaced-thin th {
	padding: 4px 1px 4px 1px;
}

table.spaced-thinner td,
table.spaced-thinner th {
    padding: 3px 1px 3px 1px;
}

table.condensed tr {
	height: auto;
}

table.striped tbody tr:nth-child(odd) {
	background: #F4F4F4;
}

table.lined>tr>td,table.lined>tbody>tr>td {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #227b99;
	border-bottom-style: solid;
	border-bottom-color: #227b99;
	border-bottom-width: 0px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-collapse: collapse;
	padding-top: 3px;
	padding-bottom: 3px;
}

/* Allows content to not stretch to the full width of the container. */
table.narrow {
	width: auto;
}

table.narrow td {
	max-width: 700px;
}

table td.small-right-padding {
	padding-right: 10px;
}

table.criteria td.label {
	text-align: left;
	width: 175px;
}

/* A small spacer row in a table, instead of using a tr with a full colspan td containing   */
tr.spacer-row {
	height: 10px;
}

div.narrow {
	width: 60%;
	padding: 5px;
	line-height: 1.4em;
}

/* For the "index" or "row number" column on a data table.  Left-aligned so numeric values line up correctly. */
td.index,th.index {
	text-align: left;
	padding-right: 40px;
}

/* To be used when we want to use a two-column layout for forms. */
div.form_column {
	min-width: 500px;
	width: 45%;
	margin-left: 5px;
	margin-right: 5px;
	display: inline-block;
	vertical-align: top;
}

div.wrappable.label {
	width: 480px;
	height: auto;
}

div.wrappable {
	float: left;
	display: flex;
}

.left_aligned {
	text-align: left;
}

table.left_aligned td, table.left_aligned th, td.left_aligned {
	text-align: left;
}

table.right_aligned td, table.right_aligned th, td.right_aligned {
	text-align: right;
}

table.left_aligned td.right_aligned {
	text-align: right;
}

span.required {
	color: #C11B17;
}

.red {
	color: #C11B17;
}

.plum {
	color: #DDA0DD;
}

.orange {
	color: #FF8C00;
}

.green {
	color: #48B82A;
}

td span.required {
	vertical-align: top;
}

.pretty_form tr {
	height: 20px;
}

.pretty_form td {
	text-align: left;
}

.pretty_form input[type=text],.pretty_form input[type=number],.pretty_form input[type=password],.pretty_form textarea, .pretty_form select {
	width: 300px;
}
.pretty_form input[type=text].large,.pretty_form input[type=number].large,.pretty_form input[type=password].large,.pretty_form textarea.large, .pretty_form select.large {
	width: 600px;
}
@media only screen and (max-width: 600px) {
	.pretty_form input[type=text].large,.pretty_form input[type=number].large,.pretty_form input[type=password].large,.pretty_form textarea.large, .pretty_form select.large {
		max-width: 75%;
	}
}

textarea.large {
	width: 600px;
}
@media only screen and (max-width: 600px) {
	textarea.large {
    	max-width: 75%;
	}
}

ul.unadorned {
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
	padding-left: 0;
	vertical-align: top;
}

ul.unadorned li {
	text-align: left;
	list-style: none;
}

a.unadorned:hover {
	text-decoration: none;
}

td.label, td.soft_label {
	padding-top: 3px;
	padding-right: 20px;
}

.spacer {
	height: 20px;
	clear: both;
}

.inline-spacer {
    width: 20px;
	display: inline-block;
}

.small_spacer {
	height: 5px;
	clear: both;
}

hr.lined_spacer {
	margin: 3px 0 3px 0;
	clear: both;
}

.clear {
	clear: both;
}

.css_right {
	float: right;
}
.css_left {
	float: left;
}

/* used to provide fixed-width separators for multi-part inputs like phone numbers or tag names ( of the form XXX - XXX - XXX ) */
.separator {
	width: 16px;
	display: inline-block;
	text-align: center;
}

/* TODO PRIORITY_LOW DIFFICULTY_MEDIUM rework these styles; it makes more sense to simply disable the inputs and use :disabled for styling */
.disabled {
	color: #AAA;
}

.disabled input:not([type="button"]), .disabled textarea, .disabled select {
	background-color: #EFEFEF;
}

input:not([type="button"]).disabled, textarea.disabled, select.disabled {
	background-color: #EFEFEF;
}

table tbody tr.grey-background {
	background: #F4F4F4;
}

.greyed-out {
	color: grey;
}
.lightgreyed-out {
	color: lightgrey;
}

.centered {
	margin: 0 auto;
	text-align: center;
}

.label {
	text-align: left;
	font-weight: bold;
	color: #555;
}

.checkboxCell {
	vertical-align: bottom;
}

.aligned_list {
	display: table;
	text-align: left;
	padding-left: -5px;
	padding-right: -5px;
}

.document_type_empty_true {
	color: gray;
}

#prefix,#tagNumber,#suffix {
	width: 103px;
}

.tag_field {
	width: 356px;
}

.big {
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.6em;
}

/* Used mainly for dataTables, but we don't have a consistent class for dataTables tables with a better name.
   TODO PRIORITY_LOW DIFFICULTY_MEDIUM rename this (difficult) or just get rid of it once we phase out datatables in favor of tablesorter + easy-edit. */
table.display td.numeric {
	text-align: right;
	padding-right: 10px;
}

table.display tfoot td {
	padding: 3px 4px;
	border-top: 1px solid black;
	font-weight: bold;
}

/* Used for displaying multiple narrow columns of data together side-by-side. */
.column {
	width: 350px;
	display: inline-block;
	padding-left: 10px;
	vertical-align: top;
	text-align: left;
}

div.treeContainer {
	background: #ffffff;
	text-align: left;
	width: 99%;
}

label.validationError {
	display: block;
	color: red;
	border: solid 1px red;
	background-color: #fdd;
}

/* Drag and drop file container */
div.drag_and_drop_files {
	border: 1px dashed #939393;
	padding: 10px;
	text-align: center;
}

div.drag_and_drop_files input[type="file"] {
	width: 80px;
	position: relative;
	float: left;
	margin-left: 0.5rem;
}

div.drag_and_drop_files input[type="file"][multiple] {
	width: 85px;
}

div.drag_and_drop_files span {
	margin-top: 6px;
}

div.drag_and_drop_files.hover {
	color: #000000;
	border: 2px solid #8DBDD8;
}

.ajaxUploadedFile {
	text-align: right;
	vertical-align: middle;
}

.clickable {
	cursor: pointer;
}

img.clickable {
	cursor: pointer;
}

input.rowSelect {
	cursor: pointer;
}

input.flat {
	border: 0;
	margin: 0;
	padding: 0;
}

.top-right-buttons {
	position: absolute;
	display: inline-block;
	right: 12px;
	top: 12px;	
}

table.uwi-lsd thead tr {
	height: auto;
	font-weight: normal;
	font-size: smaller;
}

table.uwi-lsd input[type="text"] {
	margin: 0;
	width: 34px;
}

table.nowrap {
	white-space: nowrap;
}

table.nowrap_labels td.label {
	white-space: nowrap;
	width: auto;
}

input[type=text].timepicker {
	width: 60px;
}

.warning-icon {
	color: #f5a742;
	font-size: 2em;
}

.error-icon {
	color: red;
	font-size: 2em;
}

/* ==== Drag'n'drop sortable styling ========================================== */

.sortable-drop-placeholder {
	background-color: #8DBDD8;
	height: 20px;
}

.sortable-handle {
	cursor: grabbing;
	background-image: url(../images/sortable-grabber.gif);
	background-repeat: no-repeat;
	background-position: center;
	width: 10px;
}

/* ==== Page warnings ================================================= */

#page-warnings-positioner {
	position: fixed;
	right: 15rem;
	top: 0.75rem;
	z-index: 1;
}

@media only screen and (max-width: 600px) {
	#page-warnings-positioner {
		right: 6rem;
		top: 4.6rem;
	}
}


div.page-warnings {
	box-shadow: 1px 1px 3px rgba(0,0,0,0.7);
	background-color: #FFF49F;
	border: 1px solid;
	display: none;
	margin-top: 4px;
	max-height: 500px;
	max-width: 1000px;
	min-width: 120px;
	overflow: auto;
	padding: 5px;
	z-index: 5;
	border-radius: 4px;
}

div.page-warnings img {
	cursor: pointer;
	float: right;
}

#page-warnings-count {
    font-weight: bold;
}

#page-warnings-content {
	border-top: 1px inset;
	margin-top: 3px;
	padding-top: 3px;
}

/* ==== Instant Notifications ================================================= */

.notification-content {
	max-width: 62.5rem;
	min-width: 20%;
}

.notification-header {
	margin-bottom: 0 !important;
}

.notification-body {
	overflow: auto;
	border-top: var(--size-1) solid;
	max-height: 12rem;
}

#instant-notifications-no-notifications {
	font-size: 2rem;
	width: 100%;
	padding: 0.5rem;
	text-align: center;
}

#instant-notifications-content {
	width: max-content;
}

#instant-notifications-content table:first-of-type {
	min-width: max-content;
	border-spacing: 0.5rem;
}

.mark-all-as-read {
	color: #227b99;
	font-size: 2rem;
}

#instant-notifications-content .notification-message {
    font-size: 1.67rem;
    max-width: 57rem;
}

#instant-notifications-content i.mark-notification-message-read {
	font-size: 3rem;
	cursor: pointer;
}

/* ==== Log Entries =========================================================== */

tr.log-entry-warn td {
	background-color: #FFF49F;
}

tr.log-entry-error td {
	background-color: #F98;
}

/* ==== Ajax Loading/Notification ============================================= */

.ajax-loading {
	background-color: #F0F0F6;
	font-weight: bold;
	padding: 5px;
	margin-bottom: 10px;
	width: 200px;
}

/* ==== Synchronous Loading/Notification ============================================= */

.sync-request-loader {
	width: 100%;
	height: 100%;
	z-index: 1000;
	opacity: 0.5;
	filter: alpha(opacity=50);
	position: fixed;
	background-color: #EFEFEF;
}

.sync-request-loader > img {
	position: relative;
	top: 30%;
	left: 50%
}

/* ==== Business Control file boxes =========================================== */

.business-controls {
	padding: 1px 5px 1px 5px;
}

.business-controls-title {
	display: inline-block;
	font-size: 1.1em;
	font-weight: bold;
	text-align: left;
	margin-top: 1px;
	margin-left: 2px;
}

.business-controls-file-list {
	border-spacing: 0;
	margin-top: 1px;
}

.business-controls-actions input {
	margin-top: 0;
}

/* ==== Instructions boxes ==================================================== */

.instructions {
	max-width: 900px;
}

.instructions div.instructions-header {
	border-bottom: 1px solid #aaa;
	font-size: 1.1em;
	font-weight: bold;
	margin-top: .4rem;
	margin-bottom: 4px;
	padding-bottom: 2px;
	margin-left: 5px;
	text-align: left;
	margin-right: 10px;
	color: #227B99;
}

.instructions div.instructions-header div.instructions-controls {
	float: right;
}

.instructions div.instructions-header div.instructions-controls i:hover {
	color: #3EA1C2;
}

.instructions div.instructions-body {
	padding: 0 4px 0 4px;
	font-style: normal;
	color: black;
}

.instructions li, .instructions td {
	text-align: left;
}

.instructions.collapsed div.instructions-header {
	border-bottom: 0;
	margin-bottom: 0;
}

.instructions.collapsed div.instructions-body {
	display: none;
}

.table-instructions {
    position: relative;
    display: inline-block;
    right: var(--size-5);
}

.instructions-popup {
	padding: 0.8rem 2rem 0 2rem !important;
	background-color: white;
	position: fixed;
	border-radius: 0.7rem;
	border: 0.075rem solid #227b99;
	width: 92rem;
	right: 1.7rem;
}

.instructions-popup th {
	font-size: 1.7rem;
	font-weight: bold;
}

.instructions-popup td {
	font-size: 1.1rem;
	font-weight: normal;
}

.instructions-title {
	border-bottom-style: solid;
	border-bottom-color: #227b99;
	border-bottom-width: 0.2rem;
	padding-bottom: 1px !important;
}

/* ==== Compact Instructions and Optional Business Controls mini-menus ============= */
#compact-instructions-and-optional-business-controls-positioner {
	position: absolute;
	right: 4px;
	top: 0.5vh;
}

.compact-instructions-and-optional-business-controls button {
	border : 0;
	background-color: white;
	font-size: 1.6em;
	display: block;
	float: right;
}

.compact-instructions-and-optional-business-controls-body {
	float: right;
	width: 100%;
	margin-right: 8px;
	background: white;
	border: 1px solid #aaa;
}

/* ==== Collapsible content boxes ============================================= */

.collapsible {
	border: 1px solid #aaa;
	border-radius: var(--size-6);
	padding: var(--size-6);
	margin-bottom: 0.5rem;
	overflow: auto;
}

.hide-scrollbar::-webkit-scrollbar {
	display: none;
}

.inside-scrollbar {
	display: flex;
}

.hide-inside-scrollbar-vertical::-webkit-scrollbar:vertical {
	display: none;
}

.hide-inside-scrollbar-horizontal::-webkit-scrollbar:horizontal {
	display: none;
}

.collapsible div.collapsible-header span.collapsible-title {
	display: inline-block;
	max-width: calc(100% - 5rem);
	padding-left: 2rem;
}

.collapsible div.collapsible-header span.collapsible-controls i {
	cursor: pointer;
	color: grey;
	float: right;
	transform: scale(0.7, 0.7);
}

.collapsible.collapsed {
	min-height: 4.083rem;
}

.collapsible.collapsed div.collapsible-body {
	display: none;
	text-align: left;
}


/* ==== HSE forms ============================================================= */

.hse-form-input-wrapper {
	padding-left: 7%;
	padding-right: 7%;
}

.hse-form-header, .hse-form-sub-header {
	text-align:left;
	padding-left:5%;
}

.hse-form-sub-header {
	text-decoration:underline;
}

.hse-form-label {
	min-width: 120px;
	width: 35%;
}

.hse-form-input {
	float: right;
}
.form_column .hse-form-input {
	float: none;
}

.hse-form-comments {
	display: inline-block;
}
.hse-form-comments textarea {
	width: 230px;
}

.hse-signature-box {
	border-left: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	border-right: 1px solid #aaa;
	border-top: 1px solid #aaa;
	height: 90px;
	width: 350px;
	display: inline-block;
	padding-left: 10px;
	vertical-align: top;
	text-align: left;
}

/* ==== Easy Edit styling ===================================================== */

.easy-edit-inline-record {
	margin-bottom: 5px;
}

/* fix to hide datepicker that appears in the footer on page load */

#ui-datepicker-div {
	display: none;
}

/* ================================================================================ */

.convertToReadOnly {
	visibility: hidden;
}

.project-dropdown {
	width: 460px;
}

/* ==== Analysis Report Forms ===================================================== */

.analysis-report {
	color: black;
}
 
div.report-page {
	padding-bottom: 10px;
	height: 600px;
	box-sizing: border-box;
}

div.report-page-big {
	height: 1040px;
	box-sizing: border-box;
}

div.report-page-930 {
	height: 920px;
	box-sizing: border-box;
}

div.report-page-methodology {
	height: 1050px;
}

.analysis-report-header {
	height: 115px;
	white-space: nowrap;
}

.analysis-report-footer-container {
	height: auto;
	white-space: nowrap;
}

.analysis-report-header-logo {
	width: 200px;
	margin: 0;
	padding: 0;
}

.analysis-report-header-title {
	font-size: 1.3em;
	font-weight: bold;
	padding-top: 30px;
}

.analysis-report-header-title-section {
	border-collapse: collapse;
}

.analysis-report-header-numbers {
	text-align: right;
}

.analysis-report-table {
	padding: 0;
	margin: 0;
	border-collapse: collapse;
}

.analysis-report-table td {
	padding: 0 5px 3px 5px;
	margin: 0;
	vertical-align: baseline;
}

.analysis-report-table td span {
	display: inline-block;
	margin-bottom: 2px;
	margin-top: 5px;
	width: 100%;
}

.analysis-report-table td span, .report-field-cell {
	border-bottom: 1px solid black;
	font: 13px arial, sans-serif;
	text-align: center;
}

.analysis-report hr {
	background-color: black;
}

.analysis-report table thead th { 
	vertical-align: bottom;
}

.analysis-report table thead tr:last-child th {
	border-bottom: 1px solid #000;
}

.analysis-report .bordered {
	margin: 0 2px 2px 2px;
	border: 1px solid black;
}

.analysis-report .watermark {
	color: #C7C7C7;
	opacity: 0.35;
	font-size: 72px;
	font-weight: bold;
	position: absolute;
	text-align: center;
	
	transform: rotate(-45deg);
	
	/* Safari */
	-webkit-transform: rotate(-45deg);
	
	/* Firefox */
	-moz-transform: rotate(-45deg);
	
	/* IE */
	-ms-transform: rotate(-45deg);
	
	/* Opera */
	-o-transform: rotate(-45deg);
}

.analysis-report hr {
	margin: 1px;
}

table.analysis-report-bordered-table {
	border-collapse: collapse;
	border: 1px solid #000;
	background-color: #fff;
	padding: 5px 5px 5px 5px;
}

table.analysis-report-bordered-table td {
	border: 1px solid #000;
}

table.analysis-report-bordered-table th {
	border: 1px solid #000;
}

.gas-analysis-table tr th {
	height: 20px;
}

.analysis-components tbody tr:nth-child(odd) {
   background-color: #E0E0E0;
}

/* ==== Proposed Change and Change Sets =========================================== */

tr.changeset-header td {
	background-color: #E6EEEE;
}

/* ==== Reference tables ========================================================== */

table.reference-table {
	border-spacing: 0;
}

table.reference-table th, table.reference-table td {
	padding: 3px;
	text-align: left;
}

table.reference-table input {
	width: 150px;
}

table.reference-table thead tr th {
	background-color: #E6EEEE;
}

table.reference-table thead tr th input {
	font-weight: bold;
}

/* ==== Gas Gor Report tables ===================================================== */

td.gas-gor-report-logo {
	padding-top: 15px;
}

table.gas-gor-report-table {
	border: 1px solid #000;
	border-collapse: collapse;
	border-spacing: 0;
}

table.gas-gor-report-table > tr {
	border-collapse: collapse;
}
table.gas-gor-report-table > tr > td, table.gas-gor-report-table > tbody > tr > td {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000;
	border-right-width: 0;
	border-left-width: 0;
	border-collapse: collapse;
	padding-top: 3px;
	padding-bottom: 3px;
}

table.gas-gor-report-table td {
	text-align: left;
}

table.gas-gor-report-table td.label {
	text-align: right;
	font-weight: normal;
}

table.gas-gor-report-table td.emphasized {
	font-weight: bold;
}

/* ==== Override tooltip styling ================================================== */
div.ui-tooltip {
    max-width: 800px;
}

/* ==== "Display" table =========================================================== */
/* TODO PRIORITY_LOW DIFFICULTY_LOW find a better name for this css class */

table.display {
	margin: 0 auto;
	clear: both;
	width: 100%;
}

table.display thead th, thead.display th {
	text-align: center;
	padding: 3px 4px;
	border-bottom: 1px solid black;
	font-weight: bold;
}

table.display tfoot th, tfoot.display th{
	padding: 3px 18px 3px 10px;
	border-top: 1px solid black;
	font-weight: bold;
}

table.display td {
	padding: 3px 4px;
}

table.display td.center {
	text-align: center;
}

table.entityTable {
	text-align: left;
}

table.entityTable td.label {
	font-weight: normal;
}

/* ==== Metering Schematics ================================================== */

#toolPalette {
	padding: 1px;
}

.markupTools {
	float: left; 
	position: fixed; 
	z-index: 3;
}

.commandButtons {
	background-color: #EEE;
	border: 1px solid #CCC;
	padding: 2px 1px 2px 1px;
}

.commandButtons input, .commandButtons button {
	width: 95%;
}

#metering-schematic-toolbar {
	background-color: #EEE;
	border: 1px solid #CCC;
	padding: 1px;
	position: fixed;
	right: 30px;
	z-index: 3;
}

#blocks {
	margin: 0 auto;
	overflow: hidden;
}

#blocks .block {
	background-color: #FFF;
	border: 1px solid #CCC;
	float: left;
	height: 40px;
	margin: 5px;
	padding: 2px;
	text-align: center;
	vertical-align: middle;
	width: 46%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#blocks .block:hover {
	background-color: #8DBDD8;
	color: #FFF;
	cursor: move;
}

/* ==== List Builders =============================================================== */

table.list-builder {
	width: 100%;
	margin-left: 1px;
	border-collapse: collapse;
}

table.list-builder input {
	margin-left: 0;
}

table.list-builder a.list-builder-delete {
	display: inline-block;
	margin-top: 3px;
}

table.list-builder input.list-builder-other-value {
	width: 270px;
}

/* ==== Property styling ============================================================ */

table td.property_action_buttons input[type="button"] {
	width: 360px;
}

/* ==== Custom Reports ============================================================== */

table.custom_report_columns {
	border-collapse: collapse;
}

table.custom_report_columns tr {
	border: 1px solid #CCC;
}

table.custom_report_columns tr td {
	padding: 5px;
	cursor: grabbing;
}

table.custom_report_columns tr.disabled td {
	background-color: #F3F3F3;
}

table.custom_report_details {
	margin-left: 0;
	text-align: left;
}

table.custom_report_details td.custom_report_name {
	font-weight: bold;
	text-decoration: underline;
}

/* ==== Proposed Changes ============================================================ */

table.proposedChange {
	background-color: #FFF;
	outline: #004488 solid thin;
}


/* FFV colour coding */
tr[data-colour="red"] td {
	color: red;
}

tr[data-colour="green"] td {
	color: #48B82A;
}

tr[data-colour="irregularRed"] td {
	/* slightly different variant of red as there are some checks in place for "regular" red */
	color: #ff0000f7; 
}

/* MS Edge fix to get rid of x over down arrow on comboboxes */
input.combobox::-ms-clear {
	display:none;
}

@media only screen and (max-width: 850px) {
	.hse-form-header, .hse-form-sub-header {
		padding-left:55px;
	}
	
}

/* == narrow_for_mobile styles must be declared after regular styles to take effect == */

@media only screen and (max-width: 600px) {
	/* applies only if the screen is narrower than 600px */
	label, .label, input[type=text], input[type=number], select {
		font-size: 1.25em;
		height: 1.25em;
	}
	
	textarea {
		font-size:1.25em;
	}
	textarea.large {
		width: 94%;
	}
	
	div.narrow {
		width: 99%;
	}
	
	input[type=number].phone_3 { width: 35px; }
	input[type=number].phone_4 { width: 45px; }
	input[type=number].phone_5 { width: 60px; }
	
	.hse-form-input-wrapper, .hse-form-header, .hse-form-sub-header  {
		padding-left: 25px;
		padding-right: 20px;
	}
	
	.label, .hse-form-label, .hse-form-input {
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.pretty_form td.label {
		width: 200px;
	}
	
	.hse-form-comments textarea {
		width: 330px;
	}
	
	/* fix some inputs that cause mobile browsers to zoom to close to see than their widgets */
	input[type=text].timepicker {
		width: 180px;
	}
}


table.hseTable input.hseInput {
	margin-left:78px;
	width: 250px;
}

.table-icon {
	font-size: 14pt;
	color: black;
}

.table-icon:hover {
	text-decoration: none;
}

td[data-background="red"] {
	background-color: #fee;
}

td[data-background="green"] {
	background-color: #efe;
}

td[data-background="grey"] {
	background-color: lightgrey;
}

td[data-background="amber"] {
	background-color: #feb802;
}

td[data-background="bright-red"] {
	background-color: #ff0000;
}

.loading-mask { position: relative; }
.loading-mask:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-image:
			repeating-linear-gradient(
					45deg,
					#2985be,
					#2985be 10px,
					#ffffff 10px,
					#ffffff 20px
			);
	background-size: 28px 28px;
	animation: move .5s linear infinite;
	opacity: 0.2;
}
@keyframes move {
	0% { background-position: 0 0; }
	100% { background-position: 30px 0; }
}

/*custom scrollbar*/

::-webkit-scrollbar {
  	width: 16px;
  	height: 16px;
}

::-webkit-scrollbar-track {
  	background: #8FBCCB;
	border: solid var(--size-1) #707070;
}

::-webkit-scrollbar-button {
  	border-style: solid;
  	height: var(--size-7);
  	width: var(--size-7);
	border: solid var(--size-1) #707070;
}

::-webkit-scrollbar-button:horizontal:increment:hover {
  	border-color: transparent transparent transparent #FFFFFF;
  	background-color: var(--primary);
}

::-webkit-scrollbar-thumb {
	background: var(--primary);
	border-radius: .5rem;
	background-clip: content-box;
	border: var(--size-2) solid transparent;
}

::-webkit-scrollbar-button:vertical:start:decrement {
    background:
        linear-gradient(120deg, var(--primary) 35%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(240deg, var(--primary) 35%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(0deg, var(--primary) 30%, rgba(0, 0, 0, 0) 31%);
	background-color: #FFFFFF;
	border-bottom: none;
}

::-webkit-scrollbar-button:vertical:end:increment {
    background:
        linear-gradient(300deg, var(--primary) 35%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(60deg, var(--primary) 35%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(180deg, var(--primary) 30%, rgba(0, 0, 0, 0) 31%);
	background-color: #FFFFFF;
	border-top: none;
}

::-webkit-scrollbar-button:horizontal:end:increment {
    background:
        linear-gradient(210deg, var(--primary) 35%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(330deg, var(--primary) 35%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(90deg, var(--primary) 30%, rgba(0, 0, 0, 0) 31%);
	background-color: #FFFFFF;
	border-left: none;
}

::-webkit-scrollbar-button:horizontal:start:decrement {
    background:
        linear-gradient(30deg, var(--primary) 35%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(150deg, var(--primary) 35%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(270deg, var(--primary) 30%, rgba(0, 0, 0, 0) 31%);
	background-color: #FFFFFF;
	border-right: none;
}

.scrollMargin {
	overflow: scroll;
	width: 200%;
}

/* ==== Compact Instructions and Optional Business Controls mini-menus ============= */
#client-integrated-services-search {
	position: absolute;
	right: 50px;
	top: -1.5vh;
	
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
	font-family: Arial,sans-serif;
}

.ui-widget input, .ui-widget select, .ui-widget textarea {
	border: 1px solid var(--primary);
	width: 100%;
	margin-top: 0.5rem;
}

.ui-widget-content {
	background: #fafafa;
	border: 1px solid var(--accent);
	padding: 0;
	color: var(--primary);
}

.ui-dialog {
	overflow: visible;
	max-width: 99vw;
}

.ui-dialog .ui-dialog-titlebar {
    padding: .8rem;
    position: relative;
    border: 1px solid var(--primary);
	background: var(--primary);
	font-size: larger;
	border-radius: 0;
	border-top-left-radius: .8rem;
	border-top-right-radius: .8rem;
}

.ui-corner-all {
	border-radius: 1rem;
}

.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
	border: 1px solid var(--accent);
	background: #eeeeee url("../images/ui-bg_highlight-soft_100_eeeeee_1x100.png") 50% top repeat-x;
	color: #1c94c4; 
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	border: 1px solid #cccccc;
	font-weight: bold;
	color: #1c94c4;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
	border: 1px solid var(--accent);
	background: #eeeeee url("../images/ui-bg_highlight-soft_100_eeeeee_1x100.png") 50% top repeat-x;
	color: #1c94c4; 
}

.ui-state-focus {
	background-color: var(--primary);
}

.ui-icon-hover {
	filter: none;
}

h4 {
	color: black;
	font-size: larger;
	font-weight: 600;
}

.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5rem;
	padding: .3rem 1rem .5rem .4rem;
}

.ui-dialog .ui-dialog-buttonpane button {
	margin: .5rem .4rem .5rem 0;
	cursor: pointer;
} 

/*======= dropdown =================================*/
.combobox {
	min-width: 0;
}

.combobox-icon-container i {
	font-size: 1.8rem;
	color: #BBB;
	font-weight: 100;
	position: relative;
	bottom: 2px;
	padding: .8rem 1rem .3rem 1rem;
	align-items: center;
}

input:disabled {
	background-color: #E0E0E0;
	border-color: #878A91;
	opacity: 0.1;
}

/* ====== label ======================*/

label span {
	color: black;
}

.label i[title]:hover {
	background-color: red;
}

/*===== input ===========================*/
text {
	width: 100%;
}

input[type="text"].text-ui {
	display: block;
	width: 100%;
}

textarea.textarea-ui {
	display: block;
	width: 100%;
}

input {
	display: inline-block;
}

input[type = "select"] {
	height: .8rem;
} 

input[type=radio], input.radioButton {
	display: inline;
	clear: none;
}

.radioButtons {
	display: block;
}

.checkbox-ui {
	transform: scale(1.5);
}

.top_checkbox_row {
	display: grid;
	grid-template-columns: 40% 60%;
	margin-top: var(--size-7);
	grid-gap: var(--size-6);
}

.checkbox-round {
	position: relative;
	margin-left: 0.3rem;
	width: 0.85rem;
	float: left;
	margin: 0.15rem 0.75rem 0.15rem 0.075rem;
	height: 0.85rem;
	border-radius: 50%;
	vertical-align: middle;
	border: 0.075rem solid #707070;
	-webkit-appearance: none;
	outline: none;
	cursor: pointer;
	padding: 0.075rem;
	-moz-box-shadow:    inset 0 0 0.15rem var(--accent-faded);
	-webkit-box-shadow: inset 0 0 0.15rem var(--accent-faded);
	box-shadow:         inset 0 0 0.15rem var(--accent-faded);
}

.checkbox-round input {
	width: 100%;
	height: 100%;
	position: absolute;
	top: -0.15rem;
	left: -0.225rem;
	z-index: 5;
	opacity: 0;
	cursor: pointer;
}

.checkbox-fill-circle {
	position: relative;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	z-index: 1;
	transform: scale(0.5);
	transition: all 0.1s ease-in;
}

.checkbox-round input:checked + .checkbox-fill-circle {
	background-color: #227B99;
	transform: scale(1)
}

.full-width {
	width: 100%;
}

input[type=text].timepicker {
	width: 30%;
}

/* ======= list-builder ================*/
a .list-builder-icon {
	color: var(--primary);
	margin: 0;
	padding: 0;
	font-size: 1.8em;
	border: 0;
	background-color: white;
	box-shadow: none;
	float: right;
}

a .list-builder-icon:hover {
	background-color: #eeeeee;
}

.ui-icon-plus {
	color: white;
	font-size: 1.5em;
	background-image: url('images/ui-icons_ffffff_256x240.png');
}

/* ========= buttons =============================== */

.screen-tutorial-button {
	background-color: var(--primary);
	font-size: 1.5rem;
	text-align: center;
	border: none;
	background: var(--primary);
	color: white;
	border-radius: var(--size-4);
	padding: var(--size-4) var(--size-7);
	margin: 0 0 1.5rem 0;
}

.screen-tutorial-button:hover {
	cursor: pointer;
	background-color: var(--primary-darker);
}

table.screen-tutorial-file-list {
	border-collapse: separate;
	border-spacing: 0 0.75rem;
	margin-top: 0.3rem;
	width: 100%;
}

td.screen-tutorial-document-name {
	border: solid 0.075rem black;
	border-radius: var(--size-6);
	padding-left: var(--size-7);
	padding: var(--size-5);
}

.screen-tutorial-row {
	color: var(--primary);
	margin-right: var(--size-5);
	padding: 0;
	font-size: 1.8rem;
	border: 0;
	background-color: white;
	box-shadow: none;
	float: right;
}

.screen-tutorial-row:focus {
	outline: none;
}

.screen-tutorial-row:hover {
	cursor: pointer;
}

.screen-tutorial-text {
	color: black;
	margin-left: .47rem;
	font-size: 1.4rem;
}

#cancelButton {
	background-color: white;
}

.button .fas {
	 margin-right: 0;
}

.x-records{
	color: black;
	background-color: white;
	border: none;
	padding: none;
	box-shadow: none;
	margin: 0;
	padding: 0;
}

#blue-button{
	font-size: 2rem;
	color: var(--primary);
	margin: 0;
	background-color: white;
	box-shadow: none;
	border: none;
	padding: 0;
}

.x-records:hover{
	background-color: white;
}

.blue-button:hover {
	background-color: white;
}

/* ====== InputWithText ======== */
.inline-element {
	display: flex;
	align-items: center;
}

.inline-span {
	font: black;
	margin-right: var(--size-5);
}

.label_inline {
	grid-row: 1;
	margin-bottom: var(--size-7);
}

.popoutLabelDiv {
	margin-top: var(--size-7); 
	margin-left: var(--size--4);
	margin-bottom: var(--size-4);
}

.popoutLabel {
	margin-left: .47rem;
}

.labelBlack {
	color: black;
	margin-left: .47rem;
}

/* ====== color picker ====== */
.sp-replacer .sp-dd {
	font-size: 1.2rem;
	font-family: 'Font Awesome 5 Pro';
}

.withLabel {
	display: flex;
	position: relative;
}

.inline-span-right {
	margin-left: var(--size-5);
	margin-top: var(--size-3);
	float: right;
}

.inline-span-left {
	margin-right: var(--size-5);
	margin-top: var(--size-3);
	float: left;
}

/* Drag and drop file container */
div.drag_and_drop_files {
	border: 1px dashed #939393;
	text-align: end;
	display: grid;
	grid-template-rows: 5px 40px 10px;
	grid-template-columns: 60% 40%;
	height: 5.4rem;
}

div.drag_and_drop_files input[type="file"] {
    width: 80px;
}

div.drag_and_drop_files input[type="file"][multiple] {
    width: 85px;
}

div.drag_and_drop_files span {
	margin-top: 1.2rem;
	grid-row: 2;
	position: relative;
}

div.drag_and_drop_files.hover {
    color: #000000;
    border: 2px solid #8dbdd8;
}

#fileinputs {
	position: relative;
	top: 1rem;
	grid-row: 2;
	grid-column: 2;
}

#customUploadButton {
	position: relative;
	top: -2.4rem;
	left: 0.5rem;
	height: 2rem;
	float: left;
}

#customUploadButton label {
	background-color: var(--primary);
	color: white;
	font-size: 1rem;
	padding: var(--size-4);
	border-radius: var(--size-4);
}

.chooseFile {
	position: relative;
	text-align: right;
	opacity: 0;
	z-index: 2;
	bottom: .5rem;
	height: 1.9rem;
}

.float-right {
	float: right;
}

.align-right {
	text-align: right;
}

.align-left {
	text-align: left;
}

ul.combobox-list {
	max-width: 75vw;
}

.ui-dialog .ui-dialog-content {
	overflow: hidden auto !important;
}

.ui-dialog .ui-dialog-buttonpane {
	margin-top: 0;
}

.combobox-icon-container {
	padding: 1px 2px;
	margin-top: 0.5rem;
}

.one-third {
	display: inline-block;
	width: 32.5%;
}

.two-thirds, .two-third {
	display: inline-block;
	width: 66%;
}

.toggleSwitch .slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.toggleSwitch input:checked + .slider {
  background-color: #007474;
}

.toggleSwitch input:focus + .slider {
  box-shadow: 0 0 1px #007474;
}

.toggleSwitch input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

.toggleSwitch .slider.round {
  border-radius: 24px;
}

.toggleSwitch .slider.round:before {
  border-radius: 50%;
}

.toggleSwitch {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 15px;
}

.toggleSwitch input[type="checkbox"] {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggleSlider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #227b99;
	transition: .4s;
	border-radius: 15px;
}

.toggleSlider.animateColor {
	background-color: #9a9996;
}

.toggleSlider:before {
	position: absolute;
	content: "";
	height: 11px;
	width: 11px;
	left: 2px;
	bottom: 2px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
}

.toggleSwitch input:checked+.toggleSlider.animateColor {
  background-color: #227b99;
}

.toggleSwitch input[type="checkbox"]:checked+.toggleSlider:before {
	transform: translateX(15px);
}

.multiselectTable {
	width: 100%;
}

.multiselectTable select {
	width: 100%;
}

.text-faded {
	opacity: 0.75;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

@media only screen and (max-width: 600px) {
	.float-none-sm {
		float: none;
	}
	
	.ui-dialog {
		overflow: visible;	
		max-width: 100vw;
		width: 100vw !important;
		height:100vh !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		
		overflow: scroll;
		-ms-overflow-style: none;  /* IE and Edge */
  		scrollbar-width: none;  /* Firefox */
	}
	
	.ui-dialog-titlebar {
		pointer-events: none;
	}
	
	.ui-dialog-titlebar-close {
		pointer-events: initial;
	}
	
	.ui-dialog-buttonset {
		text-align: center;
		width: 100%;
	}
	
	input, textarea {
		max-width: 90vw;
	}
	
	.pretty_form input[type=text], .pretty_form input[type=number], .pretty_form input[type=password], .pretty_form textarea, .pretty_form select {
		width: auto;
	}
	
	.full-width-mobile, div.full-width-mobile {
		width: 100%;
	}
}