@charset "utf-8";

body {
	background: #000000;
}

#main {
	display: flex;
    justify-content: center;
    align-items: center;
	
	flex-direction: column;
	
	height: 100%;
	
	background: url(/images/spade/bg_login.png)center no-repeat;	
}

#main > ._alert {
	display: flex;
    justify-content: start;
    align-items: center;
	
	/*
	position: absolute;
	left: 0;
	top: -2rem;
	*/
	
	margin-bottom: 1rem;
	
	padding: 0.7rem 1.7rem 0.7rem 1.7rem;
	
	width: 80rem;

	background: #ffffff;

	/*
	color: #ffffff;
	
	background: var(--gray-900);
	*/

	color: #ffffff;

	background: #dd1144;

	/*
	color: #dd1144;
	*/

	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 0.7rem;

	font-size: 1.7rem;
	font-weight: 500;
}
#main > ._alert:before {
	content: '\f071';
	
	margin-right: 0.7rem;
	
	font-size: 2.2rem;
}


#container {
	display: flex;
    justify-content: start;
    align-items: start;
	
	position: relative;
	
	width: 80rem;
	height: 50rem;
	
	background-color: #ffffff;
	
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 1.5rem;
	
	overflow: hidden;
	
	box-shadow: 0 1px 2px 0 rgba(60,64,67,0.30), 0 1px 3px 1px rgba(60,64,67,0.15);
}
	
#container ._image {
	
	width: 50%;
	height: 100%;
	
	background: url(/images/spade/img_login.png) center no-repeat;
	
}

#container ._right {
	display: flex;
    justify-content: center;
    align-items: start;
    
    flex-wrap: wrap;
    
    flex: 1;
}

#container ._right ._logo {
	margin: 4rem 0;

	width: 12rem;
	height: 2.5rem;
	
	background: url(/images/spade/logo_login.png)center no-repeat;
}

._form {
	/*
	padding: 1rem 0 0 2rem;
	*/
	
	color: var(--gray-700);
	
	font-size: 1.2rem;
}

._form ._item {
	position: relative;
}
._form ._item:nth-child(n+2) {
	margin-top: 1rem;
}

._form label {
	display: block;
	
	margin-bottom: 0.3rem;
}

._form input {
	
	padding: 0 1rem 0 3.3rem;
	
	width: 30rem;
	height: 4.0rem;
	
	border: 1px solid var(--gray-400);
	
	border-radius: 0.5rem;
	
	font-size: 1.3rem;
	
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	
}
._form input:hover {
	border-color: var(--gray-500);
}
._form input:focus {
	border-color: #80bdff;
	
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}


._form ._item .beforeIcon {
	position: absolute;
	left: 1.0rem;
	top: 2.5rem;
	
	color: var(--gray-700);
    font-size: 1.8rem;
    
}
#loginForm ._item ._username_icon:before {
    content: '\f007';
}
#loginForm ._item ._password_icon:before {
    content: '\f023';
}



#changeForm ._item ._current_password_icon:before {
    content: '\f09c';
}
#changeForm ._item ._new_password_icon {
	left: 0.7rem;
}
#changeForm ._item ._new_password_icon:before {
    content: '\f502';
}
#changeForm ._item ._confirm_password_icon {
	left: 0.7rem;
}
#changeForm ._item ._confirm_password_icon:before {
    content: '\f4fc';
}



/*
._form ._password_group {
	margin-top: 1rem;
}
*/

._form ._message {
	display: none;
	
	margin-top: 0.5rem;

	font-weight: 500;
}
._form ._message:before {
	margin-right: 0.3rem;
	
	content: '\f071';
	
	color: #ffb200;

	font-size: 1.5rem;
}

._form ._submit {
	margin-top: 1rem;
	
	width: 30rem;
	height: 3.8rem;
	
	color: #ffffff;
	
	font-size: 1.4rem;

	background-color: #0078cf;

	/*
	background-color: var(--blue-500);
	*/

	border: 1px solid #005490;
	border-radius: 0.5rem;
}
._form ._submit:active {
	transform: translate(1px, 1px);
}

#loginRememberMe {
	margin-top: 1rem;
}




#changeForm ._notify {
	position: relative;
	
	padding: 1.2rem 1rem 1.2rem 2.7rem;
	
	color: var(--gray-800);
	
	background-color: #e2e7fc;
	
	border: 1px solid #4172a7;
	border-radius: 0.5rem;
	
	font-size: 1.3rem;
	font-weight: 500;
}
#changeForm ._notify:before {
	position: absolute;
	left: 0.7rem;
	top: 1.1rem;
	
	/*
	margin-right: 0.4rem;
	*/
	
	color: #0083b3;
	
	font-size: 1.7rem;
	
	content: '\f06a';
}