/* docs/stylesheets/custom.css */

/* Define the colors you want to use */
:root {
  --ct-blue-bg: #3F51B5; 
  --ct-white: #FFFFFF;
}

/* 1. TARGET: The Custom Header Element */
/* Nav section headers in the sidebar (group labels like "Agent Setup", "Carrier Setup") */
.md-nav--primary .md-nav__item--section > label,
.md-nav--primary .md-nav__item--section > .md-nav__link {
    font-weight: 700 !important;
    color: #000000 !important;
}

.custom-nav-header {
    /* Apply the requested background color and white font color */
    background-color: var(--ct-blue-bg) !important;
    color: var(--ct-white) !important;
    
    /* Enhance visibility */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    
    /* Spacing and visual adjustments to make it look like a pop-out bar */
    padding: 6px 16px 6px 16px !important;
    margin: 0 -16px 0 -16px !important; /* Forces background to full width of nav item */
    border-radius: 4px;
    border-left: 5px solid var(--ct-white) !important; 
}