﻿
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1050; /* Make sure it's on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5); /* Dim background */
}

.modal-dialog {
    position: relative;
    margin: 10% auto;
    background: #fff;
    border-radius: 10px;
    z-index: 1060;
    max-width: 500px;
}

.modal-content {
    padding: 20px;
    position: relative;
}

.close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 22px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    z-index: 1070;
}

.modal input, .modal button {
    z-index: 1070;
    position: relative;
}

.formbold-input .form-checkbox, .formbold-input-flex .form-checkbox {
    margin-top: 5px;
}

.modal .modal-backdrop {
    height: 0px;
}


.btn-whatsapp-pulse {
    background: #25d366;
    color: white;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0;
    height: 0;
    padding: 12px;
    text-decoration: none;
    border-radius: 50%;
    animation-name: pulse;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }

    80% {
        box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
    }
}

.btn-whatsapp-pulse-border {
    animation-play-state: paused;
}

    .btn-whatsapp-pulse-border::before {
        content: "";
        position: absolute;
        border-radius: 50%;
        padding: 15px;
        border: 4px solid #25d366;
        opacity: 0.75;
        animation-name: pulse-border;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
    }

@keyframes pulse-border {
    0% {
        padding: 15px;
        opacity: 0.75;
    }

    75% {
        padding: 40px;
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}
/*-------------------*/
/* default states */

.share {
    position: relative;
    width: 2rem;
    height: 2rem;
    border-radius: 1.5rem;
    transition: width 0.5s;
    margin: 0.5rem;
    background: #ddd;
}

    .share i {
        text-align: center;
        max-width: 0rem;
    }

.share__button {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    position: absolute;
    transition: margin-left 0.5s, transform 0.7s, opacity 0.3s, background-color 0.4s;
    padding: 0.25rem;
    opacity: 1;
}

    .share__button i, .share__parent i {
        color: #ffffff;
        margin: auto;
        width: 100%;
        padding: 0.3rem;
    }

.share__parent {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    position: absolute;
    padding: 0.15rem;
    background-color: #549c67;
    z-index: 5;
    box-shadow: 0px 0px 1px 2px #549c67;
}

.share__facebook {
    transform: rotate(-90deg);
    background-color: #335fb8;
}

.share__twitter {
    transform: rotate(-180deg);
    background-color: #639cba;
}

.share__linkedin {
    transform: rotate(-270deg);
    background-color: #0077B5;
}

.share__whatsapp {
    transform: rotate(-270deg);
    background-color: #48bd76;
}

.share__clipboard {
    transform: rotate(-270deg);
    background-color: #444;
}

/* hover states */

.share:hover {
    width: 0rem;
}

    .share:hover .share__facebook {
        margin-left: 2.5rem;
    }

    .share:hover .share__twitter {
        margin-left: 4.5rem;
    }

    .share:hover .share__linkedin {
        margin-left: 4.75rem;
    }

    .share:hover .share__whatsapp {
        margin-left: 6.5rem;
    }

    .share:hover .share__clipboard {
        margin-left: 17.5rem;
    }

    .share:hover .share__button {
        transform: rotate(0deg);
        opacity: 1;
    }

.css-o023wx {
    position: absolute;
    left: 0px;
    width: 100%;
    top: 48px;
    background: rgb(255, 255, 255);
    height: auto;
    max-height: 200px;
    overflow: auto;
    border-width: 0px 1px 1px;
    border-style: none solid solid;
    border-right-color: rgb(204, 204, 204);
    border-bottom-color: rgb(204, 204, 204);
    border-left-color: rgb(204, 204, 204);
    border-image: initial;
    border-top-color: initial;
    z-index: 101;
}

    .css-o023wx li button {
        padding: 8px 15px;
        display: block;
        cursor: pointer;
        color: rgb(62, 62, 62);
        width: 100%;
        text-align: left;
        line-height: 20px;
    }

.tooltip {
    position: relative;
    display: inline-block;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: max-content;
        background-color: #fb2c36;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -60px;
    }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #fb2c36 transparent transparent transparent;
        }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

/*Multistep Form*/
.formbold-main-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

.formbold-form-wrapper {
    margin: 0 auto;
    max-width: 550px;
    width: 100%;
    background: white;
}

.formbold-steps {
    padding-bottom: 18px;
    /*margin-bottom: 15px;*/
    border-bottom: 1px solid #DDE3EC;
    overflow-x: auto;
}

    .formbold-steps ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        gap: 40px;
    }

    .formbold-steps li {
        display: flex;
        align-items: center;
        gap: 14px;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #536387;
    }

        .formbold-steps li span {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #DDE3EC;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            color: #536387;
        }

        .formbold-steps li.active {
            color: #07074D;
        }

            .formbold-steps li.active span {
                background: #6A64F1;
                color: #FFFFFF;
            }

.formbold-input-flex {
    display: flex;
    gap: 20px;
    margin-bottom: 22px;
    margin-top: 20px;
}

    .formbold-input-flex > div {
        width: 50%;
    }

.formbold-form-input {
    width: 100%;
    padding: 13px 22px;
    border-radius: 5px;
    border: 1px solid #DDE3EC;
    background: #FFFFFF;
    font-weight: 500;
    font-size: 16px;
    color: #536387;
    outline: none;
    resize: none;
}

    .formbold-form-input:focus {
        border-color: #6a64f1;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
    }

.formbold-form-label {
    color: #07074D;
    font-weight: 500;
    font-size: 16px;
    line-height: 25px;
    display: block;
    margin-bottom: 15px;
}

.formbold-form-confirm {
    border-bottom: 1px solid #DDE3EC;
    padding-bottom: 35px;
}

    .formbold-form-confirm p {
        font-size: 16px;
        line-height: 24px;
        color: #536387;
        margin-bottom: 22px;
        width: 75%;
    }

    .formbold-form-confirm > div {
        display: flex;
        gap: 15px;
    }

.formbold-confirm-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
    border: 0.5px solid #DDE3EC;
    border-radius: 5px;
    font-size: 16px;
    line-height: 24px;
    color: #536387;
    cursor: pointer;
    padding: 10px 20px;
    transition: all .3s ease-in-out;
}

.formbold-confirm-btn {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);
}

    .formbold-confirm-btn.active {
        background: #6A64F1;
        color: #FFFFFF;
    }

.formbold-form-step-1,
.formbold-form-step-2,
.formbold-form-step-3,
.formbold-form-step-4 {
    display: none;
}

    .formbold-form-step-1.active,
    .formbold-form-step-2.active,
    .formbold-form-step-3.active,
    .formbold-form-step-4.active {
        display: block;
    }

.formbold-form-btn-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 25px;
    margin-top: 25px;
}

.formbold-back-btn {
    align-items: center;
    gap: 5px;
    font-size: 16px;
    border-radius: 5px;
    padding: 10px 25px;
    border: none;
    font-weight: 500;
    background-color: #ff3030;
    color: white;
    cursor: pointer;
    display: none;
}

    .formbold-back-btn.active {
        display: block;
    }

.formbold-btn.active {
    display: block;
}

.formbold-btn {
    display: none;
}

.formbold-submit-btn {
    display: none;
}

    .formbold-submit-btn.active {
        display: block;
    }

@media only screen and (max-width: 600px) {
    .formbold-input-flex {
        display: flow;
        margin-bottom: 0px;
        margin-top: 0px;
    }
}

.imgOverlay11 {
    position: relative;
    width: 100%;
    /*background: linear-gradient(6deg, #ffffff87, hsl(0deg 0% 100% / 22%));*/
    background: linear-gradient(0deg, #fff, hsla(0, 0%, 100%, .07));
    color: #fb2c36;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: -25px;
}

.images1 {
    height: 200px;
    width: -webkit-fill-available;
    overflow: hidden;
    position: relative;
    /*background-color: #f1f1f1;*/
}

.btn-rounded-small {
    margin: 0px;
    border-radius: 15px;
    text-align: center;
    color: #3e3e3e;
    font-size: 24px;
    height: 25px;
    line-height: 15px;
    padding: 2px 10px;
    display: inline-block;
    align-items: center;
    /*border: 1px solid #20a397;*/
}

.cursor-point {
    cursor: pointer;
}

/*.formbold-callback-btn.active {
        display: block;
    }*/

.scroll-box {
    height: 1150px;
    overflow-y: scroll; /* Enables vertical scroll */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE & Edge */
}

    .scroll-box::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

.formbold-btn {
    /*display: flex;*/
    align-items: center;
    gap: 5px;
    font-size: 16px;
    border-radius: 5px;
    padding: 10px 25px;
    border: none;
    font-weight: 500;
    background-color: #6A64F1;
    color: white;
    cursor: pointer;
}

    .formbold-btn:hover {
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
    }

.formbold-submit-btn, .formbold-callback-btn {
    /*display: flex;*/
    align-items: center;
    gap: 5px;
    font-size: 16px;
    border-radius: 5px;
    padding: 10px 25px;
    border: none;
    font-weight: 500;
    background-color: #40b339;
    color: white;
    cursor: pointer;
}

    .formbold-submit-btn:hover, .formbold-callback-btn:hover {
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
    }
/*Plus Button*/
.number-input-wrapper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
    width: fit-content;
}

    .number-input-wrapper button {
        background-color: #f0f0f0;
        border: none;
        padding: 8px 12px;
        cursor: pointer;
        font-size: 18px;
        transition: background-color 0.2s;
    }

        .number-input-wrapper button:hover {
            background-color: #ddd;
        }

    .number-input-wrapper input[type="number"] {
        width: 60px;
        border: none;
        text-align: center;
        font-size: 16px;
        padding: 6px;
        outline: none;
    }

/* Optional: remove number arrows (for most browsers) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/**/
._1IDFBSq {
    bottom: auto;
    left: calc(100% + 8px);
    right: -8px;
    top: 0;
    padding: 15px;
    transform: translateX(0);
}

._2DEdEQx {
    height: 42px;
    min-width: 50px;
    width: auto;
}

.tooltipCommon {
    position: relative;
}

.tooltipBox {
    /*bottom: calc(100% + 8px);*/
    width: 120px;
    min-width: 130px;
    background-color: #fff;
    font-size: 12px;
    line-height: 16px;
    padding: 6px 20px;
    position: absolute;
    box-shadow: 0 1px 6px #999;
    white-space: pre-wrap;
    display: none;
    left: 10%;
}

    .tooltipBox:hover {
        display: block;
    }

.z3 {
    z-index: 3 !important;
}

.ellipsis {
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}
