body {
	font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
}
		
/* Table */
table {
	margin: auto;
	font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
	font-size: 12px;

}
.demo-table {
	border-collapse: collapse;
	font-size: 13px;
}
.demo-table th, 
.demo-table td {
	border-bottom: 1px solid #e9f5e7;
	border-left: 1px solid #e9f5e7;
	padding: 7px 17px;
}
.demo-table th, 
.demo-table td:last-child {
	border-right: 1px solid #e9f5e7;
}
.demo-table td:first-child {
	border-top: 1px solid #e9f5e7;
}
.demo-table td:last-child{
	border-bottom: 0;
}
caption {
	caption-side: top;
	margin-bottom: 10px;
}
		
/* Table Header */
.demo-table thead th {
	background-color: #71bc42;
	color: #FFFFFF;
	border-color: #71bc42 !important;
	text-transform: uppercase;
}

/* Table Body */
.demo-table tbody td {
	color: #353535;
}

.demo-table tbody tr:nth-child(odd) td {
	background-color: #ffffff;							/* background color for row */
}
.demo-table tbody tr:hover th,
.demo-table tbody tr:hover td {
	background-color: #e9f5e7;
	border-color: #e9f5e7;
	transition: all .2s;
}

@media screen and (max-width: 520px) {
	table {
		width: 100%;
	}
	thead th.column-primary {
		width: 100%;
	}

	thead th:not(.column-primary) {
		display:none;
	}
	
	th[scope="row"] {
		vertical-align: top;
	}
	
	td {
		display: block;
		width: auto;
		text-align: right;
	}
	thead th::before {
		text-transform: uppercase;
		font-weight: bold;
		content: attr(data-header);
	}
	thead th:first-child span {
		display: none;
	}
	td::before {
		float: left;
		text-transform: uppercase;
		font-weight: bold;
		content: attr(data-header);
	}
}

/* Modal styles */
/* .modal .modal-dialog {				// ---  gak digunakan digantikan dengan modal-lg dan modal-sm.
	max-width: 800px;
} */

.modal .modal-header, .modal .modal-body, .modal .modal-footer {
	padding: 20px 30px;
}
.modal .modal-content {
	border-radius: 3px;
}
.modal .modal-footer {
	background: #ecf0f1;
	border-radius: 0 0 3px 3px;
}
.modal .modal-title {
	display: inline-block;
}
.modal .form-control {
	border-radius: 2px;
	box-shadow: none;
	border-color: #dddddd;
}
.modal textarea.form-control {
	resize: vertical;
}
.modal .btn {
	border-radius: 2px;
	min-width: 100px;
}	
.modal form label {
	font-weight: normal;
}