body, html {
  /* Leave height !!!
     Without it slash screen is not immediately painted on Safari
     do not put 100% because then screens like imprint or empty category have unnecessary scrollbar shown and are
     higher than needed */
  height: 80%;
  background-color: black;
  width: 100%;
  /* Disables pull-to-refresh but allows overscroll glow effects.
  more info: https://developers.google.com/web/updates/2017/11/overscroll-behavior */
  overscroll-behavior: contain;
}

body {
  position: relative;
}

p {
  margin: 0px;
  font-size: 22px;
}

*:focus {
  outline: 0 !important;
}

#card-body {
  background-color: rgba(255,255,255,.95);
}

.grecaptcha-badge{
  visibility: collapse !important;
}

.fade-enter-active,
.fade-leave-active {
  transition-duration: 0.2s;
  transition-property: opacity;
  transition-timing-function: ease;
}

.fade-enter,
.fade-leave-active {
  opacity: 0
}


.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition-duration: .2s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(.6, .58, .77, .77);
  overflow: hidden;
}

.slide-left-enter,
.slide-right-leave-active {
  transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
  transform: translate(-100%, 0);
}


.zoom-enter-active,
.zoom-leave-active {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: zoom;
}

.zoom-leave-active {
  animation-direction: reverse;
}

@keyframes zoom {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  100% {
    opacity: 1;
  }
}

.btn:active {
  background-color: transparent !important;
}