.btn-toggle-fullwidth {
	@include max-screen($break-1024) {
		display: none;
	}
}

.navbar-fixed-top{
	@include transition(all .3s ease-in-out);
	background: $dark;
    position: fixed;
    top: 0px;
    right:  0;
    width: 100%;
	z-index: 12;
	padding: 5px 0;
	border-bottom: 4px solid;
	
	> .container-fluid{
		padding: 0 10px;
	}
    
	@include max-screen($break-large) {
		width: 100%;
		margin: 0;		
    }

	.navbar-brand{
        @extend .p-r-15;
		@extend .m-r-15;
		padding: 0;
		float: left;

		.logo{
			width: 25px;			
		}
		span{
			@extend .m-l-10;
			color: $white;
			@extend .font-17;
        }
        .small_menu_btn{
            @include transition(all .3s ease-in-out);
            display: inline-block;
            padding: 0;
            color: $white;
            opacity: 0.4;
            &:hover{
                opacity: 1;
            }
        }

		@include max-screen($break-large) {
			display: block;
        }
        @include max-screen($break-small - 1px) {
            margin-left: 0;
            margin-right: 0 !important;
		}
	}
    
    .navbar-right{
		display: inline-flex;
	}

	.btn-toggle-fullwidth{
		float: left;
	}

	#navbar-search {

		@extend .padding-0;
		@extend .m-r-20;		
		float: left;
		position: relative;		

		.form-control{
			@include transition(all .3s ease-in-out);
			@extend .p-l-20;
			@extend .font-12;
			background: rgba($white, 0.06);
			width: 750px;
			height: 33px;
			border: none;

			@include max-screen($break-xxlarge){
				width: 600px;
			}			
			@include max-screen($break-1280){
				width: 400px;
			}			
			@include max-screen($break-1024){
				width: 250px;
			}
		}
	
		i{
			@extend .font-12;
		}

		.btn {
			@include box-shadow(none);	
			@extend .padding-0;
			color: $gray-500;
			position: absolute;
			top: 6px;
			right: 15px;			
			border: none;			
			background-color: transparent;
	
			&:hover,
			&:focus {
				background-color: inherit;
				border-left: none;
				border-color: inherit;
			}
		}
	
		@include max-screen($break-small - 1px) {
			display: none;
		}
	}
	
}

.navbar-nav {
	@include inline-block;
    @extend .margin-0;
	@extend .m-r-15;	

	> li{
		@include inline-block;
		vertical-align: middle;
		
        a{
            color: $white;
        }
	}

	.dropdown-menu {
        @include box-shadow(0px 2px 20px 0px rgba($dark,0.2));
        border-radius: $border-radius-large;
        border: 0;
		top: 100%;
		position: absolute;
		font-size: inherit;
		overflow: hidden;
		padding: 0 0 20px 0;
		right: 0;
		left: auto;

		li.header{
            @extend .m-b-15;
            padding: 10px 20px;			
			border-bottom: 1px solid rgba($dark, 0.05);
			position: relative;
			display: flex;
			height: 80px;
			align-items: center;
			color: $white;

			&::after{
				position: absolute;
				content: '';
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				z-index: -1;				
            }
        }
        li:hover{
            background: rgba($dark, 0.07);
        }
	}

	.icon-menu {
		@include transition(all .3s ease-in-out);
		@include inline-block;
		color: rgba($white, 0.4);
		padding: 12px 15px;
		position: relative;

		&:hover,
		&.active{
			color: $white;
		}
		&::after{
            display: none;
		}
		i{
			vertical-align: middle;
		}

		.notification-dot {
			@include border-radius(5px);
			width: 5px;
			height: 5px;
			line-height: 14px;
			position: absolute;
			top: 12px;
			right: 11px;			
			text-align: center;
			font-size: 8px;
			color: $white;
		}
	}

	ul.email {
		width: 360px;
		list-style: none;

		li{
			a{
				padding: 15px 25px;
                display: block;
                .media{
                    margin-bottom: 0;
                }
			}		
		}
		&.right_chat .media{
			.name{
				small{
					@extend .font-12;
					color: $gray-400;
				}
			}
		}

		@include max-screen($break-small) {
			width: calc(100% - 20px);
    		margin: 0 10px;
		}
	}
	ul.feeds_widget{
		width: 360px;

		@include max-screen($break-small) {
			width: calc(100% - 20px);
    		margin: 0 10px;
		}
    }    

	@include max-screen($break-small - 1px) {
		margin-right: 0;

		> li {
			position: inherit;
			text-align: center;
		}
		.dropdown-menu {
			max-height: 400px;
			overflow: auto;			
		}		
		.dropdown-menu > li > a {
			white-space: normal;
		}
		.open .dropdown-menu {
			@include box-shadow(0px 2px 6px 0px rgba(0,0,0,0.05));
			position: absolute;
			width: 100%;
			background: $white;

			> li > a {
				padding: 3px 20px;
			}

			&.notifications > li > a {
				padding: 12px 15px;
			}
		}
		.news,
		.megamenu_toggle{
			display: none;
        }
        .reports{
            display: none;
        }
    }
    @include max-screen($break-medium) {
        .project,
        .settings{
            display: none;
        }
    }
}


@include max-screen($break-small) {
	.navbar > .container .navbar-brand, 
	.navbar > .container-fluid .navbar-brand {
		margin-left: 0;
	}
}

.nav .open > a {
	&,
	&:hover,
	&:focus {
		border-color: #ddd;
	}
}

.dropdown-menu {
	&.dropdown-md { min-width: 250px; }
	&.dropdown-lg { min-width: 360px; }

	> li > a {
		&,
		&:hover,
		&:focus {
			color: $font-color;
		}
	}
	> .active > a {
		&,
		&:hover,
		&:focus {
			background-color: $color-accent;
		}
	}
}