/*

colour guide
------------

primary blue
- dark #004d80 (25%)
- standard #0099ff (50%)
- light #80ccff (75%)

secondary green
- standard #25ae88

tertiary purple
- standard #7383bf

neutral gray
- dark #777
- medium #eee
- light #f5f5f5
- super-light #f8f8f8

*/

html {
	position: relative;
	min-height: 100%;
}

body {
	padding: 80px 0 80px 0; /* padding to accommodate navbar and footer */
	font-family: 'Oxygen', sans-serif;
}

/**********************************
** text, buttons, dropdowns etc.
**********************************/

a.btn.strong,
button.strong {
	border-width: 2px;
	border-radius: 0;
	border-color: #777;
	text-transform: uppercase;
}

a.btn.strong-primary,
button.strong-primary {
	border-width: 2px;
	border-radius: 0;
	border-color: #000;
}

button.strong.img {	padding: 0; }

button.strong.img > img { height: 32px; }

select.strong {
	height: 36px;
	border: none;
	outline: 2px solid #777;
	outline-offset: -2px;
	text-transform: uppercase;
}

input.strong,
.form-group-lg input.strong,
textarea.strong,
div.panel.strong,
.input-group-addon {
	border: 2px solid #777;
	border-radius: 0;
	border-color: #777;
}

h4, h5 { font-weight: 600; }

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

/**********************************
** tooltips
**********************************/

div.tooltip-inner {
	max-width: unset;
	font-family: 'Oxygen', sans-serif;
}

.show-tooltip-huge + .tooltip,
.show-tooltip-huge + .tooltip > .tooltip-inner { width: 320px; }

span.show-tooltip-large + .tooltip > .tooltip-inner { width: 200px; }

label[for="select-role"] > .tooltip > .tooltip-inner { 
	width: 250px;
	text-align: left;
}

/**********************************
** navbar and footer
**********************************/

nav.navbar {
	background: rgba(255, 255, 255, .9);
	border: none;
}

nav.navbar,
a.navbar-brand { min-height: 80px; }

.navbar-brand > img { height: 50px; }

.navbar-brand > img.snow { 
	transform: translate(0,-100%);
	margin-top: 0;
}

.navbar-brand > img.santa-hat {
	position: relative;
	top: -94px;
	right: -192px;
	height: 22px;
}

button.navbar-toggle { margin-top: 22px; }

.navbar-nav > li > a {
	margin-top: 20px;
	padding: 10px;
	text-transform: uppercase;
}

form.navbar-form {
	margin-top: 22px;
	border: none;
}

form.navbar-form .btn { 
	margin-left: 10px;
	vertical-align: top;
}

img.navbar-flag { margin-top: -4px; }

@media (max-width: 767px) {
	.navbar-nav > li > a { margin-top: 0; }

	form.navbar-form { margin-top: 0; }
	form.navbar-form > a,
	form.navbar-form > button,
	form.navbar-form > select { margin-top: 5px; }
}

@media (max-width: 991px) and (min-width: 768px) {
	ul.nav.navbar-nav {
		max-width: 220px;
		margin-top: 16px; 
	}

	ul.nav.navbar-nav > li > a {
		margin: 0; 
		padding: 2px 8px 0 0;
	}
}

div.show-navbar {
	position: absolute;
	top: 0;
	right: 10%;
	z-index: 1020;
	padding-top: 22px;
}

footer.footer {
	position: absolute;
	bottom: 0;
	height: 80px;
	width: 100%;
	background-color: #f5f5f5;
	text-align: center;
}

footer.footer > div.center-helper-outer {
	min-height: initial;
	height: 100%;
}

footer.footer ul,
footer.footer p { margin: 0; }

footer.footer p, 
footer.footer a { text-transform: uppercase; }

/**********************************
** start page
**********************************/

div.jumbotron.pitch { background: url('../img/meeting.jpg') center / cover; }

div.jumbotron.pitch img {
	max-height: 80%;
	max-width: 80%;
}

h1.start-heading { font-size: 275%; }

div.start-box-container {
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
}

div.start-box-container:after,
div.start-box-container:before { display: none; } /* Safari fix */

div.start-box-spacing {
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
	padding: 0 15px 0 15px;
}

div.start-box {
	display: block;
	flex: 1; /* Stretch to fill parent height */
	flex-direction: column;
	justify-content: space-between;
	padding: 20px;
	border-radius: 10px;
	background-color: #f8f8f8;
}

div.start-box > img { width: 80px; }

table.how-does-it-work td { padding: 5px 15px 15px 5px; }

div.start-box > table.how-does-it-work img {
	height: 48px;
	width: 48px;
}

table.features td { padding: 5px 10px 10px 0; }

div.start-box > table.features img {
	height: 28px;
	width: 28px;
}

@media (max-width: 991px) { div.start-box-spacing.col-md-6.video { width: 100%; } }

div.start-box.video { width: 100%; }

div.video-wrapper {
	position: relative;
	padding-bottom: 62.5%;
	height: 0;
}

div.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

div.blog-grid-container {
	display: grid;
	grid-template-columns: 50px 1fr; /* First column fixed, second flexible */
	grid-template-rows: repeat(2, auto);
	margin-top: 20px;
}

div.blog-grid-merged-vertical {
	grid-row: span 2; /* Merge vertically across both rows */
	display: flex;
	align-items: center;
	justify-content: center;
}

div.blog-grid-container img { width: 24px; }

div.jumbotron.why-invest {
	background: url('../img/desk.jpg') center / cover;
	margin-bottom: 0;
	padding: 20px;
}

div.jumbotron.why-invest img {
	width: 50px;
	cursor: pointer;
}

div.jumbotron.why-invest p { font-size: 14px; }

div.jumbotron.why-invest p:nth-of-type(2) { margin-bottom: 0; }

div.reference-logos {
	width: 100%;
	padding: 10px;
	background-color: #eee;
}

div.reference-logos img {
	display: inline-block;
	max-height: 60px; /* 4:6 */
	max-width: 90px;
	margin: 20px;
	filter: grayscale();
}

@media (max-width: 768px) {
	div.reference-logos img {
		max-height: 40px;
		max-width: 60px;
		margin: 10px;
	}
}

/**********************************
** features
**********************************/

div.row.features { margin-top: 20px; }

div.row.features > div { 
	padding: 20px;
	background-color: #f8f8f8; 
	border-radius: 10px;
}

div.features-icon {
	padding: 20px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}

div.features-icon img { width: 128px; }

div.features-button { margin: 20px 0 10px 0; }

/**********************************
** faq
**********************************/

img.faq {
	max-width: 25%;
	border: 1px solid #777;
}

/**********************************
** blog
**********************************/

#blog {
	height: calc(100vh - 180px);
	width: 100%;
	border: none;
	border-radius: 10px;
}

/**********************************
** sign-up
**********************************/

.top-buffer { margin-top: 40px; }

.form-group .form-inline div.country-code { padding-left: 0; }

.form-group .form-inline div.mobile { padding: 0; }

input.form-control.mobile { width: 100%; }

.form-inline { min-height: 35px }

.form-group select.strong {
	width: 100%;
	padding-left: 10px;
}

.checkbox label { cursor: default; }

/**********************************
** contact us
**********************************/

.g-recaptcha div { 
	margin-left: auto;
	margin-right: auto;
}

/**********************************
** get started
**********************************/

a.offset-anchor {
	display: block;
	position: relative;
	top: -80px;
	visibility: hidden;	
}

div.get-started img {
	max-width: 75%;
	margin-top: 20px;
	margin-bottom: 20px;
}

/**********************************
** login
**********************************/

@media (max-width: 767px) {	div.center-helper-inner > div.container { width: 100vw; } }

.alert { border-radius: 0; }

form input.input-lg ~ span.glyphicon.form-control-feedback { top: 31px; }

a.login-form-link {
	display: block;
	margin-top: 10px;
}

/**********************************
** sign in/out
**********************************/

img.sign-in-logo {
	max-height: 200px;
	max-width: 100%;
	margin-bottom: 20px
}

@media (max-width: 767px) {
	div.sign-in-out { width: 100%; }
	div.sign-in-out { margin: 0 20px 0 20px; }
}

div.milk {
	padding: 15px;
	background: rgba(255, 255, 255, .9);
	border: none;
}

/*** start nav ***/

.nav-pills > li > a {
	color: #777;
	text-transform: uppercase;
	border-radius: 0;
}

ul.nav-pills.strong > li.active > a {
	background-color: transparent;
	font-weight: bold;
	color: #bbb;
}

@media (max-width: 767px) { 
	div.sign-in-out ul.nav.nav-pills > li { float: initial; }
	div.sign-in-out ul.nav.nav-pills > li > a { width: max-content; }
}

kbd.menu { margin-left: 5px; }

div.lang-selector {
	position: absolute; top: 2px; right: 15px;
}

hr.strong { 
	margin: 15px 0 15px 0;
	border-color: #eee;
}

/*** end nav ***/

div.sign-in-out input {
	border: none;
	border-radius: 0;
}

div.sign-in-out input::placeholder { color: #eee; }

div.sign-in-out a { cursor: pointer; }

label ~ input.input-lg { padding-top: 12px; }

div.sign-in-out form span.glyphicon.form-control-feedback { top: 6px; }

@media (min-width: 992px) { .form-horizontal label.control-label.input-lg-sm-text { padding-top: 12px;} }

/*** start autocomplete ***/

div.form--light-search { width: 100%; }

#result {
	display: none;
	z-index: 1050;
	border: 1px solid #eee;
}

.form--search__result { overflow: hidden; }

.item--result {
	padding: 10px;
	font-family: inherit;
}

.item--result .data-1 { display: none; }

.item--result:hover,
.item--result.focus {
	background: #80ccff;
}

/*** end autocomplete ***/

div.sign-in-out select {
	height: 36px;
	border: none;
	text-transform: uppercase;
}

#select-visit-reason { width: 100%; }

div.sign-in-out button,
div.sign-in-out a.btn {
	height: 46px;
	border: none;
	border-radius: 0;
	text-transform: uppercase;
}

div.terms-of-visitation-modal {
	margin: auto;
	padding: 20px
}

@media (orientation: landscape) { div.terms-of-visitation-modal { height: 100%; } }

@media (orientation: portrait) {
	div.terms-of-visitation-modal {
		height: 100%;
		width: 100%;
	}
}

div.terms-of-visitation-modal div.modal-content { height: 100%; }

div.terms-of-visitation-modal div.modal-body { 
	height: calc(100% - 80px);
	overflow: scroll;
	text-align: center;
}

div.terms-of-visitation-modal div.modal-footer { height: 40px; }

div.icon img { width: 80px; }

div.icon img + p { margin-bottom: 20px; }

div.qr-code-wrapper,
div.qr-code {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	text-align: center;
}

@media (max-width: 767px) {
	div.qr-code-wrapper,
	div.qr-code { flex-wrap: wrap; }
}

div.qr-code-instruction { padding: 20px; }

div.qr-code-instruction img.inline-text { 
	width: 20px;
	margin-left: 4px;
}

div.qr-code {
	min-height: 325px;
	min-width: 325px;
}

/**********************************
** administration
**********************************/

hr.settings-header { margin-top: 0; }

input.small,
div.input-group.small { 
	width: 90px; 
	min-width: 90px;
}

.form-horizontal div:has(input[type="file"]) { margin-top: 4px; }

.form-horizontal input[type="file"] { max-width: 100%; }

.form-horizontal button.delete-file { position: absolute; top: 0; right: 15px; }

div.modal-dialog.modal-lg.qr-code-modal {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
}

div.settings-save-button { margin-top: 20px; }

.table-controls > * { margin: 0 0 10px 15px !important; }

table.table.table-striped td { vertical-align: middle; }

table.table.table-sortable th span.glyphicon {
	display: inline;
	color: #ccc;
	cursor: pointer;
}

table.table.table-condensed { margin-bottom: 0; }

img.button { padding: 4px }

div.form-group.datepicker {	width: 240px; }

div.bootstrap-datetimepicker-widget { z-index: 1060; }

td > img { height: 32px; }

/**********************************
** payment
**********************************/

div.select-payment-method { padding: 15px 25px 25px 25px; }

img.payment { margin-top: 20px; margin-bottom: 20px; }

/**********************************
** results page
**********************************/

img.result { margin-bottom: 20px; }

/**********************************
** notifications
**********************************/

div.container-fluid.notification-container {
	position: absolute;
	width: 100%;
	z-index: 1040;
	padding: 0;
}

div.container-fluid.notification-container.navbar-hidden { margin-top: -80px; }

div.notification {
	margin: 0;
	border: none;
	border-radius: 0;
	text-align: center;
}

div.notification > p {
	font-size: 1.5em;
	margin-top: 0;
}

/**********************************
** loading
**********************************/

div.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1070;
	background-color: rgba(255, 255, 255, .5);
}

div.loading-gif {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -32px;
	margin-left: -32px;
}

/*************************************************
** helper divs for centering content on page
*************************************************/

div.center-helper-outer {
	display: flex;
	min-height: calc(100vh - 160px);
}

div.center-helper-inner {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center; 
}