@media screen and (max-width: 769px){
.header-logoImage img {
    max-height: 30vw;
}
}

/* TeamCarePDX - Reset and Force Uploaded File Manager Cover */
.profileCoverArea, 
.profileCoverArea .cover-photo, 
.profileCoverArea .profileCoverArea-background {
    background-color: #F2EDFA !important;
    background-image: url(https://storage.ning.com/topology/rest/1.0/file/get/31280316698?profile=original) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Strip away the default gray/dark gradient mask overlay */
.profileCoverArea::before, 
.profileCoverArea::after, 
.profileCoverArea .cover-photo::before, 
.profileCoverArea .cover-photo::after {
    display: none !important;
    background: none !important;
}

/* ==========================================================================
   TEAMCAREPDX MASTER BRAND & LAYOUT CODE (FINAL CLEAN REVISION)
   ========================================================================== */

/* 1. Global Website Canvas Color */
html, body, .id_page_background, #id_page_wrapper, .ning-body, .site-body {
    background-color: #FAF9FD !important; /* Soft Off-White Website Background */
}

/* 2. Fix Profile Banner Frame and Clear Internal White Text Boxes */
.profileCoverArea *,
.profileHeader-content *,
[class*="profileCoverArea"] * {
    border: none !important;
    box-shadow: none !important;
}

/* Re-apply a clean, subtle outline pill boundary around the location tags only */
.profileCoverArea .profileHeader-location,
.profileCoverArea [class*="location"] {
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    display: inline-block !important;
}

/* Target ONLY the absolute outer banner border frame */
.profileCoverArea,
.profileHeader-content {
    border: 2px solid #F2EDFA !important; /* Soft Pale Lavender Trim */
    border-radius: 12px !important; /* Modern rounded banner layout edges */
    box-shadow: 0 4px 12px rgba(109, 61, 143, 0.03) !important;
    overflow: hidden !important; /* Pinches the photo corners neatly into the rounded edge shape */
}



/* 4. Transform Section Titles to TeamCare Purple */
.xg_module_head h2,
.xg_module_body h2,
.ning-module-title,
.module-title,
.matrix-component-header h2,
.id_layout_container_wrap h2,
#id_layout_container h2,
.panel-heading,
.members-title,
.newsFeed-title,
.blog-title {
    color: #6D3D8F !important; /* TeamCare Purple */
    font-weight: bold !important;
    font-size: 18px !important;
}

/* 5. Premium Homepage Layout Box Panels */
.matrix-component, 
[class*="component-wrapper"],
.panel-default,
.sheet {
    border: 2px solid #F2EDFA !important; /* Soft Pale Lavender Framing Lines */
    border-radius: 12px !important; 
    background-color: #FFFFFF !important; /* Crisp White Content Canvas */
    box-shadow: 0 4px 10px rgba(109, 61, 143, 0.03) !important;
    padding: 20px !important;
}

.matrix-component-header, 
[class*="component-title-bar"] {
    border-bottom: 2px solid #FAF9FD !important;
    padding-bottom: 12px !important;
    margin-bottom: 18px !important;
}

/* TeamCarePDX - Deep Force Profile Outer Border Reset */
div.profileCoverArea, 
.id_layout_container_wrap .profileCoverArea, 
#id_layout_container .profileCoverArea,
.profileHeader-content {
    outline: none !important;
    border: 2px solid #F2EDFA !important; /* Forces Soft Pale Lavender Trim */
    background-color: transparent !important; /* Kills any hidden dark block colors underneath */
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(109, 61, 143, 0.03) !important;
}

/* Forces Ning's theme layer to respect the rounded corners shape */
.profileCoverArea-background, 
.profileCoverArea .cover-photo {
    border-radius: 10px !important;
}




/* Hide group name overlay on group thumbnails */
.groupListLinkBlock .groupHub-groupTitleContainer {
    display: none !important;
}




/* Center group header title on mobile only */
@media only screen and (max-width: 767px) {

  .groupHeader-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .groupHeader-groupName {
    display: block !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

}


/* Center member profile names on mobile only */
@media only screen and (max-width: 767px) {

  .profileCoverArea-bio {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .profileCoverArea-bio h2 {
    display: block !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

}


/* Reduce spacing in member profiles on mobile */
@media only screen and (max-width: 767px) {

  .profileCoverArea-bio {
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  .profileCoverArea-bio > * {
    margin-bottom: 0 !important;
  }

}


/* TeamCarePDX - Hide emoji toolbar on mobile */
@media screen and (max-width: 767px) {
  form.js-statusForm .tc-emoji-picker {
    display: none !important;
  }
}


/* TeamCarePDX - Blue Add Content button */

.section-activity .activityDropdownPlus {
  background: #028CD6 !important;
  color: #ffffff !important;
  width: auto !important;
  min-width: 120px !important;
  padding: 8px 14px !important;
  border: none !important;
  border-radius: 5px !important;
  font-size: 0 !important;
  line-height: 20px !important;
  cursor: pointer !important;
}


/* TeamCarePDX - Fix Add Content button */

.section-activity .activityDropdownPlus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  background: #028CD6 !important;
  color: #ffffff !important;
  width: auto !important;
  min-width: 120px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border: none !important;
  border-radius: 5px !important;
  font-size: 0 !important;
  line-height: normal !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}

/* Hide original plus icon */
.section-activity .activityDropdownPlus::before {
  content: none !important;
  display: none !important;
}

/* Display button text */
.section-activity .activityDropdownPlus::after {
  content: "Add Content" !important;
  display: block !important;
  position: static !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Hover color */
.section-activity .activityDropdownPlus:hover {
  background: #0076B5 !important;
}


/* TeamCarePDX - Blue Add Blog Post button */

.content-actions a.button.button-iconic[title="Add Blog Post"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #028CD6 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 5px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  font-size: 0 !important;
  text-decoration: none !important;
}

/* Replace the plus with readable text */
.content-actions a.button.button-iconic[title="Add Blog Post"]::before {
  content: "Add Blog Post" !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 20px !important;
}

/* Hide Ning's original icon */
.content-actions a.button.button-iconic[title="Add Blog Post"]::after {
  content: none !important;
  display: none !important;
}

/* Hover effect */
.content-actions a.button.button-iconic[title="Add Blog Post"]:hover {
  background: #0076B5 !important;
}


/* TeamCarePDX - Blue Add Photo button */

a.transparentFileInputButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  box-sizing: border-box !important;
  background: #028CD6 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 5px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* Hide the original plus symbol */
a.transparentFileInputButton > .icon-add {
  display: none !important;
}

/* Display Add Photo label */
a.transparentFileInputButton::after {
  content: "Add Photo" !important;
  display: inline-block !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  color: #ffffff !important;
  pointer-events: none !important;
}

/* Preserve the clickable photo upload area */
a.transparentFileInputButton input[type="file"] {
  cursor: pointer !important;
}

/* Hover effect */
a.transparentFileInputButton:hover {
  background: #0076B5 !important;
}


/* TeamCarePDX - Blue Add Discussion button */

.content-actions a.button.button-iconic[title="Add Discussion"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #028CD6 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 5px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  font-size: 0 !important;
  text-decoration: none !important;
}

/* Replace original icon with label */
.content-actions a.button.button-iconic[title="Add Discussion"]::before {
  content: "Add Discussion" !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 20px !important;
}

/* Hide extra icon decoration */
.content-actions a.button.button-iconic[title="Add Discussion"]::after {
  content: none !important;
  display: none !important;
}

/* Hover effect */
.content-actions a.button.button-iconic[title="Add Discussion"]:hover {
  background: #0076B5 !important;
}

/* TeamCarePDX - Blue Add Event button */

.content-actions a.button.button-iconic[title="Add Event"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #028CD6 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 5px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  font-size: 0 !important;
  text-decoration: none !important;
}

/* Replace original plus with label */
.content-actions a.button.button-iconic[title="Add Event"]::before {
  content: "Add Event" !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 20px !important;
}

/* Hide extra icon decoration */
.content-actions a.button.button-iconic[title="Add Event"]::after {
  content: none !important;
  display: none !important;
}

/* Hover effect */
.content-actions a.button.button-iconic[title="Add Event"]:hover {
  background: #0076B5 !important;
}

/* TeamCarePDX - Blue Create Group button */

.content-actions a.button.button-iconic[title="Create Group"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #028CD6 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 5px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  font-size: 0 !important;
  text-decoration: none !important;
}

/* Replace original plus with label */
.content-actions a.button.button-iconic[title="Create Group"]::before {
  content: "Create Group" !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 20px !important;
}

/* Hide extra icon decoration */
.content-actions a.button.button-iconic[title="Create Group"]::after {
  content: none !important;
  display: none !important;
}

/* Hover effect */
.content-actions a.button.button-iconic[title="Create Group"]:hover {
  background: #0076B5 !important;
}