//login page
div.login-form {
  background: white;
  box-shadow: 0px 0px 8px 0px rgba(211, 211, 211, 0.32);
  border: 1px solid white;
  form {
    margin: 0 auto;
    padding: 30px;
  }
}

.login-pg {
  height: 100%;
  position: relative;
  background-color: $blue;
  testnet-warning {
    top: 100px;
    position: relative;
  }
  maintenance-warning {
    top: 100px;
    position: relative;
    i {
      color: $dandelion;
    }
    > div {
      background-color: $moccasin;
    }
  }
  nav {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
  }
}

@mixin block-login {
  height: 100%;
  overflow: auto !important;
  display: block !important;
  nav {
    position: relative !important;
  }
  > div {
    display: block !important;
  }
  .login-box-container {
    margin-top: 0px;
  }
  .login-box {
    max-height: none !important;
  }
}

body {
  .login-pg {
    &.display-block {
      @include block-login;
    }
    @media (max-height: 700px) {
      @include block-login;
    }
    @media (max-width: 767px) {
      @include block-login;
    }
  }
}

html, body {
  position: relative;
}

.login-box {
  background-color: white;
  padding: 35px 40px 30px 40px;
  width: 550px;
  box-shadow: 0px 0px 20px -8px black;
  max-height: 600px;
  overflow: auto;
  header {
    border-bottom: 1px solid $border-grey;
  }
  footer {
    border: 1px solid $border-grey;
    padding-left: 10px;
    padding-right: 10px;
  }
  .form-horizontal .form-group {
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
  }
  input[type='checkbox'] { margin: 0; }
  .step { right: 20px; top: 10px; }
}

#verify-recovery {
  img {
     height: 50px;
     align: left;
     margin-right: 10px;
  }
  pre {
    -webkit-user-select: none;
    user-select: none;
  }
}

.versions {
  position: absolute;
  bottom: 10px;
  right: 15px;
  a {
    opacity: 0.6;
    color: white !important;
    text-decoration: none !important;
    &:hover {
      opacity: 1;
    }
  }
  @media screen and (max-width: 767px), screen and (max-height: 600px) {
    position: relative;
    margin-bottom: 20px;
    margin-top: 20px;
    bottom: initial;
    right: initial;
  }
}

@media (max-width: 620px) {
  .login-box {
    width: 100%;
    min-width: 0;
  }
}

.recover-funds {
  .rf-step-2 .flex-center .button-muted{
      min-height: 45px;
  }
}
