.page-content-area {float:left;width:100%;min-height: 400px;padding: 80px 0;margin-bottom: -80px;background: var(--bg);}
.page-content-area .container {justify-content:center;width: min(100vw,460px); text-align: center;}
.login-page-left {float:left; width:50%;}
.login-page-left form {width:80%; margin:0 auto;}
.login-page-right {float:right; width:50%;}
.login-page-left .login-page-title {width:80%; margin:0 auto; margin-bottom:30px;}
.login-page-left .login-page-title h1 {float:left; width:100%; font-size:14px; font-weight:600; margin-bottom:5px;}
.login-page-left .login-page-title p {font-size:13px;}

.mr-0 {margin-right:0 !important;}
.new-user-form .form-group label, .new-user-form .form-group-half label {font-size: 10px;float: left;width: 100%;font-weight: 500;text-align: left;text-transform: uppercase;}
.mt-0 {margin-top:0 !important;}
.mt-10 {margin-top:10px !important;}
.mb-10 {margin-bottom:10px !important;}
.mb-20 {margin-bottom:20px !important;}
.mb-0 {margin-bottom: 0 !important;}
.forgot-pass-btn {float: right;color: var(--label);font-size: 10px;text-decoration: none;margin-top: 0px;font-weight: 500;text-transform: uppercase;justify-self: end;}
.forgot-pass-btn img {float:left;width:16px;margin: -1px 5px 0 0;}
.forgot-pass-btn i {float:left; font-size:20px; margin:-3px 5px 0 0;}
.form-submit-btn {background-color:#000; border:none; border-radius:30px; color:#fff; font-size:14px; padding:0px 26px; height:40px; line-height:1em; font-weight:600; letter-spacing:-0.03em; cursor:pointer;}
.form-submit-btn:hover {background-color:#93c4cd;}
.lp-membership-area .content {float: left; width: 100%;}
.agreement-popup {width:70%;}
.popup h4 {float: left;width: 100%;font-size: 20px;font-weight: 600;margin-bottom: 20px;color: var(--navy);}
.popup p {float:left; width:100%; font-size:16px; line-height:1.4em; color:#666; max-width: 1440px;}
.password-popup {width:480px;}
.forgot-password-form {float:left; width:100%; margin-top:10px;}
.forgot-password-form .form-group {margin-bottom:20px;}
label.form-control-placeholder {float: left; width: 100%; font-size: 12px;}
.lp-checkbox {float:left; width:50% !important;}
.lp-checkbox span {margin-left:8px;}
.membership-redirect-button {float: left;width: 100%;margin-top: 10px;text-align: center;font-size: 12px;font-weight: 400;}
.membership-redirect-button a {text-decoration:none;border-bottom: 1px solid var(--orange);padding-bottom:1px;color: var(--orange);}
.membership-action-button, .membership-action-button:focus, .membership-action-button:hover {float: left;width: 100%;background-color: var(--orange);color: #fff;font-size: 12px;font-weight: 600;line-height: 46px;cursor: pointer;transition: ease all 300ms;height: 46px;border: none;z-index:1;left: 0;border-radius: 100px; display:flex; align-items:center; justify-content: center; outline:none;}

/* .login-error-msg {float:left; width:100%; margin-top:-30px; text-align:center; font-size:13px; color:var(--orange);} */
.remember-pass-msg {float:left; width:100%; text-align:center; font-size:13px; color:var(--orange);}

.without-membership-button {float: left;
  width: 100%;
  clear: both;
  margin-top: -5px;
  position: relative;
  border: 1px solid var(--navy);
  border-radius: 0;
  background-color: #fff;
  height: 42px;
  color: var(--navy); border-radius: 100px;
  font-weight: 600;
  font-size: 12.1px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  padding: 0 0; line-height: 43px;}
.new-membership-checkbox {float:left; width:100%; position:relative; margin-bottom:8px;}
.new-membership-checkbox span {text-align:left; margin:4px 0 0 9px}
.new-membership-checkbox a {color:inherit; text-decoration:none;}
/* .login-error-msg {float: left; margin-bottom: -20px; margin-top: 30px;} */
.membership-warning {float:left; width:100%; border:2px dashed #444; text-align:center; color:#000; font-size:14px; padding:15px; line-height:1.5em; margin-top:20px;}
.membership-warning a {color:#000; text-decoration:none; border-bottom:1px solid #000;}
label.new-membership-checkbox {font-size:11px !important; margin-bottom:15px !important;}
label.new-membership-checkbox a {border-bottom:1px solid #000;}
.facebook-login-button a {background-color:#4267b2;color:#fff;display:block;text-decoration:none;padding:12px 10px;font-size:13px;font-weight:400;display:flex;justify-content:center;margin-top: 0px;font-weight:500;z-index: 0;}
.facebook-login-button {float:left; width:100%; margin-top:25px;}
.login-page-form-wrapper {width:100%;border: 1px solid var(--border);float: left;padding: 40px;border-radius: 5px;background: var(--white);}
.login-page-title {float:left; width:100%; font-size:12px; margin-bottom:40px;display: grid;grid-template-columns: 1fr 1fr;}
.login-page-title a {float: left;width: 100%;padding: 10px 0;font-weight: 600;font-size: 13px;text-transform: uppercase;border-bottom: 2px solid var(--darkborder);position: relative;}
.login-page-title h1 {font-size: 22px;font-weight: 500;}
.login-page-title p {font-size:14px; color:var(--label);}
.lp-checkbox input:before, .new-membership-checkbox input:before {content: ""; position: absolute; top: 0; left: 0; width: 17px; height: 17px; border: 1px solid #000; background: #fff;}
.lp-checkbox input:checked:before, .new-membership-checkbox input:checked:before {background: url(../images/check.svg) top 0px center no-repeat #fff; content: ""; position: absolute; top: 0; left: 0; background-size: 15px;}
.grid-2 {display: grid; grid-template-columns: 1fr 1fr; float:left; width:100%; column-gap:20px;}
.login-remember-btn {display:grid; grid-template-columns:18px 1fr; align-items:center; column-gap:6px;}
.login-remember-btn label {margin:0;}
.mobile-search-trigger {display:none;}
.membership-or {font-size:12px; margin-bottom:20px; float:left; width:100%;}

.completer-container { font-family: inherit; font-size: 14px; line-height: normal; position: absolute; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; border: 1px solid #ccc; border-bottom-color: var(--border); background-color: #fff; }
  .completer-container li {overflow: hidden; margin: 0; padding: 1em .8em; cursor: pointer; white-space: nowrap; text-overflow: ellipsis;border-bottom: 1px solid var(--border); background-color: #fff;}
  .completer-container .completer-selected,
  .completer-container li:hover {margin-left: -1px; border-left: 1px solid var(--orange); background-color: var(--bg);}

  .new-user-form .form-group {position: relative;}
  .eye {width: 20px;height: 20px;position: absolute;top: 32px;right: 10px;cursor: pointer;}
  .register-error {background:#ffdbd7; color:#E6614F; padding:5px 0; font-weight:500;}

  .form-group.completer-email {position: relative;}
  ul#emailSuggestions {position: absolute;z-index: 1;list-style: none;padding: 0;margin: 0;border: 1px solid var(--border);background-color: #fff;width: 100%;top: 65px;border-left: none;max-height: 150px;overflow-y: scroll;}
  ul#emailSuggestions li {float: left;width: 100%;text-align: left;height: 50px;display: flex;align-items: center;padding: 0 12px; cursor: pointer;transition: var(--ease);border-left: 1px solid var(--border);font-size: 14px;font-weight: 500;}
  ul#emailSuggestions li:last-child {border-bottom: 0;}
  ul#emailSuggestions li:hover {border-left: 1px solid var(--orange);}
  ul#emailSuggestions::-webkit-scrollbar {width: 5px;background-color:var(--white)}
  ul#emailSuggestions::-webkit-scrollbar-thumb {background-color: var(--border);border-radius: 5px;}
  /* .completer-email-validator #emailInput:invalid {background-color: #fdf1f1;border: 1px solid #cb6060;}
  .completer-email:has(input:invalid)::before {    content: "Lütfen geçerli bir e-posta giriniz"; top: -30px; left: 0; width: 100%; text-align: center; background-color: #fdf1f1; font-size: 12px; color: #cb6060; height: 32px; display: flex; justify-content: center; align-items: center; border-radius: 3px; margin-bottom: 15px; font-weight:500;} */

  

  
  .new-user-form {float: left;width: 100%;position: relative;}
  .login-error-msg {float: left;width: 100%;position: absolute;top: -34px;font-size: 13px;background-color: #fdf1f1; height: 32px;display: flex;justify-content: center;align-items: center;color: #cb6060;border-radius: 3px;}

.membership-action-button.loading {cursor: not-allowed; position:relative;}
.membership-action-button.loading:before {background: url("data:image/svg+xml,%3Csvg version='1.1' id='L4' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'%3E%3Ccircle fill='%23fff' stroke='none' cx='31' cy='50' r='6'%3E%3Canimate attributeName='opacity' dur='1s' values='0%3B1%3B0' repeatCount='indefinite' begin='0.1'/%3E%3C/circle%3E%3Ccircle fill='%23fff' stroke='none' cx='51' cy='50' r='6'%3E%3Canimate attributeName='opacity' dur='1s' values='0%3B1%3B0' repeatCount='indefinite' begin='0.2'/%3E%3C/circle%3E%3Ccircle fill='%23fff' stroke='none' cx='71' cy='50' r='6'%3E%3Canimate attributeName='opacity' dur='1s' values='0%3B1%3B0' repeatCount='indefinite' begin='0.3'/%3E%3C/circle%3E%3C/svg%3E") center center no-repeat var(--orange); position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; border-radius: 100px; z-index: 1;}
/* input.form__input.form__input--user-invalid.ng-dirty.ng-valid-required.ng-touched.ng-invalid.ng-invalid-email {border: 1px solid #cb6060; background:url("https://jebindetest.kolay.site/Themes/jebinde/Content/images/invalid-input-bg.svg") right 12px center no-repeat;} */

input#emailInput:invalid:not(:focus) {
  border: 1px solid #cb6060;
  background: url(https://jebinde.com/Themes/jebinde/Content/images/invalid-input-bg.svg) right 12px center no-repeat;
}

.form__input.form__input--user-invalid.ng-pristine.ng-untouched.ng-valid-email.ng-invalid.ng-invalid-required {
  border: 1px solid var(--border) !important;
  background: none !important;
}

a.sms-login-trigger-btn {float: left;width: 100%;height: 46px;border: 1px solid var(--orange);display: flex;justify-content: center;align-items: center;border-radius: 100px;font-weight: 600;font-size: 12px;color: var(--orange);}


.otp-login-form {float: left;width: 100%;position: relative;}
.otp-login-form label {text-align: left;width: 100%;}
.otp-login-form button[type=submit] {float: left;width: 100%; background-color: var(--orange);color: #fff;font-size: 12px;font-weight: 600;line-height: 46px;cursor: pointer;transition: ease all 300ms;height: 46px;border: none;z-index: 1;left: 0;border-radius: 100px; display: flex;align-items: center;justify-content: center;outline: none;}
.resend-otp-btn { border: none;background: #fff;float: left;color: var(--orange);font-size: 12px;font-weight: 600;display: flex;align-items: center;margin-top: 10px;letter-spacing: -.03em;margin-bottom: 10px;width: 100%;}
.resend-otp-btn.backto-login-btn {color: #999 !important;}
.resend-otp-btn img {float: left;margin: -2px 6px 0 0;}
.otp-login-form .error {font-size: 13px;text-align: center;width: 100%;float: left;margin-bottom: 20px;color: var(--orange);font-weight: 500;}
.otp-desc {float: left;width: 100%;display: grid;grid-template-columns: 50px 1fr;align-items: center;font-size: 13px;line-height: 22px;margin-bottom: 20px;}
.otp-sms-flex {display: flex;float: left;width: 100%;align-items: center;margin-top: 10px;}
.backto-otp-form {filter: brightness(0) saturate(100%) invert(45%) sepia(84%) saturate(819%) hue-rotate(353deg) brightness(92%) contrast(102%);width: 40px;margin: -2px -5px 0 -5px !important;}


 
.activation-alert {
  background: #fdf1f1;
  float: left;
  width: 100%;
  margin-bottom: 20px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px; font-weight: 500; color: #cb6060; border-radius: 3px; border: 1px solid #cb6060;}
.u-activation-title {float:left; width:100%; margin-bottom:20px; color:var(--navy);}
.u-activation-content {float:left; width:100%;}
.u-activation-content p {font-size:14px;}
.u-activation-content p span {color: var(--orange)}
.u-activation-form {float:left; width:100%; margin-top:20px;}
.u-activation-form .form-group label {float:left; text-align:left;}
.u-activation-form-big-wrapper {display:none;}
.u-activation-form-big-wrapper.active {display:block;}
#u-activation-form-trigger {float:left; width:100%; text-align:center; font-size:14px; font-weight:500; color:var(--orange); text-decoration:underline; text-underline-offset:6px; margin-top:20px; margin-bottom:25px; cursor:pointer;}
.nm-activation-message {
  float: left;
  width: 100%;
  background: #ebf8f6;
  color: #466d67;
  font-size: 13px;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
  font-weight: 500;
  padding: 0 15px;
  border: 1px solid #c3d5d2;
  border-radius: 4px;
  text-align: center;
  padding: 15px 0;
}

.j-login-popup-wrapper {position: fixed; left: calc(50% - 250px); top: calc(50% - 162px); width:min(100vw - 30px,500px); background: #fff; padding: 20px; text-align: center; padding: 0; z-index: 20; display:none;}
.j-login-popup-wrapper.active {display:block;}
.j-login-popup-wrapper:before {position: fixed; background: rgba(0,0,0,.4); top: 0; left: 0; width: 100%; height: 100vh; content: ""}
.j-login-popup {background: #fff; float: left; width: 100%; position: relative; padding: 30px 25px 20px}
.j-login-popup h5 {float: left; width: 100%; font-weight: 600; font-size: 15px; margin-bottom: 5px;color: var(--orange);}
.j-login-popup p {float: left;width: 100%;font-size: 15px;margin-bottom: 0;margin-top: 10px;}
.j-login-popup-close {width: 24px;height: 24px;position: absolute;top: 10px;right: 10px;z-index: 1;cursor: pointer;}
.j-login-popup-actions {float: left;width: 100%;display: flex;justify-content: center;align-items: center;margin-top: 20px;}
.j-login-popup-actions a {float: left;width: 192px;height: 38px;background: var(--orange);color: var(--white);border-radius: 100px;display: flex; justify-content: center;align-items: center;font-weight: 600;font-size: 13px;}

.otp-sms-title {    float: left;width: 100%;font-size: 10px;font-weight: 500;margin: 0 0 5px 0;color: var(--label);text-transform: uppercase;text-align: left;}
.otp-login-form .form-group .one-time-code-wrapper {width:256px;text-align: left;}

/* **** TABLET YATAY ***** */
@media screen and (min-width : 992px) and (max-width : 1199px) {

}

/* **** TABLET DIK ***** */
@media screen and (min-width : 768px) and (max-width : 991px) {
  .lp-content-wrapper {width:100%; margin-top:0;}
  .j-login-popup-wrapper {left: 15px;}
}

/* **** TELEFON DIK ***** */
@media screen and (max-width : 767px) {
  .lp-content-wrapper {float: left; width: 100%; position: relative; left: 0; margin: 0;}
  .login-page-left {width:100%; margin-bottom:30px;}
  .login-page-right {width:100%;}
  .login-page-left .login-page-title, .login-page-left form {width:100%;}
  .login-page-form-wrapper {padding:40px 25px;}
  .j-login-popup-wrapper {left: 15px;}

  /* .mobile-search-trigger {display:block;} */
}