/*! 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.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* 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 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 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 {
  font-size: 75%;
  line-height: 0;
  position: relative;
  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 {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * 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 {
  border-style: none;
  padding: 0;
}

/**
 * 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: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 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 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-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.
 */

[type="search"]::-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 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

:root {
  /* COLORS */
  --color-primary-100: #4ecb71;
  --color-primary-90: #60d07f;

  --color-secondary-100: #292b38;
  --color-secondary-100-20: #292b3833;
  --color-secondary-100-60: #292b3860;
  --color-secondary-90: #3e404c;
  --color-secondary-80: #545560;
  --color-secondary-70: #696b74;
  --color-secondary-60: #7f8088;
  --color-secondary-50: #94959c;
  --color-secondary-40: #a9aaaf;
  --color-secondary-30: #c8c8ca;
  --color-secondary-20: #d4d5d7;
  --color-secondary-10: #eaeaeb;
  --color-secondary-10-80a: #eaeaeb80;

  --color-supporting-dark-red: #bb2622;
  --color-supporting-dark-red-20: #bb262233;
  --color-supporting-red: #ef0303;

  --color-orange-bg: #eed0bc;
  --color-orange-light: #f38331;
  --color-orange-dark: #c66320;
  --color-orange-dark-20: #c6632033;

  --color-green-bg: #eef6f7;
  --color-green-bg-dark: #cee6e8;
  --color-green-light: #42aab4;
  --color-green-light-20: #42aab433;
  --color-green-mid: #0a808b;
  --color-green-dark: #004d57;  
  --color-green-darker: #153C48;
  --color-green-dark-1a: #004d571a;

  --color-blue: #19abde;
  --color-blue-20: #19abde20;

  --color-purple: #af4bcf;
  --color-purple-20: #af4bcf20;

  --color-pink-dark: #6f1349;
  --color-pink-dark-20: #6f134933;
  --color-pink-mid: #dc4f99;
  --color-pink-mid-20: #dc4f9933;

  --color-white: #ffffff;
  --color-off-white: #f8f8f8;
  --color-magnolia: #efefef;

  --color-font: #292B38;
  --color-font-dark: #0D1B18;

  --color-accent-two-bg: #FEF3EC;
  --color-accent-two-dark: #C66320;

  /* TYPOGRAPHY */

  --font-size-xxs: 0.5rem; /* 8px */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-s: 0.875rem; /* 14px */
  --font-size-m: 1rem; /* 16px */
  --font-size-l: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-xxl: 1.5rem; /* 24px */
  --font-size-xxxl: 2rem; /* 32px */
  --font-size-4xl: 2.5rem; /* 40px */
  --font-size-5xl: 3rem; /* 48px */
  --font-size-6xl: 3.5rem; /* 56px */
  --font-size-7xl: 4rem; /* 64px */


  /* LAYOUT */
  --open-nav-size: 230px;
  --closed-nav-size: 74px;
}

/* Rails generated class name */

.field_with_errors input {
  border: 1px solid var(--color-supporting-red);
}

.field_with_errors label {
  color: var(--color-supporting-red);
}

.oauth__actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 50px;
}

.login__wrapper {
  height: 100%;
  width: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 60px;
  min-width: 420px;
}

.login__container {
  display: flex;
  flex-direction: column;
}

.login__title {
  justify-self: start;
  align-content: start;
}

.login__title h1 {
  font-size: 36px;
  font-weight: 700;
  font-family: 'Manrope';
  box-sizing: border-box;
}

.login__description p {
  margin: 0;
}

.login__form {
  width: 100%;
  margin-top: 20px;
}

.login__form input {
  width: 100%;
}

.login__links {
  display: grid;
  justify-content: end;
  font-size: 12px;
}

.login__actions {
  margin-top: 50px;
  display: grid;
  justify-content: end;
}

.login__errors li {
  color: var(--color-supporting-dark-red);
}

@media (max-width: 576px) {
  .login__wrapper {
    border-radius: 10px 10px 0 0;
    position: absolute;
    bottom:0;
    left: 0;
    right:0;
    height: 76%;
    min-width: 100% !important;
    padding: 32px;
    background-color: white;
  }

  .login__title h1 {
    font-size: 16px;
  }

  .login__actions {
    display: block;
  }
  
}

.form__field {
  margin-bottom: 16px;
  position: relative;
}

.form__field label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  display: block;
  margin-bottom: 12px;
  text-transform: inherit;
  color: var(--color-secondary-100);
}

.form__audit-label {
  position: absolute;
  right: 0;
  top: -6px;
  color: black;
}

.form__tagbox-label {
  margin-bottom: 0;
}

.form__field__help-text {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 400;
  margin-top: 20px;
  margin-bottom: 12px;
  color: var(--color-green-dark);
}

.form__field input[type="text"],
.form__field input[type="password"],
.form__field input[type="date"],
.form__field input[type="email"],
.form__field input[type="tel"],
.form__field input[type="number"],
.form__field input[type="time"],
.form__field select,
.form__field textarea {
  font-size: var(--font-size-xs);
  font-weight: 400;
  width: 100%;
  height: 40px;
  padding: 0 20px;
  color: var(--color-secondary-100);
  border: 1px solid var(--color-secondary-100-60);
  border-radius: 6px;
  outline: 0;
  background: var(--color-white);
}

.form__field input[type="text"]:focus,
.form__field input[type="password"]:focus,
.form__field input[type="date"]:focus,
.form__field input[type="email"]:focus,
.form__field input[type="tel"]:focus,
.form__field input[type="number"]:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: 1px solid var(--color-green-light);
  box-shadow: 0px 0px 0px 4px var(--color-green-light-20);
}

.form__field select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 1em;
  padding-right: 40px;
  cursor: pointer;
}

.form__field input[type="text"]:-moz-read-only, .form__field input[type="date"]:-moz-read-only, .form__field input[type="email"]:-moz-read-only, .form__field input[type="tel"]:-moz-read-only, .form__field input[type="number"]:-moz-read-only, .form__field input[type="time"]:-moz-read-only, .form__field textarea:-moz-read-only {
  color: var(--color-secondary-40);
  background: var(--color-magnolia);
}

.form__field input[type="text"]:read-only,
.form__field input[type="date"]:read-only,
.form__field input[type="email"]:read-only,
.form__field input[type="tel"]:read-only,
.form__field input[type="number"]:read-only,
.form__field input[type="time"]:read-only,
.form__field textarea:read-only {
  color: var(--color-secondary-40);
  background: var(--color-magnolia);
}

.form__field textarea {
  height: 148px;
  line-height: normal;
  padding: 12px 20px;
}

.form__field--small-textarea > textarea {
  height: 43px;
}

.form__field input[type="checkbox"],
.form__field input[type="radio"] {
  display: block;
  width: 26px;
  height: 26px;
  margin-right: 16px;
}

.form__field input[type="checkbox"] + label,
.form__field input[type="radio"] + label {
  font-weight: 400;
  margin-bottom: 0;
}

.form__field .field_with_errors + label {
  color: var(--color-supporting-dark-red);
  font-weight: 400;
  margin-bottom: 0;
}

.form__field input[type="checkbox"]:checked + label,
.form__field input[type="radio"]:checked + label {
  font-weight: 600;
}

.form__field input::-moz-placeholder, .form__field select::-moz-placeholder, .form__field textarea::-moz-placeholder {
  color: var(--color-secondary-50);
  font-weight: 400;
}

.form__field input::placeholder,
.form__field select::placeholder,
.form__field textarea::placeholder {
  color: var(--color-secondary-50);
  font-weight: 400;
}

.form__field--inline {
  display: flex;
  align-items: center;
}

.form__field--inline > input {
  flex-shrink: 0;
}

.form__field--inline label {
  margin-bottom: 0;
}

.form__field--required > label:after {
  content: " *";
  color: var(--color-supporting-dark-red);
}

.form__row {
  display: flex;
  flex-direction: row;
  margin-bottom: 16px;
  gap: 25px;
}

.form__row-actions {
  align-content: center;
  margin-top: 20px;
}

.form__list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-bottom: 16px;
}

.form__column {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.form__list_field {
  display: flex;
  flex-direction: row;
  gap: 25px;
}

.form__list_checkbox {
  margin-left: 50px;
}

.form__row:last-child {
  margin-bottom: 0;
}

.form__row--include-margin:last-child {
  margin-bottom: 16px;
}

.form__row > .form__field {
  flex: 1;
  margin-bottom: 0;
}

.form__grid {
  position: relative;
  margin-bottom: 16px;
}

.form__grid--fullwidth {
  width: 100%;
}

.form__grid:last-child {
  margin-bottom: 0;
}

.form__grid label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  display: block;
  margin-bottom: 12px;
  text-transform: inherit;
  color: var(--color-secondary-100);
}

.form__grid > .form__label-normalized {
  text-transform: none;
}

.form__grid > .form__label--orange {
  color: var(--color-orange-dark);
  display: flex;
  align-items: center;
  margin-bottom: 0px;
}

.form__grid > .form__label--orange--small {
  font-weight: 400;
  margin-bottom: 12px;
}

.form__label--orange > svg {
  padding-bottom: 3px;
}

.form__grid-fields {
  display: grid;
  gap: 25px;
  grid-template-columns: 1fr 1fr 1fr;
}

.form__grid-fields.wide {
  grid-template-columns: repeat(5, 1fr);
}

.form__grid-fields.small {
  grid-template-columns: 1fr 1fr;
}

.form__grid-fields.four {
  grid-template-columns: repeat(4, 1fr);
}

.form__grid-fields > .form__field {
  margin-bottom: 0;
}

*:not(.form__field-wrapper) > .form__field:last-child {
  margin-bottom: 0;
}

.form__suggestions {
  margin-bottom: 48px;
}

.form__suggestions > .form__field {
  margin-bottom: 0;
}

.form__suggestions-list {
  position: relative;
}

.form__suggestions-list--hidden {
  display: none;
}

.form__suggestions-list ul {
  font-size: var(--font-size-xs);
  font-weight: 400;
  position: absolute;
  top: -1px;
  display: block;
  overflow-y: scroll;
  width: 100%;
  max-height: 240px; /* limit to 6 items */
  margin: 0;
  padding: 0;
  color: var(--color-secondary-100);
  border: 1px solid var(--color-secondary-100);
  border-top: none;
  background: var(--color-white);
  z-index: 1;
}

.form__suggestions-list li {
  list-style: none;
}

.form__suggestions-list a {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  text-decoration: none;
  color: var(--color-secondary-100);
}

.form__suggestions-list a:hover {
  background-color: var(--color-secondary-10-80a);
}

.form__phone-number-field {
  display: flex;
  flex-direction: row;
  gap: 25px;
}

.form__phone-number-field input {
  flex: 1;
  margin-bottom: 0;
}

.form__phone-number-field > select {
  width: 25%;
  flex-shrink: 0;
}

.form__toggle-container {
  margin: 16px 0;
}

.form__toggle-container:last-child {
  margin-bottom: 0;
}

.form__toggle-container > .form__grid {
  /* margin-bottom: 0; */
}

.form__toggle-container > .form__field:last-child {
  margin-top: 16px;
}

.form__errors h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
}

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

.form__errors li {
  font-size: 14px;
  font-weight: 400;
  margin: 10px 0;
  color: var(--color-secondary-100);
}

.form__errors--nested ul {
  padding: revert;
}

.form__errors li:last-child {
  margin-bottom: 0;
}

.form__label--required:after {
  content: " *";
  color: var(--color-supporting-dark-red);
}

.form__field--readonly label,
.form__field--readonly select,
.form__field--readonly textarea,
.form__field--readonly input {
  color: var(--color-secondary-40);
}

.form__actions-bottom {
  display: flex;
  justify-content: flex-end;
  background: var(--color-white);
  box-shadow: 0px -2px 2px 0px var(--color-green-dark-1a);
  left: 250px;
  position: fixed;
  bottom: 0;
  width: calc(100% - 250px);
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 20px;
}

.form__section {
  margin-bottom: 100px;
}

.form__nested {
  margin-bottom: 16px;
}

.form__flex {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form__padded {
  padding-bottom: 120px;
}

.form__currency-input-container {
  position: relative;
}

.form__currency-input-container input[type="number"] {
  padding: 0 20px 0 30px;
}

.form__currency-sign {
  position: absolute;
  font-size: var(--font-size-xs);
  top: 13px;
  left: 20px;
  background: transparent;
}

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

.form__logo-preview {
  margin-top: 25px;
  width: 240px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
}

.form__logo-placeholder {
  margin-top: 25px;
  width: 150px;
  height: 150px;
  border-radius: 10px;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-secondary-20);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--color-secondary-70);
}

.form__iframe {
  margin-top: 18px;
  border: none;
  height: 700px;
}

.form__descriptor {
  margin-top: 10px;
}

.form__description {
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  color: var(--color-secondary-70);
  margin: 0;
  margin-bottom: 12px;
}

.form__description > span {
  font-weight: 400;
}

.form__currency-input-container .field_with_errors~* input[type="number"] {
  padding: 0 20px 0 30px;
}

.form__field .field_with_errors {
  width: 100%;
}

.form__field .field_with_errors~* input[type="text"],
.form__field .field_with_errors~* input[type="date"],
.form__field .field_with_errors~* input[type="email"],
.form__field .field_with_errors~* input[type="tel"],
.form__field .field_with_errors~* input[type="number"],
.form__field .field_with_errors~* input[type="radio"],
.form__field .field_with_errors~* select,
.form__field .field_with_errors~* textarea,
.form__field .field_with_errors>select {
  border-color: var(--color-supporting-red);
}

.form__field .field_with_errors > input[type="checkbox"] {
  outline-style: auto;
  outline-color: var(--color-supporting-red);
}

.form__field--required>.field_with_errors>label:after {
  content: " *";
  color: var(--color-supporting-dark-red);
}

.form__field--inline>.field_with_errors {
  width: auto;
}

.form__field .field_with_errors label,
.form__grid .field_with_errors label {
  color: var(--color-supporting-dark-red);
}

.form__upload {
  display: flex;
  justify-content: flex-end;
}

.form__field span.form__field-info {
  font-size: var(--font-size-s);
  font-weight: 400;
  
}

.form__field span.form__field-info  a {
  cursor: pointer;
  color: var(--color-pink-dark);
}

.form__field span.form__field-info--pending a {
  color: var(--color-orange-dark);
  font-weight: 600;
}

@media (max-width: 576px) {
  .form__field input[type="text"],
    .form__field input[type="password"],
    .form__field input[type="date"],
    .form__field input[type="email"],
    .form__field input[type="tel"],
    .form__field input[type="number"],
    .form__field input[type="time"],
    .form__field select,
    .form__field textarea {
      font-size: var(--font-size-m);
    }

  .form__field label {
    font-size: var(--font-size-s);
  }
}

.button {
  font-size: var(--font-size-m);
  font-weight: bolder;
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 10px 25px;
  cursor: pointer;
  text-decoration: none;
  border: solid 2px;
  border-radius: 5px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.button--right {
  align-self: flex-end;
}

.button--small {
  font-size: 14px;
  height: auto;
}

.button--small > .button__icon {
  height: 16px;
  width: 16px;
}

.button--primary-light {
  color: white;
  background-color: var(--color-green-light);
  border-color: var(--color-green-light);
}

.button--primary-dark {
  color: white;
  background-color: var(--color-green-dark);
  border-color: var(--color-green-dark);
}

.button--primary-mid {
  color: white;
  background-color: var(--color-green-dark);
  border-color: var(--color-green-dark);
}

.button--primary-outline {
  color: var(--color-green-dark);
  background-color: white;
  border-color: var(--color-green-dark);
}

.button--secondary {
  background-color: white;
  border-color: var(--color-secondary-100);
  color: var(--color-secondary-100);
}

.button--secondary-light {
  background-color: var(--color-secondary-70);
  border-color: var(--color-secondary-70);
  color: white;
}

.button--secondary-bg {
  background-color: #0A808B;
  border-color: #0A808B;
  color: white;
}

.button--secondary.inverted {
  background-color: var(--color-secondary-100);
  border-color: var(--color-secondary-100);
  color: var(--color-off-white);
}

.button--dangerous {
  background-color: var(--color-supporting-dark-red);
  border-color: var(--color-supporting-dark-red);
  color: white;
}

.button--dangerous.inverted {
  color: var(--color-supporting-dark-red);
  background-color: white;
  border-color: var(--color-supporting-dark-red);
}

.button--purple {
  background-color: var(--color-pink-dark);
  border-color: var(--color-pink-dark);
  color: var(--color-off-white);
}

.button--purple.inverted {
  color: var(--color-pink-dark);
  border: solid 2px var(--color-pink-dark);
  background-color: white;
}

.button:disabled {
  background-color: var(--color-secondary-40);
  border-color: var(--color-secondary-40);
  color: white;
  cursor: not-allowed;
}

.button--disabled {
  background-color: var(--color-secondary-40);
  border-color: var(--color-secondary-40);
  color: white;
  cursor: not-allowed;
}

.button__icon {
  margin-left: 10px;
}

.button--warning {
  background-color: var(--color-orange-light);
  border-color: var(--color-orange-light);
  color: white;
}

.button--dark-warning {
  background-color: var(--color-orange-dark);
  border-color: var(--color-orange-dark);
  color: white;
}

.button--black {
  background-color: var(--color-secondary-100);
  border-color: var(--color-secondary-100);
  color: white;
}

.button--inline {
  height: auto;
  font-size: 14px;
}

.notification {
  z-index: 10000;
  display: flex;
  padding: 15px 25px;
  justify-content: flex-end;
  align-items: center;
  gap: 25px;
  background-color: white;
  box-shadow: 0px 2px 5px 0px rgba(0, 77, 87, 0.1);
  border-radius: 5px;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-secondary-100);
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translate(-50%, 50%);
}

.notification--stacked {
  bottom: 100px;
}

.notification--purple {
  background-color: var(--color-pink-dark);
  color: white;
  gap: 20px;
}

.notification--left {
  left: 300px;
}

.notification__container {
}

.notification--alert {
  border: 1px solid var(--color-supporting-dark-red);
}

.notification--notice {
  border: 1px solid var(--color-green-mid);
}

.notification__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.notification__message {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.notification__message--white {
  color: white;
  text-decoration: none;
  font-size: 20px;
  font-weight: 800px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
}

.notification__description {
  font-weight: 400;
  max-width: 350px;
}

.notification__icon--notice {
  color: var(--color-green-mid);
}

.notification__icon--alert {
  color: var(--color-supporting-dark-red);
}

.notification__icon--close {
  cursor: pointer;
  color: var(--color-secondary-50);
}

.notification__icon--close-white {
  cursor: pointer;
}

.notification__icon--link {
  width: 18px;
  height: 18px;
  position: fixed;
}

.notification__error-button {
  border: none;
  background: none;
  color: var(--color-supporting-dark-red);
  text-decoration: underline;
  cursor: pointer;
}

.notification__seperator {
  width: 1px;
  height: 35px;
  background-color: white;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.visibility-hidden {
  visibility: hidden !important;
}

.otp-input__container {
  display: grid;
  grid-template-columns: repeat(7, 43px);
  gap: 10px;
}

.otp-input__digit {
  padding: 0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0% !important;
  background-color: transparent !important;
  font-size: var(--font-size-xxl) !important;
  text-align: center;
  border-bottom: 2px solid #696B74 !important;
  outline: none !important;
  box-shadow: none !important;
}

.otp-input--filled {
  border-bottom: 3px solid #6F1349 !important;
}

.otp-input__container span {
  font-size: var(--font-size-xxl);
  text-align: center;
  align-content: center;
}

@media (max-width: 576px) {
.otp-input__container {
    display: grid;
    grid-template-columns: repeat(7, 39px);
    gap: 6px;
  }
}

html, body {
  height: 100%;
  font-family: "Manrope", sans-serif;
}

body {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url("https://manage-cdn.s3.eu-west-1.amazonaws.com/ningi_login_bg.webp");
  background-size: cover;
}

@media (max-width: 576px) {
  body {
    background-size: 400px;
  }
}