/* Pro Add-on Listing */
.alm-pro-listing{
	padding: 0;
	border-top: none;
	position: relative;
	padding-bottom: 20px;
	.loader{
   	position: absolute;
   	left: 0;
   	top: 0;
   	width: 100%;
   	height: 100%;
   	z-index: 99;
   	display: none;
	}
	&.loading{
   	.loader{
      	display: block;
   	}
	}
	&--header{
   	border: 1px solid #e1e1e1;
   	background: #f7f7f7;
   	padding: 18px;
   	font-size: 13px;
   	font-weight: 600;
   	text-transform: uppercase;
   	color: #23282d;
   	position: relative;
   	margin-bottom: 30px;
   	border-radius: 2px;
   	div{
      	position: absolute;
      	right: 15px;
      	top: 50%;
      	transform: translateY(-50%);
      	font-size: 13px;
      	opacity: 0.7;
      	font-weight: normal;
      	text-transform: none;
      	font-style: italic;
      	@media screen and (max-width: 480px){
            display: none;	
         }
   	}
	}	
	&--wrap{
   	display: flex;
   	flex-wrap: wrap;
   	justify-content: space-between;
	}
	
	.item{
		width: 49.5%;
   	display: flex;    
   	margin-bottom: 10px;
   	@media screen and (min-width: 1500px){
      	width: 32.775%;
   	}
   	@media screen and (max-width: 480px){
      	width: 100%;
   	}
		h2, p, img, .state{
			transition: all 0.15s ease;
		}
		a{
			text-decoration: none !important;
			padding: 0 55px 0 0;
			position: relative;
         display: flex;         
   		border: 1px solid #e1e1e1;
         transition: all 0.15s ease;   
         border-radius: 2px;
         @media screen and (min-width: 768px) and (max-width: 1100px){
            padding: 0 40px;  
         }
         &:hover,
         &:focus{
            border-color: #bbb;
            h2{
               text-decoration: none;
            }
         }     
		}
		&--detail{
			padding: 20px;
			position: relative;
			min-height: 110px;
			display: flex;
			align-items: center;
			@media screen and (min-width: 768px) and (max-width: 1100px){
   		   display: block;	
   		   text-align: center;
   		   img{
      		   padding-bottom: 20px;
   		   }
         }
			div{
   			padding: 0;
			}
			img{ 
				width: 110px;
				height: auto;
				margin-right: 15px;
				@media screen and (max-width: 768px){
   				display: none;
				}
			}
			a{
				text-decoration: none;
				&:hover,
				&:focus{
					text-decoration: none;
					h2{
   					text-decoration: none;
					}
				}
			}
			h2{
				margin: 0 0 7px;
				font-size: 16px;
				line-height: 1;	
				transition: all 0.15s ease;
				span{
					font-weight: 400;
					opacity: 0.4;
					font-size: 12px;
					position: relative;
					top: 0;
					left: 3px;
					text-decoration: none !important;
				}			
			}
			p{
				margin: 0;
				padding: 0;
				font-size: 14px;
				&.link{
					font-size: 13px;
					padding-top: 2px;
					opacity: 0;
					transition: opacity 0.15s ease; 
				}
			}
		}
		.result{
   		position: absolute;
   		right: 6px;
   		bottom: 6px;
   		font-size: 12px;
   		opacity: 0;
   		transition: all 0.25s ease;
   		&.in-view{
      		opacity: 0.7;
   		}
   		.type{
      		background: #47bd79;
      		color: #fff;
      		display: none;
      		border-radius: 2px;
      		padding: 3px 6px;
      		display: inline-block;
   		}
   		.type.inactive{
      		background: #c54545;
      		display: none;
   		}
		}
		.state{
			width: 22px;
			height: 22px;
			position: absolute;
			right: 6px;
			top: 6px;
			border-radius: 2px;
			background: #57d48c;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			text-decoration: none !important;
			font-size: 12px;
			transition: all 0.15s ease;
			&:before{
				font-family: 'FontAwesome';
				content: '\f00c';
				display: block;
				
			}
		}
		
		&.active{
   		a{
      		border-color: #57d48c;
   		}
			&:hover{
				.state{
      			opacity: 0.9;
				}
			}
		}
		
		&.inactive{
			h2, p, img, .state{
				opacity: 0.5;
			}
			.state{
				background: #e1e1e1;
				&:before{
					opacity: 0;
				}
			}
			&:hover{
				h2, p, img, .state{
					opacity: 0.8;
				}	
			
				.state{
   				background: #ccc;
					&:before{
						opacity: 1;
					}
				}
			}		
		}
	}	
}