@charset "UTF-8";
/* "@(#) $Id: login_style.css,v 1.2 2020/12/14 08:42:20 vic25 Exp $" */
/* ========================================================================== */
/* ログイン画面で使用するスタイルシート定義 */
/* ========================================================================== */
div.login-page {
	display: flex;
	flex-direction: column;
	height:100vh;
}

div.login-change-lang-area {
	height:30px;
	width:100%;
	padding-right:10px;
	display: flex;
	align-items:center;
	justify-content:flex-end;
}

div.login-change-lang-area > span {
	padding-right:10px;
}

div.login-main-area {
	align-items:center;
	display:flex;
	height:calc(100vh - 30px);
	justify-content:center;
}

div.login-image {
	max-width:400px;
	max-height:400px;
	margin-right:50px;
}

div.login-image > img {
	max-width:400px;
	max-height:400px;
}

div.login-box {
	width:400px;
}

div.login-logo {
	height:50px;
	padding:10px;
	text-align:center;
	color:#3260A1;
}

div.login-body {
	width:100%;
	background-color:#ffffff;
	padding-top:20px;
	padding-bottom:20px;
	padding-left:30px;
	padding-right:30px;
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content:center;
	box-shadow: 1px 1px 2px #cccccc;
}

div.login-body > div {
	width:100%;
	padding-top:10px;
	padding-bottom:10px;
	display:flex;
	align-items:center;
	justify-content:center;
}

div.login-button-area > button:first-child {
	margin-right:10px;
}

.login-id {
	width:100%;
	ime-mode:disabled;
}

.login-password {
	width:100%;
	ime-mode:disabled;
}

div.login-comment {
	width:100%;
	max-height:100px;
	overflow:auto;
}

div.login-open-faq {
	width:100%;
	display:flex;
	align-items:flex-start;
	justify-content:flex-end;
}

div.login-open-faq > div {
	width:50%;
	height:40px;
	color:#ffffff;
	background-color:#3260A1;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	box-shadow: 1px 1px 2px #cccccc;
	border-radius:0 0 5px 5px;
}

div.login-open-faq > div:hover {
	color:#ffffff;
	background-color:#234370;
}

/************************************/
/* 二要素認証トークン入力ダイアログ用	*/
/************************************/
div.overlay-opacity-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 810;
}
div.mfa-token-input-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: gray;
	opacity: 0.9;
	z-index: 811;
}

div.mfa-token-input-dialog {
	position: relative;
	z-index: 820;
	width: 600px;
	min-height: 300px;
	background-color: #EDF1FA;
	overflow-y: auto;
}

div.mfa-token-input-dialog-body {
	display:flex;
	margin-top:40px;
	margin-left:80px;
	margin-right:80px;
	margin-bottom:40px;
	overflow-y:auto;
	border-radius:5px;
	background-color:#ffffff;
}

div.mfa-token-input-dialog-body > div {
	width:100%;
}

div.mfa-token-input-dialog-body > div > div {
	padding:10px;
}

div.mfa-token-input-dialog-body div.dialog-main-area {
	background-color:white;
	border-radius:5px;
}

div.mfa-token-input-message-area {
	display: flex;
	height: 70px;
	border-radius: 5px;
	align-items: center;
	background-color:rgba(50,96,161,.274);
}

div.mfa-token-input-dialog-text {
	display: flex;
	justify-content:center !important;
	flex-grow:1;
}

div.mfa-token-input-dialog-button {
	position:relative;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	min-width:130px;
	min-height:35px;
}
div.mfa-token-input-dialog-link {
	display:flex;
	justify-content:center;
}