#hoss {
  visibility: hidden;
}

body {
  overflow-x: hidden;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.text-muted {
  color: #777777;
}

.text-primary {
  color: #337ab7;
}

p {
  font-size: 15px;
  line-height: 1.75;
}

p.large {
  font-size: 17px;
}

a,
a:hover,
a:focus,
a:active,
a.active {
  outline: none;
}

a {
  color: #337ab7;
    text-decoration: none;
}

a:hover,
a:focus,
a:active,
a.active {
  color: #285f8f;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  /*font-weight: 700;*/
  font-weight: 700;
}

.img-centered {
  margin: 0 auto;
}

.bg-light-gray {
  background-color: #eeeeee;
}

.bg-darkest-gray {
  background-color: #222222;
}

.btn-primary {
  color: white !important;
  background-color: #337ab7 !important;
  border-color: #337ab7 !important;
}
.btn-primary:focus, .btn-primary.focus {
  color: white !important;
  background-color: #285f8f !important;
  border-color: #173853 !important;
}
.btn-primary:hover {
  color: white !important;
  background-color: #285f8f !important;
  border-color: #265a87 !important;
}
.btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle {
  color: white !important;
  background-color: #285f8f !important;
  border-color: #265a87 !important;
}
.btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus, .open > .btn-primary.dropdown-toggle:hover, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle.focus {
  color: white !important;
  background-color: #204d73 !important;
  border-color: #173853 !important;
}
.btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle {
  background-image: none;
}
.btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary.focus {
  background-color: #337ab7 !important;
  border-color: #337ab7 !important;
}
.btn-primary .badge {
  color: #337ab7 !important;
  background-color: white !important;
}

.btn-xl {
  border-radius: 3px;
  font-size: 1.2em;
  padding: 0.8em 1.7em;
}

@media (min-width: 768px) {
  .btn-xl {
    font-size: 1.4em;
    padding: 1em 2em;
  }
}
.btn-front-page {
  width: 315px;
  margin-bottom: 0.5em;
}

.btn-outline {
  border: 1px solid #eeeeee;
  background-color: rgba(34, 34, 34, 0.8);
  margin: 0.5em !important;
  border-radius: 3px;
  padding: 0.5em !important;
}
.btn-outline:hover {
  background-color: rgba(34, 34, 34, 0.9);
}

#fixed-search {
  /* Rides along with the sticky <header> in _Layout.cshtml via the StickyBar
     Razor section, so it stays in normal flow as a child of the sticky
     container. No `position: fixed` / `top: Xpx` math is needed — the
     browser stacks it directly below the navbar at every breakpoint.
     1.0 set position: fixed with top: 81px (mobile) / 102px (desktop) to
     dock under a fixed navbar of known height; that's no longer applicable. */
  /* person-cards can have z-index up to 6 */
  z-index: 6;
  padding: 1em 0;
  background-color: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid grey;
}

.app-body #fixed-search {
  background-color: rgb(255, 255, 255);
}

@media (min-width: 768px) {
  body.index .navbar-custom:not(.affix), .navbar-custom .k-menu .k-group {
    background-color: rgba(34, 34, 34, 0.3);
  }
  .navbar-custom, .navbar-custom .k-menu .k-group {
    border: 1px solid black;
  }
  /* margin-top: -7px removed -- it was a BS3-era hack that yanked the
     brand above the navbar's flex-centered baseline, leaving the logo
     riding high in the bar. With BS5's `.navbar > .container` already
     setting `align-items: center`, removing the negative margin restores
     vertical centering. The font-size bump is kept for parity with the
     marketing layout's larger brand text. */
  .navbar-custom .navbar-brand, .navbar-custom .k-menu .k-group .navbar-brand {
    font-size: 2em;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .navbar-custom .navbar-nav > .active > a, .navbar-custom .k-menu .k-group .navbar-nav > .active > a {
    border-radius: 3px;
  }
  /* #fixed-search top + adjacent-h3 margin overrides removed: the 1.0 desktop
     navbar was 102px (custom padding); the BS5 _Layout navbar is the same
     ~56px at every breakpoint, so the base rule above covers all sizes. */
}
@media (min-width: 768px) {
  .navbar-custom.affix, .navbar-custom .k-menu .k-group {
    background-color: rgba(34, 34, 34, 0.9);
    padding: 10px 0;
  }
  .navbar-custom.affix .navbar-brand, .navbar-custom .k-menu .k-group .navbar-brand {
    font-size: 1.5em;
  }
}
#mainNav.navbar-custom,
.telerik-navbar.sidenav-menu,
.telerik-navbar .k-menu .k-group,
.navbar-default .navbar-toggle .icon-bar,
.telerik-navbar .k-menu .k-item > .k-link {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  /* font-weight: 700; */
  font-weight: 400;
  letter-spacing: 1px;
  color: white;
}

/* Brand container: flex-center the logo inside its own box so a capped
   <img> doesn't ride high in the bar. Without this, the brand span is
   an inline element whose <a><img></a> sits on the text baseline of a
   line box sized by the (large) brand font-size, leaving most of the
   image above the inline line and visually shifted up. inline-flex +
   align-items: center collapses that to "brand box = image height,
   image vertically centered"; the outer .navbar > .container's own
   align-items: center then drops the whole brand into the middle of
   the navbar. */
.navbar-custom .navbar-brand {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* Keep brand logos from overflowing modern/bootstrap navbars. */
.navbar-brand .logo-image {
  display: block;
  height: auto;
  max-height: 40px;
  max-width: calc(100vw - 140px);
  width: auto;
}
@media (min-width: 768px) {
  .navbar-brand .logo-image {
    max-height: 50px;
    max-width: 282px;
  }
  /* Keep brand + inline menu on one row at sm and up. BS5's .navbar
     inherits flex-wrap: wrap by default; on this layout the right-side
     menu was wrapping below the brand whenever container width was
     tight, which drove the "logo on its own row" mis-alignment. The
     inline menu is restored at the same >=768px breakpoint below. */
  .navbar-custom > .container {
    flex-wrap: nowrap;
  }
}
@media (min-width: 992px) {
  .navbar-brand .logo-image {
    max-height: 50px;
    max-width: 481px;
  }
}

/* Hamburger toggle on the dark navbar. _Navigation.cshtml drops an inline
   Kendo SVG (Telerik.SvgIcons.SvgIcon.Menu via Html.KendoSvgIcon) inside
   a <button class="navbar-toggle app">; this block provides the button
   chrome and sizes the inline <svg> off the button's font-size +
   currentColor. Lives in adjace.css for historical reasons (BS3-era
   _FrontPageLayout used to load adjace.css via ~/Content/css but NOT
   site.css; this rule had to live in adjace.css to paint on marketing
   pages). Post-BS3 retirement, every layout rides on _LayoutHead which
   loads both stylesheets, so the rule could move to site.css -- but it
   works here and CSS-reshuffling commits invite needless regressions.
   Without these rules the bare <svg viewBox="0 0 512 512"> either
   renders at its 300x150 intrinsic default (breaks the navbar) or
   inherits the button's default text color (black-on-dark, invisible). */
.navbar .navbar-toggle.app {
  background-color: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.25rem 0.6rem;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.navbar .navbar-toggle.app > svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.navbar .navbar-toggle.app:hover,
.navbar .navbar-toggle.app:focus,
.navbar .navbar-toggle.app:active {
  color: #fff;
  outline: none;
  box-shadow: none;
}

/* Hero header — scoped so it only paints the marketing landing pages.
   In 1.0 the bare `header { ... }` selector was safe because _Layout
   wrapped its navbar in <nav>; 2.0 uses <header> as the navbar wrapper
   in _Layout.cshtml, which made the unscoped rule bleed onto every
   page. `.home-hero` belongs to Home/Index, `.members` belongs to the
   per-org _MembersLanding partial (which still overrides the
   background-image inline with its own LandingPageBackground). */
header.home-hero,
header.members {
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  text-align: center;
  color: white;
  min-height: 100vh;
}
header.home-hero {
  background-image: url("/images/bg-3.jpg");
}

/* Marketing-landing hero pull-up.

   _FrontPageLayout wraps _Navigation in a body-level <header> that picks up
   `body > header { position: sticky; top: 0; z-index: 1030 }` from site.css. The
   sticky navbar takes its slot in flex flow, so the hero would normally start
   below it -- and the navbar's semi-transparent OrgStyles tint (anonymous
   landing falls back to Brand.DefaultHeadingBarColor = rgba(34,34,34,0.5))
   would composite over the body's BS5 default #fff, painting an opaque
   washed-out slab.

   The pull-up has two jobs: slide the hero visually under the sticky navbar
   (the bleed-through effect) AND recover the 81px of flex space the navbar
   claimed in body's flex column so the page doesn't overshoot 100vh. Where
   the negative margin lives decides which job gets done.

   Home/Index: pull-up lives on the hero itself. The +81 overshoot is fine
   because #tell-me-more and #pricing sit below the hero and absorb the
   surplus into a long-scroll marketing page. The sticky navbar already has
   z-index: 1030 from the body > header rule, so the hero stacks below the
   navbar without an explicit z-index here.

   `:not(.app-body)` keeps the rule off the brand editor (which also sets
   body.index but adds .app-body when Url.IsAppUrl() is true). */
body.index:not(.app-body) > main > header.home-hero {
  margin-top: calc(-1 * var(--whitehurst-navbar-h, 81px));
  min-height: calc(100vh + var(--whitehurst-navbar-h, 81px));
}

/* Home/Members: single-screen splash with nothing below the hero to absorb
   an overshoot. Putting the negative margin on header.members (its original
   spot, before this split) only pulled the hero visually -- main's height
   calculation still saw the hero's full content box, so body wound up at
   ~100vh + 210px (navbar 81 + main 100vh+81 + body padding-bottom 3rem) and
   the page scrolled with an empty body-background strip below the footer.

   Move the pull-up onto <main> instead. Flex layout honors negative margins
   on flex items, so main's contribution to body's flex column actually
   shrinks by 81px -- the navbar's slot is refunded to the body and the
   bleed-through visual is preserved (main starts at y = 0, hero rides up
   under the sticky navbar exactly like it does on Home/Index).

   Hero is then sized to fill the remaining real estate above the fixed
   footer's 3rem cushion, so body math closes at 100vh:

       81 (navbar) + (100vh - 3rem) (main) + (-81) (main margin)
                   + 3rem (body padding-bottom) = 100vh

   `:has(> header.members)` scopes the main rule to the members landing
   without needing a body class or markup change. Widely supported (Chrome
   105+, Safari 15.4+, Firefox 121+); if dropping the dependency becomes
   useful, swap in a Members.cshtml-set body class and key off that. */
body.index:not(.app-body) > main:has(> header.members) {
  margin-top: calc(-1 * var(--whitehurst-navbar-h, 81px));
}

body.index:not(.app-body) > main > header.members {
  margin-top: 0;
  min-height: calc(100vh - var(--app-footer-h, 2rem));
}
header .intro-text {
  padding-top: 100px;
  padding-bottom: 50px;
  transform: translate(-50%, -50%);
  top: 45%;
  left: 50%;
  position: absolute;
}
header .intro-text .intro-lead-in {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  /*font-style: italic;*/
  font-size: 22px;
  line-height: 22px;
  margin-bottom: 25px;
}
header .intro-text .intro-heading {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  /*font-weight: 700;*/
  font-weight: 700;
  font-size: 33px;
  line-height: 50px;
  margin-bottom: 25px;
}

.auto-logout {
  color: white;
  background-color: rgba(255, 0, 0, 0.2);
  border: 2px solid rgba(255, 0, 0, 0.1);
  font-weight: 400;
  letter-spacing: 1px;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-radius: 5px;
  transform: translateY(4px);
  padding: 10px 15px;
  line-height: 20px;
  display: block;
  position: relative;
}

/*header.members {    
    background-image: url('/images/bg-5.jpg');
    background-position: center bottom;
    min-height: calc(100vw);
}*/

/* _Navigation.cshtml renders the desktop menu inside a BS3-era
   `<div class="navbar-collapse collapse telerik-navbar">`. BS5 changed
   `.collapse` to mean `display: none unless .show`, so without this
   override the navbar menu would be hidden entirely on desktop. Restore
   visibility at desktop widths.
   Deliberately NO !important here: every layout in 2.0 now rides on BS5
   (BS3 was retired -- see AGENTS.md "Progressively remove Bootstrap 3"),
   and BS5's `.navbar-collapse.collapse { display: none }` has no
   !important, so source order (adjace.css after bootstrap@5) lets ours
   win.
   No `justify-content` here: the Right ul carries `ms-auto`
   (`margin-left:auto`) so the Left ul stays at flex-start while the
   Right ul gets pushed to the end -- adding `justify-content:flex-end`
   would shove both groups against each other on the right. */
@media (min-width: 768px) {
  .navbar-collapse.collapse {
    display: flex;
    flex-basis: auto;
    align-items: center;
  }
}

@media (min-width: 768px) {
  header .intro-text {
    padding-top: 15%;
    padding-bottom: 15%;
    margin-top: 50px;
  }
  header .intro-text .intro-lead-in {
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /*font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
    /*font-style: italic;*/
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 25px;
  }
  header .intro-text .intro-heading {
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    /*font-weight: 700;*/
    font-weight: 700;
    font-size: 50px;
    line-height: 75px;
    margin-bottom: 50px;
  }
}
/* --------------------------------------------------------------------------------------------------------- */
/* Hide the footer and all navigation except the directory when on a small screen or the app.adjace.com url. */
header.members {
  min-height: 100vh;
}

header .app-language-links {
  display: table;
  transform: translate(-50%, -50%);
  bottom: 0%;
  left: 50%;
  position: absolute;
}

@media (max-width: 768px) {
  header.members {
    min-height: 100vh;
  }
  /*.hidden-app, footer {
      display: none !important;
  }*/
  .form-control {
    font-size: 16px;
  }
}
/* repeat everything from above except for app-body class.*/
.app-body header.members {
  min-height: 100vh;
}
.app-body .hidden-app, .app-body footer {
  display: none !important;
}

/* Installed PWAs on org subdomains (rvc.adjace.com) are not app-slug URLs, so
   they never get .app-body -- hide the marketing footer in standalone mode on
   every page (landing, directory, login, etc.), not just the splash screen. */
@media (display-mode: standalone) {
  body {
    padding-bottom: 0;
  }

  footer {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------------------------------------- */

section h2.section-heading {
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 15px;
}
section h3.section-subheading {
  font-size: 16px;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  text-transform: none;
  /*font-style: italic;*/
  font-weight: 400;
  margin-bottom: 25px;
}


.service-heading {
  margin: 15px 0;
  text-transform: none;
}

/* Pricing-tier table chrome.

   The subscription-tier `<table class="table table-striped table-bordered">`
   inside `#pricing` (Home/Index Adjace Standard column) reads washed-out
   under BS5: BS5's `.table-striped` ships as a CSS-variable theme
   (`--bs-table-striped-bg`, `--bs-table-striped-color`) that composites
   against the page background and inherits a `.text-muted` ancestor color,
   so the stripes barely register. The 1.0 BS3 stylesheet painted heavier
   defaults (`#f9f9f9` stripes, `#ddd` borders, `#555` text) that the v1
   reference screenshot shows.

   Scoping to `#pricing` keeps the override off the directory/profile
   tables (which lean on the BS5/Kendo theme), and the explicit `color`
   reset overrides the inherited `.text-muted` color from any wrapping
   `<ul class="text-muted list">` even though we already lifted the
   table out of the `<ul>`. */
#pricing .table {
  color: #555;
  background-color: #fff;
  margin-top: 1em;
}
#pricing .table-bordered,
#pricing .table-bordered > thead > tr > th,
#pricing .table-bordered > tbody > tr > td,
#pricing .table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
#pricing .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: #f9f9f9;
}

/* Pricing-tier feature list.
   The Free/Standard columns render `<li class="list-item">` items inside
   `<ul class="text-muted list">`. The view markup ships `text-start` to
   undo the parent row's `text-center`, but the BS5 default `<ul>` padding
   shoves the bullets uncomfortably far from the column edge while
   leaving the items crammed together. Scope a column-tight indent and
   a touch of vertical rhythm so the two tier columns read as matched
   feature sheets rather than scattered birdshot. */
#pricing .pricing-features {
  max-width: 22rem;
  margin: 0 auto;
}
#pricing .pricing-features ul {
  padding-left: 1.25rem;
  margin-bottom: 0;
}
#pricing .pricing-features li {
  margin-bottom: 0.4rem;
  line-height: 1.45;
}

#portfolio .portfolio-item {
  margin: 0 0 15px;
  right: 0;
}
#portfolio .portfolio-item .portfolio-link {
  display: block;
  position: relative;
  max-width: 400px;
  margin: 0 auto;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover {
  background: rgba(51, 122, 183, 0.1);
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
  opacity: 1;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
  position: absolute;
  width: 100%;
  height: 20px;
  font-size: 20px;
  text-align: center;
  top: 50%;
  margin-top: -12px;
  color: white;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
  margin-top: -12px;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
  margin: 0;
}
#portfolio .portfolio-item .portfolio-caption {
  max-width: 400px;
  margin: 0 auto;
  background-color: white;
  text-align: center;
  padding: 25px;
}
#portfolio .portfolio-item .portfolio-caption h4 {
  text-transform: none;
  margin: 0;
}
#portfolio .portfolio-item .portfolio-caption p {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  /*font-style: italic;*/
  font-size: 16px;
  margin: 0;
}
#portfolio * {
  z-index: 2;
}

@media (min-width: 767px) {
  #portfolio .portfolio-item {
    margin: 0 0 30px;
  }
}
.timeline {
  list-style: none;
  padding: 0;
  position: relative;
  margin-top: 50px;
}
.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: "";
  width: 2px;
  background-color: #f1f1f1;
  left: 40px;
  margin-left: -1.5px;
}
.timeline > li:not(.no-circle) {
  min-height: 50px;
  margin-bottom: 50px;
}
.timeline > li {
  position: relative;
}
.timeline > li:before, .timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}
.timeline > li .timeline-panel {
  width: 100%;
  float: right;
  padding: 0 20px 0 100px;
  position: relative;
  text-align: left;
}
.timeline > li .timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}
.timeline > li .timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}
.timeline > li .timeline-image:not(.no-circle) {
  border-radius: 100%;
}
.timeline > li .timeline-image {
  left: 0;
  margin-left: 0;
  width: 80px;
  height: 80px;
  position: absolute;
  z-index: 100;
  background-color: #337ab7;
  color: white;
  border: 7px solid #f1f1f1;
  text-align: center;
}
.timeline > li .timeline-image h4 {
  font-size: 10px;
  margin-top: 12px;
  line-height: 14px;
}
.timeline > li .timeline-image > span, .timeline > li .timeline-image img, .timeline > li .timeline-image i {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
}
.timeline > li .timeline-image .fa-stack.fa-4x {
  font-size: 2.5em;
}
.timeline > li .timeline-image.no-circle {
  /* `.timeline-image` (base rule above) ships `position: absolute` so the
     circular per-step glyphs stack over the vertical timeline rail without
     taking flow space. The terminal CTA block (Create Account / Already
     have account / Learn about Pricing / chevron-down) rides this same
     class to inherit the rest of the no-rail styling, but absolute
     positioning collapses the parent `<li class="no-circle">` to zero
     height (`.timeline > li:not(.no-circle)` excludes the no-circle li
     from the `min-height: 50px; margin-bottom: 50px` rule). The single
     empty `<li>` after it only contributes ~100px of buffer at sm and
     ~200px at md+, while the absolute CTA stack measures ~200px tall --
     the overflow bleeds into `#pricing` and the chevron-down anchor
     overlaps the next section's magnifying-glass fa-stack.
     1.0 hid the bug under `section { padding-top: 90px; padding-bottom:
     150px }` (dropped during the 2.0 SCSS-to-CSS port). Restoring that
     globally would inflate every page using `<section id="content">` in
     _Layout / _NewProfileLayout / _LoginPageChrome, so we fix the root
     cause here instead: drop the absolute positioning for the no-circle
     variant so the CTA block participates in normal flow and the li
     reports its real height. `text-align: center` from the base rule
     keeps the inline-block buttons centered without needing left/right
     anchoring. */
  position: static;
  width: auto;
  height: auto;
  margin: auto;
  border: none;
  background-color: white;
  color: #337ab7;
}
.timeline.timeline-inverted > .timeline-panel {
  float: right;
  text-align: left;
  padding: 0 20px 0 100px;
}
.timeline.timeline-inverted > .timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}
.timeline.timeline-inverted > .timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}
.timeline:last-child {
  margin-bottom: 0;
}

.timeline-heading h4 {
  margin-top: 0;
  color: inherit;
}
.timeline-heading h4.subheading {
  text-transform: none;
}

.timeline-body > p,
.timeline-body > ul {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .timeline:before {
    left: 50%;
  }
  .timeline > li:not(.no-circle) {
    min-height: 100px;
    margin-bottom: 100px;
  }
  .timeline > li .timeline-panel {
    width: 41%;
    float: left;
    padding: 0 20px 20px 30px;
    text-align: right;
  }
  .timeline > li .timeline-image {
    width: 100px;
    height: 100px;
    left: 50%;
    margin-left: -50px;
  }
  .timeline > li .timeline-image h4 {
    font-size: 13px;
    margin-top: 16px;
    line-height: 18px;
  }
  .timeline > li .timeline-image .fa-stack.fa-4x {
    font-size: 3.1em;
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    float: right;
    text-align: left;
    padding: 0 30px 20px 20px;
  }
}
@media (min-width: 992px) {
  .timeline > li:not(.no-circle) {
    min-height: 150px;
  }
  .timeline > li .timeline-panel {
    padding: 0 20px 20px;
  }
  .timeline > li .timeline-image {
    width: 150px;
    height: 150px;
    margin-left: -75px;
  }
  .timeline > li .timeline-image h4 {
    font-size: 18px;
    margin-top: 30px;
    line-height: 26px;
  }
  .timeline > li .timeline-image .fa-stack.fa-4x {
    font-size: 5em;
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    padding: 0 20px 20px;
  }
}
@media (min-width: 1200px) {
  .timeline > li:not(.no-circle) {
    min-height: 170px;
  }
  .timeline > li .timeline-panel {
    padding: 0 20px 20px 100px;
  }
  .timeline > li .timeline-image {
    width: 170px;
    height: 170px;
    margin-left: -85px;
  }
  .timeline > li .timeline-image h4 {
    margin-top: 40px;
  }
  .timeline > li .timeline-image .fa-stack.fa-4x {
    font-size: 5.5em;
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    padding: 0 100px 20px 20px;
  }
}
.team-member {
  text-align: center;
  margin-bottom: 50px;
}
.team-member img {
  margin: 0 auto;
  border: 7px solid white;
}
.team-member h4 {
  margin-top: 25px;
  margin-bottom: 0;
  text-transform: none;
}
.team-member p {
  margin-top: 0;
}

aside.clients img {
  margin: 50px auto;
}

section#contact {
  background-color: #222222;
  background-image: url("/images/logo-blue-medium.png");
  background-position: center;
  background-repeat: no-repeat;
}
section#contact .section-heading {
  color: white;
}
section#contact .form-group {
  margin-bottom: 25px;
}
section#contact .form-group input,
section#contact .form-group textarea {
  padding: 20px;
}
section#contact .form-group input.form-control {
  height: auto;
}
section#contact .form-group textarea.form-control {
  height: 236px;
}
section#contact .form-control:focus {
  border-color: #337ab7;
  box-shadow: none;
}
section#contact ::-webkit-input-placeholder {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  /*font-weight: 700;*/
  font-weight: 700;
  color: #eeeeee;
}
section#contact :-moz-placeholder { /* Firefox 18- */
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  /*font-weight: 700;*/
  font-weight: 700;
  color: #eeeeee;
}
section#contact ::-moz-placeholder { /* Firefox 19+ */
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  /*font-weight: 700;*/
  font-weight: 700;
  color: #eeeeee;
}
section#contact :-ms-input-placeholder {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  /*font-weight: 700;*/
  font-weight: 700;
  color: #eeeeee;
}
section#contact .text-danger {
  color: #a94442;
}

footer {
  padding: 20px 0;
  text-align: center;
}
footer span.copyright, footer span.tagline {
  line-height: 1em;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  /*font-weight: 700;*/
  text-transform: none;
  font-size: 0.9em;
}
footer ul.quicklinks {
  margin-bottom: 0;
  line-height: 20px;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  /*font-weight: 700;*/
  text-transform: none;
}

ul.social-buttons {
  margin-bottom: 0;
}
ul.social-buttons li a {
  display: block;
  background-color: #222222;
  height: 40px;
  width: 40px;
  border-radius: 100%;
  font-size: 20px;
  line-height: 40px;
  color: white;
  outline: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
ul.social-buttons li a:hover, ul.social-buttons li a:focus, ul.social-buttons li a:active {
  background-color: #337ab7;
}

.btn:focus,
.btn:active,
.btn.active,
.btn:active:focus {
  outline: none;
}

.portfolio-modal .modal-dialog {
  margin: 0;
  height: 100%;
  width: auto;
}
.portfolio-modal .modal-content {
  border-radius: 0;
  background-clip: border-box;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  min-height: 100%;
  padding: 100px 0;
  text-align: center;
}
.portfolio-modal .modal-content h2 {
  margin-bottom: 15px;
  font-size: 3em;
}
.portfolio-modal .modal-content p {
  margin-bottom: 30px;
}
.portfolio-modal .modal-content p.item-intro {
  margin: 20px 0 30px;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  /*font-style: italic;*/
  font-size: 16px;
}
.portfolio-modal .modal-content ul.list-inline {
  margin-bottom: 30px;
  margin-top: 0;
}
.portfolio-modal .modal-content img {
  margin-bottom: 30px;
}
.portfolio-modal .close-modal {
  position: absolute;
  width: 75px;
  height: 75px;
  background-color: transparent;
  top: 25px;
  right: 25px;
  cursor: pointer;
}
.portfolio-modal .close-modal:hover {
  opacity: 0.3;
}
.portfolio-modal .close-modal .lr {
  height: 75px;
  width: 1px;
  margin-left: 35px;
  background-color: #222222;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Safari and Chrome */
  z-index: 1051;
}
.portfolio-modal .close-modal .lr .rl {
  height: 75px;
  width: 1px;
  background-color: #222222;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Safari and Chrome */
  z-index: 1052;
}
.portfolio-modal .modal-backdrop {
  opacity: 0;
  display: none;
}

::-moz-selection {
  text-shadow: none;
  background: #337ab7;
}

::selection {
  text-shadow: none;
  background: #337ab7;
}

img::selection {
  background: transparent;
}

img::-moz-selection {
  background: transparent;
}

body {
  webkit-tap-highlight-color: #337ab7;
}

.modal-header {
  background-color: #337ab7;
  border-radius: 5px 5px 0 0;
  color: white;
}

/* Park the trash button alongside the FIRST form-control row.
   The label is given the same height as a BS5 .form-control
   (calc(1.5rem + 0.75rem + 2px) = 38px when 1rem = 16px) and anchored
   to top: 0, then a flex centering puts the glyph on the input's
   vertical centerline. Using rem (not em) here side-steps the .btn-sm
   font-size that the label itself carries -- otherwise em shrinks
   against 0.875rem and the icon drifts up. The right offset puts the
   can out in the margin instead of crowding the input. */
label.delete-address {
  position: absolute;
  right: -32px;
  top: 6px;
  height: calc(1.5rem + 0.75rem + 2px);
  display: inline-flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}
label.delete-address:hover {
  cursor: pointer;
}

.well-settings {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

/* Left-rail settings tabs (Organization/Subscription "Plan", "Invoice History").
   Mirrors the 1.0 adjace-kendo-overrides.scss treatment for `nav-tabs.nav-stacked`:
   the active tab gets a 3px brand-red ($theme-secondary #cc2525) left border with
   matching 12px left padding, no pill background. Hover gets a muted preview of the
   same accent. Keeps the markup as Bootstrap 5 nav-pills but suppresses the loud
   pill fill so the page reads like the 1.0 reference. */
.sub-tabify-settings .nav-link {
  text-align: left;
  border-radius: 0;
  border-left: 3px solid transparent;
  padding-left: 12px;
  margin-bottom: 0.25rem;
  color: #337ab7;
  background-color: transparent;
}

.sub-tabify-settings .nav-link.active,
.sub-tabify-settings .nav-link.active:focus,
.sub-tabify-settings .nav-link.active:hover {
  background-color: transparent;
  color: #555;
  border-left: 3px solid #cc2525;
}

.sub-tabify-settings .nav-link:not(.active):hover {
  background-color: transparent;
  border-left: 3px solid rgba(204, 37, 37, 0.6);
}

/* Horizontal tab strip (Organization/Index "Synchronization | Settings | ..."
   and any future top-of-page tab row).
   Mirrors the 1.0 adjace-kendo-overrides.scss treatment for non-stacked
   `.nav-tabs`: strip the BS5 pill/box chrome on every tab, paint a 3px
   brand-red ($theme-secondary #cc2525) bottom border on the active tab,
   and a muted red preview on hover. Inactive tabs read as flat link-blue,
   active reads as #555 (matches the 1.0 reference). The .nav-tabs strip
   itself keeps the BS5 default `border-bottom: 1px solid #dee2e6` so the
   active tab's red bar visually "sits on" a thin baseline rule. */
.nav-tabs:not(.nav-stacked) .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  background-color: transparent;
  color: #337ab7;
}

.nav-tabs:not(.nav-stacked) .nav-link:focus,
.nav-tabs:not(.nav-stacked) .nav-link:hover {
  background-color: transparent;
  border-color: transparent transparent rgba(204, 37, 37, 0.6) transparent;
  color: #337ab7;
}

.nav-tabs:not(.nav-stacked) .nav-link.active,
.nav-tabs:not(.nav-stacked) .nav-link.active:focus,
.nav-tabs:not(.nav-stacked) .nav-link.active:hover {
  background-color: transparent;
  color: #555;
  cursor: default;
  border-color: transparent transparent #cc2525 transparent;
}

.profile-list-container {
  display: flex;
  flex-flow: row wrap;
}

.image-cropper {
  display: inline-block;
  height: 50px;
  width: 50px;
  overflow: hidden;
  border-radius: 50%;
}

.profile-pic {
  display: inline;
  margin: 0 auto;
  height: auto;
  width: 100%;
}

.telerik-navbar ul.k-menu, .telerik-navbar li.k-state-hover, .telerik-navbar li.k-state-focused, .telerik-navbar li.k-state-active, .telerik-navbar .k-menu .k-item, .telerik-navbar li.k-state-hover > .k-link,
.telerik-navbar .k-menu .k-state-default .k-state-border-down {
  border-style: none;
  background-color: transparent;
  color: inherit;
  box-shadow: none;
}

.telerik-navbar .k-menu .k-item > .k-link {
  line-height: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 7px;
  padding-left: 15px;
  white-space: inherit;
}

.telerik-navbar #MobileNavbar.k-menu .k-item > .k-link {
  padding-left: 2.2em;
}

.telerik-navbar .k-menu .k-state-selected > .k-link, .telerik-navbar .k-menu .k-state-highlight > .k-link {
  color: inherit;
  /* These background-colors could be used to highlight the menu you have selected */
  /*background-color: rgba(255,255,255,.5);
  border-color: rgba(255,255,255,.5);
  border-bottom: solid 3px white;
  border-radius: 30px;*/
  background-color: transparent;
  border-color: transparent;
}

.sidenav-menu {
  height: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  overflow-x: hidden;
  padding-top: 60px;
  width: 0;
  transition: width linear 0.15s;
}
.sidenav-menu.a {
  text-decoration: none;
  font-size: 14px;
}
@media (max-width: 768px) {
  .sidenav-menu.open {
    width: 300px;
  }
}
@media (min-width: 768px) {
  .sidenav-menu.open {
    width: 33vw;
  }
}
.sidenav-menu .navbar-toggle {
  margin-top: -37px;
  position: relative;
}

.navbar-header.app {
  float: none;
}

.navbar-toggle.app {
  display: inline-block;
  z-index: 1000;
}

#CacheUpdate {
  visibility: hidden;
  min-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  bottom: 30px;
}
#CacheUpdate.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s;
  animation: fadein 0.5s;
}

@media (max-width: 767px) {
  #CacheUpdate {
    padding: 20px 45px;
  }
}
@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
.payment-info {
  display: inline-block;
}

.kendo-padlet-row {
  margin-left: 0.1em;
  margin-bottom: 1.5em;
}

#undo-button-div {
  padding-left: 6px;
}

#cancel-button-div {
  padding-left: 0px;
}

.brand-form {
  margin-bottom: 15px;
}

#displayOrgUserAgreement {
  word-wrap: break-word;
}

.anniversary-pull-right {
  margin-left: 40px;
}

.prayer-checkbox-input {
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  transform: scale(1.5);
  padding: 10px;
}

/* Prayer-list toolbar (Requests/Praises Only + Hide Portraits switches and the
   Clear Completed button). Wide screens: all three items inline on one row,
   pulled to the right edge of the directory pane. Narrow screens (<768px):
   stack vertically full-width app-style with each toggle's label/switch pushed
   to opposite ends so the thumb-zone reads cleanly on phones. The col-sm-*
   width hacks the prior layout leaned on are gone -- this is a real flex row
   now, not three orphaned Bootstrap columns inside a flow-root box. */
.prayer-list-buttons {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin: 12px 8px;
}
.prayer-list-buttons > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.prayer-list-buttons span.k-switch-label-on,
.prayer-list-buttons span.k-switch-label-off {
  font-size: 12px;
}
.prayer-list-buttons span.k-switch-label-off {
  text-align: unset;
  right: 5px;
}
.prayer-list-buttons span.k-switch {
  font-size: 9px;
}
@media (max-width: 767px) {
  .prayer-list-buttons {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.75rem;
  }
  .prayer-list-buttons > div {
    width: 100%;
    justify-content: space-between;
  }
  .prayer-list-buttons .btn {
    width: 100%;
  }
}

/* The Kendo Switch sits next to a plain-text label; `display: contents` keeps
   the wrapper transparent so the label text and the switch are direct flex
   children of .prayer-list-toggle, letting `gap` space them. */
.prayer-switch-label {
  display: contents;
}

/* Each prayer-member row reads "[checkbox]  Name" on its own grid: the
   checkbox sits in a fixed-width column hugging the card's left edge and the
   name takes the rest of the row. `align-items: center` parks the checkbox at
   the vertical center of the name -- including the midpoint between the two
   lines when the name wraps -- which is the intended look for these cards.
   `min-width: 0` on the name lets the flex item shrink below its intrinsic
   width so the text wraps inside its own lane instead of bleeding under the
   checkbox column. The negative left margin pulls the row past the surrounding
   card padding so the checkbox lines up close to the card edge (avoiding the
   ~16px indent the EditorFor `<div class="checkbox">` wrapper otherwise
   introduces). */
.prayer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: -0.5em;
  margin-top: 0.25em;
}
.prayer-row .prayer-checkbox {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.prayer-row .prayer-checkbox > div.checkbox {
  display: inline-block;
  margin: 0;
}
.prayer-row .prayer-checkbox-input {
  margin: 0;
  vertical-align: middle;
}
.prayer-row .prayer-name {
  flex: 1 1 0;
  min-width: 0;
  word-break: break-word;
}

.rop-custom-field {
  font-size: 12px;
}

.view-all-profiles {
  text-align: end;
}
@media (max-width: 768px) {
  .view-all-profiles {
    text-align: unset;
  }
}
.view-all-profiles div {
  margin-top: 25px;
  padding-right: 7px;
}
@media (max-width: 768px) {
  .view-all-profiles div {
    padding-left: 7px;
  }
}
.view-all-profiles div div {
  display: contents;
}
.view-all-profiles span.k-switch {
  font-size: 9px;
  margin-left: 5px;
}

.nav.navbar-nav.navbar-right.ari-right-menu {
  float: left !important;
}
.nav.navbar-nav.navbar-right.ari-right-menu a {
  color: inherit;
  display: inline-block;
  margin: 10px;
  margin-left: 70px;
  margin-top: 40px;
  margin-right: 60px;
  overflow: hidden;
}
.nav.navbar-nav.navbar-right.ari-right-menu img {
  display: inline;
  /*Per the fix it should be 100% but this does not take into account the code it is simply an out of box solution*/
  height: 100%;
  /*height: inherit;*/
  width: 100%;
  object-fit: cover;
  margin: 15px;
  margin-left: 30px;
  border-radius: inherit;
  float: left;
}

.nav.navbar-nav.navbar-right.ari-right-menu.image {
  height: 70px;
  width: 70px;
  border-radius: 50%;
}

.nav.navbar-nav.navbar-right.ari-right-menu.log-off p {
  color: inherit;
  font-size: 12px;
  margin: 10px;
  margin-right: 120px;
  margin-left: 125px;
}
.nav.navbar-nav.navbar-right.ari-right-menu.log-off a {
  color: inherit;
  margin: 10px;
  font-size: 10px;
  float: right;
  margin-right: 30px;
}

.Calendar-Contact .fa-map-pin {
  width: 16px;
  margin-left: 3px;
}
.Calendar-Contact .fa-lg.fa-caret-right {
  margin-left: 5px;
  transition: all 0.5s ease;
  text-decoration: none;
  cursor: pointer;
}
.Calendar-Contact .rotate.fa-caret-right {
  margin-left: 5px;
  transform: rotate(90deg);
  Ctransition: all 0.5s ease;
  text-decoration: none;
  cursor: pointer;
}
.Calendar-Contact .Calendar-Contact-Details {
  margin-top: 1em;
  margin-bottom: 1em;
  display: none;
}
.Calendar-Contact .Calendar-Contact-Details .Calendar-Contact-DetailsImg {
  width: 100%;
  height: auto;
}
.Calendar-Contact .Calendar-Contact-Details .landscape.Calendar-Contact-DetailsImg {
  width: auto;
  height: 100%;
  object-fit: fill;
}
.Calendar-Contact .Calendar-Contact-Details .portrait.Calendar-Contact-DetailsImg {
  width: 100%;
  height: auto;
  object-fit: fill;
}
.Calendar-Contact .Calendar-Contact-Details .image_cover {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
  margin-right: 1em;
  align-items: center;
  justify-content: center;
  display: flex;
}
.Calendar-Contact .Calendar-Contact-Details .fa-phone {
  margin-left: 1px;
  width: 17px;
  margin: auto;
}
.Calendar-Contact .Calendar-Contact-Details .fa-envelope {
  width: 19px;
  margin-left: 0px;
}
.Calendar-Contact .Calendar-Contact-Details .event-Birthday::before {
  margin-right: 7px;
}
.Calendar-Contact .Calendar-Contact-Details .event-Anniversary::before {
  margin-right: 7px;
}
.Calendar-Contact .Calendar-Contact-Details .SpouseName {
  font-weight: bold;
}

/* What's-New dropdown styling moved to site.css. The 1.0 rules anchored on
   #whats-new-button .k-animation-container, but the current Kendo Menu reparents
   the popup to <body>, so that ancestor selector no longer matches and the rules
   were silently dead. The replacement targets .whats-new-container directly. */

/* Glow lives behind a .has-new flag toggled by whitehurst-global-whats-new.js:
   the trigger <li> ships pre-hidden via inline style="display:none" set in
   WhitehurstMenu.cs. When the AJAX confirms one or more posts are still
   flagged DisplayAsNew the script clears that inline display and adds
   .is-revealed, which plays the slide-in keyframes defined in site.css.
   The orange text-shadow only fires when there's unread news; hovering the
   link clears .has-new immediately so the glow snuffs out without waiting
   on a page reload. */
li#whats-new-button.has-new span.k-link i {
  text-shadow: 0 0 10px orange;
}

.no-padding {
  padding: 0px;
}

.sync-complete {
  margin: -10px -10px 10px -10px;
}


.tab-content {
    padding-top: 1.5em;
}

/* Grid action buttons -- strip the chunky solid-pill chrome off every grid's
   Edit / Destroy commands so they read as link-style icon+label pairs. Delete
   is tinted brand red so the destructive action stands out; Edit inherits the
   row text color (with a faint blue wash on hover) and lets the pencil icon
   do the signalling.

   Targets .k-grid-edit-command / .k-grid-remove-command directly (no :has() filter) because
   Telerik 2026 SVG mode -- pinned via Program.cs AddKendo(IconType.Svg) and
   mirrored client-side by @Html.Kendo().DefaultSettings() in _LayoutHead --
   often renders the icon span as `<span class="k-svg-icon"><svg>...</svg>`
   with the glyph baked into the SVG <use href>, so a glyph-specific selector
   like :has(.k-svg-i-trash) silently fails to match.

   Flattening every .k-grid-edit-command / .k-grid-remove-command also sweeps the repurposed
   commands (`command.Edit().Text("Resend")` in _Users.cshtml,
   `command.Edit().Text("Firefight")` in _DeftFlux.cshtml) into the same
   link style -- they keep their custom icon + text but lose the pill, which
   unifies the action column look across the whole app. Toolbar Create/Excel
   buttons (different classes -- .k-grid-add, .k-grid-excel) and inline-edit
   Update/Cancel (.k-grid-save, .k-grid-cancel) are untouched.

   !important guards every rule against the Kendo Bootstrap theme's solid
   button styles loaded from kendo.cdn.telerik.com (the theme uses CSS
   variables + heavy specificity, so source order alone wouldn't win). */
.k-grid .k-grid-edit-command,
.k-grid .k-grid-remove-command {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 6px !important;
  min-width: 0;
}

.k-grid .k-grid-edit-command {
    color: var(--primary-color) !important;
}

.k-grid .k-grid-edit-command:hover,
.k-grid .k-grid-edit-command:focus {
  background-color: rgba(51, 122, 183, 0.08) !important;
}

.k-grid .k-grid-remove-command {
  color: var(--danger-color) !important;
}
.k-grid .k-grid-remove-command:hover,
.k-grid .k-grid-remove-command:focus {
  background-color: rgba(204, 37, 37, 0.08) !important;
}

/* Kendo popup-edit-form footer buttons -- the SVG glyph on the Update primary
   button was rendering close-to-invisible (the same blue as the button background)
   on Bootstrap-theme 13.x. The theme's CSS sets the button text color via
   --kendo-button-* variables but the inner <svg> element ships with a static fill
   instead of fill="currentColor", so the icon ignored the parent's color.
   Force fill: currentColor on every SVG icon inside the popup window's action bar
   so the check (Update) and X (Cancel) ride the button's text color. */
.k-window-actions .k-button .k-svg-icon,
.k-window-actions .k-button .k-svg-icon > svg,
.k-edit-form-container .k-button .k-svg-icon,
.k-edit-form-container .k-button .k-svg-icon > svg,
.k-popup-edit-form .k-button .k-svg-icon,
.k-popup-edit-form .k-button .k-svg-icon > svg {
  color: currentColor !important;
  fill: currentColor !important;
}