/* This is a Juris Access/Advent customisation for BMW VFI */

.loading {
  display: none !important;
}

[mode="mini"] {
  display: none !important;
}

/* ============================================================================================== */
/* Base typography                                                                                */
/* ============================================================================================== */

/* Loadouts ------------------------------------------------------------------------------------- */
/* 
@font-face {
  font-family: bmw;
  font-weight: 100;
  src: url("../fonts/BMWTypeNext/BMWTypeNext-Thin.eot");
  src: url("../fonts/BMWTypeNext/BMWTypeNext-Thin.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/BMWTypeNext/BMWTypeNext-Thin.woff2") format("woff2"),
    url("../fonts/BMWTypeNext/BMWTypeNext-Thin.eot") format("eot"),
    url("../fonts/BMWTypeNext/BMWTypeNext-Thin.woff") format("woff"),
    url("../fonts/BMWTypeNext/BMWTypeNext-Thin.ttf") format("truetype");
}

@font-face {
  font-family: bmw;
  font-weight: 300;
  src: url("../fonts/BMWTypeNext/BMWTypeNext-Light.eot");
  src: url("../fonts/BMWTypeNext/BMWTypeNext-Light.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/BMWTypeNext/BMWTypeNext-Light.woff2") format("woff2"),
    url("../fonts/BMWTypeNext/BMWTypeNext-Light.eot") format("eot"),
    url("../fonts/BMWTypeNext/BMWTypeNext-Light.woff") format("woff"),
    url("../fonts/BMWTypeNext/BMWTypeNext-Light.ttf") format("truetype");
}

@font-face {
  font-family: bmw;
  font-weight: 400;
  src: url("../fonts/BMWTypeNext/BMWTypeNext-Regular.eot");
  src: url("../fonts/BMWTypeNext/BMWTypeNext-Regular.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/BMWTypeNext/BMWTypeNext-Regular.woff2") format("woff2"),
    url("../fonts/BMWTypeNext/BMWTypeNext-Regular.eot") format("eot"),
    url("../fonts/BMWTypeNext/BMWTypeNext-Regular.woff") format("woff"),
    url("../fonts/BMWTypeNext/BMWTypeNext-Regular.ttf") format("truetype");
} */

/* @font-face {
  font-family: bmw;
  font-weight: 700;
  src: url("../fonts/BMWTypeNext/BMWTypeNext-Bold.eot");
  src: url("../fonts/BMWTypeNext/BMWTypeNext-Bold.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/BMWTypeNext/BMWTypeNext-Bold.woff2") format("woff2"),
    url("../fonts/BMWTypeNext/BMWTypeNext-Bold.eot") format("eot"),
    url("../fonts/BMWTypeNext/BMWTypeNext-Bold.woff") format("woff"),
    url("../fonts/BMWTypeNext/BMWTypeNext-Bold.ttf") format("truetype");
} */

@font-face {
  font-family: bmw;
  src: url("../fonts/BMWGroupTN/BMWGroupTN-Regular.otf");
}

html {
  font-size: 15px; /* For relative-em */
}

body {
  font-family: bmw;
  font-size: 15px;
  font-weight: 300;
  color: #262626;
}

/* Headings ------------------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5 {
  margin-top: 0;
  font-weight: 300;
  /*text-transform: uppercase;*/
}

h1 {
  font-size: 60px;
  line-height: 60px;
}
h2 {
  font-size: 50px;
  line-height: 57px;
}
h3 {
  font-size: 35px;
  line-height: 42px;
}
h4 {
  font-size: 25px;
  line-height: 32px;
}
h5 {
  font-size: 20px;
  line-height: 27px;
  text-transform: initial;
}
small {
  font-size: 15px;
  line-height: 22px;
}

h2.view__title,
h3.view__title {
  font-size: 25px;
  line-height: 32px;
  text-transform: initial;
}

.module--before h2.view__title,
.module--after h2.view__title {
  font-size: 50px;
  line-height: 57px;
  text-transform: uppercase;
}

table#custom-applet__table tbody .custom-applet__section.view__title {
  font-weight: 300;
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 50px;
    line-height: 50px;
  }
  h2 {
    font-size: 25px;
    line-height: 32px;
  }
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 35px;
    line-height: 35px;
  }
  h3 {
    font-size: 25px;
    line-height: 32px;
  }
}

/* Buttons -------------------------------------------------------------------------------------- */

a {
  color: #0653b6 !important;
}

a:hover {
  color: #1c69d4 !important;
}

a:focus {
  text-decoration: none !important;
}

.menu a,
a.menu {
  color: #262626 !important;
}

a.button,
.button {
  display: inline-block;
  min-width: 200px;
  padding: 17px 50px;
  background: #4d4d4d !important;
  color: #ffffff !important;
  border-radius: 0;
  font-family: bmw;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 16px;
  box-shadow: none;
  cursor: pointer;
}

a.button:hover,
.button:hover {
  background: #262626 !important;
  opacity: 1;
}

a.button.button--primary,
.button.button--primary {
  background: #0653b6 !important;
}

a.button.button--primary:hover,
.button.button--primary:hover {
  background: #1c69d4 !important;
}

a.button.button--primary:after,
.button.button--primary:after {
  display: none;
}

a.button.button--back,
.button.button--back {
}

a.button.button--back:before,
.button.button--back:before {
  display: none;
}

a.button.disabled,
.button.disabled {
  background: #4d4d4d !important;
  opacity: 0.5;
  cursor: no-drop;
  filter: grayscale(1);
  pointer-events: none;
}

a.button.disabled:hover,
.button.disabled:hover {
  background: #4d4d4d !important;
}

a.button:last-child,
.button:last-child {
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  .view__actions a.button.button--next,
  .view__actions .button.button--next {
    display: block;
    width: 100%;
  }
}

/* ============================================================================================== */
/* Layouts                                                                                        */
/* ============================================================================================== */

body {
  background-color: #ffffff;
}

/* Reusables ------------------------------------------------------------------------------------ */

.link {
  font-weight: 700;
}

.hyperlink {
  font-weight: 700;
  text-decoration: underline;
  text-align: right;
}

.link:before {
  content: "";
  display: inline-block;
  position: relative;
  top: 2px;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background: no-repeat center;
  background-size: contain;
  /*transition: 0.5s ease-out;*/
}

.link:hover:before {
  left: 3px;
}

.link.no-icon-animation:hover:before {
  left: 0;
}

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

#header {
  height: 100px;
  padding: 0;
  border-bottom: 1px solid #e6e6e6;
}
#header.header--with-bg {
  background: none;
  border: 0;
}

#header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: right;
}

#header .container:before,
#header .container:after {
  display: none;
}

.navigation {
  /*width: calc(100% - 66px);*/
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

.navigation a {
  display: inline-block;
  position: relative;
  height: 100px;
  /*margin-right: 10px;*/
  padding: 20px;
  line-height: 60px;
}
.navigation a:hover {
  color: #ffffff !important;
}

#header .name {
  padding: 0 10px;
}

#header .tools {
  margin-left: auto;
}

#header .tools a .name{
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 40px;
  height: 100px;
  margin: 0 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
}

/* .brand-switch.brand-switch--bmw.active,
.brand-switch.brand-switch--mini {
  display: none !important;
} */

.navigation a:after,
#header .tools a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 5px;
  background-color: #0653b6;
  opacity: 0;
}

.navigation a:hover:after,
#header .tools a:hover:after,
#header .tools a.active:after {
  opacity: 1;
}

.hamburger {
  display: none;
  width: 50px;
  height: 50px;
  transform: translateX(-13px);
}

.hamburger__icon {
  display: block;
  width: 24px;
  height: 24px;
  margin: 13px;
  background: url(../img/icon-bmw-menu.white.svg) no-repeat center;
  background-size: contain;
}

.hamburger:hover .hamburger__icon {
  background-image: url(../img/icon-bmw-menu.blueh.svg);
}

#header.active .hamburger__icon {
  background-image: url(../img/icon-bmw-close.svg);
}

#header.active .hamburger__icon:hover {
  background-image: url(../img/icon-bmw-close.blueh.svg);
}

.header__logo-link {
  left: 0;
  /* width: 56px; */
  height: 56px;
  margin: 22px 0 22px 22px;
  padding: 0;
  border-radius: 0;
}

.header__logo-link:hover {
  background-color: initial;
}

.header__logo-image {
  background-image: url(../img/bmw-white.png);
}

.header__logo-locator {
  display: inline-block;
  width: 45px;
  height: 45px;
  margin-left: auto;
  background: no-repeat center;
  background-size: contain;
}

@media screen and (max-width: 767px) {
  #header {
    height: 60px;
  }

  #header.no-menu-items .container {
    justify-content: flex-end;
  }

  #header .navigation,
  #header .tools {
    display: none;
  }
  #header.no-menu-items .tools {
    display: initial;
  }

  #header.no-menu-items .tools a {
    height: 60px;
  }

  .navigation a:after,
  #header .tools a:after {
    display: none;
  }

  .hamburger {
    display: block;
  }
  #header.no-menu-items .hamburger {
    display: none;
  }

  .header__logo-link {
    /* width: 36px; */
    height: 45px;
    margin: 12px 0 12px 12px;
  }

  #header.active {
    background-color: #ffffff;
  }

  #header.active .hamburger {
    position: fixed;
    top: 5px;
    left: 40px;
  }

  #header.active .navigation {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    height: calc(100% - 60px);
    overflow: auto;
    margin-top: 60px;
    padding: 0 20px;
    background: #ffffff;
    border-top: 1px solid #e6e6e6;
  }

  #header.active .navigation__listing a {
    display: block;
    height: auto;
    border-bottom: 1px solid #e6e6e6;
    color: #262626 !important;
    line-height: 1;
  }

  #header.active .navigation a {
    color: #262626 !important;
  }
  #header.active .navigation a:hover {
    color: #1c69d4 !important;
  }

  #header.active .tools {
    display: block;
    position: fixed;
    top: 10px;
    right: 20px;
    width: 40px;
    height: 40px;
  }

  #header.active .tools a {
    width: 100%;
    height: 100%;
    margin: 0;
    filter: invert(1);
    opacity: 0.3;
  }

  #header.active .header__logo-link {
    display: none;
  }
}

/* Steppers ------------------------------------------------------------------------------------- */

#stepper {
  position: absolute;
  width: 100%;
  width: calc(100% - 30px);
  margin: 0;
  margin: 0 calc(15px);
  top: -100px;
}

#stepper .progress-crumb {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  margin: 0;
  padding: 25px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

#stepper .progress-crumb-list {
  flex-grow: unset;
}

#stepper .progress-crumb-list:after {
  display: none !important;
}

#stepper .progress-crumb-label {
  position: relative;
  top: 0;
  left: 0;
  overflow: visible;
  color: #ffffff !important;
  font-weight: 900;
  opacity: 0.5;
}

#stepper .progress-crumb-list.progress-crumb-selected .progress-crumb-label {
  opacity: 1;
}
#stepper
  .progress-crumb-list.progress-crumb-selected
  .progress-crumb-label:after {
  content: "";
  position: absolute;
  bottom: -26px;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #0653b6;
}

#stepper .progress-crumb-label .current-step {
  display: none;
  margin-right: 5px;
  opacity: 0.7;
}

#stepper .progress-crumb-separator {
  align-self: flex-start;
  width: 20px;
  height: 20px;
  background: url(../img/icon-bmw-next.white.svg) no-repeat center;
  background-size: contain;
  opacity: 0.5;
  /*transform: translateY(7px);*/
}
#stepper
  .progress-crumb-list.progress-crumb-selected
  + .progress-crumb-separator {
  opacity: 1;
  background-image: url(../img/icon-bmw-next.blue.svg);
}

.main-stepper__label {
  display: none;
}

@media screen and (max-width: 767px) {
  #stepper {
    top: -120px;
  }

  #stepper .progress-crumb {
    position: relative;
    margin-top: 0;
    padding: 0;
    padding: calc(15px) 0;
  }

  #stepper .progress-crumb-list {
    width: 20px;
  }

  #stepper .progress-crumb-list:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: #0653b6;
  }

  #stepper
    .progress-crumb-list.progress-crumb-selected
    ~ .progress-crumb-list:before {
    background-color: #e6e6e6;
  }

  #stepper .progress-crumb-label {
    display: none;
    width: 120px;
    padding: 10px 0;
    text-align: center;
    white-space: nowrap;
    transform: translate(-50px, 5px);
  }

  #stepper .progress-crumb-selected .progress-crumb-label {
    display: block;
  }

  #stepper .progress-crumb-list:first-child .progress-crumb-label {
    text-align: left;
    transform: translateY(5px);
  }

  #stepper .progress-crumb-list:last-child .progress-crumb-label {
    text-align: right;
    transform: translate(-100px, 5px);
  }

  #stepper
    .progress-crumb-list.progress-crumb-selected
    .progress-crumb-label:after {
    bottom: -11px;
  }

  #stepper .progress-crumb-separator {
    width: 100%;
    height: 6px;
    margin: 7px 0;
    background: #0653b6 !important;
    opacity: 1;
  }

  #stepper
    .progress-crumb-list.progress-crumb-selected
    ~ .progress-crumb-separator {
    background: #e6e6e6 !important;
  }
}

@media screen and (max-width: 767px) and (max-height: 550px) {
  #stepper .progress-crumb-list:before,
  #stepper .progress-crumb-separator,
  #stepper
    .progress-crumb-list.progress-crumb-selected
    .progress-crumb-label:after {
    display: none;
  }

  #stepper .progress-crumb-selected .progress-crumb-label {
    position: absolute;
    width: 100%;
    padding: 5px 0;
    font-size: 0.8em;
    text-align: left !important;
    transform: translateY(2px) !important;
  }

  #stepper .progress-crumb-label .current-step {
    display: inline-block;
  }
}

/* Panels --------------------------------------------------------------------------------------- */

#view {
  position: fixed;
  padding-top: 100px;
  /*padding-bottom: 60px;*/
  top: 100px;
  width: 100%;
  height: calc(100vh - 100px);
  overflow: auto;
  outline: none;
}
#header.header--with-bg ~ #view {
  top: 120px;
  height: calc(100vh - 120px);
}
#view.no-progress-bar {
  padding-top: 45px;
}

#view .container {
  position: relative;
}

.hpanel {
  font-family: bmw !important;
}

/* TODO: Style, rather than hide, the scrollbars */

#view::-webkit-scrollbar {
  display: none;
}
#view {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@media screen and (max-width: 767px) {
  #view {
    height: calc(100vh - 60px);
    top: 60px;
    padding-top: 120px;
  }
}

/* ---Scrollbar styling---- */
.dropdown-content::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 12px;
  background-color: rgba(255, 255, 255, 0.9);
  background-color: #ddd;
  border-radius: 9px;
}

.dropdown-content::-webkit-scrollbar-corner {
  background-color: #e6e6e6;
}

.dropdown-content::-webkit-scrollbar-thumb {
  border-radius: 9px;
  border: 4px solid rgba(255, 255, 255, 0);
  background-clip: content-box;
  /* background-color: #ffffff; */
  background-color: rgba(255, 255, 255, 0.7);
}

/* Footer --------------------------------------------------------------------------------------- */

#bmw-footer {
  position: relative;
  min-height: 60px;
  margin-top: 45px;
  background-color: #e6e6e6;
  color: #262626;
}

.footer__social .container {
  padding: 45px 0;
  border-top: 1px solid #bbbbbb;
}

.footer__social-inner {
  display: inline-block;
  text-align: left;
}

.footer__social-inner h5 {
  margin: 0 35px 5px 0;
  font-size: 1.2rem;
}

.footer__social a {
  display: inline-block;
  width: 45px;
  height: 45px;
  margin-left: 20px;
  background: no-repeat center;
  background-size: contain;
  opacity: 0.8;
}

.footer__social-inner a:first-of-type {
  margin: 0;
}

.footer__social .social--facebook {
  background-image: url(../img/bmw-social--facebook.png);
}
.footer__social .social--instagram {
  background-image: url(../img/bmw-social--instagram.png);
}
.footer__social .social--linkedin {
  background-image: url(../img/bmw-social--linkedin.png);
}
.footer__social .social--youtube {
  background-image: url(../img/bmw-social--youtube.png);
}
.footer__social a:hover {
  opacity: 1;
}

.footer__extended {
  padding: 45px 0 0 0;
}

.footer__extended .container {
  display: flex;
  flex-flow: wrap;
}

.footer__extended a {
  display: block;
  color: #8e8e8e !important;
  font-weight: 700;
}

.footer__extended a:hover {
  color: #262626 !important;
}

#bmw-footer.condensed .footer__social,
#bmw-footer.condensed .footer__extended {
  display: none;
}

.footer__condensed {
  padding: 45px 0 0 0;
  background-color: #ffffff;
}

.footer__condensed .container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
.footer__condensed .container:before,
.footer__condensed .container:after {
  display: none;
}

.footer__condensed .footer__condensed-copyright {
  flex: 50%;
  font-size: 0.9rem;
  font-size: 0.9em;
  opacity: 1;
}

.footer__condensed-links {
  flex: 50%;
  font-size: 0.9rem;
  font-size: 0.9em;
  font-weight: 700;
  text-align: right;
}

.footer__condensed-links a {
  display: inline-block;
  padding-left: 10px;
}

.footer__category {
  flex: calc(100% / 3);
  margin-bottom: 45px;
}

@media screen and (max-width: 767px) {
  .footer__social .container,
  .footer__social-inner {
    text-align: center;
  }

  .footer__social a {
    margin: 0 10px;
  }

  .footer__category {
    flex: 50%;
  }

  .footer__condensed .container {
    flex-flow: wrap;
  }

  .footer__condensed .footer__condensed-copyright {
    flex: 100%;
    order: 2;
    padding: 10px;
    text-align: center;
  }

  .footer__condensed-links {
    flex: 100%;
    order: 1;
    text-align: center;
  }
}

@media screen and (max-width: 599px) {
  .footer__category {
    flex: 100%;
  }
}

/* ============================================================================================== */
/* Vendors resets                                                                                 */
/* ============================================================================================== */

/* Materialize CSS ------------------------------------------------------------------------------ */

.input-container.row {
  margin-bottom: 45px;
}
.input-container.row:last-child {
  margin-bottom: 0;
}

.input-field,
.range-field {
  margin: 0 0 45px;
}

.input-field:last-child,
.range-field:last-child {
  margin-bottom: 0;
}

.input-field label,
.range-field label {
  font-family: bmw;
  font-size: 12px;
  font-weight: 300;
}

.input-field > .input-element-wrapper,
.range-field > .input-element-wrapper,
.input-field > input[type="text"],
.input-field > .select-wrapper {
  width: 50%;
}

@media screen and (max-width: 767px) {
  .input-field > .input-element-wrapper,
  .range-field > .input-element-wrapper,
  .input-field > input[type="text"],
  .input-field > .select-wrapper {
    width: 100%;
  }
}

.input-field label > a {
  pointer-events: all;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Text Search ---------------------------------------------------------------------------------- */

.input-field .textSearch-dropdown {
  width: 100% !important;
  transform: translateY(-1px);
}

.input-field .textSearch-dropdown .textSearch-results__options {
  padding: 12px 20px;
  font-size: 14px;
  color: #8e8e8e !important;
  font-weight: 700;
}
.input-field .textSearch-dropdown .textSearch-results__option--highlighted {
  background: initial;
  color: #262626 !important;
}

/* PHPLens -------------------------------------------------------------------------------------- */

.adv-mustfil,
.lens-note {
  /*margin: -10px 0 10px;*/
  margin: 10px 0;
  font-size: 13px;
  color: #ffffff;
  /* opacity: 0.75; */
}

.lens-note--advanced {
  display: block;
}

.lens-note--link {
  display: block;
}

.view__desc .lens-note--advanced {
  font-size: 15px;
  transform: translateY(5px);
}

.lens-note--advanced:before {
  background-image: url(../img/icon-bmw-info.blue.svg);
}

.lens-note--advanced:hover:before {
  background-image: url(../img/icon-bmw-info.blueh.svg);
}

#japp-footertime {
  position: fixed;
  bottom: 8px;
  right: 8px;
  margin: 0;
  color: #262626;
  opacity: 0.25;
}

/*e-button setting*/
#phplens_listtables td,
div#phplens_listtables th {
  color: black;
}

/* Storyboard ----------------------------------------------------------------------------------- */

.app-panel-component {
  width: 100%;
}

/* ============================================================================================== */
/* Forms                                                                                          */
/* ============================================================================================== */

.view__top-controls {
  margin-bottom: 15px;
}

.back-button:before {
  background-image: url(../img/icon-bmw-previous.blue.svg);
}

.back-button:hover:before {
  background-image: url(../img/icon-bmw-previous.blueh.svg);
}

.view__desc {
  margin-top: -20px;
  font-size: 20px;
  opacity: 1;
}

.view__actions {
  /*margin: 30px 0 60px;*/
  margin: 30px 0 0;
}

.footer__copyright {
  font-size: 0.8rem;
  opacity: 0.5;
}

@media screen and (max-width: 991px) {
  .view__actions {
    margin: 30px 0;
  }
}

@media screen and (max-width: 767px) {
  .view__actions {
    width: 100%;
    margin: 30px 0 45px;
  }
}

@media screen and (max-width: 767px) and (max-height: 550px) {
  #view {
    padding-top: 60px;
  }

  #stepper {
    top: -60px;
  }
}

/* Popovers ------------------------------------------------------------------------------------- */

#popover__wrapper {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#popover__wrapper.active {
  display: flex;
}

#popover {
  display: none;
  position: relative;
  padding: 30px;
  background-color: #ffffff;
  color: #262626;
}

.popover__close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 16px;
  height: 16px;
  background: url(../img/icon-bmw-close.svg) no-repeat center;
  background-size: contain;
  cursor: pointer;
}

.popover__close:hover {
  background-image: url(../img/icon-bmw-close.blueh.svg);
}

.popover__header {
  width: calc(100% - 30px);
  margin-bottom: 10px;
  font-weight: 700;
}

.popover__secondary-header{
  font-weight: 700;
  margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
  /* #popover__wrapper {
        align-items: flex-end;
        }*/

  #popover {
    width: 100%;
    min-height: 30%;
  }
}

/* General structure ---------------------------------------------------------------------------- */

td {
  padding: 0px !important;
}

.input-field label {
  color: inherit !important;
  position: relative !important;
}

.input-field label:not(.label-icon).active {
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-transform-origin: none !important;
  transform-origin: unset !important;
}

.input-field label,
.range-field label {
  margin-bottom: 10px;
  font-size: 22px;
  line-height: 32px;
}

.input-field input[type][readonly],
.input-field input[type][disabled] {
  /*opacity: 0.3;*/
  background-color: #8e8e8e !important;
}

.field-marker {
  font-size: inherit;
  line-height: 17px;
  color: #0653b6;
  color: #4f7ece;
  color: #ff5252;
}

.field-marker.field-marker--error {
  background: transparent !important;
  background: #ffffff00 !important;
  background: rgba(255, 255, 255, 0) !important;
  text-align: left !important;
  font-size: 15px !important;
  margin: 0px 0px 10px 0px !important;
  color: #ff5252 !important;
  text-align: left !important;
  font-weight: 600;
  line-height: unset;
  font-family: bmw;
}

.input-field .input-field__reset {
  top: 15px;
  background: url(../img/icon-bmw-close.svg) no-repeat center;
  background-size: 75%;
  color: #bbbbbb;
  filter: brightness(0.8);
}

.input-field input:focus ~ .input-field__reset {
  top: 15px;
}

.input-field .input-field__reset:hover {
  background-color: transparent;
  background-image: url(../img/icon-bmw-close.danger.svg);
}

.input-field .input-field__reset .icon {
  display: none;
}

p.creditguide-title {
  font-size: 25px;
}

p.creditguide-desc {
  font-size: 22px;
}

/* Text fields and passwords -------------------------------------------------------------------- */

.input-field input[type="text"],
.input-field input[type="password"],
.input-field textarea {
  font-family: "bmw";
  padding: 14px 38px 14px 14px !important;
  background-color: #ffffff !important;
  /*border: 1px solid #bbbbbb;*/
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 16px;
  font-weight: 700;
  text-align: left !important;
  line-height: 16px;
  transition: outline 0s !important;
}

.input-field input[type="text"]:not([readonly]):focus,
.input-field input[type="password"]:not([readonly]):focus,
.input-field textarea:not([readonly]):focus {
  top: 0;
  border: 1px solid #0653b6 !important;
  outline: 1px solid #0653b6 !important;
  box-shadow: none !important;
}

.input-field input[type="text"]::placeholder,
.input-field input[type="password"]::placeholder,
.input-field textarea::placeholder {
  color: #262626;
  opacity: 0.5;
}

/* Text fields with affixes --------------------------------------------------------------------- */

.input-field.prefix .input-element-wrapper:before,
.input-field.suffix .input-element-wrapper:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 14px;
  z-index: 1;
  font-size: 16px;
  color: initial;
  font-weight: 700;
}
.input-field.suffix .input-element-wrapper:after {
  left: auto;
  right: 14px;
}

/*.textField:before {
        color: rgb(0, 0, 0);
        content: '$';
        font-size: 1rem;
        position: absolute;
        bottom: 0.9rem;
        left: 15px;
    }*/

.addFieldNumber:before {
  color: red;
  content: "$";
  font-size: 1rem;
  position: inherit;
}

.addFieldNumber:before {
  color: initial;
  content: "$";
  font-size: 1rem;
  position: absolute;
  line-height: 47px;
  font-weight: bold;
  left: 15px;
}

input[type="text"].inputSize {
  padding-left: 15px !important;
}

.input-field.prefix--dollar .input-element-wrapper:before {
  content: "$";
}
.input-field.suffix--percentage .input-element-wrapper:after {
  content: "%";
}

.input-field.prefix input[type="text"],
.input-field.prefix input[type="password"] {
  padding-left: 30px !important;
}
.input-field.suffix input[type="text"],
.input-field.suffix input[type="password"] {
  padding-right: 30px !important;
}

/* Income Screen Customisation*/

label[for*="INCOME"] + .input-element-wrapper:before,
label[for*="INCOME"] ~ .input-element-wrapper:before {
  top: 15px !important;
}

/* Radio buttons and checkboxes ----------------------------------------------------------------- */

.input-field .radiolist-tab,
.input-field .checkboxlist-tab {
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

.input-field .radiolist-td,
.input-field .checkboxlist-td {
  display: inline-block;
  width: 40%;
  /* display: block; */
  vertical-align: top;
  padding-right: 20px;
  padding-bottom: 20px;
}

.input-field input[type="radio"] + label,
.input-field input[type="checkbox"] + label {
  display: inline-block;
  padding: 15px;
  /* padding-left: 39px; */
  /* padding: 15px 25px; */
  font-size: 15px;
  color: #8e8e8e;
  font-weight: 500;
  line-height: 16px;
}

.input-field input[type="radio"] + label:hover,
.input-field input[type="checkbox"] + label:hover,
.input-field input[type="radio"]:checked + label,
.input-field input[type="checkbox"]:checked + label {
  color: #262626;
}

.input-field [type="radio"] + label:before,
.input-field [type="radio"] + label:after,
.input-field [type="checkbox"] + label:before,
.input-field [type="checkbox"] + label:after {
  width: 24px;
  height: 24px;
}

.input-field [type="radio"]:not(:checked) + label:before,
.input-field [type="radio"]:not(:checked) + label:after {
  border: 2px solid #bbbbbb;
  display: none;
}

.input-field [type="radio"]:not(:checked) + label:hover:before,
.input-field [type="radio"]:not(:checked) + label:hover:after {
  border: 5px solid #1c69d4;
}

.input-field [type="radio"]:checked + label:before,
.input-field [type="radio"]:checked + label:after {
  background: none;
  border: 9px solid #1c69d4;
  display: none;
}

.input-field [type="checkbox"] + label:before,
.input-field [type="checkbox"]:not(.filled-in) + label:after {
  background: none;
  border: 2px solid #bbbbbb;
  border-radius: 0;
}

.input-field [type="checkbox"]:not(:checked) + label:hover:before,
.input-field [type="checkbox"]:not(:checked) + label:hover:after {
  background: none;
  border: 2px solid #1c69d4;
}

.input-field [type="checkbox"]:checked + label:before,
.input-field [type="checkbox"]:checked + label:after {
  background: #1c69d4 url(../img/icon-bmw-checkmark.white.svg) no-repeat center;
  background-size: 50%;
  border: 0;
}

[type="checkbox"]:checked + span:not(.lever):before {
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

@media screen and (max-width: 600px) {
  .input-field .radiolist-td,
  .input-field .checkboxlist-td {
    width: 100%;
  }
}

/* Radio buttons and checkboxes (Extra large touch areas) --------------------------------------- */

.input-field.blocky .radiolist-tab,
.input-field.blocky .checkboxlist-tab {
  margin: -5px -10px;
}

.input-field.blocky .radiolist-tr,
.input-field.blocky .checkboxlist-tr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.input-field.blocky .radiolist-td,
.input-field.blocky .checkboxlist-td {
  width: 50%;
  margin: 0;
  padding: 10px;
}

.input-field.blocky input[type="radio"] + label,
.input-field.blocky input[type="checkbox"] + label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 17px 20px;
  background: #e6e6e6;
  font-size: 14px;
  color: initial;
  font-weight: 700;
  text-align: center;
  line-height: 16px;
  word-break: break-word;
}

.input-field.blocky input[type="radio"] + label:hover,
.input-field.blocky input[type="checkbox"] + label:hover {
  color: #0653b6;
}

.input-field.blocky input[type="checkbox"] + label {
  justify-content: flex-start;
  padding-right: 45px;
}

.input-field.blocky [type="radio"][disabled]:not(:checked) + label,
.input-field.blocky [type="radio"][disabled]:not(:checked) + label,
.input-field.blocky [type="checkbox"][disabled]:not(:checked) + label,
.input-field.blocky [type="checkbox"][disabled]:not(:checked) + label {
  opacity: 0.3;
}

.input-field.blocky input[type="radio"]:checked + label,
.input-field.blocky input[type="checkbox"]:checked + label {
  background-color: #0653b6;
  color: #ffffff;
}

.input-field.blocky input[type="radio"]:checked + label:hover,
.input-field.blocky input[type="checkbox"]:checked + label:hover {
  background-color: #1c69d4;
}

.input-field.blocky input[type="radio"] + label:before,
.input-field.blocky input[type="radio"] + label:after {
  display: none;
}

.input-field.blocky input[type="checkbox"] + label:before,
.input-field.blocky input[type="checkbox"] + label:after {
  left: auto;
  right: 17px;
  margin: 13px 0;
  background: url(../img/icon-bmw-checkmark.svg) no-repeat center;
  background-size: contain;
  border: 0;
}

.input-field.blocky [type="checkbox"]:not(:checked) + label:hover:before,
.input-field.blocky [type="checkbox"]:not(:checked) + label:hover:after {
  background-color: transparent;
  background-image: url(../img/icon-bmw-checkmark.nba.svg);
  border: 0;
}

.input-field.blocky
  [type="checkbox"][disabled]:not(:checked)
  + label:hover:before,
.input-field.blocky
  [type="checkbox"][disabled]:not(:checked)
  + label:hover:after {
  background-image: url(../img/icon-bmw-checkmark.svg);
}

.input-field.blocky [type="checkbox"]:checked + label:before,
.input-field.blocky [type="checkbox"]:checked + label:after {
  left: auto;
  right: 17px;
  background: url(../img/icon-bmw-checkmark.white.svg) no-repeat center;
  background-size: contain;
}

@media screen and (max-width: 399px) {
  .input-field.blocky .radiolist-td,
  .input-field.blocky .checkboxlist-td {
    width: 100%;
    padding: 5px 10px;
  }
}

/* Dropdowns ------------------------------------------------------------------------------------ */

.input-field .select-wrapper input[type="text"].select-dropdown {
  background-color: #ffffff !important;
  opacity: 1;
}

.input-field .select-wrapper .caret {
  right: 12px;
  background: url(../img/icon-bmw-angle-down.svg) no-repeat center;
  background-size: contain;
  color: transparent;
  filter: brightness(0.8);
}

.input-field .select-wrapper:hover .caret {
  background-image: url(../img/icon-bmw-angle-down.nba.svg);
  color: transparent;
}

.input-field .dropdown-content {
  z-index: 9;
  border: 1px solid #bbbbbb;
  border-radius: 0;
}

.input-field .dropdown-content li {
  min-height: 40px;
  border-bottom: 0;
}

.input-field .dropdown-content li:hover {
  background-color: initial;
}

.input-field .dropdown-content li * {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #8e8e8e;
}

.input-field .dropdown-content li:hover > * {
  color: #262626;
}

/* Range sliders -------------------------------------------------------------------------------- */

.range-field .slider-value {
  margin-left: 10px;
  padding: 5px 20px;
  background-color: #e6e6e6;
  border-radius: 0;
}

.range-field input[type="range"]::-webkit-slider-runnable-track {
  background-color: #e6e6e6;
}

.range-field input[type="range"]::-webkit-slider-thumb {
  background-color: #0653b6;
}

.range-field input[type="range"] + .thumb {
  font-family: bmw;
  border-radius: 0 !important;
  box-shadow: none;
}

/* ============================================================================================== */
/* Splash screens                                                                                 */
/* ============================================================================================== */

.splash__image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0 !important;
  filter: brightness(0.3);
  transition: filter 1s ease-out;
}
.splash__image.minified {
  height: 120px;
}
.splash__image.lightened {
  filter: brightness(0.7);
  transition: filter 1s ease-out;
}

.splash__image.rotated-out {
  opacity: 0 !important;
}
.splash__image.rotated-in {
  opacity: 1 !important;
}

.splash__image-code {
  display: none;
}

.to-reveal {
  display: none;
}

.splash__content--flex .view__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  min-height: calc(100% - 45px);
}

.splash__content .module {
}

.button--intro.processing {
  opacity: 0;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .splash__image {
    background-position: center right;
  }
}

/* Listings with icons -------------------------------------------------------------------------- */

.listing__item {
  position: relative;
  margin-bottom: 20px;
  padding-left: 50px;
  /* cursor: default; */
}
.listing__item:last-child {
  margin-bottom: 0;
}

.listing__title {
  margin-bottom: 3px;
  line-height: 30px;
}
.listing__item:hover .listing__title {
  /* opacity: 0.7; */
}

.listing__details {
  display: none;
}

.listing__icon {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.3;
}
.listing__icon.icon--profile {
  background-image: url(../img/icon-bmw-profile.white.svg);
}
.listing__icon.icon--document {
  background-image: url(../img/icon-bmw-document.white.svg);
}
.listing__icon.icon--calculator {
  background-image: url(../img/icon-bmw-calculator.white.svg);
}
.listing__icon.icon--upload {
  background-image: url(../img/icon-bmw-upload.white.svg);
}
.listing__icon.icon--attachment {
  background-image: url(../img/icon-bmw-attachment.white.svg);
}
.listing__icon.icon--explore {
  background-image: url(../img/icon-bmw-explore.white.svg);
}

.listing__details_icon {
  background-image: url(../img/BMW_time.png);
  display: none;
  position: absolute;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.details_infor {
  padding-left: 25px;
}

/* Agreement screens ---------------------------------------------------------------------------- */

.agreement-tickbox {
  margin: 45px 0 0;
}

.agreement-tickbox .checkboxlist-td {
  width: 100%;
}

/* Privacy policy/Intro summary ----------------------------------------------------------------- */

.para_prequal {
  display: none;
}

.privacy-policy {
  margin-bottom: 60px !important;
}

.privacy-policy > .input-field {
  display: flex;
  flex-flow: row-reverse;
  justify-content: flex-end;
  align-items: center;
}

.privacy-policy .input-label {
  margin: 0 0 0 30px;
  font-size: inherit;
  line-height: inherit;
}

.privacy-policy .checkboxlist-td {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
}   

.privacy-policy .checkboxlist-tab label {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  overflow: hidden;
  border: 2px solid #262626;
  color: transparent !important;
  user-select: none;
  cursor: pointer;
}

.privacy-policy .checkboxlist-tab input:checked + label::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0 !important;
  background: url(../img/icon-tick.svg) !important;
  background-size: contain !important;
  filter: invert(1);
}

.privacy-policy .adv-mustfil:not(.is-cleared) {
  display: none;
}
.privacy-policy .adv-mustfil.is-cleared {
  display: block;
  margin-top: -20px;
  padding: 0;
}

/* Prequalifying screen variation */

.privacy-policy--prequalifying > .input-field {
  justify-content: flex-end;
}

.privacy-policy--prequalifying .checkboxlist-tab label {
  border-color: #ffffff;
}

.privacy-policy--prequalifying .checkboxlist-tab input:checked + label::after {
  filter: none;
}

/* ============================================================================================== */
/* Dark mode                                                                                      */
/* ============================================================================================== */

body {
  position: relative;
  background-color: #262626;
  color: #ffffff;
}

#header {
  z-index: 1;
  background: none;
  border-bottom: 0;
}

#header .container {
  position: relative;
}

#header .container:after {
  content: "";
  display: block !important;
  position: absolute;
  bottom: 0;
  width: 100%;
  width: calc(100% - 30px);
  height: 1px;
  background-color: #ffffff;
  opacity: 0.4;
}

.menu a,
a.menu {
  color: #ffffff !important;
}

.header__logo-image {
  background-image: url(../img/bmw-white.png);
}

.lens-note {
  color: #ffffff;
  font-family: bmw;
}

.input-field input[type="radio"]:not([disabled="disabled"]) + label:hover,
.input-field input[type="checkbox"]:not([disabled="disabled"]) + label:hover,
.input-field input[type="radio"]:checked + label,
.input-field input[type="checkbox"]:checked + label {
  color: #ffffff;
  font-weight: 700;
}

.input-field.blocky input[type="radio"] + label,
.input-field.blocky input[type="checkbox"] + label {
  background: #616161;
  color: #ffffff;
}

.input-field.blocky input[type="radio"] + label:hover,
.input-field.blocky input[type="checkbox"] + label:hover {
  color: #ffffff;
}

.input-field.blocky input[type="radio"]:checked + label,
.input-field.blocky input[type="checkbox"]:checked + label {
  background-color: #0653b6 !important;
}

.input-field.blocky [type="checkbox"]:not(:checked) + label:hover:before,
.input-field.blocky [type="checkbox"]:not(:checked) + label:hover:after {
  background-color: transparent;
  background-image: url(../img/icon-bmw-checkmark.nba.svg);
  border: 0;
}

.input-field.blocky [type="checkbox"]:not(:checked) + label:hover:before,
.input-field.blocky [type="checkbox"]:not(:checked) + label:hover:after {
  background-image: url(../img/icon-bmw-checkmark.white.svg);
}

.input-field input[type="text"],
.input-field input[type="password"],
.input-field textarea,
.input-field .select-wrapper input[type="text"].select-dropdown {
  color: #262626;
  height: auto;
}

.navigation.active {
  background-color: #262626;
}

.navigation.active a:hover {
  opacity: 0.7;
}

.input-field input[type="radio"]:not(:checked) + label {
  /* opacity: 0.8; */
  color: var(--grey) !important;
}

.checkbox-tools:not(:checked) + label {
  background-color: var(--white);
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
}

.label.for-checkbox-tools {
  max-width: 220px;
}

/* ============================================================================================== */
/* Light mode                                                                                     */
/* ============================================================================================== */

.light body {
  position: relative;
  background-color: #ffffff;
  color: #262626;
}

.light #header {
  z-index: 1;
  background: none;
  border-bottom: 0;
}

.light #header .container:after {
  opacity: 0;
}

.light .menu a,
.light a.menu {
  color: #262626 !important;
}

.light .header__logo-image {
  background-image: url(../img/bmw.white.svg);
}

.light .lens-note {
  color: #262626;
}

.light .input-field input[type="radio"] + label:hover,
.light .input-field input[type="checkbox"] + label:hover,
.light .input-field input[type="radio"]:checked + label,
.light .input-field input[type="checkbox"]:checked + label {
  color: #262626;
}

.light .input-field input[type="text"],
.light .input-field input[type="password"],
.light .input-field .select-wrapper input[type="text"].select-dropdown {
  color: #262626;
}

.light .navigation.active {
  background-color: #262626;
}

.light .navigation.active a:hover {
  opacity: 0.7;
}

@media screen and (max-width: 767px) {
  .navigation a {
    color: #262626 !important;
  }
  .navigation a:hover {
    color: #1c69d4 !important;
  }
}

/*--redbox-------------------------------------------------------*/
.advent-redbox-header {
  display: none;
}

.advent-redbox-content {
  color: #ff5252 !important;
  opacity: 1 !important;
  font-family: bmw;
  font-size: 15px;
  font-weight: 600;
  /*font-weight: 700;*/
}

.view__title.closed .fa-angle-down {
  transform: none;
}

.view__title .fa-angle-down {
  transform: rotate(180deg);
}

.balert-error {
  background: transparent !important;
  background: #ffffff00 !important;
  background: rgba(255, 255, 255, 0) !important;
  text-align: left !important;
  font-family: bmw !important;
  font-size: 15px !important;
  margin: 0px 0px 10px 0px !important;
  padding: 10px 0px !important;
  color: #ff5252 !important;
  text-align: left !important;
  font-weight: 600;
}

/*.advent-redbox {
    margin-bottom: 20px;
    padding: 5px;
    background-color: #ff5252;
    color: #4f7ece !important;
}

.advent-redbox-message > * {
    display: inline;
    margin-right: 10px;
    font-weight: bold;
    }*/

.advent-redbox-message .advent-redbox-header:after {
  content: ": ";
}

/* Dropdowns ------------------------------------------------------------------------------------ */

.input-field .select-wrapper input[type="text"].select-dropdown,
.select-wrapper input[type="text"].select-dropdown {
  background-color: #fff !important;
  opacity: 1 !important;
}

.select-wrapper input[type="text"].select-dropdown.disabled {
  background-color: #8e8e8e !important;
  pointer-events: none;
}

.input-field .select-wrapper .caret,
.select-wrapper .caret {
  right: 12px;
  background: url(../img/icon-bmw-angle-down.svg) no-repeat center !important;
  background-size: contain !important;
  color: #ff000000 !important;
  filter: brightness(0.9) !important;
  fill: transparent;
}

.input-field .select-wrapper:hover .caret,
.select-wrapper:hover .caret {
  background-image: url(../img/icon-bmw-angle-down.nba.svg) !important;
  color: transparent !important;
}

.input-field .dropdown-content,
.dropdown-content {
  z-index: 9;
  max-height: 350px;
  border: 1px solid #bbbbbb;
  border-radius: 0;
  top: 0% !important;
}

.input-field .dropdown-content li,
.dropdown-content li {
  min-height: 40px;
  border-bottom: 0;
}

.input-field .dropdown-content li:hover,
.dropdown-content li:hover {
  background-color: initial;
}

.input-field .dropdown-content li *,
.dropdown-content li * {
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 700;
  color: #8e8e8e !important;
}

.input-field .dropdown-content li:hover > *,
.dropdown-content li:hover > * {
  color: #262626 !important;
}

.select-wrapper .caret {
  display: block;
  z-index: 6;
  width: 20px;
  height: 20px !important;
  border: 0;
  cursor: pointer;
  pointer-events: none;
  transition: 0.25s ease-out;
}

/* select2 -------------------------------------------------------------------------------------- */

script,
style {
  display: none !important;
}

#view .select2-container--default .select2-selection--single,
#view .select2.select2-container {
  outline: none;
}
#view .select2.select2-container {
  width: 50% !important;
}
@media only screen and (max-width: 767px) {
  #view .select2.select2-container {
    width: 100% !important;
  }
}

#view .select2-container--default .select2-selection--single {
  height: 50px;
  padding: 14px;
  padding-right: 38px;
  border: 0;
  border-radius: 0;
}

#view .select2-container--default .select2-results__option {
  color: initial;
}

#view
  .select2-container--default
  .select2-search--dropdown
  .select2-search__field {
  color: initial;
  border: 1px solid #d4e0e0 !important;
  margin: 8px;
  width: calc(100% - 26px) !important;
  padding: 0 5px;
}

#view
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 10px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  padding: 0;
  font-size: 16px;
  color: #262626 !important;
  font-weight: bold;
  line-height: 22px !important;
}

.select2-container--default.select2-container--disabled
  .select2-selection--single {
  background-color: #aaa !important;
}

input:not([type]):focus:not([readonly]),
input[type="text"]:not(.browser-default):focus:not([readonly]),
input[type="password"]:not(.browser-default):focus:not([readonly]),
input[type="email"]:not(.browser-default):focus:not([readonly]),
input[type="url"]:not(.browser-default):focus:not([readonly]),
input[type="time"]:not(.browser-default):focus:not([readonly]),
input[type="date"]:not(.browser-default):focus:not([readonly]),
input[type="datetime"]:not(.browser-default):focus:not([readonly]),
input[type="datetime-local"]:not(.browser-default):focus:not([readonly]),
input[type="tel"]:not(.browser-default):focus:not([readonly]),
input[type="number"]:not(.browser-default):focus:not([readonly]),
input[type="search"]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid #d4e0e0 !important;
  box-shadow: none !important;
}

.select2-results ul li {
  font-size: 16px !important;
  color: #8e8e8e !important;
}

.select2-container--default
  .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: #ffffff !important;
  color: #000 !important;
}
.select2-container--open .select2-dropdown {
  border: 0;
  border-radius: 0;
  color: #262626;
  font-weight: bold;
}
.select2-container--open .select2-dropdown--above {
  border-bottom: 1px solid #d4e0e0 !important;
  transform: translate(1px, 1px);
}
.select2-container--open .select2-dropdown--below {
  border-top: 1px solid #d4e0e0 !important;
  transform: translate(0px, -1px);
}

.select2-search--dropdown {
  padding: 10px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  height: auto;
  margin: 0;
  padding: 10px;
  width: calc(100% - 2 * 10px);
  border-color: #d4e0e0 !important;
  box-shadow: none !important;
}

.select2-results__option {
  height: 40px;
  padding: 10px;
}

.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 12px;
  background-color: rgba(255, 255, 255, 0.9);
  background-color: #ddd;
  border-radius: 9px;
}
.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar-corner {
  background-color: #e6e6e6;
}

.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar-thumb {
  border-radius: 9px;
  border: 4px solid rgba(255, 255, 255, 0);
  background-clip: content-box;
  /*background-color: #ffffff;*/
  background-color: rgba(255, 255, 255, 0.7);
}

/* Select2 caret change for beneficial owner */

#view
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 10px;
  right: 5px;
  width: 27px;
  height: 30px;
  background: url(../img/icon-bmw-angle-down.svg) no-repeat center !important;
  transform: scale(0.8) rotate(0deg);
}

.select2-container--default.select2-container--open
  .select2-selection--single
  .select2-selection__arrow {
  transform: scale(0.8) rotate(180deg) !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-style: none !important;
}

.select-wrapper.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ============================================================================================== */
/* Marketing bannners                                                                             */
/* ============================================================================================== */

#marketing-banners {
  display: none;
  position: relative;
}

#marketing-banners a {
  display: block;
}

#marketing-banners img {
  width: 100%;
  height: 200px;
  height: 20vmin;
  object-position: center;
  object-fit: cover;
}

#marketing-banners .menu {
  position: absolute;
  top: 50%;
  width: 100%;
  color: #ffffff;
  transform: translateY(-50%);
}

#marketing-banners h3 {
  margin: 0 0 10px;
  font-weight: bold;
}

/* ============================================================================================== */
/* Loading                                                                                        */
/* ============================================================================================== */

/*--- CSS loader from loading.io --------------------------------------------------------------- */
/*--- URL: https://loading.io/css/ ------------------------------------------------------------- */

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

/* Customisation */

#view.waiting .view__main {
  opacity: 0.25;
  cursor: progress;
  filter: contrast(0.8);
  pointer-events: none;
}

.lds-ripple__wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#view.waiting .lds-ripple__wrapper {
  display: block;
}

.lds-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
  /*background-color: #ffffff;*/
  border-radius: 15px;
  transform: translate(-50%, -50%);
  /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);*/
}
.lds-ripple {
  width: 100%;
  text-align: center;
}

.lds-ripple div {
  position: absolute;
  border: 4px solid #1c69d4;
  transform: translate(5px, 5px) scale(0.7);
}

.lds-ripple h2 {
  margin: 0 0 10px;
  font-size: 25px;
  line-height: 1;
}

.lds-ripple p {
  display: inline-block;
  width: 160px;
  line-height: 1.2;
  opacity: 0.7;
}

/*remove green box*/
.balert.balert-success.removeafterawhile {
  display: none !important;
}

/*pop out screen*/
#popover {
  width: 90% !important;
  max-width: 1280px;
}

@media only screen and (min-width: 601px) {
  #popover {
    width: 85% !important;
  }
}

@media only screen and (min-width: 993px) {
  #popover {
    width: 70% !important;
  }
}

/* ---Residential Address screen month and year in 1 line fix---------- */

.input-field.col-xs-12.col-md-12.master-dur-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: -45px;
  padding-top: 15px;
}

.input-element-wrapper.dur-container {
  width: 25%;
  width: calc(25% - 2.5px);
  flex: none;
}

.input-element-wrapper.dur-container.year-container {
  margin-right: 10px;
}

.input-element-wrapper.dur-container:before {
  content: "Month(s)";
  position: absolute;
  top: -25px;
}
.input-element-wrapper.dur-container.year-container:before {
  content: "Year(s)";
}

@media screen and (max-width: 767px) {
  .input-element-wrapper.dur-container {
    flex: 1;
  }
}

/* -- Error messages -------------------------------------------------------- */

.adv-mustfil {
  color: #ff5252 !important;
  opacity: 1 !important;
  font-family: bmw;
  font-size: 15px;
  font-weight: 600;
  flex-basis: 100%;
}

.mustfill-mark {
  display: none;
}

/*Company address screen*/
#copyaddr1::before,
#copyaddr2::before,
#copydur1::before,
#copydur2::before {
  width: 0 !important;
  margin-right: 0 !important;
}

#copyaddr1,
#copyaddr2,
#copydur1,
#copydur2 {
  color: #0653b6 !important;
}

#copyaddr1:hover,
#copyaddr2:hover,
#copydur1:hover,
#copydur2:hover {
  color: #ffffff !important;
}

/* ----Warning Popup---- */

.swal-modal {
  border-radius: 0px;
}

.swal-icon--warning__body,
.swal-icon--warning__dot {
  background-color: #0653b6;
}

.swal-icon:first-child {
  border-color: #0653b6 !important;
}

.swal-overlay--show-modal .swal-modal {
  width: 65%;
  height: auto;
}

.swal-button {
  display: inline-block;
  min-width: 200px;
  padding: 17px 50px;
  border-radius: 0;
  font-family: bmw;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 16px;
  box-shadow: none;
  cursor: pointer;
  background: #1c69d4 !important;
  color: #fff;
  box-shadow: none !important;
}

/* Employment status - magnifying icon */

span#ABNSearch {
  position: absolute;
  right: -30px;
  top: 16px;
  -webkit-appearance: button;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  input#lens_FC_SNS_EMP_ABN,
  input#lens_FC_SNS_GUAR_EMP_ABN,
  input#lens_FC_SNS_EMP_ABN_CO {
    width: 89%;
    position: relative;
  }

  .abn__button + .input-field__reset {
    right: 43px;
  }
  span#ABNSearch {
    right: 4px;
  }
}

/* Portal Calculator - Fix for checkbox margin */
/* No longer necesary for Materialize 1.0.0 */

/*label[for=optional--deposit], label[for=optional--balloon] {
    padding: 10px 0px 0px 35px !important;
}*/

/* ============================================================================================== */
/* Radiobutton transition remove                                                                  */
/* ============================================================================================== */

.input-field [type="radio"]:checked + label:before,
.input-field [type="radio"]:checked + label:after,
.input-field [type="radio"] + label:before,
.input-field [type="radio"] + label:after {
  display: none;
}

/* Refinance Application screen /custom class is found in customjs only for this screen/*/

.refinance-option {
  width: 70% !important;
}

.login-link-interaction {
  color: white !important;
  text-decoration: underline;
}

/*.summary__value > input[type=text].inputSize{
    text-indent: 20px !important;
}*/

/* ============================================================================================== */
/* Materialize plugins                                                                            */
/* ============================================================================================== */

.datepicker-calendar {
  color: initial;
}

.ui-datepicker .ui-datepicker-buttonpane {
  display: none;
}

/* ============================================================================================== */
/* Print CSS                                                                                      */
/* ============================================================================================== */

@media print {
  body {
    background-color: #ffffff;
  }
  .splash__image {
    display: none;
  }
}

/* customized radio button to mimic toggle button */

.radio_tr {
  display: flex !important;
}

.radio_td {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.radio_td>.for-checkbox-tools {
  font-size: 1rem;
  padding: 10px 15px !important;
  background-color: rgba(255, 255, 255, 0.3) !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: 0.5s ease-out !important;
}

.radio_tr input[type="radio"]:not(:checked) + label,
.radio_tr input[type="radio"]:checked + label {
  color: #ffffff !important;
}

.radio_td>.checkbox-tools:checked + label,
.radio_td label:hover {
  background-color: #0653b6 !important;
}

.init_cap {
	display: inline-block;
	text-transform: lowercase
}
  
.init_cap::first-letter {
	text-transform: uppercase
}