:root {
	--st_home: #5fbd67;
	--st_builders: #2d656b;
}

.st_h2 {
	color:white;
	background:var(--st_builders);
	text-align:left;
	text-transform:uppercase;
	font-weight:bold;
	font-size:36px;
	padding:20px 20px;
	line-height:1.2;
}
.st_hr {
	margin:55px 10%;
	border-top:0;
	border-bottom: 2px dashed #ccc;
}

.greenbutton {
	background-color:var(--st_home);
	color:#fff;
	text-transform:uppercase;
	font-size:28px;
	line-height:1.4;
	font-weight:bold;
	border:0;
	padding:18px 80px 18px 44px;
	margin:1rem auto;
	border-radius:16px;
	display:block;
	text-align:left;
}
	.greenbutton:disabled {
		background-color:#999;
	}
	.greenbutton::after {
		content:'>';
		position:absolute;
		margin-left:10px;
	}
	.greenbutton:not(:disabled):hover {
		background-color:var(--st_builders);
	}
		.greenbutton:not(:disabled):hover::after {
			content: '>>';
		}
		.greenbutton:not(:disabled):active::after {
			content: '>>>';
		}

#skip_type {
	display:grid;
	gap:20px;
}
.st_header {
	border-radius:4px;
	color:white;
	text-align:center;
	text-transform:uppercase;
	font-weight:bold;
	font-size:36px;
	padding:20px;
	line-height:1.2;
}
	.st_header.st_home {
		background-color:var(--st_home);
	}
	.st_header.st_builders {
		background-color:var(--st_builders);
		grid-row:4;
	}
.st_skip {
	background-color:#f5f5f5;
	border-radius:16px;
	min-height:100px;
	font-weight:normal;
}
.sl_location {
	font-weight:normal;
}
	.st_skip:has(input:checked),
	.sl_location:has(input:checked) {
		background:#d3d3d3;
	}
	.st_skip>span:first-child {
		font-size:24px;
		color:white;
		text-align:center;
		text-transform:uppercase;
		font-weight:bold;
		padding:16px 0;
		display:block;
		border-radius:16px 16px 0 0;
	}
	.st_skip.st_home>span:first-child {
		background-color:var(--st_home);
	}
	.st_skip.st_builders>span:first-child {
		background-color:var(--st_builders);
	}
	.st_skip ul {
		text-align:left;
	}
	.s_icon {
		display:block;
		margin:1rem 25px;
		height:120px;
		background-size:contain;
		background-position:center;
		background-repeat:no-repeat;
		position:relative;
	}
		.greenbag {
			position:absolute;
			box-sizing:border-box;
			top:0;
			right:-20px;
			width:100px;
			height:100px;
			background-size:contain;
			background-position:center center;
			background-repeat:no-repeat;
			background-image:url('/userfiles/design/greenbag.svg');
			text-align:center;
			color:white;
			font-weight:bold;
			text-transform:uppercase;
			font-size:13px;
			line-height:1;
			padding-top:60px;
		}
		span.s_icon.eightyardopen {
			background-image:url('/userfiles/design/8yardopen.svg');
		}
		span.s_icon.eightyardopenramp {
			background-image:url('/userfiles/design/8yardopen-ramp.svg');
		}
		span.s_icon.fourteenyardenclosed {
			background-image:url('/userfiles/design/14yard-enclosed.svg');
		}
	.st_skip .pricefrom {
		display:block;
		font-size:31px;
		font-weight:bold;
		color:black;
		margin:1.5rem 0 1rem 25px;
		padding-left:30px;
	}
		.st_skip .pricefrom span {
			color:var(--st_home);
		}
	.st_skip ul {
		font-size:21px;
		font-weight:600;
		padding-left:0;
		margin-left:25px;
	}
		.st_skip ul li {
			padding:6px 0;
			list-style:none;
		}
			.st_skip ul li::before {
				content:'';
				display:block;
				float:left;
				clear:both;
				width:20px;
				height:20px;
				margin-right:10px;
				margin-bottom:10px;
				background-size:contain;
				background-position:top center;
				background-repeat:no-repeat;
				background-image:url('/userfiles/design/tick.svg');
			}
	.st_skip label,
	.sl_location label {
		display:block;
		border-radius:6px;
		text-align:center;
		color:white;
		font-weight:bold;
		text-transform:uppercase;
		font-size:24px;
		padding:12px 0;
		margin:0 25px 20px 25px;
		cursor:pointer;
	}
		.st_skip.st_home label,
		.sl_location label {
			background-color:var(--st_home);
		}
		.st_skip.st_builders label {
			background-color:var(--st_builders);
		}
		.st_skip label:hover,
		.sl_location label:hover {
			filter: brightness(85%);
		}
	.st_note {
		text-align:center;
		color:black;
		font-size:14px;
	}

div.allowed_waste_types {
	margin:0 25px 10px 25px;
	font-size:14px;
}
table.allowed_waste_types {
	display:none;
}

li.largetext {
	font-size:22px;
	line-height:1.3;
}
li.red {
	color:#de3326;
	font-weight:600;
}
#skip_waste_types {
	min-width:100%;
	border-collapse: separate;
	border-spacing:2px;
}
	#skip_waste_types th,
	#skip_waste_types td {
		background:#f5f5f5;
		font-size:21px;
		text-transform:uppercase;
		color:black;
		padding:12px;
		text-align:center;
	}
	#skip_waste_types th span {
		font-size:18px;
		text-transform:none;
	}
	#skip_waste_types th:first-child,
	#skip_waste_types td:first-child {
		text-align:left;
	}
	#skip_waste_types .st_home {
		background-color:var(--st_home);
		color:white;
	}
	#skip_waste_types .st_builders {
		background-color:var(--st_builders);
		color:white;
	}
	.swt_no {
		display:inline-block;
		text-indent:-500em;
		background-size:contain;
		background-repeat: no-repeat;
		background-position: center;
		background-image:url('/userfiles/design/cross.svg');
		width:20px;
		height:20px;
	}
	.swt_yes {
		display:inline-block;
		text-indent:-500em;
		background-size:contain;
		background-repeat: no-repeat;
		background-position: center;
		background-image:url('/userfiles/design/tick.svg');
		width:20px;
		height:20px;
		}
#skip_location {
	display:grid;
	gap:20px;
}
	.sl_location {
		background-color:#f5f5f5;
		border-radius:16px;
		min-height:100px;
		text-align:center;
	}
	.sl_location_header {
		display:block;
		border-radius:16px 16px 0 0;
		background-color: var(--st_home);
		color:white;
		text-align:center;
		text-transform:uppercase;
		font-weight:bold;
		font-size:30px;
		padding:20px;
		line-height:1.2;
	}
	.sl_location_icon {
		display:block;
		margin:1rem 25px;
		height:150px;
		background-size:contain;
		background-position:center;
		background-repeat:no-repeat;
		position:relative;
	}
		.sl_location_icon.privateproperty {
			background-image:url('/userfiles/design/private_location.svg');
		}
		.sl_location_icon.publicroad {
			background-image:url('/userfiles/design/public_location.svg');
		}
	.sl_location_note {
		display:block;
		margin:1rem 25px;
	}
	.skip_booking_details_header span {
		text-transform:none;
		font-weight:100;
	}
#sbd {
	margin:20px 0;
}
	#sbd>div {
		min-height:50px;
	}
	#sbd :last-child {

	}
	#sbd_1,
	#sbd_2 {
		text-align:center;
		font-weight:bold;
		font-size:24px;
	}
		#sbd_1>span,
		#sbd_2>span {
			width:90%;
			max-width:180px;
		}
	#sbd_3 {
		grid-column:span 2;
	}
		#sbd_3 fieldset {
			border:0;
			padding:0;
			margin:0;
		}
		#sbd_3 legend {
			display:none;
		}
		#sbd_3 label {
			display:none;
		}
			#sbd_3 .li_checkbox input {
				width:auto;
			}
			#sbd_3 .li_checkbox label {
				display:inline-block;
			}

		#sbd_3 input,
		#sbd_3 textarea,
		#sbd_3 select {
			width:100%;
			font-size:20px;
			padding:0.5em;
			box-sizing:border-box;
		}
			#sbd_3 input#postcode {
				width:50%;
				text-transform:uppercase;
			}
			#sbd_3 #opc_button {
				font-size: 20px;
				padding: 0.5em;
				border: 0;
				background: var(--st_home);
				color: white;
			}
			#sbd_3 .datepicker {
				max-width:250px;
			}
			#sbd_3 p.note {
				display:inline-block;
			}
			#to_days {
				display: inline-block;
				position: relative;
				top: -1.5rem;
			}
			.likeinput {
				font-size:20px;
				padding: .5em;
				background: white;
				border: 2px #eee inset;
				width: 240px;
				display: inline-block;
				box-sizing:border-box;
			}

	#sbd_4 {
		grid-column:span 2;
		grid-row:2;
		background-color:var(--st_home);
		color:#fff;
		text-align:center;
		border-radius:16px;
		padding:16px;
		font-size:20px;
		line-height:1.3;
	}
		#sbd_4 h4 {
			font-size:36px;
			font-weight:bold;
			color:#fff;
		}
	#sbd_5,
	#sbd_6 {
		grid-column:span 2;
	}
	
	#sbd_6 span.definedwidth {
		width:auto;
	}

#extra_waste,
#cart {
	width:100%;
	border-collapse:separate;
	border-spacing:0 2px;
}

	#extra_waste input[type=number] {
		text-align:right;
	}

	#extra_waste tr,
	#cart tr {
		background-color:#e7e7e7;
	}
		#extra_waste tr:nth-child(even),
		#cart tr:nth-child(even) {
			background-color:#e0e0e0;
		}

	#extra_waste th,
	#cart th {
		background-color:var(--st_home);
		color:#fff;
		padding:4px;
		font-size:21px;
		text-transform:uppercase;
	}
		#extra_waste th:first-child {
			color:#000;
		}
	#extra_waste td,
	#cart td {
		padding:4px;
	}

	.pform li input.ew {
		width:60px;
		text-align:right;
	}

.nobr {
	white-space: nowrap;
}
.tar {
	text-align:right;
}

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

	.pform li.li_checkbox span {
		width:auto;
	}

	#extra_waste,
	#extra_waste tbody,
	#extra_waste tr {
		display:block;
	}
		#extra_waste tr:first-child {
			display:none;
		}
		#extra_waste tr {
			display:grid;
			grid-template-columns:auto auto;
			border-top:2px solid var(--st_home);
			border-bottom:12px solid transparent;
		}
		#extra_waste tr :first-child {
			grid-column: 1 / 3;
		}
	#cart th,
	#cart td {
		font-size:16px;
	}
}

@media only screen and (min-width: 601px) {
	#skip_booking_details {
		background:#f5f5f5;
	}
	.st_skip ul {
		min-height:220px;
	}
	.sl_location_note {
		min-height:100px;
	}
	#skip_location {
		grid-template-columns:1fr 1fr;
	}
	#extra_waste,
	#extra_waste tbody,
	#extra_waste tr {
		display:revert;
	}
}

@media only screen and (min-width: 800px) {
	#sbd {
		display:grid;
		gap:20px;
		margin:20px;
	}
}

@media only screen and (min-width: 1024px) {
	#skip_type {
		grid-template-columns:1fr 1fr 1fr 1fr;
	}
	.st_header.st_builders {
		grid-row:1;
		grid-column: 3 / 5
	}
	.st_header {
		grid-column: 1 / 3;
	}
	div.allowed_waste_types {
		display:none;
	}
	table.allowed_waste_types {
		display:table;
	}
	.st_h2 {
		padding:20px 80px;
		margin-bottom:1em;
	}
	.largetext {
		margin-left:80px;
	}
	#extra_waste,
	#cart {
		border-spacing: 0 4px;
	}
	#extra_waste th,
	#cart th {
		padding-top:20px;
		padding-bottom:20px;
	}
	#extra_waste td,
	#cart td {
		padding-top:10px;
		padding-bottom:10px;
	}
		#extra_waste th:first-child,
		#extra_waste td:first-child {
			padding-left:80px;
		}
	.sl_location label {
		margin-right:3rem;
		margin-left:3rem;
	}
}
@media only screen and (min-width: 1280px) {
	
	#skip_waste_types {
		margin-top:20px;
	}
	
	#skip_waste_types th:first-child,
	#skip_waste_types td:first-child {
		padding-left:40px;
	}
	#sbd {
		grid-template-columns:2fr 3fr;
		gap:25px 82px;
		margin:40px;
		padding-bottom:40px;
	}
	#sbd>:nth-child(2) {
		grid-column:1;
		grid-row:2;
	}
	#sbd_3 {
		grid-column: 2;
		grid-row: 1;
	}
	#sbd_4 {
		grid-column:2;
		grid-row:2;
	}
}