/* 2024 */

/* Title */

#fbuilder h1 {
  font-size: 32px;
}

/* Slots container */

#fbuilder .custom-2024 .slots {
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Hide "Select date and time" label and datepicker */

.custom-2024 label,
.custom-2024 .sbfieldCalendar {
  display: none;
}

/* Confirmation box */

.custom-2024 .usedSlots .sb_item,
.custom-2024 .usedSlots .totalCost {
  padding-left: 16px;
  border-left: 4px solid #c08cee;
  background: rgba(192 140 238 / 0.1);
}
.custom-2024 .usedSlots .sb_item {
  padding-top: 16px;
  margin-top: 16px;
}
.custom-2024 .usedSlots .totalCost {
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.custom-2024 .usedSlots .cancel {
  padding: 14px;
  color: red!important;
  opacity: 0.7;
}
.custom-2024 .usedSlots .cancel:hover {
  opacity: 1;
}

/* Slot items */
.custom-2024 .slots > div > a {
  width: 100%;
  text-decoration: none;
}
.custom-2024 .slots div a:hover {
  text-decoration: none!important;
}



/* Previous */

/* used slots */

#fbuilder .usedslot a:hover {
  background: white !important ;
  color: lightgrey !important;
}

#fbuilder .usedslot {
  color: grey; /* grey */
  border: 1px solid lightgrey !important;
  background-color: white !important;
}

#fbuilder .usedslot div a:hover {
  background: grey;
}

/* end used slots */

/* Calendar customization */

#fbuilder img {
  position: relative;
  width: auto;
}

.sb_m #fbuilder .ui-datepicker-next,
.sb_m #fbuilder .ui-datepicker-prev {
  border-bottom: 0px;
  border-bottom-style: none;
}

.custom > label {
  display: none;
}

.sb_m #fbuilder .custom .sbfieldCalendar {
  padding-top: 6px;
  width: 220px !important;
  flex: none;
  font-size: 40px;
  line-height: 55px;
  padding-bottom: 10px;
  text-decoration: none;
}

#fbuilder .custom .slots > span {
  display: none !important;
}

.sb_item:before {
  content: "Booked time: ";
}

#fbuilder .custom a:link {
  text-decoration: none;
  border-bottom: 0px;
  border-bottom-style: none;
}

#fbuilder .custom a:hover,
#fbuilder .custom a:active {
  color: #29cc31; /* Green */
}

/* Calendar customization end */

/* Styles definition by Tobias Gutmann */

#fbuilder .fields,
#fbuilder .fform {
  padding: 10px 0px;
}

/* Terms and conditions */
#fbuilder .cff-dialog {
  box-shadow: rgb(191, 141, 238) 0px 0px 10px 0px; /* Lavendel */
  position: fixed;
  width: 600px;
  height: 650px;
  font-size: 90%;
}

#fbuilder .cff-close-dlg {
  background-image: url(https://sai.face-o-mat.com/wp-content/uploads/2021/10/4x-1-e1634580756603.png);
  max-width: 16px !important;
  max-height: 16px !important;
}
/* Terms and conditions end */

/* asterisk   */

#fbuilder label .r {
}
/* asterisk end  */

/* checkbox  */
/* #fieldname3_1,
#fieldname8_1,
#fieldname2_1,
#fieldname6_1 {
  position: relative;
  top: 2px;
  height: 25px;
  width: 25px;
}

@media (max-width: 600px) {
  #fieldname3_1,
  #fieldname8_1,
  #fieldname2_1,
  #fieldname6_1 {
    height: 20px;
    width: 15px;
  }
} */

/* checkbox end */

/* selected date */

.sb_m #fbuilder .totalCost {
  color: #29cc31; /* Green */
}

/* selected date end */

/* Form Error tip missing text */

#fbuilder div.cpefb_error {
  font-size: 0.5em;
  color: red;
  background: none;
  border: 0px solid #f00;
  opacity: 0.9;
  margin-top: 0px;
  position: relative;
  padding: 0px 10px;
  z-index: 1000;
  display: inline-block;
}

#fbuilder div.cpefb_error:after {
  background: none;
  color: none;
}

/* Form Error tip missing text end */
/* Form Instruction */

#fbuilder .comment_area label {
}

#fbuilder .comment_area span {
  font-size: 14px;
}
/* Form Instruction end */

/* Form button */

#fbuilder .pbSubmit {
  font-size: 100%;
  background-color: rgb(191, 141, 238); /* Lavendel */
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  padding: 10px 15px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border: none;
  border-radius: 8px;
}

#fbuilder .pbSubmit:hover {
  background-color: #4caf50; /* Light Green */
  color: white;
}

/* Form button end */

/* Form fields */

#fbuilder input[type="text"],
#fbuilder textarea,
#fbuilder select {
  display: inline-block;
  border-radius: 8px;
  padding: 4px 0px 3px 8px;
  font-size: 25px;
  color: rgb(191, 141, 238);
  border: solid 1px rgb(191, 141, 238);
}
/* Form fields end */
/* Time slots */

#fbuilder .slots div {
  display: inline-block;
  border-radius: 8px;
  border: 1px solid rgb(191, 141, 238);
  margin: 5px;
  padding: 1px;
}

#fbuilder .slots div a {
  background: none;
}

#fbuilder .slots > a {
  font-weight: bold;
  color: #29cc31;
}

#fbuilder .slots .currentSelection {
  border-color: #29cc31 !important; /* Green */
  border-radius: 8px;
  padding: 1px !important;
  color: green !important;
}

#fbuilder .slots .currentSelection > a {
  color: #29cc31 !important; /* Green */
}

#fbuilder .slots div a:hover {
  background: #cafccc;
  border-radius: 8px;
}

.availableslot a:link {
  border-bottom-style: none;
}

/* Time slots end */

#hdcaptcha_cp_tslotsbooking_post_1 {
  border: solid 1px;
  border-color: rgb(191, 141, 238);
  height: 30px;
}

/* Form Styles definition by Tobias Gutmann */

#fbuilder,
#fbuilder label,
#fbuilder span {
}

#fbuilder .medium {
  padding: 4px 0px 3px 8px !important;
}

/* Styles WP TIMESLOT CUSTOMIZATION for Fom2 */

.activelink {
  font-weight: bold;
}