@import 'npm:uplot/dist/uPlot.min.css';

@import url(./icons.css);

.uplot {
  font-family: inherit;
}
.u-select {
  background: var(--graph-selection-color, #00000012);
}

/* Dark mode colors */
.dark-mode {
  --dark-2: hsl(0, 0%, 3%);
  --dark-2: hsl(0, 0%, 6%);
  --dark-3: hsl(0, 0%, 9%);
  --dark-4: hsl(0, 0%, 12%);
  --dark-5: hsl(0, 0%, 15%);
  --dark-6: hsl(0, 0%, 18%);
  --dark-7: hsl(0, 0%, 21%);
  --dark-8: hsl(0, 0%, 24%);

  --light-1: hsl(0, 0%, 80%);
  --light-2: hsl(0, 0%, 83%);
  --light-3: hsl(0, 0%, 86%);

  --text-color: hsl(0, 0%, 69%);
  --link-color: rgb(63, 156, 228);
  --author-color: rgb(108, 208, 68);
  --backdrop-color: hsla(0, 0%, 0%, .6);
  --border-color: hsla(0, 0%, 0%, .25);
  --divider-color: hsl(0, 0%, 40%);
  --red-color: hsl(0, 70%, 69%);

  --dark-scheme: dark;

  --stroke-color: hsl(188, 65%, 65%);
  --graph-selection-color: hsla(0, 0%, 100%, .1);
  --grid-color: hsl(200, 10%, 25%);
  --graph-selection-color: hsla(0, 0%, 100%, .1);
}

* {
  margin: 0;
}
#reloadAlert {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 16px 8px;
  pointer-events: none;
  z-index: 101;
}
#innerMessage {
  max-width: 800px;
  pointer-events: auto;
  margin: 0 auto;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.5);
}
#closeAlert {
  font-size: 32px;
  opacity: 0.75;
  line-height: 0.75;
}
#closeAlert:focus {
  outline: none;
}
a:link,
a:visited {
  color: var(--link-color, #00e);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:focus {
  color: var(--red-color, red);
}
b {
  font-weight: 600;
}
p {
  margin-bottom: 0;
}
body {
  background-color: var(--dark-3, #bdf);
  font-family: "Open Sans", Arial, sans-serif;
  line-height: normal;
  font-size: 16px;
  color: var(--text-color, #000);
  min-height: 100vh;
  position: relative;
}
main {
  margin: 0 24px;
  padding-bottom: 52px;
}
footer {
  background-color: var(--dark-5, #def);
  padding: 10px 5px;
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid var(--border-color, #999);
  box-sizing: border-box;
}

.form-control {
  background-color: var(--dark-5, #fff);
  border-color: var(--divider-color, #ced4da);
  color: var(--text-color, #495057);
}
.form-control:focus {
  background-color: var(--dark-4, #fff);
  color: var(--text-color, #495057);
}
.card {
  background-color: var(--dark-5, #fff);
}
.card-header {
  border-bottom: 1px solid var(--border-color, #00000020);
}
.half-dark {
  border-top: 1px solid var(--divider-color, rgba(0,0,0,0.5));
}
.table td {
  border-top: 1px solid var(--divider-color, #dee2e6);
}
.table {
  color: inherit;
}
input {
  color-scheme: var(--dark-scheme, light); /* For color of calendar icon*/
}
canvas {
  margin-top: 5px;
  background-color: var(--dark-5,);
}
.list-group-item {
  background-color: var(--dark-5,);
}
h1 {
  padding: 0.1em 0;
  font-size: 2em;
  font-weight: 600;
  letter-spacing: -2px;
}
button.nostyle {
  font: inherit;
  text-transform: inherit;
  padding: 0;
  width: 100%;
  text-align: left;
}
#enterVideo {
  transform: translateY(-50%);
  top: 50%;
  position: relative;
}
button#viewGraph {
  padding-left: 0.75rem!important;
}
button#viewGraph:hover {
  background-color: var(--dark-8, #e4e4e4);
}
.btn:focus {
  text-decoration: unset;
  box-shadow: none;
}
span#graphDesc {
  font-size: 14px;
  float: right;
}
#tooltip {
  pointer-events: none;
  position: absolute;
  padding: 4px 8px;
  background-color: var(--dark-2, #fff);
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #0005;
  white-space: pre;
  z-index: 105;
  color: var(--text-color,);
  /* transition: all 100ms ease; */
}
option:disabled {
  color: #999;
}
.gray {
  color: #555;
}
.light-gray {
  color: #999;
}
.red {
  color: var(--red-color, #b00);
}
div#info {
  display: none;
  line-height: 1.75em;
}
.comment {
  border: none;
}
.comment:first-child {
  border-top: 3px solid rgba(0, 0, 0, 0.25);
  border-radius: 0;
}
.comment + .comment {
  border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.25));
}
.dropdown:hover .dropdown-menu {
  display: block;
}
.highlight {
  background-color: #ff9;
}
.anchor-right {
  left: unset;
  right: 0;
}
.cursor-default {
  cursor: default;
}
.bg-invalid, .bg-invalid:focus {
  background-color: rgba(255,0,0,.10);
}
#commentsCol,
#videoColumn,
#statsColumn,
#statsContainer,
#loadStatus,
#linkedColumn, 
#noteColumn,
#filter {
  display: none;
}
tr:first-child td,
tr:first-child th {
  border-top: none;
}
.comments-list {
  line-height: 1.5;
}
.vidTitle {
  font-size: 1.25em;
}
.author {
  font-weight: 600;
}
span#options {
  position: relative;
  float: right;
  margin: 0 0 5px 5px;
}
h6.sub-title {
  font-weight: 600;
  margin: 0;
}
button.sendSort {
  padding: 0.25rem 0.5rem;
}
h5.head {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  padding: 0.75rem;
}
h5.head,
.form-control::placeholder {
    color: var(--text-color, #666);
}
.btn-link, .btn-link:hover {
  color: var(--link-color, #00e);
}
.btn-link:hover {
  text-decoration: underline;
}
div#spinnerContainer {
  display: none;
  height: 0;
}
div#spinner {
  margin-top: 100px;
  z-index: 10;
}
.reloading {
  opacity: 0.25;
  transition: opacity 0.1s linear;
  pointer-events: none;
}
#loadEta {
  float: right;
}
#loadCount {
  font-size: 14px;
  color: var(--text-color,);
}
div#progress {
  height: 24px;
}
div.pbar {
  background-color: rgba(0, 0, 0, 0.1);
}
.snap {
  transition: width 0.25s;
}
div#chooseLoad {
  display: none;
}
div#sortLoaded {
  display: none;
  font-size: 18px;
}
div.linked {
  background-color: #def;
}
a.channelPfpLink {
  margin-right: 5px;
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  height: 48px;
  width: 48px;
  background-color: #4aa3ff;
}
.commentContent,
.commentContentFull,
.replyContent,
.replyContentFull {
  display: inline-block;
  white-space: normal;
  word-wrap: break-word;
  width: calc(100% - 53px);
}
.commentContentFull {
  width: 100%;
}
.replyContentFull {
  width: calc(100% - 32px);
  margin-left: 32px;
}
span.num {
  float: right;
}
.commentFooter {
  font-weight: 600;
}
img.pfp {
  height: 48px;
  width: 48px;
}
img.thumbnail {
  width: 100%;
  margin-bottom: 5px;
}
#submitAll {
  width: 100%;
}
#showMoreDiv {
  display: none;
}
#showMoreBtn {
  font-size: 20px;
  width: 100%;
}
a.authorName,
a.authorNameOp {
  font-weight: 600;
  letter-spacing: -0.5px;
}
a.authorNameOp {
  color: var(--author-color, #fff);
}
span.authorNameCreator {
  display: inline-block;
  background-color: var(--dark-8, #03f);
  padding: 0 8px;
  vertical-align: middle;
  border-radius: 12px;
}
.noColor, .noColor:focus, a.noColor {
  color: inherit;
}
.bold-column > tbody > tr > td:first-child {
  font-weight: 600;
}
ul.terms-list {
  padding-left: 0px;
}
li.terms-item {
  margin-left: 20px;
}
div#terms {
  display: none;
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--backdrop-color, rgba(0, 0, 0, 0.4));
  animation-name: fadein;
  animation-duration: 0.25s;
}
.terms-content {
  position: relative;
  word-break: break-word;
  max-width: 800px;
  background-color: var(--dark-5, #e0f0ff);
  margin: 15vh auto;
  width: 90%;
  box-shadow: 8px 8px 12px 0 rgba(0, 0, 0, 0.2);
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.terms-header {
  padding: 8px 16px;
  font-weight: 600;
  font-size: 20px;
  background-color: var(--dark-4, #bdf);
}
.terms-body {
  margin-top: 20px;
  padding: 0 16px;
}
.terms-footer {
  font-size: 18px;
  overflow: auto;
  padding: 0 8px 8px 0;
}
#closeTerms {
  float: right;
  padding: 8px 16px;
  font-weight: 600;
}
#closeTerms:focus,
#closeTerms:hover {
  background-color: var(--dark-8, #bdf);
  text-decoration: none;
  cursor: pointer;
}