.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:100}.modal,.modal-overlay{display:flex;justify-content:center;align-items:center}.modal{position:relative;width:350px;height:400px;background-color:#dedede;padding:20px;border-radius:5px;flex-direction:column;gap:3rem}.close-button{position:absolute;top:10px;right:10px;background-color:transparent;border:none;cursor:pointer}.logo_container{display:flex;justify-content:center;align-items:center;& img{display:block;width:50%}}form{display:flex;flex-direction:column;width:100%;gap:2rem;position:relative;& label{width:100%;display:flex;align-items:center;justify-content:center}& label span{position:absolute;left:0;padding:3rem;pointer-events:none;font-size:.7em;color:#a7a7a7;text-transform:uppercase;transition:.2s}& input:focus~span,& input:valid~span{color:#b99aee;transform:translateX(40px) translateY(-20px);font-size:.65em;padding:0 10px;background:#b99aee;color:#fff;border-radius:2px}}input{width:80%;padding:.6rem .5rem;border-radius:5px;-moz-appearance:none;appearance:none;-webkit-appearance:none;border:1px solid #a7a7a7;background-color:transparent;color:#6031ae;outline:none;font-size:1em}input:focus{border:1px solid #7a52bc}.login_btn{max-width:150px;padding:10px 20px;margin:0 auto;background-color:#7a52bc;color:#fff;border:none;border-radius:5px;cursor:pointer}.login_btn:hover{background-color:#0056b3}