/* Stock Django styling; these rules only adapt portal forms and navigation. */
.portal #header,
.portal #user-tools,
.portal #user-tools nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.portal #branding,
.portal #user-tools,
.portal .main,
.portal #content,
.portal .portal-content {
  min-width: 0;
}
.portal #user-tools {
  text-align: left;
}
.portal #user-tools span,
.portal h1,
.portal p,
.portal .helptext,
.portal .errorlist {
  overflow-wrap: anywhere;
}
.portal #user-tools a,
.portal #logout-form button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.portal .portal-content {
  max-width: 48em;
}
.portal .form-row {
  padding: 12px 0;
}
.portal .form-row label {
  display: block;
  margin-bottom: 8px;
}
.portal .form-row input {
  box-sizing: border-box;
  width: 100%;
  max-width: 32em;
  min-height: 44px;
}
.portal .submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}
.portal .submit-row .button,
.portal .submit-row a,
.portal-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.portal :is(a, button, input):focus-visible {
  outline: 2px solid var(--body-fg);
  outline-offset: 3px;
}
.portal.login #container {
  max-width: calc(100% - 32px);
}
@media (max-width: 767px) {
  .portal #header {
    align-items: flex-start;
  }
  .portal #user-tools {
    width: 100%;
  }
  .portal.login #container {
    margin: 24px auto;
  }
}