.cmf-core-controls-visual-data-delta-arrow-wrapper {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cmf-core-controls-visual-data-delta-arrow-wrapper.blurred {
  -webkit-filter: blur(30px);
          filter: blur(30px);
}
.cmf-core-controls-visual-data-delta-arrow-wrapper > .display-main-container {
  width: 75%;
  height: 100%;
  margin: auto;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
.cmf-core-controls-visual-data-delta-arrow-wrapper > .display-main-container > .arrow {
  -webkit-box-flex: 3;
          flex: 3;
  -webkit-box-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
.cmf-core-controls-visual-data-delta-arrow-wrapper > .display-main-container > .arrow.with-animation > .arrow-icon {
  -webkit-transition: color 0.5s linear 0s;
  transition: color 0.5s linear 0s;
}
.cmf-core-controls-visual-data-delta-arrow-wrapper > .display-main-container > .arrow.with-animation.up {
  -webkit-animation-name: arrowup;
          animation-name: arrowup;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
.cmf-core-controls-visual-data-delta-arrow-wrapper > .display-main-container > .arrow.with-animation.down {
  -webkit-animation-name: arrowdown;
          animation-name: arrowdown;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
.cmf-core-controls-visual-data-delta-arrow-wrapper > .display-main-container > .arrow.up {
  -webkit-transform: scale(1.35) translateY(10%) rotate(0deg);
          transform: scale(1.35) translateY(10%) rotate(0deg);
}
.cmf-core-controls-visual-data-delta-arrow-wrapper > .display-main-container > .arrow.down {
  -webkit-transform: scale(1.35) rotate(180deg);
          transform: scale(1.35) rotate(180deg);
}
@-webkit-keyframes arrowup {
  from {
    opacity: 0;
    -webkit-transform: scale(1.35) translateY(20%) rotate(0deg);
            transform: scale(1.35) translateY(20%) rotate(0deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1.35) translateY(10%) rotate(0deg);
            transform: scale(1.35) translateY(10%) rotate(0deg);
  }
}
@keyframes arrowup {
  from {
    opacity: 0;
    -webkit-transform: scale(1.35) translateY(20%) rotate(0deg);
            transform: scale(1.35) translateY(20%) rotate(0deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1.35) translateY(10%) rotate(0deg);
            transform: scale(1.35) translateY(10%) rotate(0deg);
  }
}
@-webkit-keyframes arrowdown {
  from {
    opacity: 0;
    -webkit-transform: scale(1.35) translateY(-10%) rotate(180deg);
            transform: scale(1.35) translateY(-10%) rotate(180deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1.35) rotate(180deg);
            transform: scale(1.35) rotate(180deg);
  }
}
@keyframes arrowdown {
  from {
    opacity: 0;
    -webkit-transform: scale(1.35) translateY(-10%) rotate(180deg);
            transform: scale(1.35) translateY(-10%) rotate(180deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1.35) rotate(180deg);
            transform: scale(1.35) rotate(180deg);
  }
}
.cmf-core-controls-visual-data-delta-arrow-wrapper > .display-main-container > .delta-percentage {
  -webkit-box-flex: 2;
          flex: 2;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
}
.cmf-core-controls-visual-data-delta-arrow-wrapper > .display-main-container > .delta-percentage > .text {
  font-family: "open-sans-semibold";
  text-align: center;
  white-space: nowrap;
}
.cmf-core-controls-visual-data-delta-arrow-wrapper > .display-main-container > .delta-percentage > .text > .light {
  font-family: "open-sans-light";
}