#header_top{	
	z-index: $zindex-fixed;	
	position: fixed;
    width: $sidebar-icon;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    border-right: 1px solid $gray-100 ;

    @include max-screen($break-large) {
        background: $white;
        border-right: 1px solid $border-color;
    }
    @include max-screen($break-small - 1px) {
        border-bottom: 1px solid $border-color;
        border-right: 0;
        background: $gray-50;
        flex-direction: row;
        height: auto;
        width: 100%;
        padding: 0 15px;
        
        .hleft,
        .dropdown{
            display: flex;
            align-items: center;
        }
        .header-brand{
            margin: 0;
            padding-right: 15px;
        }
    }	
	.header-brand {
		padding: 0;
		transition: .3s opacity;
        margin-top: 10px;
        margin-bottom: 15px;
        display: inline-block;
        @include max-screen($break-xsmall){
            margin: 0 15px 0 0;
        }

		&:hover {
			opacity: .8;
			color: inherit;
			text-decoration: none;
		}
    }    
	.brand-logo {
        background: $gray-800;
        padding: 10px;
        color: $white;
        border-radius: 35px;
        display: inline-block;
    }
    .nav-link{
        padding: 12px;
        display: inline-flex;
        color: $gray-700;
        i{
            font-size: $font-size + 3px;
        }
        .avatar{
            border: 2px solid $white;
        }
    }
	.header-avatar {
		@include border-radius(50%);
		width: 2rem;
		height: 2rem;
		display: inline-block;
		vertical-align: bottom;
    }
    .hright{

        .dropdown-menu{
            top: 50px !important;
            left: 50px !important;
            
            @include max-screen($break-small - 1px) {
                top: 0 !important;
                left: auto !important;
            }
        }        
    }
}