/* ==========================================================
   Showcase Authentication Pages
========================================================== */

*,
*:before,
*:after {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;

    color: #fff;

    background: #000;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;
    line-height: 1.5;
}

a {
    color: #22d3ee;
    text-decoration: none;

    transition:
        color .2s ease,
        border-color .2s ease,
        background-color .2s ease;
}

a:hover,
a:focus {
    color: #67e8f9;
}


/* ==========================================================
   Page Layout
========================================================== */

.showcase-auth-page {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 100vh;

    padding: 48px 20px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(34, 211, 238, .12),
            transparent 34%
        ),
        radial-gradient(
            circle at 85% 90%,
            rgba(34, 211, 238, .07),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #000 0%,
            #080b0e 48%,
            #000 100%
        );
}

.showcase-auth-page:before {
    position: absolute;
    inset: 0;

    content: "";

    opacity: .22;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    pointer-events: none;
}

.showcase-auth-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 490px;
}

.showcase-auth-container.large {
    max-width: 100%;
}

/* ==========================================================
   Brand
========================================================== */

.showcase-auth-brand {
    margin-bottom: 25px;

    text-align: center;
}

.showcase-auth-logo {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 12px;
}

.showcase-auth-logo img {
    display: block;

    width: auto;
    max-width: 240px;
    max-height: 90px;
}

.showcase-auth-wordmark {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 60px;

    padding: 0 20px;

    color: #fff;

    font-size: 32px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: .035em;
}

.showcase-auth-wordmark span {
    color: #22d3ee;
}

.showcase-auth-brand-tagline {
    margin: 0;

    color: #64748b;

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .14em;
}


/* ==========================================================
   Authentication Card
========================================================== */

.showcase-auth-card {
    padding: 42px;

    background: rgba(26, 26, 26, .96);

    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 22px;

    box-shadow:
        0 28px 80px rgba(0, 0, 0, .55),
        0 0 0 1px rgba(34, 211, 238, .025);
}

.showcase-auth-heading {
    margin-bottom: 27px;

    text-align: center;
}

.showcase-auth-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    margin-bottom: 17px;

    color: #22d3ee;

    font-size: 24px;

    background: rgba(34, 211, 238, .075);

    border: 1px solid rgba(34, 211, 238, .20);
    border-radius: 50%;

    box-shadow: 0 0 30px rgba(34, 211, 238, .06);
}

.showcase-auth-heading h1 {
    margin: 0;

    color: #fff;

    font-size: 32px;
    font-weight: 900;
    line-height: 1.2;
}

.showcase-auth-heading p {
    max-width: 390px;

    margin: 10px auto 0;

    color: #94a3b8;

    font-size: 14px;
    line-height: 1.8;
}


/* ==========================================================
   Message Containers
========================================================== */

.showcase-auth-message {
    display: flex;

    align-items: flex-start;

    margin-bottom: 22px;
    padding: 16px 17px;

    border-radius: 13px;
}

.showcase-auth-message > i {
    flex: 0 0 auto;

    margin: 3px 12px 0 0;

    font-size: 18px;
}

.showcase-auth-message-content {
    flex: 1 1 auto;

    min-width: 0;
}

.showcase-auth-message strong {
    display: block;

    color: inherit;

    font-size: 14px;
    font-weight: 900;
}

.showcase-auth-message p {
    margin: 4px 0 0;

    color: #cbd5e1;

    font-size: 12px;
    line-height: 1.6;
}

.showcase-auth-message-error {
    color: #f87171;

    background: rgba(248, 113, 113, .075);

    border: 1px solid rgba(248, 113, 113, .22);
}

.showcase-auth-message-success {
    color: #86efac;

    background: rgba(34, 197, 94, .07);

    border: 1px solid rgba(34, 197, 94, .20);
}

.showcase-auth-message-info {
    color: #67e8f9;

    background: rgba(34, 211, 238, .07);

    border: 1px solid rgba(34, 211, 238, .20);
}


/* ==========================================================
   Fields
========================================================== */

.showcase-auth-field {
    margin-bottom: 20px;
}

.showcase-auth-field label {
    display: block;

    margin-bottom: 8px;

    color: #e2e8f0;

    font-size: 13px;
    font-weight: 900;
}

.showcase-auth-field input {
    width: 100%;
    height: 54px;

    margin: 0;
    padding: 0 15px;

    color: #fff;

    background: #101010;

    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 11px;

    box-shadow: none;

    font-size: 15px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

.showcase-auth-field input:hover {
    border-color: rgba(255, 255, 255, .20);
}

.showcase-auth-field input:focus {
    color: #fff;

    background: #101010;

    border-color: #22d3ee;

    box-shadow: 0 0 0 3px rgba(34, 211, 238, .10);

    outline: none;
}

.showcase-auth-field input::placeholder {
    color: #475569;

    font-size: 15px;
}

.showcase-auth-input-wrap {
    position: relative;
}

.showcase-auth-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 18px;
    z-index: 2;

    color: #64748b;

    font-size: 14px;

    transform: translateY(-50%);

    pointer-events: none;
}

.showcase-auth-input-wrap input {
    padding-left: 48px;
}

.showcase-auth-password-wrap input {
    padding-right: 56px;
}

.showcase-auth-field-note {
    display: block;

    margin-top: 7px;

    color: #64748b;

    font-size: 11px;
    line-height: 1.5;
}

.showcase-auth-field-error {
    display: none;

    margin-top: 7px;

    color: #f87171;

    font-size: 12px;
    line-height: 1.45;
}

.showcase-auth-field.has-error input {
    border-color: rgba(248, 113, 113, .70);

    box-shadow: 0 0 0 3px rgba(248, 113, 113, .08);
}

.showcase-auth-field.has-error .showcase-auth-field-error {
    display: block;
}


/* ==========================================================
   Password Visibility
========================================================== */

.showcase-auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 3;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    margin: 0;
    padding: 0;

    color: #64748b;

    background: transparent;

    border: 0;
    border-radius: 8px;

    font-size: 14px;

    transform: translateY(-50%);

    cursor: pointer;
}

.showcase-auth-password-toggle:hover,
.showcase-auth-password-toggle:focus {
    color: #22d3ee;

    background: rgba(34, 211, 238, .07);

    outline: none;
}


/* ==========================================================
   Login Options
========================================================== */

.showcase-auth-options {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin: -2px 0 21px;
}

.showcase-auth-checkbox {
    display: inline-flex;

    align-items: center;

    margin: 0;

    color: #94a3b8;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.showcase-auth-checkbox input {
    width: 17px;
    height: 17px;

    margin: 0 8px 0 0;
}

.showcase-auth-forgot-link {
    color: #94a3b8;

    font-size: 12px;
    font-weight: 800;
}

.showcase-auth-forgot-link:hover,
.showcase-auth-forgot-link:focus {
    color: #22d3ee;
}


/* ==========================================================
   Password Requirements
========================================================== */

.showcase-password-requirements {
    margin: 1px 0 22px;
    padding: 17px 18px;

    background: rgba(0, 0, 0, .18);

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
}

.showcase-password-requirements > strong {
    color: #e2e8f0;

    font-size: 13px;
    font-weight: 900;
}

.showcase-password-requirements ul {
    display: flex;

    flex-wrap: wrap;

    margin: 12px 0 0;

    list-style: none;
}

.showcase-password-requirements li {
    position: relative;

    width: 50%;

    margin-bottom: 8px;
    padding-left: 21px;

    color: #64748b;

    font-size: 11px;
}

.showcase-password-requirements li:before {
    position: absolute;
    top: 4px;
    left: 2px;

    width: 8px;
    height: 8px;

    content: "";

    background: #334155;

    border-radius: 50%;
}

.showcase-password-requirements li.valid {
    color: #86efac;
}

.showcase-password-requirements li.valid:before {
    top: 0;
    left: 0;

    width: auto;
    height: auto;

    content: "\f058";

    color: #22c55e;

    background: transparent;

    font-family: "Font Awesome 6 Free";
    font-size: 12px;
    font-weight: 900;
}


/* ==========================================================
   Buttons
========================================================== */

.showcase-auth-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 56px;

    margin: 3px 0 0;
    padding: 13px 20px;

    color: #031018;

    font-size: 13px;
    font-weight: 900;

    text-align: center;
    text-transform: uppercase;
    letter-spacing: .045em;

    background: #22d3ee;

    border: 1px solid #22d3ee;
    border-radius: 11px;

    cursor: pointer;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.showcase-auth-button i {
    margin-right: 8px;

    font-size: 14px;
}

.showcase-auth-button:hover,
.showcase-auth-button:focus {
    color: #031018;

    background: #67e8f9;
    border-color: #67e8f9;

    box-shadow: 0 8px 24px rgba(34, 211, 238, .14);

    transform: translateY(-1px);
}

.showcase-auth-button:disabled {
    cursor: not-allowed;

    opacity: .55;

    box-shadow: none;

    transform: none;
}

.showcase-auth-secondary-button {
    color: #e2e8f0;

    background: rgba(255, 255, 255, .045);

    border-color: rgba(255, 255, 255, .12);
}

.showcase-auth-secondary-button:hover,
.showcase-auth-secondary-button:focus {
    color: #fff;

    background: rgba(255, 255, 255, .09);

    border-color: rgba(255, 255, 255, .22);
}


/* ==========================================================
   Card Footer
========================================================== */

.showcase-auth-footer {
    margin-top: 25px;
    padding-top: 22px;

    text-align: center;

    border-top: 1px solid rgba(255, 255, 255, .07);
}

.showcase-auth-footer p {
    margin: 0;

    color: #64748b;

    font-size: 12px;
}

.showcase-auth-footer a {
    display: inline-flex;

    align-items: center;

    color: #94a3b8;

    font-size: 12px;
    font-weight: 800;
}

.showcase-auth-footer a i {
    margin-right: 7px;

    font-size: 12px;
}

.showcase-auth-footer a:hover,
.showcase-auth-footer a:focus {
    color: #22d3ee;
}

.showcase-auth-footer-link-row {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 17px;
}

.showcase-auth-register {
    margin-top: 16px !important;
}

.showcase-auth-register a {
    display: inline;

    color: #22d3ee;
}


/* ==========================================================
   Expired Reset Link
========================================================== */

.showcase-expired-link-actions {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


/* ==========================================================
   Site Footer
========================================================== */

.showcase-auth-site-footer {
    margin-top: 23px;

    color: #475569;

    font-size: 11px;

    text-align: center;
}

.showcase-auth-site-footer p {
    margin: 0;
}

.showcase-auth-site-footer a {
    color: #64748b;
}

.showcase-auth-site-footer a:hover {
    color: #22d3ee;
}


/* ==========================================================
   Responsive
========================================================== */

@media only screen and (max-width: 40em) {

    .showcase-auth-page {
        align-items: flex-start;

        padding: 28px 14px;
    }

    .showcase-auth-brand {
        margin-bottom: 18px;
    }

    .showcase-auth-wordmark {
        font-size: 28px;
    }

    .showcase-auth-brand-tagline {
        font-size: 10px;
        line-height: 1.5;
    }

    .showcase-auth-card {
        padding: 34px 24px;

        border-radius: 18px;
    }

    .showcase-auth-heading {
        margin-bottom: 23px;
    }

    .showcase-auth-icon {
        width: 64px;
        height: 64px;

        font-size: 22px;
    }

    .showcase-auth-heading h1 {
        font-size: 28px;
    }

    .showcase-auth-heading p {
        font-size: 13px;
        line-height: 1.7;
    }

    .showcase-auth-field label {
        font-size: 13px;
    }

    .showcase-auth-field input {
        height: 52px;

        font-size: 15px;
    }

    .showcase-auth-field input::placeholder {
        font-size: 15px;
    }

    .showcase-auth-button {
        min-height: 54px;

        font-size: 13px;
    }

    .showcase-auth-options {
        align-items: flex-start;
        flex-direction: column;

        gap: 12px;
    }

    .showcase-password-requirements li {
        width: 100%;
    }

    .showcase-auth-footer-link-row {
        flex-direction: column;

        gap: 11px;
    }

}