@font-face {
    font-family: 'Metropolis-Black';
    src: url('./fonts/Metropolis-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

.font-metropolis {
    font-family: 'Metropolis-Black', sans-serif !important;
}

:root {
    --fan-red: #ee0e0e;
    --fan-dark-grey: #565656;
    --fan-light-grey: #989898;
    --sidebar-width: 280px;
}

body {
    background-color: #f4f7f9;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

.top-row {
    background-color: white !important;
    height: 60px;
    border-bottom: 2px solid var(--fan-red) !important;
}

.sidebar {
    background-color: var(--fan-dark-grey) !important;
    width: var(--sidebar-width);
}

.nav-link.active {
    background-color: var(--fan-red) !important;
    color: white !important;
}

.btn-primary, .btn-danger {
    background-color: var(--fan-red) !important;
    border-color: var(--fan-red) !important;
}

.mud-table-cell {
    padding: 6px 12px !important;
}

.mud-table-row {
    height: 40px !important;
}

.mud-chip {
    height: 22px !important;
    font-size: 0.75rem !important;
}