@font-face {
	font-family: regular;
	src: url(/fonts/OpenSans-Regular.ttf);
}
@font-face {
	font-family: semibold;
	src: url(/fonts/OpenSans-Semibold.ttf);
}
* {
	margin: 0;
	padding: 0;
	outline: none;
}
a {
	text-decoration: none;
}
ul {
	list-style: none;
}
body {
	background: #fafbfc;
	font-family: semibold;
	font-size: 15px;
	color: #444444;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 500;
}
html,body{
	height: 100vh;
}
.row {
	margin: 0;
}
.body{
	height: 100%;
}
.left{
	height: 100%;
	background-image: url('/images/login.png');
	background-size: 100% 100%;
	position: relative;
	display: grid;
	place-items:center;
	color: white;
}
.left:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0 52 89 / 0.6);
}
.left .title{
	z-index: 1;
	text-align: center;
	font-family: regular;
}
.left .title a{
	color: white;
	border:3px solid #F5F5F5;
	border-radius: 30px;
	padding: 0.6rem 3rem;
	position: relative;
	top: 3rem;
	transition: 0.2s linear;
}
.left .title a:hover{
	background-color: rgba(255 255 255 / 0.2)
}
/*right*/
.right{
	padding: 1rem;
}
form{
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}
.right form h1{
	color: #007EA7;
	margin-top: 2rem;
}
.buttons{
	margin-top: 2rem;
}
.buttons a{
	margin: 1rem;
}
.note{
	margin-top: 2rem;
	color: #666666;
}
.inputs{
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.input.has-error{
	box-shadow: 0 0 2px #ff0000a6;
}
.inputs .input{
	background-color: #F0F0F0;
	border-radius: 5px;
	margin: 0.5rem 0;
	display: flex;
	align-items: center;
}
.inputs input{
	background-color: transparent;
	border:none;
	width: 100%;
	padding: 1rem 1rem;
}
.inputs .input.email img{
	margin-left: 1rem;
}
.inputs .input.password img{
	margin-left: 1.2rem;
}
.forgot{
	top: 1rem;
	color: #2196F3;
	position: relative;
	margin: 0 auto;
}
.input.has-error {
    box-shadow: 0 0 2px #ff0000a6;
}
.submit{
	background-color: #007EA7;
	border-radius: 30px;
	box-shadow: 3px 3px 15px rgba(0 0 0 / 0.1);
	padding: 0.8rem 4rem;
	margin: 5rem auto 0;
	color: white;
	transition: 0.2s linear;
	border:none;
	cursor:pointer;
}
.submit:hover{
	background-color: rgba(0 126 167 / 0.7);
}
.signup-link{
	position: relative;
    margin: auto;
    margin-top: 2rem;
    color: #666666;
}
@media (min-width: 0px) {
	.left{
		display: none;
	}
	.inputs .input{
		min-width: 100%	
	}
	.submit{
		min-width: 85%;
	}
	.signup-link{
		display: block;
	}
}

@media (min-width: 576px) {
	
}

@media (min-width: 768px) {
	.signup-link{
		display: none;
	}
	.inputs .input{
		min-width: 400px;
	}
	.left{
		display: grid;
	}
	.submit{
		min-width: unset;
	}
}

@media (min-width: 992px) {
	.inputs .input{
		min-width: 500px;
	}
}

@media (min-width: 1200px) {
	
}