@font-face {
  font-family: Roboto;
  src: local("Roboto"), url(/assets/dist/fonts/Roboto/Roboto-Regular.ttf) format("truetype");
}

@font-face {
  font-family: Roboto;
  src: local("Roboto"), url(/assets/dist/fonts/Roboto/Roboto-Bold.ttf) format("truetype");
  font-weight: bold;
}

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

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

  /* chat bubbles */
  --bubbleBorderRadius: 8px;
  --botPrimaryTextColor: #000;
  --botPrimaryLinkColor: #000;
  --botPrimaryBackground: #ffe5e8;
  --botPrimaryBackgroundColor: #ffe5e8;
  --botBubbleBorderWidth: 0;
  --userPrimaryTextColor: #fff;
  --userPrimaryLinkColor: #fff;
  --userPrimaryBackgroundColor: #777777;
  --userBubbleBorderWidth: 2px;

  /* ionic */
  --ion-background-color: white;
  --ion-toolbar-background: white;
  --ion-toolbar-color: #fff;
  --ion-font-family: "Roboto";
  --ion-text-color: #4f4f4f;

  /* colors (see https://ionicframework.com/docs/theming/color-generator) */
  --ion-color-primary: #e30613;
  --ion-color-primary-rgb: 227, 6, 19;
  --ion-color-primary-contrast: #fff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #c80511;
  --ion-color-primary-tint: #e61f2b;
  --ion-color-secondary: #000;
  --ion-color-secondary-rgb: 0, 0, 0;
  --ion-color-secondary-contrast: #fff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #000;
  --ion-color-secondary-tint: #1a1a1a;
  --ion-color-tertiary: #000;
  --ion-color-tertiary-rgb: 0, 0, 0;
  --ion-color-tertiary-contrast: #fff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #000;
  --ion-color-tertiary-tint: #1a1a1a;
  --ion-color-success: #47ac32;
  --ion-color-success-rgb: 71, 172, 50;
  --ion-color-success-contrast: #fff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #3e972c;
  --ion-color-success-tint: #59b447;
  --ion-color-warning: #ffc409;
  --ion-color-warning-rgb: 255, 196, 9;
  --ion-color-warning-contrast: #000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0ac08;
  --ion-color-warning-tint: #ffca22;
  --ion-color-danger: #e30613;
  --ion-color-danger-rgb: 227, 6, 19;
  --ion-color-danger-contrast: #fff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #c80511;
  --ion-color-danger-tint: #e61f2b;
  --ion-color-medium: #92949c;
  --ion-color-medium-rgb: 146, 148, 156;
  --ion-color-medium-contrast: #000;
  --ion-color-medium-contrast-rgb: 0, 0, 0;
  --ion-color-medium-shade: #808289;
  --ion-color-medium-tint: #9d9fa6;
  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 245, 248;
  --ion-color-light-contrast: #000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;
}

ion-toolbar {
  --background: #808080;
  --ion-text-color: #ffffff;
}

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

    /* ionic */
    --logo-url: url(/assets/dist/securvita.svg);
    --ion-background-color: #232323;
    --ion-toolbar-background: #444444.;
    --ion-text-color: #fff;

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

    /* chat bubbles */
    --bubbleBorderRadius: 8px;
    --botPrimaryTextColor: white;
    --botPrimaryLinkColor: white;
    --botPrimaryBackground: #444444;
    --botPrimaryBackgroundColor: #444444;
    --botBubbleBorderWidth: 0;
    --userPrimaryTextColor: #ffffff;
    --userPrimaryLinkColor: #ffffff;
    --userPrimaryBackgroundColor: #444444.;
    --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;

    ion-toolbar {
      --background: #444444;
      --ion-text-color: #ffffff;

    }

    .chat-window-foot-input-wrapper{
      background:#444444!important;
    }


  }
}