:root {
  --ibc-navy: #0067a5;
  --ibc-navy-dark: #004d7a;
  --ibc-ink: #1d2a36;
  --ibc-muted: #6b7785;
  --ibc-line: #e4e9f0;
  --ibc-soft: #f4f7fb;
  --ibc-field-border: #d7dee8;
}

.form-box-wrapper,
#account-login .card,
#affiliate-login .card,
#information-contact .contact-form-boxes,
.ibc-contact-form-wrapper .contact-form-boxes {
  border: 1px solid var(--ibc-line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.form-box-wrapper,
#account-login .card,
#affiliate-login .card {
  padding: 40px;
}

#information-contact .contact-form-boxes,
.ibc-contact-form-wrapper .contact-form-boxes {
  padding: 40px;
  margin: 0 !important;
}

.form-box-wrapper .form-control,
.form-box-wrapper .form-control ~ label.col-form-label,
#account-login .form-control,
#account-login .form-control ~ label.col-form-label,
#affiliate-login .form-control,
#affiliate-login .form-control ~ label.col-form-label,
#affiliate-register .form-control,
#affiliate-register .form-control ~ label.col-form-label,
#information-contact .contact-form-boxes,
#information-contact .contact-form-boxes .form-control,
#information-contact .contact-form-boxes .form-control ~ label.col-form-label,
#information-information form .form-control,
#information-information form .form-control ~ label.col-form-label,
#common-home form .form-control,
#common-home form .form-control ~ label.col-form-label,
.ibc-contact-form-wrapper .contact-form-boxes,
.ibc-contact-form-wrapper .contact-form-boxes .form-control,
.ibc-contact-form-wrapper .contact-form-boxes .form-control ~ label.col-form-label,
.ibc-register-card .form-control,
.ibc-register-card .form-control ~ label.col-form-label {
  background-color: #fff !important;
}

.form-box-wrapper .form-control,
#account-login .form-control,
#affiliate-login .form-control,
#affiliate-register .form-control,
#information-contact .contact-form-boxes .form-control,
#information-information form .form-control,
#common-home form .form-control,
.ibc-contact-form-wrapper .contact-form-boxes .form-control,
.ibc-register-card .form-control {
  border: 1px solid var(--ibc-field-border);
  border-radius: 0;
  min-height: 48px;
}

.form-box-wrapper textarea.form-control,
#affiliate-register textarea.form-control,
#information-contact .contact-form-boxes textarea.form-control,
#information-information form textarea.form-control,
#common-home form textarea.form-control,
.ibc-contact-form-wrapper textarea.form-control,
.ibc-register-card textarea.form-control {
  min-height: 120px;
}

.form-box-wrapper .form-control:focus,
#account-login .form-control:focus,
#affiliate-login .form-control:focus,
#affiliate-register .form-control:focus,
#information-contact .contact-form-boxes .form-control:focus,
#information-information form .form-control:focus,
#common-home form .form-control:focus,
.ibc-contact-form-wrapper .contact-form-boxes .form-control:focus,
.ibc-register-card .form-control:focus {
  border-color: var(--ibc-navy);
  box-shadow: 0 0 0 3px rgba(0, 103, 165, 0.12) !important;
}

.form-box-wrapper .form-control ~ label.col-form-label,
#account-login .form-control ~ label.col-form-label,
#affiliate-login .form-control ~ label.col-form-label,
#affiliate-register .form-control ~ label.col-form-label,
#information-contact .contact-form-boxes .form-control ~ label.col-form-label,
#information-information form .form-control ~ label.col-form-label,
#common-home form .form-control ~ label.col-form-label,
.ibc-contact-form-wrapper .contact-form-boxes .form-control ~ label.col-form-label,
.ibc-register-card .form-control ~ label.col-form-label {
  color: var(--ibc-muted);
}

.form-box-wrapper .form-control:focus ~ label.col-form-label,
#account-login .form-control:focus ~ label.col-form-label,
#affiliate-login .form-control:focus ~ label.col-form-label,
#affiliate-register .form-control:focus ~ label.col-form-label,
#information-contact .contact-form-boxes .form-control:focus ~ label.col-form-label,
#information-information form .form-control:focus ~ label.col-form-label,
#common-home form .form-control:focus ~ label.col-form-label,
.ibc-contact-form-wrapper .contact-form-boxes .form-control:focus ~ label.col-form-label,
.ibc-register-card .form-control:focus ~ label.col-form-label {
  color: var(--ibc-navy);
}

.form-box-wrapper .form-group,
#account-login .form-group,
#affiliate-login .form-group,
#affiliate-register .form-group,
#information-contact .contact-form-boxes .form-group,
#information-information form .form-group,
#common-home form .form-group,
.ibc-contact-form-wrapper .form-group {
  margin-bottom: 22px;
}

.form-box-wrapper .btn-main,
#account-login .btn-main,
#affiliate-login .btn-main,
#affiliate-register .btn-main,
#information-contact .contact-form-boxes .btn-main,
#information-information form .btn-main,
#information-information form .btn,
#information-information form input.btn,
#information-information form button[type="submit"],
#common-home form .btn-main,
#common-home form input.btn,
#common-home form button[type="submit"],
.ibc-contact-form-wrapper .btn-main,
.ibc-contact-form-wrapper input.btn,
.ibc-contact-form-wrapper button[type="submit"],
.ibc-register-submit {
  min-height: 50px;
  border: 0;
  border-radius: 0;
  background: var(--ibc-navy);
  color: #fff;
  font-weight: 600;
}

.form-box-wrapper .btn-main:hover,
.form-box-wrapper .btn-main:focus,
#account-login .btn-main:hover,
#account-login .btn-main:focus,
#affiliate-login .btn-main:hover,
#affiliate-login .btn-main:focus,
#affiliate-register .btn-main:hover,
#affiliate-register .btn-main:focus,
#information-contact .contact-form-boxes .btn-main:hover,
#information-contact .contact-form-boxes .btn-main:focus,
#information-information form .btn-main:hover,
#information-information form .btn-main:focus,
#information-information form .btn:hover,
#information-information form .btn:focus,
#information-information form input.btn:hover,
#information-information form input.btn:focus,
#information-information form button[type="submit"]:hover,
#information-information form button[type="submit"]:focus,
#common-home form .btn-main:hover,
#common-home form .btn-main:focus,
#common-home form input.btn:hover,
#common-home form input.btn:focus,
#common-home form button[type="submit"]:hover,
#common-home form button[type="submit"]:focus,
.ibc-contact-form-wrapper .btn-main:hover,
.ibc-contact-form-wrapper .btn-main:focus,
.ibc-contact-form-wrapper input.btn:hover,
.ibc-contact-form-wrapper input.btn:focus,
.ibc-contact-form-wrapper button[type="submit"]:hover,
.ibc-contact-form-wrapper button[type="submit"]:focus,
.ibc-register-submit:hover,
.ibc-register-submit:focus {
  background: var(--ibc-navy-dark);
  color: #fff;
}

.form-box-wrapper .secondry-button,
.form-box-wrapper .btn-main-outline {
  min-height: 50px;
  border-radius: 0;
}

.form-box-wrapper input:-webkit-autofill,
.form-box-wrapper input:-webkit-autofill:hover,
.form-box-wrapper input:-webkit-autofill:focus,
#account-login input:-webkit-autofill,
#account-login input:-webkit-autofill:hover,
#account-login input:-webkit-autofill:focus,
#affiliate-login input:-webkit-autofill,
#affiliate-register input:-webkit-autofill,
#information-contact input:-webkit-autofill,
#information-information form input:-webkit-autofill,
#common-home form input:-webkit-autofill,
.ibc-contact-form-wrapper input:-webkit-autofill,
.ibc-register-card input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
}

.ibc-form-captcha {
  padding: 16px 18px;
  border: 1px solid var(--ibc-line);
  border-radius: 0;
  background: var(--ibc-soft);
}

.ibc-form-captcha .ibc-captcha-row .form-control {
  max-width: none;
  flex: 1 1 180px;
  min-height: 48px;
  border-radius: 0;
  background: #fff !important;
}

.ibc-form-captcha .ibc-captcha-image {
  height: 48px;
  border-radius: 0;
  border-color: var(--ibc-line);
}

.ibc-contact-form-without-bg .contact-form-boxes,
.ibc-contact-form-without-bg .contact-form-boxes .form-control,
.ibc-contact-form-without-bg .contact-form-boxes .form-control ~ label.col-form-label,
.request-join-form .form-control,
.request-join-form .form-floating > label,
#form-for-youth-committees .form-control,
#form-for-youth-committees .form-floating > label {
  background-color: #fff !important;
}

.ibc-contact-form-without-bg .contact-form-boxes .form-control,
.request-join-form .form-control,
#form-for-youth-committees .form-control,
.request-join-form .form-floating > .form-control {
  border: 1px solid var(--ibc-field-border);
  border-radius: 0;
  min-height: 48px;
  height: 48px;
  padding: 12px !important;
}

.ibc-contact-form-without-bg .contact-form-boxes textarea.form-control,
.request-join-form textarea.form-control,
#form-for-youth-committees textarea.form-control {
  min-height: 120px;
  height: auto;
}

.ibc-contact-form-without-bg .contact-form-boxes .form-control:focus,
.request-join-form .form-control:focus,
#form-for-youth-committees .form-control:focus {
  border-color: var(--ibc-navy);
  box-shadow: 0 0 0 3px rgba(0, 103, 165, 0.12) !important;
}

.ibc-contact-form-without-bg .contact-form-boxes .form-control ~ label.col-form-label,
.ibc-contact-form-without-bg .form-group {
  margin-bottom: 22px;
}

.ibc-contact-form-without-bg .contact-form-boxes .form-control ~ label.col-form-label {
  color: var(--ibc-muted);
}

.ibc-contact-form-without-bg .contact-form-boxes .form-control:focus ~ label.col-form-label {
  color: var(--ibc-navy);
}

.ibc-contact-form-without-bg .btn-main,
.ibc-contact-form-without-bg input.btn,
.request-join-form .btn,
#form-for-youth-committees .btn {
  min-height: 50px;
  border: 0;
  border-radius: 0;
  background: var(--ibc-navy);
  color: #fff;
  font-weight: 600;
  padding: 0 24px;
}

.ibc-contact-form-without-bg .btn-main:hover,
.ibc-contact-form-without-bg .btn-main:focus,
.ibc-contact-form-without-bg input.btn:hover,
.ibc-contact-form-without-bg input.btn:focus,
.request-join-form .btn:hover,
.request-join-form .btn:focus,
#form-for-youth-committees .btn:hover,
#form-for-youth-committees .btn:focus {
  background: var(--ibc-navy-dark);
  color: #fff;
}

.request-join-form .form-floating,
#form-for-youth-committees .form-floating {
  position: relative;
}

.request-join-form .form-floating > label,
#form-for-youth-committees .form-floating > label {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 20;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.8rem !important;
  line-height: 1.2;
  color: var(--ibc-muted);
  background: #fff !important;
  border: 0;
  transform: translate(-2px, -26px) !important;
  opacity: 1 !important;
}

.request-join-form .form-floating > .form-control:focus ~ label,
.request-join-form .form-floating > .form-control:not(:placeholder-shown) ~ label,
#form-for-youth-committees .form-floating > .form-control:focus ~ label,
#form-for-youth-committees .form-floating > .form-control:not(:placeholder-shown) ~ label {
  transform: translate(-2px, -26px) !important;
  color: var(--ibc-navy);
  background: #fff !important;
  opacity: 1 !important;
  height: auto;
  padding-bottom: 0.25rem;
}

.request-join-form .ibc-form-title h2,
#form-for-youth-committees .ibc-form-title h2,
.ibc-form-title h2 {
  background: transparent !important;
  border-bottom: 1px solid var(--ibc-line);
  padding: 0 0 12px !important;
  margin: 0 0 22px !important;
  font-size: 18px !important;
  font-weight: 600;
  color: var(--ibc-ink);
}

@media (max-width: 991px) {
  .form-box-wrapper,
  #account-login .card,
  #affiliate-login .card,
  #information-contact .contact-form-boxes,
  .ibc-contact-form-wrapper .contact-form-boxes {
    padding: 28px 20px 24px;
  }

  /* iOS zooms the page when focused fields are under 16px */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  select,
  textarea,
  .form-control,
  .form-select {
    font-size: 16px !important;
  }
}