@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");

.bp-widget-side {
  max-width: 455px !important;
  width: 100% !important;
  right: 96px !important;
  max-height: 671px !important;
  bottom: 0 !important;
  top: auto !important;
}

.bpw-layout {
  border: 1px solid #c5cad2 !important;
  border: 1px solid #c5cad280 !important;
  bottom: 0 !important;
  box-shadow: 2px 2px 7px #22365466;
  font-family: "Open Sans", sans-serif !important;
  height: 100%;
  min-height: 400px !important;
  right: 0 !important;
  max-width: 450px !important;
  width: 100% !important;
}

.bpw-infosource-url svg {
	display: none;
}

.bpw-header-unread {
  background-color: #cb381f !important;
  margin-left: 16px !important;
  text-align: center !important;
  font: Bold 13px/20px Open Sans !important;
  color: #ffffff !important;
}

.bpw-header-container .bpw-header-icon {
  display: none !important;
}

.bpw-header-container .bpw-header-icon-close {
  align-items: center !important;
  display: flex !important;
  height: 0 !important;
  justify-content: center !important;
  line-height: 0 !important;
  margin-right: -8px !important;
  transition: background 0.3s;
  width: 32px !important;
  height: 32px !important;
}

.bpw-header-container .bpw-header-icon-close:focus,
.bpw-send-button:focus,
.bpw-msg-list:focus,
a:focus,
button:focus {
  outline-color: rgba(0, 103, 244, 0.247) !important;
  outline-offset: -1px !important;
  outline-style: auto !important;
  outline-width: 5px !important;
}

.bpw-header-container .bpw-header-icon-close:hover {
  background: #c5cad2 !important;
  background: #c5cad280 !important;
}

.bpw-header-container .bpw-header-icon-close svg {
  fill: #223654 !important;
  height: 16px !important;
  width: 16px !important;
}

.bpw-header-title {
  color: #223654 !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 18px !important;
  font-weight: bold !important;
  line-height: 25px !important;
  margin-left: 16px;
  padding: 0 !important;
}

.bpw-msg-list {
  padding: 0 16px 0 !important;
}

.bpw-message-big-container {
  margin: 16px 0 !important;
}

.bpw-chat-bubble .bpw-chat-bubble-content {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 23px !important;
  padding: 8px !important;
}

.bpw-chat-bubble .bpw-chat-bubble-content pre {
  white-space: pre-line;
}

.bpw-infosource-source {
  margin-top: 8px !important;
  padding-bottom: 8px !important;
}

.bpw-infosource-source,
.bpw-infosource-url,
.bpw-infosource-time {
  color: #223654 !important;
  font-size: 13px !important;
  line-height: 23px !important;
}

.bpw-chat-bubble .bpw-chat-bubble-content ul {
  margin: 0;
  padding-left: 20px;
}

.bpw-from-bot .bpw-chat-bubble .bpw-chat-bubble-content {
  background: #f2f1f1 !important;
  border: none !important;
  color: #223654 !important;
}

.bpw-from-bot
  .bpw-chat-bubble
  .bpw-chat-bubble-content
  a:not(.bpw-infosource-url) {
  color: #095797;
  text-decoration: underline !important;
}

.bpw-chat-bubble .bpw-chat-bubble-content {
  border-radius: 12px !important;
}

.bpw-message-group > :not(:last-child) {
  margin-bottom: 4px !important;
}

.bpw-from-user .bpw-chat-bubble .bpw-chat-bubble-content {
  border-bottom-right-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border: none !important;
}

.bpw-from-user .bpw-chat-bubble:first-of-type .bpw-chat-bubble-content {
  border-top-right-radius: 12px !important;
}

.bpw-from-bot .bpw-chat-bubble .bpw-chat-bubble-content {
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

.bpw-from-bot .bpw-chat-bubble:first-of-type .bpw-chat-bubble-content {
  border-top-left-radius: 12px !important;
}

.bpw-from-user .bpw-chat-bubble .bpw-chat-bubble-content {
  background-color: #095797 !important;
  color: #fff !important;
}

.bpw-from-user
  .bpw-chat-bubble
  .bpw-chat-bubble-content.bpw-bubble-session_reset {
  color: red !important;
  background: none !important;
  border: 1px solid #095797 !important;
  margin: 0 0 4px !important;
}

.bpw-date-container .bpw-small-line {
  border-bottom: none !important;
}

.bpw-date-container {
  color: #223654 !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  margin: 24px 0 !important;
}

.bpw-header-container {
  background: #f2f1f1 !important;
  border: none !important;
  border-bottom: 1px solid #c5cad2 !important;
  border-bottom: 1px solid #c5cad280 !important;
  padding: 6px 16px !important;
}

.bpw-header-container .bpw-bot-avatar {
  margin: 0 !important;
}

.bpw-bot-avatar {
  line-height: 0 !important;
  margin-right: 8px !important;
}

.bpw-bot-avatar img,
.bpw-bot-avatar svg {
  background: none !important;
  border: none !important;
  border-radius: 50% !important;
}

.bpw-infosource-question {
  color: #223654 !important;
  font-size: 15px !important;
  font-weight: bold !important;
  line-height: 23px !important;
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
  border-color: #c5cad2 !important;
}

.bpw-keyboard {
  border-top: 1px solid #c5cad2 !important;
  border-top: 1px solid #c5cad280 !important;
  padding-top: 8px !important;
}

.bpw-keyboard-quick_reply {
  background: none !important;
  border-top: none !important;
  padding: 0 12px 4px !important;
}

.bpw-keyboard-quick_reply button {
  font-family: "Open Sans", sans-serif !important;
  margin: 0 4px 4px !important;
}

.bpw-button {
  color: #095797 !important;
  background-color: #dae6f0 !important;
  border: 1px solid #dae6f0 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 0.2rem 0.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1.75rem !important;
  transition: border-color 0.25s linear !important;
  display: inline-block !important;
}

.bpw-keyboard-quick_reply-dropdown {
  padding: 0 16px 8px !important;
}

.bpw-message-feedback i svg {
  transition: fill 0.3s;
}

.bpw-message-feedback i:hover svg {
  fill: #095797 !important;
}

.bpw-keyboard-quick_reply-dropdown div[class$="control"][class^="css"] {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
  border: 1px solid #808a9d !important;
}

.bpw-keyboard-quick_reply-dropdown
  div[class$="control"][class^="css"]:focus-within {
  outline-color: rgba(0, 103, 244, 0.247) !important;
  outline-offset: -1px !important;
  outline-style: auto !important;
  outline-width: 5px !important;
}

.bpw-keyboard-quick_reply-dropdown div[class$="menu"][class^="css"] {
  border-radius: 0 !important;
  margin-bottom: 2px !important;
}

.bpw-keyboard-quick_reply-dropdown div[class$="menu"][class^="css"] {
  border-radius: 0 !important;
  margin-bottom: 2px !important;
}

.bpw-keyboard-quick_reply-dropdown [class$="option"][class^="css"] {
  background: #fff !important;
  color: #223654 !important;
  font-size: 15px !important;
  line-height: 20px !important;
  font-family: "Open Sans", sans-serif !important;
}

.bpw-keyboard-quick_reply-dropdown [class$="option"][class^="css"]:hover {
  background: #dae6f0 !important;
}

.bpw-keyboard-quick_reply-dropdown .css-bgvzuu-indicatorSeparator {
  display: none !important;
}

.bpw-keyboard-quick_reply-dropdown > div {
  width: 100% !important;
}

.bpw-message-read-more {
  color: #095797 !important;
  font-family: "Open Sans", sans-serif !important;
}

.bpw-button:hover {
  border: 1px solid #6991d1 !important;
  transition: border-color 0.25s linear !important;
}

.bpw-composer {
  padding: 0 16px 3px !important;
  background: none !important;
  border: none !important;
}

.bpw-composer-inner {
  position: relative !important;
  line-height: 0 !important;
}

.bpw-keyboard-quick_reply-dropdown
  div[class$="control"][class^="css"]
  > div:first-of-type {
  padding: 6px 16px !important;
}

.bpw-keyboard-quick_reply-dropdown div[class$="placeholder"][class^="css"] {
  color: #223554;
  font-family: "Open Sans", sans-serif !important;
  font-size: 15px !important;
  line-height: 23px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0.7;
}

.bpw-keyboard-quick_reply-dropdown
  div[class$="placeholder"][class^="css"]
  + div {
  margin: 0 !important;
  padding: 0 !important;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #223554;
  opacity: 0.7; /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #223554;
  opacity: 0.7;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #223554;
  opacity: 0.7;
}

.bpw-composer textarea {
  background: #fff !important;
  border: 1px solid #223654 !important;
  border: 1px solid #22365480 !important;
  color: #223554;
  font-size: 15px !important;
  height: 36px !important;
  line-height: 23px !important;
  margin: 0 !important;
  overflow: hidden !important;
  padding: 6px 32px 6px 16px !important;
}

.bpw-composer textarea:focus {
  outline-color: rgba(0, 103, 244, 0.247) !important;
  outline-offset: -1px !important;
  outline-style: auto !important;
  outline-width: 5px !important;
}

.bpw-send-button span {
  color: transparent !important;
}

.bpw-send-button {
  background: none !important;
  bottom: 50% !important;
  height: 14px;
  margin-bottom: -8px;
  right: 16px !important;
  width: 16px;
  overflow: hidden;
}

.bpw-send-button:disabled {
  cursor: default;
}

.bpw-send-button:not(:disabled):before {
  opacity: 0;
}

.bpw-send-button:not(:disabled):after {
  opacity: 1;
}

.bpw-send-button:before {
  background: url(./arrow-right.svg) center no-repeat;
  background-size: 100%;
  content: "";
  display: block;
  height: 13px;
  position: absolute;
  right: 0;
  top: 0;
  width: 16px;
  transition: opacity 0.3s;
}

.bpw-send-button:after {
  background: url(./arrow-right-hover.svg) center no-repeat;
  background-size: 100%;
  content: "";
  display: block;
  opacity: 0;
  height: 13px;
  position: absolute;
  right: 0;
  top: 0;
  width: 16px;
  transition: opacity 0.3s;
}

.bpw-send-button:hover {
  background: transparent !important;
}

.bpw-powered {
  font-size: 10px !important;
  color: #223654 !important;
  border-top: none !important;
  padding: 5px 16px 9px !important;
}

.bpw-powered a {
  color: #095797 !important;
  text-decoration: none;
}

.bpw-widget-btn {
  display: none;
}

.custom-floating-btn {
  background: #095797;
  border: none;
  bottom: 0;
  box-shadow: 2px 2px 7px #22365466;
  color: #ffffff;
  cursor: pointer;
  font-family: "Roboto", sans-serif !important;
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
  outline: none;
  overflow: hidden;
  padding: 14px 16px 14px 60px;
  position: fixed;
  right: 96px;
  text-align: left;
  transition: box-shadow 0.3s;
  width: 254px;
  z-index: 100001;
}

.custom-floating-btn:focus {
  outline-color: rgba(0, 103, 244, 0.247) !important;
  outline-offset: -1px !important;
  outline-style: auto !important;
  outline-width: 5px !important;
}

.custom-floating-btn:hover {
  box-shadow: 0 4px 12px 0 rgba(16, 22, 26, 0.8);
}

.custom-floating-btn:before {
  background: url(./chat.svg) no-repeat center;
  background-size: 32px;
  content: "";
  height: 30px;
  left: 14px;
  margin-top: -15px;
  position: absolute;
  top: 50%;
  width: 32px;
}

.custom-floating-btn.open:before {
  opacity: 0;
}

.custom-floating-btn.closed:after {
  opacity: 0;
}

.bpw-widget-btn i {
  display: none;
}

@media screen and (max-height: 560px) {
  .custom-floating-btn.open {
    display: none !important;
  }

  .bpw-header-container {
    border-radius: 0 !important;
    border-top: 0 !important;
  }

  .bpw-keyboard-quick_reply {
    /* height: 66px !important; */
    overflow: auto !important;
    white-space: nowrap !important;
    /* padding-bottom: 0 !important; */
    /* margin-bottom: 8px !important; */
  }
}

@media screen and (max-width: 600px) {
  .bp-widget-side {
    max-height: 100% !important;
    right: 0 !important;
  }

  .custom-floating-btn {
    right: 10px !important;
  }
}

/**ANIMATIONS */

.bpw-anim-fadeIn {
  animation-name: slideInBottom;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

.bpw-anim-none {
  visibility: visible;
}

@keyframes slideInBottom {
  0% {
    visibility: visible;
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
    visibility: visible;
  }
}

.bpw-anim-fadeOut {
  animation-name: slideOutBottom;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

@-webkit-keyframes slideOutBottom {
  0% {
    transform: translateY(0);
    visibility: visible;
  }
  100% {
    visibility: hidden;
    transform: translateY(100%);
  }
}

@keyframes slideOutBottom {
  0% {
    transform: translateY(0);
    visibility: visible;
  }
  100% {
    visibility: hidden;
    transform: translateY(100%);
  }
}