/* This is the application's global style sheet. Use it to style things that are found on more than one page.
For page-specific styling, please use/create a separate style sheet for that specific page, instead. Avoid moving the sections around, many of them need to be in a certain order */

html
{
	font-family: Arial, sans-serif;
	font-size: 1.05rem;
}

h1
{
	font-size: 2rem;
	margin: 0;

}

h2 {
	font-size: 1.25rem;
	margin: 0;
}

a:hover {
	color: #cca300;
}

p {
	margin: 12px auto 12px auto;
}

div.body
{
	display: block;
	box-sizing: border-box;
	padding: 10px;
	border: 1px solid #808080;
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	background-color: #ECECEC;
	clear: both;
	overflow: hidden;	
}

div.button-container
{
	display: flex;
}

div.column-size1
{
	box-sizing: border-box;
	float: left;
	width: 4%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size2
{
	box-sizing: border-box;
	float: left;
	width: 8%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size3
{
	box-sizing: border-box;
	float: left;
	width: 12%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size4
{
	box-sizing: border-box;
	float: left;
	width: 16%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size5
{
	box-sizing: border-box;
	float: left;
	width: 20%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size6
{
	box-sizing: border-box;
	float: left;
	width: 24%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size7
{
	box-sizing: border-box;
	float: left;
	width: 28%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size8
{
	box-sizing: border-box;
	float: left;
	width: 32%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size9
{
	box-sizing: border-box;
	float: left;
	width: 36%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size10
{
	box-sizing: border-box;
	float: left;
	width: 40%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size11
{
	box-sizing: border-box;
	float: left;
	width: 44%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size12
{
	box-sizing: border-box;
	float: left;
	width: 48%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size13
{
	box-sizing: border-box;
	float: left;
	width: 52%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size14
{
	box-sizing: border-box;
	float: left;
	width: 56%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size15
{
	box-sizing: border-box;
	float: left;
	width: 60%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size16
{
	box-sizing: border-box;
	float: left;
	width: 64%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size17
{
	box-sizing: border-box;
	float: left;
	width: 68%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size18
{
	box-sizing: border-box;
	float: left;
	width: 72%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size19
{
	box-sizing: border-box;
	float: left;
	width: 76%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size20
{
	box-sizing: border-box;
	float: left;
	width: 80%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size21
{
	box-sizing: border-box;
	float: left;
	width: 84%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size22
{
	box-sizing: border-box;
	float: left;
	width: 88%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size23
{
	box-sizing: border-box;
	float: left;
	width: 92%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size24
{
	box-sizing: border-box;
	float: left;
	width: 96%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.column-size25
{
	box-sizing: border-box;
	float: left;
	width: 100%;
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Divs used as columns that appear within fieldsets will be closer together to indicate they are related fields */
fieldset div[class*="column-size"]
{
	box-sizing: border-box;
	margin-top: 5px;
	margin-bottom: 5px;
}



span.column-size1 { box-sizing: border-box; display: inline-block; position: relative; width: 4%; }

span.column-size2 { box-sizing: border-box; display: inline-block; position: relative; width: 8%; }

span.column-size3 { box-sizing: border-box; display: inline-block; position: relative; width: 12%; }

span.column-size4 { box-sizing: border-box; display: inline-block; position: relative; width: 16%; }

span.column-size5 { box-sizing: border-box; display: inline-block; position: relative; width: 20%; }

span.column-size6 { box-sizing: border-box; display: inline-block; position: relative; width: 24%; }

span.column-size7 { box-sizing: border-box; display: inline-block; position: relative; width: 28%; }

span.column-size8 { box-sizing: border-box; display: inline-block; position: relative; width: 32%; }

span.column-size9 { box-sizing: border-box; display: inline-block; position: relative; width: 36%; }

span.column-size10 { box-sizing: border-box; display: inline-block; position: relative; width: 40%; }

span.column-size11 { box-sizing: border-box; display: inline-block; position: relative; width: 44%; }

span.column-size12 { box-sizing: border-box; display: inline-block; position: relative; width: 48%; }

span.column-size13 { box-sizing: border-box; display: inline-block; position: relative; width: 52%; }

span.column-size14 { box-sizing: border-box; display: inline-block; position: relative; width: 56%; }

span.column-size15 { box-sizing: border-box; display: inline-block; position: relative; width: 60%; }

span.column-size16 { box-sizing: border-box; display: inline-block; position: relative; width: 64%; }

span.column-size17 { box-sizing: border-box; display: inline-block; position: relative; width: 68%; }

span.column-size18 { box-sizing: border-box; display: inline-block; position: relative; width: 72%; }

span.column-size19 { box-sizing: border-box; display: inline-block; position: relative; width: 76%; }

span.column-size20 { box-sizing: border-box; display: inline-block; position: relative; width: 80%; }

span.column-size21 { box-sizing: border-box; display: inline-block; position: relative; width: 84%; }

span.column-size22 { box-sizing: border-box; display: inline-block; position: relative; width: 88%; }

span.column-size23 { box-sizing: border-box; display: inline-block; position: relative; width: 92%; }

span.column-size24 { box-sizing: border-box; display: inline-block; position: relative; width: 96%; }

span.column-size25 { box-sizing: border-box; display: inline-block; position: relative; width: 100%; }

/* Use the below classes to display error, successful, or other messages to the user. Be sure to assign the
container a class for column size and a submission_feedback class to handle formatting. This element
will be hidden until a 'message' type is assigned, which then displays it and assigns corresponding
font color */
.submission_feedback
{
	display: none;
	word-wrap: break-word;
	margin-top: 0;
	margin-bottom: 0;
	font-weight: bold;	
}

.message_error
{
	display: block;
	color: red;
}

.message_success
{
	display: block;
	color: green;
}

.message_other
{
	display: block;
	color: blue;
}


button
{
	cursor: pointer;
}

button:disabled
{
	cursor: default;
}

button.standard
{
	
    background-color: #D6EAF8;
    border: 2px solid black;
	font-size: 1rem;
	margin: 10px;
}

button.standard:disabled
{
	background-color: #BFBFBF;
}

button.standard:hover:enabled
{
	background-color: #76C7FF;
}

button.button-height1
{
	height: 25px;
}

button.button-height2
{
	height: 35px;
}

button.button-height3
{
	height: 45px;
}

button.button-width1
{
	width: 25px;
}

button.button-width2
{
	width: 50px;
}

button.button-width3
{
	width: 75px;
}

button.button-width4
{
	width: 100px;
}

button.button-width5
{
	width: 125px;
}

input[type=text], input[type=password]
{
	box-sizing: border-box;
	height: 1.5rem;
	width: 100%;
	padding-left: 2px;
	padding-right: 2px;
	border: 1px solid currentColor;
}

input[type=text]:focus, input[type=password]:focus
{
	background-color: #F3FAFF;
}

input.file_upload
{
	cursor: pointer;
	/*background-color: #f2f2f2;*/
}

select
{
	width: 100%;
	height: 1.5rem;
	border: 1px solid currentColor;
}

select[size]
{
	height: auto;
}

/* BEGIN 'ERROR ICON TOGGLE' SECTION
Show the green (!) icon if 'required_field' class is present on label element. If an 'errored' class is present, the error icon will appear.
If both classes are present, the error icon will take precendence */
label.required_field::after
{
	content: url(../images/RequiredIconSmall.gif);
	padding-left: 0.25rem;
}
label.errored::after
{
	content: url(../images/ErroredIconSmall.gif);
	padding-left: 0.25rem;
}
/*END 'ERROR ICON TOGGLE' SECTION*/


input::placeholder
{
	font-style: italic;
	color: rgb(100, 100, 100, 0.5);
	opacity: 1;
	
}

input:focus::placeholder
{
	color: transparent;
}

/* BEGIN 'HINTS' SECTION 
Hints will appear when its corresponding input box is focused. To create a hint, create a <span> with and place inside
of it an input element, then a label element. Assign the label a class of 'hint' and 'hint_<above|below|left>' for positioning.
Put the help description within the label element. Note that there is no 'hint_right' position and the 'hint_left' position is assigned a
static width.

Example:
<span class="column-size25">
	<input type="text" name="email" id="email" maxlength="200" />
	<label class="hint hint_left">Separate multiple emails with semicolon (;)</label>
</span>
*/
label.hint
{
	font-size: .9rem;
	visibility: hidden;
	opacity: 0;
	position: absolute;
	z-index: 1000;	
	border: 1px solid grey;
	background-color: rgb(255,250,205);
	border-radius: 2px;
	padding: 7px;
	max-width: 175px;
	transition: visibility 0s .3s, opacity .3s;
}
label.hint:before
{
	content: '';
	position: absolute;
	padding: 7px;
	background-color: inherit;
	border: inherit;
	transform: rotate(45deg);
}

label.hint_above
{
	left: 0;
	bottom: 0;
	margin-bottom: 30px;
}
label.hint_above:before
{
	bottom: -8px;
	border-top: 0;
	border-left: 0;
}

label.hint_below
{
	left: 0;
	top: 0;
	margin-top: 30px;
}
label.hint_below:before
{
	top: -8px;
	border-bottom: 0;
	border-right: 0;
}

label.hint_left
{
	left: 0;
	top: 0;
	width: 175px;
	margin-left: -200px;
	margin-top: -10px;
	
}
label.hint_left:before
{
	right: -8px;
	top: 8px;
	border-bottom: 0;
	border-left: 0;
}

input:focus + label.hint
{
	visibility: visible;
	opacity: .5;
	transition: visibility 0s, opacity .5s;
}

input:focus + label.hint:hover
{
	opacity: 1;
	transition: opacity 0s;
}
/* END 'HINTS' SECTION */

img.button:hover
{
	cursor: pointer;
}

table.auto_suggest_citystate
{
	display: block;
	max-height: 300px;
	cursor: pointer;
	bottom: 0;
	position: absolute;
	background-color: white;
	border-collapse: collapse;
	border: 1px solid grey;
	white-space: nowrap;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 1;
}

table.auto_suggest_citystate td
{
	padding: 5px 20px 5px 5px;
}

table.auto_suggest_citystate td:hover
{
	background-color: lightblue;
	box-shadow: 0px 0px 0px 1px blue inset;	
}

table.standard
{
	background-color: #ffffff;
}

span.custom_hyperlink
{
	color: #0000EE;
}

span.custom_hyperlink:hover
{
	color: #cca300;
	text-decoration: underline;
	cursor: pointer;
}


/* Below sections style the modal windows the application uses */
/* The modal window container. Should be "display: none;" by default, but due to the dynamic
nature of pages within which these will be used, we'll let the developer determine their default
display property on a case-by-case basis */
.modal_container
{
    position: fixed;
    z-index: 1;    
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
	background-color: rgba(0,0,0,0.5);
}

/* The actual modal window 'body' */
.modal_content
{
    /* width property should be set on a modal-by-modal basis. What's here is just the default */
    width: 600px;
    box-sizing: border-box;
    padding: 10px;
    background-color: #ECECEC;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25vh;
    box-shadow: 0 0 20px 10px rgba(0,0,0,0.5);
    border-radius: 5px;
	overflow: hidden;
}

/* modal window title, displayed at top of the modal. If used, place it as the first child to the modal_content */
.modal_header
{
    font-size: 1.2rem;
    border-bottom: 1px solid black;
}

/* These classes help with the fadein/fadeout of the modal. They shouldn't be set directly. Utilize the javascript functions showModal and hideModal. */
.showModal
{
	opacity: 1;
	animation: fadeIn 0.25s;
}
.hideModal
{
	opacity: 0;
	animation: fadeOut 0.25s;
}
@keyframes fadeIn
{ from { opacity: 0; }
	to { opacity: 1; } }
@keyframes fadeOut
{ from { opacity: 1; }
	to { opacity: 0; } }


/* This processing animation is a spinning box */
.processing_spinner_small
{
	display: inline-block;
	vertical-align: middle;
	border-top: 2px solid blue;
	border-bottom: 2px solid blue;
	border-left: 2px solid blue;
	border-right: 2px solid blue;
	width: 10px;
	height: 10px;
	animation: processing 1500ms linear infinite;
}
.processing_spinner_medium
{
	display: inline-block;
	vertical-align: middle;
	border-top: 4px solid blue;
	border-bottom: 4px solid blue;
	border-left: 4px solid blue;
	border-right: 4px solid blue;
	width: 20px;
	height: 20px;
	animation: processing 1500ms linear infinite;
}
.processing_spinner_large
{
	display: inline-block;
	vertical-align: middle;
	border-top: 8px solid blue;
	border-bottom: 8px solid blue;
	border-left: 8px solid blue;
	border-right: 8px solid blue;
	width: 40px;
	height: 40px;
	animation: processing 1500ms linear infinite;
}
@keyframes processing
{
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* This processing animation is a scrolling bar */
.processing2_spinner_small
{
	display: inline-block;
	vertical-align: middle;
	width: 30px;
	height: 8px;
	border: 1px solid blue;	
	background: linear-gradient(to left, blue 0%, blue 20%, transparent 100%);
	background-size: 10px 20px;
	background-repeat: no-repeat;
	animation: processing2 2000ms linear infinite;
}

.processing2_spinner_medium
{
	display: inline-block;
	vertical-align: middle;
	width: 60px;
	height: 15px;
	border: 2px solid blue;	
	background: linear-gradient(to left, blue 0%, blue 20%, transparent 100%);
	background-size: 20px 40px;
	background-repeat: no-repeat;
	animation: processing2 2000ms linear infinite;
}

.processing2_spinner_large
{
	display: inline-block;
	vertical-align: middle;
	width: 120px;
	height: 30px;
	border: 4px solid blue;	
	background: linear-gradient(to left, blue 0%, blue 20%, transparent 100%);
	background-size: 40px 80px;
	background-repeat: no-repeat;
	animation: processing2 2000ms linear infinite;
}

@keyframes processing2
{
	from { background-position: -50%; }
	to { background-position: 150% }
}

.file_dropzone
{
	border: 5px dashed blue;
	border-radius: 5% 5%;	
	background: url('../images/FileIcon.gif') center no-repeat;
	text-align: center;
}

.dropzone_active
{
	background-color: rgba(111,220,111,1);
	transition: background-color 100ms, opacity 100ms;
}

.dropzone_inactive
{
	opacity: 0.5;
	transition: opacity 100ms, background-color 100ms;
}

/* This part handles custom checkboxes. Default browser checkboxes are too small, so we've replaced them with a slightly larger version. The following template should be used:
<label><input type="checkbox" class="custom_checkbox"/><span class="custom_checkbox"></span> OptionalText</label>
*/
input.custom_checkbox
{
	position: absolute;
	visibility: hidden;
}
span.custom_checkbox
{
	background-color: white;
	display: inline-block;
	width: 15px;
	height: 15px;
	border: 1px solid black;
}
span.custom_checkbox:active
{
	background-color: #CCF2FF;
}
input.custom_checkbox:checked + span.custom_checkbox::before
{
	content: '';
	display: block;
	top: 0px;
	left: 5px;
	width: 4px;
	height: 11px;
	position: relative;
	border-style: solid;
	border-color: #212f3d;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

legend
{
	margin-top: 5px;
}

.section_header {
	color: #0066ff;
	font-weight: bold;
}