/* CSS Document */
form{
	margin:4px 0px;
	padding:4px;	
}
/* CLEARFIX (https://css-tricks.com/snippets/css/clear-fix/) */
form:before, #pagecontent:before,
form:after, #pagecontent:after {
  content: "";
  display: table;
} 
form:after, #pagecontent:after {
  clear: both;
}
form #pagecontent {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
form h2, 
form h3,
form h4,
form .form-instructions{
	margin: 15px 2% 8px 2%;
	width: 96%;	
}

form .form-section h3{
	margin-left:0px;	
}
.form-section{
	position:relative;
	padding:16px 3%;
	background-color:#FFF;
	width:94%;
	max-width:1000px;
	border:1px solid #DDD;
	margin:0px auto 30px auto;
	/*box-shadow:0 2px 4px rgba(0,0,0,.2);*/
}
.form-section-instructions{
	padding-bottom:16px;	
}
.form-instructions p,
.form-section-instructions p{
	padding:6px 0px;
}	

/*INPUT BOXES*/
form .input-box, 
form .checkbox-box, 
form .textarea-box, 
form .textarea-input-box, 
form .input-box-rightlabel{
	padding:4px 3px;	
	margin:3px 3px 0px 7px;	
}

/* CLEARFIX (https://css-tricks.com/snippets/css/clear-fix/) */
form .input-box:before, form .checkbox-box:before, form .textarea-box:before, form .textarea-input-box:before, form .input-box-rightlabel:before,
form .input-box:after, form .checkbox-box:after, form .textarea-box:after, form .textarea-input-box:after, form .input-box-rightlabel:after,
.form-display .input-box:before, 
.form-display .input-box:after 
{
  content: "";
  display: table;
} 
form .input-box:after, form .checkbox-box:after, form .textarea-box:after, form .textarea-input-box:after, form .input-box-rightlabel:after,
.form-display .input-box:after{ 
	clear: both;
}
form .input-box, form .checkbox-box, form .textarea-box, form .textarea-input-box, form .input-box-rightlabel,
.form-display .input-box{
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}


/* CHECKBOX AND RADIO LISTS */
form .checkbox-box, form ul.radio-box, #pagecontent form ul.radio-box{
	margin-left:158px;
	list-style:none;
	clear:both;
}
form .checkbox-box-single{
	margin-left:170px;	
}
form .inline-box{
	display:inline-block;	
}

/* SUBMIT BOX */
form .submit-box{
	text-align:center;	
}

/* checkbox-like layout for short text inputs */
form .input-box-rightlabel{
	margin-left:168px;	
}
form .input-box-rightlabel label{
	float:left;
	text-align:left;
	min-width:none;
	max-width:700px;
	margin-left:10px;
	margin-top:6px;
	clear:none;
}
form .input-box-rightlabel input,
form .input-box-rightlabel select
{
	width:60px;
	float:left;
}

/* MOBILE: CHECKBOX AND RADIOBOX */
@media only screen and (max-width: 1023px){
	form .checkbox-box, form .radio-box,
	form.medlabel .checkbox-box, 
	form.medlabel ul.radio-box, #pagecontent 
	form.medlabel ul.radio-box{
		margin-left:0px;
	}
	form .checkbox-box-single{
		margin-left:0px;	
	}
	form .input-box-rightlabel{
		margin-left:0px;	
	}
}

/* LABELS */
form  .input-box label, 
.form-display .input-box label, 
form .checkbox-list-title, 
form .checkbox-container-title,
form .textarea-input-box label{
	display:block;
	float:left;
	min-width:150px;
	max-width:250px;
	font-size:110%;
	padding:2px;
	margin:3px 3px 0 7px;
	text-align:right;
}
form .input-box-rightlabel label{
	font-size:110%;
}
form.shortlabel .input-box label,  
form .input-box.shortlabel label,
.form-display-shortlabel .input-box label{
	min-width:50px;
	max-width:300px;
}
form.label100 .input-box label, 
form .input-box.label100 label,
.form-display-label100 .input-box label{
	min-width:100px;
	max-width:300px;
}
form.medlabel .input-box label, 
.form-display-medlabel .input-box label,
form .input-box.medlabel label, 
form.medlabel .checkbox-list-title{
	min-width:200px;
	max-width:300px;
}
form.longlabel .input-box label,
form .input-box.longlabel label,
.form-display-longlabel .input-box label, 
form.longlabel .checkbox-list-title{
	min-width:250px;
	max-width:300px;
}
form.longlabel .input-box-rightlabel label{
	max-width:600px;	
}
form.medlabel .checkbox-box, 
form.medlabel ul.radio-box, #pagecontent 
form.medlabel ul.radio-box{
	margin-left:208px;
}
form.longlabel .checkbox-box, 
form.longlabel ul.radio-box, #pagecontent 
form.longlabel ul.radio-box,
form.longlabel .input-box-rightlabel{
	margin-left:258px;
}

form .inline-box label{
	min-width:0;
	max-width:none;	
}
form .form-divider-label{
	float:left;
	padding:4px 6px;	
}
form .mid-label,
form .inline-label{ /* additional label next to an input or in between to inputs */
	float: left;
	padding: 7px 4px 0px 8px;	
}
form  .input-box-stacklabel label{
	display:block;
	float:none;
	text-align:left;
	min-width:300px;
	max-width:none;
	font-size:110%;
	padding:3px 0px;
	margin:3px 3px 0 0px;	
}
/* MOBILE LABELS */
@media only screen and (max-width: 1023px){
	form .input-box label, 
	.form-display .input-box label, 
	form .checkbox-list-title{
		display:block;
		float:none;
		text-align:left;
		min-width:300px;
		max-width:none;
		font-size:110%;
		padding:3px 0px;
		margin:3px 3px 0 0px;
	}	
	form .checkbox-list-title{
		margin-top:16px;	
	}
	form .checkbox-container .helper{
		margin-top:0px;
		padding-top:0px;
	}
}

/* LABELS: checkbox-box / radio-box */
form .checkbox-box li, 
form .radio-box li{
	clear:both;
	padding:5px 0px;
}
form .checkbox-box label, form .radio-box label{
	font-size:110%;
}	
form .checkbox-label-text{
	display:block;
	float:left;
	max-width:90%;
}

/* LABELS: textarea-box */
form .textarea-box label,
.form-display .textarea-box label{
	display:block;
	font-size: 110%;
	margin-bottom:5px;	
	/*width:0px; /*to allow min-width to be default instead of max-width...*/
	text-align:left;
	width:800px;
	max-width:100%;
}
form .textarea-description
.form-display .textarea-description{
	margin-left:168px;
	padding:5px;
	font-style:italic;
}
form .textarea-box label .textarea-description, 
form .textarea-box label .note{
	font-style:italic;
	font-size:90%;
	color:#888;
	padding:5px;
	margin-left:0px;
}

/* INPUTS */
/* styling on form inputs themselves*/ 
form input, form select, .form-display .input-display{
	font-size:110%;
	padding:2px;	
}
form .input-box input, form .input-box select, .form-display .input-display{
	float:left;	
}
form select{
	padding:5px 2px;	
}
form .submit-box input{
	margin:10px 0px 0px 20px;	
	padding:5px;	
}
form .submit-box input.register-button,
form .submit-box input.submit-button,
form .submit-box button.other-button
{
	padding:12px;
	background-color: #006F99;
	color: #FFFFFF;
	border-radius: 6px;
	border: none;
	font-size:120%;
}
form .submit-box button.other-button{	
	background-color:transparent;
	color:#1378F4;
	border: 1px solid #1378F4;
}
form .checkbox-list{
	list-style:none;
}
form .checkbox-box input,
form .checkbox-box-wraplabel input{
	float:left;
	margin:5px 10px 0px 0px;	
}
form .input-box input{
	padding:5px;	
}
/* INPUT:lengths */
form .input-box.input-double input{
	width:242px; /* default makes two side-by-side boxes exactly the same width as an input-med (first,last lines up with email)*/
	margin-right:4px;
}
form .input-box input.input-long,
form .textarea-input-box textarea.input-long{
	width:700px;
}
form .input-box input.input-med,
form .textarea-input-box textarea{
	width:500px;
}
form .input-box input.input-short
form .textarea-input-box textarea.input-short{
	width:100px;
}
form .input-box-stacklabel input, .form-display-stacklabel .input-display{
	float:none;
	width:500px;
	margin-left:168px;
	padding:8px;	
	font-size:100%;
}

/* MOBILE: INPUTS*/
@media only screen and (max-width: 1023px){
	form .input-box input{
		padding:2%;	
	}
	form input, form select, .form-display .input-display{
		float:none;
		max-width:94%;
		padding:8px;	
		font-size:100%;
	}
	form .input-box.input-double input{
		width: 43%;
		margin-right: 1%;
	}
}

/* CHECKBOX WITH LABEL-WRAP AND HIGHLIGHT */
form .checkbox-box-wraplabel{
	margin-left:60px;	
	list-style:none;
}	
form #session-selection .checkbox-box-wraplabel{
	margin-left:0px;	
}
form .checkbox-box-wraplabel input{
	margin:5px 10px 0px 0px;	
	padding:10px 0px 10px 10px;
}
form .checkbox-box-wraplabel label{
	display:inline-block;
	font-size:110%;
	width:93%;
	max-width:93%;
	padding:16px 5% 16px 2%;
	margin-left:0px;
	border:1px solid #CCC;
	border-radius:10px;	
}
form .checkbox-box-wraplabel label:hover,
form label.checkbox-highlightlabel:hover{
	background-color:#ceeaff;
	cursor:pointer;
}
form .checkbox-box-wraplabel label:has(input:checked) {
  	background-color:#ceeaff;
}
form .checkbox-box-wraplabel label.check-selected,
form label.checkbox-highlightlabel.check-selected
{
	background-color:#ceeaff;
}
form .checkbox-box-wraplabel li{
	margin:4px 0px;
}



form .textarea-box textarea{
	padding:5px;
	height:80px;
	width:98%	
}
form .textarea-long{
	width:98%;
}
form .textarea-med{
	width:500px;
}
form .textarea-short{
	width:100px;
}
form .textarea-full,
form .textarea-box .textarea-full{
	width:99%;
	padding:0.5%;
	margin-left:0px;
	height:80px;
}
form .input-box .datepicker-field{
	width:110px;	
}
form .input-box input.time-field, form .input-box input.time-display{
	width:80px;
}
form .input-box input.time-display{
	background-color:transparent;
	border:none;	
}
@media only screen and (max-width: 1023px){
	form .textarea-box textarea,
	form .textarea-long,
	form .textarea-med,
	form .textarea-short{
		padding:1%;
		height:80px;
		margin-left:0px;
		width:98%;
	}
}

/* FORM DISPLAY (displaying form results in form-like layout) */
.form-display .input-display,
.form-display .textarea-box{
	padding:4px 3px;	
	margin:3px 3px 0px 7px;	
}
.form-display .input-display{
	display:inline-block;	
}
.form-display .input-box-rightlabel{
	margin-left:20px;	
}
.form-display .textarea-display{
	width:750px;
	padding:10px;	
	border:1px solid #CCC;
	min-height:50px;
}
.form-display .textarea-display p{
	margin:0px;
	padding:5px 0px;	
}

/* Link inputs */
/* box for upload / link selection */
.link-input, .link-btn{	
	display:block;
	padding:15px 10px;
	border:1px solid #CCC;
}
.link-btn{
	float:left;	
}
/* FILE UPLOAD */
form .input-box-upload{
	position:relative;	
}
form .input-box-upload input{
	width: 100%;
	padding: 50px 0px;
	text-align: center;
	border: 3px dashed #AAA;
}
form .input-box-upload .upload-text{
	position: absolute;
	top: 20px;
	width: 100%;
	text-align: center;
}

/* FORM VALIDATIOM */
/* SEE: /javascript/validate.js */
.required-invalid{
	border:1px solid #FF0000;
	background-color:#FFCCCD;
	border-radius:8px;
}

/* WAITLIST */
.event-waitlist{
	color:#993300;
}

/* STANDARD FORMS */
.loginbox{
	width:500px;
	padding:30px;
	margin:50px auto;
	border:1px solid #999;
	background-color:#FFF;
	border-radius:5px;		
}

/* PREFILLED HINTS */
form input.hintfill.hintfill-default{
	font-style:italic;
	color:#888;	
}

/* FILTER / SEARCH FORMS (/includes/Filters.php Class) */
#filter-forms-box{
	border:1px solid #ccc;
	padding:16px;
	background-color:#FFF;
	margin-bottom:8px;
}
.filter_search-switches{
	padding:16px;	
}
.filter_search-switch{
	float:left;
	display: block;
	padding: 6px 8px;
	background-color: #e0eeff;
	margin-right:4px;
}
.filter_search-switch:hover{
	text-decoration:none;
	background-color:#1378F4;
	color:#FFF;
}
.filter-switch{
	border-radius: 6px 0px 0px 6px;
}
.search-switch{
	border-radius: 0px 6px 6px 0px;
}
.filter_link-custom{
	padding:16px 0px 0px 16px;	
}
.filter_link-label{
	font-weight:bold;	
}
.filter_search-form-box{
	display:none;
	position:fixed;
	z-index:20000;
	top:0px;
	left:0px;
 	width: 50vw;
	height:100vh;
	overflow-y:auto;
	background-color:#FFF;
 	box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
/* ARCHIVED 2024-07-29 to make default full side of page.
.filter_search-form-box{
	display:none;
	position:fixed;
	z-index:20000;
	left:15%;
	width:70%;
	top:5vh;
	height:90vh;
	overflow-y:auto;
	background-color:#FFF;
	border:1px solid #1378F4;
}
*/
.filter_search-form-box h2{
	padding-left:16px;	
}
#filter_search-clearform{
	float:left;
	margin:0px;
	padding:0px;
}
.filter_search-clearbutton{
	background-color:#fff;
	border:1px solid #ff5a1e;
	padding:6px 8px;
	border-radius:6px;
	font-size:90%;
}

/* RESULT MESSAGES*/
#resultbox{
	position: fixed;
	bottom: 0px;
	left:0px;
	width: 90vw;
	z-index: 20000;
	overflow-y: scroll;
	max-height: 90vh;
	margin: 2.5vh 2.5vw;
	padding: 2.5vh 2.5vw;
}
.submit-box #resultbox{
	position:relative;
	float:right;
	width:600px;
	margin:0px;
}
.site_content-section #resultbox{
	position:relative;
	width:90%;
}
.result-page_container #resultbox{
	position:relative;
	top:auto;
	left:auto;
	z-index:auto;
	width:100%;
}
.resultbox-close{
	padding:4px;
	border:1px solid #1378F4;
	border-radius:4px;
}
.resultbox-close:hover{
	background-color:#1378F4;
	color:#FFF;
}
.result-{
	display:none;	
}
.result-success, 
.result-error, 
.result-warning, 
.result-nextsteps{
	margin:10px 0px;
	padding:10px;
	border:1px solid #000000;
	border-left-width:6px;
}
.result-inline{
	padding:3px;
	border-radius:6px;
}
.result-success{
	border-color:#009900;
	background-color:#D7FFD3;
}
.result-warning{
	border-color:#FF8300;
	background-color:#FCDBA6;
}
.result-error{
	border-color:#990000;
	background-color:#FFD4D3;
}
.result-nextsteps{
	border-color:#009900;
	background-color:#FFF;
}
.resultbox h3.result-title,
.resultbox .result-title{
	margin: 0px 0px 12px 0px;	
}
.resultbox p.result-body{
	padding:4px 0px;	
}
.resultbox .result-time{
	font-style:italic;
}
form .err{
	font-weight:bold;
	color:#990000;
}
/* Helper_note Style */
.helper_note-warning,
.helper_note-success,
.helper_note-nextSteps,
.helper_note-instructions,
.helper_note-error
{
	float:left;
	width:68%;
	padding-left:1%;
	margin-left:1%;
	border: none;
	border-left: 3px solid #CCC;
	background-color: transparent;
}
.helper_note-success{
	border-color:#009900;
	color:#009900;
}
.helper_note-warning{
	border-color: #FF8300;
	color: #FF8300;
}
.helper_note-error{
	border-color:#990000;
	color:#990000;
}
.helper_note-nextsteps{
	border-color:#009900;
	color:#009900;
}
.helper_note-instructions{
	border-color:#FFCEF2;
	color:#e87aca;
}
/* MOBILE: RESULT MESSAGES*/
@media only screen and (max-width: 1023px){
	#resultbox{
		position: fixed;
		top: 0px;
		width: 92%;
		margin-left: 1%;
		padding:3%;
		border:none;
		z-index: 10000;
		overflow-y:scroll;
		text-align:center;
	}
	#resultbox h3{
		text-align:center;	
	}
	#resultbox .link-button{
		margin:0px 20px;
	}
	#resultbox .resultbox-viewinfo{
		padding:4px;
		margin:0px 20px;
	}
}

/* INSTRUCTIONS (IN-FORM) */
.checkbox-instructions{
	margin-left:150px;	
}

/*HELPER TEXT AND HINTS*/
.helper{ /*next to a form input*/
	display:block;
	float:left;	
	padding:5px;
	font-style: italic;
	color: #666;	
}
td.helper{
	display:table-cell;
	float:none;	
	padding:5px;
	font-style: italic;
	color: #666;		
}
.input-box .helper,
.textarea-input-box .helper{
	max-width:30%;
}
.input-box .helper.helper-shortinput{
	max-width:60%;
}
.checkbox-container .helper, .radiobox-container .helper{
	margin-top:3px;	
}
.textarea-box .helper{
	float:none;	
}
.input-box .helper-long,
.textarea-input-box .helper-long{ /* drops below input */
	max-width:80%;
	margin-left: 168px;
	padding: 4px;
	font-style: italic;
	color: #666;	
}
.medlabel .input-box .helper-long{
	margin-left:210px;	
}
.helper-emphasized{
	color:#b23e3e;
	font-weight:bold;	
}
/* MOBILE HELPER */
@media only screen and (max-width: 1023px){
	.helper, .input-box .helper{
		float:none;
		max-width:none;
	}
}

/* CLICK TO EDIT TEXTAREAS */
form .textarea-box .clicktoedit-currentcontent{
	border:1px solid #888;
	padding:16px;
	max-height:200px;
	overflow:auto;
}

/* PAGINATOR */
.paginator-controls-bar{
	padding: 8px 16px;
}
.paginator-controls-pagebuttons{
	margin-left:8px;	
}

/* WHATISTHIS ASPIRE */
#whatisthis-aspire, .whatisthis{
	width: 510px;
	margin-left: 172px;
	border-left: 1px solid rgb(204, 204, 204);
	padding-left: 10px;
}
form.medlabel #whatisthis-aspire, .whatisthis{
	margin-left: 220px;
}
@media only screen and (max-width: 1023px){
	#whatisthis-aspire, .whatisthis{
		width: 90%;
		margin-left: 1%;	
		border-left: 1px solid rgb(204, 204, 204);
		padding-left: 4%;
	}
}

/*edit buttons*/
.profile-switch:link, .profile-switch:visited,
.view-switch:link, .view-switch:visited,
.edit-switch, .edit-switch:visited,
.close-btn{
	position:absolute;
	right:0px;
	top:0px;
	padding:6px 8px;
	border:1px solid #1378F4;
	border-radius:0px 0px 0px 8px;
}
.close-btn:hover{
	color:#FFF;
	background-color:#1378F4;
}

/* NOTES */
/*FORWARD, NEUTRAL, BACK, DELETE */
.programNote-item{
	margin:4px 0px;
	padding:4px 0px;
	border-bottom:1px solid #CCC;
}
.programNote-datebox{ 
	float: left;
	min-width: 70px;
	text-align: right;
	padding-right: 16px;
}
.programNote-infobox{
	float:left;
	width:800px;	
}
.programNote-created_by{
	font-style:italic;	
	padding:4px 0px;
}
.programNote-noteSubject{
	font-size:110%	
}	
.programNote-noteText{
	padding:6px;
	border-left:1px solid #ccc;	
}
ul.programNote-noteReason{
	margin:4px 30px;	
}
ul.programNote-noteReason li {
	font-size: 170%;
	line-height: 80%;
}
ul.programNote-noteReason.noteReason-ON_HOLD li{color:#8E3637;}
.programNote-reasonText {
 	vertical-align: top;
	color: #000000;
	font-size: 60%;
}
.programNote-noteReason li .noteReason-BACK{color:#B30000;}
.programNote-noteReason li .noteReason-DELETE{color:#B30000;}

/* PROGRESS COLORS */
.nextStep-switch {
	cursor: pointer;
	width: 180px;
	text-align: center;
	font-size: 110%;
	padding: 8px 10px;
	margin-bottom: 5px;
}
.nextStep-infoPanel{
	width: 180px;
	text-align: center;
	font-size: 100%;
	padding: 4px 6px;
	border-radius:4px;
	margin:2px;	
}
.nextStep-switch-FORWARD, .nextStep-form-FORWARD{
	background-color:#70d178;
	color:#FFF;	
}
.nextStep-switch-BACK, .nextStep-form-BACK{
	background-color:#e88686;
	color:#FFF;	
}
.nextStep-switch-NEUTRAL, .nextStep-form-NEUTRAL{
	background-color:#F0F0F0;
	color:#575757;
	border:1px solid #575757;
}
.nextStep-switch-SAVE, .nextStep-form-SAVE{
	background-color:#F0F0F0;
	color:#3b9634;
	border:1px solid #3b9634;
}
.nextStep-switch-DELETE, .nextStep-form-DELETE{
	background-color:#F0F0F0;
	color:#B9383A;
	border:1px solid #B9383A;
}

/* SHOW / HIDE OPTIONAL TEXTAREA */
.textarea-showhide-show .textarea-hidden{
	display:none;	
}
.textarea-showhide-show .textarea-showing{
	display:block;	
}
.textarea-showhide-hide .textarea-hidden{
	display:block;	
}
.textarea-showhide-hide .textarea-showing{
	display:none;	
}
.textarea-hidden{
	display:block;	
	padding:.5%;
}
.textarea-hidden .goal-new-inputs{
	padding:0px 1%;
}
.textarea-hidden .goal-new-label{
	font-style:italic;
	color:#888;
}
.textarea-hidden-switch{
	width:30%;
	border:1px solid #CCC;
	border-radius:4px;
	padding:1%;
	margin-right:1%;
	text-align:center;
	background-color:#EFEFEF;
}
.textarea-hidden-blurb{
	width:60%;	
	font-style:italic;
	color:#888;
}
.textarea-hidden-blurb, .textarea-hidden-switch{
	float:left;
}

/* inline small button*/
.inline-button-small,
.pagefilter-shortcut{
	padding: 2px 5px 4px 5px;
  	margin: 3px;
  	font-size: 100%;
  	color: #666;
}

.list-box{
	border:1px solid #CCC;
	background-color:#EFEFEF;
	padding:0px 0.5%;
}