/**
 * 	各機能ごとのclass指定した要素のスタイルを定義します。
 */

.message_error {
	font-weight: bold;
	color: red;
	margin: 5px;
}

.message_info {
	font-weight: bold;
	color: #0078D7;
	margin: 5px;
}

.notice {
	font-weight: bold;
	color: red;
}

.note * {
	margin: 5px 0;
}
.note {
	margin: 5px 0;
}

div.boxTitle {
	margin-top: 10px;
	padding: 7px 15px;
	border-radius: 8px 8px 0 0;
	background: #dedede;
	box-shadow: 3px 3px 3px -1px #ededed
}
div.searchForm {
	padding: 10px 13px;
	border-radius: 0 0 8px 8px;
	border: 2px solid #dedede;
	box-shadow: 2px 2px 3px #ebebeb;
}
ul.searchCond {
	display: flex;
	flex-wrap: wrap;
}
ul.searchCond li {
	padding: 5px;
	align-self: center;
	width: 350px;
}
ul.searchCond li.range {
	width: 700px;
}
ul.searchCond li label {
	display: inline-block;
	width: 9em;
	text-align: right;
	padding-right: 10px;
}
ul.searchCond li input {
	display: inline-block;
}
ul.searchCond li select {
	margin-left: -4px;
}

ul.searchCondInline {
	display: flex;
	flex-wrap: wrap;
}
ul.searchCondInline li {
	padding: 5px;
	align-self: center;
	width: 300px;
}
ul.searchCondInline li.range {
	width: 700px;
}
ul.searchCondInline li label {
	display: inline-block;
	width: 7em;
	text-align: right;
	padding-right: 10px;
}
ul.searchCondInline li input {
	display: inline-block;
}
ul.searchCondInline li select {
}

/** 入力フォーム */
div.inputForm {
	margin-top: 20px;
}
table.inputForm {
	width: 100%;
	border-top: 1px #cccccc solid;
	border-right: 1px #cccccc solid;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.05);
	border-collapse: separate;
	border-radius: 6px;
}
table.inputForm tr {
	border-bottom: 1px #cccccc solid;
}
table.inputForm th {
	width: 15em;
	padding: 10px;
	background-color: #E6E8EB;
	border-left: 1px #cccccc solid;
	background-clip: padding-box;
}

table.inputForm th.o365 {
	background-color: rgba(220,60,0, 0.1);
}
table.inputForm th.salesforce {
	background-color: rgba(0,146,218, 0.1);
}

table.inputForm td {
	padding: 10px;
}

table.inputForm td.innerTable {
	padding: 0;
}
table.inputForm td.innerTable table {
	width: 100%;
}
td.innerTable table tr, td.innerTable table td {
	border: none;
}
table.inputForm td.innerTable table tr:not(:last-child) {
	border-bottom: 1px #cccccc solid;
}
table.inputForm td.innerTable table td:first-child {
	width: 150px;
}

table.inputForm td.userPermitService table td:first-child {
	width: 40px;
}
table.inputForm td.userPermitService table td:nth-child(2) {
	width: 120px;
}

.tenantService .label {
	width: 6em;
}
.required:after {
	position: absolute;
	right: 10px;
	content: url(../img/icon-required.gif);
}

/* 館並びチェックボックス */
.verticalCheckboxBox {
	display: flex;
	flex-direction: column;
}
.verticalCheckboxBox label {
	display: flex;
	align-items: center;
	margin-bottom: 2px;
}

/* 入力項目：メールエイリアス */
.mailAliasInput {
	display: flex;
	align-items: flex-start;
}
.mailAliasInput div {
	display: flex;
	flex-direction: column;
}
.mailAliasInput div input {
	margin-bottom: 3px;
}
button#addMailAlias {
	margin-left: 5px;
}

/* 入力項目：メールエイリアス */
.roleInput {
	display: flex;
	align-items: flex-start;
}
.roleInput div {
	display: flex;
	flex-direction: column;
}
.roleInput div select {
	margin-bottom: 3px;
}
button#addRole {
	margin-left: 5px;
}

/* 入力項目：GSuiteドメイン */
.gDomainInput {
	display: flex;
	align-items: flex-start;
}
.gDomainInput div {
	display: flex;
	flex-direction: column;
}
.gDomainInput div input {
	margin-bottom: 3px;
}
button#addGDomain {
	margin-left: 5px;
}

/* 使用可能文字*/
.policyAvailableChars div {
	display: flex;
	flex-direction: column;
	margin-bottom: 0.6em;
}
.policyAvailableChars div span {
	display: flex;
}
.policyAvailableChars div span.withCheck {
	margin-left: 2em;
	margin-top: 0.4em;
}

input[name="spnum"] {
	margin-left: 10px;
}

input.withNote {
	margin-right: 10px;
}

input.narrow {
	width: 100px !important;
}
input.wide {
	width: 250px !important;
}

input.moreWide {
	width: 500px !important;
}

.separateInput {
	display: flex;
}

.separateInput div {
	margin-right: 15px;
}

/* 左右移動リストボックス */
.multiSelectBox {
	display: flex;
}
.multiSelectBox div {
	display: flex;
	flex-direction: column;
}

.verticalButtonBox {
	align-self: center;
	display: flex;
	flex-direction: column;
}
.verticalButtonBox button {
	margin: 2px 5px;
}

.selectAuthMethod > div > div {
	display: flex;
	flex-direction: row;
	margin-top: 3px;
	justify-content: center;
}

/** 一覧表示 **/
div.list {
	margin-top: 10px;
}

div.selectTenant {
	width: 55%;
	margin: auto;
}
#selectTenant_filter {
	margin-bottom: 5px;
}
#selectTenant_filter:before {
	content: '\f0b0';
	padding-right: 5px;
	font-family: FontAwesome;
	color: #b8bcbf;
	font-size: 1.3em;
}

.list-header {
	display: flex;
	margin-bottom: 5px;
	align-items: center;
}
.list-header div.list-pager {
	margin-left: auto;
}
.list-header div.moveToAddForm {
	margin-left: 10px;
}
.list-header div.moveToCsvAddForm {
	margin-left: 10px;
}
.list-header div.fixOrder {
	margin-left: 10px;
}
.list-header .all-count {
	margin-right: 5px;
}

table.list {
	width: 100%;
	border-collapse: separate;
	text-align: left;
	line-height: 1.0;
	margin: 2px 0;
	box-shadow: 2px 2px 3px #ebebeb;
	border-radius: 6px;
	border-top: 1px solid #ccc;
	border-right: 2px solid #dedede;
}
table.list th {
	padding: 10px;
	font-weight: bold;
	vertical-align: middle;
	background-color: #dedede;
}

table.list td {
	padding: 10px;
	vertical-align: middle;
}
table.list td {
	padding: 10px;
	vertical-align: middle;
}
table.list tr:nth-child(even) {
	background-color: #f7f7f7;
}
table thead th, table tbody th, table tbody td {
	border-bottom: 1px solid #ccc;
}
table thead th, table tbody td {
	border-left: 1px solid #ccc;
}
table thead tr:first-child th:first-child {
	border-radius: 6px 0 0 0;
}
table thead tr:first-child th:last-child {
	border-radius: 0 6px 0 0;
}
table tbody tr:first-child th:first-child {
	border-radius: 6px 0 0 0;
}
table tbody tr:last-child th:first-child {
	border-radius: 0 0 0 6px;
}
table tbody tr:last-child td:first-child {
	border-radius: 0 0 0 6px;
}
table tbody tr:last-child td:last-child {
	border-radius: 0 0 6px 0;
}

.list-footer {
	display: flex;
}

.list-footer .list_delete {
	margin-right: auto;
}

.pager_back:before {
	content: '\f04a';
	padding-right: 5px;
	font-family: FontAwesome;
}
.pager_no {
	margin: 0 15px;
}
.pager_next:after {
	content: '\f04e';
	padding-left: 5px;
	font-family: FontAwesome;
}

/* 一覧表示：幅とalign */
th.selectCheck {
	width: 3.5em;
}
th.no {
	width: 3em;
}
th.action {
	width: 6em;
}
th.userStatus {
	width: 6.5em;
}
th.lockout {
	width: 8em;
}

td.selectCheck {
	text-align: center;
}
td.no {
	text-align: right;
}
td.action {
	text-align: center;
}

.timeConfig {
	display: flex;
}
.timeConfig input {
	display: none;
}

.timeConfig label {
	padding: 5px;
	width: 45px;
	background: #e6e8eb;
	border: 1px solid #b8bcbf;
	border-left: none;
	text-align: center;
	transition: .2s;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	box-shadow: 2px 3px 0.5px rgba(160,160,160,1);
}
.timeConfig label:first-of-type {
	border-left: 1px solid #b8bcbf;
	border-radius: 0.5em 0 0 0.5em;
}
.timeConfig label:last-of-type {
	border-radius: 0 0.5em 0.5em 0;
}
.timeConfig label.selected {
	background-color: #6198be;
	box-shadow: 1px 1px 0.4px rgba(97,152,190,1);
	color: #fff;
}

#weeklySchedule {
	display: flex;
	flex-wrap: wrap;
	draggable: false;
}

#weeklySchedule * {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

#weeklySchedule div {
}
.wsWeekColumn {
	width: 5%;
}
.wsTimeColumn {
	width: 94%;
}

#wsWeekLabel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#wsWeekLabel label:first-child {
}
#wsWeekLabel label {
	height: 40px;
	line-height: 40px;
	width: 40px;
	text-align: center;
	background-color: #f0f1f2;
	border-bottom: 1.4px solid #b8bcbf;
}
#wsWeekLabel label.select:before {
	font-family: 'FontAwesome';
	content: "\f046";
	margin-right: 1px;
	color: #333333;
}
#wsWeekLabel label.noselect:before {
	font-family: 'FontAwesome';
	content: "\f096";
	margin-right: 1px;
	color: #333333;
}
#wsWeekLabel > label.select {
	background-color: rgba(184,29,44,0.2);
}
#wsWeekLabel > label.noselect {
	background-color: #a0a0a0;
}

#wsTimeLabel {
	display: flex;
}
#wsTimeLabel div {
	width: calc(100%/24);
	height: 2.5em;
	line-height: 2.5em;
	text-align: center;
	background-color: #f0f1f2;
	border-right: 1.4px solid #ffffff;
}

#wsMain {
	width: 94%;
}

/* 曜日選択レイヤー(下) */
#wsWeekLayer {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 0;
}
#wsWeekLayer > div {
	height: 40px;
	width: 100%;
}
#wsWeekLayer > div.select {
	border-bottom: 1.4px solid #b8bcbf;
}
#wsWeekLayer > div.noselect {
	border-bottom: 1.4px solid #b8bcbf;
	background-color: #a0a0a0;
}
#wsWeekLabel input {
	display: none;
}

/* 時間選択レイヤー(上) */
#wsHourLayer {
	position: absolute;
	top: 0px;
	display: flex;
	height: 100% !important;
}
#wsHourLayer input {
	display: none;
}
#wsHourLayer label {
	height: 100%;
	width: calc(100%/48);
	background-color: #a0a0a0;
	opacity: 0.4;
	z-index: 100;
}
#wsHourLayer label:nth-child(even) {
	border-right: 1.4px solid #b8bcbf;
}
#wsHourLayer label:nth-child(odd) {
	border-right: 1.4px dashed #b8bcbf;
}
#wsHourLayer label.selected {
	opacity: 0.2;
	background-color: #B81D2C;
}
#wsHourLayer label:hover {
	opacity: 0.3;
}

#allowTime .inputForm th {
	width: 7em;
}
.ssoServer > div {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}
.ssoServer > div > input[type="text"], .ssoServer > div > select {
	width: 250px;
	margin-right: 8px;
}

.list .status {
	text-align: center;
}
.list .priority {
	text-align: center;
}
.list .userStatus {
	text-align: center;
}
.list .lockout {
	text-align: center;
}
.list .keyLength {
	text-align: center;
}
.list .download {
	text-align: center;
}
.list .userNum {
	text-align: center;
}

.draggable td:hover {
	cursor: pointer;
}

/** ツールチップの色 */
#powerTip {
	background-color: #d3d3d3;
	color: #000000;
}
#powerTip.ne:before {
	border-top: 10px solid #d3d3d3;
}

/* === ボタンを表示するエリア ============================== */
.switchArea {
	line-height: 30px; /* 1行の高さ          */
	letter-spacing: 0; /* 文字間             */
	text-align: center; /* 文字位置は中央     */
	font-size: 12px; /* 文字サイズ         */
	position: relative; /* 親要素が基点       */
	margin: auto; /* 中央寄せ           */
	width: 34px; /* ボタンの横幅       */
	background: #fff; /* デフォルト背景色   */
}

/* === チェックボックス ==================================== */
.switchArea input[type="checkbox"] {
	display: none; /* チェックボックス非表示 */
}

/* === チェックボックスのラベル（標準） ==================== */
.switchArea label {
	display: block; /* ボックス要素に変更 */
	box-sizing: border-box; /* 枠線を含んだサイズ */
	height: 14px; /* ボタンの高さ       */
	border: 2px solid #999999; /* 未選択タブのの枠線 */
	border-radius: 15px; /* 角丸               */
	background: #999999;
}

/* === チェックボックスのラベル（ONのとき） ================ */
.switchArea input[type="checkbox"]:checked ~
label {
	border-color: #82b1ff; /* 選択タブの枠線     */
	background: #82b1ff;
}

/* === 表示する文字（標準） ================================ */
.switchArea label span:after {
}

/* === 表示する文字（ONのとき） ============================ */
.switchArea  input[type="checkbox"]:checked ~
label span:after {
	padding: 0 18px 0 0; /* 表示する位置       */
}

/* === 丸部分のSTYLE（標準） =============================== */
.switchArea .swImg {
	position: absolute; /* 親要素からの相対位置*/
	width: 16px; /* 丸の横幅           */
	height: 16px; /* 丸の高さ           */
	background: #E6E8EB; /* カーソルタブの背景 */
	top: -1px; /* 親要素からの位置   */
	left: -1px;
	border-radius: 11px; /* 角丸               */
	transition: .2s; /* 滑らか変化         */
}

/* === 丸部分のSTYLE（ONのとき） =========================== */
.switchArea input[type="checkbox"]:checked ~
.swImg {
	transform: translateX(22px); /* 丸も右へ移動       */
	background: #4285f4; /* カーソルタブの背景 */
}

/*.cmn-toggle {
 position: absolute;
 margin-left: -9999px;
 visibility: hidden;
 }
 .cmn-toggle + label {
 display: block;
 position: relative;
 cursor: pointer;
 outline: none;
 user-select: none;
 }
 input.cmn-toggle-round-flat + label {
 padding: 2px;
 width: 60px;
 height: 30px;
 line-height: 30px;
 background-color: #dddddd;
 border-radius: 30px;
 transition: background 0.4s;
 }
 input.cmn-toggle-round-flat + label:before, input.cmn-toggle-round-flat + label:after {
 display: block;
 position: absolute;
 content: "";
 }
 input.cmn-toggle-round-flat + label:before {
 top: 2px;
 left: 2px;
 bottom: 2px;
 right: 2px;
 background-color: #fff;
 border-radius: 15px;
 transition: background 0.4s;
 }
 input.cmn-toggle-round-flat + label:after {
 top: 4px;
 left: 4px;
 bottom: 4px;
 width: 25px;
 background-color: #dddddd;
 border-radius: 15px;
 transition: margin 0.4s, background 0.4s;
 text-indent: 28px;
 content: "OFF";
 }
 input.cmn-toggle-round-flat:checked + label {
 background-color: #8ce196;
 }
 input.cmn-toggle-round-flat:checked + label:after {
 margin-left: 30px;
 background-color: #8ce196;
 text-indent: -25px;
 content: "ON";
 }*/