/* FORM AGENDA */
.hidden-message-agenda {
    visibility: hidden;
}

/* FORM AGENDA */


.form-container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    overflow-y:scroll;
    height: 60vh;
    scroll-behavior: smooth;
    padding: 0px 20px;
    /* position: relative; */
}
.col-md-12 {
    width: 50%;
}

.cta-container-wpp {
    display: flex;
    /* background-image: url(../img/imagesBannersFirts/banner-1-copy.jpg); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: center;
    width: 50%;
}
.form-container::-webkit-scrollbar {
    width: 0px;
}

.message-in ._amk7, .tail-override-left ._amk7 {
    left: -20px;
}

.message-in ._amk7 {
    color: #202c33;
}

.team-member-info {
    background-image: url(../img/backgroun-images/fundo-whats.png.webp);
    border-radius: 0px 0px 10px 10px;
    position: relative;
}
._amk4 {
    position: absolute;
    left: -8px;
    top: -9.5px;
}
._amk7 {
    position: absolute;
    top: 0;
    z-index: var(--layer-1);
    display: block;
    width: 8px;
    height: 13px;
}
.message-out ._amk7, .tail-override-right ._amk7 {
    right: -8px;
}
.message-out ._amk7 {
    color: #005c4b;
}
.message-out {
    position: absolute;
    right: 1px;
    top: -9px;
}
.header-whats {
    display: flex;
    width: 100%;
    background: #f1f2f6;
    height: 100px;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-radius:  10px 10px 0px 0px;
}

.whats-user img{
    border-radius: 100%;
}

.title-header-whats p{
    color: #000000;
    font-size: 18px;
    align-content: center;
    margin: 0;
}

.tools-whats svg {
    color: #646464;
}

.incorrect-name,
.incorrect-age,
.incorrect-hour,
.incorrect-email,
.incorrect-age,
.incorrect-phone {
    color: #a10404;
    font-size: 10px;
}

.hidden-alert {
    visibility: hidden;
}

.show-alert {
    visibility: visible;
}

.hidden-btn {
    visibility: hidden;
}

.chat-container {

    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.title-form-int {
    color: #000000;
    font-size: 18px;
    margin: 0;
}

.inp-but-message {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.chat-message{
    /* background-color: #005d4a; */
    background-color: #fffffe;
    border-radius: 0px 10px 10px 10px;
    padding: 10px;
    margin-bottom: 10px;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    max-height: 130px;
}

.response-message {
    background-color: #d8fdd2;
    border-radius: 10px 0px 10px 10px;
    padding: 10px;
    margin-bottom: 10px;
    min-width: 30%;
    width: auto;
    align-self: self-end;
    /* opacity: 0; */
    /* transform: translateY(20px); */
    /* transition: opacity 0.5s ease, transform 0.5s ease; */
    /* max-height: 130px; */
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    -webkit-text-fill-color: rgb(0, 0, 0) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.initial-message {
    display: flex;
    justify-content: space-between;
    opacity: 1;
    transform: translateY(0);
    margin-top: 100px;
}

.message-chat {
    color: #000000;
}

.header-chat,
.message-chat {
    margin: 0 0 10px;
}

.name-input[type="text"],
.email-input[type="text"],
.question-input[type="text"],
.fone-input[type="text"] {
    padding: 10px;
    background: none;
    margin-bottom: 10px;
    color: #fff !important;
    font-weight: 300;
    letter-spacing: .1rem;
    border-bottom: 1px solid #fff;
    width: 80%;

}
.input-send[type="text"] {
    padding: 10px;
    background: none;
    /* margin-bottom: 10px; */
    color: #000!important;
    font-weight: 300;
    letter-spacing: .1rem;
    
    width: 70%;
    border: none;
    /* margin-top: 5px; */
    background-color: white;
    border-radius: 5px !important;
}

.response-text {
    color: rgb(0, 0, 0);
}

.button-date, .button-hour {
    background-color: #005d4a !important;
    border-radius: 5px;
}

.button-start,
.button-name,
.button-email,
.button-question,
.buttton-send-message,
.button-fone,
.button-end  {
    border: none !important;
    background: transparent;
    cursor: pointer;
    color: #fff;
}
.button-submit-form {
    border: none !important;
    background: transparent;
    cursor: pointer;
    color: #fff;
    display: none;
}

.button-start:hover,
.button-name:hover,
.button-email:hover,
.button-question:hover,
.button-fone:hover,
.button-end:hover {
    opacity: 0.8;
}

.hidden-name,
.hidden-email,
.hidden-age,
.hidden-fone,
.hidden-hour,
.hidden-date,
.container-input-message-hidden,
.hidden-message,
.hidden-trat {
    display: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    -webkit-transition: opacity 1000ms, visibility 1000ms;
            transition: opacity 1000ms, visibility 1000ms;
}

.container-input-send-message {
    margin-top: 30px;
    display: flex !important;
    background-color: #f1f2f6
    ;
    width: 100%;
    justify-content: space-between;
    border-radius: 10px;
    margin-top: 100px;
    position: absolute;
    bottom: 0;
    right: 0;
}

.name-hidden-response,
.email-hidden-response,
.age-hidden-response,
.date-hidden-response,
.hour-hidden-response,
.fone-hidden-response {
    display: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    -webkit-transition: opacity 600ms, visibility 600ms;
            transition: opacity 600ms, visibility 600ms;
}

.show-response-message {
    display: block;
    visibility: visible;
    opacity: 1;
    /* transition: ease 0.5s; */
    transform: translateY(0);
    animation: fade 0.5s;
    width: 70%;
}

.show-name,
.show-email,
.show-date,
.show-hour,
.show-age,
.show-fone,
.show-message,
.show-trat
{
    display: block;
    visibility: visible;
    opacity: 1;
    /* transition: ease 0.5s; */
    transform: translateY(0);
    animation: fade 2s;
    width: 70%;
}

.container-input-message-show {
    display: flex;
    align-items: center;
    visibility: visible;
    opacity: 1;
    /* transition: ease 0.5s; */
    transform: translateY(0);
    animation: fade 1s;
    width: 100%;
    align-items: center;
    padding: 10px 0px;
    margin-bottom: 5px;
}
@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.chat-container form {
    display: flex;
    flex-direction: column;
}

.chat-container .chat-message {
    background: none !important;
}

.hidden-message .header-chat {
    margin: 0;
}

.container-final-message {
    height: 150px;
}

.btn-whats-mes-final {
    width: 100%;
    background: #03bb01;
    color: #fff !important;
    font-size: 22px;
    border: none;
    height: 50px;
    border-radius: 10px;
    text-align: center;
    align-content: center;
}

.btn-whats-mes-final:hover {
    opacity: 0.8;
}

.message-final {
    font-size: 20px;
    color: #000000;
   

}
.col-md-12 {
    width: 100%;
}
.container-cta-wpp .col-lg-6 {
    align-self: center;
    width: 50%;
    /* margin-top: 100px; */
}

.second-container-cta {
    
    width: 70%;
    margin: auto;
    border-radius: 10px;
}
.text-cta-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.container-cta-wpp {
    margin-bottom: 100px;
}
.container-contato-cta  .second-container-cta{
    width: 100%;
}