@xapp/form-widget 1.65.7 → 1.65.9

package/dist/xapp-form-widget.css

@@ -1,6 +1,6 @@
 .ModalDialog-module_xapp_search_modal__WpGiJ {
   position: fixed;
-  top: 16px;
+  top: 0;
   left: 0;
   right: 0;
   bottom: 0;
@@ -38,6 +38,11 @@
   display: flex;
   flex-direction: column;
 }
+@media (max-width: 640px) {
+  .ModalDialog-module_xapp_search_modal__body__qK17C {
+    width: 100%;
+  }
+}
 
 body.ModalDialog-module_xapp_search_opened__jgDSX {
   overflow: hidden;
@@ -108,26 +113,26 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   }
 }
 .SearchResponseBubble-module_xapp_search_response_bubble__UtmuK {
-  --xapp-bubble-background: var(--xapp-form-messages-others-bubble-background);
+  --xapp-bubble-background: var(--xapp-form-widget-messages-others-bubble-background);
 }
 .Card-module_xapp_search_card__9iVCv {
-  border: var(--xapp-form-card-border-style, solid) var(--xapp-form-card-border-width, 0) var(--xapp-form-card-border-color, var(--xapp-form-widget-border-color, var(--xapp-form-accent-color, #d3d3df)));
-  border-radius: var(--xapp-form-card-border-radius, 12px);
-  margin-top: var(--xapp-form-card-margin-top, 0);
-  margin-right: var(--xapp-form-card-margin-right, 0);
-  margin-bottom: var(--xapp-form-card-margin-bottom, 20px);
-  margin-left: var(--xapp-form-card-margin-left, 0);
-  padding-top: var(--xapp-form-card-padding-top, 0);
-  padding-right: var(--xapp-form-card-padding-right, 0);
-  padding-bottom: var(--xapp-form-card-padding-bottom, 0);
-  padding-left: var(--xapp-form-card-padding-left, 0);
+  border: var(--xapp-form-widget-card-border-style, solid) var(--xapp-form-widget-card-border-width, 0) var(--xapp-form-widget-card-border-color, var(--xapp-form-widget-border-color, var(--xapp-form-widget-accent-color, #d3d3df)));
+  border-radius: var(--xapp-form-widget-card-border-radius, 12px);
+  margin-top: var(--xapp-form-widget-card-margin-top, 0);
+  margin-right: var(--xapp-form-widget-card-margin-right, 0);
+  margin-bottom: var(--xapp-form-widget-card-margin-bottom, 20px);
+  margin-left: var(--xapp-form-widget-card-margin-left, 0);
+  padding-top: var(--xapp-form-widget-card-padding-top, 0);
+  padding-right: var(--xapp-form-widget-card-padding-right, 0);
+  padding-bottom: var(--xapp-form-widget-card-padding-bottom, 0);
+  padding-left: var(--xapp-form-widget-card-padding-left, 0);
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-items: stretch;
   overflow: hidden;
-  background-color: var(--xapp-form-card-background, #fff);
+  background-color: var(--xapp-formwidget--card-background, #fff);
 }
 .Card-module_xapp_search_card__featured__CX-L0 {
   flex: 1 1 240px;
@@ -175,20 +180,20 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  line-height: var(--xapp-form-card-link-line-height, 1.5em);
-  font-family: var(--xapp-form-card-link-font-family, RobotoRegular, serif);
-  font-weight: var(--xapp-form-card-link-font-weight, normal);
-  font-size: var(--xapp-form-card-link-font-size, 16px);
-  font-style: var(--xapp-form-card-link-font-style, normal);
-  color: var(--xapp-form-card-link-text-color, #006621);
-  margin-top: var(--xapp-form-card-link-margin-top, 0);
-  margin-right: var(--xapp-form-card-link-margin-right, 0);
-  margin-bottom: var(--xapp-form-card-link-margin-bottom, 0);
-  margin-left: var(--xapp-form-card-link-margin-left, 0);
-  padding-top: var(--xapp-form-card-link-padding-top, 0);
-  padding-right: var(--xapp-form-card-link-padding-right, 0);
-  padding-bottom: var(--xapp-form-card-link-padding-bottom, 0);
-  padding-left: var(--xapp-form-card-link-padding-left, 0);
+  line-height: var(--xapp-form-widget-link-line-height, 1.5em);
+  font-family: var(--xapp-form-widget-link-font-family, RobotoRegular, serif);
+  font-weight: var(--xapp-form-widget-link-font-weight, normal);
+  font-size: var(--xapp-form-widget-link-font-size, 16px);
+  font-style: var(--xapp-form-widget-link-font-style, normal);
+  color: var(--xapp-form-widget-link-text-color, #006621);
+  margin-top: var(--xapp-form-widget-link-margin-top, 0);
+  margin-right: var(--xapp-form-widget-link-margin-right, 0);
+  margin-bottom: var(--xapp-form-widget-link-margin-bottom, 0);
+  margin-left: var(--xapp-form-widget-link-margin-left, 0);
+  padding-top: var(--xapp-form-widget-link-padding-top, 0);
+  padding-right: var(--xapp-form-widget-link-padding-right, 0);
+  padding-bottom: var(--xapp-form-widget-link-padding-bottom, 0);
+  padding-left: var(--xapp-form-widget-link-padding-left, 0);
 }
 .Card-module_xapp_search_card__btn__DHrQp {
   flex: 1 1 auto;
@@ -199,49 +204,49 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  line-height: var(--xapp-form-card-title-line-height, 1.25em);
-  font-family: var(--xapp-form-card-title-font-family, RobotoRegular, serif);
-  font-weight: var(--xapp-form-card-title-font-weight, normal);
-  font-size: var(--xapp-form-card-title-font-size, 20px);
-  font-style: var(--xapp-form-card-title-font-style, normal);
-  color: var(--xapp-form-card-title-text-color, #1a0dab);
-  margin-top: var(--xapp-form-card-title-margin-top, 0);
-  margin-right: var(--xapp-form-card-title-margin-right, 0);
-  margin-bottom: var(--xapp-form-card-title-margin-bottom, 0);
-  margin-left: var(--xapp-form-card-title-margin-left, 0);
-  padding-top: var(--xapp-form-card-title-padding-top, 0);
-  padding-right: var(--xapp-form-card-title-padding-right, 0);
-  padding-bottom: var(--xapp-form-card-title-padding-bottom, 0);
-  padding-left: var(--xapp-form-card-title-padding-left, 0);
+  line-height: var(--xapp-form-widget-card-title-line-height, 1.25em);
+  font-family: var(--xapp-form-widget-card-title-font-family, RobotoRegular, serif);
+  font-weight: var(--xapp-form-widget-card-title-font-weight, normal);
+  font-size: var(--xapp-form-widget-card-title-font-size, 20px);
+  font-style: var(--xapp-form-widget-card-title-font-style, normal);
+  color: var(--xapp-form-widget-card-title-text-color, #1a0dab);
+  margin-top: var(--xapp-form-widget-title-margin-top, 0);
+  margin-right: var(--xapp-form-widget-title-margin-right, 0);
+  margin-bottom: var(--xapp-form-widget-title-margin-bottom, 0);
+  margin-left: var(--xapp-form-widget-title-margin-left, 0);
+  padding-top: var(--xapp-form-widget-title-padding-top, 0);
+  padding-right: var(--xapp-form-widget-title-padding-right, 0);
+  padding-bottom: var(--xapp-form-widget-title-padding-bottom, 0);
+  padding-left: var(--xapp-form-widget-title-padding-left, 0);
 }
 .Card-module_xapp_search_card__title__ddR3K:hover {
   text-decoration: underline;
 }
 .Card-module_xapp_search_card__description__MruSU {
-  line-height: var(--xapp-form-card-description-line-height, 1.25em);
-  font-family: var(--xapp-form-card-description-font-family, RobotoRegular, serif);
-  font-weight: var(--xapp-form-card-description-font-weight, normal);
-  font-size: var(--xapp-form-card-description-font-size, 16px);
-  font-style: var(--xapp-form-card-description-font-style, normal);
-  color: var(--xapp-form-card-description-text-color, #666);
-  margin-top: var(--xapp-form-card-description-margin-top, 6px);
-  margin-right: var(--xapp-form-card-description-margin-right, 0);
-  margin-bottom: var(--xapp-form-card-description-margin-bottom, 0);
-  margin-left: var(--xapp-form-card-description-margin-left, 0);
-  padding-top: var(--xapp-form-card-description-padding-top, 0);
-  padding-right: var(--xapp-form-card-description-padding-right, 0);
-  padding-bottom: var(--xapp-form-card-description-padding-bottom, 0);
-  padding-left: var(--xapp-form-card-description-padding-left, 0);
+  line-height: var(--xapp-form-widget-description-line-height, 1.25em);
+  font-family: var(--xapp-form-widget-description-font-family, RobotoRegular, serif);
+  font-weight: var(--xapp-form-widget-description-font-weight, normal);
+  font-size: var(--xapp-form-widget-description-font-size, 16px);
+  font-style: var(--xapp-form-widget-description-font-style, normal);
+  color: var(--xapp-form-widget-description-text-color, #666);
+  margin-top: var(--xapp-form-widget-description-margin-top, 6px);
+  margin-right: var(--xapp-form-widget-description-margin-right, 0);
+  margin-bottom: var(--xapp-form-widget-description-margin-bottom, 0);
+  margin-left: var(--xapp-form-widget-description-margin-left, 0);
+  padding-top: var(--xapp-form-widget-description-padding-top, 0);
+  padding-right: var(--xapp-form-widget-description-padding-right, 0);
+  padding-bottom: var(--xapp-form-widget-description-padding-bottom, 0);
+  padding-left: var(--xapp-form-widget-description-padding-left, 0);
   overflow: hidden;
-  max-height: calc(5 * var(--xapp-form-card-description-line-height, 1.25em));
+  max-height: calc(5 * var(--xapp-form-widget-description-line-height, 1.25em));
   position: relative;
 }
 .Card-module_xapp_search_card__description__MruSU:after {
-  background: linear-gradient(to bottom, rgba(var(--xapp-form-card-background, #fff), 0) 0%, rgba(var(--xapp-form-card-background, #fff), 0) 12.5%, rgba(var(--xapp-form-card-background, #fff), 1) 100%);
+  background: linear-gradient(to bottom, rgba(var(--xapp-formwidget--card-background, #fff), 0) 0%, rgba(var(--xapp-formwidget--card-background, #fff), 0) 12.5%, rgba(var(--xapp-formwidget--card-background, #fff), 1) 100%);
   content: "";
-  height: var(--xapp-form-card-description-line-height, 1.25em);
+  height: var(--xapp-form-widget-description-line-height, 1.25em);
   position: absolute;
-  top: calc(4 * var(--xapp-form-card-description-line-height, 1.25em));
+  top: calc(4 * var(--xapp-form-widget-description-line-height, 1.25em));
   left: 0;
   right: 0;
   pointer-events: none;
@@ -299,16 +304,30 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   display: flex;
   flex-direction: column;
 }
+.MuiChip-label {
+  padding-left: 4px !important;
+  padding-right: 4px !important;
+}
+
 .FormFieldChips-module_xapp_checkbox_chip__8DRkb {
   margin: 6px !important;
-  font-size: 12px !important;
+  font-size: 0.875em !important;
   padding: 8px 16px !important;
   height: 32px !important;
   border-radius: 16px !important;
   min-width: 130px !important;
-  background-color: var(--bg-color, #c4dced) !important;
+  background-color: var(--xapp-form-chip-bg-color, #c4dced) !important;
   transition: background-color 0.3s ease;
 }
+@media (max-width: 640px) {
+  .FormFieldChips-module_xapp_checkbox_chip__8DRkb {
+    min-width: 100px !important;
+    font-size: 10px !important;
+  }
+  .FormFieldChips-module_xapp_checkbox_chip__8DRkb .MuiChip-label {
+    margin: 0;
+  }
+}
 
 .FormFieldChips-module_xapp_chip_clicked__S8xmo {
   background-color: #6e7ae1 !important;
@@ -316,60 +335,133 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
 
 .FormFieldChips-module_xapp_chips_container__ZITF5 {
   display: flex;
-  flex-wrap: wrap; /* Allows items to wrap onto a new row */
-  justify-content: center; /* Centers items horizontally */
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .FormFieldChips-module_xapp_chip_wrapper__AGfKl {
   flex: 0 0 calc(33.33% - 10px);
-  max-width: calc(33.33% - 10px);
-  margin: 5px;
+  margin: 0 2px;
   text-align: center;
 }
+@media (max-width: 640px) {
+  .FormFieldChips-module_xapp_chip_wrapper__AGfKl {
+    margin: 0 2px;
+  }
+}
 
 .FormFieldChips-module_xapp_checkbox_chip__8DRkb:hover {
-  --bg-color: calc(var(--bg-color) + 20);
+  --xapp-form-chip-bg-color: calc(var(--xapp-form-chip-bg-color) + 20);
 }
 
+.FormFieldChips-module_xapp_chips_title_container__VGw77 {
+  margin: inherit;
+}
 .FormFieldChips-module_xapp_chips_title_container__empty__5seHa p {
-  margin: 0;
+  margin: 10px 0;
 }
 .FormFieldTextInput-module_xapp_text_input_container__title__zeqDT p {
   margin: 0;
 }
+
+.FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiInputBase-input {
+  padding: 21px 12px 4px 12px !important;
+  border: 0 !important;
+}
 .FormFieldDate-module_xapp_date_picker_container__d8LYB {
   max-height: 250px;
 }
 
-.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-today {
-  font-weight: bold !important;
-  color: #321aa3 !important;
+.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiDayCalendar-weekDayLabel {
+  width: 30px !important;
+  height: 32px !important;
+}
+.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersCalendarHeader-root {
+  margin-top: 10px !important;
+  margin-bottom: 4px !important;
+}
+.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiDayCalendar-slideTransition {
+  min-height: 200px !important;
+}
+.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersArrowSwitcher-button, .FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-root.MuiButtonBase-root {
+  color: rgba(0, 0, 0, 0.54) !important;
+  background-color: transparent !important;
+}
+.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersArrowSwitcher-button:hover, .FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-root.MuiButtonBase-root:hover {
+  background-image: unset !important;
+}
+.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersArrowSwitcher-button:focus, .FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-root.MuiButtonBase-root:focus {
+  background-image: unset !important;
+  outline: unset !important;
+  border: 0 !important;
 }
 .FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-root {
   padding: 0px !important;
+  font-family: inherit !important;
+}
+.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-root.Mui-selected {
+  color: #fff !important;
+  background-color: #1976d2 !important;
+  font-weight: 600 !important;
+}
+.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-today {
+  font-weight: bold !important;
+  color: #321aa3 !important;
 }
 .FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-dayWithMargin {
   width: 30px !important;
   height: 30px !important;
+  font-weight: 600 !important;
+  font-size: 0.75rem !important;
+}
+.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-dayWithMargin:hover {
+  background-image: unset !important;
+  background-color: #cfd8da !important;
+}
+.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-dayWithMargin:focus {
+  background-image: unset !important;
+  background-color: #1976d2 !important;
+}
+.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-dayWithMargin.Mui-disabled {
+  font-weight: 300 !important;
 }
 .FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiDayCalendar-weekDayLabel {
-  width: 30px !important;
-  height: 32px !important;
+  font-weight: 600 !important;
+  font-size: 0.75rem !important;
 }
-.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersCalendarHeader-root {
-  margin-top: 10px !important;
+.FormFieldTextInputAddress-module_xapp_text_input_address_container__title__IbovL p {
+  margin: 0;
 }
-.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiDayCalendar-slideTransition {
-  min-height: 200px !important;
+
+.FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiInputBase-input {
+  margin: 2.5px 4px !important;
+  border: 0 !important;
+}
+.FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiFilledInput-root {
+  padding-top: 14px !important;
+  padding-left: 8px !important;
 }
 .FormStepDisplay-module_xapp_formfield__hRmVx {
   display: none;
+  font-family: inherit !important;
 }
 .FormStepDisplay-module_xapp_formfield__hRmVx.FormStepDisplay-module_active__fCsMz {
   display: block;
 }
 .FormStepDisplay-module_xapp_formfield_title__INjeF p {
   margin: 10px 0 0 0;
+  font-size: 1em;
+}
+.FormStepDisplay-module_xapp_formfield__hRmVx .MuiAutocomplete-clearIndicator, .FormStepDisplay-module_xapp_formfield__hRmVx .MuiAutocomplete-popupIndicator {
+  color: rgba(0, 0, 0, 0.54) !important;
+  background-color: transparent !important;
+}
+.FormStepDisplay-module_xapp_formfield__hRmVx .MuiAutocomplete-clearIndicator:hover, .FormStepDisplay-module_xapp_formfield__hRmVx .MuiAutocomplete-popupIndicator:hover {
+  background-image: unset !important;
+  background-color: #cfd8da !important;
+}
+.FormStepDisplay-module_xapp_formfield__hRmVx .MuiAutocomplete-clearIndicator:focus, .FormStepDisplay-module_xapp_formfield__hRmVx .MuiAutocomplete-popupIndicator:focus {
+  background-image: unset !important;
 }
 
 .FormStepDisplay-module_xapp_form_nav_buttons__lI4BI {
@@ -381,6 +473,22 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
 .FormStepDisplay-module_xapp_dummy_button__Q-nE6 {
   flex-grow: 1;
 }
+
+.FormStepDisplay-module_xapp_primary_button__d2wra {
+  background-color: var(--xapp-form-widget-primary-button-color, #ea6539) !important;
+  font-family: inherit !important;
+}
+.FormStepDisplay-module_xapp_primary_button__d2wra:hover {
+  filter: brightness(80%) !important;
+}
+
+.FormStepDisplay-module_xapp_secondary_button__LuMfN {
+  background-color: var(--xapp-form-widget-secondary-button-color, #d24cc7) !important;
+  font-family: inherit !important;
+}
+.FormStepDisplay-module_xapp_secondary_button__LuMfN:hover {
+  filter: brightness(80%) !important;
+}
 .FormFieldSelect-module_xapp_checkbox_select__QccWu {
   margin: 6px !important;
   font-size: 12px !important;
@@ -403,6 +511,7 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
 .SearchResponseFormDisplay-module_xapp_formstep__2WhYK {
   display: none;
   padding: 8px;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
 }
 .SearchResponseFormDisplay-module_xapp_formstep__2WhYK.SearchResponseFormDisplay-module_active__x-n-n {
   display: block;
@@ -412,28 +521,38 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
 }
 
 .SearchResponseFormDisplay-module_xapp_header_container__ayUqb {
-  background-color: #002b54 !important;
+  background-color: var(--xapp-form-widget-header-background-color, #012b54) !important;
   position: absolute;
   top: 0px;
   right: 0px;
   left: 0px;
   z-index: 1000;
+  min-height: 88px;
+  padding-top: 16px;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
 }
 .SearchResponseFormDisplay-module_xapp_header_container__ayUqb .SearchResponseFormDisplay-module_empty_step_header__ClbsP {
   height: 42px;
 }
+.SearchResponseFormDisplay-module_xapp_header_container__ayUqb .MuiTypography-root {
+  color: var(--xapp-form-widget-header-color, #b7c5d1) !important;
+}
 
 .SearchResponseFormDisplay-module_xapp_header_container_showcase__-VUjy {
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
-  background-color: #002b54 !important;
+  background-color: var(--xapp-form-widget-header-background-color, #012b54) !important;
   padding-top: 10px;
   padding-bottom: 10px;
   margin-top: 10px;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
 }
 .SearchResponseFormDisplay-module_xapp_header_container_showcase__-VUjy .SearchResponseFormDisplay-module_empty_step_header__ClbsP {
   height: 42px;
 }
+.SearchResponseFormDisplay-module_xapp_header_container_showcase__-VUjy .MuiTypography-root {
+  color: var(--xapp-form-widget-header-color, #b7c5d1) !important;
+}
 .SimpleNavigationHeader-module_xapp_navigation_header__YhCD1 {
   background-color: inherit !important;
 }
@@ -443,11 +562,11 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   padding: 0px !important;
 }
 .SearchResponseOutputSpeech-module_xapp_search_response_output_speech__DCf8F {
-  font-family: var(--xapp-form-messages-others-font-family, RobotoRegular, serif);
-  font-weight: var(--xapp-form-messages-others-font-weight, normal);
-  font-size: var(--xapp-form-messages-others-font-size, 16px);
-  font-style: var(--xapp-form-messages-others-font-style, normal);
-  color: var(--xapp-form-messages-others-text-color, #000);
+  font-family: var(--xapp-form-widget-messages-others-font-family, RobotoRegular, serif);
+  font-weight: var(--xapp-form-widget-messages-others-font-weight, normal);
+  font-size: var(--xapp-form-widget-messages-others-font-size, 16px);
+  font-style: var(--xapp-form-widget-messages-others-font-style, normal);
+  color: var(--xapp-form-widget-messages-others-text-color, #000);
 }
 .SearchResponseOutputSpeech-module_xapp_search_response_output_speech__DCf8F p {
   margin: 0 0 1em 0;
@@ -467,7 +586,7 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
 .Button-module_xapp_search_btn__cQf3T {
   display: inline-block;
   border-radius: 12px;
-  border: solid 1px var(--xapp-form-widget-border-color, var(--xapp-form-accent-color, #d3d3df));
+  border: solid 1px var(--xapp-form-widget-border-color, var(--xapp-form-widget-accent-color, #d3d3df));
   background: white;
   padding: 4px 24px;
   color: black;
@@ -533,7 +652,7 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
 }
 .SearchResult-module_xapp_search_result__preview__vQRcO {
   flex: 0 0 40%;
-  border-left: solid 1px var(--xapp-form-widget-border-color, var(--xapp-form-accent-color, #d3d3df));
+  border-left: solid 1px var(--xapp-form-widget-border-color, var(--xapp-form-widget-accent-color, #d3d3df));
   padding-left: 12px;
   padding-right: 12px;
 }
@@ -542,11 +661,16 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   padding: 4px;
   color: inherit;
 }
+.FormWidget-module_loading__aAJ-B {
+  background-color: rgba(0, 0, 0, 0) !important;
+  border: 0px !important;
+}
+
 .FormWidget-module_xapp_form_widget__V-G-H {
   display: flex;
   flex-direction: column;
-  border: var(--xapp-form-widget-border-style, solid) var(--xapp-form-widget-border-width, 1px) var(--xapp-form-widget-border-color, var(--xapp-form-accent-color, #d3d3df));
-  background: #f4f8fd;
+  border: var(--xapp-form-widget-border-style, solid) var(--xapp-form-widget-border-width, 1px) var(--xapp-form-widget-border-color, var(--xapp-form-widget-accent-color, #d3d3df));
+  background: var(--xapp-form-widget-background-color, #f4f8fd);
   border-radius: var(--xapp-form-widget-border-radius, 17.5px);
   overflow: hidden;
   max-width: 100%;
@@ -557,7 +681,7 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
 .FormWidget-module_xapp_form_widget__content__a9NXC {
   display: flex;
   flex-direction: column;
-  border-top: var(--xapp-form-widget-border-style, solid) var(--xapp-form-widget-border-width, 1px) var(--xapp-form-widget-border-color, var(--xapp-form-accent-color, #d3d3df));
+  border-top: var(--xapp-form-widget-border-style, solid) var(--xapp-form-widget-border-width, 1px) var(--xapp-form-widget-border-color, var(--xapp-form-widget-accent-color, #d3d3df));
   max-height: 100%;
   min-height: 128px;
   overflow: hidden;
@@ -593,13 +717,18 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   background-color: #a0a1c5;
 }
 
+@media (max-width: 640px) {
+  .FormWidget-module_xapp_form_widget__content__a9NXC {
+    width: 100%;
+  }
+}
 .FormWidget-module_xapp_search_suggestions__J3DIf + container {
   position: absolute;
   top: 74px;
   left: 0;
   width: 100%;
-  background-color: #f4f8fd;
-  border: var(--xapp-form-widget-border-style, solid) var(--xapp-form-widget-border-width, 1px) var(--xapp-form-widget-border-color, var(--xapp-form-accent-color, #d3d3df));
+  background-color: var(--xapp-form-widget-background-color, #f4f8fd);
+  border: var(--xapp-form-widget-border-style, solid) var(--xapp-form-widget-border-width, 1px) var(--xapp-form-widget-border-color, var(--xapp-form-widget-accent-color, #d3d3df));
   border-radius: 0 0 var(--xapp-form-widget-border-radius, 17.5px) var(--xapp-form-widget-border-radius, 17.5px);
 }
 .ChatButton-module_xapp_chat_button__HH7eW {
@@ -607,17 +736,17 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   top: 25px;
   left: 220px;
   cursor: pointer;
-  margin-top: var(--xapp-chat-button-margin-top, var(--xapp-widget-margin-top, 16px));
-  margin-right: var(--xapp-chat-button-margin-right, var(--xapp-widget-margin-right, 16px));
-  margin-bottom: var(--xapp-chat-button-margin-bottom, var(--xapp-widget-margin-bottom, 16px));
-  margin-left: var(--xapp-chat-button-margin-left, var(--xapp-widget-margin-left, 16px));
+  margin-top: var(--xapp-form-widget-margin-top, 16px);
+  margin-right: var(--xapp-form-widget-margin-right, 16px);
+  margin-bottom: var(--xapp-form-widget-margin-bottom, 16px);
+  margin-left: var(--xapp-form-widget-margin-left, 16px);
   display: block;
   opacity: 1;
   animation: ChatButton-module_widget-show-grow__z65qQ 0.5s backwards;
   width: 75px;
   height: 75px;
-  z-index: var(--xapp-widget-z-index, 1000);
-  background-color: transparent;
+  z-index: var(--xapp-form-widget-z-index, 1000);
+  background-color: transparent !important;
   padding: 0;
   border-width: 0px;
 }
@@ -634,7 +763,7 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   height: 70px;
   border-radius: 35px;
   border: 2px solid rgb(255, 255, 255);
-  background-color: var(--xapp-chat-button-background, #2f7ddd);
+  background-color: var(--xapp-form-widget-chat-button-background, #2f7ddd);
   box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
   left: 50% !important;
   top: 50% !important;