form, .page-footer {
  background-image: url(/img/background/red.jpg);
}

form.overflow {
  position: relative;
}

form.centerflow {
  height: 100vh;
}

form.centerflow .valign-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.overflow .scroll-info {
  display: none !important;
}

.scroll-info {
  position: absolute;
  bottom: 6.5rem;
  left: 0;
  right: 0;
  text-align: center;
  height: 0;
}

.scroll-info>i {
  font-size: 6.5rem;
  opacity: .7;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.12);
  transition: 400ms opacity;
  user-select: none;
  cursor: pointer;
}

.scroll-info>i:hover {
  opacity: 1;
}

.title * {
  text-shadow: 0 8px 17px rgba(0, 0, 0, 0.14), 0 3px 14px rgba(0, 0, 0, 0.12);
  line-height: 1.3;
}

.btn.progress {
  margin: 0;
  width: unset;
}

.btn.progress .indeterminate {
  display: none;
  background-color: rgba(0, 0, 0, 0.22);
}

.btn.progress:disabled .indeterminate {
  display: block;
}

.logo-icon {
  padding: 0.2em 0.25em 0.3em;
  border-radius: 100%;
  display: inline-block;
  text-shadow: rgb(175, 0, 23) 0px 0px 2px, rgb(175, 0, 23) 2px 2px 2px, rgb(175, 0, 23) 4px 4px 2px, rgb(175, 0, 23) 6px 6px 2px, rgb(175, 0, 23) 8px 8px 2px, rgb(175, 0, 23) 10px 10px 2px, rgb(175, 0, 23) 12px 12px 2px, rgb(175, 0, 23) 14px 14px 2px, rgb(175, 0, 23) 16px 16px 2px, rgb(175, 0, 23) 18px 18px 2px, rgb(175, 0, 23) 20px 20px 2px, rgb(175, 0, 23) 22px 22px 2px, rgb(175, 0, 23) 24px 24px 2px, rgb(175, 0, 23) 26px 26px 2px, rgb(175, 0, 23) 28px 28px 2px, rgb(175, 0, 23) 30px 30px 2px, rgb(175, 0, 23) 32px 32px 2px, rgb(175, 0, 23) 34px 34px 2px, rgb(175, 0, 23) 36px 36px 2px, rgb(175, 0, 23) 38px 38px 2px, rgb(175, 0, 23) 40px 40px 2px, rgb(175, 0, 23) 42px 42px 2px, rgb(175, 0, 23) 44px 44px 2px, rgb(175, 0, 23) 46px 46px 2px, rgb(175, 0, 23) 48px 48px 2px, rgb(175, 0, 23) 50px 50px 2px, rgb(175, 0, 23) 52px 52px 2px, rgb(175, 0, 23) 54px 54px 2px, rgb(175, 0, 23) 56px 56px 2px, rgb(175, 0, 23) 58px 58px 2px, rgb(175, 0, 23) 60px 60px 2px, rgb(175, 0, 23) 62px 62px 2px, rgb(175, 0, 23) 64px 64px 2px, rgb(175, 0, 23) 66px 66px 2px, rgb(175, 0, 23) 68px 68px 2px, rgb(175, 0, 23) 70px 70px 2px, rgb(175, 0, 23) 72px 72px 2px, rgb(175, 0, 23) 74px 74px 2px, rgb(175, 0, 23) 76px 76px 2px, rgb(175, 0, 23) 78px 78px 2px;
  font-size: 6rem;
  overflow: hidden;
  background-color: #cc142c !important;
  color: white;
  user-select: none;
}

div.logo-icon {
  font-size: 2rem;
  height: 3em;
  width: 3em;
  line-height: 2.55em;
  font-weight: 600;
  text-align: center;
}

.logo-icon.bapp::before {
  content: 'bapp'
}

.info-bars>* {
  padding: 3rem 0;
  font-size: 16px;
  text-align: center;
  min-height: 220px;
  display: flex;
  align-items: center;
}

.info-even {
  background-image: url(/img/background/white.jpg);
}

.info-odd {
  background-image: url(/img/background/grey.jpg);
  color: white;
}

.info-black {
  background-image: url(/img/background/black.jpg);
  color: white;
}

.info-bars img {
  width: 420px;
  max-width: 100% !important;
  object-fit: contain;
  vertical-align: middle;
  padding: 10px;
}

.info-text {
  width: calc(100% - 420px);
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  padding: 0 1em;
}

footer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 !important;
  padding: 0 !important;
  color: white;
}

footer a {
  color: white;
}

footer a:hover {
  text-decoration: underline;
}

noscript {
  margin: 0 !important;
  padding: 0 !important;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 1em 2em !important;
}

footer li {
  float: left;
  display: inline-block;
  padding: 0 1em .6em;
}

.page-footer, #footer-measure {
  margin-top: 0 !important;
}

.valign-wrapper {
  height: 100%;
}

.card.main {
  padding: .4em 1em;
  margin: 1em;
}

.row {
  width: 100%;
  position: relative;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.main h5 {
  margin-top: 20px;
  margin-bottom: 5px;
}

.info, label {
  color: rgba(0, 0, 0, 0.7);
  margin-top: 0 !important;
  margin-bottom: .4em !important;
}

.input-field {
  margin: .5rem;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.login-alternative {
  display: none;
  font-size: 1.1em;
  margin-top: 10px;
}

.col-btn {
  margin-top: 1em;
}

#loggedoff {
  display: inline-block;
  margin: 1em 0 0;
  padding: 18px 40px;
}

#recaptcha {
  z-index: 10;
  position: relative;
}

form, .page-footer, .info-bars>* {
  background-size: cover;
  background-attachment: fixed;
}

@media only screen and (max-width: 900px) {
  .title h1 {
    margin-top: 1rem;
  }

  .title h3 {
    font-size: 2rem;
  }

  .info-text {
    width: 100%;
    display: block;
  }

  .info-bars>* {
    padding: 2em 0;
  }

  .scroll-info {
    bottom: 3.2rem;
  }

  .scroll-info>i {
    font-size: 4rem;
  }

  .login-alternative {
    display: block;
  }
}