

.signup-page,.login-page{
    background:white;
    /* background-image: url('https://images.pexels.com/photos/4467687/pexels-photo-4467687.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'); */
	background-image: url('/static/images/login_image_main.svg');
    background-repeat: no-repeat, no-repeat;
    background-size: 50%;
	height: 100%;
	background-position: 900px;
	background-position: left top, left top;
	/* height: auto;
    background: linear-gradient(90deg, #ffffff 60%, #454545 40%); */
}
.signup-page .form-wrapper,.login-page .form-wrapper{
	background:white;
	width:550px;
    max-width:550px;
    margin:80px auto 0;
    padding:50px;
	margin-right: 60px;
}


@media(max-width:1075px){
	.signup-page .form-wrapper,.login-page .form-wrapper{
		width:100%;
		margin:15px auto;
        padding:30px;
    }
    .signup-page,.login-page{
        background:white;
        /* background-image: url('https://images.pexels.com/photos/4467687/pexels-photo-4467687.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'); */
        background-image: none;
        background-repeat: no-repeat, no-repeat;
        background-size: 45%;
        height: 100%;
        background-position: left top, left top;
		}
	.image_bottom{
		display: none;
	}
}

.signup-page .form-wrapper .logo,.login-page .form-wrapper .logo{
	text-align:left;
	margin:0 auto 20px;
	margin-bottom: 10%;
}
.signup-page .form-wrapper .logo img,.login-page .form-wrapper .logo img{
	width:30px;
	margin:auto
}
@media(max-width:600px){
	.signup-page .form-wrapper .logo img,.login-page .form-wrapper .logo img{
		width:25px
}
.label{
	float:center !important; 
	margin-right: 10px; 
	padding-right: 8% !important; 
	margin-left: -8% !important;
}
}
.signup-page .form-wrapper .alert-warning,.login-page .form-wrapper .alert-warning{
	color:#856404;
	background-color:#fff3cd;
	border-color:#ffeeba;
	font-weight:300;
	font-size:.8em;
	margin:30px 0;
	display:flex;
	align-items:center;
	justify-content:space-between
}
@media(max-width:600px){
	.signup-page .form-wrapper .alert-warning,.login-page .form-wrapper .alert-warning{
		padding:10px 15px
}
}
.signup-page .form-wrapper .alert-warning .close,.login-page .form-wrapper .alert-warning .close{
	color:#856404;
	font-weight:300;
	order:1;
	outline:none!important;
	transition:all .3s ease-out
}
.signup-page .form-wrapper .alert,.login-page .form-wrapper .alert{
	position:relative;
	padding:.75rem 1.25rem;
	margin-bottom:1rem;
	border:1px solid transparent;
	border-radius:.25rem;
	font-family: 'Roboto', sans-serif;
}
.signup-page .form-wrapper .alert button.close,.login-page .form-wrapper .alert button.close{
	padding:0;
	background-color:transparent;
	border:0;
	-webkit-appearance:none;
	float:right;
	font-size:1.5rem;
	font-weight:700;
	line-height:1;
	color:#000;
	text-shadow:0 1px 0 #fff;
	opacity:.4
}
.signup-page .form-wrapper .alert button.close:hover,.login-page .form-wrapper .alert button.close:hover{
	cursor:pointer
}
.signup-page .form-wrapper h1,.login-page .form-wrapper h1{
	font-size:1.5rem;
	color:#5f6988;
	font-weight:300;
	border-bottom:1px solid #dee2ef;
	padding-bottom:5px;
	margin-bottom:20px;
	font-family: 'Roboto', sans-serif;
}
@media(max-width:600px){
	.signup-page .form-wrapper h1,.login-page .form-wrapper h1{
		font-size:1.5rem
}
}
.signup-page .form-wrapper input,.login-page .form-wrapper input{
	padding:10px 13px;
	margin-bottom:15px;
	width:-webkit-fill-available;
	border-radius:2px;
	border:1px solid #d4d9e3;
	font-weight:200;
	color:#4d5060;
	font-family: 'Roboto', sans-serif;
	transition:all .3s ease-out;
	font-size:1em;
	outline-color:transparent;
	outline-style:none;
	border-radius: 12px !important;
}
@media(max-width:600px){
	.signup-page .form-wrapper input,.login-page .form-wrapper input{
		font-size:.9em
}
}
.signup-page .form-wrapper input::placeholder,.login-page .form-wrapper input::placeholder{
	color:#d4d9e3
}
.signup-page .form-wrapper input:hover,.login-page .form-wrapper input:hover{
	border-color: #00756A;
	background:#f5dfd4
}
.signup-page .form-wrapper input:hover::placeholder,.login-page .form-wrapper input:hover::placeholder{
	color:#333
}
.signup-page .form-wrapper input:focus,.login-page .form-wrapper input:focus{
	background:white;
	border-color: #00756A;
	box-shadow:unset
}
.signup-page .form-wrapper input:focus::placeholder,.login-page .form-wrapper input:focus::placeholder{
	color:#d4d9e3
}
.signup-page .form-wrapper fieldset,.login-page .form-wrapper fieldset{
	border:none;
	padding:0;
	margin:0
}
.signup-page .form-wrapper label,.login-page .form-wrapper label{
	font-size:1em;
	color:#5f6988;
	margin-bottom:5px;
	display:block;
	font-weight:300;
	font-family: 'Roboto', sans-serif;
}
.signup-page .form-wrapper input[type="submit"],.login-page .form-wrapper input[type="submit"]{
	background: #00756A;
	color:white;
	border-radius:2px;
	margin-top:15px;
	font-weight:400;
	border:1px solid  #00756A;
	transition:all .3s ease-out
}
.signup-page .form-wrapper input[type="submit"]:hover,.login-page .form-wrapper input[type="submit"]:hover{
	cursor:pointer;
	background:white;
	color: #00756A
}
.signup-page .form-wrapper .errors,.login-page .form-wrapper .errors{
	margin-top:-11px;
	margin-bottom:1rem;
	list-style:none;
	padding:0;
	font-size:.9em;
	color:#b75353
}
.signup-page .login-signup,.login-page .login-signup{
	text-align:center;
	font-weight:300;
	font-size:.8em;
	font-family: 'Roboto', sans-serif;
	margin-top:20px
}
.signup-page .login-signup a,.login-page .login-signup a{
	color: #00756A;
	font-weight:500
}



