form.ajax-auth {
  transform: translate(-50%, -50%);
  display: none;
  z-index: 99999;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100% !important;
  padding: 30px 25px 25px;
  background-color: #fff;
  border-radius: 8px;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  color: #878787;
  font-size: 11px;
}
.ajax-auth h1,
.ajax-auth h3 {
  font-family: "Georgia", "Times New Roman", Times, serif;
  font-weight: 100;
  color: #333;
  line-height: 1;
}
.ajax-auth h1 {
  font-size: 27px;
  text-align: center;
  margin: 0 0 20px;
}
.ajax-auth h3 {
  font-size: 18px;
  text-align: left;
  margin: 0;
}
.ajax-auth h3 a {
  color: #e25c4c;
}
.ajax-auth hr {
  background-color: rgba(0, 0, 0, 0.1);
  border: 0 none;
  height: 1px;
  margin: 20px 0;
}
.ajax-auth input#username,
.ajax-auth input#password,
.ajax-auth input#signonname,
.ajax-auth input#email,
.ajax-auth input#signonpassword,
.ajax-auth input#password2,
.ajax-auth input#user_login,
.ajax-auth input#teleno {
  border: 1px solid #ededed;
  border-radius: 3px 3px 3px 3px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1) inset;
  color: #333;
  font-size: 15px;
  padding: 15px;
  width: 100%;
  margin: 7px 0 7px;
  background-color: #f9f9f9;
  font-family: "Georgia", "Times New Roman", Times, serif;
}
.ajax-auth input#username:focus,
.ajax-auth input#password:focus,
.ajax-auth input#signonname:focus,
.ajax-auth input#email:focus,
.ajax-auth input#signonpassword:focus,
.ajax-auth input#password2:focus,
.ajax-auth input#user_login:focus {
  background-color: #fff;
}
.ajax-auth label.error {
  display: none !important;
}
.ajax-auth input.error {
  border: 1px solid red !important;
}
.ajax-auth input.submit_button {
  font-size: 13px;
  color: #fff;
  border: 1px solid #b34336;
  background-color: #e25c4c;
  border-radius: 3px;
  text-shadow: 0 1px 0 #ba3f31;
  padding: 9px 31px;
  background: -moz-linear-gradient(top, #ea6656, #df5949);
  border-top: 1px solid #bb483a;
  border-bottom: 1px solid #a63b2e;
  float: right;
  margin-top: 12px;
}

.wrap-logic-psw {
  position: relative;
  margin: 7px 0;
}

.wrap-logic-psw input {
  margin: 0 !important;
  padding-right: 50px !important;
}

.wrap-logic-psw button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent !important;
}

.wrap-logic-psw button.hide:after {
  position: absolute;
  content: "";
  background: url("data:image/svg+xml,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z' fill='%23111111'/></svg>");
  inset:0;
  background-repeat: no-repeat;
  background-position: center center;
}
.wrap-logic-psw button:after {
  position: absolute;
  content: "";
  background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23111111"/></svg>');
  inset:0;
  background-repeat: no-repeat;
  background-position: center center;
}

.wrap-logic-psw button:focus {
  outline: 1px solid #2271b1;
}

.ajax-auth a {
  text-decoration: none;
}
.ajax-auth a.close {
  color: #dcdcdc;
  position: absolute;
  right: 15px;
  top: 15px;
  background: red;
  padding: 0px 5px 0px 5px;
  color: #fff;
  font-size: 20px;
}
.ajax-auth a.text-link {
  color: #b4b2b2;
  float: left;
  margin: 10px 0 0;
}
.ajax-auth p.status {
  text-align: center;
  margin: -15px 0 20px;
  font-weight: 600;
  display: none;
  color: green;
}

.login_overlay {
  height: 100%;
  width: 100%;
  background-color: #f6f6f6;
  opacity: 0.9;
  position: fixed;
  z-index: 998;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type="number"] {
  -moz-appearance: textfield !important;
}

.ajax-auth {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.login-btn-wrapper {
  text-align: center;
  margin-bottom: 20px;
}

.login_button {
  display: inline-block;
  margin: 10px;
}

a.login_button {
  display: inline-block;
  padding: 12px 28px;
  margin: 10px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Login Button */
#show_login {
  background: #1e73be;
  color: #fff;
}

#show_login:hover {
  background: #155a96;
  transform: translateY(-2px);
}

/* Signup Button */
#show_signup {
  background: #dd3333;
  color: #fff;
}

#show_signup:hover {
  background: #b82828;
  transform: translateY(-2px);
}

.login_button {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.login_button:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.login_button {
  backdrop-filter: blur(10px);
}

.custom-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  gap: 8px;
  position: relative;
  margin-top: 10px;
}

/* Hide default checkbox */
.custom-checkbox input[type="checkbox"] {
  opacity: 0;
  cursor: pointer;
  position: absolute;
}

/* Custom box */
.custom-checkbox .checkmark {
  width: 15px;
  height: 15px;
  border: 2px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  transition: all 0.3s ease;
}

/* Tick */
.custom-checkbox .checkmark::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

/* Checked */
.custom-checkbox input:checked + .checkmark {
  background-color: #0073aa;
  border-color: #0073aa;
}

.custom-checkbox input:checked + .checkmark::after {
  display: block;
}

/* Hover */
.custom-checkbox:hover .checkmark {
  border-color: #0073aa;
}

/* Center wrapper */
.logout-wrapper {
  text-align: center;
  margin-top: 20px;
}

/* Button style */
.logout-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #dc3232;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Hover effect */
.logout-btn:hover {
  background-color: #b32d2e;
  transform: translateY(-1px);
}