#ajax-stat {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  width: 100%;
}
#loading-div {
  width: 100%;
}
#image {
  width: 50%;
  padding-left: 50px;
}
#content {
  width: 50%;
}
#loading-img {
  display: block;
  align-self: center;
  justify-self: center;
  margin: auto;
}

/* HTML: <div class="loader"></div> */
.loader {
  --circle: no-repeat radial-gradient(circle closest-side, #003c71 90%, #0000);

  width: 60px;
  animation: l3 1s infinite linear;
  background:
    var(--circle) 0% 50%,
    var(--circle) 50% 50%,
    var(--circle) 100% 50%;
  background-size: calc(100% / 3) 50%;
  aspect-ratio: 2;
}
@keyframes l3 {
  20% {
    background-position:
      0% 0%,
      50% 50%,
      100% 50%;
  }
  40% {
    background-position:
      0% 100%,
      50% 0%,
      100% 50%;
  }
  60% {
    background-position:
      0% 50%,
      50% 100%,
      100% 0%;
  }
  80% {
    background-position:
      0% 50%,
      50% 50%,
      100% 100%;
  }
}

@media only screen and (max-width: 700px) {
  #ajax-stat {
    flex-direction: column-reverse;
  }
  #image {
    width: 100%;
    padding-top: 50px;
    padding-left: 0%;
  }
  #image {
    width: 100%;
  }
}