@import "fonts.css";

:root {
  --primary: #00ff61;
  --primary-complementary-light: #00ffe1;
  --primary-complementary-dark: #00e2c8;
  --secondary: #ff0db1;
  --secondary-complementary-light: #ffff90;
  --secondary-complementary-dark: #d6ff00;
  --foreground: #0f0f0f;
  --background: #ffffff;
  --background-95: rgba(255, 255, 255, 0.95);
  --disabled: #727272;
  --gray-50: #dadada;
  --gray-25: #e8e8e8;
  --gray-10: #f8f8f8;

  --gradient-1-background: rgb(29, 255, 109);
  --gradient-1-background-moz: -moz-linear-gradient(
    180deg,
    rgba(0, 255, 97, 1) 0%,
    rgba(0, 255, 225, 1) 100%
  );
  --gradient-1-background-webkit: -webkit-linear-gradient(
    180deg,
    rgba(0, 255, 97, 1) 0%,
    rgba(0, 255, 225, 1) 100%
  );
  --gradient-1-background-gradient: linear-gradient(
    180deg,
    rgba(0, 255, 97, 1) 0%,
    rgba(0, 255, 225, 1) 100%
  );
  --gradient-1-background-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ff61",endColorstr="#00ffe1",GradientType=1);

  --btn-padding: 10px 20px;
  --btn-padding-border: 9px 17px;
  --btn-border-width: 3px;
}

html {
  height: unset;
  min-height: 100%;
}

/**
BODY
*/
body.login {
  background-attachment: fixed;
  min-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  position: relative;
  color: var(--foreground);
}

/* overlay */
body.login::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  width: 70%;
  height: 100%;
  right: 0;
}

/**
CONTENT CONTAINER
*/
body.login div#login {
  margin: 0;
  margin-left: 30%;
  z-index: 1;
  width: auto;
  max-width: 460px;
  padding: 8rem 0;
  font-family: "WorkSans", Helvetica, Arial, sans-serif !important;
}

/**
H1 -- WISE LOGO
*/
body.login div#login h1 {
  position: fixed;
  top: 1.8rem;
  left: 2rem;
}

body.login div#login h1 a {
  background-size: contain;
  background-repeat: no-repeat;
  width: 120px;
  margin: auto;
}

/**
H2 -- FORM HEADING
*/
body.login div#login h2 {
  font-weight: 500;
  font-size: 40px;
  margin-bottom: 12px;
}

/**
MOBILE BREAKPOINT
*/
@media (max-width: 790px) {
  body.login {
    align-items: flex-start;
  }

  body.login::after {
    width: 100%;
  }

  body.login div#login {
    margin-left: 0;
    padding: 2rem 1rem;
  }

  body.login div#login h1 {
    position: static;
    margin-bottom: 4rem;
  }

  body.login div#login h1 a {
    width: 100px;
    margin: 0;
  }

  body.login div#login h2 {
    font-size: 30px;
  }
}

/**
ERROR & MESSAGE CONTAINER
*/
body.login div#login div#login_error,
body.login div#login .message,
body.login div#login .success {
  border-left: 4px solid var(--secondary);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  padding: 12px;
  margin-left: 0;
  margin-bottom: 20px;
  margin-top: 24px;
  background-color: var(--background);
  box-shadow: unset;
  word-wrap: break-word;
}

/* link in error/message container */
body.login div#login div#login_error a,
body.login div#login .message a,
body.login div#login .success a {
  font-weight: 600;
  font-size: 17px;
  line-height: 28px;
  text-decoration: none;
}

body.login div#login div#login_error a:before,
body.login div#login .message a:before,
body.login div#login .success a:before {
  content: "";
  display: block;
}

body.login div#login div#login_error a:hover,
body.login div#login div#login_error a:active,
body.login div#login .message a:hover,
body.login div#login .message a:active,
body.login div#login .success a:hover,
body.login div#login .success a:active {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}

body.login div#login div#login_error a::after,
body.login div#login .message a::after,
body.login div#login .success a::after {
  content: url("data:image/svg+xml,%3Csvg width='4' height='10' viewBox='0 0 4 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5L0 9.5L1.07324e-07 0.5L4 5Z' fill='%230F0F0F'/%3E%3C/svg%3E");
  margin-left: 7px;
}

/**
CLOSE SIGN IN/OUT POP UP WP-ADMIN
*/

/* close button container */
#wp-auth-check-wrap #wp-auth-check {
  position: fixed;
  left: 50%;
  overflow: hidden;
  top: 40px;
  bottom: 20px;
  max-height: 415px;
  width: 380px;
  margin: 0 0 0 -190px;
  padding: 30px 0 0;
  background-color: #f0f0f1;
  z-index: 1000011;
  box-shadow: 0 3px 6px rgb(0 0 0 / 30%);
}

/* close button */
#wp-auth-check-wrap button.wp-auth-check-close.button-link {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 22px;
  width: 22px;
  color: #787c82;
  text-decoration: none;
  text-align: center;
}

/* close button icon */
#wp-auth-check-wrap .wp-auth-check-close:before {
  content: "\f158";
  font: normal 20px/22px dashicons;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale;
}

/**
FORM AND SUCCESS MESSAGE
*/
/* white container */
body.login div#login form,
body.login div#login .success-box {
  margin-top: 20px;
  margin-left: 0;
  padding: 16px;
  font-weight: 400;
  overflow: hidden;
  background: var(--background);
  border: none;
  box-shadow: unset;
}

body.login div#login .success-box {
  text-align: center;
}

body.login div#login .success-box h3 {
  margin-bottom: 1rem;
}

/* remove wp success message */
body.login div#login .success-box ~ p.message {
  display: none;
}

body.login div#login form p:first-child,
body.login div#login form#registerform p:nth-child(2),
body.login div#login form div.user-pass-wrap,
body.login div#login form .acf-input-wrap {
  position: relative;
}

/* underline in input elements */
body.login div#login form:not(#resetpassform) > p:first-child::after,
body.login div#login form#registerform p:nth-child(2)::after,
body.login div#login form div.user-pass-wrap::after,
body.login div#login form .acf-input-wrap::after,
body.login div#login form .acf-field-select .acf-input::after {
  content: "";
  height: 1px;
  position: absolute;
  border-radius: 0;
  background: #000;
  margin: 0;
  bottom: 24px;
  left: 8px;
  right: 8px;
}

body.login div#login form#resetpassform .wp-pwd::after {
  content: "";
  height: 1px;
  position: absolute;
  border-radius: 0;
  background: #000;
  margin: 0;
  top: 36px;
  left: 8px;
  right: 8px;
}

body.login div#login form .acf-image-uploader .hide-if-value p::after {
  content: "";
  height: 1px;
  position: absolute;
  border-radius: 0;
  background: #000;
  margin: 0;
  bottom: 9px;
  left: 8px;
  right: 8px;
}

body.login
  div#login
  form
  .acf-image-uploader
  .hide-if-value
  .acf-basic-uploader::after {
  content: "";
  height: 1px;
  position: absolute;
  border-radius: 0;
  background: #000;
  margin: 0;
  bottom: 26px;
  left: 8px;
  right: 8px;
}

/* labels */
body.login div#login form label,
body.login div#login #registerform .acf-field .acf-label label {
  font-weight: 600;
  width: 100%;
  cursor: auto;
}

/**
INPUT AND SELECT ELEMENTS
*/
body.login div#login form input,
body.login div#login form select,
body.login div#login form .acf-field-image .hide-if-value p {
  width: 100%;
  border: 2px solid transparent;
  border-radius: 0;
  background: var(--gray-10);
  padding: 7px 8px 13px;
  margin: 0;
  margin-bottom: 16px;
  font-size: 17px;
  box-shadow: 0 0 0 transparent;
}

body.login div#login form input[type="checkbox"] {
  width: 1rem;
  margin-bottom: 0;
  border: 1px solid black;
}
body.login div#login form input[type="checkbox"]:focus {
  border: 1px solid black;
}

body.login div#login form .acf-checkbox-list label {
  font-weight: 400;
}

body.login div#login form .acf-field-image .hide-if-value {
  width: unset;
}

body.login div#login form select {
  color: var(--foreground);
  background: var(--gray-10)
    url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6l5 5 5-5 2 1-7 7-7-7 2-1z' fill='%230f0f0f'/%3E%3C/svg%3E")
    no-repeat right 5px top 55%;
}

body.login div#login form select option {
  color: var(--foreground);
  background: var(--gray-10);
}

body.login div#login form input:focus,
body.login div#login form select:focus {
  border: 2px solid var(--foreground);
  border-radius: 3px;
}

body.login div#login form button.button {
  color: var(--foreground);
}

.login label a,
.login #reg_passmail {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* custom upload file button */
body.login div#login form .acf-input a.acf-button.button {
  /* all: unset; */
  border-radius: 22px;
  padding: 0px 20px 0px 28px;
  position: relative;
  background: #000000;
  color: var(--background);
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  cursor: pointer;
  margin-right: 15px;
}

body.login div#login form input[type="file"]::-webkit-file-upload-button {
  all: unset;
  border-radius: 22px;
  padding: 0px 20px 0px 28px;
  position: relative;
  background: #000000;
  color: var(--background);
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  cursor: pointer;
  margin-right: 15px;
}

body.login div#login form input[type="file"]::file-selector-button {
  all: unset;
  border-radius: 22px;
  padding: 0px 20px 0px 28px;
  position: relative;
  background: #000000;
  color: var(--background);
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  cursor: pointer;
  margin-right: 15px;
}

body.login div#login form input[type="file"]::-ms-browse {
  all: unset;
  border-radius: 22px;
  padding: 0px 20px 0px 28px;
  position: relative;
  background: #000000;
  color: var(--background);
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  cursor: pointer;
  margin-right: 15px;
}

/* see password button */
body.login div#login form button.button:focus {
  border-color: var(--foreground);
  box-shadow: 0 0 0 1px var(--foreground);
  outline: 2px solid transparent;
}
/* END INPUT AND SELECT ELEMENTS */

/* generate password secure hint */
body.login div#login #pass-strength-result.strong {
  background-color: var(--primary-complementary-light);
  border-color: var(--primary-complementary-light);
}

body.login div#login #pass-strength-result.good {
  background-color: var(--primary-complementary-dark);
  border-color: var(--primary-complementary-dark);
}

body.login div#login #pass-strength-result.bad {
  background-color: var(--secondary-complementary-dark);
  border-color: var(--secondary-complementary-dark);
}

body.login div#login #pass-strength-result.short {
  background-color: var(--secondary-complementary-light);
  border-color: var(--secondary-complementary-light);
}

/**
CHECKBOXES
*/
body.login div#login form .forgetmenot,
body.login div#login form .pw-weak {
  float: none;
}

body.login div#login form .forgetmenot label,
body.login div#login form .pw-weak label {
  font-weight: 400;
  cursor: pointer;
  width: auto;
}

body.login div#login form .forgetmenot input#rememberme,
body.login div#login form .pw-weak input#pw-weak {
  background: var(--background) !important;
  border: 1px solid #000000;
  border-radius: 2px;
  margin: 0;
  box-shadow: unset;
  height: 20px;
  width: 20px;
}

body.login div#login form p.forgetmenot input#rememberme:checked::before,
body.login div#login form .pw-weak input#pw-weak:checked::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' stroke='%23000000' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='1.5' fill='%23000000'%3E%3C/rect%3E%3Cpath d='M4.5 10L8.5 14L15.5 6.5' stroke-width='2' stroke='%23FFFFFF'%3E%3C/path%3E%3C/svg%3E%0A");
  margin: -0.06rem 0 0 -0.06rem;
  height: 20px;
  width: 20px;
}
/* END CHECKBOXES */

/**
BUTTONS
*/
/* primary */
body.login div#login form p.submit input#wp-submit,
body.login div#login .news-btn {
  width: 100%;
  min-height: 48px;
  padding: var(--btn-padding);
  float: none;
  background: var(--gradient-1-background);
  background: var(--gradient-1-background-moz);
  background: var(--gradient-1-background-webkit);
  background: var(--gradient-1-background-gradient);
  color: var(--foreground);
  text-decoration: none;
  text-shadow: none;
  display: block;
  font-size: 17px;
  line-height: 28px;
  margin: 0;
  margin-top: 22px;
  cursor: pointer;
  border-width: 0;
  border-radius: 0;
  white-space: nowrap;
  box-sizing: border-box;
  border-bottom: 1px solid transparent;
}

body.login div#login form p.submit input#wp-submit:not(.disabled):focus,
body.login div#login form p.submit input#wp-submit:not(.disabled):hover,
body.login div#login .news-btn:not(.disabled):focus,
body.login div#login .news-btn:not(.disabled):hover {
  background: var(--primary-complementary-light);
  border-bottom: 1px solid var(--foreground);
}

body.login div#login form p.submit input#wp-submit:not(.disabled):active,
body.login div#login .news-btn:not(.disabled):active {
  background-color: var(--foreground);
  color: var(--background);
  padding: var(--padding);
  border-bottom: 1px solid transparent;
}

/* generate password button */
body.login div#login form p.submit button.button.wp-generate-pw {
  all: unset;
  text-transform: uppercase;
  border-radius: 22px;
  padding: 6px 12px;
  background: var(--gray-25);
  color: var(--foreground);
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  cursor: pointer;
  margin-right: 15px;
}

body.login div#login form p.submit button.button.wp-generate-pw:hover,
body.login div#login form p.submit button.button.wp-generate-pw:focus {
  text-decoration: underline;
}

body.login div#login form p.submit button.button.wp-generate-pw:active {
  text-decoration: none;
  background-color: var(--foreground);
  color: var(--background);
}
/* END BUTTONS */

/**
BOTTOM LINKS
*/
body.login div#login p#nav {
  color: var(--foreground);
  font-size: 17px;
  line-height: 28px;
}

body.login div#login p#nav::before {
  content: "Are you a member/affiliate or have an account?";
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

body.login div#login p#nav a {
  color: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
}

/* spacing around divider */
body.login div#login p#nav a:nth-child(2) {
  margin-left: 8px;
}

body.login div#login p#nav a:hover,
body.login div#login p#nav a:active {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 1.5px;
}

body.login div#login p#nav a::after {
  content: url("data:image/svg+xml,%3Csvg width='4' height='10' viewBox='0 0 4 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5L0 9.5L1.07324e-07 0.5L4 5Z' fill='%230F0F0F'/%3E%3C/svg%3E");
  margin-left: 7px;
  margin-right: 8px;
}
/* END BOTTOM LINKS */

/**
BACK TO WISE BUTTON
*/
body.login div#login p#backtoblog {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: fixed;
  left: 15%;
  top: 50%;
  transform: translate(-50%, 0);
}

body.login div#login p#backtoblog a {
  padding: var(--btn-padding);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  cursor: pointer;
  background-color: var(--background);
  color: var(--foreground);
  border-bottom: 1px solid var(--background);
  vertical-align: middle;
  line-height: 28px;
}

body.login div#login p#backtoblog a svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
  margin-top: -3px;
}

body.login div#login p#backtoblog a:not(.disabled):hover,
body.login div#login p#backtoblog a:not(.disabled):focus {
  background-color: var(--background);
  color: var(--foreground);
  border-bottom: 1px solid var(--background);
  border-bottom: 1px solid var(--foreground);
}

body.login div#login p#backtoblog a:not(.disabled):active {
  background-color: var(--foreground);
  color: var(--background);
}

/* move to below form before mobile breakpoint */
@media (max-width: 1110px) {
  body.login div#login p#backtoblog {
    position: static;
    transform: translate(0, 0);
  }

  body.login div#login p#backtoblog a {
    display: block;
    width: 100%;
    text-align: center;
    cursor: pointer;
    background-color: var(--foreground);
    color: var(--background);
    border-bottom: 1px solid var(--foreground);
    margin-top: 20px;
  }

  body.login div#login p#backtoblog a svg {
    display: none;
  }
}