

@media (max-width: 767px) {
	.table-responsive {
		overflow-x: visible;
		border: none;
		display: block;
	}

	.table-responsive tbody {
		display: block;
	}

	.table-responsive tr {
		display: block;
		margin-bottom: 14px;
		border: 1px solid #ddd;
		overflow: hidden;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
		background: #e6e7e9 !important;
	}

	.table-responsive tr:first-child {
		display: none;
	}

	.table-responsive td {
		display: block;
		position: relative;
		border: none;
		border-bottom: 1px solid #eee;
		padding: 8px 12px 8px 45%;
		white-space: normal;
		text-align: right;
		background: #e6e7e9 !important;
	}

	.table-responsive td:last-child {
		border-bottom: none;
	}

	.table-responsive tr td:first-child {
		position: static;
		padding: 10px 12px;
		text-align: left;
		font-weight: 900;
		background-color: #f5f5f5;
		min-width: 0;
		margin-bottom: 5px;
		width: 100%;
	}

	.table-responsive td[data-label]::before {
		content: attr(data-label);
		position: absolute;
		left: 12px;
		width: 40%;
		text-align: left;
		font-weight: bold;
		white-space: normal;
	}
}

@media (max-width: 576px) {
	.table-responsive td {
		padding: 6px 8px 6px 42%;
	}

	.table-responsive tr td:first-child {
		padding: 6px 8px;
		width: 100%;
        margin-bottom: 5px;
        font-weight: 900;
	}

	.table-responsive td[data-label]::before {
		left: 8px;
		width: 36%;
	}
}
