/*general styles */ 

h1, h2, h3, h4, h5, h6 {
  color: #293D52 !important;
  }
 
body {
  color: #3f3f3f;
  font-family: "museo-sans-rounded", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased !important;
}

/*nav */
.navbar-inner {
  padding: 10px 0;
}
.navbar-inner .container-fluid {
  max-width: 1500px;
}

.navbar .nav > li > a {
 font-size: 13px !important;
}

.brand {
  padding: 0 !important;
}

.brand img {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  height: 60px;
  margin-left: 15px;
  width: auto;
}

.navbar .nav li a:hover{
  text-decoration: underline;
}

#mainNav .nav .active {
  font-weight: bold;
  text-decoration: underline;
}

/* Making the nav respond on smaller screens  */
@media screen and (max-width: 1400px) {

  #mainNav .container-fluid {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
  }
  .navbar .navbar-inner {
      background: none; 
  }
    
  .navbar .brand {
      margin: 0 auto 8px !important;
      padding: 0 !important; 
  }
    
  .navbar .nav {
      bottom: auto !important;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      float: none;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      left: auto !important;
      margin: auto !important;
      position: relative !important;
      right: auto !important; 
  }
  .navbar .nav > li {
      float: none; 
  }
  .navbar .nav > li > a {
      font-size: 1.2em;
      line-height: 22px; 
  }
}

/* Button in the top of the navigation*/
.green-button {
  cursor: pointer;
  background-color: rgb(106, 122, 52) !important;
  margin-right: 10px;
  margin-left: 10px;
  color: white !important;
  padding: .5em 1.5em !important;
}

.green-button:hover {
  background-color: #62722c !important;
  text-decoration: none !important;
}

@media screen and (max-width: 768px) { 
  #mainNav .green-button {
      background-color: transparent !important;
      color: #293d52 !important;
      padding: 9px 15px !important;
  }
}

/* nav bar  and side nav styles */
#fullArticle .admin-edit .btn {
  background-color: #273C52;
  color: white;
}

.nav .nav-list a:hover {
  color: #293d52;
}

#sidebar h3 {
  color: #293d52 !important;
}

#sidebar .nav-list .active a {
  color: #293d52 !important;
}

/* Article Count */
.article-count {
  color: #293d52;
  text-decoration: underline;
  font-weight: bold;
}

/*Category Icons */
.category-list h3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*Default icon if a new category is added */
.category h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f15c';
  color: white;
  background-color: #6a7a34;
  padding: 10px 15px;
  border-radius: 30px;
  margin-bottom: 10px;
}

/*FAQs*/

/* Membership Pricing*/
.category#category-467 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f53d';
  color: white;
  background-color: #6a7a34;
  padding: 10px;
  border-radius: 30px;
  margin-bottom: 10px;
}

/* Compliance*/
.category#category-17 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f46c';
  color: white;
  background-color: #6a7a34;
  padding: 10px 15px;
  border-radius: 30px;
  margin-bottom: 10px;
}

/* General Questions*/
.category#category-21 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f059';
  color: white;
  background-color: #6a7a34;
  padding: 10px 12px;
  border-radius: 30px;
  margin-bottom: 10px;
}


/*How To's For fpPathfinder Tools*/

/*Financial Planning Guides*/
.category#category-468 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f66f';
  color: white;
  background-color: #6a7a34;
  padding: 10px 12px;
  border-radius: 30px;
  margin-bottom: 10px;
}

/*Guide Recommendation Tool*/
.category#category-469 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f56d';
  color: white;
  background-color: #6a7a34;
  padding: 10px 15px;
  border-radius: 30px;
  margin-bottom: 10px;
}

/*Client Engagement Builder*/
.category#category-470 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f073';
  color: white;
  background-color: #6a7a34;
  padding: 10px 13px;
  border-radius: 30px;
  margin-bottom: 10px;
}

/*Client Deliverable Reports*/
.category#category-471 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f15c';
  color: white;
  background-color: #6a7a34;
  padding: 10px 15px;
  border-radius: 30px;
  margin-bottom: 10px;
}

/*Interactive Checklists*/
.category#category-472 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f0ae';
  color: white;
  background-color: #6a7a34;
  padding: 10px 12px;
  border-radius: 30px;
  margin-bottom: 10px;
}

/*CRM Integrations*/

/*Wealthbox*/
#category-482 h3::before {
  content: url('https://www.fppathfinder.com/wp-content/uploads/2024/09/Wealth.png');
  margin-bottom: 10px;
  background-color: transparent !important;
  padding: 0 !important;
}

/*Redtail*/
#category-481 h3::before {
  content: url('https://www.fppathfinder.com/wp-content/uploads/2024/09/REDTAIL-ICON.png');
  margin-bottom: 10px;
  background-color: transparent !important;
  padding: 0 !important;
}

/*Sales Force*/
#category-483 h3::before {
  content: url('https://www.fppathfinder.com/wp-content/uploads/2024/09/Salesforce.png');
  margin-bottom: 10px;
  background-color: transparent !important;
  padding: 0 !important;
}

/*XLR8*/
#category-484 h3::before {
  content: url('https://www.fppathfinder.com/wp-content/uploads/2024/09/XLR8.png');
  margin-bottom: 10px;
  background-color: transparent !important;
  padding: 0 !important;
}

/*Industry Collaborations*/
/*Holistiplan*/
#category-473 h3::before {
  content: url('https://www.fppathfinder.com/wp-content/uploads/2024/09/Hollisplan.png');
  margin-bottom: 10px;
  background-color: transparent !important;
  padding: 0 !important;
}

/*Asset-Map*/
#category-474 h3::before {
  content: url('https://www.fppathfinder.com/wp-content/uploads/2024/09/Asset.png');
  margin-bottom: 10px;
  background-color: transparent !important;
  padding: 0 !important;
}

/*Snappy Kraken*/
#category-475 h3::before {
  content: url('https://www.fppathfinder.com/wp-content/uploads/2024/09/Snappy.png');
  margin-bottom: 10px;
  background-color: transparent !important;
  padding: 0 !important;
}

/*Other Industry Collaborations*/
.category#category-476 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f141';
  color: white;
  background-color: #6a7a34;
  padding: 10px 12px;
  border-radius: 30px;
  margin-bottom: 10px;
}

/*Podcast Interviews*/
.category#category-477 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f3c9';
  color: white;
  background-color: #6a7a34;
  padding: 10px 15px;
  border-radius: 30px;
  margin-bottom: 10px;
}

/*Account Settings & Support*/

/*Password Help*/
.category#category-485 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f023';
  color: white;
  background-color: #6a7a34;
  padding: 10px 12px;
  border-radius: 30px;
  margin-bottom: 10px;
}

/*Update Email Address*/
.category#category-486 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f0e0';
  color: white;
  background-color: #6a7a34;
  padding: 10px 12px;
  border-radius: 30px;
  margin-bottom: 10px;
}

/*Membership Change*/
.category#category-490 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f044';
  color: white;
  background-color: #6a7a34;
  padding: 10px 10px 10px 14px;
  border-radius: 30px;
  margin-bottom: 10px;
}

/*White Label Settings (Branding)*/
.category#category-487 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f013';
  color: white;
  background-color: #6a7a34;
  padding: 10px 12px;
  border-radius: 30px;
  margin-bottom: 10px;
}

/*Group Membership Settings*/
.category#category-489 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f509';
  color: white;
  background-color: #6a7a34;
  padding: 10px 10px;
  border-radius: 30px;
  margin-bottom: 10px;
}

/*Interactive Checklists*/
.category#category-488 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f46d';
  color: white;
  background-color: #6a7a34;
  padding: 10px 15px;
  border-radius: 30px;
  margin-bottom: 10px;
}

/*Other*/
.category#category-491 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  content: '\f141';
  color: white;
  background-color: #6a7a34;
  padding: 10px 12px;
  border-radius: 30px;
  margin-bottom: 10px;
}

/*Content Area and Categories */

/*this style sets the width to unset, making it so the content is going the full width of the page - this helps with the color offsets and makes them go the full width */
#contentArea {
  max-width: unset;
  padding: 0; 
}

section.collection-category {
  padding: 4rem 0;
  text-align: center; 
}

section.collection-category:nth-of-type(odd) {
  background-color: #f5f8fb; 
}

section.collection-category .category-list {
  margin-bottom: 0; 
}

.category-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 24px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 75rem;
  width: 94%; 
}

.category-list a.category {
  background-color: white;
  border-radius: 8px;
  -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15);
  margin: 0;
  margin-bottom: 0;
  max-width: 350px; 
}
    

/* this sets the collection page and footer to be the correct width and size */
#contentArea.container-fluid .row-fluid,
footer {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  width: 94%; 
}


/*arctile and search results styles */

#fullArticle h1 {
  font-weight: 600;
  font-size: 32px;
}

#fullArticle h1:after {
  display: none;
}

/* catergory heading styles on the homepage */
.collection-category h2 {
  font-weight: 600;
  position: relative;
  margin-bottom: 25px;
}

@media (max-width: 769px) {
  .collection-category h2::after {
        display: none;
  }
}

/* caterogy boxes on the homepage styles */ 
.category-list .category {
border: none !important;
 box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
border-radius: 0.375rem;
}

/* header styles */

/* catergoryHead are the section headers for a category on the category pages when viewing one of them, .contentWrapper is for any other headers that appear on the site */
#categoryHead h1, .contentWrapper h1 {
  font-weight: 500;
  position: relative;
  margin-bottom: 25px;
}
/* these after elements add a green underline element */
#categoryHead h1::after {
  display: block;
    content: '';
  width: 60px;
  height: 4px;
  background: #6a7b34;
  position: absolute;
  bottom: -10px;
}

.contentWrapper h1::after {
  display: block;
    content: '';
  width: 60px;
  height: 4px;
  background: #6a7b34;
  position: absolute;
  bottom: -10px;
}

.contentWrapper a {
  color: #384A5D !important;
}

/* New Styles for the homepage */
/* Search Area Styles */
#docsSearch {
  background: url(https://www.fppathfinder.com/wp-content/uploads/2024/02/helpscout-back.png);
  padding: 6.5em 0 12.5em 0;
}
#docsSearch h1 {
color: white !important;
}
section#docsSearch {
  background-color: #f5f8fb;
  margin-bottom: 0; 
}

section#docsSearch #searchBar button {
    background: linear-gradient(135deg, #e55748 0%, #b2382b 100%);
    border: #b2382b; 
}

/* This makes sure the text underneath the search isnt broken on smaller screens */
@media screen and (max-width: 768px) { 
  section#docsSearch:after { 
   width: auto;
  }
   #docsSearch {
    padding: 6.5em 0 6.5em 0 !important;
  }
}

/* This makes sure the button in the search isnt broken on smaller screens */
@media screen and (min-width: 768px) {
  #searchBar button {
  height: 40px;
  top: 29px;
  right: 5px;
  border-radius: 0 0 0 0;
  padding: 0 40px;
  font-size: 16px;
  }
}


/* This adds the callout underneath the search bar */
.search-callout p {
  font-size: 18px;
  color: white;
  padding: 20px;
  font-style: italic;

}

.search-callout a {
  text-decoration: underline;
  color: white;
  font-weight: bold;
}

/* No longer needed for now - keeping in case we need it */

/* section#docsSearch:after {
  content: 'If you are looking for a checklist, flowchart, or summary guide, please visit fppathfinder.com and click on "Member Section".';
  font-size: 18px;
  display: flex;
  justify-content: center;
  text-align: center;
  color: white;
  padding: 0 20px;
  font-style: italic;
  width: 500px;
  margin: auto;
}  */

/* This makes sure the text underneath the search isnt broken on smaller screens 
@media screen and (max-width: 768px) { 
  section#docsSearch:after { 
   width: auto !important;
  }
} */

/* Support Blocks */
.support-blocks {
  display: flex;
  max-width: 1200px;
  justify-content: space-between;
  margin: auto;
 color: white;
}

@media (max-width: 769px) {
.support-blocks {
       flex-direction: column;
  }
}
.support-blocks h3 {
 color: white !important;
  margin-top: 0;
  margin-bottom: 30px;
  font-size: 28px;
}


.support-blocks a {
 color: white !important;
}

.support-blocks li {
  padding: 30px;
  flex: 1;
  text-align: left;
  font-size: 16px;
  margin: 25px 15px 40px;
  border-radius: 5px;
  text-decoration: none;
}

.support-blocks .button-link{
 display: flex;
  align-items: center;
  justify-content: space-between;
}


.support-blocks li.green-block {
  background-color: #647335;
}

.support-blocks li.blue-block{
background-color: #15222C;
}

.support-blocks li.light-block {
  background-color: #1E495F;
}

/* helps with spacing on mobile */
@media (max-width: 769px) {
  .support-blocks li.contacts {
      margin-bottom: 15px
  }
  .support-blocks li.memberportal{ 
      margin-top: 0px;
  }
}

/* support article block */

.support-blocks li.support-articles  {
  margin-bottom: 0px !important;
}

.support-blocks li.support-articles h3  {
  margin-bottom: 5px !important;
}

.support-blocks li.support-articles p {
  margin-bottom: 30px !important;
  margin-top: 5px;
  text-align: left !important;
  color: white;
  font-size: 18px;
  line-height: 25px;
}

/* Styles for Top block either for support or for webinars - same layout */
.other-helpscout-contain {
  display: flex;
  align-items: center; 
  width: 100%;
}

.other-helpscout-contain img {
  width: 150px;
}

.other-helpscout-content {
  display: flex; 
  flex-direction: column; 
  align-items: stretch; 
  width: 100%; 
  padding-left: 50px;
}

@media screen and (max-width: 768px) { 
  .other-helpscout-contain { 
      flex-direction: column !important;
      align-items: start;
  }

  .other-helpscout-contain img {
    margin-bottom: 15px;
  }

  .other-helpscout-content { 
      padding-left: 0px !important;
  }
  
}

/*New Collection toparea Styles */
/*main container */
.collections-container {
  display: flex;
  justify-content: center;
  border-radius: 8px;
  max-width: 1360px;
  flex-wrap: wrap;
  margin: auto;
  background-color: white;
  margin-top: -100px;
  margin-bottom: 50px;
  -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15);
}

.collections-link-container {
  display: flex;
  align-items: center;
}

/* Hover Styles on the collection blocks */
.collection-link:hover {
  text-decoration: none;
  background-color: #f5f5f5;
}

.collection-block {
  border: 1px solid rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  width:250px;
  height:200px;
}

.collection-1 {
  border: none;
}

.collection-5 {
  border: none;
}

.collection-block h3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 18px;
  line-height: 24px;
}

.collection-block h3::before {
  font-size: 42px;
}

/* these are the icons for each collection box on the homepage*/
.collection-1 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f4ad';
  color: white;
  background-color: #6a7a34;
  padding: 25px 17px;
  border-radius: 60px;
  margin-bottom: 10px;
}

.collection-2 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f51c';
  color: white;
  background-color: #6a7a34;
  padding: 25px 12px;
  border-radius: 60px;
  margin-bottom: 10px;
}

.collection-3 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f6ff';
  color: white;
  background-color: #6a7a34;
  padding: 25px 12px;
  border-radius: 60px;
  margin-bottom: 10px;
}

.collection-4 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f2b5';
  color: white;
  background-color: #6a7a34;
  padding: 25px 12px;
  border-radius: 60px;
  margin-bottom: 10px;
}

.collection-5 h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f590';
  color: white;
  background-color: #6a7a34;
  padding: 25px 17px;
  border-radius: 60px;
  margin-bottom: 10px;
}

/* Smaller Desktop styles for the collection boxes */
@media screen and (max-width: 1367px) { 

  .collections-container {
    max-width: 1000px;

  }

  .collection-block h3 { 
     line-height: 20px;
  }

  .collection-block h3::before {
    font-size: 28px;
    line-height: 10px;
  }

  .collection-block {
      width: 178px;
      height: 150px;
  }

  .collection-1 {
    border: 1px solid rgba(0,0,0,0.1) !important;
  }
  
  .collection-5 {
    border: 1px solid rgba(0,0,0,0.1) !important;
  }
  

}

/* Tablet styles for the collection boxes */
@media screen and (max-width: 1000px) { 

  .collections-container {
    width:100%;
    background-color: transparent;
    margin-top: 24px;
    box-shadow: none;
  }

  .collection-block {
    width: 250px;
    height: 200px;
  }

}

/* Mobile styles for the collection boxes */
@media screen and (max-width: 583px) { 

  .collections-container {
    width:100%;
    background-color: transparent;
    box-shadow: none;
  }

  .collection-block {
    background-color: white;
    border-radius: 8px;
    -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15);
    margin: 0;
    max-width: 350px;
  }

  .collections-link-container { 
    margin-bottom: 24px;
  }

}

/* Footer */
/* adds additional spacing to the footer */
footer p {
  text-align: center;
}

/* b tag style fix so it adds bold and not bolder */
b {
    font-weight: bold !important;
}