@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, input { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } body { margin: 0; font-family: 'Poppins', sans-serif; color: #3d3d3d; } .d-none { display: none; } .biz-login-wrap { width: 100%; display: flex; align-items: center; height: 100vh; margin: 0; } .biz-login-wrap .form-container { width: 375px; height: auto; margin: auto; position: relative; padding: 40px; border: 1px solid #dadce0; border-radius: 5px; overflow: hidden; } .biz-login-wrap .form-group { position: relative; } .biz-login-wrap .form-group input { width: 100%; box-sizing: border-box; border: 1px solid #d0d0d0; background-color: transparent; border-radius: 4px; color: #202124; font-size: 16px; margin: 1px 1px 0 1px; padding: 13px 15px; z-index: 1; } .biz-login-wrap .form-group input.error { border-color: #d93025; } .biz-login-wrap .form-group label { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #a5a5a5; font-size: 16px; padding: 0px 4px; background-color: white; transition-property: transform; transition-duration: 500ms; z-index: -1; } .biz-login-wrap .form-link a { color: #1a73e8; font-size: 16px; font-weight: 500; } .biz-login-wrap .form-link label { color: #5f6368; font-size: 14px; display: inline-block; } .email-input:focus+label { transform: translate3d(0, -175%, 0); z-index: 1; color: #1a73e8; } .biz-login-wrap .password-input:focus+label { transform: translate3d(0, -175%, 0); z-index: 1; color: #1a73e8; } .biz-login-wrap .form-group input.error:focus+label { color: #d93025; } .biz-login-wrap .form-group label.password-fixed { transform: translate3d(0, -175%, 0); z-index: 1 !important; color: #1a73e8; } .biz-login-wrap .form-header { display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 20px; margin-bottom: 40px; } .biz-login-wrap .form-header h2 { margin: 0; font-size: 24px; font-weight: 500; } .biz-login-wrap .form-header h4 { font-size: 16px; font-weight: 500; } .biz-login-wrap .form-body { display: flex; flex-direction: column; row-gap: 30px; } .biz-login-wrap .password-form-box { row-gap: 60px; } .biz-login-wrap .login-logo { width: 150px; margin: 0 auto; } .biz-login-wrap .btn { float: right; color: white; background: #1a73e8; border: 0; padding: 8px 22px; border-radius: 4px; font-weight: 500; font-size: 16px; cursor: pointer; } .biz-login-wrap a { text-decoration: none; } .biz-login-wrap .flex-between-center { display: flex; align-items: center; justify-content: space-between; } .biz-login-wrap .mt-5 { margin-top: 5px; } .biz-login-wrap .mt-10 { margin-top: 10px; } .biz-login-wrap .password-checkbox { width: 20px; height: 20px; margin-right: 5px; } .biz-login-wrap .show-password-link { display: flex; align-items: center; column-gap: 10px; margin-top: 15px; } .biz-login-wrap .show-password-link label { font-size: 16px; font-weight: 500; } .biz-login-wrap .err-msg:not(:empty) { color: #d93025; font-size: 12px; margin-top: 5px; } .biz-login-wrap h4 { font-size: 16px; font-weight: 500; } .biz-login-wrap #txt_PhoneorMail:focus+label { transform: translate3d(0, -175%, 0); z-index: 1; color: #1a73e8; } .biz-login-wrap #txt_Code:focus+label { transform: translate3d(0, -175%, 0); z-index: 1; color: #1a73e8; } .biz-login-wrap #txt_NewPassword:focus+label { transform: translate3d(0, -175%, 0); z-index: 1; color: #1a73e8; } #txt_ConfirmPassword:focus+label { transform: translate3d(0, -175%, 0); z-index: 1; color: #1a73e8; } .back-btn { text-align: right; margin: 0px 20px; } .btn-block { margin-top: 10px; margin-bottom: 20px; } .btn-block { width: 100%; } .opt-text { text-align: center; margin: 10px 0px; } .verify-block { margin: 10px 0px; } .verify-block .btn { margin-left: 5px; } .biz-login-wrap h2 { margin: 0; font-size: 24px; font-weight: 500; text-align: center; } .reset-success { text-align: center; margin: 20px 0px; } .conformPassword { margin-top: 30px; }