body {
  margin: 0;
}
.hris-loading-logo.hidden {
  display: none;
}
.hris-loading-logo.show {
  display: block;
}
.meet-loading-logo.hidden {
  display: none;
}
.meet-loading-logo.show {
  display: flex;
}
.meet-loading-logo{
  width: 200px;
  height: 200px;
  justify-content: center;
  align-items: center;
}
.meet-logo-curves{
  transform-origin: center;
  animation: rotate 2s ease infinite;
}
.meet-logo-c1{
  animation: circle1 2s ease infinite;
}
.meet-logo-c2{
  animation: circle2 2s ease infinite;
}
.meet-logo-c3{
  animation: circle3 2s ease infinite;
}
.meet-logo-c4{
  animation: circle4 2s ease infinite;
}
.loading-bg-transparent {
  position: fixed;
  z-index: 3000;
  display: none;
  backdrop-filter: blur(2px);
  background: rgba(var(--initial-loader-bg, 255, 255, 255), 0.2);
  block-size: 100%;
  inline-size: 100%;
  inset: 0;
}

.loading-bg-transparent.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

#loading-bg {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--initial-loader-bg, #fff);
  block-size: 100%;
  inline-size: 100%;
}
/* #737975, #a9abaa */
.logo-g1.cls-1 {
  animation: circleGrey1 600ms ease infinite;
}
.logo-g1.cls-2 {
  animation: pathGrey1 600ms ease infinite;
}
.logo-g2.cls-1 {
  animation: circleGrey2 600ms ease infinite;
}
.logo-g2.cls-2 {
  animation: pathGrey2 600ms ease infinite;
}
.logo-g3.cls-1 {
  animation: circleGrey3 600ms ease infinite;
}
.logo-g3.cls-2 {
  animation: pathGrey3 600ms ease infinite;
}
.logo-g4.cls-1 {
  animation: circleGrey4 600ms ease infinite;
}
.logo-g4.cls-2 {
  animation: pathGrey4 600ms ease infinite;
}
.logo-g5 {
  animation: upAndDown 2s ease-in-out infinite;
}
.hrez-loading-logo-svg{
  animation: rotate360 3s linear infinite;
}
.hrez-loading-logo.hidden {
  display: none;
}
.hrez-loading-logo.show {
  display: block;
}
@keyframes circleGrey1 {
  0%,
  100% {
    fill: var(--text-color, #FFFFFF);
  }
  25% {
    fill: #18b256;
  }
  50% {
    fill: #18b256;
  }
  75% {
    fill: #18b256;
  }
}
@keyframes pathGrey1 {
  0%,
  100% {
    fill: var(--text-color, #FFFFFF);;
  }
  25% {
    fill: #30c46c;
  }
  50% {
    fill: #30c46c;
  }
  75% {
    fill: #30c46c;
  }
}
@keyframes circleGrey2 {
  0%,
  100% {
    fill: #18b256;
  }
  25% {
    fill: var(--text-color, #FFFFFF);;
  }
  50% {
    fill: #18b256;
  }
  75% {
    fill: #18b256;
  }
}
@keyframes pathGrey2 {
  0%,
  100% {
    fill: #30c46c;
  }
  25% {
    fill: var(--text-color, #FFFFFF);;
  }
  50% {
    fill: #30c46c;
  }
  75% {
    fill: #30c46c;
  }
}
@keyframes circleGrey3 {
  0%,
  100% {
    fill: #18b256;
  }
  25% {
    fill: #18b256;
  }
  50% {
    fill: var(--text-color, #FFFFFF);;
  }
  75% {
    fill: #18b256;
  }
}
@keyframes pathGrey3 {
  0%,
  100% {
    fill: #30c46c;
  }
  25% {
    fill: #30c46c;
  }
  50% {
    fill: var(--text-color, #FFFFFF);;
  }
  75% {
    fill: #30c46c;
  }
}
@keyframes circleGrey4 {
  0%,
  100% {
    fill: #18b256;
  }
  25% {
    fill: #18b256;
  }
  50% {
    fill: #18b256;
  }
  75% {
    fill: var(--text-color, #FFFFFF);;
  }
}
@keyframes pathGrey4 {
  0%,
  100% {
    fill: #30c46c;
  }
  25% {
    fill: #30c46c;
  }
  50% {
    fill: #30c46c;
  }
  75% {
    fill: var(--text-color, #FFFFFF);;
  }
}
@keyframes upAndDown {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
@keyframes circle1 {
  0%, 100%{
    transform: translate(0, 0);
  }
  50%{
    transform: translate(-25px, -25px);
  }
}
@keyframes circle2 {
  0%, 100%{
    transform: translate(0, 0);
  }
  50%{
    transform: translate(25px, -25px);
  }
}
@keyframes circle3 {
  0%, 100%{
    transform: translate(0, 0);
  }
  50%{
    transform: translate(-25px, 25px);
  }
}
@keyframes circle4 {
  0%, 100%{
    transform: translate(0, 0);
  }
  50%{
    transform: translate(25px, 25px);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}