/*
 * ************************************************************* *
 * Name        : Login.css                                       *
 * Theme URI   :                                                 *
 * Description : Login stylesheet.                               *
 * Version     : Version 1                                       *
 * Author      : CreativeMilk                                    *
 * Author URI  : www.creativemilk.net                            *
 * Updated     : 2014-01-06 15:31:34 UTC+02:00                   *
 * Copyright   : (c) 2012 CreativeMilk                           *
 * ************************************************************* *
 */

@import url('../fontawesome/css/font-awesome.min.css');
@import url('checkboxradio.css');
@import url('pwstrength.css');
@import url('showpassword.css');
@import url('nanogress.css');
@import url('powerwizard.css');
@import url('helpers.css');

/*
 * ===============================================================
 * BASIC CSS SELECTORS
 * ===============================================================
 */

html{
	height     : 100%;
	min-height : 100%;
	margin     : 0;
	padding    : 0;
}
body{
	position    : relative;
	overflow-x  : hidden;
	/* height      : 100%; */
	/* min-height  : 100%; */
	margin      : 0;
	padding     : 0;
	font-family : Arial, Helvetica, sans-serif;
	font-size   : 13px;
	line-height : 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: normal;
	min-height: 100vh;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}
a,
a:visited,
a:active,
a:hover,
a:focus{
	text-decoration : underline;
	outline         : none!important;
}
a:hover{
	text-decoration : none;
}
h1{
	font-size : 20px
}
h2{
	font-size : 20px;
}
h3{
	font-size : 16px;
}
h4{
	font-size : 12px;
}
i,
a i{
	width      : 14px;
	font-size  : 14px;
	text-align : center;
}
i{
	cursor : default;
}
a i{
	cursor          : pointer;
	text-decoration : none;
}
a:hover i{
	text-decoration : none;
}
p{
	margin : 0;
}
*{
	outline : 0!important;
}
main{
	display : block;
}

/*
 * ===============================================================
 * CONTAINER
 * ===============================================================
 */

#container-login{
	position : relative;
	height   : 100%;
	width    : 300px;
	margin   : 0 auto;
}
#container-loginmin{
	position : relative;
	height   : 100%;
	/*width    : 400px;*/
	width: 100%;
	margin   : 0 auto;
	min-height: calc(100vh - 40px);
	flex-grow: 1;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

@media screen and (min-width:720px) {
	#container-loginmin {
		align-items: center;
		max-width: 820px;
	}
}
#container-signup{
	position : relative;
	height   : 100%;
	width    : 440px;
	margin   : 0 auto;
}

/*
 * ===============================================================
 * LOGIN
 * ===============================================================
 */

#login-header{
	float  : left;
	height : 30px;
	width  : 100%;
	margin : 0;
}
#login-logo{
	float : left;
	width : auto;
}
#login-header h1{
	float       : left;
	width       : auto;
	margin      : 0;
	line-height : 30px;
}
#login-header h4{
	float       : left;
	width       : auto;
	margin      : 11px 0 0 5px;
	font-size   : 12px;
	font-weight : normal;
}
#login-box {
	position : relative;
	margin: 0 auto;
	border: none!important;
	box-shadow: none!important;
}

#login-box .login-box-inner2 {
	background: #f4f4f4;
	padding: 2em 1em;
}

@media screen and (min-width:720px) {
	#login-box {
		border: 10px solid #f4f4f4!important;
		/*box-shadow: none!important;*/
		padding: 3.5em;
		margin: 3em;
	}

	#login-box .login-box-inner2 {
		padding: 2em;
	}
}


#login-box .input-group-addon {
	background: #003a6f;
	color: #FFF;
	border: none;
}

#login-box .input-group-addon > i {
	color:#FFF;
}

#container-loginmin #form-login label,
#container-loginmin #form-login .btn{
	margin : 0;
}
#login-box h2{
	margin      : 0px 0 5px 0;
	line-height : 20px;
}
.login-box-inner{
	padding : 40px;
}
.login-box-inner > .alert{
	margin : 0 0 40px 0;
}
#container-loginmin .login-box-inner{
	padding : 30px 20px;
}
#login-footer{
	padding    : 10px;
	text-align : center;
	background: #383838;
	color: #FFF;
	position: static;
	z-index: 100;
}
#login-footer small{
	display : block
}
#pwindicator{
	height : 20px;
}
.username{
	height      : 30px;
	margin      : 0 0 10px 0;
	line-height : 30px;
}
.green-check{
	padding     : 5px 0;
	font-weight : bold;
}
.red-check{
	padding     : 5px 0;
	font-weight : bold;
}
#lang{
	float  : right;
	margin : 0 0 0 5px;
}
.underline{
	float   : right;
	padding : 5px 0 5px;
}
.underline:focus{
	text-decoration : underline
}
.underline:hover{
	text-decoration : none;
}
#modal-tou-trigger{
	text-decoration : underline;
}
.login-avatar{
	float  : left;
	height : 70px;
	width  : 70px;
	margin : 0px 0 0 0;
}
.form-text{
	padding : 5px 0;
}
.login-avatar{
	height : 90px;
	width  : 90px;
	margin : 0;
}
.login-avatar img{
	float  : left;
	height : 100%;
	width  : 100%;
}
.login-fields-wrapper{
	float : right;
	width : 188px;
}
.powerwizard li{
	width : 33.33333333%;
}
.powerwizard-content{
	border : none!important
}

/* SSLシール
--------------------------------*/
.sslSeal {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: .85em;
	margin: 0 auto;
	background: #e0f0ff;
	border-radius: 0;
	box-shadow: none;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.sslSeal_img {
	margin: .7em;
	margin-right: .75em;
}

.sslSeal_img > img {

height: auto;

/* transform: scale(.7); */

width: 100px;
}

.sslSeal_lead {
	word-wrap: break-word;
	text-align: left;
	font-size: .95em;
	color: #003a70;
	line-height: 1.8;
	padding-top: 0;
	margin-right: .5em;
}

@media screen and (min-width:720px) {
	.sslSeal {
		display: inline-flex;
		position: absolute;
		padding: 0 .25em 0;
		top: 0;
		right: 0;
	}
}