@import '../../style/_colors.scss';
.active {
        background-color: $brand-blue!important;
        border-color: $brand-blue!important;
        color: #fff!important
    }
    .skyquakeNav {
        display: -ms-flexbox;
        display: flex;
        color:white;
        background:black;
        position:relative;
        z-index: 10;
        font-size:0.75rem;
        padding-right:1rem;
        .secondaryNav {
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: end;
                justify-content: flex-end;
        }
        .app {
            position:relative;
            margin: auto 0.5rem;
            h2 {
                font-size:0.75rem;
                border-right: 1px solid black;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                    align-items: center;
                .oi {
                    padding-right: 0.5rem;
                }
            }
            .menu {
                position:absolute;
                display:none;
                z-index:2;
                width: 100%;
            }
            &:first-child{
                h2 {
                    border-left: 1px solid black;
                }
            }
            &:hover {
                a {
                    color:$brand-blue-light;
                    cursor:pointer;
                }
                .menu {
                    display:block;
                    background:black;
                    a {
                        color:white;
                    }
                    li:hover {
                        a {
                            color:$brand-blue-light;
                        }
                    }
                }
            }
            &.active {
                color:white;
                background:black;
                a {
                    color:white;
                }
            }
        }
        a{
            display:block;
            padding:0.5rem 1rem;
            text-decoration:none;
            text-transform:uppercase;
            text-align:center;
            color:white;
        }
        &:before {
            content: '';
            min-width: 5.5rem;
            margin: 0.125rem 1rem;
            background: url('../../style/img/svg/osm-logo_color_rgb_white_text.svg') no-repeat center center;
            background-size: contain;
        }
        .userSection {
            display:-ms-flexbox;
            display:flex;
            -ms-flex-align:center;
            align-items:center;
            padding-left: 1rem;
            text-transform:uppercase;
            text-align: center;
            border-left:1px solid white;
            .projectSelect {
                padding: 0 0.5rem;
                font-size: 1rem;
                /* min-width: 75%;*/
                height: 25px;
            }
        }
    }