/* Fonts */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
header, body, footer, .header, .body, .footer  {
	font-family: Arial, sans-serif;
}

h2, .h2 {
	/* Bootstrap defines a top margin! */
   margin-top: 0px!important;
}

.red {
  background: #e5603b !important;
  color: white !important;
}

ul, ol {
    list-style: none;
    padding: 0;
	margin-left:4px;
}

.push {
    clear: both;
    height: 60px;
}

html, body {
	margin:0; 
	height:100%;
}

/* Controls (moved from Application.css) */
.login-widget, .registration-widget {
  padding-bottom: 0;
}
.login-widget header, .registration-widget header {
  margin: 15px 0 25px 0;
}


.login-widget .input-group-addon, .registration-widget .input-group-addon {
  padding: 8px 7px;
}

.login-widget .input-group-addon i, .login-widget .input-group-addon i:before, .login-widget .input-group-addon i:after, .registration-widget .input-group-addon i, .registration-widget .input-group-addon i:before, .registration-widget .input-group-addon i:after {
  width: 20px;
  margin: 0;
}

.login-widget .form-actions, .registration-widget .form-actions {
  margin: 0 -12px;
  padding: 20px 15px 0 15px;
}

.login-widget .form-actions .btn-lg, .login-widget .form-actions .btn-group-lg > .btn, .registration-widget .form-actions .btn-lg, .registration-widget .form-actions .btn-group-lg > .btn {
  padding: 10px 18px;
}

.login-widget .form-actions .small-circle, .registration-widget .form-actions .small-circle {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  vertical-align: middle;
}

.login-widget .form-actions .small-circle i, .registration-widget .form-actions .small-circle i {
  position: relative;
  left: 1px;
}

.login-widget .form-actions .forgot, .registration-widget .form-actions .forgot {
  color: white;
  text-align: center;
  text-decoration: underline;
  padding: 15px 0 15px 0;
}

.login-widget footer, .registration-widget footer {
  margin: 0 -12px;
  position: static;
}



/* FORM */
body.background-light #loginForm {
	height: 380px;
	border-radius: 10px;
    border: solid 1px #cdcdcd;
    padding: 30px;   
}

body.background-light #LogInContainer {
    width: 400px;
    margin: 50px auto;
	color:  #0E1D37;
	background-color:white;
}


.login-center-box {
	text-align:center;
}

.login-copyright-box {
	width: 220px;
	word-wrap:break-word;
	display:inline-block;
}

.login-footer-box {
	display:inline-block;
}

.login-title {
	font-size:41px;
	padding-bottom:30px;
}

.form-control:focus {
	border-color: #0E1D37;
	border-width: 2px;
}

#UserName, #Password {
	border-radius: 3px;
	border-width: 1px;
	border-color: #666666;
	background-color: white !important;
	z-index:20;
	font-size: 13px;
	width:340px;
}

/* override Chrome's auto fill password highlight */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
	background-color: white !important;
	background-image:none !important;
	color: #0E1D37 !important;
	transition: background-color 10s ease-in-out 0s;
}

/* Button Login */
.btn-login {
	color: #0E1D37;
	background-color: white;
	background-size: cover;
	background:no-repeat;
	border: 0px;
	text-align: center;
	font-size:24px;
	cursor: pointer;
	padding: 0;
	display: inline;
}

/* Button with small background image */
.btn-login-small {
	width:102px;
	height: 58px;
	background-image: url("../../Images/ProactisButtons.png");
}

/* Button with big background image */
.btn-login-medium {
	width:148px;
	height: 58px;
	background-image: url("../../Images/ProactisButtonsWide.png");
}

/* Solid coloured button with rounded border */
.btn-login-large {
	background-image:none;
	background-color:#0E1D37;
	border: 1px solid;
	border-color: #231F1E;
	border-radius:10px;
	height:58px;
	padding: 5px;
	color:white!important;
}

/* Div that contains the login button and image */
.login-button-div {
    right: 30px;
    bottom: 60px;
    position: absolute
}

.login-button-div-error {
    right: 30px;
    bottom: 60px;
    position: absolute
}


.btn-login:hover, .btn-login:focus {
  color: #E57710;
  outline:none;
}

.btn-login-large:hover, .btn-login-large:focus, .btn-login-large:active, .btn-login-large.active {
  color: white!important;
  background-color: #E57710!important;
}

/* Moves the button on click */
.btn-login:active, .btn-login.active {
	padding-left:5px;
	padding-top:5px;
	color: #E57710;
	outline:none;
}

/* Header Space */
.HeaderBar {
	height:90px;
}

/* General footer settings */
.login-footer {
	height: 40px;
	bottom: 0;
	width: 100%;
    clear: both;
    font-size: 0.9em;
    border-top: solid 10px white;
}

.footer-wrapper {
    padding: 10px 100px;
    height:30px;
    background: white;
}

/* Hyperlink styles */
.forgot a,
.login-footer .footer-wrapper a {
	background-color:white;
	text-decoration:underline;
	color:#0E1D37;
}

/* Organisation Logo */
.logo-center-box {
	text-align:center;
	overflow:hidden;
}

/* Animation */
.animated-login {
	 backface-visibility:visible;
	 animation-name: flipInY;
	 animation-duration: 1s;
	 animation-fill-mode:both;
	 animation-delay:500ms;
}

@-webkit-keyframes flipInY {
	0% {
		-webkit-transform: perspective(400px) rotateY(90deg);
		opacity: 0;
	}
	40% {
		-webkit-transform: perspective(400px) rotateY(-10deg);
	}
	70% {
		-webkit-transform: perspective(400px) rotateY(10deg);
	}
	100% {
		-webkit-transform: perspective(400px) rotateY(0deg);
		opacity: 1;
	}
}
         
@keyframes flipInY {
	0% {
		transform: perspective(400px) rotateY(90deg);
		opacity: 0;
	}
	40% {
		transform: perspective(400px) rotateY(-10deg);
	}
	70% {
		transform: perspective(400px) rotateY(10deg);
	}
	100% {
		transform: perspective(400px) rotateY(0deg);
		opacity: 1;
	}
}
         
.flipInY {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipInY;
	backface-visibility: visible !important;
	animation-name: flipInY;
}


@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}


.apply-shake {
	animation: shake 0.6s;
}


/* Space */
.space-after {
 margin-bottom:10px;
}
.space-right {
 margin-right:10px;
}

.space-left {
 margin-left:10px;
}

/* ROW */
.row {
  margin-left: -15px;
  margin-right: -15px;
}
.row:before, .row:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.row:after {
  clear: both;
}

/* Label */
.label-normal {
	position:absolute;
	top:14px;
	left:10px;
	font-weight:normal;
	background-color:white;
	color:#666666;
	z-index:30;
}

.label-focus {
	position:absolute;
	top:-10px;
	left:10px;
	background-color:white;
	font-weight:normal;
	color:#0E1D37;
	z-index:30;
}