/* ------ buttons ----- */
/* ------ typography ----- */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-end-p1 {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-end-p2 {
  100% {
    transform: rotate(-360deg);
  }
}
/* Stroke animations */
@keyframes init-stroke {
  0% {
    stroke-dashoffset: 276.4608;
  }
  100% {
    stroke-dashoffset: 52.527552;
  }
}
@keyframes stroke-end {
  0% {
    stroke-dashoffset: 52.527552;
  }
  100% {
    stroke-dashoffset: 276.4608;
  }
}
.bx--loading {
  box-sizing: border-box;
  padding: 0;
  border: 0;
  margin: 0;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
  animation-duration: 690ms;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: rotate;
  animation-timing-function: linear;
  width: 5.5rem;
  height: 5.5rem;
}
.bx--loading *,
.bx--loading *::before,
.bx--loading *::after {
  box-sizing: inherit;
}
.bx--loading svg circle {
  animation-duration: 10ms;
  animation-name: init-stroke;
  animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
}
@media screen and (prefers-reduced-motion: reduce) {
  .bx--loading svg circle {
    animation: none;
  }
}
.bx--loading__svg {
  fill: transparent;
}
.bx--loading__svg circle {
  stroke-dasharray: 276.4608 276.4608;
  stroke-linecap: butt;
  stroke-width: 10;
}
.bx--loading__stroke {
  stroke: #0f62fe;
  stroke-dashoffset: 52.527552;
}
.bx--loading--small .bx--loading__stroke {
  stroke-dashoffset: 143.759616;
}
.bx--loading--stop {
  animation: rotate-end-p1 700ms cubic-bezier(0.2, 0, 1, 0.9) forwards, rotate-end-p2 700ms cubic-bezier(0.2, 0, 1, 0.9) 700ms forwards;
}
.bx--loading--stop svg circle {
  animation-delay: 700ms;
  animation-duration: 700ms;
  animation-fill-mode: forwards;
  animation-name: stroke-end;
  animation-timing-function: cubic-bezier(0.2, 0, 1, 0.9);
}
@media screen and (prefers-reduced-motion: reduce) {
  .bx--loading--stop svg circle {
    animation: none;
  }
}
.bx--loading--small {
  width: 1rem;
  height: 1rem;
}
.bx--loading--small circle {
  stroke-width: 16;
}
.bx--loading--small .bx--loading__svg {
  stroke: #0f62fe;
}
.bx--loading__background {
  stroke: #e0e0e0;
  stroke-dashoffset: -22;
}
@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
    circle.bx--loading__background {
      stroke-dasharray: 265;
      stroke-dashoffset: 0;
    }
  }
}
.bx--loading-overlay {
  position: fixed;
  z-index: z("overlay");
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background-color: rgba(22, 22, 22, 0.5);
  transition: background-color 720ms cubic-bezier(0.4, 0.14, 0.3, 1);
}
.bx--loading-overlay--stop {
  display: none;
}
@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
.bx--inline-loading {
  display: flex;
  width: 100%;
  min-height: 2rem;
  align-items: center;
}
.bx--inline-loading__text {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  color: #525252;
}
.bx--inline-loading__animation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
}
.bx--inline-loading__checkmark-container {
  fill: #198038;
}
.bx--inline-loading__checkmark-container.bx--inline-loading__svg {
  position: absolute;
  top: 0.75rem;
  width: 0.75rem;
}
.bx--inline-loading__checkmark-container[hidden] {
  display: none;
}
.bx--inline-loading__checkmark {
  animation-duration: 250ms;
  animation-fill-mode: forwards;
  animation-name: stroke;
  fill: none;
  stroke: #0f62fe;
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  stroke-width: 1.8;
  transform-origin: 50% 50%;
}
.bx--inline-loading--error {
  width: 1rem;
  height: 1rem;
  fill: #da1e28;
}
.bx--inline-loading--error[hidden] {
  display: none;
}
.bx--loading--small .bx--inline-loading__svg {
  stroke: #0f62fe;
}
/* If IE11 Don't show check animation */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .bx--inline-loading__checkmark-container {
    top: 1px;
    right: 0.5rem;
  }
  .bx--inline-loading__checkmark {
    animation: none;
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
  }
}
/* ----- Global ----- */
.bx--loading,
.bx--inline-loading {
  line-height: 1;
}
.bx--loading .bx--loading__stroke,
.bx--inline-loading .bx--loading__stroke {
  stroke: #785ea2;
}
.bx--loading .bx--loading__background,
.bx--inline-loading .bx--loading__background {
  stroke: #dde1e6;
}
.bx--loading.bx--loading--small,
.bx--inline-loading.bx--loading--small {
  height: 1rem;
  width: 1rem;
}
.bx--loading.bx--loading--small .bx--loading__svg,
.bx--inline-loading.bx--loading--small .bx--loading__svg {
  stroke: #785ea2;
}
.bx--loading .bx--loading__svg circle,
.bx--inline-loading .bx--loading__svg circle {
  stroke-linecap: round;
}
/* ----- Inline ----- */
.bx--inline-loading .bx--inline-loading__text {
  color: #3c3838;
  font-size: 0.875rem;
  letter-spacing: 0;
  line-height: 1.5rem;
}