/**
 * NTS HaloPSA embed forms
 * Matches ntsmanaged.com (Avada) and keeps Halo ticket embeds usable on mobile.
 *
 * Scope (any of these, including nested):
 *   .nts-halo-form
 *   #halo-form
 *   [id^="halo-form"]     (halo-form, halo-form-2, and similar ids)
 *
 * Load this after Halo’s newticket.css when possible (wp_footer is safest).
 * Enough specificity and a few targeted !important rules still win from <head>
 * because Halo uses !important on font-size and inline styles on the submit button.
 *
 * Do not edit newticket.js. This file only restyles the rendered embed.
 */

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) {
  /* Prefer live Avada tokens so brand changes in Global Options flow through. */
  --nts-halo-font: var(--body_typography-font-family, Lato, "MS Serif", "New York", sans-serif);
  --nts-halo-font-size: 16px;
  --nts-halo-label-size: 15px;
  --nts-halo-button-font: var(--button_typography-font-family, "Open Sans", Lato, sans-serif);
  --nts-halo-button-weight: var(--button_typography-font-weight, 600);
  --nts-halo-button-size: var(--button_font_size, 14px);
  --nts-halo-text: var(--body_typography-color, #000000);
  --nts-halo-muted: var(--content_box_body_color, #4a4e57);
  --nts-halo-surface: var(--form_bg_color, #ffffff);
  --nts-halo-border: var(--form_border_color, #e2e2e2);
  --nts-halo-input-radius: var(--form_border_radius, 9px);
  --nts-halo-button-radius: 4px;
  --nts-halo-red: var(--link_color, #f41000);
  --nts-halo-red-primary: var(--primary_color, #e10707);
  --nts-halo-red-hover: var(--button_gradient_top_color_hover, #d60707);
  --nts-halo-button-bg: var(--button_gradient_top_color, #e80707);
  --nts-halo-button-bg-2: var(--button_gradient_bottom_color, #d60707);
  --nts-halo-button-text: var(--button_accent_color, #ffffff);
  --nts-halo-focus: var(--form_focus_border_color, rgba(0, 0, 0, 0.65));
  --nts-halo-error: #c40606;
  --nts-halo-field-min-height: 48px;

  box-sizing: border-box;
  width: 100%;
  max-width: 42rem; /* avoid full-bleed 1170px fields on desktop */
  margin-inline: 0;
  color: var(--nts-halo-text, #000000);
  font-family: var(--nts-halo-font, Lato, "MS Serif", "New York", sans-serif);
  font-size: var(--nts-halo-font-size, 16px);
  line-height: 1.5;
  overflow-x: visible;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) *,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) *::before,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) *::after {
  box-sizing: border-box;
}

/* Dark section variant: wrap the embed in .nts-halo-form--on-dark */
.nts-halo-form--on-dark {
  --nts-halo-text: #ffffff;
  --nts-halo-muted: rgba(255, 255, 255, 0.72);
  --nts-halo-surface: #ffffff;
  --nts-halo-border: rgba(255, 255, 255, 0.18);
  --nts-halo-focus: #ffffff;
  background: rgba(255, 255, 255, 0.04);
  color: var(--nts-halo-text, #000000);
  padding: 1.25rem 1.25rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.nts-halo-form--on-dark :is(input, select, textarea, .Select__control):not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([aria-hidden="true"]) {
  background-color: #ffffff;
  color: #000000;
  border-color: #e2e2e2;
}

/* -------------------------------------------------------------------------- */
/* Root cause fix: Halo marks the field group as Bootstrap `.container`.       */
/* Avada’s `.container` is a fixed 750px from 0px up, 970px at 992,            */
/* 1170px at 1200 — wider than the Avada column, then clipped by overflow.     */
/* -------------------------------------------------------------------------- */

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .container,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-group,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form-holder,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .halo-form {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none;
  overflow: visible;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form {
  padding: 0;
  position: relative;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-group {
  padding: 0 0 0.5rem;
}

/* Bootstrap rows/cols inside the embed */
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .row {
  display: flex;
  flex-wrap: wrap;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .row .rowspan,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .row .rowspannoflex {
  display: flex;
  flex-wrap: wrap;
  width: 100% !important;
  max-width: 100%;
  gap: 0.75rem;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) [class*="col-"],
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .col-small,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .col-110,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .col-120,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .col-140,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .col-bitsmall,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .col-medium,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .col-bitmediumlarge,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .col-bitlarge,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .col-fill {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 100%;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 1rem;
  float: none;
  text-align: left !important;
}

/* Two-up fields from col-md-6 etc. only when there is room */
@media (min-width: 640px) {
  :is(.nts-halo-form, #halo-form, [id^="halo-form"]) .row > .col-md-6,
  :is(.nts-halo-form, #halo-form, [id^="halo-form"]) .row > .col-md-5,
  :is(.nts-halo-form, #halo-form, [id^="halo-form"]) .row > .col-md-4,
  :is(.nts-halo-form, #halo-form, [id^="halo-form"]) .row > .col-md-3 {
    flex: 1 1 calc(50% - 0.75rem);
    width: calc(50% - 0.75rem) !important;
    margin-right: 0.75rem;
  }

  :is(.nts-halo-form, #halo-form, [id^="halo-form"]) .row > .col-md-6:nth-child(even),
  :is(.nts-halo-form, #halo-form, [id^="halo-form"]) .row > .col-md-5:nth-child(even),
  :is(.nts-halo-form, #halo-form, [id^="halo-form"]) .row > .col-md-4:nth-child(even),
  :is(.nts-halo-form, #halo-form, [id^="halo-form"]) .row > .col-md-3:nth-child(even) {
    margin-right: 0;
  }
}

/* Group headers (and Halo’s 113% / negative-margin variants) */
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-group-header,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-group-header.mainform-group-header,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-group-header.otherticketstitle,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-group-header.otherticketstitleside {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  margin: 0 0 1rem !important;
  padding: 0 0 0.5rem !important;
  font-family: var(--nts-halo-font, Lato, "MS Serif", "New York", sans-serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--nts-halo-text, #000000);
  white-space: normal;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-group-header .seperator,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .seperator,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .border-bottom,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .border-bottom-yes {
  width: 100% !important;
  max-width: 100%;
  margin: 0.5rem 0 0;
  border: 0;
  height: 1px;
  background-color: var(--nts-halo-border, #e2e2e2);
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-group-header .clearbtn.arrow,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-group-header .arrow {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  float: right;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

/* -------------------------------------------------------------------------- */
/* Labels, hints, validation                                                   */
/* -------------------------------------------------------------------------- */

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) label,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form-label,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .read-label,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form.readeditform label:not(.checkboxlabel) {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 0.35rem;
  padding: 0;
  text-align: left !important;
  font-family: var(--nts-halo-font, Lato, "MS Serif", "New York", sans-serif);
  font-size: var(--nts-halo-label-size, 15px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--nts-halo-text, #000000);
  white-space: normal;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .asterisk,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) h999.asterisk {
  color: var(--nts-halo-red, #f41000);
  font-size: inherit;
  font-weight: 600;
  font-style: normal;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .fieldhint {
  display: block;
  width: 100%;
  margin: 0 0 0.4rem;
  font-family: var(--nts-halo-font, Lato, "MS Serif", "New York", sans-serif);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--nts-halo-muted, #4a4e57);
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form-validation {
  color: var(--nts-halo-error, #c40606);
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 0.25rem 0 0;
}

/* -------------------------------------------------------------------------- */
/* Fields                                                                      */
/* Halo sets `font-size: small !important` on inputs — 13px, which makes iOS  */
/* zoom on focus. Override with 16px+ !important.                              */
/* -------------------------------------------------------------------------- */

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) input,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) select,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) textarea,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) optgroup,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .Select__control,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .Select__input,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .Select__placeholder,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .Select__single-value,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .DateInput_input,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .rc-time-picker-input,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .SingleDatePickerInput,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .rc-tree-select-selector {
  font-family: var(--nts-halo-font, Lato, "MS Serif", "New York", sans-serif) !important;
  font-size: 16px !important; /* iOS will zoom if this is under 16px */
  line-height: 1.4;
  color: var(--nts-halo-text, #000000);
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([aria-hidden="true"]):not(.css-1a0ro4n-requiredInput):not(.Select__input),
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) select,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) textarea,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .Select__control,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .SingleDatePicker,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .SingleDatePickerInput,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .DateInput,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .rc-time-picker,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .rc-tree-select,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .rc-tree-select-selector {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: var(--nts-halo-field-min-height, 48px);
  margin: 0;
  padding: 0.75rem 0.9rem;
  background-color: var(--nts-halo-surface, #ffffff);
  border: 1px solid var(--nts-halo-border, #e2e2e2);
  border-radius: var(--nts-halo-input-radius, 9px);
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) textarea {
  min-height: 8.5rem;
  resize: vertical;
}

/* React-Select: the control already has a border; inner bits should not */
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .Select {
  width: 100%;
  max-width: 100%;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .Select__control {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding: 0 0.5rem 0 0.75rem;
  min-height: var(--nts-halo-field-min-height, 48px);
  background-color: var(--nts-halo-surface, #ffffff) !important;
  border-color: var(--nts-halo-border, #e2e2e2) !important;
  border-radius: var(--nts-halo-input-radius, 9px) !important;
  box-shadow: none !important;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .Select__value-container {
  display: flex !important;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
  padding: 0;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .Select__indicators {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
  align-self: stretch;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .Select__control:hover {
  border-color: var(--nts-halo-focus, rgba(0, 0, 0, 0.65)) !important;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .Select__control--is-focused,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .Select__control--is-focused:hover {
  border-color: var(--nts-halo-red-primary, #e10707) !important;
  box-shadow: 0 0 0 3px var(--primary_color-2a, rgba(225, 7, 7, 0.2)) !important;
}


:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .Select__placeholder {
  color: var(--form_text_color, #9ea0a4);
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .Select__menu {
  z-index: 20;
  font-family: var(--nts-halo-font, Lato, "MS Serif", "New York", sans-serif);
  font-size: 16px;
  border-radius: var(--nts-halo-input-radius, 9px);
  overflow: hidden;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .Select__option {
  padding: 0.7rem 0.9rem;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .Select__option--is-focused {
  background-color: var(--awb-color3, #f2f3f5);
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .Select__option--is-selected {
  background-color: var(--nts-halo-red-primary, #e10707);
  color: #ffffff;
}

/* Halo’s hidden required input for React-Select — keep it invisible */
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) input.css-1a0ro4n-requiredInput,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) input[aria-hidden="true"][tabindex="-1"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  background: transparent !important;
}

/* Date / time pickers used on other ticket types */
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .SingleDatePicker,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .SingleDatePickerInput,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .DateInput,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .DateRangePicker,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .DateRangePickerInput {
  width: 100% !important;
  max-width: 100%;
  background-color: transparent !important;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .DateInput_input {
  width: 100% !important;
  min-height: var(--nts-halo-field-min-height, 48px);
  padding: 0.75rem 0.9rem;
  border: 0;
  background: transparent;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) input[type="time"].browser-time-input {
  width: 100% !important;
  max-width: 12rem;
  display: block;
}

/* File / attachments */
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) input[type="file"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--nts-halo-field-min-height, 48px);
  padding: 0.6rem 0;
  font-size: 16px !important;
  font-family: var(--nts-halo-font, Lato, "MS Serif", "New York", sans-serif) !important;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .attachments,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .attachment-list,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .modal-window.attachments {
  width: 100% !important;
  max-width: 100% !important;
}

/* Checkboxes / radios */
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) input[type="checkbox"],
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) input[type="radio"],
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .inline-checkbox {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  margin: 0 0.5rem 0 0;
  padding: 0;
  vertical-align: middle;
  accent-color: var(--nts-halo-red-primary, #e10707);
  cursor: pointer;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .checkboxlabel,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .checkbox-label,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  min-height: 44px;
  margin: 0;
  font-size: 16px;
  color: var(--nts-halo-text, #000000);
  cursor: pointer;
}

/* -------------------------------------------------------------------------- */
/* Focus and error                                                             */
/* -------------------------------------------------------------------------- */

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([aria-hidden="true"]):not(.css-1a0ro4n-requiredInput):focus,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([aria-hidden="true"]):not(.css-1a0ro4n-requiredInput):focus-visible,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) select:focus,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) textarea:focus {
  outline: none;
  border-color: var(--nts-halo-red-primary, #e10707);
  box-shadow: 0 0 0 3px var(--primary_color-2a, rgba(225, 7, 7, 0.2));
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .input-error,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .error input,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .has-error input,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .has-error .Select__control {
  border-color: var(--nts-halo-error, #c40606);
}

/* -------------------------------------------------------------------------- */
/* Actions                                                                     */
/* Halo writes inline background-color/color on the submit button from the     */
/* instance theme (currently black). !important is required to restyle it.     */
/* The visible label (“Save”) is the input’s value — CSS cannot change it.     */
/* -------------------------------------------------------------------------- */

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form-controls,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .buttonholder {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .nhd-button,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form-controls input[type="submit"],
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form-controls button,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) input[type="submit"],
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) button.nhd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0 !important;
  min-height: 48px;
  height: auto !important;
  margin: 0;
  padding: var(--button_padding-top, 13px) var(--button_padding-right, 29px)
    var(--button_padding-bottom, 13px) var(--button_padding-left, 29px);
  font-family: var(--nts-halo-button-font, "Open Sans", Lato, sans-serif) !important;
  font-size: var(--nts-halo-button-size, 14px) !important;
  font-weight: var(--nts-halo-button-weight, 600) !important;
  letter-spacing: var(--button_typography-letter-spacing, 0);
  line-height: var(--button_line_height, 17px);
  text-transform: var(--button_text_transform, none);
  text-decoration: none;
  color: var(--nts-halo-button-text, #ffffff) !important;
  background-color: var(--nts-halo-button-bg, #e80707) !important;
  background-image: linear-gradient(
    var(--button_gradient_angle, 180deg),
    var(--nts-halo-button-bg, #e80707) var(--button_gradient_start, 0%),
    var(--nts-halo-button-bg-2, #d60707) var(--button_gradient_end, 100%)
  ) !important;
  border: 0 !important;
  border-radius: var(--nts-halo-button-radius, 4px) !important;
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .nhd-button:hover,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .nhd-button:focus-visible,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) input[type="submit"]:hover,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) input[type="submit"]:focus-visible,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form-controls button:hover,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form-controls button:focus-visible {
  color: var(--button_accent_hover_color, #ffffff) !important;
  background-color: var(--nts-halo-red-hover, #d60707) !important;
  background-image: linear-gradient(
    var(--button_gradient_angle, 180deg),
    var(--button_gradient_top_color_hover, #d60707) var(--button_gradient_start, 0%),
    var(--button_gradient_bottom_color_hover, #e80707) var(--button_gradient_end, 100%)
  ) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--primary_color-2a, rgba(225, 7, 7, 0.2));
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .nhd-button.cancel,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) button.nhd-button.cancel {
  color: var(--nts-halo-text, #000000) !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 2px solid currentColor !important;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .nhd-button:disabled,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) input[type="submit"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (min-width: 640px) {
  :is(.nts-halo-form, #halo-form, [id^="halo-form"]) .nhd-button,
  :is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form-controls input[type="submit"],
  :is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form-controls button,
  :is(.nts-halo-form, #halo-form, [id^="halo-form"]) input[type="submit"] {
    width: auto;
    min-width: 12rem !important;
  }
}

/* Absolutely positioned Halo “go/edit” buttons would collide on a narrow column */
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form .gobtn,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form .editbtn,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form-holder .gobtn,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form-holder .editbtn {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  height: auto !important;
}

/* Lists / tables that appear on some ticket types */
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .table-container,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .list-table,
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .ReactTable {
  width: 100% !important;
  max-width: 100%;
  position: relative;
  overflow-x: auto;
}

:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form .details-group .row .table-container {
  height: auto;
}

/* Inline forms that reserve 75px for a button */
:is(.nts-halo-form, #halo-form, [id^="halo-form"]) .details-form.inlineform input:not([type="submit"]) {
  width: 100% !important;
  display: block;
}

@media (max-width: 639px) {
  :is(.nts-halo-form, #halo-form, [id^="halo-form"]) .DayPicker,
  :is(.nts-halo-form, #halo-form, [id^="halo-form"]) .DayPicker_transitionContainer,
  :is(.nts-halo-form, #halo-form, [id^="halo-form"]) .DateRangePicker_picker,
  :is(.nts-halo-form, #halo-form, [id^="halo-form"]) .SingleDatePicker_picker {
    width: 100% !important;
    max-width: 100vw;
    left: 0 !important;
  }
}