html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; /*sets margins to fall within the box border, enables dynamic sizing*/
}
*, *::before, *, *::after {
  box-sizing: inherit;  /* enables imbedded child components to inherit box sizing of parent component*/
}
img {
  max-width: 100%;
  width: 100px;
  height: 100px;/* sets images to size with the window for dynamic layout, eliminates scroll bars as the page size changes. */
}
/*********************   header elements   *****************************/

/*********************   body elements   ******************************/

/* Global styles */
	body {
		font-family: Verdana, Geneva, sans-serif;
		width: 700px;
		font-size: 11px;
		font-style: normal;
		font-variant: normal;
		font-weight: 400;
		line-height: 20px;
		margin: auto;
	}
	h1 {
		font-family: Verdana, Geneva, sans-serif;
		font-size: 24px;
		font-style: normal;
		font-variant: normal;
		font-weight: 500;
		line-height: 26.4px;
}
h3 {
		font-family: Verdana, Geneva, sans-serif;
		font-style: normal;
		font-variant: normal;
		font-weight: 700;
		line-height: 15.4px;
}
p {
		font-family: Verdana, Geneva, sans-serif;
		font-style: normal;
		font-variant: normal;
		font-weight: 400;
		line-height: 20px;
}
label {
  display: inline-flex;
  padding: 15px;
  font-size: inherit;
}
legend {
  padding: 10px;
  font-size: 1.5em;
}
button, input, select {
  font-family: inherit;
  font-size: inherit;
  margin: 10px 10px 10px 0;
  background-color: #f0f0f5;
  line-height: 20px;
}
textarea {
  overflow: auto;
  overflow-x: auto;
  overflow-y: auto;
  vertical-align: top;
  max-width: 100%;
  width: 50%;
  min-height: 100px;
  font-family: inherit;
  font-size: 10px;
  margin: 10px;
  background-color: #f0f0f5;
}
table, tr, th, td {
  border: 1px solid ;
    empty-cells: show;
    border-collapse: collapse;
}
#head th {
	background-color: #A0A0A4;
}
tr:nth-child(odd) {
	background-color: #FFFBF0;
}
.no-bullet {
  list-style-type: none;
  margin-left: -40px;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 0px;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}
.tooltip .tooltiptext::after {
  position: absolute;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.upper {
  text-transform: uppercase;
  font-size: 2em;
}
.table-output {
  height: 20px;
  border: 1px solid black;
  width: 100%;
  text-align: center;
}

/*********************   inputs section   ****************************/

/*********************   site map photo drop area   ****************************/
.drop-zone {
  max-width: 700px;
  height: 700px;
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  color: #cccccc;
  border: 4px dashed #009578;
  border-radius: 10px;
}

.drop-zone--over {
  border-style: solid;
}

.drop-zone__input {
  display: none;
}

.drop-zone__thumb {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background-color: #cccccc;
  background-size: cover;
  position: relative;
}

.drop-zone__thumb::after {
  content: attr(data-label);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.75);
  font-size: 14px;
  text-align: center;
}

/*********************   forms inputs section   ****************************/
.form-hazard {
  display: grid;
  grid-template-columns: 50% 50%;
  padding-bottom: 15px;
  font-family: inherit;
}
.picto td {
  border-style: none;
}
.frmEvent {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.spread {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.narBox {
  float: right;
  width: 40%;
  border: 1px dashed;
  border-color: #cccccc;
  padding: inherit;
  margin-right: 20px;
}
.drill {
  font-weight: bold;
  margin: 20px 0 20px 0;
  padding: 0;
  color: red;
  text-align: center;
}
.muster {
  width: 350px;
  margin-left: 10px;
}
.decon {
  width: 532px;
  height: 414px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.signals {
  width: 600px;
  height: 1076px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.heat-index {
  width: 624px;
  height: 370px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.heat-chart {
  width: 614px;
  height: 976px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
tr.moderate {
  background-color: #ffff00;
  text-align: center;
}
tr.moderate1 {
  background-color: #ffd700;
  text-align: center;
}
tr.high {
  background-color: #ff0000;
  text-align: center;
}
th.light {
  background-color: #e6e6fa;
}
th.medium {
  background-color: #c6e2ff;
}
th.hard {
  background-color: #6897bb;
}
.ul-ital {
  text-decoration: underline;
  font-style: italic;
  padding-left: .5em;
  padding-right: .5em;
}
/* ************  Set all output ID articles to invisible  **************/
#primaryProduct {
  padding-left: 25px;
}
#moreProducts {
  padding-left: 25px;
}
#sdsDiesel {
  display: none;
}
#sdsGasoline {
  display: none;
}
#sdsHydraulic {
  display: none;
}
#sdsBunker {
  display: none;
}
#sdsSweet {
  display: none;
}
#sdsSour {
  display: none;
}
#sdsLube {
  display: none;
}
#sdsBenzene {
  display: none;
}
#sdshydrogenSulfide {
  display: none;
}
#sdscarbonmonoxide {
  display: none;
}
#sdsammonia {
  display: none;
}
#sdsvoc {
  display: none;
}
#sdspropane {
  display: none;
}
#rockyShore {
  display: none;
}
#sandyShore {
  display: none;
}
#cobbleShore {
  display: none;
}
#marshShore {
  display: none;
}
#muskegShore {
  display: none;
}
#cliffShore {
  display: none;
}
#iceShore {
  display: none;
}
#otherTopo {
  display: none;
}
#setDrill {
display: block;
text-align: center;
}
#airmonitorplan {
  display: none;
}
#booming {
  display: none;
}
#drums {
  display: none;
}
#lightering {
  display: none;
}
#fueling {
  display: none;
}
#scat {
  display: none;
}
#lifttruck {
  display: none;
}
#airOps {
  display: none;
}
#uav {
  display: none;
}
#vehicle {
  display: none;
}
#smallVessel {
  display: none;
}
#craneOps {
  display: none;
}
#supportEquip {
  display: none;
}
#confinedSpace {
  display: none;
}
#heights {
  display: none;
}
#wildlife {
  display: none;
}
#biohazard {
  display: none;
}
#workSuit {
  display: none;
}
#firstAid {
  display: none;
}
#heatStress {
  display: none;
}
#coldStress {
  display: none;
}
#deconPlan {
  display: none;
}
#zone1 {
  display: none;
}
#zone2 {
  display: none;
}
#zone3 {
  display: none;
}
#zone4 {
  display: none;
}
#zone5 {
  display: none;
}
#zone6 {
  display: none;
}
#zone7 {
  display: none;
}
#zone8 {
  display: none;
}
#zone9 {
  display: none;
}
/*********************   footer elements   ***************************/