body.loading
{
    overflow: hidden;
}

.loader_panel
{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 1031;
	background-color: #FFFFFF;
	top: 0;
	left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item
{
	display: flex;
	place-items: center;
	width: 100%;
	height: 100%;
	justify-content: center;
}

.loader {
	--color-6: #66A243;
	--color-7: #1087AA;

	--size-mid: 6vmin;
	--size-dot: 1.5vmin;
	--size-bar: 0.4vmin;
	--size-square: 50px;
	
	display: block;
	position: absolute;
	width: 100px;
	height: 100px;
	display: grid;
	place-items: center;
	background-color: #FFFFFF;
}

.loader::before,
.loader::after {
	content: '';
	box-sizing: border-box;
	position: absolute;
}


/**
	loader --7
**/
.loader.L7::before,
.loader.L7::after {
	width: var(--size-square);
	height: var(--size-square);
	/*background-color: var(--color-6);*/
	background: url(../img/webp/logo/blue.png) scroll no-repeat center center transparent;
	background-size: contain;
	border-radius: 4px 0 4px 0;
}
.loader.L7::after {
	background: url(../img/webp/logo/green.png) scroll no-repeat center center transparent;
	background-size: contain;
	border-radius: 0 4px 0 4px;
}

.loader.L7::before {
	top: calc(50% - var(--size-square));
	left: calc(50% - var(--size-square));
	animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}

.loader.L7::after {
	top: 50%;
	left: 50%;
	animation: loader-7 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}


@keyframes loader-6 {
	0%, 100% {
		transform: none;
	}
	
	25% {
		transform: translateX(100%);
	}
	
	50% {
		transform: translateX(100%) translateY(100%);
	}
	
	75% {
		transform: translateY(100%);
	}
}

@keyframes loader-7 {
	0%, 100% {
		transform: none;
	}
	
	25% {
		transform: translateX(-100%);
	}
	
	50% {
		transform: translateX(-100%) translateY(-100%);
	}
	
	75% {
		transform: translateY(-100%);
	}
}