:root {
  --rs-primary-color: #002c47;
  --rs-primary-2-color: #1f3f5c;
  --rs-border-color: #eaedf0;
  --rs-active-color: #1f7bff;
  --rs-placeholder-color: #bdc4ca;
  --rs-font-size: 12px;
  --rs-primary-btn-bg: #1364b3;
  --rs-primary-btn-hover-bg: #176bca;
  --rs-cancel-btn-color: #44566c;

  /*
  * page
  */
  --rs-page-title-font-size: 24px;
  --rs-page-title-color: var(--rs-primary-2-color);

  /*
  * font-family
*/
  --rs-font-family: Arial;

  /*
  * Background
  */
  --rs-container-bg: #f8fafb;

  /*
  * text
  */
  --rs-text-color: var(--rs-primary-2-color);
  --rs-labels-color: #6c7c90;
  --rs-placeholder-color: #0369c2;

  /*
  * form
  */

  --rs-input-line-height: 28px;
  --rs-input-font-size: 12px;
  --rs-input-color: var(--rs-primary-color);
  --rs-input-disabled-color: #adb5bd;
  --rs-input-border-color: var(--rs-border-color);
  --rs-input-border-radius: 4px;
  --rs-input-disabled-bg: #f7f8fa;
  --rs-input-hover-border-color: rgba(31, 123, 255, 0.72);
  --rs-input-focus-border-color: rgba(31, 123, 255, 0.5);
  --rs-input-error-border-color: rgba(255, 92, 92, 0.5);
  --rs-input-require-label-color: #ff5c5c;

  /*
  * grid
  */
  --rs-grid-header-row-height: 32px;
  --rs-grid-header-cell-font-size: 10px; // grid header cell font size
  --rs-grid-row-height: 28px;
  --rs-grid-row-cell-font-size: 11px; // grid row cell font size
  --rs-grid-row-hover-bg: #f6faff; // grid row hover color
  --rs-grid-row-active-bg: #edf5ff; // grid row active color
}