﻿form.Forms, form.Forms p {color:#555}
form.Forms p{margin:0; padding:10px 20px 10px 0; font-size:16px; line-height:16px;}
form.Forms p b{    font-weight: normal; color:#ff9800;    min-width: 115px;    display: inline-block;}
form.Forms h3 {background: #9dcf32;    color: #fff;    padding: 15px 20px;    margin: 0 0 10px 0;}
form.Forms div {margin:0;}
form.Forms div.g-recaptcha {margin:15px 0 0 0}
form.Forms label {margin:10px 0 5px 0; font-size:110%}
.Forms, #formBookingResponse { padding: 10px 25px; background-color: #FFF; box-shadow: 0 0 10px rgba(0,0,0,0.07); max-width: 1000px; }
.Forms.accountingForm { padding: 10px 25px; background-color: #FFF; box-shadow: 0 0 10px rgba(0,0,0,0.07); width: 97%; max-width: 97%; }

  /*.Forms section {
    border: 0;
    padding: 5px 25px 25px 25px;
    margin-bottom: 25px;
	background-color:#FFF;
    box-shadow: 0 0 10px rgba(0,0,0,0.07);
  }*/

  .Forms .ms-list li, .timepickerCustom li {
    background-image: none;
    margin: 0;
  }

  .Forms .ms-selection {
    clear: none;
  }
.formQuestion {
	margin:20px 0 0 0;
}

  .formQuestion label {
    width: 100%;
  }

  .formQuestion input.override {
    background-color: #fff;
  }

  .formQuestion input[type="text"], form.Forms input[type="email"] {
    width: 100%;
	transition: box-shadow 0.3s ease-in-out;
  }
  
  .formQuestion input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
  }
  
  .formQuestion input[type="text"]:focus {
   box-shadow: 0 5px 15px rgba(145, 92, 182, .4);
   border-color:#d6d6d6;
  }

.formQuestion input[type="text"] {}
  .formQuestion input.datepicker {
    width: 125px;    
  }

  .formQuestion input.timepicker {
    width: 90px;    
  }

  .formQuestion input.timepicker {
    width: 90px;    
  }

  .formQuestionContainer .formQuestionLeft {
    clear: unset;
  }

  .formQuestionContainer .formAnswerRight {
    clear: unset;
  }
form.Forms input[type="submit"], #frmSubmitBooking input[type="submit"], #frmSubmitBooking input#bookingSubmit {background-color:#9dcf32; color:#FFF; display:block; font-size:16px; margin:0 0 30px 0;height:auto; min-height:38px; white-space:normal; padding:0 30px; letter-spacing:0;    text-transform: uppercase;    text-decoration: none;    border-radius: 4px;    border: 1px solid #bbb;    cursor: pointer;    box-sizing: border-box; }
form.Forms input[type="submit"]:hover, #frmSubmitBooking input[type="submit"]:hover, #frmSubmitBooking input#bookingSubmit:hover {box-shadow: 0 5px 15px rgba(145, 92, 182, .4); color:#FFF; border-color:#CCC}

.formResponse {    display: block;    margin: 20px 0;    background: #a1a0a0;    border-radius: 5px;    padding: 20px; color:#FFF}
.formResponse p {font-size:18px;color:#FFF;margin:0;padding:0; line-height:18px;}
.formResponse ul {margin:20px 0 0 0; display:block;-webkit-box-shadow:inset 0 0 0 1px #e4e4e4;-moz-box-shadow:inset 0 0 0 1px #e4e4e4;box-shadow:inset 0 0 0 1px #e4e4e4;overflow:hidden;-moz-border-radius:5px;border-radius:5px}
.formResponse ul li{color: #000; display:block;-webkit-box-shadow:inset 0 0 0 1px #e4e4e4;-moz-box-shadow:inset 0 0 0 1px #e4e4e4;box-shadow:inset 0 0 0 1px #e4e4e4;overflow:hidden;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:inset 0 -1px 0 #e4e4e4;-moz-box-shadow:inset 0 -1px 0 #e4e4e4;box-shadow:inset 0 -1px 0 #e4e4e4;padding:15px 10px 15px 20px;background:#fff;margin:0;font-size:15px}
.formResponse ul.formresponses_error li{color: #red}

div.formQuestion div label {font-weight:normal; margin-top:12px; line-height:2em;}

#formBookingContainer input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}
#formBookingContainer input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
}

#formBookingContainer input[type="checkbox"]:checked + span:before {
    background-color: #9DCF32;
    box-shadow: inset 0 0 0 4px #E4E8E9;
}
/*
#formBookingContainer input[type="checkbox"] + span:before {   content: '';    background: #dfdfdf;    border-radius: 100%;    border:  2px solid #747474;    display: inline-block;    width: 20px;    height: 20px;    position: relative;    top: 0;    margin: 0 10px 0 0;    vertical-align: middle;    cursor: pointer;    text-align: center;    transition: all 0.3s 0s ease-in-out;}
#formBookingContainer input[type="checkbox"] + span:before {  height: 25px;  width: 25px;  background-color: #FFF;  border:1px solid #CCC;  border-radius:4px;  box-shadow:none;  color:#FFF;      font-size: 14px;    line-height: 25px;  	}
#formBookingContainer input[type="checkbox"]:checked + span:before {  box-shadow:none;  content: '✔';	}
*/
#formBookingContainer input[type="checkbox"]:checked + label {
    position: relative;
    padding-left: 25px;
    cursor: pointer;
}

form.Forms div.formQuestionLeft {width:calc(33% - 30px); margin:0 30px 0 0; float:left}
form.Forms div.formQuestionLeft label {width:auto; margin:0}
form.Forms div.formAnswerRight {width:66%; float:left}
form.Forms div.formAnswerRight div label {margin:0 0 12px 0}


form.Forms div.formQuestionContainer {margin:0 0 30px 0}
form.Forms div.formQuestionContainer:after {  content: "";  clear: both;  display: table; overflow:auto}
/*form.Forms label {width:auto; margin:0;}*/

/* Customize the label (the container) */
#formBookingContainer .pseudolabelcontainer {  display: inline-block;  position: relative;  padding-left: 12px;  margin-bottom: 12px;  cursor: pointer;  font-size: 22px;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;}
/* Hide the browser's default checkbox */
#formBookingContainer .pseudolabelcontainer input[type="checkbox"] {     position: relative;    opacity: 0;    cursor: pointer;    height: 25px;    width: 22px;    left: -34px;    z-index: 100;  	float:left;}
/* Create a custom checkbox */
#formBookingContainer .checkmark {  position: absolute;  top: -15px;  left: 10px;  height: 25px;  width: 25px;  background-color: #FFF;  border:1px solid #CCC;  border-radius:4px;}
/* On mouse-over, add a grey background color */
#formBookingContainer .pseudolabelcontainer:hover input[type="checkbox"] ~ .checkmark {  background-color: #ccc;}
/* When the checkbox is checked, add a blue background */
#formBookingContainer .pseudolabelcontainer input[type="checkbox"]:checked ~ .checkmark {  background-color: #9dcf32;}
/* Create the checkmark/indicator (hidden when not checked) */
#formBookingContainer .checkmark:after {  content: "";  position: absolute;  display: none;}
/* Show the checkmark when checked */
#formBookingContainer .pseudolabelcontainer input[type="checkbox"]:checked ~ .checkmark:after {  display: block;}
/* Style the checkmark/indicator */
#formBookingContainer .pseudolabelcontainer .checkmark:after {  left: 9px;  top: 5px;  width: 5px;  height: 10px;  border: solid white;  border-width: 0 3px 3px 0;  -webkit-transform: rotate(45deg);  -ms-transform: rotate(45deg);  transform: rotate(45deg);}

div.formQuestion div label {font-weight:normal; margin-top:12px; line-height:2em;}

 /* bookings */
.formBookingSlot {background:#EFEFEF; margin:10px 0 0 0;}
.formbookingslotQuantity {margin: -25px 0 0 0;    background: #eee;    padding:0 0 10px 68px; width:calc(100% - 43px)}
.formBookingSlot label {  cursor: pointer;  display: block;  background: #eee;  margin: 5px;  padding: 10px;  width: 100%;  float: unset;}
 .formBookingSlot label p {margin:0 0 10px 12px}
.formBookingSlot label input, .formBookingSlot label p {display:inline-block}
.formBookingSlotDate {  width: 100%; margin:10px 0 0 0;}
@media only screen and (max-width: 990px) {
	form.Forms input[type="submit"], frmSubmitBooking input[type="submit"] {line-height:28px;}
	.pseudolabelcontainer {float:left; }
	.checkmark {top:0; left:0;}
	.formBookingSlot label p {margin:0; width:calc(100% - 40px); font-size:16px; letter-spacing:0}
	.formbookingslotQuantity {font-size:16px; letter-spacing:0; margin-top:-10px; padding-left:50px; width:calc(100% - 25px)}
	#formBookingContainer .checkmark {top:0; left:0}
}
#payment-embed {padding: 10px 25px;    background-color: #FFF;    box-shadow: 0 0 10px rgba(0, 0, 0, 0.07); color:#555;}
form.FormCapture #payment-embed {box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);}
form.FormCapture input#FORM__formSubmit.blue-mid-button, #payment-embed input[type=submit].blue-mid-button {margin-top:15px; font-size:18px; text-transform:uppercase; color:#FFF}
.accountingFilterTable {width:600px; white-space:nowrap;}
.accountingFilterTable tr { vertical-align: top;}
.accountingFilterTable th { text-align: left;}