@import url(https://fonts.googleapis.com/css?family=Roboto);

:root {
	--font-regular: Roboto, Arial, sans-serif;
	--font-italics: var(--font-regular);
	--font-bold: var(--font-regular);
	--font-bold-weight: bold;
	--font-size: 16px;

	--text-color: #444;
	--text-color-error: red;
	--text-color-success: #00cf3f;
	--text-color-inactive: #c2c2c2;
	--line-spacing: 1.5;

	--brand-color-primary: #008489;
	--brand-color-secondary: #222;
	--brand-color-tertiary: #da1c5c;
	--brand-color-quaternary: var(--brand-color-primary);
	--brand-contrast-primary: #fff;
	--brand-contrast-secondary: #fff;
	--brand-contrast-tertiary: #fff;
	--brand-contrast-quaternary: #fff;

	--page-background-color: var(--brand-contrast-primary);

	--link-color: #58595b;
	--link-underline: none;
	--link-color-hover: var(--link-color);
	--link-underline-hover: underline;
	--link-color-active: var(--link-color);
	--link-underline-active: underline;

	--button-font-size: 1.125rem;
	--button-border-width: 2px;
	--button-radius: .5em;

	--button-default-color: var(--brand-color-tertiary);
	--button-default-border: var(--brand-color-tertiary);
	--button-default-background: var(--brand-contrast-tertiary);
	--button-default-color-hover: var(--brand-color-tertiary);
	--button-default-border-hover: var(--brand-color-tertiary);
	--button-default-background-hover: var(--brand-contrast-tertiary);
	--button-default-color-active: var(--brand-color-tertiary);
	--button-default-border-active: var(--brand-color-tertiary);
	--button-default-background-active: var(--brand-contrast-tertiary);

	--button-primary-color: var(--brand-contrast-primary);
	--button-primary-border: var(--brand-color-primary);
	--button-primary-background: var(--brand-color-primary);
	--button-primary-color-hover: var(--brand-contrast-primary);
	--button-primary-border-hover: var(--brand-color-primary);
	--button-primary-background-hover: var(--brand-color-primary);
	--button-primary-color-active: var(--brand-contrast-primary);
	--button-primary-border-active: var(--brand-color-primary);
	--button-primary-background-active: var(--brand-color-primary);

	--button-secondary-color: var(--brand-contrast-secondary);
	--button-secondary-border: var(--brand-color-secondary);
	--button-secondary-background: var(--brand-color-secondary);
	--button-secondary-color-hover: var(--brand-contrast-secondary);
	--button-secondary-border-hover: var(--brand-color-secondary);
	--button-secondary-background-hover: var(--brand-color-secondary);;
	--button-secondary-color-active: var(--brand-contrast-secondary);
	--button-secondary-border-active: var(--brand-color-secondary);
	--button-secondary-background-active: var(--brand-color-secondary);

	--button-link-color: var(--link-color);
	--button-link-border: transparent;
	--button-link-background: transparent;
	--button-link-color-hover: var(--link-color-hover);
	--button-link-border-hover: transparent;
	--button-link-background-hover: transparent;
	--button-link-color-active: var(--link-color-hover);
	--button-link-border-active: transparent;
	--button-link-background-active: transparent;

	--input-color: var(--text-color);
	--input-background-color: white;
	--input-border-color: var(--text-color-inactive);
	--input-border-radius: .25em;

	--dropdown-selected-color: var(--text-color);
	--dropdown-selected-background: var(--list-header-background);
	--dropdown-highlight-color: var(--brand-contrast-primary);
	--dropdown-highlight-background: var(--brand-color-primary);

	--calendar-text-color: var(--text-color);
	--calendar-background: white;

	--calendar-month-year-color: var(--calendar-text-color);
	--calendar-month-year-background: var(--calendar-background);

	--calendar-day-name-color: var(--text-color-inactive);
	--calendar-day-name-background: transparent;

	--calendar-item-color: var(--calendar-text-color);
	--calendar-item-background: var(--list-header-background);

	--calendar-item-color-hover: var(--button-primary-color-hover);
	--calendar-item-background-hover: var(--button-primary-background-hover);

	--calendar-item-selected-color: white;
	--calendar-item-selected-background: var(--link-color);

	--calendar-item-today-color: var(--calendar-item-color);
	--calendar-item-today-background: var(--calendar-item-background);

	--calendar-item-past-color: var(--calendar-text-color);
	--calendar-item-past-background: var(--calendar-background);
	--calendar-item-past-fade: 1; /** 1 for solid. 0 for transparent */

	--calendar-item-disabled-color: var(--calendar-text-color);
	--calendar-item-disabled-background: var(--calendar-background);
	--calendar-item-disabled-fade: 0.1; /** 1 for solid. 0 for transparent */

	--main-width-max: calc(830px + 2em);
	--content-width-max: calc(600px + 2em);
	--content-alignment-margin: 0 auto;

	--row-column-gap: 1em;
	--12column-base-width: 100% / 12;

	--message-error-color: var(--text-color-error);
	--message-error-background: #fedede;
	--message-success-color: var(--text-color-success);
	--message-success-background: #e8fede;

	--list-header-background: #e6e7e8;
	--list-header-color: var(--text-color);
	--list-border-color: var(--text-color-inactive);
	--list-item-color: var(--text-color);

	--process-business-heading-font-size: 1.5em;
	--process-business-heading-line-height: 1.5;

	--process-loader-large-size: 5em;
	--process-loader-large-color: var(--text-color);
	--process-loader-large-content: '\f1ce'; /** fontawesome circle with notch */
	/** "unset" for no animation. "fa-spin 2s infinite linear" for fontawesome spin animation */
	--process-loader-large-animation: fa-spin 2s infinite linear;

	--process-loader-medium-size: 2em;
	--process-loader-medium-color: var(--list-item-color);
	--process-loader-medium-content: var(--process-loader-large-content);
	/** "unset" for no animation. "fa-spin 2s infinite linear" for fontawesome spin animation */
	--process-loader-medium-animation: var(--process-loader-large-animation);

	--process-loader-small-size: 1.5em;
	--process-loader-small-color: var(--text-color);
	--process-loader-small-content: var(--process-loader-large-content);
	/** "unset" for no animation. "fa-spin 2s infinite linear" for fontawesome spin animation */
	--process-loader-small-animation: var(--process-loader-large-animation);

	/** back button, loading indicator, next button */
	--process-submit-actions-widths: 265px 1.5em auto;
	--process-submit-actions-spacing: .25em;

	--category-toggle-background: var(--list-header-background);
	--category-toggle-color: var(--text-color);

	--booking-nav-areas-row1: "label label label";
	--booking-nav-areas-row2: "prev date next";
	/** "none" to hide nav buttons. "block" to display */
	--booking-nav-button: block;
	/** "0 auto 0" if hiding nav buttons. "9.5em auto 9.5em" to display */
	--booking-nav-columns: 9.5em auto 9.5em;
	/** "0" is hiding nav buttons. "0 .5em" to space components */
	--booking-nav-spacing: 0 .5em;

	--member-width-max: 75em;
	--member-header-background: var(--page-background-color);
	--member-header-text: '';

	--member-header-logo-width: 8em;
	--member-header-logo-height: 3em;
	--member-header-logo-color: var(--text-color);
	--member-header-logo-background: transparent;
	--member-header-logo-image: url('/images/logotext.svg');
	--member-header-logo-position: -2em center;
	--member-header-logo-size: 100%;
	--member-header-logo-left: 1em;
	--member-header-logo-top: 0;

	--member-menu-width: calc(var(--member-width-max) - 2em);
	--member-menu-background: var(--page-background-color);
	--member-menu-font: var(--font-regular);
	--member-menu-color: var(--text-color);
	--member-menu-color-hover: var(--member-menu-color);
	--member-menu-indicator-active: var(--brand-color-tertiary);
	--member-menu-indicator-hover: var(--member-menu-indicator-active);

	--member-menu-dropdown-background: var(--page-background-color);
	--member-menu-dropdown-width-min: 12em;
	--member-menu-dropdown-link-color: var(--text-color);
	--member-menu-dropdown-link-background: var(--page-background-color);
	--member-menu-dropdown-link-color-hover: var(--page-background-color);
	--member-menu-dropdown-link-background-hover: var(--text-color);

	--footer-font-size: .75em;
	--footer-padding: 8em 0;
}



html
{	/** default text settings for pages */
	background-color: var(--page-background-color);
	color: var(--text-color, black);
	font-family: var(--font-regular);
	font-size: var(--font-size, 16px);
	line-height: var(--line-spacing, 1.5);
}

html,body
{	/** content right up to the browser window edges */
	margin: 0;
	padding: 0;
}

h1,h2,h3,h4,h5,h6,
div,p,i,b,em,strong,a,span,td,th,small
{	/** use the color from the containing element */
	color: inherit;
}
input,select,textarea,label,button
{	/** enforce specific colour for inputs (possible font-override) */
	color: var(--text-color);
	font-family: var(--font-regular);
}
input,select,textarea,
div,p,i,b,em,strong,a,label,span,td,th
{	/** consistent font-sizing for various elements */
	font-size: inherit;
}
h1,h2,h3,h4,h5,h6,b,strong,th,legend
{	/** standard elements to display bold */
	font-family: var(--font-bold);
	font-weight: var(--font-bold-weight);
}
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.125rem; }
small { font-size: .875rem; }
/** allow button to be large for better highlighting action */
button { font-size: var(--button-font-size); }

/** using border-box for elements we're likely to give a width to */
div,header,footer,nav,input,select,textarea,.form-control
{	/** change sizing so "width" constrained to value specified */
	box-sizing: border-box;
}

input,select,textarea
{	/** consistent border, rounded corners, and background */
	background: #fff;
	border: 1px solid var(--input-border-color);
	border-radius: var(--input-border-radius);
}

table
{	/** full-width tables with no inner spacing. breath room at the end */
	border-collapse: collapse;
	width: 100%;
	margin-bottom: .25em;
}

.table th,
.table td
{	/** pad styled tables + show border */
	padding: .5em;
	border-top: 1px solid var(--list-border-color);
}

th
{	/** ignore default center alignment */
	text-align: left;
}

/** --- link styles ====== ====== */
a
{
	color: var(--link-color);
	text-decoration: var(--link-underline);
}
/**
a:hover,
a:focus
{
	color: var(--link-color-hover);
	text-decoration: var(--link-underline-hover);
}
*/
/** --- text-alignment helpers ====== ====== */
.text-center
{
	text-align: center
}

.text-right
{
	text-align: right
}

.text-left
{
	text-align: left;
}

hr
{	/** thinner dividing line */
	color: var(--input-border-color);
	border: 0;
	border-bottom: 1px solid var(--input-border-color)
}

.sr-only
{	/** for hidden elements to provide screen-reader descriptions */
	display: none
}
.hidden
{
	display: none !important;
}

.invisible
{	/** for "invisible" elements (still consumes rendered height / width) */
	visibility: hidden;
}

.clearfix:after
{	/** for cases content should not sit either side of element */
	content: " ";
	visibility: hidden;
	display: block;
	height: 0;
	clear: both
}


/** --- collapse styles (as from bootstrap) ====== ====== */
.collapse
{	/** hide content by default */
	display: none;
}

.collapse.in
{	/** as per bootstrap, hide content when "in" not applied */
	display: block;
}


/** --- column layout handling (as from bootstrap) ====== ====== */
.row
{	/** expand row as contained columns will have padding */
	margin-left: calc(0em - var(--row-column-gap));
	margin-right: calc(0em - var(--row-column-gap));
}

.row:after
{	/** clear fix as columns will be floating within row */
	content: '';
	clear: both;
	display: block;
}

.row [class*="col-sm"],
.row [class*="col-xs"]
{	/** consistent side padding for column */
	padding: 0 var(--row-column-gap);
}

@media only screen
	and (min-width: calc(481px + 2em))
{
	.row [class*="col-xs"]
	{	/** for xtra-small, on larger sizes apply column width */
		float: left;
		box-sizing: border-box;
	}

	.col-xs-1  { width: calc( var(--12column-base-width) * 1); }
	.col-xs-2  { width: calc( var(--12column-base-width) * 2); }
	.col-xs-3  { width: calc( var(--12column-base-width) * 3); }
	.col-xs-4  { width: calc( var(--12column-base-width) * 4); }
	.col-xs-5  { width: calc( var(--12column-base-width) * 5); }
	.col-xs-6  { width: calc( var(--12column-base-width) * 6); }
	.col-xs-7  { width: calc( var(--12column-base-width) * 7); }
	.col-xs-8  { width: calc( var(--12column-base-width) * 8); }
	.col-xs-9  { width: calc( var(--12column-base-width) * 9); }
	.col-xs-10 { width: calc( var(--12column-base-width) * 10); }
	.col-xs-11 { width: calc( var(--12column-base-width) * 11); }
	.col-xs-12 { width: calc( var(--12column-base-width) * 12); }
}

@media only screen
	and (min-width: calc(851px + 2em))
{
	.row [class*="col-sm"]
	{	/** for small, on larger sizes apply column width */
		float: left;
		box-sizing: border-box;
	}

	.col-sm-1  { width: calc( var(--12column-base-width) * 1); }
	.col-sm-2  { width: calc( var(--12column-base-width) * 2); }
	.col-sm-3  { width: calc( var(--12column-base-width) * 3); }
	.col-sm-4  { width: calc( var(--12column-base-width) * 4); }
	.col-sm-5  { width: calc( var(--12column-base-width) * 5); }
	.col-sm-6  { width: calc( var(--12column-base-width) * 6); }
	.col-sm-7  { width: calc( var(--12column-base-width) * 7); }
	.col-sm-8  { width: calc( var(--12column-base-width) * 8); }
	.col-sm-9  { width: calc( var(--12column-base-width) * 9); }
	.col-sm-10 { width: calc( var(--12column-base-width) * 10); }
	.col-sm-11 { width: calc( var(--12column-base-width) * 11); }
	.col-sm-12 { width: calc( var(--12column-base-width) * 12); }
}


/** --- panel (as from bootstrap) ====== ====== */
.panel
{	/** external spacing */
	margin-top: 2em;
	margin-bottom: 1em;
	background-color: transparent;
	border: 1px solid var(--input-border-color);
	border-radius: .25em;
}

.panel-body,
.panel-footer,
.panel .list-group-item
{	/** internal element spacing */
	padding: 1em;
}

.panel-heading
{	/** panel heading font heading */
	font-family: var(--font-bold);
	font-weight: var(--font-bold-weight);
	font-size: 1.125em;
	padding: .25em .5em;
}

.panel-heading + .panel-body,
.panel-heading + .list-group,
.panel-body + .panel-footer,
.list-group + .panel-footer,
.panel .list-group-item + .list-group-item
{	/** border separating panel (+ list-group) sections */
	border-top: 1px solid var(--list-border-color);
}

.panel-body fieldset
{
	margin-bottom: 1em;
}

.panel-body legend
{	/** for bordered wrapping, reduce legend margin */
	margin-top: 0;
}


/** --- modal (as from bootstrap) ====== ====== */
.modal
{	/** container positioning */
	display: none;
	overflow: hidden;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	outline: 0;
}

.modal .preload
{	/** modal content before it's loaded in */
	text-align: center;
}

.modal-open
{	/** prevent scrolling main content on open modal */
	overflow: hidden;
}

.modal-open .modal
{	/** scroll main modal if longer thanmain content */
	overflow-x: hidden;
	overflow-y: auto;
}

.modal-dialog
{	/** dialog box to show in modal */
	position: relative;
	margin: .75em auto;
	max-width: var(--content-width-max);
}

.modal-sm
{	/** slim modal */
	max-width: 20em;
}

.modal .modal-content
{	/** main wrapper for modal sections */
	position: relative;
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
	background-clip: padding-box;
	outline: 0;
}

.modal-backdrop
{	/** modal background covering main content */
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	background-color: #000000;
}

.modal-backdrop.in
{	/** transparent when modal open */
	opacity: 0.5;
}

.modal-header,
.modal-body,
.modal-footer
{	/** padding for internal modal sections */
	padding: 1em;
}

.modal-header h2,
.modal-header h3
{	/**  */
	margin: .125em 0;
}

.modal-lg
{	/** width for larger modal */
	max-width: var(--main-width-max);
}


/** --- dropdown menu (as from bootstrap ====== ====== */
.dropdown
{
	position: relative;
}

.dropdown-menu
{	/** dropdown menu positioning (hidden by default */
	position: absolute;
	z-index: 1000;
	top: -1.5em;
	display: none;
	min-width: var(--member-menu-dropdown-width-min);
	padding: .5em 0;
	list-style: none;
	background-color: var(--member-menu-dropdown-background);
	border: 1px solid var(--list-border-color);
	border-radius: var(--input-border-radius);
	box-shadow: 0 .25em .75em rgba(0, 0, 0, 0.175);
}

.dropdown-menu-right
{	/** extra menu positioning */
	right: 1em;
}

.open > .dropdown-menu
{	/** open menu */
	display: block;
}

.dropdown-menu a
{	/** dropdown menu items */
	display: block;
	padding: .5em 1em;
	color: var(--member-menu-dropdown-link-color);
	text-decoration: none;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus
{
	color: var(--member-menu-dropdown-link-color-hover);
	background-color: var(--member-menu-dropdown-link-background-hover);
	text-decoration: none;
}


/** --- button styles ====== ====== */
/*button,*/
.btn
{	/** inherit from bootstrap styles */
	display: inline-block;
	text-align: center;
	padding: .6385em 2em;
	border: var(--button-border-width) solid transparent;
	text-decoration: none;
	border-radius: var(--button-radius);
	font-size: 1.125em;
	cursor: pointer;
	line-height: 1;
	position: relative;
}

.btn:hover,
.btn:active,
.btn:focus
{	/** where btn style used on link tag */
	text-decoration: none;
}

.btn-group-justified .btn
{	/** full width for justified buttons */
	display: block;
	box-sizing: border-box;
	margin-bottom: .75em;
	width: 100%;
}

/** default styling for buttons */
/*button,*/
.btn-default,
.btn-danger
{
	color: var(--button-default-color);
	border-color: var(--button-default-border);
	background: var(--button-default-background);
}
/** styling for primary action buttons */
.btn-primary,
.btn-success
{
	color: var(--button-primary-color);
	border-color: var(--button-primary-border);
	background-color: var(--button-primary-background);
}
/** styling for primary redirect buttons */
.btn-secondary
{	/** styling for primary redirect buttons */
	color: var(--button-secondary-color);
	border-color: var(--button-secondary-border);
	background-color: var(--button-secondary-background);
	padding-left: 1em;
	padding-right: 1em;
}
/** styling for button that look like links */
.btn-link
{	/** styling for button that look like links */
	color: var(--button-link-color);
	border-color: var(--button-link-border);
	background-color: var(--button-link-background);
	padding-left: 0;
	padding-right: 0;
	font-size: 1em;
}


button[disabled],
.btn[disabled]
{	/** styling for disabled button */
	cursor: not-allowed;
	opacity: 0.65;
}


/** --- form related styles ====== ====== */
fieldset
{	/** drop border and padding for container */
	border: 0;
	padding: 0;
}

legend
{	/** field group heading */
	margin-top: 2em;
	font-size: 1.25em;
}

.form-group
{
	margin-bottom: 1em;
}

.form-horizontal .form-group
{	/** behave like row when in horizontal layout */
	margin-left: -1em;
	margin-right: -1em;
}

.form-horizontal .form-group:after
{	/** clearfix for floated columns in group */
	content: '';
	clear: both;
	display: block;
}

.form-horizontal .form-group [class*="col-sm"],
.form-horizontal .form-group [class*="col-xs"]
{	/** consistent side padding for column */
	padding: 0 var(--row-column-gap);
}

.control-label
{	/** label when side-by-side with input */
	display: inline-block;
	max-width: 100%;
}

.form-group .control-label
{
	padding-top: .675em;
	margin-bottom: .5em;
}

.form-horizontal .control-label
{	/** extra height to align with input field */
	padding-top: .675em;
}

.form-horizontal [class*="col-sm"]
{
	width: 100%;
}

.form-horizontal td
{	/** alignment when field in table */
	vertical-align: top;
}

.form-row label
{	/** ensure label on it's own line with some spacing */
	margin: 1.5em 0 .5em;
	display: block;
}

.form-control
{	/** default styling for form elements borrowed from bootstrap */
	color: var(--input-color);
	background-color: var(--input-background-color);
	border: 1px solid var(--input-border-color);
	border-radius: var(--input-border-radius);
	padding: .75em;
	width: 100%;
	margin-bottom: .75em;
}

.form-control[disabled]
{
	opacity: 0.5;
}

.form-control:focus-visible
{	/** highlight current / focused form field */
	outline: 2px solid var(--brand-color-primary)
}

.form-row canvas
{	/** give canvas a border radius as well */
	border-radius: var(--input-border-radius);
	margin-bottom: .75em;
}

.form-checkbox
{	/** left/right display of checkbox/label */
	position: relative;
	padding-left: 2.5em;
	padding-top: .25em;
	margin-top: 1.625em;
	margin-bottom: .75em;
}

.form-checkbox label
{	/** associate label for checkbox */
	margin-top: 0;
	margin-bottom: .75em;
	cursor: pointer
}

.form-checkbox input[type="checkbox"]
{	/** shifting checkbox to the left */
	width: 1.5em;
	height: 1.5em;
	position: absolute;
	top: 0;
	left: 0;
	accent-color: var(--brand-color-primary);
}

.field label
{
	display: block;
}

.form-row-checkbox label,
.form-row-radio label,
.form-radio label,
.form-row .item label,
.form-row label[for=new_member_tonotify]
{
	display: inline
}

.form-row .item label
{
	font-weight: 400
}

/** --- group of input elements (as from bootstrap) ====== ====== */
.input-group
{	/** use table layout */
	position: relative;
	display: table;
	border-collapse: separate;
	margin-bottom: .75em;
}

.input-group-addon,
.input-group-btn,
.input-group .form-control
{	/** input considered as table cell in a row */
	display: table-cell;
	vertical-align: middle;
}

.input-group-addon,
.input-group-btn
{	/** enforce minimal space usage (prefer inputs using more space */
	width: 1%;
}

.input-group-addon
{	/** group addon as breather between elements */
	padding: .5em .75em;
	font-size: var(--font-size);
	color: var(--text-color);
	background-color: #eeeeee;
	border: 1px solid var(--text-color-inactive);
	border-radius: var(--input-border-radius);
}

.input-group .form-control
{	/** drop margin to align with addon height */
	margin-bottom: 0;
}

.input-group > *,
.input-group > .input-group-btn > .btn
{	/** no curved borders for group elements */
	border-radius: 0;
	border-right-width: 0;
}

.input-group > *:first-child,
.input-group > .input-group-btn > .btn:first-child
{	/** first element to have curved borders on left side */
	border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
}

.input-group > *:last-child,
.input-group > .input-group-btn > .btn:last-child
{	/** last element to have curved borders on right side */
	border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
	border-right-width: 1px;
}

.input-group > .input-group-btn > .btn:last-child
{	/** if last element was a button,  */
	border-right-width: var(--button-border-width);
}

.required,
.validation-error-message,
.error,
.error-item,
.discount-error
{
	color: var(--text-color-error)
}

.form-row .validation-error-message
{
	margin: 1em 0 .5em;
}

.g-recaptcha
{
	margin-top: 1.625em;
	margin-bottom: .75em
}


/** --- select2 plugin style overrides ====== ====== */
select + .select2-container + select + .select2-container
{	/** gap-between side-by-side select2 instances */
	margin-left: .5em
}

span.select2-container .select2-selection--single
{	/** for consistency with form input fields */
	padding: .5933em;
	background-color: var(--input-background-color);
	border-radius: var(--input-border-radius);
	border-color: var(--input-border-color);
	height: unset;
}

span.select2-container--focus .select2-selection--single,
span.select2-container--open  .select2-selection--single
{	/** highlight current / focused form field */
	outline: 2px solid var(--brand-color-primary)
}

span.select2-container .select2-selection--single .select2-selection__rendered
{	/** ensure height same as input fields. also space for dropdown indicator */
	line-height: unset;
	white-space: normal;
	min-height: 1.5em;
	min-width: 1em;
	padding-right: 2em;
	color: var(--input-color);
}

span.select2-container .select2-selection--single .select2-selection__arrow
{	/** container for dropdown indicator */
	height: unset;
	width: 2em;
	right: 0;
	top: .75em
}

span.select2-container .select2-selection--single .select2-selection__arrow b,
span.select2-container.select2-container--open .select2-selection--single .select2-selection__arrow b
{	/** override default css dropdown indicator styles */
	margin: 0;
	border: 0;
	top: 0;
	left: 0
}

span.select2-container .select2-selection--single .select2-selection__arrow b:before
{	/** font-awesome for dropdown indicator */
	font-family: FontAwesome, sans-serif;
	content: '\f078'
}

span.select2-container.select2-container--open .select2-selection--single .select2-selection__arrow b:before
{
	content: '\f077'
}

span.select2-dropdown
{	/** dropdown part */
	color: var(--input-color);
	background-color: var(--input-background-color);
}

span.select2-container input.select2-search__field:focus-visible
{	/** same outline highlight as with input fields */
	outline: 2px solid var(--link-color)
}

span.select2-container .select2-results__option
{	/** ensure consistent default height for dropdown options */
	min-height: 1.5em;
}

span.select2-container .select2-results__option[aria-selected="true"]
{	/** option highlighting background */
	color: var(--dropdown-selected-color);
	background-color: var(--dropdown-selected-background)
}

span.select2-container .select2-results__option--highlighted[aria-selected]
{	/** option highlighting background */
	color: var(--dropdown-highlight-color);
	background-color: var(--dropdown-highlight-background)
}


/** --- pikaday calender plugin style overrides ====== ====== */
/** note: body selector needed as pikaday css loaded later */
body .pika-table th
{	/** faded column headings */
	color: var(--calendar-day-name-color);
	background-color: var(--calendar-day-name-background);
}

body .pika-single
{	/** match page  */
	color: var(--calendar-text-color);
	background-color: var(--calendar-background);
	z-index: 1;
}

body .pika-button,
.pika-single button
{	/** no border radius for calendar buttons */
	border-radius: 0;
	border-color: var(--calendar-background);
	border-width: 1px;
	background-image: none;
	position: relative;
	color: var(--calendar-item-color);
	background-color: var(--calendar-item-background);
}

.pika-title
{	/** adjusted height + breathing room */
	height: calc(2em + 3px);
	margin-bottom: .5em;
}

.pika-title,
.pika-title .pika-label,
.pika-title select
{	/** month/year dropdowns */
	color: var(--calendar-month-year-color);
	background-color: var(--calendar-month-year-background);
}

body .pika-button:hover,
.pika-title button:hover
{	/** hover to replicate primary button style */
	color: var(--calendar-item-color-hover) !important;
	background-color: var(--calendar-item-background-hover) !important;
	border-color: var(--calendar-item-background-hover);
	box-shadow: none;
}

.pika-title button:after
{	/** left / right chevrons for nav buttons */
	font-family: FontAwesome, sans-serif;
	position: absolute;
	font-size: .75em;
	top: calc(50% - .5em);
	left: calc(50% - 1em);
}

body .pika-prev:after
{
	content: '\f053';
}

body .pika-next:after
{
	content: '\f054';
}

body .is-today .pika-button
{
	color: var(--calendar-item-today-color);
	background: var(--calendar-item-today-background);
}

body .is-selected .pika-button
{	/** highlight selected with brand colour */
	color: var(--calendar-item-selected-color);
	background: var(--calendar-item-selected-background);
	box-shadow: none;
}

body .is-past .pika-button,
body .is-outside-current-month .pika-button
{	/** even more faded for past dates */
	color: var(--calendar-item-past-color);
	background: var(--calendar-item-past-background);
	opacity: var(--calendar-item-past-fade);
}

body .is-disabled .pika-button
{	/** fade out inaccessible days */
	color: var(--calendar-item-disabled-color);
	background: var(--calendar-item-disabled-background);
	opacity: var(--calendar-item-disabled-fade);
}

.ctrl-book .pika-single,
.ctrl-booking .pika-single,
.ctrl-privatebooking .pika-single,
.sub-ctrl-book .pika-single,
.sub-ctrl-booking .pika-single
{	/** try to position popup */
	left: calc(50% + .5em) !important
}

@media screen
	and (max-width: calc(600px + 2em))
{
	.ctrl-book .pika-single,
	.ctrl-booking .pika-single,
	.ctrl-privatebooking .pika-single,
	.sub-ctrl-book .pika-single,
	.sub-ctrl-booking .pika-single
	{	/** table / mobile the next/prev buttons drop. calendar field is full width */
		left: 11em !important
	}
}

#booking-calendar-inline .pika-single
{
	margin-left: 0;
}


/** --- navigation menu ====== ====== */
.navbar-default
{	/** menu */
	max-width: var(--member-menu-width);
	margin: 0 auto;
}

.navbar-header
{	/** menu header background. to blend in with the rest of the page */
	background-color: var(--member-header-background);
	display: grid;
	grid-template-areas: "title account-menu";
	grid-template-columns: auto min-content;
	border-bottom: 1px solid var(--list-border-color);
}

.account-switch { grid-area: title; }
.account-options { grid-area: account-menu; }

.navbar-nav
{	/** menu background */
	padding: 0;
	margin: 0;
	background-color: var(--member-menu-background);
}

.navbar-nav li
{	/** horizontal menu. so inline */
	display: inline-block;
}

.navbar-nav a
{	/** actual menu item */
	display: inline-block;
	padding: .75em 0;
	margin: 0 1em;
	font-family: var(--member-menu-font);
	color: var(--member-menu-color);
	border-top: .25em solid transparent;;
	border-bottom: .25em solid transparent;
	text-decoration: none;
}

.navbar-nav a:focus,
.navbar-nav a:hover
{
	color: var(--member-menu-color-hover);
	border-bottom-color: var(--member-menu-indicator-hover);
	text-decoration: none;
}

.navbar-nav .active a
{	/** current menu item (loaded page) */
	border-bottom-color: var(--member-menu-indicator-active);
	text-decoration: none;
}

.navbar-nav  .fa
{	/** suppress menu icons */
	display: none;
}

@media only screen
	and (max-width: calc(850px + 2em))
{
	.navbar-nav > li
	{	/** full width menu items on mobile sizes */
		display: block;
	}

	.navbar-nav a
	{	/** adjusting margins / padding to underline goes full-width */
		margin: 0;
		display: block;
		padding-left: 1em;
		padding-right: 1em;
	}
}


/** --- mobile menu toggle ====== ====== */
.navbar-toggle,
.navbar-right
{	/** default hidden */
	display: none;
}

.navbar-toggle
{	/** mobile menu toggle */
	padding: 1em;
	border: 0;
}

@media only screen
	and (max-width: calc(850px + 2em))
{
	.navbar-toggle
	{	/** menu toggle as inline element */
		display: table-cell;
		vertical-align: middle;
	}

	.navbar-right
	{	/** display mobile menu items */
		display: block;
	}
}

@media only screen
	and (min-width: calc(851px + 2em))
{
	.navbar-responsive-collapse
	{	/** on larger view menu should be displayed */
		display: block !important;
		height: auto !important;
	}
}





/** --- grid styles for full height display ====== ====== */
html,body,#wrapper,#container,#content-full
{
	display: grid
}

html,body
{	/** ensure content is full page height */
	min-height: 100vh;
}

body
{
	grid-template-areas: "header" "content" "footer";
	grid-template-rows: min-content auto min-content;
}
#outer-header { grid-area: header; }
#wrapper { grid-area: content; }
#footer { grid-area: footer; }



#content-full
{	/** general grid layout of public process pages. full-width header and footers */
	grid-template-columns: auto var(--main-width-max) auto;
	grid-template-rows: auto min-content auto 1fr auto;
	grid-template-areas: "header header header"
		". messages ."
		". main ."
		". . ."
		"footer footer footer";
}

@media only screen
	and (max-width: calc(830px + 2em))
{
	#content-full
	{	/** drop side columns / space when on smaller screen */
		grid-template-columns: 0 auto 0;
	}
}
/** theme specific header / footer placement on grid */
#w_header { grid-area: header; }
#w_footer { grid-area: footer; }


#w_message_holder,
body.sub-ctrl-success #w_message_holder
{	/** hide flash message. doubly so on booking / purchase success */
	grid-area: messages;
	margin-top: 2em;
	display: none
}

.ctrl-login #w_message_holder,
.ctrl-confirm #w_message_holder,
.ctrl-purchase #w_message_holder
{	/** show flash message during other booking / purchase steps */
	display: block;
}

.ctrl-login #w_message_holder
{
	margin-top: 5em
}

/** main content section of grid layout */
#w_header + .container > .contentspan:first-child,
#w_header + div[id],
#w_header + form[id]
{
	grid-area: main;
	padding: 1em;
	max-width: var(--content-width-max);
	width: 100%;
	margin: var(--content-alignment-margin);
}

#w_header + .container > .contentspan:first-child
{	/** when content comes from cms */
	display: block
}

/** footer displayed after main content */
#footer
{
	padding: var(--footer-padding);
	font-size: var(--footer-font-size);
	text-align: center;
}


/** -- flash message styling ====== ====== */
#w_message_holder,
.section-success,
.section-error,
.top-errors,
.alert
{
	margin: 1.1875em auto 0;
	border-radius: var(--input-border-radius);
	text-align: left;
	padding: 1em;
	line-height: 1.5;
	position: relative;
}

.alert
{
	grid-area: messages;
}

#content-full > .alert
{
	width: calc(100% - 2em);
}

.section-success,
.alert-success
{
	border: 1px solid var(--message-success-color);
	background-color: var(--message-success-background);
}

.section-error,
.top-errors,
.alert-danger
{
	border: 1px solid var(--message-error-color);
	background-color: var(--message-error-background);
}

.section-success span:last-child,
.section-error span:last-child,
.alert-success span:last-child,
.alert-danger span:last-child
{	/** suppress closer indicator */
	display: none;
}

.alert .close
{
	float: right;
	background: transparent;
	border: 0;
	padding: 0;
}

.alert .close:before
{
	font-family: "FontAwesome", sans-serif;
	content: '\f00d';
}

/** --- common booking / purchase process elements ====== ====== */
.heading
{
	color: var(--brand-color-primary);
	text-align: center
}

.logo img
{	/** ensure a bit of spacing below logo img (if it exists!) */
	margin-bottom: 1em;
}


/** --- booking steps indicator ====== ====== */
.step-container
{
	max-width: var(--content-width-max);
}

.step-container .step-indicator
{	/** using flex layout */
	display: flex;
	align-items: center;
	padding: 1em 0 3em
}

.step-container .step
{	/** step indicator  */
	display: flex;
	align-items: center;
	flex-direction: column;
	position: relative;
}

.step-container .step-icon
{	/** step indicator icon */
	height: 1.75em;
	width: 1.75em;
	border-radius: 50%;
	text-align: center;
	position: relative;
	line-height: 1.5;
	border: .125em solid var(--text-color-inactive);
	color: var(--text-color-inactive)
}

.step-container p
{	/** step indicator label */
	text-align: center;
	color: var(--text-color-inactive);
	margin: 0;
	line-height: 1.125;
	position: absolute;
	top: 2.5em;
	font-weight: 700;
	width: 7em;
}

.step-container .indicator-line
{	/** line between step indicators */
	width: 100%;
	height: .125em;
	background-color: var(--text-color-inactive);
	flex: 1
}

.step-container .indicator-line:first-child,
.step-container .indicator-line:last-child
{	/** hidden indicator lines for spacing purposes */
	visibility: hidden;
	flex: .5;
}

.step-container .active .step-icon,
.step-container .done .step-icon
{	/** active or complete steps in steps indicator */
	border-color: var(--brand-color-primary);
	color: var(--brand-color-primary)
}

.step-container .active small
{	/** adjust label color for active step **/
	color: var(--text-color);
}

.step-container .active.indicator-line
{	/** adjust highlight for completed step lines */
	background-color: var(--brand-color-primary);
}

.step-container .done .step-icon
{	/** change done step highlighting */
	font-family: FontAwesome, sans-serif;
	background-color: var(--brand-color-primary);
	color: var(--brand-contrast-primary);
}

.step-container .done .step-icon span
{	/** drop text in step indicator */
	display: none
}

.step-container .done .step-icon::before
{	/** swap to icon/image in done step icon */
	content: '\f00c'
}

.step-container.free .step:nth-last-child(2),
.step-container.free .indicator-line:nth-last-child(3)
{	/** hide payment step for free or paid service */
	display: none
}


@media only screen
	and (max-width: calc(480px + 2em))
{
	.step-container p
	{	/** slimmer spacing for smaller screens */
		width: 5em;
	}
}

/** --- booking availability filter ====== ====== */
.filter
{
	max-width: var(--content-width-max);
}

.filter h4
{
	margin-bottom: .25em;
}

.filter select
{	/** not displayed, but default styling anyway */
	width: 100%;
	padding: .6875em;
	border-radius: var(--input-border-radius)
}

.filter .single select,
.filter .single select + .select2
{	/** hide selects if only 1-known option to choose from */
	display: none
}

.filter .nav
{	/** date selection + navigation */
	display: grid;
	grid-template-areas: var(--booking-nav-areas-row1) var(--booking-nav-areas-row2);
	grid-template-columns: var(--booking-nav-columns);
	margin-top: 1em;
	gap: var(--booking-nav-spacing);
}

.filter .nav h4 { grid-area: label; }
.filter .prev { grid-area: prev; }
.filter .date { grid-area: date; }
.filter .next { grid-area: next; }

.filter .prev,
.filter .next
{
	text-align: center;
}

@media screen
	and (max-width: calc(600px + 2em))
{
	.filter .nav
	{	/** on smaller screen drop prev/next buttons */
		grid-template-areas: "label" "date";
		grid-template-columns: auto;
	}
}

.filter .prev :before,
.filter .next :after
{	/** left/right chevrons on nav buttons */
	font-family: FontAwesome, sans-serif;
	position: absolute;
}

.filter .prev :before
{
	content: "\f053 \a0";
	margin-left: -1em
}

.filter .next :after
{
	content: "\a0 \f054";
}


@media screen
	and (max-width: calc(600px + 2em))
{
	.filter .prev,
	.filter .next
	{	/** hide nav buttons on mobile screen */
		display: none
	}
}

.filter .nav .btn
{
	font-size: 1em;
	display: var(--booking-nav-button);
}

.filter .date
{
	position: relative
}

.filter .date:before
{	/** calendar icon in date picker field */
	font-family: FontAwesome, sans-serif;
	position: absolute;
	top: calc(50% - 1.125em);
	left: .75em;
	content: '\f073';
	color: var(--input-color);
}

.filter .date input
{	/** extra padding for icon */
	padding-left: 2em;
	cursor: pointer
}


/** --- description display ====== ====== */
.filter [class*="-descr"] > div
{	/** default hide service / resource descriptions */
	display: none;
	padding: .5em
}

.filter .full-descr > div
{	/** display service / resource descriptions */
	display: block;
	padding: 0
}

.snip-descr ~ .full-descr,
.show-full
{	/** hide full description when trimmed */
	display: none
}

.show-full ~ .full-descr
{
	display: block
}


/** --- process action buttons ====== ====== */
.form-button-row
{	/** process action buttons layout */
	display: grid;
	grid-template-areas: "prev loading next" "link1 link1 link1" "link2 link2 link2";
	grid-template-columns: var(--process-submit-actions-widths);
	gap: var(--process-submit-actions-spacing);
	margin: 1.625em 0 .75em;
}

.panel-footer .form-button-row
{
	margin: 0;
}

@media screen
	and (max-width: calc(600px + 2em))
{
	.form-button-row
	{	/** tweaked positioning for mobile */
		display: grid;
		grid-template-areas: "next" "prev" "loading" "link1" "link2";
		grid-template-columns: 100%;
	}
}

.form-button-row > span
{	/** allows for full width buttons */
	display: block;
}

.form-button-row > .back,
.form-button-row > .return,
.form-button-row > .btn-danger
{
	grid-area: prev;
}

.form-button-row > .back + span,
.form-button-row > .return + span,
.form-button-row > .next,
.form-button-row > .continue,
.form-button-row > .btn-success
{
	grid-area: next;
}

.form-button-row > .next ~ span
{	/** additional link in second link area */
	grid-area: link2;
	margin-top: .25em;
	margin-bottom: .25em;
}

.form-button-row > .next + span
{	/** additional link in first link area */
	grid-area: link1;
}

.form-button-row > .next ~ .loading,
.form-button-row > .spinner
{
	grid-area: loading;
}

.form-button-row .btn
{	/** full width buttons */
	display: block;
	margin-bottom: .75em;
}

.form-button-row .back button,
.form-button-row .continue button
{
	width: 100%;
}


/** --- booking availability list ====== ====== */
.list
{
	margin-top: 2em
}

.list td,
.list th
{
	text-align: left;
	padding: .4em;
}

.list th
{
	background-color: var(--list-header-background);
	color: var(--list-header-color);
	min-height: 1.5em;
}

.list tr.day th
{
	background-color: transparent;
	text-align: left;
	padding: 1em 0;
}

.list tbody tr
{
	border-bottom: 1px solid var(--list-border-color);
}

.list td
{
	padding: 1.25em .4em;
	color: var(--list-item-color);
}

.list tbody tr.day,
.list tbody tr.day + tr
{	/** suppress border for certain display rows */
	border-bottom-width: 0;
}

.list tbody:not(.event-type-term) tr[class] td:nth-child(2),
.list tbody:not(.event-type-term) tr[data-stamp] td:nth-child(2)
{	/** service name to consume majority of space */
	width: 100%
}

.list .book .btn
{	/** action button */
	width: 7.5em;
	padding-left: 1em;
	padding-right: 1em;
	white-space: nowrap;
}


/** --- item heading in details during booking / purchase process ====== ====== */
.details h2
{
	font-size: var(--process-business-heading-font-size);
	line-height: var(--process-business-heading-line-height)
}

/** --- header with radial options ====== ====== */
.header-radial
{
	border: 1px solid var(--input-border-color);
	border-radius: .5em;
	padding: .5833em
}

.header-radial input[type="radio"]
{
	width: 1rem;
	height: 1rem;
}

.header-radial + * .header-radial
{	/** indent sub-option */
	margin-left: 1em;
}


/** --- promo code entry ====== ====== */
.discount-error td
{
	padding: 0
}

.discount-inputs label
{
	margin-right: .5em;
}

.discount-input-fields
{
	display: inline-block
}

.discount-input-fields input,
.discount-input-fields .btn
{
	width: auto;
}


/** --- tweak action buttons for process end step pages ====== ====== */
.finished .form-button-row
{	/** adjusted layout for process end pages */
	grid-template-areas: "next" "." "prev";
	grid-template-columns: auto;
	grid-template-rows: auto 1.5em auto;
}

.finished .btn-secondary
{	/** ensure button width */
	max-width: 12.5em;
}

.finished .btn-link
{
	display: inline-block;
}

/** --- tweak action buttons for forgot password page ====== ====== */
.forgot-password .form-button-row
{
	margin-top: .25em;
	grid-template-areas: "next" "prev" "link1" "link2";
	grid-template-columns: auto;
}


/** --- activity /loading indicators ====== ====== */
.loader
{	/** loading indicator wrapper default hidden (but still take up required space) */
	margin-top: 1em;
	margin-bottom: 1em;
	text-align: center;
}

.loader i
{	/** placeholder for loading indicator */
	display: inline-block;
	font-family: FontAwesome, sans-serif;
	font-style: normal;
	font-size: var(--process-loader-large-size);
	animation: var(--process-loader-large-animation);
}

.loader i:before
{
	content: var(--process-loader-large-content);
	color: var(--process-loader-large-color);
}

.list .selected .btn
{	/** action button in list */
	font-family: FontAwesome, sans-serif;
	background-color: transparent;
}

.list .selected .btn:before
{
	color: var(--process-loader-medium-color);
	content: var(--process-loader-medium-content);
	animation: var(--process-loader-medium-animation);
	font-size: var(--process-loader-medium-size);
	position: absolute;
	left: calc(50% - .5em);
	top: 50%;
	margin-top: -.5em;
}

span.loading
{
	font-family: FontAwesome, sans-serif;
	margin-left: auto;
	margin-right: auto;
	width: min-content;
	display: block;
}

span.loading:before
{
	display: block;
	color: var(--process-loader-small-color);
	content: var(--process-loader-small-content);
	animation: var(--process-loader-small-animation);
	font-size: var(--process-loader-small-size);
	margin-bottom: .75em;
}

.submitted span.loading.invisible
{
	visibility: visible;
}

span.loading img,
span.loading .fa-circle-o-notch
{	/** suppress old loading animation */
	display: none;
}


/** --- extra spacing before user signup field ====== ====== */
.user .create
{
	margin-top: 1.5em
}


/** --- highlight location note on booking page ====== ====== */
.loc-descr
{
	color: var(--text-color-error)
}





/** --- mini-website overrides ====== ====== */
#w_header + #info
{	/** full content width */
	max-width: var(--main-width-max);
}

#info
{	/** 3:2 layout */
	display: grid;
	grid-template-areas: "header header header" "logo logo logo" "message message message" "gallery gallery gallery" "left . right";
	grid-template-columns: calc(60% - 1em) 2em calc(40% - 1em);
	grid-template-rows: min-content min-content min-content min-content min-content;
}

@media only screen
	and (max-width: calc(600px + 2em))
{
	#info
	{	/** tweak to single column layout on mobile */
		grid-template-areas: "header" "logo" "message" "gallery" "left" "right";
		grid-template-columns: auto;
		grid-template-rows: min-content min-content min-content min-content min-content min-content;
	}
}

#info .heading { grid-area: header }
#info .logo { grid-area: logo }
#info .message { grid-area: message }
#info .gallery { grid-area: gallery }
#info .left { grid-area: left }
#info .right { grid-area: right }
#info .full { grid-area: left / left / right / right }

#info .gallery
{	/** center align gallery images with some spacing */
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: 1em;
}

.entry .form-button-row
{	/** full width for contact form submit button. ignore other columns */
	grid-template-areas: "next";
	grid-template-columns: 100%;
}

.right h3 ~ *
{	/** for right section, everything after the heading should be indented */
	margin-left: 1em
}

/** --- category display of services / products ====== ====== */
.list tr.category
{	/** suppress border for certain display rows */
	border-bottom-width: 0;
}

.category-title-toggle
{
	position: relative;
	cursor: pointer;
	background-color: var(--category-toggle-background);
	color: var(--category-toggle-color);
	padding: .25em .5em;
	z-index: -1;
}

.category-title-toggle::after
{	/** chevron icon for toggle */
	font-family: FontAwesome, sans-serif;
	content: "\f078";
	position: absolute;
	right: .5em;
	top: calc(50% - .75em);
}

.open .category-title-toggle::after
{
	content: "\f077"
}

.category-descr
{	/** indent service / product description */
	padding-left: 1em;
}

.category .item
{
	margin-top: .5em;
	margin-left: 1em;
	border-top: 1px solid var(--list-border-color);
	padding: 1em 0 .5em;
}

.category .item-col-cost
{
	padding: 0 1em;
	text-align: right
}

.category .item-col-link
{
	width: 25%;
}

.category .item-booking-link
{	/** keep text on 1 line. smaller font */
	white-space: nowrap;
	font-size: 1em;
}

.category p.item-cost
{	/** product price. remove element margins */
	margin: 0
}

.category-link
{	/** deprecate? use heading toggle instead */
	display: none;
}


/** contact address. mimic over-arching font style */
.contact-info address
{
	font-style: inherit;
}

/** social icons on mini-website */
.social-icon
{
	display: inline-block;
	background: transparent left center no-repeat;
	height: 2em;
	width: 2em;
	margin-left: .75em;
}

.social-icon:first-child
{
	margin-left: 0;
}

.social-icon-fb { background-image: url(/images/social-icon-fb.jpg) }
.social-icon-x { background-image: url(/images/social-icon-x.jpg) }
.social-icon-twitter { background-image: url(/images/social-icon-twitter.jpg) }
.social-icon-insta { background-image: url(/images/social-icon-insta.jpg) }
.social-icon-googleplus { background-image: url(/images/social-icon-google-plus.jpg) }


/** --- booking / purchase options step table ====== ====== */
.options th,
.options td
{
	padding: .375em 0
}

.options th:first-child
{	/** item name column to use maximum space / width */
	width: 100%;
}

.options td:nth-child(2)
{	/** align prices to the right */
	text-align: right;
}

.options .form-row-select
{	/** spacing between cost and qty columns */
	margin-left: 1em;
}

.options .exclusive td:last-child
{	/** center radio button for exclusive option selection */
	text-align: center;
}

.options tfoot td
{	/** options total row in bold */
	font-weight: bold;
}

.options tfoot td:nth-child(3)
{	/** hide additional exclusive option column in footer */
	visibility: hidden;
}


/** --- payment step ====== ====== */
.header-radial img
{	/** reduce margin on cc images to fit inside selector */
	margin: -.5em 0
}

.header-radial table
{	/** reduce margin on cc images container to fit inside selector */
	margin-bottom:  0;
}

.pay h3 + div
{	/** indent sub-option content */
	margin-left: 1em
}

.pay-opt.active .pay
{	/** active/selected option to be displayed */
	display: block;
}


/** --- on-page credit card related styles ====== ====== */
#cc_creditcard
{
	width: 20em;
}

#cc_cvv
{
	width: 5em
}


/** --- end of booking / purchase process pages ====== ====== */
.finished .continue .btn:after
{	/** right chevron for continue link */
	font-family: FontAwesome, sans-serif;
	position: absolute;
	content: '\a0 \f054';
}


/** --- login / forgot password style ====== ====== */
.login-content,
#content-full #forgot-password
{
	max-width: min(27em, calc(100% - 2em));
	margin: 5em auto 2em;
	border: 1px solid var(--text-color-inactive);
	border-radius: .5em;
	padding: 2em
}

#content-full #client-login
{
	max-width: 100%;
}

#content-full #forgot-password
{
	margin-top: 6em;
	max-width: min(27em, calc(100% - 4em));
}

.login-content h1,
#forgot-password h2,
#forgot-password .logo
{	/** center align various elements */
	text-align: center
}

.login-content .section-error
{
	color: red
}

.login-content label,
#forgot-password label
{	/** hide field labels */
	display: none
}

#btn-client-login
{
	width: 100%;
}


/** --- non-whitelabel login page ====== ====== */
#row-submit
{
	margin-top: .5em
}

#row-forgot
{
	margin-top: 2em;
	display: grid;
	grid-template-areas: "forgot help";
	grid-template-columns: 50% 50%;
}

#row-forgot p:first-child { grid-area: forgot; }
#row-forgot p:last-child { grid-area: help; }

#row-forgot p
{
	text-align: center;
}

@media screen
	and (max-width: calc(480px + 2em))
{
	#row-forgot
	{
		grid-template-areas: "forgot" "help";
		grid-template-columns: auto;
	}

	#row-forgot p
	{
		margin: .25em 0;
		text-align: left;
	}
}


/** --- forgot password additional content ====== ====== */
#forgot-password .contentspan small
{	/** suppress spam check message from cms content */
	display: none
}

.forgot-password .form-button-row:after
{	/** show spam check message after submit button */
	content: "If you do not receive your email within a few minutes check your junk mail (Outlook), bulk mail (Yahoo) or spam (Gmail) folders.";
	font-size: .85em
}


/** --- purchase process ====== ==== */
#content-full #purchase
{	/** purchase page content wider than normal */
	max-width: var(--main-width-max);
}

.purchase-list th,
.purchase-list td
{
	padding: 1.125em .8em;
	vertical-align: top;
	line-height: 1.2;
}

.purchase-list colgroup > :first-child,
.purchase-list tr > :first-child
{	/** hide product thumbnail holder */
	display: none
}

.purchase-list .item-name,
.purchase-list .product-price
{	/** emphasise product name and price over other details */
	font-size: 1.125em;
	font-weight: bold;
	margin-bottom: .4445em
}

@media only screen
	and (max-width: calc(830px + 2em))
{
	.purchase-list tr
	{	/** re-arrange layout for less than desktop (above tablet) view */
		display: grid;
		grid-template-areas: "descr price" "descr action";
		grid-template-columns: 1fr auto;
		grid-template-rows: 1fr min-content min-content;
	}

	/** hide headers except for description in smaller views */
	.purchase-list th { display: none; }
	.purchase-list tr > :nth-child(2)
	{
		display: table-cell;
		grid-area: descr;
	}

	.purchase-list tr > :nth-child(3) { grid-area: price; }
	.purchase-list tr > :nth-child(4) { grid-area: action; }
}

@media only screen
	and (max-width: calc(600px + 2em))
{
	.purchase-list tr
	{	/** re-arrange layout for less than tablet (above mobile) view */
		grid-template-areas: "descr descr descr" "price space action";
		grid-template-columns: auto 1fr auto;
		border-bottom: 1px solid var(--list-border-color);
	}
}

@media only screen
	and (max-width: calc(360px + 2em))
{
	.purchase-list tr
	{	/** re-arrange layout for mobile view */
		grid-template-areas: "descr" "price" "action";
		grid-template-columns: auto;
	}

	.purchase-list .book .btn
	{	/** full width button when in mobile view */
		width: auto;
		display: block;
	}
}


/** --- full provider description toggle ====== ====== */
.readmore .toggle
{	/** reduce padding on button element used */
	padding: 0;
}
.readmore summary .toggle:before { content: 'More'; }
.readmore summary ~ .toggle:before { content: 'Less'; }

.readmore summary
{	/** inline summary to drop state indicator */
	display: inline;
}

.readmore[open] summary
{	/** hide summary when open */
	display: none;
}

.readmore summary:before
{
	display: none;
}


/** --- booking location entry ====== ====== */
.address-types
{
	margin: 2em 0;
}

.address-type label
{
	margin: 0;
}

.address-input
{	/** padding around address details */
	margin: .75em 0
}

.address-input .lbl
{	/** label to the left of addrss items */
	display: inline-block;
	width: 6em;
}

.address-input .form-control
{	/** size field accounting for label */
	width: calc(100% - 6em)
}

@media screen
	and (max-width: calc(480px + 2em))
{
	.address-input .form-control
	{	/** full width field on mobile devices */
		width: 100%
	}
}


/** --- booking / purchase success message ====== ====== */
.finished .section-success
{	/** extra spacing for tick icon */
	padding-left: 4em;
}

.finished .section-success:before
{	/** tick icon */
	font-family: FontAwesome, sans-serif;
	top: .1em;
	left: .5em;
	font-size: 2.5em;
	content: '\f05d';
	color: var(--message-success-color);
	position: absolute;
}


/** --- purchase success item details ====== ====== */
.purchased .item-name
{	/** spacing around item name */
	margin-top: 3em;
	font-weight: bold;
	font-size: 1.125em
}

.purchased .item-extra-voucher strong
{	/** voucher on it's own line */
	display: block;
	margin-top: .25em
}


/** --- event page related styles ====== ====== */
.filter ~ div .logo
{	/** hide logo pulled in from pulled in event details */
	display: none;
}

.step button
{	/** position module back button */
	margin-bottom: .5em;
}

.step .select2-container
{
	width: 100% !important;
}

.event-term-date-times td
{
	display: inline-block;
}

.booked-event .return
{	/** suppress re-book link for events */
	display: none
}



@media only screen
	and (max-width: calc(600px + 2em))
{
	.booking-list tr[class],
	.booking-list tr[data-stamp]
	{	/** re-arrange layout for less than table view (above mobile) */
		display: grid;
		grid-template-areas: "service service service" "time available action";
		grid-template-columns: 1fr 1fr min-content;
		grid-template-rows: 1fr min-content;
	}

	/** hide headers except for description in smaller views */
	.booking-list th { display: none; }
	.booking-list tr.day th { display: table-cell; }
	.booking-list tr > :nth-child(2)
	{
		display: table-cell;
		grid-area: service;
	}

	.booking-list td:nth-child(1) { grid-area: time; }
	.booking-list td:nth-child(3) { grid-area: available; }
	.booking-list td:last-child { grid-area: action; }
	/** :last-child to override when showing price/available is optional. */
}

@media only screen
and (max-width: calc(360px + 2em))
{
	.booking-list tr[class],
	.booking-list tr[data-stamp]
	{	/** re-arrange layout for less than mobile view */
		display: grid;
		grid-template-areas: "service service" "time available" "action action";
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr min-content min-content;
	}

	.booking-list .book .btn
	{	/** full width button when in mobile view */
		width: auto;
		display: block;
	}
}


/** --- member area styles ====== ====== */
.title-toggle div
{	/** remove block level elements */
	display: none;
}

.title-toggle span
{	/** spacing around title */
	display: inline-block;
	position: relative;
	padding: 1em;
	padding-left: 3.5em;
}

.title-toggle span:before
{	/** suppress other elements */
	content: '';
	position: absolute;
	left: var(--member-header-logo-left);
	top: var(--member-header-logo-top);
	display: block;
	width: var(--member-header-logo-width);
	height: var(--member-header-logo-height);
	color: var(--member-header-logo-color);
	background-color: var(--member-header-logo-background);
	background-image: var(--member-header-logo-image);
	background-position: var(--member-header-logo-position);
	background-size: var(--member-header-logo-size);
	background-repeat: no-repeat;
}

.title-toggle span::after
{	/** title text */
	content: var(--member-header-text);
}

.account-menu
{	/** top-right use specific options */
	display: table;
	white-space: nowrap;
	padding: 1em .5em;
}

@media only screen
	and (max-width: calc(850px + 2em))
{
	.account-menu
	{	/** reduce size on mobile view */
		padding: 0;
	}
}

.account-menu .dropdown-toggle
{	/** slimmer button for dropdown toggle */
	display: table-cell;
	vertical-align: middle;
	padding: 0;
	margin: 0 .5em;
}

@media only screen
	and (max-width: calc(850px + 2em))
{
	.account-menu .dropdown-toggle
	{	/** suppress dropdown toggle in mobile view (items in navbar) */
		display: none;
	}
}

.account-menu .caret:after
{	/** vertical chevron. for consistency */
	font-family: 'FontAwesome', sans-serif;
	content: '\f078';
}

.account-menu [aria-expanded="true"] .caret:after
{	/** account menu open state icon */
	content: '\f077';
}

.jump-home
{
	display: table-cell;
	vertical-align: middle;
	text-decoration: none;
}

.jump-home::before
{	/** user icon next to account name */
	font-family: 'FontAwesome', sans-serif;
	content: '\f2c0';
	margin-right: .5em;
	margin-left: .2em;
}

@media only screen
	and (max-width: calc(600px + 2em))
{
	.jump-home
	{	/** hide account name in mobile view */
		display: none;
	}
}



.ctrl-member #content-full
{	/** expand content out to member width */
	grid-template-columns: auto calc(var(--member-width-max) - 2em) auto;
}

@media screen
	and (max-width: calc(75em - 2em))
{
	.ctrl-member #content-full
	{	/** drop side margins from content */
		grid-template-columns: 0 auto 0;
	}
}

.member-container
{
	grid-area: main;
	padding: 0 1em;
}


/** --- toggle-able panes ====== ====== */
.member-pane summary
{	/** pane header */
	display: block;
	position: relative;
	background-color: var(--list-header-background);
	margin-top: 2em;
}

.member-pane summary::before
{	/** pane open / close indicator */
	font-family: 'FontAwesome', sans-serif;
	content: '\f077';
	position: absolute;
	right: 1em;
	top: 50%;
	margin-top: -.75em;
}

.member-pane[open] summary::before
{	/** alt icon for open state */
	content: '\f078';
}

.member-pane summary h4
{	/** pane heading */
	font-size: 1.375em;
	margin: 1em 0 .25em;
	padding: .25em .75em;
}


/** --- member pane lists ====== ====== */
.member-pane .list-group
{	/** ensure some breathing room after pane list items */
	margin-bottom:  1em;
}

.member-pane .list-group-item
{	/** border around items (not bunched up together) */
	margin: 1em 0;
	padding: 1em;
	border: 1px solid var(--list-border-color);
	border-radius: var(--input-border-radius);
}


/** --- providers list ====== ====== */
.providers .list-group-item > div
{	/** custom layout for provider details */
	display: grid;
	grid-template-columns: auto 1em 13.125em;
	grid-template-rows: auto auto auto;
	grid-template-areas: "main . ." "main . button" "main . .";
}

@media screen
	and (max-width: calc(600px + 2em))
{
	.providers .list-group-item > div
	{	/** revert to normal display */
		display: block;
	}
}

.providers .form-control-static
{	/** provider list name / location position */
	grid-area: main;
	padding: .5em 0;
}

.providers .btn-primary
{	/** provider list button position */
	grid-area: button;
}


/** --- upcoming bookings ====== ====== */
.member-booking-details p
{	/** upcoming booking text spacing */
	margin-top: 0;
}


/** --- cancel booking ====== ====== */
.member-container-cancel-booking .panel-footer
{	/** cancellation note alignment */
	text-align: left;
	border-top: 0;
}

@media screen
and (max-width: calc(480px + 2em))
{
	.member-container-cancel-booking th,
	.member-container-cancel-booking td
	{	/** swap from side-by-side to top/bottom */
		display: block;
	}

	.member-container-cancel-booking th
	{	/** reduce spacing */
		padding-bottom: 0;
	}

	.member-container-cancel-booking td
	{	/** reduce spacing and remove border */
		border-top-color: transparent;
		padding-top: 0;
	}
}


/** --- edit booking ====== ====== */
.member-container-modify-booking .actions-top
{	/** suppress duplicated buttons on booking edit */
	display: none;
}

.modify-booking .logo,
.modify-booking .step-container
{	/** hide logo / progress for event edit */
	display: none;
}

.modify-booking .form-horizontal
{	/** drop side-by-side display */
	float: none;
}

#steps-modify .btn .fa
{	/** suppress edit icon on buttons on event booking edit */
	display: none;
}

#steps-modify .row
{	/** specific layout for event edit (initial module display) */
	display: grid;
	grid-template-columns: 7em auto;
	grid-template-rows: min-content;
	grid-template-areas: "update info";
}

#steps-modify .step
{	/** module button positioning */
	grid-area: update;
	width: auto;
}

#steps-modify .module-info
{	/** module detail positioning */
	grid-area: info;
	width: auto;
}

#steps-modify .step .btn
{	/** slimmer button */
	padding-left: 1em;
	padding-right: 1em;
}

/** --- event booking edit general layout ====== ====== */
.modify-booking .panel
{	/** shift border to inner items */
	border: 0;
}

.modify-booking .panel-body,
.modify-booking .list-group
{	/** border on inner items */
	border: 1px solid var(--input-border-color);
	border-radius: .25em;
}

.modify-booking .panel-body + .panel-footer,
.modify-booking .list-group + .panel-footer
{	/** drop border separating panel (+ list-group) sections */
	border-top: 0;
}

.modify-booking #event > img
{	/** reduce space used by loader (do _not_ hide. used for js trigger) */
	width: 1px;
	height: 1px;
}

.modify-booking .modal-body .panel-footer
{	/** align buttons with content */
	padding-left: 0;
	padding-right: 0;
}

/** --- event booking edit side-by-side layout ====== ====== */
#confirmModifyForm td.before,
#confirmModifyForm td.after
{	/** side-by-side display */
	vertical-align: top;
	margin-bottom: .75em;
	width: 50%;
}

@media screen
	and (max-width: calc(600px + 2em))
{
	#confirmModifyForm td.before,
	#confirmModifyForm td.after
	{	/** top/bottom layout if in mobile view */
		display: block;
		width: 100%;
	}
}

@media screen
	and (min-width: calc(601px + 2em))
{
	#confirmModifyForm td.before
	{
		padding-right: .5em;
	}

	#confirmModifyForm td.after
	{
		padding-left: .5em;
	}
}

#confirmModifyForm .table-condensed td
{	/** drop padding for module details */
	padding-left: 0;
	padding-right: 0;
}


/** --- auto-logout popup ====== ====== */
#auto-logout
{
	text-align: left;
	font-size: var(--font-size);
}

#auto-logout .modal-body
{
	padding-bottom: 0;
}

#auto-logout .modal-footer
{
	padding-top: 0;
}

#auto-logout label
{
	margin-top: 0;
}