body {
    padding-left: 15px;
    padding-bottom: 10px;
}

html {
    overflow-x: hidden;
}

.annotate-pin {
    border-radius: 0.25em;
    color: #ccc;
    cursor: pointer;
    padding: 0.25em;
    position: absolute;
    z-index: 1;
    top: -1em;
    left: -.5em;
}

.highlighted-line .annotate-pin {
  background: #42425A;
}

.annotate-pin:hover {
  background: #555568;
}

.annotate-pin i.material-icons {
  transform: rotate(-20deg);
  font-size: 1.2em;
  margin: 0.05em 0.03em 0 0;
}

.shown > div {
  position: relative;
}

.focus-clip {
  position: absolute;
  top: -1.5em;
  left: -1.5em;
  background: none;
  color: #ccc;
  margin: 0.5em;
  padding: 0.25em;
  border: none;
}

.focus-clip i.material-icons {
  transform: rotate(60deg);
  font-size: 2em;
}

.linetext button, .linenum button {
    font-size: 1em;
    text-align: left;
    background: none;
    color: #ccc;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
}

.loglines .material-icons {
  font-size: 1em;
  vertical-align: middle;
}

.show-skipped.showable:hover {
    background-color: #666;
}
.show-skipped.showable {
    background-color: #505050;
}

.loglines {
    color: #fff;
    width: calc(100% - 30px);
    font-family: monospace;
    margin-top: 15px;
}
.loglines .linetext span {
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: break-word;
}

.line-highlighted {
    color: rgba(255, 224, 0, 1.0);
}
.match-highlighted {
    color: rgba(255, 0, 0, 1.0);
}
.skipped {
    display: none;
}

.linenum {
    user-select: none;
    -moz-user-select: none; /* for Firefox pre-69 */
    -webkit-user-select: none; /* for Safari, Opera, and Edge (pre-Blink) */
    color: rgba(255,255,255,0.6);
    text-align: right;
    vertical-align: top;
    width: 50px;
    text-overflow: ellipsis;
    position: absolute;
}

.linenum a {
    text-decoration: none;
    color: inherit;
}

.linenum a:hover {
    color: rgba(255,255,255,0.4);
}

.linetext {
    width: calc(100% - 55px);
    margin-left: 55px;
    min-height: 20px;
}

.highlighted-line {
    background: #555;
}

.highlighted-line.focus-line {
  background: #555568;
}

.focus-line {
  background: #42425A;
}

/* ansi colors from https://en.wikipedia.org/wiki/ANSI_escape_code#Colors */
.ansi-0 { color: #000000; }  /* Black */
.ansi-1 { color: #c23621; }  /* Red */
.ansi-2 { color: #25bc26; }  /* Green */
.ansi-3 { color: #adad27; }  /* Brown */
.ansi-4 { color: #492ee1; }  /* Blue */
.ansi-5 { color: #d338d3; }  /* Magenta */
.ansi-6 { color: #33bbc8; }  /* Cyan */
.ansi-7 { color: #cbcccd; }  /* Gray */
/* Bright */
.ansi-8 { color: #818383; }  /* Darkgray */
.ansi-9 { color: #fc391f; }  /* Red */
.ansi-10 { color: #31e722; }  /* Green */
.ansi-11 { color: #eaec23; }  /* Yellow */
.ansi-12 { color: #5833ff; }  /* Blue */
.ansi-13 { color: #f935f8; }  /* Magenta */
.ansi-14 { color: #14f0f0; }  /* Cyan */
.ansi-15 { color: #e9ebeb; }  /* White */