.chatbox * {box-sizing: border-box;}
.chatbox *, html, body {margin: 0; padding: 0; font-family: 'Roboto', sans-serif; font-weight: 400;}
.chatbox h1, h2, h3, h4, h5, h6 {margin: 0 0 20px; padding: 0;}

.chatbox ul, ol {list-style-type: none; }
.chatbox ul li, ol li {margin: 0; padding: 0;} 

.chatbox-icon img {max-width: 100%; height: auto;}

.status {float: right; margin-top: 5px; position: relative; padding-left: 15px; font-size: 14px;}
.circle {width: 10px; height: 10px; border-radius: 50%; position: absolute;left: 0;top: 5px;}
.online.circle {background: #65b95f;}
.offline.circle {background: #d6d6d6;}
.away.circle {background: #e0b963;}

.askquestion-textarea{border:0px !important; margin:2px 7px 3px 12px !important; font-family: Roboto, sans-serif !important;
    font-size: 14px !important; font-weight:100 !important;}

.no-scroll {overflow:hidden;}
.chat-wrapper {z-index: 9; position: fixed;   bottom: 20px; max-width: 370px;right: 110px;width: auto;}
#messageList {padding: 10px;}
#messageList .message {cursor: pointer; background: #F2F6F9; border: 1px solid #e0e0e0; border-radius: 20px; color: rgba(0,0,0,0.87); font-family: 'Roboto', sans-serif; font-size: 14px; padding: 7px 16px;word-break: break-word; word-wrap: break-word;}

/* .chatbox-icon {z-index: 9; position: fixed; bottom: 20px; right: 20px; cursor: pointer; width: 80px !important; height: 80px !important; display: block; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.24) 1px 4px 15px 0px; text-align: center;} */
.chatbox-icon {z-index: 9; position: fixed; bottom: 20px; right: 20px; cursor: pointer; width: 80px !important; height: 80px !important; display: none; border-radius: 50%;  text-align: center;}
.chatbox-icon svg { width: 32px; height: 32px; margin-top: 24px; fill: #000;}
.chatbox {border-radius:20px 20px 20px 20px;box-shadow:rgba(0, 0, 0, 0.24) 0px 0px 15px 0px; z-index:9999; background: #fff; position: fixed; right: 20px; bottom: 110px; width: 370px; overflow: hidden; padding: 0; height: 560px; display: flex; flex-direction: column;}
.chatbox .chatbox-header {width: 100%; background: #F2F6F9; border-radius: 10px 10px 0 0; padding: 15px;}
.chatbox .chatbox-header h3 {margin: 0; color: #000;}
.chatbox .chatbox-header svg {display:none;}

df-message-list {background-color: #fafafa;background-color: var(--df-messenger-chat-background-color);display: flex;flex-direction: column;flex: 1 1 auto;min-height: 0;min-width: 250px;}

.chatbox-content {background:#fff url(../images/pexels-photo-3565601-1.jpeg) 0 0 repeat; border: 1px solid #d6d6d6; padding:0 0 0 10px; display: flex;flex-direction: column;flex: 1 1 auto;min-height: 0; position: relative;}
.chatbox-content .messageList { display: flex;flex-direction: column-reverse;flex: 1 1;overflow-x: hidden;overflow-y: scroll; padding: 10px 10px 10px 0;}
.chatbox-content .messageList .message {background: white; color: rgba(0,0,0,0.87);flex: 0 0 auto;font-family: 'Roboto', sans-serif;font-size: 14px;margin-top: 10px;max-width: calc(100% - 28px); padding: 7px 10px;word-break: break-word;word-wrap: break-word;}
.chatbox-content .messageList .user-message {align-self: flex-end;background-color: #dbf4fd; border-radius:15px; 15px 0 15px; margin-left: 75px;}
.chatbox-content .messageList .bot-message {align-self: flex-start; border-radius:0 15px 15px 15px; background-color: #eeeeee;margin-right: 75px;line-height: 1.4;}
.chatbox-content .messageList .message p {margin-bottom:0;}

.chatbox-content .messageList .user-message {float: right; background:#DBF4FD; border-radius: 12px 12px 0 12px;}
.click-here {border: 0;  background: #fff; cursor: pointer;  width: fit-content; margin-top: 10px; margin-bottom:5px; margin-right: 5px; border-radius:15px;padding:5px 15px; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.24);text-decoration: none;color: #000; border:1px solid #dedede;}
.click-here:hover {background: #efefef; color:#000;}

.chatbox-textarea {border: 1px solid #d6d6d6;border-top: 0; border-radius: 0 0 15px 15px; display: flex; align-items: center;}
:focus {outline: 0!important;}
.chatbox-textarea input {width: calc(100% - 40px);border: 0;resize: none;padding: 10px 15px; height: 40px; background: transparent;}
.chatbox-textarea button {background: url(../js/images/send.svg) 0 0 no-repeat; width: 30px;height: 30px;border: 0;cursor: pointer;}

.chatbox-icon.chat-open .robot-icon, .chatbox-icon .close-icon {display: none;}
.chatbox-icon.chat-open .close-icon {display: block;}

.chatbox.order {border: 1px solid #ccc; width: 400px;}
.order .chatbox-header {border-radius:0; background: transparent; display: flex; justify-content: space-between;}
.order .chatbox-header h3 {color: #000;}
.right-icon {background: #ccc; padding: 5px; border-radius: 50%;}

.typing-bar {display: flex; justify-content: space-between; align-items: center; padding: 0 10px;}
.chatbox.order .chatbox-textarea {border-radius: 15px; padding: 0 5px 0 0; background: #efefef;border: 1px solid #d8d8d8;display: flex;justify-content: space-between; align-items:center; height:34px; width:150px; margin:10px 0;}
.chatbox.order .chatbox-textarea form textarea {width: 100%;}

/*.button-set {display: flex;}*/

.slider .item {height: 5rem; background: #000; padding: 1rem; color: #fff;}

@media (max-width:768px) {
.chatbox {border-radius:0; width:100%; height:100%; top:0; bottom:0; left:0; right:0; }
.chatbox .chatbox-header, .chatbox-textarea {border-radius:0;}
.chatbox-content {height: calc(100% - 90px);}
.chatbox .chatbox-header {display:flex; justify-content:space-between;}
.chatbox .chatbox-header svg {display:block; transform: rotate(90deg);}
.chatbox-textarea {position: fixed;width: 100%;bottom: 0;z-index: 9999; background:#fff; border-top:1px solid #ccc;}
.chatbox-content .messageList {padding-bottom:50px;}
}

.chatbox .span-user-msg {
    background: white !important;
    margin-bottom: -9px !important;
}
.chatbox .header-class {
    max-width: calc(100% - 100px) !important;
}
a.close-icon {
    float: right;
    margin: -22px 0px -15px 5px;
}

 .tidot {
    background-color: purple;
}
.tidot {
    -webkit-animation: mercuryTypingAnimation 1.5s infinite ease-in-out;
    border-radius: 2px;
    display: inline-block;
    height: 4px;
    margin-right: 2px;
    width: 4px;
}

@-webkit-keyframes mercuryTypingAnimation{
0%{
  -webkit-transform:translateY(0px)
}
28%{
  -webkit-transform:translateY(-5px)
}
44%{
  -webkit-transform:translateY(0px)
}
}

.tidot:nth-child(1){
-webkit-animation-delay:200ms;
}
.tidot:nth-child(2){
-webkit-animation-delay:300ms;
}
.tidot:nth-child(3){
-webkit-animation-delay:400ms;
}

.bot-message .span-green b{
    font-weight: 900;
    color: green;
}

.bot-message .span-red b{
    font-weight: 900;
    color: red;
}

.bot-message .span-blue b{
    font-weight: 900;
    color: blue;
}

.bot-message .span-createrecord b{
	font-weight: 900;
    color: green;
}
.getDataVal {
	margin:6px 8px 0px 0px !important ;
	min-height:2.5rem !important;
	height:auto !important;
}

.chatbotbutton {
	margin:6px 8px 0px 0px !important ;
	min-height:2.5rem !important;
	height:auto !important;
}

.chatbox .sapMBtnInner{
font-size: 0.975rem !important;	
}
table.restable, table.restable td, table.restable th {
  border: 1px solid black;
  border-collapse: collapse;
  padding:4px 11px 2px 8px;
}