/*
===============
    Desktop Nav
===============
*/

.desktop-nav.header {
	background-color: #333d46;
	padding: 15px 10px;
	z-index: 1040;
	box-shadow: 126px 0px 20px -2px rgba(22,30,42,0.16);
	box-shadow: 0 1px 15px rgba(0,0,0,.04), 0 1px 6px rgba(0,0,0,.04);
	.nav-logo {
		a.sidebarCollapse {
			i {
				font-size: 31px;
				vertical-align: middle;
				color: #d3d3d3;
			}
		}
		a {
			span.navbar-brand-name {
				font-size: 20px;
				vertical-align: middle;
				color: #d3d3d3;
				font-weight: 600;
			}
		}
	}
	.navbar-nav {
		/*      Search Form       */
		.form-inline.search {
			padding: 11px 0;
			position: relative;
			&:before {
				position: absolute;
				font-family: $font_family_1;
				left: 0px;
				content: "";
				top: 17px;
				z-index: 6;
				font-size: 21px;
				color: $color_74;
				pointer-events: none;
			}
			input {
				font-size: 17px;
				background-color: $color_21;
				padding-left: 31px;
				padding-top: 9px;
				cursor: pointer;
				border: none;
				-webkit-border-radius: 10em;
				-moz-border-radius: 10em;
				border-radius: 10em;
				color: #d3d3d3;
				&::-webkit-input-placeholder {
					color: $color_51;
				}
				&::-moz-placeholder {
					color: $color_51;
				}
				&:-ms-input-placeholder {
					color: $color_51;
				}
				&:-moz-placeholder {
					color: $color_51;
				}
			}
		}
		/*   Language   */
		/*   Language Dropdown  */
		.language-dropdown {
			border-left: 1px solid #63757d;
			border-right: 1px solid #63757d;
			a {
				span {
					font-size: 14px;
					font-weight: 600;
				    color: #d3d3d3;
				}
				&:after {
					display: none;
				}
				img {
					margin-right: 8px;
				}
			}
			.dropdown-menu {
				border: none;
				border-radius: 4px;
				min-width: 7rem;
			    background-color: #494949;
			    top: 63px;
				.dropdown-item {
					&:hover {
						border-radius: 15px;
						background-color: $color_21;
						span {
							color: $color_7;
						}
					}
					&:active {
						background-color: $color_21;
					}
				    color: #fff;
				    font-size: 14px;
				    padding: 5px 10px;
					span {
						color: $color_19;
						font-size: 14px;
						font-weight: 600;
						padding-bottom: 20px;
						width: 60%;
					}
				}
				.dropdown-item.active {
					background-color: $color_21;
				}
			}
		}
		/* User Profile */
		/* User Profile Dropdown */
		.user-profile-dropdown {
			a.user {
				&:after {
					display: none;
				}
				img {
					border-radius: 50%;
					width: 40px;
				}
				i {
					font-size: 23px;
					color: #d3d3d3;
				}
				.user-profile {
					position: relative;
					&:before {
						position: absolute;
						content: '';
						height: 10px;
						width: 10px;
						background-color: $color_71;
						border-radius: 50%;
						bottom: 0;
						right: 0;
						z-index: 1;
						border: 2px solid #fff;
					}
				}
			}
			.dropdown-menu {
				border: none;
				border-top: 3px solid #ee3d50;
				border-radius: 15px;
				min-width: 12rem;
				box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
				.dropdown-item.active {
					background-color: $color_21;
				}
				.dropdown-item {
					&:active {
						background-color: $color_21;
					}
				}
				div.dropdown-item {
					padding: 10px 0 0;
					&:hover {
						border-radius: 15px;
						background-color: $color_21;
					}
					p {
						color: $color_66;
						font-size: 11px;
						font-weight: 600;
					}
					div {
						i {
							color: $color_66;
							font-weight: 600;
							font-size: 14px;
						}
					}
				}
				a.dropdown-item {
					padding: 4px 8px 4px;
					line-height: 1.5;
					&:hover {
						background-color: $color_21;
						span {
							color: $color_4;
						}
					}
					i {
						padding: 6px;
						border-radius: 50%;
						border: 1px solid #5c52c2;
						color: $color_65;
						font-size: 19px;
					}
					span {
						color: $color_35;
						font-size: 14px;
					}
				}
				div.dropdown-item-btn {
					padding: 13px 20px;
					a {
						background: #1b1c36;
						border-radius: 30px;
						padding: 3px 10px;
						i {
							color: $color_15;
							font-weight: 600;
							font-size: 19px;
						}
						span {
							color: $color_5;
							font-size: 14px;
						}
					}
				}
			}
		}
		/* Message */
		/* Message Dropdown */
		.message-dropdown {
			a {
				&:after {
					display: none;
				}
				span.icon {
					display: block;
					font-size: 23px;
					color: #d3d3d3;
				}
				span.badge {
					position: absolute;
					top: 50%;
					margin-top: -17px;
					right: -13px;
					border-radius: 50%;
					background-color: $color_60;
					padding: 1px;
					border: 2px solid #1a73e9;
					font-size: 11px;
				}
			}
			.dropdown-menu {
				border: none;
				border-radius: 4px;
				min-width: 18rem;
				right: 0;
				left: auto;
			    top: 63px;
			    background-color: #494949;
				a.dropdown-item {
					cursor: pointer;
					&:hover {
						background-color: transparent;
					}
					>div {
						.media.notification-new {
							.usr-img {
								position: relative;
								&:before {
									position: absolute;
									content: '';
									height: 10px;
									width: 10px;
									background-color: $color_77;
									border-radius: 50%;
									bottom: 0;
									right: 0;
									z-index: 1;
									border: 2px solid #fff;
								}
							}
							.notification-icon {
								position: relative;
								&:before {
									position: absolute;
									content: '';
									height: 10px;
									width: 10px;
									background-color: $color_77;
									border-radius: 50%;
									bottom: 0;
									right: 0;
									z-index: 1;
									border: 2px solid #fff;
								}
							}
						}
						.media {
							.usr-img {
								img {
									width: 35px;
									height: 35px;
									border: none;
								}
							}
							.media-body {
								flex: auto;
								p.meta-user-name {
									color: #fff;
									font-weight: 600;
									font-size: 14px;
								}
								p.meta-title {
									color: #fff;
									font-weight: 600;
									font-size: 14px;
								}
								p.meta-time {
									color: #d3d3d3;
									font-weight: 600;
									font-size: 11px;
								}
								p.message-text {
									color: #d3d3d3;
									font-size: 13px;
									white-space: normal;
								}
							}
							.notification-icon {
								i {
									font-size: 22px;
									background: #c2d5ff;
									border-radius: 50%;
									padding: 7px;
									color: $color_60;
								}
							}
						}
					}
				}
				.dropdown-item.active {
					background-color: $color_21;
				}
				.dropdown-item {
					&:active {
						background-color: $color_21;
					}
				}
			}
		}
		.message-dropdown.show {
			a {
				span.badge {
					background-color: $color_75;
					border: 2px solid #c2d5ff;
					color: $color_60;
				}
			}
		}
		/* Notification */
		/* Notification Dropdown */
		.notification-dropdown {
			a {
				&:after {
					display: none;
				}
				span.icon {
					display: block;
					font-size: 23px;
					color: #d3d3d3;
				}
				span.badge {
					position: absolute;
					top: 50%;
					margin-top: -17px;
					right: -13px;
					border-radius: 50%;
					background-color: $color_60;
					padding: 1px;
					border: 2px solid #1a73e9;
					font-size: 11px;
				}
			}
			.dropdown-menu {
				border: none;
				border-radius: 4px;
				min-width: 195px;
				min-width: 14rem;
				max-width: 316px;
				padding: 8px 5px;
				right: 0;
				left: auto;
				top: 63px;
			    background-color: #494949;
				.dropdown-item.active {
					background-color: $color_21;
				}
				.dropdown-item {
					&:active {
						background-color: $color_21;
					}
					padding: 10px 12px !important;
					a {
						.media {
							.user-profile {
								position: relative;
								&:before {
									position: absolute;
									content: '';
									height: 10px;
									width: 10px;
									background-color: $color_71;
									border-radius: 50%;
									bottom: 0;
									right: 23px;
									z-index: 1;
									border: 2px solid #fff;
								}
							}
							img {
								width: 38px;
								border-radius: 50%;
								margin-right: 23px;
							}
						}
						.media-body {
							align-self: center;
							span {
								color: #d3d3d3;
								font-weight: 600;
								font-size: 14px;
							}
						}
					}
					&:hover {
						a {
							.media-body {
								span {
									color: #fff;
								}
							}
						}
					}
				}
				div.dropdown-item {
					&:hover {
						border-radius: 0;
						background-color: $color_21;
					}
				}
			}
		}
		.notification-dropdown.show {
			a {
				span.badge {
					background-color: $color_75;
					border: 2px solid #c2d5ff;
					color: $color_60;
				}
			}
		}
	}
}