@charset "utf-8";

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Infrastructure
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; background-color: #FFF; }
body { font-family: Arial, Helvetica, sans-serif; display: flex; flex-direction: column; }

a { color: #000; }
a, input { outline: 0px; }
input[type=checkbox] { vertical-align: middle; position: relative; }
input[type=radio] { vertical-align: middle; position: relative; bottom: 2px; }
select { font-size: 10pt; font-weight: normal; color: #000; text-decoration: none; text-align: left;  max-width: 210px; }
select option:first-child { color: #FFF; background-color: #090079; text-align: center; font-weight: bold; }
select option:nth-child(even) { background-color: #c4bfb5; }
textarea { border: 1px solid #333; }

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Survey
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* .container_80 { width: 80%; height: max-content; margin-left: auto; margin-right: auto; } */
#Explanation,.question { margin-left: auto; margin-right: auto; height: max-content; font-size: 14pt; font-weight: normal; text-align: center; padding-top: 8px; padding-bottom: 8px; }
.question_header { height: max-content; margin-left: auto; margin-right: auto; font-size: 16pt; font-weight: bold; text-align: left; text-transform: uppercase; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
#question1_grid,#question2_grid,#question3_grid { border-spacing: 0px; }
#question1_grid td,#question2_grid td,#question3_grid td { padding: 8px; }
#question2_grid tr:nth-child(even) td { background-color: #c4bfb5; } 
#submit_survey { width: max-content; height: max-content; padding: 5px; color: #FFF; background-color: #090079; }
.error_class { color: red; font-weight: bold; }

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Masthead and Dividers

	height: 0; padding-top: 25.31%;
	https://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size
	padding-top: 66.64%; (img-height / img-width * container-width)
    (853 / 1280 * 100)
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#Content_Container { width: 80%; height: max-content; max-width: 80%; margin-left: auto; margin-right: auto; }
#Masthead { width: 100vw; height: 0; padding-top: 25.31%; padding-bottom: 10px; background-image: url("../images//masthead_webp"); background-repeat: no-repeat; background-size: contain; }
.divider_container { width: 80vw; height: max-content; margin-left: auto; margin-right: auto; margin-top: 8px; }
.divider_blue_rectangle { width: calc(38vw - 17px); height: 34px; background-color: #2aa49c; float: left; display: inline; }
.divider_blue_triangle { width: 0; height: 0; border-top: 34px solid #2aa49c; border-right: 35px solid transparent; float: left; display: inline;  } 
.divider_peach_rectangle { width: calc(38vw - 17px); height: 34px; background-color: #cb7356; float: left; display: inline;  }
.divider_peach_triangle { width: 0; height: 0; border-bottom: 34px solid #cb7356; border-left: 35px solid transparent; float: left; display: inline; } 

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	MEDIA QUERIES
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {								/* Mobile devices */
	#Content_Container { width: 95vw; max-width: 95vw; height: max-content; margin-left: auto; margin-right: auto; object-fit: contain; }
	#Masthead { background-image: url("../images/masthead_test.webp"); }
	.divider_container { width: 312px; height: 10px; margin-left: auto; margin-right: auto; margin-top: 8px; background-image: url("../images/divider_iphone.webp"); background-repeat: no-repeat; background-size: cover; }
	.divider_blue_rectangle,.divider_blue_triangle,.divider_peach_rectangle,.divider_peach_triangle { display: none; } 	
	body { overscroll-behavior: none; overflow-x: clip; }
	#question2_grid { transform-origin: left; scale: .70 .8; margin-left: 5px; }
	#question2_grid td { padding: 2px; } 
}

@media (min-width: 768px) and (max-width: 1023px) {
	#Masthead { background-image: url("../images/masthead_test.webp"); }
	.divider_container { width: 768px; height: 19px; margin-left: auto; margin-right: auto; margin-top: 8px; background-image: url("../images/divider_768.webp"); background-repeat: no-repeat; }
	.divider_blue_rectangle,.divider_blue_triangle,.divider_peach_rectangle,.divider_peach_triangle { display: none; } 	
}

@media (min-width: 1024px) and (max-width: 1279px) {
	#Masthead { background-image: url("../images/masthead_test.webp"); }
	.divider_blue_rectangle { width: 384px; height: 26px; background-color: #2aa49c; float: left; display: inline; }
	.divider_blue_triangle { width: 0; height: 0; border-top: 26px solid #2aa49c; border-right: 26px solid transparent; float: left; display: inline;  } 
	.divider_peach_rectangle { width: 384px; height: 26px; background-color: #cb7356; float: left; display: inline;  }
	.divider_peach_triangle { width: 0; height: 0; border-bottom: 26px solid #cb7356; border-left: 26px solid transparent; float: left; display: inline; } 
}

@media (min-width: 1280px) and (max-width: 1919px) {
	#Masthead { background-image: url("../images/masthead_test.webp"); }
	.divider_container { width: 80vw; height: max-content; margin-left: auto; margin-right: auto; margin-top: 8px; }
	.divider_blue_rectangle { width: calc(38vw - 17px); height: 34px; background-color: #2aa49c; float: left; display: inline; }
	.divider_blue_triangle { width: 0; height: 0; border-top: 34px solid #2aa49c; border-right: 35px solid transparent; float: left; display: inline;  } 
	.divider_peach_rectangle { width: calc(38vw - 17px); height: 34px; background-color: #cb7356; float: left; display: inline;  }
	.divider_peach_triangle { width: 0; height: 0; border-bottom: 34px solid #cb7356; border-left: 35px solid transparent; float: left; display: inline; } 
}

@media (min-width: 1920px) {
	#Masthead { background-image: url("../images/masthead_test.webp"); }
	.divider_blue_rectangle { width: 700px; height: 34px; background-color: #2aa49c; }
	.divider_blue_triangle { width: 0; height: 0; border-top: 34px solid #2aa49c; border-right: 34px solid transparent; } 
	.divider_peach_rectangle { width: 700px; height: 34px; }
	.divider_peach_triangle { width: 0; height: 0; border-bottom: 34px solid #cb7356; border-left: 34px solid transparent; } 
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Tables
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.Grid { width: max-content; height: max-content; max-width: fit-content; max-height: 600px; margin-left: auto; margin-right: auto; border-width: 1px; border-style: solid; border-color: #090079; border-spacing: 0px; margin-bottom: 20px; overflow: auto; display: block; margin: 0 auto; }
.Grid_Header { position: sticky; top: 0; vertical-align: bottom; font-size: 11pt; font-weight: bold; color: #FFF; background-color: #090079; text-align: center; text-transform: uppercase; cursor: pointer; }
.Grid td { font-size: 7pt; font-weight: normal; border-width: 1px; border-style: solid; border-color: #090079; height: 20px; padding-top: 6px; padding-bottom: 3px; padding-left: 4px; padding-right: 4px; }
.Grid_Cell_Right_Justify { text-align: right; }
.Grid_Cell_Center_Justify { text-align: center; }

.Error_Form_Field { background-color: #FCF; border: 1px solid #900; font-size: 12pt; font-weight: normal; color: #000; }
.Error_Message { font-size: 12pt; font-weight: bold; color: #FFF; background-color: #900; text-align: center; }
.Error_Message_Large { font-size: 16px; font-weight: bold; color: #FFF; background-color: #900; text-align: center; text-transform: uppercase; }

.Form_Header { font-size: 12pt; font-weight: bold; }
.Form_Field { font-size: 12pt; font-weight: normal; border: 1px solid #CCC; }
.Form_Field_Error { font-size: 12pt; font-weight: normal; color: #000; background-color: #FCF; border: 1px solid #900; }
.Form_Field_Header { font-size: 12pt; font-weight: bold; color: #000; text-decoration: none; } 

.Notes { font-size: 10px; font-weight: normal; color: #000; font-style: italic; text-transform: capitalize; text-decoration: none; }

.Invalid_Data { font-size: 12pt; font-weight: bold; color: #FFF; background-color: #900; text-align: center; }

.Error_Message_Container { padding: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #D31043; width: auto; height: auto; }

#Page_Not_Found_Container { width: max-content; height: max-content; overflow: hidden; margin-top: 50px; margin-left: auto; margin-right: auto; }
#Page_Not_Found { width: 528px; height: 310px; margin-left: auto; margin-right: auto; margin-top: 50px; background-image: url(../images/page_not_found.png); background-repeat: repeat-none; }
.Page_Not_Found_Instructions { font-size: 18pt; font-weight: normal; color: #000; width: 80%; text-align: center; padding: 8px; margin-top: 30px; margin-bottom: 20px; margin-left: auto; margin-right: auto; }

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Page Header Beneath Main Menu
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#Page_Header { width: 100%; height: 33px; font-size: 16pt; text-align: center; text-transform: uppercase; margin-bottom: 20px; padding-top: 8px; padding-bottom: 8px; color: #FFF; background-color: #090079; border-bottom: solid 2px #000; }
#Page_Header a,#Page_Header a:active { color: #FFF; text-decoration: none; }
#Page_Header a,#Page_Header a:active { color: #FFF; }
.center { display: flex; flex-direction: row; justify-content: center; align-items: center; }

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Footer
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#Copyright { font-size: 8px; font-weight: bold; color: #999; text-decoration: none; text-align: center; width: 772px; height: 50px; float: left; }
.Copyright_Link { font-size: 8px; font-weight: bold; color: #999; text-align: center; text-decoration: underline; }

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Buttons
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.Button { width: max-content; height: max-content; font-size: 12pt; text-align: center; margin-left: auto; margin-right: auto; margin-top: 5px; padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; margin-bottom: 20px; color: #FFF; background-color: #090079; cursor: pointer; border-radius: 5px; border: solid 1px #000; }

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Messaging and Controls
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#modal_shade { position: fixed; left: 0px; top: 0px; width:100%; height:100%; text-align:center; z-index: 4990; background-color: #000; opacity: .75; }
#access { display: none; } 				/*  Used for PHP based error messages */
#alert_container, .alert_container, #please_wait_container, #error_container, #confirm_container { position: absolute; top: 25%; left: 50%; margin-left: -200px; width: 400px; max-width: 400px; height: auto; overflow: hidden; max-height: 350px; z-index: 5000; border: 1px outset #FFF; box-shadow: 1px 1px 10px #090079; background-color: #FFF; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; }

/* Alert */
.alert_header,.error_header { font-size: 16pt; text-align: center; text-transform: uppercase; color: #FFF; padding-top: 8px; padding-bottom: 8px; width: inherit; height: auto; overflow: hidden; background-color: #090079; font-weight: bold; }
.alert_message { font-size: 14pt; text-align: center; overflow-wrap: break-word; color: #090079; padding-top: 8px; padding-bottom: 8px; width: inherit; height: auto; overflow: hidden; }
.alert_button_container { display: flex; flex-direction: row; justify-content: center; }
.alert_actions,.alert_actions_date_range { font-size: 12pt; color: #FFF; width: auto; height: auto; overflow: hidden; background-color: #090079; padding-top: 2px; padding-left: 10px; padding-right: 10px; border-radius: 5px; margin-left: 5px; margin-right: 5px; margin-bottom: 20px; float: left; display: inline; cursor: pointer; border: 1px outset #090079; box-shadow: 1px 1px 3px #090079; }

/* Error */
#error_container { color: #900; height: max-content; max-height: 450px; }
.error_header { font-size: 16pt; text-align: center; text-transform: uppercase; color: #FFF; background-color: #900; padding-top: 8px; padding-bottom: 8px; width: inherit; height: auto; overflow: hidden; font-weight: bold; }
.error_message { font-size: 12pt; text-align: center; overflow-wrap: break-word; color: #900; padding-top: 8px; padding-bottom: 8px; width: inherit; height: auto; overflow: hidden; }
.error_button_container { display: flex; flex-direction: row; justify-content: center; }
.error_actions { font-size: 12pt; color: #FFF; /* width: auto; height: auto; overflow: hidden;*/ background-color: #900; padding-top: 2px; padding-left: 10px; padding-right: 10px; border-radius: 5px; margin-left: 5px; margin-right: 5px; margin-bottom: 20px; float: left; display: inline; cursor: pointer; border: 1px outset #090079; box-shadow: 1px 1px 3px #090079; }

/* Confirm */
.confirm_header { font-size: 16pt; text-align: center; text-transform: uppercase; color: #FFF; padding: 8px; width: inherit; height: auto; overflow: hidden; background-color: #090079; font-weight: bold; }
.confirm_question { font-size: 14pt; text-align: center; color: #090079; padding: 8px; width: inherit; height: auto; overflow: hidden; background-color: #FFF; }
.confirm_button_container { width: inherit; height: auto; overflow: hidden; text-align: center; padding: 8px; background-color: #FFF; }
.confirm_actions { font-size: 12pt; color: #FFF; width: auto; height: auto; overflow: hidden; background-color: #090079; padding-top: 2px; padding-left: 10px; padding-right: 10px; border-radius: 5px; margin-left: 5px; margin-right: 5px; margin-bottom: 20px; float: left; display: inline; cursor: pointer; border: 1px outset #090079; box-shadow: 1px 1px 3px #090079; }
#confirm_actions_container { width: max-content; height: 25px; margin-left: auto; margin-right: auto; margin-bottom: 5px; }

/* Please Wait */
#please_wait_container { display: none; } 
.spinner { position: relative; left: 50%; margin-left: -14px; height: 28px; width: 28px; animation: rotate 0.8s infinite linear; border: 8px solid #000; border-right-color: transparent; border-radius: 50%; }
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }