/*
 * SPDX-FileCopyrightText: 2026 NADRE
 * SPDX-License-Identifier: GPL-3.0-or-later
 *
 * NADRE presentation overrides.
 *
 * Loaded through the `css` block in branding/semantic-ui/invenio_app_rdm/page.html
 * after the compiled webpack bundle, so plain selectors here win on source order
 * without needing !important against equal-specificity upstream rules.
 *
 * Kept as a standalone stylesheet rather than LESS in assets/ because assets/ is
 * not bind-mounted into the web-ui container and there is no node/npm in this
 * environment to rebuild the bundle.
 */

/* ------------------------------------------------------------------ *
 * Header logo
 *
 * The compiled bundle caps the logo with `max-height: 5.357rem` inside a
 * 96px nav and applies `padding-bottom: .5rem` with no matching top
 * padding. Because the source image is 400x163, width is a direct
 * multiple of height (x2.454), so the only way to make the logo WIDER
 * is to give it more height. The nav is grown to match so the taller
 * image is not clipped, and the vertical padding is made symmetric.
 * ------------------------------------------------------------------ */
/* Nav height tracks the logo: 112px image + 10px padding top and bottom
   = 132px, so the taller logo is never clipped by the bar. Keep these two
   in step or the image gets cut off. */
#invenio-nav.ui.menu {
  height: 132px;
}

#invenio-nav .item.logo {
  padding-right: 1.5rem;
}

/* Specificity note: the compiled bundle contains BOTH
     .rdm-logo { width: 100%; padding-bottom: .5rem }
   and, for the admin pages only,
     .invenio-administration .rdm-logo { width: 180px; max-width: 100% }
   Both are two-class selectors. The #invenio-nav prefix below gives this
   rule one id + one class, which outranks them without !important, and
   the ids are stable on this markup (nav#invenio-nav > .item.logo > a.logo-link > img.rdm-logo). */
#invenio-nav .rdm-logo {
  /* Drive the size from the height so the intrinsic aspect ratio keeps
     the logo undistorted, and let it fill the extra width.
     At 112px the 400x163 source renders about 275px wide (2.454 ratio).
     300px is the real ceiling here, set below, not an arbitrary figure:
     the full nav row (logo + 200px search + Communities + My dashboard +
     Log in/Sign up) needs roughly 930px, and the horizontal menu only
     exists at >=1280px, so there is comfortable slack to grow into.
     max-width is deliberately looser than that so it only ever guards
     against a narrower viewport, never squeezes the logo. */
  height: 112px;
  width: auto;
  max-width: 300px;
  max-height: 112px;
  /* Symmetric vertical breathing room, replacing the old bottom-only
     padding, and no horizontal padding so the image is not squeezed. */
  padding: 10px 0;
  object-fit: contain;
}

#invenio-nav .logo-link {
  display: flex;
  align-items: center;
  line-height: 0;
}

/* Keep the burger button and nav items optically centred against the
   taller logo rather than the top of the bar. */
#invenio-nav.ui.menu > .ui.menu,
#invenio-nav .search-bar,
#invenio-nav #rdm-burger-toggle {
  align-self: center;
}

/* ------------------------------------------------------------------ *
 * Header layout: logo far left, nav items centred
 *
 * Without this the search bar, Communities and My dashboard sit flush
 * against the logo, because Semantic's .ui.menu is a plain flex row and
 * those items carry no auto margin. .right.menu already has
 * `margin-left: auto !important` from the bundle, which is what pins
 * Log in / Sign up to the right edge; the missing half is a matching
 * auto margin in FRONT of the nav group, so the group lands in the
 * middle instead of hugging the logo.
 *
 * The fix is one auto margin, not a hard-coded pixel offset. Flexbox
 * distributes free space to `margin: auto` boxes, so adding a matching
 * `margin-left: auto` in front of the nav group splits the slack evenly
 * between "before search" and "before Log in". That centres the group and
 * stays correct when the logo is resized, when the search bar is a
 * different width, or when the right-hand group gains a button - none of
 * which a fixed pixel value would survive.
 *
 * Scoped to the same >=1280px breakpoint the bundle uses to hide the
 * burger and show the full horizontal menu. Below 1280px the menu becomes
 * a right-hand slide-out drawer (position:fixed, max-width:80vw,
 * flex-direction:column), and auto margins there would strand the items
 * instead of centring them.
 * ------------------------------------------------------------------ */
@media screen and (min-width: 1280px) {
  #invenio-menu.ui.menu {
    /* Let the menu fill the space left over next to the logo, otherwise
       it is only as wide as its contents and the auto margins have no
       slack to distribute. */
    flex: 1 1 auto;
  }

  #invenio-menu.ui.menu > .item.search-bar {
    margin-left: auto;
  }

  /* Search bar must not absorb the slack itself, or it would grow and
     push the links off-centre. The bundle already fixes
     #header-search-bar .ui.input at 200px. */
  #invenio-menu.ui.menu .item.search-bar {
    flex: 0 0 auto;
  }
}

/* On narrow screens the 260px logo plus the menu no longer fit on one
   line; drop back to the original compact size. */
@media (max-width: 767px) {
  #invenio-nav.ui.menu {
    height: 64px;
  }

  #invenio-nav .rdm-logo {
    height: 48px;
    max-width: 200px;
    max-height: 48px;
    padding: 4px 0;
  }
}

/* ------------------------------------------------------------------ *
 * White header
 *
 * Replaces the bundle's blue gradient bar
 *   .outer-navbar { background-color:#0377cd; background-image:linear-gradient(...) }
 * with a white bar, a hairline bottom border and a soft shadow. The logo is
 * a JPEG on a white ground, so on white it no longer sits in a visible box.
 *
 * The markup is a `.ui.inverted.menu`, which makes Semantic paint every item,
 * link and `.inverted` icon white. Each of those rules is re-coloured below
 * with an #invenio-nav-prefixed selector so it outranks the bundle without
 * !important. Below 1280px the menu is the bundle's white slide-out drawer,
 * which already uses dark text, so the link pills are desktop-only.
 * ------------------------------------------------------------------ */
.theme.header {
  --nadre-header-bg: #ffffff;
  --nadre-header-border: #e6e9ef;
  --nadre-header-text: #1f2937;
  --nadre-header-muted: #6b7280;
  /* NADRE teal; the hover shade matches the primary-button hover below. */
  --nadre-header-accent: #09708a;
  --nadre-header-accent-hover: #025f77;
  --nadre-header-accent-soft: #e6f3f6;
  --nadre-header-field: #f5f7fa;
  --nadre-header-ring: rgba(9, 112, 138, 0.14);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06);
}

.outer-navbar {
  background-color: var(--nadre-header-bg);
  background-image: none;
  border-bottom: 1px solid var(--nadre-header-border);
}

.outer-navbar a {
  color: var(--nadre-header-text);
}

#invenio-nav.ui.inverted.menu .item,
#invenio-nav.ui.inverted.menu .item > a:not(.ui) {
  color: var(--nadre-header-text);
}

/* Nav links: teal pill on hover, teal underline when active. */
@media screen and (min-width: 1280px) {
  #invenio-nav.ui.menu .ui.menu .item a:not(.ui.button) {
    position: relative;
    margin: 0 0.25rem;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    font-weight: 500;
    transition: color 0.15s ease, background-color 0.15s ease;
  }

  #invenio-nav.ui.menu .ui.menu .item a:not(.ui.button):hover,
  #invenio-nav.ui.menu .ui.menu .item a:not(.ui.button):focus-visible {
    color: var(--nadre-header-accent);
    background-color: var(--nadre-header-accent-soft);
  }

  #invenio-nav.ui.menu .ui.menu .item.active > a:not(.ui.button) {
    color: var(--nadre-header-accent);
  }

  #invenio-nav.ui.menu .ui.menu .item.active > a:not(.ui.button)::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.15rem;
    height: 2px;
    border-radius: 2px;
    background: var(--nadre-header-accent);
  }
}

/* Inbox / quick-create icons and the burger are white in the bundle. */
#invenio-nav i.inverted.icon {
  color: var(--nadre-header-text);
}

#rdm-burger-menu-icon .navicon,
#rdm-burger-menu-icon .navicon::before,
#rdm-burger-menu-icon .navicon::after {
  background: var(--nadre-header-text);
}

/* Search: one rounded field (input + joined button), teal focus ring.
   The ring sits on the wrapper so it wraps both halves as one shape. */
#header-search-bar .ui.fluid.search .ui.input {
  border-radius: 10px;
  transition: box-shadow 0.15s ease;
}

#header-search-bar .ui.fluid.search .ui.input:focus-within {
  box-shadow: 0 0 0 3px var(--nadre-header-ring);
}

#header-search-bar .ui.fluid.search .ui.input .prompt {
  background: var(--nadre-header-field);
  border: 1px solid var(--nadre-header-border);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  color: var(--nadre-header-text);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

#header-search-bar .ui.fluid.search .ui.input .prompt::placeholder {
  color: var(--nadre-header-muted);
}

#header-search-bar .ui.fluid.search .ui.input .ui.button.search {
  margin: 0;
  background: var(--nadre-header-field);
  border: 1px solid var(--nadre-header-border);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  color: var(--nadre-header-muted);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

#header-search-bar .ui.fluid.search .ui.input:focus-within .prompt,
#header-search-bar .ui.fluid.search .ui.input:focus-within .ui.button.search {
  background: var(--nadre-header-bg);
  border-color: var(--nadre-header-accent);
}

#header-search-bar .ui.fluid.search .ui.input:focus-within .ui.button.search,
#header-search-bar .ui.fluid.search .ui.input .ui.button.search:hover {
  color: var(--nadre-header-accent);
}

/* Log in: outlined teal. (Sign up is gone: SECURITY_REGISTERABLE = False.) */
#invenio-nav .ui.button.auth-button {
  border-radius: 10px;
  font-weight: 600;
  padding: 0.75em 1.25em;
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

#invenio-nav .ui.button.auth-button {
  background: var(--nadre-header-bg);
  color: var(--nadre-header-accent);
  box-shadow: inset 0 0 0 1px var(--nadre-header-border);
}

#invenio-nav .ui.button.auth-button:hover,
#invenio-nav .ui.button.auth-button:focus-visible {
  background: var(--nadre-header-accent-soft);
  box-shadow: inset 0 0 0 1px var(--nadre-header-accent);
}

/* Logged in: the account button is a `.ui.text.button`. */
#invenio-nav #user-profile-dropdown-btn {
  color: var(--nadre-header-text);
  border-radius: 10px;
}

#invenio-nav #user-profile-dropdown-btn:hover {
  background: var(--nadre-header-accent-soft);
  color: var(--nadre-header-accent);
}

/* ------------------------------------------------------------------ *
 * Mobile / tablet navigation (below 1280px)
 *
 * Under 1280px the bundle hides the horizontal menu and turns #invenio-menu
 * into a fixed slide-out drawer that theme.js opens by adding `.active` to
 * #invenio-nav. Three things broke it:
 *
 * 1. The drawer is position:fixed with no `top`, so it sits at its static
 *    position - and the `align-self: center` in "Header logo" above centres
 *    that 100vh box on the 132px bar, so it opened ~360px ABOVE the screen
 *    with all its links out of view. Pinned to top:0 here.
 * 2. The bundle places the burger at `right: -1.5rem`, i.e. outside the
 *    container, which made every page ~7px wider than the phone and let it
 *    scroll sideways.
 * 3. Nothing dimmed the page behind the drawer, so it read as a white
 *    panel pasted over the content, and there was no way to close it other
 *    than the small X.
 *
 * The backdrop is #invenio-nav's own ::before, so a tap on it has
 * #invenio-nav as its target; nadre-nav.js closes the drawer on that.
 * ------------------------------------------------------------------ */
@keyframes nadre-drawer-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes nadre-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media screen and (max-width: 1279px) {
  #rdm-burger-toggle {
    right: 0;
  }

  #rdm-burger-toggle #rdm-burger-menu-icon {
    padding: 1.25rem 0.9rem;
    border-radius: 10px;
  }

  #rdm-burger-toggle #rdm-burger-menu-icon:hover,
  #rdm-burger-toggle #rdm-burger-menu-icon:focus-visible {
    background: var(--nadre-header-accent-soft);
  }

  #invenio-nav.ui.menu.active::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(15, 23, 42, 0.45);
    animation: nadre-fade-in 0.2s ease-out;
  }

  /* Freeze the page underneath while the drawer is open. */
  body:has(#invenio-nav.ui.menu.active) {
    overflow: hidden;
  }

  #invenio-nav.ui.menu.active #invenio-menu.ui.menu {
    top: 0;
    right: 0;
    align-self: auto;
    /* `.ui.menu.fluid` forces width:100% !important, so the drawer is
       sized through max-width (the bundle's own lever) instead. */
    max-width: min(22rem, 86vw);
    height: 100vh;
    height: 100dvh;
    padding: 0.75rem 1.25rem 2rem;
    border-radius: 0;
    box-shadow: -8px 0 32px rgba(16, 24, 40, 0.18);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: nadre-drawer-in 0.22s ease-out;
  }

  #invenio-nav.ui.menu.active #invenio-menu.ui.menu #rdm-close-burger-menu-icon {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 -0.5rem 1rem auto;
    padding: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #invenio-nav.ui.menu.active #invenio-menu.ui.menu #rdm-close-burger-menu-icon:hover,
  #invenio-nav.ui.menu.active #invenio-menu.ui.menu #rdm-close-burger-menu-icon:focus-visible {
    background: var(--nadre-header-accent-soft);
  }

  #invenio-nav.ui.menu.active #invenio-menu.ui.menu #rdm-close-burger-menu-icon .navicon::before,
  #invenio-nav.ui.menu.active #invenio-menu.ui.menu #rdm-close-burger-menu-icon .navicon::after {
    background: var(--nadre-header-text);
  }

  /* Search fills the drawer width instead of the bundle's fixed 20rem. */
  #invenio-nav.ui.menu.active #invenio-menu.ui.menu .item.search-bar {
    margin-bottom: 1rem;
    padding: 0;
  }

  #invenio-nav.ui.menu.active #invenio-menu.ui.menu #header-search-bar,
  #invenio-nav.ui.menu.active #invenio-menu.ui.menu #header-search-bar .ui.fluid.search,
  #invenio-nav.ui.menu.active #invenio-menu.ui.menu #header-search-bar .ui.fluid.search.focus,
  #invenio-nav.ui.menu.active #invenio-menu.ui.menu #header-search-bar .ui.fluid.search .results {
    width: 100%;
  }

  #invenio-nav.ui.menu #invenio-menu .item.search-bar .ui.input {
    width: 100% !important;
    height: 44px !important;
  }

  #invenio-nav.ui.menu #invenio-menu .item.search-bar .ui.input > input {
    width: 100% !important;
    height: 44px !important;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Links: full-width rows with a 44px tap target. */
  #invenio-nav.ui.menu.active #invenio-menu.ui.menu > .item:not(.search-bar):not(.right) {
    padding: 0;
  }

  #invenio-nav.ui.menu.active #invenio-menu.ui.menu .item a:not(.ui.button) {
    display: block;
    padding: 0.8rem 0.75rem;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--nadre-header-text);
  }

  #invenio-nav.ui.menu.active #invenio-menu.ui.menu .item a:not(.ui.button):hover,
  #invenio-nav.ui.menu.active #invenio-menu.ui.menu .item a:not(.ui.button):focus-visible {
    background: var(--nadre-header-accent-soft);
    color: var(--nadre-header-accent);
    text-decoration: none;
  }

  #invenio-nav.ui.menu.active #invenio-menu.ui.menu > .item.active > a:not(.ui.button) {
    background: var(--nadre-header-accent-soft);
    color: var(--nadre-header-accent);
  }

  /* Account area, separated from the links by a hairline. */
  #invenio-nav.ui.menu.active #invenio-menu.ui.menu .item.right.menu {
    width: 100%;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--nadre-header-border);
    align-items: stretch;
  }

  #invenio-nav.ui.menu.active #invenio-menu.ui.menu .item.right.menu form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.25rem;
  }

  #invenio-nav.ui.menu.active #invenio-menu.ui.menu .item.right.menu form .ui.button {
    width: 100%;
    margin: 0;
    padding: 0.9em 1.25em;
    text-align: center;
  }

  #invenio-nav.ui.menu.active #invenio-menu.ui.menu .item.right.menu .sub-menu {
    margin: 1rem 0 0;
  }

  #invenio-nav.ui.menu.active #invenio-menu.ui.menu .item.right.menu .sub-menu .ui.header {
    margin: 0 0 0.25rem;
    padding: 0 0.75rem;
    color: var(--nadre-header-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  #invenio-nav.ui.menu.active #invenio-menu.ui.menu .item.right.menu .sub-menu .item {
    display: block;
    padding: 0.7rem 0.75rem;
    border-radius: 8px;
    color: var(--nadre-header-text);
  }

  #invenio-nav.ui.menu.active #invenio-menu.ui.menu .item.right.menu .sub-menu .item:hover {
    background: var(--nadre-header-accent-soft);
    color: var(--nadre-header-accent);
  }

  #invenio-nav.ui.menu.active #invenio-menu.ui.menu .item.inbox a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  /* Safety net: anything that still pokes past the edge (grids with
     negative gutters, wide tables) must not make the whole page pan
     sideways. `clip` rather than `hidden` so position:sticky still works. */
  html,
  body {
    overflow-x: clip;
  }
}

/* Login / password pages (page_cover.html) make <body> itself a
   `.ui.grid`, whose -1rem side margins push the page 14px past both edges. */
body.cover-page.ui.grid {
  margin-left: 0;
  margin-right: 0;
}

/* ------------------------------------------------------------------ *
 * Login page (and the other cover pages: forgot/reset password, resend
 * confirmation)
 *
 * The bundle paints every cover page with a blue left-to-right gradient
 * and white text. NADRE uses a quiet light ground with the logo's
 * green/yellow/red stripe on top, and the login page itself is one card:
 * a teal brand panel beside the form on wide screens, the form alone on
 * phones. Markup: branding/semantic-ui/invenio_accounts/login_user.html.
 * ------------------------------------------------------------------ */
html.cover-page {
  --nadre-auth-bg: #eef3f5;
  --nadre-auth-card: #ffffff;
  --nadre-auth-border: #dfe6ea;
  --nadre-auth-text: #1f2937;
  --nadre-auth-muted: #5b6573;
  --nadre-auth-accent: #09708a;
  --nadre-auth-accent-dark: #06495a;
  --nadre-auth-ring: rgba(9, 112, 138, 0.18);
  min-height: 100%;
  background: var(--nadre-auth-bg);
  background-image: radial-gradient(1200px 500px at 50% -10%, rgba(9, 112, 138, 0.10), transparent 70%);
  color: var(--nadre-auth-text);
}

html.cover-page::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  z-index: 10;
  background: linear-gradient(90deg, #078930 0 33.34%, #fcdd09 33.34% 66.67%, #da121a 66.67% 100%);
}

/* The bundle also gives .cover-page `display:flex; height:20em` (meant for a
   hero banner), which caps <html> and pins the card to the top edge. */
html.cover-page {
  display: block;
  height: auto;
}

body.cover-page.ui.grid {
  height: auto;
  min-height: 100vh;
  margin: 0;
  background: transparent;
  color: var(--nadre-auth-text);
}

/* The other cover pages keep their own markup: their logo sits on the light
   ground (multiply drops the JPEG's white box) and their header text, which
   the bundle makes white, is dark again. */
.cover-page .ui.centered.medium.image {
  mix-blend-mode: multiply;
  max-width: 240px;
}

.cover-page .ui.header,
.cover-page .ui.segment .ui.header {
  color: var(--nadre-auth-text);
}

.cover-page a.ui.inverted.header {
  color: var(--nadre-auth-accent);
}

.cover-page .ui.segments {
  border: 1px solid var(--nadre-auth-border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
  overflow: hidden;
}

.cover-page .ui.primary.segment {
  border-top: 1px solid var(--nadre-auth-border);
  color: var(--nadre-auth-muted);
}

/* Login: the cover template wraps the panel in a "ten wide" column, too
   narrow for two panes, so the column is let out to the card's own width.
   Semantic sets those widths with !important at (0,4,0), hence the long
   selectors. */
html.cover-page .ui.grid.container > .column:has(.nadre-login) {
  width: 100% !important;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
}

html.cover-page body.ui.grid > main.column:has(.nadre-login) {
  align-self: center;
  padding: 3rem 16px;
}

.nadre-login {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--nadre-auth-card);
  border: 1px solid var(--nadre-auth-border);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 20px 50px rgba(16, 24, 40, 0.10);
  text-align: left;
}

.nadre-login-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3rem 2.5rem;
  overflow: hidden;
  background: linear-gradient(160deg, var(--nadre-auth-accent) 0%, var(--nadre-auth-accent-dark) 100%);
  color: #ffffff;
}

/* Two soft rings for depth; purely decorative. */
.nadre-login-brand::before,
.nadre-login-brand::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.nadre-login-brand::before {
  width: 420px;
  height: 420px;
  top: -160px;
  right: -180px;
}

.nadre-login-brand::after {
  width: 260px;
  height: 260px;
  top: -70px;
  right: -90px;
}

.nadre-login-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.75);
}

.nadre-login-tagline {
  margin: 0 0 1rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
}

.nadre-login-lead {
  margin: 0 0 1.75rem;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.nadre-login-points {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nadre-login-points li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.55rem 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
}

.nadre-login-points .icon {
  margin: 0;
  color: #fcdd09;
}

.nadre-login-main {
  padding: 2.75rem 3rem 2.25rem;
}

.nadre-login-logo {
  display: inline-block;
  margin-bottom: 1.75rem;
}

.nadre-login-logo img {
  display: block;
  width: 170px;
  height: auto;
}

.nadre-login-title {
  margin: 0 0 0.35rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--nadre-auth-text);
}

.nadre-login-subtitle {
  margin: 0 0 1.75rem;
  color: var(--nadre-auth-muted);
}

.nadre-login-form.ui.form .field {
  margin-bottom: 1.15rem;
}

.nadre-login-form.ui.form .field > label,
.nadre-login-label-row label {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--nadre-auth-text);
}

.nadre-login-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.nadre-login-label-row a {
  font-size: 0.875rem;
  font-weight: 500;
}

.nadre-login-form.ui.form input[type=email],
.nadre-login-form.ui.form input[type=password] {
  padding: 0.8em 0.95em;
  border: 1px solid #cfd8de;
  border-radius: 10px;
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nadre-login-form.ui.form input[type=email]:focus,
.nadre-login-form.ui.form input[type=password]:focus {
  border-color: var(--nadre-auth-accent);
  box-shadow: 0 0 0 3px var(--nadre-auth-ring);
}

.nadre-login-form .ui.primary.button {
  margin-top: 0.5rem;
  padding: 0.95em 1.25em;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}

.nadre-login-form .ui.negative.message {
  border-radius: 10px;
}

.nadre-login-help {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--nadre-auth-border);
  font-size: 0.9rem;
  color: var(--nadre-auth-muted);
}

.nadre-login-help p {
  margin: 0 0 0.4rem;
}

.nadre-login-help a,
.nadre-login-label-row a,
.nadre-login-legal a {
  color: var(--nadre-auth-accent);
}

.nadre-login-help a:hover,
.nadre-login-label-row a:hover,
.nadre-login-legal a:hover {
  color: var(--nadre-auth-accent-dark);
  text-decoration: underline;
}

.nadre-login-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
  font-size: 0.85rem;
}

.nadre-login-legal a {
  color: var(--nadre-auth-muted);
}

/* Flash messages (e.g. "Please log in to access this page") sit above the
   card and must stay inside its width. */
.cover-page main:has(.nadre-login) .flashed-messages,
.cover-page main:has(.nadre-login) > .ui.message {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 860px) {
  .nadre-login {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .nadre-login-brand {
    display: none;
  }

  .nadre-login-main {
    padding: 2rem 1.5rem 1.75rem;
  }

  html.cover-page body.ui.grid > main.column:has(.nadre-login) {
    padding: 2rem 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #invenio-nav.ui.menu.active::before,
  #invenio-nav.ui.menu.active #invenio-menu.ui.menu {
    animation: none;
  }
}

/* Long unbroken words (e.g. "REINFORCEMENTREINFORCEMENTLAMINATES" in a
   record title) otherwise stretch the page past the phone's width. Titles
   are inline-block links, which `break-word` cannot shrink, so headings and
   links get `anywhere`, which also lowers their min-content width. */
@media screen and (max-width: 767px) {
  main {
    overflow-wrap: break-word;
  }

  main :is(h1, h2, h3, h4, .header, a) {
    overflow-wrap: anywhere;
  }
}

/* ------------------------------------------------------------------ *
 * Centring
 * ------------------------------------------------------------------ */

/* Centring for the frontpage intro section ("Welcome to NADRE!" and its
   subtitle). Currently dormant: that block is commented out in
   templates/semantic-ui/zenodo_rdm/frontpage.html. Left in place so restoring
   the banner restores the centring with it. If a different section ever uses
   the .light-bg.rel-pt-3.rel-pb-3 combination, scope these rules to the
   frontpage rather than letting them leak onto other pages. */
.light-bg.rel-pt-3.rel-pb-3 {
  text-align: center;
}

.light-bg .section-title {
  margin-left: auto;
  margin-right: auto;
}

.light-bg .section-title + p {
  text-align: center;
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}

/* The "National Academic Digital Repository of Ethiopia ..." blurb that
   renders in the footer's right-hand column, inside a "right aligned"
   column. Centre the block. */
#rdm-footer-element .six.wide.column.right.aligned {
  text-align: center;
}

#rdm-footer-element .six.wide.column.right.aligned .ui.link.list .item {
  text-align: center;
}

/* ------------------------------------------------------------------ *
 * Footer
 *
 * Light upper band, so the white-ground logo JPEG sits on it without a box
 * and the page is framed by the white header above and this below, then a
 * teal bottom bar for the legal line. The 4px green/yellow/red stripe
 * on top repeats the swoosh in the logo.
 *
 * Markup: templates/semantic-ui/zenodo_rdm/footer.html (.nadre-footer) and
 * branding/semantic-ui/invenio_app_rdm/site_footer.html (.nadre-footer-bottom).
 * Every rule is scoped to those classes so the bundle's footer styles are
 * only replaced where the NADRE markup is present.
 * ------------------------------------------------------------------ */
#rdm-footer-element {
  --nadre-footer-bg: #f6f7fb;
  --nadre-footer-border: #e3e6ee;
  --nadre-footer-heading: #111827;
  --nadre-footer-text: #4b5563;
  --nadre-footer-link: #374151;
  --nadre-footer-accent: #09708a;
  --nadre-footer-bar-bg: #09708a;
  --nadre-footer-bar-text: #e0f2f5;
}

#rdm-footer-element .footer-top.nadre-footer {
  position: relative;
  padding: 3.5rem 0 3rem;
  background: var(--nadre-footer-bg);
  border-top: 1px solid var(--nadre-footer-border);
  color: var(--nadre-footer-text);
}

#rdm-footer-element .footer-top.nadre-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #078930 0 33.34%, #fcdd09 33.34% 66.67%, #da121a 66.67% 100%);
}

.nadre-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem 3rem;
}

.nadre-footer-logo {
  display: inline-block;
  line-height: 0;
}

.nadre-footer-logo img {
  /* The JPEG has a pure white ground; multiply drops it onto the tinted
     band instead of showing a white box. */
  mix-blend-mode: multiply;
  width: auto;
  height: 72px;
  max-width: 100%;
}

.nadre-footer-tagline {
  margin: 1rem 0 0.5rem;
  color: var(--nadre-footer-accent);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.nadre-footer-description {
  max-width: 26rem;
  margin: 0;
  font-size: 0.925rem;
  line-height: 1.6;
}

.nadre-footer .nadre-footer-heading {
  margin: 0.25rem 0 1rem;
  color: var(--nadre-footer-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nadre-footer-column {
  /* A global `nav { padding: 0 15px }` in the bundle would indent the link
     columns against the brand column. */
  padding: 0;
}

.nadre-footer-column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nadre-footer-column li + li {
  margin-top: 0.65rem;
}

/* The bundle forces `#rdm-footer-element a { color: #e5f4ff !important }`
   (white-on-teal footer), so these must be !important too; the extra class
   wins the tie on specificity. */
#rdm-footer-element .nadre-footer-column a {
  color: var(--nadre-footer-link) !important;
  transition: color 0.15s ease;
}

#rdm-footer-element .nadre-footer-column a:hover,
#rdm-footer-element .nadre-footer-column a:focus-visible {
  color: var(--nadre-footer-accent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#rdm-footer-element .footer-bottom.nadre-footer-bottom {
  padding: 1.1rem 0;
  background: var(--nadre-footer-bar-bg);
  box-shadow: none;
  color: var(--nadre-footer-bar-text);
  font-size: 0.875rem;
}

.ui.container.nadre-footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.nadre-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nadre-footer-powered {
  padding-left: 1.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

#rdm-footer-element .nadre-footer-bottom a {
  color: #ffffff !important;
  transition: opacity 0.15s ease;
}

#rdm-footer-element .nadre-footer-bottom a:hover,
#rdm-footer-element .nadre-footer-bottom a:focus-visible {
  opacity: 0.8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tablet: brand on its own row above the three link columns. */
@media screen and (max-width: 991px) {
  .nadre-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nadre-footer-brand {
    grid-column: 1 / -1;
  }
}

/* Phone: two link columns, larger tap targets, bottom bar stacked. */
@media screen and (max-width: 600px) {
  #rdm-footer-element .footer-top.nadre-footer {
    padding: 2.5rem 0 2rem;
  }

  .nadre-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }

  .nadre-footer-logo img {
    height: 60px;
  }

  .nadre-footer-column li + li {
    margin-top: 0.85rem;
  }

  .ui.container.nadre-footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .nadre-footer-legal {
    gap: 0.6rem 1.25rem;
  }

  .nadre-footer-powered {
    flex-basis: 100%;
    padding-left: 0;
    border-left: 0;
  }
}

/* ------------------------------------------------------------------ *
 * Theme blue and green buttons -> NADRE teal
 *
 * The compiled bundle (static/dist/css/6874.*.css) paints links, primary
 * buttons/headers/labels and every focus state in Zenodo blue (#2f6fa7
 * primary, #2185d0 Semantic focus). The LESS can't be
 * rebuilt in this image, so each of those rules is repeated here with only
 * its colour declarations, recoloured. Same selectors, loaded later, so they
 * win on source order. Shade map:
 *   #2f6fa7, #2185d0 -> #09708a     #24557f -> #06495a
 *   #246298 -> #025f77   #1c5a91 -> #00566d   #21629b -> #00617a
 *   inverted #54c8ff/#3ac0ff/#2bbbff/#21b8ff -> #4cc3d9/#36bad2/#29b3cc/#1eadc7
 * Semantic's named `.blue` variants are colour-coded on purpose and stay blue.
 *
 * Green buttons (.positive #3a833a, .green #048622 - "New upload", "Save",
 * "Publish", ...) take the same teal, shade for shade by role. Only button
 * selectors: green success messages and labels still mean "OK".
 *
 * .cover-page rules are skipped: "Login page" above restyles it by hand.
 * Generated from the bundle; regenerate if the image is rebuilt.
 * ------------------------------------------------------------------ */
a {
  color:#09708a;
}

.collection-tree-section.drag-over {
  border-left:3px solid #09708a;
}

.collection-card.drag-over {
  border-left:3px solid #09708a;
}

.collection-grid-column.drag-over {
  border-left:3px solid #09708a;
}

.collection-child-item.drag-over {
  border-left:3px solid #09708a;
}

.collection-link {
  color:#09708a;
}

button:focus-visible,
a:focus-visible {
  outline:3px solid #09708a!important;
}

.section-content h6 {
  color:#09708a;
}

.command-line a:hover,
.command-line a:focus,
.hp-blog-section a:hover,
.hp-blog-section a:focus {
  color:#09708a;
}

.section-title {
  color:#09708a;
}

.ui.primary.header {
  color:#09708a!important;
}

.ui.green.buttons .button,
.ui.green.button {
  background-color:#09708a;
}

.ui.green.buttons .button:hover,
.ui.green.button:hover {
  background-color:#025f77;
}

.ui.green.buttons .button:focus,
.ui.green.button:focus {
  background-color:#00566d;
}

.ui.green.buttons .button:active,
.ui.green.button:active {
  background-color:#06495a;
}

.ui.green.buttons .active.button,
.ui.green.buttons .active.button:active,
.ui.green.active.button,
.ui.green.button .active.button:active {
  background-color:#025f77;
}

.ui.basic.green.buttons .button,
.ui.basic.green.button {
  color:#09708a!important;
  box-shadow:inset 0 0 0 1px #09708a!important;
}

.ui.basic.green.buttons .button:hover,
.ui.basic.green.button:hover {
  color:#025f77!important;
  box-shadow:inset 0 0 0 1px #025f77!important;
}

.ui.basic.green.buttons .button:focus,
.ui.basic.green.button:focus {
  color:#025f77!important;
  box-shadow:inset 0 0 0 1px #00566d!important;
}

.ui.basic.green.buttons .active.button,
.ui.basic.green.active.button {
  color:#06495a!important;
  box-shadow:inset 0 0 0 1px #025f77!important;
}

.ui.basic.green.buttons .button:active,
.ui.basic.green.button:active {
  color:#06495a!important;
  box-shadow:inset 0 0 0 1px #06495a!important;
}

.ui.inverted.green.buttons .button,
.ui.inverted.green.button {
  color:#4cc3d9;
  box-shadow:inset 0 0 0 2px #4cc3d9!important;
}

.ui.inverted.green.buttons .button:hover,
.ui.inverted.green.button:hover {
  background-color:#36bad2;
}

.ui.inverted.green.buttons .button:focus,
.ui.inverted.green.button:focus {
  background-color:#29b3cc;
}

.ui.inverted.green.buttons .active.button,
.ui.inverted.green.active.button {
  background-color:#36bad2;
}

.ui.inverted.green.buttons .button:active,
.ui.inverted.green.button:active {
  background-color:#1eadc7;
}

.ui.inverted.green.basic.buttons .button:hover,
.ui.inverted.green.buttons .basic.button:hover,
.ui.inverted.green.basic.button:hover {
  color:#4cc3d9!important;
  box-shadow:inset 0 0 0 2px #36bad2!important;
}

.ui.inverted.green.basic.buttons .button:focus,
.ui.inverted.green.basic.buttons .button:focus,
.ui.inverted.green.basic.button:focus {
  color:#4cc3d9!important;
  box-shadow:inset 0 0 0 2px #29b3cc!important;
}

.ui.inverted.green.basic.buttons .active.button,
.ui.inverted.green.buttons .basic.active.button,
.ui.inverted.green.basic.active.button {
  color:#4cc3d9!important;
  box-shadow:inset 0 0 0 2px #36bad2!important;
}

.ui.inverted.green.basic.buttons .button:active,
.ui.inverted.green.buttons .basic.button:active,
.ui.inverted.green.basic.button:active {
  color:#4cc3d9!important;
  box-shadow:inset 0 0 0 2px #1eadc7!important;
}

.ui.primary.buttons .button,
.ui.primary.button {
  background-color:#09708a;
}

.ui.primary.buttons .button:hover,
.ui.primary.button:hover {
  background-color:#025f77;
}

.ui.primary.buttons .button:focus,
.ui.primary.button:focus {
  background-color:#00566d;
}

.ui.primary.buttons .button:active,
.ui.primary.button:active {
  background-color:#06495a;
}

.ui.primary.buttons .active.button,
.ui.primary.buttons .active.button:active,
.ui.primary.active.button,
.ui.primary.button .active.button:active {
  background-color:#00617a;
}

.ui.basic.primary.buttons .button,
.ui.basic.primary.button {
  color:#09708a!important;
  box-shadow:inset 0 0 0 1px #09708a!important;
}

.ui.basic.primary.buttons .button:hover,
.ui.basic.primary.button:hover {
  color:#025f77!important;
  box-shadow:inset 0 0 0 1px #025f77!important;
}

.ui.basic.primary.buttons .button:focus,
.ui.basic.primary.button:focus {
  color:#025f77!important;
  box-shadow:inset 0 0 0 1px #00566d!important;
}

.ui.basic.primary.buttons .active.button,
.ui.basic.primary.active.button {
  color:#06495a!important;
  box-shadow:inset 0 0 0 1px #00617a!important;
}

.ui.basic.primary.buttons .button:active,
.ui.basic.primary.button:active {
  color:#06495a!important;
  box-shadow:inset 0 0 0 1px #06495a!important;
}

.ui.inverted.primary.buttons .button,
.ui.inverted.primary.button {
  color:#4cc3d9;
  box-shadow:inset 0 0 0 2px #4cc3d9!important;
}

.ui.inverted.primary.buttons .button:hover,
.ui.inverted.primary.button:hover {
  background-color:#36bad2;
}

.ui.inverted.primary.buttons .button:focus,
.ui.inverted.primary.button:focus {
  background-color:#29b3cc;
}

.ui.inverted.primary.buttons .active.button,
.ui.inverted.primary.active.button {
  background-color:#36bad2;
}

.ui.inverted.primary.buttons .button:active,
.ui.inverted.primary.button:active {
  background-color:#1eadc7;
}

.ui.inverted.primary.basic.buttons .button:hover,
.ui.inverted.primary.buttons .basic.button:hover,
.ui.inverted.primary.basic.button:hover {
  color:#4cc3d9!important;
  box-shadow:inset 0 0 0 2px #36bad2!important;
}

.ui.inverted.primary.basic.buttons .button:focus,
.ui.inverted.primary.basic.buttons .button:focus,
.ui.inverted.primary.basic.button:focus {
  color:#4cc3d9!important;
  box-shadow:inset 0 0 0 2px #29b3cc!important;
}

.ui.inverted.primary.basic.buttons .active.button,
.ui.inverted.primary.buttons .basic.active.button,
.ui.inverted.primary.basic.active.button {
  color:#4cc3d9!important;
  box-shadow:inset 0 0 0 2px #36bad2!important;
}

.ui.inverted.primary.basic.buttons .button:active,
.ui.inverted.primary.buttons .basic.button:active,
.ui.inverted.primary.basic.button:active {
  color:#4cc3d9!important;
  box-shadow:inset 0 0 0 2px #1eadc7!important;
}

.ui.positive.buttons .button,
.ui.positive.button {
  background-color:#09708a;
}

.ui.positive.buttons .button:hover,
.ui.positive.button:hover {
  background-color:#025f77;
}

.ui.positive.buttons .button:focus,
.ui.positive.button:focus {
  background-color:#00566d;
}

.ui.positive.buttons .button:active,
.ui.positive.button:active {
  background-color:#06495a;
}

.ui.positive.buttons .active.button,
.ui.positive.buttons .active.button:active,
.ui.positive.active.button,
.ui.positive.button .active.button:active {
  background-color:#00617a;
}

.ui.basic.positive.buttons .button,
.ui.basic.positive.button {
  color:#09708a!important;
  box-shadow:inset 0 0 0 1px #09708a!important;
}

.ui.basic.positive.buttons .button:hover,
.ui.basic.positive.button:hover {
  color:#025f77!important;
  box-shadow:inset 0 0 0 1px #025f77!important;
}

.ui.basic.positive.buttons .button:focus,
.ui.basic.positive.button:focus {
  color:#025f77!important;
  box-shadow:inset 0 0 0 1px #00566d!important;
}

.ui.basic.positive.buttons .active.button,
.ui.basic.positive.active.button {
  color:#06495a!important;
  box-shadow:inset 0 0 0 1px #00617a!important;
}

.ui.basic.positive.buttons .button:active,
.ui.basic.positive.button:active {
  color:#06495a!important;
  box-shadow:inset 0 0 0 1px #06495a!important;
}

.ui.transparent.button.link {
  color:#09708a;
}

.ui.container.carousel {
  background-color:#09708a1a;
}

.ui.divider {
  color:#09708a;
}

i.primary.icon {
  color:#09708a;
}

.ui.input.focus>input,
.ui.input>input:focus {
  border-color:#09708a;
}

.ui.labeled.input:not([class*=corner\ labeled]) .label:first-child+input:focus {
  border-left-color:#09708a;
}

.ui[class*=right\ labeled].input>input:focus {
  border-right-color:#09708a!important;
}

.ui.action.input:not([class*=left\ action])>input:focus {
  border-right-color:#09708a!important;
}

.ui[class*=left\ action].input>input:focus {
  border-left-color:#09708a!important;
}

.ui.primary.label {
  background-color:#09708a;
  border-color:#09708a;
}

.ui.list .list>a.item,
.ui.list>a.item {
  color:#09708a;
}

.ui.list .list>.item a.header,
.ui.list>.item a.header {
  color:#09708a!important;
}

.ui.brand.segment:not(.inverted) {
  border-top:2px solid #09708a!important;
}

.ui.inverted.brand.segment {
  background-color:#09708a!important;
}

.ui.steps .step.active .title {
  color:#09708a;
}

.ui.breadcrumb a {
  color:#09708a;
}

.ui.form input:not([type]):focus,
.ui.form input[type=date]:focus,
.ui.form input[type=datetime-local]:focus,
.ui.form input[type=email]:focus,
.ui.form input[type=number]:focus,
.ui.form input[type=password]:focus,
.ui.form input[type=search]:focus,
.ui.form input[type=tel]:focus,
.ui.form input[type=time]:focus,
.ui.form input[type=text]:focus,
.ui.form input[type=file]:focus,
.ui.form input[type=url]:focus {
  border-color:#09708a;
}

.ui.form textarea:focus {
  border-color:#09708a;
}

.invenio-administration.ui.grid .column.inverted {
  background-color:#09708a;
}

.ui.inverted.menu {
  background:#09708a;
}

.ui.inverted.menu .brand.active.item,
.ui.inverted.brand.menu {
  background-color:#09708a;
}

.ui.menu .brand.active.item,
.ui.brand.menu .active.item {
  background-color:#09708a;
  border-color:#09708a!important;
}

.ui.menu.compact .item.active {
  background-color:#09708a;
}

.ui.menu.compact .item.active:hover {
  background-color:#025f77;
}

.ui.feed .requests-event-item.selected>.requests-event-container:not(.reply)>.requests-event-inner-container>.event,
.ui.feed .requests-event-item:target>.requests-event-container:not(.reply)>.requests-event-inner-container>.event {
  box-shadow:0 0 0 2px #09708a;
}

.ui.feed .requests-event-item.selected>.requests-event-container.reply,
.ui.feed .requests-event-item:target>.requests-event-container.reply {
  box-shadow:0 0 0 2px #09708a;
}

.ui.feed .requests-reply-count {
  background-color:#09708a;
}

.ui.feed .requests-reply-load-more {
  color:#09708a;
}

.ui.accordion.invenio-accordion-field .title:not(.ui) {
  background-color:#09708a;
}

.ui.accordion .title:not(.ui).panel-heading {
  color:#09708a!important;
}

.ui.checkbox input:focus~.box:before,
.ui.checkbox input:focus~label:before {
  border-color:#09708a;
}

.ui.checkbox input:not([type=radio]):indeterminate:focus~.box:before,
.ui.checkbox input:not([type=radio]):indeterminate:focus~label:before,
.ui.checkbox input:checked:focus~.box:before,
.ui.checkbox input:checked:focus~label:before {
  border-color:#09708a;
}

.ui.toggle.checkbox input:checked~.box:before,
.ui.toggle.checkbox input:checked~label:before {
  background-color:#09708a!important;
}

.ui.toggle.checkbox input:focus:checked~.box:before,
.ui.toggle.checkbox input:focus:checked~label:before {
  background-color:#00566d!important;
}

.ui.selection.active.dropdown,
.ui.selection.active.dropdown .menu {
  border-color:#09708a;
}

.ui.selection.dropdown:focus {
  border-color:#09708a;
}

.ui.selection.dropdown:focus .menu {
  border-color:#09708a;
}

.ui.selection.active.dropdown:hover,
.ui.selection.active.dropdown:hover .menu {
  border-color:#09708a;
}

#community-selection-modal .community-list-results.content .community-item .header a.ui.button.transparent {
  color:#09708a;
}

.ui.primary.progress .bar {
  background-color:#09708a;
}

.ui.primary.inverted.progress .bar {
  background-color:#4cc3d9;
}