/* dtble*/
.dtbl{
	padding:20px;
	border:5px dotted red;
}
/* tblbtnbox */
.dtbl-tblbtnbox{
	display:flex;
	justify-content:flex-start;
	align-items:center;
	flex-wrap:wrap;
	line-height:0;
}
.dtbl-tblbtnbox .btn{
	margin-right:8px;
	margin-bottom:10px;
}
.dtbl-tblbtnbox .btn:last-child{
	margin-right:0;
}
/* dtble-heading,body,footer */
.dtbl-heading,
.dtbl-body,
.dtbl-footer{
	display:flex;
	border:1px solid blue;
	overflow:hidden;
}
.dtbl-body{
	overflow:auto;
	margin-bottom:10px;
}
/* table */
.dtbl-table{
	border-collapse: collapse;
	background-color:white;
}
/* th,td */
.dtbl-table th,
.dtbl-table td{
	border:1px solid #ccc;
	vertical-align:middle;
}
.dtbl-table th{
	padding:6px 10px;
}
.dtbl-table td{
	padding:10px 10px;
}
.dtbl-table .dtbl-nopad{
	padding:0;
}
/* tr */
.dtbl-table tbody tr:nth-child(odd){
	background-color:#f8f8f8;
}
.dtbl-table tbody tr:hover{
	background-color:#eee;
}
.dtbl-table tbody tr.dtbl-sel{
	background-color:#ccc;
}
/* fhead */
.dtbl-fhead{
	display:flex;
	justify-content:center;
	align-items:center;
}
.dtbl-sortbtnbox{
	position:relative;
	top:2px;
	margin-right:8px;
	display:flex;
	justify-content:center;
	align-items:center;
}
.dtbl-sortbtn{
	position:relative;
	color:#888;
	cursor:pointer;
}
.dtbl-sortbtn:hover{
	color:#333;
}
.dtbl-sortbtn:active{
	top:1px;
	color:#aaa;
}
.dtbl-sortbtn .sicon{
	width:20px;
	height:20px;
}
.dtbl-sortbtn:first-child{
	margin-right:2px;
}
/* selrec */
.dtbl-selrec{
	display:flex;
	justify-content:center;
	align-items:center;
}
.dtbl-selrec input{
	position:relative;
	-webkit-appearance:none;/* safari */
	appearance:none;
	margin:4px;
	width:30px;
	height:30px;
	cursor:pointer;
	background-color:#fff;
	border:1px solid #ccc;
	border-radius:4px;
}
.dtbl-selrec input::before{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	border-radius:4px;
}
.dtbl-selrec input::after{
	content:"";
	position:absolute;
	top:20%;
	bottom:20%;
	left:20%;
	right:20%;
}
.dtbl-selrec:hover input::before{
	background:#eee;
}
.dtbl-selrec input:checked::before{
	background:#337ab7;
}
.dtbl-selrec input:checked::after{
	ransform-origin:bottom left;
	clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	background:#fff;
}
/* recbtnbox */
.dtbl-recbtnbox{
	display:flex;
	justify-content:center;
	align-items:center;
	line-height:0;
	margin:4px;
}
.dtbl-recbtn{
	position:relative;
	display:inline-block;
	color:#888;
	cursor:pointer;
	margin-right:6px;
	width:30px;
	height:30px;
	padding:4px;
	border-radius:5px;
}
.dtbl-recbtn:last-child{
	margin-right:0;
}
.dtbl-recbtn:hover{
	color:#333;
	background:#fff;
}
.dtbl-recbtn:active{
	top:1px;
	color:#000;
	background:#ddd;
}
.dtbl-recbtn .sicon{
	width:22px;
	height:22px;
}
/* navibtnbox */
.dtbl-navibtnbox{
	display:flex;
	justify-content:center;
	align-items:center;
	line-height:0;
}
.dtbl-navibtn{
	position:relative;
	display:inline-block;
	color:#888;
	cursor:pointer;
	margin-right:8px;
}
.dtbl-navibtn:last-child{
	margin-right:0;
}
.dtbl-navibtn:hover{
	color:#333;
}
.dtbl-navibtn:active{
	top:1px;
	color:#aaa;
}
.dtbl-navibtn .sicon{
	width:24px;
	height:24px;
}
/* footer */
.dtbl-footer{
	flex-wrap:wrap;
	margin-bottom:0;
}
.dtbl-footer > div{
	margin-bottom:10px;
	margin-right:20px;
	border:1px solid green;
}
/* statsbox */
.dtbl-statsbox{
	display:flex;
	justify-content:center;
	align-items:center;
}
/* recidx, total-rec */
.dtbl-recidx-s,
.dtbl-recidx-e,
.dtbl-total-rec{
	font-weight:bold;
}