/* customized styles for chat UI */
.cx-common-container .cx-titlebar {
  background-color: rgb(255, 205, 0) !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}
.cx-widget.cx-theme-dark {
    color: rgba(35, 35, 35) !important;
    background-color: white !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}
.cx-widget {
  font-family: "Open Sans", sans-serif !important;
}
.cx-widget.cx-theme-dark .cx-btn-default {
  background: none !important;
  border: none !important;
  color: #3e3e3e !important;
  background-color: #e3e3e3 !important;
  border-radius: 15px !important;
}
    .cx-widget.cx-theme-dark .cx-btn-primary {
        border: none !important;
        background: rgb(255, 205, 0) !important;
        background: -moz-linear-gradient(top,rgb(255, 205, 0) 0, rgb(255, 205, 0) 100%) !important;
        background: -webkit-linear-gradient(top, rgb(255, 205, 0), rgb(255, 205, 0)) !important;
        background: linear-gradient(180deg, rgb(255, 205, 0) 0, rgb(255, 205, 0)) !important;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@bg_color_4",endColorstr="@bg_color_5",GradientType=0);
        border-radius: 15px !important;
    }
.cx-widget .cx-btn {
  width: 100% !important;
  margin-bottom: 10px !important;
}
.cx-widget button {
  font-family: "Open Sans", sans-serif !important;
}
.cx-webchat .cx-form {
  padding: 0px 24px 0 !important;
}
.cx-widget.cx-theme-dark .cx-form-control {
  color: black !important;
}
.cx-webchat.cx-theme-dark .cx-transcript .cx-filename,
.cx-webchat.cx-theme-dark .cx-transcript .cx-filesize,
.cx-webchat.cx-theme-dark .cx-transcript .cx-message-text,
.cx-webchat.cx-theme-dark .cx-transcript .cx-name {
  color: black !important;
}
.cx-webchat .cx-transcript {
  padding: 10px !important;
}
.cx-common-container .cx-body {
  padding: 0px !important;
}
.cx-webchat.cx-disabled.cx-theme-dark .cx-input-container {
  background: rgb(255, 255, 255) !important;
}
.cx-webchat div.cx-input-container {
  border: none !important;
}
.cx-widget.cx-theme-dark .cx-menu-cell .cx-svg-icon-tone1 {
  fill: rgba(35, 35, 35) !important;
}
.cx-webchat .cx-transcript {
  font-size: 1em !important;
  background: rgb(245, 247, 250) !important;
}
.cx-message-group {
  width: fit-content !important;
}
.cx-webchat .cx-transcript .cx-message.cx-system {
  margin: 0px !important;
}
.cx-webchat.cx-theme-dark .cx-transcript .cx-filename,
.cx-webchat.cx-theme-dark .cx-transcript .cx-filesize,
.cx-webchat.cx-theme-dark .cx-transcript .cx-message-text,
.cx-webchat.cx-theme-dark .cx-transcript .cx-name {
  color: inherit !important;
}
.cx-webchat
  .cx-transcript
  .cx-message-group
  > .cx-message.cx-participant:last-child
  .cx-bubble {
  border-radius: 0px !important;
}
.cx-system .cx-bubble {
  background: rgb(255 255 255) !important;
  color: black !important;
  padding: 10px !important;
  border-radius: 7px !important;
  box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;
}
.cx-participant .cx-bubble {
/*   background: rgb(195, 0, 47) !important; */
/*   color: rgb(255, 255, 255); */
  padding: 10px !important;
}
.cx-webchat
  .cx-transcript
  .cx-message-group
  > .cx-message.cx-participant:first-child
  .cx-bubble-arrow {
  display: none !important;
}
.cx-message-group:has(.cx-participant) {
  margin-left: auto;
}
.cx-message-group:has(.cx-system) {
  margin-right: auto !important;
  padding: 10px 10px 10px 0px !important;
}
.cx-system {
  padding: 10px !important;
}
.cx-webchat .cx-transcript .cx-time,
.cx-webchat .cx-transcript .cx-name{
  margin-bottom: 0px !important;
  opacity: 0.5 !important;
  font-size:0.85em !important;
}
.cx-webchat .cx-transcript .cx-message {
  min-height: auto !important;
}
.cx-webchat .cx-transcript .cx-message.cx-system .cx-message-text,
.cx-webchat .cx-transcript .cx-message.cx-system .cx-time {
  min-height: auto !important;
}
.cx-webchat
  .cx-transcript
  .cx-message-group
  > .cx-message.cx-participant:last-child
  .cx-bubble {
  border-radius: 10px !important;
  box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;
}
.cx-webchat.cx-theme-dark .cx-transcript .cx-time {
  color: inherit !important;
}
.cx-webchat.cx-theme-dark .cx-alert > .cx-wrapper {
  background-color: rgb(255 255 255) !important;
  color: rgb(35 35 35) !important;
  border: none !important;
}
.cx-webchat .cx-alert > .cx-wrapper {
  margin: 0px !important;
  background-color: #fff;
  padding: 10px !important;
  border: none;
}
.cx-widget.cx-theme-dark .cx-smokescreen {
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}


.cx-footer, .cx-common-container .cx-footer .cx-powered-by, .cx-branding-icon {
  display: none !important;
}

.cx-chatSection {
    /* position: relative; */
    z-index: 1024;
    /* transition: all 0.2s; */
}

.cx-chatWindow {
    position: fixed;
    bottom: 0;
    right: 20px;
    background: rgb(255, 255, 255);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.cx-chatTitle {
    width: 100%;
    color: black;
    background: rgb(255, 205, 0) !important;
    padding: 8px 15px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    font-size: 2.0rem;
}

.cx-side-button-group {
    -webkit-transform: none !important;
}
.cx-widget .cx-btn {
    font-size: 1.0em !important;
}
.cx-avatar{
  display: none !important;
}
.cx-message-group:has(.cx-agent),
.cx-webchat .cx-transcript .cx-message-group>.cx-message.cx-participant .cx-bubble{
  margin-left: 0px;
  width:auto;
}
.cx-webchat.cx-theme-dark .cx-transcript .cx-message.cx-you .cx-bubble {
    background: rgb(255, 205, 0) !important;
    color: black;
}
.cx-webchat.cx-theme-dark .cx-transcript .cx-message.cx-them .cx-bubble{
  background: rgb(255 255 255) !important;
  color: black !important;
}

.cx-widget.cx-theme-dark .cx-send  .cx-svg-icon-tone1{
fill: #000000;
}


.cx-webchat div.cx-input-container .cx-message-input{
  font-size : .95em;  
}

.cx-chatSection.cx-side-button.cx-theme-dark {
    box-shadow: none;
    background-color: transparent;
}
.cx-widget.cx-theme-dark a, .cx-widget.cx-theme-dark a:hover, .cx-widget.cx-theme-dark label {
    color: blue !important;
}