.top-nav {
    position: fixed;
    top: @header_height;
    background-color: @main_color_p;
    .box-shadow(0px 1px 3px 0px rgba(0, 0, 0, 0.33));
    width: 100%;
    height: @top_nav_height;
    line-height: @top_nav_height;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;

    .asdc-app-title-wrapper {
        flex-grow: 1;
        line-height: 16px;
        margin: 0 20px;

        a.asdc-app-title {
            .m_18_r;
            text-decoration: none;
        }

        .asdc-version {
            .m_12_r;
            .opacity(0.8);
            line-height: 14px;
            flex-grow: 1;
        }

    }

    ul.top-menu {
        list-style-type: none;
        margin: 0 0 0 20px;
        padding: 0;
        flex-grow: 999;

        & > li {
            float: left;
            cursor: pointer;
            line-height: 50px;
            height: 50px;
            padding: 0 20px;

            &.selected {
                border-bottom: solid 4px @main_color_a;

                a {
                    color: @func_color_s;
                }
            }

            /*&:hover {
                border-bottom: solid 4px @main_color_a;
            }*/

            a {
                font-family: @font-opensans-medium;
                color: @main_color_m;
                font-size: 16px;
                display: block;
                text-align: center;
                text-decoration: none;
            }

            &.triangle-dropdown {
                padding: 0;
                position: relative;

                div.triangle {
                    margin-top: 15px;
                    border-radius: 2px;
                    width: 17px;
                    height: 18px;

                    //temp use - until new triangle gets in
                    line-height: 18px;
                    text-align: center;
                    font-size: 10px;

                    &:hover {
                        background-color: rgba(156, 156, 156, 0.2);

                        span {
                            .arrow-right-hover;
                        }
                    }
                }

                + li a {
                    font-size: 16px;
                }

                .ps-container {
                    .perfect-scrollbar;
                    position: absolute;
                    left: 0;
                    top: 40px;
                    z-index: 1;

                    overflow: hidden;
                    max-height: 0;
                    -webkit-transition: max-height 200ms ease-in;
                    -moz-transition: max-height 200ms ease-in;
                    -o-transition: max-height 200ms ease-in;
                    transition: max-height 200ms ease-in;

                    div ul {

                        padding: 0;
                        background-color: white;

                        li {

                            height: 35px;
                            background-color: white;
                            font-size: 13px;
                            width: 150px;
                            line-height: 35px;
                            padding: 0 10px;

                            &.disabled {
                                opacity: 1;
                            }
                            &.selected {
                                background-color: @tlv_color_v;
                                font-weight: bold;
                            }
                            &:hover {
                                color: @main_color_a;
                            }
                            span {
                                height: 35px;
                                width: 130px;
                                display: inline-block;
                            }
                        }
                    }
                }
                &.item-click:hover .ps-container,
                &.item-click:active .ps-container {
                    max-height: 500px;
                    border: 1px solid @func_color_b;
                    border-radius: 2px;
                    box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1);

                    div ul {

                    }
                }
            }
        }

    }

    .top-search {
        position: relative;
        flex-grow: 1;
        padding: 0 20px;

        input.search-text {
            .border-radius(2px);
            width: 245px;
            height: 32px;
            line-height: 32px;
            border: 1px solid @main_color_o;
            outline: none;
            text-indent: 10px;

            &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */
            &:-moz-placeholder { font-style: italic; } /* Firefox 18- */
            &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */
            &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */
            &:-ms-input-placeholder { font-style: italic; } /* Edge */
             /*   font-style: italic;
            }*/
            /* Firefox 18- */
            &::-moz-placeholder {
                font-style: italic;
            }
            /* Firefox 19+ */
            &:-ms-input-placeholder {
                font-style: italic;
            }
            /* IE 10+ */
            &:-ms-input-placeholder {
                font-style: italic;
            }
            /* Edge */
        }

        .magnification {
            position: absolute;
            top: 19px;
            right: 26px;
        }

    }

    .notification-icon {
        cursor: pointer;
        flex-grow: 1;
        margin: 0 10px 6px 0;
        .sprite-new;
        .vsp-list-icon;

        &:hover {
            .vsp-list-icon-hover;
        }

        &:active {
            .vsp-list-icon-active;
        }

    }

}