:root {
  --color-black: #000;
  --color-white: #fff;
  --color-gray-50: #f7f7f8;
  --color-gray-100: #f1f2f4;
  --color-gray-200: #e0e3e6;
  --color-gray-300: #c9cdd2;
  --color-gray-400: #94979e;
  --color-gray-500: #61646b;
  --color-gray-600: #45484f;
  --color-gray-700: #272a31;
  --color-gray-800: #1b1e25;
  --color-gray-900: #0d1017;
  --color-gray-950: #03060d;
  --color-primary-50: #eff8fe;
  --color-primary-100: #dff1fd;
  --color-primary-200: #b9e5fc;
  --color-primary-300: #7dd2fb;
  --color-primary-400: #38bcf7;
  --color-primary-500: #2f3b41;
  --color-primary-600: #0283c5;
  --color-primary-700: #0368a0;
  --color-primary-800: #075884;
  --color-primary-900: #0c496c;
  --color-primary-950: #023f62;
  --color-primary-yellow: #fac200;
  --color-manorga-200: #99adb7;
  --color-manorga-300: #6b8896;
  --color-manorga-400: #4f646e;
  --color-manorga-500: #2f3b41;
  --color-manorga-600: #1e282e;
  --color-error-50: #fef1f1;
  --color-error-100: #ffe5e3;
  --color-error-200: #ffcaca;
  --color-error-300: #fda1a1;
  --color-error-400: #f86f6e;
  --color-error-500: #eb4143;
  --color-error-600: #d92625;
  --color-error-700: #b51d1d;
  --color-error-800: #971a1b;
  --color-error-900: #7c1a1d;
  --color-error-950: #721013;
  --color-warning-50: #fef9ea;
  --color-warning-100: #fef2c7;
  --color-warning-200: #fee68a;
  --color-warning-300: #fdd14d;
  --color-warning-400: #fcb823;
  --color-warning-500: #f6970a;
  --color-warning-600: #db7005;
  --color-warning-700: #b54d09;
  --color-warning-800: #933c0e;
  --color-warning-900: #79320e;
  --color-warning-950: #6f2804;
  --color-success-50: #effcf2;
  --color-success-100: #d8f9e1;
  --color-success-200: #acf0c0;
  --color-success-300: #7be79c;
  --color-success-400: #40d86e;
  --color-success-500: #26bf56;
  --color-success-600: #25a244;
  --color-success-700: #077f2e;
  --color-success-800: #00601a;
  --color-success-900: #10451d;
  --color-success-950: #063b13;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #E0E3E6;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
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 {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #94979E;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #94979E;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.-left-20 {
  left: -5rem;
}

.bottom-0 {
  bottom: 0px;
}

.left-0 {
  left: 0px;
}

.left-4 {
  left: 1rem;
}

.left-8 {
  left: 2rem;
}

.right-0 {
  right: 0px;
}

.top-16 {
  top: 4rem;
}

.z-50 {
  z-index: 50;
}

.order-1 {
  order: 1;
}

.m-0 {
  margin: 0px;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-4 {
  margin-left: 1rem;
}

.mt-20 {
  margin-top: 5rem;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.hidden {
  display: none;
}

.h-10 {
  height: 2.5rem;
}

.h-20 {
  height: 5rem;
}

.min-h-96 {
  min-height: 24rem;
}

.min-h-svh {
  min-height: 100svh;
}

.w-10 {
  width: 2.5rem;
}

.w-full {
  width: 100%;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-xs {
  max-width: 20rem;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.flex-col {
  flex-direction: column;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.rounded-full {
  border-radius: 9999px;
}

.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-yellow {
  --tw-border-opacity: 1;
  border-color: rgb(250 194 0 / var(--tw-border-opacity));
}

.bg-primary-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(47 59 65 / var(--tw-bg-opacity));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.p-10 {
  padding: 2.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-28 {
  padding-top: 7rem;
}

.text-center {
  text-align: center;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.font-medium {
  font-weight: 500;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

body {
  font-family: 'Poppins', sans-serif;
  color: #2F3B41;
  font-weight: 500;
}

#api {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 550px;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  position: relative;
}

#api > form {
  max-width: 375px;
  width: 100%;
}

#api > .heading {
  order: 1;
  width: 100%;
}

#api > .intro {
  order: 1;
}

#api > .buttons {
  order: 0;
  justify-content: start;
  align-self: flex-start;
}

#api > #attributeVerification,
#api > #localAccountForm {
  order: 3;
}

#api > .divider {
  display: none;
}

.heading h1 {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 30px;
  position: relative;
  line-height: 38px;
}

.heading h1[role="heading"] {
  color: var(--color-primary-yellow);
  padding-bottom: 20px;
  margin-bottom: 10px;
}

.heading h1[role="heading"]:after {
  content: '';
  width: 24px;
  height: 1px;
  background-color: var(--color-primary-yellow);
  position: absolute;
  bottom: 5px;
  left: 0;
}

.intro h2 {
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.entry {
  position: relative;
}

.entry .entry-item #forgotPassword{
  position: absolute;
  bottom: 68px;
  line-height: 16px;
  font-size: 12px;
  right: 0;
  border-bottom: 1px solid var(--color-gray-300);
}

.entry-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}

.entry-item label {
  margin-bottom: 0.3rem;
  display: block;
}

input[type='email'],
input[type='password'],
input[type='text'] {
  border: 1px solid var(--color-gray-300);
  padding: 0.5rem;
  border-radius: 1.25rem;
  width: 100%;
  height: 2.5rem;
  margin-bottom: 0.3rem;
  padding-left: 2.5rem;
  width: 375px;
  max-width: 100%;
  order: 0;
}

input[type='email'], input[type='email']:-internal-autofill-selected {
  background-image: url("data:image/svg+xml,%3Csvg width='19' height='15' viewBox='0 0 19 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.331787 2.83329C0.331787 1.26756 1.60106 -0.00170898 3.16679 -0.00170898H15.8335C17.3992 -0.00170898 18.6685 1.26756 18.6685 2.83329V3.33329V12.1666C18.6685 13.7324 17.3992 15.0016 15.8335 15.0016H3.16679C1.60106 15.0016 0.331787 13.7324 0.331787 12.1666V3.33329V2.83329ZM3.16679 1.66829C2.52338 1.66829 2.00179 2.18988 2.00179 2.83329V2.89854L8.83204 7.67972C9.23317 7.96051 9.76707 7.96051 10.1682 7.67972L16.9985 2.89854V2.83329C16.9985 2.18988 16.4769 1.66829 15.8335 1.66829H3.16679ZM16.9985 4.93704L11.1259 9.04784C10.1497 9.73114 8.8505 9.73114 7.87435 9.04784L2.00179 4.93704V12.1666C2.00179 12.81 2.52338 13.3316 3.16679 13.3316H15.8335C16.4769 13.3316 16.9985 12.81 16.9985 12.1666V4.93704Z' fill='%2394949E'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-size: 18px 15px;
  background-position: 0.8rem center;
}

input[type='password'], input[type='password']:-internal-autofill-selected {
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='19' viewBox='0 0 17 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.50004 2.00179C6.66001 2.00179 5.16837 3.49343 5.16837 5.33345V6.99845H11.8317V5.33345C11.8317 3.49343 10.3401 2.00179 8.50004 2.00179ZM13.5017 6.99845V5.33345C13.5017 2.57111 11.2624 0.331787 8.50004 0.331787C5.73769 0.331787 3.49837 2.57111 3.49837 5.33345V6.99845H3.00004C1.43431 6.99845 0.165039 8.26773 0.165039 9.83345V15.8335C0.165039 17.3992 1.43431 18.6685 3.00004 18.6685H14C15.5658 18.6685 16.835 17.3992 16.835 15.8335V9.83345C16.835 8.26773 15.5658 6.99845 14 6.99845H13.5017ZM12.6667 8.66845H4.33337H3.00004C2.35663 8.66845 1.83504 9.19004 1.83504 9.83345V15.8335C1.83504 16.4769 2.35663 16.9985 3.00004 16.9985H14C14.6435 16.9985 15.165 16.4769 15.165 15.8335V9.83345C15.165 9.19004 14.6435 8.66845 14 8.66845H12.6667ZM8.50004 11.1651C8.9612 11.1651 9.33504 11.539 9.33504 12.0001V13.6668C9.33504 14.1279 8.9612 14.5018 8.50004 14.5018C8.03888 14.5018 7.66504 14.1279 7.66504 13.6668V12.0001C7.66504 11.539 8.03888 11.1651 8.50004 11.1651Z' fill='%2394949E'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-size: 16px 18px;
  background-position: 0.8rem center;
}

.error[aria-hidden="true"] {
  display: none;
}

.error.itemLevel:not(:empty), #emailVerificationControl_info_message:not(:empty),#emailVerificationControl_error_message:not(:empty),.error.pageLevel:not(:empty) {
  font-size: 0.875rem;
  position: relative;
  margin-bottom: 0.5rem;
  order: 1;
  background: var(--color-error-50);
  padding: 0.8rem 1.5rem 0.8rem 2rem;
  border-radius: 8px;
}

#emailVerificationControl_but_verify_code {
  background-color: var(--color-primary-yellow);
  color: var(--color-primary-500)
}

#emailVerificationControl_but_change_claims {
  display: none !important;
}

#emailVerificationControl_info_message {
  color: var(--color-warning-400);
}

/* h1[textContent="Bienvenue"] {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
} */

.error.itemLevel:not(:empty)::before, .error.pageLevel:not(:empty)::before, #emailVerificationControl_error_message::before {
  content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.80424 3.46564C8.74779 1.70865 11.2678 1.70956 12.2101 3.46723L18.0285 14.3205C18.9213 15.9859 17.7148 18.0017 15.8251 18.0017H4.17828C2.28782 18.0017 1.08137 15.9844 1.97579 14.3189L7.80424 3.46564ZM11.3288 3.93971C10.7634 2.88511 9.25137 2.88457 8.68524 3.93876L2.85678 14.792C2.32014 15.7913 3.04401 17.0017 4.17828 17.0017H15.8251C16.9589 17.0017 17.6828 15.7922 17.1471 14.7929L11.3288 3.93971ZM9.99993 7.00166C10.2761 7.00166 10.4999 7.22552 10.4999 7.50166V10.835C10.4999 11.1111 10.2761 11.335 9.99993 11.335C9.72379 11.335 9.49993 11.1111 9.49993 10.835V7.50166C9.49993 7.22552 9.72379 7.00166 9.99993 7.00166ZM9.49993 14.1683C9.49993 13.8922 9.72379 13.6683 9.99993 13.6683H10.0083C10.2844 13.6683 10.5083 13.8922 10.5083 14.1683C10.5083 14.4445 10.2844 14.6683 10.0083 14.6683H9.99993C9.72379 14.6683 9.49993 14.4445 9.49993 14.1683Z' fill='%23933C0E'/%3E%3C/svg%3E");
  position: absolute;
  left: 8px;
  top: 0.9rem;
}

.Password .attrEntry {
  position: relative;
}

.Password .attrEntry>span.required {
  display: none;
}

.customPasswordCheckError {
  display: flex;
  color: var(--color-gray-500);
  font-size: 14px;
}

.customPasswordCheckError.onError {
  color: var(--color-error-700) !important;
}

.customPasswordCheckError>div>svg {
  fill: var(--color-gray-500);
}

.customPasswordCheckError.onError > div > svg {
  fill: var(--color-error-700);
}

.customPasswordCheckError ul li {
  list-style-type: none;
  position: relative;
  padding-left: 1.5rem;
}

.customPasswordCheckError ul li::before {
  content: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.37258 11.3724C5.16597 11.579 4.83402 11.579 4.62742 11.3724L1.62742 8.37242C1.42082 8.16582 1.42082 7.83387 1.62742 7.62727C1.83402 7.42067 2.16597 7.42067 2.37258 7.62727L5 10.2547L12.6274 2.62727C12.834 2.42067 13.166 2.42067 13.3726 2.62727C13.5792 2.83387 13.5792 3.16582 13.3726 3.37242L5.37258 11.3724Z' fill='%23272A31'/%3E%3C/svg%3E");
  position: absolute;
  left: 0;
  top: 0.2rem;
}

.customPasswordCheckError.onError ul li::before {
  content: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.37258 11.3724C5.16597 11.579 4.83402 11.579 4.62742 11.3724L1.62742 8.37242C1.42082 8.16582 1.42082 7.83387 1.62742 7.62727C1.83402 7.42067 2.16597 7.42067 2.37258 7.62727L5 10.2547L12.6274 2.62727C12.834 2.42067 13.166 2.42067 13.3726 2.62727C13.5792 2.83387 13.5792 3.16582 13.3726 3.37242L5.37258 11.3724Z' fill='%23B51D1D'/%3E%3C/svg%3E");
}

.forgot-password {
  order: 2;
  margin-top: 1rem;
}

.forgot-password a {
  border-bottom: 1px solid var(--color-gray-300);
}

.rememberMe {
  margin-bottom: 1rem;
  line-height: 20px;
  max-width: 50%;
  display: flex;
}

.rememberMe input {
  width: 16px;
  height: 16px;
}

.rememberMe label {
  margin-left: 0.5rem;
}

.buttons,
.divider {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#emailVerificationControl {
  width: 100%;
}

#emailVerificationControl .buttons {
  margin-top: 1rem;
}

#continue[aria-disabled='true'] {
  display: none;
}

.attrEntry label.required::after {
  content: "*";
  color: var(--color-error-700);
}

.attrEntry input + span.required {
  display: none;
}

.verifyCode[aria-hidden="true"] + .divider {
  display: none;
}

button[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.3;
}

#next,
#continue,
#back,
main > div >#customCreateAccount,
.sendCode,
.verifyCode,
.sendNewCode,
.changeClaims {
  padding: 10px 20px;
  background-color: var(--color-primary-yellow);
  border-radius: 2.5rem;
  min-height: 2.5rem;
  margin-bottom: 0.5rem;
}

.verifyCode {
  margin-left: 5rem;
  margin-right: 5rem;
}

#cancel {
  display: none;
}

main > div > #customCreateAccount,
#back, 
.sendNewCode,
.changeClaims {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  display: inline-block;
}

#customCreateAccount {
  display: none ;
}

main > div > #customCreateAccount {
  display: inline-block ;
}

#back {
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='13' viewBox='0 0 15 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.25722 0.909605C6.93113 0.583517 6.40244 0.583517 6.07635 0.909605L1.07635 5.90961C0.91976 6.0662 0.831787 6.27858 0.831787 6.50004C0.831787 6.72149 0.91976 6.93388 1.07635 7.09047L6.07635 12.0905C6.40244 12.4166 6.93113 12.4166 7.25722 12.0905C7.58331 11.7644 7.58331 11.2357 7.25722 10.9096L3.68266 7.33504H13.3335C13.7946 7.33504 14.1685 6.9612 14.1685 6.50004C14.1685 6.03888 13.7946 5.66504 13.3335 5.66504H3.68266L7.25722 2.09047C7.58331 1.76439 7.58331 1.23569 7.25722 0.909605Z' fill='%2345484F'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 18px;
  background-position: 0.8rem center;
  padding-left: 2.5rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.sendCode,
.verifyCode {
  background-color: var(--color-primary-500);
  color: var(--color-white);
}

#continue {
  margin-top: 1rem;
  background-color: var(--color-primary-yellow);
}

.divider {
  align-items: center;
  margin-bottom: 1rem;
  text-transform: lowercase;
}

.divider h2 {
  padding: 0 1rem;
}

.divider:before,
.divider:after {
  content: '';
  height: 1px;
  flex-grow: 1;
  background-color: var(--color-gray-300);
}

.create,
.create p {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.attrEntry {
  display: flex;
  flex-wrap: wrap;
}

.attrEntry label {
  display: block;
  margin-bottom: 0.5rem;
}

.attrEntry input {
  max-width: 90%;
}

.attrEntry span.required {
  /* content: '*'; // cf MR-215 */
  color: var(--color-error-700);
}

#attributeList ul li .helpLink {
  display: none;
}

.EmailBox, .TextBox {
  margin-bottom: 0.5rem;
}

input[type='password'][aria-disabled='true'] + label {
  display: none;
}

@media (min-width: 768px) {
  .md\:left-auto {
    left: auto;
  }

  .md\:block {
    display: block;
  }

  .md\:pb-10 {
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .lg\:order-1 {
    order: 1;
  }

  .lg\:ml-0 {
    margin-left: 0px;
  }

  .lg\:min-h-10 {
    min-height: 2.5rem;
  }

  .lg\:w-1\/2 {
    width: 50%;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:justify-center {
    justify-content: center;
  }

  .lg\:p-10 {
    padding: 2.5rem;
  }

  .lg\:pt-16 {
    padding-top: 4rem;
  }
}

