@onlive.ai/common-121 0.2.187 → 0.2.190

package/themes/custom/audi-dark.theme.css

@@ -0,0 +1,921 @@
+/**
+ * Audi Dark Theme for Onlive Flow Components
+ * ====================================
+ *
+ * This file contains custom CSS styling for the Audi brand implementation
+ * of the Onlive Flow component library. The theme provides consistent
+ * branding elements following Audi's design system guidelines.
+ */
+
+/**
+ * Font Face Definitions
+ * ----------------------
+ * Custom font definitions for Audi Typeface
+ */
+@font-face {
+  font-family: "AudiType";
+  src: url("https://assets.one.audi/assets/fonts/AudiTypeVF.woff2") format("woff2-variations");
+  font-display: swap;
+  font-style: normal;
+  font-stretch: 100% 130%;
+}
+
+/* ========================================================================
+   ROOT VARIABLES & THEME DEFINITIONS
+   ======================================================================== */
+
+/**
+ * Dark Theme Color Palette & Variables
+ * -------------------------------------
+ * Primary theme variables including Audi brand colors,
+ * Onlive UI color palette, typography, and component-specific variables
+ */
+:root,
+:host {
+  color: var(--ol-color-neutral-900);
+  background: transparent;
+  font-family: AudiType, sans-serif;
+
+  /* Audi UI Palette */
+  --audi-active-color: rgb(101 112 129);
+  --audi-surface-color: #2c303b;
+  --audi-surface-active-color: rgb(44 51 63);
+  --audi-error-color: #eb0d3f;
+  --audi-border-radius-small: 10px;
+  --audi-border-radius-medium: 16px;
+  --audi-border-radius-large: 22px;
+
+  /* Onlive UI Palette */
+  --ol-color-primary-50: rgb(0 0 0);
+  --ol-color-primary-100: rgb(40 40 40);
+  --ol-color-primary-200: rgb(80 80 80);
+  --ol-color-primary-300: rgb(120 120 120);
+  --ol-color-primary-400: rgb(160 160 160);
+  --ol-color-primary-500: rgb(200 200 200);
+  --ol-color-primary-600: rgb(230 230 230);
+  --ol-color-primary-700: rgb(240 240 240);
+  --ol-color-primary-800: rgb(255 255 255);
+  --ol-color-primary-900: rgb(255 255 255);
+  --ol-color-primary-950: rgb(255 255 255);
+
+  --ol-color-gray-950: rgb(254 254 254);
+  --ol-color-gray-900: rgb(249 249 249);
+  --ol-color-gray-800: rgb(239 239 239);
+  --ol-color-gray-700: rgb(214 214 214);
+  --ol-color-gray-600: rgb(179 179 179);
+  --ol-color-gray-500: rgb(141 141 141);
+  --ol-color-gray-400: rgb(102 102 102);
+  --ol-color-gray-300: rgb(62 62 62);
+  --ol-color-gray-200: rgb(20 20 20);
+  --ol-color-gray-100: rgb(5 5 5);
+  --ol-color-gray-50: rgb(0 0 0);
+
+  --ol-color-neutral-50: var(--ol-color-gray-50);
+  --ol-color-neutral-100: var(--ol-color-gray-100);
+  --ol-color-neutral-200: var(--ol-color-gray-200);
+  --ol-color-neutral-300: var(--ol-color-gray-300);
+  --ol-color-neutral-400: var(--ol-color-gray-400);
+  --ol-color-neutral-500: var(--ol-color-gray-500);
+  --ol-color-neutral-600: var(--ol-color-gray-600);
+  --ol-color-neutral-700: var(--ol-color-gray-700);
+  --ol-color-neutral-800: var(--ol-color-gray-800);
+  --ol-color-neutral-900: var(--ol-color-gray-900);
+  --ol-color-neutral-950: var(--ol-color-gray-950);
+  --ol-color-neutral-0: rgb(26, 27, 30);
+  --ol-color-neutral-1000: rgb(255, 255, 255);
+
+  --ol-color-danger-600: var(--audi-error-color);
+
+  /* Onlive UI Font and Vars */
+  --ol-font-sans: AudiType, sans-serif;
+  --ol-input-required-content: "";
+  --ol-calendar-month-font-family: AudiType, sans-serif;
+  --ol-calendar-month-font-size: var(--ol-font-size-large);
+  --ol-calendar-month-font-stretch: expanded;
+  --ol-calendar-day-border-radius: var(--audi-border-radius-small);
+  --ol-calendar-day-padding: 16px 0;
+  --ol-calendar-day-margin: 2px;
+  --ol-calendar-day-border: 1px solid var(--ol-color-neutral-300);
+  --ol-calendar-day-hover-border: 1px solid var(--ol-color-primary-300);
+  --ol-calendar-day-hover-background-color: transparent;
+  --ol-calendar-selected-background-color: rgb(167 175 190);
+  --ol-calendar-inactive-color: var(--ol-color-neutral-300);
+  --ol-calendar-inactive-background-color: transparent;
+  --ol-calendar-header-margin: 0 auto var(--ol-spacing-large) auto;
+  --ol-calendar-week-color: var(--ol-color-neutral-900);
+  --ol-input-floating-label-background-color: transparent;
+  --ol-input-floating-label-font-size-medium: var(--ol-font-size-x-small);
+  --ol-input-label-color: var(--ol-color-neutral-600);
+  --ol-input-border-color: var(--ol-color-neutral-500);
+  --ol-input-border-color-focus: var(--ol-color-neutral-600);
+  --ol-input-focus-ring-color: transparent;
+  --ol-focus-ring-width: 2px;
+  --ol-input-color: var(--ol-color-neutral-900);
+  --ol-input-background-color-focus: transparent;
+  --ol-input-color-hover: var(--ol-color-neutral-900);
+}
+
+/* ========================================================================
+   CORE ONLIVE UI COMPONENTS
+   ======================================================================== */
+
+/**
+ * Button Component Styling
+ * ------------------------
+ * Custom styling for ol-button elements including base styles,
+ * label padding, and spinner appearance
+ */
+ol-button::part(base) {
+  border-radius: var(--ol-border-radius-pill);
+}
+ol-button[size="medium"]::part(base) {
+  line-height: 48px;
+}
+ol-button[variant="primary"]::part(base) {
+  background-color: var(--audi-active-color);
+  color: var(--ol-color-neutral-800);
+  font-weight: normal;
+  font-family: var(--ol-font-sans);
+  font-size: var(--ol-font-size-medium);
+  border: none;
+}
+ol-button::part(label) {
+  padding: 0 var(--ol-spacing-x-large);
+  font-family: AudiType, sans-serif;
+}
+ol-button::part(spinner) {
+  font-size: 1.5em;
+}
+
+/**
+ * Input Component Styling
+ * -----------------------
+ * Styling for ol-input elements with transparent borders,
+ * bottom border emphasis, and custom border radius settings
+ */
+ol-input::part(base) {
+  border-radius: var(--audi-border-radius-small);
+  background-color: transparent;
+  border-color: var(--ol-color-neutral-500);
+  min-height: 48px;
+}
+ol-input::part(input) {
+  min-height: 48px;
+  color: var(--ol-color-neutral-900);
+}
+ol-input::part(input)::placeholder {
+  color: var(--ol-color-neutral-600);
+}
+ol-input::part(form-control-label) {
+  width: 100%;
+  margin-bottom: var(--ol-spacing-x-small);
+}
+
+/**
+ * Textarea Component Styling
+ * --------------------------
+ * Custom styling for ol-textarea elements including
+ * border radius, bottom border emphasis, and padding adjustments
+ */
+ol-textarea::part(base) {
+  border-radius: var(--audi-border-radius-small);
+  border-color: var(--ol-color-neutral-500);
+  background-color: transparent;
+}
+ol-textarea::part(form-control-label) {
+  margin-bottom: var(--ol-spacing-x-small);
+}
+
+/**
+ * Rating Component Styling
+ * ------------------------
+ * Custom styling for ol-rating elements including
+ * active symbol color adjustments
+ */
+ol-rating {
+  --symbol-color-active: var(--ol-color-amber-700);
+}
+
+/**
+ * Select Component Styling
+ * --------------------------
+ * Custom styling for ol-select elements including
+ * combobox appearance and border settings
+ */
+ol-select::part(combobox) {
+  border-radius: var(--audi-border-radius-small);
+  background-color: transparent;
+  min-height: 48px;
+}
+ol-select::part(expand-icon) {
+  color: var(--ol-color-neutral-700);
+}
+ol-select::part(form-control-label) {
+  margin-bottom: var(--ol-spacing-x-small);
+}
+ol-select::part(display-input) {
+  font-family: var(--ol-font-sans);
+}
+
+/**
+ * Checkbox Component Styling
+ * --------------------------
+ * Custom styling for ol-checkbox elements including
+ * checked icon appearance and background color
+ */
+ol-checkbox::part(control) {
+  background: transparent;
+  border-color: var(--ol-color-neutral-600);
+}
+ol-checkbox::part(checked-icon) {
+  color: var(--ol-color-neutral-600);
+}
+ol-checkbox::part(label) {
+  font-family: var(--ol-font-sans);
+  line-height: 24px;
+  margin-left: var(--ol-spacing-small);
+}
+
+/**
+ * Radio Button Component Styling
+ * ------------------------------
+ * Custom styling for ol-radio elements including
+ * checked icon appearance and background color
+ */
+ol-radio::part(base) {
+  --toggle-size: 24px;
+  --ol-input-border-width: 1px;
+}
+
+/**
+ * Tooltip Component Styling
+ * -------------------------
+ * Custom styling for ol-tooltip elements including
+ * background color, padding, and font size adjustments
+ */
+ol-tooltip::part(body) {
+  font-size: var(--ol-font-size-x-small);
+  background: linear-gradient(#37404e, #2c343f);
+  color: var(--ol-color-neutral-800);
+  border-radius: var(--audi-border-radius-large);
+  padding: var(--ol-spacing-medium);
+  line-height: 1.5;
+  border: 1px solid #4d5867;
+  box-shadow:
+    rgba(0, 0, 0, 0.07) 0px 1px 1px,
+    rgba(0, 0, 0, 0.07) 0px 2px 2px,
+    rgba(0, 0, 0, 0.07) 0px 4px 4px,
+    rgba(0, 0, 0, 0.07) 0px 8px 8px,
+    rgba(0, 0, 0, 0.07) 0px 16px 16px;
+}
+ol-tooltip::part(base__arrow) {
+  scale: 1.2;
+  background: linear-gradient(#37404e, #2c343f);
+}
+ol-tooltip::part(base__popup) {
+  border-radius: var(--audi-border-radius-large);
+}
+
+/**
+ * Details Component Styling
+ * -------------------------
+ * Custom styling for ol-details elements including
+ * summary icon rotation and open state adjustments
+ */
+ol-details::part(summary-icon) {
+  rotate: 90deg;
+}
+ol-details[open]::part(summary-icon) {
+  rotate: -90deg;
+}
+
+/**
+ * General Label Styling
+ * ---------------------
+ * Typography styling for general label elements
+ */
+label {
+  font-stretch: semi-expanded;
+}
+
+/* ========================================================================
+   ONLIVE FLOW PACKAGE COMPONENTS
+   ======================================================================== */
+
+/**
+ * Dark Theme Background
+ * ---------------------
+ * Background color setting for dark theme
+ */
+.ol-theme-dark {
+  background-color: rgb(33 35 44);
+}
+
+/**
+ * Widget Base Styling
+ * -------------------
+ * Base container styling for flow widgets
+ */
+.ofl__widget,
+.ofl__flow {
+  max-width: 528px;
+}
+.ofl__flow {
+  margin: 0 auto;
+}
+.ofl__flow--theme-dark .ofl__flow__loading-overlay {
+  background: transparent;
+}
+
+/**
+ * Flow Title Styling
+ * ----------------------
+ * Typography styling for flow titles including font size and stretch
+ */
+.ofl__flow__title {
+  font-size: 38px;
+  font-stretch: expanded;
+  font-family: AudiType, sans-serif;
+  font-weight: var(--ol-font-weight-normal);
+  line-height: var(--ol-line-height-dense);
+  margin: 0 0 var(--ol-spacing-small);
+}
+.ofl__flow__description {
+  margin-bottom: var(--ol-spacing-3x-large);
+}
+
+/**
+ * Flow Stages & Actions
+ * ---------------------
+ * Styling for flow navigation stages and action containers
+ */
+.ofl__flow__stages {
+  font-size: var(--ol-font-size-small);
+  font-stretch: expanded;
+}
+.ofl__flow__stages.ofl__flow__stages--top {
+  margin-bottom: var(--ol-spacing-x-large);
+}
+.ofl__stages__step {
+  font-weight: var(--ol-font-weight-normal);
+}
+.ofl__flow__actions--top {
+  margin-bottom: var(--ol-spacing-2x-large);
+}
+.ofl__flow__actions--bottom {
+  margin-top: var(--ol-spacing-2x-large);
+}
+
+.ofl__flow--step-appointmentCancellation,
+.ofl__flow--step-cancellationFailed,
+.ofl__flow--step-cancellationThankYouPage,
+.ofl__flow--step-updateDatetime,
+.ofl__flow--step-updateCustomerDetails {
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+/**
+ * Action Buttons
+ * --------------
+ * Styling for flow action buttons including variants and hover states
+ */
+.ofl__actions__button {
+  min-width: calc(var(--ol-spacing-medium) * 9);
+  justify-self: start;
+}
+.ofl__actions > :last-child {
+  justify-self: end;
+}
+.ofl__actions > :last-child:nth-child(odd) {
+  grid-column-start: -1;
+}
+.ofl__actions__button--type-back::part(base) {
+  background: transparent;
+}
+
+/**
+ * Error Component Styling
+ * -----------------------
+ * Custom styling for error components including icon, message,
+ * and link interactions
+ */
+.ofl__error {
+  margin: var(--ol-spacing-x-large) 0 0;
+  align-items: flex-start;
+}
+.ofl__error-content {
+  align-items: flex-start;
+}
+.ofl__error-message {
+  flex: 1;
+  line-height: 1.6;
+}
+.ofl__error-message h3 {
+  font-size: var(--ol-font-size-2x-large);
+  font-weight: var(--ol-font-weight-light);
+  line-height: var(--ol-line-height-dense);
+  margin-bottom: var(--ol-spacing-large);
+  font-stretch: expanded;
+}
+.ofl__error-message p {
+  line-height: 1.6;
+  margin-bottom: var(--ol-spacing-large);
+}
+.ofl__error__actions {
+  width: 100%;
+}
+.ofl__actions--error {
+  display: flex;
+}
+.ofl__actions--error .ofl__actions__button {
+  flex: 1;
+}
+.ofl__error--field-loading {
+  align-items: center;
+  margin: var(--ol-spacing-x-large) 0 var(--ol-spacing-2x-large);
+}
+.ofl__error--field-loading .ofl__error-content {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+/**
+ * Calendar Component Styling
+ * --------------------------
+ * Comprehensive styling for calendar elements including
+ * time items, labels, and grid layouts
+ */
+.ofl__calendar__calendar,
+.ofl__calendar__calendar::part(base) {
+  width: 100%;
+}
+.ofl__calendar__calendar::part(header-content) {
+  padding: 0 var(--ol-spacing-x-large);
+}
+.ofl__calendar__label,
+.ofl__calendar__time-label {
+  font-stretch: expanded;
+  font-weight: var(--ol-font-weight-bold);
+}
+.ofl__calendar__time-label {
+  font-size: var(--ol-font-size-large);
+  margin: var(--ol-spacing-2x-large) 0 var(--ol-spacing-small);
+}
+.ofl__calendar__time-item {
+  width: 100%;
+}
+.ofl__calendar__time-list--list {
+  max-width: 100%;
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item::part(button__label) {
+  font-weight: var(--ol-font-weight-normal);
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item::part(button) {
+  min-height: 50px;
+  border-color: transparent;
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item::part(label) {
+  font-size: var(--ol-font-size-small);
+  font-weight: var(--ol-font-weight-normal);
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item[checked]::part(button) {
+  color: var(--ol-color-neutral-900);
+  background-color: rgb(44 51 63);
+  border-color: rgb(78 86 96);
+}
+.ofl__calendar__time-list--list::part(button-group) {
+  width: 100%;
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item:hover::part(button) {
+  border-color: var(--ol-color-primary-300);
+}
+.ofl__calendar__time-list--list
+  .ofl__calendar__time-item:hover:not([disabled], [checked])::part(button)::after {
+  border: 1px solid var(--ol-color-primary-300);
+}
+.ofl__calendar__time-list--list[size="small"]::part(button-group__base) {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-flow: row;
+  gap: var(--ol-spacing-2x-small);
+  justify-content: start;
+}
+
+/**
+ * Map Component Styling
+ * ---------------------
+ * Styling for map components including search forms, options,
+ * location buttons, and input elements
+ */
+.ofl__map__option-item[no-service]::part(base) {
+  background-color: var(--ol-color-neutral-200);
+}
+.ofl__map__map {
+  border-radius: var(--audi-border-radius-large);
+  overflow: hidden;
+}
+.ofl__map .ofl__map__search-form,
+.ofl__map.ofl__map--small .ofl__map__search-form {
+  margin-bottom: var(--ol-spacing-medium);
+}
+.ofl__map .ofl__map__search-form > :not(:first-child),
+.ofl__map.ofl__map--small .ofl__map__search-form > :not(:first-child) {
+  margin-top: var(--ol-spacing-medium);
+}
+.ofl__map__search-button-outside {
+  align-self: flex-end;
+  margin-top: var(--ol-spacing-small) 12px;
+}
+.ofl__map__location-button {
+  font-size: var(--ol-font-size-x-large);
+  padding-inline-start: var(--ol-spacing-x-small);
+  margin-inline-end: var(--ol-spacing-2x-small);
+  filter: invert(1);
+  opacity: 0.5;
+}
+.ofl__map__search-prefix-icon {
+  font-size: var(--ol-font-size-x-large);
+  padding-inline-end: var(--ol-spacing-medium);
+}
+.ofl__map__search-input::part(input) {
+  font-family: var(--ol-font-sans);
+  padding: 0;
+}
+.ofl__map__search-input::part(prefix) {
+  filter: invert(1);
+  opacity: 0.8;
+}
+.ofl__input__error-message {
+  gap: var(--ol-spacing-x-small);
+  line-height: var(--ol-line-height-loose);
+  font-size: 1em;
+}
+.ofl__input__error-message,
+.ofl__textarea__error-message {
+  color: var(--ol-color-neutral-600);
+}
+.ofl__input-affix--success {
+  scale: 1.5;
+}
+.ofl__input--error::part(form-control-label) {
+  color: var(--ol-color-neutral-600);
+  --ol-input-label-color: var(--ol-color-neutral-600);
+  --ol-input-required-content-color: var(--ol-color-neutral-600);
+}
+.ofl__map__options-list--radio {
+  border: none;
+}
+.ofl__map__options-list--radio .ofl__map__option-item {
+  background: var(--audi-surface-color);
+  margin-bottom: var(--ol-spacing-large);
+  border-radius: var(--audi-border-radius-large);
+}
+.ofl__map__options-list--radio .ofl__map__option-item--selected {
+  background: var(--audi-surface-active-color);
+}
+.ofl__map__options-list--radio .ofl__map__option-item-radio::part(control) {
+  border-color: var(--ol-color-neutral-700);
+  background-color: #4a4d57;
+}
+.ofl__map__options-list--radio .ofl__map__option-item--selected,
+.ofl__map__options-list--radio
+  .ofl__map__option-item:not(:last-child, .ofl__map__option-item--selected),
+.ofl__map__options-list--radio .ofl__map__option-item--selected + .ofl__map__option-item {
+  border: none;
+  border-bottom: none;
+}
+.ofl__map__options-list--radio .ofl__map__option-item-radio::part(checked-icon) {
+  scale: 1.25;
+}
+.ofl__map__option-item-radio {
+  margin-bottom: var(--ol-spacing-2x-small);
+}
+.ofl__map__option-item-radio::part(label) {
+  margin-left: var(--ol-spacing-small);
+  font-size: 18px;
+}
+.ofl__map__options-title {
+  font-stretch: ultra-expanded;
+  font-size: var(--ol-font-size-x-large);
+  font-weight: var(--ol-font-weight-normal);
+  margin: var(--ol-spacing-2x-large) 0 var(--ol-spacing-medium);
+}
+.ofl__map__option-item__description,
+.ofl__map__option-item__distance {
+  color: var(--ol-color-primary-500);
+}
+.ofl__map__option-item__distance {
+  margin-bottom: var(--ol-spacing-2x-small);
+}
+.ofl__map__option-item__divider:not([vertical]) {
+  border-top: solid 2px rgb(86 93 101);
+}
+.ofl__map__option-item__distance,
+.ofl__map__option-item__description,
+.ofl__map__option-item__divider,
+.ofl__map__option-item__details {
+  margin-left: var(--ol-spacing-2x-large);
+}
+.ofl__map__option-item-skeleton {
+  --border-radius: var(--audi-border-radius-large);
+  --color: var(--ol-color-neutral-500);
+  background: transparent;
+}
+.ofl__map__map-skeleton {
+  --border-radius: var(--audi-border-radius-large);
+  background-color: transparent;
+  --color: var(--ol-color-neutral-400);
+}
+.ofl__map__location-empty {
+  background: transparent;
+}
+
+/**
+ * Radio Button Component Styling
+ * ------------------------------
+ * Styling for radio button groups including layout,
+ * content arrangement, and interaction states
+ */
+.ofl__radio-button__group {
+  text-align: center;
+}
+.ofl__radio-button__button + .ofl__radio-button__button::part(base) {
+  margin-left: var(--ol-spacing-small);
+}
+.ofl__radio-button__button__content {
+  flex-direction: column;
+  padding: var(--ol-spacing-large);
+}
+.ofl__radio-button__label {
+  line-height: 1;
+}
+
+/**
+ * Form Component Styling
+ * ----------------------
+ * Styling for form fields, input states, and validation indicators
+ */
+.ofl__form > :not(:first-child) {
+  margin-top: var(--ol-spacing-large);
+}
+.ofl__form__field + .ofl__form__field[component="input"] {
+  margin-top: var(--ol-spacing-x-large);
+}
+.ofl__input--error::part(form-control-help-text),
+.ofl__textarea--error::part(form-control-help-text) {
+  color: var(--ol-color-danger-600);
+}
+
+/**
+ * Checkbox Component Styling
+ * --------------------------
+ * Styling for checkbox lists and horizontal layouts
+ */
+.ofl__checkbox__list.ofl__checkbox__list--horizontal .ofl__checkbox__checkbox
+  + .ofl__checkbox__checkbox {
+  margin-left: var(--ol-spacing-x-large);
+}
+.ofl__checkbox__label .olcs__label {
+  font-weight: var(--ol-font-weight-normal);
+  font-size: 18px;
+}
+.ofl__checkbox__label .olcs__label-description {
+  font-weight: var(--ol-font-weight-normal);
+  font-size: var(--ol-font-size-small);
+  color: var(--ol-color-neutral-600);
+}
+.ofl__checkbox__checkbox::part(control) {
+  width: 25px;
+  height: 25px;
+  border-radius: 4px;
+}
+
+/**
+ * Rating Component Styling
+ * ------------------------
+ * Custom styling for rating components including symbol size,
+ * spacing, and hover effects
+ */
+.ofl__rating {
+  --symbol-color: var(--ol-color-neutral-900);
+  --symbol-size: 2em;
+  --symbol-spacing: 0 var(--ol-spacing-medium) 0 0;
+  margin-bottom: var(--ol-spacing-large);
+}
+
+/* ========================================================================
+   CUSTOM APPLICATION STYLES
+   ======================================================================== */
+
+/**
+ * Custom Label Components
+ * ----------------------
+ * Styling for custom label elements including descriptions
+ * and typography adjustments
+ */
+.olcs__label {
+  display: flex;
+  align-items: center;
+  font-stretch: expanded;
+  font-size: var(--ol-font-size-large);
+  margin: 0;
+}
+.olcs__label--spacing-top-x-large {
+  margin-top: var(--ol-spacing-x-large);
+}
+.olcs__label--spacing-bottom-x-large {
+  margin-bottom: var(--ol-spacing-x-large);
+}
+.olcs__label--spacing-bottom-small {
+  margin-bottom: var(--ol-spacing-small);
+}
+.olcs__label--spacing-top-small {
+  margin-top: var(--ol-spacing-small);
+}
+.olcs__label-description {
+  font-size: var(--ol-font-size-medium);
+  margin-block: 0;
+}
+.olcs__label-description + .olcs__label-description {
+  margin-top: var(--ol-spacing-medium);
+}
+.olcs__label-description a {
+  color: var(--ol-color-neutral-700);
+}
+.olcs__note {
+  font-size: var(--ol-font-size-x-small);
+  color: var(--ol-color-neutral-600);
+  margin: 0;
+}
+.olcs__note a {
+  color: var(--ol-color-neutral-700);
+}
+.olcs__help-icon {
+  cursor: help;
+  margin-left: var(--ol-spacing-small);
+  filter: invert(1);
+}
+.olcs__grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: repeat(2, auto);
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--ol-spacing-x-large);
+  margin: var(--ol-spacing-x-large) 0;
+}
+.olcs__row {
+  display: flex;
+  align-items: center;
+}
+.olcs__row > *:not(:first-child) {
+  margin-left: var(--ol-spacing-large);
+}
+.olcs__row img {
+  width: 26px;
+  height: 26px;
+  filter: invert(1);
+}
+.olcs__row__text h4,
+.olcs__row__text p {
+  margin: var(--ol-spacing-2x-small) 0;
+}
+.olcs__row__text h4 {
+  font-size: var(--ol-font-size-small);
+  font-weight: var(--ol-font-weight-bold);
+}
+
+/* ========================================================================
+   APPLICATIONS PAGE STYLES
+   ======================================================================== */
+
+.oip__page__content .oip__page__installation {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  height: auto;
+}
+
+/* ========================================================================
+   RESPONSIVE DESIGN & MEDIA QUERIES
+   ======================================================================== */
+
+/**
+ * Mobile Responsive Adjustments
+ * -----------------------------
+ * Calendar component adjustments for mobile devices (768px and below)
+ */
+@media only screen and (max-width: 768px) {
+  /* ========================================================================
+   ONLIVE FLOW PACKAGE COMPONENTS
+   ======================================================================== */
+
+  /**
+   * Flow Title Styling
+   * ----------------------
+   * Typography styling for flow titles including font size and stretch
+   */
+  .ofl__flow__title {
+    font-size: 28px;
+  }
+
+  /**
+   * Custom Label Components
+   * ----------------------
+   * Styling for custom label elements including descriptions
+   * and typography adjustments
+   */
+  .olcs__label {
+    font-size: 18px;
+  }
+
+  /**
+   * Action Buttons
+   * --------------
+   * Styling for flow action buttons including variants and hover states
+   */
+  .ofl__actions {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+  .ofl__actions > *:not(:first-child) {
+    margin-bottom: var(--ol-spacing-x-small);
+  }
+  .ofl__actions--top .ofl__actions__button::part(base) {
+    border: none;
+    padding: 0;
+  }
+  .ofl__actions--top .ofl__actions__button::part(label) {
+    padding: var(--ol-spacing-2x-small);
+  }
+  .ofl__actions--top .ofl__actions__button::part(prefix) {
+    font-size: 1.75em;
+    margin-left: calc(var(--ol-spacing-x-small) * -1);
+  }
+  .ofl__actions--top .ofl__actions__button {
+    width: max-content;
+  }
+  .ofl__actions--bottom .ofl__actions__button {
+    width: 100%;
+  }
+  .ofl__actions--bottom > :last-child:nth-child(odd) {
+    grid-column-start: 1;
+  }
+
+  /**
+   * Error Component Styling
+   * -----------------------
+   * Custom styling for error components including icon, message,
+   * and link interactions
+   */
+  .ofl__error-content {
+    flex-direction: column;
+  }
+  .ofl__error--step-validation .ofl__error-content,
+  .ofl__error--step-loading .ofl__error-content {
+    align-items: center;
+    text-align: center;
+  }
+  .ofl__actions--error {
+    flex-direction: column;
+  }
+  .ofl__error-message h3 {
+    font-size: var(--ol-font-size-x-large);
+  }
+
+  /**
+   * Map Component Styling
+   * ---------------------
+   * Styling for map components including search forms, options,
+   * location buttons, and input elements
+   */
+  .ofl__map__search-button-outside {
+    width: 100%;
+  }
+
+  .ofl__flow--step-appointmentCancellation,
+  .ofl__flow--step-cancellationFailed,
+  .ofl__flow--step-cancellationThankYouPage,
+  .ofl__flow--step-updateDatetime,
+  .ofl__flow--step-updateCustomerDetails {
+    padding-block: 0;
+  }
+
+  /* ========================================================================
+   CUSTOM APPLICATION STYLES
+   ======================================================================== */
+
+  .olcs__grid {
+    grid-auto-flow: row;
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  /* ========================================================================
+   APPLICATIONS PAGE STYLES
+   ======================================================================== */
+
+  .oip__page__content .oip__page__image_container .oip__page__image {
+    max-height: 240px;
+  }
+}