@charset "utf-8";

.appointments-body{
	background-color: #ECEEEF;
	min-height: 100%;
}

.appointments .appointment-box{
	background-color: #fff;
}

.appointments .appointment-box .step-image{
	width: 400px;
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
}
@media(max-width: 545px){
	.appointments .appointment-box .step-image{
		width: 100%;
	}
}

.appointments .appointment-box .content{
	padding: 30px;
}

.appointments .appointment-box h1{
	margin-bottom: 30px;
}

.appointments .appointment-box a.button{
	color: #425363;
	font-size: 16px;
	font-weight: 700;
}

.appointments #nearestStore_select{
	display: none;
}

.form-section-content{
    position:relative;
}
.form-section-content .store-name{
	display: flex;
	flex-direction: column;
}
.appointments .appointment-box .store-name__content .store-name{
	font-weight: 700;
	line-height: 19px;
}
.appointments .appointment-box .store-name__icon{
    position: absolute;
    left: 0; /* Padding to align */
    width: 15px;
}
.appointments .appointment-box .store-name__content{
    position: relative;
    padding-left: 25px; /* Gap + Spacing of icon, for alignment on overflow */
	padding-right: 20px; /* For absolute checkmark, seems they want it on first line all the time? */
}
.appointments .appointment-box .store-name__content::before{
	content: "";
	width: 15px;
}
.appointments .appointment-box .store-name__name{
    /* padding-right: 18px; */
}
.appointments .appointment-box .store-name__check{
	position: absolute;
	top: 4px;
	right: 0;
}
@media (min-width: 520px){
	.appointments .appointment-box .store-name__check{
		margin-left: 0;
		position: initial;
	}
}
.appointments .appointment-box .store-name__name--alternative{
    padding-right: 0;
}

.appointments .small{
	font-size: 14px;
	font-weight: 500;
}
.appointments .small a{
	font-size: 14px;
	font-weight: 500;
}
/* .store-name__search-again{
	display: block;
} */

/*media queries*/
@media(max-width: 991px){
	.appointments .btn-margin-sm{
		margin-bottom: 20px;
	}
}
@media(min-width: 768px){
	.appointments{
		padding-top: 30px;
		padding-bottom: 60px;
	}
	.appointments .appointment-box{
		width: 738px;
		margin-left: auto;
		margin-right: auto;
	}
	.appointments .appointment-box h1{
		text-align: center;	
	}
	.appointments .appointment-box .intro-text{
		text-align: center;
	}
}
@media(max-width: 767px){
	.appointments .container{
		padding-left: 0;
		padding-right: 0;
	}
	.appointments .appointment-box h1{
		font-size: 30px;
	}
	.appointments .appointment-box .content{
		padding-bottom: 80px;
	}
}

/*times table*/
.appointments .table{
	border: 2px solid #D9DDE0;
}

.appointments .table th,
.appointments .table td{
	text-align: center;
	font-size: 14px;
	border: 1px solid #D9DDE0;
}

.appointments .table th{
	padding: 10px;
	font-weight: 700;
	color: #fff;
	background-color: #425363;
}
.appointments .table td{
	padding: 20px;
}

.appointments .table tbody tr{
	cursor: pointer;
}
.appointments .table tbody tr input{
	cursor: pointer;
}
.appointments .table tr.active{
	background-color: #ECEEEF;
}

/*datepicker*/
.appointments #date::-webkit-input-placeholder {
  color: #425363;
  opacity: 1;
  font-weight: 500;
}
.appointments #date::-moz-placeholder {
  color: #425363;
  opacity: 1;
  font-weight: 500;
}
.appointments #date:-ms-input-placeholder {
  color: #425363;
  opacity: 1;
  font-weight: 500;
}
.appointments #date:-moz-placeholder { 
  color: #425363;
  opacity: 1;
  font-weight: 500;
}

.appointments .bootstrap-datetimepicker-widget{
	padding: 0;
}
.appointments .bootstrap-datetimepicker-widget.dropdown-menu.top::before,
.appointments .bootstrap-datetimepicker-widget.dropdown-menu.top::after,
.appointments .bootstrap-datetimepicker-widget.dropdown-menu.bottom::before,
.appointments .bootstrap-datetimepicker-widget.dropdown-menu.bottom::after{
	display: none;
}
.appointments .bootstrap-datetimepicker-widget table th{
	border-radius: 0;
	border: 1px solid #425363;
}
.appointments .bootstrap-datetimepicker-widget table td{
	border-radius: 0;
	border: 1px solid #D9DDE0;
}
/*line 1 - month/year select*/
.appointments .bootstrap-datetimepicker-widget table thead tr:first-child{
	background-color: #425363;
	color: #fff;
}
.appointments .bootstrap-datetimepicker-widget table thead tr:first-child th:hover{
	background-color: #425363;
}
.appointments .bootstrap-datetimepicker-widget table thead tr:first-child th.prev,
.appointments .bootstrap-datetimepicker-widget table thead tr:first-child th.next{
	color: #F6B333;
}
/*line 2 - days of week*/
.appointments .bootstrap-datetimepicker-widget table thead tr:nth-child(2){
	background-color: #00A3E0;
	color: #fff;
}
.appointments .bootstrap-datetimepicker-widget table thead tr:nth-child(2) th{
	border: 1px solid #33B5E6;
}
/*days*/
.appointments .bootstrap-datetimepicker-widget table td.day{
	color: #425363;
	font-weight: 700;
}
.appointments .bootstrap-datetimepicker-widget table td.day:hover{
	background-color: #fff;
}
.appointments .bootstrap-datetimepicker-widget table td.day.disabled,
.appointments .bootstrap-datetimepicker-widget table td.day.old,
.appointments .bootstrap-datetimepicker-widget table td.day.new{
	color: #8E98A1;
	font-weight: 400;
}
.appointments .bootstrap-datetimepicker-widget table td.day.disabled, 
.appointments .bootstrap-datetimepicker-widget table td.day.disabled:hover{
	background-color: #ECEEEF;
}
.appointments .bootstrap-datetimepicker-widget table td.day.active, 
.appointments .bootstrap-datetimepicker-widget table td.day.active:hover{
	background-color: #fff;
	text-shadow: none;
}
/*today*/
.appointments .bootstrap-datetimepicker-widget table td.day.today{
	position: static;
}
.appointments .bootstrap-datetimepicker-widget table td.day.today::before{
	display: none;
}

@media(min-width: 546px){
	.appointments .bootstrap-datetimepicker-widget{
		min-width: 350px;
	}
}
@media(max-width: 545px){
	.appointments .bootstrap-datetimepicker-widget{
		width: 100%;
	}
}

/*address*/
.appointments #details_enter_manually_fields{
	display: none;
}

.appointments #details_postcode_lookup {
	font-size: 14px;
	line-height: 18px;
	font-weight: 700;
	color: #fff !important;
}
.appointments #details_postcode_lookup_failed {
	font-size:14px;
	margin-bottom:0;
	color:#e50944;
	display:none;
}

.appointments .details-postcode-wrp {
	position: relative;
}
.appointments #details_postcode {
	/*width:150px;*/
	border-right: 2px solid #D9DDE0;
}
.appointments #details_postcode_lookup {
	width: auto;
	height: 40px;
	padding: 0 15px;

	position: absolute;
	top: 0;
	left: 150px;
}

@media(min-width: 768px){
	.appointments #details_postcode {
		/*width:150px;*/
	}
	.appointments #details_postcode_lookup {
		left: 150px;
	}
}
@media(max-width: 767px){
	.appointments #details_postcode {
		/*width:50%;*/
	}
	.appointments #details_postcode_lookup {
		left: 50%;
		width: 50%;
		padding: 0 5px;
	}
}

.appointments #appointments_errors{
	margin-bottom: 10px;
}

.appointments #details_enter_manually_link{
	font-size: 14px;
	line-height: 16px;
	margin-top: 10px;
	display: inline-block;
}