.smaasb-posts
{	

	.fa-facebook-square {
		color: #3E5B98
	}

	.fa-twitter-square {
		color: #4DA7DE;
	}

	.fa-linkedin-square {
		color: #3371B7;
	}

	.fa-pinterest-square {
		color: #C92619;
	}

	.fa-google-plus-square {
		color: #dd4b39;
	}

	background: #fff;
	width: 100%;
	.border-box;
	padding: 0 10px;
	float: left;
	margin: 20px 0;

	@media only screen and (max-width: 799px)
	{
		.efficiency {
			display: none;
		}
	}

	h3 {
		position: relative;
		span {
			position: absolute;
			top: 0;
			right: 0;
			font-weight: normal;
			font-size: 12px;
			color: @labelColor;
		}
	}

	&.smaasb-posts-popup {
		h3 {
			margin: 0 0 5px 10px;
		}

		h4 {
			margin: 0 0 20px 10px;
			text-transform: uppercase;
			font-size: 12px;
			font-weight: normal;
		}

		table {
			border-collapse: separate;
			border-spacing: 10px;
		}

		td {
			width: 17%;

			.fa {
				font-size: 36px;
				display: block;
				margin-bottom: 6px;
				margin-top: 6px;
			}

			&.total {
				width: 15%;
				padding-left: 5px;
				padding-right: 5px;
				border-color: @leadColor;
				color: @leadColor;

				b {
					display: block;
					margin-bottom: 10px;
					text-transform: uppercase;
					font-size: 12px;
				}

				font-size: 24px;
			}

			border: 1px #b5b5b5 solid;
			border-radius: 5px;
		}

	}



	table {
		width: 100%;
		margin: 0;
		padding: 0;
		border-collapse: collapse;
		border-spacing: 0;		

		thead, tfoot {
			font-weight: bold;
			border-bottom: 2px @borderColor solid;

			.fa {
				font-size: 18px;
			}

			td {
				vertical-align: top;
				font-size: 14px;
				font-weight: bold;
				border-bottom: 2px @borderColor solid !important;
			}
		}


		tr {
			margin: 0;
			padding: 0;

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

			td {
				margin: 0;
				padding: 9px 0;
				border-bottom: 2px @borderColor solid;
				vertical-align: middle;



				a {
					text-decoration: none;
					transition: opacity .2s ease;
				}

				a:hover {
					opacity: .7;
				}

				&.title {
					line-height: 1.2;

					.name {
						color: @textColor;
						font-size: 13px;
	  					display: inline-block;
	  					overflow: hidden;
					}				
				}

				&.thumb {
					width: 60px;

					img, span {
						display: block;
						width: 40px;
						height: 40px;
						border-radius: 5px;
						border: 1px @borderColor solid;
					}

					span {
						background: @borderColor;
						text-align: center;

						i {
							padding-top: 12px;
							color: #fff;
							font-size: 18px;
						}
					}
				}				

				&.total {
					font-weight: bold;
					font-size: 14px;
				}

				&.center {					
					text-align: center;
					padding-left: 15px;
					padding-right: 15px;

					.zero {
						color: #ccc;
					}

					@media only screen and (max-width: 799px) {
						padding-left: 8px;
						padding-right: 8px;
					}


				}				

				&.line {
					width: 10%;					
					text-align: right;
					padding-right: 10px;	
					padding-left: 10px;
				}


				.bar {
					 display: inline-block;
					 width: 100%;
					 position: relative;
					 vertical-align: middle;
					 height: 9px;
					 background-color: @secondColor;
					 border-radius: 10px;

					 span {
					 	display: inline-block;
					 	position: absolute;
					 	top: 1px;
					 	left: 0;
					 	bottom: 1px;
					 	background-color: @leadColor;
					 }
				}

			}
			
		}
	}	

}