@charset "utf-8";
/**
 * Styling form elements sucks :(
 * 11-10-21 - Should probably separate this into 3 files, defaults, GF, and WC forms and then load on a per-site basis checking if classes exist?
 *
 */


:root {
	
	/* Vars here are more like defaults that allow this stylesheet to do anything */
	
	/* Basic stuff intended to be overridden by child theme */
	--field_font: inherit;
	--field_font_size: inherit; 
	--field_line_height: inherit;
	--field_background_color: transparent;
	/* Makes sense if child themes don't override? */
	--field_border_width: 1px;
	--field_border_style: solid;
	--field_border_color: var(--border_color);
	/* NOTE: This matches select2 fields. (TODO: Maybe that's configurable in script?) */
	--field_border_radius: 4px;
	
	/* Matches Chrome's default color and is AA compliant */
	--field_placeholder_color: rgb(117,117,117);
	
	/* Base this off button padding so they're the same height? */
	/* TODO: Perhaps this shorthand version should be more implicit. (--field_padding_top, etc.) */
	--field_padding: var(--button_padding_v, var(--space_xsmall)) var(--button_padding_h, var(--space_small));
	
	/* Better? More useful? */
	/* TODO: Maybe this is where the --button_padding_v should be applied? */
	--field_padding_v: var(--space_xsmall, 0.5rem);
	--field_padding_h: var(--space_small, 0.75rem);
	
	/* Used in field layouts and spacings of labels, messages, etc. */
	--gfield_space_v: var(--space_small, 0.75rem);
	--gfield_space_h: var(--space_small, 0.75rem);
	
	/* GForm 2.5+ uses fieldsets */
	--fieldset_padding: 0 var(--gfield_space_h);
	
	/* Used to color-brand radio/checkbox fields */
	--field_filter_hue_rotate: hue-rotate(360deg);
}

/* Cross-browser fix (Why not in reset?) */
::placeholder {
	color: var(--field_placeholder_color);
	opacity: 1;
}


/* Trying to color checkboxes/radio buttons? */
input[type="radio"],
input[type="checkbox"] {
	filter: var(--field_filter_hue_rotate);
}


/* Remove up/down arrows on number inputs? */
/* 11-10-21 This was added for SOTLF, but i'm not really a fan of this. Leave to child themes? */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
  text-align: center;
}


/*
 * Reset default fieldset styles?
 */
fieldset {
    border: var(--fieldset_border, 0);
    margin: var(--fieldset_margin, 0);
    padding: var(--fieldset_padding, 0);
}

/*
 * Allow only vertical resizing of textareas. (In Reset?)
 */
textarea {
    resize: vertical;
}




/* Standardize inputs */
input,
textarea,
select {
	font-family: var(--field_font);
	font-size: var(--field_font_size);
	line-height: var(--field_line_height);
	padding: var(--field_padding);
	border: var(--field_border_width) var(--field_border_style) var(--field_border_color);
	border-radius: var(--field_border_radius);
	background-color: var(--field_background_color);
	width: 100%;
}
/* Special case field types */
input[type="submit"],
input[type="number"],
input[type="radio"],
input[type="checkbox"] {
	width: auto;	
}
input[type="radio"],
input[type="checkbox"] {
	padding: inherit;
}
input[type="file"] {
	width: auto;
	border: 0;
	padding: unset;
}


/* 11-10-21 - Wouldn't this look for a font called "anything" when --text_font is not defined? Needs testing */
select option {
	font-family: var(--text_font), anything;
}



/* WC forms use select2 js */
/* Select2 Fields need lots of overrides :( */
.select2.select2-container {
	display: block;
	font-size: var(--field_font_size);
	line-height: var(--field_line_height);
}
.select2.select2-container .select2-selection--single {
	height: auto;
	margin: 0;
	background-color: var(--field_background_color);
	border-color: var(--field_border_color);
	border-width: var(--field_border_width);
	border-radius: var(--field_border_radius);
}

.select2.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: inherit;
	color: inherit;
	padding-top: var(--field_padding_v);
	padding-bottom: var(--field_padding_v);
	padding-left: var(--field_padding_h);
}
.select2-container--default .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
	color: var(--field_placeholder_color);	
}

.select2.select2-container--default .select2-selection--single .select2-selection__placeholder {
	display: block;
	min-height: 1.5em;
}
.select2.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: auto;
	bottom: 1px;
}

.select2-container .select2-results {
	font-size: 1rem;
	line-height: 1.5;	
}









/* Gravity forms specific */
/* TODO: Move these to separate css file. Does GF know if a form is going to load before it hits the shortcode? */

/* These usually get applied via shortcode. Clear any floated images in the same wysiwyg section */
.gform_wrapper {
	clear: both;	
}

.gform_fields,
.gfield_radio,
.gfield_checkbox {
	list-style: none;
	margin: 0;
	padding: 0;	
}

.gfield > label {
	/*display: block;*/ /* 3-18-20 - Leave this to child themes? */
}
.gfield_required {
	color: var(--field_label_required_color, red);
	padding-left: 0.25rem;
}


/* .gform_hidden class gets applied by selecting Hidden field type */
li.gform_hidden {
	margin: 0;
	padding: 0;
}
/* .gfield_visibility_hidden class gets added by selecting hidden field visibility */
.gfield_visibility_hidden {
	visibility: hidden;
    position: absolute;
    left: -9999px;	
}

/* Mostly for name/address fields, but will need to be tested/expanded */
.ginput_complex {
	display: flex;
	flex-wrap: wrap;
	margin: calc( -1 * var(--gfield_space_h) );	
}
.ginput_complex > span {
	display: block;
	flex-grow: 1;
	flex-basis: 50%;
	padding: var(--space_xsmall) var(--gfield_space_h);	
}
.ginput_complex > span.ginput_full {
	flex-basis: 100%;	
}

.ginput_complex label {
	/*font-size: 0.875em;*/	/* 3-18-20 - Leave this to child themes? */
}




.gfield_radio input {
	margin-right: 0.25em;	
}

.gfield_description,
.validation_message {
	font-size: small;
	line-height: normal;	
}
.validation_message {
	color: var( --color_validation_message, var(--color_error) );	
}


/*
.gform_footer {
	margin-top: 1em;	
}
*/

.gform_button.button {
	border: 1px solid transparent;
	border-radius: var(--field_border_radius);	
}

/* Honeypot fields */
.gform_validation_container {
	position: absolute !important;
	left: -9999em;
	top: -9999em;
}

/* Date Select Fields */
.ui-datepicker {
	padding: 0.5em;
	background-color: #fff;
	border: 1px solid var(--gray_light);
	border-radius: var(--border_radius);
	box-shadow: var(--box_shadow);	
}
/* This doesn't load display:none, but it is empty on load */
.ui-datepicker:empty {
	display: none;
}
.ui-datepicker-header {
	display: flex;
	align-items: center;
}	
.ui-datepicker-prev {
	order: 1;	
}
.ui-datepicker-next {
	order: 3;	
}
.ui-datepicker-title {
	order: 2;
	padding: 0 0.5em;	
}
.ui-datepicker-title select {
	max-width: 50%;	
}
.ui-datepicker-calendar {
	margin-bottom: 0;
	border-collapse: collapse;	
}
.ui-datepicker-calendar td {
	border: 1px solid var(--gray_light);
	text-align: center;
}
.ui-datepicker-calendar .ui-datepicker-today {
	background-color: var(--gray_xlight);
}
.ui-datepicker-calendar td a {
	display: block;
	text-decoration: none;
	width: 2em;
	line-height: 2;
}


.gform_drop_area {
	padding: var(--space_big) var(--space_small);
	border: 4px dashed var(--gray_light);
	display: flex;
	align-items: center;
	justify-content: center;	
}
.gform_drop_instructions {
	margin-right: var(--space_normal);	
}
.gform_button_select_files {
	width: auto;	
}


/* .hidden_label class gets applied via gf field settings */
.hidden_label .gfield_label,
.hide-label > label {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;	
}
/* Put the hide-labels class on the form to hide all labels */
.hide-labels label {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;	
}
/* TODO: Probably want a class to optionally show labels (checkbox, radio fields) */





/* NOTE: These validation styles require some custom js to mimick default WC form validation */

/* Required field has no value */
.invalid > input,
input[aria-invalid="true"],
.gfield_error input {
	box-shadow: inset 2px 0 0 #e2401c;
	box-shadow: inset 2px 0 0 var(--color_error);	
}
/* Required field has value */
.valid > input {
	box-shadow: inset 2px 0 0 #0f834d;
	box-shadow: inset 2px 0 0 var(--color_success);	
}




/**
 * 9-20-19 NOTE: Padding seems to work better for consistent spacing once gf ready classes are in use
 * Needs more testing & refining though... Especially because often forms will have the submit button up in the fields (footer forms - yuck) :( 
 *
 * 12-9-19 UPDATE: Footer forms will get a custom class (.float-fields) to exclude flexbox styles and use floats instead - Needs testing
 */
/*
.gform_fields {
	padding: 0.5rem 0;
	margin: 0 -0.5rem;		
}

.float-fields .gform_fields:after {
	content: '';
	display: table;
	clear: both;
}

.inline .gform_fields {
	padding: 0;
	margin: 0;
}

.inline .gform_fields:after {
	display: none;	
}
.gfield {
	margin: 0 !important;
	padding: 0.5rem;	
}

.gfield.gform_hidden {
	padding: 0;	
}
.gform_footer {
	margin-top: 0;	
}

.gform_confirmation_message {
	margin-top: var(--space_xlarge);
	min-height: 180px; 	
}
*/

/* TODO (5-6-20): Does this negative-margin/calc stuff work wth the css var js polyfill? */
.gform_fields {
	margin: var(--gfield_space_v) calc(-1 * var(--gfield_space_h) ); 
	display: flex;
	flex-wrap: wrap;
}
.gfield {
	flex-basis: 100%;
	padding: var(--gfield_space_v) var(--gfield_space_h);	
}


.float-fields .gform_fields {
	display: block;
	
}


/* Multi-page forms */
.gform_page_footer {
	display: flex;
	flex-wrap: wrap;	
}
.gform_page_footer .button {
	width: auto;
}
.gform_previous_button {
	margin-right: auto;	
}
.gform_next_button {
	margin-left: auto;	
}
.gform-save-link {
	min-width: 100%;
	margin-top: var(--space_normal);	
}












/* 11-10-21 - GF updates for their drag-and-drop editing functionality */
.gfield--width-half {
	flex-basis: 50%;
}
.gfield--width-third {
	flex-basis: 33.3333%;
}
.gfield--width-quarter {
	flex-basis: 25%;
}



/* 11-10-21 - Added functionality to use images in radio field labels */

/* This gets added to the ginput_container if any of the radio options uses an image */
.has-image-labels {
	
}







/* Utiltiy classes for gf form layout - From here: https://docs.gravityforms.com/css-ready-classes/ */


.gf_list_inline .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc( -1 * var(--gfield_space_h) );
	margin-right: calc( -1 * var(--gfield_space_h) );
}
.gf_list_inline .gfield_radio .gchoice {
	padding: 0 var(--gfield_space_h);
}

/*
.gf_full_width {
	clear: both;	
}
*/

@media( min-width: 30em){
	
	/*
	li.gf_left_half {
		margin: 0.5em 0;
		float: left;
		width: 50%;
		padding-right: 0.5em;
			
	}
	li.gf_right_half {
		margin: 0.5em 0;
		float: left;
		width: 50%;
		padding-left: 0.5em; 	
	}
	*/
	
	/* 12-6-19 - This is problematic if conditional logic is used */
	/*
	li.gf_right_half + .gfield {
		clear: both;	
	}
	*/
	
	
	
	
	/* We don't want to clear if the field gets hidden through GF conditional logic */
	/*
	li.gf_right_half[style="display: none;"] + .gfield {
		clear: none;	
	}
	.gfield_error.gf_left_half + .gfield + .gfield {
		clear: left;	
	}
	.gfield_error.gf_left_half + .gfield[style="display: none;"] + .gfield {
		clear: none;	
	}
	*/
	
	
	li.gf_left_half,
	li.gf_right_half {
		flex-basis: 50%;
	}
	
	
}

@media( min-width: 45em){
	
	/* 12-9-19 These need to be converted to flex-basis */
	li.gf_left_third {
		margin: 0.5em 0;
		float: left;
		width: 33.3333%;
		padding-right: 0.6666em; 	
	}
	li.gf_middle_third {
		margin: 0.5em 0;
		float: left;
		width: 33.3333%;
		padding: 0 0.3333em; 	
	}
	li.gf_right_third {
		margin: 0.5em 0;
		float: left;
		width: 33.3333%;
		padding-left: 0.6666em; 	
	}
	li.gf_right_third + .gfield {
		clear: both;	
	}
	
	/* We don't want to clear if the field gets hidden through GF conditional logic */
	li.gf_right_third[style="display: none;"] + .gfield {
		clear: none;	
	}
	
	li.gf_first_quarter {
		margin: 0.5em 0;
		float: left;
		width: 25%;
		padding-right: 0.5em;	
	}
	li.gf_second_quarter,
	li.gf_third_quarter {
		margin: 0.5em 0;
		float: left;
		width: 25%;
		padding: 0 0.5em
	}
	li.gf_fourth_quarter {
		margin: 0.5em 0;
		float: left;
		width: 25%;
		padding-left: 0.5em;	
	}
	li.gf_fourth_quarter + .gfield {
		clear: both;	
	}
	
	
}