@import url("/assets/css/theme-forgejo-dark.css");

/* Vareo UI theme — consolidated black canvas + electric blue for Forgejo */
:root {
  --vareo-canvas: #0a0a0a;
  --vareo-surface: #1a1a1a;
  --vareo-surface-raised: #242424;
  --vareo-input: #121212;
  --vareo-border: #2a2a2a;
  --vareo-border-strong: #3a3a3a;
  --vareo-text: #ffffff;
  --vareo-body: #cccccc;
  --vareo-body-strong: #e6e6e6;
  --vareo-muted: #888888;
  --vareo-primary: #2f7dff;
  --vareo-primary-active: #1f6bef;
  --vareo-on-primary: #0a0a0a;

  --is-dark-theme: true;
  --color-primary: var(--vareo-primary);
  --color-primary-contrast: var(--vareo-on-primary);
  --color-primary-hover: var(--vareo-primary-active);
  --color-primary-active: #155de0;
  --color-primary-alpha-10: #2f7dff19;
  --color-primary-alpha-20: #2f7dff33;
  --color-primary-alpha-30: #2f7dff4d;
  --color-primary-alpha-40: #2f7dff66;
  --color-primary-alpha-50: #2f7dff80;
  --color-body: var(--vareo-canvas);
  --color-box-header: var(--vareo-surface-raised);
  --color-box-body: var(--vareo-surface);
  --color-box-body-highlight: var(--vareo-surface-raised);
  --color-card: var(--vareo-surface);
  --color-menu: var(--vareo-surface);
  --color-footer: var(--vareo-canvas);
  --color-nav-bg: var(--vareo-canvas);
  --color-secondary: var(--vareo-surface-raised);
  --color-secondary-bg: var(--vareo-surface);
  --color-secondary-hover: var(--vareo-surface-raised);
  --color-button: var(--vareo-surface-raised);
  --color-input-background: var(--vareo-input);
  --color-input-border: var(--vareo-border-strong);
  --color-input-border-hover: var(--vareo-primary);
  --color-markup-code-block: var(--vareo-surface);
  --color-code-bg: var(--vareo-surface);
  --color-shadow: transparent;
  --color-hover: var(--vareo-surface-raised);
  --color-active: #2d2d2d;
  --color-text-dark: var(--vareo-text);
  --color-text: var(--vareo-body);
  --color-text-light: var(--vareo-body-strong);
  --color-text-light-2: var(--vareo-body);
  --color-text-light-3: var(--vareo-muted);
  --color-label-text: var(--vareo-text);
  --color-label-bg: var(--vareo-surface-raised);
  --color-accent: var(--vareo-primary);
  --color-highlight-fg: var(--vareo-primary);
  --color-highlight-bg: var(--color-primary-alpha-20);
  --color-overlay-backdrop: #0a0a0acc;
  --color-tooltip-bg: #000000f2;
  --color-tooltip-text: var(--vareo-text);
  --color-blue: var(--vareo-primary);
  --color-info-border: #255fbf;
  --color-info-bg: #10244a;
  --color-info-text: #dcebff;
  accent-color: var(--vareo-primary);
  color-scheme: dark;
}

html,
body,
.full.height,
.page-content,
.repository,
.ui.container {
  background: var(--vareo-canvas) !important;
}

body {
  color: var(--vareo-body) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  background-image: radial-gradient(circle at top, rgba(47, 125, 255, 0.10), transparent 28%) !important;
}

h1,
h2,
h3,
h4,
.ui.header,
.ui.card > .content > .header,
.repository .repo-title,
.repo-header-name {
  color: var(--vareo-text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
}

a,
.ui.breadcrumb a,
.repository .repo-title a,
.markup a {
  color: var(--vareo-primary) !important;
}

.ui.menu,
.ui.secondary.menu,
.ui.vertical.menu,
.ui.tabular.menu,
.ui.attached.header,
.ui.segment,
.ui.segments,
.ui.card,
.ui.cards > .card,
.repository.file.list,
.repository .diff-file-box,
.repository .timeline-item.comment .content,
.repository .comment.form .content,
.repository .issue-content .segment,
.repository.view.issue .comment-list .comment .content,
.repository.view.issue .comment-list .timeline-item .content,
.ui.table,
.repository .ui.segment.sub-menu,
.ui.popup,
.ui.modal > .content,
.ui.modal > .header,
.ui.modal > .actions {
  background-color: var(--vareo-surface) !important;
  border-color: var(--vareo-border) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

.ui.menu .item,
.ui.secondary.menu .item,
.ui.vertical.menu .item,
.ui.table td,
.ui.table th,
.ui.list .item,
.markup,
.repo-description,
.text.grey,
.muted {
  color: var(--vareo-body) !important;
}

.ui.menu .active.item,
.ui.secondary.menu .active.item,
.ui.tabular.menu .active.item,
.ui.menu .item:hover,
.ui.dropdown .menu > .item:hover {
  background-color: var(--vareo-surface-raised) !important;
  color: var(--vareo-text) !important;
}

.ui.primary.button,
.ui.primary.buttons .button,
.ui.green.button,
.ui.basic.primary.button,
.ui.basic.green.button,
button.ui.primary.button {
  min-height: 40px !important;
  padding: 12px 20px !important;
  background: var(--vareo-primary) !important;
  border: 1px solid var(--vareo-primary) !important;
  border-radius: 8px !important;
  color: var(--vareo-on-primary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover,
.ui.green.button:hover,
.ui.basic.primary.button:hover,
.ui.basic.green.button:hover {
  background: var(--vareo-primary-active) !important;
  border-color: var(--vareo-primary-active) !important;
  color: var(--vareo-on-primary) !important;
}

.ui.button:not(.primary),
.ui.basic.button:not(.primary),
.ui.secondary.button,
.oauth2-login-navigator .ui.button {
  min-height: 40px !important;
  padding: 12px 18px !important;
  background: var(--vareo-surface) !important;
  border: 1px solid var(--vareo-border) !important;
  border-radius: 8px !important;
  color: var(--vareo-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

input,
textarea,
.ui.input > input,
.ui.form input,
.ui.form textarea,
.ui.dropdown,
.ui.selection.dropdown {
  background-color: var(--vareo-input) !important;
  border-color: var(--vareo-border-strong) !important;
  color: var(--vareo-text) !important;
  border-radius: 8px !important;
}

input:focus,
textarea:focus,
.ui.input > input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.selection.dropdown:focus {
  border-color: var(--vareo-primary) !important;
  box-shadow: 0 0 0 2px rgba(47, 125, 255, 0.28) !important;
}

.ui.label,
.ui.labels .label,
.ui.basic.label {
  background-color: var(--vareo-surface-raised) !important;
  border-color: var(--vareo-border) !important;
  color: var(--vareo-text) !important;
  border-radius: 9999px !important;
}

.ui.primary.label,
.ui.primary.labels .label,
.ui.blue.label,
.ui.blue.labels .label {
  background-color: var(--vareo-primary) !important;
  border-color: var(--vareo-primary) !important;
  color: var(--vareo-on-primary) !important;
}

.repository .file-view,
.repository .file-header,
.repository .code-view,
.repository .lines-code,
.repository .lines-num,
.markup code,
.markup pre,
.chroma,
.CodeMirror {
  background-color: var(--vareo-surface) !important;
  border-color: var(--vareo-border) !important;
}

.chroma .k,
.chroma .kd,
.chroma .kr,
.chroma .o,
.chroma .nt,
.CodeMirror .cm-keyword {
  color: var(--vareo-primary) !important;
}

::selection {
  background: rgba(47, 125, 255, 0.35) !important;
  color: var(--vareo-text) !important;
}

/* Navbar */
#navbar,
#navbar .ui.menu,
#navbar .menu,
.ui.main.menu,
.ui.main.menu .menu,
.following.bar,
.following.bar.light,
.following.bar .ui.menu,
.following.bar .menu,
.navbar {
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 42px !important;
  background: var(--vareo-canvas) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--vareo-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#navbar .item::before,
.ui.main.menu .item::before,
.following.bar .item::before {
  display: none !important;
}

#navbar .item,
#navbar a.item,
.ui.main.menu .item,
.ui.main.menu a.item,
.following.bar .item,
.following.bar a.item,
.navbar .item {
  height: 64px !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--vareo-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 64px !important;
}

#navbar .item:hover,
#navbar a.item:hover,
.ui.main.menu .item:hover,
.ui.main.menu a.item:hover,
.following.bar .item:hover,
.following.bar a.item:hover,
#navbar .active.item,
.ui.main.menu .active.item {
  background: #121212 !important;
  color: var(--vareo-text) !important;
}

#navbar .item:first-child,
.ui.main.menu .item:first-child,
.following.bar .item:first-child {
  padding-left: 0 !important;
  padding-right: 28px !important;
}

#navbar .item:first-child img,
.ui.main.menu .item:first-child img {
  width: 32px !important;
  height: 32px !important;
  max-height: 32px !important;
}

#navbar .right.menu,
.ui.main.menu .right.menu,
.following.bar .right.menu {
  margin-left: auto !important;
  height: 64px !important;
  align-items: center !important;
}

#navbar .right.menu a.item[href*="/user/sign_up"],
.ui.main.menu .right.menu a.item[href*="/user/sign_up"] {
  height: 40px !important;
  min-height: 40px !important;
  margin: 12px 8px !important;
  padding: 0 18px !important;
  background: var(--vareo-primary) !important;
  color: var(--vareo-on-primary) !important;
  border: 1px solid var(--vareo-primary) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  line-height: 38px !important;
}

#navbar .right.menu a.item[href*="/user/login"],
.ui.main.menu .right.menu a.item[href*="/user/login"] {
  height: 40px !important;
  min-height: 40px !important;
  margin: 12px 0 !important;
  padding: 0 18px !important;
  background: var(--vareo-surface) !important;
  color: var(--vareo-text) !important;
  border: 1px solid var(--vareo-border) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  line-height: 38px !important;
}

/* Default Forgejo homepage, CSS-only */
.page-content.home {
  max-width: 1160px !important;
  min-height: calc(100vh - 128px) !important;
  margin: 0 auto !important;
  padding: 0 32px 88px !important;
}

.page-content.home > .tw-mb-8 {
  margin: 0 !important;
  padding: 92px 0 64px !important;
  border-bottom: 1px solid var(--vareo-border) !important;
}

.page-content.home .center,
.page-content.home .hero,
.page-content.home .hero .title,
.page-content.home .hero h1,
.page-content.home .hero h2 {
  text-align: left !important;
}

.page-content.home .logo {
  display: none !important;
}

.page-content.home .hero {
  max-width: 860px !important;
  margin: 0 auto 0 0 !important;
}

.page-content.home .hero .title,
.page-content.home .hero h1 {
  max-width: 860px !important;
  margin: 0 !important;
  color: var(--vareo-text) !important;
  font-size: clamp(54px, 6.8vw, 86px) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
}

.page-content.home .hero h2 {
  max-width: 760px !important;
  margin-top: 26px !important;
  color: var(--vareo-body-strong) !important;
  font-size: clamp(20px, 2.3vw, 30px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.025em !important;
}

.page-content.home .ui.stackable.middle.very.relaxed.page.grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
}

.page-content.home .ui.stackable.middle.very.relaxed.page.grid > .column {
  width: auto !important;
  min-height: 214px !important;
  padding: 30px !important;
  background: var(--vareo-surface) !important;
  border: 1px solid var(--vareo-border) !important;
  border-radius: 12px !important;
  text-align: left !important;
}

.page-content.home .ui.stackable.middle.very.relaxed.page.grid h1.hero {
  justify-content: flex-start !important;
  margin: 0 0 18px !important;
  color: var(--vareo-text) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.035em !important;
}

.page-content.home .ui.stackable.middle.very.relaxed.page.grid h1.hero svg {
  width: 32px !important;
  height: 32px !important;
  color: var(--vareo-primary) !important;
}

.page-content.home .ui.stackable.middle.very.relaxed.page.grid p.large {
  max-width: 92% !important;
  color: var(--vareo-body) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  text-align: left !important;
}

/* Auth screens: desktop split layout */
.page-content.user.signin,
.page-content.user.signup,
.page-content.user.forgot.password,
.page-content.user.reset.password {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(520px, 1fr) 520px !important;
  align-items: center !important;
  gap: 96px !important;
  width: 100% !important;
  max-width: 1280px !important;
  min-height: calc(100vh - 128px) !important;
  margin: 0 auto !important;
  padding: 48px 48px 96px !important;
}

.page-content.user.signin::before,
.page-content.user.signup::before,
.page-content.user.forgot.password::before,
.page-content.user.reset.password::before {
  content: "Secure access for Vareo teams.\AEntre com sua identidade central para acessar código, automações e repositórios privados.\A\A Git hosting · Authentik SSO · SSH on 2222";
  display: block;
  max-width: 640px !important;
  transform: translateY(-18px);
  white-space: pre-line;
  color: var(--vareo-body) !important;
  font-size: 18px !important;
  font-weight: 400;
  line-height: 1.65 !important;
}

.page-content.user.signin::first-line,
.page-content.user.signup::first-line,
.page-content.user.forgot.password::first-line,
.page-content.user.reset.password::first-line {
  color: var(--vareo-text) !important;
  font-size: clamp(48px, 5vw, 72px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.055em !important;
}

.page-content.user.signin::after,
.page-content.user.signup::after,
.page-content.user.forgot.password::after,
.page-content.user.reset.password::after {
  content: "";
  position: absolute;
  inset: auto auto 18% 7%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(47, 125, 255, 0.18), transparent 65%);
  pointer-events: none;
  z-index: -1;
}

.page-content.user.signin > .ui.middle.very.relaxed.page.grid,
.page-content.user.signup > .ui.middle.very.relaxed.page.grid,
.page-content.user.forgot.password > .ui.middle.very.relaxed.page.grid,
.page-content.user.reset.password > .ui.middle.very.relaxed.page.grid,
.page-content.user.signin .ui.container.fluid,
.page-content.user.signup .ui.container.fluid,
.page-content.user.forgot.password .ui.container.fluid,
.page-content.user.reset.password .ui.container.fluid {
  grid-column: 2 !important;
  display: block !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.page-content.user.signin .ui.attached.segment.header.top,
.page-content.user.signup .ui.attached.segment.header.top,
.page-content.user.forgot.password .ui.attached.segment.header.top,
.page-content.user.reset.password .ui.attached.segment.header.top,
.page-content.user.signin .ui.attached.header,
.page-content.user.signup .ui.attached.header,
.page-content.user.forgot.password .ui.attached.header,
.page-content.user.reset.password .ui.attached.header {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 32px 36px 8px !important;
  background: var(--vareo-surface) !important;
  border: 1px solid var(--vareo-border) !important;
  border-bottom: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  color: var(--vareo-text) !important;
  text-align: left !important;
  align-items: flex-start !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.04em !important;
}

.page-content.user.signin .ui.attached.segment:not(.header),
.page-content.user.signup .ui.attached.segment:not(.header),
.page-content.user.forgot.password .ui.attached.segment:not(.header),
.page-content.user.reset.password .ui.attached.segment:not(.header) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px 36px 36px !important;
  background: var(--vareo-surface) !important;
  border: 1px solid var(--vareo-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: none !important;
}

.page-content.user.signin .ui.form .field,
.page-content.user.signup .ui.form .field,
.page-content.user.forgot.password .ui.form .field,
.page-content.user.reset.password .ui.form .field {
  margin-bottom: 20px !important;
}

.page-content.user.signin .ui.form label,
.page-content.user.signup .ui.form label,
.page-content.user.forgot.password .ui.form label,
.page-content.user.reset.password .ui.form label {
  margin-bottom: 8px !important;
  color: var(--vareo-body-strong) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.page-content.user.signin .ui.form input,
.page-content.user.signup .ui.form input,
.page-content.user.forgot.password .ui.form input,
.page-content.user.reset.password .ui.form input,
.page-content.user.signin .ui.input,
.page-content.user.signup .ui.input,
.page-content.user.signin .ui.input > input,
.page-content.user.signup .ui.input > input {
  width: 100% !important;
  min-width: 0 !important;
}

.page-content.user.signin .ui.form input,
.page-content.user.signup .ui.form input,
.page-content.user.forgot.password .ui.form input,
.page-content.user.reset.password .ui.form input {
  height: 44px !important;
  padding: 0 14px !important;
  background: var(--vareo-input) !important;
  border: 1px solid var(--vareo-border-strong) !important;
  border-radius: 8px !important;
  color: var(--vareo-text) !important;
  font-size: 15px !important;
}

.page-content.user.signin .inline.field,
.page-content.user.signup .inline.field {
  position: relative !important;
  min-height: 24px !important;
  margin: 0 0 20px !important;
}

.page-content.user.signin .inline.field .ui.checkbox,
.page-content.user.signup .inline.field .ui.checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 20px !important;
}

.page-content.user.signin .ui.checkbox input,
.page-content.user.signup .ui.checkbox input {
  position: absolute !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  opacity: 0 !important;
}

.page-content.user.signin .ui.checkbox label,
.page-content.user.signup .ui.checkbox label {
  padding-left: 28px !important;
  color: var(--vareo-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

.page-content.user.signin .ui.checkbox label::before,
.page-content.user.signup .ui.checkbox label::before {
  width: 18px !important;
  height: 18px !important;
  background: var(--vareo-input) !important;
  border: 1px solid var(--vareo-border-strong) !important;
  border-radius: 4px !important;
}

.page-content.user.signin .ui.checkbox label::after,
.page-content.user.signup .ui.checkbox label::after {
  color: var(--vareo-primary) !important;
}

.page-content.user.signin .ui.primary.button,
.page-content.user.signup .ui.primary.button,
.page-content.user.forgot.password .ui.primary.button,
.page-content.user.reset.password .ui.primary.button {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 20px !important;
  line-height: 44px !important;
}

.page-content.user.signin .ui.divider,
.page-content.user.signup .ui.divider {
  margin: 22px 0 18px !important;
  color: var(--vareo-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

.page-content.user.signin .ui.divider::before,
.page-content.user.signin .ui.divider::after,
.page-content.user.signup .ui.divider::before,
.page-content.user.signup .ui.divider::after {
  border-top-color: var(--vareo-border) !important;
}

.page-content.user.signin .oauth2-login-navigator,
.page-content.user.signup .oauth2-login-navigator {
  display: grid !important;
  gap: 10px !important;
}

.page-content.user.signin .oauth2-login-navigator .ui.button,
.page-content.user.signup .oauth2-login-navigator .ui.button {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 18px !important;
  background: var(--vareo-input) !important;
  border: 1px solid var(--vareo-border) !important;
  border-radius: 8px !important;
  color: var(--vareo-text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: normal !important;
  text-align: center !important;
}

.page-content.user.signin .oauth2-login-navigator .ui.button:hover,
.page-content.user.signup .oauth2-login-navigator .ui.button:hover {
  background: var(--vareo-surface-raised) !important;
  border-color: var(--vareo-border-strong) !important;
}

.page-content.user.signin .oauth2-login-navigator .ui.button svg,
.page-content.user.signup .oauth2-login-navigator .ui.button svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--vareo-primary) !important;
}

.page-content.user.signin .ui.attached.segment:last-child,
.page-content.user.signup .ui.attached.segment:last-child,
.page-content.user.signin > .ui.attached.segment:last-child,
.page-content.user.signup > .ui.attached.segment:last-child {
  width: 100% !important;
  max-width: 520px !important;
  margin-top: 16px !important;
  padding: 22px 30px !important;
  background: var(--vareo-surface) !important;
  border: 1px solid var(--vareo-border) !important;
  border-radius: 12px !important;
  color: var(--vareo-body) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  text-align: left !important;
  box-shadow: none !important;
}

.page-content.user.signin .ui.attached.segment:last-child a,
.page-content.user.signup .ui.attached.segment:last-child a,
.page-content.user.signin a,
.page-content.user.signup a,
.page-content.user.forgot.password a,
.page-content.user.reset.password a {
  color: var(--vareo-primary) !important;
  font-weight: 700 !important;
}

.page-content.user.signin .ui.input .icon,
.page-content.user.signup .ui.input .icon {
  opacity: 0.55 !important;
  right: 12px !important;
}

footer,
.page-footer {
  background-color: var(--vareo-canvas) !important;
  border-top: 1px solid var(--vareo-border) !important;
  color: var(--vareo-muted) !important;
}

@media (max-width: 1180px) {
  .page-content.user.signin,
  .page-content.user.signup,
  .page-content.user.forgot.password,
  .page-content.user.reset.password {
    grid-template-columns: minmax(420px, 1fr) 500px !important;
    gap: 64px !important;
  }
}

@media (max-width: 980px) {
  .page-content.user.signin,
  .page-content.user.signup,
  .page-content.user.forgot.password,
  .page-content.user.reset.password {
    display: block !important;
    max-width: 560px !important;
    min-height: auto !important;
    padding: 48px 20px 72px !important;
  }

  .page-content.user.signin::before,
  .page-content.user.signup::before,
  .page-content.user.forgot.password::before,
  .page-content.user.reset.password::before,
  .page-content.user.signin::after,
  .page-content.user.signup::after,
  .page-content.user.forgot.password::after,
  .page-content.user.reset.password::after {
    display: none !important;
  }

  .page-content.user.signin > .ui.middle.very.relaxed.page.grid,
  .page-content.user.signup > .ui.middle.very.relaxed.page.grid,
  .page-content.user.forgot.password > .ui.middle.very.relaxed.page.grid,
  .page-content.user.reset.password > .ui.middle.very.relaxed.page.grid {
    max-width: none !important;
  }
}

@media (max-width: 900px) {
  #navbar,
  .ui.main.menu,
  .following.bar,
  .following.bar.light,
  .navbar {
    height: auto !important;
    min-height: 56px !important;
    padding: 0 16px !important;
  }

  #navbar .item,
  .ui.main.menu .item,
  .following.bar .item,
  .navbar .item {
    min-height: 56px !important;
    height: 56px !important;
    line-height: 56px !important;
    padding: 0 10px !important;
  }

  .page-content.home {
    padding: 0 20px 56px !important;
  }

  .page-content.home > .tw-mb-8 {
    padding: 72px 0 48px !important;
  }

  .page-content.home .ui.stackable.middle.very.relaxed.page.grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .page-content.user.signin,
  .page-content.user.signup,
  .page-content.user.forgot.password,
  .page-content.user.reset.password {
    padding: 40px 16px 64px !important;
  }

  .page-content.user.signin .ui.attached.header,
  .page-content.user.signup .ui.attached.header,
  .page-content.user.signin .ui.attached.segment,
  .page-content.user.signup .ui.attached.segment {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}