@font-face {
    font-family: "eco-stor-font";
    src: url(/_dec/assets/Manrope-VariableFont_wght.ttf);
}


:root[data-mantine-color-scheme="light"] {
  --mantine-color-text: var(--mantine-color-brand-5) !important;  /* default text color for dmc components*/
} 

.ag-theme-quartz.eco {
    --ag-border-color: var(--mantine-color-surface-5)!important;
    --ag-header-height: 30px!important;
    --ag-header-background-color: var(--mantine-color-surface-5)!important;
    --ag-font-family: "eco-stor-font"!important;
    --ag-header-foreground-color: var(--mantine-color-brand-5)!important;
    --ag-borders-width: 1px!important;
    --ag-row-border-style: solid!important;
    --ag-row-border-width: 1px!important;
    --ag-row-border-color: var(--mantine-color-surface-5)!important;

    --ag-row-color:  var(--mantine-color-brand-5)!important;
    --ag-border-radius: 1rem!important;
    --ag-foreground-color: var(--mantine-color-brand-5)!important;
    min-height: unset !important;
    font-size: 14px;
}

.ag-theme-quartz.eco .ag-paging-panel {
  background-color: var(--mantine-color-surface-5) !important;
  border-top: 1px solid var(--mantine-color-default-border, #e0e0e0);
}

.ag-theme-quartz.eco .ag-row-selected {
  background-color: var(--mantine-color-brand-1) !important;
}

.ag-theme-quartz.eco .ag-cell-selected {
  background-color: var(--mantine-color-brand-1) !important;
}

.ag-theme-quartz.eco .ag-cell-focus {
  border: 1px solid var(--mantine-color-brand-1) !important;
}

.ag-theme-quartz.eco .ag-cell-hover {
  background-color: var(--mantine-color-brand-1) !important;
  cursor: pointer;
}

.ag-theme-quartz.eco .ag-row-hover {
  background-color: var(--mantine-color-brand-1) !important;
  cursor: pointer;
}

@media (max-width: 1200px) {
    .ag-theme-quartz.eco {
        font-size: 12px;
    }
}

@media (max-width: 900px) {
    .ag-theme-quartz.eco {
        font-size: 12px;
    }
}

@media (max-width: 600px) {
    .ag-theme-quartz.eco {
        font-size: 10px;
    }
}

.ag-theme-quartz.eco.noheader {
    --ag-header-height: 0!important;
    --ag-header-column-separator-height: 0!important;
    --ag-header-column-separator-width: 0!important;
    --ag-header-column-separator-display: none!important;
    --ag-header-column-resize-handle-display: none!important;
    --ag-header-foreground-color: var(--mantine-color-surface-5)!important;
    --ag-header-background-color: var(--mantine-color-surface-5)!important;
    --ag-border-color: var(--mantine-color-surface-5)!important;
    --ag-row-border-color: var(--mantine-color-surface-5)!important;
}

:root {
  --mantine-scale: 1;
}

/* Tablet */
@media (max-width: 768px) {
  :root {
    --mantine-scale: 0.9 !important;
  }
}

/* Phone */
@media (max-width: 480px) {
  :root {
    --mantine-scale: 0.85 !important; 
  }
}