.pxpreloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.pxpreloader.no-show {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s linear, visibility 0s 0.5s !important;
}

.preloader-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.preloader-preview .pxpreloader-preview {
  height: 200px;
  width: 200px;
  line-height: 200px;
  margin: 0 auto;
  border: 1px solid black;
  border-radius: 5px;
  overflow: hidden;
  color: var(--preloader-color, #3498db);
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preloader-preview .pxpreloader-preview .loader {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.loading-text {
  width: fit-content;
  font-size: 40px;
  font-family: system-ui,sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: #0000;
  -webkit-text-stroke: 1px var(--preloader-color, #3498db);
  background: conic-gradient(var(--preloader-color, #3498db) 0 0) 0/0% 100% no-repeat text;
  animation: l1 var(--preloader-speed, 1s) linear infinite;
}
.pxpreloader-preview .loading-text {
  font-size: 30px;
}
.loading-text:before {
  content: "Loading...";
}
@keyframes l1 {
  to{background-size: 120% 100%}
}
.rounded-progress {
  width: 120px;
  height: 20px;
  border-radius: 20px;
  background:
   linear-gradient(var(--preloader-color, #3498db) 0 0) 0/0% no-repeat
   rgb(255, 255, 255);
  animation: l2 2s infinite linear;
}
@keyframes l2 {
  100% {background-size:110%}
}
.square {
  width: 85px;
  height: 50px;
  --g1:conic-gradient(from  90deg at left   3px top   3px,#0000 90deg,var(--preloader-color, #3498db) 0);
  --g2:conic-gradient(from -90deg at bottom 3px right 3px,#0000 90deg,var(--preloader-color, #3498db) 0);
  background:var(--g1),var(--g1),var(--g1), var(--g2),var(--g2),var(--g2);
  background-position: left,center,right;
  background-repeat: no-repeat;
  animation: l9 1s infinite;
}
@keyframes l9 {
  0%   {background-size:25px 50% ,25px 50% ,25px 50%}
  25%  {background-size:25px 100%,25px 50% ,25px 50%}
  50%  {background-size:25px 50% ,25px 100%,25px 50%}
  75%  {background-size:25px 50% ,25px 50% ,25px 100%}
  100% {background-size:25px 50% ,25px 50% ,25px 50%}
}


:root {
	--bg: #e3e4e8;
	--fg: var(--preloader-color);
	--primary: var(--preloader-color);
}
.hourglass, .hourglass:before, .hourglass:after {
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
.hourglass {
	--polygonH: polygon(0% 0%,100% 0%,100% 5.55%,95% 5.55%,95% 28%,60% 46%,60% 54%,95% 72%,95% 94.45%,100% 94.45%,100% 100%,0% 100%,0% 94.45%,5% 94.45%,5% 72%,40% 54%,40% 46%,5% 28%,5% 5.55%,0% 5.55%);
	animation-name: flip;
	animation-timing-function: ease-in-out;
	background-image: linear-gradient(var(--primary) 0.5em,#737a8c55 0.5em 8.5em,var(--primary) 8.5em);
	clip-path: var(--polygonH);
	-webkit-clip-path: var(--polygonH);
	overflow: hidden;
	position: relative;
	width: 5em;
	height: 9em;
	z-index: 0;
}
.hourglass:before, .hourglass:after {
	animation-timing-function: linear;
	content: "";
	display: block;
	position: absolute;
}
.hourglass:before {
	--polygonB1: polygon(0% 0%,100% 0%,100% 24%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,50% 47%,0% 24%);
	--polygonB2: polygon(0% 4%,100% 4%,100% 24%,55% 45%,55% 100%,55% 100%,55% 100%,45% 100%,45% 100%,45% 100%,45% 45%,0% 24%);
	--polygonB3: polygon(0% 24%,100% 24%,100% 24%,55% 45%,55% 80%,100% 100%,100% 100%,0% 100%,0% 100%,45% 80%,45% 45%,0% 24%);
	--polygonB4: polygon(45% 45%,55% 45%,55% 45%,55% 45%,55% 58%,100% 76%,100% 100%,0% 100%,0% 76%,45% 58%,45% 45%,45% 45%);
	--polygonB5: polygon(50% 53%,50% 53%,50% 53%,50% 53%,50% 53%,100% 76%,100% 100%,0% 100%,0% 76%,50% 53%,50% 53%,50% 53%);
	animation-name: fill;
	background-color: var(--fg);
	background-size: 100% 3.6em;
	clip-path: var(--polygonB1);
	-webkit-clip-path: var(--polygonB1);
	top: 0.5em;
	left: 0.5em;
	width: 4em;
	height: 8em;
	z-index: 1;
}
.hourglass:after {
	animation-name: glare;
	background:
		linear-gradient(90deg,#0000 0.5em,#0003 0.5em 1.5em,#0000 1.5em 3.5em,#fff3 3.5em 4.5em,#fff0 4.5em 6.5em,#0003 6.5em 7.5em,#0000 7.5em) 0 0 / 100% 0.5em,
		linear-gradient(90deg,#0000 0.75em,#0003 0.75em 1.25em,#0000 1.25em 3.75em,#fff3 3.75em 4.25em,#fff0 4.25em 6.75em,#0003 6.75em 7.25em,#0000 7.25em) 0 0.5em / 100% 8em,
		linear-gradient(90deg,#0000 0.5em,#0003 0.5em 1.5em,#0000 1.5em 3.5em,#fff3 3.5em 4.5em,#fff0 4.5em 6.5em,#0003 6.5em 7.5em,#0000 7.5em) 0 100% / 100% 0.5em;
	background-repeat: repeat-x;
	top: 0;
	left: -3em;
	width: 200%;
	height: 100%;
	z-index: 2;
}
/* Animations */
@keyframes fill {
	from {
		clip-path: var(--polygonB1);
		-webkit-clip-path: var(--polygonB1);
	}
	10% {
		clip-path: var(--polygonB2);
		-webkit-clip-path: var(--polygonB2);
	}
	45% {
		clip-path: var(--polygonB3);
		-webkit-clip-path: var(--polygonB3);
	}
	80% {
		clip-path: var(--polygonB4);
		-webkit-clip-path: var(--polygonB4);
	}
	85%, to {
		clip-path: var(--polygonB5);
		-webkit-clip-path: var(--polygonB5);
	}
}
@keyframes glare {
	from, 90% {
		transform: translateX(0);
	}
	to {
		transform: translateX(3em);
	}
}
@keyframes flip {
	from, 90% {
		transform: rotate(0);
	}
	to {
		transform: rotate(180deg);
	}
}

.clock-loader {
  --clock-color: var(--preloader-color, #3498db);
  --clock-width: 4rem;
  --clock-radius: calc(var(--clock-width) / 2);
  --clock-minute-length: calc(var(--clock-width) * 0.4);
  --clock-hour-length: calc(var(--clock-width) * 0.2);
  --clock-thickness: 0.2rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--clock-width);
  height: var(--clock-width);
  border: 3px solid var(--clock-color);
  border-radius: 50%;
}
.clock-loader::before, .clock-loader::after {
  position: absolute;
  content: "";
  top: calc(var(--clock-radius) * 0.25);
  width: var(--clock-thickness);
  background: var(--clock-color);
  border-radius: 10px;
  transform-origin: center calc(100% - calc(var(--clock-thickness) / 2));
  animation: spin infinite linear;
}
.clock-loader::before {
  height: var(--clock-minute-length);
  animation-duration: var(--preloader-speed, 2s);
}
.clock-loader::after {
  top: calc(var(--clock-radius) * 0.25 + var(--clock-hour-length));
  height: var(--clock-hour-length);
  animation-duration: var(--preloader-speed, 15s);
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

.pxpreloader-preview .spinner, .pxpreloader .spinner {
  width: 50px !important;
  padding: 8px !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  background: var(--preloader-color) !important;
  visibility: visible !important;
  height: auto !important;
  opacity: 1 !important;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m) !important;
          mask: var(--_m) !important;
  -webkit-mask-composite: source-out !important;
          mask-composite: subtract !important;
  animation: l3 1s infinite linear !important;
}
@keyframes l3 {to{transform: rotate(1turn)}}

.pxpreloader-preview .scaling-bubble-colors {
  transform: scale(0.4);
}
.scaling-bubble-colors {
	display: flex;
	justify-content: center;
	align-items: center;
  max-width: unset !important;
}
.scaling-bubble-colors > div {
	width: 3vw;
	height: 3vw;
	border-radius: 100%;
	margin: 2vw;
	background-image: linear-gradient(145deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0) 100%);
	animation: scaling-bubble-colors-bounce 1.5s 0.5s linear infinite;
}
.scaling-bubble-colors .yellow {
	background-color: #feb60a;
}
.scaling-bubble-colors .pink {
	background-color: #ff0062;
	animation-delay: 0.1s;
}

.scaling-bubble-colors .blue {
	background-color: #00dbf9;
	animation-delay: 0.2s;
}

.scaling-bubble-colors .violet {
	background-color: #da00f7;
	animation-delay: 0.3s;
}

@keyframes scaling-bubble-colors-bounce {
	0%, 50%, 100% {
		transform: scale(1);
		filter: blur(0px);
	}
	25% {
		transform: scale(0.6);
		filter: blur(3px);
	}
	75% {
		filter: blur(3px);
		transform: scale(1.4);
	}
}

.bouncing-bubbles {
  width:200px;
  height:60px;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
}
.pxpreloader-preview .bouncing-bubbles  {
  transform: scale(0.5) translate(-50%, -50%);
  left: 25%;
}
.pxpreloader-preview .bouncing-bubbles span {
  position: initial;
}
.bouncing-bubbles .circle{
  width:20px;
  height:20px;
  position: absolute;
  border-radius: 50%;
  background-color: var(--preloader-color, #3498db);
  left:15%;
  transform-origin: 50%;
  animation: bouncing-bubbles-circle .5s alternate infinite ease;
}

@keyframes bouncing-bubbles-circle{
  0%{
      top:60px;
      height:5px;
      border-radius: 50px 50px 25px 25px;
      transform: scaleX(1.7);
  }
  40%{
      height:20px;
      border-radius: 50%;
      transform: scaleX(1);
  }
  100%{
      top:0%;
  }
}
.bouncing-bubbles .circle:nth-child(2){
  left:45%;
  animation-delay: .2s;
}
.bouncing-bubbles .circle:nth-child(3){
  left:auto;
  right:15%;
  animation-delay: .3s;
}
.bouncing-bubbles .shadow{
  width:20px;
  height:4px;
  border-radius: 50%;
  background-color: rgba(0,0,0,.5);
  position: absolute;
  top:62px;
  transform-origin: 50%;
  z-index: -1;
  left:15%;
  filter: blur(1px);
  animation: bouncing-bubbles-shadow .5s alternate infinite ease;
}

@keyframes bouncing-bubbles-shadow{
  0%{
      transform: scaleX(1.5);
  }
  40%{
      transform: scaleX(1);
      opacity: .7;
  }
  100%{
      transform: scaleX(.2);
      opacity: .4;
  }
}
.bouncing-bubbles .shadow:nth-child(4){
  left: 45%;
  animation-delay: .2s
}
.bouncing-bubbles .shadow:nth-child(5){
  left:auto;
  right:15%;
  animation-delay: .3s;
}
.bouncing-bubbles span{
  position: absolute;
  top:75px;
  font-size: 20px;
  letter-spacing: 12px;
  color: var(--preloader-color, #3498db);
  left:15%;
}

.wavy-colors {
  margin: 0 auto;
  width: 60px;
  height: 50px;
  text-align: center;
  font-size: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}
.wavy-colors > div {
  height: 100%;
  width: 8px;
  display: inline-block;
  float: left;
  margin-left: 2px;
  -webkit-animation: wavy-delay 0.8s infinite ease-in-out;
  animation: wavy-delay 0.8s infinite ease-in-out;
}
.wavy-colors .bar1 {
  background-color: #754fa0;
}
.wavy-colors .bar2 {
  background-color: #09b7bf;
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.wavy-colors .bar3 {
  background-color: #90d36b;
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.wavy-colors .bar4 {
  background-color: #f2d40d;
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.wavy-colors .bar5 {
  background-color: #fcb12b;
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.wavy-colors .bar6 {
  background-color: #ed1b72;
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

@-webkit-keyframes wavy-delay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.05);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}
@keyframes wavy-delay {
  0%, 40%, 100% {
    transform: scaleY(0.05);
    -webkit-transform: scaleY(0.05);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}

.ekg {
  left: 50%;
  max-width: 300px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ekg:nth-of-type(1),
.ekg:nth-of-type(3) {
  filter: blur(10px);
}
.ekg path {
  -webkit-animation: draw 1s infinite ease-out forwards;
  animation: draw 1s infinite ease-out forwards;
  stroke: var(--preloader-color);
  fill:none;fill-rule:evenodd;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1
}
@-webkit-keyframes draw {
  75% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes draw {
  75% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}