/* ============================================================================================== */

.table-wrap {
	width:						calc(100% - 20px);
	display:					block;
	margin:						10px auto;
}

.table-row {
	width:						100%;
	height:						50px;
	display:					flex;
	margin:						10px auto;
	flex-wrap:					wrap;
	justify-content:			flex-start;
}

.table-row.list {
	height:						30px;
}

.table-col-title {
	width:						auto !important;
	font-weight:				700;
	font-size:					150%;
	margin:						0px auto;
}

.table-col-body input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]), 
.table-col-data input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]) {
	width:						calc(100% - 60px);
	border:						1px solid #999999;
	box-shadow:					inset 0px 2px 4px rgb(0, 0, 0, 0.15);
	border-radius:				10px;
	padding:					10px 20px;
}

select {
	width:						calc(100% - 60px);
	border:						1px solid #999999;
	box-shadow:					inset 0px 2px 4px rgb(0, 0, 0, 0.15);
	border-radius:				10px;
	padding:					10px 20px;
	background:					#fff;
}

input[type="radio"] {
	height:						40px;
	line-height:				10px;
}

label {
	position:					relative;
	top:						-10px;
	display:					inline-block;
	width:						200px;
}

div[class^="table-col-"] {
	display:					block;
	width:						100%;
	height:						50px;
}

div[class^="table-list-"] {
	display:					block;
	height:						30px;
	border-top:					1px solid var(--table-border-color);
	border-left:				1px solid var(--table-border-color);
	padding:					5px;
}

div.table-col-header {
	width:						20%;
	min-width:					150px;
	line-height:				40px;
}
div.table-col-data {
	width:						80%;
}

div.table-list-header {
	line-height:				30px;
	text-align:					center;
}
div.table-list-data {
	line-height:				30px;
}

.table-row.list div.table-list-header:last-child,
.table-row.list div.table-list-data:last-child {
	border-right:				1px solid var(--table-border-color);
}

.table-row.list:last-child div[class^="table-list-"] {
	border-bottom:				1px solid var(--table-border-color);
}