/*!************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./src/styles/_themevariables.css ***!
  \************************************************************************************************************************************************************************************************************************/
/* =====================

   GLOBAL COLOR VARIABLES

   ===================== */

:root {

    /* Primary Colors */

    --ui-primary: #38BDF8;

    --ui-secondary: #3B82F6;

    --ui-success: #84CC16;

    --ui-info: #0B82EA;

    --ui-warning: #F59E0B;

    --ui-error: #DC2626;

    /* Data Visualization Colors */

    --color-data-blue: #4269d0;

    --color-data-orange: #efb118;

    --color-data-red: #ff725c;

    --color-data-cyan: #6cc5b0;

    --color-data-green: #3ca951;

    --color-data-pink: #ff8ab7;

    --color-data-purple: #a463f2;

    --color-data-lightblue: #97bbf5;

    --color-data-brown: #9c6b4e;

    --color-data-gray: #9498a0;
    
    --font-weight-normal : 400;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

}

.bg-color-data-blue {
    background-color: var(--color-data-blue);
}

.bg-color-data-orange {
    background-color: var(--color-data-orange);
}

.bg-color-data-red {
    background-color: var(--color-data-red);
}

.bg-color-data-cyan {
    background-color: var(--color-data-cyan);
}

.bg-color-data-green {
    background-color: var(--color-data-green);
}

.bg-color-data-pink {
    background-color: var(--color-data-pink);
}

.bg-color-data-purple {
    background-color: var(--color-data-purple);
}
.bg-color-data-lightblue {
    background-color: var(--color-data-lightblue);
}
.bg-color-data-brown {
    background-color: var(--color-data-brown);
}
.bg-color-data-gray {
    background-color: var(--color-data-gray);
}


/* ========== LIGHT THEME ========== */

body.light {

    --ui-text-dimmed: #A1A1AA;

    --ui-text-muted: #71717A;

    --ui-text-toned: #52525B;

    --ui-text: #3F3F46;

    --ui-text-highlighted: #18181B;

    --ui-bg-base: #FFFFFF;

    --ui-bg: #FAFAFA;

    --ui-bg-elevated: #F4F4F5;

    --ui-bg-accented: #E4E4E7;

    --ui-bg-inverted: #18181B;

    --ui-border: #E4E4E7;

    --ui-border-accented: #D4D4D8;

    --ui-border-inverted: #18181B;

}

/* ========== DARK THEME ========== */

body.dark {

    --ui-text-dimmed: #71717A;

    --ui-text-muted: #A1A1AA;

    --ui-text-toned: #D4D4D8;

    --ui-text: #E4E4E7;

    --ui-text-highlighted: #FFFFFF;

    --ui-bg-base: #09090B;

    --ui-bg: #18181B;

    --ui-bg-elevated: #27272A;

    --ui-bg-accented: #3F3F46;

    --ui-bg-inverted: #FFFFFF;

    --ui-border: #27272A;

    --ui-border-accented: #3F3F46;

    --ui-border-inverted: #FFFFFF;

}
/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./src/styles/_typography.css ***!
  \********************************************************************************************************************************************************************************************************************/
* {
  font-family: inherit;
}

body {
    font-family: 'Inter', sans-serif !important;
    color: var(--ui-text);
    background-color: var(--ui-bg-base);
  }
   
  h1 {
    font-size: 50px;
    font-weight: 800;
    line-height: 56px;
  }
   
  h2 {
    font-size: 36px;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: -0.2px;
  }
   
  h3 {
    font-size: 30px;
    font-weight: 800;
    line-height: 40px;
  }
   
  h4 {
    font-size: 26px;
    font-weight: 400;
    line-height: 40px;
  }
   
  h5 {
    font-size: 22px;
    font-weight: 800;
    line-height: 32px;
  }
   
  h6 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2rem;
  }
   
  body, p, span {
    font-size: 12px;
    line-height: 21px;
  }
   
  .bold { font-weight: 700; }
  .small { font-size: 14px; }
   
  .label {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
  }
   
  .caption {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.5px;
  }
   
  .badge {
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
   
  .link-text {
    font-size: 16px;
    text-decoration: underline;
    color: hsla(208, 91%, 48%, 1);
  }
   
  .link-text-small {
    font-size: 14px;
    text-decoration: underline;
    color: hsla(208, 91%, 48%, 1);
  }
  .body{
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 24px;
  }
  .body-bold{
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 24px;
  }
  
  .body-small{
    font-size: 14px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 24px;
  }
  
  .body-small-bold{
    font-size: 14px;
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 24px;
  }
/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./src/styles/_devextreme-overrides.css ***!
  \******************************************************************************************************************************************************************************************************************************/
/* =====================

   DEVEXTREME OVERRIDES

   ===================== */

body.light {
    --dx-color-icon: var(--ui-text-muted);
    --dx-color-text: var(--ui-text);
    --dx-color-border: var(--ui-border);
    --dx-color-bg: var(--ui-bg);
    --dx-color-hover-bg: var(--ui-bg-elevated);
    --dx-color-primary: var(--ui-primary);
    --dx-color-success: var(--ui-success);
    --dx-color-error: var(--ui-error);
    --dx-component-color-bg: var(--ui-bg-elevated) !important;
}

body.dark {
    --dx-color-icon: var(--ui-text-toned);
    --dx-color-text: var(--ui-text);
    --dx-color-border: var(--ui-border);
    --dx-color-bg: var(--ui-bg);
    --dx-color-hover-bg: var(--ui-bg-accented);
    --dx-color-primary: var(--ui-primary);
    --dx-color-success: var(--ui-success);
    --dx-color-error: var(--ui-error);
    --dx-component-color-bg: var(--ui-bg-elevated) !important;
}

/* DevExtreme Elements */

/* .dx-button,
.dx-datagrid,
.dx-texteditor,
.dx-popup {
    background-color: var(--dx-color-bg) !important;
    color: var(--dx-color-text) !important;
    border-color: var(--dx-color-border) !important;
} */

/* changes for devextreme data grid */
.dx-datagrid>.dx-datagrid-headers,
.dx-datagrid>.dx-datagrid-rowsview,
.dx-datagrid>.dx-datagrid-total-footer {
    background-color: var(--ui-bg-elevated) !important;
    ;
}

.dx-datagrid-filter-panel {
    background-color: var(--ui-bg-elevated) !important;
}

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused)>td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused)>tr>td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover>td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover>tr>td {
    background-color: var(--dx-color-hover-bg) !important;
}

.dx-datagrid .dx-row>td {
    padding: 4px 7px;
    font-size: 11px !important;
    line-height: 11px !important;
    font-family: 'Inter' !important;
}

.dx-datagrid-filter-panel {
    padding: 8px 6px;
}

.dx-datagrid-filter-panel .dx-datagrid-filter-panel-text {
    font-size: 12px;
}

.dx-datagrid .dx-datagrid-table .dx-header-row>td {
    padding-top: 8px;
    padding-bottom: 8px;
}

.dx-toolbar .dx-toolbar-after {
    padding-inline-start: 0px;
    left: 0 !important;
}

.dx-datagrid-search-panel {
    margin: 0px;
    width: 170px;
}

.dx-texteditor.dx-editor-outlined {
    background-color: var(--ui-bg-elevated) !important;
}

.dx-datebox .dx-texteditor-input
{
    padding-right: 12px !important;
}

/* .dx-button:hover {
    background-color: var(--dx-color-hover-bg) !important;
}

.dx-datagrid .dx-row:hover {
    background-color: var(--dx-color-hover-bg) !important;
}

.dx-popup-title {
    background-color: var(--dx-color-hover-bg);
    color: var(--dx-color-text);
} */
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles/styles.scss?ngGlobalStyle ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: var(--dx-color-bg);
  color: var(--ui-text);
  font-family: "Inter", sans-serif !important;
  display: flex;
  flex-direction: column;
}

.button-disabled {
  cursor: not-allowed !important;
  opacity: 0.6;
  color: var(--ui-text-disabled);
}

/*# sourceMappingURL=styles.css.map*/