:root {
  --base03:    #002b36;
  --base02:    #073642;
  --base01:    #586e75;
  --base00:    #657b83;
  --base0:     #839496;
  --base1:     #93a1a1;
  --base2:     #eee8d5;
  --base3:     #fdf6e3;
  --yellow:    #b58900;
  --orange:    #cb4b16;
  --red:       #dc322f;
  --magenta:   #d33682;
  --violet:    #6c71c4;
  --blue:      #268bd2;
  --cyan:      #2aa198;
  --green:     #859900;
}

html,body {
  overflow: hidden;
  background: var(--base03);
}

body {
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  overflow-x: hidden;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
  color: var(--base03);
}

body,input {
  font-family: BlinkMacSystemFont, "San Francisco",
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", 
    "Fira Sans", "Droid Sans", "Helvetica Neue", 
    sans-serif, FontAwesome;
}

a:link {
  color: var(--blue);
}

a:visited {
  color: var(--violet);
}

a:hover {
  color: var(--violet);
}

#panel {
  flex-grow: 1;
}

#panel ol {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

#panel ol:before {
  content: "\f110";
  opacity: 0;
  display: block;
  text-align: center;
  color: #555;
  font-family: FontAwesome;
  padding: 3px 0;
  width: 15px;
  margin: 0 auto;
}

#panel ol.loading:before {
  opacity: 1;
  content: "\f110";
  color: #ffa130;
  transition: opacity 0.1s;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

#panel ol li.info.monospace,
#panel ol li.info {
  background: #eee;
  padding: 2px 10px;
  white-space: pre-wrap;
  color: #333;
  font-family: "Menlo", "Inconsolata", "Consolas",
    "Droid Sans Mono", "Monaco", monospace;
  font-size: 15px;
  padding
}

#panel ol li.chat.info:hover {
  background: #eee;
}

#panel ol li.chat {
  padding: 2px 10px;
  position: relative;
  transition: none;
}

#panel ol li.chat.loading {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

#panel ol li.chat.loading.loaded {
  opacity: 1;
}

#panel ol li.chat:hover {
  background: rgba(0, 0, 0, 0.02);
}

#panel ol li.chat.self {
  background: rgba(49, 168, 255, 0.10);
}

#panel ol li.chat.disconnect,
#panel ol li.chat.connect {
  background: rgba(49, 168, 255, 0.10);
}

#panel ol li.chat.highlight {
  background: rgba(118, 49, 255, 0.15);
}

#panel ol li.chat.focused,
#panel ol li.chat.search {
  background: rgba(255, 239, 49, 0.2);
}

#panel ol li.filler {
  padding: 0;
  margin: 0;
  border: none;
  height: 0px;
}

#panel ol li.event {
  color: #999;
  font-style: italic;
  padding-left: 20px;
}

#panel ol li.event time {
  float: right;
}

#panel ol li.notice span.channel {
  color: #02c702;
  font-weight: bold;
}

#panel ol li.notice span.host {
  font-weight: bold;
}

#panel ol li.raw {
  font-family: "Menlo", "Inconsolata", "Consolas",
    "Droid Sans Mono", "Monaco", monospace;
  padding-top: 0px;
  padding-bottom: 0px;
  border: none;
  white-space: pre-wrap;
  line-height: 1.2em;
}

#panel ol .date-separator {
  text-align: center;
  position: relative;
  height: 16px;
}

#panel ol .date-separator .date-wrap {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 16px;
  line-height: 0px;
  z-index: 9;
  position: absolute;
  text-align: center;
}

#panel ol .date-separator time {
  font-weight: bold;
  color: var(--base01);
  font-size: 12px;
  height: 12px;
  line-height: 12px;
  text-align: center;
  display: inline-block;
  background: #fff;
  padding: 2px 10px;
  -webkit-user-select: none;
  cursor: default;
}

body.solarized #panel ol .date-separator time {
  background: var(--base3);
}

body.solarized-dark #panel ol .date-separator time {
  background: var(--base02);
  color: var(--base1);
}

#panel ol .date-separator hr {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 0px;
  border: 0;
  border-top: 1px solid var(--base1);
  margin: 0;
  padding: 0;
  z-index: 1;
}

#panel ol li.event + .last-read + li.event,
#panel ol li.event + li.event {
  border-top: none;
}

#panel ol li.event + .last-read + li.event,
#panel ol li.event + li.event {
  padding-top: 0px;
}

#panel ol li.chat span.message-nick {
  font-weight: bold;
}

.nick-popup {
  position: absolute;
  background: #fff;
  padding: 10px;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
  border-radius: 2px;
  z-index: 999;
  bottom: 100%;
  color: #000;
  font-weight: normal;
  box-sizing: border-box;
}

.nick-popup .nick-avatar {
  max-width: 150px;
  max-height: 150px;
}

.nick-popup h3 {
  margin: 0;
  font-size: 16px;
}

.nick-popup h3, p {
  margin: 3px 0;
}

#panel ol .last-read {
  border-top: 2px dotted #ffa130 !important;
  position: relative;
  z-index: 9;
  background: #fff;
}

body.solarized #panel ol .last-read:before,
body.solarized #panel ol .last-read {
  background: var(--base3);
}

body.solarized-dark #panel ol .last-read:before,
body.solarized-dark #panel ol .last-read {
  background: var(--base02);
}

#panel ol .last-read + li.chat {
  border-top: none !important;
}

#panel ol .last-read:before {
  display: block;
  position: absolute;
  content: "last read";
  text-align: center;
  padding: 0 10px;
  top: -6px;
  right: 0px;
  background: #fff;
  color: #ffa130;
  font-size: 10px;
  line-height: 10px;
  font-style: italic;
  font-weight: bold;
}

#panel ol .search-start {
  border-top: 1px dashed #ffa130 !important;
  position: relative;
  z-index: 9;
}

#panel ol .search-start:before {
  display: block;
  position: absolute;
  content: "lastlog";
  text-align: center;
  padding: 0 10px;
  top: -8px;
  right: 0px;
  background: #fff;
  color: #ffa130;
  font-size: 10px;
  font-style: italic;
  font-weight: bold;
}

/*
#panel ol li.message.consecutive {
  border-top: none;
  padding-top: 0;
}

#panel ol li.message.consecutive .message-nick,
  visibility: hidden;
}
*/

#panel ol li.event time,
#panel ol li.message time {
  color: #999;
  margin-left: 5px;
  font-size: 11px;
  line-height: 11px;
  padding-top: 5px;
  font-style: normal;
}

#panel ol li.message time:hover {
  text-decoration: underline;
  cursor: pointer;
}

#panel ol li.message.monospace time {
  padding-top: 2px;
}

#panel ol li.chat time.hidden {
  visibility: hidden;
}

#panel ol li.chat:hover time.hidden {
  visibility: visible;
}

#panel ol li.chat span.message-nick {
  cursor: pointer;
}

#panel ol li.message a {
  word-break: break-all;
}

.image-wrap {
  padding: 4px 0;
  line-height: 0px;
}

.image-wrap.hidden {
  display: none;
}

#image-uploads {
  max-height: 80px;
  min-height: 20px;
  background: #fff;
  border: 1px solid #ccc;
  margin: 0 10px;
  overflow-y: auto;
  overflow-x: hidden;
}

#image-uploads div.uploaded-image {
  float: left;
  position: relative;
  margin: 4px;
  height: 50px;
  max-width: 100px;
  background: #eee;
  padding: 2px;
}

#image-uploads div.image-delete:before {
  position: absolute;
  top: 2px;
  right: 2px;
  content: "\f057";
  font-size: 18px;
  color: #000;
  opacity: 0;
  border-radius: 9px;
  line-height: 18px;
  height: 18px;
  width: 18px;
  text-align: center;
  background: #fff;
}

#image-uploads div.uploaded-image:hover div.image-delete:before {
  opacity: 1;
}

#image-uploads div.image-delete:hover:before {
  color: red;
}

#image-uploads div.uploaded-image img {
  display: block;
}

.image-toggle.hidden:after,
.embed-toggle.hidden:after {
  content: "\f0da";
}

.image-toggle,
.embed-toggle {
  margin-left: 4px;
  cursor: pointer;
  font-family: FontAwesome;
}

.image-toggle:after,
.embed-toggle:after {
  content: "\f0d7";
  width: 10px;
  display: inline-block;
  text-align: center;
  color: #7600bd;
}

.image-wrap a {
  display: inline-block;
  border: 1px solid #eee;
  outline: 2px solid rgba(0,0,0,0.025);
}

body.solarized-dark .image-wrap a {
  border: 1px solid var(--base01);
}

.image-wrap a:hover {
  border: 1px solid #ccc;
}

body.solarized-dark .image-wrap a:hover {
  border: 1px solid var(--base00);
}

.image-wrap audio,
.image-wrap video,
.image-wrap img {
  max-width: 100%;
  max-height: 300px;
  display: block;
}

.image-wrap a img {
  cursor: zoom-in;
}

#foot {
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
  flex-flow: row;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  right: 0px;
  bottom: 0px;
  position: relative;
}

body.solarized #foot {
  background: var(--base2);
}

.invert {
  filter: invert(100%);
  background: #fff;
  color: #000;
}

#input {
  flex-grow: 1;
  padding: 5px;
  padding-bottom: 0;
  overflow: hidden;
}

#typing-indicator {
  padding: 5px;
  padding-top: 0;
  margin: 0;
  width: 100%;
  font-size: 12px;
  height: 1em;
  color: #666;
}

#input .input {
  display: block;
  overflow: hidden;
  outline: none;
  font-size: 15px;
  line-height: 15px;
  min-height: 19px;
  border: 1px solid #ccc;
  padding: 5px;
  margin: 0;
  white-space: pre-wrap;
  font-family: BlinkMacSystemFont, "San Francisco",
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
}

body.solarized #input .input {
  background: var(--base3);
}
body.solarized-dark #input .input {
  border: 1px solid var(--base01);
}

#input .input.disabled {
  background: #eee;
}

#input .input.coloring:focus,
#input .input.coloring {
  border: 1px solid #83d37a;
  box-shadow: 0 0 0 1px #a9f79e;
}

#input .input:focus {
  border: 1px solid #7a9cd3;
  box-shadow: 0 0 0 1px #9ec0f7;
  border-radius: 2px;
}

body.solarized-dark #input .input:focus {
  border: 1px solid var(--base0);
  box-shadow: 0 0 0 1px var(--base0);
}

.nav#meta-channels {
  padding: 10px 0 0 0;
}

.nav li[data-panel-id=highlights] {
  padding: 6px 0 6px 5px;
  margin: 0;
  font-size: 15px;
  line-height: 15px;
  font-weight: normal;
  cursor: pointer;
}

.nav li[data-panel-id=highlights].highlighted:before,
.nav li[data-panel-id=highlights].unread:before {
  color: var(--orange);
  content: "\f005";
}
.nav li[data-panel-id=highlights].highlighted,
.nav li[data-panel-id=highlights].unread {
  font-weight: bold;
}

.nav li[data-panel-id=highlights]:before {
  opacity: 1;
  content: "\f006";
  font-family: FontAwesome;
  color: var(--base00);
  font-size: 12px;
  line-height:12px;
  width: 16px;
  display: inline-block;
  text-align: center;
}

#nav {
  position: relative;
  width: 200px;
  flex-grow: 1;
  flex-shrink: 1;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  -webkit-user-select: none;
  background: var(--base03);
  overflow: auto;
}

#nav.filtering h2 {
  display: none;
}

#nav.filtering h2.collapsed + .nav {
  height: auto;
  overflow: auto;
  transition: none;
}

#nav.filtering li {
  display: none;
}

#nav.filtering #status li.match {
  display: none;
}

#nav.filtering li.match {
  display: block;
}

.nav {
  margin: 0;
  padding: 0;
  height: auto;
  transition: height 0.5s;
}

.nav-title .count {
  font-size: 10px;
}

.count:before {
  content: "(";
}
.count:after {
  content: ")";
}

.nav-title.expandable.collapsed {
  padding-bottom: 0;
}

.nav-title.expandable.collapsed + .nav li {
  display: none;
}

.nav-title.expandable.collapsed + #status li.active,
.nav-title.expandable.collapsed + #status li.disconnected {
  display: block;
}

.nav#privates {
  flex-grow: 1;
}

.nav-title.networks:before {
  content: "\f1e6";
  opacity: 1;
  font-family: FontAwesome;
  color: var(--base00);
  font-size: 12px;
  line-height: 12px;
  width: 16px;
  display: inline-block;
  text-align: center;
}

.nav-title.networks {
  padding: 5px 10px 5px 5px;
  margin: 0;
}

.nav-title {
  padding: 0 10px 0 5px;
  margin: 15px 0 5px 0;
  font-size: 15px;
  color: var(--base1);
  font-weight: normal;
}

.nav-title.expandable {
  cursor: pointer;
}

.nav-title-text {
  display: inline-block;
  padding-left: 4px;
}

.nav-title.networks .nav-title-text {
  padding-left: 0;
}

.nav-title.expandable:hover {
  color: #fff;
}

.nav li a.panel-log,
.nav li a.edit-panel,
.nav li a.close-panel {
  display: block;
  float: right;
  margin-right: 10px;
  font-size: 15px;
  height: 15px;
  opacity: 0;
  color: var(--base1);
}

.nav li a.panel-log {
  margin-right: 4px;
  padding-top: 2px;
  font-size: 12px;
}

.nav li.active a.panel-log,
.nav li.active a.edit-panel,
.nav li.active a.close-panel {
  color: #fff;
}

.nav li:hover a.panel-log,
.nav li:hover a.edit-panel,
.nav li:hover a.close-panel {
  opacity: 1;
}

.nav li a.panel-log:hover,
.nav li a.edit-panel:hover,
.nav li a.close-panel:hover {
  color: #fff;
}

.nav li.unread a.panel-name {
  font-weight: bold;
  color: #fff;
}

.nav li.highlighted:before {
  content: "\f111";
  color: var(--orange);
}

.nav li.disconnected:before {
  content: "\f1e6";
  color: var(--red);
}

.nav li:before {
  content: '';
  font-family: FontAwesome;
  font-size: 12px;
  line-height: 12px;
  width: 14px;
  text-align: center;
  display: inline-block;
}

.nav li {
  cursor: pointer;
  padding: 5px 0px 5px 5px;
  color: var(--base01);
  font-size: 15px;
  line-height: 15px;
  list-style: none;
}

.nav li.active:hover,
.nav li.active {
  background: var(--cyan);
}

.nav li.active.disconnected a,
.nav li.active a {
  color: #fff;
}

.nav li.selected a,
.nav li.selected {
  background: var(--blue) !important;
  color: #fff !important;
}

.nav li:hover {
  background: var(--base02);
}

.nav li a {
  color: var(--base1);
}

.nav li.disconnected a {
  color: var(--base0);
}

#reconnect {
  display: none;
}

body.disconnected #reconnect {
  flex-shrink: 0;
  display: block;
  width: 100%;
  background: #ffa130;
  color: #fff;
  padding: 8px 10px;
  font-size: 15px;
  line-height: 15px;
  box-sizing: border-box;
  z-index: 99;
}

#topic {
  flex-shrink: 0;
  padding: 8px 10px;
  overflow-x: hidden;
  margin: 0;
  white-space: pre;
  min-height: 15px;
  display: flex;
  box-shadow: 0 0px 6px rgba(0,0,0,0.2);
}

body.solarized #topic {
  background: var(--base2);
}

body.solarized-dark #topic {
  background: var(--base03);
}

#topic.expanded {
  white-space: pre-wrap;
}

#topic p {
  margin: 0;
  padding: 0;
  line-height: 15px;
  font-size: 15px;
}

.overlay {
  z-index: 9999999;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(0,0,0,0.5);
  text-align: center;
}

.image-popup-wrap {
  padding: 20px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
}

img.image-popup {
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  cursor: zoom-out;
}

.dialog {
  display: none;
  text-align: left;
  margin: 20px auto;
  font-size: 12px;
  background: #eee;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
  border-radius: 2px;
  padding: 15px;
  width: 200px;
}

.dialog.config {
  width: 250px;
}

.overlay .dialog {
  display: inline-block;
}

.login hr {
  border: none;
  margin: 20px 0;
}

.reset-wrap {
  display: none;
}

.overlay select,
.overlay label,
.overlay input[type=text],
.overlay input[type=number],
.overlay input[type=email],
.overlay input[type=password]
{
  width: 100%;
  box-sizing: border-box;
  display: block;
}

.overlay input[type=number] {
  width: 4.8em;
}

.overlay select,
.overlay input[type=number],
.overlay input[type=text],
.overlay input[type=email],
.overlay input[type=password] {
  font-size: 12px;
  padding: 5px;
}

.overlay .input-group {
  margin: 0;
  padding: 0;
  margin-top: 8px;
  border: none;
}

.overlay .input-h-group {
  display: flex;
  flex-direction: row;
}

.overlay .input-h-group .input-group {
  position: relative;
  margin-left: 8px;
}

.overlay .input-h-group:first-child .input-group {
  margin-top: 0;
}

.overlay .input-h-group .input-group:first-child {
  margin-left: 0;
}

.overlay .required {
  font-weight: bold;
  color: red;
}

.overlay hr {
  border: none;
  border-top: 1px solid #ccc;
  height: 0;
}

.overlay .submit-group {
  margin: 0;
  padding: 0;
  margin-top: 12px;
  padding-top: 12px;
  border: none;
  text-left: right;
  border-top: 1px solid #ccc;
}

p.note {
  font-size: 12px;
  margin: 0;
  padding: 0;
  text-align: right;
}

.overlay label {
  color: #555;
  margin-bottom: 3px;
}

.overlay input {
  font-size: 15px;
}

.dialog a.close {
  color: #000;
  display: inline-block;
  float: right;
  font-size: 12px;
}

.overlay h2 {
  font-size: 18px;
  margin-top: 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 12px;
}

#panel-name {
  display: none;
  font-size: 15px;
  line-height: 15px;
  font-weight: bold;
  margin: 0;
  padding: 8px 0 8px 25px;
}

div.header-right {
  float: right;
}

.flex-wrap-left header h1 {
  margin: 0;
  padding: 8px 0 8px 10px;
  font-size: 15px;
  line-height: 15px;
  color: #fff;
  font-weight: bold;
  -webkit-user-select: none;
  display: inline-block;
  position: relative;
}

.flex-wrap-left header {
  flex-grow: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--base03);
  font-size: 15px;
  line-height: 15px;
  color: var(--base00);
  position: relative;
  cursor: pointer;
}

.flex-wrap-left header:hover {
  background: var(--base02);
}

.nav-title .join-channel,
.nav-title .add-connection {
  display: inline-block;
  cursor: pointer;
  float: right;
  margin-top: 6px;
  color: var(--base1);
  font-size: 12px;
}

#web-notify.broken {
  display: none;
}

#web-notify.enabled a:before,
#email-notify.enabled a:before {
  content: "\f046";
  padding-right: 5px;
}

#logs a:before {
  content: "\f0f6";
  padding-right: 5px;
}

#web-notify a:before,
#email-notify a:before {
  content: "\f096";
  padding-right: 5px;
}

.nav-title .join-channel:hover,
.nav-title .add-connection:hover {
  color: #fff;
}

.message-flex {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.message-nick {
  white-space: pre;
}

li.message.monospace .message-flex .message-text,
li.message.monospace .message-flex .message-nick {
  line-height: 1.1em;
}

#panel ol li.message.monospace.consecutive {
  padding-top: 0px;
  padding-bottom: 0px;
}

#panel ol li.message:not(.monospace) + li.message.monospace,
#panel ol li.message.monospace:first-child,
#panel ol li.message.monospace-start {
  padding-bottom: 0px;
  padding-top:  3px;
}

#panel ol li.message.monospace:last-child,
#panel ol li.message.consecutive.monospace-end {
  padding-bottom: 2px !important;
}

#panel ol li.message.monospace-start.monospace-end {
  padding-top: 3px !important;
  padding-bottom: 2px !important;
}

.message-flex .message-nick {
  display: block;
  flex-shrink: 0;
  flex-grow: 0;
  line-height: 1.4em;
}
.message-text {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
}

.message-text-pre {
  white-space: pre-wrap;
  line-height: 1.4em;
}

li.monospace .message-text {
  font-family: "Menlo", "Inconsolata", "Consolas",
    "Droid Sans Mono", "Monaco", monospace;
}

.message-text .image-wrap,
.message-text .embed-wrap-wrap,
.message-text .embed-wrap {
  white-space: normal;
}

li.event time,
.message-flex time {
  flex-grow:  0;
  flex-shrink: 0;
  display: inline-block;
  -webkit-user-select: none;
  cursor: default;
}

#global-controls-toggle {
  display: inline-block;
  -webkit-user-select: none;
  color: var(--base00);
}

header:hover #panel-name,
header:hover #global-controls-toggle {
  color: #fff;
}

#global-controls sup {
  font-size: 9px;
  line-height: 0px;
}

#global-controls li:hover {
  background: var(--base2);
}

#panel-name {
  text-shadow: none;
  padding: 8px 0px 8px 15px;
  cursor: pointer;
  color: #fff;
}

#global-controls-toggle {
  padding: 8px 10px 8px 10px;
  cursor: pointer;
}

#global-controls {
  display: none;
  position: absolute;
  left: 0px;
  top: 0px;
  text-align: right;
  margin: 0px;
  padding: 0px;
  background: var(--base3);
  width: 100%;
}

.flex-wrap.open #global-controls {
  display: block;
}

#global-controls li {
  display: block;
  margin: 0;
  padding: 8px 20px;
  font-size: 15px;
  box-sizing: border-box;
  cursor: pointer;
  list-style: none;
  text-align: left;
}

#global-controls li.link {
  padding: 0;
}

#global-controls li.select {
  cursor: default;
}

#global-controls li.select select {
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  font-family: BlinkMacSystemFont, "San Francisco",
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
}

#global-controls li.select option {
  font-size: 15px;
  font-family: BlinkMacSystemFont, "San Francisco",
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
}

#global-controls li.link a {
  padding: 8px 20px;
  display: block;
}

#global-controls li:hover a {
  color: #555;
}

#global-controls li a {
  color: #777;
  text-decoration: none;
}

.help {
  display: none;
  width: 350px;
  background: #eee;
  margin: 20px auto;
  font-size: 15px;
  background: #eee;
  padding: 20px;
  border-radius: 2px;

}

.help dt, dd {
  margin: 0;
  padding: 0;
}

.help dt {
  font-weight: bold;
}

.help dd {
  margin-bottom: 10px;
}

.help dd:last-child {
  margin-bottom: 0;
}

.help dl {
  float: left;
}

.help h3 {
  border-bottom: 1px solid #ccc;
  margin: 0;
  margin-bottom: 10px;
}

.help dl + dl {
  margin-left: 30px;
}

.help p {
  clear: both;
}

div.flex-wrap {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.flex-wrap-left {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.flex-wrap-right {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

body.solarized .flex-wrap-right {
  background: var(--base3);
}

body.solarized-dark .flex-wrap-right {
  background: var(--base02);
  color: #fff;
}

body[data-panel-type=channel] .channel-meta {
  display: none;
}

body[data-panel-type=channel].show-nicklist .channel-meta {
  display: flex;
}

.hide-events .event {
  display: none;
}

#toggle-nicks {
  color: #fff;
  background: #fff;
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 6px 15px;
  color: var(--magenta);
  font-size: 18px;
  cursor: pointer;
}

body.solarized #toggle-nicks {
  background: var(--base2);
}

body.solarized-dark #toggle-nicks {
  background: var(--base03);
}

.show-nicklist #toggle-nicks,
#toggle-nicks:hover {
  background: #fff;
}

body.solarized #toggle-nicks:hover {
  background: var(--base3);
}

body.solarized-dark #toggle-nicks:hover {
  background: var(--base02);
}

ul.channel-controls {
  list-style: none;
  margin: 0;
  padding: 0;
  background: rgba(0,0,0,0.03);
  border-bottom: 3px solid #eee;
}

ul.channel-controls li a {
  display: block;
  cursor: pointer;
  padding: 5px 15px;
}

#view-log .history:before,
#toggle-hideembeds .checkbox:before,
#toggle-sendtyping .checkbox:before,
#toggle-hideevents .checkbox:before {
  content: "\f096";
  font-family: FontAwesome;
  width: 15px;
  text-align: left;
  display: inline-block;
  padding-right: 4px;
}

.hide-embeds #toggle-hideembeds .checkbox:before,
.send-typing #toggle-sendtyping .checkbox:before,
.hide-events #toggle-hideevents .checkbox:before {
  content: "\f046";
}

#view-log .history:before {
  content: "\f0f6";
}

ul.channel-controls li a:hover {
  background: #efefef;
}

.channel-meta {
  width: 150px;
  overflow: hidden;
  border-left: 1px solid #eee;
  flex-grow: 0;
  flex-shrink: 0;
  display: none;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  -webkit-user-select: none;
  color: #555;
}

body.solarized-dark .channel-meta {
  color: var(--base1);
}

#nicks {
  flex-grow: 1;
  flex-shrink: 1;
  overflow-x: hidden;
  overflow-y: auto;
}

#nicks ul {
  margin: 0;
  padding: 0;
}

#nicks ul li {
  list-style: none;
  margin: 0;
  padding: 2px 15px;
  position: relative;
}

#nicks ul li a {
  cursor: pointer;
  color: #555;
}

body.solarized-dark #nicks ul li a {
  color: var(--base1);
}

#nicks ul li a:hover {
  color: #000;
}

body.solarized-dark #nicks ul li a:hover {
  color: #fff;
}

.flex-wrap-panel {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  overflow: hidden;
}

#panel-scroll {
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex-grow: 1;
}

#panel-scroll:focus {
  outline: none;
}

.emoji-wrap {
  line-height: 0px;
  overflow: hidden;
}

.emoji-large {
  font-size: 48px;
  line-height: 64px;
  display: inline-block;
  height: 64px;
  overflow: hidden;
}

#emoji {
  cursor: pointer;
}

#emoji.open:hover:before,
#emoji.open:before {
  content: '\f118';
  color: #000;
}

#emoji:hover:before {
  content: '\f11a';
  color: #000;
}

#emoji:before {
  content: '\f11a';
  display: inline-block;
  filter: grayscale(100%);
  font-size: 18px;
  color: #666;
  height: 18px;
  line-height: 18px;
  padding: 9px 5px 8px 5px;
  cursor: pointer;
}

.upload-popup input[type=file] {
  width: 220px;
}

.upload-popup {
  display: none;
  position: absolute;
  bottom: 100%;
  right: 0px;
  cursor: default;
  z-index: 999;
}

.upload-popup form {
  display: block;
  padding: 10px;
}

.upload-popup input {
  font-size: 15px;
}

.upload-popup input[type=submit] {
  margin-top: 10px;
  font-weight: bold;
}

#upload {
  cursor: pointer;
}

#upload.open .upload-popup {
  display: block;
}

#gist-upload-input {
  width: 100%;
  height: 4em;
  line-height: 12px;
  font-size: 12px;
  font-family: monospace;
  box-sizing: border-box;
}

#gist-upload-extension {
  font-size: 15px;
  float: right;
  margin-top: 10px;
  padding: 4px;
}

#switcher-wrap {
  padding: 0 5px;
  height: 0px;
  overflow: hidden;
}

#switcher-wrap.open {
  padding: 5px;
  height: auto;
}

#switcher {
  display: block;
  overflow: hidden;
  outline: none;
  font-size: 15px;
  border: 1px solid #ccc;
  padding: 5px;
  margin: 0;
  white-space: pre;
  background: #fff;
  font-family: BlinkMacSystemFont, "San Francisco",
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  width: 100%;
  box-sizing: border-box;
}

#switcher:focus {
  border: 1px solid #7a9cd3;
  box-shadow: 0 0 0 1px #9ec0f7;
  border-radius: 2px;
}

#upload hr {
  background: none;
  border: none;
  border-bottom: 1px solid #fff;
  border-top: 1px solid #ccc;
}

#upload:before {
  content: '\f0ee';
  color: #666;
  display: inline-block;
  filter: grayscale(100%);
  font-size: 18px;
  height: 18px;
  line-height: 18px;
  padding: 9px 5px 8px 5px;
  cursor: pointer;
}

#upload.open:before,
#upload:hover:before {
  color: #000;
}

.emoji-popup {
  height: 0px;
  visibility: hidden;
  z-index: 999;
}

.message-menu {
  position: relative;
}

.message-menu.open .message-menu-popup {
  display: block;
}

.message-menu-popup {
  z-index: 999;
  width: 120px;
  overflow: hidden;
  position: absolute;
  bottom: 100%;
  right: -10px;
  padding: 0px;
  background: #fff;
  display: none;
}

.message-menu-popup ul {
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  overflow: auto;
  padding: 0;
  margin: 0;
  background: #fff;
}

.message-menu-popup ul li {
  padding: 5px;
  font-size: 12px;
  color: #666;
}

.message-menu-popup ul li:hover {
  cursor: pointer;
  color: #000;
}

.message-menu-popup ul li+li {
  border-top: 1px solid #ccc;
}

.message-react .emoji-popup {
  width: 310px;
  right: -39px;
}

.message-react.open .emoji-popup,
#emoji.open .emoji-popup {
  height: auto;
  visibility: visible;
}

.message-menu-popup,
.emoji-popup,
.upload-popup {
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  background: #eee;
  border-bottom: none;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  max-width: 310px;
}

.emoji-popup {
  overflow: hidden;
  position: absolute;
  bottom: 100%;
  right: 0px;
  padding: 0px;
}

.delete-connection {
  margin-right: 5px;
}

.emoji-search {
  display: block;
  padding: 5px;
}

.emoji-search input {
  display: block;
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid #ccc;
}

.emoji-popup ul {
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  max-height: 200px;
  overflow: auto;
  padding: 5px;
  margin: 0;
  background: #fff;
}
.emoji-popup li {
  list-style: none;
  margin: 0;
  padding: 2px;
  overflow: hidden;
  box-sizing:  border-box;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}
.emoji-popup li:hover {
  background: #eee;
}

.embed-wrap {
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #ddd;
  cursor: pointer;
  max-width: 500px;
  outline: 2px solid rgba(0,0,0,0.025);
}

body.solarized-dark .embed-wrap {
  border: 1px solid var(--base01);
}

.embed-wrap-wrap {
  padding: 4px 0 4px 0;
}

.embed-wrap.open:hover,
.embed-wrap.open {
  border: none;
  border-radius: 0px;
  cursor: auto;
  max-width: none;
  outline: none;
  background: none;
}

.embed-wrap:hover {
  border: 1px solid #ccc;
}

body.solarized-dark .embed-wrap:hover {
  border: 1px solid var(--base00);
}

.embed-wrap p,
.embed-wrap h2 {
  font-size: 15px;
  margin: 5px 15px;
}
.embed-wrap p.description {
  font-size: 12px;
}

.embed-thumb {
  background-repeat: no-repeat;
  position: relative;
  background-position: center center;
  background-size: cover;
  width: 110px;
  height: 110px;
  float: left;
  margin-right: 10px;
}

p.embed-source {
  color: #999;
  font-size: 12px;
  margin-bottom: 5px;
}

.embed-play {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background-image: url(/static/play_overlay.png);
  background-repeat: no-repeat;
  background-size: 30px 45px;
  background-position: center center;
  cursor: pointer;
}

.embed-wrap.open {
  max-height: none;
}

.embed-wrap[data-embed-provider="twitter"] blockquote > p {
  white-space: pre-wrap;
}

.embed-wrap .twitter-tweet-rendered,
.embed-wrap twitterwidget {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.message-controls {
  position: absolute;
  top: 2px;
  right: 42px;
  padding: 2px;
  font-size: 15px;
  line-height: 15px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 99;
  display: none;
  color: #666;
}

li.message.monospace.consecutive .message-controls {
  top: -2px;
}

li.message:hover .message-controls,
.message-controls.open {
  display: block;
}

.message-react,
.message-menu {
  display: inline-block;
}

.message-react.open,
.message-react:hover,
.message-menu.open,
.message-menu:hover {
  color: #000;
}

.message-react:before,
.message-menu:before {
  cursor: pointer;
  padding: 0 3px;
}

.message-react + .message-menu {
  border-left: 1px solid #ccc;
}

.message-react:before {
  content: '\f11a';
}

.message-menu:before {
  content: '\f141';
}

.message-react.open:before {
  content: '\f118';
}

.reactions {
  text-align: left;
}

.reactions span {
  background: rgba(0,0,0,0.05);
  display: inline-block;
  text-align: center;
  padding: 4px 2px;
  margin-left: 2px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 3px;
  font-size: 16px;
  line-height: 16px;
}

#color-info {
  margin-top: 5px;
  width: 0px;
  overflow: hidden;
  text-align: right;
  transition: width 1s;
}

#color-info.open {
  width: auto;
}

#color-info td {
  font-family: "Menlo", "Inconsolata", "Consolas",
    "Droid Sans Mono", "Monaco", monospace;
  font-size: 10px;
  color: #fff;
  padding: 2px;
  width: 12px;
  text-align: center;
  text-shadow: -1px -1px 0px rgba(0,0,0,0.75);
}

@media (max-width: 800px) {
  div.flex-wrap {
    flex-direction: column;
  }

  #nav {
    border-right: none;
  }

  .flex-wrap-left {
    width: auto;
  }

  .flex-wrap-left header h1 {
    padding-left: 10px;
  }

  #panel-name {
    display: inline-block;
  }

  div.flex-wrap.open .flex-wrap-left {
    display: flex;
    height: 100%;
  }

.flex-wrap-left header h1 {
  padding: 10px 0 10px 10px;
}

  div.flex-wrap.open .flex-wrap-right {
    display: none;
  }

  div.flex-wrap.open #nav {
    display: block;
  }

  .flex-wrap #nav {
    display: none;
    width: auto;
  }

  .message-flex {
    display: block;
    position: relative;
  }

  .message-flex .message-nick {
    display: inline-block;
  }

  li.message.monospace.consecutive .message-nick {
    display: none;
  }

  .message-flex time {
    position: absolute;
    top: 0px;
    right: 0px;
  }

  #panel ol li.event {
    padding-left: 10px;
  }

  .nav li a.panel-log,
  .nav li a.edit-panel,
  .nav li a.close-panel {
    opacity: 1;
    margin-right: 15px;
  }

.nav li {
  cursor: pointer;
  padding: 10px 0px 10px 5px;
}


.nav li[data-panel-id=highlights] {
  padding: 10px 0 10px 5px;
}

#global-controls {
  display: none;
  position: relative;
  text-align: left;
  margin: 0px;
  padding: 0px;
  box-shadow: none;
}

.flex-wrap.open #global-controls {
  display: block;
  border-right: none;
}

.nav-title .add-connection,
.nav-title .join-channel {
  display: none;
}

.dialog {
  position: absolute;
  width: auto;
  display: none;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: 0;
  font-size: 15px;
  background: #eee;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  box-shadow: none;
  border-radius: 0px;
  padding: 10px;
}

.channel-meta {
  width: 100%;
}

body[data-panel-type=channel].show-nicklist #panel-scroll {
  display: none;
}
body[data-panel-type=channel] #panel-scroll {
  display: block;
}

#global-controls-toggle {
  padding: 10px 10px 10px 10px;
}

.emoji-popup,
.upload-popup {
  max-width: none;
  width: 100%;
}

#emoji {
  display: none;
}
#foot {
  flex-direction: row-reverse;
}
#title-top.unread:before {
  opacity: 1;
  font-family: FontAwesome;
  font-size: 12px;
  line-height:12px;
  width: 16px;
  display: inline-block;
  text-align: center;
  color: var(--orange);
  content: "\f005";
  position: absolute;
  top: 7px;
  right: -15px;
}
}

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 2dppx) {
body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
}