/*
** PLEASE make sure to comment what page the CSS is for when adding new (like what is already there)
** IF the CSS is for a page that already exists, PLEASE add it to the correct section
** Adaptive changes MUST go to the bottom of the correct page sections 
*/

/*
** To add padding, please use the bootstrap set classes
** See W3Schools to see the set classes
** Make sure to not double up on the padding
** Use the responsive classes to change padding between devices
** p-5 = 48px
** p-4 = 24px
** p-3 = 16px
** p-2 = 8px
** p-1 = 4px
*/

/*MASTER FONT*/


@font-face {
  font-family: "favoritbold";
  src: url("fonts/ObjectSans-Bold.otf");
}
@font-face {
  font-family: "favoritregular";
  src: url("fonts/ObjectSans-Regular.otf");
}
@font-face {
  font-family: "favoritlight";
  src: url("fonts/ObjectSans-Thin.otf");
}

@font-face {
  font-family: "favoritmono";
  src: url("fonts/ObjectSans-HeavySlanted.otf");
}

body {
  font-family: "favoritregular";
  font-size: 16px;
  font-weight: 400;
  background-color: #ffffff;
  color: #4d4d4d;
}

@media (min-width: 1600px) {
  .container {
    max-width: 1440px;
  }
}

a {
  color: #676767;
  transition: all 1s;
}
a:hover {
  color: #003c78;
}
a:focus-visible,
a:focus,
a:visited {
  outline: none !important;
}
.btn {
  border-radius: 0px !important;
  font-weight: bold;
  min-height: 45px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
}
.btn.disabled,
.btn:disabled,
.btn:disabled:hover,
.btn.disabled:hover {
  opacity: 0.8;
  background: #6d6d6d;
  color: #d3d3d3;
  border-color: #6d6d6d;
  box-shadow: inset 0 0 0 0 #d3d3d3;
}
.btn-link {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  padding: 0;
  border-width: 0;
  border-style: none;
}
.btn-link.focus,
.btn-link:focus {
  outline: none;
}

.btn-long {padding: 5px 20px !important;}

hr {
  border-color: #676767;
}
.alert.alert-warning {
  color: #ffffff;
  background-color: #00aad2;
  border-color: #0597b9;
  font-size: 0.875rem;
  line-height: 1.2rem;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "favoritregular", sans-serif;
  font-weight: normal;

  color: #111111;
}

.model h5 {font-size:0.95rem;}
.font-regular {
  font-family: "favoritregular";
  font-weight: normal !important;
}
.font-medium {
  font-family: "favoritbold";
  font-weight: normal !important;
}

.bgbanner h1,
.bgbanner h2,
.bgbanner h3,
.bgbanner .h1,
.bgbanner .h2,
.bgbanner .h3 {
  color: #ffffff;
}

/* font sizes */
.font-size-enormous {
  font-size: 4.5rem;
  font-weight: 200;
} /* 67.5px */
.font-size-superhuge {
  font-size: 3.14rem;
  line-height: 3.2rem;
} /* 50.4px */
.font-size-biggestest {
  font-size: 2.25rem;
} /* 36px */
.font-size-biggest {
  font-size: 2rem;
} /* 32px */
.font-size-bigger {
  font-size: 1.75rem;
} /* 28px */
.font-size-bigish {
  font-size: 1.5rem;
} /* 24px */
.font-size-big {
  font-size: 1.2rem;
} /* 20px */
.font-size-normal {
  font-size: 1rem;
} /* 16px */
.font-size-small {
  font-size: 0.875rem;
} /* 14px */
.font-size-smaller {
  font-size: 0.7rem;
} /* 11.2px */
.font-size-smallest {
  font-size: 0.6rem;
} /* 9.6px */

/* line heights */
.line-height-normal {
  line-height: 1rem;
}
.line-height-small {
  line-height: 0.9rem;
}
.line-height-smaller {
  line-height: 0.6rem;
}
.line-height-big {
  line-height: 1.4rem;
}
.line-height-bigger {
  line-height: 1.6rem;
}
.line-height-biggest {
  line-height: 2rem;
}

@media screen and (max-width: 1600px) {
  .lap-font-size-biggestest {
    font-size: 2rem;
  } /* 32px */
  .lap-font-size-biggest {
    font-size: 1.5rem;
  } /* 24px */
  .lap-font-size-bigger {
    font-size: 1.375rem;
  } /* 22px */
  .lap-font-size-bigish {
    font-size: 1.2rem;
  } /* 20px */
  .lap-font-size-big {
    font-size: 1rem;
  } /* 16px */
  .lap-font-size-normal {
    font-size: 0.875rem;
  } /* 14px */
  .lap-font-size-small {
    font-size: 0.7rem;
  } /* 11.2px */
  .lap-font-size-smaller {
    font-size: 0.6rem;
  } /* 9.6px */
  .lap-font-size-smallest {
    font-size: 0.6rem;
  } /* 9.6px */
}
@media screen and (max-width: 1199px) {
  .sm-font-size-superhuge {
    font-size: 2.14rem !important;
    line-height: 2.5rem !important;
  }
  .sm-font-size-biggest {
    font-size: 1.4rem !important;
  }
  .sm-font-size-bigger {
    font-size: 1.1rem !important;
  }
  .sm-font-size-big {
    font-size: 1rem !important;
  }
  .sm-font-size-normal {
    font-size: 0.9rem !important;
  }
  .sm-font-size-small {
    font-size: 0.7rem !important;
  }
  .sm-font-size-smaller {
    font-size: 0.55rem !important;
  }
}
@media screen and (max-width: 850px) {
  .xs-font-size-superhuge {
    font-size: 1.95rem !important;
    line-height: 2rem !important;
  }
  .xs-font-size-biggest {
    font-size: 1.5rem !important;
  }
  .xs-font-size-bigger {
    font-size: 1.2rem !important;
  }
  .xs-font-size-big {
    font-size: 1rem !important;
  }
  .xs-font-size-normal {
    font-size: 0.8rem !important;
  }
  .xs-font-size-small {
    font-size: 0.7rem !important;
  }
  .xs-font-size-smaller {
    font-size: 0.6rem !important;
  }
}
@media screen and (max-width: 350px) {
  .mob-font-size-biggest {
    font-size: 1.4rem !important;
    line-height: 1.5rem !important;
  }
  .mob-font-size-bigger {
    font-size: 1.1rem !important;
  }
  .mob-font-size-big {
    font-size: 1rem !important;
  }
  .mob-font-size-normal {
    font-size: 0.9rem !important;
  }
  .mob-font-size-small {
    font-size: 0.7rem !important;
  }
  .mob-font-size-smaller {
    font-size: 0.55rem !important;
  }
}

/*---------------------------------------------------------------------------------------------------*/
/*------------------------------------------GLOBAL CLASSES-------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/

.bootstrap-select>.dropdown-toggle.bs-placeholder {color:#212529; font-weight:300;}

#affinity_info {
  display: none;
}
input.invalid,
textarea.invalid,
select.invalid {
  border: 1px solid red !important;
}
.validmessage {
  padding-top: 5px;
  margin-bottom: 10px;
}
#ot-sdk-btn-floating.ot-floating-button {
  display: none !important;
}
.border-bottom {
  border-bottom: 1px solid #111111 !important;
}
.border-bottom-grey {
  border-bottom: 1px solid #acacac !important;
}
.border-top {
  border-top: 1px solid #111111 !important;
}
.border-left {
  border-left: 1px solid #111111 !important;
}
.border-right {
  border-right: 1px solid #111111 !important;
}
.border-bottom-light {
  border-bottom: 1px solid #e4e4e4 !important;
}
.border-top-light {
  border-top: 1px solid #e4e4e4 !important;
}
.border-left-light {
  border-left: 1px solid #e4e4e4 !important;
}
.border-right-light {
  border-right: 1px solid #e4e4e4 !important;
}
.border-none {
  border: none !important;
}
.border-lg-left {
  border-left: 1px solid #676767 !important;
}

@media screen and (max-width: 850px) {
  .border-lg-left {
    border-left: none !important;
  }
}

.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.nobullet {
  list-style: none;
}
.navbar-default {
  background-color: #222222;
  border: 0px;
}
.float-left {
  float: left;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.float-right {
  float: right;
}

.white-box {
  float: left;
  margin: 0%;
  width: 100%;
}
.grey-box {
  float: left;
  margin: 0%;
  width: 100%;
}
.border-square {
  border-radius: 0px !important;
}

.btn-filter {
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
.btn-filter.collapsed .fas.fa-minus {
  display: none;
}
.btn-filter[aria-expanded="true"] .fas.fa-plus {
  display: none;
}

.btn-space {
  margin: 5px;
}
.btn-wrap-text {
  white-space: normal;
}
.display-block {
  display: block;
}
.panel-body {
  padding: 15px 25px 15px 25px;
}
.panel-no-body {
  padding: 0px;
}
.panel-no-bottom {
  margin-bottom: 0px;
}
.panel-border {
  border: 1px solid #e7e7e7;
}
.vertical-middle-table {
  display: table;
}
.vertical-middle-cell {
  display: table-cell;
  vertical-align: middle;
}
.vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
  /* Mobile Large */
  .mob-vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .mob-noborder {
    border: 0px !important;
  }

  .mob-border-top {
    border-top: 1px solid #676767;
  }
  .mob-border-bottom {
    border-bottom: 1px solid #676767;
  }
  .mob-border-left {
    border-left: 1px solid #676767;
  }
  .mob-border-right {
    border-right: 1px solid #676767;
  }

  .mob-no-border-top {
    border-top: 0px solid #676767 !important;
  }
  .mob-no-border-bottom {
    border-bottom: 0px solid #676767 !important;
  }
  .mob-no-border-left {
    border-left: 0px solid #676767 !important;
  }
  .mob-no-border-right {
    border-right: 0px solid #676767 !important;
  }
}

.radius-bottom-left {
  border-bottom-left-radius: 4px;
}
.radius-bottom-right {
  border-bottom-right-radius: 4px;
}
.radius-top-10 {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
.radius-5px {
  border-radius: 5px;
}
.element-spacing {
  margin-top: 0px;
  margin-bottom: 10px;
}
.offset-10 {
  padding-left: 10%;
  padding-right: 10%;
}
.offset-2px {
  padding-left: 2px !important;
  padding-right: 2px !important;
}
.cursorpointer {
  cursor: pointer;
}

.fullwidth {
  float: left;
  width: 100%;
}
.fullheight {
  height: 100%;
}
.halfheight {
  float: left;
  height: 50%;
}
.row-nomargin {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.halfwidth {
  width: 50%;
}
.readmore,
.readless {
  margin-top: 20px;
}
.text-nodecoration:hover {
  text-decoration: none;
}
.rounded {
  border-radius: 5px !important;
}
.rounded-top {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
.btn-margin {
  margin: 1% 2%;
}
.text-underline {
  text-decoration: underline;
}
.shadow {
  box-shadow: 0px 5px 5px #00000029 !important;
}
.shadow-alt {
  box-shadow: 0px 8px 15px #00000029 !important;
}

.ovehicle {
  max-width: 100%;
  width: 100%; /* border-top-left-radius: 5px;border-top-right-radius: 5px; */
  mix-blend-mode: multiply;
  border-radius: 5px;
}
.dealpagecontainer .srimage {
  object-fit: none;
  object-position: 50% 65%;
  width: 100%;
  overflow: hidden;
  position: relative;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  /* background-color: #D3D3D3; */
}
.breadcrumbs {
  font-size: 0.9rem;
  padding-top: 1%;
  padding-bottom: 1%;
}
.breadcrumbs a {
  color: #ffffff;
}
.card {
  /* background-color: #fbfaf8; */
  border-color: #111111;
  background: none;
}

.bgbanner {
  /* Use this class to get the base of a background banner, then add the image in its own class */
  background-position-x: center;
  background-position-y: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: #0d0d0d;
  height: 400px;
}

.bgbanner .quat-overlay {
  display: flex;
  justify-content: start;
  align-items: center;
}

.sticky-bottom {
  position: sticky;
  bottom: 0;
}

.ribbon {
  position: absolute;
  bottom: 0;
  height: auto;
  background: #6882e7cc;
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
}
.solid.ribbon {
  position: relative;
  letter-spacing: 1px;
}
.deal.ribbon {
  top: 0%;
}

.no-opacity {
  opacity: 1 !important;
}
.img-fluid-35 {
  max-width: 35%;
}
.hyphen-div {
  padding: 8px 3px;
}

/*-----------------------------------------------------------------*/
/*---------------------- Primary Colour --------------------------*/
/*---------------------------------------------------------------*/

.primary-colour {
  color: #0076be;
}
.primary-bg {
  background-color: #0076be;
}
.primary-border {
  border: 2px solid #0076be;
}

.primary-button {
  background: #0076be;
  border: 4px solid #0076be;
  color: #ffffff;
  box-shadow: inset 0 0 0 0 #0076be;
  -webkit-transition: ease-out 0.35s;
  -moz-transition: ease-out 0.35s;
  transition: ease-out 0.35s;
  padding-bottom: 15px;
  padding-top: 15px;
}

.primary-button:not(.disabled):hover {
  color: #0076be;
  background: #ffffff;
  border: 4px solid #0076be;
}


.primary-border-bottom {
  border-bottom: 1px solid #002c5f;
}
.primary-border-top {
  border-top: 1px solid #002c5f;
}
.primary-border-right {
  border-right: 1px solid #002c5f;
}
.primary-border-left {
  border-left: 1px solid #002c5f;
}

.primary-card {
  background: #002c5f;
  color: #fff;
  border: 1px solid #002c5f;
}

/*-----------------------------------------------------------------*/
/*---------------------- Secondary Colour ------------------------*/
/*---------------------------------------------------------------*/

.secondary-colour {
  color: #fff;
}

.secondary-button {
  background: #ffffff;
  border: 4px solid #0076be;
  color: #111111;
  box-shadow: inset 0 0 0 0 #003c78;
  -webkit-transition: ease-out 0.35s;
  -moz-transition: ease-out 0.35s;
  transition: ease-out 0.35s;
  padding-bottom: 15px;
  padding-top: 15px;
}

.secondary-button:not(.disabled):hover {
  color: #ffffff;
  background: #0076be;
  border: 4px solid #0076be;
}


.secondary-button-alt {
  background: #000000;
  border: none;
  border-right: 16px solid #28001e;
  color: #ffffff;
  box-shadow: inset 0 0 0 0 #28001e;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
  padding-bottom: 15px;
  padding-top: 15px;
}
.secondary-button-alt:hover {
  color: #fff;
  background: #28001e;
  box-shadow: inset -400px 0 0 0 #28001e;
}
.secondary-border {
  border: 2px solid #fff;
}
.secondary-border-bottom {
  border-bottom: 1px solid #fff;
}
.secondary-bg,
.secondary-bgcolor {
  background: #fff;
}
.secondary-bg-alt {
  background: #fff !important;
}

.secondary-cta {
  background: #9b9b9b;
  border: none;
  color: #ffffff;
  padding-bottom: 15px;
  padding-top: 15px;
}
.secondary-cta:hover {
  color: #fff;
  background-color: #797979;
}

@media screen and (max-width: 767px) {
  /* Mobile Large */
  .secondary-bg-mob {
    background: #d3d3d3;
    color: #000000;
  }
}
.journey-btn.secondary-button {
  border: none;
  background-color: transparent;
}

.dealer_checkbox.secondary-button {
  padding-top: unset;
  padding-bottom: unset;
}

/*-----------------------------------------------------------------*/
/*---------------------- Tertiary Colour --------------------------*/
/*---------------------------------------------------------------*/

.tertiary-colour {
  color: #00819e;
}
.tertiary-border {
  border: 1px solid #e4dcd3 !important;
}
.tertiary-border-alt {
  border: 1px solid #0076be !important;
}

.tertiary-bg {
  background: #6d6d6d;
}
.tertiary-border-bottom {
  border-bottom: 4px solid #6d6d6d;
}

.tertiary-button {
  font-family: "favoritlight", sans-serif;
  background-color: transparent;
  color: #0076be;
  transition: all 0.35s;

}
.tertiary-button.active{border-bottom: 1px solid #0076be;}

.tertiary-button:hover {
  border-color: #00819e;
  color: #fff;
  background-color: #00819e;
  box-shadow: inset 400px 0 0 0 #00819e;
}

.tertiary-button:hover {
  border-color: #6d6d6d;
  color: #fff;
  background-color: #6d6d6d;
}

/*-----------------------------------------------------------------*/
/*---------------------- Quat Colour -----------------------------*/
/*---------------------------------------------------------------*/

.quat-colour {
  color: #4d4d4d;
}
.quat-bg {
  background: #4d4d4d;
  color: #ffffff;
}
.quat-border-bottom {
  border-bottom: 4px solid #4d4d4d;
}
.quat-button {
  background-color: transparent;
  color: #4d4d4d;
  border: 4px solid #4d4d4d;
  transition: all 0.35s;
  padding-bottom: 15px;
  padding-top: 15px;
}
.switchprice.quat-button {
  background-color: transparent;
  color: #000;
  border: 4px solid #d3d3d3;
  transition: all 0.35s;
}
.quat-button:hover {
  border-color: #4d4d4d;
  color: #fff !important;
  background-color: #525353;
}

.banner {
  margin-top: 3rem;
  background-color: #323232;
}

.banner.py-5 {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.bgbanner .quat-overlay {
  color: #e4e4e4;
  background: -moz-linear-gradient(top, rgba(64, 64, 64, 0.4) 0%, rgba(64, 64, 64, 0.4) 100%);
  background: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.4) 0%, rgba(64, 64, 64, 0.4) 100%);
  background: linear-gradient(to bottom, rgba(64, 64, 64, 0.4) 0%, rgba(64, 64, 64, 0.4) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#99000000',GradientType=0 );
}
.quat-img-overlay {
  background: -moz-linear-gradient(-45deg, rgba(205, 205, 205, 0.8) 0%, rgba(211, 211, 211, 0.8) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(205, 205, 205, 0.8) 0%, rgba(211, 211, 211, 0.8) 100%);
  background: linear-gradient(135deg, rgba(205, 205, 205, 0.8) 0%, rgba(211, 211, 211, 0.8) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f8f8f8', endColorstr='#f2f8f8f8',GradientType=1 );
  color: #222222;
}
.quat-overlay {
  color: #e4e4e4;
  background: -moz-linear-gradient(top, rgba(64, 64, 64, 0.2) 0%, rgba(64, 64, 64, 0.2) 100%);
  background: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.2) 0%, rgba(64, 64, 64, 0.2) 100%);
  background: linear-gradient(to bottom, rgba(64, 64, 64, 0.2) 0%, rgba(64, 64, 64, 0.2) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#99000000',GradientType=0 );
}
.quat-overlay-dark {
  background: -moz-linear-gradient(-45deg, rgba(139, 86, 86, 0.8) 0%, rgba(76, 76, 76, 0.8) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(76, 76, 76, 0.8) 0%, rgba(76, 76, 76, 0.8) 100%);
  background: linear-gradient(135deg, rgba(76, 76, 76, 0.8) 0%, rgba(76, 76, 76, 0.8) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#664c4c4c', endColorstr='#664c4c4c',GradientType=1 );
  color: #e4e4e4;
}
.quat-gradient-bg {
  background: #686968;
  color: #f8f8f8;
}

.quat-blur {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.overlay {
  background: -moz-linear-gradient(top, rgba(104, 105, 104, 0.7) 0%, rgba(29, 29, 27, 0.7) 100%);
  background: -webkit-linear-gradient(top, rgba(104, 105, 104, 0.7) 0%, rgba(29, 29, 27, 0.7) 100%);
  background: linear-gradient(to bottom, rgba(104, 105, 104, 0.7) 0%, rgba(29, 29, 27, 0.7) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#686968', endColorstr='#f8f8f8',GradientType=0 );
  color: #f8f8f8;
}

/****************** Quin - Yellow ******************/

.quinary-colour {
  color: #010000;
}

/* pagination */
.pagination {
  flex-wrap: wrap !important;
}

/*Modal elements */
.modal-dialog {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}
.modal-header .close {
  padding: 1rem 1rem 0rem 1rem;
  margin: -1rem -1rem -1rem auto;
  font-size: 2.5rem;
}
.modal-header {
  border-bottom: 1px solid #676767 !important;
  background-color: #fff;
}

.modal-header h4 {
  color: #002c5f !important;
}

.close {
  font-size: 1.5rem;
}

.modal-md .modal-body {
  padding-bottom: 2.25rem !important;
}
.modal-md {
  max-width: 474px !important;
}
.card-body {
  padding: 1.25rem 0.5rem;
}
@media screen and (max-width: 767px) {
  /* Mobile Large */
  body.modal-open {
    overflow: hidden;
  }
  .modal-dialog {
    display: block;
    justify-content: unset;
    flex-direction: unset;
    align-content: unset;
    height: 100%;
  }
}

/*form elements */
.form-control {
  font-size: 1.125rem !important;
  color: #000000 !important;
  border: 1px solid #6d6d6d !important;
  border-radius: 0px !important;
}
.form-control::placeholder {
  font-size: 1.125rem !important;
  opacity: 1 !important;
  color: #000000 !important;
}
.form-horizontal .control-label.text-left {
  text-align: left;
}
.form-group.select-short select + i.fa {
  float: right;
  margin-top: -37px;
  margin-right: 5px;
  pointer-events: none;
  background-color: transparent;
  padding-right: 5px;
  color: #555555;
  font-size: 1.3em;
}
.form-control:focus {
  background-color: #f8f8f8;
}
.custom-checkbox .custom-control-label::before {
  border: 1px solid #919191;
  border-radius: 0px;
  width: 1.25rem;
  height: 1.25rem;
}
.custom-checkbox .custom-control-label::after {
  width: 1.25rem;
  height: 1.25rem;
}
.custom-control-input:checked ~ .custom-control-label::before {
  color: #222222;
  background-color: #fff !important;
  border: 1px solid #222222;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  color: #002c5f !important;
  font-family: "Font Awesome 5 Free" !important;
  content: "\f00c" !important;
  font-size: 16px !important;
  font-weight: 600;
  position: absolute;
  top: 2px;
  left: -21px;
  background-image: none !important;
}

.form-check-label {
  display: inline-flex;
  align-items: center;
}
.form-check-inline .form-check-input {
  width: 1.0625rem;
  height: 1.0625rem;
  margin-right: 0.18rem;
  margin-left: 0.18rem;
}
select {
  background: url(/images/down-arrow.svg) no-repeat right #ddd;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position-x: 95%;
}
select::-ms-expand {
  display: none;
}
input[type="checkbox"] {
  border-radius: 0 !important;
  height: 18px;
  width: 18px;
  border-color: #000 !important;
}

#enquiryform .form-control {
  font-size: 0.8rem !important;
  color: #000000 !important;
}

#enquiryform .form-control::placeholder {
  font-size: 0.8rem !important;
  opacity: 1 !important;
  color: #000000 !important;
}

#enquiryform .form-check-inline .form-check-input {
  width: 1rem;
  height: 1rem;
}

#enquiryform .has-error.has-danger {
  font-size: 0.8rem;
}
.has-error.has-danger {
  color: #ff6678;
}

@media screen and (max-width: 767px) {
  /* Mobile Large */
  .form-control {
    height: calc(2em + 0.75rem + 2px);
  }
  select.form-control {
    background-position: calc(100% - 20px) calc(1em + 0.2rem), calc(100% - 15px) calc(1em + 0.2rem), calc(100% - 2rem) 0.5em;
    /* background-size: 3px 3px, 5px 5px, 1px 1.7rem; */
  }
  select.form-control:focus {
    background-position: calc(100% - 15px) 1rem, calc(100% - 20px) 1rem, calc(100% - 2rem) 0.3rem;
    /* background-size: 5px 4px, 3px 4px, 1px 1.7rem; */
  }
  .readmore,
  .readless {
    margin-top: 0;
  }
}

/*Slick styles*/

button.slick-prev.slick-arrow,
button .slick-next.slick-active {
  height: 30px;
}
.slick-dots {
  left: 0px;
}
.slick-dots li button:before {
  font-size: 28px !important;
  color: #000000 !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 400;
  content: "\f111" !important;
  opacity: 1 !important;
}
/* .slick-dots li.slick-active button:before {color:#000000 !important;font-family: "Font Awesome 5 Free"!important;font-weight: 400;content: "\f192"!important;} */
.slick-dots li.slick-active button:before {
  color: #000000 !important;
  font-family: "Font Awesome 5 Free" !important;
  content: "\f111" !important;
  font-size: 28px !important;
  font-weight: 900;
}

.slick-next:before,
[dir="rtl"] .slick-prev:before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900;
  content: "\f054" !important;
  color: #000000 !important;
  font-size: 30px;
}
.slick-prev:before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900;
  content: "\f053" !important;
  color: #000000 !important;
  font-size: 30px;
}
.slick-prev {
  left: -50px !important;
  z-index: 1;
}
.slick-next {
  right: -50px !important;
  z-index: 1;
}
#hpspecials .slick-slide {
  max-width: 100% !important;
}
#hpspecials .slick-prev {
  left: 30% !important;
}
#hpspecials .slick-next {
  right: 30% !important;
}

.slick-next:before,
.slick-prev:before {
  font-size: 2rem !important;
  line-height: 1.5rem !important;
}
#hpspecials .slick-slide img {
  display: inline !important;
}
@media screen and (max-width: 770px) {
  /* Tablet Portrait */
  .slick-prev {
    left: -25px !important;
  }
  .slick-next {
    right: -25px !important;
  }
  #hpspecials .slick-slide {
    height: 470px !important;
  }
}
@media screen and (max-width: 767px) {
  /* Mobile Large */
  .slick-next,
  .slick-prev {
    top: 102% !important;
    height: 32px !important;
  }
  .slick-prev {
    left: 15px !important;
  }
  .slick-next {
    right: 15px !important;
  }
  #hpspecials .slick-slide {
    height: auto !important;
  }
  #hpspecials .slick-prev {
    left: 5% !important;
  }
  #hpspecials .slick-next {
    right: 5% !important;
  }
}

/*---------------------------------------------------------------------------------------------------*/
/*------------------------------------------Header Code----------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.header-container {
  /* height: 78px; */
  height: 0px;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
.main-header {
  position: relative;
  background-color: #fff;
  border-bottom: 1px solid #111111;
}

.main-header .logo {
  position: absolute;
  top: 0;
}

/*Links*/
.header button.secondary-button-alt {
  min-height: 35px;
  font-size: 1.25rem;
  padding-top: 1%;
  padding-bottom: 1%;
}
.header nav.navbar {
  padding: 0;
}

.navbar-expand-md .navbar-nav .nav-link {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.dropdown-menu {
  margin: 0;
  border: 0px;
  border-radius: 0px;
}

.navbar-nav .nav-item .nav-link {
  font-weight: 400 !important;
}

.header .top-bar li.nav-item {
  padding: 0 0%;
  margin: 0 0%;
  border-right: 1px solid #7b7f82;
}

@media screen and (min-width: 1366px) {
  .header li.nav-item {
    padding: 0 0%;
    margin: 0 1%;
  }
}
@media screen and (max-width: 1050px) {
  /* Tablet Landscape */
  li.nav-item.active {
    padding: 0 0%;
    margin: 0 0.8%;
  }
}

@media screen and (max-width: 899px) {
  .header .nav-link {
    font-size: 0.9rem;
  }
  .header {
    position: relative;
  }
  .main-header .logo {
    position: relative;
    top: 0;
  }
}

/*Mobile menu*/
#mobmenu li {
  width: 100%;
}
#mobmenu a {
  color: #000;
  font-size: 1.2rem;
  font-weight: 400;
}

/*Links Hover*/
.header .nav-item > a {
  color: #111111;
  width: 100%;
  border-radius: 0px;
  position: relative;
  transition: 1s;
}
.header .nav-item > a:before {
  content: "";
  width: 0;
  height: 1px;
  background: #111111;
  position: absolute;
  left: 10%;
  bottom: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.header .nav-item > a:hover:before {
  width: 80%;
}
.header .nav-item.active > a:before {
  width: 80%;
}
.header .top-bar .nav-link {
  font-size: 80%;
  text-align: center;
}
.header .nav-item > a.btn:hover {
  color: #000000;
}

/*Adaptive Header*/
@media screen and (min-width: 1550px) {
  .header .logo img {
    max-width: 70%;
  }
}
@media screen and (max-width: 1550px) {
  /* Toni Laptop */
  .header-container {
    /* height: 78px; */
  }
  .header .top-bar .nav-link {
    font-size: 0.7rem;
  }
}
@media screen and (max-width: 1366px) {
  /* Laptop */
  .header .logo img {
    max-width: 90%;
  }
  .header-container {
    /* height: 78; */
  }
}
@media screen and (max-width: 1050px) {
  /* Tablet Landscape */
  .header-container {
    /* height: 71px; */
  }
}
@media screen and (max-width: 770px) {
  /* Tablet Portrait */
  .header-container {
    /* height: 60px; */
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0.3rem;
    padding-left: 0.3rem;
  }
  .showroom-header .showroom-badge .showroom-total {
    font-size: 0.8rem;
    align-items: center;
    width: 30px;
    height: 30px;
    padding-bottom: 0.4rem;
    top: -18px;
  }
}
@media screen and (max-width: 767px) {
  /* Mobile Large */
  .header {
    position: relative;
  }
  .topnav .nav-link {
    padding: 0.5rem 0.5rem;
  }
  .navbar-toggler {
    padding: 0.25rem 0.64rem;
  }
  /*Header search mob modal*/
  #hmobsearch .modal-content {
    background-color: #f8f8f8;
    height: 100vh;
    border: none;
    border-radius: 0;
  }
  #hmobsearch .modal-dialog {
    margin: 0rem;
  }
  .header .collapse.show {
    height: 100vh;
  }
  .header li.nav-item {
    padding: 0% 0;
    width: 100%;
    border-bottom: 1px solid #4c4b4b;
    text-align: left;
  }
  .header .nav-item > a {
    padding-left: 4%;
    padding-top: 5%;
    padding-bottom: 5%;
  }
  .header .nav-link {
    font-size: 1rem;
  }
  .header .nav-item.active > a {
  }
  .header .top-bar li.nav-item {
    padding: 0% 0;
    width: 50%;
    border-bottom: none;
    text-align: center;
  }
  .header .top-bar li.nav-item > a {
    padding-left: 2%;
    padding-right: 2%;
    font-size: 0.7rem;
  }
  .showroom-header .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
}

/*---------------------------------------------------------------------------------------------------*/
/*--------------------------------------------Footer-------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
footer .footer_bg {
  /*float: left;*/
  width: 100%;
  margin: 0% 0% 2% 0%;
  font-family: "favoritregular";
  background-color: #111111;
  color: #fff;
  padding-bottom: 1.5%;
}
footer .footer_bg ul {
  list-style: none;
  padding: 0%;
  margin: 0%;
}
footer .footer_bg a {
  color: #93a0a0;
}
footer .footer_bg .social a:hover {
  color: #0d0d0d;
}
footer .footer_bg ul li {
  padding: 1% 0% 1% 0%;
}
.footer_bg .logo {
  position: absolute;
  bottom: 0;
}
.footer_bg {
  position: relative;
}

.footer-icon {
  height: 102px;
  width: 95px;
}

.footer-title {
  font-family: "favoritregular";
  color:#ffffff;
  font-size: 1.5rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  font-weight: normal;
}

.footer-legal {
  width: 680px;
  font-size: 0.75rem;
}


@media screen and (max-width: 767px) {
  /* Mobile Large */
  .mtrigger {
    background: transparent;
    width: 100%;
    border-bottom: 1px solid #222222;
    padding: 1rem 0;
    margin-bottom: 0px !important;
    cursor: pointer;
    font-size: 1.3rem;
  }
  .mtrigger .fa-chevron-up {
    display: none;
  }
  .mtrigger .fa-chevron-down {
    display: inline;
  }
  .mtrigger.active .fa-chevron-up {
    display: inline;
  }
  .mtrigger.active .fa-chevron-down {
    display: none;
  }
  footer .footer_bg.fixed-bottom {
    position: relative;
  }
  .footer_bg .logo {
    position: relative;
    bottom: 0;
  }
}

/*Deals Slider - specials page tiles*/
.dealpagecontainer {
  color: #000000;
  float: left;
  padding: 0;
  width: 100%;
  background: white;
  color: black;
  border: 1px solid #e7e7e7;
  margin-bottom: 2%;
  height: auto !important;
  position: relative;
  border-radius: 0px;
}
.dealpagecontainer .dealpagedetails .h5 {
  font-weight: 400;
  font-style: normal;
}
.dealpagecontainer .mmoverlay {
  background: rgba(0, 0, 0, 0.1);
  padding: 1.5% 5% 1.5% 5%;
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0%;
  text-align: center;
  pointer-events: none;
}

.dealpagecontainer .srprice {
  padding: 1% 2% 1% 2%;
  color: #222222;
}

@media screen and (max-width: 1930px) {
  /* desktop */
  .cardeal-inner .dealpagecontainer .srimage {
    height: auto;
  }
}

/*---------------------------------------------------------------------------------------------------*/
/*--------------------------FAQs tabs and deal page options tabs-------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.dealopt .nav-item .active {
  background-color: #6882e7;
}
.dealopt .nav-tabs .nav-item {
  margin-right: 1%;
}
.dealopt .tab-content {
  height: 500px;
  overflow-y: scroll;
}
.dealopt .nav-tabs {
  border-bottom: none;
}
.dealopt .nav-link {
  border: 1px solid transparent;
}
.faqs .tab-content .card-body > div:last-of-type {
  border-bottom: none !important;
}
.faqs .dealopt .nav-tabs .nav-item.show .nav-link,
.dealopt .nav-tabs .nav-link.active {
  color: #ffffff;
  background: #ff0000;
  border-color: transparent;
  border-radius: 0px;
  position: relative;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #547d6f;
}
.faqs .dealopt .nav-tabs .nav-link > i {
  opacity: 0;
  transition: all 1s;
}
.faqs .dealopt .nav-tabs .nav-link.active > i {
  opacity: 1;
}
@media screen and (max-width: 767px) {
  /* Mobile Large */
  .faqs .tab-content {
    max-height: 600px;
    overflow: scroll;
  }
}

/*---------------------------------------------------------------------------------------------------*/
/*-------------------------------------Filters on all pages------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
#budgetsearch h2,
#budgetsearch .form-group,
#businesslease h2,
#businesslease .form-group,
#advresultdeals h2,
#advresultdeals .form-group {
  /*remove padding and margin across all */
  margin-bottom: 0;
  padding-top: 0 !important;
}
#budgetsearch .row.row-nomargin,
#businesslease .row.row-nomargin,
#advresultdeals .row.row-nomargin {
  /*make everything in the row sit vertically aligned */
  align-items: center;
}
#filter button.btn {
  display: inline-block;
}

/*------------------ Price budget for filter page ------------------*/
.budgetmin {
  border-radius: 5px;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.budgetmax {
  border-radius: 5px;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

/*---------------------------------------------------------------------------------------------------*/
/*--------------------------------------- Finance pages ---------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.card .financeapp {
  border: none !important;
}
.financeapp .card-header {
  background: none;
  border: none;
  padding: unset;
}
.financeapp .card-body {
  background: #7fae9e;
  padding-left: unset;
}
.financeapp .dropdown-item {
  color: #ffffff;
  font-size: small;
  padding-left: 1rem !important;
}
.financeapp .dropdown-item:active {
  font-size: medium !important;
  font-weight: 600 !important;
  background: none !important;
}
.financeapp .dropdown-item:focus,
.financeapp .dropdown-item:hover {
  font-size: medium;
  font-weight: 600;
  background: none;
}
@media screen and (max-width: 767px) {
  /* Mobile Large */
  .finance-application h3 {
    font-size: 18px;
    padding-bottom: 1px !important;
  }
  .finance-application p {
    font-size: 0.8rem !important;
  }
  .finance-application .form-group .control-label {
    display: none;
  }
  #financeform .form-control::placeholder {
    font-size: 13px;
    font-weight: 600;
  }
}
#financeform .notification {
  text-align: center;
  font-weight: 600;
}
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 16px solid #ffffff;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.cloned {
  border-top: 2px solid #6c8c80;
}

/*---------------------------------------------------------------------------------------------------*/
/*--------------------------------------- Dealcard heart - showroom --------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.showroom.heart,
.showroom.heart-hp {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  height: 30px;
  width: 30px;
  content: " ";
  background-image: url(/images/save.svg);

  background-repeat: no-repeat;
  background-size: contain;
}
.showroom.heart.saved,
.showroom.heart-hp.saved {
  background-image: url(/images/saved.svg);
}
button.showroom,
button.showroom:focus {
  -webkit-appearance: none !important;
  background-color: transparent;
  border: none;
  outline: none;
}

/*---------------------------------------------------------------------------------------------------*/
/*------------------- Secondary Ribbon coding for all pages - SDH 16-04-2021 ------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.sec-ribbon {
  position: absolute;
  top: 0px;
  left: 0px;
  height: auto;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.8rem;
  padding: 0.2rem 1rem;
}
.ribbon-darkblue {
  background: #0a2673cc;
}
.ribbon-gold {
  background: #715f07cc;
}
.ribbon-crimson {
  background: #a00303cc;
}
.ribbon-red {
  background: #f90303cc;
}
.ribbon-lightgreen {
  background: #75d289cc;
}
.ribbon-cyan {
  background: #30caeccc;
}
.ribbon-purple {
  background: #8f77d8cc;
}
.ribbon-green {
  background: #12a231cc;
}
.ribbon-blush {
  background: #c1195fcc;
}
.ribbon-aquamarine {
  background: #5a94d0cc;
}
.ribbon-yellow {
  background: #abc70bcc;
}
.ribbon-pink {
  background: #e60db7cc;
}
.ribbon-blue {
  background: #0d64e6cc;
}
.ribbon-orange {
  background: #e6710dcc;
}

/*---------------------------------------------------------------------------------------------------*/
/*------------------------------------- New Filter buttons ------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/*Filter button - button on the left*/
.filterbtn {
  position: fixed;
  bottom: 3%;
  /* right: 50%; */
  /* right: 46.7%; */
  right: 44.5%;
  z-index: 9;
  padding: 10px;
  width: 10%;
}
.sortbtn:focus:after {
  border: transparent;
}
/*Sort button - button on the right*/
.sortbtn {
  position: fixed;
  bottom: 3%;
  left: 50%;
  border-radius: 0 10px 10px 0;
  z-index: 9;
}

/*Filter Drawer*/
.drawer-overlay {
  height: 100%;
  width: 100%;
  background: rgb(64 64 64 / 80%);
  position: absolute;
  top: -100%;
}
.drawer-overlay-right {
  height: 100%;
  width: 100%;
  background: rgba(109, 109, 109, 0.6);
  position: absolute;
  right: -100%;
}
.drawer-left {
  height: 100%;
  width: 25%;
  background-color: #fff;
  border-right: 1px solid #000000;
  position: absolute;
  z-index: 20;
  left: -25%;
  overflow-y: auto;
}
.drawer-right {
  height: 100%;
  width: 25%;
  background-color: #fff;
  border-left: 1px solid #000000;
  position: absolute;
  z-index: 20;
  right: -25%;
  overflow-y: auto;
}

.keyline {
  float: left;
  border-bottom: 1px solid #e0e0e0;
  height: 10px;
  width: 90%;
  margin-left: 5%;
  margin-bottom: 10px;
}

@media screen and (max-width: 830px) {
  .drawer-left,
  .drawer-right {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .drawer-left,
  .drawer-right {
    width: 100%;
  }
}
/*---- Filter radio Buttons ----*/
.radio-container {
  display: block;
  position: relative;
  padding-top: 5px;
  padding-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-left: 30px;
  margin-bottom: 0;
  /* border-bottom: 1px solid #9e9a9a; */
}

/* Hide the browser's default radio button */
.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 7px;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: #fff;
  border: 1px solid #c0bfbf;
  border-radius: 3px;
}

.radio-container:hover input ~ .checkmark {
  background-color: #ccc;
}

.radio-container input:checked ~ .checkmark {
  background-color: #ff0000;
  border: 1px solid #ff0000;
}

.radio-container input:disabled ~ .checkmark {
  background-color: #000000;
  opacity: 10%;
  border: 1px solid #919191;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.radio-container input:checked ~ .checkmark:after {
  display: block;
}

.radio-container .checkmark:after {
  top: -1px;
  left: 3px;
  border-radius: 50%;
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  color: white;
  font-size: 1rem;
}

/*---------------------------------------------------------------------------------------------------*/
/*------------------------------Cookie policy - TR - 21.05.2021 -------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.cookie-fixed {
  bottom: 0;
  position: fixed;
  left: 0;
  border-radius: 4px;
  display: none;
  z-index: 1031;
}
.cookie-fixed.no-cookie-show {
  display: none;
}
.cookie-fixed.cookie-show {
  display: block;
}
.cookie-fixed .fas {
  cursor: pointer;
}
.cookie-fixed h2 {
  font-size: 1.6rem;
}
.cookie-fixed p {
  font-size: 12px;
}
.cookie-fixed .bg-custom {
  background-color: #3d3d3e;
}

/*---------------------------------------------------------------------------------------------------*/
/*------------------------------Know what you want journey -------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.bgbanner.knowledge {
  background-image: url(/images/knowledge.webp);
}
.hover-border {
  border: 2px solid transparent;
  transition: all 1s;
}
.hover-border:hover {
  border: 2px solid #ff0000;
}
.switchprice[data-for="pcp"] {
  border-bottom-right-radius: 0px !important;
  border-top-right-radius: 0px !important;
}
.switchprice[data-for="cash"] {
  border-bottom-left-radius: 0px !important;
  border-top-left-radius: 0px !important;
}
.primary-button.switchprice {
  border: 1px solid #ff0000;
}

@media screen and (max-width: 767px) {
  /* Mobile Large */
  .tabslider {
    padding: 0 10%;
  }
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .bgbanner.knowledge {
      background-image: url(/images/knowledge.png);
    }
  }
}
/*---------------------------------------------------------------------------------------------------*/
/*------------------------------Not Sure journey -------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.bgbanner.perfectsearch {
  background-image: url(/images/perfectsearch-banner.jpg);
}

.bgbanner.terms {
  background-image: url(/images/main_banner.jpg);
}

@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .bgbanner.perfectsearch {
      background-image: url(/images/perfectsearch-banner.jpg);
    }
  }
}

/*-----------------------------------------------------------------------------------------------------*/
/*---------------------------------------- Fuel Icons  -----------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.fuel-icon {
  height: 150px;
  width: 150px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-size: contain;
  background-repeat: no-repeat;
}

.fuel-icon-small {
  height: 35px;
  width: 35px;
  position: relative;
  display: inline-block;
  /* bottom:0;
    left:0; */
  background-size: contain;
  background-repeat: no-repeat;
  /* background-color: red; */
}

.fuel-icon.petrol,
.fuel-icon-small.petrol {
  background-image: url(/images/petrol-icon.svg);
}
.fuel-icon.electric,
.fuel-icon-small.electric {
  background-image: url(/images/fastcharge.png);
}
.fuel-icon.hybrid,
.fuel-icon-small.hybrid {
  background-image: url(/images/recharge.png);
}
.fuel-icon.hybridonly,
.fuel-icon-small.hybridonly {
  background-image: url(/images/hybrid-icon.svg);
  opacity: 0.2;
}

.fuel-icon-small.petrol {
  background-image: url(/images/petrol-icon-small.svg);
}
.fuel-icon-small.electric {
  background-image: url(/images/fastcharge-small.svg);
}
.fuel-icon-small.hybrid {
  background-image: url(/images/recharge-small.svg);
}
.fuel-icon-small.hybridonly {
  background-image: url(/images/hybrid-icon.svg);
  opacity: 1;
}

/* .card.model {
  border: 2px solid;
  border-radius: 0px !important;
} */

.col-xl-3.model:hover {
  background-color: rgba(147, 147, 147, 0.1);
  transition: opacity 2s;
  z-index: 5;
}

/*-----------------------------------------------------------------------------------------------------*/
/*---------------------------------------- Journey Tab -----------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.journeytab {
  background-image: url("../images/journeytabs.svg");
}

.journeytab .secondary-button.disabled {
  background-color: #d3d3d3;
  color: #002c5f;
}

.model-banner {
  background-image: url("/images/main_banner.jpg");
}

/* --------------- Restyle Coding --------------- */

.logo-footer {
  width: 20%;
}

.model-arrow {
  background-image: url("/images/arrow-mid.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 34px;
  height: 34px;
  display: block;
  position: relative;
}
/* 
.model-arrow.electric{
    background-image: url('/images/arrow-fuel.svg');
    filter: invert(55%) sepia(51%) saturate(2500%) hue-rotate(156deg) brightness(87%) contrast(102%);
}
.model-arrow.petrol{
    background-image: url('/images/arrow-fuel.svg');
    filter: invert(67%) sepia(81%) saturate(4072%) hue-rotate(204deg) brightness(91%) contrast(99%);
}
.model-arrow.hybrid{
    background-image: url('/images/arrow-fuel.svg');
    filter: invert(75%) sepia(58%) saturate(335%) hue-rotate(68deg) brightness(92%) contrast(88%);
}
.model-arrow.hybridonly{
    background-image: url('/images/arrow-fuel.svg');
    filter: invert(100%) sepia(66%) saturate(2175%) hue-rotate(9deg) brightness(93%) contrast(73%);
} */

#legal-footer a {
  padding-left: 0px !important;
  margin-bottom: 0.25rem;
}

.model:hover a .font-family-light,
.model:hover .font-family-mono {
  color: #a00022 !important;
}

.model:hover a .model-arrow {
  filter: invert(43%) sepia(92%) saturate(4839%) hue-rotate(338deg) brightness(98%) contrast(114%);
}

/* Overwrite the fuel colours to use a teal colour only */
.hybrid-colour,
.electric-colour,
.petrol-colour,
.hybridonly-colour {
  color: #00819e;
}

.hybrid-bg,
.electric-bg,
.petrol-bg,
.hybridonly-bg {
  background: #00819e;
}

.primary-button.hybrid-button,
.primary-button.electric-button,
.primary-button.petrol-button,
.primary-button.hybridonly-button {
  border-right: 16px solid #00819e;
  box-shadow: inset 0 0 0 0 #00819e;
}

.hybrid-button:hover,
.electric-button:hover,
.petrol-button:hover,
.hybridonly-button:hover {
  background: #00819e;
  box-shadow: inset -400px 0 0 0 #00819e;
}

.hybrid-card,
.electric-card,
.petrol-card,
.hybridonly-card {
  border-color: #00819e !important;
}

.hybrid-border,
.electric-border,
.petrol-border,
.hybridonly-border {
  border: 2px solid #00819e !important;
}

.primary-toggle {
  background: #d3d3d3 !important;
  color: #000 !important;
}
.primary-toggle:hover {
  border-color: #d3d3d3;
}

.secondary-toggle {
  background: #fbfaf8 !important;
  color: #000 !important;
}
.secondary-toggle:hover {
  border-color: #00819e !important;
}

/* Mobile Banner Changes */

@media screen and (max-width: 767px) {
  /* Mobile Large */

.model-banner{background-image: url("/images/main_banner-mobile.jpg");}
.bgbanner.terms {background-image: url(/images/main_banner-mobile.jpg);}
}

.model-cards:hover .show-on-hover {
  display: block;
  background-color: #f6f3f2;
  position: absolute;
  top: 109px;
  left: 0;
  height: 250px;
  display: flex;
  align-items: end;
  z-index: 3;
}

.model-cards:hover .ovehicle,
.model-cards:hover .model-text {
  position: relative;
  z-index: 4;
}

.show-on-hover {
  display: none;
}

.tertiary-button.journey-tab.disabled {
  background-color: transparent;
  color: #111111;
  border:0px;
}

/*One Trust cookie footer message - SDH 28-03-2025 */
.ot-sdk-cookie-policy {width: 98%!important;  padding: 1% 1%!important;}