/* General body and background colors */
html, body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #98a2ae !important;
}

fa-gear {
    color: #333;
}
.top-row .dropdown-toggle {
    vertical-align: middle;
}

.nav-charcoal {
    background-color: #333333 !important;
    color: #FFFFFF !important; /* Ensure text is readable (white) */
}

.nav-charcoal .nav-link {
    color: #FFFFFF !important; /* Ensure nav links are readable */
}

.sidebar {
    background-color: #333333 !important; /* Ensure sidebar is Charcoal Gray */
}

.top-row.navbar {
    background-color: #BF4E30 !important; /* Ensure top navbar is red */
}

    .top-row.navbar a,
    .top-row.navbar span {
        color: #FFFFFF !important; /* Ensure text in top navbar is white for readability */
    }
/* Import Roboto from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    font-family: 'Segoe UI','Roboto', sans-serif;
}

/* Main menu card: entire card background */
.b-card.mainmenu-card {
    background-color: #4A2C3A !important;
    border: none !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 1rem !important;
    color: blue !important;
}

/* Header inside the card */
.b-card-header {
    background-color: transparent !important; /* transparent to inherit from .b-card */
    color: blue !important;
    border-bottom: none !important;
    padding: 1rem;
}

    /* Header h4 styling */
    .b-card-header h4 {
        margin-bottom: 0;
    }

/* List group items */
/*.b-list-group-item {
    background-color: transparent !important;
    border: none !important;
    padding: 0.5rem 1rem;
}

.b-list-group-item a {
    color: blue !important;
    text-decoration: none;
}

.b-list-group-item a:hover {
    text-decoration: underline;
}*/

h1, h2, h4, h5, h6,
.h1, .h2, .h4, .h5, .h6 {
    color: #535d6a !important;
    padding-top: 25px !important;
}

/* color: #383536 !important; */

h3, .h3 {
    color: white !important;
    padding-top: 25px !important;
}


/*@keyframes flash-red {
    0%, 100% {
        color: red;
    }

    50% {
        color: gray;
    }
}

.bell-icon.flash-red {
    animation: flash-red 1s infinite;
}

.bell-icon {
    color: White;
    padding: 20px;
}*/

    /* Color when there's an action */
    /*.bell-icon.active {
        padding: 20px;
        color: red !important;*/ /* Red when signaling action */
    /*}*/