.chat-container * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Google Sans Flex", sans-serif;
}
.chat-container p {
    padding: 10px 0;     line-height: 25px;
}
.chat-container h3 {
    margin-bottom: 20px;
}
.chat-header h3 {
    margin: 0;
}
.chat-container li {
    margin-bottom: 10px;
}

.chat-toggle{
position:fixed;
right:15px;
bottom:15px;
width:65px;
height:65px;
border-radius:50%;
background:#2c2c2c;
display:flex;
justify-content:center;
align-items:center;
color:#fff;
font-size:28px;
cursor:pointer;
box-shadow:0 15px 35px rgba(0,0,0,.2);
transition:.35s;
z-index:1000;
}
.avatar img {
    max-width: 25px;
}
.poweredby.text-center
{
    padding: 14px 0;
    text-align: center;
    font-size: 11px;
    position: fixed;
    bottom: 0;
    width: 100%;
        background: #fff;
}

.chat-toggle:hover{
transform:scale(1.08);
}

.chatSuggestionBox{display: none; padding: 20px;}
.chatSuggestionBox.showB2 {
    display: block;
}

.ctaInformation.showB2.hideB1 {
    display: none;
}

.chat-container{
position:fixed;
z-index:99999;
right:35px;
bottom:110px;
width:370px;
height:620px;

background:rgba(255,255,255,.75);

backdrop-filter:blur(18px);

border-radius:5px;

overflow:hidden;

box-shadow:0 20px 60px rgba(0,0,0,.2);

display:flex;
flex-direction:column;

transform:translateY(30px);

opacity:0;

pointer-events:none;

transition:.35s;
}

.chat-container.active{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}

.chat-header {
    height: 80px;
    background: #ffffff;
    color: #2c2c2c;
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #ccc;
}

.avatar{

width:52px;

height:52px;

border-radius:50%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

margin-right:15px;
}

.title h3{
font-size:18px;
}

.title span{
font-size:13px;
opacity:.8;
}

.close-chat{

margin-left:auto;

background:none;

border:none;

color:#fff;

font-size:24px;

cursor:pointer;
}

.chat-body{

/*flex:1;

padding:20px;*/

overflow-y:auto;

background:#f8fbff;
}

.message{

padding:12px 18px;

margin-bottom:15px;

border-radius:3px;

max-width:75%;

animation:fade .3s;
}

.bot{

background:#fff;

box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.user {
    margin-left: auto;
    background: #2c2c2c;
    color: #fff;
}
.chat-footer{

display:flex;

display: none;

background:#fff;

gap:10px;
}
/*.letConnect{display: none;}*/
.chat-footer.active {
    display: block;
    width: 100%;
    padding: 80px 20px 20px;
    position: relative;
    bottom: 30px;
}
.letConnect.active {
    position: fixed;
    bottom: 112px;
    right: 0;
    z-index: 2;
    width: 100%;
    border-radius: 0;
}
.chat-body.activeChat {
    flex: 1;
    padding: 20px;
    z-index: 1;
}
.chat-footer input {
    flex: 1;
    border: none;
    padding: 14px;
    border-radius: 40px;
    background: #e7e7e7;
    outline: none;
    font-size: 15px;
    width: 80%;
    border: 1px solid #ccc;
}
.messageButton {
    position: relative;
    top: -55px;
}
.aiMessageText{display: none}

.aiMessageText.activeChatText {
    display: block;
}
.aiMessageText ul {
    padding: 0 0 0 20px;
    margin-bottom: 20px;
}
.startConversation {
    padding: 30px;
}
div#startConversation {
    overflow: auto;
    height: 540px;
    position: fixed;
    top: 80px;
    background: #fff;
    z-index: 0;
    width: 100%;
}

.chat-footer button{

width:52px;
    height: 52px;
border:none;

background:#f17929;

color:#fff;

border-radius:50%;

font-size:18px;

cursor:pointer;
}
.f-display-none{display: none}
.messageButton button.hcw-button._filled._with-text {
    width: 100%;
    padding: 14px 0;
    margin: 70px 0 0 0;
    background: #fff;
    border: 1px solid #2c2c2c;
    font-size: 20px;
    display: flex;
    gap: 15px;
    justify-content: center;
    cursor: pointer;
}
i.hcw-button__icon {
    margin: 3px 0 0 0;
}
.welcomeText strong {
    font-size: 24px;
    font-weight: 400;
}
.ctaInformation {
    display: none;
}
.welcomeText.hideB1 {
    display: none;
}

.ctaInformation.showB2 {
    display: block;
}
.ctaInformation.showB2 {
    display: block;
    
}
.ctaInformation.showB2 strong, .chatSuggestionBox strong {
    font-size: 19px;
    margin-bottom: 25px;
    display: inline-block;
    font-weight: 400;
}
.ctaInputField input {
    width: 100%;
    margin-bottom: 16px;
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid #ccc;
}
.chatSuggestionBox ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.chatSuggestionBox ul li button {
    border: 1px solid #999;
    padding: 12px;
    margin-bottom: 14px;
    border-radius: 4px;
    position: relative;
    width: 100%;
    text-align: left;
    font-size: 17px;
    background: none;
}
.title.mbt-5 {
    margin: 30px 0 20px;
}
.chatCalendyBox{display: none}
.chatCalendyBox.active{display: block;}
.calenderOpen img {
    max-width: 100%;
}
.chatSuggestionBox ul li button i.ion {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0px, -50%);
}
.chatSuggestionBox .title {
    margin-bottom: 15px;
}
.ThankYouPopup{display: none}
.ThankYouPopup.active{display: block;}
.boldTitle {
    font-size: 35px;
    margin-top: 60px;
}
.otherOption {
    display: none;
}
.otherOption.show {
    display: block;
}
textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #5b5b5b;
}
button.ctaSubmitButton {
    width: 100%;
    padding: 14px;
    text-transform: uppercase;
    background: #f17929;
    border: 1px solid #f17929;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
}

li.chatBox-has-children a {
    color: #2c2c2c;
    text-decoration: none;
}

li.chatBox-has-children a i.ion {
    position: absolute;
    font-size: 1.25rem;
    line-height: 3.125rem;
    top: 0;
    right: 0;
    width: 3.125rem;
    height: 3.125rem;
    text-align: center;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.chatSubSuggestionBox{display: none}
.chatSuggestionBox.showB2.hideB1{display: none;}
.chatSubSuggestionBox.active{display: block;}


div#backArrow {
    float: left;
    transform: rotate(90deg);
    font-size: 25px;
}
.titleHead {
    width: 100%;
    text-align: center;
    font-size: 20px;
    position: relative;
    top: 4px;
    color: #f17929;
    left: 0;
}

.typing {
    display: none;
    padding-left: 20px;
    padding-bottom: 10px;
    font-size: 13px;
    color: #777;
    position: relative;
    z-index: 9;
    top: -15px;
}

.typing.active{
display:block;
}

@keyframes fade{

from{

opacity:0;

transform:translateY(10px);

}

to{

opacity:1;

transform:translateY(0);

}

}

::-webkit-scrollbar{
width:5px;
}

::-webkit-scrollbar-thumb{
background:#cbd5e1;
border-radius:20px;
}

@media(max-width:480px){

.chat-container {
        width: 95%;
        right: 2.5%;
        bottom: 50px !important;
        height: 92%;
    }

}