/* Base Webchat Container */
.wc-webchat {
  font-family: "Poppins", arial, sans-serif;
  font-weight: 400;
  z-index: 2000 !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 6px;
  width: 50% !important;
  height: auto!important;
  max-height: 500px;
}

/* Unavailable Banner */
.wc-webchat .wc-unavailable {
  min-height: 45px !important;
  height: auto !important;
  background-color: #282828 !important;
  color: #fff;
  margin-left: 48px;
  text-indent: 0 !important;
  line-height: 24px !important;
  display: block;
  font-size: 14px !important;
  padding: 10px;
}

/* Header */
.wc-webchat > header {
  background-color: #7f1336;
  color: #fff;
  margin-left: 48px;
  text-indent: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 30px;
  min-height: 50px !important;
  height: auto !important;
  padding: 10px 0 10px 10px;
  letter-spacing: -0.3px;
}

.wc-webchat > header a {
  font-size: 24px;
  width: 48px;
  padding: 8px 17px 8px 17px;
  height: 50px;
  background-color: #7f1336;
}

/* Titles */
.wc-title,
.wc-transcript {
  text-decoration: underline;
  text-decoration-thickness: max(1px, .0625rem);
  text-underline-offset: .35em;
}

.wc-title {
  margin-right: 20px;
}

.wc-title:hover,
.wc-transcript:hover {
  text-decoration-thickness: max(3px, .1875rem, .12em);
}

/* Status Boxes (merged duplicates) */
.wc-status {
  font-size: 14px;
  font-style: normal;
  text-align: left;
  color: #000;
  line-height: 150%;
  padding: 7px 11px 7px 11px;
  margin: 0 0 8px 0;
  background-color: #d4efe5;
  border: 1px solid #fff;
  border-radius: 4px;
}

/* Transcript Link */
.wc-transcript {
  float: left;
  font-size: 14px;
  font-weight: 400;
  color: var(--primary-color);
  line-height: 28px;
  cursor: pointer;
  margin: 10px 0;
}

/* Messages */
.wc-message {
  font-size: 14px;
  padding: 7px;
  height: 50px;
  flex: 1;
  border: 1px solid var(--black);
  margin: 0;
  color: var(--black);
  box-sizing: border-box;
}

.wc-message:focus {
  background: #fff !important;
  border: 2px solid #000 !important;
  outline: 3px solid #ffdd00 !important;
  box-shadow: none !important;
}

/* History Messages */
.wc-history li .wc-text-message {
  display: inline-block;
  color: #000;
  background-color: #83d1b6;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  border: 0 solid var(--light-grey-3);
  border-radius: 5px;
  padding: 10px;
}
 .wc-history {
    height: 200px;
    background-color: #f5f5f5;
   margin-bottom:  0px;
   border-radius: 6px;
   padding-left: 10px;
      padding-right: 10px;
  }

.wc-history li .wc-text-message a,
.wc-history li.wc-local .wc-text-message a {
  color: #000 !important;
  text-decoration: underline !important;
}

.wc-history li.wc-local .wc-text-message,
.wc-eta {
  display: inline-block;
  color: var(--black);
  background-color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  border: 1px solid #a8afb3;
  border-radius: 5px;
  padding: 10px;
  font-style: normal;
}

.wc-history li.wc-system {
  color: #000;
  font-size: 15px;
  background-color: #fccdcd;
  border-radius: 4px;
  line-height: 150%;
  padding: 6px 8px;
  margin: 8px 0 1px 0;
}

.wc-history li.wc-local .wc-name {
  font-size: 15px;
}

/* Inputs */
.wc-webchat input {
  margin: 4px 0 15px 0;
  font-size: 16px;
  padding: 7px;
}

.wc-name-input,
.wc-email-input {
  width: 80%;
  padding: 5px;
  height: 35px;
  border: 2px solid #000;
}

.wc-name-input::placeholder {
  color: #000;
}

.wc-webchat input:focus {
  outline: 3px solid #ffdd00 !important;
  background-color: #fff !important;
  box-shadow: none !important;
}

/* Progress / Announcement / Welcome */
.wc-progress,
.wc-announcement,
.wc-welcome {
  font-style: normal;
  font-size: 15px;
  color: var(--black);
  background-color: #d4efe5;
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 9px;
  margin-bottom: 10px;
}

.wc-progress a,
.wc-announcement a,
.wc-welcome a {
  color: var(--black);
}

/* Buttons */
.wc-webchat [type="button"],
.wc-webchat [type="submit"] {
  background-color: #106457 !important;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  height: auto;
}

.wc-webchat [type="button"] {
  padding: 10px 18px;
  font-size: 15px;
  line-height: 15px;
}

.wc-webchat [type="submit"] {
  padding: 8px;
}

.wc-webchat [type="submit"]:hover,
.wc-send-message:hover {
  background: #063b33 !important;
}

.wc-send-message {
  color: #fff;
  border-width: 0;
  width: 160px;
}

/* Disabled Buttons */
.wc-initiate:disabled,
.wc-terminate:disabled,
.wc-send-message:disabled {
  background-color: #ddd;
  color: #808080;
}

/* Misc */
.sendMessageButtonWrap {
  margin-top: 10px;
}

#chatTemplate,
#nowebchat {
  display: none;
}

#nowebchat {
  color: #FF5555;
  margin: 4px 0;
  font-size: large;
}

.wc-online.wc-show > .wc-unavailable {
  display: none;
}

/* Image Icon */
.wc-image {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 7px;
  left: 8px;
  background-image: url('https://eicc-webchat.rctcbc.gov.uk:8085/webchat/client/webchat.svg');
  background-size: cover;
  background-repeat: no-repeat;
}

/* Buttons Hover */
.wc-buttons a:hover {
  background-color: #6F1431;
}

.wc-initiate,
.wc-terminate {
  width: 200px;
}

/* Scroll Areas */
.wc-webchat .messages,
.wc-webchat .wc-message-pane {
  overflow-y: auto;
  height: 100%;
}

/* Responsive */
@media (max-width: 780px) {
  .wc-webchat {
    width: 100% !important;
    margin: 0px 0px 10px 0px!important
  }
  .wc-title {
    margin-right: 10px;
  }
}

/* ----------------------------------------------------------
   DESKTOP (mouse devices)
   Freeze body ONLY when mouse is over the chat
---------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  body:has(.wc-chatbox.wc-show:hover) {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
}

/*.wc-webchat {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}
*/

 .wc-history {
    height: 200px;
    background-color: #f5f5f5;
   margin-bottom:  0px;
  }

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) and (min-width: 500px) {
  .wc-webchat {
    width: 600px!important;
  }
}