@import "./ui.css"; .container { display: flex; flex-direction: column; min-height: 100vh; justify-content: center; align-items: center; padding: 2rem; position: relative; background: #ffffff; background: linear-gradient(0deg,rgba(255, 255, 255, 1) 90%, rgba(30, 144, 255, 1) 100%); background-image: url(/static/overlay.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; } .modal-box { background-color: white; padding: 2rem; border-radius: 8px; border: 1px solid #ddd; max-width: 400px; width: 100%; z-index: 1; } .modal-title { font-size: 28px; font-weight: 600; margin-bottom: 5px; } .modal-description { font-size: 16px; font-weight: 400; margin-bottom: 15px; } .form { margin-top: 25px; } .validation_box { display: none; width: 100%; padding: 5px; background: #D0000011; border: 1px solid #D00000aa; border-radius: 5px; margin: 10px 0; } .validation_box__msg { color: #111; font-size: 0.85rem; } .success_box { display: none; width: 100%; padding: 5px; background: #6AB54711; border: 1px solid #6AB547aa; border-radius: 5px; margin: 10px 0; } .success_box__msg { color: #111; font-size: 0.85rem; } .login_link { font-size: 0.8rem; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; margin: 20px 0 15px; } .login_link > a { padding-left: 4px; } @media only screen and (max-width: 450px) { .container { padding: 0; margin: 0; width: 100vw; height: 100vh; min-width: 100vw; } .modal-box { flex: 1; width: 100vw; min-width: 100vw; height: 100vh; padding: 20px; padding-top: 50px; } }