.xh {
	font-size: 0.5em;
	width: 0.5em;
}

.x1 {
	font-size: 1em;
	width: 1em;
}

.x1h {
	font-size: 1.5em;
	width: 1.5em;
}

.x2 {
	font-size: 2em;
	width: 2em;
}

.x2h {
	font-size: 2.5em;
	width: 2.5em;
}

.x3 {
	font-size: 3em;
	width: 3em;
}

[class ^="icon-"]:before, [class *=" icon-"]:before, [class ^="fa-"]:before, [class *=" fa-"]:before {
	display: inline-block;
	width: 1em;
	text-align : left;
}

/* This compensate above class value selector for (mainly buttons) having an icon without text */
.icon:before {
	padding-left : 0.3em;
	padding-right: 0.4em;
}

.icon.notext:before {
	padding-left : 0.4em;
	padding-right: 0.4em;
}

.font-icon-color-blue {
	color: #67D2F1;
}

.font-icon-color-main {
	color: #1b3a69;
}

.font-icon-color-gray {
	color: #c5c5c5;
}

.font-icon-color-green {
	color: #4ba73d;
}

.font-icon-color-red {
	color: #d04f20;
}

.font-icon-color-yellow {
	color: #d3a000;
}

.font-icon-color-white {
	color: #FFFFFF;
}

.font-icon-color-black {
	color: #000000;
}

.font-icon-color-active {
	color: #4ba73d;
}

.font-icon-color-violet {
	color: #ccccff;
}

.bubble-font-icon:before {
	padding: 0;
	text-align: center;
	width: 1em;
	font-size: 1.25em;
}

.alert-font-icon:before {
	padding: 0;
	text-align: left;
	font-size: 3em;
}

.navigator-font-icon:before {
	padding: 0;
	font-size: 1.5em;
	width: auto;
}

.logo:before {
	font-size: 30px ;
	padding-left: 12px ;
	padding-top: 2px;
}

.tree-icon:before{
	width: 12px;
	padding-left: 3px;
}
.tree-expand:before{
	width : 6px;
	padding-left: 0.4em;
}
.wideButton:before{
	margin-right : 4px;
}
.narrowButton:before{
	margin : 0!important;
	padding: 0!important;
	width : auto;
}