/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS 2.8.0
----------------------------------------
COLOR SETTINGS
----------------------------------------
Read more about settings and
USWDS color tokens in the documentation:
https://designsystem.digital.gov/design-tokens/color
----------------------------------------
*/
/*
----------------------------------------
Theme palette colors
----------------------------------------
*/
/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS 2.12.0
----------------------------------------
COLOR SETTINGS
----------------------------------------
Read more about settings and
USWDS color tokens in the documentation:
https://designsystem.digital.gov/design-tokens/color
----------------------------------------
*/
/*
----------------------------------------
Theme palette colors
----------------------------------------
*/
/*
----------------------------------------
State palette colors
----------------------------------------
*/
/*
----------------------------------------
General colors
----------------------------------------
*/
/*
----------------------------------------
OPM Custom colors
----------------------------------------
*/
/*
----------------------------------------
State palette colors
----------------------------------------
*/
/*
----------------------------------------
General colors
----------------------------------------
*/
#webchat {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  position: fixed;
  right: 3%;
  bottom: 17%;
  margin: 0;
  transition-duration: 0.5s;
  transition-property: margin;
}
#webchat *:not(i.keyboard-controls::before) {
  font-family: "Source Sans Pro";
}
#webchat > div:nth-child(2) {
  max-height: 75vh;
  max-width: 380px;
}
#webchat .webchat__chat {
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: auto;
  max-width: 360px;
  min-width: 360px;
  transition-duration: 0.5s;
  transition-property: max-width, min-width, width;
}
#webchat button.ac-pushButton.style-default.ac-selectable {
  background: #093453;
}
#webchat button.ac-pushButton.style-default.ac-selectable:focus {
  outline: 0.25rem solid #2491ff;
  outline-offset: 0;
}
#webchat .webchat__bubble .webchat__bubble__content {
  border-width: 1px !important;
}
#webchat .webchat__bubble .webchat__bubble__content {
  background-color: "gray-cool";
}
#webchat .webchat__initialsAvatar {
  background-color: #009ed1;
}
#webchat .webchat__initialsAvatar--fromUser {
  background-color: #d13138;
}
#webchat [role=dialog] {
  border: none;
  min-height: unset;
}
#webchat [role=dialog].webchat__keyboard-help--shown {
  height: auto;
  display: contents;
}
#webchat [role=complementary] {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
#webchat section.webchat__basic-transcript__transcript {
  padding: 0.5em;
}
#webchat div.ac-container ac-adaptiveCard {
  background: #fff;
  padding: 0 !important;
}
#webchat div.ac-horizontal-separator {
  display: none;
}
#webchat button.ac-pushButton.style-default.ac-selectable {
  border-color: #425B76;
  font-size: 12px;
  border-radius: 5px;
}
#webchat .webchat__adaptive-card-renderer * {
  font-size: 16px;
  color: #425B76;
  font-weight: unset !important;
  white-space: unset !important;
  text-overflow: unset !important;
  font-family: "Source Sans Pro";
}
#webchat .webchat__adaptive-card-renderer *:not(p) {
  color: #fff;
}
#webchat .webchat__adaptive-card-renderer p {
  color: #000;
}
#webchat .webchat__adaptive-card-renderer .ac-pushButton[aria-pressed=true] {
  background-color: #F5F6F7;
}
#webchat .webchat__adaptive-card-renderer .ac-textBlock {
  margin-bottom: 1.5em;
}
#webchat .webchat__adaptive-card-renderer *:focus {
  outline: unset;
}

@media (min-width: 720px) {
  #webchat {
    /*margin: 0 10px;*/
  }
  #webchat .webchat__chat {
    max-width: 480px;
    min-width: 480px;
    width: 480px;
  }
}
button.chat-button {
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 6px, rgba(0, 0, 0, 0.2) 0px 2px 24px;
  border: none;
  background-color: #093453;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: fixed;
  right: 3%;
  bottom: 8%;
  z-index: 999;
}
button.chat-button:focus {
  outline: 0.15rem solid #2491ff !important;
}
button.chat-button:hover {
  cursor: pointer;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  color: #fff;
  background-color: #093453;
  border-radius: 8px 8px 0 0;
}

/* TODO: make keyboard-controls selectors more specific/nested */
.keyboard-controls {
  border: none;
  background: none;
}

.keyboard-controls::before {
  font-size: 18px;
  color: #fff;
}

.webchat__send-box__main {
  border-top: 2px solid rgb(230, 230, 230) !important;
}

.hasInput .webchat-send {
  fill: #093453;
}

.webchat-send {
  fill: #b1b1b1;
  height: 20px;
  width: 20px;
}

path.webchat__bubble__nub-outline {
  display: none;
}