body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #F5F7F9;
}

body {
  font-family: Roboto, sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased
}

.ipl-progress-indicator.available {
  opacity: 0
}

.ipl-progress-indicator {
  background-color: #f5f5f5;
  width: 100%;
  height: 100%;
  position: fixed;
  opacity: 1;
  pointer-events: none;
  -webkit-transition: opacity cubic-bezier(.4, 0, .2, 1) 436ms;
  -moz-transition: opacity cubic-bezier(.4, 0, .2, 1) 436ms;
  transition: opacity cubic-bezier(.4, 0, .2, 1) 436ms;
  z-index: 9999
}

.insp-logo-frame {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-animation: fadein 436ms;
  -moz-animation: fadein 436ms;
  animation: fadein 436ms;
  height: 98%
}

.insp-logo-frame-img {
  width: 191.17px;
  height: 69.24px;
  -webkit-align-self: center;
  -moz-align-self: center;
  align-self: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='69.24' viewBox='0 0 191.17 69.24'%3E%3Cdefs%3E%3Cstyle%3E.c%7Bfill:%238060f3%7D.d%7Bfill:%23e4a441%7D%3C/style%3E%3C/defs%3E%3Cpath fill='%23482874' d='M66.37 30.57C64.23 19.91 95.59 5.82 95.59 5.82s32.83 12.56 29.21 24.75c-2.27 7.63-29.53 12-29.53 12s-27.36-4.34-28.9-12z'/%3E%3Cpath d='M95.27 42.52c7.66 8.58 10.91 19.78 10.29 26.72h30.86a69.63 69.63 0 00-11.62-38.67c-.61 0-1.21-.06-1.84-.06-12.96 0-21.86 5.27-27.69 12.01zM95.59 5.82A67.16 67.16 0 0068.21 0C30.54 0 0 31 0 69.24h30.68c-1-8 5.91-37.49 35.7-38.67A68.64 68.64 0 0195.59 5.82z' class='c'/%3E%3Cpath d='M68.21 30.51c-.63 0-1.23 0-1.83.06a69.64 69.64 0 00-11.63 38.67h30.68c-.6-4.8 1.63-17.23 9.84-26.72a35.25 35.25 0 00-27.06-12.01zM191.17 69.24C191.17 31 160.64 0 123 0a67.11 67.11 0 00-27.41 5.82 68.75 68.75 0 0129.21 24.75c25.78 1.16 36.6 26.48 35.51 38.67z' class='d'/%3E%3C/svg%3E");
}

.ipl-progress-indicator-head {
  background-color: #F5F7F9;
  height: 4px;
  overflow: hidden;
  position: relative
}

.ipl-progress-indicator .first-indicator,
.ipl-progress-indicator .second-indicator {
  background-color: #8060f3;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  position: absolute;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  transform: scaleX(0)
}

.ipl-progress-indicator .first-indicator {
  -webkit-animation: first-indicator 2s linear infinite;
  -moz-animation: first-indicator 2s linear infinite;
  animation: first-indicator 2s linear infinite
}

.ipl-progress-indicator .second-indicator {
  -webkit-animation: second-indicator 2s linear infinite;
  -moz-animation: second-indicator 2s linear infinite;
  animation: second-indicator 2s linear infinite
}

.ipl-progress-indicator .insp-logo {
  animation: App-logo-spin infinite 20s linear;
  border-radius: 50%;
  -webkit-align-self: center;
  -moz-align-self: center;
  align-self: center
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0)
  }
  to {
    transform: rotate(360deg)
  }
}

@-webkit-keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-moz-keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes first-indicator {
  0% {
    transform: translate(0) scaleX(0)
  }
  25% {
    transform: translate(0) scaleX(.5)
  }
  50% {
    transform: translate(25%) scaleX(.75)
  }
  75% {
    transform: translate(100%) scaleX(0)
  }
  100% {
    transform: translate(100%) scaleX(0)
  }
}

@keyframes second-indicator {
  0% {
    transform: translate(0) scaleX(0)
  }
  60% {
    transform: translate(0) scaleX(0)
  }
  80% {
    transform: translate(0) scaleX(.6)
  }
  100% {
    transform: translate(100%) scaleX(.1)
  }
}
