.forAnimation {
  opacity: 0;
}
.toAnimate {
  opacity: 1;
}
.animateChar {
  animation: animText 1s ease-out 1 both;
  display: inline-block;
}
.animateString {
  animation: animPhrase 1s ease-out 1 both;
  display: inline-block;
}
.animateBox {
  animation: animElement 1s ease-out 1 both;
}
@keyframes animText {
  from {
    opacity: 0;
    transform: translate3d(-35px, 0px, -150px) rotate3d(1, -1, 0, -70deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes animPhrase {
  from {
    opacity: 0;
    transform: translate3d(-50px, 0px, 0px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes animElement {
  from {
    opacity: 0;
    transform: translate3d(-70px, 0px, -150px) rotate3d(1, -1, 0, 25deg) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
#contentonecolumn > .content,
#contenttwocolumns > .content {
  animation-duration: 1s;
  animation-name: fadeInPanel;
}
@keyframes fadeInPanel {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
  }
}
#infodetailsinfo,
#infodetailsicon,
.iconsalert,
.alertboxtext {
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-name: leFadeInLeft;
}
.iconsalert img {
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-name: growFromRight;
}
@keyframes leFadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
  }
}
@keyframes growFromRight {
  from {
    opacity: 0;
    transform: scale(40%) translateX(60px);
  }
  to {
    opacity: 1;
  }
}
.x-grid:not(.x-tree-panel) {
  animation-duration: 0.2s;
  animation-name: fadeInGridRow;
  overflow: hidden;
  transform-origin: top;
}
@keyframes fadeInGridRow {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
  }
}
.formRowInputTD {
  animation-duration: 0.5s;
  animation-name: fadeIn;
}
.formRowLabelTD {
  animation-duration: 0.5s;
  animation-name: fadeIn;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.formSubtitle {
  animation-duration: 0.8s;
  animation-name: fadeInFormSubTitle;
}
@keyframes fadeInFormSubTitle {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
  }
}
.x-mask-msg {
  animation-duration: 1s;
  animation-name: fadeInMaskMessage;
}
@keyframes fadeInMaskMessage {
  from {
    opacity: 0;
    transform: translateY(-30px);
    transform: scale(0.8);
  }
  to {
    opacity: 1;
  }
}
.x-window {
  animation-duration: 0.5s;
  animation-name: fadeInWindow;
}
@keyframes fadeInWindow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#menuBOX .fontfirstlevel {
  animation-duration: 1.5s;
  animation-name: fadeUp;
}
#menuBOX .fontsecondlevel {
  animation-duration: 1s;
  animation-name: fadeUp;
}
.loading,
.loading iframe {
  animation-duration: 1s;
  animation-name: fadeUp;
}
@keyframes fadeUp {
  from {
    opacity: 0.5;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
  }
}
.centertwobuttons ul {
  overflow: hidden;
}
.centertwobuttons ul p {
  animation-duration: 3s;
  animation-name: fadeNoteWithLeftBorder;
}
.tippy-tooltip {
  animation-duration: 0.5s;
  animation-name: fadeUp;
}
@keyframes fadeNoteWithLeftBorder {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
  }
}
.filtersArea {
  overflow: hidden;
}
.filtersArea .filterElement.visible,
.clearFilters,
.x-tab,
.actionstab > ul > li {
  opacity: 0;
  animation-duration: 0.5s;
  animation-name: fadeUp;
  animation-delay: 0.4s;
  animation-fill-mode: forwards;
  transition: transform 0.3s;
}
.filtersArea .filterElement.visible:nth-child(1),
.x-tab:nth-child(1),
.actionstab > ul > li:nth-child(1) {
  animation-delay: 0s;
}
.filtersArea .filterElement.visible:nth-child(2),
.x-tab:nth-child(2),
.actionstab > ul > li:nth-child(2) {
  animation-delay: 0.1s;
}
.filtersArea .filterElement.visible:nth-child(3),
.x-tab:nth-child(3),
.actionstab > ul > li:nth-child(3) {
  animation-delay: 0.2s;
}
.filtersArea .filterElement.visible:nth-child(4),
.x-tab:nth-child(4),
.actionstab > ul > li:nth-child(4) {
  animation-delay: 0.3s;
}
.footnote ul li {
  animation-duration: 0.5s;
  animation-name: fadeDown;
  animation-delay: 0.4s;
}
.footnote ul li:nth-child(1) {
  animation-delay: 0s;
}
.footnote ul li:nth-child(2) {
  animation-delay: 0.1s;
}
.footnote ul li:nth-child(3) {
  animation-delay: 0.2s;
}
.footnote ul li:nth-child(4) {
  animation-delay: 0.3s;
}
.stampTarget::after {
  animation-duration: 0.5s;
  animation-name: fadeUp;
}
.alertify .ajs-modal {
  animation: fadeRight 0.3s forwards !important;
}
.alertify .ajs-dialog {
  animation: fadeRight 0.3s forwards !important;
}
.x-window {
  animation: fadeRight 0.3s forwards !important;
}
@keyframes fadeUpToOpacity25 {
  from {
    opacity: 0.1;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 0.25;
  }
}