/* Generic tags */
html, body {
	width: 				100%;
	height: 			100%;
	color:				black;
	--bkg: 				#2a2a2a;
	--bdr: 				#777777;
	--font: 			#d6d6d6;
	--svgInv:			1;
	--svgBrt:			0.65;
	--svgSep:			0;
	--svgHue:			0deg;
	--svgSat:			0;
	background-color:	var(--bkg);
}

body {
	overflow:			hidden;
}
html, body, input {
	font-family: 		'Avenir LT 45';
	font-size:			0.8vw;
}
.svgIcn{
	filter: invert(var(--svgInv)) brightness(var(--svgBrt)) sepia(var(--svgSep)) hue-rotate(var(--svgHue)) saturate(var(--svgSat));
}

input {
	text-align:			center;
	color:				var(--font);
}
exp, expp {
	position: 			relative;
	bottom: 			1px;
	font-size: 			.8em;
	line-height: 		.8em;
	vertical-align:		super;
	text-decoration:	none;
}
expp {
	font-size: 			.6em;
	line-height: 		.6em;
}
hr {
	background-color:	lightgray;
	border:				none;
	height:				1px;
	margin:				2vh 2vw 2vh 2vw;
	color:				var(--font);
}
.center {
	width: 				100%;
	text-align:			center;
}
.invisible {
	display:			none!important;
}


/* Intro & share */
#experience, #orientation {
	display: 			none;
}
#orientation {
	width:				100vw;
	height:				100vh;
	background-color:	yellow;
	text-align:			center;
}
#orientation img {
	width:				50vw;
	height:				50vw;
	background-color:	yellow;
	margin-top:			calc(50vh - 25vw);
}
#intro, #share {
	position: 			absolute;
	top:				0;
	left:				0;
	width:				100vw;
	height:				100vh;
	background-color:	rgba(0, 0, 0, 0.7);
	text-align:			center;
	user-select: 		 none;
	-webkit-user-select: none;
	-moz-user-select:  	 none;
	z-index: 4;
}
#share {
	display:			none;
}
#intro {
	display: flex;
	justify-content: center;
	align-items: space-around;
	flex-wrap: wrap;
}
#intro h1  {
	font-family: 		'Avenir LT 65';
	font-size:			15vw;
	color:				yellow;
	width: 				100vw;
	margin-top: 		25vh;
}
#headphones, #credits {
	margin-top: 		10vh;
	width: 				100vw;
	color:				white;
}
#credits a {
	color: 				yellow;
}
#intro h2  {
	font-size:			3vh;
	color:				white;
    animation: 			blinker 2s linear infinite;
	margin-bottom:		3vh;
}
#intro img  {
	height:				10vh;
	opacity:			0;
}
#intro h3  {
	font-size:			1.5vh;
	color:				white;
}
@keyframes blinker {  
  	50% { opacity: 0.5; }
}
#shareImg {
	margin-top:		4vh;
	border:			1.5vh solid white;
}
#shareUrl {
	margin-top:			4vh;
	font-size:			4vh;
	color:				white;
	user-select: 		 all;
	-webkit-user-select: all;
	-moz-user-select:  	 all;
}
#shareQrcode {
	position: 			absolute;
	top: 				75vh;
	width: 				20vh;
	height: 			20vh;
	left: 				80vw;
	border:				2px solid black;
}

/* Containers */
#toolbarContainer, #toolbarFloatingContainer, #toolbarFloatingSettings, #inspector, #oscilloscope, #synthesis {
	background-color: transparent;
	user-select: 		 none;
	-webkit-user-select: none;
	-moz-user-select:  	 none;
	/* overflow: hidden; */
}
#toolbarContainer, #toolbarFloatingContainer {
	width:				98vw;
	height:				auto;
	min-height: 		6vw;
	display: flex;
	justify-content: space-between;
	align-items: space-around;
	flex-wrap: nowrap;
	overflow: hidden;

}

#toolbarFloatingSettings {
	width:				98vw;
	height:				10.5vh;
	padding: 0;
	min-height: 		6vw;
	display: flex;
	justify-content: center;
	align-items: space-around;
	flex-wrap: nowrap;
}

#inspector, #synthesis, #oscilloscope {
	position: 			absolute;
	box-shadow: 		0px 0px 10px 0px #656565;
	width:				22vw;
	display:			none;
}
#inspector {
	height: auto;
	max-height:				46vh;
	top:				calc(100vh - 46vh - 2vh);
	left: 				1.5vw;
	background-color: var(--bkg);
	padding-bottom: 10px;
	color: var(--font);
}
#inspector.right {
	left:				calc(100vw - 22vw - 1.5vw);
}
#synthesis {
	height:				50vh;
	top:				12vh;
	left:				calc(50vw - 10vw);
	text-align:			center;
}
#synthesis textarea {
	width:				19vw;
	height:				36vh;
	font-size:			1.5vh;
	font-family: 		Monaco, Courier New;
}
#synthesis select {
	width:				19vw;
}
#oscilloscope {
	left:				0;
	height:				30vh;
	top:				11vh;
	left: 				calc(100vw - 22vw - 2vh);
}
#oscilloscope canvas {
	width:				20vw;
	height:				25vh;
	pointer-events:		none;
}
#canvasContainer {
	width:				98vw;
	height:				88.5vh;
	margin: 0vh 1vw 0;
	border-radius: 5px;
	box-sizing: border-box;
	border: solid 1.5px var(--bdr);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
#canvasContainer canvas{
	margin: 0;
	padding: 0;
}

/* Toolbars */
.toolTitle {
	font-size:			1.5vw;
	height:				5vh;
	text-align:			center;
	background-color: 	yellow;
	color: black;
}
.toolTitle .title {
	float:				left;
	width:				calc(100% - 5vh);
	line-height:		5vh;
}
.toolTitle .close {
	float:				right;
	font-size:			5vh;
	cursor:				pointer;
	margin-top:			-0.1vh;
	width:				5vh;
}
.toolBar {
	height:				auto;
	min-height: 		6vw;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 0.5vw;
	overflow: hidden;
}
/* .toolBar:first-of-type {
	border-left:		1px solid transparent;
} */
.toolButton img {
	width:				4vw;
	height:				4vw;
	max-width: 100px;
	max-height: 100px;
	/* padding: 			0.5vw 0.5svw; */
	z-index: 3;
	overflow: visible;
	border: none;
}
.toolicon div {
	width:				4.25vh;
	height:				4.25vh;
	margin: 			auto;
	border:				5px solid transparent;
	box-shadow: 		0 0 0 3px transparent;
	margin: 			auto;
	border-radius:		5vh;
	overflow: visible;
	display: flex;
	justify-content: center;

}
.toolButton.selected .toolicon div { 
	border-color:		var(--bkg);
	box-shadow: 		0 0 0 3px var(--font);
	border-radius:		5vh;
}
.toolButton.selected .toolicon img {
	border-color:		transparent;
	box-shadow: 		0 0 0 3px black;
	border-radius:		5vh;
}
.toolBar .toolButton .toolname {
	margin-top:			0.5vh;
}
.toolname{
	color:				var(--font)
}
.toolButton, .toolSlider, .toolCheck {
	display:			inline-block;
	margin:				0.6vh 0.6vh 0vh 0.6vh;
	width: 4.5vw;
	/* max-width: 200px; */
	height: 7vw;
	text-align:			center;
	cursor:				pointer;
	vertical-align:		top;
}
.palette {
	height: 			5vh;
	max-height: 		5vh;
	margin: 			0.2vh;
}
.toolCheck {
	text-align:			left;
	width:				90%;
	margin:				1.5vh 0.8vw 0vh 0.8vw;
	height:				3vh;
	line-height:		3vh;
}
.toolSlider input[type=range] {
	width:				90%;
	height:				4.4vh;
}
.toolSlider div {
	margin-top:			0.5vh;
}
.toolButton.disabled, .toolButton.inactive {
	opacity:			0.5;
}
#toolbarContainer .toolSlider, #toolbarContainer .toolButton,  #toolbarFloatingContainer .toolSlider, #toolbarFloatingContainer .toolButton, #toolbarFloatingSettings .toolButton {

}
#toolbarContainer .toolSlider, #toolbarFloatingContainer .toolSlider {
	width:				90%;
}
#inspector .toolSlider {
	width:				calc(100% - 0.6vh - 0.6vh);
	height:				unset;
	margin-top:			2vh;
}
#inspector .toolSlider input[type=range] {
	height:				2vh;
}
.play{
	width: 5vh;
	margin-right: 0;
	padding-right: 0;
}

.toolButton.mini {
	width: 1vw;
	display: flex;
	justify-content: flex-start;
}
.miniToolWrapper{
	height: 5vh;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.toolButton.mini img {
	width:		1.8vh;
	height:		1.8vh;
}
#toolbarFloatingContainer {
	display: none;
	position:	absolute;
	background:		var(--bkg);
	width:			unset;
	max-width:	 	80%;
	top:			9vh;
	min-height:			5vh;
	max-height: 		15vh;
	display:		none;
    border-radius: 	5px;
	display: flex;
	justify-content: center;
	align-items: space-around;
	z-index: 4;
	color: var(--font);
	overflow-x: scroll;
	flex-wrap: wrap;
}
#toolsDrawingColor{
	padding: 8px;
	/* max-width: 100%; */
	overflow-y: scroll;
	display: flex;
	flex-wrap: wrap;
	/* width: 90%; */
	/* height: 30vh; */
	overflow-y: scroll;
	box-sizing: border-box;
	border-radius: 5px;
	border: solid 1.5px var(--bdr);
	background-color: var(--bkg);
}
.mainSlider{
	width: 10vw;
}
@media only screen and (max-width: 800px){
	.mainSlider{
		width: 5vw;
	}
}

/* Various */
#log {
	display:			inline-block;
	font-size:			1.5vh;
	font-family: 		Monaco, Courier New;
	height:				100%;
}

#tuner {
	display:		inline-block;
	text-align:		center;
	width:			5.5vw;
}
#tuner .note, #tuner .freq {
	color:			var(--font);
	opacity: 		0.8;
}
#tuner.touch .note, #tuner.touch .freq {
	color:			var(--font);
}
#tuner .note {
	font-size:		1.7vw;
	line-height:	5vh;
	font-weight: 	bold;
}
#tuner .freq {
	line-height:	2.1vh;
}
#tuner .voices {
	line-height:	1.3vh;
	color: var(--font);
}



input[type=number] {
	border:				1px solid var(--bdr);
	color: black;
}


input[type=range] {
	-webkit-appearance: 	none;
	width: 					100%;
	background: 			transparent;
	color: var(--font);
}
input[type=range]:focus {
	outline: 				none;
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: 	none;
}
input[type=range]::-ms-track {
	width: 					100%;
	cursor: 				pointer;
	background: 			transparent; 
	border-color: 			transparent;
	color: 					transparent;
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: 	none;
	border: 				1px solid var(--bdr);
	margin-top: 			-0.7vh;
	height: 				1.7vh;
	width: 					1.7vh;
	border-radius: 			1.7vh;
	background:				var(--font);
	cursor: 				pointer;
}
input[type=range]::-moz-range-thumb {
	-webkit-appearance: 	none;
	border: 				1px solid var(--bdr);
	margin-top: 			-0.7vh;
	height: 				1.7vh;
	width: 					1.7vh;
	border-radius: 			1.7vh;
	background:				#ffffff;
	cursor: 				pointer;
}
input[type=range]::-ms-thumb {
	-webkit-appearance: 	none;
	border: 				1px solid var(--bdr);
	margin-top: 			-0.7vh;
	height: 				1.7vh;
	width: 					1.7vh;
	border-radius: 			1.7vh;
	background:				#ffffff;
	cursor: 				pointer;
}


input[type=range]::-webkit-slider-runnable-track {
	width: 					100%;
	height: 				0.28vh;
	cursor: 				pointer;
	background: 			var(--bdr);
	border-radius: 			0.25vh;
	border: 				0 solid transparent;
}
input[type=range]::-moz-range-track {
	width: 					100%;
	height: 				0.28vh;
	cursor: 				pointer;
	background: 			var(--bdr);
	border-radius: 			0.25vh;
	border: 				0 solid transparent;
}
input[type=range]::-ms-track {
	width: 					100%;
	height: 				0.28vh;
	cursor: 				pointer;
	background: 			black;
	border-radius: 			0.25vh;
	border: 				0 solid transparent;
}


.checkbox-ios {
    -webkit-transform: scale(0.6,0.6) translate(0.5vw,0.5vw);
}



#loading{
	position: 			absolute;
	top:				0;
	left:				0;
	width:				100vw;
	height:				100vh;
	background-color:	rgba(0, 0, 0, 0.7);
	text-align:			center;
	user-select: 		 none;
	-webkit-user-select: none;
	-moz-user-select:  	 none;
	z-index: 4;
}
#loading h1  {
	font-family: 		'Avenir LT 65';
	font-size:			15vw;
	line-height:		80vh;
	color:				yellow;
}
#loading div  {
	margin-top:			-15vh;
}
#loading h2  {
	font-size:			3vh;
	color:				white;
    animation: 			blinker 2s linear infinite;
	margin-bottom:		12vh;
}
#loading img  {
	height:				10vh;
	/* opacity:			0; */
}
#loading h3  {
	font-size:			1.5vh;
	color:				white;
}




#clearConf{
	position: 			absolute;
	top:				0;
	left:				0;
	width:				100vw;
	height:				30vh;
	background-color:	rgba(0, 0, 0, 0.7);
	text-align:			center;
	user-select: 		 none;
	-webkit-user-select: none;
	-moz-user-select:  	 none;
	z-index: 4;
	padding: 35vh 0; 
	display: hidden;
}
#clearConf h2  {
	width: 100vw;
	font-size:			3vh;
	color:				yellow;
	padding: 0;
	margin: 0;
}
#clearConf p {
	font-size: 1.5rem;
	color:				white;
	padding: 0;
	margin-bottom: 	2vh;
	
}
#clearConf h3  {
	width: 100vw;
	font-size:			1.8rem;
	color:				white;
	padding: 			0;
	margin:  			5vh 0;
	cursor: 			pointer;
}
.blink{
	animation: 			blinker 2s linear infinite;
}


#toolbarFloatingSettings{
	top: 0;
	position: fixed;
	margin: 20vh 20vw;
	height: 60vh;
	width: 60vw;
	z-index: 4;
	box-sizing: border-box;
	border-radius: 5px;
	border: solid 1.5px var(--bdr);
	background-color: var(--bkg);
	color: var(--font);
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.settingsTitle{
	width: 100%;
	height: 20%;
	display: flex;
	justify-content: flex-start;
}

.mid3-5ths{
	min-width: 60%;
	width: 60%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.mid3-5ths h2
{
	height: 3.5vh;
	font-size:			3vh;
	color:				yellow;
}
.fifthL{
	min-width: 20%;
	width: 20%;
	display: flex;
	justify-content: flex-start;
}
.fifthR{
	min-width: 20%;
	width: 20%;
	display: flex;
	justify-content: flex-end;
	flex-wrap: nowrap;
}
#settingsLayer{
	min-height: 7vw;
	margin: 0vw 0.2vw;
	width: 100%;
	display: flex; 
	justify-content: center;
	flex-wrap: wrap;
}

#toolbarFloatingSettings .toolButton, #toolbarFloatingSettings .toolButtonToggle{
	width: 7vw;
	height: 7vw;
	max-width: 60vw;
}

.flag{
	width: 5.7vw !important;
	height: 4vw !important;
	max-width: 925px !important;
	max-height: 700px !important;
	border-radius: 1.5vw;
	overflow: hidden;
	filter: none;
}
.flagButton{
	width: 5.7vw;
	height: 4vw;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 1.5vw;
	margin: 0.5vw;
}


#langConf{
	top: 0;
	position: fixed;
	margin: 20vh 20vw;
	height: 60vh;
	width: 60vw;
	z-index: 4;
	box-sizing: border-box;
	border-radius: 5px;
	border: solid 1.5px var(--bdr);
	background-color: var(--bkg);
	color: var(--font);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	display: hidden;
}
#langConf .options{
	height: 60%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#langConf h3{
	width: auto;
	height: 2em;
	font-size: 2em;
}

#langWarning{
	width: auto;
	height: 2em;
	font-size: 1.25em;
}