@font-face {
    font-family: 'tradproregular';
    src: url("tradpro1-webfont.woff2") format('woff2'), url("tradpro1-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;

}

.tpfi {
	display: inline-block; 
	height: 24px; 
	width: 24px;
	background: transparent; 
	
}

.SFD:after {
	color: #1016CC; font-family: tradproregular; font-size: 1.6em;
	content: "s";
    background: -webkit-linear-gradient(#DCF2F9, #1016CC);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.FVG:after {
	color:  #19865A; font-family: tradproregular; font-size: 1.6em;
	content: "f";
    background: -webkit-linear-gradient(#CBF6E5, #19865A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.PRC:after {
	color: #8C692B; font-family: tradproregular; font-size: 1.6em;
	content: "p";
    background: -webkit-linear-gradient(#eee, #8C692B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.HSP:after {
	color: #85D435; font-family: tradproregular; font-size: 1.6em;
	content: "h";
    background: -webkit-linear-gradient(#eee, #85D435);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.GRN:after {
	color: #E8C22C; font-family: tradproregular; font-size: 1.6em;
	content: "g";
    background: -webkit-linear-gradient(#eee, #E8C22C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.MET:after {
	color: #FF0000; font-family: tradproregular; font-size: 1.6em;
	content: "m";
    background: -webkit-linear-gradient(#eee, #FF0000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.FLR:after {
	color: #CC8BB8; font-family: tradproregular; font-size: 1.6em;
	content: "r";
    background: -webkit-linear-gradient(#eee, #CC8BB8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.DRY:after {
	color: #FDFCB5; font-family: tradproregular; font-size: 1.6em;
	content: "d";
    background: -webkit-linear-gradient(#eee, #FDFCB5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.LVS:after {
	color: #CCA663; font-family: tradproregular; font-size: 1.6em;
	content: "l";
    background: -webkit-linear-gradient(#eee, #CCA663);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ui-state-default .ui-icon.tpfi, .ui-widget .ui-icon.tpfi, .ui-icon.tpfi{background:none repeat scroll 0 0 transparent!important;text-indent:0!important}
.ui-button-icon-only .ui-icon.tpfi {top:0; left:0;  margin-top:0; margin-left:0;}
.ui-button-icon-only .ui-icon.tpfi, .ui-button-text-icon-left .ui-icon.tpfi, .ui-button-text-icon-right .ui-icon.tpfi {top:0; left:0;  margin-top:0; margin-left:0;}
.ui-icon.tpfi {
	height: 24px !important; 
	width: 24px !important;
	
}