@font-face {
  font-family: Univers;
  src: local("Univers"), url(/assets/dist/fonts/Univers/5c8d59c2-9c85-4a22-88e3-bf3fba01dcd8.woff2) format("woff2"); /* UNIVERS CONDENSED */
}

@font-face {
  font-family: Univers;
  src: local("Univers"), url(/assets/dist/fonts/Univers/3bdb4597-ff70-447c-8620-8836686bf840.woff2) format("woff2"); /* UNIVERS CONDENSED BOLD */
  font-weight: bold;
}

:root {
  /* assets */
  --logo-url: url(/assets/dist/bkk24-logo-header.svg);
  --bot-avatar-url: url(/assets/dist/bekky.png);
  --live-chat-avatar-url: url(/assets/dist/operator.svg);
  --chat-watermark-url: unset;

  /* chat buttons */
  --button-border-radius: 0;
  --button-border-color: #0000001a;
  --button-background-color: #ffe600;
  --button-text-color: #282828;

  /* chat bubbles */
  --bubbleBorderRadius: 7px;
  --botPrimaryTextColor: black;
  --botPrimaryLinkColor: #f03;
  --botPrimaryBackground: #d2d2d2;
  --botPrimaryBackgroundColor: #d2d2d2;
  --botBubbleBorderWidth: 0;
  --userPrimaryTextColor: white;
  --userPrimaryLinkColor: white;
  --userPrimaryBackgroundColor: #f03;
  --userBubbleBorderWidth: 0;

  /* ionic */
  --ion-background-color: #eee;
  --ion-toolbar-background: white;
  --ion-font-family: "Univers";
  --ion-text-color: black;

  /* colors (see https://ionicframework.com/docs/theming/color-generator) */
  --ion-color-primary: #eb445a;
  --ion-color-primary-rgb: 235, 68, 90;
  --ion-color-primary-contrast: #fff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #cf3c4f;
  --ion-color-primary-tint: #ed576b;
  --ion-color-secondary: #f1c745;
  --ion-color-secondary-rgb: 241, 199, 69;
  --ion-color-secondary-contrast: #000;
  --ion-color-secondary-contrast-rgb: 0, 0, 0;
  --ion-color-secondary-shade: #d4af3d;
  --ion-color-secondary-tint: #f2cd58;
  --ion-color-tertiary: #eb445a;
  --ion-color-tertiary-rgb: 235, 68, 90;
  --ion-color-tertiary-contrast: #fff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #cf3c4f;
  --ion-color-tertiary-tint: #ed576b;
  --ion-color-success: #6bd501;
  --ion-color-success-rgb: 107, 213, 1;
  --ion-color-success-contrast: #000;
  --ion-color-success-contrast-rgb: 0, 0, 0;
  --ion-color-success-shade: #5ebb01;
  --ion-color-success-tint: #7ad91a;
  --ion-color-warning: #fb0;
  --ion-color-warning-rgb: 255, 187, 0;
  --ion-color-warning-contrast: #000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0a500;
  --ion-color-warning-tint: #ffc21a;
  --ion-color-danger: #f03;
  --ion-color-danger-rgb: 255, 0, 51;
  --ion-color-danger-contrast: #fff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #e0002d;
  --ion-color-danger-tint: #ff1a47;
  --ion-color-medium: #d2d2d2;
  --ion-color-medium-rgb: 210, 210, 210;
  --ion-color-medium-contrast: #000;
  --ion-color-medium-contrast-rgb: 0, 0, 0;
  --ion-color-medium-shade: #b9b9b9;
  --ion-color-medium-tint: #d7d7d7;
  --ion-color-light: #f7f7f7;
  --ion-color-light-rgb: 247, 247, 247;
  --ion-color-light-contrast: #000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d9d9d9;
  --ion-color-light-tint: #f8f8f8;
}

.chat-window-foot-input-wrapper {
  border: 1px solid var(--ion-color-tertiary);
}





@media (prefers-color-scheme: dark) {

  .hai-alert-rating button.good{
    background-image: url('/assets/rate-good-dark.png')!important;
  }

  .hai-alert-rating button.bad{
    background-image: url('/assets/rate-bad-dark.png')!important;
  }


  .hai-alert #alert-1-msg, .hai-alert .alert-button{
    color:#ffffff!important;
  }

  :root {

    /* ionic */
    --logo-url: url(/assets/dist/bkk24-logo-header-dark.svg);
    --ion-background-color: #224141;
    --ion-toolbar-background: #222428;
    --ion-text-color: #fff;

    /* chat buttons */
    --button-border-radius: 24px;
    --button-border-color: #fff;
    --button-background-color: #224141;
    --button-text-color: #fff;

    /* chat bubbles */
    --bubbleBorderRadius: 8px;
    --botPrimaryTextColor: white;
    --botPrimaryLinkColor: white;
    --botPrimaryBackground: #222428;
    --botPrimaryBackgroundColor: #222428;
    --botBubbleBorderWidth: 0;
    --userPrimaryTextColor: #ffffff;
    --userPrimaryLinkColor: #ffffff;
    --userPrimaryBackgroundColor: #224141;
    --userBubbleBorderWidth: 2px;


    /*main colors*/
    --ion-color-dark: #f4f5f8;
    --ion-color-dark-rgb: 244, 245, 248;
    --ion-color-dark-contrast: #000000;
    --ion-color-dark-contrast-rgb: 0, 0, 0;
    --ion-color-dark-shade: #d7d8da;
    --ion-color-dark-tint: #f5f6f9;

    --ion-color-medium: #989aa2;
    --ion-color-medium-rgb: 152, 154, 162;
    --ion-color-medium-contrast: #000000;
    --ion-color-medium-contrast-rgb: 0, 0, 0;
    --ion-color-medium-shade: #86888f;
    --ion-color-medium-tint: #a2a4ab;

    --ion-color-light: #222428;
    --ion-color-light-rgb: 34, 36, 40;
    --ion-color-light-contrast: #ffffff;
    --ion-color-light-contrast-rgb: 255, 255, 255;
    --ion-color-light-shade: #1e2023;
    --ion-color-light-tint: #383a3e;


    --ion-color-tertiary:#949494;


    /* color Steps */
    --ion-color-step-50: #1e1e1e!important;
    --ion-color-step-100: #2a2a2a!important;
    --ion-color-step-150: #363636!important;
    --ion-color-step-200: #414141!important;
    --ion-color-step-250: #4d4d4d!important;
    --ion-color-step-300: #595959!important;
    --ion-color-step-350: #656565!important;
    --ion-color-step-400: #717171!important;
    --ion-color-step-450: #7d7d7d!important;
    --ion-color-step-500: #898989!important;
    --ion-color-step-550: #949494!important;
    --ion-color-step-600: #a0a0a0!important;
    --ion-color-step-650: #acacac!important;
    --ion-color-step-700: #b8b8b8!important;
    --ion-color-step-750: #c4c4c4!important;
    --ion-color-step-800: #d0d0d0!important;
    --ion-color-step-850: #dbdbdb!important;
    --ion-color-step-900: #e7e7e7!important;
    --ion-color-step-950: #f3f3f3!important;


  }
}