/** Tailwind Preflight **/

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html,
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

:-moz-focusring {
  outline: auto;
}

progress {
  vertical-align: baseline;
}

summary {
  display: list-item;
}

ol,
ul,
menu {
  list-style: none;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
}

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

::file-selector-button {
  margin-inline-end: 4px;
}

::placeholder {
  opacity: 1;
}

@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

textarea {
  resize: vertical;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-date-and-time-value {
  min-height: 1lh;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

:-moz-ui-invalid {
  box-shadow: none;
}

button,
input:where([type="button"], [type="reset"], [type="submit"]),
::file-selector-button {
  appearance: button;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}

/** Variables **/

:root {
  /* Hues */
  --color-bright-pink: #ef5777;
  --color-pink: #f28080;
  --color-bright-red: #df002d;
  --color-red: #dc143c;
  --color-light-red: #ec5b55;
  --color-dark-orange: #ab4033;
  --color-orange: #fe5d26;
  --color-bright-yellow: #ffa801;
  --color-yellow: #ffdd59;
  --color-pale-yellow: #fff5b0;
  --color-dark-green: #388174;
  --color-bright-green: #05c46b;
  --color-green: #3fd690;
  --color-pale-green: #d5fff3;
  --color-bright-teal: #06e4e4;
  --color-light-teal: #93dfd1;
  --color-teal: #49c5b6;
  --color-pale-teal: #c7f9ff;
  --color-bright-blue: #0fbcf9;
  --color-pastel-blue: #ebf2fb;
  --color-soft-blue: #add9f4;
  --color-pale-blue: #79abda;
  --color-dark-blue: #3983dd;
  --color-blue: #1e90ff;
  --color-pale-lavender: #96f;
  --color-lavender: #7a55e6;
  --color-indigo: #5352ed;
  --color-bright-indigo: #3742fa;
  --color-dark-indigo: #333f90;
  --color-black-blue: #002c59;
  --color-cyan: #49c5b6;
  --color-blue-magenta: #495de5;

  /* Greys */
  --color-charcoal: #141414;
  --color-mostly-black: #222;
  --color-graphite: #3f3f37;
  --color-slate-gray: #3a3a3a;
  --color-smoke: #525252;
  --color-fossil: #636e72;
  --color-mud: #878787;
  --color-granite: #909090;
  --color-silver: #bfc0c0;
  --color-cloud: #d2dae2;
  --color-blanc: #e1e1e1;
  --color-iron: #e8e8e8;
  --color-athens: #f7f9fc;
  --color-sand: #fbf9f9;
  --color-ghost: #fafcfe;

  /* Third party brand colors */
  --color-facebook: #1877f2;
  --color-google: #4285f4;
  --color-twitter: #56acee;
  --color-linkedin: #0b66c2;
  --color-apple: #000;

  /* Base */
  --brand-border-color: var(--color-silver);
  --link-color: var(--color-slate-gray);
  --link-color-active: var(--color-mostly-black);
  --text-color: var(--color-mostly-black);
  --text-color-muted: var(--color-fossil);
  --color-background: #fafafa;

  /* Typography */
  --font-family-primary: "Neue Haas Grotesk Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-headline: "Neue Haas Grotesk Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;

  /* Inputs */
  --input-bg: #fff;
  --input-color: #000;
  --label-color: var(--text-color);
  --check-and-radio-color: var(--color-indigo);

  /* z-index */
  --z-index-loading-overlay: 15;
  --z-index-sidebar-overlay: 10;
  --z-index-modal-overlay: 9;
  --z-index-popovers: 9;
  --z-index-navbar: 8;
  --z-index-messenger: 7;
  --z-index-toolbars: 5;

  /* Shadow */
  --no-elevation-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
  --simple-hard-shadow: 0 6px 5px 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(0, 0, 0, 0);
  --simple-skewed-soft-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1), 0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(0, 0, 0, 0);
  --elevation-depth-0-shadow: 0 0 3px 0 rgba(63, 63, 55, 0.03),
    0 1px 1px -1px rgba(63, 63, 55, 0.04), 0 2px 1px 0 rgba(63, 63, 55, 0.12);
  --elevation-depth-1-shadow: 0 2px 2px 0 rgba(63, 63, 55, 0.03),
    0 3px 1px -2px rgba(63, 63, 55, 0.04), 0 1px 5px 0 rgba(63, 63, 55, 0.12);
  --elevation-depth-2-shadow: 0 4px 5px 0 rgba(63, 63, 55, 0.03),
    0 1px 10px 0 rgba(63, 63, 55, 0.04), 0 2px 4px -1px rgba(63, 63, 55, 0.12);
  --elevation-depth-3-shadow: 0 8px 17px 2px rgba(63, 63, 55, 0.03),
    0 3px 14px 2px rgba(63, 63, 55, 0.04), 0 5px 5px -3px rgba(63, 63, 55, 0.12);
  --elevation-depth-4-shadow: 0 16px 24px 2px rgba(63, 63, 55, 0.03),
    0 6px 30px 5px rgba(63, 63, 55, 0.04), 0 8px 10px -7px rgba(63, 63, 55, 0.12);
  --elevation-depth-5-shadow: 0 24px 38px 3px rgba(63, 63, 55, 0.03),
    0 9px 46px 8px rgba(63, 63, 55, 0.04), 0 11px 15px -7px rgba(63, 63, 55, 0.12);

  /* Griddity */
  --griddity-gutter-width: 2rem;
  --griddity-gutter-compensation: calc(var(--griddity-gutter-width) * -0.5);
  --griddity-half-gutter: calc((var(--griddity-gutter-width) * 0.5));
  --griddity-container-sm: 536px;
  --griddity-container-md: 728px;
  --griddity-container-lg: 968px;
  --griddity-container-xl: 1192px;
}

/** Fonts **/

@font-face {
  font-display: fallback;
  font-family: "Neue Haas Grotesk Display";
  font-stretch: normal;
  font-style: normal;
  font-weight: 100 900;
  src: url("../fonts/neue-haas-grotesk-display-75-bold.woff2") format("woff2");
}

@font-face {
  font-display: fallback;
  font-family: "Neue Haas Grotesk Text";
  font-stretch: normal;
  font-style: normal;
  font-weight: 100 400;
  src: url("../fonts/neue-haas-grotesk-text-55-roman.woff2") format("woff2");
}

@font-face {
  font-display: fallback;
  font-family: "Neue Haas Grotesk Text";
  font-stretch: normal;
  font-style: italic;
  font-weight: 100 900;
  src: url("../fonts/neue-haas-grotesk-text-56-italic.woff2") format("woff2");
}

@font-face {
  font-display: fallback;
  font-family: "Neue Haas Grotesk Text";
  font-stretch: normal;
  font-style: normal;
  font-weight: 500 900;
  src: url("../fonts/neue-haas-grotesk-text-75-bold.woff2") format("woff2");
}

/** Components: Alert **/

.Alert {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  position: relative;
}

.Alert .Title {
  font-weight: 700;
  margin-bottom: 0;
  margin-bottom: 0.25rem;
}

.Alert .Icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 1rem;
  left: 0;
  position: absolute;
  top: 0.25rem;
  width: 1rem;
}

.Alert .Message {
  font-size: 0.875rem;
  line-height: 1.3;
  padding-bottom: 0.25rem;
}

/* Compact */

.Alert.compact {
  margin-bottom: 0;
}

.Alert.compact .Title {
  font-size: 0.875rem;
  font-weight: 400;
}

.Alert.compact .Message {
  font-size: 0.75rem;
}

/* With message */

.Alert.withMessage {
  padding-left: calc(1.5rem - 6.5px);
}

.Alert.withMessage::before {
  border-radius: 3px;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 3px;
}

.Alert.withMessage .Icon {
  left: -6.5px;
}

/* Variants */

.Alert.error::before,
.Alert.danger::before {
  background-color: var(--color-red);
}

.Alert.error .Title,
.Alert.danger .Title {
  color: var(--color-red);
}

.Alert.error .Icon,
.Alert.danger .Icon {
  background-image: url("../img/danger.icon.svg");
}

.Alert.info::before {
  background-color: var(--color-indigo);
}

.Alert.info .Title {
  color: var(--color-indigo);
}

.Alert.info .Icon {
  background-image: url("../img/info.icon.svg");
}

.Alert.success::before {
  background-color: var(--color-bright-green);
}

.Alert.success .Title {
  color: var(--color-bright-green);
}

.Alert.success .Icon {
  background-image: url("../img/success.icon.svg");
}

.Alert.warning::before {
  background-color: var(--color-orange);
}

.Alert.warning .Title {
  color: var(--color-orange);
}

.Alert.warning .Icon {
  background-image: url("../img/warning.icon.svg");
}

/** Components: Button **/

.Button {
  appearance: none;
  -webkit-appearance: none;
}

.Button {
  align-items: center;
  background-color: transparent;
  border-color: transparent;
  border-radius: 0.25rem;
  border-style: solid;
  color: var(--color-charcoal);
  cursor: pointer;
  display: flex;
  font-weight: 700;
  justify-content: center;
  outline-offset: 1px;
  outline-style: solid;
  outline-width: 1px;
  text-align: center;
  text-transform: uppercase;
  transition: all 250ms ease-in-out;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;
}

.Button:active,
.Button:hover {
  color: var(--color-charcoal);
  text-decoration: none;
}

.Button:not(:focus-visible) {
  outline-color: rgba(255, 255, 255, 0);
  text-decoration: none;
}

.Button:disabled,
.Button.disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

/* Sizes */

.Button.tiny {
  border-width: 1px;
  font-size: 0.75rem;
  line-height: 1;
  padding: calc(0.375rem - 1px) 0.5rem;
}

.Button.tiny.rounded {
  border-radius: 0.6875rem;
}

.Button.tiny.icon {
  height: 1.5rem;
  padding: 0;
  width: 1.5rem;
}

.Button.small {
  border-width: 1px;
  font-size: 0.75rem;
  line-height: 1rem;
  padding: calc(0.5rem - 1px) 1rem;
}

.Button.small.ghost {
  font-size: 0.875rem;
}

.Button.small.rounded {
  border-radius: 1rem;
}

.Button.small.icon {
  height: 1.5rem;
  padding: 0;
  width: 1.5rem;
}

.Button.normal {
  border-width: 2px;
  font-size: 0.875rem;
  line-height: 1rem;
  padding: calc(1rem - 2px) 1rem;
}

.Button.normal.ghost {
  font-size: 1rem;
}

.Button.normal.rounded {
  border-radius: 1.5rem;
}

.Button.normal.icon {
  height: 3rem;
  padding: 0;
  width: 3rem;
}

.Button.large {
  border-width: 2px;
  font-size: 0.875rem;
  line-height: 1rem;
  padding: calc(1.25rem - 2px) 3rem;
}

.Button.large.ghost {
  font-size: 1rem;
}

.Button.large.rounded {
  border-radius: 1.75rem;
}

.Button.large.icon {
  height: 3.5rem;
  padding: 0;
  width: 3.5rem;
}

/* Variants */

.Button.ghost {
  font-weight: 400;
  text-transform: none;
}

.Button.blue {
  border-color: var(--color-indigo);
}

.Button.blue:not(.outlined):not(.ghost) {
  background-color: var(--color-indigo);
  color: var(--color-sand);
}

.Button.blue.outlined,
.Button.blue.ghost {
  color: var(--color-indigo);
}

.Button.blue.ghost {
  border-color: transparent;
}

.Button.blue:hover:not(.disabled) {
  background-color: var(--color-bright-indigo);
  border-color: var(--color-bright-indigo);
  color: #fff;
}

.Button.green {
  border-color: var(--color-dark-green);
}

.Button.green:not(.outlined):not(.ghost) {
  background-color: var(--color-dark-green);
  color: var(--color-sand);
}

.Button.green.outlined,
.Button.green.ghost {
  color: var(--color-dark-green);
}

.Button.green.ghost {
  border-color: transparent;
}

.Button.green:hover:not(.disabled) {
  background-color: var(--color-dark-green);
  border-color: var(--color-dark-green);
  color: #fff;
}

.Button.pastel-blue {
  border-color: var(--color-pastel-blue);
}

.Button.pastel-blue:not(.outlined):not(.ghost) {
  background-color: var(--color-pastel-blue);
  color: var(--color-indigo);
}

.Button.pastel-blue.outlined,
.Button.pastel-blue.ghost {
  color: var(--color-pastel-blue);
}

.Button.pastel-blue.ghost {
  border-color: transparent;
}

.Button.pastel-blue:hover:not(.disabled) {
  background-color: var(--color-soft-blue);
  border-color: var(--color-soft-blue);
  color: var(--color-bright-indigo);
}

.Button.red {
  border-color: var(--color-red);
}

.Button.red:not(.outlined):not(.ghost) {
  background-color: var(--color-red);
  color: var(--color-sand);
}

.Button.red.outlined,
.Button.red.ghost {
  color: var(--color-red);
}

.Button.red.ghost {
  border-color: transparent;
}

.Button.red:hover:not(.disabled) {
  background-color: var(--color-bright-red);
  border-color: var(--color-bright-red);
  color: #fff;
}

.Button.grey {
  border-color: var(--color-cloud);
}

.Button.grey:not(.outlined):not(.ghost) {
  background-color: var(--color-cloud);
  color: var(--color-charcoal);
}

.Button.grey.outlined,
.Button.grey.ghost {
  color: var(--color-mostly-black);
}

.Button.grey.ghost {
  border-color: transparent;
}

.Button.grey:hover:not(.disabled) {
  background-color: var(--color-silver);
  border-color: var(--color-silver);
  color: var(--color-charcoal);
}

.Button.black {
  border-color: var(--color-mostly-black);
}

.Button.black:not(.outlined):not(.ghost) {
  background-color: var(--color-mostly-black);
  color: var(--color-sand);
}

.Button.black.outlined,
.Button.black.ghost {
  color: var(--color-mostly-black);
}

.Button.black.ghost {
  border-color: transparent;
}

.Button.black:hover:not(.disabled) {
  background-color: #000;
  border-color: #000;
  color: #fff;
}

.Button.white {
  border-color: var(--color-mostly-black, #000);
}

.Button.white:not(.outlined):not(.ghost) {
  background-color: var(--color-ghost);
  color: var(--color-mostly-black);
}

.Button.white.outlined,
.Button.white.ghost {
  background-color: var(--color-mostly-black, #000);
  color: var(--color-ghost, var(--color-ghost));
}

.Button.white.ghost {
  border-color: transparent;
}

.Button.white:hover:not(.disabled) {
  filter: invert(1);
}

.Button.link {
  border: none;
  color: var(--link-color);
  cursor: pointer;
  display: inline;
  font-size: 1em;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  overflow-wrap: break-word;
  padding: 0;
  vertical-align: baseline;
  white-space: normal;
  text-transform: unset;
  width: auto;
  word-break: normal;
}

.Button.link:active,
.Button.link:hover {
  text-decoration: underline;
  color: var(--link-color-active);
}

/** Components: Checkbox **/

.Checkbox {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  position: relative;
  user-select: none;
}

.Checkbox.compact {
  font-size: 0.875rem;
  margin: 0;
}

.Checkbox.light .InnerLabel {
  font-weight: 400;
}

.Checkbox .Input {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: -1;
}

.Checkbox .InnerLabel,
.Checkbox .Description {
  display: block;
}

.Checkbox .InnerLabel {
  font-weight: 700;
}

.Checkbox .Description {
  font-size: 0.875em;
}

.Checkbox .Checkmark {
  background-color: transparent;
  border-radius: 3px;
  border: 1px solid var(--brand-border-color);
  display: inline-block;
  height: 1.25em;
  margin: 0.1875em 1em 0 0;
  min-width: 1.25em;
  order: 0;
  position: relative;
  width: 1.25em;
}

.Checkbox .Checkmark::after {
  border-color: var(--check-and-radio-color);
  border-style: solid;
  border-width: 0 3px 3px 0;
  content: "";
  height: 0.85em;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-45%, -60%) rotate(45deg);
  transition: all 150ms ease-in-out;
  width: 0.4em;
}

.Checkbox .Checkmark.checked,
.Checkbox .Input:checked ~ .Checkmark {
  border-color: var(--check-and-radio-color);
}

.Checkbox .Checkmark.checked::after,
.Checkbox .Input:checked ~ .Checkmark::after {
  opacity: 1;
}

.Checkbox .Input:disabled ~ *,
.Checkbox.disabled ~ * {
  cursor: not-allowed;
  opacity: 0.5;
}

.Checkbox .Toggle {
  background-color: var(--color-iron);
  border-radius: 16px;
  cursor: pointer;
  display: block;
  height: 1.5rem;
  margin-left: auto;
  position: relative;
  width: 2.75rem;
}

.Checkbox .Toggle::after {
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--elevation-depth-2-shadow);
  content: "";
  height: 1.25rem;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  transition: 0.3s;
  width: 1.25rem;
}

.Checkbox .Input:checked + .Toggle {
  background-color: var(--color-dark-green);
}

.Checkbox .Input:checked + .Toggle::after {
  transform: translate(100%, -50%);
}

/** Components: Form Error **/

.FormError {
  display: block;
  height: 0;
  max-width: 100%;
  overflow: visible;
}

.FormError .Icon {
  background-image: url("../img/formerror.icon.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--color-light-red);
  display: block;
  height: 0.75rem;
  left: 1px;
  position: absolute;
  top: 0.25rem;
  width: 0.75rem;
}

.FormError .Message {
  font-size: 0.75rem;
  line-height: 1;
  margin: 0;
  padding-top: 0.25rem;
  padding-left: 1rem;
  position: relative;
}

/** Components: Form Group **/

.FormGroup {
  margin-bottom: 1.5rem;
}

/** Components: Input **/

.Input {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-background);
  border-radius: 0.25rem;
  border: 1px solid var(--color-blanc);
  box-shadow: none;
  color: var(--color-mostly-black);
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 1px;
  padding: calc(0.75rem - 1px);
  transition: all 150ms linear;
  width: 100%;
}

.Input:focus:not(:focus-visible) {
  outline-color: rgba(255, 255, 255, 0);
}

.Input:focus-visible {
  outline-color: rgba(0, 0, 0, 1);
}

.Input::placeholder {
  color: var(--color-mostly-black);
}

.Input:disabled,
.Input.disabled {
  color: var(--color-mud);
  cursor: not-allowed;
  opacity: 1; /* override some recent chrome updates that makes select elements 0.7 by default */
}

.Input:disabled::placeholder,
.Input.disabled::placeholder {
  color: var(--color-cloud);
}

.Input[aria-invalid="true"],
.Input:invalid:not(:placeholder-shown),
.Input.error {
  border-color: var(--color-light-red);
}

.Input[aria-invalid="true"]:focus-visible,
.Input:invalid:not(:placeholder-shown):focus-visible,
.Input.error:focus-visible {
  border-color: transparent;
}

/** Components: Label **/

.Label {
  color: var(--label-color);
  display: block;
  font-size: 0.875rem;
  line-height: 1;
  margin-bottom: 10px;
}

/** Components: Radio **/

.Radio {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  position: relative;
  user-select: none;
}

.Radio.compact {
  font-size: 0.875rem;
  margin: 0;
}

.Radio.light .InnerLabel {
  font-weight: 400;
}

.Radio .Input {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: -1;
}

.Radio .InnerLabel,
.Radio .Description {
  display: block;
}

.Radio .InnerLabel {
  font-weight: 700;
}

.Radio .Description {
  font-size: 0.875em;
}

.Radio .Checkmark {
  background-color: transparent;
  border: 1px solid var(--brand-border-color);
  border-radius: 50%;
  display: inline-block;
  height: 1.25em;
  margin: 0.1875em 1em 0 0;
  min-width: 1.25em;
  order: 0;
  position: relative;
  width: 1.25em;
}

.Radio .Checkmark::after {
  background-color: var(--check-and-radio-color);
  border-radius: 50%;
  content: "";
  height: 0.6em;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 150ms ease-in-out;
  width: 0.6em;
}

.Radio .Checkmark.checked,
.Radio .Input:checked ~ .Checkmark {
  border-color: var(--check-and-radio-color);
}

.Radio .Checkmark.checked::after,
.Radio .Input:checked ~ .Checkmark::after {
  opacity: 1;
}

.Radio .Input:disabled ~ *,
.Radio.disabled ~ * {
  cursor: not-allowed;
  opacity: 0.5;
}

/** Components: Select **/

.Select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-background);
  background-image: url("../img/select.icon.svg");
  background-position: calc(100% - 0.5em) center;
  background-repeat: no-repeat;
  background-size: 0.75em;
  border: 1px solid var(--color-blanc);
  border-radius: 0.25rem;
  box-shadow: var(--elevation-depth-1-shadow);
  color: var(--color-mostly-black);
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  outline-offset: 1px;
  padding: calc(0.75rem - 1px);
  padding-right: 1.5em;
  width: 100%;
}

.Select:disabled,
.Select.disabled {
  background-image: none;
  box-shadow: none;
  color: var(--color-mud);
  cursor: not-allowed;
  opacity: 1; /* override some recent chrome updates that makes select elements 0.7 by default */
}

.Select:disabled::placeholder,
.Select.disabled::placeholder {
  color: var(--color-cloud);
}

.Select.error {
  border-color: var(--color-light-red);
}

@supports (-moz-appearance: none) {
  .Select {
    height: calc(2.5rem + 2px);
  }
}

/** Components: Table **/
.Table {
  max-width: 100%;
  width: 100%;
}

.Table thead {
  font-size: 0.75rem;
}

.Table thead tr {
  border-bottom: 1px solid var(--color-fossil);
  vertical-align: bottom;
  white-space: nowrap;
}

.Table tbody {
  font-size: 0.875rem;
}

.Table tbody tr {
  border-bottom: 1px dotted var(--color-cloud);
}

.Table tbody tr:last-child {
  border-bottom-width: 0;
}

.Table tfoot {
  font-size: 0.875rem;
}

.Table tfoot tr {
  border-top: 1px solid var(--color-fossil);
}

.Table th {
  color: var(--text-color-muted);
  font-weight: 400;
  padding: 0.25rem;
  text-transform: uppercase;
}

.Table th.active {
  color: var(--text-color);
}

.Table th.isSorted {
  padding-right: 1rem;
  position: relative;
}

.Table th.isSorted::after {
  content: "\25B2";
  font-size: 0.5rem;
  height: 0;
  position: absolute;
  right: 0;
  width: 1rem;
}

.Table th.isSorted.isSortedDesc::after {
  content: "\25BC";
}

.Table td {
  padding: 0.5rem;
}

.Table td.EmptyMessage {
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.Table tr.GroupDivider {
  background-color: var(--color-iron);
}

.Table tr.GroupDivider td {
  font-size: 0.75rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.TableResponsiveWrapper {
  display: block;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  width: 100%;
}

.EmptyMessage,
.Table td.EmptyMessage {
  color: var(--text-color-muted);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  padding-bottom: 1rem;
  padding-top: 1rem;
  text-align: center;
  text-transform: uppercase;
}

/* Global elements **/

html {
  font-size: 1rem;
}

body {
  color: var(--text-color);
  font-family: var(--font-family-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-background);
}

a {
  color: var(--link-color);
  text-decoration: underline;
}

a:active,
a:hover {
  color: var(--link-color-active);
}

*:focus:not(:focus-visible) {
  outline: none;
}

/* Utils */

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

/* Header */

.Navbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 4rem;

  @media (min-width: 768px) {
    min-height: 5rem;
  }
}

.Logo::before {
  background-image: url("../img/logo.svg");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  content: "";
  display: block;
  height: 1.5rem;
  width: 11rem;

  @media (min-width: 768px) {
    width: 13rem;
  }
}

.Logo .Advisers {
  font-family: var(--font-family-headline);
  font-size: 0.625rem;
  letter-spacing: 0.5rem;
  text-align: center;
  text-transform: uppercase;
}

.Logo:has(.Advisers) {
  text-decoration: none;
}

/** Layout **/

.Container {
  width: 100%;
  padding-right: var(--griddity-half-gutter);
  padding-left: var(--griddity-half-gutter);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .Container {
    max-width: var(--griddity-container-sm);
  }
}

@media (min-width: 768px) {
  .Container {
    max-width: var(--griddity-container-md);
  }
}

@media (min-width: 992px) {
  .Container {
    max-width: var(--griddity-container-lg);
  }
}

@media (min-width: 1200px) {
  .Container {
    max-width: var(--griddity-container-xl);
  }
}

.Container.fluid {
  width: 100%;
  padding-right: var(--griddity-half-gutter);
  padding-left: var(--griddity-half-gutter);
  margin-right: auto;
  margin-left: auto;
}

.ContentWrapper {
  padding-bottom: 1rem;
  padding-top: 1rem;
}

@media (min-width: 768px) {
  .ContentWrapper {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.content-area,
.FormCard {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: var(--elevation-depth-5-shadow);
  max-width: 24rem;
  padding: 1.5rem;
}

.CenteredMessage {
  font-size: 0.875rem;
  padding-top: 1.5rem;
  text-align: center;
}