.profile-details-container{display:flex;flex-direction:column;justify-content:center;align-items:center}
form.details-container{width:100%;display:flex;flex-direction:column;gap:63px;margin:0 auto}
form.details-container .section h2{font-family:'Inter' !important;font-weight:700;font-style:Bold;font-size:20px;line-height:100%;letter-spacing:0}
.section{display:flex;flex-direction:column;gap:24px}
.row{display:flex;gap:40px}
.field{width:100%;display:flex;flex-direction:column;position:relative}
.details-container-wrapper{display:flex;flex-direction:column;gap:24px}
label{font-family:Inter;font-weight:400;font-style:Regular;font-size:14px;line-height:16px;letter-spacing:0}
input[type="text"],input[type="email"],input[type="tel"],input[type="date"]{font-size:16px;font-weight:500;color:#000;padding:8px 0;border:0;border-bottom:1px solid rgba(0,0,0,0.3);outline:0;background:transparent}
.dob-input-wrap{position:relative;overflow:hidden}
.dob-display{display:block;padding:8px 0;font-size:16px;font-weight:500;color:#000;border-bottom:1px solid rgba(0,0,0,0.3);min-height:36px;pointer-events:none}
.dob-display.is-empty{color:rgba(0,0,0,0.4)}
.dob-input-wrap input[type="date"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;background:transparent;color:transparent;text-shadow:none;font-size:0;-webkit-appearance:none;appearance:none;-webkit-text-fill-color:transparent}
.dob-input-wrap input[type="date"]::-webkit-date-and-time-value,.dob-input-wrap input[type="date"]::-webkit-datetime-edit,.dob-input-wrap input[type="date"]::-webkit-datetime-edit-fields-wrapper,.dob-input-wrap input[type="date"]::-webkit-datetime-edit-text,.dob-input-wrap input[type="date"]::-webkit-datetime-edit-day-field,.dob-input-wrap input[type="date"]::-webkit-datetime-edit-month-field,.dob-input-wrap input[type="date"]::-webkit-datetime-edit-year-field{color:transparent;-webkit-text-fill-color:transparent;opacity:0;font-size:0}
.dob-input-wrap input[type="date"]::-webkit-calendar-picker-indicator,.dob-input-wrap input[type="date"]::-webkit-inner-spin-button,.dob-input-wrap input[type="date"]::-webkit-clear-button{display:none;-webkit-appearance:none;opacity:0}
.dob-input-wrap:focus-within .dob-display{border-bottom-color:#05a8a3}
@media(max-width:768px){.dob-display{font-size:14px}
}
input:focus{border-bottom:1px solid #05a8a3}
.verify{position:absolute;right:0;top:24px;font-size:14px;font-weight:800;color:#05a8a3;cursor:pointer}
.button-row{display:flex;justify-content:flex-end;margin-top:40px}
.save-btn{color:#0f1010;background:#00a8a3;font-weight:800;font-size:16px;font-family:'Inter' !important;border:0;border-radius:8px;cursor:pointer;width:217px;height:56px}
.validation{color:#ff6161;display:none}
.mobile{display:none}
.edit-icon{position:relative;width:34px;height:34px;background:#00a8a3;border:2px solid #fff;border-radius:50%;bottom:38px;right:-60px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.edit-icon svg{width:16px;height:16px}
.avatar{width:96px;height:96px;background:#0000000D;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}
.avatar svg{width:40px;height:47px}
.profile-image{margin:100px 130px}
.success-alert{display:none;flex-direction:row;justify-content:center;align-items:center;padding:12px 24px;gap:10px;max-width:250px;background:#3aa76d;border-radius:12px;position:fixed;right:36vw;bottom:22vh}
.success-text{font-family:'Inter';font-style:normal;font-weight:600;font-size:18px;line-height:22px;color:#fff}
#profile-otpModal.active{display:flex}
#profile-otpModal{.ff-club-modal__body{padding:0}
}
#profile-resendOtp{pointer-events:none;.resendOtp-text{display:contents}
.resendOtp-btn{font-weight:bold;color:#05a8a3;cursor:pointer;display:none}
}
#profile-resendOtp.active{pointer-events:auto;.resendOtp-text{display:none}
.resendOtp-btn{display:contents}
}
@media(max-width:768px){.mobile{display:block;margin:0 auto;height:96px}
label{font-size:12px;line-height:14px}
input[type="text"],input[type="email"],input[type="tel"],input[type="date"]{font-size:14px;line-height:16px}
.button-row{margin-top:20px}
.profile-details-container .success-alert{padding:12px 24px;right:12%;left:12%;bottom:60px !important}
.save-btn{width:100%;height:48px;font-size:14px}
.desktop{display:none}
form.details-container{padding:0}
form.details-container .section h2{font-family:"FlyingFlea-Bold" !important;font-size:24px}
.section{gap:32px}
.row{display:flex;gap:32px;flex-direction:column}
.success-alert{padding:10px;right:0;bottom:-8vh}
}