:root {
    --black: #000000;
    --gray-600: #595959;
    --white: #ffffff;
    --body-bg-color: #f3f6f9;
    --header-bg-color: #263f58;
    --secondary: #364967;
    --secondary-hover: #293c5a;
    --seconday-outlined-hover: #e0e0e0;
    --table-odd-row: #f9fafce6;
    --table-odd-row-hover: rgba(0, 0, 0, 0.04);
    --table-border-color: #f1f1f1;
}

.MuiButton-containedSecondary {
    background-color: var(--secondary);
}
.MuiButton-containedSecondary:hover {
    background-color: var(--secondary-hover);
}
.MuiButton-outlinedSecondary {
    color: var(--secondary);
    border-color: var(--secondary);
    background-color: var(--white);
}
.MuiButton-outlinedSecondary:hover {
    border-color: var(--secondary);
    background-color: var(--seconday-outlined-hover);
}
.MuiButton-textSecondary {
    color: var(--secondary);
    background-color: var(--white);
}

.MuiDataGrid-columnHeader {
    color: var(--white);
    background-color: var(--secondary);
}
.MuiDataGrid-row:nth-of-type(odd) {
    background-color: var(--table-odd-row);
}
.MuiDataGrid-row:nth-of-type(odd):hover {
    background-color: var(--table-odd-row-hover);
}
.MuiDataGrid-row:nth-of-type(odd).Mui-selected:hover {
    background-color: var(--table-odd-row-hover);
}
.MuiDataGrid-row:nth-of-type(odd).Mui-selected {
    background-color: var(--table-odd-row);
}
.MuiDataGrid-root .MuiDataGrid-row:hover {
    background-color: var(--table-odd-row-hover);
}

.MuiDataGrid-row.Mui-selected{
    background-color: var(--white);
}

.MuiDataGrid-row.Mui-selected:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.MuiDataGrid-columnHeader .MuiDataGrid-cell {
    padding: 16px;
}
.MuiTableHead-root {
    background-color: var(--secondary);
}
.MuiTableCell-head {
    color: white;
}

.IconButtonTable {
    color: var(--secondary);
}

.MuiInputLabel-root {
    color: var(--gray-600);
}
.MuiInputLabel-shrink {
    font-weight: 400;
}
.MuiFab-secondary {
    background-color: var(--secondary);
}
.MuiFab-secondary:hover {
    background-color: var(--secondary-hover);
}
.MuiChip-filledSecondary {
    background-color: var(--secondary-hover);
}

/* Fonts */
.font-normal {
    --font-size-base: 14px;
    --font-size-typography-h3: 25px;
}

.font-large {
    --font-size-line-height: 1.1;
    --font-size-typography-body1: 20px;
    --font-size-typography-body2: 19px;
    --font-size-typography-h3: 30px;
    --font-size-typography-h6: 21px;
}

.font-extralarge {
    --font-size-line-height: 1.2;
    --font-size-typography-body1: 22px;
    --font-size-typography-body2: 21px;
    --font-size-typography-h3: 35px;
    --font-size-typography-h6: 25px;
}

.font-extralarge *,
.font-large * {
    font-family: Roboto, sans-serif;
    font-size: var(--font-size-typography-body1);
}

.font-extralarge .MuiTypography-root.MuiTypography-body1-Layout title,
.font-extralarge .MuiTypography-root.MuiTypography-h6,
.font-extralarge .MuiTypography-root.MuiTypography-subtitle2,
.font-extralarge h6,
.font-extralarge title,
.font-large .MuiTypography-root.MuiTypography-body1.Layout title,
.font-large .MuiTypography-root.MuiTypography-h6,
.font-large .MuiTypography-root.MuiTypography-subtitle2,
.font-large h6,
.font-large title {
    font-size: var(--font-size-typography-h6);
}

.font-extralarge .MuiTypography-root.MuiTypography-h3,
.font-extralarge h3,
.font-large .MuiTypography-root.MuiTypography-h3,
.font-large h3,
.font-normal .MuiTypography-root.MuiTypography-h3 {
    font-size: var(--font-size-typography-h3);
}

.font-extralarge .MuiLink-root,
.font-extralarge .MuiButton-text,
.font-extralarge .MuiButtonBase-root,
.font-extralarge .MuiChip-label,
.font-extralarge .MuiFormLabel-root,
.font-extralarge .MuiInputBase-input,
.font-extralarge .MuiInputBase-input::placeholder,
.font-extralarge .MuiListItem-root,
.font-extralarge .MuiStack-root,
.font-extralarge .MuiTypography-root.MuiTypography-body1,
.font-extralarge body,
.font-extralarge button,
.font-extralarge button:hover,
.font-large .MuiLink-root,
.font-large .MuiButton-text,
.font-large .MuiButtonBase-root,
.font-large .MuiChip-label,
.font-large .MuiFormLabel-root,
.font-large .MuiInputBase-input,
.font-large .MuiInputBase-input::placeholder,
.font-large .MuiListItem-root,
.font-large .MuiStack-root,
.font-large .MuiTypography-root.MuiTypography-body1,
.font-large body,
.font-large button,
.font-large button:hover {
    font-size: var(--font-size-typography-body1);
    line-height: var(--font-size-line-height);
}

.font-extralarge .MuiAccordionSummary-root,
.font-extralarge .MuiGrid-root.MuiGrid-item,
.font-extralarge .MuiTypography-root.MuiTypography-body2,
.font-extralarge .subtitle,
.font-extralarge li a,
.font-large .MuiAccordionSummary-root,
.font-large .MuiGrid-root.MuiGrid-item,
.font-large .MuiTypography-root.MuiTypography-body2,
.font-large .subtitle,
.font-large li a {
    font-size: var(--font-size-typography-body2);
    line-height: var(--font-size-line-height);
}

/* White Components */
.MuiWhiteTable .MuiDataGrid-columnHeader {
    background: var(--white);
    color: var(--black);
}