// Quick Sidebar
$quick-sidebar-width:                                                   320px !default;  // quick sidebar width. default: 245px;  
$quick-sidebar-tab-item-padding:										15px 15px;       // quick sidebar item padding. default: 15px 15px;

$quick-sidebar-bg-color:												#21282e; 
$quick-sidebar-font-color:												lighten($quick-sidebar-bg-color, 40%);

/* Page Portlet Fullscreen */

.page-portlet-fullscreen {
	.page-quick-sidebar-wrapper,
	.page-quick-sidebar-toggler {
		z-index: -1;
	}
}

/* Quick sidebar toggler */

.page-quick-sidebar-toggler {
	overflow: hidden;
	z-index: 99999;
	display: none;
	width: 28px;
	height: 27px;
	position: fixed;
	top: 10px; 
	right: 15px;
	text-align: center;
	padding-top: 6px;

	&:hover {
        background: darken(lighten($quick-sidebar-bg-color, 10%), 3%);            
    }

	.page-quick-sidebar-open & {
		display: inline-block;

		&:hover {
        	background: none;            
    	}
	}

	> i {
		color: lighten($quick-sidebar-font-color, 10%);
		font-size: 17px;

		&:hover {
			color: #fff !important; 
		}

		.page-quick-sidebar-open &:before {
			content: "\e066"#{'/*rtl:"\e065"*/'};
		}
	}
}

/* Quick sidebar wrapper */

.page-quick-sidebar-wrapper {
	transition: right 0.3s;	
	z-index: $zindex-quick-sidebar;
	position: fixed;
	top: 0;
	bottom: 0;
	width: $quick-sidebar-width;  
	right: -$quick-sidebar-width;
	overflow: hidden;
	color: lighten($quick-sidebar-font-color, 10%);
	background: $quick-sidebar-bg-color;

	.page-quick-sidebar-open & {
		transition: right 0.3s;	
		right: 0;
	}

	.page-quick-sidebar {
		background: $quick-sidebar-bg-color;

		.nav-tabs {
			margin: 0;
			padding: 0;
			border: 0;

			> li {
				display: table-cell !important;
				width: 1%  !important;
				padding: 0;
				margin: 0;
				float: none;

				> a {
					position: relative;
					display: block;
					text-align: center;
					border: 0;
					height: auto;
					font-size: 14px;
					padding: 45px 15px 8px;
					text-transform: uppercase;
					background: none;
					margin-right: 0;  
                    color: lighten($quick-sidebar-font-color, 7%);
                    border: 0;
                    border-bottom: 3px solid rgba(243,86,93,.3); 
                    @include border-radius(0);
                    outline: none !important;
                    
					> .badge {
						position: absolute;
						top: 45px;
						right: 3px;
					}  
				}  

	            &.active,
	            &:hover {
	            	> a {
	            		border: 0;
	            		border-bottom: 3px solid #f3565d;
                        background: none;
						color: #fff;
						text-decoration: none;
	            	}
	            }

				.dropdown-menu {	  
					border: 0;
                    background: lighten($quick-sidebar-bg-color, 10%); 
                    box-shadow: 5px 5px rgba(lighten($quick-sidebar-bg-color, 30%), 0.1);
	               	margin-top: 8px;                   
	                margin-right: 20px;  

	                &:before {
						position: absolute;
						top: -7px;
						right: 19px;
						display: inline-block !important;
						border-right: 7px solid transparent;
						border-left: 7px solid transparent;
						border-bottom: 7px solid lighten($quick-sidebar-bg-color, 10%);
						content: '';
					}   

					&:after {
						position: absolute;
						top: -6px;
						right: 20px;
						display: inline-block !important;
						border-right: 6px solid transparent;
						border-left: 6px solid transparent;
						border-bottom: 7px solid lighten($quick-sidebar-bg-color, 10%);
						content: '';
					}

					> li {
                        > a {
                        	padding: 10px 15px;
	                        color: lighten($quick-sidebar-font-color, 10%); 

	                        > i {
	                            color: lighten($quick-sidebar-font-color, 8%); 
	                        }
	                    }

	                    &:hover {
	                    	> a {
	                    		background: lighten($quick-sidebar-bg-color, 13%); 
	                        	color: lighten($quick-sidebar-font-color, 10%); 

	                        	> i {
	                            	color: lighten($quick-sidebar-font-color, 11%); 
	                        	}
	                    	}
	                    }
	                        
	                    &.active {
	                        > a {
	                        	background: lighten($quick-sidebar-bg-color, 11%); 
	                        	color: lighten($quick-sidebar-font-color, 10%); 
	                    	}
	                    }
                    }

                    > li.divider {
                    	background-color: lighten($quick-sidebar-bg-color, 13%); 
                    }
	            }

	            &.open {
	            	> a.dropdown-toggle {
	            		border-bottom: 3px solid #f3565d;
	            		background: none;
	            		text-decoration: none;
	            		color: lighten($quick-sidebar-font-color, 7%);
	            	}
	            }	             
			}
		}

		/* Quick sidebar tabs content */
		.tab-content {
			margin: 0;
			padding: 0;
		}

		/* Quick sidebar general list heading */
		.list-heading {
			font-size: 16px;
			margin: 10px 10px;
			color: darken($quick-sidebar-font-color, 5%); 
		}

		/* Quick sidebar general list-items */
		.list-items {
			margin: 0;
			padding: 0;
			list-style: none;

			> li {
				margin: 0;
		        padding: 15px;
		        background: none;
		        border-bottom-width: 1px;
		        border-bottom-style: solid;
		        border-bottom-color: lighten($quick-sidebar-bg-color, 3%); 

                &:hover { 
                    background: lighten($quick-sidebar-bg-color, 3%); 
                }

	            &:last-child {
		            border-bottom: 0;
		        }
	    	}

	    	&.borderless {
	    		li {
	    			border: 0;  
		        }
	    	}
		}

		/* Inner content */
		.inner-content {
			margin: 10px 10px;
		}

		/* Quick sidebar list */
		.page-quick-sidebar-list {
			position: absolute !important;
			width: $quick-sidebar-width !important; 
			transition: margin 0.3s; 
		}

		/* Quick sidebar list item */
		.page-quick-sidebar-item {
			width: $quick-sidebar-width;
			position: absolute !important;
			width: $quick-sidebar-width  !important; 
			transition: margin 0.3s; 
			margin-left: $quick-sidebar-width; 

			.page-quick-sidebar-nav {
				padding: 15px 10px 0px 10px;

				.page-quick-sidebar-back-to-list {
	                vertical-align: middle;  
	                display: inline-block;
	                font-size: 14px;
	                color: lighten($quick-sidebar-font-color, 7%);

                    &:hover {
                    	text-decoration: none;
                    }

	                > i {
	                    font-size: 17px;
	                    line-height: 17px;
	                    vertical-align: top;
	                    margin-right: 3px;
	                }
	            }
			}            
		}	

		/* Quick sidebar list item shown */
		.page-quick-sidebar-content-item-shown {
			.page-quick-sidebar-list {
				transition: margin 0.3s; 
				margin-left: - $quick-sidebar-width; 

				.slimScrollBar,
				.slimScrollRail {
					display: none !important;  
				}
			}

			.page-quick-sidebar-item {
				transition: margin 0.3s;
				margin-left: 0;  
			} 
		}

		/* Quick sidebar chat */
		.page-quick-sidebar-chat {
			.page-quick-sidebar-chat-users {
				padding: 10px 0;
				position: relative;
						
				.media-list {
					.media {
						padding: $quick-sidebar-tab-item-padding;

						.media-object {							
				            border-radius: 50% !important;
							width:  $quick-sidebar-width/7;
							opacity: 0.8;
	           				filter: alpha(opacity=80);
							float: left;
							margin-right: 10px;

							@include clearfix();
						}

						&:hover {
							cursor: pointer;

							.media-object {
								opacity: 1;
		                		filter: alpha(opacity=100);
							}
						}

						.media-body {

							.media-heading {
								margin: 5px 0 0 0;
								font-size: 14px;
							}

							.media-heading-sub {
								font-size: 11px;
								text-transform: uppercase;
								color: darken($quick-sidebar-font-color, 8%); 
							}

							.media-heading-small {
								font-size: 10px;			
								color: darken($quick-sidebar-font-color, 12%);   					
							}
						}

						.media-status {
							margin-top: 10px; 
							right: 10px;
							position: absolute;
							display: inline-block;
						}
					}
				}
			}

			.page-quick-sidebar-chat-user {

				.page-quick-sidebar-chat-user-messages { 
					padding: 0px 10px;
					position: relative;

					.post {
						transition: display 0.3s;
				        padding: 5px 0;
				        margin: 10px auto;
				        font-size: 13px;

				        .body {
				        	color: #c3c3c3;
				            display: block;
				        }
        
				        .avatar {
				            width:$quick-sidebar-width/7;
				            border-radius: 50% !important;
				        }

				        &.in .avatar {
				            float: left;
				            margin-right: 10px;
				        }

				        &.out .avatar {
				            float: right;
				            margin-left: 10px;
				        }

				        .name {
				            font-size: 12px;
				            font-weight: 300;
				            color: lighten($quick-sidebar-font-color, 3%); 
				        }
				        
				        .datetime {
				            font-size: 12px;
				            font-weight: 300;
				            color: lighten($quick-sidebar-font-color, 3%); 
				        }
				       
				        .message {			
				            display: block;
				            padding: 5px;
				            position: relative;
				            color: lighten($quick-sidebar-font-color, 7%); 
                            background: lighten($quick-sidebar-bg-color, 10%); 
				        }

				        &.in {
				        	.message {
				            	text-align: left;
				            	margin-left: 55px;
				      
				            	.arrow {
				                	display: block;
				                	position: absolute;
				                	top: 9px;
				                	left: -6px;
				                	width: 0;
				                	height: 0;
				                	border-top: 6px solid transparent;
				                	border-bottom: 6px solid transparent;
				                	border-right-width: 6px;
				                	border-right-style: solid;
				                	border-right-color: lighten($quick-sidebar-bg-color, 10%); 
				                }
				            }
				        }

				        &.out {
				            .message {
				                margin-right: 55px;
				                text-align: right;

				                .arrow {
				                    display: block;
				                    position: absolute;
				                    top: 9px;
				                    right: -6px;
				                    border-top: 6px solid transparent;
				                    border-bottom: 6px solid transparent;
				                    border-left-width: 6px;
				                	border-left-style: solid;
				                	border-left-color: lighten($quick-sidebar-bg-color, 10%);
				                }  
				            }
				  
				            .name, 
				            .datetime {
				                text-align: right;
				            }
				        }
				    }
				}

				.page-quick-sidebar-chat-user-form {
					padding: 20px 10px 15px 10px;
				}
			}
		}

		/* Quick sidebar alerts */
		.page-quick-sidebar-alerts {
			
			.page-quick-sidebar-alerts-list {
				padding: 10px 0;
				position: relative;

	            .feeds {
	                li {	         
	                	a {
	                		color: lighten($quick-sidebar-font-color, 1%);

	                		.label {
		                        margin-top: 5px;
		                    }

		                    .desc {
		                    	text-decoration: underline;
		                        padding: 0;
		                        color: darken($quick-sidebar-font-color, 1%);
		                    }

		                    .date {
                            	color: darken($quick-sidebar-font-color, 12%);
                        	}
	                	}       		                    
	                }
	            }
	        }
		}

		/* Quick sidebar settings */
		.page-quick-sidebar-settings {

			.page-quick-sidebar-settings-list {
				padding: 10px 0;
				position: relative;

				.list-items {
					li {
						.bootstrap-switch {
							margin-top: -3px;
							float: right;
							border: 0;
							min-width: 59px;
						}	

						.form-control {
							width: 75px !important;							
							padding: 4px 4px !important;
							float: right;
							border: 0;
							margin-top: -4px;
						}

						select.form-control {   							
							padding: 4px 0px !important;
						}
					}
				}
			}				
		}
	}
}