html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Work Sans', 'Roboto', sans-serif;
  background-color: #F1F8FB;
}

html,
body,
#root {
  height: 100%;
  overflow-y: hidden;
}

/* Mod of: https://github.com/twbs/bootstrap/blob/v4.1.1/scss/_type.scss#L11 */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: 'Work Sans', 'Roboto', sans-serif;
  font-weight: 300;
  line-height: 1.1;
  color: inherit;
}

hr {
  opacity: 1;
}

/*
    Plotly's notification popups aren't relevant to our users and don't match our styles.
    Unfortunately, the API does not expose a great way to hide these and this was the only suggestion on the forum
*/

div.plotly-notifier {
  display: none !important;
}

/* Prevents drop shadow cutoff on the typing indicator */
.cs-message.cs-message--incoming {
  padding-bottom: 8px;
}
.cs-message--incoming .cs-message__content {
  color: #262c32;
  background-color: #fff;
}
.cs-message--outgoing .cs-message__content {
  color: white;
  background-color: #006eb7;
}
.cs-main-container,
.cs-chat-container,
.cs-message-list {
  background-color: #fafafa;
}
.cs-main-container * {
  font-family: 'Work Sans', 'Roboto', sans-serif;
}
.cs-main-container {
  border: none;
}
.cs-chat-container .cs-message-input {
  padding: 1rem;
}
.cs-chat-container .cs-message-input .cs-message-input__content-editor-wrapper:first-child {
  margin-right: 0;
}
.cs-chat-container .cs-message-input .cs-message-input__content-editor-wrapper:last-child {
  margin-left: 0;
}
.cs-chat-container .cs-message .cs-message__content-wrapper {
  overflow: hidden; /* don't allow this to grow, by making hidden, contents will scroll. the primary offender being code blocks */
}
.cs-message-input__content-editor-wrapper,
.cs-message-input__content-editor,
.cs-message-input__content-editor[data-placeholder]:empty:before,
.cs-message-input--disabled .cs-message-input__content-editor-wrapper {
  background-color: #ededf1;
}
.cs-message-input__content-editor-wrapper {
  border-radius: 4px;
}
.cs-message-list__scroll-wrapper {
  background-color: transparent;
  padding: 0 2rem;
}
.cs-avatar,
.cs-avatar > img {
  border-radius: 0;
}
.cs-message-list__scroll-wrapper > .cs-message:nth-last-child(4) {
  margin-bottom: 1rem;
}
.cs-message-list__scroll-wrapper > .cs-message:first-child {
  margin-top: 1rem;
}
@-webkit-keyframes slideUp {
  from {
    -webkit-transform: translateY(100vh);
            transform: translateY(100vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slideUp {
  from {
    -webkit-transform: translateY(100vh);
            transform: translateY(100vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.cs-message > * {
  -webkit-animation: slideUp 0.3s ease;
          animation: slideUp 0.3s ease;
}
.cs-message--incoming .cs-message__sent-time {
  margin-left: 0;
  padding-left: 0;
}
.cs-message__footer {
  margin-top: 4px;
}
/* Styles Message Custom Content */
.cs-message__content {
  white-space: normal;
  border: solid 1px rgba(0, 0, 0, 0.075);
}
.cs-message__custom-content h1 {
  font-size: 1.5rem;
  margin: 1rem 0 0.5rem 0;
}
.cs-message__custom-content h2 {
  font-size: 1.25rem;
  margin: 0.875rem 0 0.5rem 0;
}
.cs-message__custom-content h3 {
  font-size: 1.1rem;
  margin: 0.75rem 0 0.5rem 0;
}
.cs-message__custom-content h4,
.cs-message__custom-content h5,
.cs-message__custom-content h6 {
  font-size: 1rem;
  margin: 0.625rem 0 0.5rem 0;
}
.cs-message__custom-content ol ul {
  margin-bottom: 1rem;
}
.cs-message__custom-content li p {
  margin-bottom: 0.5rem;
}
.cs-message__custom-content *:last-child {
  margin-bottom: 0;
}

.lo-markdown-editor-light-link {
  -webkit-transition: color 0.5s ease;
  transition: color 0.5s ease;
  color: rgba(0, 83, 154, 0.8);
  text-decoration: underline;
}

.lo-markdown-editor-light-link:hover {
  color: #00539a;
}

.lo-markdown-editor-dark-link {
  -webkit-transition: color 0.5s ease;
  transition: color 0.5s ease;
  color: #ffffff;
  text-decoration: underline;
}

.lo-markdown-editor-dark-link:hover {
  color: rgba(255, 255, 255, 0.8);
}