.para{
    counter-increment: para;
}
.para:before{
    content: attr(data-par);
    color: white;
    background-color: #404040;
    font-size: 1em;
    padding: 2px;
    padding-left: 6px;
    border-radius: 2px;
    margin-right: 10px;
}


@keyframes fade-in {
  from { 
    opacity: 0; 
  }
  to { 
    opacity: 1; 
  }
}

@keyframes fade-out {
  from { 
    opacity: 1; 
  }
  to { 
    opacity: 0;
  }
}

.slide{
	width: 100%;
}

.left{
  max-width: 45%;
  padding: 20px;
  float: left;
}

.right{
  position: fixed;
  margin-left: 50%;
  min-height: 100%;
  max-width: 50%;
  min-width: 50%;
  width: 48%;
  float: left;
}

.text{
  font-family: 'Cardo', serif;
  text-align: justify;
  font-size: 14px;
}

.vid{
  min-height: 35%;
  font-size: 12px;
}

.notes{
  font-family: 'Rubik', serif;
  max-height: 65%;
  font-size: 12px;
}

#notesdiv{
	padding: 10px;
}
#viddiv{
  background-color: black;
}

video{ 
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.controls{ 
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row:after{
  content: "";
  display: table;
  clear: both;
}
pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    bacground-color: #F5F5F5;
    border-radius: 4px;
}
.hl1{
  background: grey;
  font-weight: bold;
  color: white;
  border-radius: 2px;
  padding: 2px;
}

.black{ 
	background-color: black;
	color: white;
	border-radius: 2px;
	/*
	font-weight: bold;
	padding-left: 2px;
	padding-right: 2px;
	*/
}

.hasnotes{
	text-decoration: underline;
	text-decoration-color: grey;
}

.ql-editor{
	width: 100%;
}

video{
	max-width: 70%;
}
.yellow{ background-color: yellow; }
.green{ background-color: #00ff00; }
.underline{ text-decoration: underline; text-decoration-color: red;}
.border{border: thick solid red}

.lemma{
	font-weight: bold;
}
.parseinfo{
	margin-top: 5px;
}
.gloss2{
	font-size: 0.9em;
}
#controls{
	position: fixed;
    bottom: 0;
    width: 100%;
}
#stepOutput{
  	font-family: 'Rubik', serif;
  	letter-spacing: 2px;
  	margin-left: 4px;
  	height: 100%;
}
#notes1{
	min-height: 40%;
	background-color: #E0E0E0;
	border-radius: 2px;
	padding: 2px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 5px;
	margin-right: 20px;
	min-width: 90%;
}
#notes2{
	min-height: 40%;
	background-color: white;
	border-radius: 2px;
	padding: 2px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 5px;
	margin-right: 20px;
	min-width: 90%;
}
#parses{
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 5px;
	min-width: 90%;
	border: 1px dotted gray;
	margin-right: 20px;

}