@import	url("./root.css");
body{
	margin-top:		45px;
	margin-left:	45px;
	margin-right:	15px;
	margin-bottom:	15px;
}
::-webkit-scrollbar{
	-webkit-appearance:	none;
	width:				5px;
}
::-webkit-scrollbar-thumb{
	border:				1px solid var(--cor-sec);
	border-radius:		5px;
	background-color:	var(--cor-bord);
	-webkit-box-shadow:	0 0 1px rgba(255, 255, 255, .5);
}
.modal{
	top:			50%;
	left:			50%;
	width:			30%;
	border:			3px solid var(--cor-bord);
	margin:			auto;
	padding:		16px;
	z-index:		5;
	position:		absolute;
	transform:		translate(-50%, -50%);
	background:		var(--cor-back);
	text-align:		left;
	border-radius:	15px;
	
}

.modal, .modal form{
	transition:		opacity 500ms, visibility 500ms;
}
.modal label{	font-weight:	bold;	}
.modal input[type=text], .modal  input[type=password], .modal  input[type=email], .modal select, .modal input[type=button], .modal input[type=submit]{
	width:			100%;
	margin:			8px 0;
	padding:		10px 20px;
	border-radius:	5px;
}
.modal input[type=text], .modal  input[type=password], .modal  input[type=email], .modal select{
	border:			1px solid var(--cor-bord);
	display:		inline-block;
	box-sizing:		border-box;
}
.modal input[type=button], .modal input[type=submit], button{
	color:				var(--cor-back);
	border:				none;
	cursor:				pointer;
	margin:				10px 0;
	opacity:			0.9;
	padding:			10px 15px;
	overflow:			hidden;
	text-overflow:		ellipsis;
	text-align:			center;
	transition:			500ms;
	align-items:		center;
	border-radius:		5px;
	justify-content:	center;
	background-color:	var(--cor-pri);
}
.modal input[type=button]:hover, .modal input[type=submit]:hover, button:hover{	background:	var(--cor-sec);	opacity:	1;	}
.modal input[type=button]:active, .modal input[type=submit]:active, button:active{	background:	var(--cor-back);	opacity:	.1;	}
.modal span.psw{
	float:	right;
	cursor:	pointer;
	color:	blue;
}
.modal .imgmodal{
	margin:				2px 0;
	text-align:			center;
	align-items:		center;
	justify-content:	center;
}
.modal .imgmodal{
	width:			90%;
	border:			3px solid transparent;
	display:		inline-block;
	padding:		10px;
	overflow:		hidden;
	position:		relative;
	border-left:	1px solid transparent;
	border-right:	6px solid transparent;
}
.modal .imgmodal img{
	width:				40%;
	min-width:			50px;
	min-height:			50px;
	transition:			5s;
	aspect-ratio:		1/1;
}
.modal .imgmodal img.avatar{	border-radius:	50%;	}
.modal .imgmodal img:hover{	border-radius:	5px;	}
.modal .incorrect{
	color:		red;
	border:		1px solid;
}
@media screen and (max-width: 800px){
	.logo{	width:	40%;	}
	.modal{	min-width:	60%;	}
}
#return{
	cursor:		pointer;
	font-size:	20px;
}
/*------------------------------------------------------------------------------------------------*/
/*-----------------------------------------MODAL--------------------------------------------------*/
/*------------------------------------------------------------------------------------------------*/
.barra{
	position:			fixed;
	height:				100%;
	width:				40px;
	left:				0px;
	top:				0px;
	color:				var(--cor-back);
	z-index:			10;
	background:			rgb(44,62,80);
	background-image:	-moz-linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79));
	background-image:	-webkit-linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79));
	background-image:	-o-linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79) );
	background-image:	-ms-linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79));
	background-image:	linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79));
}
.barra img{
	left:			5%;
	width:			90%;
	bottom:			2px;
	position:		absolute;
	background:		var(--cor-back);
	border-radius:	25%;
}
.barra h3{
	position:		absolute;
	bottom:			50px;
	left:			-10px;
	writing-mode:	vertical-rl;
	transform:		rotate(180deg);
}

#pesquisar{
	top:	5px;
	right:	12px;
}
#background{
	top:		0;
	left:		0;
	width:		100%;
	border:		0px;
	height:		100%;
	z-index:	-1;
	overflow:	hidden;
	position:	absolute;
}
#gallery{
	width:				calc(99vw - 60px);
	height:				calc(99vh - 60px);
	overflow:			hidden;
	overflow-y:			auto;
	text-align:			center;
	align-items:		center;
	justify-content:	center;
}