@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(90deg, #faf9f6, #F8F8FF);
  font-family: 'IRANSansWeb';
}
.container {position: relative;width: 850px;height: 550px;background: #fff;border-radius: 30px;box-shadow: 0 0 30px rgba(0, 0, 0, .2);margin: 20px;overflow: hidden;}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #008375;
  --bs-btn-border-color: #008375;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #006e64;
  --bs-btn-hover-border-color: #006359;
  --bs-btn-focus-shadow-rgb: 0, 131, 117;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #006359;
  --bs-btn-active-border-color: #00594f;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #008375;
  --bs-btn-disabled-border-color: #008375;
}
.showR {display: inline !important;}
.hideR {display: none !important;}
.form-box {position: absolute;right: 10px;width: 50%;height: 100%;background: #ffff;display: flex;align-items: center;color: #1a1a1a;text-align: center;padding: 40px;z-index: 1;transition: .6s ease-in-out 1.2s, visibility 0s 1s;}
.input-field {max-width: 400px;width: 100%;background-color: #f0f0f0;margin: 0.50rem 0;height: 48px;padding: 0 5px 16px 5px;border-radius: 10px;display: grid;grid-template-columns: 15% 85%;position: relative;}
.input-group>.form-control, .input-group>.form-floating, .input-group>.form-select {width: 100%;}
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {margin-left: calc(var(--bs-border-width)* -1);border-radius: 10px !important;height: 48px;transition: .5s;}
.input-field i {text-align: center;line-height: 55px;color: #acacac;transition: 0.5s;font-size: 1.1rem;}
.input-field input {background: none;outline: none;border: none;line-height: 1;font-weight: 600;font-size: 1rem;color: #333;}
.input-group .toggle-password {position: absolute;float: left;left: 25px;top: 2px;cursor: pointer;z-index: 1000;}
#pswmeter-containerr {margin-top: 0px;width: 100%;direction: ltr;}
#pswmeter {height: 3px;width: 0;background-color: transparent;transition: width 0.3s ease-in-out;}
.invalid-feedback {display: none;width: 300px;padding-bottom: 0.60rem;padding-right: 1rem;font-size: .800em;text-align: right;color: var(--bs-form-invalid-color);}
.container.active .form-box {right: 50%;}
.form-box.register {visibility: hidden;}
.container.active .form-box.register {visibility: visible;}
form {width: 100%;}
.container h2 {font-size: 32px;margin: -2px 0;font-family: 'DanaBold';}
.container h3 {font-size: 28px;padding-bottom: 2rem;font-family: 'DanaBold';}
.input-box {position: relative;margin: 30px 0;}
.input-box input {width: 100%;padding: 13px 50px 13px 20px;background: #f6f6f6;border-radius: 8px;border: none;outline: none;font-size: 16px;color: #333;font-weight: 500;}
.input-box input::placeholder {color: #888;font-weight: 400;}
.input-box i {position: absolute;right: 20px;top: 50%;transform: translateY(-50%);font-size: 20px;color: #888;}
.forget-link {margin: -15px 0 15px;}
.forget-link a {font-size: 14.5px;color: #1a1a1a;text-decoration: none;}
.btn {width: 100%;height: 48px;background: #008375;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, .1);border: none;outline: none;cursor: pointer;font-size: 15px;color: #fff;font-weight: 600;}
.container p {font-size: 14.5px;margin: 15px 0;}
.social-icons {display: flex;justify-content: center;}
.social-icons a {display: inline-flex;padding: 10px;border: 2px solid #ccc;border-radius: 50%;font-size: 18px;color: #333;text-decoration: none;margin: 0 8px;transition: .5s;}
.social-icons a:hover {color: #ffff;background: #008375;border: 2px solid #fff;}
.toggle-box {position: absolute;width: 100%;height: 100%;right: 0px}
.toggle-box::before {content: '';position: absolute;left: -250%;width: 300%;height: 100%;background: #008375;border-radius: 150px;z-index: 2;transition: 1.8s ease-in-out;}
.container.active .toggle-box::before {left: 50%;}
.toggle-panel {position: absolute;width: 50%;height: 100%;color: #fff;display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 2;transition: .6s ease-in-out;}
.toggle-panel.toggle-left {left: 0;transition-delay: 1.2s;}
.container.active .toggle-panel.toggle-left {left: -50%;transition-delay: .6s;}
.toggle-panel.toggle-right {right: -50%;transition-delay: .6s;}
.container.active .toggle-panel.toggle-right {right: 0;transition-delay: 1.2s;}
.toggle-panel p {margin-bottom: 20px;}
.toggle-panel .btn {width: 160px;height: 46px;background: transparent;border: 2px solid #fff;box-shadow: none;transition: .5s;}
.toggle-panel .btn:hover{background: #ffff;color: #008375;border: none;outline: none;}
@media screen and (max-width: 650px) {
  .container {height: calc(100vh - 40px);}
  .form-box {bottom: 0;width: 100%;height: 70%;}
  .container.active .form-box {right: 10px;bottom: 30%;}
  .toggle-box::before {left: 0;top: -270%;width: 100%;height: 300%;border-radius: 20vw;}
  .container.active .toggle-box::before {left: 0;top: 70%;}
  .toggle-panel {width: 100%;height: 30%;}
  .toggle-panel.toggle-left {top: 0;}
  .container.active .toggle-panel.toggle-panel.toggle-left {left: 0;top: -30%;}
  .toggle-panel.toggle-right {right: 0;bottom: -30%;}
  .container.active .toggle-panel.toggle-right {bottom: 0;}
}

@media screen and (max-width: 400px) {
  .form-box {padding: 20px;}
  .toggle-panel h2 {font-size: 26px;}
}
.fv-plugins-bootstrap5 .fv-plugins-icon {align-items: center;display: flex;justify-content: center;height: 38px;width: 38px;}
.fv-plugins-icon {position: relative;float: left;left: -170px;text-align: left;top: -50px ;font-size: 1.1rem;}
.style-box-otp {border: 0px;border-radius: 15px;}
.otp-form .otp-field {display: inline-block;width: 3.5rem;height: 4rem;font-size: 1.4rem;line-height: 4rem;text-align: center;border: none;border-bottom: 2px solid #91eade;outline: none;}
.otp-form .otp-name {display: inline-block;width: 8rem;height: 4rem;font-size: 1.4rem;line-height: 3.9rem;text-align: center;border: none;border-bottom: 2px solid #91eade;outline: none;}
.otp-form .otp-field:focus {border-bottom-color: #91eade;}
.btn-re-verification {}