/*****************************************/
/* preloaders */
/*****************************************/

.preloader
{
	position: relative;
	display: inline-block;
}
.preloader:before,
.preloader:after
{
	border-color: rgba(0, 0, 0, 0.3);
	border-radius: 50%;
	border-style: solid;
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	border-width: 2px;
	height: 24px;
	margin: -14px 0 0 -14px;
	width: 24px;
}
.preloader:after
{
	-webkit-animation: preloader-animation 0.6s linear;
	-o-animation: preloader-animation 0.6s linear;
	animation: preloader-animation 0.6s linear;
	-webkit-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.preloader:after
{
	border-color: #777777 transparent transparent;
}

.preloader-light.preloader:after
{
	border-color: #FFFFFF transparent transparent;
}

/*****************************************/

.preloader-xs
{
	width: 12px;
	height: 12px;
}
.preloader-s
{
	width: 18px;
	height: 18px;
}
.preloader-m
{
	width: 22px;
	height: 22px;
}
.preloader-l
{
	width: 30px;
	height: 30px;
}

/*****************************************/

.preloader-xs.preloader::after,
.preloader-xs.preloader::before
{
	height: 8px;
	margin: -6px 0 0 -6px;
	width: 8px;
}
.preloader-s.preloader::after,
.preloader-s.preloader::before
{
	height: 14px;
	margin: -9px 0 0 -9px;
	width: 14px;
}
.preloader-m.preloader::after,
.preloader-m.preloader::before
{
	height: 18px;
	margin: -11px 0 0 -11px;
	width: 18px;
}
.preloader-l.preloader::after,
.preloader-l.preloader::before
{
	height: 26px;
	margin: -15px 0 0 -15px;
	width: 26px;
}

/*****************************************/

.btn.preloader
{
	color: transparent !important;
	transition: none;
}
.btn.btn-primary.preloader::after,
.btn.btn-save.preloader::after,
.btn.btn-create.preloader::after,
.btn.btn-remove.preloader::after
{
	border-color: #FFFFFF transparent transparent;
}
.btn.preloader:hover,
.btn.preloader:focus
{
	color: transparent !important;
}
.btn.preloader::after,
.btn.preloader::before
{
	height: 18px;
	margin: -11px 0 0 -11px;
	width: 18px;
}
.btn.btn-xs.preloader::after,
.btn.btn-xs.preloader::before
{
	height: 8px;
	margin: -6px 0 0 -6px;
	width: 8px;
}
.btn.btn-s.preloader::after,
.btn.btn-s.preloader::before
{
	height: 14px;
	margin: -9px 0 0 -9px;
	width: 14px;
}
.btn.btn-l.preloader::after,
.btn.btn-l.preloader::before
{
	height: 26px;
	margin: -15px 0 0 -15px;
	width: 26px;
}