@import url("cmn.css");

/**********************************************
******************USER START******************
**********************************************/

/*--------------申請画面 START--------------*/
.exportappAreaBox,
.userAreaBox,
.historyAreaBox,
.passAreaBox {
	margin-bottom: 1em;
}
.exportappAreaBox dt,
.userAreaBox dt,
.passAreaBox dt,
.userExportappDetailAreaW dt {
	margin-bottom: 0.3em;
	color:#ec6309;
}
.adminPage .exportappAreaBox dt,
.adminPage .userAreaBox dt,
.adminPage .passAreaBox dt,
.adminPage .userExportappDetailAreaW dt {
	color:#3e6c7f;
}
.userAreaBox dd + dd {
	padding-top: 1em;
}
.dateFrom,
.dateTo {
	width: calc(50% - 1em);
	border:1px solid #ccc;
	padding:0.6em 0.4em;
}
.inner {
	margin-bottom: 2em;
}
.inner p {
	font-size: 13.5px;
	line-height: 1.4;
}
.strictList li {
	margin-bottom: 1em;
	line-height: 1.4;
	font-size: 90%;
}
.typeCheckboxLabel {
	border: 1px solid #fff;
	border-bottom: 1px solid #ec6309;
	display:block;
	padding: 1em 1em 1em 3em;
	position: relative;
	cursor: pointer;
}
.typeCheckboxLabel::before,
.typeCheckboxLabel::after {
	position: absolute;
	content: "";
	display: block;
}
.typeCheckboxLabel::before {
	top: calc(50% - 7px);
	left: 14px;
	width: 14px;
	height: 14px;
	border: 1px solid #ec6309;
	background-color: #fff;
}
.typeCheckboxLabel::after {
	top: calc(50% - 9px);
	width: 14px;
	height: 8px;
	transform: rotate(-45deg);
	opacity: 0;
	left: 17px;
}
.typeCheckbox {
	display: none;
}
.typeCheckbox:checked + .typeCheckboxLabel {
	border: 1px solid #ec6309;
	background-color: #fcf4f0;
	color:#575757;
}
.typeCheckbox:checked + .typeCheckboxLabel::before {
	border: 1px solid #ec6309;
}
.typeCheckbox:checked + .typeCheckboxLabel::after {
	border-bottom: 3px solid #ec6309;
	border-left: 3px solid #ec6309;
	opacity: 1;
}
.adminPage .typeCheckbox:checked + .typeCheckboxLabel {
	border: 1px solid #3e6c7f;
	background-color: #fff;
	color:#575757;
}
.adminPage .typeCheckbox:checked + .typeCheckboxLabel::before {
	border: 1px solid #3e6c7f;
}
.adminPage .typeCheckbox:checked + .typeCheckboxLabel::after {
	border-bottom: 3px solid #3e6c7f;
	border-left: 3px solid #3e6c7f;
	opacity: 1;
}
.confirmArea,
.detailArea,
.historyArea {
	background-color: #fbf9f8;
	padding:1.4em 1em;
	line-height: 1.4;
	margin-bottom: 2em;
}
.detailArea {
	position: relative;
}
.confirmArea dl,
.detailArea dl,
.historyArea dl,
.userExportappDetailAreaW dl {
	border-bottom: 1px solid #ccc;
}
.confirmAreaList li {
	font-size: 14px;
	margin-bottom: 1em;
	padding-bottom: 0.4em;
	padding-left: 1.2em;
	position: relative;
	border-bottom: 1px solid #ccc;
}
.confirmAreaList li::before {
	border-bottom: 3px solid #ec6309;
	border-left: 3px solid #ec6309;
	position: absolute;
	content: "";
	display: block;
	width: 10px;
	height: 6px;
	transform: rotate(-45deg);
	top: calc(50% - 9px);
	left: -6px;
}
.detailTextArea {
	background-color: #fbf9f8;
	padding:1.5em 1em;
	line-height: 1.4;
	margin-bottom: 2em;
}
/*--------------申請履歴 START--------------*/
.historyAreaBox {
	display: flex;
}
.historyAreaBox dt {
	width: 80%;
	display: block;
}
.historyAreaBox dt a,
.historyAreaBox dt a:visited {
	color: #ec6309;
}
.historyAreaBox dd {
	width: 20%;
	display: block;
	text-align: right;
}
/*過去履歴詳細*/
.userExportappDetailAreaW {
	padding: 1em;
	background-color: #fbf9f8;
}
.userExportappDetailList {
	line-height: 1.4;
	list-style-type: disc;
	margin-left: 1em;
}
.userExportappDetailAreaW > h3:nth-child(n + 2) {
	margin-top: 1em;
}
/*マシン管理*/
.machineAreaBox {
	width: 100%;
	display: flex;
	margin-bottom: 1em;
	border-bottom: 1px solid #ccc;
}
.adminMachineAreaBox {
	width: 100%;
	display: flex;
	border-bottom: 1px solid #ccc;
}

.machineAreaBox dt,
.adminMachineAreaBox dt,
.machineAreaPlusBox dt{
	width: 90%;
}
.machineAreaBox dd,
.adminMachineAreaBox dd,
.machineAreaPlusBox dd {
	width: 10%;
	text-align: center;
}
.machineAreaBox dd span,
.adminMachineAreaBox dd span,
.machineAreaPlusBox dd span {
	font-size: 120%;
	color: #ec6309;
}
.adminPage .machineAreaBox dd span,
.adminPage .adminMachineAreaBox dd span,
.adminPage .machineAreaPlusBox dd span {
	color: #3e6c7f;
}
.adminDeleteBtn {
	display: inline-block;
	padding: 0 1em;
	cursor: pointer;
	margin-top: 0.6em;
}
.adminPlusBtn {
	display: inline-block;
	padding: 0 1em;
	cursor: pointer;
	margin-top: 0.3em;
}
.deleteBtn,
.plusBtn {
	display: inline-block;
	padding: 0 1em;
	cursor: pointer;
}
dl.machineAreaPlusBox {
	width: 100%;
	display: flex;
	margin-bottom: 1em;
	border-bottom: none;
}
#machine-input1 {
	width: 100%;
	border:1px solid #ccc;
	padding:0.6em 0.4em;
}
/*--------------アカウント情報 START--------------*/
.userMenulArea {
}
.userMenu li {
	line-height: 3;
	border-bottom: 1px solid #ec6309;
}
.userMenu li a {
	position: relative;
	display: block;
	padding: 0 0.5em;
	background-color: #fff;
}
.userMenu li a ,
.userMenu li a:visited {
	text-decoration: none;
	color: #ec6309;
}
.userMenu li a:hover {
	opacity: 0.7;
}
.userMenu li a::after {
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f101";
	display: block;
	position: absolute;
	top: 0.2em;
	right: 1em;
}
.userMenu li a i {
	padding-right: 1em;
}
/**********************************************
******************ADMIN START******************
**********************************************/

/*--------------ユーザー一覧 START--------------*/
.adminStatusListArea {
	display: flex;
}
.adminStatusList {
	width: 50%;
	display: flex;
	line-height: 1.4;
}
.usersList li,
.machinesList li {
	border-bottom: 1px solid #ebebeb;
}
.usersList li a {
	display: block;
	padding: 0.8em 0.8em 0.8em 1.4em;
	text-decoration: none;
	position: relative;
	color: #737373;
}
.machinesList li a {
	display: block;
	padding: 0.8em 0.8em 0.8em 1.4em;
	text-decoration: none;
	position: relative;
	color: #737373;
}
.usersList li a::after {
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content:"\f101" ;
	display: block;
	position: absolute;
	top: 0.8em;
	right: 1em;
}
.usersList li a:hover,
.machinesList li a:hover {
	opacity: 0.7;
	color: #737373;
	background-color: #ebebeb;
}
.usersList .adminUser::before,
.machinesList .adminUser::before {
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content:"\f005" ;
	display: block;
	position: absolute;
	left: 0;
	color: #3e6c7f;
}
/*AdminUserEdit*/
.userEditBtnW {
	position: relative;
}
.userEditBtnW .userEditBtn {
	display: block;
	color: #737373;
	text-decoration: none;
	position: relative;
}
.userEditBtnW .userEditBtn > i {
	color: #ec6309;
	font-size: 110%;
	position: relative;
	left: 1em;
	top: -0.15em;
}
.adminPage .userEditBtnW .userEditBtn > i {
	color: #3e6c7f;
}
.authorityRadio,
.statusRadio {
	display: flex;
}
.authorityRadio input,
.statusRadio input {
	display: none;
}
.authorityRadio label,
.statusRadio label {
	width: 50%;
	display: block;
	text-align: center;
	padding: 1em 0.5em;
	cursor: pointer;
	position: relative;
	background-color: #dbdbdb;
	border: 1px solid #dbdbdb;
	color:#3e6c7f;
}
.authorityRadio label.labelAuthority01,
.statusRadio label.status01 {
	border-radius: 4px 0 0 4px;
	border-right: none;
}
.authorityRadio label.labelAuthority02,
.statusRadio label.status02 {
	border-radius: 0 4px 4px 0;
	border-left: none;
}
.authorityRadio label.typeCheckboxLabel::before,
.statusRadio label.typeCheckboxLabel::before {
	border:1px solid #ccc;
}
#authority01:checked + label,
#status01:checked + label,
#authority02:checked + label,
#status02:checked + label {
	background-color: #fbf9f8;
	border: 1px solid #ec6309;
	color: #ec6309;
	position: relative;
}
.adminPage #authority01:checked + label,
.adminPage #status01:checked + label,
.adminPage #authority02:checked + label,
.adminPage #status02:checked + label {
	background-color: #fff;
	border: 1px solid #3e6c7f;
	color: #3e6c7f;
	position: relative;
}
.userAnused {
	background-color: #dbdbdb;
}
/*--------------申請一覧 START--------------*/
/*AdminHistory*/
.adminHistoryArea {
	margin-bottom: 4em;
}
.adminHistoryTable,
.adminHistoryApproved {
	width: 100%;
	border-bottom: 1px solid #ccc;
}
.historyTableHeadArea,
.historyTableArea {
	display: flex;
	width: 100%;
}
.historyTableLeft {
	width: 70%;
	display: flex;
}
.historyTableBox1,
.historyTableBox2,
.historyTableBox3 {
	background-color: #fff;
	border: 1px solid #ccc;
	border-bottom: none;
}
.historyTableBox1,
.historyTableBox2 {
	display: block;
	width: 50%;
	border-right:none;
	padding: 1em;
}
.historyTableBox3 {
	display: block;
	width: 30%;
	padding: 0.4em 0.8em;
}
.historyTableHeadArea .historyTableBox1,
.historyTableHeadArea .historyTableBox2,
.historyTableHeadArea .historyTableBox3 {
	background-color: #fbf9f8;
	font-weight: bold;
	text-align: center;
	padding: 1em;
}
.lavelAuthorizer {
	display: inline-block;
	border-radius: 12px;
	border:1px solid #3e6c7f;
	padding: 0.2em 0.4em;
	text-align: center;
	color: #3e6c7f;
}
.popUpBtn {
	color: #ec6309;
	text-decoration: underline;
}
.adminPage .popUpBtn {
	color: #3e6c7f;
}
.approvalBox {
	display: flex;
}
.approvalBox input,
.adminStatusList input {
	display: none;
}
.approvalLevelOn,
.approvalLevelNone,
.adminStatusLabelOff,
.adminStatusLabelOn {
	width: 50%;
	display: inline-block;
	padding:0.4em 0 0.5em;
	text-align: center;
	border:1px solid #dbdbdb;
	background-color: #dbdbdb;
	color: #3e6c7f;
	cursor: pointer;
}
.approvalLevelOn {
	border-right:1px solid #fff;
}
.approvalLevelNone {
	border-left: 1px solid #fff;
}
.approvalRadioOn:checked + .approvalLevelOn,
.approvalRadioNone:checked + .approvalLevelNone,
.adminStatusRadioOn:checked + .adminStatusLabelOn,
.adminStatusRadioOff:checked + .adminStatusLabelOff {
	border:1px solid #3e6c7f;
	background-color: #fff;
	color: #3e6c7f;
	font-weight: bold;
}
p.popUpBtn,
.historyAreaBox p.popUpBtn {
	cursor: pointer;
	font-size: 15px;
}
.popUpDetailArea {
	background-color: #00000060;
	width: 100%;
	height:100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
	display: none;
}
.popUpDetail {
	padding: 2em 4%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width: 50%;
	background-color: #fbf9f8;
	border: 1px solid #ebebeb;
}
.popUpDetail p + p {
	margin-top: 0.4em;
}
.popUpDetailClose {
	width: 2em;
	height: 2em;
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	cursor: pointer;
}
.popUpDetailClose::after,
.popUpDetailClose::before {
	content:" ";
	display: block;
	width: 2em;
	border-top: 4px solid #737373;
	position: absolute;
	top: calc(50% - 2px);
}
.popUpDetailClose::after {
	transform: rotate(-45deg);
}
.popUpDetailClose::before {
	transform: rotate(45deg);
}

/**********************************************
*******************SP START********************
**********************************************/

@media screen and (max-width:799px){
	.dateFrom,
	.dateTo {
		width: calc(50% - 1.5em);
		height: 2em;
		-webkit-appearance: none;
		background: transparent;
		color: #737373;
		text-align: left;
	}
	.adminHistoryTable,
	.adminHistoryApproved {
		border-bottom: none;
	}
	.historyTableHeadArea {
		font-size: 90%;
		flex-wrap:wrap;
	}
	.historyTableLeft {
		display: flex;
		flex-wrap:wrap;
		width: 60%;
	}
	.historyTableHeadArea,
	.historyTableArea {
		border-bottom: 4px double #ccc;
	}
	.historyTableBox1,
	.historyTableBox2,
	.historyTableBox3 {
		padding: 0.4em;
	}
	.historyTableBox1,
	.historyTableBox2 {
		width: 100%;
		display: block;
	}
	.historyTableBox3 {
		position: relative;
		width: 40%;
	}
	.historyTableArea .historyTableBox1,
	.historyTableArea .historyTableBox3 {
		border-top: none;
	}
	.historyTableArea:last-of-type .historyTableBox2 {
		border-bottom: none;
	}
	.historyTableArea:last-of-type .historyTableBox1,
	.historyTableArea:last-of-type .historyTableBox3 {
		border-bottom: none;
		border-top: none;
	}
	.historyTableBox3 .historyTableTitle,
	.historyTableBox3 .approvalBox,
	.historyTableBox3 .lavelAuthorizer {
		position: absolute;
		width: 90%;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
	}
	.popUpDetail {
		width: 90%;
	}
	.popUpDetailArea h2 {
		margin-bottom: 0;
	}
	.adminStatusListArea {
		display: block;
		width: 100%;
	}
	.adminStatusList {
		width: 100%;
	}
}

.logout {
	line-height: 0px;
	font-size: 15px;
	position: absolute;
	right: 10px;
	top: 20px
	;color: #ec6309;
}