@charset "utf-8";
/* CSS Document */

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

:root {
	--blue: rgba(0,112,192,1.00);
	--green: rgba(112,173,71,1.00);
	--grey: rgba(145,145,145,1.00);
}

/**************************************************************/

.form-wrapper {
	background: rgba(242,242,242,1.00);
	width: 800px;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
}

.btn-close {
	cursor: pointer;
	font-size: 30px;
}

.header-wrap h1 {
	width: 100%;
	font-size: 22px;
	color: var(--blue);
	padding-top: 10px;
	margin-bottom: 15px;
}

.form-control {
	border-radius: 0;
}

.form-group > label,
.form-group > a {
	font-size: 14px;
	margin-bottom: 5px;
}

a.forgotPwd {
	position: relative;
	color: var(--blue);
	left: 45%;
	font-size: 13px;
}

small {
	color: var(--grey);
}

button.btn {
	background: var(--blue);
	color: #fff;
	margin-bottom: 1.5em;
}

hr {
	position: relative;
	top: 30px;
	border: 1px solid #fff;
	height: 21em;
}

input.form-control {
	font-size: 13px;
	color: var(--grey);
}

/******************checkbox*******************/

.containerCheck {
	display: block;
  	position: relative;
  	padding-left: 25px;
  	margin-bottom: 12px;
  	cursor: pointer;
  	font-size: 14px;
  	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
	color: var(--grey);
}

.containerCheck input {
	position: absolute;
  	opacity: 0;
  	cursor: pointer;
  	height: 0;
  	width: 0;
}

.checkmark {
	position: absolute;
	top: 1px;
	left: 0;
	height: 17px;
	width: 17px;
	background-color: #fff;
	border: 1px solid var(--green);
}

.checkmark:after {
  	content: "";
  	position: absolute;
  	display: none;
}

.containerCheck input:checked ~ .checkmark:after {
  	display: block;
}

.containerCheck .checkmark:after {
  	left: 5px;
  	top: 1px;
  	width: 6px;
  	height: 11px;
  	border: solid var(--green);
  	border-width: 0 3px 3px 0;
  	-webkit-transform: rotate(45deg);
  	-ms-transform: rotate(45deg);
  	transform: rotate(45deg);
}

/*****************Media*************************/

@media only screen and (max-width: 770px) {
	a.forgotPwd {
		left: 20%;
	}
}

@media only screen and (max-width: 580px) {
	.form-wrapper {
		width: 450px;
	}
	a.forgotPwd {
		left: 50%
	}
	div.extra-column {
		display: none;
	}
	hr {
		display: none;
	}
}

@media only screen and (max-width: 500px) {
	.form-wrapper {
		width: 350px;
	}
	a.forgotPwd {
		left: 35%
	}
}

@media only screen and (max-width: 400px) {
	.form-wrapper {
		width: 300px;
	}
	a.forgotPwd {
		left: 20%
	}
}

/**********************************************************/

.error {
   background: #F2DEDE;
   color: #A94442;
   padding: 10px;
   width: 95%;
   border-radius: 5px;
   margin: 20px auto;
}