/* Export Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');

body, html{
	background-image: url(../img/pattern.png);
	height: 100vh;
}

:root{
	--p-bg: #272727;
	--p-txt: #fff;

	--s-bg: #fff;
	--s-txt: #000;

	--up-bg: #3AB6F2;
	--up-txt: var(--p-bg);

	--btn-azul: #3AB6F2;
	--btn-verde: #30c383;
	--btn-vermelho: red;
}

/* Generic Box */

.generic-box{
	background-color: var(--s-bg);
	box-shadow: 0 10px 10px rgba(0,0,0,.1);
	overflow: hidden;
}

.generic-box header{
	position: relative;
}

.generic-box header h2{
	padding: 10px;
	margin: 0;
	color: var(--p-txt);
	background-color: var(--p-bg);
	font-family: 'Poppins', arial, sans-serif;
	font-weight: 500;
	font-size: 1.3rem;
	border-bottom: 2px solid var(--up-bg);
}

.generic-box header span{
	width: 60px;
	position: absolute;

	top: 0;
	bottom: 0;
	right: 0;
	color: var(--up-txt);
	background-color: var(--up-bg);
	text-shadow: 1px 1px 0 rgba(255,255,255,.6);
	font-size: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.generic-box section{
	padding: 15px;
}

.generic-box footer{
	padding: 10px;
	background-color: #f1f1f1;
	border-top: 1px solid #ccc;
	display: flex;
	justify-content: flex-end;
}

.generic-box form{
	margin-bottom: 0;
}

.container-base .generic-box{
	margin-top: 30px;
}

/*Container*/
.container-base{
	padding-top: 80px;
	padding-bottom: 30px;
}

.container-base > .row{
	display: flex;
	justify-content: center;
}


/* Inputs */

.generic-input{
	padding: 6px;
	width: 100%;
	background-color: #f1f1f1;
	border: solid 1px #ccc;
	box-shadow: inset 0 0 5px rgba(0,0,0,.1);
}

.generic-input:focus{
	outline: none;
}

.generic-btn{
	width: 100%;
	padding: 5px 0;
	background-color: var(--btn-azul);
	color: #fff;
	font-family: 'Poppins', arial, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	text-transform: uppercase;
	text-shadow: 1px 1px 3px rgba(0,0,0,.1);
	border: 1px solid rgba(0,0,0,.1);
	filter: opacity(.8);
	transition: .2s ease all;
	cursor: pointer;
}

.generic-btn:focus{
	outline: 0;
}

.generic-btn:hover{
	filter: opacity(1);
	transition: .2s ease all;
}

.generic-btn-form{
	width: inherit;
	padding: 5px 15px;
	border-radius: 30px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.1);
}

.generic-btn-red{
	background-color: #DC4646;
}

.generic-label{
	font-family: 'Poppins', arial, sans-serif;
	color: #2A2A2A;
}

.generic-form .generic-input{
	margin-top: -10px;
}

.generic-form .row{
	margin-top: 10px;
}

.generic-form .row:first-child{
	margin-top: 0;
}

.separador-form{
	width: 100%;
	height: 1px;
	background-color: #ccc;
	display: block;
	margin-top: 10px;
}

/*Navbar*/

.navbar-custom{
	background-color: var(--p-bg);
	border-bottom: 2px solid var(--up-bg);
	padding-top: 0;
	padding-bottom: 0;
}

.navbar-custom .nav-link{
	color: var(--p-txt);
	padding-top: 25px;
	padding-bottom: 25px;
}

.navbar-custom .nav-link:hover{
	color: var(--up-bg);
}

.navbar-custom .nav-item{
	font-family: 'Poppins', arial, sans-serif;
	font-size: 1rem;
	text-transform: uppercase;
}

.nav-separador{
	width: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-separador span{
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--up-bg);
}

.navbar-toggler{
	color: #fff;
}

.navbar-toggler:focus{
	border: none;
	outline: 0;
}

.hide{
	display: none !important;
}

.title-name{
	width: 100%;
	padding: 5px;
	display: block;
	margin-top: 30px;
	color: #181818;
	border: 2px #777777 dashed;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Poppins', arial, sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
}

/*Alert*/

.alert{
	margin-top: 30px;
}

#relatorio-btn:hover{
	color: #fff;
	text-decoration: none;
}

@media (max-width: 991px) {
	.nav-separador{
		display: none;
	}

	.navbar-custom .nav-item{
		border-top: solid 1px rgba(255,255,255,.3);
	}
	.navbar-custom .nav-item:first-child{
		margin-top: 15px;
	}

	.navbar-custom .nav-link{
		padding-top: 15px;
		padding-bottom: 15px;
	}
}

@media (min-width: 992px) and (max-width: 1047px){
	.navbar-expand-lg .navbar-nav .nav-link {
	    padding-right: .2rem;
	    padding-left: .2rem;
	}
}

@media (max-width: 767px){

}

@media (max-width: 362px){
	.container-base{
		padding-top: 91px;
	}
	.navbr-brand {
	    width: 50%;
	}
}

.back-link{
	font-size: 20px;
	text-decoration: none;
	display: block;
	margin: auto;
	text-align: center;
	margin-top: 5px;
}

.back-link:hover{
	text-decoration: none;
}

.back-row{
	display: flex;
	align-items: center;
	justify-content: center;
}