:root { --color-in: #00B894; --color-out: #17312c }
#ChatBox { left: 20px; z-index: 10; bottom: 90px; width: 300px; display: none; position: fixed }
#ChatBox.show { display: block }
#MessageInput { color: rgba(0, 0, 0, 1) !important }
#imgChat { max-width: 70% }
.img-support { position: absolute; width: 70px; top: -33px; right: -5px }
#ChatCircle { position: fixed; z-index: 10; left: -20px; display: none; bottom: 120px; width: 100px }
#ChatCircle.show { display: block }
#MessagePanel { padding-left: 15px; padding-top: 5px }
#Messages { list-style-type: none; padding-top: 15px; height: 285px; overflow-y: scroll }
#Messages span { padding-right: 5px }
#Messages p { padding-right: 20px }
#Messages li { font-size: small }
#Messages li .name { font-weight: bold; margin-right: 5px }
#Messages li .time { color: rgba(153, 153, 153, 1) }
#Messages li .message { margin-right: 20px }
#SendNewMessage { padding-right: 20px; padding-top: 10px; padding-bottom: 10px }
#chatMessage { list-style-type: none; text-align: right; height: 450px; overflow-y: scroll; margin-bottom: 0; border-style: inset }
#chatMessage li .name { font-weight: bold; margin-right: 5px }
#chatMessage li .time { color: rgba(153, 153, 153, 1); font-size: small }
#chatMessage div.message { padding-bottom: 15px }
.card-header { height: 40px }
#btnChatHide { position: absolute; top: 2px; right: 244px }
div .user-message-content { padding-right: 5px !important }
.live-chat-intro { position: relative; z-index: 1; background-color: var(--color-in); padding: 2rem 0; text-align: center; border-radius: 0 0 3rem 3rem }
.live-chat-intro p { color: rgba(255, 255, 255, 1); margin-bottom: 0.5rem }
.live-chat-intro img { width: 50px; height: 50px; border-radius: 50%; margin: 0 auto 0.5rem; display: block }
.live-chat-intro .status { position: relative; z-index: 1; color: rgba(255, 255, 255, 1); font-size: 14px; display: inline-block }
.live-chat-intro .status.online { padding-left: 15px }
.live-chat-intro .status.online::after { position: absolute; width: 10px; height: 10px; background-color: var(--color-in); border-radius: 50%; content: ""; margin-top: -5px; top: 50%; left: 0; z-index: 10 }
.agent-message-content { position: relative; z-index: 1; margin-bottom: 1rem }
.agent-message-content .agent-thumbnail { flex: 0 0 30px; max-width: 30px; width: 30px }
.agent-message-content .agent-thumbnail img { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 1px 3px rgba(15, 15, 15, 0.17); background-color: rgba(255, 255, 255, 1); padding: 2px }
.agent-message-content .agent-message-text { position: relative; z-index: 1 }
.agent-message-content .agent-message-text span { font-size: 12px; color: rgba(116, 119, 148, 1); margin-left: 0.5rem; margin-top: 0.25rem; display: block }
.agent-message-content .agent-message-text p { display: inline-block; margin-bottom: 0; background-color: rgba(255, 255, 255, 1); padding: 0.75rem 1rem 0.65rem; border-radius: 1rem 1rem 1rem 0.25rem }
.user-message-content { position: relative; z-index: 1; text-align: right; margin-bottom: 1rem }
.user-message-content .user-message-text { padding-left: 3rem }
.user-message-content .user-message-text p { display: inline-block; margin-bottom: 0; padding: 0.75rem 1rem 0.65rem; background-color: var(--color-in); color: rgba(255, 255, 255, 1); border-radius: 1rem 1rem 0.25rem }
.user-message-content .user-message-text span { font-size: 12px; display: block; color: rgba(116, 119, 148, 1); margin-right: 0.5rem; margin-top: 0.25rem }