:root {
  /* Region palette */
  --kt-ui-palette-white: #ffffff;
  --kt-ui-palette-white-20: rgba(255, 255, 255, 0.2);
  --kt-ui-palette-white-60: rgba(255, 255, 255, 0.6);
  --kt-ui-palette-grey-50: #f7f7f8;
  --kt-ui-palette-grey-100: #f4f5f6;
  --kt-ui-palette-grey-200: #edeef0;
  --kt-ui-palette-grey-300: #e0e2e5;
  --kt-ui-palette-grey-400: #d3d5da;
  --kt-ui-palette-grey-500: #b7bbc2;
  --kt-ui-palette-grey-600: #949fa8;
  --kt-ui-palette-grey-800: #44556f;
  --kt-ui-palette-grey-900: #13303e;
  --kt-ui-palette-blue-100: #dbe0e7;
  --kt-ui-palette-blue-200: #eaf2fd;
  --kt-ui-palette-blue-300: #ddebff;
  --kt-ui-palette-blue-400: #b8ceed;
  --kt-ui-palette-blue-500: #1e6fbe;
  --kt-ui-palette-blue-600: #1a62a8;
  --kt-ui-palette-blue-700: #175693;
  --kt-ui-palette-blue-800: #13477b;
  --kt-ui-palette-blue-900: #103b65;
  --kt-ui-palette-red-100: #ffe5e7;
  --kt-ui-palette-red-200: #ffccd0;
  --kt-ui-palette-red-400: #ff5763;
  --kt-ui-palette-red-500: #ff3e4c;
  --kt-ui-palette-red-500-15: rgba(255, 62, 76, 0.1490196078);
  --kt-ui-palette-red-500-25: rgba(255, 62, 76, 0.2470588235);
  --kt-ui-palette-pink-100: #faeaf9;
  --kt-ui-palette-pink-200: #f5d6f3;
  --kt-ui-palette-pink-400: #db66cf;
  --kt-ui-palette-pink-500: #d652c9;
  --kt-ui-palette-yellow-100: #fef3e6;
  --kt-ui-palette-yellow-200: #fde7ce;
  --kt-ui-palette-yellow-400: #f9b86c;
  --kt-ui-palette-yellow-500: #f8ab51;
  --kt-ui-palette-green-100: #eafbf0;
  --kt-ui-palette-green-200: #d4f7e0;
  --kt-ui-palette-green-400: #28c865;
  --kt-ui-palette-green-500: #24b35b;
  --kt-ui-palette-purple-100: #f1e5ff;
  --kt-ui-palette-purple-200: #e4ccff;
  --kt-ui-palette-purple-400: #a661ff;
  --kt-ui-palette-purple-500: #9747ff;
  --kt-ui-palette-brown-100: #f2eeea;
  --kt-ui-palette-brown-200: #f6e9cc;
  --kt-ui-palette-brown-400: #c49c48;
  --kt-ui-palette-brown-500: #bb976e;
  /* Endregion */
  /* Region brand */
  --kt-ui-brand-color: #175693;
  --kt-ui-brand-color-hover: #13477b;
  --kt-ui-brand-color-active: #103b65;
  /* Endregion */
  /* Region colors */
  --kt-ui-color-primary: #175693;
  --kt-ui-color-danger: #ff3e4c;
  --kt-ui-color-warning: #f8ab51;
  --kt-ui-color-focus: #175693;
  --kt-ui-color-disabled: #b7bbc2;
  /* Endregion */
  /* Region text-color */
  --kt-ui-text-color-primary: #13303e;
  --kt-ui-text-color-secondary: #44556f;
  --kt-ui-text-color-helper: #b7bbc2;
  --kt-ui-text-color-placeholder: #949fa8;
  --kt-ui-text-color-on-color: #ffffff;
  --kt-ui-text-color-on-color-disabled: #949fa8;
  --kt-ui-text-color-error: #ff3e4c;
  --kt-ui-text-color-success: #24b35b;
  --kt-ui-text-color-warning: #f8ab51;
  --kt-ui-text-color-disabled: #b7bbc2;
  /* Endregion */
  /* Region icon-color */
  --kt-ui-icon-color-primary: #13303e;
  --kt-ui-icon-color-secondary: #44556f;
  --kt-ui-icon-color-placeholder: #949fa8;
  --kt-ui-icon-color-danger: #ff3e4c;
  --kt-ui-icon-color-warning: #f8ab51;
  /* Endregion */
}

:root {
  /* Region btn */
  --kt-ui-btn-like-height: 40px;
  --kt-ui-btn-like-padding-block: 0;
  --kt-ui-btn-like-padding-inline: 12px;
  --kt-ui-btn-like-border-width: 1px;
  --kt-ui-btn-like-border-radius: 12px;
  --kt-ui-btn-like-focus-color: var(--kt-ui-color-focus);
  --kt-ui-btn-like-focus-offset-color: var(--kt-ui-palette-white);
  --kt-ui-btn-like-cursor-disabled: default;
  /* Endregion */
  /* Region grey-theme */
  --kt-ui-btn-like-grey-color: var(--kt-ui-text-color-secondary);
  --kt-ui-btn-like-grey-color-hover: var(--kt-ui-brand-color);
  --kt-ui-btn-like-grey-color-disabled: var(--kt-ui-color-disabled);
  --kt-ui-btn-like-grey-background: var(--kt-ui-palette-grey-200);
  --kt-ui-btn-like-grey-background-hover: var(--kt-ui-palette-blue-300);
  --kt-ui-btn-like-grey-background-disabled: var(--kt-ui-palette-grey-50);
  --kt-ui-btn-like-grey-border-color: var(--kt-ui-btn-like-grey-background);
  --kt-ui-btn-like-grey-border-color-hover: var(--kt-ui-btn-like-grey-background-hover);
  --kt-ui-btn-like-grey-border-color-disabled: var(--kt-ui-btn-like-grey-border-color-disabled);
  /* Endregion */
  /* Region grey-theme in active state */
  --kt-ui-btn-like-grey-active-color: var(--kt-ui-palette-green-500);
  --kt-ui-btn-like-grey-active-color-hover: var(--kt-ui-palette-white);
  --kt-ui-btn-like-grey-active-color-disabled: var(--kt-ui-palette-green-100);
  --kt-ui-btn-like-grey-active-background: var(--kt-ui-palette-green-200);
  --kt-ui-btn-like-grey-active-background-hover: var(--kt-ui-palette-green-400);
  --kt-ui-btn-like-grey-active-background-disabled: var(--kt-ui-palette-green-50);
  --kt-ui-btn-like-grey-active-border-color: var(--kt-ui-btn-like-grey-active-border-color);
  --kt-ui-btn-like-grey-active-border-color-hover: var(--kt-ui-btn-like-grey-active-border-color-hover);
  --kt-ui-btn-like-grey-active-border-color-disabled: var(--kt-ui-btn-like-grey-active-background-disabled);
  /* Endregion */
  /* Region white-theme */
  --kt-ui-btn-like-white-color: var(--kt-ui-text-color-secondary);
  --kt-ui-btn-like-white-color-hover: var(--kt-ui-brand-color);
  --kt-ui-btn-like-white-color-disabled: var(--kt-ui-text-color-disabled);
  --kt-ui-btn-like-white-background: var(--kt-ui-palette-white);
  --kt-ui-btn-like-white-background-hover: var(--kt-ui-palette-blue-300);
  --kt-ui-btn-like-white-background-disabled: var(--kt-ui-palette-green-50);
  --kt-ui-btn-like-white-border-color: var(--kt-ui-palette-grey-400);
  --kt-ui-btn-like-white-border-color-hover: var(--kt-ui-palette-blue-400);
  --kt-ui-btn-like-white-border-color-disabled: var(--kt-ui-color-disabled);
  /* Endregion */
  /* Region white-theme in active state */
  --kt-ui-btn-like-white-active-color: var(--kt-ui-palette-green-500);
  --kt-ui-btn-like-white-active-color-hover: var(--kt-ui-palette-white);
  --kt-ui-btn-like-white-active-color-disabled: var(--kt-ui-text-color-disabled);
  --kt-ui-btn-like-white-active-background: var(--kt-ui-palette-white);
  --kt-ui-btn-like-white-active-background-hover: var(--kt-ui-palette-green-500);
  --kt-ui-btn-like-white-active-background-disabled: var(--kt-ui-palette-green-50);
  --kt-ui-btn-like-white-active-border-color: var(--kt-ui-palette-green-500);
  --kt-ui-btn-like-white-active-border-color-hover: var(--kt-ui-palette-green-500);
  --kt-ui-btn-like-white-active-border-color-disabled: var(--kt-ui-palette-green-50);
  /* Endregion */
}