/* 
    *
    * Here, all SCSS variables and classes can be adapted to your custom design. 
    *
*/
 
@font-face {
  font-family: Overpass;
  src: url('~@/assets/fonts/Overpass-VariableFont_wght.ttf');
}

$color-primary: rgb(110, 139, 135);
$color-primary-light: rgb(161, 179, 177);
$color-primary-dark: rgb(81, 99, 97);
$color-primary-active: rgb(123, 160, 149);
$color-primary-inverse: rgb(241, 248, 243);

$color-secondary: rgb(166, 255, 0);
$color-secondary-active: rgb(188, 255, 130);
$color-secondary-inverse: rgb(241, 255, 225);

$font-family-heading: 'Overpass',Helvetica,Arial,Lucida,sans-serif;
$font-family-text: 'Overpass',Helvetica,Arial,Lucida,sans-serif;

$color-header-background: $color-primary;
$color-footer-background: $color-secondary;

$color-locale-menu: $color-secondary;

$color-donation-bar: $color-secondary;

$color-toast-blue: rgb(0, 142, 230);
$color-toast-green: $color-primary;


.main-navigation a {
  color: #fff;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 500;
}
.main-navigation a:hover {
  color: hsla(0,0%,100%,.8);
}
.main-navigation .router-link-exact-active { 
  color:  #A6FF00!important;
}

.main-navigation .locale-menu {
  color: #fff;
}

.main-navigation .base-button {
  color: #fff;
}

#nav-search-box .hc-hashtag a{
  color: #17b53f;
}

#footer {
  background-color: $color-secondary;
}

#footer a {
  color: $color-primary;
}

.avatar-menu .profile-avatar {
  color: $color-primary;
}

.profile-avatar .initials {
  color: $color-primary;
}

.branding-menu .ds-text {
  font-family: 'Overpass',Helvetica,Arial,Lucida,sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 16px;
}

/* avoid uppercase for user slug */
span.slug {
  text-transform: none;
}
    
.ds-footer {
  font-family: 'Overpass',Helvetica,Arial,Lucida,sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 300;
}

/* chips on group teaser */
a.group-teaser footer .ds-chip-primary {
  background-color: #6e8b87;
}

/* number count color */
div.ds-number > p.ds-number-count {
  color: #6e8b87;
}

/* active tab border bottom color */
div.tab-navigation li.Tabs__tab {
  border-bottom-color: #6e8b87;
}

/* submit button color group form */
form.group-form button.ds-button-primary {
  background-color: #6e8b87;
}

/* color of active filter tags in post teaser */
span.category-tag.filterActive {
  background-color: #6e8b87;
}