/* LOGIN FORM */
.username {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6e707e;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d1d3e2;
    border-radius: 0.35rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .username {
      transition: none;
    }
  }
  
  .username::-ms-expand {
    background-color: transparent;
    border: 0;
  }
  
  .username:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #6e707e;
  }
  
  .username:focus {
    color: #6e707e;
    background-color: #fff;
    border-color: #bac8f3;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
  }
  
  .username::-webkit-input-placeholder {
    color: #858796;
    opacity: 1;
  }
  
  .username::-moz-placeholder {
    color: #858796;
    opacity: 1;
  }
  
  .username:-ms-input-placeholder {
    color: #858796;
    opacity: 1;
  }
  
  .username::-ms-input-placeholder {
    color: #858796;
    opacity: 1;
  }
  
  .username::placeholder {
    color: #858796;
    opacity: 1;
  }
  
  .username:disabled, .username[readonly] {
    background-color: #eaecf4;
    opacity: 1;
  }
/* */
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .overlay img {
        position: absolute;
        top: 50%;
        left: 17%;
        transform: translate(-50%, -90%);
        max-width: 80%;
        max-height: 65%;
    }

    @media (max-width: 1700px) {
        .overlay img {
            top: 50%;
            left: 10%;
        }
    }

    @media (max-width: 560px) {
        .overlay img {
            display: none;
        }
    }