@media  (min-width: 1181px) and (max-width: 1280px) {
.search-bar {
  grid-column-start: 2;
  grid-column-end: 4;
  justify-self: start;
}

tr > *:nth-child(1) {
  width: 25%;
}

tr > *:nth-child(3) {
  width: 11%;
}
}

@media  (max-width: 1180px)  {

	.search-bar {
	grid-column-start: unset;
  grid-column-end: unset;
  justify-self: start;
}


    .cf-background, .container, .cf-about-background, .about-container {
  display: block;
    }

	.about-link {
text-align: center;
padding-bottom: 1em;
}

.about-text {
  margin-left: 1em;
}

.cf-heading-1 {
    font-size: 3rem;
    padding: 1rem;
    text-align: center;
    color: #332F21;
}




	.case-filters {
		margin-top: 1.5em;
	}

.filters-container {
  position: relative;
  align-self: start;
  max-height: none;
  overflow-y: visible;
}

	.filter-heading {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}

	.filter-heading-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1em;
	}

	.filters-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		background: none;
		border: 1px solid #085ba3;
		border-radius: 4px;
		color: #085ba3;
		padding: 0.5em;
		font-size:1em;
		cursor: pointer;
		margin-bottom: .75em;
		margin-left: 1em;
	}
	.filters-toggle-text {
		font-weight: 600;
	}

	.filters-toggle .icon-chevron {
		transition: transform 0.2s ease;
	}

	.case-filters.filters-collapsed .filter-body {
		display: none;
	}

	.case-filters.filters-collapsed .filters-toggle .icon-chevron {
		transform: rotate(-90deg);
	}

.search-grid {
  display: block;
}

.entry-no {
   padding: 0;
}

.checkbox-display, .radio-display, .select-display {
	margin-left: 1em;
	margin-right: 1em;
}

.mobile-sort-bar {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 1em;
}

.mobile-sort-bar label {
	font-weight: 600;
	font-size: .9em;
}

.mobile-sort-bar select {
	/* flex: 1; */
	padding: 0.5em;
	font-size: 1em;
	box-sizing: border-box;
	border: 1px solid #767676;
	border-radius: .25em;
}

.mobile-sort-direction {
	display: block;
	align-items: left;
	border: 1px solid #085ba3;
	border-radius: .25em;
	background: #085ba3;
	color: #fff;
	font-size: 1em;
	padding: 0.6em;
	cursor: pointer;
}

.mobile-sort-direction[aria-pressed="true"] {
	background-color: #085ba3;
	border-color: #085ba3;
	color: #fff;
}


.mobile-sort-direction:hover {
	background-color: #f5c800;
	border-color: #f5c800;
	color: #332F21;
}




	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }

	tr[hidden] {
		display: none;
	}
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 0.5em; 
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "Case"; }
	td:nth-of-type(2):before { content: "Offence"; }
	td:nth-of-type(3):before { content: "Sentence date"; }
	td:nth-of-type(4):before { content: "Sentence on the charge"; }
	td:nth-of-type(5):before { content: "Total sentence in the case"; }
	td:nth-of-type(6):before { content: "Offender age and gender"; }

	td.no-results-cell:before { content: none; }
	td.no-results-cell {
		padding-left: 0.75em;
		text-align: center;
	}

    tr > *:nth-child(1) {
  width: auto;
}

tr > *:nth-child(2) {
  width:auto;
}

tr > *:nth-child(3) {
  width:auto;
}

tr > *:nth-child(4) {
  width: auto;
}

tr > *:nth-child(5) {
  width: auto;
}

tr > *:nth-child(6) {
  width: auto;
}

.cf-heading, .cf-description {
    text-align: center;
}

.cf-heading {
    font-size: 3rem;
    line-height: 3rem;
}

.cf-description {
    font-size: 1.25rem;
}

#clearFiltersBtn {
	margin-left: 1em;
}


}
