//@import @mixins-directory;

@import "../../sbxscore/mixins.less";

@maincolor: grey;

.sbxs-booking-form{
	//border: 1px solid rgba(0, 0, 0, 0.3);
	padding: 40px;
	
	a.link{
		padding: 10px 15px;
		font-weight: 800;
		color: rgba(0, 0, 0, 0.8);
		font-size: 14px;
		&:hover{
			color: @maincolor;
		}
	}
	
	.narrow-layout{
		width: 100%;
		max-width: 550px;
		display: block;
		margin: 0 auto;
	}
	
	.heading{
		margin-top: 30px;
		margin-bottom: 40px;
	}
	/*
	h2{
		margin-top: 20px;
		margin-bottom: 20px;
	}
	*/
	
	ul.services{
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: center;
		margin: 0 auto;
		max-width: 400px;
		
		li{
			margin: 0;
			padding: 0;
			text-align: center;
			display: block;

			a.select-service, div.show-service{
				display: block;
				position: relative;
				text-align: left;

				border: 2px solid rgba(0, 0, 0, 0.5);
				display: block;
				padding: 15px;
				margin: 5px 0;
				padding-left: 115px;
				color: black;
				
				.imgholder{
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					width: 100px;

					overflow: hidden;
					img{
						position: absolute;
						top: 50%;
						left: 50%;
						.transform(translateY(-50%) translateX(-50%));
						min-width: 100%;
						min-height: 100%;
						height: 100%;
					}
				}
				.description{
					font-size: 11px;
				}
			}
			a.select-service{
				cursor: pointer;
				&:hover{
					.easing-transition(400ms);
					background-color: rgba(0, 0, 0, 0.80);
					color: white;
				}
			}
			

			
		}
	}

	ul.timeslots{
		
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: center;
		margin: 0 auto;
		max-width: 400px;
		
		li{
			
			margin: 0;
			padding: 0;
			text-align: center;
			display: block;
			
			a.timeslot_btn, div.timeslot_btn{
				display: block;
				position: relative;
				text-align: left;

				border: 2px solid rgba(0, 0, 0, 0.5);
				display: block;
				padding: 15px;
				margin: 5px 0;
				text-align: center;
				color: black;
				
				.date{
					font-size: 14px;
					i{
						color: rgba(0, 0, 0, 0.50);
					}
				}
				.time{
					font-size: 16px;
					font-weight: bold;
					i{
						color: rgba(0, 0, 0, 0.50);
					}
				}
		
				&:hover, &.active{

				}
			}
			
			a.timeslot_btn{
				cursor: pointer;
				&:hover{
					.easing-transition(400ms);
					background-color: rgba(0, 0, 0, 0.80);
					color: white;
					.date, .time{
						i{
							color: rgba(255, 255, 255, 0.5);
						}
					}
				}
			}
			
			
			
		}
	}
	
	.days_and_timeslots{
		
		.date{
			font-size: 15px;
			//border-bottom: 2px solid rgba(255, 255, 255, 0.5);
			margin: 30px 0 10px;
			display: block;
			background: rgba(0, 0, 0, 0.8);
			padding: 3px 5px;
			color: white;
			i{
				color: rgba(255, 255, 255, 0.5);
			}
		}
		
		.timeslot_btn{
			border: 2px solid rgba(0, 0, 0, 0.50);
			padding: 3px 5px;
			display: inline-block;
			margin: 4px 2px;
			cursor: pointer;
			font-size: 12px;
			font-weight: bold;
			.easing-transition(400ms);
			color: rgba(0, 0, 0, 0.80);
			i{
				color: rgba(0, 0, 0, 0.50);
			}
			&:hover{
				border: 2px solid @maincolor;
				background: @maincolor;
				color: black;
				i{
					color: rgba(0, 0, 0, 0.8);
				}
			}
		}
	}
	
	/*
	a.timestamp_btn{
		border: 1px solid red;
		display: block;
		padding: 15px;
		margin: 5px 0;
		
		.date{
			font-size: 14px;
			font-weight: bold;
			i{
				color: rgba(0, 0, 0, 0.75);
			}
		}
		.time{
			font-size: 16px;
			font-weight: bold;
			i{
				color: rgba(0, 0, 0, 0.75);
			}
		}
		
		&:hover{
			background-color: red;
		}
	}
	*/
	
	ul.booking-nav{
		list-style: none;
		text-align: center;
		padding: 15px 0;
		margin: 15px 0;
		border-bottom: 1px solid black;
		
		li{
			display: inline-block;
			padding: 0 20px;
			margin: 0;
			position: relative;
			&:after {
				position: absolute;
				right: -15px;
				width: 30px;
				top: 50%;
				.transform(translateY(-50%));
				content: "\f054";
				font-family: "Font Awesome 5 Pro";
    	}
    	
				
			&:last-child{
				&:after{
					content: '';
				}
			}
    
			a{
				font-size: 10px;
				color: rgba(0, 0, 0, 0.5);
				cursor: pointer;
				padding: 0 5px;
				display: block;
				//.easing-transition(800ms);
				i{
					font-size: 14px;
					background: rgba(0, 0, 0, 0.30);
					color: white;
					display: inline-block;
					width: 30px;
					height: 30px;
					line-height: 30px;
					text-align: center;
					.border-radius(100%);
				}

				&.done{
					color: rgba(0, 0, 0, 1);
					i{
						background-color: rgba(0, 0, 0, 1);
					}
				}
								
				&:hover, &.current{
					color: rgba(0, 0, 0, 0.8);
					i{
						background-color: @maincolor;
					}
				}

				
			}
		}
		
	}
	
	
	.bottom-nav{
		padding: 15px 0;
		margin: 35px 0;
		border-top: 1px solid black;
		.floatleft{
			float:left;
		}
		.floatright{
			float:right;
		}
		clear: both;
	}
	
	
}

.loader{
	width: 100%;
	height: 80px;
	display: none;
}

.lds-ripple {
  display: block;
  margin: 0 auto;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid black;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}