body {
    font-family: 'Poppins', sans-serif !important;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    height: 100vh;
    background: radial-gradient(circle at 50% 85%, #212121 0%, #171717 100%);
}

.logo-campanha {
    margin: 17px 30px 17px 0;
    border-right: solid 1px #ffffff21;
    float: left;
}

.titles {
    padding: 45px 0;
    color: #fff;
}

.funil-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -105px;
}

.funil {
    display: flex;
    flex-direction: column;
    margin-right: -220px;
    margin-top: 35px;
}

.etapa {
    padding: 27px 0 23px;
    color: #ffffff;
    margin: 0px 0 1px;
    padding-left: 35px;
    transition: background 0.3s ease-out, color 0.3s ease-out;
    line-height: 22px;
    border-top: solid 1px #ffffff1a;
    background: linear-gradient(to right, #515151, #171717) !important;
}

.etapa:hover {
    background: #cacaca8c !important;
    cursor: pointer;
    color: #ffffff;
}

.one {
    clip-path: polygon(0% 0%, 80% 0%, 98% 100%, 0% 100%);
    width: 220px;
    border-top-left-radius: 15px;
}

.two {
    clip-path: polygon(0% 0%, 83% 0%, 95% 100%, -5% 100%);
    width: 258px;
}

.three {
    clip-path: polygon(0% 0%, 83% 0%, 93% 100%, 0% 100%);
    width: 302px;
}

.four {
    clip-path: polygon(0% 0%, 83% 0%, 92% 100%, 0% 100%);
    width: 344px;
}

.five {
    clip-path: polygon(0% 0%, 83% 0%, 91% 100%, 0% 100%);
    width: 386px;

}

.six {
    clip-path: polygon(0% 0%, 83% 0%, 90% 100%, 0% 100%);
    width: 430px;
    border-bottom-left-radius: 15px;
}

.funil-gestor {
    filter: drop-shadow(-8px 0px 20px #262626);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: -30px;
}

.funil-vendedor {
    filter: drop-shadow(-8px 0px 20px #262626);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.box {
    font-size: 14px;
    padding: 23px 0 19px;
    color: white;
    text-align: center;
    line-height: 31px;
    display: flex;
    gap: 6px;
    justify-content: center;
    transition: background 0.3s ease-out, color 0.3s ease-out;
    align-items: center;
}

.box:hover {
    /* background-color: #ff0000 !important;
    color: #ffffff; */
    cursor: pointer;
}

.one-one {
    background: radial-gradient(circle at 50% 85%, #e7e7e7 0%, #ffffff);
    clip-path: polygon(0% 0%, 100% 0%, 94% 100%, 6% 100%);
    width: 550px;
    margin: 2px auto;
    color: #000;
}

.one-one:hover {
    background: #fff;
    color: #000;
}

.two-two {
    background: radial-gradient(circle at 50% 85%, #b7b7b7 0%, #ababab);
    clip-path: polygon(0% 0%, 100% 0%, 93% 100%, 7% 100%);
    width: 470px;
    margin: 0 auto;
}

.two-two:hover {
    background: #fff;
    color: #000;
}

.three-three {
    background: radial-gradient(circle at 50% 85%, #1eb85c 0%, #21b154);
    clip-path: polygon(0% 0%, 100% 0%, 92% 100%, 7% 100%);
    width: 397px;
    margin: 2px auto;
}

.three-three:hover {
    background: #0d7333;
    color: #ffffff;
}

.four-four {
    background: radial-gradient(circle at 50% 85%, #0d7333 0%, #197331);
    clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 9% 100%);
    width: 330px;
    margin: 0 auto;
}

.four-four:hover {
    background: #0d7333;
    color: #ffffff;
}

.five-five {
    background: radial-gradient(circle at 50% 85%, #055b25 0%, #065924);
    clip-path: polygon(0% 0%, 100% 0%, 88% 100%, 11% 100%);
    width: 261px;
    margin: 2px auto;
}

.five-five:hover {
    background: #0d7333;
    color: #ffffff;
}

.six-six {
    background: radial-gradient(circle at 50% 85%, #08531e 0%, #02491c) !important;
    clip-path: polygon(0% 0%, 100% 0%, 84% 100%, 15% 100%);
    width: 195px;
    margin: 0 auto;
}

.six-six:hover {
    background: #08531e;
    color: #ffffff;
}

.logo {
    width: 60px;
    height: 60px;
    background: #fff;
    padding: 7px;
    z-index: 9;
    float: left;
    border-radius: 55px;
    margin: 15px;
    transform: rotate(90deg);
}

.numbers {
    font-weight: bold;
    padding-right: 58px;
}

.numbers-gestor {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    font-weight: bold;
    font-size: 23px;
}

.form-calculadora {
    /*background:radial-gradient(circle at 50% 85%, #ffffff00 0%, #ffffff1f 100%);*/
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.form-calculadora label {
    left: 12px !important;
    color: #fdfdfd;
}

.content-center {
    margin: 0 auto;
    text-align: center;
    display: flex;
}

.grid {
    display: grid;
}

/* Formulário */
.form-select {
    border: solid 1px #ffffff14 !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

.form-select option {
    background-color: #17171795 !important;
    color: #ffff !important;
}

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-floating>.form-control-plaintext~label::after,
.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-select~label::after {
    background-color: #002a5600 !important;
}

.form-floating>.form-control-plaintext~label,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    color: #8d8d8d;
    font-weight: 300;
}

.form-control {
    background-color: transparent !important;
    color: #ffffff !important;
    border: none;
    border: solid 1px #ffffff14 !important;
}

/* .modal-title {
    border-left: 5px solid;
    padding-left: 8px;
    border-color: orange;
} */

.modal{
    background-color: #0000009c !important;
}

.form-modal {
    background-color: transparent !important;
    color: #ffffff !important;
    border: solid 2px #dadada3a !important;
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-clip: padding-box;
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.modal-content {
    background: radial-gradient(circle at 50% 85%, #363636 0%, #171717 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: white;
    pointer-events: auto;
    /* background-color: var(--bs-modal-bg); */
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
}

.modal-header {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: var(--bs-modal-header-padding);
    border-bottom: none;
    border-top-left-radius: var(--bs-modal-inner-border-radius);
    border-top-right-radius: var(--bs-modal-inner-border-radius);
    background: linear-gradient(0deg, rgb(43 43 43) 0%, rgba(23, 23, 23, 1) 100%);
}

.modal-body{
        padding: 20px 40px;
}

.funil-container h3 {
    align-self: center;
}

/* Compatibilidade para navegadores WebKit (Chrome, Safari) */
input::-webkit-input-placeholder {
    color: #ffffff00 !important;
}

/* Compatibilidade para IE */
input:-ms-input-placeholder {
    color: #ffffff00 !important;
}

/* Compatibilidade para Microsoft Edge */
input::-ms-input-placeholder {
    color: #ffffff00 !important;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #e8e8e8;
    text-align: center;
    white-space: nowrap;
    background-color: #ffffff0d;
    border: var(--bs-border-width) solid #dee2e624;
    border-radius: var(--bs-border-radius);
}

input:-internal-autofill-selected {
    background-color: transparent !important;
    color: white !important;
}

.text-sub{
    color: #8d8d8d;
    margin-top: -10px;
}

.shadow-orange {
    -webkit-box-shadow: 3px 8px 38px 0px rgba(255, 132, 27, 0.67);
    -moz-box-shadow: 3px 8px 38px 0px rgba(255, 132, 27, 0.67);
    box-shadow: 3px 8px 38px 0px rgba(255, 132, 27, 0.67);
}

.vertical-info {
    transform: rotate(270deg);
    color: #fff;
    display: flex;
    margin-right: -125px;
}

.vertical-info h3 {
    width: 250px;
    margin-bottom: 0px;
}

.left {
    align-self: flex-start !important;
    font-size: 18px;
}

.la {
    font-size: 25px;
    vertical-align: sub;
}

.funil-gestor .la-binoculars {
    vertical-align: baseline;
    font-size: 29px !important;
}

.funil-vendedor .la-bullseye {
    vertical-align: baseline;
    font-size: 29px !important;
}

.btn-rounded {
    border-radius: 10px;
    padding: 17px 15px;
    width: 100%;
}

.btn-primary {
    background: linear-gradient(79deg, #055924, #157331 50%, #20b457);
    border: none;
}

.fade-in {
    opacity: 0;
    animation: fadeIn 2s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.btn {
    margin-bottom: 10px;
}

.btn-gray {
    background: linear-gradient(45deg, #81818199, #5d5d5d) !important;
    border: none !important;
}

.btn-gray:hover {
    background-color: #F44A00 !important;
    color: #ffff;
    border-color: #F44A00 !important;
}

.btn-limpar {
    color: #fff !important;
    font-size: 19px;
    border: solid 1px #ffffff42 !important;
    border-radius: 10px;
    width: 100%;
    display: block;
    padding: 13px;
    background-color: transparent;
}

.btn-limpar:hover {
    color: #fff !important;
    font-size: 19px;
    border: solid 1px #ffffff42 !important;
    border-radius: 10px;
    width: 100%;
    display: block;
    padding: 13px;
    background-color: #f32f39;
}

.btn-limpar:active {
    color: #fff !important;
    font-size: 19px;
    border: solid 1px #ffffff42 !important;
    border-radius: 10px;
    width: 100%;
    display: block;
    padding: 13px;
}

.btn .las {
    font-size: 25px;
    vertical-align: -2px;
}

footer {
    margin: 40px 0;
}

footer .logo-footer {
    width: 260px;
    margin: 0 auto;
}

.text-center {
    text-align: center;
    margin: 0 auto;
}

@media screen and (max-width:1435px) {
    .funil-container {
        zoom: .8;
    }
}

@media screen and (max-width:1185px) {
    body {
        height: 100% !important;
    }

    .form-calculadora label {
        font-size: 12px !important;
    }

    .funil-container {
        zoom: normal;
    }

    .funil-container {
        display: contents !important;
    }

    .vertical-info h3 {
        width: 350px;
        margin-bottom: 0px;
        padding: 30px 0;
    }

    .vertical-info {
        transform: rotate(270deg);
        color: #fff;
        margin-right: -340px;
        display: block;
        margin-left: 155px;
    }

    .funil-vendedor {
        /* filter: drop-shadow(10px 0px 20px #002a56); */
        display: flex;
        ;
        flex-direction: column;
        align-items: baseline;
        width: 100%;
    }

    .funil-gestor {
        margin-bottom: 40px;
    }
}

@media screen and (max-width:1185px) {
    .hide-mob {
        display: none;
    }
}

@media screen and (max-width:991px) {
    .etapa {
        width: 180px !important;
        clip-path: none !important;
    }

    .funil {
        margin-right: -40px;
        margin-top: 20px;
    }

    .vertical-info {
        margin-right: -360px;
        display: block;
        margin-left: 45px;
    }
}

@media screen and (max-width:767px) {
    .funil-container {
        zoom: .8 !important;
    }

    .vertical-info {
        margin-left: 25px !important;
    }
}

@media screen and (max-width:640px) {
    .box {
        padding: 5px 0 5px !important;
    }
    
    .comp-meta{
        display: none;
         visibility: hidden;
    }
    
    .share-button {
    position: relative !important;
    left: 25px !important;
    top: -50px !important;
}
    .funil-gestor{
            padding: 0 40px;
    }
    
    .funil-vendedor{
            padding: 0 40px;
    }

    .content-center {
        display: block;
    }

    .logo-campanha {
        border: none;
        margin: 0 auto;
    }

    .funil-container {
        zoom: normal !important;
    }

    .vertical-info {
        visibility: hidden;
         opacity: 0;
        position: absolute;
        width: 0;
        height: 0;
        display: none;
        transform: rotate(0);
        width: 100%;
        position: relative;
        height: auto;
        margin: 0 auto;
    }

    .logo {
        transform: rotate(0);
    }

    .funil {
          visibility: hidden;
         opacity: 0;
        position: absolute;
        width: 0;
        height: 0;
        display: none;
        display: none !important;
        width: 90%;
        margin: -20px auto 25px;
    }

    .etapa {
        width: 32.8% !important;
        clip-path: none !important;
        float: left;
        border: none;
        margin: 1px 1px;
        border-radius: 13px;
        padding: 15px;
    }

    .funil-gestor {
        display: block;
        width: 100%;
        margin: 0 auto 30px;
        text-align: center;
    }

    .one-one {
        width: 100%
    }

    .two-two {
        width: 88%
    }

    .three-three {
        width: 76%
    }

    .four-four {
        width: 65%
    }

    .five-five {
        width: 52%
    }

    .six-six {
        width: 39%
    }

    .numbers-gestor {
        font-size: 18px;
    }

    .content-center img {
        width: 100% !important;
    }
}

@media screen and (max-width:440px) {
    .etapa {
        width: 49.4% !important;
        height: 75px;
    }
}

@media screen and (max-width:367px) {
    .etapa {
        width: 49.3% !important;
        height: 75px;
    }
}

.btn-share {
    margin-bottom: 0;
    -webkit-animation: DealersPulse 1.5s infinite;
    animation: DealersPulse 1.5s infinite;
    transition: all 0.3s ease;
    background: #ffff;
    color: #181818;
    border: none;
    border-radius: 40px;
}

.btn-share:hover {
    margin-bottom: 0;
    -webkit-animation: DealersPulse 1.5s infinite;
    animation: DealersPulse 1.5s infinite;
    transition: all 0.3s ease;
    background: #147332 !important;
    color: #ffffff;
    /* border: 6px solid; */
}

.btn-share:active {
    margin-bottom: 0;
    -webkit-animation: DealersPulse 1.5s infinite;
    animation: DealersPulse 1.5s infinite;
    transition: all 0.3s ease;
    background: #fff !important;
    color: #003f74 !important;
    border: 6px solid !important;
}

.share-button {
    position: absolute;
    bottom: 0;
    left: -140px;
}

.form-select:disabled {
    background-color: #042f5b;
}

@-webkit-keyframes DealersPulse {
    0% {
        box-shadow: 0 0 0 0px #fff;
    }

    100% {
        box-shadow: 0 0 0 20px transparent;
    }
}

@keyframes DealersPulse {
    0% {
        box-shadow: 0 0 0 0px #fff;
    }

    100% {
        box-shadow: 0 0 0 20px transparent;
    }
}