:root {
  --color-white: #FFF;
  --color-black: #000;
  
  --color-text: var(--color-neutral);
  --color-text-light: var(--color-neutral-70);
  --color-line: var(--color-neutral-10);
  --color-line-medium: var(--color-neutral-25);

  --color-profile: #D5061B;
  --color-profile-2: color-mix(in srgb, white, var(--color-profile) 2%);
  --color-profile-4: color-mix(in srgb, white, var(--color-profile) 4%);
  --color-profile-5: color-mix(in srgb, white, var(--color-profile) 5%);
  --color-profile-10: color-mix(in srgb, white, var(--color-profile) 10%);
  --color-profile-15: color-mix(in srgb, white, var(--color-profile) 15%);
  --color-profile-25: color-mix(in srgb, white, var(--color-profile) 25%);
  --color-profile-50: color-mix(in srgb, white, var(--color-profile) 50%);
  --color-profile-70: color-mix(in srgb, white, var(--color-profile) 70%);
  --color-support: #60000D;
  --color-support-2: color-mix(in srgb, white, var(--color-support) 2%);
  --color-support-5: color-mix(in srgb, white, var(--color-support) 5%);
  --color-support-10: color-mix(in srgb, white, var(--color-support) 10%);
  --color-support-15: color-mix(in srgb, white, var(--color-support) 15%);
  --color-support-25: color-mix(in srgb, white, var(--color-support) 25%);
  --color-support-50: color-mix(in srgb, white, var(--color-support) 50%);
  --color-support-70: color-mix(in srgb, white, var(--color-support) 70%);
  --color-neutral: #252728;
  --color-neutral-2: color-mix(in srgb, white, var(--color-neutral) 2%);
  --color-neutral-5: color-mix(in srgb, white, var(--color-neutral) 5%);
  --color-neutral-10: color-mix(in srgb, white, var(--color-neutral) 10%);
  --color-neutral-15: color-mix(in srgb, white, var(--color-neutral) 15%);
  --color-neutral-25: color-mix(in srgb, white, var(--color-neutral) 25%);
  --color-neutral-50: color-mix(in srgb, white, var(--color-neutral) 50%);
  --color-neutral-70: color-mix(in srgb, white, var(--color-neutral) 70%);
  --color-premium: #370001;
  --color-campaign: #006EF5;
  --color-success: #D3E9CC;
  --color-success-accent: #00594C;
  --color-warning: #FEF0C3;
  --color-warning-accent: #6E3D01;
  --color-error: #F8DFDE;
  --color-error-accent: var(--color-support);
  --color-info: #EFFAFF;
  --color-info-accent: #002954;
  --color-info-highlight: #004FB3;
  --color-spray: #EE84B0;



  --font-sans-serif: 'Thon Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-title: 'Thon Title', 'Helvetica Neue', Helvetica, sans-serif;
  --font-14: 0.875rem;
  --font-16: 1rem;
  --font-18: 1.125rem;
  --font-20: 1.25rem;
  --font-28: 1.75rem;
  --font-32: 2rem;
  --font-36: 2.25rem;
  --font-48: 3rem;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-64: 4rem;
  --space-72: 4.5rem;
}

@property --color-gradient-start {
    syntax: '<color>';
    initial-value: #D5061B;
    inherits: false;        
}

@property --color-gradient-end {
    syntax: '<color>';
    initial-value: #D5061B;
    inherits: false;
}

@font-face {
    font-family: 'Thon Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ThonSans-Bold-Web.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Thon Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ThonSans-Medium-Web.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Thon Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ThonSans-Regular-Web.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Thon Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ThonSans-Italic-Web.woff2') format('woff2');
}

@font-face {
    font-family: 'Thon Title';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ThonTitle-Regular-Web.woff2') format('woff2');
}

body {
  margin: 0;
  font-size: 100%;
  line-height: 1.5;
  background-color: var(--color-white);
  font-family: var(--font-sans-serif);
  color: var(--color-text);
}

a {
  color: var(--color-text);
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  outline: none;
}

  a:hover {
    text-decoration-thickness: 2px;
  }

  a:focus-visible {
    text-decoration-thickness: 3px;
  }

  a.regular-link {
    font-family: var(--font-sans-serif);
  }

p {
  margin: 0 0 var(--space-32);
}

* {
  box-sizing: border-box;
}

.id-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px var(--space-16);
  margin-inline: auto;
  max-width: 1920px;
}

.id-header__logo img,
.id-header__logo svg {
  width: 60px;
  height: 60px;
  vertical-align: middle;
}

@media (min-width: 43.75em) {
  .id-header {
    padding: var(--space-24);
  }

  .id-header__logo img,
  .id-header__logo svg {
    width: 86px;
    height: 86px;
  }
}

.id-main {
    max-width: 37.5rem;
    margin-inline: auto;
    padding: var(--space-40) var(--space-24);
    position: relative;
}

@media (min-width: 43.75em) {
  .id-main {
    padding: var(--space-56) 100px;
    background-color: var(--color-white);
    box-shadow: 0px 1px 25px 6px rgba(0, 0, 0, 0.07);
  }
}

.id-cancel {
  margin-top: var(--space-56);
  text-align: center;
}

.id-cancel__btn .icon {
  display: none;
}

@media (max-width: 43.6875em) {
  .id-cancel {
    position: absolute;
    top: -38px;
    right: var(--space-24);
  }

  .id-cancel__btn {
    display: inline-flex;
    align-items: center;
    column-gap: var(--space-8);
  }

  .id-cancel__btn .icon {
    display: inline-block;
  }
}

.u-hidden {
  display: none !important;
}

.icon--20 {
  width: 20px;
  height: 20px;
}

.icon--24 {
  width: var(--space-24);
  height: var(--space-24);
}

.icon--profile {
  fill: var(--color-profile);
}

.ill {
  vertical-align: middle;
}

.ill--230 {
  max-width: 230px;
  max-height: 230px;
}

.caps {
  text-transform: uppercase;
}

.id-back {
  position: relative;
  margin-top: calc(var(--space-48) * -1);
  margin-left: -28px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-16) var(--space-24) var(--space-32);
}

@media (min-width: 43.75em) {
  .id-back {
    margin-top: calc(var(--space-56) * -1);
    margin-left: -100px;
  }
}

  .id-back .btn.btn--close {
    margin-left: auto;
    text-decoration-line: none;
  }

  .id-back .btn.btn--close .icon {
      width: 10px;
      height: 10px;
    }

.id-content__qr {
  margin: var(--space-40) 0;
  text-align: center;
}

  .id-content__qr canvas {
    background-color: var(--color-white);
    padding: var(--space-8);
    width: 150px;
    height: 150px;
  }

.id-content__recovery {
  margin-bottom: var(--space-40);
}

.id-content__recovery-code {
  margin-top: var(--space-8);
  color: var(--color-text);
  text-align: center;
}

  .id-content__recovery-code button {
    margin-top: var(--space-8);
  }

    .id-content__recovery-code button:hover span,
    .id-content__recovery-code button:focus span {
      box-shadow: 0 1px 0 0 var(--color-neutral);
    }

  .id-content__recovery-code svg {
    width: var(--space-16);
    height: var(--space-16);
  }

.login__rounded-box {
  background-color: var(--color-white);
  border-radius: 10px;
  padding: var(--space-32);
  text-align: center;
  margin-bottom: var(--space-40);
  color: var(--color-text);
}

.login__rounded-box-title {
  margin: 0 0 var(--space-12);
  font-size: var(--font-16);
}

.login__rounded-box-codes {
  margin-bottom: var(--space-12);
  font-weight: 700;
  font-family: var(--font-sans-serif);
  line-height: 1.5;
}

.login__rounded-box-code {
  margin: 0 var(--space-4);
}

.login__rounded-box-text {
  margin-top: var(--space-32);
}

  .login__rounded-box-text p {
    margin-top: var(--space-16);
    margin-bottom: 0;
    font-size: var(--font-14);
  }

.id-content h1 {
  text-align: center;
  margin: 0 0 var(--space-40);
  font-family: var(--font-title);
  font-size: var(--font-48);
  line-height: 1.25;
  color: var(--color-profile);
}

.id-content .heading-text {
  text-align: center;
  margin: calc(var(--space-16) * -1) 0 0;
  font-weight: 700;
  font-size: var(--font-36);
}

.id-content fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.id-content .form-row {
  margin-bottom: 1.6875rem;
  position: relative;
}

  .id-content .form-row .label {
    font-size: var(--font-16);
    font-weight: 700;
    margin-bottom: 6px;
    display: block;
    text-align: left;
  }

  .id-content .form-row .flex-wrapper {
    display: flex;
    justify-content: space-between;
  }

    .id-content .form-row .flex-wrapper .form-item {
      flex: 0 0 48%;
    }

  .id-content .form-row .checkbox-label {
    display: flex;
    align-items: flex-start;
    line-height: 1.4;
  }

    .id-content .form-row .checkbox-label input {
      width: var(--space-24);
      height: var(--space-24);
      margin: 0 var(--space-12) 0 0;
      flex-shrink: 0;
      position: relative;
      top: -1px;
      border-radius: 0;
      accent-color: var(--color-neutral);
    }

      .id-content .form-row .checkbox-label input.input-validation-error {
        box-shadow: inset 0 0 0 2px var(--color-profile);
      }

.id-content .form-control {
  width: 100%;
  padding: 8.5px var(--space-12);
  line-height: 1.5;
  font-size: var(--font-18);
  border: 1px solid var(--color-support);
  border-radius: 2px;
  outline: none;
  font-family: var(--font-sans-serif);
  -webkit-appearance: none;
}

  .id-content .form-control.input-validation-error {
    border-color: var(--color-profile);
  }

  .id-content .form-control.input-validation-error:focus {
    border-color: var(--color-profile);
    box-shadow: inset 0 0 0 1px var(--color-profile);
  }

.select-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  background-color: var(--color-white);
}

  .select-wrapper:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    right: 11px;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    background-image: url(../images/arrow-right.svg);
    background-position: 50% 50%;
    background-size: contain;
    transform: rotate(90deg);
  }

  .select-wrapper select.form-control {
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 4rem;
  }

.id-content .form-control[readonly] {
  background-color: var(--color-neutral-10);
}

.id-content .form-control:focus {
  box-shadow: inset 0 0 0 1px var(--color-support);
}

.id-content .form-control[readonly]:focus {
  box-shadow: none;
}

.id-content .form-row--action {
  display: flex;
  justify-content: space-between;
}

  .id-content .form-row--action a {
    display: block;
    margin-bottom: 10px;
  }

.btn {
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans-serif);
  text-decoration: none;
  text-align: center;
  font-weight: 500;
}

  .btn.btn--primary {
    width: 100%;
    background: linear-gradient(68deg, var(--color-gradient-start) 30%, var(--color-gradient-end) 85%);
    color: var(--color-white);
    padding: var(--space-16) var(--space-24);
    font-size: var(--font-16);
    display: inline-block;
    transition: --color-gradient-start .2s ease, --color-gradient-end .2s ease;
    text-shadow: 1px 1px 6px var(--color-profile);
  }

    .btn.btn--primary:hover {
      --color-gradient-start: var(--color-profile);
      --color-gradient-end: var(--color-spray);
    }

    .btn.btn--primary:focus-visible {
      outline: 1px solid var(--color-profile);
      outline-offset: 2px;
      box-shadow: 0 0 0 2px var(--color-white);
    }

  .btn.btn--secondary {
    width: 100%;
    background-color: var(--color-white);
    color: var(--color-profile);
    padding: var(--space-16) var(--space-24);
    border: 1px solid var(--color-profile);
    font-size: var(--font-16);
    display: inline-block;
    transition: color .2s ease, border-color .2s ease;
  }

    .btn.btn--secondary:hover {
      color: var(--color-support);
      border-color: var(--color-support);
    }

    .btn.btn--secondary:focus-visible {
      outline: 1px solid var(--color-profile);
      outline-offset: 2px;
      box-shadow: 0 0 0 2px var(--color-white);
    }

.btn.btn--link {
  color: var(--color-profile);
  font-weight: 500;
  padding: var(--space-8) 0 10px;
  margin: 0;
  font-size: var(--font-16);
  box-shadow: inset 0 -3px 0 0 var(--color-support);
  transition: box-shadow .2s ease;
  outline: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  line-height: normal;
}

  .btn.btn--link:hover,
  .btn.btn--link:focus {
    box-shadow: inset 0 -5px 0 0 var(--color-support);
  }

  .btn.btn--icon {
    display: flex;
    align-items: center;
    column-gap: var(--space-8);
    font-size: var(--font-16);
    text-decoration-line: none;
  }

    .btn.btn--icon:hover,
    .btn.btn--icon:focus {
      text-decoration-line: underline;
    }

    .btn.btn--icon .icon {
      width: 14px;
      height: 14px;
      margin-top: 1px;
    }

  .btn.btn--copy {
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
  }

    .btn.btn--copy svg {
      margin-right: 5px;
    }


.button-row {
  margin-top: 1.6875rem;
  margin-bottom: 1.6875rem;
}

  .button-row:last-child,
  .button-row.button-row--no-bottom-margin {
    margin-bottom: 0;
  }

.margin-top {
  margin-top: var(--space-24);
}

.margin-top-md {
  margin-top: var(--space-32);
}

.margin-bottom {
  margin-bottom: var(--space-24);
}

.margin-bottom-md {
  margin-bottom: var(--space-32);
}

.margin-bottom-xs {
  margin-bottom: var(--space-8);
}

.text-center {
  text-align: center;
}

.alert-success,
.alert-danger,
.alert-warning {
  padding: var(--space-12) var(--space-16);
  margin-bottom: 1.6875rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  column-gap: var(--space-8);
}

.alert-success {
  color: var(--color-text);
  background-color: var(--color-success);
}

.alert-success .icon {
  fill: var(--color-success-accent);
}

.alert-danger {
  background-color: var(--color-error);
  color: var(--color-text);
}

.alert-danger .icon {
  fill: var(--color-error-accent);
}

.alert-warning {
  color: var(--color-text);
  background-color: var(--color-warning);
}

.alert-warning .icon {
  fill: var(--color-neutral);
}

.alert-success .icon,
.alert-danger .icon,
.alert-warning .icon {
  flex-shrink: 0;
}

.alert ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.alert li:only-child {
  list-style: none;
}

.message {
  margin-bottom: var(--space-24);
  padding: var(--space-24);
  background-color: var(--color-success);
  border: 2px solid var(--color-success-accent);
  color: var(--color-success-accent);
  text-align: center;
  line-height: 1.4;
  font-weight: 700;
}

.field-validation-error {
  display: block;
  color: var(--color-error-accent);
  font-size: var(--font-14);
  line-height: normal;
  margin-top: var(--space-4);
}

@media (max-width: 30em) {
  .id-content h1,
  .id-content .heading-text {
    font-size: var(--font-36);
  }

  .id-content .form-row--action a,
  .id-content .form-row .checkbox-label,
  .validation-summary-errors ul {
    font-size: var(--font-14);
  }

  .btn.btn--primary {
    font-size: var(--font-20);
  }
}

dl dt {
  font-weight: 700;
}

dl dd {
  margin: 0 0 var(--space-8);
}

.site-message {
  color: var(--color-text);
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 10px var(--space-32) 11px;
  line-height: 1.5;
}

  .site-message a {
    color: var(--color-text);
    font-weight: 400;
  }

.site-message--high {
  background-color: var(--color-error);
}

.site-message--medium {
  background-color: var(--color-warning);
}

.site-message--low {
  background-color: var(--color-neutral-25);
}

.profile-box {
  padding: var(--space-32) var(--space-24);
  font-size: var(--font-18);
  position: relative;
  line-height: 1.5;
  box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.14);
  margin: var(--space-32) auto var(--space-40);
  background-color: var(--color-white);
  color: var(--color-text-light);
  max-width: 300px;
  display: flex;
  flex-direction: column;
}

.profile-box__heading {
  font-size: var(--font-20);
  font-weight: 700;
  color: var(--color-text);
  margin-top: var(--space-32);
  text-transform:capitalize;
}

.member-level-icon {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  display: inline-block;
  width: 100%;
  max-width: 220px;
  margin-inline: auto;
}

.member-level-icon--gold {
  background: linear-gradient(219deg, #DBC53D 16.82%, rgba(156, 134, 0, 0) 91.34%, rgba(255, 255, 255, 0) 155.92%);
}

.member-level-icon--platinum {
  background: linear-gradient(219deg, #A8A8A8 16.82%, rgba(199, 199, 199, 0) 88.18%, rgba(255, 255, 255, 0) 155.92%);
}

.member-level-icon--black {
  background: linear-gradient(219deg, #182632 16.82%, rgba(21, 50, 74, 0) 88.18%, rgba(255, 255, 255, 0) 155.92%);
}

kbd {
  padding: .2rem .4rem;
  font-size: var(--font-14);
  color: var(--color-white);
  background-color: var(--color-neutral-70);
  border-radius: .2rem;
}

.sg-heading {
  text-transform: uppercase;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-neutral-50);
  margin: var(--space-40) 0 var(--space-24);
  font-size: var(--font-16);
  font-weight: 400;
}

.show-password {
  position: relative;
}

.show-password__trigger {
  position: absolute;
  top: 50%;
  right: var(--space-16);
  width: 1.25rem;
  height: var(--space-16);
  margin-top: calc(var(--space-8) * -1);
  display: flex;
  align-items: center;
  cursor: pointer;
}

  .show-password__trigger svg {
    width: 1.25rem;
    height: 1rem;
  }

.show-password__open {
  display: none;
}

.show-password.open .show-password__open {
  display: block;
}

.show-password.open .show-password__closed {
  display: none;
}

.grecaptcha-badge {
  visibility: hidden;
}

.font-14 {
  font-size: var(--font-14);
}

.vipps-login {
  text-align: center;
}

.vipps-login__desc {
  text-align: center;
  font-weight: 700;
  margin-block: var(--space-24) var(--space-16);
}

.simple-list {
  padding-left: 1.25rem;
  margin: 0;
}

.narrow-width {
  max-width: 300px;
  margin-inline: auto;
}

.heading-small {
  font-size: var(--font-18);
  margin-block: 0 var(--space-8);
}