/**
    ** template to overwrite the menu styles in the extra script 
    ** MANUAL for PRODUCT TEAM MEMBERS **
    **
    ** These css classes are aligned with the nav bar going top to bottom
    ** 1) be careful to not remove '!important' statements
    ** 2) every color value in this document can be adjusted to your liking, 
    **    examples of valid color formats in css are:
    **    - names: red, blue, etc
    **    - hexCodes: #fff, #fafafa
    **    - rgbCodes: rgba(255, 255, 255, 0.5)
    **
    ** More on CSS color codes: https://www.quackit.com/css/css_color_codes.cfm
    */
    /*
    ** TOP/LOGO SECTION **
    **/
    .kt-navbar__header {
        /* hairline between logo and middle of menu */
        border-bottom: 1px solid grey !important;
    }
    /*
    ** END OF TOP/LOGO SECTION **
    */
    /*
    ** MIDDLE SECTION  **
    */
    .kt-navbar {
        color: white !important;
        /* text color */
        background: black !important;
        /* background color, you can also use #fafafa, rgba(255, 255, 255, .05) */
        border-right: 1px solid grey !important;
        /* change the color of the right-border */
    }
    .kt-navbar-menu__section {
            color: white;
    }
    .kt-navbar .kt-navbar-menu__item:hover {
        color: white !important;
        /* text color */
            font-weight: bold !important;
    }
    .kt-navbar-menu__item.active {
        color: white !important;
        font-weight: bold !important;
    }
    



    
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=AW-11060489146"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'AW-11060489146');
    </script>
    /*
    ** QUICK LINKS SECTION  **
    */
    
    .kt-navbar__quick-links__link {
    color: white !important;
    }
    .kt-navbar-quick-links{
     background: inherit !important;
    }
    .kt-navbar-quick-links__link{
     margin-top: 10px;
     color: rgb(234, 240, 250);
    }
    .kt-navbar-quick-links__link span{
    color: white;
    /* also I manually set the color of the Text for the link to match the Main Brand color */
    }
    .kt-navbar-quick-links__link .yoco {
        position: absolute;
        right: 0;
        top: 10;
        margin-right: 10px;
        /* set the position and a bit of margin to the icon so it goes to the right side of the navbar */
        color: white;
        /* also I manually set the color to match the Main Brand color */
    }
    /*
    ** END OF QUICK LINKS SECTION  **
    */
    
    /*
    ** END OF MIDDLE SECTION **
    */
    /*
    ** FOOTER SECTION **
    */
    .kt-navbar__footer {
        /* hairline between footer and middle of menu */
        border-top: 1px solid grey !important
    }
    .kt-user-menu {
        color: white !important;
        /* text color */
        background: black !important;
        /* background color, you can also use #fafafa, rgba(255, 255, 255, .05) */
            box-shadow: 0 0.2rem 1rem 0.2rem rgba(0,0,0,.24);
            border: 1px solid white !important;
    }
    .kt-user-menu__info__text__name {
        color: white !important;
    }
    .kt-user-menu__info__text__status {
        color: white !important
    }
    /*
    ** USER INFO POPOVER**
    */
    .kt-user-info {
        color: white !important;
        /* text color */
        background: black !important;
        /* background color, you can also use #fafafa, rgba(255, 255, 255, .05) */
    }
    .kt-user-menu__section__item:hover {
        background-color: white !important;
        color: black !important;
    }
    .kt-user-menu__section__item a:hover {
        color: black !important;
    }