.Block_Loading{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.200);
    backdrop-filter: blur(3px);
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    animation: Block_Loading 1 0.2s;
    z-index: 3000;
}

@keyframes Block_Loading {
    0%{
        opacity: 0;
        visibility: hidden;
    }

    100%{
        opacity: 1;
        visibility: visible;
    }
}

.Block_Loading_OPENER{
    display: flex;
}

.Main_loader {
 width: 40px;
 height: 20px;
 --c:no-repeat radial-gradient(farthest-side,rgb(104, 187, 255) 93%,#0000);
 background:
   var(--c) 0    0,
   var(--c) 50%  0,
   var(--c) 100% 0;
 background-size: 8px 8px;
 position: relative;
 animation: l4-0 1s linear infinite alternate, Main_loader 1 0.2s;
 scale: 1.5;
}

.Main_loader:before {
  content: "";
  border-radius: 3px;
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgb(38, 157, 255);
  left: 0;
  top: 0;
  animation: 
    l4-1 1s linear infinite alternate,
    l4-2 0.5s cubic-bezier(0,200,.8,200) infinite,
    l4-3 0.5s ease-in-out infinite;
}

@keyframes l4-0 {
 0%      {background-position: 0  100%,50% 0   ,100% 0}
 8%,42%  {background-position: 0  0   ,50% 0   ,100% 0}
 50%     {background-position: 0  0   ,50% 100%,100% 0}
 58%,92% {background-position: 0  0   ,50% 0   ,100% 0}
 100%    {background-position: 0  0   ,50% 0   ,100% 100%}
}
@keyframes l4-1 {
 100% {left:calc(100% - 8px)}
}
@keyframes l4-2 {
 100% {top:-0.1px}
}

@keyframes l4-3 {
  0% {
    height: 8px;
    top: 0;
  }
  50% {
    height: 14px;
    top: -25px;
  }
  100% {
    height: 8px;
    top: 0;
  }
}

@keyframes Main_loader {
    0%{
        opacity: 0;
        visibility: hidden;
        scale: 0.5;
    }

    100%{
        opacity: 1;
        visibility: visible;
        scale: 1;
    }
  }







/* загрузка _2 */
.Main_loader_2 {
    width: 50px;
    height: 28px;
    --_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000);
    background:
      var(--_g) 50%  0,
      var(--_g) 100% 0;
    background-size: 12px 12px;
    position: relative;
    animation: l23-0 1.5s linear infinite, Main_loader_2 1 0.2s;
  }
  .Main_loader_2:before {
    content: "";
    position: absolute;
    height: 12px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #000;
    left:0;
    top:0;
    animation: 
      l23-1 1.5s linear infinite,
      l23-2 0.5s cubic-bezier(0,200,.8,200) infinite;
  }
  @keyframes l23-0 {
    0%,31%  {background-position: 50% 0   ,100% 0}
    33%     {background-position: 50% 100%,100% 0}
    43%,64% {background-position: 50% 0   ,100% 0}
    66%     {background-position: 50% 0   ,100% 100%}
    79%     {background-position: 50% 0   ,100% 0}
    100%    {transform:translateX(calc(-100%/3))}
  }
  @keyframes l23-1 {
    100% {left:calc(100% + 7px)}
  }
  @keyframes l23-2 {
    100% {top:-0.1px}
  }

  @keyframes Main_loader_2 {
    0%{
        opacity: 0;
        visibility: hidden;
        scale: 0.5;
    }

    100%{
        opacity: 1;
        visibility: visible;
        scale: 1;
    }
  }



  /* загрузка _3 */
  .Main_loader_3 {
    color: #000;
    width: 4px;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
    transform: translateX(-38px);
    animation: l21 .5s infinite alternate linear, Main_loader_3 1 0.2s;
  }
  
  @keyframes l21 {
    50%  {box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px}
    100% {box-shadow: 19px 0 0 0  , 38px 0 0 3px, 57px 0 0 7px}
  }


  @keyframes Main_loader_3 {
    0%{
        opacity: 0;
        visibility: hidden;
        scale: 0.5;
    }

    100%{
        opacity: 1;
        visibility: visible;
        scale: 1;
    }
  }




  /* загрузка _4 */
  .Main_loader_4 {
    width: 17px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #000;
    display: grid;
    animation: l22-0 2s infinite linear, Main_loader_4 1 0.2s;
  }
  .Main_loader_4:before,
  .Main_loader_4:after {
    content: "";
    grid-area: 1/1;
    margin: 15%;
    border-radius: 50%;
    background: inherit;
    transform: rotate(0deg) translate(150%);
    animation: l22 1s infinite;
  }
  .Main_loader_4:after {
    animation-delay: -.5s
  }
  @keyframes l22-0 {
    100% {transform: rotate(1turn)}
  }
  @keyframes l22 {
    100% {transform: rotate(1turn) translate(150%)}
  }

  @keyframes Main_loader_4 {
    0%{
        opacity: 0;
        visibility: hidden;
        scale: 0.5;
    }

    100%{
        opacity: 1;
        visibility: visible;
        scale: 1;
    }
  }
  






   /* загрузка _5 */
   .Main_loader_5 {
    width: 55px;
    aspect-ratio: 1;
    --g1:conic-gradient(from  90deg at top    3px left  3px,#0000 90deg,rgb(77, 142, 255) 0);
    --g2:conic-gradient(from -90deg at bottom 3px right 3px,#0000 90deg,rgb(77, 142, 255) 0);
    background:
      var(--g1),var(--g1),var(--g1),var(--g1), 
      var(--g2),var(--g2),var(--g2),var(--g2);
    background-position: 0 0,100% 0,100% 100%,0 100%;
    background-size: 25px 25px;
    background-repeat: no-repeat;
    animation: l11 1.5s infinite, Main_loader_5 1 0.2s;
  }
  @keyframes l11 {
    0%   {background-size:35px 15px,15px 15px,15px 35px,35px 35px}
    25%  {background-size:35px 35px,15px 35px,15px 15px,35px 15px}
    50%  {background-size:15px 35px,35px 35px,35px 15px,15px 15px}
    75%  {background-size:15px 15px,35px 15px,35px 35px,15px 35px}
    100% {background-size:35px 15px,15px 15px,15px 35px,35px 35px}
  }

  @keyframes Main_loader_5 {
    0%{
        opacity: 0;
        visibility: hidden;
        scale: 0.5;
    }

    100%{
        opacity: 1;
        visibility: visible;
        scale: 1;
    }
  }