/* Styles definition here */
body {line-height: 24px;}
#fbuilder .ui-datepicker-header { background:rgba(134, 230, 255, 0.8) ;color:#444; text-shadow:none}
.usedSlotsfieldname1_1 { padding: 20px 0 10px 0;}
.fieldCalendarServicefieldname1_1{padding: 15px 0 0 0 }
#fbuilder .slots div.htmlUsed a {color: rgba(236, 46, 37, 1.0); text-decoration: line-through; }
#fbuilder .slots div.htmlUsed a:hover {background: #ededed ; cursor: inherit ; user-select: none;  }
#fbuilder *, #fbuilder ::after, #fbuilder ::before {color: #3A2F20;}

/*border surrounding time slots*/
#fbuilder .slots {border: 0px;} /*this removes the border surroudning the time slots*/

/*for fully open dates */
.ahb_booked0 a {background: rgba(153,213,148,1.0) !important;color:#000000 !important}

/*for dates with 1-2 times booked */
.ahb_booked1 a, .ahb_booked2 a,.ahb_booked3 a, .ahb_booked4 a {background: rgba(254,224,139,1.0) !important; color:#000000 !important}

/*for dates with 3-5 times booked */
.ahb_booked5 a, .ahb_booked6 a, .ahb_booked7 a,.ahb_booked8 a {background: rgba(252,141,89,1.0) !important; color:#000000 !important}

/*for completed booked dates */
.noavailableslots a {background: rgba(213,62,79,1.0) !important; color:#fff !important}

.ui-datepicker td span, .ui-datepicker td a{text-shadow:none; box-shadow: none}

/*custom for calendar box */
.ui-datepicker {width: 100%; box-shadow: none; -webkit-box-shadow: none; font-family: "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #7d7d7b;}
.ui-datepicker-title {background-color: #f7f3ef;}
.ui-datepicker-header {line-height: 40px;}


.pbSubmit:hover { background-color: rgba(60,180,75,0.8); color: white; } 

/*custom for box with time selectors*/
#fbuilder .slots {border: 0px solid #aaa; border-radius: 4px; box-shadow: none; -webkit-box-shadow: none; }

.ui-datepicker tbody td {border-right: none; border: none;} /*this changes the background behind the months*/

.ui-datepicker tbody tr {border-bottom: 0px solid #000;} /*this removes the rows between weeks in the calendar itself, delete this to restore rows in between calendar weeks */

.ui-datepicker td span, .ui-datepicker td a {font-weight: normal; } /*this chagnes the look of the calendar day boxes - e.g., whether the numbers have bold font, or not */

#fbuilder .slots div a {background-color: #f4f4f4;  border-radius: 5px;}
#fbuilder .slots div a:hover {background-color: #ffffff;}

/*Change heading fields for slot and quantity selectors */
#fbuilder .top_aligned .fields label {font-weight: bold;}

/*slot and quantity selector box testing */
.ahbfield_service {width: 12vh; cursor: pointer;} /*this changes the width of the service selection box - the box that says morning or afternoon */
.ahbfield_quantity {width: 15%; cursor: pointer;} /* this chnages the width of the quantity selection box */


/* custom arrows to move dates forward or backward */
.ui-datepicker-next { 
  border: solid #3A2F20;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  background-image: none;
  height: 1vh;
  width: 1vh;
}

.ui-datepicker-prev {
  border: solid #3A2F20;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  background-image: none;
  height: 1vh;
  width: 1vh;
}

.ui-datepicker-next:hover {
  border: solid #5e7b3f;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  background-image: none;
  height: 1vh;
  width: 1vh;
}

.ui-datepicker-prev:hover {
  border: solid #5e7b3f;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  background-image: none;
  height: 1vh;
  width: 1vh;
}

/*adjsutments to lines 55 to 12*/
.ui-datepicker-prev .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }

/*submit button edits*/
#fbuilder .pbreak .pbPrevious, #fbuilder .pbreak .pbNext, #fbuilder .pbSubmit { background-color: transparent; }
.pbSubmit:hover { background-color: rgba(94, 123, 63, 0.7) !important} /* sets hover color to the same color as the green used in the open-close note on main pismo page which is #5e7b3f or rgb 94, 123, 63 */

/*change what happens when user hovers over different dates in the calendar*/
.ui-datepicker-calendar .ui-state-hover { background-color: #ffffff !important}

/*media query for service selection for mobile window width */
@media screen and (max-width: 1000px) {
	.ahbfield_service {width: 25vh} /*this changes the width of the service selection box - the box that says morning or afternoon - specifically for media queries */
}

@media screen and (max-width: 2000px) {
	.ahbfield_service {width: 30vh} /*this changes the width of the service selection box - the box that says morning or afternoon - specifically for media queries */
}