@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);
}
.container .card{
	width:		100%;
	max-width:	400px;
}
.container .card input[type=button], .container .card input[type=submit], button{
	color:				var(--cor-back);
	width:				100%;
	border:				none;
	cursor:				pointer;
	margin:				10px 0;
	opacity:			0.9;
	padding:			10px 15px;
	overflow:			hidden;
	text-align:			center;
	transition:			500ms;
	align-items:		center;
	border-radius:		5px;
	text-overflow:		ellipsis;
	justify-content:	center;
	background-color:	var(--cor-pri);
}
.container .card input[type=button]:hover, .container .card input[type=submit]:hover, button:hover{	background:	var(--cor-sec);	opacity:	1;	}
.container .card input[type=button]:active, .container .card input[type=submit]:active, button:active{	background:	var(--cor-back);	opacity:	.1;	}
span.psw{
	float:	right;
	cursor:	pointer;
	color:	blue;
}
.imgmodal img{
	width:				150px;
	min-width:			50px;
	min-height:			50px;
	transition:			5s;
	aspect-ratio:		1/1;
}
.incorrect{
	color:		red;
	border:		1px solid;
}
#return{
	cursor:		pointer;
	font-size:	20px;
}
/*------------------------------------------------------------------------------------------------*/
/*-----------------------------------------MODAL--------------------------------------------------*/
/*------------------------------------------------------------------------------------------------*/
.barra{
	top:				0px;
	left:				0px;
	color:				var(--cor-back);
	width:				40px;
	height:				100%;
	z-index:			10;
	position:			fixed;
	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 h4{
	left:			-10px;
	bottom:			50px;
	margin:			15px;
	position:		absolute;
	transform:		rotate(180deg);
	writing-mode:	vertical-rl;
}

#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;
}
input.validate{
	color:		white;
	background:	var(--cor-pri);
	text-align:	center;
}
#return.bi{
	width:		35px;
	height:		35px;
	margin:		0px 15px;
	padding:	0px;
	font-size:	35px;
	line-height:	0;
}