@keyframes blink-animation-error {
  0% {
    background-color: var(--fcr_ui_scene_ramp_red5);
  }
  50% {
    background-color: var(--fcr_ui_scene_ramp_red3);
  }
  100% {
    background-color: var(--fcr_ui_scene_ramp_red5);
  }
}

.fcr-blinking {
  height: 100%;
  width: 100%;
  padding: 0px 0 10px;
  border: 0.5px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 10px;
  color: var(--fcr_ui_scene_white10);
  line-height: 10px;

  border-top-left-radius: var(--fcr_cornerradius_m);
  border-top-right-radius: var(--fcr_cornerradius_m);

  margin-bottom: -10px;

  min-height: calc(26px + 10px);

  position: relative;
}

.fcr-blink--error {
  animation: blink-animation-error 1s 4;
  animation-fill-mode: forwards;
}

.fcr-blink--error span {
  font-weight: 400;
}

@keyframes slide-fade-in {
  0% {
    opacity: 0;
    transform: translateY(32px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-fade-out {
  0% {
    opacity: 1;
    margin-bottom: -10px;
  }
  100% {
    opacity: 0;
    margin-bottom: -42px;
  }
}

.fcr-notice-animation-out {
  animation: slide-fade-out 1s forwards;
  animation-fill-mode: forwards;
}

.fcr-slide--warn {
  background-color: var(--fcr_ui_scene_ramp_yellow6);
  color: var(--fcr_ui_scene_black8);
}

.fcr-slide--info {
  background-color: var(--fcr_notice_bg);
}

.fcr-notice-animation-in {
  animation: slide-fade-in 1s forwards;
  animation-fill-mode: forwards;
}