/* ============================================================
   APH WEB SYSTEM
   Base Styles / Design Variables
   ============================================================ */

/* ============================================================
   DESIGN VARIABLES
   ============================================================ */

:root {
  /* --------------------------------------------------------
       GENERAL
       -------------------------------------------------------- */

  --aph-text-color: #202020;
  --aph-muted-text: #6b6b6b;

  --aph-background: #ffffff;

  --aph-border-color: #d4d4d4;
  --aph-border-dark: #bfbfbf;

  --aph-focus-color: #2179d1;

  /* --------------------------------------------------------
       HEADER
       -------------------------------------------------------- */

  --aph-header-bg: #ffffff;
  --aph-header-text: #d32f2f;

  /* --------------------------------------------------------
       MODULE BAR
       -------------------------------------------------------- */

  --aph-module-bg: #1f4e78;
  --aph-module-text: #ffffff;

  --aph-module-hover-bg: #2f75b5;

  --aph-module-active-bg: #2179d1;
  --aph-module-active-text: #ffffff;

  /* --------------------------------------------------------
       MODULE DROPDOWN
       -------------------------------------------------------- */

  --aph-menu-bg: #ffffff;
  --aph-menu-text: #202020;

  --aph-menu-hover-bg: #e8f1fb;

  --aph-menu-border: #bfbfbf;

  /* --------------------------------------------------------
       TOOLBAR
       -------------------------------------------------------- */

  --aph-toolbar-bg: #f1f1f1;

  --aph-toolbar-hover-bg: #e2e2e2;

  --aph-toolbar-divider: #d9d9d9;

  --aph-toolbar-disabled-opacity: 0.25;

  /* --------------------------------------------------------
       TOOLBAR ICON COLORS
       -------------------------------------------------------- */

  --aph-icon-search: #1976d2;
  --aph-icon-add: #2e9d50;
  --aph-icon-edit: #f39c12;
  --aph-icon-delete: #d84343;
  --aph-icon-refresh: #008fa8;
  --aph-icon-excel: #217346;

  /* --------------------------------------------------------
       WORKSPACE
       -------------------------------------------------------- */

  --aph-workspace-bg: #ffffff;

  /* --------------------------------------------------------
       GRID - Excel style
       -------------------------------------------------------- */

  --aph-grid-border: #d4d4d4;

  --aph-grid-header-bg: rgb(161, 9, 14);
  --aph-grid-header-text: #202020;

  --aph-grid-row-bg: #ffffff;
  --aph-grid-row-alt-bg: #fafafa;

  --aph-grid-selected-bg: #dbeafe;

  --aph-grid-hover-bg: #f3f7fb;

  /* --------------------------------------------------------
       SHEET
       -------------------------------------------------------- */

  --aph-sheet-bar-bg: #f2f2f2;

  --aph-sheet-bg: #e7e7e7;
  --aph-sheet-hover-bg: #dddddd;

  --aph-sheet-active-bg: #2179d1;
  --aph-sheet-active-text: #ffffff;

  --aph-sheet-close-hover-bg: rgba(255, 255, 255, 0.18);
}

/* ============================================================
   RESET
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;

  font-size: 14px;

  color: var(--aph-text-color);

  background-color: var(--aph-background);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}