/***** GENERAL FORMS *****/
.jet-form-builder__heading {
  font-size: var(--font-h4);
  font-weight: 600;
}

/***** FORM BUTTONS *****/
/***** PREV, NEXT & SUBMIT BUTTONS *****/
form.jet-form-builder button.jet-form-builder__next-page,
form.jet-form-builder button.jet-form-builder__prev-page,
form.jet-form-builder button.jet-form-builder__submit {
    padding: var(--space-15) var(--space-30);
    border-radius: var(--border-radius-99);
    font-size: var(--font-button);
    transition: 0.2s;
}
form.jet-form-builder button.jet-form-builder__prev-page {
	border: 2px solid var(--color-risd);
	background-color: var(--color-lavender);
}
.ktrr-jet-form--dark button.jet-form-builder__prev-page {
    border: 2px solid var(--color-white) !important;
	background-color: initial !important;
    color: var(--color-white);
}
form.jet-form-builder button.jet-form-builder__next-page,
form.jet-form-builder button.jet-form-builder__submit {
	border: 2px solid var(--color-risd);
	background-color: var(--color-risd);
	color: var(--color-white);
}
form.jet-form-builder button.jet-form-builder__prev-page:hover {
	border: 2px solid var(--color-risd);
    background-color: var(--color-risd);
    color: var(--color-white);
}
form.jet-form-builder button.jet-form-builder__next-page:hover,
form.jet-form-builder button.jet-form-builder__submit:hover {
	border: 2px solid var(--color-persian);
	background-color: var(--color-persian);
}
/* Disabled State */ 
/*
form.jet-form-builder button.jet-form-builder__next-page:disabled,
form.jet-form-builder button.jet-form-builder__submit:disabled {
    border: 2px solid var(--color-charcoal);
    background-color: var(--color-charcoal);
    color: var(--color-comet);
}
*/
/* This is the first next button on the first step */
form.jet-form-builder .jet-form-builder-page[data-page="1"] .jet-form-builder__next-page-wrap {
	justify-content: flex-end;
}
/* Space out the middle-step form buttons */
form.jet-form-builder .jet-form-builder__next-page-wrap {
	display: flex;
    justify-content: space-between;
    margin-top: var(--space-20);
}
/* Now fix the Submit button, so that it's aligned to the right */
form.jet-form-builder .jet-form-builder-row.field-type-submit-field .jet-form-builder__submit-wrap {
	justify-content: flex-end;
}

/***** FORM FIELDS *****/
form.jet-form-builder .text-field::placeholder,
form.jet-form-builder textarea::placeholder,
input.jet-form-builder__field::placeholder {
	font-size: var(--font-body);
	color: var(--color-placeholder);
	opacity: 1;
	font-weight: 400;
}
form.jet-form-builder .input, 
form.jet-form-builder input:not([type=submit]):not([role=switch]),
form.jet-form-builder select {
	border-radius: var(--border-radius-5);
	padding: 6px 20px;
	font-weight: 400;
}
/* Make the fields salt white in the regular form */
form.jet-form-builder .input, 
form.jet-form-builder input:not([type=submit]):not([role=switch]):not([type=search]) {
	background-color:  var(--color-salt);
}
form.jet-form-builder textarea {
	border-radius: var(--border-radius-5);
	padding: var(--space-10);
	line-height: 28px !important;
	font-weight: 400;
	background-color:  var(--color-salt);
}
/* Change the colour of the outline border on input field focus */
form.jet-form-builder :focus-visible {
	outline-color: var(--color-risd);
}
form.jet-form-builder label {
	color: var(--color-midnight);
}

/***** SELECT FIELD - SELECT2 *****/
form.jet-form-builder .select2-selection--multiple input.select2-search__field {
	padding: 0 !important;
}
form.jet-form-builder .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--color-lavender);
    border: none;
    border-radius: 6px;
    margin-right: var(--space-10);
    margin-top: var(--space-5);
    padding: 8px 15px;
}
form.jet-form-builder .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: var(--color-midnight);
    display: inline-flex;
    margin-right: 12px;
    background-color: var(--color-white);
    width: 25px;
    height: 25px;
    border-radius: var(--border-radius-99);
    justify-content: center;
    align-items: center;
	font-weight: 400;
	padding-bottom: 4px;
    font-size: 24px;
}
/* Style the focus mode */
form.jet-form-builder .select2-container--default.select2-container--focus .select2-selection--multiple,
form.jet-form-builder .select2-container--focus .select2-selection--single {
	border: 2px solid var(--color-risd);
}
/* Selected dropdown */
form.jet-form-builder .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--color-lavender);
	color: var(--color-risd);
}

form.jet-form-builder .select2-container .select2-selection--single {
	height: 55px !important;
}
form.jet-form-builder .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 55px;
	padding-left: var(--space-15);
}
form.jet-form-builder .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 55px;
	right: var(--space-10);
}
form.jet-form-builder .select2-search--dropdown {
	padding: var(--space-10);
}


/***** SUCCESS & ERROR MESSAGES *****/
.jet-form-builder-message--success {
    background-color: var(--color-lime-cream) !important;
    border: 2px solid var(--color-lime) !important;
    color: var(--color-lime) !important;
    border-radius: var(--border-radius-10);
}
.jet-form-builder-message--error {
    background-color: var(--color-cherry-ripe) !important;
    border: 2px solid var(--color-cherry) !important;
    color: var(--color-cherry) !important;
    border-radius: var(--border-radius-10);
}

/***** JETAPPOINTMENT *****/
/* Provider - Choose provider radio profile card */ 
.stkr-provider__book-form__profile-card--container {
  border: 1px solid var(--color-mystic);
  border-radius: var(--border-radius-99);
  margin: var(--space-10) 0;
}
.stkr-provider__book-form__profile-card--container:hover {
  border: 1px solid var(--color-metal);
  background-color: var(--color-metal);
}
.appointment-provider__content .jet-form-builder__field-template--checked .stkr-provider__book-form__profile-card--container {
  border: 1px solid var(--color-risd);
  background-color: var(--color-lavender);
}

/* Session - Choose session radio card */
.stkr-booking-form__radio__session .radio-wrap.checkradio-wrap {
  display: flex;
  width: 100%;
  min-height: 100px;
}
.stkr-service__book-form__select-card--container {
  border: 1px solid var(--color-mystic);
  border-radius: var(--border-radius-10);
}
.stkr-service__book-form__select-card--container:hover {
  border: 1px solid var(--color-metal);
  background-color: var(--color-metal);
}
/* Currently JetAppointment form doesn't recognise the styles applied to the Bricks template. Force it. */
.stkr-booking-form__radio__session .radio-wrap.checkradio-wrap .jet-form-builder__field-template {
  display: flex;  
  height: 100%;
  width: 100%;
}
.stkr-service__book-form__select-card--container {
  justify-content: center;
  align-items: center;
}
/* Add the 'Checked' state style */
.stkr-booking-form__radio__session .jet-form-builder__field-template--checked .stkr-service__book-form__select-card--container {
  border: 1px solid var(--color-risd);
  background-color: var(--color-lavender);
}
/* Show the radio boxes in a grid on large screens */
@media (min-width: 600px) {
  .stkr-booking-form .stkr-booking-form__radio__session .jet-form-builder__fields-group {
    flex-direction: row !important;
    flex-wrap: nowrap;
  }
}
/* Make the calendar element stretch 100% */
.jet-apb-calendar .jet-apb-calendar-content {
  width: 100% !important;
  flex: 0 0 100% !important;
}

/* Now let's style the Calendar - choose the date field */
.stkr-booking-form__calendar {}

/* In particular the 'Appointment details' section that comes up after choosing the date */
/* Remove the padding from the container */
.stkr-booking-form__calendar .jet-apb-calendar-appointments-list {
  padding: 0;
}
/* Place the 'capacity counter' above the appointment details in a column layout */ 
.stkr-booking-form__calendar .jet-apb-appointments-item {
  flex-direction: column;
}
/* And add flex, so that the counter shows up in a single row */
.stkr-booking-form__calendar .jet-apb-appointments-item-count {
  display: flex;
  margin: var(--space-20) 0;
  text-align: initial;
  flex-direction: row-reverse;
  align-self: flex-start;
  /*justify-content: space-between;*/
}