.launcher
{background-color:transparent!important;
background:url(/home/images/icon_chatbot.png) no-repeat;
background-size:cover;
box-shadow:none;}

.launcher img
{display:none;}

#clare-frame.widget-container{ z-index:999999999; bottom:70px!important;}
button#arrow-up{ 
	z-index: 999999999999;
    display: none;
    position: fixed;
    right: 320px;
    bottom: 80px;
    background: #00477b;
    color: #ffffff;
    padding: 5px;
    border: 1px solid #00477b;
    border-radius: 4px;
    line-height: 23px;
    font-size: 15px;}

#clare-frame.opened, 
.conversation-container, 
.conversation-container .header
{border-radius: 0!important;}

.appear
{background: #fff!important;}

.w3-container .box
{border-bottom-left-radius: 15px!important;
border-bottom-right-radius: 0!important;
border-top-left-radius: 0!important;
border-top-right-radius: 15px!important;}

.w3-container .box .card-image img
{border-bottom-left-radius: 0!important;
border-bottom-right-radius: 0!important;
border-top-left-radius: 0!important;
border-top-right-radius: 15px!important;}

.card-action-last-one, .card-action-last-one:hover
{border-bottom-left-radius: 15px!important;
border-bottom-right-radius: 0!important;
border-top-left-radius: 0!important;
border-top-right-radius: 0!important;}

.conversation-container .header,
.conversation-container .header-close
{background-color: #00477b!important;}

.conversation_start_timestamp
{color: #6c6e6e!important; 
font-size: 14px!important;}

.card-action, .card-action-last-one
{color: #00477b!important;}

.card-action:hover,
.card-action-last-one:hover
{ background-color:#00477b!important;
color: #fff!important;}

.card-action-text
{margin-top: 4%!important;}

.slick-arrow
{background-color: transparent!important;}

.card-title
{font-size: 18px!important;}

.slick-next:before,
.slick-prev:before
{font-size: 30px!important;
color: #000!important;}

.message-typing-event>div>div
{ background-color: #00477b!important;}

.message, .message-text

.slick-arrow
{background-color: transparent!important;
color: #000!important;}

.response
{background-color: #fff!important;
box-shadow: 0 1px 5px 1px #a9a9a9;
color: #000!important;}

.message
{margin: 15px 10px!important;}

.messages-container
{margin-bottom: 10px;}

.client
{background-color: #00477b!important;}

.sender
{border-radius: 50px!important;
width: calc(100% - 60px);
margin: 0 0 10px 55px;
border: 1px solid #bfbfbf!important;
box-sizing: border-box;}

.send
{background: #00477b;
padding: 0!important;
border-radius: 50px;}

.send-button-text
{color: #fff!important;
display: block;
text-indent: -99999px;
width: 28px;
height: 28px;
background: url(http://jpmhkwarrants.com/home/images/bg_jp_chatbot_send_button.png) center no-repeat;
background-size: 90%;}

.message-reply
{border: 1px solid #00477b!important;
background-color: #fff!important;}

.message-reply, .message-reply a
{color: #00477b!important;}

.conversation-container .intro-section
{background-color: transparent!important;
border-bottom: none!important;
position: absolute;
top: 0;
left: 35px;
padding: 0!important;}

.conversation-container .intro-section img
{display:none;}

.conversation-container .title
{padding: 0!important;
margin: 0!important;
color: #fff!important;
line-height: 39px;
font-size: 16px!important;}

.conversation-container .subtitle
{margin: 0!important;
display: none;}

.conversation-container .subtitle:after
{display: none;}

.message-postback a
{background-color: #00477b!important;}



.new-message{ background-color: transparent;}


/**/
.w3-container .box
{max-width: 200px !important;}

.card-description
{display: none !important;}

.card-title
{text-align: center !important;
padding: 10px 0;}

.slick-arrow
{top: 170px;}

.callout-header
{bottom:155px!important;
right:25px!important;
background:rgb(255, 255, 255); color: rgb(0, 0, 0)!important;}
.arrow-down
{bottom:153px!important;
right:34!important;
border-color:transparent rgb(255, 255, 255) rgb(255, 255, 255) transparent!important;}


@media only screen and (max-width: 767px){
button#arrow-up{ right:unset; left:5px; }
}
 
/*@media screen and (max-width: 800px){
        .widget-container.opened {
            height: -webkit-fill-available !important;
            margin-top: 70px;
        }
}*/

@media only screen and (max-width: 767px){
        .widget-container.opened {
            position: absolute;
            top: 0;
        }
}
.conversation-container .intro-section {
      left: 60px !important;
  }