/* ---- INDEX ------------------------------------------- */
/*                                                        */
/*    Initial                              CODE: kqplc    */
/*    Modular                              CODE: ggjir    */
/*    Form elements                        CODE: ogtzz    */
/*    Quote                                CODE: lmnbd    */
/*    Results                              CODE: uuant    */
/*    Transfer                             CODE: ddfhs    */
/*    Changes to elements in white form    CODE: fmqxp    */
/*    Screen size dependent                CODE: sddfa    */
/*                                                        */
/* ------------------------------------------------------ */

/* ################################################################## */
/* #### Initial - CODE: kqplc ####################################### */
/* ################################################################## */

/* ---- Reset ----------------------------------------------------------------- */
:root {
  --Purple-Primary: #590f85;
  --Purple-Primary-60: #9b6fb6;
  --Purple-Dark-100: #2b173f;
  --Purple-Dark-80: #554565;
  --Purple-Dark-40: #aaa2b2;
  --Purple-120: #391c56;
  --Purple-60: #9d84b1;
  --Purple-20: #e0d8e7;
  --Purple-20-32: rgba(224, 216, 231, 0.32);
  --Purple-10: #eeecf1;
  --Purple-5: rgba(246, 243, 249, 1);
  --Purple-Neon: #9237cd;
  --Charcoal-100: #3d403d;
  --Charcoal-100-10: rgba(61, 64, 61, 0.1);
  --Charcoal-80: #646664;
  --Charcoal-5: #f5f5f5;
  --Coral-100: #e3596d;
  --Coral-5: #ffedee;
  --Peach-100: #e17555;
  --Peach-5: #fcf3ea;
  --Secondary-Blue-Dark: #011054;
  --Secondary-Blue-Light: #e9f5fe;
  --Navy-140-50: background: var(--Navy-140-50, rgba(0, 20, 55, 0.5));
  --Navy-100: #003366;
  --Mint-100: #359791;
  --Mint-Neon: #30dac6;
  --White-100: #ffffff;
  --White-80: rgba(255, 255, 255, 0.8);
  --White-60: rgba(255, 255, 255, 0.6);
  --Font-HeadingNow: 'HeadingNow75', sans-serif;
  --Font-Helvetica-Neue: 'Helvetica Neue', 'HelveticaNeue', Helvetica, 'Arimo', Arial, sans-serif;
}

*,
:before,
:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body.preload * {
  /* stops transitions on page load */
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

/* ---- Colours ----------------------------------------------------------------- */

:root {
  /* font */
  --font-family-ash: 'HeadingNow75', sans-serif;
  --font-family-oak: 'Helvetica Neue', 'HelveticaNeue', Helvetica, 'Arimo', Arial, sans-serif;
  /* EVI colours */
  --purple: #674186;
  --pink: #bf4a8e;
  --navy: #003366;
  --white: #ffffff;
  --purple-140: #291046;
  --purple-120: #391c56;
  --purple-80: #85679e;
  --purple-60: #9d84b1;
  --purple-40: #c2b3cf;
  --purple-20: #e0d8e7;
  --purple-10: #eeecf1;
  --purple-5: #f7f5f9;
  --pink-140: #8e164f;
  --pink-120: #9e2e6f;
  --pink-80: #cc6ea4;
  --pink-60: #dfa5c8;
  --pink-40: #eac5db;
  --pink-20: #f2dbe8;
  --pink-10: #f8ebf3;
  --pink-5: #fcf6f9;
  --navy-140: #001438;
  --navy-120: #00254a;
  --navy-80: #335c85;
  --navy-60: #668bae;
  --navy-40: #96b2d0;
  --navy-20: #ccd9e7;
  --navy-10: #e5eaef;
  --navy-5: #f2f5f7;
  --mint: #359791;
  --peach: #e17555;
  --coral: #e3596d;
  --black: #000000;
  --charcoal: #3d403d;
  --charcoal-80: #646664;
  --charcoal-30: #c4c5c4;
  --charcoal-20: #d8d9d8;
  --charcoal-10: #ebebeb;
  --charcoal-5: #f5f5f5;
  --mint-120: #12514d;
  --mint-neon: #30dac6;
  --mint-20: #d5f2eb;
  --mint-5: #eaf8f5;
  --peach-120: #b44626;
  --peach-neon: #ff9f5d;
  --peach-20: #ffe5d4;
  --peach-5: #fcf3ea;
  --coral-120: #c22d42;
  --coral-neon: #ff4f68;
  --coral-20: #ffd8dd;
  --coral-5: #ffedee;
  --purple-neon: #da9efd;
  /* MS7 colours */
  --primary-purple: #590f85;
  --primary-purple-neon: #9237cd;
  --primary-purple-dark: #2b173f;
  --primary-tints-01-purple-tints-purple-80: #7a3f9d;
  --primary-tints-03-purple-neon-tints-purple-neon-80: #a85fd7;
  --primary-tints-02-dark-purple-tints-purple-dark-80: #554565;
  --primary-tints-01-purple-tints-purple-60: #9b6fb6;
  --primary-tints-03-purple-neon-tints-purple-neon-60: #be87e1;
  --primary-tints-02-dark-purple-tints-purple-dark-60: #786987;
  --primary-tints-01-purple-tints-purple-40: #bd9fce;
  --primary-tints-03-purple-neon-tints-purple-neon-40: #d3afeb;
  --primary-tints-02-dark-purple-tints-purple-dark-40: #aaa2b2;
  --primary-tints-01-purple-tints-purple-20: #decfe7;
  --primary-tints-03-purple-neon-tints-purple-neon-20: #e9d7f5;
  --primary-tints-02-dark-purple-tints-purple-dark-20: #d5d1d9;
  --primary-tints-01-purple-tints-purple-5: #f6f3f9;
  --primary-tints-03-purple-neon-tints-purple-neon-5: #f9f5fc;
  --primary-tints-02-dark-purple-tints-purple-dark-5: #f4f3f5;
  --secondary-blue: #2a4787;
  --secondary-blue-dark: #011054;
  --secondary-blue-light: #e9f5fe;
  --secondary-violet: #5b4395;
  --secondary-white: #fff;
  --ui-palette-02-rewards-gold-5: #fff08a;
  --ui-palette-02-rewards-gold-20: #ffdf00;
  --ui-palette-02-rewards-gold: #ffbc00;
  --ui-palette-02-rewards-gold-dark: #e7ac04;
  --ui-palette-01-semantic-mint: #009b91;
  --ui-palette-01-semantic-mint-tints-2-mint-dark: #12514d;
  --ui-palette-01-semantic-mint-tints-3-mint-neon: #42ebd7;
  --ui-palette-01-semantic-mint-tints-4-mint-20: #d6f8f4;
  --ui-palette-01-semantic-mint-tints-5-mint-5: #f4fdfc;
  --ui-palette-01-semantic-orange: #f76900;
  --ui-palette-01-semantic-scarlet: #fe0039;
  --ui-palette-01-semantic-orange-tints-7-orange-dark: #b44626;
  --ui-palette-01-semantic-orange-tints-9-orange-20: #ffecdf;
  --ui-palette-01-semantic-orange-tints-10-orange-5: #fffaf7;
  --ui-palette-01-semantic-scarlet-tints-12-scarlet-dark: #c22d42;
  --ui-palette-01-semantic-scarlet-tints-13-scarlet-neon: #ff86a1;
  --ui-palette-14-scarlet-20: #fad1e0;
  --ui-palette-01-semantic-scarlet-tints-15-scarlet-5: #f9eff2;
  --ui-palette-01-semantic-orange-tints-8-orange-neon: #ffa96d;
  --03-semantic-tint-05-orange-dark: #b1520d;
  --03-semantic-tint-09-scarlet-dark: #9b1d39;
  --01-primary-tints-01-purple-tints-purple-120: #391c56;
  --ui-palette-01-semantic-scarlet-tints-14-scarlet-20: #fad1e0;
  --ms-7-purple: #590f85;
  --form-functional-tag-base: #590f85;
}

/* ---- Fonts ----------------------------------------------------------------- */

@font-face {
  font-family: FilsonSoft;
  src:
    url('../font/FilsonSoft-Regular.woff2') format('woff2'),
    url('../font/FilsonSoft-Regular.woff') format('woff');
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
}

@font-face {
  font-family: FilsonSoft;
  src:
    url('../font/FilsonSoft-Bold.woff2') format('woff2'),
    url('../font/FilsonSoft-Bold.woff') format('woff');
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
}

@font-face {
  font-family: HeadingNow35;
  src: url('../font/HeadingNow-35-Medium.woff2') format('woff2');
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
}

@font-face {
  font-family: HeadingNow75;
  src: url('../font/HeadingNow-75-Medium.woff2') format('woff2');
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
}

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

body {
  /*
	background-color: var(--white);
	*/
  background-image: radial-gradient(circle at 63% 68%, var(--primary-tints-01-purple-tints-purple-80), var(--primary-tints-01-purple-tints-purple-80) 28%, var(--secondary-blue) 100%);
  background-position: center 0px;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  font-family: var(--font-family-ash);
  font-stretch: normal;
  font-style: normal;
  font-weight: normal;
  overflow-x: hidden;
}

body.disable_scrolling {
  overflow-y: hidden;
}

body#details {
  background-attachment: fixed;
  background-position: center 0px;
  background-repeat: no-repeat;
  background-size: cover;
}

body#details.transition {
}

body#results,
body#broken_down,
body#transfer {
  background-color: var(--purple-5);
}

/* ################################################################## */
/* #### Modular - CODE: ggjir ####################################### */
/* ################################################################## */

/* ----- ul ---------------------------------------------------------------- */

ul {
  float: left;
  list-style: none;
  width: 100%;
}

ul li {
  float: left;
  position: relative;
  width: 100%;
}

ul li + li {
  margin-top: 4px;
}

/* ----- ul bullet ---------------------------------------------------------------- */

ul.bullet {
  font-size: 13px;
  line-height: 20px;
}

ul.bullet li {
  padding-left: 12px;
}

ul.bullet li:before {
  background-color: var(--charcoal);
  border-radius: 50%;
  content: '';
  height: 4px;
  position: absolute;
  top: 6px;
  left: 0;
  width: 4px;
}

/* ---- .msm_logo ---------------------------------------------------------------- */

.msm_logo {
  background-image: url(../img/logo.svg?v=8);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: contain;
  float: left;
  height: 43px;
  position: relative;
  width: 100%;
}

.msm_logo a.link {
  display: block;
  height: 28px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* ---- .provider_logo ---------------------------------------------------------------- */

.provider_logo {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  float: left;
  height: 50px;
  width: 90px;
}

/* ---- .is_mobile ---------------------------------------------------------------- */

.is_mobile {
  display: block;
}

/* ---- defaqto_rating ------------------------------------- */

.defaqto_rating {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: #aaa;
  float: left;
  font-size: 10px;
  line-height: 14px;
  height: 24px;
  position: relative;
  text-align: center;
  width: 60px;
}

.defaqto_rating.d0:before {
  content: 'Defaqto rating not available';
}

.defaqto_rating.d1 {
  background-image: url(/static/general/img/defaqto/1_star.png);
}

.defaqto_rating.d2 {
  background-image: url(/static/general/img/defaqto/2_star.png);
}

.defaqto_rating.d3 {
  background-image: url(/static/general/img/defaqto/3_star.png);
}

.defaqto_rating.d4 {
  background-image: url(/static/general/img/defaqto/4_star.png);
}

.defaqto_rating.d5 {
  background-image: url(/static/general/img/defaqto/5_star.png);
}

/* ----- first_name_holder ---------------------------------------------------------------- */

.first_name_holder {
  text-transform: capitalize;
}

/* ---- chevron --------------------------------------------------------------- */

.chevron {
  background-image: url(../img/chevron_primary_purple.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  float: left;
  height: 14px;
  position: relative;
  transform: rotate(180deg);
  width: 14px;
}

/* ----- message ---------------------------------------------------------------- */

.message {
  background-color: rgba(218, 158, 253, 0.2);
  border-left: 2px solid var(--purple-neon);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  color: var(--white);
  display: none;
  float: left;
  font-family: var(--font-family-oak);
  font-weight: normal;
  max-width: 412px;
  padding: 8px 16px;
  width: 100%;
}

.message.standard {
  padding-bottom: 16px;
}

.message,
.message p,
.message ul.bullet {
  font-size: 14px;
  line-height: 22px;
}

.message p {
  float: left;
  width: 100%;
}

.message p a {
  font-family: var(--font-family-ash);
  font-weight: bold;
}

.message p span.bolden {
  font-weight: bold;
}

.message ul.bullet li {
  padding-left: 18px;
}

.message ul.bullet li:before {
  background-color: var(--white);
  height: 6px;
  top: 8px;
  width: 6px;
}

.message ul.bullet li + li {
  margin-top: 8px;
}

.message p + p,
.message ul.bullet + p,
.message p + ul.bullet,
.message ul.bullet + ul.bullet {
  margin-top: 16px;
}

/* ----- message - warning --------------------------------------------------------------- */

.message.warning {
  background-color: rgba(255, 159, 93, 0.2);
  border-color: var(--peach-neon);
}

/* ----- message - standard --------------------------------------------------------------- */

.message.standard {
  background-color: rgba(218, 158, 253, 0.2);
  border-color: var(--purple-neon);
}

.slide#begin .message.standard {
  display: block;
  margin-top: 40px;
}

.white_form .message.standard_alt {
  margin-top: 20px;
  display: block;
  max-width: 100%;
  background-color: var(--secondary-blue-light);
  border-color: var(--navy);
}

.white_form .message.standard_alt .title {
  font-size: 24px;
  color: var(--charcoal);
}

/* ----- message - error --------------------------------------------------------------- */

.message.error {
  background-color: rgba(227, 89, 109, 0.2);
  border-color: var(--ui-palette-01-semantic-scarlet);
  font-weight: bold;
}

/* ----- sides ---------------------------------------------------------------- */

.sides {
  float: left;
  width: 100%;
}

.sides .side {
  float: left;
}

.sides .side.left {
}

.sides .side.right {
  float: right;
  text-align: right;
}

/* ----- datepicker ---------------------------------------------------------------- */

.ui-datepicker {
  padding: 22px 22px 22px 22px;
}

.ui-widget.ui-widget-content {
  border-color: var(--white);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.ui-corner-all {
  border-radius: 12px;
}

.ui-widget-header {
  background: var(--white);
  border-color: var(--white);
  color: var(--charcoal);
}

.ui-datepicker .ui-datepicker-title {
  font-family: var(--font-family-oak);
  font-size: 16px;
  line-height: 26px;
}

.ui-datepicker table {
  margin: 0;
  table-layout: fixed;
}

.ui-widget-header .ui-icon {
  background-image: url(../img/icon_arrow_purple.svg);
  background-position: center;
  background-repeat: no-repeat;
}

.ui-icon {
  height: 24px;
  width: 24px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  margin-left: -12px;
  margin-top: -12px;
}

.ui-datepicker .ui-datepicker-next {
  transform: rotate(180deg);
}

.ui-datepicker th {
  color: var(--charcoal-80);
  font-family: var(--font-family-oak);
  font-size: 14px;
  font-weight: normal;
  line-height: 1.57;
}

.ui-datepicker td {
  padding: 0;
}

.ui-datepicker td span,
.ui-datepicker td a {
  border-radius: 50%;
  font-size: 16px;
  height: 32px;
  line-height: 32px;
  padding: 0;
  text-align: center;
  width: 32px;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  background: var(--white);
  border: 0;
  color: var(--charcoal);
  font-weight: bold;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-content .ui-state-active.ui-state-hover,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  background: var(--primary-purple);
  color: var(--white);
  font-weight: bold;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  background: transparent;
  border: 0;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  top: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
  left: 2px;
}

.ui-datepicker .ui-datepicker-next-hover {
  right: 2px;
}

/* ######################################################################## */
/* #### Form elements - CODE: ogtzz ####################################### */
/* ######################################################################## */

/* ---- touch action --------------------------------------------------------------- */

a,
button,
input[type='radio'],
input[type='checkbox'],
.btn,
.filters_bar .block:not(.always_open) .title,
.more_info .panels .panel.right .section.features ul li .sides,
ul.picker li {
  touch-action: manipulation;
}

.more_info a {
  color: var(--purple-120);
}

/* ---- cursor pointer --------------------------------------------------------------- */

a,
button,
select,
input[type='radio'],
input[type='checkbox'],
.btn,
.filters_bar .block:not(.always_open) .title,
.more_info .panels .panel.right .section.features ul li .sides,
ul.picker li {
  cursor: pointer;
}

/* ----- input - text tel number email ----------------------------------------------------------------- */

input[type='text'],
input[type='tel'],
input[type='number'],
input[type='email'] {
  background-color: var(--white);
  border: 1px solid var(--primary-tints-01-purple-tints-purple-60);
  border-radius: 4px;
  color: var(--primary-tints-02-dark-purple-tints-purple-dark-60);
  float: left;
  font-family: var(--font-family-oak);
  font-size: 16px;
  font-weight: normal;
  height: 56px;
  max-width: 416px;
  outline: none;
  padding: 0 16px;
  width: 100%;
}

/* Chrome, Safari, Edge, Opera - fix to remove up and down arrows */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox - fix to remove up and down arrows */
input[type='number'] {
  -moz-appearance: textfield;
}

input[type='text']::placeholder,
input[type='tel']::placeholder,
input[type='number']::placeholder,
input[type='email']::placeholder {
  color: var(--charcoal-80);
  font-weight: normal;
}

input[type='text']:focus,
input[type='tel']:focus,
input[type='number']:focus,
input[type='email']:focus {
  box-shadow:
    0 0 0 3px #323a72,
    0 0 0 5px #fff;
}

/* ----- date ----------------------------------------------------------------- */

.date {
  background-color: var(--white);
  border: solid 1px var(--primary-tints-01-purple-tints-purple-60);
  border-radius: 4px;
  float: left;
  position: relative;
  width: 100%;
}

.date .inputs {
  float: left;
  position: relative;
  width: calc(100% - 56px);
}

.question .date .inputs {
  width: 100%;
}

.date .inputs:before,
.date .inputs:after {
  background-color: var(--purple-80);
  content: '';
  height: 24px;
  position: absolute;
  top: calc(50% - 12px);
  width: 1px;
  z-index: 1;
}

.date .inputs:before {
  left: calc(100% / 3);
}

.date .inputs:after {
  right: calc(100% / 3);
}

.date .inputs input {
  border-color: transparent;
  position: relative;
  text-align: center;
  width: calc(100% / 3);
}

.date .inputs input:focus {
  border-color: var(--purple-40);
  z-index: 2;
}

.date .datepicker {
  float: left;
  width: 56px;
}

.question.dob .date .datepicker {
  display: none;
}

.date .datepicker input.hasDatepicker {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

.date .datepicker button {
  background-color: var(--white);
  background-image: url(../img/icon_calendar_purple.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: transparent;
  float: left;
  height: 56px;
  outline: none;
  position: relative;
  width: 56px;
}

.date .datepicker button:focus {
  background-color: var(--white);
  border-color: var(--purple-40);
  border-width: 1px;
  box-shadow:
    0 0 0 3px #323a72,
    0 0 0 5px #fff;
}

/* ----- select ----------------------------------------------------------------- */

.select {
  background-color: var(--white);
  border: 1px solid var(--purple-40);
  border-radius: 4px;
  float: left;
  max-width: 416px;
  position: relative;
  transition: border-color 0.3s ease;
  width: 100%;
}

.select:after {
  background-image: url(../img/chevron_purple.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px auto;
  content: '';
  height: 24px;
  margin: auto;
  position: absolute;
  top: calc(50% - 12px);
  right: 16px;
  transform: rotate(180deg);
  width: 24px;
}

.select select {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: 0;
  color: var(--charcoal);
  float: left;
  font-family: var(--font-family-oak);
  font-size: 16px;
  font-weight: bold;
  height: 52px;
  outline: none;
  padding-right: 44px;
  padding-left: 14px;
  position: relative;
  text-overflow: ellipsis;
  width: 100%;
  z-index: 1;
}

.select select:focus {
  box-shadow:
    0 0 0 3px var(--primary-purple-dark),
    0 0 0 5px #fff;
}

.select select option {
  color: #002a6e;
  font-size: 18px;
  font-weight: 700;
}

/* ----- anchor --------------------------------------------------------------- */

a {
  color: var(--white);
}

/* ----- button ---------------------------------------------------------------- */

.btn,
a.btn,
button.btn {
  background-color: transparent;
  border: 0;
  outline: none;
}

/* ----- button - green ---------------------------------------------------------------- */

.btn.green,
a.btn.green,
button.btn.green {
  background-color: #189507;
  background-image: linear-gradient(#31ae20, #006300);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.1),
    0 0 0 0 #42bc32,
    2px 2px 2px 0 rgba(0, 0, 0, 0.1);
  color: #fff;
  float: left;
  font-family: var(--font-family-ash);
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
  padding: 12px 16px;
  text-align: center;
  text-decoration: none;
  transition: box-shadow 0.35s;
}

.btn.green:hover,
a.btn.green:hover,
button.btn.green:hover,
.btn.green:focus,
a.btn.green:focus,
button.green:focus {
  background-color: #31ae20;
  background-image: linear-gradient(#4ac739, #007c00);
}

/* ----- button - secondary_cta ---------------------------------------------------------------- */

.btn.secondary_cta,
a.btn.secondary_cta,
button.btn.secondary_cta {
  background-color: #fff;
  /*background-image: linear-gradient(to right, #776fb1 -102%, var(--pink) 92%);*/
  border: 3px solid var(--primary-purple);
  border-radius: 4px;
  color: var(--primary-purple);
  float: left;
  font-family: var(--font-family-oak);
  font-size: 16px;
  font-weight: bold;
  line-height: 16px;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}

.btn.secondary_cta:hover,
a.btn.secondary_cta:hover,
button.btn.secondary_cta:hover {
  box-shadow: inset 0 0 0 2px var(--primary-purple);
}

/* ----- button - purple_rounded ---------------------------------------------------------------- */

.btn.purple_rounded,
a.btn.purple_rounded,
button.btn.purple_rounded {
  background-color: var(--primary-purple);
  /*background-image: linear-gradient(to right, #776fb1 -102%, var(--pink) 92%);*/
  border-radius: 4px;
  color: #fff;
  float: left;
  font-family: var(--font-family-oak);
  font-size: 16px;
  font-weight: bold;
  line-height: 16px;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}

.btn.purple_rounded:hover,
a.btn.purple_rounded:hover,
button.btn.purple_rounded:hover {
  box-shadow: 0 0 0 2px var(--primary-purple);
}

/* ----- button - white_rounded ---------------------------------------------------------------- */

.btn.white_rounded,
a.btn.white_rounded,
button.btn.white_rounded {
  background-color: #fff;
  border-radius: 4px;
  color: var(--primary-purple);
  float: left;
  font-family: var(--font-family-ash);
  font-size: 16px;
  font-weight: bold;
  line-height: 16px;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
}

/* ----- button - purple_stroke_rounded ---------------------------------------------------------------- */

.btn.purple_stroke_rounded,
a.btn.purple_stroke_rounded,
button.btn.purple_stroke_rounded {
  background-color: #776fb1;
  background-image: linear-gradient(to right, #776fb1 -102%, var(--pink) 92%);
  border-radius: 4px;
  color: var(--pink);
  float: left;
  font-family: var(--font-family-ash);
  font-size: 16px;
  font-weight: bold;
  line-height: 16px;
  padding: 3px;
  text-align: center;
  text-decoration: none;
}

.btn.purple_stroke_rounded .white,
a.btn.purple_stroke_rounded .white,
button.btn.purple_stroke_rounded .white {
  background-color: #fff;
  border-radius: 4px;
  float: left;
  font-weight: bold;
  line-height: 16px;
  padding: 13px 21px;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

/* ----- button - white_stroke_rounded ---- WHITE ON THE EMOTIONAL JOURNEY / PINK ON THE FUNCTIONAL JOURNEY ----------------------------------------------------------- */

.btn.white_stroke_rounded,
a.btn.white_stroke_rounded,
button.btn.white_stroke_rounded {
  background-color: transparent;
  border: 3px solid var(--white);
  border-radius: 4px;
  color: var(--white);
  float: left;
  font-family: var(--font-family-ash);
  font-size: 16px;
  font-weight: bold;
  line-height: 18px;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
}

/* ----- button - white_text_underline ---------------------------------------------------------------- */

.btn.white_text_underline,
a.btn.white_text_underline,
button.btn.white_text_underline {
  color: var(--white);
  display: flex;
  float: left;
  font-family: var(--font-family-ash);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  position: relative;
  text-decoration: underline;
}

.btn.white_text_underline.cover_needs {
  padding-left: 24px;
}

.btn.white_text_underline .icon,
a.btn.white_text_underline .icon,
button.btn.white_text_underline .icon {
  background-repeat: no-repeat;
  background-size: contain;
  display: none;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
}

.btn.white_text_underline.cover_needs .icon {
  background-image: url(../img/icon_document_white.svg);
  display: block;
}

.btn.white_text_underline .text {
  float: left;
  text-decoration: underline;
}

.btn.white_text_underline:hover .text,
a.btn.white_text_underline:hover .text,
button.btn.white_text_underline:hover .text {
  text-decoration-thickness: 3px;
}

/* ----- button - pink_txt_underline ---- PINK ON THE EMOTIONAL JOURNEY ---------------------------------------------- */

.btn.pink_text_underline,
a.btn.pink_text_underline,
button.btn.pink_text_underline {
  color: var(--ms-7-purple);
  float: left;
  font-family: var(--font-family-oak);
  font-size: 14px;
  font-weight: normal;
  line-height: 1.57;
  text-decoration: underline;
}

.btn.pink_text_underline:hover,
a.btn.pink_text_underline:hover,
button.btn.pink_text_underline:hover {
  text-decoration-thickness: 3px;
}

.btn.pink_text_underline:focus,
a.btn.pink_text_underline:focus,
button.pink_text_underline:focus {
  background-color: #007a72;
  color: #fff;
  text-decoration-thickness: 3px;
}

/* ----- button - green_text_only ---------------------------------------------------------------- */

.btn.green_text_only,
a.btn.green_text_only,
button.btn.green_text_only {
  background-color: transparent;
  color: #baed87;
  float: left;
  font-family: var(--font-family-oak);
  font-size: 17px;
  line-height: 24px;
  text-align: left;
  text-decoration: none;
}

a.btn.green_text_only:hover,
button.btn.green_text_only:hover {
  text-decoration: underline;
}

/* ----- button - close ---------------------------------------------------------------- */

.btn.close,
a.btn.close,
button.btn.close {
  background-image: url(../img/cross_purple.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px auto;
  float: left;
  height: 24px;
  text-decoration: none;
  width: 24px;
}

/* ----- ul selection ------------------------------------------------------------- */

ul.selection {
}

ul.selection li {
}

ul.selection li + li {
  margin-top: 8px;
}

ul.selection li input {
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

/* ----- ul selection - style ------------------------------------------------------------ */

ul.selection li .style {
  background-color: rgba(157, 132, 177, 0.2);
  border: 1px solid var(--purple-40);
  border-radius: 4px;
  float: left;
  font-family: var(--font-family-oak);
  padding: 16px;
  width: calc(100%);
}

ul.selection li input:focus + .style {
  box-shadow:
    0 0 0 3px #323a72,
    0 0 0 5px #fff;
}

ul.selection li input:hover + .style {
  background-color: rgba(157, 132, 177, 0.4);
}

ul.selection li input:checked + .style {
  background-color: var(--white);
  border-color: var(--white);
  border-width: 2px;
}

ul.selection li input:checked:hover + .style {
  border-color: var(--white);
}

ul.selection li input[type='checkbox']:checked + .style {
  border-color: var(--purple-40);
}

ul.selection li input:hover + .style,
ul.selection li input:checked:focus + .style {
  border-color: var(--purple-40);
}

ul.selection li input:disabled + .style {
  background-color: rgba(157, 132, 177, 0.2);
  border-color: var(--purple-40);
  border-width: 1px;
  opacity: 0.5;
}

ul.selection li input:disabled:hover + .style {
  border-width: 1px;
}

input[type='radio']:disabled {
  cursor: default;
  pointer-events: none;
}

/* ----- ul selection - icon ------------------------------------------------------------ */

ul.selection li .style .icon {
  align-items: center;
  background-color: var(--white);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid var(--purple-40);
  display: flex;
  float: left;
  height: 24px;
  justify-content: center;
  position: relative;
  width: 24px;
}

ul.selection li input[type='radio'] + .style .icon {
  border-radius: 50%;
}

ul.selection li input[type='checkbox'] + .style .icon {
  border-radius: 4px;
}

ul.selection li input:hover + .style .icon {
  border-color: var(--purple-40);
}

ul.selection li input:checked + .style .icon {
  border-color: var(--primary-purple);
}

ul.selection li input[type='checkbox']:checked + .style .icon {
  border-color: var(--purple-40);
}

ul.selection li input:hover + .style .icon,
ul.selection li input:checked + .style .icon {
  border-width: 2px;
}

ul.selection li input[type='checkbox']:checked + .style .icon {
  background-image: url(../img/tick_purple_gradient.svg);
  background-size: 14px auto;
}

ul.selection li input[type='radio']:checked + .style .icon:before {
  background-color: var(--primary-purple-neon);
  border-radius: 50%;
  content: '';
  height: 10px;
  width: 10px;
}

/* ----- ul selection - text ------------------------------------------------------------ */

ul.selection li .style .text {
  color: var(--white);
  float: left;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  padding-left: 16px;
  width: calc(100% - 24px);
}

ul.selection li input:checked + .style .text {
  color: var(--primary-purple);
}

ul.selection li .style .text p {
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  margin-top: 0;
}

/* ######################################################################## */
/* #### Quote - CODE: lmnbd ############################################### */
/* ######################################################################## */

/* ----- quote ------------------------------------- */

.container100.quote {
  overflow: hidden;
}

/* ----- wave_bg ------------------------------------- */

.wave_bg {
  background-image: url(../img/wave_emotional_320_bg.svg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  left: -2px;
  width: calc(100% + 4px);
}

/* ----- .full_popup ------------------------------------- */

.full_popup {
  align-items: end;
  display: flex;
  height: 100%;
  justify-content: center;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  visibility: hidden;
  width: 100%;
  z-index: 4;
}

.full_popup.show {
  opacity: 1;
  visibility: visible;
}

.full_popup .bg {
  background-image: radial-gradient(circle at 64% 64%, var(--primary-tints-01-purple-tints-purple-20), var(--primary-tints-01-purple-tints-purple-20) 30%, var(--secondary-blue-light) 100%);
  height: 100%;
  opacity: 0.8;
  position: absolute;
  width: 100%;
}

.full_popup .box {
  background-color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  max-width: 728px;
  padding: 32px 24px;
  position: relative;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  width: 100%;
}

.full_popup .box .text {
  width: 100%;
}

.full_popup .box .text .title {
  color: var(--primary-purple);
  float: left;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.45;
  width: 100%;
}

.full_popup .box .text p {
  color: var(--primary-purple-dark);
  float: left;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 20px 0 0 0;
  width: 100%;
}

.full_popup .box button.close {
  align-items: center;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: var(--primary-purple);
  cursor: pointer;
  display: flex;
  font-family: var(--font-family-ash);
  font-size: 16px;
  font-weight: 500;
  gap: 10px;
  justify-content: center;
  line-height: 1.5;
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  text-align: center;
  touch-action: manipulation;
  width: 100%;
}

.full_popup .box button.close span.c_icon {
  background-image: url(../img/icon_cross_purple.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  height: 16px;
  width: 16px;
}

@media (min-width: 768px) {
  .full_popup {
    align-items: center;
  }

  .full_popup .box {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 48px 140px 48px 48px;
  }

  .full_popup .box .text .title {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
  }

  .full_popup .box button.close {
    top: 16px;
    bottom: auto;
    right: 16px;
    width: auto;
  }
}

/* ----- summary_container / summary_card ---------------------------------------------------------------- */

.summary_container {
  float: left;
  /*margin-top: 32px;*/
  width: 100%;
}

.summary_container .summary_card {
  background-color: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
  color: var(--charcoal-80);
  float: left;
  /*margin-top: 16px;*/
  max-width: 416px;
  padding: 16px;
  width: 100%;
}

.summary_container .summary_card .icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  float: left;
  height: 24px;
  width: 24px;
}

.summary_container .summary_card.home_icon .icon {
  background-image: url(../img/icon_home_primary_purple.svg);
}

.summary_container .summary_card.vehicle_icon .icon,
.vehicle[data-type='car'] .summary_container .summary_card.vehicle_icon .icon {
  background-image: url(../img/icon_car_primary_purple.svg);
}

.vehicle[data-type='van'] .summary_container .summary_card.vehicle_icon .icon {
  background-image: url(../img/icon_van_primary_purple.svg);
}

.vehicle[data-type='bike'] .summary_container .summary_card.vehicle_icon .icon {
  background-image: url(../img/icon_motorbike_primary_purple.svg);
}

.summary_container .summary_card .info {
  border-radius: 12px;
  float: left;
  font-size: 14px;
  font-weight: normal;
  color: var(--primary-purple-dark);
  line-height: 22px;
  padding-left: 16px;
  width: calc(100% - 24px);
}

.summary_container .summary_card button.change {
  margin-top: 16px;
}

/* ----- slide ---------------------------------------------------------------- */

.slide {
  float: left;
  position: relative;
  width: 100%;
}

body.slide_cover .slide,
body.slide_personal_details .slide {
  padding-top: 56px;
}

@media (min-width: 620px) {
  body.slide_cover .slide,
  body.slide_personal_details .slide {
    padding-top: 88px;
  }
}

@keyframes slide_fade {
  from {
    opacity: 0;
    top: 40px;
  }
  to {
    opacity: 1;
    top: 0;
  }
}

.slide.current {
  animation: slide_fade 0.8s normal forwards ease;
}

.slide .title {
  color: var(--primary-purple);
  float: left;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.25;
  width: 100%;
}

.slide .subtitle {
  color: var(--primary-tints-02-dark-purple-tints-purple-dark-80);
  float: left;
  font-family: var(--font-family-oak);
  font-size: 18px;
  font-weight: normal;
  line-height: 1.56;
  margin-top: 16px;
  width: 100%;
}

/* ----- slide - button.btn.next_slide --------------------------------------------------------------- */

.slide button.btn.next_slide {
  clear: both;
  color: var(--white);
  display: none;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  margin-top: 24px;
  position: relative;
}

.slide:not(#marketing) .emotional_form button.btn.next_slide {
  margin-top: 56px;
  padding: 0 30px 0 0;
}

body.no_next .slide button.btn.next_slide {
  display: block;
}

.slide button.btn.next_slide span.underline {
  border-bottom: 2px solid var(--white);
}

.slide button.btn.next_slide:hover span.underline {
  border-bottom-style: dashed;
}

.slide button.btn.next_slide svg {
  height: 100%;
  position: absolute;
  top: 0;
  left: calc(100% - 24px);
}

.slide button.btn.next_slide svg path#arrow {
  transition: 0.2s;
}

.slide button.btn.next_slide:hover svg path#arrow {
  transform: translateX(40%);
}

/* ----- slide - form_section --------------------------------------------------------------- */

.slide .form_section {
  float: left;
  margin-top: 0px;
  width: 100%;
}

.slide .title + .form_section,
.slide .form_section + .form_section {
  margin-top: 56px;
}

.slide .form_section .header,
.slide .form_section .subheader {
  color: var(--white);
  float: left;
  max-width: 524px;
  width: 100%;
}

.slide .form_section .header {
  font-size: 32px;
  font-weight: bold;
  line-height: 40px;
}

.slide .form_section .subheader {
  font-family: var(--font-family-oak);
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
  margin-top: 8px;
}

.slide .form_section .text_block {
  color: var(--white);
  display: flex;
  flex-direction: column;
  float: left;
  font-family: var(--font-family-oak);
  font-size: 16px;
  gap: 12px;
  line-height: 24px;
  margin-top: 12px;
  width: 100%;
}

.slide .form_section .questions {
  clear: both;
  float: left;
  width: 100%;
}

.slide .form_section .questions .question {
  float: left;
  margin-top: 32px;
  width: 100%;
}

.slide .form_section .questions .question + .question,
.slide .form_section .questions .question.postcode {
  margin-top: 56px;
}

.slide .form_section .header.skip + .questions .question:first-of-type {
  margin-top: 0; /* Remove margin on first question when there is no header */
}

/* ----- .question_group.address_lookup -------------------------------------------------------------- */

.question_group.address_lookup .question {
  display: none;
}

.question_group.address_lookup[data-view='initial'] .question.postcode,
.question_group.address_lookup[data-view='searching'] .question.postcode,
.question_group.address_lookup[data-view='not_found'] .question.postcode {
  display: block;
}

.question_group.address_lookup[data-view='not_found'] .question.house,
.question_group.address_lookup[data-view='not_found'] .question.house_no {
  display: block;
}

.question_group.address_lookup[data-view='not_found'] .question.address_1 {
  display: block;
}

.question_group.address_lookup[data-view='not_found'] .question.address_2 {
  display: block;
}

.question_group.address_lookup[data-view='not_found'] .question.address_3 {
  display: block;
}

.question_group.address_lookup[data-view='not_found'] .question.address_4 {
  display: block;
}

.question_group.address_lookup[data-view='found'] .question.picker {
  display: block;
}

.question_group.address_lookup[data-view='summary'] .question.summary {
  display: block;
}

.question_group.address_lookup button.find-address {
  display: none;
  margin-top: 16px;
}

.question_group.address_lookup[data-view='initial'] button.find-address {
  display: block;
  font-family: var(--font-family-oak);
}

.question_group.address_lookup button.back-to-postcode-search {
  display: none;
  margin-top: 16px;
}

.question_group.address_lookup[data-view='not_found'] button.back-to-postcode-search {
  display: block;
}

.question_group.address_lookup button.manual-entry {
  margin-top: 16px;
  text-align: left;
}

.question_group.address_lookup .or_manual {
  align-items: center;
  clear: both;
  display: none;
  float: left;
  gap: 8px;
  margin-top: 10px;
}

.question_group.address_lookup[data-view='initial'] .or_manual {
  display: flex;
}

.question_group.address_lookup .or_manual span.or {
  color: var(--primary-tints-02-dark-purple-tints-purple-dark-80);
  font-family: var(--font-family-oak);
  font-size: 14px;
  line-height: 1.57;
}

.question_group.address_lookup .or_manual button.manual-entry {
  margin-top: 0;
  font-family: var(--font-family-oak);
  text-decoration: none;
}

.question_group.address_lookup .or_manual button.manual-entry:focus,
.question_group.address_lookup .or_manual button.manual-entry:hover {
  text-decoration: underline;
}

/* ----- slide - form_section - information -------------------------------------------------------------- */

.slide .form_section .questions .question .information {
  float: left;
  position: relative;
  width: 100%;
}

.slide .form_section .questions .question .information .label {
  color: var(--white);
  float: left;
  font-family: var(--font-family-oak);
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  position: relative;
  transition: padding-left 0.3s ease;
  width: 100%;
}

.slide .form_section .questions .question.valid:not(.delay_tick) .information .label,
.slide .form_section .questions .question.has_msg_error .information .label {
  padding-left: 40px;
}

.slide .form_section .questions .question.has_help_text .information .label {
  padding-right: 40px;
}

.slide .form_section .questions .question .information .label .state {
  background-color: var(--ui-palette-01-semantic-scarlet);
  background-image: url(../img/icon_tick_navy.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
  border-radius: 50%;
  color: var(--purple-140);
  display: none;
  font-size: 18px;
  height: 24px;
  line-height: 24px;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 24px;
}

.slide .form_section .questions .question.valid:not(.delay_tick) .information .label .state,
.slide .form_section .questions .question.has_msg_error .information .label .state {
  display: block;
}

.slide .form_section .questions .question.valid:not(.delay_tick) .information .label .state {
  background-color: var(--ui-palette-01-semantic-mint);
  background-image: url(../img/icon_tick_navy.svg);
}

.slide .form_section .questions .question.has_msg_error .information .label .state {
  background-color: var(--ui-palette-01-semantic-scarlet);
  background-image: url(../img/icon_exclamation_navy.svg);
  background-size: auto 14px;
}

.slide .form_section .questions .question .information .subtext {
  color: var(--white);
  float: left;
  font-family: var(--font-family-oak);
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  margin-top: 8px;
  width: 100%;
}

.slide .form_section .questions .question .information button.help_icon {
  background-color: transparent;
  border: 0;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
}

.slide .form_section .questions .question.has_help_text .information button.help_icon {
  display: block;
}

.slide .form_section .questions .question .information button.help_icon .circle {
  background-color: transparent;
  background-image: url(../img/icon_i_white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 12px;
  border: 2px solid var(--white);
  border-radius: 50%;
  color: var(--white);
  float: left;
  height: 24px;
  line-height: 20px;
  text-align: center;
  width: 24px;
}

.slide .form_section .questions .question .information button.help_icon:hover .circle {
  border-width: 3px;
}

.slide .form_section .questions .question .information button.help_icon:focus .circle {
  box-shadow:
    0 0 0 3px #323a72,
    0 0 0 5px #fff;
}

.slide .form_section .questions .question.show_help_text .information button.help_icon .circle {
  background-color: var(--white);
  background-image: url(../img/icon_i_primary_purple.svg);
  color: var(--primary-purple);
}

.slide .form_section .questions .question .information button.help_icon .text {
  border-bottom: 2px solid var(--white);
  color: var(--white);
  display: none;
  float: left;
  font-family: var(--font-family-ash);
  font-size: 16px;
  font-weight: bold;
  line-height: 18px;
  margin-left: 8px;
  margin-top: 2px;
}

.slide .form_section .questions .question .information .help_text {
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(var(--ms-7-purple), var(--primary-purple-neon)) border-box;
  border: 3px solid transparent;
  background-color: var(--white);
  border-radius: 4px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
  color: var(--ms-7-purple);
  display: none;
  float: left;
  font-weight: normal;
  margin-top: 8px;
  padding: 16px;
  width: 100%;
}

.slide .form_section .questions .question.show_help_text .information .help_text {
  display: block;
}

.slide .form_section .questions .question .information .help_text,
.slide .form_section .questions .question .information .help_text h3 {
  font-family: var(--font-family-oak);
  font-size: 14px;
  line-height: 1.5;
}

.slide .form_section .questions .question .information .help_text p {
  float: left;
  width: 100%;
}

.slide .form_section .questions .question .information .help_text p + p {
  margin-top: 14px;
}

.slide .form_section .questions .question .information .help_text p a {
  color: var(--ms-7-purple);
}

/* ----- slide - form_section - answer -------------------------------------------------------------- */

.slide .form_section .questions .question .answer {
  float: left;
  margin-top: 16px;
  max-width: 416px;
  width: 100%;
}

.slide .form_section .questions .question.has_msg_info .answer .message.info,
.slide .form_section .questions .question.has_msg_warning .answer .message.warning,
.slide .form_section .questions .question.has_msg_standard .answer .message.standard,
.slide .form_section .questions .question.has_msg_error .answer .message.error {
  display: block;
}

.slide .form_section .questions .question.has_msg_info.has_msg_info .answer .message.info,
.slide .form_section .questions .question.has_msg_error.has_msg_warning .answer .message.warning {
  margin-top: 8px;
}

.slide .form_section .questions .question .answer .field {
  float: left;
  width: 100%;
}

.slide .form_section .questions .question.has_msg_info .answer .field,
.slide .form_section .questions .question.has_msg_warning .answer .field,
.slide .form_section .questions .question.has_msg_error .answer .field {
  margin-top: 8px;
}

.slide .form_section .questions .children {
  border-left: 2px solid var(--white);
  float: left;
  margin-top: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  width: 100%;
}

.slide .form_section .questions .children .question:nth-of-type(1) {
  margin-top: 16px;
}

.slide .form_section .confirmation {
  clear: both;
  color: var(--white);
  float: left;
  font-family: var(--font-family-oak);
  font-size: 16px;
  line-height: 24px;
  margin-top: 40px;
  max-width: 524px;
  width: 100%;
}

.slide .white_form .form_section .confirmation {
  color: var(--primary-tints-02-dark-purple-tints-purple-dark-80);
}

.slide .form_section .confirmation a {
  color: var(--white);
  font-family: var(--font-family-ash);
  font-weight: bold;
}

.slide .white_form .form_section .confirmation a {
  color: var(--primary-tints-02-dark-purple-tints-purple-dark-80);
}

/* ----- slide - pound_sign --------------------------------------------------------------- */

.question.pound_sign .answer .field:before {
  content: '\00a3';
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  position: absolute;
  top: 7px;
  left: 15px;
  font-family: var(--font-family-oak);
  color: var(--primary-tints-02-dark-purple-tints-purple-dark-80);
}

.question.pound_sign .answer .field input {
  padding: 0 28px;
}

.question.pound_sign .answer .field {
  position: relative;
}

/* ----- slide - error --------------------------------------------------------------- */

.question.has_msg_error .answer .field input[type='text'],
.question.has_msg_error .answer .field input[type='tel'],
.question.has_msg_error .answer .field input[type='number'],
.question.has_msg_error .answer .field input[type='email'],
.question.has_msg_error .answer .field .select,
.question.has_msg_error .answer .field .date {
  border-color: var(--ui-palette-01-semantic-scarlet);
  border-width: 2px;
}

.question.has_msg_error .answer .field .date input[type='text'],
.question.has_msg_error .answer .field .date input[type='number'] {
  border-width: 0;
}

/* ----- slide - picker --------------------------------------------------------------- */

ul.picker {
  background-color: var(--white);
  border-radius: 4px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
  color: var(--primary-tints-02-dark-purple-tints-purple-dark-80);
  float: left;
  font-family: var(--font-family-oak);
  font-size: 14px;
  font-weight: normal;
  line-height: 1.57;
  max-height: 232px;
  overflow: auto;
  width: 100%;
}

.slide .form_section .questions .question .answer ul.picker {
  margin-top: 16px;
}

/* width */
ul.picker::-webkit-scrollbar {
  border-bottom: 8px solid #fff;
  border-top: 8px solid #fff;
  width: 16px;
}

/* Track */
ul.picker::-webkit-scrollbar-track {
}

/* Handle */
ul.picker::-webkit-scrollbar-thumb {
  background-color: var(--primary-tints-02-dark-purple-tints-purple-dark-60);
  border: 4px solid #fff;
  border-radius: 4px;
  width: 8px;
}

ul.picker li {
  float: left;
  padding: 8px 16px;
  width: 100%;
}

ul.picker li + li {
  border-top: 1px solid var(--primary-tints-01-purple-tints-purple-20);
  margin-top: 0;
}

ul.picker li:hover {
  background-color: var(--primary-tints-01-purple-tints-purple-5);
  color: var(--primary-purple);
}

/* ----- assets --------------------------------------------------------------------------------------------------- */

.assets {
  display: none;
}

/* ----- slide - emotional_form / white_form / wave end --------------------------------------------------------------- */

.slide .emotional_form,
.slide .white_form {
  float: left;
  position: relative;
  width: 100%;
}

.slide .emotional_form {
  padding: 24px 0 calc(104px + 52px) 0;
}

.slide#cover_summary .emotional_form {
  padding-bottom: 48px;
}

.slide .white_form {
  background-color: var(--white);
  padding: 40px 0;
}

@media (min-width: 620px) {
  .slide .white_form {
    padding-bottom: 48px;
    padding-top: 48px;
  }
}

@media (min-width: 768px) {
  .slide .white_form {
    padding-bottom: 64px;
    padding-top: 64px;
  }
}

@keyframes white_form_fade {
  from {
    opacity: 0;
    top: 180px;
  }
  to {
    opacity: 1;
    top: 0;
  }
}

body.transition .slide .white_form {
  animation: white_form_fade 0.8s normal forwards ease;
  display: block;
}

.slide .emotional_form .container,
.slide .white_form .container {
  margin: 0 auto;
  max-width: 376px;
  width: calc(100% - 48px);
}

.slide .white_form:after {
  background-image: url(../img/wave_emotional_320_end.svg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: none;
  height: 71px;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
}

/* ----- slide - buttons --------------------------------------------------------------- */

.slide .buttons {
  clear: both;
  float: left;
  margin-top: 24px;
}

/* ----- slide - cover_summary --------------------------------------------------------------- */

.slide#cover_summary .cover_header {
  color: var(--white);
  float: left;
  width: 100%;
}

.slide#cover_summary .cover_header .icon {
  background-image: url(../img/icon_breakdown_truck.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  float: left;
  height: 34px;
  width: 100%;
}

.slide#cover_summary .cover_header .big {
  float: left;
  font-size: 32px;
  font-weight: bold;
  line-height: 36px;
  margin-top: 16px;
  text-align: center;
  width: 100%;
}

.slide#cover_summary .cover_header .cover_type {
  float: left;
  font-family: var(--font-family-oak);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin-top: 24px;
  text-align: center;
  width: 100%;
}

.slide#cover_summary .cover_header .include_exclude {
  float: left;
  font-family: var(--font-family-oak);
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
  margin-top: 16px;
  text-align: center;
  width: 100%;
}

.slide#cover_summary .cover_header .include_exclude ul li {
  clear: both;
  left: 50%;
  margin-top: 4px;
  padding-left: 24px;
  transform: translateX(-50%);
  width: auto;
}

.slide#cover_summary .cover_header .include_exclude ul li .icon {
  background-image: url(../img/icon_cross_white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
}

.slide#cover_summary .cover_header .include_exclude ul li.o_home .icon,
.slide#cover_summary .cover_header .include_exclude ul li.o_onward .icon {
  background-image: url(../img/icon_tick_white.svg);
}

.slide#cover_summary .extra_info {
  color: #747474;
  float: left;
  font-family: var(--font-family-oak);
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
  max-width: 540px;
  width: 100%;
}

.slide#cover_summary .extra_info ul.bullet {
  font-size: 16px;
  line-height: 24px;
  margin-top: 16px;
}

.slide#cover_summary .extra_info ul.bullet li {
  padding-left: 20px;
}

.slide#cover_summary .extra_info ul.bullet li:before {
  background-color: var(--primary-purple);
  height: 8px;
  top: 8px;
  width: 8px;
}

.slide#cover_summary .extra_info p {
  float: left;
  width: 100%;
}

.slide#cover_summary .extra_info p + p,
.slide#cover_summary .extra_info ul + p {
  margin-top: 16px;
}

.slide#cover_summary .extra_info b {
  color: var(--charcoal);
  font-weight: 600;
}

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

.container100 {
  float: left;
  position: relative;
  width: 100%;
}

.container100 .container {
  margin: 0 auto;
  position: relative;
  /*width: calc(100% - 48px);*/
  width: 100%;
}

body#results .container100 .container,
body#broken_down .container100 .container,
body#transfer .container100 .container {
  width: calc(100% - 16px);
}

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

.container100.header {
  padding: 24px 0;
  z-index: 1;
}

.container100.header .container {
  display: flex;
  justify-content: space-between;
}

body#details .container100.header {
  display: none;
}

@keyframes results_push {
  from {
    opacity: 0;
    margin-top: 500px;
  }
  to {
    opacity: 1;
    margin-top: 0px;
  }
}

body#broken_down[data-view='results'] .container100.header,
body#results[data-view='results'] .container100.header {
  animation: results_push 0.8s normal forwards ease;
}

.container100.header .left {
  align-items: center;
  display: flex;
  float: left;
  gap: 14px;
}

.container100.header .left .msm_logo {
  height: auto;
  width: auto;
}

.container100.header .left .msm_logo a.link {
  height: auto;
  position: relative;
  top: auto;
  left: auto;
  width: auto;
}

.container100.header .left .msm_logo img {
  float: left;
  height: 40px;
  opacity: 0;
}

.container100.header .left .provided_by {
  font-size: 14px;
  line-height: 18px;
}

.container100.header .left .provided_by span {
  clear: both;
  float: left;
}

.container100.header .left .provided_by span.prov {
  color: rgba(255, 255, 255, 0.8);
}

.container100.header .right {
  align-items: center;
  display: none;
}

.container100.header .right .quotes_found {
  color: var(--white);
  float: left;
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
}

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

button.btn.next_slide {
  float: left;
  /*font-family: 'HeadingNow75', sans-serif;*/
  font-family: var(--font-family-oak);
}

/*
button.btn.next_slide span.str_start,
body.slide_begin button.btn.next_slide span.str_next {
	display: none;
}

body.slide_begin button.btn.next_slide span.str_start {
	display: inline;
}
*/
body:not(.slide_begin) button.btn.next_slide span.str_start,
body:not(.slide_vehicle.prevent_eu) button.btn.next_slide span.str_ok,
body.slide_begin button.btn.next_slide span.str_next,
body.slide_vehicle.prevent_eu button.btn.next_slide span.str_next {
  /*body:not(:not(.slide_begin, .slide_vehicle.prevent_eu)) button.btn.next_slide span.str_next {*/
  display: none;
}

button.btn.next_slide svg path {
  fill: var(--pink);
}

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

.container100.progress {
  padding: 16px 0;
}

body.slide_cover .container100.progress,
body.slide_personal_details .container100.progress {
  background-image: radial-gradient(circle at 64% 64%, var(--primary-tints-01-purple-tints-purple-80), var(--primary-tints-01-purple-tints-purple-80) 30%, var(--secondary-blue));
  background-position: top center;
  background-repeat: no-repeat;
  min-height: 56px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}

.container100.progress .container,
.container100.footer .container {
  max-width: 376px;
  width: calc(100% - 48px);
}

body#broken_down .container100.progress .container,
body#results .container100.progress .container,
body#transfer .container100.progress .container {
  width: calc(100% - 48px);
}

.container100.progress a.btn.prev_slide,
.container100.progress button.btn.prev_slide {
  background-image: url(../img/icon_arrow_white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px auto;
  display: block;
  float: left;
  height: 24px;
  width: 24px;
}

body.slide_begin .container100.progress a.btn.prev_slide,
body.slide_begin .container100.progress button.btn.prev_slide {
  display: none;
}

.container100.progress button.btn.next_slide {
  background-color: var(--white);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  color: var(--pink);
  font-size: 16px;
  font-weight: bold;
  line-height: 64px;
  padding: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;
  z-index: 2;
}

body.no_next .container100.progress button.btn.next_slide {
  display: none;
}

.container100.progress .progress_bar {
  background-color: rgba(224, 216, 231, 0.32);
  border-radius: 22px;
  display: none;
  float: right;
  margin: 4px 0;
  padding: 2px;
  width: calc(100% - 24px - 24px);
}

body.slide_cover .container100.progress .progress_bar,
body.slide_personal_details .container100.progress .progress_bar {
  display: block;
}

.container100.progress .progress_bar .bar {
  background-color: var(--mint-neon);
  border-radius: 22px;
  height: 12px;
  transition: width 0.4s ease;
  width: 0;
}

/* ---- quote ---------------------------------------------------------------- */

.container100.quote {
  min-height: calc(100vh - 56px + 52px);
}

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

.container100.footer {
  background-color: var(--primary-purple-dark);
  color: var(--white);
  padding: 40px 0;
  /*
	z-index: 1;
	*/
}

body#details .container100.footer {
  padding-bottom: calc(48px + 52px);
}

.container100.footer .wav {
  display: none;
  height: 92px;
  position: absolute;
  top: -52px;
  left: 0;
  width: 100%;
}

.container100.footer .wav svg {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.container100.footer .msm_logo {
  background-image: url(../img/logo_white_footer.svg?v=8);
  background-position: top left;
  background-size: auto 28px;
  border-bottom: 1px solid #8f8499;
}

.container100.footer .links {
  float: left;
  width: 100%;
}

.container100.footer .links ul {
  color: var(--white);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-ash);
  font-size: 14px;
  font-weight: bold;
  gap: 30px;
  line-height: 14px;
  margin-top: 30px;
}

.container100.footer .links ul li a {
  color: var(--white);
}

.container100.footer .links ul li a:hover,
.container100.footer .links ul li a:focus {
  text-decoration-thickness: 3px;
}

.container100.footer .links ul li a:focus {
  background-color: #42ebd7;
  color: var(--primary-purple);
}

.container100.footer .important_text {
  color: #faf9fb;
  float: left;
  font-family: var(--font-family-oak);
  font-size: 11px;
  line-height: 20px;
  margin-top: 28px;
  width: 100%;
}

.container100.footer .important_text p {
  float: left;
  width: 100%;
}

.container100.footer .important_text p + p {
  margin-top: 18px;
}

.container100.footer .important_text p.subtitle {
  font-size: 14px;
  font-weight: bold;
}

.container100.footer .important_text p a {
  font-size: 12px;
  font-weight: bold;
}

.container100.footer .download {
  color: #faf9fb;
  display: none;
  float: left;
  font-family: var(--font-family-oak);
  font-size: 13px;
  line-height: 20px;
  margin-top: 24px;
  width: 100%;
}

.container100.footer .download p {
  float: left;
  line-height: 40px;
  width: 100%;
}

.container100.footer .download p a {
  font-weight: bold;
}

.container100.footer .download ul {
  margin-top: 12px;
}

.container100.footer .download ul li {
  margin-top: 6px;
  width: auto;
}

.container100.footer .download ul li:nth-of-type(1) {
  margin-right: 16px;
}

.container100.footer .download ul li img {
  height: 40px;
}

.container100.footer .social {
  float: left;
  margin-top: 22px;
  width: 100%;
}

.container100.footer .social ul {
}

.container100.footer .social ul li {
  margin-right: 16px;
  margin-top: 16px;
  width: auto;
}

/* ################################################################## */
/* #### Results - CODE: uuant ####################################### */
/* ################################################################## */

/* ----- results_bg ------------------------------------- */

@keyframes results_bg_scroll_search {
  from {
    background-position: center 0px;
  }
  to {
    background-position: center 20%;
  }
}

@keyframes results_bg_scroll_found {
  from {
    background-position: center 20%;
  }
  to {
    background-position: center calc(20% - 500px);
  }
}

.results_bg {
  background-image: radial-gradient(circle at 64% 64%, var(--primary-tints-01-purple-tints-purple-80), var(--primary-tints-01-purple-tints-purple-80) 30%, var(--secondary-blue));

  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100% + 0px);
}

body[data-view='overlay'] .results_bg {
  /*animation: results_bg_scroll_search 12s forwards linear;*/
}

body[data-view='results'] .results_bg {
  /*animation: results_bg_scroll_found 0.8s forwards ease;*/
}

/* ---- Results - results_info ---------------------------------------------------------------- */

.container100.results_info {
  padding-top: 16px;
  padding-bottom: 24px;
}

.container100.results_info .summary {
  color: var(--white);
  float: left;
  font-family: var(--font-family-ash);
  font-size: 32px;
  font-weight: bold;
  line-height: 1.13;
  /*max-width: 740px;*/
  width: 100%;
}

.container100.results_info .summary a.btn.white_text_underline.cover_needs {
  display: none;
  float: none;
  margin-left: 4px;
}

.container100.results_info .buttons {
  display: flex;
  flex-wrap: wrap;
  float: left;
  gap: 16px 24px;
  margin-top: 24px;
  width: 100%;
}

.container100.results_info .buttons button.btn.filter {
  background-color: var(--white);
  border-radius: 4px;
  box-shadow: 0 4px 20px 0 rgba(61, 64, 61, 0.1);
  clear: both;
  color: var(--primary-purple);
  float: left;
  font-family: var(--font-family-ash);
  font-size: 15px;
  font-weight: normal;
  height: 48px;
  line-height: 16px;
  padding: 12px 24px;
}

.container100.results_info .buttons button.btn.filter .icon {
  background-image: url(../img/filter_purple.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  float: left;
  height: 16px;
  margin-right: 10px;
  width: 16px;
}

.container100.results_info .buttons .cover_needs_btn {
  align-items: center;
  display: flex;
  float: left;
}

/* ---- Results page - results_headers ---------------------------------------------------------------- */

.container100.results_headers {
  background-color: var(--primary-purple-dark);
  display: none;
  z-index: 1;
}

.container100.results_headers.sticky {
  position: fixed;
  top: 0;
}

body[data-view='overlay'] .container100.results_headers.sticky {
  opacity: 0;
  visibility: hidden;
}

.container100.results_headers .headers {
  display: grid;
  font-family: var(--font-family-ash);
  gap: 12px;
  padding: 16px;
  width: 100%;
}

.container100.results_headers .headers .header {
  color: var(--white);
  font-size: 13px;
  font-stretch: normal;
  font-style: normal;
  font-weight: normal;
  height: 54px;
  letter-spacing: 0.2px;
  line-height: 1.5;
  margin: 4px 0;
  /*padding: 0 14px;*/
}

.container100.results_headers .headers .header,
.container100.results_table .results .result {
  text-align: center;
}

.container100.results_table .boxes {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.container100.results_headers .headers .header,
.container100.results_table .results .result .card.desktop .box {
  align-items: center;
  display: flex;
  flex-direction: column;
  float: left;
  justify-content: center;
  width: auto;
}

.container100.results_table .results .result .card.desktop .box.more .defaqto_rating {
  height: 28px;
  margin-top: 10px;
  width: 100%;
}

.container100.results_table .results .result .card.desktop .box .center {
  align-items: center;
  display: flex;
  flex-direction: column;
}

/* ---- Results page - results ---------------------------------------------------------------- */

.container100.results_table {
  background-color: var(--purple-5);
  margin-top: 100px;
  padding-bottom: calc(48px + 52px);
}

@keyframes results_fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body[data-view='results'] .container100.results_info,
body[data-view='results'] .container100.results_headers,
body[data-view='results'] .container100.results_table {
  animation: results_fade 0.8s normal forwards ease;
}

.container100.results_headers.sticky,
body[data-view='results'] .container100.results_headers.sticky {
  animation: none;
}

.container100.results_table .wav {
  display: none;
  height: 122px;
  position: absolute;
  top: -52px;
  left: 0;
  width: 100%;
}

.container100.results_table .wav svg {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.container100.results_table .wav svg.w768 {
  opacity: 0;
  visibility: hidden;
}

.container100.results_table .results {
  float: left;
  margin-top: -100px;
  padding-left: 0;
  position: relative;
  width: 100%;
  z-index: 1;
}

.container100.results_table .results .result {
  float: left;
  width: 100%;
}

.container100.results_table .results .result + .result {
  margin-top: 16px;
}

.container100.results_table .results .result .card {
  background-color: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 20px 0 rgba(61, 64, 61, 0.1);
  color: var(--charcoal);
  float: left;
  padding: 24px;
  width: 100%;
}

.container100.results_headers .headers .separator {
  background-color: var(--purple-80);
}

.container100.results_table .result .separator {
  background-color: var(--purple-20);
}

/* ---- Results - result.sponsored ---------------------------------------------------------------- */

.container100.results_table .results .result.sponsored .card.desktop,
.container100.results_table .results .result.sponsored .card.mobile {
  border: 2px solid var(--mint);
  position: relative;
}

.container100.results_table .results .result.sponsored .card.mobile {
  padding-top: 50px;
}

.container100.results_table .results .result.sponsored .card.desktop {
  padding-top: 28px;
}

.container100.results_table .results .result.sponsored[data-has-info-bar='true'] .card.desktop {
  padding-top: 42px;
}

.container100.results_table .results .result.sponsored .card.mobile .boxes {
  display: grid;
  gap: 16px 12px;
  grid-template-areas:
    'mc_prov mc_price'
    'mc_info mc_info'
    'mc_booleans mc_booleans'
    'mc_defaqto mc_more';
  grid-template-columns: 5fr 8fr;
}

@media (min-width: 992px) {
  .container100.results_table .results .result.sponsored .card.mobile {
    display: none;
  }
}

.container100.results_table .results .result.sponsored .card .banner {
  display: grid;
  grid-template-columns: 160px 10px;
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
}

.container100.results_table .results .result.sponsored .card .text_sponsored {
  align-items: center;
  background-color: var(--mint);
  border-radius: 8px 0 0 0;
  /*clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);*/
  display: flex;
}

.container100.results_table .results .result.sponsored .card .text_sponsored p {
  color: var(--white);
  padding: 10px;
  text-align: left;
}

.container100.results_table .results .result.sponsored .card .text_sponsored .circle {
  background-image: url(../img/icon_i_white.svg);
  background-color: var(--mint);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 12px;
  border: 2px solid var(--white);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  float: left;
  height: 24px;
  line-height: 24px;
  position: relative;
  text-align: center;
  width: 24px;
}

.container100.results_table .results .result.sponsored .card .text_sponsored .circle .bubble {
  background-color: #fff;
  border-radius: 4px;
  color: #111;
  font-family: 'Helvetica Neue', 'HelveticaNeue', Helvetica, 'Arimo', Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.4;
  padding: 8px;
  position: absolute;
  bottom: 26px;
  left: calc(50% - 100px);
  width: 200px;
  z-index: 1;
}

.container100.results_table .results .result.sponsored .card .text_sponsored .circle .bubble:before {
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #ffffff transparent transparent transparent;
  content: '';
  height: 0;
  position: absolute;
  bottom: -8px;
  left: calc(50% - 10px);
  width: 0;
}

.container100.results_table .results .result.sponsored .card .corner {
  align-items: center;
  background-color: var(--mint);
  clip-path: polygon(0 0, 100% 0%, 0% 100%, 0% 100%);
  display: flex;
}

/* ---- Results - results_start ---------------------------------------------------------------- */

fieldset.results_start {
  border: 10px solid transparent;
  border-top-color: var(--01-primary-tints-01-purple-tints-purple-120);
  box-sizing: border-box;
  float: left;
  grid-area: 1 / 1;
  margin-top: 50px;
  padding: 20px;
  text-align: center;
  width: 100%;
}

fieldset.results_start legend {
  color: var(--01-primary-tints-01-purple-tints-purple-120);
  padding: 0 20px;
}

/* ---- Results - results - card - mobile + desktop --------------------------------------------------------------- */

.container100.results_table .results .result .card.mobile .booleans .boolean .circle,
.container100.results_table .results .result .card.desktop .box .boolean .circle {
  background-color: var(--primary-tints-02-dark-purple-tints-purple-dark-40);
  background-image: url(../img/icon_cross_white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 43% auto;
  border-radius: 50%;
  float: left;
  height: 32px;
  position: relative;
  width: 32px;
}

.container100.results_table .results .result .card.mobile .booleans .boolean.included .circle,
.container100.results_table .results .result .card.desktop .box .boolean.included .circle {
  background-color: var(--ui-palette-01-semantic-mint);
  background-image: url(../img/icon_tick_white.svg);
  background-size: 52% auto;
}

/* ---- .info_bar --------------------------------------------------------------- */

.info_bar {
  background-color: #e9f5fe;
  border-radius: 4px;
  color: #011055;
  display: none;
  font-family: var(--font-family-oak);
  font-size: 13px;
  font-weight: normal;
  gap: 10px;
  grid-template-columns: 1fr 64px;
  padding: 8px;
  position: relative;
  text-align: left;
  width: 100%;
}

.black_friday {
  background-color: #000;
  color: #fff;
  width: fit-content;
  padding: 2px 10px;
  font-size: 12px;
  margin-left: 20px;
}

.result[data-has-info-bar='true'] .info_bar {
  display: grid;
}

.card.mobile .info_bar {
  grid-area: mc_info_bar;
}

.card.mobile .info_bar[data-type='offer'] {
  grid-area: mc_offer_bar;
}

.info_bar__icon {
  background-image: url(../img/icon_triangle_offer_navy.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
}

.info_bar[data-type='info'] .info_bar__icon {
  background-image: url(../img/icon_triangle_info_navy.svg);
}

/* ---- .info_bar__text --------------------------------------------------------------- */

.info_bar__text {
  font-size: 14px;
  line-height: 1.4;
  padding-left: 40px;
}

.info_bar[data-has-roundel='false'] .info_bar__text {
  grid-column: span 2;
}

/* ---- .info_bar__heading --------------------------------------------------------------- */

.info_bar__heading {
  font-weight: bold;
}

/* ---- .info_bar__paragraph --------------------------------------------------------------- */

.info_bar__paragraph a {
  color: blue;
}

/* ---- .info_bar__roundel --------------------------------------------------------------- */

.info_bar__roundel {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 64px;
  position: absolute;
  top: calc(50% - 32px);
  right: 8px;
  width: 64px;
}

/* ---- Results - results - card mobile --------------------------------------------------------------- */

.container100.results_table .results .result .card.mobile {
  align-items: center;
  display: grid;
  gap: 16px 12px;
  grid-template-areas:
    'mc_offer_bar mc_offer_bar'
    'mc_prov mc_price'
    'mc_info mc_info'
    'mc_booleans mc_booleans'
    'mc_defaqto mc_more'
    'mc_info_bar mc_info_bar';
  grid-template-columns: 5fr 8fr;
  justify-items: center;
  padding: 16px;
}

.container100.results_table .results .result .card.mobile .product_info {
  grid-area: mc_prov;
  justify-self: start;
  text-align: left;
}

.container100.results_table .results .result .card.mobile .product_info .title {
  color: var(--charcoal);
  display: none;
  float: left;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}

.container100.results_table .results .result .card.mobile .product_info .provider_logo {
  clear: both;
  /*margin-top: 14px;*/
  width: 94px;
}

.container100.results_table .results .result .card.mobile .prices {
  align-items: start;
  display: flex;
  gap: 20px;
  grid-area: mc_price;
  justify-self: end;
  text-align: right;
}

.container100.results_table .results .result .card.mobile .price_info {
  align-items: center;
  display: flex;
  justify-self: end;
  text-align: right;
}

.container100.results_table .results .result .card.mobile .product_info .provider_logo {
  height: 52px;
}

.container100.results_table .results .result .card.mobile .price_info .pricing_title {
  color: var(--charcoal-80);
  font-family: var(--font-family-oak);
  font-size: 13px;
  padding-bottom: 4px;
}

.container100.results_table .results .result .card.mobile .price_info .pricing {
  color: var(--charcoal);
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
}

.container100.results_table .results .result .card.mobile .price_info .pricing span.small {
  font-size: 16px;
}

.container100.results_table .results .result .card.mobile .price_info .frequency {
  clear: both;
  color: var(--charcoal-80);
  float: right;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.57;
  margin-top: 6px;
}

.container100.results_table .results .result .card.mobile .info_boxes {
  clear: both;
  display: grid;
  gap: 4px;
  grid-area: mc_info;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.container100.results_table .results .result .card.mobile .info_boxes .box {
  background-color: #faf9fb;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  padding: 11px 12px;
}

.container100.results_table .results .result .card.mobile .info_boxes .box .title {
  color: var(--charcoal-80);
  font-family: var(--font-family-oak);
  font-size: 14px;
  line-height: 1.3;
  width: 100%;
}

.container100.results_table .results .result .card.mobile .info_boxes .box .value {
  color: var(--charcoal);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.25;
  width: 100%;
}

.container100.results_table .results .result .card.mobile .booleans {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  grid-area: mc_booleans;
  width: 100%;
}

.container100.results_table .results .result .card.mobile .booleans .boolean {
  align-items: center;
  display: flex;
  gap: 8px;
}

.container100.results_table .results .result .card.mobile .booleans .boolean .circle {
  background-size: 8px auto;
  height: 16px;
  width: 16px;
}

.container100.results_table .results .result .card.mobile .booleans .boolean .text {
  color: var(--charcoal-80);
  font-size: 13px;
  font-weight: normal;
  line-height: 1.2;
  text-align: left;
}

.container100.results_table .results .result .card.mobile .defaqto_rating {
  align-items: center;
  background-position: center left;
  display: flex;
  height: 40px;
  grid-area: mc_defaqto;
  width: 100%;
}

.container100.results_table .results .result .card.mobile .more_btn_box {
  display: flex;
  grid-area: mc_more;
  justify-self: end;
}

.container100.results_table .results .result .card.mobile .more_btn_box .btn.purple_rounded {
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 576px) {
  /* ---- font size / line height --------------------------------------------------------------- */

  .container100.results_table .results .result .card.mobile .price_info .pricing {
    font-size: 32px;
    line-height: 1.25;
  }

  .container100.results_table .results .result .card.mobile .price_info .frequency {
    font-size: 16px;
    line-height: 1.5;
  }

  /* ---- Results - results - card mobile --------------------------------------------------------------- */

  .container100.results_table .results .result .card.mobile {
    padding: 24px;
  }

  body#broken_down .container100.results_table .results .result .card.mobile .info_boxes {
    width: 100%;
  }

  .container100.results_table .results .result .card.mobile .info_boxes .box {
    padding-bottom: 15px;
    padding-top: 15px;
  }
}

@media (min-width: 768px) {
  .container100.results_table .results .result .card.mobile {
    gap: 16px 12px;
    grid-template-areas:
      'mc_offer_bar mc_offer_bar mc_offer_bar mc_offer_bar'
      'mc_prov mc_price mc_price mc_price'
      'mc_info mc_info mc_defaqto mc_more'
      'mc_booleans mc_booleans mc_booleans mc_booleans'
      'mc_info_bar mc_info_bar mc_info_bar mc_info_bar';
    grid-template-columns: 1fr 1fr 148px 164px;
  }

  .container100.results_table .results .result .card.mobile .product_info {
    justify-self: start;
  }

  .container100.results_table .results .result .card.mobile .price_info {
    justify-self: end;
  }

  .container100.results_table .results .result .card.mobile .price_info .frequency {
    padding-left: 8px;
    padding-top: 14px;
  }

  body#broken_down .container100.results_table .results .result .card.mobile .info_boxes {
    width: 100%;
  }

  .container100.results_table .results .result .card.mobile .defaqto_rating {
    background-position: center;
  }
}

@media (min-width: 992px) {
  .container100.results_table .results .result .card.mobile {
    display: none;
  }
}

/* ---- Results - results - card desktop --------------------------------------------------------------- */

.container100.results_table .results .result .card.desktop {
  display: none;
  flex-direction: column;
  justify-content: center;
  min-height: 140px;
  padding: 6px;
}

.container100.results_table .results .result .card.desktop .box {
  float: left;
  min-height: 60px;
  /*padding-left: 10px;
	padding-right: 10px;*/
}

.container100.results_table .results .result .card.desktop .box.provider .provider_logo {
  height: 52px;
  width: 94px;
}

.container100.results_table .results .result .card.desktop .box.provider .product_name {
  float: left;
  font-family: var(--font-family-oak);
  font-size: 12px;
  line-height: 1.3;
  margin-top: 10px;
  width: 100%;
}

.container100.results_table .results .result .card.desktop .box.price {
  font-size: 32px;
  font-weight: bold;
  line-height: 1.25;
  color: var(--primary-purple-dark);
}

.container100.results_table .results .result .card.desktop .box.price span.small {
  font-size: 22px;
}

.container100.results_table .results .result .card.desktop .box.price .diff {
  font-family: var(--font-family-oak);
  font-size: 12px;
  font-weight: normal;
}

.container100.results_table .results .result .card.desktop .box.defaqto .defaqto_rating {
  height: auto;
  min-height: 48px;
  width: 61px;
}

.container100.results_table .results .result .card.desktop .box .boolean {
  float: left;
  color: var(--primary-tints-02-dark-purple-tints-purple-dark-80);
  font-family: var(--font-family-oak);
}

.container100.results_table .results .result .card.desktop .box .boolean .circle {
  height: 32px;
  left: calc(50% - 16px);
  width: 32px;
}

.container100.results_table .results .result .card.desktop .box .boolean.included .circle {
}

.container100.results_table .results .result .card.desktop .box .boolean .text {
  clear: both;
  float: left;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.57;
  margin-top: 6px;
  width: 100%;
}

/* ---- Results - filters_bar ---------------------------------------------------------------- */

.filters_bar {
  background-color: var(--white);
  color: var(--charcoal);
  height: 100vh;
  max-width: 428px;
  opacity: 0;
  overflow: auto;
  overscroll-behavior: contain;
  position: fixed;
  top: 0;
  left: 0;
  transition:
    opacity 0.3s ease,
    left 0.5s ease,
    visibility 0.3s ease;
  visibility: hidden;
  width: 100%;
  z-index: 4;
}

.filters_bar.show {
  opacity: 1;
  visibility: visible;
}

.filters_bar .scroll {
  float: left;
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  position: relative;
  width: 100%;
}

body[data-view='overlay'] .filters_bar .scroll {
  padding-bottom: 80px;
}

.filters_bar .question .information {
  display: none;
}

.filters_bar .block {
  float: left;
  padding: 20px 16px;
  width: 100%;
}

.filters_bar .block.filter,
.filters_bar .block.bottom {
  border-top: 1px solid var(--purple-10);
}

.filters_bar .block .title {
  display: grid;
  font-weight: normal;
  gap: 16px;
  grid-template-columns: 1fr 72px 14px;
  line-height: 1.2;
  position: relative;
  width: 100%;
}

.filters_bar .block.expand .title {
  grid-template-columns: 1fr 14px;
}

.filters_bar .block .title span.label {
  font-size: 14px;
  letter-spacing: 2.25px;
  text-transform: uppercase;
  font-family: var(--font-family-oak);
  color: var(--ms-7-purple);
}

.filters_bar .block .title .summary {
  color: var(--charcoal-80);
  float: right;
  font-family: var(--font-family-oak);
  font-size: 14px;
  text-align: right;
}

.filters_bar .block.expand .title .summary {
  display: none;
}

.filters_bar .block .title .chevron {
  background-image: url(../img/chevron_purple.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 14px;
  transform: rotate(180deg);
  width: 14px;
}

.filters_bar .block.expand .title .chevron {
  transform: rotate(0deg);
}

.filters_bar .block .hide_show {
  display: none;
  float: left;
  padding-top: 16px;
  width: 100%;
}

.filters_bar .block.expand .hide_show,
.filters_bar .block.always_open .hide_show {
  display: block;
}

.filters_bar ul.selection li .style .text p {
  display: none;
}

.filters_bar .block.top .buttons {
  float: left;
  width: 100%;
}

.filters_bar .block.top .buttons button.btn.close {
  height: 20px;
  width: 20px;
}

.filters_bar .block.top .heading {
  color: var(--charcoal);
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  margin-top: 24px;
  width: 100%;
}

.filters_bar .block.bottom .btn.pink_text_underline {
  text-align: left;
}

.filters_bar .block.bottom .btn.post_a_copy {
  background-image: url(../img/icon_document_purple.svg);
  background-position: 0 center;
  background-repeat: no-repeat;
  background-size: 16px;
  clear: both;
  margin-top: 16px;
  padding-left: 24px;
}

.filters_bar .block.bottom .btn.back_to_questions {
  background-image: url(../img/icon_arrow_purple.svg);
  background-position: 0 center;
  background-repeat: no-repeat;
  background-size: 16px;
  clear: both;
  margin-top: 16px;
  padding-left: 24px;
}

.filters_bar .mobile_update {
  align-items: center;
  background-color: #fff;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  display: none;
  justify-content: center;
  padding: 16px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

body[data-view='overlay'] .filters_bar .mobile_update {
  display: flex;
}

.filters_bar .mobile_update:before {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

  content: '';
  height: 16px;
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
}

/* ---- Results - adjusting_form ---------------------------------------------------------------- */

.adjusting_form {
  display: none;
  position: absolute;
  top: 304px;
  left: calc(50% - 250px);
  width: 500px;
  z-index: 2;
}

body[data-view='overlay'][data-overlay='adjusting'] .adjusting_form {
  display: block;
}

@keyframes results_blur {
  from {
    filter: blur(0px);
    opacity: 1;
  }
  to {
    filter: blur(50px);
    opacity: 0.04;
  }
}

body#results[data-view='overlay'][data-overlay='adjusting'] .container100.header,
body#results[data-view='overlay'][data-overlay='adjusting'] .container100.results_info,
body#results[data-view='overlay'][data-overlay='adjusting'] .container100.results_headers,
body#results[data-view='overlay'][data-overlay='adjusting'] .container100.results_table {
  animation: results_blur 1.2s normal forwards ease;
}

.adjusting_form .header {
  float: left;
  font-size: 40px;
  font-weight: bold;
  line-height: 1.2;
  width: 100%;
}

.adjusting_form .subheader {
  float: left;
  font-family: var(--font-family-oak);
  font-size: 20px;
  line-height: 1.4;
  margin-top: 16px;
  width: 100%;
}

.adjusting_form .message {
  display: block;
  margin-top: 32px;
}

/* ---- Results - results_overlay ---------------------------------------------------------------- */

.container100.results_overlay {
  display: none;
  min-height: calc(100vh + 52px);
  padding: 64px 0 calc(64px + 52px) 0;
}

.container100.results_overlay .container {
  align-items: center;
  display: flex;
  flex-direction: column;
}

/* ---- .searching_box ---------------------------------------------------------------- */

.searching_box {
  align-items: center;
  display: none;
  gap: 16px;
  flex-direction: column;
  width: 100%;
}

.container100.results_overlay .searching_box {
  margin-top: 40px;
}

body[data-view='overlay'][data-overlay='initial'] .searching_box {
  display: flex;
}

.searching_box .icon {
  background-image: url(../img/pulsing_logo.gif);
  background-repeat: no-repeat;
  background-size: contain;
  float: left;
  height: 64px;
  width: 64px;
}

.searching_box .text {
  color: var(--white);
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
}

.searching_box .text span.complete_wording {
  display: none;
}

body[data-overlay='no-results'] .searching_box .text span.complete_wording {
  display: inline;
}

.searching_box .progress_bar {
  background-color: #a782be;
  border-radius: 22px;
  display: flex;
  padding: 1px;
  max-width: 240px;
  width: 100%;
}

@keyframes searching_line_fill {
  from {
    width: 1%;
  }
  to {
    width: 100%;
  }
}

.searching_box .progress_bar .line {
  animation-duration: 12s;
  animation-fill-mode: forwards;
  animation-name: searching_line_fill;
  animation-timing-function: linear;
  background-color: #30dac6;
  border-radius: 22px;
  display: flex;
  height: 6px;
  width: 1%;
}

@media (min-width: 768px) {
  .searching_box {
    gap: 24px;
  }

  .searching_box .text {
    font-size: 18px;
  }

  .searching_box .progress_bar {
    max-width: 416px;
  }

  .searching_box .progress_bar .line {
    height: 8px;
  }
}

/* ---- .super_save_logo ---------------------------------------------------------------- */

.super_save_logo {
  background-image: url(../img/msm_super_save_logo_four_lines.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  height: 120px;
  width: 100%;
}

.container100.results_overlay .super_save_logo {
  display: none;
  height: 120px;
  width: 100%;
}

body[data-overlay='initial'] .container100.results_overlay .super_save_logo,
body[data-overlay='updated'] .container100.results_overlay .super_save_logo {
  display: block;
}

@media (min-width: 768px) {
  .super_save_logo,
  .container100.results_overlay .super_save_logo {
    background-image: url(../img/msm_super_save_logo_two_lines.svg);
    height: 90px;
  }
}

/* ------------------------------------------------------------------------------------------- */

.container100.results_overlay .paragraphs {
  color: var(--white);
  display: none;
  flex-direction: column;
  font-size: 32px;
  line-height: 36px;
  margin: 40px 0 0 0;
  max-width: 562px;
  width: 100%;
}

.container100.results_overlay .paragraphs.initial,
.container100.results_overlay .paragraphs.updated {
  margin: 40px auto;
}

body[data-overlay='initial'] .container100.results_overlay .paragraphs.initial,
body[data-overlay='updated'] .container100.results_overlay .paragraphs.updated,
body[data-view='overlay'][data-overlay='adjusting'] .container100.results_overlay .paragraphs.adjusting,
body[data-overlay='no-results'] .container100.results_overlay .paragraphs.no-results {
  display: flex;
}

.container100.results_overlay .paragraphs h3,
.container100.results_overlay .paragraphs h4,
.container100.results_overlay .paragraphs p,
.container100.results_overlay .paragraphs ul.bullet,
.container100.results_overlay .paragraphs ul.bullet li {
  float: left;
  width: 100%;
}

.container100.results_overlay .paragraphs h3,
.container100.results_overlay .paragraphs h4 {
  font-weight: bold;
}

.container100.results_overlay .paragraphs h3 {
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

.container100.results_overlay .paragraphs h3 + h3 {
  margin-top: 32px;
}

.container100.results_overlay .paragraphs h4 {
  font-size: 22px;
  line-height: 30px;
  margin-top: 16px;
}

.container100.results_overlay .paragraphs p {
  margin-top: 16px;
}

.container100.results_overlay .paragraphs ul.bullet,
.container100.results_overlay .paragraphs p {
  font-family: var(--font-family-oak);
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
}

.container100.results_overlay .paragraphs ul.bullet {
  margin-top: 8px;
}

.container100.results_overlay .paragraphs ul.bullet li {
  margin-top: 12px;
  padding-left: 18px;
}

.container100.results_overlay .paragraphs ul.bullet li:before {
  background-color: var(--white);
  height: 6px;
  top: 10px;
  width: 6px;
}

.container100.results_overlay .paragraphs .header {
  float: left;
  font-size: 40px;
  font-weight: bold;
  line-height: 1.2;
  width: 100%;
}

.container100.results_overlay .paragraphs .subheader {
  font-size: 20px;
  line-height: 28px;
}

.container100.results_overlay .paragraphs .subheader {
  float: left;
  font-family: var(--font-family-oak);
  margin-top: 16px;
  width: 100%;
}

.container100.results_overlay .message.standard.adjusting_buttons {
  display: block;
  margin-top: 32px;
}

.container100.results_overlay .message.standard.adjusting_buttons.hidden {
  display: none;
}

.container100.results_overlay .message.standard.adjusting_buttons button {
  margin-right: 16px;
  margin-top: 16px;
}

.container100.results_overlay .paragraphs.no-results a {
  margin-top: 32px;
}

.container100.results_overlay .downgrade_warning {
  float: left;
  margin-top: 8px;
  width: 100%;
}

.container100.results_overlay .downgrade_warning .title,
.container100.results_overlay .downgrade_warning .text {
  float: left;
  font-family: var(--font-family-oak);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  width: 100%;
}

.container100.results_overlay .downgrade_warning .title {
  font-weight: 600;
}

.container100.results_overlay .downgrade_warning .text {
  font-weight: normal;
  margin-top: 8px;
}

.container100.results_overlay .button_container {
  float: left;
  width: 100%;
}

.container100.results_overlay .button_container button {
  margin-right: 16px;
  margin-top: 16px;
}

/* ---- Results - getting_prices ---------------------------------------------------------------- */

body[data-view='overlay'] .container100.header,
body[data-view='overlay'] .container100.results_info,
body[data-view='overlay'] .container100.results_headers,
body[data-view='overlay'] .container100.results_table {
  display: none;
}

body[data-view='overlay'] .container100.results_overlay,
body.no-results .container100.results_overlay {
  display: flex;
}

/* ---- Results - blurry_bg ---------------------------------------------------------------- */

.blurry_bg {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background-color: rgba(0, 20, 56, 0.5);
  height: 100vh;
  opacity: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  transition:
    -webkit-backdrop-filter 0.3s ease,
    backdrop-filter 0.3s ease,
    opacity 0.3s ease,
    visibility 0.3s ease;
  visibility: hidden;
  width: 100%;
  z-index: 3;
}

.cover_help + .blurry_bg,
.more_info + .blurry_bg {
  z-index: 5;
}

.filters_bar.show + .blurry_bg,
.cover_help.show + .blurry_bg,
.more_info.show + .blurry_bg {
  opacity: 1;
  visibility: visible;
}

.blurry_bg:after {
  content: '';
  height: 101%;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.blurry_bg::-webkit-scrollbar {
  display: none; /* Hide scrollbars - Chrome, Safari and Opera */
}

.blurry_bg {
  -ms-overflow-style: none; /* Hide scrollbars - IE and Edge */
  scrollbar-width: none; /* Hide scrollbars - Firefox */
}

/* ---- Results - cover_help ---------------------------------------------------------------- */

.cover_help {
  background-color: var(--white);
  border-radius: 0;
  color: var(--charcoal-80);
  font-family: var(--font-family-oak);
  height: 100vh;
  max-width: 420px;
  overflow: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  transition:
    opacity 0.3s ease,
    right 0.5s ease,
    visibility 0.3s ease;
  visibility: hidden;
  width: 100%;
  z-index: 6;
}

.cover_help.show {
  opacity: 1;
  right: 0;
  visibility: visible;
}

.cover_help .panel {
  float: left;
  height: 100%;
  overflow: auto;
  padding: 52px 16px 0 16px;
  position: relative;
  width: 100%;
}

.cover_help .panel .main_title {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(to bottom, var(--primary-purple) 0%, var(--pink));
  float: left;
  font-family: var(--font-family-ash);
  font-size: 18px;
  font-weight: bold;
  line-height: 1.44;
  -webkit-text-fill-color: transparent;
  width: 100%;
}

.cover_help .panel .items {
  float: left;
  margin-top: 12px;
  padding-bottom: 20px;
  width: 100%;
}

.cover_help .panel .items .item {
  float: left;
  width: 100%;
}

.cover_help .panel .items .item + .item {
  margin-top: 12px;
}

.cover_help .panel .items .item h3 {
  color: var(--charcoal);
  float: left;
  font-family: var(--font-family-ash);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  width: 100%;
}

.cover_help .panel .items .item p {
  color: var(--charcoal);
  float: left;
  font-size: 12px;
  line-height: 20px;
  margin-top: 10px;
  width: 100%;
}

.cover_help button.close {
  background-color: transparent;
  background-image: url(../img/cross_purple.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px auto;
  border: 0;
  cursor: pointer;
  float: left;
  height: 24px;
  width: 24px;
  z-index: 1;
}

.cover_help .close_section {
  background-color: var(--white);
  padding: 14px 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.cover_help .close_section button.close {
  background-color: transparent;
  background-image: url(../img/cross_purple.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px auto;
  border: 0;
  cursor: pointer;
  float: left;
  height: 24px;
  width: 24px;
  z-index: 1;
}

/* ---- Results - more info ---------------------------------------------------------------- */

.more_info {
  background-color: var(--white);
  border-radius: 0;
  color: var(--charcoal-80);
  font-family: var(--font-family-oak);
  height: 100vh;
  overflow: hidden;
  opacity: 0;
  padding-top: 50px;
  position: fixed;
  top: 0;
  right: 0;
  transition:
    opacity 0.3s ease,
    right 0.5s ease,
    visibility 0.3s ease;
  visibility: hidden;
  width: 100%;
  z-index: 6;
}

.more_info.show {
  opacity: 1;
  right: 0;
  visibility: visible;
}

.more_info .close_section {
  background-color: var(--white);
  padding: 14px 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.more_info.show_fixed_action .close_section {
  box-shadow: 0 4px 20px 0 rgb(0 0 0 / 10%);
}

.more_info .close_section button.close {
  background-color: transparent;
  background-image: url(../img/cross_purple.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px auto;
  border: 0;
  cursor: pointer;
  float: left;
  height: 24px;
  width: 24px;
  z-index: 1;
}

.more_info .close_section .mobile_info {
  display: none;
  float: left;
  margin-top: 8px;
  width: 100%;
}

.more_info.show_fixed_action .close_section .mobile_info {
  display: block;
}

.more_info .close_section .mobile_info .price_info {
  float: left;
}

.more_info .close_section .mobile_info .price_info .frequency {
  color: var(--charcoal-80);
  float: left;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
}

.more_info .close_section .mobile_info .price_info .amount {
  clear: both;
  color: var(--charcoal);
  float: left;
  font-family: var(--font-family-ash);
  font-size: 22px;
  font-weight: bold;
  line-height: 30px;
}

.more_info .close_section .mobile_info .go_to_site {
  float: right;
}

.more_info .panels {
  float: left;
  height: calc(100%);
  overflow: auto;
  position: relative;
  width: 100%;
}

.more_info .panels .panel {
  float: left;
  /*height: calc(100%);*/
  overscroll-behavior: contain;
  padding: 24px;
  position: relative;
  width: 100%;
}

/* ---- Results - panel - left ---------------------------------------------------------------- */

.more_info .panels .panel.left {
  background-color: var(--white);
}

.more_info .panels .panel.left .provider_logo {
  background-color: var(--white);
  height: 66px;
  position: relative;
  left: calc(50% - 60px);
  width: 120px;
}

.more_info .panels .panel.left .price_info {
  float: left;
  margin-top: 18px;
  width: 100%;
}

.more_info .panels .panel.left .price_info .frequency {
  color: var(--charcoal-80);
  float: left;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  width: 100%;
}

.more_info .panels .panel.left .price_info .amount {
  color: var(--primary-tints-02-dark-purple-tints-purple-dark-80);
  float: left;
  font-family: var(--font-family-ash);
  font-size: 32px;
  font-weight: bold;
  line-height: 1.25;
  text-align: center;
  width: 100%;
}

.more_info .panels .panel.left .price_info .no {
  color: var(--charcoal-80);
  float: left;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 19px;
  margin: 5px 0 0 0;
  text-align: center;
  width: 100%;
}

.more_info .panels .panel.left .price_info .it {
  color: #888;
  float: left;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-style: italic;
  line-height: 19px;
  margin: 5px 0 0 0;
  text-align: center;
  width: 100%;
}

.more_info .panels .panel.left .excesses {
  color: var(--charcoal);
  float: left;
  font-size: 14px;
  line-height: 22px;
  margin-top: 18px;
  width: 100%;
}

.more_info .panels .panel.left .excesses .sides + .sides {
  border-top: 1px solid var(--purple-10);
  margin-top: 6px;
  padding-top: 6px;
}

.more_info .panels .panel.left .excesses .info {
  color: var(--charcoal-80);
  float: left;
  font-size: 13px;
  line-height: 20px;
  margin-top: 18px;
  text-align: center;
  width: 100%;
}

.more_info .panels .panel.left .go_to_site {
  display: flex;
  float: left;
  justify-content: center;
  margin-top: 20px;
  width: 100%;
}

.more_info .panels .panel.left .important_text {
  float: left;
  margin-top: 16px;
  text-align: center;
  width: 100%;
}

.more_info .panels .panel.left .important_text p {
  color: var(--charcoal-80);
  float: left;
  font-size: 12px;
  line-height: 1.67;
  width: 100%;
}

.more_info .panels .panel.left .important_text p.bolded {
  color: var(--charcoal);
  font-weight: 600;
}

.more_info .panels .panel.left .important_text p + p {
  margin-top: 8px;
}

.more_info .panels .panel.left .telephone {
  display: flex;
  float: left;
  justify-content: center;
  margin-top: 32px;
  width: 100%;
}

.more_info .panels .panel.left .policy_docs,
.more_info .panels .panel.left .opening_times {
  border-top: 1px solid var(--purple-10);
  float: left;
  margin-top: 24px;
  padding-top: 24px;
  text-align: center;
  width: 100%;
}

.more_info .panels .panel.left .opening_times .title {
  color: var(--charcoal);
  float: left;
  font-family: var(--font-family-ash);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.57;
  width: 100%;
}

.more_info .panels .panel.left .opening_times p {
  color: var(--charcoal-80);
  float: left;
  font-size: 12px;
  line-height: 1.67;
  margin-top: 8px;
  width: 100%;
}

.more_info .panels .panel.left .policy_docs ul {
}

.more_info .panels .panel.left .policy_docs ul li {
}

.more_info .panels .panel.left .policy_docs ul li + li {
  margin-top: 8px;
}

.more_info .panels .panel.left .policy_docs ul li a {
  float: none;
  padding-left: 24px;
  position: relative;
}

.more_info .panels .panel.left .policy_docs ul li a .icon {
  background-image: url(../img/icon_document_purple.svg);
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
}

.more_info .panels .panel.left .awards {
  border-top: 1px solid var(--purple-10);
  float: left;
  margin-top: 24px;
  padding-top: 24px;
  text-align: center;
  width: 100%;
}

.more_info .panels .panel.left .awards {
  float: left;
  width: 100%;
}

.more_info .panels .panel.left .awards .award + .award {
  margin-top: 24px;
}

.more_info .panels .panel.left .awards .award .logo {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  float: left;
  height: 40px;
  width: 100%;
}

.more_info .panels .panel.left .awards .award.which .logo {
  background-image: url(which);
}

.more_info .panels .panel.left .awards .award .title {
  color: var(--charcoal);
  float: left;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.67;
  margin-top: 8px;
  width: 100%;
}

/* ---- Results - panel - right ---------------------------------------------------------------- */

.more_info .panels .panel.right {
}

.more_info .panels .panel.right .main_title {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(to bottom, var(--primary-purple) 0%, var(--pink));
  float: left;
  font-family: var(--font-family-ash);
  font-size: 18px;
  font-weight: bold;
  line-height: 1.44;
  -webkit-text-fill-color: transparent;
  width: 100%;
}

.more_info .panels .panel.right .section {
  float: left;
  width: 100%;
}

.more_info .panels .panel.right .section + .section {
  margin-top: 40px;
}

.more_info .panels .panel.right .section.features {
  margin-top: 16px;
}

.more_info .panels .panel.right .section .heading {
  color: var(--primary-tints-02-dark-purple-tints-purple-dark-80);
  float: left;
  font-family: var(--font-family-ash);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  width: 100%;
}

.more_info .panels .panel.right .section .heading span {
  float: right;
}

.more_info .panels .panel.right .section.features .heading span {
  padding-right: 30px;
}

.more_info .panels .panel.right .section.features ul li {
  padding-top: 8px;
}

.more_info .panels .panel.right .section.features ul li + li {
  border-top: 1px solid var(--purple-10);
  margin-top: 8px;
}

.more_info .panels .panel.right .section.features ul li .sides .side.left {
  color: var(--charcoal);
  font-size: 12px;
  line-height: 32px;
}

.more_info .panels .panel.right .section.features ul li .sides .side.right .icon {
  background-color: #c4c5c4;
  background-image: url(../img/icon_cross_white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 43% auto;
  border-radius: 50%;
  float: left;
  height: 32px;
  width: 32px;
}

.more_info .panels .panel.right .section.features ul li.included .sides .side.right .icon {
  background-color: var(--mint);
  background-image: url(../img/icon_tick_white.svg);
  background-size: 52% auto;
}

.more_info .panels .panel.right .section.features ul li .sides .side.right .chevron {
  height: 32px;
  margin-left: 16px;
  position: relative;
  transform: rotate(0deg);
  width: 14px;
}

.more_info .panels .panel.right .section.features ul li.expanded .sides .side.right .chevron {
  transform: rotate(180deg);
}

.more_info .panels .panel.right .section.features ul li .hide_show {
  background-color: var(--purple-5);
  border-radius: 8px;
  color: var(--charcoal);
  display: none;
  float: left;
  font-size: 12px;
  line-height: 20px;
  margin-top: 8px;
  padding: 14px 16px;
  width: 100%;
}

.more_info .panels .panel.right .section.features ul li.expanded .hide_show {
  display: block;
}

.more_info .panels .panel.right .section.provider_info ul {
  background-color: var(--purple-5);
  border-radius: 8px;
  color: var(--charcoal);
  float: left;
  font-size: 12px;
  line-height: 20px;
  margin-top: 16px;
  padding: 14px 16px;
  width: 100%;
}

.more_info .panels .panel.right .section.provider_info ul li {
  float: left;
  width: 100%;
}

.more_info .panels .panel.right .section.provider_info ul li + li {
  margin-top: 8px;
}

.more_info .panels .panel.right .section.provider_info ul li .sides .side.left {
  width: 110px;
}

.more_info .panels .panel.right .section.provider_info ul li .sides .side.right {
  font-family: var(--font-family-ash);
  font-size: 14px;
  font-weight: bold;
  padding-left: 10px;
  width: calc(100% - 110px);
  word-break: break-word;
}

.more_info .panels .panel.right .section.cancellations .text,
.more_info .panels .panel.right .section.defaqto .text {
  color: var(--charcoal);
  float: left;
  font-size: 12px;
  line-height: 1.67;
  margin-top: 16px;
  width: 100%;
}

.more_info .panels .panel.right .section.defaqto .text .defaqto_rating {
  float: right;
  height: 52px;
  margin-left: 12px;
  width: 110px;
}

.more_info .panels .panel.right .section ul.bullet {
	font-size: 12px;
	line-height: 20px;
	margin-top: 16px;
}

.more_info .panels .panel.right .section.benefits ul.bullet li:before,
.more_info .panels .panel.right .section.exclusions ul.bullet li:before,
.more_info .panels .panel.right .section.cancellations ul.bullet li:before {
  top: 8px;
}

.more_info .panels .panel.right .section.fca .text {
  background-color: var(--purple-5);
  border-radius: 8px;
  color: var(--charcoal);
  float: left;
  font-size: 12px;
  line-height: 18px;
  margin-top: 16px;
  padding: 16px;
  width: 100%;
}

.more_info .panels .panel.right .section.about p,
.more_info .panels .panel.right .section.about .text {
  color: var(--charcoal);
  float: left;
  font-size: 12px;
  line-height: 20px;
  margin-top: 16px;
  width: 100%;
}

.more_info .panels .panel.right .section.about ul.bullet {
  color: var(--charcoal);
  font-size: 12px;
  margin-top: 16px;
}

.more_info .panels .panel.right .section.about ul.bullet li a {
  color: var(--primary-purple);
}

/* ---- Results - .sort_by ---------------------------------------------------------------- */

.container100.results_info .sort_by {
  float: left;
}

.container100.results_info .sort_by .information {
  margin: 10px 0;
}

@media (min-width: 992px) {
  /* ---- display ------------------------------------------------ */

  .sort_by {
    display: none;
  }
}

/* ############################################################################################ */
/* #### Transfer - CODE: ddfhs ################################################################ */
/* ############################################################################################ */

body#transfer.transfer_debug form#transfer_form {
  background: hsl(270deg 51% 12%);
  overflow: auto;
  padding: 20px;
  position: relative;
  z-index: 2;
  width: 100%;
}

body#transfer.transfer_debug form#transfer_form table {
  width: 480px;
}

body#transfer .container100 .container {
  max-width: 562px;
}

body#transfer .container100.results_overlay .paragraphs .header,
body#transfer .container100.results_overlay .paragraphs .subheader {
  display: block;
}

body#transfer .container100.results_overlay .paragraphs .header {
  word-break: break-word;
}

/* ############################################################################################ */
/* #### Changes to elements in white form - CODE: fmqxp ####################################### */
/* ############################################################################################ */

/* ----- input - text tel number email ---------------------------------------------------------------- */

.white_form .date input[type='text'],
.white_form .date input[type='number'] {
  border-width: 2px;
  height: 54px;
}

.white_form input[type='text']:focus,
.white_form input[type='tel']:focus,
.white_form input[type='number']:focus,
.white_form input[type='email']:focus {
  background-color: var(--primary-tints-01-purple-tints-purple-5);
  border-color: var(--primary-purple);
  border-width: 2px;
  box-shadow:
    0 0 0 3px var(--secondary-white),
    0 0 0 5px var(--primary-purple-dark);
}

/* ----- button - white_stroke_rounded ---- WHITE ON THE EMOTIONAL JOURNEY / PURPLE ON THE FUNCTIONAL JOURNEY ------------------------ */

.white_form .btn.white_stroke_rounded,
.white_form a.btn.white_stroke_rounded,
.white_form button.btn.white_stroke_rounded {
  border-color: var(--primary-purple);
  color: var(--primary-purple);
  transition: box-shadow 0.2s ease;
}

.white_form .btn.white_stroke_rounded:hover,
.white_form a.btn.white_stroke_rounded:hover,
.white_form button.btn.white_stroke_rounded:hover {
  box-shadow: 0 0 0 2px var(--primary-purple);
}

/* ----- button - white_text_underline ---------------------------------------------------------------- */

.white_form .btn.white_text_underline,
.white_form a.btn.white_text_underline,
.white_form button.btn.white_text_underline {
  border-color: var(--charcoal);
  color: var(--charcoal);
}

/* ----- message - standard --------------------------------------------------------------- */

.white_form .message,
.white_form .message.standard {
  background-color: var(--purple-5);
  border-color: var(--primary-purple);
  color: var(--charcoal);
}

/* ----- message - info --------------------------------------------------------------- */

.white_form .message.info {
  background-color: var(--secondary-blue-light);
  border-color: var(--navy);
}

.white_form .message.info a {
  color: var(--charcoal);
}
/* ----- message - warning --------------------------------------------------------------- */

.white_form .message.warning {
  background-color: var(--peach-5);
  border-color: var(--peach);
}

.white_form .message.warning a {
  color: var(--charcoal);
}

/* ----- message - error --------------------------------------------------------------- */

.white_form .message.error {
  background-color: var(--coral-5);
  border-color: var(--coral);
}

/* ----- ul selection - style ------------------------------------------------------------ */

.white_form ul.selection li .style {
  background-color: var(--white);
  border-color: var(--purple-60);
}

.white_form ul.selection li input:focus + .style {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px #323a72;
}

.white_form ul.selection li input:hover + .style {
  border-color: var(--purple-60);
}

.white_form ul.selection li input[type='checkbox']:hover + .style,
.white_form ul.selection li input[type='checkbox']:checked + .style {
  border-color: var(--primary-purple);
}

.white_form ul.selection li input:checked + .style {
  border-color: var(--primary-purple-dark);
}

.white_form ul.selection li input:hover + .style,
.white_form ul.selection li input[type='checkbox']:hover + .style,
.white_form ul.selection li input:checked + .style,
.white_form ul.selection li input[type='checkbox']:checked + .style {
  background-color: var(--purple-10);
}

/*
.white_form ul.selection li input[type="checkbox"]:checked:hover + .style {
	background-color: var(--primary-purple-dark);
}
*/

.white_form ul.selection li input:focus + .style:before {
  border-color: var(--charcoal);
}

.white_form ul.selection li input:disabled + .style {
  background-color: var(--white);
  border-color: var(--purple-60);
  border-width: 1px;
  opacity: 0.5;
}

/* ----- ul selection - icon ------------------------------------------------------------ */

.white_form ul.selection li .style .icon {
  border-color: var(--primary-tints-01-purple-tints-purple-60);
}

.white_form ul.selection li input:hover + .style .icon,
.white_form ul.selection li input[type='checkbox']:checked + .style .icon {
  border-color: var(--primary-purple);
}

.white_form ul.selection li input[type='checkbox']:checked + .style .icon {
  background-color: #faf9fb;
}

/* ----- ul selection - text ------------------------------------------------------------ */

.white_form ul.selection li .style .text {
  color: var(--primary-tints-02-dark-purple-tints-purple-dark-80);
}

/* ---- slide - next_slide --------------------------------------------------------------- */

.slide .white_form button.btn.next_slide {
  /*font-family: 'HeadingNow75', sans-serif;*/
  font-family: var(--font-family-oak);
  margin-top: 24px;
}

/* ---- slide - headers --------------------------------------------------------------- */

.slide .white_form .form_section .header {
  color: var(--primary-purple-dark);
  font-size: 22px;
  line-height: 1.36;
}

.slide .form_section .subheader {
  font-family: var(--font-family-oak);
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
  margin-top: 8px;
}

.slide .white_form .form_section .subheader {
  color: var(--charcoal-80);
  font-size: 18px;
  line-height: 1.56;
}

/* ---- slide - text_block --------------------------------------------------------------- */

.slide .white_form .form_section .text_block {
  color: var(--primary-tints-02-dark-purple-tints-purple-dark-80);
}

.slide .white_form .form_section .text_block a {
  color: var(--primary-tints-02-dark-purple-tints-purple-dark-80);
}

/* ---- label --------------------------------------------------------------- */

.slide .white_form .form_section .questions .question .information .label,
.slide .white_form .form_section .questions .question .information .subtext {
  color: var(--primary-tints-02-dark-purple-tints-purple-dark-80);
}

/* ---- state --------------------------------------------------------------- */

.slide .white_form .form_section .questions .question .information .label .state {
  color: var(--white);
}

.slide .white_form .form_section .questions .question.has_msg_error .information .label .state {
  background-color: var(--coral);
  background-image: url(../img/icon_exclamation_white.svg);
}

.slide .white_form .form_section .questions .question.valid:not(.delay_tick) .information .label .state {
  background-color: var(--ui-palette-01-semantic-mint);
  background-image: url(../img/icon_tick_white.svg);
}

/* ---- help_text --------------------------------------------------------------- */

.slide .white_form .form_section .questions .question .information .help_text {
  border-color: var(--primary-purple);
}

/* ---- button.help_icon --------------------------------------------------------------- */

.slide .white_form .form_section .questions .question .information button.help_icon .circle {
  background-image: url(../img/icon_i_primary_purple.svg);
  border-color: var(--primary-purple);
  color: var(--primary-purple);
}

.slide .white_form .form_section .questions .question .information button.help_icon:focus .circle {
  box-shadow:
    0 0 0 3px var(--white),
    0 0 0 5px #323a72;
}

.slide .white_form .form_section .questions .question.show_help_text .information button.help_icon .circle {
  background-color: var(--primary-purple);
  background-image: url(../img/icon_i_white.svg);
  color: var(--white);
}

.slide .white_form .form_section .questions .question .information button.help_icon .text {
  border-color: var(--primary-purple);
  color: var(--primary-purple);
}

/* ----- date ----------------------------------------------------------------- */

.white_form .date .datepicker button:focus {
  background-color: var(--purple-5);
  border-color: var(--primary-purple);
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px #323a72;
}

/* ---- children --------------------------------------------------------------- */

.slide .white_form .form_section .questions .children {
  border-left-color: var(--purple-10);
}

/* ############################################################################################ */
/* #### Screen size dependent - CODE: sddfa ################################################### */
/* ############################################################################################ */

@media (min-width: 321px) {
  /* ---- wave img changes ---------------------------------------------------------------- */

  .slide .white_form:after {
    background-image: url(../img/wave_emotional_375_end.svg);
    height: 71px;
    top: -20px;
    width: 375px;
  }

  body.slide_cover .container100.progress,
  body.slide_personal_details .container100.progress {
    min-height: 56px;
  }
}

@media (min-width: 340px) {
  /* ---- datepicker width ---------------------------------------------------------------- */

  .ui-datepicker {
    width: 18em;
  }
}

@media (min-width: 360px) {
  /* ---- containers ---------------------------------------------------------------- */

  body#broken_down .container100 .container,
  body#results .container100 .container,
  body#transfer .container100 .container {
    width: calc(100% - 48px);
  }

  /* ---- datepicker width ---------------------------------------------------------------- */

  .ui-datepicker {
    width: 19em;
  }
}

@media (min-width: 375px) {
  /* ---- containers ---------------------------------------------------------------- */

  .container100.progress .container,
  .container100.footer .container,
  .slide .emotional_form .container,
  .slide .white_form .container {
    max-width: 416px;
    width: calc(100% - 80px);
  }

  /* ---- datepicker width ---------------------------------------------------------------- */

  .ui-datepicker {
    width: 20em;
  }

  /* ---- wave img changes ---------------------------------------------------------------- */

  .slide .white_form:after {
    background-image: url(../img/wave_emotional_620_end.svg);
    height: 72px;
    top: -20px;
    width: 620px;
  }

  /* ---- Results - filters_bar ---------------------------------------------------------------- */

  .filters_bar {
    border-radius: 12px;
    box-shadow: 0 4px 20px 0 rgb(61 64 61 / 10%);
    height: calc(100% - 32px);
    top: 16px;
    left: -100%;
    width: calc(100% - 32px);
  }

  .filters_bar.show {
    left: 16px;
  }

  /* ---- Results - cover_help + more info ---------------------------------------------------------------- */

  .cover_help,
  .more_info {
    border-radius: 12px;
    box-shadow: 0 4px 20px 0 rgba(61, 64, 61, 0.1);
    height: calc(100vh - 32px);
    top: 16px;
    right: -100%;
    width: calc(100% - 32px);
  }

  .cover_help.show,
  .more_info.show {
    right: 16px;
  }

  .cover_help .close_section,
  .more_info .close_section {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
    height: auto;
    padding: 13px 20px;
    top: 0;
    left: 0;
    width: 100%;
  }

  .cover_help .panel,
  .more_info .panels {
    padding-left: 8%;
    padding-right: 8%;
  }

  .cover_help .panel {
    padding-top: 72px;
  }

  .more_info .panels {
    padding-top: 24px;
  }

  /* ---- Results - more info - panel - left ---------------------------------------------------------------- */

  .more_info .panels .panel.left {
    border-radius: 12px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
  }
}

@media (min-width: 450px) {
  /* ---- display ---------------------------------------------------------------- */

  .container100.header .right {
    display: flex;
  }
}

@media (min-width: 576px) {
  /* ---- containers --------------------------------------------------------------- */

  body#broken_down .container100 .container,
  body#results .container100 .container,
  body#transfer .container100 .container {
    width: calc(100% - 64px);
  }

  /* ---- font size / line height --------------------------------------------------------------- */

  /* ---- Results - results_info --------------------------------------------------------------- */

  .container100.results_info .buttons button.btn.filter {
    padding-left: 44px;
    padding-right: 44px;
  }
}

@media (min-width: 620px) {
  /* ---- container100s ---------------------------------------------------------------- */

  .container100.progress {
    padding: 32px 0;
  }

  .container100.quote {
    min-height: calc(100vh - 88px + 52px);
  }

  /* ---- containers ---------------------------------------------------------------- */

  .container100.progress .container,
  .container100.footer .container,
  .slide .emotional_form .container,
  .slide .white_form .container {
    max-width: 572px;
    width: calc(100% - 48px);
  }

  /* ---- font size / line height --------------------------------------------------------------- */

  .container100.footer .important_text {
    font-size: 12px;
  }

  .container100.footer .download {
    font-size: 14px;
  }

  .message {
    font-size: 16px;
    line-height: 24px;
  }

  /* ---- MODULAR - message ---------------------------------------------------------------- */

  .message {
    border-left-width: 4px;
  }

  .message,
  .message p,
  .message ul.bullet {
    font-size: 16px;
    line-height: 24px;
  }

  .message ul.bullet li:before {
    height: 8px;
    top: 7px;
    width: 8px;
  }

  /* ---- footer ---------------------------------------------------------------- */

  .container100.footer .msm_logo {
    margin-top: 0;
  }

  .container100.footer .links {
    align-items: center;
    display: flex;
  }

  .container100.footer .links ul {
    gap: 12px 32px;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .container100.footer .links ul li {
    width: auto;
  }

  .container100.footer .links ul li + li {
    margin-top: 0;
  }

  /*
	.container100.footer .links ul li a {
		text-decoration: none;
	}
	*/

  /* ---- Quote - emotional_form / white_form ---------------------------------------------------------------- */

  .slide .emotional_form {
    padding-top: 0;
  }

  .slide .white_form {
    /*
		margin-top: 24px;
		*/
  }

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

  .slide .white_form .form_section .questions .question .information button.help_icon {
    clear: both;
    float: left;
    margin-top: 16px;
    position: relative;
    top: auto;
    right: auto;
  }

  .slide .white_form .form_section .questions .question .information button.help_icon .text {
    display: block;
  }

  .slide .emotional_form .form_section .questions .question .information .help_text {
    margin-top: 0;
    position: absolute;
    left: calc(100% + 16px);
    width: 278px;
  }

  .slide .white_form .form_section .questions .question .information .help_text {
    margin-top: 16px;
  }

  /* ---- wave img changes ---------------------------------------------------------------- */

  .slide .white_form:after {
    background-image: url(../img/wave_emotional_768_end.svg);
    height: 77px;
    top: -24px;
    width: 768px;
  }

  body.slide_cover .container100.progress,
  body.slide_personal_details .container100.progress {
    min-height: 88px;
  }

  .wave_bg {
    background-image: url(../img/wave_emotional_620_bg.svg);
  }

  .results_bg {
    /*background-image: url(../img/wave_results_620_bg.svg);*/
  }

  /* ---- MODULAR - slide ---------------------------------------------------------------- */

  .slide .form_section .questions {
    width: 278px;
  }

  .slide .white_form .form_section .questions {
    width: 100%;
  }

  .slide .white_form .form_section .questions .question .information {
    margin-top: 14px;
    width: 278px;
  }

  .slide .white_form .form_section .questions .question .answer {
    margin-left: 16px;
    margin-top: 0;
  }

  .slide#personal_details .white_form .buttons {
    float: right;
  }

  .slide .white_form .form_section .questions .question .answer,
  .slide#personal_details .white_form .buttons {
    width: calc(100% - 278px - 16px);
  }
}

@media (min-width: 768px) {
  /* ---- is_mobile ---------------------------------------------------------------- */

  .is_mobile {
    display: none;
  }

  /* ---- container100s ---------------------------------------------------------------- */

  .container100.footer {
    padding-bottom: 64px;
    padding-top: 64px;
  }

  body[data-view='overlay'] .container100.results_overlay {
    display: flex;
    align-items: center;
  }

  .container100.results_overlay .container {
    margin-top: -40px;
  }

  /* ---- containers ---------------------------------------------------------------- */

  .container100.progress .container,
  .container100.footer .container,
  .slide .emotional_form .container,
  .slide .white_form .container {
    max-width: 704px;
    width: calc(100% - 64px);
  }

  /* ---- font size / line height --------------------------------------------------------------- */

  .slide .title {
    font-size: 40px;
    line-height: 48px;
  }

  .slide#cover_summary .cover_header .big {
    font-size: 40px;
    line-height: 52px;
  }

  .slide .subtitle,
  .slide .white_form .form_section .subheader,
  .slide#cover_summary .cover_header .cover_type {
    font-size: 18px;
    line-height: 26px;
  }

  .slide .emotional_form .form_section .header {
    font-size: 40px;
    line-height: 52px;
  }

  .slide .white_form .form_section .header {
    font-size: 32px;
    line-height: 1.25;
  }

  .slide .form_section .subheader {
    font-size: 18px;
    line-height: 1.56;
  }

  .slide .form_section .questions .question .information .label {
    font-size: 18px;
    line-height: 1.56;
  }

  .container100.results_overlay .paragraphs h3 {
    font-size: 20px;
    line-height: 1.5;
  }

  .container100.results_overlay .paragraphs ul.bullet,
  .container100.results_overlay .paragraphs p {
    font-size: 18px;
    line-height: 26px;
  }

  /* ---- paragraphs.adjusting ---------------------------------------------------------------- */

  .container100.results_overlay .paragraphs.no-results .header {
    text-align: center;
  }

  .container100.results_overlay .paragraphs h4 {
    margin-top: 40px;
  }

  /* ---- next_slide ---------------------------------------------------------------- */

  .container100.progress button.btn.next_slide {
    display: none;
  }

  .slide button.btn.next_slide {
    display: block;
  }

  button.btn.next_slide svg path {
    fill: var(--white);
  }

  /* ---- Quote - emotional_form / white_form ---------------------------------------------------------------- */

  .slide .emotional_form {
    padding-top: 80px;
  }

  .slide .white_form {
    /*
		margin-top: 24px;
		*/
  }

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

  .slide .emotional_form .form_section .questions .question .information .help_text {
    left: calc(100% + 76px);
    width: 284px;
  }

  /* ---- wave img changes ---------------------------------------------------------------- */

  .slide .white_form:after {
    background-image: url(../img/wave_emotional_992_end.svg);
    height: 71px;
    top: -24px;
    width: 992px;
  }

  .wave_bg {
    background-image: url(../img/wave_emotional_768_bg.svg);
  }

  .results_bg {
    /*background-image: url(../img/wave_results_768_bg.svg);*/
  }

  .container100.results_table .wav {
    height: 147px;
    top: -62px;
  }

  .container100.results_table .wav svg.w_lowest_res {
    opacity: 0;
    visibility: hidden;
  }

  .container100.results_table .wav svg.w768 {
    opacity: 1;
    visibility: visible;
  }

  /* ---- MODULAR - slide ---------------------------------------------------------------- */

  .slide .form_section .questions,
  .slide .white_form .form_section .questions .question .information {
    width: 344px;
  }

  .slide .white_form .form_section .questions .question .answer,
  .slide#personal_details .white_form .buttons {
    width: calc(100% - 344px - 16px);
  }

  /* ---- Results - cover_help + more info ---------------------------------------------------------------- */

  .cover_help,
  .more_info {
    height: calc(100% - 48px);
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    width: 720px;
    top: 24px;
    right: -800px;
  }

  .cover_help .panel {
    padding-left: 24px;
    padding-right: 24px;
  }

  .cover_help.show,
  .more_info.show {
    right: 24px;
  }

  .cover_help .close_section,
  .more_info .close_section {
    height: 24px;
    padding: 0;
    top: 20px;
    left: 20px;
    width: 24px;
  }

  .cover_help .close_section,
  .cover_help.show_fixed_action .close_section,
  .more_info .close_section,
  .more_info.show_fixed_action .close_section {
    box-shadow: none;
    overflow: hidden;
  }

  .more_info .panels {
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }

  .more_info .panels .panel {
    height: calc(100%);
    overflow: auto;
  }

  .more_info .panels .panel.left,
  .more_info .panels .panel.right {
    /* This is a fix for Firefox to show the correct padding-bottom */
    padding-bottom: 0;
  }

  .more_info .panels .panel.left:after,
  .more_info .panels .panel.right:after {
    /* This is a fix for Firefox to show the correct padding-bottom */
    content: '';
    float: left;
    height: 24px;
    width: 100%;
  }

  /* ---- Results - panel - left ---------------------------------------------------------------- */

  .more_info .panels .panel.left {
    border-radius: 0;
    padding-top: 42px;
    width: 340px;
  }

  /* ---- Results - panel - right ---------------------------------------------------------------- */

  .more_info .panels .panel.right {
    width: calc(100% - 340px);
  }
}

@media (min-width: 992px) {
  /* ---- container100s ---------------------------------------------------------------- */

  body.transition .container100.progress {
  }

  .container100.results_headers:not(.sticky),
  .container100.results_headers.sticky.active {
    display: block;
  }

  /* ---- containers ---------------------------------------------------------------- */

  .container100.progress .container,
  .container100.footer .container,
  .slide .emotional_form .container,
  .slide .white_form .container {
    width: calc(100% - 96px);
  }

  .container100.progress .container,
  .container100.footer .container {
    max-width: calc(100% - 96px);
  }

  .slide .emotional_form .container,
  .slide .white_form .container {
    max-width: 744px;
  }

  body#broken_down .container100 .container,
  body#results .container100 .container,
  body#transfer .container100 .container {
    width: calc(100% - 96px);
  }

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

  .slide .white_form {
    /*
		margin-top: 28px;
		*/
  }

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

  .slide .emotional_form .form_section .questions .question .information .help_text {
    left: calc(100% + 92px);
    width: 288px;
  }

  /* ---- wave img changes ---------------------------------------------------------------- */

  .slide .white_form:after {
    background-image: url(../img/wave_emotional_1200_end.svg);
    height: 82px;
    top: -28px;
    width: 1200px;
  }

  /* ---- MODULAR - slide ---------------------------------------------------------------- */

  .slide .form_section .questions {
    width: 364px;
  }

  .slide .white_form .form_section .questions .question .information {
    width: 364px;
  }

  .slide .white_form .form_section .questions .question .answer,
  .slide#personal_details .white_form .buttons {
    width: calc(100% - 364px - 16px);
  }

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

  .slide#cover_summary .cover_header .big,
  .slide#cover_summary .cover_header .cover_type,
  .slide#cover_summary .cover_header .include_exclude {
    text-align: left;
  }

  .slide#cover_summary .cover_header .icon {
    background-position: center left;
    height: 42px;
  }

  .slide#cover_summary .cover_header .include_exclude ul li {
    clear: none;
    left: auto;
    margin-right: 24px;
    transform: none;
  }

  /* ---- Results ----------------------------------------------------------------------------------- */

  .container100.results_table {
    margin-top: 70px;
  }

  .container100.results_table .results {
    margin-top: calc(-70px + 16px);
  }

  /* ---- Results - show/hide things ---------------------------------------------------------------- */

  .container100.results_table .results .result .card.desktop {
    display: flex;
  }

  /* ---- footer ------------------------------------------------------------------------------- */

  .container100.footer .download p {
    width: auto;
  }

  .container100.footer .download ul {
    margin-left: 16px;
    margin-top: 0;
    width: auto;
  }

  .container100.footer .download ul li {
    margin-top: 0;
  }
}

@media (min-width: 1200px) {
  /* ---- container100s ---------------------------------------------------------------- */

  .container100.progress {
    /*
		padding: 16px 0;
		*/
  }

  .container100.quote {
    min-height: calc(100vh - 56px + 0px);
  }

  /* ---- containers ---------------------------------------------------------------- */

  body#broken_down .container100 .container,
  body#results .container100 .container,
  body#transfer .container100 .container {
    width: calc(100% - 160px);
  }

  .container100.progress .container,
  .container100.footer .container,
  .slide .emotional_form .container,
  .slide .white_form .container {
    width: calc(100% - 160px);
  }

  .container100.progress .container,
  .container100.footer .container {
    max-width: calc(100% - 160px);
  }

  .slide .emotional_form .container,
  .slide .white_form .container {
    max-width: 688px;
  }

  /* ---- font size / line height --------------------------------------------------------------- */

  .container100.header .left .provided_by {
    font-size: 15px;
    line-height: 20px;
  }

  .container100.header .right .quotes_found {
    font-size: 20px;
    line-height: 40px;
  }

  .container100.results_info .summary {
    font-size: 40px;
    line-height: 1.2;
  }

  /* ---- Quote - emotional_form / white_form ---------------------------------------------------------------- */

  .slide .emotional_form {
    padding-top: 96px;
  }

  .slide .white_form {
    /*
		margin-top: 36px;
		*/
  }

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

  .slide .emotional_form .form_section .questions .question .information .help_text {
    left: calc(100% + 104px);
    width: 336px;
  }

  /* ---- wave img changes ---------------------------------------------------------------- */

  .slide .white_form:after {
    background-image: url(../img/wave_emotional_1440_end.svg);
    height: 98px;
    top: -36px;
    width: 1440px;
  }

  /* ---- MODULAR - slide ---------------------------------------------------------------- */

  .slide .form_section .questions {
    width: 336px;
  }

  .slide .white_form .form_section .questions .question .information {
    width: 336px;
  }

  .slide .white_form .form_section .questions .question .answer,
  .slide#personal_details .white_form .buttons {
    width: calc(100% - 336px - 16px);
  }

  .slide#cover_summary .emotional_form {
    padding-top: 16px;
  }

  /* ---- transfer_form ---------------------------------------------------------------- */

  body#transfer.transfer_debug form#transfer_form {
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    width: 540px;
  }
}

@media (min-width: 1320px) {
  /* ---- container100s ---------------------------------------------------------------- */

  .container100.results_info {
    padding-bottom: 52px;
  }

  .container100.results_table {
    min-height: 780px;
  }

  body[data-view='overlay'][data-overlay='adjusting'] .container100.results_overlay {
    display: block;
  }

  /* ---- containers ---------------------------------------------------------------- */

  body#broken_down .container100 .container,
  body#results .container100 .container,
  body#transfer .container100 .container {
    width: 1280px;
  }

  /* ---- font size / line height --------------------------------------------------------------- */

  .filters_bar .block.top .heading {
    font-size: 18px;
    line-height: 1.44;
  }

  /* ---- Results - results_info ---------------------------------------------------------------- */

  .container100.results_info .buttons {
    display: none;
  }

  .container100.results_info .summary a.btn.white_text_underline.cover_needs {
    display: inline-block;
  }

  /* ---- Results - results_headers ---------------------------------------------------------------- */

  body#results .container100.results_headers .headers {
    padding-left: calc(308px + 16px);
  }

  /* ---- Results - results_table ---------------------------------------------------------------- */

  body#results .container100.results_table .results {
    padding-left: 308px;
  }

  /* ---- Results - overlay ---------------------------------------------------------------- */

  .container100.results_overlay .paragraphs.adjusting {
    margin-left: calc(284px + 148px);
    margin-top: 240px;
    min-height: 600px;
  }

  /* ---- Results - blurry_bg ---------------------------------------------------------------- */

  .filters_bar.show + .blurry_bg {
    opacity: 0;
    visibility: hidden;
  }

  /* ---- Results - filters_bar ---------------------------------------------------------------- */

  @keyframes filters_bar_fade {
    from {
      margin-top: 40px;
      opacity: 0;
      visibility: hidden;
    }
    to {
      margin-top: 0px;
      opacity: 1;
      visibility: visible;
    }
  }

  body[data-view='results'] .filters_bar,
  body[data-view='no_results'] .filters_bar,
  body[data-view='overlay'][data-overlay='adjusting'] .filters_bar {
    animation: filters_bar_fade 0.5s normal forwards ease;
    animation-delay: 0.4s;
  }

  .filters_bar {
    border-radius: 12px;
    box-shadow: 0 4px 20px 0 rgba(61, 64, 61, 0.1);
    height: auto;
    opacity: 0;
    position: absolute;
    top: 240px;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
    visibility: hidden;
    width: 284px;
    z-index: 2;
  }

  .filters_bar,
  .filters_bar.show {
    left: calc(50% - 640px);
  }

  body[data-view='results'] .filters_bar,
  body[data-view='no_results'] .filters_bar {
    display: block;
  }

  .filters_bar .scroll,
  body[data-view='overlay'] .filters_bar .scroll {
    padding-bottom: 0;
  }

  .filters_bar .block.top .buttons {
    display: none;
  }

  .filters_bar .block.top .heading {
    margin-top: 0;
  }

  .filters_bar.show + .blurry_bg {
    opacity: 0;
    visibility: hidden;
  }

  .filters_bar .mobile_update,
  body[data-view='overlay'] .filters_bar .mobile_update {
    display: none;
  }
}

@media (min-width: 1440px) {
  /* ---- container100s ---------------------------------------------------------------- */

  .container100.progress {
    padding: 32px 0;
  }

  body.transition .container100.progress {
  }

  /* ---- containers ---------------------------------------------------------------- */

  .container100.progress .container,
  .container100.footer .container,
  .slide .emotional_form .container,
  .slide .white_form .container {
    width: calc(100% - 160px);
  }

  .container100.progress .container,
  .container100.footer .container {
    max-width: 1280px;
  }

  .slide .emotional_form .container,
  .slide .white_form .container {
    max-width: 848px;
  }

  /* ---- Quote - emotional_form / white_form ---------------------------------------------------------------- */

  .slide .emotional_form {
    padding-top: 80px;
  }

  .slide .white_form {
    /*
		margin-top: 30px;
		padding-top: calc(80px + 32px);
		*/
  }

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

  .slide .emotional_form .form_section .questions .question .information .help_text {
    left: calc(100% + 124px);
    width: 416px;
  }

  /* ---- wave img changes ---------------------------------------------------------------- */

  .slide .white_form:after {
    background-image: url(../img/wave_emotional_2000_end.svg);
    height: 111px;
    top: -30px;
    width: 2000px;
  }

  /* ---- MODULAR - slide ---------------------------------------------------------------- */

  .slide .form_section .questions {
    width: 416px;
  }

  .slide .white_form .form_section .questions .question .information {
    width: 416px;
  }

  .slide .white_form .form_section .questions .question .answer,
  .slide#personal_details .white_form .buttons {
    width: calc(100% - 416px - 16px);
  }
}

@media (min-width: 2000px) {
  /* ---- wave img changes ---------------------------------------------------------------- */

  .wave_bg {
    background-image: url(../img/wave_emotional_2000_bg.svg);
  }

  .results_bg {
    /*background-image: url(../img/wave_results_2000_bg.svg);*/
  }
}

hr {
  margin: 50px 0;
}

.slide:not(.current),
.question .error_messages,
.resources,
.hidden,
.skip {
  display: none;
}

.question {
  clear: both;
}

input + label {
  padding: 5px 10px;
  border: 1px solid transparent;
}

input:checked + label {
  border-color: inherit;
}

body.transition {
  background-color: #fff;
  color: #000;
  transition: background-color 0.35s;
}

.next_slide,
.prev_slide,
.mobile_next_question {
  cursor: pointer;
}

.vehicle:not(.found) .found,
.vehicle.found .initial,
.vehicle.found .subtext,
.vehicle.found .field,
.vehicle:not(.not_right) .manual_trigger,
.vehicle.manual .manual_trigger,
.vehicle.found .find,
.vehicle:not(.found) .summary_container,
.vehicle:not(.not_found) .message.not_found,
.vehicle:not(.incomplete) .message.incomplete,
.vehicle:not(.not_found):not(.incomplete):not(.manual) .manual {
  display: none;
}

.address:not(.found) .found,
.address.incomplete .found,
.address.found:not(.incomplete) .initial,
.address:not(.not_right) .manual_trigger,
.address.manual .manual_trigger,
.address.found .find,
.address.found:not(.incomplete) .question.postcode .field,
.address.show_summary .picker,
.address:not(.found) .picker,
.address.incomplete .picker,
.address:not(.show_summary) .summary_container,
.address:not(.not_found) .message.not_found,
.address:not(.incomplete) .message.incomplete,
.address:not(.not_found):not(.incomplete):not(.manual) .manual {
  display: none;
}

.vehicle .manual_trigger,
.vehicle .find {
  cursor: pointer;
}

.vehicle.searching .find {
  opacity: 0.5;
}

input.uppercase {
  text-transform: uppercase;
}

.question.dob .answer .field .datepicker {
  display: none;
}

body.slide_national.prevent_eu .header .initial,
body:not(.prevent_eu) .prevent_eu {
  display: none;
}

.adjusting_form p {
  float: left;
  width: 100%;
  margin: 10px 0;
}

.adjusting_form .subheader + p {
  margin-top: 80px;
  font-weight: bold;
}
/* footer */
.footer {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  width: 100vw;
  padding: 64px 0;
  color: var(--Charcoal-5);
  background-color: var(--Purple-Dark-100);
}

.template-v3 .footer {
  background-color: #291d4c;
}

.footer-msm-logo {
  background-image: url('../../brand/img/logo_white_footer.svg');
  background-size: auto 28px;
  width: 223px;
  height: 28px;
}

.footer-contents {
  width: 80%;
}

.footer-contents > .separator {
  border-bottom: 1px solid var(--White-100);
  margin-top: 17px;
  margin-bottom: 30px;
}

.footer-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 32px;
  height: 14px;
}

.footer-links > a {
  font-weight: bold;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--White-80);
  color: var(--White-100);
}

.important_text {
  padding-top: 48px;
  padding-bottom: 28px;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0%;
  color: var(--White-80);
}

.social-links {
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding-top: 38px;
}

.download a img {
  height: 40px;
}
/* end footer */

/* msm's injected cookie popup */
.banner-container .banner {
  margin: auto;
}