@font-face {font-family:Akkurat;src: url('../fonts/Akkurat/Akkurat-Mono.otf');}

html{font-size: 50%; }
body{
	background-color: #efefef;
	font-family: Akkurat, Sans-serif;
	font-size: 1em;
}f

div{transition: all 0.1s;}

input{
	width: calc(100% - 10px);
	margin:5px;
	border:none;
	outline: none;
	font-size: inherit;
	font-style: inherit;
	overflow: hidden;
	background-color: transparent;
	border-bottom: 1px solid black;
}

table{width: 100%;}

.leftcut{
	width: 10px;
	height: 100%;
	float: left;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	margin-left: -20px;
	margin-right: 10px;
	z-index: 1000;
}

.rightcut{
	width: 10px;
	height: 100%;
	float: right;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	margin-right: -20px;
	margin-left: 10px;
	z-index: 1000;
}

#screenzone{
	width: calc(100% - 250px);
	height: 100%;
	position: absolute;
	left:250px;
	overflow: scroll;
}

.page::before{
position: absolute;
width: 100.5%;
text-align-last:justify;
content:"| |";
top: -20px;
}

.page::after{
position: absolute;
width: 100.5%;
text-align-last:justify;
content:"| |";
bottom: -20px;
}

.page{
	top: 50px;
	left:100px;
	position: relative;
	width: 420px;
	height: 594px;
	background-color: transparent;
	/*overflow: hidden;*/
}

#toolbox{
	display: inline-block;
	position: fixed;
	float: left;
	text-align: left;
	height: 100vh;
	margin:0;
	left:-380px;
	width: 400px;
	background-color: grey;
	color:black;
	transition: all 0.1s;
	overflow: scroll;
	font-size: 1.5em;
	z-index: 1001;
}

#toolbox::-webkit-scrollbar{display: none;}
#toolbox::-webkit-scrollbar-track{display: none;}
#toolbox::-webkit-scrollbar-thumb{display: none;}

.rond{
position: absolute;
width: 20px;
height: 20px;
left:100%;
top:100%;
float:right;
margin-left:-10px;
margin-top:-10px;
border-radius:20px;
background-color: grey;
opacity: 0.5;
z-index: 1000;
cursor:pointer;
}

#rond:hover{
}

.carre{
position: absolute;
width: 20px;
height: 20px;
float: left;
margin-left:-10px;
margin-top:-10px;
background-color: grey;
opacity: 0.5;
z-index: 1000;
cursor:pointer;
}

#carre:hover{
background-color: blue;
}

.button, .buttonPage{
	width: 100%;
	height: 20px;
	margin-top:15px;
	margin-bottom:10px;
	border-bottom: 1px dashed black;
	color:black;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor:pointer;
}

.colonneMe{float:left;display:inline-block;width:30%;position:relative;margin-left:2.5%;margin-top:2%;}

.buttonTempl{
	margin:5px;
	padding:10px;
	background-color: grey;
	cursor:pointer;
}

.buttonTempl:hover{
	background-color: white;
}