.front-button-container {
  border-left: 1px solid var(--kds-color-white);
  border-top: 1px solid var(--kds-color-white);
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 10;
  max-width: 300px;
  width: 100%;
}

#chatbutton.front-open-chat-button {
  background: var(--kds-color-brand-primary);
  font-family: var(--kds-base-font-family-body);
  padding: 3% 3% 3% 3%;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  color: var(--kds-color-white);
  text-align: center;
  height: 67px;
  font-size: 16px;
  background-position: center;
}

#chatbutton.front-open-chat-button:hover {
  background-color: var(--kds-color-primary);
}

#chatbutton.front-open-chat-button:active {
  background-color: var(--kds-color-brand-primary);
  background-size: 100%;
}

#chatbutton .front-open-chat-button-image {
  mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTYyNS41IDU2My40Yy00NC41IDAtODAuNiAzNi04MC42IDgwLjVzMzYuMSA4MC41IDgwLjYgODAuNWM0NC41IDAgODAuNi0zNiA4MC42LTgwLjVzLTM2LjEtODAuNS04MC42LTgwLjVtMCAxMjAuOWMtMjIuNCAwLTQwLjUtMTguMS00MC41LTQwLjRzMTguMS00MC40IDQwLjUtNDAuNCA0MC41IDE4LjEgNDAuNSA0MC40LTE4LjEgNDAuNC00MC41IDQwLjRNMjg5LjQgNTYzLjRjLTQ0LjUgMC04MC42IDM2LTgwLjYgODAuNXMzNi4xIDgwLjUgODAuNiA4MC41IDgwLjYtMzYgODAuNi04MC41LTM2LjEtODAuNS04MC42LTgwLjVtMCAxMjAuOWMtMjIuNCAwLTQwLjUtMTguMS00MC41LTQwLjRzMTguMS00MC40IDQwLjUtNDAuNCA0MC41IDE4LjEgNDAuNSA0MC40LTE4LjIgNDAuNC00MC41IDQwLjRtMjQyLjUgODIuOGMtMzkuMyAzNi45LTEwNSAzNi45LTE0My40LS4yLTgtNy43LTIwLjctNy41LTI4LjQuNS03LjcgOC03LjUgMjAuNy41IDI4LjQgNTMuOSA1MiAxNDQgNTIgMTk4LjcuNiA4LjEtNy42IDguNS0yMC4zLjktMjguNC03LjYtOC4xLTIwLjItOC41LTI4LjMtLjkiLz48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik05OTMuNCAxMy44Qzk4Ny41IDUuMyA5NzguMS4zIDk2Ny4zLjNoLTQ1NmMtMTkuOCAwLTM1LjggMTYuNS0zNS44IDM1Ljh2MTY4LjZjLTYuMS0uMy0xMi4xLS41LTE3LjktLjUtNzguNiAwLTE1MS44IDIzLjMtMjEzLjEgNjMuMlYxNjUuOGMyOS45LTggNTItMzUuMiA1Mi02Ny43IDAtMzguNy0zMS40LTcwLTcwLjEtNzBzLTcwLjEgMzEuMy03MC4xIDcwYzAgMzEgMjAuMiA1Ny4zIDQ4LjEgNjYuNXYxMzIuOEMxMjAuOSAzNjguOCA2Ny45IDQ3NC42IDY3LjkgNTkyLjd2MTg1LjlIMjEuNGMtMTEuMSAwLTIwLjEgOS0yMC4xIDIwLjFWOTAzYzAgMTEuMSA5IDIwLjEgMjAuMSAyMC4xaDQ2LjV2NTYuNWMwIDExLjEgOSAyMC4xIDIwLjEgMjAuMWg3MzQuNGMxMS4xIDAgMjAuMS05IDIwLjEtMjAuMXYtNTYuNUg4ODljMTEuMSAwIDIwLjEtOSAyMC4xLTIwLjFWNzk4LjZjMC0xMS4xLTktMjAuMS0yMC4xLTIwLjFoLTQ2LjVWNTkzLjFjMC03NS45LTE4LjktMTQ1LjItNTYtMjA2aDE4MC44YzEwLjYgMCAyMC00LjcgMjUuOS0xMyA0LjYtNi40IDYuNy0xNC4yIDYuNy0yMi4zVjM2LjFjMC04LTIuMS0xNS44LTYuNS0yMi4zbS03NjcgNTQuNWMxNi42IDAgMzAgMTMuNCAzMCAyOS45IDAgMTUuNS0xMS44IDI4LjItMjYuOSAyOS44LTEuNi0uNC0zLjMtLjctNS0uNy0xLjIgMC0yLjMuMS0zLjUuMy0xNC0yLjUtMjQuNi0xNC43LTI0LjYtMjkuNCAwLTE2LjUgMTMuNC0yOS45IDMwLTI5Ljl6TTQxLjUgODgzdi02NC4zSDY4Vjg4M3ptODI3LjQtNjQuM1Y4ODNoLTI2LjV2LTY0LjN6bS02Ni41LTIyNS42djM2Ni40SDEwOC4xVjU5Mi43YzAtMTkyLjMgMTU2LjctMzQ4LjMgMzQ5LjYtMzQ4LjMgNS43IDAgMTEuNy4yIDE3LjkuNXYxMDYuOGMwIDE5LjcgMTUuNiAzNS40IDM1LjggMzUuNGg0OC45djc2LjNjMCAxNi41IDE4LjggMjUuOSAzMi4xIDE2LjFsMTIzLjgtOTIuM2gyMi4zYzQyLjMgNTkuMiA2My45IDEyOC40IDYzLjkgMjA1LjltMTU3LjMtMjQ2LjJINzA5LjVjLTQuMyAwLTguNSAxLjQtMTIgNGwtOTcuMSA3Mi40VjM2N2MwLTExLjEtOS0yMC4xLTIwLjEtMjAuMWgtNjQuN1Y0MC41aDQ0NC4xdjMwNi40eiIvPjwvc3ZnPg==);
  height: 44px;
  background-color: var(--kds-color-white);
  mask-repeat: no-repeat;
  width: 44px;
  float: left;
  margin-right: auto;
  margin-left: 0.3rem;
  margin-top: 0.1rem;
}

#chat-container .Boost-ChatPanel-TitleBar {
  background: var(--kds-color-brand-primary) !important;
}

#chat-container div[class*="viewOverlay"] > div,
#chat-container #boost-chat-panel-menu {
  background: var(--kds-color-interactive-hover);
}

#chat-container .Boost-ChatPanel-ActionButton,
#chat-container .Boost-ChatPanel-UrlButton {
  background: var(--kds-color-primary) !important;
}

#chat-container .Boost-ChatPanel-ActionButton:hover,
#chat-container .Boost-ChatPanel-ActionButton:focus,
#chat-container .Boost-ChatPanel-ActionButton:active,
#chat-container .Boost-ChatPanel-UrlButton:hover,
#chat-container .Boost-ChatPanel-UrlButton:focus,
#chat-container .Boost-ChatPanel-UrlButton:active {
  background: var(--kds-color-brand-primary) !important;
  text-decoration: underline;
  box-shadow: none !important;
}

#chat-container .TitleBar > button:hover,
#chat-container .TitleBar > button:focus {
  background: var(--kds-color-primary) !important;
  border-color: var(--kds-color-primary) !important;
}

#boost-chat-panel-menu a:hover,
#boost-chat-panel-menu button:hover {
  text-decoration: underline !important;
  opacity: 1 !important;
}

#boost-chat-panel-menu a,
#boost-chat-panel-menu button {
  padding: 0.5rem !important;
}

#boost-chat-panel-menu a:focus,
#boost-chat-panel-menu button:focus {
  outline: 0.15rem solid var(--kds-color-white) !important;
}

button[data-test-element="conversation-feedback-close"]:hover,
button[data-test-element="conversation-feedback-close"]:focus {
  opacity: 0.7 !important;
  text-decoration: underline !important;
}

#chat-container .Boost-ChatPanel-TitleBar > div > button:hover,
#chat-container .Boost-ChatPanel-TitleBar > div > button:focus {
  box-shadow: 0px 0px 0px 0.15rem var(--kds-color-white) inset;
  background: transparent !important;
}

#chat-container .HtmlContents a {
  background-color: transparent !important;
  color: var(--kds-color-primary) !important;
}

#chat-container .HtmlContents a:hover {
  background-color: transparent !important;
  color: var(--kds-color-brand-primary) !important;
  text-decoration-thickness: 15%;
}

#chat-container form[class*="focus"] div[class*="focusContainer"] {
  box-shadow: 0 0 0 4px var(--kds-color-primary) !important;
}

#chat-container .Boost-ChatPanel-Composer:focus {
  outline: none;
  box-shadow: none;
}