/**
*	Appointment form styles
*/


p.price {
	margin: 0px !important;
}

#appointment_details {
	padding-bottom: 30px;
}

#appointment_details > img {
    display: block;
    width: 50px;
    margin: 0 auto;
}

#appointment_details #extras-wrapper,
#appointment_details #staff-wrapper,
#appointment_details #date-wrapper,
#appointment_details #slots-wrapper {
	border: 1px solid silver;
	border-radius: 5px;
	margin: 0px;
}

#appointment_details .separator {
	margin-top: 20px;
	margin-bottom: 0px;
	width: 70%;
	margin-left: 15%;
}

#appointment_details #extras-wrapper .service_extra {
	border: 1px solid #b4b4b4;
	margin: 0px;
	padding: 0px 15px 15px 15px;
	color: #666;
	border-radius: 5px;
}

#appointment_details #extras-wrapper .service_extra label {
	/*display: block;*/
    margin-bottom: 5px;
}

#appointment_details #extras-wrapper .service_extra label:hover {
	cursor: help;
}

#appointment_details #extras-wrapper .service_extra label input {
	vertical-align: sub;
}

#appointment_details #extras-wrapper .service_extra label > span.ui-checkboxradio-icon{
	box-sizing: border-box;
}

#appointment_details #extras-wrapper .service_extra h4 {
	margin-bottom: 0px;
}

#appointment_details #staff-wrapper,
#appointment_details #date-wrapper {
	padding-bottom: 15px;
}
#appointment_details #staff-wrapper > select {
	width: 60%;
}

#appointment_details #slots-wrapper #slots {
	display: flex;
	flex-wrap: wrap;
}

#appointment_details #slots-wrapper #slots .slot .waiting {
	color: brown;
}

#appointment_details #slots-wrapper #slots .slot .ui-checkboxradio-icon, 
#appointment_details #extras-wrapper .service_extra .ui-checkboxradio-icon{
	width: 16px !important;
	height: 16px !important;
}

#appointment_details #slots-wrapper #slots .slot .ui-checkboxradio-label{
	/*width: 110px;*/
	/*height: 30px;
	border: 1px solid #aeaeae;
	border-radius: 5px;*/
	margin: 0px 7px 2px 0px;
	padding: .4em .5em;
}

#appointment_details #slots-wrapper #slots .slot .ui-state-active, 
#appointment_details #slots-wrapper #slots .slot  .ui-button:active, 
#appointment_details #slots-wrapper #slots .slot .ui-button.ui-state-active:hover,
#appointment_details #extras-wrapper .service_extra .ui-state-active, 
#appointment_details #extras-wrapper .service_extra  .ui-button:active, 
#appointment_details #extras-wrapper .service_extra .ui-button.ui-state-active:hover {
	border: 1px solid #aeaeae;
	background-color: #808080;
	color: #fff;
	box-shadow: none !important;
}

#appointment_details #slots-wrapper #slots .slot .ui-icon-background,
#appointment_details #slots-wrapper #slots .slot .ui-state-active .ui-icon-background,
#appointment_details #extras-wrapper .service_extra .ui-icon-background,
#appointment_details #extras-wrapper .service_extra .ui-state-active .ui-icon-background {
	border: #555 !important;
	background-color: #ffffff !important;
}

#appointment_details #slots-wrapper #slots .slot 
	.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, 
#appointment_details #slots-wrapper #slots .slot 
	.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon,
#appointment_details #extras-wrapper .service_extra 
	.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, 
#appointment_details #extras-wrapper .service_extra 
	.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
	background-image: none;
	border-width: 4px !important;
	border-style: solid !important;
}

#appointment_details #slots-wrapper #slots .slot .ui-visual-focus {
	box-shadow: none !important;
}

#appointment_details #slots-wrapper .app-alert {
	color: red;
	font-size: 14px;
	font-style: italic;
	margin: 0px;
	display: none;
}
.loading {
  position: fixed;
  z-index: 999;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.5);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 50px;
  height: 50px;
  margin-top: -0.5em;

  border: 15px solid rgba(33, 150, 243, 1.0);
  border-radius: 100%;
  border-bottom-color: transparent;
  -webkit-animation: spinner 1s linear 0s infinite;
  animation: spinner 1s linear 0s infinite;


}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}