@layer starter, reset, base, state, application;
@layer reset {
  ._announcement_178jo_2 {
    all: unset;
    font-family: var(--font-family-base, "Nunito Sans", sans-serif);
    font-size: 100%;
    color: var(--foreground-color-on-primary, #ffffff);
    margin: 0;
    padding: 0;
    border-style: none;
    border-width: 0;
    border-color: transparent;
    box-sizing: border-box;
    display: flex;
  }
}
@layer base {
  ._announcement_178jo_2 {
    padding-block: 0.5rem !important;
    padding-inline: 1rem;
    width: 100%;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--status-color-info, #0265DC);
    height: 3.5rem;
    position: relative;
    gap: 1rem;
    padding-inline-end: 3.5rem;
    --button-secondary-background-color: light-dark(
      #04040426,
      #ffffff8c
    );
    --button-secondary-foreground-color: var(--foreground-color-on-primary, #ffffff);
    --button-secondary-foreground-color-hover: var(--foreground-color-on-primary, #ffffff);
    --button-secondary-foreground-color-active: var(--foreground-color-on-primary, #ffffff);
  }
  ._announcement_178jo_2 ._close-container_178jo_39 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    inset-inline-end: 1rem;
  }
  ._announcement_178jo_2 ._title-container_178jo_48 {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow: hidden;
  }
  ._announcement_178jo_2 ._title-container_178jo_48 ._title_178jo_48 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1rem;
  }
  ._announcement_178jo_2 button {
    outline-color: var(--a2-announcement-focus-ring-color, var(--foreground-color-on-primary, #ffffff));
  }
}
@layer state {
  ._announcement_178jo_2 ._status-icon_178jo_65 {
    color: inherit;
  }
  ._announcement_178jo_2._success_178jo_68 {
    background-color: var(--status-color-success, #007A4D);
    color: var(--foreground-color-inverted, #ffffff);
    --a2-announcement-focus-ring-color: var(--foreground-color-inverted, #ffffff);
    --button-secondary-foreground-color: var(--foreground-color-inverted, #ffffff);
    --button-secondary-foreground-color-hover: var(--foreground-color-inverted, #ffffff);
    --button-secondary-foreground-color-active: var(--foreground-color-inverted, #ffffff);
  }
  ._announcement_178jo_2._warning_178jo_76 {
    background-color: var(--status-color-warning, #ffbe00);
    color: var(--foreground-color-on-warning, #141414);
    --a2-announcement-focus-ring-color: var(--foreground-color-on-warning, #141414);
    --button-secondary-foreground-color: var(--foreground-color-on-warning, #141414);
    --button-secondary-foreground-color-hover: var(--foreground-color-on-warning, #141414);
    --button-secondary-foreground-color-active: var(--foreground-color-on-warning, #141414);
  }
  ._announcement_178jo_2._danger_178jo_84 {
    background-color: var(--status-color-danger, #e13212);
    color: var(--foreground-color-on-danger, #ffffff);
    --a2-announcement-focus-ring-color: var(--foreground-color-on-danger, #ffffff);
    --button-secondary-foreground-color: var(--foreground-color-on-danger, #ffffff);
    --button-secondary-foreground-color-hover: var(--foreground-color-on-danger, #ffffff);
    --button-secondary-foreground-color-active: var(--foreground-color-on-danger, #ffffff);
  }
}
@layer application {
  ._announcement_178jo_2 ._close-button_178jo_94 {
    color: inherit;
    outline-color: var(--a2-announcement-focus-ring-color, var(--foreground-color-on-primary, #ffffff));
  }
}