@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --accent-color: #0d6efd;
  --accent-color-contrast: #fff;
}

html h1,
html h2,
html h3,
.h3,
.h2,
.h1 {
  font-family: "Montserrat", sans-serif;
}

body,
html {
  background-color: #fff;
  overflow-x: hidden;
  font-family: "Open Sans", sans-serif;
  padding: 0 !important;
  min-height: auto;
}

html#hub-index {
  background: #fff;
}

#render-body {
  isolation: isolate;
}

body.embed,
html.embed {
  background-color: transparent !important;
}

h3 {
  font-family: "Montserrat", sans-serif;
  color: #3b3b3b;
  font-size: 22px;
  font-weight: bold;
}

.full {
  padding: 0 24px !important;
  margin: 0 auto !important;
  background-size: cover;
  overflow: hidden;
  background-position: center;
  height: 600px;
  background-color: #888;
  position: relative;
}

.header .logo img {
  height: 32px !important;
  margin-top: 7px;
}

.hub-hero-banner .header {
  padding: 12px 0;
  width: 100%;
  position: relative;
  z-index: 9;
  float: left;
}

#hub-hero-banner-outer .overlay.dk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

#hub-hero-banner-outer .overlay.dk > * {
  position: relative;
  z-index: 1;
}

.infoWrap {
  position: relative;
  height: 600px;
  width: 100%;
}

.mainInfoCont {
  position: absolute;
  top: 40%;
  transform: translateY(-40%);
  width: calc(100% - 20px);
}
.mainInfoCont #header {
  font-family: "Montserrat", serif;
  color: #fff;
  font-size: 55px;
  font-weight: bolder;
  padding-bottom: 22px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}

.mainInfoCont #blurb {
  font-family: "Libre Franklin", sans-serif;
  color: #fff;
  font-size: 20px;
  width: 90%;
  font-weight: 400;
  line-height: 34px;
  outline: none;
  overflow-x: hidden;
  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.8);
}

.hub-navbar #tabbed-content-bs-outer {
  margin-bottom: 40px;
  margin-top: 30px;
}

#header-stats-outer .headerStats {
  display: none; /* set to 'block' when stats are provided, see Hub.js */
  background: #f5f8fa;

  /* width: 35%; */

  /* margin: 0 auto; */
  height: 140px;
  z-index: 999;
  padding: 16px 18px;
  border-radius: 24px;
  margin-top: -70px;
  margin-bottom: 50px;
  border: 0;
  box-shadow: none;
  margin-left: 0;
}

.statInfo .statText {
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 48px;
  text-align: center;
  margin-left: -8px;
  color: #333;
}

.statInfo .statHeader {
  text-transform: uppercase;
  font-family: "Libre Franklin", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #666;
  color: rgba(58, 58, 58, 0.68);
}

.card {
  border: none;
  border-radius: 24px;
}

.project {
  padding: 34px;
  padding-bottom: 24px;
  transition: 0.25s ease-in-out;
}

.project.hover-enlarge:hover {
  -webkit-transform: translateY(-4px) scale(1.02);
  -moz-transform: translateY(-4px) scale(1.02);
  -ms-transform: translateY(-4px) scale(1.02);
  -o-transform: translateY(-4px) scale(1.02);
  transform: translateY(-4px) scale(1.02);
  -webkit-box-shadow: 0 14px 24px rgba(62, 57, 107, 0.2);
  box-shadow: 0 14px 24px rgba(62, 57, 107, 0.2);
}

.project.hover-enlarge-sm:hover {
  -webkit-transform: translateY(-1px) scale(1.001);
  -moz-transform: translateY(-1px) scale(1.001);
  -ms-transform: translateY(-1px) scale(1.001);
  -o-transform: translateY(-1px) scale(1.001);
  transform: translateY(-1px) scale(1.001);
  -webkit-box-shadow: 0 10px 18px rgba(62, 57, 107, 0.2);
  box-shadow: 0 8px 14px rgba(62, 57, 107, 0.2);
  z-index: 999;
}

.project.has-featured-img div.featured-img {
  margin: -34px;
  margin-bottom: 25px;
  background-position: center;
  background-size: cover !important;
  overflow: hidden;
  height: 200px;
  border-radius: 0;
  background-repeat: no-repeat;
  border-top-right-radius: inherit;
  border-top-left-radius: inherit;
}

.sidebar {
  padding: 18px 32px;
  margin-bottom: 20px;
}

.sidebar.profile-cta-outer {
  margin-top: 25px;
}

/* Resolve issue with sidebar covering entire embed */
.embed #surveySideBar {
  clear: both;
}

.project .thumb.noImage {
  width: 90px;
  height: 90px;
}

.project .thumb {
  max-width: 90px;
  max-height: 90px;
  width: auto;
  max-width: 100%;
  margin-bottom: 15px;
}

.project .noImage {
  background: -webkit-gradient(
    linear,
    left top,
    right bottom,
    from(#fc3),
    to(#ffb347)
  );
  background: linear-gradient(to bottom right, #fc3, #ffb347);
  color: #fff;
  font-size: 46px;
  font-weight: bold;
  text-align: center;
  padding-top: 12px;
  font-family: "Montserrat", sans-serif;
}

.project h3,
project .h3 {
  margin: 0;
  margin-bottom: 18px;
  font-weight: 700;
}

.project p {
  font-family: "Open Sans", sans-serif;
  /* Relative units so text scales with user settings (1.4.8): 1rem = 16px, 1.625 = 26px. */
  font-size: 1rem;
  line-height: 1.625;
}

.project .action {
  padding: 8px 0 8px 14px;
}

.project .action .info {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  margin-right: 18px;
  padding-top: 8px !important;
}

.project .action:last-child .info:last-child {
  padding-top: 0 !important;
}

.project .action .info img {
  display: inline-block;
  font-size: 16px;
  opacity: 0.75;
  width: 20px;
  vertical-align: sub;
  margin-right: 6px;
}

.project.featured {
  padding: 0;
}

.project.featured .row-inner {
  padding: 34px;
}

.project.featured .btn {
  padding: 12px 24px;
  font-weight: 600;
}

.project.featured .btn:hover {
  background-color: var(--accent-color-contrast);
  color: var(--accent-color);
  border: solid 1px var(--accent-color);
}

.featured-image {
  position: relative;
}

.featured-image img {
  height: auto;
  object-fit: cover;
  width: 100%;
}

.featured-image img[src=""],
.featured-image img[src=""] ~ .feature-badge {
  display: none;
}

.feature-badge {
  display: none;
  position: absolute;
  bottom: -50px;
  right: 2em;
  width: 120px;
  height: 120px;
  color: #fff;
}

.feature-badge div {
  display: block;
  font-size: 16px;
  font-weight: bold;
  margin-top: 40%;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 9;
}

.feature-badge svg {
  position: absolute;
  height: 100%;
  width: 100%;
}

.feature-badge svg path {
  fill: #bfa86d;
}

/* @media (max-width: 992px) {
    .feature-badge {
        bottom: 51%;
        right: 3%;
    }
} */

.comment-submit-outer .comment-submit-button {
  background-color: var(--accent-color);
  color: var(--accent-color-contrast);
  border: solid 1px var(--accent-color);
  padding-left: 14px;
  padding-right: 14px;
  font-weight: 600;
  transition: 0.2s ease-in-out;
  border-radius: 8px;
}

.comment-submit-outer .comment-submit-button:hover {
  color: var(--accent-color);
  background-color: transparent;
}

.leadList-form .btn.btn-primary {
  background-color: var(--accent-color);
  color: var(--accent-color-contrast);
  border: solid 1px var(--accent-color);
}

.leadList-form .btn.btn-primary:hover {
  background-color: var(--accent-color-contrast);
  color: var(--accent-color);
}

#continueToAccount:hover,
.confirm-button .btn-primary:hover,
#endButton.btn.btn-primary:hover,
.signupBtn button.btn-primary:hover {
  background-color: var(--accent-color-contrast);
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
}

.btn.btn-primary:focus-visible {
  background-color: var(--accent-color-contrast);
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
}

.btn.btn-primary:active {
  background-color: #0461cf !important;
}

.btn.btn-primary.glow:hover {
  -webkit-box-shadow: 0 0 20px rgba(41, 142, 255, 0.7);
  box-shadow: 0 0 20px rgba(41, 142, 255, 0.7);
}

.btn.btn-primary.glow {
  -webkit-box-shadow: 0 0 10px rgba(41, 142, 255, 0.6);
  box-shadow: 0 0 10px rgba(41, 142, 255, 0.6);
}

.upcomingMeetings {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
}

.upcomingMeetings > li {
  margin: 0 -32px;
  padding: 14px 32px;
  border-top: 1px solid #e6e6e6;
}

.upcomingMeetings > li:only-child {
  border: none !important;
  border: none !important;
  padding-top: 10px;
}

.upcomingMeetings > li:last-child {
  border-bottom: 1px solid #e6e6e6;
}

.upcomingMeetings li p,
.upcomingMeetings li .time {
  margin: 0;
  line-height: 30px;
  font-size: 16px;
  font-weight: 600;
}

.upcomingMeetings li p a {
  color: #56a6ff;
}

.upcomingMeetings li p img {
  display: inline-block;
  font-size: 16px;
  opacity: 0.75;
  width: 18px;
  vertical-align: sub;
  margin-right: 10px;
}

.twitterFeed {
  height: 650px;
  overflow-y: auto;
  margin: 0 -32px;
}

::-moz-selection {
  color: #fff;
  background: #0d6efd;
}

::selection {
  color: #fff;
  background: #0d6efd;
}

.twitterFeed::-webkit-scrollbar {
  width: 6px;
}

/* Track */
.twitterFeed::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.twitterFeed::-webkit-scrollbar-thumb {
  background: #e6e6e6;
}

/* xs bootstrap */
@media (max-width: 768px) {
  #hub-content-container {
    padding: 0 15px;
  }

  .xs-text-center {
    text-align: center;
  }

  .xs-text-center > .noImage {
    margin: 0 auto;
  }

  .xs-text-center > .thumb {
    margin-bottom: 18px;
  }

  .xs-full-btn {
    width: 100%;
  }

  .xs-full-btn .btn {
    width: 100%;
  }

  .statInfo {
    margin-top: 12px;
  }

  .statInfo .statText {
    font-size: 32px;
  }

  .statInfo .statHeader {
    font-size: 10px;
  }

  .mainInfoCont {
    position: relative;
    width: auto;
    margin: 0 16px;
  }

  .mainInfoCont #header {
    /* font-size: 2.2em; */
    font-size: 8vw;
  }

  .mainInfoCont #blurb {
    font-family: "Open Sans", sans-serif;
    color: #fff;
    font-size: 16px;
    width: auto;
    font-weight: 400;
    line-height: 25px;
    outline: none;
    max-height: 175px;
    overflow-y: hidden;
    text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.8);
  }

  .header .logo img {
    height: 28px !important;
    margin-top: 10px;
    margin-left: 10px;
  }

  .settings .user {
    font-size: 14px;
  }

  .settings .settingsBtn {
    width: 16px;
    filter: invert(1);
    vertical-align: sub;
    margin-right: 4px;
  }

  .infoWrap {
    padding: 0 15px;
    width: auto;
    position: relative;
  }

  .full.has-overlay-image,
  .full.has-hub-title {
    max-height: 325px;
  }

  .signup-format-form .full.has-hub-title {
    max-height: 425px;
  }

  .signup-format-form .mainInfoCont #header {
    font-size: 2rem;
    padding-bottom: 1rem;
  }

  .has-hub-title .infoWrap {
    height: 250px;
  }

  .has-hub-title .hub-hero-banner {
    height: 250px;
  }

  /* On mobile, add a line break before the "Sign in here" text. */
  .have-an-account b {
    display: block;
  }

  .active-projects-pagination-wrapper,
  .inactive-projects-pagination-wrapper {
    padding: 0 15px;
  }

  .project-category-wrapper {
    margin-bottom: 1em;
  }
}

.noPadding {
  padding: 0 !important;
}

#EventLoginModal .modal-title {
  font-family: "Montserrat", sans-serif;
}

.textarea {
  border-color: rgb(230, 230, 230);
  box-shadow: none;
  margin: 6px 1px 6px 0;
  max-width: 100%;
  border-radius: 2px;
}

.display-area label {
  font-weight: 600;
  color: #828282;
}

.textbox {
  display: block;
  width: 100%;
  padding: 8px 12px !important;
  border-radius: 4px !important;
  outline: none !important;
  border: 1px solid #e6e6e6 !important;
  margin: 8px 0 !important;
}

.signupBtn {
  margin: 8px 0;
  float: right;
}

.signup {
  margin-top: 30px;
}

.signupUpdates p {
  margin: 0;
  line-height: 30px;
  font-size: 16px;
  font-weight: 600;
}

.signupUpdates p img {
  display: inline-block;
  font-size: 16px;
  opacity: 0.75;
  width: 18px;
  vertical-align: sub;
  margin-right: 10px;
}

.or-separator {
  color: rgba(53, 53, 53);
  font-size: 12px;
  text-align: center;
}

.parsley-errors-list {
  padding: 0;
}

.parsley-errors-list li {
  padding: 6px 0;
  list-style-type: none;
  border-left: 3px solid #e04444;
  background: rgba(224, 68, 68, 0.1);
  padding-left: 10px;
}

.success-msg {
  padding: 6px 0;
  list-style-type: none;
  border-left: 3px solid #4caf50;
  background: rgba(76, 175, 80, 0.1);
  padding-left: 10px;
}

.card:hover .editOption {
  display: block;
  visibility: visible;
  opacity: 0.85;
}

.editOption {
  position: absolute;
  right: 16px;
  top: 12px;
  width: 18px;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition: visibility 0s, opacity 0.2s ease-in-out;
}

.sidebarEditor {
  width: 280px;
  height: 100% !important;
  position: fixed !important;
  z-index: 900;
  top: 0;
  bottom: 0;
  padding: 0 16px;
  border-top-left-radius: 0;
  display: none !important;
}

.sidebarEditor.show {
  display: block !important;
}

.sidebarEditor p {
  margin: 0;
  line-height: 30px;
  font-size: 16px;
  font-weight: 600;
}

.textbox {
  max-width: 100%;
}

#sortStats2 {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 300px;
  border-radius: 4px !important;
  outline: none !important;
  border: 0 solid #e6e6e6 !important;
}

.statInfo {
  min-height: 90px;
}

.statInfo .ui-sortable-helper {
  cursor: move;
}

#sortStats2 .stats div {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
  color: #333;
}

#sortStats2 .stats {
  padding: 8px;
  background: rgb(245, 245, 245);
  border-radius: 6px;
  margin: 8px 0;
  cursor: all-scroll;
}

.marginLeft {
  margin-left: 280px;
}

.dashed-placeholder {
  border: 2px dashed #dadada;
  width: 100%;
  min-height: 90px;
}

.ui-sortable-handle {
  z-index: 999;
}

.collapseHeader {
  display: block;
  cursor: pointer;
  font-size: 16px;
  color: #03a9f4;
  padding: 16px 16px;
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: 0;
  border-bottom: 1px solid #efefef;
  font-weight: 600;
}

.collapseHeader:first-of-type {
  border-top: 1px solid #efefef;
}

.panel-collapse.collapse.in + .collapseHeader {
  border-top: 1px solid #efefef;
}

.collapseHeader:hover {
  background: rgba(3, 177, 246, 0.04);
}

a.collapseHeader {
  text-decoration: none;
}

.checkbox {
  margin: 16px 0;
}

.checkbox label {
  font-weight: 500;
}

.checkbox label::after {
  content: "";
  display: table;
  clear: both;
}

.checkbox .cr {
  position: relative;
  display: inline-block;
  border: 1px solid #a9a9a9;
  border-radius: 0.25em;
  width: 1.6em;
  height: 1.6em;
  float: left;
  margin-right: 0.7em;
  margin-top: -1px;
}

.checkbox .cr .cr-icon {
  position: absolute;
  font-size: 0.8em;
  line-height: 0;
  top: 50%;
  left: 20%;
  color: #51a9f4;
}

.checkbox label input[type="checkbox"] + .cr {
  border: 1px solid #51a9f4;
}

.checkbox label input[type="checkbox"] + .cr > .cr-icon {
  opacity: 0;
}

.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon {
  opacity: 1;
}

.radio label::after {
  content: "";
  display: table;
  clear: both;
}

.radio .cr {
  position: relative;
  display: inline-block;
  border: 1px solid #a9a9a9;
  border-radius: 0.25em;
  width: 1.3em;
  height: 1.3em;
  float: left;
  margin-right: 0.5em;
}

.radio .cr {
  border-radius: 50%;
}

.radio .cr .cr-icon {
  position: absolute;
  font-size: 0.8em;
  line-height: 0;
  top: 50%;
  left: 13%;
}

.radio .cr .cr-icon {
  margin-left: 0.04em;
}

.sidebarEditor .radio label input[type="radio"] {
  display: none;
}

.radio label input[type="radio"] + .cr > .cr-icon {
  transform: scale(3);
  opacity: 0;
}

.radio label input[type="radio"]:checked + .cr > .cr-icon {
  transform: scale(1) rotateZ(0deg);
  opacity: 1;
}

.overlay.dk {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

.timelineMilestone {
  display: none;
}

.timeLineToggle {
  cursor: pointer;
}

a.powered-by-outer {
  float: right;
  margin-top: 2px;
}

a .powered-by {
  width: 100px;
  opacity: 0.9;
  cursor: pointer;
}

/* Handle on hover */
.twitterFeed::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.settings {
  cursor: pointer;
  z-index: 9;
}

.settings .user,
.mainCont button.language-toggle,
button.language-toggle:focus-within {
  background: rgb(0 0 0 / 60%);
  border-radius: 12px;
  padding: 12px;
  margin-top: 0;
  color: #fff !important;
  font-size: 16px;
  transition: 0.3s ease-in-out;
  border: none;
}

.settings .settingsBtn {
  width: 20px;
  filter: invert(1);
  vertical-align: bottom;
  margin-right: 12px;
}

.settings .user:hover,
.language-toggle:hover {
  background-color: #333 !important;
  color: #fff !important;
}

.page-title-h3,
p.page-title-h3,
.h3.page-title-h3,
.calendar-events-list-outer .past-events > h3,
.calendar-events-list-outer .upcoming-events > h3 {
  font-size: 14px;
  line-height: 21px;
  text-transform: uppercase;
  color: #696868;
  font-weight: 700;
  font-family: "Montserrat";
  letter-spacing: 0.1em;
}

h3.page-title,
.meeting-and-events-title-wrapper h3 {
  font-weight: 700;
  line-height: 2em;
}

/* #region embed settings */

.embed body,
html.embed {
  background: none;
}

.embed #hub-content-container {
  padding: 0 15px;
}

.embed .sidebar.card {
  margin-bottom: 5px;
}

.calendarIcon {
  font-size: 16px;
  opacity: 0.75;
  width: 18px;
  vertical-align: sub;
  margin-right: 10px;
  color: #13689f;
}

.rsvpMenu > li {
  padding: 10px 18px;
  cursor: pointer;
}

.rsvpMenu > li:hover {
  background: #f5f5f5;
}

.upcomingMeetings li p:last-of-type {
  display: inline-block;
}

@media (max-device-width: 768px) {
  div.rsvpGroup {
    margin: 10px 0 0;
    text-align: left;
    width: auto;
  }
}

.rsvpGroup {
  display: inline-block;
}

.add-to-calendar.dropdown .btn,
.btn.event-registration-toggle,
.add-to-calendar.dropdown button {
  background: #13689f;
  color: #fff !important;
  line-height: 1em;
  vertical-align: bottom;
  font-weight: 600;
}

.rsvpGroup .caret {
  margin-left: 3px;
}

/* #endregion */

/* #region Subscription Page */

#subscriptionSlide.panel {
  background: #fff !important;
}

.panel.panel-default.card {
  box-shadow: none !important;
  border-radius: 24px !important;
  overflow: hidden;
  background-color: #f5f8fa;
  border: none !important;
}

.panel-default > .panel-heading {
  background-color: inherit !important;
}

.project-topic-parent .topic-name {
  font-family: Montserrat;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-align: left;
  padding: 0 15px;
}

.subscription-expand-container > a.subscription-expand {
  border: none !important;
  box-shadow: none;
  border-radius: 8px 8px 0 0;
  border: none !important;
  background: none !important;
  background-color: none;
  color: #0394ff !important;
}

.subscription-expand-container > a.subscription-expand.active {
  background: inherit !important;
}

.subscription-expand-container > a.btn.btn-default.subscription-expand:hover,
.subscription-expand-container > a.btn.btn-default.subscription-expand:focus {
  color: #0394ff !important;
  box-shadow: none;
}

.panel .table td,
.panel .table th {
  background: inherit !important;
  margin: 0;
  padding: 24px;
  border: none;
  display: table-cell;
  vertical-align: middle;
}

.panel .table thead > tr > th {
  border: none !important;
}

.subscribe-row:nth-child(even) {
  background: inherit !important;
}

.topic-name {
  font-family: Libre Franklin;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
  margin: 0 !important;
}

.subscribe-hub-icons {
  text-align: center !important;
}

.panel.panel-default.customer-subscriptions .checkbox {
  margin: 0;
}

.panel.panel-default.customer-subscriptions .checkbox.i-checks {
  margin: 0 !important;
}

.panel.panel-default.customer-subscriptions .checkbox.i-checks i {
  width: 24px;
  height: 24px;
  border: 2px solid #8997a1;
  margin: 0;
}

.panel.panel-default.customer-subscriptions
  .checkbox.i-checks
  input[type="checkbox"]:checked
  ~ i::before {
  font-size: 18px;
}

/* Subscription redesign */
.card .card-body .card-text .subscribe-hub-icons {
  min-width: 45px !important;
  width: 45px !important;
}

.topic-name {
  font-family: Libre Franklin;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
}

.subscribe-hub-icons {
  text-align: center !important;
}

.default-hub-header .pull-right {
  float: right;
}

@media (min-width: 768px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: 0;
  }
}

#UserDisplayName {
  display: block;
}

.hub-centered-signup {
  margin-bottom: 15px;
  text-align: left;
}

.subscriptions-customer-logo-wrapper img {
  max-width: 40%;
}

.customer-subscriptions.card {
  position: relative;
  margin: 0.5rem 0 1rem 0;
  background-color: #fff;
  -webkit-transition: -webkit-box-shadow 0.25s;
  transition: -webkit-box-shadow 0.25s;
  transition: box-shadow 0.25s;
  transition: box-shadow 0.25s, -webkit-box-shadow 0.25s;
  border-radius: 2px !important;
}

.customer-subscriptions.card {
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2) !important;
}

.customer-subscriptions:first-child {
  margin-top: 20px;
}

.customer-subscriptions .arrow-down,
.customer-subscriptions.active .arrow-right {
  display: none;
}

.customer-subscriptions.active .arrow-down {
  display: inline;
}

.subscription-topic {
  padding: 0;
}

.project-topic-parent {
  width: 100%;
  position: relative;
  display: table;
  flex-grow: 1;
}

.project-topic-parent .topic-name {
  font-weight: 500;
  display: table-cell;
  vertical-align: middle;
}

.panel-default > .panel-heading {
  background-color: #f9fafc;
}

.panel-title {
  padding: 2em;
  font-weight: 400;
}

.subscription-expand {
  background-color: #f5f5f6;
  border-color: rgba(0, 0, 0, 0.1) !important;
  border-radius: 0.4em 0.4em 0 0;
  color: #111 !important;
  border-bottom: none !important;
}

.subscription-expand-container {
  margin-top: 7px;
}

.subscription-expand.active {
  background-color: #bbb !important;
  color: #111 !important;
}

/* .subscription-expand:focus, .subscription-subtopic label:focus-within {
            box-shadow: 0 0 .2em .1em rgba(41, 142, 255, 1);
        } */

.subscription-subtopic label {
  padding: 0.5em;
}

.subscription-subtopics-outer {
  display: none;
  padding-bottom: 0;
}

.subscription-subtopics-outer:nth-child(even) {
  background-color: #dbf1ff;
}

.subscription-subtopics-outer table {
  margin-bottom: 0;
}

.subscription-subtopics {
  margin-bottom: 0;
}

.subscription-subtopic label,
.subscription-subtopic {
  display: block;
  width: 100%;
}

#subscriptionSlide {
  margin-top: 55px;
}

#subscriptionSlide .checkbox label {
  padding-left: 0;
}

#subscriptionSlide > header {
  background-color: #fff;
  padding: 15px;
}

#subscriptionSlide .subscriptions-customer-logo-wrapper img {
  width: 100%;
  padding-top: 25px;
  padding-bottom: 25px;
}

#subscriptionSlide.panel {
  background: rgba(255, 255, 255, 0.95);
  border: none !important;
}

.subscription-checkbox-container {
  padding: 0.5em 1em;
  flex-shrink: 0;
}

.subscription-topic.panel-heading {
  display: flex;
  padding-right: 12px;
}

@media only screen and (max-width: 768px) {
  .subscription-topic.panel-heading {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

.subscription-checkbox-container .checkbox {
  margin: 0.5em 0.5em 0.5em 0;
}

.subscription-checkbox-container > i {
  padding-left: 2px;
}

.subscription-subtopics-outer,
.customer-subscriptions .i-checks i {
  margin-left: 0;
}

.subscribe-row:nth-child(even) {
  background: #f9fafc;
  color: #333;
}

a.subscription-expand {
  border: none;
  box-shadow: none;
  border-radius: 8px 8px 0 0;
}

.no-phone {
  display: none;
}

.subscribe-row {
  font-size: 14px;
}

.manage-profile-outer .pi-btn-primary.btn-primary {
  padding-top: 0;
  padding-bottom: 0;
  font-size: 14px;
  line-height: 38px;
  height: 38px !important;
}

.topic-name {
  margin-top: 1em;
  font-weight: 500;
  color: #333;
}

span.highlight {
  background: #ffe00a;
}

.my-data-search-bar .pi-btn-primary.btn-primary,
.manage-profile-outer
  .pi-btn-primary.btn-primary:not(.add-new-address .pi-btn-primary),
#search-boards-and-commissions .pi-btn-primary.btn-primary,
.pi-btn-primary.btn-primary.searchbtn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#boards-and-commissions,
#search-boards-and-commissions {
  margin: 15px 0;
}

.project-category-search .search-choice {
  margin-top: 5px !important;
}

#search-boards-and-commissions .search-hub-input,
#boards-and-commissions .search-hub-input,
#search-hub-projects .search-hub-input,
.project-category-search .chosen-choices {
  width: 100%;
  height: 50px;
  padding: 1px;
  padding-left: 15px;
  border: none;
  border-radius: 8px;
  outline: none;
  -webkit-box-shadow: 0 0 0 2px #949494 inset;
  box-shadow: 0 0 0 2px #949494 inset;
  -webkit-appearance: none;
  background-color: #fff;
  font-size: 16px;
  padding-right: 30px;
}

#boards-and-commissions .search-hub-input:focus,
#search-hub-projects .search-hub-input:focus,
#search-boards-and-commissions .search-hub-input:focus {
  -webkit-box-shadow: 0 0 0 2px #177bbb inset !important;
  box-shadow: 0 0 0 2px #177bbb inset !important;
  -webkit-appearance: none !important;
  transition: all ease 0.5s;
}

#participateBtnHubMap {
  padding: 12px 24px;
  margin: 10px 0;
  font-size: 16px;
}

.nav-tabs {
  cursor: pointer;
}

.map-inner .material.hub-tabs {
  margin-top: 20px;
}

li#surveysTab.active {
  font-weight: bold;
}

li#eventsTab.active {
  font-weight: bold;
}

.tab-pane .calendar-events-list-outer {
  padding: 0;
}

.upcoming-events .meeting-preview-outer .panel-heading {
  background: #fff;
}

/* #region Custom Hubs */
.hub-button-grid a.btn {
  width: 100%;
  margin-bottom: 15px;
  border-radius: 5px;
  height: 65px;
  font-size: 1.5em;
  line-height: 2.25em;
}

@media only screen and (min-width: 992px) {
  .hub-button-grid.container {
    padding-left: 0;
    padding-right: 0;
  }

  .have-an-account {
    margin-left: 10px;
  }

  .hub-navbar .container.fluid {
    padding-left: 0;
    padding-right: 0;
  }

  .hub-navbar .navbar-collapse {
    padding-left: 0;
    padding-right: 0;
  }

  .hub-events-list-outer #calendarSearch {
    top: 36px;
  }
}

div#calendarSearch {
  font-size: 16px;
  padding: 0;
  top: 0;
}

fieldset.date-range-group {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

#events-daterange .input-daterange.input-group {
  gap: 0;
  flex-wrap: nowrap;
}

#events-daterange .input-daterange .form-control {
  min-width: auto;
}

@media (max-width: 991px) {
  #calendarSearch
    #accordionSearch
    .searchBar
    .input-group:not(.date-range-group) {
    display: block;
  }

  /* Stacked, so the input must not keep Bootstrap's flex-only `width: 1%` (it rendered
     ~25px wide between 769px and 991px, e.g. a 1920px window at 200% zoom - AB#10646).
     Below 768px the #calendar-search-collapse rule already does this. */
  #calendarSearch
    #accordionSearch
    .searchBar
    .input-group:not(.date-range-group)
    > .form-control {
    width: 100%;
    margin-bottom: 0.5em;
    border-radius: 6px;
  }
}

a.footerLink {
  margin: 5px;
}

.copyText {
  margin: 15px;
}

.eds_faButtons.eds_invertIcons {
  font-size: 3em;
  color: #fff !important;
}

/* #endregion */

/* #region Boards and Commissions grid view */
.card-title.projName {
  font-weight: bold;
  margin-top: 10px;
}

/* div .boardComms:nth-child(n+4) {
    display: none;
}

div .boardComms.showAllResults:nth-child(n+4) {
    display: flex;
} */

/* #endregion */

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
  margin-right: 20px;
  cursor: pointer;
}

.project-category-search {
  margin: 15px 0;
  padding: 0 15px;
  clear: both;
}

.project-category-search .chosen-container-multi .chosen-choices {
  font-size: 16px;
  min-height: 50px !important;
  border: none;
}

.project-category-search .chosen-container-active .chosen-choices {
  box-shadow: 0 0 0 2px #177bbb inset;
}

.chosen-search-input {
  padding-left: 15px;
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  margin-top: 10px;
}

.event-category-search .chosen-choices li.search-field input[type="text"] {
  padding-bottom: 10px !important;
}

/* #region Find My Council Member grid view */

.card-deck > .card.councilMembers {
  flex: 1 1 100%;
  max-width: 100%;
  box-shadow: none;
  border: none;
}

.card.councilMembers:hover {
  transform: none;
  box-shadow: none;
}

.card.councilMembers .card-subtitle a:hover {
  text-decoration: underline;
}

.card-deck .card-image {
  padding: 20px 20px 0;
}

#electedOfficials .card-deck {
  margin-left: -20px;
  margin-right: -20px;
}

@media (min-width: 576px) {
  .card-deck > .card.councilMembers {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 0;
  }

  .card-deck > .card.councilMembers {
    flex: 1 1 25%;
    max-width: calc(25%);
  }

  .councilMembers .card-title {
    min-height: 30px;
  }
}

a.council-member-bio {
  text-decoration: underline;
}

a.council-member-contact {
  width: 100%;
}

img.card-img-top {
  max-width: 100%;
  display: inline-block;
}

/* #endregion */

img.event-card-img-top {
  height: auto;
  max-height: 120px;
  width: 100%;
}

@media (min-width: 767px) {
  .project-category-search .chosen-choices {
    border-radius: 0 5px 5px 0;
  }

  .project-category-search {
    margin: 0;
    padding: 0 15px 0 15px;
    clear: none;
  }

  .search-block div.project-category-search {
    padding-left: 5px; /* When in-line with search, keeps total padding smaller */
  }

  .project.card img.thumb {
    margin-top: 5px;
  }
}

#search-hub-projects .input-group-btn {
  display: none;
}

#search-hub-projects .search-hub-input {
  border-radius: 8px;
}

#search-boards-and-commissions .search-hub-input {
  border-radius: 5px 0 0 5px !important;
}

#search-hub-projects .input-group-btn button,
#search-boards-and-commissions .input-group-btn button,
.map-button-container .btn {
  height: 50px;
  margin-right: 0;
  min-width: 95px;
  font-size: 18px;
}

.map-button-container .btn {
  margin-left: 15px;
}

.board-comm-home .committee-img-wrapper {
  width: unset !important;
  height: 125px;
  max-width: none !important;
}

#committeeTab .card.boardComms .card-title.projName {
  text-align: left;
}

#committeeTab .card.boardComms .card-footer-container {
  flex-grow: 1;
}

.projBlurb {
  margin-bottom: 15px;
}

.boardComms .projBlurb {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines you want to display */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.5em;
}

.projBlurb > .read-more {
  cursor: pointer;
  text-decoration: underline;
  color: #337ab7;
}

.projBlurb p {
  margin: 0;
}

.info .body-small {
  color: #696868;
}

.headerContent.icon-column {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Add right padding to icon on desktop for spacing */
@media (min-width: 769px) {
  .headerContent.icon-column {
    padding-right: 1rem !important;
  }
}

/* typical phone screen resolution */
@media (max-width: 768px) {
  .boardComms .committee-img-wrapper {
    width: 100%;
  }

  .committee-img-wrapper,
  .card-footer-container {
    width: 100% !important; /* On small screens, each takes full width */
    max-width: 100% !important;
  }

  .project.card .px-5 {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
  }

  /* Remove duplicate padding from col-12 elements inside px-5 */
  .px-5 > .col-12 {
    padding-left: 0;
    padding-right: 0;
  }

  .action.text-end {
    margin-top: 2rem;
  }

  .project.card {
    margin-bottom: 2rem !important;
  }

  #committeeTab .boardComms .projName {
    -webkit-line-clamp: 4;
  }

  #committeeTab .boardComms .projBlurb {
    -webkit-line-clamp: 7;
    max-height: 12em;
  }

  .date-thumbnail * {
    color: #333 !important;
    font-size: 1.2em;
    display: block !important;
  }

  .date-thumbnail .date-thumbnail__day {
    font-weight: 600;
  }

  #calendar-search-collapse input,
  #calendar-search-collapse .searchbtn {
    width: 100%;
    margin-bottom: 0.5em;
    border-radius: 6px !important;
  }

  .input-daterange.input-group .input-group-text {
    border: none;
    background: none;
    display: block;
    padding: 5px 0;
  }

  /* handling display of mapping UI on mobile */
  .offcanvas-inner .project-name,
  .offcanvas-inner .project-description {
    text-wrap: inherit;
    word-break: break-word;
  }

  .offcanvas-inner .project-card {
    margin-left: auto;
    width: inherit;
  }

  /* #10563 mobile map sheet: open drawers fill the map iframe, close control sits inside */
  #mapOfAllProjects_sidebar .offCanvasWrapper.active,
  #mapOfAllProjects_sidebar .filterWrapper.active {
    width: 100%;
    max-width: 100%;
    height: 100%;
    transform: translateX(0);
  }

  /* A closed sheet slides fully off-screen here, close control included: keep it out of the tab order.
     visibility flips only after the 0.3s slide, so the close animation still plays. */
  #mapOfAllProjects_sidebar .offCanvasWrapper:not(.active),
  #mapOfAllProjects_sidebar .filterWrapper:not(.active) {
    visibility: hidden;
  }

  #mapOfAllProjects_sidebar .toggleOffCanvas {
    top: 0.5rem;
    right: 0.5rem;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    line-height: 1;
    background: #fff;
    border: 1px solid #6c757d;
    border-radius: 4px;
    /* Lifts the search-results toggle above Bootstrap .offcanvas (1045); the filter toggle's inline z-index wins */
    z-index: 1050;
  }

  #mapOfAllProjects_sidebar .offCanvas-searchWrapper {
    padding-right: 3.5rem;
  }

  #mapOfAllProjects_sidebar .filter-controls {
    padding-right: 3.5rem !important;
    align-items: center;
  }

  #mapOfAllProjects_sidebar .filter-back-button,
  #mapOfAllProjects_sidebar .filter-clear {
    min-height: 44px;
    align-items: center;
    font-size: 1rem;
  }

  #mapOfAllProjects_sidebar .filter-clear {
    display: inline-flex;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  #mapOfAllProjects_sidebar .filter-inner .d-flex.align-items-center {
    min-height: 44px;
  }

  #mapOfAllProjects_sidebar .filter-inner .form-check-label {
    align-self: stretch;
    display: flex;
    align-items: center;
    font-size: 1rem;
  }

  #mapOfAllProjects_sidebar .filter-inner .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }

  #mapOfAllProjects_sidebar .filter-children-caret {
    flex-grow: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  #mapOfAllProjects_sidebar .filter-summary .filter-pill {
    font-size: 1rem;
  }

  #mapOfAllProjects_sidebar .filter-summary .filter-pill .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  #mapOfAllProjects .filter-widget,
  #mapOfAllProjects_sidebar .filter-widget {
    min-height: 44px;
    align-items: center;
  }

  #mapOfAllProjects .esri-search .esri-search__input,
  #mapOfAllProjects_sidebar .esri-search .esri-search__input {
    height: 44px;
    font-size: 1rem;
  }

  #mapOfAllProjects .esri-search .esri-widget--button,
  #mapOfAllProjects_sidebar .esri-search .esri-widget--button {
    align-self: stretch;
    width: 44px;
    height: 44px;
  }

  /* Search and Filter share a row at 375px and wrap rather than clip at 320px */
  #mapOfAllProjects .esri-ui-top-left.esri-ui-corner {
    width: calc(100% - 30px);
    margin-left: 15px;
    flex-wrap: wrap;
    gap: 8px;
  }

  #mapOfAllProjects .esri-ui-top-left .esri-search {
    flex: 1 1 200px;
    width: auto;
    min-width: 0;
  }
}

/* Displaying BoardComm images to the left on Portal Home Tab. */
@media only screen and (min-width: 768px) {
  .board-comm-home .boardComms {
    flex-direction: row !important;
  }

  .board-comm-home .boardComms .committee-img-wrapper {
    width: 50% !important;
    height: auto;
  }
}

#home .card.boardComms .card-footer-container {
  display: flex;
  align-items: flex-end;
}

#home .card.boardComms .headerContent {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.boardComms .btn {
  margin-top: 0.5rem;
}

#committeeTab .card.boardComms {
  min-width: unset !important;
  max-width: 100% !important;
}

@media only screen and (max-width: 768px) {
  #committeeTab .card-deck .card,
  #committeeTab .card-deck > .card.boardComms {
    flex-direction: column !important;
  }

  .boardComms .committee-img-wrapper {
    width: 100% !important;
  }
}

/* Project image aspect ratio classes */
.project-image-aspect-2-1 {
  aspect-ratio: 2/1;
}

.project-image-aspect-2-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-image-aspect-16-9 {
  aspect-ratio: 16/9;
}

.project-image-aspect-16-9 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-image-aspect-1-1 {
  aspect-ratio: 1/1;
}

.project-image-aspect-1-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#committeeTab img.card-img {
  display: block !important;
  aspect-ratio: 2/1;
}

#committeeTab .card-deck .card,
#committeeTab .card-deck > .card.boardComms {
  flex-direction: row;
}

#committeeTab .card-footer {
  padding: 10px 15px;
  height: 100%;
}

#committeeTab .card-footer .card-img-overlay {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#committeeTab .card-footer .card-img-overlay p {
  flex: 1;
}

#committeeTab .card-deck > .card.boardComms .text-right a {
  display: inline-block;
}

@media only screen and (max-width: 1200px) {
  .search-bar-wrapper {
    top: 103px;
  }
}

@media only screen and (max-width: 768px) {
  .search-bar-wrapper {
    top: 35px;
  }
}

.project-category-search input.chosen-search-input.default {
  padding-left: 15px !important;
  padding-top: 3px !important;
  font-size: 16px;
  height: 25px !important;
  border-radius: 8px;
}

i.embedded-category-icon {
  position: absolute;
  z-index: 100;
  top: 20px;
  right: 38px;
}

.hub-events-list-outer > .scrollable.wrapper:first-child {
  min-height: calc(100vh - 80px);
}

.my-profile-sidebar {
  font-size: 16px;
  margin-bottom: 30px;
  margin-top: 30px;
}

#profileInfoBlock {
  padding: 2.2em 30px;
  border: 2px #1e465f solid;
  background: #fff;
  font-size: 18px;
  margin-bottom: 1.5em;
  border-radius: 24px;
  margin-top: 1.5em;
}

div#surveys {
  padding-bottom: 25px;
}

#profileInfoBlock p a:hover {
  color: var(--accent-color);
  background-color: transparent;
}

#profileInfoBlock p a:focus-visible {
  color: var(--accent-color);
  background-color: transparent;
}

#profileInfoBlock p a:not([href^="/Profile"]) {
  color: var(--accent-color-contrast);
  background-color: var(--accent-color);
  border: solid 1px var(--accent-color);
}

#profileInfoBlock p a:not([href^="/Profile"]):hover {
  color: var(--accent-color);
  background-color: transparent;
}

#profileInfoBlock p a:focus,
#profileInfoBlock p a:hover {
  color: var(--accent-color);
  background-color: transparent;
}

#profileInfoBlock p a:not([href^="/Profile"]) {
  color: var(--accent-color-contrast);
  background-color: var(--accent-color);
  border: solid 1px var(--accent-color);
}

#profileInfoBlock p a:not([href^="/Profile"]):hover {
  color: var(--accent-color);
  background-color: transparent;
}

#profileInfoBlock .btn {
  font-size: 1.2rem;
}

#profileInfoBlock h3 {
  margin-top: 0;
}

.default-hub-header .dropdown .btn {
  background-color: #ffffff14;
  border-radius: 0;
  display: inline-block;
}

#hub-index #login-page {
  background: none;
  padding: 40px 0;
}

#hub-index #login-page form {
  text-align: left;
}

.editable-open ~ span .remove-attr {
  margin-left: 25px;
}

.overlay-image .container {
  top: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
  padding: 0 15px;
}

.hub-overlay-image img {
  max-height: 100%;
  max-width: 100%;
}

.hub-overlay-image {
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 75%;
  padding: 0 20px;
  left: 0;
  right: 0;
}

.hub-overlay-image {
  max-width: 50%;
}

@media (min-width: 1200px) {
  #render-body .container {
    width: 1116px;
    max-width: 100%;
  }
}

/* #region portal navigation bar */

nav.hub-navbar .nav > li > a.nav-link {
  padding-left: 12px;
  padding-right: 12px;
  font-size: 0.9em;
  color: #fff;
}

nav.hub-navbar {
  border-radius: 0;
  background-color: var(--accent-color) !important;
  color: #fff;
  font-size: 20px;
  transition: all 300ms;
  font-weight: 600;
  margin-bottom: 0;
  border: 0;
}

nav.hub-navbar .container {
  padding: 15px 10px;
}

@media (min-width: 768px) {
  nav.hub-navbar {
    position: sticky;
    top: -1px;
    z-index: 3;
  }
}

.hub-navbar ul {
  justify-content: center;
}

.hub-navbar .nav-tabs .nav-item .nav-link {
  border-radius: 8px;
  border: 0;
}

.hub-navbar .nav-tabs a {
  font-size: 16px;
  font-weight: 700;
}

.hub-navbar .nav-tabs .nav-item.show .nav-link,
.hub-navbar .nav-tabs .nav-link:hover {
  background-color: #33333340;
}

/* Do not show pressed/active background on nav links that open in a new tab */
.hub-navbar .nav-tabs .nav-link[target="_blank"]:hover,
.hub-navbar .nav-tabs .nav-link[target="_blank"]:focus,
.hub-navbar .nav-tabs .nav-link[target="_blank"]:active {
  background-color: transparent !important;
}

.hub-navbar .nav-tabs .nav-link.active,
.hub-navbar .nav-tabs .nav-item.show .nav-link {
  background-color: #3336 !important;
}

.hub-navbar .nav-tabs .nav-link:hover,
.hub-navbar .nav-tabs .nav-link:focus {
  background-color: #33333340 !important;
}

/* Prevent white/opaque "pill" when clicking links that open in a new tab */
.hub-navbar .nav-tabs .nav-link[target="_blank"],
.hub-navbar .nav-tabs .nav-link[target="_blank"]:hover,
.hub-navbar .nav-tabs .nav-link[target="_blank"]:focus,
.hub-navbar .nav-tabs .nav-link[target="_blank"]:active,
.hub-navbar .nav-tabs .nav-link[target="_blank"].active,
.hub-navbar .nav-tabs .nav-item.show .nav-link[target="_blank"] {
  background-color: transparent !important;
  box-shadow: none !important;
}

.navbar-brand.header {
  float: left;
  padding: 12px 0;
  text-align: left;
  line-height: 1.2em;
}

.hub-navbar ul.nav {
  border: 0;
}

.hub-navbar .navbar-toggler {
  border: none;
  padding: 10px;
  color: #fff;
}

#hub-navbar-toggler-menu-label#hub-navbar-toggler-menu-label {
  color: #fff !important;
}

.hub-navbar .nav {
  border: none !important;
}

.hub-navbar .nav-link {
  border: none !important;
}

.hub-navbar {
  padding: 0 !important;
  z-index: 3;
}

#calendarSearch .input-group {
  height: 100%;
}

/* #endregion */

div#my-data-container-outer {
  background: #fff;
  padding: 20px;
  border-radius: 3px;
}

@media (max-width: 768px) {
  div#my-data-container-outer {
    padding: 20px 12px;
  }
}

#survey-tab-featured-projects,
#survey-tab-active-projects {
  margin-bottom: 5em;
}

/* typical phone screen resolution */
@media only screen and (max-width: 667px) {
  #survey-tab-featured-projects,
  #survey-tab-active-projects {
    margin-bottom: 3em;
  }
}

.is-searching #survey-tab-featured-projects,
.is-searching #survey-tab-active-projects {
  margin-bottom: auto;
  margin-top: auto;
}

.top-search-container {
  display: flex;
  margin-top: 2em;
  margin-bottom: 30px;
}

/* typical phone screen resolution */
@media only screen and (max-width: 667px) {
  .top-search-container {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
}

.search-block {
  flex-grow: 2;
}

@media (max-width: 768px) {
  .search-block {
    width: 100%;
  }
}

.map-inner .scroll-to-top {
  display: none;
}

.map-inner #hub-content-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.map-inner .hub-tabs {
  margin-left: 25px;
}

#mapTab {
  min-height: calc(100vh - 50px);
  width: 100vw;
  height: calc(100vh - 100px);
}

#mapIframe {
  overflow: hidden;
}

#mapWindowContainer {
  height: 100%;
}

#mapWindowContainer iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

.filter-widget:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.filter-widget i {
  font-size: 18px;
}

.filter-back-button {
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.filter-back-button i {
  font-size: 1rem;
}

#map-loading-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  display: none;
}

#map-loading-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 9999;
}

#map-loading-indicator::after {
  content: "";
  width: 50px;
  height: 50px;
  border: 6px solid #ccc;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.hub-navbar ~ div #mapTab {
  margin-top: 0;
}

#mapOfAllProjects_sidebar {
  width: 300px;
  max-width: 100%;
  height: 100%;
  border-left: 1px solid;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.filterWrapper .toggleOffCanvas {
  align-self: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

#mapOfAllProjects_sidebar {
  width: 300px;
  max-width: 100%;
  height: 100%;
  border-left: 1px solid;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.filterWrapper .toggleOffCanvas {
  align-self: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

/* Left align portal map popover content */
.esri-popup .custom-popup-content {
  position: relative;
  padding-bottom: 50px; /* Adjust based on button height */
  text-align: left;

  /* ESRI Popup Scrolling Fix - Enable scrolling for overflow content */
  max-height: 400px;
  overflow-y: auto;
}

.esri-popup .custom-popup-description {
  text-align: left;

  /* ESRI Popup Scrolling Fix - Ensure content can scroll */
  max-height: 350px;
  overflow-y: auto;
  padding-right: 8px; /* Add space for scrollbar */
}

/* ESRI Popup Scrolling Fix - Address known ESRI version issues */
.esri-features.esri-widget.esri-widget--panel {
  overflow: hidden;
}

.esri-features.esri-widget.esri-widget--panel calcite-flow {
  overflow: auto;
}

/* ESRI Popup Scrolling Fix - Ensure popup content containers can scroll */
.esri-popup__content {
  overflow-y: auto;
  max-height: 400px;
}

.esri-popup__main-container {
  overflow: visible;
}

/* ESRI Popup Scrolling Fix - Custom scrollbar styling for better UX */
.esri-popup .custom-popup-content::-webkit-scrollbar,
.esri-popup .custom-popup-description::-webkit-scrollbar {
  width: 6px;
}

.esri-popup .custom-popup-content::-webkit-scrollbar-track,
.esri-popup .custom-popup-description::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.esri-popup .custom-popup-content::-webkit-scrollbar-thumb,
.esri-popup .custom-popup-description::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.esri-popup .custom-popup-content::-webkit-scrollbar-thumb:hover,
.esri-popup .custom-popup-description::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.esri-popup span.esri-icon-link-external {
  margin-right: 10px;
}

/* AB#11854: on phones the project popup docks as a full-width bottom sheet.
   .esri-view-width-xsmall is Esri's own class for views up to 544px wide, the same
   width at which the popup auto-docks, so tablet and desktop popups are unchanged. */
#mapOfAllProjects.esri-view-width-xsmall .esri-popup--is-docked .esri-popup__main-container {
  /* Fixed to the map frame rather than the UI container, which is inset by the
     view's 25px left padding and produced the offset panel. */
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: 50%;
  margin: 0;
  border-radius: 12px 12px 0 0;
  overscroll-behavior: contain;
}

/* The sheet scrolls in one place only; drags never chain out to the portal page. */
#mapOfAllProjects.esri-view-width-xsmall .esri-popup--is-docked calcite-flow {
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Title and action rows do not scroll, so a drag on them must not scroll the page. */
#mapOfAllProjects.esri-view-width-xsmall .esri-popup--is-docked .esri-features__heading,
#mapOfAllProjects.esri-view-width-xsmall .esri-popup--is-docked calcite-action-bar {
  touch-action: none;
}

/* The fixed-size scroll boxes from the desktop popup would nest a second scroller. */
#mapOfAllProjects.esri-view-width-xsmall .esri-popup .custom-popup-content,
#mapOfAllProjects.esri-view-width-xsmall .esri-popup .custom-popup-description,
#mapOfAllProjects.esri-view-width-xsmall .esri-popup__content {
  max-height: none;
  overflow-y: visible;
}

/* Prevent fancy link focus highlights when google maps does an auto-focus on map popup */
.gm-style-iw-d p a:focus {
  color: #337ab7;
  background-color: inherit;
  border: none;
}

.hub-tabs a h2,
.nav-link h2 {
  font-size: inherit;
  font-weight: 400;
  margin: 0;
  margin-bottom: 0;
  line-height: inherit;
  color: inherit;
}

/* Project search in hub map sidebar */
#mapTab .text-center {
  position: relative;
}

.offCanvasWrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.offCanvasWrapper,
.filterWrapper {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background-color: #f8f9fa;
  height: calc(100vh - 66px);
  width: 400px;
  max-width: 100%;
  transition: all 0.3s ease;
  transform: translateX(-400px);
}

.offCanvasWrapper.hide,
.filterWrapper.hide {
  display: none !important;
}

#mapOfAllProjects_sidebar .offcanvas {
  overflow-y: auto;
  background-color: #f8f9fa;
  height: 100%;
  width: 100%;
  text-align: left;
  visibility: unset;
}

.offCanvasWrapper.active,
.filterWrapper.active {
  transform: translateX(0);
}

.filterWrapper {
  padding-left: 12px;
  padding-right: 12px;
}

.offCanvasWrapper .toggleOffCanvas,
.filterWrapper .toggleOffCanvas {
  position: absolute;
  top: 15px;
  right: 0%;
  transform: translate(30px, 0);
  height: 44px;
  line-height: 40px;
  border: none;
  outline: none;
  background: white;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  width: 30px;
  padding: 0;
}

/* The base rule above strips outline, and the drawer code moves focus onto these toggles
   (open/close, Escape). Restore a visible keyboard focus ring on every width (WCAG 2.4.7).
   #0b5ed7 is ~5.9:1 against #fff. */
#mapOfAllProjects_sidebar .toggleOffCanvas:focus-visible {
  outline: 3px solid #0b5ed7;
  outline-offset: 2px;
}

.offCanvasWrapper.active .toggleOffCanvas i,
.filterWrapper.active .toggleOffCanvas i {
  transform: rotate(180deg);
}

.offCanvas-searchWrapper .esri-search {
  width: calc(100% - 20px);
  margin: 10px auto;
}

.offCanvas-searchWrapper .filter-widget {
  float: right;
  margin-right: 10px;
}

.offcanvas-inner {
  padding: 15px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.offcanvas-inner .project-card {
  max-height: 300px;
  display: block;
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  background: rgb(229 238 244);
  padding: 16px;
  margin: 0 auto;
  text-align: left;
  cursor: pointer;
}

.offcanvas-inner .project-name {
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 16px;
  font-weight: 700;
}

.offcanvas-inner .project-description {
  line-height: 1.5em;
  height: 4.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  margin-bottom: 16px;
}

.offset-inner .project-participate {
  position: absolute;
  bottom: 0;
  right: 0;
}

.filterWrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filter-controller {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.filter-title {
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.25rem;
}

.filter-summary {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-summary .label.filter-pill {
  font-weight: 500;
  font-size: 0.9rem;
  background: white;
  color: #333;
  border-radius: 30px;
  border: solid thin #ddd;
  cursor: pointer;
  padding: 4px 8px;
}

.filter-inner {
  text-align: left;
  overflow: auto;
}

.filter-section > .input-group > .fa {
  display: none;
}

.filter-section.filter-parent-level > .input-group > .fa {
  display: block;
}

.filter-parent-level.filter-section {
  margin-bottom: 20px;
}

.filter-parent-level > .input-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-right: 8px;
  margin-bottom: 10px;
}

.filter-children-caret {
  flex-grow: 1;
  text-align: right;
  cursor: pointer;
}

.filter-empty {
  font-size: 1rem;
  font-weight: 500;
  color: #6c757d; /* This is a guess for the color based on the image */
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.filter-children-level {
  /* display: none; */
  padding-left: 20px;
}

.filter-children-level .input-group {
  margin-bottom: 10px;
}

.checkbox-lg .form-check-input {
  top: 0.8rem;
  scale: 1.4;
  margin-right: 0.7rem;
}

.checkbox-xl .form-check-input {
  top: 1.2rem;
  scale: 1.7;
  margin-right: 0.8rem;
}

.checkbox-xl .form-check-label {
  padding-top: 19px;
}

.esri-ui-top-left.esri-ui-corner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 350px;
  align-items: center;
  margin-left: 20px;
}

.esri-popup__inline-actions-container > div:first-child {
  background-color: #012c3b;
  color: white;
  border-radius: 5px;
}

.no-results-container {
  display: flex;
  justify-content: center;
  margin: 40px;
}

.no-results-container p {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.pi-btn-primary.btn-primary.showMoreProjects,
.pi-btn-primary.btn-primary.showMore {
  border-radius: 30px;
}

button.showMoreProjects {
  margin-top: 2em;
  width: 100%;
  height: 3em;
}

.pagination-wrapper .showMore {
  width: 100%;
  padding: 12px;
}

.active-projects-pagination-wrapper,
.inactive-projects-pagination-wrapper {
  margin: 0 -15px;
}

.main-hub-tabs {
  margin-top: 1.5em;
}

.main-hub-tabs .material.nav li.nav-item {
  padding: 4px !important;
}

.main-hub-tabs .nav-pills .nav-link {
  padding: 16px;
  border-radius: 16px;
  border: none;
  color: #696868;
}

.main-hub-tabs .nav-pills .nav-link.active {
  background: #e0f2ff;
  color: #333;
}

.main-hub-tabs .nav-pills .nav-link:hover {
  background: #f1f1f1;
  text-decoration: none;
}

.main-hub-tabs .nav-pills .nav-link {
  color: #696868;
  font-weight: 700;
  font-size: 16px !important;
  font-family: "Montserrat", sans-serif;
}

.main-hub-tabs .nav-pills .nav-link.active {
  color: #333;
}

.nav-tabs {
  border: 0;
}

.chosen-container {
  width: 100% !important;
}

/* #region migrated-from-shims */

#home .project.card,
#survey-tab-featured-projects .project.card {
  border: 0;
  box-shadow: none;
  background: #f5f8fa;
}

/* Remove padding from .project cards in home projects preview section.

   These templates own their gutter on the title column, so the base
   `.project { padding: 34px }` above has to be cleared or the two stack.

   `.featured-projects-container` covers the Puck FeaturedProjects block. It
   renders its section as `#survey-tab-featured-projects-new`, and an ID
   selector does not match by prefix, so the `#survey-tab-featured-projects`
   entry above never applied to it — those cards kept the 34px card padding on
   top of the column's own, which is the doubled gutter reported on the Emerald
   Valley Transit portal. Matching on the container class rather than adding the
   `-new` id keeps this working if the id is versioned again. */
.home-projects-preview .project,
#survey-tab-featured-projects .project,
.featured-projects-container .project {
  padding: 0;
}

#home .project.card .headerContent,
#survey-tab-featured-projects .project.card .headerContent {
  padding: 24px;
}

#home .project.card .headerContent .projName,
#survey-tab-featured-projects .project.card .headerContent .projName {
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 700 !important;
  line-height: 36px;
  text-align: left;
}

#home .project.card .headerContent .projBlurb,
#survey-tab-featured-projects .project.card .headerContent .projBlurb {
  font-family: "Libre Franklin", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-line-clamp: 3;
}

.project-category-wrapper .label,
#home .project-category-wrapper span.label,
#survey-tab-featured-projects .project-category-wrapper span.label {
  padding: 4px 8px;
  border-radius: 12px;
  background: #e0f2ff;
  font-family: "Libre Franklin", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  color: #696868;
}

/* Ensure Bootstrap gutter padding works properly for all project grids */

/* The g-3 class applies padding to columns, which creates spacing between cards */
#survey-tab-featured-projects .row.g-3 > [class*="col-"],
#active-projects-list.row.g-3 > [class*="col-"],
#inactive-projects-list.row.g-3 > [class*="col-"] {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Ensure grid containers have proper negative margins */
#survey-tab-featured-projects .row.g-3,
#active-projects-list.row.g-3,
#inactive-projects-list.row.g-3 {
  margin-left: -1rem;
  margin-right: -1rem;
}

/* Equal height project cards within grid rows */
/* The <a> tag has the col-sm-* class directly, so target it as a flex item */
#active-projects-list.row.g-3,
#inactive-projects-list.row.g-3 {
  display: flex;
  flex-wrap: wrap;
}

/* Make the <a> column links use flex to stretch their content */
/* Override Bootstrap's .d-block !important with our own !important */
#active-projects-list.row.g-3 > a[class*="col-"],
#inactive-projects-list.row.g-3 > a[class*="col-"] {
  display: flex !important;
}

/* Make the project-card-wrapper fill the link height */
#active-projects-list .project-card-wrapper,
#inactive-projects-list .project-card-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* Make the project card fill the wrapper */
#active-projects-list .project-card-wrapper > .project.card,
#inactive-projects-list .project-card-wrapper > .project.card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Make the inner row fill available height but keep horizontal layout for icon/title */
#active-projects-list .project.card > .row.px-5,
#inactive-projects-list .project.card > .row.px-5 {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

/* Ensure icon-column keeps its Bootstrap width and doesn't flex-grow */
#active-projects-list .project.card .headerContent.icon-column,
#inactive-projects-list .project.card .headerContent.icon-column {
  flex: 0 0 auto;
}

/* Make the title-column content stretch and distribute vertically */
#active-projects-list .project.card .headerContent.title-column,
#inactive-projects-list .project.card .headerContent.title-column {
  display: flex;
  flex-direction: column;
}

/* Push the action row (with Participate button) to the bottom */
#active-projects-list
  .project.card
  .headerContent.title-column
  > .row.no-gutter:last-child,
#inactive-projects-list
  .project.card
  .headerContent.title-column
  > .row.no-gutter:last-child {
  margin-top: auto;
}

.sidebar.card {
  border: 0;
  box-shadow: none;
  background: #f5f8fa;
  border-radius: 12px;
}

.signup {
  margin: 0;
}

.signup h3,
.signup ~ h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-align: left;
}

button.sign-in-btn {
  width: 100%;
}

#search-hub-projects .search-hub-input,
#search-boards-and-commissions .search-hub-input {
  box-shadow: none;
  background: #f5f8fa;
}

.map-button-container {
  margin: 0;
}

#showProjectMap {
  display: flex;
  align-items: center;
}

#calendarSearchForm .event-category-search .chosen-choices {
  border-radius: 5.625px;
  border: solid thin rgb(222, 226, 230);
}

.cz-card--neutral:hover {
  box-shadow: none;
}

.meeting-preview-outer .card,
.comments-and-video-outer {
  background: #f5f8fa;
}

.meeting-preview-outer .card .card-header {
  background: inherit;
}

.comments-and-video-outer .meeting-tab-content .tab-pane {
  background: inherit;
}

.project-category-search .chosen-container-multi .chosen-choices {
  box-shadow: none;
  background: #f5f8fa;
  border-radius: 8px;
}

.project-category-search
  .chosen-container-multi
  .chosen-choices
  .search-choice
  span {
  font-family: "Libre Franklin", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
}

.twitterFeed {
  margin: 0;
}

.boardComms .card-footer-container {
  background: #f5f8fa;
}

@media (min-width: 992px) {
  .boardComms .committee-img-wrapper {
    flex: 0 0 auto; /* Do not grow or shrink, but maintain the width based on content */
    width: 50%; /* Adjust as needed */
    max-width: 50%; /* Ensures the container does not grow beyond this width */
  }
}

.boardComms .committee-img-wrapper img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 2 / 1;
  height: 100%;
  object-position: center;
}

.boardComms .card.boardComms {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap as needed */
}

.card-footer-container {
  flex: 1; /* Grow to fill the available space */
  width: 50%;
}

.board-comm-home .committee-img-wrapper {
  width: 210px;
  max-width: 210px;
  height: auto;
}

#committeeTab .card-deck .card-footer {
  background: #f5f8fa;
}

div.filter-block-alphabetical-sort {
  border: 0;
}

.filter-block-alphabetical-sort div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

div.filter-block-alphabetical-sort a.link_huge {
  font-family: "Libre Franklin", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
}

.filter-block-alphabetical-sort a.link_huge.active {
  background: #e0f2ff;
  border-radius: 8px;
}

#committeeTab img.card-img {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

#committeeTab .boardComms .projName,
#committeeTab .boardComms .projBlurb {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  max-height: 4.5em;
}

#committeeTab .card.boardComms {
  border: 0;
  display: flex;
}

#committeeTab .boardComms .projName {
  -webkit-line-clamp: 1;
}

#committeeTab .boardComms .projBlurb {
  -webkit-line-clamp: 2;
}

#committeeTab .card.boardComms .card-title.projName {
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-align: left;
}

#committeeTab .card.boardComms .card-title.projBlurb {
  font-family: "Libre Franklin", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
}

.search-results,
.no-search-results,
.search-results-boards-and-committee,
.no-search-results-boards-and-committee,
.page-title-h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-align: left;
}

.page-title-h3 {
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: 0.1em;
  text-align: left;
  margin-top: 32px;
}

.hub-page-description {
  font-family: "Libre Franklin", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
}

#active-projects-list a .project-card-wrapper .project.card {
  border: 0;
  box-shadow: none;
  background: #f5f8fa;
  border-radius: 24px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#active-projects-list a .project-card-wrapper .project.card > .row,
#active-projects-list
  a
  .project-card-wrapper
  .project.card
  > .headerContent.title-column {
  padding: 24px;
}

#active-projects-list
  a
  .project-card-wrapper
  .project.card
  .headerContent.title-column
  .projName {
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-align: left;
}

#active-projects-list
  a
  .project-card-wrapper
  .project.card
  .headerContent.title-column
  .projBlurb {
  font-family: "Libre Franklin", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-line-clamp: 3;
}

#active-projects-list
  a
  .project-card-wrapper
  .project.card
  .headerContent.title-column
  .project-category-wrapper {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#active-projects-list
  a
  .project-card-wrapper
  .project.card
  .headerContent.title-column
  .project-category-wrapper
  .label {
  padding: 4px 8px;
  border-radius: 12px;
  background: #e0f2ff;
  font-family: "Libre Franklin", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
}

.upcoming-events .meeting-preview-outer {
  border: 0;
  box-shadow: none;
  border-radius: 24px;
}

.upcoming-events .meeting-preview-outer .card {
  border: 0;
  box-shadow: none;
}

.upcoming-events .meeting-preview-outer .card .comments-and-video-outer,
.upcoming-events
  .meeting-preview-outer
  .card
  .comments-and-video-outer
  .meeting-tab-content
  .tab-pane {
  background: #f5f8fa;
}

#inactive-projects-list .project.card {
  border: 0;
  box-shadow: none;
  background: #f5f8fa;
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
}

#inactive-projects-list .project.card .headerContent {
  padding: 24px;
}

.project-category-search .embedded-category-icon {
  top: 50%;
  transform: translateY(-50%);
}

.project-category-search .chosen-container-multi .chosen-choices::after {
  display: none;
}

.cz-media-card-content__title {
  font-family: Montserrat;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-align: left;
}

.past-events .card {
  height: 100%;
}

.board-comm-home .card.boardComms {
  border-radius: 24px;
}

.board-comm-home .card.boardComms .card-footer {
  background: inherit;
}

img.card-img.board-comm-default-img {
  max-width: 100%;
  border-radius: 0;
}

.upcoming-events .card-deck .card {
  border: none;
  border-radius: 24px;
  overflow: hidden;
  background: #f5f8fa;
  display: flex;
  gap: 0;
}

.upcoming-events .card-deck .card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.upcoming-events .card-deck .card .event-card-img-top {
  min-height: 125px;
}

.upcoming-events .card-deck .card .card-body a {
  position: relative;
  align-self: flex-end;
  margin-top: auto;
}

.past-events .card {
  height: auto;
}

div#hub-hero-banner-outer.full {
  width: 100%;
}

#accordionSearch div {
  background: #f5f8fa;
}

.list-view-events {
  margin-top: 0;
}

div#accordionSearch *:not(i) {
  font-family: "Montserrat", sans-serif;
}

form#calendarSearchForm label {
  margin-bottom: 4px;
}

.add-to-calendar .dropdown-menu .dropdown-item {
  margin: 0;
}

.add-to-calendar .dropdown-menu .dropdown-item:hover {
  margin: 0;
  padding: 0.5rem 1rem;
}

/* Calendar container bottom spacing */
.event-calendar-wrapper {
  margin-bottom: 3rem;
}

.settings.dropdown {
  font-family: "Libre Franklin", sans-serif;
  font-size: 16px;
}

.setting.dropdown a {
  color: black;
}

.filter-block-alphabetical-sort {
  top: 0;
}

.main-hub-tabs .nav-pills .nav-link h2 {
  color: #696868;
  font-weight: 700;
  font-size: 16px;
  border: none;
}

.main-hub-tabs .nav.nav-pills.nav-tabs {
  border-bottom: 0;
}

/* #endregion */
.btn-default.filter-widget {
  background: #fff;
}

.btn-default.filter-widget:hover {
  background: #fafafa !important;
}

.filter-container .form-check-input {
  border-radius: 0.25em !important;
}

.subscribe-hub-icons {
  min-width: 85px !important;
  text-align: left !important;
}

.subscribe-hub-text {
  margin-bottom: 5px;
}

input.subscribe-to-project {
  position: absolute;
}
@media only screen and (max-width: 768px) {
  .date-thumbnail.cz-text--center {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
  }

  .subscribe-hub-icons {
    min-width: 61px !important;
  }
}

.card.event-grid {
  overflow: hidden;
}

.hub-hero-banner .overlay > .container,
.hub-hero-banner-outer .overlay > .container {
  height: 100%;
}

.hub-hero-banner .overlay > .container .row,
.hub-hero-banner-outer .overlay > .container .row {
  height: 100%;
}

.hub-hero-banner .overlay > .container .row .hub-overlay-image,
.hub-hero-banner-outer .overlay > .container .row .hub-overlay-image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.hub-navbar .nav-tabs .nav-link {
  height: 100%;
}

@media (max-width: 768px) {
  .settings .dropdown-menu {
    max-width: unset;
    width: auto;
    right: 0;
  }
}

/* Styles for Calcite action buttons in ESRI Popups */
calcite-action button.btn.btn-primary,
calcite-action button.btn-primary {
  /* Select the internal button when .btn and .btn-primary are applied */
  background-color: #007bff !important; /* Bootstrap primary blue */
  border-color: #007bff !important;
  color: white !important;
  padding: 0.375rem 0.75rem !important; /* Standard Bootstrap padding */
  font-size: 1rem !important; /* Standard Bootstrap font size */
  line-height: 1.5 !important; /* Standard Bootstrap line height */
  border-radius: 0.25rem !important; /* Standard Bootstrap border radius */
  text-decoration: none !important;

  /* Reset any Calcite-specific appearances if necessary */
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important; /* Remove Calcite shadows if any */
}

/* Hover and focus states for the internal button */
calcite-action button.btn.btn-primary:hover,
calcite-action button.btn-primary:hover {
  background-color: #0056b3 !important; /* Darker blue for hover */
  border-color: #0056b3 !important;
  color: white !important;
}

calcite-action button.btn.btn-primary:focus-visible,
calcite-action button.btn-primary:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5) !important; /* Bootstrap focus ring */
}

/* If the button contains a text container, style it as well */
calcite-action button.btn.btn-primary .text-container {
  color: white !important; /* Ensure text color within any internal container is also white */
}

/* If the button contains an icon (e.g., your esri-icon-link-external, or calcite's own icons) */
calcite-action button.btn.btn-primary [class*="icon"],
calcite-action button.btn.btn-primary [slot*="icon"] /* Calcite often uses slots for icons */ {
  fill: white !important; /* For SVG icons */
  color: white !important; /* For font icons / text color of slotted icon component */

  /* You might need to adjust 'margin-right' or other properties if the icon alignment is off */
}

/* Breadcrumb styles for in-page display */
.page-breadcrumbs {
  background-color: #f8f9fa;
  padding: 1rem 1.5rem;
  border-radius: 0.375rem;
  margin-bottom: 1.5rem;
}

.page-breadcrumbs h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #181c32;
}

.breadcrumb {
  margin-bottom: 0;
  background-color: transparent;
  padding: 0;
}

.breadcrumb-item {
  font-size: 0.875rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "•";
  color: #b5b5c3;
  padding: 0 0.5rem;
}

.breadcrumb-item a {
  color: #7e8299;
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: #009ef7;
}

.breadcrumb-item.active {
  color: #181c32;
}

/* ============================================================================
   UpcomingEvents — "List (date chip)" layout (component: puckBundle.js)
   Base/structural styles so the layout renders on any hub; a customer's
   CustomCSS may override colors.
   ============================================================================ */
/* explicit layout class (set by the component) — robust where :has() is absent */
.upcoming-events-container .card-deck.layout-list {
  flex-direction: column;
  gap: 16px;
}
/* progressive enhancement for engines that support :has() */
.upcoming-events-container .card-deck:has(.event-list) {
  flex-direction: column;
  gap: 16px;
}
.event-list {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 20px;
  border: 1px solid #dbe3ea;
  border-radius: 12px;
  background: #f8fafb;
  box-shadow: none;
}
.event-list .event-date-chip {
  text-align: center;
}
.event-list .event-date-mon {
  display: block;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0072d6; /* AA-contrast blue on #f8fafb (customer CustomCSS may override) */
}
.event-list .event-date-day {
  display: block;
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: #333333;
}
.event-list .card-body {
  padding: 0;
}
.event-list .card-title {
  font-size: 19px;
  margin: 0 0 6px;
}
.event-list .event-when {
  font-size: 14px;
  color: #595959; /* >=4.5:1 (AA) on the #f8fafb list-row background */
  margin: 0 0 10px;
}
.event-list .button-container {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}