@import url(https://fonts.googleapis.com/css?family=Rubik:400,700);

body {
  font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#user {
  position: absolute;
  top: 10px;
  right: 10px;
}
#user.staff {
  background-color: #6f5499;
}

#connection-status {
  position: absolute;
  top: 33px;
  right: 10px;
}
#save-status {
  white-space: pre;
}
#connection-status,
#save-status {
  border-radius: 10px;
}
#connection-status.label-success,
#save-status.label-success {
  opacity: .5;
}
#save-status.label-warning {
  transition: background-color 1s 1s, opacity 1s 1s;
}

#back {
  position: relative;
  top: 10px;
}
#back::before {
  font-weight: bold;
  content: '\2190\00a0';
}

#big-logo {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#big-text {
  position: absolute;
  top: 10%;
  left: 10%;
  max-width: 80%;
  background: rgba(255, 255, 255, .75);
  padding: 1em;
  border-radius: 1em;
}
#big-text :first-child { margin-top: 0; }
#big-text :last-child { margin-bottom: 0; }
#big-text img, #big-text video { max-width: 100%; }

h1 span.glyphicon,
h2 span.glyphicon,
h3 span.glyphicon,
h4 span.glyphicon {
  font-size: 85%;
}

h1 small .label,
h2 small .label,
h3 small .label {
  position: relative;
  top: -0.2em;
}

.label.disabled {
  color: rgba(119, 119, 119, .25);
  background-color: unset;
}

.alert > :first-child {
  margin-top: 0;
}
.alert > :first-child:last-child {
  margin-bottom: 0;
}

#error:empty {
  display: none;
}

#error::before {
  font-weight: bold;
  content: 'Error: ';
}

textarea.text-editor {
  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.comment-text {
  white-space: pre-line;
}
.comment-preview {
  text-align: left;
  max-width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-group[data-toggle='buttons'] .btn-link {
  border-radius: 4px;
}
.btn-group[data-toggle='buttons'] .btn-link:hover {
  text-decoration: none;
}
.btn-group[data-toggle='buttons'] .btn-link.active {
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
}

.masonary {
  columns: 50ex;
  column-gap: 20px;
}
.masonary .tile {
  display: inline-block;
}

.tile.panel .panel-body {
  padding: 10px;
}
.tile h4 {
  margin: 0;
  white-space: pre-line;
}
.tile .panel-body > p:last-child {
  margin-bottom: 0;
}

.tab-content .tab-pane.panel {
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.ping.faded {
  opacity: 0.1;
  transition: opacity 20s ease-out 5s;
  -webkit-transition: opacity 20s ease-out 5s;
}

.faded {
  opacity: 0.33;
}

h4 + .diff {
  margin-top: 10px;
}
.diff {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  line-height: .9;
  overflow: inherit;
}
.diff .diff-part:not(.diff-added) {
  -webkit-filter: grayscale(1);
  opacity: .6;
}
.diff .diff-added {
  line-height: 1.1;
  background: rgba(252, 248, 227, .3);
}
.diff .diff-removed + .diff-added {
}

h4 + .code {
  margin-top: 10px;
}
.code {
  background: none;
  border: none;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
  line-height: 16px;
  overflow: inherit;
}

code {
  counter-reset: code-line;
}
.code-line {
  margin-left: 24px;
}
.code-line::before {
  display: block;
  position: absolute;
  counter-increment: code-line;
  content: counter(code-line);
  color: rgba(119, 119, 119, .5);
  font-size: 12px;
  text-align: right;
  width: 36px;
  height: 14px;
  margin-left: -48px;
  margin-top: 0px;
  background-size: 12px;
  background-position-y: 2px;
  background-repeat: no-repeat;
}
.code-marker-0::before {
  background-image: url(icons/eclipse-info.png);
}
.code-marker-1::before {
  background-image: url(icons/eclipse-warn.png);
}
.code-marker-2::before {
  background-image: url(icons/eclipse-error.png);
}
.code-marker-0, .code-marker-1, .code-marker-2 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}
.code-marker-0 {
  text-decoration-color: rgb(130, 160, 190);
}
.code-marker-1 {
  text-decoration-color: rgb(244, 200, 46);
}
.code-marker-2 {
  text-decoration-color: rgb(255, 0, 128);
}

.code-cursor-line {
  background-color: rgb(232, 242, 254);
}

.subscription {
  padding-left: 10px;
  display: inline-block;
}
.subscription.subscription-vscode {
  color: rgba(0, 101, 169, .75);
}
.subscription.subscription-self {
  color: rgba(93, 184, 93, .5);
}
.subscription.subscription-vscode::before {
  content: '';
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
  background-size: 14px;
  background-image: url(vscode.svg);
  top: 3px;
  margin-right: 2px;
}

/* syntax highlighting with Eclipse colors */
.hljs,
.hljs-subst { color: #333; }
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name { color: rgb(127,0,85); }
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition { color: #2C6F2C; }
.hljs-literal { color: #4D974D; }
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo { color: #BC6060; }
.hljs-type,
.hljs-string,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion { color: rgb(41,0,255); }
.hljs-title,
.hljs-section { color: #333; }
.hljs-comment { color: rgb(63,127,95); }
.hljs-meta { color: rgb(100,100,100); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }