:root {
  /*
   * Format: {prefix}__{block}__{element}--{modifier}__{property}
   */
  
  
  /* Colour palette */

  --otrl-jp-widget__colors--primary: #43165c;
  --otrl-jp-widget__colors--secondary: #444f56;
  --otrl-jp-widget__colors--white: #fff;
  --otrl-jp-widget__colors--off-white: #f8f8f8;
  --otrl-jp-widget__colors--light-grey: #91929e;
  --otrl-jp-widget__colors--grey: #6d7278;
  --otrl-jp-widget__colors--off-black: #121212;
  --otrl-jp-widget__colors--black: #000;
  --otrl-jp-widget__colors--error: #b83116;


  /* Common */

  --otrl-jp-widget__background: var(--otrl-jp-widget__colors--off-white);
  --otrl-jp-widget__primary-font-family: "Nunito", sans-serif;
  --otrl-jp-widget__secondary-font-family: var(--otrl-jp-widget__primary-font-family);
  --otrl-jp-widget__font-size: 16px;
  --otrl-jp-widget__font-weight--regular: 400;
  --otrl-jp-widget__font-weight--bold: 700;
  --otrl-jp-widget__font-weight--extra-bold: 800;
  --otrl-jp-widget__line-height: 1.4;
  --otrl-jp-widget__letter-spacing: 0;
  --otrl-jp-widget__spacing: 12px;
  --otrl-jp-widget__table-header__background: #dbdbdb;
  --otrl-jp-widget__input__box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  --otrl-jp-widget__input__border-color: var(--otrl-ui--border-color);
  --otrl-jp-widget__button__box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);


  /* @otrl/ui */

  --otrl-ui-secondary-color: var(--otrl-jp-widget__colors--secondary);
  --otrl-ui--outline-color: #37134b;
  --otrl-ui-text-color: var(--otrl-jp-widget__colors--secondary);
  --otrl-ui-text-secondary-color: var(--otrl-jp-widget__colors--primary);
  --otrl-ui--font-weight-bold: var(--otrl-jp-widget__font-weight--bold);
  --otrl-ui-grey-color: var(--otrl-jp-widget__colors--grey);
  --otrl-ui--body-background: var(--otrl-jp-widget__background);
  --otrl-ui--border-color: #ddd;
  --otrl-ui--button-background: var(--otrl-jp-widget__colors--primary);
  --otrl-ui--button-text-color: var(--otrl-jp-widget__colors--white);
  --otrl-ui--button-font-family: var(--otrl-jp-widget__secondary-font-family);
  --otrl-ui--date-picker-active-color: var(--otrl-jp-widget__colors--primary);
  --otrl-ui--select-background: var(--otrl-jp-widget__colors--white);
  --otrl-ui--select-color: #444;
  --otrl-ui--modal-close-button-color: var(--otrl-jp-widget__colors--off-black);


  /* Components */

  --otrl-jp-widget__link__color: var(--otrl-ui-text-secondary-color);

  --otrl-jp-widget__input__background: var(--otrl-jp-widget__colors--white);
  --otrl-jp-widget__input__color: var(--otrl-jp-widget__colors--black);
  --otrl-jp-widget__input__placeholder-color: #6d6d6d;

  --otrl-jp-widget__tabs__tab__color: var(--otrl-ui-text-color);
  --otrl-jp-widget__tabs__tab--active__color: var(--otrl-jp-widget__colors--black);
  --otrl-jp-widget__tabs--panel-layout__background: var(--otrl-jp-widget__colors--white);
  --otrl-jp-widget__tabs--panel-layout__tab__background: var(--otrl-jp-widget__tabs--panel-layout__background);
  --otrl-jp-widget__tabs--panel-layout__tab__divider-color: #dddddd;
  --otrl-jp-widget__tabs--panel-layout__tab__font-weight: var(--otrl-jp-widget__font-weight--regular);
  --otrl-jp-widget__tabs--panel-layout__tab--active__background: var(--otrl-jp-widget__background);
  --otrl-jp-widget__tabs--button-layout__margin: 0 calc(var(--otrl-jp-widget__spacing) + 1px);
  --otrl-jp-widget__tabs--button-layout__padding: var(--otrl-jp-widget__spacing) 0 calc(0.5 * var(--otrl-jp-widget__spacing));
  --otrl-jp-widget__tabs--button-layout__tab--active__border-color: var(--otrl-jp-widget__colors--primary);

  --otrl-jp-widget__checkbox__background: var(--otrl-jp-widget__colors--white);
  --otrl-jp-widget__checkbox__border-color: var(--otrl-jp-widget__colors--white);
  --otrl-jp-widget__checkbox__color: var(--otrl-jp-widget__colors--primary);
  --otrl-jp-widget__checkbox--dark__background: var(--otrl-ui-secondary-color);
  --otrl-jp-widget__checkbox--dark__border-color: var(--otrl-ui-secondary-color);
  --otrl-jp-widget__checkbox--dark__color: var(--otrl-jp-widget__background);

  --otrl-jp-widget__radio-button__background: var(--otrl-ui-secondary-color);
  --otrl-jp-widget__radio-button__color: var(--otrl-ui-text-color);

  --otrl-jp-widget__panel__content__background: #fff5fa;
  --otrl-jp-widget__panel__content__color: var(--otrl-jp-widget__colors--primary);

  --otrl-jp-widget__swap-input-icon__box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.15);

  --otrl-jp-widget__mobile-ticket-radio__background: var(--otrl-jp-widget__input__background);

  --otrl-jp-widget__journey-type-and-dates__background: var(--otrl-jp-widget__colors--white);
  --otrl-jp-widget__date__background: var(--otrl-jp-widget__colors--white);
  --otrl-jp-widget__open-return__background: var(--otrl-jp-widget__colors--white);
  --otrl-jp-widget__delivery-option__background: var(--otrl-jp-widget__colors--white);
  
  --otrl-jp-widget__passengers__background: var(--otrl-jp-widget__colors--white);

  --otrl-jp-widget__error-message__background: #ffe6e6;
  --otrl-jp-widget__error-message__border-color: var(--otrl-jp-widget__colors--error);
  --otrl-jp-widget__error-message__color: var(--otrl-jp-widget__colors--error);

  --otrl-jp-widget__icon__background: var(--otrl-jp-widget__colors--primary);
  --otrl-jp-widget__icon__color: var(--otrl-jp-widget__colors--white);
  --otrl-jp-widget__standalone-icon__color: var(--otrl-jp-widget__colors--primary);

  --otrl-jp-widget__icon-ticket-type__height: 21px;

  --otrl-jp-widget__global-modal--takeover__z-index: 10;
  --otrl-jp-widget__global-modal__backdrop__background: rgba(0, 0, 0, 0.5);
  --otrl-jp-widget__global-modal__body__background: var(--otrl-ui--body-background);
  --otrl-jp-widget__modal-header__background: var(--otrl-jp-widget__colors--secondary);
  --otrl-jp-widget__modal-header__color: var(--otrl-jp-widget__colors--white);
  --otrl-jp-widget__modal-content__background: var(--otrl-jp-widget__global-modal__body__background);

  --otrl-jp-widget__stations-list__background: var(--otrl-jp-widget__colors--white);
  --otrl-jp-widget__stations-list__color: var(--otrl-jp-widget__colors--black);
  --otrl-jp-widget__stations-list__header__background: var(--otrl-jp-widget__table-header__background);
  --otrl-jp-widget__stations-list__header__color: var(--otrl-jp-widget__stations-list__color);
  --otrl-jp-widget__stations-list__item__background: var(--otrl-jp-widget__stations-list__background);
  --otrl-jp-widget__stations-list__item__color: var(--otrl-jp-widget__stations-list__color);
  --otrl-jp-widget__stations-list__item__crs__color: #999;
  --otrl-jp-widget__stations-list__item--hover__background: #eee;
  --otrl-jp-widget__stations-list__item--hover__color: var(--otrl-jp-widget__stations-list__color);
  --otrl-jp-widget__stations-list__item--hover__crs__color: #555;

  --otrl-jp-widget__fare-class-label__background: #efefef;
  --otrl-jp-widget__fare-class-label__color: var(--otrl-ui-text-color);

  --otrl-jp-widget__booking-fees__font-style: italic;

  --otrl-jp-widget__favourites__message__font-size: 18px;
  --otrl-jp-widget__favourites__message__font-weight: var(--otrl-jp-widget__font-weight--bold);
  --otrl-jp-widget__favourites-empty__helper__background: var(--otrl-jp-widget__colors--white);
  --otrl-jp-widget__favourites-empty__helper__message__font-size: var(--otrl-jp-widget__font-size);
  --otrl-jp-widget__favourite-ticket__background: var(--otrl-jp-widget__colors--white);
  --otrl-jp-widget__favourite-ticket__color: var(--otrl-ui-text-color);
  --otrl-jp-widget__favourite-ticket__remove-favourite__cancel-button__color: var(--otrl-ui-text-color);
  --otrl-jp-widget__favourite-ticket-list__item--highlighted__border-color: var(--otrl-ui-secondary-color);

  --otrl-ui--main-background: var(--otrl-ui--body-background);
}
