/*Default colour list*/
:root {
	--row: 100%;
	--col: 100%;
	--dstan: #fcc79b;
	--dsorange: #f18721;
	--dsburnt: #bd3a26;
	--dsnavy: #1a2b57;
	/* These are additional colors */
	--color-lightgray: #606c76;
	--color-white: #fff;
	--color-main-bg: #fff;
	--color-links: var(--color-cakephp-blue);
	--color-links-active: #2a6496;
	--color-headings: #363637;
	--color-message-success-bg: #e3fcec;
	--color-message-success-text: #1f9d55;
	--color-message-success-border: #51d88a;
	--color-message-warning-bg: #fffabc;
	--color-message-warning-text: #8d7b00;
	--color-message-warning-border: #d3b800;
	--color-message-error-bg: #fcebea;
	--color-message-error-text: #bd3a26;
	--color-message-error-border: #bd3a26;
	--color-message-info-bg: #eff8ff;
	--color-message-info-text: #1a2b57;
	--color-message-info-border: #fcc79b;
}

/*Default field layout setup*/
input[type='color']:focus, input[type='date']:focus, input[type='datetime']:focus, input[type='datetime-local']:focus, input[type='email']:focus, input[type='month']:focus, input[type='number']:focus, input[type='password']:focus, input[type='search']:focus, input[type='tel']:focus, input[type='text']:focus, input[type='url']:focus, input[type='week']:focus, input:not([type]):focus, textarea:focus, select:focus {
	background-color: white;
	border: #f18721 solid 2px;
	outline: 0;
}

/*Page and body setup*/
body {
	color: var(--dsnavy);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.list-toggle {
	opacity: 0;
	position: fixed;
	top: 0;
}

.nav-label {
	cursor: pointer;
	font-size: inherit;
	font-weight: inherit;
	margin: 0;
	text-align: center;
}

.form-panel {
	justify-items: center;
}

form.login-form {
	width: min(100%, 500px);
}

textarea {
	width: 100%;
}

.nav-label:after {
	content: "▼";
}

nav {
	align-items: center;
	box-sizing: border-box;
	background-color: var(--dsnavy);
	display: block;
	justify-items: center;
	max-height: 0;
	overflow: hidden;
	position: fixed;
	top: 151px;
	transition: max-height .4s ease-in;
	width: 100%;
	z-index: 1500;
}

nav > div {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(100px, min(155px, 100%)));
	justify-content: center;
	max-width: min(100%, 200rem);
}

.list-toggle:checked ~ nav {
	max-height: 33rem;
	transition: max-height .4s ease-in;
}

.list-toggle:checked ~ header > div > label:after, .list-toggle:checked ~ .views-label:after {
	content: "▲";
}

main {
	display: flex;
	flex: 1 0 calc(100vh - 24.2rem);
	flex-direction: column;
}

.container {
	max-width: 200rem;
}

.main-image {
	flex: 1 1 500px;
	text-align: center;
}

/*Field formatting*/
.required > label:after {
	color: #c3232d;
	content: " *";
}

div.error-message {
	color: var(--dsburnt);
	font-style: italic;
}

.property-description {
	flex: 1 1 450px;
}

.property-description > .field {
	box-shadow: none;
	padding: 0 2rem;
}

.property-icon-div {
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(70px, 100%), .5fr));
	text-align: center;
}

.flex-div.property-description {
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
}

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

img.detail-icon {
	display: block;
}

.tile-icon > img.detail-icon {
	display: block;
	width: 5rem;
}

.property-icon > span, .tile-icon > span {
	display: block;
	font-weight: 700;
}

.flex-div.property-overview {
	flex-flow: row wrap;
	justify-content: center;
	margin-bottom: 3rem;
}

.view-thumbnails {
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(50px, 100%), .5fr));
	text-align: center;
}

.flex-grid.view-details {
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
	padding: 2rem;
}

.view-section-small {
	flex: 1 1 30%;
}

.view-section-large {
	flex: 1 1 65%;
}

.view-section-half {
	flex: 1 1 450px;
}

.flex-grid.panel-grid {
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	justify-items: stretch;
	margin: 0 1rem;
	text-align: center;
}

.flex-grid.panel-grid.insights {
	grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
}

.flex-grid.panel-grid > div {
	border: var(--dstan) 1px solid;
	margin-bottom: 2rem;
}

.flex-grid.panel-grid > div > p {
	font-size: 3rem;
	margin-bottom: 0;
}

.flex-grid.panel-grid > div > .panel-header {
	background-color: var(--dstan);
	color: var(--dsnavy);
}

.status-bar {
	color: white;
	font-size: 2rem;
	margin: 1rem 0;
	padding: 0 1rem;
}

.status-bar.listed, .status-bar.target, .status-bar.inprogress, td.low {
	background-color: #0b6125;
}

.status-bar.draft, td.medium {
	background-color: var(--dsorange);
}

/* Slideshow container */
.slideshow-container {
	background-color: #aaa;
	margin: auto;
	max-width: 950px;
	position: relative;
	text-align: center;
}

.property-photo {
	flex: 1 1 490px;
}

/* Hide the images by default */
.mySlides {
	display: none;
}

.mySlides.photo-default {
	display: block;
	padding-bottom: .1rem;
}

.mySlides > div > img {
	max-height: 600px;
}

.view-photo-text {
	bottom: 0;
	color: white;
	position: absolute;
	right: 0;
}

.view-photo-text > p {
	margin: 0;
}

.photo-thumbs {
	margin-top: 2em;
	flex-wrap: wrap;
	display: flex;
	justify-content: space-evenly;
}

.photo-thumbnail {
	cursor: pointer;
}

.photo-thumbnail img {
	padding: .2em;
	height: 60px;
}

.photo-thumbnail.active img {
	border: 2px solid var(--dsorange);
}

.photo-thumbnail img:hover {
	border: 2px solid var(--dsburnt);
}

/* Next & previous buttons */
.prev-image, .next-image {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: .6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;
}

/* Position the "next button" to the right */
.prev-image {
	left: 0;
}

.next-image {
	right: 0;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev-image:hover, .next-image:hover {
	background-color: rgba(0, 0, 0, .8);
}

/* Image styling */
.photo-text {
	color: #fff;
	font-size: 1em;
	padding: .2em 1em;
}

.number-text {
	font-size: .7em;
	position: absolute;
	top: 0;
}

/* Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}

.help-slider {
	padding: 0 0 2rem 2rem;
	font-size: 2rem;
}

#help-details {
	display: none;
}

/*
Spinner and overlay styling
 */
@-webkit-keyframes spinner {
	0% {
		transform: translate3d(-50%, -50%, 0) rotate(0deg);
	}
	
	100% {
		transform: translate3d(-50%, -50%, 0) rotate(360deg);
	}
}

/*
Spinner and overlay styling
 */
@keyframes spinner {
	0% {
		transform: translate3d(-50%, -50%, 0) rotate(0deg);
	}
	
	100% {
		transform: translate3d(-50%, -50%, 0) rotate(360deg);
	}
}

#spinner, #overlay {
	align-self: center;
	background-color: rgba(100, 100, 100, .9);
	color: var(--dsnavy);
	display: none;
	position: fixed;
	transition: opacity linear .1s;
	z-index: 5000;
}

#spinner {
	height: 10rem;
	left: 25%;
	top: calc(( 100vh / 2 ) - 5rem);
	width: 50%;
	z-index: 5100;
}

#spinner::before {
	animation: 1.5s linear infinite spinner;
	border: solid 3px var(--dsnavy);
	border-bottom-color: var(--dsorange);
	border-radius: 50%;
	content: url("../img/logo_watermark_small.png");
	height: 70px;
	left: 50%;
	opacity: inherit;
	position: absolute;
	top: 50%;
	width: 70px;
}

#overlay {
	align-content: center;
	flex-wrap: wrap;
	height: 100%;
	justify-content: center;
	width: 100%;
}

#overlay-info {
	background-color: var(--color-main-bg);
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin: 0 2rem;
	max-height: 75rem;
	max-width: 150rem;
	overflow: hidden;
}

.panel-form, #overlay-info > .panel-form {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px 2%;
	justify-content: space-between;
	padding: 1% 2%;
	text-align: left;
}

#overlay-info > .panel {
	border: none;
	flex: 1 0 auto;
	height: 100%;
	margin: unset;
}

#overlay-info > .panel > .panel-form {
	height: calc(100% - 40px);
	overflow: scroll;
}

/**
Header and Footer styling
 */
.logo {
	display: flex;
	justify-content: center;
}

.logo > a {
	align-content: center;
}

#logo, #ptaa-logo {
	display: flex;
	height: 8rem;
}

footer, header {
	border-image: linear-gradient(to right, var(--dstan), var(--dsorange), var(--dsburnt)) 1;
	background-color: var(--dsnavy);
	color: var(--dstan);
	display: flex;
	flex: 0 1 auto;
	z-index: 4000;
}

header {
	border-bottom: 10px solid;
	flex-direction: column-reverse;
	max-height: 16rem;
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	position: sticky;
	top: 0;
}

footer {
	border-top: 10px solid;
	flex-direction: column;
	padding-top: 1rem;
}

.header-left, .footer-left {
	display: flex;
	flex: 0 0 auto;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.header-left > a, .header-left > label, .footer-left > a, nav > div > a {
	color: var(--dstan);
	flex: 1 0 auto;
	text-align: center;
	transition: background-color .3s ease-out, color .3s ease-out;
}

.header-left > a:hover, .header-left > label:hover, .footer-left > a:hover, nav > div > a:hover, .list-item > a:hover {
	background-color: var(--dstan);
	color: var(--dsnavy);
	transition: background-color .3s ease-in, color .3s ease-in;
}

nav > div > a {
	flex: 1 0 135px;
}

.footer-left {
	flex-wrap: wrap;
}

/*PropTech Logo styling*/
.ptaa {
	display: flex;
	justify-content: center;
}

.ptaa > a > img {
	height: 8rem;
	background-color: white;
	margin: 1rem 0;
}

.company-details {
	display: flex;
	justify-content: center;
	text-align: center;
}

.flex-div {
	display: flex;
	flex-flow: row wrap;
	gap: 1.5rem 2%;
	height: 100%;
	justify-content: space-between;
	width: 100%;
}

.panel.row-table {
	flex: 0 0 auto;
	max-width: max(46%, 500px);
}

.flex-grid {
	display: grid;
}

div#filterpanel {
	padding: 2rem 0;
}

.flex-grid.filter {
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
}

.flex-grid.tile {
	column-gap: 5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 430px));
	justify-content: flex-start;
}

.filter-buttons {
	column-gap: 5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	justify-items: center;
}

.flex-div.filter > div.input {
	flex: 0 0 440px;
}

.popup-view > div.input {
	flex: 0 1 100%;
}

.flex-div-col {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	width: 100%;
}

.flex-div-col > .panel {
	flex: 0 0 auto;
	max-height: 400px;
}

.flex-div > .panel {
	width: 100%;
}

.home-info {
	background-color: var(--dstan);
	border-radius: 30px;
	border: 5px groove var(--dsnavy);
	display: flex;
	flex: 1 0 46%;
	height: 300px;
	justify-content: center;
}

.home-info > p {
	align-self: flex-end;
	color: var(--dsnavy);
	font-size: 1.8rem;
	text-align: center;
}

.dashboard {
	display: flex;
	flex-direction: column;
}

.dashboard-header {
	align-items: center;
	border: 1px solid var(--dsnavy);
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.avatar {
	display: flex;
	flex: 1 0 140px;
	justify-content: center;
}

#chartpanel {
	height: 100%;
	margin: auto;
	position: relative;
	width: 100%;
}

.dashboard-info {
	align-items: center;
	display: flex;
	flex-direction: column;
	flex: 1000 1 auto;
}

.dashboard-info-item {
	font-size: 3rem;
	text-align: center;
}

.dashboard-description-item {
	font-size: 2rem;
	text-align: center;
	width: 100%;
}

.dashboard-tiles {
	font-size: 3rem;
	margin-bottom: 2rem;
}

.dashboard-tiles > a, .panel {
	border: 1px ridge var(--dsnavy);
	display: flex;
	flex-direction: column;
}

.panel-header {
	background-color: var(--dsnavy);
	color: var(--dstan);
	font-size: 2.5rem;
	margin-bottom: 1rem;
	position: relative;
	text-align: center;
}

.panel-action {
	color: var(--dstan);
	font-size: 1.6rem;
	position: absolute;
	right: 5px;
	text-decoration: underline;
	top: calc(40% - .8rem);
}

.panel-info {
	color: var(--dsnavy);
	max-height: 320px;
	overflow: hidden;
	padding: 1rem 0;
	text-align: center;
}

.panel-info > p {
	width: 100%;
}

.panel-form {
	display: flex;
	flex-direction: column;
	padding: 0 1rem;
	row-gap: 2rem;
	text-align: left;
}

.panel-table {
	height: 100%;
	overflow: scroll;
	padding: 0 1rem;
	text-align: left;
}

.panel-table > .nowrap-table {
	font-size: 1.5rem;
	min-width: 650px;
}

.nowrap-table {
	border-collapse: collapse;
	min-width: 500px;
	table-layout: fixed;
}

table.flex-row-table {
	table-layout: fixed;
	width: max(1000px, 100%);
}

.list-table {
	border-collapse: collapse;
	overflow-x: scroll;
	width: 100%;
}

.list-table > table {
	min-width: 1000px;
}

.nowrap-table tr {
	border-bottom: .1rem solid #e1e1e1;
}

.nowrap-table td, .nowrap-table th {
	border-bottom: none;
	vertical-align: middle;
}

.nowrap-table > thead {
	background-color: #f5f7fa;
	left: 0;
	position: sticky;
	top: 0;
	z-index: 10;
}

.table-icon-cell {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
}

.edit-icon, .view-icon, .run-icon, .delete-icon {
	color: var(--dsnavy);
	cursor: pointer;
	font-size: 2.2rem;
	padding: 2px;
	transition: background-color .2s ease-in;
}

.edit-icon:hover, .view-icon:hover, .run-icon:hover, .delete-icon:hover {
	background-color: var(--dstan);
	transition: background-color .2s ease-in;
}

.delete-icon {
	color: var(--dsburnt);
	font-weight: bold;
}

#user-details {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2rem;
}

#view-details {
	column-gap: 1rem;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	row-gap: 1rem;
}

.field {
	box-shadow: 0 2px var(--dstan);
	flex: 1 0 48%;
	min-width: 12rem;
}

.field-value {
	color: black;
	font-size: 1.8rem;
	min-height: 26px;
}

.half, .third, .full {
	box-shadow: unset;
	flex: 1 0 100%;
}

.view-property-icons-div {
	align-self: center;
	width: min(400px, 100%);
}

/*Button formatting*/
.button, button, input[type="button"], input[type="reset"], input[type="submit"] {
	background-color: var(--dsnavy);
	border-color: var(--dsnavy);
	color: var(--dstan);
	transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}

.button:focus, .button:hover, button:focus, button:hover, input[type='button']:focus, input[type='button']:hover, input[type='reset']:focus, input[type='reset']:hover, input[type='submit']:focus, input[type='submit']:hover, .button[disabled]:focus, .button[disabled]:hover, button[disabled]:focus, button[disabled]:hover, input[type='button'][disabled]:focus, input[type='button'][disabled]:hover, input[type='reset'][disabled]:focus, input[type='reset'][disabled]:hover, input[type='submit'][disabled]:focus, input[type='submit'][disabled]:hover {
	background-color: var(--dstan);
	border-color: var(--dstan);
	color: var(--dsnavy);
	transition: background-color .2s ease-in, border-color .2s ease-in, color .2s ease-in;
}

input[type='checkbox'], input[type='radio'] {
	margin-right: 1rem;
}

/*Styling for index pages that use tiles*/
.tile-main-div {
	align-items: flex-start;
	border: 5px solid;
	box-shadow: 1rem 1rem var(--dsnavy);
	cursor: pointer;
	display: flex;
	flex: 0 1 440px;
	flex-flow: row wrap;
	justify-content: center;
	margin: 0 1rem 3rem 1rem;
	row-gap: 0;
	width: 100%;
}

.tile-main-div.listed, .tile-main-div.active {
	border-color: green;
}

.tile-main-div.inactive {
	border-color: blue;
}

.tile-main-div.draft, .tile-main-div.project {
	border-color: var(--dsorange);
}

.tile-main-div.sold, .tile-main-div.withdrawn {
	border-color: red;
}

.tile-heading, .tile-footer-text {
	color: white;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 2.4em;
	padding: 0 1em;
	text-align: center;
	width: 100%;
}

.tile-footer {
	align-self: flex-end;
	width: 100%;
}

.tile-heading {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	text-align: left;
}

.tile-heading.listed, .tile-heading.active, .tile-footer-text.listed, .tile-footer-text.active {
	background-color: green;
}

.tile-heading.inactive, .tile-footer-text.inactive {
	background-color: blue;
}

.tile-heading.draft, .tile-footer-text.draft {
	background-color: var(--dsorange);
}

.tile-heading.sold, .tile-heading.withdrawn, .tile-footer-text.withdrawn, .tile-footer-text.sold, .status-bar.sold {
	background-color: red;
}

.tile-photo-div {
	aspect-ratio: 1.33;
	width: 100%;
}

img.tile-photo {
	width: 100%;
}

.tile-icon-div, .list-icon-div {
	column-gap: 1rem;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(70px, 100%), .5fr));
	justify-content: center;
	width: 100%;
}

.list-icon-div {
	max-width: 500px;
}

.list-icon {
	display: inline-flex;
	flex-grow: 1;
	height: 25px;
	width: 90px;
}

img.list-photo {
	width: 80px;
}

span.list-address {
	display: block;
	font-weight: 600;
	padding-bottom: 1rem;
}

.lead-header {
	display: flex;
	flex-wrap: wrap;
	height: 300px;
	position: relative;
}

.tile-icon {
	justify-items: center;
	text-align: center;
	width: 100%;
}

.narrow {
	width: 95px;
}

.block-header, .block-name {
	align-self: flex-end;
	flex: 1 0 100%;
	font-weight: bold;
	margin-top: 2rem;
	text-align: center;
}

.dashboard-action-panel {
	column-gap: 1rem;
	display: flex;
	flex: 1 1 auto;
	flex-flow: row wrap;
	justify-content: center;
	margin-bottom: 3rem;
	position: sticky;
	row-gap: 1rem;
	top: 151px;
	width: 100%;
	z-index: 2000;
}

.dashboard-actions {
	column-gap: 1rem;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	position: absolute;
	row-gap: .5rem;
	width: 100%;
}

.dashboard-action-label, .dashboard-action-list {
	flex: 1 1 100%;
	text-align: right;
}

.dashboard-action-list {
	flex: 0 1 200px;
	text-align: left;
}

.dashboard-actions-left, .dashboard-actions-right {
	display: flex;
	flex: 1 1 auto;
	flex-flow: row wrap;
	justify-content: flex-start;
}

.dashboard-actions-right {
	justify-content: flex-end;
}

.dashboard-actions-title {
	font-size: 2rem;
	text-align: center;
}

.list-container {
	background-color: var(--dsnavy);
	color: var(--dstan);
	overflow: hidden;
}

.list-item {
	flex: 0 1 100%;
	display: flex;
	justify-content: center;
}

.list-item > a {
	color: inherit;
	padding-left: 1rem;
	text-align: center;
	width: 100%;
}

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

.toggle-list {
	align-items: center;
	background-color: var(--dsnavy);
	display: flex;
	flex-flow: row wrap;
	max-height: 0;
	overflow: hidden;
	padding: 0;
	row-gap: 1rem;
	transition: max-height .4s ease-in;
	width: 100%;
	z-index: 1500;
}

.list-toggle:checked ~ .toggle-list {
	max-height: 25rem;
	transition: max-height .4s ease-in;
}

#map {
	height: 700px;
	/* The height is 400 pixels */
	width: 100%;
}

/* HTML marker styles */
.address-tag {
	background-color: var(--dsnavy);
	border-radius: 8px;
	color: var(--dsorange);
	padding: 2px 6px;
	position: relative;
}

.address-tag::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translate(-50%, 0);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid var(--dsnavy);
}

.map-marker-img {
	height: 35px;
	width: 35px;
}

.map-photo {
	display: flex;
	max-width: 100%;
	justify-content: center;
}

.map-photo img {
	max-width: 200px;
}

.map-address {
	color: var(--dsnavy);
	font-size: 2rem;
	font-weight: 600;
	padding-bottom: 1rem;
}

.map-price {
	color: var(--dsnavy);
	display: flex;
	font-size: 2rem;
	font-weight: 600;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.map-icon-div {
	color: var(--dsnavy);
	display: flex;
	flex-flow: row wrap;
	margin-top: 2rem;
	max-width: 200px;
}

.map-icon-div > .list-icon > span {
	line-height: 25px;
}

/**FAQ Styling**/
.faq-section {
	margin-top: 1.5rem;
}

.faq-item {
	margin-bottom: 1rem;
	border: solid;
}

.faq-heading {
	background: var(--dstan);
	cursor: pointer;
	padding: 0 1rem;
}

.faq-text {
	background-color: white;
	padding: 0 1rem;
}

/*CSS for Pricing page*/
.pricing-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-top: 5rem;
}

.pricing-div {
	background-color: var(--dsnavy);
	border: 5px var(--dsorange) ridge;
	border-radius: 5rem;
	box-shadow: 1rem 1.5rem var(--dstan);
	flex-grow: 1;
	margin: 1rem;
	max-width: 450px;
	min-width: 320px;
	padding-top: 1rem;
	text-align: center;
}

.pricing-header {
	font-size: 6rem;
	color: white;
	height: 7rem;
	line-height: 6rem;
}

.pricing {
	font-size: 3rem;
}

.pricing-inclusions {
	background-color: white;
	padding: 2rem 0;
}

.pricing-block {
	color: white;
	margin: 1.5rem 0;
}

@media only screen and (max-width: 247px) {
	nav {
		top: 151px;
	}
	
	nav > div > a {
		flex: 0 0 auto;
	}
}

@media only screen and (min-width: 248px) {
	nav {
		top: 125px;
		flex-grow: 1;
	}
	
	.dashboard-action-panel {
		top: 125px;
	}
}

@media only screen and (min-width: 285px) {
	nav > div > a {
		flex-grow: 0;
	}
}

@media only screen and (min-width: 390px) {
	header {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 0;
	}
	
	.header-left {
		flex-direction: column;
		flex: 1 0 auto;
		padding-top: 1rem;
	}
	
	.logo {
		flex: 1 0 auto;
	}
	
	nav {
		top: 122px;
		z-index: 5000;
	}
	
	main {
		flex: 1 0 calc(100vh - 20.7rem);
	}
	
	.dashboard-header {
		flex-direction: row;
		justify-content: space-between;
	}
	
	.dashboard-action-panel {
		top: 122px;
	}
	
	.company-details {
		flex: 2 0 auto;
	}
}

@media only screen and (min-width: 505px) {
	.dashboard-actions {
		justify-content: space-between;
	}
}

@media only screen and (min-width: 650px) {
	header {
		flex: 1 0 auto;
		justify-content: space-around;
	}
	
	footer {
		flex-direction: row;
		flex: 1 0 auto;
		justify-content: space-around;
	}
	
	.header-left {
		align-items: center;
		flex-direction: row;
		flex: 1 0 auto;
		gap: 0;
		padding: 0;
	}
	
	.footer-left {
		flex-direction: column;
		flex: 1 0 33%;
	}
	
	.logo {
		flex: 2 0 auto;
		justify-content: flex-end;
	}
	
	nav {
		top: 90px;
	}
	
	.dashboard-action-panel {
		top: 90px;
	}
	
	.third, .half {
		flex: 1 0 44%;
	}
	
	.half {
		min-width: 450px;
	}
	
	.popup-view > div.input {
		-ms-flex: 0 1 32%;
		flex: 0 0 44%;
		min-width: 220px;
	}
	
	.status-bar {
		font-size: 3rem;
	}
}

@media only screen and (min-width: 715px) {
	.dashboard-actions {
		justify-content: flex-end;
	}
}

@media only screen and (min-width: 850px) {
	.third {
		flex: 1 0 32%;
	}
	
	.half {
		flex: 1 0 49%;
		max-width: 100%;
	}
	
	.popup-view > div.input {
		-ms-flex: 0 1 32%;
		flex: 0 0 32%;
		min-width: 220px;
	}
	
	.panel.row-table {
		flex: 1 0 49%;
	}
}

@media only screen and (max-width: 1024px) {
	#view-details {
		justify-content: center;
	}
}

.flex-start {
	justify-content: flex-start;
	align-content: flex-start;
}

.flex-spaced {
	padding: 0 2rem;
}

.nogrow {
	flex-grow: 0;
}

.section-title {
	border-bottom: 1px solid var(--dsnavy);
	flex-basis: 100%;
	flex-shrink: 0;
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 2rem;
}