/* Theme for the ripple elements.*/
/* stylelint-disable material/no-prefixes */
/* stylelint-enable */
/* Linux emoji */
/* PDP */
/* Checkout */
/* Extra */
/* Mobile Menu */
/* CMS Component Indentation */
/**
 * Foundation for Sites
 * Version 6.6.2
 * https://get.foundation
 * Licensed under MIT Open Source
 */
/* stylelint-disable */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap");
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  /* 2 */
  padding: 0;
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  letter-spacing: inherit;
  line-height: 1.15;
  /* 1 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
  color: inherit;
  font-weight: inherit;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 0.065rem dotted ButtonText;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type='checkbox'],
[type='radio'] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/* stylelint-disable */
/*! sanitize.css v7.0.2 | CC0 License | github.com/csstools/sanitize.css */
/* Document
 * ========================================================================== */
/**
 * 1. Remove repeating backgrounds in all browsers (opinionated).
 * 2. Add border box sizing in all browsers (opinionated).
 */
*,
::before,
::after {
  background-repeat: no-repeat;
  /* 1 */
  box-sizing: border-box;
  /* 2 */
}

/**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
::before,
::after {
  text-decoration: inherit;
  /* 1 */
  vertical-align: inherit;
  /* 2 */
}

/**
  * 1. Use the default cursor in all browsers (opinionated).
  * 4. Use a 4-space tab width in all browsers (opinionated).
  * 5. Prevent adjustments of font size after orientation changes in
  *    IE on Windows Phone and in iOS.
  */
html {
  cursor: default;
  /* 1 */
  -moz-tab-size: 4;
  /* 4 */
  tab-size: 4;
  /* 4 */
  -ms-text-size-adjust: 100%;
  /* 5 */
}

/* Grouping content
  * ========================================================================== */
/**
  * Remove the list style on navigation lists in all browsers (opinionated).
  */
nav ol,
nav ul {
  list-style: none;
}

/* Text-level semantics
  * ========================================================================== */
/*
  * Remove the text shadow on text selections in Firefox 61- (opinionated).
  * 1. Restore the coloring undone by defining the text shadow
  *    in all browsers (opinionated).
  */
::-moz-selection {
  background-color: #b3d4fc;
  /* 1 */
  color: #000;
  /* 1 */
  text-shadow: none;
}

::selection {
  background-color: #b3d4fc;
  /* 1 */
  color: #000;
  /* 1 */
  text-shadow: none;
}

/* Embedded content
  * ========================================================================== */
/*
  * Change the alignment on media elements in all browers (opinionated).
  */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
  * Change the fill color to match the text color in all browsers (opinionated).
  */
svg {
  fill: currentColor;
}

/**
  * Hide the overflow in IE.
  */
svg:not(:root) {
  overflow: hidden;
}

/* Tabular data
  * ========================================================================== */
/**
  * Collapse border spacing in all browsers (opinionated).
  */
table {
  border-collapse: collapse;
}

/* Forms
  * ========================================================================== */
/**
  * Inherit styling in all browsers (opinionated).
  */
button,
input,
select,
textarea {
  line-height: inherit;
}

/**
  * Correct the text style of placeholders in Chrome, Edge, and Safari.
  */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}


/**
  * Remove the legacy input password eye in Edge
  */
::-ms-reveal {
  display: none;
}

.sticky {
  position: sticky !important;
}

/* stylelint-disable */
@font-face {
  font-family: 'ElkjopBodytext';
  font-style: normal;
  font-weight: bold;
  src: url("ElkjopBodytext-DemiBold.woff2") format("woff2"), url("ElkjopBodytext-DemiBold.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: 'ElkjopBodytext';
  font-style: normal;
  font-weight: normal;
  src: url("ElkjopBodytext-Regular.woff2") format("woff2"), url("ElkjopBodytext-Regular.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: 'ElkjopHeadline-Regular';
  font-style: normal;
  font-weight: normal;
  src: url("ElkjopHeadline-Regular.woff2") format("woff2"), url("ElkjopHeadline-Regular.woff") format("woff");
  font-display: swap;
}

:root {
  --secondary-font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}

/*var(--secondary-font-family)*/

html {
  /* font-size: 80%; */
  /* margin-right: 1.25rem; */
  /* width: 30rem; */
  background-color: #041753;
}

body #api {
  
  background-color: #fff;
  font-family: "ElkjopBodytext";
  font-size: 100%;/*87.5%;*/
  line-height: 1.4;
  /* display: inline-block;
  text-align: left;
  margin-left: auto;
  margin-right: auto;*/
  width: 496px;
  min-height: 760px;
  border-radius: 6px;
  margin: auto;
  padding-bottom: 2rem;
  padding-left: 3.5rem;
  padding-right: 3.5rem;
  padding-top: 0.5rem;

  }

  /* Make footer fixed at bottom of screen */
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;
}

#page-container {
  position: relative;
  background-color: #041753;
  top: 50px;
}

#header-logo-wrapper {
  text-align: center;
}

/* @media screen and (min-width: 22.5em) {
  html {
    font-size: 100%;
  }

  body #api {
    width: 100%;
    border: 0;
  }
} */

/* For Mobile */
/* @media screen and (max-width: 540px) { */
@media screen and (max-width: 500px) {
  html {
    font-size: 100%;
  }

  body div#api {
    width: 100%;
    border: 0;
    padding-left: 0;
    padding-right: 0px;
    border-radius: 0;
  }

  body div#page-container {
    top: 0;
  }
  
  li.Paragraph.paragraphCustomerClubOptInText_li {
    width: 100%;
    left: 0px;
  }


}

/* For Tablet */
/* @media screen and (min-width: 540px) and (max-width: 765px) {
  html {
    font-size: 100%;
  }

  body div#api {
    width: 100%;
    border: 0;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
  }

  body div#page-container {
    top: 0;
  }

} */

body {
  background-color: #ffffff;
  background-color: #041753;
  font-family: "ElkjopBodytext";
  font-size: 87.5%;
  line-height: 1.4;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  /* display: block;
  text-align: center; */

}


  body #linkLogoHeader {    
    display: block;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  body #api a#newForgotPassword{display:revert; color: #242424; font-weight:700; font-size:0.875rem;margin-left:auto;} /*Instead of margin-left, this was used when KMSI activated: text-align:right;*/
  body #api .entry {position: relative;
    /* padding:0rem 0rem 0rem 1.25rem; */
    margin: 1rem;
  } 

  body #api #email_info div{font-size:87.5%;color: #000;font-family:Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;}
  /* ---body #api #email_info a----{font-size:0.625rem;}--- */

  /* Hide the "Sign in with your email address" intro text on landing page for SuSi B2C */
  body #api .localAccount .intro h2 {
    color:#333;font-weight:900;font-size:1.25rem;display:none;
  }

  /* hide divider between continue button and signup link: */
  body #api .localAccount .divider{display:-ms-flexbox;display:flex; display:none;}

  body #api .localAccount .divider h2{margin:0 0.25rem;color:#333;font-size:0.875rem;font-weight:500}

  body #api .localAccount .divider:after,body #api .localAccount .divider:before{content:"";position:relative;height:0.125rem;width:8.565rem;top:0.4375rem;background-color:#f2f2f2}
  
  /* These three are needed so the divider after social accounts works as well: */
  body #api .divider{display:-ms-flexbox;display:flex;margin: 2rem 1rem 2rem 1rem;}
  body #api .divider h2{
    margin:0 0.25rem;
    color:#727272;
    font-size:14px;
    min-width:fit-content;
    font-weight:400;
    margin-left: 20px;
    margin-right: 20px;
    font-family:Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;}
  body #api .divider:after,body #api .divider:before{content:"";position:relative;height:0.125rem;width:31.25rem;top:0.4375rem;background-color:#f2f2f2}
  
  body #api .localAccount .entry .entry-item label{color:#333;font-size:16px;font-weight:400;font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;}
  body #api .localAccount .entry .entry-item .password-label a {position:relative;z-index:1;float:right;color:#242424;outline:none;font-size:0.875rem;font-weight:600;letter-spacing:0;line-height:1.5625rem;height:1.5625rem;font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;} /*{font-size:0.75rem;color:#333}*/
  body #api .localAccount .entry .entry-item .password-label a:hover {text-decoration: underline;}
  body #api .localAccount .entry .entry-item .password-label a:active {text-decoration: underline;}
  a:hover{text-decoration:none;}
  /* body-- #api--- .localAccount--- .entry--- .entry-item---------- .password-label -------------#newForgotPassword------------{float:right} */
  body #api .localAccount .entry .buttons #next{color:#fff;font-size:20px;border:0;font-weight:600;height:3.5rem;}
body #email_intro{display:block;font-size:1rem;line-height:1.875rem;margin-bottom:2.5rem;color:#242424;font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;}
body #email_info{display:block;font-size:1rem;line-height:1.875rem;margin-bottom:2.5rem;color:#242424;font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;}
body button{padding:0.4375rem 0.875rem;color:#fff;font-weight:700;border-radius:2.875rem;transition:background .5s ease} 

body #createAccount{
  padding-left:.5em;
  text-decoration: underline;
  color: #242424;
}

/* Azure ADB2C adds two div's on page with some content to show end user that the page is loading.
/* It is named both id and class as simplemodal-container and simplemodal-overlay*/
/* It seems like the new setup from AD B2C is to have a div with class="working". 
This div is situated after divPassword and before rememberMe. */

#verifying_blurb{display:none;}
#simplemodal-overlay{display:none;}
#simplemodal-container{display:none;}
body .simplemodal-container .verifying-modal{display:none;} /*{display:block;color:#fff!important}*/

/* info text on FB registration: */
#divInfoCreateAccountFromFB{
  font-size:1rem;
  color: #242424;
  font-family: "Open Sans";
  letter-spacing: 0;
  line-height: 30px;
  padding-bottom:2.5rem;
}


.tiny{display:none}
.intro{-ms-flex-order:100;order:100;margin-bottom:1.25rem}
a{color:#8795a1;line-height:1.5}
a:hover{color:#606f7b}

.entry input{
  border: 1px solid #949494;
  border-radius: 6px;
  height: 42px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding-left: 20px;
  width:100%;
  box-shadow:none;
  outline:none;
  background-color:#fff;
  /* margin-bottom: 1rem; */
}

.attrEntry input{
  border: 1px solid #949494;
  border-radius: 6px;
  height: 42px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding-left: 20px;
  width:100%;
  box-shadow:none;
  outline:none;
  background-color:#fff;
}

input:focus{background-color:#fff;outline:none}
/* input[type=checkbox]{width:auto;box-shadow:none} */
#displayed-address{margin:0 auto;margin-bottom:1.5rem;padding:1rem;width:75%;max-width:25rem;border:0.125rem solid #7dbe2c}
#displayed-address .shipping-address{float:left}
#displayed-address .shipping-address>div{font-size:.825rem}
#displayed-address .shipping-address .name{font-size:1rem;font-weight:700}
#displayed-address .shipping-address .address-street-two{margin:0 0 .5rem}
#displayed-address #edit-fields{float:right;clear:none}
#displayed-address #edit-fields a.trigger-button{font-size:.8rem;text-decoration:underline}
.buttons.verify{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:baseline;align-items:baseline}
.buttons button{background-color:#6aa334;border:none;margin-top:1.25rem;padding-top:0.7rem;padding-bottom:0.75rem;width:100%;height:3.5rem;border-radius:2.875rem;color:#fff;font-size:20px;font-weight:600;transition:background .5s ease}
.buttons button:hover{background-color:#598a2c}
.buttons button:active{background-color:#4f7a26}
.buttons button:focus{box-shadow: 0 0 0 0.25rem rgba(106, 163, 52, 0.35);outline:none}
.buttons button:disabled{background-color:#e0e0e0}
.buttons #email_ver_but_resend{color:#242424;font-size:16px;border-color: #fff; background-color: #fff; text-decoration: underline; border: none;margin-top:2.15rem;font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;} /*color:#fff;font-size:1.125rem;border:0;font-weight:700}*/
.buttons #email_ver_but_resend:active{border:0.065rem black;}
.buttons #email_ver_but_resend:hover{text-decoration: none;}
/* .buttons #email_ver_but_verify{margin-top:0.625rem;} */
/* ---.buttons--- {display:-ms-flexbox;display:flex;-ms-flex-direction:row-reverse;flex-direction:row-reverse;margin:0 ---}--- */
button:first-child{margin-right:0!important}

.accountButton{
  width: 100%;
  color: black;
  background-color: white;
  border: 2px solid #e0e0e0;
}

#linkChangeEmail{color:#747474;font-size:0.875rem;font-weight:600;line-height:1.875rem;}
/* .sendButton {border-color: transparent; text-decoration: underline; color: #333} */

/*Adjust postal code and city to be on same line with 25 % of width for postal code, 15 % margin and 60 % city*/
#divPostalCode{width:35%;margin-right:5%;float:left;}
#divCity{width:60%;float:right;}
#continueToPassword{margin-top:0.625rem;}

/*Style the span element which holds the "Add name and address (optional)" text to look like a link*/
#spanToggleNameAndAddress{cursor:pointer;font-size:0.875rem;font-weight: 700;color:#0000008A;text-decoration: underline;font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;}
#spanToggleNameAndAddress:hover{text-decoration:none;}
#spanToggleNameAndAddress:active{text-decoration:none;}
#divToggleNameAndAddress{margin-bottom:1.25rem;display:block;text-align:center;}

/*style the go-back link with text on input email login and signup*/
body #api #email_info #divSignUpGoBackText{font-size:1.5rem; color:#212121;letter-spacing: 0; line-height: 1.875rem; height: 1.875rem; font-family:"ElkjopBodytext"}
#divSignUpGoBackText{font-size:1.5rem; color:#212121;letter-spacing: 0; line-height: 1.875rem; height: 1.875rem; font-family:"ElkjopBodytext"}
#divSignUpGoBackLink{padding-bottom:0.625rem;font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;}
#divSignUpGoBackLink a{font-weight: 600; font-size: 0.875rem; color: #747474;letter-spacing: 0;line-height: 1.875rem;height: 1.6875rem;}
.divEmailInfoLoginStyling{margin-bottom: 1.875rem;}

/*style the div containing info about setting correct password*/
#divInfoSetPassword{margin-left:1.25rem;margin-right:1.25rem;display:block;font-size:1rem;line-height:1.875rem;color:#242424;font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;}

.create{margin:1.875rem 0 0}

.create p {
  text-align:center;
  font-size: 16px;
  margin: 1.25rem;
}
.entry .entry-item{padding-top:0rem;padding-bottom: 1rem;} /*padding-top:1.4375rem*/
.entry .entry-item label{
  display:inline-block;
  height: 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #242424;
  padding-left: 3px;

}
/* ***.entry ***.buttons***{margin:2.625rem 0 2rem} OLD */
.error{color:#DC2C2C;}
#forgotPassword{
  float:right;
  color:#242424;
  outline:none;
  font-size:16px;
  font-weight:400;
  text-decoration: none;
  letter-spacing:0;
  line-height:1.5625rem;
  height:1.5625rem;
  margin-top: 1rem;
  font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}

#forgotPassword:hover{text-decoration: underline;}
#forgotPassword:active{text-decoration: underline;}
#forgotPassword:focus{text-decoration: underline;}

#infoText p{color:#212121;font-size:16px;font-weight:600;text-transform: uppercase; text-align:center;margin-top:1rem;font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;}

.intro p{color:#212121;font-size:16px;font-weight:600;text-align:center;margin-top:1rem;padding: 0rem 1.25rem 0rem 1.25rem;font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;}
#attributeVerification{-ms-flex-order:200;order:200;width:100%; padding: 0rem 1.25rem 0rem 1.25rem;}
.attrEntry{position:relative;padding:0rem 0!important}
.attrEntry label{padding-left:3px;font-size:16px;font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;}
.attrEntry label[for=extension_elkUserCustomerClubAccepted]{display:block!important;margin-left:1.25rem;font-size:0.875rem!important}

/* .attrEntry select{display:none} */
/* 09.02.21 TK: Removed attrEntry select{display:none} due to DDL not being visible with this setting */
/* .dropdown_single{display:block;width:100%;border:0;font-size:1.5rem;font-weight:400;color:#212121;border-bottom:0.15rem solid #0000008A;padding:0.495rem 0rem 0.1875rem 0rem;} */
.dropdown_single{width:100%;font-size:16px;font-weight:400;color:#212121;padding:10px;border-radius:5px}
/* .attrEntry label[for=extension_elkUserCountry]{font-size:16px;font-weight:600;text-transform:uppercase;color:#A4A4A4;} */
/* The two lines above is for the dropdownlist country selector*/

.attrEntry input:invalid{outline:none!important}
.attrEntry .helpText{display:none;margin-top:0.315rem;margin-bottom:0.625rem;color:#DC2C2C;text-align:right}
.attrEntry .helpText.show+input{display:block;border:0.125rem solid #DC2C2C!important}
#email_ver_but_resend{box-shadow:none;}
#cancel{
  background:transparent;
  color:#212121;
  font-weight:500;
  font-size:16px;
  text-decoration:underline;
  outline:none;
  width:100%;
  height:2.875rem;
  margin-right:0.625rem;
  font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
} 
#cancel:hover{text-decoration:none;}
#cancel:active{text-decoration: none;}
#continue{width:100%;}
#continue:disabled{background-color:#e0e0e0}
#initEmail{display:none}
/* #attributeList {padding-bottom:1.25rem;} */
#attributeList ul{padding:0}
#attributeList ul li{list-style:none}
.attr-item label{margin-bottom:.75rem;display:inline-block}
/* ****#email_ver_input_label{display:none!important} */
/* ****#email_ver_input{-ms-flex-order:100;order:100;width:100%;margin:0 0 1.5rem;-ms-flex-positive:1;flex-grow:1}
****#email_ver_but_send{height:3rem;margin:1rem 0;color:#333;font-size:0.875rem;font-weight:900;box-shadow:0.065rem 0.125rem 0.125rem rgba(0,0,0,.15)}
****#email_ver_but_resend{-ms-flex-order:400;order:400;padding:0.75rem;background:#fff;border:0.125rem solid #7dbe2c} */
/* ***#email_ver_but_resend,#email_ver_but_verify{-ms-flex-positive:1;flex-grow:1;width:100%;height:3rem;margin-left:0;margin-right:0;color:#333;font-size:0.875rem;font-weight:900;box-shadow:0.065rem 0.125rem 0.125rem rgba(0,0,0,.15)} */
/* ****#email_ver_but_resend{border-color: transparent; text-decoration: underline; color: #333} */

#ver_text_info_wrapper{display:block;font-size:1rem;line-height:1.875rem;margin-bottom:2.5rem;color:#242424;font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;}
#divInfoPasswordValidation{color: #606f7b;margin:0 1.25rem;font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;}

.create p {
  font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}
/* body #api{margin-top:0.315rem; margin-left:1.25rem;} */
    /* ****body #api .localAccount,body #api .social{width:609 px} */
    body #api .localAccount,body #api .social{width:100%}
    body #api .social .intro-subtitle{margin-bottom:1.25rem;font-size:1rem;line-height:1.1875rem}
    body #api .social .options{margin: 1rem; margin-top:2.5rem;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}
    body #api .social .options div:first-child{width:100%}

    body #api .social .options #FacebookExchange{margin:0;width:100%;height:3.5rem;
      background-image: url("facebook-logo.png");
      background-position: 3% center;
      background-size: 8%;
      font-size: 1.25rem;
    }
    body #api .social .options #FacebookExchange:before{margin-right:6.25rem}
    body #api .social .options #FacebookExchange:hover{background-color: #e0e0e0;}

    body #api .social .options #KlarnaExchange{margin:0;width:100%;height:3.5rem;
      background-image: url("klarna-k-pink.svg");
      background-position: 5% center;
      background-size: 8%;
      font-size: 1.25rem;
    }

    body #api .social .options #KlarnaExchange:before{margin-right:6.25rem}
    body #api .social .options #KlarnaExchange:hover{background-color: #e0e0e0;}

    
    body #api .social .options #VippsMobilePayExchange{margin:0;width:100%;height:3.5rem;
      background-image: url("vipps_logo_small_orange.svg");
      background-position: -16% center;
      background-size: 48%;
      font-size: 1.25rem;
    }
    body #api .social .options #VippsMobilePayExchange:before{margin-right:6.25rem}
    body #api .social .options #VippsMobilePayExchange:hover{background-color: #e0e0e0;}
    

    body #api .localAccount .divider:after,body #api .localAccount .divider:before{width:31.25rem}
    body #api .create{margin:1.25rem 0 0}.sign-in-link{-ms-flex-order:300;order:300;color:#333}


    /* Hide "Sign in with social account" H2 header for social account selection on SuSi B2C landing page */
    .claims-provider-list-buttons.social h2 {display:none;}

    /* Hide the "OR" in the divider between social and local account selection for SuSi B2C landing page */
    /* .divider h2 {
      display:none;
      margin:1rem;
    } */

    /* Add space between social login buttons (Vipps/MobilePay, Klarna, Facebook, etc) */
    .claims-provider-list-buttons.social div.options div {
      margin-bottom: 1.25rem;
    }


    /* HEADER With Elkjop Logo */
    #header-logo img {
      width: 150px; 
      margin: auto;
    }

    .header{
      padding: 1.25rem;
      /* border-bottom: 2px solid #e0e0e0; */
    }

    /* Sign in, text at landing page SuSi*/
    .heading h1 {
      font-size: xx-large;
      font-weight: 600;
      text-align: center;
      margin-top: 1.25rem;
    }

    /* FOOTER with logo and text */
    .logo__text {
      text-align: center;
      margin: 1rem;
    }

    img.footer__img {
      width: 100px;
      margin: auto;
      padding-top: 1.25rem;
    }




    /* Password */

    /* Checkbox styling */

    /* Slik er det nå:
      <label for="rememberMe" class=labelCheckbox>
        <input id="rememberMe" class="klassenavn">
        <span class="spanCheckbox"></span>
      </label>
    }
      */

#divExtension_Country {position:unset;}  


/* LOADING SPINNER STYLING: */
.loader {
  /* opacity: 1; */
  border: 0.315rem solid #f3f3f3;
  border-radius: 50%;
  border-top: 0.315rem solid #6aa334;
  /* width: 3.75rem;
  height: 3.75rem; */
  -webkit-animation: spin 1s linear infinite; /* Safari */
  /* animation: spin 0.5s linear infinite;
  position: fixed;
  top: 45%;
  left: 45%;
  transform: translate(-50%, -50%); */

  /* border: 12px solid #f3f3f3;
  border-radius: 50%; */
  width: 70px;
  height: 70px;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

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

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

.simplemodal-overlay {
  opacity: 1;
  background: none;
}

#newLoader {
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #6aa334;
  width: 70px;
  height: 70px;
  animation: spin 1s linear infinite;
  -webkit-animation: spin 1s linear infinite; /* Safari */
}

.centerOfScreen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

  

/* @keyframes spin {
  100% {
      transform: rotate(360deg);
  }
} */

/* END LOADING SPINNER STYLING */


/* VALID / INVALID FIELDS*/

/*Hide the built in error itemLevel*/
.error.itemLevel.show {
  display: none;
}


input.invalidField{
  border-color: #DC2C2C;
  border-width: 2px;
  background-color: #fff;
}

input.blurFieldInvalid  {
  border-color: #DC2C2C;
  border-width: 2px;
  background-color: #fff;
}

input.emptyField  {
  border-color: #DC2C2C;
  border-width: 2px;
  background-color: #fff;
}



/* END FIELD VALIDATION */





    /* Set checkbox and forgot password link beside each other inside the div rememberMe*/
    .rememberMe {
      width: 50%;
      position: relative;
      
      margin-bottom: 1.875rem;
      margin-top: 0.1rem;

    }
    

    body #api a.custom-link {
      display: none;
      /* float: right; */
      width: 75%;
      /* position: relative; */
      text-align:right;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    }

    /**/
    .labelCheckbox {
      /*display: inline-block; inline-block;block;*/
      /*set this element to the left inside div rememberMe*/
      /* position: absolute; relative */
      /* display:none; */
      width: 50%;
      padding-left: 2.5rem;
      margin-bottom: 0rem;
      cursor: pointer;
      /* text-align: center; */
      /* align-items: center; vertical-align: middle; */
      /* box-sizing: border-box; */
      /* border-width: 0.065rem 0.065rem 0.065rem 0.065rem; */
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      font-size: 16px;
      font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    }

    /* Hide default checkbox */
      input[type=checkbox] {
      /* visibility: hidden; */ /*try to remove this so checkbox can be accessible*/
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }

    /* Create custom checkbox*/
    .spanCheckbox {
      position: absolute; 
      top: -0.3rem;
      left: 0;
      height: 1.875rem; 
      width: 1.875rem; 
      border-style: solid;
      border-width: thin;
      border-radius: 0.1875rem;
      border-color: rgb(118,118,118);/* #0000008A;*/
    }

    /* .spanCheckbox:checked {
      border-width: 0rem;
    } */

    /*Specify background color when hovering checkbox*/
    /* .labelCheckbox:hover input ~ .spanCheckbox {
      background-color: white;
      border-width: medium;
    } */

    /*Specify background color when active checkbox*/
    .labelCheckbox input:checked ~ .spanCheckbox {
      background-color: #6aa334;
      border-width:0rem;
      transition: .5s;
    }

    .labelCheckbox input:checked ~ .spanCheckbox:hover {
      background-color: #598a2c;
    }

    .labelCheckbox input:focus ~ .spanCheckbox {
      box-shadow: 0 0 0 0.25rem rgba(106, 163, 52, 0.35);
      outline: none;
    }

    .spanCheckbox:hover {
      border-width: 0.125rem;
      border-color: #000;
    }



    /*green border when focus on custom checkbox*/
    .labelCheckbox input ~ .spanCheckbox:focus {
      box-shadow: 0 0 0 0.25rem rgba(106, 163, 52, 0.35);
      /* outline:none; */
    }
    .spanCheckbox:focus {
      box-shadow: 0 0 0 0.25rem rgba(106, 163, 52, 0.35);
      border-width: 0rem;
      /* border-color: none; */
    }

    

    /* Checkmark to be shown in checkbox
    /* It is not to be shown when not checked */
    .spanCheckbox:after {
      content: "";
      position: absolute;
      display: none;
    }

    /**/
    /* .spanCheckbox:before + .labelCheckbox:before {
      border: 0.125rem solid #000;
    } */

    /* Display checkmark when checked */
    .labelCheckbox input:checked ~ .spanCheckbox:after {
      display: block;
    }

    /* Styling the checkmark using webkit */
    /* Rotated the rectangle by 45 degree and showing only two border to make it look like a tickmark */
    .labelCheckbox .spanCheckbox:after {
      left: 0.75rem;
      bottom: 0.625rem;
      width: 0.4375rem;
      height: 0.875rem;
      border: solid white;
      border-width: 0 0.155rem 0.155rem 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }




    /*To make vercode input field clickable by manipulating the floating label above
    This only applies to the custom vercode input field. The Azure injected input
    fields works as is */
    .vercode-label {
      pointer-events: none;
    }

    .validation {
     color: #DC2C2C;
     font-size: 14px;
     font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
     /* padding-top: 0.5rem; */
     /* margin-bottom:1.25rem; */
     padding-left: 3px;
    }
    

    #explanatoryMessage {
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      color: #949494;
      margin-top: 1rem;
      text-align: center;
      font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
     
    }

    #spanEmailText {
      color: #4A90E2;
    }

/*************PASSWORD VALIDATION************/
/* The message box is shown when the user clicks on the password field */
#message {
  display:block;
  color: #242424;
  position: relative;
  margin-top: 0.75rem;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0.2px;
  font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}

#message div {
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0.2px;
}

#message div.invalid::before {
  content: url('check-inactive-grey.png');
  width: 20px;
  display: inline-block;
  vertical-align: middle;
  height: 18px;
}

#message div.valid::before {
  content: url('check-ok-green.png');
  width: 20px;
  display: inline-block;
  vertical-align: middle;
  height: 18px;

}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: #49850A;
}

/* .valid:before {
  position: relative;
  left: -2.1875rem;
  content: "&#10004;";
} */

/* Add a red text color and an "x" icon when the requirements are wrong */
.invalid {
  color: #242424; /* #d0021b; */
}

/* .invalid:before {
  position: relative;
  left: -2.1875rem;
  content: "&#10006;";
} */
/********************************************/




/* EMAIL VERIFICATION UX */

#emailVerificationControl_but_change_claims {
  display: none;
}

#emailVerificationControl_but_send_new_code {
  color: #242424;
  border-color: #fff;
  background-color: #fff;
  text-decoration: underline;
  border: none;
  font-size: 16px;
  cursor: pointer;
  font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}

#emailVerificationControl_but_send_new_code:hover {
  text-decoration: none;
}


/* SLIDING BUTTON (MASKED AS <a>) FOR COMPANY LOGIN */
.divSlidingElement {
  position: relative;
  border-radius: 30px;
  width: 240px;
  height: 59px;
  background-color: #f0f0f0;
  /* display: none; */
  margin: auto;
}

.divSlidingElement.finland {
  width: 340px;
}

.divSlidingElement a {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 20px;
  outline: none;
  text-decoration: none;
}

#linkSlidingPrivate.active {
  font-weight: bold;
}

#linkSlidingPrivate {
  background-color: #fff;
  width: 120px;
  height: 50px;
  border-radius: 30px;
  position: absolute;
  box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2);
  cursor: default;
  margin-top: 4px;
  margin-left: 4px;
} 

#linkSlidingPrivate.finland {
  width: 170px;
}

#linkSlidingPrivate .spanSlidingPrivate.finland {
  padding: 10px 25px 13px 8px;
}

#linkSlidingCompany .spanSlidingCompany.finland {
  left: 165px;
}

#linkSlidingPrivate span {
  color: black;
  position: relative;
  padding: 10px 25px 13px 18px;
  margin: 0 0 0 20px;
  display: inline-block;
}

#linkSlidingCompany {
  border-radius: 30px;
}
  
#linkSlidingCompany span {
  position: relative;
  padding: 15px 30px 14px 22px;
  margin: 0 0 0 10px;
  display: inline-block;
  left: 115px;
  font-weight: bold;
  color: #727272;
}
 
/* Add styling for the div with loader class: */
.loader {
  border: 16px solid #e5e7eb;
  border: 5px solid #e5e7eb;
  border-radius: 50%;
  border-top: 16px solid #4b5563;
  border-top: 5px solid #4b5563;
  width: 120px;
  height: 120px;
  width: 2rem;
  height: 2rem;
  -webkit-animation: spin 1s linear infinite; /* Safari */
  animation: spin 1s linear infinite;
  margin: auto;

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

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

/* END loader styling */


/* Eye icon password input */

#divPassword {
  position: relative;
}

.password-eye-open {

  background-image: url("eye-open.png");

}

.password-eye-closed {
  
  background-image: url("eye-closed.png");

}

#password-toggle-icon {
  position: absolute;
  top: 2.2rem;
  right: 0px;
  cursor: pointer;
  z-index: 3;
}

#password-eye {
  font-size: 18px;
  line-height: 1;
  color: transparent;
  transition: color 0.3s ease-in-out;
  margin-bottom: 20px;
  padding-left: 30px;
  position: relative;
  z-index: 5;
}

.password-eye:hover {
  color: #000;
}

/*Set password at signup and password reset*/
#password-create-toggle-icon {
  position: absolute;
  top: 2.0rem;
  right: 0px;
  cursor: pointer;
  z-index: 3;
}
#password-create-eye {
  font-size: 18px;
  line-height: 1;
  color: transparent;
  transition: color 0.3s ease-in-out;
  margin-bottom: 20px;
  padding-left: 30px;
  position: relative;
  z-index: 5;
}
/*END set password at signup and password reset*/

/* END eye icon password input*/




/* Checkbox multi-select address update prompt */
li.CheckboxMultiSelect.checkboxUpdateAddressFromExternalProvider_li fieldset {
  border: none;
}

#checkboxUpdateAddressFromExternalProvider_label {
  display: none;
}

/* Do not show the "No thanks to update address" */
label#False_option {
  display: none;
}

label#True_option {
  margin-left: 40px;
}

input#checkboxUpdateAddressFromExternalProvider_True {
  
  /* Hiding native checkbox input*/
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #6aa334;
  /* Not removed via appearance */
  margin: 0;
  /* End of Hiding native checkbox input */

  opacity: 1;
  height: 1.875rem; 
  width: 1.875rem; 
  border-style: solid;
  border-width: thin;
  border-radius: 0.1875rem;
  border-color: rgb(118,118,118);

  /* Custom unchecked checkbox */
  font: inherit;
  color: #fff; /* currentColor;*/
  /* width: 1.15em;
  height: 1.15em; */
  /* border: 0.15em solid white;
  border-radius: 0.15em; */
  transform: translateY(-0.075em);
  /* End of Custom unchecked checkbox */
  
  /* To prepare for pseudo elements */
  display: grid;
  place-content: center;
  /* End of To prepare for pseudo elements */

}

input#checkboxUpdateAddressFromExternalProvider_True::before {
  content: "";
  width: 40px;
  height: 40px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  /* box-shadow: inset 1em 1em rgba(106, 163, 52, 0.35); */

  /* Creating the checkmark shape */
  transform-origin: bottom left;
  clip-path: polygon(45% 59%, 64% 39%, 70% 44%, 45% 69%, 31% 59%, 38% 53%);
  /* End of Creating the checkmark shape */
}

input#checkboxUpdateAddressFromExternalProvider_True:checked::before {
  transform: scale(1);
  background-color: #fff;
  margin-left: -20px;
}

input#checkboxUpdateAddressFromExternalProvider_True:not(:checked) {
  background-color: #fff;
}


input#checkboxUpdateAddressFromExternalProvider_True:focus {
  outline: max(2px, 0.15em) solid #6aa334;
  outline-offset: max(2px, 0.15em);
}

/* END checkbox multi-select prompt address update */

/* prompt address update text frame */

li.Paragraph.paragraphUpdateAddress_li {
  background-color: #EAF7FB;
  border-radius: 6px;
  text-align: center;
  width: 426px;
  font-weight: 600;
  font-size: 14px;
  padding: 20px 10px 20px 10px;
  position: relative;
  left: -40px;
  margin-bottom: 30px;
}

#paragraphUpdateAddress_label {
  display: none;
}

#paragraphUpdateAddress {
  font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}

/* END prompt address update text frame */

/* Checkbox multi-select customer club opt-in */

li.CheckboxMultiSelect.checkboxConsentCustomerClub_li fieldset {
  border: none;
}

#checkboxConsentCustomerClub_label {
  display: none;
}

/* Do not show the "No thanks to CC membership" */
label#False_option {
  display: none;
}

label#True_option {
  margin-left: 40px;
}

input#checkboxConsentCustomerClub_True {
  
  /* Hiding native checkbox input*/
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #6aa334;
  /* Not removed via appearance */
  margin: 0;
  /* End of Hiding native checkbox input */

  opacity: 1;
  height: 1.875rem; 
  width: 1.875rem; 
  border-style: solid;
  border-width: thin;
  border-radius: 0.1875rem;
  border-color: rgb(118,118,118);

  /* Custom unchecked checkbox */
  font: inherit;
  color: #fff; /* currentColor;*/
  /* width: 1.15em;
  height: 1.15em; */
  /* border: 0.15em solid white;
  border-radius: 0.15em; */
  transform: translateY(-0.075em);
  /* End of Custom unchecked checkbox */
  
  /* To prepare for pseudo elements */
  display: grid;
  place-content: center;
  /* End of To prepare for pseudo elements */

}

input#checkboxConsentCustomerClub_True::before {
  content: "";
  width: 40px;
  height: 40px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  /* box-shadow: inset 1em 1em rgba(106, 163, 52, 0.35); */

  /* Creating the checkmark shape */
  transform-origin: bottom left;
  clip-path: polygon(45% 59%, 64% 39%, 70% 44%, 45% 69%, 31% 59%, 38% 53%);
  /* End of Creating the checkmark shape */
}

input#checkboxConsentCustomerClub_True:checked::before {
  transform: scale(1);
  background-color: #fff;
  margin-left: -20px;
}

input#checkboxConsentCustomerClub_True:not(:checked) {
  background-color: #fff;
}


input#checkboxConsentCustomerClub_True:focus {
  outline: max(2px, 0.15em) solid #6aa334;
  outline-offset: max(2px, 0.15em);
}

/* END checkbox multi-select customer club opt-in */


/* Customer Club opt-in text frame */

li.Paragraph.paragraphCustomerClubOptInText_li {
  background-color: #EAF7FB;
  border-radius: 6px;
  text-align: center;
  width: 100%;
  font-weight: 600;
  font-size: 14px;
  padding: 20px 10px 20px 10px;
  position: relative;
  margin-bottom: 30px;
}

#paragraphCustomerClubOptInText_label {
  display: none;
}

#paragraphCustomerClubOptInText {
  font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}

/* END Customer Club opt-in text frame */

li.Paragraph.paragraphExistingCustomerDetails_li {
  background-color: #EAF7FB;
  border-radius: 6px;
  text-align: center;
  width: 100%;
  font-weight: 600;
  font-size: 14px;
  padding: 20px 10px 20px 10px;
  position: relative;
  margin-bottom: 30px;
}

#paragraphExistingCustomerDetails_label {
  display: none;
}

#paragraphExistingCustomerDetails {
  font-family: Open Sans,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}


/**/
img#img-checkmark-account-created {
  display: block;
  width: 50px;
  margin: auto;
  margin-top: 10px;
}

/* existing user details */

#divMobileNumber {
  margin-bottom: 15px;
}

#divReadonlyMobileNumber {
  margin-bottom: 15px;
}

#divGivenName {
  margin-bottom: 15px;
}

#divSurname {
  margin-bottom: 15px;
}

#divStreetAddress {
  margin-bottom: 15px;
}

#divPostalCode {
  margin-bottom: 15px;
}

#divCity {
  margin-bottom: 15px;
}

#divOldPassword {
  margin-bottom: 15px;
}

#divEmailToImpersonate {
  margin-bottom: 15px;
}

#divImpersonationTicketNumber {
  margin-bottom: 15px;
}

#emailToImpersonate_label {
  color: #333;
  font-weight: 400;
}

#impersonationTicketNumber_label {
  color: #333;
  font-weight: 400;
}

#impersonation_info {
  color: #333;
  font-weight: 400;
  font-size: 12px;
}

/* Adds grid display to the list container element (<ul>), to avoid the ipnut labels to be moved out of position if some validation input error triggers text to appear */
#inputlist_ul {
  display: grid;
}


#paragraphAccountCreatedOnly_label {
  display: block;
  text-align: center;
}

#userFeedback {
  font-family: Open Sans, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Oxygen, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  text-align: center;
}

#spanGoBackLink {
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
}




/* Modal FormerFacebookAccounts */

#buttonShowModalFormerFacebookAccount {
  margin: 0;
  width: 100%;
  height: 3.5rem;
  background-position: 3% center;
  background-size: 8%;
  font-size: 1.25rem;
  background-color: white;
  color: black;
  border: 2px solid #e0e0e0;
}

#buttonShowModalFormerFacebookAccount:hover {
  background-color: #e0e0e0;
}

#dialogFormerFacebookAccount {
  padding: 2rem;
  border-color: rgb(210,210,210);
  width: 384px;

}

#headerModalFormerFacebookAccount {
  margin-top: 0;
}

#pModalFormerFacebookAccount {
  font-family: Open Sans, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Oxygen, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

#divButtonShowModalFormerFacebookAccount {
  margin: 1rem;
  display: none;
}

#buttonModalFormerFacebookAccount {
  background-color:#6aa334;
  border:none;
  margin-top:1.25rem;
  padding-top:0.7rem;
  padding-bottom:0.75rem;
  width:100%;
  height:3.5rem;
  border-radius:2.875rem;
  color:#fff;
  font-size:20px;
  font-weight:600;
  transition:background .5s ease;
}

#buttonModalFormerFacebookAccount:hover {
  background-color:#598a2c;
}

/* Hide Facebook button, since we are going to decomission it */
#FacebookExchange {
  display: none;
}


/* END Modal FormerFacebookAccounts */


/* NEW UX NEXT*/


/* END NEW UX NEXT*/