/* midess Signup/Login - MicroIntech style */
/* Consistent font across the home page */
body,
body :where(
  header, nav, main, section, article, aside, footer,
  div, h1, h2, h3, h4, h5, h6,
  p, a, span, label, input, textarea, select, option, button,
  ul, ol, li, table, th, td, small, strong, em, b,
  summary, blockquote
):not(
  .fa, .fas, .far, .fab, .fal, .fad, .fat,
  .fa-solid, .fa-regular, .fa-brands,
  .material-icons, .material-symbols-outlined
) {
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.midess_signup_login_document,
.midess_signup_login_body {
    margin: 0;
    padding: 0
}
.midess_signup_login_body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-block-size: 100dvh;
    background: #f7f9fc
}
.midess_signup_login_main,
.midess_signup_login_auth_modal_overlay {
    font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: #303943;
    overflow-wrap: anywhere
}
.midess_signup_login_main *,
.midess_signup_login_auth_modal_overlay * {
    box-sizing: border-box
}
.midess_signup_login_main {
    display: grid;
    gap: 16px;
    padding: 16px clamp(16px, 3vw, 42px) 22px
}
.midess_signup_login_intro_section {
    padding: 15px 20px;
    border: 1px solid #e4eaf3;
    border-radius: 14px;
    background: linear-gradient(110deg, #eaf0fd, #f7faff);
    box-shadow: 0 5px 18px rgba(55, 69, 96, .05)
}
.midess_signup_login_intro_text,
.midess_signup_login_contact_text {
    margin: 0;
    color: #556276;
    line-height: 1.55
}
.midess_signup_login_intro_text {
    font-size: 14px
}
.midess_signup_login_contact_text {
    margin-top: 7px;
    font-size: 13px
}
.midess_signup_login_contact_text strong {
    color: #2563eb;
    font-weight: 700
}
.midess_signup_login_form_section {
    display: flex;
    justify-content: center;
    align-items: start
}
.midess_signup_login_auth_container {
    width: 45%;
    margin: 0 auto;
    padding: clamp(20px, 2vw, 30px);
    border: 1px solid #e4eaf3;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(55, 69, 96, .08)
}
.midess_signup_login_tabs {
    display: flex;
    gap: 8px;
    padding: 5px;
    margin: 0 0 22px;
    border-radius: 12px;
    background: #eef1fb
}
.midess_signup_login_tabs button {
    flex: 1;
    padding: 11px 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #52627f;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s
}
.midess_signup_login_tabs button:hover {
    color: #2563eb
}
.midess_signup_login_tabs button.midess_signup_login_active {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 5px 14px rgba(37, 99, 235, .25)
}
.midess_signup_login_tabs button:disabled {
    opacity: .5;
    cursor: not-allowed
}
.midess_signup_login_auth_container form {
    display: none;
    margin: 0
}
.midess_signup_login_auth_container form.midess_signup_login_active {
    display: block
}
.midess_signup_login_form_heading {
    margin: 0 0 22px;
    text-align: center
}
.midess_signup_login_form_kicker {
    display: block;
    margin-bottom: 12px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .28em
}
.midess_signup_login_form_heading h1 {
    margin: 0;
    color: #303943;
    font-size: clamp(24px, 2.4vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.04em
}
.midess_signup_login_form_heading p {
    margin: 12px auto 0;
    color: #51627f;
    font-size: 14px;
    line-height: 1.65
}
.midess_signup_login_fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0
}
.midess_signup_login_form_group {
    margin: 0 0 10px
}
.midess_signup_login_field_label {
    display: block;
    margin: 0 0 7px;
    color: #303943;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3
}
.midess_signup_login_auth_container input:not([type='checkbox']):not([type='hidden']),
.midess_signup_login_auth_container select,
.midess_signup_login_auth_container textarea {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e4eaf3;
    border-radius: 14px;
    outline: none;
    background: #fff;
    color: #303943;
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease
}
.midess_signup_login_auth_container input::placeholder,
.midess_signup_login_auth_container textarea::placeholder {
    color: #8490a5;
    opacity: 1
}
.midess_signup_login_auth_container input:hover,
.midess_signup_login_auth_container select:hover,
.midess_signup_login_auth_container textarea:hover {
    border-color: #a9bdf5;
    background: #fbfdff
}
.midess_signup_login_auth_container input:focus,
.midess_signup_login_auth_container select:focus,
.midess_signup_login_auth_container textarea:focus {
    border-color: #2563eb;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12)
}
.midess_signup_login_auth_container select {
    cursor: pointer;
    text-overflow: ellipsis
}
.midess_signup_login_auth_container select:disabled {
    background: #f2f5fa;
    color: #7f8ca2;
    cursor: not-allowed
}
.midess_signup_login_password_toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 13px;
    color: #596a86;
    font-size: 12px;
    cursor: pointer;
    user-select: none
}
.midess_signup_login_password_toggle input {
    margin: 0;
    accent-color: #2563eb
}
.midess_signup_login_signup_hint {
    margin: 10px 0;
    color: #66758e;
    font-size: 12px;
    line-height: 1.45
}
.midess_signup_login_signup_hint a,
#midess_signup_login_resend_otp {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer
}
.midess_signup_login_signup_hint a:hover,
#midess_signup_login_resend_otp:hover {
    text-decoration: underline
}
.midess_signup_login_btn,
.midess_signup_login_auth_modal_btn {
    display: block;
    width: fit-content;
    margin: 0px auto;
    padding: 10px 15px;
    border: 1px solid #2563eb;
    border-radius: 11px;
    background: #2563eb;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .22);
    transition: .2s
}
.midess_signup_login_btn:hover,
.midess_signup_login_auth_modal_btn:hover {
    background: #1b46c9;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .28);
    transform: translateY(-1px)
}
.midess_signup_login_btn:disabled {
    opacity: .6;
    cursor: wait;
    transform: none
}
.midess_signup_login_field_error_msg {
    margin-top: 5px;
    color: #b32632;
    font-size: 11px
}
.midess_signup_login_field_error_msg:empty {
    display: none
}
.midess_signup_login_auth_container .midess_signup_login_input_error {
    border-color: #cf3946 !important;
    background: #fffafa;
    box-shadow: 0 0 0 3px rgba(207, 57, 70, .08)
}
.midess_signup_login_duplicate_warning {
    display: none;
    margin: 5px 0 0;
    color: #94600a;
    font-size: 11px
}
.midess_signup_login_error,
.midess_signup_login_message,
.midess_signup_login_success_message,
.midess_signup_login_success_banner {
    margin: 0 0 14px;
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5
}
.midess_signup_login_error {
    border: 1px solid #f1cbd0;
    background: #fff3f4;
    color: #aa2431
}
.midess_signup_login_message {
    border: 1px solid #d7e3fb;
    background: #eff4ff;
    color: #315184
}
.midess_signup_login_success_message,
.midess_signup_login_success_banner {
    border: 1px solid #c8e5d3;
    background: #eef9f2;
    color: #21683d
}
.midess_signup_login_otp_card {
    padding: 0
}
.midess_signup_login_otp_card input[name='otp'],
#midess_signup_login_reset_otp {
    text-align: center;
    letter-spacing: .32em
}
.midess_signup_login_auth_modal_overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    overflow: auto;
    background: rgba(55, 69, 96, .55);
    backdrop-filter: blur(4px)
}
.midess_signup_login_auth_modal {
    width: 34%;
    margin: auto;
    padding: 24px;
    border: 1px solid #e4eaf3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(55, 69, 96, .22);
    text-align: center
}
.midess_signup_login_auth_modal h2 {
    margin: 0 0 9px;
    color: #303943;
    font-size: 21px;
    font-weight: 700
}
.midess_signup_login_auth_modal p {
    margin: 0 0 14px;
    color: #53627c;
    white-space: pre-line;
    font-size: 13px;
    line-height: 1.55
}
#midess_signup_login_password_hint {
    margin-top: 5px;
    color: #2b6a43;
    font-size: 11px
}
@media (width<=900px) {
    .midess_signup_login_auth_container {
        width: 78%
    }
    .midess_signup_login_auth_modal {
        width: 56%
    }
}
@media (width<=600px) {
    .midess_signup_login_main {
        padding: 10px
    }
    .midess_signup_login_intro_section {
        padding: 12px
    }
    .midess_signup_login_auth_container {
        width: 100%;
        padding: 18px 14px;
        border-radius: 16px
    }
    .midess_signup_login_form_heading h1 {
        font-size: 25px
    }
    .midess_signup_login_form_heading p {
        font-size: 13px
    }
    .midess_signup_login_form_kicker {
        font-size: 10px;
        letter-spacing: .22em
    }
    .midess_signup_login_auth_container input:not([type='checkbox']):not([type='hidden']),
    .midess_signup_login_auth_container select,
    .midess_signup_login_auth_container textarea {
        padding: 13px 14px;
        font-size: 16px
    }
    .midess_signup_login_auth_modal {
        width: 100%
    }
}
/* MicroClips access theme. Existing form visibility and validation stay intact. */
.midess_signup_login_main {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 72px);
    /* margin: clamp(16px, 3vw, 40px) clamp(16px, 4vw, 64px);
    padding: clamp(24px, 4vw, 60px); */
    border-radius: 24px;
}
.midess_signup_login_intro_section {
    position: relative;
    min-inline-size: 0;
    padding: clamp(12px, 2vw, 28px) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
}
.midess_signup_login_intro_section::before {
    content: "";
    position: absolute;
    inset: -10% -4%;
    z-index: -1;
    border-radius: 50%;
    background: repeating-radial-gradient(ellipse at center, transparent 0 48px, rgba(255, 255, 255, .28) 49px 50px, transparent 51px 96px);
    pointer-events: none;
}
.midess_signup_login_intro_text {
    color: #414c60;
    line-height: 1.8;
}
.midess_signup_login_contact_text {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(109, 130, 167, .2);
    color: #65718a;
    line-height: 1.75;
}
.midess_signup_login_contact_text strong { color: #2563eb; }
.midess_signup_login_form_section { min-inline-size: 0; }
.midess_signup_login_form_section {
    display: flex;
    justify-content: center;
    align-items: center;
}
.midess_signup_login_auth_container {
    width: 100%;
    min-inline-size: 0;
    margin: auto;
    padding: clamp(10px, 1.5vw, 20px);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(68, 87, 126, .09);
}
.midess_signup_login_tabs {
    padding: 5px;
    gap: 4px;
    margin-bottom: 26px;
    border: 1px solid #e5eaf3;
    border-radius: 10px;
    background: #f4f6fb;
}
.midess_signup_login_tabs button { border-radius: 7px; }
.midess_signup_login_tabs button.midess_signup_login_active {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 3px 10px rgba(37, 99, 235, .12);
}
.midess_signup_login_auth_container input:not([type='checkbox']):not([type='hidden']),
.midess_signup_login_auth_container select,
.midess_signup_login_auth_container textarea {
    padding: 8px;
    border-color: #dfe5ef;
    border-radius: 8px;
    background: #fafbfe;
    color: #414c60;
}
.midess_signup_login_auth_container input:hover,
.midess_signup_login_auth_container select:hover,
.midess_signup_login_auth_container textarea:hover {
    border-color: #b4c6ec;
    background: #fff;
}
.midess_signup_login_auth_container input:focus,
.midess_signup_login_auth_container select:focus,
.midess_signup_login_auth_container textarea:focus {
    border-color: #8daef1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .09);
}
.midess_signup_login_auth_container select:disabled {
    background: #f2f5fa;
    color: #7f8ca2;
}
.midess_signup_login_auth_container .midess_signup_login_input_error {
    border-color: #cf3946 !important;
    background: #fffafa;
    box-shadow: 0 0 0 3px rgba(207, 57, 70, .08);
}
.midess_signup_login_btn {
    width: 100%;
    margin-top: 16px;
    padding: 12px 18px;
    border-radius: 8px;
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .12);
}
.midess_signup_login_btn:hover {
    background: #2155ce;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .16);
}
.midess_signup_login_btn:disabled { transform: none; }
.midess_signup_login_btn:focus-visible,
.midess_signup_login_auth_modal_btn:focus-visible,
.midess_signup_login_tabs button:focus-visible,
.midess_signup_login_signup_hint a:focus-visible {
    outline: 3px solid #a6bff3;
    outline-offset: 3px;
}
.midess_signup_login_auth_modal {
    width: min(100%, 440px);
    border-radius: 20px;
}
@media (width <= 900px) {
    .midess_signup_login_main {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        margin: 20px;
        padding: 28px;
    }
    .midess_signup_login_intro_section { padding: 0; }
    .midess_signup_login_intro_section::before { background: none; }
    .midess_signup_login_auth_container { width: 100%; }
}
@media (width <= 600px) {
    .midess_signup_login_main {
        margin: 12px;
        padding: 18px;
        border-radius: 18px;
        gap: 20px;
    }
    .midess_signup_login_contact_text { margin-top: 16px; padding-top: 16px; }
    .midess_signup_login_auth_container { padding: 22px 18px; border-radius: 16px; }
    .midess_signup_login_tabs { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .midess_signup_login_tabs button,
    .midess_signup_login_btn,
    .midess_signup_login_auth_modal_btn,
    .midess_signup_login_auth_container input,
    .midess_signup_login_auth_container select,
    .midess_signup_login_auth_container textarea { transition: none; }
}


/* Center the form on the page, below the introduction. */
.midess_signup_login_main {
    grid-template-columns: minmax(0, 1fr);
}
.midess_signup_login_form_section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-inline-size: 0;
}
.midess_signup_login_auth_container {
    width: min(100%, 560px);
    min-inline-size: 0;
    margin: 0 auto;
}