body {
  background: transparent;
}
.client-page #content {
  background: #fff;
  border-radius: 3px;
}
.is-embedded.client-page #content {
  background: rgba(255,255,255,0.9);
}

.calendar-previous, .calendar-next {
  text-decoration: none;
  font-weight: bold;
}

.productDescription h2 {
  margin-bottom: 5px;
}
.productDescription .price {
  margin-left: 10px;
}

#times input[type="radio"]:checked+label {
  font-weight: bold;
}

.review-appointment th {
  padding-right: 10px;
}
.review-appointment th, .review-appointment td {
  padding-top: 5px;
}

.steps { color: #888; font-size: 110%; margin-bottom: 12px; position: relative; }
.step-selected { font-weight: bold; color: #000; }
.steps .client-login { font-size: 80%; float: right; top: 0.3em; }

.highlight { background: #ffff88 !important; }

#date-times-container {
  width: 500px;
}
#form fieldset {
  width: 97%;
  max-width: 700px;
}

#forms-form label {
  display: inline;
}

.popup-content {
  padding: 8px 16px;
  min-width: 450px;
  background: linear-gradient(to top, #E9EAEF, #FFF 200px) no-repeat;
}

#times { height: 250px; padding: 10px 0 10px 10px; }

@media (max-width: 479px) {
  #form fieldset, #forms-form fieldset { width: auto; }
  #date-times-container { width: auto; }
  #date-container { display: inline; }
  #times-container { display: inline; }
  #times { height: auto; }
  .client-page #header { height: 80px; padding: 0 10px; }
  .client-page #header #businessName { font-size: 20px; line-height: 100%; }
  .client-login { margin-top: 14px; }
  #business-logo { margin-top: -20px; }
  #appointmentType { display: block; width: 220px; }
  #calendar { width: 200px; }

  .text { max-width: 200px; }

  textarea { max-width: 200px; }

  #yourInfo .form tr { display: block; }
  #yourInfo .form th { text-align: left; display: block; }

  #forms-form td { display: block; }
  #forms-form td[align="right"] { text-align: left; }

  #billing-firstname-container, #billing-lastname-container { display: block; }

  .client-continue-login {
    display: block;
  }

  .popup-content {
    min-width: 100px;
  }
  .popup-content select, .popup-content input {
    max-width: 200px;
  }
 .popup {
  margin-left: -15px;
  width: 94%;
 }

}
@media (max-width: 980px) {
  .client-page #header { padding: 0 10px; }
  .client-page #header #businessName { font-size: 28px; line-height: 120%; }
}
@media (min-width: 480px) {
  #form fieldset { width: 97%; max-width: 700px; }
  #date-times-container { width: 500px; }
  #date-container { display: auto; }
  #times-container { display: auto; }
  #times { height: 250px; }
}

.time-conflict .extra-time {
  text-decoration: line-through;
  color: #c00;
}

.client-page #header { overflow: hidden; }

#calendarDiv{
       position:absolute;
       width:205px;
       border:1px solid #317082;
       padding:1px;
       background-color: #FFF;
       font-family:arial;
       font-size:10px;
       padding-bottom:20px;
       visibility:hidden;
       color: #000;
}

#calendarDiv td {
	color: #000;
}

#calendarDiv span,#calendarDiv img{
       float:left;
}
#calendarDiv .selectBox,#calendarDiv .selectBoxOver{

       line-height:12px;
       padding:1px;
       cursor:pointer;
       padding-left:2px;
}

#calendarDiv .selectBoxTime,#calendarDiv .selectBoxTimeOver{
       line-height:12px;
       padding:1px;
       cursor:pointer;
       padding-left:2px;
}

#calendarDiv td{
       padding:3px;
       margin:0px;
       font-size:10px;
}

#calendarDiv .selectBox{
       border:1px solid #E2EBED;
       color: #E2EBED;
       position:relative;
}
#calendarDiv .selectBoxOver{
       border:1px solid #FFF;
       background-color: #317082;
       color: #FFF;
       position:relative;
}
#calendarDiv .selectBoxTime{
       border:1px solid #317082;
       color: #317082;
       position:relative;
}
#calendarDiv .selectBoxTimeOver{
       border:1px solid #216072;
       color: #216072;
       position:relative;
}

#calendarDiv .topBar{
       height:16px;
       padding:2px;
       background-color: #317082;


}
#calendarDiv .activeDay{        /* Active day in the calendar */
       color:#FF0000;
}
#calendarDiv .todaysDate{
       height:17px;
       line-height:17px;
       padding:2px;
       background-color: #E2EBED;
       text-align:center;
       position:absolute;
       bottom:0px;
       width:201px;
}
#calendarDiv .todaysDate div{
       float:left;
}

#calendarDiv .timeBar{
       height:17px;
       line-height:17px;
       background-color: #E2EBED;
       width:72px;
       color:#FFF;
       position:absolute;
       right:0px;
}

#calendarDiv .timeBar div{
       float:left;
       margin-right:1px;
}


#calendarDiv .monthYearPicker{
       background-color: #E2EBED;
       border:1px solid #AAAAAA;
       position:absolute;
       color: #317082;
       left:0px;
       top:15px;
       z-index:1000;
       display:none;

}
#calendarDiv #monthSelect{
       width:70px;
}
#calendarDiv .monthYearPicker div{
       float:none;
       clear:both;
       padding:1px;
       margin:1px;
       cursor:pointer;
}
#calendarDiv .monthYearActive{
       background-color:#317082;
       color: #E2EBED;
}

#calendarDiv td{
       text-align:right;
       cursor:pointer;
}

#calendarDiv .topBar img{
       cursor:pointer;
}
#calendarDiv .topBar div{
       float:left;
       margin-right:1px;
}
#calendarDiv .sidePrompts {
	background: #E2EBED;
}

.required-label { /*font-style: italic;*/ color: #666; font-size: 80%; }

.empty-required-field input, .empty-required-field select, .empty-required-field textarea, .empty-required-field .widget-checkbox { border: 2px solid #c00; }

.schedule-submit { font-size: 1em; }

.list { width: 500px; border: 1px solid #ccc; border-collapse: collapse; }
.list td { padding: 5px; }
.list th { text-align: left; background: #ddd; padding: 5px; }
.even { background: #efefef; }
.odd { background: #fafafa; }
.small { font-size: 80%; font-weight: normal; }
.dark { color: inherit; }
.times {width: 200px; height: 200px; overflow: auto; border: none; background: #ffffff; padding: 2px; color: #000; }
#times, input { color: #000; }
span.error { color: #F00; }
div.error { border: 1px solid #f00; color: #222; background: #ffe5e5; padding: 8px; width: 50%; font-weight: bold; margin-bottom: 10px; }
.notice { border: 1px solid #090; background: #e2f9e1; padding: 8px; width: 70%; font-weight: bold; margin: 10px 0; }
.warning { border: 1px solid #F0C000; background: #FFF6BB; padding: 8px; width: 70%; font-weight: bold; margin: 10px 0; }

legend { font-weight: bold; color: #333; }
fieldset { border: 1px solid #f5f5f3; border-style: solid none none none; background: #f5f5f3; background: rgba(245,245,243,0.5); margin-bottom: 14px; display: block; clear: both; }

.form th { text-align: right; font-weight: normal;  padding-right: 8px; vertical-align: top; }
.form td { padding-bottom: 5px; }
.form { border-collapse: collapse; }

/** Popup */
.popup-header {
  float: right;
}

.popup {
  box-shadow: 0 5px 25px rgba(0,0,0,0.6);
}

.popup-header a {
  padding: 4px;
}


div.popup .bottom {
  bottom:-20px;
  height:0;
  left:20px;
  position:absolute;
  right:20px;
  background: none;
}

.popup .right {
	background: none;
	bottom:20px;
	position:absolute;
	right:-20px;
	top:20px;
	width:0;
}

.popup .left {
	background: none;
	bottom:20px;
	left:-20px;
	position:absolute;
	top:20px;
	width:0;
}

.popup .top {
	background: none;
	height:0;
	left:20px;
	position:absolute;
	right:20px;
	top:-20px;
}

div.popup div.topleft {
  background: none;
  height:0;
  left:-20px;
  position:absolute;
  top:-20px;
  width:40px;
}

div.popup div.topright {
  background: none;
  height:0;
  position:absolute;
  right:-20px;
  top:-20px;
  width:0;
}

div.popup div.bottomleft {
  background: none;
  bottom:-20px;
  height:0;
  left:-20px;
  position:absolute;
  width:0;
}

div.popup div.bottomright {
  background: none;
  bottom:-20px;
  height:0;
  position:absolute;
  right:-20px;
  width:0;
}

.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
  filter:alpha(opacity=0.5); 
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	opacity: 0.5;
	z-index: 1031;
}
input { padding: 3px; }
input.prompting { position: relative; top: 0; left: 0; z-index: 2; background: none; }
.input-wrapper { position: relative; }
label.input-prompt { position: absolute; color: #888; top: -1px; left: 9px; z-index: 1; }
label.focus { color: #555; }