/* ---- Universal ------------------------------------- */

body {

}

/* ---- Header ------------------------------------- */

/*
.container100.header ul.navbar li.breakdown a {
	color: hsl(204, 16%, 34%);
}

.container100.header ul.navbar li.breakdown a .link:after {
	width: 100%;
}
*/

/* ---- Hero ------------------------------------- */

body.landing .container100.hero,
body.calculating .container100.hero,
body.transfer .container100.hero {
	padding: 80px 0 340px 0;
}

body.landing .container100.hero .illustration,
body.calculating .container100.hero .illustration,
body.transfer .container100.hero .illustration {
	height: 510px;
}

body.landing .container100.hero .illustration .fill.one,
body.calculating .container100.hero .illustration .fill.one,
body.transfer .container100.hero .illustration .fill.one {
	background-color: #3c4d5f;
	height: 8.7%;
	left: 0;
	width: 100%;
}

body.landing .container100.hero .illustration .feature,
body.calculating .container100.hero .illustration .feature,
body.transfer .container100.hero .illustration .feature {
	background-image: url(../img/breakdown/hero_breakdown.svg);
}

/* ---- Why PYF ------------------------------------- */

.container100.why_pyf .knowledge_box {
	background-color: hsl(204, 14%, 32%);
}

/* ---- Quote ------------------------------------- */

.container100.quote .form_section .questions .question.dob .answer .select {
	margin: 0 0 0 10px;
}

.container100.quote .form_section .questions .question.dob .answer .select:nth-of-type(1) {
	margin: 0;
}

.container100.quote .form_section .questions .question.CoverExtras li.misfuelling,
.container100.quote .form_section .questions .question.CoverExtras li.out_of_fuel {
	display: none;
}

#id_d-CoverExtras .text {
	flex-direction: column;
    align-items: flex-start;
}

#id_d-CoverExtras .text .sub {
    font-size: 12px;
}

.container100.quote .form_section .questions .question.CoverExtras .answer ul li label,
.container100.quote .form_section .questions .question.marketing .answer ul li label,
.container100.quote .form_section .questions .question.tc_agreed .answer .checkbox label {
	padding: 14px 50px 14px 18px;
}

.container100.quote .form_section .questions .question.CoverExtras .answer ul li label span.illustration,
.container100.quote .form_section .questions .question.marketing .answer ul li label span.illustration,
.container100.quote .form_section .questions .question.tc_agreed .answer .checkbox label span.illustration {
	border: 2px solid #5b697c;
	border-radius: 2px;
	color: #fff;
	float: right;
	font-family: foundation-icons;
	font-size: 26px;
	height: 20px;
	position: absolute;
		top: calc(50% - 10px);
		right: 18px;
	width: 20px;
}

.container100.quote .form_section .questions .question.CoverExtras .answer ul li input:checked + label span.illustration,
.container100.quote .form_section .questions .question.marketing .answer ul li input:checked + label span.illustration,
.container100.quote .form_section .questions .question.tc_agreed .answer .checkbox input:checked + label span.illustration {
	border-color: #fff;
}

.container100.quote .form_section .questions .question.CoverExtras .answer ul li input:checked + label span.illustration:before,
.container100.quote .form_section .questions .question.marketing .answer ul li input:checked + label span.illustration:before,
.container100.quote .form_section .questions .question.tc_agreed .answer .checkbox input:checked + label span.illustration:before {
	content: "\f126";
	position: absolute;
		top: -2px;
		left: 2px;
}

.container100.quote .form_section .questions .question.CoverExtras .answer ul li label span.label sup,
.container100.quote .form_section .questions .question.marketing .answer ul li label span.label sup,
.container100.quote .form_section .questions .question.tc_agreed .answer .checkbox label span.label sup {
	font-size: inherit;
	vertical-align: baseline;
}


/* ---- Vehicle lookup --------------------------- */

.form_section.vehicle .questions .question_group{
	grid-column: span 2;
}

/* Initial data-view */
.question_group.vehicle_lookup[data-view="initial"] .question.type,
.question_group.vehicle_lookup[data-view="initial"] .question.age,
.question_group.vehicle_lookup[data-view="initial"] .question.make,
.question_group.vehicle_lookup[data-view="initial"] .question.model,
.question_group.vehicle_lookup[data-view="initial"] .question.model_year,
.question_group.vehicle_lookup[data-view="initial"] .question.registered_date,
.question_group.vehicle_lookup[data-view="initial"] .question.colour,
.question_group.vehicle_lookup[data-view="initial"] .question.engine_cc,
.question_group.vehicle_lookup[data-view="initial"] .question.fuel,
.question_group.vehicle_lookup[data-view="initial"] .question.version,
.question_group.vehicle_lookup[data-view="initial"] .question.doors,
.question_group.vehicle_lookup[data-view="initial"] .question.transmission,
.question_group.vehicle_lookup[data-view="initial"] .question.text,
.question_group.vehicle_lookup[data-view="initial"] .question.summary,
.question_group.vehicle_lookup[data-view="initial"] .btn.back-to-reg {
	display: none;
}

/* searching data-view */
.question_group.vehicle_lookup[data-view="searching"] .question.type,
.question_group.vehicle_lookup[data-view="searching"] .question.age,
.question_group.vehicle_lookup[data-view="searching"] .question.make,
.question_group.vehicle_lookup[data-view="searching"] .question.model,
.question_group.vehicle_lookup[data-view="searching"] .question.model_year,
.question_group.vehicle_lookup[data-view="searching"] .question.registered_date,
.question_group.vehicle_lookup[data-view="searching"] .question.colour,
.question_group.vehicle_lookup[data-view="searching"] .question.engine_cc,
.question_group.vehicle_lookup[data-view="searching"] .question.fuel,
.question_group.vehicle_lookup[data-view="searching"] .question.version,
.question_group.vehicle_lookup[data-view="searching"] .question.doors,
.question_group.vehicle_lookup[data-view="searching"] .question.transmission,
.question_group.vehicle_lookup[data-view="searching"] .question.text,
.question_group.vehicle_lookup[data-view="searching"] .question.summary,
.question_group.vehicle_lookup[data-view="searching"] .btn.back-to-reg {
	display: none;
}

/* Found data view */
.question_group.vehicle_lookup[data-view="found"] .question.registration,
.question_group.vehicle_lookup[data-view="found"] .question.type,
.question_group.vehicle_lookup[data-view="found"] .question.age,
.question_group.vehicle_lookup[data-view="found"] .question.make,
.question_group.vehicle_lookup[data-view="found"] .question.model,
.question_group.vehicle_lookup[data-view="found"] .question.model_year,
.question_group.vehicle_lookup[data-view="found"] .question.registered_date,
.question_group.vehicle_lookup[data-view="found"] .question.colour,
.question_group.vehicle_lookup[data-view="found"] .question.engine_cc,
.question_group.vehicle_lookup[data-view="found"] .question.fuel,
.question_group.vehicle_lookup[data-view="found"] .question.version,
.question_group.vehicle_lookup[data-view="found"] .question.doors,
.question_group.vehicle_lookup[data-view="found"] .question.transmission,
.question_group.vehicle_lookup[data-view="found"] .question.text,
.question_group.vehicle_lookup[data-view="found"] .btn.lookup-reg,
.question_group.vehicle_lookup[data-view="found"] .btn.back-to-reg {
	display: none;
}

/* Not-Found data view */

.question_group.vehicle_lookup[data-view="not-found"] .btn.manual-entry,
.question_group.vehicle_lookup[data-view="not-found"] .question.model_year,
.question_group.vehicle_lookup[data-view="not-found"] .question.registered_date,
.question_group.vehicle_lookup[data-view="not-found"] .question.colour,
.question_group.vehicle_lookup[data-view="not-found"] .question.engine_cc,
.question_group.vehicle_lookup[data-view="not-found"] .question.fuel,
.question_group.vehicle_lookup[data-view="not-found"] .question.version,
.question_group.vehicle_lookup[data-view="not-found"] .question.doors,
.question_group.vehicle_lookup[data-view="not-found"] .question.transmission,
.question_group.vehicle_lookup[data-view="not-found"] .question.text,
.question_group.vehicle_lookup[data-view="not-found"] .btn.lookup-reg {
	display: none;
}

.question_group .question {
    margin-bottom: 38px;
}


.container100.quote .form_section .question_group.vehicle_lookup[data-view="found"] .question.summary {
	display: block;
}

.form_section.vehicle .btn {
	margin-top: 10px;
}

.form_section.vehicle .question.registration .answer .reg_error {
	clear: both;
	padding-top: 10px;
}

.ui-autocomplete {
	font-family: 'Montserrat', sans-serif;
	border-radius: 8px;
	font-size: 16px;
	background-color: white;
}

.ui-menu-item {
	background-color: white;
}

.ui-menu-item-wrapper {
	padding: 5px;
}

/* ---- Quote - Address ---- COPY THIS SECTION TO EACH PRODUCT ---- EACH PRODUCT HAS DIFFERENT NAMES FOR HOUSE/STREET/ETC ---- */

.container100.quote .form_section .questions .question.house,
.container100.quote .form_section .questions .question.street_1,
.container100.quote .form_section .questions .question.street_2,
.container100.quote .form_section .questions .question.city,
.container100.quote .form_section .questions .question.picker,
.container100.quote .form_section .questions .question.summary {
	display: none;
}

.container100.quote .form_section .questions .address.not-found .question.postcode .answer button.find-address {
	display: none;
}

.container100.quote .form_section .questions .address.not-found .question.house,
.container100.quote .form_section .questions .address.not-found .question.street_1,
.container100.quote .form_section .questions .address.not-found .question.street_2,
.container100.quote .form_section .questions .address.not-found .question.city,
.container100.quote .form_section .questions .address.not-found .question.postcode .answer button.back-to-postcode-search {
	display: block;
}

.container100.quote .form_section .questions .address.found .question.house,
.container100.quote .form_section .questions .address.found .question.postcode {
	display: none;
}

.container100.quote .form_section .questions .address.found .question.picker {
	display: block;
}

.container100.quote .form_section .questions .address.completed .question.house,
.container100.quote .form_section .questions .address.completed .question.postcode {
	display: none;
}

.container100.quote .form_section .questions .address.completed .question.summary {
	display: block;
}

.container100.quote .form_section .questions .address .question.postcode button.go-to-manual-input {
	background-color: transparent;
	border: 0;
	color: #449ad5;
	margin-top: 10px;
	padding: 0;
	text-decoration: underline;
}

/* ---- Calculating Page ------------------------- */

.progress_popup.show {
	width: 100%;
    opacity: 1;
    visibility: visible;
    height: 100%;
    display: flex;
    flex-direction: column;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.progress_popup .progress_bar, .progress_popup .providers {
	width: 50%;
}

/* ---- Results ------------------------------------- */
body.eu-cover #CoverType_row {
	display: none;
}

#id_CoverExtras .text {
	flex-direction: column;
    align-items: flex-start;
}

#id_CoverExtras .text .sub {
    font-size: 12px;
}

.container100.results .filters .filter.level {
	width: 37%;
}

.container100.results .filters .filter.type {
	width: calc(21% - 20px);
}

.container100.results .filters .filter.add {
	width: calc(42% - 20px);
}

.container100.results .filters .filter .content ul li label {
	letter-spacing: -0.7px;
}

.container100.results .filters .filter.add .content ul li label span.illustration {
	border: 2px solid #5b697c;
	border-radius: 2px;
	color: #fff;
	float: right;
	font-family: foundation-icons;
	font-size: 26px;
	height: 20px;
	position: absolute;
		top: calc(50% - 10px);
		right: 18px;
	width: 20px;
}

.container100.results .filters .filter.add .content ul li input:checked + label span.illustration {
	border-color: #fff;
}

.container100.results .filters .filter.add .content ul li input:checked + label span.illustration:before {
	content: "\f126";
	position: absolute;
		top: -2px;
		left: 2px;
}

.container100.results .filters .filter.level .content ul li,
.container100.results .filters .filter.add .content ul li {
	width: calc(50% - 6px);
}

@media (min-width: 1200px) {
	.results_table .headers, .result .card, .result .card.desktop {
		grid-template-columns: 200px 2fr 3fr 2fr 200px 170px;
	}
	.box .mobile_name, .box[data-type="provider"] .product_name, .box[data-type="provider"] .defaqto_product_rating {
        display: none;
    }
	.group.bools, .result .group.bools {
        grid-template-columns: repeat(5, minmax(0, 1fr));
		grid-column: span 2;
    }
}

@media (max-width: 1200px) {
	.results_table .headers, .results_table .headers.sticky, .results_table .headers.sticky.active {
		display: none;
	}
	.container100.results .sort_by {
		display: grid;
	}
	.result .group.prices {
		background-color: hsl(-500deg 100% 96%);
	}
	.result .group.main, .result .group.prices {
        grid-column: span 1;
    }
	.result .card, .result .card.desktop {
		grid-template-columns: repeat(2, minmax(0, 1fr));
    }
	.box .mobile_name, .box[data-type="provider"] .product_name {
        display: initial;
    }
}

@media (max-width: 450px) {
	.result[data-product-names="true"] .box[data-type="provider"] {
		display: flex;
		grid-column: span 2;
		align-items: center;
	}
}

.results_table .headers .header {
	justify-content: initial;
}

.results_table .headers .header.excess .center, .results_table .headers .header.insurer .center {
	justify-content: center;
}

.results_table .headers .group.bools .header .center {
	font-size: small;
}

.group.main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.group.texts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.result .group.prices {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 570px) {
	.group.bools, .result .group.bools {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.box.max_callouts {
	align-content: initial;
    flex-wrap: wrap;
}

.box.max_callouts .text {
	flex-direction: column;
}

.results_table .headers .header.view_details {
	justify-content: center;
}

.box.view_details {
	align-content: center;
	flex-wrap: wrap;
}


.box .bool {
	align-items: initial;
}

.box[data-type="more"] button.btn.red_rounded {
	width: 150px;
}

/* ---- Transfer ------------------------------------ */

body#transfer .debug {
	background-color: #fff;
	box-shadow: 5px 0 10px rgba(0, 0, 0, .5);
	max-width: 50%;
	padding: 20px 30px;
	position: fixed;
	bottom: 0;
	left: 0;
	top: 0;
	overflow-y: scroll;
	z-index: 4;
}

body#transfer .debug table {
	border-collapse: collapse;
	margin: 20px 0;
}

body#transfer .debug td:first-child {
	padding-right: 5px;
}

body#transfer .debug input {
	background-color: inherit;
	border: 1px solid #a9a9a9;
	padding: .3em .5em;
	width: 24em;
}

body#transfer .debug tr + tr input {
	border-top-width: 0;
}

body#transfer .debug .action {
	text-align: center;
}

body#transfer .debug .action button {
	display: block;
	margin: 0 auto;
	padding: .5em 4em;
}

body#transfer .debug .action a {
	display: inline-block;
	margin: 15px 10px 0;
}

body#transfer .progress_popup {
	display: flex;
	flex-direction: column;
}

body#transfer .progress_bar {
	width: 100%
}


body#transfer .provider_logo {
	align-self: center;
	margin: 16px;
}
/* ---- Outdated quote popup ---------------------------------------------- */

.outdated_quote:not(.show) {
	display: none;
}

.outdated_quote .modal {
	position: fixed;
	width: calc(100% - 40px);
	max-width: 500px;
	padding: 20px;
	top: 50%;
	left: 50%;
	transform: translate(-50%);
	border-radius: 10px;
	background: #fff;
	color: #000;
	z-index: 101;
}

.outdated_quote .modal .close {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	transform: translate(50%, -50%);
	background: #000;
	cursor: pointer;
}

.outdated_quote .modal .close:before,
.outdated_quote .modal .close:after {
	display: block;
	position: absolute;
	left: 5px;
	top: 13px;
	height: 3px;
	width: 20px;
	background: #fff;
	transform: rotate(45deg);
	content: '';
}

.outdated_quote .modal .close:after {
	transform: rotate(-45deg);
}


.container100.more_info .right .box .section.purchase .grey .reoccuring {
    color: #5b697c;
    float: left;
    font-family: DIN_Regular, sans-serif;
    font-size: 16px;
    line-height: 22px;
    padding: 10px 0 0 0;
    width: 100%;
}

@media (min-width: 400px) {
    .sliding_bar.more_info .segment.blue .prices {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 570px) {
    .sliding_bar.more_info .segment.blue .product {
        grid-template-columns: 1fr 1fr;
    }
}