/* инлайновый спиннер */
.spinner {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
}
.spinner::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;

    width: 40px;
    height: 40px;

	border-radius: 50%;
    border-width: 3px;
    border-style: solid;

    border-top-color: #FFDB4D;
    border-right-color: #FFDB4D;
    border-bottom-color: transparent;
    border-left-color: transparent;
    
    animation-name: spinner;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.spinner--small {
    width: 20px;
    height: 20px;
}
.spinner--small::before {
    width: 20px;
    height: 20px;

    border-width: 2px;

	animation-duration: 0.8s;
}

.spinner--big {
    width: 50px;
    height: 50px;
}
.spinner--big::before {
    width: 50px;
    height: 50px;
}

/* нарушаем БЭМ для удобства
использования спиннера */
.spinner--centered {
    width: 100%;
}



/* загрузочный оверлэй поверх блока */
.block-loading-overlay {
    position: relative;
}
.block-loading-overlay::before {
    position: absolute;
	content: "";
	z-index: 2;

	top: 0;
    bottom: 0;
	left: 0;
    right: 0;

    background-color: #FFFFFF;
}
.block-loading-overlay--gray::before {
    background-color: #F8F8F8;
}
.block-loading-overlay::after{
	position: absolute;
	z-index: 3;
	content: "";
	top: 50%;
	left: 50%;

	width: 40px;
	height: 40px;

	border-radius: 50%;
	border-top: 3px solid #FFDB4D;
	border-right: 3px solid #FFDB4D;
	border-bottom: 3px solid transparent;
	border-left: 3px solid transparent;

	background-color: transparent;

	-webkit-animation: spinner 1s linear infinite;
	animation: spinner 1s linear infinite;
}


/* загрузочный оверлэй поверх всей страницы */
.page-loading-overlay {
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;

	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	padding: 10px;

	width: 100%;
	height: 100%;

	overflow: auto;

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;

	background-color: rgba(70, 51, 101, 0.5);
}
.page-loading-overlay--without-bg {
    background-color: transparent;
}
.page-loading-overlay--hidden {
    display: none;
}
.page-loading-overlay::after {
    position: absolute;
	content: "";
	top: 50%;
	left: 50%;

	width: 50px;
	height: 50px;

	border-radius: 50%;
	border-top: 3px solid #FFDB4D;
	border-right: 3px solid #FFDB4D;
	border-bottom: 3px solid transparent;
	border-left: 3px solid transparent;

	background-color: transparent;

	-webkit-animation: spinner 1s linear infinite;
	animation: spinner 1s linear infinite;
}

@keyframes spinner {
	0%{
		transform: translate(-50%, -50%) rotate(0);
	}
	100%{
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

#ajax_loading {
	height: 4px;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	background-color: #a68ad3;
}
#ajax_loading:before {
	display: block;
	position: absolute;
	content: "";
	width: 800px;
	height: 4px;
	background: rgba(255, 204, 25, 1);
	animation: loading 1.2s ease-in-out infinite;
}

@keyframes loading {
	from {
		left: -800px;
	}
	to {
		left: 100%;
	}
}