/* Serden palette. Page stylesheets map their own tokens onto these names. Admin pages don't load this
   file, so admin/css and the stylesheets admin pages share (directory.css, locations.css) repeat the
   values; Scripts and emails can't read CSS variables and use the hex values too. */
:root {
    /* The brand green, RGB 10, 55, 45. White text on it has a contrast of 13.2:1. */
    --serden-evergreen: #0A372D;
    /* The same green as channels, for translucent shades: rgba(var(--serden-evergreen-rgb), 0.08). */
    --serden-evergreen-rgb: 10, 55, 45;
    /* Hover and pressed: a step darker. */
    --serden-evergreen-hover: #072922;
    /* The darkest shade, for gradients and deep bands. */
    --serden-evergreen-deep: #05251E;
    /* A step lighter: secondary buttons, form borders and the lighter hover. */
    --serden-evergreen-light: #214C43;
    --serden-ivory: #F7F4ED;
    --serden-white: #FFFFFF;
    --serden-sage: #E8EEE8;
    --serden-stone: #DDDCD3;
    --serden-text-secondary: #526159;
    /* Error text on evergreen surfaces, where the usual reds are too dark to read. */
    --serden-error-on-dark: #FFD0C2;
}

body {
    color: var(--serden-evergreen);
    background-color: #fff;
    font-family: "Poppins", sans-serif;
}

a {
    color: var(--serden-evergreen);
    text-decoration: none;
    transition: 0.3s;
}
p{
    /*font-size: 25px;*/
    color: var(--serden-evergreen)}
a:hover {
    text-decoration: none;
}
.text-underline{
    text-decoration: underline;
}
img{
    max-width: 100%;
}
ol,ul {
    list-style-image: none;
    list-style-position: outside;
    list-style: none;
    margin: 0;
    padding: 0;
}
.container{
    max-width: 1480px;
}
h1{
    font-size: 60px;
}

h2{
    font-size: 70px;
    font-weight: 700;
}
h3{
    font-size: 28px;
}
.bg-enchaning{
    background-color: var(--serden-evergreen);
}
.bg-twilight{
    background-color: var(--serden-evergreen-light);
}
.bg-sealion{
    background-color: var(--serden-evergreen-light);
}

.text-enchaning{
    color: var(--serden-evergreen);
}
.text-twilight{
    color: var(--serden-evergreen-light);
}
.text-sealion{
    color: var(--serden-evergreen-light);
}

.btn{
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    color: #fff;
    font-weight: 600;
    border-radius: 50px;
    padding: 10px 30px;
}
.btn.btn-sm{
    padding: 5px 15px;
    font-size: 14px;
    font-weight: 500;
}
.btn-primary{
    background-color: var(--serden-evergreen);
    border-color: var(--serden-evergreen);
}
.btn-primary:hover, :not(.btn-check)+.btn:active{
    background-color: var(--serden-evergreen-light);
    border-color: var(--serden-evergreen-light);
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active, :not(.btn-check) + .btn:active, .btn.disabled, .btn:disabled, fieldset:disabled .btn {
    background-color: var(--serden-evergreen);
    border-color: var(--serden-evergreen);
}

.btn-secondary{
    background-color: var(--serden-evergreen-light);
    border-color: var(--serden-evergreen-light);
}
.btn-secondary:hover, :not(.btn-check)+.btn:active{
    background-color: var(--serden-evergreen);
    border-color: var(--serden-evergreen);
}
.btn.btn-outline-primary{
    padding: 10px 20px;
    border: solid 1px var(--serden-evergreen);
}

.btn-outline-primary:hover, .btn.show.btn-outline-primary{
    background-color: var(--serden-evergreen);
    border-color: var(--serden-evergreen);
    color: #fff;
}
.btn.btn-outline-primary:hover img, .btn-outline-primary:active img, .btn.show.btn-outline-primary img{
    filter: brightness(0) saturate(100%) invert(99%) sepia(67%) saturate(0%) hue-rotate(189deg) brightness(107%) contrast(101%);
}
.form-control{
    border-radius: 20px;
    padding: 8px 25px;
    border: solid 1px var(--serden-evergreen-light);
}
.form-control:focus{
    border: solid 1px var(--serden-evergreen-light);
    box-shadow: none;
}
.form-select {
    border: solid 1px var(--serden-evergreen-light);
    padding: 10px 50px 10px 20px;
    border-radius: 120px;
    background-image: url(../images/dropdown-arrow.svg);
    background-size: 35px;
    margin-right: 20px;
}
.form-check{
    display: inline-block;
}
.form-check-input:checked{
    background-color: var(--serden-evergreen);
    border-color: var(--serden-evergreen);
}
.form-check-input:focus{
    box-shadow: none;
    border-color: var(--serden-evergreen);
}
label{
    font-size: 15px;
    padding-left: 5px;
}

.section-space{
    padding: 70px 0;
}
.section-space-top{
    padding-top: 70px;
}
.section-space-bottom{
    padding-bottom: 70px;
}
.top-section-space{
    padding-top: 170px;
}

.header{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    /* The bar is full-width and transparent around the pill. Clicks in those
       empty regions must reach the page underneath (search modes, estimate
       actions, etc.). */
    pointer-events: none;
}
/* The header is a .container with no width of its own, so it lines up with the footer and the page content
   at every width: 1480px on wide screens (.container above) and 96% at 1440px and below (responsive.css). */
.header-container {
    background-color: var(--serden-evergreen);
    border-radius: 100px;
    padding: 0 40px;
    min-height: 60px;
    margin-top: 35px;
    pointer-events: auto;
}
.navbar .nav-link, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
    color: #fff;
}
.navbar-expand-lg .navbar-nav .nav-link{
    padding: 8px 20px;
}
.main-container{

}
.dropdown-item.active, .dropdown-item:active{
    background-color: var(--serden-evergreen); 
}
.user-dropdown .dropdown-menu{
    right: 0;
    left: auto;
}
.home-video {
    position: relative;
    height: 100vh;
    overflow: hidden;
    color: #fff;
    text-align: center;
}
.home-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translate(-50%, -50%);
    background-size: cover;
}
.home-video .banner-content {
    position: relative;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
}
.home-video::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.2); /* overlay */
    z-index: 1;
    display: none;
}

.discussion-search-section {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
}
.discussion-search-select{
    display: flex;
    
}
.discussion-search-select .form-select{
    border: solid 1px var(--serden-evergreen);
    padding: 20px 50px 20px 30px;
    border-radius: 120px;
    min-width: 350px;
    background-image: none;
    background-size: 35px;
    margin-right: 20px;
}
.discussion-search-select input.form-control{
    border: solid 1px var(--serden-evergreen);
    padding: 20px 50px 20px 30px;
    border-radius: 120px;
    min-width: 350px;
    margin-right: 20px;
}
.discussion-search-section .main-search{
    width: auto;
    margin: 0;
    border: none;
    padding: 0;
    background-color: transparent;
}
.main-search{
    position: relative;
    border: solid 1px var(--serden-evergreen-light);
    padding: 10px 30px 10px 30px;
    border-radius: 120px;
    display: flex;
    align-items: center;
    width: 85%;
    margin: 0 auto;
    background-color: #fff;
}
.main-search .form-control {
    border: none;
    padding: 10px;
    border-radius: 0px;
    flex: 1 1 auto;
    width: auto;
}
.discussion-search-section .form-control {
    border: solid 1px var(--serden-evergreen);
    padding: 20px 50px 20px 30px;
    border-radius: 120px;
}

.main-search .form-control:focus {
    outline: none;
    box-shadow: none;
}

.main-search .main-search-icon {
    z-index: 2;
    display: inline-block;
   width: 40px;
    min-width: 55px;
    height: 55px;
    line-height: 52px;
    text-align: center;
    color: #fff;
    background: var(--serden-evergreen);
    border-radius: 100%;
    border: none;
}
.banner-content h1{
    font-size: 96px;
    position: relative;
    font-weight: 400;
    display: inline-block;
    margin-bottom: 80px;
}
/*.banner-content h1::before{
    content: '';
    position: absolute;
    width: 170px;
    height: 170px;
    background-color: #253B3D;
    border-radius: 100px;
    top: -28px;
    z-index: -1;
    left: 30px;
}*/
.banner-content h1 strong{
    font-weight: 700;
    color: var(--serden-ivory);
}

.top-categories{
    border-top: solid 1px var(--serden-evergreen-light);
}
.top-categories-list{
    display: flex;
    flex-wrap: wrap;
}
.top-categories-box{
    padding: 20px 12px;
    text-align: center;
    flex: 1 1 15%;
    margin: 10px 6px;
}
.top-categories-box p{
    font-size: 16px;
}

.top-categories-icon{
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    justify-content: center;
    background-color: var(--serden-evergreen);
    border-radius: 100%;
    margin-bottom: 20px;
    transition: all 150ms ease-in-out;
}
.top-categories-icon img{
    /* Some icons carry accent-colored strokes; flatten them to white on the evergreen disc. */
    filter: brightness(0) invert(1);
}
.top-categories-box:hover .top-categories-icon{
    top: -5px;
    position: relative;
}

.business-home{
    padding-top: 80px;
    display: flex;
    align-items: center;
}
.business-home h2{
    font-size: 60px;
    color: #fff;
    font-weight: 400;
}
.business-home h2 strong{
    color: var(--serden-ivory);
}
.business-hero{
    text-align: right;
    margin-right: -20px;
    margin-bottom: -30px;
    min-width: 700px;
}
.business-content{
    margin-left: 5%;
}
.business-content .star{
    max-width: 105px;
}

.help-section {
    background-color: var(--serden-sage);
    position: relative;
    overflow: hidden;
    padding: 60px 20px 0;
  }

  .phone-img {
    max-width: 300px;
    width: 100%;
    height: auto;
    z-index: 2;
    position: relative;
  }

  .help-text h2 {
    color: #2f4d49;
    font-weight: 700;
    font-size: 70px;
  }

  .help-text p {
    color: #2f4d49;
    font-size: 25px;
    margin-top: 10px;
    margin-bottom: 20px;
    max-width: 100%;
  }
  .help-image{
    order: 0;
    text-align: right;
  }
  .help-text{
    order: 1;
  }


  .half-circle-wrapper {
    position: absolute;
    top: 55%;
    background-image: url(../images/white-circle.svg);
    min-width: 990px;
    height: 900px;
    z-index: -1;
    background-size: cover;
    left: 70px;
    background-repeat: no-repeat;
  }

  footer{
    background-color: var(--serden-evergreen);
  }
  footer .text-warning{
    color: var(--serden-ivory) !important;
  }
  /* Sign-up validation messages are warnings, not decoration, so they keep an error tone. */
  footer .text-warning.footer-form-error{
    color: var(--serden-error-on-dark) !important;
  }
  .footer-link {
    color: #ccc;
    text-decoration: none;
    
    display: inline-block;
  }
  li .footer-link{
    padding-bottom: 15px;
  }
/* The email sign-up at the top of the footer (EmailSignup.razor). A compact band in the style of the site's other
   evergreen bands (.fpc-band): a small heading and one line of text on the left, the email field on the right, and
   everything stacked and centred on tablets and phones, like the rest of the footer on phones. */
.footer-signup {
    display: flex;
    gap: 20px 48px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0 32px;
    border-bottom: 1px solid rgba(247, 244, 237, .25);
    font-family: "Poppins", sans-serif;
}

.footer-signup__text {
    flex: 1 1 auto;
    max-width: 620px;
}

.footer-signup .footer-signup__kicker {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #CFE3D8;
}

.footer-signup .footer-signup__title {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.footer-signup .footer-signup__lead {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .85);
}

.footer-signup__form {
    flex: 0 1 460px;
    min-width: 0;
    padding-top: 6px;
}

.footer-signup__field {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 5px 5px 5px 20px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 999px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* The field's ring shows keyboard focus, so the input itself needs no outline. */
.footer-signup__field:focus-within {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
}

.footer-signup__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: #fff;
    text-overflow: ellipsis;
}

.footer-signup__input::placeholder {
    color: rgba(255, 255, 255, .75);
    opacity: 1;
}

.footer-signup__input:focus {
    outline: none;
}

.footer-signup__button {
    display: inline-flex;
    flex: none;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--serden-evergreen);
    transition: background-color .15s ease, opacity .15s ease;
}

.footer-signup__button:hover:not(:disabled) {
    background: var(--serden-ivory);
}

.footer-signup__button:focus-visible {
    outline: 3px solid #E2793A;
    outline-offset: 2px;
}

/* Stays off until the security check below the field has passed. */
.footer-signup__button:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.footer-signup .footer-signup__error {
    margin: 8px 0 0 20px;
    font-size: 13.5px;
}

.footer-signup__check {
    display: flex;
    margin-top: 12px;
}

.footer-signup .footer-signup__done {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

@media (max-width: 991.98px) {
    .footer-signup {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .footer-signup__text {
        max-width: none;
    }

    .footer-signup .footer-signup__kicker,
    .footer-signup__check,
    .footer-signup .footer-signup__done {
        justify-content: center;
    }

    .footer-signup__form {
        flex: none;
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
        padding-top: 0;
    }

    .footer-signup .footer-signup__error {
        margin-left: 0;
    }
}

/* On the narrowest phones the button keeps only its arrow, as it had before, so the placeholder fits. Screen readers
   still hear "Subscribe". */
@media (max-width: 479.98px) {
    .footer-signup__button {
        padding: 0 16px;
    }

    .footer-signup__button-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

  .footer-link:hover {
    color: #fff;
    text-decoration: underline;
  }
  
  .footer-socials a:hover {
    color: var(--serden-ivory);
  }
  .footer-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .footer-socialmedia{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-socialmedia a{
    background-color: rgba(255,255,255,0.1);
    width: 35px;
    height: 35px;
    border-radius: 100%;
    text-align: center;
    margin-left: 10px;
    line-height: 32px;
}
.footer-socialmedia a:hover{
    background-color: #1c2324;
}
.footer-logo{
    display: none !important;
}

.page-with-sidebar .sidebar-main-content {
    padding-top: var(--dash-content-top);
}

.rz-notification-success .rz-notification-item {
    color: var(--rz-notification-success-color);
    background-color: var(--serden-evergreen-light)!important;
    
}
.rz-notification-item-wrapper {
    width:270px !important;
    min-width:25rem !important;
}
.navbar-expand-lg .navbar-nav .nav-link.dropdown-toggle::after {
    display: none;
}

/* Tools: show Estimates / Invoices on hover (desktop); clicking "Tools" goes to /membership */
@media (min-width: 992px) {
    .navbar-nav .nav-tools-dropdown {
        position: relative;
    }

    .navbar-nav .nav-tools-dropdown .dropdown-menu {
        margin-top: 0;
    }

    .navbar-nav .nav-tools-dropdown:hover .dropdown-menu,
    .navbar-nav .nav-tools-dropdown:focus-within .dropdown-menu {
        display: block;
    }
}

/* Mobile: show Tools sub-links when the nav drawer is open */
@media (max-width: 991.98px) {
    .navbar-collapse.show .nav-tools-dropdown .dropdown-menu {
        display: block;
        position: static;
        transform: none !important;
        float: none;
        margin-top: 0;
        border: 0;
        padding-left: 1rem;
    }
}

.navbar-collapse .dropdown-menu {
    background-color: var(--serden-evergreen-light);
    padding: 5px 5px;
    min-width: 215px;
}

    .navbar-collapse .dropdown-menu li {
        border-bottom: solid 1px #D9D9D9;
        padding: 10px 5px;
        color:#fff;
    }

        .navbar-collapse .dropdown-menu li:last-child {
            border-bottom: none;
        }

.navbar-collapse .dropdown-item {
    color: #fff;
}

    .navbar-collapse .dropdown-item:focus, .navbar-collapse .dropdown-item:hover {
        background-color: var(--serden-sage);
        border-radius: 20px;
        color: var(--serden-evergreen);
    }

.navbar-nav .nav-serden-plus .nav-link {
    white-space: nowrap;
}

.nav-serden-plus .nav-plus {
    color: #9fd3b4;
    font-weight: 700;
}

/* Features menu: each entry says what it is, so visitors know where a link goes
   before they click it. */
.navbar-collapse .dropdown-menu.nav-feature-menu {
    min-width: 320px;
    padding: 8px;
}

.nav-feature-menu li {
    padding: 0;
}

.nav-feature-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    white-space: normal;
}

.nav-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .12);
    color: var(--serden-ivory);
    font-size: 14px;
}

.nav-feature-menu .dropdown-item:hover .nav-feature-icon,
.nav-feature-menu .dropdown-item:focus .nav-feature-icon {
    background-color: var(--serden-evergreen);
    color: var(--serden-ivory);
}

.nav-feature-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

    .nav-feature-text strong {
        font-size: 15px;
        font-weight: 600;
    }

    .nav-feature-text small {
        font-size: 12.5px;
        opacity: .75;
    }