html, body {
  max-width: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.46668;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

a, a:link, a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

#messages {
  margin-bottom: 10px;
}

#loader {
  height: 15px;
}

.action-menu {
  display: none;
  position: absolute;
  right: <%= style.padding %>px;
  top: 2px;
  padding: 2px;
  border: 1px solid;
  border-radius: 6px;
  user-select: none;
  cursor: pointer;
}
a.icon {
  display: inline-block;
  text-decoration: none;
  /* Add animation for hovering */
  transition: all 0.1s ease-in-out;
  /* Remove the space between icons */
  margin-right: -4px;
}
a.icon:last-child {
  /* Except for the last icon */
  margin-right: 0;
}
a.icon i.icon-ok {
  /* Animation when user clicks on the menu item */
  transition: all 0.5s ease-out;
  color: #4AA081;
}

.msg {
  display: table;
  width: 100%;
  border-collapse: collapse;
  /* Prevent content to overgrow the div width. */
  table-layout: fixed;
}
.msg.folded {
  border-top-width: 0;
}
.msg.folded .action-menu {
  margin-top: -1.3em;
}
.msg:hover .action-menu {
  display: block;
}
.msg#pending:hover .action-menu {
  display: none;
}
.msg > div {
  display: table-cell;
  vertical-align: top;
}
.msg .avatar {
  padding: <%= style.padding %>px;
  padding-right: <%= style.padding / 2 %>px;
  /* Table cell width */
  width: 32px;
}
.msg .avatar > * {
  border-radius: 6px;
  /* Image size */
  width: 32px;
  height: 32px;
}
.msg .content {
  word-wrap: break-word;
  padding: <%= style.padding %>px;
  padding-left: <%= style.padding / 2 %>px;
  /* Required for making action menu's absolute position relative to this div */
  position: relative;
}
.msg .sender {
  height: 15px;
  line-height: 1;
  padding-bottom: 2px;
}
.msg .sender > div {
  display: inline-block;
}
.msg .sender .name {
  font-weight: 600;
}
.msg .sender .time {
  font-size: 12px;
}

.steps p {
  font-size: 13px;
  margin: 2px 0;
}

.text .label {
  font-size: 13px;
  white-space: nowrap;
}
.text > p:first-child,
.text > .code-block:first-child {
  margin-top: 0;
}
.text > p:last-child,
.text > .code-block:last-child {
  margin-bottom: 0;
}

.text sup {
  padding: 0.2em;
}
.text blockquote {
  border-left: 5px solid;
  margin: 0;
  padding: 10px;
}

.text .code-block pre, .text code {
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  tab-size: 2;
  word-break: break-word;
  word-wrap: break-word;
}
.text .code-block, .text code {
  border: 1px solid;
}
.text .code-block {
  border-radius: 4px;
  margin: 1rem 0 1rem;
  /* Clear floats */
  overflow: hidden;
}
.text .code-block .toolbar {
  height: 28px;
  /* Must add radius here otherwise parent's border would be weird */
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.text .code-block .toolbar span {
  text-transform: uppercase;
  font-size: 12px;
  line-height: 24px;
  padding: 2px;
  padding-left: 0.5rem;
  /* Aligned to left */
  float: left;
}
.text .code-block .toolbar a {
  padding: 2px;
  padding-right: 0.5rem;
  /* Aligned to right */
  float: right;
}
.text .code-block pre {
  padding: .5rem;
  margin: 0;
  font-size: .75rem;
  line-height: 1.15rem;
  white-space: pre-wrap;
}
.text code {
  font-size: .75rem;
  line-height: .75rem;
  white-space: normal;
  padding: 2px 3px 1px;
  border-radius: 3px;
}

.text ul, .text ol {
  padding-left: 0;
  list-style-position: inside;
}
.text table {
  margin: 1rem 0 1rem;
  border: 1px solid;
  border-collapse: collapse;
}
.text th {
  font-weight: bold;
}
.text th, .text td {
  text-align: left;
  padding: 0.5em;
  border: 1px solid;
}

#replies button {
  float: left;
  height: 20px;
  font-size: 12px;
  margin: <%= style.padding / 2 %>px <%= style.padding / 2 %>px 0 0;
  padding: 0 10px;
  border: 1px solid;
  border-radius: 4px;
  cursor: pointer;
  transition: all 80ms linear;
}
#replies button:hover {
  background: #EEE;
  box-shadow: 0 1px 3px 0 #00000014;
}
#replies button.attention {
  background-color: <%= style.accentColor %>;
  color: #FFF;
}
