/* Balises générales */
html, body {
	width: 				100%;
	height: 			100%;
	color:				black;
	background-color:	#FBFBFB;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}
body {
	overflow:			hidden;
}
html, body, input, select {
	font-family: 		'ibmplexsans';
	font-size:			1vw;
}
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;
}
.center {
	width: 				100%;
	text-align:			center;
}
.left {
	width: 				100%;
	text-align:			left;
}
.right {
	width: 				100%;
	text-align:			right;
}
.invisible {
	display:			none!important;
}
.bold {
	font-weight:		bold;
}
a, .link {
	cursor:				pointer;
	color:				#AAAAAA;
	border-bottom: 		1px solid transparent;
}
a:hover, .link:hover {
	color:				black;
	cursor:				pointer;
	border-bottom: 		1px solid #00e398 !important;
}
.unselectable {
	user-select: 		 none;
	-webkit-user-select: none;
	-moz-user-select:  	 none;
}
.selectable {
	user-select: 		 text !important;
	-webkit-user-select: text !important;
	-moz-user-select:  	 text !important;
}
.absolute {
	position: 			absolute !important;
	top:				0;
	left:				0;
}



/* Intro */
#intro, #closeWarning {
	position: 			absolute;
	top:				0;
	left:				0;
	width:				100vw;
	height:				100vh;
	background-color:	rgba(0, 0, 0, 0.8);
	text-align:			center;
}
#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);
}
#closeWarning {
	display:			none;
	cursor:				pointer;
}
#closeWarning h1 {
	color:				white;
	font-size:			2vw;
	padding-top:		2vw;
	padding-bottom:		2vw;
	line-height:		100vh;
}


/* Boutons */
.button {
	cursor:				pointer;
}


/* Formulaires */
input[type=text], input[type=number], input[type=search] {
	-webkit-appearance: textfield;
	border:				1px solid #DDDDDD;
	text-align:			center;
	border-radius:		0.5vw;
	padding:			0vw 0vw 0vw 0vw;
}
#motForm input[type=submit], input[type=file] {
	width:				0.01vw;
	height:				0.01vw;
	opacity:			0.01;
	position:			absolute;
	top: 				0;
}
#listeImport label {
	font-size:			0.7vw;
}
.languesChoix {
	padding:			0.5vw 0vw 0vw 0vw;
}
.langueChoix {
	display:			inline-block;
	padding:			0.7vw;
	opacity:			0.5;
	cursor:				pointer;
}
.langueChoix.selected {
	opacity:			1;
	background-color:	#f2f2f2;
}
.langueChoix .langueIcon {
	font-size:			1.5vw;
	padding-bottom:		0.5vw;
}
.langueChoix.selected  .langueIcon {
	font-size:			2vw;
}
.langueChoix .langueText {
	font-size:			0.7vw;
	padding-top:		0.3vw;
}

#mouvementsChoix, #exportsChoix, #recherchesChoix {
	text-align:			center;
	font-size:			0.7vw;
}
#exportsChoix {
	display:			inline-block;
	width:				50vw;
}
#exportClose {
	display:			inline-block;
	float:				right;
	font-size:			2vw;
	padding:			0.7vw;
	cursor:				pointer;
}
#exportClose:hover {
	color:				#00e398;
}
.mouvementChoix, .mouvementChoixTitle, .exportChoix, .exportChoixTitle, .rechercheChoix, .rechercheChoixTitle {
	display:			inline-block;
	padding:			0.7vw;
}
.mouvementChoix, .exportChoix, .rechercheChoix {
	opacity:			0.3;
	cursor:				pointer;
}
.mouvementChoix.selected, .exportChoix.selected, .rechercheChoix.selected {
	opacity:			1;
	background-color:	#f2f2f2;
}

::-webkit-input-placeholder {
	color:				lightgray;
}
.totalResultats {
	font-weight:		bold;
	color:				black !important;
}
.translate, .definition {
	font-size:			0.7vw;
	line-height:		1vw;
}
*.translate[langueCode=fr] {
	display:			none;
}
.mot {
	display:			inline-block;
	font-weight:		bold;
}
#rechercheNuage {
	text-align:			center;
	overflow-y:			scroll;
	-webkit-overflow-scrolling: touch;
	height:				68vh;
	display:			none;
}
.rechercheNuage {
	padding:			0.7vw;
	display:			inline-block;
	cursor:				pointer;
	margin:				0.5vw;
	font-size:			1.5vw;
}
.rechercheNuage.even {
	background-color:	#f2f2f2;
}
.rechercheNuage.selected, .rechercheNuage:hover {
	background-color:	#BEFEEE;
}



/* Tableau */
table.dataTable tbody tr.group {
	font-style:			italic;
	color:				lightgray;
}
table.dataTable tbody tr.even {
	background-color: 	#f2f2f2;
}
table.dataTable tbody tr:hover {
	background-color: 	#BEFEEE;
	cursor:				pointer;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc {
	cursor:				ns-resize !important;
}
table.dataTable tbody td:nth-child(1) {
	color:				lightgray;
}
table.dataTable thead th, table.dataTable thead td, .dataTables_wrapper.no-footer .dataTables_scrollBody {
	border-bottom-color: lightgray!important;
}
table .translate, table .definition {
	display:			inline-block;
	margin-left:		0.7vw;
}
#rechercheTable_filter {
	padding:			0.5vw 0.5vw 0vw 0vw;
}
#rechercheTable_filter span {
	font-size:			0.7vw;
	color:				#AAAAAA;
}
div.dt-buttons {
	margin: 			1vw 0.5vw 0vw 0vw;
	float:				left;
	font-size:			0.7vw;
}
a.dt-button {
	border-bottom: 		1px solid lightgray;
	margin: 			0vw 0.25vw 0vw 0.25vw;
}
.tableMajuscule, .tableMinuscule {
	border:				1px solid black;
	display:			inline-block;
	font-size:			0.7vw;
	padding:			0.2vw;
	vertical-align:		0.1vw;
}
.tableCommunBas, .tableCommunHaut {
	border:				1px solid black;
	display:			inline-block;
	font-size:			0.7vw;
	padding:			0.2vw;
	vertical-align:		0.1vw;
}
.tableProgressbar {
	width:				100%;
	font-size:			0.7vw;
}
.tableProgressbar .bar {
	display:			inline-block;
	background-color:	#00e398;
}
.tableProgressbar .text {
	color:				#AAAAAA;
	padding-left:		0.3vw;
	display:			inline-block;
}
.tableOverlay {
	position:			relative;
}
.tableOverlay .overlayed {
	position:			absolute;
	top:				0;
	left:				0;
}
.tableOverlay .overlayed span {
	background-color:	rgba(255, 255, 255, 0.8);
	border:				1px solid lightgray;
}


/* Containers */
.columnLeft, .columnRight {
	display:			inline-block;
	vertical-align:		top;
	height:				100vh;
}
.columnLeft {
	width:				40vw;
}
.columnRight {
	width:				60vw;
}
#canvasContainer {
	position:			 relative;
	width:				 100%;
	height:				 100%;
	text-align:			 center;
}
#canvasContainerScrollable {
	width:				 100%;
	height:				 100%;
	overflow-y:			 scroll;
	-webkit-overflow-scrolling: touch;
	user-select: 		 none;
	-webkit-user-select: none;
	-moz-user-select:  	 none;
}
#canvasContainerUnique {
	width:				 100vw;
	height:				 95vh;
	user-select: 		 none;
	-webkit-user-select: none;
	-moz-user-select:  	 none;
	overflow-y:			 scroll;
	-webkit-overflow-scrolling: touch;
}
canvas {
	display: 			 inline;
}
#export {
	display:			none;
}

/* Spécifique */
#logo {
	width:				10vw;
	vertical-align:		top;
	margin-top:			1.2vw;
	margin-left:		1vw;
}
#motForm {
	text-align:			center;
	height:				21vh;
	padding:			1vw 0vw 0vw 0vw;
}
#mot {
	width:				80%;
	font-size:			4vw;
	padding:			0.2vw 0vw 0.2vw 0vw;
}
#mouvementHelperRelative {
	position:			relative;
}
#mouvementHelper {
	position:			absolute;
	width:				10vw;
	opacity:			0.5;
	display:			none;
	pointer-events:		none;
}
.wordsSelect {
	position:			absolute;
	text-align:			right;
	width:				38vw;
	left:				0vw;
	top:				0;
	font-size:			0.7vw;
}
.wordSelect {
	display:			inline-block;
	margin-left:		1vw;
}
.wordsQuality {
	color:				#AAAAAA;
	width:				80%;
	margin-left:		auto;
}
.wordsQuality .tableProgressbar .bar {
	margin:				0.3vw 0vw 0.3vw 0;
	height:				2px;
	pointer-events:		none;
}
.wordQuality {
}


#acces, #top {
	display:			none;
}
#menu {
	font-family: 		'ibmplexsans';
	background-color:	#323232;
	width:				100%;
	min-height:			100%;
	padding:			2vw;
}
#menu h1 {
	font-size:			11vh;
	color:				#00e398;
}
#menu h2 {
	font-size:			5vh;
	color:				#FADC00;
	margin:				3vh 0vh 3vh 0vh;
}
#menu .menuApps {
	font-size:			3vh;
	color:				#F9DA31;
	display:			none;
	margin-top:			5vh;
}
#menu .menuApp {
	border-radius:		15vw;
	position:			relative;
	width:				15vw;
	height:				15vw;
	margin-right:		1vw;
	cursor:				pointer;
	background:			url(img/papier_blanc.jpg) no-repeat center center;
	background-size:	cover;
	border:				0.3vw solid #666666;
	opacity:			0.5;
	display:			none;
}
#menu .menuApp:hover {
	opacity:			1;
}
#menu .menuAppTitle {
	position:			absolute;
	top: 				16vw;
	width:				45vw;
	opacity:			0;
}

#menu .menuAppCross {
	position:			absolute;
	top: 				0vh;
	width:				15vw;
	height:				15vw;
	font-size:			15vw;
	text-align:			center;
	color:				white;
	display:			none;
}
#menu .menuAppCross.localonly {
	display:			block;
}
#menu .menuApp:hover .menuAppTitle {
	/*opacity:			1;*/
}

#menu .menuApp.localonly {
}
#menu .menuApp.localonly:hover {
	opacity:			0.15;
}

#passwordForm {
	color:				white;
	font-size:			2vw;
	margin-top:			20vh;
	display:			none;
	text-align:			center;
}
#menu input[type=password] {
	font-size:			5vh;
	-webkit-appearance: textfield;
	border:				1px solid #DDDDDD;
	text-align:			center;
	border-radius:		0.5vw;
	padding:			0.2vw 0.2vw 0.2vw 0.2vw;
	width:				50%;
}
#menu input[type=submit] {
	padding:			5px 15px; 
	background:			#FFFFFF; 
	color:				black;
	border:				0 none;
	cursor:				pointer;
	border-radius: 		5vh;
	vertical-align:		0.75vh;
}
#menu input[type=submit]:hover {
	background:		 	#CCCCCC;
}

#acces input[type=password], #acces input[type=text] {
	font-size:			2vh;
	width:				25vw;
	border:				1px solid #DDDDDD;
	border-radius:		0.5vw;
	padding:			0.2vw 0.2vw 0.2vw 0.2vw;
}
#acces input[type=submit] {
	font-size:			2vh;
	vertical-align:		-0.25vh;
}
#acces li {
	margin-bottom:		1vh;
}
#acces table td, #top table td {
	color:				lightgray;
	padding: 5px;
	padding-left: 25px;
}
#logout {
	display:			none;
}

#menu label {
	color:				white;
	font-size: 			2vh;
	text-transform: 	uppercase;
	opacity:			0.5;
	cursor:				pointer;
}
#passwordForm label {
	cursor:				inherit;
}