/*
* site specific theme css
* The Lead HQ - ZLQ1
*/

 /* import barlow font for headers */
 @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100;400;700&family=Comfortaa:wght@300;400;700&display=swap');

/* css variable overrides */
:root {

  /* colors */
    --white:#fff; /* standard white */
    --off-white:#fcfcfc; /* off-white */
    --yellow: #fec023; /* yellow accent - ACCENT BRAND COLOR */
    --silver:#f7f7f7; /* silver */
    --light-gray:#d9d9d9; /* light gray color */
    --gray:#787b82; /* gray color */
    --dark-gray: #545b62; /* dark gray color */
    --blue:#3d9fda; /* blue - PRIMARY BRAND COLOR */
    --dark-blue:#0e2c6b; /* dark blue - SECONDARY BRAND COLOR */
    --light-red:#eb4543; /* lighter red */
    --light-black:#333; /* light black */
    --black:#000; /* black */
    --darker-black:#1E1E1E; /* darker black */
    --slider-color:#D37550;
    /* LSD Brand oranges */
    --LS-Direct-Orange:#D37550;
    --LS-Direct-Orange-60:#E3A588;
    --LS-Direct-Orange-30:#EFCEBC;
    --LS-Direct-Orange-10:#F8EBE4;
    --LS-Direct-Orange-Hover:#F07550;

    /* LSD Brand Black */
    --LS-Direct-Black:#343434;
    --LS-Direct-Black-60:#706C6B;
    --LS-Direct-Black-30:#ACA8A7;
    --LS-Direct-Black-10:#DCDAD9;
    --LS-Direct-white:#DCDAD9;


    /* brand colors */
    --primary-brand-color: var(--LS-Direct-Orange);
    --secondary-brand-color: var(--LS-Direct-Black);
    --accent-brand-color: var(--LS-Direct-Orange-Hover);

    /* main elements */
    --body-bg-color: var(--white); /* body background color */
    --home-bg-color: var(--white); /* home background color */

    /* header */
    --header-bg-color: var(--LS-Direct-Orange); /* header bg color */
    --header-text-color: var(--LS-Direct-Black); /* header text color */
    --header-link-color: var(--LS-Direct-Black); /* header link color */

    /* footer */
    --footer-bg-color: var(--white); /* footer bg color */
    --footer-text-color: var(--LS-Direct-Black-60); /* footer text color */
    --footer-link-color: var(--LS-Direct-Orange); /* footer link color */

    --tiny-border-color: var(--LS-Direct-Orange); /* short line color borders */

    /* fonts */
    --base-font-size: 16px;
    --body-font-size: .845rem;
    --btn-font-size: .875rem;
    --nav-font-size: .875rem;
    --nav-font-color: var(--white);
    --nav-font-color-hover: var(--blue);
    --footer-font-size: 0.688rem;

    --primary-brand-font:'Open Sans', sans-serif; /* primary brand font*/
    --primary-brand-font-color: var(--black); /* primary brand font color */
    --secondary-brand-font:'Open Sans', sans-serif; /* primary brand font*/
    --head-tag-font: 'Open Sans', sans-serif; /* primary brand font*/
    --secondary-brand-font-color: var(--light-black); /* secondary brand font color */
    --label-color: var(--gray); /* label colors */
    --brand-box-shadow: 0 0 0 .25rem rgba(61,159,218,.5); /* used for input outlines */

    /* buttons */
    --btn-pad: .5rem 1rem; /* button padding */
    --btn-radius: 5px; /* button radius */

    /* primary buttons */
    --primary-btn-bg: var(--LS-Direct-Orange);  /* primary button background */
    --primary-btn-border: var(--LS-Direct-Orange);  /* primary button border */
    --primary-btn-text: var(--white); /* primary button text */
    --primary-btn-hover: var(--LS-Direct-Orange-Hover); /* primary button hover */
    --primary-btn-hover-text: var(--white); /* primary button hover text*/



    /* secondary buttons */
    --secondary-btn-bg: var(--white);  /* secondary button background */
    --secondary-btn-border: var(--LS-Direct-Orange); /* secondary button border */
    --secondary-btn-hover: var(--LS-Direct-Orange-Hover); /* secondary button hover */
    --secondary-btn-text: var(--LS-Direct-Orange); /* secondary button text */

    /* modal */
    --modal-header-color: var(--LS-Direct-Orange);
    --modal-header-text-color: var(--white);
    --modal-btn-close-color: var(--LS-Direct-Orange);
    --modal-footer-color: var(--white);

    /* products (older styles )*/
    --standard-product-bg-color:#3d9fda; /* standard product bg color */
    --enhanced-product-bg-color:rgb(22, 203, 22); /* enhanced product bg color */
    --premium-product-bg-color:brown; /* premium product bg color */

    /* cart (older styles) */
    --cart-price-text-color:var(--white); /* cart price text color */
    --card-border:var(--LS-Direct-Black-30); /* card border color */
    --card-border-lt-gray:var(--LS-Direct-Black-30); /* card border light gray */

  }

  /* mostly bootstrap classes below */

  /* site button specific styles */
  .btn {
    display: inline-block;
    padding: var(--btn-pad);
    margin-bottom: 0;
    font-size: var(--btn-font-size);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    text-decoration: none;
  }

  .btn.btn-primary {
    background-color: var(--primary-btn-bg);
    color: var(--primary-btn-text);
    text-decoration: none;
  }

  .btn.btn-primary:hover {
    background-color: var(--primary-btn-hover);
    border-color: var(--primary-btn-hover);
    color: var(--primary-btn-hover-text);
  }

  .btn.btn-primary.d-flex.mx-auto:active{
    border-color: var(--dark-blue) !important;
  }

  .btn.btn-secondary {
    color: var(--secondary-btn-text);
    background-color: var(--secondary-btn-bg);
    border-color: var(--secondary-btn-border);
  }

  .btn.btn-secondary:hover {
    background-color: var(--secondary-btn-hover);
    border-color: var(--secondary-btn-border);
    color: var(--white);
  }

  .btn.btn-link {
    color: var(--primary-brand-color);
    text-decoration: none;
  }

  .btn.btn-link:hover {
    color: var(--dark-blue);
    text-decoration: none;
  }

  /* site specific for leadhq input styling   */
  .form-check-input:checked,
  .form-check-input[type="checkbox"]:indeterminate,
  .form-range::-webkit-slider-thumb,
  .form-range::-moz-range-thumb,
  .form-range::-moz-range-thumb {
    background-color: var(--primary-brand-color) !important;
    border-color: var(--primary-brand-color) !important;
  }

  /* for jquery ui override */
  span.ui-slider-handle.ui-corner-all.ui-state-default {
    background: var(--primary-brand-color);
    border-color: var(--primary-brand-color);
  }

  .btn-primary:disabled, .btn-primary.disabled{
    border-color:var(--LS-Direct-Orange-30) !important;
    background-color:var(--LS-Direct-Orange-30) !important;
  }

  .btn-primary:active:focus,
  .btn.btn-link:active:focus,
  .btn-check:focus + .btn-primary,
  .btn-primary:focus,
  .btn-check:focus + .btn,
  .btn:focus,.form-check-input:focus,
  .accordion-button:focus,
  .form-select:focus,
  .form-control:focus {
    border-color: var(--LS-Direct-Orange-60);
    box-shadow: var(--LS-Direct-Orange-Hover);
  }

  .accordion-button:hover::after,
  .accordion-button:focus::after,
  .accordion-button:active::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230e2c6b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  }

  /*
  * header
  */

  .header {
    min-height: 95px;
    width: 100%;
    z-index: 9999;
    border-bottom: var(--LS-Direct-Orange) solid 1px;
  }

  /*
  * nav
  */

  .navbar-brand img {
    width: 100%;
    height: auto;
    max-width: 160px;
    position: relative;
    top: 3px;
  }

  button.navbar-toggler {
    justify-content: flex-end;
  }

  .navbar-light .navbar-nav .nav-link {
    color: var(--LS-Direct-Black);
    font-size: var(--nav-font-size);
    text-decoration: none;
  }
  .navbar-light .navbar-nav .nav-link:hover {
    color: var(--LS-Direct-Orange-Hover);
  }

  .navbar-nav .nav-link .cart-count {
    color: var(--LS-Direct-Orange);
    font-weight: 700;
  }

  li.nav-item.dropdown,
  li.nav-item.dropdown .dropdown-item{
    font-size: var(--nav-font-size);
    padding: 3px 5px
  }

  li.nav-item.dropdown {
    padding-top: 0;
  }

  li.nav-item.dropdown .dropdown-item:active {
    background-color: var(--light-gray);
  }

  h3.dropdown-item,
  p.dropdown-item{
    cursor: default;
    text-align: center;
  }

  h3.dropdown-item {
    font-size: 1.25rem !important;
  }

  h3.dropdown-item:hover,
  p.dropdown-item:hover {
    background: transparent;
    cursor: default;
    text-align: center;
  }

  h3.dropdown-item:active,
  h3.dropdown-item:focus {
    background-color: var(--light-gray);
  }
  /* nav pills */

  .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--primary-btn-hover-text);
    background-color: var(--primary-btn-hover);
    border-color: var(--primary-btn-hover);
  }

  .nav-link {
    color: var(--blue);
  }

  .nav-link:hover, .nav-link:focus {
    color: var(--dark-blue);
  }

  .navbar-toggler {
    background-color: var(--white);
  }

  /* head tags and paragraph */

  .hero{
    font-size: 2.625rem;
  }

 .laptop-img {
    height: 360px;
  }

  .tutorialvideo2 {
    width: 100%;
    height: revert-layer;
    cursor: pointer;
  }

  @media only screen and (max-width: 350px) {
    .tutorialvideo {
       max-height: 180px !important;
    }
  }

  .jumbo{
    font-size:2rem;
  }

  .mailer-card-header{
    font-size:30px;
  }

  .subhead-zlsd {
    font-size: 25px;
  }

  .card-title-subhead-zlsd {
    font-size: 22px;
  }

  h1, h2, h3, h4, h5 {
    font-family: var(--head-tag-font);
    font-size: 1.5rem; /* 24px */
  }
  h1, h2, h3 {
    margin-bottom: 1rem;
  }

  h2 {
    font-size: 1.25rem; /* 32px */
  }

  h3 {
    font-size: 1.125rem; /* 28px */
  }

  h4 {
    font-size: 1rem; /* 24px */
  }

  h5 {
    font-size: 0.875rem; /* 20px */
  }

  h6 {
    font-size: 0.75rem; /* 18px */
  }

  .leadstar-perks {
    list-style: none;
    padding-left: 0px;
    padding-right: 20%;
  }

  p, li {
    font-family: var(--primary-brand-font);
    font-size: var(--body-font-size);  /* 14px */
  }

  .accent-color{
    color:var(--LS-Direct-Orange)
  }

  a {
    cursor: pointer;
    color: var(--primary-brand-color);
  }

  a:hover,
  a:active,
  a:focus {
    color: var(--dark-blue);
    text-decoration: underline;
  }

  /* modals */
  .modal {
    z-index: 70000;
  }

  .modal-backdrop {
    z-index: 60000;
  }

  .modal-dialog .modal-content .modal-header {
    background: var(--modal-header-color);
    border: var(--modal-header-color);
  }

  .modal-dialog .modal-content .modal-header .modal-title {
    color: var(--modal-header-text-color);
  }

  .modal-dialog .modal-content .modal-footer {
    background: var(--modal-footer-color);
    border: 1px solid var(--modal-footer-color);
  }

  /* accordion */
  .accordion-button {
    background-color: #f7f7f7 !important;
    color: #333 !important;
  }

  /*
   * home page
   */

  .home-bg {
    background-color: var(--home-bg-color);
  }

  .home-page-logo {
    width: 100%;
    height: auto;
    max-width: 400px;
  }

  .main-landing-page::before {
    content: "";
    background: url("https://a.cdnlead.com/portal-assets/leadstar/leadstar-compass.png");
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-repeat: no-repeat;
    background-position: right;
    opacity: 0.2;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    background-position-y: 246px;
    background-size: 317px;
  }

  @media screen and (max-width: 990px) {

    .hero-text {
      text-align: center;
      transition: all 1s ease;
    }
    .hero-text .tiny-border {
      display: none;
    }
  }

  @media screen and (max-width: 576px) {
    .home-page-logo {
      max-width: 250px;
      margin-top: 60px;

    }
  }



   /* login */
  .login-wrap{
    background: var(--white);
    width: 100%;
    max-width: 325px;
    border-radius: 8px;
    top: 0px;
    right: 0;
    margin: 0 auto;
    position: relative;
    color: var(--LS-Direct-Black);
    z-index: 999;
    padding: 14px 20px 28px;
    box-shadow: 0 9px 7px 0 rgb(0 0 0 / 20%);
  }

  .login-wrap .form-control {
    border: 1px solid var(--gray);
  }

  .login-wrap .small {
    font-size: .875rem;
  }

  .login-wrap h2 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 20px;
  }

  .login-wrap a:hover {
    color: var(--white);
  }

  .border-dark {
    border-color: var(--dark-gray) !important;
  }

   /* hero image */


  .homepage-content {
    align-self: center;
    align-items: center;
    justify-content: center;
    /* padding: 0 0 60px 0; */
  }

  .landing-headline{
    background: var(--LS-Direct-Orange);
    text-align: center;
    padding: 10px;
    color: var(--white);
  }

  .landing-headline h1{
    margin-bottom: 0;
  }

  .tiny-border {
    width: 55px;
    border: 3px solid var(--primary-brand-color);
    margin: 10px 0;
  }

  .tiny-border.long {
    width: 100px;
    border-width: 6px;
  }

  @media only screen and (max-width: 350px) {
    .hero-text h1,
    .hero-text h2,
    .hero-text .tiny-border,
    .hero-accent {
      display: none;
    }
  }

 /* cpm filter */
  #selected_zipcodes .form-check-inline {
    margin: 0 .75rem;
  }

  /* cpm delete county svg */
  button.btn.btn-link.delete-county-svg::before,
  button.btn.btn-link.delete-svg::before {
    content: "\f1f8";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
  }
  button.btn.btn-link.delete-county-svg,
  button.btn.btn-link.delete-svg {
    padding: 5px;
    line-height: 1.5;
    margin: 0;
    color: var(--primary-btn-bg);
    font-size:1.15rem;
  }
  button.btn.btn-link.delete-county-svg:hover,
  button.btn.btn-link.delete-svg:hover {
    color: var(--primary-btn-hover);
  }

  #counties .btn {
    padding: 0.2em 0.7em;
    font-size: .875rem !important;
    min-width: 47%;
    float: left;
    margin: 5px 2px;
    white-space: nowrap !important;
    word-wrap: break-word !important;
    text-overflow: ellipsis;
    max-width: 37px;
    overflow: hidden;
  }


  /*
  * footer
  */

  .footer{
    /* width: 100%; */
    word-wrap: break-word;
    background-color: var(--footer-bg-color);
    color: var(--footer-text-color);
    font-size: var(--footer-font-size);
    /* right: 0;
    bottom: 0;
    left: 0; */
    /* margin: 20px 0 0; */
    padding: 20px 0;
    /* z-index: 5000; */
    box-shadow: 0 -5px 12px -5px rgba(0, 0, 0, .2);
  }

  .footer a.link,
  .footer p {
    font-size: var(--footer-font-size);
    color: var(--footer-text-color);
  }

  .footer a.link {
    color: var(--footer-link-color);
  }

  .footer-content {
    width: initial;
  }

/* HOME CUSTOM STYLING */


/* this is to over write the background color of the bootstrap nav bar , need to find a way to updated with env variables maybe? or a jinja if else statement base on env variable*/
.bg-light {
  background-color: var(--white);
}

/* styling of the login form */
/* .login label,.login p,.login h2{
  color: var(--white);
} */
.login {
  color: var(--white);
}

.login a {
  color:var(--blue)
}

/* this is the headline underneath the hero for insurance direct mail leads  */
.home_headline{
  font-size: 4rem;
  font-weight: 700;
  color: var(--dark-blue);
}

@media screen and (max-width: 1100px){
  .homepage-content h2.home_headline {
    text-align: center;
    font-size: 2.6rem;
  }
}

.leads{
  color:  var(--blue);
}
/* this is the statement of the price in the home page  */
.pricehome{
  color: var(--dark-blue);
  font-size: 24px;
  font-weight: 700;
}
/* this is the asterisk saying coupon to use for 20% off  */
.coupon{
  color: #0e2c6b;
  font-size: 18px;
  font-weight: 600;
}

.home-icon {
  height: 90px;
  width: auto;
}

.resources-area h2 {
  font-weight: 800;
  margin-bottom: 40px;
  color: var(--blue);
}

.row.mt-5 {
  border-bottom: solid 2px black;
}

/* this is to style the section with pdf and video at the bottom of the home page  */

.resources-area h2 {
  font-weight: 800;
  margin-bottom: 40px;
  color: var(--primary-brand-color);
}

.resources-area p {
  color: var(--dark-blue);
  text-align: center;
  font-size:1.5rem;
}

.home-resources {
  height: 375px;
  width: auto;
}

@media only screen and (max-width: 350px) {
  .tutorialvideo {
     max-height: 180px !important;
  }
}

/* this is to style the product card section */
.flexleadsimg{
  padding:20px 10px 20px 10px;
  margin: 20px 0 10px 0;;
  background-color: white;
  height: 49%;
}

.card-text.fs-6 {
  font-size: .845rem !important;
}


/* policy link anchor none underline  */
.policy-link {
  text-decoration: none;
}

/* fixing footer */
  .AuthorizeNetSeal.d-block.mx-auto{
    margin-right: 0 !important;
  }

  .landing-mobile{
    display: none;
  }


  @media only screen and (max-width: 600px) {
    .leadstar-laptop {
      width: 100%;
      height: 100%;
    }
    .tutorialvideo {
      max-width: 100% !important;
      max-height: auto !important;
    }
  }

  @media only screen and (max-width: 1025px) {
  .landing-mobile{
  display: block;
}

  .landing-desktop{
    display: none;
  }
}

  @media only screen and (max-width: 991px) {
    .main-landing-page{
      flex-direction: column;
    }
    .leadstar-perks {
      padding-right: 0;
    }
    .laptop-img {
      height: initial; /* Set the desired height for your div */
      /* overflow: hidden; Hide any overflow content */
  }

  .tutorialvideo {
      max-width: 50%; /* Ensure the video doesn't exceed the width of the div */
      max-height: 50%; /* Set the maximum height to 100% of the parent div's height */
      width: auto; /* Maintain the aspect ratio */
      height: auto; /* Maintain the aspect ratio */
      display: block; /* Remove default inline styling */
      margin: 0 auto; /* Center the video horizontally */
  }
    .copy-content {
      padding-right: 10%;
      padding-left: 10%;
      padding-top: 20px;
    }
    .hero {
      font-size: 33px;
    }

    .copy-content {
      text-align: center;
    }

  }

  @media only screen and (max-width: 600px) {
    .hero {
      font-size: 25px;
    }
    .copy-content {
      padding: 20px;
    }

   .copy-content .jumbo {
      font-size: 23px;
    }
  }

  @media only screen and (max-width: 500px) {
    .hero {
      font-size: 20px;
    }

    .main-landing-page {
      background: white;
    }
    .footer-copy-content{
      padding-right: 36px;
    }
  }

  @media only screen and (max-width: 400px) {
    .hero {
      font-size: 15px;
    }
    .leadstar-perks li{
      font-size:12px;
    }
  }

  @media only screen and (min-width: 1600px) {
    .main-landing-page {
      margin-top: 30px;
    }
    .copy-content .jumbo {
      font-size: 40px;
    }
    .leadstar-perks li{
      font-size:18px;
    }
  }

#termsImg {
  border: solid black;
}


  @media only screen and (max-width: 600px) {
    .footer-content {
      width: 80%;
      }
  }

  .cancellation-statement{
    font-size: 18px;
  }