* {
  box-sizing: border-box;
}

ul{
	padding-left:10px;
}

#visu {
	width: 100%;
	height: 45vw;
	max-height: 80vh;
	display: flex;
	vertical-align: top;
}
@media(max-width: 1100px) {
	#visu {
		/*width: 100%;*/
		/*height: 55%;*/
		/*min-width: 300px;*/
		display: initial;
		height:100%;
	}
}

#svg {
	min-width: 650px;
	width: 70%;
	height: 100%;
	max-height: 45vw;
	/*min-height: 50%;*/
	display: inline-flex;
}

@media(max-width: 1100px) {
	#svg {
		width: 100%;
		height: 100%;
		min-width: 300px;
		display: initial;
		/*max-height: 60vw;*/
	}
}

#keyboard {
	height: 100%;
	width: 100%;
	font-family: "arial";
	/*font-family: 'Arial Unicode MS'*/
	/*font-family: Dejavu Sans; */
	/*font-style: normal; */
	/*font-variant: normal;*/

	/* from https://css-tricks.com/scale-svg/ */
	/*width: 100%; */
	/*padding-bottom: 60%; */
	/*height: 1px; */
	/*overflow: visible;*/
}

.keyVolume {
	fill: #555;
}

.button_hover .keyVolume {
	fill: #5AB;
}

.mod {
	fill: #DDD;
	background-color: #DDD;
}
.mod_highlight {
	fill: #5AB;
}

.key {
	fill: #FFF;
}
.key:hover {
	fill: #AEF;
}
.key_hover {
	fill: #AEF;
}
.key_fixed {
	pointer-events: none;
}

.textHL {
	fill: #5AB;
	/*display: none;*/
	opacity: 0;
}
.textHL_hover {
	fill: #5AB;
	/*display: block;*/
	opacity: 1;
}

.hoverRect{
	opacity: 0;
}

.selected {
	fill: none;
	stroke: blue;
	stroke-width: 4px;
	pointer-events: none;
}


.character, .modifier, .diacritic {
	dominant-baseline: middle;
	baseline-shift: -.1em;
	text-anchor: middle;
	/*cursor: none;*/
	pointer-events: none;
	font-size: 2em;
	/*cursor: hand;*/
}

.diacritic {
	/*letter-spacing: -.75em;*/
	/*kerning: 0;*/
	/*-webkit-transform:translate(.4em,0);*/
  	/*transform:translate(.4em,0);*/
  	/*text-anchor: end;*/
  	/*font-size: 2.1em;*/
}

.fixed_char {
	fill: #555;
	color: #555;
}
.char {
	fill: #000;
	color: #000;
}
.dead_char {
	fill: #E00;
	color: #E00;
}
.mode_char {
	fill: #00E;
	color: #00E;
}
.hiddenCharacter {
	display: none;
}

.charGroup_hover .character {
	font-weight: 900;
	/*font-family: "arial black";*/
	/*font-size: 2em;*/
}

.kb_title {
	font-size: 2em;
	dominant-baseline: central;
	font-weight: bold;
}


#legend_div {
	/*max-width: 190px;
	width: 20%;*/
	width: 160px;
	min-width: 160px;
	height: 50px;
	font-family: "arial";
	/*margin-right: 20px;*/
	/*display: table;
	vertical-align: middle;*/
}

#legend_subdiv {
	border: 1px dotted black;
	/*vertical-align: middle;
	display: table-cell;*/
	width: 100%;
}
#legend_subdiv input{
	margin-left: 10px;
}

#legend_modifiers_div {
	margin-top: 20px;
	/*width: 100%;*/
	height: 150px;
	float: left;
	/*display: inline-block;*/
}

#legend_types_table {
	text-align: center;
	width: 100%;
}
#legend_types_table td {
	margin-left: 0px;
	margin-top: 8px;
}

.legend_type {
	text-decoration: underline;
	cursor: help;
	display: table-cell;
	text-align: center;
	clear: right;
}

#legend_types_div p {
	text-align: center;
	/*width: 90%;*/
	/*margin-left: 5%;*/
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
}

#see_legend, #see_printed {
	width: 100%;
	/*float: left;*/
	display: inline-block;
}

@media(max-width: 1100px) {
	#legend_div {
		/*height: 140px;*/
		width: 50%;
		min-width: 380px;
		height: 30px;
		max-width: none;
		/*overflow: hidden;*/
	}

	#legend_subdiv {
		/*height: 129px;*/
	}

	#legend_modifiers_div {
		width: 160px;
		height: 100%;
		margin-top: 0;
		float: left;
		/*display: inline-block;*/
	}

	#legend_types_div p {
		/*width: 500px;*/
		/*margin-left: 0;*/
	}

	#legend_types_div {
		/*display: inline-block;*/
	}

	#see_legend {
		text-align: left;
		width: 48%;
	}
	#see_printed {
		/*float: left;*/
		width: 48%;
	}

	#legend_types_table {
		width: initial;
	}
	#legend_types_table td {
		margin-left: 32px;
		margin-top: 8px;
	}
}

#legend_svg {
	fill: none;
}

#legend_svg text {
	fill: black;
}



/*********************/

#explanations {
	display: inline-block;
	max-width: 550px;
	width: 30%;
	height: 100%;
	/*padding-bottom: 1%;*/
	padding-left: 1%;
	padding-right: 1%;
	text-align: bottom;
	margin-bottom: 0;
	overflow-y: auto;
	/*font-family: 'Arial Unicode MS';*/
	font-size: 14px;
}
#exp_top, #exp_freq, #exp_scores, #exp_other {
	border: 1px solid black;
	margin: 5px;
	padding: 5px;
	width: 100%;
}
#exp_top {
	/*width: 100%; */
	table-layout: fixed;
	min-height: 100px;
	margin-top: 0;
}
#exp_freq {
	display: table;
	vertical-align: middle;
	width: 100%;
	/*height: 140px;*/
	/*overflow: auto;*/
	/*overflow: hidden;*/
}

@media(max-width: 1100px) {
	#explanations {
		position: relative;
		width: 100%;
		max-width: none;
	}

	#exp_top2_container {
		/*overflow: hidden;*/
		display: flex;
	}

	#exp_top_container {
		/*width: 49%;
		float: left;
		height: 100%;*/
		margin: 5px;
		flex: 1;
		display: initial;
	}

	#exp_top {
		height: 100%;
	}

	#exp_freq {
		/*width: 49%;	
		height: 100%;*/
		flex: 1;
		display: initial;
	}

	#exp_freq_graph_container {
		display: table;
		width: 100%;
		height: 100%;
	}

	#exp_scores, #exp_other {
		width: 99%;
	}
}

#contents_after {}



#exp_char {
	width: 25%; 
	text-align: center; 
	vertical-align: middle; /* marche pô */
	font-size: xx-large;
	min-height: 50px;
}
#exp_name {
	font-weight: bold;
	font-size: large;
	/*width: 75%;*/
}
#exp_about {
	padding-top: 10px;
	/*width: 75%;*/
}

#exp_freq_about {
	width: 100%;
	vertical-align: middle;
	/*display: table-cell;*/
	/*overflow: hidden;*/
}
/*#exp_freq_graph {*/
	/*height: 100px;*/
	/*padding-left: 5px;*/
	/*padding-bottom: 5px;*/
	/*float: right;*/
	/*overflow: none;*/
}
#freq_graph {
	/*height: 70px;*/
	width: 100%;
	height: 100%;
	font-family: "arial";
	min-height: 100px;
	/*float: right;*/

	display: table-cell;
	vertical-align: middle;

	/*width: 150px;*/
	/*padding-left: 5px;
	padding-bottom: 10px;*/
	/*float: right;*/
}
#freq_graph text {
	font-size: 150%;
}
#freq_graph_axes {
	fill: none;
	stroke: black;
}

/*@media(max-width: 1100px) {
	#freq_graph {
		width: 100%;
		height: 100%;
	}
}*/

.freq_graph_bar {
	fill: #50A0B0;
}

.freq_graph_xlabel, .freq_graph_ylabel {
	dominant-baseline: central;
}
.freq_graph_xlabel, .freq_graph_value {
	text-anchor: middle;
}
.freq_graph_ylabel {
	text-anchor: end;
}
.freq_graph_xlabel tspan {
	text-decoration: underline;
	cursor: help;
}
.freq_graph_value {
	font-size: 120% !important;
}


#exp_scores {}
#exp_scores ul {
	padding-left: 0;
}
#exp_scores ul li {
	list-style: none;
}
#exp_scores ul li h4, #exp_freq h4 {
	margin-top: 10px;
	margin-bottom: 0px;
	font-weight: bold;
	font-size: 16px;
}
#exp_scores ul li p {
	margin-top: 5px;
	margin-bottom: 0px;
}



#exp_other ul li {
	list-style: none;
}