.spinner-container{
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-screen{
  background-color: var(--loading-screen-background, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: fixed;
  top:0;
  right:0;
  left:0;
  bottom:0;
  z-index: 500;
  cursor: none;
}
.spinner {
  width: var(--spinner-size, 64px) !important;
  height: var(--spinner-size, 64px) !important;
  background: linear-gradient(180deg, #ec212f 0%, rgba(0, 0, 0, 0.1) 25%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spin 2s cubic-bezier(.52,.1,.27,.87) infinite;
  position: relative;
}
.spinner::after {
  content: "";
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 50%;
  background: var(--loading-screen-background, #ffffff);
  z-index: 01;
}
.spinner-container img{
  height: calc(var(--spinner-size, 64px) / 100 * 75);
  width: calc(var(--spinner-size, 64px) / 100 * 75);
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  z-index: 02;
	object-position: center;
}
.loading-screen p{
  font-family: var(--font-family, sans-serif);
  color: var(--text-color, white);
  opacity: .5;
  font-weight: 300;
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}