/** Document Level **/
html {
	height: 100%; /* Prevent Scroll Bars - (May have to set to 101%) */
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
	margin: 0 0 0 0;
  	padding: 0 0 0 0;
	/* Affect every HTML element on the page */
  	/* Ensure that the padding and border are included in
  	the total width and height of the elements */
	box-sizing: border-box;
}

.row::after { /* Pseudo-element */
	content: "";
	clear: both;
	display: table;
}

.clearfix::after { /* Make a Div or Element grow as necessary to hold the img or text */
	content: "";
	clear: both;
	display: table;
}

/** Body Content **/
body, h1, h2, h3, h4, h5, h6, p {
	font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", Neue Haas Grotesk Display Pro, "Neue Haas Grotesk Text Pro", "Neue Haas Grotesk Text Pro", sans-serif;
	font-display: auto;
	font-size: 1.5em;
}

body {
	font-size: .95em; /* REF: 1em = 16px = allows for sizing in the browser */
	font-style: normal;
  	color: #8c8c8c; 
  	background-color: #0b0b0b; 
  	margin: 0 0 0 0;
}

form {
	display: flex;
    flex-direction: column;
    max-width: 90%;
    margin: 0 auto 0 auto;
    align-items: center; /* Center the form content */
}

/** Element Styling **/
p {
	margin: 0 0 0 0;
  	padding: 0 0 0 0;
  	line-height: 1.2em;
	color: #808080;
}

img {
	max-width: 100%; /* Make Sure img will shrink but not grow */
	height: auto;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	/* border: 1px solid red; */
}

label, input, button {
	margin: 0.1em 0 0.1em 0;
}

label {
	font-size: 1.5em;
}

/* Table */
table, tr, th, td {
	margin: 0;
	/* border: 1px solid #2a13d6; */
}

table {
	width: 100%;
    display: table;
    border-collapse: collapse;
    /* border-spacing: 2px; */
    /* border-color: gray; */
}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit;
}

table > tr {
    vertical-align: middle;
}

col {
    display: table-column;
}

colgroup {
    display: table-column-group;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

th, td {
    display: table-cell;
    vertical-align: inherit;
	padding: 0.5em;
	text-align: center;
	font-size: 1.4em;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

th {
    font-weight: bold;
	font-size: 1.6em;
	text-decoration: underline;
}

caption {
    display: table-caption;
    text-align: -webkit-center
}

/** Format Header HML Element Selectors **/
h1, h2, h3, h4, h5, h6 {
	font-size: 4.00em;
	font-family: inherit;
	font-style: normal;
	font-weight: bold;
  	color: #0000cc;
  	letter-spacing: -1px;
  	margin: 0 0 0 0;
  	padding: 0 0 0 0;
	text-align: center;
}

h2 {
	font-size: 3.00em;
  	color: #427e2e;
}

h3 {
	font-size: 1.50em;
  	color: #3e3e3e;
}

h4 {
	font-size: 1.25em;
	color: #595959;
}

h5 {
	font-size: 1.00em;
	font-style: normal;
  	color: #8c8c8c;
}

h6 {
	font-weight: lighter;
	font-size: 0.90em;
	font-style: normal;
	color: #cc9966;
}

/** Link Elements **/
a, a:hover {
	background: transparent;
  	outline: none;
  	text-decoration: underline;
  	color: #0033cc;
}

a:hover {
  	color: #1a53ff;
}

/** Main Body **/
.body_content_all, .body_content_all_scroll {
	position: relative;
	max-width: 95%;
	height: auto;
	margin: 0 auto 0 auto;
  	padding: 0 0 0 0;
  	text-align: center;
  	overflow: hidden;
	/* border: 2px solid purple; */
}

.body_content_all_scroll {
  	overflow: scroll;
}

/** Main Container **/
.l_main_container
, .c_main_container
, .r_main_container
, .l_main_container_scroll
, .c_main_container_scroll
, .r_main_container_scroll {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	padding: 0 0 0 0;
	background-color: #faf4f4;
	/* border: 1px solid red; */
}

.l_main_container_scroll {
	overflow: scroll;
}

.c_main_container, .c_main_container_scroll {
	float: none;
	background-color: #e1e1f8;
}			

.c_main_container_scroll {
	overflow: scroll;
}	

.r_main_container, .r_main_container_scroll {
	float: right;
	background-color: #b7f5c9;
}		

.r_main_container_scroll {
	overflow: scroll;
}

.l_main_container img
, .c_main_container img
, .r_main_container img {
	position: static;
	float: none;
	margin: 0 auto 0 auto;
	object-fit: cover;
	min-width: 100%;
}		

.c_main_container img {
	float: left;
	margin: 0 0 0 0;
}	

.r_main_container img {
	float: right;
	margin: 0 0 0 0;
}

/** Main Item **/
.main_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow-x: auto;
	position: relative;
	font-size: 1.3em;
	font-style: normal;
	margin: 0 auto 0 auto;
  	padding: 1em;
  	width: 100%;
  	text-align: center;
	border: 1px solid blue;
}

.main_item button {
	margin: 0.4em 0 0 0;
	text-align: center;
}

.main_item h1
, .main_item h2
, .main_item h3
, .main_item h4
, .main_item h5
, .main_item h6 {
	font-size: 2.3em;
	color: #3e3e3e;
	padding: 0 0.75em 0.25em 0.75em;
	color: #3e3e3e;
	text-align: center;
	vertical-align: middle;
}

.main_item h1{
	font-size: 2.3;
}

.main_item h2 {
	font-size: 2.0em;
	color: #3e3e3e;
}

.main_item h3 {
	font-size: 1.7em;
	color: #3e3e3e;
}

.main_item h4 {
	font-size: 1.4em;
	color: #3e3e3e;
}

.main_item h5 {
	font-size: 1.1em;
	color: #3e3e3e;
}

.main_item h6 {
	font-size: 0.8em;
	color: #3e3e3e;
}

.main_item img
, .main_item p {
	float: left;
	object-fit: contain;
	color: #737373;
	font-style: normal;
	font-weight: bold;
	background-color: inherit;
	box-shadow: 0.4em 0.4em 0.65em 0.0em #8c8c8c;
	border-radius: 0.5em;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	max-width: 20em;
	max-height: 20em;
}

.main_item p {
	max-height: auto;
}

.main_item a {
	color: #666666;
}

.main_item a:hover {
	text-decoration: none;
	color: #1a0d00;
	font-style: normal;
}

.main_item ul li
, .main_item ul li.selected
, .main_item li.selected
, .main_item li:hover {
	font-size: .98em;
}

.main_item ul li
, .main_item ul li.selected {
	color: #595959;
	font-style: normal;
	list-style-type: circle;
	list-style-position: inside;
	padding: 0 0 0 15px;
}

.main_item li.selected, .main_item li:hover {
	color: #1a0d00;
	font-style: normal;
  	text-decoration: none;
}

.main_item h3 {
	color: #2f8440;
	font-style: italic;
	font-size: 1.5em;
	text-decoration: none;
	
} 

/** Sidebar **/
.l_sidebar_container, .c_sidebar_container, .r_sidebar_container {
	float: left;
  	width: 100%;
  	margin: 0 0 0 0;
	border-radius: 0.7em;
	padding: 10px 10px 10px 20px;
	text-align: center;
  	background: transparent url(../images/background_main.jpg) repeat;
}

.l_sidebar_container {
	padding: 0;
	/* border: 1px solid pink; */
}

.c_sidebar_container {
	padding: 0;
	/* border: 1px solid pink; */
}

.r_sidebar_container {
	float: right;
	/* border: 1px solid pink; */
}

/* Buttons */
.btn_main, .btn_submit {
	position: relative;
	width: 90%;
	color: #efe9e9;
	background-color: #4CAF50;
	font-size: 1.5em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	outline: none;
	border: none;
	border-radius: 15px;
	box-shadow: 0 9px #989797;
	padding: 0.5em 3.5em;
}

.btn_main:hover {
	background-color: #1f6e22
}

.btn_main:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.btn_submit {
	background-color: #135fa7;
	padding: 0.1em 0.3em;
	width: min-content;
	font-size: 1.5em;
	margin: 0 auto 0 auto;
}

.btn_submit:hover {
	background-color: #0e3b66
}	

.btn_submit:active {
	background-color: #4a90d2;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
}

.error_msg {
	font-size: 2.0em;
	font-weight: bold;
	font-style: italic;
	font-family: 'Times New Roman', Times, serif;
	color: #b60d3a;
}

#errorText {
	color: #b60d3a;
	font-weight: bold;
	margin-top: 0.1em;
}

/* Input Boxes */
input[type=text], input[type=password], input[type=submit], input[type=number] {
	font-family: "NHaasGrotesk-75Bd", "Helvetica-Neue", Helvetica, sans-serif;;
	font-size: 1.2em;
	background-color: none;
	border-width: 0.10em;
	border-style: outset;
	border-color: gray black black gray;
	box-shadow: none;
	border-radius: 0.5em;
	padding: 0.3em;
	margin: 0 auto 0 auto;
	max-width: 40%;
}

.time-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Drop Down Boxes */
.select_dd {
    font-family: "NHaasGrotesk-75Bd", "Helvetica-Neue", Helvetica, sans-serif;
    font-size: 1.2em;
    background-color: none;
    border-width: 0.10em;
    border-style: outset;
    border-color: gray black black gray;
    box-shadow: none;
    border-radius: 0.5em;
    padding: 0.3em;
    margin: 0 auto 0 0.2em;
    max-width: 90%;
    display: flex; /* Add flex to the dropdown */
	flex-direction: column;
    align-items: center; /* Center vertically */
    justify-content: flex-end; /* Move the dropdown to the right */
}

.select_dd label {
	margin-bottom: 0.3em;
}

/* Misc */
.span_big_bold {
	font-size: 1.8em;
	font-weight: bold;
}

/* Testing */
#testing {
	position: relative;
	margin: 0 auto 0 auto;
	max-width: 95%;
  	height: 50px;
  	overflow: hidden;
	background-image: url('../images/r-s.jpg');
	background-repeat: no-repeat;
	background-position: right top;
	/* border: 1px solid red; */
}

span.error {
	font-size: .8em;
	color: #ff3333;
    /* position: relative;
    top: 12px; */
}

/**************************
** Responsive Page Setup **
**************************/
[class*="col-"] {
	float: left;
	margin: 0;
	padding: 5px; /* Distance between containers within the column */
	border: 0;
}

/* For mobile phones: */
[class*="col-xs"] {
  width: 100%;
}

/* For mobile phones: */
[class*="col-s"] {
  width: 100%;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	.col-xs-1 {width: 8.33%;}
	.col-xs-2 {width: 16.66%;}
	.col-xs-3 {width: 25%;}
	.col-xs-4 {width: 33.33%;}
	.col-xs-5 {width: 41.66%;}
	.col-xs-6 {width: 50%;}
	.col-xs-7 {width: 58.33%;}
	.col-xs-8 {width: 66.66%;}
	.col-xs-9 {width: 75%;}
	.col-xs-10 {width: 83.33%;}
	.col-xs-11 {width: 91.66%;}
	.col-xs-12 {width: 100%;}

	#testing {
		background-image: url('../images/r-xs.jpg');
	}
	
	body {
		font-size: 0.7em;
	}

	th, td {
		padding: 0.1em;
	}
	.body_content_all, .body_content_all_scroll {
		max-width: 600px;
	}

	.main_item { 
		font-size: 1.3em;
	}

	.main_item h1 {
		font-size: 1.4em;
	}

	.main_item h2 {
		font-size: 1.2em;
	}

	.main_item h3 {
		font-size: 1.0em;
	}

	.main_item h4 {
		font-size: 0.8em;
	}

	.main_item h5 {
		font-size: 0.6em;
	}

	.main_item h6 {
		font-size: 0.4em;
	}

	.select_dd {
		font-size: 1.1em;
		padding: 0.2em;
	}

	input[type=text], input[type=password], input[type=submit], input[type=number] {
		font-size: 0.9em;
		min-width: 4.0em;
	}

	label {
		font-size: 0.9em;
	}

	.btn_main, .btn_submit {
		font-size: 1.0em;
	}

} /* close @media */

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	.col-s-1 {width: 8.33%;}
	.col-s-2 {width: 16.66%;}
	.col-s-3 {width: 25%;}
	.col-s-4 {width: 33.33%;}
	.col-s-5 {width: 41.66%;}
	.col-s-6 {width: 50%;}
	.col-s-7 {width: 58.33%;}
	.col-s-8 {width: 66.66%;}
	.col-s-9 {width: 75%;}
	.col-s-10 {width: 83.33%;}
	.col-s-11 {width: 91.66%;}
	.col-s-12 {width: 100%;}

	#testing {
		background-image: url('../images/r-s.jpg');
		/* background-size: contain; */
	}

	body {
		font-size: 0.8em;
	}

	th, td {
		padding: 0.1em;
	}
	.body_content_all, .body_content_all_scroll {
		max-width: 767px;
	}

	.main_item { 
		font-size: 1.3em;
	}

	.main_item h1 {
		font-size: 1.4em;
	}

	.main_item h2 {
		font-size: 1.2em;
	}

	.main_item h3 {
		font-size: 1.0em;
	}

	.main_item h4 {
		font-size: 0.8em;
	}

	.main_item h5 {
		font-size: 0.6em;
	}

	.main_item h6 {
		font-size: 0.4em;
	}

	.select_dd {
		font-size: 1.1em;
		padding: 0.2em;
	}

	input[type=text], input[type=password], input[type=submit], input[type=number] {
		font-size: 0.9em;
	}

	label {
		font-size: 0.9em;
	}

	.btn_main, .btn_submit {
		font-size: 1.0em;
	}

} /* close @media */

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	.col-m-1 {width: 8.33%;}
	.col-m-2 {width: 16.66%;}
	.col-m-3 {width: 25%;}
	.col-m-4 {width: 33.33%;}
	.col-m-5 {width: 41.66%;}
	.col-m-6 {width: 50%;}
	.col-m-7 {width: 58.33%;}
	.col-m-8 {width: 66.66%;}
	.col-m-9 {width: 75%;}
	.col-m-10 {width: 83.33%;}
	.col-m-11 {width: 91.66%;}
	.col-m-12 {width: 100%;}

	#testing {
		background-image: url('../images/r-m.jpg');
		/* background-size: contain; */
	}

	body {
		font-size: 0.8em;
	}

	th, td {
		padding: 0.1em;
	}
	.body_content_all, .body_content_all_scroll {
		max-width: 991px;
	}

	.main_item { 
		font-size: 1.4em;
	}

	.main_item h1 {
		font-size: 1.4em;
	}

	.main_item h2 {
		font-size: 1.2em;
	}

	.main_item h3 {
		font-size: 1.0em;
	}

	.main_item h4 {
		font-size: 0.8em;
	}

	.main_item h5 {
		font-size: 0.6em;
	}

	.main_item h6 {
		font-size: 0.4em;
	}

	.select_dd {
		font-size: 1.1em;
		padding: 0.2em;
	}

	input[type=text], input[type=password], input[type=submit], input[type=number] {
		font-size: 0.9em;
	}

	label {
		font-size: 0.9em;
	}

	.btn_main, .btn_submit {
		font-size: 1.0em;
	}

} /* close @media */

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.col-l-1 {width: 8.33%;}
	.col-l-2 {width: 16.66%;}
	.col-l-3 {width: 25%;}
	.col-l-4 {width: 33.33%;}
	.col-l-5 {width: 41.66%;}
	.col-l-6 {width: 50%;}
	.col-l-7 {width: 58.33%;}
	.col-l-8 {width: 66.66%;}
	.col-l-9 {width: 75%;}
	.col-l-10 {width: 83.33%;}
	.col-l-11 {width: 91.66%;}
	.col-l-12 {width: 100%;}

	#testing {
		background-image: url('../images/r-l.jpg');
	}

	body {
		font-size: 0.8em;
	}

	th, td {
		padding: 0.1em;
	}
	.body_content_all, .body_content_all_scroll {
		max-width: 1199px;
	}

	.main_item { 
		font-size: 1.3em;
	}

	.main_item h1 {
		font-size: 1.6em;
	}

	.main_item h2 {
		font-size: 1.4em;
	}

	.main_item h3 {
		font-size: 1.2em;
	}

	.main_item h4 {
		font-size: 1.0em;
	}

	.main_item h5 {
		font-size: 0.8em;
	}

	.main_item h6 {
		font-size: 0.6em;
	}

	.select_dd {
		font-size: 1.1em;
		padding: 0.3em;
	}

	input[type=text], input[type=password], input[type=submit], input[type=number] {
		font-size: 1.0em;
		min-width: 4.5em;
	}

	label {
		font-size: 1.1em;
	}

	.btn_main, .btn_submit {
		font-size: 1.2em;
	}

} /* close @media */

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	.col-xl-1 {width: 8.33%;}
	.col-xl-2 {width: 16.66%;}
	.col-xl-3 {width: 25%;}
	.col-xl-4 {width: 33.33%;}
	.col-xl-5 {width: 41.66%;}
	.col-xl-6 {width: 50%;}
	.col-xl-7 {width: 58.33%;}
	.col-xl-8 {width: 66.66%;}
	.col-xl-9 {width: 75%;}
	.col-xl-10 {width: 83.33%;}
	.col-xl-11 {width: 91.66%;}
	.col-xl-12 {width: 100%;}

	#testing {
		background-image: url('../images/r-xl.jpg');
	}

	body {
		font-size: 0.9em;
	}

	th, td {
		padding: 0.1em;
	}
	.body_content_all, .body_content_all_scroll {
		max-width: 1600px;
	}

	.main_item { 
		font-size: 1.5em;
	}

	.main_item h1 {
		font-size: 1.6em;
	}

	.main_item h2 {
		font-size: 1.4em;
	}

	.main_item h3 {
		font-size: 1.2em;
	}

	.main_item h4 {
		font-size: 1.0em;
	}

	.main_item h5 {
		font-size: 0.8em;
	}

	.main_item h6 {
		font-size: 0.6em;
	}

	.select_dd {
		font-size: 1.1em;
		padding: 0.2em;
	}

	input[type=text], input[type=password], input[type=submit], input[type=number] {
		font-size: 0.9em;
	}

	label {
		font-size: 1.1em;
	}

	.btn_main, .btn_submit {
		font-size: 1.2em;
	}

} /* close @media */