@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/*common styles*/
html {scroll-behavior: smooth;}
input:focus, textarea:focus, select:focus, button:active, button:focus, a:focus { outline: 0; }
.w-100 { width: 100%; }
body, h1, h2, h3, h4, h5, p, .booking-form-styles, .booking-form-styles h1, .booking-form-styles h2, .booking-form-styles h3, .booking-form-styles h4, .booking-form-styles h5 {font-family: "Roboto", sans-serif;}

/*book your service form*/
.booking-form-styles .bs-form-heading { margin-bottom: 40px; font-size: 52px; font-weight: 700; letter-spacing: 0.25px; color: #161616; text-align: center;  }
.booking-form-styles .btn.next  { box-shadow: none; letter-spacing: 0; background-color: #C82127; color: #fff; border:0; border-radius: 10px; color: #fff; font-size: 18px; text-transform: uppercase; font-weight: 700; outline: 0; min-width: 250px; float: none !important; display: inline-block; }
.booking-form-styles .btn.next:hover, .booking-form-styles .btn.next:focus { background: #840C10; color: #fff;  }

.booking-form-styles .btn.prev  { box-shadow: none; letter-spacing: 0; background-color: transparent; color: #C82127; border:0; border-radius: 10px; font-size: 18px; text-transform: uppercase; font-weight: 700; outline: 0; min-width: 250px; float: none !important; display: inline-block; text-decoration: underline; }
.booking-form-styles .btn.prev:hover, .booking-form-styles .btn.prev:focus { color: #FF1313;  }
.booking-form-styles.umbraco-forms-form input.text:focus, .booking-form-styles.umbraco-forms-form input.title:focus, .booking-form-styles.umbraco-forms-form select:focus, .booking-form-styles.umbraco-forms-form textarea:focus { box-shadow: none;}
.booking-form-styles .btn.primary { box-shadow: none; letter-spacing: 0; background-color: #C82127; color: #fff; border:0; border-radius: 10px; color: #fff; font-size: 18px; text-transform: uppercase; font-weight: 700; outline: 0; min-width: 250px; float: none !important; display: inline-block; }
.booking-form-styles .btn.primary:hover, .booking-form-styles .btn.primary:focus { background: #840C10; color: #fff;  }
.booking-form-styles .form-control:focus { box-shadow: none; }
/* .booking-form-styles .umbraco-forms-field-wrapper { margin-bottom: 40px; } */
.booking-form-styles .umbraco-forms-page{ background: #f5f5f5; padding: 15px 40px 30px; border-radius: 10px; box-shadow: 1px 2px 3px #00000040; border: 1px solid #e1e1e1; }
.booking-form-styles.umbraco-forms-form fieldset { margin-right:0; padding-right: 0; }

.booking-form-styles .umbraco-forms-label { font-size: 16px; font-weight:500;}
.booking-form-styles .bs-form-sub-heading { color: #C82127; font-size: 30px; line-height: 35px; font-weight: 400;  }
.booking-form-styles .bottom-form-desc p { font-size: 18px; line-height: 24px; font-weight: 300; margin: 15px 0 0;}
.booking-form-styles.umbraco-forms-form input.text, .booking-form-styles.umbraco-forms-form textarea, .booking-form-styles.umbraco-forms-form select { border: 1px solid #00000094;  border-radius: 10px; font-weight: 400; color: #000; padding: 15px; font-size: 16px; width: 100%; max-width: 100% !important;}
.booking-form-styles #datepicker { border: 1px solid #00000094;  border-radius: 10px; font-weight: 400; color: #000; padding: 15px; font-size: 16px;}
.booking-form-styles.umbraco-forms-form .umbraco-forms-navigation { text-align: center; }
.booking-form-styles.umbraco-forms-form span.contourError, .booking-form-styles.umbraco-forms-form span.field-validation-error { font-size: 15px; }

.booking-form-styles select.form-control { -webkit-appearance:auto; -moz-appearance:auto; appearance:auto;}
.booking-form-styles .umbraco-forms-field.timeslot { margin-top: 40px; }

@media (max-width: 767px) {
    .booking-form-styles .bs-form-heading { font-size: 34px; line-height: 44px; }
	.booking-form-styles .bs-form-sub-heading { font-size: 25px; }
	
	.umbraco-forms-field.vehicleregistration, .umbraco-forms-field.make, .umbraco-forms-field.model, .umbraco-forms-field.firstname, .umbraco-forms-field.email, .umbraco-forms-field.suburb, .umbraco-forms-field.state { margin-bottom: 40px; }
}

@media (max-width: 575px) {

	.umbraco-forms-field.datepicker { margin-bottom: 40px; }
}

/*date picker*/
#ui-datepicker-div {font-family: "Roboto", sans-serif;border-radius: 10px;border: 1px solid #cccccc61;box-shadow: 1px 2px 3px #0000003d;margin-top: 5px;}
.ui-datepicker .ui-datepicker-header { background: none; border: 0; }
.ui-datepicker .ui-datepicker-prev { right: 20px; left: auto !important; }
.ui-datepicker .ui-datepicker-title { font-weight: 500; font-size: 17px; color: #333; }
.ui-datepicker th { font-weight: 500; color: #333; font-size: 15px;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button { border: 0 !important;background: transparent !important;font-weight: 500 !important; color: #666 !important; font-size: 15px; text-align: center; }
html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { background: #C82127 !important; color: #fff !important; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { background: #C82127 !important; color: #fff !important; border-radius: 50px; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus { background: #C82127 !important; color: #fff !important; border-radius: 50px; }
.ui-datepicker-header.ui-widget-header .ui-icon { cursor: pointer; background: url("/media/1kwfoskg/date-picker-arrow.png") no-repeat; height: 24px; width: 24px; background-size: 50px; }
.ui-datepicker .ui-datepicker-prev span { background-position: -14px -113px !important;  }
.ui-datepicker .ui-datepicker-next span { background-position: -8px -8px !important; }
.ui-datepicker-prev.ui-state-hover, .ui-datepicker .ui-datepicker-next.ui-state-hover { background: none !important; border:0 !important; top: 0 !important; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {top: 0 !important;}

/*time slot*/
.time-slot-button { padding: 10px; font-size: 15px; font-weight: 500;}

/*summary form*/
.umbraco-forms-submitmessage-html .header h1 { color: #000 !important; font-weight: 600; }
.umbraco-forms-submitmessage-html .details p span {font-weight: 700 !important; font-size: 18px; }
.umbraco-forms-submitmessage-html .details p { font-size: 18px !important;  color: #000 !important; font-weight: 300;}
.umbraco-forms-submitmessage-html { text-align: center; background: #f5f5f5; padding: 40px; border-radius: 10px; box-shadow: 1px 2px 3px #00000040; border: 1px solid #e1e1e1; }
.umbraco-forms-submitmessage-html .details { border: 0 !important; background: none !important; }

/*Styles for step counter*/
.step-counter .step {padding: 5px 0; text-align: center;}
.step-counter.step-clickable .step { cursor: pointer;}
.step-counter .step-number {  color: #ccc; font-size: 20px; -moz-border-radius: 50% !important; -webkit-border-radius: 50% !important; border-radius: 50% !important;  display: inline-block; margin: auto auto 5px; padding: 8px;
 border: 3px solid #e5e5e5; position: relative; z-index: 5; height: 50px; width: 50px;  text-align: center; background-color: #ffffff;}
.step-counter .step-title { font-size: 16px; position: relative; text-transform: uppercase;}
.step-counter .step:first-child .step-title::after,
.step-counter .step:not(:last-child) .step-title::after,
.step-counter .step:not(:first-child) .step-title::before,
.step-counter .step:last-child .step-title::before { content: ""; height: 3px; width: 50%; position: absolute; background-color: #e5e5e5; top: -34px; z-index: 4; -moz-transform: translateY(100%); -ms-transform: translateY(100%);
 -o-transform: translateY(100%);  -webkit-transform: translateY(100%); transform: translateY(100%);}
.step-counter .step-title::after { left: 50%;}
.step-counter .step-title::before {right: 50%;}
.step-counter .step.active .step-number {border-color: #C82127;}
.step-counter .step.active .step-number, .step-counter .step.active .step-title { color: #C82127;}
.step-counter .step.active .step-title::after, .step-counter .step.active .step-title::before {  background-color: #FF1313;}
.step-counter .step.done .step-number { border-color: #c82127;}
.step-counter .step.done .step-number, .step-counter .step.done .step-title { color: #c82127;}
.step-counter .step.done .step-title::after, .step-counter .step.done .step-title::before { background-color: #c82127; }
.step-counter .step.error .step-number { border-color: #d9534f;}
.step-counter .step.error .step-number, .step-counter .step.error .step-title { color: #d9534f;}.step-counter .step.error .step-title::after,.step-counter .step.error .step-title::before { background-color: #d9534f; }
.center-left { padding-left: 12%;}
.centerdiv { display: flex; align-items: center;justify-content: center; margin-bottom: 35px;}

@media (max-width: 767px) {

.step-counter .step-number { margin: 0 50px; }
.step-counter .step { width: auto; }

}


@media (max-width: 640px) {

.step-counter .step-number { margin: 0 20px; }


}