/* NEW LOGIN CSS */
/* ============= */

/* ICONS */
@font-face {
  font-family: 'hospicons';
  src:  url('../fonts/hospicons.eot?5yxjp6');
  src:  url('../fonts/hospicons.eot?5yxjp6#iefix') format('embedded-opentype'),
    url('../fonts/hospicons.ttf?5yxjp6') format('truetype'),
    url('../fonts/hospicons.woff?5yxjp6') format('woff'),
    url('../fonts/hospicons.svg?5yxjp6#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'hospicons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[class*="hospicons-"]:before {
	display: inline-block;
    font-size: 19px !important;
    width: 20px;
    margin: 0px !important;
	top: unset !important;
    font-family: 'hospicons' !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	transition: All .4s ease;
}
.hospicons-user-login:before 	{ content: '\e1917' !important; }
.hospicons-pass-login:before 	{ content: '\e1918' !important; }
body {
    background-color: #016791;
	padding: 0;
    margin: 0;
}
body::before {
  	content: "";
    background-image: url(/core/img/login_bg.svg);
    background-blend-mode: soft-light;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: -200px;
    background-position-y: -200px;
	opacity: 0.2;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	z-index: -1;   
}
body > .login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
	font-family: Arial !important;
	flex-direction: column;
}
body > .login-wrapper:after {
	content: '';
	display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0; left: 0;
	z-index: -1;
	background-image: linear-gradient(220deg, rgba(255,255,255,.3), rgba(0,0,0,.75));
	animation-name: degreeIn;
  	animation-duration: 3s;
}
body > .login-wrapper:before {
	content: '';
	display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0; left: 0;
	z-index: -1;
	opacity: 0;	
	background-image: linear-gradient(220deg, rgba(0,0,0,.75), rgba(255,255,255,.3));
	animation-name: degreeOut;
  	animation-duration: 3s;
}
@keyframes degreeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes degreeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}
body > .login-wrapper > .login-content {
    border-radius: 3px;
    background-color: #e6e6e6;
    width: calc(100% - 30px);
    max-width: 490px !important;
	overflow: hidden;
	box-shadow: 0 22px 40px -10px rgba(0,0,0,.5);
	position: relative;
	opacity: 1;
    top: 0px;
	transform: scale(1);
	animation-name: showUp;
	animation-timing-function: ease-in-out;
  	animation-duration: 2s;
}

#invalidLogin {
    background-color: #e36767;
    font-size: 13px;
    padding: 20px;
    border-radius: 3px;
    max-width: 490px;
    box-sizing: border-box;
    margin-top: 20px;
    color: #fff;
	position: relative;
	opacity: 0;
	transform: scale(1);
    top: 0px;
	animation-name: showError;
	animation-timing-function: ease-in-out;
  	animation-duration: .5s;
	animation-delay: 2s;
	animation-fill-mode: forwards;
}
@keyframes showUp {
	0% {
		box-shadow: 0 0px 0px 0px rgba(0,0,0,.5);
		opacity: 0;
	    top: 20px;
	}
	66% {
		box-shadow: 0 0px 0px 0px rgba(0,0,0,.5);
		opacity: 0;
	    top: 20px;
	}
	100% {
		box-shadow: 0 22px 40px -10px rgba(0,0,0,.5);
		opacity: 1;
	    top: 0px;
	}
}
@keyframes showError {
	0% {
		opacity: 0;
		transform: scale(.5);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
body > .login-wrapper > .login-content > .logo-section {
	background-color: #fff;
	padding: 30px;
}
body > .login-wrapper > .login-content > .form-section {
	padding: 30px;
}
body > .login-wrapper > .login-content > .form-section > p {
	color: #424242;
	font-size: 17px;
	line-height: 13px;
	margin: -5px 0 13px 0;
}
body > .login-wrapper > .login-content > .form-section > form,
body > .login-wrapper > .login-content > .form-section > form > .login-form,
body > .login-wrapper > .login-content > .form-section > form > .login-form > .xxs-visible,
body > .login-wrapper > .login-content > .form-section > form > .login-form > .xxs-visible > .user,
body > .login-wrapper > .login-content > .form-section > form > .login-form > .xxs-visible > .pass {
	width: 100%;
	border: 0;
	outline: 0;
	padding: 0;
	margin: 0;
}
body > .login-wrapper > .login-content > .form-section > form > .login-form > .xxs-visible input[type="text"],
body > .login-wrapper > .login-content > .form-section > form > .login-form > .xxs-visible input[type="password"] { 
    font-size: 13px !important;
    color: #475357 !important;
    line-height: 27px !important;
    padding: 0 5px;
    margin: 0 !important;
    height: 27px;
    background-color: #f5f5f5 !important;
    box-shadow: rgba(0, 0, 0, 0.5) 0 2px 9px -4px inset;
    border-width: 0;
    border-style: initial;
    border-color: initial;
    -moz-border-image: initial;
    -webkit-border-image: initial;
    border-image: initial;
    padding: 0 5px 0 28px !important;
	width: 100%;
    box-sizing: border-box;
	outline: 0 !important;
    margin-bottom: 14px !important;
}
.login-footer-wrapper { text-align: right; }
.login-footer-wrapper > input[type="submit"] {
	color: #ffffff;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 28px;
    transition: All .4s ease;
    height: 28px;
    background-color: #016791;
    border: 0;
    border-radius: 4px;
    text-transform: uppercase;
    padding: 0 15px;
    border-bottom: 1px solid #000;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.user, .pass {
	position: relative;
}
.user > i, .pass > i {
	position: absolute;
	top: 4px;
    left: 5px;
    color: #016791;	
}