/* ==========================================================
   WP-MEMBERS CUSTOM FORM STYLE
   Register + Login
   ========================================================== */


/* ==========================================================
   FORM CONTAINER
   ========================================================== */

#wpmem_reg,
#wpmem_login {
    width: 100%;
    max-width: 620px;
    margin: 30px 0;
    color: #252b36;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
}


/* Remove old WP-Members layout */

#wpmem_reg fieldset,
#wpmem_login fieldset {
    width: 100%;
    margin: 0;
    padding: 28px 30px 30px;
    background: #ffffff;
    border: 1px solid #e3e7ed;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.02), 0 5px 18px rgba(16, 24, 40, 0.035);
}


/* ==========================================================
      FORM TITLE
      ========================================================== */

#wpmem_reg legend,
#wpmem_login legend {
    display: block;
    width: 100%;
    margin: 0 0 24px;
    padding: 0;
    color: #1d2939;
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    border: 0;
}


/* ==========================================================
      FIELD WRAPPERS
      ========================================================== */

#wpmem_reg .div_text,
#wpmem_reg .div_date,
#wpmem_reg .div_number,
#wpmem_reg .div_url,
#wpmem_reg .div_select,
#wpmem_reg .div_textarea,
#wpmem_reg .div_file,
#wpmem_reg .div_image,
#wpmem_reg .div_checkbox,
#wpmem_reg .div_multicheckbox,
#wpmem_reg .div_multiselect,
#wpmem_reg .div_radio,
#wpmem_reg .div_membership,
#wpmem_login .div_text {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 17px !important;
    padding: 0 !important;
    box-sizing: border-box;
}


/* ==========================================================
      LABELS
      ========================================================== */

#wpmem_reg label,
#wpmem_login label,
#wpmem_reg label.text,
#wpmem_reg label.select,
#wpmem_reg label.textarea,
#wpmem_reg label.checkbox {
    float: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: #344054 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    box-sizing: border-box;
}


/* ==========================================================
      TEXT INPUTS
      ========================================================== */

#wpmem_reg input[type="text"],
#wpmem_reg input[type="email"],
#wpmem_reg input[type="password"],
#wpmem_reg input[type="url"],
#wpmem_reg input[type="tel"],
#wpmem_reg input[type="number"],
#wpmem_reg input[type="date"],
#wpmem_reg .textbox,
#wpmem_reg .username,
#wpmem_reg .password,
#wpmem_login input[type="text"],
#wpmem_login input[type="email"],
#wpmem_login input[type="password"],
#wpmem_login .textbox,
#wpmem_login .username,
#wpmem_login .password {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 10px 13px !important;
    color: #1d2939 !important;
    background: #ffffff !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 7px !important;
    outline: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}


/* Input hover */

#wpmem_reg input[type="text"]:hover,
#wpmem_reg input[type="email"]:hover,
#wpmem_reg input[type="password"]:hover,
#wpmem_reg input[type="url"]:hover,
#wpmem_reg input[type="tel"]:hover,
#wpmem_reg input[type="number"]:hover,
#wpmem_reg input[type="date"]:hover,
#wpmem_login input[type="text"]:hover,
#wpmem_login input[type="email"]:hover,
#wpmem_login input[type="password"]:hover {
    border-color: #aeb6c2 !important;
    background: #ffffff !important;
}


/* Input focus */

#wpmem_reg input[type="text"]:focus,
#wpmem_reg input[type="email"]:focus,
#wpmem_reg input[type="password"]:focus,
#wpmem_reg input[type="url"]:focus,
#wpmem_reg input[type="tel"]:focus,
#wpmem_reg input[type="number"]:focus,
#wpmem_reg input[type="date"]:focus,
#wpmem_login input[type="text"]:focus,
#wpmem_login input[type="email"]:focus,
#wpmem_login input[type="password"]:focus {
    background: #ffffff !important;
    border-color: #2684ff !important;
    box-shadow: 0 0 0 3px rgba(38, 132, 255, 0.10) !important;
}


/* ==========================================================
      PLACEHOLDER
      ========================================================== */

#wpmem_reg input::placeholder,
#wpmem_reg textarea::placeholder,
#wpmem_login input::placeholder {
    color: #98a2b3;
    opacity: 1;
}


/* ==========================================================
      SELECT
      ========================================================== */

#wpmem_reg select,
#wpmem_reg .dropdown {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 9px 36px 9px 13px !important;
    color: #1d2939 !important;
    background-color: #ffffff !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 7px !important;
    outline: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

#wpmem_reg select:focus,
#wpmem_reg .dropdown:focus {
    border-color: #2684ff !important;
    box-shadow: 0 0 0 3px rgba(38, 132, 255, 0.10) !important;
}


/* ==========================================================
      TEXTAREA
      ========================================================== */

#wpmem_reg textarea,
#wpmem_reg .textarea {
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-height: 120px !important;
    height: auto;
    margin: 0 !important;
    padding: 11px 13px !important;
    color: #1d2939 !important;
    background: #ffffff !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 7px !important;
    outline: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    resize: vertical;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

#wpmem_reg textarea:focus,
#wpmem_reg .textarea:focus {
    border-color: #2684ff !important;
    box-shadow: 0 0 0 3px rgba(38, 132, 255, 0.10) !important;
}


/* ==========================================================
      CHECKBOX
      ========================================================== */

#wpmem_reg input[type="checkbox"],
#wpmem_login input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    margin: 0 7px 0 0 !important;
    vertical-align: middle;
    accent-color: #2271b1;
    cursor: pointer;
}

#wpmem_reg .div_checkbox {
    display: flex;
    align-items: center;
    min-height: 30px;
}


/* ==========================================================
      REQUIRED MARK
      ========================================================== */

#wpmem_reg .req {
    color: #e5484d !important;
    margin-left: 2px;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1 !important;
}

#wpmem_reg .req-text {
    float: none !important;
    width: 100%;
    margin: 3px 0 18px !important;
    padding: 0 !important;
    color: #98a2b3;
    font-size: 12px;
    line-height: 1.4;
}


/* ==========================================================
      FILE INPUT
      ========================================================== */

#wpmem_reg input[type="file"] {
    display: block;
    width: 100% !important;
    padding: 9px !important;
    color: #475467;
    background: #ffffff;
    border: 1px solid #d0d5dd !important;
    border-radius: 7px !important;
    box-sizing: border-box;
}


/* ==========================================================
      SUBMIT AREA
      ========================================================== */

#wpmem_reg .button_div,
#wpmem_login .button_div {
    float: none !important;
    display: flex;
    width: 100% !important;
    height: auto !important;
    margin: 23px 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
    background: transparent !important;
}


/* ==========================================================
      SUBMIT BUTTON
      ========================================================== */

#wpmem_reg input[type="submit"],
#wpmem_reg .buttons,
#wpmem_login input[type="submit"],
#wpmem_login .buttons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    height: 44px;
    margin: 0 !important;
    padding: 9px 22px !important;
    color: #ffffff !important;
    background: #2271b1 !important;
    border: 1px solid #2271b1 !important;
    border-radius: 7px !important;
    outline: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#wpmem_reg input[type="submit"]:hover,
#wpmem_reg .buttons:hover,
#wpmem_login input[type="submit"]:hover,
#wpmem_login .buttons:hover {
    color: #ffffff !important;
    background: #185f98 !important;
    border-color: #185f98 !important;
}

#wpmem_reg input[type="submit"]:focus,
#wpmem_login input[type="submit"]:focus {
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15) !important;
}


/* ==========================================================
      LOGIN LINKS
      ========================================================== */

#wpmem_login .link-text {
    float: none !important;
    width: 100% !important;
    margin-top: 15px;
    padding: 0 !important;
    color: #667085;
    font-size: 13px;
    text-align: left !important;
}

#wpmem_login .link-text a {
    color: #2271b1;
    font-weight: 500;
    text-decoration: none;
}

#wpmem_login .link-text a:hover {
    text-decoration: underline;
}


/* ==========================================================
      ERROR / MESSAGE BOX
      ========================================================== */

#wpmem_msg,
.wpmem_msg {
    width: 100% !important;
    max-width: 620px;
    margin: 20px auto !important;
    padding: 13px 16px !important;
    color: #344054;
    background: #f8fafc;
    border: 1px solid #dfe4ea !important;
    border-radius: 7px !important;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    box-sizing: border-box;
}

#wp-members .err,
#wpmem_reg .err,
#wpmem_login .err {
    width: 100% !important;
    margin: 5px 0 12px;
    padding: 10px 12px !important;
    color: #b42318;
    background: #fff5f4;
    border: 1px solid #fecdca !important;
    border-radius: 6px !important;
    font-size: 12px;
    box-sizing: border-box;
}


/* ==========================================================
      NO INPUT / STATIC VALUES
      ========================================================== */

#wpmem_reg .noinput {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 13px !important;
    color: #475467;
    background: #f8fafc;
    border: 1px solid #e4e7ec !important;
    border-radius: 7px !important;
    box-sizing: border-box;
}


/* ==========================================================
      CLEAR OLD FLOATS
      ========================================================== */

#wpmem_reg .clear,
#wpmem_login .clear {
    display: block;
    clear: both;
    width: 100%;
    height: 0;
}


/* ==========================================================
      MOBILE
      ========================================================== */

@media screen and (max-width: 720px) {
    #wpmem_reg,
    #wpmem_login {
        width: 100% !important;
        max-width: 100%;
        margin: 20px auto;
    }
    #wpmem_reg fieldset,
    #wpmem_login fieldset {
        padding: 22px 18px 24px;
        border-radius: 8px;
    }
    #wpmem_reg legend,
    #wpmem_login legend {
        margin-bottom: 20px;
        font-size: 20px;
    }
    #wpmem_reg input[type="text"],
    #wpmem_reg input[type="email"],
    #wpmem_reg input[type="password"],
    #wpmem_reg input[type="url"],
    #wpmem_reg input[type="tel"],
    #wpmem_reg input[type="number"],
    #wpmem_reg input[type="date"],
    #wpmem_login input[type="text"],
    #wpmem_login input[type="email"],
    #wpmem_login input[type="password"] {
        height: 44px !important;
    }
    #wpmem_reg .button_div,
    #wpmem_login .button_div {
        display: block;
    }
    #wpmem_reg input[type="submit"],
    #wpmem_reg .buttons,
    #wpmem_login input[type="submit"],
    #wpmem_login .buttons {
        width: 100% !important;
        max-width: none !important;
        height: 44px;
    }
}