body .elc-iam {
  /* customize iam/tokens */
  --color-primary-100: #efefef;
  --color-primary-300: #e2e1e1;
  --color-primary-400: #d4d4d4;
  --color-primary-500: #666666;
  --color-primary-600: #999999;
  --color-primary-900: var(--color-black);
  --color-secondary: #a3a3a3;
  --color-secondary-300: #3f3f3f;
  --color-error: #dd0000;
  --color-warning: #e66100;
  --color-green: #277e3e;
  --title-font: var(--font-body);
  --font-body--bold: var(--font-headline);
  --text-base: var(--text-lg);

  /* customize iam/roles */
  --bg-tab-hover: var(--color-secondary);
  --container-border-radius: 8px;
  --border-input: var(--color-primary-100);
  --border-current: var(--color-primary-100);
  --crossed-eye-bg: var(--color-primary-900);
  --button-hover-background-color: var(--color-secondary);

  --iam-alert-warning-color: #1a1a1a;
  --iam-alert-warning-bg: #fffaec;

  --iam-disclaimer-tooltip-border: var(--color-primary-250);
  --iam-disclaimer-tooltip-background: var(--color-primary-250);

  --error-container-bg: #fdf2f2;
  --error-container-border: #f8cccc;

  --color-splitter: var(--color-primary-300);
}

body .elc-iam .elc-button {
  --button-color: var(--color-white);
  --button-background-color: var(--color-black);
  --button-hover-color: var(--color-primary);
  --button-hover-background-color: var(--color-secondary);
  --button-active-background-color: var(--color-secondary);
}

body .elc-iam .elc-iam-sign-in-button,
body .elc-iam .elc-iam-submit-button {
  line-height: 1.25;
}

body .elc-iam .elc-iam-wrapper {
  background-color: var(--color-white);
  border-radius: var(--container-border-radius);
}

body .elc-iam-wrapper a:hover {
  color: var(--color-primary-500);
}

body .elc-iam .elc-iam-reviewPrivacyNotice-wrapper>div,
body .elc-iam .elc-iam-termsAndConditions-wrapper>div,
body .vulcan-iam .elc-iam-reviewPrivacyNotice-wrapper {
  margin-block-start: 10px;
}

body .elc-iam .elc-tabs__panel {
  padding-block-end: 0px;
}

body .elc-iam .elc-tabs__tab {
  height: 64px;
  padding: 20px;
  border-block-end: 1px solid var(--color-primary-400);
}

body .elc-iam .elc-tabs__tab.elc-tabs__tab--current {
  border-block-end: 1px solid var(--color-black);
}

body .elc-iam .elc-tabs__tab .elc-tabs__tab-text {
  line-height: 100%;
  font-weight: 700;
  font-family: var(--font-body--bold);
  font-size: var(--text-lg);
  color: var(--color-primary-500);
  text-transform: none;
}

body .elc-iam .elc-tabs__tab.elc-tabs__tab--current .elc-tabs__tab-text {
  color: var(--color-black);
}

body .elc-iam .elc-iam-title .elc-iam-title-text {
  font-size: var(--text-lg);
}

body .elc-iam .elc-input-field {
  --form-input-border-color: var(--color-secondary);
  color: var(--color-black);
}

body .elc-iam .elc-dropdown-arrow {
  inline-size: auto;
}

body .elc-iam .elc-dropdown-arrow-icon {
  margin-inline-start: 10px;
  margin-inline-end: 10px;
}

body .elc-iam .elc-input-field {
  font-family: var(--font-body);
  --form-input-font-size: 1rem;
  line-height: 1.5;
}

body .elc-iam .elc-checkbox-label,
body .elc-iam-terms-conditions,
body .elc-iam-terms-conditions a,
body .elc-iam .elc-iam-privacy-label,
body .elc-iam .elc-iam-privacy-hidden-text,
body .elc-iam .elc-iam-privacy-hidden-text a {
  color: var(--color-primary-500);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.33333;
}

body .elc-iam .elc-iam-privacy-hidden-text,
body .elc-iam .elc-iam-privacy-hidden-text a {
  color: var(--color-secondary-700);
}

body .elc-iam-terms-conditions a:hover,
body .elc-iam-terms-conditions a:focus,
body .elc-iam .elc-iam-privacy-label:hover,
body .elc-iam .elc-iam-privacy-hidden-text a:hover,
body .elc-iam .elc-iam-privacy-hidden-text a:focus {
  color: var(--color-black);
}

body .elc-iam .elc-dropdown {
  border-color: var(--color-primary-400);
  margin-inline-end: 10px;
}

body .elc-iam .elc-grid-column:last-child .elc-dropdown {
  margin-inline-end: 0;
}

body .elc-iam .elc-floating-label-string,
body .elc-iam .elc-floating-label-string span {
  padding: 0 1px;
  color: var(--color-black);
}

body .elc-iam .elc-floating-label-string span.elc-floating-label__required-wrapper {
  font-size: 0.875rem;
}

body .elc-iam .elc-iam-label {
  font-size: var(--text-base);
}

body .elc-iam .elc-iam-forgot-password-button {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: normal;
}

body .elc-iam .elc-iam-forgot-password-button:hover {
  color: var(--button-hover-background-color);
}

body .elc-iam .elc-iam-password-criteria-item-wrapper {
  color: var(--color-primary-500);
}

body .elc-iam .elc-iam-passwordCriteria-wrapper .elc-iam-password-criteria-item.matched {
  color: var(--color-secondary-700);
}

body .elc-iam .elc-iam-passwordCriteria-wrapper .elc-iam-password-criteria-item.matched::before {
  color: var(--color-password-strength-strong);
}

body .elc-iam .elc-checkbox-label {
  font-size: var(--text-sm);
}

.elc-iam .elc-dropdown-input-wrapper,
.elc-iam .elc-dropdown-wrapper {
  --form-input-border-color: var(--color-secondary);
}

body .iam-loyalty .elc-iam-section-loyaltySection-wrapper .elc-iam-loyaltyCallout-wrapper {
  align-items: center;
}

body .iam-loyalty .elc-iam-section-loyaltySection-wrapper .elc-checkbox-field p,
body .iam-loyalty .elc-iam-section-loyaltySection-wrapper .elc-checkbox-field p a {
  font-family: var(--font-body);
  color: var(--color-secondary-700);
}

body .iam-loyalty .elc-iam-section-loyaltySection-wrapper .elc-checkbox-field .elc-input-error p {
  color: var(--color-error);
  font-size: var(--text-xs);
  padding-block-start: 4px;
}

body .elc-iam .elc-iam-birthdayOptional-wrapper p {
  font-family: var(--font-headline);
  font-weight: 700;
  line-height: 175%;
  margin-block-end: 8px;
}

body .elc-iam .elc-dropdown-option,
body .elc-iam .elc-dropdown-readonly-input {
  font-size: var(--text-base);
}

body .elc-iam .elc-social-wrapper-divider-text {
  color: var(--color-secondary-900);
}

body .elc-iam-in-store .elc-social-wrapper-divider-text {
  color: var(--color-black);
}

body .elc-iam .elc-social-wrapper-message,
body .elc-iam .elc-social-wrapper-message a,
body .elc-iam .elc-iam-text-acceptPrivacyPolicyAndTnc,
body .elc-iam .elc-iam-text-acceptPrivacyPolicyAndTnc a {
  font-family: var(--font-body);
  color: var(--color-primary-500);
  font-size: var(--text-sm);
  font-weight: 400;
}

body .elc-iam .elc-iam-text-acceptPrivacyPolicyAndTnc {
  margin-block-start: 15px;
}

body .elc-iam .elc-iam-social-button-facebook {
  text-transform: none;
}

body .elc-iam-in-store .elc-iam-label {
  color: var(--color-black);
}

body .elc-iam-in-store .elc-checkbox-label {
  font-size: 14px;
}

body .elc-iam-in-store .elc-checkbox-field a {
  color: var(--color-primary-500);
}

body .elc-iam-in-store .elc-checkbox-field a:hover {
  color: var(--color-primary-600);
}

body .elc-iam-in-store .elc-dropdown-options-list {
  padding-inline-start: 0;
}

.elc-floating-label-input,
.elc-input-field,
.elc-dropdown,
.elc-textarea {
  --form-input-background-disabled: var(--input-disabled-background);
  --form-input-border-color-disabled: var(--input-disabled-border);
  --form-input-color-disabled: var(--input-disabled-color);
}

.elc-iam-alert.elc-iam-alert-warning {
  border: none;
}

.elc-iam-in-store .elc-iam-alert .elc-button,
.elc-iam-in-store .elc-iam-alert-title,
.elc-iam-in-store .elc-iam-alert-content {
  font-size: var(--text-base);
  font-weight: normal;
}

.elc-iam-alert.elc-iam-alert-info .elc-iam-alert-icon::after {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJDNi41IDIgMiA2LjUgMiAxMkMyIDE3LjUgNi41IDIyIDEyIDIyQzE3LjUgMjIgMjIgMTcuNSAyMiAxMkMyMiA2LjUgMTcuNSAyIDEyIDJaTTEyIDIwQzcuNiAyMCA0IDE2LjQgNCAxMkM0IDcuNiA3LjYgNCAxMiA0QzE2LjQgNCAyMCA3LjYgMjAgMTJDMjAgMTYuNCAxNi40IDIwIDEyIDIwWiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTEzIDEwSDExVjE4SDEzVjEwWiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTEzIDZIMTFWOEgxM1Y2WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==');
}

.elc-iam-alert.elc-iam-alert-warning .elc-iam-alert-icon::after {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5.99L19.53 19H4.47L12 5.99ZM12 2L1 21H23L12 2ZM13 16H11V18H13V16ZM13 10H11V14H13V10Z' fill='%23000000'/%3E%3C/svg%3E%0A");
}

body .vulcan-iam .elc-iam-wrapper .elc-tabs__list .elc-tabs__tab .elc-tabs__tab-text {
  color: #666666;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 400;
}

body .vulcan-iam .elc-iam-wrapper .elc-tabs__list .elc-tabs__tab.elc-tabs__tab--current .elc-tabs__tab-text {
  color: #1a1a1a;
  font-weight: 700;
  line-height: 1.3;
  padding-block-start: 3px;
}

body .vulcan-iam .elc-iam-wrapper .elc-tabs__list .elc-tabs__tab {
  border-block-end: 1px solid #666666;
  block-size: 53px;
  padding-block-start: 14px;
}

body .vulcan-iam .elc-iam-wrapper .elc-tabs__list .elc-tabs__tab.elc-tabs__tab--current {
  border-bottom: 3px solid #000000;
}

body .vulcan-iam .elc-iam-wrapper .elc-tabs__panel .elc-iam-forgot-password-button {
  color: #1a1a1a;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.3;
}

body .vulcan-iam .elc-iam-wrapper a {
  color: #1a1a1a;
}

body .vulcan-iam .elc-iam-wrapper a:hover {
  color: var(--color-black);
}

body .vulcan-iam .elc-iam-emailPromotions-wrapper {
  margin-block-start: -5px;
}

body .vulcan-iam .iam-loyalty .elc-iam-emailPromotions-wrapper {
  margin-block-start: 16px;
}

body .vulcan-iam .elc-iam-guest-checkout .elc-iam-emailPromotions-wrapper {
  margin-block-start: 19px;
}

body .vulcan-iam .elc-checkbox-label {
  color: #1a1a1a;
  font-size: 0.6875rem;
}

body .vulcan-iam .iam-loyalty .elc-iam-loyaltyCallout-wrapper::after {
  --iam-loyalty-color: #d4d4d4;
  bottom: -4px;
}

body .vulcan-iam .iam-loyalty .elc-iam-section-loyaltySection-wrapper {
  --iam-loyalty-background: #f5f5f5;
  padding-block-start: 16px;
  padding-block-end: 14px;
}

body .vulcan-iam .iam-loyalty .elc-iam-section-loyaltySection-wrapper .elc-iam-acceptLoyaltyTerms-wrapper .elc-checkbox {
  margin-block-start: 14px;
}

body .vulcan-iam .iam-loyalty .elc-iam-section-loyaltySection-wrapper .elc-iam-loyaltyCallout-wrapper p {
  --iam-title: #1a1a1a;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  text-transform: capitalize;
}

body .vulcan-iam .iam-loyalty .elc-iam-section-loyaltySection-wrapper .elc-iam-loyaltyCallout-wrapper {
  padding-block-end: 18px;
}

body .vulcan-iam .elc-iam-emailPromotions-wrapper .elc-checkbox {
  margin-top: 1px;
}

body .vulcan-iam .elc-iam-termsAndConditions-wrapper>div {
  margin-block-start: 8px;
}

body .vulcan-iam .iam-loyalty .elc-iam-termsAndConditions-wrapper>div {
  margin-block-start: 12px;
}

body .vulcan-iam .elc-iam-terms-conditions {
  color: #1a1a1a;
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
}

body .vulcan-iam .elc-iam-wrapper {
  padding: 8px 0 20px;
}

body .vulcan-iam .elc-tabs__panel {
  padding: 28px 16px 0;
}

body .vulcan-iam .elc-iam-sign-in-button,
body .vulcan-iam .elc-iam-submit-button {
  background: #212121;
  block-size: 45px;
  text-transform: unset;
}

body .vulcan-iam .elc-iam-sign-in-button {
  margin-block-start: 24px;
}

body .vulcan-iam .elc-iam-submit-button {
  margin-block-start: 19px;
}

.vulcan-iam .iam-loyalty .elc-iam-loyaltyCallout-wrapper::before {
  min-width: 63px;
  min-height: 46px;
  --brand-logo-loyalty: url("/tenant-web/brands/clinique/loyalty-logo.png");
}

@media (min-width: 1024px) {
  body {
    --color-body-minimal-bg: #fafafa;
  }

  body .vulcan-iam .elc-iam-wrapper {
    --container-border-radius: 0;
    border: unset;
  }

  body .vulcan-iam .elc-iam-wrapper {
    padding: 0;
    padding-block-end: 30px;
  }

  body .vulcan-iam .elc-tabs__panel {
    padding: 38px 0 0;
  }

  body .vulcan-iam .elc-iam-wrapper .elc-tabs__list .elc-tabs__tab {
    border-width: 1px;
    height: 55px;
    margin-block-start: 29px;
  }

  body .vulcan-iam .elc-tabs__tab {
    margin-block-start: 29px;
  }

  body .vulcan-iam .elc-iam-emailPromotions-wrapper {
    margin-block-start: -10px;
  }

  body .vulcan-iam .elc-form-field-wrapper.elc-iam-forgotPassword-wrapper {
    margin-block-start: -8px;
  }

  body .elc-iam .elc-iam-termsAndConditions-wrapper>div {
    margin-block-start: 11px;
  }

  body .vulcan-iam .elc-iam-guest-checkout .elc-iam-emailPromotions-wrapper {
    margin-block-start: 14px;
  }

  body .vulcan-iam .iam-loyalty .elc-iam-section-loyaltySection-wrapper {
    margin-block-start: -14px;
  }

  body .vulcan-iam .elc-iam-sign-in-button,
  body .vulcan-iam .elc-iam-submit-button {
    margin-block-start: 19px;
    block-size: 48px;
  }
}