/* body {
    margin: 0;
    font-family: Arial, sans-serif;
} */
.s-left-txt{float:left; width:45%;}
.s-right-btn{float:right;width: 50%;margin-right: 8px;}

.chat-icon {
    position: fixed;
    bottom: 5px;
    right: 0px;
    width: 90px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 999;
}

.chat-icon .icon {
    width: 90px;
    height: 90px;
   /*  background-color: #fff; */
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    /* border: 3px solid #09289d; */
}
 
.chat-container {
    display: none;
    position: fixed;
    bottom: -28px;
    right: 85px;
    width: 260px;
    height: 85px;
    padding: 10px;
    z-index: 99;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 30px;
/*     border-right: none; */
}
.chat-container h6 {
    font-size: 16px;
    z-index: 9999;
    line-height: 24px;
    position: absolute;
    color: #000;
}


/* .hide {
    display: none;
  }
      
  .chat-container:hover + .hide {
    display: block;
    color: red;
  } */

/* ------------------------------------ VOICE SPEECH TO TEXT CONVERTER----------------------------------------- */
/* *,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background:linear-gradient(to right bottom, #d13cff, #031f6a);
	color: #000;
	
	display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.voice_to_text{
  width: 600px;
  text-align: center;
}
h1{
	color: #fff;
	font-size: 50px;
}
#convert_text{
  width: 100%;
  height: 200px;
  border-radius: 10px;
  resize: none;
  padding: 10px;
  font-size: 20px;
  margin-bottom: 10px;
}
button{
	padding: 12px 20px;
  background: #0ea4da;
  border: 0;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  border-radius: 5px;
} */

/* =============================================== webchat style css================================================= */

/** CSS RESET **/
/* http://meyerweb.com/eric/tools/css/reset/ 
 v2.0 | 20110126
 License: none (public domain)

*/
/* html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
} */

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

.chatcontainer {
	    z-index: 9999;
    background: #fff;
    height: 430px;
    width: 450px; z-index: 9999;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    float: right;
    padding: 0 0px;
    /* border: 15px solid #333; */
    border-radius: 20px;
    top: 189px;
    position: fixed;
    right: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* .............................................. */
.voice-icon {
fill: currentColor;
font-size: 22px;
width: 1em;
}

/* 
ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
 */


#chatbot-container {
    height: 300px; /* Set a fixed height for the chatbot container */
    overflow-y: auto; /* Enable vertical scrollbar when content exceeds height */
    border: 1px solid #ccc;
    background: url(../css/beemee.png);
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat; /* Optional: Add border for visual clarity */
	    width: 100%;
  }

/** END OF CSS RESET **/

/* body {
    --white-color: #f3f4fb;
    --black-color: black;
    --blue-color: hwb(259 81% 12%);
    --light-purple-color: #7f7afc;
    --light-violet-color: #8c54f4;
    --darker-violet-color: #713dc3;
    --dark-violet-color: #5d2db0;
    font-family: Roboto, sans-serif;
    background-color: #fff;
    
}
 */
#form {
padding: 0.25rem;
/*position: fixed;*/
width: 400px;
float: right;
margin: 0 0px;
bottom: 0;
right: 0;
display: flex;
height: 3rem;
box-sizing: border-box;
  background-color: #fff; 
}

#message-input {
    flex-grow: 1;
    padding: 0 1rem;
    border-radius: 2rem;
    margin: 0.25rem;
    background-color: #fff;
}

#message-input:focus {
    outline: none;
}

.button {
    background: #ffdb58;
    border: none;
    padding: 0 1rem;
    margin: 0.25rem;
    border-radius: 3px;
    outline: none;
    color: #000;
    font: inherit;
}

.button:hover {
    background: #fff;
}

.button:active {
    background:#fff;
}

#messages {
    display: flex;
    flex-direction: column;
    padding:30px 10px 10px 10px;
    width: auto;
    min-height: 270px;

    
    
    
}

#backbutton {
    background-image: url(../css/arrow-down.png);
    background-size: 27px;
    background-repeat: no-repeat;
    width: 35px;
    height: 30px;
    float: right;
    background-color: #ffdb58; border: none; cursor:pointer;
}

#start-btn{background:#ffdb58;
border: none;
padding: 0 1rem;
margin: 0.25rem;
border-radius: 3px;
outline: none;
color: #000;
font: inherit;}

#start-btn:hover {
    background: #fff;
}

#start-btn:active {
    background: var(--dark-violet-color);
}
/* .message {
    padding: 0.5rem 1rem;
    border-radius: 10px;
    word-wrap: break-word;
    max-width: calc(100% - 40px - 32px);
    margin-bottom: 10px;
	
} */

.message {
     
    border-radius: 10px;
    word-wrap: break-word;
    max-width: calc(100% - 40px - 32px);
    margin-bottom: 5px;
    font-size: 14px;
    padding: 5px !important;
    line-height: 20px;
}

.message_received {
    background: var(--white-color);
    color: var(--black-color);
    border-bottom-left-radius: 0;
    align-self: flex-start;
    img {
        max-width:100%;
        max-height: 100%;
    }
    
}

.message_sent {
    color: black;
    background: rgb(175, 235, 255);
    border-bottom-right-radius: 0;
    align-self: flex-end;
}
.header {
    background-color: #ffdb58;
    color: #000;
    text-align: center;
    padding: 5px;
      width: 100%;
    float: right;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.title {
    font-size: 24px;
    text-align: center;
}

.quick-replies {
    display: flex;
    align-self: flex-end;
    height: 2.5rem;
    box-sizing: border-box;
}
.triangle-left {
width: 12px;
height: 0px;
border-top: 10px solid transparent;
border-right: 22px solid hsl(128, 94%, 50%);
border-bottom: 11px solid transparent;

}

.search-container {
    width: 370px;
    display: block;
    margin-left: 6px;
    
}
input#search-bar {
    margin: 0 auto;
    width: 265px;
    height: 42px;
    padding: 0 10px;
    font-size: 16px;
    border: 1px solid #D0CFCE;
    outline: none;
    position: absolute;
    bottom: 18px;
    border-radius: 25px; 
  &:focus{
    border: 1px solid #008ABF;
    transition: 0.35s ease;
    color: #008ABF;
    &::-webkit-input-placeholder{
      transition: opacity 0.45s ease; 
  	  opacity: 0;
     }
    &::-moz-placeholder {
      transition: opacity 0.45s ease; 
  	  opacity: 0;
     }
    &:-ms-placeholder {
     transition: opacity 0.45s ease; 
  	 opacity: 0;
     }    
   }
 }

 .search-icon {
    position: relative;
    float: right;
    width:45px;
    height: 45px;
    top: 0px;
    right: -65px;
    padding: 10px;
    background: #f1f1f1;
    margin: 5px;
    border-radius: 15px;
}

.search-icon:hover {
	background: #ffdb58;
}

 

.beemee{
    float: left;
    width: 90px;
    position: absolute;
    left: 0;
    top: -35px;
}


#message_received {
    overflow-y: auto;

}

#languagedropdown{
    margin-top: 78px;
    margin-right: -97px;
    margin-bottom: 132px;
    margin-left: 25px;
    font-size: 13px;
    text-align: center;
}


.flash-message {
    position: fixed;
    top: 71%;
    left: 85%;
    transform: translate(-63%, 317%);
    background-color: #ffdb58;
    color: #e11023;
    padding: 5px 2px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
}

@media (min-width: 320px) and  (max-width: 768px) {
.chat-icon{    bottom: 5px;}
.chat-container{display:none!important; }
.chatcontainer {
	    z-index: 9999;
    background: #fff;
    height:auto;
    width: 93%; z-index: 9999;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    float: right;
    padding: 0 0px;
    /* border: 15px solid #333; */
    border-radius: 20px;
    top:310px;
    position: fixed;
    right: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

input#search-bar {
 
    width: 100%  !important;  position: static !important;         margin-top: 5px;
}
.search-icon {
    position: relative;
    float: right;
    width: 42px;
    height: 42px;
    top: 0px; 
    right: 33px;
    padding: 10px;
    background: #f1f1f1;
    margin: 5px;
    border-radius: 15px;
}
#chatbot-container{     height: 205px;}








}
@media (min-width: 320px) and  (max-width: 768px) and (orientation: landscape) {
.chat-icon{display:none !important;}
	
	
	|