@font-face {
    font-family: titleFont;
    src: url(fonts/Slackey-Regular.ttf);

     src: url(fonts/Slackey-Regular.ttf);
      src: url(fonts/Slackey-Regular.ttf);
       src: url(fonts/LoveYaLikeASister.ttf);
}

@font-face {
    font-family: basic;
    src: url(fonts/RobotoCondensed-Light.ttf);

}

html {
	overflow: hidden;
	font-family: basic;
	background-image: url("img/paper.png")
}

.training-data {
	display: flex;
	flex-direction: row;
}

.training-thumb {
	margin: 0 auto;
	width: 200px;
}

.training-thumb img {

	width: 100%;
}
#video {
	width: 100px;
	height: 70px;
}

.data-line {
	font-size: 9px;
	display: flex;
	
}
.data-line-item {
	white-space: nowrap;
	overflow: hidden;
	margin: 2px;
	background-color: hsla(0, 0%, 100%, .9);
	width: 70px;
	
}
.data-line-confidence {
	
	width: 50px;
}
.panel {
	min-width: 100px;
	min-height: 100px;
	pointer-events: all;
	position: absolute;
	border-radius: 10px;
	opacity: .6;
	background-color: hsla(0, 0%, 90%, .9);
	padding: 5px;
	box-shadow: 1px 2px 5px  rgba(0, 0, 0, .6)
}
#data {
	position: absolute;
	right: 0px;
	bottom: 0px;
}
#camdata {
	position: absolute;
	right: 0px;
	top: 0px;
	
}

#camdata-annotations {
		position: absolute;
	left: 0px;
	top: 0px;
	border: 1px solid magenta;
}

#camdata-image {
	 -webkit-mask-image: url("img/mask2.png");
	   -webkit-mask-size: 200px 160px;
}

.camdata-thumb {
	width: 100px;
	height: 80px;
}

#controls {bottom: 10px;
	left: 10px;

	
	
}

#app {
	display: flex;
	flex-direction: column;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

.palette-thumb {
	width: 50px;
	height: 50px;
	margin: 5px;
	border-radius: 10px;
	display: inline-block;
	background-color: hsla(230, 30%, 30%, .1);
}
#main {
	display: flex;
		pointer-events: none;
		flex: 1;
		justify-content: space-between;

}
#title {
		width: 100%;
	font-size: 36px;
	text-align: center;
	font-family: titleFont;
}


h3 {
	margin: 3px 5px;
	font-family: titleFont;
}
.panel-title {
	width: 100%;
	font-size: 26px;
	text-align: center;
	font-family: titleFont;
}

#status {
	width: 180px;
	border: 1px solid magenta;
}
#view {
	flex: 1;
	position: relative;

	text-align: center;
}

#view-three {
	pointer-events: all;
}

#view-three {
	
}

#view-p5 {
	
	pointer-events: none;
}



.overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

#video-container {
	position: absolute;
	width: 400px;
	height: 300px;
}

.tuning_slider {
	
	background-color: hsla(0, 0%, 99%, .9);
	
	max-height: 8px;
	
}
.slider-holder {
	padding: 3px;
	margin: 5px;
border-radius: 5px;
	border: solid 1px  rgba(0, 0, 0, .3);
}


.tab {
	font-family: titleFont;
}

#edit-tab {

	position: absolute;
	left: 0px;

}
#train-tab {

	position: absolute;
	right: 0px;

}

#music {
	background-color: hsla(0, 0%, 99%, .9);
	width: 400px;
	display: flex;
	flex-direction: column;
}

#music-spectrogram {
	background-color: hsla(0, 0%, 29%, .9);
	display: flex;
	flex: 1;
}
#music-bars {
	background-color: hsla(0, 0%, 29%, .9);
	display: flex;
	flex: 1;
}
#music-datarow {
	height: 20px;
	display: flex;
	flex-direction: horizontal;
}

.music-data {
	position: relative;
	display: flex;
	flex: 1;
	margin: 2px;
	background-color: hsla(200, 100%, 29%, .9);
}

.music-barbg {
	position: relative;
	flex: 1;
}

.music-barfill {
	width: 100%;
	position: absolute;
	bottom: 0px;
}

.music-datafill {
	height: 100%;
	width: 50%;
	background-color: hsla(200, 100%, 59%, .9);
	bottom: 0px;
}