/* ------ buttons ----- */
/* ------ typography ----- */
:root {
  --cds-layer: var(--cds-layer-01, #f4f4f4);
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
  --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
  --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
  --cds-field: var(--cds-field-01, #f4f4f4);
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
  --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
}
.cds--layer-one {
  --cds-layer: var(--cds-layer-01, #f4f4f4);
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
  --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
  --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
  --cds-field: var(--cds-field-01, #f4f4f4);
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
  --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
}
.cds--layer-two {
  --cds-layer: var(--cds-layer-02, #ffffff);
  --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
  --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
  --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
  --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
  --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
  --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
  --cds-field: var(--cds-field-02, #ffffff);
  --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
  --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
  --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
}
.cds--layer-three {
  --cds-layer: var(--cds-layer-03, #f4f4f4);
  --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
  --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
  --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
  --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0);
  --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1);
  --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
  --cds-field: var(--cds-field-03, #f4f4f4);
  --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
  --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
  --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
  --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
}
.cds--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;
}
.cds--loading *,
.cds--loading *::before,
.cds--loading *::after {
  box-sizing: inherit;
}
.cds--loading svg circle {
  animation-duration: 10ms;
  animation-name: init-stroke;
  animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
}
@media screen and (prefers-reduced-motion: reduce) {
  .cds--loading svg circle {
    animation: none;
  }
}
.cds--loading__svg {
  fill: transparent;
}
.cds--loading__svg circle {
  stroke-dasharray: 276.4608 276.4608;
  stroke-linecap: butt;
  stroke-width: 10;
}
.cds--loading__stroke {
  stroke: var(--cds-interactive, #0f62fe);
  stroke-dashoffset: 52.527552;
}
.cds--loading--small .cds--loading__stroke {
  stroke-dashoffset: 143.759616;
}
.cds--loading--stop {
  animation: rotate-end-p1 700ms cubic-bezier(0, 0, 0.25, 1) forwards, rotate-end-p2 700ms cubic-bezier(0, 0, 0.25, 1) 700ms forwards;
}
.cds--loading--stop svg circle {
  animation-delay: 700ms;
  animation-duration: 700ms;
  animation-fill-mode: forwards;
  animation-name: stroke-end;
  animation-timing-function: cubic-bezier(0, 0, 0.25, 1);
}
@media screen and (prefers-reduced-motion: reduce) {
  .cds--loading--stop svg circle {
    animation: none;
  }
}
.cds--loading--small {
  width: 1rem;
  height: 1rem;
}
.cds--loading--small circle {
  stroke-width: 16;
}
.cds--loading--small .cds--loading__svg {
  stroke: var(--cds-interactive, #0f62fe);
}
.cds--loading__background {
  stroke: var(--cds-layer-accent);
  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.cds--loading__background {
      stroke-dasharray: 265;
      stroke-dashoffset: 0;
    }
  }
}
.cds--loading-overlay {
  position: fixed;
  z-index: 6000;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
  transition: background-color 700ms cubic-bezier(0.4, 0.14, 0.3, 1);
}
.cds--loading-overlay--stop {
  display: none;
}
@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;
  }
}
@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
.cds--inline-loading {
  display: flex;
  width: 100%;
  min-height: 2rem;
  align-items: center;
}
.cds--inline-loading__text {
  font-size: var(--cds-label-01-font-size, 0.75rem);
  font-weight: var(--cds-label-01-font-weight, 400);
  line-height: var(--cds-label-01-line-height, 1.33333);
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
  color: var(--cds-text-secondary, #525252);
}
.cds--inline-loading__animation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
}
.cds--inline-loading__checkmark-container {
  fill: var(--cds-support-success, #24a148);
}
.cds--inline-loading__checkmark-container.cds--inline-loading__svg {
  position: absolute;
  top: 0.75rem;
  width: 0.75rem;
}
.cds--inline-loading__checkmark-container[hidden] {
  display: none;
}
.cds--inline-loading__checkmark {
  animation-duration: 250ms;
  animation-fill-mode: forwards;
  animation-name: stroke;
  fill: none;
  stroke: var(--cds-interactive, #0f62fe);
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  stroke-width: 1.8;
  transform-origin: 50% 50%;
}
.cds--inline-loading--error {
  width: 1rem;
  height: 1rem;
  fill: var(--cds-support-error, #da1e28);
}
.cds--inline-loading--error[hidden] {
  display: none;
}
.cds--loading--small .cds--inline-loading__svg {
  stroke: var(--cds-interactive, #0f62fe);
}
/* If IE11 Don't show check animation */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .cds--inline-loading__checkmark-container {
    top: 1px;
    right: 0.5rem;
  }
  .cds--inline-loading__checkmark {
    animation: none;
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
  }
}
.cds--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;
}
.cds--loading *,
.cds--loading *::before,
.cds--loading *::after {
  box-sizing: inherit;
}
.cds--loading svg circle {
  animation-duration: 10ms;
  animation-name: init-stroke;
  animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
}
@media screen and (prefers-reduced-motion: reduce) {
  .cds--loading svg circle {
    animation: none;
  }
}
.cds--loading__svg {
  fill: transparent;
}
.cds--loading__svg circle {
  stroke-dasharray: 276.4608 276.4608;
  stroke-linecap: butt;
  stroke-width: 10;
}
.cds--loading__stroke {
  stroke: var(--cds-interactive, #0f62fe);
  stroke-dashoffset: 52.527552;
}
.cds--loading--small .cds--loading__stroke {
  stroke-dashoffset: 143.759616;
}
.cds--loading--stop {
  animation: rotate-end-p1 700ms cubic-bezier(0, 0, 0.25, 1) forwards, rotate-end-p2 700ms cubic-bezier(0, 0, 0.25, 1) 700ms forwards;
}
.cds--loading--stop svg circle {
  animation-delay: 700ms;
  animation-duration: 700ms;
  animation-fill-mode: forwards;
  animation-name: stroke-end;
  animation-timing-function: cubic-bezier(0, 0, 0.25, 1);
}
@media screen and (prefers-reduced-motion: reduce) {
  .cds--loading--stop svg circle {
    animation: none;
  }
}
.cds--loading--small {
  width: 1rem;
  height: 1rem;
}
.cds--loading--small circle {
  stroke-width: 16;
}
.cds--loading--small .cds--loading__svg {
  stroke: var(--cds-interactive, #0f62fe);
}
.cds--loading__background {
  stroke: var(--cds-layer-accent);
  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.cds--loading__background {
      stroke-dasharray: 265;
      stroke-dashoffset: 0;
    }
  }
}
.cds--loading-overlay {
  position: fixed;
  z-index: 6000;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
  transition: background-color 700ms cubic-bezier(0.4, 0.14, 0.3, 1);
}
.cds--loading-overlay--stop {
  display: none;
}
@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;
  }
}
.cds--inline-loading {
  display: flex;
  width: 100%;
  min-height: 2rem;
  align-items: center;
}
.cds--inline-loading__text {
  font-size: var(--cds-label-01-font-size, 0.75rem);
  font-weight: var(--cds-label-01-font-weight, 400);
  line-height: var(--cds-label-01-line-height, 1.33333);
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
  color: var(--cds-text-secondary, #525252);
}
.cds--inline-loading__animation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
}
.cds--inline-loading__checkmark-container {
  fill: var(--cds-support-success, #24a148);
}
.cds--inline-loading__checkmark-container.cds--inline-loading__svg {
  position: absolute;
  top: 0.75rem;
  width: 0.75rem;
}
.cds--inline-loading__checkmark-container[hidden] {
  display: none;
}
.cds--inline-loading__checkmark {
  animation-duration: 250ms;
  animation-fill-mode: forwards;
  animation-name: stroke;
  fill: none;
  stroke: var(--cds-interactive, #0f62fe);
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  stroke-width: 1.8;
  transform-origin: 50% 50%;
}
.cds--inline-loading--error {
  width: 1rem;
  height: 1rem;
  fill: var(--cds-support-error, #da1e28);
}
.cds--inline-loading--error[hidden] {
  display: none;
}
.cds--loading--small .cds--inline-loading__svg {
  stroke: var(--cds-interactive, #0f62fe);
}
/* If IE11 Don't show check animation */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .cds--inline-loading__checkmark-container {
    top: 1px;
    right: 0.5rem;
  }
  .cds--inline-loading__checkmark {
    animation: none;
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
  }
}
/* ----- Global ----- */
.cds--loading,
.cds--inline-loading {
  line-height: 1;
}
.cds--loading .cds--loading__stroke,
.cds--inline-loading .cds--loading__stroke {
  stroke: var(--msk-color-border-progress-filled, #785ea2);
}
.cds--loading .cds--loading__background,
.cds--inline-loading .cds--loading__background {
  stroke: var(--msk-color-border-progress, #dde1e6);
}
.cds--loading.cds--loading--small,
.cds--inline-loading.cds--loading--small {
  height: 1rem;
  width: 1rem;
}
.cds--loading.cds--loading--small .cds--loading__svg,
.cds--inline-loading.cds--loading--small .cds--loading__svg {
  stroke: var(--msk-color-border-progress-filled, #785ea2);
}
.cds--loading .cds--loading__svg circle,
.cds--inline-loading .cds--loading__svg circle {
  stroke-linecap: round;
}
/* ----- Inline ----- */
.cds--inline-loading .cds--inline-loading__text {
  color: var(--msk-color-content-secondary, #3c3838);
  font-size: 0.875rem;
  letter-spacing: 0;
  line-height: 1.5rem;
}