html,
button {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

:root {
  --zcs-chat-position: fixed;
  --zcs-chat-position-top: unset;
  --zcs-chat-position-right: 25px;
  --zcs-chat-position-bottom: 25px;
  --zcs-chat-position-left: unset;

  --zcs-chat-panel-position: fixed;
  --zcs-chat-panel-position-top: unset;
  --zcs-chat-panel-position-right: 25px;
  --zcs-chat-panel-position-bottom: 100px;
  --zcs-chat-panel-position-left: unset;

  --zcs-chat-background-color: #f3f6fc;

  --zcs-chat-header-background-color: #1565c0;
  --zcs-chat-header-color: white;

  --zcs-chat-footer-background-color: #f3f6fc;

  --zcs-chat-user-message-background-color: #d3e3fd;
  --zcs-chat-user-message-color: #5f6368;
  --zcs-chat-bot-message-background-color: #ffffff;
  --zcs-chat-bot-message-color: #5f6368;

  --zcs-chat-citation-clicked-background-color: #1565c0;
  --zcs-chat-citation-clicked-color: #ffffff;
  --zcs-chat-citation-ref-hover-color: #1565c0;
  --zcs-chat-citation-overlay-open-file-button-hover-color: #1565c0;

  --zcs-chat-scroll-button-hover-color: #fff;

  --zcs-chat-border-radius: 25px;
  --zcs-chat-border-textarea: 25px;
  --zcs-chat-bot-image-border-radius: 25px;

  --zcs-chat-height: calc(100dvh - 25px - 130px);
  --zcs-chat-width: 500px;

  --zcs-chat-maximized-height: var(--zcs-chat-height);
  --zcs-chat-maximized-width: calc(100vw - 100px);

  --zcs-chat-shadow:
    0px 6px 30px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --zcs-chat-textbox-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --zcs-chat-textbox-border: 1px solid #c4c7c5;

  --zcs-chat-button-shadow: none;

  --zcs-chat-button-open-background-color: #f3f6fc;
  --zcs-chat-button-close-background-color: #f3f6fc;

  --zcs-chat-scroll-button-background-color: #d3e3fd;
  --zcs-chat-scroll-button-color: #5f6368;

  --zcs-chat-icon-disabled-opacity: 0.38;

  --zcs-chat-footer-buttons-flex-direction: column-reverse;

  --zcs-chat-textbox-focus-border: 1px solid #1565c0;

  --zcs-chat-textbox-background-color: white;
  --zcs-chat-header-border-bottom: 4px solid black;
  --zcs-chat-textbox-color: #5f6368;

  --zcs-chat-bot-image-background-color: #1565c0;

  --zcs-chat-bot-image-size: 36px;

  --zcs-chat-bot-image-alignment: center;

  /* uploaded file */
  --zcs-uploaded-file-card-background: #ffffff;
  --zcs-uploaded-file-card-color: #000000;
  --zcs-uploaded-file-card-color-hover: #5f6368;
  --zcs-status-dot-processed-background: #16a34a;
  --zcs-status-dot-processing-background: #f59e0b;
  --zcs-status-dot-error-background: #ef4444;
  --zcs-status-dot-overwritten-background: #f97316;
  --zcs-status-dot-deleted-background: #6b7280;
  --zcs-uploaded-file-shadow:
    0px 6px 30px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --zcs-uploaded-file-card-icon-padding: 10px;
  --zcs-uploaded-file-height: 25px;

  /* message table */
  --zcs-chat-message-table-background-color: #ffffff;
  --zcs-chat-message-table-color: #444;
  --zcs-chat-message-table-header-background-color: #1565c0;
  --zcs-chat-message-table-header-color: #fff;
  --zcs-chat-message-table-tr-border-color: #eee;
  --zcs-chat-message-table-tr-hover-color: #f3f6fc;

  /* actions */
  --zcs-chat-action-button-background-color-hover: #1565c0;
  --zcs-chat-action-button-color-hover: #ffffff;
  --zcs-chat-action-button-color: #000000;

  /* code */
  --zcs-code-background-color: #f9f9f9;
  --zcs-code-json-color: #5f6368;
  --zcs-code-copy-button-color: #5f6368;
  --zcs-code-border-color: #f9f9f9;

  /* chat */
  --zcs-chat-textbox-placeholder-color: grey;

  --zcs-chat-icon-background-color: white;
  --zcs-chat-icon-background-color-hover: #f3f6fc;
  --zcs-chat-icon-color: black;
  --zcs-chat-icon-color-hover: black;

  --zcs-chat-button-send-color-disabled: black;
  --zcs-chat-button-send-background-color: #1565c0;
  --zcs-chat-button-send-background-color-hover: #d3e3fd;
  --zcs-chat-button-send-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --zcs-chat-button-send-color: #ffffff;
  --zcs-chat-button-send-color-hover: #000000;

  --zcs-chat-focus-shadow: 0px 3px 9px -1px #1565c0;

  /* history */
  --zcs-history-chat-item-color-hover: white;
  --zcs-history-chat-item-background-color-hover: #1565c0;

  /* arrow down */
  --zcs-arrow-down-color: #1565c0;
  --zcs-arrow-down-color-hover: #ffffff;
  --zcs-arrow-down-background-color: transparent;
  --zcs-arrow-down-background-color-hover: #1565c0;

  /* add conversation button */
  --zcs-add-conversation-icon-color: #ffffff;
  --zcs-add-conversation-icon-hover-color: #ffffff;
  --zcs-add-conversation-icon-background-color: #1565c0;
  --zcs-add-conversation-icon-hover-background-color: #465365;

  /* welcome box */ 
  --zcs-chat-welcome-box-button-color: #1565c0;

  /* menu item */
  --mat-menu-container-color: var(--zcs-menu-item-background-color);
  --zcs-menu-item-background-color: #1565c0;
  --zcs-menu-item-color: white;
  --zcs-menu-item-color-hover: black;

  /* form */
  --zcs-form-item-background-color: white;
  --zcs-form-label-color: #1565c0;

  --zcs-form-save-button-color: white;
  --zcs-form-save-button-color-hover: white;
  --zcs-form-save-button-background-color: #1565c0;
  --zcs-form-save-button-background-color-hover: #465365;

  --zcs-form-cancel-button-color: black;
  --zcs-form-cancel-button-color-hover: white;
  --zcs-form-cancel-button-background-color: transparent;
  --zcs-form-cancel-button-background-color-hover: #465365;

  /* confirm dialog */
  --zcs-confirm-dialog-background-color: white;
  --zcs-confirm-dialog-color: black;
  --zcs-confirm-dialog-shadow-color: #465365;

  /*z-index*/
  --zcs-chat-z-index: 20;
}

button.mat-mdc-button-base[color="primary"] {
  color: var(--zcs-form-save-button-color);
  background-color: var(--zcs-form-save-button-background-color);
}
button.mat-mdc-button-base[color="primary"]:hover {
  color: var(--zcs-form-save-button-color-hover);
  background-color: var(--zcs-form-save-button-background-color-hover);
}
button.mat-mdc-button-base[color="warn"] {
  color: var(--zcs-form-cancel-button-color);
  background-color: var(--zcs-form-cancel-button-background-color);
}
button.mat-mdc-button-base[color="warn"]:hover {
  color: var(--zcs-form-cancel-button-color-hover);
  background-color: var(--zcs-form-cancel-button-background-color-hover);
}

button.mat-mdc-button-base {
  border-radius: 10px;
}