/* global */
.owl-nav button{
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: solid 1px #FAFAFA !important;
    background-color: #FAFAFA !important;
    box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.06) !important;
    -webkit-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.06) !important;
    -moz-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.06) !important;
}

.owl-nav button:hover{
    border: solid 1px #222222 !important;
}

.owl-prev {
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translate(-50%, -50%);  
}

.owl-next {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);  
}

.owl-dot{
    background: none;
    color: inherit;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    border: 1px solid #FFF;
    border-radius: 10px;
    width: 10px;
    height: 10px;
    margin-left: 12px;
}

.owl-dot.active{
    background-color: #FFFFFF;
}


.owl-dot:first-child{
    margin-left: 0;
}

@media (max-width: 991.98px) {

    .owl-prev {
        top: 45%;
        left: 0;
        transform: translate(-50%, -50%);  
    }
    
    .owl-next {
        top: 45%;
        left: auto;
        right: 0;
        transform: translate(50%, -50%);  
    }
   
}

/* .npe-menu-site-menu */
.npe-menu-site-menu .btn-text{
    color: #222222 !important;
    font-size: 14px !important;
    padding: 0.5rem 1rem !important;
    font-weight: 600 !important;
}

.npe-menu-site-menu .btn-text:hover{
    color: #505050 !important;
}

.npe-menu-site-menu .btn-text.primary{
    color: #E92328 !important;
}

/* .npe-menu-user-menu */
#npe-menu-user-menu-elementor-search-form__container.active {
    opacity: 1;
    visibility: visible;
}

#npe-menu-user-menu-elementor-search-form__container {
    max-width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    padding: 0 15%;
}


#npe-menu-user-menu-elementor-form{
    width: 100%;
    display: block;
    transition: .2s;
}

#npe-menu-user-menu-elementor-form .elementor-search-form__input{
    border-radius: 0;
}


#npe-menu-user-menu-elementor-form .elementor-search-form__close {
    background: transparent;
    border: none;
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 18px;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 767.98px) {
    #npe-menu-user-menu-elementor-form .elementor-search-form__close {
        top: 10%;
    }
}

/* npe-banner-carousel */
.npe-banner-carousel .owl-carousel {
    display: block;
}

.npe-banner-carousel .item .image{
    max-height: 65vh;
    overflow: hidden;
    position: relative;
}

.npe-banner-carousel .item .image:not(:first-child) {
    display: none;
}

.npe-banner-carousel .item .image:after{
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgb(0,0,0,0.7) 0%, rgba(0,0,0,0.6) 15%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 100%);
}

.npe-banner-carousel .item .content{
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 1;
}

.npe-banner-carousel .item .content{
    color: #FFFFFF;
}

.npe-banner-carousel .dots-container{
    position: absolute !important;
    bottom: 2rem;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
}

.npe-banner-carousel .hotspot-btn{
    color: #222222;
    min-width: 230px;
}

.npe-banner-carousel .hotspot-btn .colour-icon{
    width: 40px;
    height: 40px;
}

.npe-banner-carousel .hotspot-btn p{
    font-size: 12px;
    margin-bottom: 0;
}

.npe-banner-carousel .hotspot-btn a p{
    color: #000;
    text-decoration: underline 0.15em rgba(255, 255, 255, 0);
    transition: text-decoration-color 300ms;
}
  
.npe-banner-carousel .hotspot-btn a:hover p{
    text-decoration-color: rgb(0, 0, 0, 1);
}

@media (max-width: 991.98px) {
    .npe-banner-carousel .item .image{
        max-height: 100%;
    }

    .npe-banner-carousel .hotspot-btn{
        min-width: 200px;
    }

    .npe-banner-carousel .hotspot-btn .colour-icon{
        width: 35px;
        height: 35px;
    }
}
 
@media (max-width: 767.98px) {
 
    .npe-banner-carousel .item .image{
        height: auto;
    }

    .npe-banner-carousel .item .image img{
        position: relative;
        top: 0;
        transform: none;
    }

    .npe-banner-carousel .item .image:after{
        background: none;
    }

    .npe-banner-carousel .hotspot-btn{
        min-width: 180px;
    }

    .npe-banner-carousel .hotspot-btn p{
        line-height: 1.2;
    }

    .npe-banner-carousel .hotspot-btn .colour-icon{
        width: 30px;
        height: 30px;
    }

    .npe-banner-carousel .item h2{
        font-size: 22px;
    }
}

/* npe-fav-heart */
.npe-fav-heart{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16"><path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15"/></svg>') no-repeat center center;
    background-size: contain;
}

.npe-fav-heart:hover,
.npe-fav-heart.liked{
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="red" class="bi bi-heart-fill" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314"/></svg>') no-repeat center center;
}

.npe-fav-heart.liked:hover{
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkred" class="bi bi-heart-fill" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314"/></svg>') no-repeat center center;
}

.npe-fav-heart-circle{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    background-color: #FFFFFF
}

/* npe-paint-inspire-carousel */
.npe-paint-inspire-carousel .paint-row {
    margin-top: -10px !important;
    min-height: 150px !important;
}

.npe-paint-inspire-carousel .paint-inspire-desc {
    background-color: #E8E8E8;
}

.npe-paint-inspire-carousel .paint-inspire-desc .btn-outline-black {
    height: 50px !important;
    width: 50px !important;
    border-radius: 50% !important;
    align-content: center;
    padding: 0;
    min-width: 0 !important;
}

.npe-paint-inspire-carousel .colour-box {
    text-align: center;
    border-top-right-radius: 8px;
    transition: flex 0.3s ease;
    color: #222222;
    position: relative;
    min-height: 100px;
}

.npe-paint-inspire-carousel .box1 {
    z-index: 3;
}

.npe-paint-inspire-carousel .colour-info {
    text-align: start;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 10px 0 10px 15px
}

.npe-paint-inspire-carousel .box1 .colour-info {
    padding-left: 10px;
}


.npe-paint-inspire-carousel .box2,
.npe-paint-inspire-carousel .box3 {
    margin-left: -10px;
    padding-left: 20px;
}

.npe-paint-inspire-carousel .box2 {
    z-index: 2;
}

.npe-paint-inspire-carousel .dots-container{
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
}

.npe-paint-inspire-carousel .dots-container .owl-dot{
    border: 1px solid #C9C9C9;
}

.npe-paint-inspire-carousel .dots-container .owl-dot.active{
    background-color: #C9C9C9;
}

@media (max-width: 767.98px) {

    .npe-paint-inspire-carousel .paint-inspire-desc h4{
        line-height: 1.1;
    }

    .npe-paint-inspire-carousel .paint-inspire-desc p{
        line-height: 1.2;
    }

    .npe-paint-inspire-carousel .colour-box {
        min-height: 150px;
    }
   
}

/* npe-guide-panel */
.npe-guide-panel{
    border-radius: 15px;
    /* background-image: url('https://projectjalanjalan.stagingsandbox.com/wp-content/uploads/2024/08/guide-panel-1.jpg'); */
    background-position: right center;
    background-repeat: no-repeat;
    height: 130px;
    transition: height 0.6s ease-out, background-image 0.1s;
    overflow: hidden;
}

.npe-guide-panel .panel-title,
.npe-guide-panel .close-guide-btn{
    color: #FFFFFF;
}

.npe-guide-panel .guide-btn{
    border: solid 1px #FFFFFF;
    border-radius: 50rem;
    color: #FFFFFF;
    background-color: transparent;
    width: auto;
    text-align: left;
}

.npe-guide-panel .guide-btn:hover{
    color: #222222;
    background-color: #FFFFFF;
}

.npe-guide-panel .guide-btn.selected{
    color: #FFFFFF;
    background-color: #222222;
}

.npe-guide-panel .guide-btn.guide-btn-dark{
    border: solid 1px #222222;
    color: #222222;
}

.npe-guide-panel .guide-btn.guide-btn-dark:hover{
    color: #FFFFFF;
    background-color: #404040;
}

.npe-guide-panel .guide-btn.guide-btn-dark.selected{
    color: #FFFFFF;
    background-color: #222222;
}

.npe-guide-panel .guide-btn.search:hover svg path,
.npe-guide-panel .guide-btn.search.guide-btn-dark svg path{
    stroke: #222222;
}

.npe-guide-panel .guide-btn.search i,
.npe-guide-panel .guide-btn.search.guide-btn-dark:hover i,
.npe-guide-panel .guide-btn.search.guide-btn-dark.selected i{
    border-bottom: solid 1px #FFFFFF;
}

.npe-guide-panel .guide-btn.search:hover i,
.npe-guide-panel .guide-btn.search.guide-btn-dark i{
    border-bottom: solid 1px #222222;
}

.npe-guide-panel .guide-btn.search.guide-btn-dark:hover svg path,
.npe-guide-panel .guide-btn.search.selected svg path{
    stroke: #FFFFFF;
}

.npe-guide-panel .expand-guide-btn-row{
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translate(0%, -50%);
    display: flex;
    justify-content: end;
}

.npe-guide-panel .expand-guide-btn-row.expanded{
    position: relative;
    right: auto;
    transform: translate(0, 0);
    justify-content: start;
}

.npe-guide-panel .expand-guide-btn-row.expanded .btn-primary{
    border-color: #222222 !important;
}

.npe-guide-panel .close-guide-btn{
    border-bottom: solid 1px #FFFFFF;
}

.npe-guide-panel .close-guide-btn.close-btn-dark{
    color: #222222;
    border-bottom: solid 1px #222222;
}

.npe-guide-panel .close-guide-btn svg{
    transition: margin-left 0.2s;
}

.npe-guide-panel .close-guide-btn:hover svg{
    margin-left: 5px;
}

.npe-guide-panel-search-form-container{
    max-width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    padding: 0 15%;
}

.npe-guide-panel-search-form-container.active{
    opacity: 1;
    visibility: visible;
}

.npe-guide-panel-search-form,
.npe-guide-panel-search-form .npe-guide-panel-search-form-input{
    width: 100% !important;
    display: block !important;
    transition: 0.2s !important;
    border-radius: 0 !important;
}

.npe-guide-panel-search-form .npe-guide-panel-close-search {
    background: transparent;
    border: none;
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 18px;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
}


@media (max-width: 767.98px) {

    .npe-guide-panel{
        height: 150px;
    }

    .npe-guide-panel .expand-guide-btn-row {
        position: relative;
        right: 0;
        transform: translate(0);
        justify-content: center;
        margin-top: 20px;
    }

    .npe-guide-panel .expand-guide-btn-row.expanded {
        justify-content: start;
        margin-top: 0;
    }

    .npe-guide-panel-search-form .npe-guide-panel-close-search {
        top: 10%;
    }

    .npe-guide-panel .guide-btn{
        background-color: #FFFFFF;
        color: #222222;
    }

    .npe-guide-panel .guide-btn.search i,
    .npe-guide-panel .guide-btn.search.guide-btn-dark:hover i,
    .npe-guide-panel .guide-btn.search.guide-btn-dark.selected i{
        border-bottom: solid 1px #222222;
    }

    .npe-guide-panel .guide-btn.search path{
        stroke: #222222;
    }
}

/* npe-image-card-carousel */
.npe-image-card-carousel-row .owl-carousel .owl-stage {
    padding-left: 0 !important;
}

/* npe-image-comparison */
.npe-image-comparison {
    max-width: 768px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
}

.npe-image-comparison .npe-images-container {
    position: relative;
    display: flex;
}

.npe-image-comparison .npe-after-image,
.npe-image-comparison .npe-before-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
}

.npe-image-wrapper {
    position: relative;
    width: 100%;
}

.npe-before-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 5;
}

.npe-image-comparison .npe-slider {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 30;
}

.npe-image-comparison .npe-slider-line {
    position: absolute;
    height: 100%;
    width: 4px;
    background: #fff;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.npe-image-comparison .npe-slider-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 25;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.npe-before-container, .npe-after-container {
    position: absolute;
    display: flex;
    flex-direction: column;
}

.npe-before-label,
.npe-after-label {
    line-height: 100%;
    white-space: nowrap;
    margin-top: 6px;
}

.npe-before-container {
    left: 12px;
    bottom: 20px;
    z-index: 3;
}

.npe-after-container {
    bottom: 20px;
    left: calc(50% + 12px); 
    z-index: 3;
}


@media (max-width: 767.98px) {
.npe-before-label,
.npe-after-label {
    font-size: 16px;
}
}

@media (max-width: 575.98px) {
    .npe-before-label,
    .npe-after-label {
        font-size: 13px;
        margin-bottom: 0px;
    }
}

/* npe-product-banner-carousel */
.npe-product-banner-carousel .npe-product-button {
    width: 100%;
    border-radius: 50px;
    white-space: nowrap;
    padding: 16px 16px;
    background-color: #FFFFFF;
}

.npe-product-banner-carousel .npe-product-img-overlay{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.npe-product-banner-carousel .npe-product-button:hover {
    background-color: #222222;
    text-decoration: none;
    color: #FFFFFF;
}

@media (max-width: 767.98px) {
    .npe-product-banner-carousel .npe-product-img-overlay {
        min-height: 400px;
        position: relative;
        background: #f2f2f2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

@media (max-width: 575.98px) {
    .npe-product-banner-carousel .npe-product-button {
        border: 1px solid #222222;
    }
}

/*npe-colour-catalogue*/
.npe-colour-catalogue .colour-item{
    flex: 0 0 auto;
    width: 20%;
}

.npe-colour-catalogue .colour-btn{
    width: 100%;
    border-radius: 8px;
    padding: 10px;
    text-align: left;
    border: solid 1px #FFFFFF;
    background-color: transparent;
}

.npe-colour-catalogue .colour-block{
    min-height: 120px;
    border-radius: 8px;
    padding: 10px;
    border: solid 1px #FFFFFF;
    background-color: transparent;
    display: flex;
    justify-content: end;
}

.npe-colour-catalogue .colour-btn .colour-item-info{
    background-color: #FFFFFF;
    width: 100%;
    padding: 14px;
}

.npe-colour-catalogue .colour-btn:hover{
    border: solid 1px #C9C9C9 !important;
}

.npe-colour-catalogue .colour-btn.active{
    border: solid 1px #B2B2B2;
}

.npe-colour-catalogue .colour-btn .colour-name{
    font-weight: 500;
    text-transform: capitalize;
}

.npe-colour-catalogue-button {
    margin-right: 20px;
    border: none;
    background: none;
    font-size: 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #3e3e3e;
    padding: 0 !important;
}

.npe-colour-catalogue-option {
    padding: 10px 20px;
    border: 1px solid #3e3e3e;
    border-radius: 20px;
    background-color: transparent;
    font-size: 16px;
    color: #3e3e3e;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.npe-colour-catalogue .colour-bar .colour-content{
    border: 1px solid #B2B2B2;
    border-radius: 8px;
    padding: 50px;
    position: relative;
}

.npe-colour-catalogue .colour-demo-img{
    border-radius: 8px;
    overflow: hidden;
}

#close-bar-btn{
    position: absolute;
    top: 20px;
    right: 20px;
    width: auto;
    margin: 0;
    background-color: transparent;
    border: none;
    padding: 0;
}

@media (max-width: 991.98px) {
    .npe-colour-catalogue .colour-item{
        width: 25%;
    }

    .npe-colour-catalogue .colour-bar .colour-content{
        padding: 30px;
    }

    .npe-colour-catalogue .colour-btn{
        min-height: 120px;
    }
}

@media (max-width: 767.98px) {
    .npe-colour-catalogue .colour-item{
        width: 33.3%;
    }

    .npe-colour-catalogue .colour-bar .colour-content{
        padding: 20px;
    }

    .npe-colour-catalogue .colour-btn{
        min-height: 100px;
    }
}

@media (max-width: 575.98px) {
    .npe-colour-catalogue .colour-item{
        width: 50%;
    }
}

/* npe-featured-post */
.npe-featured-post .article-row{
    border-top: solid 1px #9E9E9E;
    align-items: center;
}

.npe-featured-post .article-cat{
    width: 120px;
    padding: 10px;
    margin-bottom: 0;
    border-radius: 8px;
    background-color: #EDF0F5;
    text-align: center;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 1.5px;
}

.npe-featured-post .article-title{
    margin-bottom: 0;
    line-height: 1.1;
}

.npe-featured-post .article-row .btn-text:hover > .article-title{
    text-decoration: underline;
}

.npe-featured-post .disable-last-post::before{
    content: "";
    background: rgb(250,250,250);
    background: linear-gradient(180deg, rgba(250,250,250,0) 0%, rgba(250,250,250,1) 85%, rgba(250,250,250,1) 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

@media (max-width: 991.98px) {
    .npe-featured-post .article-cat{
        width: 100px;
        padding: 5px;
        font-size: 14px;
        letter-spacing: 1.3px;
    }

    .npe-featured-post .article-title{
        margin-bottom: 0;
        line-height: 1;
    }
}

@media (max-width: 767.98px) {
    .npe-featured-post .article-cat{
        font-size: 12px;
    }
}

/* Modal content styling */
.npe-smart-colour-grabber .modal-content {
    padding: 20px;
}

/* Drop zone styling */
.npe-smart-colour-grabber #dropZone {
    border: 2px dashed #D9D9D9;
    padding: 50px;
    cursor: pointer;
    border-radius: 10px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0px 30px;
}

.npe-smart-colour-grabber #dropZone img {
    max-height: 200px;
    margin-bottom: 15px;
}

.npe-smart-colour-grabber #dropZone svg {
    margin-bottom: 10px;
}

.npe-smart-colour-grabber #fileInput {
    visibility: hidden;
}

/* Preview image styling */
.npe-smart-colour-grabber #preview {
    margin-top: 20px;
}

.npe-smart-colour-grabber #preview.show {
    display: block;
}

.npe-smart-colour-grabber .colour-box {
    height: 150px;
    color: white;
    font-weight: bold;
    margin-bottom: 10px;
    border-radius: 16px;
    padding: 10px;
    display: flex;
    justify-content: end;
}

/* smart-grabber-result-section */

.npe-smart-colour-grabber .share-btn svg, 
.npe-smart-colour-grabber .download-grabber-btn svg {
    margin-left: 10px;
}

.npe-smart-colour-grabber .uploaded-image {
    max-width: 70%;
}

.npe-smart-colour-grabber .npe-fav-heart-circle {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    background-color: #FFFFFF;
}    

@media (max-width: 767.98px) {
    .npe-smart-colour-grabber .uploaded-image{
        max-width: 100%!important;
    }
}

/*npe-form-paint-calculator*/
/* -----Progress Bar----- */
.npe-paint-calculator .progress-bar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px
}

.npe-paint-calculator .progress-bar-icon {
    width: 24px;
    height: 24px;
    border-radius: 25px;
    border: solid 2px #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 700;
    color: #000;
    background-color: #fff;
}

.npe-paint-calculator .progress-step.active .progress-bar-icon {
    background-color: #000; 
    color: #fff; 
}

.npe-paint-calculator .progress-step .progress-bar-icon {
    background-color: #fff; 
    color: #000;
}

.npe-paint-calculator .progress-line {
    width: 30px;
    height: 1px;
    background-color: #333;
}

.npe-paint-calculator .step-title {
    display: inline-flex;
    align-items: center;
}

.npe-paint-calculator .step-title-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF; 
    color: #222222;
    border: solid 2px #222222;
    border-radius: 50%;
    width: 24px; 
    height: 24px; 
    font-size: 12px; 
    font-weight: 700;
    margin-right: 8px;
    transition: opacity 0.3s ease;
}

/* -----Step 1----- */
.npe-paint-calculator .error {
    color: red;
}

.npe-paint-calculator .add-surface-button {
    background-color: transparent;
    border: none;
    color: #222222;
    font-size: 1rem;
    font-weight: 400;
    padding: 0;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    margin: 20px 0;
}

.npe-paint-calculator .add-surface-button:hover {
    text-decoration: underline; 
    color: black; 
    opacity: 0.8;
}

.npe-paint-calculator .add-surface-button .circle-icon {
    display: inline-flex;
    justify-content: center;
    background-color: #FFFFFF; 
    align-items: center;
    color: #222222;
    border: solid 2px #222222;
    border-radius: 50%;
    width: 25px; 
    height: 25px; 
    margin-right: 8px;
    transition: opacity 0.3s ease;
}

.npe-paint-calculator .add-surface-button:hover .circle-icon {
    opacity: 0.8;
}

.npe-paint-calculator .add-surface-button .circle-icon-wrapper {
    text-decoration: none;
}

.npe-paint-calculator .toggle-conversion-btn {
    position: relative;
    display: inline-block;
    width: 215px;
    height: 40px;
    background-color: #FFFFFF;
    border: solid 1px #222222; 
    border-radius: 25px;
}

.npe-paint-calculator .toggle-conversion-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 100%;
    background-color: #004393;
    border-radius: 25px;
    transition: left 0.3s ease;
    z-index: 1;
}

.npe-paint-calculator .conversion-btn {
    position: relative;
    font-size: 16px;
    line-height: 1.5;
    z-index: 2;
    width: 90px;
    background-color: transparent;
    border: none;
    color: #000;
    transition: color 0.3s ease;
}

.npe-paint-calculator .conversion-btn.active {
    color: #FFFFFF;
}

.npe-paint-calculator .toggle-conversion-btn.ft-active::before {
    left: 0; 
}

.npe-paint-calculator .toggle-conversion-btn.metre-active::before {
    left: 95px;
}

.npe-paint-calculator .surface-width,
.npe-paint-calculator .surface-height {
    background-color: #EDF0F5;
}

.npe-paint-calculator .symbol-x {
    margin-top: 4px;
}

.npe-paint-calculator .remove-clone {
    width: 0;
}

.npe-paint-calculator .spacer {
    opacity: 0;
}

.npe-paint-calculator .remove-clone-btn {
    background-color: #FFFFFF; 
    color: #222222;
    border: solid 2px #000;
    border-color: #222222;
    border-radius: 50%; 
    width: 25px;
    height: 25px; 
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0; 
    transition: all 0.3s ease;
    margin-top: 6px;
}

.npe-paint-calculator .remove-clone-btn:hover {
    opacity: 0.8;
    background-color: #222222;
    color: #FFFFFF;
    border-color: #222222;
}


.npe-paint-calculator .input-group .form-control,
.npe-paint-calculator .input-group .input-group-text {
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.npe-paint-calculator .input-group .input-group-text {
    background-color: #EDF0F5;
}

.npe-paint-calculator .input-group .form-control {
    box-shadow: none;
    border-radius: 0;
    padding-left: 15px;
}

/* Step-Background container */
.npe-paint-calculator .bg-white {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-sizing: border-box; 
}

/* -----Step 2----- */
.npe-paint-calculator .input-wrapper {
    position: relative;
    display: inline-block;
    width: 100px;
}

.npe-paint-calculator .doors-windows-number-input {
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    background-color: #EDF0F5;
    height: 38px;
}

.npe-paint-calculator .btn-add-minus {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #FFFFFF;
    display: inline-flex;
    border: none;
    font-size: 18px;
    justify-content: center;
    margin: 0 8px;
    border-radius: 100%;
    padding: 2px;
}

.npe-paint-calculator .btn-add-minus:hover {
    opacity: 0.8;
    background-color: #222222;
    color: #FFFFFF;
    border-color: #222222;
}

.npe-paint-calculator .decrement {
    left: 0;
}

.npe-paint-calculator .increment {
    right: 0;
}

.npe-paint-calculator .form-label-door,
.npe-paint-calculator .form-label-window {
    margin-bottom: 5px;
    display: block;
    text-align: center;
}

.npe-paint-calculator .quick-estimator-container {
    background-color: #ECE1E1; 
    border-radius: 8px; 
    padding: 15px; 
    text-align: center; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}

.npe-paint-calculator .quick-estimator-link {
    color: #1E468C; 
    text-decoration: none; 
    font-weight: bold;
}

.npe-paint-calculator .quick-estimator-link svg {
    margin-left: 10px;
}


.npe-paint-calculator .quick-estimator-link:hover {
    text-decoration: underline;
}

/*-----Step 3-----*/
.npe-paint-calculator-step-3 #step-3-container{
    margin-top: 50px;
}

.npe-paint-calculator-step-3 .calculation-link {
    color: #000;
    text-decoration: underline !important;
}

/* Result Boxes */
.npe-paint-calculator-step-3 .calculator-result-box {
    background-color: #EDF0F5;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    min-height: 270px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.npe-paint-calculator-step-3 .calculator-result-box .result-surface-area,
.npe-paint-calculator-step-3 .calculator-result-box .result-paint-required,
.npe-paint-calculator-step-3 .calculator-result-box .result-sealer-required {
    margin-top: auto; 
    margin-bottom: 20px;
}

.npe-paint-calculator .download-btn svg {
    margin-left: 10px;
}

.npe-paint-calculator-step-3 #start-over-btn {
    background: none;
    border: none;
    color: #222222;
    text-decoration: underline;
    padding: 0;
    font-size: inherit;
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .npe-paint-calculator .remove-clone {
        right: 15% !important;
    }
    .npe-paint-calculator .break-text {
        display: block;
    }
    .npe-paint-calculator .progress-bar-icon {
        margin-bottom: 5px !important;
    }
    .progress-line {
          align-self: start;
          margin: 10px 0;
    }
    .npe-paint-calculator-step-3 .calculator-result-box{
        min-height: 0;
    }
}


/* npe-quick-estimator */
.npe-quick-estimator .bg-white {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-sizing: border-box; 
}

.npe-quick-estimator .house-option img {
    max-width: 100px;
    border: none;
    cursor: pointer;
}

.npe-quick-estimator .house-option p {
    margin-top: 10px;
    font-size: 16px;
    color: #222222;
    text-align: center;
}

.npe-quick-estimator .house-option img.selected {
    border: 3px solid #222222; 
    border-radius: 8px;
}

.npe-quick-estimator .quick-estimator-result-box {
    background-color: #EDF0F5;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    flex-direction: column;
    text-align: center;
}

.npe-quick-estimator .form-check-input:checked {
    background-color: #004393; 
    border: 2px solid #004393; 
}

.npe-quick-estimator #area-check-form {
    padding: 10px;
}

/* npe-boards-list */
.npe-boards-list .selected {
    border: 2px solid #28a745 !important;
    background-color: rgba(40, 167, 69, 0.1) !important;
}

.npe-boards-list .boards-container {
    display: flex;
    flex-wrap: wrap;
}

.npe-boards-list .board-box {
    display: flex;
    align-items: center;
    width: 100%;
}

.npe-boards-list .board-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    width: 200px;
    height: 200px; 
    border: 0.5px solid #FFFFFF;
}

.npe-boards-list .board-box-item {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: #e0e0e0;
}

.npe-boards-list .empty-content-box {
    background-color: #d3d3d3;
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 
    25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
    background-size: 10px 10px;
}

@keyframes wiggle {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

/* Wiggle class to apply the animation */
.npe-boards-list .wiggle {
    animation: wiggle 0.8s ease-in-out infinite;
    display: table;
}

/* npe-boards-main */
.npe-boards-main .fav-colour-box {
    height: 150px;
    color: white;
    font-weight: bold;
    margin-bottom: 10px;
    border-radius: 16px;
    padding: 10px;
    display: flex;
    justify-content: end;
}

.npe-boards-main .colour-box {
    border-top-right-radius: 8px;
    min-height: 100px;
}

.npe-boards-main .colour-info {
    text-align: start;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 10px 0 20px 35px;
}

.npe-boards-main .box1 {
    z-index: 3;
}

.npe-boards-main .box1 .colour-info {
    padding-left: 25px;
}

.npe-boards-main .box2,
.npe-boards-main .box3 {
    margin-left: -10px;
    padding-left: 20px;
}

.npe-boards-main .box2 {
    z-index: 2;
}

/* npe-global-add-board-modal */
.npe-global-add-board .board-options {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.npe-global-add-board .board-item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    cursor: pointer;
}

.npe-global-add-board .board-item.selected {
    font-weight: bold;
}

.npe-global-add-board .board-item .checkmark,
.npe-global-add-board .board-item .plus {
    font-weight: bold;
    color: #222222;
}

.npe-global-add-board .board-item.disabled {
    opacity: 0.5;
}


.npe-global-add-board .add-new-board {
    margin-top: 15px;
    padding: 10px;
    font-size: 16px;
    color: #9e9e9e;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    display: inline-block;
}

.npe-global-add-board .add-new-board:hover {
    background-color: #f7f7f7;
}

.npe-global-add-board .new-board-input input {
    border-radius: 20px;
}

.npe-global-add-board .custom-save {
    background-color: #222222;
    color: #FFFFFF;
    width: 100px;
}

/*npe-widget-colour-recommender*/
.npe-colour-recommender-form .recommender-container {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    box-sizing: border-box; 
}

/*Recommender Progress Bar*/
.npe-colour-recommender-form .progress-num {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 10px;
}

.npe-colour-recommender-form .step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #1E468C;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.npe-colour-recommender-form .progress-num.active .step-number {
    background-color: #ffffff;
    color: #000000;
    border: solid 1px #ffffff;
}

.npe-colour-recommender-form .progress-num .step-number {
    background-color: #1E468C;
    color: #ffffff;
    border: solid 1px #ffffff;
}

.npe-colour-recommender-form .progress-line {
    width: 30px;
    height: 1px;
    background-color: #ffffff;
    margin: 15px 10px;
}

.npe-colour-recommender-form .recommender-progress-bar-text {
    margin-top: 8px;
    font-size: 14px;
    text-align: center;
    color: #ffffff;
}

.npe-colour-recommender-form .active .step-number {
    background-color: #ffffff;
    color: #000000;
    border: solid 1px #ffffff;
}

/* Space radio button style */
.npe-colour-recommender-form .space-selection ul {
    list-style-type: none;
}
  
.npe-colour-recommender-form .space-selection li {
    display: inline-block;
}
  
.npe-colour-recommender-form .space-selection input[type="radio"][id^="spaceRadio"] {
    visibility: hidden;
}
  
.npe-colour-recommender-form .space-selection label {
    border: 2px solid #ffffff;
    padding: 3px;
    display: block;
    position: relative;
    margin: 10px;
    border-radius: 16px;
    cursor: pointer;
}
  
.npe-colour-recommender-form .space-selection label img {
    min-height: 150px;
    border-radius: 16px;
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
}
  
.npe-colour-recommender-form .space-selection :checked + label {
    border-color: #222222;
}
  
.npe-colour-recommender-form .space-selection :checked + label:after {
    content: "";
    background-color: #222222;
    color: #ffffff;
    display: block;
    border-radius: 8px;
    border: 1px solid #222222;
    position: absolute;
    top: 10%;
    left: 10%;
    width: 25px;
    height: 25px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='11' viewBox='0 0 13 11'%3E%3Cline x1='1.34968' y1='6.02507' x2='4.84329' y2='9.51868' stroke='white' stroke-width='2'/%3E%3Cline x1='3.42766' y1='9.51872' x2='11.994' y2='0.952351' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
  
.npe-colour-recommender-form .space-selection input[type="radio"]:checked + label img {
    transform: scale(1.0);
    z-index: -1;
}

.npe-colour-recommender-form .space-selection label:hover img {
    transform: scale(0.98);
}

/* Mood radio button style */
.npe-colour-recommender-form .mood-selection li{
    display: inline-block;
}

.npe-colour-recommender-form .mood-selection input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.npe-colour-recommender-form .mood-selection label {
    display: inline-block;
    background-color: #ffffff;
    padding: 10px 20px;
    border: 1px solid #222222;
    border-radius: 4px;
    cursor: pointer;
}

.npe-colour-recommender-form .mood-selection input[type="radio"]:checked + label {
    background-color: #1E468C;
    border-color: #1E468C;
    color: #ffffff;
}

.npe-colour-recommender-form .mood-selection input[type="radio"]:focus + label {
    background-color: #1E468C;
    color: #ffffff;
}


.npe-colour-recommender-form .mood-selection label:hover {
    background-color: #2e5eb0;
    color: #ffffff;
}

/* Colour radio button style */
.npe-colour-recommender-form .colour-selection ul {
    list-style-type: none;
}

.npe-colour-recommender-form .colour-selection input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.npe-colour-recommender-form .colour-selection label {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 100px;
    height: 100px;
    border: 2px solid transparent;
    border-radius: 16px;
    transition: border 0.3s ease;
    padding: 10px;
}

.npe-colour-recommender-form .colour-selection label img {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    transition: transform 0.3s ease;
}

.npe-colour-recommender-form .colour-selection input[type="radio"]:checked + label {
    border: 2px solid #222222;
}

.npe-colour-recommender-form .colour-selection input[type="radio"]:checked + label img {
    transform: scale(1.0);
}

.npe-colour-recommender-form .colour-selection label:hover img {
    transform: scale(0.9);
}

.npe-colour-recommender-form .error-message {
    color: #ff0000;
}

/* Colour Recommender Result Style */
.npe-colour-recommender-result .npe-fav-heart-circle {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    background-color: #FFFFFF;
}

.npe-colour-recommender-result .result-image, .result-image img{
    border-radius: 16px;
}

.npe-colour-recommender-result .result-image-section{
    background-color: #ffffff;
}

.npe-colour-recommender-result .colour-block {
    justify-content: center;
    position: relative;
    display: flex;
    align-items: flex-end;
    border-radius: 8px;
    overflow: hidden;
    min-height: 120px;
    background-color: transparent;
    border: 1px solid #FFFFFF;
}

.npe-colour-recommender-result.summary-section{
    background-color: #EDF0F5;
}

.npe-colour-recommender-result .summary-text {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.npe-colour-recommender-result .summary-line {
    flex-grow: 1;
    height: 0.5px;
    background-color: #000000;
    margin: 0 10px;
}

.npe-colour-recommender-result .start-over-section {
    background-color: #ffffff;
    border-radius: 16px;
}

.npe-colour-recommender-result .share-download-section {
    height: 100%;
}

.npe-colour-recommender-result .share-btn, .download-btn {
    background-color: #ffffff;
    border-radius: 16px;
    border: none;
    padding: 21px 5px;
}

@media (max-width: 575.98px) {
    .npe-colour-recommender-result .npe-fav-heart-circle{
        right: 10px !important;
    }
}

@media (max-width: 767.98px) {
    .npe-colour-recommender-result .colour-details-result {
        text-align: center;
    }
    .npe-colour-recommender-result .npe-fav-heart-circle{
        right: 40px;
    }
}

@media (max-width: 991.98px) { 
    .npe-colour-recommender-result .start-over-section{
        margin-bottom: 16px;
    }
    .npe-colour-recommender-result .start-over-button{
        margin-top: 10px;
    }
}

/* npe-global-share-function */
.npe-global-share-function .share-url-input .form-control {
    border-radius: 50px; 
    border: 1px solid #222222; 
    padding: 10px 20px;
    background-color: #FFFFFF;
    text-align: center; 
    color: #222222;
}

.npe-global-share-function .share-url-input .form-control:disabled {
    background-color: #FFFFFF;
}

.npe-global-share-function a {
    color: #222222;
}

.npe-global-share-function a:visited {
    color: #222222;
}

.npe-global-share-function #floatingMessage {
    display:none; 
    position:fixed; 
    bottom:20px; 
    left:50%; 
    transform:translateX(-50%); 
    background-color: #4CAF50; 
    color: white; 
    padding: 10px; 
    border-radius: 5px; 
    z-index: 9999;
}

/* npe-product-recommender */
.npe-product-recommender .bg-color {
    background-color: #FFFFFF;
    border-radius: 8px;
}

.npe-product-recommender ul {
    list-style-type: none;
}

.npe-product-recommender input {
    display: none;
}

.npe-product-recommender img {
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    padding: 2px;
}
  
.npe-product-recommender label:before {
    background-color: #FFFFFF;
    color: #FFFFFF;
    content: "";
    display: inline-block;
    border-radius: 8px;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 25px;
    height: 25px;
    text-align: center;
    transition-duration: 0.4s;
    transform: scale(0);
}

.npe-product-recommender :checked + label:before {
    content: "✓";
    background-color: #222222;
    transform: scale(1);
}

.npe-product-recommender :checked + label img {
    border: 1px solid #222222;
    border-radius: 8px;
    padding: 2px;
}

/*Recommender Progress Bar*/
.npe-product-recommender .progress-num {
    flex-direction: column;
    align-items: center;
    margin: 0px 10px;
}

.npe-product-recommender .step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #1E468C;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.npe-product-recommender .progress-num.active .step-number {
    background-color: #FFFFFF;
    color: #000000;
    border: solid 1px #FFFFFF;
}

.npe-product-recommender .progress-num .step-number {
    background-color: #1E468C;
    color: #FFFFFF;
    border: solid 1px #FFFFFF;
}

.npe-product-recommender .progress-line {
    width: 30px;
    height: 1px;
    background-color: #FFFFFF;
    margin: 15px 10px;
}

.npe-product-recommender .recommender-progress-bar-text {
    margin-top: 8px;
    font-size: 14px;
    text-align: center;
    color: #FFFFFF;
}

.npe-product-recommender .active .step-number {
    background-color: #FFFFFF;
    color: #000000;
    border: solid 1px #FFFFFF;
}

/* npe-product-recommender-result */
.npe-product-recommender-result .download-btn {
    padding: 8px 16px;
}

.npe-product-recommender-result .bg-result {
    background-color: #FFFFFF;
    border-radius: 8px;
}

.npe-product-recommender-result + .bg-summary{
    background-color: #F5F5F5;
}

.npe-product-recommender-result .solution-img {
    border-radius: 8px;
}

.npe-product-recommender-result .product-img {
    border-radius: 8px;
    width: 100%;
}

.npe-product-recommender-result .product-border {
    border: 1px, solid, #C4C4C4;
    border-radius: 8px;
}

.npe-product-recommender-result .summary-line {
    flex-grow: 1;
    height: 0.5px;
    background-color: #000000;
    margin: 0 10px;
}

.npe-product-recommender-result .summary-text {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* Remove Accordion Border */
.npe-product-recommender-result .accordion .accordion-header button {
    color: #222222;
    background-color: transparent;
    box-shadow: none;
}

.npe-product-recommender-result .accordion .accordion-header button h5 {
    color: #222222;
}

.npe-product-recommender-result .accordion {
    border: 0;
}

/* npe-image-colour-group */
.npe-widget-image-colour-group .npe-fav-heart-circle {
    position: absolute;
    top: 2%;
    right: 2%;
}

.npe-widget-image-colour-group .inspiration-image {
    width: 100%;
}

.npe-widget-image-colour-group .colour-box {
    border-top-right-radius: 8px;
    min-height: 150px;
}

.npe-widget-image-colour-group .colour-info {
    text-align: start;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 10px 0 20px 30px;
}

.npe-widget-image-colour-group .box1 {
    z-index: 3;
}

.npe-widget-image-colour-group .box1 .colour-info {
    padding-left: 20px;
}

.npe-widget-image-colour-group .box2,
.npe-widget-image-colour-group .box3 {
    margin-left: -10px;
    padding-left: 20px;
}

.npe-widget-image-colour-group .box2 {
    z-index: 2;
}

#boardFloatingMessage {
   display: none; 
   position: fixed; 
   bottom: 20px; 
   right: 20px; 
   padding: 10px; 
   background: #333; 
   color: #fff; 
   border-radius: 4px; 
   z-index: 10000;
}