body { background-color: #01364F; color: white; text-align: center; padding-top: 50px; } .form_group { display: flex; grid-row: auto; gap: 7px; } .otp-container { max-width: 500px; margin: 0 auto; background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); color: #01364F; } .otp-input-container { max-width: 500px; height: 60px; margin: 0 auto; display: flex; gap: 5px; align-items: center; justify-content: center; background-color: rgb(A0A, A0A, 999); } .otp-input { width: 40px; height: 40px; margin: 5px; text-align: center; font-size: 18px; border: 1px solid #01364F; border-radius: 15%; } .btn-validate { background-color: #01364F; color: white; width: 30%; border: none; padding: 10px; border-radius: 4px; font-size: 16px; margin-top: 20px; border-radius: 4%; } .btn-validate:hover { background-color: #02516B; border-radius: 2%; font-size: 15px; cursor: pointer; } .resend-link { color: #01364F; margin-top: 15px; display: block; } .sucess-notification { position: fixed; top: 10px; right: 20px; background-color: #4CAF50; /* Vert */ color: #fff; padding: 15px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); display: flex; align-items: center; } .sucess-notification i { margin-right: 5px; } .failed-notification { position: fixed; top: 10px; right: 20px; background-color: #3a0404; /* Vert */ color: #000; padding: 15px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); display: flex; align-items: center; } .failed-notification i { margin-right: 5px; } /* Style pour le conteneur OTP */ .otp-container { text-align: center; margin-top: 50px; } .otp-input { width: 50px; height: 50px; font-size: 24px; text-align: center; margin: 0 5px; border: 2px solid #ccc; border-radius: 5px; } .otp-input:focus { border-color: #007bff; outline: none; } /* Style pour le bouton de validation */ .btn-validate { margin-top: 20px; }