@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;700&display=swap");

/* ======================================================================
   Holiday Angel theme for the quote engine (holiday.brokersure.com)
   Override layer for /content/stylesheet.css. Tokens taken from
   holidayangel.com (navy #0D164F, pink #E9006A, 14px radius, Outfit + DM Sans)
   NOTE: base stylesheet sets html{font-size:62.5%} so 1rem = 10px here.
   ====================================================================== */

:root {
	/* Brand tokens */
	--ha-navy: #0D164F;
	--ha-navy-soft: #213067;
	--ha-navy-tint: #F0F4FB;
	--ha-pink: #E9006A;
	--ha-pink-deep: #C60055;
	--ha-pink-tint: #FFEDF1;
	--ha-ink-60: #60697B;
	--ha-border: #DFE3EB;
	--ha-radius: 14px;
	--ha-radius-lg: 24px;
	--ha-shadow-card: 0 1px 2px rgba(13, 22, 79, 0.06), 0 12px 32px -18px rgba(13, 22, 79, 0.22);
	--ha-shadow-lift: 0 24px 60px -28px rgba(13, 22, 79, 0.4);
	--ha-font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
	--ha-font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;

	/* Variables used throughout the base stylesheet */
	--first: var(--ha-pink);       /* selected options, primary buttons, step dots */
	--second: var(--ha-navy);      /* borders / accents */
	--third: var(--ha-navy);       /* hover states, filter bar, premium cell */
}

/* ---------- Typography ---------- */
html, body {
	font-family: var(--ha-font-body);
	color: var(--ha-navy);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.nH-H1, .nH-H2 {
	font-family: var(--ha-font-display);
	color: var(--ha-navy);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

h1 { font-size: 3.6rem; }
h2 { font-size: 2.8rem; }

a { color: var(--ha-navy); text-underline-offset: 4px; }
a:hover { color: var(--ha-pink); }

.container { max-width: 1250px; }

/* ---------- Header (white bar, logo left, phone right) ---------- */
header {
	background: #fff;
	border-bottom: 1px solid var(--ha-border);
}

header .row {
	max-width: 1280px;
	margin: 0 auto;
	padding: 8px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}

header .row:after { display: none; }

header .logo,
header .nine.columns,
header .three.columns {
	width: auto;
	float: none;
	margin: 0;
}

header .logo img {
	display: block;
	height: 60px;
	width: auto;
	max-width: 260px !important;
}

header .three.columns {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

.phone {
	font-family: var(--ha-font-display);
	font-weight: 700;
	font-size: 1.8rem;
	color: var(--ha-navy);
	padding: 0;
	float: none;
	width: auto;
	display: block;
	line-height: 1.2;
	white-space: nowrap;
}

.phone:before {
	content: "Prefer to talk?";
	display: block;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ha-pink);
}

.opening {
	float: none;
	padding: 0;
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--ha-ink-60);
}

/* ---------- Hero band ---------- */
/* Image copied from holidayangel.com. Host your own copy if the filename changes on their next deploy. */
.header {
	background:
		linear-gradient(100deg, rgba(13, 22, 79, 0.88) 0%, rgba(13, 22, 79, 0.62) 42%, rgba(13, 22, 79, 0.08) 78%, transparent 100%),
		url(https://holidayangel.com/assets/hero-coast-4kVLDBk4.jpg) 70% center / cover no-repeat;
	min-height: 380px;
}

/* ---------- Main quote card ---------- */
.quoteWrapper,
.container.content.quoteWrapper {
	margin-top: -200px;
	padding: 16px 48px 24px 48px;
	border-radius: var(--ha-radius-lg);
	background: #fff;
	box-shadow: var(--ha-shadow-card);
	outline: 1px solid var(--ha-border);
	position: relative;
	z-index: 2;
}

#step1 > h1,
.quoteWrapper form > h1 {
	margin-top: 1rem;
}

/* ---------- Step progress ---------- */
.quoteNav li p {
	font-family: var(--ha-font-display);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--ha-ink-60);
}

.quoteNav li.currentActive p,
.quoteNav li.pastActive p {
	color: var(--ha-pink);
}

.quoteNav li span { display:none; }
.quoteNav li span:first-of-type {display:none;}


.quoteNav > div { display:none; }

.quoteNav small {
	border-radius: var(--ha-radius);
	border-top-color: var(--ha-pink);
	box-shadow: var(--ha-shadow-lift);
	color: var(--ha-navy);
	font-size: 1.3rem;
}

/* ---------- Questions ---------- */
#step1 .questionBox {
	border-bottom: 1px solid var(--ha-border);
	padding: 3rem 0;
}

#step1 .questionBox:last-of-type { border-bottom: none; }

#step1 .questionBox .coverInfo {
	width: 100%;
	min-height: 35px;
	margin-bottom: 20px;
}

#step1 .questionBox .coverChoice { width: 100%; }

.questionBox .coverInfo strong {
	font-family: var(--ha-font-display);
	font-size: 2rem;
	font-weight: 600;
	color: var(--ha-navy);
	letter-spacing: -0.01em;
}

.questionBox .coverInfo p { color: var(--ha-ink-60); }

/* Help "?" button */
.newInfo {
	background: var(--ha-pink-tint) !important;
	color: var(--ha-pink);
	border-radius: 50%;
	width: 2.6rem;
	height: 2.6rem;
	line-height: 2.6rem;
	vertical-align: middle;
	transition: background-color 0.2s, color 0.2s;
}

.newInfo:hover {
	background: var(--ha-pink) !important;
	color: #fff;
}

/* Help panel */
.tooltip {
	background-color: var(--ha-navy);
	border-radius: var(--ha-radius);
	box-shadow: var(--ha-shadow-lift);
	font-size: 1.4rem;
	line-height: 1.6;
}

.questionBox .tooltip p { color: rgba(255, 255, 255, 0.85); }
.questionBox .tooltip strong,
.tooltip .nH-Sub {
	color: #fff;
	font-family: var(--ha-font-display);
	font-size: 1.5rem;
	font-weight: 600;
}

/* ---------- Option tiles (radio / checkbox buttons) ---------- */
.checkbox,
.datetoCheckbox,
#btnStartDateOverride,
#btnReturnDateOverride {
	font-family: var(--ha-font-display);
	font-weight: 600;
	font-size: 1.6rem;
	color: var(--ha-navy);
	background-color: #fff;
	border: 1px solid var(--ha-border);
	border-radius: var(--ha-radius);
	box-shadow: 0 1px 2px rgba(13, 22, 79, 0.06);
	overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.checkbox label,
.datetoCheckbox label,
#btnStartDateOverride label,
#btnReturnDateOverride label {
	border-radius: inherit;
	transition: background-color 0.2s, color 0.2s;
}

/* Icons: base SVGs are white; tint them navy until selected */
#btnReturnDateOverride label:before,
#btnStartDateOverride label:before,
.checkbox label:before,
.datetoCheckbox label:before {
	filter: brightness(0) invert(8%) sepia(43%) saturate(4500%) hue-rotate(228deg) brightness(92%) contrast(105%);
	opacity: 0.85;
}

.checkbox:hover,
.datetoCheckbox:hover,
#btnStartDateOverride:hover,
#btnReturnDateOverride:hover {
	background-color: var(--ha-pink-tint);
	border: 1px solid var(--ha-pink);
	color: var(--ha-navy);
	box-shadow: var(--ha-shadow-card);
}

.checkbox:hover label,
#btnStartDateOverride:hover label,
#btnReturnDateOverride:hover label {
	background-color: var(--ha-pink-tint);
	color: var(--ha-navy);
}

.datetoCheckbox:hover label,
.dateto:hover + * + label {
	background: var(--ha-pink-tint) !important;
	color: var(--ha-navy);
}

/* Keep the selected end date pink even while hovered */
#divExpireDates .dateto:checked + input + label,
#divExpireDates .dateto:checked:hover + input + label {
	background: var(--ha-pink) !important;
	color: #fff !important;
}

.checkbox input[type="radio"]:checked + label,
.checkbox input[type="checkbox"]:checked + label,
#divExpireDates input[type="checkbox"]:checked + input + label,
#divStartDates .checkbox input[type="checkbox"]:checked + input + label,
#divAdditional input[type=checkbox]:checked + input + label,
#StartDateOverride.datepicker-active + .date-label,
#EndDateOverride.datepicker-active + .date-label {
	background: var(--ha-pink);
	color: #fff;
}

/* Selected tiles: icon back to white (presets, end dates and manual "Select Date") */
.checkbox input[type="radio"]:checked + label:before,
.checkbox input[type="checkbox"]:checked + label:before,
#divStartDates .checkbox input[type="checkbox"]:checked + input + label:before,
#divExpireDates input[type="checkbox"]:checked + input + label:before,
#StartDateOverride.datepicker-active + .date-label:before,
#EndDateOverride.datepicker-active + .date-label:before {
	filter: none;
	opacity: 1;
}

.checkbox:has(input:checked) { border-color: var(--ha-pink); }

/* Keyboard focus */
.checkbox:has(input:focus-visible) {
	outline: 2px solid var(--ha-pink);
	outline-offset: 2px;
}

/* Day number under date tiles */
.checkbox input[type="checkbox"] + input + label:after { color: var(--ha-pink); }

.checkbox label[for="de_4"] span,
.checkbox label[for="de_2"] span {
	font-family: var(--ha-font-body);
	font-weight: 400;
	font-size: 12px;
	display: contents;
}

/* Country flags: keep full colour */
#divCountries .checkbox label:before { filter: unset; opacity: 1; }

/* ---------- Form inputs ---------- */
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="text"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea,
.select2-selection {
	font-family: var(--ha-font-body);
	color: var(--ha-navy);
	border: 1px solid var(--ha-border);
	border-radius: var(--ha-radius);
	font-size: 1.6rem;
	padding: 16px 18px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
select:focus,
textarea:focus,
.select2-container--focus .select2-selection {
	outline: none;
	border-color: var(--ha-pink);
	box-shadow: 0 0 0 3px rgba(233, 0, 106, 0.18);
}

/* Pink arrow on selects (base arrow is green) */
select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6'%3E%3Cpolygon points='0,0 11,0 5.5,6' fill='%23E9006A'/%3E%3C/svg%3E");
	padding-right: 36px;
}

.select2 { border: none; }

/* Selected country chips. Extra .select2 class needed: select2.min.css loads after this file. */
.select2.select2-container--default .select2-selection--multiple .select2-selection__choice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--ha-pink-tint);
	border: 1px solid var(--ha-pink);
	border-radius: 999px;
	color: var(--ha-navy);
	padding: 4px 12px 4px 10px;
	line-height: 1.2;
}

.select2.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	float: none;
	order: 2;
	margin: 0 0 0 2px;
	color: var(--ha-pink);
	font-size: 1.8rem;
	line-height: 1;
}

.select2.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--ha-pink-deep); }

/* Country flags: sprite cells are 32x32 but the flag only fills rows 5-28.
   Base shows the top 25px (5px blank above, 4px cut off below), so trim to the flag and centre it. */
.indCountry {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	line-height: 1.2;
}

.indCountry span {
	float: none;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	margin: -5px 0 -3px 0;
	clip-path: inset(5px 0 3px 0);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--ha-pink);
}

.select2-dropdown {
	border-color: var(--ha-border);
	border-radius: var(--ha-radius);
	overflow: hidden;
}

/* ---------- Buttons (pill-shaped, pink) ---------- */
.BL-Btn,
.blueButton,
input[type="submit"],
button[type="submit"] {
	font-family: var(--ha-font-display);
	font-weight: 600;
	background: var(--ha-pink);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 0.8em 1.8em;
	box-shadow: var(--ha-shadow-card);
	transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
	cursor: pointer;
}

.BL-Btn:hover,
.blueButton:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background: var(--ha-pink-deep) !important;
	color: #fff;
	box-shadow: var(--ha-shadow-lift);
}

.BL-Btn:active,
.blueButton:active { transform: scale(0.98); }

.greyButton,
.addedConditions li a {
	background-color: #fff;
	color: var(--ha-navy);
	border: 1px solid rgba(13, 22, 79, 0.2);
	border-radius: 999px;
}

.greyButton:hover {
	background-color: var(--ha-navy-tint);
	border-color: var(--ha-navy);
}

/* ---------- Medical yes/no slider ---------- */
.medSlider {
	background: var(--ha-navy-tint);
	border: 1px solid var(--ha-border);
	border-radius: 999px;
	color: var(--ha-navy);
}

.medSelect,
.answerMedical { border-radius: 999px; }

/* ---------- Datepicker (jQuery UI) ---------- */
.ui-datepicker {
	font-family: var(--ha-font-body);
	border: 1px solid var(--ha-border) !important;
	border-radius: var(--ha-radius);
	box-shadow: var(--ha-shadow-lift);
	padding: 8px;
}

.ui-datepicker .ui-datepicker-header {
	background: var(--ha-navy);
	border: none;
	border-radius: 10px;
	color: #fff;
}

/* Prev / next arrows: white icons on the navy header */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	top: 50%;
	transform: translateY(-50%);
	border: none !important;
	background: transparent !important;
	border-radius: 50%;
	cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover { background: rgba(255, 255, 255, 0.15) !important; top: 50%; }
.ui-datepicker .ui-datepicker-prev-hover { left: 2px; }
.ui-datepicker .ui-datepicker-next-hover { right: 2px; }
.ui-datepicker .ui-datepicker-header .ui-icon { filter: brightness(0) invert(1); }

/* Days */
.ui-datepicker .ui-state-default {
	background: #fff;
	border: 1px solid var(--ha-border);
	border-radius: 8px;
	color: var(--ha-navy);
}

.ui-datepicker .ui-state-default.ui-state-hover:not(.ui-state-active) {
	background: var(--ha-pink-tint);
	border-color: var(--ha-pink);
	color: var(--ha-navy);
}

/* Selected date: solid pink */
.ui-datepicker .ui-state-active {
	background: var(--ha-pink);
	border-color: var(--ha-pink);
	color: #fff;
}

/* Today (when not selected): pink outline only */
.ui-datepicker .ui-state-highlight:not(.ui-state-active) {
	background: #fff;
	border-color: var(--ha-pink);
	color: var(--ha-pink);
	font-weight: 700;
}

/* ---------- Validation ---------- */
.field-validation-error,
.validation-summary-errors {
	border-radius: var(--ha-radius);
	font-weight: 500;
}

/* ---------- Results page ---------- */
#modeResult {
	background: var(--ha-navy);
	border-radius: var(--ha-radius-lg);
}

#modeResult h2 { color: #fff; font-family: var(--ha-font-display); }

.filterOpt fieldset label,
.optionLabel { color: #fff !important; }

#obfiltersbutton {
	background: var(--ha-pink);
	border-radius: 999px;
}

#obfiltersbutton:hover { background: var(--ha-pink-deep) !important; }

td.policy-premium { color: #fff; }

#resultstabprime td {
	background: #fff;
	color: var(--ha-navy);
}

#resultstabprime tr {
	border: 1px solid var(--ha-border);
	border-radius: var(--ha-radius);
	box-shadow: var(--ha-shadow-card);
}

#resultstabprime td.policy-premium {
	background: var(--ha-pink);
	color: #fff;
	font-family: var(--ha-font-display);
	font-weight: 700;
}

/* ---------- Policy summary panel (Your Details page) ----------
   Rebuilt: navy title bar, large premium, then label / value rows
   instead of a navy bar above every value. */
.policy-summary {
	border: 1px solid var(--ha-border);
	border-radius: var(--ha-radius-lg);
	box-shadow: var(--ha-shadow-card);
	overflow: hidden;
	background: #fff;
	text-align: left;
	padding: 0;
}

.policy-summary-brand {
	background: var(--ha-navy);
	color: #fff;
	font-family: var(--ha-font-display);
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-align: center;
	padding: 2rem 1.6rem;
}

.policy-summary-brand br { display: none; }

.policy-summary-brand span {
	display: block;
	margin-top: 0.4rem;
	font-family: var(--ha-font-body);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.policy-summary-details { padding: 0 1.6rem 0.8rem; }

.policy-summary-details-section {
	display: flow-root;
	margin: 0;
	padding: 1rem 0;
	border-bottom: 1px solid var(--ha-border);
	text-align: right;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--ha-navy);
}

.policy-summary-details-section:last-child { border-bottom: none; }

.policy-summary-details-section > p {
	float: left;
	margin: 0 1.2rem 0 0;
	padding: 0;
	background: none;
	color: var(--ha-ink-60);
	font-size: 1.3rem;
	line-height: 1.6;
}

.policy-summary-details-section > p b { font-weight: 500; }

.policy-summary-details-section a { font-weight: 500; }

/* Premium: first section, shown as a highlighted price block */
.policy-summary-details-section:first-child {
	margin: 0 -1.6rem;
	padding: 1.6rem;
	background: var(--ha-pink-tint);
	border-bottom: none;
	text-align: center;
}

.policy-summary-details-section:first-child > p { display: none; }

.policy-summary-details-section:first-child small {
	display: block;
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--ha-ink-60);
}

.policy-summary-details-section:first-child #Premium {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--ha-font-display);
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--ha-pink);
}

.policy-summary-price { color: var(--ha-pink); font-family: var(--ha-font-display); }

.benefitUnderwriter { display: none !important; }
.benefitData { width: 100%; }
.benefitData table tr { border: none !important; box-shadow: none !important; }

/* ---------- Footer (navy, as on holidayangel.com) ---------- */
footer {
	background: var(--ha-navy);
	color: rgba(255, 255, 255, 0.8);
	text-align: center;
	font-size: 1.3rem;
	line-height: 1.6;
	padding: 4rem 2rem;
}

footer a { color: rgba(255, 255, 255, 0.8); }
footer a:hover { color: #fff; }

/* ---------- Kept from the previous override ---------- */
.travtype_7 { display: none; }

/* ---------- Fixes after full-page review ---------- */

/* Select2 boxes (countries / activities): stop the inner search field picking up the input styles */
.select2-container { display: block; position: relative; box-sizing: border-box; }
.select2-container .selection { display: block; }
.select2-container .select2-selection__rendered li { display: inline-block; }

.select2-container .select2-selection--multiple {
	display: block;
	box-sizing: border-box;
	min-height: 54px;
	padding: 8px 14px;
	cursor: text;
}

.select2-container .select2-search--inline .select2-search__field,
.select2-container input.select2-search__field {
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	background: transparent;
	padding: 0;
	margin: 6px 0 0 0;
	height: auto;
	min-height: 28px;
	font-size: 1.6rem;
}

.select2-container .select2-selection__rendered {
	padding: 0 !important;
	margin: 0;
	list-style: none;
}

#divActivities > strong {
	display: block;
	font-family: var(--ha-font-display);
	font-size: 2rem;
	font-weight: 600;
	margin-bottom: 20px;
}

/* Questions nested inside "Who is travelling?" should not get their own divider */
#step1 .questionBox .questionBox {
	border-bottom: none;
	padding: 1.5rem 0 0 0;
}

/* Gadget option has no icon in the base stylesheet */
.checkbox label[for="op_18"]:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Crect x='72' y='18' width='106' height='214' rx='20' fill='none' stroke='%23fff' stroke-width='18'/%3E%3Ccircle cx='125' cy='196' r='11' fill='%23fff'/%3E%3Crect x='106' y='44' width='38' height='9' rx='4.5' fill='%23fff'/%3E%3C/svg%3E");
}

/* UK resident confirmation: tinted panel and a brand-coloured checkbox (base gives a heavy black square) */
#step1 .confirm-uk-resident {
	background: var(--ha-navy-tint);
	border: 1px solid var(--ha-border);
	border-radius: var(--ha-radius);
	padding: 2.4rem;
	margin: 3rem 0;
	box-sizing: border-box;
}

.confirm-uk-resident input[type="checkbox"] {
	outline: none;
	border: none;
	width: 22px;
	height: 22px;
	margin: 0 1rem 0 0;
	accent-color: var(--ha-pink);
	vertical-align: -4px;
	cursor: pointer;
}

.confirm-uk-resident label {
	font-family: var(--ha-font-display);
	font-size: 1.7rem;
	color: var(--ha-navy);
}

.confirm-uk-resident ol { margin-top: 1.5rem; }
.confirm-uk-resident li { color: var(--ha-navy); }

/* Promo code full width, Continue button on its own row (base floats it into the promo box) */
#divPromocode { width: 100%; }

#step1 > input[type="submit"].BL-Btn,
.blueButton[value="Continue"] {
	float: none;
	clear: both;
	display: block;
	margin: 3rem 0 2rem auto;
	min-width: 220px;
	height: 56px;
	font-size: 1.8rem;
}

@media screen and (max-width: 550px) {
	#step1 > input[type="submit"].BL-Btn,
	.blueButton[value="Continue"] { width: 100%; }
	#step1 .confirm-uk-resident { padding: 1.6rem; }
}

/* ---------- Responsive ---------- */
@media screen and (min-width: 1200px) {
	.checkbox,
	#btnStartDateOverride,
	#btnReturnDateOverride,
	.datetoCheckbox { max-width: 32%; }

	/* Start and end date tiles share one 3-column grid.
	   #divEndDate only wraps the four preset end dates, so display: contents
	   lets the "Select Date" tile flow alongside them like the start dates. */
	#divStartDates .coverChoice > [data-toggle="buttons"],
	#divExpireDates .coverChoice > [data-toggle="buttons"] {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	#divExpireDates #divEndDate { display: contents; }

	#divStartDates .checkbox,
	#btnStartDateOverride,
	#divExpireDates .datetoCheckbox,
	#btnReturnDateOverride {
		flex: 0 0 auto;
		width: calc((100% - 16px) / 3);
		max-width: none;
		margin: 0;
		float: none;
		box-sizing: border-box;
	}
}

@media (max-width: 768px) {
	#divEndDate .datetoCheckbox { width: 100%; }
	h1 { font-size: 2.8rem; }
	.questionBox .coverInfo strong { font-size: 1.8rem; }
}

@media screen and (max-width: 550px) {
	header .row { padding: 8px 16px; }
	header .logo img { height: 46px; }
	.phone { font-size: 1.5rem; }
	.phone:before { font-size: 1rem; }
	.opening { display: none; }
	.header { min-height: 300px; background-position: 70% center; }
	.quoteWrapper,
	.container.content.quoteWrapper {
		margin-top: -220px;
		padding: 10px 20px 20px 20px;
		border-radius: 18px;
		width: calc(100% - 24px);
	}
	.checkbox label[for="de_4"] span,
	.checkbox label[for="de_2"] span { font-size: 12px; display: contents; }
}

/* ======================================================================
   Mobile layout fixes (results + your details)
   The base stylesheet turns the results table into stacked blocks at
   760px and below, giving one full-width row per benefit. These rules
   rebuild each quote as a compact card instead:
     brand row  |  2 x 2 benefits grid  |  navy price bar with Select
   ====================================================================== */
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

	/* Heading and the Show Annual / Show Filter buttons */
	.policy-select > .six.columns h1 { font-size: 2.6rem; margin: 1rem 0 1.6rem; }

	.policy-select > .six.columns:has(> .BL-Btn) {
		display: flex;
		gap: 8px;
		margin: 0 0 1.6rem;
	}

	.policy-select > .six.columns > .BL-Btn {
		float: none;
		flex: 1 1 0;
		margin: 0;
		height: 44px;
		padding: 0 1rem;
		font-size: 1.4rem;
	}

	/* Filter panel */
	#modeResult {
		width: auto;
		padding: 2rem 1.6rem;
		border-radius: var(--ha-radius);
	}

	#modeResult h2 { font-size: 2rem; margin-bottom: 1.2rem; }

	#modeResult input#obfiltersbutton {
		float: none;
		display: block;
		width: 100%;
		height: 48px;
		margin: 1.6rem 0 0;
	}

	.additionalFeaturesBTN { float: none; width: 100%; margin: 0 0 1.6rem; }

	/* Table wrapper */
	#resultstab,
	#resultstabprime { border-spacing: 0; }

	#resultstab > tbody > tr.resultstabhead,
	#resultstabprime > tbody > tr.resultstabhead { display: none; }

	/* Quote card */
	#resultstab > tbody > tr:not(.resultstabhead):not(.beneftiDiv),
	#resultstabprime > tbody > tr:not(.resultstabhead):not(.beneftiDiv) {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		position: relative;
		margin: 0 0 1.6rem;
		background: #fff;
		border: 1px solid var(--ha-border) !important;
		border-radius: var(--ha-radius);
		box-shadow: var(--ha-shadow-card);
		overflow: hidden;
		transform: none !important;
	}

	#resultstab > tbody > tr > td,
	#resultstabprime > tbody > tr > td {
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		background: #fff;
		color: var(--ha-navy);
		border: none !important;
		box-sizing: border-box;
	}

	/* Brand row: logo left, "more info" right */
	#resultstab > tbody > tr > td:first-child,
	#resultstabprime > tbody > tr > td:first-child {
		grid-column: 1 / -1;
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 1.2rem;
		padding: 1.2rem 1.6rem !important;
		border-bottom: 1px solid var(--ha-border) !important;
		text-align: left;
	}

	#resultstab td:first-child img,
	#resultstabprime td:first-child img {
		display: block;
		max-width: 120px;
		max-height: 48px;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
	}

	#resultstab td:first-child .itembrand,
	#resultstabprime td:first-child .itembrand {
		margin: 0;
		text-align: right;
		font-size: 1.2rem;
		line-height: 1.3;
	}

	#resultstab td:first-child .itembrand a,
	#resultstabprime td:first-child .itembrand a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--ha-navy);
		text-decoration: none;
	}

	#resultstab td:first-child .itembrand .fa-2x,
	#resultstabprime td:first-child .itembrand .fa-2x { font-size: 1.8rem; color: var(--ha-pink); }

	/* Benefits: 2 x 2 grid */
	#resultstab > tbody > tr > td.resultcolwidth,
	#resultstabprime > tbody > tr > td.resultcolwidth {
		position: static; /* help popups anchor to the card, not the small cell */
		padding: 1.2rem 0.8rem !important;
		border-bottom: 1px solid var(--ha-border) !important;
		text-align: center;
		font-family: var(--ha-font-display);
		font-size: 1.7rem;
		font-weight: 700;
		line-height: 1.3;
	}

	#resultstab > tbody > tr > td.resultcolwidth:nth-child(even),
	#resultstabprime > tbody > tr > td.resultcolwidth:nth-child(even) {
		border-right: 1px solid var(--ha-border) !important;
	}

	#resultstab .resultTag,
	#resultstabprime .resultTag {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		margin-bottom: 0.4rem;
		font-family: var(--ha-font-body);
		font-size: 1.1rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--ha-ink-60);
	}

	#resultstab .resultTag em,
	#resultstabprime .resultTag em { font-style: normal; display: inline-flex; }

	#resultstab .helpBtnSmall,
	#resultstabprime .helpBtnSmall {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 18px;
		height: 18px;
		margin: 0;
		padding: 0;
		border-radius: 50%;
		background: var(--ha-pink-tint) !important;
		color: var(--ha-pink) !important;
		font-size: 10px;
		line-height: 1;
		cursor: pointer;
	}

	#resultstab .resultTagSmall,
	#resultstabprime .resultTagSmall {
		display: block;
		font-family: var(--ha-font-body);
		font-size: 1.1rem;
		font-weight: 400;
		color: var(--ha-ink-60);
	}

	#resultstab span.helpTxt,
	#resultstabprime span.helpTxt {
		left: 1.2rem;
		right: 1.2rem;
		width: auto;
		margin-top: 0.8rem;
		padding: 1.4rem 1.6rem;
		background: var(--ha-navy);
		color: #fff;
		border-radius: var(--ha-radius);
		box-shadow: var(--ha-shadow-lift);
		font-family: var(--ha-font-body);
		font-size: 1.3rem;
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
		line-height: 1.5;
		text-align: left;
	}

	/* Price bar: premium left, Select right */
	#resultstab > tbody > tr > td.policy-premium,
	#resultstabprime > tbody > tr > td.policy-premium {
		grid-column: 1 / -1;
		display: flex !important;
		align-items: center;
		justify-content: flex-start;
		gap: 0;
		padding: 1.2rem 1.6rem !important;
		background: var(--ha-navy) !important;
		color: #fff;
		font-family: var(--ha-font-display);
		font-size: 2.8rem !important;
		font-weight: 700;
		line-height: 1;
		text-align: left;
	}

	td.policy-premium small { font-size: 0.6em; }

	#resultstab > tbody > tr > td.policy-premium > p,
	#resultstabprime > tbody > tr > td.policy-premium > p {
		flex: 0 0 auto;
		width: auto;
		margin: 0 0 0 auto; /* pushes Select to the right */
	}

	#resultstab td.policy-premium a,
	#resultstabprime td.policy-premium a {
		display: inline-block;
		margin: 0;
		padding: 1.2rem 2.8rem;
		border-radius: 999px;
		background: var(--ha-pink) !important;
		color: #fff !important;
		font-family: var(--ha-font-display);
		font-size: 1.4rem;
		font-weight: 700;
		letter-spacing: 0.06em;
	}

	#resultstab td.policy-premium a:hover,
	#resultstabprime td.policy-premium a:hover { background: var(--ha-pink-deep) !important; }
}

/* Your details page: on phones the base stacks the summary under the whole form.
   Move it to the top so the customer sees the policy and price first. */
@media screen and (max-width: 549px) {
	#obfilters1 #policyDetails,
	#policyDetails {
		display: flex;
		flex-direction: column;
	}

	#policyDetails > .validation-summary-errors,
	#policyDetails > .validation-summary-valid { order: -2; }

	#policyDetails > #policySummary2 {
		order: -1;
		width: 100%;
		margin: 1rem 0 2.4rem;
		float: none;
	}

	#policyDetails > #contactDetails { width: 100%; float: none; }

	.policy-summary-brand { padding: 1.6rem; }

	.policy-summary-details-section { padding: 0.8rem 0; }

	.policy-summary-details-section:first-child #Premium { font-size: 2.8rem; }
}

.greyButton {color: var(--ha-navy)!important;}

td.policy-premium {background: var(--ha-pink);}

/* Show "Europe 2" destination option as "Europe" (step 1 - Where are you going to?) */
label[for="de_1"] {
    font-size: 0;               /* hide the original "Europe 2" text */
}
label[for="de_1"]::before {
    font-size: 16px;            /* keep the globe icon at its normal size */
}
label[for="de_1"]::after {
    content: "Europe";
    font-size: 16px;
    line-height: 24px;
    display: block;
}
 
  
/* 2. Policy summary panel - Destination row.
   A tiny embedded font that draws the digit "2" as invisible/zero-width.
   unicode-range limits it to the "2" character only, so every other
   character still uses Outfit. The Destination row is the only row it's
   applied to, and "Europe 2" is the only destination containing a 2,
   so UK / Worldwide are unaffected. */
@font-face {
    font-family: "Hide2";
    src: url(data:font/woff2;base64,d09GMgABAAAAAAEkAAoAAAAAAngAAADeAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAPAocOAE2AiQDCgsIAAQgBVoHKBvZAQAuCmzXNKloFg8XxbHfD7PhVoznP/e5c/OSsi46Es3uEL7j0RZlvqrCWBSML/pD7ZDG8ZapZUv0Ek1R8fTXAGRePkPr5PhEB/K3SALjLNFaQAnmNubUJ0qrH11U2aehIwN8tML0WHN9p6ZvAMAEDYVbJbjVPWCji2Z6XFfy+vVnXQBQYIOgYwA6CPSTcdYflwsQhO1X4sL/ofqD3/PPyEF2bUFpIGxTyB4esxMAQJtOA4LSBTQAAHSvAmIgoDkwlPQjcey0R3Pu/ibMH99HfcCNItiS9lY6xqykOw==) format("woff2");
    unicode-range: U+0032;
}
.policy-summary-details-section:nth-child(3) {
    font-family: "Hide2", "Outfit", ui-sans-serif, system-ui, sans-serif;
}


/* Quote results: hide Baggage, Cancellation, Medical and Max. days per trip filters */
#obfilters .Benefit_3,      /* Medical */
{    
    display: none !important;
}

/* =====================================================================
   Add to the END of /content/site2.css
   ===================================================================== */

/* ---------- Cover type, regions + traveller type: 2 across grid ---------- */
#divSchemeType .coverChoice > div,
#divDestinations .coverChoice > div,
#divTravellerType .coverChoice > div {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

#divSchemeType .checkbox,
#divDestinations .checkbox,
#divTravellerType .checkbox {
	width: auto;
	max-width: none;
	margin: 0;
	float: none;
}

/* ---------- Medical yes/no: two separate left-aligned boxes ----------
   Applies to every .medSlider: step 1 and the medical questions page */
.medSlider {
	position: relative;
	display: flex;
	justify-content: flex-start;
	gap: 8px;
	width: auto;
	height: auto;
	margin: 15px 0 0 !important;
	float: none;
	left: auto;
	background: none;
	border: 0;
	border-radius: 0;
}

.medSlider .medYes,
.medSlider .medNo {
	position: relative;
	left: auto;
	width: 120px;
	height: 50px;
	line-height: 48px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--ha-border);
	border-radius: var(--ha-radius);
	box-shadow: 0 1px 2px rgba(13, 22, 79, 0.06);
	color: var(--ha-navy);
	font-family: var(--ha-font-display);
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
	transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}

/* Hover matches the other option tiles */
.medSlider .medYes:hover,
.medSlider .medNo:hover {
	background: var(--ha-pink-tint);
	border-color: var(--ha-pink);
	color: var(--ha-navy);
	box-shadow: var(--ha-shadow-card);
}

/* The jQuery slider handle stays in the DOM (ready.js records the answer
   in its inline "left" value) but is no longer shown */
.medSlider .medSelect {
	visibility: hidden;
	pointer-events: none;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* Selected state, read from the hidden IsMedicalRequired input (.medOption).
   Step 1 renders value="" until the customer answers, so nothing is
   highlighted. Once answered (ready.js sets "true" / "false", and the view
   renders the saved answer when they come back) the matching box is pink. */
.medOption[value="true"] ~ .medSlider .medYes,
.medOption[value="True"] ~ .medSlider .medYes,
.medOption[value="false"] ~ .medSlider .medNo,
.medOption[value="False"] ~ .medSlider .medNo {
	background: var(--ha-pink);
	border-color: var(--ha-pink);
	color: #fff;
}

/* Step 1 only: Yes / No fill the width, 2 across like the other tiles */
#divMedical .medSlider {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

#divMedical .medSlider .medYes,
#divMedical .medSlider .medNo { width: auto; }

#divMedical .medSlider .medSelect { position: absolute; }

/* ---------- Quote results: "Hide filter / Show filter" button reads "Options" ----------
   ready.js rewrites the button text on each click, so the real text is pushed
   out of view and the label comes from ::after, keyed off the #obfilters "hide" class.
   Font size, padding and margins are left untouched so the button keeps its size. */
#filter-cover {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-indent: -9999px;
}

#filter-cover::after {
	content: "Hide options";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-indent: 0;
}

body:has(#obfilters.hide) #filter-cover::after { content: "Show options"; }

/* Waiting list follow-up question – info panel styling
   .med-info is added by medical-followup-questions.js */
#med2qs .med-info {
    background: #fdf2f7;
    border-left: 4px solid #e9006a;
    border-radius: 12px;
    padding: 20px 24px;
    margin: 8px 0 16px;
    box-sizing: border-box;
}

#med2qs .med-info h3 {
    font-size: 17px;
    line-height: 1.3;
    margin: 0 0 12px;
}

#med2qs .med-info p,
#med2qs .med-info li {
    font-size: 14px;
    line-height: 1.55;
}

#med2qs .med-info p { margin: 0 0 10px; }
#med2qs .med-info p:empty { display: none; }

#med2qs .med-info ol {
    margin: 0 0 10px;
    padding-left: 20px;
}

/* the site's li { float:left } was running Section 1 & 2 together */
#med2qs .med-info li {
    float: none;
    display: list-item;
    list-style: disc;
    margin: 0 0 4px;
}

#med2qs .med-info li::marker { color: #e9006a; }

#med2qs .med-info .eight.columns > :last-child { margin-bottom: 0; }

/* "No" greyed out and unclickable (.med-no-disabled added by the JS) */
#med2qs .med-no-disabled .medNo {
    background: #eceef3 !important;
    border-color: #d6d9e1 !important;
    color: #9aa0ad !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* Keep the Yes / No selector on the right, aligned to the bottom of the text */
#med2qs .med-info {
    display: flex;
    align-items: flex-end;
}


/* Holiday Angel tier badges */
p.itembrand.HolidayAngelSilver,
p.itembrand.HolidayAngelGold,
p.itembrand.HolidayAngelPlatinum {
    display: block;
    width: fit-content;
    margin: 6px auto 14px;
    margin-top: -14px;   /* pull up towards the logo */
    padding: 4px 12px;
    border-radius: 999px;
    color: #0d164f;
    letter-spacing: .03em;
    box-shadow: inset 0 0 0 1px rgba(13, 22, 79, .08);
}

p.itembrand.HolidayAngelSilver   { background: #c0c4ca; }
p.itembrand.HolidayAngelGold     { background: #d4af37; }
p.itembrand.HolidayAngelPlatinum { background: #9fb0c3; }

/* Results page – "What's covered" benefits panel */
#resultstab .benefitData {
    background: #fff;
    padding: 24px 28px !important;
    border: 1px solid #e3e6ee;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(13, 22, 79, .06);
    text-align: left !important;
    font-weight: 400;
}

#resultstab .benefitData h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 6px;
    font-size: 20px;
    text-align: left;
}

#resultstab .benefitData h3 .close {
    cursor: pointer;
    color: #9aa0ad;
    font-size: 22px;
    line-height: 1;
    transition: color .15s;
}
#resultstab .benefitData h3 .close:hover { color: #e9006a; }

#resultstab .benefitData > p {
    font-size: 14px;
    line-height: 1.5;
    color: #4a5275;
    margin: 0 0 12px;
    text-align: left;
}
#resultstab .benefitData > p a {
    color: #e9006a;
    font-weight: 600;
    text-decoration: underline;
}

/* Table */
#resultstab .benefitsTable {
    width: 100%;
    border-collapse: collapse;
}

#resultstab .benefitsTable .benefitHeading td {
    padding: 20px 0 10px !important;
    text-align: left !important;
    border-bottom: 2px solid #e9006a;
}
#resultstab .benefitsTable .benefitHeading strong {
    font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0d164f !important;
    letter-spacing: -.01em;
}

#resultstab .benefitsTable tr:not(.benefitHeading) td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef0f5;
    font-size: 14px;
    line-height: 1.45;
    vertical-align: top;
}
#resultstab .benefitsTable tr:not(.benefitHeading):hover td { background: #fdf2f7; }

#resultstab .benefitsTable .benefitTitle {
    text-align: left !important;
    width: 60%;
    padding-left: 0 !important;
}
#resultstab .benefitsTable .benefitValue {
    text-align: right !important;
    font-weight: 600;
    padding-right: 0 !important;
}

#resultstab .benefitsTable .benHelpBtn { cursor: pointer; }

/* Description shown when a benefit name is clicked */
#resultstab .benefitsTable .helpTxt {
    margin: 6px 0 0;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 400;
    color: #4a5275;
    background: #fdf2f7;
    border-radius: 8px;
    box-sizing: border-box;
    max-width: 100%;
}

/* site CSS sets this to inline-block below 1024px, which breaks the table */
#resultstab .benefitsTable tbody { display: table-row-group; }

/* Mobile / tablet – uses the exact same media query as the site's own
   responsive table, so these fixes apply whenever the site's layout does.
   Stack heading, intro and table, then benefit name above its value */
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    #resultstab tr.beneftiDiv > td.benefitData {
        display: block !important;          /* site makes this flex */
        padding: 18px 16px !important;
        width: auto !important;
        min-width: 0 !important;
    }

    #resultstab .benefitData .benefitsTable,
    #resultstab .benefitData .benefitsTable tbody {
        display: block !important;
        width: 100% !important;
        margin: 0;
    }

    #resultstab .benefitData .benefitsTable tr {
        display: block;
        width: 100%;
    }

    #resultstab .benefitData .benefitsTable tr td {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    #resultstab .benefitData .benefitsTable tr:not(.benefitHeading) {
        padding: 10px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #eef0f5 !important;
        margin: 0 !important;
    }

    #resultstab .benefitData .benefitsTable tr:not(.benefitHeading) td {
        padding: 0 !important;
        border: 0;
        font-weight: 400;
    }

    #resultstab .benefitData .benefitsTable .benefitHeading td { padding: 18px 0 10px !important; }
    #resultstab .benefitData .benefitsTable .benefitTitle { text-align: left !important; }
    #resultstab .benefitData .benefitsTable .benefitValue {
        text-align: left !important;
        margin-top: 2px;
        font-weight: 600 !important;
        color: #e9006a;
    }
}


/* Results page – "What's covered" benefits panel */
#resultstab .benefitData {
    background: #fff;
    padding: 24px 28px !important;
    border: 1px solid #e3e6ee;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(13, 22, 79, .06);
    text-align: left !important;
    font-weight: 400;
}

#resultstab .benefitData h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 6px;
    font-size: 20px;
    text-align: left;
}

#resultstab .benefitData h3 .close {
    cursor: pointer;
    color: #9aa0ad;
    font-size: 22px;
    line-height: 1;
    transition: color .15s;
}
#resultstab .benefitData h3 .close:hover { color: #e9006a; }

#resultstab .benefitData > p {
    font-size: 14px;
    line-height: 1.5;
    color: #4a5275;
    margin: 0 0 12px;
    text-align: left;
}
#resultstab .benefitData > p a {
    color: #e9006a;
    font-weight: 600;
    text-decoration: underline;
}

/* Table */
#resultstab .benefitsTable {
    width: 100%;
    border-collapse: collapse;
}

#resultstab .benefitsTable .benefitHeading td {
    padding: 20px 0 10px !important;
    text-align: left !important;
    border-bottom: 2px solid #e9006a;
}
#resultstab .benefitsTable .benefitHeading strong {
    font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0d164f !important;
    letter-spacing: -.01em;
}

#resultstab .benefitsTable tr:not(.benefitHeading) td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef0f5;
    font-size: 14px;
    line-height: 1.45;
    vertical-align: top;
}
#resultstab .benefitsTable tr:not(.benefitHeading):hover td { background: #fdf2f7; }

#resultstab .benefitsTable .benefitTitle {
    text-align: left !important;
    width: 60%;
    padding-left: 0 !important;
}
#resultstab .benefitsTable .benefitValue {
    text-align: right !important;
    font-weight: 600;
    padding-right: 0 !important;
}

#resultstab .benefitsTable .benHelpBtn { cursor: pointer; }

/* Description shown when a benefit name is clicked */
#resultstab .benefitsTable .helpTxt {
    margin: 6px 0 0;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 400;
    color: #4a5275;
    background: #fdf2f7;
    border-radius: 8px;
    box-sizing: border-box;
    max-width: 100%;
}

/* site CSS sets this to inline-block below 1024px, which breaks the table */
#resultstab .benefitsTable tbody { display: table-row-group; }

/* Mobile / tablet – uses the exact same media query as the site's own
   responsive table, so these fixes apply whenever the site's layout does.
   Stack heading, intro and table, then benefit name above its value */
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    #resultstab tr.beneftiDiv > td.benefitData {
        display: block !important;          /* site makes this flex */
        padding: 18px 16px !important;
        width: auto !important;
        min-width: 0 !important;
    }

    #resultstab .benefitData .benefitsTable,
    #resultstab .benefitData .benefitsTable tbody {
        display: block !important;
        width: 100% !important;
        margin: 0;
    }

    #resultstab .benefitData .benefitsTable tr {
        display: block;
        width: 100%;
    }

    #resultstab .benefitData .benefitsTable tr td {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    #resultstab .benefitData .benefitsTable tr:not(.benefitHeading) {
        padding: 10px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #eef0f5 !important;
        margin: 0 !important;
    }

    #resultstab .benefitData .benefitsTable tr:not(.benefitHeading) td {
        padding: 0 !important;
        border: 0;
        font-weight: 400;
    }

    #resultstab .benefitData .benefitsTable .benefitHeading td { padding: 18px 0 10px !important; }
    #resultstab .benefitData .benefitsTable .benefitTitle { text-align: left !important; }
    #resultstab .benefitData .benefitsTable .benefitValue {
        text-align: left !important;
        margin-top: 2px;
        font-weight: 600 !important;
        color: #e9006a;
    }
}

.resultTag { font-weight:600;}