html, body.auth-page { min-height: 100%; }
body.auth-page {
    margin: 0;
    overflow-x: hidden;
    background: #fff;
    color: #171725;
    font-family: "Public Sans", sans-serif;
}
.auth-canvas {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}
.auth-frame {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(1075px, 100%);
}
.auth-visual {
    width: 50.25%;
    height: 545px;
    flex: 0 1 540px;
}
.auth-visual img { display: block; width: 100%; height: 100%; object-fit: contain; }
.auth-card {
    width: 49.75%;
    min-width: 0;
    flex: 1 1 535px;
    padding: 48px;
    border: 1px solid #e1e2e5;
    background: #fff;
}
.auth-login .auth-canvas { padding-top: 153px; }
.auth-login .auth-frame,
.auth-login .auth-card { align-self: flex-start; }
.auth-login .auth-card { min-height: 538px; padding-top: 68px; }
.auth-login .auth-card .form-group { margin-bottom: 15px; }
.auth-store-icon {
    position: relative;
    width: 40px;
    height: 32px;
    margin-bottom: 48px;
    border: 1px solid #3a3a3a;
    border-radius: 2px;
    background: linear-gradient(90deg, #dd2434 0 25%, #176fc2 25% 50%, #efd326 50% 75%, #3a8b34 75%);
}
.auth-store-icon::before {
    position: absolute;
    content: "";
    left: 10px;
    top: -14px;
    width: 20px;
    height: 15px;
    border: 4px solid #4a4a4a;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}
.auth-heading {
    margin: 0 0 24px;
    font-family: Georgia, serif;
    font-size: 16px;
    font-weight: 400;
}
.auth-welcome {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: #171725;
}
.auth-register-text {
    font-size: 12px;
    color: #9d9da6;
}
.auth-register-link {
    margin-left: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #171725;
    text-decoration: none;
}
.auth-register-link:hover { text-decoration: underline; }
.auth-back {
    margin-top: 16px;
    margin-right: -16px;
}
.auth-back-link {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: #171725;
    text-decoration: none;
}
.auth-back-link:hover { text-decoration: underline; }
.auth-back-link i { margin-right: 6px; font-size: 18px; }
.auth-section-title {
    margin: 20px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e1e2e5;
    font-size: 14px;
    font-weight: 700;
    color: #171725;
}
.auth-card-seller {
    padding: 32px 48px;
    overflow-y: auto;
}
.auth-visual-seller {
    height: auto;
    min-height: 545px;
    flex: 0 1 540px;
}
.auth-card label { margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.auth-card .form-control {
    height: 43px;
    border-color: #d9dce3;
    border-radius: 0;
    font-size: 14px;
}
.auth-card .form-group { margin-bottom: 18px; }
.auth-card .form-check-label { color: #8c8c96; font-weight: 400; }
.auth-card .auth-link { color: #7f7f86; font-size: 12px; text-decoration: underline; }
.auth-card .auth-submit {
    height: 44px;
    border: 0;
    border-radius: 0;
    background: #f44368;
    color: #fff;
    font-weight: 700;
}
.auth-password-wrap { position: relative; }
.auth-password-wrap i {
    position: absolute;
    right: 10px;
    top: 16px;
    width: 16px;
    height: 10px;
    border: 2px solid #171725;
    border-radius: 50%;
    font-size: 0;
}
.auth-password-wrap i::before {
    position: absolute;
    content: "";
    top: 2px;
    left: 5px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #171725;
}

.auth-register { background: #dedede; }
.auth-register .auth-canvas { padding-top: 221px; background: #dedede; }
.auth-register .auth-canvas::before {
    position: absolute;
    content: "";
    top: 230px;
    left: 50%;
    width: 505px;
    height: 440px;
    transform: translateX(-50%);
    border: 20px solid rgb(100 100 100 / 12%);
    border-radius: 18px;
}
.auth-register .auth-frame { width: 350px; }
.auth-register .auth-card { width: 350px; padding: 0 25px 22px; align-self: flex-start; border-radius: 3px; box-shadow: 0 1px 4px rgb(0 0 0 / 10%); }
.auth-register-title {
    margin: 0 -25px 20px;
    padding: 17px 25px;
    border-bottom: 1px solid #e1e2e5;
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: 400;
}
.auth-register .form-control { height: 42px; border-radius: 5px; padding-left: 16px; }
.auth-register .form-group { margin-bottom: 16px; }
.auth-register .form-check { margin-bottom: -3px; }
.auth-register .auth-submit { height: 50px; border-radius: 5px; background: #0d7ff2; }
.auth-register .auth-signin { color: #087ef1; }

.auth-forgot .auth-canvas,
.auth-reset .auth-canvas { align-items: center; background: #f5f5f5; }
.auth-forgot .auth-frame,
.auth-reset .auth-frame { width: 440px; }
.auth-forgot .auth-card,
.auth-reset .auth-card { width: 440px; padding: 40px; }

@media (max-width: 991.98px) {
    .auth-login .auth-canvas { display: block; padding-top: 157px; }
    .auth-login .auth-frame { display: block; width: 100%; }
    .auth-login .auth-visual {
        position: absolute;
        z-index: -1;
        top: -157px;
        left: 50%;
        width: min(500px, 100%);
        height: 360px;
        transform: translateX(-50%);
    }
    .auth-login .auth-card {
        width: 100%;
        max-width: 535px;
        margin-right: auto;
        margin-left: auto;
        min-height: 549px;
        padding: 71px 25px 40px;
        border-radius: 24px;
    }
    .auth-login .auth-store-icon { margin: 0 auto 47px; }
    .auth-login .auth-heading { margin-bottom: 25px; text-align: center; }
}

@media (max-width: 767.98px) {
    .auth-register .auth-canvas { padding-top: 194px; }
    .auth-register .auth-canvas::before { display: none; }
    .auth-register .auth-frame,
    .auth-register .auth-card { width: 360px; }

    .auth-forgot .auth-canvas,
    .auth-reset .auth-canvas { padding: 24px 15px; }
    .auth-forgot .auth-frame,
    .auth-reset .auth-frame,
    .auth-forgot .auth-card,
    .auth-reset .auth-card { width: 100%; }
    .auth-forgot .auth-card,
    .auth-reset .auth-card { padding: 28px 24px; }
}