body {
  font-family: "Roboto", "Helvetica", sans-serif;
  background-color: #111827;
}
.topbar {
  background: #1F2937;
  color: #F87171;
  line-height: normal;
  display: flex;
}

.topbar-content {
  padding: 50px 155px;
}
.title {
  font-size: 30px;
  text-transform: capitalize;
}
.description {
  background: #1F2937;
  color: #D1D5DB;
  padding: 50px 155px;
  border-bottom: solid 2px #374151;
  line-height: 2rem;
  padding-top: 0;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  background: #1F2937;
  color: #D1D5DB;
}
.original {
  top: 72px;
  padding-top: 10px;
  z-index: 1;
}
.original_text {
  width: 75vw;
  padding-bottom: 13px;
  font-family: 'Courier New', monospace;
}
.item {
  margin-bottom: 40px;
  padding: 5px 0;
}
.line {
  width: 100%;
  display: flex;
  line-height: 2rem;
  align-items: baseline;
  border-bottom: 2px solid #1F2937;

}
.source {
  flex: 0 0 150px;
  text-align: right;
  padding-right: 15px;
  padding-bottom: 8px;
  color: #B91C1C;
  font-size: x-small;
  text-transform: uppercase;
  line-height: initial;
}
.ours {
  color: #F87171;
}

.post_pad {
  opacity: 0;
}

/* Controls */
.controls{
  top: 0px;
  z-index: 2;
  background-color: #1F2937;
  height: 50px;
  text-align: center;
  padding: 10px;
  border-bottom: 2px solid #374151;
}
.tabs {
  color: #6B7280;
  cursor: pointer;
  display: flex;
  height: calc(2px + 100%);
}
select{
  background-color: #E5E7EB;
}
.results {
  min-height: 100vh;
}
.begin{
  -webkit-mask-image: -webkit-linear-gradient(right, #000,rgba(0,0,0,0));
}
.end{
  -webkit-mask-image: -webkit-linear-gradient(left, #000,rgba(0,0,0,0));
}
.output {
  color: #D1D5DB;
  width: 75vw;
  font-family: 'Courier New', monospace;
  cursor:pointer;
}
.output:hover{
  font-weight: bold;
}
.loader {
  padding-left: 50%;
  padding-top: 10%;
}