#header {
    background: #fff;
    box-shadow: 0 6px 6px rgba(149, 149, 149, .1);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1000;
}

#header .avatar{
    display: flex;
}

#header .user-name{
    margin-left: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#header .vertical-nav-con {
    display: flex;
    justify-content: space-between;
    height: 60px;
    padding: 0 20px;
    align-items: center;
}

#header .vertical-nav-con .header-icon {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 1;
    overflow: hidden;
    margin-left: 20px;
}

.el-menu-item.header-menu a{
    display: block;
    width: 100%;
}

#header .el-menu-item:hover, #header .el-sub-menu__title:hover {
    background-color: unset;
}

#header .el-sub-menu .el-sub-menu__icon-arrow {
    display: none;
}

#header .el-menu:not(.el-menu--collapse) .el-sub-menu__title {
    padding-right: 10px;
}

#header .navbar-container {
    max-width: 1200px;
    margin: 0 auto;
}
#header .el-menu--horizontal {
    height: 90px;
}

#header .el-menu--horizontal.el-menu {
    border-bottom: unset;

}
#header .el-menu--horizontal>.el-menu-item {
    color: #444 !important;
    font-size: 20px;
    border-bottom: unset !important;
    padding: 0;
}

#header .el-menu--horizontal>.el-menu-item:hover {
    color: #409eff !important;
}

#header .el-menu--horizontal>.el-menu-item .system-name {
    font-size: 20px;
    color: #000;
    margin-left: 6px;
}

#header .el-menu--horizontal>.el-menu-item:nth-child(1) {
    margin-right: auto;
}
#header .el-menu--horizontal>.el-sub-menu .el-sub-menu__title {
    font-size: 20px;
}

#header .el-menu--horizontal>.el-menu-item.is-active {
    color: #409eff !important;
    border-bottom: unset;
}


.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
    border-bottom: unset;
}

#header  .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, #header  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    background-color: unset;
}


.navbar-brand {
    width: 95px;
    background: url(/static/ticket/image/global-nav/magewell-logo-blue@1x.png?v=20190820) no-repeat center;
    background-size: 100% 25px;
}

@media (min-width: 992px) {
    .navbar-brand {
        width: 190px;
        background: unset;
        background-image: url(/static/ticket/image/global-nav/magewell-logo-blue@1x.png?v=20190820);
        background-size: unset;
    }
}

@media screen and (max-width: 991px) {
    .navbar-brand {
        width: 95px;
        background: unset;
    }

    .navbar-brand img {
        max-width: 100%;
    }


    .headroom {
        will-change: transform;
        transition: transform 200ms linear;
    }
    .headroom--pinned {
        transform: translateY(0%);
    }
    .headroom--unpinned {
        transform: translateY(-100%);
    }
}


.user-profile-dlg {
    height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-profile-dlg .el-dialog__body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}