@charset "UTF-8";
/* Foundation */
/* At the moment of 2025ui redesign nothing from Foundation being used.
   If there will be a need for it, uncomment first two lines and necessary component below.
   Do NOT include global styles or foundation-everything since there will be conflicting
   code applied to body {}, label {}, input {}, a {} and so on.

@import "../bower_components/foundation-sites/scss/settings/settings";
@import "../bower_components/foundation-sites/scss/foundation";
@include foundation-grid;
@include foundation-forms;
@include foundation-button;
@include foundation-button-group;
@include foundation-callout;
@include foundation-card;
@include foundation-close-button;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-breadcrumbs;
@include foundation-badge;
@include foundation-flex-classes;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-responsive-embed;
@include foundation-label;
@include foundation-media-object;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;
@include foundation-visibility-classes;
@include foundation-float-classes;
*/
/* Bower vendors (use full paths here because grunt-scss 4.0.0+ is more strict) */
/*-- Chart --*/
.c3 svg {
  font: 10px sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.c3 path, .c3 line {
  fill: none;
  stroke: #000;
}

.c3 text {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path {
  shape-rendering: crispEdges;
}

.c3-chart-arc path {
  stroke: #fff;
}

.c3-chart-arc rect {
  stroke: white;
  stroke-width: 1;
}

.c3-chart-arc text {
  fill: #fff;
  font-size: 13px;
}

/*-- Axis --*/
/*-- Grid --*/
.c3-grid line {
  stroke: #aaa;
}

.c3-grid text {
  fill: #aaa;
}

.c3-xgrid, .c3-ygrid {
  stroke-dasharray: 3 3;
}

/*-- Text on Chart --*/
.c3-text.c3-empty {
  fill: #808080;
  font-size: 2em;
}

/*-- Line --*/
.c3-line {
  stroke-width: 1px;
}

/*-- Point --*/
.c3-circle._expanded_ {
  stroke-width: 1px;
  stroke: white;
}

.c3-selected-circle {
  fill: white;
  stroke-width: 2px;
}

/*-- Bar --*/
.c3-bar {
  stroke-width: 0;
}

.c3-bar._expanded_ {
  fill-opacity: 1;
  fill-opacity: 0.75;
}

/*-- Focus --*/
.c3-target.c3-focused {
  opacity: 1;
}

.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
  stroke-width: 2px;
}

.c3-target.c3-defocused {
  opacity: 0.3 !important;
}

/*-- Region --*/
.c3-region {
  fill: steelblue;
  fill-opacity: 0.1;
}

/*-- Brush --*/
.c3-brush .extent {
  fill-opacity: 0.1;
}

/*-- Select - Drag --*/
/*-- Legend --*/
.c3-legend-item {
  font-size: 12px;
}

.c3-legend-item-hidden {
  opacity: 0.15;
}

.c3-legend-background {
  opacity: 0.75;
  fill: white;
  stroke: lightgray;
  stroke-width: 1;
}

/*-- Title --*/
.c3-title {
  font: 14px sans-serif;
}

/*-- Tooltip --*/
.c3-tooltip-container {
  z-index: 10;
}

.c3-tooltip {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  empty-cells: show;
  box-shadow: 7px 7px 12px -9px #777777;
  opacity: 0.9;
}

.c3-tooltip tr {
  border: 1px solid #CCC;
}

.c3-tooltip th {
  background-color: #aaa;
  font-size: 14px;
  padding: 2px 5px;
  text-align: left;
  color: #FFF;
}

.c3-tooltip td {
  font-size: 13px;
  padding: 3px 6px;
  background-color: #fff;
  border-left: 1px dotted #999;
}

.c3-tooltip td > span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
}

.c3-tooltip td.value {
  text-align: right;
}

/*-- Area --*/
.c3-area {
  stroke-width: 0;
  opacity: 0.2;
}

/*-- Arc --*/
.c3-chart-arcs-title {
  dominant-baseline: middle;
  font-size: 1.3em;
}

.c3-chart-arcs .c3-chart-arcs-background {
  fill: #e0e0e0;
  stroke: #FFF;
}

.c3-chart-arcs .c3-chart-arcs-gauge-unit {
  fill: #000;
  font-size: 16px;
}

.c3-chart-arcs .c3-chart-arcs-gauge-max {
  fill: #777;
}

.c3-chart-arcs .c3-chart-arcs-gauge-min {
  fill: #777;
}

.c3-chart-arc .c3-gauge-value {
  fill: #000;
  /*  font-size: 28px !important;*/
}

.c3-chart-arc.c3-target g path {
  opacity: 1;
}

.c3-chart-arc.c3-target.c3-focused g path {
  opacity: 1;
}

/* Vendors */
/*
 * The MIT License
 * Copyright (c) 2012 Matias Meno <m@tias.me>
 */
@keyframes passing-through {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.1);
  }
  20% {
    transform: scale(1);
  }
}
.dropzone, .dropzone * {
  box-sizing: border-box;
}

.dropzone {
  min-height: 150px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  background: white;
  padding: 20px 20px;
}

.dropzone.dz-clickable {
  cursor: pointer;
}

.dropzone.dz-clickable * {
  cursor: default;
}

.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
  cursor: pointer;
}

.dropzone.dz-started .dz-message {
  display: none;
}

.dropzone.dz-drag-hover {
  border-style: solid;
}

.dropzone.dz-drag-hover .dz-message {
  opacity: 0.5;
}

.dropzone .dz-message {
  text-align: center;
  margin: 2em 0;
}

.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 16px;
  min-height: 100px;
}

@media (hover: hover){

.dropzone .dz-preview:hover {
  z-index: 1000;
}
}

@media (hover: hover){

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}
}

.dropzone .dz-preview.dz-file-preview .dz-image {
  border-radius: 20px;
  background: #999;
  background: linear-gradient(to bottom, #eee, #ddd);
}

.dropzone .dz-preview.dz-file-preview .dz-details {
  opacity: 1;
}

.dropzone .dz-preview.dz-image-preview {
  background: white;
}

.dropzone .dz-preview.dz-image-preview .dz-details {
  transition: opacity 0.2s linear;
}

.dropzone .dz-preview .dz-remove {
  font-size: 14px;
  text-align: center;
  display: block;
  cursor: pointer;
  border: none;
}

@media (hover: hover){

.dropzone .dz-preview .dz-remove:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
}

@media (hover: hover){

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}
}

.dropzone .dz-preview .dz-details {
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  font-size: 13px;
  min-width: 100%;
  max-width: 100%;
  padding: 2em 1em;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
  line-height: 150%;
}

.dropzone .dz-preview .dz-details .dz-size {
  margin-bottom: 1em;
  font-size: 16px;
}

.dropzone .dz-preview .dz-details .dz-filename {
  white-space: nowrap;
}

@media (hover: hover){

.dropzone .dz-preview .dz-details .dz-filename:hover span {
  border: 1px solid rgba(200, 200, 200, 0.8);
  background-color: rgba(255, 255, 255, 0.8);
}
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
  border: 1px solid transparent;
}

.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0 0.4em;
  border-radius: 3px;
}

@media (hover: hover){

.dropzone .dz-preview:hover .dz-image img {
  transform: scale(1.05, 1.05);
  filter: blur(8px);
}
}

.dropzone .dz-preview .dz-image {
  border-radius: 20px;
  overflow: hidden;
  width: 120px;
  height: 120px;
  position: relative;
  display: block;
  z-index: 10;
}

.dropzone .dz-preview .dz-image img {
  display: block;
}

.dropzone .dz-preview.dz-success .dz-success-mark {
  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview.dz-error .dz-error-mark {
  opacity: 1;
  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
  pointer-events: none;
  opacity: 0;
  z-index: 500;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -27px;
  margin-top: -27px;
}

.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
  display: block;
  width: 54px;
  height: 54px;
}

.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
  transition: all 0.2s linear;
}

.dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
  animation: pulse 6s ease infinite;
}

.dropzone .dz-preview .dz-progress {
  opacity: 1;
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  height: 16px;
  left: 50%;
  top: 50%;
  margin-top: -8px;
  width: 80px;
  margin-left: -40px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-transform: scale(1);
  border-radius: 8px;
  overflow: hidden;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  background: #333;
  background: linear-gradient(to bottom, #666, #444);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  transition: width 300ms ease-in-out;
}

.dropzone .dz-preview.dz-error .dz-error-message {
  display: block;
}

@media (hover: hover){

.dropzone .dz-preview.dz-error:hover .dz-error-message {
  opacity: 1;
  pointer-events: auto;
}
}

.dropzone .dz-preview .dz-error-message {
  pointer-events: none;
  z-index: 1000;
  position: absolute;
  display: block;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  font-size: 13px;
  top: 130px;
  left: -10px;
  width: 140px;
  background: #be2626;
  background: linear-gradient(to bottom, #be2626, #a92222);
  padding: 0.5em 1.2em;
  color: white;
}

.dropzone .dz-preview .dz-error-message:after {
  content: "";
  position: absolute;
  top: -6px;
  left: 64px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #be2626;
}

.xdsoft_autocomplete,
.xdsoft_autocomplete div,
.xdsoft_autocomplete span {
  /*	-moz-box-sizing: border-box !important;
         box-sizing: border-box !important;*/
}

.xdsoft_autocomplete {
  display: inline;
  position: relative;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: left;
}

.xdsoft_autocomplete .xdsoft_input {
  position: relative;
  z-index: 2;
}

.xdsoft_autocomplete .xdsoft_autocomplete_dropdown {
  position: absolute;
  border: 1px solid #ccc;
  border-top-color: #d9d9d9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: default;
  display: none;
  z-index: 1001;
  margin-top: -1px;
  background-color: #fff;
  min-width: 100%;
  overflow: auto;
}

.xdsoft_autocomplete .xdsoft_autocomplete_hint {
  position: absolute;
  z-index: 1;
  color: #ccc !important;
  -webkit-text-fill-color: #ccc !important;
  text-fill-color: #ccc !important;
  overflow: hidden !important;
  white-space: pre !important;
}

.xdsoft_autocomplete .xdsoft_autocomplete_hint span {
  color: transparent;
  opacity: 0;
}

.xdsoft_autocomplete .xdsoft_autocomplete_dropdown > .xdsoft_autocomplete_copyright {
  color: #ddd;
  font-size: 10px;
  -webkit-text-decoration: none;
  text-decoration: none;
  right: 5px;
  position: absolute;
  margin-top: -15px;
  z-index: 1002;
}

.xdsoft_autocomplete .xdsoft_autocomplete_dropdown > div {
  background: #fff;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.5em;
  padding: 2px 0px 2px 0px;
}

.xdsoft_autocomplete .xdsoft_autocomplete_dropdown > div.active {
  background: #0097CF;
  color: #FFFFFF;
}

.datepicker {
  display: none;
  position: absolute;
  padding: 4px;
  margin-top: 1px;
  direction: ltr;
}

.datepicker.dropdown-menu {
  position: absolute;
  top: 100%;
  margin-top: 8px;
  left: 0;
  z-index: 1000;
  float: left;
  display: none;
  min-width: 160px;
  list-style: none;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  color: #333;
  font-size: 13px;
  line-height: 18px;
}

.datepicker.dropdown-menu th {
  padding: 4px 5px;
}

.datepicker.dropdown-menu td {
  padding: 4px 5px;
}

.datepicker table {
  border: 0;
  margin: 0;
  width: auto;
}

.datepicker table tr td span {
  display: block;
  width: 23%;
  height: 54px;
  line-height: 54px;
  float: left;
  margin: 1%;
  cursor: pointer;
}

.datepicker td {
  text-align: center;
  width: 20px;
  height: 20px;
  border: 0;
  font-size: 12px;
  padding: 4px 8px;
  background: #fff;
  cursor: pointer;
}

.datepicker td.active.day, .datepicker td.active.year {
  background: #2ba6cb;
}

.datepicker td.old, .datepicker td.new {
  color: #999;
}

.datepicker td span.active {
  background: #2ba6cb;
}

.datepicker td.day.disabled {
  color: #eee;
}

.datepicker td span.month.disabled, .datepicker td span.year.disabled {
  color: #eee;
}

.datepicker th {
  text-align: center;
  width: 20px;
  height: 20px;
  border: 0;
  font-size: 12px;
  padding: 4px 8px;
  background: #fff;
  cursor: pointer;
}

.datepicker th.active.day, .datepicker th.active.year {
  background: #2ba6cb;
}

.datepicker th.date-switch {
  width: 145px;
}

.datepicker th span.active {
  background: #2ba6cb;
}

.datepicker .cw {
  font-size: 10px;
  width: 12px;
  padding: 0 2px 0 5px;
  vertical-align: middle;
}

.datepicker.days div.datepicker-days {
  display: block;
}

.datepicker.months div.datepicker-months {
  display: block;
}

.datepicker.years div.datepicker-years {
  display: block;
}

.datepicker thead tr:first-child th {
  cursor: pointer;
}

.datepicker thead tr:first-child th.cw {
  cursor: default;
  background-color: transparent;
}

.datepicker tfoot tr:first-child th {
  cursor: pointer;
}

.datepicker-inline {
  width: 220px;
}

.datepicker-rtl {
  direction: rtl;
}

.datepicker-rtl table tr td span {
  float: right;
}

.datepicker-dropdown {
  top: 0;
  left: 0;
}

.datepicker-dropdown:before {
  content: "";
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-bottom-color: 1px solid rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -7px;
  left: 6px;
}

.datepicker-dropdown:after {
  content: "";
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  top: -6px;
  left: 7px;
}

.datepicker > div,
.datepicker-dropdown::before,
.datepicker-dropdown::after {
  display: none;
}

.datepicker-close {
  position: absolute;
  top: -30px;
  right: 0;
  width: 15px;
  height: 30px;
  padding: 0;
  display: none;
}

.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
  background-color: transparent;
}


/* Theming */
/*  WARNING! This is super annoying thing but all of the color values must be duplicated
 between _themes-os-based.scss and _themes-forced.scss, so editing anything in this file
 should also be reflected in it's clone. The structure is:

  Light theme
  :root:not([data-theme]) { ... }

  Dark theme
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) { ... }
  }

  Forced light theme
  [data-theme="light"] { ... }

  Forced dark theme
  [data-theme="dark"] { ...  }


  The problem is that you can't unite them like so:
  @media (prefers-color-scheme: dark),
  [data-theme="dark"] {
      ...
  }

  Commas don't work with at-rules. And there is no @extend/apply in CSS.
  This won't even work in SCSS. So, for now just duplicate all the lines with colors
  across these two files.
*/
/* System based light theme (default) */
:root:not([data-theme]) {
  /* Colors that never changes */
  --white-both-themes: #FFFFFF;
  --black-both-themes: #000000;
  --blue-both-themes: #18242F;
  --light-gray-both-themes: #666666;
  --dark-gray-both-themes: #333333;
  --action-shadow-both-themes: rgba(0, 0, 0, 0.3);
  /* Shades of brand blue color (from darkest to lightest).
   * Each of them has main color in the first line and
   * then may have some variations */
  /* 1 */
  --bg-blue-darkest: #FBFCFD; /* Nearly black: aut pages background, request page navigation (bottom bar), nearest locations sidebar, etc. */
  --bg-blue-border: #F5F6F9;
  /* 2 */
  --brand-blue: #FFFFFF;
  --brand-blue-hover: #F7F8F9;
  --brand-blue-alpha-75: rgba(249, 250, 251, 0.75);
  /* 3 */
  --even-stripe-blue: #EEF1F4;
  --even-stripe-blue-hover: #EBEDF0;
  /* 4 */
  --separator-blue: #F8F9FA; /* Separators & borders, table & modal backgrounds, secondary button, etc. */
  --separator-blue-hover: #F4F5F7;
  --separator-blue-hover-alt: #F4F5F7;
  --separator-blue-lighter-hover: #F0F2F4;
  --page-footer-border: #D4DBE2;
  /* 5 */
  --panel-blue: #F8F8F9;
  --panel-blue-hover: #EEF1F4;
  --panel-blue-gradient-start: #CECED2;
  --panel-blue-gradient-end: #C4C5CA;
  --panel-blue-head-border: #C9CACE;
  /* 6 */
  --border-blue: #E5E7EB;
  --border-blue-hover: #D1D5DB;
  --border-blue-focus: #9CA3AF;
  /* 7 */
  --cards-blue: #EFF0F1;
  /* 8 */
  --accent-blue-border: #D1D5DB;
  /* Text */
  --text-blue: #09121B;
  --text-link: #E5733F;
  --text-gray: #6B7280;
  --text-light-gray: #6B7280;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --text-note: #6B7280;
  /* Danger */
  --danger-border: #991B1B;
  --danger-background: #FCA5A5;
  --danger-text: #991B1B;
  --danger-hover: #F87171;
  --danger-muted: #DC2626;
  /* Success */
  --success-border: #047857;
  --success-background: #6EE7B7;
  --success-text: #065F46;
  --success-hover: #34D399;
  --success-muted: #047857;
  /* Warning */
  --warning-border: #D97706;
  --warning-background: #FEF3C7;
  --warning-text: #92400E;
  --warning-hover: #FBBF24;
  --warning-muted: #F59E0B;
  /* Other global variables */
  --transparent-hover: rgba(12, 17, 29, 0.05);
  --selected-gradient: linear-gradient(135deg, #7C3AED, #6D28D9);
  /* Chevrons */
  --chevron-down-image: url("../vectors/chevron-down.svg");
  --chevron-down-disabled-image: url("../vectors/chevron-down-disabled.svg");
  --chevron-down-error-image: url("../vectors/chevron-down-error.svg");
  /* Button */
  --button-primary-border-gradient: linear-gradient(100deg, #A78BFA, #8B5CF6, #7C3AED 60%, #6D28D9);
  --button-primary-background-gradient: radial-gradient(at 60% bottom, #A78BFA, #7C3AED);
  --button-primary-background-hover-gradient: radial-gradient(at 60% bottom, #8B5CF6, #8B5CF6 15%, #7C3AED);
  --button-dark-background: #FCFCFD;
  --button-light-background: #09121B;
  --button-light-text: #FFFFFF;
  --button-light-hover-background: #0E1924;
  --button-transparent-text: var(--text-blue);
  --button-transparent-hover: var(--border-blue);
  --button-transparent-background-hover: var(--panel-blue);
  --button-darker-transparent-text: var(--text-blue);
  --button-darker-transparent-hover: var(--border-blue);
  --button-darker-transparent-background-hover: var(--separator-blue);
  /* State Pill */
  --state-pill-warning-border: #F59E0B;
  --state-pill-warning-background: #FEF3C7;
  --state-pill-warning-text: #92400E;
  --state-pill-scheduled-border: #9CA3AF;
  --state-pill-scheduled-background: #F3F4F6;
  --state-pill-scheduled-text: #374151;
  --state-pill-new-border: #0EA5E9;
  --state-pill-new-background: #E0F2FE;
  --state-pill-new-text: #0C4A6E;
  --state-pill-verifying-border: #0D9488;
  --state-pill-verifying-background: #DBEAFE;
  --state-pill-verifying-text: #1E40AF;
  --state-pill-searching-border: #6366F1;
  --state-pill-searching-background: #EEF2FF;
  --state-pill-searching-text: #4338CA;
  --state-pill-dispatched-border: #C026D3;
  --state-pill-dispatched-background: #FDF4FF;
  --state-pill-dispatched-text: #9D174D;
  --state-pill-yellow-border: #EAB308;
  --state-pill-yellow-background: #FEF9C3;
  --state-pill-yellow-text: #854D0E;
  /* Job Issues */
  --job-issues-warning-border: #F59E0B;
  --job-issues-warning-background: rgba(254, 243, 199, 0.2);
  --job-issues-warning-text: #92400E;
  --job-issues-info-border: #60A5FA;
  --job-issues-info-background: rgba(96, 165, 250, 0.12);
  --job-issues-info-text: #3B82F6;
  /* Modal */
  --modal-backdrop: rgba(249, 250, 251, 0.75); /* same as --brand-alpha-75, but they are not matching in the dark theme, so don't replace */
  /* Request */
  --request-sidebar-background: rgba(249, 250, 251, 0.7);
  /* Background (common bg used in a few components) */
  --background-neutral: url("../images/backgrounds/background-neutral.png");
  --background-success: url("../images/backgrounds/background-success.png");
  --background-warning: url("../images/backgrounds/background-warning.png");
  --background-danger: url("../images/backgrounds/background-danger.png");
  /* Flow */
  --flow-desktop-svg: url("../images/flow/flow-desktop@2x.svg");
  --flow-desktop-left-svg: url("../images/flow/flow-desktop-left@2x.svg");
  --flow-desktop-right-svg: url("../images/flow/flow-desktop-right@2x.svg");
  --flow-smartphone-left-svg: url("../images/flow/flow-smartphone-left@2x.svg");
  --flow-smartphone-right-svg: url("../images/flow/flow-smartphone-right@2x.svg");
  /* Gate */
  --gate-grid-color: #F3F4F6;
  --gate-radial-gradient-start: rgba(229, 231, 235, 0);
  --gate-radial-gradient-middle: rgba(229, 231, 235, 0.1);
  --gate-radial-gradient-end: rgba(229, 231, 235, 0.6);
  --gate-lines-opacity: 85%;
  /* Powered By */
  --honk-logo: url("../vectors/honk-logo.svg");
  /* Informer (common gradient used in a few components)  */
  --info-bar-gradient: linear-gradient(45deg, #E5E7EB, #D1D5DB);
  /* Spot */
  --spot-neutral-image: url("../images/spot/spot-light-theme-neutral@2x.png");
  --spot-success-image: url("../images/spot/spot-light-theme-success@2x.png");
  --spot-warning-image: url("../images/spot/spot-light-theme-warning@2x.png");
  --spot-danger-image: url("../images/spot/spot-light-theme-danger@2x.png");
  /* Hub */
  --hub-item-background: #FFFFFF;
  --hub-item-hover-background: #FFFFFF;
  --hub-item-hover-border: var(--border-blue-hover);
  /* Selected Location */
  --selected-location-icon-stroke: #A9B8C1;
  --selected-location-address-color: var(--text-gray);
  /* Datepicker */
  --datepicker-background: var(--separator-blue);
  --datepicker-text: var(--text-blue);
  --datepicker-header-text: var(--text-blue);
  --datepicker-disabled-text: #9CA3AF;
  --datepicker-hover-background: rgba(12, 17, 29, 0.05);
  --datepicker-active-day-image: url("../vectors/calendar-active-day@2x.png");
  /* Tooltip */
  --tooltip-background-color: rgba(12, 17, 29, 0.06);
  --tooltip-background-gradient: radial-gradient(ellipse farthest-side at center 90%, rgba(12, 17, 29, 0.02) 0%, rgba(12, 17, 29, 0.22) 200%);
  --tooltip-border: #D1D5DB;
  --tooltip-text: var(--text-blue);
  --tooltip-arrow-border: #D1D5DB;
  /* Map overlay */
  --map-overlay-warning-gradient: linear-gradient(to bottom, rgba(241, 130, 79, 0.1), rgba(9, 18, 27, 0.1));
  /* Choice */
  --choice-checkbox-image: url("../vectors/choice-checkbox.svg");
  --choice-checkbox-hover-image: url("../vectors/choice-checkbox-hover.svg");
  --choice-checkbox-checked-image: url("../vectors/choice-checkbox-checked.svg");
  --choice-radio-image: url("../vectors/choice-radio.svg");
  --choice-radio-hover-image: url("../vectors/choice-radio-hover.svg");
  --choice-radio-checked-image: url("../vectors/choice-radio-checked.svg");
  --choice-huge-checkbox-image: url("../vectors/choice-huge-checkbox@2x.png");
  --choice-huge-checkbox-hover-image: url("../vectors/choice-huge-checkbox-hover@2x.png");
  --choice-huge-checkbox-checked-image: url("../vectors/choice-huge-checkbox-checked@2x.png");
  --choice-huge-radio-image: url("../vectors/choice-huge-radio@2x.png");
  --choice-huge-radio-hover-image: url("../vectors/choice-huge-radio-hover@2x.png");
  --choice-huge-radio-checked-image: url("../vectors/choice-huge-radio-checked@2x.png");
  /* Nearby Locations */
  --nearby-locations-side-background: #f1f4f6;
  /* Quote */
  --amount-owed-color: #77838A;
  --quote-background-image: url("../images/quote@2x.jpg");
  --customer-expense-override-background: rgba(255, 255, 255, 0.2);
  /* Current Location */
  --current-location-background-image: url("../images/current-location@2x.jpg");
  /* Step */
  --step-frame-desktop-image: url("../vectors/step-frame-desktop.svg");
  --step-frame-smartphone-image: url("../vectors/step-frame-smartphone.svg");
  --step-label-color: #6B7280;
  --step-gradient: linear-gradient(100deg, #FFD4C4, #FFB89B);
  --step-gradient-mobile: linear-gradient(100deg, #FFD4C4, #FFB89B);
  --step-current-gradient: linear-gradient(100deg, #FFD4C4, #E5E7EB 39%, #E5E7EB);
  --step-current-next-gradient: linear-gradient(100deg, #E5E7EB, #E5E7EB 61%, #FFD4C4);
  /* Documents */
  --documents-item-bullet-color: rgba(0, 0, 0, 0.3);
  --documents-warning-highlight-border: #ff9800;
  --documents-warning-highlight-shadow: rgba(255, 152, 0, 0.2);
  --documents-warning-highlight-shadow-hover: rgba(255, 152, 0, 0.1);
  --documents-dropzone-border: rgba(107, 91, 149, 0.3);
  --documents-dropzone-bg: rgba(107, 91, 149, 0.04);
  --documents-dropzone-border-hover: rgba(107, 91, 149, 0.5);
  --documents-dropzone-bg-hover: rgba(107, 91, 149, 0.08);
  --documents-dropzone-border-active: #6B5B95;
  --documents-dropzone-bg-active: rgba(107, 91, 149, 0.12);
  --documents-progress-bar-bg: rgba(0, 0, 0, 0.08);
  --documents-progress-bar-fill-start: #4CAF50;
  --documents-progress-bar-fill-end: #45a049;
  --documents-progress-status: rgba(0, 0, 0, 0.6);
  --documents-container-bg: #f9f9f9;
  --documents-item-bg: white;
  --documents-item-border: #e0e0e0;
  --documents-item-icon: #666;
  --documents-item-name: #333;
  --documents-item-badge-bg: #e3f2fd;
  --documents-item-badge-text: #1976d2;
  --documents-item-date: #999;
  --documents-item-button-border: #e0e0e0;
  --documents-item-button-hover-bg: #f5f5f5;
  --documents-item-button-hover-border: #999;
  --documents-item-button-view-color: #1976d2;
  --documents-item-button-view-border: #1976d2;
  --documents-item-button-view-hover-bg: #e3f2fd;
  --documents-item-button-download-color: #4CAF50;
  --documents-item-button-download-border: #4CAF50;
  --documents-item-button-download-hover-bg: #f0f8f0;
  --documents-empty-text: #999;
  --documents-alert-bg: #fff3e0;
  --documents-alert-border: #ffb74d;
  --documents-alert-strong: #e65100;
  --documents-alert-item-bg: white;
  --documents-alert-item-border: #ffb74d;
  --documents-alert-item-icon: #ff9800;
  --documents-section-bg: white;
  --documents-section-shadow: rgba(0,0,0,0.1);
  --documents-section-heading: #333;
  --documents-compact-null: rgba(0, 0, 0, 0.9);
  --documents-compact-badge-bg: rgba(25, 118, 210, 0.08);
  --documents-compact-badge-text: #1976d2;
  /* App Card */
  --app-card-heading-border: var(--border-blue);
  /* Search */
  --search-wrapper-gradient: linear-gradient(45deg, #E5E7EB, #D1D5DB);
  /* Not Feeling Safe */
  --not-feeling-safe-include-color: #556B7A;
  --not-feeling-safe-message-color: #77838A;
  /* Copy Phone */
  --copy-phone-tooltip-background: var(--border-blue);
  /* Policy */
  --policy-search-modal-header-background: rgba(229, 231, 235, 0.8);
  --policy-vehicle-hover-background: #F6F7F8;
  --policy-vehicle-odd-hover-background: #F0F1F3;
  --policy-vehicle-loading-background: rgba(255, 255, 255, 0.1);
  /* Table */
  --table-border: #E5E7EB;
  --table-border-rgba: rgba(229, 231, 235, 0.9);
  --table-head-color: #6B7280;
  --table-row-even-bg: #F9FAFB;
  --table-mobile-border: #E5E7EB;
  /* Rating */
  --rating-heading-color: #6B7280;
  /* C3 Chart */
  --c3-chart-text-color: #09121B;
  --c3-chart-border-color: #D1D5DB;
  --c3-chart-line-color: #D1D5DB;
  /* Pagination */
  --pagination-current-border: #D1D5DB;
  /* Scrollbar */
  --scrollbar-track: #F3F4F6;
  --scrollbar-thumb: #D1D5DB;
  /* Requests List */
  --requests-list-filter-image: url("../vectors/filter.svg");
  --requests-list-location-image: url("../vectors/location.svg");
  --requests-list-background-image: url("../images/requests-list@2x.png");
  /* Switch */
  --switch-paddle-background: #E5E7EB;
  --switch-thumb-off: #9CA3AF;
  --switch-thumb-on: var(--text-blue);
  /* Radial Gradient Box */
  --radial-gradient-box-border: var(--border-blue);
  --radial-gradient-box-background: url("../images/radial-gradient-box.png");
  /* Admin Sidebar */
  --sidebar-panel-gradient-start: #F9FAFB;
  --sidebar-panel-gradient-end: #F3F4F6;
  --sidebar-nav-color: #6B7280;
  --sidebar-nav-hover-bg: #F3F4F6;
  --sidebar-nav-current-accent: #A855F7;
  /* Comment */
  --comment-border: #E5E7EB;
  --comment-expand-hover: rgba(9, 18, 27, 0.05);
  --comment-text-secondary: #6B7280;
  --comment-expanded-background: #F9FAFB;
  /* Header */
  --header-separator: var(--border-blue);
  --header-nav-gradient-start: var(--brand-blue);
  --header-nav-gradient-end: #F9FAFB; /* slightly different from --separator-blue (#F8F9FA), keeping as is */
  --header-border: rgba(12, 17, 29, 0.1);
  --support-number-border: #D1D5DB;
  --support-number-color: #09121B;
  /* Input */
  --placeholder-color: #9CA3AF;
  --disabled-background: #F3F4F6;
  --disabled-color: #9CA3AF;
  --input-card-border: #E5E7EB;
  --input-hover-bg: #F9FAFB;
  /* Nearby Destinations */
  --nearby-destination-secondary-submit: #FFFFFF;
  --nearby-destination-secondary-submit-hover: #FCFCFD;
  /* Service Action Modal Colors */
  --action-modal-red-start: #ef4444;
  --action-modal-red-end: #dc2626;
  --action-modal-green-start: #10b981;
  --action-modal-green-end: #059669;
  --action-modal-blue-start: #3b82f6;
  --action-modal-blue-end: #2563eb;
  --action-modal-purple-start: #a855f7;
  --action-modal-purple-end: #9333ea;
  --action-modal-yellow-start: #fbbf24;
  --action-modal-yellow-end: #f59e0b;
}

/* System based dark theme (overrides white) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Colors that never changes */
    --white-both-themes: #FFFFFF;
    --black-both-themes: #000000;
    --blue-both-themes: #18242F;
    --light-gray-both-themes: #666666;
    --dark-gray-both-themes: #333333;
    --action-shadow-both-themes: rgba(0, 0, 0, 0.3);
    /* Shades of brand blue color (from darkest to lightest).
     * Each of them has main color in the first line and
     * then may have some variations */
    /* 1 */
    --bg-blue-darkest: #070F16; /* auth pages background, request page navigation (bottom bar), nearest locations sidebar, etc. */
    --bg-blue-border: #101A24;
    /* 2 */
    --brand-blue: #09121B; /* body, inputs background */
    --brand-blue-hover: #0E1924;
    --brand-blue-alpha-75: rgba(9, 18, 27, 0.75);
    /* 3 */
    --even-stripe-blue: #0D151D;
    --even-stripe-blue-hover: #091016;
    /* 4 */
    --separator-blue: #131C25; /* Separators & borders, table & modal backgrounds, secondary button, etc. */
    --separator-blue-hover: #16212C;
    --separator-blue-hover-alt: #15202A;
    --separator-blue-lighter-hover: #202C37;
    --page-footer-border: #131C25;
    /* 5 */
    --panel-blue: #18242F;
    --panel-blue-hover: #1b2935;
    --panel-blue-gradient-start: #25303D;
    --panel-blue-gradient-end: #494F5A;
    --panel-blue-head-border: rgba(61, 95, 124, 0.2);
    /* 6 */
    --border-blue: #25303D;
    --border-blue-hover: #494F5A;
    --border-blue-focus: #CCCCCC;
    /* 7 */
    --cards-blue: #27343F;
    /* 8 */
    --accent-blue-border: #546578;
    /* Text */
    --text-blue: #FFFFFF;
    --text-link: #FF814F;
    --text-gray: #6B8494;
    --text-light-gray: #809DAF;
    --text-secondary: #667085;
    --text-muted: #A3A7AB;
    --text-note: #37465C;
    /* Danger */
    --danger-border: #912018;
    --danger-background: #55160C;
    --danger-text: #FDA29B;
    --danger-hover: #671A0E;
    --danger-muted: #E30E61;
    /* Success */
    --success-border: #085D3A;
    --success-background: #053321;
    --success-text: #75E0A7;
    --success-hover: #07442C;
    --success-muted: #54BB84;
    /* Warning */
    --warning-border: #C2410C;
    --warning-background: #5D5C28;
    --warning-text: #FF814F;
    --warning-hover: #A13609;
    --warning-muted: #FF814F;
    /* Other global variables */
    --transparent-hover: rgba(255, 255, 255, 0.1);
    --selected-gradient: linear-gradient(135deg, #5641D9, #4135A5);
    /* Chevrons */
    --chevron-down-image: url("../vectors/chevron-down-dark-theme.svg");
    --chevron-down-disabled-image: url("../vectors/chevron-down-disabled.svg");
    --chevron-down-error-image: url("../vectors/chevron-down-error.svg");
    /* Button */
    --button-primary-border-gradient: linear-gradient(100deg, #8F08F9, #985AB4, #900AFB 60%, #900AFB);
    --button-primary-background-gradient: radial-gradient(at 60% bottom, #900AF9, #150F2D);
    --button-primary-background-hover-gradient: radial-gradient(at 60% bottom, #900AF9, #900AF9 15%, #150F2D);
    --button-dark-background: var(--panel-blue);
    --button-light-background: #FFFFFF;
    --button-light-text: #09121B;
    --button-light-hover-background: #EEEEEE;
    --button-transparent-text: #FFFFFF;
    --button-transparent-hover: var(--border-blue);
    --button-transparent-background-hover: var(--panel-blue);
    --button-darker-transparent-text: #FFFFFF;
    --button-darker-transparent-hover: var(--border-blue);
    --button-darker-transparent-background-hover: var(--separator-blue);
    /* State Pill */
    --state-pill-warning-border: #8A7A3D;
    --state-pill-warning-background: #4D4423;
    --state-pill-warning-text: #E6D7A1;
    --state-pill-scheduled-border: #5C5C5C;
    --state-pill-scheduled-background: #333333;
    --state-pill-scheduled-text: #B3B3B3;
    --state-pill-new-border: #3BA0D4;
    --state-pill-new-background: #0A3A5A;
    --state-pill-new-text: #B9F4FF;
    --state-pill-verifying-border: #065986;
    --state-pill-verifying-background: #062C41;
    --state-pill-verifying-text: #7CD4FD;
    --state-pill-searching-border: #53389E;
    --state-pill-searching-background: #2C1C5F;
    --state-pill-searching-text: #D6BBFB;
    --state-pill-dispatched-border: #4B0585;
    --state-pill-dispatched-background: #2A034D;
    --state-pill-dispatched-text: #B57EE0;
    --state-pill-yellow-border: #C2B135;
    --state-pill-yellow-background: #70641C;
    --state-pill-yellow-text: #FFF28A;
    /* Job Issues */
    --job-issues-warning-border: #8A7A3D;
    --job-issues-warning-background: rgba(77, 68, 35, 0.2);
    --job-issues-warning-text: #E6D7A1;
    --job-issues-info-border: #93C5FD;
    --job-issues-info-background: rgba(147, 197, 253, 0.12);
    --job-issues-info-text: #BFDBFE;
    /* Modal */
    --modal-backdrop: rgba(12, 17, 29, 0.7);
    /* Request */
    --request-sidebar-background: rgba(12, 17, 29, 0.7);
    /* Background (common bg used in a few components) */
    --background-neutral: url("../images/backgrounds/background-dark-theme-neutral.png");
    --background-success: url("../images/backgrounds/background-dark-theme-success.png");
    --background-warning: url("../images/backgrounds/background-dark-theme-warning.png");
    --background-danger: url("../images/backgrounds/background-dark-theme-danger.png");
    /* Flow */
    --flow-desktop-svg: url("../images/flow/flow-desktop-dark-theme@2x.svg");
    --flow-desktop-left-svg: url("../images/flow/flow-desktop-left-dark-theme@2x.svg");
    --flow-desktop-right-svg: url("../images/flow/flow-desktop-right-dark-theme@2x.svg");
    --flow-smartphone-left-svg: url("../images/flow/flow-smartphone-left-dark-theme@2x.svg");
    --flow-smartphone-right-svg: url("../images/flow/flow-smartphone-right-dark-theme@2x.svg");
    /* Gate */
    --gate-grid-color: #0C141B;
    --gate-radial-gradient-start: rgba(7, 15, 22, 0);
    --gate-radial-gradient-middle: rgba(7, 15, 22, 0.1);
    --gate-radial-gradient-end: rgba(7, 15, 22, 0.6);
    --gate-lines-opacity: 100%;
    /* Powered By */
    --honk-logo: url("../vectors/honk-logo-dark-theme.svg");
    /* Informer (common gradient used in a few components)  */
    --info-bar-gradient: linear-gradient(45deg, #0F1922, #0B141D);
    /* Spot */
    --spot-neutral-image: url("../images/spot/spot-dark-theme-neutral@2x.png");
    --spot-success-image: url("../images/spot/spot-dark-theme-success@2x.png");
    --spot-warning-image: url("../images/spot/spot-dark-theme-warning@2x.png");
    --spot-danger-image: url("../images/spot/spot-dark-theme-danger@2x.png");
    /* Hub */
    --hub-item-background: var(--separator-blue);
    --hub-item-hover-background: var(--separator-blue-lighter-hover);
    --hub-item-hover-border: var(--border-blue);
    /* Selected Location */
    --selected-location-icon-stroke: #FFFFFF;
    --selected-location-address-color: #A9B8C1;
    /* Datepicker */
    --datepicker-background: var(--separator-blue);
    --datepicker-text: #FFFFFF;
    --datepicker-header-text: #FFFFFF;
    --datepicker-disabled-text: var(--text-secondary);
    --datepicker-hover-background: rgba(255, 255, 255, 0.1);
    --datepicker-active-day-image: url("../vectors/calendar-active-day-dark-theme@2x.png");
    /* Tooltip */
    --tooltip-background-color: rgba(255, 255, 255, 0.2);
    --tooltip-background-gradient: radial-gradient(ellipse farthest-side at center 90%, rgba(242, 242, 242, 0.2) 0%, #070E16 200%);
    --tooltip-border: #777777;
    --tooltip-text: #FFFFFF;
    --tooltip-arrow-border: #777777;
    /* Map overlay */
    --map-overlay-warning-gradient: linear-gradient(to bottom, rgba(241, 130, 79, 0.9), rgba(9, 18, 27, 0.9));
    /* Choice */
    --choice-checkbox-image: url("../vectors/choice-checkbox-dark-theme.svg");
    --choice-checkbox-hover-image: url("../vectors/choice-checkbox-hover-dark-theme.svg");
    --choice-checkbox-checked-image: url("../vectors/choice-checkbox-checked-dark-theme.svg");
    --choice-radio-image: url("../vectors/choice-radio-dark-theme.svg");
    --choice-radio-hover-image: url("../vectors/choice-radio-hover-dark-theme.svg");
    --choice-radio-checked-image: url("../vectors/choice-radio-checked-dark-theme.svg");
    --choice-huge-checkbox-image: url("../vectors/choice-huge-dark-theme-checkbox@2x.png");
    --choice-huge-checkbox-hover-image: url("../vectors/choice-huge-dark-theme-checkbox-hover@2x.png");
    --choice-huge-checkbox-checked-image: url("../vectors/choice-huge-dark-theme-checkbox-checked@2x.png");
    --choice-huge-radio-image: url("../vectors/choice-huge-dark-theme-radio@2x.png");
    --choice-huge-radio-hover-image: url("../vectors/choice-huge-dark-theme-radio-hover@2x.png");
    --choice-huge-radio-checked-image: url("../vectors/choice-huge-dark-theme-radio-checked@2x.png");
    /* Nearby Locations */
    --nearby-locations-side-background: var(--bg-blue-darkest);
    /* Quote */
    --amount-owed-color: #A9B8C1;
    --quote-background-image: url("../images/quote-dark-theme@2x.jpg");
    --customer-expense-override-background: rgba(0, 0, 0, 0.2);
    /* Current Location */
    --current-location-background-image: url("../images/current-location-dark-theme@2x.jpg");
    /* Step */
    --step-frame-desktop-image: url("../vectors/step-frame-desktop-dark-theme.svg");
    --step-frame-smartphone-image: url("../vectors/step-frame-smartphone-dark-theme.svg");
    --step-label-color: #9EA0A4;
    --step-gradient: linear-gradient(100deg, #FFB89B, #FF814F);
    --step-gradient-mobile: linear-gradient(100deg, #FEB79A, #FE814F);
    --step-current-gradient: linear-gradient(100deg, #FFB89B, #482E27 39%, #482E27);
    --step-current-next-gradient: linear-gradient(100deg, #482E27, #482E27 61%, #FFB89B);
    /* Documents */
    --documents-item-bullet-color: rgba(255, 255, 255, 0.2);
    --documents-warning-highlight-border: #ff9800;
    --documents-warning-highlight-shadow: rgba(255, 152, 0, 0.3);
    --documents-warning-highlight-shadow-hover: rgba(255, 152, 0, 0.2);
    --documents-dropzone-border: rgba(139, 122, 165, 0.4);
    --documents-dropzone-bg: rgba(139, 122, 165, 0.08);
    --documents-dropzone-border-hover: rgba(139, 122, 165, 0.6);
    --documents-dropzone-bg-hover: rgba(139, 122, 165, 0.12);
    --documents-dropzone-border-active: #8B7AA5;
    --documents-dropzone-bg-active: rgba(139, 122, 165, 0.16);
    --documents-progress-bar-bg: rgba(255, 255, 255, 0.1);
    --documents-progress-bar-fill-start: #4CAF50;
    --documents-progress-bar-fill-end: #45a049;
    --documents-progress-status: rgba(255, 255, 255, 0.7);
    --documents-container-bg: #1A1F2E;
    --documents-item-bg: #131C25;
    --documents-item-border: #2B3D4B;
    --documents-item-icon: #B3B3B3;
    --documents-item-name: #FFFFFF;
    --documents-item-badge-bg: rgba(96, 165, 250, 0.15);
    --documents-item-badge-text: #60A5FA;
    --documents-item-date: #808080;
    --documents-item-button-border: #2B3D4B;
    --documents-item-button-hover-bg: #1E2934;
    --documents-item-button-hover-border: #808080;
    --documents-item-button-view-color: #60A5FA;
    --documents-item-button-view-border: #60A5FA;
    --documents-item-button-view-hover-bg: rgba(96, 165, 250, 0.15);
    --documents-item-button-download-color: #4CAF50;
    --documents-item-button-download-border: #4CAF50;
    --documents-item-button-download-hover-bg: rgba(76, 175, 80, 0.15);
    --documents-empty-text: #808080;
    --documents-alert-bg: rgba(255, 183, 77, 0.15);
    --documents-alert-border: #ffb74d;
    --documents-alert-strong: #ff9800;
    --documents-alert-item-bg: #131C25;
    --documents-alert-item-border: #ffb74d;
    --documents-alert-item-icon: #ff9800;
    --documents-section-bg: #131C25;
    --documents-section-shadow: rgba(0,0,0,0.3);
    --documents-section-heading: #FFFFFF;
    --documents-compact-null: rgba(255, 255, 255, 0.9);
    --documents-compact-badge-bg: rgba(96, 165, 250, 0.15);
    --documents-compact-badge-text: #60A5FA;
    /* App Card */
    --app-card-heading-border: var(--panel-blue-head-border);
    /* Search */
    --search-wrapper-gradient: linear-gradient(45deg, #222832, #262D37);
    /* Not Feeling Safe */
    --not-feeling-safe-include-color: var(--text-gray);
    --not-feeling-safe-message-color: #A9B8C1;
    /* Copy Phone */
    --copy-phone-tooltip-background: var(--separator-blue);
    /* Policy */
    --policy-search-modal-header-background: rgba(39, 52, 63, 0.8);
    --policy-vehicle-hover-background: var(--separator-blue-hover-alt);
    --policy-vehicle-odd-hover-background: #1E2934;
    --policy-vehicle-loading-background: rgba(13, 21, 29, 0.1);
    /* Table */
    --table-border: #1B2936;
    --table-border-rgba: rgba(61, 95, 124, 0.5);
    --table-head-color: #CFD3D5;
    --table-row-even-bg: #0E161D;
    --table-mobile-border: #1D2732;
    /* Rating */
    --rating-heading-color: rgba(255, 255, 255, 0.8);
    /* C3 Chart */
    --c3-chart-text-color: #FFFFFF;
    --c3-chart-border-color: #25313f;
    --c3-chart-line-color: #25394B;
    /* Pagination */
    --pagination-current-border: #1C2936;
    /* Scrollbar */
    --scrollbar-track: #11202E;
    --scrollbar-thumb: var(--text-gray);
    /* Requests List */
    --requests-list-filter-image: url("../vectors/filter-dark-theme.svg");
    --requests-list-location-image: url("../vectors/location-dark-theme.svg");
    --requests-list-background-image: url("../images/requests-list-dark-theme@2x.png");
    /* Switch */
    --switch-paddle-background: #FFFFFF;
    --switch-thumb-off: #B6B8BA;
    --switch-thumb-on: var(--brand-blue);
    /* Radial Gradient Box */
    --radial-gradient-box-border: #EEEEEE;
    --radial-gradient-box-background: url("../images/radial-gradient-box-dark-theme.png");
    /* Admin Sidebar */
    --sidebar-panel-gradient-start: #1E2F3D;
    --sidebar-panel-gradient-end: #15202A;
    --sidebar-nav-color: var(--text-gray);
    --sidebar-nav-hover-bg: #1b2935;
    --sidebar-nav-current-accent: #8F09F9;
    /* Comment */
    --comment-border: #1D2732;
    --comment-expand-hover: rgba(255, 255, 255, 0.05);
    --comment-text-secondary: #A9B8C1;
    --comment-expanded-background: #0F1821;
    /* Header */
    --header-separator: #465967; /* dark theme specific, no matching variable */
    --header-nav-gradient-start: #1E2F3D; /* matches --sidebar-panel-gradient-start, but semantically different */
    --header-nav-gradient-end: #15202A; /* matches --sidebar-panel-gradient-end, but semantically different */
    --header-border: rgba(61, 95, 124, 0.2);
    --support-number-border: #465967;
    --support-number-color: #FFFFFF;
    /* Input */
    --placeholder-color: var(--text-secondary);
    --disabled-background: #111D27;
    --disabled-color: #303B49;
    --input-card-border: #2B3D4B;
    --input-hover-bg: #0E1924;
    /* Nearby Destinations */
    --nearby-destination-secondary-submit: var(--separator-blue);
    --nearby-destination-secondary-submit-hover: var(--separator-blue-hover);
    /* Service Action Modal Colors */
    --action-modal-red-start: #e74c3c;
    --action-modal-red-end: #c0392b;
    --action-modal-green-start: #27ae60;
    --action-modal-green-end: #229954;
    --action-modal-blue-start: #3498db;
    --action-modal-blue-end: #2980b9;
    --action-modal-purple-start: #9b59b6;
    --action-modal-purple-end: #8e44ad;
    --action-modal-yellow-start: #f39c12;
    --action-modal-yellow-end: #e67e22;
  }
}
/*  WARNING! This is super annoying thing but all of the color values must be duplicated
 between _themes-os-based.scss and _themes-forced.scss, so editing anything in this file
 should also be reflected in it's clone. The structure is:

  Light theme
  :root:not([data-theme]) { ... }

  Dark theme
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) { ... }
  }

  Forced light theme
  [data-theme="light"] { ... }

  Forced dark theme
  [data-theme="dark"] { ...  }


  The problem is that you can't unite them like so:
  @media (prefers-color-scheme: dark),
  [data-theme="dark"] {
      ...
  }

  Commas don't work with at-rules. And there is no @extend/apply in CSS.
  This won't even work in SCSS. So, for now just duplicate all the lines with colors
  across these two files.
*/
/* Forced light theme */
[data-theme=light] {
  /* Colors that never changes */
  --white-both-themes: #FFFFFF;
  --black-both-themes: #000000;
  --blue-both-themes: #18242F;
  --light-gray-both-themes: #666666;
  --dark-gray-both-themes: #333333;
  --action-shadow-both-themes: rgba(0, 0, 0, 0.3);
  /* Shades of brand blue color (from darkest to lightest).
   * Each of them has main color in the first line and
   * then may have some variations */
  /* 1 */
  --bg-blue-darkest: #FBFCFD; /* Nearly black: aut pages background, request page navigation (bottom bar), nearest locations sidebar, etc. */
  --bg-blue-border: #F5F6F9;
  /* 2 */
  --brand-blue: #FFFFFF;
  --brand-blue-hover: #F7F8F9;
  --brand-blue-alpha-75: rgba(249, 250, 251, 0.75);
  /* 3 */
  --even-stripe-blue: #EEF1F4;
  --even-stripe-blue-hover: #EBEDF0;
  /* 4 */
  --separator-blue: #F8F9FA; /* Separators & borders, table & modal backgrounds, secondary button, etc. */
  --separator-blue-hover: #F4F5F7;
  --separator-blue-hover-alt: #F4F5F7;
  --separator-blue-lighter-hover: #F0F2F4;
  --page-footer-border: #D4DBE2;
  /* 5 */
  --panel-blue: #F8F8F9;
  --panel-blue-hover: #EEF1F4;
  --panel-blue-gradient-start: #CECED2;
  --panel-blue-gradient-end: #C4C5CA;
  --panel-blue-head-border: #C9CACE;
  /* 6 */
  --border-blue: #E5E7EB;
  --border-blue-hover: #D1D5DB;
  --border-blue-focus: #9CA3AF;
  /* 7 */
  --cards-blue: #EFF0F1;
  /* 8 */
  --accent-blue-border: #D1D5DB;
  /* Text */
  --text-blue: #09121B;
  --text-link: #E5733F;
  --text-gray: #6B7280;
  --text-light-gray: #6B7280;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --text-note: #6B7280;
  /* Danger */
  --danger-border: #991B1B;
  --danger-background: #FCA5A5;
  --danger-text: #991B1B;
  --danger-hover: #F87171;
  --danger-muted: #DC2626;
  /* Success */
  --success-border: #047857;
  --success-background: #6EE7B7;
  --success-text: #065F46;
  --success-hover: #34D399;
  --success-muted: #047857;
  /* Warning */
  --warning-border: #D97706;
  --warning-background: #FEF3C7;
  --warning-text: #92400E;
  --warning-hover: #FBBF24;
  --warning-muted: #F59E0B;
  /* Other global variables */
  --transparent-hover: rgba(12, 17, 29, 0.05);
  --selected-gradient: linear-gradient(135deg, #7C3AED, #6D28D9);
  /* Chevrons */
  --chevron-down-image: url("../vectors/chevron-down.svg");
  --chevron-down-disabled-image: url("../vectors/chevron-down-disabled.svg");
  --chevron-down-error-image: url("../vectors/chevron-down-error.svg");
  /* Button */
  --button-primary-border-gradient: linear-gradient(100deg, #A78BFA, #8B5CF6, #7C3AED 60%, #6D28D9);
  --button-primary-background-gradient: radial-gradient(at 60% bottom, #A78BFA, #7C3AED);
  --button-primary-background-hover-gradient: radial-gradient(at 60% bottom, #8B5CF6, #8B5CF6 15%, #7C3AED);
  --button-dark-background: #FCFCFD;
  --button-light-background: #09121B;
  --button-light-text: #FFFFFF;
  --button-light-hover-background: #0E1924;
  --button-transparent-text: var(--text-blue);
  --button-transparent-hover: var(--border-blue);
  --button-transparent-background-hover: var(--panel-blue);
  --button-darker-transparent-text: var(--text-blue);
  --button-darker-transparent-hover: var(--border-blue);
  --button-darker-transparent-background-hover: var(--separator-blue);
  /* State Pill */
  --state-pill-warning-border: #F59E0B;
  --state-pill-warning-background: #FEF3C7;
  --state-pill-warning-text: #92400E;
  --state-pill-scheduled-border: #9CA3AF;
  --state-pill-scheduled-background: #F3F4F6;
  --state-pill-scheduled-text: #374151;
  --state-pill-new-border: #0EA5E9;
  --state-pill-new-background: #E0F2FE;
  --state-pill-new-text: #0C4A6E;
  --state-pill-verifying-border: #0D9488;
  --state-pill-verifying-background: #DBEAFE;
  --state-pill-verifying-text: #1E40AF;
  --state-pill-searching-border: #6366F1;
  --state-pill-searching-background: #EEF2FF;
  --state-pill-searching-text: #4338CA;
  --state-pill-dispatched-border: #C026D3;
  --state-pill-dispatched-background: #FDF4FF;
  --state-pill-dispatched-text: #9D174D;
  --state-pill-yellow-border: #EAB308;
  --state-pill-yellow-background: #FEF9C3;
  --state-pill-yellow-text: #854D0E;
  /* Job Issues */
  --job-issues-warning-border: #F59E0B;
  --job-issues-warning-background: rgba(254, 243, 199, 0.2);
  --job-issues-warning-text: #92400E;
  --job-issues-info-border: #60A5FA;
  --job-issues-info-background: rgba(96, 165, 250, 0.12);
  --job-issues-info-text: #3B82F6;
  /* Modal */
  --modal-backdrop: rgba(249, 250, 251, 0.75); /* same as --brand-alpha-75, but they are not matching in the dark theme, so don't replace */
  /* Request */
  --request-sidebar-background: rgba(249, 250, 251, 0.7);
  /* Background (common bg used in a few components) */
  --background-neutral: url("../images/backgrounds/background-neutral.png");
  --background-success: url("../images/backgrounds/background-success.png");
  --background-warning: url("../images/backgrounds/background-warning.png");
  --background-danger: url("../images/backgrounds/background-danger.png");
  /* Flow */
  --flow-desktop-svg: url("../images/flow/flow-desktop@2x.svg");
  --flow-desktop-left-svg: url("../images/flow/flow-desktop-left@2x.svg");
  --flow-desktop-right-svg: url("../images/flow/flow-desktop-right@2x.svg");
  --flow-smartphone-left-svg: url("../images/flow/flow-smartphone-left@2x.svg");
  --flow-smartphone-right-svg: url("../images/flow/flow-smartphone-right@2x.svg");
  /* Gate */
  --gate-grid-color: #F3F4F6;
  --gate-radial-gradient-start: rgba(229, 231, 235, 0);
  --gate-radial-gradient-middle: rgba(229, 231, 235, 0.1);
  --gate-radial-gradient-end: rgba(229, 231, 235, 0.6);
  --gate-lines-opacity: 85%;
  /* Powered By */
  --honk-logo: url("../vectors/honk-logo.svg");
  /* Informer (common gradient used in a few components)  */
  --info-bar-gradient: linear-gradient(45deg, #E5E7EB, #D1D5DB);
  /* Spot */
  --spot-neutral-image: url("../images/spot/spot-light-theme-neutral@2x.png");
  --spot-success-image: url("../images/spot/spot-light-theme-success@2x.png");
  --spot-warning-image: url("../images/spot/spot-light-theme-warning@2x.png");
  --spot-danger-image: url("../images/spot/spot-light-theme-danger@2x.png");
  /* Hub */
  --hub-item-background: #FFFFFF;
  --hub-item-hover-background: #FFFFFF;
  --hub-item-hover-border: var(--border-blue-hover);
  /* Selected Location */
  --selected-location-icon-stroke: #A9B8C1;
  --selected-location-address-color: var(--text-gray);
  /* Datepicker */
  --datepicker-background: var(--separator-blue);
  --datepicker-text: var(--text-blue);
  --datepicker-header-text: var(--text-blue);
  --datepicker-disabled-text: #9CA3AF;
  --datepicker-hover-background: rgba(12, 17, 29, 0.05);
  --datepicker-active-day-image: url("../vectors/calendar-active-day@2x.png");
  /* Tooltip */
  --tooltip-background-color: rgba(12, 17, 29, 0.06);
  --tooltip-background-gradient: radial-gradient(ellipse farthest-side at center 90%, rgba(12, 17, 29, 0.02) 0%, rgba(12, 17, 29, 0.22) 200%);
  --tooltip-border: #D1D5DB;
  --tooltip-text: var(--text-blue);
  --tooltip-arrow-border: #D1D5DB;
  /* Map overlay */
  --map-overlay-warning-gradient: linear-gradient(to bottom, rgba(241, 130, 79, 0.1), rgba(9, 18, 27, 0.1));
  /* Choice */
  --choice-checkbox-image: url("../vectors/choice-checkbox.svg");
  --choice-checkbox-hover-image: url("../vectors/choice-checkbox-hover.svg");
  --choice-checkbox-checked-image: url("../vectors/choice-checkbox-checked.svg");
  --choice-radio-image: url("../vectors/choice-radio.svg");
  --choice-radio-hover-image: url("../vectors/choice-radio-hover.svg");
  --choice-radio-checked-image: url("../vectors/choice-radio-checked.svg");
  --choice-huge-checkbox-image: url("../vectors/choice-huge-checkbox@2x.png");
  --choice-huge-checkbox-hover-image: url("../vectors/choice-huge-checkbox-hover@2x.png");
  --choice-huge-checkbox-checked-image: url("../vectors/choice-huge-checkbox-checked@2x.png");
  --choice-huge-radio-image: url("../vectors/choice-huge-radio@2x.png");
  --choice-huge-radio-hover-image: url("../vectors/choice-huge-radio-hover@2x.png");
  --choice-huge-radio-checked-image: url("../vectors/choice-huge-radio-checked@2x.png");
  /* Nearby Locations */
  --nearby-locations-side-background: #f1f4f6;
  /* Quote */
  --amount-owed-color: #77838A;
  --quote-background-image: url("../images/quote@2x.jpg");
  --customer-expense-override-background: rgba(255, 255, 255, 0.2);
  /* Current Location */
  --current-location-background-image: url("../images/current-location@2x.jpg");
  /* Step */
  --step-frame-desktop-image: url("../vectors/step-frame-desktop.svg");
  --step-frame-smartphone-image: url("../vectors/step-frame-smartphone.svg");
  --step-label-color: #6B7280;
  --step-gradient: linear-gradient(100deg, #FFD4C4, #FFB89B);
  --step-gradient-mobile: linear-gradient(100deg, #FFD4C4, #FFB89B);
  --step-current-gradient: linear-gradient(100deg, #FFD4C4, #E5E7EB 39%, #E5E7EB);
  --step-current-next-gradient: linear-gradient(100deg, #E5E7EB, #E5E7EB 61%, #FFD4C4);
  /* Documents */
  --documents-item-bullet-color: rgba(0, 0, 0, 0.3);
  --documents-warning-highlight-border: #ff9800;
  --documents-warning-highlight-shadow: rgba(255, 152, 0, 0.2);
  --documents-warning-highlight-shadow-hover: rgba(255, 152, 0, 0.1);
  --documents-dropzone-border: rgba(107, 91, 149, 0.3);
  --documents-dropzone-bg: rgba(107, 91, 149, 0.04);
  --documents-dropzone-border-hover: rgba(107, 91, 149, 0.5);
  --documents-dropzone-bg-hover: rgba(107, 91, 149, 0.08);
  --documents-dropzone-border-active: #6B5B95;
  --documents-dropzone-bg-active: rgba(107, 91, 149, 0.12);
  --documents-progress-bar-bg: rgba(0, 0, 0, 0.08);
  --documents-progress-bar-fill-start: #4CAF50;
  --documents-progress-bar-fill-end: #45a049;
  --documents-progress-status: rgba(0, 0, 0, 0.6);
  --documents-container-bg: #f9f9f9;
  --documents-item-bg: white;
  --documents-item-border: #e0e0e0;
  --documents-item-icon: #666;
  --documents-item-name: #333;
  --documents-item-badge-bg: #e3f2fd;
  --documents-item-badge-text: #1976d2;
  --documents-item-date: #999;
  --documents-item-button-border: #e0e0e0;
  --documents-item-button-hover-bg: #f5f5f5;
  --documents-item-button-hover-border: #999;
  --documents-item-button-view-color: #1976d2;
  --documents-item-button-view-border: #1976d2;
  --documents-item-button-view-hover-bg: #e3f2fd;
  --documents-item-button-download-color: #4CAF50;
  --documents-item-button-download-border: #4CAF50;
  --documents-item-button-download-hover-bg: #f0f8f0;
  --documents-empty-text: #999;
  --documents-alert-bg: #fff3e0;
  --documents-alert-border: #ffb74d;
  --documents-alert-strong: #e65100;
  --documents-alert-item-bg: white;
  --documents-alert-item-border: #ffb74d;
  --documents-alert-item-icon: #ff9800;
  --documents-section-bg: white;
  --documents-section-shadow: rgba(0,0,0,0.1);
  --documents-section-heading: #333;
  --documents-compact-null: rgba(0, 0, 0, 0.9);
  --documents-compact-badge-bg: rgba(25, 118, 210, 0.08);
  --documents-compact-badge-text: #1976d2;
  /* App Card */
  --app-card-heading-border: var(--border-blue);
  /* Search */
  --search-wrapper-gradient: linear-gradient(45deg, #E5E7EB, #D1D5DB);
  /* Not Feeling Safe */
  --not-feeling-safe-include-color: #556B7A;
  --not-feeling-safe-message-color: #77838A;
  /* Copy Phone */
  --copy-phone-tooltip-background: var(--border-blue);
  /* Policy */
  --policy-search-modal-header-background: rgba(229, 231, 235, 0.8);
  --policy-vehicle-hover-background: #F6F7F8;
  --policy-vehicle-odd-hover-background: #F0F1F3;
  --policy-vehicle-loading-background: rgba(255, 255, 255, 0.1);
  /* Table */
  --table-border: #E5E7EB;
  --table-border-rgba: rgba(229, 231, 235, 0.9);
  --table-head-color: #6B7280;
  --table-row-even-bg: #F9FAFB;
  --table-mobile-border: #E5E7EB;
  /* Rating */
  --rating-heading-color: #6B7280;
  /* C3 Chart */
  --c3-chart-text-color: #09121B;
  --c3-chart-border-color: #D1D5DB;
  --c3-chart-line-color: #D1D5DB;
  /* Pagination */
  --pagination-current-border: #D1D5DB;
  /* Scrollbar */
  --scrollbar-track: #F3F4F6;
  --scrollbar-thumb: #D1D5DB;
  /* Requests List */
  --requests-list-filter-image: url("../vectors/filter.svg");
  --requests-list-location-image: url("../vectors/location.svg");
  --requests-list-background-image: url("../images/requests-list@2x.png");
  /* Switch */
  --switch-paddle-background: #E5E7EB;
  --switch-thumb-off: #9CA3AF;
  --switch-thumb-on: var(--text-blue);
  /* Radial Gradient Box */
  --radial-gradient-box-border: var(--border-blue);
  --radial-gradient-box-background: url("../images/radial-gradient-box.png");
  /* Admin Sidebar */
  --sidebar-panel-gradient-start: #F9FAFB;
  --sidebar-panel-gradient-end: #F3F4F6;
  --sidebar-nav-color: #6B7280;
  --sidebar-nav-hover-bg: #F3F4F6;
  --sidebar-nav-current-accent: #A855F7;
  /* Comment */
  --comment-border: #E5E7EB;
  --comment-expand-hover: rgba(9, 18, 27, 0.05);
  --comment-text-secondary: #6B7280;
  --comment-expanded-background: #F9FAFB;
  /* Header */
  --header-separator: var(--border-blue);
  --header-nav-gradient-start: var(--brand-blue);
  --header-nav-gradient-end: #F9FAFB; /* slightly different from --separator-blue (#F8F9FA), keeping as is */
  --header-border: rgba(12, 17, 29, 0.1);
  --support-number-border: #D1D5DB;
  --support-number-color: #09121B;
  /* Input */
  --placeholder-color: #9CA3AF;
  --disabled-background: #F3F4F6;
  --disabled-color: #9CA3AF;
  --input-card-border: #E5E7EB;
  --input-hover-bg: #F9FAFB;
  /* Nearby Destinations */
  --nearby-destination-secondary-submit: #FFFFFF;
  --nearby-destination-secondary-submit-hover: #FCFCFD;
  /* Service Action Modal Colors */
  --action-modal-red-start: #ef4444;
  --action-modal-red-end: #dc2626;
  --action-modal-green-start: #10b981;
  --action-modal-green-end: #059669;
  --action-modal-blue-start: #3b82f6;
  --action-modal-blue-end: #2563eb;
  --action-modal-purple-start: #a855f7;
  --action-modal-purple-end: #9333ea;
  --action-modal-yellow-start: #fbbf24;
  --action-modal-yellow-end: #f59e0b;
}

/* Forced dark theme */
[data-theme=dark] {
  /* Colors that never changes */
  --white-both-themes: #FFFFFF;
  --black-both-themes: #000000;
  --blue-both-themes: #18242F;
  --light-gray-both-themes: #666666;
  --dark-gray-both-themes: #333333;
  --action-shadow-both-themes: rgba(0, 0, 0, 0.3);
  /* Shades of brand blue color (from darkest to lightest).
   * Each of them has main color in the first line and
   * then may have some variations */
  /* 1 */
  --bg-blue-darkest: #070F16; /* auth pages background, request page navigation (bottom bar), nearest locations sidebar, etc. */
  --bg-blue-border: #101A24;
  /* 2 */
  --brand-blue: #09121B; /* body, inputs background */
  --brand-blue-hover: #0E1924;
  --brand-blue-alpha-75: rgba(9, 18, 27, 0.75);
  /* 3 */
  --even-stripe-blue: #0D151D;
  --even-stripe-blue-hover: #091016;
  /* 4 */
  --separator-blue: #131C25; /* Separators & borders, table & modal backgrounds, secondary button, etc. */
  --separator-blue-hover: #16212C;
  --separator-blue-hover-alt: #15202A;
  --separator-blue-lighter-hover: #202C37;
  --page-footer-border: #131C25;
  /* 5 */
  --panel-blue: #18242F;
  --panel-blue-hover: #1b2935;
  --panel-blue-gradient-start: #25303D;
  --panel-blue-gradient-end: #494F5A;
  --panel-blue-head-border: rgba(61, 95, 124, 0.2);
  /* 6 */
  --border-blue: #25303D;
  --border-blue-hover: #494F5A;
  --border-blue-focus: #CCCCCC;
  /* 7 */
  --cards-blue: #27343F;
  /* 8 */
  --accent-blue-border: #546578;
  /* Text */
  --text-blue: #FFFFFF;
  --text-link: #FF814F;
  --text-gray: #6B8494;
  --text-light-gray: #809DAF;
  --text-secondary: #667085;
  --text-muted: #A3A7AB;
  --text-note: #37465C;
  /* Danger */
  --danger-border: #912018;
  --danger-background: #55160C;
  --danger-text: #FDA29B;
  --danger-hover: #671A0E;
  --danger-muted: #E30E61;
  /* Success */
  --success-border: #085D3A;
  --success-background: #053321;
  --success-text: #75E0A7;
  --success-hover: #07442C;
  --success-muted: #54BB84;
  /* Warning */
  --warning-border: #C2410C;
  --warning-background: #5D5C28;
  --warning-text: #FF814F;
  --warning-hover: #A13609;
  --warning-muted: #FF814F;
  /* Other global variables */
  --transparent-hover: rgba(255, 255, 255, 0.1);
  --selected-gradient: linear-gradient(135deg, #5641D9, #4135A5);
  /* Chevrons */
  --chevron-down-image: url("../vectors/chevron-down-dark-theme.svg");
  --chevron-down-disabled-image: url("../vectors/chevron-down-disabled.svg");
  --chevron-down-error-image: url("../vectors/chevron-down-error.svg");
  /* Button */
  --button-primary-border-gradient: linear-gradient(100deg, #8F08F9, #985AB4, #900AFB 60%, #900AFB);
  --button-primary-background-gradient: radial-gradient(at 60% bottom, #900AF9, #150F2D);
  --button-primary-background-hover-gradient: radial-gradient(at 60% bottom, #900AF9, #900AF9 15%, #150F2D);
  --button-dark-background: var(--panel-blue);
  --button-light-background: #FFFFFF;
  --button-light-text: #09121B;
  --button-light-hover-background: #EEEEEE;
  --button-transparent-text: #FFFFFF;
  --button-transparent-hover: var(--border-blue);
  --button-transparent-background-hover: var(--panel-blue);
  --button-darker-transparent-text: #FFFFFF;
  --button-darker-transparent-hover: var(--border-blue);
  --button-darker-transparent-background-hover: var(--separator-blue);
  /* State Pill */
  --state-pill-warning-border: #8A7A3D;
  --state-pill-warning-background: #4D4423;
  --state-pill-warning-text: #E6D7A1;
  --state-pill-scheduled-border: #5C5C5C;
  --state-pill-scheduled-background: #333333;
  --state-pill-scheduled-text: #B3B3B3;
  --state-pill-new-border: #3BA0D4;
  --state-pill-new-background: #0A3A5A;
  --state-pill-new-text: #B9F4FF;
  --state-pill-verifying-border: #065986;
  --state-pill-verifying-background: #062C41;
  --state-pill-verifying-text: #7CD4FD;
  --state-pill-searching-border: #53389E;
  --state-pill-searching-background: #2C1C5F;
  --state-pill-searching-text: #D6BBFB;
  --state-pill-dispatched-border: #4B0585;
  --state-pill-dispatched-background: #2A034D;
  --state-pill-dispatched-text: #B57EE0;
  --state-pill-yellow-border: #C2B135;
  --state-pill-yellow-background: #70641C;
  --state-pill-yellow-text: #FFF28A;
  /* Job Issues */
  --job-issues-warning-border: #8A7A3D;
  --job-issues-warning-background: rgba(77, 68, 35, 0.2);
  --job-issues-warning-text: #E6D7A1;
  --job-issues-info-border: #93C5FD;
  --job-issues-info-background: rgba(147, 197, 253, 0.12);
  --job-issues-info-text: #BFDBFE;
  /* Modal */
  --modal-backdrop: rgba(12, 17, 29, 0.7);
  /* Request */
  --request-sidebar-background: rgba(12, 17, 29, 0.7);
  /* Background (common bg used in a few components) */
  --background-neutral: url("../images/backgrounds/background-dark-theme-neutral.png");
  --background-success: url("../images/backgrounds/background-dark-theme-success.png");
  --background-warning: url("../images/backgrounds/background-dark-theme-warning.png");
  --background-danger: url("../images/backgrounds/background-dark-theme-danger.png");
  /* Flow */
  --flow-desktop-svg: url("../images/flow/flow-desktop-dark-theme@2x.svg");
  --flow-desktop-left-svg: url("../images/flow/flow-desktop-left-dark-theme@2x.svg");
  --flow-desktop-right-svg: url("../images/flow/flow-desktop-right-dark-theme@2x.svg");
  --flow-smartphone-left-svg: url("../images/flow/flow-smartphone-left-dark-theme@2x.svg");
  --flow-smartphone-right-svg: url("../images/flow/flow-smartphone-right-dark-theme@2x.svg");
  /* Gate */
  --gate-grid-color: #0C141B;
  --gate-radial-gradient-start: rgba(7, 15, 22, 0);
  --gate-radial-gradient-middle: rgba(7, 15, 22, 0.1);
  --gate-radial-gradient-end: rgba(7, 15, 22, 0.6);
  --gate-lines-opacity: 100%;
  /* Powered By */
  --honk-logo: url("../vectors/honk-logo-dark-theme.svg");
  /* Informer (common gradient used in a few components)  */
  --info-bar-gradient: linear-gradient(45deg, #0F1922, #0B141D);
  /* Spot */
  --spot-neutral-image: url("../images/spot/spot-dark-theme-neutral@2x.png");
  --spot-success-image: url("../images/spot/spot-dark-theme-success@2x.png");
  --spot-warning-image: url("../images/spot/spot-dark-theme-warning@2x.png");
  --spot-danger-image: url("../images/spot/spot-dark-theme-danger@2x.png");
  /* Hub */
  --hub-item-background: var(--separator-blue);
  --hub-item-hover-background: var(--separator-blue-lighter-hover);
  --hub-item-hover-border: var(--border-blue);
  /* Selected Location */
  --selected-location-icon-stroke: #FFFFFF;
  --selected-location-address-color: #A9B8C1;
  /* Datepicker */
  --datepicker-background: var(--separator-blue);
  --datepicker-text: #FFFFFF;
  --datepicker-header-text: #FFFFFF;
  --datepicker-disabled-text: var(--text-secondary);
  --datepicker-hover-background: rgba(255, 255, 255, 0.1);
  --datepicker-active-day-image: url("../vectors/calendar-active-day-dark-theme@2x.png");
  /* Tooltip */
  --tooltip-background-color: rgba(255, 255, 255, 0.2);
  --tooltip-background-gradient: radial-gradient(ellipse farthest-side at center 90%, rgba(242, 242, 242, 0.2) 0%, #070E16 200%);
  --tooltip-border: #777777;
  --tooltip-text: #FFFFFF;
  --tooltip-arrow-border: #777777;
  /* Map overlay */
  --map-overlay-warning-gradient: linear-gradient(to bottom, rgba(241, 130, 79, 0.9), rgba(9, 18, 27, 0.9));
  /* Choice */
  --choice-checkbox-image: url("../vectors/choice-checkbox-dark-theme.svg");
  --choice-checkbox-hover-image: url("../vectors/choice-checkbox-hover-dark-theme.svg");
  --choice-checkbox-checked-image: url("../vectors/choice-checkbox-checked-dark-theme.svg");
  --choice-radio-image: url("../vectors/choice-radio-dark-theme.svg");
  --choice-radio-hover-image: url("../vectors/choice-radio-hover-dark-theme.svg");
  --choice-radio-checked-image: url("../vectors/choice-radio-checked-dark-theme.svg");
  --choice-huge-checkbox-image: url("../vectors/choice-huge-dark-theme-checkbox@2x.png");
  --choice-huge-checkbox-hover-image: url("../vectors/choice-huge-dark-theme-checkbox-hover@2x.png");
  --choice-huge-checkbox-checked-image: url("../vectors/choice-huge-dark-theme-checkbox-checked@2x.png");
  --choice-huge-radio-image: url("../vectors/choice-huge-dark-theme-radio@2x.png");
  --choice-huge-radio-hover-image: url("../vectors/choice-huge-dark-theme-radio-hover@2x.png");
  --choice-huge-radio-checked-image: url("../vectors/choice-huge-dark-theme-radio-checked@2x.png");
  /* Nearby Locations */
  --nearby-locations-side-background: var(--bg-blue-darkest);
  /* Quote */
  --amount-owed-color: #A9B8C1;
  --quote-background-image: url("../images/quote-dark-theme@2x.jpg");
  --customer-expense-override-background: rgba(0, 0, 0, 0.2);
  /* Current Location */
  --current-location-background-image: url("../images/current-location-dark-theme@2x.jpg");
  /* Step */
  --step-frame-desktop-image: url("../vectors/step-frame-desktop-dark-theme.svg");
  --step-frame-smartphone-image: url("../vectors/step-frame-smartphone-dark-theme.svg");
  --step-label-color: #9EA0A4;
  --step-gradient: linear-gradient(100deg, #FFB89B, #FF814F);
  --step-gradient-mobile: linear-gradient(100deg, #FEB79A, #FE814F);
  --step-current-gradient: linear-gradient(100deg, #FFB89B, #482E27 39%, #482E27);
  --step-current-next-gradient: linear-gradient(100deg, #482E27, #482E27 61%, #FFB89B);
  /* Documents */
  --documents-item-bullet-color: rgba(255, 255, 255, 0.2);
  --documents-warning-highlight-border: #ff9800;
  --documents-warning-highlight-shadow: rgba(255, 152, 0, 0.3);
  --documents-warning-highlight-shadow-hover: rgba(255, 152, 0, 0.2);
  --documents-dropzone-border: rgba(139, 122, 165, 0.4);
  --documents-dropzone-bg: rgba(139, 122, 165, 0.08);
  --documents-dropzone-border-hover: rgba(139, 122, 165, 0.6);
  --documents-dropzone-bg-hover: rgba(139, 122, 165, 0.12);
  --documents-dropzone-border-active: #8B7AA5;
  --documents-dropzone-bg-active: rgba(139, 122, 165, 0.16);
  --documents-progress-bar-bg: rgba(255, 255, 255, 0.1);
  --documents-progress-bar-fill-start: #4CAF50;
  --documents-progress-bar-fill-end: #45a049;
  --documents-progress-status: rgba(255, 255, 255, 0.7);
  --documents-container-bg: #1A1F2E;
  --documents-item-bg: #131C25;
  --documents-item-border: #2B3D4B;
  --documents-item-icon: #B3B3B3;
  --documents-item-name: #FFFFFF;
  --documents-item-badge-bg: rgba(96, 165, 250, 0.15);
  --documents-item-badge-text: #60A5FA;
  --documents-item-date: #808080;
  --documents-item-button-border: #2B3D4B;
  --documents-item-button-hover-bg: #1E2934;
  --documents-item-button-hover-border: #808080;
  --documents-item-button-view-color: #60A5FA;
  --documents-item-button-view-border: #60A5FA;
  --documents-item-button-view-hover-bg: rgba(96, 165, 250, 0.15);
  --documents-item-button-download-color: #4CAF50;
  --documents-item-button-download-border: #4CAF50;
  --documents-item-button-download-hover-bg: rgba(76, 175, 80, 0.15);
  --documents-empty-text: #808080;
  --documents-alert-bg: rgba(255, 183, 77, 0.15);
  --documents-alert-border: #ffb74d;
  --documents-alert-strong: #ff9800;
  --documents-alert-item-bg: #131C25;
  --documents-alert-item-border: #ffb74d;
  --documents-alert-item-icon: #ff9800;
  --documents-section-bg: #131C25;
  --documents-section-shadow: rgba(0,0,0,0.3);
  --documents-section-heading: #FFFFFF;
  --documents-compact-null: rgba(255, 255, 255, 0.9);
  --documents-compact-badge-bg: rgba(96, 165, 250, 0.15);
  --documents-compact-badge-text: #60A5FA;
  /* App Card */
  --app-card-heading-border: var(--panel-blue-head-border);
  /* Search */
  --search-wrapper-gradient: linear-gradient(45deg, #222832, #262D37);
  /* Not Feeling Safe */
  --not-feeling-safe-include-color: var(--text-gray);
  --not-feeling-safe-message-color: #A9B8C1;
  /* Copy Phone */
  --copy-phone-tooltip-background: var(--separator-blue);
  /* Policy */
  --policy-search-modal-header-background: rgba(39, 52, 63, 0.8);
  --policy-vehicle-hover-background: var(--separator-blue-hover-alt);
  --policy-vehicle-odd-hover-background: #1E2934;
  --policy-vehicle-loading-background: rgba(13, 21, 29, 0.1);
  /* Table */
  --table-border: #1B2936;
  --table-border-rgba: rgba(61, 95, 124, 0.5);
  --table-head-color: #CFD3D5;
  --table-row-even-bg: #0E161D;
  --table-mobile-border: #1D2732;
  /* Rating */
  --rating-heading-color: rgba(255, 255, 255, 0.8);
  /* C3 Chart */
  --c3-chart-text-color: #FFFFFF;
  --c3-chart-border-color: #25313f;
  --c3-chart-line-color: #25394B;
  /* Pagination */
  --pagination-current-border: #1C2936;
  /* Scrollbar */
  --scrollbar-track: #11202E;
  --scrollbar-thumb: var(--text-gray);
  /* Requests List */
  --requests-list-filter-image: url("../vectors/filter-dark-theme.svg");
  --requests-list-location-image: url("../vectors/location-dark-theme.svg");
  --requests-list-background-image: url("../images/requests-list-dark-theme@2x.png");
  /* Switch */
  --switch-paddle-background: #FFFFFF;
  --switch-thumb-off: #B6B8BA;
  --switch-thumb-on: var(--brand-blue);
  /* Radial Gradient Box */
  --radial-gradient-box-border: #EEEEEE;
  --radial-gradient-box-background: url("../images/radial-gradient-box-dark-theme.png");
  /* Admin Sidebar */
  --sidebar-panel-gradient-start: #1E2F3D;
  --sidebar-panel-gradient-end: #15202A;
  --sidebar-nav-color: var(--text-gray);
  --sidebar-nav-hover-bg: #1b2935;
  --sidebar-nav-current-accent: #8F09F9;
  /* Comment */
  --comment-border: #1D2732;
  --comment-expand-hover: rgba(255, 255, 255, 0.05);
  --comment-text-secondary: #A9B8C1;
  --comment-expanded-background: #0F1821;
  /* Header */
  --header-separator: #465967; /* dark theme specific, no matching variable */
  --header-nav-gradient-start: #1E2F3D; /* matches --sidebar-panel-gradient-start, but semantically different */
  --header-nav-gradient-end: #15202A; /* matches --sidebar-panel-gradient-end, but semantically different */
  --header-border: rgba(61, 95, 124, 0.2);
  --support-number-border: #465967;
  --support-number-color: #FFFFFF;
  /* Input */
  --placeholder-color: var(--text-secondary);
  --disabled-background: #111D27;
  --disabled-color: #303B49;
  --input-card-border: #2B3D4B;
  --input-hover-bg: #0E1924;
  /* Nearby Destinations */
  --nearby-destination-secondary-submit: var(--separator-blue);
  --nearby-destination-secondary-submit-hover: var(--separator-blue-hover);
  /* Service Action Modal Colors */
  --action-modal-red-start: #e74c3c;
  --action-modal-red-end: #c0392b;
  --action-modal-green-start: #27ae60;
  --action-modal-green-end: #229954;
  --action-modal-blue-start: #3498db;
  --action-modal-blue-end: #2980b9;
  --action-modal-purple-start: #9b59b6;
  --action-modal-purple-end: #8e44ad;
  --action-modal-yellow-start: #f39c12;
  --action-modal-yellow-end: #e67e22;
}

/* Global settings, constants, helpers, etc. */
:root {
  --font: "tt-commons-pro", sans-serif;
  --weight-normal: 300;
  --weight-medium: 400;
  --weight-semi-bold: 500;
  --body-font-size: 16px;
  --body-line-height: 24px;
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-hover: 100ms ease;
  --success: #085D3A;
  --error: #D4493F;
  --container-h-padding: 32px; /* horizontal padding only */
  --popup-padding: 48px;
  --dialog-padding: 24px;
  --header-height: 80px;
  --mobile-header-z-index: 100;
  --footer-height: 124px;
  --footer-margin: 34px;
  --modal-actions-gap: 12px;
  --fader: 20px;
  --popup-z-index: 900;
}

@media (max-width: 739.98px) {
  :root {
    --footer-height: 94px;
    --container-h-padding: 16px;
    --popup-padding: 16px;
    --dialog-padding: 20px;
  }
}
@media (max-width: 739.98px) and (max-width: 349.98px) {
  :root {
    --container-h-padding: 8px;
    --popup-padding: 8px;
  }
}
html {
  min-width: 1260px;
  height: 100%;
  --csstools-color-scheme--light: initial;
  color-scheme: light dark; /* System based - browser chooses */
}
@media (prefers-color-scheme: dark){
html {
  --csstools-color-scheme--light:  ;
}
}

@media (max-width: 739.98px) {
  html {
    min-width: 0;
  }
}
[data-theme=light] {
  --csstools-color-scheme--light: initial;
  color-scheme: light;
}

[data-theme=dark] {
  --csstools-color-scheme--light:  ;
  color-scheme: dark;
}

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  background-color: var(--brand-blue);
  font-family: "tt-commons-pro", sans-serif;
  font-family: var(--font);
  font-weight: 300;
  font-weight: var(--weight-normal);
  font-size: 16px;
  font-size: var(--body-font-size);
  line-height: 24px;
  line-height: var(--body-line-height);
  color: var(--text-blue);
}

* {
  box-sizing: border-box;
}

*::before {
  box-sizing: border-box;
}

*::after {
  box-sizing: border-box;
}

.nobr {
  white-space: nowrap;
}

.hide-scrollbar::-webkit-scrollbar { /* webkit */
  display: none;
}

/* stylelint-disable property-no-unknown */
.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Edge */
}

/* stylelint-enable */
.container {
  width: 100%;
  max-width: 1500px;
  border-left: 32px solid transparent;
  border-left: var(--container-h-padding) solid transparent;
  border-right: 32px solid transparent;
  border-right: var(--container-h-padding) solid transparent;
  margin-left: auto;
  margin-right: auto;
}

.container--smaller {
  max-width: 1280px;
}

@media (max-width: 739.98px) {
  .container {
    width: auto;
    max-width: 440px;
  }
}
.scrollbars-customisation-is-necessary .custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  background-color: var(--scrollbar-track);
  border-radius: 10px;
}

.scrollbars-customisation-is-necessary .custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 10px;
}

.forced-scrollbar::-webkit-scrollbar {
  width: 8px;
  background-color: var(--scrollbar-track);
  border-radius: 10px;
}

.forced-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 10px;
}

.scrollbar-width-checker {
  position: absolute;
  right: 200%;
  bottom: 200%;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

@media (max-width: 739.98px) {
  .hide-on-smartphone {
    display: none;
  }
}
@media (min-width: 740px) {
  .hide-on-desktop {
    display: none;
  }
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

@keyframes slideDownKeyframes {
  from {
    opacity: 0.5;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
:root {
  --slide-down-animation: slideDownKeyframes 1200ms var(--ease-out-quint);
}

.sr-only {
  display: inline-block;
  white-space: nowrap;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
}

.hide-when-blank {
  display: none;
}

.hide-when-blank.show {
  display: block;
}

.no-interaction {
  pointer-events: none;
}

@keyframes loading-spin {
  100% {
    transform: rotate(360deg);
  }
}
/* Customize what we've got from libraries */
.dropzone {
  display: grid;
  grid-template-columns: repeat(auto-fit, 120px);
  align-items: start;
  justify-content: space-evenly;
  grid-gap: 24px 10px;
  gap: 24px 10px;
  padding: 30px 20px;
  background-color: transparent;
  border: none;
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
  /* https://kovart.github.io/dashed-border-generator */
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='14' ry='14' stroke='%239BC3FF' stroke-width='2' stroke-dasharray='8%2c 8' stroke-dashoffset='26' stroke-linecap='round'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 14px;
}

.dropzone .dz-preview {
  margin: 0;
}

.dropzone.dz-drag-hover {
  background-color: var(--brand-blue-hover);
  border: none;
}

@media (hover: hover){

.dropzone:hover {
  background-color: var(--brand-blue-hover);
  border: none;
}
}

.dz-started {
  background-color: var(--panel-blue);
}

.dz-started.dz-drag-hover {
  background-color: var(--panel-blue-hover);
}

@media (hover: hover){

.dz-started:hover {
  background-color: var(--panel-blue-hover);
}
}

.dropzone .dz-message {
  margin-top: 64px;
  margin-bottom: 64px;
  grid-column: span 2;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 15px;
  line-height: 22px;
}

.dropzone .dz-preview.dz-image-preview {
  background-color: transparent;
}

.dropzone .dz-preview .dz-image img {
  width: 100%;
}

.dropzone .dz-preview .dz-progress {
  top: 52px;
  margin-top: 0;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  background-image: linear-gradient(100deg, #8F08F9, #985AB4, #900AFB 60%, #900AFB);
  border-radius: 8px;
}

.dropzone .dz-preview .dz-progress .dz-upload::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  background-image: radial-gradient(at 60% bottom, #900AF9, #150F2D);
  border-radius: 7px;
}

.dropzone .dz-preview .dz-remove {
  padding: 10px 5px 5px;
  margin-bottom: -5px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-link);
  text-decoration: underline;
  -webkit-text-decoration: underline solid transparent;
          text-decoration: underline solid transparent;
  text-decoration-thickness: 1px;
  -webkit-text-decoration: 1px underline transparent;
          text-decoration: 1px underline transparent;
  text-underline-offset: 2px;
}

@media (hover: hover){

.dropzone .dz-preview .dz-remove:hover {
  color: var(--text-link);
  text-decoration-color: currentColor;
  text-decoration-style: dashed;
}
}

/* Originally you can't see a sign of error, make it clear: */
.dz-error .dz-image {
  box-shadow: 0 0 0 4px #D4493F;
  box-shadow: 0 0 0 4px var(--error);
}

.dz-error .dz-image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #D4493F;
  background-color: var(--error);
  opacity: 0.3;
}

/* Originally there is a cross icon and it looks like it's a button to delete. Use exclamation mark icon: */
.dropzone .dz-preview .dz-error-mark {
  left: 100%;
  top: 0;
  margin-top: -12px;
  margin-left: -18px;
  width: 32px;
  height: 32px;
  background-image: url("../vectors/dropzone-warning.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.dropzone .dz-preview .dz-error-mark svg {
  display: none;
}

/* Original bubble shows up at the bottom overlapping remove link. Show it on top instead: */
.dropzone .dz-preview .dz-error-message {
  top: auto;
  bottom: 131px;
  left: -15px;
  width: 160px;
  padding: 10px 20px;
  background-color: #D4493F;
  background-color: var(--error);
  background-image: none; /* there was a gradient */
  font-size: 14px;
  line-height: 18px;
  text-align: center;
}

.dropzone .dz-preview .dz-error-message::after {
  left: 69px;
  top: auto;
  border-bottom: none;
  bottom: -6px;
  border-top: 6px solid #D4493F;
  border-top: 6px solid var(--error);
}

/* Original alignment is messed up by REMOVE link, so rewrite it: */
.dropzone .dz-preview .dz-success-mark {
  top: 33px;
  margin-top: 0;
}

/* Another instance */
.dropzone--admin-logo {
  min-height: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropzone--admin-logo .dz-preview .dz-image {
  border-radius: 0;
  width: auto;
  height: 107px; /* same as back side */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.dropzone--admin-logo .dz-preview .dz-image img {
  width: auto;
  max-width: none;
  height: 40px;
}

@media (max-width: 739.98px) {
  .dropzone {
    padding: 24px 16px;
  }
  /* Another instance */
  .dropzone--admin-logo {
    min-height: 218px;
  }
}
.datepicker.dropdown-menu {
  background-color: var(--datepicker-background);
  border-radius: 8px;
  border: 1px solid var(--accent-blue-border);
  box-shadow: none;
  color: var(--datepicker-text);
}

.datepicker thead,
.datepicker tbody {
  background-color: transparent !important;
}

.datepicker tr {
  background-color: transparent !important;
}

.datepicker th {
  background-color: transparent !important;
}

.datepicker td {
  background-color: transparent !important;
}

.datepicker.dropdown-menu th {
  background-color: transparent !important;
  font-weight: 400;
  font-weight: var(--weight-medium);
  color: var(--datepicker-header-text);
}

.disabled:not(.pagination-next):after {
  display: none !important;
}

.datepicker td.day {
  font-weight: 400;
  font-weight: var(--weight-medium);
  border-radius: 50%;
}

.datepicker td.day.disabled {
  background-color: transparent !important;
  color: var(--datepicker-disabled-text) !important;
}

@media (hover: hover){

.datepicker td.day:not(.disabled):not(.active):hover {
  background-color: var(--datepicker-hover-background) !important;
}
}

.datepicker td.active.day,
.datepicker td span.active {
  background-color: transparent !important;
  background-image: var(--datepicker-active-day-image) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  color: #FFFFFF;
}

.datepicker th,
.datepicker td.day {
  width: 38px;
  height: 38px;
  font-size: 14px;
  line-height: 20px;
}

.datepicker th.date-switch {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 24px;
}

/* year cell: */
.datepicker table tr td span {
  margin: 0 !important;
  width: 53px !important;
  height: 53px !important;
  border-radius: 50% !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 53px !important;
}

@media (hover: hover){

.datepicker table tr td span:not(.disabled):not(.active):hover {
  background-color: var(--datepicker-hover-background) !important;
}
}

/* Google's lib for location search */
.pac-container {
  min-height: 88px;
  margin-top: 6px !important;
  margin-left: 2px !important; /* For some reason google counts width loosing 4px, so keep it in the middle */
  padding-bottom: 26px; /* Under google logo */
  background-color: var(--brand-blue) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  border: 2px solid var(--border-blue) !important;
  border-radius: 8px !important;
  font-family: inherit;
  color: #FFFFFF !important;
}

.pac-logo::after {
  position: absolute !important;
  right: 6px !important;
  bottom: 6px !important;
  width: 120px !important;
  height: 14px !important;
  background-image: url(../images/powered-by-google.png) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

.pac-item {
  padding: 0 10px;
  border-top: 1px solid var(--border-blue) !important;
  font-size: 12px;
  line-height: 30px;
  color: var(--text-muted);
}

.pac-item:first-child {
  border-top: none !important;
}

@media (hover: hover){

.pac-item:hover {
  background-color: var(--brand-blue-hover);
}
}

.pac-matched {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
}

.pac-item-query {
  font-size: 14px;
  padding-right: 8px;
  color: #FFFFFF !important;
}

/* Donut chart */
/* hardly visible shadow/background */
svg:has(.c3-chart-arc) {
  background-color: var(--separator-blue-lighter-hover);
  -webkit-mask-image: url("../vectors/c3-chart.svg");
          mask-image: url("../vectors/c3-chart.svg");
  -webkit-mask-size: 130px 130px;
          mask-size: 130px 130px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left top;
          mask-position: left top;
}

#stats-graph-ata svg:has(.c3-chart-arc) {
  -webkit-mask-image: url("../vectors/c3-chart-large.svg");
          mask-image: url("../vectors/c3-chart-large.svg");
  -webkit-mask-size: 240px 240px;
          mask-size: 240px 240px;
}

/* Piece of donut: */
.c3-chart-arc path {
  stroke-width: 0; /* Remove border in between */
}

.c3-chart-arc text {
  scale: 120%;
  font-weight: bold;
  font-size: 8px;
  fill: #FFFFFF;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.15));
}

#stats-graph-ata .c3-chart-arc text {
  scale: 85%;
  font-size: 14px;
}

.c3-tooltip-container {
  background-color: var(--separator-blue);
  border: 1px solid var(--c3-chart-border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 7px;
}

.c3-tooltip {
  background-color: transparent;
  box-shadow: none;
  margin-bottom: 0;
  border-radius: 0;
}

.c3-tooltip tbody {
  background-color: transparent;
  border: none;
}

.c3-tooltip tr {
  background-color: transparent !important;
  border: none;
}

.c3-tooltip th,
.c3-tooltip td {
  padding: 3px 8px;
  background-color: transparent;
  border-left: 1px solid var(--c3-chart-border-color);
  font-weight: bold;
  color: var(--c3-chart-text-color);
  white-space: nowrap;
}

.c3-tooltip td:first-child {
  border-left: none;
}

/* two rows case in area-spline (table-alike) charts */
.c3-tooltip th {
  background-color: var(--brand-blue);
  border-bottom: 1px solid var(--c3-chart-border-color);
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

/* color preview: */
.c3-tooltip td > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Area-spline (table-alike) chart */
path.domain,
.c3 path,
.c3 line {
  stroke: var(--c3-chart-line-color);
}

.tick text {
  font-weight: bold;
  fill: var(--text-gray);
}

.c3-circle {
  fill: var(--c3-chart-text-color) !important;
  stroke: var(--c3-chart-text-color);
}

.xdsoft_autocomplete .xdsoft_autocomplete_dropdown {
  width: auto !important;
  overflow-y: auto;
  margin-top: 8px;
  border: 1px solid var(--accent-blue-border);
  background-color: var(--separator-blue);
  border-radius: 8px;
}

.xdsoft_autocomplete .xdsoft_autocomplete_dropdown > div {
  white-space: normal;
}

.xdsoft_autocomplete .xdsoft_autocomplete_dropdown .custom_child,
.xdsoft_autocomplete .xdsoft_autocomplete_dropdown .custom_child.active {
  padding: 0;
  pointer-events: none;
  background-color: transparent;
}

.xdsoft_autocomplete .xdsoft_autocomplete_dropdown .custom_child .warning {
  display: block;
  padding: 12px 48px 12px 14px;
  font-size: 15px;
  background-color: var(--even-stripe-blue);
}

/* on a fleet search page it gives white background over input */
.xdsoft_autocomplete_hint {
  background-color: transparent !important;
}

@media (max-width: 739.98px) {
  .xdsoft_autocomplete .xdsoft_autocomplete_dropdown {
    width: auto !important;
  }
}
/* Components */
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page__notifications {
  flex-shrink: 0;
}

.page__header {
  flex-shrink: 0;
}

.page__wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.page__footer {
  flex-shrink: 0;
  height: 124px;
  height: var(--footer-height);
  background-color: var(--brand-blue);
  border-top: 1px solid var(--page-footer-border);
  /* So far there is only one component inside so: */
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 739.98px) {
  .page__header {
    order: -1;
  }
  .nav-expanded .page__notifications {
    display: none;
  }
  .nav-expanded .page__header {
    height: 100%;
  }
  .nav-expanded .page__wrapper {
    display: none;
  }
  .nav-expanded .page__footer {
    display: none;
  }
}
.header {
  position: relative;
  z-index: 100; /* For shadow */
  display: flex;
  align-items: center;
  padding: 10px 32px;
  padding: 10px var(--container-h-padding);
  height: 80px;
  height: var(--header-height);
  box-shadow: 0 1px 0 var(--header-border);
}

.header__account {
  height: 100%;
  display: flex;
  align-items: center;
}

.header__toggle-nav {
  display: none;
}

.header__version {
  position: absolute;
  right: calc(32px - 5px);
  right: calc(var(--container-h-padding) - 5px);
  bottom: 3px;
  font-size: 10px;
  line-height: 15px;
  color: var(--text-gray);
  opacity: 0.5;
  pointer-events: none;
}

.header__dropdown {
  margin-left: 24px;
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 24px;
}

.header__nav {
  flex-grow: 1;
}

.header__nav-background {
  height: 100%;
  display: flex;
  align-items: center;
}

.header__link {
  padding: 28px 12px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-gray);
  white-space: nowrap;
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: color 100ms ease;
  transition: color var(--transition-hover);
}

.header__link--current {
  color: var(--text-blue);
}

@media (hover: hover){

.header__link:hover {
  color: var(--text-blue);
}
}

.header__link--mobile-logout {
  display: none;
}

.header__mobile-link-background {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header__icon {
  flex-shrink: 0;
  vertical-align: top;
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: transparent;
}

.header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.header__support {
  flex-shrink: 0;
}

.header__settings {
  flex-shrink: 0;
}

.header__desktop-logout {
  flex-shrink: 0;
  margin-left: -22px;
  margin-right: -22px;
  width: 60px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__door {
  vertical-align: top;
  fill: none;
  stroke: var(--text-gray);
  width: 20px;
  height: 20px;
  transition: stroke 100ms ease;
  transition: stroke var(--transition-hover);
}

@media (hover: hover){

.header__desktop-logout:hover .header__door {
  stroke: var(--text-blue);
}
}

/* Pretty tight in these screen resolution, so manually stretch things down: */
@media (min-width: 1340px) and (max-width: 1419.98px) {
  .header__dropdown {
    margin-left: 20px;
  }
  .header__link {
    padding-left: 10px;
    padding-right: 10px;
  }
  .header__mobile-link-background {
    gap: 10px;
  }
  .header__actions {
    gap: 18px;
  }
}
@media (min-width: 740px) and (max-width: 1339.98px) {
  .header {
    padding-left: 16px;
    padding-right: 16px;
  }
  .header__dropdown {
    margin-left: 16px;
  }
  .header__link {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 15px;
  }
  .header__icon {
    width: 20px;
    height: 20px;
  }
  .header__mobile-link-background {
    gap: 8px;
  }
  .header__actions {
    gap: 12px;
  }
  .header__desktop-logout {
    width: 50px;
    margin-left: -8px;
    margin-right: -16px;
  }
  .header__version {
    right: 12px;
  }
}
@media (max-width: 739.98px) {
  .header {
    height: 80px;
    height: var(--header-height); /* need to push page bottom */
    padding: 0;
    box-shadow: none;
  }
  .header::before {
    content: "";
    position: fixed;
    z-index: 100;
    z-index: var(--mobile-header-z-index);
    left: 0;
    top: 0;
    right: 0;
    height: 80px;
    height: var(--header-height);
    display: block;
    background-color: var(--brand-blue);
    box-shadow: 0 1px 0 var(--table-border-rgba);
  }
  .nav-expanded .header {
    height: 100%;
    padding-top: 80px;
    padding-top: var(--header-height);
  }
  .header__account {
    position: fixed;
    z-index: 100;
    z-index: var(--mobile-header-z-index);
    left: 0;
    top: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: calc(32px);
    margin-left: calc(var(--container-h-padding));
    height: 80px;
    height: var(--header-height);
  }
  .header__toggle-nav {
    position: fixed;
    z-index: 100;
    z-index: var(--mobile-header-z-index);
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: transparent;
    border: none;
    padding: 0;
    padding-right: calc(32px - 2px);
    padding-right: calc(var(--container-h-padding) - 2px);
    width: 80px;
    width: var(--header-height);
    height: 80px;
    height: var(--header-height);
    cursor: pointer;
  }
  .header__burger {
    display: block;
    width: 24px;
    height: 24px;
    stroke: var(--text-blue);
  }
  .header__cross {
    display: none;
    width: 24px;
    height: 24px;
    stroke: var(--text-blue);
  }
  .nav-expanded .header__burger {
    display: none;
  }
  .nav-expanded .header__cross {
    display: block;
  }
  .header__version {
    position: fixed;
    top: 60px;
    right: calc(32px - 3px);
    right: calc(var(--container-h-padding) - 3px);
    bottom: auto;
    z-index: 200;
  }
  .header__dropdown {
    display: none;
    position: static;
    margin-left: 0;
    height: 100%;
    align-items: stretch;
    flex-direction: column;
    padding-left: 32px;
    padding-left: var(--container-h-padding);
    padding-right: 32px;
    padding-right: var(--container-h-padding);
  }
  .nav-expanded .header__dropdown {
    display: flex;
  }
  .header__nav {
    flex-grow: 1;
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(100deg, var(--header-nav-gradient-start), var(--header-nav-gradient-end));
    padding: 2px;
    border-radius: 14px;
  }
  .header__nav-background {
    flex-grow: 1;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    background-color: var(--panel-blue);
    border-radius: 13px;
    padding-top: 10px;
    padding-bottom: 12px;
  }
  .header__link {
    display: block;
    padding: 6px 22px;
  }
  .header__link--current {
    padding-top: 13px;
    padding-bottom: 13px;
  }
  .header__link--mobile-logout {
    display: block;
    margin-top: auto;
  }
  .header__mobile-link-background {
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 184px;
    padding: 10px 0;
    border-radius: 8px;
  }
  .header__link--current .header__mobile-link-background {
    padding-left: 14px;
    background-color: var(--cards-blue);
    background-image: linear-gradient(to right, var(--sidebar-nav-current-accent), var(--sidebar-nav-current-accent) 4px);
    background-size: 4px 100%;
    background-repeat: no-repeat;
    background-position: left top;
  }
  .header__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin-top: 0;
    margin-left: calc(-1 * 32px / 2);
    margin-left: calc(-1 * var(--container-h-padding) / 2);
    margin-right: calc(-1 * 32px / 2);
    margin-right: calc(-1 * var(--container-h-padding) / 2);
    padding-left: calc(32px / 2);
    padding-left: calc(var(--container-h-padding) / 2);
    padding-right: calc(32px / 2);
    padding-right: calc(var(--container-h-padding) / 2);
    padding-top: 0;
    padding-bottom: 28px;
    border-top: none;
  }
  .header__support {
    margin-top: 12px;
    margin-left: 22px;
  }
  .header__desktop-logout {
    display: none;
  }
}
.brand {
  display: flex;
  align-items: center; /* in case of text logo */
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  height: 40px;
  cursor: pointer;
  /* in case of text logo: */
  font-weight: bold;
  font-size: 16px;
  line-height: 18px;
  color: var(--white-both-themes); /* important because of conflict */
  -webkit-text-decoration: none;
  text-decoration: none;
  letter-spacing: 0.1px;
  text-transform: none; /* conflict */
  /* for extremely wide logos (both <img> and text) */
  max-width: 200px;
}

.brand__logo {
  height: 100%;
  width: auto;
  /* for extremely wide <img> logos such as AssuranceAmerica
   * (long text logos will just wrap to second and third lines):
   */
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.brand--has-background {
  height: 60px;
  min-width: 190px; /* keep it's width so it won't stretch too much on page reload. Logo will be centered inside. */
  background-color: var(--white-both-themes);
  border-radius: 6px;
  /* in case of text logo: */
  color: var(--black-both-themes) !important; /* important because of conflict */
  /* and padding: */
  padding: 10px 16px;
}

.hub__item .brand--has-background {
  min-width: 0;
  width: 100%; /* stretchy on smartphone */
}

.brand--has-background-without-padding {
  height: 60px;
  min-width: 60px;
  background-color: var(--white-both-themes);
  border-radius: 6px;
  overflow: hidden; /* cut image corners as well */
  /* in case of text logo: */
  color: var(--black-both-themes) !important; /* important because of conflict */
}

.hub__item .brand--has-background-without-padding {
  min-width: 0;
  width: 100%; /* stretchy on smartphone */
}

@media (max-width: 739.98px) {
  .brand {
    font-size: 14px;
    line-height: 17px;
  }
}
.popup {
  position: fixed;
  z-index: 900;
  z-index: var(--popup-z-index);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: none;
}

/* Inline popup variant - used when embedding popup content within another modal (e.g., just-do-it in job details) */
.popup--inline {
  position: static;
  z-index: auto;
  width: auto;
  height: auto;
  overflow: visible;
  display: block;
}

.popup__container {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

.popup__viewport {
  display: table-cell;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

.popup__slot {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  margin: 48px;
  margin: var(--popup-padding);
}

/* This modal can appear on top of any other modal window, while in DOM it is positioned earlier: */
#error-modal {
  z-index: 950;
}

/* Popup hints shown by clicking "?" helpers on Request Service pages.
   This is not exactly the standard modal window so add following styles.
*/
#help-script {
  z-index: 2000;
  background-color: var(--modal-backdrop);
  backdrop-filter: blur(8px);
}

#help-script.show {
  display: block;
}

.window {
  background-image: linear-gradient(100deg, var(--panel-blue-gradient-start), var(--panel-blue-gradient-end));
  border-radius: 14px;
}

.window__background {
  position: relative;
  padding: 2px;
  background-color: var(--panel-blue);
  background-clip: content-box;
  border-radius: 14px;
  color: var(--text-blue);
}

/* gradient over border and content */
.window__background::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 268px;
  border-radius: 14px;
  background-position: center top;
}

.window__inner {
  position: relative; /* higher than gradient behind it*/
  margin: -2px; /* same as padding above because we want dimensions of the content inside to be similar to window */
}

.window__close {
  position: absolute;
  right: 0 !important; /* !important because of the conflict */
  top: 0 !important; /* !important because of the conflict */
  width: 60px;
  height: 60px;
  padding: 0;
  border: none;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

.window__close::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.window__close:hover::before {
  background-color: var(--transparent-hover);
}
}

.window__cross {
  vertical-align: top;
  width: 20px;
  height: 20px;
  stroke: var(--text-blue);
}

/* Original, image based status colors */
.window--success .window__background::before {
  background-image: var(--background-success);
}

.window--warning .window__background::before {
  background-image: var(--background-warning);
}

.window--danger .window__background::before {
  background-image: var(--background-danger);
}

/* Authorizing service modal statuses, gradient based */
.window--action-modal-red,
.window--action-modal-green,
.window--action-modal-blue,
.window--action-modal-purple,
.window--action-modal-yellow {
  overflow: hidden; /* .window__background::before to match rounded corners */
}

.window--action-modal-red .window__background::before {
  height: 3px;
  background-image: linear-gradient(var(--action-modal-red-start), var(--action-modal-red-end));
}

.window--action-modal-green .window__background::before {
  height: 3px;
  background-image: linear-gradient(var(--action-modal-green-start), var(--action-modal-green-end));
}

.window--action-modal-blue .window__background::before {
  height: 3px;
  background-image: linear-gradient(var(--action-modal-blue-start), var(--action-modal-blue-end));
}

.window--action-modal-purple .window__background::before {
  height: 3px;
  background-image: linear-gradient(var(--action-modal-purple-start), var(--action-modal-purple-end));
}

.window--action-modal-yellow .window__background::before {
  height: 3px;
  background-image: linear-gradient(var(--action-modal-yellow-start), var(--action-modal-yellow-end));
}

.dialog {
  width: 400px;
  padding: 24px;
  padding: var(--dialog-padding);
}

@media (max-width: 439.98px) {
  .dialog {
    min-width: 300px;
    width: 100%;
  }
}
.dialog__icon {
  width: -moz-fit-content;
  width: fit-content;
}

.dialog__heading {
  margin-top: 18px;
  margin-bottom: 0;
  marging-right: 40px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 20px;
  line-height: 28px;
  /* delete after redesign is completed: */
  text-align: left !important; /* conflict */
  padding: 0 !important; /* conflict */
  color: inherit !important; /* conflict */
  text-transform: none !important; /* conflict */
}

.dialog__heading:first-child {
  margin-top: 0;
}

#error-message .dialog__heading,
#success-message .dialog__heading {
  margin-top: 18px;
}

.dialog__message {
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
}

.dialog__addition {
  margin-top: 18px;
  font-style: italic;
  font-size: 14px;
  line-height: 20px;
}

.dialog__widget {
  margin-top: 24px;
}

.dialog__actions {
  margin-top: 61px;
}

.dialog__actions .app-button__background {
  padding-left: 20px;
  padding-right: 20px;
}

.dialog__foot-note {
  margin-top: 12px;
  font-style: italic;
  font-size: 13px;
  line-height: 18px;
}

.dialog--wide {
  width: 502px;
}

@media (max-width: 541.98px) {
  .dialog--wide {
    width: 100%;
  }
}
.dialog--medium-width {
  width: 450px;
}

@media (max-width: 489.98px) {
  .dialog--medium-width {
    width: 100%;
  }
}
.dialog--simplified .dialog__icon {
  margin-left: auto;
  margin-right: auto;
}

.dialog--simplified .dialog__heading {
  font-size: 24px;
  line-height: 34px;
  text-align: center !important;
}

.dialog--simplified .dialog__message {
  text-align: center !important;
}

.dialog--simplified .dialog__addition {
  font-size: 14px;
  line-height: 20px;
  text-align: center !important;
  color: var(--text-gray);
}

.dialog--simplified .dialog__actions {
  margin-top: 40px;
}

.dialog__foot-note {
  text-align: center;
}

.dialog--service-auth .dialog__message {
  font-size: 15px;
  line-height: 22px;
  opacity: 0.85;
}

.dialog--service-auth .dialog__message strong {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  color: var(--text-link);
}

.dialog--service-auth .dialog__actions {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--transparent-hover);
}

.announcement {
  --csstools-color-scheme--light: initial;
  color-scheme: light;
  padding: 5px 10px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  font-size: var(--body-font-size);
  line-height: 24px;
  line-height: var(--body-line-height);
  text-align: center;
  color: var(--white-both-themes);
  letter-spacing: 0.5px;
}

.announcement--warning {
  background-color: var(--warning-muted);
}

.announcement--success {
  background-color: var(--success-muted);
}

.announcement--danger {
  background-color: var(--danger-muted);
}

.announcement--stage-warning {
  letter-spacing: 7px;
  font-weight: bold;
  text-transform: uppercase;
}

@media (max-width: 739.98px) {
  .announcement--stage-warning {
    letter-spacing: 1px;
  }
}
@media (max-width: 349.98px) {
  .announcement--stage-warning {
    letter-spacing: 0;
  }
}
.support-number {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  border: 1px solid var(--support-number-border);
  border-radius: 10px;
  padding: 10px 8px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 18px;
  color: var(--support-number-color);
  letter-spacing: 0.14px;
  -webkit-text-decoration: none;
  text-decoration: none;
}

@media (hover: hover){

.support-number:hover {
  color: var(--support-number-color);
}
}

.support-number:active {
  color: var(--support-number-color);
}

.support-number__prefix {
  white-space: nowrap;
}

.support-number__content {
  white-space: nowrap;
}

.hub {
  padding: 40px 44px;
}

.hub__heading {
  margin-top: 0;
  margin-bottom: 0 !important;
  text-align: center;
}

.hub__list {
  margin-top: 67px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.popup .hub__list {
  margin-top: 40px;
}

.hub__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1.5px solid var(--border-blue);
  padding: 20px 10px 23px;
  background-color: var(--hub-item-background);
  border-radius: 8px;
  font-family: inherit;
  text-transform: none;
  cursor: pointer;
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.hub__item:hover {
  border-color: var(--hub-item-hover-border);
  background-color: var(--hub-item-hover-background);
}
}

.hub__label {
  margin-top: 10px;
  padding-bottom: 18px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 15px;
  line-height: 18px;
  color: var(--text-blue);
  -webkit-text-decoration: none;
  text-decoration: none;
  letter-spacing: 0.1px;
}

.hub__item--current {
  border-color: var(--action-modal-purple-start);
  border-width: 3px;
  background-color: var(--brand-blue);
}

@media (hover: hover){

.hub__item--current:hover {
  border-color: var(--action-modal-purple-start);
  border-width: 3px;
  background-color: var(--brand-blue);
}
}

.hub__current-account-section {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-blue);
}

.hub__current-account-label {
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 13px;
  color: var(--text-blue);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hub__item--prominent {
  min-width: 180px;
}

@media (max-width: 739.98px) {
  .hub {
    padding: 14px 32px;
    padding: 14px var(--container-h-padding);
  }
  .hub__list {
    margin-top: 31px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .popup .hub__list {
    margin-top: 24px;
  }
  .hub__label {
    font-size: 14px;
    line-height: 17px;
  }
  .hub__current-account-section {
    padding-bottom: 16px;
    margin-bottom: 8px;
  }
  .hub__current-account-label {
    font-size: 12px;
    margin-bottom: 10px;
  }
  .hub__item--prominent {
    min-width: 140px;
  }
}
#contextual-popup {
  position: absolute;
  z-index: -1;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  opacity: 1;
  transition: all 150ms ease-in;
}

#contextual-popup.show {
  z-index: 5000;
}

#contextual-popup.hide {
  opacity: 0;
}

.overlay-frame {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.overlay-mask {
  width: 8000px;
  height: 8000px;
  background-color: var(--modal-backdrop);
  -webkit-mask-image: url("../vectors/overlay-hole.svg");
          mask-image: url("../vectors/overlay-hole.svg");
  -webkit-mask-size: 8000px 8000px;
          mask-size: 8000px 8000px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  opacity: 0;
  transform: scale(120%);
  transition-property: transform, opacity;
  transition-duration: 150ms;
  transition-timing-function: ease-in;
}

#contextual-popup.show .overlay-mask {
  opacity: 0.6;
  transform: scale(100%);
}

/* specific hint for #ride-along */
body:has(#ride-along.c-popup-active) .overlay-mask {
  scale: 130%;
}

.c-popup {
  position: absolute;
  z-index: 100;
  width: 1px;
  height: 1px;
}

.c-popup-container {
  position: absolute;
  bottom: 0;
  left: -99px;
  transform: scaleY(0);
  transition: all 400ms ease-in;
  transform-origin: 50% 100%;
}

.c-popup-container.showH {
  transform: scaleY(1);
}

.c-popup-body {
  position: absolute;
  z-index: 0;
  width: 201px;
  bottom: 20px;
  background-color: var(--separator-blue);
  border: 1px solid var(--border-blue-hover);
  border-radius: 8px;
  transition: all 500ms ease-out;
  transform: scaleX(0.015);
}

.c-popup-container.showW .c-popup-body {
  transform: scaleX(1);
}

.c-popup-content {
  font-size: 15px;
  color: var(--text-blue);
  opacity: 0;
  transition: all 500ms ease-out;
}

.c-popup-content .c-popup-text {
  padding: 15px;
}

.c-popup-content.show {
  opacity: 1;
}

.c-popup-button {
  height: 40px;
  text-align: center;
  background-color: var(--panel-blue) !important;
  border-top: solid 1px var(--border-blue-hover);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  font-weight: bold;
  line-height: 40px;
  color: var(--text-blue);
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease-in;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

@media (hover: hover){

.c-popup-button:hover {
  background-color: var(--panel-blue-hover) !important;
}
}

.c-popup-line {
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 20px;
  z-index: 1;
  background-color: var(--border-blue-hover);
  margin-left: 99px;
}

.c-popup-html {
  display: none;
  visibility: hidden;
}

.powered-by {
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-gray);
  text-align: center;
}

.powered-by__branding {
  display: block;
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
  width: 99px;
  height: 25px;
  background-image: var(--honk-logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
}

.flow {
  height: 529px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 39px;
  background-image: var(--flow-desktop-left-svg), var(--flow-desktop-right-svg), var(--flow-desktop-svg);
  background-size: 270px 529px, 270px 529px, 1780px 529px;
  background-position: left center, right center, center center;
  background-repeat: no-repeat;
}

@media (min-width: 2600px) {
  .flow {
    background-image: var(--flow-desktop-svg);
    background-size: 1780px 529px;
    background-position: center center;
  }
}
.flow__summary-ribbon {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 24px;
}

.flow__stat {
  font-size: 15px;
  line-height: 24px;
}

.flow__param {
  font-weight: bold;
}

.flow__value {
  white-space: nowrap;
}

.flow__head {
  margin-top: 14px;
}

.flow__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 32px;
  line-height: 40px;
  text-align: center;
}

.flow__service {
  display: none;
}

.flow__body {
  margin-top: 44px;
}

.flow__status-heading {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 20px;
  line-height: 25px;
  text-align: center;
}

.flow__progress {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* In case of end status, there is no "Dispatch Status" heading before it. Otherwise it is: */
.flow__status-heading ~ .flow__progress {
  margin-top: 24px;
}

.flow__footer {
  margin-top: 24px;
}

.flow__pre-eta {
  padding-top: 16px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 20px;
  line-height: 24px;
  text-align: center;
}

.flow__eta-heading {
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 12px;
  line-height: 15px;
  text-align: center;
}

.flow__eta-time {
  text-align: center;
}

.flow__minutes {
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.32px;
}

.flow__units {
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 2.24px;
}

.flow__in-progress {
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 24px;
  line-height: 30px;
  text-align: center;
}

.flow__status-message {
  padding-top: 16px;
  text-align: center;
}

.flow__status-text {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 24px;
  line-height: 30px;
}

.flow__cancel {
  margin-top: 44px;
  margin-left: auto;
  margin-right: auto;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.flow__cancel .app-button__background {
  padding-left: 20px;
  padding-right: 20px;
}

.flow--simpler {
  height: 320px;
  padding-top: 24px;
  padding-bottom: 24px;
  background-image: url("../images/flow/flow-smartphone-left@2x.png"), url("../images/flow/flow-smartphone-right@2x.png");
  background-size: 270px 590px, 270px 590px;
  background-position: left center, right center;
}

@media (max-width: 739.98px) {
  .flow {
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
    background-image: none;
  }
  .flow__summary {
    padding-top: 17px;
    background-color: var(--panel-blue);
  }
  .flow__summary-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .flow__summary-ribbon {
    display: flex;
    vertical-align: top;
    justify-content: space-between;
    gap: 20px;
  }
  .flow__stat {
    font-size: 14px;
    line-height: 20px;
  }
  .flow__param {
    margin-bottom: 10px;
    display: block;
    font-size: 12px;
    line-height: 20px;
  }
  .flow__value {
    display: block;
  }
  /* because of the container and inline-flex right padding won't work: */
  .flow__summary-ribbon::after {
    content: "";
    margin-left: -20px;
    width: 32px;
    width: var(--container-h-padding);
    height: 10px;
    flex-shrink: 0;
    display: block;
  }
  .flow__head {
    padding-top: 14px;
    padding-bottom: 17px;
    margin-top: 0;
    background-color: var(--panel-blue);
  }
  .flow__heading {
    font-size: 28px;
    line-height: 35px;
    text-align: left;
  }
  .flow__service {
    display: inline;
  }
  .flow__person {
    margin-top: 8px;
    display: block;
    font-size: 16px;
    line-height: 20px;
  }
  .flow__body {
    margin-top: 0;
    padding-top: 24px;
    padding-bottom: 24px;
    background-image: var(--flow-smartphone-left-svg), var(--flow-smartphone-right-svg);
    background-size: 270px 590px, 270px 590px;
    background-position: left center, right center;
    background-repeat: no-repeat;
  }
  .flow__status-heading {
    text-align: left;
  }
  .flow__progress {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-left: 17px;
  }
}
@media (max-width: 739.98px) and (max-width: 349.98px) {
  .flow__progress {
    padding-left: 0;
  }
}
@media (max-width: 739.98px) {
  .flow__footer {
    margin-top: 0;
    padding-top: 24px;
    padding-bottom: 24px;
    background-color: var(--panel-blue);
  }
  .flow__footer-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .flow__pre-eta {
    padding-top: 0;
    font-weight: 400;
    font-weight: var(--weight-medium);
    font-size: 15px;
    line-height: 20px;
    text-align: left;
  }
  .flow__eta-heading {
    text-align: left;
  }
  .flow__eta-time {
    text-align: left;
  }
  .flow__status-message {
    padding-top: 0;
    text-align: left;
  }
  .flow__status-text {
    font-size: 20px;
    line-height: 25px;
  }
  .flow__cancel {
    margin-top: 0;
    margin-right: 0;
  }
  .flow__cancel:first-child {
    margin-left: auto;
    margin-right: auto;
  }
}
.step {
  position: relative;
  width: 256px;
}

.step__frame {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: var(--step-frame-desktop-image);
}

.step__icon {
  vertical-align: top;
  stroke: var(--white-both-themes);
  fill: none;
  width: 24px;
  height: 24px;
}

.step__label {
  margin-top: 16px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: var(--step-label-color);
}

.step__details {
  margin-top: 10px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  color: var(--step-label-color);
}

.step::before {
  content: "";
  position: absolute;
  right: 50%;
  margin-right: 36px;
  top: 36px;
  width: 184px;
  height: 2px;
  background-image: var(--step-gradient);
}

.step:first-child::before {
  display: none;
}

.step--passed .step__frame::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 24px;
  height: 24px;
  background-image: url("../vectors/step-passed.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.step--passed .step__icon {
  display: none;
}

.step--passed .step__label {
  color: var(--text-blue);
}

.step--passed .step__details {
  color: var(--text-blue);
}

@keyframes step-current {
  from {
    transform: rotate(0);
  }
  from {
    transform: rotate(-360deg);
  }
}
.step--current .step__frame::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  background-color: var(--white-both-themes);
  -webkit-mask-image: url("../vectors/loading.svg");
          mask-image: url("../vectors/loading.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  animation: step-current 1000ms steps(12) infinite;
}

.step--current .step__icon {
  display: none;
}

.step--current .step__label {
  color: var(--text-blue);
}

.step--current .step__details {
  color: var(--text-blue);
}

.step--current::before {
  background-image: var(--step-current-gradient);
}

.step--current + .step::before {
  background-image: var(--step-current-next-gradient);
}

.step--end-status::before {
  display: none;
}

.step--end-status .step__label {
  color: var(--text-blue);
}

.step--end-status .step__details {
  color: var(--text-blue);
}

.step--smaller {
  width: 198px;
}

.step--smaller::before {
  width: 126px;
}

@media (max-width: 739.98px) {
  .step {
    position: relative;
    width: auto;
    height: 62px;
    padding-top: 19px;
    padding-bottom: 19px;
    padding-left: 175px;
  }
  .step__frame {
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 0;
    margin-right: 0;
    width: 62px;
    height: 62px;
    background-image: var(--step-frame-smartphone-image);
  }
  .step__label {
    margin-top: 0;
    white-space: nowrap;
  }
  .step__details {
    display: none;
  }
  .step::before {
    position: absolute;
    right: auto;
    left: 82px;
    width: 75px;
    top: 30px;
    background-image: var(--step-gradient-mobile) !important; /* !important is to override current item gradient */
  }
  .step:first-child::before {
    display: block;
  }
}
@media (max-width: 739.98px) and (max-width: 369.98px) {
  .step {
    padding-left: 142px;
  }
  .step::before {
    width: 40px;
  }
}
@media (max-width: 739.98px) {
  .step--end-status {
    gap: 20px;
    padding-left: 85px;
  }
  .step--end-status::before,
  .step--end-status:first-child::before {
    display: none;
  }
  .step--end-status .step__label {
    color: var(--text-blue);
  }
}
.backend-step {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 72px;
}

.backend-step [class^=status]:not(.status-title) {
  position: relative;
  padding: 24px 0 24px 84px;
}

.backend-step [class^=status]:not(.status-title)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../vectors/step-frame-desktop.svg");
}

.backend-step .icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--white-both-themes);
}

.backend-step .status-title {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: var(--text-blue);
}

@media (max-width: 739.98px) {
  .backend-step [class^=status]:not(.status-title) {
    padding: 19px 0 19px 72px;
  }
  .backend-step [class^=status]:not(.status-title)::before {
    width: 62px;
    height: 62px;
    background-image: url("../vectors/step-frame-smartphone.svg");
  }
  .backend-step .icon {
    width: 62px;
    height: 62px;
  }
}
.details-layout {
  padding-top: 34px;
  padding-bottom: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 32px 20px;
  gap: 32px 20px;
}

.details-layout__chat {
  order: 1;
  grid-column: span 3;
}

.details-layout__column {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
}

.details-layout__fieldset {
  flex-grow: 1;
}

.details-layout__column--service {
  order: 1;
}

.details-layout__column--appointment {
  order: 1;
}

.details-layout__column--exclusions {
  order: 5;
}

.details-layout__column--vehicle {
  order: 2;
}

.details-layout__column--customer-info {
  order: 3;
}

.details-layout__column--customer-address {
  order: 4;
}

.details-layout__column--documents {
  order: 6;
}

.details-layout__actions {
  margin-top: 10px;
  order: 8;
  grid-column: span 3;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* completed case: */
.details-layout__actions:empty {
  display: none;
}

.details-layout__actions .app-button__background {
  min-width: 114px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 739.98px) {
  .details-layout {
    padding-top: 32px;
    display: block;
  }
  .details-layout__chat {
    grid-column: span 3;
  }
  .details-layout__actions {
    margin-top: 32px;
  }
}
.details-layout--lockbox {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.details-layout--lockbox .details-layout__chat {
  order: 1;
}

.details-layout--lockbox .details-layout__column--appointment {
  order: 2;
  width: 465px;
  margin-left: auto;
}

.details-layout--lockbox .details-layout__column--vehicle {
  order: 3;
  width: 465px;
}

.details-layout--lockbox .details-layout__actions {
  order: 4;
  width: 970px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 739.98px) {
  .details-layout--lockbox .details-layout__column--appointment {
    width: auto;
  }
  .details-layout--lockbox .details-layout__column--vehicle {
    width: auto;
  }
  .details-layout--lockbox .details-layout__actions {
    width: auto;
  }
}
.app-panel {
  height: 100%;
  background-image: linear-gradient(100deg, var(--panel-blue-gradient-start), var(--panel-blue-gradient-end));
  padding: 2px;
  border-radius: 14px;
}

.app-panel__background {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: var(--panel-blue);
  border-radius: 13px;
}

.app-panel__head {
  margin: -2px -2px 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 22px;
  border: 2px solid var(--panel-blue-head-border);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.app-panel__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-family: inherit; /* conflict */
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  text-transform: uppercase;
  color: var(--text-blue); /* conflict */
  letter-spacing: 0.56px;
}

.app-panel__heading:only-child {
  margin-left: auto;
  margin-right: auto;
}

.app-panel__head .app-button__background {
  padding-left: 16px;
  padding-right: 16px;
  gap: 10px;
  font-size: 14px;
}

.app-panel__heading-back-text {
  display: none;
}

.app-panel:has(.flipper--flipped) .app-panel__heading-front-text {
  display: none;
}

.app-panel:has(.flipper--flipped) .app-panel__heading-back-text {
  display: inline;
}

.app-panel--lighter {
  background-image: linear-gradient(to bottom right, var(--panel-blue-gradient-start), var(--panel-blue-gradient-start));
}

.app-panel--lighter .app-panel__background {
  background-color: var(--cards-blue);
}

@media (max-width: 739.98px) {
  .dashboard .app-panel__heading {
    font-size: 12px;
    line-height: 16px;
    text-align: left;
  }
}
.chat {
  position: relative;
  padding: 22px;
}

.chat__timezone-hint {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 1px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  color: var(--text-secondary);
}

.chat__window {
  position: relative;
}

.chat__scroll {
  max-height: 194px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.chat__ribbon {
  padding-top: 2px;
  padding-bottom: 6px;
  padding-right: 40px;
  min-height: 48px;
}

.chat__window::before {
  content: "";
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  right: 40px;
  height: 12px;
  background-image: linear-gradient(var(--panel-blue), transparent);
}

.chat__window::after {
  content: "";
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: 0;
  right: 40px;
  height: 12px;
  background-image: linear-gradient(transparent, var(--panel-blue));
}

.chat__form {
  margin-top: 24px;
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.chat__field {
  flex-grow: 1;
}

@media (max-width: 739.98px) {
  .chat {
    /*padding: 22px;*/
  }
}
@media (max-width: 739.98px) and (max-width: 349.98px) {
  .chat {
    padding-left: 32px;
    padding-left: var(--container-h-padding);
    padding-right: 32px;
    padding-right: var(--container-h-padding);
  }
}
@media (max-width: 739.98px) {
  .chat__window {
    /*position: relative;*/
  }
  .chat__scroll {
    max-height: none;
    overflow-y: visible;
  }
  .chat__ribbon {
    padding: 0;
  }
  .chat__window::before {
    display: none;
  }
  .chat__window::after {
    display: none;
  }
  .chat__form {
    /*margin-top: 24px;*/
  }
}
.message {
  position: relative;
  margin-top: 12px;
  margin-bottom: 12px;
  padding-left: 64px;
  font-size: 14px;
  line-height: 24px;
}

.message__time {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  color: var(--text-link);
  -webkit-text-decoration: none;
  text-decoration: none;
}

.message--date {
  margin-top: 24px;
  margin-bottom: 18px;
  padding-left: 0;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  color: var(--text-link);
}

.message:first-child {
  margin-top: 0;
}

.message:last-child {
  margin-bottom: 0;
}

.app-button {
  position: relative;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 94px;
  height: 44px;
  border: none;
  background-color: transparent;
  background-image: var(--button-primary-border-gradient);
  border-radius: 8px;
  padding: 1.5px;
  font-family: inherit;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 21px;
  color: var(--white-both-themes);
  letter-spacing: 0.16px;
  text-align: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  text-transform: none; /* Conflict with global styles */
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.app-button__background {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  width: 100%;
  height: 100%;
  background-image: var(--button-primary-background-gradient);
  border-radius: 7px;
  transition: background-image 100ms ease;
  transition: background-image var(--transition-hover);
}

.app-button__icon {
  flex-shrink: 0;
  margin-left: -4px;
  margin-right: -4px;
  stroke: currentColor;
}

@media (hover: hover){

.app-button:hover {
  color: var(--white-both-themes);
}
}

.app-button:focus {
  color: var(--white-both-themes);
}

@media (hover: hover){

.app-button:hover .app-button__background {
  background-image: var(--button-primary-background-hover-gradient);
}
}

.app-button:disabled,
.app-button:disabled:active {
  opacity: 0.3;
  translate: none;
  cursor: default;
}

@media (hover: hover){

.app-button:disabled:hover {
  opacity: 0.3;
  translate: none;
  cursor: default;
}
}

.app-button:disabled .app-button__background,
.app-button:disabled:active .app-button__background {
  background-image: var(--button-primary-background-gradient);
}

@media (hover: hover){

.app-button:disabled:hover .app-button__background {
  background-image: var(--button-primary-background-gradient);
}
}

.app-button--loading {
  color: transparent;
  pointer-events: none;
}

.app-button--loading .app-button__background {
  color: transparent !important;
}

.app-button--loading .app-button__icon {
  stroke: transparent; /* should be inherited from button color but sometimes Google Chrome acting buggy on this so better set it directly here */
  opacity: 0; /* if used as img tag */
}

.app-button--loading .app-button--loading {
  opacity: 0.8;
}

.app-button--loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  margin-left: -12px;
  background-color: var(--white-both-themes);
  -webkit-mask-image: url("../vectors/loading.svg");
          mask-image: url("../vectors/loading.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  animation: loading-spin 1s steps(12) infinite;
}

.app-button--secondary {
  background-color: var(--border-blue);
  background-image: none;
  color: var(--text-blue);
}

.app-button--secondary .app-button__background {
  background-image: none;
  background-color: var(--separator-blue);
  color: var(--text-blue);
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.app-button--secondary:hover .app-button__background {
  background-image: none;
  color: var(--text-blue);
  background-color: var(--separator-blue-hover);
}
}

.app-button--secondary:disabled .app-button__background,
.app-button--secondary:disabled:active .app-button__background {
  background-image: none;
  background-color: var(--separator-blue);
  color: var(--text-blue);
}

@media (hover: hover){

.app-button--secondary:disabled:hover .app-button__background {
  background-image: none;
  background-color: var(--separator-blue);
  color: var(--text-blue);
}
}

.app-button--secondary.app-button--loading::after {
  background-color: var(--text-blue);
}

.app-button--dark {
  background-color: var(--border-blue-hover);
  background-image: none;
  color: var(--text-blue);
}

.app-button--dark .app-button__background {
  background-image: none;
  background-color: var(--button-dark-background);
  color: var(--text-blue);
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.app-button--dark:hover .app-button__background {
  background-image: none;
  color: var(--text-blue);
  background-color: var(--panel-blue-hover);
}
}

.app-button--dark:disabled .app-button__background,
.app-button--dark:disabled:active .app-button__background {
  background-image: none;
  background-color: var(--button-dark-background);
  color: var(--text-blue);
}

@media (hover: hover){

.app-button--dark:disabled:hover .app-button__background {
  background-image: none;
  background-color: var(--button-dark-background);
  color: var(--text-blue);
}
}

.app-button--dark.app-button--loading::after {
  background-color: var(--text-blue);
}

.app-button--light {
  background-color: var(--button-light-background);
  background-image: none;
  color: var(--button-light-text) !important; /* !important is here because of the conflict */
}

.app-button--light .app-button__background {
  background-image: none;
  background-color: var(--button-light-background);
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.app-button--light:hover .app-button__background {
  background-image: none;
  background-color: var(--button-light-hover-background);
}
}

.app-button--light:disabled .app-button__background,
.app-button--light:disabled:active .app-button__background {
  background-image: none;
  background-color: var(--button-light-background);
}

@media (hover: hover){

.app-button--light:disabled:hover .app-button__background {
  background-image: none;
  background-color: var(--button-light-background);
}
}

.app-button--light.app-button--loading::after {
  background-color: var(--button-light-text);
}

.app-button--success,
.app-button--green {
  background-color: var(--success-border);
  background-image: none;
}

.app-button--success .app-button__background,
.app-button--green .app-button__background {
  background-image: none;
  background-color: var(--success-background);
  color: var(--success-text);
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.app-button--success:hover .app-button__background,
.app-button--green:hover .app-button__background {
  background-image: none;
  background-color: var(--success-hover);
}
}

.app-button--success:disabled .app-button__background,
.app-button--success:disabled:active .app-button__background,
.app-button--green:disabled .app-button__background,
.app-button--green:disabled:active .app-button__background {
  background-image: none;
  background-color: var(--success-background);
  color: var(--success-text);
}

@media (hover: hover){

.app-button--success:disabled:hover .app-button__background,
.app-button--green:disabled:hover .app-button__background {
  background-image: none;
  background-color: var(--success-background);
  color: var(--success-text);
}
}

.app-button--success.app-button--loading::after,
.app-button--green.app-button--loading::after {
  background-color: var(--success-text);
}

.app-button--warning,
.app-button--yellow {
  background-color: var(--warning-border);
  background-image: none;
}

.app-button--warning .app-button__background,
.app-button--yellow .app-button__background {
  background-image: none;
  background-color: var(--warning-background);
  color: var(--warning-text);
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.app-button--warning:hover .app-button__background,
.app-button--yellow:hover .app-button__background {
  background-image: none;
  background-color: var(--warning-hover);
}
}

.app-button--warning:disabled .app-button__background,
.app-button--warning:disabled:active .app-button__background,
.app-button--yellow:disabled .app-button__background,
.app-button--yellow:disabled:active .app-button__background {
  background-image: none;
  background-color: var(--warning-background);
  color: var(--warning-text);
}

@media (hover: hover){

.app-button--warning:disabled:hover .app-button__background,
.app-button--yellow:disabled:hover .app-button__background {
  background-image: none;
  background-color: var(--warning-background);
  color: var(--warning-text);
}
}

.app-button--warning.app-button--loading::after,
.app-button--yellow.app-button--loading::after {
  background-color: var(--warning-text);
}

.app-button--danger,
.app-button--red {
  background-color: var(--danger-border);
  background-image: none;
}

.app-button--danger .app-button__background,
.app-button--red .app-button__background {
  background-image: none;
  background-color: var(--danger-background);
  color: var(--danger-text);
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.app-button--danger:hover .app-button__background,
.app-button--red:hover .app-button__background {
  background-image: none;
  background-color: var(--danger-hover);
}
}

.app-button--danger:disabled .app-button__background,
.app-button--danger:disabled:active .app-button__background,
.app-button--red:disabled .app-button__background,
.app-button--red:disabled:active .app-button__background {
  background-image: none;
  background-color: var(--danger-background);
  color: var(--danger-text);
}

@media (hover: hover){

.app-button--danger:disabled:hover .app-button__background,
.app-button--red:disabled:hover .app-button__background {
  background-image: none;
  background-color: var(--danger-background);
  color: var(--danger-text);
}
}

.app-button--danger.app-button--loading::after,
.app-button--red.app-button--loading::after {
  background-color: var(--danger-text);
}

.app-button--transparent {
  background-image: none;
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.app-button--transparent:hover {
  background-color: var(--button-transparent-hover);
}
}

.app-button--transparent .app-button__background {
  background-image: none;
  background-color: transparent;
  color: var(--button-transparent-text);
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.app-button--transparent:hover .app-button__background {
  background-color: var(--button-transparent-background-hover);
  background-image: none;
}
}

.app-button--transparent:disabled .app-button__background,
.app-button--transparent:disabled:active .app-button__background {
  background-image: none;
  background-color: transparent;
  color: var(--button-transparent-text);
}

@media (hover: hover){

.app-button--transparent:disabled:hover .app-button__background {
  background-image: none;
  background-color: transparent;
  color: var(--button-transparent-text);
}
}

.app-button--transparent.app-button--loading::after {
  background-color: var(--button-transparent-text);
}

.app-button--darker-transparent {
  background-image: none;
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.app-button--darker-transparent:hover {
  background-color: var(--button-darker-transparent-hover);
}
}

.app-button--darker-transparent .app-button__background {
  background-image: none;
  background-color: transparent;
  color: var(--button-darker-transparent-text);
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.app-button--darker-transparent:hover .app-button__background {
  background-color: var(--button-darker-transparent-background-hover);
  background-image: none;
}
}

.app-button--darker-transparent:disabled .app-button__background,
.app-button--darker-transparent:disabled:active .app-button__background {
  background-image: none;
  background-color: transparent;
  color: var(--button-darker-transparent-text);
}

@media (hover: hover){

.app-button--darker-transparent:disabled:hover .app-button__background {
  background-image: none;
  background-color: transparent;
  color: var(--button-darker-transparent-text);
}
}

.app-button--darker-transparent.app-button--loading::after {
  background-color: var(--button-darker-transparent-text);
}

.app-button--square {
  min-width: 44px;
}

.app-button--smaller {
  height: 40px;
}

.app-button--smaller.app-button--square {
  min-width: 40px;
}

.app-button--smaller .app-button__background {
  padding-top: 8px;
  padding-bottom: 8px;
}

.app-button--smaller.app-button--square .app-button__background {
  padding-left: 0;
  padding-right: 0;
}

.app-button--micro {
  min-width: 62px;
  height: 32px;
}

.app-button--micro.app-button--square {
  min-width: 32px;
}

.app-button--micro .app-button__background {
  padding: 4px 15px;
  font-size: 14px;
}

.app-button--micro.app-button--square .app-button__background {
  padding-left: 0;
  padding-right: 0;
}

.app-button--micro.app-button--loading::after {
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
}

.app-label {
  display: block; /* In case it is being followed by button or smaller input. We want it to be on a new line. */
  width: -moz-fit-content;
  width: fit-content; /* Specify clickable area */
  padding-bottom: 6px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-blue);
}

.app-label--left-from-input {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 16px;
}

.app-label__action {
  margin: -2px;
  display: inline-flex;
  vertical-align: top;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background-color: transparent;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.app-label__action:hover {
  background-color: var(--transparent-hover);
}
}

.app-label__action-icon {
  stroke: currentColor;
  width: 16px;
  height: 16px;
}

.input {
  clear: both; /* In case there is extra-input-action above */
  position: relative;
}

.input__widget {
  vertical-align: top;
  width: 100%;
  height: 44px;
  margin: 0; /* conflict with global styles */
  padding: 8px 10px;
  background-color: var(--brand-blue); /* reset grey background in some cases, such as <select> */
  background-clip: padding-box; /* hack for iOS to make box-shadow works (same as border-radius in the past) */
  border: 2px solid var(--border-blue);
  outline: none;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 16px; /* not less than 16px (otherwise mobile browsers will zoom in on focus) */
  line-height: 24px;
  color: var(--text-blue);
  opacity: 1; /* reset select:disabled default fade on iOS */
  -webkit-tap-highlight-color: transparent;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
  transition: background-color var(--transition-hover), border-color var(--transition-hover), color var(--transition-hover);
}

.input__widget::-moz-placeholder {
  opacity: 1; /* reset opacity drop Firefox */
  color: var(--placeholder-color);
}

.input__widget::placeholder {
  opacity: 1; /* reset opacity drop Firefox */
  color: var(--placeholder-color);
}

@media (hover: hover){

.input__widget:hover {
  border-color: var(--border-blue-hover);
}
}

.input__widget:focus-visible {
  border-color: var(--border-blue-focus);
  transition: none;
  /* Conflict with global styles: */
  background-color: var(--brand-blue);
  box-shadow: none;
  border: 2px solid var(--border-blue-focus) !important;
}

.input__widget[type=password]:not(:-moz-placeholder) {
  font-family: "Tahoma", sans-serif;
  letter-spacing: 2px;
}

.input__widget[type=password]:not(:placeholder-shown) {
  font-family: "Tahoma", sans-serif;
  letter-spacing: 2px;
}

.input__widget[type=color] {
  width: 100px;
  padding: 4px 8px;
}

/* Either "appearance: none; width: 100%;" or "width: auto; to reset the width set above" */
.input__widget[type=date],
.input__widget[type=datetime-local],
.input__widget[type=week],
.input__widget[type=month],
.input__widget[type=time] {
  width: auto;
}

span.input__widget {
  display: block;
  white-space: nowrap;
}

.input__widget[readonly] {
  background-color: var(--cards-blue);
  background-image: linear-gradient(135deg, var(--cards-blue) 25%, var(--panel-blue) 25%, var(--panel-blue) 50%, var(--cards-blue) 50%, var(--cards-blue) 75%, var(--panel-blue) 75%, var(--panel-blue) 100%);
  background-size: 19.8px 19.8px;
}

.input:has(.input__icon) .input__widget {
  padding-left: 38px;
}

.input__icon {
  position: absolute;
  left: 14px;
  top: 12px;
  stroke: currentColor;
}

.input__icon[height="24"] {
  left: 12px;
  top: 10px;
}

.input--smaller .input__widget {
  height: 40px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.input--secondary .input__widget {
  background-color: var(--separator-blue);
}

.input--card-colors .input__widget {
  background-color: var(--panel-blue);
  border-color: var(--input-card-border);
}

@media (hover: hover){

.input--card-colors .input__widget:hover {
  border-color: var(--border-blue-hover);
}
}

/* Disabled */
.input__widget:disabled {
  border-color: var(--border-blue);
  background-color: var(--disabled-background);
  color: var(--disabled-color);
}

.input__widget:disabled::-moz-placeholder {
  color: var(--disabled-color);
}

.input__widget:disabled::placeholder {
  color: var(--disabled-color);
}

/* Error */
.input--error .input__widget {
  color: #D4493F;
  color: var(--error);
  border-color: #D4493F;
  border-color: var(--error);
}

@media (hover: hover){

.input--error .input__widget:hover {
  border-color: var(--border-blue-hover);
}
}

.input--error .input__widget::-moz-placeholder {
  color: #D4493F;
  color: var(--error);
}

.input--error .input__widget::placeholder {
  color: #D4493F;
  color: var(--error);
}

/* stylelint-disable */
textarea.input__widget {
  height: auto; /* user rows="" attribute to set a default height */
  min-height: 44px; /* 1 row */
  max-height: 260px; /* rows + vertical paddings + vertical borders */
  resize: vertical;
}

.input--smaller textarea.input__widget {
  height: auto;
  min-height: 40px;
  max-height: 256px; /* rows + vertical paddings + vertical borders */
}

/* stylelint-enable */
.input--code .input__widget {
  font-family: monospace;
}

.input--code textarea.input__widget {
  font-size: 12px;
  line-height: 18px;
  min-height: 44px; /* same as the original field */
  max-height: 380px; /* rows + vertical paddings + vertical borders */
}

.input--picker .input__widget,
select.input__widget {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: 50px;
  background-image: var(--chevron-down-image);
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-origin: padding-box; /* conflict with global styles */
  cursor: pointer;
}

.input--picker .input__widget {
  box-shadow: none; /* same as base, not hover input */
  border-color: var(--border-blue); /* same as base, not hover input */
  background-color: var(--input-hover-bg);
}

@media (hover: hover){

select.input__widget:hover {
  box-shadow: none; /* same as base, not hover input */
  border-color: var(--border-blue); /* same as base, not hover input */
  background-color: var(--input-hover-bg);
}
}

.input--secondary.input--picker .input__widget,
.input--secondary select.input__widget {
  background-color: var(--separator-blue);
}

@media (hover: hover){

.input--secondary.input--picker .input__widget:hover,
.input--secondary select.input__widget:hover {
  background-color: var(--input-hover-bg);
}
}

/* Disabled */
select.input__widget:disabled {
  background-color: var(--disabled-background) !important; /* override specificity from selector above */
  background-image: var(--chevron-down-disabled-image);
  cursor: default;
}

/* Error */
.input--error select.input__widget {
  background-image: var(--chevron-down-error-image);
}

@media (hover: hover){

.input--error select.input__widget:hover {
  border-color: #D4493F;
  border-color: var(--error);
}
}

.input--placeholder-is-chosen select.input__widget {
  color: var(--placeholder-color);
}

.input--placeholder-is-chosen select.input__widget:disabled {
  color: var(--disabled-color);
}

.input--placeholder-is-chosen.input--error select.input__widget {
  color: #D4493F;
  color: var(--error);
}

.input--placeholder-is-chosen select.input__widget option {
  color: var(--black-both-themes); /* Browsers on Windows inherit grey color from <select> to <option>`s. Reset it. */
}

.input:has(.input__show-password) .input__widget {
  padding-right: 44px;
}

.input__show-password {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
}

.input__show-password::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.input__show-password:hover::before {
  background-color: var(--transparent-hover);
}
}

.input__eye {
  position: relative;
  stroke: var(--text-blue);
}

.input__eye--opened {
  display: none;
}

.input__eye--closed {
  display: block;
}

.input--password-shown .input__eye--opened {
  display: block;
}

.input--password-shown .input__eye--closed {
  display: none;
}

/* e.g. remove spinner from ride along number (number type input styled as the text type input) */
.input--remove-appearance .input__widget {
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  appearance: none !important;
}

/* If above doesn't work target the spinner directly: */
.input--remove-appearance .input__widget::-webkit-outer-spin-button,
.input--remove-appearance .input__widget::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  appearance: none !important;
  margin: 0 !important;
}

/* Tiny in terms of width, e.g. ride along number */
.input--3-chars-width {
  width: 51px;
}

.input--3-chars-width .input__widget {
  text-align: center;
}

.helper,
.jd-error {
  font-size: 14px;
  line-height: 18px;
  color: var(--text-blue);
}

.helper:not(.helper--warning):not(.helper--info),
.jd-error {
  padding-top: 8px;
}

.helper--error,
.jd-error {
  color: #D4493F;
  color: var(--error);
}

.helper--faded {
  color: var(--text-gray);
}

.helper + .helper {
  padding-top: 6px;
}

.details-layout__column .form {
  padding: 24px;
}

.form__row {
  position: relative;
  margin-top: 18px;
}

.form__row:first-child {
  margin-top: 0;
}

#appointment-time-section.hidden + .form__row {
  margin-top: 0;
}

.form__split-row {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
}

.form__split-row:first-child {
  margin-top: 0;
}

.form__label {
  flex-shrink: 0;
  width: 100px;
}

.form__field-column {
  flex-grow: 1;
}

.form__submit {
  margin-top: 24px;
}

.title {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 28px;
  line-height: 35px;
}

@media (max-width: 739.98px) {
  .title {
    font-size: 24px;
    line-height: 30px;
  }
}
.title--over-section {
  margin-top: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--separator-blue);
  margin-bottom: 32px;
}

.title--over-bigger-section {
  margin-top: 0;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--separator-blue);
  margin-bottom: 32px;
  font-size: 28px;
  line-height: 35px;
}

@media (max-width: 739.98px) {
  .title--over-bigger-section {
    font-size: 28px;
    line-height: 35px;
  }
}
.title--over-smaller-section {
  margin-top: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--separator-blue);
  margin-bottom: 24px;
}

@media (max-width: 739.98px) {
  .title--over-smaller-section {
    margin-bottom: 32px;
  }
}
.editable__viewer {
  position: relative;
}

.editable__handler {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.no-edit .editable__handler {
  display: none;
}

.editable__handler::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  background-color: var(--transparent-hover);
  border-radius: 8px;
  opacity: 0;
  transition: opacity 100ms ease;
  transition: opacity var(--transition-hover);
}

@media (hover: hover){

.editable__handler:hover::before {
  opacity: 1;
}
}

.editable__pencil {
  position: relative;
  vertical-align: top;
  stroke: var(--text-blue);
  width: 20px;
  height: 20px;
}

.editable__form {
  position: relative; /* could be necessary if there are absolutely positioned elements on back-end */
  display: none;
}

.editable__actions {
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
}

/* legacy selector, but let's keep for compatability */
.jd-edit-box.error input {
  border-color: #D4493F;
  border-color: var(--error);
  color: #D4493F;
  color: var(--error);
}

.output {
  display: block; /* conflict with display inline if span tag used */
  height: 44px;
  padding: 8px 44px 8px 10px;
  background-color: var(--brand-blue);
  border: 2px solid transparent;
  border-radius: 8px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-edit .output {
  padding-right: 10px;
}

.output--password {
  font-family: "Tahoma", sans-serif;
  letter-spacing: 2px;
}

/* stylelint-disable */
.output--area {
  height: auto; /* user rows="" attribute to set a default height */
  min-height: 44px; /* 1 row */
  max-height: 260px; /* rows + vertical paddings + vertical borders */
  overflow-y: auto;
  white-space: normal;
}

/* stylelint-enable */
.wrapped-fieldset {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.link,
.wysiwyg a {
  display: inline;
  vertical-align: baseline;
  padding: 6px 0; /* Extend the clickable area and ensure the link remains clickable even if the cursor is between lines */
  background-color: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: var(--text-link);
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-transform: none; /* conflict */
  cursor: pointer;
  transition: text-decoration-color 100ms ease, color 100ms ease;
  transition: text-decoration-color var(--transition-hover), color var(--transition-hover);
}

.link--dotted {
  text-decoration-style: dashed;
}

@media (hover: hover){

.link:hover,
.wysiwyg a:hover {
  color: var(--text-link); /* conflict with global styles (had to copy this line here */
  text-decoration-color: transparent;
}
}

.link:active,
.wysiwyg a:active {
  color: var(--text-gray);
  transition: none;
}

.link:focus,
.wysiwyg a:focus {
  color: var(--text-link);
}

.link--inverted-decoration {
  text-decoration-color: transparent;
}

@media (hover: hover){

.link--inverted-decoration:hover {
  text-decoration-color: currentColor;
}
}

.link--inverted-decoration:focus {
  text-decoration-color: currentColor;
}

.link--text-alike,
.wysiwyg .link--text-alike {
  color: inherit;
}

@media (hover: hover){

.link--text-alike:hover,
.wysiwyg .link--text-alike:hover {
  color: inherit;
}
}

.link--no-hover,
.link--no-hover:active,
.wysiwyg .link--no-hover,
.wysiwyg .link--no-hover:active {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: inherit;
}

@media (hover: hover){

.link--no-hover:hover,
.wysiwyg .link--no-hover:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: inherit;
}
}

.link--fake,
.link--fake:active,
.wysiwyg .link--fake,
.wysiwyg .link--fake:active {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: inherit;
  cursor: text;
}

@media (hover: hover){

.link--fake:hover,
.wysiwyg .link--fake:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: inherit;
  cursor: text;
}
}

.documents__customer-link-heading {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 20px;
}

.documents__customer-link {
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
}

.documents__sub-heading {
  margin-top: 20px;
  margin-bottom: 0;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 20px;
}

.documents__list {
  margin-top: 4px;
  margin-bottom: 0;
  margin-left: 0; /* conflict */
  list-style: none;
  padding-left: 0;
}

.documents__item {
  margin-top: 6px;
  position: relative;
  vertical-align: top;
  padding-left: 18px;
  font-size: 14px;
  line-height: 20px;
  word-break: break-all;
}

.documents__item:first-child {
  margin-top: 0;
}

.documents__item::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  display: block;
  width: 4px;
  height: 4px;
  background-color: var(--documents-item-bullet-color);
  border-radius: 50%;
}

.documents__null {
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
}

/* Compact document management for job details columns */
.document-management-section .document-actions-bar {
  margin: 10px 0;
}
.document-management-section .document-upload-container {
  margin: 10px 0;
  padding: 12px;
  background: var(--separator-blue);
  border-radius: 6px;
  border: 1px solid var(--border-blue);
}
.document-management-section .document-upload-container.hidden {
  display: none;
}
.document-management-section .upload-fields {
  /* Warning highlight for document type selector when file is selected but type isn't */
}
.document-management-section .upload-fields .input {
  margin-bottom: 10px;
}
.document-management-section .upload-fields .warning-highlight {
  border: 2px solid var(--documents-warning-highlight-border) !important;
  box-shadow: 0 0 0 2px var(--documents-warning-highlight-shadow);
  animation: pulse-warning 1.5s infinite;
}
@keyframes pulse-warning {
  0% {
    box-shadow: 0 0 0 2px var(--documents-warning-highlight-shadow);
  }
  50% {
    box-shadow: 0 0 0 4px var(--documents-warning-highlight-shadow-hover);
  }
  100% {
    box-shadow: 0 0 0 2px var(--documents-warning-highlight-shadow);
  }
}
.document-management-section .compact-drop-zone {
  border: 1px dashed var(--documents-dropzone-border);
  border-radius: 4px;
  padding: 0; /* No padding here - moved to inner element */
  text-align: center;
  background: var(--documents-dropzone-bg);
  transition: all 0.2s ease;
  cursor: pointer;
  margin-bottom: 10px;
  position: relative;
  /**
   * FILE INPUT OVERLAY TECHNIQUE
   *
   * This invisible overlay is the key to making the dropzone clickable.
   * Instead of programmatically triggering clicks (which browsers block),
   * the file input itself covers the entire dropzone area.
   *
   * Critical properties:
   * - position: absolute - covers the parent container
   * - opacity: 0 - invisible but still interactive (NOT display:none!)
   * - z-index: 2 - sits above the text/content
   * - cursor: pointer - shows it's clickable
   *
   * Browser compatibility notes:
   * - Works in all modern browsers (Chrome, Firefox, Safari, Edge)
   * - Avoids security restrictions on programmatic file input clicks
   * - Must be hidden (display:none) when file is selected to allow remove button clicks
   */
}
@media (hover: hover){
.document-management-section .compact-drop-zone:hover {
  border-color: var(--documents-dropzone-border-hover);
  background: var(--documents-dropzone-bg-hover);
}
}
.document-management-section .compact-drop-zone.drop-zone--active {
  border-color: var(--documents-dropzone-border-active);
  background: var(--documents-dropzone-bg-active);
  border-style: solid;
}
.document-management-section .compact-drop-zone .drop-zone-content {
  position: relative; /* Establishes positioning context for the overlay */
  padding: 12px; /* Padding moved here so overlay covers entire clickable area */
}
.document-management-section .compact-drop-zone .file-input-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.document-management-section .compact-drop-zone .drop-zone-text {
  margin: 0;
  font-size: 14px;
  color: var(--text-blue);
  position: relative;
  z-index: 1;
}
.document-management-section .compact-drop-zone .drop-zone-hint {
  margin: 5px 0 0 0;
  font-size: 12px;
  color: var(--text-gray);
}
.document-management-section .compact-drop-zone .selected-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px; /* Padding moved here from parent so remove button is clickable */
}
.document-management-section .compact-drop-zone .selected-file .file-name {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.document-management-section .compact-drop-zone .selected-file .remove-file {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-gray);
  cursor: pointer;
  padding: 0;
  margin-left: 10px;
}
@media (hover: hover){
.document-management-section .compact-drop-zone .selected-file .remove-file:hover {
  color: var(--text-blue);
}
}
.document-management-section .upload-progress {
  margin: 10px 0;
}
.document-management-section .upload-progress .progress-bar {
  height: 8px;
  background: var(--documents-progress-bar-bg);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 5px;
}
.document-management-section .upload-progress .progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--documents-progress-bar-fill-start), var(--documents-progress-bar-fill-end));
  transition: width 0.3s ease;
}
.document-management-section .upload-progress .progress-status {
  font-size: 12px;
  color: var(--documents-progress-status);
  text-align: center;
}
.document-management-section .upload-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.document-management-section .documents-list-compact {
  margin-top: 12px;
}
.document-management-section .documents-list-compact .documents__sub-heading {
  margin-top: 12px;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.document-management-section .documents-list-compact .documents__item {
  margin: 6px 0;
  padding-left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.document-management-section .documents-list-compact .documents__item::before {
  content: "";
  position: absolute;
  left: 0;
  width: 3px;
  height: 3px;
  background: var(--documents-item-bullet-color);
  border-radius: 50%;
  margin-top: 8px;
}
.document-management-section .documents-list-compact .documents__item .document-type-badge {
  background: var(--documents-compact-badge-bg);
  color: var(--documents-compact-badge-text);
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 400;
  font-weight: var(--weight-medium);
}
.document-management-section .documents-list-compact .documents__null {
  color: var(--documents-compact-null);
  font-style: italic;
  font-size: 13px;
  padding-left: 12px;
}

.document-uploader {
  margin: 20px 0;
}
.document-uploader .file-upload-area {
  margin-top: 10px;
}
.document-uploader .drop-zone {
  border: 2px dashed var(--documents-dropzone-border);
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  background: var(--documents-container-bg);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}
@media (hover: hover){
.document-uploader .drop-zone:hover {
  border-color: var(--documents-dropzone-border-hover);
  background: var(--documents-dropzone-bg-hover);
}
}
.document-uploader .drop-zone.drop-zone--active {
  border-color: var(--documents-dropzone-border-active);
  background: var(--documents-dropzone-bg-active);
}
.document-uploader .drop-zone-content .icon-upload {
  font-size: 48px;
  color: var(--placeholder-color);
  margin-bottom: 10px;
}
.document-uploader .drop-zone-text {
  color: var(--text-gray);
  margin: 10px 0;
}
.document-uploader .drop-zone-hint {
  font-size: 12px;
  color: var(--text-gray);
  margin-top: 10px;
}
.document-uploader .selected-file {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.document-uploader .selected-file .icon-file {
  font-size: 24px;
  color: var(--documents-item-icon);
}
.document-uploader .selected-file .file-name {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.document-uploader .selected-file .remove-file {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-gray);
  cursor: pointer;
  padding: 0;
  margin: 0;
  line-height: 1;
}
@media (hover: hover){
.document-uploader .selected-file .remove-file:hover {
  color: var(--text-blue);
}
}
.document-uploader .upload-progress {
  margin: 20px 0;
}
.document-uploader .upload-progress .progress-bar {
  height: 20px;
  background: var(--documents-progress-bar-bg);
  border-radius: 10px;
  overflow: hidden;
}
.document-uploader .upload-progress .progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--documents-progress-bar-fill-start), var(--documents-progress-bar-fill-end));
  transition: width 0.3s ease;
  border-radius: 10px;
}
.document-uploader .upload-progress .progress-status {
  margin-top: 10px;
  text-align: center;
  color: var(--documents-progress-status);
  font-size: 14px;
}
.document-uploader .upload-actions {
  margin-top: 20px;
  text-align: right;
}
.document-uploader .upload-error {
  margin: 15px 0;
}

.document-list {
  margin: 20px 0;
}
.document-list .documents-container {
  background: var(--documents-container-bg);
  border-radius: 8px;
  padding: 15px;
}
.document-list .document-item {
  background: var(--documents-item-bg);
  border: 1px solid var(--documents-item-border);
  border-radius: 4px;
  padding: 12px 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.document-list .document-item:last-child {
  margin-bottom: 0;
}
.document-list .document-item .document-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.document-list .document-item .document-info .icon-document {
  font-size: 20px;
  color: var(--documents-item-icon);
}
.document-list .document-item .document-info .document-name {
  font-weight: 400;
  font-weight: var(--weight-medium);
  color: var(--documents-item-name);
}
.document-list .document-item .document-info .document-type {
  background: var(--documents-item-badge-bg);
  color: var(--documents-item-badge-text);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  margin-left: 10px;
}
.document-list .document-item .document-info .document-date {
  color: var(--documents-item-date);
  font-size: 12px;
}
.document-list .document-item .document-actions {
  display: flex;
  gap: 10px;
}
.document-list .document-item .document-actions button {
  background: none;
  border: 1px solid var(--documents-item-button-border);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}
@media (hover: hover){
.document-list .document-item .document-actions button:hover {
  background: var(--documents-item-button-hover-bg);
  border-color: var(--documents-item-button-hover-border);
}
}
.document-list .document-item .document-actions button.view-document {
  color: var(--documents-item-button-view-color);
  border-color: var(--documents-item-button-view-border);
}
@media (hover: hover){
.document-list .document-item .document-actions button.view-document:hover {
  background: var(--documents-item-button-view-hover-bg);
}
}
.document-list .document-item .document-actions button.download-document {
  color: var(--documents-item-button-download-color);
  border-color: var(--documents-item-button-download-border);
}
@media (hover: hover){
.document-list .document-item .document-actions button.download-document:hover {
  background: var(--documents-item-button-download-hover-bg);
}
}
.document-list .no-documents {
  text-align: center;
  padding: 40px 20px;
  color: var(--documents-empty-text);
}
.document-list .no-documents .icon-empty {
  font-size: 48px;
  margin-bottom: 10px;
}
.document-list .no-documents p {
  margin: 0;
}

.release-documents-manager {
  margin: 20px 0;
}
.release-documents-manager .section-header {
  margin-bottom: 20px;
}
.release-documents-manager .section-header h3 {
  margin-bottom: 15px;
  color: var(--documents-section-heading);
}
.release-documents-manager .required-documents-alert {
  margin-bottom: 20px;
}
.release-documents-manager .required-documents-alert .alert {
  border-radius: 8px;
  padding: 15px;
  background: var(--documents-alert-bg);
  border: 1px solid var(--documents-alert-border);
}
.release-documents-manager .required-documents-alert .alert strong {
  display: block;
  margin-bottom: 10px;
  color: var(--documents-alert-strong);
}
.release-documents-manager .required-documents-alert .required-documents-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.release-documents-manager .required-documents-alert .required-document-item {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--documents-alert-item-bg);
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--documents-alert-item-border);
  font-size: 14px;
}
.release-documents-manager .required-documents-alert .required-document-item .icon-warning {
  color: var(--documents-alert-item-icon);
  font-size: 16px;
}
.release-documents-manager .document-upload-section {
  background: var(--documents-section-bg);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px var(--documents-section-shadow);
}
.release-documents-manager .document-upload-section h4 {
  margin-bottom: 15px;
  color: var(--documents-section-heading);
}
.release-documents-manager .document-list-section {
  background: var(--documents-section-bg);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px var(--documents-section-shadow);
}

/* Dropoff Location */
.dropoff-location {
  margin-top: 0;
  padding: 12px;
  background: var(--separator-blue);
  border-radius: 6px;
  border: 1px solid var(--border-blue);
}
.dropoff-location .dropoff-location__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dropoff-location .dropoff-location__info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dropoff-location .dropoff-location__text {
  font-size: 14px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  color: var(--text-blue);
}
.dropoff-location .dropoff-location__link {
  font-size: 14px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.dropoff-location .dropoff-location__coordinates {
  font-size: 12px;
  color: var(--text-gray);
  font-family: monospace;
}
.dropoff-location .dropoff-location__map-container {
  position: relative;
  margin-top: 12px;
  height: 200px;
  border-radius: 6px;
  overflow: hidden;
}
.dropoff-location .dropoff-location__map {
  width: 100%;
  height: 100%;
}
.dropoff-location .dropoff-location__map .gm-control-active {
  width: 28px !important;
  height: 28px !important;
}
.dropoff-location .dropoff-location__map .gm-control-active img {
  width: 12px !important;
  height: 12px !important;
}
.dropoff-location .dropoff-location__map .gmnoprint > div {
  width: 28px !important;
}
.dropoff-location .dropoff-location__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}
.dropoff-location .dropoff-location__pin .map-circle {
  width: 20px;
  height: 20px;
  background-color: #4285F4;
  background-color: var(--pin-fill-color, #4285F4);
  border: 3px solid #fff;
  border: 3px solid var(--pin-border-color, #fff);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.date-time-range {
  display: flex;
  flex-wrap: wrap; /* Wrappable on the first level if there is not enough space */
  gap: 4px 8px;
  align-items: center;
}

.date-time-range__item {
  display: flex;
  gap: 6px;
  align-items: center;
}

.date-time-range .app-label {
  padding-bottom: 0;
}

@media (min-width: 1500px) {
  /* making inputs smaller to fit in one line at least on big screens: */
  .date-time-range__item .input--picker .input__widget,
  .date-time-range__item select.input__widget {
    padding-left: 8px;
    padding-right: 32px;
    background-position: right 6px center;
    background-size: 20px 20px;
  }
}
.service-details {
  margin-top: 0; /* conflict */
  padding: 24px;
  padding: var(--dialog-padding);
}

.service-details__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 30px;
  line-height: 34px;
}

.service-details__type {
  margin-top: 6px;
  font-size: 18px;
  line-height: 24px;
}

.service-details__actions {
  margin-top: 24px;
}

/* Width calculation. Changing the code below also change similar piece for expense-override */
.service-details {
  width: 600px; /* it supposed to be "max-width: 700px" but there is not enough content inside to reach it. So inline-block above shrinks it. */
}

@media (max-width: 639.98px) {
  .service-details {
    width: 100%;
  }
}
/* If 3rd button with [data-disposition="remove override"] is visible, there is not enough space for it. Make modal wider: */
.service-details:has(.app-button[data-disposition="remove override"]:not(.hidden)) {
  width: 700px;
}

@media (max-width: 739.98px) {
  .service-details:has(.app-button[data-disposition="remove override"]:not(.hidden)) {
    width: 100%;
  }
}
.actions-bar {
  display: flex;
  align-items: center;
  justify-content: center; /* in case buttons width will be limited */
  flex-wrap: wrap;
  gap: 12px;
}

.actions-bar .app-button {
  flex-grow: 1;
  width: auto;
}

.actions-bar .app-button:only-child {
  max-width: 200px;
}

@media (max-width: 739.98px) {
  .actions-bar--vertical-on-smartphone {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
}
.next-step__label {
  font-size: 18px;
  line-height: 24px;
}

.next-step__actions {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.next-step__item {
  position: relative;
  padding-left: 20px;
}

.next-step__item::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  display: block;
  width: 4px;
  height: 4px;
  background-color: currentColor;
  border-radius: 50%;
}

.next-step__link {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 16px;
  line-height: 22px;
  color: var(--text-link);
  text-decoration: underline;
  -webkit-text-decoration: underline solid currentColor;
          text-decoration: underline solid currentColor;
  text-decoration-thickness: 1px;
  -webkit-text-decoration: 1px underline currentColor;
          text-decoration: 1px underline currentColor;
  text-underline-offset: 4px;
  transition: text-decoration-color 100ms ease;
  transition: text-decoration-color var(--transition-hover);
}

@media (hover: hover){

.next-step__link:hover {
  text-decoration-color: transparent;
}
}

.viewer {
  padding: 24px;
  padding: var(--dialog-padding);
}

.viewer__file-name {
  margin-top: -8px;
  margin-bottom: 0;
  padding-right: 36px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 18px;
  line-height: 28px;
  max-width: calc(100svw - 2 * 48px - 2 * 24px);
  max-width: calc(100svw - 2 * var(--popup-padding) - 2 * var(--dialog-padding));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewer__stage {
  margin-top: 18px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.viewer__image {
  vertical-align: top;
  max-width: calc(100svw - 2 * 48px - 2 * 24px);
  max-width: calc(100svw - 2 * var(--popup-padding) - 2 * var(--dialog-padding));
  max-height: calc(100svh - 2 * 48px - 2 * 24px - 150px);
  max-height: calc(100svh - 2 * var(--popup-padding) - 2 * var(--dialog-padding) - 150px); /* 150px is the summary height of header, navigation, actions and vertical margins */
  min-width: 200px;
  min-height: 200px;
  -o-object-fit: contain;
     object-fit: contain;
}

.viewer__navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.viewer__counter {
  font-size: 14px;
  color: #666666;
  color: var(--color-text-secondary, #666666);
  min-width: 60px;
  text-align: center;
}

.viewer__actions {
  margin-top: 20px;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 739.98px) {
  .viewer__file-name {
    margin-top: -2px;
    font-size: 15px;
    line-height: 22px;
  }
  .viewer__stage {
    margin-top: 16px;
  }
  .viewer__image {
    max-height: calc(100svh - 2 * 48px - 148px);
    max-height: calc(100svh - 2 * var(--popup-padding) - 148px); /* 148px: summary height of vertical spacings around image including navigation */
  }
  .viewer__navigation {
    margin-top: 12px;
    gap: 12px;
  }
  .viewer__nav-button {
    width: 36px;
    height: 36px;
  }
  .viewer__counter {
    font-size: 13px;
    min-width: 50px;
  }
}
.payment-instructions {
  max-width: 874px;
  padding: 24px calc(1.5 * 24px);
  padding: var(--dialog-padding) calc(1.5 * var(--dialog-padding));
}

.payment-instructions__heading {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 32px;
  margin-right: 32px;
  text-align: center;
}

.payment-instructions__note {
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 22px;
  color: var(--text-gray);
  text-align: center;
}

.payment-instructions__body {
  margin-top: 12px;
}

.payment-instructions__section-heading {
  margin-top: 24px;
  margin-bottom: 0;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 20px;
  line-height: 26px;
}

.payment-instructions__section-heading:first-child,
i + .payment-instructions__section-heading {
  margin-top: 0;
}

.payment-instructions__list {
  margin-top: 8px;
  padding-left: 0;
  margin-left: 0; /* conflict */
  list-style: none;
}

.payment-instructions__list-item {
  margin-top: 6px;
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 21px;
}

.payment-instructions__list-item::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 9px;
  display: block;
  width: 4px;
  height: 4px;
  background-color: var(--text-blue);
  border-radius: 50%;
}

.payment-instructions__phone {
  margin-top: 24px;
  display: flex;
  align-items: stretch;
  margin-left: 24px;
  margin-right: 24px;
}

.payment-instructions__digit {
  flex-basis: 0;
  flex-grow: 1;
  margin-left: -1px;
  border: 1px solid currentColor;
  padding-top: 8px;
  padding-bottom: 8px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 24px;
  line-height: 26px;
  text-align: center;
}

.payment-instructions__digit:first-child {
  margin-left: 0;
}

.payment-instructions__digit--separator {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.payment-instructions__copying {
  margin-top: 24px;
}

.payment-instructions__actions {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.payment-instructions__actions .app-button:only-child {
  min-width: 200px;
}

.payment-instructions__actions .app-button__background {
  padding-left: 30px;
  padding-right: 30px;
}

@media (max-width: 739.98px) {
  .payment-instructions {
    padding-left: 24px;
    padding-left: var(--dialog-padding);
    padding-right: 24px;
    padding-right: var(--dialog-padding);
    padding-bottom: 32px;
  }
  .payment-instructions__heading {
    margin-left: 0;
    text-align: left;
  }
  .payment-instructions__note {
    margin-top: 12px;
    font-size: 15px;
    line-height: 20px;
    text-align: left;
  }
  .payment-instructions__body {
    margin-top: 16px;
  }
  .payment-instructions__section-heading {
    font-size: 18px;
    line-height: 22px;
  }
  .payment-instructions__list {
    list-style: none;
  }
  .payment-instructions__list-item {
    padding-left: 20px;
    font-size: 14px;
    line-height: 20px;
  }
  .payment-instructions__list-item::before {
    left: 6px;
  }
  .payment-instructions__phone {
    margin-left: calc(-1 * 24px);
    margin-left: calc(-1 * var(--dialog-padding));
    margin-right: calc(-1 * 24px);
    margin-right: calc(-1 * var(--dialog-padding));
  }
  .payment-instructions__actions {
    display: flex;
    flex-direction: column;
  }
  .payment-instructions__actions .app-button {
    width: 100%;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
  }
}
.identity__field {
  position: relative;
  margin-top: 32px;
}

.vehicle-info .identity__field {
  padding-top: 0; /* conflict */
}

.identity__field.xml-import-needs-attention {
  padding: 10px;
  margin: 22px -10px -10px;
  box-shadow: 0 0 0 3px #D4493F;
  box-shadow: 0 0 0 3px var(--error);
  border-radius: 12px;
}

.identity__field[data-field-name]::before,
.identity__field [data-field-name]::before {
  content: "";
  position: absolute;
  right: 100%;
  margin-right: 12px;
  top: 4px;
  bottom: 0;
  width: 20px;
  height: 20px;
  background-color: var(--accent-blue-border);
  -webkit-mask-image: url("../vectors/question-gray-dashed.svg");
          mask-image: url("../vectors/question-gray-dashed.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
}

.identity__field[data-field-name].has-data::before,
.identity__field [data-field-name].has-data::before {
  background-color: var(--text-link);
  -webkit-mask-image: url("../vectors/check-orange.svg");
          mask-image: url("../vectors/check-orange.svg");
}

/* This one is getting sucked up into the selector above because it also has attribute [data-field-name] */
.app-panel:has(.questions)::before {
  display: none;
}

/* This specific field has a complicated logic of dependant sub-fields and few of them may have a class has-data,
   so we decided to just remove completion icon:
*/
.honk_control_vehicle_search_policy::before,
.honk_control_vehicle_search_policy [data-field-name]::before {
  display: none;
}

/* Address field + Map on Job Details page  */
.details-layout .locating .identity__field::before {
  display: none;
}

.identity__field--sub-question {
  position: relative;
  padding-left: 32px;
  animation: slideDownKeyframes 1200ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: var(--slide-down-animation);
}

.identity__field--sub-question.xml-import-needs-attention {
  padding-left: 42px;
}

.identity__field--sub-question::after {
  content: "";
  position: absolute;
  left: 4px;
  top: -15px;
  display: block;
  width: 20px;
  height: 40px;
  margin: 0 !important; /* conflict */
  background-color: var(--text-blue);
  -webkit-mask-image: url("../vectors/20x40-sub-question.svg");
          mask-image: url("../vectors/20x40-sub-question.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left top;
          mask-position: left top;
}

.identity__field--sub-question.xml-import-needs-attention::after {
  left: 14px;
  top: -5px;
}

/* See scheduled-service-datepicker-container in lockbox vechile details */
.identity__field--sub-question:not(:has(.identity__heading))::after {
  top: -8px;
}

.identity__heading {
  margin-bottom: 24px;
  position: relative;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 18px;
  line-height: 28px;
}

.identity__heading .show-help-script {
  border: none;
}

.identity__widget {
  margin-top: 24px;
  max-width: 510px;
}

.identity__widget--full-width {
  max-width: none;
}

.popup .identity__widget {
  max-width: none;
}

.identity__addition {
  margin-top: 24px;
}

@media (max-width: 739.98px) {
  .identity {
    display: grid;
  }
  .identity__field[data-field-name]::before,
  .identity__field [data-field-name]::before {
    top: 6px;
    margin-right: 0;
    width: 16px;
    height: 16px;
  }
  .identity__heading {
    margin-bottom: 18px;
  }
  .identity__widget {
    margin-top: 18px;
  }
}
.options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
}

.options__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0; /* conflict */
  border: 1.5px solid var(--border-blue);
  padding: 10.5px 15px 10.5px 13px;
  background-color: var(--separator-blue);
  border-radius: 8px;
  font-family: inherit;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  color: var(--text-blue);
  text-transform: none; /* conflict */
  cursor: pointer;
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.options__item:hover {
  background-color: var(--separator-blue-hover);
}
}

.options__icon {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  /* use SVG instead of border to create better 1.67px thick line: */
  background-color: var(--text-blue);
  -webkit-mask-image: var(--choice-radio-image);
          mask-image: var(--choice-radio-image);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* This <span> is needed to get rid of flex effect,
   in case there will be <br>, <nobr> or any other tags inside
 */
.options .hint-handler {
  top: 0;
}

/* 1) "options__item--selected" is expected class
   2) "option" and "selected" are legacy classes but JS works with them currently
*/
@media (hover: hover){
.options__item--selected:hover,
.options__item.option.selected:hover {
  background-color: var(--separator-blue);
}
}

.options__item--selected .options__icon,
.options__item.option.selected .options__icon {
  -webkit-mask-image: var(--choice-radio-checked-image);
          mask-image: var(--choice-radio-checked-image);
}

.options--smaller .options__item {
  padding-top: 8.5px;
  padding-bottom: 8.5px;
}

.options--multiple .options__icon {
  background-image: var(--choice-checkbox-image);
}

.options--multiple .options__item--selected .options__icon,
.options--multiple .options__item.option.selected .options__icon {
  background-image: var(--choice-checkbox-checked-image);
}

.request {
  position: relative;
}

.request__wrap {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 15fr) minmax(0, 6fr);
  grid-gap: 80px;
  gap: 80px;
}

.request__body {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 32px;
}

.request__show-sidebar {
  display: none;
}

/* Originally, there were two different screens with slides:
 - Column with 3 main steps
 - Column with verification screen
   so this layout is kept for compatibility:
 */
.request__wrapper-for-columns {
  flex-grow: 1;
}

.request__steps-column {
  height: 100%;
}

.request__steps-container {
  position: relative;
  height: 100%;
}

.request__section {
  position: relative;
  height: 100%;
  display: none;
}

.request__verification-column {
  height: 100%;
  display: none;
}

.request__footer {
  padding-top: 64px;
  padding-bottom: 32px;
}

/* optional: */
.request__footer--sticky {
  position: sticky;
  z-index: 100;
  bottom: 0;
}

.request__navigation {
  display: flex;
  align-items: center;
  background-color: var(--bg-blue-darkest);
  border: 2px solid var(--bg-blue-border);
  border-radius: 14px;
  padding: 32px;
  gap: 14px;
}

.request__save {
  margin-left: auto;
}

.request__navigation .app-button {
  width: 100%;
  min-width: 152px;
}

.request__sidebar {
  /* this is the context for the sticky part below */
  position: relative;
}

.request__detachable-part {
  position: sticky;
  top: 0;
}

.request__side-padding {
  height: 100%;
  padding-top: 32px;
  padding-bottom: 32px;
}

.request__side-container {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  background-color: var(--panel-blue);
  border-radius: 14px;
}

@media (min-width: 740px) {
  .request__side-container::before,
  .request__side-container::after {
    content: "";
    position: absolute;
    z-index: 10;
    left: 0;
    right: 24px;
    height: 20px;
    height: var(--fader);
    transition: opacity 100ms ease;
    pointer-events: none;
  }
  .request__side-container::before {
    top: 15px;
    background-image: linear-gradient(var(--panel-blue), transparent);
  }
  .request__side-container::after {
    bottom: 15px;
    background-image: linear-gradient(transparent, var(--panel-blue));
  }
}
.request__summary {
  margin-top: 29px;
  margin-right: -12px;
  padding: 16px 12px 24px 0;
  flex-grow: 1;
  overflow-y: auto;
}

.request__summary:first-child {
  margin-top: 0;
}

.request__sidebar-heading {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cards-blue);
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 28px;
  line-height: 35px;
}

.request__close-sidebar {
  display: none;
}

.request__cross {
  vertical-align: top;
  stroke: var(--text-blue);
}

.request__side-widget {
  margin-top: 32px;
}

.request__side-widget + .request__side-widget {
  margin-top: 20px;
}

.request__summary .app-panel {
  padding: 0;
}

@keyframes orderSectionSlideBackward {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes orderSectionSlideForward {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}
.request[data-direction=backward] {
  --order-sections-slide-animation: orderSectionSlideBackward 1200ms var(--ease-out-quint);
}

.request[data-direction=forward] {
  --order-sections-slide-animation: orderSectionSlideForward 1200ms var(--ease-out-quint);
}

/* Original here was simpler selector: ".show-1"
 * but during 2025ui redesign it's change to: ":has(.show-1)"
 * in order to move context higher in the DOM tree.
 * In other words buttons such as ".request__next" or ".request__done"
 * they are not inside of .show-1 anymore
 */
.request:has(.show-1) .sec-1 {
  display: block;
  animation: var(--order-sections-slide-animation);
}

/* Original here was simpler selector: ".show-2"
 * but during 2025ui redesign it's change to: ":has(.show-2)"
 * in order to move context higher in the DOM tree.
 * In other words buttons such as ".request__next" or ".request__done"
 * they are not inside of .show-2 anymore
 */
.request:has(.show-2) .sec-2 {
  display: block;
  animation: var(--order-sections-slide-animation);
}

/* Original here was simpler selector: ".show-3"
 * but during 2025ui redesign it's change to: ":has(.show-3)"
 * in order to move context higher in the DOM tree.
 * In other words buttons such as ".request__next" or ".request__done"
 * they are not inside of .show-3 anymore
 */
.request:has(.show-3) .sec-3 {
  display: block;
  animation: var(--order-sections-slide-animation);
}

/* 4th step. But this class is being placed few levels higher
 * Originally it was a layout change, not the 4ths step though,
 * so it is not on the same level with show-1 - show-3
 */
.verify .request__steps-column {
  display: none;
}

.verify .request__verification-column {
  display: block;
  animation: var(--order-sections-slide-animation);
}

/* buttons visibility */
.request__done {
  display: none;
}

.request__make-changes {
  display: none;
}

.request__dispatch {
  display: none;
}

/* This one may get visible via JS: */
.request__process-overage {
  display: none;
}

.request:has(.show-1) .request__back {
  display: none;
}

.request:has(.show-3) .request__next {
  display: none;
}
.request:has(.show-3) .request__done {
  display: block;
}

.request.verify {
  /* This one may get visible via JS: */
}
.request.verify .request__back {
  display: none;
}
.request.verify .request__next {
  display: none;
}
.request.verify .request__done {
  display: none;
}
.request.verify .request__make-changes {
  display: block;
}
.request.verify .request__dispatch {
  display: block;
}
@media (max-width: 739.98px) {
  .request__wrap {
    display: block;
  }
  .request__show-sidebar {
    position: absolute;
    z-index: 10;
    right: calc(-1 * 32px + 4px);
    right: calc(-1 * var(--container-h-padding) + 4px); /* +4px is just in case of android bug when horizontal scrollbar appears */
    top: 0;
    background-color: transparent;
    border: none;
    padding: 23px calc(32px - 4px) 13px 36px;
    padding: 23px calc(var(--container-h-padding) - 4px) 13px 36px;
    cursor: pointer;
    display: block;
  }
  .request__navigation {
    padding: 16px 20px;
    flex-wrap: wrap;
  }
  .request__back {
    margin-right: auto;
  }
  .request__back .app-button__label {
    display: none;
  }
  .request__save {
    flex-grow: 1;
  }
  .request__next .app-button__label {
    display: none;
  }
  .request__done .app-button__icon {
    display: none;
  }
  .request__navigation .app-button {
    min-width: 44px;
  }
  .request__make-changes .app-button__label {
    display: none;
  }
  .request__sidebar {
    position: fixed;
    z-index: 200;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--request-sidebar-background);
    backdrop-filter: blur(5px);
    display: none;
  }
  .request-expanded .request__sidebar {
    display: block;
  }
  .request__detachable-part {
    position: static;
    /*top: 0;*/
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }
  .request__side-padding {
    padding-top: 0;
    padding-bottom: 0;
  }
  @keyframes request-sidebar {
    from {
      transform: translateX(40px);
    }
    to {
      transform: translateX(0);
    }
  }
  .request__side-container {
    width: 300px;
    height: 100%;
    margin-left: auto;
    padding: 0;
    border-radius: 14px 0 0 14px;
    animation: request-sidebar 900ms cubic-bezier(0.22, 1, 0.36, 1);
    animation: request-sidebar 900ms var(--ease-out-quint); /* this animation will be triggered when this layer becomes visible */
  }
  /* Original here was simpler selector: ".show-1"
   * but during 2025ui redesign it's change to: ":has(.show-1)"
   * in order to move context higher in the DOM tree.
   * In other words buttons such as ".request__next" or ".request__done"
   * they are not inside of .show-1 anymore
   */
  /* Original here was simpler selector: ".show-2"
   * but during 2025ui redesign it's change to: ":has(.show-2)"
   * in order to move context higher in the DOM tree.
   * In other words buttons such as ".request__next" or ".request__done"
   * they are not inside of .show-2 anymore
   */
  /* Original here was simpler selector: ".show-3"
   * but during 2025ui redesign it's change to: ":has(.show-3)"
   * in order to move context higher in the DOM tree.
   * In other words buttons such as ".request__next" or ".request__done"
   * they are not inside of .show-3 anymore
   */
  /* 4th step. But this class is being placed few levels higher
   * Originally it was a layout change, not the 4ths step though,
   * so it is not on the same level with show-1 - show-3
   */
  /* buttons visibility */
  /* This one may get visible via JS: */
}
@media (max-width: 739.98px) and (min-width: 380px) {
  .request__side-container {
    width: 340px;
  }
}
@media (max-width: 739.98px) {
  .request__summary {
    margin-top: 0;
    padding: 32px 24px 40px;
  }
  .request__close-sidebar {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 96px;
    height: 85px;
    padding: 18px 0 0 24px;
    border: none;
    background-color: transparent;
    cursor: pointer;
  }
  .request__process-overage {
    flex-grow: 1;
  }
  .request.verify {
    /* This one may get visible via JS: */
  }
}
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

/* 7-8 items: */
.services:has(.services__item:nth-child(7)) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 9+ items: */
.services:has(.services__item:nth-child(9)) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.services__item {
  border: none;
  padding: 1.5px;
  background-color: var(--border-blue);
  border-radius: 8px;
  font-family: inherit;
  text-transform: none; /* conflict */
  cursor: pointer;
}

.services__background {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8.5px 15px 10.5px 13px;
  background-color: var(--separator-blue);
  border-radius: 6.5px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-blue);
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.services__item:hover .services__background {
  background-color: var(--separator-blue-hover);
}
}

/* icon can be 24x24 or 20x20, so this is the centering wrapper: */
.services__preview {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.services__icon {
  vertical-align: top;
  stroke: var(--text-blue);
}

/* This <span> is needed to get rid of flex effect,
   in case there will be <br>, <nobr> or any other tags inside
 */
.services__label {
  margin-top: 4px;
}

/* "services__item--selected" is expected class
 * "active" is legacy class but it is what JS works with at the moment
 */
.services__item--selected,
.services__item.active {
  background-image: var(--selected-gradient);
  cursor: default;
}

@media (hover: hover){

.services__item--selected:hover .services__background,
.services__item.active:hover .services__background {
  background-color: var(--separator-blue);
}
}

@media (max-width: 739.98px) {
  .services {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  }
  /* icon can be 24x24 or 20x20, so this is the centering wrapper: */
  /* This <span> is needed to get rid of flex effect,
     in case there will be <br>, <nobr> or any other tags inside
   */
}
.vehicle__output {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
}

/* There is a select .vehicle-details-from-vin-decoder used in JS to add/remove class "hidden" on the .vehicle__full-name
   Hide whole .vehicle__output if class is taking place
 */
.vehicle__output:has(.vehicle__full-name.hidden) {
  display: none;
}

.vehicle__icon {
  vertical-align: top;
  width: 22px;
  height: 22px;
  stroke: var(--text-blue);
}

.vehicle__full-name {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 18px;
  line-height: 24px;
  color: var(--text-blue);
}

.vehicle__form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.vehicle__field {
  position: relative;
}

/* Input inside can be shown/hidden using JS (class "hidden").
 * If that happen hide whole column:
 */
.vehicle__field:has(.input.hidden) {
  display: none;
}

.vehicle__field--loading::before {
  content: "";
  position: absolute;
  z-index: 10;
  top: 26px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--brand-blue-alpha-75);
}

.vehicle__field--loading::after {
  content: "";
  position: absolute;
  z-index: 20;
  top: 26px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--text-blue);
  -webkit-mask-image: url("../vectors/loading.svg");
          mask-image: url("../vectors/loading.svg");
  -webkit-mask-size: 24px 24px;
          mask-size: 24px 24px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  animation: loading-spin 1s steps(12) infinite;
}

.vehicle .error {
  display: none;
}

.model-holder,
.year-holder {
  position: relative;
}

.type-automobile .make-holder,
.type-automobile .model-holder {
  display: block;
}

.type-specialty .model-holder,
.type-specialty .make-holder {
  display: none;
}

@media (max-width: 739.98px) {
  .vehicle__form {
    display: block;
  }
  .vehicle__field {
    margin-top: 20px;
  }
  .vehicle__field:first-child {
    margin-top: 0;
  }
}
.info-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  padding: 15px 24px;
  background-size: 1376px 268px, 100% 100%;
  background-repeat: no-repeat;
  background-position: center top;
  border-radius: 14px;
}

.info-bar__icon {
  flex-shrink: 0;
}

.info-bar__message {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 20px;
  color: var(--text-blue);
  /* Possible update but hard to make a decision.
     Test more on 2+ line messages on both desktop and smartphones
     text-align: center;
  */
}

.info-bar__addition {
  font-weight: 300;
  font-weight: var(--weight-normal);
  font-size: 15px;
}

.info-bar__close {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.info-bar__close::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  display: block;
  border-radius: 50%;
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.info-bar__close:hover::before {
  background-color: var(--transparent-hover);
}
}

.info-bar__cross {
  vertical-align: top;
  width: 20px;
  height: 20px;
  stroke: var(--text-blue);
}

.info-bar--not-bold .info-bar__message {
  font-weight: 300;
  font-weight: var(--weight-normal);
  font-size: 14px;
  line-height: 18px;
}

.info-bar--neutral {
  background-image: var(--background-neutral), var(--info-bar-gradient);
}

.info-bar--success {
  background-image: var(--background-success), var(--info-bar-gradient);
}

.info-bar--warning {
  background-image: var(--background-warning), var(--info-bar-gradient);
}

.info-bar--danger {
  background-image: var(--background-danger), var(--info-bar-gradient);
}

.info-bar--simplified {
  display: block;
}

.info-bar--simplified .info-bar__icon {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
}

@media (max-width: 739.98px) {
  .info-bar__message {
    font-weight: 400;
    font-weight: var(--weight-medium);
  }
}
.questions {
  padding: 18px 16px 15px;
}

.questions__heading {
  margin-top: 18px;
  display: block;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 20px;
}

.questions__heading:first-child {
  margin-top: 0;
}

/* visibility: */
.questions .lockout-trunk-access-question {
  margin-top: 18px;
}

.questions__widget {
  margin-top: 14px;
}

.questions__widget:first-child {
  margin-top: 0;
}

.choice {
  position: relative;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 20px;
  min-height: 34px;
}

.choice__widget {
  opacity: 0;
  position: absolute;
  left: 2px;
  top: 12px;
}

.choice__label {
  position: relative;
  display: flex;
  vertical-align: top;
  padding: 7px 0 7px 30px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-blue);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.choice__widget[type=radio]:checked~.choice__label {
  cursor: default;
}

@media (hover: hover){

.choice--radio.checked .choice__label:hover {
  cursor: default;
}
}

/* frame icon */
.choice__icon {
  position: absolute;
  left: 0;
  top: 7px;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  pointer-events: none; /* Since this icon is positioned higher than label, let's make it possible to click through, so that the user interacts only with the label. For now, this icon won't generate its own cursor, for example. */
}

.choice__widget[type=checkbox] ~ .choice__icon,
.choice--checkbox .choice__icon {
  background-image: var(--choice-checkbox-image);
}

.choice__widget[type=radio] ~ .choice__icon,
.choice--radio .choice__icon {
  background-image: var(--choice-radio-image);
}

@media (hover: hover){

.choice:hover .choice__widget[type=checkbox]:not(:checked):not(:disabled)~.choice__icon,
.choice--checkbox:hover .choice__icon {
  background-image: var(--choice-checkbox-hover-image);
}
}

@media (hover: hover){

.choice:hover .choice__widget[type=radio]:not(:checked):not(:disabled)~.choice__icon,
.choice--radio:hover .choice__icon {
  background-image: var(--choice-radio-hover-image);
}
}

.choice__widget[type=checkbox]:checked ~ .choice__icon,
.choice--checkbox.checked .choice__icon {
  background-image: var(--choice-checkbox-checked-image);
}

.choice__widget[type=radio]:checked ~ .choice__icon,
.choice--radio.checked .choice__icon {
  background-image: var(--choice-radio-checked-image);
}

/* Focused */
.choice__widget:focus-visible ~ .choice__icon {
  outline: auto;
  outline-offset: 4px;
}

/* Disabled */
.choice__widget:disabled ~ .choice__label {
  cursor: default;
  /*color: var(--disabled-color);*/
  opacity: 0.5;
}

.choice__widget:disabled~.choice__icon {
  /*background-color: transparent;*/
  /*border-color: var(--input-border);*/
  opacity: 0.5;
}

@media (hover: hover){

.choice__widget:disabled~.choice__label:hover~.choice__icon {
  /*background-color: transparent;*/
  /*border-color: var(--input-border);*/
  opacity: 0.5;
}
}

.choice__widget:disabled:checked~.choice__icon {
  /*background-color: var(--input-border);*/
  /*border-color: transparent;*/
}

@media (hover: hover){

.choice__widget:disabled:checked~.choice__label:hover~.choice__icon {
  /*background-color: var(--input-border);*/
  /*border-color: transparent;*/
}
}

.choice--bolder .choice__label {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 13px;
  line-height: 20px;
}

.choice--full-width {
  width: 100%;
}

.choice--huge {
  width: 100%;
  min-width: 88px;
  min-height: 88px;
}

.choice--huge .choice__label {
  padding: 22px 40px 22px 103px;
  min-height: 88px;
  display: flex;
  align-items: center;
  background-color: var(--panel-blue);
  border-radius: 14px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 22px;
}

@media (hover: hover){

.choice--huge:hover .choice__widget[type=checkbox]:not(:disabled)~.choice__label,
.choice--huge.choice--checkbox:hover .choice__label {
  background-color: var(--panel-blue-hover);
}
}

@media (hover: hover){

.choice--huge:hover .choice__widget[type=radio]:not(:checked):not(:disabled)~.choice__label,
.choice--huge.choice--radio:not(.checked):hover .choice__label {
  background-color: var(--panel-blue-hover);
}
}

.choice--huge .choice__label::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px; /* stretch clicking area over the app-panel */
}

/* frame icon */
.choice--huge .choice__icon {
  top: 50%;
  left: 30px;
  margin-top: -22px;
  width: 44px;
  height: 44px;
}

.choice--huge .choice__widget[type=checkbox] ~ .choice__icon,
.choice--huge.choice--checkbox .choice__icon {
  background-image: var(--choice-huge-checkbox-image);
}

.choice--huge .choice__widget[type=radio] ~ .choice__icon,
.choice--huge.choice--radio .choice__icon {
  background-image: var(--choice-huge-radio-image);
}

/* inner icon */
@media (hover: hover){
.choice--huge:hover .choice__widget[type=checkbox]:not(:checked):not(:disabled)~.choice__icon,
.choice--huge.choice--checkbox:hover .choice__icon {
  background-image: var(--choice-huge-checkbox-hover-image);
}
}

@media (hover: hover){

.choice--huge:hover .choice__widget[type=radio]:not(:checked):not(:disabled)~.choice__icon,
.choice--huge.choice--radio:hover .choice__icon {
  background-image: var(--choice-huge-radio-hover-image);
}
}

.choice--huge .choice__widget[type=checkbox]:checked ~ .choice__icon,
.choice--huge.choice--checkbox.checked .choice__icon {
  background-image: var(--choice-huge-checkbox-checked-image);
}

.choice--huge .choice__widget[type=radio]:checked ~ .choice__icon,
.choice--huge.choice--radio.checked .choice__icon {
  background-image: var(--choice-huge-radio-checked-image);
}

@media (max-width: 739.98px) {
  .choice--huge {
    min-width: 80px;
    min-height: 80px;
  }
  .choice--huge .choice__label {
    padding: 18px 40px 18px 84px;
    min-height: 80px;
  }
  /* frame icon */
  .choice--huge .choice__icon {
    left: 20px;
    scale: 90%;
  }
  /* inner icon */
}
.extra-input-action {
  float: right;
  margin-top: -6px;
  display: block;
  padding: 6px 0;
  border: none;
  background-color: transparent;
  background-image: linear-gradient(to right, transparent, transparent 1px, currentColor 1px, currentColor 2px, transparent 2px, transparent);
  background-size: 3px 1px;
  background-position: left 24px;
  background-repeat: repeat-x;
  font-family: inherit;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-link);
  text-transform: none; /* conflict */
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover){

.extra-input-action:hover {
  background-image: none;
}
}

.extra-input-action--zero-height {
  margin-top: -32px;
}

.contact-consent__message {
  font-size: 15px;
  line-height: 20px;
}

.contact-consent--collapsed .contact-consent__message {
  overflow: hidden;
  max-height: 20px;
}

.contact-consent__show-more {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding: 6px 0;
  border: none;
  background-color: transparent;
  background-image: linear-gradient(to right, transparent, transparent 1px, currentColor 1px, currentColor 2px, transparent 2px, transparent);
  background-size: 3px 1px;
  background-position: left 24px;
  background-repeat: repeat-x;
  font-weight: bold;
  font-size: 13px;
  line-height: 20px;
  color: var(--text-link);
  text-transform: none; /* conflict */
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover){

.contact-consent__show-more:hover {
  background-image: none;
}
}

.contact-consent__more-label {
  display: none;
}

.contact-consent__less-label {
  display: inline;
}

.contact-consent--collapsed .contact-consent__more-label {
  display: inline;
}

.contact-consent--collapsed .contact-consent__less-label {
  display: none;
}

.contact-consent__answer {
  margin-top: 16px;
}

.xml-import-collapsible__summary {
  display: none;
  padding: 16px 20px;
  background-color: var(--separator-blue);
  border-radius: 6px;
  border: 1px solid var(--border-blue);
}

.xml-import-collapsible--collapsed .xml-import-collapsible__summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.xml-import-collapsible__icon {
  flex-shrink: 0;
  stroke: var(--text-blue);
}

.xml-import-collapsible__value {
  flex: 1;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 22px;
  color: var(--comment-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xml-import-collapsible__edit {
  flex-shrink: 0;
}

.xml-import-collapsible--collapsed .xml-import-collapsible__form {
  display: none;
}

@media (max-width: 739.98px) {
  .xml-import-collapsible__summary {
    padding: 14px 16px;
  }
  .xml-import-collapsible--collapsed .xml-import-collapsible__summary {
    flex-wrap: wrap;
  }
  .xml-import-collapsible__value {
    font-size: 15px;
    line-height: 20px;
    white-space: normal;
  }
  .xml-import-collapsible__edit {
    width: 100%;
    margin-top: 12px;
  }
  .xml-import-collapsible__edit .app-button {
    width: 100%;
  }
}
.mini-info-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 18px;
  background-size: 688px 134px, 100% 100%; /* twice as smaller size relatively to info-bar */
  background-repeat: no-repeat;
  background-position: center top;
  border-radius: 8px;
  text-align: left;
}

.mini-info-bar__icon {
  flex-shrink: 0;
  vertical-align: top;
  stroke: var(--text-blue);
  width: 20px;
  height: 20px;
}

.mini-info-bar__message {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 20px;
  color: var(--text-blue);
}

.mini-info-bar__addition {
  font-weight: 300;
  font-weight: var(--weight-normal);
  font-size: 15px;
}

.mini-info-bar--success {
  background-image: var(--background-success), var(--info-bar-gradient);
}

.mini-info-bar--warning {
  background-image: var(--background-warning), var(--info-bar-gradient);
}

.mini-info-bar--danger {
  background-image: var(--background-danger), var(--info-bar-gradient);
}

.dotted-action {
  display: flex;
  align-content: center;
  width: -moz-fit-content;
  width: fit-content;
  gap: 6px;
  border: none;
  background-color: transparent;
  font-family: inherit;
  text-transform: none; /* conflict */
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
}

.dotted-action__label {
  display: block;
  padding: 10px 0;
  background-image: linear-gradient(to right, transparent, transparent 1px, currentColor 1px, currentColor 2px, transparent 2px, transparent);
  background-size: 3px 1px;
  background-position: left 30px;
  background-repeat: repeat-x;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 15px;
  line-height: 20px;
  color: var(--text-link);
}

@media (hover: hover){

.dotted-action:hover .dotted-action__label {
  background-image: none;
}
}

.dotted-action__icon {
  flex-shrink: 0;
  vertical-align: top;
  margin-top: 12px;
  width: 16px;
  height: 16px;
  stroke: var(--text-link);
}

.policy-search-modal {
  background-color: var(--separator-blue);
  border: 1px solid var(--panel-blue-gradient-start);
  border-radius: 8px;
  overflow: hidden; /* cut scroll faders */
}

.policy-search-modal__header {
  padding: 12px 18px;
  background-color: var(--policy-search-modal-header-background);
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  display: grid;
  grid-template-columns: 3fr 5fr;
  align-items: center;
  grid-gap: 40px;
  gap: 40px;
}

.policy-search-modal__query {
  font-size: 15px;
  line-height: 20px;
}

.policy-search-modal__body {
  max-height: 314px;
  overflow-y: auto;
  padding-right: 0;
}

.policy-search-modal__body::before {
  background-image: linear-gradient(var(--separator-blue), transparent);
}

.policy-search-modal__body::after {
  background-image: linear-gradient(transparent, var(--separator-blue));
}

/* If .mini-info-bar placed directly into body it must be the case when no results found. Add margin: */
.policy-search-modal__body > .mini-info-bar {
  margin: 40px;
}

.policy-search-modal__loading {
  padding-bottom: 36px;
}

.policy-search-modal__navigation {
  padding: 6px 18px;
  background-color: var(--policy-search-modal-header-background);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 739.98px) {
  .policy-search-modal__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .policy-search-modal__navigation {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
}
.policy-vehicle {
  position: relative;
  width: 100%;
  border: none;
  background-color: transparent;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-gap: 0 24px;
  gap: 0 24px;
  padding: 12px 24px;
  font-family: inherit;
  cursor: pointer;
}

@media (hover: hover){

.policy-vehicle:hover {
  background-color: var(--policy-vehicle-hover-background);
}
}

.policy-vehicle:nth-child(odd) {
  background-color: var(--separator-blue-lighter-hover);
}

@media (hover: hover){

.policy-vehicle:nth-child(odd):hover {
  background-color: var(--policy-vehicle-odd-hover-background);
}
}

.policy-vehicle--disabled .policy-vehicle__section {
  opacity: 0.25;
}

.policy-vehicle__section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.policy-vehicle__icon {
  flex-shrink: 0;
  vertical-align: top;
  stroke: var(--text-blue);
}

.policy-vehicle__label {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-blue);
}

.policy-vehicle__error {
  grid-column: span 2;
  padding-top: 12px;
  padding-bottom: 12px;
}

.policy-vehicle__error:empty {
  display: none;
}

/* Error 1) inside of element, such as "Unable to retrieve coverage details for the vehicle" */
.policy-vehicle__null {
  padding: 16px 24px;
  border: 1px solid var(--danger-border);
  background-color: var(--danger-background);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--danger-text);
}

/* Error case 2) right inside of the body such as "No policies found for your search" */
.policy-search-modal__body > .policy-vehicle__null {
  padding: 48px 16px;
  background-color: transparent;
  border: none;
  color: inherit;
}

.mini-info-bar__icon {
  flex-shrink: 0;
  stroke: currentColor;
}

.policy-vehicle__main-error-message {
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 15px;
  line-height: 18px;
  text-align: left;
}

.policy-vehicle__extra-error-message {
  margin-top: 4px;
  font-size: 15px;
  line-height: 18px;
  text-align: left;
}

.policy-vehicle__loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--policy-vehicle-loading-background);
}

@media (max-width: 739.98px) {
  .policy-vehicle {
    display: block;
    padding-left: 18px;
    padding-right: 18px;
  }
  .policy-vehicle__section {
    margin-top: 4px;
  }
  .policy-vehicle__section:first-child {
    margin-top: 0;
  }
  .policy-vehicle__label {
    text-align: left;
  }
  .policy-vehicle__error {
    margin-top: 4px;
  }
}
.household {
  padding: 18px 24px;
}

.household__heading {
  display: block;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 18px;
  line-height: 26px;
}

.household__body {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.household__icon {
  flex-shrink: 0;
  vertical-align: top;
  width: 40px;
  height: 40px;
  stroke: var(--text-blue);
}

.household__address {
  flex-grow: 1;
  font-size: 15px;
  line-height: 20px;
}

.household__line {
  margin-top: 4px;
}

.household__line:first-child {
  margin-top: 0;
}

.app-loading {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}

.app-loading::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background-color: var(--text-blue);
  -webkit-mask-image: url("../vectors/loading.svg");
          mask-image: url("../vectors/loading.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  animation: loading-spin 1s steps(12) infinite;
}

.app-loading--horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
}

.app-loading--horizontal::before {
  margin: 0;
  width: 28px;
  height: 28px;
  margin: -4px; /* to make it same as 20x20 icon */
}

.app-loading--larger {
  font-size: 18px;
  line-height: 26px;
}

.app-loading--larger::before {
  width: 48px;
  height: 48px;
}

.app-loading--smaller {
  font-size: 14px;
  line-height: 22px;
}

.app-loading--smaller::before {
  width: 16px;
  height: 16px;
}

.coverage-details {
  position: relative;
  padding: 18px 24px 20px;
}

.coverage-details--no-coverage {
  background-color: var(--danger-background);
  border-radius: 11px;
  /* make it 2px larger so it overlaps app-panel */
  margin: -2px;
  padding: 20px 26px 22px;
}

.coverage-details__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 20px;
  line-height: 24px;
}

.coverage-details__restart-search {
  position: absolute;
  right: 24px;
  top: 15px;
}

.coverage-details__list {
  margin-top: 12px;
}

.coverage-details__item {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.coverage-details__item:first-child {
  margin-top: 0;
}

.coverage-details__term {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
}

.coverage-details__term--danger {
  color: var(--danger-text);
}

.coverage-details__definition--danger {
  font-weight: bold;
  color: var(--danger-text);
  text-transform: uppercase;
}

.coverage-details__icon {
  vertical-align: top;
  stroke: currentColor;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  margin-right: 5px;
}

.coverage-details__notes {
  margin-top: 12px;
}

.identify-car {
  display: flex;
  align-items: flex-end; /* "Farmers Fleet" account has the case with "No ID" button that pushes only one of fields down. Push all. */
  gap: 20px;
}

.identify-car__state {
  flex-shrink: 0;
}

.identify-car__value {
  flex-grow: 1;
}

.identify-car__selector-type {
  flex-shrink: 0;
}

.identify-car .identity__widget {
  margin-top: 0;
}

@media (max-width: 739.98px) {
  .identify-car {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
}
.app-card__heading {
  border-bottom: 2px solid var(--app-card-heading-border);
  padding: 18px 22px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.56px;
  text-transform: uppercase;
}

.app-card__body {
  padding: 24px 22px;
}

.service-notes {
  padding-bottom: 8px;
}

.service-notes__item {
  margin-top: 24px;
}

.service-notes__item:first-child {
  margin-top: 0;
}

.service-summary {
  margin: 0;
  list-style: none;
  padding-left: 0;
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.service-summary__item {
  position: relative;
  min-height: 20px;
  padding-left: 32px;
  /* don't use display: flex here because JS will be hiding/showing it */
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 14px;
  line-height: 20px;
  word-break: break-word;
}

.service-summary__icon {
  position: absolute;
  left: 0;
  top: 0;
  vertical-align: top;
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.summary-tow-from .service-summary__icon {
  stroke: var(--success-muted);
}

.summary-tow-from .service-summary__label {
  color: var(--success-muted);
}

.summary-tow-to .service-summary__icon {
  stroke: var(--danger-muted);
}

.summary-tow-to .service-summary__label {
  color: var(--danger-muted);
}

.summary-verify__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 28px;
  line-height: 35px;
}

.summary-verify__description {
  max-width: 940px;
  margin-top: 20px;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-gray);
}

.summary-verify__list {
  margin: 17px 0 0;
  border-top: 1px solid var(--separator-blue);
  padding-top: 32px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 739.98px) {
  .summary-verify__heading {
    font-size: 24px;
    line-height: 30px;
  }
}
.mood {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.mood__item {
  flex-grow: 1;
  flex-basis: 0;
  display: block;
  margin: 0;
  padding: 1.5px;
  border: none;
  background-color: var(--border-blue);
  border-radius: 8px;
  font-family: inherit;
  text-transform: none;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
}

.mood__background {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 14px 10px 20px;
  background-color: var(--separator-blue);
  border-radius: 6.5px;
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.mood__item:hover .mood__background {
  background-color: var(--separator-blue-lighter-hover);
}
}

.mood__label {
  margin-top: 10px;
  padding-bottom: 18px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 15px;
  line-height: 18px;
  color: var(--text-blue);
  -webkit-text-decoration: none;
  text-decoration: none;
  letter-spacing: 0.1px;
}

.mood__label:first-child {
  margin-top: auto;
}

.mood__background::after {
  flex-shrink: 0;
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin-top: -2px;
  margin-left: auto;
  margin-right: auto;
  background-color: transparent;
  border-radius: 50%;
  outline: 2px solid var(--text-blue);
  outline-offset: 3px;
}

.mood__item--selected,
.mood__item.selected {
  background-image: var(--selected-gradient);
  cursor: default;
}

@media (hover: hover){

.mood__item--selected:hover,
.mood__item.selected:hover {
  background-image: var(--selected-gradient);
  cursor: default;
}
}

.mood__item--selected .mood__background,
.mood__item.selected .mood__background {
  background-color: var(--brand-blue);
}

@media (hover: hover){

.mood__item--selected:hover .mood__background,
.mood__item.selected:hover .mood__background {
  background-color: var(--brand-blue);
}
}

.mood__item--selected .mood__background::after,
.mood__item.selected .mood__background::after {
  background-color: var(--text-blue);
}

.affixation {
  display: flex;
  align-items: center;
  gap: 16px;
}

.affixation--smaller-gap {
  gap: 10px;
}

.affixation__affix {
  flex-shrink: 0;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px; /* not less than 16px (otherwise mobile browsers will zoom in on focus) */
  line-height: 24px;
}

.affixation__widget {
  flex-grow: 1;
}

.button-alike-notification {
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  gap: 10px;
  min-width: 94px;
  height: 44px;
  border: 1.5px solid var(--success-border);
  padding: 10px 12px;
  background-color: var(--success-background);
  border-radius: 8px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 21px;
  color: var(--success-text);
  letter-spacing: 0.16px;
  text-align: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  white-space: nowrap;
}

.button-alike-notification__icon {
  vertical-align: top;
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.tow-distance-note {
  display: none;
  padding-top: 16px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 17px;
  line-height: 24px;
  color: var(--success-muted);
}

.tow-distance-note strong {
  font-weight: bold;
}

.venue {
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 17px;
  line-height: 24px;
}

.venue__openness {
  float: right;
  margin-left: 20px;
  margin-bottom: 8px;
}

.venue__heading {
  margin-top: 4px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 20px;
}

.venue__heading .score {
  margin-left: 8px;
}

.venue__address {
  margin-top: 8px;
  font-size: 15px;
  line-height: 18px;
}

.venue__distance {
  margin-top: 8px;
  font-size: 15px;
  line-height: 18px;
}

.venue__contacts {
  margin-top: 8px;
  font-size: 14px;
  line-height: 18px;
}

.state-pill {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  border: 1.5px solid;
  padding: 2.5px 6px;
  border-radius: 11.5px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  white-space: nowrap;
  text-transform: capitalize;
}

.state-pill--success,
.state-pill--complete,
.state-pill--completed,
.state-pill--active,
.state-pill--green {
  border-color: var(--success-border);
  background-color: var(--success-background);
  color: var(--success-text);
}

.state-pill--warning,
.state-pill--orange,
.state-pill--pending {
  border-color: var(--state-pill-warning-border);
  background-color: var(--state-pill-warning-background);
  color: var(--state-pill-warning-text);
}

.state-pill--danger,
.state-pill--cancelled,
.state-pill--red {
  border-color: var(--danger-border);
  background-color: var(--danger-background);
  color: var(--danger-text);
}

.state-pill--scheduled,
.state-pill--gray,
.state-pill--grey {
  border-color: var(--state-pill-scheduled-border);
  background-color: var(--state-pill-scheduled-background);
  color: var(--state-pill-scheduled-text);
}

.state-pill--new {
  border-color: var(--state-pill-new-border);
  background-color: var(--state-pill-new-background);
  color: var(--state-pill-new-text);
}

.state-pill--verifying,
.state-pill--processing,
.state-pill--blue {
  border-color: var(--state-pill-verifying-border);
  background-color: var(--state-pill-verifying-background);
  color: var(--state-pill-verifying-text);
}

.state-pill--searching {
  border-color: var(--state-pill-searching-border);
  background-color: var(--state-pill-searching-background);
  color: var(--state-pill-searching-text);
}

.state-pill--dispatched,
.state-pill--at_disablement,
.state-pill--at_destination,
.state-pill--purple {
  border-color: var(--state-pill-dispatched-border);
  background-color: var(--state-pill-dispatched-background);
  color: var(--state-pill-dispatched-text);
}

.state-pill--yellow {
  border-color: var(--state-pill-yellow-border);
  background-color: var(--state-pill-yellow-background);
  color: var(--state-pill-yellow-text);
}

.state-pill--black {
  border-color: white;
  background-color: black;
  color: white;
}

.list,
.wysiwyg ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0; /* conflict */
}

.list__item,
.list li,
.wysiwyg ul li {
  margin-top: 0.25em;
  margin-bottom: 0; /* conflict */
  position: relative;
  padding-left: 24px;
}

.list__item:first-child,
.list li:first-child,
.wysiwyg ul li:first-child {
  margin-top: 0;
}

.list__item::before,
.list li::before,
.wysiwyg ul li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0.66em;
  width: 4px;
  height: 4px;
  background-color: currentColor;
  border-radius: 50%;
}

.list__item .list__item::before,
.list li .list li::before,
.wysiwyg ul li li::before {
  margin-top: 0.5px;
  margin-left: 0.5px;
  width: 3px;
  height: 3px;
  background-color: transparent;
  box-shadow: 0 0 0 1px currentColor;
}

/* not in WYSIWYG */
.list {
  margin-top: 0;
  margin-bottom: 0;
}

.hint-handler {
  position: relative;
  top: -0.075em;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  background-color: transparent;
  width: 40px;
  height: 40px;
  margin: -10px;
  cursor: pointer;
}

/* hover */
.hint-handler::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border-radius: 50%;
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.hint-handler:hover:before {
  background-color: var(--transparent-hover);
}
}

.hint-handler__icon {
  vertical-align: top;
  position: relative;
  stroke: var(--text-link);
  width: 16px;
  height: 16px;
}

.hint-handler--white .hint-handler__icon {
  stroke: var(--text-blue);
}

.hours__item {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 128px) auto;
}

.hours__item:first-child {
  margin-top: 0;
}

.hours__label {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-blue);
}

.hours__fields {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.garage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

@media (max-width: 739.98px) {
  .garage {
    display: block;
  }
  .garage__field {
    margin-top: 20px;
  }
  .garage__field:first-child {
    margin-top: 0;
  }
}
.scheduling {
  padding-top: 32px;
}

.scheduling__helper {
  margin-top: 16px;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-blue);
}

.scheduling__operations {
  margin-top: 16px;
}

.errors-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.errors-list__item {
  margin-top: 10px;
  margin-bottom: 0 !important; /* conflict */
  font-size: 16px;
  line-height: 22px;
}

.errors-list__item:first-child {
  margin-top: 0;
}

.errors-list__item:only-child {
  text-align: center;
}

.section-head {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--separator-blue);
  margin-bottom: 32px;
}

.section-head__heading {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 3px;
  padding-bottom: 20px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 28px;
  line-height: 35px;
}

.section-head__actions {
  margin-left: auto;
}

@media (max-width: 739.98px) {
  .section-head {
    display: block;
    border-bottom: none;
    margin-bottom: 0;
  }
  .section-head__heading {
    padding-top: 0;
    font-size: 24px;
    line-height: 30px;
    border-bottom: 1px solid var(--separator-blue);
  }
  .section-head__actions {
    position: static;
    margin-top: 16px;
  }
  .section-head__actions .options__item {
    flex-grow: 1;
  }
}
@media (max-width: 739.98px) and (min-width: 360px) and (max-width: 373.98px) {
  .section-head__actions .options__item {
    padding-left: 10px;
    padding-right: 10px;
    gap: 4px;
  }
  .options__icon {
    scale: 90%;
  }
}
.inline-schedule {
  margin-top: 18px;
  margin-bottom: 0;
  animation: slideDownKeyframes 1200ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: var(--slide-down-animation);
}

.inline-schedule__container {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.inline-schedule__note {
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 12px;
  line-height: 20px;
  color: var(--text-gray);
}

.inline-schedule__container .scheduled-service-datepicker {
  display: block;
}

@media (max-width: 739.98px) {
  .inline-schedule__container {
    display: block;
  }
  .inline-schedule__note {
    padding: 0;
    margin-top: 16px;
  }
}
.selected-location {
  position: relative;
  padding: 22px;
}

.selected-location__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-family: inherit;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 24px;
  line-height: 30px;
}

.selected-location__body {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.selected-location__icon {
  flex-shrink: 0;
  stroke: var(--selected-location-icon-stroke);
}

.selected-location__address {
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 22px;
  color: var(--selected-location-address-color);
}

.selected-location__change {
  position: absolute;
  right: 22px;
  top: 22px;
}

.selected-location__change .app-button__background {
  padding-left: 36px;
  padding-right: 36px;
  gap: 12px;
}

@media (max-width: 739.98px) {
  .selected-location__heading {
    font-size: 22px;
    line-height: 28px;
  }
  .selected-location__body {
    margin-top: 6px;
  }
  .selected-location__change {
    position: static;
    margin-top: 32px;
  }
  .selected-location__change .app-button {
    width: 100%;
  }
}
.whereabouts {
  position: relative;
  height: 100%;
  min-height: 600px;
}

.whereabouts__front {
  position: static; /* conflict */
  height: 100%;
}

.whereabouts__back {
  display: none;
}

.whereabouts [data-field-name="vehicle_location.address"] .extra-input-action {
  float: left;
}

.whereabouts [data-field-name="vehicle_location.address"] .identity__widget {
  margin-top: 32px;
}

/* Flipping sides
 *
 * Originally backside was absolutely positioned, hidden by default and shown by class "show".
 * For now let's keep the related JS, but make Full-fledged swapping, where front side hidden as well:
 */
.whereabouts {
  min-height: 643px;
}

.whereabouts:has(.whereabouts__back.show) .whereabouts__front {
  display: none;
}

.whereabouts__back.show {
  display: block;
}

.tool-tip {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 100%;
  margin-bottom: 20px;
  padding: 9px 25px;
  background-color: var(--tooltip-background-color);
  background-image: var(--tooltip-background-gradient);
  border: 1px solid var(--tooltip-border);
  border-radius: 6px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 14px;
  line-height: 20px;
  color: var(--tooltip-text);
  text-align: center;
  white-space: nowrap;
  text-transform: none !important;
  display: none;
}

.tool-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 45px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--tooltip-arrow-border) transparent transparent transparent;
}

.tool-tip-context {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}

@media (hover: hover){

.tool-tip-context:hover .tool-tip {
  visibility: visible;
  opacity: 1;
}
}

@media (max-width: 739.98px) {
  .tool-tip {
    margin-bottom: 8px;
    padding: 9px 14px;
  }
}
@media (max-width: 739.98px) and (max-width: 349.98px) {
  .tool-tip {
    font-size: 13px;
  }
}
@media (max-width: 739.98px) {
  .tool-tip::after {
    right: 17px;
  }
}
.info-message {
  height: 100%;
  position: relative;
  border-radius: 14px;
  background-size: 1376px 268px, 100% 100%;
  background-repeat: no-repeat;
  background-position: center top;
}

.info-message--neutral {
  background-image: var(--background-neutral);
}

.info-message--success {
  background-image: var(--background-success);
}

.info-message--warning {
  background-image: var(--background-warning);
}

.info-message--danger {
  background-image: var(--background-danger);
}

.info-message__inner {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px;
}

.info-message__icon {
  vertical-align: top;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.info-message__heading {
  margin-top: 24px;
  margin-bottom: 0;
  font-family: "tt-commons-pro", sans-serif;
  font-family: var(--font);
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 20px;
  line-height: 28px;
  color: var(--text-blue); /* Conflict */
  text-align: center;
}

.info-message__description {
  max-width: 500px;
  margin: 20px auto 0;
  font-size: 16px;
  line-height: 22px;
  color: var(--text-blue); /* Conflict */
  text-align: center;
}

.info-message__addition {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 22px;
  color: var(--text-blue); /* Conflict */
  text-align: center;
}

.info-message__action {
  margin-top: 30px;
}

.info-message__action .app-button__background {
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 739.98px) {
  .info-message__inner {
    padding: 24px;
  }
}
.fancy-list {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0 !important; /* conflict */
  padding-left: 0;
  list-style: none;
}

.fancy-list__item {
  margin-top: 5px !important; /* !important is in here because of the conflict */
  margin-bottom: 0 !important; /* conflict */
  padding-left: 14px;
  background-image: url("../vectors/fancy-list-bullet@2x.png");
  background-size: 6px 6px;
  background-repeat: no-repeat;
  background-position: 0 8px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 15px;
  line-height: 20px;
}

.fancy-list__item:first-child {
  margin-top: 0;
}

.service-option__action .app-button {
  width: 100%;
}

.service-option {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 22px;
}

.service-option__body {
  padding-bottom: 46px;
}

.service-option__action {
  margin-top: auto;
}

.service-variants {
  width: 908px;
  color: var(--text-blue); /* conflict */
}

.service-variants__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-family: inherit;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 28px;
  line-height: 35px;
  color: var(--text-blue);
  text-align: center;
}

.service-variants__body {
  margin-top: 53px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.service-variants__footer {
  margin-top: 40px;
  display: flex;
  align-content: center;
  justify-content: center;
}

.service-variants__footer .app-button__background {
  padding-left: 20px;
  padding-right: 20px;
}

.service-variants__footer .close-modal {
  position: static;
}

@media (max-width: 739.98px) {
  .service-variants {
    width: 500px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
@media (max-width: 739.98px) and (max-width: 539.98px) {
  .service-variants {
    width: 100%;
  }
}
@media (max-width: 739.98px) {
  .service-variants__heading {
    font-size: 24px;
    line-height: 30px;
  }
  .service-variants__body {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .service-variants__footer {
    margin-top: 30px;
  }
}
.critical-information {
  width: 700px;
  padding: 54px 40px 60px;
}

.critical-information__question {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  text-align: center;
}

.critical-information__answer {
  margin-top: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

.critical-information__answer .app-button {
  min-width: 140px;
}

.critical-information__addition {
  margin-top: 32px;
}

@keyframes critical-information-slide-left {
  from {
    opacity: 0.2;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
.critical-information__addition {
  display: none;
}

.critical-information__addition--expanded {
  display: block;
  animation: critical-information-slide-left 200ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: critical-information-slide-left 200ms var(--ease-out-quint);
}

.critical-information__anyways {
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  max-width: 292px;
}

.critical-information__anyways .app-button {
  width: 100%;
}

.critical-information__footer {
  margin-top: 10px;
  margin-bottom: -30px;
  display: flex;
  justify-content: center;
}

@media (max-width: 739.98px) {
  .critical-information {
    width: 500px;
    padding: 24px 20px 40px;
  }
}
@media (max-width: 739.98px) and (max-width: 539.98px) {
  .critical-information {
    width: 100%;
  }
}
@media (max-width: 739.98px) {
  .critical-information__question {
    font-size: 18px;
    line-height: 24px;
  }
}
.not-feeling-safe__include {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300;
  font-weight: var(--weight-normal);
  font-size: 18px;
  line-height: 24px;
  color: var(--not-feeling-safe-include-color);
}

.not-feeling-safe__contains {
  margin-top: 6px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 15px;
  line-height: 20px;
}

.not-feeling-safe__message {
  margin-top: 28px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 15px;
  line-height: 20px;
  color: var(--not-feeling-safe-message-color);
}

.current-location {
  padding: 20px 20px 24px;
  background-color: var(--panel-blue);
  background-image: var(--current-location-background-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 8px;
}

.current-location__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 24px;
  line-height: 30px;
}

.current-location__address {
  margin-top: 8px;
  font-size: 14px;
  line-height: 22px;
}

@media (max-width: 739.98px) {
  .current-location {
    padding: 14px 14px 13px;
  }
  .current-location__heading {
    font-size: 18px;
    line-height: 23px;
  }
  .current-location__address {
    font-size: 14px;
    line-height: 20px;
  }
}
.nearby-locations {
  width: calc(100svw - 2 * 48px - 4px - 20px);
  width: calc(100svw - 2 * var(--popup-padding) - 4px - 20px); /* 2px = app-panel padding, 20px = in case of scrollbars */
  height: calc(100svh - 2 * 48px - 4px - 20px);
  height: calc(100svh - 2 * var(--popup-padding) - 4px - 20px); /* 2px = app-panel padding, 20px = in case of scrollbars */
  min-height: 580px;
  display: flex;
  align-items: stretch;
  background-color: var(--panel-blue);
  border-radius: 14px;
  color: var(--text-blue); /* conflict */
  /* doesn't seems to be used */
}
.nearby-locations .gm-style-iw-d {
  color: var(--text-blue);
  font-size: 0.75em;
}
.nearby-locations .gm-style-iw-d h5 {
  font-size: 1.65em;
}

.nearby-locations__map {
  flex-grow: 1;
  padding: 22px;
}

.nearby-locations__side {
  margin-top: -2px;
  margin-right: -2px;
  margin-bottom: -2px;
  flex-shrink: 0;
  width: 389px;
  height: calc(100% + 4px);
  display: flex;
  flex-direction: column;
  padding: 28px 24px 0;
  background-color: var(--nearby-locations-side-background);
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

.nearby-locations__heading {
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 20px;
}

.nearby-locations__icon {
  vertical-align: top;
  margin-right: 4px;
  stroke: currentColor;
}

.nearby-locations__current-location {
  margin-top: 34px;
}

.nearby-locations__body {
  position: relative;
  flex-grow: 1;
  margin-top: 10px;
  overflow: hidden;
}

@media (min-width: 740px) {
  .nearby-locations__body::before,
  .nearby-locations__body::after {
    content: "";
    position: absolute;
    z-index: 10;
    left: 0;
    right: 8px;
    height: 20px;
    height: var(--fader);
    transition: opacity 100ms ease;
    pointer-events: none;
  }
  .nearby-locations__body::before {
    top: 0;
    background-image: linear-gradient(var(--nearby-locations-side-background), transparent);
  }
  .nearby-locations__body::after {
    bottom: 0;
    background-image: linear-gradient(transparent, var(--nearby-locations-side-background));
  }
}
.nearby-locations__ribbon {
  height: 100%;
  overflow-y: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 22px;
}

.nearby-locations__sub-header {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nearby-locations__sub-heading {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 18px;
  line-height: 23px;
}

.nearby-locations__filter {
  margin-left: auto;
}

.nearby-locations__list {
  margin-top: 24px;
}

.nearby-locations__item {
  margin-top: 14px;
}

.nearby-locations__item:first-child {
  margin-top: 0;
}

@media (max-width: 739.98px) {
  .nearby-locations {
    position: relative;
    width: calc(100vw - 2 * 48px);
    width: calc(100vw - 2 * var(--popup-padding));
    height: auto;
    margin: -2px;
    background-color: var(--bg-blue-darkest);
    display: block;
    padding: 332px 16px 16px;
  }
  .nearby-locations__map {
    position: absolute;
    top: 62px;
    left: 16px;
    right: 16px;
    padding: 0;
    height: 248px;
  }
  .nearby-locations__side {
    margin-right: 0;
    width: auto;
    height: auto;
    padding: 0;
    background-color: transparent;
  }
  .nearby-locations__heading {
    position: absolute;
    left: 16px;
    top: 20px;
  }
  .nearby-locations__current-location {
    margin-top: 0;
  }
  .nearby-locations__body {
    margin-top: 20px;
  }
  .nearby-locations__ribbon {
    padding-right: 0;
  }
  .nearby-locations__list {
    margin-top: 20px;
  }
}
.nearby-destination {
  padding: 16px 11px 13px;
}

.nearby-destination__status {
  margin-top: -2px;
  margin-left: 20px;
  margin-bottom: 10px;
  float: right;
}

.nearby-destination__status .state-pill {
  min-width: 74px;
}

.nearby-destination__heading {
  margin-top: -10px;
  margin-bottom: 0;
  display: block;
  padding: 10px 0;
  border: none;
  background-color: transparent;
  font-family: inherit;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 14px;
  line-height: 18px;
  text-align: left;
}

button.nearby-destination__heading {
  cursor: pointer;
  transition: color 100ms ease;
  transition: color var(--transition-hover);
}

@media (hover: hover){

button.nearby-destination__heading:hover {
  color: var(--text-link);
}
}

.nearby-destination__address {
  display: block;
  border: none;
  background-color: transparent;
  padding-top: 5px;
  padding-bottom: 5px;
  font-family: inherit;
  font-size: 12px;
  line-height: 15px;
  text-align: left;
}

button.nearby-destination__address {
  cursor: pointer;
  transition: color 100ms ease;
  transition: color var(--transition-hover);
}

@media (hover: hover){

button.nearby-destination__address:hover {
  color: var(--text-link);
}
}

.nearby-destination__data {
  margin-top: 4px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.nearby-destination__param {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 14px;
  line-height: 20px;
}

.nearby-destination__value {
  margin-top: 3px;
  font-size: 12px;
  line-height: 15px;
}

.nearby-destination__action .app-button {
  margin-top: 26px;
  width: 100%;
}

.nearby-destination__action .app-button--secondary .app-button__background {
  background-color: var(--nearby-destination-secondary-submit);
}

@media (hover: hover){

.nearby-destination__action .app-button--secondary:hover .app-button__background {
  background-color: var(--nearby-destination-secondary-submit-hover);
}
}

@media (max-width: 739.98px) {
  .nearby-destination__status .state-pill {
    min-width: 55px;
  }
}
button[title="Toggle fullscreen view"] {
  display: none;
}

.locating {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.locating__map {
  margin-top: 24px;
  position: relative;
  flex-grow: 1;
  min-height: 380px;
}

.locating__map .map-canvas {
  position: absolute !important;
  width: auto;
  height: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 10px;
}

/* Map/Satellite buttons wrapper: */
.locating__map .map-canvas .gmnoprint {
  gap: 4px;
}

/* Map/Satellite dropdowns: */
.locating__map .map-canvas [role=menuitemcheckbox] {
  display: flex;
  gap: 8px;
}

.locating__actions {
  padding: 10px;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.job-detail .locating {
  height: auto;
}

.job-detail .locating .section-head {
  display: none;
}

.job-detail .locating .identity__field {
  margin-top: 0;
}

.job-detail .locating .identity__heading {
  display: none;
}

.job-detail .locating .identity__widget {
  margin-top: 0;
}

.job-detail .locating__map {
  min-height: 0;
  height: 240px;
  margin-right: 2px;
}

.job-detail .locating .map-canvas {
  border-radius: 8px;
}

.job-detail .map-container .info-message {
  border-radius: 7px;
}

.job-detail .map-container .info-message__inner {
  padding: 24px;
}

.job-detail .location-text-locked-overlay,
.job-detail .map-locked-overlay {
  border-radius: 7px;
  right: -2px;
}

.map-container--full .locating {
  height: 100%;
}

.map-container--full .locating__map {
  height: 100%;
}

.map-container--full .info-message {
  border-radius: 14px;
}

.map-container--full .location-text-locked-overlay,
.map-container--full .map-locked-overlay {
  border-radius: 14px;
}

.customer-quote-row {
  overflow: hidden; /* to prevent inner margins from collapsing inside */
}

/* job details page */
.map-action {
  position: absolute;
  right: 10px;
  top: 10px;
  background-color: var(--white-both-themes);
  border-radius: 3px;
  box-shadow: 0 1px 4px -1px var(--action-shadow-both-themes);
  width: 40px;
  height: 40px;
  padding: 5px;
  cursor: pointer;
}

.map-action__icon {
  width: 100%;
  height: auto;
  stroke: var(--light-gray-both-themes);
}

@media (hover: hover){

.map-action:hover .map-action__icon {
  stroke: var(--dark-gray-both-themes);
}
}

.map-action--shrink {
  display: none;
}

.map-container--full .map-action--expand {
  display: none;
}

.map-container--full .map-action--shrink {
  display: block;
}

.map-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Ideally we need to remove position absolute from the first place, but for now let's do it at least for job-details page: */
.job-detail .map-container {
  position: static;
}

.map-container--full {
  position: fixed !important; /* conflict with .job-detail .map-container above */
  z-index: 900;
  z-index: var(--popup-z-index);
  top: 30px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  height: auto;
  box-shadow: 0 0 0 40px var(--modal-backdrop); /* some sort of background overlay */
  padding: 24px;
  background-color: var(--panel-blue);
  border: 2px solid var(--panel-blue-gradient-start);
  border-radius: 14px;
}

.map-container--full .section-head {
  display: none;
}

.map-container--full .identity__heading {
  display: none;
}

.map-container--full .identity__field {
  margin-top: 0;
}

.map-container--full .identity__widget {
  margin-top: 0;
}

.expense-override {
  padding: 24px;
  padding: var(--dialog-padding);
}

.expense-override__heading {
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 40px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 20px;
  line-height: 28px;
  text-align: center;
}

.expense-override__warning {
  margin-top: 24px;
}

.expense-override__reason-and-manager {
  margin-top: 24px;
}

.expense-override__actions {
  margin-top: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  gap: var(--modal-actions-gap);
}

.expense-override__actions .app-button {
  flex-grow: 1;
}

@media (max-width: 639.98px) {
  .expense-override {
    width: 100%;
  }
}
@media (max-width: 739.98px) {
  .expense-override__heading {
    /*margin-top: 0;*/
    /*margin-bottom: 0;*/
    /*font-weight: var(--weight-semi-bold);;*/
    /*font-size: 20px;*/
    /*line-height: 28px;*/
  }
  .expense-override__warning {
    /*margin-top: 24px;*/
  }
  .expense-override__reason-and-manager {
    /*margin-top: 24px;*/
  }
  .expense-override__actions {
    /*margin-top: 24px;*/
    flex-direction: column;
    align-items: stretch;
  }
  .expense-override__actions .app-button {
    width: 100%;
  }
}
/* Width calculation. Changing the code below also change similar piece for service-details.

   By default it is assumed we are dealing with separated window that looks like a popup
   in the Request Service guide. And components inside of modal windows need to have a specific width.
   Here we have 600px | 700px:
 */
.expense-override {
  width: 600px; /* it supposed to be "max-width: 700px" but there is not enough content inside to reach it. So inline-block above shrinks it. */
}

@media (max-width: 639.98px) {
  .expense-override {
    width: 100%;
  }
}
/* If 3rd button with [data-disposition="remove override"] is visible, there is not enough space for it. Make modal wider: */
.expense-override:has(.app-button[data-disposition="remove override"]:not(.hidden)) {
  width: 700px;
}

@media (max-width: 739.98px) {
  .expense-override:has(.app-button[data-disposition="remove override"]:not(.hidden)) {
    width: 100%;
  }
}
/* Inside of .service-details
 *
 * This is the case of modal inside of modal. In this case width is set above on the .service-details
 * So here it needs to be reset together with padding:
 */
.service-details .expense-override {
  width: 100% !important;
  padding: 0;
}

.notes-card {
  min-height: 72px;
  padding: 8px 10px;
  border-radius: 12px;
  background-color: var(--panel-blue);
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-blue);
  word-wrap: break-word;
}

.icon-action {
  vertical-align: top;
  width: 30px;
  height: 30px;
  background-color: transparent;
  border: none;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.icon-action:hover {
  background-color: var(--transparent-hover);
}
}

.icon-action__icon {
  vertical-align: top;
  width: 18px;
  height: 18px;
  stroke: var(--text-blue);
}

.cc-input {
  width: 798px;
  padding: 54px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cc-input__body {
  display: flex;
  align-items: stretch;
  gap: 24px 30px; /* 24px is the spacing before the error */
}

.cc-input__body {
  max-width: none; /* conflict with .row class that is being added via JS */
  margin: 0; /* conflict with .row class that is being added via JS */
}

.cc-input__fieldset {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cc-input__field {
  margin-top: 8px;
}

.cc-input__field:first-child {
  margin-top: 0;
}

.cc-input__preview {
  width: 344px;
  height: 200px;
}

.cc-input__error {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-error);
}

.cc-input__operations {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.cc-input__operations .app-button__background {
  min-width: 180px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 739.98px) {
  .cc-input {
    width: 100%;
    padding: 60px 32px 20px;
    padding: 60px var(--container-h-padding) 20px;
  }
  .cc-input__body {
    flex-direction: column;
  }
  .cc-input__preview {
    margin-top: 0;
    width: auto;
    max-width: 344px;
    flex-direction: column;
  }
  .cc-input__operations {
    gap: 18px;
  }
  .cc-input__operations .app-button {
    min-width: 0;
    flex-grow: 1;
  }
  .cc-input__operations .app-button__background {
    min-width: 0;
  }
}
.table {
  position: relative;
  /* fallback for .table::after (not exactly fallback, more like first step of progressive enhancement */
  border: 2px solid var(--table-border);
  border-radius: 14px;
}

.table__widget {
  width: 100%;
  vertical-align: top;
  border-collapse: collapse;
  margin: 0; /* conflict */
}

.table__section {
  border: none;
  background-color: transparent;
}

.table__row {
  background-color: transparent !important; /* conflict */
}

.table__section--body .table__row:first-child {
  border-top: none;
}

.table__cell {
  padding: 26px 24px;
  background-color: var(--separator-blue);
  border-top: 1px solid var(--table-border-rgba);
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-blue);
}

.table__cell:first-child {
  border-left: none;
}

.table__cell:last-child {
  border-right: none;
}

.table__section--body .table__row:last-child .table__cell:first-child {
  border-bottom-left-radius: 12px;
}

.table__section--body .table__row:last-child .table__cell:last-child {
  border-bottom-right-radius: 12px;
}

.table__section--head .table__cell {
  padding-top: 13px;
  padding-bottom: 13px;
  background-color: var(--cards-blue);
  border: none;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 12px;
  line-height: 18px;
  color: var(--table-head-color);
  text-align: left;
}

.table__section--head .table__cell:first-child {
  border-top-left-radius: 12px;
}

.table__section--head .table__cell:last-child {
  border-top-right-radius: 12px;
}

.table__mobile-heading {
  display: none;
}

.table__line-break-on-smartphone {
  display: none;
}

@media (min-width: 740px) {
  .table__smaller-text {
    font-size: 13px;
  }
}
@supports (pointer-events: none) {
  .table {
    border-radius: 0;
    border: none;
  }
  .table::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 10;
    border: 2px solid var(--table-border-rgba);
    border-radius: 12px;
  }
}
@media (max-width: 739.98px) {
  .table__widget {
    display: block;
  }
  .table__section {
    display: block;
  }
  .table__section--head {
    display: none;
  }
  .table__row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    border-top: 2px solid var(--table-border-rgba) !important; /* important is necessary here because earlier it was reset in the first-child */
    border-left: 2px solid var(--table-border-rgba);
    border-right: 2px solid var(--table-border-rgba);
    padding-top: 10px;
    padding-bottom: 6px;
  }
  .table__row:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
  .table__row:last-child {
    border-bottom: 2px solid var(--table-border-rgba);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  .table__row:nth-child(odd) {
    background-color: var(--separator-blue) !important;
  }
  .table__row:nth-child(even) {
    background-color: var(--table-row-even-bg) !important;
  }
  .table__cell {
    display: block;
    padding: 10px 16px;
    border-top: none;
    background-color: transparent;
    font-weight: 300;
    font-weight: var(--weight-normal);
  }
  .table__mobile-heading {
    display: block;
    margin-bottom: 11px;
    font-weight: 500;
    font-weight: var(--weight-semi-bold);
    font-size: 12px;
    line-height: 18px;
  }
  .table__line-break-on-smartphone {
    display: block;
    width: 100%;
    height: 0;
  }
  @supports (pointer-events: none) {
    .table::after {
      display: none;
    }
  }
}
/* SPECIFIC TABLES */
/* Current Requests */
.table--current-requests {
  /* Few more in Lockbox case */
}
.table--current-requests .table__cell--status {
  width: 1px;
}
.table--current-requests .table__cell--status .state-pill {
  margin-top: -2px;
  margin-bottom: -1px;
}
.table--current-requests .table__cell--date {
  font-weight: 300;
  font-weight: var(--weight-normal);
}
.table--current-requests .table__cell--service-summary {
  max-width: 400px;
  font-weight: 300;
  font-weight: var(--weight-normal);
}
.table--current-requests .table__cell--customer {
  max-width: 250px;
}
.table--current-requests .table__cell--agent {
  max-width: 250px;
}
.table--current-requests .table__cell--edit {
  width: 1px;
  font-weight: 300;
  font-weight: var(--weight-normal);
}
.table--current-requests .table__cell--edit .app-button {
  margin-left: auto;
  margin-top: -7px;
  margin-bottom: -7px;
  min-width: 0;
  width: 34px;
  height: 34px;
}
.table--current-requests .table__cell--edit .app-button__label {
  display: none;
}
.table--current-requests .table__cell--vehicle {
  font-weight: 300;
  font-weight: var(--weight-normal);
}
.table--current-requests .table__cell--vin {
  font-weight: 300;
  font-weight: var(--weight-normal);
}
@media (max-width: 739.98px) {
  .table--current-requests {
    /* Few more in Lockbox case */
  }
  .table--current-requests .table__cell--status {
    width: auto;
  }
  .table--current-requests .table__cell--status .state-pill {
    margin-top: 0;
    margin-bottom: -3px;
  }
  .table--current-requests .table__cell--service-summary {
    width: 100%;
    max-width: none;
  }
  .table--current-requests .table__cell--customer {
    width: 100%;
    max-width: none;
  }
  .table--current-requests .table__cell--agent {
    max-width: none;
  }
  .table--current-requests .table__cell--edit {
    width: 100%;
  }
  .table--current-requests .table__cell--edit .app-button {
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    height: 40px;
  }
  .table--current-requests .table__cell--edit .app-button__label {
    display: inline;
  }
  .table--current-requests .table__cell--time {
    width: 100%;
  }
  .table--current-requests .table__cell--vin {
    width: 100%;
  }
  .table--current-requests .table__cell--destination-hub {
    width: 100%;
  }
}
/* API Requests or Saved Requests (similar structure) */
.table--api-or-saved-requests {
  /* Ideally we would use these classes to match the rest of the codebase:
  .table__cell--saved-at {}
  .table__cell--saved-by {}
  .table__cell--service-type {}
  .table__cell--customer-name { max-width: 250px; }
  .table__cell--customer-phone {}
  .table__cell--customer-address { max-width: 400px; }
  but this is kinda redundant because following classes are already
  in the code and some JS connected to them, so use following ones:
  */
}
.table--api-or-saved-requests .created-at {
  font-weight: 300;
  font-weight: var(--weight-normal);
}
.table--api-or-saved-requests .customer-name {
  max-width: 250px;
}
.table--api-or-saved-requests .vehicle-address {
  max-width: 400px;
  font-weight: 300;
  font-weight: var(--weight-normal);
}
.table--api-or-saved-requests .table__cell--take {
  width: 1px;
}
.table--api-or-saved-requests .table__cell--take .app-button {
  margin-top: -10px;
  margin-bottom: -10px;
  width: 146px;
}

/* API Requests */
@media (max-width: 739.98px) {
  .table--api-or-saved-requests .customer-name {
    max-width: none;
  }
  .table--api-or-saved-requests .vehicle-address {
    width: 100%;
  }
  .table--api-or-saved-requests .table__cell--take {
    width: 100%;
  }
  .table--api-or-saved-requests .table__cell--take .app-button {
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
  }
}
.table--reimbursements .status-block {
  display: none;
}
@media (min-width: 740px) {
  .table--reimbursements .table__cell {
    padding-left: 12px;
    padding-right: 12px;
  }
  .table--reimbursements .table__cell:first-child {
    padding-left: 24px;
  }
  .table--reimbursements .table__cell:last-child {
    padding-right: 24px;
  }
}
.table--reimbursements .table__cell--status {
  font-weight: 300;
  font-weight: var(--weight-normal);
}
.table--reimbursements .table__cell--ref-number {
  white-space: nowrap;
}
.table--reimbursements .table__cell--submitted-on {
  white-space: nowrap;
  font-weight: 300;
  font-weight: var(--weight-normal);
}
.table--reimbursements .table__cell--service-date {
  white-space: nowrap;
  font-weight: 300;
  font-weight: var(--weight-normal);
}
.table--reimbursements .table__cell--service-type {
  white-space: nowrap;
}
.table--reimbursements .table__cell--policy-number {
  white-space: nowrap;
}
.table--reimbursements .table__cell--take {
  width: 1px;
}
.table--reimbursements .table__cell--take .app-button {
  margin-top: -10px;
  margin-bottom: -10px;
}

@media (max-width: 739.98px) {
  .table--reimbursements .table__cell {
    padding-top: 16px;
    padding-bottom: 16px;
    width: 33.3333%;
  }
  .table--reimbursements .table__cell--status .state-pill {
    white-space: normal;
  }
  .table--reimbursements .table__cell--request-amount {
    width: 50%;
  }
  .table--reimbursements .table__cell--covered-amount {
    width: 50%;
  }
  .table--reimbursements .table__cell--approval-amount {
    width: 50%;
  }
  .table--reimbursements .table__cell--payment-status {
    width: 50%;
  }
  .table--reimbursements .table__cell--take {
    width: 100%;
  }
  .table--reimbursements .table__cell--take .app-button {
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
  }
}
.table--abusers .table__cell--name {
  min-width: 150px;
}
.table--abusers .table__cell--action {
  font-weight: 300;
  font-weight: var(--weight-normal);
}
@media (max-width: 739.98px) {
  .table--abusers .table__cell--name {
    order: 1;
    width: 50%;
  }
  .table--abusers .table__cell--action {
    order: 3;
    width: 100%;
  }
  .table--abusers .table__cell--created {
    order: 2;
    width: 50%;
  }
}
.table--team .table__cell--name {
  min-width: 150px;
}
.table--team .table__cell--status .state-pill {
  padding-left: 18px;
  padding-right: 18px;
}
.table--team .table__cell--actions {
  width: 1px;
}
.table--team .table__cell--actions .app-button {
  margin-top: -10px;
  margin-bottom: -10px;
}
.table--team .table__cell--actions .app-button__background {
  padding-left: 32px;
  padding-right: 32px;
}

.table--connections .table__cell--status .state-pill {
  padding-left: 18px;
  padding-right: 18px;
}

@media (max-width: 739.98px) {
  .table--team .table__cell--name {
    order: 1;
  }
  .table--team .table__cell--status {
    order: 2;
  }
  .table--team .table__cell--email {
    order: 3;
    width: 100%;
  }
  .table--team .table__cell--roles {
    order: 4;
  }
  .table--team .table__cell--locations {
    order: 5;
    margin-top: 4px;
    border-top: 1px solid var(--table-mobile-border);
    padding-top: 12px;
  }
  .table--team .table__cell--actions {
    order: 6;
    width: 100%;
  }
  .table--team .table__cell--actions .table__mobile-heading {
    margin-top: 4px;
    border-top: 1px solid var(--table-mobile-border);
    padding-top: 12px;
  }
  .table--team .table__cell--actions .app-button {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }
  .table--team .table__cell--actions .app-button__background {
    padding-left: 32px;
    padding-right: 32px;
  }
}
.table--fleet .table__cell--file-name {
  min-width: 150px;
}
.table--fleet .table__cell--date-uploaded {
  white-space: nowrap;
}

@media (max-width: 739.98px) {
  .table--fleet .table__cell--file-name {
    width: 100%;
  }
  .table--fleet .table__cell--status {
    width: 100%;
  }
  .table--fleet .table__cell--date-uploaded {
    width: 100%;
  }
}
.pagination {
  margin: 0; /* conflict */
}

.pagination__list {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0; /* conflict */
  padding-left: 0;
  list-style: none;
}

.pagination__item {
  min-width: 40px;
  font-size: 15px !important; /* !important is in here because of the conflict */
  line-height: 20px !important; /* !important is in here because of the conflict */
  text-align: center;
  margin: 0 !important; /* conflict */
}

.pagination__item:not(:has(.pagination__link)) {
  padding: 8px 14px;
}

.pagination__item--current,
.pagination__item.current {
  box-shadow: inset 0 0 0 1.5px var(--pagination-current-border);
  background-color: var(--separator-blue);
  border-radius: 5px;
  cursor: default;
  color: var(--text-blue);
}

.pagination__item--disabled,
.pagination__item.disabled {
  opacity: 1 !important; /* !important is in here because of the conflict */
  color: var(--disabled-color) !important; /* !important is in here because of the conflict */
  cursor: default;
}

.pagination__link {
  display: block;
  min-width: 40px;
  padding: 8px 14px !important; /* !important is in here because of the conflict */
  border-radius: 5px !important; /* !important is in here because of the conflict */
  color: var(--pagination-color) !important; /* !important is in here because of the conflict */
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.pagination__link:hover {
  background-color: var(--separator-blue) !important; /* !important is in here because of the conflict */
}
}

@media (max-width: 739.98px) {
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: auto;
    margin-left: calc(-1 * 32px);
    margin-left: calc(-1 * var(--container-h-padding));
    margin-right: calc(-1 * 32px);
    margin-right: calc(-1 * var(--container-h-padding));
  }
  .pagination__list {
    padding-left: 32px;
    padding-left: var(--container-h-padding);
    padding-right: 32px;
    padding-right: var(--container-h-padding);
  }
}
.requests-list {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 45px;
  padding-bottom: 45px;
}

.requests-list__wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.requests-list__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 28px;
  line-height: 35px;
  text-align: center;
}

.requests-list__search {
  margin-top: 24px;
  width: 100%;
  max-width: 704px;
  margin-left: auto;
  margin-right: auto;
}

.requests-list__error {
  margin-top: 77px;
}

.requests-list__head {
  margin-top: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  /* Use bottom margin/border/padding so it will also push .requests-list__warning and it will be udner the border */
  padding-bottom: 18px;
  border-bottom: 1px solid var(--separator-blue);
  margin-bottom: 32px;
}

.requests-list__sub-heading {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 28px;
  line-height: 35px;
}

.requests-list__operations {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.requests-list__refresh .app-button__background {
  padding-left: 16px;
  padding-right: 16px;
}

.requests-list__filter .input__widget {
  padding-left: 16px;
}

.requests-list__destination .input__widget {
  padding-left: 16px;
}

.requests-list__warning {
  margin-bottom: 32px;
}

.requests-list__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.requests-list__null {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px 40px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 18px;
  line-height: 24px;
  color: var(--text-blue);
  text-align: center;
}

.requests-list__pagination {
  margin-top: 32px;
}

.requests-list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 207px;
  background-image: var(--requests-list-background-image);
  background-size: 1440px 207px;
  background-repeat: no-repeat;
  background-position: center top;
}

@supports (pointer-events: none) {
  .requests-list::before {
    pointer-events: none;
    z-index: 10;
  }
}
@media (max-width: 739.98px) {
  .requests-list {
    padding-top: 41px;
    padding-bottom: 41px;
  }
  .requests-list__heading {
    order: 1;
    font-size: 24px;
    line-height: 30px;
  }
  .requests-list__search {
    order: 2;
  }
  .requests-list__error {
    order: 3;
    margin-top: 28px;
  }
  .requests-list__head {
    order: 5;
    margin-top: 28px;
  }
  .requests-list__sub-heading {
    font-size: 24px;
    line-height: 30px;
  }
  .requests-list__operations .app-button {
    width: 44px;
    min-width: 0;
    flex-shrink: 0;
  }
  .requests-list__operations .app-button__icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  .requests-list__operations .app-button__background {
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
  }
  .requests-list__operations select.input__widget {
    width: 44px !important; /* !important is necessary because on desktops width is recalculated via JS o*/
    padding: 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
    background-image: var(--requests-list-filter-image);
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .requests-list__destination select.input__widget {
    width: 44px;
    padding: 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
    background-image: var(--requests-list-location-image);
    background-size: 22px 22px;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .requests-list__warning {
    order: 4;
    margin-top: 57px;
    margin-bottom: 0;
  }
  .requests-list__body {
    order: 6;
  }
  .requests-list__pagination {
    order: 7;
  }
}
.search {
  padding: 2px;
  background-image: var(--search-wrapper-gradient);
  border-radius: 8px;
}

.search__background {
  position: relative;
  border-radius: 6px;
  background-color: var(--separator-blue);
}

.search__icon {
  position: absolute;
  left: 10px;
  top: 17px;
  pointer-events: none;
  stroke: var(--text-blue);
}

.search__field {
  vertical-align: top;
  width: 100%;
  height: 54px;
  margin: 0; /* conflict with global styles */
  padding: 15px 62px 15px 38px;
  background-color: transparent;
  background-clip: padding-box; /* hack for iOS to make box-shadow works (same as border-radius in the past) */
  border: none;
  outline: none;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 16px; /* not less than 16px (otherwise mobile browsers will zoom in on focus) */
  line-height: 24px;
  color: var(--text-blue);
  opacity: 1; /* reset select:disabled default fade on iOS */
  -webkit-tap-highlight-color: transparent;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
  transition: background-color var(--transition-hover), border-color var(--transition-hover), color var(--transition-hover);
}

.search__field::-moz-placeholder {
  opacity: 1; /* reset opacity drop Firefox */
  color: var(--placeholder-color);
}

.search__field::placeholder {
  opacity: 1; /* reset opacity drop Firefox */
  color: var(--placeholder-color);
}

@media (hover: hover){

.search__field:hover {
  box-shadow: 0 0 0 2px var(--border-blue-hover);
}
}

.search__field:focus-visible {
  box-shadow: 0 0 0 2px var(--border-blue-focus);
  transition: none;
  /* Conflict with global styles: */
  background-color: var(--brand-blue);
}

.search__submit {
  position: absolute;
  right: 9px;
  top: 7px;
  background-color: transparent;
  border: none;
}

.search__submit .app-button {
  width: 44px;
  min-width: 0;
}

/* expand button clickable area */
.search__submit .app-button::before {
  content: "";
  position: absolute;
  top: -9px;
  right: -9px;
  bottom: -9px;
  left: -9px;
}

.round-progress {
  position: relative;
}

.round-progress__blur-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 54px;
  height: 54px;
  margin: auto;
  border-radius: 50%;
  opacity: 0.65;
  filter: blur(100px);
}

.round-progress__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  vertical-align: top;
}

.round-progress__image circle {
  stroke-linecap: round;
}

.round-progress--animated circle {
  transition: stroke-dashoffset 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transition: stroke-dashoffset 0.3s var(--ease-out-quint);
}

.round-progress__percents {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 20px;
  line-height: 24px;
}

@media (max-width: 739.98px) {
  .round-progress__blur-background {
    width: 36px;
    height: 36px;
    filter: blur(67px);
  }
  .round-progress__percents {
    font-size: 13px;
    line-height: 16px;
  }
}
.tracks {
  padding: 81px 0 29px;
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
}

.tracks__item {
  width: 120px;
}

@media (min-width: 1300px) and (max-width: 1399.98px) {
  .tracks__item {
    width: 110px;
  }
}
@media (min-width: 740px) and (max-width: 1299.98px) {
  .tracks__item {
    width: 100px;
  }
}
.tracks__body {
  margin-top: 13px;
}

.tracks__param {
  font-size: 11px;
  line-height: 13px;
  color: var(--text-gray);
  text-align: center;
}

.tracks__value {
  margin-top: 8px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 24px;
  line-height: 30px;
  text-align: center;
}

.tracks__unit {
  display: block;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.tracks__accuracy {
  margin-top: 4px;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  color: var(--text-secondary);
}

@media (max-width: 739.98px) {
  .tracks {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 22px 16px 44px;
    gap: 40px 26px;
  }
  .tracks__item {
    width: 80px;
  }
  .tracks__item--enlarged-on-smartphone .tracks__preview {
    width: 152px;
  }
  .tracks__unit {
    display: inline;
    vertical-align: baseline;
  }
  .tracks__item--enlarged-on-smartphone {
    position: relative;
    width: 100%;
  }
  .tracks__item--enlarged-on-smartphone .tracks__body {
    position: absolute;
    left: 176px;
    top: 54px;
    margin-top: 0;
  }
  .tracks__item--enlarged-on-smartphone .round-progress__percents {
    font-size: 26px;
  }
  .tracks__item--enlarged-on-smartphone .tracks__param {
    text-align: left;
  }
}
.stats {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 40px 22px 38px;
}

.stats__param {
  display: block;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 12px;
  line-height: 18px;
  color: var(--text-gray);
}

.stats__value {
  margin-top: 2px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 52px;
  line-height: 60px;
}

.stats__unit {
  margin-left: 2px;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.stats__item--secondary .stats__value {
  margin-top: 6px;
  font-size: 24px;
  line-height: 32px;
}

@media (max-width: 739.98px) {
  .stats {
    padding: 24px 22px 14px;
  }
  .stats__value {
    margin-top: -2px;
    font-size: 32px;
    line-height: 40px;
  }
}
.dashboard {
  width: 100%; /* stretch flex */
  min-height: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 16px;
  padding-top: 38px;
  padding-bottom: 60px;
}

.dashboard__title {
  flex-basis: 100%;
}

.dashboard__title.title,
.dashboard__title .title {
  padding-bottom: 20px; /* to be well aligned with buttons right from it */
  margin-bottom: 0;
}

.dashboard__head {
  position: absolute;
  right: 0;
  top: 32px;
  grid-column: span 3;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dashboard__body {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 32px 16px;
  gap: 32px 16px;
}

.dashboard__overview {
  grid-column: span 3;
}

.dashboard__overview-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.dashboard__performance {
  grid-column: span 2;
}

.dashboard__performance__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.dashboard__tracked-ATA {
  grid-row: span 2;
}

.dashboard__satisfaction {
  grid-column: span 1;
}

.dashboard__satisfaction-body {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.dashboard__comments {
  grid-column: span 3;
}

.dashboard__comments-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.dashboard__reviews {
  grid-column: span 2;
}

.dashboard__reviews:only-child {
  grid-column: span 3;
}

.dashboard__requests-null {
  grid-column: span 3;
  padding-top: 60px;
  padding-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}

.dashboard__null {
  flex-basis: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}

@media (max-width: 739.98px) {
  .dashboard {
    display: flex;
    flex-direction: column;
    padding-top: 34px;
  }
  .dashboard__title {
    flex-basis: auto;
  }
  .dashboard__head {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 10px;
    gap: 10px;
  }
  .dashboard__action--import {
    position: absolute;
    right: 0;
    top: 32px;
  }
  .dashboard__action--import .app-button {
    height: 34px;
  }
  .dashboard__action--import .app-button__background {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .dashboard__body {
    display: flex;
    flex-direction: column;
  }
  .dashboard__overview .title {
    position: absolute;
    left: 0;
    top: 34px;
    margin-bottom: 90px;
  }
  .dashboard__overview-body {
    /*display: grid;*/
    grid-template-columns: repeat(1, minmax(0, 1fr));
    /*gap: 16px;*/
  }
  .dashboard__performance {
    flex-grow: 0;
    /*grid-column: span 2;*/
  }
  .dashboard__performance__body {
    /*display: grid;*/
    /*grid-template-columns: repeat(2, minmax(0, 1fr));*/
    grid-template-columns: repeat(1, minmax(0, 1fr));
    /*gap: 16px;*/
  }
  .dashboard__tracked-ATA {
    /*grid-row: span 2;*/
  }
  .dashboard__satisfaction {
    flex-grow: 0;
  }
  .dashboard__satisfaction-body {
    /*display: grid;*/
    /*gap: 16px;*/
  }
  .dashboard__requests-null {
    padding-top: 30px;
    padding-bottom: 30px;
    height: auto;
  }
  .dashboard__null {
    flex-basis: auto;
    height: auto;
    flex-grow: 1;
  }
}
.associated-menu {
  display: none;
  position: absolute;
  z-index: 1000;
  right: 0;
  top: 100%;
  margin-top: 8px;
  padding: 1px;
  min-width: 100%;
  background-color: var(--separator-blue);
  border: 1px solid var(--accent-blue-border);
  border-radius: 6px;
  overflow: hidden; /* cut corners */
}

.associated-menu.show {
  display: block;
}

.associated-menu__scroll {
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 4px;
}

.associated-menu__off-click {
  display: none;
}

.associated-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.associated-menu__item {
  position: relative;
  padding: 11px 40px 11px 16px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
  cursor: pointer;
}

@media (hover: hover){

.associated-menu__item:hover {
  background-color: var(--separator-blue-hover);
}
}

.associated-menu__item:nth-child(even) {
  background-color: var(--even-stripe-blue);
}

@media (hover: hover){

.associated-menu__item:nth-child(even):hover {
  background-color: var(--even-stripe-blue-hover);
}
}

.associated-menu__item.selected::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  background-color: var(--text-link);
  -webkit-mask-image: url("../vectors/check-orange.svg");
          mask-image: url("../vectors/check-orange.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
}

@media (max-width: 739.98px) {
  .associated-menu {
    position: fixed;
    top: auto;
    bottom: calc(32px / 2);
    bottom: calc(var(--container-h-padding) / 2);
    right: calc(32px / 2);
    right: calc(var(--container-h-padding) / 2);
    left: calc(32px / 2);
    left: calc(var(--container-h-padding) / 2);
    min-width: 0;
  }
  .associated-menu__scroll {
    max-height: 30vh;
  }
  .associated-menu__off-click {
    display: block;
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--modal-backdrop);
  }
  .associated-menu__list {
    position: relative;
    background-color: var(--separator-blue);
  }
}
.comment + .comment {
  border-top: 1px solid var(--comment-border);
}

.comment:first-child {
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
}

.comment:last-child {
  border-bottom-left-radius: 13px;
  border-bottom-right-radius: 13px;
}

.comment__body {
  display: flex;
  align-items: flex-start;
  padding: 30px 24px;
}

.comment__rating {
  margin-right: 4.5%;
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 28px;
  line-height: 35px;
}

.comment__message {
  max-width: 745px;
}

.comment__expand {
  margin-left: auto;
  height: 44px;
  padding: 0 34px 0 16px;
  display: flex;
  align-items: center;
  background-color: transparent;
  background-image: url("../vectors/chevron-down.svg");
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: right 6px center;
  border-radius: 8px;
  border: none;
  font-family: inherit;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 18px;
  text-transform: none; /* conflict */
  cursor: pointer;
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.comment__expand:hover {
  background-color: var(--comment-expand-hover);
}
}

.comment__collapse {
  display: none;
}

.comment__share {
  margin-left: 6px;
}

.comment__share .app-button__background {
  padding-left: 23px;
  padding-right: 21px;
  gap: 10px;
}

.comment__summary {
  display: none;
  padding: 0 24px 24px;
}

.comment__table {
  display: flex;
  align-items: flex-start;
  gap: 26px 42px;
}

.comment__cell {
  margin-top: 11px;
}

.comment__cell:first-child {
  margin-top: 0;
}

.comment__stat {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.comment__param {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-blue);
}

.comment__icon {
  vertical-align: top;
  width: 24px;
  height: 24px;
  stroke: var(--text-blue);
}

.comment__value {
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 24px;
  color: var(--comment-text-secondary);
}

.comment__value--white {
  color: var(--text-blue);
}

.comment--expanded {
  background-color: var(--comment-expanded-background);
}

.comment--expanded .comment__summary {
  display: block;
  animation: slideDownKeyframes 1200ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: var(--slide-down-animation);
}

.comment--expanded .comment__more-info {
  display: none;
}

.comment--expanded .comment__collapse {
  display: inline;
}

@media (max-width: 739.98px) {
  .comment__body {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 30px 10px;
  }
  .comment__rating {
    gap: 10px;
    font-size: 24px;
    line-height: 30px;
  }
  .comment__emoji .spot {
    width: 40px;
    height: 40px;
  }
  .comment__message {
    margin-top: 6px;
    order: 5;
    width: 100%;
  }
  .comment__expand {
    padding-left: 8px;
    padding-right: 28px;
    background-position: right 4px center;
  }
  .comment__share .app-button__background {
    padding-left: 12px;
    padding-right: 10px;
  }
  .comment__summary {
    margin-top: -12px;
    padding: 0 10px 28px;
  }
  .comment__table {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .comment__column--full-width-on-smartphone {
    margin-left: -2px;
    grid-column: span 2;
  }
}
.rating {
  padding: 23px 22px;
}

.rating__data {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  background-color: var(--separator-blue);
  border-radius: 12px;
}

.rating__heading {
  background-color: var(--cards-blue);
  padding: 1px 20px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 12px;
  line-height: 18px;
  color: var(--rating-heading-color);
}

.rating__column:first-child .rating__heading {
  border-top-left-radius: 12px;
}

.rating__column:last-child .rating__heading {
  border-top-right-radius: 12px;
}

.rating__table {
  vertical-align: top;
  width: 100%;
  border-collapse: collapse;
  margin: 0; /* conflict */
}

.rating__tbody {
  background-color: transparent; /* conflict */
  border: none;
}

.rating__row {
  background-color: transparent !important; /* conflict */
}

.rating__param {
  border-top: 1px solid var(--panel-blue-head-border);
  padding: 5px 20px !important; /* !important is because of the conflict */
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 12px;
  line-height: 20px;
}

.rating__value {
  border-top: 1px solid var(--panel-blue-head-border);
  padding: 5px 20px !important; /* !important is because of the conflict */
  font-size: 14px;
  line-height: 20px;
  text-align: right;
}

.rating__row:first-child .rating__param,
.rating__row:first-child .rating__value {
  border-top: none;
}

.rating__data::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid var(--panel-blue-head-border);
  border-radius: 12px;
}

@media (max-width: 739.98px) {
  .rating__data {
    display: block;
  }
  .rating__column:first-child .rating__heading {
    border-radius: 12px 12px 0 0;
  }
  .rating__column:last-child .rating__heading {
    border-radius: 0;
  }
}
.chart {
  padding: 14px 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 18px;
  gap: 18px;
}

.chart-null {
  display: none;
  padding: 69px 24px;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}

.chart__legend {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
}

.chart__legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 18px;
  color: var(--text-gray);
  border-radius: 4px;
}

@media (hover: hover){

.chart__legend-item:hover {
  background-color: var(--separator-blue-lighter-hover);
}
}

.chart__legend-color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Enlarged chart: one specific ATA case */
.chart:has(#stats-graph-ata) {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 36px;
  gap: 20px;
}

/* Table alike charts. Consider refactor it the way they have one common class */
.chart:has(#stats-graph-time-to-first-dispatch),
.chart:has(#stats-graph-lateness-today) {
  padding: 0; /* same padding will be set up inside of chart */
}

/* Specific legens adjustments to each chart: */
.chart:has(#stats-graph-requests) .chart__legend {
  max-width: 240px;
}

.chart:has(#stats-graph-promoter-score) .chart__legend {
  margin-left: -10px;
  margin-right: -10px;
}

.chart:has(#stats-graph-ata) .chart__legend {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

@media (max-width: 739.98px) {
  /* Enlarged chart: one specific ATA case */
  /* Table alike charts. Consider refactor it the way they have one common class */
  /* Specific legens adjustments to each chart: */
  .chart:has(#stats-graph-promoter-score) .chart__legend {
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
.chart-null {
  display: none;
  padding: 69px 24px;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}

@media (max-width: 739.98px) {
  .chart-null {
    display: none;
    padding: 37px 24px;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
  }
}
.tracking-data-explanation {
  margin-top: 26px;
  padding-left: 22px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-secondary);
}

@media (max-width: 739.98px) {
  .tracking-data-explanation {
    margin-top: -26px;
    margin-bottom: 26px;
  }
}
.vin__client-name {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 15px;
  line-height: 22px;
  margin-bottom: 12px;
}

.vin__client-name:empty {
  display: none;
}

.vin__body {
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.vin__stat {
  flex-basis: 0;
  flex-shrink: 0;
  flex-grow: 1;
  padding: 10px 18px;
  background-color: var(--panel-blue);
  border-radius: 8px;
}

.vin__stat:has(.vin__value:empty) {
  display: none;
}

.vin__param {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 15px;
  line-height: 22px;
}

.vin__value {
  font-size: 15px;
  line-height: 22px;
}

.vin__edit {
  align-self: center;
}

@media (max-width: 739.98px) {
  .vin__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .vin__edit {
    align-self: flex-end;
  }
}
.score {
  display: inline-flex;
  vertical-align: baseline;
  align-items: baseline;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  gap: 4px;
  font-size: 15px;
  line-height: 18px;
  white-space: nowrap;
}

.score__icon {
  align-self: center;
  stroke: var(--text-link);
  width: 14px;
  height: 14px;
}

.score--preferred-repair-shop {
  font-size: 13px;
  line-height: 16px;
}

.emotion {
  display: flex;
  align-items: center;
  gap: 14px;
}

.emotion__label {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 22px;
  text-transform: capitalize;
}

.received {
  width: 600px;
  padding: 24px;
  padding: var(--dialog-padding);
}

@media (max-width: 639.98px) {
  .received {
    width: 100%;
  }
}
.received .spot {
  margin-left: auto;
  margin-right: auto;
}

.received__heading {
  margin-top: 18px;
  margin-bottom: 0;
  padding-bottom: 14px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  /* delete after redesign is completed: */
  text-align: center !important; /* conflict */
  padding: 0 0 14px !important; /* conflict */
  color: inherit !important; /* conflict */
  text-transform: none !important; /* conflict */
}

.received__claim {
  margin-top: 12px;
  margin-bottom: 32px;
}

.received__sub-heading {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-link);
}

.received__case-number {
  margin-top: 12px;
  padding-bottom: 18px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 15px;
  line-height: 22px;
  text-align: center;
}

.received__dialog {
  font-size: 15px;
  line-height: 22px;
}

.received__expand-addition {
  margin-left: 24px;
  margin-top: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-family: inherit;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-link);
  text-transform: none;
  text-decoration: underline !important;
  -webkit-text-decoration: underline solid currentColor !important;
          text-decoration: underline solid currentColor !important;
  text-decoration-thickness: 1px !important;
  -webkit-text-decoration: 1px underline currentColor !important;
          text-decoration: 1px underline currentColor !important;
  text-decoration-style: dashed !important;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: text-decoration-color 100ms ease;
  transition: text-decoration-color var(--transition-hover);
}

@media (hover: hover){

.received__expand-addition:hover {
  text-decoration-color: transparent !important;
}
}

.received__actions {
  margin-top: 18px;
}

.received__foot-note {
  margin-top: 12px;
  font-style: italic;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

.received__about-service-provider {
  margin-top: 24px;
  font-size: 15px;
  line-height: 22px;
}

.service-provider .sp-name {
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 20px;
  line-height: 28px;
}
.service-provider .sp-company {
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 15px;
  line-height: 20px;
  color: var(--text-gray);
}
.service-provider .sp-phone-number {
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 22px;
}
.service-provider .sp-phone {
  margin-top: 5px;
}
.service-provider .sp-eta {
  margin-top: 5px;
}
.service-provider .sp-icon {
  vertical-align: top;
  margin-right: 4px;
  stroke: currentColor;
}

.side-nav__link {
  display: block;
  -webkit-text-decoration: none;
  text-decoration: none;
  margin: 0 -32px;
  padding: 6px 18px;
  cursor: pointer;
}

@media (hover: hover){

.side-nav__link:hover {
  background-color: var(--sidebar-nav-hover-bg);
}
}

.side-nav__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  overflow: hidden; /* cut blue line */
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 22px;
  color: var(--sidebar-nav-color);
  white-space: nowrap;
}

.side-nav__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  stroke: currentColor;
}

@media (hover: hover){

.side-nav__link--current:hover {
  background-color: transparent;
}
}

.side-nav__link--current .side-nav__inner {
  position: relative;
  background-color: var(--cards-blue);
  color: var(--text-blue);
}

.side-nav__link--current .side-nav__inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  width: 4px;
  height: 100%;
  background-color: var(--sidebar-nav-current-accent);
}

@media (max-width: 739.98px) {
  .side-nav {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
  }
  .side-nav__link {
    margin: 0;
    padding: 0;
    flex-grow: 1;
    flex-basis: 0;
    border-radius: 8px;
  }
  .side-nav__inner {
    border-radius: 8px;
    justify-content: center;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }
  .side-nav__icon {
    display: none;
  }
  .side-nav__link--current .side-nav__inner::before,
  .side-nav__link.active .side-nav__inner::before {
    display: none;
  }
}
.cabinet__wrap {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 248px) minmax(0, 1fr);
  grid-gap: 32px;
  gap: 32px;
}

.cabinet__sidebar {
  /* this is the context for the sticky part below */
  position: relative;
}

.cabinet__detachable-part {
  position: sticky;
  top: 0;
}

.cabinet__side-padding {
  height: 100%;
  padding-top: 32px;
  padding-bottom: 32px;
}

.cabinet__side-container {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--panel-blue);
  border-radius: 14px;
}

.cabinet__inner-side-padding {
  padding: 32px;
}

.cabinet__side-heading {
  margin-top: 0;
  margin-bottom: 16px;
  display: block;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 24px;
  line-height: 30px;
}

.cabinet__body {
  position: relative;
  padding-top: 32px;
}

.cabinet__tab {
  display: none;
}

.cabinet__tab--active {
  display: block;
}

@media (max-width: 739.98px) {
  .cabinet__wrap {
    display: block;
    height: auto;
  }
  .cabinet__sidebar {
    margin-left: calc(-1 * 32px);
    margin-left: calc(-1 * var(--container-h-padding));
    margin-right: calc(-1 * 32px);
    margin-right: calc(-1 * var(--container-h-padding));
    padding-left: 32px;
    padding-left: var(--container-h-padding);
    padding-right: 32px;
    padding-right: var(--container-h-padding);
    border-bottom: 1px solid var(--separator-blue);
  }
  .cabinet__detachable-part {
    height: auto !important; /* Cancel the script */
  }
  .cabinet__side-padding {
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .cabinet__side-container {
    overflow: visible;
  }
  .cabinet__side-container .app-panel {
    padding: 0;
    border-radius: 8px;
  }
  .cabinet__side-container .app-panel__background {
    border-radius: 8px;
  }
  .cabinet__inner-side-padding {
    padding: 0;
  }
  .cabinet__side-heading {
    display: none;
  }
  .cabinet__body {
    padding-top: 16px;
  }
}
.sort {
  cursor: pointer;
}

.sort::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  width: 0;
  height: 0;
  border: 4px solid transparent;
}

.sort.asc::after {
  border-top: 5px solid currentColor;
  border-bottom: none;
}

.sort.desc::after {
  border-bottom: 5px solid currentColor;
  border-top: none;
}

.team {
  padding-bottom: 32px;
}

.team__invite {
  margin-top: 32px;
}

.team__invite:first-child {
  margin-top: 0;
}

.team__sub-heading {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 28px;
  line-height: 35px;
}

.team__description {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-light-gray);
}

.team__send-invite {
  margin-top: 12px;
  min-width: 160px;
  width: -moz-fit-content;
  width: fit-content;
}

.team__send-invite .app-button {
  width: 100%;
}

.team__send-invite .app-button__background {
  padding-left: 32px;
  padding-right: 32px;
}

.team__invite-form {
  margin-top: 16px;
}

.team__options {
  margin-top: 8px;
}

.team__select-action {
  margin-top: 16px;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 274px;
}

.team__submit {
  margin-top: 24px;
  min-width: 160px;
  width: -moz-fit-content;
  width: fit-content;
}

.team__submit .app-button {
  width: 100%;
}

.team__submit .app-button__background {
  padding-left: 32px;
  padding-right: 32px;
}

.team__data {
  margin-top: 48px;
}

.team__data:first-child {
  margin-top: 0;
}

.team__pagination {
  margin-top: 32px;
  padding-bottom: 48px;
}

@media (max-width: 739.98px) {
  .team__search-heading {
    font-size: 18px;
    line-height: 23px;
    padding-bottom: 18px;
    margin-bottom: 12px;
  }
  .team__search {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .team__search-field {
    width: 100%;
  }
  .team__search-submit.app-button,
  .team__search-submit .app-button {
    min-width: 100%;
  }
  .team__heading {
    margin-top: 24px;
  }
}
.abusers__pagination {
  margin-top: 32px;
  padding-bottom: 48px;
}

.inviting__field {
  max-width: 366px;
}

.inviting__message {
  margin-top: 18px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 15px;
  line-height: 20px;
}

.inviting__list {
  margin-top: 16px;
}

.inviting__list .choice {
  page-break-inside: avoid;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

/* 30+ items */
.dialog:has(.inviting__list .choice:nth-child(30)) {
  width: 460px;
}

.dialog:has(.inviting__list .choice:nth-child(30)) .inviting__list {
  -moz-columns: 2;
       columns: 2;
}

@media (max-width: 499.98px) {
  .dialog:has(.inviting__list .choice:nth-child(30)) {
    width: 100%;
  }
}
/* 50+ items */
.dialog:has(.inviting__list .choice:nth-child(50)) {
  width: 700px;
}

.dialog:has(.inviting__list .choice:nth-child(50)) .inviting__list {
  -moz-columns: 3;
       columns: 3;
}

@media (max-width: 739.98px) {
  .dialog:has(.inviting__list .choice:nth-child(50)) {
    width: 100%;
  }
}
.user-location {
  min-width: 240px;
}

.user-location__row {
  margin-top: 8px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.user-location__row:first-child {
  margin-top: 0;
}

.user-location__remove {
  padding: 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 20px;
  color: var(--text-link);
  text-transform: none; /* conflict */
  text-decoration: underline;
  -webkit-text-decoration: underline dashed currentColor;
          text-decoration: underline dashed currentColor;
  text-decoration-thickness: 1px;
  -webkit-text-decoration: 1px underline dashed;
          text-decoration: 1px underline dashed;
  text-underline-offset: 4px;
  transition: text-decoration-color 100ms ease;
  transition: text-decoration-color var(--transition-hover);
  cursor: pointer;
}

@media (hover: hover){

.user-location__remove:hover {
  text-decoration-color: transparent;
}
}

.user-location__add {
  margin-top: 8px;
}

.vouchers__item {
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}

.vouchers__item--empty {
  margin-left: -12px;
  margin-right: -12px;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px dashed var(--border-blue);
  background-color: var(--separator-blue);
  font-style: italic;
  color: var(--text-muted);
}

.voucher__badge {
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 15px;
  line-height: 22px;
  text-transform: capitalize;
}

.voucher__badge--active {
  background-color: var(--success-muted);
  color: var(--white-both-themes);
}

.voucher__badge--used {
  background-color: var(--text-muted);
  color: var(--white-both-themes);
}

.voucher__badge--inactive {
  background-color: var(--warning-muted);
  color: var(--white-both-themes);
}

.vouchers__amount {
  font-size: 15px;
  line-height: 22px;
  white-space: nowrap;
}

.vouchers__creation-time {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
  white-space: nowrap;
}

@media (max-width: 739.98px) {
  .vouchers__creation-time {
    flex-shrink: 0;
    width: 100%;
  }
}
.spot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.spot__icon {
  vertical-align: top;
  stroke: var(--white-both-themes);
}

.spot,
.spot--neutral,
.window--neutral .spot,
.info-bar--neutral .spot,
.info-message--neutral .spot {
  background-image: var(--spot-neutral-image);
}

.spot--success,
.window--success .spot,
.info-bar--success .spot,
.info-message--success .spot {
  background-image: var(--spot-success-image);
}

.spot--warning,
.window--warning .spot,
.info-bar--warning .spot,
.info-message--warning .spot {
  background-image: var(--spot-warning-image);
}

.spot--danger,
.window--danger .spot,
.info-bar--danger .spot,
.info-message--danger .spot {
  background-image: var(--spot-danger-image);
}

.null {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 24px;
}

@media (max-width: 739.98px) {
  .null {
    min-height: 12px;
    font-size: 15px;
    line-height: 22px;
  }
}
.company {
  padding-bottom: 32px;
}

.company__body {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.company__body:first-child {
  margin-top: 0;
}

.company__section .app-panel {
  height: auto;
}

.company__uploaded-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 270px;
  gap: 24px;
}

.company__form {
  padding: 22px 24px 24px;
}

.company__field {
  margin-top: 18px;
}

.company__field:first-child {
  margin-top: 0;
}

.company__submit {
  margin-top: 22px;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
}

.company__submit .app-button__background {
  padding-left: 34px;
  padding-right: 34px;
}

@media (max-width: 739.98px) {
  .company__body {
    display: block;
  }
  .company__section {
    margin-top: 32px;
  }
  .company__section:first-child {
    margin-top: 0;
  }
  .company__section .app-panel {
    height: auto;
  }
  .company__uploaded-logo {
    min-height: 218px;
  }
  .company__submit {
    width: 100%;
  }
  .company__submit .app-button {
    width: 100%;
  }
}
.fleet {
  position: relative;
}

.fleet__import-handler {
  position: absolute;
  right: 0;
  top: -2px;
}

.fleet__import-handler .app-button__background {
  padding-left: 24px;
  padding-right: 24px;
}

.fleet__pagination {
  margin-top: 32px;
  padding-bottom: 48px;
}

.fleet__sub-heading {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 20px;
  line-height: 24px;
}

.fleet__file-description {
  margin-top: 24px;
}

.fleet__upload {
  margin-top: 32px;
}

.fleet__back {
  margin-top: 24px;
}

.fleet__back .app-button__background {
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 739.98px) {
  .fleet__import-handler {
    position: static;
    margin-bottom: 24px;
  }
}
.wysiwyg {
  word-wrap: break-word;
  font-size: 16px;
  font-size: var(--body-font-size);
  line-height: 24px;
  line-height: var(--body-line-height);
}

.wysiwyg p,
.wysiwyg ul,
.wysiwyg ol,
.wysiwyg hr,
.wysiwyg figure,
.wysiwyg blockquote {
  margin-top: 24px;
  margin-top: var(--body-line-height);
  margin-bottom: 24px;
  margin-bottom: var(--body-line-height);
}

.wysiwyg--halved-spacing p,
.wysiwyg--halved-spacing ul,
.wysiwyg--halved-spacing ol,
.wysiwyg--halved-spacing hr,
.wysiwyg--halved-spacing figure,
.wysiwyg--halved-spacing blockquote {
  margin-top: calc(24px / 2);
  margin-top: calc(var(--body-line-height) / 2);
  margin-bottom: calc(24px / 2);
  margin-bottom: calc(var(--body-line-height) / 2);
}

.wysiwyg p:first-child,
.wysiwyg ul:first-child,
.wysiwyg ol:first-child,
.wysiwyg hr:first-child,
.wysiwyg figure:first-child,
.wysiwyg blockquote:first-child {
  margin-top: 0;
}

.wysiwyg p:last-child,
.wysiwyg ul:last-child,
.wysiwyg ol:last-child,
.wysiwyg hr:last-child,
.wysiwyg figure:last-child,
.wysiwyg blockquote:last-child {
  margin-bottom: 0;
}

.wysiwyg h2:first-child,
.wysiwyg h3:first-child,
.wysiwyg h4:first-child {
  margin-top: 0;
}

.wysiwyg h2:last-child,
.wysiwyg h3:last-child,
.wysiwyg h4:last-child {
  margin-bottom: 0;
}

.wysiwyg figure {
  margin-left: 0;
  margin-right: 0;
}

.wysiwyg img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.wysiwyg a {
  /* See .link component */
}

.features {
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.features__head {
  border-bottom: 1px solid var(--separator-blue);
  margin-bottom: 32px;
}

.features__heading {
  margin-top: 0;
  margin-bottom: 0;
}

.features__description {
  margin-top: 20px;
  padding-bottom: 18px;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-gray);
}

.features__section {
  margin-top: 20px;
}

.features__section:first-child {
  margin-top: 0;
}

.radial-gradient-box {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  padding: 9px 25px;
  border: 1.5px solid var(--radial-gradient-box-border);
  background-image: var(--radial-gradient-box-background);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 8px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 21px;
}

@media (max-width: 739.98px) {
  .radial-gradient-box {
    padding-left: 10px;
    padding-right: 10px;
    word-break: break-all;
  }
}
.wysiwyg .radial-gradient-box {
  padding-left: 12px;
  padding-right: 12px;
}

.radial-gradient-box--inline {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

@media (max-width: 739.98px) {
  .radial-gradient-box--inline {
    display: block;
    margin-left: 0;
    margin-top: 8px;
    padding-bottom: 8px;
  }
}
.switch {
  position: relative;
  width: 36px;
  height: 20px;
  margin: 0; /* conflict */
}

.switch-input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.switch-paddle {
  display: block;
  width: 36px;
  height: 20px;
  padding: 2px;
  background-color: var(--switch-paddle-background);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.switch-on {
  display: none;
}

.switch-off {
  display: none;
}

.switch-paddle::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--switch-thumb-off);
  border-radius: 50%;
  transition: background-color 200ms ease;
}

.switch-input:checked ~ .switch-paddle::after {
  left: 18px;
  background-color: var(--switch-thumb-on);
}

.access {
  position: relative; /* for loading indicator */
  padding: 24px;
}

.access__intro {
  font-size: 14px;
  line-height: 22px;
}

.access__alternative-hint {
  margin-top: 12px;
  font-size: 14px;
  line-height: 22px;
}

.access__note {
  margin-top: 2px;
  font-style: italic;
  font-size: 12px;
  line-height: 22px;
  color: var(--text-muted);
}

.access__summary {
  margin-top: 32px;
}

.access__summary-inner {
  display: flex;
  align-items: flex-start;
}

.access__data {
  display: flex;
  align-items: flex-start;
  gap: 129px;
}

.access__param {
  font-size: 12px;
  line-height: 15px;
  color: var(--text-gray);
}

.access__value {
  margin-top: 8px;
  font-size: 20px;
  line-height: 25px;
  word-wrap: break-word;
}

.access__summary--expanded .access__value {
  font-size: 13px;
}

.access__expand {
  margin-top: 8px;
  margin-left: auto;
}

.access__expand .app-button__background {
  padding-left: 27px;
  padding-right: 27px;
}

.access__sub-heading {
  margin-top: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cards-blue);
  margin-bottom: 24px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 20px;
  line-height: 25px;
}

.access__instructions + .access__instructions {
  margin-top: 37px;
}

.access__output {
  margin-top: 24px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 15px;
  line-height: 22px;
}

.access__loading {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom-left-radius: 13px;
  border-bottom-right-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-blue-alpha-75);
}

@media (max-width: 739.98px) {
  .access__summary {
    margin-top: 24px;
  }
  .access__summary-inner {
    display: block;
  }
  .access__data {
    display: block;
  }
  .access__stat {
    margin-top: 24px;
  }
  .access__stat:first-child {
    margin-top: 0;
  }
  .access__expand {
    margin-top: 24px;
  }
  .access__sub-heading {
    padding-bottom: 18px;
    margin-top: 32px;
  }
}
.auth {
  position: relative;
  width: calc(360px + 2 * 32px);
  width: calc(360px + 2 * var(--container-h-padding));
  padding: 26px 32px 40px;
  padding: 26px var(--container-h-padding) 40px;
}

.auth__notification {
  margin-bottom: 40px;
}

.auth__icon {
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 18px;
  margin-left: auto;
  margin-right: auto;
}

.auth__heading {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 32px;
  line-height: 38px;
  text-align: center;
}

.auth__note {
  margin-top: 14px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-gray);
  text-align: center;
}

.auth__note--wide {
  margin-left: -10px;
  margin-right: -10px;
}

.auth__error {
  margin-top: 18px;
  font-size: 15px;
  line-height: 24px;
  color: #D4493F;
  color: var(--error);
  text-align: center;
}

.auth__form {
  margin-top: 32px;
}

.auth__note + .auth__form {
  margin-top: 24px;
}

.auth__error + .auth__form {
  margin-top: 24px;
}

.auth__field {
  margin-top: 20px;
}

.auth__field:first-child {
  margin-top: 0;
}

.auth__submit {
  margin-top: 24px;
}

.auth__submit--tiny {
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}

.auth__note + .auth__submit {
  margin-top: 40px;
}

.auth__submit .app-button {
  width: 100%;
}

.auth__alternation {
  margin-top: 32px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.auth__version {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 10px;
  line-height: 15px;
  color: var(--text-gray);
  opacity: 0.5;
}

@media (max-width: 739.98px) and (max-width: 463.98px) {
  .auth {
    width: calc(100vw - 2 * 32px);
    width: calc(100vw - 2 * var(--container-h-padding));
  }
}
@media (max-width: 739.98px) {
  .auth__heading {
    font-size: 28px;
    line-height: 32px;
  }
  .auth__note {
    margin-top: 8px;
    font-size: 15px;
    line-height: 22px;
  }
  .auth__form {
    margin-top: 24px;
  }
}
.button-alike-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: baseline;
  border: none;
  background-color: transparent;
  border-radius: 8px;
  margin: -8px 0;
  padding: 8px 0;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: 20px;
  color: var(--text-blue);
  text-align: center;
  text-decoration: underline;
  -webkit-text-decoration: underline solid transparent;
          text-decoration: underline solid transparent;
  text-decoration-thickness: 1px;
  -webkit-text-decoration: 1px underline transparent;
          text-decoration: 1px underline transparent;
  text-underline-offset: 0.25em;
  text-transform: none; /* Conflict with global styles */
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: color 100ms ease;
  transition: color var(--transition-hover);
}

@media (hover: hover){

.button-alike-link:hover {
  color: var(--text-link);
}
}

.button-alike-link__icon {
  stroke: currentColor;
}

.gate {
  position: relative;
  width: 100%;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gate__background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--bg-blue-darkest);
  background-image: linear-gradient(to right, transparent 150px, var(--gate-grid-color) 150px,var(--gate-grid-color) 151px, transparent 151px), linear-gradient(to bottom, transparent 150px, var(--gate-grid-color) 150px,var(--gate-grid-color) 151px, transparent 151px);
  background-size: 151px 151px;
  background-position: center top;
}

@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)){
.gate__background {
  background-image: linear-gradient(to right, transparent 150px, var(--gate-grid-color) 150px 151px, transparent 151px), linear-gradient(to bottom, transparent 150px, var(--gate-grid-color) 150px 151px, transparent 151px);
}
}

.gate__background::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: radial-gradient(at center, var(--gate-radial-gradient-start), var(--gate-radial-gradient-middle) 50%, var(--gate-radial-gradient-end));
}

.gate__left-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 211px;
  height: 300px;
  background-image: url("../vectors/gate-lines-left.svg");
  background-size: 211px 344px;
  background-repeat: no-repeat;
  background-position: left bottom;
  opacity: var(--gate-lines-opacity);
}

.gate__right-line {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 214px;
  height: 450px;
  background-image: url("../vectors/gate-lines-right.svg");
  background-size: 214px 546px;
  background-repeat: no-repeat;
  background-position: right top;
  opacity: var(--gate-lines-opacity);
}

@media (min-height: 860px) {
  .gate__left-line {
    height: 344px;
  }
  .gate__right-line {
    height: 546px;
  }
}
.gate__widget {
  position: relative;
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (max-width: 739.98px) {
  .gate__left-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: auto;
    height: 58px;
    background-image: url("../vectors/gate-mobile-lines-top.svg");
    background-size: 740px 58px;
    background-position: center top;
  }
  .gate__right-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 100px;
    background-image: url("../vectors/gate-mobile-lines-bottom.svg");
    background-size: 740px 188px;
    background-position: center top;
  }
  .gate__widget {
    padding-top: 46px;
    padding-bottom: 100px;
  }
}
@media (max-width: 739.98px) and (min-height: 900px) {
  .gate__right-line {
    height: 188px;
  }
  .gate__widget {
    padding-bottom: 170px;
  }
}
.main-content {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.chat-button {
  position: fixed;
  z-index: 900;
  z-index: var(--popup-z-index);
  right: 16px;
  bottom: 16px;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--panel-blue);
  border-radius: 50%;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 11px;
  line-height: 14px;
  color: var(--text-gray);
  text-align: center;
  cursor: pointer;
  opacity: 1;
  transition: all 300ms ease-out;
  transform: translateZ(0px);
}

@media (hover: hover){

.chat-button:hover {
  background-color: var(--panel-blue-hover);
}
}

.chat-button__icon {
  vertical-align: top;
  stroke: currentColor;
}

@media (max-width: 739.98px) {
  .chat-button {
    right: 8px;
    bottom: 8px;
  }
}
@keyframes password-pulse {
  0% {
    transform: scale(1);
    color: var(--text-blue);
  }
  50% {
    transform: scale(1.1);
    color: #D4493F;
    color: var(--error);
  }
  100% {
    transform: scale(1);
    color: var(--text-blue);
  }
}
.password-requirements--pulse-animation {
  animation: password-pulse 1s linear 3;
}

#modal-bg {
  display: none;
  position: fixed;
  z-index: calc(900 - 1);
  z-index: calc(var(--popup-z-index) - 1);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--modal-backdrop);
  backdrop-filter: blur(8px);
}

.loading-type-modal {
  width: 500px;
  height: 180px;
}

@media (max-width: 739.98px) {
  .loading-type-modal {
    width: 280px;
    height: 100px;
    gap: 6px;
    font-size: 16px;
    line-height: 24px;
  }
  .loading-type-modal .app-loading--larger::before {
    width: 32px;
    height: 32px;
  }
}
.copy-phone {
  position: relative;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.copy-phone__handler {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 20px;
  border: none;
  background-color: transparent;
  font-family: inherit;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 15px;
  line-height: 22px;
  text-align: center;
  text-transform: none;
  color: var(--text-link);
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.copy-phone__tooltip {
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 20px;
  background-color: var(--copy-phone-tooltip-background);
  border-radius: 6px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 15px;
  line-height: 22px;
  color: var(--text-blue);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.copy-phone__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--copy-phone-tooltip-background) transparent transparent transparent;
}

@media (hover: hover){

.copy-phone:hover .copy-phone__tooltip {
  visibility: visible;
  opacity: 1;
}
}

.secure-release {
  width: 700px;
  padding: 40px 40px 60px;
}

.secure-release__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-family: inherit;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 28px;
  line-height: 35px;
  color: var(--text-blue);
  text-align: center;
}

.secure-release__loss-level {
  margin-top: 16px;
  font-size: 15px;
  line-height: 22px;
  text-align: center;
}

.secure-release__body {
  margin-top: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}

.secure-release__body .selected {
  background-color: var(--text-blue);
  box-shadow: 0 0 0 1px var(--text-blue);
}

.secure-release__body .app-button__background {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 15px;
}

.secure-release__footer {
  margin-top: 20px;
  margin-bottom: -30px;
  display: flex;
  align-content: center;
  justify-content: center;
}

.secure-release__footer .app-button__background {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 15px;
}

@media (max-width: 539.98px) {
  .secure-release {
    width: 100%;
  }
  .secure-release__heading {
    font-size: 24px;
    line-height: 30px;
  }
  .secure-release__body {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
  }
  .secure-release__body .app-button {
    width: 100%;
  }
  .secure-release__body .app-button__background {
    padding-left: 24px;
    padding-right: 24px;
  }
  .secure-release__footer {
    margin-top: 30px;
  }
}
.claim-number {
  padding: 20px 20px 24px;
}

.claim-number__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-family: inherit; /* conflict */
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-link);
}

.claim-number__case-number {
  margin-top: 12px;
  padding-bottom: 18px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 15px;
  line-height: 22px;
  text-align: center;
}

.claim-number__form {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.claim-number__field {
  flex-grow: 1;
}

.claim-number__status-text {
  margin-top: 16px;
  margin-bottom: -4px;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}

.claim-number__status-text--success {
  color: #085D3A;
  color: var(--success);
}

.claim-number__status-text--success {
  color: #D4493F;
  color: var(--error);
}

@media (max-width: 739.98px) {
  .claim-number__form {
    gap: 16px;
  }
}
.destinations {
  position: relative; /* In case destinations__list will be absolutely positioned */
}

.destinations__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 28px;
  line-height: 35px;
}

.destinations__check-mark {
  margin-top: 5px;
  margin-right: 10px;
  vertical-align: top;
  width: 24px;
  height: 24px;
  stroke: var(--success-text);
}

.destinations__container {
  margin-top: 16px;
  min-height: 174px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  background-color: var(--cards-blue);
  border: 2px solid var(--input-card-border);
  border-radius: 14px;
}

#nearest-location-shortcut-template-target {
  margin-top: -6px;
}

#nearest-location-shortcut-need-location {
  text-align: center;
}

#nearest-location-shortcut-failed {
  text-align: center;
}

.destinations__actions {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.destinations__actions .app-button,
.destinations__actions .button-alike-notification {
  width: auto;
}

.destinations__search {
  margin-top: 16px;
}

.destinations__search .app-button {
  width: 100%;
}

.destinations__manual-input {
  margin-top: 32px;
}

.destinations__sub-heading {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 20px;
  line-height: 24px;
}

.destinations__options {
  margin-top: 16px;
}

.destinations__options .extra-input-action {
  margin-top: -32px;
}

.destinations__list {
  margin-top: 16px;
  width: 510px;
  max-height: 69.75vh;
  overflow-y: auto;
  background-color: var(--separator-blue);
  border: 2px solid var(--input-card-border);
  border-radius: 8px;
}

.destinations__list:empty {
  display: none;
}

.destinations__suggestion {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  border: none;
  border-top: 1px solid var(--panel-blue-head-border);
  padding: 14px 16px;
  background-color: transparent;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover){

.destinations__suggestion:hover {
  background-color: var(--separator-blue-hover);
}
}

.destinations__suggestion:nth-child(even) {
  background-color: var(--even-stripe-blue);
}

@media (hover: hover){

.destinations__suggestion:nth-child(even):hover {
  background-color: var(--even-stripe-blue-hover);
}
}

.destinations__suggestion:first-child {
  border-top: none;
}

.destinations__suggestion:first-child {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.destinations__suggestion:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.destinations__icon {
  flex-shrink: 0;
  stroke: currentColor;
}

.destinations__data {
  flex-grow: 1;
}

.destinations__name {
  margin-right: 6px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 22px;
}

.destinations__name:last-child {
  margin-right: 0;
}

.destinations__distance {
  font-size: 14px;
  white-space: nowrap;
}

.destinations__label {
  margin-top: 4px;
}

.destinations__address {
  margin-top: 1px;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-gray);
}

.destinations__notes-list {
  margin-top: 2px;
}

.destinations__note {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-note);
}

.destinations__phone {
  margin-top: 3px;
  display: block;
  flex-shrink: 0;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 15px;
  line-height: 22px;
  color: inherit;
}

@media (hover: hover){

.destinations__phone:hover {
  color: inherit;
}
}

@media (max-width: 739.98px) {
  .destinations__heading {
    font-size: 24px;
    line-height: 30px;
  }
  .destinations__sub-heading {
    font-size: 18px;
    line-height: 22px;
  }
  .destinations__list {
    width: auto;
  }
  .destinations__suggestion {
    position: relative;
    padding-left: 44px;
    display: block;
  }
  .destinations__icon {
    position: absolute;
    left: 12px;
    top: 15px;
  }
  .destinations__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
}
.fleet-loading {
  padding: 24px !important;
}

.fleet-null {
  width: 510px;
  padding: 32px !important;
  text-align: center;
}

.fleet-null__icon {
  stroke: #D4493F;
  stroke: var(--error);
  vertical-align: top;
  width: 32px;
  height: 32px;
}

.fleet-null__message {
  margin-top: 8px;
  font-size: 15px;
  line-height: 20px;
  color: #D4493F;
  color: var(--error);
}

@media (max-width: 739.98px) {
  .fleet-null {
    width: auto;
  }
}
.fleet-select {
  padding: 24px !important;
  background-color: var(--panel-blue) !important;
  font-size: 15px !important;
  line-height: 22px !important;
  color: var(--text-gray) !important;
  text-align: center;
}

.fleet-vehicle {
  position: relative;
  width: 691px;
  background-color: transparent !important; /* conflict with vendor styles */
  padding: 12px 48px 12px 14px !important;
  display: flex;
  align-items: flex-start;
  white-space: normal !important;
  color: var(--text-blue) !important; /* conflict with vendor styles */
}

@media (hover: hover){

.fleet-vehicle:hover {
  background-color: var(--separator-blue-hover) !important;
}
}

.fleet-vehicle:nth-child(odd) {
  background-color: var(--even-stripe-blue) !important;
}

@media (hover: hover){

.fleet-vehicle:nth-child(odd):hover {
  background-color: var(--even-stripe-blue-hover) !important;
}
}

.fleet-vehicle.active {
  color: var(--text-blue);
}

.fleet-vehicle.active::after {
  content: "";
  display: block;
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  background-color: var(--text-blue);
  -webkit-mask-image: url("../vectors/check-white.svg");
          mask-image: url("../vectors/check-white.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

.fleet-vehicle-icon {
  flex-shrink: 0;
  width: 30px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fleet-vehicle-svg {
  vertical-align: top;
  width: auto;
  height: 14px;
  stroke: var(--text-blue);
}

.fleet-vehicle-result {
  margin-left: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-blue);
}

.fleet-vehicle-extra {
  margin-left: 3px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-blue);
}

@media (max-width: 739.98px) {
  .fleet-vehicle {
    width: auto;
    display: grid;
    grid-template-columns: auto 1fr;
  }
  .fleet-vehicle-extra {
    grid-column: span 2;
  }
}
#vin-vehicle-number-license-plate,
#search-by-vin,
#search-by-license-plate,
#search-by-vehicle-number {
  text-transform: uppercase;
}

#vin-vehicle-number-license-plate:-moz-placeholder, #search-by-vin:-moz-placeholder, #search-by-license-plate:-moz-placeholder, #search-by-vehicle-number:-moz-placeholder {
  text-transform: none;
}

#vin-vehicle-number-license-plate:placeholder-shown,
#search-by-vin:placeholder-shown,
#search-by-license-plate:placeholder-shown,
#search-by-vehicle-number:placeholder-shown {
  text-transform: none;
}

#vin-vehicle-number-license-plate-edit {
  display: none;
}

.policy-notes {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.policy-notes__icon {
  flex-shrink: 0;
  stroke: currentColor;
}

.policy-notes__text {
  font-size: 15px;
  line-height: 20px;
}

.policy-search {
  position: relative;
}

.policy-search__navigation {
  margin-top: -14px; /* to make the same height as app-label so it matches input field in the neighbour column */
  padding-bottom: 4px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 12px;
}

.policy-search__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-left: -1.5px; /* Separator width */
  border: none;
  background-color: transparent;
  padding: 8px 16px;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 15px;
  line-height: 20px;
  color: var(--text-link);
  white-space: nowrap;
  -webkit-text-decoration: none;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
}

@media (hover: hover){

.policy-search__tab:not(.policy-search__tab--current):hover {
  background-color: var(--separator-blue);
}
}

.policy-search__tab::before {
  content: "";
  position: absolute;
  left: -6.75px; /* half a gap */
  top: 12px;
  display: block;
  width: 1.5px;
  height: 16px;
  background-color: var(--text-gray);
  opacity: 0.5;
  pointer-events: none;
}

.policy-search__tab:first-child:before {
  display: none;
}

.policy-search__or + .policy-search__tab:before {
  display: none;
}

.policy-search__or {
  padding-top: 8px;
  font-size: 15px;
  line-height: 20px;
  color: var(--sidebar-nav-color);
}

.policy-search__tab-icon {
  vertical-align: top;
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.policy-search__tab--current {
  cursor: default;
  color: var(--text-link); /* Default orange */
  background-color: transparent;
}

.policy-search__tab--navigational {
  color: var(--text-link); /* Default orange */
  background-color: transparent;
}

.policy-search__form {
  display: flex;
  align-items: center;
  gap: 12px;
}

.policy-search__icon {
  flex-shrink: 0;
  stroke: var(--sidebar-nav-color);
}

.policy-search__field {
  flex-basis: 0;
  flex-grow: 1;
}

.policy-search__commercial {
  flex-shrink: 0;
}

.policy-search__go {
  flex-shrink: 0;
}

.policy-search__output {
  margin-left: 32px;
}

.policy-search__alternative-action {
  margin-top: 12px;
  margin-left: 32px;
}

.policy-search__dropdown {
  position: absolute;
  top: calc(100% + 9px); /* If you want "Accident tow? ..." to be visible */
  left: 32px;
  right: 0;
  z-index: 2000;
  min-width: 640px;
}

@media (max-width: 739.98px) {
  .policy-search__dropdown {
    min-width: 0;
  }
  .policy-search__or {
    text-align: center;
    padding-top: 0;
  }
}
@media (min-width: 740px) {
  .flipper {
    perspective: 1000px;
  }
  .flipper__body {
    position: relative;
    transition: 0.6s;
    transform-style: preserve-3d;
  }
  .flipper--flipped .flipper__body {
    transform: rotateY(180deg) !important;
  }
  /* hide back of pane during swap */
  .flipper__front,
  .flipper__back {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; /* sides will be switching absolute/static position so we need coordinates */
    backface-visibility: hidden;
  }
  .flipper__front {
    position: static;
    z-index: 2;
    transform: rotateY(0deg); /* Must heave for Firefox. Otherwise it won't hide the front of flipping */
  }
  .flipper__back {
    position: absolute;
    z-index: 1;
    transform: rotateY(180deg);
  }
  .flipper--flipped .flipper__front {
    position: absolute;
  }
  .flipper--flipped .flipper__back {
    position: static;
  }
  .flipper--vertical {
    position: relative;
    height: 100%;
  }
  .flipper--vertical.flipper--flipped .flipper__body {
    transform: rotateX(-180deg) !important;
  }
  .flipper--vertical .flipper__back {
    transform: rotateX(180deg);
  }
}
@media (max-width: 739.98px) {
  /* hide back of pane during swap */
  .flipper__front {
    display: block;
    animation: slideDownKeyframes 1200ms cubic-bezier(0.22, 1, 0.36, 1);
    animation: var(--slide-down-animation);
  }
  .flipper__back {
    display: none;
  }
  .flipper--flipped .flipper__front {
    display: none;
  }
  .flipper--flipped .flipper__back {
    display: block;
    animation: slideDownKeyframes 1200ms cubic-bezier(0.22, 1, 0.36, 1);
    animation: var(--slide-down-animation);
  }
}
.verify-order-text {
  width: 100%;
  vertical-align: top;
  padding: 0;
  border: none;
  background-color: transparent;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.verify-order-panel {
  position: relative;
  min-height: 88px;
  display: flex;
  align-items: center;
  padding: 22px 40px 22px 103px;
  background-color: var(--panel-blue);
  border-radius: 14px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 22px;
  cursor: pointer;
  transition: background-color 100ms ease;
  transition: background-color var(--transition-hover);
}

@media (hover: hover){

.verify-order-panel:hover {
  background-color: var(--panel-blue-hover);
}
}

.verify-order-inner {
  /* This wrapper is necessary to create a flex child that will be a one and only child in there */
}

.verify-order-check {
  position: absolute;
  top: 50%;
  left: 30px;
  margin-top: -22px;
  width: 44px;
  height: 44px;
  background-image: var(--choice-huge-checkbox-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.verify-order-check.checked {
  background-image: var(--choice-huge-checkbox-checked-image);
}

@media (max-width: 739.98px) {
  .verify-order-panel {
    min-height: 70px;
    padding: 14px 40px 14px 71px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 21px;
  }
  .verify-order-inner {
    /* This wrapper is necessary to create a flex child that will be a one and only child in there */
  }
  .verify-order-check {
    left: 20px;
    margin-top: -16px;
    width: 32px;
    height: 32px;
  }
}
.confirm-location {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  margin-top: -60px;
  transform: translateX(-50%) translateY(-15px);
  padding: 10px 26px;
  background-color: var(--blue-both-themes);
  font-family: inherit;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 14px;
  line-height: 20px;
  color: var(--white-both-themes);
  white-space: nowrap;
  text-align: center;
  border-radius: 20px;
  transition: all 250ms ease-in-out;
  opacity: 0.3;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}

.confirm-location.show {
  box-shadow: 0 5px 6px 0 var(--action-shadow-both-themes);
  transform: translateX(-50%) translateY(0px);
  opacity: 1;
}

.confirm-location::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  left: 50%;
  margin-left: -10px;
  bottom: -17px;
  border-style: solid;
  border-width: 10px;
  border-color: var(--blue-both-themes) transparent transparent transparent;
}

.confirm-location::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 1.5em;
  left: 50%;
  margin-left: -1px;
  bottom: -1.6em;
  background: var(--blue-both-themes);
}

/* Little dot under the bubble. It is actually static and always positioned in the center */
.location-pin {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  background-color: var(--blue-both-themes);
  width: 6px;
  height: 6px;
  border-radius: 3px;
  margin-top: -3px;
  margin-left: -3px;
}

.map-overlay {
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 50;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--modal-backdrop);
  backdrop-filter: blur(3px);
  border-radius: 10px;
  display: none;
}
.map-overlay.show {
  display: block;
}
.map-overlay.warning {
  background: var(--map-overlay-warning-gradient);
}
.map-overlay.disable-changes .change {
  display: none;
}

.location-text-locked-overlay .error-message {
  display: none;
}

.location-text-locked-overlay.error {
  display: block;
}
.location-text-locked-overlay.error .waiting-message {
  display: none;
}
.location-text-locked-overlay.error .error-message {
  display: block;
}

@media (max-width: 739.98px) {
  .map-overlay {
    top: -10px;
    bottom: -10px;
    height: calc(100% + 20px);
  }
}
#job-detail-quote-payment-placeholder .just-do-it-modal {
  margin-top: 24px;
  background-color: transparent;
  position: static;
  transform: none;
}

.quote {
  margin-top: 20px;
  padding-left: 24px;
  padding-right: 24px;
  background-color: var(--panel-blue);
  background-image: var(--quote-background-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 8px;
}

/* loading */
.customer-quote-limit-reason {
  padding-top: 5px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--transparent-hover);
  margin-bottom: 13px;
  font-size: 13px;
  line-height: 20px;
  color: var(--text-blue);
}

.customer-cc-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 24px;
}

.customer-cc-row .cc-icon {
  vertical-align: top;
  stroke: currentColor;
}

.customer-cc-row .remove-cc {
  margin-left: auto;
  margin-right: -14px;
}

/* Overrode alert */
.quote:has(.just-did-it-row:not(.hidden)) {
  padding-left: 0;
  padding-right: 0;
}

.quote:has(.just-did-it-row:not(.hidden)) .info-bar {
  border-radius: 8px;
  padding-left: 24px;
}

.quote:has(.just-did-it-row:not(.hidden)) .info-bar__message {
  flex-grow: 1;
}

.customer-amount-owed-desc {
  margin-top: 24px;
  margin-bottom: 10px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 20px;
  line-height: 25px;
}

.customer-balance {
  display: flex;
  align-items: center;
  gap: 12px;
}

.customer-add-cc-row {
  margin-left: auto;
}

.amount-owed {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 18px;
  line-height: 23px;
  color: var(--amount-owed-color);
}

.customer-just-do-it-row {
  margin-top: 14px;
}

.popup .customer-just-do-it-row {
  margin-top: 14px;
}

.quote:not(:has(.customer-just-do-it-row.hidden)) {
  padding-bottom: 24px;
}

.customer-just-do-it-row .app-button {
  width: 100%;
}

.customer-just-do-it-row .app-button__background {
  font-size: 14px;
}

.customer-expense-override {
  border: 1px solid var(--border-blue);
  background-color: var(--customer-expense-override-background);
  border-radius: 12px;
  padding: 20px 24px 24px;
}

.quote:has(.customer-quote-fully-covered:not(.hidden)) {
  padding-left: 0;
  padding-right: 0;
}

.quote:has(.customer-quote-fully-covered:not(.hidden)) .info-bar {
  border-radius: 8px;
  padding-left: 24px;
}

.quote:has(.customer-quote-fully-covered:not(.hidden)) .info-bar__message {
  flex-grow: 1;
}

.customer-quote-fully-covered {
  display: flex;
  align-content: center;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  line-height: 24px;
}

.customer-quote-fully-covered__icon {
  vertical-align: top;
  stroke: currentColor;
}

.edit-just-do-it {
  margin: -5px -5px -5px 2px;
}

/* Make info-bar smaller in sidebar when -- this is the notification
   that appears in there after expense are overridden
 */
.quote .info-bar {
  padding: 15px 20px !important;
  gap: 16px;
}

.quote .info-bar__message {
  margin-right: 20px;
}

.text-note {
  padding-top: 8px;
  font-weight: 300;
  font-weight: var(--weight-normal);
  font-style: italic;
  font-size: 14px;
  line-height: 18px;
}

.hide {
  display: none !important;
}

/* similar to original class in Foundation */
.show-for-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* similar to original class in Foundation */
.selector {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  vertical-align: top;
  height: 40px;
  margin: 0; /* conflict with global styles */
  padding: 7px 34px 7px 8px;
  background-color: var(--separator-blue); /* reset grey background in some cases, such as <select> */
  background-image: url("../vectors/chevron-down-grey.svg");
  background-size: 22px 22px;
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-origin: padding-box; /* conflict with global styles */
  background-clip: padding-box; /* hack for iOS to make box-shadow works (same as border-radius in the past) */
  border: 1px solid var(--border-blue);
  outline: none;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 15px;
  line-height: 24px;
  color: var(--text-gray);
  opacity: 1; /* reset select:disabled default fade on iOS */
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
  transition: background-color var(--transition-hover), border-color var(--transition-hover), color var(--transition-hover);
}

.selector--language {
  width: 100%;
}

.selector--theme {
  width: -moz-fit-content;
  width: fit-content;
}

@media (hover: hover){

.selector:hover {
  box-shadow: none; /* same as base, not hover input */
  border-color: var(--border-blue); /* same as base, not hover input */
  background-color: var(--separator-blue-hover);
}
}

.selector:focus-visible {
  border-color: var(--border-blue-focus);
  transition: none;
  /* Conflict with global styles: */
  background-color: var(--separator-blue-hover);
  box-shadow: none;
  border: 1px solid var(--border-blue-focus) !important;
}

/* Pretty tight in these screen resolution, so manually stretch things down: */
@media (min-width: 740px) and (max-width: 1339.98px) {
  .selector {
    padding-left: 8px;
    padding-right: 25px;
    background-size: 20px 20px;
    background-position: right 4px center;
    font-size: 15px;
  }
}
@media (max-width: 739.98px) {
  .selector {
    font-size: 16px; /* not less than 16px (otherwise mobile browsers will zoom in on focus) */
  }
}
.settings {
  position: relative;
  flex-shrink: 0;
}

.settings__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  background-color: var(--separator-blue);
  border: 1px solid var(--border-blue);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 100ms ease, border-color 100ms ease;
  transition: background-color var(--transition-hover), border-color var(--transition-hover);
}

@media (hover: hover){

.settings__toggle:hover {
  background-color: var(--separator-blue-hover);
}
}

.settings__toggle:focus-visible {
  border-color: var(--border-blue-focus);
  transition: none;
}

.settings__icon {
  width: 20px;
  height: 20px;
  stroke: var(--text-gray);
  fill: none;
  transition: stroke 100ms ease;
  transition: stroke var(--transition-hover);
}

@media (hover: hover){

.settings__toggle:hover .settings__icon {
  stroke: var(--text-blue);
}
}

.settings__dropdown {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 8px);
  right: 0;
  padding-top: 8px;
  padding-bottom: 12px;
  background-color: var(--panel-blue);
  border: 1px solid var(--border-blue);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 100ms ease, visibility 100ms ease, transform 100ms ease;
  transition: opacity var(--transition-hover), visibility var(--transition-hover), transform var(--transition-hover);
}

.settings--open .settings__dropdown {
  opacity: 1;
  visibility: visible;
}

.settings__section {
  margin-top: 12px;
}

.settings__section:first-child {
  margin-top: 0;
}

.settings__label {
  padding: 12px 22px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 13px;
  line-height: 18px;
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 3px;
}

.settings__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 64px 8px 22px;
  background-color: transparent;
  border: none;
  font-family: inherit;
  font-weight: 400;
  font-weight: var(--weight-medium);
  font-size: 15px;
  line-height: 22px;
  color: var(--text-gray);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: background-color 100ms ease, color 100ms ease;
  transition: background-color var(--transition-hover), color var(--transition-hover);
}

@media (hover: hover){

.settings__option:hover {
  background-color: var(--separator-blue);
  color: var(--text-blue);
}
}

.settings__option:focus-visible {
  background-color: var(--separator-blue);
  color: var(--text-blue);
}

.settings__option--active {
  color: var(--text-blue);
}

.settings__option--active::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  background-color: var(--text-link);
  -webkit-mask-image: url("../vectors/check-orange.svg");
          mask-image: url("../vectors/check-orange.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
}

@media (max-width: 739.98px) {
  .settings__toggle {
    display: none;
  }
  .settings__dropdown {
    position: static;
    background-color: transparent;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
  }
}
#service-authorization-container,
#secondary-release-container,
#service-actions-required-container {
  margin-top: 34px;
}

.service-action-card {
  position: relative;
  /* imitate app-pane: */
  margin: -2px;
  padding: 2px;
  border-radius: 14px;
  overflow: hidden; /* cut status line (red, yellow etc) */
}

.service-action-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.service-action-card--yellow::before {
  background: linear-gradient(var(--action-modal-yellow-start), var(--action-modal-yellow-end));
}

.service-action-card--red::before {
  background: linear-gradient(var(--action-modal-red-start), var(--action-modal-red-end));
}

.service-action-card--green::before {
  background: linear-gradient(var(--action-modal-green-start), var(--action-modal-green-end));
}

.service-action-card--blue::before {
  background: linear-gradient(var(--action-modal-blue-start), var(--action-modal-blue-end));
}

.service-action-card--purple::before {
  background: linear-gradient(var(--action-modal-purple-start), var(--action-modal-purple-end));
}

.service-auth__header {
  display: flex;
  align-items: center;
  padding: 20px 20px 16px 20px;
}

.service-auth__icon {
  flex-shrink: 0;
  margin-right: 12px;
  stroke: var(--action-modal-yellow-start); /* yellow by default */
  width: 24px;
  height: 24px;
}

.service-action-card--yellow .service-auth__icon {
  stroke: var(--action-modal-yellow-start);
}

.service-action-card--red .service-auth__icon {
  stroke: var(--action-modal-red-start);
}

.service-action-card--green .service-auth__icon {
  stroke: var(--action-modal-green-start);
}

.service-action-card--blue .service-auth__icon {
  stroke: var(--action-modal-blue-start);
}

.service-action-card--purple .service-auth__icon {
  stroke: var(--action-modal-purple-start);
}

.service-auth__title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
}

.service-auth__item {
  padding: 15px 20px 20px;
  border-top: 1px solid var(--panel-blue-gradient-start);
}

.service-auth__message {
  font-size: 14px;
  line-height: 20px;
}

.service-auth__message strong {
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 16px;
  color: var(--text-link);
}

.service-auth__reason {
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
}

.service-auth__request-time {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-muted);
}

.service-auth__timestamp {
  opacity: 0.8;
}

.service-auth__actions {
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.authorization-processing {
  text-align: center;
  padding: 20px;
  color: #856404;
}
.authorization-processing .spinner {
  display: inline-block;
  margin-right: 10px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--action-modal-yellow-start);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.authorization-indicator {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}
.authorization-indicator__icon {
  color: var(--action-modal-yellow-start);
  animation: pulse 2s ease-in-out infinite;
}

.table__cell--status {
  position: relative;
}
.table__cell--status .state-pill {
  display: inline-block;
  vertical-align: middle;
}
.table__cell--status .authorization-indicator {
  position: relative;
  top: -1px;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
#service-authorization-modal .spinner,
#secondary-release-modal .spinner,
#service-action-modal .spinner {
  display: inline-block;
  margin-right: 8px;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

#job-issues-container {
  margin-top: 34px;
}

.job-issues {
  padding: 20px 22px 22px;
}

.job-issues__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  font-size: 18px;
  line-height: 24px;
}

.job-issues__list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.job-issues__item {
  display: flex;
  align-items: flex-start;
  border: 1px solid;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-blue);
}

.job-issues__item--warning {
  border-color: var(--job-issues-warning-border);
  background-color: var(--job-issues-warning-background);
  color: var(--job-issues-warning-text);
}

.job-issues__item--info {
  border-color: var(--job-issues-info-border);
  background-color: var(--job-issues-info-background);
  color: var(--job-issues-info-text);
}

.job-issues__icon {
  margin-right: 8px;
  flex-shrink: 0;
  stroke: currentColor;
}

.job-issues__text {
  flex: 1;
}

.job-issues__highlight {
  margin-right: 4px;
  font-weight: 500;
  font-weight: var(--weight-semi-bold);
  text-transform: capitalize;
}

.xml-import-input-container {
  margin-top: 16px;
}

.xml-import-error {
  margin-top: 12px;
  padding: 8px 12px;
  background-color: rgba(220, 53, 69, 0.1);
  border-radius: 4px;
  color: #dc3545;
}

.xml-import-status {
  margin-top: 12px;
  padding: 8px 12px;
  background-color: rgba(40, 167, 69, 0.1);
  border-radius: 4px;
  color: #28a745;
}

.xml-import-needs-attention {
  position: relative;
}

.xml-import-needs-attention::before {
  content: "Needs attention" !important;
  -webkit-mask: none !important;
          mask: none !important;
  position: absolute !important;
  left: -36px !important;
  top: -3px !important;
  bottom: -3px !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  margin-right: 0 !important;
  writing-mode: vertical-lr !important;
  transform: rotate(-180deg) !important;
  padding: 2px 5px !important;
  background-color: #D4493F !important;
  background-color: var(--error) !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  line-height: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #FFFFFF !important;
  text-align: center !important;
  white-space: nowrap !important;
}

@media (max-width: 1349.98px) {
  .xml-import-needs-attention::before {
    left: -22px !important;
  }
}
/* In some cases (see step 3) there could be a question mark on the left side that assigned on a different selector */
.xml-import-needs-attention [data-field-name]::before {
  display: none;
}

/* Smaller variant for vehicle field holders */
.vehicle__field.xml-import-needs-attention {
  padding: 8px;
  margin: -8px;
  margin-bottom: 8px;
}

.vehicle__field.xml-import-needs-attention::before {
  content: "Required";
  top: -8px;
  left: 8px;
  font-size: 9px;
  padding: 1px 6px;
}

@media (max-width: 739.98px) {
  .xml-import-needs-attention::before {
    left: 10px !important;
    top: -10px !important;
    bottom: auto !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
  }
  /* Smaller variant for vehicle field holders */
}
/* This should always be in the bottom in order to override
 * "display: flex;" or "display: grid;" inside of components used for styling:
 */
[hidden] {
  display: none;
}

.hidden {
  display: none !important;
}

/* Collection of random fixes and overrides from all over the project */
.policy-additional-info {
  margin-top: 18px;
}

.claim-number-above-policy-search {
  /* display: block / none happens here */
  margin-bottom: 12px;
}

.customer-coverage {
  margin-top: 16px;
}

.warranty-coverage-panel {
  padding: 12px;
  background-color: var(--separator-blue);
  border: 1px solid var(--border-blue);
  border-radius: 6px;
}

.warranty-coverage-status {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 12px;
}
.warranty-coverage-status.warranty-active {
  background-color: var(--success-background);
  border: 1px solid var(--success-border);
  color: var(--success-text);
}
.warranty-coverage-status.warranty-active .warranty-status-icon::before {
  content: "✓";
  margin-right: 8px;
  font-weight: bold;
}
.warranty-coverage-status.warranty-expired {
  background-color: var(--warning-background);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
}
.warranty-coverage-status.warranty-expired .warranty-status-icon::before {
  content: "⚠";
  margin-right: 8px;
}

.warranty-coverage-override .choice {
  width: 100%;
}

.customer-identifier-alt {
  margin-top: 16px;
}

.service-job-notes {
  padding-bottom: 6px;
  font-size: 14px;
  line-height: 18px;
}

.danger-zone-conditions {
  font-size: 16px;
  line-height: 22px;
}

.danger-zone-conditions:first-letter {
  text-transform: uppercase;
}

.danger-zone-instructions {
  margin-bottom: 0;
}

#destination-nearby-map {
  height: 100%;
  border-radius: 8px;
}

.success-message,
.error-message {
  display: none;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 15px;
  line-height: 20px;
}

.error-message {
  color: #D4493F;
  color: var(--error);
}

.success-message {
  color: #085D3A;
  color: var(--success);
}

.warning {
  color: #D4493F;
  color: var(--error);
}

.account-feature {
  position: relative; /* for loading indicator */
}

.error {
  color: #D4493F;
  color: var(--error);
}

.datetime-picker-holder {
  display: none;
}

#token_expired {
  display: none;
}

#forgot-email-success {
  display: none;
}

#reset-password-holder {
  display: none;
}

#account-selector-modal.loading-account {
  z-index: 890;
}

#preorder-service-provider .almost,
#preorder-service-provider .too-slow,
#preorder-service-provider .provider-details {
  display: none;
}
#preorder-service-provider.almost .almost {
  display: block;
}
#preorder-service-provider.almost #new-request-confirm {
  display: none;
}
#preorder-service-provider.too-slow .too-slow {
  display: block;
}
#preorder-service-provider.details #new-request-confirm {
  display: none;
}
#preorder-service-provider.details .provider-details {
  display: block;
}

#login-modal {
  display: none;
}

.login-with-saml-modal {
  display: none;
}

/* Couldn't test during 2025 ui redesign, so keeping it untouched */
#cc-on-file-job-details-payment-modal .payment-status {
  display: block;
}
#cc-on-file-job-details-payment-modal .success {
  color: #085D3A;
  color: var(--success);
}
#cc-on-file-job-details-payment-modal .failed {
  color: #D4493F;
  color: var(--error);
}
#cc-on-file-job-details-payment-modal .loading {
  color: gray;
}

/* dashboard state select */
.stats-state-select {
  position: relative; /* associated-menu (dropdown) absoluted here */
}

/* Panels with questions under service type selection, such as:
   - Did the vehicle stall while driving and/or has a jump start already been attempted?
   - Will the vehicle need a tow after winching?
   and so on:
*/
.panel-details {
  display: none;
}

/* If not 100% (or another value), absolutely positioned map inside will get 0px height */
.map-canvas {
  height: 100%;
}

/* This class was created before redesign and that will be pretty hard to find
   all of the instances to revamp it. Leaving it as it is.
*/
.disabled {
  position: relative;
  pointer-events: none;
  opacity: 0.5;
}

/* buttons at the bottom of the Job Details page and Reimbursement Detail page */
.extra-actions.complete,
.extra-actions.cancelled {
  display: none;
}

/* Conditional field "Additional Info" */
#customer-additional-info {
  display: none;
}

/* Apparently it's the error class */
.remind-no-value {
  border: 2px solid #D4493F;
  border: 2px solid var(--error);
  color: #D4493F;
  color: var(--error);
}

select.remind-no-value {
  background-image: var(--chevron-down-error-image);
}
/*# sourceMappingURL=app.css.map */