@font-face {
  font-family: 'Dubai Medium';
  font-display: swap;
  src: url(fonts/Dubai-Medium.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Dubai Light';
  font-display: swap;
  src: url(fonts/Dubai-Light.ttf) format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Dubai Regular';
  font-display: swap;
  src: url(fonts/Dubai-Regular.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Dubai Bold';
  font-display: swap;
  src: url(fonts/Dubai-Bold.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
}


h1, h2, h3, h4, h5  {
  font-family: 'Dubai Bold' !important;
}

p, span, li, a {font-family: 'Dubai Regular' !important;}

body {font-family: 'Dubai Regular' !important;}

a.nav-link{ font-size: 0.85rem !important; font-family: 'Dubai Bold' !important; letter-spacing: 1px; }

.faqButton{font-family: 'Dubai Regular' !important;}

.topspacer{ margin-top: 40px !important;}

div.mt-5{ margin-bottom: 30px !important;}


.chat2ai_web .container_chat {
box-sizing: border-box;
transition: ease 0.5s;
text-decoration: none;
list-style-type: none;
background: #fff !important;
color: white;
width: 350px;
background: #282639;
float: right;
margin-top: 0px;
border-radius: 10px;
position: fixed;
box-shadow: #292739 0 10px 20px;
bottom: 100px;
right: 50px;
z-index: 100000;
}

.chat2ai_web .container_chat_full{
position: absolute;
left: 0px;
top: 0px;
bottom: 0px !important;
right: 0px !important;
width: auto;
height: auto;
}

.chat2ai_web .header_chat {
background: rgb(34, 49, 119);
display: flex;
padding: 5px;
border-radius: 10px 10px 0 0;
}

.chat2ai_web .header_chat_full{
border-radius: 0px !Important;
}

.chat2ai_web .chatbox {
padding: 0px 3px 10px 3px;
display: flex;
flex-direction: column;
gap: 20px;
}

.chat2ai_web .chatbot_full
{
height:100%;
}

.chat2ai_web .webchat_full 
{
height:100%;
}

.chat2ai_web .webchat_full>div
{
height:100%;
}

.chat2ai_web #webchat{
zoom:80%;
}

.chat2ai_web .webchat__bubble__content p, .webchat__bubble__content span
{
font-size: 16px;
font-weight: 400;
}

.chat2ai_web .react-film__filmstrip__list
{
display:inline-block !important;
}

.chat2ai_web .react-film__filmstrip__list li
{
display:inline-block !important;
padding-left:0px !important;
}

.chat2ai_web .webchat__suggested-action,.ac-pushButton
{
border-radius: 20px !important;
border: 1px solid #37a758;
background-color: #fff;
color: #37a758 !important;
border-color:#37a758 !important;
}

.chat2ai_web .react-film__main__slider 
{
  display: none !important;
}

.chat2ai_web .webchat__bubble--from-user .webchat__bubble__content
{
border-radius:20px 20px 0px 20px !important;
}

.chat2ai_web .webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content
{
border-radius:20px 20px 20px 0px !important;
}

.chat2ai_web .close_chat:before {
  content: "\00d7";
  position: relative;
  top: 0px;
}

.chat2ai_web .close_chat {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgb(34, 49, 119);
color: white;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: -80px;
right: 0;
font-size: 40px;
text-decoration: none;
text-align:center;
}

.chat2ai_web .close_chat:hover {
  opacity: 0.8 !important;
  color:#fff !important;
  zoom:105%;
}

.chat2ai_web .open_chat {
position: fixed;
bottom: -10px;
right: 0px !important;
width: 150px;
height: 100px;
background-image: url(https://s3-ap-south-1.amazonaws.com:443/bot-bkt/prod/20722/20722-Icon-EN.png);
background-size: contain; 
cursor:pointer;
}

.webchat_full>div>div{
height:100% !important;
}

.chat2ai_web .close_chat:hover ion-icon {
transform: rotate(360deg);
}
.chat2ai_web .close_chat ion-icon {
font-size: 40px;
}

.chat2ai_web .webchat__basic-transcript__focus-indicator
{
border:none !important;
}

.webchat__upload-button{
display: none !important;
}


.navbar-collapse{
  
}

.webchat__send-box__main{
  background: #FFF;
  border-top: 1px solid #EFEFEF;
  border-radius: 0px !important;
}
.bg{
  position:relative;
}
.bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(90, 106, 191, 0.5), rgba(0, 0, 0, 0.5));

  
  pointer-events: none; /* Allow clicks through the overlay */
}

.webchat__defaultAvatar
{
  border-radius:0px !Important;
}

.webchat__fileContent__badge
{
flex: none !important;
}

.chat2ai_web .webchat__fileContent{
background-image: url('https://chat2ai.s3.ap-south-1.amazonaws.com/attachment-63-433808.jpg');
height: 200px;
background-size: contain;
background-position: center;
background-color:#fff;
background-repeat: no-repeat;
}

.chat2ai_web .webchat__fileContent__downloadIcon{
position: absolute;
right: 10px;
bottom: 10px;
background: #37a758;
border-radius: 40px;
stroke: #fff;
fill: #fff !important;
}

.chat2ai_web .whatsappAvatar svg
{
stroke: #37a758;
fill: #37a758 !important;
}

.chat2ai_web .websiteAvatar svg
{
stroke: rgb(34, 49, 119);
fill: rgb(34, 49, 119) !important;
}

.chat2ai_web .facebookAvatar svg
{
stroke: #006AFF;
fill: #006AFF !important;
width:32px !important;
height:32px !important;
}

a.nav-link {
  font-size: 0.85rem !important;
  font-family: 'Dubai Bold' !important;
  letter-spacing: 1px;
}

.typing{
position:absolute;bottom: 130px;left: 70px;display:none;    z-index: 1000;
}
.chat2ai_web .informasi:link,
.chat2ai_web .informasi:visited {
color: #444;
text-decoration: none;
transition: all 0.4s ease-in-out;
}
/* CSS Multiple Whatsapp Chat */
.chat2ai_web #whatsapp-chat {
position: fixed;
background: #fff;
width: 350px;
border-radius: 10px;
box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);
bottom: 100px;
right: 25px;
overflow: hidden;
z-index: 99;
animation-name: showchat;
animation-duration: 1s;
transform: scale(1);
}

.chat2ai_web a.blantershow-chat {
background: linear-gradient(to right top, #6f96f3, #164ed2);
color: #fff;
position: fixed;
z-index: 98;
bottom: 25px;
right: 30px;
font-size: 15px;
padding: 10px 20px;
border-radius: 30px;
box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);
}

.chat2ai_web a.blantershow-chat i {
transform: scale(1.2);
margin: 0 10px 0 0;
}

.chat2ai_web .header-chat {
background: rgb(34, 49, 119);
color: #fff;
padding: 20px;
}

.chat2ai_web .header-chat h3 {
margin: 0 0 10px;
}

.chat2ai_web .header-chat p {
font-size: 14px;
line-height: 1.7;
margin: 0;
}

.chat2ai_web .info-avatar {
position: relative;
}

.chat2ai_web .info-avatar img {
border-radius: 100%;
width: 50px;
float: left;
margin: 0 10px 0 0;
}

.chat2ai_web a.informasi {
padding: 20px;
display: block;
overflow: hidden;
animation-name: showhide;
animation-duration: 2.5s;
}

.chat2ai_web a.informasi:hover {
background: #f1f1f1;
}
.chat2ai_web .info-chat span {
display: block;
}
.chat2ai_web #get-label,
.chat2ai_web span.chat-label {
font-size: 12px;
color: #888;
}

.chat2ai_web #get-nama,
.chat2ai_web span.chat-nama {
margin: 5px 0 0;
font-size: 15px;
font-weight: 700;
color: #222;
}

.chat2ai_web #get-label,
.chat2ai_web #get-nama {
color: #fff;
}

.chat2ai_web span.my-number {
display: none;
}

.chat2ai_web .blanter-msg {
color: #444;
padding: 20px;
font-size: 12.5px;
text-align: center;
border-top: 1px solid #ddd;
}
.chat2ai_web textarea#chat-input {
border: none;
width: 100%;
height: 20px;
outline: none;
resize: none;
}
.chat2ai_web a#send-it {
color: #555;
width: 40px;
margin: -5px 0 0 5px;
font-weight: 700;
padding: 8px;
background: #eee;
border-radius: 10px;
}
.chat2ai_web .first-msg {
background: #f5f5f5;
padding: 30px;
text-align: center;
}
.chat2ai_web .first-msg span {
background: #e2e2e2;
color: #333;
font-size: 14.2px;
line-height: 1.7;
border-radius: 10px;
padding: 15px 20px;
display: inline-block;
}
.chat2ai_web .start-chat .blanter-msg {
display: flex;
}
.chat2ai_web #get-number {
display: none;
}
.chat2ai_web a.close-chat {
position: absolute;
  top: 15px;
  right: 15px;
  color: #fff;
  font-size: 30px;
  width: 10px;
  height: 10px;
  fill: #fff;
  stroke: #fff;
}
@keyframes showhide {
from {
  transform: scale(0.5);
  opacity: 0;
}
}
@keyframes showchat {
from {
  transform: scale(0);
  opacity: 0;
}
}
@media screen and (max-width: 1000px) {
 
  .chat2ai_web .header_chat{
      border-radius:0px !important;
  }
  .chat2ai_web .chatbox {
      position: absolute;
      padding: 0px 3px 10px 3px;
      display: block;
      flex-direction: column;
      gap: 20px;
      bottom: 0px !important;
      z-index: -1;
  }
  .chat2ai_web .open_chat
  {
      right:-40px;
  }
  .chat2ai_web #webchat{
    zoom:100% !important;
  }
  .chat2ai_web #webchat>div{
  height: 93%;
  top: 0px;
  width: 100%;
  z-index: 0;
  position: fixed;
  margin-top: 65px;
  }
  .chat2ai_web #whatsapp-chat {
  right: 5%;
  font-size: 80%;
  left:5%;
  width:auto;
}
.chat2ai_web .webchat_full
{
    height:100%;
    width:100%;
}
.chat2ai_web .chatbot_full
{
    width:100% !important;
}
.chat2ai_web #chatContainer{
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  border-radius: 0px;
  width: auto;
  position: fixed;
}
.chat2ai_web .close_chat{
    top: 0px;
  position: fixed;
  right: 10px;
}

.hideFull{
    display:none;
}
}

@media screen and (max-width: 480px) {
.chat2ai_web #whatsapp-chat {
  right: 5%;
  font-size: 80%;
  left:5%;
  width:auto;
}


  .chat2ai_web #webchat{
    zoom:100% !important;
  }
}
.chat2ai_web .hide {
display: none;
animation-name: showhide;
animation-duration: 1.5s;
transform: scale(1);
opacity: 1;
}
.chat2ai_web .show {
display: block;
animation-name: showhide;
animation-duration: 1.5s;
transform: scale(1);
opacity: 1;
}

.webchat_full>div {
  background-color: transparent;
  height: 650px;
  /*margin-top: 70px;*/
  width: 100%;
  /*margin-bottom: 70px !important;*/
  z-index: 0;
}
.react-film__filmstrip li button{
  background-color: #C9C9C9 !important;
  color: #000 !important;
  border:none !important;
  border-radius: 10px !important;
}

.react-film__filmstrip li:nth-child(1) button{
  background-color: #000 !important;
  color: #fff !important;
  border:none !important;
  border-radius: 10px !important;
}

.webchat__bubble__content div{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px !important;
  font-weight: normal !important;
  border-radius: 5px !important;
}

.webchat__initialsAvatar{
  background: transparent !important;
}

.webchat__bubble{
  max-width: 100% !important;
}

.webchat__send-box__main{
  border-radius: 10px;
}

.webchat__send-box__main input{
  padding-top:10px !important;
}

.webchat__bubble__content{
  border: none  !important;
}

.ac-actionSet
{
  flex-direction:row !important ;
}

.ac-pushButton{
  background-color: #C9C9C9 !important;
  color: #000 !important;
  border:none !important;
  border-radius: 5px !important;
  margin-right: 10px;
}

.ac-pushButton:nth-child(0){
  border-radius: 10px !important;
  background-color: #000 !important;
  color: #fff !important;
  border:none !important;
  border-radius: 5px !important;
  margin-right: 10px;
}

.ac-image{
  width: 100% !important;
  margin-right: 10px !important;
}


body{
background-color: #F5F5F5;
font-family: 'Dubai Regular' !important;
}

div, p , h1,h2,h3,h4,h5,span {
font-family:'Dubai Regular' !important;
}

.webchat__send-box__main
{
margin-top:40px;
}
.bg{
background: url('img/bg.png');
background-size:100% 100% !important;
}
.green-text{
color:#064234;
}
.dark-green-text{
color:#021712;
}
.grey-text{
color:#757575;
}
.bg-light-green{
background: #69E4C8;
color: #232323;
}
.bg-dark-green{
background: #064234;
color:#fff;
}
.ac-textBlock
{
white-space: break-spaces !important;
}
.search-input {
position: relative;
}

.search-input input {
padding-left: 30px; /* Add space for the search icon */
}

.search-input .search-icon {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
font-size: 20px; /* Adjust the size of the icon */
}
.whiteplaceholder::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: fff;
opacity: 1; /* Firefox */
}

.whiteplaceholder:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: fff;
}

.whiteplaceholder::-ms-input-placeholder { /* Microsoft Edge */
color: #fff;
}

.nav-link:focus, .nav-link{
color: #fff !important;
}

.navbar-toggler{
border:1px solid #fff;
}

.nav-link:hover{
color:#777777 !important;
}

.webchat_full {
  top: 0px;
  bottom: 70px;
  position: absolute;
  height: auto !important;
}

.ac-actionSet
{
  overflow:auto !Important;
  overflow-y:hidden !Important;
}
.webchat_full>div{
height:100% !important;
}

input.preboxInput::-webkit-input-placeholder {
  text-align: center;
}
input.preboxInput:-moz-placeholder {
text-align: center;
}
.faqButton{
  color: #fff;
  background: #005f66;
  border: none;
  text-align: center;
  border: 1px solid #fff;
}

.preboxInput{
width:100%;
border:none;
text-align: center;
}

.preboxButtonHolder{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.flex-button {
  flex: 1;
  text-align: center;
  white-space: nowrap; /* Prevent text from wrapping */
}

.sendButton{
    background: #005F66;
    position: absolute;
    right:0px;
    height: 100%;
}


.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
z-index: 1000;
}
@media only screen and (min-width: 768px) and (max-width: 1124px)  {
.cookie-popup {
  bottom: 25% !important;
}
}
.cookie-popup {
display: none;
position: fixed;
top: 10%;
left: 20%;
width: 60%;
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
z-index: 999;
height: 700px;
border-radius: 10px;
background: #fff;
color: #000;
padding: 50px;
text-align: center;
overflow:scroll;
}

.cookie-popup p {
margin: 0;
}

.cookie-popup button {
border-radius: 10px;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
margin: 0 auto;
cursor: pointer;
width: 200px;
margin-top: 20px;
}

.cookie-popup button.decline {
background-color: darkgrey;
}

.cookie-popup .close-button {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
color: #005f66;
font-size: 25px;
width: 40px;
height: 40px;
border-radius: 20px;
border: 1px solid #005f66;
}

.cookie-popup .close-button a{
color: #005f66;
text-decoration: none !important;
}


.cookie-popup .close-button:hover {
text-decoration: none !important;
opacity:0.8;
}

.webchat__send-button svg, .webchat__send-button path{
  fill:#fff !important;
  stroke:#fff !important
}
.webchat__send-button
{
background:#005f66 !important; 
width: 70px !important;
}

.chatbotHolder{
  top: 72px  !important;
  position: absolute !important;
  bottom: 0px  !important;
  height: auto !important;
}
.text-start,.text-end
{
  font-size: 12px;
}

.faqButtonInside:hover{
opacity: 0.8;
}

.faqButtonInside.active{
float: none;
height: auto;
background-color: rgba(0, 95, 102, 1);
border-radius:5px;
cursor:pointer
}
.faqButtonInside{
float: none;
height: auto;
background-color: rgba(0, 95, 102, 0.7);
border:1px solid #fff;
border-radius:5px;
cursor:pointer
}
.ac-adaptiveCard{
padding: 10px !important;
}
.webchat__activity-status span{
padding-left:15px;
}

@media only screen and (max-width: 768px) {
    .bottom-0 {
    bottom: -100px !important;
    position: relative !important;
}
.webchat_full {
      top: 0px;
      bottom: 0px;
      position: absolute;
      height: auto !important;
  }
.bg
{
    display:none;
}
.text-start,.text-end
{
    font-size: 8px;
    width: 50%;
}
.cookie-popup
{
  width: 94% !important;
  left: 3% !important;
  bottom: 3% !important;
  height: 94% !important;
  top: 3%;
  padding: 20px !important;
}
  
  
  .typing{
    bottom: 60px;
  }

  .chatbotHolder{
      top: 72px  !important;
      position: absolute !important;
      bottom: 60px  !important;
      height: auto !important;
  }
}