/*GF general*/
.gform_validation_errors{display:none;}
.w-html .gf_postcode_wrapper .gfield_validation_message,
.w-html .gf_skip_hires_wrapper .gfield_validation_message{
    background: #902525 !important; 
    color: #fff !important;
    height: auto;
    width: 100% !important;
    display: block !important;
    border: 0 !important;
    border-radius: 100px;
    font-size: 0.8rem !important;
    font-weight: normal;
    padding: 5px 10px !important;
    position: relative;
    top: 10px !important;
	margin-left: 0px !important;
}
.gf_postcode .gfield_validation_message,
.gf_skip_hires .gfield_validation_message{
    background: #902525 !important;
    color: #902525 !important;
    height: auto;
    width: auto;
    display: inline;
    border: 0 !important;
    border-radius: 100px;
    font-size: 0.8rem !important;
    font-weight: normal;
    padding: 5px !important;
    position: relative;
    top: 10px !important;
    margin-left: 0px !important;
}
.gf_skip_hires_wrapper .gfield_description{left:12px;}

/*jQuery UI Autocomplete*/
.ui-autocomplete.ui-front{
    height: 200px;
    overflow-y: auto;
    width: 1043.09px;
    border-radius: 10px;
    border-top: 0px;
    padding: 15px;
    font-size: 0.9rem;
    background: #f4f4f4;
    border: 1px solid #eee;
}
.ui-state-active,
.ui-menu-item .ui-state-active{
	border: 0px !important;
	background: #505050 !important;
	font-weight: normal !important;
	color: #ffffff !important;
	border-radius: 10px !important;
}

/*GF Postcode validation*/
.gf_postcode #field_submit input{align-self:start !important;}
.gf_postcode_wrapper .gform_ajax_spinner{width:20px;left:-60px;position:relative;}
.gf_postcode .button{
	margin-top: 0px !important;
    top: px;
    left: -70px;
}
.gf_postcode .gfield input { max-width: none !important;}
.gf-postcode-field .gfield_description{
	height:0;
	width:32px !important;
	top:-49px;
	left:20px;
	position:relative;
}
.gf-postcode-field .gfield_validation_message{left:0px !important;}
.gform_wrapper .gf_postcode input[type="text"]{
	border-radius:100px;
	border-color:#dddddd;
	padding-left:40px !important;
}
.gf_postcode input[type="text"]::placeholder {font-weight:bold;color:#333;}
.gf-postcode-field input[type="text"]{padding-left:40px !important;}
.gform_wrapper.gf_postcode_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):not(.ginput_total):not(.ginput_shipping_price):not(.ginput_product_price){
	padding-left:40px !important;
}
.gform_wrapper.gravity-theme .gfield.gfield--width-two-thirds.gf-postcode-field{grid-column: span 11 !important;}

/*GF skip hire form*/
.gf_skip_hires_wrapper .gf-postcode-field .gfield_description {
    top: 27px;
    left: 10px;
    position: relative;
}
.gf_page_steps{ border:0 !important;}
.gf_step_number,
.gf_step_active .gf_step_number{
	background: linear-gradient(45deg, #6fa12e, #95c11f) !important;
	color:#fff !important;
	border:0 !important;
}
.gform_previous_button,
.gform_next_button,
.button,
.gform_button{
	border-radius:100px !important;
	border:0 !important;
	background: #95c11f !important;
	color:#fff !important;
	font-size:0.9rem;
	font-weight:bold;
	padding: 1rem !important;
    line-height: 1rem !important;
    height: 48px !important;
}
.gform_previous_button:hover,
.gform_next_button:hover,
.button:hover,
.gform_button:hover{background: #6fa12e !important;}
.ginput_container_coupon .gf_coupon_code{width:80% !important;}
.button{padding:15px 30px 15px 40px}
.order-summary{border-radius:100px !important; margin-bottom:0 !important;}
.order-summary td{background:#fff !important;}
.order-summary tr td:first-child{font-weight:normal;width:50%;}
.ginput_total{
	font-size: 1.3rem !important;
	position:relative;
	left: 0;
    color: #638f29 !important;
    font-weight: bold !important;
    margin-bottom: 35px !important;
}
.ginput_container_coupon input:not([type=submit]){width: auto !important;}

/* Skip Hire query shortcode CSS*/ 
.skip-hire-item .w-image-h{
	height:120px;
	text-align:center;
	margin-bottom:30px;
}
.skip-hire-item h4{
	font-size:1rem;
	font-weight:700;
	text-align:center;
	font-style:italic;
}
.skip-hire-container.cols-3 .skip-hire-item{
 	margin:0.5%;
	display:inline-block;
	width:32%;
	border:3px solid #6fa12e;
	padding:2.5rem;
	border-radius:15px;
	background:#f7f7f7;
}
.skip-hire-container.cols-4 .skip-hire-item{
 	margin:0.5%;
	width:24%;
	border:3px solid #6fa12e;
	padding:2.5rem;
	border-radius:15px;
	background:#f7f7f7;
	float:left;
}
h3.skip-hire-item-title{
    font-family: var(--h4-font-family, inherit) !important;
	font-weight: var(--h4-font-weight, inherit) !important;
	font-size: var(--h4-font-size, inherit);
    text-align:center !important;
    display:block;
    width:100%;
	color:#6fa12e;
}
.skip-hire-item-content{
	min-height:110px;
	text-align:center;
	font-size:0.95rem;
}
.skip-hire-item-footer{
    margin-top:15px;
	font-size:0.8rem;
	text-align:center;
	min-height:140px;
}
.skip-item-footer-price {width: 100%;display: inline-block;}
.skip-hire-item-footer h4{ margin:0; font-style:normal;}
.skip-hire-item-footer a{
    display:inline-block;
    border: 2px solid #76a62b !important;
    text-decoration:none !important;
    text-align:center;
	margin:3%;
	line-height:1;
	font-family: var(--h1-font-family);
	font-weight:700 !important;
	font-size:1.1rem;
	border-radius:100px;
	padding:0.8rem 3.7rem !important;
}
.skip-hire-item-footer a.on-driveway{
	background:linear-gradient(90deg,rgba(118, 166, 43, 1) 0%, rgba(130, 177, 39, 1) 50%, rgba(143, 188, 32, 1) 100%);
	color:#fff !important;
}
.skip-hire-item-footer a.on-road{
	background:#fff;
	margin-bottom: 20px;
	color:#76a62b !important;
}
.skip-hire-item-footer a.on-road span{ color:#000;}
.skip-hire-item-footer a span{font-size: 0.7rem;}
.skip-hire-item-footer a:hover {
	background:linear-gradient(90deg,#628f29 0%, #628f29 50%, #628f29 100%) !important;
    color: #fff !important;
	opacity:1;
}
.skip-hire-item-footer a:hover span{color: #fff !important;}
.gf_skip_hires .ui-datepicker {
	display:block !important;
	padding:1rem;
	width:100% !important;
	box-shadow:none !important;
	border:0!important;
} 
.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-datepicker-today .ui-state-active{
	background:#fbfbfb !important; border:1px solid #000 !important; color:#000 !important;
}
.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-default:hover,
.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-default:focus{
	background:#6fa12e !important;
	color:#fff !important;
	border:1px solid #6fa12e !important;
}
.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-disabled.ui-datepicker-today .ui-state-default{ color:#fff; background: #666;opacity: 1;}
.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-active{
	background:#6fa12e !important;
	color:#fff !important;
	border:1px solid #fff !important;
}
.ui-datepicker .ui-datepicker-title { line-height: unset !important;}

/*Phase II*/
.marginTop20{margin-top:25px;}
.gform_wrapper.gravity-theme .gf_waste_type_v2 legend,
h3.choose-skip-size-title{
	font-family: var(--h3-font-family, inherit);
    font-weight: var(--h3-font-weight, inherit);
    font-size: var(--h3-font-size, inherit);
    font-style: var(--h3-font-style, inherit);
    line-height: var(--h3-line-height, 1.4);
    letter-spacing: var(--h3-letter-spacing, inherit);
    text-transform: var(--h3-text-transform, inherit);
    margin-bottom: var(--h3-margin-bottom, 1.5rem);
}
.gf_waste_type_v2 .gfield_required{display:none !important;}
.gf_waste_type_v2.gfield--type-radio{margin:2rem 0 !important;}
.gf_waste_type .ginput_container_radio input{display: none !important;}
.gf_waste_type .ginput_container_radio .gchoice{
	width:33.3%;
	/*display:inline-block;*/
	float:left;
	font-weight:bold;
	text-align:center;
}
.gf_waste_type_v2  .ginput_container_radio .gchoice label{
	border:3px solid #6fa12e;
	width:100%;
	padding:2rem;
	border-radius:15px;
	font-size:1.4rem !important;
	background:#f7f7f7;
}
.gf_waste_type_v2 .ginput_container_radio .gchoice label p{
	font-weight:normal;
	font-size:1rem !important;
}
/*.gf_waste_type_v2 .ginput_container_radio .gchoice label:hover,*/
.gf_waste_type_v2 .ginput_container_radio .gchoice label.selected{
	background:#6fa12e !important;
	color:#fff !important;
}

/* Buttonize Radio & Checkbox Fields 3 Col */
.gform_wrapper .gfield.buttonized_3_col .gfield_radio .gchoice,
.gform_wrapper .gfield.buttonized_3_col .gfield_checkbox .gchoice {
    position: relative;
    text-align: center;
}
.gform_wrapper .gfield.buttonized_3_col input[type="radio"],
.gform_wrapper .gfield.buttonized_3_col input[type="checkbox"] {
    position: absolute;
    left: -9999px;
}
.gform_wrapper .gfield.buttonized_3_col .gfield_radio label,
.gform_wrapper .gfield.buttonized_3_col .gfield_checkbox label {
    display: block !important;
    position: relative;
    max-width: 100%;
    padding: 1em;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    color: #333333;
    background-color: #f7f7f7;
    cursor: pointer;
	border:3px solid #6fa12e;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.gform_wrapper .gfield.buttonized_3_col input[type="radio"]:focus+label,
.gform_wrapper .gfield.buttonized_3_col input[type="checkbox"]:focus+label {
    outline: none;
 
}
.gform_wrapper .gfield.buttonized_3_col input[type="radio"]:checked+label,
.gform_wrapper .gfield.buttonized_3_col input[type="checkbox"]:checked+label {
    background-color: #6fa12e;
    color: #ffffff;
}
.gform_wrapper .gfield.buttonized_3_col .gfield_radio,
.gform_wrapper .gfield.buttonized_3_col .gfield_checkbox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.8em;
}
.gform_wrapper .gfield.buttonized_3_col .gfield_checkbox {
    grid-gap: 1.8em !important;
}	
.gform_wrapper .gfield.buttonized_3_col .gfield_checkbox .gchoice {
    display: block !important;
}

/*Addons*/
.price-addon{
	background-color: #f7f7f7;
    cursor: pointer;
    border: 3px solid #6fa12e;
	padding:15px;
	border-radius:15px;
	text-align:center;
}
.price-addon input{
	max-width:60px !important;
	margin:0px !important;
	position:relative;
	top:-10px;
	left:10px;
	padding:5px !important;
	height:0px !important;
	border:1px solid #eee !important;
}
.price-addon .ginput_product_price{
	color:#6fa12e !important;
	font-weight:bold;
}
.price-addon .gform-field-label{margin-bottom:15px !important;}
.price-addon .ginput_product_price_label{display:none !important;}
.price-addon .ginput_quantity_label{margin-left:10px;}
.price-addon input[type=number]::-webkit-inner-spin-button,
.price-addon input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
	left:15px;
	position:relative;
}
.price-addon input[type=number]{
	border-radius:15px 0 0 15px;
	padding-right:0 !important;
}
.addon-warning{color:red;margin:25px 0;}
.total-price{margin-top:0px;}

/*Responsive:media queries*/
@media(max-width:768px){
	.w-html .gf_postcode_wrapper{margin-bottom: 28px !important;}
	.gf_page_steps{display:none !important;}
	.gf_step_number,
	.gf_step_active .gf_step_number{
		width:20px !important;
		height:20px !important;
	}
	.gform_wrapper.gravity-theme .gf_step_completed .gf_step_number::before {
		width:20px !important;
		height:20px !important;
	}
	.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=image]):not([type=file]):not([type=submit]) {
		line-height: 1 !important;
	}
	.gf_postcode_wrapper.gravity-theme .gform_fields{
		display:block !important;
	}
	.gf_postcode_wrapper .top_label{ 
		text-align: left;
	}
	.gf_postcode_wrapper  .gfield_radio{
		margin-bottom: 20px;
	}
	.gf_postcode_wrapper .gf-postcode-field{
		width: 76%;
        float: left;
        position: relative;
	}
	.gf_postcode_wrapper #field_submit{
		width: 24%;
        left: 20px;
        position: relative;
	}
	.skip-hire-container ul.col3{ 
		column-count: 1;
	}
	.skip-hire-container ul li{
		margin-bottom:20px;
	}
	#inline-datepicker span,
	#inline-datepicker a.ui-state-default{
		border-radius:1px !important;
	}
	.gravity-theme.ui-datepicker {
		max-width: 320px !important;
  	}	
	.gf_skip_hires .gf_step{
		margin: 8px 18px 8px 0 !important;
	}
	.gf_skip_hires .gf_step span.gf_step_label{
		padding-left: 9px !important;
	}
	.skip-hire-container.cols-3 .skip-hire-item {padding: 2.5rem 1rem !important;}
	.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-disabled .ui-state-default,
	.gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-state-default{
        height: 30px !important;
        width: 40px !important;
    }
	.gravity-theme.ui-datepicker { padding: 0 !important;}
	.ui-datepicker-multi-2 .ui-datepicker-group {width: 100% !important; margin-bottom: 30px;}
	.gform_fields .gf-postcode-field .gfield_validation_message{
		width: 100% !important;
		display: block !important;
		padding: 5px 20px !important;
	}
	.gform_wrapper.gravity-theme .gf_waste_type_v2 legend,
	h3.choose-skip-size-title{
		font-size:24px !important;
	}
	.skip-hire-container.cols-3 .skip-hire-item{
		width:99% !important;
	}
	.skip-hire-container.cols-4 .skip-hire-item{
	  width:99% !important;
	}
	.gf_waste_type .ginput_container_radio .gchoice{
		width:100% !important;
		margin-bottom:20px !important;
	}
	.skip-hire-item-footer a {padding: 1rem 0.5rem !important;}
	/* Layout Buttonized Inputs As 3-Column Grid */
	.gform_wrapper .gfield.buttonized_3_col .gfield_radio,
	.gform_wrapper .gfield.buttonized_3_col .gfield_checkbox {
		display: block !important;
		margin-bottom:15px !important;
	}
	.gfield.buttonized_3_col .gchoice{
		margin-bottom:10px !important;
	}
	.gf_skip_hires_wrapper.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=image]):not([type=file]):not([type=submit]) {
		line-height:1 !important;
	}
	.gf_skip_hires_wrapper.gform_wrapper .ginput_quantity {
		border-radius: 15px;
		text-align: center;
		padding: 3px !important;
		max-width: 50px !important;
	}
}
@media(min-width:769px){
	#inline-datepicker{
		display:block;
		margin:auto;
		max-width:700px;
	}
	#inline-datepicker span,
	#inline-datepicker a.ui-state-default{
		border-radius:1px !important;
		width:100%;
		height:49px;
	}
	#inline-datepicker a.ui-state-default:hover,
	#inline-datepicker a.ui-state-active{
		height:50px;
		width:70px;
	}
	.ui-datepicker-multi-2 .ui-datepicker-group {padding:1% !important;}
	.ui-state-default{
		width:100% !important;
		height:100% !important;
	}
	.gform_fields .ginput_container_coupon .gf_coupon_code {
		width: 72% !important;
	}
	.gf_waste_type_v2 .ginput_container_radio .gchoice label:hover{
		background:#6fa12e !important;
		color:#fff !important;
	}
}
@media only screen and (max-width: 1099px) and (min-width: 801px) {
	.skip-hire-container.cols-3 .skip-hire-item{
		width:48% !important;
	}
	.skip-hire-container.cols-4 .skip-hire-item{
	  width:48% !important;
	}
}