* {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

@media screen {
  #bodywrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.7;
}

.nowrap {
  white-space: nowrap;
}

.rfloat {
  float: right;
}

.inset {
  border: 1px inset #ddd;
  border-radius: 4px;
  overflow: auto;
  margin: 6px 0;
  background-color: #fff;
}

li + li {
  margin-top: 6px;
}

h1 {
  margin: 4px 0;
  font-size: 1.2em;
  color: #213B40;
  text-align: center;
}

h2, h3, h4 {
  color: #444;
  margin: 12px 0 0 2px;
  font-size: 1.2em;
}
h2:first-child, h3:first-child, h4:first-child {
  margin: 0 0 0 2px;
}

pre {
  margin-top: 0;
}
button:not(.link),input[type=button],input[type=submit],a.button,a.smallbutton,label.ckbox {
  background-color:#e2e4e6;
  border-radius: 6px;
  text-indent:0;
  border:1px solid #aaa;
  display:inline-block;
  color:#444;
  font-size: 15px;
  font-family:arial;
  font-weight:bold;
  text-decoration:none;
  text-align:center;
  padding: 6px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  line-height: 1.7;
}

label.ckbox {
  text-align: left;
  font-weight: normal;
}
label.ckbox > * {
  vertical-align: middle;
}

body.devmode {
  background-image: url(../images/testwatermark.svg);
}

/* ensure links are accessible - (if too small, they fail accessibility checks) */
a[href]:not(a.button,a.smallbutton) {
  display: inline-block;
  min-width: 24px;
  min-height: 24px;
}
a:not(a.button,a.smallbutton) {
  color: #008;
  text-align: inherit;
}

a.button, a.smallbutton {
  background-position: 3px 9px;
  background-repeat:no-repeat;
  color:#444;
}
a,button.link {
  text-decoration: underline;
  cursor: pointer;
  box-shadow: none;
  margin: 0;
  padding: 0;
  text-align: left;
  -webkit-tap-highlight-color: rgba(0,0,0,.1);
}

button[disabled],label.ckbox.disabled {
  cursor: not-allowed;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #efefef), color-stop(1, #fff) );
  background:-moz-linear-gradient( center top, #efefef 5%, #fff 100% );
  background-color:#fff;
  color: #666;
}
a.button *, button * {
  vertical-align: middle;
}
a:hover,button:hover,input[type=button]:hover,input[type=submit]:hover,a.button:hover,a.smallbutton:hover,label.ckbox:hover {
  color: #00f !important;
}
button.selected {
  -moz-box-shadow:inset 0px 1px 0px 0px #000;
  -webkit-box-shadow:inset 0px 1px 0px 0px #000;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #009b00), color-stop(1, #007a00) );
  background:-moz-linear-gradient( center top, #009b00 5%, #007a00 100% );
  background-color:#e2e4e6;
  color: white;
  border:1px inset #aaa;
}
button.link {
  border: 0;
  background: none;
}

a.button, a.smallbutton {
  display: inline-block;
  text-decoration: none;
  padding: 6px;
  text-align: center;
}
a.smallbutton {
  font-size: .8em;
}
table {
  border: 0;
  border-collapse: collapse;
}
label {
  color: #444;
  font-size: .9em;
  font-weight: bold;
  margin-right: 2px;
}


label > * {
  vertical-align: middle;
}
form {
  padding: 0;
}

select,input:not([type=hidden]):not([type=button]):not([type=submit]):not([type=file]),textarea {
  background-color: white;
  padding: 4px;
  color: blue;
  border-radius: 1px;
  font-size: 12px;
  border: 1px solid #ccc;
}
.readonlyfieldval {
  display: inline-block;
  font-weight: normal;
}
[readonly]:not(input[type=checkbox],input[type=radio],.nfpa_health,.nfpa_flame,.nfpa_reac,.nfpa_spec) {
  color: #444 !important;
  background-color: #eee !important;
}
.readonlyfieldval {
  color: #444 !important;
}
.readonlycheckbox {
  color: blue;
  font-size: 1.3em;
  position: relative;
  top: -2px;
}


/* we don't want this because empty fields should take up 1.2 height when printing formsubmission records
.readonlyfieldval:empty {
  display: none;
}
*/

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

select {
  padding: 4px;
}
textarea.autoheight {
  font-size: 1em;
  height: 1.2em !important;
}
textarea.autoheight:focus {
  height: 10em !important;
}
input:focus,textarea:focus,select:focus {
  background-color: #ffd !important;
}
.invisible {
  visibility: hidden;
}
fieldset {
  border-radius: 6px;
}
legend {
  font-weight: bold;
}

.busy {
  opacity: .6 !important;
}
.busy > * {
  cursor: wait !important;
}
.selected {
  background-color: #dae2ff !important;
}

/* common classes styles */
.comboselect {
  position: relative;
  width: calc(100% - 10px);
  max-width: 600px;
  height: 2em;
  display: block;
  margin: 0 0;
}
.comboselect select {
  width: 100% !important;
  height: 100% !important;
  position: absolute; 
  right: 0;
  top: 0;
  padding: 0;
  margin: 0;
}
.comboselect input {
  border: 0 !important;
  position: absolute;
  width: calc(100% - 4em);
  height: calc(100% - 12px); 
  left: 2px;
  top: 2px;
}

.row + .row {
  border-top: 1px solid #ccc;
  margin: 10px 0px;
}

.row > label {
  display: inline-block;
  margin-top: 10px;
}

.smaller {
  font-size: .8em;
}
.center {
  text-align: center;
}
.justify {
  display: table;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.justify > * {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 1%;
}

.centerchildren {
  display: flex;
  justify-content: center;
}
.centerchildren > * {
  margin: 10px; 
}

.details {
  display: block;
  color: #111;
  font-size: .8em;
  margin-top: 10px;
}
.fieldnote {
  color: #111;
  font-size: .8em;
  margin: 10px 0 0 0;
}
.reqind:before {
  display: inline-block;
  content: '*';
  margin-right: 2px;
  font-weight: bold;
  color: #900;
}
.reqfieldmsg {
  text-align: center;
}

.OQhead, .bgcolor {
  background-color: #444 !important;
  border-color: #666;
  color: white;
}

.OQdata thead a {
  color: #222;
}
.OQrecviewLabel {
  margin-left: 4px;
  font-weight: bold;
  font-size: 1em;
}
.OQrecviewVal {
  margin-left: 8px;
}
.OQrecviewVal + .OQrecviewLabel {
  margin-top: 4px;
  padding-top: 4px;
}


.embeddedOQtxt {
  white-space:pre-wrap;
  padding:10px;
}

.embedhtml {
  display:block;
  width:calc(100% - 14px);
  border:1px #ccc solid;
  padding:0;
  background-color:white;
  resize:both;
  overflow: auto;
  padding: 6px;
}
.oqembedhtml {
  background-color:transparent;
  resize:both;
  max-height: 200px;
  overflow: auto;
}

iframe[src*=DBfile] {
  padding: 8px;
  border: 0;
  resize: both;
  overflow: auto;
}


html.tabframe .OQrefreshBut {
  display: none !important;
}
.dataassocgrid {
  border-collapse: collapse;
  font-size: .8em;
  width: auto !important;
}
.dataassocgrid td {
  border: 1px dotted #ccc;
  border-bottom-width: 1px;
  padding: 6px;
  text-align: right;
  color: #333;
}
.dataassocgrid tr:first-child td {
  border-top: 0;
}

.dataassocgrid td:first-child {
  text-align: left;
}

.anchor {
  position:relative;
  display:inline-block;
  width:0;
  height:0;
  vertical-align: middle;
}
a.acopenlink {
  position: absolute;
  height: 13px;
  width: 26px;
  display: inline-block;
  font-size: 10px;
  top: -6px;
  left: -88px;
}
input.hasopenlink {
  padding-right: 36px !important;
  width: calc(100% - 130px) !important;
}



.label6 {
  display:inline-block;
  font-size:.9em;
  text-align: right;
  width:6em;
}
.content {
  max-width: 600px;
  margin: auto;
}
.smallcontent {
  max-width: 600px;
  margin: auto;
  font-size: .8em;
}
.clicky, select {
  cursor: pointer;
}
.inline {
  display: inline-block;
}
.hidden {
  display: none;
}
div.msg {
  padding: 16px;
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 6px;
  color: #222;
  max-width: 600px;
  margin: 10px auto;
}
.msg,.errormsg {
  padding: 6px; border: 2px solid #ccc;
  margin: 6px; background-color: #eee;
  font-size: .9em;
  border-radius: 6px;
}
.errormsg {
  background-color: black;
  color: white;
}
.infomsg {
  background-color: #efefef;
}
/* format message box or error box */
.message,
.errormessage {
  max-width: 700px;
  margin: 1em auto;
  border: 2px solid #ccc;
  border-radius: 6px;
  background-color: #ddd;
  padding: 10px;
  position: relative;
  color: #222;
}
.message small,
.errormessage small {
  color: #444;
}
.message pre,
.errormessage pre {
  overflow: hidden;
}




/* simple form inputs */
.inp {
  padding: 10px 0;
}
.msgbox > .inp:first-child {
  padding-top: 0;
}

.inp + .inp {
  border-top: 1px solid #ccc;
}
.inp input[type=text]:not(.autocomplete),
.inp input[type=search] {
  width: calc(100% - 36px);
}
.inp textarea, .visedit_field textarea {
  width: calc(100% - 36px);
  height: 4em;
  padding: 2px;
}
.visedit_field > .embedhtml {
  display: none;
  font-weight: normal;
}


thead.sticky td {
  position: sticky;
  top: -1px;
}

/* simple table styles */
table.grid {
  border-collapse: collapse;
}
table.grid td {
  border: 1px solid #ccc;
  padding: 4px;
}
table.grid > tbody > tr:nth-child(even) > td {
  background-color: #eee;
} 
table.grid > thead > tr > td {
  text-align: center;
  background-color: #ddd;
  font-size: .8em;
  font-weight: bold;
  color: #444;
}
table.keyval {
  border-collapse: collapse;
  width: auto;
}
table.keyval td {
  font-weight: bold;
  font-size: .9em;
  text-align: right;
  border: 0;
  padding: 2px;
  color: #333;
}
table.keyval td + td {
  font-weight: normal;
  text-align: left;
  padding-left: 6px;
}
table.keyval tr + tr td {
  border-top: 1px solid #ccc;
}

table.ingrid td {
  padding: 0 2px;
}
table.ingrid td + td {
  border-left: 1px dotted #aaa;
}
table.ingrid tr + tr > td {
  border-top: 1px dotted #aaa;
}


/* msgbox styles */
.msgbox {
  display: block;
  background-color: #e2e4e6;
  border-radius: 6px;
  text-indent:0;
  border:1px solid #bbb;
  display:block;
  color:#222;
  padding: 16px;
  margin: 10px auto;
  width: calc(100% - 60px);
  max-width: 600px;
  box-shadow: 5px 5px 16px -7px;
}
.msgbox h1:first-child,
.msgbox h2:first-child {
  margin-top: 0; 
}

.notify-info, .notify-error, .notify-success {
  display: inline-block;
  padding: 2px 4px;
  border-radius: 2px;
  color: #700;
  border: 1px solid #700;
  background-color: #fff7f7;
  margin: 4px;
}
.notify-info {
  color: #000f79;
  border-color: #000f79;
  background-color: #dde1ff;
}
.notify-success {
  color: #1d7700;
  border-color: #1d7700;
  background-color: #edffe7;
}


.alerttext {
  color: #900;
  font-weight: bold;
}


/* expander */
.expander {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  margin: 10px 0;
  color: #444;
  font-size: .9em;
  font-weight: bold;
}
.expander {
  cursor: pointer;
}
.expander:before {
  content: '\25B8';
  position: relative;
  margin-right: 8px;
  font-size: .9em;
}
.expander.opened:before {
  content: '\25BE';
}
.expander:hover {
  background-color: #ffd;
}
.expander + * {
  display: none;
  margin: -1px 0px 10px 0px;
}
.expander.opened {
  margin-bottom: 0px;
}
.expander.opened + * {
  display: block;
}
summary {
  cursor: pointer;
  padding: 6px;
}
summary:hover {
  background-color: #ffd;
}

/* keydialogs */
#keydialogpos {
  position: absolute;
}
#keydialog {
  background-color: #eee;
  border: 1px solid #ccc;
  max-width: 90%;
}
#keydialog a {
  display: block;
  text-decoration: none;
  padding: 10px;
}
#keydialog a.selected {
  background-color: #bbb;
}
#keydialog a + a {
  border-top: 1px solid #ccc;
}

#keydialog .chemname {
  font-style: italic;
  color: #222;
}
#keydialog .prodno {
  font-weight: bold;
}
#keydialog .manufact {
  color: green;
}
button.ActivateKeyDialogBut {
  margin-left: -3px;
}

.viseditcontainer {
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background-color:#999;
}
.viseditcontainer2 {
  position:absolute;
  top:10px;left:10px;right:10px;bottom:10px;
  border:1px solid #9e9e9e;
  border-radius:3px;
  box-shadow: 0 3px 7px;
  background-color:#fff;
}
.viseditcontainer2 iframe {
  border:0;width:100%;height:calc(100% - 3em);
}
iframe + .viseditclosebut {
  position:absolute;
  top:0;right:0;
  color:#858585;
  cursor:pointer;
  height:26px;
  width:26px;
  background:none;
  font-family:serif;
  border:0;
  padding:0;
  margin:0;
}
.viseditcontainer2 .justify {
  padding: 6px;background-color:#ccc;border-top:1px solid #bbb;
}



/* chemical inventory tags */
.emptytag, .transferredtag, .intranstag, .hiddentag, .surplustag {
  display: inline-block;
  color: white;
  padding: 4px;
  font-size: 12px;
  border-radius: 5px;
  margin-left: 4px;
}
.emptytag {
  background-color: #222;
}
.transferredtag {
  background-color: #106;
}
.intranstag {
  background-color: #c3a;
}
.hiddentag {
  background-color: #555;
}
.surplustag {
  background-color: #070;
}


/* NFPA widget */
.nfpawidgetcontainer {
  max-width: 200px;
  margin: 0 auto;
  position: relative;
}
.nfpawidgetmsg {
  font-size: 12px;
  padding: 6px;
  margin: 0;
  width: calc(100% - 12px);
}
.nfpawidget {
  font-size: 12px;
  position: relative;
}
.nfpawidget > img {
  width: 100px; 
  height: 100px;
  width: 100%;
  height: 100%;
}
.nfpawidget > input {
  font-size: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  width: 20% !important;
  height: 20% !important;
  text-align: center !important;
  color: white !important;
  border: 0 !important;
  font-weight: bold !important;
}
.nfpawidget > input:focus {
  color: inherit !important;
}
.nfpawidget .nfpa_flame {
  position: absolute;
  top: 15%;
  left: 40%;
  background-color: rgb(255,0,0) !important;
}
.nfpawidget .nfpa_reac {
  position: absolute;
  top: 40%;
  right: 15%;
  background-color: rgb(255,224,0) !important;
  color: black !important;
}
.nfpawidget .nfpa_spec {
  position: absolute;
  bottom: 16%;
  right: 40%;
  background-color: white !important;
  color: black !important;
}
.nfpawidget .nfpa_health {
  position: absolute;
  left: 15%;
  top: 40%;
  background-color: rgb(0,64,255) !important;
}


/* new recform */
.recform2 {
  position: relative;
  max-width: 60em;
  margin: auto;
}
.recform2 label, .recform2 h2, .recform2 details > summary {
  text-align: left;
  font-size: 1em;
  color: #222;
  font-weight: bold;
}
.recform2 h3 {
  color: #555;
  margin: 0 0 .4em 0;
  font-size: .9em;
}

.recform2 .forminput {
  position: relative;
  border: 0;
}

.recform2 ul {
  margin: 0;
}
.recform2 .tipbox {
  float: left;
  width: 40%;
  color: #222;
  margin: 1em;
  font-size: .7em;
}
.recform2 .errormessage {
  color: #900;
}
.recform2 .inp1.lfloat {
  float: left;
  clear: none;
  width: auto;
  margin-right: 3px;
}
.recform2 .inp1.rfloat {
  float: right;
  clear: none;
  width: auto;
  margin-left: 3px;
}
.recform2 .inp0, .recform2 .inp1 {
  clear: both;
  position: relative;
}
.recform2 .inp0 + .inp0, .recform2 .inp1 + .inp1 {
  border-top: 1px solid #bbb;
  padding-top: 10px;
  margin-top: 10px;
}
.recform2 .inp1 .children {
  position: relative;
  padding: 2px 0;
  margin-left: 1em;
}
.recform2 textarea {
  width: calc(100% - 36px);
  height: 8em;
}
.recform2 input[type=text]:not(.autocomplete):not([size]) {
  width: calc(100% - 36px);
}
.recform2 .inp1 small {
  color: #111;
}
.recform2 .cmdbar {
  margin-top: 10px;
}
.recform2 .cmdbar button {
  padding: 4px;
  margin-left: 10px;
}
.recform2 ul.recrelations {
  font-size: 1em;
  margin: 0 0 0 24px;
  padding: 0;
}
.recform2 .NewRec .HideForNewRec {
  display: none;
}
.recform2 .NewRec button.HideForNewRec {
  display: inline;
  visibility: hidden;
}
.recform2 .ButtonPanel > button {
  width: 96%;
  padding: 1%;
  margin: 1%;
}

/* upload button */
.DBfileWidget {
  padding: 4px;
}
.DBfileWidget + .DBfileWidget {
  border-top: 1px solid #ccc;
}
.DBfileWidget .fileuploadpreview img {
  background-color: white;
  padding: 0;
  margin: 10px;
}
.DBfileUploadBut {
  display: inline-block;
  position: relative;
  width: 5em;
  overflow: hidden; 
}
.DBfileUploadButArea > * {
  vertical-align: middle;
}
.DBfileUploadBut input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  margin: 0;
  font-size: 2em;
  height: 1.2em;
  cursor: pointer;
}
.DBfileInfo {
  color: #222;
  margin: 10px;
  margin-left: 20px;
  font-size: .9em;
}
.DBfileUploadRules {
  color: #555;
  font-size: .9em;
  display: inline-block;
}
.DBfileClearBut img {
  height: 16px; 
}

/* jquery auto complete */
.autocomplete {
  width: calc(100% - 101px);
  max-width: 500px;
}

.autocomplete ~ button {
  margin: 0;
  margin-left: -3px;
  border-radius: 0;
  min-width: 2em;
}
.autocomplete ~ button:first-of-type {
  border-radius: 6px 0 0 6px;
}
.autocomplete ~ button:last-of-type {
  border-radius: 0 6px 6px 0;
}


.acResults {
  padding: 0px;
  border: 1px solid WindowFrame;
  background-color: Window;
  overflow: hidden;
  z-index: 999999;
}

.acResults ul {
  margin: 0px;
  padding: 0px;
  list-style-position: outside;
  list-style: none;  
}

.acResults ul li {
  margin: 0px;
  padding: 2px 5px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  display: block;
  font: menu;
  font-size: 1.1em;
  overflow: hidden;
}
.acResults li + li {
  border-top: 1px solid #eee;
}

.acLoading, .ajaxck-pending {
  background : url('../images/indicator.gif') right center no-repeat;
}
.acSelect {
  background-color: Highlight;
  color: HighlightText;
}
.ajaxck-error {
  border-color: red;
}








/* ckbox group */
.ckboxgrp {
  border-radius: 4px;
  max-height: 90%;
  max-width: 100%;
  overflow: auto;
  margin-top: 6px;
  background-color: #fff;
}
.ckboxgrp:has(label) {
  border: 1px inset #ddd;
}
.ckboxgrp label {
  display: block;
  cursor: pointer;
  font-size: 12px;
  font-weight: normal;
  padding: 4px;
  position: relative;
}
.ckboxgrp label + label {
  border-top: 1px solid #ddd;
}
.ckboxgrp label:hover {
  background-color: #ffd;
}
.ckboxgrp * {
  vertical-align: middle;
}
.ckboxgrp input {
  margin: 10px;
}


#copy2clipboardalert {
  color: green;
  margin-left: 10px;
  display: none;
}







/* ghs haz class widget */
.AutoCompleteHazclass * {
  vertical-align: middle;
}
.AutoCompleteHazclass label {
  font-weight: normal;
  cursor: pointer;
  color: blue;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.AutoCompleteHazclass {
  max-width: 800px;
  min-width: 100%;
  display: inline-block;
}
.HazLabel > ul {
  padding-left: 18px;
}
.HazLabel li {
  font-size: .9em;
  color: #222;
}
.HazLabel > * {
 margin: 6px; 
}
.HazSignalWord {
  text-transform: uppercase; 
  background-color: white;
  font-weight: bold;
  color: black;
  text-align: center;
  padding: 5px;
  font-size: 29px;
  display: inline-block;
  border: 3px solid red;
  font-family: monospace;
}


/* https://github.com/collinsp/jquery-simpledatepicker */
.jquery-simpledatepicker-datepicker {
  width: 22em;
  position: absolute;
  z-index: 999999;
  border: 1px inset #222;
  background-color: white;
  font-family: sans-serif;
}
.jquery-simpledatepicker-datepicker * {
  float: left;
  width: 14%;
  line-height: 2.2em;
  text-align: center;
  text-decoration: none;
}
.jquery-simpledatepicker-datepicker span {
  font-size: 0.8em;
  text-decoration: underline;
}
.jquery-simpledatepicker-preday,
.jquery-simpledatepicker-postday {
  color: #aaa;
}
.jquery-simpledatepicker-datepicker a {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  text-align: center !important;
}
.jquery-simpledatepicker-datepicker a:hover {
  background-color: #ffd;
}
.jquery-simpledatepicker-datepickertoday {
  background-color: #ccc;
}
.jquery-simpledatepicker-datetxt {
  width: 70%;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
}
.jquery-simpledatepicker-CalendarBut {
  width: 24px; height: 24px;
  background-image: url(icons/Calendar.gif); 
  background-repeat: no-repeat;
  text-decoration: none;
  color: transparent;
  cursor: pointer;
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}
.jquery-simpledatepicker-CalendarCloseBut, .jquery-simpledatepicker-CalendarTodayBut {
  width: 50%;
  text-align: center; 
  font-size: 0.8em;
}
.jquery-simpledatepicker-TodayBut {
  color: #222;
  font-size: 10px;
  font-weight: normal;
}
.datefield, .recordform input.datefield {
  width: 8em !important;
}
.datetimefield, .recordform input.datetimefield {
  width: 10em !important;
}
.datetimesecfield, .recordform input.datetimesecfield {
  width: 12em !important;
}


.contextmenu {
  position: fixed; 
  top: 0;
  left: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font: menu;
  display: none;
  z-index: 999999;
}
.contextmenu > * {
  position: relative;
  display: table-row !important;
}
.contextmenu > * > * {
  border: 1px solid #ccc;
  display: table-cell !important;
  padding: 10px;
  padding-left: 30px;
  background-color:#ddd;
  color:black;
}
.contextmenu > * > * + * {
  border-top: 0;
}
.contextmenu > * > a {
  background-position: 10px 10px;
}
.contextmenu > * > a:hover {
  text-decoration: none;
  background-color: #ccc;
}




/* ContainerScanForm styles */
#ContainerScanForm input {
  font-size: 30px;
  width: calc(100% - 30px);
}
#ContainerScanForm textarea {
  width: calc(100% - 30px);
  height: 20em;
}
#ScanOptions {
  position: relative;
}

/* ContainerForm styles */
#ContainerForm {
  width: auto;
  max-width: 2000px;
  min-width: auto;
  text-align:center;
  margin: auto;
}
#ContainerForm > * {
  display: inline-block;
  max-width: 400px;
  text-align: left;
  vertical-align: top;
}
#ChemIden {
  padding: 6px;
  margin: 0;
  background-color: #d7fdff;
  border-radius: 6px;
  border: 1px solid #6eb9b6;
}
#ContainerForm h2, #ContainerForm h3 {
  font-size: .9em;
  margin: 0;
}

#ChemicalInfo .cas_hazards small {
  color: #900;
}
#ContainerFormButs {
  width: 200px;
  margin-top: 16px;
}
#ContainerFormButs > * {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 5px !important;
  margin-top: 10px;
}
#SDSPanel {
  position: relative;
  margin-top: 24px;
  width: 8.5in;
  max-width: 8.5in;
  height: 1124px;
  border: 1px solid #888;
}
#SDSPanel iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
#CloseSDSPanelBut {
  position: absolute;
  top: -1px;
  right: -1px;
  border-radius: 0 0 0 10px;
}
#ContainerSDSSection .sdsrec {
  border:1px solid #ccc;
  border-radius: 6px;
  padding:6px;
  background-color:#e7e8ce;
}
#ContainerSDSSection > * {
  vertical-align: middle;
}

.valign, .valign * {
  vertical-align: middle;
}

.relatedsdsbut,.sdsbut {
  width:24px;
  height:30px; 
  font-size: 8px !important; 
  text-align:center;
  padding: 4px !important;
}
.relatedsdsbut > img,.sdsbut > img {
  height: 28px;
}
.relatedsdsbut {
  height: 38px;
}

#notificationsproxy + #notifications {
  position: fixed;
  width: 100%;
  z-index: 99999999;
  top: 50px;
}

@media (max-width: 600px) {
  input:not([type=hidden]):not([type=button]):not([type=submit]):not([type=file]) {
    font-size: 1.4em;
    max-width: calc(100% - 14px);
  }

  .GenericFormSearchInp {
    width: 8em;
  }

  form,.recordform,.msgbox, .message, .errormessage, #ContainerInfoFieldset, #ChemicalInfo {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    border-radius: 0 !important;
  }

  .recordform, #ChemicalInfo, #ContainerInfoFieldset,.msgbox {
    width: calc(100% - 4px) !important;
    padding-left: 4px !important;
  }

  .recordform > tbody > tr {
    padding: 6px 0 6px 0;
  }
}

.qrcode img {
  margin: 6px;
}



/* policy banner */
#PolicyBanner {
  position:fixed;
  bottom:0;
  z-index:9999999999;
  left:0;
  right:0;
  display: none;
}
#PolicyBanner > div {
  background-color:#0060df;
  font-size:20px;
  padding:16px;
  text-align:center;
  color: white;
  text-wrap: balance; /* css4 to wrap lines evenly */
}
#PolicyBanner a {
  text-decoration: underline;
  color: white;
}
#PolicyBanner button {
  margin-left: 20px;
}

/*
#accessibletooltip {
  position: fixed;
  bottom:0;
  z-index:99999999;
  left:0;
  right:0;
  padding: 4px 4px 30px 4px;
  background-color:#000;
  color:#eee;
}
#accessibletooltip h2 {
  color:#fff;
  font-size: 1em;
  display: inline-block;
  margin: 0;
  padding: 0;
}
#accessibletooltip > label {
  float: right;
  cursor: pointer;
  color: inherit;
  background-color: #444;
  padding: 8px;
}
*/

footer {
  text-align: center;
  font-size: 1em;
  margin-top: auto;
  margin-bottom: 1.2em;
  padding-top: 50px;
}
footer a {
  margin: 4px;
}


@media print {
  .noprint {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
  }
  .reqfieldmsg {
    display: none;
  }
  #PolicyBanner {
    display: none;
  }
  .msgbox {
    box-shadow: none !important;
  }
  details, details > summary {
    display: block !important;
  }
  footer { display: none; }
}