/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

:root {
    --brand-yellow: 252, 178, 47;
    --brand-green: 104, 178, 67;
    --brand-pink: 200, 33, 110;
    --brand-blue: 33, 145, 208;
    --brand-red: 211, 32, 38;
    --bs-primary-rgb: var(--brand-blue);
    --bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
#page {
	overflow: unset;
}
.site-header {
	padding: 0;
}
  .logo {
    min-width: 245px;
  }
  
  .navbar {
    --bs-navbar-nav-link-padding-x: 0.5rem;
    --bs-navbar-toggler-padding-y: .75rem;
    --bs-navbar-toggler-padding-x: 0.75rem;
    --bs-navbar-toggler-font-size: 1.25rem;
    --bs-navbar-toggler-border-color: transparent;
    --bs-navbar-toggler-border-radius: 0;
    --bs-navbar-color: rgba(var(--brand-blue), 0.55);
    --bs-navbar-hover-color: rgba(var(--brand-blue), 0.7);
    --bs-navbar-disabled-color: rgba(var(--brand-blue), 0.3);
    --bs-navbar-active-color: rgba(var(--brand-blue), 0.9);
    background-color: white;
    background-image: linear-gradient(to right, rgba(var(--brand-pink), .03), rgba(var(--brand-yellow), .03), rgba(var(--brand-green), .03), rgba(var(--brand-blue), .03), rgba(var(--brand-red), .03));
  }
  
  .navbar:after {
    content: '';
    display: block;
    height: 4px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(to right, rgb(var(--brand-pink)), rgb(var(--brand-yellow)), rgb(var(--brand-green)), rgb(var(--brand-blue)), rgb(var(--brand-red)));
    z-index: 0;
  }
div#primary {
    padding-inline: 0;
}
  
  .hero .carousel-item {
    height: 100%;
    background-color: var(--carousel-color);
  }
  
  .hero img:not(.avatar) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: linear-gradient(to right, black 25%, transparent 100%);
    mask-image: linear-gradient(to right, black 25%, transparent 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
  }
  
  .hero-content {
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(47,47,47,0.3);
    color: var(--hero-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    position: relative;
    min-height: 60vh;
    width: 100%;
    height: 100%;
  }
  
  .hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: var(--hero-overlay-color);
    color: var(--hero-text-color);
    mix-blend-mode: overlay;
    z-index: 0;
  }
  
  .carousel-control-prev, .carousel-control-next {
    width: 5em;
  }
  
  .hero .container {
  }
  
  .yellow {
    --hero-overlay-color: rgba(var(--brand-yellow), .6);
    --carousel-color: rgb(var(--brand-yellow));
    --community-color: rgb(var(--brand-yellow));
    --hero-text-color: white;
  }
  
  .blue {
    --hero-overlay-color: rgba(var(--brand-blue), .6);
    --carousel-color: rgb(var(--brand-blue));
    --community-color: rgb(var(--brand-blue));
    --hero-text-color: white;
  }
  
  .pink {
    --hero-overlay-color: rgba(var(--brand-pink), .6);
    --carousel-color: rgb(var(--brand-pink));
    --community-color: rgb(var(--brand-pink));
    --hero-text-color: white;
  }
  
  .red {
    --hero-overlay-color: rgba(var(--brand-red), .6);
    --carousel-color: rgb(var(--brand-red));
    --community-color: rgb(var(--brand-red));
    --hero-text-color: white;
  }
  
  .green {
    --hero-overlay-color: rgba(var(--brand-green), .6);
    --carousel-color: rgb(var(--brand-green));
    --community-color: rgb(var(--brand-green));
    --hero-text-color: white;
  }
  
  .red {
    --hero-overlay-color: rgba(var(--brand-red), .6);
    --carousel-color: rgb(var(--brand-red));
    --hero-text-color: white;
  }
  
  .green {
    --hero-overlay-color: rgba(var(--brand-green), .6);
    --carousel-color: rgb(var(--brand-green));
    --hero-text-color: white;
  }
  
  .nav-link {
    font-weight: bold;
    text-transform: uppercase;
  }
  
  .hero-carousel {
  }
  
  .hero .carousel-inner {
    height: 100%;
  }
  
  .hero-container {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  body {
    background-image: linear-gradient(45deg rgba(var(--brand-pink), .03), rgba(var(--brand-yellow), .03), rgba(var(--brand-green), .03), rgba(var(--brand-blue), .03), rgba(var(--brand-red), .03));
  }
  
  section, footer {
    padding: 3rem 1rem;
  }
  
  .card-community-image {
    height: 270px;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(45deg, black 25%, transparent 100%);
    mask-image: linear-gradient(45deg, black 24%, transparent 100%);
    opacity: .5;
  }
  
  .card {
    background-color: var(--community-color);
  }
  
  .community-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.51);
    padding: 1.5rem;
  }
  
  .community-overlay-content {
    color: white;
    text-align: center;
  }
  
  .btn {
    text-transform: uppercase;
    font-weight: bold;
  }
  
  .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgb(var(--brand-blue));
    --bs-btn-border-color: rgb(var(--brand-blue));
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgb(var(--brand-blue));
    --bs-btn-hover-border-color: rgb(var(--brand-blue));
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(var(--brand-blue));
    --bs-btn-active-border-color: rgb(var(--brand-blue));
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgb(var(--brand-blue));
    --bs-btn-disabled-border-color: rgb(var(--brand-blue));
  }
  
  .community-card {
    margin-bottom: 2rem;
    transition: transform 250ms ease-in-out;
  }
  
  footer {
    background-color: rgba(var(--brand-green), .1);
    color: white;
  }
  
  .footer-logo {
    max-width: 150px;
    display: block;
    margin: 0 auto;
    margin-bottom: 2rem;
  }
  
  footer .nav-link {
    color: rgb(var(--brand-blue));
  }
  
  .community-card:hover {
    transform: translateY(-10px);
  }
  
  .navbar-toggler-icon {
    background-image: none;
  }
  
  .hero.community-hero {
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--community-color);
    position: relative;
  }
  
  .hero.community-hero img {
    height: 100%;
  }
  
  .gradient {
    background-image: linear-gradient(to right, rgb(var(--brand-pink)), rgb(var(--brand-yellow)), rgb(var(--brand-green)), rgb(var(--brand-blue)), rgb(var(--brand-red)));
    color: white;
  }
  
  .move-up {
    margin-top: -5rem;
    position: relative;
    z-index: 1;
  }
  
  .edit-buttons {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 69309580;
    width: 40px;
    height: 40px;
    opacity: 0;
    transition: opacity 250ms ease;
  }
  
  .hero:hover .edit-buttons {
    opacity: 1;
  }
  
  #item-header a.link-change-cover-image, #item-header a.link-change-profile-image, #item-header a.position-change-cover-image {
    /* opacity: 1; */
  }
  
  .groups-header .moderators-lists #group-admins {
    padding-left: 0;
    margin-top: 0.3rem;
  }
  
  .buddypress .buddypress-wrap .activity-state a, .buddypress .buddypress-wrap .comment-reply-link, .buddypress .buddypress-wrap .generic-button a, .buddypress .buddypress-wrap a.bp-title-button, .buddypress .buddypress-wrap a.button, .buddypress .buddypress-wrap button, .buddypress .buddypress-wrap input[type=button], .buddypress .buddypress-wrap input[type=reset], .buddypress .buddypress-wrap input[type=submit], .buddypress .buddypress-wrap ul.button-nav:not(.button-tabs) li a {
        --bs-btn-padding-x: 0.75rem;
          --bs-btn-padding-y: 0.375rem;
          --bs-btn-font-family: ;
          --bs-btn-font-size: 1rem;
          --bs-btn-font-weight: bold;
          --bs-btn-line-height: 1.5;
          --bs-btn-border-width: 1px;
          --bs-btn-border-radius: 0.375rem;
          --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
          --bs-btn-disabled-opacity: 0.65;
          --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
          --bs-btn-color: #fff;
          --bs-btn-bg: rgb(var(--brand-blue));
          --bs-btn-border-color: rgb(var(--brand-blue));
          --bs-btn-hover-color: #fff;
          --bs-btn-hover-bg: rgb(var(--brand-blue));
          --bs-btn-hover-border-color: rgb(var(--brand-blue));
          --bs-btn-focus-shadow-rgb: 49, 132, 253;
          --bs-btn-active-color: #fff;
          --bs-btn-active-bg: rgb(var(--brand-blue));
          --bs-btn-active-border-color: rgb(var(--brand-blue));
          --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
          --bs-btn-disabled-color: #fff;
          --bs-btn-disabled-bg: rgb(var(--brand-blue));
          --bs-btn-disabled-border-color: rgb(var(--brand-blue));
          display: inline-block;
          padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
          font-family: var(--bs-btn-font-family);
          font-size: var(--bs-btn-font-size);
          font-weight: var(--bs-btn-font-weight);
          line-height: var(--bs-btn-line-height);
          color: var(--bs-btn-color);
          text-align: center;
          text-transform: uppercase;
          text-decoration: none;
          vertical-align: middle;
          cursor: pointer;
          user-select: none;
          border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
          border-radius: var(--bs-btn-border-radius);
          background-color: var(--bs-btn-bg);
          transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  
  .buddypress .buddypress-wrap .button-nav li a:focus, .buddypress .buddypress-wrap .button-nav li a:hover, .buddypress .buddypress-wrap .button-nav li.current a, .buddypress .buddypress-wrap .comment-reply-link:focus, .buddypress .buddypress-wrap .comment-reply-link:hover, .buddypress .buddypress-wrap .generic-button a:focus, .buddypress .buddypress-wrap .generic-button a:hover, .buddypress .buddypress-wrap a.button:focus, .buddypress .buddypress-wrap a.button:hover, .buddypress .buddypress-wrap button:focus, .buddypress .buddypress-wrap button:hover, .buddypress .buddypress-wrap input[type=button]:focus, .buddypress .buddypress-wrap input[type=button]:hover, .buddypress .buddypress-wrap input[type=reset]:focus, .buddypress .buddypress-wrap input[type=reset]:hover, .buddypress .buddypress-wrap input[type=submit]:focus, .buddypress .buddypress-wrap input[type=submit]:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    outline: 0;
    text-decoration: none;
  }
  
  .sticky-header .site-content .container  {
  padding-block-start: 50px;
  }
  
  .group-actions-absolute {
    display: flex;
  }
  
  #object-nav li a {
    display: flex;
  }
  
  .bp-navs ul li .count {
    font-size: 12px;
    margin-left: 6px;
    padding: 3px 8px;
  }
  
  .dir-search.members-search.bp-search {
    margin: 3.5rem 0;
  }
  
  form#dir-members-search-form {
    width: 100%;
  }
  
  .buddypress-wrap:not(.bp-single-plain-nav) {
    max-width: 1140px;
    margin: 5rem auto;
    
  }
  
  #create-group-form {
    max-width: 1140px;
      margin: 5rem auto;
      margin-top: 0;
  }
  
  .bp-subhead {
    max-width: 1140px;
      margin: 5rem auto;
      margin-bottom: 2rem;
  }
  
  .member-status {
    background-color: #edbb34;
    border: 2px solid #fff;
    border-radius: 100%;
    z-index: 56;
    position: absolute;
    left: 20px;
    top: 6px;
    width: 15px;
    height: 15px;
    display: block;
  }

.dropdown:not(.v-select) {
  background: unset;
  box-shadow: unset;
  width: unset;
  overflow: unset;
}
.dropdown:not(.v-select):not(.nav-item) {
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  width: 17.5rem;
  overflow: hidden;
}