/* https://webdesignerhut.com/pure-css-responsive-tables/ */
table.responsive >tbody >tr >.ylanurkka {
  display: none;
}

/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 761px) and (max-device-width: 1024px)  {

	table.responsive {
	  	width: 100%;
	}
	table.responsive {
		display: block;
	}
	table.responsive >thead, table.responsive >tbody, table.responsive >tfoot {
		display: block;
	}
	table.responsive >thead >tr {
		display: block;
	}
	table.responsive >tbody >tr {
		display: grid;
	}
	table.responsive >tfoot >tr {
		display: block;
	}
	table.responsive >thead >tr >th, table.responsive >thead >tr >td {
		display: block;
	}
	table.responsive >tbody >tr >th, table.responsive >tbody >tr >td {
		display: block;
	}
	table.responsive >tfoot >tr >th, table.responsive >tfoot >tr >td {
		display: block;
	}

	table.responsive >thead >tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	table.responsive >tbody >tr {
    border: 1px solid #ccc;
    margin: 10px 0;
  }
	table.responsive >tfoot >tr {
    border: 1px solid #ccc;
  }

	table.responsive >tbody >tr >th, table.responsive >tbody >tr >td,
	table.responsive >tfoot >tr >th, table.responsive >tfoot >tr >td {
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
    display: list-item;
    list-style-type: " ";
	}

	table.responsive >tbody >tr >th:before,
  table.responsive >tbody >tr >td:before,
	table.responsive >tfoot >tr >th:before,
  table.responsive >tfoot >tr >td:before {
		position: absolute;
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
		content: attr(data-column);
		text-align: right;

		color: #000;
		font-weight: bold;
	}

  table.responsive >tbody >tr >.ylanurkka {
    display: inline;
    float: right;
    width: auto;
    padding: 6px 12px;
    background-color: lavender;
  }
}