:root {
    --serif-family: 'Times New Roman', Georgia, serif;
    --sans-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
    --color-title-text: hsla( 210deg, 35%, 20%, 1 );
    --color-head-bg: hsla( 203deg, 41%, 80%, 1 );
    --color-head-fg: hsla( 210deg, 49%, 29%, 1 );
    --color-cell-bg: hsla( 0deg, 0%, 93%, 1 );
    --color-body-text: hsla( 0deg, 0%, 8%, 1 );
    --color-warning: hsla( 0, 50%, 50%, .5 );
    --color-informational: hsla( 240deg, 100%, 50%, 1 );
    --color-notice-bg: hsla( 57deg, 100%, 91%, 1 );
    --color-notice-border: hsla( 0deg, 0%, 40%, 1 );
    --color-footer-bg:  hsla( 179deg, 39%, 79%, 1 );
    --color-link: hsla( 240deg, 100%, 47%, 1 );
    --color-link-hover: hsla( 240deg, 100%, 47%, 1 );
    --color-link-visited: hsla( 271deg, 68%, 32%, 1 );
    --color-link-active: hsla( 240deg, 100%, 47%, 1 );
    --line-height-multiplier: 1.6;
    --base-font-size: 12px;
    --lh: calc( var( --line-height-multiplier ) * var( --base-font-size ) );
}

[hidden] {
	display: none !important;
}

html {
    font-family: var( --serif-family );
    height: 100%;
}

body {
	position: relative;
	margin: 0;
	height: 100%;
}

button:not(:disabled),
input[type='button']:not(:disabled),
input[type='submit']:not(:disabled),
label {
    cursor: pointer;
}

[aria-disabled]:not([aria-disabled='false']) {
	pointer-events: none;
}

[aria-disabled]:not([aria-disabled='false']),
input[disabled],
button[disabled] {
	opacity: .5;
}

.was-focused:invalid {
	box-shadow: 0 0 2px 2px var( --color-warning );
}

.warning {
	color: var( --color-warning );
}

.informational {
	color: var( --color-informational );
}

input[type='date'] {
	max-width: 6rem;
	font-family: var( --sans-family );
}

input[type='date']::-webkit-calendar-picker-indicator {
	padding: 0;
	margin: 0;
}

input[type='number'] {
	appearance: textfield;
	text-align: right;
}

input[type='date']::-webkit-inner-spin-button,
input[type='number']::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

[data-behaviors*='drag-table-row'] thead tr:before {
	display: table-cell;
	content: '';
}

[data-behaviors*='drag-table-row'] tbody tr:before {
	display: table-cell;
	content: '';
	background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20 9H4v2h16V9zM4 15h16v-2H4v2z'/></svg>");
	width: 24px;
	height: 24px;
	cursor: grab;
}

[data-behaviors*='drag-table-row'] tbody tr:hover td {
	background-color: hsla( 100, 50%, 50%, .5 );
}

select.select_filter {
    max-width: 100px;
}

:focus,
.matching:not([disabled]):not([readonly]) {
    box-shadow: 0 0 0.5px 2px yellow;
}

[data-behaviors*='loading']:before,
.page-loader {
	content: '';
	position: fixed;
	display: flex;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 100;
	background-image: url('/web/images/dna_loading_spinner.gif');
	background-size: 80px 80px;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: rgba( 0, 0, 0, .1 );
}

iframe {
	border: 0;
	overflow: hidden;
}

.pagination {
	height: calc( 2 * var( --base-font-size ) );
	line-height: calc( 2 * var( --base-font-size ) );
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
	min-width: calc( 40 * var( --base-font-size ) );
}

.pagination li:not(:first-of-type) {
	margin-left: 2px;
}

.pagination button span {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: white;
}

.pagination button[type='button'] {
	font-size: calc( 5 / 3 * var( --base-font-size ) );
	line-height: calc( 2 * var( --base-font-size ) );
	height: calc( 2 * var( --base-font-size ) );
	width: 100%;
	text-align: center;
	padding: 0;
	position: relative;
	border: none;
}

.pagination .prev span,
.pagination .next span {
	background-image: url('/web/images/left.svg');
}

.pagination .first span,
.pagination .last span {
	background-image: url('/web/images/left-line.svg');
}
.pagination .last span,
.pagination .next span {
	transform: scaleX(-1);
}

.pagination.begin .first,
.pagination.begin .prev,
.pagination.end .next,
.pagination.end .last {
	opacity: .5;
	pointer-events: none;
}

.faded {
	opacity: .5;
}

.empty {
	opacity: .5;
	text-align: center;
}

.group-list {
	display: flex;
}

.group-list dd {
	color: blue;
	margin: 0 1ch;
}

.defaultBackgroundColor {
    background-color: var( --color-cell-bg );
}

.mainHeaderText {
    font-family: var(--serif-family);
    font-size: 30px;
    color: var( --color-title-text );
}

.header-row {
	display: flex;
	align-items: center;
	height: auto;
	font-family: var(--serif-family);
	font-size: calc( 4 / 3 * var( --base-font-size ) );
	font-weight: normal;
}

.header-row.right {
	float: none;
	flex-direction: row-reverse;
}

.header-row :where( form, fieldset:not(.toggle-button):not([hidden]) ) {
	display: contents;
}

.header-row :where( button, label ) {
	margin-left: 1ch;
}

.header-row dl {
	display: inline-flex;
	margin-top: 0;
	margin-bottom: 0;
	outline: 1px solid var( --color-body-text );
}

.header-row dd {
	margin: 0 0 0 var( --lh );
}

#dataSelectionForm > * + *,
.header-row > * + * {
	margin-left: var( --lh );
}

.header-text {
    font-family: var(--serif-family);
    font-size: var( --lh );
    font-weight: bold;
    color: var( --color-title-text );
    text-align: center;
    margin: 0;
}

body.header-row {
	height: 100%;
}

body.header-row .header-text {
	max-width: 180px;
	width: 100%;
}

.miniHeaderText {
    font-family: var(--serif-family);
    font-size: 17px;
    font-weight: bold;
    color: var( --color-title-text );
}

.headerLinks {
    color: var( --color-title-text );
}

.errorText {
    font-family: var(--serif-family);
    font-size: 20px;
    color: #f00;
}

.rowHighlightClass td {
    background-color: #f44;
}

input[type='text'],
.textClass {
    background: var( --color-cell-bg );
    font-family: var(--sans-family);
    font-size: var( --base-font-size );
    box-sizing: border-box;
}

select,
.selectClass {
    background: var( --color-cell-bg );
    font-family: var(--sans-family);
    font-size: var( --base-font-size );
}

.like-link {
	background: transparent;
	text-decoration: underline;
	border: 0;
	color: var( --color-link );
}

[data-drill-key] {
	display: flex;
	cursor: pointer;
}

[data-drill-key]:before {
	content: '';
	display: block;
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
	background-color: currentColor;
	width: calc( var( --lh ) / 2 );
	height: calc( var( --lh ) / 2 );
	margin: auto;
	transition: transform .3s linear;
}

.open [data-drill-key]:before {
	transform: rotate( .25turn );
}

[readonly] {
	cursor: default;
}

[readonly],
.displayClass {
    font-family: var(--sans-family);
    font-size: var( --base-font-size );
    color: #333;
    background: rgba( 0, 0, 0, .02 );
    border-style: none;
}

.buttonClass {
    font-family: var(--sans-family);
    font-size: 13px;
}

.draghover {
	outline: 1px dotted black;
}

.hidden {
	display: none;
}

.text {
	text-align: left;
}

.centered {
	text-align: center;
}

.numeric,
col.number {
	text-align: right;
	background-color: orange;
}

.horizontal-section {
	display: block;
}

.linear-form {
	max-width: 30rem;
	display: flex;
	flex-direction: column;
}

.linear-form > :where(*) {
	margin-top: calc( 1 / 2 * var( --lh ) );
	min-height: var( --lh );
}

.linear-form > :where(label, div, fieldset) {
	display: flex;
}

.linear-form > :is( table, button ) {
	margin: auto;
}

.linear-form :is(label, div) > span {
	height: var( --lh );
	margin-right: calc( 1 / 2 * var( --lh ) );
	line-height: var( --lh );
	vertical-align: bottom;
	flex-basis: 9rem;
}

.linear-form :is(label, div) > :where(
	textarea,
	select,
	input:is( [type='text'], [type='number'], [type='file'] )
) {
	margin-left: auto;
	flex-basis: 15rem;
}

.linear-form button {
	margin: calc( 1 / 2 * var( --lh ) ) auto;
}

div.listTableClass,
div.listTableClassSmall {
    width: auto;
    overflow: auto;
}

table:is( .listTableClass, .listTableClassSmall ) tbody :is(input[type='checkbox'], select) {
	width: 100%;
	margin: 0;
}

div.listTableClass {
    height: 400px;
}

div.listTableClassSmall {
    height: 200px;
}

.listTableClass {
	vertical-align: top;
}

#sampleTable > tbody {
	max-height: 400px;
	overflow-y: auto;
}

.listTableClass td {
	min-width: var( --lh );
}

.listTableClass tr:hover,
.listTableClassSmall tr:hover {
	outline: 1px solid rgba(0,0,0,.25);
}

.side-by-side {
	margin: var( --lh ) 0;
	display: flex;
	max-width: calc( 50 * var( --lh ) );
}

.side-by-side > div {
	flex: 1;
}

.side-by-side > div > * {
	margin: 0 0 var( --lh );
}

.side-by-side div:not(:first-of-type) {
	border-left: 1px solid currentColor;
	margin-left: var( --lh );
	padding-left: var( --lh );
}

.scroll-list {
	list-style: none;
	height: calc( 12 * var( --lh ) );
	resize: vertical;
	overflow-y: auto;
	padding: 0;
}

.scroll-list label:is( :hover, :focus, :focus-within ) {
	background-color: var( --color-head-bg );
}

.scroll-list.small {
	max-height: calc( 6 * var( --lh ) );
}

#headerRow { /* XXX figure out a better selector */
	width: 2rem;
}

caption {
	text-align: left;
	font-weight: 700;
	line-height: var( --lh );
	margin: calc( var( --lh ) / 2 ) 0;
}

/* used as a table row template for add new rows to a table */
tr[data-row='-1'] {
	display: none;
}

td {
    font-family: var(--sans-family);
    font-size: var( --base-font-size );
    padding: 0;
}

th {
    font-family: var(--sans-family);
    font-size: var( --base-font-size );
    text-align: center;
}

/* this is for the top frame controls...  */
.selectTableClass td {
    padding: 0 5px;
}

table.listTableClass {
    background-color: white;
    border-spacing: 2px;
}

.listTableClass th {
    text-align: center;
    font-family: var(--sans-family);
    background-color: var( --color-head-bg );
    color: var( --color-head-fg );
    font-size: var( --base-font-size );
}

.thListTableClass {
    text-align: center;
    font-family: var(--sans-family);
    background-color: var( --color-head-bg );
    color: var( --color-head-fg );
    font-size: var( --base-font-size );
    font-weight: bold;
}

.thInputHeaderClass {
    text-align: center;
    border-style: none;
    font-family: var(--sans-family);
    background-color: var( --color-head-bg );
    color: var( --color-head-fg );
    font-size: var( --base-font-size );
    font-weight: bold;
}

:where(.listTableClass, .listTableClassSmall) :where(th, td) {
    background-color: var( --color-cell-bg );
    font-family: var(--sans-family);
    font-size: var( --base-font-size );
    padding: 0;
}

#displayBody {
    font-family: var(--sans-family);
    font-size: var( --base-font-size );
}

#displayBody:not([data-mode='select']) {
    box-sizing: border-box;
    padding: 1ch;
}

#displayFullBody {
    font-family: var(--sans-family);
    font-size: 13px;
    height: 100%;
}

#subFormWithWhereColumn,
#subForm {
	display: none;
}

#displayFullBody main {
    min-height: 100%;
    position: relative;
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

main {
	width: max-content;
	max-width: 100%;
}

/* only used on login page */
#header {
    background-image: url('/header-image');
    background-repeat: no-repeat;
    background-color: transparent;
    text-align: center;
    padding-top: 100px;
}

#header .header-text {
	line-height: calc( 2 * var( --lh ) );
	max-width: 1000px;
}

.login-form {
	display: flex;
	flex-direction: column;
	padding: calc( 4 * var( --lh ) ) 25%;
}

.login-form label {
	margin: calc( var( --lh ) / 2 ) 0;
}

.login-form label span {
	display: inline-block;
	width: calc( 4 * var( --lh ) );
}

.login-form button {
	margin: var( --lh ) auto;
}

.requirements {
	margin: 0 25%;
	color: blue;
}

.release-notice {
	margin: 0 25% var( --lh );
	padding: 0 calc( 1/2 * var( --lh ) );
	border: 1px solid var( --color-notice-border );
	background-color: var( --color-notice-bg );
}

.login-form button {
	max-width: calc( 5 * var( --lh ) );
}

#body {
    padding: 1px;
}

body > footer {
    text-align: center;
    color: var( --color-title-text );
    background-color: var( --color-footer-bg );
    display: flex;
    width: 100%;
    max-height: 60px;
    height: 100%;
    text-align: center;
}

body > footer:not(:only-child) {
    position: absolute;
    bottom: 0;
}

body > footer a:link {
    color: var( --color-title-text );
    text-decoration: none;
}

body > footer li {
    padding: 0 1rem;
    height: 1rem;
}

body > footer li + li {
    border-left: 1px solid var( --color-title-text );
}

body > footer ul {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: auto;
    padding: 0;
}

/*Sample_suggest*/
.suggest_link {
    background-color: #fff;
    padding: 2px 6px 2px 6px;
}
.suggest_link_over {
    background-color: #36c;
    padding: 2px 6px 2px 6px;
}
#search_suggest {
    position: absolute;
    background-color: #fff;
    text-align: left;
    border: 1px solid #000;
}

.newOrderTextarea {
    width: 270px;
    height: 65px;
}

/*Chip Plate*/

.chipplate div{
    min-width: 50px;
    min-height: 20px;
    text-align: center;
}

/*Plates*/
.rowHandle,
.plateWell,
.jobWell {
    min-width: 50px;
    min-height: 20px;
    text-align: center;
}

.rowHandle,
.plateWell {
    cursor: pointer;
}

.selectedJobWell {
   background-color: cyan;
}

.selectedPlateWell {
    background-color: cyan;
}

table.plate {
    color: #333;
    border-width: 1px;
    border-color: var( --color-notice-border );
    border-collapse: collapse;
}

table.plate th {
    text-align: center;
    background-color: var( --color-head-bg );
    border: 1px solid var( --color-notice-border );
    color: var( --color-head-fg );
    min-width:50px;
    min-height:20px;
}

table.plate td {
    background-color: var( --color-cell-bg );
    border: 1px solid var( --color-notice-border );
    min-width: 50px;
    min-height: 20px;
}

table.plate td.header {
    background-color: var( --color-head-bg );
    text-align: center;
    color: var( --color-head-fg );
    font-weight: bold;
}

table.plate .jobplated,
.jobplated {
    background-color: #0f0;
}

table.plate .notjobplated,
.notjobplated{
    background-color: #F0E68C;
}

table.dataTable thead th,
table.dataTable tbody th,
table.dataTable tfoot th,
table.dataTable thead td,
table.dataTable tbody td,
table.dataTable tfoot td {
    padding: 0;
}

table.dataTable td.Details > * {
	width: auto;
}

table.dataTable tfoot th input {
    width: 95%;
}

.button-bar-right {
    text-align: right;
    padding: 5px 0px;
}

.addprojectsamples,
.fastReport {
    float: right;
}

label:only-child {
    display: block;
}

.ui-selecting {
    background: #FECA40;
}

.ui-selected {
    background: #F39814;
    color: white;
}

 .ui-tabs-vertical {
    width: 55em;
}

.ui-tabs-vertical .ui-tabs-nav {
    padding: .2em .1em .2em .2em;
    float: left;
    width: 12em;
}
.ui-tabs-vertical .ui-tabs-nav li {
    clear: left;
    width: 100%;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    margin: 0 -1px .2em 0;
}

.ui-tabs-vertical .ui-tabs-nav li a {
    display: block;
}

.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    padding-bottom: 0;
    padding-right: .1em;
    border-right-width: 1px;
    border-right-width: 1px;
}

.ui-tabs-vertical .ui-tabs-panel {
    padding: 1em;
    float: right;
    width: 40em;
}

#jobstree {
    padding: 0px;
}

#jobstree div {
    padding: 5px 0px;
}

#jobstree div.header {
    background-color: var( --color-head-bg );
    width: 700px;
    color: var( --color-head-fg );
}

#jobstree ul li {
    list-style-type: none;
}

#jobstree ul li.userjobs {
    border: 1px solid var( --color-notice-border );
    margin: 1px;
}

#jobstree li img {
  padding: 0px 5px;
}

#jobstree ul.jobs li {
    display: table-cell;
    padding: 5px 20px;
    background-color: var( --color-cell-bg );
}

#jobtree {
    padding: 15px;
}

#jobtree .jobuser {
    border: 1px solid #c5dbec;
    margin-bottom: 5px;
    min-width: 600px;
}

#jobtree .jobuser h3 {
    margin: -1px
}

#jobtree .jobsteps,
#jobtree .jobstep,
#jobtree .jobstep .jobs {
    padding-left: 20px;
}


/* ADVANCING JOBS POPUP CSS */

  /* The Modal (background) */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  #my-modal > .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    padding-bottom:32px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
  }
  
  /* The Close Button */
  #my-modal > .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  #my-modal > .close:hover,
  #my-modal > .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  } 
  
  #ok-btn{
      float: right;
      padding: 4px 8px;
      border-radius: 2px;
      border: 1px solid #ccc;
      font-weight: bold;
  }

.ui-dialog {
	  border-radius: 25px;
}

.ui-dialog-titlebar  {
	border-radius: 25px 25px 0px 0px;
	padding-left: 11px;
	background-color: #b5dede;
}

.ui-dialog-buttonpane {
	border-radius: 0px 0px 25px 25px;

}

.ui-dialog .ui-dialog-titlebar-close {
	height: 29px;
	width: 41px;
	top: 9px;
	right: -2px;
	border-radius: 0px 25px 0px 0px;
	background-color: #b5dede;
}

.ui-button-icon-only .ui-icon {
	margin-left: -10px;
}

.ui-dialog .ui-dialog-buttonpane button {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid #00000030;
	border-radius: 4px;
	text-decoration: none;
}

 #dialogOuter{
	 display: none;
	 background: none repeat scroll 0 0  rgb(153, 153, 153, 0.6);
	 position: fixed;
	 height: 100%;
	 width: 100%;
	 left: 0;
	 top: 0;
	 z-index: 1200;

 }
#dialog{
	border-radius: 25px;
	margin-left: 200px ;
	margin-top:  80px;
	background-color: white;
	opacity: 1;
	width: 350px;
	padding: 8px 0px 8px 30px ;

}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	text-align: center;
}

#dialogHeader {
	font-size: 14px;
	font-weight: bold;
	margin-top: -5px;
	margin-left: -5px;
	padding-top:5px;
	padding-bottom: 5px;
}
#dialogBody {
	overflow-y : auto;
	margin-left: 7px;
	margin-right: 19px;
	padding-bottom: 7px;
}
#dialogButton {
	position: relative;
	left:35%;
}

.pleaseWait{
	display: none;
	background: none repeat scroll 0 0  rgb(153, 153, 153, 0.6);
	position: fixed;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 1200;

}
#pleaseWaitInner{
	display: none;
	border-radius: 25px;
	margin-left: 200px ;
	margin-top:  80px;
	background-color: #00746b;
	color:	white;
	font-weight: bold;
	opacity: 1;
	width: 400px;
	padding: 0px ;
	overflow: hidden;
}

.spinner {
	height: 80px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: -4px;
	vertical-align: middle;
}
.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	display: none;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	outline: 0;
}

.modal-open .modal {
	overflow-x: hidden;
	overflow-y: auto;
}