.fontastic + span,
[class^="icon-"] + span,
[class*=" icon-"] + span {
	margin-left: 0.5em;
}

[class^="icon-"],
[class*=" icon-"] {
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 1;
	font-size: 16px;
	vertical-align: text-top;

	.disabled &,
	.btn[disabled] & {
		opacity: 0.5;
	}
}

.iconsize20 {
	font-size: 20px;
}

.iconsize24 {
	font-size: 24px;
}

/* White icons with optional class, or on hover/active states of certain elements */
.icon-white,
.nav > .active > a > [class^="icon-"],
.nav > .active > a > [class*=" icon-"] {
	color: #fff;
}

.g-ui-menu .e-item:hover [class^="icon-"],
.g-ui-menu .e-item:hover [class*=" icon-"] {
	color: #fff;
}

.icon-none {
	background-image: none !important;
}

.iconcolor-display-none {
	display: none;
}

.iconcolor-green {
	color: green;
}

.iconcolor-red {
	color: red;
}

@keyframes rotation {
	to   {transform: rotate(1turn);}
}

.icon-spinner {

	font-family: Arial;

	height: 11px;
	width: 11px;

	margin-right: -1px;
	background: none;

	border: 3px solid #aaa;
	border-top-color: #333;
	border-radius: 100%;

	&.big {

		height: 13px;
		width: 13px;

		margin-top: -2px;
		margin-left: -2px;
	}

	&.white, &.icon-white {

		border-color: #fff;
		border-top-color: #999;

		&.animated {
			border-color: transparent;
			border-top-color: #fff;
		}
	}
}

.icon-spinner:not(.not-animated) {
	border-color: transparent;
	border-top-color: #999;
	animation: rotation .8s infinite ease-in-out;
}

.fontastic.icon-spinner {
    text-indent: -1em;
    overflow: hidden;
}