/*
------------------------------------------------
　テキストスタイル
------------------------------------------------
*/
.text-base {
	font-size: 16px;
	font-family: "Noto Sans JP", sans-serif;
}

.font-base {
	font-family: "Noto Sans JP", sans-serif !important;
}

/*
------------------------------------------------
　ボタンスタイル
------------------------------------------------
*/
.btn-lg {
	height: 48px;
	padding: 16px 20px;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	white-space: nowrap;
}

.btn-md {
	height: 40px;
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	white-space: nowrap;
}

.btn-md i {
	font-size: 20px;
	margin-right: 8px;
}

.btn-sm {
	height: 34px;
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	white-space: nowrap;
}

.btn-sm i {
	font-size: 20px;
	margin-right: 8px;
}

.btn-xs {
	height: 28px;
	padding: 4px 4px;
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	white-space: nowrap;
}

.btn-xs i {
	font-size: 20px;
	margin-right: 8px;
}

.btn-primary {
	background-color: #196fe0;
	color: white;
	border: 1px solid #196fe0;
}

.btn-primary:hover {
	background-color: #1664ca;
	border: 1px solid #1664ca;
	transition: all 0.3s;
}

.btn-secondary {
	background-color: #fff;
	color: black;
	border: 1px solid #c7cdd3;
}

.btn-secondary:hover {
	background-color: #f7f8f9;
	transition: all 0.3s;
}

.btn-dangerSecondary {
	background-color: #fff;
	color: #dc2626;
	border: 1px solid #dc2626;
}

.btn-dangerSecondary:hover {
	background-color: #f7f8f9;
	transition: all 0.3s;
}

.btn-v2-disabled {
	cursor: not-allowed;
	pointer-events: none;
	background-color: #ccc;
	color: #aeaeae;
	border: 1px solid #ccc;
}

.btn-v2-disabled i {
	color: #aeaeae;
}

/*
------------------------------------------------
　申請状態
------------------------------------------------
*/
.v2-flowstatus {
	display: inline-flex;
	height: 24px;
	justify-content: center;
	align-items: center;
	color: #fff;
	padding: 0px 8px;
	border-radius: 16px;
	min-width: 64px;
	font-size: 14px;
	box-sizing: border-box;
}

.v2-flowstatus-flow {
	background: #e0eeff;
	border: 1px solid #145ab6;
	color: #104994;
}

.v2-flowstatus-reject {
	background: #ffd4d4;
	border: 1px solid #b41d1d;
	color: #921717;
}

.v2-flowstatus-takeback {
	background: #fffce0;
	border: 1px solid #e1b000;
	color: #23221f;
}

.v2-flowstatus-decision {
	background: #e0ffe3;
	border: 1px solid #006860;
	color: #00554d;
}

.v2-flowstatus-remand {
	background: #fff5e7;
	border: 1px solid #ff5011;
	color: #dd3b00;
}

.v2-flowstatus-draft,
.v2-flowstatus-pause {
	background: #616f7d;
}

.v2-flowstatus-decisionedtakeback {
	background: #fffce0;
	border: 1px solid #e1b000;
	color: #23221f;
}

/*
------------------------------------------------
　テーブル 標準
------------------------------------------------
*/

.tables_base {
	border: 1px solid #9fa9b4;
	text-align: left;
	border-collapse: collapse;
	border-spacing: 0;
	background-color: #ffffff;
}

.tables_base th {
	border-style: none solid solid;
	border-width: 0px 1px 1px;
	border: 1px solid #9fa9b4;
	background-color: #dee2e5;
	height: 40px;
	text-align: center;
	color: #374151;
	white-space: nowrap;
	empty-cells: show;
	font-weight: 400;
}

.tables_base td {
	background-color: #ffffff;
	border: 1px solid #9fa9b4;
	padding: 8px;
	color: #374151;
	empty-cells: show;
}

.tables_base td {
	min-height: 48px;
}

.tables_base td.wrapper {
	word-break: break-all;
	word-wrap: break-word;
}

.tables_base a {
	text-decoration: none;
	color: #000000;
}

.tables_base img {
	margin-right: 4px;
	vertical-align: middle;
	border: 0px solid;
}

.tables_base_stripe {
	background-color: #e9e9e9;
}

/*
------------------------------------------------
　判定履歴の判定状態
------------------------------------------------
*/
.v2-statusbox {
	color: #fff;
	display: inline-flex;
	min-height: 24px;
	padding: 0px 8px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	min-width: 64px;
	border-radius: 16px;
	box-sizing: border-box;
	font-size: 14px;
	white-space: nowrap;
}

.v2-statusbox-accept,
.v2-statusbox-confirm {
	background-color: #E0FFE3;
	color: #00554D;
	border: 1px solid #006860;
}

.v2-statusbox-deny,
.v2-statusbox-reject {
	background-color: #FFD4D4;
	color: #921717;
	border: 1px solid #B41D1D;
}

.v2-statusbox-undeterm,
.v2-statusbox-unconfirm,
.v2-statusbox-redeterm {
	background-color: #F7F7F7;
	color: #616F7D;
	border: 1px solid #7B8998;
}

.v2-statusbox-remand {
	background-color: #FFF5E7;
	color: #DD3B00;
	border: 1px solid #FF5011;
}

.v2-statusbox-skip {
	background-color: #E0FEFF;
	color: #145AB6;
	border: 1px solid #196FE0;
}

.v2-statusbox-takeback {
	background-color: #FFFCE0;
	color: #23221F;
	border: 1px solid #E1B000;
}

.v2-statusbox-stay {
	background-color: #E0EEFF;
	color: #104994;
	border: 1px solid #145AB6;
}

.v2-connect-statusbox-stay {
	background-color: #E0EEFF;
	color: #104994;
	border: 1px solid #145AB6;
}

/*
------------------------------------------------
　チェックボックス
------------------------------------------------
*/
.custom-checkbox-container input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.custom-checkbox-checkmark {
	position: relative;
	width: 24px;
	height: 24px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #fff;
	transition: all 0.2s ease-in-out;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.custom-checkbox-container
	input[type="checkbox"]:checked
	+ .custom-checkbox-checkmark {
	background-color: #1a73e8;
	border-color: #1a73e8;
}

.custom-checkbox-checkmark::after {
	content: "";
	position: absolute;
	display: none;
	left: 8px;
	top: 4px;
	width: 7px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

/* チェックされた時にチェックマークを表示 */
.custom-checkbox-container
	input[type="checkbox"]:checked
	+ .custom-checkbox-checkmark::after {
	display: block;
}

/*
------------------------------------------------
　文字色
------------------------------------------------
*/
.red-500 {
	color: #dc2626;
}

.green-500 {
	color: #008077;
}

.orange-500 {
	color: #ff7f50;
}

.yellow-500 {
	color: #ffcc17;
}

.yellow-900 {
	color: #b78e00;
}

.blue-500 {
	color: #196fe0;
}

/*
------------------------------------------------
　余白
------------------------------------------------
*/

.left-8 {
	margin-left: 8px;
}

.left-4 {
	margin-left: 4px;
}