/*
    Theme Name: Sprig 2020
    Theme URI: https://www.sperlinginteractive.com
    Description:
    Version: 1.0
    Author: Sperling Interactive
    Theme URI: https://www.sperlinginteractive.com
*/


/*------------------------------------*\


\*------------------------------------*/


/* global box-sizing */

*,
*:after,
*:before {
    box-sizing: border-box;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* html element 62.5% font-size for REM use */

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    color: #361E1F;
    font: 400 1.6rem/1.7 'Open Sans', sans-serif;
}


/* clear */

.clear:before,
.clear:after {
    content: ' ';
    display: table;
}

.clear:after {
    clear: both;
}

.clear {
    *zoom: 1;
}

img {
    max-width: 100%;
    vertical-align: bottom;
    height: auto;
}

hr {
    border-top: 1px solid #6A972E;
}

a {
    text-decoration: none;
    color: #245E72;
}

a:hover {
    color: #1C3115;
}

a:focus {
    outline: 0;
}

a:hover,
a:active {
    outline: 0;
}

input:focus {
    border: 1px solid #04A4CC;
    outline: 0;
}

p,
ul,
ol {
    font-size: 1.6rem;
}

h1 {
    font-size: 3.6rem;
    color: #1C3115;
}

h2 {
    font-size: 3.2rem;
}

h3 {
    font-size: 2.8rem;
}

h4 {
    font-size: 2.4rem;
}

h5 {
    font-size: 2.0rem;
}

h6 {
    font-size: 1.6rem;
}

blockquote {
    margin: 25px 0;
    padding: 25px 0 25px 5vw;
    font-style: italic;
    border-top: 1px solid;
    border-bottom: 1px solid;
    font-weight: 700;
}

.small-text {
    font-size: 1.4rem;
}

.small-text p {
    font-size: 1.4rem;
}


/* For setting the different weights we are enqueing*/

.wt-300 {
    font-weight: 300
}

.wt-400 {
    font-weight: 400
}

.wt-900 {
    font-weight: 900
}

.txt-ctr {
    text-align: center;
}

.button {
    background-color: #6A972E;
    border-radius: 33px;
    font-size: 1.8rem;
    padding: .5em 1.5em;
    display: inline-block;
    color: white;
    transition: background .3s ease-in-out;
    border: 0;
    cursor: pointer;
}

.button[data-disabled=true] {
    opacity: .5;
    cursor: not-allowed;
}

.button[data-disabled=true]:hover {
    background-color: #6A972E;
}

.button:hover {
    background-color: #44621e;
    color: white;
}

.button i {
    padding-left: 1em;
}

.button.small {
    padding: 4px 15px;
    font-size: 1.5rem;
}

.button.dark {
    background-color: #1C3115;
}

.button.dark:hover {
    background-color: #0e1a0a;
}

.button.altcolor {
    background-color: #245E72;
}

.button.altcolor:hover {
    background-color: #18404e;
}

img.concept-board-logo {
    width: 100px;
}

.button.full {
    width: 100%;
}

.button.complete {
    background-color: #771111;
}

small * {
    font-size: 80%;
}


/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

#page-container {
    display: flex;
    flex-grow: 1;
    position: relative
}

main {
    padding-bottom: 80px;
}

#main {
    transition: margin-right.5s;
    /* If you want a transition effect */
    flex: 1 1 auto;
    min-height: 100vh;
}


/* wrapper */

.wrapper {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.container {
    max-width: 1280px;
    align-self: center;
    flex: 1 auto;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 2rem;
}

.container-thin {
    max-width: 1010px;
    align-self: center;
    flex: 1 auto;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 2rem;
}

.container-ultra-thin {
    max-width: 800px;
    align-self: center;
    flex: 1 auto;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 2rem;
}

.standard-section {
    margin-top: 60px;
}


/* header */

.header {}

img.no-session-logo {
    height: 80px !important;
}

.logo {
    display: flex;
    align-items: center;
    padding: 15px 0;
}

.logo-welcome {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px 0;
}

.logo-img {
    backface-visibility: hidden;
    max-height: 70px;
    border-right: solid 1px black;
    padding-right: 10px;
}

.logo-sprig-img {
    backface-visibility: hidden;
    max-height: 25px;
    padding-left: 10px;
}

.logo-hero-img {
    backface-visibility: hidden;
    /*height: 80px;*/
    /* max-width: 315px; */
    max-height: 100px;
}

.header-project-info {
    background: #1C3115;
    min-height: 25px;
    color: #FFFFFF;
}

p.project-breadcrumbs a {
    color: white;
    font-weight: bold;
}

p.project-breadcrumbs i {
    padding: 0 10px;
}

.header-project-info p {
    /* height: 100%; */
    margin: 0;
    padding: 5px 0;
    flex: 1 1 auto;
    position: relative;
}

.header-project-info .project-breadcrumbs {
    padding-right: 5px;
}

.header-project-info .info-right {
    padding-left: 5px;
    padding-right: 0;
}

.header-project-info .info-right:before {
    content: '';
    position: absolute;
    left: 0;
    background: #6A972E;
    height: 100%;
    right: -100vw;
    overflow: hidden;
    top: 0;
    bottom: 0;
}

.header-project-info .container {
    display: flex;
    justify-content: space-between;
}

.menu-area {
    margin-bottom: 0 !important;
}


/* -- NAV -- */


/* setup */

.nav {
    padding: 10px 20px 10px 0;
    font-family: 'Cabin', sans-serif;
    flex: 0 1 auto;
}

.nav ul {
    padding: 0;
    list-style-type: none;
    margin: 0;
}

.nav li {
    display: inline-block;
    position: relative;
}

.nav a {
    color: #000000;
    padding: 0 15px;
    font-size: 1.8rem;
    letter-spacing: 1px;
}

.nav #search-button {
    color: #000000;
}


/*
.nav a:hover {
    opacity: 0.7;
}
*/

.nav li:hover ul.sub-menu {
    /* display: block; */
    /* animation */
    visibility: visible;
    opacity: 1;
    filter: alpha(opacity=100);
}

.nav li ul.sub-menu ul.sub-menu {
    /* display: none; */
    left: 149%;
    top: 0;
}

.nav li:hover ul.sub-menu ul.sub-menu {
    /* display: none; */
    left: 149%;
    top: 0;
    /* animation */
    position: absolute;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
}

.nav ul.sub-menu li:hover ul.sub-menu {
    /* display: block; */
    left: 149%;
    top: 0;
    /* animation */
    visibility: visible;
    opacity: 1;
    filter: alpha(opacity=100);
}

ul.sub-menu {
    background: #FFF;
    border-radius: 4px;
    width: 225px;
    text-align: left;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 1.4rem;
    /* display: none; */
    z-index: 100;
    -webkit-box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.23);
    box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.23);
    border-bottom: solid 5px #243F70;
    /* animation */
    position: absolute;
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: 300ms ease;
    -moz-transition: 300ms ease;
    -o-transition: 300ms ease;
    transition: 300ms ease;
}

.sub-menu li {
    padding: 5px;
}

.sub-menu a {
    font-size: 1.6rem;
    font-weight: normal;
    color: #000000;
}

.sub-menu a:hover {
    font-size: 1.6rem;
    font-weight: normal;
    color: #243F70;
}

ul.sub-menu a {
    display: block;
    padding: 10px;
}

ul.sub-menu li {
    display: block;
}

.nav .social {
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
}

.nav .social .social-inner {
    border: solid 1px #000000;
    border-right: 0;
    padding: 7px;
    display: flex;
    align-items: center;
}

.nav .social .newsletter-nav {
    border: solid 1px #000000;
    padding: 7px;
    font-size: 16px;
}

.nav .social .fab {
    padding: 0;
    font-size: 17px;
    width: 40px;
    text-align: center;
    text-decoration: none;
    color: #000000;
}

.nav .social .fab:hover {
    opacity: 0.7;
}

.nav .social .nav-newsletter {
    font-size: 16px;
    font-weight: normal;
}


/* animated lines */

.nav>ul>li>a {
    font-size: 13px;
    text-decoration: none;
    color: #FFFFFF;
    padding: 10px 20px;
    margin: 0px 10px;
    display: inline-block;
    position: relative;
    opacity: 1;
    background-color: #1C3115;
    border-radius: 30px;
    transition: background .3s ease-in-out;
}

.nav>ul>li>a:hover {
    background-color: #0e1a0a;
}

.nav>ul>li>a i {
    margin-left: 1em;
}


/* specific nav items */

.nav>ul>.menu-item-357>a {
    background-color: #6A972E;
}

.nav>ul>.menu-item-357>a:hover {
    background-color: #44621e;
}

.menu-item-357 {
    padding-left: 10px;
    border-left: solid 1px #1C3115;
}

.menu-item-356 {
    padding-right: 5px;
}


/*.nav>ul>li>a::before {
    transition: 300ms;
    height: 1px;
    content: "";
    position: absolute;
    background-color: #243F70;
}

.nav>ul>li>a::before {
    width: 0%;
    bottom: 10px;
}

.nav>ul>li>a:hover::before {
    width: 100%;
}*/


/* current item handling */


/*.nav>ul>.current-menu-item>a,
.nav>ul>.current-menu-parent>a {
    background-color: #44621e;
}

.sub-menu>.current-menu-item>a,
.sub-menu>.current-menu-parent>a {
    font-size: 1.6rem;
    font-weight: normal;
    color: #243F70;
}*/


/* sidebar */

.sidebar {}


/* footer */

.footer {
    background: #6A972E;
    padding: 20px;
    color: white;
    margin-top: auto;
}

.footer a {
    color: white;
}

.footer p {
    margin: 0
}

.pagination {
    font-size: 1.6rem;
}


/*------------------------------------*\
    HOME
\*------------------------------------*/

.sprig-home-top {
    background-size: cover;
    background-position: center;
    color: white;
    background-color: rgba(28, 49, 21, .4);
    background-blend-mode: multiply;
}

.sprig-home-top .columns {
    height: 100%;
    align-items: flex-end;
}

.welcome-box {
    text-align: center;
    /*min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;*/
    padding: 50px 0;
}

.welcome-box h1 {
    color: white;
}

.welcome-box .button {
    margin: 10px;
}

p.welcome-box-powered-by {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

p.welcome-box-powered-by img {
    max-width: 50px;
    padding-left: 10px;
}

p.footer-box-powered-by img {
    max-width: 62px;
    padding-left: 10px;
}

p.footer-box-powered-by {
    display: flex;
    align-items: baseline;
    font-size: 2rem;
    width: 200px;
}

.process-box {
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 9px;
    padding: 20px;
    height: 100%;
}

.process-box h3 {
    margin: 15px 0;
}

.process-box p {
    margin-bottom: 0;
}

.icon-circle {
    background: #6A972E;
    color: white;
    font-size: 4rem;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.purchase-banner {
    padding: 50px 20px;
    background-size: cover;
    background-position: center;
    color: white;
    background-color: rgba(28, 49, 21, .59);
    background-blend-mode: multiply;
    text-align: center;
}

.purchase-banner p {
    font-size: 2rem;
}

.purchase-banner .txt-ctr p {
    margin: 0
}

p.instagram-header {
    margin: 0;
    padding-left: 20px;
    font-size: 2.5rem;
}

section.instagram-feed {
    margin: 50px 0;
}


/*------------------------------------*\
    PAGES
\*------------------------------------*/


/* Common */

#confirmation-message .success {
    background-color: #eaf4dc;
    padding: 10px;
    border: solid 1px #6A972E;
    border-radius: 4px;
    color: #6A972E;
    margin: 20px 0;
}

#confirmation-message .fail {
    background-color: #f4dcdc;
    padding: 10px;
    border: solid 1px #972e2e;
    border-radius: 4px;
    color: #972e2e;
    margin: 20px 0;
}

#confirmation-message .fail-header {
    background-color: #972e2e;
    padding: 10px;
    border: solid 1px #972e2e;
    border-radius: 4px;
    color: #f4dcdc;
    margin: 20px 0;
}

.success-message,
.landscape-form div#message.updated {
    background-color: #eaf4dc;
    padding: 10px;
    border: solid 1px #6A972E;
    border-radius: 4px;
    color: #6A972E;
    margin: 20px 0;
}


/* Login */

.login-username label,
.login-password label {
    display: block;
}

.login-username input,
.login-password input {
    cursor: auto;
    width: 100%;
    height: 45px;
    padding: 10px;
    border: 0;
    border-radius: 4px;
    filter: none;
}

.login-bg {
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.login-panel {
    width: 620px;
    background-color: rgba(28, 49, 21, .69);
    padding: 30px 60px;
    border-radius: 15px;
}

.login-panel a {
    color: white;
}

.login-panel .logo-hero-img {
    display: block;
    margin: 0 auto;
}


/*.login-remember {
    float: right;
}

.lost-password {
    float: left;
}

.login-submit {
    clear: both;
}*/

.login-submit .button {
    width: 100%;
}

.login-box-powered-by {
    display: flex;
    align-items: baseline;
    font-size: 2rem;
    width: 100%;
    justify-content: center;
}

p.login-box-powered-by img {
    max-width: 62px;
    padding-left: 10px;
}

.login main {
    padding-bottom: 0 !important;
}


/* Lost Password */

#lostpasswordform label {
    display: block;
    font-weight: bold;
}

#lostpasswordform #user_login {
    cursor: auto;
    width: 100%;
    height: 45px;
    padding: 10px;
    border: 0;
    border-radius: 4px;
    filter: none;
}

#password-lost-form .lost-form-info {
    text-align: center;
}

#lostpasswordform .lostpassword-button {
    width: 100%;
}


/* Dashboard */

#my-projects,
#other-projects {
    display: none;
}

.dashboard-user-nameplate {
    display: flex;
    align-items: center;
}

.dashboard-user-nameplate .chat-user-icon {
    margin-right: 10px;
}

.customer-nameplates {
    height: 100%;
}

.designer-nameplates .dashboard-user-nameplate:not(:last-child) {
    margin-bottom: 10px;
    border-bottom: solid rgba(255, 255, 255, 0.3) 1px;
    padding-bottom: 10px;
}

.project-list-single a {
    color: #000000;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    height: 100%;
    flex-direction: column;
    display: flex;
    justify-content: space-between;
}

.project-list-single p {
    margin: 0;
}

.project-list-single .accent-background {
    display: flex;
    justify-content: space-between;
}

.project-list-single .accent-background p {
    flex: 0 1 auto;
}

.project-list-single .accent-background i {
    color: #6A972E;
    font-size: 2rem;
}

.project-list-single-main {
    min-height: 150px;
}

.project-list-single .project-price {
    font-weight: 900;
    font-size: 3rem;
    color: #6A972E;
}

section.project-user-meta {
    margin: 30px 0;
}

section.project-user-meta p {
    margin: 0;
    font-weight: 700;
    color: #1C3115;
}

section.project-user-meta p+p {
    font-weight: 400;
    color: #707070
}


/* Project Timeline */

.project-timeline-item {
    width: calc(50% - 7px);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    background-color: white;
}

.product-complete-row .project-timeline-item {
    width: 100%;
    float: none;
}

.product-complete-row {
    text-align: center;
}

.product-complete-row .accent-background {
    background-color: #771111
}

.product-complete-row .project-timeline-item .project-timeline-item-info {
    display: block;
}

.project-timeline-item p {
    margin: 0;
}

.project-timeline-item a {
    color: #000000;
    display: block;
    cursor: pointer;
}

.project-timeline-item .accent-background,
.project-timeline-item .accent-background-2 {
    color: #FFFFFF;
}

.project-timeline-item-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-timeline-item-info i {
    color: #6A972E;
    font-size: 2rem;
}

.project-timeline-item-info a {
    color: #245E72;
    font-weight: 600;
}

.project-complete {
    background: #1C3115;
    padding: 10px;
    font-weight: 700;
    color: white;
    margin-top: 20px;
}

.project-complete p {
    margin: 0;
    font-size: 2rem;
}

.project-timeline-row {
    content: "";
    display: table;
    clear: both;
    width: 100%;
    padding: 10px;
}

.project-timeline-row.current {
    background-color: rgba(172, 173, 33, 0.3);
}

.project-timeline-row.inactive .project-timeline-item {
    background-color: #efefef;
}

.project-timeline-row.inactive .project-timeline-item i {
    display: none;
}

.project-timeline-row.inactive p {
    color: #909090;
}

.project-timeline-row .pti-l {
    float: left;
}

.project-timeline-row .pti-r {
    float: right;
}

.project-timeline-row .pti-l .accent-background,
.customer-nameplates {
    background-color: #6A972E;
}

.project-timeline-row .pti-r .accent-background,
.designer-nameplates {
    background-color: #1C3115;
}

.project-timeline-row.inactive .accent-background {
    background-color: transparent;
}
body.our-services .shadow-box p.m0 {
    display:none;
    }


@media only screen and (max-width:768px) {
    .project-timeline-item {
        width: 80%;
    }
}


/* Our Services */

.edit-serivce-box-links {
    text-align: right;
}

.edit-serivce-box-links a {
    color: #6A972E;
}

.edit-serivce-box-links a+a {
    color: #d33333;
}


/* Chat */


/* The sidebar menu */

.chat-sidebar {
    width: 0;
    /* 0 width - change this with JavaScript */
    z-index: 10;
    /* Stay on top */
    background-color: #d4e0c3;
    overflow-x: hidden;
    /* Disable horizontal scroll */
    transition: 0.5s;
    flex-shrink: 0;
    overflow-x: visible;
    position: relative;
    /* 0.5 second transition effect to slide in the sidebar */
}


/* The sidebar links */

.chat-sidebar a.button {
    font-size: 1.4rem;
}

.chat-sidebar.open {
    width: 400px;
    max-width: calc(100% - 40px);
    height: 100%;
}

.chat-btn-container {
    height: 0;
    /*display: flex;
    justify-content: flex-end;*/
    overflow: visible;
    margin-left: -40px;
}


/* The button used to open the sidebar */

.openbtn {
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    background-color: #d4e0c3;
    color: #6A972E;
    padding: 10px;
    border: none;
    height: 130px;
    width: 40px;
    border-radius: 10px 0 0 10px;
    z-index: 0;
}

.openbtn p {
    font-size: 1.5rem;
    white-space: nowrap;
    margin-top: 100px;
    padding: 0;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
}

.openbtn:hover {
    background-color: #6A972E;
    color: #FFFFFF;
}

.openbtn.new-message {
    animation: blinkingBtn 2s infinite;
}

@keyframes blinkingBtn {
    0% {
        background-color: #d4e0c3;
        color: #6A972E;
    }
    50% {
        background-color: #6A972E;
        color: #FFFFFF;
    }
    100% {
        background-color: #d4e0c3;
        color: #6A972E;
    }
}


/* The sticky class is added to the header with JS when it reaches its scroll position */

.sticky {
    position: fixed;
    top: 0;
    right: 0;
}

#sticky.stick {
    position: fixed;
    top: 0;
    z-index: 10;
    /*border-radius: 0 0 0.5em 0.5em;*/
}

#openbtn.stick {
    position: fixed;
    top: 0;
    z-index: 10;
    /*border-radius: 0 0 0.5em 0.5em;*/
}

.chat-flex-wrapper {
    width: 400px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    /*height: 100vh;*/
    /* justify-content: flex-end; */
    justify-content: flex-start;
    max-height: 100vh !important;
}

.chat-flex-wrapper.stick {
    max-width: calc(100% - 40px);
}

.chat-bubble {
    padding: 15px;
    background: white;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 1.3rem;
    color: #361E1F;
    width: 305px;
    max-width: 100%;
}

.chat-bubble-header {
    display: flex;
    width: 100%;
}

#scrollchat {
    overflow-y: scroll;
    background-color: #d4e0c3;
    padding: 20px;
    height: calc(100vh - 209px);
}

.chat-bubble p {
    font-size: 1.3rem;
}

.chat-bubble-l {
    margin-right: 15%;
}

.chat-bubble-r {
    margin-left: 15%;
}

.chat-bubble-r .chat-bubble-header {
    flex-direction: row-reverse;
}

.chat-user-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    position: relative;
}

.chat-user-icon:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #95A2A5;
}

.chat-user-icon.active:before {
    background: #3bc16f;
}

.chat-user-icon img {
    border-radius: 50%;
}

.chat-bubble-user-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.chat-bubble-user-info-l {
    margin-right: 10px;
}

.chat-bubble-user-info-r {
    text-align: right;
}

.chat-bubble-l .chat-user-icon {
    margin-right: 10px;
}

.chat-bubble-r .chat-user-icon {
    margin-left: 10px;
}

.chat-bubble-message {
    color: #737373;
    margin-top: 0;
}

.chat-alert {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
}

.chat-alert-btn {
    background-color: #6A972E;
    display: inline-block;
    padding: 5px 15px;
    color: #FFFFFF;
    border-radius: 10px;
    font-size: 1.3rem;
    text-align: center;
    line-height: 1.5;
    font-weight: bold;
    width: 288px;
    max-width: 80%;
}

.chat-alert-btn span {
    font-size: 1.2rem;
    font-weight: normal;
}

.chat-alert:before,
.chat-alert:after {
    content: '';
    border-top: 1px solid #737373;
    margin: 0;
    flex: 1 0 auto;
}

.chat-alert:after {
    margin: 0;
}

.chat-message-area-wrapper {
    flex: 0 0 auto;
    width: 100%;
}

.chat-message-area {
    width: 100%;
    background-color: #bdcaaa;
}

.chat-message-area textarea {
    display: block;
    margin-bottom: 20px;
    width: 100%;
}

.chat-message-area .button {
    font-size: 1.4rem;
}

.chat-message-area .button[disabled] {
    opacity: .7;
}


/*------------------------------------*\
QUESTIONNAIRE
\*------------------------------------*/


/* views */

.static-view #questionnaire-sidebar {
    display: none !important;
}

.static-view #user-view-content {
    display: none !important;
}

#page-container:not(.static-view) .la-view {
    display: none !important;
}


/* main questionnaire stuff */

#questionnaire-section {
    padding-bottom: 60px;
}

.main-tab-container {
    margin-bottom: 30px;
}

.flex-page-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#questionnaire-sidebar {
    display: flex;
    width: 450px;
    background-color: #6A972E;
    flex-shrink: 0;
}

#questionnaire-sidebar h5 {
    padding: 30px;
    border-bottom: solid white 1px;
    margin: 0;
}

.q-sidebar-l .question-panel {
    border-bottom: solid white 1px;
}

.q-sidebar-l .question-panel p {
    color: #FFFFFF;
    font-weight: bold;
    margin: 0;
    font-size: 1.5rem;
}

.q-sidebar-l .question-panel a {
    padding: 40px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.q-sidebar-l .question-panel a.complete:after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Pro';
    margin-left: 10px;
    font-size: 28px;
    color: #FFFFFF;
}

.q-sidebar-l .question-panel a:hover,
.q-sidebar-l .question-panel a:not(.inactive) {
    background-color: #81a65c;
}

.q-sidebar-r .question-panel p {
    font-size: 1.1rem;
    color: white;
    line-height: 1.25;
}

.q-sidebar-r .question-panel a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    cursor: pointer;
}

.q-sidebar-r .question-panel a:hover,
.q-sidebar-r .question-panel a:not(.inactive) {
    background-color: rgba(255, 255, 255, 0.2);
}

.q-sidebar-r .question-panel a.complete:after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Pro';
    color: #6A972E;
    font-size: 1.6rem;
    margin-left: 5px;
}

.q-sidebar-l {
    width: 70%;
}

.q-sidebar-r {
    width: 30%;
    background-color: #1C3115;
}

.msg {
    display: block;
    color: #000 !important;
    background-color: #ffdddd !important;
    border-left: 6px solid #f44336 !important;
    margin: 16px auto;
    padding: 1em 16px;
}

.print-btn {
    flex: 0 0 auto;
}

.questionnaire-title-area {
    justify-content: space-between;
    border-bottom: solid 1px #dadada;
}


/* Sticky Save */

#sticky-save {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
    z-index: 9;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.23);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.23);
    padding: 10px 0;
}

.savebutton {
    cursor: pointer;
}


/* Landscape Architect View */

#questionnaire-answers-container {
    padding-bottom: 90vh;
}

.answer-output {
    display: flex;
    justify-content: space-between;
    color: #707070;
    margin-bottom: 20px;
}

.answer-output .la-a {
    font-weight: bold;
    color: #6A972E;
    flex: 0 0 25%;
    text-align: right;
}

.answer-output.answer-output-textarea {
    display: block;
}

.answer-output.answer-output-textarea .la-a {
    padding: 15px;
    background: #efefef;
    text-align: left;
}

.la-view {
    display: block;
}

.la-questionnaire-view h3 {
    font-size: 2rem;
    border-bottom: solid 1px #dadada;
}

.la-answer-header.complete:after {
    content: '(Complete)';
    color: #6A972E;
    display: block;
    font-style: italic;
}

.la-answer-header:not(.complete):after {
    content: '(Incomplete)';
    color: #bb2b2b;
    display: block;
    font-style: italic;
}

.la-questionnaire-view h4 {
    font-size: 1.6rem;
    margin-bottom: 20px;
}

#la-questionnaire-sidebar ul {
    list-style-type: none;
    /*padding-left: 20px;*/
    padding: 20px;
    border-right: solid 1px black;
}

#la-questionnaire-sidebar li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px
}

#la-questionnaire-sidebar li.active:before {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Font Awesome 5 Pro";
    content: "\f0da";
    color: #6A972E;
    font-size: 22px;
    line-height: 30px;
}

#la-questionnaire-sidebar li a {
    color: #361E1F;
    font-weight: 600;
}

#la-questionnaire-sidebar li.active a,
#la-questionnaire-sidebar li a:hover {
    color: black;
}

.fixed {
    position: fixed;
    top: 0;
}


/*------------------------------------*\
    FORMS
\*------------------------------------*/

input.button[disabled] {
    opacity: .3;
}

p.processing-files {
    color: red !important;
}

p.processing-files.complete {
    color: #6A972E !important;
}

.question-section-title {
    font-weight: bold;
    font-size: 2.3rem;
    margin-bottom: 10px;
    color: #ACACAC;
}

.question-single-title {
    font-size: 2.2rem;
    margin-top: 0;
}

.inline-choice {
    display: inline-block;
    margin-right: 15px;
}


/* Customize the label (the container) */

.sperling-form .radio-container {
    display: inline-block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-right: 15px;
}


/* Hide the browser's default radio button */

.sperling-form .radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


/* Create a custom radio button */

.sperling-form .radio-container .checkmark {
    position: absolute;
    top: 6px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}


/* On mouse-over, add a grey background color */

.sperling-form .radio-container:hover input~.checkmark {
    background-color: #ccc;
}


/* When the radio button is checked, add a blue background */

.sperling-form .radio-container input:checked~.checkmark {
    background-color: #2196F3;
}


/* Create the indicator (the dot/circle - hidden when not checked) */

.sperling-form .radio-container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the indicator (dot/circle) when checked */

.sperling-form .radio-container input:checked~.checkmark:after {
    display: block;
}


/* Style the indicator (dot/circle) */

.sperling-form .radio-container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.sperling-form input[type=text] {
    width: 100%;
    max-width: 400px;
    padding: 10px 18px;
    margin: 8px 0;
    box-sizing: border-box;
    border-radius: 30px;
    border: solid black 1px;
    display: block;
}

.sperling-form textarea {
    width: 100%;
    max-width: 700px;
    height: 300px;
    padding: 10px 18px;
    margin: 8px 0;
    box-sizing: border-box;
    border-radius: 10px;
    border: solid black 1px;
    display: block;
    resize: none;
}

.sperling-form .question-answer-card {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    height: 100%;
}

.sperling-form .question-answer-card .checkmark {
    top: 21px;
    left: 15px;
}

.sperling-form .question-answer-card label {
    margin: 0;
    padding: 15px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

label.radio-container {
    cursor: pointer
}

.sperling-form .question-answer-card .faux-label {
    padding-left: 35px;
}

.sperling-form .question-answer-card .question-answer-subtext {
    margin-top: 5px;
    line-height: 1.4;
    color: #ACACAC;
}

.sperling-form .question-answer-card img {
    width: 100%;
    height: auto;
    margin-top: auto;
}


/*Select */

.sperling-form select {
    display: block;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 700;
    color: #444;
    line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    width: 100%;
    max-width: 100%;
    /* useful when width is set to anything other than 100% */
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
    border-radius: .5em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient.
        for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference

    */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right .7em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: .65em auto, 100%;
}


/* Hide arrow icon in IE browsers */

.sperling-form select::-ms-expand {
    display: none;
}


/* Hover style */

.sperling-form select:hover {
    border-color: #888;
}


/* Focus style */

.sperling-form select:focus {
    border-color: #aaa;
    /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222;
    outline: none;
}


/* Set options to normal weight */

.sperling-form select option {
    font-weight: normal;
}


/* Support for rtl text, explicit support for Arabic and Hebrew */

*[dir="rtl"] .sperling-form select,
:root:lang(ar) .sperling-form select,
:root:lang(iw) .sperling-form select {
    background-position: left .7em top 50%, 0 0;
    padding: .6em .8em .5em 1.4em;
}


/* Disabled styles */

.sperling-form select:disabled,
.sperling-form select[aria-disabled=true] {
    color: graytext;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
}

.sperling-form select:disabled:hover,
.sperling-form select[aria-disabled=true] {
    border-color: #aaa;
}


/* Customize the label (the container) */

.container-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Hide the browser's default checkbox */

.container-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


/* Create a custom checkbox */

.container-checkbox .checkmark {
    position: absolute;
    top: 6px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}


/* On mouse-over, add a grey background color */

.container-checkbox:hover input~.checkmark {
    background-color: #ccc;
}


/* When the checkbox is checked, add a blue background */

.container-checkbox input:checked~.checkmark {
    background-color: #2196F3;
}


/* Create the checkmark/indicator (hidden when not checked) */

.container-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the checkmark when checked */

.container-checkbox input:checked~.checkmark:after {
    display: block;
}


/* Style the checkmark/indicator */

.container-checkbox .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.next-btn,
.prev-btn {
    cursor: pointer;
    margin-right: 10px;
    margin-bottom: 10px;
}

.next-btn:after {
    content: '\f054';
    font-family: 'Font Awesome 5 Pro';
    margin-left: 1em;
}

.prev-btn:before {
    content: '\f053';
    font-family: 'Font Awesome 5 Pro';
    margin-right: 1em;
}


/*------------------------------------*\
    ACF GOOGLE MAP
\*------------------------------------*/

.acf-map {
    width: 100%;
    height: 100%;
    min-height: 400px;
    max-height: 600px;
    border: #ccc solid 1px;
    margin: 20px 0;
}


/* Fixes potential theme css conflict. */

.acf-map img {
    max-width: inherit !important;
}


/*------------------------------------*\
    WOOCOMMERCE OVERRIDES
\*------------------------------------*/

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce form .form-row .woocommerce-input-wrapper .description {
    background-color: #6A972E;
}

.woocommerce form .form-row .woocommerce-input-wrapper .description::before {
    border-color: #6A972E transparent transparent transparent;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background-color: #44621e;
}

nav.woocommerce-MyAccount-navigation {
    background: #6A972E;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
}

nav.woocommerce-MyAccount-navigation a {
    color: white;
    display: block;
    padding: 5px;
}

nav.woocommerce-MyAccount-navigation a:hover {
    opacity: .8;
}

nav.woocommerce-MyAccount-navigation ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav.woocommerce-MyAccount-navigation li:not(:last-child) {
    border-bottom: 1px solid #ffffff57;
}

.woocommerce-account p#billing_email_field,
a.button.wc-backward {
    display: none !important;
}

.wc-stripe-elements-field {
    min-height: 30px !important;
}

/* .single-product main,
.post-type-archive-product main {
    max-width: 1280px;
    margin: 0 auto;
} */


/*------------------------------------*\
    CONCEPT BOARDS
\*------------------------------------*/

section#filters.sperling-form .radio-container {
    font-size: 1.6rem;
    line-height: 2.2;
    margin-bottom: 0;
}

.lab {
    opacity: .6;
    cursor: pointer;
    display: block;
    color: #1C3115;
    position: relative;
    height: auto
}

.lab:hover {
    opacity: .8;
}

.lab.active {
    opacity: 1;
}

.lab p {
    margin: 0;
    color: #1C3115;
}

p.lab-title {
    background: #1C3115;
    color: white;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    margin: 0;
}

span.expand-lab {
    background: #1C3115;
    color: white;
    display: block;
    text-align: center;
    border-radius: 0 0 10px 10px;
}

.rotate180 {
    transform: rotateZ(180deg);
}

.lab .expandable {
    height: 140px;
    overflow: hidden;
    transition: all .3s ease-in-out;
}

.lab .expandable.open {
    height: 100%;
}

.exposure-box {
    display: flex;
    justify-content: space-between;
    background: #E2E9D7;
    padding: 10px;
}

ul.lab-product-rows {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul.lab-product-rows li {
    padding: 10px 0;
    border-bottom: 1px solid #6A972E;
    display: flex;
    justify-content: space-between;
}

.product-cat-filter {
    text-align: center;
    font-weight: 700;
    padding: 20px;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    color: #1C3115;
    border: 1px solid #d4e0c3;
}

.product-cat-filter svg {
    height: 40px;
    width: 40px;
    fill: #1C3115
}

.product-cat-filter p {
    margin: 0;
}

.product-cat-filter:hover {
    background: rgba(212, 224, 195, .6);
    color: rgba(106, 151, 46, .6);
}

.product-cat-filter.active {
    background: #d4e0c3;
    color: #6A972E;
}

.product-cat-filter:hover svg {
    fill: rgba(106, 151, 46, .6);
}

.product-cat-filter.active svg {
    fill: #6A972E;
}


/* .product-cat-wrapper {
    display: none;
} */

.product-cat-wrapper.active {
    display: block;
}

h2.product-selection-subcat {
    color: #1C3115;
    border-bottom: 5px solid;
    margin-bottom: 0;
}

.product-selection-box input[type="checkbox"] {
    position: absolute;
    top: 10px;
    left: 10px;
}

.product-selection-box {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-selection-box img {
    border-radius: 10px 10px 0 0;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.product-selection-box p.product-name {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: #1C3115;
}

.product-selection-box p.product-price {
    margin: 0;
    color: #ACACAC;
}

.product-meta {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0 0 10px 10px;
}

.product-meta a {
    font-size: 1.2rem;
}

.zone-products {
    display: none
}

.zone-products.active {
    display: block
}

.product-selection-loader {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, .8);
    z-index: 999999999999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.product-selection-loader i,
.loading-product-info i {
    font-size: 4rem;
    color: #6A972E;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
}

.loading-product-info i {
    color: white
}

@keyframes spin {
    0% {
        transform: rotateZ(0);
    }
    100% {
        transform: rotateZ(360deg);
    }
}

[data-filter-item].hidden {
    display: none;
}


/* Create a custom checkbox */

.product-selection-box .checkmark {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: 1px solid #b5b4b4;
}


/* On mouse-over, add a grey background color */

.product-selection-box img:hover~input~.checkmark {
    background-color: #ccc;
}


/* When the checkbox is checked, add a blue background */

.product-selection-box input:checked~.checkmark {
    background-color: #2196F3;
}


/* Create the checkmark/indicator (hidden when not checked) */

.product-selection-box .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.product-selection-box .product-image {
    position: relative;
}

.product-selection-box[data-recommended="true"] .product-image:after {
    content: 'Recommended';
    left: 0;
    padding: 5px;
    font-weight: 600;
    right: 0;
    position: absolute;
    bottom: 0;
    background: #bfb107;
    text-align: center;
    color: white;
}


/* Show the checkmark when checked */

.product-selection-box input:checked~.checkmark:after {
    display: block;
}


/* Style the checkmark/indicator */

.product-selection-box .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.product-info-modal-wrap {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    display: none;
    background: rgba(0, 0, 0, .8);
    backdrop-filter: blur(8px);
}

.product-info-modal {
    overflow: scroll;
    width: 100%;
    max-width: 1280px;
    background: #1C3115;
    color: white;
    border-radius: 20px;
    position: relative;
    height: 80vh;
}

.product-modal-slider .slick-slide {
    position: relative;
}

.product-modal-slider-wrap,
.product-modal-slider.slick-dotted.slick-slider,
.product-modal-slider-wrap .modal-slide,
.product-modal-slider-wrap .slick-list,
.product-modal-slider-wrap .slick-track,
.product-modal-slider-wrap .product-modal-slider .slick-slide {
    min-height: 400px;
}

.modal-slide {
    /* background-size: cover; */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.product-info-modal>.columns>.column+.column {
    padding-left: 20px !important;
}

.product-modal-info .columns:first-child {
    max-width: 99%;
}

p.modal-latin {
    font-size: 1.4rem;
}

p.modal-recommended {
    margin: 0;
    background: #bfb107;
    display: inline-block;
    padding: 10px;
    text-align: center;
    font-style: italic;
    font-size: 1.4rem;
    position: relative;
    z-index: 9999;
}

span.modal-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 10px;
    background: #6A972E;
}

.product-modal-info {
    padding: 20px;
}

.close-modal-wrap {
    position: relative;
    padding-top: 45px;
    width: 95%;
    max-width: 1280px;
}

span.close-modal {
    font-size: 2rem;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    z-index: 9999;
    color: white;
    padding: 5px 10px;
}

span.close-modal:hover {
    opacity: .6
}

.product-modal-slider {
    border-radius: 20px 20px 0 0;
    overflow: hidden
}

.product-modal-slider.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.product-modal-slider .slick-dots {
    position: absolute;
    bottom: 20px;
    z-index: 1;
}

.product-modal-slider .slick-dots li button:before,
.slick-dots li.slick-active button:before {
    color: #6A972E;
    font-size: 2rem;
    opacity: .5
}

.product-modal-slider .slick-dots li.slick-active button:before {
    opacity: 1
}

.product-modal-slider .slick-slide img {
    border-radius: 20px 20px 0 0
}

.loading-product-info {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.open-related {
    color: white;
}

.open-related:hover {
    color: white
}


/* confirm step area */

.confirm-step-wrapper {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.46);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.46);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.46);
    border-radius: 10px;
    padding: 10px;
}

.confirm-step-wrapper label {
    font-size: 1.4rem;
    margin-bottom: 0;
}

.confirm-step-wrapper .checkmark {
    top: 0;
}

.confirm-step-wrapper .confirm-button-column {
    flex-grow: 0;
}


/*------------------------------------*\
    SHOPPING LIST
\*------------------------------------*/


/* .responsive-table.shopping-list {
    margin-top: 50px;
} */

.responsive-table.shopping-list thead th:first-of-type {
    background: #1C3115;
    border-right: 5px solid white;
    color: white;
}

.responsive-table.shopping-list thead th:not(:first-of-type) {
    background: #6A972E;
    border-left: 0;
    border-right: 0;
    color: white;
}

.responsive-table.shopping-list tbody td {
    background: white
}

.responsive-table.shopping-list caption {
    background: #1C3115;
    padding: 10px;
    color: white;
    margin-bottom: 0;
}

@media (min-width: 64em) {
    .responsive-table.shopping-list caption {
        display: none;
    }
    .responsive-table.shopping-list tbody tr {
        background: white
    }
    .responsive-table.shopping-list tbody th[scope="row"] {
        display: table-cell;
    }
}

@media (min-width: 30em) {
    .responsive-table.shopping-list tbody th[scope="row"] {
        border: 0
    }
}


/*------------------------------------*\
    PRINT CONCEPT BOARDS
\*------------------------------------*/

body.view-concept-board header,
body.view-concept-board footer {
    display: none;
}


/*------------------------------------*\
    Unsupported Browser
\*------------------------------------*/

#unsupported-browser {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(25, 29, 21, 0.46);
    z-index: 1000000;
    display: none;
}

.unsupported-browser-container {
    width: 100%;
    height: 100%;
    min-height: 400px;
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 5px solid #6A972E;
    text-align: center;
    padding: 4rem 0;
    overflow: auto;
}

.browser-block {
    background: #6A972E;
    border: 5px solid #6A972E;
    transition: .4s ease;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .1);
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.browser-block:hover {
    background: #fff;
    transition: .4s ease;
}

.browser-block p {
    color: #fff;
}

.browser-block:hover p {
    color: #6A972E;
}

.browser-block .icon {
    font-size: 5rem;
    margin: 10px 0;
}

#project-terms {
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 30%);
    padding: 20px;
    margin-top: 30px;
}


/*------------------------------------*\
    EDIT PO
\*------------------------------------*/

.edit-po-sidebar {
    background: #eee;
    padding: 20px;
}

.edit-po-sidebar ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.edit-po-sidebar ul ul {
    padding-left: 15px;
}

.edit-po-sidebar a.active {
    font-weight: 700;
}

.product-column.container {
    max-width: 100%;
    align-self: unset;
    margin: 0;
    padding: .75em;
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
}

form.save-po-fees label {
    display: block;
    margin-top: 10px;
}

form.save-po-fees input.button {
    display: block;
    margin-top: 10px;
}


/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (min-width:320px) {}

@media only screen and (min-width:480px) {}

@media only screen and (min-width:769px) {
    .unsupported-browser-container {
        height: auto;
    }
    .sprig-home-top {
        height: 90vh;
        min-height: 400px;
    }
    .sprig-home-top h1 {
        font-size: 5vw;
        line-height: 1;
    }
    .welcome-box {
        max-width: 460px;
        padding: 0;
        margin-bottom: 100px;
    }
    .logo-hero-img {
        max-width: 415px;
        max-height: 115px;
    }
    .space-between {
        display: flex;
        justify-content: space-between;
    }
    .purchase-banner {
        margin: 50px 0;
        padding-top: 100px;
        padding-bottom: 100px;
        text-align: left;
    }
    .purchase-banner h2 {
        font-size: 6rem;
    }
    .purchase-banner p.as-low-as-price {
        font-size: 10rem;
        line-height: 1;
    }
    .footer p.copyright {
        text-align: right;
    }
    .footer .columns {
        align-items: flex-end;
    }
    /* projects */
    .project-list-single .project-property-month {
        text-align: right;
    }
    .product-modal-slider,
    .product-modal-slider .slick-slide img {
        border-radius: 20px 0 0 20px;
    }
    .product-modal-info {
        padding: 30px 30px 30px 0;
    }
    .product-modal-slider-wrap {
        margin-top: 0;
    }
    .product-modal-slider-wrap,
    .product-modal-slider.slick-dotted.slick-slider,
    .product-modal-slider-wrap .modal-slide,
    .product-modal-slider-wrap .slick-list,
    .product-modal-slider-wrap .slick-track,
    .product-modal-slider-wrap .product-modal-slider .slick-slide,
    .product-info-modal-wrap .columns {
        height: 100%;
    }
    .product-modal-info {
        overflow-y: auto;
        max-height: 90vh;
    }
    .product-info-modal {
        overflow: hidden;
        height: 90vh;
    }
    .product-selection-box p.product-name {
        font-size: 1.6rem;
    }
    .product-meta a {
        font-size: 1.4rem;
    }
}

@media only screen and (min-width:1024px) {}

@media only screen and (min-width:1140px) {}

@media only screen and (min-width:1280px) {}

@media only screen and (max-width:1023px) {
    #mySidebar {
        position: absolute;
        right: 0;
    }
    nav {
        display: none !important;
    }
    .logo-img {
        padding-right: 60px;
        border-right: 0;
    }
    .logo.column,
    .logo-sprig-img,
    .logo-img {
        display: block;
    }
    /* #responsive-menu-pro-button.is-active {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
    } */
}

@media (min-width:1080px) {
    #sticky-save,
    #static-save {
        display: none !important;
    }
}

@media (max-width:1079px) {
    .prev-next-buttons {
        display: none !important;
    }
    #questionnaire-sidebar {
        display: none !important;
    }
    .main-tab-container {
        display: block !important;
        overflow: visible !important;
    }
    .main-tab-container .question-section-title {
        display: none;
    }
    .printme {
        display: block !important;
    }
    .question-section-title.complete:after {
        content: '(Complete)';
        color: #6A972E;
        display: block;
        font-style: italic;
    }
    .question-section-title:not(.complete):after {
        content: '(Incomplete)';
        color: #bb2b2b;
        display: block;
        font-style: italic;
    }
}

@media (max-width:768px) {
    #la-questionnaire-sidebar {
        display: none !important;
    }
    .flex-page-title {
        display: block;
    }
    .flex-page-title h1 {
        font-size: 2.6rem;
    }
    .customer-nameplates,
    .designer-nameplates {
        width: 80%;
    }
    .customer-nameplates {
        float: left;
        margin-bottom: 10px;
    }
    .designer-nameplates {
        float: right;
        margin-bottom: 10px;
    }
    .header-project-info p {
        font-size: 12px;
    }
    .chat-bubble-l,
    .chat-bubble-r {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/*------------------------------------*\
    MISC
\*------------------------------------*/

.session-debug-bar {
    background: red;
    padding: 10px;
    color: white;
}

::selection {
    background: #04A4CC;
    color: #FFF;
    text-shadow: none;
}

::-webkit-selection {
    background: #04A4CC;
    color: #FFF;
    text-shadow: none;
}

::-moz-selection {
    background: #04A4CC;
    color: #FFF;
    text-shadow: none;
}

/* Jquery UI Accordion */
.ui-accordion {
    margin-bottom: 80px!important;
}

.ui-accordion .ui-accordion-header {
    font-size: 3rem!important; 
    display: flex!important; 
    align-items: center;
    border: 1px solid #d4e0c3;
    border-radius: 10px;
}

.ui-accordion .ui-accordion-header:not(:first-of-type) {
    border-top: solid 1px black;
}

.jquery-ui-accordion {
    border-bottom: solid 1px black!important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {

    background: #FFFFFF!important;
}

.ui-accordion .ui-accordion-header.ui-state-active {
    border-radius: 10px 10px 0 0;
    background: #d4e0c3!important;
    color: #6A972E;
}

.ui-widget-content {
    border: 1px solid #d4e0c3!important;
    border-radius: 0 0 10px 10px;
}

.accordion .ui-icon { display: none; }

.ui-accordion-header {
    position: relative;
    padding: 0.75em 2.5em 0.75em 1em!important;
    font-weight: bold!important;
    color: #1C3115;
}
.ui-accordion-header:after {
    font-family: 'Font Awesome 5 Pro';
    font-size: 24px;
    content: '\f054';
    position: absolute;
    right: 20px;
}
.ui-accordion-header span {
    font-size:1.6rem; 
    margin-left: 15px;
}
.ui-accordion-header.ui-state-active:after {
    content: '\f078';
}

.ui-accordion .ui-accordion-content .button {
    color: white!important;
}

.ui-widget, .ui-helper-reset {
    font-family: inherit!important;
    font-size: 1.7rem!important;
    line-height: inherit!important;
    color: black!important;
}


/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #FFF;
    border: 1px solid #F0F0F0;
    max-width: 96%;
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption .wp-caption-text,
.gallery-caption {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

.sticky {}

.bypostauthor {}


/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
    * {
        background: transparent !important;
        box-shadow: none !important;
        color: #000 !important;
        text-shadow: none !important;
        overflow: visible !important;
    }
    body.view-concept-board .margined-section {
        margin: 0 !important
    }
    #print-concept-board {
        display: none;
    }
    .concept-column {
        break-after: avoid
    }
    a,
    a:visited {
        text-decoration: underline;
    }
    a[href]:after {
        content: " ("attr(href) ")";
    }
    abbr[title]:after {
        content: " ("attr(title) ")";
    }
    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }
    pre,
    blockquote {
        page-break-inside: avoid;
    }
    thead {
        display: table-header-group;
    }
    tr,
    img {
        page-break-inside: avoid;
    }
    img {
        max-width: 100% !important;
    }
    @page {
        margin: 0.5cm;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3 {
        page-break-after: avoid;
    }
    .nav,
    .sidebar,
    .home-slider,
    #respond {
        display: none;
    }
    @page {
        margin: 2cm;
    }
    #questionnaire-sidebar {
        display: none;
    }
    #header {
        display: none;
    }
    #mySidebar {
        display: none;
    }
    .header {
        display: none;
    }
    .footer {
        display: none;
    }
    .prev-next-buttons {
        display: none;
    }
    .print-btn {
        display: none;
    }
    .main-tab-container {
        display: block !important;
        overflow: visible !important;
    }
    .sperling-form .radio-container input {
        position: static;
        opacity: 1;
        cursor: pointer;
        height: auto;
        width: auto;
    }
    .main-tab-container .question-section-title {
        display: none;
    }
    .printme {
        display: block !important;
    }
    .noprint {
        display: none!important;
    }
    .woocommerce-MyAccount-navigation {
        display: none;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100%;
    }
    .sperling-form label,
    .sperling-form p,
    .sperling-form ul,
    #complete-quest label,
    #complete-quest p,
    #complete-quest ul,
    #questionnaire-answers-container {
        font-size: 70% !important;
    }
    #questionnaire-answers-container {
        padding-bottom: 0 !important;
    }
    #questionnaire-answers-container .answer-output {
        margin-bottom: 5px;
    }
    #la-questionnaire-sidebar {
        display: none !important;
    }
    .question-single-title {
        margin-bottom: 0px !important;
    }
    .sperling-form textarea {
        height: 100px !important;
        font-size: 70% !important;
    }
    .savebutton,
    #submit-form,
    .cQuestion {
        display: none !important;
    }
    .main-tab-container {
        margin-bottom: 0 !important;
    }
    .sperling-form .radio-container {
        margin: 0 !important;
    }
    .sperling-form .radio-container img {
        display: none !important;
    }
    .questionnaire-title-area h1 {
        font-size: 80% !important;
        margin-bottom: 0 !important;
    }
    .sperling-form input[type=text],
    .sperling-form select {
        font-size: 70% !important;
        padding: 5px !important;
    }
}