@charset "UTF-8";
/* ReSharper disable CssBrowserCompatibility */

/* Bootstrap 3 .hidden utility polyfill. BS3 shipped `.hidden { display: none !important;
   visibility: hidden !important; }` which the directory layouts (_Classic, _ClassicSmall,
   _ClassicFixedWidth, _Rosanna, Directory/Calendar) rely on to hide the household-detail
   popup template (`<div class="hidden"><div id="folks-#=Id#">...</div></div>`) until
   fancybox lifts it into the modal. BS5 dropped the class in favor of `.d-none`; without
   this rule the popup contents render inline as flex items inside `.search-results` and
   visually duplicate every card. Same retire-BS3 polyfill pattern used for `.well` below. */
.hidden {
  display: none !important;
  visibility: hidden !important;
}

.spin-on-click {
  position: relative;
}

#tell-me-more {
  margin-top: 50px;
}

.btn-front-page {
  width: 315px;
  margin-bottom: 5px;
}

#scroll-container {
  overflow: auto;
}

.flex-max {
  flex: 1 0 auto;
}

.flex-min {
  flex: 0 1 auto;
}

.flex-row {
  display: flex;
  flex-flow: row;
}

.flex-column {
  display: flex;
  flex-flow: column;
}

.body-content > hr:last-of-type {
  margin-top: 0;
}

.dl-horizontal dt {
  white-space: normal;
}

.font-x-large {
  font-size: larger;
  vertical-align: middle;
}

.search-results {
  display: flex;
  flex-flow: row wrap;
  position: relative;
  justify-content: space-around;
}


.extra-search-spacing {
  padding-top: 2em;
}

@media (max-width: 767px) {
  #searchResultsPartial {
    padding-top: calc(40px + 0.5em);
  }
}

#search-end {
  margin-top: 6em;
  margin-bottom: -6em;
  display: flex;
  height: 1px;
  position: relative;
}

#more-results {
  display: none;
  cursor: pointer;
}

#search-form .form-control {
  display: inline-block;
}

@media (max-width: 500px) {
  .search-results .person-card:not(.collage) a .person-image,
  .search-results .person-card:not(.collage) .person-image-holder,
  .person-details .person-card:not(.collage) a .person-image,
  .person-details .person-card:not(.collage) .person-image-holder {
    width: calc(100vw - 60px);
  }

  .search-results .person-card:not(.collage) .empty-person-image-holder,
  .person-details .person-card:not(.collage) .empty-person-image-holder {
    height: 8.4em;
  }

  .search-results .person-card.collage .person-image,
  .search-results .person-card.collage .person-image-holder,
  .person-details .person-card.collage .person-image,
  .person-details .person-card.collage .person-image-holder {
    max-width: calc(100vw - 60px);
    max-height: 12.6em;
    min-width: 6.3em;
  }

  .search-results .person-details .person-image,
  .person-details .person-details .person-image {
    max-width: calc(100vw - 60px);
  }

  .search-results .household-member-card,
  .person-details .household-member-card {
    flex-flow: row wrap;
  }
}

@media (min-width: 501px) {
  .search-results .person-card:not(.collage) .person-image,
  .search-results .person-card:not(.collage) .person-image-holder,
  .person-details .person-card:not(.collage) .person-image,
  .person-details .person-card:not(.collage) .person-image-holder {
    height: 11em;
  }

  .search-results .person-card.collage .person-image,
  .search-results .person-card.collage .person-image-holder,
  .person-details .person-card.collage .person-image,
  .person-details .person-card.collage .person-image-holder {
    height: 8.4em;
  }

  .search-results .search-results .household-member-card,
  .person-details .search-results .household-member-card {
    flex-flow: row nowrap;
  }

  .search-results.classic-person-container .household-member-card .person-image.individual,
  .person-details.classic-person-container .household-member-card .person-image.individual {
    height: 8.4em;
  }
}

.search-results .person-card,
.person-details .person-card {
  position: relative;
  font-size: 1.7em;
  margin: 15px;
}

.search-results .person-card .person-collage-holder,
.person-details .person-card .person-collage-holder {
  overflow: hidden;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  background-color: #555;
  font-size: 1em;
}

.search-results .person-card .person-collage-holder .person-collage-image,
.person-details .person-card .person-collage-holder .person-collage-image {
  flex: 0 1 auto;
}

.search-results .person-card .person-collage-holder .person-image-holder,
.person-details .person-card .person-collage-holder .person-image-holder {
  text-align: center;
  border-radius: 0;
}

.search-results.classic-person-container .household-name,
.person-details.classic-person-container .household-name {
  font-size: 2em;
  border-bottom: 1px solid #aaa;
  padding-bottom: 0;
  margin-bottom: 10px;
}

.search-results .person-card .person-image-holder,
.person-details .person-card .person-image-holder {
  background-color: #555;
  overflow: hidden;
  border-radius: 2px;
}

.search-results .person-image-holder .glyphicon,
.person-details .person-image-holder .glyphicon {
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  font-size: 100px;
  opacity: 0.5;
}

.search-results .person-card a > .person-image-holder .glyphicon,
.person-details .person-card a > .person-image-holder .glyphicon {
  transform: translate(-50%, -80%);
  color: #333;
}

.search-results .person-card .person-name-holder,
.person-details .person-card .person-name-holder {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 5;
}

.search-results .person-card .person-name,
.person-details .person-card .person-name {
  background-color: rgba(255, 255, 255, 0.75);
  padding: 10px;
  text-align: center;
}

.search-results .person-card.no-portrait,
.person-details .person-card.no-portrait {
  height: initial;
  min-height: 1em;
  min-width: 250px;
}

.search-results .person-card.no-portrait .name-holder,
.person-details .person-card.no-portrait .name-holder {
  height: 100%;
}

.person-details {
  min-width: 300px;
  padding-bottom: 50px;
}

.person-details .person-image {
  margin: auto;
  max-width: 100%;
  border-radius: 2px;
  max-height: 40vh;
}

.person-details h2 {
  margin-top: 0;
}

.person-details .person-image-holder {
  background: transparent;
  text-align: center;
  border-radius: 2px;
  overflow: hidden;
  max-width: 100%;
  max-height: 55vh;
}

.person-details dt,
.person-details dd {
  display: inline-block;
  vertical-align: top;
}

.person-details .person-address-holder {
  font-size: 1.2em;
  margin-top: 1em;
}

.person-details li.classic-street-address-entry {
  display: inline-block;
  padding-right: 20px;
}

.person-details .household-members {
  display: flex;
  background: #ddd;
  flex-flow: column wrap;
}

.person-details .household-members > div {
  flex: 1 1 auto;
  display: flex;
  flex-flow: row wrap;
}

.person-details .edit-profile-link {
  position: relative;
}

.person-details .household-member-card {
  background: #ddd;
  margin: 10px;
  padding: 1em;
  border-radius: 0;
  box-shadow: 1px 1px 1px grey;
  flex: 1 1 auto;
}

.person-details .household-member-card > div {
  flex: 1 1 auto;
}

.person-details .household-member-details > div {
  white-space: nowrap;
  margin-left: 1em;
}

.person-details .household-member-details > div span {
  white-space: nowrap;
  margin-left: 0.5em;
}

.person-details .household-member-details > div span:not(.glyphicon):not(.fa):empty {
  margin-left: initial;
}

.person-details .household-member-name {
  font-size: 1.5em;
}

.eileen-person-container {
  padding: 0.5em;
}

.eileen-person-container .eileen-person-details {
  background: #eee;
  padding: 1em;
  height: 100%;
  border: 1px solid #ddd;
}

.eileen-person-container .eileen-person-details .household-member-card {
  margin-top: 0.5em;
  clear: both;
}

.eileen-person-container .eileen-person-details .household-member-card .household-member-name {
  font-weight: bold;
  font-size: 1.1em;
}

.eileen-person-container .eileen-person-details .household-member-details {
  clear: both;
}

.eileen-person-container .eileen-person-details .person-image {
  max-width: 100%;
  max-height: 100%;
}

.alphabet-character {
  color: gray;
  background-color: whitesmoke;
}

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

/* Floated settings panel (Organization/LayoutStyle, Organization/Brand). Ported from 1.0
   adjace-directory.scss. Anchors the settings form to the right edge of the viewport so the
   sample directory beneath it fills the main area. */
.fancybox-caption {
  font-size: 2em;
  line-height: 1em;
}

.fancybox-container {
  z-index: 10002;
}

.floated-settings-div {
  position: fixed;
  top: 56px;
  right: 0;
  width: 300px;
  padding: 0;
  z-index: 1045;
}

/* Bootstrap 3 .well polyfill for the floated settings panel. Bootstrap 5 dropped .well so we
   re-implement the BS3 baseline (light gray fill, 1px border, rounded corners, soft inset shadow)
   plus the floated-panel adjustments from 1.0 (full-height scrollable column with the bottom
   padding the original had). */
.floated-settings-div .well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 0;
  background-color: rgba(255, 255, 255, 0.92);
  border: 1px solid #e3e3e3;
  border-radius: 0 0 0 5px;
  box-shadow: 5px 5px 5px grey, inset 0 1px 1px rgba(0, 0, 0, 0.05);
  height: calc(100vh - 56px);
  overflow-y: auto;
  padding-bottom: 50px;
}
.floated-settings-div .mikes-collapsable-div {
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 10px;
  cursor: pointer;
}
.floated-settings-div .mikes-collapsable-div:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.floated-settings-div .floated-settings-handle {
  position: absolute;
  top: 150px;
  left: -18px;
  width: 18px;
  height: 60px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.2);
  border: 1px solid #e3e3e3;
  border-right: none;
  border-radius: 5px 0 0 5px;
}
.floated-settings-div .floated-settings-handle:hover {
  color: #333;
  background-color: #fff;
}
.floated-settings-div .floated-settings-handle .fa-grip-vertical {
  font-size: 0.9rem;
}

/* Tighten the spacing between rows of editor checkboxes/switches inside the settings panel so it
   doesn't read as a list of cards. Mirrors 1.0's tight stacked layout. */
.floated-settings-div .form-check {
  margin-bottom: 0.15rem;
}

/* Upload editor template (Views/Shared/EditorTemplates/Upload.cshtml) chrome ported from
   1.0 adjace-directory.scss. Without these the .thumb <img> renders at its natural size and
   blows the brand editor's logo/background previews out of the 300px floated panel. IE6
   `filter: alpha(opacity=0)` from the 1.0 SCSS dropped (legacy IE support is gone). */
.fileUpload {
  position: relative;
  overflow: hidden;
  margin-bottom: 5px;
  margin-top: 5px;
}

.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
}

.imageBlock {
  position: relative;
}

.thumb {
  max-width: 100px;
  max-height: 100px;
}

.deleteDiv {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 30px;
  height: 30px;
}

.deleteIcon {
  width: 30px;
  height: 30px;
}

/* ProfileApproval/_ShowPortraitEdit + _ShowFamilyPortraitEdit before/after
   thumbnails. 1.0 parity: Whitehurst-1.0/Whitehurst/Content/adjace-directory.scss:737. */
img.edit-approval-image {
  max-height: 75px;
  max-width: 150px;
  margin: 5px;
}

/* Subscription plan cards (Organization/Subscription). Ported from 1.0
   adjace-directory.scss. Lays out the plan tiles as side-by-side bordered cards with a
   gray header band, white body, and a blue "currently subscribed" glow + ☑ corner badge. */
.subscription-cards {
  display: flex;
  flex-flow: row wrap;
}

.subscription-card {
  flex: 0 0 auto;
  height: 100;
  border-radius: 2px;
  border: 1px solid grey;
  margin: 10px;
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
  width: 250px;
  position: relative;
}

.subscription-card ul {
  padding-left: 1em;
}

.subscription-card.subscribed {
  box-shadow: 0 0 10px blue;
}

.subscription-card.subscribed::after {
  position: absolute;
  top: 0;
  right: 0.3em;
  content: "☑";
  font-size: 2em;
  color: #777;
}

.subscription-header {
  flex: 0 1 auto;
  background: #e3e9e9;
  /* BS3 (1.0) shipped symmetric h4 margins (10px top, 10px bottom), so a header
     with zero vertical padding still looked balanced. BS5's Reboot zeroes the
     top margin on every heading, which left the h4 glued to the top edge of the
     band. Move vertical rhythm onto the container and zero the heading margin
     so spacing is consistent regardless of future heading-margin changes. */
  padding: 0.5rem 20px;
}

.subscription-header h4 {
  margin: 0;
}

.subscription-details {
  flex: 1 0 auto;
  background: #fff;
  padding: 10px 20px;
}

.subscription-cost {
  font-size: 1.2em;
}

.subscribe-form {
  text-align: center;
}

/* ReSharper restore CssBrowserCompatibility */