/**
 * File: General.scss
 * Description : Contains all general styling for the WPLMS
 * Author: Mr.Vibe 
 * Credits: www.VibeThemes.com
 * Project: WPLMS
 * version 2.0
 **/
/*========================================================================*/
/*   TABLE OF CONTENT
/*========================================================================*/
/*
/*    01. GLOBAL STYLING
/*    02. TYPOGRAPHY STYLING
/*    03. FORMS STYLING
/*    04. SELECT DROPDOWN
/*    05. LINKS STYLING
/*    06. LISTS STYLING
/*    07. PAGE BLOCKS
/*    08. MISCELLANEOUS
/*
/*========================================================================*/
/*   01. DEFAULT STYLING 
/*========================================================================*/


/*--------------------------------------------------------------
3.3 - Directories - Members, Groups, Blogs, Forums content: "'";
--------------------------------------------------------------*/


#buddypress{

	.dir-list{
		display: inline-block;
		padding: 30px;
		background:#FFF;
		width:100%;
		border-radius:2px;
	}

	.bcrow{
		padding-top:0;
		margin-bottom:30px;
	}


	ul.item-list {
		border-top: 1px solid $bordercolor;
		width: 100%;
		display: inline-block;
		list-style: none;
		clear: both;
		margin: 0;
		padding:0;
		&.activity-list{border:none;}
		&#blogs-list,
		&#groups-list{
			li{
				.action{
					float:left;
				}
			}
		}
		li{
			border-bottom: 1px solid $bordercolor;
			padding: 20px 0;
			margin: 0;
			position: relative;
			list-style: none;
			clear: both;
			display: block;
			&.activity-item {
				border: none;
			}
			&.col-md-3,&.col-md-4,&.col-md-2,
			&.col-md-6{}
			.item-avatar{
				text-align:center;
				overflow:hidden;
				img{
					border-radius:4px;
					transition: all 0.5s ease-in-out;
					&:hover{
						transform: scale(1.1);
					}
				}
			}
			div.item-title,
			h4 {
				font-weight: normal;
				margin: 0;
				font-weight:600;
				font-size:16px;
			}
			.item-title > span{display:block;font-size:11px;text-transform:uppercase;color:$light-text-color;}
			a{
				font-weight:600;
				span{
					float:right;
					&.time-since{
						float:none;
						display:inline;
						margin-left:15px;
						font-weight:400;
					}
				}
			}
			span {
				&.update{
					display:block;
					text-transform: uppercase;
					color:#444;
				}
				&.activity-read-more{
					display:inline;
					font-size:10px;
					text-transform: uppercase;
					color:$light-text-color;
					margin-left:5px;
					a{color:$light-text-color;}
				}
			}
			i{
				font-size:12px;
				opacity:0.6;
				font-weight:600;
			}
			.item-desc {
				color: #444;
				clear:both;
				font-size:14px;
				font-weight:400;
				margin: 5px 0 0;
			}
			.action{
				.meta {
					text-align: start;
				}
			} 

			.meta {
				color: #999;
				margin-top: 10px;
				font-weight: 600;
				font-size: 12px;
				border: none;
				text-transform: uppercase;
			}
			h5 span.small {
				display: block;
				margin-top:5px;
				font-weight: normal;
			}
			.item-credits{
				margin-top:30px;
				strong{
					font-size: 14px;
					color: #79c989;
					span.amount{
						font-size: 16px;
    					color: #79c989;
					}
				}
				span{
					display:inline;
					font-size:14px;
					color: #79c989;
				}
			}
		}
		&.grid{
			li{
				.action{
					float:none !important;
					.meta {
						float:none;
						text-align: center;
					}
				} 
			}
		}
	}

	ul.single-line{
		li {
			border: none;
		}
	} 

	.widget{
		ul.item-list{
			li{
				.item-avatar{
					border-radius:0;
					width:48px;
					height:auto;
					img.avatar{
						max-width:48px;
					}
				}
			}
		}
	}
}
#ajaxloader,
ul.item-list.loading{
	position:relative;
	z-index:99;
	&:after{
		content:'';
	    color: rgba(0,0,0,0.2);
	    overflow: hidden;
    	font-size:5rem;
	    width: 1em;
	    height: 1em;
	    border-radius: 50%;
	    margin: -30px auto;
	    position: absolute;
	    left:50%;top:50%;
	    transform: translateZ(0);
	    animation: loader 1.7s infinite ease;

	}
	& > li {
	    opacity: 0.2;
	}
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}



.directory,.bp-user.course{
	#buddypress{
		.item-list.grid{
			margin:0 -15px;
			padding-top:15px; 
			li{
				@extend .col-md-4;
				border: none;
				border-radius: 2px;
				clear:none;
				text-align:center;
				& > .row{
					.col-md-2.col-sm-3,
					.col-md-10.col-sm-9{
						width:100%;
						padding:15px;
						.item-avatar{
						    border: 1px solid $bordercolor;
						    border-radius: 2px !important;
						    padding: 15px 15px 0 15px;
						    border-bottom: none;
						    border-top-left-radius:2px;
						    border-top-right-radius:2px;
						}
						.item{
						    border: 1px solid $bordercolor;
						    padding: 15px;
						    border-top: none;
						    border-bottom-left-radius:2px;
						    border-bottom-right-radius:2px;
					        display: inline-block;
    						width: 100%;
						    .item-title{
						    	span.update{
						    		margin-top:10px;
						    		word-break:break-all;
						    		.activity-read-more{
						    			display:inline;
						    			float:none;
					    			}
						    	}
						    }
						    .item-meta{
						    	margin-top: 10px;
						    }
						}
					}
					.col-md-2.col-sm-3{padding-bottom:0;}
					.col-md-10.col-sm-9{padding-top:0;}
					span{
						text-align:center;
						&.update{
							text-align:center;
						}
					}
				}
				&.col-md-4:nth-child(3n+1){
					clear:both;
				}
			}
		}
	}
}


/*========================================================================*/
/*   01. ITEM LIST TABS
/*========================================================================*/


#buddypress{

	.item-list-tabs {
		background: transparent;
		clear: left;
		display: inline-block;
		overflow: hidden;
		width:100%;
		background:#313B3D;
		padding:0;
		border-top-left-radius: 2px;
		border-top-right-radius: 2px;
		ul {
			margin: 0;
			padding: 0;
			li {
				float: left;
				position: relative;
				margin: 0;
				list-style: none;
				&.current{
					border-color:#78c8ce;
				}
				&.last {
					float: right;
					margin: 7px 0 0;
				}
				a{
					display: inline-block;
					color:rgba(255,255,255,0.6);
					padding: 18px 24px;
					font-size:11px;
					line-height:1.5;
					font-weight:600;
					text-transform: uppercase;
					text-decoration: none;
					&:hover{
						color:#FFF;
					}
					span {
						font-size:11px;
						display: inline-block;
						padding:1px 5px;
						margin:0 0 0 10px;
						color:#FFF;
						background:#78c8ce;
						border-radius:20px;
						float:right;
					}
					&:hover{
						color: #FFF;
						background-color:#78c8ce;
					}
				}
				&.selected,&.current{
					a{
						color: #FFF;
						background-color:#78c8ce;
						span{
							background-color: #fff;
							color:#78c8ce;
						}
						
					}
					
				}
			}
		}
		&+#subnav{
			padding:30px;
			background:#FFF;
		}
		&#object-nav{
			li{
				width:100%;
			}
		}
	}	
} 


.single-item,.single{
	#buddypress{
		.item-list-tabs#subnav{
			padding:0;
			ul{
				display:block;
				li{
					a{
						padding-left:15px;
						padding-right:15px;
					}
					&.selected{
						a{
							background:$primarybg;
							border-color:$primarybg;
							color:$primarycolor;
						}
					}
				}
			}
		}
	}
}

/*========================================================================*/
/*   01. GROUP CREATION TABS
/*========================================================================*/

#buddypress{
	#group-create-tabs.item-list-tabs{
		ul{
			li{
				&:last-child{
					border:none;
				}
				a,span{
				    padding: 18px;
				    display: inline-block;
				    line-height: 1;
				    font-size: 11px;
				    text-transform: uppercase;
				    letter-spacing: 1px;
				}
			}
		}
	}	
}  

.minimal{
	#buddypress #group-create-tabs.item-list-tabs{
		li.current > a{
			background:none;
			&:after{
				content:'';
				position:absolute;
				left:0;
				bottom:-2px;
				height:2px;
				width:100%;background:$primarybg;
			}
		}
	}
}

/*========================================================================*/
/*   01. ITEM DIRECTORY SEARCH
/*========================================================================*/

#buddypress{

	.item-list-tabs {
		width:100%;
		.dir-search {
			float: none;
			margin: 0;
			padding:0;
			position:relative;
			display:inline-block;
			label{
				width:100%;
				&:after{
					position:absolute;
					right:10px;
					top:10px;
					content:"\f002";
					font-family:'fontawesome';
					color:#bbb;
					line-height:1;
				}
			}
			input[type="submit"]{
				display:none;
			}
			input[type="text"]{
				border:1px solid #EEE;
				border-radius:2px;
				padding: 6px 30px 6px 8px;
				height:36px;
				width:100%;
				line-height:1;
			}

			.dir-form {
				clear: both;
				position: relative;
			}
			&.loading{
				label:after{
					content:"\f110";
          			animation: spin 1s linear infinite;
				}
			}
		}
	}
}


/*========================================================================*/
/*   01. ITEM LIST TABS SUBNAV
/*========================================================================*/

#buddypress{
	.item-list-tabs#subnav{
		padding: 30px;
		margin: 0 0 20px;
		background:#FFF;
		border-bottom: 1px solid $bordercolor;
		display: inline-block;
		width: 100%;
		font-weight: 600;
		ul{
			display:block;
			li{	
				margin:0;
				float: left;
				display: inline-block;
				text-align: center;
				border-bottom:none;
				a{
					color:#444;
					font-size:11px;
					background: #FFF;
					text-transform: uppercase;
					padding: 11px 2px;
					text-transform: uppercase;
					border: 1px solid $bordercolor;
					border-left: none;
					border-bottom: none;
				}
				&.current{
					a{
						background-color:#78c8ce;
						border-color:#78c8ce;
						color:#FFF;
					}
				}
				&.switch_view{
					width: auto;
					display: inline-block;
					margin-left:10px;
					float: right;
					a{
						cursor:pointer;
						float: left;width:auto;
						background: $bordercolor;
						color: $light-text-color;
						border: 2px solid $bordercolor;
						width: auto !important;
						font-size: 12px;
						line-height: 12px;
						border-radius: 2px;
						&.active{color:$primarycolor;background:$primarybg;}
						i{
							&:before{
								padding:0 10px;
							}
						}
						&:first-child{
						    border-top-right-radius: 0;
							border-bottom-right-radius: 0;
							
						}
						&:last-child{
						    border-top-left-radius: 0;
							border-bottom-left-radius: 0;
						}
					}
					&.left{
						float:left;
					}
				}
				&:first-child a{
					border-top-left-radius: 2px;
					border-left:1px solid $bordercolor;
				}
				&:last-child a{
					border-top-right-radius: 2px;
				}
				&.last {
					padding:0;
					float:right;
					color:#FFF;
				}
				&.feed{
					min-width:60px;
				}
			}
		}
	}
}  

.directory{
	#buddypress{
		.activity_content{
			.item-list-tabs#subnav{
				padding:0;
			}
		}
		.course_category{
		    background: $primarybg;
		    color: $primarycolor;
		    padding: 30px;
		    h3{
		    	color: $primarycolor;
		    	margin:0 0 15px;
		    }
		}
	}
}


/*========================================================================*/
/*   01. Responsive
/*========================================================================*/


/*========================================================================*/
/*   01. MISC
/*========================================================================*/
.highlight + h1{
	margin:5px 0;
}

#members-dir-list{
	#members-list{
		li{
			.item-avatar{
				border-radius:50%;
				overflow:hidden;
				img{
					transition: all 0.5s ease-in-out;
					border-radius:50%;
					&:hover{
						transform: scale(1.1);
					}
				}
			}
		}
	}
}
.item-action-buttons{
	margin: 10px 0;
	display: inline-block;
	width:100%;
}


#buddypress #whats-new-form div.item-list-tabs{
	width:100%;
	margin:30px 0;
}

#activityform,
.activity_content{
	padding:20px;
	background:#FFF;
	border-radius:2px;
}


/*========================================================================*/
/*   01. DIRECTORY LAYOUT 2
/*========================================================================*/

.directory.d3,
.directory.d4{
	#buddypress{
	 	.item-list-tabs:not(#subnav){
	 		li{
	 			width:100%;
	 			a{width:100%;}
	 		}
	 	} 
	} 
}
/*========================================================================*/
/*   01. DIRECTORY LAYOUT 3
/*========================================================================*/

.directory.d3{
	#buddypress{
		.col-md-3.col-sm-3{
			.item-list-tabs{
				border-radius:4px;
				margin-bottom:30px;
				overflow:hidden;
				ul{
					li{
						width:100%;
					}
				}
			}
		}
		.col-md-9.col-sm-9.col-md-push-3.col-sm-push-3{
			.item-list-tabs#subnav{
				margin-bottom:-4px;
			}
		}
	}
}


/*========================================================================*/
/*   01. DIRECTORY LAYOUT 4
/*========================================================================*/

.directory.d4{
	.padder{
		.pagetitle{
			padding:30px 15px;
			display: inline-block;
	    	width: 100%;
			.dir-search{
				position:relative;
				input[type="submit"]{
					display:none;
				}
				label{
					width:100%;
					position:relative;
					&:after{
					    position: absolute;
					    content: "\f002";
					    font-family:'fontawesome';
					    right: 15px;
					    top: 15px;
					    color:$light-text-color;
					}
				}
				input[type="text"]{
					padding:15px 30px 15px 15px;
					width:100%;
					border:1px solid $bordercolor;
				}
			}
		}
	}
	&.d4{
		#buddypress{
			.dir-form #item-list-tabs#subnav{
			    padding: 0;
	    		border: none;
	    		margin:0;
	    		ul li{border:none;}
			}
		}
	}
}

/*========================================================================*/
/*   01. DIRECTORY LAYOUT 5
/*========================================================================*/

.directory.d5{
	.dir-search input[type="text"]{color:#444;}
	.dir-search input[type="text"]:-ms-input-placeholder {
	 color: #bbb;
	}
	.pagetitle{
		&.center{
			position:relative;
			padding-bottom:30px;
			.dir-search{
			    position: absolute;
			    left: 0;
			    width: 100%;
			    bottom: -30px;
				input[type="submit"]{
					display:none;
				}
				label{
					width:100%;
					input[type="text"]{
					    width: 80%;
					    border: 1px solid $bordercolor;
					    padding: 15px;
					    text-align: center;
					    border-radius: 30px;
					}
				}
			}
		}
	}
	
	#title{
		padding-bottom:30px;
		margin-bottom:30px;
	}

	#content #buddypress.directory5{
		margin-top:0;
		.item-list-tabs{
		    text-align: center;
		    display: block;
		    line-height: 0;
		    & > ul{
		    	display:inline-block;
		    }
		    &#subnav{
		    	& > ul{
		    		width:100%;
		    	}
		    }
		}
	}
}

.directory.d5{
	section#content{margin-top:60px;}
}

.d5.elegant.directory{
	header + section{
		background:$primarybg;
		color:$primarycolor;
		h1,h2,h3,h4,h5,h6{
			color:$primarycolor;
		}
	}
}

