body {
	/*  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;*/
	font-size: 1rem;
}

header {
	background-color: rgba(0,0,0,1);
	color: white;
	fill: white;
}

	header > h1 {
		display: inline-block;
	}

		header > h1 > img {
			margin: 0.3rem 1rem;
			height: 2rem;
			vertical-align: bottom;
		}

	header > .btn-toolbar {
		justify-content: space-between;
	}

	header .btn-toolbar > .btn-group.right {
		margin-left: auto;
	}

	header .btn-toolbar > .btn-group.left {
		margin-right: auto;
	}

	header h5:empty {
		display: none !important;
	}

	header .btn-group.steps > .btn {
		border-radius: 0 !important;
		padding-top: 1rem;
		padding-bottom: 1rem;
		border: 1px solid rgba(0,0,0,0.3) !important;
		margin: 1px 0;
	}

		header .btn-group.steps > .btn.btn-step {
			/*clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);*/
			clip-path: polygon(0 0, calc(100% - 20px) 0, calc(100% - 5px) 50%, calc(100% - 20px) 100%, 0 100%);
			position: relative;
			border: none !important;
		}

			header .btn-group.steps > .btn.btn-step::before {
				clip-path: inherit;
				position: absolute;
				content: "";
				background-color: rgba(0,0,0,0.3) !important;
				inset: 0px;
				z-index: -2;
			}

			header .btn-group.steps > .btn.btn-step::after {
				clip-path: inherit;
				position: absolute;
				content: "";
				background-color: inherit !important;
				inset: 1px;
				z-index: -1;
			}

footer > .btn-toolbar {
	justify-content: space-between;
	margin: 0.3rem;
}

footer .btn > span {
	display: block;
	white-space: nowrap;
}

footer .btn:disabled {
	display: none;
}

@media screen and (max-width: 40rem), screen and (max-height: 20rem) {
	header .btn-group.steps > .btn {
		padding-left: 0.3rem;
		padding-right: 0.3rem;
	}

	footer .btn:not(.no-text) {
		min-width: 4em;
	}
}


#article_infobar {
	display: flex;
}

	#article_infobar > .row1,
	#article_infobar > .row2,
	#article_infobar > .row3,
	#article_infobar > .row4 {
		border: 1px solid;
	}

	#article_infobar > .row1 {
		flex-shrink: 0;
		min-width: 6em;
		border-left-width: 0;
		border-right-width: 0;
		border-top-width: 0;
		padding: 0.3em;
		display: flex;
		-ms-flex-direction: column;
		-webkit-flex-direction: column;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}

	#article_infobar > .row2 {
		flex-grow: 1;
		border-right-width: 0;
		border-top-width: 0;
	}

		#article_infobar > .row2 > div {
			padding: 0.3em;
		}

	#article_infobar > .row3 {
		flex-shrink: 0;
		min-width: 6em;
		border-right-width: 0;
		border-top-width: 0;
	}

		#article_infobar > .row3 > div {
			padding: 0.3em;
		}

	#article_infobar > .row4 {
		flex-shrink: 0;
		min-width: 6em;
		text-align: right;
		border-right-width: 0;
		border-top-width: 0;
		padding: 0 0.5em;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 1.2rem;
		font-weight: bold;
	}


@media screen and (max-width: 40rem) {

	#article_infobar {
		-ms-flex-direction: column;
		-webkit-flex-direction: column;
		flex-direction: column;
	}

		#article_infobar > .row1,
		#article_infobar > .row4 {
			-ms-flex-direction: row;
			-webkit-flex-direction: row;
			flex-direction: row;
			justify-content: flex-start;
		}

		#article_infobar > .row4 {
			border-top-width: 0;
			border-left-width: 0;
		}


		#article_infobar > .row2,
		#article_infobar > .row3 {
			display: none;
		}
}

.detalis-product {
	font-weight: bold;
}

.detalis-parent {
	font-weight: bold;
}

.detalis-child {
	padding-left: 1rem !important;
}

#key_list > li .key_text {
	border-radius: 0.25rem;
	padding: 0.25rem;
	border: 1px solid;
	min-height: 2em;
	/*-ms-word-break: keep-all;
  word-break: keep-all;*/
}

#key_list > li:not(.selected):not(.divider) label {
	color: red;
}

#pickup_pricebar > div {
	padding-bottom: 0;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: flex-end;
}

#pickup_pricebar .field-contain {
	margin: 0.6em 1em;
}

#pickup_pricebar .alert {
	display: none;
}

#pickup_pricebar input[type=text],
#pickup_pricebar input[type=number] {
	padding-right: 0.3rem;
	text-align: right;
	border-width: 0;
}


@media screen and (max-width: 30rem) {
	#pickup_total_box {
		display: none !important;
	}
}


#cb_panel_list,
#cb_layout_list {
	margin-left: auto;
	width: 27rem;
}

#cb_panel_fig,
#cb_layout_fig {
	display: block;
	overflow: hidden;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	padding: 0.5rem;
	z-index: 9;
	background-color: white;
	margin-right: 27rem;
}

/*#cb_panel_cvs,
#cb_layout_cvs {
  border: 1px solid #eee;
}*/

#cb_layout_list > li > .list-group-item .handle {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2rem;
	border-radius: 0;
	opacity: 0.5;
	padding: 0;
}


@media screen and (max-width: 40rem) {

	#cb_panel_list,
	#cb_layout_list {
		width: auto;
	}

	#cb_panel_fig,
	#cb_layout_fig {
		display: none;
		margin-right: 0;
	}

		#cb_panel_fig.show,
		#cb_layout_fig.show {
			display: block;
		}

			#cb_panel_fig.show > #cb_panel_cvs:after,
			#cb_layout_fig.show > #cb_layout_cvs:after {
				font-family: "Font Awesome 5 Free";
				content: "\f057";
				display: inline-block;
				font-weight: 900;
				position: absolute;
				top: 0;
				right: 0;
				font-size: 2rem;
			}
}

#unlock,
#login {
	display: flex;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}

	#unlock > section,
	#login > form {
		padding: 1rem;
	}

@media screen and (min-width: 40rem) {

	#unlock,
	#login {
		align-items: center;
	}

		#unlock > section,
		#login > form {
			max-width: 30em;
			width: 100%;
		}
}

@media screen and (min-width: 40rem) and (min-height: 20rem) {

	#unlock,
	#login {
		justify-content: center;
	}
}


#article_page #worker_name,
#article_page #owner_name {
	margin-top: 0.3rem;
}

@media screen and (min-width: 40rem) {
	#article_page #person_worker_group,
	#article_page #person_owner_group {
		margin-left: 1rem;
		margin-top: 0;
		width: calc(100% - 1rem);
	}
}

#product_guide {
	display: none;
}

@media screen and (max-width: 35rem) {
	#product_guide > span,
	body.details .login-user {
		display: none;
	}
}

#readonly_alert {
	margin: 0;
	text-align: center;
}


.user-attr-box > div {
	font-size: 1.2em;
}

.bk_eststate_0 {
	background-color: transparent;
	color: black;
}

.bk_eststate_1 {
	background-color: transparent;
	color: black;
}

.bk_eststate_2 {
	background-color: rgba(0,255,0,1) !important;
	color: black;
}

.bk_eststate_3 {
	background-color: rgba(255,255,0,1) !important;
	color: black;
}

.bk_eststate_13 {
	background-color: rgba(255,128,0,1) !important;
	color: white;
}

.bk_eststate_23 {
	background-color: rgba(255,0,0,1) !important;
	color: white;
}

.bk_eststate_4 {
	background-color: rgba(0,0,255,1) !important;
	color: white;
}

.bk_eststate_5 {
	background-color: rgba(255,0,255,1) !important;
	color: white;
}


#details_step_price {
	/*min-width: 8em;*/
	text-align: right;
	font-size: 1.2rem;
	padding: 0;
}

.btn-group.right {
	margin-left: auto;
}

/* 2022/01 FIX */
.btn-group > p {
	align-self: center;
	margin-right: 1rem;
}

.step_alert {
	display: flex;
	align-items: center;
	padding: 0.3rem;
	margin: 0;
	border-width: 0;
	border-radius: 0;
	margin-top: -1px;
}

	.step_alert > i {
		flex-shrink: 0;
	}

	.step_alert > div {
		flex-grow: 1;
		margin-left: 0.3rem;
		/*max-height: 4em;*/
		overflow-y: auto;
	}

.modal .step_alert > div {
	max-height: none;
}

div.handsontable .memo-alart {
	padding: 0.3rem;
	margin: 0.3rem;
	border-radius: 0;
}

div.handsontable tbody > tr{
	/*background-color: transparent;*/
}

div.handsontable {
	--bg-r: 210;
	--bg-g: 210;
	--bg-b: 210;
}

	div.handsontable tbody > tr > td.highlight, /* 選択セル */
	div.handsontable tbody > tr > td.current-row { /* 選択行 */
		background-color: rgba(var(--bg-r), var(--bg-g), var(--bg-b),0.6);
		/*background-color: rgba(108,117,125,0.2);*/	
	}

	div.handsontable .wtBorder.current { /*カレント選択枠色*/
		background-color: rgba(var(--bg-r), var(--bg-r), var(--bg-r),1) !important;
		/*background-color: rgba(108,117,125,1) !important;*/
	}

	div.handsontable th { /* ヘッダ */
		background-color: rgba(var(--bg-r), var(--bg-g), var(--bg-b),0.5);
		/*background-color: rgba(108,117,125,0.7);*/
		color: black;
	}

	div.handsontable tbody th.ht__highlight,
	div.handsontable thead th.ht__highlight { /* 選択ヘッダー */
		background-color: rgba(var(--bg-r), var(--bg-g), var(--bg-b),0.8);
		/*background-color: rgba(108,117,125,0.8);*/
	}

	div.handsontable .manualRowResizerGuide,
	div.handsontable .manualColumnResizerGuide { /* リサイズガイド */
		background-color: rgba(var(--bg-r), var(--bg-g), var(--bg-b),1);
		/*background-color: rgba(108,117,125,1);*/
	}

	div.handsontable .manualColumnResizer:hover,
	div.handsontable .manualColumnResizer.active,
	div.handsontable .manualRowResizer:hover,
	div.handsontable .manualRowResizer.active { /* リサイズグリップ */
		background-color: rgba(var(--bg-r), var(--bg-g), var(--bg-b),1);
		/*background-color: rgba(108,117,125,1);*/
	}

	div.handsontable .handsontableInput { /*入力枠色*/
		box-shadow: inset 0 0 0 2px rgba(var(--bg-r), var(--bg-g), var(--bg-b),1);
		/*box-shadow: inset 0 0 0 2px rgba(108,117,125,1);*/
	}


.app-version {
	font-size: 1rem;
	display: inline-block;
	padding-left: 0.5rem;
	line-height: 1;
}


@media screen and (max-width: 40rem) {

	#home_toolbar .desktop {
		display: none;
	}
}

@media screen and (min-width: 40rem) {

	#home_toolbar .mobile {
		display: none;
	}
}


.user-cmd-btn {
	margin: 1rem 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

#syslog_page li {
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
	border-width: 0;
}

	#syslog_page li:nth-child(even) {
		background-color: #eee;
	}

#unit_B + .show.dropdown-menu,
#unit_C + .show.dropdown-menu,
#unit_D + .show.dropdown-menu {
	min-width: calc(100% - 6px);
	text-align: center;
}

#detalis_toolbar > .steps > .btn > span.min-text {
	display: none;
	margin-left: 0.5rem;
}

#detalis_toolbar > .steps > .btn:last-child > span.min-text {
	margin-left: 0;
	margin-right: 0.5rem;
}

@media screen and (max-width: 40rem) {

	#detalis_toolbar > .steps > .btn > span {
		display: none;
	}

	#detalis_toolbar > .steps > .btn.active > span.min-text {
		display: inline-block;
	}
}

#master_list .thumbnail {
	height: 0;
	min-height: 0;
}


.color-sample {
	width: 2rem;
	position: absolute;
	right: 0.3rem;
	bottom: 0.3rem;
	top: 0.3rem;
}

	.color-sample.base {
		background-color: #fff;
	}

#product_name {
	display: inline-block;
	padding: 0 0.5rem;
	margin-bottom: 0.3rem;
}

	#product_name > .badge {
		font-size: 90%;
		vertical-align: bottom;
	}


#details_commandbar .dropdown-menu {
	padding: 0.5rem;
}

@media screen and (min-width: 370px) {
	#details_commandbar div.mobile {
		display: none;
	}
}

@media screen and (max-width: 370px) {
	#details_commandbar div.desktop {
		display: none;
	}
}

@media screen and (min-width: 40rem) {
	#details_commandbar .btn[cmd='plan'].mobile {
		display: none !important;
	}
}

@media screen and (max-width: 40rem) {
	#details_commandbar .btn[cmd='resend'] {
		display: none !important;
	}

	#cb_layout_toolbar .btn[cmd='ceiling'] {
		padding-top: 0.3rem;
		padding-bottom: 0.3rem;
	}

		#cb_layout_toolbar .btn[cmd='ceiling'] > span {
			display: block;
		}
}

.field-box {
	margin: 0 0 1rem 0;
}

	.field-box > .field-memo {
		text-align: right;
	}

	.field-box > .field-error {
		margin: 0.3rem 0 0 0;
	}

.msgbox_alerts {
	text-align: left;
	min-width: 20rem;
}

	.msgbox_alerts > .alert {
		padding: 0.3rem;
		margin: 1rem 0 0 0;
	}

		.msgbox_alerts > .alert hr {
			margin: 0.3rem 0;
		}

.logo-bar {
	text-align: center;
}

	.logo-bar img {
		height: 2rem;
	}

.predoc {
	display: flex;
	justify-content: center;
	text-align: center;
}

	.predoc pre {
		font-size: 1.1rem;
		white-space: pre-wrap;
		text-align: left;
	}

.drop-area:empty:after {
	content: "ここにファイルをドロップ";
	opacity: 0.5;
}

.no-drop-area:empty:after {
	content: "ファイルはありません";
	opacity: 0.5;
}

.notice_bar {
	display: flex;
	padding: 0.3rem;
	color: white;
	background-color: rgba(255,0,0,0.5);
	align-items: center;
	gap: 0.5rem;
}

	.notice_bar > .notice_title {
		flex: 0 0 auto;
		display: flex;
		padding: 0.3rem 0.5rem;
		border-radius: 0.3rem;
	}

	.notice_bar > .notice_list {
		flex: 1 1 1px;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

		.notice_bar > .notice_list a {
			color: blue;
		}

/*#details_asm_info {
	max-width: 40rem !important;
}
*/

/*
	暫定色配
*/

body {
	--bg-color: #3f3937;
	--txt-color: #ddd;
	--bg-color2: #e1e0e0;
	--txt-color2: #333;
	--bg-color3: #6c757d;
	--txt-color3: #fff;
}

#login .btn-primary {
	background-color: var(--bg-color) !important;
	border-color: var(--bg-color) !important;
	color: var(--txt-color) !important;
}

#login .btn-secondary {
	background-color: var(--bg-color2) !important;
	border-color: var(--bg-color2) !important;
	color: var(--txt-color2) !important;
}

#detalis_toolbar {
	background-color: var(--bg-color) !important;
}

	#detalis_toolbar .btn:not(.btn-label) {
		border-color: var(--txt-color) !important;
	}

	#detalis_toolbar .btn:not(.active):not(.btn-primary) {
		background-color: var(--bg-color);
		color: var(--txt-color);
	}
	#detalis_toolbar .btn-step:before {
		background-color: var(--txt-color) !important;
	}

#detalis_infobar {
	background-color: var(--bg-color2) !important;
	color: var(--txt-color2) !important;
}
	#detalis_infobar .text-white {
		color: var(--txt-color2) !important;
	}

	#detalis_infobar > #article_infobar {
		background-color: var(--bg-color3) !important;
		color: var(--txt-color3) !important;
	}

#cb_layout_toolbar {
	color: var(--txt-color2);
}

	#cb_layout_toolbar .btn:not(.btn-primary) {
		background-color: var(--bg-color) !important;
		border-color: var(--bg-color) !important;
		color: var(--txt-color) !important;
	}

.footer.fixed-bottom {
	background-color : black !important;
	border-color: black !important;
}
	.footer.fixed-bottom .btn:not(.btn-primary):not(.btn-info) {
		background-color: var(--bg-color) !important;
		border-color: var(--bg-color) !important;
		color: var(--txt-color) !important;
	}

#series_list .card-footer .btn-group {
	flex-direction: column;
}
	#series_list .card-footer .btn-group > .btn {
		border-radius: 0;
		margin: 0;
	}
		#series_list .card-footer .btn-group > .btn:first-child {
			border-top-left-radius: 0.25rem;
			border-top-right-radius: 0.25rem;
		}
		#series_list .card-footer .btn-group > .btn:last-child {
			border-bottom-left-radius: 0.25rem;
			border-bottom-right-radius: 0.25rem;
		}