.-.-.-.-.-

$ff: 'Nunito Sans', sans-serif;
body {
    color: #212121;
    font-size: .8rem;
    line-height: 1.5;
    font-weight: 400;
    font-family: $ff;
}
.dropdown-toggle {
    @include pseudo-element('after') {
		display: none;
    }
}
.tooltip {
    font-family: $ff;
    font-size: 12px;
    font-weight: 700;
}
.truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.progress-sm {
	height: .5rem;
	.progress-bar {
		height: .5rem;
	}
}
.img-thumbnail, .list-thumbnail {
	border-radius: .1rem;
	padding: 0;
	border: initial;
}
.list-thumbnail {
    height: auto;
    max-width: unset;
    height: 85px;
    object-fit: cover;
    width: unset!important;
    @include mq('tablet-wide', 'max') {
    	&.responsive {
		    width: unset;
		    height: 135px;
		}
    }
    &.small {
    	height: 60px;
    	font-size: 1rem;
    }
}
.list-thumbnail-letters {
    width: 85px;
    height: 85px;
    background: #090e40;
    align-items: center;
    display: flex;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    &.small {
    	width: 60px;
	    height: 60px;
	    font-size: 1rem;
    }
}
.list-item-heading {
    font-size: 1rem;
}
.flex-grow-1 {
    @include flex-grow(1);
}
.dropdown-menu {
    padding: 5px;
    font-size: 12px;
    background-color: $white;
    border-color: $empty;
    margin: 0;
    width: 170px;
    @include border-radius(6px);
    @include box-shadow(0 2px 30px rgba(0,0,0,.08));
	.dropdown-item {
	    background-color: $white;
	    padding: 8px 15px;
	    line-height: 14px;
	    @include border-radius(4px);
	    .dropdown-icon {
		    display: inline-block;
		    vertical-align: middle;
		    font-size: 16px;
		    margin-right: 5px;
		    vertical-align: -2px;
		    color: $grey;
		}
		&:hover, &:focus {
			background-color: #dee2e6 !important;
			color: $dark;
		}
		.badge {
		    width: 15px;
		    height: 15px;
		    border-radius: 50%;
		    text-align: center;
		    padding: 0;
		    line-height: 15px;
		}
	}
	@include pseudo-element('after') {
	    bottom: 100%;
	    left: 10px;
	    border: solid transparent;
	    content: ' ';
	    height: 0;
	    width: 0;
	    position: absolute;
	    pointer-events: none;
	    border-color: rgba(136, 183, 213, 0);
	    border-bottom-color: $white;
	    border-width: 5px;
    }
    &.dropdown-menu-right::after {
	    right: 10px;
	    left: auto;
	}
}
.wrapper {
	.header-top {
		background-color: $white;
		z-index: 1030;
	    position: relative;
	    padding: 15px 0;
	    position: fixed;
	    top: 0;
	    width: 100%;
	    left: 0;
	    padding-left: 240px;
	    @include box-shadow(0 1px 15px rgba(0,0,0,.04), 0 1px 6px rgba(0,0,0,.04));
	    .top-menu {
	    	.dropdown {
			    margin-left: 10px;
			    .dropdown-menu {
				    margin-top: 10px;
					&.menu-grid {
						width: 182px;
						.dropdown-item {
						    display: inline-block;
						    width: 40px;
						    height: 40px;
						    text-align: center;
						    padding: 0;
						    line-height: 40px;
						    font-size: 18px;
						    color: #5A5A5A;
						}
					}
					&.notification-dropdown {
						min-width: 300px;
						padding: 0;
						.header {
							margin: 0;
							padding: 15px;
							font-size: 16px;
							border-bottom: 1px solid #f1f1f1;
						}
						.notifications-wrap {
							.media {
								border-bottom: 1px solid #eef1f2;
								padding: 10px;
								&:nth-child(odd) {
								    background: #f8f9fa;
								}
								.d-flex {
									-webkit-box-align: start;
								    -ms-flex-align: start;
								    align-items: flex-start;
								    margin-right: 15px;
									i {
										color: #fff;
									    text-align: center;
									    font-size: 15px;
									    line-height: 30px;
									    top: 0;
									    height: 30px;
									    width: 30px;
									    background: #404E67;
									    @include border-radius(50%);
									}
									img {
										height: 30px;
									}
								}
								.media-body {
									font-size: 12px;
									.media-heading {
									    color: #444;
									    font-weight: 600;
									    letter-spacing: 0;
									}
									.media-content {
									    color: #868e96;
									}
								}
							}
						}
						.footer {
							text-align: center;
							padding: 10px 15px;
							a {
								color: #212121;
								font-size: 16px;
							}
						}
					}
				}
			}
	    	.nav-link {
			    width: 30px;
			    height: 30px;
			    padding: 0;
			    text-align: center;
			    line-height: 36px;
			    color: $dark;
			    border: none;
			    position: relative;
			    @include border-radius(50%);
			    @include transition(all .5s ease-in-out);
			    &:hover, &:focus{
			    	background-color: #dee2e6;
    				color: #333;
			    }
			    i {
				    font-size: 16px;
				}
				.badge {
				    right: -1px;
				    position: absolute;
				    top: -4px;
				    padding: 3px;
				    width: 17px;
				    font-size: 11px;
				    font-weight: 800;
				    color: #fff;
				    @include border-radius(100px);
				}
			}
			.avatar {
			    color: $inverse;
			    font-weight: 600;
			    width: 30px;
			    height: 30px;
			    line-height: 30px;
			    @include border-radius(50%);
			    display: inline-block;
			    background: #ced4da no-repeat center/cover;
			    position: relative;
			    vertical-align: bottom;
			    font-size: .875rem;
			    user-select: none;
			}
			.mobile-nav-toggle {
			    border: none;
			    position: relative;
			    margin-right: 5px;
			    span {
				    height: 2px;
				    width: 20px;
				    background-color: #4a5361;
				    display: inline-block;
				    border-radius: 4px;
				    position: absolute;
				    top: 14px;
				    left: 5px;
				    &::before, &::after {
				    	content: "";
					    height: 2px;
					    width: 20px;
					    border-radius: 4px;
					    background-color: #4a5361;
					    display: inline-block;
					    position: absolute;
				    }
				    &::before {
				    	left: 0;
    					top: -6px;
				    }
				    &::after {
			    	    left: 0;
						bottom: -6px;
				    }
				}
			}
			.header-search {
				padding: 0 10px;
				position: relative;
				.input-group {
					@include border-radius(20px);
					margin-bottom: 0;
					.input-group-addon {
					    color: #404E67;
					    padding: 2px 10px 2px 0px;
					    font-size: 16px;
					    cursor: pointer;
					    &.search-close {
						    padding: 2px 0px 2px 10px;
						    display: none;
						}
					}
					.form-control {
					    padding: 0 10px;
					    min-height: auto;
					    width: 0;
					    border: none;
					    color: #353c4e;
					    background-color: transparent;
					    @include border-radius(0px);
					}
				}
				&.open {
					.input-group {
					    background-color: #e4e4e4;
					    .input-group-addon.search-close {
						    display: block;
						}
					}
				}
			}
	    }
	    @include mq('tablet-wide', 'max') {
		    padding-left: 0;
		}
		&[header-theme="light"] {
		    background: $white;
		}
		&[header-theme="dark"] {
		    background: #272d36;
		}
		&[header-theme="blue"] {
		    background: $primary;
		}
		&[header-theme="red"] {
		    background: $danger;
		}
		&[header-theme="orange"] {
		    background: $warning;
		}
		&[header-theme="green"] {
		    background: $success;
		}
		&[header-theme="purple"] {
		    background: $purple;
		}
		&[header-theme="blue"], &[header-theme="red"], &[header-theme="orange"], &[header-theme="green"], &[header-theme="purple"], &[header-theme="dark"] {
			.top-menu {
		    	.nav-link {
		    		color: $white;
		    		background-color: $empty;
		    	}
		    	.header-search {
					.input-group {
						.input-group-addon {
						    color: $white;
						}
					}
				}
		    }
		}
	}
	.page-wrap {
	    position: relative;
	    .app-sidebar {
		    position: fixed;
		    left: 0;
		    top: 0;
		    width: 240px;
		    height: 100vh;
		    background-color: $white;
		    z-index: 1040;
		    @include box-shadow(0 3px 30px rgba(0,0,0,.1), 0 3px 20px rgba(0,0,0,.1));
		    @include transition(width 0.3s cubic-bezier(0, 0, 0.2, 1));
		    @include translate3d(0, 0, 0);
		    white-space: nowrap;
		    visibility: visible;
		    .sidebar-header {
			    @include flexbox();
			    @include align-items(center);
			    @include justify-content(space-between);
			    padding: 13px 15px;
			    height: 60px;
			    .header-brand {
				    display: block;
				    font-size: 22px;
				    font-weight: 700;
				    color: #212529;
				    .logo-img {
					    display: inline-block;
					    width: 30px;
					}
				}
				.nav-toggle {
					border: none;
					background-color: $empty;
					color: $white;
					font-size: 20px;
					@include box-shadow(none);
				}
				.btn-icon {
				    border: none;
				}
				.nav-close {
				    display: none;
				    border: none;
					background-color: $empty;
					color: $white;
					font-size: 20px;
					@include box-shadow(none);
				    @include mq('tablet-wide', 'max') {
				    	display: inline-block;
				    }
				}
				@include mq('tablet-wide', 'max') {
					.nav-toggle {
					    display: none;
					}
				}
			}
			.sidebar-content {
			    position: relative;
			    height: -webkit-calc(100vh - 60px);
			    height: -moz-calc(100vh - 60px);
			    height: calc(100vh - 60px);
			    overflow: auto;
			    z-index: 4;
			    .nav-container {
					.navigation-main {
						.nav-item {
						    // border-bottom: 1px solid #f3f3f3;
						    position: relative;
						    a {
							    display: block;
							    overflow: hidden;
							    padding: 15px 5px;
							    margin-left: 15px;
							    margin-right: 15px;
							    color: #545454;
							    position: relative;
							    i {
								    font-size: 20px;
								    margin-right: 10px;
								    display: inline-block;
								    vertical-align: -4px;
								}
								span {
								    font-size: 13px;
								}
								.badge {
									position: absolute;
								    right: 30px;
								    text-align: center;
								    top: 16px;
								    vertical-align: middle;
								    white-space: nowrap;
								    opacity: 1;
								    visibility: visible;
								    border-radius: 4px;
								    font-size: 75%;
								    padding: 4px 7px;
								    margin-right: 5px;
								    font-weight: 800;
								    color: #fff;
								    -webkit-transition: opacity 0.3s linear;
								    transition: opacity 0.3s linear;
								    text-transform: uppercase;
								}
								&.disabled {
								    opacity: 0.5;
								    cursor: not-allowed !important;
								}
							}
							&.has-sub {
								a::before {
								    content: "\e844";
								    font-family: "iconkit";
								    position: absolute;
								    right: 3px;
								    top: 15px;
								    @include rotate(0);
								    @include transition(all 0.2s ease-in-out);
								}
								.submenu-content {
								    background-color: #f3f3f3;
								    .menu-item {
									    padding: 10px 5px;
									    font-size: 13px;
									    padding-left: 50px;
									    margin: 0;
									    &::before {
										    display: none;
										}
										&.active {
											color: #eb525d;
										}
									}
									.nav-item {
										&::after {
											display: none;
										}
										a {
											position: relative;
											&::before {
											    content: "\e844";
											    font-family: "iconkit";
											    position: absolute;
											    right: 20px;
											    top: 10px;
											    display: inline-block;
											    @include rotate(0);
											    @include transition(all 0.2s ease-in-out);
											}
										}
										.submenu-content {
											.menu-item {
												padding-left: 70px;
												&::before {
													display: none;
												}
											}
										}
										&.open {
											a::before {
												@include rotate(90);
											}
										}
									}
								}
							}
							&:not(.open) .submenu-content {
							    display: none;
							}
							&.open {
								a::before {
									@include rotate(90);
								}
								&::after {
								    background: #576a3d;
								    border-radius: 10px;
								    color: #fff;
								    content: " ";
								    height: 30px;
								    left: 0;
								    position: absolute;
								    top: 10px;
								    width: 3px;
								}
							}
							&.active::after {
							    background: #576a3d;
							    border-radius: 10px;
							    color: #fff;
							    content: " ";
							    height: 30px;
							    left: 0;
							    top: 10px;
							    position: absolute;
							    width: 3px;
							}
						}
						.nav-lavel {
							font-size: 14px;
						    font-weight: 400;
						    opacity: 1;
						    padding: 8px 20px 8px;
						    text-transform: capitalize;
						    visibility: visible;
						    width: 100%;
						    color: #999;
						    background: #333e52;
						}
					}
			    }
			}
			&.colored {
		    	.sidebar-header {
				    background-color: #272d36;
				    .header-brand {
					    color: $white;
					}
				}
				.sidebar-content {
				    background-color: #404E67;
				    .nav-container {
						.navigation-main {
							.nav-item {
							    border-color: rgba(243, 243, 243, 0.15);
							    a {
								    color: $white;
								    i {
									    color: #bcc8d8;
									}
								}
								.submenu-content {
								    background-color: #4a5872;
								}
								&.open::after, &.active::after {
								    background-color: #eb525d;
								}
							}
						}
				    }
				}
		    }
		    &.hide-sidebar {
		    	@include transition(transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1));
		    	@include translate3d(-100%, 0, 0);
		    }
		    @include mq('tablet-wide', 'max') {
		    	@include transition(transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1));
		    }
		}
		.main-content {
		    padding: 30px 0;
		    background-color: #F6F7FB;
		    min-height: calc(100vh - 120px);
		    margin-top: 60px;
		    padding-right: 15px;
		    padding-left: 255px;
		    @include transition(all 0.3s ease);
		    @include mq('tablet-wide', 'max') {
		        padding-left: 0;
		        padding-right: 0;
		    }
		    .page-header {
			    margin-bottom: 30px;
			    .page-header-title {
			    	i {
			    		float: left;
					    width: 40px;
					    height: 40px;
					    border-radius: 5px;
					    margin-right: 20px;
					    vertical-align: middle;
				        font-size: 22px;
				        color: #fff;
				        display: inline-flex;
				        @include justify-content(center);
				        @include align-items(center);
				        @include box-shadow(0 2px 12px -3px rgba(0,0,0,0.5));
			    	}
			    	h5 {
			    		margin-bottom: 0;
			    		font-weight: 700;
			    		font-size: 18px;
			    		&+span {
			    			font-size: 13px;
			    		}
			    	}
			    }
			    .breadcrumb-container {
			    	float: right;
			    	.breadcrumb {
					    background-color: transparent;
					    margin-bottom: 0;
					    float: right;
					    .breadcrumb-item {
					    	a {
						    	color: #212121;
							}
						}
					}
			    }
			}
			.card {
		    	.card-body {
		    		.sub-title {
					    font-size: 14px;
					    border-bottom: 1px solid rgba(204,204,204,0.35);
					    padding-bottom: 10px;
					    margin-bottom: 20px;
					    color: #2c3e50;
					}
					code {
					    background-color: #eee;
					    margin: 5px;
					    display: inline-block;
					    padding: 1px 6px;
					    @include border-radius(3px)
					}
		    		.list-item-wrap {
		    			.list-item {
						    padding: 13px 20px;
						    border: 1px solid #ededed;
						    position: relative;
						    border-left: 0;
						    border-right: 0;
						    height: 50px;
						    overflow: hidden;
						    @include transition(transform 0.2s ease-in-out);
						    .item-inner {
						    	@include flexbox();
						    	@include justify-content(flex-start);
						    	position: relative;
						    	.custom-control {
								    margin: 0;
								    margin-top: -2px;
								}
								.list-title {
								    width: 100%;
								    display: block;
								    a {
									    color: #3e5569;
									    font-weight: 600;
									    display: block;
									    width: 100%;
									    white-space: nowrap;
									    text-overflow: ellipsis;
									    overflow: hidden;
									    width: calc(100% - 50px);
									}
								}
								.list-actions {
								    position: absolute;
								    right: 0px;
								    top: 50%;
								    opacity: 0;
								    display: none;
								    z-index: 3;
								    padding-left: 10px;
								    @include transform(translateY(-50%)); 
								    a {
									    width: 30px;
									    height: 30px;
									    padding: 0;
									    border-radius: 50%;
									    text-align: center;
									    line-height: 32px;
									    color: #999;
									    display: inline-block;
									    &:hover, &:focus {
									    	background-color: #dee2e6;
    										color: #333;
									    }
									}
								}
						    }
						    .qickview-wrap {
							    margin-top: 5px;
							    opacity: 0;
							    .desc {
							    	p {
									    margin: 0;
									}
							    }
							}
							&:hover, &:focus {
								background-color: #f9f9f9;
								.list-actions {
								    opacity: 1;
								    display: block;
								}
							}
							&.quick-view-opened {
							    height: auto;
							    background-color: $white;
							    border: none;
							    z-index: 5;
							    @include box-shadow(0 0 0 0 rgba(0, 0, 0, 0.01), 0 0 32px 0 rgba(0, 0, 0, 0.1));
							    @include scale(1.01);
							    .item-inner {
							    	.list-title {
										a {
										    font-size: 16px;
										    color: #263238;
										}
							    	}
							    }
							    .qickview-wrap {
								    opacity: 1;
								}
							}
							& + .list-item {
							    margin-top: -1px;
							}
							&:last-child {
							    border-bottom: none;
							}
						}
		    		}
		    	}
		    }
		}
		.footer {
		    background: $white;
		    padding: 20px 30px;
		    border-top: 1px solid rgba(0, 0, 0, 0.04);
		    font-size: calc(0.875rem - 0.05rem);
		    @include transition(all 0.25s ease);
		    @include mq('tablet-wide') {
		        padding-left: 270px;
		    }
		}
		.right-sidebar {
		    position: fixed;
		    top: 60px;
		    right: 0;
		    width: 240px;
		    background: #fff;
		    height: calc(100vh - 60px);
		    border-left: 1px solid #eef1f2;
		    border-top: 1px solid #eef1f2;
		    padding: 1.07143em;
		    z-index: 9;
		    @include transform(translateX(100%));
		    @include transition(all 0.25s ease);
		    .sidebar-chat {
		    	.sidebar-chat-info {
				    h6 {
				    	color: #353c4e;
				    }
				    .form-group {
				    	position: relative;
						.form-control {
							padding-right: 30px;
							@include border-radius(50px);
							padding-left: 15px;
						}
						i {
							position: absolute;
							top: 8px;
							right: 10px;
							font-size: 16px;
							color: #bbb;
						}
				    }
				}
				.chat-list {
					.list-group {
						margin-left: -1.07143em;
    					margin-right: -1.07143em;
    					.list-group-item {
						    background: none;
						    border: 0;
						    border-top: 1px solid #eef1f2;
						    padding: 1em 1.07143em;
						    overflow: hidden;
						    color: #999;
						    @include flexbox();
						    @include align-items(center);
						    figure {
							    margin: 0;
							    position: relative;
							    margin-right: 10px;
							    img {
							    	width: 40px;
							    	height: 40px;
							    }
							}
							span {
							    line-height: 1em;
							    @include flexbox();
							    @include justify-content(end);
							    @include flex-direction(column);
							    .name {
								    font-size: 14px;
								    color: #444;
								    margin-bottom: 5px;
								}
							}
						}
						[class*="user-"]:after {
						    position: absolute;
						    top: calc(50% + 15px);
						    left: 0;
						    @include transform(translateY(-50%));
						}
					}
				}
		    }
		}
		.chat-panel {
		    position: fixed;
		    top: calc(100vh);
		    right: calc( 240px + 15px);
		    width: 310px;
		    z-index: 9999;
		    @include transform(translateY(-100%) translateX(14.0625rem));
			.card {
			    border: none;
			    margin-bottom: 1.42857em;
			    @include border-radius(10px);
			    @include box-shadow(0 4px 8px 3px rgba(0, 0, 0, 0.2));
			    .card-header {
				    background: none;
				    padding: 1.07143em 1.42857em;
				    font-size: 1.14286em;
				    border-bottom: 1px solid rgba(153, 153, 153, 0.2);
				}
				.card-body {
				    padding: 1.07143em;
				    .messages {
					    position: relative;
					    max-height: 21.42857em;
					    overflow-y: scroll;
					    margin-top: -1.07143em;
					    margin-right: -1.07143em;
					    margin-left: -1.07143em;
					    padding-top: 1.07143em;
					    padding-right: 1.07143em;
					    padding-left: 1.07143em;
					    .message {
						    margin: 0.71429em 0;
						    &:first-child {
							    margin-top: 0;
							}
							figure {
							    -webkit-box-ordinal-group: 3;
							    -ms-flex-order: 2;
							    margin: 0;
							    position: relative;
							    order: 2;
							    img {
							    	width: 30px;
							    	height: 30px;
							    }
							}
							.message-body {
							    margin-top: .5em;
							    display: -webkit-inline-box;
							    display: -ms-inline-flexbox;
							    display: inline-flex;
							    -webkit-box-orient: vertical;
							    -webkit-box-direction: normal;
							    -ms-flex-direction: column;
							    flex-direction: column;
							    -webkit-box-align: end;
							    -ms-flex-align: end;
							    align-items: flex-end;
							    margin: auto 1.5em;
							    -webkit-box-ordinal-group: 2;
							    -ms-flex-order: 1;
							    order: 1;
							    p {
								    background: #404E67;
								    border: 1px solid #404E67;
								    border-radius: 3px;
								    padding: .5em 1em;
								    color: #fff;
								    margin-bottom: .5em;
								    position: relative;
								    &:first-child:after, &:first-child:before {
									    content: "";
									    height: 0;
									    width: 0;
									    display: block;
									    position: absolute;
									    top: 1.25rem;
									    right: -7px;
									    left: auto;
									    border-style: solid;
									    border-width: 6px 0 7px 6px;
									    border-color: transparent transparent transparent #404E67;
									    @include transform(translateY(-50%));
									}
									&:first-child:before {
									    right: -7px;
    									border-left-color: #404E67;
									}
								}
							}
							&.reply {
								figure {
								    -webkit-box-ordinal-group: 2;
								    -ms-flex-order: 1;
								    order: 1;
								}
								.message-body {
								    -webkit-box-align: start;
								    -ms-flex-align: start;
								    align-items: flex-start;
								    -webkit-box-ordinal-group: 3;
								    -ms-flex-order: 2;
								    order: 2;
								    p {
								    	background: #fff;
									    border: 1px solid #eef1f2;
									    border-radius: 0;
									    border-top-right-radius: 3px;
									    border-bottom-right-radius: 3px;
									    border-radius: 3px;
									    color: #666;
									    &:first-child:after, &:first-child:before {
										    content: "";
										    height: 0;
										    width: 0;
										    display: block;
										    position: absolute;
										    right: auto;
										    left: -7px;
										    border-style: solid;
										    border-width: 6px 7px 6px 0;
										    border-color: transparent #fff transparent transparent;
										    @include transform(translateY(-50%));
										}
										&:first-child:before {
										    left: -9px;
										    border-right-color: #eef1f2;
										}
										&:first-child:after {
										    content: "";
										    height: 0;
										    width: 0;
										    display: block;
										    position: absolute;
										    right: auto;
										    left: -7px;
										    border-style: solid;
										    border-width: 6px 7px 6px 0;
										    border-color: transparent #fff transparent transparent;
										    @include transform(translateY(-50%));
										}
								    }
								}
							}
						}
					}
				}
				.card-footer {
				    background: none;
				    padding: 1.07143em 1.42857em;
				    border-top: 1px solid rgba(153, 153, 153, 0.2);
				    .list-icon {
					    font-size: 1.125rem;
					}
					textarea {
						box-shadow: none;
						resize: none;
						padding: 0;
						width: 100%;
						min-height: auto;
						padding: 5px 0;
					}
				}
			}
		}
	}
	&.nav-collapsed {
		.header-top {
		    padding-left: 60px;
		}
		.page-wrap  {
			.app-sidebar {
			    width: 60px;
			    .sidebar-header {
			    	.header-brand {
				    	.text {
						    display: none;
						}
				    }
			    }
			    .sidebar-content {
			    	.nav-container {
			    		.navigation-main {
			    			.nav-lavel {
			    				display: none;
			    			}
			    			.nav-item {
			    				a {
			    					span {
									    display: none;
									}
									&::before {
									    display: none;
									}
			    				}
			    			}
			    		}
			    	}
			    }
			    &:hover {
			    	width: 240px;
			    	.header-brand {
			    		.text {
						    display: inline-block;
						}
			    	}
			    	.sidebar-content {
				    	.nav-container {
				    		.navigation-main {
				    			.nav-lavel {
				    				display: block;
				    			}
				    			.nav-item {
				    				a {
				    					span {
										    display: inline-block;
										}
										&::before {
										    display: inline-block;
										}
				    				}
				    			}
				    		}
				    	}
				    }
			    }
			}
			.main-content {
			    padding-left: 75px;
			}
			.footer {
			    padding-left: 90px;
			}
		}
	}
	&.menu-collapsed {
		.page-wrap {
			.app-sidebar {
				.sidebar-header {
					.nav-toggle {
					    display: none;
					}
				}
			}
		}
	}
	&.right-sidebar-expand {
		.right-sidebar {
			@include transform(translateX(0));
		}
		.chat-panel {
			@include transform(translateY(-100%) translateX(0));
		}
	}
}
hr {
    box-sizing: content-box;
    height: 0;
    margin-top: 1rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
}
.profiletimeline {
    position: relative;
    padding-left: 40px;
    margin: 40px 10px 0 30px;
    border-left: 1px solid rgba(0,0,0,.1);
    .sl-item {
	    margin-top: 8px;
	    margin-bottom: 30px;
	    .sl-left {
		    float: left;
		    margin-left: -60px;
		    z-index: 1;
		    margin-right: 15px;
		    img {
		    	max-width: 40px;
		    }
		}
		.sl-right {
			.sl-date {
			    font-size: 12px;
			    color: #afb5c1;
			}
		}
	}
}

.dd-handle {
    background: #f7f7f7;
    border-radius: 3px;
    padding: 20px;
    position: relative;
    display: block;
    text-decoration: none;
    margin: 5px 0;
    overflow: hidden;
    p {
    	margin: 0;
    }
    @include pseudo-element('after') {
    	content: '';
	    width: 5px;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
    }
}
.dd-list {
	margin: 0;
	padding: 0;
	list-style: none;
	.dd-placeholder, .dd-empty {
	    margin: 5px 0;
	    padding: 0;
	    min-height: 30px;
	    background: #f2fbff;
	    border: 1px dashed #b6bcbf;
	    @include border-radius (4px);
	}
	.dd-list {
		padding-left: 30px;
	}
}
.dd-dragel {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
    .dd-handle {
	    -webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
	    -ms-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
	    box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
	}
}

.todo-task {
	.dd-handle {
	    @include pseudo-element('after') {
	    	background-color: $danger;
	    }
	}
}
.progress-task {
	.dd-handle {
	    @include pseudo-element('after') {
	    	background-color: $yellow;
	    }
	}
}
.completed-task {
	.dd-handle {
	    @include pseudo-element('after') {
	    	background-color: $green;
	    }
	}
}
[class*="user--"]::after {
    height: 0.64286em;
    width: 0.64286em;
    display: block;
    position: absolute;
    top: 0;
    right: 10%;
    border-radius: 100px;
    content: "";
    -webkit-box-shadow: 0 0 0 2px #fff;
    box-shadow: 0 0 0 2px #fff;
}
.user--online:after {
    background: #06d6a0;
}
.user--busy:after {
    background: #ff3333;
}
.user--offline:after {
    background: #bbb;
}

/home/emeraadmin/.razor/../www/8aabc/../node_modules/../src/scss/_main.scss