@import url(/css/fonts/gteesti.css);
@import url(/style/w/css/base.css);

:root {
	--font-regular: gt_eesti_displayregular, Calibri, Arial, sans-serif;
	--font-italics: var(--font-regular);
	--font-bold: gt_eesti_displaybold, Calibri, Arial, sans-serif;
	--font-bold-weight: 500;
	--font-bold-weight-alt: 400;

	--line-spacing: 1.25;

	--brand-color-primary: #0a00f0;
	--brand-color-secondary: #ff6900;
	--brand-color-tertiary: #005aff;
	--brand-color-quaternary: #0900cc;

	--link-color: var(--brand-color-primary);
	--link-underline: underline;
	--link-color-hover: #23527C;

	--button-radius: 3em;

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

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

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

	--content-alignment-margin: 0;

	--process-business-heading-font-size: 1em;

	--process-loader-small-size: 1em;

	--process-submit-actions-widths: 263px 1em auto;
	--process-submit-actions-spacing: 0;

	--booking-nav-areas-row1: "label label label label label";
	--booking-nav-areas-row2: ". prev date next .";
	--booking-nav-columns: 1em 7em auto 7em 1em;
	--booking-nav-spacing: 0;

	--member-menu-background: var(--brand-contrast-primary);
	--member-menu-font: var(--font-bold);
	--member-menu-color: var(--text-color);
	--member-menu-indicator-active: #00b9ff;
	--member-menu-indicator-hover: var(--member-menu-indicator-active);

	--footer-font-size: 1em;
	--footer-padding: 0;
}

b,strong
{	/** tweaked weight */
	font-weight: var(--font-bold-weight-alt);
}

a:hover,
a:focus
{	/** add hover styles for links */
	color: var(--link-color-hover);
	text-decoration: var(--link-underline-hover);
}


/** --- tweaked for styles ====== ====== */
legend
{	/** adjust section labels */
	font-size: 1.125em;
	margin-top: 2.5em;
	margin-bottom: .25em;
}

.form-control/*,
#birthday*/
{
	/*margin-bottom: .75em;*/
	/*font-size: 1em;*/
	/*height: auto;*/
	/*line-height: 1.25;*/
	/*width: 100%;*/
	padding: .7185em;
}

.form-checkbox input[type="checkbox"]
{
	width: 1.25em;
	height: 1.25em;
}

.form-group .select2-container--default .select2-selection--single
{
	height: auto;
	padding: .5933em;
	border-color: var(--input-border-color);
}

body .select2-container--default .select2-selection--single .select2-selection__arrow,
body .form-group .select2-container--default .select2-selection--single .select2-selection__arrow
{
	height: 2.7em;
	right: .5em;
	top: 0;
	width: 20px;
}

body .select2-container--default .select2-selection--single .select2-selection__arrow b,
body .form-group .select2-container--default .select2-selection--single .select2-selection__arrow b
{
	top: 50%;
	margin-top: -.675em;
}

.form-row label,
.form-group label
{
	margin-top: 1em;
	margin-bottom: .4375em;
}

.form-checkbox label
{
	margin-top: 0;
}

.header-radial
{	/** tweaked spacing around radial header border */
	padding: .75em;
}

.header-radial label
{	/** bold font for large radio options */
	font-family: var(--font-bold);
	font-weight: var(--font-bold-weight);
}

.form-button-row
{	/** adjusted button area spacing */
	margin-top: 2.25em;
	margin-bottom: .5em;
}

.form-button-row button,
.form-button-row .btn,
.form-submit-row button,
.form-submit-row .btn
{	/** slightly larger buttons by default */
	line-height: 1.1666;
	margin-bottom: 1em;
}


/** --- button styles. more verbose rules to ensure nrma variant css overridden ====== ====== */
.btn
{	/** normalise button text */
	text-transform: lowercase;
}
.btn:first-letter
{
	text-transform: uppercase;
}
#theloginform .btn,
#auto-logout .btn
{
	text-transform: none;
}

/*body button:hover,*/
body .btn-default:hover,
body .btn-danger:hover,
body .btn-primary:hover,
body .btn-success:hover
{	/** shared hover look for normal + primary buttons */
	color: var(--button-default-color-hover);
	border-color: var(--button-default-border-hover);
	background-color: var(--button-default-background-hover);
}

/*body button:focus,
body button:active,*/
body .btn-default:focus,
body .btn-default:active,
body .btn-danger:focus,
body .btn-danger:active,
body .btn-primary:focus,
body .btn-primary:active,
body .btn-success:focus,
body .btn-success:active
{	/** shared active look for normal + primary buttons */
	color: var(--button-default-color-active);
	border-color: var(--button-default-border-active);
	background-color: var(--button-default-background-active);
}

.step .btn-default
{	/** style button in event modify list as primary */
	color: var(--button-primary-color);
	border-color: var(--button-primary-border);
	background-color: var(--button-primary-background);
}

.providers .btn-primary,
#auto-logout .btn-success
{	/** action button in provider list override */
	color: var(--button-secondary-color);
	border-color: var(--button-secondary-border);
	background-color: var(--button-secondary-background);
}

body .btn-secondary:hover,
.providers .btn-primary:hover,
#auto-logout .btn-success:hover
{	/** hover style for secondary buttons */
	color: var(--button-secondary-color-hover);
	border-color: var(--button-secondary-border-hover);
	background-color: var(--button-secondary-background-hover);
}

body .btn-secondary:focus,
body .btn-secondary:active,
.providers .btn-primary:focus,
.providers .btn-primary:active,
#auto-logout .btn-success:focus,
#auto-logout .btn-success:active
{	/** active styles for secondary buttons */
	color: var(--button-secondary-color-active);
	border-color: var(--button-secondary-border-active);
	background-color: var(--button-secondary-background-active);
}


/** --- tweak step process styles ====== ====== */
.step-header h1
{
	margin: .675em 0;
}

.step-container .active .step-icon,
.step-container .done .step-icon
{	/** off colour for step indicators */
	border-color: var(--brand-color-tertiary);
	color: var(--brand-color-tertiary);
}

.step-container .done .step-icon
{	/** swap icon used for completed step */
	background-image: url(/images/progress-bar-step-complete.svg);
	background-color: var(--brand-color-tertiary);
	background-position: center center;
}

.step-container .done .step-icon::before
{	/** remove existing icon for completed step */
	content: '';
}

.step-container .indicator-line:first-child,
.step-container .indicator-line:last-child
{	/** reduced space for first and last step elements */
	flex: .35;
}

.step-container .active.indicator-line
{	/** same off colour for line between steps */
	background-color: var(--brand-color-tertiary);
}

.step-container p
{	/** adjust label width */
	width: 9em;
}

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


/** --- custom header styling ====== ====== */
header
{	/** additional spacing */
	padding: 1em;
}

header nav
{	/** clamp actual content to main content width */
	max-width: var(--main-width-max);
	margin: 0 auto;
}

header nav .home
{	/** sizing for home link */
	text-decoration: none;
	font-size: .75em;
	display: inline-block;
}

header nav img
{	/** adjusted size for logo */
	vertical-align: middle;
	width: 7em;
	margin: 0 1em 0 0;
}

header nav .home .display
{	/** tweak position and font to make text look part of the logo */
	font-family: var(--font-bold);
	font-weight: bold;
	color: var(--brand-color-primary);
	font-size: 2em;
	margin-top: 0.3em;
	display: inline-block;
	vertical-align: middle;
}



.heading
{	/** suppress heading */
	display: none;
}

.logo
{	/** suppress inline logo */
	display: none;
}


.filter h4
{	/** regular font text for filter labels */
	font-family: var(--font-regular);
}

.nav .btn-primary
{	/** use button "link" style for date nav buttons */
	color: var(--button-link-color);
	border-color: var(--button-link-border);
	background-color: var(--button-link-background);
}

.nav .btn-primary:hover
{	/** use button "link" style for date nav buttons */
	color: var(--button-link-color-hover);
	border-color: var(--button-link-border-hover);
	background-color: var(--button-link-background-hover);
}

.nav .btn-primary:focus,
.nav .btn-primary:active
{	/** use button "link" style for date nav buttons */
	color: var(--button-link-color-active);
	border-color: var(--button-link-border-active);
	background-color: var(--button-link-background-active);
}



.list img
{	/** no product thumbnails */
	display: none;
}

.list .btn
{	/** slightly smaller buttons in lists */
	line-height: .8337;
}

.list .selected .btn:before
{
	margin-top: calc(-.5em / var(--line-spacing));
}



.purchase-list .item-name/*,
.purchase-list .product-price*/
{	/** highlight item name and price */
	font-family: var(--font-bold);
	font-weight: var(--font-bold-weight-alt);
}

.purchase-list .product-price span
{
	display: block;
}

.purchase-list .product-price .label
{
	font-size: 1rem;
	font-weight: var(--font-bold-weight-alt);
	white-space: nowrap;
}

.purchase-list .product-price.price-member,
.purchase-list .product-price.price-normal
{
	padding-left: 2.75em;
}

.purchase-list .product-price.price-member
{
	background: transparent url(/images/member-best-price.svg) left center no-repeat;
}

.purchase-list .product-price .price
{
	font-family: var(--font-bold);
}



.details .description
{	/** adjusted text spacing for product descriptions */
	line-height: 1.2;
}



.options th:last-child
{	/** suppress options column heading (selecting exclusive options) */
	visibility: hidden;
}

.options tfoot td
{	/** options total row in bold */
	font-family: var(--font-bold);
	font-weight: var(--font-bold-weight-alt);
}


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

.item-col-desc .readmore
{
	font-size: .875em;
}

#info .resources,
#info .hours,
#info .contact-details
{
	display: none;
}



/** --- custom footer styling ====== ====== */
footer
{	/** footer background and spacing */
	margin-top: 3em;
	background: #e7e8ea;
}

footer nav ul
{	/** clamp footer content to content width */
	max-width: var(--main-width-max);
	padding: 1em;
	margin: 0 auto;
	box-sizing: border-box;
}

footer nav li
{	/** footer link items */
	display: inline-block;
	margin: .5em 2em .5em 0;
}

footer nav a
{	/** override footer link colors */
	text-decoration: none;
	color: #2e2e31;
}

footer nav a:hover
{	/** override footer link hover colors */
	color: var(--brand-color-primary);
}

footer div
{	/** background for copyright line */
	background: #57595b;
}

footer div span
{	/** copyright text */
	font-size: .8em;
	line-height: 1.5;
	color: #f8f8f8;
	display: block;
	max-width: var(--main-width-max);
	padding: 1em;
	margin: 0 auto;
	box-sizing: border-box;
}

#footer,
#footer .powered
{	/** hide default footer */
	display: none;
}


/** --- pre-footer promo ====== ====== */
.promo
{	/** promo spacing and background */
	background: #f9f9f9;
	margin: 3em auto -3em auto;
	display: none;
}
.finished.booked .form-button-row .return
{	/** suppress re-book */
	display: none;
}
.finished.booked ~ #w_footer .promo,
.finished.purchased ~ #w_footer .promo
{	/** show promo for booking / purchase finish */
	display: block;
}

.promo .perks
{	/** clamp promo content to content width */
	max-width: var(--main-width-max);
	padding: 1em;
	margin: 0 auto;
	box-sizing: border-box;
	font-size: 1.25em;
	line-height: 1.4em;
}

.promo .perks h3
{
	font-size: 1.4em;
	line-height: 1.14275em;
	margin-bottom: .25em;
}

.promo .perks .inner
{	/** main text note styling */
	border: 1px solid #ececec;
	background: url(/images/member-perk-bg-wide.svg) left bottom no-repeat;
	background-size: cover;
	text-align: left;
}

.promo .perks .inner > div
{
	background: transparent url(/images/member-perk-logo.svg) .75em .75em no-repeat;
	background-size: 9em;
	padding: 1em;
	padding-left: 14em;
	padding-bottom: 1.2em;
	display: grid;
	grid-template-columns: auto min-content;
	grid-template-areas: "title title"
		"text link";
}

.promo .perks .inner > div:before
{
	position: absolute;
	background: transparent url(/images/member-best-price.svg) no-repeat;
	margin-left: -2.5em;
	display: block;
	width: 2em;
	height: 2em;
	content: ' ';
}

.promo .perks .inner strong
{
	grid-area: title;
	font-size: 0.9em;
	line-height: 1.3333em;
}

.promo .perks .inner div div
{
	grid-area: text;
	margin-bottom: 0.5em;
}

.promo .perks .inner a
{
	grid-area: link;
	display: block;
	font-size: .8em;
	padding: .875em 1.5em;
	white-space: nowrap;
	text-transform: none;
	height: 1em;
	max-width: 15.625em;
}

.promo .perks .footnote
{	/** footnote */
	font-size: 0.75em;
	text-align: left;
	margin-bottom: 2em;
}

.promo .perks .footnote a
{
	text-decoration: none;
}

@media only screen and (max-width: calc(2em + 600px))
{
	.promo .perks .inner
	{
		background-image: url(/images/member-perk-bg-mobile.svg);
	}

	.promo .perks .inner > div
	{	/** reposition main promo notes */
		padding-left: 3.5em;
		padding-top: 5em;
	}

	.promo .perks .inner > div
	{
		display: block;
	}

	.promo .perks .footnote
	{	/** reduce gap between content + footnote */
		margin-top: 3em;
	}
}

@media only screen and (max-width: calc(2em + 850px))
{
	.promo .perks .inner > div
	{
		display: block;
	}
}


/** --- member section specific styling ====== ====== */
.ctrl-member header nav
{	/** header element with title same width as menu */
	max-width: var(--member-menu-width);
}

.ctrl-member .navbar-default
{	/** full width menu */
	max-width: unset;
}

.ctrl-member .navbar-nav
{	/** menu content still constrained to content width */
	padding: 0 calc((100% - var(--member-width-max) + 2em) / 2);
}

.ctrl-member .navbar-nav a
{	/** thicker menu than base */
	padding-top: 1em;
	padding-bottom: 1em;
	border-top-width: .4em;
	border-bottom-width: .4em;
}

.ctrl-member .navbar-default
{	/** mobile background by default. stretch to cover area for menu / header */
	position: relative;
	background: center center url(/images/Driver-Training-Dashboard-Mobile.png) no-repeat;
	background-size: cover;
	padding-bottom: 27em;
}

@media only screen
	and (min-width: calc(850px + 2em))
{
	.ctrl-member .navbar-default
	{	/** desktop size header background variant */
		background-image: url(/images/Driver-Training-Dashboard-Desktop.png);
		background-position: center 0;
	}
}

.ctrl-member .navbar-default:after
{	/** inject heading for the page */
	font-family: var(--font-bold);
	font-weight: var(--font-bold-weight);
	font-size: 2.75em;
	color: white;
	position: absolute;
	margin-top: 1em;
	width: 100%;
	text-align: center;
}

@media only screen
	and (min-width: 851px)
{
	.ctrl-member .navbar-default:after
	{	/** fixed position on smaller width */
		text-align: left;
		margin-left: 1em;
	}
}

@media only screen
	and (min-width: 1201px)
{
	.ctrl-member .navbar-default:after
	{	/** position based on screen width vs content width */
		margin-left: calc((100% - (var(--member-width-max) / 2.75) + 4rem) / 2);
		width: auto;
	}
}

.ctrl-member.sub-ctrl-home .navbar-default:after { content: 'My bookings'; }
.ctrl-member.sub-ctrl-vouchers .navbar-default:after { content: 'Vouchers'; }
.ctrl-member.sub-ctrl-modifybooking .navbar-default:after { content: 'Modify booking'; }
.ctrl-member.sub-ctrl-cancelbooking .navbar-default:after { content: 'Cancel booking'; }
.ctrl-member.sub-ctrl-settings .navbar-default:after { content: 'Profile settings'; }

.ctrl-member .navbar-header
{
	display: block;
}

.ctrl-member .navbar-toggle:focus,
.ctrl-member .navbar-toggle:hover,
.ctrl-member .navbar-toggle:active
{	/**  */
	background-color: transparent;
	color: var(--brand-color-primary);
}


/** --- tweak to member navbar ====== ====== */
.account-switch
{	/** suppress account switch */
	display: none;
}

.account-options
{	/** shift account menu into theme header */
	margin-top: -4em;
}

@media only screen
	and (min-width: calc(1200px - 2em))
{
	.account-options
	{	/** position based on screen width vs content width */
		margin-right: calc((100% - var(--member-width-max) + 3em) / 2);
	}
}

.jump-home
{	/** adjust colour due to different header background */
	color: var(--text-color);
}


/** --- tweaks to member toggle-able panes ====== ====== */
.member-pane summary
{	/** de-colour toggle headers */
	background: transparent;
}

.member-pane summary h4
{	/** shift icon closer to side due to lack of context wrapping */
	padding-left: 0;
}

.member-pane summary h4 .fa
{	/** fixed width icons */
	width: 1.2em;
	text-align: center;
}



.modify-booking_service .category,
.row-location .category
{
	font-family: var(--font-bold);
	font-weight: var(--font-bold-weight);
}

.row-location
{
	margin-top: 1em;
}

.modify-booking #bookinglocation_area_notes
{
	width: 100%;
}

.member-settings .preference-group-full:last-child
{
	display: none;
}


/** --- tweak footer layout ====== ====== */
.ctrl-member #footer
{	/** member section puts footer content in this element */
	display: block;
}

.ctrl-member footer nav ul
{	/** increased width for member area */
	max-width: calc(var(--member-width-max) - 2em);
	text-align: left;
}

.ctrl-member footer div span
{	/** also increased width for copyright line */
	max-width: calc((var(--member-width-max) - 2em) / 0.8);
	text-align: left;
}


/* Remove NRMA Driver training 125876 booking button from member dashboard test account */
a[href="https://nrmatest.bookitlive.net/book/driver-training"]
{
display: none;
visibility: hidden;
}

/* Remove NRMA Driver training 125876 booking button from member dashboard prod account */
a[href="https://nrma.bookitlive.net/book/driver-training"]
{
display: none;
visibility: hidden;
}