.background{
    background-color: #e7e7e7;
    width: 100%;
    height: 100vh;
    background-image: url('../img/bg_login.jpg');
    background-size: cover;
    background-position: center;
    /* background: repeating-linear-gradient(
  45deg,
  #fcdf07,
  #fcdf07 20px,
  #cab301 20px,
  #cab301 40px
); */
}
#modal_div{
  z-index: 1020;
}
.login-box{
    position: absolute;
    width: 450px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #50505050;
    color: rgb(41, 41, 41);
}

.form{
    position: relative;
}

.lock{
    position: absolute;
    font-size: 7rem;
    top: -12rem;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
}
input, button {
    opacity: 70%;
}

.blad{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    padding: 0.5rem 1.25rem;
    margin-bottom: .5rem;
    color: rgb(255, 245, 157);
    border: 1px solid rgb(255, 245, 157);
    border-radius: 0.25rem;
    /* visibility: hidden; */
    display: none;
}

.shake{
    animation: shake .8s cubic-bezier(.36,.07,.19,.97) both;
    /* transform: translate3d(0, 0, 0); */
    backface-visibility: hidden;
    perspective: 1000px; 
}

@keyframes shake{
    10%, 90% {
        transform: translateX(-52%);       }
      
      20%, 80% {
        transform: translateX(-48%);       }
    
      30%, 50%, 70% {
        transform: translateX(-52%);       }
    
      40%, 60% {
        transform: translateX(-48%);       }
    }

@media (max-width: 768px) {
  .login-box{
    width: 90%;
  }
}