@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
    font-family: 'Inter', 'Roboto', 'Segoe UI', Arial, sans-serif;
}

body {
    font-family: 'Inter', 'Roboto', 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    color: #111827;
}

input,
select,
button,
table {
    font-size: 14px;
}

.table,
.data-table,
table,
th,
td {
    font-variant-numeric: tabular-nums;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

app-sidebar {
    display: block;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 50;
}

@media (min-width: 768px) {
    app-sidebar {
        width: auto;
        position: relative;
        z-index: auto;
    }
}