/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap');

/* Import Font Awesome */
@import url('https://use.fontawesome.com/releases/v5.8.1/css/all.css');

/* Import AG-Grid Theme */
@import url('https://cdn.jsdelivr.net/npm/ag-grid-community@31.3.2/styles/ag-theme-quartz.css');



 
:root {
    --primary-color: #004494;
    --highlight-color: #da1e28;
    --nav-link-hover-background: rgba(218, 30, 40, 0.7);
}


.btn {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: #ffffff;
    margin-top: 20px;
}

.nav-link {
    color: white;
}

.nav-pills .nav-link.active {
    background-color: var(--highlight-color);
}

/* Ensure the color only applies when active */
.nav-pills .show>.nav-link.active {
    background-color: var(--highlight-color);
}

/* Optional: Reset background color for non-active links */
.nav-pills .nav-link:not(.active) {
    background-color: initial;
}

/* Target all nav-link elements on hover */
.nav-pills .nav-link:hover {
    background-color: var(--nav-link-hover-background); /* Replace with your desired color */
    color: white;
}

/* Optional: Specific color for active links on hover */
.nav-pills .nav-link.active:hover {
    background-color: var(--nav-link-hover-background); /* Replace with your desired color for active links on hover */
    color: white;
}




body, html {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;  /* Matches the font-size you found */
    font-weight: 200;  /* Matches the font-weight you found */
    line-height: 24px; /* Matches the line-height you found */
    color: rgb(33, 37, 41);  /* Matches the color you found */
    text-align: start;  /* Matches the text alignment */
    box-sizing: border-box; /* Matches the box-sizing */
    color-scheme: light;  /* Ensures light color scheme */
    height: 100%;
}

ag-theme-alpine.ag-custom-class {
    --ag-foreground-color: rgb(126, 46, 132);
    --ag-background-color: rgb(249, 245, 227);
    --ag-header-foreground-color: rgb(204, 245, 172);
    --ag-header-background-color: rgb(209, 64, 129);
    --ag-odd-row-background-color: rgb(0, 0, 0, 0.03);
    --ag-header-column-resize-handle-color: rgb(126, 46, 132);

    --ag-font-size: 17px;
    --ag-font-family: monospace;
}

.sidebar {
    position: fixed; 
    top: 0;
    left: 0;
    bottom: 0;  
    width: 18rem;
    padding: 2rem 1rem;
    color: white;
    background-color: var(--primary-color);
    overflow-y: auto; /* Enable vertical scrolling */
}

.content {
    margin-left: 18rem;
    margin-right: 2rem;
    padding: 2rem 1rem;
}


.custom-tabs .nav-link {
    color: black;
}

.custom-tabs .nav-link.active {
    color: #448193;
}

.custom-tabs .nav-link:active {
    color: #448193;
}

.sub-nav-link {
    font-size: 0.8em; /* Makes the font slightly smaller */
    padding-left: 40px; /* Adjusts the text to the right */
    color: white; /* Optional: changes the text color */
}