/* ============================================================
   UDS — Account Console
   Reescrito seguindo a spec de diagnostico "Informacoes pessoais":
   container contido, escala de espaco 4/8/12/16/24/32/48/64, escala de
   tipo 28/20/15/13, neutros com temperatura, azul so em acao, sidebar
   clara com item ativo unico, jump-links removido quando tem 1 item.

   O Account Console v3 e React + PatternFly v5: todas as telas (Informacoes
   pessoais, Seguranca da conta -> Entrando, Aplicativos, Grupos, Recursos,
   Atividade do dispositivo) compartilham os mesmos componentes PatternFly
   (.pf-v5-c-page, .pf-v5-c-nav, .pf-v5-c-form, .pf-v5-c-card,
   .pf-v5-c-data-list, .pf-v5-c-jump-links), confirmado no bundle JS
   (PersonalInfo/SigningIn/Applications/Groups/Resources/DeviceActivity
   importam do mesmo main.js). Por isso este arquivo unico corrige todas
   as telas de uma vez, sem precisar de CSS por pagina.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- superficies (neutros com temperatura, nunca #000/#FFF puro) --- */
  --bg-app:        #F5F6F8;
  --bg-surface:    #FFFFFF;
  --bg-nav:        #FAFAFB;
  --bg-header:     #10151F;
  --bg-disabled:   #F1F2F4;
  --bg-hover:      #F0F1F4;
  --border:        #E2E5EA;
  --border-strong: #C8CDD6;

  /* ---------- texto ---------- */
  --text:        #161B24;
  --text-muted:  #5C6675;
  --text-subtle: #8A93A1;
  --text-invert: #F2F4F7;

  /* ---------- marca / acao ---------- */
  --accent:       #1667E6;
  --accent-hover: #0F55C4;
  --accent-soft:  #EEF3FE;
  --focus-ring:   0 0 0 3px rgba(22, 103, 230, .28);

  /* ---------- semantico ---------- */
  --danger:  #C0392B;
  --success: #197A4B;

  /* ---------- escala de espaco: 4/8/12/16/24/32/48/64 ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --radius: 6px;
  --font: 'Manrope', system-ui, -apple-system, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;
}

html, body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   HEADER — enxuto: logo + avatar/nome como botao de menu, nunca um select
   ============================================================ */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--bg-header);
  background: var(--bg-header);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  box-shadow: none;
  min-height: 56px;
  padding-inline: var(--sp-5);
}
.pf-v5-c-masthead__brand img,
.pf-v5-c-brand {
  max-height: 24px;
  width: auto;
}
.pf-v5-c-masthead,
.pf-v5-c-masthead a,
.pf-v5-c-masthead .pf-v5-c-button,
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle {
  color: var(--text-invert);
}
.pf-v5-c-masthead .pf-v5-c-button:hover,
.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
/* nome do usuario truncado em uma linha; e um botao de menu, nao um form */
.pf-v5-c-masthead .pf-v5-c-menu-toggle__text,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle-text {
  font: 600 13px var(--font);
  color: var(--text-invert);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   SIDEBAR — clara, e estrutura, nao protagonista.
   Item ativo unico: fundo azul suave + barra 3px + texto azul semibold.
   ============================================================ */
.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--bg-nav);
  --pf-v5-c-page__sidebar--BoxShadow: none;
  background: var(--bg-nav);
  border-right: 1px solid var(--border);
  width: 240px;
}
.pf-v5-c-page__sidebar-body {
  padding-block: var(--sp-4);
  padding-inline: var(--sp-3);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav,
.pf-v5-c-page__sidebar .pf-v5-c-nav__list {
  background: transparent;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link {
  --pf-v5-c-nav__link--Color: var(--text);
  --pf-v5-c-nav__link--FontSize: 15px;
  --pf-v5-c-nav__link--FontWeight: 400;
  --pf-v5-c-nav__link--PaddingTop: var(--sp-2);
  --pf-v5-c-nav__link--PaddingBottom: var(--sp-2);
  --pf-v5-c-nav__link--PaddingLeft: var(--sp-4);
  --pf-v5-c-nav__link--PaddingRight: var(--sp-4);
  --pf-v5-c-nav__link--BackgroundColor: transparent;
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--bg-hover);
  --pf-v5-c-nav__link--active--BackgroundColor: var(--accent-soft);
  --pf-v5-c-nav__link--active--Color: var(--accent);
  --pf-v5-c-nav__link--focus--BackgroundColor: var(--bg-hover);
  color: var(--text);
  font: 400 15px var(--font);
  height: 40px;
  border-radius: var(--radius);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  transition: background .12s, color .12s;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link:hover {
  background: var(--bg-hover);
}
/* item ativo: um so por vez, contraste garantido (azul #1667E6 sobre
   #EEF3FE passa de 4.5:1) + barra lateral 3px como indicador extra,
   nao dependendo so da cor de fundo */
.pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link::after,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link::before {
  display: none !important;
}
/* Sem isto o navegador desenha o proprio anel de foco nativo nos itens do
   menu — e essa cor segue o "accent color" do sistema operacional/navegador
   do usuario, nao a paleta do tema. Em alguns SOs isso sai vermelho, criando
   uma barra em formato de colchete do lado do item, sem relacao com o CSS
   do produto. Definimos um foco proprio, na cor da marca. */
.pf-v5-c-page__sidebar .pf-v5-c-nav__link {
  outline: none;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link:focus-visible {
  outline: none;
  box-shadow: inset 3px 0 0 var(--accent), var(--focus-ring);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__section-title {
  color: var(--text-subtle);
  font: 600 11px var(--font);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-inline: var(--sp-4);
  margin-block: var(--sp-3) var(--sp-2);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__subnav .pf-v5-c-nav__link {
  font-size: 14px;
  height: 36px;
  padding-left: calc(var(--sp-4) + var(--sp-4));
  color: var(--text-muted);
}
/* Bug real (nao cache): esta regra de subnav tem a mesma especificidade
   da regra de item ativo declarada acima no arquivo, e como vem depois,
   sobrescrevia a cor azul do link ativo dentro do submenu (ex.: "Entrando"
   dentro de "Seguranca da conta") de volta para --text-muted (cinza).
   Confirmado via inspecao real do DOM/estilos computados (Playwright) contra
   login.udstec.io: .pf-v5-c-nav__link[aria-current="page"] dentro do subnav
   renderizava color: rgb(92,102,117) em vez de var(--accent). */
.pf-v5-c-page__sidebar .pf-v5-c-nav__subnav .pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-page__sidebar .pf-v5-c-nav__subnav .pf-v5-c-nav__link[aria-current="page"] {
  color: var(--accent);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__toggle-icon {
  color: var(--text-subtle);
  transition: transform .15s;
}

/* ============================================================
   AREA DE CONTEUDO — contida, nao full-bleed.
   ============================================================ */
.pf-v5-c-page__main,
.pf-v5-c-page__main-section {
  background: var(--bg-app);
}
.pf-v5-c-page__main-section {
  padding-block: var(--sp-6) var(--sp-7);
  padding-inline: var(--sp-6);
}
/* container central: 880px max, como pede a spec — nada de esticar
   um formulario de 5 campos por 1400px de tela */
.pf-v5-c-page__main-section > * {
  max-width: 880px;
}

/* titulo da pagina: 28/600, unico h1 por tela.
   DOM real confirmado via inspecao (Playwright, Keycloak 26.7): o h1 vem
   dentro de .pf-v5-c-content, mas os h2/h3 das secoes NAO — SigningIn.tsx
   usa <Title headingLevel="h2" size="xl"> e <Title headingLevel="h3"
   size="md"> soltos dentro de <PageSection>, fora de qualquer
   .pf-v5-c-content. Por isso os seletores originais (`.pf-v5-c-content h2`,
   `.pf-v5-c-content h3`, `.pf-m-lg`) nunca casavam com nada nesta tela e a
   hierarquia visual (categoria/credencial) ficava do tamanho do texto
   corrido. Selecionar pelas classes de modificador reais do PatternFly
   (`.pf-m-xl`, `.pf-m-md`) funciona em qualquer wrapper. */
.pf-v5-c-content h1,
.pf-v5-c-title.pf-m-2xl {
  font: 600 28px/34px var(--font);
  color: var(--text);
  letter-spacing: -.01em;
  margin-bottom: var(--sp-1);
}
.pf-v5-c-content > p:first-of-type,
.pf-v5-c-page__main-section .pf-v5-c-content p.pf-v5-u-color-200 {
  font: 400 15px/22px var(--font);
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}

/* titulo de categoria dentro da secao ("Autenticacao Basica",
   "Autenticacao de Dois Fatores") — Title size="xl" -> .pf-m-xl */
.pf-v5-c-title.pf-m-xl {
  font: 600 20px/26px var(--font) !important;
  color: var(--text);
  letter-spacing: -.005em;
  margin-bottom: var(--sp-4);
}

/* titulo de cada credencial dentro do grupo ("Senha", "Aplicativo
   Autenticador", "Chave de Seguranca") — Title size="md" -> .pf-m-md */
.pf-v5-c-title.pf-m-md {
  font: 600 15px var(--font) !important;
  color: var(--text);
}
.pf-v5-c-title.pf-m-md + span {
  font: 400 13.5px var(--font);
  color: var(--text-muted);
}

/* mantido para telas que efetivamente tem .pf-v5-c-content h2/h3
   (ex.: Informacoes pessoais usa Form, nao Title solto) */
.pf-v5-c-content h2 {
  font: 600 20px/26px var(--font);
  color: var(--text);
  letter-spacing: -.005em;
}
.pf-v5-c-content h3 {
  font: 600 15px var(--font);
  color: var(--text);
}

/* ============================================================
   AGRUPAMENTO POR CATEGORIA — vira o "card branco com borda".
   DOM real: cada categoria e uma <section class="pf-v5-c-page__main-section
   pf-v5-u-px-0"> irma da outra, sem nenhum .pf-v5-c-card em volta. Como nao
   existe elemento .pf-v5-c-card nesta pagina, o card e produzido diretamente
   na secao com padding proprio (por isso zeramos a herança de
   --pf-v5-u-px-0 com padding explicito abaixo).
   ============================================================ */
main .pf-v5-c-page__main-section.pf-v5-u-px-0 {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--sp-5) var(--sp-5) var(--sp-6) !important;
  margin-bottom: var(--sp-5);
}
main .pf-v5-c-page__main-section.pf-v5-u-px-0:last-child {
  margin-bottom: 0;
}

/* ============================================================
   "Ir para a secao" (jump-links) — so faz sentido com 3+ secoes.
   Com 1 unico item ele e ruido puro; escondemos por padrao.
   Reative removendo este bloco se a tela ganhar 3+ secoes reais.
   ============================================================ */
.pf-v5-c-jump-links:has(.pf-v5-c-jump-links__list > .pf-v5-c-jump-links__item:only-child) {
  display: none;
}

/* ============================================================
   CARDS — delimitam cada secao do formulario com borda visivel.
   Formulario em coluna de 560px max, como pede a spec.
   ============================================================ */
.pf-v5-c-card,
.pf-v5-c-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: none;
}
.pf-v5-c-card__title {
  font: 600 20px var(--font);
  color: var(--text);
  padding-block: var(--sp-4) var(--sp-2);
}
.pf-v5-c-card__body {
  padding-inline: var(--sp-5);
  padding-block: 0 var(--sp-5);
}

.pf-v5-c-form {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.pf-v5-c-form__group {
  margin-bottom: 0;
}
.pf-v5-c-form__group-label {
  padding-bottom: var(--sp-1);
}

/* label acima do input: mais rapido de ler, sobrevive a qualquer largura */
.pf-v5-c-form__label-text {
  font: 500 13px/18px var(--font);
  color: var(--text-muted);
}
.pf-v5-c-form__helper-text,
.pf-v5-c-form__helper-text-item {
  font: 400 13px/18px var(--font);
  color: var(--text-subtle);
  margin-top: var(--sp-1);
}
.pf-v5-c-form__helper-text-item.pf-m-error,
.pf-v5-c-form__helper-text-item.pf-m-error .pf-v5-c-helper-text__item-text {
  color: var(--danger);
}

/* asterisco de obrigatorio: semantico so em campo obrigatorio de fato,
   nao mais forte que o proprio estado de erro */
.pf-v5-c-form__label-required {
  color: var(--danger);
  font-size: 13px;
  margin-left: 2px;
}

.pf-v5-c-form__actions {
  margin-top: var(--sp-1);
  gap: var(--sp-3);
}

/* ============================================================
   INPUTS — cinza chapado passa a mensagem errada de "readonly".
   Editavel = fundo branco + borda visivel. Desabilitado = cinza + motivo.
   ============================================================ */
.pf-v5-c-form-control,
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-text-input-group__text-input {
  height: 40px;
  padding-inline: var(--sp-3);
  font: 400 15px/22px var(--font);
  color: var(--text);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color .12s, box-shadow .12s;
}
.pf-v5-c-form-control:hover:not(:disabled) {
  border-color: #A9B1BE;
}
.pf-v5-c-form-control:focus-within,
.pf-v5-c-form-control > input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}
.pf-v5-c-form-control.pf-m-error,
.pf-v5-c-form-control.pf-m-error > input {
  border-color: var(--danger);
}
.pf-v5-c-form-control.pf-m-error:focus-within {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .2);
}
.pf-v5-c-form-control:disabled,
.pf-v5-c-form-control > input:disabled,
.pf-v5-c-form-control.pf-m-disabled {
  background: var(--bg-disabled);
  color: var(--text-subtle);
  border-color: var(--border);
  cursor: not-allowed;
}

/* select: mesma caixa do input, seta custom em SVG, nunca a seta nativa
   do sistema ao lado de inputs com aparencia customizada */
select.pf-v5-c-form-control,
.pf-v5-c-form-control select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%238A93A1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ============================================================
   BOTOES
   ============================================================ */
.pf-v5-c-button {
  height: 40px;
  padding-inline: var(--sp-5);
  font: 600 15px var(--font);
  border-radius: var(--radius);
  transition: background .12s, border-color .12s, color .12s, opacity .12s;
}
.pf-v5-c-button.pf-m-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}
.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.pf-v5-c-button.pf-m-primary:focus-visible {
  box-shadow: var(--focus-ring);
}
.pf-v5-c-button.pf-m-primary:disabled,
.pf-v5-c-button.pf-m-primary.pf-m-disabled,
.pf-v5-c-button.pf-m-primary.pf-m-aria-disabled {
  opacity: .45;
  background: var(--accent);
  border-color: var(--accent);
}
.pf-v5-c-button.pf-m-secondary {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}
.pf-v5-c-button.pf-m-secondary:hover {
  background: var(--bg-hover);
  color: var(--text);
}
/* acao destrutiva: discreta por padrao, so fica vermelho solido no hover.
   Vermelho chapado numa lista inteira e agressivo e nao e o estado default. */
.pf-v5-c-button.pf-m-danger {
  background: transparent;
  border: 1px solid #E7D2D0;
  color: var(--danger);
}
.pf-v5-c-button.pf-m-danger:hover,
.pf-v5-c-button.pf-m-danger:focus {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.pf-v5-c-button.pf-m-link {
  color: var(--text-muted);
  font-weight: 600;
  padding-inline: var(--sp-2);
}
.pf-v5-c-button.pf-m-link:hover {
  color: var(--text);
  text-decoration: underline;
}
/* Os botoes "Configurar X" da tela Entrando (SigningIn.tsx) sao
   Button variant="link" na origem, nao variant="primary" — o PatternFly
   nao tem uma variante "primary" disponivel nesse ponto do componente.
   Para bater com a referencia (botao azul preenchido, nao link sublinhado),
   sobrescrevemos so a instancia dentro do cabecalho de cada grupo de
   credencial (.pf-v5-l-split > .pf-m-fill), sem afetar link de verdade
   em outras telas do Account Console. */
.pf-v5-l-split .pf-v5-l-split__item.pf-m-fill .pf-v5-c-button.pf-m-link {
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  font-size: 13.5px;
  padding: 9px 16px;
  border-radius: var(--radius);
  text-decoration: none;
}
.pf-v5-l-split .pf-v5-l-split__item.pf-m-fill .pf-v5-c-button.pf-m-link:hover {
  background: var(--accent-hover);
  color: #fff;
  text-decoration: none;
}
.pf-v5-c-button.pf-m-control {
  border-radius: var(--radius);
}

/* ============================================================
   LISTAS DE CREDENCIAIS / TABELAS
   ============================================================ */
.pf-v5-c-data-list {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.pf-v5-c-data-list__item {
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.pf-v5-c-data-list__item:last-child {
  border-bottom: none;
}
.pf-v5-c-data-list__item:hover {
  background: var(--bg-hover);
}
.pf-v5-c-data-list__item-row {
  padding-block: var(--sp-4);
  padding-inline: var(--sp-5);
  align-items: center;
}
.pf-v5-c-data-list__cell {
  font: 500 15px var(--font);
  color: var(--text);
  padding: 0;
}
.pf-v5-c-data-list__cell strong,
.pf-v5-c-data-list__cell b {
  font-weight: 600;
  color: var(--text);
}
.pf-v5-c-data-list__cell small,
.pf-v5-c-data-list__cell .pf-v5-c-content--small {
  font: 400 13px var(--font);
  color: var(--text-subtle);
}

.pf-v5-c-table {
  background: var(--bg-surface);
  border-radius: 8px;
  overflow: hidden;
}
.pf-v5-c-table thead th {
  font: 600 13px var(--font);
  color: var(--text-subtle);
  text-transform: none;
  letter-spacing: 0;
  background: var(--bg-nav);
  border-bottom: 1px solid var(--border);
}
.pf-v5-c-table tbody td {
  font: 500 15px var(--font);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.pf-v5-c-label {
  font: 600 12px var(--font);
  border-radius: 999px;
}
.pf-v5-c-label.pf-m-blue {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: #CBDEFF;
}
.pf-v5-c-label.pf-m-green {
  background: #E8F8F0;
  color: var(--success);
  border-color: #BFE8D4;
}

/* ============================================================
   ALERTAS / TOASTS / MODAIS
   ============================================================ */
.pf-v5-c-alert {
  border-radius: 8px;
  font-family: var(--font);
  border: 1px solid var(--border);
}
.pf-v5-c-alert__title {
  font: 600 14px var(--font);
}
.pf-v5-c-alert.pf-m-success { --pf-v5-c-alert--BorderTopColor: var(--success); }
.pf-v5-c-alert.pf-m-danger  { --pf-v5-c-alert--BorderTopColor: var(--danger); }
.pf-v5-c-alert.pf-m-info    { --pf-v5-c-alert--BorderTopColor: var(--accent); }
.pf-v5-c-alert.pf-m-warning { --pf-v5-c-alert--BorderTopColor: #C58B00; }

.pf-v5-c-alert-group.pf-m-toast {
  font-family: var(--font);
}

.pf-v5-c-modal-box {
  border-radius: 8px;
  font-family: var(--font);
}
.pf-v5-c-modal-box__title {
  font: 600 19px var(--font);
  color: var(--text);
}

.pf-v5-c-empty-state__title-text {
  font: 600 17px var(--font);
  color: var(--text);
}
.pf-v5-c-empty-state__body {
  font: 400 14px var(--font);
  color: var(--text-muted);
}

/* icones de credencial / provedor na lista */
.pf-v5-c-data-list__item-row img,
.pf-v5-c-data-list__cell img {
  max-height: 26px;
  width: auto;
}

/* ============================================================
   CARREGAMENTO
   ============================================================ */
.keycloak__loading-container {
  background: var(--bg-app) !important;
  color: var(--text) !important;
}
#loading-text {
  font: 600 16px var(--font);
  color: var(--text-muted);
}
.pf-v5-c-spinner {
  --pf-v5-c-spinner--Color: var(--accent);
}

code, pre, .pf-v5-c-clipboard-copy__text {
  font-family: var(--mono);
  font-size: 13px;
}

/* ============================================================
   RESPONSIVO — sidebar some antes de qualquer campo esticar.
   ============================================================ */
@media (max-width: 1024px) {
  .pf-v5-c-page__main-section {
    padding-inline: var(--sp-4);
  }
}
@media (max-width: 768px) {
  .pf-v5-c-content h1,
  .pf-v5-c-title.pf-m-2xl {
    font-size: 22px;
  }
  .pf-v5-c-form {
    max-width: 100%;
  }
}