@charset "utf-8";
/* common */

#edit_mode_top {width: 100%; height: 4px; position: fixed; top: 0; left: 0; z-index: 99; background: linear-gradient(90deg, rgb(22, 135, 237), rgb(20, 55, 90));}
#edit_mode_right {width: 4px; height: 100%; position: fixed; top: 0; right: 0; z-index: 99; background: linear-gradient(90deg, rgb(20, 55, 90), rgb(22, 135, 237));}
#edit_mode_bottom {width: 100%; height: 4px; position: fixed; bottom: 0; left: 0; z-index: 99; background: linear-gradient(90deg, rgb(20, 55, 90), rgb(22, 135, 237));}
#edit_mode_left {width: 4px; height: 100%; position: fixed; top: 0; left: 0; z-index: 99; background: linear-gradient(90deg,rgb(22, 135, 237), rgb(20, 55, 90));}

/*	section
------------------------------------------------------------ */
section { width: 100%; padding: 10px 40px; box-sizing: border-box;}
section hgroup { width: 100%; height: 60px; display: flex; justify-content: space-between; align-items: center;}
section hgroup h3 { font-size: 180%;}
section hgroup #status { display: flex; align-items: center;}

section hgroup #status dl { display: flex; font-size: 90%;}
section hgroup #status dl dt { }
section hgroup #status dl dt::after{
 content: "：";
}

section hgroup #status dl dd { margin-right: 16px;}
section hgroup #status dl dd:last-child { margin-right: 0;}

section hgroup #status dl dd::after{
 content: "|";
	margin-left: 16px;
}
section hgroup #status dl dd:last-child::after{
 content: "";
	margin-left: 16px;
}

section hgroup #status ul { display: flex;}
section hgroup #status ul li { margin-right: 10px;}
section hgroup #status ul li:last-child { margin-right: 0;}

/*	menu
------------------------------------------------------------ */
section .section_inner_flex { width: 100%; display: flex; justify-content: space-between;}
section .section_inner_flex .menu { width: 19%; background: #fff; border-radius: 10px; padding: 20px; box-sizing: border-box; text-align: center;}

section .section_inner { width: 100%; background: #fff; border-radius: 20px; padding: 20px; box-sizing: border-box;}

/*	base
------------------------------------------------------------ */
#base {
	width: 100%;
	height: calc(100vh - 100px);
	background: #fff;
	background-image: url("../tools/grid.svg");
	background-size: 16px 16px;
	border-radius: 20px;
	box-sizing: border-box;
}


/*	bom reform
------------------------------------------------------------ */
.bom_reform { width: 100%; display: flex; justify-content: space-between;}
.bom_reform .table_box { width: 24%;}

/* btn
---------------------------------------------- */
.btn_box { display: flex; justify-content: flex-end; }

.btn_cancel{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background:rgba(255,255,255,0.8);
	background-image: url("../tools/cancel.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40px;
	margin-right: 10px;
}
.btn_save {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background:rgba(255,255,255,0.8);
	background-image: url("../tools/save.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40px;
}



/*	table
------------------------------------------------------------ */
table.common {
	width: 100%;
	border-spacing: 0;
	border-collapse: separate;
	border-radius: 20px;
	border: 1px solid #dcdcdc;
	box-sizing: border-box;
	margin-bottom: 20px;
}

table.common tr:first-child th:first-child { border-radius: 20px 0 0 0;}
table.common tr:first-child td:last-child { border-radius: 0 20px 0 0;}
table.common tr:last-child th:first-child { border-radius: 0 0 0 20px;}
table.common tr:last-child td:last-child { border-radius: 0 0 20px 0;}

table.common tr th {border-bottom: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; padding: 8px 16px; vertical-align: top; background:rgba(255,255,255,0.9); white-space: nowrap; width: 20%;}
table.common tr td {border-bottom: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; padding: 8px 16px; vertical-align: top; background: #fff;}
table.common tr td.gray { color: #999;}
table.common tr:last-child th:first-child { border-bottom: none;}
table.common tr:last-child td:last-child { border-bottom: none;}
table.common tr th:last-child { border-right: none;}
table.common tr td:last-child { border-right: none;}

table.common tr:last-child td:nth-child(2){ border-bottom: none; border-right: none;}
table.common tr:last-child td:nth-child(3){ text-align: right;}

table.common2 {
	width: 100%;
	border-spacing: 0;
	border-collapse: separate;
	border-radius: 20px;
	border: 1px solid #dcdcdc;
	background: #fff;
	box-sizing: border-box;
	margin-bottom: 20px;
}

table.common2 tr:first-child th:first-child { border-radius: 20px 0 0 0;}
table.common2 tr:first-child th:last-child { border-radius: 0 20px 0 0;}
table.common2 tr:last-child td:last-child { border-radius: 0 0 20px 0;}

table.common2 tr th { border-left: 1px solid #dcdcdc; padding: 4px 12px; background: #f0f0f0; white-space: nowrap; text-align: center;}
table.common2 tr:not(:first-child) th{border-top: 1px solid #dcdcdc;}
table.common2 tr td {border-top: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; padding: 4px 12px; text-align: right; width: 20%; vertical-align: middle;}

table.common2.edit  {background:rgba(255,255,255,0.8);}
table.common2.edit tr th {background:rgba(245,245,245,0.8);}

table.common2 tr th:first-child { border-left: none;}
table.common2 tr td:first-child { border-left: none;}

table.common2 tr td.left_border { border-left: 1px solid #dcdcdc; border-radius: 0 0 0 0;}

table.common2.reform td { width: 50%;}
table.common2.reform td.quarter { width: 25%;}


/*	table user list
------------------------------------------------------------ */
table.user_list {
	width: 100%;
	border-spacing: 0;
	border-collapse: separate;
	border-radius: 20px;
	border: 1px solid #dcdcdc;
	background: #fff;
	box-sizing: border-box;
	margin-bottom: 20px;
}

table.user_list tr:first-child th:first-child { border-radius: 20px 0 0 0;}
table.user_list tr:first-child th:last-child { border-radius: 0 20px 0 0;}
table.user_list tr:last-child td:last-child { border-radius: 0 0 20px 0;}

table.user_list tr th { border-left: 1px solid #dcdcdc; padding: 10px 12px; background: #f0f0f0; white-space: nowrap; text-align: center;}
table.user_list tr:not(:first-child) th{border-top: 1px solid #dcdcdc;}
table.user_list tr td {border-top: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; padding: 10px 12px; vertical-align: middle;}

table.user_list tr th:first-child { border-left: none;}
table.user_list tr td:first-child { border-left: none; text-align: right;}
table.user_list tr td:nth-child(4) { text-align: center;}
table.user_list tr td:nth-child(7) { text-align: center;}

table.user_list tr td.icon_add { text-align: left;}


/*	table track list
------------------------------------------------------------ */
table.track_list {
	width: 100%;
	border-spacing: 0;
	border-collapse: separate;
	border-radius: 20px;
	border: 1px solid #dcdcdc;
	background: #fff;
	box-sizing: border-box;
	margin-bottom: 20px;
}
table.track_list tr:first-child th:first-child { border-radius: 20px 0 0 0;}
table.track_list tr:first-child th:last-child { border-radius: 0 20px 0 0;}
table.track_list tr:last-child td:last-child { border-radius: 0 0 20px 0;}

table.track_list tr th { border-left: 1px solid #dcdcdc; padding: 10px 12px; background: #f0f0f0; white-space: nowrap; text-align: center;}
table.track_list tr:not(:first-child) th{border-top: 1px solid #dcdcdc;}
table.track_list tr td {border-top: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; padding: 10px 12px; vertical-align: middle;}

table.track_list tr th:first-child { border-left: none;}
table.track_list tr td:first-child { border-left: none;}
table.track_list tr td:nth-child(4) { text-align: right;}
table.track_list tr td:nth-child(5) { text-align: center;}

table.track_list tr td.icon_add { text-align: left;}


/*	table bom type
------------------------------------------------------------ */
table.bom_type {
	width: auto;
	border-spacing: 0;
	border-collapse: separate;
	border-radius: 20px;
	border: 1px solid #dcdcdc;
	background: #fff;
	box-sizing: border-box;
	margin-bottom: 20px;
	float: left;
}
table.bom_type tr:first-child th:first-child { border-radius: 20px 0 0 0; }
table.bom_type tr:first-child td:last-child { border-radius: 0 20px 0 0;}
table.bom_type tr:last-child th:first-child { border-radius: 0 0 0 20px;}
table.bom_type tr:last-child td:last-child { border-radius: 0 0 20px 0;}

table.bom_type th { padding: 10px 16px; background: #f0f0f0; border-bottom: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; vertical-align: middle;}
table.bom_type td { padding: 10px 16px; border-bottom: 1px solid #dcdcdc;}
table.bom_type tr:last-child th { border-bottom: none;}
table.bom_type tr:last-child td { border-bottom: none;}

/*	table bom list
------------------------------------------------------------ */
table.bom_list {
	width: 100%;
	border-spacing: 0;
	border-collapse: separate;
	border-radius: 20px;
	border: 1px solid #dcdcdc;
	background: #fff;
	box-sizing: border-box;
	margin-bottom: 20px;
}
table.bom_list tr:first-child th:first-child { border-radius: 20px 0 0 0;}
table.bom_list tr:first-child th:last-child { border-radius: 0 20px 0 0;}
table.bom_list tr:last-child td:last-child { border-radius: 0 0 20px 0;}

table.bom_list tr th { border-left: 1px solid #dcdcdc; padding: 10px 12px; background: #f0f0f0; white-space: nowrap; text-align: center;}
table.bom_list tr:not(:first-child) th{border-top: 1px solid #dcdcdc;}
table.bom_list tr td {border-top: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; padding: 10px 12px; vertical-align: middle;}

table.bom_list tr td.vertical_top { vertical-align: top;}
table.bom_list.bom_list_edit tr td.vertical_top { vertical-align: top; padding-top: 30px;}

table.bom_list tr th:first-child { border-left: none;}
table.bom_list tr td:last-child { border-right: none;}

table.bom_list.bom_list_edit tr td:last-child { border-right: none; text-align: center; width: 6%; vertical-align: middle;}


/*	table projects list
------------------------------------------------------------ */
.sort_box { width: 100%; display: flex; justify-content: flex-end; margin-bottom: 10px;}
.sort_box select { padding: 14px 20px; margin-right: 4px;}
.sort_box .date_box { padding: 14px 20px; border-radius: 12px; background: #fff; display: flex; margin-right: 4px;}
.sort_box .date_box label {
  position: relative;
  display: inline-block;
  border-radius: 12px;
	color: #999;
}
.sort_box .date_box input[type="date"] {
  position: relative;
  padding: 0 10px;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  font-size: 100%;
	font-weight: normal;
  color: #999;
}



table.projects_list {
	width: 100%;
	border-spacing: 0;
	border-collapse: separate;
	border-radius: 20px;
	border: 1px solid #dcdcdc;
	background: #fff;
	box-sizing: border-box;
	margin-bottom: 20px;
}

table.projects_list tr:first-child th:first-child { border-radius: 20px 0 0 0;}
table.projects_list tr:first-child th:last-child { border-radius: 0 20px 0 0;}
table.projects_list tr:last-child td:last-child { border-radius: 0 0 20px 0;}

table.projects_list tr th { border-left: 1px solid #dcdcdc; padding: 10px 12px; background: #f0f0f0; white-space: nowrap; text-align: center;}
table.projects_list tr:not(:first-child) th{border-top: 1px solid #dcdcdc;}
table.projects_list tr td {border-top: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; padding: 10px 12px; vertical-align: middle;}

table.projects_list tr th:first-child { border-left: none;}
table.projects_list tr td:first-child { border-left: none; text-align: right;}
table.projects_list tr td:nth-child(2) { text-align: right;}

table.projects_list tr td.icon_add { text-align: left;}

/*	table plane
------------------------------------------------------------ */
table.plane {
	width: 100%;
	border-spacing: 0;
	border-collapse: separate;
	border-radius: 20px;
	border: 1px solid #dcdcdc;
	background: #fff;
	box-sizing: border-box;
	margin-bottom: 20px;
}
table.plane th { border-radius: 20px 20px 0 0; padding: 4px 16px; background: #f0f0f0; border-bottom: 1px solid #dcdcdc;}
table.plane td { border-radius: 0 0 20px 20px; padding: 4px 16px;}




/*	photos
------------------------------------------------------------ */
.photos { display: flex; justify-content: space-between; flex-wrap: wrap;}
.photos .photo_box { width: 32%; margin-right: 2%; margin-bottom: 20px; border-radius: 10px; background: #fff; box-sizing: border-box; position: relative;}
.photos .photo_box:nth-child(3n){ margin-right: 0;}
.photos .photo_box img { width: 100%; height: auto; border-radius: 10px 10px 0 0;}
.photos .photo_box p { text-align: right; padding: 10px;}
.photos .photo_box .reload { position: absolute; left: 10px; top: 10px; width: 40px; height: 40px;}
.photos .photo_box .trash { position: absolute; left: 60px; top: 10px; width: 40px; height: 40px;}


/*	popup
------------------------------------------------------------ */
.popup_wrap input[type="checkbox"] {display: none;}
.popup_overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	opacity: 0;
	transition: opacity 0.5s, transform 0s 0.5s;
	transform: scale(0);
}

.popup_trigger {
	position: absolute;
	width: 100%;
	height: 100%;
}

.popup_content {
	position: relative;
	width: 90%;
	margin: 0 auto;
	padding: 30px 40px;
	box-sizing: border-box;
	background: #fff;
	line-height: 1.4em;
	transition: 0.5s;
	text-align: justify;
	border-radius: 20px;
}
.popup_content h3 { font-size: 180%; margin-bottom: 20px;}
.popup_content ul { display: flex;}
.popup_content ul li { margin-right: 20px;}
.popup_content ul li:last-child { margin-right: 0;}

.close_btn {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
}
.popup_wrap input:checked ~ .popup_overlay {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.5s;
}
.popup_wrap input:checked ~ .popup_overlay .popup_content{
	transform: translateY(50px);
}
.open_btn {
	cursor: pointer;
	transition: .3s ease;
}









.draw-view { max-width:100%; max-height:100%; margin:auto; display:block; }