@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
/*GENERAL RULES*/
:root{
	--size_icone:32px;
	--elem_icone:calc(var(--size_icone) / 2);
	--font_general: 'Montserrat', sans-serif;
	--color_button_menu: silver;
}
*{margin:0px;padddng:0px;}
html, body{background: #6e6e6e;height:100%;font-family:var(--font_general);}
body
{
	display:flex;
	flex-direction:row;
	box-sizing: border-box;
	align-items: stretch;
	overflow:auto;
}
/*NAVBAR*/
nav{
	display:flex;
	flex-direction:row;
	position:fixed;
	width:100%;
	font-size:1.2em;
	height:var(--size_icone);
	list-style-type:none;
	text-align:center;
	align-items:center;
	background: #6e6e6e;
}
nav ul{width:100%;}
nav li
{
	display:inline-block;
	text-decoration:none;
	width:25%;
}
.icone, .icone_bt{color: rgba(0,0,0,.6);text-shadow: 3px 2px 3px rgba(255,255,255,.2);}
nav li a{cursor:pointer;}

/*END NAVBAR*/
/*DIV*/
.left, .right, .left_overlay, .right_overlay
{
	width:calc(50% - var(--elem_icone));
	padding-top:var(--size_icone);
	background:silver;overflow:auto;
}
.middle{width:var(--size_icone);padding-top:var(--size_icone);}
.left_overlay, .right_overlay
{
	display:none;
}
/*bt div*/
.icone_bt{
	font-size:calc(var(--elem_icone) + 5px);width:100%;
	background: #6e6e6e;margin-bottom:5px;cursor:pointer;
	border:none;
}
.bt_direction{
	font-size:calc(var(--elem_icone) + 5px);width:100%;
	background: rgba(0,0,0,.6);margin-bottom:5px;
	color:silver;
	border:none;
	opacity:1;
	cursor:pointer;
	transition: all 0.5s ease;
}
.bt_direction:hover
{
	opacity:0.7;
}
.icone_bt_open{
	color:var(--color_button_menu);border-top:1px dashed var(--color_button_menu);
}
.icone_bt_close{
	color: rgba(0,0,0,.6);border-top:1px dashed rgba(0,0,0,.6);
}
.icone_bt:hover{
	color:var(--color_button_menu);border-top:1px dashed var(--color_button_menu);
}
.p_direction
{
	text-align:left;
	font-size:10px;
	display:block;
	color:silver;
}
/*END DIV*/
/*textarea test*/
.CodeMirror
{
	height:calc(100% - 30px);
	margin:auto;
}
textarea
{
	height:100%;
	width:100%;
	box-sizing: border-box;
}
.tools
{
	display:block;
	height:30px;
}
#themeSelect{
	height:30px;
		padding-left:30px;
	background:url('images/paint.png') no-repeat, #6e6e6e;
	color: rgba(0,0,0,.6);text-shadow: 3px 2px 3px rgba(255,255,255,.2);
	background-position:top left;
	background-size:auto 100%;
	font-weight:bold;
	border:2px solid #6e6e6e;
}
#preview
{		display:flex;
	flex-direction:row;
	box-sizing: border-box;
	align-items: stretch;
	
}
#prev
{
	flex-grow: 1; border: none; margin: 0; padding: 0;
	border:none;
	with:100%;
	overflow:hidden;
}
#drop
{
	position:absolute;
	border:none;
	width:calc(50% - var(--elem_icone));
	height:calc(100% - var(--size_icone));
	display:none;
}
/*RESPONSIVE*/
@media screen and (max-width: 875px)
{
	body{
		flex-direction:column;
	}
	.left, .right, .left_overlay, .right_overlay
	{
		width:100%;
		height:calc(50%);
		padding-top:0px;
	}
	#drop
	{
		width:100%;
		height:calc(50% - var(--size_icone));
	}
	.left, .left_overlay{
		padding-top:var(--size_icone);
	}
	.middle{	
		display:flex;
		flex-direction:row;width:100%;padding-top:0px;height:var(--size_icone);
	}
	.middle *
	{
		display:inline-block;
	}
	.icone_bt{
		width:30px;
		border:none;
	}
	.bt_direction{
		font-size:calc(var(--elem_icone) + 5px);width:30px;margin-bottom:0px;
	}
}