/*
 Put your custom overlay styles in here
 You can use your northpass color palette in this file

#ffffff
#000000
#3f8f24
#000000
#3f8f24
#ffffff
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');


body {
  font-family: "Roboto", sans-serif;
  background-color:#F8F7F7;
  color:#000;
}

.np-powered-by.show {
  background-color:#fff;
}

h1, h2,
.np-homepage-headline,
.np-resource-title,
.np-dashboard-resources-title,
.np-top-title {
  font-family: "Playfair", serif;
}

.np-homepage-headline,
.np-resource-title,
.np-dashboard-resources-title,
.np-top-title,
.np-homepage-featured .np-homepage-headline {
  font-weight:700;
  color:#000;
}

.np-dashboard,
.np-learning-paths {
  background-color:#F8F7F7;
}

.np-resource-subtitle {
  font-size: min(.7em + 1.5vw, 1.125em);
  color: #000;
}

.np-button {
  padding: .925em 1.5em;
  background-color: #000;
  border-radius: 3rem;
  border: .125rem solid transparent;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 400;
}

.np-card-content-progress,
.np-top-cta-progress-text {
  font-size: .8125rem;
  line-height: 1.5em;
  font-weight: 600;
  color: #2c7c11;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.np-card-content-title,
.np-text-title {
  color:#000;
}

.np-dashboard-resources-title {
  color:#000;
  font-size:22px;
}

.np-sub-navigation-content-item-link,
.np-course-outline-content-activity-link {
  color:#000;
}

.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link {
  color:#000;
  font-weight:500;
}

.np-footer-logo-image {
  filter: unset;
  opacity: 1;
}

.np-card-container {
  box-shadow: 0 7px 16px rgb(0 0 0 / 9%);
}

.np-card-container,
.np-card-image {
  border-radius:0!important;
}

.np-top-cta {
  background-color: #FAF7F7;
}

.np-card-progress-bar {
  background-color:#3F8F24;
}

.np-progress-bar-container {
  background: #DAD9D7;
}

.np-homepage-hero {
  background-color:#d8f5c4;
}

/* Product Cards  */
.product-card .np-card-container {
text-decoration:none;
}

.product-card .np-card-content-title {
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  font-family: "Roboto Condensed", sans-serif;
  margin:0;
}

.product-card .np-card-content-subtitle {
  color:#000;
}
.previous-events-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
}
.filters-subtitle {
  font-size: min(.7em + 1.5vw, 1.125em);
  color: #4a4a4a;
  margin-top: 40px;
}
.webinars-filters-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
  gap: 20px;
}
.filter-option {
  border: 1px solid #000;
  padding: 15px 20px;
  border-radius: 25px;
  color: #000;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}
.active-cat {
  background: #000;
  color: #fff;
}
.np-card {
  height: 100%;
} 

.np-header-logo-image, .np-box-header-logo {
  height: 72px;
}

.np-homepage-hero .np-homepage-headline {
  font-size: 2.25rem;
}

.np-footer-logo-image{
  height: 60px;
}

@media screen and (min-width: 768px) {
  .np-homepage-hero .np-homepage-headline {
      font-size: 4.5rem;
  }

  .np-header-logo-image, .np-box-header-logo {
    height: 100px;
}

}

.np-homepage-hero{
  background-color: #3f9107;
}

.np-homepage-headline{
  color: white;
}

.np-homepage-subheadline{
  color: white;
}

.np-button{
  text-transform: uppercase;
  margin-top: 10px !important;
}

.np-alert-error {
  background: #bae7ff;
  color: #000;
}

.no-content-message {
  background-color: #409108;
  color: white;
  height: 200px;
  display: flex
;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

.np-card-content-subtitle, .np-card-content-label, .np-card-training-session-date-year, .np-card-training-session-date-month, .np-card-training-session-date-day, .np-card-header-type, .np-learning-path-items-count, .np-zero-state-text  {
  color: #000;
}

.np-dashboard-resources-container{
  border-color: #000;
}