.send_form {
    position:relative;
    min-height: 370px;
}
.form_tab.form_tab_success.flex.flex-column.p20.gap-0 {
    font-size: 20px;
    text-align: center;
}
.preloader {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: flex;
    opacity: 0;
    color: #fff;
    font-size: 20px;
    border-radius: 20px;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.preloader.preloader_active {
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    background: #0a272699;
    backdrop-filter: blur(6px);
}
.preloader > p {
    margin-top: 50px;
}.form_tab {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease-out;
    padding: 0 !important;
}
.form_tab.active {
    transition: max-height .3s ease-in-out;
    opacity: 1;
    visibility: visible;
    max-height: 1000px;
    width: 100%;
    overflow: visible;
}
/* HTML: <div class="loader"></div> */
.loader {
  width: 65px;
  display: grid;
  --mask: 
    radial-gradient(12px at left 15px top 50%, #0000 95%, #000),
    radial-gradient(12px at right 15px top 50%, #0000 95%, #000);
  -webkit-mask: var(--mask);
          mask: var(--mask);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  animation: l1 1s infinite alternate;
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  height: 30px;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
}
.loader:after {
  margin-left: auto;
}
@keyframes l1 {
  to {
    width: 40px;
  }
}
@keyframes l8-0 {
66%      {transform: skewX(0deg)}
80%,100% {transform: skewX(-45deg)}
}
@keyframes l8-1 {
0%   {transform:scale(var(--s,1)) translate(-0.5px,0)}
33%  {transform:scale(var(--s,1)) translate(calc(1px - 50%),calc(1px - 50%))}
66%  {transform:scale(var(--s,1)) translate(calc(1px - 50%),0%)}
100% {transform:scale(var(--s,1)) translate(calc(0.5px - 50%),0%)}
}