/*
  =================================================================================================================
  Variable definitions. Define fonts, colors and logo-path here.
  =================================================================================================================
*/
@font-face {
  font-family: "akzidenz-grotesk";
  src: url(../../themes/standard-theme/assets/fonts/AktivGrotesk_W_Bd.eot);
  src: url(../../themes/standard-theme/assets/fonts/AktivGrotesk_W_Bd.eot?#iefix) format('embedded-opentype'), url(../../themes/standard-theme/assets/fonts/AktivGrotesk_W_Bd.woff2) format("woff2"), url(../../themes/standard-theme/assets/fonts/AktivGrotesk_W_Bd.woff) format("woff");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}
@font-face {
  font-family: "akzidenz-grotesk";
  src: url(../../themes/standard-theme/assets/fonts/AktivGrotesk_W_MdIt.eot);
  src: url(../../themes/standard-theme/assets/fonts/AktivGrotesk_W_MdIt.eot?#iefix) format('embedded-opentype'), url(../../themes/standard-theme/assets/fonts/AktivGrotesk_W_MdIt.woff2) format("woff2"), url(../../themes/standard-theme/assets/fonts/AktivGrotesk_W_MdIt.woff) format("woff");
  font-display: auto;
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
}
@font-face {
  font-family: "akzidenz-grotesk";
  src: url(../../themes/standard-theme/assets/fonts/AktivGrotesk_W_Md.eot);
  src: url(../../themes/standard-theme/assets/fonts/AktivGrotesk_W_Md.woff2) format("woff2"), url(../../themes/standard-theme/assets/fonts/AktivGrotesk_W_Md.woff2) format("woff");
  font-display: auto;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
}
.customer-header {
  padding-top: 25px;
  padding-left: 120px;
  background-image: url(../../themes/standard-theme/assets/logo.png);
  background-repeat: no-repeat;
  background-size: auto 80px;
  background-position-y: 5px;
  background-position-x: 50px;
}
.customer-header-hcm {
  background-image: url(../../themes/standard-theme/assets/logo_white.png);
}
/*
 * Time picker.
 *
 * Every selector is scoped under the authored marker class, so nothing here reaches the rest of the
 * form. The frame is drawn on the container, not on the inputs: in range mode two inputs and a word
 * have to read as one field, which is the same shape the telephone widget uses for its country code
 * and number.
 *
 * State styling is deliberately keyed on the theme's own hooks rather than re-implemented, so the
 * field follows the form when the theme changes: .guideActiveField for focus, .validation-failure
 * for errors, [data-disabled] for disabled and .kttg-field-locked for locked.
 */
.widget_ajila-forms-tg-timepicker {
  /* The clock sits inside the field, ahead of the inputs, per the design library. */
  /*
   * The inner inputs never draw a border of their own. The theme puts focus and error borders on
   * input elements, which is right for an ordinary field but wrong here, where the container is
   * the field frame; without this the field showed a border around the frame and another around
   * each value.
   *
   * The selector has to outrank the theme's error rule, `.validation-failure.af-field-filled input`
   * (0,2,1) in overrides.less, which carries !important. Matching its !important is not enough:
   * where both are important the more specific selector still wins, and scoping under the marker
   * class alone only reaches (0,2,0). Naming the field-node class the marker sits on, and the
   * container, takes this to (0,3,1).
   */
  /* Hover, which the theme does not define for the field frame. */
  /* Focus. The theme's own rule keys on the guideActiveField class, which AEM sets from the control
     it knows about; here that is the hidden input, which never takes focus. The frame reacts to
     focus landing on any of its inputs instead, and the component deliberately does not set
     guideActiveField, because that would make the theme border the inner input as well.
     A field in error keeps its red frame while the user corrects it, as every other field in the
     theme does; this rule outranked the error rule below and turned it blue. */
  /* Error. The theme paints the inputs, the frame is ours. */
  /* A single time is coloured as a whole. Scoped to single mode, because in a range this rule also
     painted the half that is fine, and the per-half rule below then had no visible effect. */
  /* In range mode only the half that is actually wrong is coloured, in both input variants. */
  /* Disabled. The greyed icon comes from the text colour the theme sets; see the icon rule above. */
  /* Below the theme's mobile breakpoint the operating system's own picker replaces the text input,
     because typing a time on a phone keyboard is error prone. Both are rendered; only one shows. */
  /* A native time input ignores placeholder and shows '--:--' (Chrome) or nothing (iOS) instead, so
     the authored placeholder is laid over it while it is empty and not being edited. The input's
     own text is hidden meanwhile; the selector outranks the error colour for single mode. */
}
.widget_ajila-forms-tg-timepicker .tg-timepicker__container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  height: 40px;
  padding-left: 16px;
  background-color: #ffffff;
  border: 1px solid transparent;
  border-bottom: 1px solid #327a1e;
}
.widget_ajila-forms-tg-timepicker .tg-timepicker__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 8px;
  /* A click on the icon reaches the frame, which moves focus into the field. */
  pointer-events: none;
}
.widget_ajila-forms-tg-timepicker .tg-timepicker__icon svg {
  /*
       * The icon takes the text colour rather than carrying its own, because in the design it
       * always matches the value beside it: dark on an ordinary field, dark on a locked one, grey
       * on a disabled one. The theme already colours the text for each of those states, so there
       * is one rule to follow instead of a parallel set that can disagree with it, which is how
       * the icon ended up greyed on a locked field whose text was black.
       */
  fill: currentColor;
}
.widget_ajila-forms-tg-timepicker.guideFieldNode .tg-timepicker__container input {
  border: none !important;
}
.widget_ajila-forms-tg-timepicker .tg-timepicker__input,
.widget_ajila-forms-tg-timepicker .tg-timepicker__native {
  padding: 0;
  background-color: transparent;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.widget_ajila-forms-tg-timepicker .tg-timepicker__input {
  width: 5ch;
  text-align: left;
}
.widget_ajila-forms-tg-timepicker .tg-timepicker__separator {
  flex-shrink: 0;
  margin: 0 8px;
  color: #333333;
  /* Like the icon: a click on the separator reaches the frame. */
  pointer-events: none;
}
.widget_ajila-forms-tg-timepicker .tg-timepicker__container:hover {
  background-color: #f5f5f5;
}
.widget_ajila-forms-tg-timepicker:not([data-disabled="true"]):not(.validation-failure) .tg-timepicker__container:focus-within {
  border: 1px solid #1849c8;
}
.widget_ajila-forms-tg-timepicker.validation-failure .tg-timepicker__container {
  border: 1px solid #f24822;
}
.widget_ajila-forms-tg-timepicker.validation-failure [data-mode="single"] .tg-timepicker__input,
.widget_ajila-forms-tg-timepicker.validation-failure [data-mode="single"] .tg-timepicker__native {
  color: #f24822;
}
.widget_ajila-forms-tg-timepicker .tg-timepicker__input--invalid {
  color: #f24822;
}
.widget_ajila-forms-tg-timepicker.guideFieldNode[data-disabled="true"] .tg-timepicker__container {
  background-color: #ebebeb;
  border-bottom-color: transparent;
  pointer-events: none;
}
.widget_ajila-forms-tg-timepicker .tg-timepicker__native,
.widget_ajila-forms-tg-timepicker .tg-timepicker__native-wrap {
  display: none;
}
.widget_ajila-forms-tg-timepicker .tg-timepicker__native-placeholder {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: #d3d3d3;
  font-size: 16px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}
.widget_ajila-forms-tg-timepicker .tg-timepicker__container .tg-timepicker__native.tg-timepicker__native--empty:not(:focus) {
  color: transparent;
}
.widget_ajila-forms-tg-timepicker .tg-timepicker__container .tg-timepicker__native--empty:not(:focus) + .tg-timepicker__native-placeholder {
  display: block;
}
@media (max-width: 767px) {
  .widget_ajila-forms-tg-timepicker .tg-timepicker__container {
    padding-left: 8px;
  }
  .widget_ajila-forms-tg-timepicker .tg-timepicker__input {
    display: none;
  }
  .widget_ajila-forms-tg-timepicker .tg-timepicker__native-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
  }
  .widget_ajila-forms-tg-timepicker .tg-timepicker__native {
    display: inline-block;
    min-width: 5.5em;
    height: 100%;
  }
}
/*
 * Locked.
 *
 * The theme paints the grey surface and the padlock on the widget itself, so the frame steps aside
 * and lets both show through instead of covering them with its own background.
 *
 * Keyed on the locked class alone. Locking also sets the disabled attribute on the field node, but
 * these rules must not depend on it: the theme's own locked styling does not, and a locked field
 * whose attribute had not been set rendered as though it were editable. !important rather than a
 * longer selector, because locked is the strongest state a field can be in and has to win over the
 * component's own disabled styling whatever else matches.
 */
.kttg-field-locked .widget_ajila-forms-tg-timepicker .tg-timepicker__container {
  background-color: transparent !important;
  border-color: transparent !important;
  pointer-events: none;
}