.icon {
	.icon-shape (@size-icon, @padding-icon, @border-radius-icon);
	.icon-gradient (@icon-default-color-top, @icon-default-color-bottom);

// padding suprascris pentru iconite 7s si fa, test!
    padding: 8px;
    
	[class^="icon-"]{
		height: @height-icon-message;
		width:  @width-icon-message;
		background-repeat: no-repeat;
		background-size: 100%;
	}	

	&.icon-sm {
		.icon-shape (@size-icon-sm, @padding-icon-sm, @border-radius-icon-sm);

		[class^="icon-"]{
			height: @height-icon-message-sm;
			width:  @width-icon-message-sm;
							
		}
		
		[class*="pe-7s-"]{
        	width: 25px;
        	height: 25px;
        	line-height: 25px;
        	font-size: 25px;
        	text-align: center;
        	color: #FFFFFF;
    	}
    	[class*="fa-"]{
        	width: 25px;
        	height: 25px;
        	line-height: 25px;
        	font-size: 19px;
        	text-align: center;
        	color: #FFFFFF;
    	}
	}

	[class*="pe-7s-"]{
    	width: 50px;
    	height: 50px;
    	line-height: 50px;
    	font-size: 46px;
    	text-align: center;
    	color: #FFFFFF;
	}
	[class*="fa-"]{
    	width: 50px;
    	height: 50px;
    	line-height: 50px;
    	font-size: 36px;
    	text-align: center;
    	color: #FFFFFF;
	}

 }

.icon-blue {
	.icon-gradient (@icon-blue-color-top, @icon-blue-color-bottom);
}

.icon-azure {
	.icon-gradient (@icon-azure-color-top, @icon-azure-color-bottom);
}

.icon-green {
	.icon-gradient (@icon-green-color-top, @icon-green-color-bottom);
}

.icon-orange {
	.icon-gradient (@icon-orange-color-top, @icon-orange-color-bottom);
}

.icon-red {
	.icon-gradient (@icon-red-color-top, @icon-red-color-bottom);
}

.icon-purple {
	.icon-gradient (@icon-purple-color-top, @icon-purple-color-bottom);
}

.icon-pink {
	.icon-gradient (@icon-pink-color-top, @icon-pink-color-bottom);
}

.icon-black {
	.icon-gradient (@icon-black-color-top, @icon-black-color-bottom);
}

.info{
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: center;
    .icon{
        margin-top: 0;
    }
    h4,
    .h4{
        margin-top: 20px;
        margin-bottom: 5px;   
    }
}

.info-horizontal{
    text-align: left;
    margin-top: 0;
    .icon{
        float: left;
        margin-top: 20px;
        margin-right: 20px;
    }
    .description{
        overflow: hidden;
    }
}









