@charset "utf-8";
/* CSS Document */

table {
	width:100%;
}

table, td {
	/* border:2px solid black; */
    border: 1px solid rgba(0, 0, 0, .3);
	border-collapse: collapse;
	text-align: left;
}

td, tr, th {
	padding:1rem;
}

th, 
thead tr,
thead tr th  {
	background: var(--table-bg);
	font-weight: bold;
    border: 1px solid #ffffff;
}

.small {
    font-size: 10px;
    font-weight: 100;
}

@media screen and (max-width:960px) {
	
	table, tr, td {
		padding:0;
		border: 1px solid rgba(0, 0, 0, .3);
	}

	table {
		border:none;
	}

	thead {
		display:none;
	}

	tr {
		float: left;
		width: 100%;
		margin-bottom: 2rem;
	}

	td {
		float: left;
		width: 100%;
		padding:1rem;
        
	}

	td::before {
		content:attr(data-label);
		word-wrap: break-word;
		width: 70%;
		float: left;
		padding: 1rem;
		margin:-1rem 1rem -1rem -1rem;
       
	}

    tr td:nth-child(1) {
        background-color: var(--table-bg);
        color: #ffffff;
    }

    tr td {text-align: right;}

}