body,html{
    width: 100vw;
    overflow-x: hidden;
}
input.form-control{
    background-color: white;
    border: 1px solid rgba(128, 128, 128, 0.322);
}
#remember{
    -webkit-appearance: checkbox !important;
    margin-top: 3px;
    margin-right: 7px;
}
.font-small{
    font-size: small;
}
.font-larger{
    font-size: medium;
}
.special-underline{
    text-decoration: wavy;
}
.green-slash{
    background-color: #7DC400;
    height: 30vh;
    width: 4vw;
    transform: skewX(-45deg);
    position: absolute;
    z-index: -1;

}
.green-slash:nth-child(1){
    top: -5vh;
    left: 2vw;
}
.green-slash:nth-child(2){
    bottom: -5vh;
    right: 4vh;
}
.form-auth{
    transform: scale(0.9);
}
.info-div{
    background-color: #0D1B34;
    width: 50%;
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
}
.left-bottom, .left-top, .right-bottom, .right-top{
    position: absolute;
    z-index: -1;
    opacity: 0.6;

}
.left-bottom, .left-top{
    left: 0rem
}
.right-bottom, .right-top{
    right: 0rem;
}
.left-bottom, .right-bottom{
    bottom: 0rem
}
.left-top, .right-top{
    top: 0rem;
}

@media (max-width: 768px) {
    .info-div{
        display: none !important;
    }
    .green-slash{
        width: 40px;
    }
    
}


  /* The message box is shown when the user clicks on the password field */
  #pass-message {
    display:none;
   
    padding: 20px;
    margin-top: 10px;
  }
  
   #pass-message p {
    padding: 10px 35px;
    font-size: 18px;
  }
  
  /* Add a green text color and a checkmark when the requirements are right */
  #pass-message .valid {
    color: #7DC400;
  }
  
  #pass-message .valid:before {
    position: relative;
    left: -35px;
    content: "✔";
  }
  
  /* Add a red text color and an "x" when the requirements are wrong */
  #pass-message .invalid {
    color: rgba(255, 0, 0, 0.75);
  }
  
 #pass-message .invalid:before {
    position: relative;
    left: -35px;
    content: "✖";
  }
  .error-check::before{
    border-color: red !important;
  }