#table-like-cards thead td,
#table-like-cards tbody td {
	vertical-align: middle;
}


@media only screen and (max-width: 700px) {

    #table-like-cards #cards-holder {
        padding-top: 0 !important;
    }
    #table-like-cards .card-body {
        padding: 0;
    }
    #table-like-cards .col-12 {
        padding: 0;
    }
    #table-like-cards .table-bordered {
        border: unset;
    }
	
	/* Force table to not be like tables anymore */
	#table-like-cards table, 
	#table-like-cards thead, 
	#table-like-cards tbody, 
	#table-like-cards th, 
	#table-like-cards td, 
	#table-like-cards tr { 
		display: block; 
	}

    #table-like-cards table {
        width: 100% !important;
    }
    #table-like-cards tbody tr {
        margin-bottom: 3mm;
        border: 2px solid #777;
    }
    #table-like-cards tbody tr:hover {
        /* border: 1mm solid white; */
        border: 2px solid #fb9678;
    }

 
	/* Hide table headers (but not display: none;, for accessibility) */
	#table-like-cards thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

 
	#table-like-cards td { 
		/* Behave  like a "row" */
		border: none;
		/* border-bottom: 1px solid #eee;  */
		position: relative;
		padding-left: 32mm; 
		white-space: normal;
		text-align: left;
        padding-top: 1px;
        padding-bottom: 1px;        
	}

    /* #table-like-cards td:nth-child(5) {
        font-weight: bold; 
    } */
 
	#table-like-cards td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		/* top: 6px; */
		left: 6px;
		/* width: 45%;  */
		padding-right: 10px; 
		white-space: nowrap;
		text-align: left;
        padding-top: 1px;
        padding-bottom: 1px;        
		/* font-weight: bold; */
	}
 
	/*
	Label the data
	*/
	#table-like-cards td:before { content: attr(data-title); }
}