#login-section {
  background-color: var(--bs-light-yellow);
}
.loginWrapper {
  padding: 8% 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}
.loginInfo {
  width: 80%;
}
#login-section label {
  color: var(--bs-light-gray);

  padding-bottom: 5px;
}
.form-input {
  padding-bottom: 40px;
}
#login-section .form-input input {
  background-color: var(--bs-light-yellow);

  border-bottom: 1px solid;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  vertical-align: baseline;
  font-weight: 400;
  line-height: 1.29;
  letter-spacing: 0.16px;
  border-radius: 0;
  outline: 2px solid transparent;
  outline-offset: -2px;
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 2px solid #8d8d8d;
  padding: 0 16px;
  color: #161616;
  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9),
    outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
#login-section .form-input input:focus {
  border-bottom: 2px solid var(--bs-danger);
  outline-offset: -2px;
}

.optionControl {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 25px;
}
@media (max-width: 768px) {
  .optionControl {
    text-align: center;
  }
  .loginWrapper {
    padding: 8% 10%;
  }
  .forgetPW {
    text-align: center !important;
  }
  .member-resend-btn {
    margin-top: 20px;
    text-align: center !important;
  }
}
#login-section .form-check .form-check-input {
  float: none;
}
.login-submit {
  width: 90%;
  text-align: center;
}
.login-submit a.submit-btn {
  padding: 1.8% 15%;
}
.forgetPW a,
.form-check label {
  color: var(--bs-light-gray);
}
.login-cover {
  height: 100%;
}
.login-cover-bg {
  width: 100%;
  height: 100%;
}
.login-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.login-textWrapper {
  padding: 0 10%;
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: absolute;
  justify-content: center;
}
.gb-cover-gradient {
  width: 100%;
  height: 100%;
  background: var(--GR, linear-gradient(90deg, #f8ab15 29%, #ff4747 100%));
  position: absolute;
  opacity: 0.6;
}
.login-text1 {
  color: var(--bs-white);
  font-size: clamp(1.3rem, 1.8vw, 6rem);
  font-weight: 900;
}
.login-text2 {
  color: var(--bs-white);
  font-size: clamp(1rem, 1vw, 4rem);
  font-weight: 400;
}
button.join-button {
  outline: none;
  border: none;
  background: none;
  width: 100%;
  margin: auto;
  font-weight: 900;
}
.submit-btn {
  max-width: 80%;
  color: var(--bs-black);
  padding: 15px 50px;
  margin: 5% auto;
  border: 0;
  font-size: 1.2rem;
  background-color: var(--bs-yellow);
  border-radius: 22px;
  font-weight: 600;
  margin-top: 15px;
  margin-bottom: 15px;
}
button:hover,
.submit-btn:hover {
  box-shadow: 0 2px 4px;
}

.tr-1 {
  text-align: center;
}

/* Signup */
.sign-form-input-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#sign-section label {
  margin-bottom: 5px;
}
.sign-form-input-flex div {
  margin-bottom: 15px;
}

input {
  border: 1px solid #000;
  border-radius: 10px;
  height: 40px;
  line-height: normal;
  color: #282828;
  display: block;
  width: 80%;
  box-sizing: border-box;
  user-select: auto;
  font-size: 16px;
  padding: 0 6px;
  padding-left: 12px;
}
@media (max-width: 768px) {
  input {
    width: 100%;
  }
}
#sign-section input:focus-visible {
  outline-color: var(--bs-danger);
}
input.form-check-input:not([type="radio"]) {
  display: inline;
  padding-left: 0;
}
input.form-check-input[type="radio"] {
  display: inline-block;
  width: 1em !important;
  height: 1em !important;
  padding-left: 0 !important;
}
#memberloginform-rememberme,
#volunteerloginform-rememberme {
  display: inline-block !important;
  margin-top: 4px !important;
  padding-left: 10px !important;
}
.form-checkbox-input,
.notify{
  width: 15px;
  display: inline;
  padding: 0;
  height: 15px;
}
.signform-check-label {
  margin-right: 10px;
}
#sign-section {
  background-color: var(--bs-light-yellow);
}
.member-type-checkbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
div.type-wrapper {
  text-wrap: nowrap;
  margin-right: 10px;
  margin-bottom: 0;
  display: inline-block; /*added*/
}
/*added*/
div .field-volunteerregisterform-is_volunteer,
div .field-volunteerregisterform-notified_phone,
div .field-volunteerregisterform-notified_email,
div .field-volunteerregisterform-notified_post,
div .field-volunteerregisterform-notified_whatsapp,
div .field-memberregisterform-is_volunteer,
div .field-memberregisterform-notified_phone,
div .field-memberregisterform-notified_email,
div .field-memberregisterform-notified_post,
div .field-memberregisterform-notified_whatsapp {
  display: inline-block;
}

.typeWrap-0,
.typeWrap-1,
.typeWrap-2,
.typeWrap-3 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  display: none;
}

.type-option-title {
  margin-right: 20px;
  color: var(--bs-danger);
  font-weight: 500;
}
.part-title,
.type-option-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bs-danger);
  margin-bottom: 15px;
}
.form-checkbox-label {
  padding-left: 5px;
  padding-right: 10px;
}
#WhatsAppno,
#volunteerregisterform-notified_remark,
div.field-volunteerregisterform-notified_remark, /*added*/
#memberregisterform-notified_remark, /*added*/
div.field-memberregisterform-notified_remark{ /*added*/
  width: 45%;
  display: inline;
}
.reg-btn {
  outline: 0;
  border: none;
  cursor: pointer;
  padding: 10px 24px;
  border-radius: 50px;
  width: 90%;
  max-width: 250px;
  background-color: var(--bs-yellow);
  font-weight: 500;
  color: #222;
  display: inline-block;
  margin: 8px 10px;
}

/* profile */

#profile-section {
  background-color: var(--bs-light-yellow);
}
.profileWrapper {
  padding: 5% 10%;
}
.profileInfo {
  width: 100%;
  margin: auto;
}

/* #profile-section label {
  font-size: 1.2rem;
} */
#profile-section .edit-btn {
  padding: 15px 25px;
}
#profile-section .button-wrapper {
  position: absolute;
  top: 100px;
  right: 20px;
}
.edit-btn {
  margin: auto;
  background-color: var(--bs-yellow);
  color: var(--bs-black);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  border: 0;
  font-size: clamp(1rem, 1.2rem, 1.3rem);
  padding-top: 15px;
  padding-bottom: 15px;
}