html {
  text-rendering: optimizeLegibility !important;
}

body {
  --font-aw5: "Font Awesome 5 Free";
  --font-aw4: "FontAwesome";
  --body-base-font: 'Barlow', sans-serif;
  --body-base-font-size: 16px;
  --body-bg-1: #fff;
  --body-bg-2: #4b53e4;
  --body-bg-3: #f2f2f2;
  --body-bg-4: #f7f7f7;
  --body-text-1: #222831;
  --body-text-2: #434343;
  --body-text-3: #50595c;
  --body-text-4: #f7fbfc;
  --border-bg-1: #ececec;
  --border-bg-2: #e7e6e1;
  --hover-transition-1: background-color ease-in 0.2s, color ease-in 0.2s;
  --width-transition-1: width ease-in 0.2s, margin ease-in 0.2s;
  --sidebar-left-width: 230px;
  --sidebar-left-shrink-width: 75px;
  --sidebar-right-width: 230px;
  --sidebar-right-shrink-width: 75px;
  --app-grad: radial-gradient(circle at 10% 20%, rgb(39, 199, 171) 0%, rgb(70, 143, 197) 90%);
  --app-grad-alt: #0abcf9;
  --can-grad: linear-gradient(to right, rgb(178, 69, 146), rgb(241, 95, 121));
  --can-grad-alt: #6e72fc;
  --vis-grad: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
  --vis-grad-alt: #ff4e00;
  --mob-app-grad: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));
  --mob-app-grad-alt: #20bf55;
  --pdf-grad-alt: #f71735;
  --pdf-grad: linear-gradient(25deg, rgb(214, 76, 127), rgb(238, 71, 88) 50%);
  --api-grad-alt: #378b29;
  --api-grad: linear-gradient(315deg, #378b29 0%, #74d680 74%);
  --data-grad-alt: #9fa4c4;
  --data-grad: linear-gradient(315deg, #9fa4c4 0%, #9e768f 74%);
  --data-anly-grad: linear-gradient(109.6deg, rgb(247, 108, 243) 11.2%, rgb(173, 64, 254) 100.2%);
  --stream-anly-grad: linear-gradient(to top, #c79081 0%, #dfa579 100%);
  --data-pipe-grad: radial-gradient(circle at 12.3% 19.3%, rgb(85, 88, 218) 0%, rgb(95, 209, 249) 100.2%);
}

/* css loader */
@-webkit-keyframes pill {
  0% {
    background-position: 0 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  25% {
    background-position: 0 100%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    background-position: 0 100%;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  75% {
    background-position: 0 200%;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    background-position: 0 200%;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes pill {
  0% {
    background-position: 0 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  25% {
    background-position: 0 100%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    background-position: 0 100%;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  75% {
    background-position: 0 200%;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    background-position: 0 200%;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.pill:before {
  content: '';
  height: 60px;
  width: 30px;
  -webkit-animation: pill 2s infinite backwards;
  animation: pill 2s infinite backwards;
  background: -webkit-gradient(linear, left bottom, left top, from(var(--body-bg-2)), color-stop(50%, var(--body-bg-2)), color-stop(50%, transparent), to(transparent));
  background: linear-gradient(0deg, var(--body-bg-2), var(--body-bg-2) 50%, transparent 50%, transparent);
  background-size: 100% 200%;
  background-repeat: no-repeat;
  border: 6px solid var(--body-bg-1);
  border-radius: 15px;
}

.custom-css-loader {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.half-ring:before {
  -webkit-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
  border-radius: 10px;
  -webkit-box-shadow: 25px 0px 0 0 rgba(255, 255, 255, 0.2), 20.22542px 14.69463px 0 0 rgba(255, 255, 255, 0.4), 7.72542px 23.77641px 0 0 rgba(255, 255, 255, 0.6), -7.72542px 23.77641px 0 0 rgba(255, 255, 255, 0.8), -20.22542px 14.69463px 0 0 white;
  box-shadow: 25px 0px 0 0 rgba(255, 255, 255, 0.2), 20.22542px 14.69463px 0 0 rgba(255, 255, 255, 0.4), 7.72542px 23.77641px 0 0 rgba(255, 255, 255, 0.6), -7.72542px 23.77641px 0 0 rgba(255, 255, 255, 0.8), -20.22542px 14.69463px 0 0 white;
  height: 10px;
  width: 10px;
  display: block;
  content: '';
}

/* end loader */

/* old loader */
/* loading spinner */
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  /*z-index: 1210 !important;*/
}
.loading-bar {
  display: inline-block;
  width: 4px;
  height: 18px;
  border-radius: 4px;
  animation: loading 1s ease-in-out infinite;
  margin: 1px;
}
.loading-bar:nth-child(1) {
  background-color: #065aad;
  animation-delay: 0s;
}
.loading-bar:nth-child(2) {
  background-color: #fe0000;
  animation-delay: 0.09s;
}
.loading-bar:nth-child(3) {
  background-color: #01a5ce;
  animation-delay: 0.18s;
}
.loading-bar:nth-child(4) {
  background-color: #84ce20;
  animation-delay: .27s;
}
.loading-bar:nth-child(5) {
  background-color: #e8851b;
  animation-delay: .36s;
}

@keyframes loading {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1, 2.2);
  }
  40% {
    transform: scale(1);
  }
}
/* end old loader */