@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
main.se-login a.button div.info-wrap:before {
  transition: transform 0.3s ease-in-out;
}

a, a:hover, a.button, a.links, form, button, input, footer {
  transition: all 0.2s ease;
}

div.input-wrap, div.tooltip-window, div.bokeh-wrap {
  transition: all 0.2s ease;
}

button.copy {
  transition: transform 0.1s ease-in-out;
}

div.se-connected section.half-left {
  transition: width 1s ease;
}

svg.badge {
  animation: badge-spin 10s linear infinite;
}

div.float {
  animation: logo-hover 2s ease-in-out infinite alternate;
}

@keyframes badge-spin {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes logo-hover {
  to {
    transform: translateY(-10px);
  }
}
main.se-login a.button:not(.button-connected):hover:after {
  opacity: 1;
}
main.se-login a.button:not(.button-connected):hover div.info-wrap:before {
  transform: translateX(0px);
}

a.button:hover svg.arrow, a.logout:hover svg.arrow, button.input-button:hover svg.arrow {
  animation: arrow-shift 0.5s ease-in-out infinite alternate;
}

@keyframes arrow-shift {
  100% {
    transform: translateX(5px);
  }
}
.se-connected section.half-left {
  --time-enter: .25s;
  animation: half-exit 1s ease forwards;
}
@keyframes half-exit {
  to {
    transform: translateX(-40%);
  }
}
.se-connected section.half-left main.se-login svg.nanitabs-logo {
  animation: fade-out var(--time-enter) ease forwards;
}
.se-connected section.half-left main.se-login div.title-wrap, .se-connected section.half-left main.se-login div.subtitle-wrap {
  animation: fade-out var(--time-enter) 0.1s ease forwards;
}
.se-connected section.half-left main.se-login div.dots {
  animation: fade-out var(--time-enter) 0.15s ease forwards;
}
.se-connected section.half-left main.se-login .button-wrap {
  animation: fade-out var(--time-enter) 0.2s ease forwards;
}
.se-connected section.half-left main.se-platforms div.info-wrap {
  animation: fade-in 1s 0.5s ease backwards;
}
.se-connected section.half-left main.se-platforms .button-wrap > *:nth-child(1) {
  animation: fade-in 1s ease backwards;
  animation-delay: 0.55s;
}
.se-connected section.half-left main.se-platforms .button-wrap > *:nth-child(2) {
  animation: fade-in 1s ease backwards;
  animation-delay: 0.6s;
}
.se-connected section.half-left main.se-platforms .button-wrap > *:nth-child(3) {
  animation: fade-in 1s ease backwards;
  animation-delay: 0.65s;
}
.se-connected section.half-left main.se-platforms .button-wrap > *:nth-child(4) {
  animation: fade-in 1s ease backwards;
  animation-delay: 0.7s;
}
.se-connected section.half-left main.se-platforms .button-wrap > *:nth-child(5) {
  animation: fade-in 1s ease backwards;
  animation-delay: 0.75s;
}
.se-connected section.half-left main.se-platforms .button-wrap > *:nth-child(6) {
  animation: fade-in 1s ease backwards;
  animation-delay: 0.8s;
}
.se-connected section.half-left main.se-platforms .button-wrap > *:nth-child(7) {
  animation: fade-in 1s ease backwards;
  animation-delay: 0.85s;
}
.se-connected section.half-left main.se-platforms .button-wrap > *:nth-child(8) {
  animation: fade-in 1s ease backwards;
  animation-delay: 0.9s;
}
.se-connected section.half-left main.se-platforms .button-wrap > *:nth-child(9) {
  animation: fade-in 1s ease backwards;
  animation-delay: 0.95s;
}
.se-connected section.half-left main.se-platforms .button-wrap > *:nth-child(10) {
  animation: fade-in 1s ease backwards;
  animation-delay: 1s;
}

.se-connected section.half-right {
  animation: half-enter 1s ease forwards;
}
@keyframes half-enter {
  to {
    transform: translateX(0px);
  }
}