.flex-fill {
    flex: 1 1 auto;
}

/******************************/
/*     01. Global Settings    */
/******************************/

:root {
    --brand-colour: #18c7af;

	--nav-colour-primary-background: var(--brand-colour);
	--nav-colour-primary-background-highlight: #139f8c;
	--nav-colour-primary-font: var(--white);
	--nav-colour-primary-font-highlight: var(--white);

	--nav-colour-secondary-background: var(--white);
	--nav-colour-secondary-background-highlight: #e3e7ec;
	--nav-colour-secondary-font: var(--font-colour-secondary);
	--nav-colour-secondary-font-highlight: var(--brand-colour);

	--list-item-colour: var(--font-colour-secondary);
	--list-item-colour-selected-background: var(--brand-colour);
	--list-item-colour-selected-border: var(--brand-colour);
	--list-item-colour-selected-font: var(--white);

    --background-colour: #e6ecf2;
	--background-colour-secondary: #f3f7fd;
	--background-colour-dark: #090909;

	--font-colour-primary: #333333;
	--font-colour-secondary: #122841;
	--font-colour-muted: #a8aaaf;

	--table-colour-header-background: #f4f7fa;
	--table-colour-header-font: #536072;
	--table-colour-row-background: var(--white);
	--table-colour-row-font: var(--font-colour-secondary);
	--table-colour-row-alert-background: #ffa500;

	--form-input-colour-background-primary: #f4f7fa;
	--form-input-colour-background-secondary: var(--white);
	--form-input-colour-font: var(--font-colour-secondary);
	--form-input-font: 400 1.125rem/1.75rem "Open Sans", sans-serif;
	--form-input-border-radius: var(--border-radius-content);
	--form-input-accent-colour: var(--brand-colour);
	--form-input-caret-colour: var(--brand-colour);

	--highlight-colour-blue: #9abbf3;

	--status-colour-scheduled-light: #eff1fa;
	--status-colour-scheduled: #93A0D8;
	--status-colour-scheduled-accent: #3850b7;
	--status-colour-scheduled-translucent: #93A0D880;
	--status-colour-ready-light: #eff5fb;
	--status-colour-ready: #8CB2D1;
	--status-colour-ready-accent: #296fa8;
	--status-colour-ready-translucent: #8CB2D180;
	--status-colour-in_progress-light: #ebfffc;
	--status-colour-in_progress: #75C9BD;
	--status-colour-in_progress-accent: #00947e;
	--status-colour-in_progress-translucent: #75C9BD80;
	--status-colour-positive-light: #effaf5;
	--status-colour-positive: #8AB9A4;
	--status-colour-positive-accent: #257953;
	--status-colour-warning-light: #fffaeb;
	--status-colour-warning: #C9B375;
	--status-colour-warning-accent: #946c00;
	--status-colour-negative-light: #feecf0;
	--status-colour-negative: #E57D92;
	--status-colour-negative-accent: #cc0f35;

	--brand-colour-facebook: #1877f2;
	--brand-colour-tripadvisor: #00af87;
	--brand-colour-google: #dd4b39;

	--white: #ffffff;
	--transparent: transparent;

	--gradiant-brand-colours-light: linear-gradient(130deg, rgba(24,199,175,1) 50%, rgba(186,238,231,1) 100%);
	--gradiant-brand-colours-dark: linear-gradient(130deg, var(--brand-colour) 50%, var(--nav-colour-primary-background-highlight) 100%);
	--gradiant-basic-plan: linear-gradient(120deg, #1F3DF0 0%, #3ABEDC 100%);
	--gradiant-middle-plan: linear-gradient(120deg, #f5576c 0%, #f093fb 100%);
	--gradiant-premium-plan: linear-gradient(120deg, #fda085 0%, #f6d365 100%);

	/* Shadows */

	--shadow-color: 210deg 11% 64%;
	--shadow-elevation-low:
			0.5px 0.5px 0.8px hsl(var(--shadow-color) / 0.27),
			0.8px 0.8px 1.3px -1.2px hsl(var(--shadow-color) / 0.27),
			1.8px 1.8px 2.9px -2.5px hsl(var(--shadow-color) / 0.27);
	--shadow-elevation-medium:
			0.5px 0.5px 0.8px hsl(var(--shadow-color) / 0.29),
			1.5px 1.5px 2.4px -0.8px hsl(var(--shadow-color) / 0.29),
			3.7px 3.7px 5.9px -1.7px hsl(var(--shadow-color) / 0.29),
			8.9px 9px 14.2px -2.5px hsl(var(--shadow-color) / 0.29);
	--shadow-elevation-high:
			0.5px 0.5px 0.8px hsl(var(--shadow-color) / 0.3),
			2.7px 2.7px 4.3px -0.4px hsl(var(--shadow-color) / 0.3),
			5.2px 5.3px 8.4px -0.8px hsl(var(--shadow-color) / 0.3),
			9px 9.2px 14.5px -1.2px hsl(var(--shadow-color) / 0.3),
			15.3px 15.5px 24.5px -1.7px hsl(var(--shadow-color) / 0.3),
			25.1px 25.5px 40.3px -2.1px hsl(var(--shadow-color) / 0.3),
			39.5px 40.1px 63.3px -2.5px hsl(var(--shadow-color) / 0.3);

	--shadow-colour-standard: rgba(0, 0, 0, .15);

	/* Borders */

	--border-colour-light: #ebebeb;
	--border-colour-dark: #d1d7dd;

	--border-radius-navigation: 2rem;
	--border-radius-content: 1rem;

	/* Timeline Events */

	--timeline-event-colour-in-progress-background: var(--status-colour-in_progress-translucent);
	--timeline-event-colour-checked-in-background: var(--status-colour-ready-translucent);

	/* Buttons */

	--button-colour-primary-background: var(--brand-colour);
	--button-colour-primary-background-hover: var(--transparent);
	--button-colour-primary-font: var(--white);
	--button-colour-primary-font-hover: var(--brand-colour);
	--button-colour-primary-border: var(--brand-colour);

	--button-colour-primary-outline-background: var(--transparent);
	--button-colour-primary-outline-background-hover: var(--brand-colour);
	--button-colour-primary-outline-font: var(--brand-colour);
	--button-colour-primary-outline-font-hover: var(--white);
	--button-colour-primary-outline-border: var(--brand-colour);

	--button-colour-secondary-background: #e3e7ec;
	--button-colour-secondary-background-hover: #536072;
	--button-colour-secondary-font: #536072;
	--button-colour-secondary-font-hover: var(--white);
	--button-colour-secondary-border: var(--transparent);

	--button-colour-secondary-outline-background: var(--transparent);
	--button-colour-secondary-outline-background-hover: var(--font-colour-secondary);
	--button-colour-secondary-outline-font: var(--font-colour-secondary);
	--button-colour-secondary-outline-font-hover: var(--white);
	--button-colour-secondary-outline-border: var(--font-colour-secondary);

	--button-colour-danger-background: #ef8157;
	--button-colour-danger-background-hover: var(--transparent);
	--button-colour-danger-font: var(--white);
	--button-colour-danger-font-hover: #ef8157;
	--button-colour-danger-border: #ef8157;

	--button-colour-danger-outline-background: var(--transparent);
	--button-colour-danger-outline-background-hover: #ef8157;
	--button-colour-danger-outline-font: #ef8157;
	--button-colour-danger-outline-font-hover: var(--white);
	--button-colour-danger-outline-border: #ef8157;

}

.site-color{
    color: var(--brand-colour);
}

.site-color-background{
    background-color: var(--brand-colour);
}

/* */

.white-color-background{
	background-color: var(--white);
}

.grey-color-background{
	background-color: var(--background-colour);
}

.light-blue-color-background{
	background-color: var(--background-colour-secondary);
}

/* */

.positive-colour{
    color: var(--status-colour-positive) !important;
}

.positive-colour-highlight{
    color: var(--status-colour-positive-accent) !important;
}

.warning-colour{
    color: var(--status-colour-warning) !important;
}

.warning-colour-highlight{
    color: var(--status-colour-warning-accent) !important;
}

.negative-colour{
    color: var(--status-colour-negative) !important;
}

.negative-colour-highlight{
    color: var(--status-colour-negative-accent) !important;
}

/* */

.facebook_colour{
	color: var(--brand-colour-facebook);
}

.tripadvisor_colour{
	color: var(--brand-colour-tripadvisor);
}

.google_colour{
	color: var(--brand-colour-google);
}

/* */

.font-awesome-gradiant{
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.basic_plan_gradiant{
	background-image: var(--gradiant-basic-plan);
}

.middle_plan_gradiant{
	background-image: var(--gradiant-middle-plan);
}

.premium_plan_gradiant{
	background-image: var(--gradiant-premium-plan);
}

/* */

.low_shadow{
	box-shadow: var(--shadow-elevation-low) !important;
}

.medium_shadow{
	box-shadow: var(--shadow-elevation-medium) !important;
}

.high_shadow{
	box-shadow: var(--shadow-elevation-high) !important;
}

/******************************/
/*     02. General Styles     */
/******************************/
body, html {
    width: 100%;
	height: 100%;
	scroll-behavior: smooth;
}

body, p {
	color: var(--font-colour-secondary);
	font: 400 1rem/1.625rem "Open Sans", sans-serif;
}

.p-large {
	font: 400 1.125rem/1.75rem "Open Sans", sans-serif;
}

.p-normal {
	font: 400 1rem/1.625rem "Open Sans", sans-serif;
}

.p-small {
	font: 400 0.875rem/1.5rem "Open Sans", sans-serif;
}

h1 {
	color: var(--font-colour-primary);
	font: 700 2.5rem/3.125rem "Open Sans", sans-serif;
	letter-spacing: -0.2px;
}

h2 {
	color: var(--font-colour-primary);
	font: 700 2rem/2.625rem "Open Sans", sans-serif;
	letter-spacing: -0.2px;
}

h3 {
	color: var(--font-colour-primary);
	font: 700 1.625rem/2.125rem "Open Sans", sans-serif;
	letter-spacing: -0.2px;
}

h4 {
	color: var(--font-colour-primary);
	font: 700 1.375rem/1.75rem "Open Sans", sans-serif;
	letter-spacing: -0.1px;
}

h5 {
	color: var(--font-colour-primary);
	font: 700 1.125rem/1.5rem "Open Sans", sans-serif;
	letter-spacing: -0.1px;
}

h6 {
	color: var(--font-colour-primary);
	font: 700 1rem/1.375rem "Open Sans", sans-serif;
	letter-spacing: -0.1px;
}

.above-heading {
	color: var(--brand-colour);
	font: 700 0.75rem/0.875rem "Open Sans", sans-serif;
	text-align: center;
}

.p-heading {
	margin-bottom: 3.25rem;
}

.testimonial-text {
	font: italic 400 1rem/1.625rem "Open Sans", sans-serif;
}

.testimonial-author {
	font: 700 1rem/1.625rem "Open Sans", sans-serif;
	letter-spacing: -0.1px;
}

.li-space-lg li {
	margin-bottom: 0.375rem;
}

.indent {
	padding-left: 1.25rem;
}

a:hover {
	text-decoration: underline;
}

a.white {
	color: var(--white);
}

.decorative-line {
	display: block;
	width: 5rem;
	height: 0.5rem;
	margin-right: auto;
	margin-left: auto;
}

.light-blue {
	color: var(--highlight-colour-blue);
}

/*
	All Buttons
*/

.btn{
	padding-top: 0;
	padding-bottom: 0;
	white-space: nowrap!important;
}

/*
	Primary Button
*/

.btn-header-add {
	display: inline-block;
	text-align: center;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	border: 0.125rem solid var(--button-colour-primary-border);
	border-radius: var(--border-radius-navigation);
	background-image: var(--gradiant-brand-colours-dark);
	background-size: 200% auto;
	color: var(--button-colour-primary-font);
	font-weight: 700;
	line-height: 2.5;
	font-family: "Open Sans", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
	box-shadow: var(--shadow-elevation-medium);
}

.btn-header-add:hover {
	background-position: right center;
	color: var(--button-colour-primary-font);
	text-decoration: none;
}

.btn-solid-lg {
	display: inline-block;
	text-align: center;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	border: 0.125rem solid var(--button-colour-primary-border);
	border-radius: var(--border-radius-navigation);
	background-color: var(--button-colour-primary-background);
	color: var(--button-colour-primary-font);
	font-weight: 700;
	line-height: 2.5;
	font-family: "Open Sans", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-solid-lg:hover {
	background-color: var(--button-colour-primary-background-hover);
	color: var(--button-colour-primary-font-hover);
	text-decoration: none;
}

.btn-outline-reg {
	display: inline-block;
	text-align: center;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	border: 0.125rem solid var(--button-colour-primary-outline-border);
	border-radius: var(--border-radius-navigation);
	background-color: var(--button-colour-primary-outline-background);
	color: var(--button-colour-primary-outline-font);
	font-weight: 700;
    line-height: 1.75;
    font-family: "Open Sans", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-outline-reg:hover {
	background-color: var(--button-colour-primary-outline-background-hover);
	color: var(--button-colour-primary-outline-font-hover);
	text-decoration: none;
}

.btn-outline-lg {
	display: inline-block;
	text-align: center;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	border: 0.125rem solid var(--button-colour-primary-outline-border);
	border-radius: var(--border-radius-navigation);
	background-color: var(--button-colour-primary-outline-background);
	color: var(--button-colour-primary-outline-font);
	font-weight: 700;
	line-height: 2.5;
	font-family: "Open Sans", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-outline-lg:hover {
	background-color: var(--button-colour-primary-outline-background-hover);
	color: var(--button-colour-primary-outline-font-hover);
	text-decoration: none;
}

/*
	Secondary Button
 */

.btn-secondary-reg {
	display: inline-block;
	text-align: center;
	padding-left: 1rem;
	padding-right: 1rem;
	border: 0.125rem solid var(--transparent);
	border-radius: var(--border-radius-navigation);
	background-color: var(--button-colour-secondary-background);
	color: var(--button-colour-secondary-font);
	font-weight: 600;
    line-height: 1.75;
    font-family: "Open Sans", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-secondary-reg:hover {
	background-color: var(--button-colour-secondary-background-hover);
	color: var(--button-colour-secondary-font-hover);
	text-decoration: none;
}

.btn-secondary-lg {
	display: inline-block;
	text-align: center;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	border: 0.125rem solid var(--button-colour-secondary-border);
	border-radius: var(--border-radius-navigation);
	background-color: var(--button-colour-secondary-background);
	color: var(--button-colour-secondary-font);
	font-weight: 700;
	line-height: 2.5;
	font-family: "Open Sans", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-secondary-lg:hover {
	background-color: var(--button-colour-secondary-background-hover);
	color: var(--button-colour-secondary-font-hover);
	text-decoration: none;
}

.btn-secondary-outline-reg {
	display: inline-block;
	text-align: center;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	border: 0.125rem solid var(--button-colour-secondary-outline-border);
	border-radius: var(--border-radius-navigation);
	background-color: var(--button-colour-secondary-outline-background);
	color: var(--button-colour-secondary-outline-font);
	font-weight: 700;
    line-height: 1.75;
    font-family: "Open Sans", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-secondary-outline-reg:hover {
	background-color: var(--button-colour-secondary-outline-background-hover);
	color: var(--button-colour-secondary-outline-font-hover);
	text-decoration: none;
}

.btn-secondary-outline-lg {
	display: inline-block;
	text-align: center;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	border: 0.125rem solid var(--button-colour-secondary-outline-border);
	border-radius: var(--border-radius-navigation);
	background-color: var(--button-colour-secondary-outline-background);
	color: var(--button-colour-secondary-outline-font);
	font-weight: 700;
	line-height: 2.5;
	font-family: "Open Sans", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-secondary-outline-lg:hover {
	background-color: var(--button-colour-secondary-outline-background-hover);
	color: var(--button-colour-secondary-outline-font-hover);
	text-decoration: none;
}

/*
	Danger Button
 */

.btn-danger-solid-reg {
	display: inline-block;
	text-align: center;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	border: 0.125rem solid var(--button-colour-danger-border);
	border-radius: var(--border-radius-navigation);
	background-color: var(--button-colour-danger-background);
	color: var(--button-colour-danger-font);
	font-weight: 700;
    line-height: 1.75;
    font-family: "Open Sans", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-danger-solid-reg:hover {
	background-color: var(--button-colour-danger-background-hover);
	color: var(--button-colour-danger-font-hover);
	text-decoration: none;
}

.btn-danger-solid-lg {
	display: inline-block;
	text-align: center;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	border: 0.125rem solid var(--button-colour-danger-border);
	border-radius: var(--border-radius-navigation);
	background-color: var(--button-colour-danger-background);
	color: var(--button-colour-danger-font);
	font-weight: 700;
	line-height: 2.5;
	font-family: "Open Sans", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-danger-solid-lg:hover {
	background-color: var(--button-colour-danger-background-hover);
	color: var(--button-colour-danger-font-hover);
	text-decoration: none;
}

.btn-danger-outline-reg {
	display: inline-block;
	text-align: center;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	border: 0.125rem solid var(--button-colour-danger-outline-border);
	border-radius: var(--border-radius-navigation);
	background-color: var(--button-colour-danger-outline-background);
	color: var(--button-colour-danger-outline-font);
	font-weight: 700;
    line-height: 1.75;
    font-family: "Open Sans", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-danger-outline-reg:hover {
	background-color: var(--button-colour-danger-outline-background-hover);
	color: var(--button-colour-danger-outline-font-hover);
	text-decoration: none;
}

.btn-danger-outline-lg {
	display: inline-block;
	text-align: center;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	border: 0.125rem solid var(--button-colour-danger-outline-border);
	border-radius: var(--border-radius-navigation);
	background-color: var(--button-colour-danger-outline-background);
	color: var(--button-colour-danger-outline-font);
	font-weight: 700;
	line-height: 2.5;
	font-family: "Open Sans", sans-serif;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-danger-outline-lg:hover {
	background-color: var(--button-colour-danger-outline-background-hover);
	color: var(--button-colour-danger-outline-font-hover);
	text-decoration: none;
}

.btn-tertiary{
	text-decoration: none !important;
	font-weight: 600;
	color: var(--button-colour-secondary-font);
}

/* Badges */

.badge-scheduled{
	background-color: var(--status-colour-scheduled-light);
	color: var(--status-colour-scheduled-accent);
}

.badge-ready{
	background-color: var(--status-colour-ready-light);
	color: var(--status-colour-ready-accent);
}

.badge-in_progress{
	background-color: var(--status-colour-in_progress-light);
	color: var(--status-colour-in_progress-accent);
}

.badge-positive{
	background-color: var(--status-colour-positive-light);
	color: var(--status-colour-positive-accent);
}

.badge-warning{
	background-color: var(--status-colour-warning-light);
	color: var(--status-colour-warning-accent);
}

.badge-negative{
	background-color: var(--status-colour-negative-light);
	color: var(--status-colour-negative-accent);
}

/* Alerts */

.alert-success{
	border: none;
	border-left: solid 5px var(--status-colour-positive-accent);
	color: var(--status-colour-positive-accent);
	border-top-right-radius:  var(--border-radius-content);
	border-bottom-right-radius: var(--border-radius-content);
}

.alert-warning{
	border: none;
	border-left: solid 5px var(--status-colour-warning-accent);
	color: var(--status-colour-warning-accent);
	border-top-right-radius:  var(--border-radius-content);
	border-bottom-right-radius: var(--border-radius-content);
}

.alert-danger{
	border: none;
	border-left: solid 5px var(--status-colour-negative-accent);
	color: var(--status-colour-negative-accent);
	border-top-right-radius:  var(--border-radius-content);
	border-bottom-right-radius: var(--border-radius-content);
}