/*
  All elements must be accounted for in each class
  Elements to include:
    p, a, h1, h2, h3, h4, h5, h6, nav bar elements, buttons
*/

/* Found fix online, this removed excess space at the right side of page and fixed some mobile formatting */
html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

/* White text, primary (indigo) background - PublicTextDivider.hti PublicHeaderBodyDivider.hti Public3col.hti */
.bg-primary-text-white p {
  color: var(--white);
}
.bg-primary-text-white h1, .bg-primary-text-white h2, .bg-primary-text-white h3, .bg-primary-text-white h4, .bg-primary-text-white h5, .bg-primary-text-white h6 {
  color: var(--white);
}
.bg-primary-text-white {
  background-color: var(--primary);
}
.bg-primary-text-white a {
  color: var(--secondary);
  border-color: var(--secondary);
  background-color: transparent;
}
.bg-primary-text-white a:hover {
  color: var(--primary);
  background-color: var(--secondary);
}
.bg-primary-text-white ul {
  color: var(--secondary);
}
.navbar.bg-primary-text-white {
  background-color: var(--primary);
}
.navbar.bg-primary-text-white a {
  color: var(--white);
}
.navbar.bg-primary-text-white a:hover {
  color: var(--primary);
  background-color: var(--secondary);
}
.bg-primary-text-white .dropdown-menu {
  background-color: var(--primary);
}
.bg-primary-text-white a.dropdown-item:hover {
  color: var(--primary);
  background-color: var(--white);
}
.bg-primary-text-white .btn-outline-success {
  color: var(--white);
  background-color: transparent;
  border-color: var(--white);
}
.bg-primary-text-white .btn-outline-success:focus,
.bg-primary-text-white .btn-outline-success:hover,
.bg-primary-text-white .btn-outline-success:active,
.bg-primary-text-white .btn-outline-success:hover:focus:active {
  color: var(--primary);
  background-color: var(--white);
}
/* white text, secondary (aqua) background - publictextdivider.hti */
.bg-secondary-text-white p {
  color: var(--white);
}
.bg-secondary-text-white h1, .bg-secondary-text-white h2, .bg-secondary-text-white h3, .bg-secondary-text-white h4, .bg-secondary-text-white h5, .bg-secondary-text-white h6 {
  color: var(--white);
}
.bg-secondary-text-white {
  background-color: var(--secondary);
}
.bg-secondary-text-white a {
  color: var(--white);
  border-color: var(--primary);
  background-color: var(--primary);
}
.bg-secondary-text-white a:hover {
  color: var(--primary);
  border-color: var(--white);
  background-color: var(--white);
}
.bg-secondary-text-white ul {
  color: var(--primary);
}
.navbar.bg-secondary-text-white {
  background-color: var(--secondary);
}
.navbar.bg-secondary-text-white a {
  color: var(--primary);
}
.navbar.bg-secondary-text-white a:hover {
  color: var(--secondary);
  background-color: var(--primary);
}
.bg-secondary-text-white .dropdown-menu {
  background-color: var(--secondary);
}
.bg-secondary-text-white a.dropdown-item:hover {
  color: var(--secondary);
  background-color: var(--primary);
}
.bg-secondary-text-white .btn-outline-success {
  color: var(--primary);
  background-color: transparent;
  border-color: var(--primary);
}
.bg-secondary-text-white .btn-outline-success {
  color: var(--primary);
  background-color: transparent;
  border-color: var(--primary);
}
.bg-secondary-text-white .btn-outline-success:focus,
.bg-secondary-text-white .btn-outline-success:hover,
.bg-secondary-text-white .btn-outline-success:active,
.bg-secondary-text-white .btn-outline-success:hover:focus:active {
  color: var(--secondary);
  background-color: var(--primary);
}
/* primary (indigo) text , white background */
.bg-white-text-primary p {
  color: var(--primary);
}
.bg-white-text-primary h1, .bg-white-text-primary h2, .bg-white-text-primary h3, .bg-white-text-primary h4, .bg-white-text-primary h5, .bg-white-text-primary h6 {
  color: var(--primary);
}
.bg-white-text-primary {
  background-color: var(--white);
}
.bg-white-text-primary a {
  color: var(--secondary);
  border-color: var(--secondary);
  background-color: transparent;
}
.bg-white-text-primary a:hover {
  color: var(--white);
  background-color: var(--secondary);
}
.bg-white-text-primary ul {
  color: var(--secondary);
}
.navbar.bg-white-text-primary {
  background-color: var(--lightgray);
}
.navbar.bg-white-text-primary a {
  color: var(--primary);
}
.navbar.bg-white-text-primary a:hover {
  color: var(--lightgray);
  background-color: var(--primary);
}
.bg-white-text-primary .dropdown-menu {
  background-color: var(--lightgray);
}
.bg-white-text-primary a.dropdown-item:hover {
  color: var(--lightgray);
  background-color: var(--primary);
}
.bg-white-text-primary .btn-outline-success {
  color: var(--primary);
  background-color: transparent;
  border-color: var(--primary);
}
.bg-white-text-primary .btn-outline-success:focus,
.bg-white-text-primary .btn-outline-success:hover,
.bg-white-text-primary .btn-outline-success:active,
.bg-white-text-primary .btn-outline-success:hover:focus:active {
  color: var(--lightgray);
  background-color: var(--primary);
}
/* secondary (aqua) text, white background */
.bg-white-text-secondary p {
  color: var(--gray);
}
.bg-white-text-secondary h1, .bg-white-text-secondary h2, .bg-white-text-secondary h3, .bg-white-text-secondary h4, .bg-white-text-secondary h5, .bg-white-text-secondary h6 {
  color: var(--secondary);
}
.bg-white-text-secondary {
  background-color: var(--white);
}
.bg-white-text-secondary a {
  color: var(--primary);
  border-color: var(--primary);
  background-color: transparent;
}
.bg-white-text-secondary a:hover {
  color: var(--white);
  background-color: var(--primary);
}
.bg-white-text-secondary ul {
  color: var(--primary);
}
.navbar.bg-white-text-secondary {
  background-color: var(--lightergray);
}
.navbar.bg-white-text-secondary a {
  color: var(--primary);
}
.navbar.bg-white-text-secondary a:hover {
  color: var(--lightergray);
  background-color: var(--primary);
}
.bg-white-text-secondary .dropdown-menu {
  background-color: var(--lightergray);
}
.bg-white-text-secondary a.dropdown-item:hover {
  color: var(--lightergray);
  background-color: var(--primary);
}
.bg-white-text-secondary .btn-outline-success {
  color: var(--primary);
  background-color: transparent;
  border-color: var(--primary);
}
.bg-white-text-secondary .btn-outline-success:focus,
.bg-white-text-secondary .btn-outline-success:hover,
.bg-white-text-secondary .btn-outline-success:active,
.bg-white-text-secondary .btn-outline-success:hover:focus:active {
  color: var(--lightergray);
  background-color: var(--primary);
}

/* Darker aqua header, black text, lighter gray background - PublicHeaderTextImage.hti and default navbar */
.bg-lightergray-header-secondary h1, .bg-lightergray-header-secondary h2, .bg-lightergray-header-secondary h3, .bg-lightergray-header-secondary h4, .bg-lightergray-header-secondary h5 {
  color: var(--secondary);
}
.bg-lightergray-header-secondary h6 {
  color: var(--primary)
}
.bg-lightergray-header-secondary {
  background-color: var(--lightergray);
}
/* White text, tertiary (pink) background - PublicHeadingBodyBackground.hti */
.bg-tertiary-text-white p {
  color: var(--white);
}
.bg-tertiary-text-white h1, .bg-tertiary-text-white h2, .bg-tertiary-text-white h3, .bg-tertiary-text-white h4, .bg-tertiary-text-white h5, .bg-tertiary-text-white h6 {
  color: var(--white);
}
.bg-tertiary-text-white {
  background-color: var(--tertiary);
}
.bg-tertiary-text-white a {
  color: var(--secondary);
  border: var(--secondary);
  background-color: transparent;
}
.bg-tertiary-text-white a:hover {
  color: var(--tertiary);
  background-color: var(--secondary);
}
.bg-tertiary-text-white ul {
  color: var(--secondary);
}
.navbar.bg-tertiary-text-white {
  background-color: var(--tertiary);
}
.navbar.bg-tertiary-text-white a {
  color: var(--white);
}
.navbar.bg-tertiary-text-white a:hover {
  color: var(--tertiary);
  background-color: var(--white);
}
.bg-tertiary-text-white .dropdown-menu {
  background-color: var(--tertiary);
}
.bg-tertiary-text-white a.dropdown-item:hover {
  color: var(--tertiary);
  background-color: var(--white);
}
.bg-tertiary-text-white .btn-outline-success {
  color: var(--white);
  background-color: transparent;
  border-color: var(--white);
}
.bg-tertiary-text-white .btn-outline-success:focus,
.bg-tertiary-text-white .btn-outline-success:hover, 
.bg-tertiary-text-white .btn-outline-success:active, 
.bg-tertiary-text-white .btn-outline-success:hover:focus:active {
  color: var(--tertiary);
  background-color: var(--white);
}
.bg-tertiary-text-white .left-side h6 {
  color: var(--secondary);
}
.bg-tertiary-text-white .left-side a {
  color: var(--secondary);
  text-decoration: underline;
}
.bg-tertiary-text-white .right-side h6 {
  color: var(--primary);
}
.bg-tertiary-text-white .right-side a {
  color: var(--primary);
  text-decoration: underline;
}

/* White Text, primary and secondary backgrounds - no pink on background for get started section at page bottom */
.bg-primary-left-secondary-right p {
  color: var(--white);
}
.bg-primary-left-secondary-right h1, .bg-primary-left-secondary-right h2, .bg-primary-left-secondary-right h3, .bg-primary-left-secondary-right h4, .bg-primary-left-secondary-right h5, .bg-primary-left-secondary-right h6 {
  color: var(--white);
}
.bg-primary-left-secondary-right {
  background-color: var(--secondary);
}
.bg-primary-left-secondary-right a {
  color: var(--secondary);
  border: var(--secondary);
  background-color: transparent;
}
.bg-primary-left-secondary-right a:hover {
  color: var(--tertiary);
  background-color: var(--secondary);
}
.bg-primary-left-secondary-right ul {
  color: var(--secondary);
}
.bg-primary-left-secondary-right .left-side h6 {
  color: var(--secondary);
}
.bg-primary-left-secondary-right .left-side a {
  color: var(--secondary);
  text-decoration: underline;
}
.bg-primary-left-secondary-right .right-side h6 {
  color: var(--primary);
}
.bg-primary-left-secondary-right .right-side a {
  color: var(--primary);
  text-decoration: underline;
}

/* White text, lighter gray background with link styling - PublicHero.hti */
.bg-lightergray-text-white p {
  color: var(--white);
}
.bg-lightergray-text-white h1, .bg-lightergray-text-white h2, .bg-lightergray-text-white h3, .bg-lightergray-text-white h4, .bg-lightergray-text-white h5, .bg-lightergray-text-white h6 {
  color: var(--white);
} 
.bg-lightergray-text-white {
  background-color: var(--lightgray);
}
.bg-lightergray-text-white a {
  color: var(--primary);
  border-color: var(--secondary);
  background-color: var(--secondary);
}
.bg-lightergray-text-white a:hover {
  color: var(--white);
  background-color: var(--primary);
}
.bg-lightergray-text-white ul {
  color: var(--primary);
}
.navbar.bg-lightergray-text-white {
  background-color: var(--lightgray);
}
.navbar.bg-lightergray-text-white a {
  color: var(--white);
  background-color: transparent;
}
.navbar.bg-lightergray-text-white a:hover {
  color: var(--lightgray);
  background-color: var(--white);
}
.bg-lightergray-text-white .dropdown-menu {
  background-color: var(--lightgray);
}
.bg-lightergray-text-white a.dropdown-item:hover {
  color: var(--lightgray);
  background-color: var(--white);
}
.bg-lightergray-text-white .btn-outline-success {
  color: var(--white);
  background-color: transparent;
  border-color: var(--white);
}
.bg-lightergray-text-white .btn-outline-success:focus,
.bg-lightergray-text-white .btn-outline-success:hover, 
.bg-lightergray-text-white .btn-outline-success:active, 
.bg-lightergray-text-white .btn-outline-success:hover:focus:active {
  color: var(--lightgray);
  background-color: var(--white);
}
/* Fixes navbar cutting off content in mobile view */
@media (max-width: 979px) {
  body .bg-lightergray-text-white {
    padding-top: 50px;
  }
}
/* FAQs.xml, pricing.xml, and Features.xml stylesheet, white bg, primary and black headers */
.bg-white-header-primary-and-black {
  background-color: var(--white);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--lightgray);
}
.bg-white-header-primary-and-black p {
  color: var(--gray);
}
.bg-white-header-primary-and-black h1,
.bg-white-header-primary-and-black h2,
.bg-white-header-primary-and-black h3 {
  color: var(--primary);
}
.bg-white-header-primary-and-black h4,
.bg-white-header-primary-and-black h5,
.bg-white-header-primary-and-black h6 {
  color: var(--gray);
}
.bg-white-header-primary-and-black a {
  color: var(--primary);
  text-decoration: underline;
}
.bg-white-header-primary-and-black a:hover {
  color: var(--white);
  background-color: var(--primary);
}
.bg-white-header-primary-and-black.alt-ltergray-bg {
  background-color: var(--lightergray)
}

/* Our-Story.xml stylesheet, white bg, primary and aqua headers */
.bg-white-header-primary-and-secondary {
  background-color: var(--white);
}
.bg-white-header-primary-and-secondary p {
  color: var(--gray);
}
.bg-white-header-primary-and-secondary h1,
.bg-white-header-primary-and-secondary h2,
.bg-white-header-primary-and-secondary h3, 
.bg-white-header-primary-and-secondary h4 {
  color: var(--primary);
}
.bg-white-header-primary-and-secondary h5,
.bg-white-header-primary-and-secondary h6 {
  color: var(--secondary);
}
.bg-white-header-primary-and-secondary a {
  color: var(--gray);
  text-decoration: underline;
}
.bg-white-header-primary-and-secondary a:hover {
  color: var(--primary);
}

/* Alternate stylesheet for lightergray background, primary and secondary headers */
.bg-lightergray-header-primary-and-secondary {
  background-color: var(--lightergray);
}
.bg-lightergray-header-primary-and-secondary p {
  color: var(--gray);
}
.bg-lightergray-header-primary-and-secondary h1,
.bg-lightergray-header-primary-and-secondary h2,
.bg-lightergray-header-primary-and-secondary h3, 
.bg-lightergray-header-primary-and-secondary h4 {
  color: var(--primary);
}
.bg-lightergray-header-primary-and-secondary h5,
.bg-lightergray-header-primary-and-secondary h6 {
  color: var(--secondary);
}
.bg-lightergray-header-primary-and-secondary a {
  color: var(--gray);
  text-decoration: underline;
}
.bg-lightergray-header-primary-and-secondary a:hover {
  color: var(--primary);
}
.bg-lightergray-header-primary-and-secondary.alt-ltergray-bg {
  background: var(--lightergray);
}
/* Pricing.xml bottom stylesheet, primary bg, white header, aqua text */
.bg-primary-header-white {
  background-color: var(--primary);
}
.bg-primary-header-white h5 {
  color: var(--white);
}
.bg-primary-header-white {
  color: var(--secondary);
}
.bg-primary-header-white a {
  color: var(--gray);
  text-decoration: underline;
}
.bg-primary-header-white a:hover {
  color: var(--primary);
}

/* White background white header - blog post*/
.bg-white-header-white {
  background-color: white;
}
.bg-white-header-white h1, .bg-white-header-white h2, .bg-white-header-white h3, .bg-white-header-white h4, .bg-white-header-white h5, .bg-white-header-white h6 {
  color: white
}
.bg-white-header-white p {
  color: var(--gray)
}
.bg-white-header-white a {
  color: var(--gray);
  text-decoration: underline;
}
.bg-white-header-white a:hover {
  color: var(--primary);
}

/* Nav Bar and Design Mode Button Styling */
.navbar {
  background-color: var(--white);
}
.navbar a {
  color: var(--gray);
}
.navbar a:hover {
  color: var(--primary);
}
.btn-outline-success {
  color: var(--lightgray);
  background-color: transparent;
  border-color: var(--lightgray);
}
.dropdown-menu {
  color: var(--primary);
  background-color: var(--white);
}
a.dropdown-item:hover {
  color: var(--white);
  background-color: var(--primary);
}
.btn-outline-success {
  color: var(--lightgray);
  background-color: transparent;
  border-color: var(--lightgray);
}
.btn-outline-success:focus,
.btn-outline-success:hover,
.btn-outline-success:active,
.btn-outline-success:hover:focus:active {
  color: var(--white);
  background-color: var(--lightgray);
  box-shadow: none;
}